/* ==========================================================================
   NADA ENERGY
   Base CSS renders a plain, readable, stacked document. `html.motion` (added
   by app.js only when motion is allowed and the viewport is big enough) opts
   into the pinned scenes and the 3D arc. Nothing below the fold depends on JS.
   ========================================================================== */

@font-face{
  font-family:"Archivo";src:url(fonts/archivo-roman.woff2) format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Archivo";src:url(fonts/archivo-italic.woff2) format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-style:italic;font-display:swap;
}

:root{
  --ink:#07080a;
  --ink-2:#101319;
  --paper:#f3f1ed;
  --mute:#8b919b;
  --accent:#c8ced8;          /* JS overwrites per flavour */
  --flood:#0b0d11;
  --edge:rgba(255,255,255,.12);
  --hud-h:62px;
}
*{box-sizing:border-box}
/* A decorative element past the viewport makes the document scroll sideways
   and slides the fixed header off. clip, not hidden, so sticky still works. */
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.6;font-synthesis:none;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--paper);color:var(--ink);
  padding:11px 18px;border-radius:2px;font-weight:700;text-decoration:none;transition:top .18s ease}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- display type ---------- */
.disp{
  font-style:italic;font-weight:900;font-stretch:125%;
  text-transform:uppercase;letter-spacing:-.025em;line-height:.86;
}

/* ==========================================================================
   HUD
   ========================================================================== */
.hud{
  position:fixed;top:0;left:0;right:0;height:var(--hud-h);z-index:90;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 18px;gap:12px;
  /* No backdrop-filter here. The header sits over the product scenes, and a
     blurred backdrop turns the can tops into a smeared halo along the exact
     line where the filter region ends. A taller scrim does the same job. */
  background:linear-gradient(rgba(7,8,10,.96) 40%,rgba(7,8,10,.72) 70%,rgba(7,8,10,0));
  height:calc(var(--hud-h) + 26px);padding-bottom:26px;
}
.hud-read{
  margin:0;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute);font-variant-numeric:tabular-nums;
}
.hud-sep{opacity:.45;padding:0 .35em}
.hud-mark{
  justify-self:center;text-decoration:none;font-style:italic;font-weight:900;
  font-stretch:125%;font-size:19px;letter-spacing:-.02em;color:var(--paper);
}
.hud-nav{justify-self:end;display:flex;align-items:center;gap:10px}
.hud-menu,.hud-cta{
  font:inherit;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 16px;min-height:36px;border-radius:100px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;
}
.hud-menu{background:none;border:1px solid var(--edge);color:var(--paper)}
.hud-menu:hover{border-color:var(--paper)}
.hud-cta{background:var(--paper);color:var(--ink);border:1px solid var(--paper);
  transition:background .2s ease,color .2s ease}
.hud-cta:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}

.menu{
  position:fixed;top:var(--hud-h);right:14px;z-index:95;
  display:flex;flex-direction:column;min-width:210px;padding:8px;
  background:rgba(16,19,25,.96);border:1px solid var(--edge);border-radius:14px;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 26px 60px rgba(0,0,0,.6);
}
.menu[hidden]{display:none}
.menu a{
  text-decoration:none;padding:12px 14px;border-radius:9px;font-size:14px;font-weight:600;
  min-height:44px;display:flex;align-items:center;
}
.menu a:hover{background:rgba(255,255,255,.08)}

/* ==========================================================================
   BASE (no-JS / reduced-motion / small screens) — a plain document
   ========================================================================== */
.scene{padding:calc(var(--hud-h) + 40px) 18px 60px}
.pin{max-width:1180px;margin:0 auto}
.void,.plinth,.ghost{display:none}

.stage-kicker{
  margin:0 0 26px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);
  text-align:center;
}
.ring{display:none}

.grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;
}
.grid a{
  display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 8px 18px;
  text-decoration:none;border:1px solid var(--edge);border-radius:16px;
  background:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.05),transparent 70%);
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.grid a:hover{border-color:var(--accent);transform:translateY(-3px)}
.grid img{height:190px;width:auto;filter:drop-shadow(0 18px 26px rgba(0,0,0,.6))}
.grid span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);text-align:center}

/* Controls that only work with scripting are hidden until `js` is present,
   and the content they reveal is served in full as static text instead. */
.scrub,.rail,.claim-one{display:none}
.js .scrub{display:block}
.js .rail{display:flex}
.js .claim-one{display:block}
.js .claim-all{display:none}
.claim-all{margin:0}
.claim-all dt{margin:20px 0 6px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.claim-all dt:first-child{margin-top:0}
.claim-all dd{margin:0;color:#c3c8d1;max-width:62ch}

/* the scrub bar */
.scrub{max-width:620px;margin:38px auto 40px;text-align:center}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:34px;background:none;cursor:grab;
}
input[type=range]:active{cursor:grabbing}
input[type=range]::-webkit-slider-runnable-track{
  height:3px;border-radius:2px;
  background:linear-gradient(90deg,#8b8f98,var(--accent) 55%,#ffffff);
}
input[type=range]::-moz-range-track{
  height:3px;border-radius:2px;
  background:linear-gradient(90deg,#8b8f98,var(--accent) 55%,#ffffff);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-6.5px;
  border-radius:50%;background:#fff;border:0;
  box-shadow:0 0 0 5px rgba(255,255,255,.14),0 6px 16px rgba(0,0,0,.55);
}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:#fff;border:0;
  box-shadow:0 0 0 5px rgba(255,255,255,.14),0 6px 16px rgba(0,0,0,.55);
}
.scrub-now{margin:14px 0 0;font-size:13.5px;color:var(--mute);min-height:3.2em}
.scrub-now strong{
  display:block;font-style:italic;font-weight:900;font-stretch:125%;text-transform:uppercase;
  font-size:23px;letter-spacing:-.02em;color:var(--paper);margin-bottom:5px;
}

/* ---------- flavour detail ---------- */
.detail{display:grid;gap:30px}
.detail-eyebrow{margin:0 0 12px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
  font-variant-numeric:tabular-nums}
.detail-name{
  margin:0;font-style:italic;font-weight:900;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(38px,10vw,92px);line-height:.86;letter-spacing:-.03em;
}
.detail-note{margin:16px 0 0;max-width:34ch;color:#c3c8d1}
.claim{margin-top:32px;padding-top:26px;border-top:1px solid var(--edge);max-width:42ch;min-height:190px}
.claim-h{margin:0 0 10px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.claim-p{margin:0;color:#c3c8d1;line-height:1.72}
.detail-can{margin:0;text-align:center}
.detail-can img{height:min(52vh,430px);width:auto;margin:0 auto;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.7))}

.rail{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.rail button{
  font:inherit;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:11px 16px;min-height:44px;border-radius:100px;cursor:pointer;
  background:none;border:1px solid var(--edge);color:var(--mute);
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.rail button:hover{color:var(--paper);border-color:var(--paper)}
.rail button[aria-selected=true]{background:var(--accent);border-color:var(--accent);color:#0a0b0d}

/* ---------- line-up ---------- */
.scene-lineup{padding:80px 18px 90px;background:linear-gradient(var(--ink),#0d1015)}
.lineup-head{max-width:1180px;margin:0 auto 44px}
.lineup-head h2{
  margin:0;font-style:italic;font-weight:900;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(40px,10vw,110px);line-height:.85;letter-spacing:-.035em;
}
.lineup-head h2 em{font-style:italic;color:var(--accent)}
.lineup-head p{margin:20px 0 0;max-width:46ch;color:#aab0ba}
.row{
  max-width:1180px;margin:0 auto;display:flex;justify-content:center;align-items:flex-end;
  gap:clamp(2px,1.4vw,14px);flex-wrap:wrap;
}
.row img{height:clamp(150px,26vw,300px);width:auto;filter:drop-shadow(0 24px 30px rgba(0,0,0,.65))}

/* ---------- faq ---------- */
.scene-faq{padding:90px 18px 100px;background:#0d1015}
.faq-h{
  max-width:1180px;margin:0 auto 44px;
  font-style:italic;font-weight:900;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(38px,10vw,104px);line-height:.84;letter-spacing:-.035em;
}
.faq-h em{font-style:italic;-webkit-text-stroke:1px var(--paper);color:transparent}
.faq-list{max-width:820px;margin:0 auto;border-top:1px solid var(--edge)}
.faq-list details{border-bottom:1px solid var(--edge)}
.faq-list summary{
  cursor:pointer;padding:22px 44px 22px 0;position:relative;list-style:none;
  font-size:clamp(16px,2.4vw,19px);font-weight:600;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.faq-list details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq-list summary:hover{color:var(--accent)}
.faq-list p{margin:0 0 26px;max-width:62ch;color:#aab0ba}

/* ---------- footer ---------- */
.foot{background:var(--ink);padding:70px 18px 40px;border-top:1px solid var(--edge)}
.foot-in{max-width:1180px;margin:0 auto}
.foot-mark{
  margin:0 0 34px;font-style:italic;font-weight:900;font-stretch:125%;
  font-size:clamp(56px,17vw,190px);line-height:.8;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.3);
}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px}
.foot-cols h3{margin:0 0 8px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.foot-cols p{margin:0;font-size:14.5px;color:#9aa0aa;line-height:1.7}
.foot-note{margin:44px 0 0;padding-top:22px;border-top:1px solid var(--edge);
  font-size:12.5px;color:#7d838e;max-width:62ch}   /* 5.26:1; #6f7580 was 4.32 */

/* ==========================================================================
   MOTION MODE — pinned scenes and the 3D arc
   ========================================================================== */
html.motion .scene{padding:0;position:relative}
/* 360vh, not 320: the arc needs room to finish AND then hold on the last can
   for a couple more scroll steps before anything else appears. */
html.motion .scene-range{height:360vh}
/* In motion mode the flavour copy lives in the click-opened viewer, so this
   section is only the plain-mode / no-JS home for the same words. */
html.motion .scene-flavour{display:none}
/* A sticky pin stops sticking 100vh before its container ends, so the next
   section is pulled up to cover that tail. -40vh, NOT the full -100vh: an
   overlap the size of the whole tail also drags the next section into the fold
   a full viewport early, so it starts wiping over the scene while the scene is
   still live. That is what made the range start scrolling away at can six of
   eight. 40vh covers the join and leaves the tail to scroll out with content
   still on it, which looks like a transition rather than a blank. */
html.motion .scene-lineup{margin-top:-40vh;position:relative;z-index:3;
  background:linear-gradient(180deg,rgba(7,8,10,0) 0,var(--ink) 14%,#0d1015)}

/* ---- scroll snapping -------------------------------------------------------
   Proximity, not mandatory: only the range scene carries snap anchors, so the
   rest of the page keeps scrolling freely. One invisible anchor per can, placed
   by JS at the exact offset where that can is centred, which makes "scrolling
   stopped" and "a can is centred" the same event rather than two things that
   nearly line up. */
html.motion{scroll-snap-type:y proximity}
html.motion .snap{position:absolute;left:0;width:1px;height:1px;
  pointer-events:none;scroll-snap-align:start}
html.locked{overflow-y:hidden}
html.motion .pin{
  position:sticky;top:0;height:100vh;max-width:none;
  display:flex;flex-direction:column;justify-content:center;overflow:hidden;
}
html.motion .grid{display:none}

/* the studio void */
html.motion .void{
  display:block;position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(80% 55% at 50% 34%, color-mix(in srgb, var(--flood) 82%, #fff 6%) 0%, transparent 70%),
    radial-gradient(120% 70% at 50% 108%, color-mix(in srgb, var(--accent) 22%, #000) 0%, transparent 62%),
    var(--flood);
  transition:background 370ms cubic-bezier(.4,0,.2,1);
}
html.motion .scene-range .stage-kicker{position:relative;z-index:3;margin-top:calc(var(--hud-h) + 6px)}

/* the arc */
html.motion .stage{
  position:relative;z-index:2;flex:1;min-height:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  perspective:1500px;perspective-origin:50% 46%;
}
html.motion .ring{
  display:block;position:relative;width:100%;height:min(46vh,380px);
  transform-style:preserve-3d;
  /* THE RING MUST NOT BE HIT-TESTABLE. preserve-3d puts its own box on the
     Z=0 plane of the 3D context, and every can sits at NEGATIVE z (behind it),
     so the ring wins every hit test while being completely invisible. Clicks on
     the cans silently did nothing. pointer-events inherits, so the cans have to
     opt back in below. */
  pointer-events:none;
}
html.motion .can{
  position:absolute;left:50%;top:50%;width:auto;
  /* `translate` composes BEFORE `transform`, so the JS transform can own the
     arc maths without having to know the can's rendered width. */
  translate:-50% -50%;
  will-change:transform,opacity;
  pointer-events:auto;          /* see the note on .ring above */
}
html.motion .can img{
  height:min(42vh,340px);width:auto;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.75));
}
/* absolute so the reflection does not add to the wrapper height, which would
   push the can itself off centre */
html.motion .can .refl{
  position:absolute;left:0;top:100%;margin-top:2px;
  height:min(42vh,340px);width:auto;transform:scaleY(-1);opacity:.11;
  -webkit-mask-image:linear-gradient(transparent 74%,#000);
  mask-image:linear-gradient(transparent 74%,#000);
  filter:none;
}
html.motion .can-btn{
  position:absolute;inset:0;z-index:2;background:none;border:0;padding:0;cursor:pointer;
}
html.motion .plinth{
  display:block;position:absolute;left:50%;bottom:8%;translate:-50% 0;
  width:min(30vw,300px);height:min(4vw,34px);border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 32%, transparent), transparent 70%);
  filter:blur(11px);opacity:.5;transition:background 370ms cubic-bezier(.4,0,.2,1);
}
html.motion .scrub{position:relative;z-index:3;margin:0 auto 42px;padding:0 18px;width:100%}

/* flavour scene */
html.motion .scene-flavour .pin{justify-content:center}
/* Sits behind the CAN on the right, not behind the copy on the left, and a
   left scrim keeps the paragraph off it entirely. Ghost type crossing body
   text is the fastest way to make a scene look busy and unreadable. */
html.motion .ghost{
  display:block;position:absolute;right:3%;top:50%;translate:0 -50%;z-index:1;
  margin:0;white-space:nowrap;pointer-events:none;user-select:none;
  font-style:italic;font-weight:900;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(64px,12vw,180px);line-height:.8;letter-spacing:-.045em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.10);
}
html.motion .scene-flavour .pin::after{
  content:"";position:absolute;inset:0 auto 0 0;width:min(62%,880px);z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(4,5,8,.88) 0%, rgba(4,5,8,.62) 45%, transparent 100%);
}
html.motion .scene-flavour{background:none}
html.motion .scene-flavour .pin{
  background:
    radial-gradient(70% 60% at 62% 46%, color-mix(in srgb, var(--flood) 70%, #fff 8%), transparent 68%),
    linear-gradient(160deg, var(--flood), #06070a 78%);
  transition:background 370ms cubic-bezier(.4,0,.2,1);
}
html.motion .detail{
  position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;
  padding:calc(var(--hud-h) + 20px) clamp(18px,5vw,70px) 40px;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr) auto;
  align-items:center;gap:clamp(20px,4vw,60px);
}
html.motion .detail-can img{height:min(66vh,620px)}
html.motion .rail{flex-direction:column;flex-wrap:nowrap;gap:10px}
html.motion .rail button{width:100%;justify-content:flex-start;text-align:left}

/* line-up gets real depth in motion mode */
html.motion .row{
  flex-wrap:nowrap;perspective:1100px;perspective-origin:50% 50%;
  transform-style:preserve-3d;justify-content:center;
}
html.motion .row img{
  height:clamp(170px,25vw,320px);flex:0 0 auto;
  transition:transform .36s cubic-bezier(.2,.7,.3,1);will-change:transform;
}

/* ==========================================================================
   THE VIEWER — the zoom-in state
   ========================================================================== */
.viewer{display:none}
.viewer[hidden]{display:none}
html.motion .viewer:not([hidden]){
  display:block;position:fixed;inset:0;z-index:120;
}
.viewer .rail,.viewer .rail button{cursor:pointer}
.viewer-close{cursor:pointer}
.viewer-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(66% 58% at 62% 46%, color-mix(in srgb, var(--flood) 66%, #fff 9%), transparent 68%),
    linear-gradient(160deg, var(--flood), #05060a 78%);
  opacity:0;transition:opacity .30s ease;
}
.viewer-bg::after{
  content:"";position:absolute;inset:0 auto 0 0;width:min(62%,880px);
  background:linear-gradient(90deg, rgba(4,5,8,.9) 0%, rgba(4,5,8,.64) 45%, transparent 100%);
}
.viewer.in .viewer-bg{opacity:1}

.viewer .ghost{
  display:block;position:absolute;right:3%;top:50%;translate:0 -50%;z-index:1;
  margin:0;white-space:nowrap;pointer-events:none;user-select:none;
  font-style:italic;font-weight:900;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(64px,12vw,180px);line-height:.8;letter-spacing:-.045em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.10);
  opacity:0;transition:opacity .34s ease .05s;
}
.viewer.in .ghost{opacity:1}

.viewer-close{
  position:absolute;top:calc(var(--hud-h) + 14px);right:20px;z-index:6;
  font:inherit;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:11px 18px;
  border-radius:100px;cursor:pointer;color:var(--paper);
  background:rgba(255,255,255,.07);border:1px solid var(--edge);
  opacity:0;transition:opacity .27s ease .07s,background .19s ease,border-color .19s ease;
}
.viewer-close span{font-size:17px;line-height:0}
.viewer-close:hover{background:rgba(255,255,255,.16);border-color:var(--paper)}
.viewer.in .viewer-close{opacity:1}

.viewer-in{
  position:relative;z-index:4;height:100%;width:100%;max-width:1240px;margin:0 auto;
  padding:calc(var(--hud-h) + 30px) clamp(18px,5vw,70px) 40px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr) auto;
  align-items:center;gap:clamp(20px,4vw,60px);
}
.viewer-copy{opacity:0;transform:translateY(14px);
  transition:opacity .29s ease .06s,transform .37s cubic-bezier(.2,.7,.3,1) .06s}
.viewer.in .viewer-copy{opacity:1;transform:none}
.viewer-can{margin:0;text-align:center}
/* The image that flies. No CSS transition on transform — the FLIP writes it. */
.viewer-can img{height:min(74vh,680px);width:auto;margin:0 auto;
  filter:drop-shadow(0 44px 62px rgba(0,0,0,.72));
  /* fades and lifts, never scales — the zoom was the part that felt wrong */
  opacity:0;transform:translateY(12px);
  transition:opacity .30s ease .04s,transform .39s cubic-bezier(.2,.7,.3,1) .04s}
.viewer.in .viewer-can img{opacity:1;transform:none}
.viewer .rail{flex-direction:column;flex-wrap:nowrap;gap:10px;
  opacity:0;transition:opacity .29s ease .10s}
.viewer.in .rail{opacity:1}
.viewer .rail button{width:100%;justify-content:flex-start;text-align:left}

/* the arc ducks out of the way while the viewer is open */
html.motion .stage,html.motion .scrub,html.motion .stage-kicker{
  transition:opacity .26s ease,transform .34s cubic-bezier(.4,0,.2,1);
}
html.viewing .stage{opacity:0;pointer-events:none}
html.viewing .scrub,html.viewing .stage-kicker{opacity:0;pointer-events:none}

/* The affordance is the can itself lifting under the pointer, not a caption
   telling you to click. The JS owns .can's transform and filter every frame,
   so hover has to live on the image. */
html.motion .can-btn{cursor:pointer}
html.motion .can img{transition:filter .16s ease}
html.motion .can:hover img:not(.refl),
html.motion .can-btn:focus-visible ~ img{
  filter:drop-shadow(0 30px 44px rgba(0,0,0,.8)) brightness(1.12);
}

@media(max-width:900px){
  .viewer-in{grid-template-columns:1fr;gap:18px;align-content:center;
    padding-top:calc(var(--hud-h) + 56px)}
  .viewer-can{order:-1}
  .viewer-can img{height:min(38vh,330px)}
  .viewer .rail{flex-direction:row;flex-wrap:wrap}
  .viewer .rail button{width:auto}
}

/* loader */
/* Hidden unless motion mode asked for it, so a plain document never sees it.
   .gone is also set by a failsafe timer in the head, so a missing app.js
   cannot leave the loader covering the page. */
#loader{display:none}
html.motion #loader{
  position:fixed;inset:0;z-index:300;background:var(--ink);
  display:grid;place-items:center;transition:opacity .29s ease;
}
#loader.gone{display:none!important}
#loader.done{opacity:0;pointer-events:none}
.loader-in{text-align:center}
.loader-mark{
  display:block;font-style:italic;font-weight:900;font-stretch:125%;font-size:clamp(48px,12vw,120px);
  letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.4);
}
.loader-pct{
  display:block;margin-top:16px;font-size:13px;letter-spacing:.3em;color:var(--paper);
  font-variant-numeric:tabular-nums;
}
.loader-step{display:block;margin-top:7px;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mute)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  html.motion .detail{grid-template-columns:1fr;gap:22px;padding-top:calc(var(--hud-h) + 12px)}
  html.motion .detail-can{order:-1}
  html.motion .detail-can img{height:min(34vh,300px)}
  html.motion .rail{flex-direction:row;flex-wrap:wrap}
  html.motion .rail button{width:auto}
  html.motion .claim{min-height:150px;margin-top:20px;padding-top:18px}
}
@media(max-width:620px){
  .hud{grid-template-columns:auto 1fr auto;padding:0 12px}
  .hud-read{display:none}
  .hud-mark{justify-self:start}
  .hud-cta{display:none}
  .grid img{height:150px}
  .foot-cols{gap:24px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}