/* The AI Diaries — fan page styles
   Palette pulled from the book cover:
   teal #1a8a90, mustard #d6a93a, cherry #c64438, ink #1a1410, paper #f4ecd8 */

:root{
  --teal:#1a8a90;
  --teal-deep:#0e5b62;
  --teal-pale:#bfe0dd;
  --mustard:#d8a93a;
  --mustard-deep:#a87a1e;
  --cherry:#c64438;
  --grass:#5b8a3a;
  --plum:#6b4a8a;
  --ink:#1a1410;
  --ink-soft:#3a2f24;
  --paper:#f4ecd8;
  --paper-warm:#efe2c2;
  --rule:#a8c8d4;
  --margin-line:#d97b6b;
  --tape-yellow:#ffe680cc;
  --tape-pink:#ffb0c4cc;
  --tape-mint:#a8e6c8cc;
  --shadow-sm: 0 4px 10px -4px rgba(20,15,10,.25);
  --shadow-md: 0 12px 28px -16px rgba(20,15,10,.45), 0 4px 8px -4px rgba(20,15,10,.18);
  --shadow-lg: 0 24px 60px -28px rgba(20,15,10,.55), 0 8px 16px -8px rgba(20,15,10,.25);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  font-family:'Patrick Hand','Caveat',system-ui,sans-serif;
  color:var(--ink);
  font-size:20px;
  line-height:1.5;
  overflow-x:hidden;
  background:
    /* the red margin line, fixed at left */
    linear-gradient(to right, transparent 96px, var(--margin-line) 96px, var(--margin-line) 97px, transparent 98px),
    /* horizontal ruled lines */
    repeating-linear-gradient(to bottom, transparent 0 31px, var(--rule) 31px 32px),
    var(--paper);
  background-attachment: fixed;
}
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255,255,255,.35), transparent 70%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(120,80,30,.10), transparent 70%);
}
@media (max-width:720px){
  body{
    font-size:18px;
    background:
      linear-gradient(to right, transparent 32px, var(--margin-line) 32px, var(--margin-line) 33px, transparent 34px),
      repeating-linear-gradient(to bottom, transparent 0 27px, var(--rule) 27px 28px),
      var(--paper);
  }
}

/* ── Top bar / nav ── */
.topbar{
  position:relative; z-index:5;
  max-width:1100px; margin:0 auto;
  padding:18px 32px 6px 120px;
  display:flex; justify-content:space-between; align-items:center;
  font-family:'Patrick Hand', cursive;
  font-size:18px;
  flex-wrap:wrap; gap:12px;
}
.topbar a{ color:var(--ink); text-decoration:none; border-bottom:2px dashed transparent; padding-bottom:1px; }
.topbar a:hover{ border-bottom-color:var(--teal); color:var(--teal-deep); }
.crumb{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.crumb .arr{ color:#8a7a5a; }
.crumb .here{ color:var(--teal-deep); border-bottom:2px solid var(--teal); }
.topnav{ display:flex; gap:18px; flex-wrap:wrap; }
@media (max-width:720px){ .topbar{ padding:14px 18px 4px 48px; font-size:16px;} }

/* ── Page container ── */
.page{
  position:relative; z-index:1;
  max-width:1100px; margin:0 auto;
  padding:24px 40px 96px 120px;
}
@media (max-width:720px){ .page{ padding:16px 18px 64px 48px; } }

/* ── Type ── */
h1,h2,h3,h4{
  font-family:'Caveat',cursive;
  margin:0; line-height:1.05; letter-spacing:.5px;
  color:var(--ink);
}
h1{ font-size:clamp(54px,9vw,108px); font-weight:700; }
h2{ font-size:clamp(38px,5vw,64px); font-weight:700; }
h3{ font-size:clamp(28px,3.2vw,40px); font-weight:600; }
h4{ font-size:clamp(22px,2.4vw,28px); font-weight:600; }
.hand{ font-family:'Gloria Hallelujah',cursive; }
.type{ font-family:'Special Elite',monospace; letter-spacing:.5px; }
.uw{ text-decoration:underline; text-decoration-color:var(--mustard); text-decoration-thickness:5px; text-underline-offset:4px; }
.hl{ background:linear-gradient(transparent 55%, var(--tape-yellow) 55% 92%, transparent 92%); padding:0 4px; }
.hl-mint{ background:linear-gradient(transparent 55%, var(--tape-mint) 55% 92%, transparent 92%); padding:0 4px; }
p{ margin:.5em 0; }
small{ font-family:'Patrick Hand',cursive; color:var(--ink-soft); font-size:16px; }

/* ── Tape & sticky helpers ── */
.tape{
  position:absolute; width:130px; height:30px;
  background:var(--tape-yellow);
  box-shadow:0 2px 4px rgba(0,0,0,.10);
  transform:rotate(-6deg);
  pointer-events:none; z-index:3;
  background-image:linear-gradient(135deg, transparent 48%, rgba(255,255,255,.45) 50%, transparent 52%);
}
.tape.pink{ background-color:var(--tape-pink); }
.tape.mint{ background-color:var(--tape-mint); }
.tape.sm{ width:90px; height:22px; }

.sticky{
  background:#fff7a8;
  padding:20px 22px 26px;
  box-shadow:var(--shadow-md);
  position:relative;
  border-radius:1px 1px 18px 2px;
  font-family:'Gloria Hallelujah',cursive;
  font-size:18px;
  color:var(--ink);
}
.sticky.pink{ background:#ffd1dc; }
.sticky.mint{ background:#c6f0d9; }
.sticky.blue{ background:#cfe6ff; }
.sticky.peach{ background:#ffd9b8; }
.sticky::after{
  content:""; position:absolute; right:8px; bottom:6px; width:32px; height:18px;
  background:rgba(0,0,0,.04);
  filter:blur(2px);
}

/* ── Hero ── */
.hero{
  position:relative;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:48px;
  align-items:start;
  margin-top:24px;
  padding-bottom:48px;
}
@media (max-width:880px){ .hero{ grid-template-columns:1fr; gap:32px;} }

.hero-title{
  position:relative;
}
.kicker{
  display:inline-block;
  font-family:'Special Elite', monospace;
  font-size:14px; letter-spacing:2px;
  background:var(--ink); color:var(--paper);
  padding:6px 12px;
  transform:rotate(-2deg);
  box-shadow:3px 3px 0 var(--mustard);
}
.hero h1{
  margin-top:18px;
  color:var(--teal-deep);
  text-shadow: 3px 3px 0 var(--mustard);
}
.hero h1 .bug{ color:var(--cherry); display:inline-block; transform:rotate(-3deg); }
.hero .sub{
  font-family:'Gloria Hallelujah',cursive;
  font-size:clamp(20px,2.2vw,26px);
  color:var(--ink-soft);
  margin-top:14px;
  max-width:520px;
}
.byline{
  margin-top:22px;
  font-family:'Caveat',cursive;
  font-size:32px;
  color:var(--ink);
}
.byline .name{ color:var(--cherry); font-weight:700; }

/* Buy buttons */
.buy-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px;
  background:var(--mustard); color:var(--ink);
  font-family:'Caveat',cursive; font-weight:700; font-size:26px;
  text-decoration:none;
  border:2.5px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  transform:rotate(-1deg);
  transition:transform .15s ease, box-shadow .15s ease;
  cursor:pointer;
}
.btn:hover{ transform:rotate(-1deg) translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.btn:active{ transform:rotate(-1deg) translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.btn.teal{ background:var(--teal); color:#fff; }
.btn.cherry{ background:var(--cherry); color:#fff; transform:rotate(1.5deg); }
.btn.cherry:hover{ transform:rotate(1.5deg) translate(-2px,-2px); }
.btn.ghost{ background:transparent; }
.btn.sm{ padding:10px 16px; font-size:20px; box-shadow:3px 3px 0 var(--ink); }

/* Cover frame */
.cover-wrap{
  position:relative;
  justify-self:center;
  width:min(100%, 380px);
  transform:rotate(2.5deg);
}
.cover-wrap img{
  width:100%; height:auto; display:block;
  box-shadow:var(--shadow-lg);
  border-radius:2px;
}
.cover-wrap .tape{ top:-14px; left:50%; margin-left:-65px; transform:rotate(-4deg); }
.cover-wrap .stamp{
  position:absolute;
  bottom:-22px; right:-18px;
  background:var(--cherry); color:#fff;
  font-family:'Special Elite',monospace; font-size:13px;
  padding:8px 12px;
  transform:rotate(8deg);
  box-shadow:3px 3px 0 var(--ink);
  letter-spacing:1.5px;
}
.cover-wrap .arrow-note{
  position:absolute; left:-150px; top:30%;
  font-family:'Caveat',cursive; font-size:24px;
  color:var(--cherry); transform:rotate(-8deg);
  width:140px; text-align:right;
}
@media (max-width:880px){ .cover-wrap .arrow-note{ display:none; } }

/* Doodle helpers (svg in markup) */
.doodle{ position:absolute; pointer-events:none; }

/* ── Section blocks ── */
section{ position:relative; padding:64px 0 32px; }
section + section{ border-top:2px dashed rgba(26,20,16,.12); }

.eyebrow{
  display:inline-block;
  font-family:'Special Elite',monospace;
  font-size:14px; letter-spacing:3px;
  color:var(--ink-soft);
  background:var(--paper-warm);
  padding:4px 10px;
  border:1.5px dashed var(--ink-soft);
  margin-bottom:14px;
}

/* ── About / synopsis ── */
.about{
  display:grid; grid-template-columns: 1.4fr .8fr; gap:48px; align-items:start;
}
@media (max-width:880px){ .about{ grid-template-columns:1fr; } }
.about-card{
  background:var(--paper-warm);
  border:2px solid var(--ink);
  padding:28px 32px;
  box-shadow:6px 6px 0 var(--ink);
  font-size:20px;
  position:relative;
}
.about-card .corner{
  position:absolute; top:-16px; right:-16px;
  background:var(--mustard); color:var(--ink);
  font-family:'Special Elite',monospace; font-size:14px;
  padding:6px 10px; border:2px solid var(--ink);
  transform:rotate(6deg);
}
.facts{ display:grid; gap:14px; }
.fact{
  background:#fff;
  border:2px solid var(--ink);
  padding:14px 16px;
  font-family:'Patrick Hand',cursive;
  box-shadow:4px 4px 0 var(--ink);
  display:flex; gap:12px; align-items:center;
}
.fact .num{
  font-family:'Caveat',cursive; font-weight:700;
  color:var(--cherry);
  font-size:38px; line-height:1;
}
.fact:nth-child(2){ transform:rotate(1deg); }
.fact:nth-child(3){ transform:rotate(-1deg); }
.fact:nth-child(4){ transform:rotate(.5deg); }

/* ── BLEEP says (fake AI gag with claude.complete) ── */
.bleep{
  background:linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%);
  color:#fff;
  padding:32px 36px 36px;
  border-radius:24px;
  position:relative;
  box-shadow:var(--shadow-lg);
  margin-top:20px;
}
.bleep::before{ display:none; }
.bleep::after{ display:none; }
.bleep-avatar{
  position:absolute;
  top:-46px;
  left:-30px;
  width:130px;
  height:130px;
  border-radius:50%;
  border:4px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink), 0 0 0 4px #fff inset;
  background:#fff;
  transform:rotate(-6deg);
  z-index:2;
}
@media (max-width:640px){
  .bleep-avatar{ width:90px; height:90px; top:-32px; left:-12px; }
}
.bleep h3{ color:#fff; font-size:38px; padding-left:110px; min-height:90px; display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
@media (max-width:640px){
  .bleep h3{ padding-left:80px; min-height:60px; font-size:30px; }
}
.bleep .meter{
  display:inline-block;
  background:var(--cherry); color:#fff;
  font-family:'Special Elite',monospace; font-size:13px;
  padding:4px 10px;
  border:2px solid #fff;
  letter-spacing:1.5px;
  margin-left:8px;
  transform:rotate(-3deg);
}
.bleep .answer{
  font-family:'Special Elite',monospace;
  font-size:20px;
  background:rgba(0,0,0,.18);
  padding:18px 20px;
  border-radius:12px;
  margin-top:14px;
  min-height:90px;
  white-space:pre-wrap;
}
.bleep .answer .blink{ display:inline-block; width:10px; height:20px; background:#fff; vertical-align:-3px; animation: blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.bleep input{
  flex:1;
  background:rgba(255,255,255,.95); color:var(--ink);
  font-family:'Patrick Hand',cursive; font-size:20px;
  padding:12px 14px;
  border:2px solid #fff; border-radius:8px;
  outline:none;
}
.bleep .row{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.bleep .pill{
  background:rgba(255,255,255,.18); color:#fff;
  font-family:'Patrick Hand',cursive; font-size:16px;
  padding:6px 12px; border-radius:999px;
  border:1.5px dashed rgba(255,255,255,.6);
  cursor:pointer;
}
.bleep .pill:hover{ background:rgba(255,255,255,.3); }
.bleep small{ color:rgba(255,255,255,.85); }

/* ── Cast grid ── */
.cast{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:28px; margin-top:24px;
}
.card{
  background:#fff;
  border:2.5px solid var(--ink);
  padding:22px 22px 26px;
  box-shadow:6px 6px 0 var(--ink);
  position:relative;
}
.card:nth-child(odd){ transform:rotate(-1.2deg); }
.card:nth-child(even){ transform:rotate(1.2deg); }
.card:nth-child(3n){ transform:rotate(.6deg); }
.card .portrait{
  width:100%;
  background:#fffaef;
  border:2px solid var(--ink);
  margin-bottom:10px;
  display:block;
  overflow:hidden;
}
.card .portrait img{ width:100%; height:auto; display:block; mix-blend-mode:multiply; }
.card.teal .portrait{ background:var(--teal-pale); }
.card.cherry .portrait{ background:#fde0dc; }
.card.grass .portrait{ background:#dff0cf; }
.card.plum .portrait{ background:#e6dcef; }
.card.peach .portrait{ background:#ffe8d6; }
.card.mustard .portrait{ background:#fbeac0; }
.card .name{ font-family:'Caveat',cursive; font-size:34px; font-weight:700; line-height:1; }
.card .role{ font-family:'Special Elite',monospace; font-size:12px; letter-spacing:1.5px; color:var(--ink-soft); margin-top:4px; }
.card .quote{ margin-top:10px; font-family:'Gloria Hallelujah',cursive; font-size:17px; }
.card .quote::before{ content:"\201C"; }
.card .quote::after{ content:"\201D"; }

/* ── Sneak peek (book pages) ── */
.peek{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:20px;
}
@media (max-width:720px){ .peek{ grid-template-columns:1fr; } }
.peek-page{
  background:#fffaef;
  border:1.5px solid #d8c8a8;
  padding:28px 30px 30px;
  box-shadow:var(--shadow-md);
  font-family:'Patrick Hand',cursive;
  font-size:18px; line-height:1.55;
  position:relative;
  min-height:280px;
  background-image: repeating-linear-gradient(to bottom, transparent 0 27px, rgba(168,200,212,.45) 27px 28px);
  background-size:100% 28px;
  background-position:0 24px;
}
.peek-page .head{
  font-family:'Caveat',cursive; font-weight:700; font-size:32px;
  color:var(--cherry); margin-bottom:6px;
}
.peek-page .who{
  font-family:'Special Elite',monospace; font-size:13px; letter-spacing:2px;
  color:var(--ink-soft); margin-bottom:14px;
}
.peek-page:nth-child(1){ transform:rotate(-1deg); }
.peek-page:nth-child(2){ transform:rotate(1deg); }

/* ── Feedback wall ── */
.wall{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:24px; margin-top:24px;
}
.wall .sticky{ font-size:17px; }
.wall .sticky:nth-child(1){ transform:rotate(-2deg); }
.wall .sticky:nth-child(2){ transform:rotate(1.5deg); }
.wall .sticky:nth-child(3){ transform:rotate(-1deg); }
.wall .sticky:nth-child(4){ transform:rotate(2deg); }
.wall .sticky:nth-child(5){ transform:rotate(-1.5deg); }
.wall .sticky .sig{
  display:block; margin-top:10px;
  font-family:'Caveat',cursive; font-size:22px;
  color:var(--ink-soft);
}
.wall .stars{ color:var(--mustard-deep); letter-spacing:2px; }

/* ── Forms ── */
.form-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px;
}
@media (max-width:720px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{
  font-family:'Caveat',cursive; font-size:24px; font-weight:600;
}
.field input, .field textarea, .field select{
  font-family:'Patrick Hand',cursive; font-size:20px;
  background:#fffaef;
  border:2px solid var(--ink);
  padding:12px 14px;
  box-shadow:3px 3px 0 var(--ink);
  outline:none;
  color:var(--ink);
}
.field textarea{ min-height:140px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus{
  background:#fff7d6;
  box-shadow:5px 5px 0 var(--teal);
}
.full{ grid-column:1 / -1; }
.rating{ display:flex; gap:6px; font-size:36px; cursor:pointer; user-select:none; }
.rating .star{ color:#cbb98a; transition:transform .1s; }
.rating .star.on{ color:var(--mustard); }
.rating .star:hover{ transform:scale(1.15) rotate(-6deg); }

/* Book 2 poll */
.poll{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:18px; margin-top:20px;
}
.poll-opt{
  background:#fff; border:2.5px solid var(--ink); padding:18px;
  box-shadow:5px 5px 0 var(--ink);
  cursor:pointer; position:relative;
  transition: transform .15s, box-shadow .15s;
  font-family:'Patrick Hand',cursive;
}
.poll-opt:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); }
.poll-opt.on{ background:var(--mustard); }
.poll-opt h4{ font-family:'Caveat',cursive; font-size:30px; line-height:1; }
.poll-opt .pct{
  position:absolute; top:8px; right:10px;
  font-family:'Special Elite',monospace; font-size:13px;
  background:var(--ink); color:#fff; padding:2px 6px;
}
.poll-opt .bar{
  margin-top:10px; height:8px; background:#e6dcc4;
  border:1.5px solid var(--ink); position:relative; overflow:hidden;
}
.poll-opt .bar > span{
  position:absolute; left:0; top:0; bottom:0; background:var(--cherry);
  width:0%; transition:width .6s ease;
}

/* About author */
.author{
  display:grid; grid-template-columns: .9fr 1.4fr; gap:40px; align-items:center;
}
@media (max-width:720px){ .author{ grid-template-columns:1fr; } }
.polaroid{
  background:#fff; padding:14px 14px 56px;
  box-shadow:var(--shadow-md);
  border:1px solid #ddd;
  transform:rotate(-3deg);
  position:relative; max-width:280px;
  justify-self:center;
}
.polaroid .pic{
  aspect-ratio: 1/1.05; background: linear-gradient(135deg, var(--teal), var(--teal-deep));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:'Caveat',cursive; font-size:80px;
  border:1px solid rgba(0,0,0,.1);
}
.polaroid .cap{
  position:absolute; left:0; right:0; bottom:14px;
  text-align:center; font-family:'Caveat',cursive; font-size:24px;
  color:var(--ink-soft);
}

/* FAQ */
.faq{ display:grid; gap:14px; margin-top:20px; }
.faq details{
  background:#fffaef; border:2px solid var(--ink); padding:14px 18px;
  box-shadow:4px 4px 0 var(--ink);
  font-family:'Patrick Hand',cursive;
}
.faq summary{
  cursor:pointer; font-family:'Caveat',cursive; font-size:28px; font-weight:600;
  list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{
  content:"+"; display:inline-block; width:28px; color:var(--cherry); font-weight:700;
}
.faq details[open] summary::before{ content:"–"; }
.faq details[open]{ background:#fff7d6; }

/* Footer */
.foot{
  margin-top:80px; padding-top:24px;
  border-top:2px dashed rgba(26,20,16,.2);
  display:flex; justify-content:space-between; align-items:flex-end;
  flex-wrap:wrap; gap:12px;
  font-family:'Patrick Hand',cursive; font-size:17px;
  color:var(--ink-soft);
}
.foot a{ color:var(--teal-deep); }
.foot .pageno{
  font-family:'Caveat',cursive; font-size:24px; color:var(--ink-soft);
  transform:rotate(-2deg);
}

/* Doodle SVG colors */
.ink{ stroke:var(--ink); fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* tiny page-number indicator like book interior */
.pgnum{
  display:inline-block;
  font-family:'Caveat',cursive; font-size:22px; color:var(--ink-soft);
  margin-bottom:6px;
}


/* responsive tape positions */
@media (max-width:720px){
  .tape{ width:90px; height:20px; }
}