/* ==========================================================================
   TIM WATERMAN - WordPress build stylesheet
   Recoded from Jason Pidd's design (Figma "Tim-Waterman-Development-4" +
   prototype incunabula.xyz/tim/development). Normalised onto the Presa stack (Mode B, enqueued site-wide by Presa Child -9) +
   GenerateBlocks: every class here is meant to be typed into a GB block's
   "Additional CSS classes" field, or to land in the theme's global CSS.

   Layers:
     1. TOKENS        - design values (Jason's, exact) + named spacing scale
     2. BASE          - reset-lite and element defaults
     3. TYPE          - the three-voice type system
     4. LAYOUT        - the 8-col grid + span utilities
     5. COMPONENTS    - header, cards, slider, rule-link, lists
     6. SECTIONS      - homepage rhythm
     7. RESPONSIVE    - stack rules (proposed; desktop design only)

   Naming: tw- prefix, BEM-ish. Nothing relies on markup order or inline
   styles; any section can be toggled off (ACF) without breaking rhythm.
   ========================================================================== */


/* ==========================================================================
   1 - TOKENS
   Colours/type/grid are Jason's exact values (design-tokens.md).
   The spacing scale is NEW: the prototype's one-off values (4rem, 8rem,
   10rem, 16rem...) are consolidated onto a named scale so vertical rhythm
   is consistent and editable in one place. Mirrored in theme-tokens.json.
   ========================================================================== */
:root {
  /* - colour - */
  --tw-worange:   #cb2f00;
  --tw-sitegray:  #494949;
  --tw-ink:       #333333;
  --tw-black:     #000000;
  --tw-paper:     #ffffff;
  --tw-pink:      #CA8A8B;   /* colour-block option */
  --tw-olive:     #4C4B16;   /* caption colour */
  --tw-carbon:    #1a1a1a;   /* dark carousel card */

  /* - type - */
  --tw-sans:    'Figtree', sans-serif;
  --tw-serif:   'Bitter', serif;
  --tw-display: 'onlysans', 'Figtree', sans-serif;

  /* - grid - */
  --tw-cols: 8;
  --tw-gap: 16px;
  --tw-header-row: 32px;
  --tw-page-pad: 2rem;
  --tw-header-pad: 52px;

  /* - spacing scale (the fix for "spacing a bit off in places") -
     One octave-ish ladder; sections use only these steps. */
  --tw-space-2xs: 0.5rem;
  --tw-space-xs:  1rem;
  --tw-space-s:   2rem;
  --tw-space-m:   4rem;
  --tw-space-l:   8rem;    /* standard gap between homepage sections   */
  --tw-space-xl:  12rem;   /* section-label drop (Posts/Books/Essays)  */
  --tw-space-2xl: 16rem;   /* one-off: air above "Current Projects"    */

  /* - signature air (kept as viewport units, they're the design) - */
  --tw-quote-air: 50vh;    /* above the intro pull quote  */
  --tw-spacer:    30vh;    /* .tw-spacer breathing block  */

  /* - motion - */
  --tw-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --tw-fade: 0.32s;

  /* - components - */
  --tw-card-img-h: 300px;
  --tw-hero-img-h: 600px;
  --tw-cta-idle:  rgba(255, 255, 255, 0.12);
  --tw-cta-hover: rgba(255, 255, 255, 0.92);
}


/* ==========================================================================
   2 - BASE
   In WP: GeneratePress handles most of this; keep only what differs.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 var(--tw-page-pad);
  font-family: var(--tw-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--tw-ink);
  background: var(--tw-paper);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; }


/* ==========================================================================
   3 - TYPE - three voices, used exactly as Jason ruled:
   Bitter = headings + serif prose - Figtree = body/workhorse -
   Only Sans = identity accents only (brand, section labels, post titles,
   essay links). House rule: never Only Sans directly against Figtree
   semibold - differentiate with colour (worange) instead.

   EDITORIAL VOICE RULE (7 Aug, resolving the frames' inconsistency):
   Figtree carries LEDES and interface (the indented .tw-intro, excerpts,
   captions, filters). Bitter carries SUSTAINED READING (article bodies,
   book blurbs, long-form). Never two body voices doing the same job on
   one page - the Book frame had its primary blurb in Figtree and its
   secondary in Bitter; corrected to serif-primary.

   SECTION LABEL RULE (consolidating the frames' two systems): labels are
   always TOP-ALIGNED with their section. Homepage section labels sit at
   col 3 (as framed); page-level rail labels sit at col 1. No vertical
   centring against long sections.
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--tw-serif);
  font-weight: 300;
  line-height: 1;
  margin: 0;
  color: var(--tw-ink);
}
h1 { font-size: 2.75rem; }
h2 { font-size: 2.1rem; }   /* Jason 9 Aug */
h3 { font-size: 1.4rem; }
h4 { font-size: 1.125rem; }

p { font-family: var(--tw-sans); font-size: 1.1rem; max-width: 60ch; margin: 0; }

/* - display voice - */
.tw-display {
  font-family: var(--tw-display);
  font-weight: 500;
  color: var(--tw-worange);
}

/* - section label (Current Projects, Ongoing..., Posts, Books, Essays) - */
.tw-label {
  font-family: var(--tw-display);
  font-weight: 500;
  font-size: 2.1rem;   /* Jason 9 Aug: balanced with brand */
  color: var(--tw-worange);
  line-height: 1;
  margin: 0;
}

/* - pull quote - */
.tw-quote {
  font-family: var(--tw-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.2;
  color: var(--tw-worange);
  margin: 0;
}

/* - eyebrow (category / date line) - */
.tw-eyebrow {
  font-size: 1rem;   /* Jason 9 Aug: was too small in his original design */
  color: var(--tw-sitegray);
  margin: 0;
}

/* - card titles - */
.tw-title-lg {
  font-family: var(--tw-serif);
  font-weight: 400;
  font-size: 2.1rem;    /* Jason 9 Aug */
  line-height: 1.1;     /* Jason 9 Aug */
  color: var(--tw-sitegray);
  margin-top: var(--tw-space-2xs);
  text-decoration: none;
  transition: color 0.5s;
}
a.tw-title-lg:hover, a:hover .tw-title-lg {
  color: var(--tw-worange);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.tw-title-sm {
  font-family: var(--tw-serif);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--tw-sitegray);
  margin-top: var(--tw-space-2xs);
}

/* - SPINE RULE (Jason 9 Aug): on About, the image's left edge, the intro's
   first-line indent, and the long-form paragraph's left edge all sit on
   ONE vertical line (col 4); the paragraph's right edge matches the
   intro's (col 8 line). .tw-intro--spine computes the indent for an
   intro spanning cols 2-7 so the first line starts exactly at col 4. - */
.tw-intro--spine {
  text-indent: calc(((100% - 5 * var(--tw-gap)) / 6) * 2 + 2 * var(--tw-gap));
}

/* - indented intro paragraph (bio) - */
.tw-intro {
  font-family: var(--tw-sans);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--tw-sitegray);
  text-indent: calc((100% - 3 * var(--tw-gap)) / 2.8);
  margin: 0;
}
.tw-intro .tw-name {
  font-family: var(--tw-display);
  font-weight: 500;
  color: var(--tw-worange);
}

/* - serif long-form - */
.tw-serifpara {
  font-family: var(--tw-serif);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
  color: var(--tw-sitegray);
  margin: 0;
}


/* ==========================================================================
   4 - LAYOUT - the 8-column grid
   GB: each section is a Container block; inside it a Grid block with a
   custom class .tw-grid; cells get span utilities in "Additional CSS
   classes". The 2-3-1 card pattern = span-2 / span-4 / span-2.
   ========================================================================== */
.tw-grid {
  display: grid;
  grid-template-columns: repeat(var(--tw-cols), 1fr);
  gap: var(--tw-gap);
}
.tw-grid--airy { row-gap: var(--tw-space-l); }

/* span utilities: tw-col-{start}-{span} */
.tw-col-1-2 { grid-column: 1 / span 2; }
.tw-col-1-4 { grid-column: 1 / span 4; }
.tw-col-1-6 { grid-column: 1 / span 6; }
.tw-col-1-8 { grid-column: 1 / -1; }
.tw-col-2-3 { grid-column: 2 / span 3; }
.tw-col-2-4 { grid-column: 2 / span 4; }
.tw-col-2-5 { grid-column: 2 / span 5; }
.tw-col-3-3 { grid-column: 3 / span 3; }
.tw-col-6-2 { grid-column: 6 / span 2; }
.tw-col-2-6 { grid-column: 2 / span 6; }
.tw-col-3-2 { grid-column: 3 / span 2; }
.tw-col-3-4 { grid-column: 3 / span 4; }
.tw-col-4-2 { grid-column: 4 / span 2; }
.tw-col-4-4 { grid-column: 4 / span 4; }
.tw-col-5-2 { grid-column: 5 / span 2; }
.tw-col-5-3 { grid-column: 5 / span 3; }
.tw-col-7-2 { grid-column: 7 / span 2; }

/* generic cell */
.tw-cell { display: flex; flex-direction: column; width: 100%; }
.tw-cell--end { justify-content: flex-end; }

/* breathing block between homepage chapters */
.tw-spacer { width: 100%; height: var(--tw-spacer); }


/* ==========================================================================
   5 - COMPONENTS
   ========================================================================== */

/* -- Header -------------------------------------------------------------
   WP: GP header disabled; built as a GB header block (sticky, custom).
   Two 32px rows on the 8-col grid; JS toggles .is-sticky (see main.js). */
.tw-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: calc(14px + var(--tw-header-row) * 1.2);
  overflow: hidden;
  padding-bottom: 120px;   /* clip runway for the slide-away rows */
}
.tw-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
}
.tw-header__grid {
  position: absolute;
  top: 14px;
  left: 0; right: 0;
  display: grid;
  grid-template-columns: repeat(var(--tw-cols), 1fr);
  grid-template-rows: var(--tw-header-row) var(--tw-header-row);
  gap: var(--tw-gap);
  padding: 0 var(--tw-header-pad);
}
.tw-brand {
  grid-column: 1 / 3;
  grid-row: 1 / span 2;
  align-self: baseline;
  font-family: var(--tw-display);
  font-size: 2.1rem;   /* Jason 9 Aug: balanced with side-titles */
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--tw-worange);
  text-decoration: none;
}
.tw-nav { display: contents; }
.tw-nav__link {
  font-family: var(--tw-sans);
  font-size: 1.1rem;   /* Jason 9 Aug */
  letter-spacing: 0.01em;
  color: var(--tw-black);
  text-decoration: none;
  display: block;
  height: var(--tw-header-row);
  line-height: var(--tw-header-row);  /* deterministic baseline for sticky shift */
  white-space: nowrap;
  overflow: hidden;
  transition: opacity var(--tw-fade) ease,
              transform 0.38s var(--tw-ease),
              color 0.15s;
}
.tw-nav__link:hover { color: var(--tw-sitegray); }
.tw-nav__link.is-active { font-weight: 600; }
.tw-nav__link.row-1 { grid-row: 1; align-self: baseline; }
.tw-nav__link.row-2 { grid-row: 2; align-self: baseline; }
.tw-nav__link.col-5 { grid-column: 5; }
.tw-nav__link.col-6 { grid-column: 6; }
.tw-nav__link.col-7 { grid-column: 7; }

/* sticky: non-active rows slide off; the active row-2 item climbs exactly
   one row-track + gap so its baseline lands on row 1 */
.tw-header.is-sticky .tw-nav__link.row-1:not(.is-active),
.tw-header.is-sticky .tw-nav__link.row-2:not(.is-active) {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}
.tw-header.is-sticky .tw-nav__link.row-2.is-active {
  /* Jason 11 Aug: measured shift (set by JS) so the settled item
     baseline-aligns with the logo exactly; calc fallback if JS absent */
  transform: translateY(calc(-1 * var(--tw-sticky-shift, calc(var(--tw-header-row) + var(--tw-gap)))));
}

/* -- Rule-link (arrow + label over a hairline) -------------------------
   WP: GB container with two paragraph blocks; auto-populated with the
   newest Book title unless the ACF override is set. */
.tw-rulelink {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  border-bottom: 0.5px solid var(--tw-sitegray);
}
.tw-rulelink__arrow {
  font-family: var(--tw-display);
  font-size: 1.4rem;
  color: var(--tw-worange);
  margin: 0;
}
.tw-rulelink a {
  font-family: var(--tw-sans);
  color: var(--tw-sitegray);
  text-decoration: none;
  transition: color 0.3s ease;
}
.tw-rulelink a:hover { color: var(--tw-worange); }

/* -- Project card ------------------------------------------------------
   WP: rendered by the Projects query loop. Rule: item has an image ->
   image card; no image -> colour block. Nobody chooses. */
.tw-card { display: flex; flex-direction: column; width: 100%; }
.tw-card__media {
  height: var(--tw-card-img-h);
  width: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity 0.5s;
}
.tw-card__media:hover { opacity: 0.6; }
.tw-card--hero .tw-card__media { height: var(--tw-hero-img-h); }
.tw-card__block {           /* imageless variant: colour block */
  height: var(--tw-card-img-h);
  width: 100%;
  background: var(--tw-worange);
}
.tw-card__block--pink { background: var(--tw-pink); }

/* -- Promo slider (the orange carousel card) ---------------------------
   WP: ACF repeater `home_promo`, toggleable; hidden = grid flows on. */
.tw-slider {
  position: relative;
  width: 100%;
  height: var(--tw-card-img-h);
  overflow: hidden;
  user-select: none;
  cursor: default;
}
.tw-slider__track {
  display: flex;
  width: 300%;
  height: 100%;
  transition: transform 0.4s var(--tw-ease);
}
.tw-slider__card {
  width: calc(100% / 3);
  height: 100%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.tw-slider__card img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.tw-slider__card--text {
  background: var(--tw-carbon);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 8%, 64px);
}
.tw-slider__card--text .tw-slider__eyebrow {
  font-size: clamp(9px, 1.2cqi, 11px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 18px;
}
.tw-slider__card--text h2 {
  font-family: var(--tw-display);
  font-size: clamp(22px, 4.5cqi, 38px);
  font-weight: 500;
  line-height: 1.1;
  color: #f0ede8;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.tw-slider__dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  z-index: 10;
}
.tw-slider__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transition: background 0.3s, transform 0.3s;
}
.tw-slider__dot.is-active { background: #fff; transform: scale(1.35); }
.tw-slider__cta {
  position: absolute;
  bottom: 18px; right: 18px;
  z-index: 10;
  width: clamp(36px, 6%, 44px);
  height: clamp(36px, 6%, 44px);
  background: var(--tw-cta-idle);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: var(--tw-display);
  transition: background 0.22s, border-color 0.22s, transform 0.22s;
}
.tw-slider__cta p { color: #fff; transition: color 0.22s; }
.tw-slider__cta:hover { background: var(--tw-cta-hover); border-color: rgba(255,255,255,0.6); transform: scale(1.06); }
.tw-slider__cta:hover p { color: var(--tw-carbon); }
.tw-slider.cursor-prev { cursor: w-resize; }
.tw-slider.cursor-next { cursor: e-resize; }

/* -- Post item (typographic, no images - Jason's rule) -----------------
   WP: query loop over migrated posts, odd/even split across two columns. */
.tw-post { display: flex; flex-direction: column; }
.tw-post__title {
  font-family: var(--tw-display);
  font-weight: 500;
  font-size: 1.5rem;   /* Jason 9 Aug: separation from side-titles */
  line-height: 1.2;
  color: var(--tw-worange);
  width: 90%;
  margin: 0;
}
.tw-post__title a { text-decoration: none; }
.tw-post__title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  color: var(--tw-sitegray);
}
.tw-post__excerpt {
  margin: 0 var(--tw-space-s) var(--tw-space-m) var(--tw-space-xs);
  line-height: 1.3;   /* Jason 9 Aug */
  font-size: 1rem;
}

/* -- Book item ---------------------------------------------------------
   WP: Book CPT loop, newest first. */
.tw-book { display: flex; flex-direction: column; justify-content: flex-end; margin-bottom: var(--tw-space-m); }
.tw-book img {
  height: var(--tw-card-img-h);
  object-fit: contain;
  object-position: left top;
}
.tw-book__caption {
  margin: var(--tw-space-xs) var(--tw-space-xs) 0 0;
  line-height: 1.1;
  font-size: 0.9rem;
  color: var(--tw-sitegray);
}

/* -- Essay row (citation with hover image) -----------------------------
   WP: Essay CPT loop; whole row is one class; hover image at 5%. */
.tw-essay {
  position: relative;
  font-family: var(--tw-sans);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--tw-sitegray);
  margin: 0 0 var(--tw-space-xs);
}
.tw-essay__link {
  font-family: var(--tw-display);
  font-weight: 500;
  color: var(--tw-worange);
  text-decoration: none;
}
.tw-essay__link:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  color: var(--tw-sitegray);
}
.tw-essay__bg {
  position: absolute;
  top: 0; left: 0;
  width: 50%; height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: -1;
}
.tw-essay:has(.tw-essay__link:hover) .tw-essay__bg { opacity: 0.05; }

/* -- Scroll reveal -----------------------------------------------------*/
.tw-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}
.tw-reveal.is-visible { opacity: 1; transform: translateY(0); }


/* ==========================================================================
   6 - SECTIONS - homepage rhythm, all on the spacing scale.
   Every block below = one GB container pattern, independently toggleable.
   ========================================================================== */

/* 1 - intro quote: signature air above, rule-link on the following row.
   NOTE: no forced height. Jason's CSS has `height:100vdh` (typo) which
   browsers discard - so the approved design renders WITHOUT a full-height
   intro section. Match the rendered prototype, not the intended rule. */
.tw-s-quote .tw-quote { padding-top: var(--tw-quote-air); }

/* 2 - current projects */
.tw-s-projects__label {
  margin-top: var(--tw-space-2xl);
  margin-bottom: 6rem;   /* Jason 9 Aug: breathe */
}

/* 3 - ongoing */
.tw-s-ongoing__label {
  margin-top: var(--tw-space-xl);   /* Jason 9 Aug: breathe */
  margin-bottom: 6rem;
}

/* 4 - bio */
.tw-s-bio { row-gap: var(--tw-gap); }
.tw-s-bio__media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.tw-s-bio__block { aspect-ratio: 3 / 4; background: var(--tw-worange); }
.tw-s-bio__body { margin-top: var(--tw-space-s); }

/* 5-7 - list sections share one label treatment (was 8rem/10rem/10rem -
   unified to one step of the scale) */
.tw-s-list__label { padding-top: var(--tw-space-xl); }

/* posts stagger: right column drops by one scale step */
.tw-s-posts__stagger { height: var(--tw-space-l); }




/* ==========================================================================
   8 - UX / ACCESSIBILITY OVERRIDES (Paul, 7 Aug - deliberate departures
   from the prototype where UX or accessibility is a genuine concern)
   ========================================================================== */

/* skip link - hidden until keyboard focus */
.tw-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--tw-worange);
  color: #fff;
  font-family: var(--tw-sans);
  padding: 0.6rem 1rem;
  text-decoration: none;
}
.tw-skip:focus { left: 0; }

/* visible focus for keyboard users (design has none) */
:focus-visible {
  outline: 2px solid var(--tw-worange);
  outline-offset: 2px;
}

/* slider prev/next - visible affordance; cursor hints alone are undiscoverable */
.tw-slider__nav {
  font-family: var(--tw-display);   /* Jason 9 Aug: all arrows in Only Sans */
  position: absolute;
  bottom: 18px;
  z-index: 10;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 6px;
  background: var(--tw-cta-idle);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.22s, border-color 0.22s;
}
.tw-slider__nav:hover { background: var(--tw-cta-hover); color: var(--tw-carbon); }
.tw-slider__nav--prev { left: 18px; }
.tw-slider__nav--next { left: 56px; }

/* dots are real buttons now - strip button chrome */
.tw-slider__dot {
  appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* motion respect - no reveals, no slide animation, no autoplay (JS checks too) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .tw-reveal { opacity: 1; transform: none; }
}


/* ==========================================================================
   9 - RESPONSIVE - proposed (design is desktop-only).
   ========================================================================== */
@media (max-width: 900px) {
  body { padding: 0 1.25rem; }
  .tw-header__grid { padding: 0 1.25rem; }
  /* Tim 11 Aug: masthead must not go smaller than the page labels */
  .tw-brand { font-size: 2.1rem; }

  [class*="tw-col-"] { grid-column: 1 / -1; grid-row: auto !important; }

  .tw-grid--airy { row-gap: var(--tw-space-m); }
  .tw-s-projects__label { margin-top: 10rem; margin-bottom: var(--tw-space-s); }
  .tw-s-quote .tw-quote { padding-top: 35vh; font-size: 1.5rem; }
  .tw-card--hero .tw-card__media { height: 380px; }
  .tw-s-bio__media { max-width: 320px; }
  .tw-intro { text-indent: 3rem; }
  .tw-s-posts__stagger { display: none; }
  .tw-s-list__label { padding-top: var(--tw-space-m); }
  .tw-essay__bg { width: 100%; }
}

@media (max-width: 560px) {
  .tw-brand { font-size: 1.7rem; }   /* parity with .tw-label at this size */
  .tw-s-quote .tw-quote { font-size: 1.3rem; }
  .tw-card--hero .tw-card__media { height: 260px; }
  .tw-card__media, .tw-card__block { height: 220px; }
  .tw-label { font-size: 1.7rem; }
  .tw-post__excerpt { margin-bottom: 2.5rem; }

  .tw-header__grid { grid-template-columns: repeat(6, 1fr); }
  .tw-brand { grid-column: 1 / 4; }
  .tw-nav__link { font-size: 0.85rem; }
  .tw-nav__link.col-5 { grid-column: 4; }
  .tw-nav__link.col-6 { grid-column: 5; }
  .tw-nav__link.col-7 { grid-column: 6; }
}

/* ==========================================================================
   10 - INNER-PAGE COMPONENTS (templates beyond the homepage)
   ========================================================================== */

/* top offset under the fixed header for pages that don't open with the
   50vh quote air */
.tw-page { padding-top: var(--tw-space-xl); }

/* - quote attribution (Tim, 10 Aug: review teasers like
   "'Waterman writes better than I do' - Stephen King" on books, and
   quotes about/from talks). Works under .tw-pullquote and .tw-quote.
   WP: ACF fields on Book/Speaking (quote + cite); a featured one can
   surface on the homepage quote slot or promo card. - */
.tw-quote__cite {
  display: block;
  font-family: var(--tw-sans);
  font-style: normal;
  font-weight: 500;
  font-size: 1rem;
  color: var(--tw-sitegray);
  margin-top: var(--tw-space-xs);
}

/* mid-copy pull quote - Jason's pre-styled block Tim can use/move/hide */
.tw-pullquote {
  font-family: var(--tw-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--tw-worange);
  margin: var(--tw-space-m) 0;
}

/* single-post header: Only Sans display title (the post-list voice, larger) */
.tw-post-hero { margin-bottom: var(--tw-space-m); }
.tw-post-hero__title {
  font-family: var(--tw-display);
  font-weight: 500;
  font-size: 2.6rem;
  line-height: 1.15;
  color: var(--tw-worange);
  margin: var(--tw-space-2xs) 0 0;
}

/* filter row (posts index): plain Figtree links, worange active */
.tw-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tw-space-s);
  margin: var(--tw-space-s) 0 var(--tw-space-m);
  font-size: 0.9rem;
  font-family: var(--tw-sans);
}
.tw-filter a { color: var(--tw-sitegray); text-decoration: none; }
.tw-filter a:hover { color: var(--tw-worange); }
.tw-filter a.is-active { color: var(--tw-worange); font-weight: 600; }

/* prev/next pair at the foot of a single post */
.tw-prevnext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tw-gap);
  margin-top: var(--tw-space-l);
}
.tw-prevnext .tw-rulelink { grid-column: auto; }
.tw-prevnext .tw-rulelink--prev { align-items: flex-start; }

/* large cover on the Book single */
.tw-book-cover img {
  max-height: 480px;
  object-fit: contain;
  object-position: left top;
}

/* citation-row variant for Speaking/Media (venue/outlet after the link) */
.tw-essay .tw-venue { color: var(--tw-sitegray); }

@media (max-width: 900px) {
  /* Tim 11 Aug: 4rem sat under the fixed header on phones (Contact page) */
  .tw-page { padding-top: 8rem; }
  .tw-post-hero__title { font-size: 1.9rem; }
  .tw-prevnext { grid-template-columns: 1fr; }
}

/* ==========================================================================
   11 - FIGMA ALIGNMENT (7 Aug, after Paul's frame review)
   The prototype was Jason's ELEMENTS REFERENCE; the Figma frames are the
   page layouts. Components added/changed to match the frames.
   ========================================================================== */

/* - site footer (in every Figma frame; was missing entirely) - */
.tw-footer {
  margin-top: var(--tw-space-xl);
  padding: 0 0 var(--tw-space-m);
}
.tw-footer__link,
.tw-linkstack a {
  display: block;
  width: fit-content;
  font-family: var(--tw-display);
  font-weight: 500;
  font-size: 1.5rem;   /* Jason 9 Aug: matched to post titles */
  color: var(--tw-worange);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  margin-bottom: var(--tw-space-xs);
}
.tw-footer__link:hover, .tw-linkstack a:hover { color: var(--tw-sitegray); }
.tw-footer__legal {
  /* a11y override: gray + 12.8px - orange smalls read as links and sat
     under legibility floor in the frames */
  font-size: 0.8rem;
  color: var(--tw-sitegray);
  line-height: 1.5;
  max-width: 60ch;
  margin-top: var(--tw-space-s);
}

/* - homepage section headers (Jason 9 Aug email): slightly larger than
   side-titles + more top/bottom space so the page breathes - */
.tw-label--section { font-size: 2.4rem; }

/* - homepage top: air + rule-link only (quote moved to page bottom) - */
.tw-s-top { padding-top: 14rem; }

/* - closing quote block (home + about) - */
.tw-s-close { margin-top: var(--tw-space-xl); }

/* - post single: right sidebar prev/next with arrows + see-all -
   UX override: sticky, so the navigation is still there when the reader
   finishes the article (in the frame it scrolls away); prev/next also
   echoed at the article foot. - */
.tw-sidenav { font-family: var(--tw-sans); position: sticky; top: 8rem; align-self: start; }
.tw-sidenav__item { margin-bottom: var(--tw-space-m); }
.tw-sidenav__arrow { font-family: var(--tw-display); color: var(--tw-worange); font-size: 1.1rem; margin: 0; }   /* Jason 9 Aug */
.tw-sidenav__label { font-weight: 600; font-size: 0.9rem; margin: 0 0 0.4rem; }
.tw-sidenav__title { font-size: 0.9rem; line-height: 1.4; margin: 0; color: var(--tw-ink); }
.tw-sidenav__title a { text-decoration: none; }
.tw-sidenav__title a:hover { color: var(--tw-worange); }
.tw-sidenav__all { font-size: 0.9rem; }
.tw-sidenav__all a { color: var(--tw-sitegray); text-decoration: none; }
.tw-sidenav__all a:hover { color: var(--tw-worange); }

/* - post standfirst: italic serif intro - */
.tw-standfirst {
  font-family: var(--tw-serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tw-sitegray);
  margin-bottom: var(--tw-space-s);
}

/* - image caption - 12px floor (a11y override: was ~11px in the frames) - */
.tw-imgcaption {
  font-size: 0.75rem;
  color: var(--tw-sitegray);
  margin-top: 0.4rem;
  line-height: 1.4;
}

/* - post title in the left margin (Figma), not centered - */
.tw-post-hero__title--margin { font-size: 1.8rem; }

/* - portrait media (About photo, Book cover, post lead image) - */
.tw-portrait img { width: 100%; object-fit: cover; display: block; }

/* - orange text card (Figma promo card): worange bg, white Only Sans - */
.tw-slider__card--worange {
  background: var(--tw-worange);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(20px, 10%, 40px);
}
.tw-slider__card--worange h2 {
  font-family: var(--tw-display);
  font-weight: 500;
  font-size: clamp(18px, 3.4cqi, 26px);
  line-height: 1.25;
  color: #fff;
  margin: 0;
}

/* - inline text link in worange (book intro opening words etc.) - */
.tw-link {
  color: var(--tw-worange);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.tw-link:hover { color: var(--tw-sitegray); }

@media (max-width: 900px) {
  .tw-s-top { padding-top: 8rem; }
  .tw-sidenav { display: flex; gap: var(--tw-space-m); }
}


/* ==========================================================================
   12 - PROSE - the_content() typography (migrated posts, book blurbs)
   The design hand-classed every paragraph (.tw-serifpara, .tw-standfirst,
   .tw-pullquote); WordPress content arrives unclassed, so .tw-prose maps
   ordinary the_content() output onto the same three-voice system. Wrap any
   the_content() in a .tw-prose container; .tw-prose--lead is the larger
   book-blurb measure.
   ========================================================================== */
.tw-prose > p,
.tw-prose li {
  font-family: var(--tw-serif);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
  color: var(--tw-sitegray);
}
.tw-prose > p { margin: 0 0 var(--tw-space-s); }
.tw-prose > p:last-child { margin-bottom: 0; }
.tw-prose--lead > p { font-size: 1.1rem; line-height: 1.55; }

.tw-prose h2, .tw-prose h3, .tw-prose h4 {
  color: var(--tw-ink);
  margin: var(--tw-space-m) 0 var(--tw-space-xs);
}
.tw-prose h2 { font-size: 1.6rem; }
.tw-prose h3 { font-size: 1.3rem; }
.tw-prose h4 { font-size: 1.125rem; }

.tw-prose a {
  color: var(--tw-worange);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.tw-prose a:hover { color: var(--tw-sitegray); }

.tw-prose ul, .tw-prose ol { margin: 0 0 var(--tw-space-s); padding-left: 1.4em; }
.tw-prose li { margin-bottom: 0.4rem; }

.tw-prose img { height: auto; margin: var(--tw-space-s) 0; }
.tw-prose figure { margin: var(--tw-space-s) 0; }
.tw-prose figcaption,
.tw-prose .wp-caption-text {
  font-family: var(--tw-sans);
  font-size: 0.75rem;
  color: var(--tw-sitegray);
  margin-top: 0.4rem;
  line-height: 1.4;
}

.tw-prose blockquote {
  font-family: var(--tw-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--tw-worange);
  margin: var(--tw-space-m) 0;
  padding: 0;
  border: 0;
}
.tw-prose blockquote p {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  margin: 0;
  max-width: none;
}

/* WordPress alignment helpers inside prose */
.tw-prose .alignleft  { float: left;  margin: 0.4rem var(--tw-space-s) var(--tw-space-xs) 0; }
.tw-prose .alignright { float: right; margin: 0.4rem 0 var(--tw-space-xs) var(--tw-space-s); }
.tw-prose .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.tw-prose .wp-caption { max-width: 100%; }


/* ==========================================================================
   13 - RESPONSIVE PASS - mobile header + small-screen refinements
   The prototype was desktop-only. Below 680px the fixed two-row masthead is
   cramped, so the header becomes a simple static block (brand over a wrapping
   nav) that scrolls with the page, and the big desktop section gaps tighten.
   ========================================================================== */
@media (max-width: 680px) {
  /* Header: static, stacked, no fixed runway or sticky transforms */
  .tw-header {
    position: static;
    height: auto;
    overflow: visible;
    padding-bottom: 0;
  }
  .tw-header::before { display: none; }
  .tw-header__grid {
    position: static;
    top: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-template-columns: none;
    grid-template-rows: none;
    gap: 0.7rem;
    padding: 1.25rem;
  }
  .tw-brand {
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
    font-size: 1.8rem;
    line-height: 1;
  }
  .tw-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    width: 100%;
  }
  .tw-nav__link {
    grid-column: auto !important;
    grid-row: auto !important;
    height: auto;
    line-height: 1.3;
    font-size: 1rem;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  /* Header no longer floats, so pull content up under it */
  .tw-page { padding-top: 1.5rem; }
  .tw-s-top { padding-top: 1.5rem; }
  /* Tighten the big desktop section gaps for a phone */
  .tw-s-projects__label,
  .tw-s-ongoing__label { margin-top: 3rem; margin-bottom: 2rem; }
  .tw-footer { margin-top: var(--tw-space-m); }
}

/* --- More-link (essay curation on Writing page) --- */
.tw-more-link{font-family:var(--tw-sans);font-weight:600;font-size:.95rem;color:var(--tw-worange);text-decoration:none;letter-spacing:.02em}
.tw-more-link:hover{text-decoration:underline;text-underline-offset:4px}
.tw-grid--more{margin-top:2rem;margin-bottom:3rem}

/* --- Speaking lead images + text-only upcoming cards; essay hover (25 Aug, Jason+Tim decision) --- */
.tw-s-lead { margin: 0 0 3.5rem; }
.tw-s-lead__img { display:block; align-self:flex-start; width:auto; height:auto; max-width:100%; max-height:34rem; }
.tw-card--text { border-top:2px solid var(--tw-worange); padding-top:.85rem; }
.tw-card--text .tw-eyebrow { margin-top:0; }
.tw-card--text .tw-title-sm { margin-top:.35rem; }
.tw-card__link { color:inherit; text-decoration:none; }
.tw-card__link:hover { color:var(--tw-worange); }
.tw-essay__bg { transition:opacity .35s ease; }
.tw-essay:has(.tw-essay__link:hover) .tw-essay__bg { opacity:.16; }

/* a11y: visually-hidden utility (screen-reader-only headings) */
.tw-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Speaking lead slideshow (rotating key images) */
.tw-slideshow { position:relative; width:100%; aspect-ratio:3/2; overflow:hidden; background:var(--tw-ink); }
.tw-slideshow:focus-visible { outline:2px solid var(--tw-worange); outline-offset:2px; }
.tw-slideshow__slide { position:absolute; inset:0; margin:0; opacity:0; transition:opacity .6s var(--tw-ease); }
.tw-slideshow__slide.is-active { opacity:1; }
.tw-slideshow__slide img { width:100%; height:100%; object-fit:cover; display:block; }
.tw-slideshow--single { aspect-ratio:3/2; }
.tw-slideshow--single .tw-slideshow__slide { opacity:1; }
.tw-slideshow__nav { position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:40px; height:40px; border:0; border-radius:50%; background:rgba(0,0,0,0.35); color:#fff; font-size:1.4rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.tw-slideshow__nav:hover { background:rgba(0,0,0,0.6); }
.tw-slideshow__prev { left:.6rem; }
.tw-slideshow__next { right:.6rem; }
.tw-slideshow__dots { position:absolute; bottom:.7rem; left:50%; transform:translateX(-50%); z-index:2; display:flex; gap:.45rem; }
.tw-slideshow__dot { width:9px; height:9px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,0.55); cursor:pointer; transition:background .2s; }
.tw-slideshow__dot.is-active { background:#fff; }
@media (prefers-reduced-motion: reduce) { .tw-slideshow__slide { transition:none; } }

/* Media page: image + title + description list */
.tw-media{display:flex;gap:1.5rem;margin-bottom:2.75rem;align-items:flex-start}
.tw-media__thumb{flex:0 0 42%;display:block}
.tw-media__img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.tw-media__body{flex:1 1 auto}
.tw-media__title{font-family:var(--tw-serif);font-weight:400;font-size:1.4rem;line-height:1.2;margin:0;color:var(--tw-sitegray)}
.tw-media__title a{color:inherit;text-decoration:none;transition:color .3s}
.tw-media__title a:hover{color:var(--tw-worange);text-decoration:underline;text-underline-offset:3px}
.tw-media__desc{font-family:var(--tw-sans);font-size:1rem;line-height:1.5;color:var(--tw-sitegray);margin:.6rem 0 0;max-width:62ch}
@media (max-width:680px){.tw-media{flex-direction:column;gap:.8rem}.tw-media__thumb{flex-basis:auto;width:100%}}

.tw-media__teaser{margin:1rem 0 0}
.tw-media__video{max-width:100%;height:auto;display:block;border-radius:2px;background:#000}
.tw-media__thumb--video .tw-media__video{width:auto;max-height:26rem}
.tw-media__teasercap{font-family:var(--tw-sans);font-size:0.75rem;color:var(--tw-sitegray);margin-top:0.4rem}