:root{--paper:#FBF7EF;--ink:#1F1A17;--muted:#6B635B;--line:#E6DDCC;--red:#E4572E;--sky:#DCEBF2;--leaf:#DCEBD6;--sun:#FCE7B2}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--ink)}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.hand{font-family:Caveat,cursive;font-weight:700}
header.top{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px 22px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo img{width:46px}
.logo span{font:900 1.5rem/1 Fraunces,Georgia,serif;letter-spacing:-.02em;display:flex;flex-direction:column}
.logo small{font:700 1rem Caveat,cursive;color:var(--red);letter-spacing:0}
header nav{display:flex;gap:22px;flex-wrap:wrap;font-weight:500}
header nav a{text-decoration:none;color:var(--muted)}
header nav a.on,header nav a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:3px;text-underline-offset:6px}

/* hero */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:40px 22px 60px}
.title{font:900 clamp(3.6rem,10vw,7.6rem)/.86 Fraunces,Georgia,serif;letter-spacing:-.045em;margin:0}
.title span{display:block}
.title span:nth-child(2){color:var(--red);font-style:italic;font-weight:400}
.tag{font:700 clamp(1.6rem,3vw,2.2rem) Caveat,cursive;margin:22px 0 0;transform:rotate(-2deg);display:inline-block}
.tag:after{content:"";display:block;height:5px;margin-top:2px;background:var(--red);border-radius:4px;transform:rotate(1deg)}

/* photo frames: drop real photos in public/photos and swap the <img> */
.photo{position:relative;background:#fff;padding:14px 14px 50px;box-shadow:0 18px 40px -22px rgba(31,26,23,.45);transform:rotate(1.5deg)}
.photo.tilt-l{transform:rotate(-2deg)}
.photo .pic{aspect-ratio:4/5;background:var(--sky);display:grid;place-items:center;overflow:hidden}
.photo .pic.leaf{background:var(--leaf)}.photo .pic.sun{background:var(--sun)}
.photo .pic img{width:70%}
.photo .pic img.real{width:100%;height:100%;object-fit:cover}
.photo figcaption{color:var(--ink);position:absolute;left:0;right:0;bottom:12px;text-align:center;font:700 1.35rem Caveat,cursive}
.tape{position:absolute;top:-12px;left:50%;width:110px;height:28px;margin-left:-55px;background:rgba(252,231,178,.85);transform:rotate(-4deg)}

section{padding:70px 0}
section.band{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
h2{font:900 clamp(2.2rem,5vw,3.4rem)/1 Fraunces,Georgia,serif;letter-spacing:-.03em;margin:0 0 14px}
h2 .hand{color:var(--red);font-size:.7em;display:block;margin-bottom:6px;letter-spacing:0}
.intro{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.prose{font-size:1.2rem;max-width:58ch}
.prose p{margin:0 0 18px}
.prose .kicker{font:700 1.8rem Caveat,cursive;color:var(--red)}
.lede{font-size:1.2rem;color:var(--muted);max-width:60ch;margin:0 0 34px}

/* moments / files */
.moments{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.moment{background:#fff;border:1px solid var(--line);border-radius:4px;padding:22px 22px 24px;position:relative}
.moment .date{font:700 1.2rem Caveat,cursive;color:var(--red)}
.moment p{font:400 1.3rem/1.35 Fraunces,Georgia,serif;margin:6px 0 0}
.moment.file{border-left:6px solid var(--ink)}
.moment .stamp{position:absolute;top:14px;right:14px;font:600 .7rem Inter;letter-spacing:.14em;text-transform:uppercase;border:2px solid var(--red);color:var(--red);padding:2px 7px;transform:rotate(6deg)}

/* cast */
.cast{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.person{text-align:center}
.person .photo{transform:rotate(-1.5deg);margin-bottom:18px}
.person:nth-child(even) .photo{transform:rotate(2deg)}
.person h3{font:900 1.7rem Fraunces,Georgia,serif;margin:0;letter-spacing:-.02em}
.person .role{font:700 1.3rem Caveat,cursive;color:var(--red)}
.person p{color:var(--muted);margin:4px 0 0}

.series{background:var(--ink);color:var(--paper);border-radius:6px;padding:46px;display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center}
.series h2{color:var(--paper)}
.series p{color:#D8CFC2;font-size:1.15rem;margin:0 0 22px}
.btn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;font-weight:600;padding:13px 24px;border-radius:999px}
.btn.line{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;counter-reset:f}
.fact{background:#fff;border:1px solid var(--line);padding:26px 26px 26px 80px;position:relative;font:400 1.3rem/1.4 Fraunces,Georgia,serif}
.fact:before{counter-increment:f;content:counter(f);position:absolute;left:22px;top:20px;font:900 2.4rem Fraunces;color:var(--red)}
.vocab{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.vocab span{font:700 1.4rem Caveat,cursive;background:var(--sun);padding:4px 14px;border-radius:4px;transform:rotate(-1deg)}
.vocab span:nth-child(even){background:var(--sky);transform:rotate(1.5deg)}
.note{font:700 1.3rem Caveat,cursive;color:var(--muted)}
footer{padding:50px 22px 60px;border-top:1px solid var(--line);text-align:center}
footer .sign{font:900 2rem Fraunces,Georgia,serif;letter-spacing:-.02em}
footer p{margin:4px 0;font:700 1.4rem Caveat,cursive;color:var(--red)}
footer .fine{font:400 .85rem Inter;color:var(--muted);margin-top:12px}
@media (max-width:880px){.hero,.intro,.series{grid-template-columns:1fr}.moments{grid-template-columns:1fr 1fr}.cast{grid-template-columns:1fr 1fr}.facts{grid-template-columns:1fr}.series{padding:30px}}
@media (max-width:560px){.moments,.cast{grid-template-columns:1fr}header nav{gap:14px;font-size:.92rem}}