/* ==========================================================================
   B.Y. / Austin, TX
   Design system. Dark, grainy, two inks.
   Ground + atmosphere: teal-shifted near-black and deep pine.
   Action color: burnt rust, taken from his own Marlow flyer.
   Text: bone cream, never pure white.
   ========================================================================== */

:root{
  /* ground */
  --ink-000:#070D0C;
  --ink-100:#0C1413;
  --ink-200:#121D1B;
  --ink-300:#1A2A27;

  /* rules */
  --line:#22332F;
  --line-soft:rgba(240,234,221,.13);

  /* text */
  --mute:#7C8B88;
  /* AA-safe muted text. --mute at reduced opacity failed contrast, so small
     print gets its own opaque token instead of a transparency hack.
     4.5:1 or better on ink-000, ink-100 and ink-200. */
  --mute-aa:#788684;
  --body:#DCD4C6;
  --bone:#F0EADD;

  /* ink 1 : action. One job per stop, so 500 stops doing fourteen of them.
     900 = deep rust ground, 700 = pressed, 500 = the action itself,
     300 = hover and rust-as-text on dark. */
  --rust-900:#5D1205;
  --rust-700:#A33C0E;
  --rust-500:#E2570F;
  --rust-300:#FF8A3D;

  /* ink 2 : atmosphere. Never an action, never body text.
     900 = atmospheric ground, 700 = wash, 500 = gradient partner,
     300 = the one teal that is allowed to be type. */
  --teal-900:#0A2E2F;
  --teal-700:#0F5B57;
  --teal-500:#189C8C;
  --teal-300:#3FD3BC;

  /* fixed chrome, used by scroll-margin so anchors clear it */
  --hdr-h:64px;
  --strip-h:34px;

  --grain:.075;
  --gut:clamp(20px,5vw,64px);
  --maxw:1360px;
  --ease:cubic-bezier(.25,1,.5,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink-000);
  color:var(--body);
  font-family:"Archivo",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px;
  line-height:1.65;
  font-synthesis-weight:none;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video,svg{display:block;max-width:100%}
/* A bare inline SVG has no intrinsic size, so max-width:100% lets it inflate to
   the width of its container. Zero-specificity guard via :where() so any
   component rule below still wins. Prevents the class of bug, not one instance. */
svg:where(:not([width]):not([class])){
  display:inline-block;width:1em;height:1em;vertical-align:-.125em;flex:none;
}
a{color:inherit}

/* ------------------------------------------------------------ focus ring */
/* One visible ring for everything, on the near-black ground. Keyboard only,
   so pointer users never see it. */
:focus-visible{outline:2px solid var(--rust-300);outline-offset:3px}
:focus:not(:focus-visible){outline:none}

/* In-page links must clear the fixed header plus the info strip. */
:where([id]){scroll-margin-top:calc(var(--hdr-h) + var(--strip-h) + 18px)}
::selection{background:var(--rust-500);color:var(--ink-000)}

/* --------------------------------------------------------------- grain */
.grain::after{
  content:"";position:fixed;inset:-50%;z-index:9999;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:var(--grain);mix-blend-mode:overlay;
  animation:grain 1s steps(8) infinite;
  /* transform-only animation on its own layer: no layout, no paint per frame */
  will-change:transform;transform:translateZ(0);backface-visibility:hidden;
}
/* by.js sets this when the tab goes to the background */
.grain-paused .grain::after{animation-play-state:paused}
@keyframes grain{
  0%{transform:translate(0,0)}      12.5%{transform:translate(-1%,-1%)}
  25%{transform:translate(1%,-1%)}  37.5%{transform:translate(-1%,1%)}
  50%{transform:translate(1%,1%)}   62.5%{transform:translate(-2%,0)}
  75%{transform:translate(2%,-2%)}  87.5%{transform:translate(0,2%)}
  100%{transform:translate(0,0)}
}

/* ------------------------------------------------------------ type scale */
/* INTERFACE type. This is 90% of the site. */
.label{
  font-family:"Space Mono",ui-monospace,monospace;font-weight:700;
  font-size:11px;text-transform:uppercase;letter-spacing:.17em;line-height:1;
  color:var(--mute);
}
/* the skip link is the only a.label on the site; give it a real box when it
   comes on screen */
a.label{display:inline-flex;align-items:center;min-height:44px}
.label--rust{color:var(--rust-500)}
.label--teal{color:var(--teal-300)}
/* arrows set inline in label text. Attribute-sized SVGs are left alone. */
.label svg:not([width]),.post__go svg{
  display:inline-block;width:13px;height:13px;flex:none;vertical-align:-2px;
}

.eyebrow{
  font-family:"Archivo",sans-serif;font-stretch:80%;font-weight:700;
  font-size:12px;text-transform:uppercase;letter-spacing:.2em;line-height:1;
  color:var(--mute);margin:0 0 18px;
}

/* POSTER type. Used sparingly, and never for body. */
.slab{
  font-family:"Archivo",sans-serif;font-stretch:62%;font-weight:900;
  text-transform:uppercase;line-height:.82;letter-spacing:-.035em;
  /* ultra-condensed at -.035em closes the word gaps up; open them back out
     or TEN YEARS reads as TENYEARS */
  word-spacing:.16em;
  color:var(--bone);margin:0;
}
.slab--out{
  -webkit-text-stroke:calc(.12vw + 1px) var(--bone);
  paint-order:stroke fill;
}
/* only hollow the fill where the stroke actually paints, otherwise the word
   disappears entirely */
@supports (-webkit-text-stroke:1px red){
  .slab--out{color:transparent}
}
.slab--rust{color:var(--rust-500)}

h1,h2,h3,h4{font-family:"Archivo",sans-serif;color:var(--bone);margin:0 0 .5em}
h2{font-stretch:70%;font-weight:800;text-transform:uppercase;
   font-size:clamp(30px,4.6vw,60px);line-height:.94;letter-spacing:-.02em}
h3{font-stretch:82%;font-weight:700;font-size:clamp(19px,2.1vw,25px);
   line-height:1.15;letter-spacing:-.01em}
p{margin:0 0 1.15em;max-width:62ch}
.lede{font-size:clamp(18px,2.05vw,23px);line-height:1.55;color:var(--body)}
.mono-num{font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------- layout */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap--tight{max-width:960px}
section{position:relative}
.pad{padding-block:clamp(64px,9vw,140px)}
.rule{border:0;border-top:1px solid var(--line);margin:0}

/* counted, indexed section header over a hairline */
.sechead{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--line-soft);padding-bottom:12px;margin-bottom:clamp(28px,4vw,52px);
}
/* was opacity:.5 on --mute, which composited to 2.21:1 */
.sechead .idx{opacity:1;color:var(--mute-aa)}

/* --------------------------------------------------------------- header */
/* Retracts on `top`, not `transform`. A transformed ancestor becomes the
   containing block for fixed descendants, which made the fixed mobile .nav
   resolve inset:0 against the 64px header box instead of the viewport. */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:120;
  transition:top .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{background:rgba(7,13,12,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
/* +1px so the hairline border clears the viewport too */
.hdr.is-hidden{top:calc((var(--hdr-h) + 1px) * -1)}
/* backdrop-filter is the other containing-block trap. Drop it while the menu
   is up so the fixed .nav always resolves against the viewport. */
.nav-open .hdr,.nav-open .hdr.is-stuck{
  -webkit-backdrop-filter:none;backdrop-filter:none;background:var(--ink-000);
}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:64px;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.mark{
  display:inline-flex;align-items:center;min-height:44px;min-width:44px;
  font-family:"Archivo",sans-serif;font-stretch:62%;font-weight:900;font-size:23px;
  letter-spacing:.01em;color:var(--bone);text-decoration:none;line-height:1;
}
.mark span{color:var(--rust-500)}
.nav{display:flex;align-items:center;gap:26px}
.nav a{
  font-family:"Archivo",sans-serif;font-stretch:80%;font-weight:700;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.16em;text-decoration:none;color:var(--body);
  position:relative;padding:6px 0;white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:bottom right;transition:transform .3s var(--ease);
}
.nav a:hover{color:var(--bone)}
.nav a:hover::after{transform:scaleX(1);transform-origin:bottom left}
.nav a[aria-current="page"]{color:var(--bone)}
.nav a[aria-current="page"]::after{transform:scaleX(1);background:var(--rust-500)}

.burger{display:none;background:none;border:1px solid var(--line);color:var(--bone);
  width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;padding:0}
.burger svg{width:18px;height:18px}

@media (max-width:900px){
  /* Closed: off screen AND out of the accessibility tree AND untouchable.
     visibility carries the tab stops out with it; the delay lets the slide
     finish before it flips. */
  .nav{
    position:fixed;top:0;left:0;right:0;bottom:auto;
    height:100vh;height:100svh;
    background:var(--ink-000);flex-direction:column;
    align-items:flex-start;justify-content:center;gap:6px;padding:0 var(--gut);
    transform:translateY(-100%);visibility:hidden;pointer-events:none;
    transition:transform .45s var(--ease),visibility 0s linear .45s;
    z-index:130;overflow-y:auto;overscroll-behavior:contain;
  }
  .nav.is-open{
    transform:translateY(0);visibility:visible;pointer-events:auto;
    transition:transform .45s var(--ease),visibility 0s linear 0s;
  }
  .nav a{font-stretch:62%;font-weight:900;font-size:clamp(34px,10vw,58px);letter-spacing:-.02em;line-height:1.05;color:var(--bone)}
  .nav a::after{display:none}
  .burger{display:flex;position:relative;z-index:140}
}

/* ---------------------------------------------------------- info strip */
.strip{
  position:fixed;top:64px;left:0;right:0;z-index:119;
  border-block:1px solid var(--line);background:rgba(7,13,12,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:transform .35s var(--ease),opacity .35s var(--ease),visibility 0s linear 0s;
}
/* An opacity:0 bar still eats taps. Carry it out of hit testing once the fade
   has finished, or a retracted header leaves a dead 34px band across the top. */
.hdr.is-hidden + .strip{
  transform:translateY(-160%);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .35s var(--ease),opacity .35s var(--ease),visibility 0s linear .35s;
}
.strip__in{display:flex;align-items:center;justify-content:space-between;gap:14px;
  height:34px;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);overflow:hidden}
.strip b{color:var(--bone);font-weight:700}
.strip .dot{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--rust-500);margin-right:8px;vertical-align:1px;
  animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.strip__right{display:flex;align-items:center;gap:8px;white-space:nowrap}
@media (max-width:700px){.strip__left{display:none}.strip__in{justify-content:flex-start}}

/* ------------------------------------------------------------------ hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.08) brightness(.62)}
.hero__wash{position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 80% at 20% 15%, rgba(226,87,15,.20), transparent 60%),
    radial-gradient(100% 70% at 85% 70%, rgba(15,91,87,.30), transparent 62%),
    linear-gradient(0deg, var(--ink-000) 2%, rgba(7,13,12,.62) 42%, rgba(7,13,12,.30) 100%);
}
/* same colours, but read off the tokens instead of hand-copied hex.
   color-mix with transparent in srgb is exactly the rgba above. */
@supports (background:color-mix(in srgb, red 20%, transparent)){
  .hero__wash{
    background:
      radial-gradient(120% 80% at 20% 15%, color-mix(in srgb, var(--rust-500) 20%, transparent), transparent 60%),
      radial-gradient(100% 70% at 85% 70%, color-mix(in srgb, var(--teal-700) 30%, transparent), transparent 62%),
      linear-gradient(0deg, var(--ink-000) 2%, color-mix(in srgb, var(--ink-000) 62%, transparent) 42%, color-mix(in srgb, var(--ink-000) 30%, transparent) 100%);
  }
}
.hero__in{position:relative;width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:0 var(--gut) clamp(38px,6vw,84px)}
.hero .slab{font-size:clamp(5.5rem,26vw,20rem);letter-spacing:-.045em}
.hero__sub{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:20px 0 30px}
.hero__genres{font-family:"Archivo";font-stretch:80%;font-weight:700;text-transform:uppercase;
  letter-spacing:.13em;font-size:clamp(11px,1.35vw,14px);color:var(--bone)}
.hero__genres i{font-style:normal;color:var(--rust-500);padding:0 .45em}
/* One rust element in the first viewport, and it is the button. The eyebrow
   was rust too, so the "act here" signal was split two ways. */
.hero .label--rust{color:var(--bone)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.scroll-hint{position:absolute;right:var(--gut);bottom:clamp(38px,6vw,84px);display:none}
@media (min-width:1024px){.scroll-hint{display:block}}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;gap:11px;text-decoration:none;cursor:pointer;
  font-family:"Archivo",sans-serif;font-stretch:80%;font-weight:800;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.17em;
  padding:15px 24px;min-height:44px;border-radius:0;border:1px solid var(--rust-500);
  background:var(--rust-500);color:#0B0503;
  transition:background .22s var(--ease),color .22s var(--ease),transform .22s var(--ease);
}
.btn:hover{background:var(--rust-300);border-color:var(--rust-300);transform:translateY(-2px)}
/* pressed is the one job --rust-700 has */
.btn:active{background:var(--rust-700);border-color:var(--rust-700);color:var(--bone);transform:translateY(0)}
.btn--ghost:active{background:transparent;color:var(--rust-300);border-color:var(--rust-700)}
/* rust-300 on a rust-500 face is 1.60:1, so the filled button rings in bone:
   3.13:1 against the button, 16.34:1 against the page. */
.btn:focus-visible{outline-color:var(--bone)}
.btn--ghost:focus-visible{outline-color:var(--rust-300)}
.btn svg{width:15px;height:15px;flex:none}
.btn--ghost{background:transparent;color:var(--bone);border-color:var(--line-soft)}
.btn--ghost:hover{background:transparent;color:var(--rust-300);border-color:var(--rust-300)}
.btn--block{width:100%;justify-content:center}

/* ---------------------------------------------------------------- marquee */
.tick{overflow:hidden;border-block:1px solid var(--line);background:var(--ink-100);padding:14px 0}
.tick__track{display:flex;gap:2.2rem;width:max-content;animation:marq 34s linear infinite}
@media (hover:hover) and (pointer:fine){
  .tick:hover .tick__track{animation-play-state:paused}
}
.tick__track span{
  font-family:"Archivo",sans-serif;font-stretch:64%;font-weight:900;
  text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;line-height:1;
  font-size:clamp(30px,6.5vw,84px);color:var(--bone);
  transition:color .18s ease;
}
/* Hollowing 84px type repaints the whole marquee. Worth it on a mouse, never
   worth it on a touch screen where :hover sticks and nobody asked for it. */
@media (hover:hover) and (pointer:fine){
  .tick:hover .tick__track span{color:transparent;-webkit-text-stroke:1px var(--bone)}
}
.tick i{font-style:normal;color:var(--rust-500)}
@keyframes marq{to{transform:translateX(-50%)}}

/* --------------------------------------------------------------- reveals */
/* Gated on .js, which by.js sets before anything else. Script blocked, script
   errored, JS off: the content is simply visible. */
.js [data-rev]{opacity:0;transform:translateY(26px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js [data-rev].in{opacity:1;transform:none}

/* ---------------------------------------------------------------- media */
.media{position:relative;isolation:isolate;overflow:hidden;background:var(--ink-200)}
.media::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;pointer-events:none;
  background-image:linear-gradient(0deg,rgba(7,13,12,.9),transparent)}
.media img,.media video{width:100%;height:100%;object-fit:cover}
.duo{filter:url(#by-duo) contrast(1.1)}

/* ------------------------------------------------------------ grid / cards */
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
.g4{grid-template-columns:1fr}
@media(min-width:700px){.g2{grid-template-columns:repeat(2,1fr)}.g4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
.cell{background:var(--ink-100);padding:clamp(24px,3vw,38px);border-radius:0;box-shadow:none}
.cell p:last-child{margin-bottom:0}

/* two-up split */
.split{display:grid;gap:clamp(30px,5vw,72px);align-items:start}
@media(min-width:960px){.split{grid-template-columns:0.95fr 1.05fr}}
@media(min-width:960px){.split--rev{grid-template-columns:1.05fr .95fr}}

/* ------------------------------------------------------------ date block */
.run{
  font-family:"Archivo",sans-serif;font-stretch:78%;font-weight:800;
  text-transform:uppercase;color:var(--bone);
  font-size:clamp(1.2rem,3vw,2.35rem);line-height:1.08;letter-spacing:.015em;
  /* 24ch forced roughly 0.96em word gaps at every width once justified.
     28ch settles it to 0.47em on the same three lines. */
  text-align:justify;text-align-last:center;max-width:28ch;margin:0 auto;
}
.run i{font-style:normal;color:var(--rust-500);padding:0 .3em}
/* a two-word badge inside justified type will break across lines otherwise */
.run .tag{background:var(--rust-500);color:var(--ink-000);font-size:.44em;
  padding:.2em .4em;vertical-align:.4em;letter-spacing:.1em;font-stretch:100%;
  white-space:nowrap}
.run .tbc{color:var(--mute);-webkit-text-stroke:0}

/* date rows */
.dates{border-top:1px solid var(--line-soft)}
.date{display:grid;grid-template-columns:1fr;gap:4px 20px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--line-soft)}
@media(min-width:820px){.date{grid-template-columns:150px 1fr 1fr auto;gap:20px;align-items:center}}
.date__d{font-family:"Doto",ui-monospace,monospace;font-weight:700;font-size:15px;
  letter-spacing:.07em;color:var(--teal-300);font-variant-numeric:tabular-nums}
.date__v{font-family:"Archivo";font-stretch:80%;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;color:var(--bone);font-size:clamp(17px,2vw,22px)}
.date__c{font-size:14px;color:var(--mute);text-transform:uppercase;letter-spacing:.13em;font-family:"Space Mono",monospace}

/* --------------------------------------------------------------- dropdate */
.dropdate{
  font-family:"Archivo",sans-serif;font-stretch:62%;font-weight:900;
  font-size:clamp(2.6rem,12vw,9.5rem);letter-spacing:.01em;line-height:.88;
  font-variant-numeric:tabular-nums;color:var(--rust-500);margin:0;
}

/* ------------------------------------------------------------- reel cards */
.reels{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:640px){.reels{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.reels{grid-template-columns:repeat(3,1fr)}}
.reel{display:block;text-decoration:none;background:var(--ink-100);padding:18px;
  transition:background .25s var(--ease)}
.reel:hover{background:var(--ink-200)}
.reel__top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.reel__av{width:30px;height:30px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--rust-500),var(--teal-500));
  display:grid;place-items:center;font-family:"Archivo";font-stretch:62%;font-weight:900;
  font-size:11px;color:#000;letter-spacing:-.02em}
.reel__h{font-family:"Space Mono",monospace;font-size:12px;color:var(--bone);letter-spacing:.02em}
/* deep teal, not neutral ink: this panel is pure atmosphere */
.reel__frame{position:relative;aspect-ratio:4/5;background:var(--teal-900);overflow:hidden;
  display:grid;place-items:center}
.reel__frame::before{content:"";position:absolute;inset:0;
  background:
   radial-gradient(90% 60% at 30% 20%,rgba(226,87,15,.30),transparent 62%),
   radial-gradient(80% 60% at 75% 80%,rgba(15,91,87,.42),transparent 60%);}
.reel__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel__play{position:relative;width:56px;height:56px;border:1px solid rgba(240,234,221,.55);
  border-radius:50%;display:grid;place-items:center;
  transition:border-color .25s var(--ease),transform .25s var(--ease),border-width .35s var(--ease)}
.reel:hover .reel__play{border-color:var(--rust-500);transform:scale(1.07)}
.reel__play svg{width:17px;height:17px;margin-left:3px;fill:var(--bone)}
.reel__cap{margin-top:14px;font-family:"Archivo";font-stretch:80%;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;font-size:13px;color:var(--bone)}
.reel__foot{margin-top:6px;font-family:"Space Mono",monospace;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--rust-500)}

/* ------------------------------------------------------------- lane cards */
.lane{display:block;text-decoration:none;background:var(--ink-100);
  padding:clamp(26px,3.2vw,40px);position:relative;overflow:hidden;
  transition:background .3s var(--ease)}
.lane:hover{background:var(--ink-200)}
/* index numbers are counters, not actions. Same role as .sechead .idx, so the
   same colour: it leaves .lane__go as the only rust in the card. */
.lane__n{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.16em;color:var(--mute-aa);
  display:block;margin-bottom:22px}
.lane h3{margin-bottom:10px}
.lane p{font-size:15.5px;color:var(--mute);margin-bottom:20px}
.lane__from{font-family:"Archivo";font-stretch:70%;font-weight:900;font-size:clamp(24px,3vw,34px);
  color:var(--bone);line-height:1;font-variant-numeric:tabular-nums}
.lane__from small{font-family:"Space Mono",monospace;font-weight:400;font-size:11px;
  letter-spacing:.14em;color:var(--mute);display:block;margin-bottom:7px;text-transform:uppercase}
.lane__go{margin-top:22px;display:inline-flex;align-items:center;gap:9px;
  font-family:"Archivo";font-stretch:80%;font-weight:800;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.17em;color:var(--rust-500)}
.lane__go svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.lane:hover .lane__go svg{transform:translateX(5px)}

/* --------------------------------------------------------------- pricing */
.tiers{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:900px){.tiers{grid-template-columns:repeat(3,1fr)}}
.tier{background:var(--ink-100);padding:clamp(26px,3vw,38px);display:flex;flex-direction:column}
.tier--feat{background:var(--ink-200);position:relative}
/* the full action ramp in 2px, which is where --rust-900 earns its keep */
.tier--feat::before{content:"";position:absolute;inset:0 0 auto;height:2px;
  background:linear-gradient(90deg,var(--rust-900),var(--rust-500) 45%,var(--rust-300))}
.tier__chip{display:inline-block;font-family:"Space Mono",monospace;font-size:10px;
  text-transform:uppercase;letter-spacing:.16em;border:1px solid var(--rust-500);
  color:var(--rust-500);padding:4px 8px;margin-bottom:18px;align-self:flex-start}
.tier__chip--muted{border-color:var(--line-soft);color:var(--mute)}
.tier__name{font-family:"Archivo";font-stretch:62%;font-weight:900;word-spacing:.1em;text-transform:uppercase;
  font-size:clamp(30px,3.6vw,46px);line-height:.92;letter-spacing:-.02em;color:var(--bone);margin:0 0 6px}
.tier__for{font-size:15.5px;color:var(--body);margin:0 0 24px;max-width:34ch}
.tier__inv{border-top:1px solid var(--line-soft);padding-top:18px;margin-bottom:22px}
.tier__inv small{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);display:block;margin-bottom:8px}
.tier__price{font-family:"Archivo";font-stretch:70%;font-weight:900;
  font-size:clamp(34px,4.2vw,54px);line-height:1;color:var(--bone);font-variant-numeric:tabular-nums}
.tier--feat .tier__price{color:var(--rust-500)}
.tier ul{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:11px}
.tier li{position:relative;padding-left:24px;font-size:15px;line-height:1.5;color:var(--body)}
.tier li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:1px;background:var(--rust-500)}
.tier li b{color:var(--bone);font-weight:700}
.tier .btn{margin-top:auto}

.incl{font-family:"Archivo";font-stretch:82%;font-weight:600;
  font-size:clamp(15px,1.7vw,19px);line-height:1.75;color:var(--body);max-width:none}
.incl b{color:var(--bone);font-weight:800}
.incl span{color:var(--rust-500);padding:0 .35em}

/* add-on table */
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th{font-family:"Space Mono",monospace;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.15em;color:var(--mute);text-align:left;font-weight:400;
  padding:0 0 12px;border-bottom:1px solid var(--line)}
.tbl th:last-child,.tbl td:last-child{text-align:right}
.tbl td{padding:15px 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
.tbl td:first-child{color:var(--bone);font-weight:600;padding-right:20px}
.tbl td:last-child{font-family:"Archivo";font-stretch:80%;font-weight:800;color:var(--rust-300);
  white-space:nowrap;font-variant-numeric:tabular-nums;padding-left:16px}
.tbl .note{color:var(--mute);font-size:13.5px;display:block;margin-top:3px}

/* ------------------------------------------------------------------- faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-family:"Archivo";font-stretch:82%;font-weight:700;color:var(--bone);
  font-size:clamp(16.5px,1.9vw,21px);line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:13px;height:1px;
  background:var(--rust-500);transform:translateY(-50%)}
.faq summary::before{content:"";position:absolute;right:12px;top:50%;width:1px;height:13px;
  background:var(--rust-500);transform:translateY(-50%);transition:transform .3s var(--ease)}
.faq details[open] summary::before{transform:translateY(-50%) rotate(90deg);opacity:0}
.faq .ans{padding:0 clamp(0px,4vw,56px) 26px 0}
.faq .ans p:last-child{margin-bottom:0}

/* ------------------------------------------------------------------ list */
.contacts{display:grid;gap:clamp(26px,4vw,48px)}
@media(min-width:820px){.contacts{grid-template-columns:repeat(3,1fr)}}
.contact h3{font-stretch:62%;font-weight:900;text-transform:uppercase;
  font-size:clamp(24px,3vw,34px);line-height:.95;letter-spacing:-.02em;margin-bottom:10px}
/* underline via text-decoration rather than a border, so the box can grow to a
   44px target while the rule stays tucked under the words */
.contact a{display:inline-flex;align-items:center;min-height:44px;
  color:var(--rust-300);font-family:"Space Mono",monospace;
  font-size:14px;letter-spacing:.02em;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;
  text-decoration-color:rgba(255,138,61,.35)}
.contact a:hover{color:var(--bone);text-decoration-color:var(--bone)}
.contact p{font-size:14.5px;color:var(--mute);margin-bottom:12px}

/* ---------------------------------------------------------------- signup */
.join{background:var(--ink-100);border-block:1px solid var(--line)}
.join .slab{font-size:clamp(3rem,13vw,10rem)}
.form{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;max-width:560px}
.form input{
  flex:1 1 240px;background:transparent;border:1px solid var(--line);color:var(--bone);
  padding:15px 16px;font-family:"Space Mono",monospace;font-size:13.5px;letter-spacing:.04em;border-radius:0;
}
.form input::placeholder{color:var(--mute)}
/* was outline:none, which removed the only focus indicator on the page */
.form input:focus{border-color:var(--rust-500)}
.form input:focus-visible{outline:2px solid var(--rust-300);outline-offset:2px}
.form .btn{flex:0 0 auto}
.formnote{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);margin-top:14px}

/* ------------------------------------------------------------------ blog */
.posts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:800px){.posts{grid-template-columns:repeat(3,1fr)}}
.post{background:var(--ink-100);padding:clamp(26px,3vw,36px);text-decoration:none;display:flex;
  flex-direction:column;transition:background .3s var(--ease)}
.post:hover{background:var(--ink-200)}
.post__k{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rust-500);margin-bottom:20px}
.post h3{margin-bottom:12px}
.post p{font-size:15px;color:var(--mute);margin-bottom:22px}
.post__go{margin-top:auto;font-family:"Archivo";font-stretch:80%;font-weight:800;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.17em;color:var(--bone)}

.prose{max-width:70ch}
.prose h2{font-size:clamp(24px,3.2vw,38px);margin-top:2.1em}
.prose h3{margin-top:1.9em;font-size:clamp(18px,2.2vw,23px)}
.prose ul,.prose ol{padding-left:20px;margin:0 0 1.3em;max-width:66ch}
.prose li{margin-bottom:.5em}
.prose blockquote{margin:1.8em 0;padding:20px 0 20px 24px;border-left:2px solid var(--rust-500);
  font-family:"Archivo";font-stretch:82%;font-weight:600;font-size:clamp(18px,2.2vw,23px);
  line-height:1.45;color:var(--bone)}
.prose blockquote p:last-child{margin-bottom:0}
/* :not(.btn) so a button inside prose keeps its own #0B0503 on rust-500 (5.40:1)
   instead of inheriting rust-300 on rust-500 (1.60:1) */
.prose a:not(.btn){color:var(--rust-300)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 1.6em;font-size:15px}
.prose th{text-align:left;font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);font-weight:400;padding:0 14px 11px 0;border-bottom:1px solid var(--line)}
.prose td{padding:12px 14px 12px 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
.prose td:first-child{color:var(--bone)}

/* --------------------------------------------------------------- billing */
.billing{
  font-family:"Archivo";font-stretch:62%;font-weight:600;font-size:11px;line-height:1.45;
  letter-spacing:.03em;text-transform:uppercase;text-align:center;
  max-width:60ch;margin:34px auto 0;color:var(--mute-aa);opacity:1;
}

/* ---------------------------------------------------------------- footer */
.ftr{background:var(--ink-100);border-top:1px solid var(--line);padding-block:clamp(50px,6vw,80px)}
.ftr__top{display:grid;gap:36px;margin-bottom:48px}
@media(min-width:820px){.ftr__top{grid-template-columns:1.4fr 1fr 1fr}}
.ftr__mark{font-family:"Archivo";font-stretch:62%;font-weight:900;word-spacing:.16em;font-size:clamp(52px,9vw,110px);
  line-height:.82;letter-spacing:-.04em;color:var(--bone);margin:0 0 14px}
.ftr__mark span{color:var(--rust-500)}
.ftr h4{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);font-weight:400;margin:0 0 16px}
/* gap folded into the link box so each row is a 44px target without the list
   growing much taller than the 25px + 10px rhythm it replaced */
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.ftr ul a{display:flex;align-items:center;min-height:44px;
  text-decoration:none;font-family:"Archivo";font-stretch:82%;font-weight:600;
  font-size:15px;color:var(--body)}
.ftr ul a:hover{color:var(--rust-300)}
.ftr__bot{border-top:1px solid var(--line);padding-top:28px;display:flex;flex-wrap:wrap;
  gap:20px;align-items:center;justify-content:space-between}
.socials{display:flex;gap:14px;flex-wrap:wrap}
.socials a{display:inline-flex;align-items:center;min-height:44px;
  font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;color:var(--mute);border:1px solid var(--line);
  padding:8px 14px;transition:color .2s var(--ease),border-color .2s var(--ease)}
.socials a:hover{color:var(--rust-500);border-color:var(--rust-500)}
.badge-wrap{text-align:center;padding-top:34px}

/* ------------------------------------------------------------ note flags */
.tbd{
  display:inline-block;font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-300);border:1px dashed rgba(63,211,188,.45);
  padding:3px 7px;vertical-align:middle;margin-left:8px;white-space:nowrap;
}

/* ------------------------------------------------------------ reduced mo */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-rev]{opacity:1!important;transform:none!important}
  /* the delayed visibility flips must go too, or hidden chrome stays live */
  .nav,.strip{transition-delay:0s!important}
}
@media (max-width:700px){
  :root{--grain:.045}
  .grain::after{animation:none}
}

/* =========================================================================
   Additions from the fix pass. Skip link, footer titles, clips index.
   The old .reels / .reel* block above is dead and is removed below by
   being superseded: nothing emits those classes any more.
   ========================================================================= */

/* ------------------------------------------------------------- skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:999;
  padding:14px 20px;min-height:44px;display:inline-flex;align-items:center;
  background:var(--rust-500);color:#0B0503;text-decoration:none}
.skip:focus{left:0}
main:focus{outline:none}

/* --------------------------------------------------- footer column titles */
.ftr__ttl{font-family:"Space Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute-aa,var(--mute));font-weight:400;margin:0 0 16px}

/* --------------------------------------------------------- clips index */
.clips{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
@media(min-width:700px){.clips{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}}
.clip{display:flex;flex-direction:column;gap:10px;min-height:132px;
  padding:12px 12px 11px;background:var(--ink-100);text-decoration:none;
  transition:background .25s var(--ease)}
.clip:hover,.clip:focus-visible{background:var(--ink-200)}
.clip__code{font-family:"Space Mono",ui-monospace,monospace;font-size:10px;
  letter-spacing:.14em;color:var(--rust-500)}
.clip__cap{margin-top:auto;font-family:"Archivo",sans-serif;font-stretch:80%;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;font-size:12px;line-height:1.25;color:var(--bone)}
.clip__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-height:18px;padding-top:9px;border-top:1px solid var(--line-soft)}
.clip__kind{font-family:"Space Mono",ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute-aa,var(--mute))}
.clip__play{width:18px;height:18px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;transition:border-color .25s var(--ease)}
.clip__play svg{width:7px;height:7px;margin-left:1px;fill:var(--mute-aa,var(--mute));transition:fill .25s var(--ease)}
.clip:hover .clip__play{border-color:var(--rust-500)}
.clip:hover .clip__play svg{fill:var(--rust-500)}

/* fact index on the story page */
.facts{margin:0;display:grid;grid-template-columns:1fr;gap:0}
.facts div{display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--line-soft)}
.facts dt{font-family:"Space Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute-aa,var(--mute));flex:none}
.facts dd{margin:0;text-align:right;font-family:"Archivo",sans-serif;font-stretch:82%;font-weight:700;
  font-size:14.5px;color:var(--bone);letter-spacing:.01em}

/* =========================================================================
   Persistent mix player.
   Browsers block autoplay with sound outright, so this arms itself and
   starts on the visitor's first real gesture. Always one tap from silence.
   ========================================================================= */
.player{
  position:fixed;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));
  z-index:118;display:flex;align-items:center;gap:0;
  background:rgba(12,20,19,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:0;
  transform:translateY(140%);opacity:0;
  transition:transform .5s var(--ease),opacity .5s var(--ease),border-color .3s var(--ease);
  max-width:calc(100vw - 32px);
}
.player.is-ready{transform:none;opacity:1}
.player.is-playing{border-color:var(--rust-700)}
.player__btn{
  appearance:none;background:none;border:0;cursor:pointer;flex:none;
  width:52px;height:52px;display:grid;place-items:center;color:var(--bone);padding:0;
  border-right:1px solid var(--line);transition:color .2s var(--ease),background .2s var(--ease);
}
.player__btn:hover{color:var(--rust-300);background:var(--ink-200)}
.player__btn svg{width:15px;height:15px;fill:currentColor}
.player__btn .ico-pause{display:none}
.player.is-playing .player__btn .ico-play{display:none}
.player.is-playing .player__btn .ico-pause{display:block}
.player__meta{padding:0 16px 0 14px;min-width:0;display:flex;flex-direction:column;gap:3px;justify-content:center;height:52px}
.player__k{font-family:"Space Mono",ui-monospace,monospace;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute-aa,var(--mute));line-height:1;white-space:nowrap}
.player.is-playing .player__k{color:var(--rust-500)}
.player__t{font-family:"Archivo",sans-serif;font-stretch:82%;font-weight:700;font-size:12.5px;
  letter-spacing:.03em;color:var(--bone);line-height:1;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:min(46vw,240px)}
.player__eq{display:flex;align-items:flex-end;gap:2px;height:12px;padding:0 14px 0 0;flex:none}
.player__eq i{width:2px;background:var(--rust-500);height:3px;display:block;border-radius:0}
.player.is-playing .player__eq i{animation:eq .9s ease-in-out infinite}
.player.is-playing .player__eq i:nth-child(2){animation-delay:.15s}
.player.is-playing .player__eq i:nth-child(3){animation-delay:.3s}
.player.is-playing .player__eq i:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}
.player__x{
  appearance:none;background:none;border:0;border-left:1px solid var(--line);cursor:pointer;
  width:40px;height:52px;display:grid;place-items:center;color:var(--mute-aa,var(--mute));padding:0;
  font-family:"Space Mono",ui-monospace,monospace;font-size:13px;line-height:1;
  transition:color .2s var(--ease)}
.player__x:hover{color:var(--bone)}
.player__frame{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
@media (max-width:420px){
  .player__t{max-width:38vw}
  .player__eq{padding-right:10px}
}
@media (prefers-reduced-motion:reduce){
  .player{transition:none}
  .player.is-playing .player__eq i{animation:none;height:7px}
}

/* =========================================================================
   Video wall. Self-hosted reels, played on the site, not linked out.
   Falls back to the index cards when a clip has no file yet.
   ========================================================================= */
.wall{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:1fr}
@media(min-width:700px){.wall{grid-template-columns:repeat(2,1fr)}}
.vcard{position:relative;background:var(--ink-100);display:flex;flex-direction:column}
.vcard__stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--teal-900);
  cursor:pointer;isolation:isolate}
.vcard__stage video,.vcard__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vcard__stage::after{content:"";position:absolute;inset:auto 0 0 0;height:52%;pointer-events:none;
  background-image:linear-gradient(0deg,rgba(7,13,12,.88),transparent);z-index:1}
.vcard__sound{
  position:absolute;right:10px;bottom:10px;z-index:3;
  width:38px;height:38px;display:grid;place-items:center;padding:0;cursor:pointer;
  background:rgba(7,13,12,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(240,234,221,.34);color:var(--bone);
  transition:border-color .2s var(--ease),color .2s var(--ease)}
.vcard__sound:hover{border-color:var(--rust-500);color:var(--rust-300)}
.vcard__sound svg{width:15px;height:15px;fill:currentColor}
.vcard__sound .ico-on{display:none}
.vcard.is-loud .vcard__sound .ico-on{display:block}
.vcard.is-loud .vcard__sound .ico-off{display:none}
.vcard.is-loud .vcard__sound{border-color:var(--rust-500);color:var(--rust-300)}
.vcard__code{position:absolute;left:12px;top:12px;z-index:3;
  font-family:"Space Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:.15em;
  color:var(--bone);background:rgba(7,13,12,.66);padding:4px 7px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vcard__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 14px;border-top:1px solid var(--line-soft)}
.vcard__cap{font-family:"Archivo",sans-serif;font-stretch:80%;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;font-size:11.5px;line-height:1.3;color:var(--bone);
  min-width:0;overflow:hidden;text-overflow:ellipsis}
.vcard__ig{font-family:"Space Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute-aa,var(--mute));text-decoration:none;flex:none;
  min-height:44px;display:inline-flex;align-items:center}
.vcard__ig:hover{color:var(--rust-300)}
/* the tap-to-start affordance, shown until the clip is actually running */
.vcard__cue{position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none;
  transition:opacity .35s var(--ease)}
.vcard.is-live .vcard__cue{opacity:0}
.vcard__cue span{width:54px;height:54px;border:1px solid rgba(240,234,221,.6);border-radius:50%;
  display:grid;place-items:center;background:rgba(7,13,12,.4)}
.vcard__cue svg{width:16px;height:16px;margin-left:3px;fill:var(--bone)}