/* Shared Beacon geometry and postcard composition for all five shop routes. */
:root{
  --navy:oklch(21% .038 240);--ink:oklch(25% .04 220);--gold:oklch(86% .146 87);
  --aqua:oklch(87% .082 178);--white:oklch(98% .002 150);--paper:var(--white);
  --sage:oklch(93% .019 153);--muted:oklch(45% .024 219);--line:oklch(78% .024 153);
  --gutter:clamp(24px,6vw,88px);--header-height:100px;--hero-content-height:650px;--facts-height:80px;
}
.wrap{width:min(1380px,100%);margin-inline:auto;padding-inline:var(--gutter)}
body{background:var(--white);font:16px/1.65 Public,Arial,sans-serif}
h1,h2{font-family:Bodoni,Georgia,serif;font-weight:600;line-height:1.06;letter-spacing:-.035em}
h2{font-size:clamp(38px,4.3vw,62px)}
.shop-header{position:absolute;inset:0 0 auto;z-index:5;background:transparent;color:var(--white)}
.site-header,.header-inner{height:var(--header-height);min-height:var(--header-height);gap:28px}
.shop-brand{font-size:17px;letter-spacing:.11em;line-height:1.35;gap:12px}
.shop-brand small{font-size:8px;letter-spacing:.13em;margin-top:5px}
.shop-brand img{width:42px;height:48px}
.shop-header nav{gap:28px;font-size:13px}
.header-cta{display:inline-flex;align-items:center;justify-content:center;min-height:43px;padding:11px 23px;border:0;border-radius:7px;background:var(--gold);color:#10252e;font-size:13px;line-height:1.4;text-align:center}
.header-cta:hover{background:oklch(91% .12 87)}
.shop-hero,.product-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--navy);color:var(--white);padding-top:var(--header-height)}
.hero-background{position:absolute;inset:0;z-index:0;display:block}
.hero-background .hero-scene{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center top;mask-image:none;opacity:1;filter:none}
.shop-hero::before,.product-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#062332ed 0%,#062332d1 29%,#06233270 46%,#06233200 67%)}
.shop-hero::after,.product-hero::after{content:"";position:absolute;inset:0 0 auto;height:125px;z-index:1;pointer-events:none;background:linear-gradient(180deg,#06233280,#06233200)}
.hero-content,.hero-inner,.product-hero-inner{position:relative;z-index:2;display:flex;align-items:center;height:var(--hero-content-height);min-height:var(--hero-content-height);padding-top:54px;padding-bottom:76px}
.hero-copy,.shop-hero .hero-copy,.product-copy{width:min(100%,760px);max-width:760px;min-width:0}
.hero h1,.shop-hero h1,.product-copy h1{font-size:clamp(54px,5.7vw,82px);line-height:1.04;max-width:760px}
.hero .eyebrow,.shop-hero .eyebrow,.product-copy .eyebrow{font-size:11px;letter-spacing:.18em;font-weight:700;line-height:1.65;color:var(--aqua);margin-bottom:28px}
.hero-lead,.hero-copy .lede,.product-copy .lede{font-size:clamp(17px,1.65vw,23px);line-height:1.5;margin-top:27px;color:#e5eef1;max-width:42ch;width:auto}
.hero-lead{max-width:65ch}
.shop-hero .hero-copy .lede{max-width:52ch}
.hero-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:30px}
.action{min-height:56px;padding:14px 30px;font-size:17px;line-height:1.4;border-radius:999px}
.action.amber{background:var(--gold);color:#10252e}
.action.amber:hover{background:oklch(91% .12 87)}
.hero-actions .action{min-width:250px}
.hero-actions .purchase-action{margin:0}
.text-link{font-size:15px;line-height:1.5;text-underline-offset:7px}
.text-link.light{color:var(--aqua)}
.hero-note,.product-copy .purchase-note{font-size:12px;line-height:1.65;color:#c4d2d9;margin-top:19px}
.practical-strip{background:oklch(20% .03 225 / .97)}
.practical-strip>.wrap,.facts-inner{height:var(--facts-height);min-height:var(--facts-height);display:flex;align-items:center;justify-content:space-between;gap:22px;font-size:12px;color:#d5e3e7}
.practical-strip strong{font-weight:700;color:white;margin-right:9px}
.breadcrumb{display:flex;align-items:center;gap:10px;padding-block:22px;font-size:11px;line-height:1.5;color:var(--muted);flex-wrap:wrap}
.breadcrumb a{text-underline-offset:4px}
.together-section,.shop-section,.sample-section,.product-story,.inside-section,.related-section{padding-block:clamp(58px,7vw,104px)}
.together-section .section-intro{grid-template-columns:1.08fr 1fr;gap:80px;margin-bottom:36px}
.together-section .section-intro>p{font-size:17px;max-width:42ch;color:var(--muted)}
.people-photo{position:relative;margin:0}
.people-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;border-radius:12px}
.people-photo figcaption{position:absolute;right:16px;bottom:13px;color:white;background:rgba(8,31,39,.77);padding:3px 8px;border-radius:3px;font-size:10px}
.photo-note{display:flex;justify-content:space-between;gap:24px;padding-top:23px;align-items:center}
.photo-note strong{font-size:18px}
.photo-note span{font-size:13px;color:var(--muted)}
.card-image{position:relative;display:block;overflow:hidden;background:var(--sage);aspect-ratio:3/2}
.card-image .card-story-art{display:block;position:absolute;top:0;right:0;width:150%;max-width:none;height:100%;aspect-ratio:auto;object-fit:cover;object-position:right center;padding:0;transform:none;transition:filter .2s}
.game-card.beacon .card-story-art{width:125%;object-position:right top}
.card-image:hover .card-story-art{transform:none;filter:brightness(1.03)}
.art-label{position:absolute;bottom:10px;left:10px;right:10px;width:fit-content;max-width:calc(100% - 20px);padding:4px 7px;font-size:9px;line-height:1.5;background:#062332cc;color:white;border-radius:3px}
.inside-section img{aspect-ratio:3/2;object-fit:cover;object-position:75% center}
.inside-section figcaption{padding:10px 15px;font-size:10px;line-height:1.5;color:var(--muted)}
.inside-section .contract-note{color:var(--muted)}
@media(min-width:1500px){:root{--hero-content-height:700px}}
@media(max-width:1050px){
  :root{--hero-content-height:640px}
  .site-header,.header-inner{gap:18px}
  .shop-brand{font-size:13px}
  .shop-header nav{gap:17px}
  .hero-copy,.shop-hero .hero-copy,.product-copy{width:min(100%,650px);max-width:650px}
  .hero h1,.shop-hero h1,.product-copy h1{font-size:65px}
  .together-section .section-intro{gap:40px}
  .practical-strip>.wrap,.facts-inner{font-size:10px}
}
@media(max-width:760px){
  :root{--gutter:25px;--header-height:86px;--hero-content-height:840px;--facts-height:110px}
  .site-header,.header-inner{gap:10px}
  .shop-brand{font-size:11px;letter-spacing:.08em;gap:7px}
  .shop-brand img{width:31px;height:39px}
  .shop-brand small{font-size:6px;letter-spacing:.08em;margin-top:4px}
  .shop-header nav{display:none}
  .header-cta{font-size:11px;padding:10px 14px;min-height:40px}
  .hero-background .hero-scene{object-fit:cover;object-position:75% center;mask-image:none}
  .shop-hero::before,.product-hero::before{background:linear-gradient(180deg,#062332eb 0%,#062332cb 32%,#06233264 53%,#06233200 69%)}
  .hero-content,.hero-inner,.product-hero-inner{align-items:flex-start;min-height:var(--hero-content-height);padding-top:37px;padding-bottom:350px}
  .hero-copy,.shop-hero .hero-copy,.product-copy{width:100%;max-width:100%}
  .hero h1,.shop-hero h1,.product-copy h1{font-size:clamp(47px,8.1vw,63px);line-height:1.04;max-width:560px}
  .hero .eyebrow,.shop-hero .eyebrow,.product-copy .eyebrow{font-size:9px;letter-spacing:.12em;max-width:30ch;margin-bottom:25px}
  .hero-lead,.hero-copy .lede,.product-copy .lede{font-size:17px;max-width:34ch;margin-top:24px;width:auto}
  .shop-hero .hero-copy .lede{max-width:34ch}
  .hero-actions{gap:21px;margin-top:27px}
  .hero-actions .action{min-width:230px;font-size:15px}
  .text-link{font-size:13px}
  .shop-hero .hero-actions .text-link,.product-hero .hero-actions .text-link{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;border-radius:4px;background:#062332cc}
  .hero-note,.product-copy .purchase-note{font-size:10px;max-width:100%;width:fit-content;padding:5px 9px;border-radius:4px;background:#062332cc;color:#f1f6f7}
  .practical-strip>.wrap,.facts-inner{height:110px;min-height:110px;display:grid;grid-template-columns:1fr 1fr;gap:14px 19px;padding-block:20px;font-size:10px}
  .practical-strip strong{display:block;font-size:12px;min-width:0;margin-right:0}
  .together-section .section-intro{display:block;margin-bottom:28px}
  .together-section .section-intro h2{font-size:42px}
  .together-section .section-intro>p{font-size:15px;margin-top:23px}
  .people-photo figcaption{font-size:8px;right:8px;bottom:8px}
  .photo-note{display:block;padding-top:18px}
  .photo-note strong{font-size:16px}
  .photo-note span{display:block;margin-top:5px;font-size:12px}
  .breadcrumb{padding-block:18px;font-size:10px}
}
@media(max-width:380px){
  :root{--gutter:21px}
  .shop-brand{font-size:9px}
  .header-cta{padding:10px 12px;font-size:10px}
  .hero-content,.hero-inner,.product-hero-inner{padding-top:31px}
  .hero-actions{flex-direction:column;align-items:flex-start;gap:20px}
  .hero-lead,.hero-copy .lede,.product-copy .lede{font-size:16px}
  .together-section .section-intro h2{font-size:38px}
  .practical-strip>.wrap,.facts-inner{gap:15px}
}
@media(max-width:480px){.hero h1,.shop-hero h1,.product-copy h1{font-size:45px;line-height:1.08}.hero-actions{gap:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
