/* ============================ THEME TOKENS ============================
   Repaint the campaign here: the :root vars below + the display font in the
   Google Fonts <link>. Everything else derives from these.
   ====================================================================== */
/* ODYSSEY — "Aegean screenprint" retheme of the campaign skeleton.
     Language: cream paper, cobalt/sky/aqua inks, terracotta accent, real
     Greek-key meander borders (tileable SVG), generated flat-vector art
     (trireme hero, mark-style trojan horse, wave divider). Caesar Dressing
     display over Hanken body. Signature motion: the SEA-DEEPENS scroll —
     the page background sinks cream → sky → deep navy as you descend
     (drifting amphora/fish/shell in parallax), surfacing at an Ithaca
     sunrise in the footer. body.deep flips heading ink to cream. */
  :root{
    --cream:#F5EACE; --cream2:#EFE4C8; --cob:#2148C0; --deep:#14286E;
    --sky:#8FC1E9; --aqua:#4FB7C9; --terra:#D96A3B; --terra2:#B84E22;
    --nink:#101C45; --white:#fff; --mute:#4d5678; --line:rgba(16,28,69,.16);
    /* aliases the shared activity-menu skins itself from */
    --navy:#14286E; --green:#D96A3B;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  [hidden]{display:none!important}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{font-family:"Hanken Grotesk",system-ui,sans-serif;background:#E9DFC4;color:var(--nink);display:flex;justify-content:center}
  .h5{position:relative;width:min(460px,100vw);background:transparent;overflow:visible;min-height:100vh}
  /* the sea: fixed backdrop whose color page.js interpolates with scroll */
  .sea{position:fixed;inset:0;z-index:-2;background:var(--cream)}
  .drift{position:fixed;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s ease;will-change:transform}
  @media (max-width:760px){ .drift{width:46px!important} }
  .drift img{display:block;width:100%}
  .meander{height:16px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><path d='M0 12H4V4H12V8H8V12H16M0 1H16M0 15H16' fill='none' stroke='%232148C0' stroke-width='1.8'/></svg>") repeat-x;background-size:16px 16px}

  /* ---------- preloader ---------- */
  .preloader{position:fixed;inset:0;background:var(--cream);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;
    transition:transform .85s cubic-bezier(.76,0,.24,1)}
  .preloader.done{transform:translateY(-100%)}
  .pl-lockup{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:clamp(8px,2.5vw,18px);padding:0 14px;max-width:100%}
  /* The lockup is nowrap and the mark can't reflow, so these three sizes are
     bounded by the narrowest phone: at 320px they come to ~223px inside a
     292px content box (logo is 596×300, i.e. twice as wide as it is tall).
     Raise any of them further and check that sum again. */
  .pl-logo{height:clamp(38px,10vw,78px);width:auto;flex:0 0 auto;display:block;opacity:0;animation:plUp .6s cubic-bezier(.2,.8,.2,1) .05s forwards}
  .pl-x{font-weight:800;font-size:clamp(18px,5vw,34px);line-height:1;flex:0 0 auto;color:var(--nink);opacity:.4;animation:plxin .5s ease .16s both}
  @keyframes plUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  @keyframes plxin{from{opacity:0;transform:translateY(10px)}to{opacity:.4;transform:none}}
  .pl-mark{font-family:"Caesar Dressing",system-ui;color:var(--cob);font-size:clamp(30px,8.6vw,65px);letter-spacing:.02em;line-height:1.2;white-space:nowrap;flex:0 1 auto;
    text-shadow:2px 2px 0 var(--sky);
    clip-path:inset(0 100% 0 0);animation:plReveal 1.5s cubic-bezier(.76,0,.24,1) .15s forwards}
  @keyframes plReveal{to{clip-path:inset(0 0 0 0)}}
  .pl-count{position:absolute;bottom:38px;left:0;right:0;text-align:center;font-weight:800;color:var(--terra2);font-size:15px;letter-spacing:.04em}
  .pl-bar{position:absolute;bottom:0;left:0;height:4px;width:0;background:var(--cob)}
  .pl-spider{position:absolute;bottom:7px;left:0;transform:translateX(-50%);z-index:6;pointer-events:none;filter:drop-shadow(0 3px 4px rgba(16,28,69,.25))}
  .pl-spider img{display:inline-block;width:34px;height:auto;animation:plsway 1s ease-in-out infinite alternate}
  @keyframes plsway{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}

  /* reveal */
  .rv{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
  .rv.in{opacity:1;transform:none}
  .rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}

  /* ---------- top bar ---------- */
  .topbar{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:16px 18px}
  .logo-img{height:38px;width:auto;display:block;filter:drop-shadow(0 2px 4px rgba(16,28,69,.2))}
  /* login / logout pill (summer's topbar pair, Aegean palette): the hero is
     cream paper, so this is ink on the same poster — a paper chip with a
     cobalt keyline — rather than the dark translucent pill the navy pages use. */
  .tb-right{display:flex;align-items:center;gap:8px}
  .tb-link{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--nink);
    background:rgba(255,255,255,.72);border:1.5px solid var(--cob);border-radius:999px;padding:7px 14px;
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);text-decoration:none;
    transition:background .15s ease,color .15s ease}
  .tb-link:hover{background:var(--cob);color:var(--cream)}

  /* ---------- HERO: the Aegean poster ---------- */
  .hero{position:relative;min-height:88vh;min-height:88svh;display:flex;flex-direction:column;padding:64px 0 0;overflow:hidden;background:var(--cream)}
  .hero .paper{position:absolute;inset:0;opacity:.5;pointer-events:none;
    background-image:radial-gradient(rgba(16,28,69,.05) 1px,transparent 1.4px);background-size:7px 7px}
  .hero .h-meander{position:relative;margin-top:2px;opacity:.9}
  .hero .content{position:relative;z-index:3;padding:26px 22px 0}
  .eyebrow{font-weight:800;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--terra)}
  .hashtag{font-family:"Caesar Dressing",system-ui;font-size:clamp(52px,16vw,84px);line-height:.95;margin:6px 0 6px;letter-spacing:.01em;
    color:var(--cob);text-shadow:3px 3px 0 var(--sky)}
  .tagline{font-size:clamp(13px,4vw,18px);font-weight:600;color:var(--mute);margin-bottom:16px}
  .heroup{opacity:0;transform:translateY(26px)}
  body.ready.go .heroup{animation:up .8s cubic-bezier(.2,.8,.2,1) forwards}
  body.ready.go .heroup.a2{animation-delay:.18s}
  body.ready.go .heroup.a3{animation-delay:.36s}
  body.ready.go .heroup.a4{animation-delay:.54s}
  @keyframes up{to{opacity:1;transform:none}}
  body.skip-intro .heroup{animation:none;opacity:1;transform:none}
  .hero .heroart{position:relative;margin-top:auto;z-index:2}
  .hero .heroart .hero-sea{display:block;width:116%;margin-left:-8%;max-width:none;height:auto}
  /* the ship is its own sprite now, so it can actually sail the swell */
  .hero-ship{position:absolute;left:0;bottom:26%;width:34%;will-change:transform}
  .hero-ship img{display:block;width:100%}
  @media (prefers-reduced-motion: no-preference){
    /* two nested animations: the wrapper sails, the hull rides the swell —
       one element cannot own both without them cancelling each other out */
    body.ready.go .hero-ship{animation:sail 26s linear infinite}
    body.ready.go .hero-ship img{animation:swell 5.5s ease-in-out infinite}
    @keyframes sail{from{transform:translateX(-42%)}to{transform:translateX(240%)}}
    @keyframes swell{0%,100%{transform:translateY(0) rotate(-2.2deg)}
      50%{transform:translateY(-9px) rotate(2.2deg)}}
  }
  @media (prefers-reduced-motion:reduce){ .hero-ship{left:26%} }

  /* the roster, teased under the hero CTA — fills the fold and tells you
     what you are playing for before you scroll */
  .legends{margin-top:12px}
  .leg-label{display:block;font-weight:800;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--terra);margin-bottom:10px}
  /* Example readings, as the scroll itself: the hero shows the exact card the
     oracle hands back, turning through the legends. It reuses .ocard wholesale
     — a second, smaller copy of that CSS would drift from the real card the
     first time either was touched.

     Sized off HEIGHT, not width: the fold has to hold the copy, the CTA, this
     scroll AND the sea, so the card takes what vertical room is left and its
     width follows the 9:16. Scaling it down by a fixed factor instead left it
     using half the column on every phone. */
  /* One knob: the scroll's height drives its width. It is a subtraction, not
     a fraction of the viewport — the fold has to seat the copy, the CTA, this
     scroll AND still show the sea, so the scroll takes what is left after
     roughly 470px of those and never more than 430. */
  .legends{--hh:clamp(280px, calc(100svh - 470px), 430px)}
  /* Short viewports (zoomed display, small phones) cannot seat the copy, a
     readable scroll AND the sea. Give the scroll more of the fold there and
     let the waves sit mostly below it — a legible card matters more than the
     ship being in the first screen. */
  @media (max-height:760px){ .legends{--hh:clamp(280px, calc(100svh - 400px), 430px)} }
  .hcard-wrap{display:flex;justify-content:center;margin-top:8px}
  .ocard.hcard{flex:0 0 auto;height:var(--hh);width:calc(var(--hh) * 9 / 16);cursor:default;
    animation:hcIn .7s cubic-bezier(.2,.8,.2,1) both}
  @keyframes hcIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .ocard.hcard .o-art img{opacity:0;transition:opacity .9s ease}
  .ocard.hcard .o-art img.on{opacity:1}
  .hc-dots{display:flex;gap:7px;justify-content:center;margin-top:10px}
  .hc-dots i{width:6px;height:6px;border-radius:50%;background:rgba(16,28,69,.22);
    transition:background .3s,transform .3s}
  .hc-dots i.on{background:var(--cob);transform:scale(1.25)}
  @media (min-width:768px){
    /* Wide screens: the scroll sits BESIDE the copy instead of under it —
       stacked, it left the whole right half of the fold empty. The copy needs
       its own .hero-copy wrapper for this: as loose siblings in a grid, the
       tall scroll stretched the rows and pulled the headline apart. */
    .leg-label{font-size:12px}
    .legends{--hh:min(62vh,560px);margin-top:0;align-self:center}
    .hero .content{display:flex;align-items:flex-start;
      gap:clamp(24px,5vw,72px)}
    .hero-copy{flex:1 1 auto;min-width:0}
  }
  }
  @media (prefers-reduced-motion:reduce){
    .ocard.hcard{animation:none}
    .ocard.hcard .o-art img{transition:none}
  }

  /* ---------- buttons ---------- */
  .btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;border:none;text-decoration:none;
    font-weight:800;font-size:16px;background:var(--cob);color:var(--cream);
    padding:13px 26px;border-radius:6px;box-shadow:3px 3px 0 var(--nink);
    transition:transform .14s cubic-bezier(.34,1.56,.64,1),box-shadow .15s ease}
  .btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--nink)}
  .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--nink)}
  .btn.full{width:100%;font-size:17px;padding:15px}
  .btn.kicked{animation:btnpop .42s ease}
  @keyframes btnpop{0%{transform:scale(.9)}45%{transform:scale(1.08)}100%{transform:scale(1)}}

  /* ---------- ticker ---------- */
  .ticker{background:var(--deep);color:var(--cream);font-weight:800;text-transform:uppercase;
    font-size:12px;letter-spacing:.06em;padding:10px 0;overflow:hidden;white-space:nowrap}
  .ticker span{display:inline-block;padding-left:100%;animation:slide 18s linear infinite}
  .ticker span i{font-style:normal;margin:0 8px;color:var(--aqua)}
  @keyframes slide{to{transform:translateX(-100%)}}

  /* ---------- sections ---------- */
  section{padding:46px 22px}
  .sec-eyebrow{font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--terra);transition:color .5s}
  h2{font-family:"Caesar Dressing",system-ui;font-weight:400;text-transform:uppercase;font-size:clamp(30px,8.6vw,42px);letter-spacing:.01em;line-height:1.02;margin:8px 0 16px;
    color:var(--cob);text-shadow:2px 2px 0 rgba(143,193,233,.55);transition:color .5s}
  .lead{font-size:15px;line-height:1.55;color:var(--mute);transition:color .5s}
  /* deep water: page.js flips body.deep past mid-scroll so type stays legible */
  body.deep .sec-eyebrow{color:var(--aqua)}
  body.deep h2{color:var(--cream);text-shadow:2px 2px 0 rgba(16,28,69,.6)}
  body.deep .lead{color:rgba(246,239,221,.82)}
  body.deep #block .fine{color:rgba(246,239,221,.6)}

  /* social proof */
  .proof{display:flex;align-items:center;gap:14px;background:var(--white);border:2px solid var(--nink);border-radius:12px;padding:16px 18px;margin-top:-8px;box-shadow:4px 4px 0 rgba(16,28,69,.25)}
  .proof .num{font-family:"Caesar Dressing",system-ui;font-size:30px;color:var(--terra2);line-height:1}
  .proof .lbl{font-size:13px;color:var(--mute);font-weight:600}
  .avs{display:flex;margin-left:auto}
  .avs img{width:30px;height:30px;border-radius:50%;border:2px solid var(--cream);margin-left:-10px;object-fit:cover;background:var(--cream2)}

  /* steps */
  .steps{display:flex;flex-direction:column;gap:12px}
  .step{display:flex;gap:14px;align-items:flex-start;background:var(--white);border:2px solid var(--nink);border-radius:12px;padding:16px;box-shadow:4px 4px 0 rgba(16,28,69,.25)}
  .step .n{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:var(--cob);display:grid;place-items:center;font-family:"Caesar Dressing",system-ui;font-size:19px;color:var(--cream)}
  .step:nth-child(2) .n{background:var(--terra)}
  .step:nth-child(3) .n{background:var(--aqua)}
  .step h3{font-weight:800;font-size:17px;margin-bottom:2px;color:var(--nink)}
  .step p{font-size:13.5px;color:var(--mute);line-height:1.45}

  /* pattern divider */
  .divider{height:150px;overflow:hidden;position:relative;border-top:2px solid var(--nink);border-bottom:2px solid var(--nink);background:var(--cream)}
  .divider>img{width:100%;height:100%;object-fit:cover;object-position:center}
  /* the dolphins are sprites, not part of the band, so they can breach:
     each arcs out of the waves and dives back, staggered, forever */
  .dolphin{position:absolute;bottom:16%;width:56px;pointer-events:none;transform-origin:50% 80%}
  .dolphin img{display:block;width:100%}
  @media (prefers-reduced-motion: no-preference){
    .dolphin{animation:breach 4.6s cubic-bezier(.4,0,.5,1) infinite}
    .dolphin.d2{animation-duration:5.4s;animation-delay:1.1s}
    .dolphin.d3{animation-duration:4.1s;animation-delay:2.4s}
    @keyframes breach{
      0%,10%   {transform:translateY(46%) rotate(-16deg);opacity:0}
      22%      {transform:translateY(-6%) rotate(-14deg);opacity:1}
      42%      {transform:translateY(-34%) rotate(4deg);opacity:1}
      62%      {transform:translateY(-6%) rotate(22deg);opacity:1}
      76%,100% {transform:translateY(46%) rotate(28deg);opacity:0}
    }
  }
  @media (prefers-reduced-motion:reduce){ .dolphin{transform:translateY(-18%)} }

  /* ---------- THE INTERACTION BLOCK: the voyage + the oracle ---------- */
  #blockRoot{min-height:120px}
  /* the voyage lives inline in the section — no gate, no overlay */
  .oq-inline{background:var(--white);border:2px solid var(--nink);border-radius:16px;padding:18px 16px 20px;
    box-shadow:4px 4px 0 rgba(16,28,69,.25)}
  .oq-quota{margin-top:12px;text-align:center;font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
  .oq-refpill{display:flex;align-items:center;gap:10px;width:100%;margin-top:14px;cursor:pointer;
    background:var(--white);border:2px dashed var(--terra);border-radius:999px;padding:9px 18px;
    font-family:"Hanken Grotesk",system-ui,sans-serif;transition:border-color .15s ease}
  .oq-refpill:hover{border-color:var(--nink)}
  .oq-refpill img{width:34px;height:auto}
  .oq-refpill b{font-weight:800;font-size:15px;color:var(--nink)}
  .oq-refpill span{margin-left:auto;color:var(--terra);font-size:20px;line-height:1}

  .oq-route{position:relative;height:40px;margin:2px 4px 4px}
  .oq-line{position:absolute;left:4%;right:4%;top:28px;border-top:2.5px dotted rgba(33,72,192,.5)}
  .oq-dot{position:absolute;top:24px;width:10px;height:10px;border-radius:50%;background:#fff;
    box-shadow:inset 0 0 0 2.5px var(--cob);transform:translateX(-50%)}
  .oq-dot.done{background:var(--cob)}
  .oq-dot.here{background:var(--terra);box-shadow:inset 0 0 0 2.5px var(--terra),0 0 0 4px rgba(217,106,59,.25)}
  .oq-ship{position:absolute;width:42px;top:6px;transform:translateX(-50%);transition:left .7s cubic-bezier(.2,.8,.2,1)}
  .oq-stoplabel{font-weight:800;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--terra);margin-top:6px}
  .oq-q{font-family:"Caesar Dressing",system-ui;font-size:24px;line-height:1.05;color:var(--cob);margin:4px 0 12px}
  .oq-art{position:relative;width:min(52vw,200px);margin:0 auto 12px;border-radius:12px;overflow:hidden;
    border:3px solid #fff;box-shadow:0 10px 24px rgba(16,28,69,.3)}
  .oq-art img{display:block;width:100%;pointer-events:none;-webkit-user-drag:none}
  .oq-art.pop{animation:oqpop .45s cubic-bezier(.34,1.4,.64,1)}
  @keyframes oqpop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
  .oq-pupil{position:absolute;left:49.2%;top:38.5%;width:12.5%;aspect-ratio:1;border-radius:50%;
    background:#14286E;transform:translate(-50%,-50%);pointer-events:none}
  .oq-pupil::after{content:"";position:absolute;right:12%;top:14%;width:34%;height:34%;border-radius:50%;background:#DFF2F5}
  .oq-art.blink img{animation:oqblink .28s ease}
  @keyframes oqblink{50%{filter:brightness(.35)}}
  .oq-answers{display:flex;flex-direction:column;gap:8px}
  .oq-a{background:#fff;border:2px solid rgba(33,72,192,.35);border-radius:10px;text-align:left;cursor:pointer;
    padding:12px 13px;font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:13.5px;font-weight:600;color:var(--nink);
    transition:border-color .12s,transform .12s}
  .oq-a:hover{border-color:var(--cob)}
  .oq-a.sel{background:var(--cob);border-color:var(--cob);color:var(--cream);transform:scale(.985)}

  /* oracle interstitial */
  .oq-oracle{display:flex;flex-direction:column;align-items:center;gap:16px;padding:44px 0 40px}
  .oq-oracle-ring{width:120px;height:120px;border-radius:50%;border:3px dashed var(--cob);
    display:flex;align-items:center;justify-content:center}
  .oq-oracle-ring img{width:74px;height:auto}
  @media (prefers-reduced-motion: no-preference){
    .oq-oracle-ring{animation:oqspin 7s linear infinite}
    .oq-oracle-ring img{animation:oqspin 7s linear infinite reverse}
    @keyframes oqspin{to{transform:rotate(1turn)}}
  }
  .oq-hint{font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);text-align:center;min-height:16px}

  /* result */
  .oq-result{display:flex;flex-direction:column;gap:12px;padding-top:8px}
  .oq-spoke{text-align:center;font-weight:800;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--terra)}
  .oq-name{text-align:center;font-family:"Caesar Dressing",system-ui;font-size:52px;line-height:1;color:var(--cob);text-shadow:2px 2px 0 var(--sky)}
  /* Localised names run long (オデュッセウス, ПОСЕЙДОН) and Caesar Dressing has no
     CJK anyway — step the display sizes down instead of letting them wrap. */
  .oq-name.long{font-size:34px}
  .oq-name.longer{font-size:27px}
  .oq-epithet{text-align:center;font-size:13.5px;font-weight:700;font-style:italic;color:var(--mute);padding:0 12px}
  .oq-drop{position:relative;display:flex;align-items:center;justify-content:center;min-height:170px;
    border:2px dashed var(--mute);border-radius:14px;background:#fff;cursor:pointer;overflow:hidden;transition:border-color .15s}
  .oq-drop:hover{border-color:var(--nink)}
  .oq-drop-empty{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;padding:20px;color:var(--mute)}
  .oq-drop-empty b{font-weight:800;font-size:16px;color:var(--nink)}
  .oq-drop-empty span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
  .oq-drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .oq-rechip{position:absolute;bottom:10px;right:10px;background:rgba(16,28,69,.85);color:var(--cream);
    font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px}

  /* the card */
  .oq-card{perspective:800px;display:flex;justify-content:center;padding-top:6px}
  /* the oracle's reading arrives as an unrolled papyrus scroll — 9:16, so it
     fits the machine's portrait output and drops straight into a story */
  .ocard{container-type:inline-size;width:min(76vw,300px);aspect-ratio:9/16;position:relative;cursor:pointer;
    display:flex;flex-direction:column;align-items:stretch;
    transform-style:preserve-3d;touch-action:none;will-change:transform;
    transition:transform .55s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 16px 30px rgba(16,28,69,.35))}
  .ocard.active{transition:transform .06s linear}
  .o-rod{display:block;width:106%;margin-left:-3%;position:relative;z-index:3;pointer-events:none}
  .o-rod.top{margin-bottom:-2%}
  .o-rod.bottom{margin-top:-2%;transform:scaleY(-1)}
  .o-body{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column;
    padding:14px 15px 12px;padding:4.7cqw 5cqw 4cqw;color:#4a3a22;
    background:#F0E4C6 url("/odyssey/assets/papyrus.jpg") center/cover;
    box-shadow:inset 0 8px 14px -8px rgba(74,58,34,.45),inset 0 -8px 14px -8px rgba(74,58,34,.45),
      inset 3px 0 8px -6px rgba(74,58,34,.4),inset -3px 0 8px -6px rgba(74,58,34,.4)}
  .ocard.unroll{animation:unroll .85s cubic-bezier(.2,.8,.2,1)}
  @keyframes unroll{from{opacity:0;transform:scaleY(.06)}60%{opacity:1}to{opacity:1;transform:none}}
  .o-eyebrow{text-align:center;font-weight:800;font-size:8.5px;font-size:2.85cqw;letter-spacing:.22em;text-transform:uppercase;color:var(--terra2)}
  .o-name{font-family:"Caesar Dressing",system-ui;text-align:center;font-size:30px;font-size:10cqw;line-height:1;color:var(--cob);margin-top:.7cqw}
  .o-name.long{font-size:23px;font-size:7.7cqw}
  .o-name.longer{font-size:19px;font-size:6.3cqw}
  .o-art{flex:1;margin:9px 2px 8px;margin:3cqw .7cqw 2.7cqw;position:relative;overflow:hidden;background:var(--deep)}
  .o-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
  .o-artframe{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 3px var(--cob),inset 0 0 0 5px rgba(240,228,198,.85)}
  .o-epithet{text-align:center;font-size:10px;font-size:3.35cqw;font-weight:700;font-style:italic;color:#6b5733;padding:0 2cqw;line-height:1.25}
  .o-meta{display:flex;justify-content:space-between;padding:8px 2px 0;padding:2.7cqw .7cqw 0;font-size:7.5px;font-size:2.5cqw;font-weight:800;letter-spacing:.06em;color:var(--terra2)}
  .o-coin{position:absolute;right:14px;bottom:52px;right:4.7cqw;bottom:17.3cqw;z-index:4;width:64px;height:64px;width:21.3cqw;height:21.3cqw;
    transform:rotate(-8deg);filter:drop-shadow(0 3px 8px rgba(16,28,69,.35))}
  .o-rare{position:absolute;top:12%;left:-26px;left:-8.7cqw;z-index:5;transform:rotate(-22deg);
    background:#C9A227;color:#3A2C1E;font-weight:800;font-size:10px;font-size:3.3cqw;letter-spacing:.24em;
    padding:5px 32px;padding:1.7cqw 10.7cqw;box-shadow:0 3px 10px rgba(16,28,69,.3)}
  .ocard.is-rare .o-body{box-shadow:inset 0 0 0 2px rgba(201,162,39,.5),
    inset 0 8px 14px -8px rgba(74,58,34,.45),inset 0 -8px 14px -8px rgba(74,58,34,.45)}
  .ocard.is-rare .o-name{color:#B8901E}
  .ocard.is-rare .o-artframe{box-shadow:inset 0 0 0 3px #C9A227,inset 0 0 0 5px rgba(240,228,198,.85)}
  @media (prefers-reduced-motion: no-preference){
    .ocard.is-rare .o-body::after{content:"";position:absolute;inset:0;pointer-events:none;
      background:linear-gradient(105deg,transparent 38%,rgba(255,232,160,.45) 50%,transparent 62%);
      background-size:260% 100%;animation:rareShine 3.4s ease-in-out infinite}
  }
  /* faintest papyrus kinship on the quiz card, so the scroll isn't a stranger */
  .oq-inline{position:relative}
  .oq-inline::before{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
    background:url("/odyssey/assets/papyrus.jpg") center/cover;opacity:.07;mix-blend-mode:multiply}
  .oq-inline>*{position:relative}

  .ocard{cursor:pointer}
  /* Was an uppercase .14em-tracked whisper, which suited "tap the card to save
     it" and nothing longer: the line now carries the consequence (the reading
     is unrecoverable once you leave), and uppercase at 10.5px would wrap that
     to three unreadable rows. Sentence case, terracotta — the palette's caution
     ink — and no tracking, so it reads as a warning instead of a caption. */
  .oq-taphint{margin-top:10px;text-align:center;font-family:"Hanken Grotesk",system-ui,sans-serif;
    font-weight:700;font-size:12px;line-height:1.45;color:var(--terra2);max-width:30ch;margin-left:auto;margin-right:auto}
  .oq-taphint[hidden]{display:none}
  .oq-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
  .oq-actions .btn{flex:1;min-width:120px;padding:12px 14px;font-size:13px}
  .btn.ghost{background:transparent;color:var(--nink);box-shadow:none;border:2px solid var(--nink);flex:0 0 100%}

  /* reward card */
  .reward{background:var(--white);border-radius:14px;padding:22px 18px;border:2px solid var(--nink);box-shadow:4px 4px 0 rgba(16,28,69,.25)}
  .reward .rtop{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
  .reward .rtitle{font-weight:800;font-size:26px;line-height:.95;color:var(--nink)}
  .reward .rtitle b{color:var(--terra2)}
  .reward .rtoday{text-align:right;font-size:12px;color:var(--mute);line-height:1.4}
  .reward .rtoday b{display:block;color:var(--nink);font-size:16px;font-weight:800}
  .reqline{background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:11px 14px;font-size:13px;color:var(--mute);font-weight:600;margin-bottom:18px}
  .reqline b{color:var(--terra2)}
  .ladder{position:relative;padding-left:4px}
  .track{position:absolute;left:22px;top:30px;bottom:30px;width:5px;background:rgba(16,28,69,.12);border-radius:5px;overflow:hidden}
  .track .fill{position:absolute;left:0;top:0;width:100%;height:0;background:var(--cob);border-radius:5px;transition:height 1.6s cubic-bezier(.4,0,.2,1) .2s}
  .in .track .fill{height:100%}
  .tier{position:relative;display:flex;align-items:center;gap:15px;padding:11px 0;z-index:2;opacity:0;transform:translateX(-12px);transition:opacity .5s,transform .5s}
  .in .tier{opacity:1;transform:none}
  .in .tier:nth-child(2){transition-delay:.3s}.in .tier:nth-child(3){transition-delay:.6s}.in .tier:nth-child(4){transition-delay:.9s}
  .tier .dot{width:44px;height:44px;flex:0 0 auto;border-radius:50%;background:var(--white);border:3px solid var(--cob);display:grid;place-items:center;font-size:12px;letter-spacing:.02em;font-weight:800;color:var(--cob)}
  .tier:nth-child(3) .dot{border-color:var(--terra);color:var(--terra2)}
  .tier:nth-child(4) .dot{border-color:var(--aqua);color:#20808f}
  .tier .info .w{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
  .tier .info .r{font-weight:800;font-size:18px;color:var(--nink)}
  .reward .btn{margin-top:18px}

  /* footer: surfacing at Ithaca — sunrise panel over the deep */
  footer{position:relative;padding:44px 22px 130px;text-align:center;overflow:hidden;
    background:linear-gradient(180deg,#F2A03D 0%,#E8B45C 22%,#F6EFDD 60%);border-top:2px solid var(--nink)}
  footer .ith-sun{position:absolute;top:-34px;left:50%;transform:translateX(-50%);width:120px;height:120px;border-radius:50%;
    background:#F6D77E;box-shadow:0 0 60px 20px rgba(246,215,126,.55)}
  footer .ith-ship{position:relative;width:180px;margin:0 auto 8px;display:block}
  footer .ith-line{font-family:"Caesar Dressing",system-ui;color:var(--terra2);font-size:20px;margin-bottom:14px}
  .fine{font-size:11px;color:rgba(16,28,69,.6);line-height:1.6;margin-top:18px;letter-spacing:.02em}
  #block .fine{margin-top:8px;white-space:pre-line}

  /* sticky bottom CTA */
  .stickybar{position:fixed;bottom:0;left:50%;transform:translate(-50%,120%);width:min(460px,100vw);
    background:rgba(246,239,221,.95);backdrop-filter:blur(10px);border-top:2px solid var(--nink);
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;z-index:320;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
  .stickybar.show{transform:translate(-50%,0)}
  .stickybar .s-left{font-size:12px;color:var(--mute);font-weight:600;line-height:1.3}
  .stickybar .s-left b{display:block;color:var(--nink);font-family:"Caesar Dressing",system-ui;font-size:16px}
  .stickybar .btn{margin-left:auto;padding:11px 18px;font-size:14px}

  /* ============ TABLET / DESKTOP ============ */
  @media (min-width:768px){
    .h5{width:100%}
    section{padding-top:80px;padding-bottom:80px;
      padding-left:max(6vw,calc((100% - 1080px) / 2));
      padding-right:max(6vw,calc((100% - 1080px) / 2))}
    h2{font-size:clamp(38px,4.6vw,56px)}
    .sec-eyebrow{font-size:13px}
    .lead{font-size:17px;max-width:60ch}
    .hero{min-height:94vh;min-height:94svh;padding-top:76px}
    .hero .content{max-width:1080px;margin:0 auto;width:100%;padding:34px 6vw 0}
    .hashtag{font-size:clamp(84px,10vw,140px)}
    .tagline{font-size:20px;max-width:48ch}
    .hero .heroart{max-width:1080px;margin:auto auto 0;width:100%}
    .hero .heroart img{width:100%;margin-left:0}
    .topbar{padding:22px}
    .logo-img{height:52px}
    .proof{max-width:560px;margin-left:auto;margin-right:auto}
    .steps{flex-direction:row;gap:18px}
    .step{flex:1;flex-direction:column;padding:26px}
    .step h3{font-size:19px;margin-top:8px}
    .step p{font-size:14.5px}
    .reward{padding:36px 34px}
    .reward .rtitle{font-size:32px}
    .reqline{font-size:14px}
    .tier .info .r{font-size:20px}
    .divider{height:220px}
    .ticker{font-size:13px;padding:12px 0}
    .stickybar{width:auto;min-width:460px;max-width:720px;border:2px solid var(--nink);border-radius:60px;
      bottom:24px;padding:12px 14px 12px 24px}
    footer{padding:60px 6vw 120px}
    footer .ith-ship{width:230px}
  }
  @media (min-width:1180px){
    section{padding-top:96px;padding-bottom:96px}
  }

  @media (prefers-reduced-motion:reduce){
    .rv,.heroup{transition:none;animation:none!important;opacity:1;transform:none}
    .ticker span{animation:none;padding-left:0}
    .drift{transition:none}
  }

  /* ---------- the arrival: night at the gates (/odyssey?i=…) ---------- */
  .inv{position:fixed;inset:0;z-index:9500;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:14px;padding:28px 22px;overflow:hidden;color:var(--cream);
    background:radial-gradient(90% 70% at 50% 108%, #1E3A8F 0%, #14286E 45%, #0C1840 100%);
    transition:opacity .4s ease}
  .inv.gone{opacity:0;pointer-events:none}
  .inv-sky{position:absolute;inset:0;opacity:.55;
    background-image:radial-gradient(rgba(246,239,221,.5) 1px,transparent 1.3px);background-size:34px 34px}
  .inv-moon{position:absolute;top:9%;right:16%;width:46px;height:46px;border-radius:50%;background:var(--cream);
    opacity:.9;box-shadow:0 0 28px 10px rgba(246,239,221,.32)}
  .inv-x{position:absolute;top:14px;right:18px;z-index:5;background:none;border:none;color:rgba(246,239,221,.75);
    font-size:30px;line-height:1;cursor:pointer}
  .inv-eyebrow{position:relative;font-weight:800;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--sky)}
  .inv-title{position:relative;font-family:"Caesar Dressing",system-ui;font-size:clamp(30px,9vw,44px);line-height:1;
    text-align:center;color:var(--cream);text-shadow:3px 3px 0 rgba(33,72,192,.85);max-width:14ch}
  .inv-horse{position:relative;width:min(74vw,300px);background:none;border:none;padding:0;cursor:pointer;
    -webkit-tap-highlight-color:transparent}
  .inv-horse img{display:block;width:100%;filter:drop-shadow(0 0 26px rgba(246,239,221,.22))}
  .inv.open .inv-horse{animation:invShake .5s ease}
  @keyframes invShake{25%{transform:rotate(-1.6deg)}65%{transform:rotate(1.6deg)}}
  .inv-glow{position:absolute;left:43%;top:37%;width:16%;height:14%;border-radius:12px;opacity:0;
    background:radial-gradient(circle,#FFE9A8 0%,#E8B84B 55%,rgba(232,184,75,0) 100%);
    filter:blur(3px);transition:opacity .5s ease .3s}
  .inv.open .inv-glow{opacity:1}
  .inv-hatch{position:absolute;left:47.2%;top:41%;width:7.2%;height:6.4%;border-radius:4px;z-index:3;
    background:#8A3A12;border:2px solid #F6EFDD;transform-origin:left center;
    transition:transform .6s cubic-bezier(.6,-.2,.4,1.1) .12s}
  .inv.open .inv-hatch{transform:perspective(300px) rotateY(-125deg)}
  .inv-ticket{position:absolute;left:50%;top:52%;z-index:4;white-space:nowrap;opacity:0;
    transform:translate(-50%,18px) scale(.6);background:var(--cream);color:var(--nink);
    font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:9px 14px;border-radius:5px;
    box-shadow:0 6px 20px rgba(0,0,0,.45);transition:all .55s cubic-bezier(.34,1.56,.64,1) .5s}
  .inv.open .inv-ticket{opacity:1;transform:translate(-50%,10px) scale(1) rotate(-3deg)}
  .inv-spark{position:absolute;color:#FFE9A8;font-size:15px;opacity:0;pointer-events:none;z-index:5}
  .inv.open .inv-spark{animation:invSp 1s ease .55s}
  @keyframes invSp{0%{opacity:0;transform:translateY(4px) scale(.5)}40%{opacity:1;transform:translateY(-8px) scale(1.15)}
    100%{opacity:0;transform:translateY(-20px) scale(.8)}}
  .inv-hint{position:relative;font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(246,239,221,.7)}
  .inv-cta{position:relative;background:#C9A227;color:#0C1840;box-shadow:3px 3px 0 rgba(12,24,64,.6)}
  @media (prefers-reduced-motion:reduce){
    .inv.open .inv-horse,.inv.open .inv-spark{animation:none}
    .inv-hatch,.inv-ticket,.inv-glow{transition:none}
  }

  .auth-modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:24px}
  .auth-backdrop{position:absolute;inset:0;background:rgba(16,28,69,.6);backdrop-filter:blur(6px)}
  .auth-card{position:relative;z-index:1;width:min(380px,92vw);background:var(--white);border:2px solid var(--nink);border-radius:14px;padding:32px 26px 24px;text-align:center;box-shadow:5px 5px 0 rgba(16,28,69,.3);animation:authpop .42s cubic-bezier(.34,1.56,.64,1)}
  @keyframes authpop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
  .auth-x{position:absolute;top:12px;right:16px;background:none;border:none;color:var(--mute);font-size:26px;line-height:1;cursor:pointer}
  .auth-logo{height:30px;width:auto;margin:0 auto 18px;display:block}
  .auth-title{font-weight:800;font-size:24px;margin-bottom:8px;color:var(--nink)}
  .auth-body{font-size:14px;color:var(--mute);line-height:1.5;margin-bottom:22px}
  .btn.is-ended{background:var(--cream2)!important;color:var(--mute)!important;box-shadow:none!important;cursor:default;pointer-events:none}
  .lang{position:relative;display:inline-block;margin-top:18px}
  .lang-btn{display:inline-flex;align-items:center;gap:8px;background:var(--white);color:var(--nink);border:1px solid var(--line);border-radius:30px;padding:9px 15px;font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:border-color .15s ease}
  .lang-btn:hover{border-color:rgba(16,28,69,.4)}
  .lang-globe{font-size:14px;opacity:.85}
  .lang-chev{opacity:.55}
  .lang-menu{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--white);border:1px solid var(--line);border-radius:14px;padding:6px;display:none;flex-direction:column;min-width:150px;max-height:248px;overflow:auto;box-shadow:0 18px 44px -12px rgba(16,28,69,.4);z-index:50}
  .lang-menu.open{display:flex}
  .lang-opt{background:none;border:none;color:var(--mute);font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:13px;font-weight:600;text-align:left;padding:9px 12px;border-radius:9px;cursor:pointer;white-space:nowrap}
  .lang-opt:hover{background:rgba(16,28,69,.07);color:var(--nink)}
  .lang-opt.sel{color:var(--terra2)}
  .tb-right{display:flex;align-items:center;gap:9px}
  .share-wrap{position:relative}
  .share-btn{width:36px;height:36px;display:grid;place-items:center;background:var(--white);border:1px solid var(--line);border-radius:50%;color:var(--nink);cursor:pointer;transition:border-color .15s ease}
  .share-btn:hover{border-color:rgba(16,28,69,.4)}
  .share-btn svg{width:17px;height:17px;transform:translateX(-1px)}
  .share-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:6px;display:flex;flex-direction:column;min-width:174px;box-shadow:0 18px 44px -12px rgba(16,28,69,.35);z-index:60}
  .share-wrap.up .share-menu{top:auto;bottom:calc(100% + 8px)}
  .share-opt{display:flex;align-items:center;gap:11px;background:none;border:none;color:var(--mute);font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:14px;font-weight:600;text-align:left;padding:10px 12px;border-radius:9px;cursor:pointer;text-decoration:none;white-space:nowrap;width:100%}
  .share-opt:hover{background:rgba(16,28,69,.07);color:var(--nink)}
  .share-opt svg{width:17px;height:17px;flex:0 0 auto;color:var(--terra2)}