@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,600&family=Syne:wght@700;800&display=swap");

:root {
  --paper: #f3ead6;
  --card: #fff8ea;
  --ink: #1a1216;
  --muted: #4a3a3c;
  --line: #c9b089;
  --magenta: #d0126a;
  --magenta-deep: #9b0c4e;
  --gold: #d4a017;
  --gold-soft: #f3d98a;
  --teal: #1f6b5a;
  --clay: #c45c32;
  --focus: #0b57d0;
  --shadow: 6px 8px 0 #1a1216;
  --display: "Syne", "Trebuchet MS", sans-serif;
  --serif: "Source Serif 4", "Georgia", serif;
  --radius: 6px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: var(--paper); scroll-behavior: smooth; }
body {
  font-family: var(--serif);
  color: var(--ink);
  background:
    linear-gradient(115deg, transparent 0 62%, rgba(212, 160, 23, 0.12) 62% 64%, transparent 64%),
    radial-gradient(circle at 92% -6%, rgba(208, 18, 106, 0.12) 0 18%, transparent 42%),
    radial-gradient(circle at 4% 8%, rgba(31, 107, 90, 0.08) 0 16%, transparent 40%),
    var(--paper);
  line-height: 1.55;
  font-size: 1.06rem;
  padding-bottom: 56px;
  -webkit-font-smoothing: antialiased;
}

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  background: var(--ink);
  color: #fff8ea;
  padding: 10px 14px;
  border-radius: 4px;
  z-index: 40;
  font-family: var(--display);
  font-weight: 800;
  text-decoration: none;
}
.skip:focus { left: 8px; }

.wrap { max-width: 720px; margin: 0 auto; padding: 18px 16px 0; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-stretch: normal;
  margin: 0 0 10px;
  line-height: 1.35;
  letter-spacing: 0.01em;
}
h1 {
  font-size: clamp(1.65rem, 5.4vw, 2.05rem);
  font-weight: 600;
  padding-right: 5.5rem;
}
h2 { font-size: 1.28rem; }
h3 { font-size: 1.12rem; }
p { margin: 0 0 10px; }
.muted { color: var(--muted); }

.kicker {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--teal);
  margin-bottom: 6px;
}

a { color: var(--teal); }
a:focus-visible,
button:focus-visible,
.week-chip:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

header.hero { margin-bottom: 18px; position: relative; }
.stamp {
  position: absolute;
  right: 0;
  top: 4px;
  width: 64px;
  height: 64px;
  transform: rotate(6deg);
  pointer-events: none;
}
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 4px 12px;
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 800;
}
.pill.now { background: var(--gold-soft); }
.pill.loud { background: #f7c5db; border-color: var(--magenta-deep); color: var(--magenta-deep); }

nav.toc,
.week-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}
nav.toc a,
.week-chip {
  text-decoration: none;
  background: var(--card);
  border: 2px solid var(--ink);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: var(--display);
  font-weight: 800;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.week-nav {
  position: sticky;
  top: 0;
  z-index: 12;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 10px 0 12px;
  margin: 0 -16px 18px;
  padding-left: 16px;
  padding-right: 16px;
  background: color-mix(in srgb, var(--paper) 92%, #fff);
  border-bottom: 2px dashed var(--line);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.week-chip { min-width: 44px; flex: 0 0 auto; }
.week-chip[aria-current="true"] {
  background: var(--ink);
  color: var(--paper);
}

.card {
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 18px 16px;
  margin-bottom: 18px;
}
.card.now {
  background: #fff4d4;
  box-shadow: 6px 8px 0 var(--magenta-deep);
}

.sticker {
  display: inline-block;
  background: var(--magenta);
  color: #fff8ea;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 10px;
  margin-bottom: 8px;
  transform: rotate(-2deg);
}

blockquote.source {
  margin: 12px 0 14px;
  padding: 12px 14px 10px;
  border-left: 5px solid var(--gold);
  background: #fff;
  border-radius: 0 8px 8px 0;
  font-style: italic;
}
blockquote.source .cite {
  font-style: normal;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.82rem;
  color: var(--teal);
  margin: 8px 0 0;
}

.prompt {
  background: #fff;
  border: 2px dashed var(--teal);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 10px 0 0;
}
.prompt strong { font-family: var(--display); }

ul.list, ol { margin: 8px 0 0; padding-left: 1.2rem; }
ul.list li, ol li { margin: 5px 0; }

.shop-grid { display: grid; gap: 10px; margin-top: 12px; }
.item {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 12px 14px;
  min-height: 44px;
}
.item b { font-family: var(--display); display: block; }
.meta {
  font-size: 0.92rem;
  color: var(--muted);
  margin-top: 2px;
}
.price {
  font-family: var(--display);
  font-weight: 800;
  color: var(--magenta-deep);
}

.note {
  background: #e7f1ed;
  border: 2px solid var(--teal);
  padding: 12px 14px;
  border-radius: 8px;
  margin: 12px 0 0;
}

.week[aria-current="step"] {
  background: #fff4d4;
  box-shadow: 6px 8px 0 var(--magenta-deep);
}

footer {
  margin: 28px 8px 0;
  color: var(--muted);
  font-size: 0.95rem;
  border-top: 3px double var(--ink);
  padding-top: 14px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .stamp { transform: none; }
  .sticker { transform: none; }
}