/* ============================================================
   STUDIO ▸ 01 — cinema noir
   Spec work. Plain static HTML/CSS/JS, no build step.
   ============================================================ */

/* ---------- 1. tokens ---------- */
:root{
  --ink:      #050506;
  --ink-1:    #0a0a0c;
  --ink-2:    #121215;
  --ink-3:    #1c1c21;
  --hair:     rgba(237,234,227,.14);
  --hair-2:   rgba(237,234,227,.07);

  --bone:     #EDEAE3;
  --bone-70:  rgba(237,234,227,.70);
  --bone-45:  rgba(237,234,227,.45);
  --bone-28:  rgba(237,234,227,.28);

  --signal:   #5B7CFF;   /* structural / interactive */
  --live:     #FF9A2E;   /* playing / active */

  --pad:      clamp(1.25rem, 4vw, 4.5rem);
  --maxw:     1680px;

  --ease:     cubic-bezier(.16,1,.3,1);
  --ease-io:  cubic-bezier(.65,.05,.36,1);

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --disp: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 2. reset ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:var(--mono); font-weight:400;
  font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,canvas,video,svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
h1,h2,h3,h4,p,figure,blockquote{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }
::selection{ background:var(--signal); color:#fff }
:focus-visible{ outline:2px solid var(--signal); outline-offset:3px }

/* ---------- 3. type ---------- */
.disp{
  font-family:var(--disp); font-weight:800;
  font-variation-settings:"wdth" 74,"wght" 800;
  text-transform:uppercase; line-height:.86;
  letter-spacing:-.015em;
}
.disp--wide{ font-variation-settings:"wdth" 108,"wght" 700 }
.disp--thin{ font-variation-settings:"wdth" 70,"wght" 300 }

.t-mega{ font-size:clamp(3.1rem, 12.5vw, 12.5rem) }
.t-xl  { font-size:clamp(2.3rem, 6.6vw, 6rem) }
.t-lg  { font-size:clamp(1.7rem, 3.6vw, 3.1rem) }
.t-md  { font-size:clamp(1.15rem, 1.9vw, 1.6rem) }

.lbl{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.16em; color:var(--bone-45);
}
.lbl--signal{ color:var(--signal) }
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1 }
.lede{ font-size:clamp(1rem,1.35vw,1.2rem); line-height:1.62; color:var(--bone-70); max-width:62ch }
.prose p{ color:var(--bone-70); max-width:66ch }
.prose p + p{ margin-top:1.1em }

/* ---------- 4. layout ---------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad) }
.rule{ height:1px; background:var(--hair); border:0; margin:0 }
.sect{ padding-block:clamp(4rem,9vw,9rem) }
.grid{ display:grid; gap:clamp(1rem,2.2vw,2rem) }
.g-12{ grid-template-columns:repeat(12,1fr) }
@media (max-width:860px){
  .g-12{ grid-template-columns:repeat(6,1fr) }
  /* Every grid-column span in the markup is written for the 12-column track list.
     Below this breakpoint the grid is 6 wide, so those spans (1/8, 3/10, 9/13 …)
     run off the end into implicit tracks and squeeze every column — which reads as
     clipped headlines, not as a wrap. The spans are inline styles, so !important is
     what it takes to reset them. Stack full-width instead. */
  .g-12 > *{ grid-column:1 / -1 !important }
}

/* ---------- 5. chrome / nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.9rem var(--pad);
  background:linear-gradient(to bottom, rgba(5,5,6,.92), rgba(5,5,6,0));
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:transform .5s var(--ease), background .4s linear;
}
.nav[data-hidden="true"]{ transform:translateY(-102%) }
.mark{
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--disp); font-variation-settings:"wdth" 88,"wght" 800;
  text-transform:uppercase; letter-spacing:.02em; font-size:.95rem;
  view-transition-name:mark;
}
.mark__dot{ width:7px; height:7px; background:var(--signal); border-radius:50%; flex:none }
.mark__cue{ color:var(--signal) }
.nav__links{ display:flex; gap:clamp(.9rem,2vw,2rem); align-items:center }
.nav__links a{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em; color:var(--bone-45);
  position:relative; padding-block:.35rem; transition:color .3s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:.1rem; height:1px;
  background:currentColor; transition:right .45s var(--ease);
}
.nav__links a:hover, .nav__links a[aria-current="page"]{ color:var(--bone) }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after{ right:0 }
@media (max-width:720px){
  .nav__links a span{ display:none }
  .nav{ padding-inline:1rem }
}

/* ---------- 6. scroll-scrub hero ---------- */
.scrub{ position:relative }
.scrub__track{ height:var(--scrub-h, 480vh); position:relative }
.scrub__stage{
  position:sticky; top:0; height:100vh; overflow:hidden;
  background:var(--ink);
}
.scrub__canvas{ width:100%; height:100%; display:block }
.scrub__stage::after{ /* vignette */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(5,5,6,.55) 100%),
    linear-gradient(to bottom, rgba(5,5,6,.75) 0%, transparent 22%, transparent 62%, rgba(5,5,6,.92) 100%);
}
.scrub__hud{
  position:absolute; z-index:3; inset:auto var(--pad) clamp(1.1rem,3vw,2.4rem) var(--pad);
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
  pointer-events:none;
}
.scrub__meter{ display:flex; align-items:center; gap:.7rem }
.scrub__bar{ width:clamp(80px,18vw,240px); height:2px; background:var(--hair); position:relative; overflow:hidden }
.scrub__bar i{ position:absolute; inset:0 100% 0 0; background:var(--signal); transition:right .12s linear }
.scrub__type{
  position:absolute; z-index:2; left:var(--pad); right:var(--pad);
  top:50%; transform:translateY(-50%);
  display:grid; gap:clamp(.7rem,1.6vw,1.4rem);
  pointer-events:none;
}
.scrub__type .t-mega{ mix-blend-mode:difference; color:#fff }
.scrub__scrollcue{
  position:absolute; z-index:3; left:50%; transform:translateX(-50%);
  bottom:clamp(1.1rem,3vw,2.4rem); display:grid; gap:.5rem; justify-items:center;
  transition:opacity .5s var(--ease);
}
.scrub__scrollcue i{
  width:1px; height:34px; background:linear-gradient(var(--bone-45), transparent);
  animation:cue 2.2s var(--ease-io) infinite;
}
@keyframes cue{ 0%{transform:scaleY(0);transform-origin:top} 55%{transform:scaleY(1);transform-origin:top} 56%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }
.scrub__loading{
  position:absolute; z-index:4; inset:auto auto clamp(1.1rem,3vw,2.4rem) var(--pad);
  display:flex; gap:.6rem; align-items:center; transition:opacity .6s var(--ease);
}
.scrub__loading[data-done="true"]{ opacity:0; pointer-events:none }
@media (prefers-reduced-motion:reduce){
  .scrub__track{ height:100vh !important }
  .scrub__scrollcue i{ animation:none }
}

/* ---------- 7. filmography / credits table ---------- */
.cred{ border-top:1px solid var(--hair) }
.cred__row{
  display:grid; align-items:center; gap:1rem;
  grid-template-columns:5.5rem minmax(0,1fr) 10rem 7.5rem 2rem;
  padding-block:clamp(.85rem,1.7vw,1.35rem);
  border-bottom:1px solid var(--hair-2);
  position:relative; isolation:isolate;
  transition:padding-inline .5s var(--ease), border-color .4s linear;
}
.cred__row:hover{ padding-inline:1rem; border-color:var(--hair) }
.cred__row::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, var(--ink-2), transparent 70%);
  opacity:0; transition:opacity .45s var(--ease);
}
.cred__row:hover::before{ opacity:1 }
.cred__yr{ color:var(--bone-45); font-size:.8125rem }
.cred__ttl{
  font-family:var(--disp); font-variation-settings:"wdth" 80,"wght" 700;
  text-transform:uppercase; font-size:clamp(1.05rem,2.4vw,1.9rem);
  line-height:1.02; letter-spacing:-.005em;
  transition:color .35s var(--ease);
}
.cred__row:hover .cred__ttl{ color:var(--signal) }
.cred__meta, .cred__kind{ font-size:.75rem; color:var(--bone-45); letter-spacing:.04em }
.cred__kind{ text-transform:uppercase; letter-spacing:.13em; font-size:.6875rem }
.cred__go{ text-align:right; color:var(--bone-28); transition:transform .45s var(--ease), color .35s }
.cred__row:hover .cred__go{ transform:translateX(5px); color:var(--bone) }
@media (max-width:900px){
  .cred__row{ grid-template-columns:4rem minmax(0,1fr) 1.5rem; row-gap:.3rem }
  .cred__meta{ grid-column:2; font-size:.7rem }
  .cred__kind{ display:none }
}
/* floating hover still */
.peek{
  position:fixed; z-index:40; width:clamp(190px,20vw,300px); aspect-ratio:3/2;
  pointer-events:none; opacity:0; overflow:hidden;
  border:1px solid var(--hair); background:var(--ink-2);
  transform:translate(-50%,-50%) scale(.94); transition:opacity .3s var(--ease), transform .5s var(--ease);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.9);
}
.peek[data-on="true"]{ opacity:1; transform:translate(-50%,-50%) scale(1) }
.peek img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.12) }
@media (hover:none),(max-width:900px){ .peek{ display:none } }

/* ---------- 8. work cards ---------- */
.cards{ display:grid; gap:clamp(1rem,2.4vw,2.2rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)) }
.card{ display:grid; gap:.9rem; position:relative }
.card__media{ position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--ink-2) }
.card__media img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.08) brightness(.92);
  transform:scale(1.02); transition:transform 1.1s var(--ease), filter .7s var(--ease);
}
.card:hover .card__media img{ transform:scale(1.07); filter:grayscale(.15) contrast(1.05) brightness(1) }
.card__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(5,5,6,.75), transparent 55%);
}
.card__idx{
  position:absolute; z-index:2; top:.8rem; left:.9rem;
  font-family:var(--mono); font-size:.65rem; letter-spacing:.14em; color:var(--bone-70);
}
.card__ttl{
  font-family:var(--disp); font-variation-settings:"wdth" 78,"wght" 700;
  text-transform:uppercase; font-size:clamp(1.1rem,1.7vw,1.45rem); line-height:1.04;
}
.card__sub{ font-size:.75rem; color:var(--bone-45) }

/* ---------- 9. sticky player ---------- */
.player{
  position:fixed; z-index:55; inset:auto 0 0 0;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:clamp(.7rem,1.6vw,1.4rem);
  padding:.7rem var(--pad);
  background:rgba(8,8,10,.82);
  backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-top:1px solid var(--hair);
  transform:translateY(101%); transition:transform .65s var(--ease);
}
.player[data-open="true"]{ transform:translateY(0) }
.player__btn{
  width:38px; height:38px; flex:none; display:grid; place-items:center;
  border:1px solid var(--hair); border-radius:50%;
  transition:border-color .3s, background .3s, transform .3s var(--ease);
}
.player__btn:hover{ border-color:var(--bone-45); transform:scale(1.06) }
.player__btn svg{ width:12px; height:12px; fill:var(--bone) }
.player[data-playing="true"] .player__btn{ border-color:var(--live) }
.player[data-playing="true"] .player__btn svg{ fill:var(--live) }
.player__mid{ display:grid; gap:.3rem; min-width:0 }
.player__top{ display:flex; align-items:baseline; gap:.6rem; min-width:0 }
.player__ttl{
  font-family:var(--disp); font-variation-settings:"wdth" 80,"wght" 700;
  text-transform:uppercase; font-size:.875rem; letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.player__wave{ width:100%; height:26px; display:block; opacity:.9 }
.player__time{ font-size:.6875rem; color:var(--bone-45); letter-spacing:.06em; white-space:nowrap }
.player__seek{ position:relative; height:2px; background:var(--hair); cursor:pointer }
.player__seek i{ position:absolute; inset:0 100% 0 0; background:var(--live) }
.player__x{ color:var(--bone-28); font-size:1rem; padding:.4rem; transition:color .3s }
.player__x:hover{ color:var(--bone) }
@media (max-width:640px){ .player__wave{ display:none } }

/* play triggers in lists */
.cue{
  display:grid; grid-template-columns:2.2rem minmax(0,1fr) auto; align-items:center; gap:1rem;
  width:100%; text-align:left; padding-block:.85rem;
  border-bottom:1px solid var(--hair-2); transition:padding-inline .45s var(--ease);
}
.cue:hover{ padding-inline:.7rem }
.cue__ico{
  width:2.2rem; height:2.2rem; border:1px solid var(--hair); border-radius:50%;
  display:grid; place-items:center; transition:border-color .3s, background .3s;
}
.cue__ico svg{ width:9px; height:9px; fill:var(--bone-70) }
.cue:hover .cue__ico{ border-color:var(--signal) }
.cue[data-active="true"] .cue__ico{ border-color:var(--live) }
.cue[data-active="true"] .cue__ico svg{ fill:var(--live) }
.cue[data-active="true"] .cue__name{ color:var(--live) }
.cue__name{ font-size:.9375rem; transition:color .3s }
.cue__dur{ font-size:.75rem; color:var(--bone-45) }

/* ---------- 10. cursor ---------- */
.cursor{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%;
  border:1px solid var(--bone-45); mix-blend-mode:difference;
  opacity:0;                       /* revealed on the first pointermove */
  transition:width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease),
             background .4s var(--ease), border-color .3s, opacity .25s;
}
.cursor[data-ready="true"]{ opacity:1 }
.cursor[data-v="link"]{ width:54px; height:54px; margin:-27px 0 0 -27px; background:rgba(237,234,227,.1); border-color:var(--bone) }
.cursor[data-v="media"]{ width:78px; height:78px; margin:-39px 0 0 -39px; background:rgba(237,234,227,.06) }
.cursor[data-v="hidden"]{ opacity:0 }
.cursor__lbl{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--mono); font-size:.5625rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bone); opacity:0; transition:opacity .3s;
}
.cursor[data-v="media"] .cursor__lbl{ opacity:1 }
@media (hover:none),(pointer:coarse){ .cursor{ display:none } }
html.has-cursor, html.has-cursor *{ cursor:none !important }

/* ---------- 11. reveals ---------- */
/* Reveals are gated on html.js (set by an inline head script) so that a visitor
   without JS — or one where JS fails to load — sees every word rather than a
   page of invisible elements. */
html.js [data-rv]{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease) }
html.js [data-rv][data-in="true"]{ opacity:1; transform:none }
[data-rv-d="1"]{ transition-delay:.08s } [data-rv-d="2"]{ transition-delay:.16s }
[data-rv-d="3"]{ transition-delay:.24s } [data-rv-d="4"]{ transition-delay:.32s }
[data-rv-d="5"]{ transition-delay:.4s }  [data-rv-d="6"]{ transition-delay:.48s }
.rv-line{ display:block; overflow:hidden }
html.js .rv-line > *{ display:block; transform:translateY(105%); transition:transform 1.05s var(--ease) }
html.js [data-in="true"] .rv-line > *{ transform:none }
.rv-line:nth-child(2) > *{ transition-delay:.09s }
.rv-line:nth-child(3) > *{ transition-delay:.18s }
.rv-line:nth-child(4) > *{ transition-delay:.27s }
@media (prefers-reduced-motion:reduce){
  html.js [data-rv], html.js [data-rv][data-in="true"]{ opacity:1; transform:none; transition:none }
  html.js .rv-line > *{ transform:none; transition:none }
}

/* ---------- 12. bits ---------- */
.tag{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--mono); font-size:.625rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.15em;
  padding:.3rem .6rem; border:1px solid var(--hair); color:var(--bone-45);
}
.tag--live{ border-color:var(--live); color:var(--live) }
.tag--live::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--live); animation:pulse 2s ease-in-out infinite }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.25} }
.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.15em;
  padding:.85rem 1.4rem; border:1px solid var(--bone-28); color:var(--bone);
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s;
}
.btn:hover{ background:var(--bone); color:var(--ink); border-color:var(--bone) }
.btn--signal{ border-color:var(--signal); color:var(--signal) }
.btn--signal:hover{ background:var(--signal); color:#fff; border-color:var(--signal) }
.foot{ padding-block:clamp(2.5rem,5vw,4.5rem) 7rem; border-top:1px solid var(--hair) }
.foot__grid{ display:flex; flex-wrap:wrap; gap:1.6rem 3rem; justify-content:space-between; align-items:flex-end }
.marq{ overflow:hidden; border-block:1px solid var(--hair); padding-block:.9rem; white-space:nowrap }
.marq__in{ display:inline-flex; gap:3rem; animation:marq 34s linear infinite; will-change:transform }
.marq span{ font-family:var(--disp); font-variation-settings:"wdth" 76,"wght" 700; text-transform:uppercase; font-size:clamp(1.6rem,4vw,3.4rem); color:var(--bone-28) }
.marq span:nth-child(even){ color:transparent; -webkit-text-stroke:1px var(--bone-28) }
@keyframes marq{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .marq__in{ animation:none } }

/* ---------- 13. view transitions ---------- */
@view-transition{ navigation:auto }
::view-transition-old(root){ animation:vt-out .32s var(--ease-io) both }
::view-transition-new(root){ animation:vt-in  .45s var(--ease) both }
@keyframes vt-out{ to{ opacity:0; transform:translateY(-10px) } }
@keyframes vt-in { from{ opacity:0; transform:translateY(14px) } }
::view-transition-group(mark){ animation-duration:.5s }
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){ animation:none }
}

/* ---------- 14. scrub panels (type states across the sequence) ---------- */
.scrub__panels{ position:absolute; inset:0; z-index:2; pointer-events:none }
.scrub__panel{
  position:absolute; inset:auto var(--pad) auto var(--pad); top:50%;
  transform:translateY(-50%);
  opacity:0; transition:opacity .7s var(--ease);
}
.scrub__panel[data-on="true"]{ opacity:1 }
.scrub__panel > *{
  transform:translateY(26px) scale(.985);
  transition:transform 1.1s var(--ease);
}
.scrub__panel[data-on="true"] > *{ transform:none }
.scrub__panel .t-mega, .scrub__panel .t-xl{
  color:#fff; mix-blend-mode:difference; max-width:20ch;
}
.scrub__panel--end{ text-align:center; inset-inline:var(--pad) }
.scrub__panel--end .mark{ justify-content:center; font-size:clamp(1.6rem,5vw,3.4rem) }
@media (prefers-reduced-motion:reduce){
  .scrub__panel{ opacity:1 } .scrub__panel > *{ transform:none }
  .scrub__panel:not(:first-child){ display:none }
}

/* ---------- 15. page components ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem }
.chip{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.13em;
  padding:.6rem 1rem; border:1px solid var(--hair); color:var(--bone-45);
  display:inline-flex; gap:.5rem; align-items:baseline;
  transition:border-color .35s, color .35s, background .35s;
}
.chip span{ font-size:.625rem; opacity:.55 }
.chip:hover{ border-color:var(--bone-45); color:var(--bone) }
.chip[aria-pressed="true"]{ border-color:var(--signal); color:var(--signal) }
.cred__row[hidden]{ display:none }

.bleed{ margin:0 }
.bleed video, .bleed img{
  width:100%; aspect-ratio:21/9; object-fit:cover; background:var(--ink-2);
  border:1px solid var(--hair);
}
@media (max-width:700px){ .bleed video,.bleed img{ aspect-ratio:16/10 } }

.spec{ display:grid; gap:1.3rem; align-content:start }
.spec dt{ margin-bottom:.3rem }
.spec dd{ margin:0; font-size:.9375rem; color:var(--bone) }

.pull{
  margin:2.2rem 0; padding-left:1.4rem; border-left:2px solid var(--signal);
  font-family:var(--disp); font-variation-settings:"wdth" 88,"wght" 500;
  font-size:clamp(1.25rem,2.4vw,1.85rem); line-height:1.24; color:var(--bone);
  max-width:34ch;
}
.pull cite{ display:block; margin-top:.9rem; font-family:var(--mono); font-style:normal }

.notes{ border-top:1px solid var(--hair) }
.note{
  display:grid; grid-template-columns:9rem minmax(0,1fr); gap:1.5rem;
  padding-block:1.15rem; border-bottom:1px solid var(--hair-2);
}
.note p{ margin:0; color:var(--bone-70); max-width:60ch }
@media (max-width:640px){ .note{ grid-template-columns:1fr; gap:.35rem } }

.steps{ display:grid; gap:0; border-top:1px solid var(--hair) }
.steps li{
  display:grid; grid-template-columns:4rem 14rem minmax(0,1fr); gap:1.5rem; align-items:baseline;
  padding-block:1.35rem; border-bottom:1px solid var(--hair-2);
}
.steps li > span{ color:var(--bone-28); font-size:.8125rem }
.steps li p{ margin:0; color:var(--bone-70) }
@media (max-width:760px){ .steps li{ grid-template-columns:3rem minmax(0,1fr); gap:.4rem 1rem } .steps li p{ grid-column:2 } }

.kit{ display:grid; gap:.85rem }
.kit li{ padding-left:1.4rem; position:relative; color:var(--bone-70) }
.kit li::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:1px; background:var(--signal) }

.form{ display:grid; gap:1.25rem; align-content:start }
.form label{ display:grid; gap:.5rem }
.form input, .form select, .form textarea{
  font-family:var(--mono); font-size:.9375rem; color:var(--bone);
  background:var(--ink-1); border:1px solid var(--hair);
  padding:.8rem .9rem; width:100%; resize:vertical;
  transition:border-color .3s, background .3s;
}
.form input:focus, .form select:focus, .form textarea:focus{
  outline:none; border-color:var(--signal); background:var(--ink-2);
}
.form input::placeholder, .form textarea::placeholder{ color:var(--bone-28) }
.form button{ justify-self:start; margin-top:.4rem }

.link{ color:var(--signal); border-bottom:1px solid transparent; transition:border-color .3s }
.link:hover{ border-color:var(--signal) }

/* credits page */
.lic{ border-top:1px solid var(--hair) }
.lic__row{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) 9rem;
  gap:1.2rem; padding-block:1rem; border-bottom:1px solid var(--hair-2); align-items:baseline;
}
.lic__row p{ margin:0; color:var(--bone-70); font-size:.875rem }
.lic__row code{ font-size:.75rem; color:var(--bone-45) }
@media (max-width:820px){ .lic__row{ grid-template-columns:1fr; gap:.3rem } }