@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  --vara-orange:#f78312;
  --vara-red:#ef4524;
  --vara-cream:#fff8e8;
  --vara-paper:#f5efe1;
  --vara-black:#090909;
  --vara-muted:#6b6258;
  --vara-display:'Bebas Neue',Impact,'Arial Narrow',sans-serif;
}

body{background:var(--vara-paper);color:var(--vara-black)}
body .wrap{width:min(100% - 40px,1280px)}

/* Shared Project Vara header */
body .header{position:sticky;top:0;z-index:100;background:var(--vara-orange);border:0;padding:10px 0 7px;backdrop-filter:none}
body .header__inner{min-height:60px;background:var(--vara-cream);border:3px solid var(--vara-black);border-radius:3px 3px 14px 14px;padding:7px 14px;box-shadow:0 3px 0 rgba(0,0,0,.1)}
.vara-lockup{display:flex;align-items:center;gap:14px;color:var(--vara-black);text-decoration:none;min-width:0}
.vara-lockup img{display:block;width:118px;height:auto;object-fit:contain;flex:0 0 auto}
.vara-lockup__product{padding-left:14px;border-left:2px solid var(--vara-black);font-family:var(--vara-display);font-size:24px;line-height:1;letter-spacing:.045em;white-space:nowrap}
.vara-lockup__product b{color:var(--vara-red);font-weight:400}
body .nav{gap:22px}
body .nav a{font-family:var(--vara-display);font-size:16px;letter-spacing:.05em;color:var(--vara-black)}
body .nav a:hover,body .nav a[aria-current="page"]{color:var(--vara-red)}
body .nav__cta{background:var(--vara-red);color:#fff!important;border:2px solid var(--vara-black);border-radius:9px;padding:10px 17px!important;box-shadow:2px 2px 0 var(--vara-black)}

/* HOME */
body[data-page="home"] .reveal{opacity:1;transform:none}
body[data-page="home"] .hero{background:var(--vara-orange);padding:30px 0 40px;border-bottom:3px solid var(--vara-black)}
body[data-page="home"] .hero>.wrap{width:min(100% - 40px,1280px);padding:0}
body[data-page="home"] .hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(460px,.94fr);gap:48px;align-items:center}
body[data-page="home"] .hero__copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;padding:6px 0;min-width:0}
.hero-vara{display:block;width:180px;height:auto;margin:0 0 20px}
.hero-title-art{display:block;width:min(100%,620px);height:auto;margin:0 0 18px;object-fit:contain}
.hero-badge{display:inline-flex;align-items:center;gap:12px;background:var(--vara-cream);border:3px solid var(--vara-black);border-radius:999px;padding:7px 17px 6px;margin:0 0 10px;font-family:var(--vara-display);font-size:28px;line-height:1;letter-spacing:.035em}
.hero-badge strong{font-family:'Arial Black',Arial,sans-serif;font-size:35px;line-height:.82;color:var(--vara-red)}
.hero-range{margin:0 0 24px;font-family:var(--vara-display);font-size:27px;letter-spacing:.12em;color:var(--vara-cream);-webkit-text-stroke:1.3px var(--vara-black);paint-order:stroke fill}
body[data-page="home"] .hero__lead{margin:0;max-width:31ch;font:500 18px/1.42 'Space Grotesk',sans-serif;color:var(--vara-black)}
body[data-page="home"] .hero__lead strong{font-weight:700}

/* Daily: preserve the proven game sizing, only skin it */
body[data-page="home"] .hero-game{width:100%;max-width:600px;justify-self:end;background:var(--vara-cream);border:3px solid var(--vara-black);border-radius:16px;box-shadow:6px 6px 0 rgba(0,0,0,.14);padding:20px;overflow:hidden}
body[data-page="home"] .daily-intro__label,body[data-page="home"] .kicker{font-family:var(--vara-display);color:var(--vara-red);letter-spacing:.12em}
body[data-page="home"] .daily-intro__puzzle strong,body[data-page="home"] .game-title-row strong{font-family:var(--vara-display);letter-spacing:.02em}
body[data-page="home"] .daily-intro__puzzle strong{font-size:clamp(48px,4.2vw,60px)}
body[data-page="home"] .daily-intro__puzzle span{border:2px solid var(--vara-black);padding:4px 10px;background:#fff;border-radius:3px;color:var(--vara-black)}
body[data-page="home"] .daily-start{background:var(--vara-red);border:3px solid var(--vara-black);color:#fff;box-shadow:3px 3px 0 var(--vara-black);font-family:var(--vara-display);font-size:28px;letter-spacing:.08em}
body[data-page="home"] .daily-start:hover{background:var(--vara-black);border-color:var(--vara-black)}
body[data-page="home"] .game-top{border-bottom:2px solid var(--vara-black)}
body[data-page="home"] .matrix-cell--number{background:#fffdf5;border:1px solid rgba(0,0,0,.16);font-weight:700}
body[data-page="home"] .matrix-cell--number:hover{background:#ffe3bd}
body[data-page="home"] .matrix-cell.is-found{background:#dff3e8;color:#176b42;outline:2px solid #2d8c5a}
body[data-page="home"] .button{border:2px solid var(--vara-black);border-radius:8px;font-family:var(--vara-display);font-size:18px;letter-spacing:.06em;box-shadow:2px 2px 0 var(--vara-black)}
body[data-page="home"] .button--accent{background:var(--vara-red);color:#fff}
body[data-page="home"] .button--dark{background:var(--vara-black);color:#fff}
body[data-page="home"] .button--line{background:var(--vara-cream);color:var(--vara-black)}

/* Section rhythm */
body[data-page="home"] .section{background:var(--vara-cream);border-bottom:3px solid var(--vara-black);padding:64px 0}
body[data-page="home"] .section-head h2,body[data-page="home"] .book-copy h2,body[data-page="home"] .help h2{font-family:var(--vara-display);line-height:.9;letter-spacing:.005em;color:var(--vara-black)}
body[data-page="home"] .section-head h2 span,body[data-page="home"] .book-copy h2 span{color:var(--vara-red)}

/* Mechanic */
body[data-page="home"] .rule{padding-top:58px;padding-bottom:64px}
.rule-intro{text-align:center;margin-bottom:30px}
.rule-intro h2{font-family:var(--vara-display);font-size:clamp(50px,5vw,72px);line-height:.9;margin:0}.rule-intro h2 span{color:var(--vara-red)}
.rule-figures{height:54px;display:flex;justify-content:center;align-items:flex-end;gap:12px;margin:22px auto 28px;overflow:hidden}
.rule-figures img{display:block;width:auto;height:48px;object-fit:contain}.rule-figures img.is-anomaly{height:52px}
body[data-page="home"] .rule-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:3px solid var(--vara-black);background:#fffaf0}
body[data-page="home"] .rule-steps article{padding:27px 28px 29px;border-right:2px solid var(--vara-black)}
body[data-page="home"] .rule-steps article:last-child{border-right:0}
body[data-page="home"] .rule-steps article>span{display:grid;place-items:center;width:50px;height:50px;border:2px solid var(--vara-black);border-radius:50%;background:var(--vara-red);color:#fff;font-family:var(--vara-display);font-size:31px;line-height:1;margin-bottom:17px}
body[data-page="home"] .rule-steps h3{font-family:var(--vara-display);font-size:31px;line-height:1;margin:0 0 7px;text-transform:uppercase}
body[data-page="home"] .rule-steps p{font-size:15px;line-height:1.48;color:var(--vara-muted);margin:0}

/* Actual book cover, no synthetic mockup */
body[data-page="home"] .book-section{background:#fffaf0;padding:68px 0}
body[data-page="home"] .book-grid{display:grid;grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr);gap:72px;align-items:center}
body[data-page="home"] .book-visual{display:flex;justify-content:center}
body[data-page="home"] .book-photo{margin:0;width:min(410px,92%);padding:0;background:transparent;border:0;box-shadow:none;transform:none;filter:drop-shadow(12px 18px 14px rgba(0,0,0,.15))}
body[data-page="home"] .book-photo img{display:block;width:100%;height:auto;border:2px solid var(--vara-black);background:var(--vara-orange);filter:none}
body[data-page="home"] .book-copy .kicker{font-size:17px;margin:0 0 7px}
body[data-page="home"] .book-copy h2{font-size:clamp(56px,5.4vw,82px);margin:0 0 21px}
body[data-page="home"] .book-copy__lead{font-size:18px;line-height:1.5;max-width:620px;color:var(--vara-muted)}
body[data-page="home"] .book-points{border-top:2px solid var(--vara-black);margin-top:25px}
body[data-page="home"] .book-points li{display:grid;grid-template-columns:115px 1fr;gap:18px;padding:12px 0;border-bottom:1px solid var(--vara-black)}
body[data-page="home"] .book-points b{font-family:var(--vara-display);font-size:23px;color:var(--vara-red)}
body[data-page="home"] .book-points span{font-size:14px;line-height:1.4;color:var(--vara-muted)}
body[data-page="home"] .actions{gap:12px;margin-top:25px}
body[data-page="home"] .availability{font:500 9px 'IBM Plex Mono',monospace;letter-spacing:.08em;color:#9a9084}

/* Companion */
body[data-page="home"] .help{background:var(--vara-cream)}
body[data-page="home"] .help-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:70px;align-items:center}
.help-brand{display:block;width:125px;height:auto;margin:0 0 18px}
body[data-page="home"] .help h2{font-size:clamp(54px,5vw,76px);max-width:10ch;margin:0 0 20px}
body[data-page="home"] .help-copy{font-size:17px;line-height:1.52;max-width:520px;color:var(--vara-muted)}
body[data-page="home"] .reveal-chain{border:3px solid var(--vara-black);background:#fffaf0;padding:20px;box-shadow:5px 5px 0 rgba(0,0,0,.09)}
body[data-page="home"] .reveal-chain>div{display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid #bdb3a6}
body[data-page="home"] .reveal-chain>div:last-of-type{border-bottom:0}
body[data-page="home"] .reveal-chain span,body[data-page="home"] .reveal-chain small{font:500 9px 'IBM Plex Mono',monospace;color:var(--vara-muted)}
body[data-page="home"] .reveal-chain strong{font-family:var(--vara-display);font-size:29px}
body[data-page="home"] .reveal-chain .is-accent strong{color:var(--vara-red)}
body[data-page="home"] .reveal-chain i{display:block;text-align:center;color:var(--vara-red);font-style:normal;height:8px}

/* Final CTA */
body[data-page="home"] .final-cta{background:var(--vara-orange);color:var(--vara-black);border-bottom:3px solid var(--vara-black);padding:42px 0}
body[data-page="home"] .final-cta__inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:center;text-align:left}
body[data-page="home"] .final-cta h2{font-family:var(--vara-display);font-size:clamp(52px,5.4vw,82px);line-height:.86;margin:0;max-width:800px}
body[data-page="home"] .final-cta h2 span{color:var(--vara-red)}
body[data-page="home"] .final-cta .actions{margin:0;justify-self:end}

/* Shared footer */
body .footer{background:var(--vara-black);color:#fff;border:0;padding:26px 0}
body .footer__row{align-items:center;gap:24px}
.vara-footer{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff}.vara-footer img{display:block;width:105px;height:auto}.vara-footer span{font-family:var(--vara-display);font-size:20px;letter-spacing:.04em;white-space:nowrap}.vara-footer b{color:var(--vara-red);font-weight:400}
body .footer nav a,body .footer p{color:rgba(255,255,255,.62)}

/* Share modal */
body[data-page="home"] .share-dialog{background:var(--vara-cream);border:3px solid var(--vara-black);border-radius:12px;box-shadow:7px 7px 0 var(--vara-black)}
body[data-page="home"] .share-preview-image{border:2px solid var(--vara-black)}

/* Companion pages — same brand, less poster noise */
body[data-page="hints"],body[data-page="puzzle"]{background:var(--vara-paper)}
body[data-page="hints"] .header,body[data-page="puzzle"] .header{background:var(--vara-orange)}
body[data-page="hints"] .page-hero,body[data-page="puzzle"] .puzzle-head{background:var(--vara-orange);border:3px solid var(--vara-black);box-shadow:6px 6px 0 rgba(0,0,0,.09)}
.companion-logo{display:block;width:150px;height:auto;margin-bottom:18px}
body[data-page="hints"] .page-hero h1,body[data-page="puzzle"] .puzzle-head h1{font-family:var(--vara-display);color:var(--vara-black)}
body[data-page="hints"] .tools,body[data-page="puzzle"] .stage{border:3px solid var(--vara-black);background:var(--vara-cream);box-shadow:none}
body[data-page="hints"] .puzzle-grid{border:3px solid var(--vara-black)}
body[data-page="puzzle"] .panel{background:#fffaf0}

@media(max-width:980px){
  body .wrap{width:min(100% - 30px,1280px)}
  body[data-page="home"] .hero__grid{grid-template-columns:1fr;gap:30px}
  body[data-page="home"] .hero__copy{align-items:center;text-align:center}
  .hero-vara{margin-inline:auto}.hero-title-art{width:min(100%,650px)}
  .hero-badge{margin-inline:auto}.hero-range{text-align:center}.hero__lead{margin-inline:auto!important}
  body[data-page="home"] .hero-game{justify-self:center}
  body[data-page="home"] .book-grid{grid-template-columns:.8fr 1.2fr;gap:40px}
}

@media(max-width:760px){
  body .wrap{width:min(100% - 24px,1280px)}
  body .header{padding-top:7px}
  body .header__inner{min-height:56px;padding:7px 10px}
  .vara-lockup{gap:9px}.vara-lockup img{width:82px}.vara-lockup__product{font-size:20px;padding-left:9px}
  body .menu{display:flex}
  body .nav{top:64px;background:var(--vara-cream);border:3px solid var(--vara-black);border-radius:10px}
  body .nav a{font-size:21px}
  body[data-page="home"] .hero{padding:20px 0 28px}
  .hero-vara{width:145px;margin-bottom:14px}.hero-title-art{margin-bottom:15px}
  .hero-badge{font-size:22px;padding:7px 12px}.hero-badge strong{font-size:28px}.hero-range{font-size:20px;letter-spacing:.09em;margin-bottom:17px}
  body[data-page="home"] .hero__lead{font-size:17px}
  body[data-page="home"] .section{padding:45px 0}
  .rule-intro h2{font-size:48px}.rule-figures{gap:8px;height:44px;margin:17px auto 22px}.rule-figures img{height:38px}.rule-figures img.is-anomaly{height:42px}
  body[data-page="home"] .rule-steps{grid-template-columns:1fr}
  body[data-page="home"] .rule-steps article{border-right:0;border-bottom:2px solid var(--vara-black)}
  body[data-page="home"] .rule-steps article:last-child{border-bottom:0}
  body[data-page="home"] .book-grid,body[data-page="home"] .help-grid{grid-template-columns:1fr;gap:34px}
  body[data-page="home"] .book-photo{width:min(360px,88%)}
  body[data-page="home"] .book-copy h2{font-size:53px}
  body[data-page="home"] .help h2{font-size:54px}
  body[data-page="home"] .final-cta__inner{grid-template-columns:1fr;gap:20px}
  body[data-page="home"] .final-cta .actions{justify-self:start}
  .vara-footer{gap:9px}.vara-footer img{width:82px}.vara-footer span{font-size:17px}
}