/* Детское фэнтези: ночное небо, золотые звёзды, пергамент, мягкие формы */
:root{
  --ink:#2c2347;
  --ink-soft:#5b5278;
  --paper:#fbf3e4;
  --card:#fffaf0;
  --line:#e8d7b4;
  --accent:#8e4bd1;
  --accent-2:#2a9d8f;
  --gold:#f0b429;
  --rose:#e8648b;
  --night-1:#1b1447;
  --night-2:#3a2a82;
  --night-3:#6a3fb5;
  --shadow:0 2px 0 rgba(120,80,20,.08),0 10px 24px rgba(58,42,130,.12);
  --serif:"Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif;
  --round:ui-rounded,"Nunito","Trebuchet MS","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 12% 8%,rgba(240,180,41,.10) 0 120px,transparent 121px),
    radial-gradient(circle at 92% 30%,rgba(232,100,139,.08) 0 160px,transparent 161px),
    var(--paper);
  color:var(--ink);
  font:17px/1.7 var(--round);
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}

/* ---------- шапка: ночное небо ---------- */
header.hero{
  position:relative;overflow:hidden;color:#fff6dc;
  padding:64px 0 120px;
  background:
    radial-gradient(1.5px 1.5px at 8% 22%,#fff 99%,transparent),
    radial-gradient(2px 2px at 20% 60%,#ffe9a8 99%,transparent),
    radial-gradient(1.5px 1.5px at 33% 15%,#fff 99%,transparent),
    radial-gradient(2.5px 2.5px at 47% 48%,#ffe9a8 99%,transparent),
    radial-gradient(1.5px 1.5px at 58% 12%,#fff 99%,transparent),
    radial-gradient(2px 2px at 71% 36%,#fff 99%,transparent),
    radial-gradient(1.5px 1.5px at 83% 70%,#ffe9a8 99%,transparent),
    radial-gradient(2px 2px at 92% 18%,#fff 99%,transparent),
    radial-gradient(1.5px 1.5px at 14% 82%,#fff 99%,transparent),
    radial-gradient(1.5px 1.5px at 64% 78%,#fff 99%,transparent),
    linear-gradient(180deg,var(--night-1) 0%,var(--night-2) 60%,var(--night-3) 100%);
}
/* луна */
header.hero::before{
  content:"";position:absolute;top:34px;right:8%;
  width:84px;height:84px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fffbe6,#ffe08a 70%);
  box-shadow:0 0 40px 12px rgba(255,224,138,.45);
}
/* холмы */
header.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:110px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 110' preserveAspectRatio='none'%3E%3Cpath d='M0 70 Q150 10 300 55 T600 50 T900 40 T1200 60 V110 H0Z' fill='%232a1f66'/%3E%3Cpath d='M0 90 Q200 45 400 80 T800 75 T1200 85 V110 H0Z' fill='%23fbf3e4'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat;
}
header.hero .wrap{position:relative;z-index:1}
.kicker{
  display:inline-block;margin:0 0 16px;padding:4px 14px;border-radius:999px;
  background:rgba(240,180,41,.18);border:1px solid rgba(240,180,41,.5);
  color:var(--gold);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
h1{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(32px,7vw,58px);line-height:1.1;margin:0 0 16px;font-weight:700;
  color:#fff;text-shadow:0 3px 0 rgba(27,20,71,.55),0 0 28px rgba(240,180,41,.35);
}
.sub{font-size:clamp(15px,2.4vw,19px);margin:0;max-width:36em;color:#f1e6ff}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.meta span{
  font-size:13px;padding:6px 13px;border-radius:999px;white-space:nowrap;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
}

/* ---------- разделы ---------- */
main{padding:28px 0 20px}
section{margin:0 0 60px}
h2{
  font-family:var(--serif);font-size:clamp(23px,4vw,32px);line-height:1.2;
  margin:0 0 8px;color:var(--night-2);
}
h2 .num{
  display:inline-grid;place-items:center;width:1.9em;height:1.9em;margin-right:12px;
  border-radius:50%;background:var(--gold);color:var(--night-1);
  font:700 .5em/1 var(--round);vertical-align:.25em;
  box-shadow:0 0 0 4px rgba(240,180,41,.25);
}
.lead{color:var(--ink-soft);margin:0 0 24px;max-width:62ch}

/* аннотация — страница сказки */
.annotation{
  background:var(--card);border:2px solid var(--line);border-radius:22px;
  padding:26px 28px;box-shadow:var(--shadow);position:relative;
}
.annotation::before{
  content:"✦";position:absolute;top:-16px;left:24px;font-size:26px;color:var(--gold);
  background:var(--paper);padding:0 8px;
}
.annotation p{margin:0 0 14px}
.annotation p:last-child{margin:0}
.annotation p:first-child{font-family:var(--serif);font-size:19px}
.annotation p:first-child::first-letter{
  float:left;font-size:3.3em;line-height:.85;padding:6px 8px 0 0;color:var(--accent);font-weight:700;
}

/* схема */
.schema{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.schema .box{
  background:var(--card);border:2px solid var(--line);border-radius:20px;
  padding:16px 18px;font-size:14.5px;box-shadow:var(--shadow);
}
.schema .box:nth-child(5n+1){border-color:#c9b3f0}
.schema .box:nth-child(5n+2){border-color:#9fdcd3}
.schema .box:nth-child(5n+3){border-color:#f6d98b}
.schema .box:nth-child(5n+4){border-color:#f4b3c7}
.schema .box:nth-child(5n+5){border-color:#b9c9f5}
.schema .box b{
  display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin-bottom:6px;
}
.timeline{
  list-style:none;margin:24px 0 0;padding:0 0 0 26px;position:relative;
  font-size:15px;color:var(--ink-soft);
}
.timeline::before{
  content:"";position:absolute;left:8px;top:6px;bottom:6px;
  border-left:3px dotted var(--gold);
}
.timeline li{position:relative;margin:0 0 12px}
.timeline li::before{
  content:"★";position:absolute;left:-26px;top:-1px;color:var(--gold);font-size:17px;
  background:var(--paper);line-height:1.2;
}
.timeline b{color:var(--ink)}

/* главы — волшебные свитки */
details.card{
  background:var(--card);border:2px solid var(--line);border-radius:20px;
  margin-bottom:12px;box-shadow:var(--shadow);overflow:hidden;
  transition:border-color .2s,transform .2s;
}
details.card:hover{transform:translateY(-1px)}
details.card[open]{border-color:#c9b3f0}
details.card summary{
  cursor:pointer;list-style:none;padding:16px 52px 16px 16px;
  font-family:var(--serif);font-weight:700;font-size:18px;position:relative;line-height:1.35;
  display:flex;align-items:center;gap:12px;
}
details.card summary::-webkit-details-marker{display:none}
details.card summary::after{
  content:"";position:absolute;right:18px;top:50%;width:11px;height:11px;margin-top:-8px;
  border-right:3px solid var(--accent);border-bottom:3px solid var(--accent);
  transform:rotate(45deg);transition:transform .2s;
}
details.card[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
details.card summary .ch{
  flex:none;min-width:3.6em;text-align:center;padding:4px 10px;border-radius:999px;
  background:linear-gradient(135deg,var(--night-2),var(--night-3));color:#fff6dc;
  font:700 12px/1.5 var(--round);letter-spacing:.04em;
}
details.card summary:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.body{padding:16px 20px 20px;border-top:2px dashed var(--line)}
.body p{margin:0 0 10px}
.body p:last-child{margin-bottom:0}
.body ul{margin:0;padding-left:22px}
.body li::marker{color:var(--gold)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0}
.tags i{
  font-style:normal;font-size:12.5px;padding:3px 11px;border-radius:999px;
  background:#efe4ff;border:1px solid #d6c2f5;color:var(--night-2);
}
.quote{
  margin:14px 0 0;padding:12px 16px;border-radius:14px;
  background:#fff1cc;border-left:5px solid var(--gold);
  font-family:var(--serif);font-style:italic;color:#6b4a0a;font-size:16px;
}
.lbl{
  font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-2);
  font-weight:700;display:block;margin:14px 0 4px;
}

/* рецензия */
.review{display:grid;gap:16px}
.rcard{
  background:var(--card);border:2px solid var(--line);border-radius:20px;
  padding:20px 24px;box-shadow:var(--shadow);
}
.rcard h3{margin:0 0 10px;font-family:var(--serif);font-size:20px;color:var(--night-2)}
.rcard ul{margin:0;padding-left:22px}
.rcard li{margin:0 0 9px}
.rcard li:last-child{margin:0}
.rcard li::marker{color:var(--rose)}
.verdict{
  background:linear-gradient(160deg,var(--night-1),var(--night-2));
  color:#f1e6ff;border-color:var(--gold);
}
.verdict h3{color:var(--gold)}
.verdict p{margin:0 0 10px}
.verdict p:last-child{margin:0}
.score{font-size:14px;color:#d9c9f7}

/* идеи — звёздные карточки */
.ideas{
  counter-reset:idea;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;
}
.ideas .idea{
  counter-increment:idea;background:var(--card);border:2px solid var(--line);
  border-radius:20px;padding:18px 18px 16px;position:relative;box-shadow:var(--shadow);
  transition:transform .2s;
}
.ideas .idea:nth-child(odd){transform:rotate(-.6deg)}
.ideas .idea:nth-child(even){transform:rotate(.6deg)}
.ideas .idea:hover{transform:rotate(0) translateY(-3px)}
.ideas .idea::before{
  content:counter(idea);
  position:absolute;top:-12px;right:14px;min-width:28px;height:28px;padding:0 6px;
  display:grid;place-items:center;border-radius:999px;
  background:var(--gold);color:var(--night-1);font-size:13px;font-weight:700;
  box-shadow:0 2px 0 rgba(120,80,20,.2);
}
.ideas .idea h4{margin:0 0 6px;font-family:var(--serif);font-size:17px;line-height:1.3;color:var(--night-2)}
.ideas .idea p{margin:0;font-size:14.5px;color:var(--ink-soft)}

/* дальше */
.next ol{margin:0;padding:0;list-style:none;counter-reset:n}
.next li{
  counter-increment:n;position:relative;margin:0 0 14px;padding:14px 18px 14px 62px;
  background:var(--card);border:2px solid var(--line);border-radius:20px;box-shadow:var(--shadow);
}
.next li::before{
  content:counter(n);position:absolute;left:16px;top:14px;width:32px;height:32px;
  display:grid;place-items:center;border-radius:50%;
  background:var(--accent);color:#fff;font-weight:700;
}
.next li b{font-family:var(--serif);color:var(--night-2)}

footer{
  border-top:3px dotted var(--gold);padding:28px 20px 48px;margin-top:20px;
  color:var(--ink-soft);font-size:14px;text-align:center;
}
footer p{margin:0 0 6px}
footer p:first-child::before{content:"✦ ";color:var(--gold)}
a{color:var(--accent)}

@media (max-width:560px){
  body{font-size:16px}
  header.hero{padding:44px 0 100px}
  header.hero::before{width:56px;height:56px;top:18px;right:6%}
  .annotation{padding:22px 18px}
  details.card summary{font-size:16px;padding-left:12px}
  .ideas .idea:nth-child(odd),.ideas .idea:nth-child(even){transform:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}

/* ночной режим: страница тоже становится сказочной ночью */
@media (prefers-color-scheme:dark){
  :root{
    --ink:#efe8ff;--ink-soft:#bfb3dd;--paper:#17123a;--card:#221b50;--line:#3d3380;
    --accent:#c79bff;--accent-2:#6fe0d0;
    --shadow:0 10px 24px rgba(0,0,0,.35);
    color-scheme:dark;
  }
  body{background:var(--paper)}
  header.hero::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 110' preserveAspectRatio='none'%3E%3Cpath d='M0 70 Q150 10 300 55 T600 50 T900 40 T1200 60 V110 H0Z' fill='%232a1f66'/%3E%3Cpath d='M0 90 Q200 45 400 80 T800 75 T1200 85 V110 H0Z' fill='%2317123a'/%3E%3C/svg%3E");
  }
  h2,.rcard h3,.ideas .idea h4,.next li b{color:#ffe08a}
  .annotation::before,.timeline li::before{background:var(--paper)}
  .tags i{background:#2e2570;border-color:#4a3fa0;color:#e4d8ff}
  .quote{background:#2e2a1a;color:#ffe9a8}
  details.card[open]{border-color:#7a5fd0}
  .verdict{background:linear-gradient(160deg,#120d33,#2a1f66)}
}