/* ============================================================
   alanaziz.com — Alan Aziz Review
   Dark technical editorial. Mono type, bracket frames, upload slots.
   ============================================================ */

:root{
  /* Seven neutrals, one job each. #000 is the shadow, not the canvas —
     neumorphism needs a mid-tone surface that can cast both a darker
     shadow and a lighter highlight, so everything extrudes from #222. */
  --bg:#222222;        /* the single surface: canvas and raised panels alike */
  --panel:#222222;
  --panel-2:#222222;
  --shadow:#000000;    /* bottom-right recess */
  --press:#313131;     /* pressed-state fill */
  --ink-hi:#F7F7F7;    /* headings, gear names, emphasis */
  --ink:#E5E7EB;       /* body copy — the conversational voice */
  --muted:#E0E0E0;     /* eyebrows, nav, captions */
  --muted-2:rgba(224,224,224,.5);
  --plate:#E5E7EB;     /* light plates: product backdrops, brand-logo tiles */
  --line:rgba(255,255,255,.16);      /* hairline — every control carries one */
  --line-soft:rgba(255,255,255,.09);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --gutter:40px;
  --corner:26px;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  font-size:14px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:inherit;text-decoration:none}

/* iOS: no grey flash on tap, no accidental sideways scroll */
a,button{-webkit-tap-highlight-color:transparent}
body{overflow-x:hidden}

:focus-visible{
  outline:2px solid var(--ink-hi);
  outline-offset:3px;
}

.shell{
  max-width:1560px;
  margin:0 auto;
  padding-left:max(var(--gutter), env(safe-area-inset-left));
  padding-right:max(var(--gutter), env(safe-area-inset-right));
}

/* The header bar is frozen to the top of every page. The page background
   is painted edge to edge behind it (the 100vmax shadow, clipped to the
   bar's height) so content scrolls cleanly underneath even past the
   shell's 1560px max-width. Stacks above page content (kit cards, reel
   controls) but below the gear modal (50). */
.head-bar{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--bg);
  box-shadow:0 0 0 100vmax var(--bg);
  clip-path:inset(0 -100vmax);
}
/* in-page jumps (#main, the gear category links) stop below the bar;
   --head-h is measured by assets/head-bar.js as the bar wraps */
html{scroll-padding-top:calc(var(--head-h, 92px) + 16px)}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--ink-hi);color:#0A0A0B;
  padding:10px 16px;z-index:60;
}
.skip:focus{left:var(--gutter);top:12px}

/* ---------- header ---------- */

.head{
  display:flex;
  align-items:center;
  gap:28px;
  padding:26px 0;
}

.wordmark{
  display:inline-flex;
  align-items:center;
  gap:16px;
  font-size:clamp(10.5px,3.1vw,15px);
  font-weight:700;
  letter-spacing:clamp(.10em,.62vw,.24em);
  white-space:nowrap;
  color:var(--ink-hi);
}
.wordmark-text span{color:var(--muted-2);font-weight:400}

.wordmark-mark{
  height:clamp(22px,5.8vw,28px);
  width:auto;
  display:block;
  flex:none;
}

/* the animated mark: the box is the logo's own footprint, and the video
   bleeds 23.53% past it on every side — the clip is padded so the layers
   aren't cut off mid-spin, and the resting logo lands exactly in the box */
.logo-sting{
  position:relative;
  aspect-ratio:659/512;
}
.logo-sting video,
.logo-sting img{
  position:absolute;
  inset:-23.53%;
  width:147.06%;
  height:147.06%;
  display:block;
  pointer-events:none;
}
.logo-sting [hidden]{display:none}

.nav{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
  font-size:12.5px;
  letter-spacing:.16em;
  color:var(--muted);
}
.nav a,
.head-home{
  white-space:nowrap;
  padding:10px 18px;
  border-radius:98px;
  border:1px solid var(--line);
  background:var(--panel-2);
  box-shadow:
    4px 4px 8px 0 rgba(0,0,0,.5),
    -3px -3px 7px 0 rgba(255,255,255,.06);
  transition:color .15s ease,box-shadow .3s cubic-bezier(.2,-0.2,1,1);
}

.nav a:hover,
.nav a[aria-current="page"],
.head-home:hover,
.head-home[aria-current="page"]{
  color:var(--ink-hi);
  box-shadow:
    inset 3px 3px 6px 0 rgba(0,0,0,.55),
    inset -2px -2px 6px 0 rgba(255,255,255,.07);
}

/* HOME sits on the left beside the wordmark; same raised pill as the nav */
.head-home{
  font-size:12.5px;
  letter-spacing:.16em;
  color:var(--muted);
  flex:none;
}

/* social icons in the nav: round versions of the same pill */
.nav a.nav-icon{
  display:inline-grid;
  place-items:center;
  width:40px;
  height:40px;
  padding:0;
}
.nav a.nav-icon svg{display:block}

/* every .btn is neumorphic by default now — raised panel-gray pill that
   presses inward on hover/active. .btn--newphoria is kept as an alias so
   older markup still matches. */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  padding:14px 20px;
  font:inherit;
  font-size:12.5px;
  letter-spacing:.16em;
  /* the hairline is not decoration — affordance must never depend on the
     shadow alone, which is the failure mode of this whole style */
  border:1px solid var(--line);
  border-radius:98px;
  background:var(--panel-2);
  color:var(--ink-hi);
  cursor:pointer;
  box-shadow:
    7px 6px 14px 0 rgba(0,0,0,.55),
    -4px -4px 10px 0 rgba(255,255,255,.06);
  transition:box-shadow .4s cubic-bezier(.2,-0.2,1,1),background-color .4s ease,color .16s ease;
}
.btn:hover,
.btn:active{
  box-shadow:
    inset 3px 3px 6px 0 rgba(0,0,0,.55),
    inset -2px -2px 6px 0 rgba(255,255,255,.07);
}

.btn--solid{
  background:var(--ink-hi);
  color:#000000;
  border-color:var(--ink-hi);
  box-shadow:
    7px 6px 14px 0 rgba(0,0,0,.4),
    -4px -4px 10px 0 rgba(255,255,255,.5);
}
.btn--solid:hover,
.btn--solid:active{
  background:#fff;
  box-shadow:
    inset 3px 3px 6px 0 rgba(0,0,0,.18),
    inset -2px -2px 6px 0 rgba(255,255,255,.6);
}

.btn--newphoria{border:1px solid var(--line)}

/* ---------- hero ---------- */

.hero{
  position:relative;
  padding:74px 52px 78px;
  margin-top:6px;
  /* corner brackets, 8 hairlines */
  background-repeat:no-repeat;
  background-image:
    linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line)),
    linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line)),
    linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line)),
    linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line));
  background-size:
    var(--corner) 1px,1px var(--corner),
    var(--corner) 1px,1px var(--corner),
    var(--corner) 1px,1px var(--corner),
    var(--corner) 1px,1px var(--corner);
  background-position:
    left top,left top,
    right top,right top,
    left bottom,left bottom,
    right bottom,right bottom;
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:64px;
  align-items:center;
}

/* the row sets the scale; the mark and gap track it in em */
.hero-name{
  display:flex;
  align-items:center;
  gap:.3em;
  font-size:clamp(2.4rem,5.4vw,5.6rem);
}

.hero-mark{
  height:.74em;
  width:auto;
  flex:none;
  display:block;
  /* nudge onto the cap-height centre rather than the line-box centre */
  margin-top:-.05em;
}

.hero h1{
  margin:0;
  font-size:1em;
  font-weight:800;
  line-height:.92;
  letter-spacing:.01em;
  white-space:nowrap;
  color:var(--ink-hi);
}

.hero-sub{
  margin:20px 0 0;
  font-size:clamp(1rem,1.55vw,1.5rem);
  font-weight:500;
  letter-spacing:.2em;
  color:var(--ink-hi);
}

/* both paragraphs share one size, colour and measure so they read as one block */
.hero-copy{
  margin:26px 0 0;
  max-width:52ch;
  font-size:14px;
  line-height:1.85;
  color:var(--muted);
}
.hero-copy + .hero-copy{margin-top:15px}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin-top:38px;
}
.hero-actions .btn{min-width:200px}

/* ---------- upload slots ---------- */

.slot{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  text-align:center;
  background:var(--panel);
  border:1px solid var(--line-soft);
  border-radius:10px;
  color:var(--muted);
}
.slot svg{color:var(--muted-2);margin-bottom:10px}

.slot-label{
  font-size:14px;
  letter-spacing:.1em;
}
.slot-hint{
  font-size:12px;
  letter-spacing:.1em;
  color:var(--muted-2);
}

/* ---------- highlight reel ---------- */

.highlight{
  position:relative;
  aspect-ratio:16/11;
  overflow:hidden;
  border-radius:14px;
  /* flat: the reel frames the work, it isn't something you press. The
     extrusion is spent on the scrubber inside it instead. */
  border:1px solid var(--line);
  background:var(--panel);
  isolation:isolate;
}

.hl-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .28s ease;
}
.hl-video.is-active{opacity:1}

.hl-bars{
  position:absolute;
  inset:14px 14px auto;
  z-index:3;
  display:flex;
  gap:5px;
  opacity:.15;
}
.hl-bar{
  flex:1;
  height:16px;
  padding:0;
  display:flex;
  align-items:center;
  background:none;
  border:0;
  cursor:pointer;
}
.hl-bar i{
  display:block;
  width:100%;
  height:2px;
  border-radius:2px;
  background:rgba(255,255,255,.22);
  box-shadow:inset 1px 1px 2px 0 rgba(0,0,0,.6);
  overflow:hidden;
}
.hl-bar i::after{
  content:"";
  display:block;
  height:100%;
  width:var(--p,0%);
  background:var(--ink-hi);
}
.hl-bar.is-done i::after{width:100%}

.hl-zone{
  position:absolute;
  top:0;
  bottom:0;
  width:38%;
  z-index:2;
  padding:0;
  background:none;
  border:0;
  cursor:pointer;
}
.hl-prev{left:0}
.hl-next{right:0}

/* ---------- gear ---------- */

.page-head{
  padding:56px 0 34px;
}

.page-head h1{
  margin:0;
  font-size:clamp(2.4rem,5.4vw,5.6rem);
  font-weight:800;
  line-height:.92;
  letter-spacing:.01em;
  color:var(--ink-hi);
}

.page-sub{
  margin:20px 0 0;
  font-size:clamp(1rem,1.55vw,1.5rem);
  font-weight:500;
  letter-spacing:.2em;
  color:var(--ink-hi);
}

.filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding-bottom:30px;
  border-bottom:1px solid var(--line-soft);
}

/* the categories are sections now, so these are jump links, not filters —
   neumorphic pills, same raised/inset language as the header nav */
.filters a{
  padding:10px 18px;
  font-size:12.5px;
  letter-spacing:.16em;
  border-radius:98px;
  border:1px solid var(--line);
  background:var(--panel-2);
  color:var(--muted);
  box-shadow:
    4px 4px 8px 0 rgba(0,0,0,.5),
    -3px -3px 7px 0 rgba(255,255,255,.06);
  transition:color .15s ease,box-shadow .3s cubic-bezier(.2,-0.2,1,1);
}
.filters a:hover,
.filters a:focus-visible{
  color:var(--ink-hi);
  box-shadow:
    inset 3px 3px 6px 0 rgba(0,0,0,.55),
    inset -2px -2px 6px 0 rgba(255,255,255,.07);
}

/* filters left, view toggle right, on one line */
.gear-bar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px 40px;
  flex-wrap:wrap;
  padding-bottom:30px;
  border-bottom:1px solid var(--line-soft);
}
.gear-bar .filters{
  padding-bottom:0;
  border-bottom:0;
}

.views{
  display:flex;
  gap:8px 10px;
  flex-shrink:0;
}
.views button{
  padding:8px 16px;
  font:inherit;
  font-size:12.5px;
  letter-spacing:.16em;
  background:none;
  border:1px solid transparent;
  border-radius:98px;
  color:var(--muted-2);
  cursor:pointer;
  transition:color .15s ease,box-shadow .3s cubic-bezier(.2,-0.2,1,1);
}
.views button:hover{color:var(--ink-hi)}
.views button[aria-pressed="true"]{
  color:var(--ink-hi);
  background:var(--press);
  border-color:var(--line);
  box-shadow:
    inset 3px 3px 6px 0 rgba(0,0,0,.55),
    inset -2px -2px 6px 0 rgba(255,255,255,.07);
}

/* ---------- gear: category sections ---------- */

.gear-group{padding-top:46px}
.gear-group:first-of-type{padding-top:36px}

.group-head{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin:0;
  padding-bottom:14px;
  border-bottom:1px solid var(--line-soft);
  font-size:13px;
  font-weight:500;
  letter-spacing:.22em;
  color:var(--ink-hi);
}
/* scrolled-to headings shouldn't hide under the top of the viewport */
.gear-group{scroll-margin-top:24px}

.gear-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
  gap:16px;
  padding:24px 0 8px;
  /* bound the track count: on a 1560px shell an unbounded auto-fill opens
     seven columns, so a three-item category reads as a half-empty row */
  max-width:1180px;
}

/* ---------- gear: list view ---------- */

/* one flat table of rows — brackets off, thumbnail shrunk, order re-flowed */
.gear-grid.is-list{
  max-width:none;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  border:1px solid var(--line-soft);
}

.is-list .gear-item{
  display:grid;
  grid-template-columns:60px minmax(0,1fr);
  align-items:center;
  gap:22px;
  padding:14px 22px;
  background-image:none;
  border-bottom:1px solid var(--line-soft);
  transition:background-color .16s ease;
}
.is-list .gear-item:last-child{border-bottom:0}
.is-list .gear-item:hover{background:rgba(255,255,255,.04)}

.is-list .gear-media{
  margin-top:0;
  width:60px;
  border-radius:6px;
}

.is-list .gear-name{
  margin:0;
  font-size:15px;
}

/* same eight-hairline corner frame as .hero, so the cards read as one system.
   Image first, name under it — the images align across a row on their own, with
   no auto-margin needed however many lines a name wraps to. */
.gear-item{
  display:flex;
  flex-direction:column;
  /* smaller card, so the bracket frame shrinks with it */
  --corner:16px;
  padding:14px;
  border-radius:10px;
  /* flat too — a card is a surface to read, not a control. Its corner
     bracket frame already separates it from the canvas. */
  border:1px solid var(--line-soft);
  background-color:var(--panel-2);
  background-repeat:no-repeat;
  background-image:
    linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line)),
    linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line)),
    linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line)),
    linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line));
  background-size:
    var(--corner) 1px,1px var(--corner),
    var(--corner) 1px,1px var(--corner),
    var(--corner) 1px,1px var(--corner),
    var(--corner) 1px,1px var(--corner);
  background-position:
    left top,left top,
    right top,right top,
    left bottom,left bottom,
    right bottom,right bottom;
}

.gear-name{
  margin:10px 0 0;
  font-size:13.5px;
  font-weight:500;
  letter-spacing:.04em;
  line-height:1.35;
  color:var(--ink-hi);
}

/* the slot and the photo that replaces it must occupy identical space */
.gear-item .slot,
.gear-media{
  margin-top:0;
  aspect-ratio:1/1;
  border-radius:8px;
  background-color:var(--plate);
  box-shadow:
    inset 2px 2px 5px 0 rgba(0,0,0,.28),
    inset -1px -1px 3px 0 rgba(255,255,255,.5);
}
.gear-item .slot svg{margin-bottom:6px}
.gear-item .slot-label{font-size:11px}
.gear-item .slot-hint{font-size:10px}

.gear-media{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border:1px solid var(--line-soft);
}

/* the whole card is a trigger — cursor + a faint lift on hover/focus so it
   reads as clickable without touching the bracket-frame background */
.gear-item{cursor:pointer;transition:transform .15s ease,box-shadow .4s cubic-bezier(.2,-0.2,1,1)}
.gear-item:hover,
.gear-item:focus-visible{
  transform:translateY(-2px);
  border-color:var(--line);
}
.gear-item:active{
  transform:translateY(0);
  background-color:var(--press);
}
.gear-item:focus-visible{outline:2px solid var(--ink-hi);outline-offset:4px}
.is-list .gear-item{background:none;box-shadow:none;border:0;border-radius:0}

/* ---------- gear: detail popup ---------- */

.gear-modal{
  position:fixed;
  inset:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.gear-modal[hidden]{display:none}

.gear-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.8);
  backdrop-filter:blur(3px);
  animation:gear-fade .18s ease;
}

.gear-modal-card{
  position:relative;
  z-index:1;
  width:100%;
  max-width:420px;
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  padding:28px;
  background:var(--panel);
  animation:gear-pop .18s ease;
  background-repeat:no-repeat;
  background-image:
    linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line)),
    linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line)),
    linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line)),
    linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line));
  background-size:
    var(--corner) 1px,1px var(--corner),
    var(--corner) 1px,1px var(--corner),
    var(--corner) 1px,1px var(--corner),
    var(--corner) 1px,1px var(--corner);
  background-position:
    left top,left top,
    right top,right top,
    left bottom,left bottom,
    right bottom,right bottom;
}

@keyframes gear-fade{from{opacity:0}to{opacity:1}}
@keyframes gear-pop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}

.gear-modal-close{
  position:absolute;
  top:16px;
  right:16px;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  font:inherit;
  font-size:15px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--muted);
  cursor:pointer;
  box-shadow:
    4px 4px 8px 0 rgba(0,0,0,.55),
    -3px -3px 7px 0 rgba(255,255,255,.06);
  transition:color .15s ease,box-shadow .3s cubic-bezier(.2,-0.2,1,1);
}
.gear-modal-close:hover{color:var(--ink-hi)}
.gear-modal-close:active{
  box-shadow:
    inset 2px 2px 4px 0 rgba(0,0,0,.55),
    inset -2px -2px 4px 0 rgba(255,255,255,.07);
}

.gear-modal-media{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border:1px solid var(--line-soft);
  border-radius:10px;
}

.gear-modal-name{
  margin:20px 0 0;
  font-size:17px;
  font-weight:500;
  letter-spacing:.04em;
  line-height:1.35;
  color:var(--ink-hi);
  padding-right:28px;
}

.gear-modal-section-label{
  margin:22px 0 10px;
  font-size:11px;
  font-weight:500;
  letter-spacing:.2em;
  color:var(--muted-2);
}

.gear-modal-takeaways{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.gear-modal-takeaways li{
  position:relative;
  padding-left:18px;
  font-size:13.5px;
  line-height:1.6;
  color:var(--ink);
}
.gear-modal-takeaways li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--muted-2);
}

.gear-modal-drawback{
  margin:0;
  padding:14px 16px;
  border:1px solid var(--line-soft);
  border-left:2px solid var(--muted-2);
  font-size:13.5px;
  line-height:1.6;
  color:var(--muted);
}

/* ---------- collaborations ---------- */

.collab{padding:8px 0 64px}

.collab-head{
  margin:0;
  padding-bottom:14px;
  border-bottom:1px solid var(--line-soft);
  font-size:13px;
  font-weight:500;
  letter-spacing:.22em;
  color:var(--ink-hi);
}

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

/* two identical copies run through .collab-track; each .collab-grid ends in
   its own 12px padding-right, so the two copies are the exact same width and
   translateX(-50%) loops from the end of copy 1 straight into copy 2 with no
   seam. Speed holds regardless of how many logos are added or removed. */
.collab-marquee{
  margin-top:24px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.collab-track{
  display:flex;
  width:max-content;
  animation:collab-scroll 36s linear infinite;
}
.collab-marquee:hover .collab-track,
.collab-marquee:focus-within .collab-track{animation-play-state:paused}

@keyframes collab-scroll{
  to{transform:translateX(-50%)}
}

.collab-grid{
  display:flex;
  flex-wrap:nowrap;
  flex:none;
  gap:12px;
  padding-right:12px;
}

/* brand marks keep their own colour, so they sit on a white chip rather
   than the dark page — consistent backdrop regardless of the mark's colour */
.collab-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:60px;
  padding:0 18px;
  background:var(--plate);
  border-radius:8px;
}
.collab-logo img,
.collab-logo svg{
  display:block;
  width:auto;
  height:auto;
  max-width:100px;
  max-height:36px;
}

.collab-cta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-top:28px;
}

.collab-note{
  margin:0;
  font-size:14px;
  line-height:1.85;
  color:var(--muted);
}
.collab-cta{flex:none}
.collab-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

/* ---------- footer ---------- */

.foot-ig{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  transition:color .15s ease;
}
.foot-ig:hover{color:var(--ink-hi)}
.foot-ig svg{
  display:block;
  opacity:.7;
  transition:opacity .15s ease;
}
.foot-ig:hover svg{opacity:1}

.foot-social{
  display:flex;
  align-items:center;
  gap:20px;
}

/* RUANGKOTAK animated wordmark: the white-on-transparent SVG loops on its own
   (and holds still under reduced motion); dimmed until hovered like the socials */
.foot-rk{display:inline-flex;opacity:.7;transition:opacity .2s}
.foot-rk:hover,.foot-rk:focus-visible{opacity:1}
.foot-rk img{display:block;width:120px;height:auto}
/* phones: copyright + logo + icons only just overflow one row, so tighten them */
@media (max-width:560px){
  footer.foot{gap:14px}
  .foot-rk img{width:92px}
  .foot-social{gap:14px}
}

.foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-top:24px;
  padding:28px 0 40px;
  border-top:1px solid var(--line-soft);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--muted-2);
}

/* ---------- media kit ---------- */

/* shared 8-hairline bracket frame, factored out for new components rather
   than re-declaring the eight-gradient background each time */
.frame{
  background-repeat:no-repeat;
  background-image:
    linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line)),
    linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line)),
    linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line)),
    linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line));
  background-size:
    var(--corner) 1px,1px var(--corner),
    var(--corner) 1px,1px var(--corner),
    var(--corner) 1px,1px var(--corner),
    var(--corner) 1px,1px var(--corner);
  background-position:
    left top,left top,
    right top,right top,
    left bottom,left bottom,
    right bottom,right bottom;
}

.kit-hero{
  padding:36px 40px 8px;
  margin:6px 0 8px;
}
.kit-hero .page-head{padding:20px 0 34px}

/* hero splits: title + lede on the left, the photo stack fills the empty
   space to its right — top-aligned with the title and no taller than the
   text block, so the hero keeps its height */
.kit-hero{
  display:grid;
  grid-template-columns:minmax(0,auto) minmax(0,1fr);
  column-gap:40px;
  align-items:start;
}

/* Photo stack — three cards fanned; every few seconds the top one flips
   over (turns on its vertical axis, back face hidden, so it vanishes past
   edge-on) and rejoins at the back (assets/kit-stack.js). Cards past the
   third wait invisible behind the fan. The fan leans up and right, so the
   stack keeps 44px clear on those sides to stay inside the gutter. */
.kit-stack{
  position:relative;
  width:100%;
  max-width:236px;
  aspect-ratio:4/5;
  margin:50px 44px 0 0;
  justify-self:center;
  cursor:pointer;
  perspective:1100px;
}
.kit-card{
  position:absolute;
  inset:0;
  margin:0;
  overflow:hidden;
  border-radius:var(--corner);
  border:1px solid var(--line);
  background:var(--shadow);
  box-shadow:14px 14px 30px rgba(0,0,0,.55);
  opacity:0;
  z-index:1;
  transform:translate(38px,-30px) rotate(9deg) scale(.9);
  backface-visibility:hidden;
  transition:transform .75s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
}
.kit-card img{width:100%;height:100%;object-fit:cover;display:block}
.kit-card[data-pos="0"]{z-index:4;opacity:1;transform:rotate(-3deg)}
.kit-card[data-pos="1"]{z-index:3;opacity:1;transform:translate(20px,-16px) rotate(3deg) scale(.96)}
.kit-card[data-pos="2"]{z-index:2;opacity:1;transform:translate(38px,-30px) rotate(9deg) scale(.92)}
.kit-card[data-pos="out"]{
  z-index:5;
  opacity:0;
  transform:translateX(-18%) rotateY(-180deg) rotate(3deg);
  /* hold opacity until the turn is past edge-on; the hidden back face does the vanishing */
  transition:transform .9s cubic-bezier(.45,0,.2,1), opacity .15s linear .75s;
}

.kit-lede{
  max-width:64ch;
  margin:0 0 40px;
  font-size:14px;
  line-height:1.85;
  color:var(--muted);
}

.kit-section{padding:46px 0 0}
.kit-section:first-of-type{padding-top:8px}

.kit-pillars{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:24px;
  padding:24px 0 8px;
}
.kit-pillar{
  padding:22px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel-2);
  box-shadow:
    7px 6px 14px 0 rgba(0,0,0,.55),
    -4px -4px 10px 0 rgba(255,255,255,.06);
}
.kit-pillar h3{
  margin:0 0 10px;
  font-size:15px;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--ink-hi);
}
.kit-pillar p{
  margin:0;
  font-size:13.5px;
  line-height:1.7;
  color:var(--muted);
}

.kit-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:24px;
  padding:24px 0 8px;
}
.stat-card{
  position:relative;
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:6px;
  border-radius:14px;
  background-color:var(--panel-2);
  border:1px solid var(--line-soft);
  /* depth here comes from the stacked offsets, not from an extrusion —
     a stat card is read, not pressed */
  box-shadow:
    5px 7px 0 -3px var(--panel),
    5px 7px 0 -2px var(--line-soft),
    9px 13px 0 -6px var(--panel),
    9px 13px 0 -5px var(--line-soft);
}
.stat-value{
  font-size:28px;
  font-weight:700;
  color:var(--muted-2);
  letter-spacing:.02em;
}
.stat-value.is-set{color:var(--ink-hi)}
.stat-label{
  font-size:11.5px;
  letter-spacing:.14em;
  color:var(--muted)
}
.stat-pending{
  margin-top:4px;
  font-size:11px;
  letter-spacing:.06em;
  color:var(--muted-2);
}

/* static grid — no auto-scroll, no drag */
.kit-work{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:20px;
  padding:24px 0 8px;
}
.kit-work-clip{
  position:relative;
  aspect-ratio:9/11;
  overflow:hidden;
  border-radius:14px;
  border:1px solid var(--line-soft);
  background:var(--panel-2);
  transition:border-color .3s ease;
}
.kit-work-clip:hover,
.kit-work-clip:active{
  border-color:var(--ink-hi);
}
.kit-work-clip video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}
.kit-work-clip span{
  position:absolute;
  left:12px;bottom:12px;
  font-size:11px;
  letter-spacing:.1em;
  color:var(--ink-hi);
  text-shadow:0 1px 6px rgba(0,0,0,.7);
}

/* same infinite-loop marquee as the homepage's .collab-marquee — two
   identical .kit-brands-grid copies inside .kit-brands-track, so
   translateX(-50%) loops seamlessly (reuses @keyframes collab-scroll) */
.kit-brands{
  margin-top:20px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.kit-brands-track{
  display:flex;
  width:max-content;
  animation:collab-scroll 30s linear infinite;
}
.kit-brands:hover .kit-brands-track,
.kit-brands:focus-within .kit-brands-track{animation-play-state:paused}
.kit-brands-grid{
  display:flex;
  flex-wrap:nowrap;
  flex:none;
  gap:12px;
  padding-right:12px;
}

.kit-note{
  max-width:60ch;
  margin:20px 0 0;
  font-size:13.5px;
  line-height:1.8;
  color:var(--muted);
}



/* ---------- responsive ---------- */

@media (max-width:1180px){
  .nav{gap:24px;font-size:11.5px}
  .head-home{font-size:11.5px}
  /* the homepage header carries HOME, TOOLS and two icons — too many to share
     one row with the wordmark below 1180px, so its nav drops to its own row
     here instead of at the 980px breakpoint the other pages use */
  .head--full{flex-wrap:wrap;gap:18px}
  .head--full .nav{order:3;width:100%;margin:0;gap:26px}
}

@media (max-width:980px){
  :root{--gutter:24px}
  .head{flex-wrap:wrap;gap:18px}
  .nav{order:3;width:100%;margin:0;gap:26px}
  .hero{padding:48px 28px 52px}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:40px}

  .page-head{padding:40px 0 28px}
  .gear-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
  .kit-hero{grid-template-columns:minmax(0,1fr);gap:8px}
  .kit-stack{justify-self:center;max-width:300px;margin:36px auto 40px;left:-19px}
}

/* phones: the nav wraps instead of scrolling items out of reach,
   and every link clears the 44px touch minimum */
@media (max-width:700px){
  .nav{
    flex-wrap:wrap;
    row-gap:0;
    column-gap:18px;
    padding-bottom:0;
    font-size:12px;
  }
  .nav a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
  /* the icons stay round at the 44px touch minimum */
  .nav a.nav-icon{width:44px;height:44px;display:inline-grid}
  /* the homepage nav (with TOOLS + icons) wraps to two rows here; keep them apart */
  .nav{row-gap:12px}

  /* filters clear the same 44px touch minimum as the nav */
  .filters{column-gap:20px;row-gap:0}
  .filters a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
}

@media (max-width:560px){
  :root{--gutter:18px}
  /* the nav wraps to three rows here, and a bar that tall pinned to the top
     covered about a quarter of the screen — so on phones it scrolls away with
     the page. head-bar.js reports --head-h as 0 while the bar isn't sticky, so
     the pinned reel and wall use the whole screen. */
  .head-bar{position:static}
  .head{gap:12px;padding:20px 0}
  .wordmark{gap:10px;min-width:0}

  .hero{padding:36px 18px 42px}
  .hero-name{flex-wrap:wrap}
  .hero h1{white-space:normal}
  .hero-copy{font-size:13.5px;line-height:1.8}
  .hero-actions{gap:14px}
  .hero-actions .btn{min-width:0;flex:1 1 100%;gap:16px}

  /* taller reel: a landscape box this narrow reads as a letterbox strip */
  .highlight{aspect-ratio:4/3}
  .hl-bar{height:22px}

  .page-head{padding:32px 0 24px}
  /* two up on phones — a single column would blow the square up to full width */
  .gear-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-top:28px}

  /* list rows lose the index and category columns before they get cramped */
  .is-list .gear-item{grid-template-columns:46px minmax(0,1fr);gap:14px;padding:12px 14px}
  .is-list .gear-media{width:46px}
  .is-list .gear-name{font-size:13px}
  .gear-item{padding:16px}
  .gear-name{font-size:14px}
  .group-head{font-size:11.5px;letter-spacing:.18em}
  .gear-group{padding-top:34px}

  /* clear the home indicator */
  .foot{padding-bottom:max(40px, calc(24px + env(safe-area-inset-bottom)))}

  .gear-modal{padding:14px}
  .gear-modal-card{padding:20px;max-height:calc(100vh - 28px)}

  .kit-pillars,.kit-stats{grid-template-columns:1fr 1fr;gap:14px}
  .kit-stack{max-width:250px}
  .kit-pillar,.stat-card{padding:16px}
  .kit-work{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}

/* phone held sideways: keep the two-up layout so the reel stays on screen */
@media (orientation:landscape) and (max-height:560px){
  .hero{padding:30px 24px 34px}
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
  .hero-copy + .hero-copy{margin-top:12px}
  .highlight{aspect-ratio:16/11}
}

@media (max-width:380px){
  .nav{column-gap:14px;font-size:11.5px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* Self-hosted from Alan's supplied file (OFL, license in assets/fonts/OFL.txt) */
@font-face{
  font-family:'Gloria Hallelujah';
  src:url('/assets/fonts/GloriaHallelujah-Regular.woff2') format('woff2'),
      url('/assets/fonts/GloriaHallelujah-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* Handwritten accent — Gloria Hallelujah on the taglines and section
   heads. It ships in one weight, so weight is reset to 400 (500 would be
   faux-bolded), and the wide mono tracking is pulled in: spaced-out script
   letters stop reading as words. The 13px section heads step up in size,
   since a handwriting face at 13px is hard to read. */
.hand{
  font-family:'Gloria Hallelujah',var(--mono);
  font-weight:400;
  letter-spacing:.04em;
}
.group-head.hand,
.collab-head.hand{
  font-size:clamp(15px,1.3vw,18px);
  letter-spacing:.06em;
}

/* Selected / pressed = white. A neumorphic button turns solid white with
   dark ink while it's pressed, and stays white while it's the selected
   one: the current page in the header, the active GRID/LIST view. Kept at
   the end of the file so it wins over the inset hover states above. */
.nav a[aria-current="page"],
.head-home[aria-current="page"],
.nav a:active,
.head-home:active,
.btn:active,
.filters a:active,
.views button[aria-pressed="true"]{
  background:#FFFFFF;
  color:#111111;
  border-color:#FFFFFF;
  box-shadow:
    inset 2px 2px 5px 0 rgba(0,0,0,.18),
    inset -2px -2px 5px 0 rgba(255,255,255,.6);
}

/* ============================================================
   Motion — assets/motion.js drives everything below. Every
   "hidden until revealed" state is scoped to html.motion, which the
   inline gate in <head> sets only when reduced motion is off (and
   takes back off if motion.js never loads), so no-JS and calm
   visitors always get the finished page.
   ============================================================ */

:root{
  --rec:#FF3B30;                         /* the one signal colour: a camera's tally light */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

@keyframes rec-blink{50%{opacity:.2}}

/* ---------- boot intro (homepage, once per session) ---------- */

.boot{display:none}
html.boot-on{overflow:hidden}
.boot-on .boot{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  background:#0D0D0D;
  color:var(--ink-hi);
  font-size:11.5px;
  letter-spacing:.2em;
  cursor:pointer;
  clip-path:inset(0 0 0 0);
  transition:clip-path .7s var(--ease-io);
}
/* the shutter: the frame closes to a slit across the middle, then it's gone */
.boot.is-out{clip-path:inset(50% 0 50% 0)}

.boot-corner{
  position:absolute;
  width:44px;
  height:44px;
  border:0 solid rgba(255,255,255,.75);
  animation:boot-corner .8s var(--ease-out) both;
}
.boot-corner:nth-child(1){top:28px;left:28px;border-width:1px 0 0 1px;--dx:1;--dy:1}
.boot-corner:nth-child(2){top:28px;right:28px;border-width:1px 1px 0 0;--dx:-1;--dy:1}
.boot-corner:nth-child(3){bottom:28px;left:28px;border-width:0 0 1px 1px;--dx:1;--dy:-1}
.boot-corner:nth-child(4){bottom:28px;right:28px;border-width:0 1px 1px 0;--dx:-1;--dy:-1}
@keyframes boot-corner{
  from{opacity:0;transform:translate(calc(var(--dx) * 22vw),calc(var(--dy) * 22vh))}
}

.boot-rec,
.vf-rec{display:flex;align-items:center;gap:8px}
.boot-rec i,
.vf-rec i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--rec);
  animation:rec-blink 1s steps(1) infinite;
}
.boot-rec{position:absolute;top:40px;left:92px}
.boot-tc{position:absolute;top:40px;right:92px;font-variant-numeric:tabular-nums}
.boot-meta{position:absolute;bottom:40px;left:92px;color:var(--muted-2)}
.boot-skip{position:absolute;bottom:40px;right:92px;color:var(--muted-2)}

.boot-core{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:26px;
}
.boot-mark{height:clamp(70px,11vw,120px);width:auto;display:block}
.boot-line{
  font-size:12.5px;
  letter-spacing:.32em;
  white-space:nowrap;
  clip-path:inset(0 100% 0 0);
  animation:type-on .9s steps(26) .45s forwards;
}
.boot-line em{font-style:normal;color:var(--rec)}
@keyframes type-on{to{clip-path:inset(0 0 0 0)}}

/* ---------- hero entrance ---------- */

/* corner brackets draw outward from each corner */
.motion .hero{
  background-size:0 1px,1px 0,0 1px,1px 0,0 1px,1px 0,0 1px,1px 0;
  transition:background-size 1s var(--ease-out) .2s;
}
.motion .hero.is-in{
  background-size:
    var(--corner) 1px,1px var(--corner),
    var(--corner) 1px,1px var(--corner),
    var(--corner) 1px,1px var(--corner),
    var(--corner) 1px,1px var(--corner);
}

/* each word is a mask; its letters rise out of it, staggered */
.motion .hero h1 .w{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding-bottom:.08em;
  margin-bottom:-.08em;
}
.motion .hero h1 .ch{
  display:inline-block;
  transform:translateY(110%);
  transition:transform .95s var(--ease-out);
  transition-delay:calc(var(--i) * 45ms + 180ms);
}
.motion .hero.is-in h1 .ch{transform:none}

.motion .hero-mark{
  opacity:0;
  transform:scale(.4) rotate(-120deg);
  transition:transform 1.1s var(--ease-out) .1s,opacity .5s ease .1s;
}
.motion .hero.is-in .hero-mark{opacity:1;transform:none}

/* the handwritten tagline is "written" left to right */
.motion .hero-sub{
  clip-path:inset(-10% 100% -10% 0);
  transition:clip-path 1.2s cubic-bezier(.45,.05,.3,1) .75s;
}
.motion .hero.is-in .hero-sub{clip-path:inset(-10% -4% -10% 0)}

/* the copy brightens from a near-black ink rather than fading from opacity 0:
   it reads the same, but the browser counts it as painted from the first frame,
   so the entrance doesn't hold back Largest Contentful Paint */
.motion .hero-copy{
  color:rgba(224,224,224,.06);
  transform:translateY(18px);
  transition:color .9s ease .95s,transform .9s var(--ease-out) .95s;
}
.motion .hero-copy + .hero-copy{transition-delay:1.05s}
.motion .hero-actions{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .8s ease 1.2s,transform .9s var(--ease-out) 1.2s;
}
.motion .hero.is-in .hero-copy{color:var(--muted);transform:none}
.motion .hero.is-in .hero-actions{opacity:1;transform:none}

/* the reel opens like a shutter, then leans toward the cursor */
.motion .hero .highlight{
  clip-path:inset(50% 0 50% 0 round 14px);
  transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:clip-path 1.1s var(--ease-io) .35s,transform .7s var(--ease-out);
}
.motion .hero.is-in .highlight{clip-path:inset(0 0 0 0 round 14px)}

/* ---------- viewfinder overlay on the highlight reel ---------- */

.vf{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  font-size:10.5px;
  letter-spacing:.16em;
  color:#FFFFFF;
  text-shadow:0 1px 4px rgba(0,0,0,.7);
}
.vf-rec{position:absolute;top:40px;left:18px}
.vf-tc{position:absolute;top:40px;right:18px;font-variant-numeric:tabular-nums}
.vf-label{
  position:absolute;
  left:18px;
  bottom:18px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.2em;
}
.vf-label::after{content:"_";animation:rec-blink .8s steps(1) infinite}
.vf-meta{position:absolute;right:18px;bottom:70px;color:rgba(255,255,255,.75)}
.vf-histo{
  position:absolute;
  right:18px;
  bottom:18px;
  width:120px;
  height:44px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:3px;
  background:rgba(0,0,0,.28);
}
/* rule-of-thirds grid, four hairlines */
.vf-thirds{
  position:absolute;
  inset:0;
  --g:rgba(255,255,255,.13);
  background:
    linear-gradient(90deg,transparent calc(33.333% - .5px),var(--g) 0 calc(33.333% + .5px),transparent 0 calc(66.666% - .5px),var(--g) 0 calc(66.666% + .5px),transparent 0),
    linear-gradient(180deg,transparent calc(33.333% - .5px),var(--g) 0 calc(33.333% + .5px),transparent 0 calc(66.666% - .5px),var(--g) 0 calc(66.666% + .5px),transparent 0);
}
/* focus box: the site's bracket frame in miniature; hunts, then locks */
.vf-focus{
  position:absolute;
  left:50%;
  top:50%;
  width:72px;
  height:52px;
  margin:-26px 0 0 -36px;
  --corner:12px;
  --line:rgba(255,255,255,.9);
  transform:translate(var(--fx,0px),var(--fy,0px));
  transition:transform .6s var(--ease-out);
  background-repeat:no-repeat;
  background-image:
    linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line)),
    linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line)),
    linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line)),
    linear-gradient(var(--line),var(--line)),linear-gradient(var(--line),var(--line));
  background-size:
    var(--corner) 1.5px,1.5px var(--corner),
    var(--corner) 1.5px,1.5px var(--corner),
    var(--corner) 1.5px,1.5px var(--corner),
    var(--corner) 1.5px,1.5px var(--corner);
  background-position:left top,left top,right top,right top,left bottom,left bottom,right bottom,right bottom;
}
.vf-focus.is-hunting{animation:focus-hunt .7s var(--ease-out)}
@keyframes focus-hunt{
  0%{opacity:0;scale:1.7}
  45%{opacity:1;scale:.9}
  70%{scale:1.06}
  100%{scale:1}
}

/* ---------- showreel ---------- */

.reel{--p:1;position:relative;margin:40px 0 20px}
.reel-sticky{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:18px;
}
.reel-frame{
  position:relative;
  width:min(100vw,calc((100svh - var(--head-h,92px) - 90px) * 16 / 9));
  aspect-ratio:16/9;
  margin:0 auto;
  overflow:hidden;
  background:#000;
  border:1px solid var(--line);
  border-radius:calc(22px * (1 - var(--p)));
  transform:scale(calc(.6 + .4 * var(--p)));
  will-change:transform;
}
.reel-video{display:block;width:100%;height:100%;object-fit:cover}

/* sound toggle: bottom-left of the frame, opposite the reel's own HUD label.
   Four equaliser bars lie flat while muted and dance when the sound is on. */
.reel-sound{
  position:absolute;
  left:clamp(12px,2.2vw,28px);
  bottom:clamp(12px,2.2vw,28px);
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:40px;
  padding:0 16px;
  font:inherit;
  font-size:11px;
  letter-spacing:.18em;
  color:var(--ink-hi);
  background:rgba(17,17,17,.62);
  border:1px solid var(--line);
  border-radius:98px;
  cursor:pointer;
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.reel-sound:hover{border-color:var(--ink-hi)}
.reel-sound[aria-pressed="true"]{background:#FFFFFF;color:#111111;border-color:#FFFFFF}
.reel-eq{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.reel-eq i{
  width:2px;
  height:100%;
  background:currentColor;
  transform:scaleY(.2);
  transform-origin:bottom;
}
.reel-sound[aria-pressed="true"] .reel-eq i{animation:eq .9s ease-in-out infinite alternate}
.reel-eq i:nth-child(2){animation-delay:-.3s!important}
.reel-eq i:nth-child(3){animation-delay:-.6s!important}
.reel-eq i:nth-child(4){animation-delay:-.15s!important}
@keyframes eq{0%{transform:scaleY(.2)}50%{transform:scaleY(1)}100%{transform:scaleY(.45)}}
/* phones: the video's own title sits bottom-left, where the button would cover
   it, so the button parks top-centre between the REC and timecode labels */
@media (max-width:560px){
  .reel-sound{
    min-height:44px;
    padding:0 14px;
    top:clamp(12px,2.2vw,28px);
    bottom:auto;
    left:50%;
    transform:translateX(-50%);
  }
}
/* above the frame: pinned at the bottom it would sit under the reveal cut-off */
.reel-caption{
  order:-1;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:20px;
}
.reel-title{margin:0;font-size:clamp(17px,1.6vw,22px);color:var(--ink-hi)}
.reel-count{font-size:11px;letter-spacing:.22em;color:var(--muted-2);white-space:nowrap}

/* pinned: the section is tall, the frame holds still and grows */
.motion .reel{height:230vh;margin:0}
.motion .reel-sticky{
  position:sticky;
  top:var(--head-h,92px);
  height:calc(100svh - var(--head-h,92px));
  overflow:hidden;
}

/* ---------- gear wall ---------- */

.wall{position:relative}
.wall-sticky{padding:40px 0 30px}
.wall-head{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  flex-wrap:wrap;
}
.wall-head .collab-head{flex:1;padding:0;border:0}
.wall-track{
  position:relative;
  display:flex;
  gap:18px;
  padding:30px max(var(--gutter),calc((100vw - 1560px) / 2 + var(--gutter)));
  overflow-x:auto;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
}
.wall-track::-webkit-scrollbar{display:none}
.wall-card{
  flex:none;
  width:clamp(190px,21vw,290px);
  overflow:hidden;
  border:1px solid var(--line-soft);
  border-radius:14px;
  background:var(--bg);
  scroll-snap-align:start;
  transition:border-color .3s ease,transform .5s var(--ease-out);
}
.wall-card:hover,
.wall-card:focus-visible{border-color:var(--ink-hi);transform:translateY(-6px)}
.wall-card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  background:var(--plate);
  /* --px: per-card parallax from motion.js, the product drifts against the card */
  transform:translateX(var(--px,0px)) scale(1.12);
  transition:scale .6s var(--ease-out);
}
.wall-card:hover img{scale:1.06}
/* sits over the image's parallax overflow */
.wall-name{
  position:relative;
  background:var(--bg);
  display:flex;
  gap:12px;
  padding:13px 15px;
  font-size:11.5px;
  letter-spacing:.12em;
  color:var(--ink-hi);
  border-top:1px solid var(--line-soft);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.wall-name b{font-weight:400;color:var(--muted-2)}
.wall-progress{height:1px;background:var(--line-soft);max-width:1560px}
.wall-progress i{
  display:block;
  height:100%;
  background:var(--ink-hi);
  transform:scaleX(0);
  transform-origin:left;
}

.wall.is-pinned .wall-sticky{
  position:sticky;
  top:var(--head-h,92px);
  height:calc(100svh - var(--head-h,92px));
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  padding:0;
}
.wall.is-pinned .wall-track{
  width:max-content;
  overflow:visible;
  scroll-snap-type:none;
  will-change:transform;
}
.wall.is-pinned .wall-progress{width:calc(100% - 2 * var(--gutter));margin:0 auto;padding:0}

/* ---------- brand marquee: skews with scroll velocity ---------- */

.collab-marquee{transform:skewX(var(--skew,0deg))}

/* ---------- reveals ---------- */

/* film-strip wipe: a bar sweeps across the heading, the text is there when it leaves */
.motion [data-reveal="wipe"]{color:transparent}
.motion [data-reveal="wipe"].is-in{color:var(--ink-hi);transition:color 0s linear .42s}
.wipe-in{position:relative;display:inline-block}
.motion [data-reveal="wipe"] .wipe-in::after{
  content:"";
  position:absolute;
  inset:-2px -6px;
  background:var(--ink-hi);
  transform:scaleX(0);
  transform-origin:left;
}
.motion [data-reveal="wipe"].is-in .wipe-in::after{animation:wipe-bar .9s var(--ease-io) forwards}
@keyframes wipe-bar{
  0%{transform:scaleX(0);transform-origin:left}
  46%{transform:scaleX(1);transform-origin:left}
  54%{transform:scaleX(1);transform-origin:right}
  100%{transform:scaleX(0);transform-origin:right}
}

.motion [data-reveal="up"]{
  opacity:0;
  transform:translateY(26px);
  transition:
    opacity .7s ease calc(var(--i,0) * 60ms),
    transform .9s var(--ease-out) calc(var(--i,0) * 60ms);
}
.motion [data-reveal="up"].is-in{opacity:1;transform:none}

/* ---------- kinetic sign-off ---------- */

@property --fill{syntax:'<percentage>';inherits:false;initial-value:0%}

.cta{padding:96px 0 64px;border-top:1px solid var(--line-soft)}
.cta-kicker{margin:0 0 18px;font-size:clamp(15px,1.3vw,18px);color:var(--muted)}
.cta-title{
  margin:0;
  font-size:clamp(2.9rem,10.4vw,10rem);
  font-weight:800;
  line-height:.92;
  letter-spacing:-.01em;
}
.cta-title a{display:inline-block}
/* outline type that fills left to right: --f (0→1) comes from scroll, the
   second line starts once the first is half full; hover fills both */
.cta-line{
  display:block;
  white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:1.5px var(--ink-hi);
  --fill:clamp(0%,calc(var(--f,0) * 140%),100%);
  background:linear-gradient(90deg,var(--ink-hi) var(--fill),transparent var(--fill));
  -webkit-background-clip:text;
          background-clip:text;
  transition:--fill .7s var(--ease-out);
}
.cta-line + .cta-line{--fill:clamp(0%,calc((var(--f,0) - .28) * 140%),100%)}
.cta-title a:hover .cta-line,
.cta-title a:focus-visible .cta-line,
html:not(.motion) .cta-line{--fill:100%}
.cta-arrow{
  width:.62em;
  height:.62em;
  vertical-align:.02em;
  color:var(--ink-hi);
  stroke-width:2;
  transition:transform .5s var(--ease-out);
}
.cta-title a:hover .cta-arrow{transform:translate(.08em,-.08em)}
.cta .collab-ctas{margin-top:44px}

/* ---------- page transitions (all pages) ---------- */

/* same-origin navigations cross-fade: the frozen header stays put, the
   page underneath lifts away and the next one wipes down into place */
@view-transition{navigation:auto}
.head-bar{view-transition-name:head-bar}
::view-transition-old(root){animation:vt-out .32s var(--ease-io) both}
::view-transition-new(root){animation:vt-in .6s var(--ease-out) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-22px)}}
@keyframes vt-in{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

/* ---------- motion: small screens + calm ---------- */

@media (max-width:560px){
  .boot-rec,.boot-meta{left:48px}
  .boot-tc,.boot-skip{right:48px}
  .boot-meta{display:none}
  .boot-line{font-size:10.5px;letter-spacing:.22em}
  .vf-meta,.vf-thirds{display:none}
  .vf-rec,.vf-tc{top:34px}
  .vf-histo{width:84px;height:32px}
  .wall-card{width:62vw}
  /* a 16:9 frame in a portrait viewport is only ~200px tall, so any pin just leaves
     empty bands around it: skip the pin and grow-on-scroll, the reel sits in flow */
  .motion .reel{height:auto;margin:40px 0 20px}
  .motion .reel-sticky{position:static;height:auto;overflow:visible}
  .motion .reel-frame{width:100%;transform:none;border-radius:14px}
  .cta{padding:70px 0 48px}
  .cta-line{-webkit-text-stroke-width:1px}
}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){animation:none!important}
}