/* ============================================================
   iBeauty Denver — site stylesheet
   ------------------------------------------------------------
   Shared by every page. Section colour is set by one of three
   classes on <section>: .night (#0A0A0B), .day (#F4F5F6) and
   .day-2 (#FFFFFF), each of which redefines the --bg / --fg /
   --line tokens the components below read from.

   --neon (#FF2E88) is reserved for actions and for the sign.
   ============================================================ */

:root{
  --ink:#0A0A0B; --ink-2:#131317; --ink-3:#1B1B20; --hairline:#2A2A31;
  --on-ink:#FFFFFF; --on-ink-2:#A8A8B2; --on-ink-3:#85858F;

  --paper:#F4F5F6; --paper-2:#FFFFFF; --rule:#D6D7DB;
  --on-paper:#0A0A0B; --on-paper-2:#55555E; --on-paper-3:#676770;

  --neon:#FF2E88; --neon-core:#FFE4F0; --glass:#35353D;

  --shell: min(1280px, 100% - 3rem);
  --ease: cubic-bezier(.16,1,.3,1);
}

.night{
  --bg:var(--ink); --surface:var(--ink-2); --raised:var(--ink-3);
  --fg:var(--on-ink); --fg-2:var(--on-ink-2); --fg-3:var(--on-ink-3);
  --line:var(--hairline); background:var(--bg); color:var(--fg);
}
.day{
  --bg:var(--paper); --surface:var(--paper-2); --raised:#E9EAEC;
  --fg:var(--on-paper); --fg-2:var(--on-paper-2); --fg-3:var(--on-paper-3);
  --line:var(--rule); background:var(--bg); color:var(--fg);
}
/* the brighter daylight, so two light blocks in a row still read as two */
.day-2{
  --bg:var(--paper-2); --surface:var(--paper); --raised:#EFF0F1;
  --fg:var(--on-paper); --fg-2:var(--on-paper-2); --fg-3:var(--on-paper-3);
  --line:#E3E4E7; background:var(--bg); color:var(--fg);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--ink); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--paper); color:var(--on-ink);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:"wdth" 100,"wght" 400;
  font-size:clamp(1rem,0.96rem + 0.2vw,1.0625rem);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--neon); color:#0A0A0B; }
:focus-visible{ outline:2px solid var(--neon); outline-offset:3px; border-radius:2px; }
html{ scrollbar-color:#B9BABF var(--paper); scrollbar-width:thin; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--paper); }
::-webkit-scrollbar-thumb{ background:#B9BABF; border:3px solid var(--paper); border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:#9A9BA1; }

img,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.shell{ width:var(--shell); margin-inline:auto; }
.skip{
  position:absolute; left:.75rem; top:-4rem; z-index:200;
  background:var(--neon); color:#0A0A0B; padding:.7rem 1.1rem;
  font-weight:700; text-decoration:none; border-radius:2px;
  transition:top .18s var(--ease);
}
.skip:focus{ top:.75rem; }

/* ---------- type ----------
   Two voices, not one. Fraunces — optical size wound up, WONK on — carries every
   headline: the ball terminals and the wonky g give the page a hand that Archivo
   alone never had. Archivo stays the workhorse for UI, vinyl lettering and body.
   ------------------------------------------------------------------------- */
h1,h2,h3,h4{ margin:0; text-wrap:balance; font-variation-settings:"wdth" 112,"wght" 800; }
.display,.h2,.h3,.card h3,.loc-cta .h3,.pig h4{
  font-family:"Fraunces","Archivo",Georgia,serif;
  font-optical-sizing:none;
}
.display{
  font-size:clamp(2rem,1.2rem + 4vw,4.6rem);
  line-height:1.0; letter-spacing:-0.028em; text-transform:none;
  font-variation-settings:"opsz" 144,"wght" 700,"SOFT" 0,"WONK" 1;
}
.h2{
  font-size:clamp(1.75rem,1.2rem + 2.2vw,3.4rem);
  line-height:1.02; letter-spacing:-0.028em; text-transform:none;
  font-variation-settings:"opsz" 144,"wght" 700,"SOFT" 0,"WONK" 1;
}
.h3{
  font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem);
  line-height:1.12; letter-spacing:-0.02em;
  font-variation-settings:"opsz" 96,"wght" 640,"SOFT" 20,"WONK" 1;
}
/* the pink line that sits above a headline and names who is speaking */
.over{
  display:block; color:var(--neon);
  font-family:"Archivo",sans-serif;
  font-size:clamp(.8125rem,.75rem + .35vw,1.0625rem);
  letter-spacing:.22em; text-transform:uppercase;
  font-variation-settings:"wdth" 88,"wght" 700;
  margin-bottom:.85rem;
}
.over::after{
  content:""; display:inline-block; vertical-align:middle;
  width:0; height:1px; background:currentColor; margin-left:.9rem;
  transition:width .8s var(--ease) .3s;
}
.in .over::after,.hero .over::after{ width:clamp(28px,4vw,64px); }
.lede{
  font-size:clamp(1.0625rem,1rem + 0.45vw,1.3125rem);
  line-height:1.5; max-width:30ch;
  font-variation-settings:"wdth" 100,"wght" 400;
}
p{ margin:0 0 1em; max-width:66ch; }
p:last-child{ margin-bottom:0; }
.vinyl{
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  font-variation-settings:"wdth" 86,"wght" 620; line-height:1.4;
}

/* ---------- the tube ---------- */
.tube{ display:block; width:100%; height:auto; overflow:visible; }
.tube text{ font-family:"Allura",cursive; text-anchor:middle; }
/* The hero sign is her name, not a flourish: it takes the headline face at a light
   weight so it reads as one voice with the H1 under it, and keeps the pink glass. */
.hero-sign text{
  font-family:"Fraunces","Archivo",Georgia,serif;
  font-optical-sizing:none;
  font-variation-settings:"opsz" 144,"wght" 380,"SOFT" 0,"WONK" 1;
  letter-spacing:.005em;
}
.hero-sign .tube-core{ stroke-width:1.1; }
.tube-glass{ fill:var(--glass); }
.tube-spill{ fill:var(--neon); opacity:.42; }
.tube-halo{  fill:var(--neon); opacity:.85; }
.tube-core{  fill:var(--neon-core); stroke:var(--neon); stroke-width:3; paint-order:stroke fill; }
.tube-mount{ stroke:#4A4A55; stroke-width:1.6; fill:none; }
.tube-mount circle{ fill:#5A5A66; stroke:none; }
.tube-electrode{ fill:#26262C; stroke:#4A4A55; stroke-width:1; }
.tube.is-unlit .tube-spill,.tube.is-unlit .tube-halo,.tube.is-unlit .tube-core{ display:none; }
.tube.is-unlit .tube-glass{ fill:#B9BABF; }
.tube.is-unlit .tube-mount{ stroke:#A9AAB0; }
.tube.is-unlit .tube-mount circle{ fill:#95969C; }
.tube.is-unlit .tube-electrode{ fill:#AEAFB4; stroke:#909198; }

.tube-lit{ opacity:1; }
@media (prefers-reduced-motion:no-preference){
  .js .hero .tube-lit{ animation:strike 1.5s steps(1,end) .25s both; }
}
@keyframes strike{
  0%,7%{opacity:0} 8%,10%{opacity:1} 11%,16%{opacity:0}
  17%,19%{opacity:1} 20%,23%{opacity:.25} 24%,100%{opacity:1}
}

/* ---------- buttons ----------
   The button is a lit tube end, not a rectangle of colour: a pink slab that gains a
   halo when the cursor arrives, a filament of light sweeping left to right across
   it, and an arrow that leaves before the label does.
   ------------------------------------------------------------------------- */
.book{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
  background:var(--neon); color:#0A0A0B; border:1px solid var(--neon);
  border-radius:999px; padding:1rem 1.75rem;
  font-family:"Archivo",sans-serif; font-size:.8125rem;
  letter-spacing:.16em; text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 760;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  box-shadow:0 10px 24px -14px rgba(255,46,136,.9), 0 1px 2px rgba(0,0,0,.28);
  transition:transform .32s var(--ease), box-shadow .32s var(--ease), background .32s var(--ease), letter-spacing .32s var(--ease);
}
/* the filament sweep */
.book::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.75) 48%,transparent 76%);
  transform:translateX(-130%); transition:transform .7s var(--ease);
}
.book:hover::before,.book:focus-visible::before{ transform:translateX(130%); }
.book:hover,.book:focus-visible{
  background:#FF4E99; transform:translateY(-3px); letter-spacing:.185em;
  box-shadow:0 18px 40px -16px rgba(255,46,136,.95), 0 0 0 6px rgba(255,46,136,.14);
}
.book:active{ transform:translateY(-1px) scale(.985); }
.book .arrow{ transition:transform .38s var(--ease); }
.book:hover .arrow{ transform:translateX(5px); }
.book--sm{ padding:.72rem 1.2rem; font-size:.6875rem; letter-spacing:.14em; }

/* Details: the quiet twin — an outline that fills from the floor up */
.details{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:transparent; color:var(--fg);
  border:1px solid var(--line); border-radius:999px; padding:.72rem 1.2rem;
  font-family:"Archivo",sans-serif; font-size:.6875rem;
  letter-spacing:.14em; text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 660;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.details::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--fg);
  transform:translateY(101%); transition:transform .4s var(--ease);
}
.details:hover,.details:focus-visible{ color:var(--bg); border-color:var(--fg); transform:translateY(-2px); }
.details:hover::before,.details:focus-visible::before{ transform:translateY(0); }

/* the text link: a rule that redraws itself from the left */
.quiet{
  position:relative; display:inline-flex; align-items:center; gap:.45rem;
  color:var(--fg-2); text-decoration:none;
  padding-bottom:3px; font-size:.9375rem;
  transition:color .22s var(--ease);
}
.quiet::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line); }
.quiet::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--neon);
  transform:scaleX(0); transform-origin:left; transition:transform .38s var(--ease);
}
.quiet:hover{ color:var(--fg); }
.quiet:hover::after{ transform:scaleX(1); }

/* ---------- header ---------- */
.head{
  position:sticky; top:0; z-index:100;
  background:rgba(10,10,11,.88); backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--hairline); color:var(--on-ink);
}
.head-in{ display:flex; align-items:center; gap:1.5rem; height:66px; }
.mark{ flex:none; width:118px; text-decoration:none; }
.mark .tube{ width:118px; }
.nav{ margin-left:auto; display:flex; align-items:center; gap:1.75rem; }
.nav a{
  text-decoration:none; color:var(--on-ink-2);
  font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 620;
  position:relative; padding:.4rem 0; transition:color .18s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--neon); transform:scaleX(0); transform-origin:left;
  transition:transform .22s var(--ease);
}
.nav a:hover{ color:var(--on-ink); }
.nav a:hover::after{ transform:scaleX(1); }
.nav a.book{ color:#0A0A0B; font-size:.75rem; padding:.7rem 1rem; }
.nav a.book::after{ display:none; }
.nav a.book:hover{ color:#0A0A0B; }
.book--mob{ display:none; margin-left:auto; }
.burger{
  display:none; background:none;
  border:1px solid var(--hairline); border-radius:2px;
  color:var(--on-ink); padding:.55rem .7rem; cursor:pointer;
}
.burger svg{ display:block; }

/* ---------- services dropdown ---------- */
.nav-item--drop{ position:static; }
.nav-drop-btn{
  all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem;
  color:var(--on-ink-2);
  font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 620;
  position:relative; padding:.4rem 0; transition:color .18s var(--ease);
}
.nav-drop-btn::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--neon); transform:scaleX(0); transform-origin:left;
  transition:transform .22s var(--ease);
}
.nav-drop-btn:hover{ color:var(--on-ink); }
.nav-drop-btn:hover::after{ transform:scaleX(1); }
.nav-item--drop[data-open="true"] .nav-drop-btn{ color:var(--on-ink); }
.nav-item--drop[data-open="true"] .nav-drop-btn::after{ transform:scaleX(1); }
.nav-caret{ flex:none; transition:transform .22s var(--ease); }
.nav-item--drop[data-open="true"] .nav-caret{ transform:rotate(180deg); }

.nav-drop-panel{
  position:fixed; left:0; right:0; top:66px; z-index:99;
  background:rgba(10,10,11,.97); backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--hairline);
  display:flex; justify-content:center; flex-wrap:wrap; gap:.5rem 3rem;
  padding:2rem 1.5rem;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav-item--drop[data-open="true"] .nav-drop-panel{ opacity:1; visibility:visible; transform:none; }
.nav-drop-panel a{
  text-decoration:none; color:var(--on-ink-2); font-size:1.0625rem;
  font-variation-settings:"wdth" 92,"wght" 560;
  padding:.4rem 0; border-bottom:1px solid transparent;
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.nav-drop-panel a:hover{ color:var(--on-ink); border-color:var(--neon); }

@media (max-width:1000px){
  .nav{
    position:fixed; top:66px; left:0; right:0; height:calc(100svh - 66px);
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink); border-bottom:1px solid var(--hairline);
    padding:.5rem 1.5rem 1.5rem; margin-left:0;
    overflow:auto;
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
  }
  .nav[data-open="true"]{ opacity:1; visibility:visible; transform:none; }
  .nav a{ padding:.95rem 0; border-bottom:1px solid var(--hairline); font-size:.9375rem; }
  .nav a::after{ display:none; }
  .nav .book{ margin-top:1.1rem; border-bottom:0; }
  .burger{ display:block; }
  .book--mob{ display:inline-flex; }
  .head .book--head{ display:none; }
  .head-in{ gap:.75rem; }

  .nav-item--drop{ display:flex; flex-direction:column; }
  .nav-drop-btn{
    justify-content:space-between; width:100%; padding:.95rem 0;
    border-bottom:1px solid var(--hairline); font-size:.9375rem;
  }
  .nav-drop-panel{
    position:static; inset:auto; z-index:auto; background:none; border:0; backdrop-filter:none;
    display:none; flex-direction:column; flex-wrap:nowrap; justify-content:flex-start; gap:0;
    padding:0 0 .25rem 1rem;
    opacity:1; visibility:visible; transform:none; transition:none;
  }
  .nav-item--drop[data-open="true"] .nav-drop-panel{ display:flex; }
  .nav-drop-panel a{
    padding:.85rem 0; border-bottom:1px solid var(--hairline); font-size:.875rem; color:var(--on-ink-2);
  }
}

/* ---------- sections ---------- */
section{ padding:clamp(3rem,1.8rem + 6vw,6rem) 0; }
.sec-head{ margin-bottom:clamp(1.75rem,1.2rem + 2.5vw,3rem); max-width:48ch; }
.sec-head p{ color:var(--fg-2); margin-top:.85rem; font-size:1.0625rem; }

/* ---------- 1 · hero (night) ----------
   One photograph, edge to edge, holding the whole first screen. She stands on the
   left of the frame and the room falls away to black on the right — so the type
   goes into the dark the photograph already gave us, not onto a panel we invented.
   ------------------------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden; padding:0;
  min-height:calc(100svh - 66px); display:flex; flex-direction:column;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{
  width:100%; height:100%; object-fit:cover; object-position:25% 25%;
  transform:scale(1.06); transform-origin:25% 30%;
}
@media (prefers-reduced-motion:no-preference){
  .js .hero-bg img{ animation:heroDrift 22s var(--ease) .2s both; }
}
@keyframes heroDrift{ from{ transform:scale(1.12); } to{ transform:scale(1.0); } }

/* the dark the type sits in: nothing on her side, deep on the copy side */
.hero-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,10,11,.62) 0%, rgba(10,10,11,.18) 26%, rgba(10,10,11,.55) 52%, rgba(10,10,11,.86) 74%, rgba(10,10,11,.94) 100%),
    linear-gradient(to bottom, rgba(10,10,11,.55) 0%, transparent 22%, transparent 66%, rgba(10,10,11,.9) 100%);
}
.hero-in{
  position:relative; z-index:2; flex:1 1 auto;
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; gap:2rem;
  padding:clamp(1.5rem,1rem + 2vw,2.5rem) 0;
}
.hero .display{ font-size:clamp(1.9rem,1.15rem + 3.1vw,3.9rem); }
.hero-copy{ grid-column:2; max-width:34rem; }
.hero-sign{ width:min(430px,92%); margin-bottom:clamp(1rem,.8rem + 1.2vw,1.6rem); }
.hero h1{ margin-bottom:1.25rem; }
.hero h1 .display{ display:block; color:var(--on-ink); text-shadow:0 2px 30px rgba(0,0,0,.55); }
.hero .lede{ color:#D2D2DA; margin-bottom:2rem; max-width:34ch; }
.hero .lede strong{ color:#fff; font-variation-settings:"wdth" 100,"wght" 620; }
.hero-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; }
.hero-note{ color:var(--on-ink-3); font-size:.8125rem; max-width:18ch; line-height:1.45; }

/* copy arrives a beat after the photograph settles */
@media (prefers-reduced-motion:no-preference){
  .js .hero .lift{ opacity:0; transform:translateY(22px); animation:heroLift .9s var(--ease) forwards; }
  .js .hero .lift:nth-child(1){ animation-delay:.15s }
  .js .hero .lift:nth-child(2){ animation-delay:.28s }
  .js .hero .lift:nth-child(3){ animation-delay:.41s }
  .js .hero .lift:nth-child(4){ animation-delay:.54s }
}
@keyframes heroLift{ to{ opacity:1; transform:none; } }

.plate{
  position:relative; z-index:2; max-width:none;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex; flex-wrap:wrap; gap:.5rem 2.25rem;
  padding:1.1rem 0; color:#A8A8B2;
}
.plate span{ display:inline-flex; align-items:center; gap:.55rem; }
.plate strong{ color:#fff; font-variation-settings:"wdth" 86,"wght" 760; }
.plate .dot{ width:5px; height:5px; border-radius:50%; background:var(--neon); flex:none; }
@media (prefers-reduced-motion:no-preference){
  .js .plate .dot{ animation:pulse 2.6s ease-in-out infinite; }
  .js .plate span:nth-child(2) .dot{ animation-delay:.5s }
  .js .plate span:nth-child(3) .dot{ animation-delay:1s }
}
@keyframes pulse{ 0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(255,46,136,.55); } 50%{ opacity:.6; box-shadow:0 0 0 5px rgba(255,46,136,0); } }


@media (max-width:860px){
  /* no dark half to aim at on a phone, so the veil takes the bottom two thirds
     and the copy sits in it, with her face still clear above */
  /* the frame is 16:9 and the phone is a tall slot, so the crop has to be aimed:
     22% is where she stands in the plate, which puts her in the middle of it */
  .hero-bg img{ object-position:0% 15%; }
  .hero-veil{
    background:linear-gradient(to bottom, rgba(10,10,11,.5) 0%, rgba(10,10,11,.15) 24%, rgba(10,10,11,.82) 54%, rgba(10,10,11,.96) 100%);
  }
  .hero-in{ grid-template-columns:1fr; align-items:end; padding-top:30svh; padding-bottom:1rem; }
  .hero .plate{ gap:.35rem 1.25rem; font-size:.625rem; padding:.85rem 0; }
  .hero-copy{ grid-column:1; max-width:none; }
  .hero-sign{ width:min(320px,84%); }
  .hero .lede{ max-width:38ch; }
}

/* ---------- 3 · services: three full-width rows, each led by its own loop ----------
   A card is now a spread, not a tile: the vertical loop plays at the size it was
   shot, the copy takes the rest of the line, and the two swap sides down the page
   so the eye has to travel. Big numerals mark the order people come in.
   ------------------------------------------------------------------------- */
.cards{ display:grid; gap:clamp(1.25rem,.8rem + 2vw,2.5rem); }
.card{
  position:relative; display:grid; grid-template-columns:minmax(300px,.42fr) 1fr;
  align-items:stretch;
  border:1px solid var(--line); border-radius:6px;
  background:var(--surface); overflow:hidden;
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.card:hover{
  border-color:rgba(255,46,136,.45); transform:translateY(-4px);
  box-shadow:0 26px 60px -34px rgba(10,10,11,.55);
}
.card:nth-child(even){ grid-template-columns:1fr minmax(300px,.42fr); }
.card:nth-child(even) .card-media{ order:2; }

.card-media{ position:relative; background:var(--raised); overflow:hidden; min-height:340px; }
.card-media video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .9s var(--ease);
}
.card:hover .card-media video{ transform:scale(1.045); }
/* the live dot, so a stopped poster still reads as a loop */
.card-media::after{
  content:""; position:absolute; top:.9rem; right:.9rem;
  width:7px; height:7px; border-radius:50%; background:var(--neon);
  box-shadow:0 0 0 3px rgba(255,46,136,.22), 0 0 12px rgba(255,46,136,.9);
}
@media (prefers-reduced-motion:no-preference){ .js .card-media::after{ animation:pulse 2.4s ease-in-out infinite; } }

.card-body{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:clamp(1.5rem,1rem + 2.2vw,3rem);
}
.card h3{
  font-size:clamp(1.6rem,1.2rem + 1.6vw,2.5rem); line-height:1.05;
  letter-spacing:-.025em; margin-bottom:.75rem;
  font-variation-settings:"opsz" 144,"wght" 660,"SOFT" 0,"WONK" 1;
}
.card p{ color:var(--fg-2); font-size:1.0625rem; line-height:1.55; margin:0 0 1rem; max-width:52ch; }
/* the technique list as chips, so a long line stops reading as a run-on */
.card .tech{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1.75rem; max-width:none; }
.card .tech span{
  border:1px solid var(--line); border-radius:999px; padding:.32rem .75rem;
  color:var(--fg-3); font-size:.75rem; letter-spacing:.06em;
  font-variation-settings:"wdth" 92,"wght" 600;
  transition:border-color .28s var(--ease), color .28s var(--ease), transform .28s var(--ease);
}
.card:hover .tech span{ border-color:#C9CACF; color:var(--fg-2); }
.card .tech span:hover{ border-color:var(--neon); color:var(--fg); transform:translateY(-2px); }
.card-foot{ display:flex; flex-wrap:wrap; gap:.6rem .75rem; margin-top:auto; }

/* ---------- the whole card as one link ----------
   The Details anchor stays the real link — keyboard, middle-click and crawlers all
   still see it — and site.js forwards a click from anywhere else on the card to it.
   A stretched pseudo-element was the obvious route and does not work here: .details
   is already position:relative with overflow:hidden for its floor-fill, so the
   overlay would resolve against the button and be clipped to it.
   The affordance has to be unmistakable, so hovering anywhere on the card fires
   everything the Details button does on its own hover, lifts the card, warms the
   loop with neon and slides an arrow out of the heading.
   ------------------------------------------------------------------------- */
.card--link{ cursor:pointer; }

.card--link h3{ display:flex; align-items:center; gap:.45em; }
.card--link h3::after{
  content:""; flex:none; width:.5em; height:.5em;
  background:var(--neon);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h9M6.5 1.5 10 5l-3.5 3.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h9M6.5 1.5 10 5l-3.5 3.5'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:0; transform:translateX(-10px);
  transition:opacity .34s var(--ease), transform .34s var(--ease);
}
.card--link:hover h3::after,
.card--link:focus-within h3::after{ opacity:1; transform:none; }

/* the neon wash used to tint the loop itself on hover; now kept off the video,
   the card border and Details fill still react so hover still reads clearly */

/* Details behaves as though the cursor were on it, wherever the cursor is */
.card--link:hover .details,
.card--link:focus-within .details{ color:var(--bg); border-color:var(--fg); transform:translateY(-2px); }
.card--link:hover .details::before,
.card--link:focus-within .details::before{ transform:translateY(0); }

/* the focus ring belongs to the card, not to the invisible stretched anchor */
.card--link:focus-within{ outline:2px solid var(--neon); outline-offset:3px; border-radius:6px; }
.card--link .details:focus-visible{ outline:none; }
@media (hover:none){
  /* no hover to reveal it on touch, so the arrow just stays out */
  .card--link h3::after{ opacity:1; transform:none; }
}

@media (max-width:860px){
  .card,.card:nth-child(even){ grid-template-columns:1fr; }
  .card:nth-child(even) .card-media{ order:0; }
  .card-media{ min-height:0; }
  .card-media video{ position:static; aspect-ratio:4/5; height:auto; }
}

/* ---------- 4 · colour (night) ---------- */
.colour-in{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(1.75rem,1rem + 3.5vw,4rem); align-items:center; }
.colour-in figure{ margin:0; }
.colour-in img{ width:100%; border-radius:3px; }
.colour-copy .h2{ margin-bottom:1rem; }
.colour-copy p{ color:var(--fg-2); }
@media (max-width:860px){ .colour-in{ grid-template-columns:1fr; } }
.pig{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.25rem,1rem + 2vw,2.5rem);
  margin-top:clamp(2rem,1.2rem + 2.5vw,3rem); padding-top:clamp(2rem,1.2rem + 2.5vw,3rem);
  border-top:1px solid var(--line);
}
.pig h4{ font-size:1rem; margin-bottom:.4rem; font-variation-settings:"wdth" 104,"wght" 700; }
.pig p{ color:var(--fg-2); font-size:.9375rem; margin:0; }
@media (max-width:760px){ .pig{ grid-template-columns:1fr; gap:1.35rem; } }

/* ---------- 5 · recent work — the Instagram embed, and only that ----------
   The section is the feed. No second gallery underneath repeating it: six posts,
   the way they appear on the profile, and a door to the rest.
   ------------------------------------------------------------------------- */
.feed{
  border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--surface);
  box-shadow:0 24px 60px -44px rgba(10,10,11,.5);
}
.feed-head{ display:flex; align-items:center; gap:.9rem; padding:1rem 1.25rem; border-bottom:1px solid var(--line); }
.feed-av{ position:relative; flex:none; width:46px; height:46px; }
.feed-av img{ width:46px; height:46px; border-radius:50%; display:block; }
/* the story ring, drawn not imported */
.feed-av::before{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  background:conic-gradient(from 210deg,#FF2E88,#FF6A3D,#FFC837,#FF2E88,#8A3AB9,#FF2E88);
  z-index:-1;
}
.feed-av::after{ content:""; position:absolute; inset:-2px; border-radius:50%; background:var(--surface); z-index:-1; }
.feed-id{ flex:1 1 auto; min-width:0; }
.feed-id b{ display:flex; align-items:center; gap:.4rem; font-size:.9375rem; font-variation-settings:"wdth" 100,"wght" 700; }
.feed-id span{ display:block; color:var(--fg-3); font-size:.8125rem; }
.feed-verified{ color:#3897F0; flex:none; }
.feed-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); }
.feed-grid a{ position:relative; display:block; background:var(--raised); overflow:hidden; }
.feed-grid img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; transition:transform .8s var(--ease), filter .5s var(--ease); }
.feed-kind{
  position:absolute; top:.6rem; right:.6rem; color:#fff; z-index:2;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.65));
  transition:opacity .3s var(--ease);
}
.feed-grid a:hover .feed-kind{ opacity:0; }
.feed-grid a::after{
  content:""; position:absolute; inset:0; opacity:0;
  background:rgba(10,10,11,.42) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1'/%3E%3C/svg%3E") center/30px no-repeat;
  transition:opacity .35s var(--ease);
}
.feed-grid a:hover::after,.feed-grid a:focus-visible::after{ opacity:1; }
.feed-grid a:hover img{ transform:scale(1.07); }
.feed-foot{
  display:flex; flex-wrap:wrap; gap:.75rem 1.25rem; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem; border-top:1px solid var(--line); color:var(--fg-3); margin:0;
}
@media (max-width:560px){ .feed-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- 6 · about (day-2), with the certificates ---------- */
.about-in{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(1.75rem,1.2rem + 3.5vw,4rem); align-items:start; }
.about-fig{ margin:0; position:relative; }
.about-fig img{ width:100%; border-radius:6px; }
.about-fig figcaption{ margin-top:.7rem; color:var(--fg-3); }
.about-body .h2{ margin-bottom:1.15rem; }
.about-body p{ color:var(--fg-2); }
.about-body p strong{ color:var(--fg); font-variation-settings:"wdth" 100,"wght" 620; }
.creds{ list-style:none; margin:1.75rem 0 0; padding:1.5rem 0 0; border-top:1px solid var(--line); display:grid; gap:1rem; }
.creds li{ display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:start; }
.creds svg{ margin-top:3px; color:var(--fg-2); flex:none; transition:color .3s var(--ease), transform .3s var(--ease); }
.creds li:hover svg{ color:var(--neon); transform:scale(1.12); }
.creds b{ font-variation-settings:"wdth" 100,"wght" 680; display:block; }
.creds small{ color:var(--fg-3); font-size:.875rem; line-height:1.45; }
@media (max-width:860px){ .about-in{ grid-template-columns:1fr; } .about-fig{ max-width:320px; } }

/* the certificates: paper, pinned in a row, tilted a hair until you look at one */
.certs{
  margin-top:clamp(2.5rem,1.6rem + 3vw,4rem);
  padding-top:clamp(2rem,1.4rem + 2vw,3rem);
  border-top:1px solid var(--line);
}
.certs-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.5rem 1.5rem; margin-bottom:1.5rem; }
.certs-head h3{ font-size:clamp(1.25rem,1.05rem + .8vw,1.7rem); }
.certs-head p{ color:var(--fg-3); font-size:.9375rem; margin:0; }
.cert-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.75rem,.5rem + 1vw,1.25rem); }
/* Certificates come in two orientations, so the grid is composed around that
   rather than fighting it. Five columns, two rows: the six landscape scans fill
   the three middle columns edge to edge exactly as before, and the two portrait
   documents — the Colorado licence and the removal master class — stand a full
   two rows tall in the outer columns, bookending the row. Nothing is letterboxed
   and nothing loses more than its scan margin. Auto-placement does the work: the
   portraits are 1st and 5th in the source, so they land in columns 1 and 5. */
.cert-grid{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:clamp(.6rem,.45rem + .7vw,1rem);
}
.cert{
  position:relative; margin:0; padding:0; border:0; background:var(--raised);
  border:1px solid var(--line); border-radius:4px; overflow:hidden; cursor:zoom-in;
  aspect-ratio:4/3; display:block; width:100%;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
/* the portraits: two rows tall, so they fill their column the way the
   landscapes fill theirs */
.cert--tall{ grid-row:span 2; aspect-ratio:auto; height:100%; }
.cert img{
  width:100%; height:100%; object-fit:cover; object-position:50% 50%;
  display:block; transition:transform .8s var(--ease);
}
.cert-name{
  position:absolute; inset:auto 0 0 0; z-index:2; padding:1.9rem .6rem .5rem;
  background:linear-gradient(to top,rgba(10,10,11,.94),rgba(10,10,11,.72) 45%,transparent);
  color:#fff; text-align:left;
  font-size:.625rem; line-height:1.3; letter-spacing:.05em;
  font-variation-settings:"wdth" 84,"wght" 640;
  transition:opacity .3s var(--ease);
}
.cert::after{
  content:"View"; position:absolute; top:.5rem; right:.5rem;
  padding:.28rem .55rem; border-radius:999px;
  background:var(--neon); color:#0A0A0B;
  font-size:.5625rem; letter-spacing:.14em; text-transform:uppercase;
  font-variation-settings:"wdth" 86,"wght" 700;
  opacity:0; transform:translateY(-6px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.cert:nth-child(odd){ transform:rotate(-.4deg); }
.cert:nth-child(even){ transform:rotate(.4deg); }
.cert:hover,.cert:focus-visible{
  transform:rotate(0deg) translateY(-6px); border-color:var(--neon);
  box-shadow:0 26px 50px -30px rgba(10,10,11,.6);
}
.cert:hover img,.cert:focus-visible img{ transform:scale(1.04); }
.cert:hover::after,.cert:focus-visible::after{ opacity:1; transform:none; }

/* Narrow, the bookend cannot hold: two columns leaves a tall portrait sitting
   beside two short landscapes, and its caption — pinned to the bottom of its own
   tall tile — ends up level with the neighbouring picture and reads as belonging
   to it. So the grid is abandoned below 1000px for a masonry of two columns:
   every scan keeps its own proportions, nothing is cropped or stretched, and the
   caption becomes a solid strip directly under the document it names. */
@media (max-width:1000px){
  .cert-grid{
    display:block; columns:2; column-gap:clamp(.6rem,.45rem + .7vw,1rem);
  }
  .cert{
    break-inside:avoid; -webkit-column-break-inside:avoid;
    display:block; width:100%; aspect-ratio:auto;
    margin:0 0 clamp(.6rem,.45rem + .7vw,1rem);
    background:#fff;
  }
  .cert:nth-child(odd),.cert:nth-child(even){ transform:none; }
  .cert:hover,.cert:focus-visible{ transform:none; }
  .cert img{ height:auto; object-fit:contain; }
  .cert-name{
    position:static; display:block; padding:.5rem .6rem;
    background:#0A0A0B; text-align:left;
  }
  .cert:hover .cert-name,.cert:focus-visible .cert-name{ background:#0A0A0B; color:#fff; }
  .cert::after{ display:none; }
}
@media (max-width:560px){
  .cert-name{ font-size:.625rem; padding:.45rem .5rem; }
}

/* ---------- 7 · reviews (night) — dropped in as a widget ----------
   The reviews arrive the way a real embed arrives: a light card sitting on the
   dark section, its own chrome, its own scroller, its own footer line. Nothing
   here is styled like the rest of the page, because a plugin never is.
   ------------------------------------------------------------------------- */
.gw{
  background:#fff; color:#0A0A0B; border-radius:12px;
  border:1px solid #E3E4E7;
  box-shadow:0 40px 80px -50px rgba(0,0,0,.9), 0 2px 4px rgba(0,0,0,.2);
  overflow:hidden;
}
.gw-top{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem;
  padding:1.25rem 1.5rem; border-bottom:1px solid #EDEEF0;
}
.gw-brand{ display:flex; align-items:center; gap:.75rem; }
.gw-brand b{ font-size:1.0625rem; font-variation-settings:"wdth" 100,"wght" 700; letter-spacing:-.01em; }
.gw-brand span{ display:block; color:#70737A; font-size:.8125rem; }
.gw-score{ display:flex; align-items:center; gap:.7rem; margin-left:auto; }
.gw-num{ font-size:2rem; line-height:1; font-variation-settings:"wdth" 108,"wght" 780; letter-spacing:-.03em; }
.gw-stars{ display:flex; gap:2px; color:#FBBC04; }
.gw-count{ color:#70737A; font-size:.8125rem; display:block; margin-top:.2rem; }
.gw-write{
  display:inline-flex; align-items:center; gap:.45rem;
  border:1px solid #DADCE0; border-radius:999px; padding:.55rem 1rem;
  color:#1A73E8; text-decoration:none; font-size:.8125rem;
  font-variation-settings:"wdth" 96,"wght" 640;
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.gw-write:hover{ background:#F1F6FE; border-color:#1A73E8; transform:translateY(-2px); }

.gw-rail{ position:relative; }
.gw-track{
  display:flex; gap:1rem; padding:1.5rem; overflow-x:auto;
  /* no scroll-snap: with three cards the travel is short, and snapping fought
     every arrow press instead of helping it */
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.gw-track::-webkit-scrollbar{ display:none; }
.gw-card{
  flex:0 0 min(400px,80vw);
  border:1px solid #EDEEF0; border-radius:10px; padding:1.15rem; margin:0;
  background:#fff; display:flex; flex-direction:column;
  transition:box-shadow .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease);
}
.gw-card:hover{ transform:translateY(-4px); border-color:#DADCE0; box-shadow:0 18px 34px -22px rgba(0,0,0,.35); }
.gw-who{ display:flex; align-items:center; gap:.7rem; margin-bottom:.75rem; }
.gw-ava{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:grid; place-items:center; color:#fff;
  font-size:.9375rem; font-variation-settings:"wdth" 100,"wght" 700;
}
.gw-who b{ display:block; font-size:.9375rem; font-variation-settings:"wdth" 100,"wght" 660; }
.gw-when{ color:#80838A; font-size:.75rem; }
.gw-card .gw-stars{ margin-bottom:.6rem; }
.gw-card p{ color:#3C4043; font-size:.9375rem; line-height:1.6; margin:0; max-width:none; }
.gw-card footer{ margin-top:auto; padding-top:.9rem; }
.gw-g{ width:15px; height:15px; flex:none; }
.gw-src{ display:inline-flex; align-items:center; gap:.4rem; color:#80838A; font-size:.75rem; }

.gw-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%; border:1px solid #DADCE0; background:#fff;
  display:grid; place-items:center; cursor:pointer; color:#3C4043; z-index:3;
  box-shadow:0 4px 14px -6px rgba(0,0,0,.4);
  transition:background .25s var(--ease), transform .25s var(--ease), opacity .25s var(--ease);
}
.gw-nav:hover{ background:#F6F7F8; transform:translateY(-50%) scale(1.08); }
.gw-nav[disabled]{ opacity:0; pointer-events:none; }
.gw-prev{ left:.4rem; } .gw-next{ right:.4rem; }
.gw-foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:.6rem 1rem;
  padding:.85rem 1.5rem; border-top:1px solid #EDEEF0; color:#80838A; font-size:.75rem;
}
.gw-foot a{ color:#1A73E8; text-decoration:none; }
.gw-foot a:hover{ text-decoration:underline; }
@media (max-width:560px){
  .gw-top{ padding:1rem; } .gw-track{ padding:1rem; } .gw-foot{ padding:.85rem 1rem; }
  .gw-score{ margin-left:0; }
}

/* ---------- 8 · faq (day) ---------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:1.3rem 2.5rem 1.3rem 0; position:relative;
  font-size:clamp(1rem,.95rem + .35vw,1.1875rem);
  font-variation-settings:"wdth" 102,"wght" 660; letter-spacing:-.01em;
  transition:color .18s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:.35rem; top:50%;
  width:13px; height:2px; background:currentColor; transform:translateY(-50%);
}
.faq summary::before{
  content:""; position:absolute; right:calc(.35rem + 5.5px); top:50%;
  width:2px; height:13px; background:currentColor; transform:translateY(-50%);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.faq details[open] summary::before{ opacity:0; transform:translateY(-50%) rotate(90deg); }
.faq summary:hover{ color:var(--fg-2); }
.faq .ans{ padding:0 3rem 1.4rem 0; color:var(--fg-2); }
.faq .ans p{ max-width:62ch; }

/* ---------- 9 · location (day-2) ---------- */
.loc-in{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.75rem,1.2rem + 3.5vw,4rem); }
.loc dl{ margin:0; display:grid; gap:1.25rem; }
.loc dt{ font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; font-variation-settings:"wdth" 86,"wght" 620; color:var(--fg-3); margin-bottom:.3rem; }
.loc dd{ margin:0; font-size:1.0625rem; }
.loc dd a{ text-decoration:none; border-bottom:1px solid var(--line); transition:border-color .18s var(--ease), color .18s var(--ease); }
.loc dd a:hover{ border-color:var(--neon); color:var(--neon); }
.loc dd a.map-link{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.35rem;
  color:var(--neon); border-bottom-color:transparent;
  font-variation-settings:"wdth" 90,"wght" 640;
}
.loc dd a.map-link .arrow{ transition:transform .28s var(--ease); }
.loc dd a.map-link:hover{ color:var(--fg); border-bottom-color:transparent; }
.loc dd a.map-link:hover .arrow{ transform:translateX(4px); }
.loc-cta{ border:1px solid var(--line); border-radius:8px; padding:clamp(1.5rem,1.2rem + 1.5vw,2.25rem); background:var(--surface); align-self:start; }
.loc-cta .h3{ margin-bottom:.8rem; }
.loc-cta p{ color:var(--fg-2); margin-bottom:1.5rem; }
@media (max-width:860px){ .loc-in{ grid-template-columns:1fr; } }

/* the studio, in six frames instead of one — a mosaic that opens on click */
.studio-gal{
  margin-top:clamp(2.5rem,1.6rem + 3vw,4rem);
  padding-top:clamp(2rem,1.4rem + 2vw,3rem);
  border-top:1px solid var(--line);
}
.studio-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.5rem 1.5rem; margin-bottom:1.5rem; }
.studio-head p{ color:var(--fg-3); font-size:.9375rem; margin:0; }
/* Every studio frame was shot vertically at 4:5, so the mosaic that stretched
   two of them across double-width cells was cropping the room out of its own
   photographs. The grid now takes the pictures at the ratio they were taken in:
   three portrait cells across, two rows, nothing cut. */
.gal{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(.5rem,.35rem + .8vw,.9rem);
}
.gal button{
  position:relative; margin:0; padding:0; border:0; background:var(--raised);
  border-radius:6px; overflow:hidden; cursor:zoom-in; display:block;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.gal button{ aspect-ratio:4/5; }
.gal img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--ease), filter .5s var(--ease); }
.gal button::after{
  content:""; position:absolute; inset:0; background:rgba(255,46,136,.16);
  opacity:0; transition:opacity .4s var(--ease);
}
.gal button:hover,.gal button:focus-visible{ transform:translateY(-4px); box-shadow:0 24px 44px -28px rgba(10,10,11,.6); }
.gal button:hover img,.gal button:focus-visible img{ transform:scale(1.07); }
.gal button:hover::after,.gal button:focus-visible::after{ opacity:1; }
@media (max-width:700px){
  .gal{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- the lightbox, shared by certificates and studio ---------- */
.lb{
  position:fixed; inset:0; z-index:300; display:none;
  align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem);
  background:rgba(6,6,7,.94); backdrop-filter:blur(6px);
}
.lb[data-open="true"]{ display:flex; }
@media (prefers-reduced-motion:no-preference){
  .lb[data-open="true"]{ animation:lbIn .3s var(--ease); }
  .lb[data-open="true"] img{ animation:lbPop .42s var(--ease); }
}
@keyframes lbIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes lbPop{ from{ opacity:0; transform:scale(.94) translateY(12px) } to{ opacity:1; transform:none } }
.lb img{ max-width:100%; max-height:82svh; border-radius:6px; box-shadow:0 40px 90px -40px #000; }
.lb-cap{
  position:absolute; left:0; right:0; bottom:1.5rem; text-align:center; max-width:none;
  color:#A8A8B2; font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  font-variation-settings:"wdth" 86,"wght" 620;
}
.lb-btn{
  position:absolute; width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06);
  color:#fff; display:grid; place-items:center; cursor:pointer;
  transition:background .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.lb-btn:hover{ background:var(--neon); border-color:var(--neon); color:#0A0A0B; transform:scale(1.08); }
.lb-close{ top:1.25rem; right:1.25rem; }
.lb-prev{ left:clamp(.5rem,2vw,2rem); top:50%; transform:translateY(-50%); }
.lb-next{ right:clamp(.5rem,2vw,2rem); top:50%; transform:translateY(-50%); }
.lb-prev:hover,.lb-next:hover{ transform:translateY(-50%) scale(1.08); }

/* ---------- footer (day) ---------- */
.foot{ border-top:1px solid var(--line); padding:clamp(2.25rem,1.5rem + 2.5vw,3.5rem) 0 2rem; }
.foot-in{ display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:2rem; }
.foot .tube{ width:150px; margin-bottom:1.1rem; }
.foot h5{ margin:0 0 .9rem; font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; font-variation-settings:"wdth" 86,"wght" 620; color:var(--fg-3); }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.foot a{ color:var(--fg-2); text-decoration:none; font-size:.9375rem; transition:color .18s var(--ease); }
.foot a:hover{ color:var(--fg); }
.foot-bar{
  margin-top:clamp(2.25rem,1.5rem + 2.5vw,3.5rem); padding-top:1.35rem;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; justify-content:space-between; color:var(--fg-3);
}
.foot-note{ color:var(--fg-3); font-size:.875rem; max-width:42ch; line-height:1.5; }
@media (max-width:860px){ .foot-in{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-in{ grid-template-columns:1fr; } }

/* ---------- reveals, and the reading line at the top of the page ---------- */
.progress{
  position:fixed; left:0; top:0; height:2px; z-index:150;
  background:var(--neon); width:0;
  box-shadow:0 0 12px rgba(255,46,136,.8);
  transition:width .12s linear;
}
@media (prefers-reduced-motion:no-preference){
  .js .rise{ opacity:0; transform:translateY(22px); }
  .js .rise.in{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease); }
  .js .rise-l{ opacity:0; transform:translateX(-26px); }
  .js .rise-l.in{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease); }
  .js .rise-r{ opacity:0; transform:translateX(26px); }
  .js .rise-r.in{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease); }
  /* the headline rules itself off as it lands */
  .js .sec-head .h2{ position:relative; }
  .js .sec-head .h2::after{
    content:""; position:absolute; left:0; bottom:-.55rem; height:2px; width:0;
    background:var(--neon); transition:width .8s var(--ease) .35s;
  }
  .js .sec-head.in .h2::after{ width:clamp(48px,7vw,110px); }
}