/* ═══════════════════════════════════════════════════════════════════════
   BLESS SHERMAN — style.css
   Order: tokens → base → hero → word → gift → seed → close → responsive → reduced-motion

   Every colour below is MEASURED, not chosen:
   palette.py sample world/hero-ground-001.jpg  → D #602205 · A #B17636
   brightest 2% of that room                    → #F7DEAD (the light itself = paper)
   darkest 6% of that room                      → #391203 → deepened to #230400 (ground)
   his polo, sampled from his own photograph     → #863238 (the one red on the page)
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── MEASURED palette ── */
  --paper:#F7DEAD;
  --paper-2:#EDD4A3;
  --ink:#230400;
  --ink-2:#160000;
  --deep:#602205;
  --brick:#732C05;
  --amber:#B17636;        /* decorative only — 2.9:1 on paper, never used for text on paper */
  --amber-ink:#864F00;    /* functional — 5.11:1 on paper (AA) */
  --amber-lit:#BE8243;    /* functional on dark — 5.94:1 on ink (AA) */
  --red:#863238;          /* his polo. the only red on the page */
  --red-lit:#C2565E;      /* raised until 4.5:1 on ink — the ladder, not a guess */

  /* ── alpha ladder (ships as-is; hue is ours) ── */
  --dim:rgba(247,222,173,.62);
  --faint:rgba(247,222,173,.34);
  --ghost:rgba(247,222,173,.16);
  --hairline:rgba(247,222,173,.15);
  --marker:rgba(177,118,54,.30);
  --island:rgba(247,222,173,.93);

  --ink-dim:rgba(35,4,0,.62);
  --ink-faint:rgba(35,4,0,.34);
  --ink-hair:rgba(35,4,0,.15);

  /* ── type ── */
  --display:"Vank","Arial Narrow",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --serif:"Newsreader",Georgia,serif;

  /* ── one easing for the whole site. two curves reads as assembled, not made. ── */
  --ease:cubic-bezier(.22,.7,.2,1);

  --wrap:1200px;
  --pad:clamp(20px,5vw,68px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  background:var(--ink);color:var(--paper);
  font-family:var(--serif);font-weight:300;line-height:1.62;
  /* clip, not hidden: overflow:hidden makes body a scroll container and kills position:sticky
     on the hero, which is what lets the page scroll up over him. */
  overflow-x:clip;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
/* a class with display:flex beats the [hidden] attribute — every toggle on the page silently
   failed until this landed (gift limit, "read all", the preview-mode note). */
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
::selection{background:var(--red);color:var(--paper)}
html{scrollbar-color:var(--deep) var(--ink)}

/* ── the mono label: 10–12px, tracked, uppercase. the postal grammar of the page ── */
.tag{
  font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--amber-lit);
}
.tag::before{
  content:"";display:inline-block;width:14px;height:1px;
  background:currentColor;margin-right:12px;vertical-align:middle;opacity:.75;
}
.tag.bare::before{display:none}

/* display type lives at the top extreme; body at the bottom. nothing at 18–32px. */
h1,h2{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  line-height:.86;letter-spacing:.005em;
  /* Vank's caps overrun a tight line-box; pad the box or the tops clip (shipped bug, Aug 24) */
  padding-top:.08em;
}
h2{font-size:clamp(36px,5vw,72px)}
.lede{
  font-family:var(--serif);font-size:clamp(19px,2.1vw,26px);line-height:1.44;
  color:var(--paper);max-width:24ch;text-wrap:pretty;
}
.body{font-size:16px;line-height:1.7;color:var(--dim);max-width:46ch;text-wrap:pretty}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  padding:16px 26px;border:1px solid transparent;border-radius:2px;cursor:pointer;
  background:transparent;color:inherit;/* <button> otherwise inherits UA buttonface #efefef
     and every outline button rendered as a pale filled box */
  transition:transform .4s var(--ease),background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.btn-solid{background:var(--red);color:var(--paper)}
.btn-solid:hover{transform:translateY(-2px);background:var(--brick)}
.btn-line{border-color:var(--hairline);color:var(--paper)}
.btn-line:hover{transform:translateY(-2px);border-color:var(--amber-lit);color:var(--amber-lit)}
.btn:disabled{opacity:.55;cursor:default;transform:none}

/* ═══ HERO ═══ he is the fixed centre. everything on this page converges on him. ═══ */
.hero{
  /* sticky, not static — every section after this one slides up over him while he holds
     his ground. Scroll back and he is still there. */
  position:sticky;top:0;z-index:0;
  min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;isolation:isolate;
}
.hero-room{
  position:absolute;inset:0;z-index:0;
  background:url('../assets/room.jpg') center/cover no-repeat;
  /* the room is his ground; it must never out-shout him */
  filter:saturate(.98) brightness(.74);
}
.hero-room::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(72% 58% at 50% 42%,transparent 0%,rgba(35,4,0,.42) 62%,rgba(35,4,0,.86) 100%),
    linear-gradient(180deg,rgba(35,4,0,.72) 0%,transparent 26%,rgba(35,4,0,.9) 88%,var(--ink) 100%);
}

/* the two-track marquee: his name slides in pale, hides BEHIND him, emerges red.
   the mask gap is narrower than his widest opaque row (.9474, measured) or he can't hide it. */
.marquee{position:absolute;left:0;right:0;z-index:1;pointer-events:none;user-select:none;overflow:hidden}
.marquee-a{top:26%}
.marquee-b{top:44%}
.marquee-track{
  display:flex;width:max-content;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(72px,13vw,196px);line-height:1;white-space:nowrap;
}
.marquee-track span{padding-right:.32em}
.marquee-a .marquee-track{color:var(--paper);opacity:.13}
.marquee-b .marquee-track{color:var(--red-lit);opacity:.18}
/* masks: the top track dies to the right of his shoulder, the bottom to the left */
.marquee-a{-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 34%,transparent 47%);mask-image:linear-gradient(90deg,#000 0%,#000 34%,transparent 47%)}
.marquee-b{-webkit-mask-image:linear-gradient(90deg,transparent 53%,#000 66%,#000 100%);mask-image:linear-gradient(90deg,transparent 53%,#000 66%,#000 100%)}

/* TWO OWNERS: the wrapper holds the measured optical centring (CSS), the <img> inside is the
   only thing GSAP writes to. Put both on one element and GSAP's transform erases the centring. */
.hero-figure-wrap{
  position:absolute;bottom:0;left:50%;z-index:2;
  --fh:min(78vh,760px);
  height:var(--fh);width:calc(var(--fh) * 1.0215);
  /* head at .5693 of width; width = height × 1.0215 (1520/1488) → shift left by .0708 × height */
  transform:translateX(calc(-50% - .0708 * var(--fh)));
}
.hero-figure{
  /* max-width:none is load-bearing: the wrapper sits at left:50% and without an explicit width
     the img's max-width:100% resolved to the remaining half-screen — on a phone he rendered
     195 × 620, squashed to a third of his width. Billy: "it still stretched." */
  height:100%;width:100%;max-width:none;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.62)) saturate(1.02);
  -webkit-mask-image:linear-gradient(180deg,#000 84%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 84%,transparent 100%);
}
.hero-glow{
  position:absolute;left:50%;bottom:-6%;transform:translateX(-50%);z-index:1;
  width:min(120vw,1200px);height:60vh;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(177,118,54,.34),rgba(134,50,56,.16) 44%,transparent 72%);
  filter:blur(46px);
}
.hero-copy{
  position:relative;z-index:3;width:min(var(--wrap),100% - 2*var(--pad));margin:0 auto;
  padding-bottom:clamp(34px,6vh,64px);
}
.hero h1{font-size:clamp(60px,10.4vw,148px);color:var(--paper)}
/* capped so the second line stops short of his face — measured against the figure at 1440 */
.hero h1 .l2{color:var(--red-lit)}
.hero-lede{margin-top:22px;max-width:30ch}
.hero-scroll{margin-top:26px}

/* the index: its own strip under the hero. hairline rows, not cards. hover = 3 changes. */
.ways-strip{position:relative;z-index:1;background:var(--ink);padding:0 var(--pad)}
.ways-strip .wrap{width:min(var(--wrap),100%);margin:0 auto}
.ways{border-top:1px solid var(--hairline)}
.way{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  padding:22px 0;border-bottom:1px solid var(--hairline);
  transition:padding-left .5s var(--ease),opacity .4s var(--ease);
}
.way .n{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--amber-lit)}
.way .t{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(22px,2.6vw,32px);line-height:1;padding-top:.06em}
.way .way-g{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);justify-self:end}
.ways:hover .way{opacity:.42}
.ways .way:hover{opacity:1;padding-left:20px}
.ways .way:hover .t{color:var(--amber-lit)}
.ways .way:hover .way-g{color:var(--paper)}

/* ═══ shared section furniture ═══ */
.sec{position:relative;z-index:1;padding:clamp(78px,12vh,148px) var(--pad);overflow:hidden}
.wrap{width:min(var(--wrap),100%);margin:0 auto;position:relative;z-index:2}
.sec-head{max-width:52ch}
.sec-head h2{margin-top:14px}
.sec-head .body{margin-top:20px}

/* props: cut-outs that drift. one per act. they travel TOWARD him — that is the whole idea. */
/* these are vignetted PHOTOGRAPHS, not cut-outs: birefnet dropped the cream envelope and the
   kraft parcel entirely (too close in tone to their backdrop) and left a floating wax seal and
   a floating knot of twine. The matte was the wrong tool for these two. */
.prop{position:absolute;z-index:1;pointer-events:none;user-select:none;opacity:.85;
  /* height:auto is NOT optional here: with only a CSS width set, the element kept the 900px
     height attribute and every prop rendered 288 wide by 900 tall, spilling over the cards. */
  height:auto;aspect-ratio:1}
.prop-envelope{width:clamp(150px,15vw,240px);right:4%;top:10%;rotate:-7deg}
.prop-pen{width:clamp(150px,15vw,240px);right:4%;top:9%;rotate:5deg}
.prop-parcel{width:clamp(140px,14vw,225px);left:4%;bottom:10%;rotate:-5deg}

/* ═══ No.01 — A WORD (the wall) ═══ */
.word{
  background:
    linear-gradient(180deg,var(--ink) 0%,#2C0B02 42%,var(--ink) 100%);
}
.word::before{ /* the board of pinned notes is the GROUND this section stands on */
  content:"";position:absolute;inset:0;z-index:0;
  background:url('../assets/board.jpg') center/cover no-repeat;
  opacity:.20;filter:saturate(.8) brightness(.72);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 34%,#000 66%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 34%,#000 66%,transparent 100%);
}
.wall-form{
  width:min(660px,100%);margin:40px 0 0;display:grid;gap:16px;
  padding:clamp(22px,3vw,34px);border:1px solid var(--hairline);border-radius:3px;
  background:rgba(22,0,0,.72);backdrop-filter:blur(6px);
}
.wall-form label{display:grid;gap:9px}
.wall-form label span{font-family:var(--mono);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--amber-lit)}
.wall-form input,.wall-form textarea{
  width:100%;font-family:var(--serif);font-size:16px;color:var(--paper);
  background:rgba(247,222,173,.05);border:1px solid var(--hairline);border-radius:2px;
  padding:14px 15px;outline:none;resize:vertical;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.wall-form input::placeholder,.wall-form textarea::placeholder{color:rgba(247,222,173,.3)}
.wall-form input:focus,.wall-form textarea:focus{border-color:var(--red-lit);background:rgba(134,50,56,.1)}
.wall-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.wall-foot small{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--faint)}

.wall-count{margin:52px 0 18px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.wall-count b{font-family:var(--display);font-weight:700;font-size:clamp(34px,5vw,62px);line-height:1;color:var(--amber-lit);font-variant-numeric:tabular-nums}
.wall-count span{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}

.wall-grid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:0 16px;align-items:start}
.wall-col{display:flex;flex-direction:column;min-width:0}
.wall-empty{grid-column:1/-1;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--faint);padding:24px 0}
/* a note is a pinned card. NOT css columns — transforms inside multi-column fragment and
   vanish on hover in Chrome/Safari (shipped bug, Aug 23). real column stacks instead. */
.note{
  margin-bottom:16px;padding:22px 22px 17px;border-radius:2px;
  background:var(--paper);color:var(--ink);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.9);
  rotate:var(--r,0deg);
  transition:rotate .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);
}
.note:hover{rotate:0deg;transform:translateY(-4px);box-shadow:0 22px 44px -18px rgba(0,0,0,.95)}
.note p{font-family:var(--serif);font-size:17px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.note footer{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:15px;padding-top:12px;border-top:1px solid var(--ink-hair)}
.note strong{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brick)}
.note time{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);font-variant-numeric:tabular-nums}

.more{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}

/* the birthday bundle — an older stack, tied off and folded away */
.bundle{margin-top:40px;border-top:1px solid var(--hairline);padding-top:26px}
.bundle summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--amber-lit);
  transition:color .3s var(--ease);
}
.bundle summary::-webkit-details-marker{display:none}
.bundle summary::after{content:"+";font-size:15px;line-height:1;transition:transform .4s var(--ease)}
.bundle[open] summary::after{transform:rotate(45deg)}
.bundle summary:hover{color:var(--paper)}
.bundle .wall-grid{margin-top:26px}

/* ═══ No.02 — A GIFT (the address is the hero of this section) ═══ */
.gift{background:linear-gradient(180deg,var(--ink) 0%,#1A0500 100%)}
.ship{
  margin-top:30px;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(12px,1.6vw,20px);
  align-items:stretch;
}
.plate{
  padding:clamp(18px,2.2vw,26px);border-radius:3px;
  background:var(--paper);color:var(--ink);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.95);
  display:flex;flex-direction:column;
}
.plate .tag{color:var(--brick)}
.plate .tag::before{background:var(--brick)}
.addr{
  margin-top:12px;font-family:var(--mono);font-weight:500;
  font-size:clamp(16px,1.6vw,21px);line-height:1.38;letter-spacing:-.01em;color:var(--ink);
}
.addr b{font-weight:600;display:block}
.plate .acts{margin-top:16px;display:flex;gap:8px;flex-wrap:nowrap}
.plate .acts .btn{flex:1;padding-left:12px;padding-right:12px;white-space:nowrap}
.plate .btn-line{border-color:var(--ink-hair);color:var(--ink)}
.plate .btn-line:hover{border-color:var(--brick);color:var(--brick)}

.digital{
  padding:clamp(18px,2.2vw,26px);border:1px solid var(--hairline);border-radius:3px;
  display:flex;flex-direction:column;background:rgba(96,34,5,.16);
}
.digital .addr{color:var(--paper);font-size:clamp(14px,1.4vw,18px);overflow-wrap:anywhere}
.digital .note-line{margin-top:8px;font-family:var(--serif);font-size:14px;line-height:1.5;color:var(--dim);flex:1}
.digital .acts{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}

/* the index of gifts — every row carries its own photograph */
.gift-head{margin-top:clamp(56px,8vh,96px);display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.gift-grid{margin-top:26px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.g{
  display:flex;flex-direction:column;border:1px solid var(--hairline);border-radius:2px;overflow:hidden;
  background:rgba(247,222,173,.03);
  transition:transform .5s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
.g:hover{transform:translateY(-5px);border-color:var(--amber-lit);background:rgba(177,118,54,.08)}
.g-img{aspect-ratio:1;background:var(--paper);display:grid;place-items:center;overflow:hidden}
.g-img img{width:100%;height:100%;object-fit:contain;padding:9px;transition:transform .6s var(--ease)}
.g:hover .g-img img{transform:scale(1.05)}
.g-b{padding:14px 14px 12px;display:flex;flex-direction:column;gap:5px;flex:1}
.g-brand{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-lit)}
.g-t{font-family:var(--serif);font-size:14px;line-height:1.32;color:var(--paper);flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.g-f{display:flex;justify-content:space-between;align-items:baseline;margin-top:7px;padding-top:9px;border-top:1px solid var(--hairline)}
.g-p{font-family:var(--mono);font-weight:500;font-size:14px;color:var(--paper);font-variant-numeric:tabular-nums}
.g-c{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--red-lit)}

/* ═══ No.03 — A SEED ═══ */
.seed{background:linear-gradient(180deg,#1A0500 0%,var(--ink) 100%)}
.pays{margin-top:38px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pay{
  padding:clamp(24px,3vw,38px);border:1px solid var(--hairline);border-radius:3px;
  display:flex;flex-direction:column;gap:8px;background:rgba(96,34,5,.14);
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.pay:hover{border-color:var(--amber-lit);background:rgba(177,118,54,.09)}
.pay-head{display:flex;align-items:center;gap:11px}
.pay-mark{width:30px;height:30px;flex:none;border-radius:8px;box-shadow:0 6px 14px -6px rgba(0,0,0,.7)}
.pay .v{font-family:var(--mono);font-weight:500;font-size:clamp(18px,2.2vw,27px);line-height:1.3;color:var(--paper);overflow-wrap:anywhere;margin-top:6px}
.pay .h{font-family:var(--serif);font-size:14px;color:var(--dim);margin-top:2px}
.pay .acts{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}

/* ═══ CLOSING — he is centred again, and the page ends on him ═══ */
.close{
  position:relative;z-index:1;min-height:86svh;display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;text-align:center;padding-bottom:clamp(34px,6vh,60px);
}
.close-room{
  position:absolute;inset:0;z-index:0;
  background:url('../assets/room-2.jpg') center/cover no-repeat;
  filter:saturate(.9) brightness(.52);
}
.close-room::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--ink) 0%,transparent 30%,rgba(35,4,0,.86) 84%,var(--ink) 100%);
}
.close-figure-wrap{
  position:absolute;bottom:0;left:50%;z-index:1;
  --fh:min(62vh,600px);
  height:var(--fh);width:calc(var(--fh) * 1.0215);
  transform:translateX(calc(-50% - .0708 * var(--fh)));
}
.close-figure{
  height:100%;width:100%;max-width:none;
  filter:drop-shadow(0 22px 40px rgba(0,0,0,.7));
  -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 78%,transparent 100%);
}
.close-copy{position:relative;z-index:2;width:min(var(--wrap),100% - 2*var(--pad));margin:0 auto}
.close h2{font-size:clamp(40px,7.4vw,110px)}
.close .tag{justify-content:center}
.close .tag::before{display:none}
.close-sub{margin-top:18px;font-family:var(--serif);font-size:16px;color:var(--dim)}
.close-sub a{color:var(--amber-lit);border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.close-sub a:hover{border-color:var(--amber-lit)}

/* ═══ reveals — class-gated so a never-fired animation still shows everything ═══ */
.rv{opacity:0;transform:translateY(34px)}
html.no-js .rv,html.noanim .rv{opacity:1;transform:none}

/* ═══ responsive ═══ */
@media(max-width:1040px){
  .gift-grid{grid-template-columns:repeat(3,1fr)}
  .ship{grid-template-columns:1fr}
}
@media(max-width:760px){
  .hero{justify-content:flex-end;min-height:100svh}
  .hero-figure-wrap{--fh:min(70vh,600px)}
  .hero h1{font-size:clamp(58px,17vw,104px)}
  .hero .tag{font-size:9.5px;letter-spacing:.2em}
  /* the top third of a phone hero was an empty zone (Billy). The headline moves up into it;
     he fills the middle; the lede sits on a scrim at the bottom. Copy spans the whole hero. */
  .hero-copy{position:absolute;inset:0;width:auto;margin:0;
    padding:calc(var(--pad) + 22px) var(--pad) 26px;
    display:flex;flex-direction:column;justify-content:space-between}
  .hero-copy::before{
    content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:-1;
    background:linear-gradient(180deg,transparent 0%,rgba(35,4,0,.78) 42%,var(--ink) 100%);
  }
  .hero-lede{max-width:none;margin-top:0}
  .sm-hide{display:none}   /* the city wrapped the eyebrow onto a second line on a phone */
  .marquee-a{top:34%}.marquee-b{top:44%}
  .marquee-track{font-size:clamp(30px,9vw,56px)}
  .gift-grid{grid-template-columns:repeat(3,1fr);gap:7px}
  .g-b{padding:8px 8px 7px;gap:3px}
  .g-brand{font-size:8px;letter-spacing:.14em}
  .g-t{font-size:11px;line-height:1.25}
  .g-f{margin-top:4px;padding-top:6px}
  .g-p{font-size:11.5px}
  .g-c{display:none}
  .g-img img{padding:5px}
  .ship{grid-template-columns:1fr;gap:10px}
  .plate .acts .btn{font-size:10.5px;letter-spacing:.14em;padding:12px 8px}
  .pays{grid-template-columns:1fr}
  .prop{display:none}          /* props crowd a phone; the sections carry themselves */
  .close-figure-wrap{--fh:min(46vh,400px)}
}

/* ═══ reduced motion — a complete, finished page with nothing moving ═══ */
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important}
  .marquee-track{transform:none!important}
  *{animation:none!important;transition-duration:.01ms!important}
}