/* ===========================================================================
   NexoraTechnologies studio page, second edition.
   Written from nothing rather than patched over the first one: the finder card,
   its folder tabs and its three dropdowns are gone, and the only way into the
   work is a row of plain category buttons.
   Dark throughout, because the page is built around night footage and a WebGL
   layer, and a light shell around either of those looks like an accident.
   =========================================================================== */

@import url("/assets/fonts/faces.css");

/* ---------- tokens ---------- */
:root{
  /* Ink runs from the video's own blacks up to the panel tint, so a panel laid
     over the hero reads as the same material rather than a grey box. */
  --ink:#05070c;
  --ink-1:#080c14;
  --ink-2:#0c121d;
  --ink-3:#121a28;

  --gold:#d1913f;          /* carried over from the first edition, unchanged */
  --gold-lit:#f0c178;
  --gold-dim:#8a6027;

  --paper:#eef2f8;
  --text:#dfe6f0;
  --dim:#94a3b8;
  --faint:#64748b;

  --line:rgba(255,255,255,.085);
  --line-2:rgba(255,255,255,.16);
  --glass:rgba(255,255,255,.035);
  --glass-2:rgba(255,255,255,.06);

  --display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;

  --ease:cubic-bezier(.22,.78,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --shell:1280px;
  --gut:clamp(20px,4.6vw,56px);
  --r:14px;
  --r-s:9px;
  --nav-h:72px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--text);
  font:400 16.5px/1.65 var(--body);
  letter-spacing:-.003em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video,canvas,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}

::selection{background:var(--gold); color:#1b1206}

/* A single film grain sheet over everything. Flat dark panels band badly on
   cheap screens and the grain is what stops it. */
.grain{
  position:fixed; inset:-120%; z-index:9000; pointer-events:none; opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}      17%{transform:translate(-3%,-2%)}
  33%{transform:translate(2%,-4%)}  50%{transform:translate(-2%,3%)}
  67%{transform:translate(3%,2%)}   83%{transform:translate(-4%,-1%)}
  100%{transform:translate(0,0)}
}

.shell{width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}

/* ---------- type scale ---------- */
.h1,.h2,.h3{font-family:var(--display); font-weight:700; letter-spacing:-.032em; margin:0; line-height:1.03}
/* Capped at 84 rather than 96 so three lines, a paragraph, two buttons and the figure strip all
   clear the fold on a 900 tall laptop, which is the commonest screen this is opened on. */
.h1{font-size:clamp(40px,6.2vw,84px)}
.h2{font-size:clamp(31px,4.1vw,56px); line-height:1.06}
.h3{font-size:clamp(21px,2.1vw,27px); letter-spacing:-.022em; line-height:1.18}
.lead{font-size:clamp(16.5px,1.32vw,19px); line-height:1.62; color:var(--dim); margin:0}

.eyebrow{
  font:500 11.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); display:flex; align-items:center; gap:11px; margin:0 0 20px;
}
.eyebrow::before{content:""; width:28px; height:1px; background:var(--gold); opacity:.7; flex:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; position:relative;
  padding:15px 26px; border-radius:var(--r-s);
  font:500 15px/1 var(--body); letter-spacing:-.01em; white-space:nowrap;
  transition:transform .4s var(--ease), background .25s, border-color .25s, color .25s;
  will-change:transform;
}
.btn svg{width:17px; height:17px; flex:none}
.btn-gold{background:var(--gold); color:#1a1105; font-weight:600}
.btn-gold:hover{background:var(--gold-lit)}
.btn-line{border:1px solid var(--line-2); color:var(--text)}
.btn-line:hover{border-color:var(--gold); color:var(--gold-lit)}

/* ===========================================================================
   masthead
   =========================================================================== */
.nav{
  position:fixed; inset:0 0 auto; z-index:800; height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .45s var(--ease), border-color .45s, backdrop-filter .45s;
  border-bottom:1px solid transparent;
}
.nav.stuck{
  background:rgba(5,7,12,.82); backdrop-filter:blur(16px) saturate(1.4);
  border-bottom-color:var(--line);
}
.nav .shell{display:flex; align-items:center; gap:30px}

.brand{display:flex; align-items:center; gap:12px; margin-right:auto}
.brand .mk{width:34px; height:34px; flex:none}
.brand .mk .ring{transform-origin:20px 20px; animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.brand b{font:700 17.5px/1 var(--display); letter-spacing:-.03em; display:block}
/* Only the strap line is set in caps. Styling every span in here put the wordmark itself in
   caps as well, which is a different company's name. */
.brand .sub{font:500 9.5px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--faint); display:block; margin-top:5px}

.navlinks{display:flex; gap:4px}
.navlinks a{
  position:relative; padding:9px 14px; border-radius:7px;
  font-size:14.5px; color:var(--dim); transition:color .25s;
}
.navlinks a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.navlinks a:hover{color:var(--paper)}
.navlinks a:hover::after,.navlinks a.on::after{transform:scaleX(1)}
.navlinks a.on{color:var(--paper)}

.burger{display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:9px; align-items:center; justify-content:center}
.burger svg{width:19px; height:19px}

.drawer{
  position:fixed; inset:var(--nav-h) 0 auto; z-index:790;
  background:rgba(5,7,12,.97); backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  display:grid; gap:2px; padding:14px var(--gut) 24px;
  clip-path:inset(0 0 100% 0); transition:clip-path .5s var(--ease);
}
.drawer.open{clip-path:inset(0 0 0 0)}
.drawer a{padding:13px 2px; font:700 20px/1 var(--display); letter-spacing:-.02em; border-bottom:1px solid var(--line)}

@media (max-width:900px){
  .navlinks{display:none}
  .burger{display:flex}
  /* The call to action lives in the hero on a phone. Leaving it in the bar pushed the menu
     button off the right edge of a 390 wide screen. */
  .nav > .shell > .btn{display:none}
}

/* ===========================================================================
   hero
   =========================================================================== */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate}
.hero-media{position:absolute; inset:0; z-index:-3}
.hero-media video,.hero-media img{
  width:100%; height:100%; object-fit:cover;
  position:absolute; inset:0;
  transform:scale(1.08); will-change:transform;
}
/* Two scrims rather than one: a vertical ramp for the headline to sit on and a
   corner vignette, so the middle of the frame keeps its contrast. */
/* Three scrims. A vertical ramp for the headline to sit on, a sweep across the left so the copy
   never lands on a lit tower, and a soft corner vignette. The right third is deliberately left
   alone, because that is where the network is drawn and it needs the footage behind it. */
.hero-scrim{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(185deg,rgba(5,7,12,.7) 0%,rgba(5,7,12,.16) 34%,rgba(5,7,12,.58) 72%,var(--ink) 100%),
    linear-gradient(100deg,rgba(5,7,12,.9) 0%,rgba(5,7,12,.74) 26%,rgba(5,7,12,.34) 52%,rgba(5,7,12,0) 74%),
    radial-gradient(120% 86% at 16% 58%,rgba(5,7,12,.6) 0%,rgba(5,7,12,0) 64%);
}
/* A canvas is a replaced element with an intrinsic 300 by 150, and for those CSS resolves an
   auto width from the intrinsic size and then throws the opposite offset away. inset alone left
   it sitting in the top left corner at its default size, so the width and height are explicit. */
.hero-gl{position:absolute; inset:0; width:100%; height:100%; z-index:-1; opacity:0; transition:opacity 1.6s var(--ease)}
.hero-gl.lit{opacity:1}

.hero .shell{padding-top:calc(var(--nav-h) + 58px); padding-bottom:34px; width:100%}
.hero-copy{max-width:min(860px,74vw)}
.hero-copy .lead{max-width:582px; margin-top:24px; color:#c4d0e0}

/* Each headline line is wrapped and slid up out of its own mask.
   Everything that starts hidden is scoped to .js, a class the document sets for itself in the
   head. Without it a reader with scripting off gets a page of invisible paragraphs, which is a
   worse failure than a page with no animation. */
.ln{display:block; overflow:hidden; padding-bottom:.09em; margin-bottom:-.05em}
.js .ln > span{display:block; transform:translateY(105%); transition:transform 1.05s var(--ease-out)}
.ready .ln > span{transform:none}
.ln:nth-child(2) > span{transition-delay:.1s}
.ln:nth-child(3) > span{transition-delay:.2s}
.ln em{font-style:normal; color:var(--gold)}

.js .fade-up{opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out)}
.ready .fade-up{opacity:1; transform:none}
.ready .d1{transition-delay:.42s} .ready .d2{transition-delay:.56s} .ready .d3{transition-delay:.7s}

.hero-cta{display:flex; flex-wrap:wrap; gap:13px; margin-top:32px}

/* the strip across the bottom of the frame */
.hero-foot{
  position:relative; z-index:2; border-top:1px solid var(--line);
  margin-top:clamp(34px,4.6vw,56px); padding-top:20px;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:clamp(24px,4.6vw,62px);
}
.hf{display:flex; align-items:baseline; gap:11px}
.hf b{font:700 clamp(26px,3vw,36px)/1 var(--display); letter-spacing:-.045em; color:var(--paper)}
.hf span{font-size:13.5px; color:var(--faint); max-width:170px; line-height:1.4}
.hf-sp{flex:1}

.cue{display:flex; align-items:center; gap:10px; font:500 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--faint)}
.cue i{display:block; width:1px; height:34px; background:linear-gradient(var(--gold),transparent); position:relative; overflow:hidden}
.cue i::after{content:""; position:absolute; inset:0; background:var(--gold-lit); animation:drop 2.2s var(--ease) infinite}
@keyframes drop{0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)}}

@media (max-width:760px){
  .hero-copy{max-width:none}
  .hero-foot{gap:22px 34px}
  .hf span{max-width:120px; font-size:12.5px}
  .cue{display:none}
  /* On a narrow screen the copy runs the full width, so the sweep across the left no longer
     covers it and the scrim has to be an even wash instead. */
  .hero-scrim{
    background:
      linear-gradient(180deg,rgba(5,7,12,.84) 0%,rgba(5,7,12,.5) 28%,rgba(5,7,12,.74) 66%,var(--ink) 100%),
      linear-gradient(90deg,rgba(5,7,12,.72),rgba(5,7,12,.3));
  }
}

/* ===========================================================================
   sections
   =========================================================================== */
.sec{position:relative; padding:clamp(72px,8vw,118px) 0}
.sec-head{max-width:780px; margin-bottom:clamp(44px,5.4vw,70px)}
.sec-head .lead{margin-top:20px}

/* the reveal used everywhere below the fold */
.js .rise{opacity:0; transform:translateY(34px); transition:opacity .95s var(--ease-out), transform .95s var(--ease-out)}
.rise.in{opacity:1; transform:none}
.js .stag > *{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out)}
.stag.in > *{opacity:1; transform:none}

/* a hairline that draws itself in */
.rule{height:1px; background:var(--line-2); transform-origin:left; transition:transform 1.3s var(--ease-out)}
.js .rule{transform:scaleX(0)}
.rule.in{transform:scaleX(1)}

/* ===========================================================================
   category buttons: the whole of the filter, replacing the old finder card
   =========================================================================== */
.cats{display:flex; flex-wrap:wrap; gap:11px; perspective:900px}
.cat{
  --glow:transparent;
  position:relative; display:inline-flex; align-items:center; gap:12px;
  padding:16px 22px 16px 18px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--glass);
  transform-style:preserve-3d; will-change:transform;
  transition:border-color .3s, background .3s, color .3s;
}
.cat::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(209,145,63,.22),transparent 62%);
  opacity:0; transition:opacity .35s;
}
.cat:hover{border-color:rgba(209,145,63,.5); background:var(--glass-2)}
.cat:hover::before{opacity:1}
.cat .ico{
  width:38px; height:38px; flex:none; border-radius:10px;
  display:grid; place-items:center;
  border:1px solid var(--line); background:rgba(255,255,255,.04);
  color:var(--gold); transform:translateZ(22px);
  transition:border-color .3s, background .3s, color .3s;
}
.cat .ico svg{width:19px; height:19px}
.cat .lbl{font:500 15.5px/1.15 var(--body); letter-spacing:-.012em; transform:translateZ(14px)}
.cat .n{
  font:500 11.5px/1 var(--mono); color:var(--faint);
  padding:4px 8px; border-radius:20px; border:1px solid var(--line);
  transform:translateZ(14px);
}
.cat[aria-pressed="true"]{background:var(--gold); border-color:var(--gold); color:#1a1105}
.cat[aria-pressed="true"] .ico{background:rgba(26,17,5,.14); border-color:rgba(26,17,5,.2); color:#1a1105}
.cat[aria-pressed="true"] .n{border-color:rgba(26,17,5,.25); color:rgba(26,17,5,.75)}
.cat[aria-pressed="true"]::before{opacity:0}

@media (max-width:560px){
  .cat{padding:12px 16px 12px 13px; gap:10px}
  .cat .ico{width:32px; height:32px; border-radius:8px}
  .cat .ico svg{width:17px; height:17px}
  .cat .lbl{font-size:14.5px}
}

/* ===========================================================================
   the work
   =========================================================================== */
.work-top{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:30px}
.count{font:500 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}

.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(16px,1.7vw,26px)}
.card{
  grid-column:span 4; position:relative; display:block;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--ink-2);
  transition:border-color .35s, transform .5s var(--ease);
  will-change:transform;
}
.card:first-child{grid-column:span 8}
.card:nth-child(2){grid-column:span 4}
.card:hover{border-color:rgba(209,145,63,.45); transform:translateY(-5px)}
.card .shot{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--ink-3)}
.card .shot img{width:100%; height:100%; object-fit:cover; object-position:top; transition:transform 1.1s var(--ease)}
.card:hover .shot img{transform:scale(1.045)}
.card .meta{padding:20px 22px 24px}
.card .k{font:500 11px/1 var(--mono); letter-spacing:.15em; text-transform:uppercase; color:var(--gold); display:flex; gap:10px; align-items:center}
.card .k i{width:3px; height:3px; border-radius:50%; background:var(--faint); display:block}
.card .k em{font-style:normal; color:var(--faint)}
.card h3{font:700 clamp(19px,1.7vw,23px)/1.15 var(--display); letter-spacing:-.025em; margin:11px 0 8px}
.card p{margin:0; font-size:14.5px; line-height:1.55; color:var(--dim)}
@media (max-width:880px){
  .card,.card:first-child,.card:nth-child(2){grid-column:span 6}
}
@media (max-width:600px){
  .card,.card:first-child,.card:nth-child(2){grid-column:span 12}
}

/* the state the page is in today: nothing listed, and saying so on purpose */
.rebuild{
  position:relative; border:1px solid var(--line); border-radius:var(--r);
  background:
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012)),
    var(--ink-1);
  overflow:hidden;
  display:grid; grid-template-columns:1.25fr .95fr;
}
.rebuild::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 70% at 85% 0%,rgba(209,145,63,.13),transparent 60%);
}
.rebuild .say{padding:clamp(34px,4.2vw,58px); position:relative; z-index:1; display:flex; flex-direction:column}
.rebuild h3{margin:0 0 16px}
.rebuild p{margin:0 0 14px; color:var(--dim); font-size:15.5px; max-width:48ch}
/* pushed to the floor of the panel so the two columns finish level */
.rebuild .note{font-size:13.5px; color:var(--faint); border-left:1px solid var(--line-2); padding-left:14px; margin:auto 0 0; padding-top:4px}

.meterwrap{padding:clamp(34px,4.2vw,58px); border-left:1px solid var(--line); position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; gap:22px}
.meter-n{display:flex; align-items:baseline; gap:9px}
.meter-n b{font:700 clamp(44px,6vw,76px)/1 var(--display); letter-spacing:-.05em; color:var(--paper)}
.meter-n span{font:500 13px/1 var(--mono); color:var(--faint)}
.meter{height:3px; background:var(--line); border-radius:3px; overflow:hidden}
.meter i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold-dim),var(--gold-lit)); transition:width 1.4s var(--ease-out)}
.meter-k{font:500 11.5px/1.5 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}

/* the inventory, drawn as bars so the eleven categories read as a shape */
.tally{display:grid; gap:9px; margin-top:4px}
.tally .row{display:grid; grid-template-columns:132px 1fr 30px; align-items:center; gap:12px}
.tally .row span{font-size:12.5px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tally .bar{height:7px; background:var(--line); border-radius:4px; overflow:hidden}
.tally .bar i{display:block; height:100%; width:0; background:var(--gold-dim); border-radius:4px; transition:width 1.1s var(--ease-out)}
.tally .row:nth-child(2n) .bar i{background:rgba(209,145,63,.55)}
.tally b{font:500 12.5px/1 var(--mono); color:var(--faint); text-align:right}

@media (max-width:860px){
  .rebuild{grid-template-columns:1fr}
  .meterwrap{border-left:0; border-top:1px solid var(--line)}
}

/* ===========================================================================
   full bleed video band
   =========================================================================== */
.band{position:relative; overflow:hidden; isolation:isolate; min-height:min(84vh,760px); display:flex; align-items:center}
.band-media{position:absolute; inset:-12% 0; z-index:-2}
.band-media video,.band-media img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0; will-change:transform}
.band::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,rgba(5,7,12,.93) 0%,rgba(5,7,12,.72) 44%,rgba(5,7,12,.3) 100%),
             linear-gradient(180deg,var(--ink),transparent 22%,transparent 78%,var(--ink));
}
.band .shell{padding-block:clamp(70px,9vw,120px)}
.band-copy{max-width:640px}
.band-copy p{font-size:clamp(17px,1.5vw,20px); line-height:1.6; color:#c6d2e2; margin:24px 0 0}

.ticks{display:flex; flex-wrap:wrap; gap:10px; margin-top:34px}
.tick{
  display:inline-flex; align-items:center; gap:9px; padding:9px 15px;
  border:1px solid var(--line-2); border-radius:30px;
  font:500 12.5px/1 var(--mono); letter-spacing:.04em; color:var(--text);
  background:rgba(5,7,12,.4); backdrop-filter:blur(6px);
}
.tick svg{width:14px; height:14px; color:var(--gold)}

/* ===========================================================================
   how we work
   =========================================================================== */
.craft{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.cr{background:var(--ink-1); padding:clamp(30px,3.6vw,48px); position:relative; transition:background .4s}
.cr:hover{background:var(--ink-2)}
.cr .no{font:500 11.5px/1 var(--mono); color:var(--gold); letter-spacing:.16em}
.cr h3{margin:20px 0 13px}
.cr p{margin:0; color:var(--dim); font-size:15px; line-height:1.6}
/* The drawing runs the full width of its panel. Pinned to its own 320 unit box it sat in the
   left half and read as a stray graphic rather than part of the card. */
.cr .draw{margin-top:auto; padding-top:30px; color:var(--gold)}
.cr .draw svg{width:100%; height:auto; overflow:visible}
.cr{display:flex; flex-direction:column}
.cr .draw [data-draw]{
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.6s var(--ease-out);
}
.cr.in .draw [data-draw]{stroke-dashoffset:0}
@media (max-width:760px){ .craft{grid-template-columns:1fr} }

/* ===========================================================================
   figures
   =========================================================================== */
.figs{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(34px,5vw,74px); align-items:center}
.figrow{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.fig{background:var(--ink-1); padding:24px 26px; display:flex; align-items:baseline; gap:18px}
.fig b{font:700 clamp(28px,3.4vw,42px)/1 var(--display); letter-spacing:-.04em; color:var(--paper); flex:none; min-width:4.6ch; font-variant-numeric:tabular-nums}
.fig span{font-size:14.5px; line-height:1.5; color:var(--dim)}

.plot{border:1px solid var(--line); border-radius:var(--r); background:var(--ink-1); padding:28px}
.plot svg{width:100%; height:auto; overflow:visible}
.plot .cap{display:flex; justify-content:space-between; margin-top:18px; font:500 11px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--faint)}
.plot [data-draw]{stroke-dasharray:var(--len); stroke-dashoffset:var(--len); transition:stroke-dashoffset 2s var(--ease-out)}
.plot.in [data-draw]{stroke-dashoffset:0}
.plot .col{transform-origin:bottom; transition:transform 1.1s var(--ease-out)}
.js .plot .col{transform:scaleY(0)}
.plot.in .col{transform:none}
@media (max-width:880px){ .figs{grid-template-columns:1fr} }

/* ---------- the marquee of markets ---------- */
.strip{border-block:1px solid var(--line); padding:26px 0; overflow:hidden; display:flex; gap:0; mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.strip ul{display:flex; gap:52px; margin:0; padding:0 26px 0 0; list-style:none; flex:none; animation:slide 44s linear infinite}
.strip li{font:500 13px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--faint); white-space:nowrap; display:flex; align-items:center; gap:52px}
.strip li::after{content:""; width:4px; height:4px; border-radius:50%; background:var(--gold-dim); flex:none}
@keyframes slide{to{transform:translateX(-100%)}}
.strip:hover ul{animation-play-state:paused}

/* ===========================================================================
   footer
   =========================================================================== */
.foot{border-top:1px solid var(--line); padding:clamp(60px,7vw,92px) 0 46px; background:var(--ink-1)}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(26px,3.4vw,54px)}
.foot h5{font:500 11px/1 var(--mono); letter-spacing:.17em; text-transform:uppercase; color:var(--faint); margin:0 0 18px}
.foot nav{display:grid; gap:11px}
.foot nav a{font-size:14.5px; color:var(--dim); transition:color .25s}
.foot nav a:hover{color:var(--gold-lit)}
.foot .blurb{font-size:14.5px; color:var(--dim); margin:18px 0 0; max-width:34ch}
.credits{margin-top:clamp(44px,5vw,66px); padding-top:26px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:18px 34px; justify-content:space-between}
.credits p{margin:0; font-size:12.5px; line-height:1.65; color:var(--faint); max-width:72ch}
.credits a{color:var(--dim); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-2)}
.credits a:hover{color:var(--gold-lit)}
@media (max-width:860px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .foot-grid{grid-template-columns:1fr} }

/* ===========================================================================
   anybody who has asked for less movement gets the page without any
   =========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  /* These have to match the specificity of the .js rules above, or the page stays hidden for
     exactly the reader who asked for less movement. */
  .js .ln > span{transform:none}
  .js .fade-up,.js .rise,.js .stag > *{opacity:1; transform:none}
  .js .rule{transform:none}
  .grain{display:none}
  .hero-gl{display:none}
  .cr .draw [data-draw],.plot [data-draw]{stroke-dashoffset:0}
  .js .plot .col{transform:none}
}