@charset "utf-8";
/* ==========================================================================
   Register of motion, editing, corporate-film and production awards.

   Monochrome only — white, black, greys. The single exception is the content
   itself: a winning frame keeps its own colour, because that is the work.
   Interface, type, navigation and furniture stay achromatic.

   One typeface, Thmanyah Sans. The reference gets its headline contrast from
   pairing a geometric roman with an italic serif; with a single Arabic family
   the equivalent is weight against weight (900 vs 300) plus kashida, which
   stretches a line without ever changing a letterform.

   Layout follows the reference: a centred container that never runs to the
   viewport edge, very large vertical air, heavy corner radii, and a full-bleed
   motion field behind a centred statement.
   ========================================================================== */

/* --- 1. Typeface ---------------------------------------------------------- */
@font-face{font-family:"Thmanyah";src:url("../fonts/thmanyahsans-light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Thmanyah";src:url("../fonts/thmanyahsans-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Thmanyah";src:url("../fonts/thmanyahsans-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Thmanyah";src:url("../fonts/thmanyahsans-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Thmanyah";src:url("../fonts/thmanyahsans-black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

/* --- 2. Tokens ------------------------------------------------------------ */
:root{
  /* surfaces */
  --void:#060607;
  --void-2:#0B0B0D;
  --panel:#121214;
  --panel-2:#191A1C;
  --panel-3:#212225;
  --edge:#26272B;
  --edge-2:#35363B;

  /* ink — neutral greys, no hue. Contrast values are against --void. */
  --paper:#F3F3F4;
  --paper-2:#C6C6CA;
  --muted:#8C8C93;   /* 6.2:1 on --void, 5.7:1 on --panel */
  --dim:#7F7F87;     /* 5.1:1 on --void, 4.6:1 on --panel — small text still AA */
  --ink:#08080A;     /* type on a white pill */

  /* type scale */
  /* the floor only comes into play under 508px, so this is a phone-only change:
     «مرجع الجوائز العالمية» sets 352px at 2.6rem and a 360px Android leaves 323,
     which broke «العالمية» onto a line of its own. 2.35rem puts it at 318 and
     holds one line down to 360. Nothing at or above tablet width moves. */
  --t-display:clamp(2.35rem,7.4vw,6.1rem);
  --t-h2:clamp(2rem,4.4vw,3.6rem);
  --t-h3:clamp(1.25rem,1.9vw,1.6rem);
  --t-body:clamp(1rem,1.05vw,1.09rem);
  --t-small:.875rem;
  --t-label:.7rem;

  /* spacing */
  --s-1:.5rem; --s-2:.875rem; --s-3:1.25rem; --s-4:1.75rem;
  --s-5:2.5rem; --s-6:3.5rem; --s-7:5rem; --s-8:7rem; --s-9:9.5rem;

  /* curve scale — the reference is uniformly, heavily rounded */
  --r-sm:14px; --r-md:22px; --r-lg:30px; --r-xl:40px; --r-pill:999px;

  --gut:clamp(1.15rem,4vw,2.75rem);
  --maxw:1240px;     /* centred and contained — never edge to edge */

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* --- 3. Reset ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
p{text-wrap:pretty}
body,h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
/* Phone-only fixes that cost nothing on a desktop. `manipulation` drops the
   300ms double-tap wait iOS Safari still keeps on some elements, so a tap on a
   chip fires the moment the finger lifts; the tap-highlight is Safari's grey
   flash over a pressed control, which fights the pill's own :active state; and
   a long press on a button should open nothing, not select its label. */
a,button,input,label,[role="button"]{touch-action:manipulation}
html{-webkit-tap-highlight-color:transparent}
button{-webkit-user-select:none;user-select:none}
a{color:inherit;text-decoration:none}

html{
  background:var(--void);
  font-family:"Thmanyah",system-ui,-apple-system,"Segoe UI",sans-serif;
}
body{
  min-height:100dvh;
  background:var(--void);
  color:var(--paper);
  font-size:var(--t-body);
  font-weight:300;
  line-height:1.8;               /* Arabic needs the extra leading */
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* The browser hides [hidden] with a UA `display:none`, which any author
   `display` rule silently outranks — so `.tile{display:grid}` left every
   filtered-out body on screen. JS toggles `hidden` for the register filter,
   the load-more button, the sheet and the player, so this one line is what
   makes all four actually hide. */
[hidden]{display:none!important}

/* Latin runs inside Arabic copy — isolate so bidi never scrambles them */
.lat{direction:ltr;unicode-bidi:isolate;display:inline-block}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;display:inline-block}
.bi{unicode-bidi:isolate}

::selection{background:#fff;color:#000}

/* no border-radius here — the outline should trace whatever shape the element
   already is, so a pill button gets a pill ring, not a box */
:focus-visible{outline:2px solid #fff;outline-offset:3px}
:focus:not(:focus-visible){outline:none}

.skip{
  position:absolute;inset-inline-start:var(--gut);top:-100px;z-index:200;
  background:#fff;color:var(--ink);font-weight:700;
  padding:.75rem 1.25rem;border-radius:0 0 var(--r-sm) var(--r-sm);
  transition:top .2s var(--ease);
}
.skip:focus{top:0}

.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- 4. Shared primitives ------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

/* the reference sets every section the same way: a small tracked eyebrow, a
   very large centred statement, then one narrow line of support */
.eyebrow{
  font-size:var(--t-label);font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim);
}
/* Arabic is cursive: tracking pulls the joins apart and reads as a rendering
   fault, so an Arabic eyebrow carries its label with weight and colour only */
.eyebrow.ar{letter-spacing:normal;text-transform:none;font-size:.78rem}

.rule{height:1px;background:var(--edge);border:0;margin:0}

/* the two-weight headline. Line one is struck in black, line two drops to
   light — that weight jump is what the reference gets from roman vs italic. */
.hx{
  font-weight:900;line-height:1.12;letter-spacing:normal;
  text-wrap:balance;
}
.hx .li{
  display:block;font-weight:300;
  color:var(--paper-2);
}
/* The hero is the one place the two lines are read as a pause rather than as a
   wrap, so it gets air between them. Opening up `line-height` would have been
   the lazy way and would have loosened both lines internally as well; a top
   margin on the second line moves only the gap that was asked for. */
.hero .hx .li{margin-top:.16em}
/* the kashida does the optical stretching a negative tracking would do in
   Latin — it lengthens the baseline itself instead of squeezing the joins */
.kx{letter-spacing:normal}

.lede{
  font-size:clamp(1rem,1.25vw,1.15rem);
  line-height:1.85;color:var(--muted);font-weight:300;
  max-width:46ch;
}

/* buttons ------------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:48px;padding:.85rem 1.6rem;
  border-radius:var(--r-pill);
  font-weight:500;font-size:.95rem;
  transition:transform .25s var(--ease),background-color .25s var(--ease),
             border-color .25s var(--ease),color .25s var(--ease);
}
/* the reference's primary action: a solid white pill carrying a dark
   circular arrow badge */
.btn-solid{background:#fff;color:var(--ink);font-weight:700;padding-inline:.5rem 1.5rem}
.btn-solid:hover{transform:translateY(-2px);background:#e9e9ea}
.btn-solid .b{
  width:34px;height:34px;border-radius:50%;background:var(--ink);
  display:grid;place-items:center;flex:none;
}
.btn-solid .b svg{width:15px;height:15px;stroke:#fff;stroke-width:1.9;fill:none}
.btn-ghost{border:1px solid var(--edge-2);color:var(--paper-2)}
/* A pill answers the finger the instant it lands, not when it lifts. .96 is
   the whole travel — smaller reads as the button flinching. Declared after the
   hover rules so the press wins over the -2px lift while both apply. */
.btn:active{transform:scale(.96);transition-duration:.08s}
.btn-ghost:hover{border-color:var(--paper-2);color:var(--paper);background:rgba(255,255,255,.04)}

/* --- 5. Masthead ---------------------------------------------------------- */
.masthead{
  position:sticky;top:0;z-index:60;
  padding-block:1rem;
  background:linear-gradient(to bottom,rgba(6,6,7,.92),rgba(6,6,7,.6) 60%,transparent);
}
/* Three tracks with nothing in the first: the empty side balances the actions
   on the other, so the nav sits on the page's true centre line rather than the
   centre of whatever space the button leaves over. The columns are named
   explicitly because auto-placement would otherwise pull the nav into the empty
   first cell and shunt the whole bar to the start edge. */
.masthead-in{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s-3);
}

.nav{
  grid-column:2;justify-self:center;
  display:flex;align-items:center;gap:.2rem;
  background:rgba(24,24,27,.86);border:1px solid var(--edge);
  border-radius:var(--r-pill);padding:.3rem;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
.nav a{
  padding:.5rem 1.05rem;border-radius:var(--r-pill);font-size:.9rem;font-weight:400;
  color:var(--paper-2);transition:background-color .22s var(--ease),color .22s var(--ease);
  /* 44px, the touch floor. The pill was landing at 42 on a tablet, where this
     bar is the only navigation there is — the burger takes over below 640. The
     two pixels come out of the box, not out of the type, so nothing moves. */
  min-height:44px;display:inline-flex;align-items:center;white-space:nowrap;
}
.nav a:hover{background:var(--panel-3);color:var(--paper)}
.nav a[aria-current="true"]{background:var(--panel-3);color:var(--paper)}

.mast-act{grid-column:3;justify-self:end;display:flex;align-items:center;gap:.5rem}
.mast-act .btn{min-height:44px;padding-block:.6rem;font-size:.88rem}

.burger{display:none;width:44px;height:44px;border-radius:var(--r-pill);
  border:1px solid var(--edge);align-items:center;justify-content:center}
.burger svg{width:20px;height:20px;stroke:var(--paper);stroke-width:1.6;fill:none}

/* --- 6. Hero -------------------------------------------------------------- */
/* Full-bleed field of real winning frames, desaturated to greyscale and drifting
   slowly, with the statement centred over it. The motion is the subject's own
   material rather than stock footage. */
/* 820, not 940. The hero was sized to fill a screen, but nothing was using the
   height — it went into a 190px void between the buttons and the logo strip,
   which `justify-content:center` opened and `margin-top:auto` held open. The
   content is the same; only the empty part is gone. */
.hero{
  position:relative;isolation:isolate;
  min-height:min(92svh,820px);
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(2.75rem,6.5vw,5rem) 0;
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:-8% -2%;z-index:-2;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
  filter:grayscale(1) contrast(1.02) brightness(.46);
}
.hero-bg .reelcol{display:flex;flex-direction:column;gap:1rem;will-change:transform}
.hero-bg figure{
  flex:none;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--r-md);background:var(--panel);
}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.reelcol-a{animation:drift-up 78s linear infinite}
.reelcol-b{animation:drift-down 92s linear infinite}
.reelcol-c{animation:drift-up 66s linear infinite}
.reelcol-d{animation:drift-down 84s linear infinite}
@keyframes drift-up{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@keyframes drift-down{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}

/* The vignette that lets type sit on the field without a scrim box. The
   centre is not fully transparent: a white frame surviving brightness(.46)
   lands at ~4.2:1 against the paper tone, which carries the display line but
   fails the lede under it. A .22 floor takes the worst case to ~6:1 and is
   invisible against the reel, which is already dim by design. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(115% 78% at 50% 42%,rgba(6,6,7,.22) 0%,rgba(6,6,7,.68) 52%,var(--void) 88%),
    linear-gradient(to bottom,rgba(6,6,7,.9) 0%,rgba(6,6,7,.42) 30%,rgba(6,6,7,.72) 68%,var(--void) 100%);
}

.hero-in{position:relative;text-align:center;display:grid;justify-items:center}
.hero .eyebrow{margin-bottom:clamp(1.1rem,2vw,1.6rem)}
.hero h1{font-size:var(--t-display);max-width:19ch}
.hero .lede{margin-top:clamp(1.2rem,2vw,1.7rem);text-align:center;max-width:52ch}
.hero-act{
  margin-top:clamp(1.8rem,3vw,2.6rem);
  display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;
}

/* --- 6b. Hero logo strip -------------------------------------------------- */
/* The reference closes its hero with a row of monochrome partner marks; here
   those marks are the awarding bodies themselves. */
/* `margin-top:auto` is gone. It pinned the strip to the floor of the hero and
   let whatever height was left over pile up above it — 190px of nothing between
   the buttons and the marks. Now the gap is stated, and it is the same interval
   the lede and the buttons already use, so the hero reads as one column of
   evenly spaced blocks instead of two clusters with a hole between them. */
.strip{
  position:relative;padding-top:clamp(2rem,3.4vw,3rem);
  padding-bottom:clamp(.75rem,1.6vw,1.4rem);
}
/* Once the sentence became a single word, the corner it used to sit in read as
   a stray label. Centred, it works as a caption on the march below it — and it
   lines up with the eyebrow and the headline that lead the rest of the hero.
   At .74rem it had shrunk past the point of being read at all; at .98rem it is
   a caption with a voice, still well under the eyebrow it answers to. --muted
   rather than --dim for the same reason — this is text now, so it holds 4.5:1. */
.strip-l{
  text-align:center;font-size:clamp(.92rem,1.05vw,1rem);font-weight:500;
  color:var(--muted);letter-spacing:normal;margin-bottom:.95rem;
}
.strip-track{
  display:flex;gap:clamp(2.5rem,5vw,4.5rem);align-items:center;width:max-content;
  animation:march 68s linear infinite;
}
.strip-mask{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
}
/* .62 of each mark's own optical height — the strip is a whisper under the
   headline, but the marks still have to march past at even weight */
.strip img{max-height:calc(var(--h,40px) * .62);width:auto;flex:none;
  opacity:.62;transition:opacity .3s var(--ease)}
.strip img.solid{filter:brightness(0) invert(1)}
.strip img.plate{filter:grayscale(1)}
.strip:hover img{opacity:.85}
@keyframes march{from{transform:translate3d(0,0,0)}to{transform:translate3d(50%,0,0)}}

/* --- 7. Section furniture ------------------------------------------------- */
/* Centred, like every band in the reference: eyebrow, statement, one line. */
/* The single biggest lever on page height. At 10vw a wide screen was spending
   148px above and 148px below every band — 296px of nothing between one section
   and the next, three times over, before a word of content. 6vw keeps the bands
   clearly separate without the reader having to scroll through the separation.
   The floor moved less than the ceiling: on a phone the gap was already close
   to right, and it is the wide screen that was wasting the room. */
.section{padding-block:clamp(3.25rem,6vw,5.5rem)}
.section-head{
  display:grid;justify-items:center;text-align:center;gap:.75rem;
  margin-bottom:clamp(1.9rem,3.2vw,2.7rem);
}
/* 19ch, not 18: the longest second line on the page — «من الأكثر ارتباطاً
   بشغلك إلى الأوسع» — measures about 574px against 18ch's 568, so it broke to a
   third line while every other section head stayed at two. The unit scales with
   the heading, so this holds at every viewport. */
.section-head h2{font-size:var(--t-h2);max-width:19ch}
.section-head p{color:var(--muted);font-size:1rem;line-height:1.85;max-width:48ch}

/* --- 8. Strata (the five tiers) ------------------------------------------- */
/* The owner's own composition: five names set at display size, each with its
   index as a numeral behind it — large, and fading out downward so it reads as
   the ground the word is printed on rather than a second word beside it. No
   card, no rule, no caption: the numeral is the only furniture. Three names on
   the first line and two on the second, centred, which is what the flex wrap
   produces on its own at the widths where all five fit. */
/* Two rows, stated: three across, then two centred under them. A wrapping
   flex row was deciding this by width and on a wide screen gave 2-2-1, which
   read as a list that had been squeezed. Six columns let the second row sit
   in the gaps of the first — the numbers spread across the whole width
   instead of stacking down the middle. */
.strata{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1.1rem clamp(.5rem,1.5vw,1.5rem);
  max-width:1220px;margin-inline:auto;padding-top:1.4rem;
}
.stratum{grid-column:span 2}
.stratum:nth-child(4){grid-column:2/4}
.stratum:nth-child(5){grid-column:4/6}
.stratum{
  position:relative;isolation:isolate;
  padding:2.4rem 2rem 1.3rem 1.4rem;
  text-align:start;color:inherit;
  border-radius:var(--r-lg);
}
/* The hover surface. A box behind numeral and word that is not a fill but a
   fall-off: near-black at the top-start corner (the corner the numeral
   occupies), gone by the opposite one — so it reads as a light catching an
   edge, not as a button. The edge itself is a hairline drawn by a conic
   gradient that turns, a highlight sliding round the box the way it does on
   glass. Both are pseudo-elements so nothing in the DOM changes on hover. */
@property --strk{syntax:"<angle>";inherits:false;initial-value:0deg}
.stratum::before,.stratum::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .35s var(--ease);z-index:-1;
}
.stratum::before{
  background:linear-gradient(225deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.045) 45%,rgba(0,0,0,0) 100%);
}
.stratum::after{
  padding:1px;
  background:conic-gradient(from var(--strk),rgba(255,255,255,0) 0deg,rgba(255,255,255,.55) 40deg,rgba(255,255,255,0) 110deg,rgba(255,255,255,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.stratum:hover::before,.stratum:focus-visible::before,
.stratum:hover::after,.stratum:focus-visible::after{opacity:1}
.stratum:hover::after,.stratum:focus-visible::after{animation:strk 2.8s linear infinite}
@keyframes strk{to{--strk:360deg}}
/* the index. Text on a gradient rather than a colour so it fades within its
   own glyph: bright at the top edge, gone before the baseline, exactly as the
   mock has it. Placed on the start side and up, so the word overlaps its
   lower half. Nothing here answers the pointer on its own — the word does. */
.stratum-n{
  position:absolute;inset-inline-start:0;top:-.1em;
  font-size:clamp(5.6rem,9.2vw,8.8rem);font-weight:900;line-height:1;
  letter-spacing:-.04em;
  background:linear-gradient(to bottom,rgba(243,243,244,.34) 0%,rgba(243,243,244,.1) 55%,rgba(243,243,244,0) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  pointer-events:none;user-select:none;
  transition:transform .4s var(--ease-out),filter .4s var(--ease);
}
.stratum-t{position:relative;display:block;transition:transform .35s var(--ease-out)}
/* one word per tier, bold, and stretched with kashida rather than tracking */
.stratum-t h3{
  font-size:clamp(1.55rem,2.5vw,2.45rem);font-weight:700;line-height:1.3;
  letter-spacing:normal;white-space:nowrap;color:var(--paper);
}
/* the word lifts; the numeral brightens a shade under it and drifts the
   other way, so the two read as separate planes rather than one sticker */
.stratum:hover .stratum-t,.stratum:focus-visible .stratum-t{transform:translateY(-7px)}
.stratum:hover .stratum-n,.stratum:focus-visible .stratum-n{transform:translateY(4px);filter:brightness(1.5)}
.stratum:active .stratum-t{transform:translateY(-3px);transition-duration:.08s}

/* --- 9. Filter bar -------------------------------------------------------- */
.filters{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center;
  margin-bottom:var(--s-5);
}
.chip{
  min-height:44px;padding:.6rem 1.15rem;border-radius:var(--r-pill);
  border:1px solid var(--edge);color:var(--paper-2);
  font-size:.88rem;font-weight:400;
  transition:border-color .22s var(--ease),color .22s var(--ease),background-color .22s var(--ease);
  display:inline-flex;align-items:center;gap:.5rem;
}
.chip:hover{border-color:var(--edge-2);color:var(--paper);background:rgba(255,255,255,.03)}
.chip[aria-pressed="true"]{
  border-color:transparent;background:#fff;color:var(--ink);font-weight:700;
}
.chip .c{font-size:.76rem;color:var(--muted);font-variant-numeric:tabular-nums}
.chip:active,.fchip:active{transform:scale(.97);transition-duration:.08s}
/* the count on a pressed (white) chip: ink at .62 is 5.7:1, at .5 it was 3.7 */
.chip[aria-pressed="true"] .c{color:var(--ink);opacity:.62}

/* --- 9b. The cascade: body → year → category ------------------------------
   Three rows, each narrowing the one below it. They are stacked rather than
   merged into one wrapping field because the order *is* the meaning: the
   reader is meant to read down it. The label on the start edge carries the
   icon, so a row announces its axis without needing a sentence.

   Every chip is written by site.js from the list the grid is about to render,
   so nothing here ever has to hide a dead option — there are none to hide. */
.fbar{display:flex;flex-direction:column;gap:.55rem;margin-bottom:var(--s-5)}
.frow{display:flex;align-items:flex-start;gap:.75rem;padding:.35rem 0}
.frow + .frow{border-top:1px solid var(--edge);padding-top:.85rem}
/* a fixed width so the three axis labels line up as a column and every row of
   chips starts from the same edge — without it they read as unrelated strips */
.frow-l{
  display:inline-flex;align-items:center;gap:.42rem;flex:none;
  width:5.6rem;min-height:40px;padding-top:.15rem;
  font-size:.76rem;font-weight:500;color:var(--dim);
}
.frow-l svg{
  width:15px;height:15px;flex:none;
  stroke:var(--dim);stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
.fchips{display:flex;flex-wrap:wrap;gap:.4rem;flex:1 1 auto;min-width:0}
/* a wrapping flex row still shrinks its items before it wraps them, and a chip
   that gives way squeezes the mark inside it — AICP came out 3.7px tall. These
   wrap or overflow; they never compress. */
.fchips > .fchip{flex:none}
/* quieter and tighter than the register's chips: fifteen can be on screen at
   once, and at .88rem they would out-weigh the works they are filtering */
/* 44px is the floor, not a preference: below it a chip stops being reliably
   hittable with a thumb. The weight is dialled back instead of the box — a
   quieter fill and a smaller face keep fifteen of these from out-shouting the
   works they filter, without ever shrinking the target. */
.fchip{
  min-height:44px;padding:.45rem .85rem;font-size:.8rem;gap:.4rem;
  background:var(--panel);border-color:transparent;color:var(--paper-2);
}
.fchip:hover{background:var(--panel-2);border-color:var(--edge-2)}
.fchip[aria-pressed="true"]{background:#fff;color:var(--ink)}
.fchip .c{font-size:.7rem;color:var(--muted)}   /* 5.6:1 on the chip plate; .45 opacity was 3.1 */
.fchip[aria-pressed="true"] .c{color:var(--ink);opacity:.62}
/* the mark stands in for the body's written name; --h is the wall's optical
   height scaled down, so every mark still covers about the same area */
/* `height`, not `max-height`. A cap only ever shrinks, and these marks arrive
   at whatever size their own site drew them — so a cap left the small ones
   small and let the flex row decide the rest. Fixing the height and letting
   the width follow the aspect ratio is what makes --h mean the same thing on
   every mark, which is the whole point of weighting them by area. */
.fchip-m{
  height:var(--h,20px);width:auto;max-width:96px;object-fit:contain;
  flex:none;display:block;opacity:.9;
}
.fchip[aria-pressed="true"] .fchip-m{opacity:1}
.fchip-m.solid{filter:brightness(0) invert(1)}
.fchip-m.plate{filter:grayscale(1) brightness(1.9) contrast(1.15)}
/* a pressed chip turns white, and a white-filtered mark would vanish into it */
.fchip[aria-pressed="true"] .fchip-m.solid{filter:brightness(0)}
.fchip[aria-pressed="true"] .fchip-m.plate{filter:grayscale(1) brightness(.35) contrast(1.3)}
.fmore{color:var(--dim);border:1px dashed var(--edge-2);background:none}
.fmore:hover{color:var(--paper);border-style:solid;background:var(--panel)}
.fsum{font-size:.78rem;color:var(--dim);padding-top:.25rem;padding-inline-start:6.35rem;font-variant-numeric:tabular-nums}

@media (max-width:640px){
  /* the label moves above its chips: at this width a 5.6rem gutter leaves the
     chips a strip too narrow to hold two of them side by side */
  .frow{flex-direction:column;gap:.45rem}
  .frow-l{width:auto;min-height:0;padding-top:0}
  .fsum{padding-inline-start:0}

  /* Wrapped, these three rows stacked 944px tall on an 812px phone — the whole
     gallery started below the fold, and a filter that buries what it filters
     has stopped being a filter. Each row becomes a single scrolling line
     instead: ~64px, all three visible at once, and the 44px targets untouched.
     The rows bleed into the page gutter so a half-cut chip at the edge shows
     there is more to reach, which is what makes the scroll discoverable. */
  .fchips{
    width:100%;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-inline:calc(var(--gut) * -1);
    padding-inline:var(--gut);padding-block:.15rem;
  }
  .fchips::-webkit-scrollbar{display:none}
  .fchips > .fchip{scroll-snap-align:start}
}

.search{position:relative;width:min(100%,320px);margin-top:.5rem}
.search input{
  width:100%;min-height:46px;border-radius:var(--r-pill);
  background:var(--panel);border:1px solid var(--edge);
  /* logical: the extra room sits on the end side, where the icon is */
  padding-block:.6rem;padding-inline:1.2rem 2.9rem;
  font-size:.9rem;font-weight:300;text-align:center;
  transition:border-color .22s var(--ease);
}
.search input::placeholder{color:var(--dim)}
.search input:focus{border-color:var(--edge-2);outline:none}
.search svg{
  position:absolute;inset-inline-end:1.05rem;top:50%;transform:translateY(-50%);
  width:17px;height:17px;stroke:var(--dim);stroke-width:1.7;fill:none;pointer-events:none;
}

/* --- 10. The logo wall ---------------------------------------------------- */
/* The awarding bodies, led by their own official marks rather than a text
   list. Every mark is the real one, pulled from that body's own site; the
   only treatment is a filter, so no outline is redrawn or approximated. */
/* 182, not 204: 26 bodies fell into five rows of six with a ragged tail, and the
   wall was 920px of a page the reader is trying to get down. Seven across puts
   them in four rows and uses the width that was going into the gutters. The
   marks themselves are untouched — --h still sets their size, so nothing got
   harder to read; the room came out of the padding around them. */
.wall{
  display:grid;gap:clamp(.5rem,.85vw,.7rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,182px),1fr));
}
.tile{
  position:relative;display:grid;grid-template-rows:1fr auto;
  gap:.7rem;min-height:146px;
  background:var(--panel);border:1px solid var(--edge);
  border-radius:var(--r-lg);
  padding:1.15rem .9rem .9rem;
  text-align:center;overflow:hidden;
  /* A shadow this faint does not read as a shadow — it reads as the tile
     sitting a hair above the page, which is all a dark surface can carry
     before it turns into a grey smudge. It deepens on hover along with the
     lift, so the two say the same thing. */
  box-shadow:0 1px 2px rgba(0,0,0,.34);
  transition:border-color .3s var(--ease),transform .3s var(--ease),
             background-color .3s var(--ease),box-shadow .3s var(--ease);
}
.tile:hover,.tile:focus-visible{
  border-color:var(--edge-2);background:var(--panel-2);transform:translateY(-3px);
  box-shadow:0 10px 24px -8px rgba(0,0,0,.62);
}
/* The widest wordmark on the wall is about 14:1, so it is capped by the tile's
   width and not by --h — every pixel of side padding comes straight off its
   height, and it was landing at 11px. Letting this row bleed into the padding
   gives it back the tile's full width; the padding still holds for the name
   underneath, where it is doing real work. */
.tile-m{display:grid;place-items:center;min-height:56px;margin-inline:-.55rem}
/* --h is per-mark, written into the tag by logo-index.py: h = K/√ratio, so
   every mark covers about the same area. A flat max-height would make the
   upright badges shout and the long wordmarks whisper. */
/* The mark lifts a shade on hover as well as brightening. 1.04 is small enough
   that a wordmark does not visibly resample, and it is the whole animation —
   26 of these are on screen at once, so anything larger would turn the wall
   into a field of movement every time the pointer crosses it. */
.tile-m img{
  max-height:var(--h,40px);max-width:100%;width:auto;object-fit:contain;
  opacity:.92;transition:opacity .3s var(--ease),transform .4s var(--ease-out);
}
.tile:hover .tile-m img,.tile:focus-visible .tile-m img{transform:scale(1.04)}
/* single-tone marks flatten to white cleanly; two-tone marks would lose their
   knocked-out lettering that way, so those only lose their colour */
.tile-m img.solid{filter:brightness(0) invert(1)}
.tile-m img.plate{filter:grayscale(1)}
.tile:hover .tile-m img{opacity:1}
/* the one body whose own site publishes no separable mark — set in type
   rather than drawn, so nothing here is invented */
.tile-m .wm{
  font-size:1.05rem;font-weight:700;letter-spacing:.06em;color:var(--paper);
  line-height:1.2;
}
.tile-n{
  font-size:.78rem;font-weight:400;color:var(--dim);line-height:1.55;
  transition:color .3s var(--ease);
}
.tile:hover .tile-n{color:var(--paper-2)}
.tile-c{
  position:absolute;inset-block-start:.7rem;inset-inline-end:.8rem;
  font-size:.64rem;font-weight:500;color:var(--dim);
  font-variant-numeric:tabular-nums;opacity:0;transition:opacity .3s var(--ease);
}
.tile:hover .tile-c,.tile:focus-visible .tile-c{opacity:1}

.empty{
  grid-column:1/-1;text-align:center;color:var(--muted);
  padding:var(--s-7) var(--s-3);border:1px dashed var(--edge);border-radius:var(--r-lg);
}

/* --- 11. Works gallery ---------------------------------------------------- */
/* The frame is the card. Text is a caption under it, nothing more. */
/* three across at full width rather than four — the frame is the point, so it
   gets the room, and the caption stays a caption */
.works{
  display:grid;gap:clamp(.7rem,1.2vw,1.1rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,336px),1fr));
}
.work{
  border-radius:var(--r-lg);overflow:hidden;background:var(--panel);
  border:1px solid var(--edge);
  transition:border-color .3s var(--ease),transform .3s var(--ease);
  display:flex;flex-direction:column;text-align:start;
}
.work:hover,.work:focus-within{border-color:var(--edge-2);transform:translateY(-3px)}
.work-hit{
  position:relative;display:block;width:100%;text-align:start;
  aspect-ratio:16/9;overflow:hidden;background:var(--panel-3);
}
/* The frames are the only chromatic thing left on the page, and 24 of them at
   once out-shout every heading in the grid. Greyscale holds the wall as quiet
   as the rest of the site; the contrast nudge stops a desaturated frame from
   collapsing into mud.

   Colour comes back under the pointer, one frame at a time — the reader gets
   the work as it was graded without the grid ever carrying more than a single
   patch of colour at once. The trigger is the frame itself, not the card, so
   passing over the caption underneath does not fire it. .45s is slow enough to
   read as the image warming up rather than as a state flipping; the greyscale
   returns on the same curve the moment the pointer leaves.

   :focus-visible carries the same reveal, because a keyboard reader tabbing
   through the grid is doing exactly what a pointer hover does. */
/* `> img`, not a descendant selector. The frame is a direct child of the hit
   area, but so are the year pill and the body's mark — and that mark is a white
   knock-out of a coloured logo. A loose `img` here handed it `grayscale(0)` and
   a scale on every hover, i.e. it un-knocked-out the badge and nudged it. The
   child combinator says "the frame, and only the frame". */
.work-hit > img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06);
  transition:filter .45s var(--ease),transform .55s var(--ease-out);
}
.work-hit:hover > img,.work-hit:focus-visible > img{
  filter:grayscale(0) contrast(1);transform:scale(1.045);
}

/* A work with no frame. Rather than a grey rectangle or an invented still, the
   card shows the real mark of the body that gave the award, held at the same
   16/9 so the grid keeps its rhythm. It is dimmer and slightly inset, which
   reads as "no image exists" without a line of text having to say so. */
.work-hit.is-mark{
  display:grid;place-items:center;padding:1.4rem;
  background:linear-gradient(160deg,var(--panel-2) 0%,var(--panel-3) 100%);
}
.work-mk{display:grid;place-items:center;width:100%}
/* stays a descendant selector, unlike the frame rule above: an .is-mark card
   holds no logo badge — the mark *is* its image — so there is nothing here to
   exclude, and raising the specificity would out-rank the .solid/.plate
   treatments below and strip the marks of their knock-out. */
.work-hit.is-mark img{
  max-height:var(--h,38px);max-width:min(62%,190px);
  width:auto;height:auto;object-fit:contain;
  filter:none;opacity:.42;transition:opacity .4s var(--ease),transform .55s var(--ease-out);
}
.work-mk img.solid{filter:brightness(0) invert(1)}
.work-mk img.plate{filter:grayscale(1) brightness(1.85) contrast(1.1)}
/* the same trigger as the frames above — the mark brightens under the pointer
   instead of gaining colour, since it never had any to give back */
.work-hit.is-mark:hover img,.work-hit.is-mark:focus-visible img{opacity:.62;transform:none}
/* the last fallback: a body we hold no separable mark for, set in type */
.work-nm{
  font-size:.9rem;font-weight:500;color:var(--dim);
  text-align:center;padding:0 1rem;
}
/* always visible, never hover-only: on a phone there is no hover to reveal it */
.work-play{
  position:absolute;inset-block-end:.7rem;inset-inline-start:.7rem;
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.93);display:grid;place-items:center;
  transition:transform .3s var(--ease),background-color .3s var(--ease);
}
.work-hit:hover .work-play{transform:scale(1.08);background:#fff}
.work-play svg{width:16px;height:16px;fill:var(--ink);stroke:none}
.work-play svg.ext{fill:none;stroke:var(--ink);stroke-width:2;width:15px;height:15px}
/* deliberately the opposite corner from the play badge: the two sit on a
   diagonal so neither ever covers the other on a short, wide frame */
.work-y{
  position:absolute;inset-block-start:.7rem;inset-inline-end:.7rem;
  font-size:.68rem;font-weight:500;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  background:rgba(6,6,7,.72);color:var(--paper);
  border-radius:var(--r-pill);padding:.28rem .62rem;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
/* The caption is bidirectional — Latin titles and studios, Arabic award
   status. `text-align:start` would resolve per line against each line's own
   `dir="auto"`, so the Latin lines would flush left and the Arabic ones
   right, and the block would read as three misaligned fragments. A physical
   value inherits as-is, so every line hangs off the same edge — the start
   edge of an RTL page — while dir="auto" still orders each line internally. */
.work-b{padding:.9rem 1rem 1.05rem;text-align:right}
.work-b :is(h3,h4){font-size:.94rem;font-weight:500;line-height:1.5;color:var(--paper)}
.work-b .s{display:block;font-size:.78rem;color:var(--muted);margin-top:.3rem}
.work-b .c{display:block;font-size:.74rem;color:var(--dim);margin-top:.4rem}

/* The mark of the body that gave the award, on the one corner the year badge
   and the play disc leave free. Kept faint so it places the frame without
   competing with it — it is a footnote, not a second subject. */
.work-org{
  position:absolute;inset-block-end:.7rem;inset-inline-end:.7rem;
  display:grid;place-items:center;
  padding:.3rem .45rem;border-radius:var(--r-sm);
  background:rgba(6,6,7,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:.72;transition:opacity .3s var(--ease);
}
.work:hover .work-org{opacity:1}
.work-org img{height:var(--h,15px);width:auto;max-width:64px;object-fit:contain;display:block}
.work-org img.solid{filter:brightness(0) invert(1)}
.work-org img.plate{filter:grayscale(1) brightness(1.9) contrast(1.15)}

/* studio line — the icon carries the label, so no word is spent on "الاستوديو" */
.work-s{
  display:flex;align-items:flex-start;gap:.4rem;
  font-size:.78rem;color:var(--muted);margin-top:.4rem;line-height:1.5;
}
.work-s svg{
  width:14px;height:14px;flex:none;margin-top:.18rem;
  stroke:var(--dim);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;
}

/* the facts, as small chips rather than a paragraph. Wrapping keeps a long
   category from pushing the rest of the card out of shape. */
.work-meta{
  display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.6rem;
  list-style:none;padding:0;
}
/* 12px, not the 11.2px this started at: these chips are the smallest reading on
   the page and they carry the facts, so they sit on the floor rather than under
   it — the difference is one pixel of chip height and it is legible on a phone.
   --muted, not --dim, for the same reason: on the chip's own lighter plate
   --dim measures 4.39:1 and small text needs 4.5. The icons inherit the colour
   through currentColor, so they clear the 3:1 graphics floor in the same move. */
.work-meta li{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.75rem;line-height:1.4;color:var(--muted);
  background:var(--panel-2);border-radius:var(--r-sm);
  padding:.28rem .5rem;max-width:100%;
}
.work-meta li > span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.work-meta svg{
  width:13px;height:13px;flex:none;
  stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;
}
/* a level only earns a chip when it is not the plain "Winner" every card
   already implies, so when one appears it is a distinction — or a Nominee,
   which matters more. Either way it should not read as another grey fact. */
.work-meta li.lvl{color:var(--paper);background:rgba(255,255,255,.09)}

/* the second destination: present, reachable, and visibly not the main event */
.work-go{
  display:inline-flex;align-items:center;gap:.4rem;
  margin-top:.7rem;min-height:44px;padding:.35rem 0;
  font-size:.75rem;color:var(--muted);
  transition:color .22s var(--ease);
}
.work-go:hover{color:var(--paper)}
.work-go svg{
  width:14px;height:14px;flex:none;
  stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;
}
.work-go span{border-bottom:1px solid var(--edge-2);padding-bottom:1px}
.work-go:hover span{border-bottom-color:currentColor}
.work-go.is-weak{color:var(--dim)}

.more{display:flex;justify-content:center;margin-top:var(--s-5)}

/* --- 12. Video modal ------------------------------------------------------ */
/* Requirement one: the work has to be watchable without leaving the page. */
.modal{position:fixed;inset:0;z-index:120;display:none}
.modal.is-open{display:grid;place-items:center;padding:var(--gut)}
.modal-bg{
  position:absolute;inset:0;background:rgba(3,3,4,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  animation:fade .24s var(--ease);
}
.modal-in{
  position:relative;width:min(1080px,100%);
  animation:pop .3s var(--ease-out);
}
@keyframes pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
/* The close used to be display:none on the same frame — a player that vanishes
   reads as a crash. The exit is shorter than the entrance and travels less:
   the reader chose to leave, so the page should get out of the way, not
   perform. site.js adds .is-closing, waits for the frame to finish, then hides. */
.modal.is-closing .modal-bg{animation:fade .18s var(--ease) reverse forwards}
.modal.is-closing .modal-in{animation:pop-out .18s var(--ease) forwards}
@keyframes pop-out{to{opacity:0;transform:scale(.985)}}
.modal-frame{
  aspect-ratio:16/9;width:100%;border-radius:var(--r-lg);overflow:hidden;
  background:#000;border:1px solid var(--edge);
}
.modal-frame iframe{width:100%;height:100%;border:0;display:block}
/* a reel: portrait, no wider than it needs, on the same black plate */
.modal-frame.is-portrait{aspect-ratio:auto;height:min(78vh,720px);display:grid;place-items:center;background:var(--void-2)}
.modal-frame.is-portrait iframe{width:min(100%,420px);height:100%}
.modal-cap{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s-3);margin-top:1.1rem;
}
.modal-cap h2{font-size:1.15rem;font-weight:700;line-height:1.5}
.modal-cap .s{display:block;font-size:.85rem;color:var(--muted);margin-top:.25rem;font-weight:300}
/* the crew: role over name, in columns that wrap — read like the credit
   block on an awards page, not like a sentence */
.modal-cap .cr{
  display:flex;flex-wrap:wrap;gap:.55rem 1.6rem;margin-top:.9rem;max-width:64ch;
}
.modal-cap .crd{display:grid;gap:.05rem;line-height:1.35}
.modal-cap .crr{font-size:.64rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.modal-cap .crn{font-size:.84rem;color:var(--paper-2);font-weight:500}
/* Arabic role names must not be tracked or upper-cased — they are neither */
.modal-cap .crr:lang(ar),.modal-cap .crr.ar{letter-spacing:normal;text-transform:none}
.modal-cap .lk{display:flex;gap:.5rem;flex-wrap:wrap;flex:none}
.modal-cap .lk a{
  font-size:.8rem;color:var(--paper-2);border:1px solid var(--edge-2);
  border-radius:var(--r-pill);padding:.5rem .9rem;min-height:40px;
  display:inline-flex;align-items:center;white-space:nowrap;
  transition:border-color .22s var(--ease),color .22s var(--ease);
}
.modal-cap .lk a:hover{border-color:var(--paper-2);color:var(--paper)}
.modal-x{
  position:absolute;inset-block-start:-3.4rem;inset-inline-end:0;
  width:44px;height:44px;border-radius:var(--r-pill);
  border:1px solid var(--edge-2);display:grid;place-items:center;
  transition:border-color .22s var(--ease),background-color .22s var(--ease);
}
.modal-x:hover{border-color:var(--paper-2);background:var(--panel)}
.modal-x svg{width:18px;height:18px;stroke:var(--paper);stroke-width:1.7;fill:none}

/* --- 13. Award sheet ------------------------------------------------------ */
.sheet{position:fixed;inset:0;z-index:100;display:none}
.sheet[open],.sheet.is-open{display:block}
.sheet-bg{
  position:absolute;inset:0;background:rgba(3,3,4,.8);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  animation:fade .3s var(--ease);
}
.sheet-in{
  position:absolute;inset-block:0;inset-inline-end:0;
  width:min(760px,100%);
  background:var(--void-2);
  border-inline-start:1px solid var(--edge);
  /* round the inner edge — the one the panel presents to the page it covers,
     not the one flush against the viewport */
  border-start-start-radius:var(--r-xl);
  border-end-start-radius:var(--r-xl);
  overflow-y:auto;overscroll-behavior:contain;
  animation:slide-in .34s var(--ease-out);
}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slide-in{from{transform:translateX(-100%)}to{transform:translateX(0)}}
/* same idea as the player: the panel slides back the way it came, faster */
.sheet.is-closing .sheet-bg{animation:fade .22s var(--ease) reverse forwards}
.sheet.is-closing .sheet-in{animation:slide-out .22s var(--ease) forwards}
@keyframes slide-out{to{transform:translateX(-100%)}}
.sheet-x{
  position:sticky;top:0;z-index:3;display:flex;justify-content:flex-end;
  padding:1rem var(--s-4);
  background:linear-gradient(to bottom,var(--void-2) 62%,transparent);
}
.sheet-x button{
  width:46px;height:46px;border-radius:var(--r-pill);
  border:1px solid var(--edge);display:flex;align-items:center;justify-content:center;
  transition:border-color .22s var(--ease),background-color .22s var(--ease);
}
.sheet-x button:hover{border-color:var(--edge-2);background:var(--panel)}
.sheet-x svg{width:18px;height:18px;stroke:var(--paper);stroke-width:1.7;fill:none}
.sheet-body{padding:0 var(--s-4) var(--s-7)}

/* the sheet leads with the body's own mark, same as the wall */
.sh-head{border-bottom:1px solid var(--edge);padding-bottom:var(--s-4);margin-bottom:var(--s-4)}
/* same per-mark weighting as the wall, one-third larger because the sheet
   header gives the mark the room a tile cannot */
.sh-mark{max-height:var(--h,54px);margin-bottom:1.25rem;width:auto;max-width:260px;object-fit:contain}
.sh-mark.solid{filter:brightness(0) invert(1)}
.sh-mark.plate{filter:grayscale(1)}
.sh-head h2{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:900;line-height:1.28;letter-spacing:normal}
.sh-head .en{display:block;font-size:.92rem;color:var(--muted);margin-top:.5rem;font-weight:400}
.sh-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.sh-note{color:var(--paper-2);font-size:.97rem;line-height:1.9;margin-bottom:var(--s-4)}
.sh-why{
  background:var(--panel);border:1px solid var(--edge);
  border-radius:var(--r-lg);padding:var(--s-4);margin-bottom:var(--s-5);
}
.sh-why h3{font-size:.82rem;font-weight:700;color:var(--dim);margin-bottom:1rem}
.sh-why li{
  display:flex;gap:.75rem;color:var(--paper-2);font-size:.93rem;line-height:1.8;
  padding-block:.5rem;
}
.sh-why li::before{
  content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--edge-2);margin-top:.72rem;
}
.sh-cat{margin-bottom:var(--s-5)}
.sh-cat-h{display:flex;align-items:baseline;gap:.75rem;margin-bottom:.35rem;flex-wrap:wrap}
.sh-cat-h h3{font-size:1.08rem;font-weight:700}
.sh-cat-h .en{font-size:.72rem;color:var(--dim);letter-spacing:.1em}
.sh-cat > p{color:var(--muted);font-size:.87rem;line-height:1.75;margin-bottom:1.1rem}
/* a category's sponsor: a word and the sponsor's mark, small and on the end
   of the head line, so it reads as a footnote to the category — never as a
   second heading. Sponsor marks arrive in every colour; the same two
   treatments the bodies' marks use keep them monochrome. */
.sh-sp{
  display:inline-flex;align-items:center;gap:.45rem;
  margin-inline-start:auto;font-size:.7rem;color:var(--dim);
}
.sh-sp img{height:18px;width:auto;max-width:92px;object-fit:contain;opacity:.8}
.sh-sp img.solid{filter:brightness(0) invert(1)}
.sh-sp img.plate{filter:grayscale(1) brightness(1.7) contrast(1.1)}
.catlist .sh-sp{grid-column:1/-1;justify-self:start;margin-inline-start:0;margin-top:.15rem}

.tag{
  font-size:.78rem;font-weight:400;color:var(--paper-2);
  background:var(--panel-3);border-radius:var(--r-pill);padding:.32rem .75rem;
}

/* the credit roll — winners the archive names but never photographed.
   Year in the margin, title, then the studio that actually made it. */
.roll{list-style:none;padding:0;margin:0;border-top:1px solid var(--edge)}
.roll li{
  display:grid;grid-template-columns:3.6rem minmax(0,1fr) auto;gap:0 1.1rem;
  align-items:center;
  padding-block:.95rem;border-bottom:1px solid var(--edge);
}
.roll .y{font-size:.82rem;font-weight:700;color:var(--paper-2);padding-top:.15rem;align-self:start}
/* same reason as .work-b: these three lines carry mixed script and each one's
   dir="auto" would resolve `start` differently, scattering the entry across
   both edges. A physical value pins all three beside the year column. */
.roll li > div{text-align:right}
.roll b{display:block;font-size:.98rem;font-weight:700;line-height:1.45;color:var(--paper)}
.roll .s,.roll .c{display:block;line-height:1.65}
.roll .s{font-size:.85rem;color:var(--muted);margin-top:.3rem}
.roll .c{font-size:.72rem;color:var(--dim);margin-top:.25rem}
/* a roll entry can still be watchable even without a frame to show */
.roll .w{
  flex:none;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--edge-2);display:grid;place-items:center;
  transition:border-color .22s var(--ease),background-color .22s var(--ease);
}
.roll .w:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.roll .w svg{width:13px;height:13px;fill:var(--paper);stroke:none}
.roll .w svg.ext{fill:none;stroke:var(--paper);stroke-width:2}

/* the taxonomy index — the payload for the bodies whose archives are text */
.catlist{border-top:1px solid var(--edge);list-style:none;padding:0;margin:0}
.catlist li{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:.35rem 1.25rem;align-items:baseline;
  padding-block:.9rem;border-bottom:1px solid var(--edge);
}
.catlist .k{font-size:1rem;font-weight:700;color:var(--paper);line-height:1.5}
.catlist .e{
  font-size:.68rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap;
}
.catlist p{grid-column:1/-1;color:var(--muted);font-size:.86rem;line-height:1.75}

.sh-links{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:var(--s-4)}

/* --- 14. Footer ----------------------------------------------------------- */
/* the rule above already ends the last section; a 3.5rem margin on top of that
   section's own padding was stacking two gaps where the reader sees one */
.foot{border-top:1px solid var(--edge);padding-block:var(--s-5) var(--s-4);margin-top:0}
.foot-in{
  display:grid;gap:var(--s-5) var(--s-4);
  grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr) minmax(0,.65fr);
}
.foot-l .c{
  font-size:.76rem;color:var(--dim);margin-inline-start:.4rem;
  font-variant-numeric:tabular-nums;
}
.foot p{color:var(--muted);font-size:.88rem;line-height:1.85;max-width:56ch;margin-top:.85rem}
.foot p.paren{color:var(--dim);font-size:.8rem}
/* the signature at the foot: the same column as the card above the strata,
   at a third of the size — portrait, label, name, trade, then the three marks
   in the same order, with the same light on his own site */
.foot-sig{display:grid;justify-items:start;gap:.7rem;margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--edge)}
.foot-sig-a{display:grid;justify-items:start;gap:.1rem;color:var(--paper)}
.foot-sig-a img{
  width:56px;height:56px;border-radius:50%;object-fit:cover;border:1px solid var(--edge-2);
  margin-bottom:.45rem;filter:grayscale(1) contrast(1.04);opacity:.92;transition:opacity .3s var(--ease);
}
.foot-sig-a:hover img{opacity:1}
.foot-sig-a .k{font-size:.62rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.foot-sig-a b{font-size:1.35rem;font-weight:900;letter-spacing:normal;line-height:1.3}
.foot-sig-a .r{font-size:.74rem;color:var(--muted)}
.foot-links .ml{width:40px;height:40px}
.foot-links .ml svg{width:16px;height:16px}
/* Arabic column heads: weight and colour carry the label, NOT letter-spacing.
   Tracking is a Latin small-caps device; on Arabic it just pulls the joins
   apart and reads as a rendering fault. */
.foot h3{font-size:.82rem;font-weight:700;color:var(--dim);margin-bottom:1rem}

.foot-t{font-size:1.3rem;font-weight:700;line-height:1.35;margin-top:1rem}
.foot-l{list-style:none;padding:0}
/* footer links carry a 44px target even though the type stays small */
.foot li a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:.88rem;color:var(--paper-2);transition:color .2s var(--ease);
}
.foot li a:hover{color:var(--paper)}
.foot-b{
  display:flex;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;
  border-top:1px solid var(--edge);margin-top:var(--s-5);padding-top:var(--s-4);
  font-size:.78rem;color:var(--dim);
}

/* --- 15. Reveal ----------------------------------------------------------- */
.rv{opacity:0;transform:translateY(18px)}
.rv.in{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}

/* --- 14b. The maker's band ---------------------------------------------- */
/* A portrait card with the name set over its foot, floating a hair, and three
   marks beneath it. Greyscale, no colour, like everything else: the card is
   the only figure on the page and it does not need to shout. */
.maker-band{padding-block:clamp(1.8rem,3.4vw,3rem) 0}
.maker{display:grid;justify-items:center;gap:1.1rem}
.maker-card{
  position:relative;display:block;overflow:hidden;
  width:min(100%,300px);aspect-ratio:600/760;
  border-radius:var(--r-xl);background:var(--panel);
  border:1px solid var(--edge-2);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.8);
  animation:float 7s var(--ease) infinite alternate;
  transition:border-color .3s var(--ease),transform .4s var(--ease-out);
}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(-8px)}}
.maker-card:hover,.maker-card:focus-visible{border-color:var(--paper-2)}
.maker-p{
  width:100%;height:100%;object-fit:cover;object-position:50% 20%;
  filter:grayscale(1) contrast(1.05);
  transition:transform .8s var(--ease-out);
}
.maker-card:hover .maker-p{transform:scale(1.03)}
/* the foot of the card darkens so the name can sit on the portrait */
.maker-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(6,6,7,.94) 0%,rgba(6,6,7,.55) 34%,rgba(6,6,7,0) 62%);
}
.maker-t{
  position:absolute;inset-inline:0;bottom:0;z-index:1;
  display:grid;justify-items:center;text-align:center;gap:.15rem;
  padding:0 1rem 1.35rem;
}
.maker-k{
  font-size:var(--t-label);font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--paper-2);opacity:.85;
}
.maker-n{
  font-size:clamp(1.7rem,3vw,2.3rem);font-weight:900;line-height:1.25;
  letter-spacing:normal;color:var(--paper);
}
.maker-r{font-size:.78rem;color:var(--paper-2);opacity:.85}
/* the three marks: instagram, his site, X — in reading order, right to left */
.maker-links{display:flex;gap:.7rem;list-style:none;margin:0;padding:0}
.ml{
  position:relative;display:grid;place-items:center;
  width:48px;height:48px;border-radius:50%;
  border:1px solid var(--edge-2);color:var(--paper-2);
  transition:border-color .22s var(--ease),color .22s var(--ease),background-color .22s var(--ease),transform .25s var(--ease);
}
.ml svg{width:19px;height:19px}
.ml:hover,.ml:focus-visible{border-color:var(--paper);color:var(--paper);background:rgba(255,255,255,.05);transform:translateY(-2px)}
.ml:active{transform:scale(.94);transition-duration:.08s}
/* his own site is the one to press: a soft light travels round it. The
   ring is a turning conic gradient blurred behind the button; the button
   itself stays still and stays plain. */
.ml-site{color:var(--paper);border-color:var(--paper-2);isolation:isolate}
.ml-site::before{
  content:"";position:absolute;inset:-4px;border-radius:50%;z-index:-1;
  background:conic-gradient(from var(--strk),rgba(255,255,255,0) 0deg,rgba(255,255,255,.9) 70deg,rgba(255,255,255,0) 150deg,rgba(255,255,255,0) 360deg);
  filter:blur(5px);opacity:.75;
  animation:strk 3.2s linear infinite;
}
.ml-site::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;background:var(--void);z-index:-1;
}

/* --- 15b. Motion and pointer preferences --------------------------------- */
/* Gentler, not zero: the reader who asked for less motion still gets the
   fades that say "something opened", and loses the drifting field, the marching
   strip, the lift on hover and the slide-in — everything that *moves*. The
   reel stays as a still field, which is what it already reads as at a glance. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reelcol-a,.reelcol-b,.reelcol-c,.reelcol-d,.strip-track{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  .rv.in{transition:none}
  .btn-solid:hover,.stratum:hover,.stratum:focus-visible,.stratum:hover .stratum-t,.stratum:hover .stratum-n,.stratum:focus-visible .stratum-t,.stratum:focus-visible .stratum-n,.tile:hover,.tile:focus-visible,
  .work:hover,.work:focus-within,.tile:hover .tile-m img,.tile:focus-visible .tile-m img,
  .work-hit:hover > img,.work-hit:focus-visible > img,.work-hit:hover .work-play,
  .btn:active,.chip:active,.fchip:active,.maker-card:hover .maker-p,.ml:hover,.ml:active{transform:none}
  .maker-card{animation:none}
  .ml-site::before{animation:none}
  .stratum:hover::after,.stratum:focus-visible::after{animation:none}
  .modal-in,.sheet-in{animation:fade .2s var(--ease)}
  .modal.is-closing .modal-in,.sheet.is-closing .sheet-in{animation:fade .15s var(--ease) reverse forwards}
}
/* A finger has no hover. The lift, the scale and the colour reveal were
   sticking on whatever was tapped last, and the tile's work-count only ever
   appeared under a pointer — on a phone it did not exist. The press states
   (:active) are untouched; they are the phone's feedback channel. */
@media (hover:none){
  .btn-solid:hover,.stratum:hover,.stratum:hover .stratum-t,.stratum:hover .stratum-n,.tile:hover,.work:hover,.maker-card:hover .maker-p,.ml:hover,
  .tile:hover .tile-m img,.work-hit:hover > img,.work-hit:hover .work-play{transform:none}
  .work-hit:hover > img{filter:grayscale(1) contrast(1.06)}
  .tile-c{opacity:1}
}

/* --- 16. Responsive ------------------------------------------------------- */
@media (max-width:1080px){
  .hero{min-height:min(90svh,760px)}
  .hero-bg{grid-template-columns:repeat(3,1fr)}
  .reelcol-d{display:none}
  /* five across stops working once each card is under ~185px — the two-word
     names start breaking to three lines. Three and two keeps the composition
     horizontal, which was the point, without squeezing the type. */
  .strata{gap:.8rem .6rem}
  .stratum{padding:2.2rem 1.5rem 1.1rem 1rem}
}
@media (max-width:760px){
  :root{--r-lg:24px;--r-xl:28px;--r-md:18px}
  /* iOS Safari zooms the page into any focused field set under 16px — and
     stays zoomed after the keyboard goes. 1rem is the floor, not a size choice.
     Lives here, after the base rule, because the two share a specificity. */
  .search input{font-size:1rem}
  .nav{display:none}
  .nav.is-open{
    display:flex;position:absolute;inset-inline:0;top:calc(100% + .6rem);
    flex-direction:column;align-items:stretch;padding:.5rem;
    border-radius:var(--r-lg);background:rgba(18,18,20,.98);
  }
  .nav.is-open a{min-height:48px}
  .burger{display:inline-flex}
  /* the nav becomes an absolutely-positioned drop-down here, so the bar holds
     exactly one in-flow child — one track, and the burger hangs off the end */
  .masthead-in{grid-template-columns:1fr;position:relative}
  .mast-act{grid-column:1}
  .mast-act .btn-solid{display:none}
  /* two columns means each frame is far larger relative to the type sitting
     on it, so the field drops another stop to keep the same margin */
  .hero-bg{grid-template-columns:repeat(2,1fr);inset:-6% -12%;
    filter:grayscale(1) contrast(1.02) brightness(.38)}
  .reelcol-c{display:none}
  .hero h1{max-width:none}
  .strip img{height:21px}
  /* two to a row on a phone — 1|2, 3|4, and 5 centred under them — with the
     whole box scaled down rather than the words alone, so each pair keeps the
     desktop's proportions */
  .strata{grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem .5rem;padding-top:.6rem}
  .stratum{grid-column:auto;padding:1.6rem .95rem .6rem .5rem;min-height:5.2rem}
  .stratum:nth-child(4){grid-column:auto}
  .stratum:nth-child(5){grid-column:1/-1;justify-self:center;width:min(100%,60%)}
  .stratum-n{font-size:3.6rem;top:-.02em}
  .stratum-t h3{font-size:1.12rem;white-space:normal;line-height:1.35}
  .foot-in{grid-template-columns:1fr 1fr}
  .foot-in > div:first-child{grid-column:1/-1}
  /* on a phone it is a bottom sheet, so it must rise, not slide sideways */
  .sheet-in{
    inset-block-start:4.5rem;
    border-start-start-radius:var(--r-xl);border-start-end-radius:var(--r-xl);
    border-end-start-radius:0;
    border-inline-start:0;border-block-start:1px solid var(--edge);
    animation-name:slide-up;
  }
  @keyframes slide-up{from{transform:translateY(6%);opacity:0}to{transform:none;opacity:1}}
  .modal-x{inset-block-start:-3rem}
  .modal-cap{flex-direction:column}
}
@media (max-width:420px){
  .wall{grid-template-columns:repeat(2,1fr)}
  .tile{min-height:126px;padding:.9rem .7rem .75rem}
  /* scale the whole set down together — a flat cap here would undo the
     per-mark weighting the moment the wall drops to two columns */
  .tile-m img{max-height:calc(var(--h,40px) * .74)}
  .works{grid-template-columns:1fr}
}

/* --- 17. Motion & print --------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .reelcol,.strip-track{animation:none!important}
  .rv{opacity:1;transform:none}
}
@media print{
  .masthead,.hero-bg,.strip,.sheet,.modal,.filters{display:none}
  body{background:#fff;color:#000}
}