/* Grace Groath — pagina quiz + libri. Palette ufficiale del canale, mobile-first. */
@font-face{font-family:"Caveat";src:url("caveat.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Nunito";src:url("nunito.woff2") format("woff2");font-weight:200 900;font-display:swap}

:root{
  --rosa:#ECAFCA; --rosa-m:#B7768A; --lampone:#A0434E; --prugna:#562D36; --crema:#F5EFE6; --verde:#2E5E4E;
  --crema-2:#FBF7F1; --rosa-t:rgba(236,175,202,.28); --ink:var(--prugna);
  --cursive:"Caveat","Segoe Script","Bradley Hand",cursive;
  --sans:"Nunito",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --radius:18px; --shadow:0 10px 30px rgba(86,45,54,.10);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--crema);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;font-weight:500}
img{max-width:100%;display:block}
a{color:var(--lampone)}
h1,h2,h3,.cursive{font-family:var(--cursive);font-weight:600;line-height:1.05;margin:0;letter-spacing:.005em}
.wrap{width:min(100% - 40px, 960px);margin-inline:auto}
.sr{position:absolute;left:-9999px}

/* ---------- header ---------- */
.hero{background:linear-gradient(180deg,var(--rosa) 0%, #F2C9DA 55%, var(--crema) 100%);padding:44px 0 26px;text-align:center}
.hero .photo{width:148px;height:148px;border-radius:50%;object-fit:cover;margin:0 auto 14px;border:5px solid var(--crema);box-shadow:var(--shadow);transform:rotate(-1.5deg)}
.hero h1{font-size:54px;color:var(--prugna)}
.hero .tag{font-size:19px;max-width:480px;margin:8px auto 0;color:var(--prugna);font-weight:600}
.hero .author{font-family:var(--cursive);font-size:22px;color:var(--lampone);margin-top:10px;transform:rotate(-1deg);display:inline-block}

/* ---------- quiz ---------- */
.quiz{padding:8px 0 44px}
.card{background:var(--crema-2);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 22px;position:relative}
.quiz .card{border-top:6px solid var(--rosa)}
.pill{display:inline-block;font-family:var(--cursive);font-size:20px;color:var(--verde);background:rgba(46,94,78,.09);padding:2px 14px;border-radius:999px;transform:rotate(-1deg)}
.quiz h2{font-size:46px;margin:12px 0 6px;color:var(--prugna)}
.quiz h2 em{font-style:normal;color:var(--lampone)}
.quiz .sub{font-size:18px;margin:0 0 20px}
.btn{appearance:none;border:0;cursor:pointer;background:var(--lampone);color:#fff;font:700 18px/1 var(--sans);padding:16px 26px;border-radius:999px;box-shadow:0 8px 20px rgba(160,67,78,.28);transition:transform .12s ease,background .15s ease;text-decoration:none;display:inline-block;width:100%;text-align:center}
.btn:hover{background:#8c3843}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.small{width:auto;padding:12px 20px;font-size:16px}
.linkish{background:none;border:0;color:var(--rosa-m);font:600 15px var(--sans);cursor:pointer;padding:6px 0;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.note{font-family:var(--cursive);font-size:19px;color:var(--rosa-m);margin:14px 0 0;transform:rotate(-.6deg);display:inline-block}

/* quiz stages */
[hidden]{display:none!important}
.progress{height:8px;background:var(--rosa-t);border-radius:999px;overflow:hidden;margin:4px 0 10px}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--rosa-m),var(--lampone));border-radius:999px;transition:width .35s ease}
.qmeta{display:flex;justify-content:space-between;align-items:center;font-family:var(--cursive);font-size:22px;color:var(--rosa-m)}
.qtext{font-size:21px;font-weight:700;color:var(--prugna);margin:12px 0 18px;line-height:1.35}
.answers{display:grid;gap:10px}
.ans{appearance:none;text-align:left;background:#fff;border:2px solid rgba(183,118,138,.28);border-radius:14px;padding:14px 14px 14px 12px;font:600 16.5px/1.35 var(--sans);color:var(--prugna);cursor:pointer;display:flex;gap:12px;align-items:flex-start;transition:border-color .12s,background .12s,transform .12s}
.ans b{font-family:var(--cursive);font-size:24px;line-height:1;color:var(--lampone);min-width:22px;padding-top:1px;font-weight:700}
.ans:hover{border-color:var(--rosa-m);background:#fff9fc}
.ans.picked{border-color:var(--lampone);background:var(--rosa-t);transform:scale(.995)}
.qnav{display:flex;justify-content:space-between;align-items:center;margin-top:14px;gap:12px}
.qnav .hint{display:none;font-size:20px;color:var(--rosa-m)}
.qhint{font-family:var(--cursive);font-size:20px;color:var(--rosa-m);margin:-8px 0 12px}

/* email gate */
.gate h3{font-size:40px;color:var(--prugna);margin-bottom:8px}
.gate h3 em{font-style:normal;color:var(--lampone)}
.gate p{margin:0 0 18px;font-size:17px}
.gate label{display:block;font-weight:700;font-size:15px;margin-bottom:6px;color:var(--rosa-m)}
.gate input[type=email]{width:100%;font:600 18px var(--sans);padding:14px 16px;border-radius:14px;border:2px solid rgba(183,118,138,.4);background:#fff;color:var(--prugna);margin-bottom:12px;outline:none}
.gate input[type=email]:focus{border-color:var(--lampone);box-shadow:0 0 0 4px var(--rosa-t)}
.pact{font-family:var(--cursive);font-size:19px;color:var(--rosa-m);margin:14px 0 0;line-height:1.25}
.gate .consent{display:flex;gap:10px;align-items:flex-start;font-weight:600;font-size:15px;color:var(--prugna);margin:4px 0 0;cursor:pointer}
.gate .consent input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--lampone);flex:none}
.gate .consent a{color:var(--rosa-m)}
.ferr{margin:12px 0 0;font-size:15px;font-weight:700;color:var(--lampone)}

/* ---------- books ---------- */
.books{padding:10px 0 40px}
.books h2{font-size:42px;margin-bottom:6px}
.books .lead{margin:0 0 20px;font-size:17px;color:var(--rosa-m);font-weight:600}
.grid{display:grid;gap:18px}
.book{display:grid;grid-template-columns:118px 1fr;gap:16px;align-items:start;padding:18px}
.book img{border-radius:6px;box-shadow:0 8px 20px rgba(86,45,54,.22);transform:rotate(-2deg)}
.book h3{font-size:31px;color:var(--prugna)}
.book h3 span{color:var(--lampone)}
.book p{margin:6px 0 12px;font-size:15.5px;line-height:1.45}
.book .btn{width:auto;padding:13px 20px;font-size:16px}
.book .also{font-size:13.5px;color:var(--rosa-m);margin:10px 0 0;font-weight:600}
.book .also a{color:var(--rosa-m)}
.book.soon{border:2px dashed rgba(183,118,138,.35);background:transparent;box-shadow:none}
.book.soon .ph{width:118px;aspect-ratio:118/178;border-radius:6px;background:var(--rosa-t)}

/* ---------- video + social ---------- */
.video{padding:6px 0 40px}
.video h2{font-size:42px;margin-bottom:14px}
.frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--prugna);box-shadow:var(--shadow)}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.frame .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--crema);font-family:var(--cursive);font-size:30px;background:radial-gradient(ellipse at 50% 40%,rgba(236,175,202,.35),transparent 60%),var(--prugna)}
.frame .ph i{width:76px;height:76px;border-radius:50%;background:var(--lampone);display:grid;place-items:center;margin-bottom:10px}
.frame .ph i::after{content:"";border-left:26px solid #fff;border-top:15px solid transparent;border-bottom:15px solid transparent;margin-left:6px}
.social{display:flex;gap:14px;justify-content:center;margin-top:20px}
.social a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--prugna);font-weight:700;font-size:15px;background:var(--crema-2);padding:10px 16px;border-radius:999px;box-shadow:var(--shadow)}
.social svg{width:22px;height:22px;fill:var(--lampone)}

/* ---------- footer ---------- */
footer{background:var(--prugna);color:var(--crema);padding:34px 0 40px;font-size:14px;line-height:1.6;text-align:center}
footer .sig{font-family:var(--cursive);font-size:30px;margin-bottom:8px;color:var(--rosa)}
footer p{margin:6px auto;max-width:560px;opacity:.9}
footer .disc{font-family:var(--cursive);font-size:20px;color:var(--rosa);opacity:1}
footer a{color:var(--rosa)}
footer .draft{outline:1px dashed rgba(236,175,202,.6);padding:6px 10px;border-radius:8px;opacity:.75}

/* thank-you */
.ty{padding:26px 0 30px;text-align:center}
.ty h2{font-size:48px}
.ty p{font-size:18px;max-width:520px;margin:10px auto 0}

/* ---------- desktop ---------- */
@media (min-width:720px){
  body{font-size:18px}
  .hero{padding:60px 0 30px}
  .hero .photo{width:176px;height:176px}
  .hero h1{font-size:68px}
  .card{padding:36px 40px}
  .quiz h2{font-size:58px}
  .btn{width:auto;min-width:260px}
  .answers{gap:12px}
  .ans{font-size:17.5px;padding:16px 18px}
  .grid{grid-template-columns:1fr 1fr}
  .book{grid-template-columns:150px 1fr;padding:24px}
  .books h2,.video h2{font-size:50px}
  .gate h3{font-size:48px}
  .gate .row{display:flex;gap:12px;align-items:stretch}
  .gate .row input[type=email]{margin:0;flex:1}
  .gate .row .btn{width:auto;white-space:nowrap}
  .gate .pact{margin-top:16px}
  .qhint{display:none}
  .qnav .hint{display:inline}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}