/* =========================================================
   DESIGN TOKENS — change the look here
   ========================================================= */
:root {
  --ivory: #F6F1E6;        /* primary background: warm ivory */
  --ink: #242422;          /* primary text */
  --walnut: #4B382A;       /* painting frame edges */
  --fern: #3F5638;         /* deep fern: identity green — rules, buttons, links, focus */
  --fern-dark: #33472D;    /* button hover */
  --fern-text: var(--fern);   /* deep fern already reads at 7:1 on the ivory, so small text uses it directly */
  --gray: #4F4B45;         /* secondary text: metadata, credits, dates, nav at rest, input borders */
  --rule: #D8D3C8;         /* subtle dividers */
  --sage-ivory: #E8E8D8;   /* announcements band (re-tuned to sit with the warm ivory) */
  --sage: #C8D1C0;         /* secondary sage (never text) */

  --serif: "EB Garamond", Garamond, "Iowan Old Style", Georgia, serif;
  /* Literary text uses --serif; things visitors use to navigate or interact use --ui. */
  --ui: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;

  --wrap: 74rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-h: 4.75rem;
  --space-section: clamp(5.5rem, 11vw, 9.5rem);
  --ease: cubic-bezier(.2, .6, .2, 1);
}

/* =========================================================
   BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.6;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-weight: 400; line-height: 1.2; }
:focus-visible { outline: 2px solid var(--fern); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--sage); color: var(--ink); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 1rem; top: -4rem; z-index: 100;
  background: var(--ink); color: var(--ivory); padding: .6rem 1rem;
  font-family: var(--ui); font-size: .9rem; text-decoration: none; border-radius: 2px;
}
.skip-link:focus { top: 1rem; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap.narrow { max-width: calc(44rem + 2 * var(--gutter)); }
.wrap.reading { max-width: calc(38rem + 2 * var(--gutter)); }

.label {
  font-family: var(--ui); font-weight: 500; font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gray);
  margin: 0 0 2rem;
}
.text-link {
  font-family: var(--ui); font-size: .95rem; letter-spacing: .01em;
  color: var(--fern-text); text-decoration: none;
  text-underline-offset: .28em; text-decoration-thickness: 1px;
}
.text-link:hover { text-decoration: underline; }
.text-link .arrow { display: inline-block; transition: transform .25s var(--ease); }
.text-link:hover .arrow { transform: translateX(3px); }

/* Placeholder markers — make unfinished content impossible to mistake */
.ph { color: var(--gray); font-style: italic; }
.ph-tag {
  font-family: var(--ui); font-style: normal; font-size: .62rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gray);
  border: 1px dashed var(--gray); padding: .05rem .4rem; border-radius: 2px;
  margin-left: .5rem; vertical-align: .15em; white-space: nowrap;
}
.draft-note {
  font-family: var(--ui); font-size: .85rem; color: var(--ink);
  background: var(--sage-ivory); border-left: 2px solid var(--fern);
  padding: .75rem 1rem; margin: 0 0 2.5rem;
}

/* =========================================================
   HEADERS (full + slim) — shown according to body[data-shell]
   ========================================================= */
.site-header, .work-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--ivory);
  border-bottom: 1px solid transparent;
  transition: border-color .25s;
}
.is-scrolled .work-header { border-bottom-color: var(--rule); }
/* Fern identity rule under the main header, always visible (replaces the grey on-scroll divider).
   The inner row gives back 3px so the header's total height is unchanged. */
.site-header { border-bottom: 4px solid var(--fern); }
.site-header .header-inner { height: calc(var(--header-h) - 3px); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; height: var(--header-h);
}
.wordmark {
  font-family: var(--serif); font-size: 1.6rem; font-weight: 500;
  color: var(--ink); text-decoration: none; letter-spacing: .005em; white-space: nowrap;
  transition: color .2s;
}
.wordmark:hover { color: var(--fern-text); }
.header-right { display: flex; align-items: center; gap: 2rem; }
.nav-list {
  display: flex; gap: 1.85rem; list-style: none; margin: 0; padding: 0;
  font-family: var(--ui); font-size: .95rem;
}
.nav-list a {
  position: relative; display: block; padding: .4rem 0;
  color: var(--gray); text-decoration: none; transition: color .2s;
}
.nav-list a:hover, .nav-list a[aria-current="page"] { color: var(--ink); }
.nav-list a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .1rem;
  height: 1px; background: var(--fern);
}
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; margin: -.5rem;
  background: none; border: 0; padding: 0; border-radius: 50%;
  color: var(--gray); cursor: pointer; transition: color .2s;
}
.icon-btn:hover { color: var(--fern-text); }
.menu-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  font-family: var(--ui); font-size: .95rem; color: var(--ink);
  padding: .6rem 0; min-height: 2.75rem;
}
.back-link {
  font-family: var(--ui); font-size: .95rem; color: var(--gray);
  text-decoration: none; padding: .6rem 0; transition: color .2s;
}
.back-link:hover { color: var(--fern-text); }

@media (max-width: 760px) {
  :root { --header-h: 4rem; }
  .wordmark { font-size: 1.4rem; }
  .header-right { gap: 1.25rem; flex-direction: row-reverse; }
  .menu-toggle { display: inline-flex; align-items: center; }
  .nav-list {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--ivory); border-bottom: 1px solid var(--rule);
    padding: .5rem var(--gutter) 1.25rem;
  }
  .nav-list.is-open { display: flex; }
  .nav-list a { padding: .8rem 0; font-size: 1.05rem; }
  .nav-list a[aria-current="page"]::after { display: none; }
  .nav-list a[aria-current="page"] { color: var(--fern-text); }
}

body[data-shell="full"] .work-header,
body[data-shell="slim"] .site-header,
body[data-shell="reader"] .site-header,
body[data-shell="reader"] .work-header,
body[data-shell="reader"] .site-footer { display: none; }

/* =========================================================
   ARTWORK
   ========================================================= */
.art { position: relative; overflow: hidden; background: var(--sage-ivory); }
.art img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.art--panel { aspect-ratio: 4 / 5; }
.art--card  { aspect-ratio: 4 / 3; }
.art--cover { aspect-ratio: 4 / 5; }
/* Missing file or no artwork yet: an obvious placeholder, never a substitute */
.art--missing img { display: none; }
.art--title { display: grid; place-items: center; padding: 1.5rem; background: var(--sage-ivory); }
.art-title {
  font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink);
  font-size: clamp(2rem, 3.5vw, 2.75rem); line-height: 1.15; text-align: center;
}
.art--cover .art-title { font-size: clamp(2.5rem, 5vw, 3.75rem); }
.art--missing, .art--empty {
  display: grid; place-items: center; text-align: center; padding: 1.5rem;
  background: var(--sage-ivory);
  outline: 1px dashed var(--gray); outline-offset: -1px;
}
.art--missing::after, .art--empty::after {
  content: attr(data-placeholder);
  font-family: var(--ui); font-size: .8rem; line-height: 1.5; color: var(--gray); max-width: 20em;
}
.credit {
  font-family: var(--ui); font-size: .75rem; line-height: 1.5; color: var(--gray);
  margin: .6rem 0 0;
}
.credit { text-wrap: balance; }
.credit cite { font-style: italic; }

/* =========================================================
   HOME
   ========================================================= */
/* Opening hero: Monet as the visual field. The title (masthead, in the sky) and the epigraph
   (in the water) sit in their own grid rows, so each is placed independently:
   [top space] [title] [flexible space] [quote] [bottom space]. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; justify-items: center; text-align: center;
  grid-template-rows: 17% auto 1fr auto 19%;
  padding-inline: var(--gutter);
  height: clamp(26rem, 66vh, 46rem);
}
.hero .art--hero-bg { position: absolute; inset: -2%; z-index: -2; }   /* slight overscan hides the photographed canvas edges */
.hero-title { grid-row: 2; }
.hero .epigraph { grid-row: 4; }
/* Each text element carries its own soft ivory haze, sized to the words and fading to nothing,
   so it follows the text at every screen size without darkening or covering the painting. */
.hero-title, .hero .epigraph { position: relative; }
.hero-title::before, .hero .epigraph::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(246, 241, 230, .56) 0%, rgba(246, 241, 230, .32) 45%, rgba(246, 241, 230, .12) 72%, rgba(246, 241, 230, 0) 100%);
}
.hero-title::before { inset: -115% -30%; }
.hero .epigraph::before {   /* the water is busier than the sky, so the quote's haze is a little stronger */
  inset: -75% -34%;
  background:
    radial-gradient(ellipse 20% 15% at 25% 38%, rgba(246, 241, 230, .3), rgba(246, 241, 230, 0)),   /* a touch more over the start of the quote line… */
    radial-gradient(ellipse 20% 15% at 75% 38%, rgba(246, 241, 230, .3), rgba(246, 241, 230, 0)),   /* …and over its end */
    radial-gradient(closest-side,
    rgba(246, 241, 230, .8) 0%, rgba(246, 241, 230, .6) 45%, rgba(246, 241, 230, .27) 72%, rgba(246, 241, 230, 0) 100%);
}
.hero-title {
  margin: 0; font-family: var(--serif); font-weight: 500; color: var(--ink);
  font-size: clamp(2.75rem, 6.5vw, 5rem); line-height: 1.05; letter-spacing: .005em;
}
.hero .epigraph figcaption { color: var(--ink); margin-top: .8rem; }
.hero-credit .credit { text-align: right; margin: .6rem 0 0; }
@media (max-width: 820px) {
  .hero { height: clamp(22rem, 58vh, 30rem); grid-template-rows: 11% auto 1fr auto 9%; }
  .hero .art--hero-bg img { object-position: 68% 42% !important; }   /* narrow screens: keep the cliff in view (overrides the artwork's default focal point) */
  .hero-credit .credit { text-align: center; }
}
.epigraph { margin: 0; text-align: center; }
.epigraph blockquote { margin: 0; }
.epigraph p {
  margin: 0; font-style: italic; font-weight: 400;
  font-size: clamp(1.2rem, 2.2vw, 1.65rem); line-height: 1.35;
  hanging-punctuation: first;
}
.epigraph figcaption {
  margin-top: 1.25rem; font-family: var(--ui); font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gray);
}
/* Fern band closing the introduction (hero + About). It sits outside .wrap, so it spans the full width. */
.opening-band {
  height: 24px; margin: clamp(2.25rem, 4.5vw, 3.5rem) 0 0;
  border: 0; background: var(--fern);
}
.opening-band + .panels { margin-top: clamp(2.75rem, 5.5vw, 4rem); }   /* band → Explore */
.panels-heading {   /* "Explore": introduces the three destinations */
  margin: 0 0 clamp(2rem, 3.5vw, 2.75rem);   /* Explore → paintings */
  text-align: center; font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.3rem); font-weight: 400; line-height: 1.2; color: var(--ink);
}

.panels { margin-top: var(--space-section); }
.panel-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
}
.panel-item { text-align: center; }
.panel { display: block; color: inherit; text-decoration: none; }
/* Single thin walnut edge around each section painting */
.frame {
  border: 2px solid var(--walnut);
  box-shadow: 0 1px 2px rgba(75, 56, 42, .05);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.panel:hover .frame, .panel:focus-visible .frame {
  transform: translateY(-1px);
  box-shadow: 0 2px 3px rgba(75, 56, 42, .07);
}
.panel-title {
  margin: 1.35rem 0 0; font-size: clamp(1.5rem, 2.2vw, 1.85rem);
  transition: color .2s;
}
.panel:hover .panel-title { color: var(--fern-text); }
.panel-sub { margin: .35rem 0 0; color: var(--ink); font-size: 1.05rem; }
.panel-status {
  margin: .45rem 0 0; font-family: var(--ui); font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gray);
}
@media (max-width: 820px) {
  .panel-list { grid-template-columns: minmax(0, 1fr); gap: 4.5rem; max-width: 30rem; margin-inline: auto; }
}

.band { background: var(--sage-ivory); margin-top: var(--space-section); padding-block: clamp(4rem, 8vw, 6rem); }
.announcements .label { text-align: center; }
.ann-list { list-style: none; margin: 0; padding: 0; }
.ann {
  display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 1.5rem;
  padding-block: 1.35rem;
}
.ann + .ann { border-top: 1px solid var(--rule); }
.ann-meta { font-family: var(--ui); font-size: .85rem; line-height: 1.5; color: var(--gray); padding-top: .2rem; }
.ann-type { display: block; color: var(--ink); }
.ann-text { margin: 0; font-size: 1.15rem; }
/* Green text falls below 4.5:1 on the sage band, so links here are ink with a green underline */
.ann a { color: var(--ink); text-decoration-color: var(--fern); text-underline-offset: .22em; text-decoration-thickness: 1px; }
.ann a:hover { text-decoration-thickness: 2px; }
.empty { color: var(--gray); font-style: italic; text-align: center; margin: 0; }
@media (max-width: 600px) { .ann { grid-template-columns: minmax(0, 1fr); gap: .3rem; } }
/* Three or more announcements: two columns, newest at top-left, reading down the left column then the right */
.ann-list--cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(var(--ann-rows), auto); grid-auto-flow: column;
  column-gap: clamp(2.5rem, 5vw, 4.5rem);
}
.ann-list--cols .ann--col-top { border-top: 0; }   /* no divider above the first item of each column */
@media (max-width: 1100px) { .ann-list--cols .ann { grid-template-columns: minmax(0, 1fr); gap: .3rem; } }
@media (max-width: 820px) {   /* phones: back to one column, same newest-first order */
  .ann-list--cols { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .ann-list--cols .ann + .ann { border-top: 1px solid var(--rule); }
}

.home-about { max-width: 38rem; margin: clamp(3rem, 6vw, 4.5rem) auto 0; text-align: center; }   /* directly below the hero */
.home-about p { font-size: 1.3rem; line-height: 1.6; margin: 0 0 1.75rem; color: var(--ink); }

.signup { margin-top: var(--space-section); text-align: center; }
.signup h2 { font-size: clamp(1.75rem, 3vw, 2.1rem); margin: 0; }
.signup-intro { color: var(--gray); margin: .6rem 0 2rem; }
.inline-form { display: flex; gap: .75rem; max-width: 31rem; margin-inline: auto; }
.form-status { font-family: var(--ui); font-size: .88rem; color: var(--gray); min-height: 1.5em; margin: .9rem 0 0; }
.signup--compact { text-align: left; border-top: 1px solid var(--rule); padding-top: 2.5rem; margin-top: 4rem; }
.signup--compact h2 { font-size: 1.5rem; }
.signup--compact .signup-intro { margin-bottom: 1.25rem; }
.signup--compact .inline-form { margin-inline: 0; }
@media (max-width: 520px) { .inline-form { flex-direction: column; } }

/* =========================================================
   FORMS & ACTION BUTTON
   ========================================================= */
.field { display: block; margin-bottom: 1.4rem; text-align: left; }
.field-label { display: block; font-family: var(--ui); font-size: .88rem; color: var(--ink); margin-bottom: .4rem; }
input[type="email"], input[type="text"], input[type="search"], textarea {
  width: 100%; font: inherit; font-family: var(--ui); font-size: 1rem; color: var(--ink);
  background: transparent; border: 1px solid var(--gray); border-radius: 2px;
  padding: .8rem .95rem; min-height: 2.9rem;
  transition: border-color .2s, box-shadow .2s;
}
textarea { min-height: 10rem; resize: vertical; line-height: 1.55; }
input:focus, textarea:focus { outline: none; border-color: var(--fern); box-shadow: 0 0 0 1px var(--fern); }
::placeholder { color: var(--gray); opacity: 1; }
/* Every action button (Subscribe, Send Message, …) is fern green */
.btn-action {
  font-family: var(--ui); font-weight: 500; font-size: .9rem; letter-spacing: .02em;
  color: #fff; background: var(--fern); border: 0; border-radius: 2px;
  padding: .8rem 1.5rem; min-height: 2.9rem; cursor: pointer; white-space: nowrap;
  transition: background-color .2s;
}
.btn-action:hover { background: var(--fern-dark); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { margin-top: var(--space-section); border-top: 1px solid var(--rule); }
.footer-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  padding-block: 1.75rem 2.25rem; font-family: var(--ui); font-size: .85rem; color: var(--gray);
}
.footer-inner p { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.footer-links a { color: var(--gray); text-decoration: none; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .25em; }

/* =========================================================
   STANDARD PAGES
   ========================================================= */
.page { padding-top: clamp(4rem, 9vw, 7rem); }
.page-head { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.page-head h1 { margin: 0; font-size: clamp(2.25rem, 4.2vw, 3rem); line-height: 1.12; }
.page-intro { color: var(--gray); margin: .9rem 0 0; max-width: 34rem; }
.page-head.center { text-align: center; }
.about-name { margin: .6rem 0 0; font-size: clamp(1.3rem, 2.2vw, 1.55rem); color: var(--ink); }
.page-head.center .page-intro { margin-inline: auto; }

.prose { font-size: 1.25rem; line-height: 1.66; }
.prose p { margin: 0 0 1.15em; }
.prose h2 { font-size: 1.55rem; font-weight: 500; margin: 2.4em 0 .6em; }
.prose h2:first-child { margin-top: 0; }
.prose a { color: var(--fern-text); text-underline-offset: .2em; text-decoration-thickness: 1px; }
.prose ul { padding-left: 1.2em; margin: 0 0 1.15em; }
.prose li { margin-bottom: .35em; }

.coming-soon {
  text-align: center; padding-block: 3rem;
  font-family: var(--ui); font-size: .76rem; letter-spacing: .15em; text-transform: uppercase; color: var(--gray);
}

/* Portfolio grid */
.portfolio-section + .portfolio-section { margin-top: clamp(4.5rem, 9vw, 7rem); }
.section-title { font-size: clamp(1.6rem, 2.6vw, 1.95rem); margin: 0 0 2rem; }
.portfolio-section .coming-soon { text-align: left; padding: 0; }
.work-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: clamp(3rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 2.75rem);
}
.work-card { display: block; color: inherit; text-decoration: none; }
.work-card:hover .art img, .work-card:focus-visible .art img { transform: scale(1.03); }
/* The card's picture box (light green title placeholder now, a thumbnail later): a walnut frame,
   slightly raised, in the spirit of the homepage painting frames; it lifts a little on hover */
.work-card .art--card {
  border: 2px solid var(--walnut);   /* same frame as the homepage section paintings (.frame) */
  box-shadow: 0 1px 2px rgba(75, 56, 42, .12), 0 8px 18px -10px rgba(75, 56, 42, .35);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.work-card:hover .art--card, .work-card:focus-visible .art--card {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(75, 56, 42, .14), 0 14px 24px -12px rgba(75, 56, 42, .42);
}
.work-card .work-title { font-size: 1.55rem; margin: 1.15rem 0 .35rem; transition: color .2s; }
.work-card:hover .work-title, .work-card:focus-visible .work-title { color: var(--fern-text); }
.work-card p { margin: 0; color: var(--gray); font-size: 1.05rem; line-height: 1.5; }
.work-card .card-meta { font-family: var(--ui); font-size: .8rem; margin-top: .6rem; }
.work-card .card-action { display: inline-block; margin-top: .75rem; }

/* Level 2: work page */
.work-layout {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start;
}
.work-info h1 { margin: 0; font-size: clamp(2.25rem, 4.2vw, 3.1rem); line-height: 1.1; }
.work-meta { font-family: var(--ui); font-size: .88rem; color: var(--gray); margin: .9rem 0 2rem; }
.work-desc { margin-bottom: 2.25rem; }
.work-cta { margin: 0 0 3.5rem; }
.work-cta .text-link { font-size: 1.05rem; }
.chapter-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
.chapter-list li { display: flex; align-items: baseline; gap: 1.25rem; border-top: 1px solid var(--rule); }
.chapter-list .ch-link {
  flex: 1;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 0; min-height: 3rem; color: var(--ink); text-decoration: none; transition: color .2s;
}
.chapter-list .ch-link:hover { color: var(--fern-text); }
/* Shown only on finished chapters: reopens the chapter at page one */
.start-over {
  padding: .6rem 0; font-family: var(--ui); font-size: .82rem; white-space: nowrap;
  color: var(--fern-text); text-decoration: none; text-underline-offset: .25em;
}
.start-over:hover { text-decoration: underline; }
@media (max-width: 520px) {
  .chapter-list li { flex-wrap: wrap; row-gap: 0; }
  .chapter-list .ch-link { flex-basis: 100%; }
  .start-over { margin-top: -.6rem; padding-bottom: .9rem; }
}
.ch-name { font-size: 1.3rem; }
.ch-name small { display: block; font-size: 1rem; color: var(--gray); }
.ch-side { font-family: var(--ui); font-size: .82rem; color: var(--gray); white-space: nowrap; }
.ch-status--reading { color: var(--fern-text); }
.ch-status--read { color: var(--ink); }
/* Groups (Book 1, Part One, The Roses Fly…) in the chapter list: the larger division, its chapters set in
   beneath it. The name enters or resumes the group; the small arrow beside it only opens or closes the list. */
.chapter-list .ch-group { display: block; }
.ch-group-row { display: flex; align-items: center; gap: 1rem; padding: 1.6rem 0 1rem; }
.chapter-list > .ch-group:first-child > .ch-group-row { padding-top: 1.1rem; }
.ch-group-link { flex: 1; min-width: 0; color: var(--ink); text-decoration: none; }
.ch-group-label { display: block; font-family: var(--ui); font-weight: 500; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); }
.ch-group-title { display: block; font-size: 1.5rem; line-height: 1.25; transition: color .2s; }
.ch-group-label + .ch-group-title { margin-top: .25rem; }
a.ch-group-link:hover .ch-group-title, a.ch-group-link:focus-visible .ch-group-title { color: var(--fern-text); }
.ch-group--2 .ch-group-title, .ch-group--3 .ch-group-title { font-size: 1.3rem; }
.ch-toggle {
  flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-right: -.7rem;
  background: none; border: 0; border-radius: 50%; color: var(--gray); cursor: pointer; transition: color .2s;
}
.ch-toggle:hover { color: var(--fern-text); }
.ch-toggle svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.ch-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }   /* ▸ closed, ▾ open */
.ch-children { list-style: none; margin: 0 0 .4rem; padding: 0 0 0 clamp(1rem, 3vw, 1.75rem); }
@media (max-width: 820px) {
  .work-layout { grid-template-columns: minmax(0, 1fr); }
  .work-art { max-width: 26rem; }
}

/* Staring */
.post-date { display: block; font-family: var(--ui); font-size: .82rem; color: var(--gray); }
.post-head { margin-bottom: 3rem; }
.post-head h1 { font-size: clamp(2.1rem, 4vw, 2.75rem); margin: 0; line-height: 1.15; }
.post-head .post-date { margin-top: .6rem; }

/* Staring feed: numbered entries under quiet month labels, separated by hairlines */
.staring-utility { margin: 1rem 0 0; font-family: var(--ui); font-size: .85rem; color: var(--gray); }
.feed-month + .feed-month { margin-top: clamp(3.5rem, 7vw, 5rem); }
.feed-month-label { margin: 0 0 1.75rem; }
.entry { padding-block: clamp(2.25rem, 4.5vw, 3rem); }
.entry:first-of-type { padding-top: 0; }
.entry + .entry { border-top: 1px solid var(--rule); }
.entry-number { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2rem); line-height: 1.15; }
.entry-descriptor { margin: .3rem 0 0; font-style: italic; font-size: 1.25rem; line-height: 1.35; color: var(--ink); }
.entry-head .post-date { margin-top: .5rem; }
.entry-body { margin-top: 1.25rem; }
.entry-body > :last-child { margin-bottom: 0; }
.entry-link { margin: 1.25rem 0 0; }
/* Staring entries further down the feed fade up into view as they're scrolled to (class added by the
   script, so without it, or with reduced motion, entries are simply visible) */
.entry.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.entry.reveal.is-revealed { opacity: 1; transform: none; }
@media print { .entry.reveal { opacity: 1; transform: none; } }
.permalink { font-family: var(--ui); font-size: .8rem; color: var(--gray); text-decoration: none; text-underline-offset: .25em; }
.permalink:hover { color: var(--ink); text-decoration: underline; }
.feed-pager {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.75rem; border-top: 1px solid var(--rule);
}
.archive-year + .archive-year { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.archive-year-label { margin: 0 0 .75rem; font-size: 1.6rem; }
.archive-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
.archive-list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1rem 0; border-top: 1px solid var(--rule); color: var(--ink); text-decoration: none; transition: color .2s;
}
.archive-list a:hover { color: var(--fern-text); }
.archive-month { font-size: 1.3rem; }
.archive-count { font-family: var(--ui); font-size: .85rem; color: var(--gray); }
.crumb { margin-bottom: 2.5rem; }

/* Terms of Use agreement shown before a reader's first chapter or essay */
.terms-form { margin-top: 2.25rem; }
.terms-check { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1.6rem; font-family: var(--ui); font-size: 1rem; line-height: 1.5; color: var(--ink); }
.terms-check input { flex: none; width: 1.2rem; height: 1.2rem; margin: .15rem 0 0; accent-color: var(--fern); cursor: pointer; }
.terms-check label { cursor: pointer; }
.terms-check a { color: var(--fern-text); text-underline-offset: .2em; text-decoration-thickness: 1px; }   /* as links in the text above */
.terms-form .btn-action:disabled { opacity: .45; cursor: not-allowed; }
.terms-form .btn-action:disabled:hover { background: var(--fern); }
.terms-leave { margin-top: 2.75rem; }

/* Contact */
.contact-form { max-width: 34rem; }
.contact-alt { font-family: var(--ui); font-size: .92rem; color: var(--gray); margin-top: 2.5rem; }

/* =========================================================
   SEARCH
   ========================================================= */
.search-dialog {
  border: 0; padding: 0; margin: 0; inset: 0 0 auto 0;
  width: 100%; max-width: 100%; max-height: 100dvh;
  background: var(--ivory); color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.search-dialog[open] { animation: search-in .22s var(--ease); }
.search-dialog::backdrop { background: rgba(36, 36, 34, .25); }
@keyframes search-in { from { opacity: 0; transform: translateY(-6px); } }
.search-inner { max-width: calc(44rem + 2 * var(--gutter)); margin: 0 auto; padding: 1.5rem var(--gutter) 2rem; }
.search-bar { display: flex; align-items: center; gap: 1rem; }
.search-bar input {
  border: 0; border-bottom: 1px solid var(--gray); border-radius: 0; padding: .6rem 0;
  font-family: var(--ui); font-size: clamp(1.15rem, 2.4vw, 1.35rem); box-shadow: none;
}
.search-bar input:focus { box-shadow: none; border-bottom-color: var(--fern); }
.search-bar input::-webkit-search-cancel-button { display: none; }
.search-close { font-size: 1.6rem; font-family: var(--ui); }
.search-summary { font-family: var(--ui); font-size: .82rem; color: var(--gray); margin: 1rem 0 0; min-height: 1.3em; }
.search-results { list-style: none; margin: .5rem 0 0; padding: 0; max-height: min(60vh, 32rem); overflow-y: auto; }
.search-results a { display: block; padding: .9rem 0; text-decoration: none; color: var(--ink); border-top: 1px solid var(--rule); }
.search-results a:hover .sr-title, .search-results a:focus-visible .sr-title { color: var(--fern-text); }
.sr-type { font-family: var(--ui); font-size: .66rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--fern-text); }
.sr-title { display: block; font-size: 1.25rem; transition: color .2s; }
.sr-snippet { display: block; font-size: 1rem; color: var(--gray); line-height: 1.5; margin-top: .15rem; }
.search-results mark { background: var(--sage); color: inherit; padding: 0 .1em; }

/* =========================================================
   LEVEL 3: FICTION READER (no site chrome)
   ========================================================= */
.reader {
  --r-bg: #F6F1E6; --r-ink: #242422; --r-muted: #66625A; --r-rule: #D8D3C8; --r-accent: var(--fern);
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; height: 100vh; height: 100dvh;
  background: var(--r-bg); color: var(--r-ink);
  transition: background-color .3s, color .3s;
}
.reader[data-theme="warm"] { --r-bg: #EBDDC3; --r-ink: #2E2A24; --r-muted: #5F5548; --r-rule: #D6C6A8; --r-accent: var(--fern); }
.reader[data-theme="dark"] { --r-bg: #1C1C1A; --r-ink: #DCD7CB; --r-muted: #9E998F; --r-rule: #3A3936; --r-accent: #A3B897; }

.reader-top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.5rem; padding: .5rem clamp(1rem, 3vw, 2rem) 0;
  font-family: var(--ui); font-size: .82rem; color: var(--r-muted);
}
.reader-top .reader-work { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-close {
  display: grid; place-items: center; flex: none;
  width: 2.75rem; height: 2.75rem; margin-right: -.6rem; border-radius: 50%;
  font-family: var(--ui); font-size: 1.6rem; line-height: 1; font-weight: 400;
  color: var(--r-muted); text-decoration: none; transition: color .2s;
}
.reader-close:hover { color: var(--r-ink); }
.reader :focus-visible { outline-color: var(--r-accent); }

.reader-stage {
  flex: 1; min-height: 0; display: flex; justify-content: center;
  padding: clamp(.75rem, 3.5vh, 2.75rem) clamp(1.25rem, 5vw, 3rem) clamp(.5rem, 2vh, 1.5rem);
}
.reader-viewport { position: relative; height: 100%; width: 100%; overflow: hidden; overflow: clip; }
.reader[data-spread] .reader-viewport::after {
  content: ""; position: absolute; top: 4%; bottom: 4%; left: 50%; width: 1px; background: var(--r-rule);
}
.reader-flow {
  height: 100%; column-fill: auto;
  font-family: var(--serif); font-size: var(--reader-size, 20px); line-height: 1.62;
  hyphens: manual; will-change: transform;
  transition: transform .32s var(--ease);
}
.reader-flow p { margin: 0; text-indent: 1.4em; orphans: 2; widows: 2; }
.reader-flow .chapter-head + p, .reader-flow .ph-note + p, .reader-flow .noindent { text-indent: 0; }
.reader-flow .ph-note { text-indent: 0; font-family: var(--ui); font-size: .7em; color: var(--r-muted); margin-bottom: 1.5em; }
.chapter-head { text-align: center; padding: 14% 0 2.25em; break-inside: avoid; }
.chapter-kicker { margin: 0 0 .6em; font-family: var(--ui); font-size: .58em; letter-spacing: .15em; text-transform: uppercase; color: var(--r-muted); text-indent: 0 !important; }
.chapter-head h1 { margin: 0; font-size: 1.75em; line-height: 1.2; }
/* A group's name (Book One / The Roses Fly…) above a chapter's heading, or alone on the group's title page.
   Four sizes, chosen per group in WordPress; all relative to the reader's text size (so they follow A−/A+),
   capped by the screen width so long names wrap rather than overflow on phones. The first line is set in
   spaced capitals, a second line (the group's title, when it has a label too) in the ordinary serif. */
.group-head { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1.15; text-wrap: balance; overflow-wrap: break-word; }
.chapter-head .group-head { text-indent: 0; margin: 0 0 1.25em; }   /* not the reader's paragraph indent or spacing */
.group-head .group-label { display: block; font-size: var(--g-main); text-transform: uppercase; letter-spacing: .12em; }
.group-head .group-title { display: block; font-size: var(--g-sub); margin-top: .4em; }
.group-head--small   { --g-main: .9em;               --g-sub: .95em; }
.group-head--medium  { --g-main: min(1.3em, 6.5vw);  --g-sub: min(1.1em, 5.5vw); }
.group-head--large   { --g-main: min(1.75em, 8vw);   --g-sub: min(1.3em, 6.5vw); }
.group-head--display { --g-main: min(2.35em, 10vw);  --g-sub: min(1.55em, 7.5vw); }
/* on its own title page the same four choices are set larger */
.chapter-head h1.group-head { font-size: 1em; line-height: 1.15; margin: 0; }
.group-head--page.group-head--small   { --g-main: min(1.25em, 6vw);  --g-sub: 1.05em; }
.group-head--page.group-head--medium  { --g-main: min(1.75em, 8vw);  --g-sub: min(1.25em, 6vw); }
.group-head--page.group-head--large   { --g-main: min(2.35em, 10vw); --g-sub: min(1.5em, 7vw); }
.group-head--page.group-head--display { --g-main: min(3.7em, 13vw);  --g-sub: min(2.1em, 9vw); }
/* under a group's name, the chapter's own title steps down a little so the group reads as the larger division */
.chapter-head--grouped h1 { font-size: 1.4em; }
.chapter-end { text-align: center; padding-top: 3em; break-inside: avoid; }
.chapter-end p { text-indent: 0; }
.chapter-end .end-mark { font-family: var(--ui); font-size: .58em; letter-spacing: .15em; text-transform: uppercase; color: var(--r-muted); margin-bottom: 1.25em; }
.chapter-end a { color: var(--r-accent); font-family: var(--ui); font-size: .8em; text-decoration: none; }
.chapter-end a:hover { text-decoration: underline; text-underline-offset: .25em; }
.flow-end { display: inline-block; width: 1px; height: 1px; }
/* Manual page break: the reader sets its height so the next content starts a new page */
.reader-flow .page-break { display: block; height: 0; }
/* A division's own page (Part I / The Roses Fly): the heading alone, centred on the page */
.reader-flow .division-page { min-height: 100%; display: flex; flex-direction: column; justify-content: center; }
.division-page .chapter-head { padding: 0 0 8%; }   /* a touch above centre, like a printed title page */
.division-body { margin-top: 2.25em; text-align: center; }
.reader-flow .division-body p { text-indent: 0; }

.reader-bottom {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .9rem;
  padding: .6rem clamp(1rem, 3vw, 2rem) max(.9rem, env(safe-area-inset-bottom));
}
.reader-btn {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  background: transparent; color: var(--r-ink); border: 1px solid var(--r-rule); border-radius: 50%;
  font-family: var(--ui); font-size: 1.05rem; cursor: pointer; transition: border-color .2s, opacity .2s;
}
.reader-btn:hover:not(:disabled) { border-color: var(--r-accent); }
.reader-btn:disabled { opacity: .3; cursor: default; }
.reader-btn.aa { font-size: .95rem; }
.progress { text-align: center; padding-inline: .5rem; }
.progress-track { height: 2px; background: var(--r-rule); max-width: 22rem; margin-inline: auto; }
.progress-track span { display: block; height: 100%; width: 0; background: var(--r-accent); transition: width .32s var(--ease); }
.page-count { margin: .45rem 0 0; font-family: var(--ui); font-size: .76rem; color: var(--r-muted); font-variant-numeric: tabular-nums; }

.reader-settings {
  position: absolute; right: clamp(1rem, 3vw, 2rem); bottom: calc(100% + .25rem); z-index: 2;
  width: min(17rem, calc(100vw - 2rem));
  background: var(--r-bg); color: var(--r-ink); border: 1px solid var(--r-rule); border-radius: 3px;
  padding: 1.1rem 1.15rem; box-shadow: 0 8px 28px rgba(0, 0, 0, .08);
  font-family: var(--ui);
}
.reader-settings[hidden] { display: none; }
.set-group + .set-group { margin-top: 1rem; }
.set-label { display: block; font-size: .66rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--r-muted); margin-bottom: .45rem; }
.seg { display: flex; border: 1px solid var(--r-rule); border-radius: 2px; }
.seg button {
  flex: 1; min-height: 2.5rem; background: transparent; color: var(--r-ink); border: 0; cursor: pointer;
  font-family: var(--ui); font-size: .88rem;
}
.seg button + button { border-left: 1px solid var(--r-rule); }
.seg button[aria-pressed="true"] { background: var(--r-ink); color: var(--r-bg); }
.seg button:disabled { opacity: .35; cursor: default; }

/* Reader responses at the end of a chapter: the rating, and a link that opens the comments sheet */
.chapter-end .rating { justify-content: center; margin: 0 0 1.4em; }
.chapter-end .end-responses { margin: 0 0 1em; }
.chapter-end .responses-open {
  background: none; border: 0; padding: .3em 0; cursor: pointer;
  color: var(--r-accent); font-family: var(--ui); font-size: .8em;
}
.chapter-end .responses-open:hover { text-decoration: underline; text-underline-offset: .25em; }
.responses-sheet {
  position: absolute; inset: 0; z-index: 4; overflow-y: auto; overscroll-behavior: contain;
  background: var(--r-bg); color: var(--r-ink);
}
.responses-sheet[hidden] { display: none; }
.responses-inner { position: relative; max-width: 38rem; margin: 0 auto; padding: 4.5rem clamp(1.25rem, 5vw, 3rem) 4rem; }
/* The sheet's × sits exactly where the reader's own × does */
.responses-sheet .responses-close { position: fixed; top: .625rem; right: calc(clamp(1rem, 3vw, 2rem) - .6rem); margin: 0; z-index: 5; background: var(--r-bg); }
/* Inside the reader, comments and stars take the reader's page colours (light, warm, dark) */
.reader .comments, .reader .rating { --ink: var(--r-ink); --gray: var(--r-muted); --rule: var(--r-rule); --fern-text: var(--r-accent); }
.reader .rating.is-mine .stars-fill { color: var(--r-accent); }

/* Essay reader: scrolling, still chrome-free */
.essay-reader { min-height: 100vh; padding: clamp(4.5rem, 12vh, 8rem) var(--gutter) 6rem; }
.essay-reader .reader-close { position: fixed; top: .75rem; right: clamp(1rem, 3vw, 2rem); background: var(--ivory); color: var(--gray); }
.essay-reader .reader-close:hover { color: var(--ink); }
.essay-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--fern); z-index: 5; }
.essay-reader article { max-width: 38rem; margin: 0 auto; }
.essay-reader header { text-align: center; margin-bottom: 3.5rem; }
.essay-reader h1 { font-size: clamp(2.2rem, 4.5vw, 3rem); margin: .5rem 0 0; line-height: 1.12; }
.essay-end { text-align: center; margin-top: 4rem; }

/* =========================================================
   READER RESPONSES: star ratings and anonymous comments
   (after essays and Staring entries, on story pages, and at the end of chapters)
   ========================================================= */
.rating { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .85rem; }
.stars { position: relative; display: inline-flex; flex: none; cursor: pointer; touch-action: manipulation; border-radius: 2px; }
.stars:focus-visible { outline: 2px solid var(--fern); outline-offset: 3px; }
.stars svg { display: block; flex: none; width: 1.35rem; height: 1.35rem; stroke: currentColor; stroke-width: 1.1; stroke-linejoin: round; }
.stars-base { display: flex; color: var(--gray); }
.stars-base svg { fill: none; }
.stars-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; display: flex; overflow: hidden; color: var(--gray); pointer-events: none; }
.stars-fill svg { fill: currentColor; }
.rating.is-mine .stars-fill { color: var(--fern); }   /* your own rating (or the one you're choosing); otherwise the average */
.rating-summary { font-family: var(--ui); font-size: .82rem; color: var(--gray); font-variant-numeric: tabular-nums; }
.work-info .rating { margin: -1rem 0 2rem; }

.responses { margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--rule); }
.responses .rating + .comments { margin-top: 2.75rem; }
.comments .label { margin-bottom: 1.25rem; }
.comment-list { list-style: none; margin: 0 0 2rem; padding: 0; }
.comment-list:empty { display: none; }
.comment { padding: 1.1rem 0; border-top: 1px solid var(--rule); }
.comment:last-child { border-bottom: 1px solid var(--rule); }
.comment-meta { margin: 0 0 .35rem; font-family: var(--ui); font-size: .8rem; color: var(--gray); }
.comment-text { margin: 0; font-family: var(--serif); font-size: 1.15rem; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.comment-act {
  background: none; border: 0; padding: .3rem 0; margin-left: 1rem; cursor: pointer;
  font-family: var(--ui); font-size: inherit; color: var(--fern-text); text-underline-offset: .2em;
}
.comment-act:hover { text-decoration: underline; }
.comments-empty { font-family: var(--ui); font-size: .88rem; color: var(--gray); margin: 0 0 1.5rem; }
.comment-form textarea, .comment-edit textarea { min-height: 7rem; }
.comment-note { font-family: var(--ui); font-size: .8rem; color: var(--gray); margin: .6rem 0 0; }
.comment-form .btn-action { margin-top: 1rem; }
.comment-edit-actions { display: flex; align-items: center; margin: .75rem 0 0; }
.comment-edit .form-status { margin-top: .4rem; }

/* =========================================================
   WRITING FROM WORDPRESS
   Images and captions placed inside a post, essay or chapter,
   and the brief loading state while content arrives.
   ========================================================= */
.prose figure { margin: 1.75em 0; }
.prose img, .reader-flow img { height: auto; }
.prose figcaption, .reader-flow figcaption { margin-top: .6rem; font-family: var(--ui); font-size: .8rem; color: var(--gray); }
.reader-flow figure { margin: 1.25em 0; break-inside: avoid; }
.reader-flow img { break-inside: avoid; max-height: 70vh; margin-inline: auto; }
.page-loading { min-height: 40vh; margin: 0; font-family: var(--ui); font-size: .9rem; color: var(--gray); }

/* =========================================================
   MOTION PREFERENCES
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .work-card:hover .art--card, .work-card:focus-visible .art--card { transform: none; }   /* no lift; the deeper shadow still shows hover */
}