/* The Future of Fandom click-through.
   Ported from the approved gallery mock. This deliverable has its own
   typographic voice (Figtree, Inter, Caveat) on purpose; it is a gallery,
   not a page of the site. Do not merge it into site.css. */

:root{--ink:#22282f;--cream:#FBF7E8;--coral:#e6614e;--inkText:#1B222A;--hair:#39424B;--grey:#889093}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:#15191e;font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}

.stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:38px 28px 74px}
.card{position:absolute;width:min(1120px,100%);height:min(660px,100%);border-radius:18px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.55);padding:54px 60px;display:flex;flex-direction:column}
.card.ink{background:var(--ink)}
.card.cream{background:var(--cream)}

/* With JS the cards stack and cross-fade. Without it they simply run down
   the page, so the argument is still readable. */
.js body{overflow:hidden}
.js .card{opacity:0;pointer-events:none;transition:opacity .34s ease}
.js .card.on{opacity:1;pointer-events:auto}
.no-js .stage{position:static;display:block;padding:28px}
.no-js .card{position:static;height:auto;min-height:0;margin:0 auto 22px;max-width:1120px}
.no-js .zone,.no-js .bar,.no-js .count,.no-js .hint{display:none}

.top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.mark{height:26px;flex:none}
.kick{font-family:'Caveat',cursive;font-weight:600;font-size:23px;line-height:1.1;text-align:right;max-width:16ch;color:var(--coral)}

.label{font-family:'Inter';font-size:11px;font-weight:600;letter-spacing:3.2px;text-transform:uppercase;margin-top:34px}
.ink .label{color:var(--grey)}
.cream .label{color:#8A8560}

.body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:6px 0}
h1{font-family:'Figtree';font-weight:900;letter-spacing:-2px;line-height:1.02;font-size:78px;color:var(--coral)}
h2{font-family:'Figtree';font-weight:900;letter-spacing:-1.4px;line-height:1.06;font-size:54px;color:var(--coral)}
.state{font-family:'Figtree';font-weight:800;font-size:30px;line-height:1.28;letter-spacing:-.5px;margin-top:22px;max-width:34ch}
.ink .state{color:#fff}
.cream .state{color:var(--inkText)}
.small{font-family:'Inter';font-size:17px;line-height:1.6;margin-top:18px;max-width:62ch}
.ink .small{color:#B7BFC7}
.cream .small{color:#4A535C}
em{font-style:normal;color:var(--coral)}
.out{color:var(--coral);font-weight:600;text-decoration:underline;text-underline-offset:3px}

.foot{border-top:1px solid var(--hair);padding-top:16px;display:flex;align-items:center;justify-content:space-between;font-size:12px;gap:12px;flex-wrap:wrap}
.cream .foot{border-top-color:rgba(0,0,0,.16)}
.wm{font-family:'Figtree';font-weight:800;font-size:15px;letter-spacing:-.2px}
.ink .wm{color:#fff}.cream .wm{color:var(--inkText)}
.wm span{color:var(--coral)}
.mail{font-family:'Inter';color:var(--grey)}
.cream .mail{color:#8A8560}
.part{font-family:'Inter';font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:var(--grey)}
.cream .part{color:#8A8560}

/* nav */
.zone{position:fixed;top:0;bottom:64px;width:34%;cursor:pointer;z-index:5;background:none;border:none;padding:0}
.zone.prev{left:0}.zone.next{right:0;width:66%}
.zone:disabled{cursor:default}
.bar{position:fixed;left:0;right:0;bottom:0;height:64px;display:flex;align-items:center;justify-content:center;gap:9px;z-index:8}
.dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22);cursor:pointer;transition:.2s;border:none;padding:0}
.dot.on{background:var(--coral);transform:scale(1.35)}
.count{position:fixed;right:22px;bottom:22px;font-size:12px;letter-spacing:2px;color:#6E777F;z-index:9}
.hint{position:fixed;left:22px;bottom:22px;font-size:12px;letter-spacing:1.6px;color:#6E777F;z-index:9}
.back{position:fixed;right:22px;top:22px;z-index:9;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;font-weight:600;color:#6E777F;text-decoration:none;padding:6px 10px;border:1px solid rgba(255,255,255,.18);border-radius:7px}
.back:hover{color:#fff;border-color:rgba(255,255,255,.4)}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:#111;color:#fff;padding:12px 20px;font-weight:700}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){.js .card{transition:none}}

@media(max-width:820px){
  .card{padding:32px 26px;height:min(76vh,660px)}
  h1{font-size:44px}h2{font-size:32px}.state{font-size:21px}.small{font-size:15px}
  .kick{font-size:18px}
  .back{top:auto;bottom:76px}
}

.back2{right:88px}
@media(max-width:820px){.back2{right:88px}}