/* Font loading moved to a <link> in each page's <head> (see tools/add_font_preconnect.py) -- an @import
   here couldn't start downloading until this whole file was fetched and parsed first, which delayed text
   rendering and caused a visible late reflow (FOUT) as Instrument Serif/Work Sans swapped in over the
   fallback fonts once loaded. */

:root{
  --bg:#faf7f2;
  --ink:#1c1a17;
  --muted:#6b6560;
  --accent:#4a747d;
  --accent-2:#7d2c3a;
  --cover-teal:#88d4e4;
  --teal-tint:#e3f4f7;
  --wine-tint:#f5e3e7;
  --rule:#e6e0d8;
  --ph-bg:#efe9e1;
  --ph-border:#c9beae;
  --panel:#f4f0e9;
}

.brand-stripe{
  height:7px;
  width:100%;
  background:linear-gradient(to right, var(--cover-teal) 0 50%, var(--accent-2) 50% 100%);
  position:sticky;
  top:0;
  z-index:6;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Work Sans', -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
}

a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color 150ms ease, color 150ms ease;
}
a:hover{ color:var(--accent); border-color:var(--accent); }

.serif{ font-family:'Instrument Serif', serif; }

.eyebrow{
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
}

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

/* ---------- Header / nav ---------- */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:28px 64px 44px;
  border-bottom:1px solid var(--rule);
  position:sticky;
  top:7px;
  z-index:5;
  background:var(--bg);
}
.header-doodle{
  position:absolute; left:0; top:0; width:100%; height:100%;
  pointer-events:none; overflow:visible;
}
.header-doodle path{ fill:#7BBFCF; stroke:none; }
/* The hand-drawn squiggles are appended inside their own nav links, so by default they paint OVER the
   link text (and over neighbouring links). z-index:-1 tucks them behind all header text; the sticky
   header is its own stacking context (z-index:5), so they still sit in front of its cream background. */
svg.deco{ pointer-events:none; z-index:-1; }
svg.deco path{ fill:var(--cover-teal); }
/* On a phone the About squiggle's wave arcs over "Coach" and runs down through it into the Coach curl.
   A thin halo in the header's own cream, painted under the letters, makes the ink pass BEHIND the word
   (hidden only where it meets the glyphs) instead of through it -- the stroke stays one connected line. */
.site-nav a[href="coaching.html"]{ -webkit-text-stroke:5px var(--bg); paint-order:stroke fill; }
.wordmark{
  font-family:'Instrument Serif', serif;
  font-size:46px;
  line-height:1;
  letter-spacing:-0.01em;
  color:var(--ink);
  border:none;
  display:inline-block;
  transition:color 150ms ease;
}
.wordmark em{ font-style:italic; color:var(--accent-2); transition:color 150ms ease; }
.wordmark:hover{ color:var(--accent-2); }
.wordmark:hover em{ color:var(--accent); }
.site-nav{ display:flex; gap:36px; }
.site-nav a{
  font-size:14px;
  letter-spacing:0.01em;
  padding-bottom:3px;
  position:relative;
}
.site-nav a::after{
  content:"";
  position:absolute;
  left:0; right:100%; bottom:-1px;
  height:1.5px;
  background:var(--accent);
  transition:right 180ms ease;
}
.site-nav a:hover::after,
.site-nav a.active::after{ right:0; }
.site-nav a.active{ color:var(--accent); }
.nav-toggle{ display:none; }

/* ---------- Footer ---------- */
.site-footer{
  padding:32px 64px;
  border-top:1px solid var(--rule);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  font-size:13px;
  color:var(--muted);
}
.site-footer nav{ display:flex; gap:20px; flex-wrap:wrap; }

/* ---------- Placeholder imagery ---------- */
.placeholder{
  background:var(--ph-bg);
  border:1px dashed var(--ph-border);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:10px;
  color:var(--muted);
  text-align:center;
  border-radius:2px;
  width:100%;
}
.ph-label{
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  line-height:1.6;
  padding:0 20px;
}

/* ---------- Photo credit watermark ---------- */
.photo-credit{
  position:absolute; left:10px; bottom:10px;
  background:rgba(15,13,11,0.58);
  color:rgba(255,255,255,0.92);
  font-size:10.5px; letter-spacing:0.03em;
  padding:4px 9px; border-radius:2px;
  pointer-events:none;
}
.ph-icon{ opacity:0.7; }

/* ---------- Layout helpers ---------- */
.wrap{ max-width:1312px; margin:0 auto; padding-left:64px; padding-right:64px; }
.eyebrow + h1, .eyebrow + h2{ margin-top:16px; }

/* ---------- Hero (home) ---------- */
.hero{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap:72px;
  padding:80px 64px 64px;
  align-items:center;
}
.hero h1{
  font-family:'Instrument Serif', serif;
  font-weight:400;
  font-size:60px;
  line-height:1.08;
  margin:18px 0 24px 0;
}
.hero p{
  font-size:17px;
  line-height:1.65;
  color:var(--muted);
  max-width:520px;
  margin:0 0 28px 0;
}
.hero-links{ display:flex; gap:26px; font-size:14px; flex-wrap:wrap; }
.hero .placeholder{ height:440px; }

/* ---------- Hero carousel (home) ---------- */
/* aspect-ratio (not a fixed px height) keeps the crop window's proportion to the
   source photo CONSTANT at every viewport width -- unlike a fixed height, which
   crops more and more of the image's top/bottom as the browser gets wider. */
/* The hero is pinned (position:fixed) so it stays put while the rest of the page
   scrolls over it. .hero-spacer is an invisible block with the SAME aspect-ratio,
   sitting in normal document flow, so the page still reserves the right amount of
   scroll space for it (this stays in sync automatically, no JS needed). */
/* height uses calc(100vw / ratio) rather than aspect-ratio: combining aspect-ratio
   with position:fixed + inset-based width is inconsistently supported across
   browsers and was silently falling back to an unintended height, re-introducing
   the head-cropping bug. calc() against 100vw is unambiguous everywhere. */
/* The sticky brand-stripe + header together are ~92px tall and sit ABOVE the hero
   at z-index:5. The hero must start below that offset, not at viewport top:0 --
   otherwise the header permanently covers the top slice of every photo, hiding
   any head positioned there (this bit us after adding the sticky nav). */
/* Hero height = width / 2.1 on tall windows, but never taller than what fits on screen:
   the hero is pinned, so anything below the fold (the headline block sits at the BOTTOM of the
   hero) can never be scrolled into view. 140px = 92px header + ~48px breathing room (also covers
   a visible macOS Dock). The 440px floor keeps it from getting absurdly short on tiny windows. */
:root{ --hero-h: calc(100vw / 2.1); }
@media (min-width:901px){
  :root{ --hero-h: max(440px, min(calc(100vw / 2.1), calc(100vh - 140px))); }
}
.hero-spacer{ width:100%; height:var(--hero-h); }
.hero-carousel{
  touch-action:pan-y;  /* horizontal swipes go to the carousel script; vertical drags still scroll */
  position:fixed; top:92px; left:0; width:100vw; height:var(--hero-h);
  overflow:hidden; background:var(--ink); z-index:1;
}
.page-content{ position:relative; z-index:2; background:var(--bg); }
.hero-slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1400ms ease;
}
.hero-slide.active{ opacity:1; }
/* Phones/tablets (class set by the carousel script at <=900px): photos slide sideways instead of
   cross-fading. Only the current photo and its neighbours (parked off-screen) are visible. */
.hero-carousel.slide-mode .hero-slide{
  opacity:1; visibility:hidden; will-change:transform;
  transition:transform 420ms cubic-bezier(.22,.61,.36,1);
}
.hero-carousel.slide-mode .hero-slide.sl-vis{ visibility:visible; }
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,13,11,0.82) 0%, rgba(15,13,11,0.35) 45%, rgba(15,13,11,0.05) 70%);
}
.hero-content{
  position:absolute; left:0; right:0; bottom:0; padding:56px 64px 52px; color:#fff;
  /* The overlay spans the full width of the hero's lower half. Let clicks fall through
     to the carousel (so a click anywhere advances the slide); only real links stay clickable. */
  pointer-events:none;
}
.hero-content a{ pointer-events:auto; }
.hero-content .eyebrow{ color:rgba(255,255,255,0.72); }
.hero-content h1{
  font-family:'Instrument Serif', serif; font-weight:400; font-size:56px; line-height:1.08;
  margin:14px 0 18px 0; color:#fff; max-width:760px;
}
.hero-content h1 em{ color:var(--cover-teal); font-style:italic; }
.hero-content p{ font-size:16.5px; line-height:1.6; color:rgba(255,255,255,0.88); max-width:560px; margin:0 0 24px 0; }
.hero-content .hero-links a{ color:#fff; border-color:rgba(255,255,255,0.5); }
.hero-content .hero-links a:hover{ color:var(--cover-teal); border-color:var(--cover-teal); }
.hero-dots{ position:absolute; right:64px; bottom:52px; display:flex; gap:8px; }
/* Short desktop windows (13-inch laptops with a full browser toolbar): tighten the overlay so the
   headline block stays compact and the photo still shows. */
@media (min-width:901px) and (max-height:820px){
  .hero-content{ padding:32px 64px 34px; }
  .hero-content h1{ font-size:44px; margin:10px 0 12px 0; }
  .hero-content p{ font-size:15px; line-height:1.55; margin:0 0 16px 0; }
  .hero-dots{ bottom:34px; }
}
.hero-dots button{
  width:8px; height:8px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.7);
  background:transparent; padding:0; cursor:pointer; transition:background 200ms ease;
}
.hero-dots button.active{ background:#fff; }

/* ---------- Featured collage (direct page) ---------- */
/* Every cell's aspect-ratio is fixed at <=1.5 (the source photos' native ratio),
   so object-fit:cover only ever crops the sides, never the top/bottom -- heads
   can't be cut off at any viewport width. */
.collage{
  column-count:3; column-gap:18px; padding:0 64px 8px;
}
.collage-item{
  position:relative; display:block; break-inside:avoid; margin-bottom:18px;
  border-radius:2px; overflow:hidden; background:var(--ph-bg);
}
.collage-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.collage-item .collage-cap{
  padding:10px 2px 0; font-size:13px;
}
.collage-item .collage-cap .ct{ font-family:'Instrument Serif', serif; font-style:italic; font-size:16.5px; color:var(--accent-2); }
.collage-item .collage-cap .cv{ color:var(--muted); font-size:12px; margin-top:2px; }
.collage-item .photo-frame{ position:relative; transition:transform 220ms ease, box-shadow 220ms ease; }
.collage-item:hover .photo-frame{ transform:translateY(-3px); box-shadow:0 16px 28px -18px rgba(28,26,23,0.4); }
@media (max-width:900px){
  .collage{ column-count:1; padding:0 24px 8px; }
}
@media (min-width:901px) and (max-width:1180px){
  .collage{ column-count:2; }
}

/* ---------- Homepage mosaic: an impact wall of production photos (vibes, not info) ----------
   Never crops a photo: js/mosaic.js lays the tiles out in justified rows (each photo at its own shape,
   each row scaled to fill the width exactly), so the mosaic is a clean rectangle at every width.
   Fallback without JS: the same uncropped tiles in a simple wrapping row layout.
   Captions appear on hover (desktop) or as a small tag (touch screens). */
/* full-bleed band behind the mosaic: starts in the same burgundy as the "Facilitative, not directive" band, deepening to black */
.mosaic-band{ background:linear-gradient(180deg, var(--accent-2) 0%, #4a1b25 22%, #1d1013 55%, #0f0d0b 100%); margin-top:28px; }
.mosaic-wrap{ padding:40px 64px 44px; }
.mosaic-band .mosaic-more{ color:#f3e6e8; }
.mosaic-band .mosaic-more:hover{ border-color:#f3e6e8; }
.mosaic{ display:flex; flex-wrap:wrap; gap:6px; }
.mosaic.mz-js{ display:flex; flex-direction:column; flex-wrap:nowrap; }
.mz-row{ display:flex; gap:6px; }
.mz-block{ display:flex; gap:6px; }
.mz-stack{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:6px; }
.mz-block > .mz{ aspect-ratio:auto; min-width:0; }
.mz-feature .mz-t{ font-size:26px; }
.mz-tiny .mz-cap{ display:none; }   /* too narrow for a caption; the title is still in the alt text */
.mz{ position:relative; display:block; overflow:hidden; background:rgba(255,255,255,0.04); flex:var(--ar) 1 calc(var(--ar) * 200px); aspect-ratio:var(--ar); }
.mz-row .mz{ aspect-ratio:auto; min-width:0; }
.mz img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 900ms cubic-bezier(.2,.7,.2,1), filter 400ms ease, opacity 700ms ease; }
.mz-js .mz:not(.mz-in) img{ opacity:0; }   /* fade in as each photo arrives (only when the script is running) */
.mz:hover img{ transform:scale(1.04); }
.mosaic:hover .mz:not(:hover) img{ filter:saturate(.75) brightness(.8); }
.mz-cap{ position:absolute; left:0; right:0; bottom:0; padding:28px 14px 11px; color:#fff;
  background:linear-gradient(to top, rgba(15,13,11,.78), rgba(15,13,11,0)); opacity:0; transform:translateY(6px);
  transition:opacity 250ms ease, transform 250ms ease; pointer-events:none; }
.mz:hover .mz-cap, .mz:focus-visible .mz-cap{ opacity:1; transform:none; }
.mz-t{ display:block; font-family:'Instrument Serif', serif; font-style:italic; font-size:19px; line-height:1.1; }
.mz-v{ display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; opacity:.85; margin-top:3px; }
.mosaic-more{ display:inline-block; margin-top:18px; font-size:14px; color:var(--accent); border-bottom:1px solid transparent; }
.mosaic-more:hover{ border-color:var(--accent); }
/* touch screens: pure images, no caption overlay (titles stay in the alt text; each tile still links) */
@media (hover:none){
  .mz-cap{ display:none; }
  .mz:hover img{ transform:none; }
  .mosaic:hover .mz:not(:hover) img{ filter:none; }
}
@media (max-width:900px){
  .mosaic-wrap{ padding:28px 24px 32px; }
  .mosaic-wrap > *{ padding-left:0; padding-right:0; }   /* the site-wide "section > *" phone padding would double up */
}
@media (max-width:600px){
  .mosaic, .mz-row, .mz-block, .mz-stack{ gap:4px; }
  .mz-wide-only{ display:none; }   /* phone shows 12 of the 18 */
}

/* Mosaic lightbox (js/mosaic.js): reuses the site lightbox's overlay, arrows and close button (.lb-*),
   with the show's title and theatre (as in the hover caption) and a link fading in under the photo. */
.mz{ cursor:zoom-in; }
.mzlb .mzlb-figure{ display:flex; flex-direction:column; align-items:center; max-width:min(1100px, 88vw); }
.mzlb-img{ max-width:min(1100px, 88vw); max-height:72vh; width:auto; height:auto; display:block; border-radius:2px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.6); opacity:0; transition:opacity 350ms ease; }
.mzlb-img.is-in{ opacity:1; }
.mzlb-info{ width:min(680px, 88vw); margin-top:18px; color:#fff; text-align:center;
  opacity:0; transform:translateY(10px); transition:opacity 450ms ease, transform 450ms ease; }
.mzlb-info.is-in{ opacity:1; transform:none; }
.mzlb-title{ font-family:'Instrument Serif', serif; font-style:italic; font-size:30px; line-height:1.1; }
.mzlb-meta{ font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.7); margin:6px 0 16px; }
.mzlb-link{ display:inline-block; font-size:12.5px; line-height:1; padding:8px 15px; border-radius:999px; border:1px solid rgba(255,255,255,.55); color:#fff; transition:background 150ms ease, color 150ms ease; }
.mzlb-link:hover{ background:#fff; color:var(--ink); }
.mzlb-count{ display:block; margin-top:12px; font-size:11px; letter-spacing:.1em; color:rgba(255,255,255,.45); }
@media (max-width:600px){
  .mzlb-img{ max-height:52vh; max-width:94vw; }
  .mzlb-info{ margin-top:14px; width:90vw; }
  .mzlb-title{ font-size:24px; }
  .mzlb .lb-arrow{ top:auto; bottom:18px; transform:none; }   /* arrows sit low on phones so they don't cover the photo */
}

/* "View résumé" / "Download CV" links at the top of the Director and About pages: plain text links with arrows,
   styled like the site's other "… →" links */
.cta-row{ display:flex; flex-wrap:wrap; gap:6px 24px; margin:2px 0 24px; }
.cta-pill{ font-size:14px; color:var(--accent); border-bottom:1px solid transparent; transition:border-color 150ms ease; }
.cta-pill:hover{ border-color:var(--accent); }

/* Homepage intro above the mosaic: everything she does, one role per word */
.page-head.intro-roles{ max-width:900px; }
.intro-roles h2{ font-family:'Instrument Serif', serif; font-weight:400; font-size:40px; line-height:1.12; margin:12px 0 16px; }
.intro-roles h2 span{ white-space:nowrap; }
.intro-roles h2 span:nth-child(even){ font-style:italic; color:var(--accent-2); }
@media (max-width:600px){ .intro-roles h2{ font-size:31px; text-align:center; } }

/* ---------- Three ways in ---------- */
.ways{
  padding:0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:0;
}
.ways-item{
  display:block; color:inherit; text-decoration:none;
  padding:52px 48px;
  border-right:1px solid var(--rule);
  background:var(--bg);
  transition:background 200ms ease;
}
.ways-item:last-child{ border-right:none; }
.ways-item.teal-bg{ background:var(--teal-tint); }
.ways-item.wine-bg{ background:var(--wine-tint); }
.ways-item:hover{ background:var(--panel); }
.ways-item.teal-bg:hover{ background:#d3edf2; }
.ways-item.wine-bg:hover{ background:#eed4da; }
.ways .num{
  font-family:'Instrument Serif', serif; font-size:17px; letter-spacing:0.01em;
  width:108px; height:108px; border-radius:50%; padding:0 8px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--cover-teal); color:var(--ink);
}
.ways .num.wine{ background:var(--accent-2); color:#fff; }
.ways p{ font-size:14.5px; color:var(--muted); line-height:1.6; margin:16px 0 14px 0; }
.ways-link{ font-size:14px; display:inline-block; border-bottom:1px solid transparent; transition:border-color 150ms ease, color 150ms ease; }
.ways-item:hover .ways-link{ color:var(--accent); border-color:var(--accent); }

/* ---------- Leadership throughline (full-bleed color block) ---------- */
.throughline-band{ background:var(--accent-2); }
.throughline{ position:relative; padding:76px 64px; overflow:hidden; max-width:1440px; margin:0 auto; }
.throughline .mark{
  position:absolute; top:-6px; left:52px;
  font-family:'Instrument Serif', serif;
  font-size:200px; color:#fff; opacity:0.12; line-height:1; pointer-events:none;
}
.throughline .layout{ position:relative; display:grid; grid-template-columns:1fr 300px; gap:56px; align-items:center; }
.throughline .inner{ max-width:660px; }
.throughline .eyebrow{ color:rgba(255,255,255,0.65); }
.throughline h2{ font-family:'Instrument Serif', serif; font-weight:400; font-size:36px; margin:14px 0 18px 0; color:#fff; }
.throughline p{ font-size:16px; line-height:1.7; color:rgba(255,255,255,0.92); }
.throughline a{ color:var(--cover-teal); border-color:transparent; }
.throughline a:hover{ color:#fff; border-color:#fff; }
.throughline .photo{ aspect-ratio:3/4; overflow:hidden; }
.throughline .photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.throughline .photo-col{ align-self:start; }

/* ---------- Cards (recent work) ---------- */
.section-head{
  display:flex; justify-content:space-between; align-items:baseline; margin:0 0 26px 0;
}
.card-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:30px; }
.card{ transition:transform 180ms ease, box-shadow 180ms ease; }
.card:hover{ transform:translateY(-4px); box-shadow:0 18px 30px -20px rgba(28,26,23,0.35); }
.card img, .card .placeholder{ width:100%; aspect-ratio:3/2; object-fit:cover; margin-bottom:14px; }
.card .title{ font-family:'Instrument Serif', serif; font-size:20px; font-style:italic; color:var(--accent-2); }
.card .meta{ font-size:13px; color:var(--muted); margin-top:4px; }

/* ---------- Direct: row list ---------- */
.row-list{ padding-top:8px; }
.row{
  display:grid; grid-template-columns: 2.2fr 1.6fr 0.6fr;
  align-items:baseline; padding:20px 0; border-bottom:1px solid var(--rule);
  transition:background 150ms ease;
}
.row:hover{ background:var(--teal-tint); }
.row .rtitle{ font-family:'Instrument Serif', serif; font-size:19px; }
.row .rmeta{ font-size:13.5px; color:var(--muted); }
.row .ryear{ display:flex; justify-content:space-between; font-size:13.5px; color:var(--muted); }
.row .arrow{ opacity:0; transform:translateX(-6px); transition:opacity 150ms ease, transform 150ms ease; color:var(--accent); }
.row:hover .arrow{ opacity:1; transform:translateX(0); }

/* ---------- Complete history list ---------- */
.hist-list{ column-count:1; }
.hist-row{
  display:grid; grid-template-columns: 1.5fr 1.8fr 1.5fr; gap:16px;
  padding:9px 0; border-bottom:1px solid var(--rule); font-size:13.5px;
  color:inherit; text-decoration:none; transition:background 150ms ease;
}
.hist-row:hover{ background:var(--teal-tint); }
.hist-row .ht{ font-family:'Instrument Serif', serif; font-size:15.5px; }
.hist-row .hb, .hist-row .hv{ color:var(--muted); }

/* ---------- Highlights / full-list expand (mirrors patricksabongui.com resume) ---------- */
.cv-all-rows{ display:none; }
.cv-table-wrap.cv-open .cv-top-rows{ display:none; }
.cv-table-wrap.cv-open .cv-all-rows{ display:block; }
.cv-expand-btn{
  margin-top:22px; padding-top:16px; border-top:1px solid var(--rule);
  width:100%; text-align:left; background:none; border-left:none; border-right:none; border-bottom:none;
  font-family:inherit; font-size:13.5px; color:var(--accent); cursor:pointer;
  display:flex; align-items:center; gap:7px;
}
.cv-expand-btn:hover{ color:var(--accent-2); }
.cv-expand-arrow{ display:inline-block; transition:transform 0.25s; font-size:13px; line-height:1; }
.cv-open .cv-expand-arrow{ transform:rotate(180deg); }
.audio-row{
  display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--rule); font-size:14.5px;
}
.audio-row .av{ color:var(--muted); }

/* ---------- Film & TV feature strip ---------- */
.feature-strip{
  display:grid; grid-template-columns:400px 1fr; gap:40px; align-items:center;
  color:inherit; text-decoration:none;
}
.feature-strip-media{ position:relative; aspect-ratio:3/2; border-radius:2px; overflow:hidden; transition:transform 200ms ease, box-shadow 200ms ease; }
.feature-strip-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.feature-strip:hover .feature-strip-media{ transform:translateY(-3px); box-shadow:0 18px 30px -20px rgba(28,26,23,0.4); }
.feature-strip-copy p{ color:var(--ink); }
.feature-strip:hover .feature-strip-copy > span{ color:var(--accent); border-color:var(--accent); }

/* ---------- Audio grid ---------- */
.audio-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.audio-card{
  padding:14px 16px; background:var(--teal-tint); border-radius:2px;
  display:flex; align-items:center; gap:14px; color:inherit; text-decoration:none; transition:background 150ms ease;
}
a.audio-card:hover{ background:var(--wine-tint); }
div.audio-card{ opacity:0.85; }
.audio-card .ac-thumb{ width:52px; height:52px; flex:none; border-radius:2px; overflow:hidden; background:var(--ph-bg); }
.audio-card .ac-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.audio-card .ac-body{ min-width:0; }
.audio-card .ac-title{ font-size:14px; font-weight:500; }
.audio-card .ac-sub{ font-size:12.5px; color:var(--muted); margin-top:3px; }
.audio-card .ac-link{ font-size:11.5px; color:var(--accent); margin-top:6px; display:inline-block; }

/* ---------- Featured show block ---------- */
.featured-media{ height:460px; position:relative; }
.featured-media img{ width:100%; height:100%; object-fit:cover; }
.featured-caption{ display:flex; justify-content:space-between; align-items:baseline; margin-top:18px; }

/* ---------- Show detail ---------- */
/* aspect-ratio:3/2 matches the source photos' native ratio exactly -- zero
   vertical crop at any width, so heads can never be cut off (see .hero-carousel
   comment above for why aspect-ratio beats a fixed px height here). */
.show-hero{ aspect-ratio:3/2; position:relative; }
.show-hero img{ width:100%; height:100%; object-fit:cover; }
.show-meta{ font-size:14.5px; color:var(--muted); }
.show-body-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:60px; padding:40px 0; }
.show-gallery{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.credit-row{ font-size:14.5px; line-height:2.1; }
.credit-row .k{ color:var(--muted); }
.show-body-grid p + .press-quote, .show-body-grid .credit-row + .press-quote{ margin-top:24px; }
.press-quote{ border-left:3px solid var(--accent-2); background:var(--wine-tint); padding:14px 18px; font-size:14px; font-style:italic; color:var(--ink); border-radius:0 2px 2px 0; }
.press-quote.pq-teal{ border-left-color:var(--cover-teal); background:var(--teal-tint); }

/* ---------- Teach ---------- */
.affiliation-card{
  padding:34px 38px; border:1px solid var(--rule); border-radius:2px; background:var(--teal-tint);
}
.affiliation-card .value{ font-family:'Instrument Serif', serif; font-size:28px; font-style:italic; color:var(--accent); }
.current-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.affiliation-card.neutral-bg{ background:var(--panel); }
.affiliation-card.wine-bg{ background:var(--wine-tint); }
.history-line{ font-size:18px; line-height:2.1; max-width:900px; }
.cv-download-btn{
  display:inline-block; margin-bottom:22px; padding:11px 20px;
  background:var(--teal-tint); border:1px solid var(--rule); border-radius:2px;
  font-size:14px; color:var(--accent);
  transition:background 150ms ease, color 150ms ease;
}
.cv-download-btn:hover{ background:#d3edf2; color:var(--accent-2); }

/* ---------- Write ---------- */
.book-grid{ display:grid; grid-template-columns:300px 1fr; gap:56px; align-items:start; }
/* Book event photo sits beside the cover: 3 columns on wide screens, cover + photo over full-width text below that */
.book-grid.has-event > :last-child{ grid-column:1 / -1; }
.book-event{ margin:0; }
.book-event .frame{ height:450px; overflow:hidden; border-radius:2px; box-shadow:0 20px 40px -24px rgba(28,26,23,0.4); }
.book-event img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.book-event figcaption{ font-size:12.5px; color:var(--muted); margin-top:10px; line-height:1.5; }
@media (min-width:1400px){
  .book-grid.has-event{ grid-template-columns:300px minmax(320px,440px) 1fr; }
  .book-grid.has-event > :last-child{ grid-column:auto; }
}
@media (max-width:900px){
  .book-event .frame{ height:auto; aspect-ratio:785/805; }
}
.print-grid{ display:grid; grid-template-columns:120px 1fr; gap:28px; align-items:start; }
.book-cover{ aspect-ratio:2/3; }
.essay-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:56px; }
.works-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:32px; }
.excerpt{ border-left:3px solid var(--accent-2); background:var(--wine-tint); padding:24px 26px; border-radius:0 2px 2px 0; }
.excerpt .mark{ font-family:'Instrument Serif', serif; font-size:38px; color:var(--accent-2); opacity:0.6; line-height:1; }
.excerpt p{ font-size:16px; font-style:italic; line-height:1.7; color:var(--muted); margin-top:4px; }

/* ---------- About ---------- */
.about-intro{ display:grid; grid-template-columns:300px 1fr; gap:56px; align-items:start; }
.about-photo{ aspect-ratio:2/3; }
#aboutIntro{ grid-template-areas:"photo name" "photo blurb"; }
#aboutIntro .about-photo{ grid-area:photo; }
#aboutIntro .about-name{ grid-area:name; }
#aboutIntro .about-blurb{ grid-area:blurb; }
.honor-row{ display:flex; justify-content:space-between; padding:15px 0; border-bottom:1px solid var(--rule); font-size:15px; }
.honor-row .yr{ color:var(--muted); }
.contact-block{
  padding:52px 64px; border-top:1px solid var(--rule); background:var(--teal-tint);
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:48px;
}
/* compact contact strip (2026-10-03): tighter padding and spacing; overrides the inline spacing in each page's markup */
.contact-block{ padding:30px 64px 32px; gap:40px; }
.contact-block h2{ font-size:26px !important; margin:6px 0 4px !important; }
.contact-block p{ margin:0 !important; line-height:1.55 !important; max-width:440px !important; }
.contact-block .email{ font-size:24px !important; margin-top:4px !important; }
.contact-block .email + div{ margin:4px 0 0 !important; line-height:1.6 !important; }
.contact-block .contact-btn{ margin-top:10px; }
.contact-block .email{ font-family:'Instrument Serif', serif; font-size:28px; font-style:italic; margin-top:8px; color:var(--accent); }
.contact-btn{
  display:inline-block; margin-top:16px; font-size:14px; font-weight:600;
  color:var(--accent-2); border-bottom:1px solid var(--accent-2); padding-bottom:2px;
  transition:color 150ms ease, border-color 150ms ease;
}
.contact-btn:hover{ color:var(--accent); border-color:var(--accent); }
/* line the two email links up along the bottom of the strip */
.contact-block .contact-card{ display:flex; flex-direction:column; align-items:flex-start; }
.contact-block .contact-card > .contact-btn{ margin-top:auto; }
.contact-block .contact-card > :nth-last-child(2){ margin-bottom:12px !important; }
/* the same teal | burgundy stripe as the top of every page, across the top of the contact strip */
.contact-block{ position:relative; border-top:0 !important; }
.contact-block::before{ content:""; position:absolute; top:0; left:0; right:0; height:7px;
  background:linear-gradient(to right, var(--cover-teal) 0 50%, var(--accent-2) 50% 100%); }
/* thin grey divider between the two cards: vertical side by side, horizontal if they ever stack */
.contact-block .contact-card + .contact-card{ border-left:1px solid rgba(28,26,23,0.14); padding-left:40px; }
@media (max-width:900px){ .contact-block .contact-card + .contact-card{ padding-left:18px; } }
@media (max-width:339px){
  .contact-block{ grid-template-columns:1fr !important; }
  .contact-block .contact-card + .contact-card{ border-left:0; padding-left:0; border-top:1px solid rgba(28,26,23,0.14); padding-top:18px; }
}

/* ---------- Page header ---------- */
.page-head{ padding:64px 64px 32px; max-width:760px; }
.page-head h1{ font-family:'Instrument Serif', serif; font-weight:400; font-size:52px; margin:14px 0 18px 0; }
.page-head p{ font-size:16.5px; line-height:1.7; color:var(--muted); }

.director-intro{ display:grid; grid-template-columns:220px 1fr; gap:40px; align-items:start; margin-top:18px; }
.director-photo{ aspect-ratio:2/3; overflow:hidden; border-radius:2px; }

section{ max-width:1440px; margin:0 auto; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .site-header{ padding:20px 24px; }
  .wordmark{ font-size:32px; }
  .header-doodle{ display:none; }
  .deco-secondary{ display:none; }
  /* transform-origin must sit over the anchor word itself, not the svg's
     own (much larger) box -- these percentages are each piece's calibrated
     left/top/width/height (from js/header-doodle.js) converted to where the
     100%x100% anchor sits within its own oversized svg box. Scaling around
     50% 50% (the svg box's own center, far from the word) shifted the loop
     into the text instead of just shrinking it in place. */
  nav a[href="direct.html"] svg.deco{ transform:scale(0.93); transform-origin:57.3% 43.7%; }
  nav a[href="about.html"] svg.deco{ transform:scale(0.93); transform-origin:66.5% 43.6%; }
  .site-header{ flex-direction:column; align-items:flex-start; gap:14px; }
  .site-nav{ gap:14px; flex-wrap:nowrap; width:100%; justify-content:space-between; }
}
@media (max-width: 430px){
  /* seven links (Coach added 2026-10-12) at 13px + 6px gaps were ~20px wider than a 390px phone */
  .site-nav{ gap:4px; }
  .site-nav a{ font-size:12px; letter-spacing:0; }
}
@media (max-width: 370px){
  .site-header{ padding-left:16px; padding-right:16px; }
  .site-nav{ gap:2px; }
  .site-nav a{ font-size:11px; }
}
@media (max-width: 900px){
  .hero{ grid-template-columns:1fr; padding:48px 24px; gap:36px; }
  .hero h1{ font-size:42px; }
  /* aspect-ratio does nothing here -- .hero-carousel is position:fixed with an
     explicit width AND height already set (see base rule), so both dimensions
     are already constrained and aspect-ratio has no free dimension left to
     compute. Set height explicitly instead. Keep this ratio landscape (close
     to the source photos' own shape) and switch to object-fit:contain below --
     forcing wide production photos into a tall portrait-ish box was cropping
     off their sides. Contain just letterboxes onto the dark background
     instead, so the full frame stays visible, only smaller. */
  .hero-carousel{ height:calc(100vw / 1.5); top:114px; }
  .hero-spacer{ height:calc(100vw / 1.5); }
  .hero-slide{ object-fit:contain; }
  .hero-content{ padding:14px 24px 20px; }
  .hero-content .eyebrow{ font-size:11px; }
  .hero-content h1{ font-size:30px; margin:8px 0 12px 0; }
  .hero-content p{ display:none; }
  .hero-content .hero-links{ gap:16px; }
  .hero-content .hero-links a:nth-child(n+2){ display:none; }
  .hero-dots{ right:20px; bottom:18px; }
  #heroPhotoCredit{ font-size:9.5px; padding:3px 7px; }
  .hist-row{ grid-template-columns:1fr; gap:2px; padding:12px 0; }
  .ways{ grid-template-columns:1fr; padding:0; }
  .ways-item{ padding:32px 24px; border-right:none; border-bottom:1px solid var(--rule); }
  .ways-item:last-child{ border-bottom:none; }
  /* stacked on a phone: centre the round title badge and the text under it */
  .ways-item{ display:flex; flex-direction:column; align-items:center; text-align:center; }
  .throughline{ padding:48px 24px; }
  .throughline .layout{ grid-template-columns:1fr; gap:28px; }
  .throughline .photo-col{ max-width:280px; margin-left:auto; text-align:right; }   /* stacked: portrait sits to the right */
  .card-grid{ grid-template-columns:1fr; }
  .row{ grid-template-columns:1fr; gap:4px; padding:16px 0; }
  .row .arrow{ display:none; }
  .page-head{ padding:48px 24px 24px; }
  .director-intro{ grid-template-columns:120px 1fr; gap:20px; }
  .director-intro p{ margin-top:0; }
  .book-grid, .about-intro{ grid-template-columns:1fr; }
  .print-grid{ grid-template-columns:90px 1fr; gap:18px; }
  .current-grid{ grid-template-columns:1fr; }
  .works-grid{ grid-template-columns:1fr; gap:24px; }
  .about-photo{ order:2; }
  #aboutIntro{ grid-template-columns:1fr; grid-template-areas:"name" "photo" "blurb"; }
  .essay-grid, .show-body-grid, .show-gallery, .audio-grid{ grid-template-columns:1fr; }
  /* .feature-strip's first column is a fixed 400px on desktop -- on a phone
     that never shrinks, so it forced the row 200px+ wider than the viewport
     and squeezed the copy column down to ~85px, which wrapped its text tall
     enough that align-items:center pushed the (shorter) image down with a
     big empty gap above it. Stack instead. */
  .feature-strip{ grid-template-columns:1fr; gap:20px; }
  .photo-credit{ font-size:9.5px; padding:3px 7px; left:8px; bottom:8px; }
  /* Landscape production photos get force-cropped by their aspect-ratio boxes
     (show-hero, show-gallery, collage-item) on desktop, which is fine at
     large sizes but loses too much of the frame on a narrow phone column.
     On mobile, let each of these boxes size to the image's own ratio instead
     -- image runs smaller, but nothing gets cropped off the sides. Every one
     of these wrapper divs has photo-credit as a direct child (the stable,
     common thread across all of them, class-named or not), so :has() finds
     them all without needing a shared class. .hero-carousel is excluded --
     that's the pinned full-bleed home hero, which should keep cropping. */
  div:has(> .photo-credit):not(.hero-carousel){
    aspect-ratio:auto !important;
    height:auto !important;
  }
  div:has(> .photo-credit):not(.hero-carousel) > img{
    height:auto !important;
    object-fit:contain !important;
  }
  .site-footer{ padding:24px; }
  .contact-block{ padding:22px 24px 24px; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
  .contact-block h2{ font-size:22px !important; }
  .contact-block .email{ font-size:21px !important; }
  .contact-block p, .contact-block .email + div{ font-size:13px !important; }
  .contact-block .contact-btn{ font-size:13px; }
  .contact-block > *{ padding-left:0; padding-right:0; }   /* the site-wide "section > *" phone padding would double up */
  section > *{ padding-left:24px; padding-right:24px; }
  .wrap{ padding-left:24px; padding-right:24px; }
}

/* Sections (show pages, Author, Educator, About, Director, Press) carry an inline 64px side padding for desktop. On small screens use a single 24px gutter
   (the generic `section > *` gutter above would otherwise stack on top of it and squeeze the content). */
@media (max-width: 900px){
  section[style*="64px"]{ padding-left:24px !important; padding-right:24px !important; }
  section[style*="64px"] > *{ padding-left:0 !important; padding-right:0 !important; }
  /* Educator page: sections are inset with an inline margin instead of padding. */
  section[style*="margin:0 64px"]{ margin-left:0 !important; margin-right:0 !important; }
  /* Press page: .press-section padding lives in that page's own <style> block. */
  .press-section{ padding-left:24px !important; padding-right:24px !important; }
  .press-section > *{ padding-left:0 !important; padding-right:0 !important; }
  /* Same stacking on the intro blocks that already carry their own 24px gutter. */
  .page-head > *, .throughline > *{ padding-left:0 !important; padding-right:0 !important; }
}

/* Row of production photos at their natural proportions, sharing one row height, max 3 per
   row (markup groups figures into separate .photo-strip rows of <=3; see tools/split_rows).
   Figures shrink together (same percentage each) via flex-shrink so each row's photos stay
   on one centered line whenever the container has room; --ar (set per-figure from the
   image's real pixel dimensions) lets `aspect-ratio` keep height in lockstep with width
   as they shrink. Only wraps within a row (mobile) when even shrinking can't fit. */
.photo-strip{ display:flex; flex-wrap:nowrap; gap:14px; align-items:flex-start; justify-content:center; }
.photo-strip + .photo-strip{ margin-top:14px; }
.photo-strip figure{ margin:0; position:relative; flex:0 1 calc(var(--h,360px) * var(--ar,1.5)); aspect-ratio:var(--ar,1.5); height:auto; max-width:100%; min-width:180px; }
.photo-strip img{ width:100%; height:100%; max-width:100%; display:block; object-fit:cover; }
@media (max-width: 900px){
  .photo-strip{ flex-wrap:wrap; }
  .photo-strip figure{ flex-basis:100%; min-width:0; }
}

/* Mosaic (rehearsal strip): true masonry -- every photo runs at its own full, uncropped proportions
   (width:100%, height:auto), so nothing ever loses part of its frame. js/mosaic-columns.js reads each figure's
   data-ar (aspect ratio, baked in at build time) and greedily places it into whichever column currently
   predicts the shortest total height, then rebuilds .mosaic-col divs -- a real bin-packing pass, not CSS's
   native `column-count`, which only fills columns to an estimated height in DOM order and can strand one
   column noticeably short. Before JS runs (or if it fails), figures stack as one plain column -- never broken,
   just not yet balanced into a mosaic. */
.photo-mosaic{ display:flex; flex-direction:column; gap:14px; }
.photo-mosaic figure{ margin:0; position:relative; }
.photo-mosaic img{ width:100%; height:auto; display:block; border-radius:2px; }
.photo-mosaic.js-cols{ flex-direction:row; align-items:flex-start; gap:14px; }
.photo-mosaic.js-cols .mosaic-col{ flex:1; display:flex; flex-direction:column; gap:14px; min-width:0; }
@media (max-width: 900px){
  .photo-mosaic, .photo-mosaic.js-cols{ gap:10px; }
  .photo-mosaic.js-cols .mosaic-col{ gap:10px; }
}

/* ---------- Show-page navigation (js/show-nav.js) ---------- */
body.has-show-nav{ padding-bottom:64px; }
body.has-show-nav.sn-expanded{ padding-bottom:128px; }
.show-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:rgba(250,247,242,0.95); -webkit-backdrop-filter:saturate(1.2) blur(10px); backdrop-filter:saturate(1.2) blur(10px);
  border-top:1px solid var(--rule); box-shadow:0 -6px 18px -14px rgba(28,26,23,0.35);
  padding-bottom:env(safe-area-inset-bottom);
}
.show-nav[data-mode="expanded"] .sn-compact{ display:none; }
.show-nav[data-mode="collapsed"] .sn-full{ display:none; }

/* expanded: thumbnail strip */
.sn-full{ display:flex; align-items:flex-start; gap:8px; padding:10px 14px 8px; }
.sn-strip{
  flex:1; display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  padding:2px 10px; min-width:0;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.sn-strip::-webkit-scrollbar{ display:none; }
.sn-tile{ flex:none; width:108px; display:flex; flex-direction:column; gap:4px; text-decoration:none; color:var(--ink); scroll-snap-align:center; border-radius:4px; }
.sn-tile-img{ display:block; width:100%; aspect-ratio:3/2; border-radius:3px; overflow:hidden; background:var(--teal-tint); box-shadow:0 0 0 2px transparent; transition:box-shadow 0.15s, opacity 0.15s; opacity:0.92; }
.sn-tile-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.sn-tile-img.sn-nothumb .sn-initial{ font-size:30px; }
.sn-tile-cap{ display:flex; align-items:baseline; gap:5px; min-width:0; line-height:1.2; }
.sn-tile-title{ font-family:'Instrument Serif', serif; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:0 1 auto; }
.sn-tile-year{ font-size:10.5px; color:var(--muted); flex:none; }
.sn-tile:hover .sn-tile-img{ opacity:1; box-shadow:0 0 0 2px var(--cover-teal); }
.sn-tile:hover .sn-tile-title{ color:var(--accent-2); }
.sn-tile.is-current .sn-tile-img{ opacity:1; box-shadow:0 0 0 2px var(--accent-2); }
.sn-tile.is-current .sn-tile-title{ color:var(--accent-2); }
.sn-arrow{
  flex:none; align-self:flex-start; margin-top:20px; width:32px; height:32px; border-radius:50%; cursor:pointer;
  background:#fff; border:1px solid var(--rule); font-size:21px; line-height:1; color:var(--ink); box-shadow:0 4px 10px -6px rgba(0,0,0,0.45);
}
.sn-arrow:hover{ color:var(--accent-2); border-color:var(--accent); }
.sn-arrow.is-off{ opacity:0; pointer-events:none; }
.sn-toggle{
  flex:none; align-self:flex-start; margin-top:20px; width:32px; height:32px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--rule); color:var(--muted);
}
.sn-toggle:hover{ color:var(--accent-2); border-color:var(--accent); }

/* collapsed: compact newer / older bar */
.sn-compact{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
  padding:9px max(16px, calc((100vw - 1180px) / 2));
}
.sn-side{ display:flex; align-items:center; gap:10px; min-width:0; text-decoration:none; color:var(--ink); border-radius:4px; padding:3px 4px; }
.sn-side.sn-next{ justify-content:flex-end; text-align:right; }
.sn-side:hover .sn-title{ color:var(--accent-2); }
.sn-empty{ pointer-events:none; }
.sn-text{ display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.sn-dir{ font-size:10.5px; letter-spacing:0.09em; text-transform:uppercase; color:var(--muted); }
.sn-title{ font-family:'Instrument Serif', serif; font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color 0.15s; }
.sn-thumb{ flex:none; width:64px; height:43px; border-radius:3px; overflow:hidden; background:var(--teal-tint); display:block; }
.sn-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.sn-nothumb{ display:flex; align-items:center; justify-content:center; }
.sn-initial{ font-family:'Instrument Serif', serif; font-style:italic; font-size:22px; color:var(--accent-2); }
.sn-browse{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font:500 12.5px 'Work Sans', sans-serif; letter-spacing:0.02em; color:var(--ink);
  background:#fff; border:1px solid var(--rule); border-radius:999px; padding:9px 14px;
}
.sn-browse:hover{ border-color:var(--accent); color:var(--accent-2); }
.sn-count{ color:var(--muted); font-weight:400; padding-left:8px; border-left:1px solid var(--rule); }
.sn-side:focus-visible, .sn-browse:focus-visible, .sn-tile:focus-visible, .sn-arrow:focus-visible, .sn-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* fixed prev/next click arrows, either side of the viewport (desktop; hidden on touch-sized screens, swipe covers those) */
.sn-edge{
  position:fixed; top:50%; transform:translateY(-50%); z-index:20;
  width:44px; height:44px; border-radius:50%; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--rule); color:var(--ink);
  font-family:inherit; font-size:26px; line-height:1;
  box-shadow:0 6px 16px -8px rgba(28,26,23,0.4);
  opacity:0.5; transition:opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sn-edge-l{ left:18px; } .sn-edge-r{ right:18px; }
.sn-edge:hover{ opacity:1; color:var(--accent-2); border-color:var(--accent); }
.sn-edge:focus-visible{ opacity:1; outline:2px solid var(--accent); outline-offset:2px; }
.sn-edge.is-off{ display:none; }
@media (max-width: 900px){ .sn-edge{ display:none; } }
@media (prefers-reduced-motion: reduce){ .sn-edge{ transition:none; } }

.sn-veil{ position:fixed; inset:0; z-index:40; background:var(--bg); opacity:0; pointer-events:none; transition:opacity 0.17s ease, transform 0.17s ease; }
.sn-veil.sn-out{ opacity:1; pointer-events:auto; }
.sn-veil.sn-out.sn-to-left{ transform:translateX(-14px); } .sn-veil.sn-out.sn-to-right{ transform:translateX(14px); }
.sn-veil.sn-in{ opacity:1; transition:none; }
.sn-veil.sn-in.sn-from-right{ transform:translateX(14px); } .sn-veil.sn-in.sn-from-left{ transform:translateX(-14px); }
@media (prefers-reduced-motion: reduce){ .sn-veil, .sn-tile-img{ transition:none; } }

@media (max-width: 720px){
  body.has-show-nav{ padding-bottom:60px; }
  body.has-show-nav.sn-expanded{ padding-bottom:112px; }
  .sn-tile{ width:88px; }
  .sn-tile-title{ font-size:12.5px; }
  .sn-full{ padding:9px 10px 7px; gap:6px; }
  .sn-strip{ padding:2px 4px; -webkit-mask-image:none; mask-image:none; }
  .sn-arrow{ display:none; }
  .sn-toggle{ margin-top:12px; width:30px; height:30px; }
  .sn-compact{ grid-template-columns:1fr auto 1fr; gap:6px; padding-left:10px; padding-right:10px; }
  .sn-thumb{ width:46px; height:31px; }
  .sn-title{ font-size:14.5px; }
  .sn-dir{ font-size:9.5px; }
  .sn-browse{ padding:8px 11px; }
  .sn-browse-label{ display:none; }
  .sn-count{ border-left:none; padding-left:0; }
}
@media (max-width: 420px){ .sn-text{ display:none; } .sn-side{ justify-content:center; } }

/* ---------- Lightbox (js/lightbox.js): click any photo that isn't itself a link to see it larger, without
   leaving the page. Images that are already links (show thumbnails, book covers linking out) keep navigating
   as normal -- the script never attaches to those. ---------- */
.lb-clickable{ cursor:zoom-in; }
.lb-overlay{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(15,13,11,0.82); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity 0.2s ease; padding:40px 24px;
}
.lb-overlay.is-open{ opacity:1; pointer-events:auto; }
.lb-figure{ max-width:92vw; max-height:88vh; display:flex; flex-direction:column; align-items:center; gap:12px; transform:scale(0.97); transition:transform 0.2s ease; }
.lb-overlay.is-open .lb-figure{ transform:scale(1); }
.lb-img{ max-width:92vw; max-height:80vh; width:auto; height:auto; display:block; border-radius:2px; box-shadow:0 30px 60px -20px rgba(0,0,0,0.6); }
.lb-caption{ color:rgba(255,255,255,0.88); font-size:13.5px; text-align:center; max-width:640px; line-height:1.5; }
.lb-caption:empty{ display:none; }
.lb-close, .lb-arrow{
  position:fixed; border:none; cursor:pointer; border-radius:50%; color:#fff;
  background:rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; line-height:1;
  transition:background 0.15s ease;
}
.lb-close:hover, .lb-arrow:hover{ background:rgba(255,255,255,0.22); }
.lb-close{ top:20px; right:24px; width:40px; height:40px; font-size:22px; }
.lb-arrow{ top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:26px; }
.lb-arrow.lb-prev{ left:20px; } .lb-arrow.lb-next{ right:20px; }
.lb-arrow.is-hidden{ display:none; }
@media (max-width: 640px){
  .lb-close{ top:12px; right:12px; width:36px; height:36px; font-size:19px; }
  .lb-arrow{ width:40px; height:40px; font-size:22px; }
  .lb-arrow.lb-prev{ left:8px; } .lb-arrow.lb-next{ right:8px; }
}

/* Show pages: link to this production's reviews on press.html (added by tools/press/build_press.py) */
.reviews-link{ display:inline-block; margin-top:16px; font-size:13px; letter-spacing:0.04em; color:var(--accent); border-bottom:1px solid transparent; }
.reviews-link:hover{ border-color:var(--accent); }

/* Show pages: "In the media" video/interview links */
.show-media-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(300px,100%), 1fr)); gap:24px; max-width:980px; }
.show-media-card{ display:flex; flex-direction:column; gap:4px; color:var(--ink); }
.smc-thumb{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; border-radius:2px; background:var(--panel); margin-bottom:8px; }
.smc-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 300ms ease; }
.show-media-card:hover .smc-thumb img{ transform:scale(1.03); }
.smc-play{ position:absolute; left:50%; top:50%; width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%; background:rgba(28,26,23,0.62); }
.smc-play::after{ content:""; position:absolute; left:20px; top:16px; border-left:16px solid #fff; border-top:10px solid transparent; border-bottom:10px solid transparent; }
.smc-kind{ font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); }
.smc-title{ font-size:15.5px; line-height:1.4; }
.show-media-card:hover .smc-title{ color:var(--accent-2); }
.smc-sub{ font-size:12.5px; color:var(--muted); }
@media (max-width:900px){ .show-media{ padding-left:24px !important; padding-right:24px !important; } }

/* Show pages: status badge + tickets link (tools/new_production.py) */
.show-status{ display:inline-block; margin-left:12px; padding:3px 9px; border-radius:999px; background:var(--wine-tint); color:var(--accent-2); font-size:11px; letter-spacing:0.1em; }
.show-status.now{ background:var(--teal-tint); color:var(--accent); }
.show-tickets{ display:inline-block; margin-top:14px; font-size:13.5px; color:var(--accent); border-bottom:1px solid transparent; }
.show-tickets:hover{ border-color:var(--accent); }

/* Homepage: "What's next" section (tools/build_now.py) */
/* Homepage "What's next": a compact strip. Small thumbnail + title, venue, dates, links. The blurb and cast
   stay in the markup (and on each show page) but are hidden here to keep the strip short. */
.whats-next{ padding:26px 64px 24px; border-bottom:1px solid var(--rule); background:var(--bg); }
.whats-next > .eyebrow{ margin-bottom:14px; }
.wn-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(250px,100%), 1fr)); gap:18px 24px; }
.wn-card{ display:grid; grid-template-columns:88px minmax(0,1fr); column-gap:14px; align-items:start; }
.wn-card + .wn-card{ border-left:1px solid var(--rule); padding-left:24px; }
.wn-img{ display:block; aspect-ratio:1/1; overflow:hidden; border-radius:2px; background:var(--panel); }
.wn-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 400ms ease; }
.wn-img.wn-contain{ background:#0d1420; }
.wn-img.wn-contain img{ object-fit:contain; }
.wn-img.wn-natural{ aspect-ratio:auto; background:none; }
.wn-img.wn-natural img{ height:auto; }
.wn-img:hover img{ transform:scale(1.04); }
.wn-label{ display:inline-block; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; padding:2px 8px; border-radius:999px; background:var(--teal-tint); color:var(--accent); }
.wn-label.up{ background:var(--wine-tint); color:var(--accent-2); }
.wn-tag{ font-size:12.5px; color:var(--muted); margin-left:8px; white-space:nowrap; }
.wn-title{ margin:6px 0 3px; font-family:'Instrument Serif', serif; font-weight:400; font-style:italic; font-size:22px; line-height:1.05; }
.wn-title a{ color:var(--accent-2); }
.wn-when{ font-size:12.5px; color:var(--muted); line-height:1.45; }
.wn-blurb, .wn-cast{ display:none; }
/* optional pull quote from a review: full card width, under the thumbnail, above the buttons */
.wn-quote{ grid-column:1 / -1; margin:10px 0 0; font-family:'Instrument Serif', serif; font-style:italic; font-size:15px; line-height:1.25; color:var(--ink); }
.wn-quote span{ font-family:'Work Sans', sans-serif; font-style:normal; font-size:11.5px; color:var(--muted); white-space:nowrap; }
/* links sit on one line under the thumbnail */
.wn-links{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px 8px; margin-top:10px; }
/* pill buttons, matching the labels: See more is teal, Tickets (external) is pink */
.wn-links a{ display:inline-block; font-size:12px; line-height:1; padding:6px 12px; border-radius:999px; border:1px solid var(--accent); background:var(--teal-tint); color:var(--accent); transition:background 150ms ease, color 150ms ease; }
.wn-links a[target="_blank"]{ background:var(--wine-tint); color:var(--accent-2); border-color:var(--accent-2); }
.wn-links a:hover{ background:var(--accent); color:#fff; }
.wn-links a[target="_blank"]:hover{ background:var(--accent-2); color:#fff; }
/* briefs: one slim line each, side by side */
.wn-briefs{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(320px,100%), 1fr)); gap:12px; margin-top:20px; }
.wn-brief{ padding:9px 16px; border-left:3px solid var(--cover-teal); background:var(--teal-tint); border-radius:0 2px 2px 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 14px; }
.wn-brief.wn-wine{ border-left-color:var(--accent-2); background:var(--wine-tint); }
.wn-brief-label{ font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); white-space:nowrap; }
.wn-wine .wn-brief-label{ color:var(--accent-2); }
.wn-brief ul{ list-style:none; margin:0; padding:0; flex:1 1 300px; }
.wn-brief li{ display:inline; font-size:13.5px; line-height:1.5; }
.wn-brief li + li::before{ content:"\00a0\00b7\00a0 "; color:var(--muted); }
.wn-brief a{ color:var(--ink); border-bottom:1px solid rgba(28,26,23,0.25); }
.wn-brief a:hover{ color:var(--accent-2); border-color:var(--accent-2); }
a.wn-brief{ color:var(--ink); text-decoration:none; transition:filter 150ms ease; }
a.wn-brief:hover{ filter:brightness(0.97); }
a.wn-brief:hover li{ text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(28,26,23,0.35); }
a.wn-brief{ position:relative; padding-right:40px; }
.wn-brief-go{ position:absolute; right:16px; top:50%; margin-top:-0.75em; line-height:1.5; color:var(--accent); transition:transform 150ms ease; }
.wn-wine .wn-brief-go{ color:var(--accent-2); }
a.wn-brief:hover .wn-brief-go{ transform:translateX(3px); }
/* anchors land below the sticky header */
#book2, #essays, #playwriting, #resume{ scroll-margin-top:140px; }
/* five items on a wide screen: one row, smaller thumbnails and titles */
@media (min-width:1241px){
  .wn-cards.wn-n5{ grid-template-columns:repeat(5, minmax(0,1fr)); gap:0 20px; }
  .wn-n5 .wn-card{ grid-template-columns:64px minmax(0,1fr); column-gap:12px; }
  .wn-n5 .wn-card + .wn-card{ padding-left:20px; }
  .wn-n5 .wn-title{ font-size:19px; }
}
@media (max-width:1240px){
  /* once items wrap onto more than one row, each one gets its own frame instead of divider lines */
  .wn-cards{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
  .wn-card, .wn-card + .wn-card{ border:1px solid var(--rule); border-radius:4px; padding:14px; align-self:stretch; }
}
@media (max-width:900px){
  .whats-next{ padding:24px 24px 22px; }
}
@media (max-width:600px){
  .wn-cards{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .wn-card, .wn-card + .wn-card{ padding:12px; }
  .wn-card{ grid-template-columns:72px minmax(0,1fr); column-gap:12px; }
  .wn-title{ font-size:20px; }
}

/* Author page: second book shown as the full wrap (back, spine, front) */
.book2-grid{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:48px; align-items:start; }
@media (max-width:900px){
  .book2-grid{ grid-template-columns:minmax(0,1fr); gap:24px; }
  /* stacked on a phone/tablet: a subtle grey rule between the two books, like the dividers elsewhere */
  .book1-section{ position:relative; }
  .book1-section::before{ content:""; position:absolute; top:0; left:24px; right:24px; border-top:1px solid var(--rule); }
}