/* ============================================================
   Lynda DuBois site stylesheet
   Fonts: Libre Baskerville (display) + IBM Plex Sans (text)
   ============================================================ */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; line-height: 1.5; scroll-behavior: smooth; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
b, strong { font-weight: bolder; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; }
a { color: inherit; text-decoration: none; }
img, svg, video, canvas { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
.sr-only {
  clip-path: inset(50%); white-space: nowrap; border-width: 0;
  width: 1px; height: 1px; margin: -1px; padding: 0; position: absolute; overflow: hidden;
}

/* ---------- design tokens ---------- */
:root {
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Libre Baskerville", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

  --radius: .25rem;
  --background:         oklch(97.5% .008 330);
  --foreground:         oklch(13%   .008  20);
  --card:               oklch(99.5% .004  50);
  --card-foreground:    oklch(13%   .008  20);
  --primary:            oklch(34%   .115  20);
  --primary-foreground: oklch(98%   .005  50);
  --secondary:          oklch(88%   .028 330);
  --secondary-foreground: oklch(18% .01   20);
  --muted:              oklch(93%   .012  40);
  --muted-foreground:   oklch(47%   .025  20);
  --accent:             oklch(78%   .035  25);
  --accent-foreground:  oklch(16%   .01   20);
  --border:             oklch(82%   .018  25);
  --input:              oklch(82%   .018  25);
}

* { border-color: var(--border); }

body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  letter-spacing: 0;
}

h1, h2, h3, .brand { font-family: var(--font-serif); }
h1, h2, h3, p { margin-top: 0; }
img { max-width: 100%; display: block; }

/* ---------- header ---------- */
/* --hdr runs 0 (top of page) to 1 (scrolled). Everything below interpolates
   off it, so the bar fades from solid black to a translucent pane and shrinks
   as you scroll, rather than snapping between two states. */
.site-header {
  --hdr: 0;
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--foreground);                     /* fallback */
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--background) calc(74% * var(--hdr)), transparent),
      color-mix(in oklab, var(--background) calc(52% * var(--hdr)), transparent)),
    color-mix(in oklab, var(--foreground) calc(100% - 100% * var(--hdr)), transparent);
  color: var(--primary-foreground);                  /* fallback */
  color: color-mix(in oklab, var(--foreground) calc(100% * var(--hdr)), var(--primary-foreground));
  border-bottom: 1px solid color-mix(in oklab, var(--foreground) calc(15% * var(--hdr)), transparent);
  -webkit-backdrop-filter: blur(calc(15px * var(--hdr))) saturate(calc(1 + .25 * var(--hdr)));
  backdrop-filter: blur(calc(15px * var(--hdr))) saturate(calc(1 + .25 * var(--hdr)));
  box-shadow: 0 8px 26px oklch(20% .01 20 / calc(.09 * var(--hdr)));
}
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1360px;
  margin: auto;
  padding: 0 3rem;
  min-height: calc(90px - 32px * var(--hdr));
}
.brand { display: flex; align-items: center; }
.brand img {
  width: auto;
  height: calc(48px - 17px * var(--hdr));
  transition: opacity .25s;
}
.brand:hover img { opacity: .78; }

.desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 1.7vw, 1.8rem);
  white-space: nowrap;
  font-size: 11px;
}
.desktop-nav a { color: inherit; opacity: .66; transition: opacity .25s; }
.desktop-nav a:hover, .desktop-nav a.active { opacity: 1; }

.mobile-nav { display: none; }

/* ---------- footer ---------- */
footer {
  background: var(--foreground);
  color: var(--primary-foreground);
  padding: 5rem max(5vw, 3rem) 0;
}
.ft-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, .9fr);
  gap: 3rem;
  max-width: 1360px;
  margin: auto;
  padding-bottom: 4rem;
}
.ft-brand img { width: auto; height: 62px; margin-bottom: 1.1rem; }
.ft-brand .ft-name {                   /* her name under the pen, as in her logo lockup */
  max-width: none;
  margin: 0 0 1rem;
  font-family: var(--font-serif);
  font-size: 15px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: oklch(76% .09 80);
}
.ft-brand p {
  color: color-mix(in oklab, var(--primary-foreground) 55%, transparent);
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.7;
  max-width: 26ch;
}
footer .eyebrow { color: var(--accent); margin-bottom: 1.1rem; }
.ft-map > div { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
.ft-map a, .ft-reach a {
  display: block;
  color: color-mix(in oklab, var(--primary-foreground) 66%, transparent);
  font-size: 12px;
  padding: .38rem 0;
  transition: color .25s;
}
.ft-map a:hover, .ft-reach a:hover { color: var(--primary-foreground); }
.ft-reach .eyebrow:nth-of-type(2) { margin-top: 2rem; }
.ft-mail { word-break: break-all; }
.ft-base {
  border-top: 1px solid oklch(100% 0 0 / .12);
  max-width: 1360px;
  margin: auto;
  padding: 1.6rem 0 2rem;
}
.ft-base p {
  color: color-mix(in oklab, var(--primary-foreground) 40%, transparent);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---------- shared pieces ---------- */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--primary);
  font-size: 10px;
  font-weight: 600;
}
.cta, .text-link {
  align-items: center;
  gap: .65rem;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}
.cta {
  background: var(--primary);
  width: max-content;
  color: var(--primary-foreground);
  padding: .9rem 1.1rem;
  transition: all .25s;
}
.cta:hover { background: var(--foreground); transform: translateY(-2px); }
.text-link { border-bottom: 1px solid var(--foreground); padding: .5rem 0; }
.actions { flex-wrap: wrap; align-items: center; gap: 1.5rem; display: flex; }

/* ---------- home hero ---------- */
.home-hero {
  background: var(--secondary);
  grid-template-columns: minmax(0, 1fr) minmax(380px, .8fr);
  min-height: 660px;
  display: grid;
  overflow: hidden;
}
.hero-copy {
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 7vw, 8rem);
  display: flex;
}
.hero-copy h1 {
  max-width: 850px;
  margin: .7rem 0 2rem;
  font-size: clamp(3.2rem, 6vw, 6.8rem);
  line-height: .98;
}
.hero-copy em { color: var(--primary); font-weight: 400; }
.hero-copy > p:not(.eyebrow) {
  max-width: 650px;
  color: var(--muted-foreground);
  font-size: 17px;
  line-height: 1.8;
}
.portrait-wrap { background: var(--accent); min-height: 620px; position: relative; }
.portrait-wrap img { object-fit: cover; object-position: center top; width: 100%; height: 100%; }
.portrait-caption {
  background: var(--foreground);
  color: var(--primary-foreground);
  text-transform: uppercase;
  letter-spacing: .16em;
  padding: 1rem 1.5rem;
  font-size: 10px;
  position: absolute;
  bottom: 0;
  right: 0;
}

/* ---------- featured band ---------- */
.featured-band {
  background: var(--foreground);
  color: var(--primary-foreground);
  grid-template-columns: 320px minmax(0, 650px) 1fr;
  align-items: center;
  gap: clamp(2rem, 7vw, 7rem);
  padding: 5rem max(5vw, 2rem);
  display: grid;
}
.featured-band .book-stage { justify-content: center; display: flex; }
.featured-band img {
  width: auto;
  height: 390px;
  box-shadow: 22px 26px 0 var(--primary);
  transition: all .3s;
}
.featured-band img:hover { transform: translateY(-8px); }
.featured-band h2, .section-heading h2, .journal-feature h2, .poem-feature h2, .newsletter h2 {
  font-size: clamp(2rem, 4vw, 4.2rem);
  line-height: 1.1;
}
.featured-band p:not(.eyebrow) { color: var(--primary-foreground); line-height: 1.8; }
@supports (color: color-mix(in lab, red, red)) {
  .featured-band p:not(.eyebrow) { color: color-mix(in oklab, var(--primary-foreground) 68%, transparent); }
}
.featured-band .eyebrow { color: var(--accent); }
.featured-band > svg { color: var(--primary); justify-self: end; }

/* ---------- sections ---------- */
.section-shell { max-width: 1360px; margin: auto; padding: 7rem 3rem; }
.section-heading {
  grid-template-columns: 1fr 2fr auto;
  align-items: end;
  gap: 2rem;
  margin-bottom: 3rem;
  display: grid;
}
.section-heading h2 { margin: 0; }

.book-row { grid-template-columns: repeat(6, 1fr); gap: 1.5rem; display: grid; }
.book-row article { min-width: 0; }
.book-row img, .catalog img {
  aspect-ratio: 2/3;
  object-fit: cover;
  width: 100%;
  transition: all .3s;
  box-shadow: 0 15px 30px oklch(15% .01 20 / .16);
}
.book-row img:hover, .catalog img:hover { transform: translateY(-7px); }
.book-row h3, .catalog h3 { margin-top: 1rem; font-size: 14px; }

.editorial-grid { grid-template-columns: 2fr 1fr; display: grid; }
.journal-feature { background: var(--muted); grid-template-columns: 1.05fr 1fr; display: grid; }
.journal-feature img { object-fit: cover; width: 100%; height: 100%; min-height: 520px; }
.journal-feature > div, .poem-feature {
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 6vw, 6rem);
  display: flex;
}
.journal-feature p:not(.eyebrow) { line-height: 1.8; }
.poem-feature { background: var(--primary); color: var(--primary-foreground); }
.poem-feature .eyebrow { color: var(--accent); }
.poem-feature blockquote {
  font-family: var(--font-serif);
  margin: 1rem 0 2.5rem;
  font-size: 20px;
  font-style: italic;
  line-height: 1.8;
}
.poem-feature .cta { background: var(--primary-foreground); color: var(--primary); }

.pathways > div:first-child {
  justify-content: space-between;
  align-items: end;
  margin-bottom: 3rem;
  display: flex;
}
.pathways h2 { margin: 0; font-size: clamp(2.5rem, 5vw, 5rem); }
.path-grid {
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  grid-template-columns: repeat(2, 1fr);
  display: grid;
}
.path-grid a {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  min-height: 220px;
  padding: 2.5rem;
  transition: all .25s;
}
.path-grid a:hover { background: var(--secondary); }
.path-grid span { color: var(--primary); font-size: 11px; }
.path-grid h3 { margin: 2.5rem 0 .6rem; font-size: 25px; }
.path-grid p { color: var(--muted-foreground); }

.newsletter {
  background: var(--secondary);
  grid-template-columns: auto 1fr 1fr;
  align-items: center;
  gap: 2rem;
  padding: 5rem max(5vw, 2rem);
  display: grid;
}
.newsletter h2 { margin: .5rem 0; }
.newsletter form { border-bottom: 1px solid var(--foreground); display: flex; }
.newsletter input { background: 0 0; border: 0; outline: 0; flex: 1; padding: 1rem; }
.newsletter button { cursor: pointer; background: 0 0; border: 0; font-weight: 600; }

/* ---------- footer ---------- */
/* ---------- interior page hero ---------- */
.page-hero {
  background: var(--secondary);
  grid-template-columns: .85fr 1.15fr;
  min-height: 520px;
  display: grid;
}
.page-hero > div {
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 8vw, 8rem);
  display: flex;
}
.page-hero h1, .title-intro h1, .service-hero h1 {
  font-size: clamp(3.5rem, 7vw, 7rem);
  line-height: 1;
}
.page-hero img { object-fit: cover; width: 100%; height: 100%; max-height: 620px; }

.story-layout, .wolf-intro, .upcoming-feature, .author-note, .next-work {
  grid-template-columns: 1.2fr .8fr;
  align-items: center;
  gap: 7rem;
  max-width: 1180px;
  margin: auto;
  padding: 7rem 3rem;
  display: grid;
}
.story-copy p, .wolf-intro p, .upcoming-feature p, .author-note p, .guest-list p {
  color: var(--muted-foreground);
  font-size: 16px;
  line-height: 1.9;
}
.story-layout img { object-fit: cover; width: 100%; height: 380px; }

.title-intro { background: var(--secondary); padding: 7rem max(5vw, 3rem) 4rem; }
.title-intro h1 { margin: .5rem 0; }

/* ---------- blog ---------- */
.post-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  max-width: 1260px;
  margin: auto;
  padding: 5rem 3rem 8rem;
  display: grid;
}
.post-grid article {
  border-top: 1px solid var(--border);
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  padding-top: 2rem;
  display: grid;
}
.post-grid .lead-post { border: 0; grid-column: 1 / -1; grid-template-columns: 1.2fr 1fr; }
.post-grid img { object-fit: cover; width: 100%; height: 220px; }
.post-grid .lead-post img { height: 430px; }
.post-grid h2 { font-size: clamp(1.5rem, 3vw, 2.7rem); }
.post-grid p:not(.eyebrow) { color: var(--muted-foreground); line-height: 1.7; }

/* ---------- books ---------- */
.new-release {
  background: var(--foreground);
  color: var(--primary-foreground);
  grid-template-columns: 360px 1fr;
  align-items: center;
  gap: 7rem;
  padding: 6rem max(8vw, 3rem);
  display: grid;
}
.new-release img { max-height: 560px; box-shadow: 22px 25px 0 var(--primary); }
.new-release h2 { font-size: clamp(2rem, 4vw, 4rem); }
.new-release p { color: var(--primary-foreground); line-height: 1.8; }
@supports (color: color-mix(in lab, red, red)) {
  .new-release p { color: color-mix(in oklab, var(--primary-foreground) 65%, transparent); }
}
.catalog { grid-template-columns: repeat(4, 1fr); gap: 3.5rem 2rem; display: grid; }

/* ---------- wolf coat ---------- */
.wolf-intro { grid-template-columns: 330px 1fr; }
.wolf-intro > img { box-shadow: 22px 22px 0 var(--primary); }
.wolf-intro h2, .reviews h2, .author-note h2, .upcoming-feature h2, .next-work h2, .guest-list h2 {
  font-size: clamp(2.2rem, 4vw, 4rem);
}
.reviews { background: var(--primary); color: var(--primary-foreground); padding: 7rem max(8vw, 3rem); }
.reviews .eyebrow { color: var(--accent); }
.reviews > div { grid-template-columns: 1fr 1fr; gap: 5rem; margin-top: 3rem; display: grid; }
.reviews blockquote { font-family: var(--font-serif); margin: 0; font-size: 18px; line-height: 1.8; }
.reviews cite, .testimonial cite {
  font-family: var(--font-sans);
  margin-top: 2rem;
  font-size: 12px;
  font-style: normal;
  display: block;
}
.author-note { grid-template-columns: 1fr 1fr; }
.author-note img { object-fit: cover; width: 100%; height: 560px; }
.signature { font-family: var(--font-serif); font-style: italic; }

/* ---------- upcoming ---------- */
.upcoming-feature { grid-template-columns: 360px 1fr; }
.upcoming-feature img { box-shadow: 18px 22px 0 var(--secondary); }
.next-work {
  background: var(--foreground);
  max-width: none;
  color: var(--primary-foreground);
  grid-template-columns: 1fr 1fr;
  padding: 0;
}
.next-work > div { padding: 6rem max(8vw, 3rem); }
.next-work img { object-fit: cover; width: 100%; height: 440px; }

/* ---------- guest writers ---------- */
.guest-list { max-width: 1180px; margin: auto; padding: 7rem 3rem; }
.guest-list article {
  border-top: 1px solid var(--border);
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 6rem;
  padding: 4rem 0;
  display: grid;
}
.guest-list article:first-child { max-width: 800px; display: block; }
.guest-list img { max-height: 430px; margin: auto; }

/* ---------- poetry ---------- */
.poems { max-width: 1050px; margin: auto; padding: 6rem 3rem; }
.poems article {
  border-top: 1px solid var(--border);
  grid-template-columns: 1fr 360px;
  gap: 6rem;
  padding: 5rem 0;
  display: grid;
}
.poems article:first-child { grid-template-columns: 1fr; }
.poems h2 { font-size: clamp(2rem, 4vw, 4rem); }
.poems img { object-fit: cover; width: 100%; max-height: 520px; }
.poem-lines { font-family: var(--font-serif); font-size: 17px; line-height: 1.65; }

/* ---------- gallery ---------- */
.gallery-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 1300px;
  margin: auto;
  padding: 5rem 3rem 8rem;
  display: grid;
}
.gallery-grid figure { min-height: 380px; margin: 0; position: relative; overflow: hidden; }
.gallery-grid figure.wide { grid-column: span 2; }
.gallery-grid img { object-fit: cover; width: 100%; height: 100%; transition: all .5s; }
.gallery-grid figure:hover img { transform: scale(1.035); }
.gallery-grid figcaption {
  color: var(--primary-foreground);
  font-family: var(--font-serif);
  background: linear-gradient(#0000, oklch(10% 0 0 / .8));
  padding: 2rem 1.5rem 1rem;
  position: absolute;
  inset: auto 0 0;
}

/* ---------- services ---------- */
.service-hero {
  background: var(--foreground);
  color: var(--primary-foreground);
  padding: 8rem max(10vw, 3rem);
}
.service-hero .eyebrow { color: var(--accent); }
.service-hero > p:last-child { max-width: 650px; color: var(--primary-foreground); line-height: 1.8; }
@supports (color: color-mix(in lab, red, red)) {
  .service-hero > p:last-child { color: color-mix(in oklab, var(--primary-foreground) 65%, transparent); }
}
.package-grid {
  border-left: 1px solid var(--border);
  grid-template-columns: repeat(3, 1fr);
  max-width: 1250px;
  margin: auto;
  padding: 6rem 3rem;
  display: grid;
}
.package-grid article { border-right: 1px solid var(--border); padding: 2.5rem; }
.package-grid strong { font-family: var(--font-serif); color: var(--primary); font-size: 38px; }
.package-grid ul {
  min-height: 140px;
  color: var(--muted-foreground);
  padding-left: 1rem;
  line-height: 1.8;
}
.testimonial {
  background: var(--secondary);
  grid-template-columns: auto 1fr;
  gap: 3rem;
  padding: 6rem max(15vw, 3rem);
  display: grid;
}
.testimonial blockquote {
  font-family: var(--font-serif);
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.5;
}

/* ---------- home: extra bands ---------- */
.image-split {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  display: grid;
}
.image-split.flip > figure, .image-split.flip > img { order: 2; }
.image-split h2 { margin: .5rem 0 1rem; font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: 1.12; }
.image-split p:not(.eyebrow) { color: var(--muted-foreground); max-width: 52ch; line-height: 1.8; }

.framed { margin: 0; position: relative; }
.framed img { aspect-ratio: 4/3; object-fit: cover; z-index: 1; width: 100%; display: block; position: relative; }
.framed::after {
  content: "";
  border: 1px solid var(--accent);
  z-index: 0;
  position: absolute;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
}

.fact-list {
  border-top: 1px solid var(--border);
  gap: 2.5rem;
  margin: 2rem 0;
  padding: 1.5rem 0 0;
  list-style: none;
  display: flex;
}
.fact-list li { flex-direction: column; display: flex; }
.fact-list strong { font-family: var(--font-serif); color: var(--primary); font-size: 2rem; line-height: 1; }
.fact-list span {
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-top: .4rem;
  font-size: 11px;
}

.fantasy-band {
  background: var(--foreground);
  color: var(--primary-foreground);
  grid-template-columns: minmax(0, 460px) 1fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  padding: 6rem max(5vw, 2rem);
  display: grid;
}
.fantasy-band .eyebrow { color: var(--accent); }
.fantasy-band h2 { margin: .5rem 0 1rem; font-size: clamp(2rem, 3.6vw, 3.6rem); line-height: 1.12; }
.fantasy-band p:not(.eyebrow) { color: var(--primary-foreground); line-height: 1.8; }
@supports (color: color-mix(in lab, red, red)) {
  .fantasy-band p:not(.eyebrow) { color: color-mix(in oklab, var(--primary-foreground) 68%, transparent); }
}
.fantasy-mosaic {
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1.3fr 1fr;
  gap: 1rem;
  min-height: 460px;
  display: grid;
}
.fantasy-mosaic img { object-fit: cover; filter: saturate(.95); width: 100%; height: 100%; display: block; }
.fantasy-mosaic img.tall { grid-row: span 2; }

.poetry-band {
  background: var(--secondary);
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  display: grid;
  position: relative;
}
.poetry-band img { object-fit: cover; width: 100%; height: 100%; max-height: 620px; display: block; }
.poetry-band > div { padding: clamp(3rem, 6vw, 6rem); }
.poetry-band blockquote {
  font-family: var(--font-serif);
  color: var(--primary);
  margin: 1rem 0 1.5rem;
  font-size: clamp(1.5rem, 2.4vw, 2.3rem);
  line-height: 1.45;
}
.poetry-band p:not(.eyebrow) { color: var(--muted-foreground); max-width: 46ch; line-height: 1.8; }

.book-row.three { grid-template-columns: repeat(3, 1fr); }
.young-readers { background: var(--card); }

.horizon { background: var(--foreground); color: var(--primary-foreground); }
.horizon-inner {
  grid-template-columns: 300px 1fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  max-width: 1360px;
  margin: auto;
  padding: 6rem 3rem;
  display: grid;
}
.horizon-cover img { width: 100%; box-shadow: 20px 22px 0 var(--primary); transition: all .3s; }
.horizon-cover img:hover { transform: translateY(-8px); }
.horizon .eyebrow { color: var(--accent); }
.horizon h2 { font-family: var(--font-serif); margin: .5rem 0 1rem; font-size: clamp(2rem, 3.6vw, 3.6rem); line-height: 1.12; }
.horizon p:not(.eyebrow) { color: var(--primary-foreground); max-width: 56ch; line-height: 1.8; }
@supports (color: color-mix(in lab, red, red)) {
  .horizon p:not(.eyebrow) { color: color-mix(in oklab, var(--primary-foreground) 68%, transparent); }
}

.guest-invite {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  display: grid;
}
.guest-invite h2 { margin: .5rem 0 1rem; font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: 1.12; }
.guest-invite p:not(.eyebrow) { color: var(--muted-foreground); max-width: 52ch; line-height: 1.8; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1000px) {
  .desktop-nav { display: none; }
  .mobile-nav { display: block; }
  .mobile-nav summary {
    cursor: pointer;
    align-items: center;
    gap: .55rem;
    padding: .6rem 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    display: flex;
  }
  /* the panel drops out of the bar so it stays legible whatever --hdr is */
  .mobile-nav nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--foreground);
    color: var(--primary-foreground);
    gap: .9rem;
    padding: 1.4rem max(5vw, 1.5rem) 1.8rem;
    display: grid;
    box-shadow: 0 18px 34px oklch(14% 0 0 / .3);
  }
  .mobile-nav nav a { font-size: 13px; }
  .ft-top { grid-template-columns: 1fr 1fr; }
  .ft-brand { grid-column: 1 / -1; }
  .home-hero { grid-template-columns: 1fr; }
  .portrait-wrap { min-height: 520px; }
  .featured-band { grid-template-columns: 260px 1fr; }
  .featured-band > svg { display: none; }
  .book-row { grid-template-columns: repeat(3, 1fr); }
  .editorial-grid, .section-heading, .post-grid { grid-template-columns: 1fr; }
  .post-grid .lead-post { grid-column: auto; }
  .catalog { grid-template-columns: repeat(3, 1fr); }
  .fantasy-band, .horizon-inner { grid-template-columns: 1fr; }
  .fantasy-mosaic { min-height: 380px; }
  .horizon-cover { max-width: 260px; }
}

@media (max-width: 700px) {
  .masthead { padding: 0 1.25rem; min-height: calc(72px - 14px * var(--hdr)); }
  .brand img { height: calc(40px - 10px * var(--hdr)); }
  .ft-top { grid-template-columns: 1fr; gap: 2.5rem; }
  .ft-map > div { grid-template-columns: 1fr 1fr; }
    .home-hero { min-height: 0; }
  .hero-copy { padding: 4rem 1.5rem; }
  .hero-copy h1 { font-size: 3.3rem; }
  .portrait-wrap { min-height: 430px; }
  .featured-band { grid-template-columns: 1fr; padding: 4rem 1.5rem; }
  .featured-band img { height: 340px; }
  .section-shell { padding: 5rem 1.5rem; }
  .book-row { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .journal-feature { grid-template-columns: 1fr; }
  .journal-feature img { min-height: 300px; }
  .journal-feature > div, .poem-feature { padding: 3rem 1.5rem; }
  .path-grid { grid-template-columns: 1fr; }
  .newsletter { grid-template-columns: 1fr; padding: 4rem 1.5rem; }
  .newsletter form { width: 100%; }
  footer { padding: 3.5rem 1.5rem 0; }
  .page-hero { grid-template-columns: 1fr; min-height: 0; }
  .page-hero > div { padding: 4rem 1.5rem; }
  .page-hero img { height: 380px; }
  .story-layout, .wolf-intro, .upcoming-feature, .author-note, .next-work {
    grid-template-columns: 1fr; gap: 3rem; padding: 5rem 1.5rem;
  }
  .title-intro { padding: 5rem 1.5rem 3rem; }
  .post-grid { padding: 3rem 1.5rem; }
  .post-grid article, .post-grid .lead-post { grid-template-columns: 1fr; }
  .post-grid .lead-post img, .post-grid img { height: 260px; }
  .new-release { grid-template-columns: 1fr; gap: 4rem; padding: 5rem 2rem; }
  .new-release img { max-width: 280px; margin: auto; }
  .catalog { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .reviews { padding: 5rem 1.5rem; }
  .reviews > div { grid-template-columns: 1fr; gap: 3rem; }
  .author-note img { height: 420px; }
  .next-work { padding: 0; }
  .next-work > div, .guest-list { padding: 4rem 1.5rem; }
  .guest-list article { grid-template-columns: 1fr; gap: 2rem; }
  .poems { padding: 4rem 1.5rem; }
  .poems article { grid-template-columns: 1fr; gap: 2rem; }
  .gallery-grid { grid-template-columns: 1fr 1fr; padding: 3rem 1rem; }
  .gallery-grid figure, .gallery-grid figure.wide { grid-column: span 1; min-height: 280px; }
  .service-hero { padding: 5rem 1.5rem; }
  .package-grid { border: 0; grid-template-columns: 1fr; padding: 4rem 1.5rem; }
  .package-grid article { border-right: 0; border-top: 1px solid var(--border); }
  .testimonial { grid-template-columns: 1fr; padding: 4rem 1.5rem; }
  .image-split, .guest-invite, .poetry-band { grid-template-columns: 1fr; }
  .image-split.flip > figure, .image-split.flip > img { order: 0; }
  .framed::after { inset: .75rem -.75rem -.75rem .75rem; }
  .fact-list { gap: 1.5rem; }
  .fantasy-band { padding: 4rem 1.5rem; }
  .fantasy-mosaic { grid-template-columns: 1fr 1fr; min-height: 300px; }
  .poetry-band img { max-height: 320px; }
  .book-row.three { grid-template-columns: 1fr 1fr; }
  .horizon-inner { padding: 4rem 1.5rem; }
}

/* ============================================================
   Home page: editorial hero, novel band, feature books
   ============================================================ */

/* ---------- shared pill button ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  width: max-content;
  border-radius: 999px;
  background: var(--foreground);
  color: var(--primary-foreground);
  padding: 1.05rem 1.7rem;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background .25s, transform .25s;
}
.pill:hover { background: var(--primary); transform: translateY(-2px); }
.pill.light { background: var(--primary-foreground); color: var(--foreground); }
.pill.light:hover { background: var(--accent); color: var(--foreground); }

.label {
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 9px;
  font-weight: 600;
}

/* ---------- 1. hero ---------- */
.author-hero {
  position: relative;
  min-height: min(94vh, 940px);
  background: var(--secondary);
  overflow: hidden;
}
.ah-bg { position: absolute; inset: 0; }
.ah-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 26%; }
.ah-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(52% 42% at 88% 20%,
      color-mix(in oklab, var(--secondary) 90%, transparent) 0%,
      color-mix(in oklab, var(--secondary) 55%, transparent) 48%,
      transparent 76%),
    linear-gradient(97deg,
      var(--secondary) 12%,
      color-mix(in oklab, var(--secondary) 84%, transparent) 30%,
      color-mix(in oklab, var(--secondary) 24%, transparent) 52%,
      transparent 66%),
    linear-gradient(0deg, color-mix(in oklab, var(--secondary) 72%, transparent) 0%, transparent 38%);
}
.ah-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-content: space-between;
  gap: 2rem 3rem;
  max-width: 1360px;
  min-height: inherit;
  margin: auto;
  padding: clamp(3rem, 6vw, 6rem) 3rem clamp(3rem, 5.5vw, 5.5rem);
}
.ah-head { grid-column: 1; grid-row: 1; align-self: start; }
.ah-head .pill { padding: .85rem 1.4rem; font-size: 9px; }
.ah-eyebrow {
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 10px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 1.4rem;
}
/* roman above, italic in the wine below, the pairing from the old site */
.ah-name {
  font-size: clamp(1.9rem, 5vw, 4.8rem);
  line-height: 1.02;
  margin: 0 0 1.9rem;
}
.ah-name em {
  color: var(--primary);
  font-style: italic;
  font-weight: 400;
}
/* her name and what she writes, sitting off to the bottom right */
.ah-signature {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  justify-self: end;
  text-align: right;
  max-width: 24ch;
}
.ah-sig-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.35rem, 2.6vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 .45rem;
}
.ah-sig-role {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(.78rem, 1.05vw, 1rem);
  line-height: 1.5;
  color: color-mix(in oklab, var(--foreground) 76%, transparent);
  margin: 0;
}
.ah-spacer { grid-column: 1; grid-row: 2; min-height: clamp(70px, 11vw, 140px); }

/* ---------- 2. the novel band ---------- */
/* One wine gradient spans the band and the running strip, easing out of the
   hero at the top and into the bookshelf below. The bottom padding keeps text
   clear of the fade. */
.novel-wrap {
  position: relative;
  z-index: 2;
  background:
    linear-gradient(180deg, var(--secondary) 0, transparent 120px),
    linear-gradient(0deg, var(--card) 0, transparent 180px),
    var(--primary);
  padding-bottom: 180px;
}
.novel-band {
  color: var(--primary-foreground);
  padding: 130px max(5vw, 2rem) 4rem;   /* clears the fade so type sits on solid wine */
}
.nb-grid {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  max-width: 1360px;
  margin: auto;
  padding-bottom: 4.5rem;
}
.nb-cover { margin-top: clamp(-380px, -25vw, -215px); }
.nb-cover img {
  width: 100%;
  filter: drop-shadow(0 30px 42px oklch(6% .02 20 / .5));
  transition: transform .35s;
}
.nb-cover a:hover img { transform: translateY(-8px); }
.nb-copy .eyebrow { color: var(--accent); }
.nb-copy h2 {
  font-size: clamp(2.6rem, 6.4vw, 6rem);
  line-height: 1.02;
  margin: .6rem 0 1.3rem;
}
.nb-copy p:not(.eyebrow) {
  color: color-mix(in oklab, var(--primary-foreground) 68%, transparent);
  line-height: 1.85;
  max-width: 54ch;
  margin-bottom: 2.2rem;
}
.statement {
  max-width: 1180px;
  margin: 0 auto;
  padding: 3.5rem 0;
  border-top: 1px solid oklch(100% 0 0 / .14);
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2.5vw, 2.35rem);
  line-height: 1.5;
  text-align: center;
}
.nb-more {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  width: max-content;
  margin: 0 auto;
}
.nb-more span.dot {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1px solid oklch(100% 0 0 / .32);
  transition: background .25s, color .25s;
}
.nb-more:hover span.dot { background: var(--primary-foreground); color: var(--foreground); }
.nb-more b { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.nb-more i {
  display: block;
  font-style: normal;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--primary-foreground) 48%, transparent);
  margin-top: .35rem;
}

/* ---------- the running strip ---------- */
.marquee {
  color: color-mix(in oklab, var(--primary-foreground) 62%, transparent);
  border-top: 1px solid oklch(100% 0 0 / .14);
  border-bottom: 1px solid oklch(100% 0 0 / .14);
  overflow: hidden;
  padding: 1.15rem 0;
}
.mq-track {
  display: flex;
  width: max-content;
  animation: mqRun 34s linear infinite;
}
.mq-track span {
  padding: 0 2.2rem;
  font-family: var(--font-serif);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
}
@keyframes mqRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mq-track { animation: none; } }

/* ---------- 3. feature books ---------- */
.feature-books {
  background: var(--card);
  text-align: center;
  padding: clamp(4rem, 8vw, 8rem) 3rem;
}
.feature-books .eyebrow { margin-bottom: 1rem; }
.feature-books > h2 {
  font-size: clamp(2.4rem, 6vw, 5.4rem);
  line-height: 1.04;
  text-transform: uppercase;
  margin: 0 auto 3.5rem;
}
.fb-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: clamp(1rem, 3vw, 3rem);
  max-width: 1160px;
  margin: 0 auto 3.5rem;
}
.fb-item { text-align: center; }
.fb-item img {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  box-shadow: 0 20px 38px oklch(15% .01 20 / .2);
  transition: transform .32s;
}
.fb-item a:hover img { transform: translateY(-9px); }
.fb-item h3 {
  margin-top: 1.2rem;
  font-size: 15px;
  letter-spacing: .02em;
}
.fb-item.raised { transform: translateY(-2.6rem); }
.feature-books > .pill { margin: 0 auto; }

@media (max-width: 1000px) {
  .ah-inner { grid-template-columns: 1fr; align-content: end; gap: 2.5rem; }
  .ah-head, .ah-signature, .ah-spacer { grid-column: 1; grid-row: auto; }
  .ah-signature { justify-self: start; text-align: left; max-width: none; }
  .ah-spacer { display: none; }
  .ah-side p:last-child { margin-left: 0; }
  .nb-grid { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .author-hero { min-height: 0; }
  /* A 16:9 photo stretched over a tall phone hero magnifies the face to the
     point of distraction. Run it as a band across the top instead. */
  .ah-bg { height: 38vh; bottom: auto; }
  .ah-bg img { object-position: 62% 24%; }
  .ah-bg::after {
    background: linear-gradient(0deg,
      var(--secondary) 1%,
      color-mix(in oklab, var(--secondary) 42%, transparent) 34%,
      transparent 82%);
  }
  .ah-inner { padding: calc(38vh + 2.5rem) 1.5rem 8rem; }
  .novel-band { padding: 90px 1.5rem 3rem; }
  .nb-grid { grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 3rem; }
  .nb-cover { max-width: 230px; }
  .nb-cover { margin-top: -170px; }
  .statement { padding: 2.5rem 0; }
  .feature-books { padding: 4rem 1.5rem; }
  .fb-row { gap: 1rem; margin-bottom: 2.5rem; }
  .fb-item.raised { transform: none; }
  .fb-item h3 { font-size: 12px; }
}

/* ---------- 4. a poem for the season ---------- */
/* Lynda's torn-paper clip, pushed into a wine duotone: the paper turns wine,
   the ink stays black. A crisp grain sits over it so the upscaled GIF reads as
   texture rather than blur, and a hairline frame sets the poem like a plate. */
.poem-plate {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: clamp(460px, 64vh, 620px);
  padding: clamp(4rem, 7vw, 6rem) 1.5rem;
  background: #1c0a0e;
  color: var(--primary-foreground);
  text-align: center;
}
.pp-bg { position: absolute; inset: 0; z-index: -3; }
.pp-bg picture, .pp-bg img { display: block; width: 100%; height: 100%; }
.pp-bg img { object-fit: cover; filter: grayscale(1) contrast(1.28) brightness(1.24); }
.pp-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--primary) 88%, #b4344a);
  mix-blend-mode: multiply;
}
.poem-plate::before {                 /* scrim: quieter in the middle where the poem sits */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(46% 56% at 50% 50%, rgba(22, 6, 10, .44) 0%, rgba(22, 6, 10, .16) 64%, transparent 100%),
    linear-gradient(180deg, rgba(22, 6, 10, .26), transparent 26%, transparent 74%, rgba(22, 6, 10, .34));
}
.pp-grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  mix-blend-mode: overlay;
  opacity: .42;
  pointer-events: none;
}
.poem-plate::after {                  /* the hairline plate */
  content: "";
  position: absolute;
  inset: clamp(.9rem, 2vw, 1.6rem);
  border: 1px solid rgba(246, 238, 226, .26);
  pointer-events: none;
}
.pp-frame { position: relative; max-width: 46rem; }
.pp-eyebrow {
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 1.5rem;
}
.pp-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.5rem, 5.6vw, 4.9rem);
  line-height: 1.04;
  margin: 0;
}
.pp-rule {                            /* a hairline with a diamond at its centre */
  position: relative;
  display: block;
  width: 64px;
  height: 1px;
  margin: 1.9rem auto 2rem;
  background: color-mix(in oklab, var(--accent) 72%, transparent);
}
.pp-rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  background: var(--accent);
  transform: translate(-50%, -50%) rotate(45deg);
}
.pp-verse {
  margin: 0 0 2.6rem;
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.3vw, 1.95rem);
  line-height: 1.66;
  color: color-mix(in oklab, var(--primary-foreground) 93%, transparent);
}
.pp-verse span { display: block; }

/* arrival: each piece rises in on its own beat (--d, in seconds) */
.js-reveal [data-reveal] .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .95s ease, transform .95s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--d, 0) * 1s);
}
.js-reveal [data-reveal].in .reveal { opacity: 1; transform: none; }
.pp-frame .pill.reveal { display: inline-flex; }

@media (max-width: 700px) {
  .poem-plate { min-height: 0; padding: 5rem 1.75rem; }
  .poem-plate::after { inset: .7rem; }
  .pp-rule { margin: 1.5rem auto 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- 5. the characters ---------- */
/* Lynda's torn page: the heading sits inside the wine tear, the paragraph and
   portraits on the cream paper below. The tear keeps the photo's own
   proportions, so the slot for the heading is placed in % of the tear's height
   and lands inside the clean wine at every width. Measured from the image:
   clean wine runs y 172 to ~270 of 440 across the middle of the page. */
.cast {
  --gold: oklch(76% .09 80);
  position: relative;
  isolation: isolate;
  background: #ece4d3 url("../img/cast-paper.jpg") center top / cover;
  padding: 0 0 clamp(3.5rem, 5.5vw, 5rem);
  text-align: center;
}
.cast-tear {
  position: relative;
  aspect-ratio: 1672 / 440;
  background: url("../img/cast-tear.jpg") center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
}
.tear-slot {
  position: absolute;
  left: 0;
  right: 0;
  top: 39%;
  height: 22.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  color: var(--primary-foreground);
  text-shadow: 0 1px 12px rgba(34, 6, 11, .42);
}
.tear-slot .eyebrow { color: var(--gold); margin: 0 0 .45rem; }
.cast h2 {
  font-size: clamp(1.25rem, 3.1vw, 3.3rem);
  line-height: 1.1;
  margin: 0;
  white-space: nowrap;
  color: var(--primary-foreground);
}
.cast h2 em { color: var(--gold); font-style: italic; font-weight: 400; }
.cast-lede {
  max-width: 52ch;
  margin: clamp(.2rem, .8vw, .8rem) auto clamp(2.4rem, 3.4vw, 3rem);
  padding: 0 1.5rem;
  line-height: 1.8;
  color: var(--muted-foreground);
}

.cast-row {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1.2rem, 3vw, 2.8rem);
  margin: 0 auto 3.6rem;
  padding: 0 1.5rem;
}
.cast-row li:nth-child(1), .cast-row li:nth-child(5) { margin-top: 46px; }
.cast-row li:nth-child(2), .cast-row li:nth-child(4) { margin-top: 16px; }
.cast-row a { display: block; }

.arch {
  --w: 150px;
  display: block;
  width: var(--w);
  aspect-ratio: 3 / 4;
  margin: 0 auto;
  border-radius: 999px 999px 8px 8px;
  overflow: hidden;
  background: var(--primary);
  outline: 1px solid color-mix(in oklab, var(--gold) 80%, transparent);
  outline-offset: 7px;
  box-shadow: 0 18px 34px oklch(22% .04 20 / .24);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), outline-color .3s, box-shadow .45s;
}
.cast-row li.lead .arch { --w: 188px; }
.arch img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
.cast-row a:hover .arch {
  transform: translateY(-6px);
  outline-color: var(--gold);
  box-shadow: 0 26px 42px oklch(22% .04 20 / .3);
}
.cast-row a:hover .arch img { transform: scale(1.06); }
.cast-name {
  display: block;
  margin-top: 1.4rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--foreground);
}
.cast > .pill { margin: 0 auto; }

@media (max-width: 1000px) {
  .arch { --w: 15vw; }
  .cast-row li.lead .arch { --w: 19vw; }
}
@media (max-width: 760px) {
  .cast-tear { aspect-ratio: auto; height: 300px; }
  .tear-slot { height: 28%; }
  .cast h2 { white-space: normal; font-size: 1.25rem; max-width: 18ch; }
}
@media (max-width: 700px) {
  .cast-row { flex-wrap: wrap; gap: 2rem 1.3rem; margin-bottom: 3rem; }
  .cast-row li, .cast-row li:nth-child(n) { margin-top: 0; }
  .arch, .cast-row li.lead .arch { --w: 23vw; outline-offset: 4px; }
  .cast-name { font-size: 14px; margin-top: 1.1rem; }
}

/* ---------- 6. a writer's life ---------- */
/* Dark, like a window at night: the photo in a tall arch with a double gold
   frame, the same gothic arch as the characters above but grand. */
.coast {
  --gold: oklch(76% .09 80);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(55% 75% at 24% 52%, color-mix(in oklab, var(--primary) 58%, transparent), transparent 72%),
    linear-gradient(180deg, #1e0b10 0%, #140709 100%);
  color: var(--primary-foreground);
  padding: clamp(5rem, 8vw, 7.5rem) 1.5rem;
}
.coast-grain {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: -1; mix-blend-mode: overlay; opacity: .3; pointer-events: none;
}
.coast-inner {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
  max-width: 1180px;
  margin: auto;
}
.coast-arch { position: relative; justify-self: center; width: min(100%, 390px); }
.coast-arch .window {
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px 10px 10px;
  overflow: hidden;
  background: var(--primary);
  outline: 1px solid color-mix(in oklab, var(--gold) 85%, transparent);
  outline-offset: 12px;
  box-shadow: 0 34px 64px rgba(0, 0, 0, .5);
}
.coast-arch .window img { display: block; width: 100%; height: 100%; object-fit: cover; }
.coast-arch::before {                  /* the second, fainter frame */
  content: "";
  position: absolute;
  inset: -28px;
  border-radius: 999px 999px 20px 20px;
  border: 1px solid color-mix(in oklab, var(--gold) 30%, transparent);
  pointer-events: none;
}
.coast-arch::after {                   /* a small gold diamond at the apex */
  content: "";
  position: absolute;
  left: 50%;
  top: -32px;
  width: 8px;
  height: 8px;
  background: var(--gold);
  transform: translateX(-50%) rotate(45deg);
}
.coast-copy .eyebrow { color: var(--gold); }
.coast-copy h2 {
  font-size: clamp(2.2rem, 4.4vw, 3.9rem);
  line-height: 1.08;
  margin: .9rem 0 1.3rem;
}
.coast-copy h2 em { color: var(--gold); font-style: italic; font-weight: 400; }
.coast-copy > p {
  max-width: 46ch;
  line-height: 1.85;
  color: color-mix(in oklab, var(--primary-foreground) 74%, transparent);
}
.coast-facts {
  display: flex;
  list-style: none;
  margin: 2.4rem 0 2.6rem;
  padding: 1.7rem 0 0;
  border-top: 1px solid color-mix(in oklab, var(--gold) 34%, transparent);
}
.coast-facts li {
  display: flex;
  flex-direction: column;
  padding: 0 1.6rem;
  border-left: 1px solid color-mix(in oklab, var(--gold) 26%, transparent);
}
.coast-facts li:first-child { padding-left: 0; border-left: 0; }
.coast-facts strong {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.3rem, 3.8vw, 3.4rem);
  line-height: 1;
  color: var(--gold);
}
.coast-facts span {
  margin-top: .65rem;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--primary-foreground) 62%, transparent);
}

/* ---------- 7. verses & reflections ---------- */
/* A page from a road-trip journal: a taped snapshot on cream paper, and the
   quote typed out in the same typewriter face as the opening. */
.road {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #ece4d3 url("../img/cast-paper.jpg") center / cover;
  padding: clamp(5rem, 8vw, 7.5rem) 1.5rem;
}
.road-inner {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
  max-width: 1120px;
  margin: auto;
}
.snap-wrap { justify-self: center; width: min(100%, 340px); }
.snapshot {
  position: relative;
  margin: 0;
  padding: 14px 14px 54px;
  background: #fbf8f1;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08), 0 24px 44px rgba(64, 42, 20, .24);
  transform: rotate(-3deg);
}
.snapshot img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 28%;
  filter: sepia(.22) saturate(.92) contrast(1.03);
}
.snapshot figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 17px;
  text-align: center;
  font-family: "Special Elite", "Courier New", monospace;
  font-size: 13px;
  letter-spacing: .04em;
  color: #4a3f36;
}
.snapshot::before, .snapshot::after {    /* tape on the top corners */
  content: "";
  position: absolute;
  top: -10px;
  width: 96px;
  height: 26px;
  background: rgba(233, 219, 186, .74);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.snapshot::before { left: -22px; transform: rotate(-36deg); }
.snapshot::after { right: -22px; transform: rotate(34deg); }
.road-copy .eyebrow { color: var(--primary); }
.vj-quote {                             /* typewritten, with a margin rule */
  margin: 1.3rem 0 1.9rem;
  padding-left: 1.4rem;
  border-left: 2px solid color-mix(in oklab, var(--primary) 50%, transparent);
  font-family: "Special Elite", "Courier New", monospace;
  font-size: clamp(1.3rem, 2.5vw, 2.1rem);
  line-height: 1.55;
  color: #2b2119;
  text-shadow: 0 0 1px rgba(43, 33, 25, .4);
}
.vj-quote > span { display: block; }
.vj-quote.typing .ch { opacity: 0; }
.vj-quote.typing .ch.on { opacity: 1; }
.road-copy > p:not(.eyebrow):not(.vj-quote) {
  max-width: 46ch;
  line-height: 1.85;
  color: var(--muted-foreground);
  margin-bottom: 2.3rem;
}

@media (max-width: 860px) {
  .coast-inner, .road-inner { grid-template-columns: 1fr; }
  .coast-arch { width: min(70vw, 330px); margin: 1.6rem auto .6rem; }
  .coast-copy { text-align: center; }
  .coast-copy > p { margin-inline: auto; }
  .coast-facts { justify-content: center; }
  .snap-wrap { width: min(68vw, 300px); }
}
@media (max-width: 480px) {
  .coast-facts li { padding: 0 1rem; }
  .coast-facts span { font-size: 9px; letter-spacing: .14em; }
  .snapshot { transform: rotate(-2deg); }
}

/* ---------- 8. for young readers ---------- */
/* The two picture books held out by two hands. The photo is the block: the
   copy sits in its open white corner and each book is a link. Everything is
   placed as a fraction of the image, measured from it (Emmy 25-51% across,
   12-67% down; Silent Wishes 50-86% across, 39-79% down; the top-right is
   clear from 57% across down to 39%). */
.young {
  position: relative;
  isolation: isolate;
  background: var(--card);
  padding: 0;                          /* the block is exactly as tall as the photo */
}
.yr-stage { position: relative; max-width: 1600px; margin: 0 auto; }
.yr-art { position: relative; aspect-ratio: 1774 / 887; }
.yr-art > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;            /* the photo's white melts into the page */
  /* On screens wider than the photo, its sides fade into the page rather
     than stopping at a visible edge. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.yr-copy {
  position: absolute;
  left: 58.5%;
  top: 7%;
  width: 36%;
  text-align: left;
}
.yr-copy .eyebrow { color: var(--primary); }
.yr-copy h2 {
  font-size: clamp(1.55rem, 3vw, 3.2rem);
  line-height: 1.1;
  margin: .8rem 0 1.4rem;
}
.yr-copy h2 em { color: var(--primary); font-style: italic; font-weight: 400; }

.yr-book { position: absolute; display: block; border-radius: 8px; }
.yr-book:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.yr-emmy   { left: 25%;   top: 11%;   width: 25.5%; height: 56%; }
.yr-silent { left: 51%;   top: 38.5%; width: 35.5%; height: 41%; }
.yr-tag {
  position: absolute;
  left: 50%;
  bottom: 14%;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
  padding: .55rem .95rem;
  border-radius: 999px;
  background: var(--foreground);
  color: var(--primary-foreground);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px oklch(15% .01 20 / .25);
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.yr-book:hover .yr-tag, .yr-book:focus-visible .yr-tag { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 860px) {
  .young { padding: 0 0 3.5rem; }
  .yr-copy { position: static; width: auto; padding: 1.4rem 1.5rem 0; text-align: center; }
  .yr-copy h2 { font-size: clamp(1.7rem, 6.2vw, 2.4rem); margin: .7rem auto 1.3rem; max-width: 16ch; }
  .yr-tag { display: none; }
}

/* ---------- 9. on the horizon ---------- */
/* The next novel against a fountain pen still writing it: book left, words in
   the calm middle of the photo, nib on the right. A soft wine haze sits behind
   the book in place of the old hard offset shadow.
   The nib lands roughly (screen width - 460px) from the left, so the text column
   is sized to stop short of it; below 1200px everything stacks instead. */
.horizon {
  --gold: oklch(76% .09 80);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #1a120c url("../img/horizon-pen.jpg") right center / cover no-repeat;
  color: var(--primary-foreground);
}
.horizon::before {                     /* a gentle darkening under the words; the pen stays clear */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(14, 8, 5, .5) 0%, rgba(14, 8, 5, .38) 44%, rgba(14, 8, 5, .1) 64%, transparent 76%),
    linear-gradient(180deg, rgba(14, 8, 5, .3), transparent 24%, transparent 76%, rgba(14, 8, 5, .42));
}
.horizon-inner {
  display: grid;
  grid-template-columns: 260px min(460px, calc(89.5vw - 747px));
  align-items: center;
  justify-content: start;
  gap: clamp(2.5rem, 4.5vw, 4.5rem);
  max-width: none;
  margin: 0;
  /* Pulled toward the centre as the screen widens, but only as far as the
     nib allows: ~64px at 1240, ~120 at 1440, ~330 at 1850. */
  padding: 4.5rem 2rem 4.5rem clamp(4rem, calc(51.2vw - 617px), 40rem);
}
.horizon-cover { position: relative; width: 100%; max-width: none; }
.horizon-cover::before {               /* the haze: a touch of wine, not a shadow */
  content: "";
  position: absolute;
  inset: 10% -8% 6%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(150, 34, 52, .42), rgba(150, 34, 52, .14) 62%, transparent 100%);
  filter: blur(20px);
}
.horizon-cover a { display: block; }
.horizon-cover img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: none;
  filter: drop-shadow(0 24px 24px rgba(8, 4, 2, .5)) drop-shadow(0 0 30px rgba(150, 34, 52, .28));
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.horizon-cover img:hover { transform: none; }
.horizon-cover a:hover img { transform: translateY(-8px); }
.horizon-copy { text-shadow: 0 1px 16px rgba(10, 6, 4, .5); }
.horizon-copy .eyebrow { color: var(--gold); }
.horizon-copy h2 {
  font-size: clamp(2.1rem, 3.4vw, 3.4rem);
  line-height: 1.1;
  margin: .8rem 0 1.1rem;
}
.horizon-copy p:not(.eyebrow) {
  max-width: none;
  line-height: 1.85;
  margin-bottom: 2.2rem;
  color: color-mix(in oklab, var(--primary-foreground) 80%, transparent);
}

@media (max-width: 1199px) {
  .horizon { background-position: 78% center; }
  .horizon::before { background: linear-gradient(180deg, rgba(14, 8, 5, .48), rgba(14, 8, 5, .62)); }
  .horizon-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 2.6rem;
    padding: 4.5rem 1.5rem;
  }
  .horizon-cover { width: min(240px, 58vw); }
  .horizon-copy { max-width: 34rem; }
}

/* ---------- 10. in conversation ---------- */
/* An invitation: all the copy sits inside a wax-sealed letter on black, the
   cameo tilted against its edge, a ticket tucked behind it.
   The letter is the photo sliced nine ways (border-image): the deckle edges,
   corners and seal keep their true shape at any size, and only the plain paper
   in the middle grows to hold the words. --u is one pixel of the 503x384 crop
   at the current size, so every offset below is measured from the photo. */
.salon {
  --gold-ink: oklch(74% .09 78);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #000;                    /* the photo's own black: no seams */
  padding: clamp(4.5rem, 7vw, 6rem) 1.5rem clamp(5.5rem, 8vw, 7rem);
}
.salon-inner { display: flex; align-items: center; justify-content: center; }
.letter-wrap {
  --cw: min(580px, 92vw);
  --cw: min(580px, round(92vw, 1px));   /* whole pixels, or the slices seam */
  --u: calc(var(--cw) / 503);
  position: relative;
  flex: none;
  width: var(--cw);
}
.letter {
  --gold-ink: oklch(58% .095 70);      /* darker gold for the diamonds on paper */
  position: relative;
  z-index: 1;
  border-style: solid;
  border-width: calc(122 * var(--u)) calc(15 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));
  /* snapped to whole pixels: fractional slice edges leave a hairline seam */
  border-width: round(calc(122 * var(--u)), 1px) round(calc(15 * var(--u)), 1px)
                round(calc(16 * var(--u)), 1px) round(calc(16 * var(--u)), 1px);
  border-image-source: url("../img/salon-letter.jpg");
  border-image-slice: 122 15 16 16 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  padding: calc(6 * var(--u)) clamp(1.2rem, 4vw, 2.6rem) calc(18 * var(--u));
  text-align: center;
  color: var(--foreground);
}
.letter-receipt {                      /* tucked behind the bottom-right corner */
  position: absolute;
  z-index: 0;
  right: calc(-117 * var(--u));
  bottom: calc(-94 * var(--u));
  width: calc(240 * var(--u));
  height: auto;
}
.letter .eyebrow { color: var(--primary); }
.letter h2 {
  max-width: 20ch;
  margin: .7rem auto .9rem;
  font-size: clamp(1.45rem, 2.6vw, 2.15rem);
  line-height: 1.12;
}
.letter h2 em { color: var(--primary); font-style: italic; font-weight: 400; }
.letter > p:not(.eyebrow) {
  max-width: 46ch;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.75;
  color: #5a4a40;
}
.salon-names {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .3rem 0;
  list-style: none;
  margin: 1.1rem 0 1.4rem;
  padding: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--foreground);
}
.salon-names li + li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 .8rem;
  vertical-align: .15em;
  background: var(--gold-ink);
  transform: rotate(45deg);
}

/* the cameo, tilted against the letter's left edge */
.salon-cameo {
  position: relative;
  z-index: 2;
  flex: none;
  width: clamp(180px, 19vw, 240px);
  margin: 3.5rem -40px 0 0;
}
.cameo-tilt { position: relative; transform: rotate(-7deg); }
.cameo-tilt .oval {
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 50%;
  overflow: hidden;
  outline: 1px solid color-mix(in oklab, var(--gold-ink) 85%, transparent);
  outline-offset: 9px;
  box-shadow: 0 26px 50px rgba(0, 0, 0, .65);
}
.cameo-tilt .oval img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.cameo-tilt::before {
  content: "";
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--gold-ink) 36%, transparent);
  pointer-events: none;
}
.cameo-tilt::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -26px;
  width: 8px;
  height: 8px;
  background: var(--gold-ink);
  transform: translateX(-50%) rotate(45deg);
}

@media (max-width: 760px) {
  .salon { padding: 3.5rem 0 5rem; }
  .salon-inner { flex-direction: column; }
  /* on a phone the cameo tips over the top-right corner, clear of the seal */
  .salon-cameo { order: -1; align-self: flex-end; width: 108px; margin: 0 7vw -44px 0; }
  .cameo-tilt { transform: rotate(8deg); }
  .cameo-tilt::before { inset: -14px; }
  .cameo-tilt::after { top: -18px; width: 6px; height: 6px; }
  .cameo-tilt .oval { outline-offset: 6px; }
  .letter { padding-inline: 1.1rem; }
  .letter > p:not(.eyebrow) { font-size: 14px; }
}

/* ---------- 11. a life in stories ---------- */
/* The four pathways as the contents page of a book: chapter titles, dotted
   leaders, roman numerals where the page numbers would sit. */
.contents {
  --gold: oklch(76% .09 80);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(60% 70% at 50% 0%, color-mix(in oklab, var(--primary) 42%, transparent), transparent 72%),
    linear-gradient(180deg, #1b0b10 0%, #120709 100%);
  color: var(--primary-foreground);
  padding: clamp(3.8rem, 6vw, 5rem) 1.5rem clamp(3.5rem, 5vw, 4.5rem);
}
.contents-grain {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: -1; mix-blend-mode: overlay; opacity: .28; pointer-events: none;
}
.contents-head { text-align: center; margin: 0 auto 2rem; }
.contents-head .eyebrow { color: var(--gold); }
.contents-head h2 {
  font-size: clamp(2.3rem, 4.6vw, 4rem);
  line-height: 1.05;
  margin: .8rem 0 0;
}
.contents-head h2 em { color: var(--gold); font-style: italic; font-weight: 400; }
.contents-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1.4rem 0 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--primary-foreground) 55%, transparent);
}
.contents-label::before, .contents-label::after {
  content: "";
  width: 48px;
  height: 1px;
  background: color-mix(in oklab, var(--gold) 50%, transparent);
}
.toc {
  list-style: none;
  max-width: 880px;
  margin: 0 auto;
  padding: 0;
  border-top: 1px solid color-mix(in oklab, var(--gold) 26%, transparent);
}
.toc a {
  display: grid;
  grid-template-columns: auto 1fr auto 18px;
  column-gap: 1.1rem;
  padding: 1.05rem .5rem;
  border-bottom: 1px solid color-mix(in oklab, var(--gold) 16%, transparent);
  transition: background .3s, padding .3s;
}
.toc a:hover { background: color-mix(in oklab, var(--primary) 24%, transparent); padding-left: 1.1rem; }
.toc a:focus-visible { outline: 1px solid var(--gold); outline-offset: -1px; }
.toc-title {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  line-height: 1.2;
  transition: color .3s;
}
.toc-leader {
  align-self: end;
  margin-bottom: .5em;
  border-bottom: 1px dotted color-mix(in oklab, var(--gold) 48%, transparent);
}
.toc-num {
  align-self: end;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  letter-spacing: .08em;
  color: var(--gold);
}
.toc-arrow {
  align-self: end;
  margin-bottom: .2em;
  color: var(--gold);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .3s, transform .3s;
}
.toc-desc {
  grid-column: 1 / -1;
  margin-top: .2rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: color-mix(in oklab, var(--primary-foreground) 58%, transparent);
}
.toc a:hover .toc-title { color: var(--gold); }
.toc a:hover .toc-arrow, .toc a:focus-visible .toc-arrow { opacity: 1; transform: none; }
@media (hover: none) { .toc-arrow { opacity: .75; transform: none; } }

@media (max-width: 600px) {
  .toc a { column-gap: .7rem; padding: 1.15rem .25rem; }
  .toc a:hover { padding-left: .6rem; }
  .toc-desc { font-size: 14px; }
}

/* ---------- 12. letters from the writing desk ---------- */
/* The newsletter as the back of a postcard: the message on the left, the
   address side on the right with a stamp (her pen mark), a wine postmark, and
   the email typed onto the address line in the typewriter face. */
.post {
  position: relative;
  isolation: isolate;
  background: #ece4d3 url("../img/cast-paper.jpg") center / cover;
  padding: clamp(4rem, 6vw, 5.5rem) 1.5rem;
}
.postcard {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  column-gap: clamp(2rem, 4vw, 3.2rem);
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(2.8rem, 4.4vw, 3.4rem) clamp(2rem, 4vw, 3.2rem) clamp(2.2rem, 3.6vw, 3rem);
  background:
    linear-gradient(rgba(252, 248, 240, .8), rgba(252, 248, 240, .8)),
    url("../img/cast-paper.jpg") center / cover;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .06), 0 26px 52px rgba(70, 46, 22, .22);
}
.postcard::before {                    /* printed at the head, as on the real thing */
  content: "Post card";
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  font-family: "Special Elite", "Courier New", monospace;
  font-size: 11px;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: rgba(90, 70, 50, .5);
  white-space: nowrap;
}
.pc-message {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: clamp(2rem, 4vw, 3.2rem);
  border-right: 1px solid rgba(100, 76, 52, .22);
}
.pc-message .eyebrow { color: var(--primary); }
.pc-message h2 {
  font-size: clamp(2.3rem, 4.4vw, 3.6rem);
  line-height: 1.05;
  margin: .8rem 0 1rem;
}
.pc-message h2 em { color: var(--primary); font-style: italic; font-weight: 400; }
.pc-message p:not(.eyebrow) { max-width: 34ch; line-height: 1.8; color: var(--muted-foreground); }

.pc-address {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 250px;
  padding-top: 132px;
}
.pc-stamp-wrap {                       /* the shadow lives here so the mask can't clip it */
  position: absolute;
  top: 0;
  right: 0;
  transform: rotate(4deg);
  filter: drop-shadow(0 3px 4px rgba(60, 40, 20, .28));
}
.pc-stamp {                            /* perforated edge: holes punched round the rim only */
  width: 92px;
  height: 110px;
  padding: 7px;
  background: #fbf7ee;
  -webkit-mask:
    radial-gradient(circle, #0000 3px, #000 3.5px) -6px -6px / 12px 12px round,
    linear-gradient(#000 0 0) 3px 3px / calc(100% - 6px) calc(100% - 6px) no-repeat;
          mask:
    radial-gradient(circle, #0000 3px, #000 3.5px) -6px -6px / 12px 12px round,
    linear-gradient(#000 0 0) 3px 3px / calc(100% - 6px) calc(100% - 6px) no-repeat;
}
.pc-stamp span {
  display: grid;
  place-items: center;
  height: 100%;
  background: radial-gradient(120% 90% at 50% 18%, #7e2535, #4a0f1a);
  outline: 1px solid rgba(250, 236, 210, .45);
  outline-offset: -5px;
}
.pc-stamp img { width: 44px; height: auto; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.pc-postmark {                         /* wine ink, cancelling the stamp */
  position: absolute;
  top: 54px;
  right: 50px;
  width: 190px;
  height: auto;
  color: var(--primary);
  opacity: .58;
  transform: rotate(-9deg);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.pc-form label {
  display: block;
  margin-bottom: .35rem;
  font-family: "Special Elite", "Courier New", monospace;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(90, 70, 50, .72);
}
.pc-form input {
  display: block;
  width: 100%;
  padding: .55rem 0 .5rem;
  border: 0;
  border-bottom: 1.5px solid rgba(60, 44, 30, .55);
  background: transparent;
  outline: 0;
  font-family: "Special Elite", "Courier New", monospace;
  font-size: 18px;
  color: #2b2119;
}
.pc-form input::placeholder { color: rgba(90, 70, 50, .45); }
.pc-form input:focus { border-bottom-color: var(--primary); }
.pc-form .pill { margin-top: 1.4rem; }

@media (max-width: 760px) {
  .postcard { grid-template-columns: 1fr; padding: 2.9rem 1.4rem 2rem; }
  .pc-message { padding: 0 0 1.8rem; border-right: 0; border-bottom: 1px solid rgba(100, 76, 52, .22); }
  .pc-message h2 { font-size: 2.35rem; }
  .pc-address { min-height: 0; margin-top: 1.6rem; padding-top: 128px; }
  .pc-postmark { width: 170px; right: 44px; top: 50px; }
}

/* ---------- mobile navigation: an old book's table of contents ---------- */
/* Only reachable below 1000px, where the desktop links hide and the Menu
   toggle appears. Yellowed paper, period capitals, dotted leaders to a page
   number; every row is a full-width link. */
.mobile-nav .toc-nav {
  display: block;
  gap: 0;
  max-height: calc(100dvh - 64px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.7rem 1.6rem 1.2rem;
  color: #2b2119;
  background:
    radial-gradient(125% 95% at 50% 42%, transparent 52%, rgba(112, 80, 32, .3) 100%),
    radial-gradient(16% 9% at 10% 72%, rgba(146, 104, 42, .14), transparent 70%),
    radial-gradient(12% 7% at 88% 18%, rgba(146, 104, 42, .12), transparent 70%),
    linear-gradient(rgba(229, 211, 170, .5), rgba(229, 211, 170, .5)),
    #e8dcc0 url("../img/cast-paper.jpg") center / cover;
  box-shadow: 0 26px 44px rgba(0, 0, 0, .45);
  text-align: left;
}
.mobile-nav[open] .toc-nav { animation: tnIn .32s cubic-bezier(.2, .7, .2, 1); }
@keyframes tnIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.toc-nav > * { max-width: 460px; margin-left: auto; margin-right: auto; }
.tn-head { text-align: center; }
.tn-title {
  margin: 0;
  font-family: "Josefin Sans", var(--font-sans);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.1;
}
.tn-sub {
  margin: .35rem 0 .2rem;
  font-family: "Josefin Sans", var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(43, 33, 25, .72);
}
.tn-flourish { display: block; width: 118px; height: auto; margin: .2rem auto 0; color: #2b2119; }
.tn-cols {
  display: flex;
  justify-content: space-between;
  margin-top: 1.2rem;
  padding: 0 .9rem .35rem 1.4rem;
  font-family: "Josefin Sans", var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.tn-list { list-style: none; margin: 0 auto .6rem; padding: 0; }
.mobile-nav .tn-list a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: .55rem;
  min-height: 44px;
  padding: .72rem .4rem .62rem;
  font-family: "Josefin Sans", var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #2b2119;
  border-radius: 3px;
  transition: background .2s, color .2s;
}
.tn-dots {                             /* evenly spaced round dots, like the inspo */
  height: 4px;
  margin-bottom: .32em;
  background: radial-gradient(circle, currentColor 1px, transparent 1.5px) 0 50% / 9px 4px repeat-x;
  opacity: .7;
}
.tn-p { min-width: 1.6em; text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.mobile-nav .tn-list a:hover, .mobile-nav .tn-list a:focus-visible {
  background: rgba(120, 72, 30, .1);
  outline: none;
}
.mobile-nav .tn-list a[aria-current="page"] { color: var(--primary); }
.tn-flourish:last-child { margin-top: .4rem; }

/* ============================================================
   About page: an editorial spread (typewriter columns on paper,
   photographs set into a staggered grid, a bold title low on each spread)
   ============================================================ */
.zine {
  --paper: #e6dfd2;
  --ink: #2a221e;
  --mono: "Courier Prime", "Courier New", ui-monospace, monospace;
  color: var(--ink);
}
.zine, .zine p, .zine .zt { font-family: var(--mono); }
.zs {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4rem, 7vw, 6.5rem) 1.5rem;
  background: var(--paper) url("../img/cast-paper.jpg") center / cover;
  background-blend-mode: multiply;
}
.z-grain {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: -1; opacity: .2; mix-blend-mode: multiply; pointer-events: none;
}
.zs-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 2rem clamp(1rem, 2.2vw, 1.5rem);
  max-width: 980px;
  margin: auto;
  align-items: start;
}
.zine p { margin: 0; font-size: 15px; line-height: 1.62; }
.zine figure { margin: 0; }
.zine figure img { display: block; width: 100%; height: auto; }
.zine .z-credit { font-size: 13px; font-weight: 700; letter-spacing: .02em; }

/* the title block: bold title, a note set flush to its right edge */
.z-sign { display: grid; justify-items: start; width: max-content; max-width: 100%; }
.zine .zt {
  margin: 0;
  font-size: clamp(2rem, 3.3vw, 2.9rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--primary);
}
.zt > span { display: block; }
.zt.typing .ch { opacity: 0; }
.zt.typing .ch.on { opacity: 1; }
.zine h2.zt { font-size: clamp(1.8rem, 2.6vw, 2.4rem); }   /* spread titles sit a step below the page's h1 */
@media (min-width: 1400px) {
  .zine p { font-size: 16px; }
  .zs-grid { max-width: 1040px; }
}
.zine .z-meta {
  justify-self: end;
  margin-top: 1rem;
  text-align: right;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.z-meta span { display: block; }

/* a real photograph laid on the page: white border, soft contact shadow */
.z-print img { box-shadow: 0 0 0 7px #f5efe4, 0 18px 34px rgba(20, 8, 4, .34); }

/* ---------- the opening: a handwritten line over a photograph ---------- */
.zs-1 { padding-top: clamp(2.5rem, 5vw, 4rem); }
.zh { max-width: 780px; margin: 0 auto clamp(4.5rem, 8vw, 7rem); text-align: center; }
.zh-stage {
  --w: clamp(220px, 20vw, 300px);
  --fs: clamp(3.4rem, 5.8vw, 6.4rem);        /* the handwriting's size */
  position: relative;
  width: var(--w);
  margin: 0 auto;
  padding-top: calc(var(--fs) * .42);        /* measured off the handwriting, so its lower half always crosses the photo's top */
}
.zh-script {                                  /* one line, laid across the top of the photo */
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  translate: -54% 0;
  margin: 0;
  font-family: "Ms Madi", "Brush Script MT", cursive;
  font-size: var(--fs);
  font-weight: 400;
  line-height: .92;
  letter-spacing: 0;
  text-align: left;
  color: var(--ink);
  rotate: -5deg;
  text-shadow: 0 0 .1em rgba(250, 245, 236, .7), 0 1px .04em rgba(250, 245, 236, .5);
  pointer-events: none;                       /* the hover belongs to the photo beneath */
}
.zh-script { white-space: nowrap; }
.zh-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(42, 34, 30, .75), 0 18px 34px rgba(70, 46, 22, .2);
  cursor: pointer;
  outline: none;
}
.zine .zh-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zh-photo::after {                            /* paper showing through, strongest where the handwriting sits */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgb(232 224 210 / .66) 0%, rgb(232 224 210 / .42) 22%, rgb(232 224 210 / .16) 50%, rgb(232 224 210 / .08) 100%);
  pointer-events: none;
}
.zh-then { object-position: 74% 50%; filter: saturate(.82) contrast(.93); }
.zh-now {                                     /* today's photo develops in: warm and pale, then true */
  object-position: 50% 32%;
  opacity: 0;
  filter: sepia(.55) brightness(1.14) contrast(.88);
  transform: scale(1.04);
  transition: opacity .9s ease, filter 1.5s ease, transform 1.5s ease;
}
.zh-photo:hover .zh-now, .zh-photo:focus-visible .zh-now, .zh-photo.is-now .zh-now {
  opacity: 1; filter: saturate(.82) contrast(.93); transform: none;
}
.zh-photo:focus-visible { box-shadow: 0 0 0 1px rgba(42, 34, 30, .75), 0 0 0 5px color-mix(in oklab, var(--primary) 45%, transparent); }
.zh-words { position: relative; margin-top: clamp(2.6rem, 5vw, 3.6rem); }
.zh-ghost {                                   /* the faint echo of the handwriting behind the words */
  position: absolute;
  top: -.42em;
  left: -12%;
  z-index: -1;
  font-family: "Ms Madi", "Brush Script MT", cursive;
  font-size: clamp(3rem, 6vw, 5.4rem);
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
  opacity: .075;
  rotate: -3deg;
  pointer-events: none;
}
.zine .zh-lead {
  margin: 0 auto;
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.75vw, 1.4rem);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.zh-lead span { display: block; }
.zine .zh-body { max-width: 56ch; margin: 1.5rem auto 0; }

/* ---------- I. her story (the reference layout, as drawn) ---------- */
.z1-left { grid-column: 1 / 6; grid-row: 1; display: flex; flex-direction: column; gap: 1.62em; }
.z1-photo { grid-column: 6 / 11; grid-row: 1; }
.zs-1 .z-sign { grid-column: 1 / 6; grid-row: 2; align-self: end; }
.z1-p3 { grid-column: 6 / 10; grid-row: 2; }

/* ---------- II. the album, on wine ---------- */
.zs-2 {
  --ink: var(--primary-foreground);
  --gold: oklch(76% .09 80);
  background:
    radial-gradient(80% 70% at 25% 0%, color-mix(in oklab, var(--primary) 80%, transparent), transparent 72%),
    linear-gradient(180deg, #34101a 0%, #1f080d 100%);
  color: var(--ink);
}
.zs-2 .z-grain { mix-blend-mode: overlay; opacity: .32; }
.zs-2 .zt { color: var(--primary-foreground); }
.z2-left { grid-column: 1 / 6; display: flex; flex-direction: column; gap: 2.4rem; }
.z2-pair { display: flex; align-items: flex-end; gap: 1.6rem; }
.z2-pair figure:first-child { flex: 1 1 0; }
.z2-pair figure:last-child { flex: .6206 1 0; }        /* 800 / 1289, so both prints share a height */
.z2-right { grid-column: 7 / 11; align-self: stretch; display: flex; flex-direction: column; gap: 2.4rem; }
.zs-2 .z-sign { margin-top: auto; align-self: flex-end; }

/* ---------- III. write to me ---------- */
.z3-left { grid-column: 1 / 6; grid-row: 1; padding-top: clamp(1rem, 3vw, 2.5rem); display: flex; flex-direction: column; align-items: flex-start; gap: 1.8rem; }
.z3-photo { grid-column: 7 / 11; grid-row: 1; }

@media (max-width: 900px) {
  .zs-grid { display: flex; flex-direction: column; gap: 2rem; max-width: 560px; }
  .z1-left, .z2-left, .z2-right, .z3-left { display: contents; }
  .zh-stage { --w: min(56vw, 250px); --fs: min(3.4rem, 12.5vw); }
  .zh-ghost { left: -4%; font-size: 3rem; }
  .zine .z-sign { order: -2; margin: 0; align-self: flex-start; }
  .z1-photo { order: -1; }
  .zine .z-credit { order: 2; }
  .z1-p3 { order: 1; }
  .z2-family { order: -1; }
  .z2-pair { order: 1; }
  .z3-photo { order: -1; }
  .zs-3 .pill { margin-top: -.4rem; }
}
@media (max-width: 480px) {
  .zine p { font-size: 14.5px; }
  .z2-pair { gap: 1.1rem; }
}

/* ============================================================
   Blog: a writing-desk journal. The index leads with the newest post,
   then lists every post like a book's contents, by year; each post is a
   reading page built from the same template.
   ============================================================ */
.jr {
  --paper: #e6dfd2;
  --ink: #2a221e;
  --mono: "Courier Prime", "Courier New", ui-monospace, monospace;
  --gold-ink: oklch(58% .095 70);
  --print: #f6f0e6;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3.5rem, 6vw, 5.5rem) 1.5rem clamp(4.5rem, 8vw, 6.5rem);
  background: var(--paper) url("../img/cast-paper.jpg") center / cover;
  background-blend-mode: multiply;
  color: var(--ink);
}
.jr-meta { margin: 0 0 .9rem; font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: var(--muted-foreground); }

/* ---------- the index: masthead and the newest post ---------- */
.jr-head { max-width: 1040px; margin: 0 auto; text-align: center; }
.jr-head .eyebrow { color: var(--primary); }
.jr-head h1 { margin: .7rem 0 .8rem; font-size: clamp(2.8rem, 6vw, 5rem); line-height: 1; }
.jr-head h1 em { color: var(--primary); font-weight: 400; }
.jr-count { margin: 0; font-family: var(--mono); font-size: 13px; letter-spacing: .08em; color: var(--muted-foreground); }
.jr-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.2rem, 5vw, 4.5rem);
  max-width: 1040px;
  margin: clamp(3rem, 5vw, 4.2rem) auto 0;
}
.jr-lead-print { display: block; rotate: -1.2deg; transition: rotate .45s ease, translate .45s ease; }
.jr-lead-print img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  box-shadow: 0 0 0 9px var(--print), 0 24px 44px rgba(60, 38, 18, .28);
}
.jr-lead-print:hover { rotate: 0deg; translate: 0 -3px; }
.jr-lead h2 { margin: 0 0 1rem; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.15; }
.jr-lead h2 a { transition: color .25s; }
.jr-lead h2 a:hover { color: var(--primary); }
.jr-lead-copy > p:not(.jr-meta) { margin: 0 0 1.4rem; line-height: 1.8; color: var(--muted-foreground); }

/* ---------- the index: every post, like a book's contents ---------- */
.jr-archive { max-width: 900px; margin: clamp(4rem, 8vw, 6.5rem) auto 0; }
.jr-years {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.6rem;
  padding: .9rem 0; border-block: 1px solid rgba(90, 70, 50, .25);
  font-family: var(--mono); font-size: 14px; letter-spacing: .12em;
}
.jr-years a { padding: .35rem .2rem; color: var(--muted-foreground); transition: color .25s; }
.jr-years a:hover { color: var(--primary); }
.jr-year { margin-top: clamp(2.6rem, 5vw, 3.6rem); scroll-margin-top: 90px; }
.jr-year-title {
  display: flex; align-items: center; gap: 1.2rem; margin: 0 0 .5rem;
  font-family: var(--font-serif); font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-style: italic; font-weight: 400;
  color: var(--primary);
}
.jr-year-title::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--gold-ink) 70%, transparent), transparent);
}
.jr-list { list-style: none; margin: 0; padding: 0; }
.jr-list a {
  display: grid;
  grid-template-columns: 60px 4.4rem fit-content(62%) minmax(1.5rem, 1fr) auto;
  align-items: center;
  gap: 0 1rem;
  padding: .75rem .5rem;
  border-bottom: 1px dashed rgba(90, 70, 50, .22);
  transition: background .25s;
}
.jr-list a:hover { background: rgba(255, 252, 245, .35); }
.jr-thumb {
  display: grid; place-items: center; width: 60px; aspect-ratio: 1; overflow: hidden;
  background: #efe7da; box-shadow: 0 0 0 3px var(--print), 0 6px 12px rgba(60, 38, 18, .2);
  transition: translate .3s ease;
}
.jr-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jr-thumb .jr-mark { width: 62%; height: 62%; object-fit: contain; opacity: .8; }
.jr-list a:hover .jr-thumb { translate: 0 -2px; }
.jr-date, .jr-read { font-family: var(--mono); font-size: 13px; color: var(--muted-foreground); white-space: nowrap; }
.jr-t { font-family: var(--font-serif); font-size: 16.5px; line-height: 1.4; transition: color .25s; }
.jr-list a:hover .jr-t { color: var(--primary); }
.jr-dots { height: 0; border-bottom: 2px dotted rgba(90, 70, 50, .35); translate: 0 .35em; }

/* ---------- a post ---------- */
.jr-post { padding-top: clamp(2.5rem, 5vw, 4rem); }
.jr-post-head { max-width: 780px; margin: 0 auto; text-align: center; }
.jr-back {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--mono); font-size: 13px; letter-spacing: .08em; color: var(--muted-foreground);
  transition: color .25s;
}
.jr-back svg { rotate: 180deg; }
.jr-back:hover { color: var(--primary); }
.jr-post-head .jr-meta { margin: 2.2rem 0 1rem; }
.jr-post-head h1 { margin: 0; font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: 1.14; text-wrap: balance; }
.jr-orn { width: min(240px, 66%); margin: 1.5rem auto 0; color: var(--gold-ink); }
.jr-orn svg { display: block; width: 100%; height: auto; }
.jr-hero { max-width: 820px; margin: clamp(2.4rem, 5vw, 3.4rem) auto 0; }
.jr-hero img {
  display: block; width: 100%; height: auto; max-height: 560px; object-fit: cover;
  box-shadow: 0 0 0 10px var(--print), 0 26px 48px rgba(60, 38, 18, .26);
}
.jr-body {
  max-width: 680px;
  margin: clamp(2.8rem, 5vw, 3.8rem) auto 0;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.85;
  color: #2e2622;
}
.jr-body p { margin: 0 0 1.35em; }
.jr-body > p:first-of-type::first-letter {      /* a drop cap opens every post */
  float: left; margin: .1em .1em 0 0; font-size: 3.5em; line-height: .8; color: var(--primary);
}
.jr-body h2 { margin: 2.1em 0 .7em; font-size: 1.5em; font-style: italic; font-weight: 400; line-height: 1.25; color: var(--primary); }
.jr-body h3 {
  margin: 2em 0 .7em; font-family: var(--mono); font-size: .82em; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.jr-body blockquote { margin: 1.8em 0; padding: .2em 0 .2em 1.4em; border-left: 2px solid var(--gold-ink); font-style: italic; }
.jr-body blockquote p { margin: 0; }
.jr-body ul, .jr-body ol { margin: 0 0 1.35em; padding-left: 1.3em; }
.jr-body li { margin: .35em 0; }
.jr-body a { color: var(--primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.jr-body figure { margin: 2.3em auto; }
.jr-body figure img {
  display: block; max-width: 100%; height: auto; margin: 0 auto;
  box-shadow: 0 0 0 8px var(--print), 0 18px 34px rgba(60, 38, 18, .24);
}
.jr-body video { display: block; width: 100%; max-height: 70vh; background: #000; box-shadow: 0 18px 34px rgba(60, 38, 18, .24); }
.jr-sign {                                     /* her sign-off, in the About page's hand */
  max-width: 680px; margin: 1.6rem auto 0; text-align: right;
  font-family: "Ms Madi", "Brush Script MT", cursive; font-size: 3.4rem; line-height: 1; color: var(--ink);
  rotate: -4deg;
}
.jr-pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem;
  max-width: 900px; margin: clamp(3.5rem, 7vw, 5rem) auto 0; padding-top: 1.6rem;
  border-top: 1px solid rgba(90, 70, 50, .25);
}
.jr-pager a { display: flex; flex-direction: column; gap: .45rem; padding: .6rem .2rem; }
.jr-pager .jr-newer { grid-column: 2; text-align: right; }
.jr-pager span { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-foreground); }
.jr-pager b { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 400; line-height: 1.35; transition: color .25s; }
.jr-pager a:hover b { color: var(--primary); }

@media (max-width: 760px) {
  .jr-lead { grid-template-columns: 1fr; }
  .jr-list a {
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-areas: "th date" "th title";
    gap: .15rem .9rem;
  }
  .jr-thumb { grid-area: th; width: 54px; }
  .jr-date { grid-area: date; }
  .jr-t { grid-area: title; }
  .jr-dots, .jr-read { display: none; }
  .jr-body { font-size: 16.5px; }
  .jr-pager { grid-template-columns: 1fr; }
  .jr-pager .jr-newer { grid-column: 1; text-align: left; }
}

/* ============================================================
   Books: her library. A short paper masthead, the new release on wine,
   then a warmly lit room with one shelf per series; the books stand as
   real volumes (cover, page edges, contact shadow) and turn toward you.
   ============================================================ */
.lib-hero {                                     /* a hand running along an old shelf, looping behind the words */
  --gold: oklch(76% .09 80);
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center;
  min-height: clamp(400px, 31vw, 580px);
  padding: clamp(3.5rem, 6vw, 5rem) 1.5rem;
  text-align: center;
  background: #120a07 url("../img/bookshelf-poster.jpg") center / cover;
  color: var(--primary-foreground);
}
.lib-hero-film { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.lib-hero::after {                              /* a soft shade so the words read over the gilt spines */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(46% 62% at 50% 50%, rgba(14, 7, 5, .64), rgba(14, 7, 5, .28) 100%),
    linear-gradient(180deg, rgba(14, 7, 5, .35) 0%, transparent 30%, transparent 68%, rgba(40, 10, 17, .88) 100%);
}
.lib-hero-copy { max-width: 900px; }
.lib-hero .eyebrow { color: var(--gold); text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.lib-hero h1 {
  margin: .6rem 0 .7rem; font-size: clamp(3.2rem, 7.5vw, 6rem); line-height: 1;
  color: var(--primary-foreground); text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
}
.lib-note {
  margin: 0; font-family: "Courier Prime", "Courier New", monospace; font-size: 14.5px;
  color: color-mix(in oklab, var(--primary-foreground) 88%, transparent); text-shadow: 0 1px 10px rgba(0, 0, 0, .75);
}
.lib-jump {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.8rem;
  margin: 2.2rem auto 0; padding: .9rem 1rem;
  border-block: 1px solid color-mix(in oklab, var(--gold) 45%, transparent);
  font-family: var(--font-serif); font-size: 14.5px; font-style: italic;
}
.lib-jump a { padding: .3rem .2rem; color: var(--primary-foreground); text-shadow: 0 1px 8px rgba(0, 0, 0, .75); transition: color .25s; }
.lib-jump a:hover { color: var(--gold); }

/* ---------- the new release ---------- */
.lib-release {
  --gold: oklch(76% .09 80);
  position: relative; isolation: isolate; overflow: hidden; scroll-margin-top: 70px;
  padding: clamp(4rem, 7vw, 6rem) 1.5rem;
  color: var(--primary-foreground);
  background:
    radial-gradient(60% 80% at 28% 45%, color-mix(in oklab, var(--primary) 92%, white 3%), transparent 72%),
    linear-gradient(135deg, #3a0f19 0%, #1e070d 100%);
}
.lib-release-inner {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center; gap: clamp(2rem, 5vw, 5rem); max-width: 1100px; margin: auto;
}
.lib-release-book img {
  display: block; width: 100%; max-width: 430px; margin: auto;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5));
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.lib-release-book:hover img { transform: translateY(-8px) rotate(-1deg); }
.lib-release .eyebrow { color: var(--gold); }
.lib-release h2 { margin: .8rem 0 1.4rem; font-size: clamp(1.8rem, 3.2vw, 2.7rem); line-height: 1.2; }
.lib-release-copy > p:not(.eyebrow) { max-width: 54ch; margin: 0 0 1em; line-height: 1.8; color: color-mix(in oklab, var(--primary-foreground) 82%, transparent); }
.lib-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; margin-top: 2rem; }
.lib-release .text-link { color: var(--primary-foreground); }

/* ---------- the library ---------- */
.lib-room {
  --gold: oklch(76% .09 80);
  --bh: clamp(200px, 15vw, 250px);            /* the height every book stands to */
  padding: clamp(4.5rem, 8vw, 6.5rem) 1.5rem clamp(3rem, 5vw, 4rem);
  color: var(--primary-foreground);
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(214, 170, 110, .09), transparent 70%),
    linear-gradient(180deg, #211410 0%, #150c09 100%);
}
.lib-shelf { max-width: 1100px; margin: 0 auto clamp(4rem, 7vw, 5.5rem); scroll-margin-top: 80px; }
.lib-plate { display: flex; justify-content: center; margin: 0 0 2.4rem; font-weight: 400; }
.lib-plate span {                               /* a brass nameplate, screwed to the shelf */
  position: relative;
  padding: .6rem 2.2rem;
  border-radius: 2px;
  font-family: var(--font-serif); font-size: 12.5px; letter-spacing: .26em; text-transform: uppercase;
  color: #3a2810; text-shadow: 0 1px 0 rgba(255, 244, 214, .45);
  background: linear-gradient(180deg, #f0d894 0%, #c49a4e 48%, #a97f38 52%, #dcbd72 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(60, 36, 8, .35), 0 3px 8px rgba(0, 0, 0, .55);
}
.lib-plate span::before, .lib-plate span::after {
  content: ""; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff2c8, #8d6a2c 70%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .45);
}
.lib-plate span::before { left: .8rem; }
.lib-plate span::after { right: .8rem; }
.lib-row {
  display: flex; justify-content: center; align-items: flex-start;
  gap: 0 clamp(1.8rem, 3.6vw, 3.4rem);
  margin: 0; padding: 0; list-style: none;
  position: relative;
}
.lib-row::after {                               /* the picture light over the shelf */
  content: ""; position: absolute; z-index: 0; left: 8%; right: 8%; top: -3.5rem; height: calc(var(--bh) + 5rem);
  background: radial-gradient(50% 60% at 50% 25%, rgba(255, 210, 150, .11), transparent 72%);
  pointer-events: none;
}
.lib-row li {
  --w: calc(var(--bh) * var(--ar));
  --gap: clamp(1.8rem, 3.6vw, 3.4rem);
  position: relative; z-index: 1; flex: none; width: max(var(--w), 140px);
  display: flex; flex-direction: column; align-items: center;
}
.lib-row li::before {                           /* the shelf plank, one span per book so it scrolls with them */
  content: ""; position: absolute; z-index: -1; top: calc(var(--bh) - 2px); height: 15px;
  left: calc(var(--gap) / -2 - 1px); right: calc(var(--gap) / -2 - 1px);
  background: linear-gradient(180deg, #7a543a 0%, #4f3322 28%, #2f1d13 100%);
  box-shadow: inset 0 1px 0 rgba(255, 226, 180, .22), 0 16px 22px rgba(0, 0, 0, .55);
}
.lib-row li:first-child::before { left: -2.4rem; border-radius: 2px 0 0 2px; }
.lib-row li:last-child::before { right: -2.4rem; border-radius: 0 2px 2px 0; }
.bk { position: relative; display: block; height: var(--bh); perspective: 1100px; }
.bk-3d {
  --t: 16px;                                    /* the book's thickness */
  position: relative; display: block; width: var(--w); height: var(--bh);
  transform-style: preserve-3d;
  transform: rotateY(-24deg);
  transform-origin: 40% 100%;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.bk-3d img, .bk-3d::before, .bk-3d::after { position: absolute; inset: 0; width: 100%; height: 100%; }
.bk-3d img { object-fit: cover; border-radius: 1px 3px 3px 1px; transform: translateZ(calc(var(--t) / 2)); }
.bk-3d::before {                                /* the hinge crease and a little sheen on the cover */
  content: ""; z-index: 1; border-radius: 1px 3px 3px 1px; transform: translateZ(calc(var(--t) / 2 + .5px));
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .32) 0, rgba(255, 255, 255, .22) 1.6%, rgba(0, 0, 0, .08) 3.4%, transparent 6%),
    linear-gradient(115deg, transparent 55%, rgba(255, 255, 255, .08) 70%, transparent 85%);
  pointer-events: none;
}
.bk-3d::after {                                 /* the back board */
  content: ""; border-radius: 3px 1px 1px 3px; transform: translateZ(calc(var(--t) / -2)); background: #1b120d;
}
.bk-pages {                                     /* the fore-edge: stacked pages */
  position: absolute; top: 3px; height: calc(100% - 6px); width: var(--t);
  left: calc(100% - var(--t) / 2 - 3px);
  transform: rotateY(90deg);
  background: repeating-linear-gradient(90deg, #f4efe4 0 1px, #d8cfbd 1px 2px);
}
.bk-shadow {                                    /* where the book meets the shelf */
  position: absolute; left: 8%; right: -6%; bottom: -3px; height: 10px; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .7), transparent 75%);
  transition: opacity .5s, transform .6s;
}
.bk:hover .bk-3d, .bk:focus-visible .bk-3d { transform: rotateY(-6deg) translateY(-10px); }
.bk:hover .bk-shadow, .bk:focus-visible .bk-shadow { opacity: .45; transform: scaleX(.85); }
.bk:focus-visible { outline: none; }
.bk:focus-visible .bk-3d img { outline: 2px solid var(--gold); outline-offset: 4px; }
.bk-cap { margin: 2.2rem 0 0; text-align: center; }
.bk-cap b { display: block; font-family: var(--font-serif); font-size: 15px; font-weight: 400; line-height: 1.35; }
.bk-cap span {
  display: block; margin-top: .4rem;
  font-family: "Courier Prime", "Courier New", monospace; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
}
.bk-listen {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .6rem;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--primary-foreground); border-bottom: 1px solid color-mix(in oklab, var(--gold) 60%, transparent);
}
.bk-listen:hover { color: var(--gold); }

@media (max-width: 900px) {
  .lib-release-inner { grid-template-columns: 1fr; text-align: left; }
  .lib-release-book img { max-width: 300px; }
}
@media (max-width: 760px) {
  .lib-room { --bh: 190px; padding-inline: 0; }
  .lib-plate { padding: 0 1.5rem; }
  .lib-plate span { padding: .55rem 1.7rem; font-size: 10.5px; letter-spacing: .16em; text-align: center; }
  .lib-row {                                    /* a shelf you swipe along */
    justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 1.2rem 3.2rem 1.4rem; scrollbar-width: none;
  }
  .lib-row::-webkit-scrollbar { display: none; }
  .lib-row li { scroll-snap-align: center; }
}

/* ============================================================
   Wolf Coat: a winter night in 1970s Germany. The snowbound street
   (with real falling snow), the story on paper beside the book in hand,
   readers' reviews as taped newspaper clippings, her note on a letter.
   ============================================================ */
.wc-link {
  display: inline-block; padding-bottom: 2px;
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; transition: color .25s, border-color .25s;
}
.wc-badge {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; opacity: .85;
}
.wc-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .6; }

/* ---------- the winter street ---------- */
.wc-hero {
  --ice: #dde5ec;
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center;
  min-height: clamp(520px, 40vw, 720px);
  padding: clamp(3.5rem, 6vw, 5rem) 1.5rem clamp(4rem, 6.5vw, 5.5rem);
  color: var(--primary-foreground);
  background: linear-gradient(180deg, #121821 0%, #1c2430 58%, #25121a 100%);
}
.wc-hero-bg {                                   /* the street, dim and foggy, fading out where the book stands */
  position: absolute; inset: -12px; z-index: -2;
  background: url("../img/wolf-coat-snow-street.jpg") 0 45% / cover no-repeat;
  filter: blur(1.5px) brightness(.64) saturate(.8);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 34%, transparent 60%);
          mask-image: linear-gradient(90deg, #000 0%, #000 34%, transparent 60%);
}
.wc-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(55% 70% at 74% 52%, rgba(125, 22, 38, .3), transparent 72%),
    linear-gradient(90deg, rgba(10, 14, 20, .55) 0%, rgba(10, 14, 20, .12) 58%, transparent 100%),
    linear-gradient(180deg, rgba(10, 14, 20, .35) 0%, transparent 25%, transparent 72%, rgba(24, 9, 13, .92) 100%);
}
.wc-snow { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.wc-hero-inner {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center; gap: clamp(2rem, 5vw, 5rem);
  width: 100%; max-width: 1180px; margin: auto;
}
.wc-hero .eyebrow { color: var(--ice); opacity: .85; }
.wc-hero h1 {
  margin: .7rem 0 1.3rem;
  font-size: clamp(3.4rem, 8.4vw, 7.6rem); line-height: .95; letter-spacing: .03em; text-transform: uppercase;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .45);
}
.wc-tag { max-width: 28ch; margin: 0; font-family: var(--font-serif); font-size: clamp(1.15rem, 1.9vw, 1.6rem); font-style: italic; line-height: 1.5; color: var(--ice); }
.wc-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.7rem; margin-top: 2.3rem; }
.wc-hero .wc-link, .wc-hero .wc-badge { color: var(--ice); }
.wc-hero .wc-link { border-color: rgba(221, 229, 236, .45); }
.wc-hero .wc-link:hover { border-color: var(--ice); }
.wc-hero-book img {
  display: block; width: 100%; max-width: 370px; margin: auto;
  filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .6));
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.wc-hero-book:hover img { transform: translateY(-8px) rotate(-1deg); }

/* ---------- the story, on paper ---------- */
.wc-story, .wc-note {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(4.5rem, 8vw, 7rem) 1.5rem;
  background: #e6dfd2 url("../img/cast-paper.jpg") center / cover;
  background-blend-mode: multiply;
  color: #2a221e;
}
.wc-story-inner {
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  align-items: center; gap: clamp(2.5rem, 6vw, 6rem); max-width: 1120px; margin: auto;
}
.wc-print { margin: 0; rotate: -2deg; }
.wc-print img { display: block; width: 100%; height: auto; box-shadow: 0 0 0 10px #f6f0e6, 0 26px 50px rgba(60, 38, 18, .3); }
.wc-story .eyebrow { color: var(--primary); }
.wc-story h2 { margin: .7rem 0 1.5rem; font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.15; }
.wc-story-copy > p:not(.eyebrow) { max-width: 60ch; margin: 0 0 1.1em; line-height: 1.85; color: #4a3d36; }
.wc-story-copy > p:nth-of-type(2)::first-letter {  /* the description opens on a drop cap */
  float: left; margin: .08em .1em 0 0; font-family: var(--font-serif); font-size: 3.4em; line-height: .8; color: var(--primary);
}
.wc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.7rem; margin-top: 2rem; }
.wc-story .wc-link { color: var(--foreground); border-color: rgba(42, 34, 30, .35); }
.wc-story .wc-link:hover { color: var(--primary); border-color: var(--primary); }
.wc-story .wc-badge { color: var(--muted-foreground); }

/* ---------- reviews, as newspaper clippings ---------- */
.wc-reviews {
  --ice: #dde5ec;
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(4.5rem, 8vw, 7rem) 1.5rem;
  color: var(--primary-foreground);
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(150, 170, 190, .12), transparent 70%),
    linear-gradient(180deg, rgba(20, 26, 34, .8) 0%, rgba(13, 17, 22, .9) 100%),
    #0f1319 url("../img/wolf-coat-street.jpg") center 40% / cover;
}
.wc-reviews-head { max-width: 780px; margin: 0 auto clamp(3rem, 5vw, 4.2rem); text-align: center; }
.wc-reviews .eyebrow { color: var(--ice); opacity: .8; }
.wc-reviews h2 { margin: .6rem 0 .9rem; font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.wc-rating { margin: 0; font-family: "Courier Prime", "Courier New", monospace; font-size: 14px; letter-spacing: .06em; color: var(--ice); }
.wc-rating span { margin-right: .5rem; letter-spacing: .25em; color: oklch(76% .09 80); }
.wc-clips {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start; gap: clamp(1.6rem, 3vw, 2.6rem);
  max-width: 1180px; margin: auto;
}
.wc-clip-wrap {                                 /* the shadow lives here, so the torn edge casts it too */
  position: relative; rotate: var(--tilt, 0deg);
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .45));
}
.wc-clip-wrap::before {                         /* a strip of tape holding it up */
  content: ""; position: absolute; z-index: 2; top: -12px; left: 50%; width: 92px; height: 26px;
  translate: -50% 0; rotate: -3deg;
  background: linear-gradient(180deg, rgba(246, 240, 226, .72), rgba(230, 222, 204, .62));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.wc-clip {
  padding: 2.1rem 1.6rem 1.9rem;
  background: #ece7dc url("../img/cast-paper.jpg") center / cover;
  background-blend-mode: multiply;
  color: #221c18;
}
.wc-stars { margin: 0; font-size: 14px; letter-spacing: .22em; color: var(--primary); }
.wc-clip h3 { margin: .5rem 0 .7rem; font-family: var(--font-serif); font-size: 1.4rem; font-weight: 700; line-height: 1.15; text-transform: none; letter-spacing: 0; }
.wc-dateline {
  margin: 0 0 1rem; padding: .4rem 0;
  border-block: 1px solid rgba(40, 30, 20, .35);
  font-family: "Courier Prime", "Courier New", monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #6b5f55;
}
.wc-clip p:not(.wc-stars):not(.wc-dateline):not(.wc-by) {
  margin: 0 0 .85em; font-family: var(--font-serif); font-size: 14.5px; line-height: 1.68; text-align: justify; hyphens: auto;
}
.wc-by { margin: 1.1rem 0 0; text-align: right; font-family: "Courier Prime", "Courier New", monospace; font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.wc-more { margin: clamp(2.6rem, 5vw, 3.6rem) 0 0; text-align: center; }
.wc-reviews .wc-link { color: var(--ice); border-color: rgba(221, 229, 236, .45); }
.wc-reviews .wc-link:hover { border-color: var(--ice); }

/* ---------- the trailer, in the snow ---------- */
.wc-trailer {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(4.5rem, 8vw, 6.5rem) 1.5rem;
  color: #1e2830;
  background: #eef1f3;
}
.wc-trailer::before {                           /* the sled in the snow, softened to a winter glow */
  content: ""; position: absolute; inset: -40px; z-index: -2;
  background: url("../img/wolf-coat-sled.jpg") center 42% / cover;
  filter: blur(14px) brightness(1.06) saturate(.9);
}
.wc-trailer::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(244, 246, 248, .35) 0%, rgba(244, 246, 248, .78) 55%, rgba(244, 246, 248, .88) 100%);
}
.wc-trailer-inner {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: clamp(2.5rem, 6vw, 6rem); max-width: 1000px; margin: auto;
}
.wc-reel {
  width: clamp(260px, 25vw, 350px); aspect-ratio: 3 / 4; overflow: hidden; border-radius: 12px;
  background: #0d0f12;
  box-shadow: 0 0 0 8px #fff, 0 30px 60px rgba(30, 40, 50, .32);
}
.wc-reel video { display: block; width: 100%; height: 100%; object-fit: cover; }
.wc-trailer .eyebrow { color: var(--primary); }
.wc-trailer h2 {                                /* in the same hand as the trailer's own captions */
  max-width: 14ch; margin: .8rem 0 0;
  font-family: "Ms Madi", "Brush Script MT", cursive; font-size: clamp(2.8rem, 5vw, 4.6rem); font-weight: 400;
  line-height: 1.1; color: #1e2830;
}

/* ---------- her note, typed on a letter ---------- */
.wc-letter {
  display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  align-items: center; gap: clamp(2.2rem, 5vw, 4.5rem); max-width: 1080px; margin: auto;
}
.wc-photo { margin: 0; rotate: 2deg; }
.wc-photo img { display: block; width: 100%; height: auto; box-shadow: 0 0 0 10px #f6f0e6, 0 24px 44px rgba(60, 38, 18, .28); }
.wc-sheet {
  position: relative; padding: clamp(2rem, 4vw, 3.2rem);
  background: #fbf8f1;
  box-shadow: 0 1px 0 #e8e0d0, 0 22px 44px rgba(60, 38, 18, .18);
}
.wc-sheet .eyebrow { color: var(--primary); }
.wc-sheet h2 { margin: .6rem 0 1.3rem; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.2; }
.wc-sheet > p:not(.eyebrow):not(.wc-sign) {
  margin: 0 0 1em; font-family: "Courier Prime", "Courier New", monospace; font-size: 15px; line-height: 1.75; color: #33291f;
}
.wc-sign {
  margin: .4rem 0 1.4rem; text-align: right;
  font-family: "Ms Madi", "Brush Script MT", cursive; font-size: 3.4rem; line-height: 1; color: var(--ink, #2a221e);
  rotate: -4deg;
}

@media (max-width: 900px) {
  .wc-hero-inner, .wc-story-inner, .wc-letter { grid-template-columns: 1fr; }
  .wc-hero-book { order: -1; }
  .wc-hero-book img { max-width: 280px; }
  .wc-hero-bg { -webkit-mask-image: none; mask-image: none; filter: blur(3px) brightness(.5) saturate(.8); }
  .wc-clips { grid-template-columns: 1fr; max-width: 560px; }
  .wc-trailer-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .wc-trailer-copy { order: -1; }
  .wc-trailer h2 { margin-inline: auto; }
  .wc-reel { width: min(78vw, 340px); }
  .wc-print, .wc-photo { max-width: 420px; margin: 0 auto; }
}

/* ============================================================
   Upcoming Work: from the writing desk. The title types itself out and
   its cursor keeps blinking (the work isn't finished); an index card lists
   what's coming; Fooled by a Woman's Smile sits in a 1920s speakeasy frame,
   Broken Fence in a quiet sepia print.
   ============================================================ */
.up-hero, .up-fence {
  position: relative; isolation: isolate; overflow: hidden;
  background: #e6dfd2 url("../img/cast-paper.jpg") center / cover;
  background-blend-mode: multiply;
  color: #2a221e;
}
.up-hero { padding: clamp(3.5rem, 6vw, 5rem) 1.5rem clamp(4rem, 7vw, 5.5rem); }
.up-hero-inner {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center; gap: clamp(2.5rem, 6vw, 6rem); max-width: 1120px; margin: auto;
}
.up-hero .eyebrow, .up-fence .eyebrow { color: var(--primary); }
.up-title {
  margin: .8rem 0 2.2rem;
  font-family: "Courier Prime", "Courier New", monospace; font-size: clamp(2.6rem, 5.4vw, 4.6rem); font-weight: 700;
  line-height: 1.05; letter-spacing: -.01em; color: #2a221e;
}
.up-title.typing .ch { opacity: 0; }
.up-title.typing .ch.on { opacity: 1; }
.up-title > span::after {                       /* the cursor, still waiting on the next word */
  content: ""; display: inline-block; width: .07em; height: .82em; margin-left: .12em; vertical-align: -.04em;
  background: var(--primary); animation: up-caret 1.05s steps(1) infinite;
}
@keyframes up-caret { 50% { opacity: 0; } }
.up-card {                                      /* a ruled index card */
  position: relative; max-width: 470px; margin: 0; padding: 46px 1.6rem 14px 3.2rem; list-style: none;
  rotate: -1.2deg;
  background:
    linear-gradient(90deg, transparent 2.3rem, rgba(200, 60, 70, .38) 2.3rem, rgba(200, 60, 70, .38) calc(2.3rem + 1px), transparent calc(2.3rem + 1px)),
    linear-gradient(180deg, transparent 38px, rgba(200, 60, 70, .45) 38px, rgba(200, 60, 70, .45) 40px, transparent 40px),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(80, 120, 160, .24) 31px 32px),
    #fcfaf4;
  background-position: 0 0, 0 0, 0 7px;         /* the blue rules fall just under each typed line */
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08), 0 16px 30px rgba(60, 38, 18, .18);
}
.up-card li a {
  display: flex; align-items: baseline; gap: .6rem; height: 32px; line-height: 32px;
  font-family: "Courier Prime", "Courier New", monospace; font-size: 15px; color: #2a221e; transition: color .25s;
}
.up-card li a span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-card i { flex: 1; min-width: 1rem; border-bottom: 1px dotted rgba(42, 34, 30, .45); translate: 0 -.3em; }
.up-card b { color: var(--primary); white-space: nowrap; }
.up-card li a:hover span { color: var(--primary); }
.up-desk { margin: 0; rotate: 2deg; }
.up-desk img { display: block; width: 100%; height: auto; box-shadow: 0 0 0 10px #f6f0e6, 0 26px 50px rgba(60, 38, 18, .3); }

/* ---------- Fooled by a Woman's Smile: a 1920s speakeasy ---------- */
.up-fooled {
  --gold: oklch(76% .09 80);
  position: relative; isolation: isolate; overflow: hidden; scroll-margin-top: 70px;
  padding: clamp(3.5rem, 6vw, 5rem) 1.5rem;
  color: var(--primary-foreground);
  background:
    radial-gradient(42% 60% at 27% 45%, rgba(214, 170, 110, .16), transparent 70%),
    radial-gradient(80% 60% at 50% 115%, rgba(125, 22, 38, .28), transparent 70%),
    linear-gradient(180deg, #141110 0%, #0b0a09 100%);
}
.up-frame {                                     /* a thin double gold rule, like the cover's border */
  position: relative; max-width: 1180px; margin: auto;
  padding: clamp(2.8rem, 4.6vw, 3.6rem) clamp(1.5rem, 4vw, 3.6rem);
  border: 1px solid color-mix(in oklab, var(--gold) 45%, transparent);
  outline: 1px solid color-mix(in oklab, var(--gold) 20%, transparent); outline-offset: 8px;
}
.up-orn {
  position: absolute; top: 0; left: 50%; translate: -50% -50%;
  width: 190px; padding: 0 16px; background: #131110; color: var(--gold);
}
.up-orn svg { display: block; width: 100%; height: auto; }
.up-fooled-inner {
  display: grid; grid-template-columns: minmax(0, .56fr) minmax(0, 1.44fr);
  align-items: center; gap: clamp(2.5rem, 5vw, 5rem);
}
.up-fooled-book img {
  display: block; width: 100%; max-width: 320px; margin: auto;
  filter: drop-shadow(0 34px 44px rgba(0, 0, 0, .65)) drop-shadow(0 0 70px rgba(214, 170, 110, .12));
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.up-fooled-book img:hover { transform: translateY(-8px) rotate(-1deg); }
.up-date {
  display: inline-block; margin: 0; padding: .5rem 1.15rem;
  border: 1px solid color-mix(in oklab, var(--gold) 55%, transparent);
  font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--gold);
}
.up-fooled h2 { margin: 1.1rem 0 .6rem; font-size: clamp(2.1rem, 3.3vw, 2.9rem); line-height: 1.08; }
.up-tagline { margin: 0 0 1.3rem; font-family: var(--font-serif); font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-style: italic; color: var(--gold); }
.up-blurb p {
  margin: 0 0 .9em; font-size: 14.5px; line-height: 1.72;
  color: color-mix(in oklab, var(--primary-foreground) 80%, transparent);
}
.up-blurb p { orphans: 3; widows: 3; }
@media (min-width: 1100px) {
  .up-blurb { columns: 2; column-gap: 2.2rem; }      /* set like a newspaper, so the section stays compact */
}
.up-fooled .pill { margin-top: 1.1rem; }

/* ---------- Broken Fence: a quiet memoir ---------- */
.up-fence { padding: clamp(4.5rem, 8vw, 6.5rem) 1.5rem; scroll-margin-top: 70px; }
.up-fence-inner {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: center; gap: clamp(2.5rem, 6vw, 6rem); max-width: 1040px; margin: auto;
}
.up-fence h2 { margin: .7rem 0 .3rem; font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1; }
.up-memoir {
  margin: 0; font-family: "Ms Madi", "Brush Script MT", cursive; font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1.1; color: var(--primary); rotate: -3deg; transform-origin: left center;
}
.up-fence-print { margin: 0; rotate: 1.6deg; }
.up-fence-print img { display: block; width: 100%; height: auto; box-shadow: 0 0 0 12px #f3ecdf, 0 26px 50px rgba(60, 38, 18, .3); }

@media (max-width: 900px) {
  .up-hero-inner, .up-fooled-inner, .up-fence-inner { grid-template-columns: minmax(0, 1fr); }
  .up-desk, .up-fence-print { max-width: 460px; margin: 0 auto; }
  .up-fooled-book img { max-width: 250px; }
  .up-frame { padding-inline: 1.3rem; }
}
@media (max-width: 480px) {
  .up-card { padding-left: 2.4rem; padding-right: .8rem; rotate: -.8deg; }
  .up-card li a { font-size: 11.5px; gap: .3rem; }
  .up-card i { min-width: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .up-title > span::after { animation: none; } }

/* ============================================================
   Guest Writers: a literary salon. The book-stacks scene behind the
   heading, each guest author's book standing as a real volume beside her
   bio (the 3D book from the Books page), and the guest still to come sealed
   in the homepage's wax-sealed letter.
   ============================================================ */
.gw-hero {
  --gold: oklch(76% .09 80);
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center; min-height: clamp(380px, 30vw, 520px);
  padding: clamp(3.5rem, 6vw, 5rem) 1.5rem;
  text-align: center; color: var(--primary-foreground);
  background: #1a120d url("../img/general-clean-scene.jpg") center 45% / cover;
}
.gw-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(50% 65% at 50% 50%, rgba(18, 10, 6, .72), rgba(18, 10, 6, .45) 100%),
    linear-gradient(180deg, rgba(18, 10, 6, .3) 0%, transparent 35%, transparent 70%, rgba(30, 20, 14, .6) 100%);
}
.gw-hero-copy { max-width: 760px; }
.gw-hero .eyebrow { color: var(--gold); text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.gw-hero h1 { margin: .6rem 0 1.1rem; font-size: clamp(3rem, 7vw, 5.6rem); line-height: 1; text-shadow: 0 2px 24px rgba(0, 0, 0, .5); }
.gw-lede {
  margin: 0 auto; max-width: 52ch; font-family: var(--font-serif); font-size: clamp(1.02rem, 1.4vw, 1.2rem); font-style: italic;
  line-height: 1.7; color: color-mix(in oklab, var(--primary-foreground) 88%, transparent); text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
}

/* ---------- the guest authors ---------- */
.gw-guests {
  --gold: oklch(76% .09 80);
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(4.5rem, 8vw, 6.5rem) 1.5rem;
  background: #e6dfd2 url("../img/cast-paper.jpg") center / cover;
  background-blend-mode: multiply;
  color: #2a221e;
}
.gw-guest {
  --bh: clamp(300px, 26vw, 400px);             /* the book's height */
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: clamp(2.8rem, 7vw, 7rem);
  max-width: 1060px; margin: 0 auto;
}
.gw-guest + .gw-guest { margin-top: clamp(4.5rem, 8vw, 6.5rem); padding-top: clamp(4.5rem, 8vw, 6.5rem); border-top: 1px solid rgba(90, 70, 50, .2); }
.gw-flip { grid-template-columns: minmax(0, 1fr) auto; }
.gw-flip .gw-book { order: 2; }
.gw-book { --w: calc(var(--bh) * var(--ar)); justify-self: center; margin: 0 1.5rem; }
.gw-book .bk-3d { transform: rotateY(-20deg); }
.gw-flip .gw-book .bk-3d { transform: rotateY(-20deg); }
.gw-book .bk-shadow { bottom: -8px; height: 16px; background: radial-gradient(50% 50% at 50% 50%, rgba(60, 38, 18, .55), transparent 75%); }
.gw-guests .eyebrow { color: var(--primary); }
.gw-copy h2 { margin: .6rem 0 .3rem; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.05; }
.gw-title { margin: 0 0 1.5rem; font-family: var(--font-serif); font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--primary); }
.gw-copy > p:not(.eyebrow):not(.gw-title) { max-width: 58ch; margin: 0 0 1em; line-height: 1.85; color: #4a3d36; }
.gw-copy .pill { margin-top: 1rem; }

/* ---------- the guest still to come ---------- */
.gw-soon .letter > p:not(.eyebrow) { text-align: left; }
.gw-soon .letter > p:not(.eyebrow) + p { margin-top: .9em; }
.gw-soon .letter h2 { font-family: "Ms Madi", "Brush Script MT", cursive; font-size: clamp(3.2rem, 6vw, 4.4rem); font-weight: 400; line-height: 1; margin-bottom: .8rem; }

@media (max-width: 860px) {
  .gw-guest, .gw-flip { grid-template-columns: minmax(0, 1fr); gap: 2.6rem; }
  .gw-flip .gw-book { order: 0; }
  .gw-guest { --bh: 300px; }
}

/* ============================================================
   Poetry: a collection. A contents page, the poem for the season on the
   homepage's moving paper, the roadside poems typed on taped sheets over
   kraft card, the woman in the window beside a pane of glass, and the
   series about her writing life as a real book you turn page by page.
   ============================================================ */
.pe-hero, .pe-road, .pe-window {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(4.5rem, 8vw, 6.5rem) 1.5rem;
  background: #e6dfd2 url("../img/cast-paper.jpg") center / cover;
  background-blend-mode: multiply;
  color: #2a221e;
}
.pe-stanza { margin: 0 0 1em; break-inside: avoid; }
.pe-stanza > span { display: block; padding-left: 1.2em; text-indent: -1.2em; }   /* a wrapped line hangs */

/* ---------- the contents page ---------- */
.pe-hero { padding-top: clamp(3.5rem, 6vw, 5rem); }
.pe-hero-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: clamp(2.5rem, 6vw, 6rem); max-width: 1120px; margin: auto;
}
.pe-hero .eyebrow { color: var(--primary); }
.pe-hero h1 { margin: .6rem 0 0; font-size: clamp(3rem, 7vw, 5.4rem); line-height: 1; }
.pe-contents ol { list-style: none; max-width: 520px; margin: 2rem 0 0; padding: 0; border-top: 1px solid rgba(90, 70, 50, .25); }
.pe-contents li a {
  display: flex; align-items: baseline; gap: .6rem; padding: .55rem 0;
  border-bottom: 1px dashed rgba(90, 70, 50, .2); transition: color .25s;
}
.pe-contents li a span { font-family: var(--font-serif); font-size: 16px; }
.pe-contents li a i { flex: 1; min-width: 1rem; border-bottom: 2px dotted rgba(90, 70, 50, .32); translate: 0 -.3em; }
.pe-contents li a b { font-family: "Courier Prime", "Courier New", monospace; font-size: 12.5px; font-weight: 400; color: var(--muted-foreground); }
.pe-contents li a:hover span { color: var(--primary); }
.pe-contents .pe-group {
  margin-top: 1rem; padding: .5rem 0 .15rem;
  font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--primary);
}
.pe-contents .pe-sub a { padding-left: 1.2rem; }
.pe-hero-print { margin: 0; rotate: 2deg; }
.pe-hero-print img { display: block; width: 100%; height: auto; box-shadow: 0 0 0 10px #f6f0e6, 0 26px 50px rgba(60, 38, 18, .3); }

/* ---------- the poem for the season (the homepage's plate, the whole poem) ---------- */
.pe-season { min-height: 0; scroll-margin-top: 60px; }
.pe-season-frame { max-width: 64rem; }
.pe-season .pe-verse {
  max-width: 58rem; margin: 0 auto 1.8rem; columns: 2 22rem; column-gap: 4rem; text-align: left; hyphens: none;
  font-family: var(--font-serif); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.7;
  color: color-mix(in oklab, var(--primary-foreground) 93%, transparent);
}
.pe-date { margin: 0; font-family: "Courier Prime", "Courier New", monospace; font-size: 13px; letter-spacing: .12em; color: var(--accent); }

/* ---------- the girl by the side of the road: typed sheets on kraft card ---------- */
.pe-road { background-color: #cfb08a; scroll-margin-top: 60px; }
.pe-road-inner {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start; gap: clamp(1.8rem, 3.5vw, 3rem); max-width: 1180px; margin: auto;
}
.pe-road h2 { margin: 0 0 1.1rem; font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.1; }
.pe-road-intro > p { margin: 0; font-family: var(--font-serif); font-style: italic; line-height: 1.8; color: #3d2f23; }
.pe-road-print { max-width: 250px; margin: 2rem 0 0; rotate: -2.5deg; }
.pe-road-print img { display: block; width: 100%; height: auto; box-shadow: 0 0 0 9px #f4efe6, 0 20px 40px rgba(50, 30, 12, .35); filter: sepia(.15); }
.pe-sheet {
  position: relative; rotate: var(--tilt, 0deg); scroll-margin-top: 90px;
  padding: 2.3rem 2rem 1.6rem;
  background: #fbf8f0;
  box-shadow: 0 1px 0 #e6dccb, 0 18px 34px rgba(50, 30, 12, .28);
  font-family: "Courier Prime", "Courier New", monospace; font-size: 13.5px; line-height: 1.7; color: #2b2118;
}
.pe-sheet::before {                             /* tape */
  content: ""; position: absolute; top: -12px; left: 50%; width: 96px; height: 26px; translate: -50% 0; rotate: 2deg;
  background: linear-gradient(180deg, rgba(246, 240, 226, .78), rgba(230, 222, 204, .66));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.pe-sheet h3 { margin: 0 0 1.2rem; font-family: "Courier Prime", "Courier New", monospace; font-size: 1.05rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- the woman in the window ---------- */
.pe-window { background-color: #eceae4; scroll-margin-top: 60px; }
.pe-window-inner {
  display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr);
  align-items: center; gap: clamp(2.5rem, 6vw, 5.5rem); max-width: 1140px; margin: auto;
}
.pe-glass { position: relative; margin: 0; overflow: hidden; box-shadow: 0 0 0 10px #f7f5f0, 0 26px 50px rgba(40, 36, 30, .28); }
.pe-glass img { display: block; width: 100%; height: auto; }
.pe-glass::after {                              /* the shine on the glass, which drifts as you look */
  content: ""; position: absolute; inset: -20%; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .24) 46%, rgba(255, 255, 255, .06) 52%, transparent 60%);
  transform: translateX(-14%); transition: transform 1.8s ease;
}
.pe-glass:hover::after { transform: translateX(14%); }
.pe-window .eyebrow { color: var(--primary); font-family: "Courier Prime", "Courier New", monospace; letter-spacing: .12em; }
.pe-window h2 { margin: .5rem 0 1.4rem; font-size: clamp(2rem, 3.6vw, 3rem); font-style: italic; font-weight: 400; line-height: 1.1; }
.pe-window .pe-verse { columns: 2 17rem; column-gap: 2.6rem; font-family: var(--font-serif); font-size: 15px; line-height: 1.72; color: #3a2f28; }

/* ---------- the quiet turning points: a book ---------- */
.pe-series {
  --gold: oklch(76% .09 80);
  --leaf: #fbf7ee;
  position: relative; isolation: isolate; overflow: hidden; scroll-margin-top: 60px;
  padding: clamp(4.5rem, 8vw, 6.5rem) 1.5rem clamp(5rem, 9vw, 7rem);
  color: var(--primary-foreground);
  background:
    radial-gradient(70% 55% at 50% 0%, color-mix(in oklab, var(--primary) 80%, transparent), transparent 72%),
    linear-gradient(180deg, #34101a 0%, #1f080d 100%);
}
.pe-series-head { max-width: 780px; margin: 0 auto clamp(3rem, 5vw, 4.2rem); text-align: center; }
.pe-series .eyebrow { color: var(--gold); }
.pe-series-head h2 { margin: .6rem 0 1.2rem; font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-style: italic; font-weight: 400; }
.pe-series-intro { margin: 0; font-family: var(--font-serif); font-size: 1.04rem; line-height: 1.85; color: color-mix(in oklab, var(--primary-foreground) 82%, transparent); }
.pe-book { max-width: 1240px; margin: 0 auto; outline: none; }
.pe-plate { margin: 0; }
.pe-plate img { display: block; max-width: 100%; height: auto; box-shadow: 0 0 0 1px rgba(60, 38, 18, .22), 0 10px 22px rgba(60, 38, 18, .22); }
.pe-page-no { margin: 0; text-align: center; font-family: "Courier Prime", "Courier New", monospace; font-size: 12px; letter-spacing: .2em; color: #8a7a6c; }
.pe-text h3 { margin: .5rem 0 1.3rem; text-align: center; font-family: var(--font-serif); font-size: clamp(1.35rem, 2vw, 1.75rem); font-style: italic; font-weight: 400; line-height: 1.2; color: var(--primary); }
.pe-stanzas { font-family: var(--font-serif); font-size: 14.5px; line-height: 1.62; color: #2e2622; }

/* the plain list: phones, and anyone without the script */
.pe-book:not(.is-book) .pe-poem {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: 2.4rem;
  margin: 0 0 2rem; padding: clamp(1.6rem, 4vw, 2.8rem);
  background: var(--leaf) url("../img/cast-paper.jpg") center / cover; background-blend-mode: multiply;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .35);
}
.pe-book:not(.is-book) .pe-stanzas { columns: 2 12rem; column-gap: 2rem; }

/* the book: two pages, and leaves that swing about the spine */
.pe-stage {
  --ph: clamp(560px, 43vw, 680px);
  position: relative; height: var(--ph); perspective: 2600px;
}
.pe-stage::before {                             /* the book's shadow on the table */
  content: ""; position: absolute; left: 2%; right: 2%; bottom: -30px; height: 50px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .55), transparent 72%);
}
.pe-left, .pe-leaf { position: absolute; top: 0; width: 50%; height: 100%; }
.pe-left, .pe-face { background: var(--leaf) url("../img/cast-paper.jpg") center / cover; background-blend-mode: multiply; }
.pe-left { left: 0; overflow: hidden; border-radius: 4px 0 0 4px; box-shadow: inset -34px 0 40px -30px rgba(60, 38, 18, .38), -3px 0 0 #e9e0cf, -6px 0 0 #ddd2bd; }
.pe-leaf {
  left: 50%; transform-style: preserve-3d; transform-origin: 0 50%;
  transition: transform 1.2s cubic-bezier(.45, .05, .22, 1); cursor: pointer;
}
.pe-leaf.turned { transform: rotateY(-180deg); }
.pe-face { position: absolute; inset: 0; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.pe-front { border-radius: 0 4px 4px 0; box-shadow: inset 34px 0 40px -30px rgba(60, 38, 18, .38), 3px 0 0 #e9e0cf, 6px 0 0 #ddd2bd; }
.pe-back { transform: rotateY(180deg); border-radius: 4px 0 0 4px; box-shadow: inset -34px 0 40px -30px rgba(60, 38, 18, .38); }
.is-book .pe-plate { --pp: clamp(2.2rem, 3.6vw, 3.2rem); position: relative; height: 100%; }
.is-book .pe-plate img {                       /* the picture fits its page both ways, centred, with a margin all round */
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: auto; height: auto; max-width: calc(100% - 2 * var(--pp)); max-height: calc(100% - 2 * var(--pp));
}
.is-book .pe-text { height: 100%; box-sizing: border-box; overflow: hidden; padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1.6rem, 2.4vw, 2.4rem); }
.is-book .pe-stanzas { columns: 2; column-gap: 1.8rem; font-size: 14px; }
.is-book .pe-tight .pe-stanzas { font-size: 13.2px; line-height: 1.5; }
.pe-book-nav { position: relative; z-index: 5; display: flex; justify-content: center; align-items: center; gap: 1.4rem; margin-top: 3rem; }
.pe-book-nav button {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--gold) 55%, transparent); background: transparent; color: var(--primary-foreground);
  cursor: pointer; transition: background .25s, opacity .25s;
}
.pe-book-nav button:hover:not(:disabled) { background: color-mix(in oklab, var(--gold) 18%, transparent); }
.pe-book-nav button:disabled { opacity: .3; cursor: default; }
.pe-prev svg { rotate: 180deg; }
.pe-count { min-width: 4ch; text-align: center; font-family: "Courier Prime", "Courier New", monospace; font-size: 13px; letter-spacing: .12em; color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .pe-leaf { transition: none; } }

@media (max-width: 900px) {
  .pe-hero-inner, .pe-window-inner { grid-template-columns: minmax(0, 1fr); }
  .pe-road-inner { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .pe-road-print { margin-inline: auto; }
  .pe-book:not(.is-book) .pe-poem { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
}
@media (max-width: 560px) {
  .pe-season .pe-verse, .pe-window .pe-verse, .pe-book:not(.is-book) .pe-stanzas { columns: 1; }
}

/* ============================================================
   Gallery: a Victorian picture gallery. Deep wine walls under a gold
   picture rail, one wall per book with a brass nameplate (the Books
   page's) and a picture light, each painting in a gilded frame and cream
   mat at its own proportions, and a closer look in a lightbox.
   ============================================================ */
.gl-gallery {
  --gold: oklch(76% .09 80);
  --wall: #3a0f18;
  position: relative; isolation: isolate;
  color: var(--primary-foreground);
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 7px),   /* the faint weave of silk wallcovering */
    radial-gradient(90% 40% at 50% 0%, rgba(140, 30, 48, .5), transparent 70%),
    linear-gradient(180deg, #43121c 0%, #2c0b12 55%, #22080e 100%);
}
.gl-hero { padding: clamp(4rem, 7vw, 5.5rem) 1.5rem clamp(2.5rem, 4vw, 3.5rem); text-align: center; }
.gl-hero .eyebrow { color: var(--gold); }
.gl-hero h1 { margin: .6rem 0 .8rem; font-size: clamp(2.8rem, 6.4vw, 5.2rem); line-height: 1.02; }
.gl-lede { margin: 0; font-family: var(--font-serif); font-size: clamp(1.02rem, 1.4vw, 1.2rem); font-style: italic; color: color-mix(in oklab, var(--primary-foreground) 82%, transparent); }
.gl-jump {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.8rem;
  max-width: 980px; margin: 2rem auto 0; padding: .9rem 1rem;
  border-block: 1px solid color-mix(in oklab, var(--gold) 38%, transparent);
  font-family: var(--font-serif); font-size: 14.5px; font-style: italic;
}
.gl-jump a { padding: .3rem .2rem; transition: color .25s; }
.gl-jump a:hover { color: var(--gold); }

/* one wall per book: a gold picture rail above, a picture light over the paintings */
.gl-wall { position: relative; max-width: 1560px; margin: 0 auto; padding: clamp(3.5rem, 6vw, 4.8rem) 1.5rem clamp(3rem, 5vw, 4rem); scroll-margin-top: 70px; }
.gl-wall::before {                              /* the picture rail */
  content: ""; position: absolute; top: 0; left: 1.5rem; right: 1.5rem; height: 6px;
  background: linear-gradient(180deg, #f0d894 0%, #b8903f 45%, #7d5a22 100%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .45);
}
.gl-wall::after {                               /* the picture light's glow */
  content: ""; position: absolute; z-index: -1; left: 10%; right: 10%; top: 2rem; height: 70%;
  background: radial-gradient(50% 55% at 50% 22%, rgba(255, 212, 150, .13), transparent 72%);
  pointer-events: none;
}
.gl-wall .lib-plate { margin-bottom: 2.6rem; }
.gl-hang {
  --fh: clamp(170px, 13.5vw, 240px);           /* every painting hangs to the same height */
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: clamp(1.6rem, 3vw, 2.8rem) clamp(1.4rem, 2.6vw, 2.6rem);
  margin: 0; padding: 0; list-style: none;
}
.gl-hang li { display: flex; flex-direction: column; align-items: center; }
.gl-piece { display: block; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.gl-piece:hover, .gl-piece:focus-visible { transform: translateY(-5px); }
.gl-piece:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.gl-frame {                                     /* gilded moulding */
  display: block; padding: 11px;
  background: linear-gradient(135deg, #f4dc96 0%, #b98f3e 22%, #f0d488 42%, #9a7131 62%, #e6c67c 82%, #a87e36 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 246, 214, .55), inset 0 0 0 4px rgba(90, 58, 14, .35), inset 0 0 0 5px rgba(255, 240, 200, .35),
    0 20px 32px rgba(0, 0, 0, .55), 0 3px 6px rgba(0, 0, 0, .4);
}
.gl-mat { display: block; padding: clamp(8px, .9vw, 12px); background: #f2ebdb; box-shadow: inset 0 2px 7px rgba(60, 38, 18, .45); }
.gl-mat img { display: block; height: var(--fh); width: calc(var(--fh) * var(--ar)); object-fit: cover; }
.gl-label {                                     /* wraps to its own frame's width */
  max-width: calc(var(--fh) * var(--ar) + 46px); text-align: center; line-height: 1.5;
  margin: 1.1rem 0 0; font-family: "Courier Prime", "Courier New", monospace; font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}

/* a closer look */
.gl-light {
  width: min(94vw, 1100px); max-width: none; max-height: 96vh; margin: auto; padding: 0; border: 0; overflow: visible;
  background: transparent; color: var(--primary-foreground);
}
.gl-light::backdrop { background: rgba(14, 4, 7, .88); backdrop-filter: blur(4px); }
.gl-light figure { margin: 0; display: flex; flex-direction: column; align-items: center; }
.gl-light-img {
  display: block; max-width: 100%; max-height: 82vh; width: auto; height: auto;
  box-shadow: 0 0 0 10px #f2ebdb, 0 0 0 22px #b98f3e, 0 30px 70px rgba(0, 0, 0, .7);
  opacity: 0; transform: scale(.985); transition: opacity .35s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
}
.gl-light-img.is-in { opacity: 1; transform: none; }
.gl-light figcaption {
  display: flex; gap: 1.2rem; align-items: baseline; margin-top: 2.2rem;
  font-family: var(--font-serif); font-size: 1.1rem; font-style: italic;
}
.gl-num { font-family: "Courier Prime", "Courier New", monospace; font-size: 12px; font-style: normal; letter-spacing: .14em; color: var(--gold); }
.gl-light button {
  position: fixed; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--gold) 55%, transparent); background: rgba(20, 6, 10, .55);
  color: var(--primary-foreground); cursor: pointer; transition: background .25s;
}
.gl-light button:hover { background: color-mix(in oklab, var(--gold) 22%, rgba(20, 6, 10, .6)); }
.gl-prev { left: 2vw; top: 50%; translate: 0 -50%; }
.gl-prev svg { rotate: 180deg; }
.gl-next { right: 2vw; top: 50%; translate: 0 -50%; }
.gl-close { top: 2vh; right: 2vw; font-size: 26px; line-height: 1; }
@media (prefers-reduced-motion: reduce) { .gl-light-img { transition: none; } .gl-piece { transition: none; } }

@media (max-width: 700px) {
  .gl-wall { padding-inline: 1rem; }
  .gl-wall::before { left: 1rem; right: 1rem; }
  .gl-hang { --fh: 126px; gap: 1.3rem .9rem; }
  .gl-frame { padding: 7px; }
  .gl-mat { padding: 6px; }
  .gl-label { max-width: calc(var(--fh) * var(--ar) + 26px); font-size: 10px; letter-spacing: .1em; }
  .gl-prev, .gl-next { top: auto; bottom: 3vh; translate: none; }
}

/* ============================================================
   Services: an editor's desk. The service on paper beside a sunlit
   notebook, the packages as real manuscripts that grow with the job
   (loose sheets, a clipped stack, a novel in a binder clip) with their
   prices stamped in red, and writers' reviews on wine.
   ============================================================ */
.sv-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(3.5rem, 6vw, 5rem) 1.5rem clamp(4rem, 7vw, 5.5rem);
  background: #e6dfd2 url("../img/cast-paper.jpg") center / cover;
  background-blend-mode: multiply;
  color: #2a221e;
}
.sv-hero-inner {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center; gap: clamp(2.5rem, 6vw, 6rem); max-width: 1140px; margin: auto;
}
.sv-hero .eyebrow { color: var(--primary); }
.sv-hero h1 { margin: .7rem 0 1.4rem; font-size: clamp(2.5rem, 5vw, 4.2rem); line-height: 1.06; }
.sv-lede { max-width: 56ch; margin: 0; font-family: var(--font-serif); font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.8; color: #45382f; }
.sv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2rem; }
.sv-desk { margin: 0; rotate: 2deg; }
.sv-desk img, .sv-desk video { display: block; width: 100%; height: auto; box-shadow: 0 0 0 10px #f6f0e6, 0 26px 50px rgba(60, 38, 18, .3); }

/* ---------- the packages, on a walnut desk ---------- */
.sv-packs {
  --gold: oklch(76% .09 80);
  position: relative; isolation: isolate; overflow: hidden; scroll-margin-top: 70px;
  padding: clamp(3.5rem, 6vw, 5rem) 1.5rem clamp(1.6rem, 2.4vw, 2.2rem);
  color: var(--primary-foreground);
  background:
    repeating-linear-gradient(94deg, rgba(0, 0, 0, .06) 0 3px, transparent 3px 11px, rgba(255, 220, 170, .025) 11px 13px, transparent 13px 29px),   /* grain of the wood */
    radial-gradient(70% 55% at 50% 0%, rgba(214, 160, 100, .14), transparent 72%),
    linear-gradient(180deg, #3d2a1f 0%, #2a1c15 100%);
}
.sv-packs-head { max-width: 980px; margin: 0 auto clamp(1.8rem, 3vw, 2.4rem); text-align: center; }
.sv-packs-head h2 { margin: 0 0 1.4rem; font-size: clamp(2.2rem, 4.2vw, 3.4rem); }
.sv-approach { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 3rem; text-align: left; }
.sv-approach p { margin: 0; line-height: 1.8; color: color-mix(in oklab, var(--primary-foreground) 80%, transparent); }
/* her photograph of three clipped sheets; each package is written on one of them.
   The sheets' places are measured from the picture, and the type is sized from the
   photo's own width (cqw), so the words stay on the paper at any size. */
.sv-board { position: relative; max-width: 1700px; margin: 0 auto; container-type: inline-size; }
.sv-board-img { display: block; width: 100%; height: auto; box-shadow: 0 26px 60px rgba(0, 0, 0, .5); }
.sv-pack {
  position: absolute; top: 15.03%; width: 19.5%; height: 67.32%; left: var(--x);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 2.4cqw 1.5cqw 1.4cqw;
  box-sizing: border-box; color: #2b241d;
}
.sv-pack h3 { margin: 0 0 .5cqw; font-family: var(--font-serif); font-size: 1.35cqw; font-weight: 400; line-height: 1.15; }
.sv-for {
  margin: 0 0 1.1cqw; font-family: "Courier Prime", "Courier New", monospace; font-size: .74cqw;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.45; color: #7a6449;
}
.sv-pack ul { list-style: none; margin: 0; padding: 0; width: 100%; }
.sv-pack li { padding: .58cqw 0; border-top: 1px solid rgba(70, 52, 34, .22); font-size: .84cqw; line-height: 1.45; }
.sv-pack li:last-child { border-bottom: 1px solid rgba(70, 52, 34, .22); }
.sv-stamp {                                     /* the price, stamped in red ink */
  margin: 1.1cqw 0 0; rotate: -7deg;
  padding: .25cqw .8cqw; border: .18cqw solid rgba(160, 32, 48, .8); border-radius: 3px;
  font-family: "Courier Prime", "Courier New", monospace; font-size: 1.3cqw; font-weight: 700; letter-spacing: .04em;
  color: rgba(160, 32, 48, .88);
  -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 60%, rgba(0, 0, 0, .72) 76%, #000 92%);
          mask-image: radial-gradient(circle at 30% 40%, #000 60%, rgba(0, 0, 0, .72) 76%, #000 92%);
}
.sv-inquire {                                   /* the same button as the one at the top, sized from the photo */
  display: inline-flex; align-items: center; gap: .45cqw; margin-top: auto;
  padding: .7cqw 1.5cqw; border-radius: 999px;
  background: var(--foreground); color: var(--primary-foreground);
  font-size: .72cqw; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  transition: background .25s, transform .25s;
}
.sv-inquire:hover { background: var(--primary); color: var(--primary-foreground); transform: translateY(-2px); }
.sv-custom { margin: clamp(1.1rem, 2vw, 1.6rem) 0 0; text-align: center; font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; color: var(--gold); }

/* ---------- reviews, on wine ---------- */
.sv-reviews {
  --gold: oklch(76% .09 80);
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(4.5rem, 8vw, 6.5rem) 1.5rem;
  text-align: center; color: var(--primary-foreground);
  background:
    radial-gradient(70% 55% at 50% 0%, color-mix(in oklab, var(--primary) 80%, transparent), transparent 72%),
    linear-gradient(180deg, #34101a 0%, #1f080d 100%);
}
.sv-reviews > .eyebrow { color: var(--gold); margin-bottom: clamp(2.4rem, 4vw, 3.2rem); }
.sv-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); max-width: 1180px; margin: 0 auto; text-align: left; }
.sv-quote { margin: 0; padding-top: 1.4rem; border-top: 1px solid color-mix(in oklab, var(--gold) 45%, transparent); }
.sv-quote > svg { color: var(--gold); opacity: .8; }
.sv-stars { margin: .6rem 0 0; letter-spacing: .22em; color: var(--gold); font-size: 14px; }
.sv-quote blockquote { margin: 1rem 0 1.4rem; }
.sv-quote blockquote p { margin: 0; font-family: var(--font-serif); font-size: 1.02rem; line-height: 1.8; color: color-mix(in oklab, var(--primary-foreground) 88%, transparent); }
.sv-quote figcaption { display: flex; flex-direction: column; gap: .25rem; }
.sv-quote figcaption b { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 400; }
.sv-quote figcaption span { font-family: "Courier Prime", "Courier New", monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.sv-contact { max-width: 900px; margin: clamp(3.5rem, 6vw, 5rem) auto 0; padding-top: clamp(2.4rem, 4vw, 3rem); border-top: 1px solid color-mix(in oklab, var(--gold) 30%, transparent); }
.sv-contact > p { margin: 0 0 1.4rem; font-family: var(--font-serif); font-size: clamp(1.2rem, 2vw, 1.5rem); font-style: italic; }
.sv-contact-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 2rem; }
.sv-contact-links .pill { text-transform: none; letter-spacing: .04em; font-size: 13px; }
.sv-fiverr {
  display: inline-flex; align-items: center; gap: .5rem; padding-bottom: 2px;
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  border-bottom: 1px solid color-mix(in oklab, var(--gold) 60%, transparent); transition: color .25s;
}
.sv-fiverr:hover { color: var(--gold); }

@media (max-width: 900px) {
  .sv-hero-inner, .sv-approach, .sv-quotes { grid-template-columns: minmax(0, 1fr); }
  .sv-desk { max-width: 480px; margin: 0 auto; }
  .sv-board { max-width: 460px; }
  .sv-board-img { display: none; }
  .sv-pack {
    position: static; width: auto; height: auto; margin: 0 0 2.6rem; padding: 2.4rem 1.6rem 1.8rem;
    background: #f7f3ea; box-shadow: 0 1px 0 #e6dfd0, 0 18px 34px rgba(0, 0, 0, .4);
  }
  .sv-pack::before {                            /* a paperclip over the top edge, as in the photograph */
    content: ""; position: absolute; top: -14px; left: 24px; width: 14px; height: 44px;
    border: 2.5px solid #c9cdd3; border-radius: 8px; border-bottom-color: #9ea4ad;
    box-shadow: 1px 2px 2px rgba(0, 0, 0, .3);
  }
  .sv-pack h3 { font-size: 1.45rem; margin-bottom: .3rem; }
  .sv-for { font-size: 11.5px; margin-bottom: 1.2rem; }
  .sv-pack li { padding: .55rem 0; font-size: 14.5px; }
  .sv-stamp { margin-top: 1.4rem; padding: .25rem .8rem; border-width: 2.5px; font-size: 1.35rem; }
  .sv-inquire { margin-top: 1.4rem; gap: .5rem; padding: .95rem 1.7rem; min-height: 44px; font-size: 11px; }
}

/* ============================================================
   Contact: her writing paper, with a form that reaches the desk
   ============================================================ */
.ct-page {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(2.6rem, 5vw, 4.6rem) clamp(1.2rem, 4vw, 3rem) clamp(2.6rem, 4vw, 4rem);
}
.ct-copy h1 { font-size: clamp(2rem, 3.8vw, 3.1rem); line-height: 1.1; margin-bottom: 1rem; }
.ct-copy h1 em { font-style: italic; color: var(--primary); }
.ct-lede { color: var(--muted-foreground); max-width: 40ch; margin-bottom: 1.5rem; }
.ct-photo { max-width: 300px; margin: 0 0 1.2rem; }
.ct-photo img {
  width: 100%;
  border-radius: 2px;
  rotate: -1.4deg;
  box-shadow: 0 2px 4px rgba(60, 30, 30, .12), 0 22px 44px -26px rgba(60, 30, 30, .5);
}
.ct-alt { font-size: 14.5px; color: var(--muted-foreground); }

.ct-form {
  position: relative;
  overflow: hidden;
  background: #fdfaf3;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: clamp(1.4rem, 3vw, 2.3rem);
  box-shadow: 0 1px 2px rgba(60, 30, 30, .07), 0 20px 44px -26px rgba(60, 30, 30, .45);
}
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.ct-field { position: relative; margin: 0 0 1rem; }
.ct-field label {
  display: block;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: .35rem;
}
.ct-field label i { font-style: normal; font-weight: 400; letter-spacing: .02em; text-transform: none; }
.ct-field input,
.ct-field select,
.ct-field textarea {
  width: 100%;
  padding: .7rem .85rem;
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--border);
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--foreground);
}
.ct-field textarea { min-height: 150px; line-height: 1.6; resize: vertical; }
.ct-field input:focus-visible,
.ct-field select:focus-visible,
.ct-field textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.ct-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ct-send { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem; }
.ct-note, .pc-note { margin: 0; font-size: 14px; color: var(--muted-foreground); }
.pc-note { margin-top: .6rem; }
.ct-form .z-grain { opacity: .5; }

@media (max-width: 900px) {
  .ct-page { grid-template-columns: 1fr; gap: 1.8rem; }
  .ct-row { grid-template-columns: 1fr; }
  .ct-photo { max-width: 240px; }
  .ct-field label { font-size: 11px; }
}

/* ============================================================
   Phones: text links get a thumb-sized tap target, and the smallest
   labels come up a point, so nothing is a squint or a near miss.
   ============================================================ */
@media (max-width: 900px) {
  .text-link,
  .wc-link,
  .sv-fiverr,
  .jr-back,
  .bk-listen,
  .lib-jump a,
  .gl-jump a,
  .jr-years a,
  .pe-contents li a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .pe-contents li a { display: flex; }
  .eyebrow, .lib-note, .jr-date, .jr-read, .bk-cap span, .sv-for, .gl-label, .pp-eyebrow { font-size: 11px; }
  .pill, .ah-head .pill { font-size: 11px; }
  .ah-head .pill { padding: 1.05rem 1.6rem; }   /* the homepage's own rule is more specific, so match it */
  .label, .ah-eyebrow, .nb-more i, .coast-facts span, .pe-contents .pe-group { font-size: 11px; }
  .lib-plate span { font-size: 11.5px; }
  .up-card {                                    /* taller rows for thumbs, ruled to match */
    padding: 56px 1.6rem 14px 3.2rem;
    background:
      linear-gradient(180deg, rgba(200, 60, 70, .45) 0 2px, transparent 2px) 0 42px / 100% 44px no-repeat,
      repeating-linear-gradient(180deg, transparent 0 43px, rgba(80, 120, 160, .24) 43px 44px) 0 61px / 100% 132px no-repeat,
      linear-gradient(90deg, rgba(200, 60, 70, .38) 0 1px, transparent 1px) 2.3rem 0 / 1px 100% no-repeat,
      #fcfaf4;
  }
  .up-card li a { height: 44px; line-height: 44px; }
}

/* ============================================================
   Intro preloader (home page only)
   A sheet in a typewriter. The paper stays put and the machine travels
   left-to-right beneath it, one character at a time, the way the carriage
   really moves. Type bar swings up and strikes on every letter.
   ============================================================ */
html.pl-lock, html.pl-lock body { overflow: hidden; }

#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: #e8e8dd;
  opacity: 1;
  transition: opacity .48s ease;
}
#preloader.pl-out { opacity: 0; pointer-events: none; }

/* ---------- the sheet ---------- */
.pl-paper {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 92% at 50% 12%,
    #eeeee4 0%, #e9e9de 38%, #e0e0d4 70%, #d3d3c6 92%, #c6c6b8 100%);
}
.pl-grain, .pl-fibers {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
.pl-grain  { mix-blend-mode: multiply; opacity: .22; }
.pl-fibers { mix-blend-mode: multiply; opacity: .10; }
.pl-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(86% 70% at 50% 34%, transparent 48%, rgba(70, 72, 62, .20) 100%);
}

/* ---------- the typed line ---------- */
.pl-line {
  position: absolute;
  left: 0; right: 0;
  top: 33%;
  text-align: center;
  will-change: transform;
}
.pl-line.strike { animation: plJolt .08s ease-out; }
@keyframes plJolt {
  0%   { transform: translate3d(0, 0, 0); }
  40%  { transform: translate3d(0, -1.1px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
.pl-text {
  display: inline-block;
  white-space: pre;
  font-family: "Special Elite", "Courier New", Courier, monospace;
  font-size: clamp(.95rem, 4.3vw, 3.1rem);
  letter-spacing: .17em;
  color: #55564e;
}
.pl-text i {
  font-style: normal;
  display: inline-block;
  opacity: 0;
  text-shadow: 0 0 1.1px rgba(70, 71, 64, .5);
}

/* ---------- the machine ---------- */
/* Wider than the screen so it can travel without exposing an edge.
   Bands are sized off the machine; the centre furniture is sized off the
   viewport, or it would be dwarfed by the extra width. */
.pl-machine {
  position: absolute;
  bottom: 0;
  left: -60%;
  width: 220%;
  height: 54%;
  will-change: transform;
  transition: transform .06s linear;
}
.pl-machine > * { position: absolute; }

/* full-width bands */
.pl-ruler, .pl-card, .pl-comb, .pl-ribbon, .pl-segment, .pl-body { left: 0; right: 0; }

.pl-ruler {
  top: 0; height: 8%;
  background:
    repeating-linear-gradient(90deg, rgba(44,45,41,.8) 0 1.5px, transparent 1.5px 24px),
    repeating-linear-gradient(90deg, rgba(38,39,35,.9) 0 2px, transparent 2px 120px),
    linear-gradient(180deg, #dcddd6 0%, #c3c4bc 34%, #a6a79f 74%, #8d8e86 100%);
  background-size: 24px 40%, 120px 62%, 100% 100%;
  background-position: 0 58%, 0 62%, 0 0;
  background-repeat: repeat-x, repeat-x, no-repeat;
  box-shadow: 0 4px 9px rgba(40, 42, 34, .34), inset 0 1px 0 rgba(255,255,255,.55);
  z-index: 5;
}

.pl-card {
  top: 9%; height: 17%;
  background: linear-gradient(180deg, rgba(214,215,208,.85) 0%, rgba(168,170,161,.8) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 3px 8px rgba(28,30,24,.3);
  z-index: 3;
}
.pl-card.l { right: 54%; border-radius: 0 14px 3px 0; }
.pl-card.r { left: 54%;  border-radius: 14px 0 0 3px; }
.pl-comb {
  top: 22.5%; height: 4.5%;
  background: repeating-linear-gradient(90deg, #24251f 0 2.5px, transparent 2.5px 14px);
  opacity: .75;
  z-index: 4;
}

.pl-ribbon {
  top: 26.5%; height: 12%;
  background: linear-gradient(180deg, #35363a 0%, #17181b 40%, #0d0e10 100%);
  box-shadow: 0 6px 13px rgba(0,0,0,.55), inset 0 1px 0 rgba(160,162,155,.16);
  will-change: transform;
  z-index: 4;
}
.pl-ribbon.lift { animation: plRibbon .12s ease-out; }
@keyframes plRibbon {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-9%); }
  100% { transform: translateY(0); }
}

/* the segment fan the type bars sit in */
.pl-segment {
  top: 38%; bottom: 0;
  background:
    radial-gradient(120% 150% at 50% 118%, rgba(96,98,92,.20) 0%, transparent 58%),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.62) 0 3px, rgba(140,142,134,.07) 3px 4px, transparent 4px 15px),
    linear-gradient(180deg, #232429 0%, #141518 46%, #0a0b0d 100%);
  z-index: 2;
}
.pl-body {
  top: 74%; bottom: 0;
  background: linear-gradient(180deg, rgba(14,15,17,.55) 0%, #0a0b0c 45%, #050506 100%);
  z-index: 2;
}

/* the type bar, hidden at rest in the fan, swings up and strikes */
.pl-bar {
  left: 50%; bottom: 30%;
  width: 9px; height: 81.5%;      /* tip lands on the glyph being struck */
  margin-left: -4.5px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #5a5b54 0%, #3a3b35 42%, #1c1d19 100%);
  transform-origin: 50% 100%;
  transform: rotate(-74deg);
  opacity: 0;
  z-index: 6;
}
.pl-bar::before {              /* the type slug at the tip */
  content: "";
  position: absolute;
  top: -8px; left: -6px;
  width: 21px; height: 28px;
  border-radius: 4px;
  background: linear-gradient(180deg, #4c4d46, #24251f);
}
.pl-bar.hit { animation: plBar .12s cubic-bezier(.32,.86,.4,1); }
@keyframes plBar {
  0%   { transform: rotate(-74deg); opacity: 0; }
  12%  { opacity: 1; }
  40%  { transform: rotate(1.5deg);  opacity: 1; }
  56%  { transform: rotate(-7deg);   opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: rotate(-74deg);  opacity: 0; }
}

/* chrome plate across the printing point */
.pl-plate {
  left: 50%; top: 46%;
  width: min(50vw, 600px); height: 20%;
  transform: translateX(-50%);
  border-radius: 46% 46% 6px 6px / 52% 52% 6px 6px;
  background: linear-gradient(180deg, #e4e5e1 0%, #b0b1ab 26%, #7c7d76 66%, #4f504a 100%);
  box-shadow: 0 5px 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6);
  z-index: 7;
}
.pl-screw {
  position: absolute; top: 52%;
  width: 6.5%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #c3b083, #6d5f3d 72%, #4b4029);
  box-shadow: inset 0 -1px 2px rgba(0,0,0,.45);
}
.pl-screw.a { left: 26%; }
.pl-screw.b { right: 26%; }
.pl-screw::after {
  content: ""; position: absolute; inset: 42% 12%;
  border-radius: 2px; background: rgba(48,40,24,.85);
}

/* ribbon-vibrator bracket with its round window */
.pl-guide {
  left: 50%; top: 18%;
  width: min(11vw, 132px); height: auto;
  transform: translateX(-50%);
  z-index: 8;
}

/* ---------- skip ---------- */
.pl-skip {
  position: absolute; right: 1.5rem; bottom: 1.25rem; z-index: 3;
  border: 0; background: none;
  color: rgba(230, 232, 220, .5);
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  padding: .5rem .75rem;
  transition: color .25s;
}
.pl-skip:hover { color: rgba(245, 246, 238, .95); }

@media (max-width: 700px) {
  .pl-line { top: 38%; }
  .pl-machine { height: 46%; left: -100%; width: 300%; }
  .pl-text { letter-spacing: .12em; }
  .pl-bar { height: 98%; }       /* the reach differs at this machine height */
}

@media (prefers-reduced-motion: reduce) {
  #preloader { display: none; }
}