/* ============================================================
   site.css — shared styles for sabinaboyer.com
   Single source of truth for design tokens, typography, nav,
   sections, home-page modules (hero, work grid, accolades),
   and footer. Link from every page with:
     <link rel="stylesheet" href="/assets/site.css" />
   ============================================================ */

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
main { display: block; }
main:focus { outline: none; }

/* ---------- Accessibility: skip to content ----------
   Hidden until a keyboard user focuses it. Lets them bypass
   the nav and jump straight into the main content.
*/
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--accent);
  color: var(--paper);
  padding: 10px 18px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 0 0 6px 0;
}
.skip-link:focus {
  left: 0;
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

/* ---------- Focus styles for keyboard users ----------
   Only show focus rings when navigating by keyboard (:focus-visible),
   not when clicking with a mouse. Consistent brass outline makes it
   obvious where focus currently sits.
*/
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 2px;
}

:root {
  /* ---------- Core palette ----------
     Warm cream paper + warm ink, with a cool navy primary and
     a warm brass secondary. The warmth of cream/ink/brass gives
     the site a book-jacket feel; navy anchors it.
  */
  --bg:              #F4F2EC;   /* page — warm cream */
  --bg-alt:          #EAE7DE;   /* slightly darker cream (card wells) */
  --paper:           #FAF8F2;   /* lightest cream (on-navy text in logo) */
  --ink:             #1A1815;   /* near-black with warm undertone */
  --ink-muted:       #5D5851;   /* body meta / secondary text */
  --ink-soft:        #8C8780;   /* tertiary / captions */
  --rule:            #DCD7CC;   /* hairline rules on cream */
  --accent:          #1F2D44;   /* primary — deep navy */
  --accent-hover:    #2F4266;
  --accent-2:        #B5824A;   /* secondary — warm brass */
  --accent-2-hover:  #9C6E3C;

  /* ---------- Footer palette (tokens for on-navy surface) ----------
     Every footer-surface color lives here so the footer stays
     consistent and is easy to re-tune in one place.
  */
  --footer-bg:          var(--accent);
  --footer-heading:     #F0EEE8;            /* brand name, hover states */
  --footer-text:        #D6D4CB;            /* primary links, email/phone */
  --footer-text-dim:    #C7C4BC;            /* secondary link column text */
  --footer-meta:        #A8A69E;            /* legal / copyright (tuned for 11px uppercase on navy) */
  --footer-rule:        rgba(227,226,221,0.18);
  --footer-rule-soft:   rgba(227,226,221,0.15);
  --footer-icon-bg:     rgba(255,255,255,0.08);
  --footer-icon-bg-hov: rgba(255,255,255,0.18);

  /* ---------- Layout ---------- */
  --max: 1440px;
  --gutter: clamp(20px, 4vw, 56px);

  /* ---------- Typography — 3 faces for variety ---------- */
  --serif: "Newsreader", "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(244, 242, 236, 0.88);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--ink);
}
.nav-logo-mark {
  width: 42px;
  height: 42px;
  background: var(--accent);         /* navy tile */
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(14,16,19,0.04), 0 6px 16px -8px rgba(31,45,68,0.3);
  color: var(--paper);               /* cream S on navy */
  transform: translateY(-2px);       /* optical nudge to align with wordmark */
}
.nav-logo-mark .monogram {
  width: 100%;
  height: 100%;
  display: block;
}
.nav-logo-mark .monogram text {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  fill: currentColor;
}
.nav-logo-text {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.01em;
  line-height: 1;
  font-variation-settings: "opsz" 36;
}

.nav-links {
  display: flex;
  gap: 34px;
  list-style: none;
  margin: 0; padding: 0;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}
.nav-links a { transition: color 0.2s ease; }
.nav-links a:hover { color: var(--accent); }

/* ---------- Hamburger button (hidden on desktop) ---------- */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  padding: 6px;
  margin: -6px;
  line-height: 0;
}

/* ---------- Mobile slide-out menu ---------- */
.nav-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26, 24, 21, 0.35);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.nav-mobile-overlay.open {
  display: block;
  opacity: 1;
}
.nav-mobile {
  position: fixed;
  top: 0; right: 0;
  width: min(320px, 85vw);
  height: 100%;
  background: var(--paper);
  z-index: 100;
  padding: 24px 28px;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}
.nav-mobile.open {
  transform: translateX(0);
}
.nav-mobile-close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  padding: 6px;
  margin: 0 0 24px auto;
  line-height: 0;
}
.nav-mobile-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-mobile-links li {
  border-bottom: 1px solid var(--rule);
}
.nav-mobile-links a {
  display: block;
  padding: 14px 0;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  transition: color 0.2s ease;
}
.nav-mobile-links a:hover { color: var(--accent); }
.nav-mobile-sub a {
  padding-left: 20px;
  font-size: 11px;
  color: var(--ink-muted);
}

@media (max-width: 780px) {
  .nav-links { display: none; }
  .nav-hamburger { display: block; }
}

/* ---------- Generic section ---------- */
.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(64px, 8vw, 120px) var(--gutter);
  border-top: 1px solid var(--rule);
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 64px;
  gap: 24px;
  flex-wrap: wrap;
}
.section-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 500;
}
.section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.022em;
  margin: 12px 0 0;
  line-height: 1;
  color: var(--ink);
  font-variation-settings: "opsz" 60;
}
.section-link {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.section-link:hover { color: var(--accent-2); border-color: var(--accent-2); }
.section-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.section-link { align-self: flex-end; }

/* ============================================================
   HOME PAGE MODULES
   Hero, featured work grid, accolades broadsheet. These used to
   live inline in index.html — consolidated here so every page has
   a single stylesheet and styles can be reused on other pages.
   ============================================================ */

/* ---------- Hero ---------- */
.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(48px, 8vw, 120px) var(--gutter) clamp(64px, 8vw, 110px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
/* Mobile overrides live in the second @media block farther down,
   AFTER the base .hero-title / .hero-tag rules — otherwise the base
   rules win the cascade on same-specificity properties. */

.hero-title {
  font-family: var(--serif);
  font-weight: 400;
  /* Scales faster and has a higher floor so the title doesn't shrink
     into the left column at medium viewports (≈900–1400px), which was
     leaving a pool of whitespace next to the 4:5 portrait. Still caps
     at 156px so ultra-wide looks the same, and the mobile override
     below 680px still takes over. */
  font-size: clamp(80px, 12vw, 156px);
  line-height: 0.93;
  letter-spacing: -0.03em;
  margin: 0 0 32px;
  color: var(--ink);
  font-variation-settings: "opsz" 72;
}
.hero-title .line { display: block; }
.hero-title .accent { color: var(--accent); }

.hero-tag {
  font-family: var(--mono);
  font-size: clamp(18px, 1.7vw, 22px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 500;
  margin: 0 0 44px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  line-height: 1.4;
}
.hero-tag span { display: block; }

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink);
  transition: color 0.2s ease, border-color 0.2s ease, gap 0.2s ease;
}
.hero-cta:hover { color: var(--accent-2); border-color: var(--accent-2); gap: 18px; }
.hero-cta .arrow { font-family: var(--serif); font-size: 20px; line-height: 1; }

/* Portrait wrapper is the positioning context for the offset navy card */
.hero-portrait-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 620px;
  margin: 0 0 0 auto;
}
/* Offset navy card peeking out bottom-left, behind the portrait */
.hero-portrait-wrap::before {
  content: "";
  position: absolute;
  inset: 18px 18px -18px -18px;
  background: var(--accent);
  z-index: 0;
  pointer-events: none;
}
.hero-portrait {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  background: var(--bg-alt);
  overflow: hidden;
  transition: transform 0.4s ease;
}
.hero-portrait-wrap:hover .hero-portrait { transform: translateY(-4px); }
.hero-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.hero-portrait::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 140px rgba(26,24,21,0.10);
  pointer-events: none;
}
/* ---------- Hero mobile overrides (must come after base hero styles) ---------- */
@media (max-width: 680px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 60px;
    padding-bottom: 40px;
    /* Gap from tagline-bottom to photo-top, matched to padding-top
       above so the hero text sits visually "floated" between the
       nav line and the photo with equal breathing room. */
    gap: 60px;
  }
  .hero-text { text-align: center; }
  .hero-title {
    /* Larger, more editorial title on phones so "Sabina Boyer" has
       the weight it deserves relative to the portrait below.
       At ~390px viewport, 14vw ≈ 55px; at 430px, ~60px; capped at
       64px on larger phones so the name never overflows its row. */
    font-size: clamp(46px, 14vw, 64px);
    /* Very tight so the four-word tagline reads as part of the name
       block, not an orphan below it. The tagline's own line-height
       adds the rest of the visual breathing room. */
    margin-bottom: 8px;
  }
  .hero-title .line { display: inline; }
  .hero-tag {
    font-size: 13px;
    letter-spacing: 0.18em;
    margin-bottom: 0;
    /* Plain centered inline text so each row centers on its own
       width — no grid columns forcing items to align under the
       longest word in the column above. A forced line break after
       the second span splits the four roles into two rows, and the
       dot always sits visually between the two words in each row. */
    display: block;
    text-align: center;
    /* Tight line-height so the tagline sits right under the name
       as one unit; the padding-top on .hero and the hero `gap`
       handle the rest of the spacing. */
    line-height: 1.6;
  }
  .hero-tag span { display: inline; }
  /* Dot between the two items in each row (after 1st and 3rd). */
  .hero-tag span:nth-child(odd)::after {
    content: "·";
    margin: 0 12px;
    color: var(--accent-2);
  }
  /* Break the line after the 2nd span so the next pair wraps
     onto its own line and centers independently. */
  .hero-tag span:nth-child(2)::after {
    content: "";
    display: block;
  }
  .hero-cta { display: none; }
  .hero-portrait-wrap {
    margin-right: 0;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- Featured work grid (Portfolio) ---------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
}
@media (max-width: 900px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .work-grid { grid-template-columns: 1fr; } }

.work-card { display: block; position: relative; container-type: inline-size; }

/* Card cover — a tinted paper "plate" with an inset frame.
   Three warm tints (parchment, oat linen, aged kraft) so the
   set reads as three related volumes of the same author's work. */
.work-cover {
  aspect-ratio: 3 / 4;
  background: var(--bg-alt);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(26, 24, 21, 0.08);
  box-shadow: 0 1px 2px rgba(26, 24, 21, 0.04);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.work-card:hover .work-cover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -14px rgba(26, 24, 21, 0.22);
}

/* Inset "book-plate" frame inside the card */
.work-cover-frame {
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(26, 24, 21, 0.16);
  padding: clamp(18px, 3vw, 28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  gap: 12px;
}

/* Top-left "N° 01" numeral in mono brass */
.work-cover-numeral {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 600;
  line-height: 1;
}
.work-cover-numeral .ordinal {
  font-size: 0.7em;
  vertical-align: super;
  letter-spacing: 0;
  margin-left: 1px;
  text-transform: lowercase;
}

/* Centered serif title block */
.work-cover-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.6vw, 16px);
  margin-block: auto;
  padding-block: clamp(8px, 2vw, 20px);
}

.work-cover-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 13cqi, 50px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variation-settings: "opsz" 48;
  margin: 0;
  text-wrap: balance;
}
.work-cover-title--stacked {
  display: flex;
  flex-direction: column;
  gap: 0.02em;
  font-size: clamp(30px, 11cqi, 44px);
  line-height: 1;
}

/* Thin rule under the title */
.work-cover-rule {
  width: clamp(40px, 4vw, 56px);
  height: 1px;
  background: rgba(26, 24, 21, 0.3);
  border: 0;
  margin: 0;
}

.work-cover-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(13px, 1.15vw, 15px);
  line-height: 1.3;
  color: var(--ink-muted);
  margin: 0;
  letter-spacing: 0.005em;
}

/* Bottom mono category list — always one line (even the longest one,
   "Essays · Columns · Reflections"). Slightly tighter tracking and a
   shrink-to-fit fallback keep the row confident on narrow cards. */
.work-cover-tags {
  font-family: var(--mono);
  font-size: clamp(8.5px, 0.85vw, 10px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
}

/* Three card tints — warm family: parchment → oat linen → aged kraft.
   All three share the ink/brass text treatment so the palette stays
   coherent and the trio reads as a set. */
.work-cover.tint-1 { background: #ECE5D0; }  /* parchment */
.work-cover.tint-2 { background: #E6DEC8; }  /* oat linen */
.work-cover.tint-3 { background: #DED1B4; }  /* aged kraft */

.work-desc {
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.6;
  margin: 0;
}

/* ---------- Accolades — Cinema Broadsheet ---------- */
.accolades-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px clamp(32px, 5vw, 64px);
}
@media (max-width: 780px) { .accolades-grid { grid-template-columns: 1fr; } }

.accolade-project { padding: 0; }
.accolade-project-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.accolade-project-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.15;
  color: var(--ink);
}
.accolade-project-type {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 500;
  white-space: nowrap;
}
.accolade-awards {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.accolade-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 6px 0;
  align-items: baseline;
}
.accolade-line {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
}
.accolade-line .label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 600;
  margin-right: 8px;
}
.accolade-year {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ============================================================
   FOOTER (shared component)
   All on-navy surface colors come from the --footer-* tokens
   defined at the top of this file.
   ============================================================ */
.site-footer {
  background: var(--footer-bg);          /* navy — matches logo tile & brand */
  color: var(--footer-text);
  margin-top: clamp(56px, 8vw, 120px);
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) var(--gutter);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 48px clamp(40px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 900px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-inner { grid-template-columns: 1fr; } }

/* Column 1 — brand + contact */
.footer-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  color: var(--footer-heading);
}
.footer-tag {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 28px;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.4;
}
.footer-tag span { display: block; }

.footer-contact-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--footer-rule);
}
.footer-email,
.footer-phone {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--footer-text);
  letter-spacing: 0.01em;
  transition: color 0.2s ease;
}
.footer-email:hover,
.footer-phone:hover { color: var(--footer-heading); }

/* Footer social — subtle pill buttons on navy, lift on hover */
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.footer-social .social-btn {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--footer-icon-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--footer-text);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.footer-social .social-btn:hover {
  background: var(--footer-icon-bg-hov);
  color: #FFFFFF;
  transform: translateY(-2px);
}

/* Columns 2 & 3 — link columns */
.footer-col-title {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin: 0 0 20px;
  color: var(--accent-2);
}
.footer-col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col-list a {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--footer-text-dim);
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}
.footer-col-list a:hover { color: var(--footer-heading); }

/* Legal row — spans all columns */
.footer-legal-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 12px 0 0;
  padding-top: 32px;
  border-top: 1px solid var(--footer-rule-soft);
}
/* Privacy and copyright MUST match: same font, size, color, weight, tracking */
.footer-legal,
.footer-privacy {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--footer-meta);
  margin: 0;
  font-weight: 500;
}
.footer-privacy { transition: color 0.2s ease; }
.footer-privacy:hover { color: var(--footer-heading); }

/* ============================================================
   ABOUT PAGE
   Editorial profile layout — greeting + lede + portrait +
   continued bio + pull quote + Q&A. Re-uses shared tokens and
   the .section-label / .section-title / .section-link system.
   ============================================================ */

/* Reading-width column used for body copy on the about page */
.about-body {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.about-body-inner {
  max-width: 680px;
  margin: 0 auto;
}
.about-body p {
  font-family: var(--serif);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 1.2em;
  font-variation-settings: "opsz" 16;
}
.about-body p:last-child { margin-bottom: 0; }

/* ---------- Intro ---------- */
.about-intro {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 140px) var(--gutter) clamp(32px, 4vw, 56px);
  text-align: center;
}
.about-intro-inner {
  max-width: 720px;
  margin: 0 auto;
}
.about-intro .section-label {
  margin-bottom: 24px;
}
.about-greeting {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(72px, 12vw, 168px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "opsz" 72;
}
.about-dateline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--ink-muted);
  margin: 18px 0 0;
  letter-spacing: 0.01em;
}

/* ---------- Lede + drop cap ---------- */
.about-lede {
  font-size: clamp(18px, 1.5vw, 22px) !important;
  line-height: 1.55 !important;
}
/* Accessible drop cap — visible ornament hidden from screen readers,
   matching first letter exposed to assistive tech via .dropcap-sr */
.dropcap {
  float: left;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(74px, 7vw, 104px);
  line-height: 0.85;
  padding: 6px 12px 0 0;
  color: var(--accent);
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.02em;
}
.dropcap-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Portrait ---------- */
.about-portrait-figure {
  max-width: var(--max);
  margin: clamp(48px, 6vw, 88px) auto;
  padding: 0 var(--gutter);
}
.about-portrait-frame {
  position: relative;
  max-width: 680px;
  aspect-ratio: 5 / 4;
  margin: 0 auto;
}
.about-portrait-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% center;
  filter: saturate(0.82) contrast(0.96);
}

/* ---------- Pull quote ---------- */
.about-pullquote-section {
  max-width: var(--max);
  margin: clamp(56px, 8vw, 104px) auto;
  padding: 0 var(--gutter);
}
.about-pullquote {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(32px, 5vw, 56px) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.about-pullquote-text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "opsz" 48;
  text-wrap: balance;
}
.about-pullquote-mark,
.about-pullquote-mark-close {
  font-family: var(--serif);
  font-style: normal;
  color: var(--accent-2);
  font-size: 1.2em;
  line-height: 0;
  position: relative;
  top: 0.12em;
}
.about-pullquote-mark { margin-right: 0.08em; }
.about-pullquote-mark-close { margin-left: 0.04em; }

/* ---------- Q&A ---------- */
.about-qa .section-head { justify-content: center; text-align: center; }

.qa-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 72px);
}
.qa-item {
  padding: 0;
}
.qa-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 600;
  margin: 0 0 14px;
}
.qa-number {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
}
.qa-question {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 18px;
  font-variation-settings: "opsz" 36;
  text-wrap: balance;
}
.qa-rule {
  width: 40px;
  height: 1px;
  background: rgba(26, 24, 21, 0.3);
  margin: 0 0 18px;
}
.qa-answer {
  font-family: var(--serif);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "opsz" 16;
}
.qa-answer em {
  font-style: italic;
}

.about-cta-row {
  max-width: 820px;
  margin: clamp(48px, 6vw, 80px) auto 0;
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--rule);
  text-align: right;
}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 680px) {
  .about-greeting {
    font-size: clamp(64px, 18vw, 96px);
  }
  .about-portrait-frame::before {
    inset: auto -10px -10px auto;
    width: 62%;
    height: 62%;
  }
  .about-cta-row { text-align: center; }
}

/* ============================================================
   BOOKS PAGE
   Editorial feature layout — each book is a chapter with a
   title block, cover (or trilogy plates), description, and
   a small pulled-excerpt block that honors the "taste of the
   writing" spirit of the old handwritten-fragment design.
   ============================================================ */

/* ---------- Books intro ---------- */
.books-intro {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 140px) var(--gutter) clamp(40px, 5vw, 72px);
  text-align: center;
}
.books-intro-inner {
  max-width: 720px;
  margin: 0 auto;
}
.books-intro .section-label { margin-bottom: 20px; }
.books-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(64px, 11vw, 148px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "opsz" 72;
}
.books-intro-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--ink-muted);
  margin: 20px 0 0;
}

/* ---------- Book feature (shared) ---------- */
.book-feature {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 88px) var(--gutter);
  border-top: 1px solid var(--rule);
}
.book-feature-head {
  max-width: 820px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  text-align: center;
}
.book-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 600;
  margin: 0 0 18px;
}
.book-tag .ordinal {
  font-size: 0.7em;
  vertical-align: super;
  letter-spacing: 0;
  margin-left: 1px;
  text-transform: lowercase;
}
.book-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "opsz" 60;
  text-wrap: balance;
}
.book-subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 1.4vw, 21px);
  color: var(--ink-muted);
  margin: 14px 0 0;
  letter-spacing: 0.01em;
}
.book-rule {
  width: 56px;
  height: 1px;
  background: rgba(26, 24, 21, 0.3);
  border: 0;
  margin: 28px auto 0;
}

/* ---------- Book feature body (cover + text, two-col on desktop) ---------- */
.book-feature-body {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: clamp(36px, 5vw, 72px);
  max-width: 1080px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 780px) {
  .book-feature-body {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Book cover column */
.book-cover-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.book-cover-img {
  aspect-ratio: 2 / 3;
  background: var(--bg-alt);
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(26, 24, 21, 0.08),
    0 24px 40px -20px rgba(26, 24, 21, 0.3);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.book-cover-img:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 2px rgba(26, 24, 21, 0.08),
    0 30px 48px -20px rgba(26, 24, 21, 0.38);
}
.book-cover-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 780px) {
  .book-cover-figure {
    max-width: 320px;
    margin: 0 auto;
  }
}

/* Retailer links */
.book-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.book-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 2px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  background-color: transparent;
  border-bottom: 1px solid var(--rule);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.book-link-text { transition: letter-spacing 0.2s ease; }
.book-link-arrow {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--accent-2);
  transition: transform 0.2s ease, color 0.2s ease;
}
.book-link:hover {
  background-color: var(--accent);
  color: var(--paper);
  border-bottom-color: var(--accent);
}
.book-link:hover .book-link-arrow {
  transform: translateX(4px);
  color: var(--paper);
}

/* Centered, no-arrow variant for links that sit directly under a "bookish"
   presentation (the piece-plate on scripts.njk / creative-nonfiction.njk and
   the book cover on books.njk). Because the plate/cover is center-aligned,
   the default space-between layout of .book-link looks off-balance. */
.piece-card-figure .book-link,
.book-cover-figure .book-link {
  justify-content: center;
  text-align: center;
}
.piece-card-figure .book-link-arrow,
.book-cover-figure .book-link-arrow {
  display: none;
}

/* Text column */
.book-text {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 40px);
}
.book-description {
  font-family: var(--serif);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "opsz" 16;
}
.book-description em { font-style: italic; }

/* Excerpts block */
.book-excerpts {
  border-left: 1px solid rgba(26, 24, 21, 0.18);
  padding: 4px 0 4px 24px;
  margin: 0;
}
.book-excerpts-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 600;
  margin: 0 0 14px;
}
.book-excerpts-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.book-excerpts-list li {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.45;
  color: var(--ink-muted);
  letter-spacing: 0.005em;
  position: relative;
}
.book-excerpts-list li::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 0.65em;
  width: 10px;
  height: 1px;
  background: var(--accent-2);
}

/* Centered variant for the trilogy */
.book-excerpts--centered {
  border-left: 0;
  padding-left: 0;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding-top: 16px;
  border-top: 1px solid rgba(26, 24, 21, 0.18);
}
.book-excerpts--centered .book-excerpts-list li::before { display: none; }

/* Author disclosure block */
.book-disclosure {
  padding: 20px 24px;
  background: var(--bg-alt);
  border-left: 3px solid var(--accent-2);
}
.book-disclosure-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 600;
  margin: 0 0 10px;
}
.book-disclosure-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  letter-spacing: 0.005em;
}

/* ---------- Trilogy stack (three volume plates) ---------- */
.book-feature--trilogy .book-feature-body { display: block; }

.trilogy-stack {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
  max-width: 1080px;
  margin: 0 auto clamp(48px, 6vw, 72px);
}
@media (max-width: 780px) {
  .trilogy-stack { grid-template-columns: 1fr; max-width: 420px; }
}

.trilogy-volume {
  aspect-ratio: 3 / 4;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(26, 24, 21, 0.08);
  box-shadow: 0 1px 2px rgba(26, 24, 21, 0.04);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.trilogy-volume:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -14px rgba(26, 24, 21, 0.22);
}
.trilogy-volume.tint-1 { background: #ECE5D0; }
.trilogy-volume.tint-2 { background: #E6DEC8; }
.trilogy-volume.tint-3 { background: #DED1B4; }

.trilogy-volume-frame {
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(26, 24, 21, 0.16);
  padding: clamp(20px, 3vw, 30px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
}
.trilogy-volume-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 600;
  margin: 0;
  line-height: 1;
}
.trilogy-volume-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "opsz" 36;
  text-wrap: balance;
}
.trilogy-volume-rule {
  width: 36px;
  height: 1px;
  background: rgba(26, 24, 21, 0.3);
  border: 0;
  margin: 2px 0;
}
.trilogy-volume-status {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.3;
  color: var(--ink-muted);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.trilogy-status-line { display: block; }
.trilogy-status-sub {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  margin-top: 4px;
}

/* Trilogy text block (description + excerpts, centered) */
.trilogy-text {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 40px);
}
.trilogy-text .book-description { text-align: center; }

/* ============================================================
   Creative Nonfiction page — piece feature
   Reuses the books page editorial structure (.book-feature,
   .book-feature-body, .book-link, .book-description, etc.)
   and adds a "plate" card (no cover art), an audio player
   for Vimeo readings, and a coming-soon footer so future
   pieces can be dropped in as additional <article> blocks.
   ============================================================ */

/* ---------- Piece plate (stand-in for a book cover) ---------- */
.piece-card-figure {
  /* width:100% is required — without it, the flex container shrinks to
     its content width on Safari iOS (especially once margin:0 auto is
     applied in the mobile breakpoint below), collapsing the plate. */
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.piece-plate {
  /* width:100% + align-self:stretch guarantees the plate fills the
     figure on Safari iOS, which otherwise sizes aspect-ratio children
     in a flex column by their content rather than the cross-axis. */
  width: 100%;
  align-self: stretch;
  aspect-ratio: 2 / 3;
  position: relative;
  overflow: hidden;
  background: #ECE5D0;
  border: 1px solid rgba(26, 24, 21, 0.08);
  box-shadow:
    0 1px 2px rgba(26, 24, 21, 0.08),
    0 24px 40px -20px rgba(26, 24, 21, 0.3);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  /* Establish a containment context so descendants can size fonts
     and laurel images relative to the plate width (cqw units) rather
     than the viewport. This keeps proportions consistent whether the
     plate is 280px wide on a phone or 440px wide on a laptop. */
  container-type: inline-size;
}
.piece-plate:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 2px rgba(26, 24, 21, 0.08),
    0 30px 48px -20px rgba(26, 24, 21, 0.38);
}
.piece-plate-frame {
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(26, 24, 21, 0.16);
  padding: clamp(20px, 5.5cqw, 36px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  gap: clamp(14px, 3cqw, 22px);
}
/* Content wrapper takes the vertical space NOT occupied by laurels and
   vertically centers the title/meta within that region. This guarantees
   the text never overlaps the laurels (and on plates with no laurels it
   still centers within the full frame). */
.piece-plate-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(10px, 2.2cqw, 16px);
}
.piece-plate-label {
  font-family: var(--mono);
  font-size: clamp(9.5px, 2.6cqw, 12px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 600;
  margin: 0;
  line-height: 1;
}
.piece-plate-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 8cqw, 38px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  font-variation-settings: "opsz" 36;
  text-wrap: balance;
}
.piece-plate-rule {
  width: clamp(30px, 9cqw, 44px);
  height: 1px;
  background: rgba(26, 24, 21, 0.3);
  border: 0;
  margin: 2px 0;
}
.piece-plate-meta {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(13px, 3.6cqw, 17px);
  line-height: 1.45;
  color: var(--ink-muted);
  margin: 0;
}
.piece-plate-year {
  font-family: var(--mono);
  font-style: normal;
  font-size: clamp(9.5px, 2.6cqw, 12px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-block;
  margin-top: 4px;
}
/* Corner banner — like a book-jacket sticker or film-poster tag.
   Rotates -45° across the top-LEFT corner of the plate. The plate's
   overflow:hidden clips the ends cleanly. Positioning is chosen so the
   visible diagonal strip (the part inside the plate rectangle) is long
   enough to fit the full "Available for Option" text without clipping:
   the ribbon's center sits far enough from the corner that text halves
   fit within the strip on both sides. Sized with cqw so it scales with
   the plate rather than the viewport, matching the rest of the plate
   typography. Only appears when the HTML includes a .piece-plate-ribbon
   element — e.g., the Christmas Across the Hall plate marked
   "Available for Option". */
.piece-plate-ribbon {
  position: absolute;
  top: clamp(40px, 13cqw, 70px);
  left: clamp(-78px, -14cqw, -42px);
  width: clamp(172px, 56cqw, 260px);
  padding: clamp(5px, 1.3cqw, 7px) 0;
  transform: rotate(-45deg);
  transform-origin: center;
  background: var(--accent-2);
  color: var(--bg);
  font-family: var(--mono);
  font-size: clamp(8.5px, 2.4cqw, 10.5px);
  line-height: 1.15;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  box-shadow:
    0 2px 6px rgba(26, 24, 21, 0.22),
    inset 0 -1px 0 rgba(26, 24, 21, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  z-index: 2;
  pointer-events: none;
}
/* On "piece" pages (Creative Nonfiction, Other Scripts), the plate IS
   the artwork — it should read larger than a book cover. Override the
   shared .book-feature-body grid so the plate column is more generous
   on desktop/tablet, and let the plate fill the single-column width
   naturally on phones. */
.piece-feature .book-feature-body {
  grid-template-columns: minmax(300px, 440px) 1fr;
}
@media (max-width: 780px) {
  .piece-feature .book-feature-body {
    grid-template-columns: 1fr;
  }
  .piece-card-figure {
    max-width: 560px;
    margin: 0 auto;
  }
}

/* ---------- Piece excerpt ("Jump right in...") ---------- */
.piece-excerpt {
  padding: clamp(26px, 3vw, 38px) clamp(24px, 3vw, 36px);
  background: var(--bg-alt);
  border-left: 3px solid var(--accent-2);
  margin: 0;
}
.piece-excerpt-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 600;
  margin: 0 0 18px;
}
.piece-excerpt-body {
  font-family: var(--serif);
  font-size: clamp(15.5px, 1.2vw, 17.5px);
  line-height: 1.65;
  color: var(--ink);
  font-variation-settings: "opsz" 16;
}
.piece-excerpt-body p {
  margin: 0 0 14px;
}
.piece-excerpt-body p:last-of-type {
  margin-bottom: 0;
}
.piece-excerpt-dropcap {
  float: left;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(46px, 4.2vw, 60px);
  line-height: 0.88;
  padding: 4px 10px 0 0;
  color: var(--accent-2);
  font-variation-settings: "opsz" 60;
  letter-spacing: -0.015em;
}
.piece-excerpt-more {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(26, 24, 21, 0.14);
  text-align: right;
}
.piece-excerpt-more a {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
  transition: color 0.2s ease, border-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.piece-excerpt-more a:hover {
  color: var(--accent-2);
  border-color: var(--accent-2);
}
.piece-excerpt-more a .arrow {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--accent-2);
  transition: transform 0.2s ease;
  display: inline-block;
  letter-spacing: 0;
}
.piece-excerpt-more a:hover .arrow {
  transform: translateX(4px);
}

/* ---------- "More works coming" footer ---------- */
.piece-coming-soon {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 88px) var(--gutter) clamp(64px, 8vw, 120px);
  border-top: 1px solid var(--rule);
  text-align: center;
}
.piece-coming-soon-inner {
  max-width: 540px;
  margin: 0 auto;
}
.piece-coming-soon .section-label { margin-bottom: 16px; }
.piece-coming-soon-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px, 1.25vw, 19px);
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.55;
}

/* ============================================================
   SHORT FILM SCRIPTS PAGE
   Film feature variant: video embed on top, synopsis +
   laurels + awards + script link stacked single-column below.
   Reuses .book-feature, .book-feature-head, .book-tag,
   .book-title, .book-subtitle, .book-rule, .book-description,
   .book-links, .book-link, .accolade-* for consistency.
   ============================================================ */

/* Single-column body override for film features */
.film-feature .film-feature-body {
  display: block;
  max-width: 900px;
  margin: 0 auto;
}

/* Responsive 16:9 YouTube embed */
.film-video {
  margin: 0 0 clamp(32px, 4vw, 48px);
}
.film-video-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  background: #000;
  border: 1px solid var(--rule);
  overflow: hidden;
}
.film-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Laurels row */
.film-laurels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  margin: 0 0 clamp(32px, 4vw, 48px);
  padding: clamp(12px, 2vw, 20px) 0;
}
.film-laurel {
  margin: 0;
  flex: 0 0 auto;
}
.film-laurel img {
  display: block;
  height: 140px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
@media (max-width: 520px) {
  .film-laurel img {
    height: 110px;
  }
}

/* Laurels at the bottom of the script plate — like a film one-sheet.
   Sit naturally in the flex column flow: the .piece-plate-content wrapper
   above consumes remaining vertical space (flex: 1), which pushes the
   laurels to the bottom while reserving their height. That keeps the
   title/meta vertically centered within the upper region with no risk
   of overlap. Grid 2-col forces 2 per row (2 laurels = 1 row, 4 laurels
   = 2×2). Sizing is in cqw so laurels scale with the plate, not the
   viewport. */
.piece-plate-laurels {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: center;
  align-items: center;
  gap: clamp(10px, 2.4cqw, 16px) clamp(12px, 3cqw, 20px);
}
.piece-plate-laurel {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.piece-plate-laurel img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(54px, 19cqw, 100px);
}

/* Synopsis text block */
.film-text {
  max-width: 760px;
  margin: 0 auto clamp(32px, 4vw, 48px);
}
.film-text .book-description {
  text-align: left;
}

/* ---------- Privacy page headings & meta ----------
   Extracted from inline style attributes in privacy.njk so the
   template stays clean and the typography lives in one place.
*/
.privacy-heading {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 36;
  letter-spacing: -0.01em;
  line-height: 1.15;
  font-size: clamp(28px, 3.2vw, 40px);
  margin-top: 2em;
  margin-bottom: 0.6em;
  color: var(--ink);
}
.privacy-updated {
  margin-top: 2.4em;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-2);
}