@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500;600&display=swap");

:root {
  --background: oklch(0.972 0.008 95);
  --foreground: oklch(0.22 0.03 220);
  --muted-foreground: oklch(0.48 0.025 220);
  --border: oklch(0.86 0.015 210);
  --accent: oklch(0.62 0.12 40);
  --ink: oklch(0.18 0.02 220);
  --secondary: oklch(0.93 0.02 200);
  --sand: oklch(0.93 0.025 85);
}

* { box-sizing: border-box; margin: 0; padding: 0; border-color: var(--border); }
html { font-size: 17px; -webkit-text-size-adjust: 100%; }
body {
  background: var(--background);
  color: var(--foreground);
  font-family: "Inter", system-ui, sans-serif;
  font-feature-settings: "ss01","ss02";
  line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

h1, h2, h3, h4 { font-family: "Cormorant Garamond", Georgia, serif; letter-spacing: -0.02em; font-weight: 500; line-height: 1.05; }
.serif { font-family: "Cormorant Garamond", Georgia, serif; }
.italic { font-style: italic; }
.display { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; letter-spacing: -0.035em; line-height: 0.92; }
.eyebrow { font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; }
.accent { color: var(--accent); }
.muted { color: var(--muted-foreground); }
.ink { color: var(--ink); }

.container { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 768px) { .container { padding: 0 2.5rem; } }

.grid { display: grid; gap: 2rem; }
.grid-12 { grid-template-columns: repeat(12, 1fr); }
@media (max-width: 768px) { .grid-12 { grid-template-columns: 1fr; } }

.border-t { border-top: 1px solid var(--border); }
.border-b { border-bottom: 1px solid var(--border); }
.border-y { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.border-foreground-t { border-top: 1px solid var(--foreground); }
.bg-secondary { background: oklch(0.94 0.018 200); }
.bg-marquee { background: oklch(0.93 0.025 200); }

/* Header */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--background) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
header.site .inner { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; }
header.site .brand { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 1.75rem; }
header.site nav { display: flex; gap: 2rem; }
header.site nav a { font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; }
header.site nav a:hover { color: var(--accent); }
header.site nav a.active { color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 4px; }

/* Footer */
footer.site { border-top: 1px solid var(--border); margin-top: 4rem; padding: 3rem 0; }
footer.site .inner { display: grid; gap: 2rem; grid-template-columns: repeat(12, 1fr); }
@media (max-width: 768px) { footer.site .inner { grid-template-columns: 1fr; } }

/* Marquee */
.marquee-wrap { overflow: hidden; }
.marquee { display: flex; white-space: nowrap; animation: marquee 50s linear infinite; padding: 1.25rem 0; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 2rem; color: var(--ink); }
@media (min-width: 768px) { .marquee { font-size: 3rem; } }
.marquee span.row { display: inline-flex; align-items: center; gap: 2.5rem; padding-right: 2.5rem; }
.marquee .star { color: var(--accent); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Grain image */
.grain { position: relative; overflow: hidden; }
.grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(30,50,60,0.06) 1px, transparent 1px); background-size: 3px 3px; mix-blend-mode: multiply; opacity: 0.35; }

.aspect-4-5 { aspect-ratio: 4/5; }
.aspect-4-3 { aspect-ratio: 4/3; }
.cover { width: 100%; height: 100%; object-fit: cover; }

.eyebrow-link { display: inline-block; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.eyebrow-link:hover { color: var(--accent); }

/* utility spans */
.col-1 { grid-column: span 1; } .col-2{grid-column:span 2;} .col-4{grid-column:span 4;} .col-5{grid-column:span 5;} .col-6{grid-column:span 6;} .col-7{grid-column:span 7;} .col-8{grid-column:span 8;}
@media (max-width:768px){ .col-1,.col-2,.col-4,.col-5,.col-6,.col-7,.col-8 { grid-column: 1 / -1; } }

.types-list li { display: grid; grid-template-columns: 1fr 5fr 4fr 2fr; gap: 1rem; align-items: baseline; padding: 1.5rem 0.5rem; border-bottom: 1px solid var(--border); }
@media (max-width: 768px) { .types-list li { grid-template-columns: auto 1fr; } .types-list .desc, .types-list .tag { grid-column: 1 / -1; text-align: left; } }
.types-list .num { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 1.5rem; color: var(--accent); }
.types-list h3 { font-size: 1.75rem; }
.types-list .tag { text-align: right; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; }

.paths-list li { display: grid; grid-template-columns: 1fr 4fr 7fr; gap: 1.5rem; align-items: baseline; padding: 2rem 0; border-bottom: 1px solid var(--border); }
@media (max-width:768px){ .paths-list li { grid-template-columns: auto 1fr; } .paths-list .body { grid-column: 1 / -1; } }
.paths-list .num { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 1.875rem; color: var(--accent); }
.paths-list h3 { font-size: 1.75rem; color: var(--ink); }

.shelf-list li { padding: 1.25rem 0; border-bottom: 1px solid var(--border); font-family: "Cormorant Garamond", serif; font-size: 1.25rem; color: var(--ink); }

.flag { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; border-top: 1px solid var(--border); padding-top: 1.25rem; margin-top: 1.5rem; }
.flag .k { font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }

.journal-grid { display: grid; gap: 2rem; grid-template-columns: repeat(3,1fr); }
@media (max-width:768px){ .journal-grid { grid-template-columns: 1fr; } }
.journal-grid article { border-top: 1px solid var(--foreground); padding-top: 1.25rem; cursor: pointer; }
.journal-grid h3 { font-size: 1.75rem; margin-top: 1rem; }
.journal-grid h3:hover { color: var(--accent); }
.journal-grid .meta { display: flex; justify-content: space-between; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-foreground); }

.symptom-groups { display: grid; gap: 4rem; grid-template-columns: 1fr 1fr; }
@media (max-width:768px){ .symptom-groups { grid-template-columns: 1fr; } }
.symptom-groups h2 { font-size: 2.25rem; }
.symptom-groups .head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--foreground); padding-bottom: 0.75rem; }
.symptom-groups ul { margin-top: 1.5rem; }
.symptom-groups li { display: grid; grid-template-columns: 5fr 7fr; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; }
@media (max-width:768px){ .symptom-groups li { grid-template-columns: 1fr; } }
.symptom-groups li .name { font-family: "Cormorant Garamond", serif; font-size: 1.25rem; color: var(--ink); }

.pad-y-lg { padding-top: 4rem; padding-bottom: 4rem; }
.pad-y-xl { padding-top: 6rem; padding-bottom: 6rem; }
.pad-t-lg { padding-top: 4rem; } .pad-b-lg { padding-bottom: 4rem; }

.hero-title { font-size: clamp(3.25rem, 10vw, 10rem); }
.h1-chapter { font-size: clamp(3rem, 9vw, 8rem); }

dl.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; border-top: 1px solid var(--border); padding-top: 2rem; margin-top: 2.5rem; }
dl.stats dt { font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-foreground); }
dl.stats dd { font-family: "Cormorant Garamond", serif; font-size: 1.875rem; margin-top: 0.25rem; }

.badge-card { position: absolute; bottom: -1.5rem; left: -1.5rem; background: var(--background); border: 1px solid var(--border); padding: 0.75rem 1rem; }
@media (max-width: 768px){ .badge-card { display: none; } }

.flex-between { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; }