/* "Open Book" design system.
   Values on the homepage are lifted from the design reference
   (design_handoff_open_book/reference/open-book-homepage.html), which is
   authoritative wherever it disagrees with the written handoff.
   The post and archive pages are NOT in the handoff — they extend the same
   vocabulary: forest band, parchment page, book-page card, Cormorant prose,
   Karla labels, ornamental dividers. */

:root {
  --forest: #445c28;        /* deep leaf, taken down from the header artwork's foliage */
  --header-ink: #e9e2cf;
  --header-muted: #dbe3c6;  /* the footer credit; tinted to sit on the band above */
  --brass: #b9a86a;
  --parchment: #f3eee2;
  --page-bg: #faf6ea;
  --gutter: #efe7d2;
  --ink: #2f2a20;
  --prose: #4a4131;
  --muted-prose: #6a5c44;
  --rust: #9c5a2a;
  --rust-hover: #6b3a17;
  --olive: #6d7a4f;
  --gold: #b98a2d;
  --hairline: #ddd2b6;
  --shadow-offset: #d8cdb2;
}

* { box-sizing: border-box; }
/* Flex column so the footer can be pinned to the bottom of short pages — see
   .site-footer's margin-top. dvh keeps it honest on mobile, where a bare 100vh
   measures the viewport as if the browser chrome were hidden. */
body {
  margin: 0; background: var(--parchment); font-family: Karla, sans-serif; color: var(--ink);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
/* Because body is a flex column, its children are flex items — and an auto
   horizontal margin on a flex item cancels the stretch, so a band written as
   "max-width: 720px; margin: 0 auto" collapses to fit-content instead. That
   silently narrowed .chapters, .archive-head and .comments-area. Filling the
   line here lets each band's own max-width and auto margins centre it as
   intended, and keeps the next one that gets added from hitting the same trap. */
body > * { width: 100%; }
a { color: var(--rust); text-decoration: none; }
a:hover { color: var(--rust-hover); text-decoration: underline; }
img { display: block; max-width: 100%; }

/* ---------------------------------------------------------------- header */
/* The header is the botanical arch with the wordmark set in its opening.
   Crown and text share one grid cell so the text tracks the artwork's height
   instead of being pinned at a magic offset. */
.site-header {
  display: grid; grid-template-areas: "stack";
  background: var(--parchment); color: var(--ink); text-align: center;
}
/* The artwork's ground is opaque white, not transparent — multiply drops it so
   the parchment reads straight through, with no rectangle edge. */
.site-crown {
  grid-area: stack;
  width: 100%; height: auto;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.site-header-inner {
  grid-area: stack; align-self: end;
  display: flex; flex-direction: column; gap: 12px;
  padding: 0 48px 30px;
}
.kicker {
  font: 400 14px 'Cormorant Garamond', serif;
  letter-spacing: .35em; text-transform: uppercase; color: var(--gold);
}
.wordmark { font: 600 46px 'Cormorant Garamond', serif; color: var(--ink); }
.wordmark a { color: inherit; text-decoration: none; }
.site-nav {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 28px;
  font: 500 12px Karla, sans-serif;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted-prose);
}
.site-nav a { color: inherit; }
.site-nav a:hover { color: var(--rust); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--rust); }

/* ---------------------------------------------------------------- home: book */
.featured { padding: 44px 48px; }
.book {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--page-bg); border: 1px solid var(--hairline);
  box-shadow: 0 14px 30px rgba(43,33,24,.12);
  max-width: 1100px; margin: 0 auto;
}
.page { padding: 48px 40px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.page-left {
  border-right: 1px solid var(--hairline);
  background: linear-gradient(to right, var(--page-bg) 92%, var(--gutter));
}
.page-right { background: linear-gradient(to left, var(--page-bg) 92%, var(--gutter)); }
/* The label is set between two rules, as a chapter plate in a printed book —
   align-self: stretch so the rules reach the page's measure. */
.page-label {
  display: flex; align-items: center; gap: 14px; align-self: stretch;
  font: 700 11px Karla, sans-serif;
  letter-spacing: .25em; text-transform: uppercase; color: var(--rust);
}
.page-label .page-rule { flex: 1; height: 1px; background: var(--shadow-offset); }
.page-right .page-label { color: var(--olive); }
.page-title { margin: 0; font: 600 38px/1.15 'Cormorant Garamond', serif; text-align: center; }
.page-fleuron { font: 400 17px 'Cormorant Garamond', serif; color: var(--brass); line-height: 1; }
.page-right .page-title { font-style: italic; }
.page-title a { color: inherit; text-decoration: none; }
.page-title a:hover { color: var(--rust-hover); text-decoration: none; }
/* Italic on both pages here — the plate treats the chapter line as a caption,
   so the recto/verso distinction is carried by the title and the accent alone. */
.page-body { margin: 0; font: italic 400 17px/1.8 'Cormorant Garamond', serif; color: var(--prose); text-align: center; }
.page-cta { font: 700 12px Karla, sans-serif; letter-spacing: .15em; margin-top: auto; color: var(--rust); }
.page-right .page-cta { color: var(--olive); }
.page-cta a { color: inherit; }

/* ------------------------------------------------------------- category links */
/* The category term inside a label (.page-label, .chapter-meta, .sheet-label)
   links to its archive. It takes the label's own colour — including the series
   accent set inline on .chapter-meta — so linking changes nothing until hover.
   z-index lifts it above the stretched .chapter-title hit area below. */
.term-link { position: relative; z-index: 1; color: inherit; text-decoration: none; }
.term-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- chapter list */
.chapters {
  max-width: 720px; margin: 0 auto; padding: 8px 0 46px;
  display: flex; flex-direction: column; gap: 34px;
}
.divider { display: flex; align-items: center; gap: 16px; color: var(--brass); }
.divider .rule { flex: 1; height: 1px; background: var(--shadow-offset); }
.divider .mark { font: 400 18px 'Cormorant Garamond', serif; }

/* position: relative anchors the stretched .chapter-title link below */
.chapter { position: relative; display: flex; gap: 28px; align-items: flex-start; text-decoration: none; color: inherit; }
.chapter:hover { text-decoration: none; }
/* Dot numeral: a small "III." set like a table-of-contents entry. It sits on
   the meta line rather than looming beside the title — the period is what
   makes it read as a list entry instead of a lone number. */
.chapter-num {
  flex: none;
  font: 400 18px 'Cormorant Garamond', serif;
  color: var(--rust);
  line-height: 1;
  padding-top: 2px;
}
.chapter-num::after { content: "."; }
.chapter-body { display: flex; flex-direction: column; gap: 9px; flex: 1; min-width: 0; }
.chapter-meta { font: 700 11px Karla, sans-serif; letter-spacing: .22em; text-transform: uppercase; }
.chapter-title { margin: 0; font: 600 30px 'Cormorant Garamond', serif; transition: color .15s ease-out; }
.chapter-title a { color: inherit; text-decoration: none; }
/* The row is no longer one big <a> (it holds the category link, and anchors
   cannot nest), so stretch the title's link across it to keep the whole card
   clickable. */
.chapter-title a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.chapter:hover .chapter-title { color: var(--rust-hover); }
.chapter-excerpt { margin: 0; font: italic 400 17px/1.6 'Cormorant Garamond', serif; color: var(--muted-prose); }
.chapter-thumb {
  width: 170px; height: 120px; object-fit: cover; border-radius: 2px; flex: none;
  box-shadow: 4px 4px 0 var(--shadow-offset); transition: box-shadow .15s ease-out;
}
.chapter:hover .chapter-thumb { box-shadow: 6px 6px 0 var(--shadow-offset); }

/* ---------------------------------------------------------------- archive head */
/* The bottom padding matters more than it looks: the heading's rule and the
   first ornamental divider are both hairlines, and on a series archive - where
   the description is suppressed because it only repeated the name - they would
   otherwise sit 8px apart and read as one stuttering rule. */
.archive-head { max-width: 720px; margin: 0 auto; padding: 40px 48px 22px; text-align: center; }
/* The category name is set between two rules rather than as a display heading.
   It is still the page's h1 — a listing needs a heading — but it no longer
   competes with the wordmark above it, which matters most on
   /category/storiesfromthekitchen/ where the two say the same words. Same
   treatment as the chapter plate's label, so the pages rhyme. */
.archive-title {
  display: flex; align-items: center; gap: 16px;
  margin: 0;
  font: 700 11px Karla, sans-serif;
  letter-spacing: .25em; text-transform: uppercase; color: var(--rust);
}
.archive-title .archive-rule { flex: 1; height: 1px; background: var(--shadow-offset); }
.archive-title-text { white-space: nowrap; }
.archive-sub { margin: 16px 0 0; font: italic 400 18px/1.6 'Cormorant Garamond', serif; color: var(--muted-prose); }
.archive-sub:empty { display: none; }

/* ---------------------------------------------------------------- single chapter */
.chapter-page { padding: 44px 48px; }
.sheet {
  max-width: 820px; margin: 0 auto;
  background: var(--page-bg); border: 1px solid var(--hairline);
  box-shadow: 0 14px 30px rgba(43,33,24,.12);
  padding: 52px 56px 44px;
}
.sheet-cover { margin: -52px -56px 34px; }
.sheet-cover img { width: 100%; height: 320px; object-fit: cover; }
.sheet-head { text-align: center; margin-bottom: 30px; }
.sheet-label {
  font: 700 11px Karla, sans-serif;
  letter-spacing: .25em; text-transform: uppercase; color: var(--rust);
  display: block; margin-bottom: 14px;
}
.sheet-title { margin: 0 0 14px; font: 600 42px/1.12 'Cormorant Garamond', serif; }
.sheet-date { font: 700 11px Karla, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--muted-prose); }
.sheet-rule { display: flex; align-items: center; gap: 16px; color: var(--brass); margin-bottom: 30px; }
.sheet-rule .rule { flex: 1; height: 1px; background: var(--shadow-offset); }
.sheet-rule .mark { font: 400 18px 'Cormorant Garamond', serif; }

/* post body: the generator emits WordPress block classes, so they are styled
   here rather than by the Ashe stylesheet, which book pages do not load */
.book-content { font: 400 17px/1.85 'Cormorant Garamond', serif; color: var(--prose); }
.book-content > * + * { margin-top: 1.15em; }
.book-content p.wp-block-paragraph { margin: 0; }
.book-content h2, .book-content h3, .book-content h4,
.book-content h5, .book-content h6 {
  font-family: 'Cormorant Garamond', serif; font-weight: 600; color: var(--ink);
  line-height: 1.2; margin: 1.8em 0 0;
}
.book-content h2 { font-size: 32px; }
.book-content h3 { font-size: 27px; }
.book-content h4 { font-size: 23px; }
.book-content h5 { font-size: 20px; }
.book-content h6 { font-size: 18px; font-style: italic; color: var(--muted-prose); }
.book-content h3.has-text-align-center,
.book-content h6.has-text-align-center { color: var(--gold); font-weight: 400; letter-spacing: .04em; }
.book-content .has-text-align-center { text-align: center; }
.book-content .has-text-align-right { text-align: right; }
.book-content hr.wp-block-separator {
  border: 0; height: 1px; background: var(--shadow-offset);
  margin: 1.8em auto; width: 100%;
}
.book-content .wp-block-verse {
  font: 400 17px/1.75 'Cormorant Garamond', serif; color: var(--prose);
  white-space: pre-wrap; margin: 0; background: none; border: 0; padding: 0;
}
.book-content .wp-block-list { padding-left: 1.3em; margin: 0; }
.book-content .wp-block-list li + li { margin-top: .4em; }
.book-content .wp-block-quote {
  margin: 0; padding-left: 1.2em; border-left: 2px solid var(--brass);
  font-style: italic; color: var(--muted-prose);
}
/* Photos need air. This rule used to say margin: 0, which outranks the
   .book-content > * + * spacing (two classes beats one), so a single image sat
   flush against the paragraphs either side of it. Paragraphs are flush on
   purpose - that is how the poetry stanzas are set - but photos are not.
   Matched to the gallery below so both kinds of photo breathe alike. */
.book-content .wp-block-image { margin: 1.6em 0; }
.book-content .wp-block-image figure { margin: 0; }
/* height: auto is load-bearing. The renderer emits the real width/height as
   attributes, and a bare width: 100% leaves that height attribute applying, so
   a 1024x768 photo was drawn 706x768 - squashed by a third. With height: auto
   the attributes only supply the aspect ratio, which still reserves the right
   box before a lazy image arrives. */
.book-content .wp-block-image img { width: 100%; height: auto; border-radius: 2px; box-shadow: 4px 4px 0 var(--shadow-offset); }
.book-content figcaption {
  margin-top: .7em; text-align: center;
  font: italic 400 15px 'Cormorant Garamond', serif; color: var(--muted-prose);
}
/* The grid is three across, but the column count has to follow the number of
   photos or a gallery of one sat in a third of the measure with two empty
   columns beside it — which is most of them: 15 of the 19 galleries here hold
   one or two images, not three. */
.book-content .wp-block-gallery { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin: 1.6em 0; }
.book-content .wp-block-gallery:has(figure:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0,1fr)); }
.book-content .wp-block-gallery:has(figure:only-child) { grid-template-columns: minmax(0, 1fr); }
.book-content .wp-block-gallery figure { margin: 0; }
/* Tiles are cropped square-ish so a grid reads as a grid. A gallery of one is
   not a grid, so it behaves like a plain photo and keeps its own proportions —
   cropping a 1024x768 landscape into a 3:4 portrait threw away half of it. */
.book-content .wp-block-gallery img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 2px; }
.book-content .wp-block-gallery:has(figure:only-child) img { aspect-ratio: auto; height: auto; object-fit: fill; }
.book-content .wp-block-code {
  background: var(--gutter); border: 1px solid var(--hairline); padding: 1em;
  overflow-x: auto; font-size: 14px;
}

/* terms + prev/next under a chapter */
.sheet-terms { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--shadow-offset); display: flex; flex-wrap: wrap; gap: 8px; }
.sheet-terms a {
  font: 700 10px Karla, sans-serif; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted-prose); border: 1px solid var(--hairline); padding: .5em .9em; border-radius: 2px;
}
.sheet-terms a:hover { color: var(--rust); border-color: var(--rust); text-decoration: none; }

/* ---------------------------------------------------------------- pager */
.pager {
  max-width: 720px; margin: 0 auto; padding: 0 48px 46px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font: 700 11px Karla, sans-serif; letter-spacing: .18em; text-transform: uppercase;
}
.pager .pos { color: var(--muted-prose); }

/* ---------------------------------------------------------------- comments */
/* Comments are reviewed in Git: the thread below is what has been merged, the
   form opens a pull request. Nothing here renders until a post has
   "comments": true and site.json names a provider. */
.comments-area {
  max-width: 720px; margin: 0 auto; padding: 8px 20px 46px;
}
.comments-title {
  margin: 0 0 18px;
  font: 600 26px 'Cormorant Garamond', serif; color: var(--ink);
  text-align: center;
}
.comment-list { list-style: none; margin: 0 0 30px; padding: 0; }
.comment + .comment { margin-top: 22px; border-top: 1px solid var(--hairline); padding-top: 22px; }
.comment-head {
  margin: 0 0 6px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
}
.comment-author {
  font: 700 11px Karla, sans-serif;
  letter-spacing: .22em; text-transform: uppercase; color: var(--rust);
}
.comment-date { font: 400 13px Karla, sans-serif; color: var(--muted-prose); }
.comment-body { font: 400 17px/1.75 'Cormorant Garamond', serif; color: var(--prose); }
.comment-empty {
  margin: 0 0 30px; text-align: center;
  font: italic 400 16px 'Cormorant Garamond', serif; color: var(--muted-prose);
}

.comment-form { display: flex; flex-direction: column; gap: 14px; }
.comment-field { display: flex; flex-direction: column; gap: 6px; }
.comment-field > span {
  font: 700 11px Karla, sans-serif;
  letter-spacing: .22em; text-transform: uppercase; color: var(--muted-prose);
}
.comment-field input,
.comment-field textarea {
  font: 400 16px/1.6 'Cormorant Garamond', serif; color: var(--ink);
  background: var(--page-bg);
  border: 1px solid var(--hairline); border-radius: 2px;
  padding: 10px 12px; width: 100%;
}
.comment-field input:focus,
.comment-field textarea:focus { outline: 2px solid var(--brass); outline-offset: 1px; }
.comment-field textarea { resize: vertical; min-height: 96px; }
/* the honeypot must be reachable by a bot parsing the DOM but never seen or
   focusable, so it is moved off-screen rather than display:none */
.comment-hp {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.comment-submit {
  align-self: start;
  font: 700 12px Karla, sans-serif; letter-spacing: .15em; text-transform: uppercase;
  color: var(--page-bg); background: var(--rust);
  border: 0; border-radius: 2px; padding: 11px 22px; cursor: pointer;
  transition: background-color .15s ease-out;
}
.comment-submit:hover { background: var(--rust-hover); }
.comment-submit[disabled] { opacity: .6; cursor: default; }
.comment-status { margin: 0; font: 400 15px Karla, sans-serif; }
.comment-status:empty { display: none; }
.comment-status.is-ok { color: var(--olive); }
.comment-status.is-error { color: var(--rust-hover); }

/* ---------------------------------------------------------------- footer */
.site-footer {
  background: var(--forest); color: var(--header-muted);
  padding: 20px 48px; text-align: center;
  font: italic 400 15px 'Cormorant Garamond', serif;
  /* absorbs the leftover height on a page too short to fill the viewport, so
     the footer sits on the bottom edge instead of floating mid-screen */
  margin-top: auto;
}
.site-footer a { color: inherit; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 860px) {
  .book { grid-template-columns: 1fr; }
  .page-left { border-right: 0; border-bottom: 1px solid var(--hairline); background: var(--page-bg); }
  .page-right { background: var(--page-bg); }
  /* The arch scales with the viewport, so below this width it is too short to
     hold the wordmark inside it. Drop out of the shared cell and stack: arch
     on top, wordmark beneath. */
  .site-header { grid-template-areas: "crown" "text"; }
  .site-crown { grid-area: crown; }
  .site-header-inner { grid-area: text; align-self: auto; padding: 6px 20px 26px; }
  .wordmark { font-size: 32px; }
  .kicker { font-size: 12px; letter-spacing: .28em; }
  .featured, .chapter-page { padding: 28px 20px; }
  .chapters, .pager { padding-inline: 20px; }
  .archive-head { padding: 32px 20px 0; }
  .archive-title { font-size: 32px; }
  .sheet { padding: 32px 24px 30px; }
  .sheet-cover { margin: -32px -24px 26px; }
  .sheet-cover img { height: 200px; }
  .sheet-title { font-size: 30px; }
  .chapter { flex-wrap: wrap; }
  .chapter-thumb { width: 100%; height: 180px; order: 3; }
  .chapter-num { font-size: 16px; }
  .book-content .wp-block-gallery { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }