/* AUM the Game · the carved black-and-gold look of the approved tri-fold and the AUM ornament language:
   warm near-black ground, bronze half-mandalas cut by the page edges, warm gold serif titles over a double rule
   with a lotus-bud finial, "◇ Label ◇" captions, fine double gold frames with ◇ at every corner and a soft inner glow. */
@font-face{font-family:Cinzel;src:url(fonts/Cinzel.woff2) format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:Marcellus;src:url(fonts/Marcellus-Regular.ttf) format('truetype');font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(fonts/CormorantGaramond.woff2) format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url(fonts/CormorantGaramond-Italic.woff2) format('woff2');font-weight:300 700;font-style:italic;font-display:swap}
:root{
  --ground:#070504; --ground-2:#0f0b07;
  --gold:#f3d39a; --gold-pale:#fff1cf; --gold-deep:#c9953f; --bronze:#8a5a1e;
  --cream:#f6e9cc; --dim:#b4a284; --line:rgba(243,211,154,.5); --line-soft:rgba(243,211,154,.2);
  --gold-text:linear-gradient(180deg,#fff4d8 0%,#f3d39a 38%,#d9a656 72%,#a8702c 100%);
  --display:Marcellus,'Cormorant Garamond',Georgia,serif;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --mono:ui-monospace,'Cascadia Mono',Consolas,'SFMono-Regular',monospace;
  --gutter:clamp(16px,5vw,64px);
}
*{box-sizing:border-box}
html{background:var(--ground);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--cream);font:400 20px/1.55 var(--serif);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%}
h2,h3{font-weight:400;margin:0}
a{color:inherit}
:focus-visible{outline:1px solid var(--gold);outline-offset:6px}

/* the thread layer lies over the page (screen blend, so it only ever adds light); its path keeps to the margins */
/* the scroll thread is part of the page (SVG, page coordinates): the browser scrolls it with the content */
#thread{position:absolute;left:0;top:0;width:100%;z-index:1;   /* beneath the two halves (z 2): where they cross on a phone it passes behind them */
  pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .9s ease;overflow:visible}
.past-opening #thread{opacity:1;transition:opacity .9s ease}
/* (they only fade IN; going back into the opening they vanish at once, never fading out over the film) */
#thread,.bg-threads{transition:none}
.past-opening .bg-threads{transition:opacity .9s ease}   /* the scroll thread and the two halves arrive together, as the opening ends */
/* main makes no stacking layer of its own, so the store buttons can sit above the thread layers (z 2) */
main{position:relative}
/* all content sits above the thread layers (z 2): the threads pass beneath titles, text, frames, cards and buttons;
   full-bleed pictures (the World film) stay beneath the threads */
.beat > *,.world-words,.foot > *{position:relative;z-index:3}
.foot{position:relative;z-index:1}
/* the two broken halves stay in view everywhere, like the scroll thread: on the same layer above the page (z 2),
   only adding light (screen), and only in the margins, so no content is covered */
.bg-threads{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .9s ease;mix-blend-mode:screen}   /* blend the whole group: an opacity on it would otherwise leave the black showing */
.past-opening .bg-threads{opacity:.8}

.bg-threads .half{position:absolute;overflow:hidden}
/* soft top and bottom, and the frayed end fades out instead of being cut */
.bg-threads .half.left{-webkit-mask-image:linear-gradient(to bottom,transparent var(--vin,19%),#000 var(--v0,38%),#000 var(--v1,62%),transparent var(--vout,81%)),linear-gradient(to right,#000 var(--fade,94%),transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent var(--vin,19%),#000 var(--v0,38%),#000 var(--v1,62%),transparent var(--vout,81%)),linear-gradient(to right,#000 var(--fade,94%),transparent);mask-composite:intersect}
.bg-threads .half.right{-webkit-mask-image:linear-gradient(to bottom,transparent var(--vin,19%),#000 var(--v0,38%),#000 var(--v1,62%),transparent var(--vout,81%)),linear-gradient(to left,#000 var(--fade,94%),transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent var(--vin,19%),#000 var(--v0,38%),#000 var(--v1,62%),transparent var(--vout,81%)),linear-gradient(to left,#000 var(--fade,94%),transparent);mask-composite:intersect}
.bg-threads video{position:absolute;max-width:none;object-fit:fill}
.bg-threads .half{left:0;top:0}   /* stretch, never letterbox (the join draws the thread out) */
@media (max-width:860px){.past-opening .bg-threads{opacity:.75}}
/* phones: a real margin at each edge, where the two halves rest (the content sits in a slightly narrower column) */
@media (max-width:699px){:root{--gutter:44px}.site-head{padding:0 16px}}
/* the edge mandalas reach past the screen: clip them at the page edge (clip, not hidden, so the pinned opening still works) */
html,body,main{overflow-x:clip}

/* ◇ Label ◇ captions: tracked Marcellus caps in gold */
.label{font:400 13px/1.4 var(--display);letter-spacing:.42em;text-transform:uppercase;color:var(--gold);margin:0;padding-left:.42em}
.meta{font:500 11px/1.5 var(--mono);letter-spacing:.32em;text-transform:uppercase;color:var(--gold-deep);margin:0}
/* ── the header: see-through over the opening, dark glass with a fine gold rule once you scroll ── */
.site-head{position:fixed;top:0;left:0;right:0;z-index:20;height:72px;display:flex;align-items:center;gap:clamp(18px,3vw,40px);
  padding:0 var(--gutter);background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,0));transition:background .45s,box-shadow .45s,height .45s}
.site-head.scrolled{height:64px;background:rgba(9,7,5,.78);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:0 1px 0 rgba(243,211,154,.22),0 4px 0 -3px rgba(243,211,154,.10),0 18px 40px -20px rgba(0,0,0,.8)}
.brand{display:block;flex:none;opacity:0;transform:translateY(-4px);transition:opacity .45s,transform .45s;pointer-events:none}
.brand img{height:40px;width:auto}
.site-head.scrolled .brand{opacity:1;transform:none;pointer-events:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(18px,2.6vw,38px)}
.nav a{position:relative;font:400 12px/1 var(--display);letter-spacing:.3em;text-transform:uppercase;color:var(--cream);opacity:.82;text-decoration:none;padding:8px 0;transition:color .25s,opacity .25s}
.nav a:hover{color:var(--gold);opacity:1}
.nav a.on{color:var(--gold);opacity:1}
.nav a.on::after{content:"\25C6";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);font-size:6px;color:var(--gold);letter-spacing:0}
.nav .nav-cta{display:none}
/* the header's Pre-register: a small version of the gold panels (double gold border, corner studs, side points, Cinzel) */
.head-cta{position:relative;flex:none;display:inline-flex;align-items:center;height:40px;padding:0 24px;text-decoration:none;
  font:600 13px/1 Cinzel,var(--display);letter-spacing:.2em;text-transform:uppercase;color:#2a1606;
  background:url(img/cta/parchment.svg) center/cover,radial-gradient(120% 160% at 30% 15%,#fff3d4 0%,#fde8b6 32%,#e8c27c 72%,#c79a46 100%);
  box-shadow:0 0 0 1px #c79a46,0 8px 20px -10px rgba(0,0,0,.9);
  transition:transform .2s ease,filter .35s ease,box-shadow .35s ease}
.head-cta span{position:relative;z-index:1;padding-left:.2em}
.head-cta::before{content:"";position:absolute;inset:4px;border:1px solid rgba(90,58,18,.45);pointer-events:none}
.head-cta::after{content:"";position:absolute;inset:-5px;pointer-events:none;
  background:url(img/cta/stud.svg) left top/11px 11px no-repeat,url(img/cta/stud.svg) right top/11px 11px no-repeat,
    url(img/cta/stud.svg) left bottom/11px 11px no-repeat,url(img/cta/stud.svg) right bottom/11px 11px no-repeat,
    url(img/cta/pt.svg) left 1px center/9px 14px no-repeat,url(img/cta/pt.svg) right 1px center/9px 14px no-repeat}
.head-cta:hover{filter:brightness(1.07) saturate(1.1);transform:translateY(-1px);
  box-shadow:0 0 0 1px #fde8b6,0 0 28px 3px rgba(253,220,150,.5),0 8px 20px -10px rgba(0,0,0,.9)}
.head-cta:active{filter:none;transform:translateY(1px);color:#fde8b6;
  background:url(img/cta/parchment.svg) center/cover,radial-gradient(120% 160% at 30% 15%,#8a6630 0%,#5e4019 55%,#3a2610 100%)}
.head-cta:active::before{border-color:rgba(253,232,182,.35)}
.menu{display:none;flex:none;width:44px;height:44px;margin-right:-10px;border:0;background:none;cursor:pointer;position:relative}
.menu i{position:absolute;left:11px;right:11px;height:1px;background:var(--gold);transition:transform .35s,opacity .25s}
.menu i:nth-child(1){top:15px}.menu i:nth-child(2){top:21.5px;left:17px}.menu i:nth-child(3){top:28px}
.site-head.open .menu i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.site-head.open .menu i:nth-child(2){opacity:0}
.site-head.open .menu i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media (max-width:860px){
  .site-head,.site-head.scrolled{height:58px}
  .brand img{height:32px}
  .head-cta{margin-left:auto;height:34px;padding:0 16px;font-size:11px;letter-spacing:.16em}
  .head-cta::after{inset:-4px;background-size:9px 9px,9px 9px,9px 9px,9px 9px,7px 11px,7px 11px}
  .menu{display:block}
  /* the links open full-screen, carved: gold caps with diamond markers */
  .nav{position:fixed;inset:0;z-index:-1;margin:0;flex-direction:column;justify-content:center;gap:10px;
    background:var(--ground);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
  .site-head.open .nav{opacity:1;visibility:visible}
  .nav a{font-size:18px;letter-spacing:.32em;padding:16px 0}
  .nav a::before{content:"\25C7";margin-right:14px;font-size:12px;color:var(--gold);letter-spacing:0}
  .nav a.on::after{display:none}
  .nav .nav-cta{display:block;margin-top:24px;color:var(--gold)}
  .site-head.open .brand{opacity:1;pointer-events:auto;transform:none}
  /* the glass blur would trap the full-screen menu inside the bar */
  .site-head.open{-webkit-backdrop-filter:none;backdrop-filter:none;background:transparent;box-shadow:none}
}

/* gold titles over the double rule */
.title{font-family:var(--display);font-weight:400;line-height:1.12;letter-spacing:.01em;filter:drop-shadow(0 0 22px rgba(243,190,110,.18))}
/* the gradient is painted per line, so a second line is as bright as the first */
.title .t{background:var(--gold-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.ruled::after{content:"";display:block;width:min(360px,72%);height:30px;margin:22px auto 0;background:url(img/rule.svg) center/contain no-repeat}

/* the carved frame: fine double gold lines, ◇ at every corner, a soft inner glow */
.frame{position:relative;padding:10px;border:1px solid var(--line);background:var(--ground);
  box-shadow:inset 0 0 40px rgba(201,149,63,.10),0 30px 80px -30px rgba(0,0,0,.9)}
.frame::before{content:"";position:absolute;inset:5px;border:1px solid var(--line-soft);pointer-events:none;z-index:1}
.frame::after{content:"";position:absolute;inset:-7px;pointer-events:none;z-index:2;background:
  url(img/corner.svg) left top/14px no-repeat,url(img/corner.svg) right top/14px no-repeat,
  url(img/corner.svg) left bottom/14px no-repeat,url(img/corner.svg) right bottom/14px no-repeat}
.frame video{position:relative;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}

/* bronze half-mandalas cut by the page edges, turning very slowly */
.edge-mandala{position:relative}   /* no isolation: the story cards must be able to rise above the thread layers */
.edge-mandala::before{content:"";position:absolute;z-index:-1;top:50%;width:min(1000px,130vw);aspect-ratio:1;pointer-events:none;
  background:url(img/mandala.svg) center/contain no-repeat;opacity:.34;left:calc(50% - 50vw);transform:translate(-50%,-50%);
  animation:turn 300s linear infinite}
.edge-mandala.right::before{left:calc(50% + 50vw);animation-direction:reverse}
@keyframes turn{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ── 1–2 · hero ───────────────────────────── */
.hero{position:relative;height:100vh;height:100svh;min-height:540px;overflow:hidden;display:grid;place-items:center;background:var(--ground)}   /* the page colour, so its edge never shows once the film has faded */
.hero-film{position:absolute;inset:0}
.hero-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s linear}
.hero-film video.on{opacity:1}
/* the whole thread sways and swells gently, on a slow cycle that never lines up with the film's short loop */
#h-whole{animation:sway 7.3s ease-in-out infinite}
@keyframes sway{0%,100%{transform:translateY(0) scaleY(1)}30%{transform:translateY(-7px) scaleY(1.035)}65%{transform:translateY(6px) scaleY(.975)}}
.hero-film::after{content:"";position:absolute;inset:0;background:
  linear-gradient(to bottom,rgba(0,0,0,.85) 0,transparent 20%,transparent 76%,rgba(0,0,0,.9) 100%),
  radial-gradient(140% 90% at 50% 48%,transparent 55%,rgba(0,0,0,.55) 100%)}
.hero-tap{position:absolute;inset:0;width:100%;border:0;background:none;cursor:pointer;z-index:2}
.hero-tap:disabled{cursor:default}
.hero-logo{position:absolute;top:clamp(44px,8vh,90px);left:50%;transform:translateX(-50%);width:clamp(170px,19vw,270px);height:auto;z-index:3;pointer-events:none;
  filter:drop-shadow(0 6px 30px rgba(0,0,0,.7))}
.hero-words{position:absolute;left:0;right:0;bottom:clamp(92px,16vh,170px);text-align:center;z-index:3;pointer-events:none;padding:0 var(--gutter)}
.cue{margin:0;font:400 13px/1.4 var(--display);letter-spacing:.42em;padding-left:.42em;text-transform:uppercase;color:var(--gold);animation:breathe 3.2s ease-in-out infinite}
#cue-spilled{font:italic 400 clamp(22px,2.6vw,30px)/1.3 var(--serif);letter-spacing:.01em;text-transform:none;padding:0;color:var(--cream);animation:rise .9s ease both}
.scroll-cue{position:absolute;bottom:28px;left:50%;width:1px;height:50px;background:linear-gradient(var(--line),transparent);z-index:3;opacity:0;transition:opacity .8s}
.scroll-cue span{position:absolute;left:-2px;top:0;width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);animation:drip 2.2s ease-in infinite}
.broken .scroll-cue{opacity:1}
/* the light coming towards you: an orb on the film's light that grows until it fills the screen, with slow rays */
.hero-flash{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;mix-blend-mode:screen}
.hero-rays{position:absolute;left:0;top:0;width:200px;height:200px;margin:-100px 0 0 -100px;z-index:4;pointer-events:none;opacity:0;mix-blend-mode:screen;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,236,196,0) 0deg 9deg,rgba(255,236,196,.55) 11deg,rgba(255,236,196,0) 13deg 22deg);
  -webkit-mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 30%,transparent 70%);mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 30%,transparent 70%)}
html.zoom .hero-wrap{position:relative;z-index:0;height:220vh;height:220svh}   /* 100 pinned + 60 the light comes + 60 it fades to the trailer (must match LEN in site.js) */
html.zoom .hero{position:sticky;top:0}
html.zoom .hero-film{will-change:transform}
/* the trailer is held in place (JS) and fades up out of the dark: no panel, no edge */
html.zoom .trailer{position:relative;z-index:3;   /* above the thread layers, like all content */
  margin-top:-100vh;margin-top:-100svh;max-width:none;will-change:transform,opacity;
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center}

/* ── shared beat layout ───────────────────── */
.beat{padding:clamp(110px,17vh,200px) var(--gutter);text-align:center;max-width:1240px;margin:0 auto}
.beat h2{font-size:clamp(36px,5.2vw,64px);margin:18px 0 0}
.beat h2.big{font-size:clamp(42px,7vw,92px)}
.lede{font:italic 400 clamp(21px,2.2vw,26px)/1.45 var(--serif);color:var(--cream);opacity:.88;margin:22px auto 0;max-width:30em}
.note{font:italic 400 18px/1.5 var(--serif);color:var(--dim);margin:26px auto 0;max-width:34em}

/* ── 3 · the trailer ──────────────────────── */
.trailer .frame{width:100%;max-width:1000px;margin:44px auto 0}

/* ── 4 · the world ────────────────────────── */
.world{position:relative;min-height:100vh;min-height:100svh;display:grid;align-items:end;overflow:hidden;background:#000}
.world-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 50%;z-index:1}
/* soft top and bottom edges: the scroll thread melts into the film as it passes under, and back out (never a cut) */
.world-film,.world::after{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 89%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 89%,transparent 100%)}
.world{background:transparent}   /* covers the scroll thread (z 1, earlier in the page); the halves (z 2) stay above */
.world::after{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(to bottom,var(--ground) 0,rgba(7,5,4,.1) 24%,rgba(7,5,4,.05) 50%,rgba(7,5,4,.75) 82%,var(--ground) 100%),
  linear-gradient(to right,rgba(7,5,4,.7) 0,transparent 55%)}
.world-words{position:relative;z-index:3;padding:0 var(--gutter) clamp(80px,15vh,150px);max-width:1240px;margin:0 auto;width:100%}
.world-words .label{padding-left:0}
.world-words h2{font-size:clamp(38px,5.6vw,72px);margin-top:18px}
.world-words h2.ruled::after{margin-left:0;background-position:left center}
.world-words .lede{margin-left:0}
.world-frame{display:none}
@media (max-width:860px){
  /* phones: the World reads like the trailer: centred words, the clip in the carved frame, the line beneath */
  .world{min-height:0;display:block;background:none}
  .world-film,.world::after{display:none}
  .world-words{padding:clamp(110px,17vh,200px) var(--gutter);text-align:center}
  .world-words .label{padding-left:.34em}
  .world-words h2.ruled::after{margin-left:auto;background-position:center}
  .world-frame{display:block;margin:40px auto 0}
  .world-words .lede{margin:26px auto 0}
}

/* ── 5 · the story: three carved panels ───── */
.questions{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3.4vw,48px)}
.questions .q{z-index:3}   /* the scroll thread weaves behind the cards */
/* the cards, made like the store panels: a clean dark ground in a double gold border with a soft gold glow at its
   foot, and at the top a gold plate like the Pre-register one (numeral medallion, a divider, the question in caps,
   its caption in italics) */
.q.card{position:relative;padding:12px 12px 24px;display:flex;flex-direction:column;align-items:center;
  background:radial-gradient(120% 40% at 50% 0,rgba(201,149,63,.12),transparent 65%),radial-gradient(90% 22% at 50% 100%,rgba(201,149,63,.14),transparent 70%),linear-gradient(180deg,#221a10,#1a150e 55%,#120e09);
  box-shadow:0 0 0 1px #fff3d6,0 0 0 3px #1a150e,0 0 0 4px #c79a46,0 22px 40px -18px rgba(0,0,0,.95);
  transition:transform .35s ease,box-shadow .35s ease}
.q.card::after{content:"";position:absolute;inset:5px;border:1px solid rgba(233,194,126,.28);pointer-events:none}
.q.card .cta-frame{z-index:4}
.q.card .o-bot{display:none}
.q.card:hover{transform:translateY(-4px);box-shadow:0 0 0 1px #fff3d6,0 0 0 3px #1a150e,0 0 0 4px #fde8b6,0 0 34px 2px rgba(253,220,150,.32),0 26px 44px -18px rgba(0,0,0,.95)}
.q > *{position:relative;z-index:3}
.q-head{display:flex;align-items:center;gap:14px;width:100%;min-height:96px;padding:12px 16px;color:#2a1606;
  background:url(img/cta/parchment.svg) center/cover,radial-gradient(120% 140% at 30% 20%,#fff3d4 0%,#fde8b6 30%,#e8c27c 70%,#c79a46 100%);
  box-shadow:0 0 0 1px #c79a46,0 6px 16px -8px rgba(0,0,0,.8);transition:filter .35s ease}
.q-head::before{content:"";position:absolute;inset:4px;border:1px solid rgba(90,58,18,.45);pointer-events:none}
.q.card:hover .q-head{filter:brightness(1.06) saturate(1.1)}
/* the numeral in a dark medallion, like the store icons */
.q .num{position:relative;flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  font:600 17px/1 Cinzel,var(--display);letter-spacing:.04em;color:#fde8b6;
  background:radial-gradient(circle at 50% 40%,#2c2216,#120e09);box-shadow:0 0 0 1px rgba(233,194,126,.8),inset 0 0 12px rgba(0,0,0,.6)}
.q-words{position:relative;display:flex;flex-direction:column;gap:6px;padding-left:14px;border-left:1px solid rgba(90,58,18,.4);text-align:left}
.q-name{font:600 16px/1.25 Cinzel,var(--display);letter-spacing:.1em;text-transform:uppercase;margin:0;text-wrap:balance}
.q-sub{font:italic 500 16px/1.15 var(--serif);color:#5a3a14}
/* the film in its own inner gold frame */
.shot{position:relative;width:calc(100% - 28px);margin:18px auto 0;padding:6px;border:0;background:#0b0805;
  box-shadow:0 0 0 1px rgba(233,194,126,.75),0 0 0 4px #15100a,0 0 0 5px rgba(233,194,126,.3)}
.shot video{display:block;width:100%;aspect-ratio:6/7;object-fit:cover;background:#000;transition:filter .35s}
.q.card:hover .shot video{filter:brightness(1.12) saturate(1.08)}
.shot-frame{position:absolute;inset:0;pointer-events:none}
.shot-frame i{position:absolute;display:block;width:11px;height:11px;background:url(img/cta/stud.svg) center/contain no-repeat}
.shot-frame .o-tl{left:-6px;top:-6px}.shot-frame .o-tr{right:-6px;top:-6px}.shot-frame .o-bl{left:-6px;bottom:-6px}.shot-frame .o-br{right:-6px;bottom:-6px}
.q p{font-size:19px;line-height:1.5;color:var(--cream);margin:18px 4px 20px;text-align:center}
/* the emblem at the foot under the ornamental rule, level on all three cards */
.q-rule{display:block;width:170px;height:20px;margin:auto auto 12px;background:url(img/rule.svg) center/contain no-repeat;opacity:.85}
.emblem{width:74px;height:74px;margin:0 auto;mix-blend-mode:screen;border-radius:50%}

/* ── 6–7 · join, the step ─────────────────── */
.stores{display:flex;flex-direction:column;align-items:center;gap:16px;margin:46px auto 0;width:min(420px,100%)}
.store{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;padding:17px 24px 15px;border:1px solid var(--line);
  text-decoration:none;color:var(--gold);background:#0f0b07;text-align:center;transition:transform .25s,box-shadow .25s,border-color .25s}
.store::before{content:"";position:absolute;inset:4px;border:1px solid var(--line-soft);pointer-events:none}
.store::after{content:"";position:absolute;inset:-6px;pointer-events:none;background:
  url(img/corner.svg) left top/12px no-repeat,url(img/corner.svg) right top/12px no-repeat,
  url(img/corner.svg) left bottom/12px no-repeat,url(img/corner.svg) right bottom/12px no-repeat}
.store .store-name{font:400 17px/1.2 var(--display);letter-spacing:.3em;padding-left:.3em;text-transform:uppercase}
.store .store-sub{font:italic 400 17px/1.3 var(--serif);color:var(--dim);margin-top:3px}
.store.primary{color:#1d1206;border-color:#f8e3b4;padding:21px 24px 18px;overflow:hidden;
  background:linear-gradient(180deg,#fff0cc 0%,#f3d39a 40%,#d7a456 78%,#b07a35 100%);
  box-shadow:0 0 0 1px rgba(243,211,154,.25),0 0 50px -6px rgba(243,190,110,.5),inset 0 1px 0 rgba(255,255,255,.6)}
.store.primary::before{border-color:rgba(60,36,10,.35)}
.store.primary .store-name{font-size:20px}
.store.primary .store-sub{color:#4b3112}
.store.primary .sheen{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-120%);animation:sheen 4.5s ease-in-out infinite 1.5s;pointer-events:none}
.store:hover{transform:translateY(-2px);border-color:var(--gold)}
.store.primary:hover{box-shadow:0 0 0 1px rgba(243,211,154,.4),0 0 70px -4px rgba(243,190,110,.7),inset 0 1px 0 rgba(255,255,255,.6)}
.store[aria-disabled="true"]{pointer-events:none;color:rgba(243,211,154,.6);border-color:rgba(243,211,154,.3)}   /* dimmed, but still solid: threads pass behind it */
.store[aria-disabled="true"] .store-sub{opacity:.7}
/* pre-registration: one carved box holds the store buttons and the rewards meter */
/* no card: the two broken halves meet the button with nothing cutting across them */
.prereg-box{width:min(780px,100%);margin:84px auto 0}   /* room above the button for the scroll thread to come in, clear of the joining halves */
#btn-play{transition:box-shadow .9s ease,transform .25s}
#btn-play.joined{box-shadow:0 0 0 1px rgba(243,211,154,.3),0 0 46px 2px rgba(255,226,170,.55),inset 0 1px 0 rgba(255,255,255,.6)}
/* the store buttons sit above the threads: the halves' frayed ends slip behind them, so the thread looks joined */
.stores .store{position:relative;z-index:3}
.prereg-box .stores{margin-top:0}
.prereg-box .note{margin-top:20px}
/* hidden until Pre-register is tapped, then it rises in */
.quest.locked{display:none}
.quest.opening{animation:quest-in 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes quest-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.quest .rule-only{width:min(360px,72%);height:30px;margin:40px auto 34px;background:url(img/rule.svg) center/contain no-repeat}


/* the rewards meter: your own thread, filled by checked steps */
.quest h3{font-size:clamp(28px,3.2vw,40px);margin-top:12px}
.quest-lede{font:italic 400 20px/1.5 var(--serif);color:var(--cream);opacity:.9;margin:12px auto 0;max-width:36em;text-wrap:balance}
.quest-lede b{font-weight:600;font-style:normal;color:#fde8b6;letter-spacing:.02em;white-space:nowrap}
.meter{position:relative;margin:46px 8px 0;padding-bottom:46px}
.meter-track{position:relative;height:12px;border:1px solid var(--line);background:rgba(15,11,7,.9);box-shadow:inset 0 0 12px rgba(0,0,0,.8)}
.meter-track::before{content:"";position:absolute;inset:3px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);pointer-events:none}
.meter-fill{--fill:0;position:absolute;left:0;top:0;bottom:0;width:calc(var(--fill) * 100%);transition:width 1.2s cubic-bezier(.3,.7,.2,1);
  background:linear-gradient(90deg,#8a5a1e,#d9a656 40%,#fff1cf 85%,#fff8e6);box-shadow:0 0 18px rgba(243,190,110,.7),0 0 4px #fff1cf}
.meter-fill::after{content:"";position:absolute;right:-6px;top:50%;width:18px;height:18px;border-radius:50%;transform:translateY(-50%);
  background:radial-gradient(circle,#fffaf0,rgba(255,236,196,.6) 40%,transparent 70%);opacity:calc(var(--fill) * 99)}
.meter-glint{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.meter-glint::before{content:"";position:absolute;top:0;bottom:0;width:60px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:glint 5s ease-in-out infinite 1s;left:-80px}
.tiers{list-style:none;margin:0;padding:0}
.tier{position:absolute;top:-7px;left:calc(var(--at) * 100%);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;width:110px;text-align:center}
.tier .node{width:24px;height:24px;transform:rotate(45deg);border:1px solid var(--gold);background:var(--ground);box-shadow:0 0 0 4px var(--ground);transition:background .6s,box-shadow .6s}
.tier .tier-num{margin-top:12px;font:italic 400 18px/1 var(--serif);color:var(--gold-deep)}
.tier .tier-name{margin-top:4px;font:400 10px/1.2 var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.tier .tier-at{margin-top:3px;font:italic 400 14px/1.2 var(--serif);color:var(--dim);opacity:.75}
.tier.lit .node{background:radial-gradient(circle,#fff6e0 0 30%,#f3d39a 31% 100%);box-shadow:0 0 0 4px var(--ground),0 0 24px rgba(243,211,154,.9);animation:tierlit 1.2s ease-out}
.tier.lit .tier-num,.tier.lit .tier-name{color:var(--gold)}
.meter-count{margin:6px 0 0;font:400 12px/1.4 var(--display);letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.gate{margin:28px auto 0;width:min(400px,100%)}
.gate .store.primary{width:100%;cursor:pointer;font:inherit}
.fine{margin:10px 0 0;font:italic 400 16px/1.5 var(--serif);color:var(--dim)}
.tasks{list-style:none;margin:30px 0 0;padding:0;text-align:left}
.task{display:grid;grid-template-columns:22px 1fr auto auto;align-items:center;gap:16px;padding:18px 4px;position:relative}
.task + .task::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--line-soft) 15%,var(--line-soft) 85%,transparent)}
.task-mark{width:14px;height:14px;margin-left:4px;transform:rotate(45deg);border:1px solid var(--gold)}
.task.done .task-mark{background:#f3d39a;box-shadow:0 0 12px rgba(243,211,154,.7)}
.task-name{margin:0;font:400 14px/1.3 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--cream)}
.task-of{letter-spacing:.06em;color:var(--dim)}
.task-how{margin:5px 0 0;font:italic 400 17px/1.45 var(--serif);color:var(--dim)}
.task-how .code{font:500 14px/1 var(--mono);font-style:normal;letter-spacing:.14em;color:var(--gold)}
.ref-link{margin:6px 0 0;font:400 13px/1.3 var(--mono);color:var(--gold-deep);word-break:break-all}
.task-points{font:400 12px/1 var(--display);letter-spacing:.16em;color:var(--gold);white-space:nowrap}
.task-go{font:400 11px/1 var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);background:rgba(15,11,7,.85);border:1px solid var(--line);
  padding:11px 14px 10px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:border-color .2s,color .2s}
.task-go:hover{border-color:var(--gold);color:var(--gold-pale)}
.task-gos{display:flex;gap:10px;flex-wrap:wrap}
/* Instagram before Meta's approval: the steps wait, Follow stays (following now is still worth it) */
.task-soon{display:none;margin:5px 0 0;font:italic 400 17px/1.45 var(--serif);color:var(--gold)}
.task.soon .task-soon{display:block}.task.soon .task-how{display:none}
.task.soon .task-go[data-act="instagram"]{display:none}.task.soon .task-points{opacity:.5}

.task.done .task-go{pointer-events:none;border-color:transparent;background:none;color:var(--gold)}
.task.done .task-name{color:var(--gold)}
.task-how .task-sub{color:var(--gold);white-space:nowrap}
.gate{display:flex;flex-direction:column;gap:30px}
.gate[hidden]{display:none}
.gate .cta:first-child .o-bot,.gate .cta + .cta .o-top{display:none}   /* (the pair shares one frame: finials only above and below it) */
/* "Rewards revealed soon", under the meter until the tiers are named */
/* ── the tasks as three framed cards, each under the reward it unlocks (like the store panels) ── */
.quest .meter-fill{display:none}   /* (each seal lights for its own task: no running fill) */
.quest .meter-track{visibility:hidden}   /* (the mehndi vine is the line now) */
.quest .vine{position:absolute;left:0;top:-45px;pointer-events:none;overflow:visible}
.quest .tier{z-index:1}
.quest .tier .seal{position:relative;display:grid;place-items:center;width:88px;height:62px}
.quest .tier .seal .node{position:relative;width:62px;height:62px;border:0;
  background:radial-gradient(120% 90% at 50% 0,rgba(201,149,63,.18),transparent 70%),linear-gradient(180deg,#241b10,#120e09);
  box-shadow:0 0 0 1px #fff3d6,0 0 0 3px #1a150e,0 0 0 4px #c79a46,0 12px 24px -10px #000}
.quest .tier .seal .node::after{content:"";position:absolute;inset:5px;border:1px solid rgba(233,194,126,.3)}
.quest .tier.lit .seal .node{background:url(img/cta/parchment.svg) center/cover,radial-gradient(120% 140% at 30% 20%,#fff3d4 0%,#fde8b6 30%,#e8c27c 70%,#c79a46 100%);
  box-shadow:0 0 0 1px #fff7e4,0 0 0 3px #1a150e,0 0 0 4px #fde8b6,0 0 40px 6px rgba(253,220,150,.45)}
.quest .tier.lit .seal .node::after{border-color:rgba(90,58,18,.45)}
.quest .tier .seal .node b{position:relative;z-index:1;display:grid;place-items:center}
/* inside each seal: a gold gift. Earned: it sits dark on the gold face and the seal shines */
.quest .gift{width:36px;height:36px;overflow:visible}
.quest .gift .lid,.quest .gift .bx{fill:#c79a46}.quest .gift .rib{fill:#6e4b1c}.quest .gift .bow{fill:none;stroke:#e9c27e;stroke-width:2.2;stroke-linejoin:round}
.quest .tier.lit .gift .lid,.quest .tier.lit .gift .bx{fill:#5a3a14}.quest .tier.lit .gift .rib{fill:#fde8b6}.quest .tier.lit .gift .bow{stroke:#5a3a14}
.quest .tier.lit .gift{filter:drop-shadow(0 0 5px rgba(255,250,235,.8))}
.quest .tier:not(.lit) .gift{opacity:.55;filter:saturate(.6)}   /* sealed: the gift waits, dim */
/* earned: the face turns gold, the gift glows, and a band of light sweeps across (again every few seconds) */
.quest .tier .seal .node{overflow:hidden}
.quest .shine{position:absolute;inset:-30%;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 40%,rgba(255,252,240,.85) 50%,transparent 60%);transform:translateX(-100%)}
.quest .tier.lit .shine{animation:seal-shine 4.5s ease-in-out .3s infinite}
@keyframes seal-shine{0%{opacity:1;transform:translateX(-100%)}30%{opacity:1;transform:translateX(100%)}31%,100%{opacity:0;transform:translateX(100%)}}
.quest .tier.lit .seal{animation:seal-glow 3s ease-in-out infinite}
@keyframes seal-glow{0%,100%{filter:drop-shadow(0 0 6px rgba(253,220,150,.35))}50%{filter:drop-shadow(0 0 16px rgba(253,220,150,.75))}}
@media (prefers-reduced-motion:reduce){.quest .tier.lit .shine,.quest .tier.lit .seal{animation:none}}
.quest .tier .tier-num{white-space:nowrap}
.quest .s-fin{position:absolute;left:50%;top:-33px;width:52px;height:25px;margin-left:-26px;background:url(img/cta/fin.svg) center/contain no-repeat;z-index:2}
.quest .s-st{position:absolute;width:11px;height:11px;background:url(img/cta/stud.svg) center/contain no-repeat;z-index:2}
.quest .s-st.l{left:-5.5px;top:25.5px}.quest .s-st.r{right:-5.5px;top:25.5px}.quest .s-st.b{left:38.5px;bottom:-18.5px}
.tasks--cols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:34px 0 0;text-align:center}
.quest .quest-msg{margin:4px 0 0;min-height:1.4em}   /* (above the sign-in / the cards: the space under the cards stays clear for the thread) */
.tasks--cols[hidden]{display:none}   /* (display:grid would otherwise show the tasks before sign-in) */
.tasks--cols .task{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:0;padding:30px 18px 24px;
  background:radial-gradient(120% 45% at 50% 0,rgba(201,149,63,.14),transparent 65%),linear-gradient(180deg,#221a10,#1a150e 55%,#120e09);
  box-shadow:0 0 0 1px #fff3d6,0 0 0 3px #1a150e,0 0 0 4px #c79a46,0 18px 34px -16px rgba(0,0,0,.9);transition:box-shadow .35s ease,transform .35s ease}
.tasks--cols .task::after{content:"";position:absolute;inset:5px;border:1px solid rgba(233,194,126,.26);pointer-events:none}
.tasks--cols .task + .task::before{display:none}
.tasks--cols .task .cta-frame{z-index:4}
.tasks--cols .task .o-bot{display:none}
.tasks--cols .task:hover{transform:translateY(-3px);box-shadow:0 0 0 1px #fff7e4,0 0 0 3px #1a150e,0 0 0 4px #fde8b6,0 0 30px 2px rgba(253,220,150,.28),0 18px 34px -16px rgba(0,0,0,.9)}
.tasks--cols .task.done{box-shadow:0 0 0 1px #fff7e4,0 0 0 3px #1a150e,0 0 0 4px #fde8b6,0 0 34px 2px rgba(253,220,150,.3),0 18px 34px -16px rgba(0,0,0,.9)}
.tasks--cols .task-mark,.tasks--cols .task-points,.task-eyebrow{display:none}
.tasks--cols .task-words{position:relative;z-index:2;flex:1}   /* (the buttons line up along the bottom of all three) */
.tasks--cols .task-name{font:600 14px/1.3 Cinzel,var(--display);letter-spacing:.16em;color:#fde8b6}
.tasks--cols .task-how{font-size:16px;margin:10px 0 0}
.tasks--cols .ref-link{font-size:11px;margin-top:8px}
/* the action: a small gold plate like the header's Pre-register */
.tasks--cols .task-go{position:relative;z-index:2;margin-top:20px;display:inline-flex;align-items:center;height:38px;padding:0 20px;border:0;cursor:pointer;
  font:600 11.5px/1 Cinzel,var(--display);letter-spacing:.18em;text-transform:uppercase;color:#2a1606;text-decoration:none;
  background:url(img/cta/parchment.svg) center/cover,radial-gradient(120% 160% at 30% 15%,#fff3d4 0%,#fde8b6 32%,#e8c27c 72%,#c79a46 100%);
  box-shadow:0 0 0 1px #c79a46,0 8px 18px -10px rgba(0,0,0,.9);transition:filter .3s,transform .2s,box-shadow .3s}
.tasks--cols .task-go::before{content:"";position:absolute;inset:4px;border:1px solid rgba(90,58,18,.45);pointer-events:none}
.tasks--cols .task-go:hover{filter:brightness(1.07) saturate(1.1);transform:translateY(-1px);box-shadow:0 0 0 1px #fde8b6,0 0 24px 2px rgba(253,220,150,.45)}
.tasks--cols .task-go:active{filter:none;color:#fde8b6;background:url(img/cta/parchment.svg) center/cover,radial-gradient(120% 160% at 30% 15%,#8a6630,#5e4019 55%,#3a2610)}
.tasks--cols .task.done .task-go{background:none;box-shadow:none;color:#e9c27e;cursor:default}
.tasks--cols .task.done .task-go::before{display:none}
@media (max-width:760px){
  .tasks--cols{grid-template-columns:1fr;gap:34px}
  .task-eyebrow{display:block;margin:0 0 8px;font:italic 400 15px/1 var(--serif);color:var(--gold)}
}
.quest-soon{margin:22px auto 26px;display:flex;flex-direction:column;align-items:center;gap:10px}
/* a quiet label under the seals (no plate) */
.quest-soon .label{font:400 12px/1 var(--display);letter-spacing:.36em;color:var(--gold);white-space:nowrap}
/* the meter, bigger: three sealed rewards as gold-framed diamonds on a fine double rule, each numeral inside its seal */
.quest .meter{margin:70px 10px 0;padding-bottom:84px}
.quest .meter-track{height:8px;border-top:1px solid rgba(233,194,126,.6);border-bottom:1px solid rgba(233,194,126,.6)}
.quest .meter-fill{top:3px;height:2px}
.quest .tier{top:-31px;width:150px}
.quest .tier .node{display:grid;place-items:center;width:62px;height:62px;border:1px solid #e9c27e;
  background:radial-gradient(circle at 50% 35%,#2b2115,#0e0a06 70%);
  box-shadow:0 0 0 4px var(--ground),0 0 0 5px rgba(233,194,126,.4),inset 0 0 0 5px #120e09,inset 0 0 0 6px rgba(233,194,126,.5),0 0 28px rgba(253,220,150,.14)}
.quest .tier .node b{transform:rotate(-45deg);font:600 19px/1 Cinzel,var(--display);letter-spacing:.04em;color:#fde8b6}
.quest .tier .tier-num{margin-top:26px;font:italic 500 18px/1.2 var(--serif);color:var(--dim);letter-spacing:.02em}
.quest .tier.lit .node{background:radial-gradient(circle at 50% 35%,#fff6dc 0,#fde8b6 35%,#c79a46 100%);
  box-shadow:0 0 0 4px var(--ground),0 0 0 5px #fde8b6,inset 0 0 0 5px rgba(255,246,220,.6),inset 0 0 0 6px rgba(90,58,18,.5),0 0 36px 6px rgba(253,220,150,.6)}
.quest .tier.lit .node b{color:#2a1606}
.quest .tier.lit .tier-num{color:var(--gold)}
@media (max-width:699px){
  .quest .meter{margin:60px 6px 0;padding-bottom:74px}
  .quest .tier{top:-24px;width:96px}
  .quest .tier .node,.quest .tier .seal .node{width:48px;height:48px}
  .quest .gift{width:27px;height:27px}
  .quest .tier .tier-num{font-size:15px;white-space:normal;line-height:1.25}
  .quest .tn-a,.quest .tn-b{display:block}.quest .tn-dot{display:none}
  .quest .tier .seal{width:68px;height:48px}
  .quest .s-fin{top:-28px;width:42px;height:20px;margin-left:-21px}
  .quest .s-st{width:9px;height:9px}.quest .s-st.l{left:-2px;top:19.5px}.quest .s-st.r{right:-2px;top:19.5px}.quest .s-st.b{left:29.5px;bottom:-25px}
  .quest .vine{top:-41px}
  .quest .tier .node b{font-size:15px}
  .quest .tier .tier-num{margin-top:20px;font-size:16px}
  .quest-soon .label{font-size:11px;letter-spacing:.28em}
}
.quest-msg{min-height:1.4em;margin:14px 0 0;font:italic 400 17px/1.4 var(--serif);color:var(--gold)}
.quest-msg.bad{color:#f0a37a}
.also{margin:10px 0 0;font:italic 400 16px/1.5 var(--serif);color:var(--dim)}
.also a{color:var(--gold)}
.also span{opacity:.7}
@keyframes glint{0%{left:-80px}40%,100%{left:calc(100% + 20px)}}
@keyframes tierlit{0%{box-shadow:0 0 0 4px var(--ground),0 0 60px 20px rgba(255,236,196,.9)}}


/* ── the panels (pre-register, the stores, sign-in): gold-framed, an emblem, a divider, two lines, a faint scene ── */
.stores{width:min(780px,100%);gap:38px}   /* room for the finial under Pre-register */
.cta-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;width:100%}
.cta{--edge:#e9c27e;position:relative;z-index:3;display:flex;align-items:center;gap:18px;width:100%;min-height:84px;padding:12px 44px 12px 16px;
  text-decoration:none;text-align:left;border:0;font:inherit;cursor:pointer;isolation:isolate;
  box-shadow:0 0 0 1px #fff3d6,0 0 0 3px #1a150e,0 0 0 4px var(--edge),0 14px 30px -12px rgba(0,0,0,.9);
  transition:transform .2s ease,filter .35s ease,box-shadow .35s ease}
#btn-play.cta{width:min(560px,100%);min-height:96px}
.cta::after{content:"";position:absolute;inset:5px;border:1px solid rgba(90,58,18,.45);pointer-events:none;z-index:1}
.cta--gold{color:#2a1606;background:
  url(img/cta/scene-gold.svg) right bottom/auto 100% no-repeat,
  url(img/cta/parchment.svg) center/cover,
  radial-gradient(120% 140% at 30% 20%,#fff3d4 0%,#fde8b6 30%,#e8c27c 70%,#c79a46 100%)}
.cta--dark{color:var(--gold);background:
  url(img/cta/scene-dark.svg) right bottom/auto 100% no-repeat,
  linear-gradient(180deg,#221a10,#1a150e 55%,#120e09)}
.cta--dark::after{border-color:rgba(233,194,126,.28)}
.cta--wheel{background:
  url(img/mandala.svg) right -60px center/190px no-repeat,
  url(img/cta/parchment.svg) center/cover,
  radial-gradient(120% 140% at 30% 20%,#fff3d4 0%,#fde8b6 30%,#e8c27c 70%,#c79a46 100%)}
.cta-frame{position:absolute;inset:0;pointer-events:none;z-index:4}
.cta-frame i{position:absolute;display:block;background-position:center;background-size:contain;background-repeat:no-repeat}
.o-stud{width:14px;height:14px;background-image:url(img/cta/stud.svg)}
.o-tl{left:-8px;top:-8px}.o-tr{right:-8px;top:-8px}.o-bl{left:-8px;bottom:-8px}.o-br{right:-8px;bottom:-8px}
.o-fin{left:50%;width:64px;height:30px;margin-left:-32px;background-image:url(img/cta/fin.svg)}
.o-top{top:-24px}.o-bot{bottom:-24px;transform:scaleY(-1)}
.o-pt{top:50%;width:12px;height:18px;margin-top:-9px;background-image:url(img/cta/pt.svg)}
.o-l{left:-7px}.o-r{right:-7px}
.cta--dark .o-fin,.cta--dark .o-pt{opacity:0;transition:opacity .35s}
.cta--sm .o-fin{transform:scale(.8)}.cta--sm .o-bot{transform:scale(.8,-.8)}
.cta-emb{position:relative;z-index:2;flex:none;width:60px;height:60px;display:grid;place-items:center}
.cta-emb img{width:100%;height:100%}
.cta-icon{border-radius:50%;background:radial-gradient(circle at 50% 40%,#2c2216,#120e09);box-shadow:0 0 0 1px rgba(233,194,126,.7),inset 0 0 12px rgba(0,0,0,.6);width:50px;height:50px}
.cta-icon img{width:24px;height:24px;filter:invert(93%) sepia(16%) saturate(400%) hue-rotate(340deg) brightness(102%)}
.cta-icon--light{background:radial-gradient(circle at 50% 40%,#fffaf0,#efe2c8)}
.cta-icon--light img{filter:none}
.cta-icon--lg{width:58px;height:58px}.cta-icon--lg img{width:27px;height:27px;margin-left:3px}   /* (the triangle's visual centre sits right of its box) */
.cta-words{position:relative;z-index:2;display:flex;flex-direction:column;gap:5px;padding-left:18px;border-left:1px solid rgba(90,58,18,.4)}
.cta--dark .cta-words{border-left-color:rgba(233,194,126,.3)}
.cta .store-name{font:600 20px/1 Cinzel,var(--display);letter-spacing:.12em;text-transform:uppercase}
#btn-play .store-name{font-size:24px}
.cta .store-sub{font:italic 500 18px/1.1 var(--serif);color:#5a3a14;margin:0}
.cta--dark .store-sub{color:var(--dim)}
.cta--sm .store-name{font-size:16px;letter-spacing:.14em}.cta--sm .store-sub{font-size:16px}
/* states: hover brightens and glows, pressed sinks and darkens */
.cta--gold:hover{filter:brightness(1.07) saturate(1.1);transform:translateY(-1px);
  box-shadow:0 0 0 1px #fff7e4,0 0 0 3px #1a150e,0 0 0 4px #fde8b6,0 0 38px 4px rgba(253,220,150,.55),0 14px 30px -12px rgba(0,0,0,.9)}
.cta--gold:active{filter:none;transform:translateY(1px);color:#fde8b6;background:
  url(img/cta/scene-dark.svg) right bottom/auto 100% no-repeat,url(img/cta/parchment.svg) center/cover,
  radial-gradient(120% 140% at 30% 20%,#8a6630 0%,#5e4019 55%,#3a2610 100%)}
.cta--gold:active .store-sub{color:#e3c58e}.cta--gold:active .cta-words{border-left-color:rgba(253,232,182,.35)}
.cta--dark:hover{--edge:#fde8b6;background:url(img/cta/scene-dark.svg) right bottom/auto 100% no-repeat,linear-gradient(180deg,#3a2b14,#241a0d 55%,#17110a);
  box-shadow:0 0 0 1px #fff3d6,0 0 0 3px #1a150e,0 0 0 4px #fde8b6,0 0 30px 2px rgba(253,220,150,.4),0 14px 30px -12px rgba(0,0,0,.9)}
.cta--dark:hover .o-fin,.cta--dark:hover .o-pt{opacity:1}
.cta[aria-disabled="true"]{cursor:default}
.cta[aria-disabled="true"] .store-sub{opacity:.8}
#btn-play .o-pt{opacity:1}
#btn-play.joined{box-shadow:0 0 0 1px #fff7e4,0 0 0 3px #1a150e,0 0 0 4px #fde8b6,0 0 46px 4px rgba(255,226,170,.5),0 14px 30px -12px rgba(0,0,0,.9)}
.gate{width:min(500px,100%)}
.gate .cta{width:100%}
/* the steps: glowing diamonds on a fine gold line */
.meter-track{height:6px;border:0;background:none;box-shadow:none;border-top:1px solid rgba(233,194,126,.55);border-bottom:1px solid rgba(233,194,126,.55)}
.meter-track::before{display:none}
.meter-fill{top:2px;bottom:auto;height:2px;background:linear-gradient(90deg,#c79a46,#fde8b6);box-shadow:0 0 10px rgba(253,220,150,.8)}
.meter-fill::after{display:none}
.meter-glint{display:none}
.tier{top:-13px}
.tier .node{width:28px;height:28px;border:1px solid #e9c27e;background:#120e09;box-shadow:0 0 0 3px var(--ground),inset 0 0 0 4px #120e09,inset 0 0 0 5px rgba(233,194,126,.5)}
.tier.lit .node{background:radial-gradient(circle,#fffaf0 0 18%,#fde8b6 30%,#c79a46 75%);box-shadow:0 0 0 3px var(--ground),0 0 26px 6px rgba(253,220,150,.75);animation:none}
.tier .tier-num{font:italic 500 22px/1 var(--serif);margin-top:14px}
@media (max-width:699px){
  .cta-row{grid-template-columns:1fr}
  /* smaller on phones: shorter panels, smaller emblems and words, lighter ornaments */
  .stores{gap:26px}.cta-row{gap:18px}
  .cta{min-height:62px;padding:8px 18px 8px 12px;gap:12px}#btn-play.cta{min-height:70px}
  .cta-emb{width:40px;height:40px}.cta-icon{width:36px;height:36px}.cta-icon img{width:18px;height:18px}
  .cta-icon--lg{width:42px;height:42px}.cta-icon--lg img{width:20px;height:20px;margin-left:2px}
  .cta .store-name{font-size:14px}#btn-play .store-name{font-size:16px}.cta .store-sub{font-size:14.5px}
  .o-fin{transform:scale(.7)}.o-bot{transform:scale(.7,-.7)}.o-top{top:-20px}.o-bot{bottom:-20px}
  .cta--sm .store-name{font-size:14px;letter-spacing:.1em}
  .creators .store-name{font-size:14px;letter-spacing:.07em}
  .cta-words{padding-left:12px;gap:4px}
}
.step .rule-only{width:min(360px,72%);height:30px;margin:64px auto 0;background:url(img/rule.svg) center/contain no-repeat}
.slogan{margin:26px 0 0}
.slogan .title{display:block;font-size:clamp(30px,3.6vw,44px)}
.slogan span:not(.title){display:block;font:italic 400 clamp(21px,2.2vw,26px)/1.4 var(--serif);color:var(--cream);margin-top:8px}
#launch-line{margin-top:28px}

/* ── 8 · together ─────────────────────────── */
.socials{list-style:none;margin:48px auto 0;padding:0;width:min(440px,100%);text-align:left}
.socials li{position:relative}
.socials li + li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--line-soft) 20%,var(--line-soft) 80%,transparent)}
.socials a,.socials span.soon{display:flex;align-items:center;gap:16px;padding:15px 6px;text-decoration:none;font:400 16px/1.2 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--cream)}
.socials a::before,.socials span.soon::before{content:"◇";color:var(--gold);font-size:13px;letter-spacing:0;transition:transform .3s}
.socials a:hover{color:var(--gold)}
.socials a:hover::before{transform:rotate(45deg)}
.socials .go{margin-left:auto;font:italic 400 17px/1 var(--serif);letter-spacing:0;text-transform:none;color:var(--dim)}
.socials span.soon{opacity:.5}

.creators{width:min(560px,100%);margin:56px auto 0}
.creators .cta{width:100%}
.foot{text-align:center;padding:80px var(--gutter) 52px;color:var(--dim)}
.foot .rule-only{width:min(300px,64%);height:26px;margin:0 auto 34px;background:url(img/rule.svg) center/contain no-repeat;opacity:.8}
.foot img{margin:0 auto 14px;width:42px;height:auto;opacity:.8}
.foot p{margin:4px 0;font:400 12px/1.6 var(--display);letter-spacing:.32em;text-transform:uppercase}
.foot .small{font:italic 400 16px/1.5 var(--serif);letter-spacing:0;text-transform:none;opacity:.8;margin-top:10px}

/* reveal on scroll */
.rise{opacity:0;transform:translateY(18px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.rise.in{opacity:1;transform:none}
/* (the scroll thread plans its route with every slide at rest: see layout() in site.js) */
.measuring .rise,.settling .rise{transition:none !important}
.measuring .rise{transform:none !important}
/* the social links only fade in: the thread's branches are tied to their ◇ markers, so the markers must not move */
.socials.rise{transform:none}
.questions .q:nth-child(2){transition-delay:.12s}
.questions .q:nth-child(3){transition-delay:.24s}

@keyframes breathe{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes drip{0%{top:0;opacity:0}20%{opacity:1}100%{top:46px;opacity:0}}
@keyframes sheen{0%{transform:translateX(-120%)}35%,100%{transform:translateX(120%)}}

@media (max-width:860px){
  body{font-size:19px}
  /* phones get the joining too: narrower store buttons leave room for the two halves to reach in from both sides */
  .prereg-box .store .store-name{letter-spacing:.2em;padding-left:.2em}
  .prereg-box .store.primary .store-name{font-size:17px}
  .q-name{font-size:14.5px;letter-spacing:.08em}.q-sub{font-size:15px}.q-head{min-height:84px;padding:10px 14px;gap:12px}.q .num{width:42px;height:42px;font-size:15px}
  .task{grid-template-columns:22px 1fr;row-gap:10px}
  .task-points{grid-column:2;justify-self:start}
  .task-go,.task-gos{grid-column:2;justify-self:start}
  .tier{width:74px}
  .gate .store.google .store-name{font-size:16px;letter-spacing:.2em}
  .tier .tier-name{font-size:9px;letter-spacing:.14em}
  .questions{grid-template-columns:1fr;max-width:480px;margin-inline:auto}
  .socials{padding-left:16px}
  .label{font-size:12px;letter-spacing:.34em;padding-left:.34em}
  .edge-mandala::before{opacity:.22}
}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  .cue,#cue-spilled,.scroll-cue span,#h-whole,.store.primary .sheen,.edge-mandala::before,.meter-glint::before{animation:none}
  .hero-film video{transition:none}
}

/* ── the privacy page: one readable column, gold Cinzel headings ── */
.foot .small a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--line-soft)}
.foot .small a:hover{border-bottom-color:var(--gold)}
.policy{position:relative;z-index:1;width:min(760px,100%);margin:0 auto;padding:140px var(--gutter) 20px}
.policy h1{font-size:clamp(34px,5vw,54px);text-align:center;color:var(--gold-pale)}
.policy > .rule-only{width:min(300px,64%);height:26px;margin:20px auto 46px;background:url(img/rule.svg) center/contain no-repeat;opacity:.8}
.policy-text{font-size:19px;line-height:1.65;color:var(--cream)}
.policy-text p,.policy-text ul,.policy-text ol{margin:0 0 18px}
.policy-text ul,.policy-text ol{padding-left:24px}
.policy-text li{margin:0 0 10px}
.policy-text li::marker{color:var(--gold-deep)}
.policy-text h4{font:600 19px/1.35 Cinzel,var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin:52px 0 16px}
.policy-text h4::before{content:"\25C7";margin-right:12px;font-size:12px;vertical-align:3px;color:var(--gold-deep)}
.policy-text h5{font:600 16px/1.4 Cinzel,var(--display);letter-spacing:.06em;color:var(--gold-pale);margin:30px 0 10px}
.policy-text strong{color:var(--gold-pale);font-weight:600}
.policy-text a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--line-soft)}
.policy-text a:hover{border-bottom-color:var(--gold)}
.policy-officer-block{list-style:none;padding:16px 22px !important;border:1px solid var(--line-soft);background:rgba(243,211,154,.03)}
.policy-trademark{margin-top:40px !important;font-size:16px;color:var(--dim)}
@media (max-width:699px){.policy{padding-top:100px}.policy-text{font-size:18px}.policy-text h4{font-size:16px;margin-top:42px}}

/* phones: the sections sit closer together (the desktop's tall breathing room read as empty pages on a small screen).
   The trailer no longer fills a whole screen: it is held a little below the header during the opening instead. */
@media (max-width:860px){
  .beat{padding:76px var(--gutter)}
  .world-words{padding:76px var(--gutter)}
  html.zoom .trailer{min-height:0;padding-top:118px;padding-bottom:56px}
  .foot{padding-top:56px}
}

/* the signed-in line under the tasks: the optional news box and the account (sits quietly under the cards) */
.quest .quest-you{margin:34px auto 0;max-width:34em;text-align:center}
.quest .quest-you[hidden]{display:none}
.quest .news-row{display:inline-flex;gap:12px;align-items:flex-start;text-align:left;font:italic 400 18px/1.45 var(--serif);color:var(--cream);cursor:pointer}
.quest .news-row[hidden]{display:none}
.quest .news-row input{appearance:none;flex:none;width:20px;height:20px;margin-top:3px;border:1px solid rgba(233,194,126,.7);background:rgba(7,5,4,.6);display:grid;place-items:center;cursor:pointer}
.quest .news-row input:checked{background:linear-gradient(#fde8b6,#c79a46)}
.quest .news-row input:checked::after{content:"";width:9px;height:5px;border:solid #2a1c08;border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
.quest .news-row input:focus-visible{outline:2px solid #fde8b6;outline-offset:3px}
.quest .quest-acct{margin:16px 0 0;font-size:13px;letter-spacing:.04em;color:rgba(233,194,126,.7)}
.quest .linkish{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.quest .linkish:hover{color:#fde8b6}