/* Self-hosted fonts (Latin subsets, SIL Open Font License: fonts/OFL-*.txt).
   Cormorant Garamond and Instrument Sans are variable fonts covering the
   weight ranges given; the normal Cormorant face is preloaded on every page. */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/anton-latin-400.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: 'Cormorant Garamond'; font-style: italic; font-weight: 400 500; font-display: swap; src: url(../fonts/cormorant-garamond-latin-italic.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: 'Cormorant Garamond'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/cormorant-garamond-latin-normal.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: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/instrument-sans-latin-normal.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; }

:root {
  --paper: #F3EEE4;
  --paper-deep: #E6DFD0;
  --ink: #1A1714;
  --ink-soft: #3B352E;
  --ink-muted: #6B6259;
  --rule: #D9D0C0;
  --accent: #7A2A1E;
  --gold: #D9B27C;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --jacket: 'Anton', 'Oswald', Impact, 'Arial Narrow', sans-serif;
  --max: 1296px;
  --gutter: clamp(20px, 5vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; } /* anchors clear the sticky header */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
.is-hidden { display: none !important; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; }
p { margin: 0; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 26px;
  border-radius: 999px; border: 1px solid var(--ink);
  font-size: 15px; font-weight: 500; white-space: nowrap;
  transition: background .15s, color .15s;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.btn-light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-light:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn-ghost { border-color: var(--ink-muted); color: var(--paper); }
.btn-ghost:hover { background: var(--paper); color: var(--ink); }
.link-line { border-bottom: 1px solid currentColor; font-weight: 500; font-size: 15px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -100px; z-index: 100; padding: 12px 18px; background: var(--ink); color: var(--paper); font-size: 15px; font-weight: 500; }
.skip-link:focus { top: 12px; }
.skip-link:hover { color: var(--paper); }

/* Header: a masthead. A 4px oxblood band along the top, his name in the
   display serif over a small-capitals tagline, and a small-capitals menu. It
   stays at the top on scroll and, once the page moves (main.js adds
   .is-scrolled), shrinks, drops the tagline and gains a soft shadow. */
.site-header { --header-h: 108px; --sub-gap: 40px; position: sticky; top: 0; z-index: 50; background: var(--paper); border-top: 4px solid var(--accent); border-bottom: 1px solid var(--rule); transition: box-shadow .25s ease; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: 24px; transition: min-height .25s ease; }
.brand { font-family: var(--serif); font-size: clamp(28px, 2.6vw, 38px); font-weight: 600; letter-spacing: .01em; line-height: 1; }
.site-header .brand { display: flex; flex-direction: column; gap: 8px; }
.brand-name { font-size: clamp(34px, 3.2vw, 46px); transition: font-size .25s ease; }
.brand-tag { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-muted); line-height: 1.2; max-height: 2em; overflow: hidden; transition: opacity .2s ease, max-height .25s ease, margin .25s ease; }
.site-header.is-scrolled { --header-h: 72px; --sub-gap: 22px; box-shadow: 0 8px 24px -14px rgba(26,23,20,.35); }
.site-header.is-scrolled .brand-name { font-size: clamp(26px, 2.2vw, 32px); }
.site-header.is-scrolled .brand-tag { opacity: 0; max-height: 0; margin-top: -8px; }
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header .wrap, .brand-name, .brand-tag { transition: none; }
}
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav > ul { display: flex; align-items: center; gap: 34px; }
.site-nav a { font-size: 15px; font-weight: 500; }
.site-nav > ul > li > a { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.site-nav > ul > li > a[aria-current="page"] { box-shadow: 0 3px 0 var(--accent); }
.nav-toggle { display: none; background: none; border: 1px solid var(--ink); border-radius: 999px; width: 44px; height: 44px; cursor: pointer; color: var(--ink); }

/* Nav dropdown (Books): a paper card hung from the header rule */
.has-sub { position: relative; display: flex; align-items: center; gap: 2px; }
.sub-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: none; background: none; color: var(--ink); cursor: pointer; }
.sub-toggle svg { transition: transform .2s ease; }
.sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.sub-toggle:hover, .has-sub.is-open > .nav-parent, .has-sub.is-open > .sub-toggle { color: var(--accent); }
.sub-menu { position: absolute; top: calc(100% + var(--sub-gap)); left: -22px; z-index: 20; min-width: 220px; padding: 8px 0; background: #FFFDF8; border: 1px solid var(--rule); border-top: 2px solid var(--accent); border-radius: 0 0 4px 4px; box-shadow: 0 24px 40px -18px rgba(26,23,20,.35);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-4px - var(--sub-gap)); height: calc(var(--sub-gap) + 4px); } /* hover bridge across the gap */
.has-sub.is-open .sub-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease; }
.sub-menu a { display: block; padding: 10px 22px; font-size: 15px; }
.sub-menu a:hover, .sub-menu a:focus-visible { background: var(--paper); color: var(--accent); }
.sub-menu a:focus-visible { outline-offset: -2px; }
.sub-menu .sub-all { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--rule); }
.sub-menu .sub-all a { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .sub-menu, .has-sub.is-open .sub-menu, .sub-toggle svg { transition: none; } }

/* Hero: the new novel, over a graded forest video (colour grade is baked into the encode) */
.hero-book {
  position: relative; overflow: hidden; color: #EEF2F0;
  background: #071214;
  border-bottom: 1px solid #1F2C30;
}
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; z-index: 0; }
/* dark gradient behind the copy on the left so the title and buttons stay legible over the footage */
.hero-book::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(90deg, rgba(3,9,11,.88) 0%, rgba(3,9,11,.72) 30%, rgba(3,9,11,.35) 55%, rgba(3,9,11,0) 75%),
    linear-gradient(180deg, rgba(3,9,11,.35) 0%, rgba(3,9,11,0) 25%, rgba(3,9,11,0) 75%, rgba(3,9,11,.45) 100%);
}
/* faint film-grain over the footage */
.hero-book .grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: overlay; z-index: 1;
}
.hero-book .film {
  position: absolute; left: 0; width: 100%; height: clamp(40px, 5vw, 72px); pointer-events: none; z-index: 1;
  filter: blur(.4px);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.hero-book .film-top { top: 0; }
.hero-book .film-bottom { bottom: 0; }
.hero-book .film .sprocket-fill { animation: film-advance 40s linear infinite; }
@keyframes film-advance { from { transform: translateX(0); } to { transform: translateX(-60px); } }

/* dust, scratches and a light leak drawn over the whole hero, behind the copy */
.hero-book .film-artifacts { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.hero-book .film-artifacts .scratches { animation: scratch-drift 6s ease-in-out infinite alternate; }
@keyframes scratch-drift { from { transform: translateY(-4px); } to { transform: translateY(4px); } }

/* faint projector flicker over the whole frame */
.hero-book .flicker {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: rgba(255,255,255,.03);
  animation: projector-flicker 8s steps(1) infinite;
}
@keyframes projector-flicker {
  0% { opacity: 0; } 7% { opacity: .7; } 12% { opacity: .1; } 23% { opacity: 1; }
  28% { opacity: .2; } 41% { opacity: .8; } 50% { opacity: 0; } 66% { opacity: .5; }
  78% { opacity: .1; } 90% { opacity: .6; } 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-book .sprocket-fill, .hero-book .film-artifacts .scratches { animation: none; }
  .hero-book .flicker { animation: none; opacity: 0; }
}
.hero-book .wrap { position: relative; z-index: 2; padding-top: clamp(74px, 8vw, 126px); padding-bottom: clamp(74px, 8vw, 126px); align-items: center; }
.hero-copy { grid-column: span 7; display: flex; flex-direction: column; gap: 22px; }
.hero-book .kicker { color: #E0B4A8; margin-bottom: -10px; }
.hero h1 {
  display: flex; flex-direction: column; align-items: flex-start;
  font-family: var(--jacket); font-weight: 400; text-transform: uppercase;
  line-height: .85; letter-spacing: -.005em; color: #F4F7F6;
  text-shadow: 0 0 28px rgba(220,240,236,.55), 0 0 70px rgba(180,215,210,.35), 0 3px 10px rgba(0,0,0,.5);
}
.hero h1 .title-word { font-size: clamp(88px, 11vw, 168px); }
.hero h1 .title-num { font-size: clamp(119px, 14.85vw, 227px); }
.tagline {
  font-family: var(--jacket); font-weight: 400; text-transform: uppercase;
  font-size: 22px; letter-spacing: .03em; line-height: 1.2;
  color: #E4574A; text-shadow: 0 1px 10px rgba(0,0,0,.6);
}
.hero-book .lede { font-size: clamp(17px, 1.3vw, 19px); color: #D6DFDC; max-width: 36em; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
.hero-book .btn { border-color: rgba(238,242,240,.45); color: #EEF2F0; }
.hero-book .btn:hover { background: #EEF2F0; color: var(--ink); }
.hero-book .btn.btn-solid { background: #F3EEE4; border-color: #F3EEE4; color: var(--ink); }
.hero-book .btn.btn-solid:hover { background: #D46A5A; border-color: #D46A5A; color: #F6F8F7; }
.hero-book .link-line { color: #EEF2F0; }
.hero-book .link-line:hover { color: #E0B4A8; }
.hero-cover { grid-column: 9 / span 4; margin: 0; display: flex; justify-content: flex-end; }
.hero-cover img { width: 100%; max-width: 420px; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px; box-shadow: 0 50px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06); }

/* Author strip */
.author-strip { padding: clamp(56px, 6vw, 88px) 0; }
.author-figure { grid-column: span 3; margin: 0; }
.author-figure picture, .about-portrait picture { display: block; }
.author-figure img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.author-copy { grid-column: 5 / span 7; align-self: center; display: flex; flex-direction: column; gap: 20px; }
.author-copy h2 { font-size: clamp(32px, 3.2vw, 44px); line-height: 1.05; }
.author-copy p { font-size: 18px; color: var(--ink-soft); max-width: 34em; }
.pull { margin: 4px 0 0; padding-left: 20px; border-left: 2px solid var(--accent); }
.pull blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.3; }
.pull figcaption, .review figcaption { margin-top: 8px; font-size: 13px; color: var(--ink-muted); }

/* Critical acclaim band: one lead pull quote over a row of short excerpts, dark to carry the hero's mood into the next section */
.acclaim { background: #0B1210; border-bottom: 1px solid #1F2C30; padding: 96px 0; overflow: hidden; } /* clips the lead quote glow, which reaches past the page edge */
.acclaim .kicker { color: #E0B4A8; margin: 0 0 32px; }

.acclaim-lead { position: relative; margin: 0 0 56px; padding: 40px 0; text-align: center; border-top: 1px solid rgba(238,242,240,.18); border-bottom: 1px solid rgba(238,242,240,.18); }
.acclaim-lead::before {
  content: ""; position: absolute; inset: -20% -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(45% 65% at 50% 50%, rgba(228,87,74,.08), transparent 70%);
}
.acclaim-lead blockquote { margin: 0 auto; max-width: 44em; font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.4; color: #F6F8F7; }
.acclaim-lead figcaption { margin-top: 20px; font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #E0B4A8; }

.acclaim-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 40px; }
.acclaim-row li { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid rgba(238,242,240,.18); }
.acclaim-row blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.45; color: #EEF2F0; }
.acclaim-name { margin: 0; font-size: 14px; font-weight: 700; color: #F3EEE4; }
.acclaim-role { margin: 0; font-size: 13px; color: #9AAEAC; }
.acclaim-more { margin: 40px 0 0; text-align: right; }
.acclaim .link-line { color: #EEF2F0; }
.acclaim .link-line:hover { color: #E0B4A8; }
@media (max-width: 1024px) { .acclaim-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .acclaim-row { grid-template-columns: 1fr; } .acclaim-more { text-align: left; } }

/* Press band: equal logo slots */
.press { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.press .wrap { display: flex; align-items: center; gap: 40px; min-height: 112px; padding-top: 24px; padding-bottom: 24px; }
.press-label { font-size: 13px; color: var(--ink-muted); white-space: nowrap; }
.press-logos { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 24px; align-items: center; }
.press-logos li { display: flex; justify-content: center; }
.press-logos img { width: 100%; max-width: 160px; height: 48px; object-fit: contain; filter: grayscale(1); opacity: .75; transition: opacity .15s, filter .15s; }
.press-logos img:hover { filter: none; opacity: 1; }
@media (max-width: 1024px) { .press .wrap { flex-direction: column; align-items: flex-start; gap: 20px; } .press-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; } }
@media (max-width: 720px) { .press-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Featured */
.featured {
  color: var(--paper); padding: clamp(64px, 7vw, 96px) 0; position: relative; overflow: hidden;
  background:
    radial-gradient(70% 80% at 85% 20%, rgba(122,42,30,.55) 0%, transparent 60%),
    radial-gradient(60% 70% at 10% 90%, rgba(217,178,124,.16) 0%, transparent 60%),
    linear-gradient(160deg, #2A1F1C 0%, #1A1714 45%, #100E0C 100%);
}
.featured-cover { grid-column: span 4; margin: 0; display: flex; justify-content: center; align-items: center; }
.featured-cover img { width: 340px; max-width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px; box-shadow: 24px 24px 0 0 #2B2521; }
.featured-copy { grid-column: 6 / span 7; display: flex; flex-direction: column; gap: 26px; align-self: center; }
.featured .kicker { color: var(--gold); }
.featured h2 { font-size: clamp(40px, 4.2vw, 60px); line-height: 1.02; }
.featured p { font-size: 18px; line-height: 1.6; color: #CFC6B8; max-width: 36em; }
.review { margin: 0; }
.review blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.35; }
.review figcaption { color: #9E9385; }
.featured-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Library */
.library { padding: clamp(64px, 7vw, 96px) 0; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(36px, 3.9vw, 56px); line-height: 1.05; margin-top: 10px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filters button {
  min-height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer;
  border: 1px solid #B9AE9B; background: transparent; color: var(--ink);
  font: 500 14px var(--sans);
}
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.shelf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
.shelf li.is-hidden { display: none; }
.book { display: flex; flex-direction: column; gap: 14px; }
.book img {
  width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 2px;
  box-shadow:
    0 1px 2px rgba(26,23,20,.12),
    0 6px 12px -2px rgba(26,23,20,.18),
    0 24px 40px -12px rgba(26,23,20,.35),
    inset 1px 0 0 rgba(255,255,255,.25);
  transition: transform .25s ease, box-shadow .25s ease;
}
.book:hover img {
  transform: translateY(-6px);
  box-shadow:
    0 2px 3px rgba(26,23,20,.12),
    0 10px 18px -2px rgba(26,23,20,.22),
    0 36px 56px -14px rgba(26,23,20,.4),
    inset 1px 0 0 rgba(255,255,255,.25);
}
@media (prefers-reduced-motion: reduce) { .book:hover img { transform: none; } }
.book h3 { font-size: 22px; font-weight: 600; line-height: 1.15; }
.book p { font-size: 13px; color: var(--ink-muted); }
.library-more { display: flex; justify-content: center; margin-top: 48px; }

/* Newsletter */
.newsletter { background: var(--paper-deep); padding: clamp(64px, 7vw, 88px) 0; align-items: center; row-gap: 32px; }
.newsletter-copy { grid-column: span 6; }
.newsletter h2 { font-size: clamp(34px, 3.4vw, 48px); line-height: 1.05; margin-bottom: 14px; }
.newsletter p { color: var(--ink-soft); max-width: 30em; }
.newsletter form { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 12px; }
.newsletter label { font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.newsletter input {
  flex: 1 1 220px; min-height: 52px; padding: 0 20px;
  border: 1px solid var(--ink); border-radius: 999px; background: #FFFDF8;
  font: 16px var(--sans); color: var(--ink);
}
.newsletter button { min-height: 52px; padding: 0 28px; border: none; border-radius: 999px; background: var(--ink); color: var(--paper); font: 500 15px var(--sans); cursor: pointer; }
.newsletter button:hover { background: var(--accent); }
.form-note { font-size: 13px; color: var(--ink-muted); }

/* Footer */
.site-footer { background: var(--ink); color: #CFC6B8; padding: 64px 0 40px; }
.site-footer .grid { row-gap: 32px; }
.footer-brand { grid-column: span 5; }
.footer-brand .brand { color: var(--paper); display: block; margin-bottom: 12px; }
.footer-brand p { font-size: 14px; max-width: 26em; }
.site-footer nav { grid-column: span 2; }
.site-footer nav:first-of-type { grid-column: 7 / span 2; }
.site-footer nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.site-footer nav a:hover { color: var(--paper); }
.site-footer nav a { display: inline-flex; align-items: center; gap: 8px; }
.site-footer nav .icon { flex: none; }
.footer-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 40px; padding-top: 24px; border-top: 1px solid #3B352E; font-size: 12px; color: #8F8577; }

/* Inner pages
   main.page is a grid: children sit in a ~72ch reading column centred in the
   page, and so does the page header (label, h1, meta and its rule). .wide spans
   the full content width (book layout, shelves, index listings, the About grid;
   a .page-header.wide lines up with them), .full runs edge to edge. The two side
   tracks share the space left over within the content width equally, so the
   column stays centred and shrinks to the gutters on small screens. */
.page {
  --measure: 72ch;
  --side: calc((var(--max) - 2 * var(--gutter) - var(--measure)) / 2);
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start] minmax(0, var(--side))
    [content-start] min(var(--measure), 100% - 2 * var(--gutter)) [content-end]
    minmax(0, var(--side)) [wide-end]
    minmax(var(--gutter), 1fr) [full-end];
  align-content: start;
  padding-bottom: clamp(64px, 7vw, 104px);
}
.page > * { grid-column: content; min-width: 0; }
.page > .wide { grid-column: wide; }
.page > .full { grid-column: full; }

.page-header { padding: clamp(48px, 6vw, 88px) 0 clamp(32px, 4vw, 48px); margin-bottom: clamp(36px, 4.5vw, 60px); border-bottom: 1px solid var(--rule); }
.page-header .kicker, .book-info .kicker { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.page-header h1 { font-size: clamp(48px, 5.6vw, 84px); line-height: 1; margin-top: 14px; max-width: 16em; }
.standfirst { font-family: var(--serif); font-style: italic; font-size: clamp(23px, 2vw, 28px); line-height: 1.35; color: var(--ink-soft); max-width: 34em; margin-top: 20px; }

/* Prose rhythm */
.page > * + * { margin-top: 1.25em; }
.page > .page-header + * { margin-top: 0; }
.page h2 { font-size: clamp(34px, 3.4vw, 46px); line-height: 1.08; }
.page h3 { font-size: clamp(25px, 2.2vw, 30px); font-weight: 600; line-height: 1.2; }
.page > * + h2 { margin-top: 2em; }
.page > * + h3 { margin-top: 1.6em; }
.page > h2 + *, .page > h3 + * { margin-top: .6em; }
.page > p, .page > ul, .page > ol { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.page > ul:not([class]), .page > ol:not([class]) { padding-left: 1.25em; margin-bottom: 0; }
.page > ul:not([class]) li + li, .page > ol:not([class]) li + li { margin-top: .4em; }
.page > ul:not([class]) li::marker, .page > ol:not([class]) li::marker { color: var(--accent); }
.page p a:not([class]), .page li a:not([class]), .page dd a:not([class]) { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(122,42,30,.45); text-underline-offset: 3px; }
.page p a:not([class]):hover, .page li a:not([class]):hover, .page dd a:not([class]):hover { color: var(--accent); text-decoration-color: currentColor; }
.page hr { width: 100%; border: none; border-top: 1px solid var(--rule); margin-bottom: 0; }
.page > * + hr, .page > hr + * { margin-top: 2.5em; }
/* In a piece of writing or a post, <hr> is a section break: a short centred rule */
.page > hr { width: 64px; justify-self: center; border-top-color: var(--ink-muted); }

/* Blockquotes and reviews */
.page blockquote { margin-inline: 0; margin-bottom: 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--accent); font-family: var(--serif); font-style: italic; font-size: clamp(23px, 2vw, 27px); line-height: 1.38; color: var(--ink); }
.page blockquote p + p { margin-top: .8em; }
.page blockquote footer { margin-top: 12px; font-family: var(--sans); font-style: normal; font-size: 13px; color: var(--ink-muted); }
.page blockquote footer::before { content: "\2014\00a0"; }
.page blockquote cite { font-style: italic; }
.page > * + blockquote, .page > blockquote + * { margin-top: 2em; }

/* Figures */
.page figure { margin-inline: 0; margin-bottom: 0; }
.page figure img { width: 100%; height: auto; border-radius: 3px; box-shadow: 0 24px 40px -18px rgba(26,23,20,.35); }
.page figcaption { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--ink-muted); }
.page > * + figure, .page > figure + * { margin-top: 2em; }

/* Book page: cover left, details right. Give the .book-detail block class="book-detail wide". */
.book-detail { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 80px); align-items: start; }
.page > .book-detail:first-child { margin-top: clamp(40px, 5vw, 72px); }
.book-cover { position: sticky; top: 104px; margin: 0; } /* clears the sticky header */
.book-cover img { width: 100%; height: auto; border-radius: 2px; box-shadow: 0 1px 2px rgba(26,23,20,.12), 0 6px 12px -2px rgba(26,23,20,.18), 0 30px 44px -16px rgba(26,23,20,.4); }
.book-info { max-width: var(--measure); }
.book-info > * + * { margin-top: 1.25em; }
.book-info > * + h2, .book-info > * + blockquote, .book-info > * + .book-facts, .book-info > * + .book-nav { margin-top: 2em; }
.book-info .kicker a { border-bottom: 1px solid currentColor; }
.book-info h1 { font-size: clamp(44px, 5vw, 72px); line-height: 1; }
.book-info > .kicker + h1 { margin-top: 12px; }
.book-info > .book-subtitle { margin-top: 12px; font-family: var(--serif); font-style: italic; font-size: clamp(23px, 2vw, 28px); line-height: 1.35; color: var(--ink-soft); }
.book-description > * + * { margin-top: 1.1em; }
.book-description p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.page > .book-detail + .book-detail { margin-top: clamp(64px, 7vw, 104px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--rule); }

/* Book facts: publisher, date, ISBN, buy links */
.book-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0; border-top: 1px solid var(--ink); }
.book-facts dt, .book-facts dd { padding: 13px 0; border-bottom: 1px solid var(--rule); }
.book-facts dt { padding-right: 32px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); line-height: 2.1; }
.book-facts dd { margin: 0; font-size: 16px; }
.buy-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.buy-links a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 999px; font-size: 13px; font-weight: 500; }
.buy-links a:hover { background: var(--ink); color: var(--paper); }
.book-cover .buy { margin-top: 28px; }
.buy-label { margin-bottom: 12px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }

/* Reviews on a book page */
.page > .book-reviews { margin-top: clamp(56px, 6vw, 88px); }
.book-reviews > * + * { margin-top: 2em; }
.book-reviews > h2 + * { margin-top: 1em; }
.page > .book-listen { margin-top: clamp(56px, 6vw, 88px); }
.book-listen h2 { margin-bottom: 20px; }
.page > .book-end { margin-top: clamp(56px, 6vw, 88px); list-style: none; padding: 0; }
.book-end li + li { margin-top: 12px; }
.book-reviews .accolade { font-size: 16px; line-height: 1.6; color: var(--ink-muted); }
.page .book-reviews blockquote { font-size: clamp(20px, 1.7vw, 23px); }

/* Shelves on inner pages: books/ index and "More fiction" under a book */
.page > .shelf-group + .shelf-group { margin-top: clamp(56px, 6vw, 88px); }
.page > .related { margin-top: clamp(64px, 7vw, 104px); padding-top: 40px; border-top: 1px solid var(--rule); }
.shelf-group h2, .related h2 { margin-bottom: 32px; }
.page .book h3 { font-size: 21px; }

/* Previous / next book: <nav class="book-nav"><a class="prev"><span class="label">Previous</span>Title</a> ... */
.book-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-family: var(--serif); font-size: 20px; font-weight: 500; }
.book-nav .label { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); margin-right: 8px; }
.book-nav .prev .label::before { content: "\2190\00a0"; }
.book-nav .next { margin-left: auto; }
.book-nav .next .label::after { content: "\00a0\2192"; }
.page > * + .book-nav, .page > .book-nav + * { margin-top: clamp(48px, 5vw, 72px); }

/* Films: every image (index cards and each film's page) sits in the same
   charcoal "film frame" at a fixed 4:3, with a thin inner border like a
   projector gate. Images are contained and centred, never cropped, and never
   drawn larger than 1.5x their own size (--max-w / --max-h, set per image). */
.film-frame { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: 18px; border-radius: 6px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #2E2A26 0%, #1B1917 62%, #121110 100%);
  box-shadow: 0 1px 2px rgba(26,23,20,.18), 0 10px 20px -6px rgba(26,23,20,.35), 0 28px 44px -18px rgba(26,23,20,.45); transition: transform .25s ease; }
.film-frame::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(236,228,214,.14); border-radius: 4px; pointer-events: none; }
.film-frame img { display: block; width: min(100%, var(--max-w, 100%)); height: min(100%, var(--max-h, 100%)); object-fit: contain; }
.book.film-card .film-frame img, .page .film-cover .film-frame img { width: min(100%, var(--max-w, 100%)); height: min(100%, var(--max-h, 100%)); aspect-ratio: auto; box-shadow: none; border-radius: 0; transition: none; } /* beats .page figure img */
.book.film-card:hover img { transform: none; box-shadow: none; }
.book.film-card:hover .film-frame { transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) { .book.film-card:hover .film-frame { transform: none; } }
.film-credit { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--ink-muted); }
.film-credit a { text-decoration: underline; text-underline-offset: 2px; }
.book.film-card .film-card-credit { margin-top: 2px; font-size: 11px; }
/* A film with no image: its title set in the frame */
.film-frame-title { flex-direction: column; gap: 8px; text-align: center; color: #ECE4D6; font-family: var(--serif); font-size: clamp(21px, 2vw, 26px); font-weight: 500; line-height: 1.15; }
.film-frame-title small { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #B7AC9B; }
.film-cover .film-frame-title { font-size: clamp(28px, 3vw, 38px); }

/* Links from a film page to other sites (the DVD, Vimeo On Demand, the BBC) */
.book-info > * + .film-links { margin-top: 1.6em; }
.film-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.film-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 999px; font-size: 14px; font-weight: 500; }
.film-links a:hover { background: var(--ink); color: var(--paper); }

/* Click-to-load players (js/main.js): a still and a play button until pressed.
   Each keeps the shape of its film (--ratio, from the still). */
.page > .film-watch { margin-top: clamp(56px, 6vw, 88px); }
.film-watch h2 { margin-bottom: 24px; }
.video-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 32px; }
.video-list:has(> li:only-child) { grid-template-columns: minmax(0, 720px); }
.video-embed { margin: 0; }
.video-embed-link, .video-embed iframe, .video-embed video { position: relative; display: block; width: 100%; aspect-ratio: var(--ratio, 4 / 3); border: 0; border-radius: 4px; overflow: hidden; background: #121110; }
.page .video-embed-link img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; box-shadow: none; opacity: .88; transition: opacity .2s ease; }
.video-embed-link:hover img { opacity: 1; }
.video-embed video { height: auto; }
.video-embed-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 15px; font-weight: 600; }
.video-embed-link:hover .video-embed-play { background: var(--accent); color: var(--paper); }
.page .video-embed figcaption { font-size: 14px; color: var(--ink-soft); }
.page > .film-watch .video-embed-note { margin-top: 20px; font-size: 14px; color: var(--ink-muted); }
.video-embed-note a { text-decoration: underline; text-underline-offset: 2px; }

/* Writing index: three groups (essays, reviews, travel), filterable */
.writing-filters { margin-bottom: clamp(32px, 4vw, 48px); }
.page > .writing-group + .writing-group { margin-top: clamp(56px, 6vw, 88px); }
.writing-group > h2 { margin-bottom: 8px; }
.page .writing-undated { font-size: clamp(21px, 1.8vw, 25px); font-style: italic; font-weight: 500; color: var(--ink-muted); margin: clamp(40px, 4vw, 56px) 0 12px; }
.writing-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 64px); }
.writing-list li { border-bottom: 1px solid var(--rule); }
.writing-list a { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 22px 0; }
.writing-list a:hover h3 { color: var(--accent); }
.writing-meta { font-size: 13px; color: var(--ink-muted); }
.writing-meta .ext { margin-left: 6px; font-weight: 600; color: var(--accent); }
.page .writing-list h3 { font-size: clamp(23px, 2vw, 27px); font-weight: 600; line-height: 1.2; }
.writing-excerpt { font-size: 16px; line-height: 1.6; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* A piece of writing: meta line under the title, jacket of the book introduced beside the opening */
.page-header .writing-meta { margin-top: 18px; font-size: 14px; }
.writing-context { font-family: var(--serif); font-style: italic; font-size: clamp(21px, 1.8vw, 25px); color: var(--ink-soft); margin-top: 14px; }
.page-header.has-jacket { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.writing-jacket { flex: none; width: 130px; margin: 0; }
.writing-jacket img { width: 100%; height: auto; border-radius: 2px; box-shadow: 0 1px 2px rgba(26,23,20,.12), 0 16px 28px -12px rgba(26,23,20,.4); }
.page > .writing-back, .page > .page-back { margin-top: clamp(48px, 5vw, 72px); padding-top: 24px; border-top: 1px solid var(--rule); }
.page > .writing-related { margin-top: 2.5em; font-size: 16px; }
.page > .writing-related + .writing-related { margin-top: .6em; }

/* Q&A with the author (books/<slug>-q-and-a.html); the book page links to it */
.page .qa-question { font-size: clamp(24px, 2.1vw, 29px); font-weight: 600; line-height: 1.25; }
.book-info > .book-qa { margin-top: 1.6em; }

/* About */
.about-bio { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 80px); align-items: start; }
.about-portrait { margin: 0; }
.about-portrait img { width: 100%; height: auto; border-radius: 4px; }
.about-text > * + * { margin-top: 1.25em; }
.about-text p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.page > .praise { margin-top: clamp(56px, 6vw, 88px); }
.praise > * + * { margin-top: 2em; }
.praise > h2 + * { margin-top: 1em; }

/* Contact: the literary agent */
.page > .contact-agent { line-height: 1.6; }
.contact-agent a { text-decoration: underline; text-decoration-color: rgba(122,42,30,.45); text-underline-offset: 3px; }

/* Blog: every post in full on blog/, newest first, and a page for each */
.post-date { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.page-header .post-date { margin-top: 18px; }
.page > .post + .post { margin-top: clamp(48px, 5vw, 72px); padding-top: clamp(40px, 5vw, 56px); border-top: 1px solid var(--rule); }
.post h2 { margin-top: 8px; font-size: clamp(30px, 3vw, 40px); line-height: 1.1; }
.post h2 a:hover { color: var(--accent); }
.post-body { margin-top: 18px; }
.post-body > * + * { margin-top: 1.1em; }
.post-body p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
/* A post's picture (the "Picture" field in Pages CMS) and pictures put into the text */
.post > .post-figure { margin: 18px 0 0; }
.post-body img, .page > img, .page > p img { height: auto; border-radius: 3px; }
.page > img { justify-self: start; }

/* Contact form (contact.php) */
.contact-form { display: grid; gap: 22px; }
.field label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; }
.field .req { font-weight: 400; color: var(--ink-muted); }
.field input, .field textarea { display: block; width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid #B9AE9B; border-radius: 4px; background: #FFFDF8; font: 17px/1.5 var(--sans); color: var(--ink); }
.field textarea { min-height: 200px; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus, .field textarea:focus { outline: 3px solid rgba(122,42,30,.3); outline-offset: 0; border-color: var(--accent); }
.field [aria-invalid="true"] { border-color: var(--accent); border-width: 2px; }
.field-error { margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--accent); }
.field-error::before { content: "! "; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
button.btn { font-family: var(--sans); cursor: pointer; }
button.btn:disabled { opacity: .6; cursor: progress; }
.contact-form .form-note { font-size: 14px; color: var(--ink-muted); }
.contact-form .form-note a { text-decoration: underline; }
.form-message { display: none; padding: 16px 20px; border: 1px solid var(--rule); border-left-width: 4px; border-radius: 4px; background: #FFFDF8; font-size: 17px; }
.form-message.ok { border-left-color: #3F6B4F; }
.form-message.error { border-left-color: var(--accent); }
.form-message:target, .form-message.is-shown { display: block; }
.js-managed .form-message:target:not(.is-shown) { display: none; }
.form-message:focus { outline: 2px solid var(--accent); outline-offset: 3px; }
.page > .form-status + .contact-form { margin-top: 24px; }

/* Responsive */
@media (min-width: 721px) and (max-width: 1100px) {
  .site-nav > ul { gap: 20px; }
  .site-nav > ul > li > a { letter-spacing: .1em; }
}
@media (max-width: 1024px) {
  .shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-copy, .hero-cover, .author-copy { grid-column: span 12; }
  .hero-cover { justify-content: flex-start; margin-top: 40px; }
  .hero-book::before { background: linear-gradient(180deg, rgba(3,9,11,.75) 0%, rgba(3,9,11,.6) 50%, rgba(3,9,11,.8) 100%); }
  .author-figure { grid-column: span 12; max-width: 320px; margin-bottom: 32px; }
  .featured-cover { grid-column: span 12; margin-bottom: 40px; }
  .featured-cover img { box-shadow: 16px 16px 0 0 #2B2521; }
  .featured-copy { grid-column: span 12; }
  .book-detail, .about-bio, .writing-list { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .writing-list { row-gap: 0; }
  .about-portrait { max-width: 320px; }
  .book-cover { position: static; max-width: 320px; }
  .newsletter-copy, .newsletter form, .footer-brand { grid-column: span 12; }
  .site-footer nav, .site-footer nav:first-of-type { grid-column: span 4; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--rule); padding: 16px var(--gutter) 24px; z-index: 10; }
  .site-nav.is-open { display: block; }
  .site-nav > ul { flex-direction: column; align-items: stretch; gap: 18px; }
  .has-sub { flex-wrap: wrap; justify-content: space-between; }
  .sub-toggle { width: 44px; height: 44px; margin: -10px -10px -10px 0; }
  .sub-menu { position: static; flex-basis: 100%; min-width: 0; margin-top: 10px; padding: 4px 0 4px 16px; background: none; border: none; border-left: 2px solid var(--accent); border-radius: 0; box-shadow: none;
    display: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .sub-menu::before { content: none; }
  .has-sub.is-open .sub-menu { display: block; }
  .sub-menu a { padding: 8px 0; font-size: 16px; }
  .sub-menu a:hover, .sub-menu a:focus-visible { background: none; }
  .sub-menu .sub-all { margin-top: 4px; padding-top: 4px; border-top: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .header-cta { display: none; }
  .site-header, .site-header.is-scrolled { --header-h: 68px; }
  .brand-tag { display: none; }
  .brand-name, .site-header.is-scrolled .brand-name { font-size: 26px; }
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .page > p, .page > ul, .page > ol, .book-description p, .post-body p { font-size: 17px; }
  .book-facts { grid-template-columns: 1fr; }
  .writing-jacket { width: 88px; }
  .film-card .film-frame-title { padding: 12px; font-size: 16px; }
  .film-card .film-frame-title small { font-size: 9px; letter-spacing: .1em; }
  .page-header.has-jacket { gap: 20px; }
  .book-facts dt { padding-bottom: 0; border-bottom: none; }
  .site-footer nav, .site-footer nav:first-of-type { grid-column: span 6; }
}