/* ---------- Fonts ----------
   Fraunces and Inter (SIL Open Font License), from Google Fonts, served from assets/fonts/.
   The pages preload the Latin files, and font-display: block holds the text back until they
   arrive (Chrome waits up to 3 seconds), so it's drawn in Fraunces and Inter from the start
   rather than in Georgia first and then changing size. The latin-ext files (accented letters
   beyond Western European ones) only download when a page uses one of those letters. */
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 300 700; font-display: block;
  src: url("assets/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 300 700; font-display: block;
  src: url("assets/fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces"; font-style: italic; font-weight: 300 600; font-display: block;
  src: url("assets/fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces"; font-style: italic; font-weight: 300 600; font-display: block;
  src: url("assets/fonts/fraunces-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: block;
  src: url("assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: block;
  src: url("assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  --paper: #f5f1e8;
  --paper-2: #ece5d6;
  --card: #fbf8f2;
  --ink: #1a1714;
  --ink-2: #4a443c;
  --muted: #7a7166;
  --line: #dcd3c2;
  --accent: #a4561f;
  --accent-soft: #f0dcc6;
  --on-accent: #fffaf3;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 14px;
  --shadow: 0 1px 2px rgb(26 23 20 / 0.05), 0 8px 24px -12px rgb(26 23 20 / 0.18);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121110;
    --paper-2: #191715;
    --card: #1d1b18;
    --ink: #f1ece3;
    --ink-2: #c9c1b4;
    --muted: #8e8579;
    --line: #2f2b26;
    --accent: #e09a5c;
    --accent-soft: #3a2a1d;
    --on-accent: #1a1209;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 30px -14px rgb(0 0 0 / 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #121110;
  --paper-2: #191715;
  --card: #1d1b18;
  --ink: #f1ece3;
  --ink-2: #c9c1b4;
  --muted: #8e8579;
  --line: #2f2b26;
  --accent: #e09a5c;
  --accent-soft: #3a2a1d;
  --on-accent: #1a1209;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 30px -14px rgb(0 0 0 / 0.6);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Jump links stop with their target right under the sticky header, so no strip of the section
   above shows between them. The header is 53px tall (52px plus the 1px line under it); stopping
   at 52px tucks the target's top edge under that line, so sections that start part-way through
   a pixel can't leave a hairline gap either. */
html { scroll-behavior: smooth; scroll-padding-top: 52px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { top: 8px; }

.eyebrow {
  font: 600 12px/1.2 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 500 15px/1.2 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}
.btn:hover { border-color: var(--ink); }
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.site-header.scrolled { border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; gap: 28px; height: 52px; }
.wordmark { font: 500 20px/1 var(--serif); text-decoration: none; letter-spacing: -0.01em; margin-right: auto; }
.site-nav { display: flex; align-items: center; gap: 28px; font-size: 15px; }
.site-nav a { text-decoration: none; color: var(--ink-2); }
.site-nav a:hover { color: var(--ink); }
.site-nav .nav-subscribe { color: var(--accent); }
.site-nav .nav-subscribe:hover { color: var(--ink); }
/* With room to spare, Subscribe is a pill button, as it was before. */
@media (min-width: 540px) {
  .site-nav .nav-subscribe { color: var(--ink); border: 1px solid var(--line); padding: 7px 16px; border-radius: 999px; }
  .site-nav .nav-subscribe:hover { border-color: var(--ink); }
}

/* Phones: the name and the four links stay on one line; the name shrinks to make room
   (down to 13px). Below 350px, where even that won't fit, the links wrap onto a second
   row and the name goes back to full size. */
@media (max-width: 760px) {
  .header-inner { flex-wrap: wrap; gap: 0 12px; height: auto; min-height: 52px; }
  /* The name is about 8.1em wide; the links take about 195px plus the gaps and gutters. */
  .wordmark { font-size: clamp(13px, 12.3vw - 30.5px, 20px); white-space: nowrap; }
  .site-nav { gap: 12px; font-size: 14px; }
}
/* Subscribe joins the links when they fit beside the full-size name (from 485px), and on
   the wrapped second row below 350px. In between it would squeeze the name, so it's hidden. */
@media (min-width: 350px) and (max-width: 484px) {
  .site-nav .nav-subscribe { display: none; }
}
@media (max-width: 349px) {
  html { scroll-padding-top: 64px; } /* the header is 65px here, with the links on a second row */
  .header-inner { padding-top: 8px; padding-bottom: 7px; }
  .wordmark { font-size: 20px; }
  .site-nav { flex-basis: 100%; padding-top: 6px; }
}

/* ---------- Banner ---------- */
/* The photo is only 760px wide, so the band stays short to keep it from looking soft. */
/* Crop near the bottom of the photo (the spine), nudged 44px down to show more of the pages. */
.home-banner img { width: 100%; height: clamp(117px, 18.66vw, 265px); object-fit: cover; object-position: 50% calc(85% + 44px); }
/* The band stops getting taller at 1420px wide. Beyond that, a full-width photo would only show a
   thin strip by the spine (and be blown up even softer), so the photo stays 1420px wide, centred,
   showing the same crop as at 1420px. Its sides fade into the page; the fade grows with the spare
   room on each side, up to 160px, so there's no sudden edge just past 1420px. */
@media (min-width: 1421px) {
  .home-banner img {
    --banner-fade: min(160px, (100vw - 1420px) / 2);
    max-width: 1420px; margin-inline: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--banner-fade), #000 calc(100% - var(--banner-fade)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--banner-fade), #000 calc(100% - var(--banner-fade)), transparent);
  }
}

/* ---------- Hero ---------- */
/* Space under the banner: 30px on phones, growing to 64px on wide screens. */
.hero { padding: clamp(30px, 4.5vw, 64px) 0 clamp(22px, 2.8vw, 36px); }
/* Wide: bio on the left spanning both rows; photo, then the Author / Film buttons, on the right. */
.hero-grid {
  --hero-title-size: clamp(56px, 10vw, 128px);
  display: grid; grid-template-columns: 1.15fr 0.85fr; grid-template-rows: auto 1fr;
  grid-template-areas: "copy portrait" "copy actions";
  gap: 32px clamp(32px, 6vw, 80px); align-items: start;
}
.hero-copy { grid-area: copy; }
.hero-portrait { grid-area: portrait; }
.hero-title {
  font-size: var(--hero-title-size);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.035em;
  font-variation-settings: "opsz" 144;
  margin-bottom: 28px;
}
.hero-lede { font: italic 300 clamp(18px, 1.6vw, 21px)/1.5 var(--serif); color: var(--ink-2); max-width: 36em; }
.hero-lede p + p { margin-top: 0.9em; }
/* No paragraph margin after the bio's last line, so the space below it is just the gap above the lists. */
.hero-lede p:last-child { margin-bottom: 0; }
.hero-actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 12px; }
/* The hero lists (books, film, publications, latest articles) sit below the bio and
   portrait, two columns across the full width on wider screens, one below 860px.
   Each starts with a rule and a small label. 32px above them, the same as the gaps between them. */
.hero-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 32px clamp(32px, 6vw, 80px); align-items: start; margin-top: 32px; }
.latest { border-top: 1px solid var(--line); padding-top: 18px; }
.latest-label { font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.latest-list li { border-bottom: 1px solid var(--line); }
.latest-list a { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; text-decoration: none; }
.latest-list a:hover .latest-title { color: var(--accent); }
.latest-title { font: 500 17px/1.35 var(--serif); transition: color .2s; }
.latest-meta { flex-shrink: 0; font-size: 13px; color: var(--muted); padding-top: 2px; }
/* Hero list links (Short Film, Published Books, Published Works, Latest Articles) show they're links before
   they're hovered: the title is followed by an arrow in the accent colour, like the Screen & Stage links.
   On hover the title turns accent and the arrow moves right. */
.link-cue .latest-title svg {
  display: inline-block; width: 19px; height: 19px; margin-left: 8px; vertical-align: -3px;
  fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s;
}
.link-cue:hover .latest-title svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .link-cue:hover .latest-title svg { transform: none; } }
/* A note line (e.g. an award) belongs to the item above it, so no divider between them. */
.latest-list li.has-note { border-bottom: 0; }
.latest-note { padding: 0 0 12px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
/* Published Works: the venue (in italics) and any honor
   sit under the title; a quote from the piece is the note line below, like Flights' award. */
.story-head { display: flex; flex-direction: column; gap: 2px; }
.story-venue { font-size: 13px; line-height: 1.4; color: var(--muted); }
.story-venue cite { font: italic 400 15px/1.4 var(--serif); color: var(--ink-2); }
.laurel-icon { display: inline-block; width: 24px; height: 21.6px; vertical-align: -6px; margin-left: 2px; color: var(--accent); }
.nowrap { white-space: nowrap; }

/* Top of the photo lines up with the top of the capital "R" in the name: skip the
   eyebrow line (12px x 1.2 line-height + 14px margin), then the space above the
   capitals inside the title's line box (about 0.116em in Fraunces at line-height 0.92). */
.hero-portrait { margin: calc(12px * 1.2 + 14px + var(--hero-title-size) * 0.116) 0 0; position: relative; }
.hero-portrait img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 45%;
  border-radius: var(--radius);
  filter: grayscale(0.25) contrast(1.05);
  box-shadow: var(--shadow);
}

@media (max-width: 860px) {
  /* Name on one line: "Robert M. Herzog" is about 8em wide, so 11vw keeps it inside
     the column (100vw minus the gutters) down to 320px screens. */
  /* One column: photo, bio, then the buttons. The photo keeps its larger gap below it. */
  .hero-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "portrait" "copy" "actions"; --hero-title-size: min(clamp(56px, 10vw, 128px), 11vw); }
  .hero-title { white-space: nowrap; }
  .hero-title br { display: none; }
  .hero-portrait { max-width: 340px; margin: 0 0 calc(clamp(32px, 6vw, 80px) - 32px); }
  .hero-portrait img { aspect-ratio: 1 / 1; }
  .hero-lists { grid-template-columns: 1fr; }
  .latest { max-width: 560px; }
}

/* Two columns: Short Film, Published Books and Latest Articles down the left, Published
   Works, the longest list, down the right. The third row takes up whatever Published
   Works needs beyond the lists beside it, so the left-hand lists keep their 32px gaps. */
@media (min-width: 861px) {
  .hero-lists { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr; }
  .hero-lists > .latest { grid-column: 1; }
  .hero-lists > .published-stories { grid-column: 2; grid-row: 1 / span 3; }
}

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section-alt { background: var(--paper-2); }

.section-half-start { padding-top: calc(clamp(64px, 9vw, 120px) / 2); }
.section-half-end { padding-bottom: calc(clamp(64px, 9vw, 120px) / 2); }
.section-head { margin-bottom: clamp(32px, 4vw, 52px); }
.section-head h2 { font-size: clamp(32px, 4.4vw, 52px); max-width: 20ch; }
.section-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }

/* ---------- Featured film ---------- */
/* Sits below the Screen & Stage cards, as the end of that section. */
/* The band uses the page's own background and colours (light or dark with the theme); only
   its film strips are dark. */
.film-feature { position: relative; overflow: hidden; margin-top: clamp(32px, 4vw, 52px); }
/* Strips of film sprocket holes across the top and bottom of the band, with square
   corners. Each dark strip runs to the band's edge and is as deep as it was when the band
   had rounded corners (the corner radius plus the holes plus 8px), so the spacing is
   unchanged; the holes are centred in it. The band's bottom padding
   keeps the content clear of the lower strip. The strip and hole colours are what the
   strips showed over the band's old dark background, so they look the same as before. */
/* --sprocket-end is extra black at each end of a strip, before the first hole and after the last. */
.film-feature { --film-strip: calc(var(--radius) + 28px + 8px); --sprocket-end: 8px; padding-bottom: var(--film-strip); }
.film-feature::before, .film-feature::after {
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; height: var(--film-strip);
  /* One 34px tile is half a gap, a hole, half a gap. app.js narrows the tile (--sprocket-tile)
     so a whole number fit between the ends, leaving half a gap plus --sprocket-end at each
     edge; the SVG keeps the hole's size and centres it, so only the gaps shrink. The holes
     sit in the content box (inside the end padding); the black fills the whole strip. */
  padding-inline: var(--sprocket-end);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 28'%3E%3Crect x='9' y='7' width='16' height='14' rx='3' fill='%23cfcbc3'/%3E%3C/svg%3E") repeat-x left center / var(--sprocket-tile, 34px) 28px content-box, #0c0b0a;
  pointer-events: none;
}
.film-feature::before { top: 0; }
.film-feature::after { bottom: 0; }
/* Top of the band: the label centred across the top, then the film's image on the left,
   whole and uncovered (its Austin finalist badge included), with the title, status and
   laurels beside it, centred on the image. Same columns as the body below, so the image
   sits over the logline and the title over the buttons. */
.film-top { display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px clamp(32px, 6vw, 80px); align-items: center; padding-top: calc(var(--film-strip) + 28px); }
/* A little larger than other labels. The negative margin balances the letter-spacing after
   the last letter, so the text is truly centred. */
.film-eyebrow { grid-column: 1 / -1; text-align: center; font-size: 14px; margin: 0 -.14em 0 0; }
.film-media { margin: 0; }
.film-media img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius) - 4px); }
.film-title { font-size: clamp(44px, 5.2vw, 68px); font-weight: 400; letter-spacing: -0.03em; line-height: .95; margin-bottom: 18px; }
.film-status { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--line); padding: 8px 14px; border-radius: 999px; }
.film-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
/* 28px above the body. */
.film-body { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(32px, 6vw, 80px); padding-top: 28px; padding-bottom: 40px; }
/* Keep the space above the bottom film strip to the 40px padding: no trailing margins. */
.film-body > * > :last-child { margin-bottom: 0; padding-bottom: 0; }
.film-logline { font: 300 clamp(22px, 2.4vw, 30px)/1.4 var(--serif); margin-bottom: 28px; }
.film-about p { color: var(--ink-2); }
.film-credits { font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 18px; margin-top: 28px; }
/* The right-hand column is spaced fairly tightly so on wide screens it ends close to the left-hand
   column: 20px between the buttons, sponsor and badge, plus 10px more above and below the sponsor
   (30px in all) to give the Gotham logo some room. */
.film-side { display: flex; flex-direction: column; gap: 20px; }
.film-side .sponsor { padding-block: 10px; gap: 8px; }
.film-intro .laurels { margin-top: 28px; }
.laurels li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.45; }
.laurels li:first-child { border-top: 1px solid var(--line); }
.laurels .laurel-icon { flex-shrink: 0; width: 24px; height: 21.6px; margin: 1px 0 0; vertical-align: 0; color: var(--accent); }
.film-actions { display: flex; flex-direction: column; gap: 10px; }
.film-actions .btn { justify-content: center; }
/* "Support the film" stays in the accent colour, unlike the site's usual dark primary button. */
.film-actions .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.film-actions .btn-primary:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sponsor { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding-block: 12px; font-size: 13px; color: var(--muted); }
/* The logo is black lettering: turned light in dark mode. */
.sponsor img { width: 200px; height: auto; opacity: .85; }
:root[data-theme="dark"] .sponsor img { filter: invert(1) brightness(1.2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sponsor img { filter: invert(1) brightness(1.2); }
}
.film-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.film-badge { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.film-badge img { width: 160px; height: auto; }
/* Under the badge: "FINALIST", then the award in smaller capitals, one entry per line. */
.film-badge figcaption { display: flex; flex-direction: column; gap: 4px; text-transform: uppercase; }
.film-badge-title { font: 600 20px/1.2 var(--sans); letter-spacing: .2em; margin-right: -.2em; color: var(--ink); margin-bottom: 2px; }
.film-badge-line { font: 600 11px/1.4 var(--sans); letter-spacing: .14em; margin-right: -.14em; color: var(--muted); }
.collab { font-size: 14px; color: var(--muted); }
.collab strong, .film-credits strong { color: var(--ink); font-weight: 500; }
/* The large link to the film's own page, centred across the bottom of the band under a rule,
   40px above the bottom film strip (the same space the two columns had above it). */
.film-page { text-align: center; padding-bottom: 40px; }
.film-page::before { content: ""; display: block; border-top: 1px solid var(--line); margin-bottom: 32px; }
/* 22px on phones fits it on one line down to about 375px; if it wraps, the arrow stays with the last word. */
.film-page-link { font: 400 clamp(22px, 3vw, 36px)/1.25 var(--serif); letter-spacing: -0.01em; color: var(--accent); text-decoration: none; }
.film-page-link svg { display: inline-block; width: .8em; height: .8em; margin-left: .35em; vertical-align: -0.08em; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s; }
.film-page-link:hover { color: var(--ink); }
.film-page-link:hover svg { transform: translateX(4px); }

@media (max-width: 860px) {
  /* One column: the image, then the title and logline, then the rest. */
  .film-top, .film-body { grid-template-columns: 1fr; }
  .film-top { gap: 28px; }
}
/* Where the Screen & Stage cards above are one per row (765px and below, from .screen-grid's
   340px minimum card width), the label and title come first, then the image, then the
   status and laurels. */
@media (max-width: 765px) {
  .film-top { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .film-intro { display: contents; }
  .film-eyebrow { order: 1; text-align: left; font-size: 12px; margin: 0 0 14px; }
  .film-title { order: 2; margin-bottom: 24px; }
  .film-media { order: 3; margin-bottom: 28px; }
  .film-status { order: 4; align-self: flex-start; }
  .film-intro .laurels { order: 5; }
}
/* On wide screens the band (and so its film strips) stops at the content width instead of running edge to edge. */
@media (min-width: 1260px) {
  .film-feature { max-width: var(--wrap); margin-inline: auto; }
}

/* ---------- Screen grid ---------- */
.screen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 24px; }
.work {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
  overflow: clip; /* clips like hidden, but isn't a scroll box, so jump links honour scroll-margin-top */
}
.work-media { display: block; aspect-ratio: 16 / 10; background: var(--paper-2); overflow: hidden; }
.work-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.work:hover .work-media img { transform: scale(1.03); }
.work-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.work-kind { font: 600 11px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.work h3 { font-size: 26px; margin-bottom: 6px; }
/* Linked cards: the title is a link that turns orange on hover, like the Writing cards (but no border highlight). */
.work h3 a { text-decoration: none; }
.work h3 a:hover { color: var(--accent); }
.work-role { font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.work-summary { color: var(--ink-2); font-size: 16px; }
.work-quote { font: italic 300 16px/1.5 var(--serif); color: var(--ink-2); border-left: 2px solid var(--accent); padding-left: 14px; margin: 4px 0 16px; }
.work-quote cite { display: block; font: normal 400 13px/1.4 var(--sans); color: var(--muted); margin-top: 6px; }
.work-laurel { font-size: 14px; font-weight: 500; margin-bottom: 12px; display: flex; gap: 8px; align-items: flex-start; }
.work-laurel-below { margin: -4px 0 0; } /* 12px below the summary, matching the gap above it on Flights */
.work-laurel .laurel-icon { flex-shrink: 0; width: 21px; height: 18.9px; margin: 1px 0 0; vertical-align: 0; }
.work details { font-size: 14px; color: var(--ink-2); margin-bottom: 14px; }
.work summary { cursor: pointer; color: var(--ink); font-weight: 500; }
.work details ul { margin-top: 10px; columns: 1; }
.work details li { padding: 3px 0 3px 14px; position: relative; }
.work details li::before { content: ""; position: absolute; left: 0; top: 12px; width: 5px; height: 1px; background: var(--muted); }
.work-links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 8px; }
.text-link { font-size: 14px; font-weight: 500; color: var(--accent); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.text-link:hover { text-decoration: underline; }
/* 19px, the same as the arrows in the hero lists. */
.text-link svg { flex-shrink: 0; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; }
.work-noimg .work-body { padding-top: 28px; }
.work-noimg h3 { font-size: 30px; }

/* ---------- Books ---------- */
.books { display: grid; gap: clamp(48px, 6vw, 80px); }
.book { display: grid; grid-template-columns: minmax(160px, 260px) 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
/* A little extra room above a book or card when the hero's links jump to it. */
.book, .work { scroll-margin-top: 12px; }
.book-cover img { width: 100%; height: auto; border-radius: 4px 10px 10px 4px; box-shadow: -6px 0 0 -3px rgb(0 0 0 / .08), 0 20px 40px -18px rgb(0 0 0 / .45); }
.book h3 { font-size: clamp(30px, 3.6vw, 44px); }
/* Stand-in cover for a book without cover art: title and author set on a plain board. */
.book-cover-card {
  aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  padding: 18% 12% 14%; text-align: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 4px 10px 10px 4px;
  box-shadow: -6px 0 0 -3px rgb(0 0 0 / .08), 0 20px 40px -18px rgb(0 0 0 / .45);
}
.book-cover-title { font: 400 clamp(26px, 2.6vw, 34px)/1.1 var(--serif); color: var(--ink); }
.book-cover-author { font: 600 11px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.book-subtitle { font: italic 300 22px/1.3 var(--serif); color: var(--ink-2); margin: 4px 0 14px; }
.book-badge { display: inline-block; font-size: 13px; font-weight: 500; background: var(--accent-soft); color: var(--ink); padding: 5px 12px; border-radius: 999px; margin-bottom: 16px; }
.book-desc { color: var(--ink-2); max-width: 62ch; }
.book-quote { font: italic 300 19px/1.5 var(--serif); margin: 20px 0 24px; max-width: 58ch; }
.book-quote cite { display: block; font: normal 400 14px/1.4 var(--sans); color: var(--muted); margin-top: 8px; }
.book-buy { display: flex; flex-wrap: wrap; gap: 8px; }
.book-buy .btn { padding: 8px 16px; font-size: 14px; }

@media (max-width: 640px) {
  .book { grid-template-columns: 1fr; }
  .book-cover { max-width: 200px; }
}

.reviews { margin-top: clamp(56px, 7vw, 88px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 24px; border-top: 1px solid var(--line); padding-top: 40px; }
.reviews-title { grid-column: 1 / -1; margin: 0; }
.review { font: italic 300 17px/1.5 var(--serif); color: var(--ink-2); margin: 0; }
.review cite { display: block; font: normal 400 13px/1.4 var(--sans); color: var(--muted); margin-top: 10px; }
.stars { color: var(--accent); letter-spacing: 2px; font-style: normal; display: block; margin-bottom: 8px; font-size: 14px; }

/* ---------- Writing ---------- */
.writing-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--line); background: transparent; color: var(--ink-2);
  padding: 7px 14px; border-radius: 999px; font: 500 14px/1 var(--sans); cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip .count { opacity: .55; margin-left: 4px; font-variant-numeric: tabular-nums; }
.search { position: relative; display: flex; align-items: center; }
.search svg { position: absolute; left: 12px; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; pointer-events: none; }
.search input {
  width: 200px; max-width: 100%; padding: 8px 14px 8px 34px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink); font: 400 14px/1.2 var(--sans);
}
.search input:focus { outline: none; border-color: var(--accent); }

.writing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 24px; }
.piece {
  position: relative; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: clip; /* like .work: clips like hidden, but isn't a scroll box, so jump links honour scroll-margin-top */
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
}
.piece:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
/* Coming back from a reading page lands on that piece's card, 12px below the header (like book and
   Screen & Stage cards), outlined in the accent colour so it's easy to spot. */
.piece { scroll-margin-top: 12px; }
.piece:target, .work:target { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
/* The image opens the card's main link (as does the title); the rest of the card is plain text. */
.piece-media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); }
.piece-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.piece-media:hover img { transform: scale(1.03); }
.piece-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.piece-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--muted); margin-bottom: 10px; align-items: center; }
.piece-kind { font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.piece h3 { font-size: 22px; line-height: 1.2; margin-bottom: 8px; }
.piece h3 a { text-decoration: none; }
.piece h3 a:hover { color: var(--accent); }
.piece-dek { font-size: 15px; color: var(--ink-2); margin-bottom: 14px; }
.piece-venue { font: italic 400 14px/1.4 var(--serif); color: var(--ink-2); margin-bottom: 12px; }
/* Short Fiction and Poetry cards: the magazine in italics, then any honor ("Editor’s Pick") in
   small plain text; the quote from the piece is set off with the accent rule, like film quotes. */
.piece-venue cite { font-style: italic; }
.piece-honor { font: 400 13px/1.4 var(--sans); font-style: normal; color: var(--muted); }
.piece-quote { font: italic 300 17px/1.5 var(--serif); color: var(--ink-2); border-left: 2px solid var(--accent); padding-left: 14px; margin: 2px 0 18px; }
.piece-links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 1; }
.platform {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 12px/1 var(--sans); color: var(--ink-2); text-decoration: none;
  border: 1px solid var(--line); padding: 6px 10px; border-radius: 999px;
  background: var(--paper);
}
.platform:hover { border-color: var(--ink); color: var(--ink); }
.platform svg { width: 13px; height: 13px; fill: currentColor; }
/* The arrow icons (Read, and ↗ for other sites) are 19px like the site's other arrows; the negative
   margin keeps their pills the same height as the ones with 13px logos. */
.platform .icon-arrow { width: 19px; height: 19px; margin-block: -3px; }
.piece-noimg .piece-body { padding-top: 26px; }
.piece-noimg h3 { font-size: 25px; }
.piece-noimg::before { content: ""; height: 4px; background: var(--accent); opacity: .7; }

.writing-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 40px 0; }
.writing-more { text-align: center; margin-top: 40px; }

/* ---------- About ---------- */
/* Between the heading and the text below: 44% of one heading line (the h2's font-size x its
   1.1 line-height). */
.about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: calc(clamp(32px, 4.4vw, 52px) * 1.1 * 0.44) clamp(32px, 6vw, 88px); align-items: start; }
.about-grid .section-head { grid-column: 1 / -1; margin-bottom: 0; }
.about-lead { font: 400 clamp(22px, 2.4vw, 28px)/1.35 var(--serif); margin-bottom: 20px; }
.about-copy p { color: var(--ink-2); }
.about-voice {
  margin: 0; padding: clamp(24px, 3vw, 36px);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  font: italic 300 19px/1.55 var(--serif);
}
.about-voice p:last-of-type { margin-bottom: 14px; }
.about-voice cite { font: normal 500 13px/1 var(--sans); color: var(--muted); letter-spacing: .04em; }

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  /* Stacked: keep the bio-to-quote gap at its old clamp(32px, 6vw, 88px), not the heading row gap. */
  .about-voice { margin-top: calc(clamp(32px, 6vw, 88px) - clamp(32px, 4.4vw, 52px) * 1.1 * 0.44); }
}

/* ---------- Follow ---------- */
/* The last section is at least a screen tall (less the header), so the Subscribe link can
   bring it right up under the header instead of stopping at the bottom of the page. */
#follow { min-height: calc(100vh - 53px); }
.follow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.newsletter h2 { font-size: clamp(32px, 4vw, 46px); margin-bottom: 14px; }
.newsletter-blurb { font: italic 300 20px/1.45 var(--serif); color: var(--ink-2); max-width: 40ch; margin-bottom: 24px; }
.contact { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.contact p { color: var(--ink-2); }
.contact-email { font: 400 clamp(24px, 3vw, 32px)/1.2 var(--serif); text-decoration: none; border-bottom: 1px solid var(--accent); overflow-wrap: anywhere; }
.contact-email:hover { color: var(--accent); }

.social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.social-grid a {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); text-decoration: none;
  transition: border-color .2s, transform .2s;
}
.social-grid a:hover { border-color: var(--accent); transform: translateY(-2px); }
.social-grid svg { width: 22px; height: 22px; flex-shrink: 0; fill: currentColor; color: var(--accent); }
.social-name { display: block; font-weight: 500; font-size: 15px; line-height: 1.3; }
.social-handle { display: block; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }

@media (max-width: 860px) {
  .follow-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .social-grid { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 28px 0; font-size: 14px; color: var(--muted); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.footer-inner p { margin: 0; }
.footer-social { display: flex; gap: 6px; }
.footer-social a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--ink-2); }
.footer-social a:hover { background: var(--paper-2); color: var(--accent); }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }
.noscript { padding: 24px var(--gutter); }

/* ---------- Writing cards: on-site reading ---------- */
.platform-read { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.platform-read:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ---------- Article pages ---------- */
.wrap-narrow { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 var(--gutter); }
.article-head { padding-top: clamp(32px, 6vw, 72px); padding-bottom: clamp(28px, 4vw, 44px); }
.back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 28px; font-size: 14px; color: var(--muted); text-decoration: none; }
/* A 19px arrow like the site's others; the negative margin keeps the link the height of its text. */
.back-link svg { flex-shrink: 0; width: 19px; height: 19px; margin-block: -3px; fill: none; stroke: currentColor; stroke-width: 2; }
.back-link:hover { color: var(--accent); }
/* The same link repeated at the bottom of a page (backLinkAtEnd), first in the footer under its rule. */
.back-link-end { justify-self: start; margin-bottom: 0; }
.article-title { font-size: clamp(38px, 6.4vw, 66px); font-weight: 400; line-height: 1.04; letter-spacing: -0.025em; margin-bottom: 20px; }
.article-dek { font: italic 300 clamp(20px, 2.4vw, 24px)/1.45 var(--serif); color: var(--ink-2); margin-bottom: 24px; }
.article-byline { font-size: 14px; font-weight: 500; margin: 0; }
.article-venue { font: italic 400 15px/1.4 var(--serif); color: var(--muted); margin: 4px 0 0; }
.article-hero { max-width: 1080px; margin: 0 auto clamp(36px, 5vw, 56px); padding: 0 var(--gutter); }
/* Shown whole (never cropped): some lead images have their own lettering. */
.article-hero img { width: auto; max-width: 100%; max-height: min(680px, 80vh); margin: 0 auto; border-radius: var(--radius); }

.prose { font: 400 19px/1.75 var(--serif); font-optical-sizing: auto; color: var(--ink); overflow-wrap: break-word; }
.prose p { margin: 0 0 1.25em; }
.prose h2, .prose h3, .prose h4 { margin: 1.8em 0 0.8em; line-height: 1.25; }
.prose h2 { font-size: clamp(23px, 2.6vw, 28px); }
.prose h3 { font-size: 22px; }
.prose h4 { font-size: 19px; }
.prose a { color: var(--accent); }
.prose blockquote { margin: 1.8em 0; padding-left: 22px; border-left: 2px solid var(--accent); color: var(--ink-2); font-style: italic; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose figure { margin: 2.2em 0; }
.prose figure img { width: 100%; border-radius: 8px; }
.prose figcaption { margin-top: 10px; font: 400 14px/1.5 var(--sans); color: var(--muted); text-align: center; }
.prose hr { border: 0; margin: 2.6em 0; text-align: center; }
.prose hr::after { content: "⁂"; color: var(--accent); font-size: 20px; }
.prose ol, .prose ul { margin: 0 0 1.25em; padding-left: 1.4em; }
.prose ol { list-style: decimal; }
.prose ul { list-style: disc; }
.prose li { margin-bottom: 0.6em; }
.prose .video { position: relative; aspect-ratio: 16 / 9; margin: 2em 0; }
.prose .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; }
/* Buttons in an article (e.g. No Kidding Around's "Support the film"): the site's own buttons
   rather than prose links, with the main one in the accent colour as in the home page's film band. */
.prose .btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.8em 0; }
.prose .btn-row .btn { color: var(--ink); }
.prose .btn-row .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.prose .btn-row .btn-primary:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.prose .sponsor { margin: 2.2em 0; font-family: var(--sans); line-height: 1.4; }
/* <figure class="sized" style="--w: 200px">: the image at most --w wide, centred (e.g. a badge). */
.prose figure.sized img { width: min(var(--w, 100%), 100%); height: auto; margin-inline: auto; }
/* Black-on-clear artwork (a badge or logo) turns light in dark mode. */
:root[data-theme="dark"] .invert-dark { filter: invert(1) brightness(1.2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .invert-dark { filter: invert(1) brightness(1.2); }
}
.prose-poem { font-size: 20px; line-height: 1.8; }

.article-foot { display: grid; gap: 28px; margin-top: 56px; padding: 32px 0 clamp(56px, 8vw, 88px); border-top: 1px solid var(--line); }
.also-on { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.also-on > span { margin-right: 4px; }
.article-subscribe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; background: var(--paper-2); border-radius: var(--radius); }
.article-subscribe p { margin: 0; font: italic 300 19px/1.4 var(--serif); }

.more { background: var(--paper-2); padding: clamp(48px, 7vw, 72px) 0; }
.more-list { margin-bottom: 24px; }
.more-list li { border-bottom: 1px solid var(--line); }
.more-list a { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; text-decoration: none; }
.more-list a:hover .more-title { color: var(--accent); }
.more-title { font: 500 20px/1.3 var(--serif); transition: color .2s; }
.more-meta { flex-shrink: 0; padding-top: 4px; font-size: 13px; color: var(--muted); }

.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-links a { font-size: 14px; color: var(--ink-2); text-decoration: none; }
.footer-links a:hover { color: var(--accent); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}