:root {
  --kraft: #d6bf92;
  --page: #e6d6b2;
  --ink: #2a2017;
  --pencil: #5a4a3a;
  --stamp: #a3271f;
  --tape: rgba(245, 236, 200, .72);
  --desk: #3b2a1c;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); font: 400 1.0625rem/1.75 'Special Elite', 'Courier New', monospace;
  background: var(--desk) radial-gradient(ellipse at 50% 0, #5b412a, var(--desk) 70%); padding: 32px 12px 48px; min-height: 100vh; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--stamp); }
:focus-visible { outline: 3px dashed var(--stamp); outline-offset: 3px; }

.book { max-width: 980px; margin: 0 auto; background: var(--page);
  background-image: repeating-linear-gradient(transparent 0 31px, rgba(90,74,58,.18) 31px 32px),
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.35), transparent 50%),
    radial-gradient(ellipse at 90% 90%, rgba(120,80,30,.25), transparent 60%);
  box-shadow: 0 30px 60px rgba(0,0,0,.55), inset 28px 0 30px -24px rgba(60,40,20,.5);
  padding: 56px clamp(20px, 6vw, 72px) 64px; border-radius: 4px 12px 12px 4px; position: relative; }
.book::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: #7a2a1c; border-radius: 4px 0 0 4px; }

.hand { font-family: 'Caveat', cursive; color: var(--pencil); }
.cover { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.cover h1 { margin: 0; }
.cover h1 img { width: min(420px, 100%); transform: rotate(-2deg); }
.entry-date { font-size: .9375rem; color: var(--pencil); }
.cover p { font-size: 1.125rem; margin: 18px 0 22px; max-width: 30em; }
.stores { display: flex; gap: 12px; flex-wrap: wrap; }
.stores img { height: 48px; width: auto; }

.polaroid { background: #f7f1e1; padding: 12px 12px 44px; box-shadow: 0 10px 22px rgba(40,25,10,.35); position: relative; transform: rotate(3deg); }
.polaroid figcaption { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font: 700 1.5rem/1 'Caveat', cursive; color: var(--ink); }
.polaroid::before { content: ''; position: absolute; top: -14px; left: 50%; width: 110px; height: 30px; margin-left: -55px; background: var(--tape); transform: rotate(-4deg); box-shadow: 0 1px 2px rgba(0,0,0,.15); }

.stamp { display: inline-block; border: 3px solid var(--stamp); color: var(--stamp); padding: 4px 14px; font-size: 1.25rem; transform: rotate(-6deg); opacity: .85; border-radius: 4px; margin-top: 24px; }

h2 { font: 700 2.5rem/1.1 'Caveat', cursive; margin: 0 0 8px; color: var(--ink); }
.entries { margin-top: 72px; }
.entry { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid rgba(90,74,58,.35); }
.entry time { color: var(--stamp); font-size: .9375rem; padding-top: 4px; }
.entry h3 { margin: 0 0 4px; font: 700 1.75rem/1.2 'Caveat', cursive; }
.entry p { margin: 0; max-width: 36em; }

.districts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 36px 0 12px; }
.districts .polaroid:nth-child(1) { transform: rotate(-3deg); }
.districts .polaroid:nth-child(2) { transform: rotate(2deg) translateY(12px); }
.districts .polaroid:nth-child(3) { transform: rotate(-1deg); }
.districts .polaroid figcaption { font-size: 1.25rem; }

.community-section { margin-top: 72px; }
.community { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; margin-top: 20px; }
.channel { position: relative; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: #fff; border-radius: 14px; padding: 24px; background: var(--c); box-shadow: 0 6px 0 var(--s); transition: transform .15s, box-shadow .15s; }
.channel:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--s); }
.channel:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--s); }
.channel svg { fill: #fff; flex: none; }
.channel svg.logo { width: 40px; height: 40px; margin-bottom: 14px; }
.channel svg.bg { position: absolute; right: -30px; bottom: -30px; width: 170px; height: 170px; opacity: .12; transform: rotate(-12deg); }
.channel b { font: 700 2rem/1.1 'Caveat', cursive; }
.channel span { margin: 6px 0 18px; max-width: 320px; position: relative; font-size: .9375rem; line-height: 1.6; }
.channel .go { margin-top: auto; align-self: flex-start; background: rgba(0,0,0,.2); padding: 6px 14px; border-radius: 10px; }
.channel.discord { --c: #5865f2; --s: #3c45a5; }
.channel.instagram { --c: linear-gradient(135deg, #d62976, #c13584 50%, #833ab4); --s: #6a1f8e; }
.channel.facebook { --c: #0e65d9; --s: #0a4ca6; }
@media (max-width: 860px) { .community { grid-template-columns: 1fr 1fr; } .channel.discord { grid-column: span 2; } }
@media (max-width: 560px) { .community { grid-template-columns: 1fr; } .channel.discord { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) { .channel { transition: none; } }

.back { margin-top: 72px; display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.back .polaroid { transform: rotate(-2deg); max-width: 300px; justify-self: center; }

footer { max-width: 980px; margin: 28px auto 0; text-align: center; color: var(--kraft); font-size: .9375rem; }
footer a { color: var(--kraft); margin: 0 10px; }

@media (max-width: 760px) {
  .cover, .back { grid-template-columns: 1fr; }
  .districts { grid-template-columns: 1fr 1fr; }
  .entry { grid-template-columns: 1fr; gap: 4px; }
}

.places h2 { margin-top: 64px; }
.places .more { font-size: 1.5rem; }
.sprite { position: absolute; width: 0; height: 0; }

/* Subpages */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head img { width: 200px; transform: rotate(-2deg); }
.page-head .back-link { font-size: .9375rem; }
.page-title { margin-top: 48px; }
.page-title h1 { font: 700 clamp(2.75rem, 7vw, 3.75rem)/1 'Caveat', cursive; margin: 0 0 8px; }
.page-title p { margin: 0; max-width: 36em; color: var(--pencil); }

.doc { max-width: 46em; margin-top: 40px; font-size: 1rem; }
.doc h2 { font-size: 2rem; margin: 48px 0 12px; }
.doc p { margin: 0 0 12px; }
.doc ol, .doc ul { margin: 0 0 12px; padding-left: 1.75em; }
.doc li { margin-bottom: 10px; padding-left: 4px; }
.doc li ol, .doc li ul { margin: 10px 0 0; }
.doc li::marker { color: var(--stamp); }

.events { list-style: none; padding: 0; margin: 40px 0 0; max-width: 46em; }
.events li { display: grid; grid-template-columns: 200px 1fr auto; gap: 8px 24px; align-items: baseline; padding: 14px 0; border-top: 1px solid rgba(90,74,58,.35); }
.events time { color: var(--stamp); font-size: .9375rem; }
.events .name { font: 700 1.75rem/1.2 'Caveat', cursive; text-transform: capitalize; }
.events .past { color: var(--pencil); opacity: .6; }
.events .past .name { text-decoration: line-through; text-decoration-thickness: 2px; }
.events .stamp { margin: 0; font-size: 1rem; padding: 0 10px; }
.events-status { margin-top: 40px; color: var(--pencil); }

.warning { margin-top: 32px; transform: rotate(-2deg); }
.steps { list-style: none; padding: 0; margin: 40px 0 0; max-width: 46em; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid rgba(90,74,58,.35); counter-increment: step; }
.steps li::before { content: counter(step); font: 700 2.5rem/1 'Caveat', cursive; color: var(--stamp); }
.steps h2 { font-size: 1.75rem; margin: 0 0 4px; }
.steps p { margin: 0; }

@media (max-width: 760px) {
  .events li { grid-template-columns: 1fr auto; }
  .events time { grid-column: 1 / -1; }
}

.faq { margin-top: 72px; max-width: 46em; }
.faq details { border-top: 1px solid rgba(90,74,58,.35); }
.faq details:last-of-type { border-bottom: 1px solid rgba(90,74,58,.35); }
.faq summary { cursor: pointer; padding: 14px 0; font: 700 1.625rem/1.25 'Caveat', cursive; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--stamp); font-family: 'Special Elite', monospace; }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { margin: 0 0 16px; max-width: 40em; }

.classic { margin: 56px 0 0 auto; max-width: 440px; background: #f4e27a; padding: 22px 26px; transform: rotate(-1.5deg); box-shadow: 0 8px 16px rgba(40,25,10,.3); }
.classic h2 { font-size: 2rem; }
.classic p { margin: 0 0 10px; }
.classic a { color: var(--ink); font-weight: 400; }