:root{
  --paper:#F2E6CD;
  --paper-raised:#FAF3DE;
  --ink:#2B1D12;
  --ink-soft:#5C4A34;
  --brass:#B8752A;
  --brass-ink:#7A4E1C;
  --rust:#8C3A2C;
  --line:#D9C7A0;
  --shadow: 0 1px 2px rgba(43,29,18,0.06), 0 16px 36px -18px rgba(43,29,18,0.4);
  --focus: #6E8FB0;
  --accent: #B8752A;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#1B140C;
    --paper-raised:#241B10;
    --ink:#F1E4C6;
    --ink-soft:#C9B48C;
    --brass:#E0A752;
    --brass-ink:#F0C888;
    --rust:#C56A48;
    --line:#3A2C1A;
    --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 20px 44px -18px rgba(0,0,0,0.65);
    --focus: #8FB4D6;
  }
}
:root[data-theme="dark"]{
  --paper:#1B140C;
  --paper-raised:#241B10;
  --ink:#F1E4C6;
  --ink-soft:#C9B48C;
  --brass:#E0A752;
  --brass-ink:#F0C888;
  --rust:#C56A48;
  --line:#3A2C1A;
  --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 20px 44px -18px rgba(0,0,0,0.65);
  --focus: #8FB4D6;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Fraunces',Georgia,'Times New Roman',serif; text-wrap:balance; margin:0;}
a{color:var(--brass-ink); text-decoration:none;}
a:hover{ text-decoration:underline; }
img{ max-width:100%; }
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:3px;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;} }

.wrap{max-width:1080px; margin:0 auto; padding:clamp(1.25rem,4vw,3.5rem) clamp(1rem,5vw,2rem) 5rem;}

/* ---------- Site header ---------- */
.site-header{
  display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem; flex-wrap:wrap;
  padding-bottom:1.25rem; margin-bottom:2rem; border-bottom:1px solid var(--line);
}
.site-header .wordmark{
  font-size:1.5rem; font-weight:560; font-style:italic;
  font-variation-settings:'opsz' 90,'SOFT' 40,'WONK' 1;
}
.site-header .wordmark em{ color:var(--brass); font-style:italic; }
.site-header nav{ font-family:'Archivo'; font-size:0.82rem; color:var(--ink-soft); }
.site-header nav a{ color:var(--ink-soft); }

/* ---------- Homepage hero ---------- */
.hero{ display:grid; grid-template-columns: 1fr 1.3fr; gap:2.5rem; align-items:center; margin-bottom:3rem; }
@media (max-width:760px){ .hero{ grid-template-columns:1fr; } }
.hero img{ width:100%; border-radius:16px; box-shadow:var(--shadow); display:block; }
.hero h1{ font-size:clamp(1.8rem,4vw,2.6rem); font-weight:560; font-style:italic; margin-bottom:0.9rem; }
.hero p{ font-size:1rem; line-height:1.65; color:var(--ink-soft); max-width:48ch; }
.hero .cta{
  display:inline-block; margin-top:1rem; font-family:'Archivo'; font-weight:600; font-size:0.85rem;
  background:var(--brass); color:#26160A; padding:0.6rem 1.1rem; border-radius:999px;
}
.hero .cta:hover{ text-decoration:none; filter:brightness(1.05); }

/* ---------- Month grid (homepage) ---------- */
.year-label{ font-size:0.72rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:1rem; }
.month-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:1rem; }
.month-card{
  border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--paper-raised);
  transition:transform 0.15s ease, box-shadow 0.15s ease; display:block;
}
.month-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); text-decoration:none; }
.month-card img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; }
.month-card .mc-body{ padding:0.7rem 0.8rem 0.85rem; }
.month-card .mc-name{ font-family:'Archivo'; font-size:0.68rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; display:flex; align-items:center; gap:0.4rem; margin-bottom:0.3rem; }
.month-card .mc-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.month-card .mc-punch{ font-family:'Fraunces'; font-style:italic; font-size:0.92rem; color:var(--ink); line-height:1.3; }

/* ---------- Month page stage ---------- */
.stage{ display:grid; grid-template-columns: minmax(280px,420px) 1fr; gap:2.5rem; align-items:start; }
@media (max-width:760px){ .stage{ grid-template-columns:1fr; } }

.page-card{
  width:100%; background:var(--paper-raised); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;
}
.illus{ position:relative; width:100%; aspect-ratio:4/5; overflow:hidden; }
.illus img{ width:100%; height:100%; object-fit:cover; display:block; }

.pin{
  position:absolute; width:28px; height:28px; margin:-14px 0 0 -14px;
  border-radius:50%; border:2px solid #26160A;
  background:var(--accent); color:#26160A; font-family:'Archivo'; font-weight:700; font-size:0.82rem;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,0.35); padding:0;
}
.pin::after{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid var(--accent); opacity:0.55; animation:pulse 2.4s ease-out infinite;
}
@media (prefers-reduced-motion: reduce){ .pin::after{ animation:none; } }
@keyframes pulse{ 0%{ transform:scale(0.75); opacity:0.6;} 100%{ transform:scale(1.75); opacity:0;} }
.pin.hi{ background:var(--rust); }

.joke-band{ padding:1.1rem 1.3rem 0.95rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.joke-setup{ font-size:1.02rem; font-style:italic; color:var(--ink-soft); margin:0 0 0.3rem; }
.joke-punch{ font-size:1.32rem; font-weight:600; margin:0; }

.grid-band{ padding:0.95rem 1.3rem 1.2rem; }
.grid-month{ font-family:'Archivo'; font-size:0.78rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:0.6rem; color:var(--ink-soft); }
.grid-month b{ color:var(--brass-ink); }
table.cal{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
table.cal th{ font-size:0.64rem; font-weight:600; color:var(--ink-soft); padding-bottom:5px; }
table.cal td{ text-align:center; font-size:0.82rem; padding:4px 0; color:var(--ink); }
table.cal td.empty{ color:transparent; }

/* ---------- Annotation panel ---------- */
.panel{ display:flex; flex-direction:column; gap:1.1rem; }
.panel-head{ display:flex; align-items:baseline; gap:0.7rem; flex-wrap:wrap; }
.panel-head h2{ font-size:1.7rem; font-weight:560; font-style:italic; font-variation-settings:'opsz' 40; }
.tag-badge{
  font-family:'Archivo'; font-size:0.72rem; font-weight:700; letter-spacing:0.03em;
  background:color-mix(in srgb, var(--accent) 18%, var(--paper-raised)); color:var(--brass-ink);
  border:1px solid var(--accent); border-radius:999px; padding:0.24rem 0.7rem; white-space:nowrap;
}
.chain{ display:flex; flex-wrap:wrap; gap:0.4rem; align-items:center; font-family:'Archivo'; font-size:0.78rem; }
.chain span{ background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:0.3rem 0.65rem; color:var(--ink-soft); }
.chain i{ color:var(--ink-soft); opacity:0.5; font-style:normal; }

.note-list{ display:flex; flex-direction:column; gap:0.75rem; }
.note{
  border:1px solid var(--line); background:var(--paper-raised); border-radius:12px;
  padding:0.95rem 1.1rem; display:flex; gap:0.8rem; transition:box-shadow 0.15s ease, border-color 0.15s ease;
}
.note.hi{ border-color:var(--rust); box-shadow:0 0 0 2px color-mix(in srgb, var(--rust) 22%, transparent); }
.note-num{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--accent); color:#26160A;
  font-family:'Archivo'; font-weight:700; font-size:0.78rem; display:flex; align-items:center; justify-content:center;
}
.note h3{ font-size:0.96rem; font-weight:700; margin-bottom:0.25rem; }
.note p{ margin:0; font-size:0.9rem; line-height:1.58; color:var(--ink-soft); max-width:54ch; }
.note .kind{ font-size:0.65rem; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:var(--rust); display:block; margin-bottom:0.18rem; }

/* ---------- Prev/next footer ---------- */
.month-nav{
  display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:2.75rem;
  padding-top:1.5rem; border-top:1px solid var(--line); font-family:'Archivo';
}
.month-nav a{ font-size:0.88rem; color:var(--ink); font-weight:600; }
.month-nav a span{ display:block; font-size:0.7rem; font-weight:500; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:0.15rem; }
.month-nav .to-year{ font-size:0.82rem; color:var(--ink-soft); }

footer.site-footer{ margin-top:3rem; font-family:'Archivo'; font-size:0.76rem; color:var(--ink-soft); opacity:0.7; }