/* ============================================================
   John Dollhouse — «Скрапбук-дневник»
   Тёплая бумага, ленты-васи, полароиды, рукописные вставки.
   Только системные шрифты. Mobile-first.
   ============================================================ */
:root{
  --paper:#FAF4E5; --paper-2:#F2E9D4; --paper-3:#FDF9EF;
  --ink:#43384A; --ink-soft:#6E6075; --line:#D8CBB4;
  --red:#D9536B; --red-deep:#B23A52; --rose:#F2A6B0;
  --lav:#B7A6E8; --blue:#9DB8E8; --mint:#9BC9A8; --gold:#E8B964;
  --serif:Georgia,"Times New Roman",Times,serif;
  --body:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --hand:"Segoe Script","Bradley Hand","Comic Sans MS",cursive;
  --r:14px; --shadow:0 3px 10px rgba(67,56,74,.14);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink);
  font:16px/1.72 var(--body);
  background:
    repeating-linear-gradient(45deg, rgba(217,211,189,.10) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-45deg, rgba(217,211,189,.08) 0 2px, transparent 2px 18px),
    var(--paper);
  min-height:100vh;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--red-deep); text-decoration-thickness:2px; text-underline-offset:3px}
a:hover{color:var(--red)}
h1,h2,h3,h4{font-family:var(--serif); line-height:1.25; margin:.4em 0}
h1{font-size:clamp(1.7rem,4.5vw,2.5rem)}
h2{font-size:clamp(1.3rem,3.4vw,1.75rem); margin-top:1.6em}
h3{font-size:1.15rem}
.container{max-width:920px; margin-inline:auto; padding:0 18px}

/* --- шапка-скрапбук --- */
.masthead{position:relative; border-bottom:3px dashed var(--line); padding:26px 0 14px; margin-bottom:22px}
.masthead::before,.masthead::after{content:"✿"; position:absolute; top:-6px; color:var(--rose); font-size:18px}
.masthead::before{left:16px} .masthead::after{right:16px}
.brand{text-align:center}
.brand .logo{font-family:var(--hand); font-size:clamp(1.5rem,5vw,2.2rem); color:var(--red-deep); line-height:1.1}
.brand .logo b{font-family:var(--serif); font-weight:700; color:var(--ink)}
.brand .tag{font-size:.86rem; color:var(--ink-soft); letter-spacing:.04em}
.tape{position:absolute; width:96px; height:22px; opacity:.9; box-shadow:0 1px 3px rgba(0,0,0,.12); pointer-events:none; z-index:0}
.tape.t1{left:12px; top:-9px; background:repeating-linear-gradient(45deg,var(--rose) 0 8px,#F7C7CF 8px 16px); transform:rotate(-5deg)}
.tape.t2{right:12px; top:-9px; background:repeating-linear-gradient(-45deg,var(--blue) 0 8px,#CBD6E8 8px 16px); transform:rotate(5deg)}
.nav{display:flex; flex-wrap:wrap; gap:2px 6px; justify-content:center; margin:18px 0 4px; font-family:var(--serif)}
.nav a{padding:4px 10px; border-radius:20px; color:var(--ink); text-decoration:none; border:1px solid transparent; font-size:.98rem}
.nav a:hover{background:var(--paper-3); border-color:var(--line)}
.nav a.cur{background:var(--ink); color:var(--paper); border-color:var(--ink)}

/* --- крошки (внутри контейнера) --- */
.crumbs{font-size:12px; color:var(--ink-soft); margin:0 0 16px; letter-spacing:.02em}
.crumbs a{color:var(--ink-soft); text-decoration:none; border-bottom:1px dotted var(--line)}
.crumbs a:hover{color:var(--red-deep)}
.crumbs .sep{margin:0 6px; color:var(--line)}

/* --- карточки и детали --- */
.card{background:var(--paper-3); border:1.5px solid var(--line); border-radius:var(--r); padding:18px; box-shadow:var(--shadow); margin:14px 0}
.card.tape-top{position:relative; margin-top:26px}
.card.tape-top::before{content:""; position:absolute; top:-13px; left:50%; transform:translateX(-50%) rotate(-3deg); width:120px; height:24px; background:repeating-linear-gradient(45deg,var(--lav) 0 10px,var(--rose) 10px 20px); opacity:.8; box-shadow:0 1px 3px rgba(0,0,0,.12)}
.note{border-left:5px solid var(--gold); background:var(--paper-2); padding:10px 14px; border-radius:0 10px 10px 0; font-size:.92rem; margin:14px 0}
.note.ok{border-left-color:var(--mint)}
.note.warn{border-left-color:var(--red)}
.mark{display:inline-block; font-family:var(--hand); color:var(--red-deep); font-size:.92rem; transform:rotate(-2deg)}

/* --- полароид --- */
.polaroid{background:#fff; padding:12px 12px 16px; box-shadow:0 4px 12px rgba(67,56,74,.18); border:1px solid #eee; transform:rotate(-1.5deg); margin:22px auto; max-width:760px}
.polaroid img{width:100%}
.polaroid .cap,.polaroid figcaption{font-family:var(--hand); color:var(--ink-soft); font-size:1rem; text-align:center; margin-top:10px}
.polaroid.rotate-r{transform:rotate(1.5deg)}

/* --- вертикальный список скриншотов (запрещён горизонтальный скролл) --- */
.diary-shots{display:flex; flex-direction:column; gap:22px; margin:22px 0}
.diary-shots figure{background:#fff; padding:10px 10px 8px; box-shadow:var(--shadow); border:1px solid #eee; margin:0}
.diary-shots img{width:100%}
.diary-shots figcaption{font-size:.82rem; color:var(--ink-soft); margin-top:6px; line-height:1.4}
.diary-shots figcaption .by{font-family:var(--hand); font-size:.9rem; color:var(--red-deep)}

/* --- кнопки --- */
.btn{display:inline-block; font-family:var(--serif); font-weight:700; font-size:1.05rem;
  background:var(--red); color:#fff !important; text-decoration:none; padding:12px 22px; border-radius:12px;
  box-shadow:0 4px 0 var(--red-deep),0 6px 12px rgba(178,58,82,.25); border:none; cursor:pointer}
.btn:hover{background:var(--red-deep); transform:translateY(1px); box-shadow:0 3px 0 #8F2E42,0 5px 10px rgba(178,58,82,.22)}
.btn.ghost{background:transparent; color:var(--ink) !important; box-shadow:0 0 0 2px var(--ink); border-radius:12px}
.btn.ghost:hover{background:var(--paper-2)}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; margin:18px 0}

/* --- таблицы --- */
table{width:100%; border-collapse:collapse; background:var(--paper-3); margin:16px 0; font-size:.95rem}
th{background:var(--rose); color:var(--ink); font-family:var(--serif); text-align:left; padding:9px 12px}
td{padding:9px 12px; border-bottom:1px dashed var(--line); vertical-align:top}
td .badge{vertical-align:middle}
tr:nth-child(even) td{background:rgba(242,166,176,.10)}
code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; background:var(--paper-2); border:1px solid var(--line); padding:1px 6px; border-radius:6px; font-size:.9em}
.badge{display:inline-block; font-size:.8rem; font-weight:700; padding:3px 10px; border-radius:20px; color:#fff; background:var(--mint); white-space:nowrap; margin:2px 0}
.badge.warn{background:var(--gold); color:var(--ink)}
.badge.red{background:var(--red)}

/* --- сетки --- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; margin:18px 0}
.ch-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin:18px 0}
.tile{background:var(--paper-3); border:1.5px solid var(--line); border-radius:var(--r); padding:16px; box-shadow:var(--shadow); text-decoration:none; color:var(--ink); display:block; position:relative; transition:transform .15s}
.tile:hover{transform:translateY(-3px)}
.tile .num{position:absolute; top:10px; right:14px; font-family:var(--hand); font-size:1.5rem; color:var(--rose)}
.tile h3{margin:.2em 0 .3em; color:var(--red-deep); padding-right:22px}
.tile p{margin:0; font-size:.92rem; color:var(--ink-soft)}

/* --- FAQ accordion --- */
details.faq{background:var(--paper-3); border:1.5px solid var(--line); border-left:6px solid var(--rose); border-radius:10px; margin:10px 0; padding:10px 16px}
details.faq:nth-of-type(2n){border-left-color:var(--lav)}
details.faq:nth-of-type(3n){border-left-color:var(--mint)}
details.faq:nth-of-type(4n){border-left-color:var(--gold)}
details.faq summary{cursor:pointer; font-family:var(--serif); font-weight:700; font-size:1.02rem; list-style:none}
details.faq summary::before{content:"✎ "; color:var(--rose)}
details.faq[open] summary::before{content:"✎ "}
details.faq p{margin:.5em 0 0}

/* --- футер одной строкой --- */
.sitefoot{border-top:3px dashed var(--line); margin-top:46px; padding:18px 0 26px; text-align:center}
.sitefoot .links{font-family:var(--serif); font-size:.95rem}
.sitefoot .links a{color:var(--ink); text-decoration:none; margin:0 4px}
.sitefoot .links a:hover{color:var(--red-deep)}
.sitefoot .disc{font-size:.78rem; color:var(--ink-soft); margin-top:10px; line-height:1.5; max-width:640px; margin-inline:auto}

/* --- главная: хиро компактный в контейнере --- */
.hero{background:var(--paper-3); border:2px solid var(--line); border-radius:16px; padding:26px 22px; margin:0 0 8px; position:relative; text-align:center}
.hero h1{margin:.2em 0 .3em}
.hero .lede{max-width:640px; margin:0 auto 8px; color:var(--ink-soft)}
.hero .stamp{display:inline-block; font-family:var(--hand); font-size:1.1rem; color:var(--red-deep); border:2px dashed var(--red); border-radius:50%; width:96px; height:96px; line-height:1.1; padding:18px 6px; margin-bottom:10px; background:rgba(242,166,176,.15)}
.chip{display:inline-block; background:var(--paper-2); border:1px solid var(--line); border-radius:20px; padding:3px 12px; font-size:.85rem; margin:3px}

/* 404 */
.big404{font-family:var(--serif); font-size:clamp(3rem,12vw,5.5rem); color:var(--rose); text-align:center; margin:.2em 0}
.doodle{text-align:center; font-size:2.2rem; letter-spacing:.3em; margin:6px 0}

.meta-line{font-size:.85rem; color:var(--ink-soft)}
ol.steps li{margin:8px 0}
.step-tag{font-family:var(--hand); color:var(--red-deep)}

@media (max-width:560px){
  .container{padding:0 12px}
  .btn-row .btn{width:100%; text-align:center}
  .masthead{padding-top:22px}
}