/* Al Raya Core — Selected Work + Project index. Colours follow the surrounding text colour,
   so the widgets work on dark and light sections alike. */
.ar-windex{list-style:none;margin:0;padding:0}
.ar-windex li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:baseline;gap:8px;padding:5px 0;border-top:1px solid color-mix(in srgb,currentColor 14%,transparent)}
.ar-windex li:last-child{border-bottom:1px solid color-mix(in srgb,currentColor 14%,transparent)}
.ar-windex span{font-family:var(--ar-mono,monospace);font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--ar-red-soft,#FF6B75)}
.ar-windex a{display:block;padding-block:10px;font-size:18px;font-weight:700;letter-spacing:-.015em;text-decoration:none;color:inherit}
.ar-windex a:hover{color:var(--ar-red-soft,#FF6B75)}
.ar-windex em{font-family:var(--ar-mono,monospace);font-style:normal;font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;opacity:.62}
.ar-light .ar-windex span,.ar-light .ar-windex a:hover{color:var(--ar-red-text,#C22E3D)}

.ar-work{--ar-work-gap:clamp(64px,7.2vw,104px);display:flex;flex-direction:column;gap:var(--ar-work-gap)}
.ar-pj{position:relative;--ar-acc:#E63D49}
.ar-pj__media{position:relative;display:block;color:inherit}
.ar-pj__glow{position:absolute;inset:10% 6% -4%;border-radius:50%;background:var(--ar-acc);filter:blur(110px);opacity:.34;pointer-events:none}
.ar-pj .ar-art{position:relative;margin:0;border-radius:clamp(16px,1.8vw,26px);overflow:hidden;box-shadow:0 60px 110px -40px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.14)}
.ar-light .ar-pj .ar-art{box-shadow:0 40px 80px -40px rgba(8,34,48,.5),0 0 0 1px rgba(8,34,48,.12)}
.ar-pj .ar-art img{display:block;width:100%;height:auto;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.ar-pj__media:hover .ar-art img{transform:scale(1.015)}
.ar-pj__meta,.ar-pj__text{position:relative;z-index:1}
.ar-pj__title{margin:0;font-family:var(--ar-font,inherit);font-stretch:108%;font-weight:800;letter-spacing:-.045em;line-height:.95;color:inherit}
.ar-pj__title a{color:inherit;text-decoration:none}
.ar-pj__title a:hover{color:var(--ar-acc)}
.ar-pj__cat{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--ar-mono,monospace);font-size:12px;font-weight:500;letter-spacing:.16em;line-height:1.5;text-transform:uppercase;opacity:.86}
.ar-pj__cat i{flex:none;width:8px;height:8px;margin-inline-end:4px;border-radius:50%;background:var(--ar-acc);box-shadow:0 0 0 5px color-mix(in srgb,var(--ar-acc) 26%,transparent)}
.ar-pj__desc{margin:0;font-size:16px;line-height:1.5;color:color-mix(in srgb,currentColor 66%,transparent)}
.ar-pj__link{display:inline-flex;align-items:center;gap:12px;min-height:50px;padding:0 8px 0 22px;border-radius:999px;border:1px solid color-mix(in srgb,currentColor 28%,transparent);font-family:var(--ar-mono,monospace);font-size:13px;font-weight:500;letter-spacing:.03em;text-decoration:none;color:inherit;white-space:nowrap;transition:border-color .2s ease,transform .2s ease}
.ar-pj__link:hover{border-color:currentColor;transform:translateY(-2px);color:inherit}
.ar-pj__link em{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:#082230;font-style:normal}
.ar-light .ar-pj__link em{background:#082230;color:#fff}
[dir=rtl] .ar-pj__link em svg{transform:scaleX(-1)}

/* Feature project */
.ar-pj--feat .ar-pj__meta{display:grid;grid-template-columns:clamp(64px,6.7vw,96px) minmax(0,1fr) auto;column-gap:10px;align-items:start;margin-top:clamp(24px,2.7vw,38px)}
.ar-pj--feat .ar-pj__no{font-stretch:118%;font-weight:800;font-size:clamp(40px,4.5vw,64px);line-height:.85;letter-spacing:-.05em;color:var(--ar-acc)}
.ar-pj--feat .ar-pj__title{font-size:clamp(36px,4.6vw,66px);line-height:.92}
.ar-pj--feat .ar-pj__cat{margin-top:20px}
.ar-pj--feat .ar-pj__desc{margin-top:12px;max-width:520px}
.ar-pj--feat .ar-pj__link{margin-top:8px}

/* Alternating projects */
.ar-pj--side{display:grid;grid-template-columns:minmax(0,852fr) minmax(0,392fr);column-gap:clamp(28px,3.6vw,52px);align-items:end}
.ar-pj--side.ar-pj--rev{grid-template-columns:minmax(0,392fr) minmax(0,852fr)}
.ar-pj--side.ar-pj--rev .ar-pj__media{order:2}
.ar-pj--side .ar-pj__no{font-stretch:118%;font-weight:800;font-size:clamp(96px,12.2vw,176px);line-height:.76;letter-spacing:-.06em;background:linear-gradient(180deg,var(--ar-acc) -10%,color-mix(in srgb,currentColor 4%,transparent) 105%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.ar-pj--side .ar-pj__title{margin-top:34px;font-size:clamp(34px,3.75vw,54px)}
.ar-pj--side .ar-pj__cat{margin-top:18px}
.ar-pj--side .ar-pj__desc{margin-top:14px;max-width:380px}
.ar-pj--side .ar-pj__link{margin-top:28px}

/* Grid layout (Our Work page) */
.ar-work--grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(48px,5.6vw,80px) clamp(20px,2.2vw,32px)}
.ar-pj--card .ar-pj__text{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:baseline;margin-top:24px}
.ar-pj--card .ar-pj__no{font-family:var(--ar-mono,monospace);font-size:13px;font-weight:500;letter-spacing:.14em;color:var(--ar-acc)}
.ar-pj--card .ar-pj__title{font-size:clamp(26px,2.6vw,36px)}
.ar-pj--card .ar-pj__cat,.ar-pj--card .ar-pj__desc,.ar-pj--card .ar-pj__link{grid-column:2}
.ar-pj--card .ar-pj__cat{margin-top:12px;font-size:11px}
.ar-pj--card .ar-pj__desc{margin-top:10px}
.ar-pj--card .ar-pj__link{margin-top:20px;justify-self:start}
.ar-pj--card .ar-pj__glow{filter:blur(80px);opacity:.26}

@media (max-width:900px){
  .ar-pj--feat .ar-pj__meta{grid-template-columns:auto minmax(0,1fr);row-gap:20px}
  .ar-pj--feat .ar-pj__link{grid-column:1/-1;justify-self:start}
  .ar-pj--side,.ar-pj--side.ar-pj--rev{grid-template-columns:minmax(0,1fr);row-gap:26px}
  .ar-pj--side.ar-pj--rev .ar-pj__media{order:0}
  .ar-pj--side .ar-pj__text{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:start}
  .ar-pj--side .ar-pj__no{font-size:clamp(56px,13vw,88px);line-height:.85}
  .ar-pj--side .ar-pj__title{margin-top:2px}
  .ar-pj--side .ar-pj__cat,.ar-pj--side .ar-pj__desc,.ar-pj--side .ar-pj__link{grid-column:2}
  .ar-pj--side .ar-pj__link{justify-self:start;margin-top:20px}
  .ar-work--grid{grid-template-columns:minmax(0,1fr)}
  .ar-pj__glow{filter:blur(60px)}
}
@media (max-width:480px){
  .ar-pj__link{font-size:12px;padding-inline-start:16px;max-width:100%}
  .ar-pj__link span:first-child{overflow:hidden;text-overflow:ellipsis}
  .ar-pj__cat{font-size:10.5px;letter-spacing:.12em}
  .ar-windex li{grid-template-columns:34px minmax(0,1fr)}
  .ar-windex em{grid-column:2}
}