/* =========================================================
   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: -60% -20%;
  background: radial-gradient(closest-side,
    rgba(246, 241, 230, .72) 0%, rgba(246, 241, 230, .5) 45%, rgba(246, 241, 230, .2) 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); }
.work-card .work-title { font-size: 1.55rem; margin: 1.15rem 0 .35rem; transition: color .2s; }
.work-card:hover .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); }
@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; }
.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; }

/* 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; }
.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; }

.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; }

/* 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; }

/* =========================================================
   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; }
}