/*
Theme Name: Espindola
Theme URI: https://davidespindola.com
Author: David Espindola
Description: Editorial theme for davidespindola.com. Night and paper editions,
  Fraunces + Karla, with navy and umber bands sampled from the hero photograph.
  No page builder — templates and hand-written CSS only.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 7.4
License: Proprietary
Text Domain: espindola
*/

@font-face{font-family:"Fraunces";src:url("assets/fonts/fraunces.woff2") format("woff2-variations");font-weight:300 700;font-style:normal;font-display:swap;}
@font-face{font-family:"Karla";src:url("assets/fonts/karla.woff2") format("woff2-variations");font-weight:300 700;font-style:normal;font-display:swap;}
@font-face{font-family:"Karla";src:url("assets/fonts/karla-italic.woff2") format("woff2-variations");font-weight:300 600;font-style:italic;font-display:swap;}

/* ===== NIGHT EDITION (default) ===== */
:root{
  --bg:#0C0F14;
  --bg-2:#141922;
  --bg-3:#1C222D;
  --fg:#EDE7DA;
  --fg-2:#A3ABB8;
  --fg-3:#747D8B;
  --accent:#C7A24B;
  --accent-soft:rgba(199,162,75,.20);
  --rule:#232A35;
  --rule-2:#333C4A;
  --on-accent:#0C0F14;
  --img-shade:1;

  --f-display:"Fraunces",Georgia,"Times New Roman",serif;
  --f-sans:"Karla",-apple-system,"Helvetica Neue",Arial,sans-serif;

  --wonk:"SOFT" 24,"WONK" 0;
  --measure:62ch;
  --pad:clamp(22px,5.2vw,72px);
  --max:1300px;
  --gut:clamp(28px,4.6vw,72px);
}
@media (prefers-color-scheme:light){
  :root{
    --bg:#EFEAE0;--bg-2:#F7F4EC;--bg-3:#E5DECF;
    --fg:#14171C;--fg-2:#565E6B;--fg-3:#616975;
    --accent:#8A6A1E;--accent-soft:rgba(138,106,30,.16);
    --rule:#DCD4C4;--rule-2:#C6BCA6;
    --on-accent:#FDFBF6;--img-shade:.94;
  }
}
:root[data-theme="light"]{
  --bg:#EFEAE0;--bg-2:#F7F4EC;--bg-3:#E5DECF;
  --fg:#14171C;--fg-2:#565E6B;--fg-3:#616975;
  --accent:#8A6A1E;--accent-soft:rgba(138,106,30,.16);
  --rule:#DCD4C4;--rule-2:#C6BCA6;
  --on-accent:#FDFBF6;--img-shade:.94;
}
:root[data-theme="dark"]{
  --bg:#0C0F14;--bg-2:#141922;--bg-3:#1C222D;
  --fg:#EDE7DA;--fg-2:#A3ABB8;--fg-3:#747D8B;
  --accent:#C7A24B;--accent-soft:rgba(199,162,75,.20);
  --rule:#232A35;--rule-2:#333C4A;
  --on-accent:#0C0F14;--img-shade:1;
}

/* ===== TINTED BANDS =====
   Both hues are sampled from the hero photograph — the cobalt of the projection
   wash (#2A579B) and the warm stage brown (#8C6859) — deepened into grounds.
   They alternate down the page so the hero's colour carries through instead of
   the page settling into one continuous tone. Theme-independent by design:
   in the paper edition they are the dark punctuation, in the night edition
   they are the colour. Components read these tokens, so nothing else changes. */
.tinted{
  --fg:#F2ECDE; --fg-2:#C6C2B6; --fg-3:#A19B8F;
  --rule:rgba(242,236,222,.15); --rule-2:rgba(242,236,222,.30);
  --accent:#DCBB6C; --accent-soft:rgba(220,187,108,.26);
  --on-accent:#1A1206; --bg-2:rgba(255,255,255,.05); --bg-3:rgba(255,255,255,.07);
  --img-shade:1;
  color:var(--fg);
}
.tinted.navy       {background:#16325C;}
.tinted.navy-deep  {background:#101F38;}
.tinted.umber      {background:#3B2A21;}
.tinted.umber-deep {background:#241A15;}

*{box-sizing:border-box;}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--f-sans);font-size:17px;line-height:1.66;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:1.5px solid var(--accent);outline-offset:3px;}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}

/* running-head label: small caps on a rule — the monograph device */
.label{
  font-family:var(--f-sans);font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
}
.dek{font-style:italic;color:var(--fg-2);}

h1,h2,h3,h4{font-family:var(--f-display);font-variation-settings:var(--wonk);font-weight:400;margin:0;}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;border-bottom:1px solid var(--rule);
  /* Solid, deliberately. The translucent + backdrop-blur version rendered
     inconsistently across Safari versions — frosted on iPhone, fully
     transparent on iPad, where color-mix() invalidated the declaration and the
     page scrolled through the wordmark. A solid bar behaves the same
     everywhere and costs nothing. */
  background:var(--bg);
}
.nav .wrap{display:flex;align-items:center;gap:30px;padding-top:15px;padding-bottom:15px;}
.mark{font-family:var(--f-display);font-variation-settings:var(--wonk);font-size:19px;font-weight:500;letter-spacing:.01em;white-space:nowrap;}
.mark b{font-weight:600;}
.mark span{color:var(--fg-3);font-weight:400;}
.navlinks{display:flex;gap:24px;margin-left:auto;flex-wrap:wrap;}
/* Works for both the wp_nav_menu <ul> and the hardcoded fallback anchors. */
.navlinks ul,.navlinks .navmenu{
  display:flex;gap:24px;margin:0;padding:0;list-style:none;flex-wrap:wrap;align-items:center;
}
.navlinks li{list-style:none;}
.navlinks .current-menu-item > a,
.navlinks .current_page_item > a{color:var(--fg);border-bottom-color:var(--accent);}
.navlinks a{font-size:14.5px;font-weight:600;color:var(--fg);letter-spacing:.005em;padding-bottom:3px;border-bottom:1.5px solid transparent;transition:color .2s,border-color .2s;}
.navlinks a:hover{color:var(--accent);border-bottom-color:var(--accent);}
@media (max-width:940px){.navlinks{display:none;}}

/* ---------- hero ---------- */
/* The fill left of the photo is the photo's own left-edge ramp, sampled from
   the source: deep blue at the top, cobalt at 44%, near-black at the base.
   The image's left edge is then masked to dissolve into it, so there is no seam. */
.hero{position:relative;overflow:hidden;}
.hero-frame{
  position:relative;width:100%;aspect-ratio:2.45/1;min-height:420px;max-height:78vh;
  background:linear-gradient(180deg,
    #184481 0%, #1d5db2 19%, #2160bd 31%, #2263c6 44%,
    #2d4a8e 56%, #322d35 69%, #2e2c34 81%, #151418 100%);
}
.hero-frame img{
  position:absolute;top:0;right:0;height:100%;width:76%;
  object-fit:cover;object-position:44% center;
  filter:brightness(var(--img-shade));
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 30%);
}
.hero-frame::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(96deg,rgba(8,10,14,.88) 0%,rgba(8,10,14,.70) 26%,rgba(8,10,14,.30) 44%,rgba(8,10,14,0) 64%),
    linear-gradient(0deg,rgba(8,10,14,.82) 0%,rgba(8,10,14,0) 46%);
}
.hero-copy{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;}
/* min-width:0 — without it the flex item refuses to shrink below the
   max-content width of the unwrapped sub-headline and the page scrolls sideways. */
.hero-copy .wrap{width:100%;min-width:0;padding-bottom:clamp(38px,5.6vw,74px);}
.hero-copy .label{color:#D7B75F;}
.hero h1{
  font-size:clamp(2.6rem,6.1vw,5.4rem);line-height:.96;letter-spacing:-.022em;font-weight:400;
  color:#F4EFE4;margin:16px 0 0;max-width:11ch;text-wrap:balance;
}
.hero h1 .soul{display:block;font-weight:600;color:#E4C87E;}
.hero-rule{width:56px;height:1px;background:#C7A24B;margin:26px 0 20px;}
.hero p.sub{
  font-size:clamp(1rem,1.55vw,1.2rem);line-height:1.5;color:rgba(244,239,228,.82);
  max-width:34ch;margin:0 0 30px;
}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;}
/* Narrow screens: the picture stays large but the copy drops below it on a
   dark plate, so type never sits over his face at any width. The plate is
   hardcoded dark in both themes to match the always-dark hero band. */
@media (max-width:820px){
  .hero-frame{aspect-ratio:4/3;max-height:none;min-height:0;background:#151418;}
  .hero-frame img{
    position:static;width:100%;height:100%;object-position:52% 18%;
    -webkit-mask-image:none;mask-image:none;
  }
  .hero-frame::after{background:linear-gradient(0deg,rgba(8,10,14,.80) 0%,rgba(8,10,14,0) 32%);}
  .hero-copy{position:static;background:#0E1116;}
  .hero-copy .wrap{padding-top:30px;padding-bottom:38px;}
  .hero h1{max-width:none;}
  .hero p.sub{max-width:none;}
}

/* ---------- press marks ----------
   Three marks in three different brand systems, so they are normalised to a
   single ink colour and balanced optically rather than by a shared box: a
   stacked logo set to the same height as a wordmark reads far heavier.

   Centred and stacked under the label. With only three marks a left-aligned
   row reads as a row that ran out; centring makes the count look deliberate.
   No bottom rule here — the next section's head already draws one, and two
   hairlines a few pixels apart read as a mistake. */
.press{}
.press .wrap{
  display:flex;flex-direction:column;align-items:center;gap:18px;
  padding-top:34px;padding-bottom:38px;
}
.press .label{color:var(--fg-3);}
.press ul{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(34px,6vw,72px);margin:0;padding:0;list-style:none;flex-wrap:wrap;
}
.press li{display:flex;align-items:center;min-width:0;}
.press img{
  width:auto;display:block;
  filter:brightness(0) invert(1);   /* night edition: knock to white */
  opacity:.78;transition:opacity .2s;
}
.press li:hover img{opacity:1;}
.press .m-fox img{height:64px;}     /* stacked 3-line mark: its internal text is
                                       small, so it needs more box height than a
                                       wordmark to read at the same weight */
.press .m-forbes img{height:34px;}
.press .m-globo img{height:31px;}
@media (prefers-color-scheme:light){
  .press img{filter:brightness(0) saturate(0);opacity:.68;}
}
:root[data-theme="light"] .press img{filter:brightness(0) saturate(0);opacity:.68;}
:root[data-theme="dark"] .press img{filter:brightness(0) invert(1);opacity:.78;}
@media (max-width:640px){
  .press ul{gap:26px;}
  .press .m-fox img{height:48px;}
  .press .m-forbes img{height:26px;}
  .press .m-globo img{height:24px;}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--f-sans);
  font-size:14px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:14px 26px;border:1px solid transparent;cursor:pointer;background:none;
  transition:background .22s,color .22s,border-color .22s;
}
.btn-gold{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
.btn-gold:hover{background:transparent;color:var(--accent);}
.hero .btn-gold{background:#C7A24B;color:#0C0F14;border-color:#C7A24B;}
.hero .btn-gold:hover{background:transparent;color:#E4C87E;border-color:#E4C87E;}
.btn-line{border-color:var(--rule-2);color:var(--fg);}
.btn-line:hover{border-color:var(--accent);color:var(--accent);}
.hero .btn-line{border-color:rgba(244,239,228,.42);color:#F4EFE4;}
.hero .btn-line:hover{border-color:#E4C87E;color:#E4C87E;}

/* ---------- section chrome: label sits on the rule ---------- */
.sec{padding-top:clamp(56px,7.6vw,110px);padding-bottom:clamp(56px,7.6vw,110px);}
.sec-head{border-top:1px solid var(--rule-2);padding-top:14px;margin-bottom:clamp(28px,3.6vw,48px);display:flex;gap:20px;align-items:baseline;flex-wrap:wrap;}
.sec-head .label{flex:0 0 auto;}
.sec-head .note{margin-left:auto;font-size:14px;color:var(--fg-3);font-style:italic;}
h1.title,h2.title{
  font-size:clamp(1.95rem,4.1vw,3.35rem);line-height:1.08;letter-spacing:-.02em;
  font-weight:400;max-width:20ch;text-wrap:balance;margin:0 0 22px;
}
h1.title b,h2.title b{font-weight:600;color:var(--accent);}
.lede{font-size:clamp(1.04rem,1.55vw,1.28rem);line-height:1.55;color:var(--fg);max-width:52ch;margin:0 0 22px;font-weight:300;}
p.body{color:var(--fg-2);max-width:var(--measure);margin:0 0 18px;text-wrap:pretty;}

/* ---------- premise ---------- */
.split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--gut);align-items:start;}
@media (max-width:880px){.split{grid-template-columns:1fr;}}
.portrait figure{margin:0;}
.portrait img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 18%;filter:brightness(var(--img-shade));}
.portrait figcaption{margin-top:14px;font-size:15px;line-height:1.65;color:var(--fg-2);border-top:1px solid var(--rule);padding-top:14px;}
.sign{font-family:var(--f-display);font-variation-settings:var(--wonk);font-size:1.35rem;color:var(--fg);margin-top:26px;font-weight:500;}

/* ---------- the pull quote (the flare moment) ---------- */
.quote-band{border:0;}
.quote-band .wrap{padding-top:clamp(52px,7vw,96px);padding-bottom:clamp(52px,7vw,96px);}
/* This band is the one place on the page carrying no photography — the type is
   the design element, so it has to be large enough to actually be one. At a
   smaller size it filled half the band and read as a text block that stopped
   rather than as composed negative space. The opening quote mark hangs into the
   left margin (optical alignment), which is what stops the first line looking
   indented against everything else on the page. */
.quote-band .wrap{position:relative;}
.bigquote{
  font-family:var(--f-display);font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:clamp(2rem,5.9vw,5rem);line-height:1.08;letter-spacing:-.028em;
  font-weight:300;color:var(--fg);max-width:21ch;margin:0;text-wrap:balance;
  position:relative;
}
.bigquote::before{
  content:"\201C";position:absolute;right:100%;top:-.06em;
  margin-right:.04em;color:var(--accent);opacity:.82;
  font-size:1.15em;line-height:1;font-weight:400;pointer-events:none;
}
@media (max-width:900px){
  /* No room to hang the glyph — tuck it back inline. */
  .bigquote::before{position:static;float:left;margin-right:.06em;font-size:1em;}
}
.bigquote em{font-style:normal;font-weight:600;color:var(--accent);}
.quote-meta{
  margin-top:34px;display:flex;gap:16px;align-items:center;
  color:var(--fg-2);font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
}
.quote-meta::before{content:"";width:54px;height:1px;background:var(--accent);flex:0 0 54px;}

/* ---------- books ---------- */
.books{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut);}
@media (max-width:820px){.books{grid-template-columns:1fr;}}
.book{display:flex;flex-direction:column;gap:16px;border-top:1px solid var(--rule);padding-top:26px;}
.book-head{display:flex;gap:22px;align-items:flex-start;}
/* Both covers carry real alpha and are cropped to the book itself, then
   exported at a common pixel height. Sizing by height rather than width keeps
   the two standing level even though their aspect ratios differ — a width rule
   would render whichever book is narrower noticeably smaller. */
.book-head img{height:clamp(190px,21vw,250px);width:auto;flex:0 0 auto;}
.book h3{font-size:1.65rem;line-height:1.12;letter-spacing:-.018em;font-weight:500;margin:0 0 7px;}
/* Subtitle sits in sentence case: these run long, and uppercase at this length
   is genuinely hard to read. The year/publisher rail below carries the caps. */
.book .subtitle{
  font-size:15px;line-height:1.4;color:var(--fg-2);margin:0 0 9px;
  max-width:34ch;font-weight:400;
}
.book .meta{font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-2);}
.seal{
  display:inline-flex;align-items:flex-start;gap:7px;margin-top:12px;
  font-size:10.5px;letter-spacing:.14em;line-height:1.5;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent);padding:6px 11px;font-weight:600;
  max-width:38ch;   /* a long series name wraps inside the box instead of stretching it */
}
.book blockquote{margin:0;font-family:var(--f-sans);font-style:italic;font-size:1.02rem;line-height:1.6;color:var(--fg-2);border-left:1px solid var(--rule-2);padding-left:18px;}
/* Attributions run to a full title and affiliation, so the name is set in caps
   and the role beneath in sentence case — all-caps at that length is a wall. */
.book blockquote cite{
  display:block;font-style:normal;margin-top:12px;
  font-size:13px;line-height:1.5;color:var(--fg-3);letter-spacing:0;text-transform:none;
}
.book blockquote cite b{
  display:block;font-weight:600;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-2);margin-bottom:3px;
}
.book .links{margin-top:auto;padding-top:8px;display:flex;gap:20px;flex-wrap:wrap;}
.book .links a{font-size:13.5px;font-weight:600;letter-spacing:.04em;color:var(--accent);border-bottom:1px solid var(--accent-soft);padding-bottom:2px;transition:border-color .2s;}
.book .links a:hover{border-bottom-color:var(--accent);}

/* ---------- stage: full-bleed film strip ---------- */
.bleed{border:0;}
.bleed .wrap{padding-top:clamp(56px,7vw,100px);padding-bottom:clamp(40px,5vw,64px);}
.filmstrip{overflow-x:auto;padding-bottom:18px;}
.strip{display:flex;gap:20px;min-width:min-content;}
.frame{flex:0 0 clamp(280px,32vw,400px);}
.frame .shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-3);}
.frame .shot img,
.frame .shot video.loop{width:100%;height:100%;object-fit:cover;filter:brightness(var(--img-shade));transition:transform .5s cubic-bezier(.16,1,.3,1);display:block;}
.frame:hover .shot img{transform:scale(1.035);}
.frame .cap{padding-top:14px;border-top:1px solid var(--rule-2);margin-top:14px;}
.frame .cap .label{color:var(--fg-3);}
.frame .cap h4{font-size:1.15rem;line-height:1.25;font-weight:500;margin:7px 0 5px;letter-spacing:-.012em;}
.frame .cap p{margin:0;font-size:14.5px;color:var(--fg-2);line-height:1.55;}
.playmark{position:absolute;left:16px;bottom:16px;width:40px;height:40px;border:1px solid rgba(244,239,228,.7);border-radius:50%;display:grid;place-items:center;background:rgba(10,13,18,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.playmark::before{content:"";border-left:10px solid #F4EFE4;border-top:6.5px solid transparent;border-bottom:6.5px solid transparent;margin-left:3px;}
.stripnote{margin-top:8px;font-size:14px;color:var(--fg-2);font-style:italic;}

/* ---------- nexus ---------- */
.nexus{display:grid;grid-template-columns:172px minmax(0,1fr);gap:var(--gut);align-items:center;}
@media (max-width:680px){.nexus{grid-template-columns:1fr;}}
.nexus img{width:172px;}
.li-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:26px;}
.li-note{font-size:14px;color:var(--fg-2);font-style:italic;}

/* ---------- advisory ---------- */
.threads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);margin-top:8px;}
@media (max-width:880px){.threads{grid-template-columns:1fr;gap:32px;}}
.thread{border-top:1px solid var(--rule-2);padding-top:18px;display:flex;flex-direction:column;gap:10px;}
.thread h3{font-size:1.42rem;line-height:1.16;font-weight:500;letter-spacing:-.015em;margin:0;}
.thread p{margin:0;font-size:14.5px;line-height:1.62;color:var(--fg-2);}
.handoff{
  margin-top:clamp(34px,4.4vw,56px);border:1px solid var(--rule-2);padding:clamp(24px,3.4vw,38px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;
}
@media (max-width:760px){.handoff{grid-template-columns:1fr;}}
.handoff h3{font-size:1.5rem;font-weight:500;margin:0 0 8px;letter-spacing:-.015em;}
.handoff p{margin:0;color:var(--fg-2);font-size:15px;max-width:56ch;}
.handoff .rostr{margin-top:14px;font-size:14px;color:var(--fg-2);line-height:1.7;}

/* ---------- impact ----------
   One strong photograph exists (Mercy Ships), two usable but low-resolution,
   and none for education. The layout is built around that: a lead image
   carries the section, the rest sit small where their quality holds up. */
.impact-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--gut);align-items:start;}
@media (max-width:900px){.impact-grid{grid-template-columns:1fr;}}
.cause-lead{border-top:1px solid var(--rule-2);padding-top:18px;}
.cause-lead .shotimg{aspect-ratio:4/3;overflow:hidden;margin-bottom:18px;background:var(--bg-3);}
.cause-lead .shotimg img{width:100%;height:100%;object-fit:cover;filter:brightness(var(--img-shade));}
.cause-lead h3{font-size:1.58rem;font-weight:500;margin:8px 0 8px;letter-spacing:-.015em;}
.cause-lead p{margin:0;font-size:15px;color:var(--fg-2);line-height:1.62;max-width:46ch;}
.cause-list{display:flex;flex-direction:column;gap:24px;}
.cause-row{display:grid;grid-template-columns:104px minmax(0,1fr);gap:20px;align-items:start;border-top:1px solid var(--rule-2);padding-top:18px;transition:border-color .25s;}
.cause-row:hover{border-top-color:var(--accent);}
.cause-row .thumb{aspect-ratio:1;overflow:hidden;background:var(--bg-3);}
.cause-row .thumb img{width:100%;height:100%;object-fit:cover;filter:brightness(var(--img-shade));}
.cause-row .plate{aspect-ratio:1;display:grid;place-items:center;border:1px solid var(--rule-2);background:var(--bg-3);}
.cause-row .plate span{font-family:var(--f-display);font-variation-settings:var(--wonk);font-size:1.6rem;font-weight:600;color:var(--accent);letter-spacing:.02em;}
.cause-row h3{font-size:1.2rem;font-weight:500;margin:7px 0 6px;letter-spacing:-.012em;}
.cause-row p{margin:0;font-size:15px;color:var(--fg-2);line-height:1.6;}

/* ---------- writing ---------- */
.entries{border-top:1px solid var(--rule);}
.entry{display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:26px;align-items:baseline;padding:19px 0;border-bottom:1px solid var(--rule);transition:padding-left .28s cubic-bezier(.16,1,.3,1);}
.entry:hover{padding-left:12px;}
.entry .when{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-2);font-variant-numeric:tabular-nums;}
.entry h3{font-size:1.24rem;line-height:1.3;font-weight:400;margin:0;letter-spacing:-.012em;text-wrap:balance;}
.entry:hover h3{color:var(--accent);}
.entry .kind{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap;}
@media (max-width:720px){.entry{grid-template-columns:1fr;gap:5px;}.entry .kind{display:none;}}
.allwriting{margin-top:28px;display:inline-flex;gap:9px;font-size:13.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--accent-soft);padding-bottom:3px;}
.allwriting:hover{border-bottom-color:var(--accent);}

/* ---------- footer ---------- */
.foot{border:0;}
.foot .wrap{padding-top:clamp(48px,6vw,76px);padding-bottom:28px;}
.footgrid{display:grid;grid-template-columns:2.1fr 1fr 1fr 1fr;gap:var(--gut);}
@media (max-width:800px){.footgrid{grid-template-columns:1fr 1fr;}}
.foot h5{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 14px;font-weight:600;font-family:var(--f-sans);}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.foot li a{font-size:14.5px;color:var(--fg-2);}
.foot li a:hover{color:var(--fg);}
.footmark .mark{font-size:23px;display:block;margin-bottom:12px;}
.footmark p{margin:0;font-size:15px;color:var(--fg-2);max-width:32ch;line-height:1.65;}
.footbase{border-top:1px solid var(--rule);}
.footbase .wrap{display:flex;gap:20px;flex-wrap:wrap;font-size:14px;color:var(--fg-2);padding-top:20px;padding-bottom:38px;}
.footbase .soc{margin-left:auto;display:flex;gap:18px;}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
  /* Playback itself is paused in assets/js/video.js — CSS cannot stop a
     <video autoplay>, so the preference has to be honoured in script. */
}

/* =========================================================
   WordPress surfaces that the static mockup did not cover:
   long-form prose, post furniture, pagination, and the
   pending-image placeholder.
   ========================================================= */

.screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link:focus{
  position:fixed;top:12px;left:12px;z-index:100;width:auto;height:auto;
  clip:auto;margin:0;padding:12px 20px;background:var(--accent);color:var(--on-accent);
  font-weight:600;letter-spacing:.04em;
}

/* ---------- long-form prose ---------- */
.prose{max-width:var(--measure);font-size:1.06rem;line-height:1.72;color:var(--fg-2);}
.prose > * + *{margin-top:1.15em;}
.prose h2,.prose h3,.prose h4{
  font-family:var(--f-display);font-variation-settings:var(--wonk);
  color:var(--fg);letter-spacing:-.018em;line-height:1.16;
}
.prose h2{font-size:1.95rem;font-weight:500;margin-top:2em;}
.prose h3{font-size:1.5rem;font-weight:500;margin-top:1.7em;}
.prose h4{font-size:1.2rem;font-weight:600;margin-top:1.5em;}
.prose a{color:var(--accent);border-bottom:1px solid var(--accent-soft);padding-bottom:1px;}
.prose a:hover{border-bottom-color:var(--accent);}
.prose strong{color:var(--fg);font-weight:600;}
.prose ul,.prose ol{padding-left:1.3em;}
.prose li + li{margin-top:.45em;}
.prose blockquote{
  margin:1.6em 0;padding-left:22px;border-left:2px solid var(--accent);
  font-family:var(--f-display);font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:1.32rem;line-height:1.4;color:var(--fg);font-weight:300;
}
.prose blockquote cite{display:block;margin-top:10px;font-family:var(--f-sans);font-size:12.5px;font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);}
.prose img,.prose figure{max-width:100%;height:auto;}
.prose figure{margin:1.8em 0;}
.prose figcaption{margin-top:10px;font-size:13px;color:var(--fg-3);line-height:1.5;}
.prose hr{border:0;border-top:1px solid var(--rule);margin:2.4em 0;}
.prose code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.92em;background:var(--bg-2);padding:2px 6px;}
.prose pre{background:var(--bg-2);padding:18px;overflow-x:auto;border:1px solid var(--rule);}
.prose pre code{background:none;padding:0;}
.prose table{width:100%;border-collapse:collapse;font-size:.95em;}
.prose th,.prose td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--rule);}
.prose .alignleft{float:left;margin:4px 24px 16px 0;}
.prose .alignright{float:right;margin:4px 0 16px 24px;}
.prose .aligncenter{display:block;margin-left:auto;margin-right:auto;}
.prose .wp-caption{max-width:100%;}

/* ---------- single post furniture ---------- */
.entry-head{border-top:1px solid var(--rule-2);padding-top:16px;margin-bottom:26px;}
.entry-title{
  font-family:var(--f-display);font-variation-settings:var(--wonk);
  font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.06;letter-spacing:-.022em;
  font-weight:400;margin:12px 0 12px;max-width:22ch;text-wrap:balance;
}
.entry-meta{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);margin:0;}
.entry-figure{margin:0 0 30px;}
.entry-figure img{width:100%;height:auto;}
.entry-nav{
  display:flex;gap:24px;justify-content:space-between;flex-wrap:wrap;
  margin-top:48px;padding-top:20px;border-top:1px solid var(--rule);
  font-size:14.5px;font-weight:600;
}
.entry-nav a{color:var(--accent);}
.pagelinks{margin-top:26px;font-size:14px;color:var(--fg-3);}

/* ---------- pagination ---------- */
.pagination{margin-top:38px;}
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap;}
.pagination .page-numbers{
  padding:9px 15px;border:1px solid var(--rule-2);font-size:14px;font-weight:600;
  color:var(--fg-2);font-variant-numeric:tabular-nums;
}
.pagination .page-numbers:hover{border-color:var(--accent);color:var(--accent);}
.pagination .page-numbers.current{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}

/* ---------- video facade ---------- */
.playmark{
  padding:0;font:inherit;color:inherit;cursor:pointer;
  background:rgba(10,13,18,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.playmark:hover{background:rgba(10,13,18,.8);}
.shot .video-frame{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3;}
.shot.is-playing .playmark,
.shot.is-playing img,
.shot.is-playing video.loop{opacity:0;pointer-events:none;}

/* ---------- pending image placeholder ---------- */
.img-pending{
  width:100%;height:100%;min-height:150px;aspect-ratio:4/3;
  display:grid;place-items:center;background:var(--bg-3);
  border:1px dashed var(--rule-2);
}
.img-pending span{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);
}
.portrait .img-pending{aspect-ratio:3/4;}
.cause-row .thumb .img-pending{aspect-ratio:1;min-height:0;}

/* ---------- media dialog ---------- */
.media-modal{
  border:0;padding:0;background:transparent;color:var(--fg);
  width:min(1000px,92vw);max-width:none;max-height:90vh;overflow:visible;
}
.media-modal::backdrop{background:rgba(6,8,12,.86);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.media-modal .media-body{
  background:#000;border:1px solid var(--rule-2);
  display:flex;align-items:center;justify-content:center;min-height:120px;
}
.media-modal .media-video{width:100%;aspect-ratio:16/9;border:0;display:block;}
.media-modal .media-audio{width:100%;margin:26px 22px;}
.media-modal .media-caption{
  margin:14px 2px 0;font-size:14px;color:#C6C2B6;line-height:1.5;
}
.media-modal .media-caption:empty{display:none;}
.media-close{
  position:absolute;top:-42px;right:-2px;z-index:2;
  background:none;border:0;cursor:pointer;padding:4px 8px;
  font:400 30px/1 var(--f-sans);color:#EDE7DA;opacity:.8;transition:opacity .2s;
}
.media-close:hover{opacity:1;}
@media (max-width:640px){
  .media-close{top:-38px;font-size:26px;}
  .media-modal .media-audio{margin:20px 14px;}
}

/* ---------- books page ---------- */
.book-page .book-hero{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:var(--gut);align-items:start;}
@media (max-width:860px){.book-page .book-hero{grid-template-columns:1fr;}}
.book-hero-cover img{width:100%;max-width:280px;height:auto;}
.book-hero-copy .label{display:block;margin-bottom:12px;}
.book-hero-copy .title{margin-bottom:14px;max-width:22ch;}
.book-hero-copy .meta{font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-2);}
.book-prose{margin-top:26px;max-width:64ch;}
.book-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;}
.book-endorse{
  margin:34px 0 0;padding-left:22px;border-left:2px solid var(--accent);
  font-family:var(--f-sans);font-style:italic;font-size:1.02rem;line-height:1.6;color:var(--fg-2);
}
.book-endorse cite{display:block;font-style:normal;margin-top:12px;font-size:13px;line-height:1.5;color:var(--fg-3);letter-spacing:0;text-transform:none;}
.book-endorse cite b{display:block;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);margin-bottom:3px;}
.endorse-set{display:grid;gap:4px;}

/* ---------- stage: wider headline, testimonials, booking CTA ---------- */
.title-wide{max-width:28ch;}
/* h1 inherits .title sizing; only the hero h1 uses the display scale. */
h1.title{font-family:var(--f-display);font-variation-settings:var(--wonk);}
.lede-sub{color:var(--fg-2);font-size:1rem;margin-top:-6px;}
.testimonials{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut);
  margin-top:clamp(34px,4.4vw,54px);padding-top:clamp(28px,3.4vw,40px);
  border-top:1px solid var(--rule-2);
}
@media (max-width:860px){.testimonials{grid-template-columns:1fr;gap:30px;}}
.testimonial{
  margin:0;padding-left:22px;border-left:2px solid var(--accent);
  font-family:var(--f-sans);font-style:italic;font-size:1rem;line-height:1.62;color:var(--fg-2);
}
.testimonial cite{
  display:block;font-style:normal;margin-top:13px;font-size:13px;line-height:1.5;
  color:var(--fg-3);letter-spacing:0;text-transform:none;
}
.testimonial cite b{
  display:block;font-weight:600;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-2);margin-bottom:3px;
}
.stage-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(30px,3.6vw,44px);}

/* ---------- keynote topics ---------- */
.topics{margin-top:clamp(34px,4.4vw,54px);padding-top:clamp(28px,3.4vw,40px);border-top:1px solid var(--rule-2);}
.topics-head{
  font-family:var(--f-sans);font-size:11px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);margin:0 0 22px;
}
.topics ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px clamp(28px,4vw,64px);
}
@media (max-width:760px){.topics ul{grid-template-columns:1fr;}}
.topics li{
  font-size:14.5px;line-height:1.6;color:var(--fg-2);
  padding-left:18px;border-left:1px solid var(--rule-2);
}
.topics li b{
  display:block;font-family:var(--f-display);font-variation-settings:var(--wonk);
  font-size:1.18rem;font-weight:500;letter-spacing:-.012em;color:var(--fg);
  margin-bottom:5px;line-height:1.2;
}
.cta-aside{
  align-self:center;font-size:13.5px;font-weight:600;letter-spacing:.04em;
  color:var(--accent);border-bottom:1px solid var(--accent-soft);padding-bottom:3px;
}
.cta-aside:hover{border-bottom-color:var(--accent);}

/* Frames whose video cannot be embedded link out instead. */
.playmark-out{text-decoration:none;}
.playmark-out::before{
  border-left:0;border-top:0;border-bottom:0;
  content:"\2197";font:600 17px/1 var(--f-sans);color:#F4EFE4;margin-left:0;
}
.cap-out{margin-top:6px !important;font-size:12.5px !important;color:var(--accent) !important;letter-spacing:.04em;}

/* The role line is the point of this section — what David actually did, not
   which causes he admires. Set apart from the description so it reads first. */
.cause-role{
  font-size:12.5px !important;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent) !important;margin:0 0 8px !important;line-height:1.45;
}
.cause-lead .cause-role{font-size:13px !important;margin-bottom:10px !important;}

/* ---------- single post: one column ----------
   The figure was rendering at container width against a 62ch text measure, so
   the image ran almost twice as wide as the article and dominated it. Constrain
   the whole post — head, figure, prose, nav — to a single measure so it reads
   as one editorial column. */
.single-post .sec > .wrap{max-width:68ch;}
.single-post .prose{max-width:none;}
.single-post .entry-title{max-width:none;}
.entry-figure img{width:100%;height:auto;display:block;}
.entry-figure figcaption{margin-top:10px;font-size:13px;color:var(--fg-3);line-height:1.5;}
/* In-content images inherit the column; captions sit with them. */
.prose figure img{width:100%;}

/* ---------- essays published elsewhere ---------- */
.elsewhere{margin-top:clamp(30px,3.6vw,44px);padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--rule);}
.elsewhere-head{
  font-family:var(--f-sans);font-size:11px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--fg-3);margin:0 0 16px;
}
.elsewhere ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.elsewhere a{
  display:flex;gap:20px;align-items:baseline;justify-content:space-between;
  padding:11px 0;border-bottom:1px solid var(--rule);
  transition:padding-left .25s cubic-bezier(.16,1,.3,1);
}
.elsewhere li:last-child a{border-bottom:0;}
.elsewhere a:hover{padding-left:10px;}
.el-title{font-size:1rem;line-height:1.4;color:var(--fg-2);text-wrap:balance;}
.elsewhere a:hover .el-title{color:var(--accent);}
.el-where{
  flex:0 0 auto;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-3);white-space:nowrap;
}
@media (max-width:640px){
  .elsewhere a{flex-direction:column;gap:5px;}
  .el-where{white-space:normal;}
}

/* ---------- publishing: the two owned properties ---------- */
.pubs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut);margin-top:8px;}
@media (max-width:860px){.pubs{grid-template-columns:1fr;gap:44px;}}
.pub{display:grid;grid-template-columns:132px minmax(0,1fr);gap:24px;align-items:start;
     border-top:1px solid var(--rule-2);padding-top:22px;}
@media (max-width:520px){.pub{grid-template-columns:1fr;gap:18px;}}
.pub-cover img{width:132px;height:132px;object-fit:cover;filter:brightness(var(--img-shade));}
@media (max-width:520px){.pub-cover img{width:150px;height:150px;}}
.pub-body .label{display:block;margin-bottom:9px;}
.pub-body h3{font-family:var(--f-display);font-variation-settings:var(--wonk);
             font-size:1.42rem;font-weight:500;letter-spacing:-.015em;line-height:1.15;margin:0 0 10px;}
.pub-body p{font-size:14.5px;line-height:1.6;color:var(--fg-2);margin:0 0 10px;max-width:44ch;}
.pub-note{color:var(--fg-3) !important;font-size:13.5px !important;font-style:italic;}
.pub-links{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:16px;}
.pub-alt{font-size:13.5px;font-weight:600;letter-spacing:.03em;color:var(--accent);
         border-bottom:1px solid var(--accent-soft);padding-bottom:2px;}
.pub-alt:hover{border-bottom-color:var(--accent);}

/* ---------- advisory pull quote ----------
   Matches the attribution pattern used for book endorsements and speaking
   testimonials: name in caps, role beneath in sentence case. */
.pull{
  margin:38px 0 0;padding:30px 0 0;border-top:1px solid var(--rule-2);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:center;
}
@media (max-width:860px){.pull{grid-template-columns:1fr;gap:26px;justify-items:start;}}
.pull blockquote{
  margin:0;padding-left:22px;border-left:2px solid var(--accent);
  font-family:var(--f-sans);font-style:italic;
  font-size:1.06rem;line-height:1.62;color:var(--fg);max-width:62ch;
}
.pull cite{
  display:block;font-style:normal;margin-top:14px;
  font-size:13px;line-height:1.5;color:var(--fg-3);letter-spacing:0;text-transform:none;
}
.pull cite b{
  display:block;font-weight:600;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);margin-bottom:3px;
}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--gut);align-items:start;margin-top:10px;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:46px;}}
.contact-intents{display:flex;flex-direction:column;gap:30px;}
.intent{border-top:1px solid var(--rule-2);padding-top:18px;}
.intent .label{display:block;margin-bottom:8px;}
.intent h3{font-family:var(--f-display);font-variation-settings:var(--wonk);font-size:1.36rem;font-weight:500;letter-spacing:-.015em;margin:0 0 9px;}
.intent p{margin:0 0 8px;font-size:14.5px;line-height:1.62;color:var(--fg-2);max-width:46ch;}
.intent-aside{font-size:13.5px !important;color:var(--fg-3) !important;}
.intent-aside a{color:var(--accent);border-bottom:1px solid var(--accent-soft);padding-bottom:1px;}
.intent-aside a:hover{border-bottom-color:var(--accent);}
.contact-form{background:var(--bg-2);border:1px solid var(--rule);padding:clamp(24px,3.2vw,38px);}
.form-head{font-family:var(--f-display);font-variation-settings:var(--wonk);font-size:1.5rem;font-weight:500;margin:0 0 20px;letter-spacing:-.015em;}
.form-note{margin-top:20px;font-size:13.5px;color:var(--fg-3);}
.form-note a{color:var(--accent);border-bottom:1px solid var(--accent-soft);}
/* WPForms lives inside our panel — inherit the type system rather than its own. */
.contact-form .wpforms-field-label{font-family:var(--f-sans) !important;font-size:13px !important;font-weight:600 !important;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2) !important;}
.contact-form input[type=text],.contact-form input[type=email],.contact-form textarea{
  width:100%;font-family:var(--f-sans) !important;font-size:15px !important;
  background:var(--bg) !important;border:1px solid var(--rule-2) !important;border-radius:0 !important;
  color:var(--fg) !important;padding:12px 14px !important;
}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent !important;}
.contact-form button[type=submit],.contact-form .wpforms-submit{
  font-family:var(--f-sans) !important;font-size:14px !important;font-weight:600 !important;
  letter-spacing:.05em;text-transform:uppercase;padding:14px 26px !important;border-radius:0 !important;
  background:var(--accent) !important;color:var(--on-accent) !important;border:1px solid var(--accent) !important;cursor:pointer;
}
.contact-form button[type=submit]:hover,.contact-form .wpforms-submit:hover{background:transparent !important;color:var(--accent) !important;}

/* ---------- about: press kit ---------- */
.bios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);margin-top:8px;}
@media (max-width:900px){.bios{grid-template-columns:1fr;gap:30px;}}
.bio{border-top:1px solid var(--rule-2);padding-top:18px;}
.bio .label{display:block;margin-bottom:10px;}
.bio p{font-size:14.5px;line-height:1.65;color:var(--fg-2);margin:0 0 10px;}
.kit-downloads{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:clamp(30px,3.6vw,44px);}

/* ---------- PDF viewer page ---------- */
.sec-tight{padding-bottom:clamp(40px,5vw,64px);}
.pdf-head{display:flex;gap:26px;align-items:baseline;justify-content:space-between;flex-wrap:wrap;margin-bottom:26px;}
.pdf-head .title{margin:0;max-width:24ch;}
/* Pages are rasterised to canvas by PDF.js — see page-speaker-profile.php for
   why the browser's own PDF rendering is not used. */
.pdf-pages{display:flex;flex-direction:column;gap:18px;}
.pdf-page{
  display:block;width:100%;height:auto;
  background:#fff;border:1px solid var(--rule-2);box-shadow:var(--shadow);
}
.pdf-status{font-size:14px;color:var(--fg-3);padding:40px 0;}
.pdf-fallback{margin-top:14px;font-size:13.5px;color:var(--fg-3);line-height:1.6;}
.pdf-fallback a{color:var(--accent);border-bottom:1px solid var(--accent-soft);padding-bottom:1px;}
@media (max-width:700px){.pdf-frame{height:70vh;}}
/* Naming the operating entity is what makes one shared policy coherent to a
   reader who arrives on this domain and lands on a brainyus.com document. */
.foot-entity{color:var(--fg-3);}