/* Daleen Berry — design system.
   Single source of truth for all three pages. The static build emits this as a
   content-hashed /css/site-<hash>.css; scripts/sync-canvas.py inlines it into the
   Design-canvas copies. Never style layout in an inline style="" attribute: inline
   styles cannot respond to screen width, which is what broke the mobile grids. */

/* Palette taken from her own quote-card artwork (ticket #327299, 2026-10-27):
   ground #0d0d0d / #0b0b0b, cream #f5f2ec, teal #5ba0aa and #1d9fb3, deep teal
   #155e69. She asked us to drop the burgundy, which came off the speaker
   one-sheet rather than her brand. Accent values are picked so --teal-700 clears
   4.5:1 both as text on white and as a ground under white text. */
:root{
  --dark-950:#050505;
  --dark-900:#0d0d0d;
  --teal-700:#155e69;
  --teal-600:#1d7f8f;
  --teal-300:#7cc3cf;
  --teal-100:#d7edf1;
  --on-dark:#dde8ea;
  --mist:#f5f2ec;
  --line:#e4e7e8;
  --line-2:#ccd4d6;
  --ink:#15191a;
  --ink-2:#4a5255;
  --ink-3:#6b7477;
  --serif:"Spectral", Georgia, serif;
  --sans:"Schibsted Grotesk", system-ui, sans-serif;
  --wrap:1180px;
  --gutter:clamp(20px, 4vw, 40px);
  --section:clamp(64px, 9vw, 120px);
  --radius:4px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:#fff;color:var(--ink);font:400 17.5px/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0;text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}
:focus-visible{outline:2px solid var(--teal-700);outline-offset:3px}
.hero :focus-visible,.praise :focus-visible,.newsletter :focus-visible,.footer :focus-visible{outline-color:var(--teal-300)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.label{font:600 12.5px/1.5 var(--sans);letter-spacing:.13em;text-transform:uppercase}
.h2{font-size:clamp(32px, 1.2rem + 1.7vw, 46px);line-height:1.08;letter-spacing:-.015em}
.link{color:var(--teal-700);font-weight:600;font-size:16px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:rgba(21,94,105,.35);transition:text-decoration-color .2s}
.link:hover{text-decoration-color:currentColor}
.arrow::after{content:"\2192";display:inline-block;margin-left:.4em;transition:transform .2s}
.arrow:hover::after{transform:translateX(3px)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* the one responsive grid: every multi-column block uses it, so nothing can be
   left multi-column on a phone (set --min per instance) */
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--min,250px),1fr));gap:var(--gap,32px)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;height:50px;padding:0 24px;border-radius:var(--radius);font:600 15.5px/1 var(--sans);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.btn-accent{background:var(--teal-700);color:#fff}
.btn-accent:hover{background:var(--teal-600)}
.btn-light{background:#fff;color:var(--dark-900)}
.btn-light:hover{background:var(--teal-100)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);transition:box-shadow .25s}
.site-header.scrolled{box-shadow:0 8px 24px -14px rgba(10,14,15,.35)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.wordmark{font:500 16px/1 var(--serif);letter-spacing:.22em;text-transform:uppercase;text-decoration:none;color:var(--ink);white-space:nowrap}
.nav{display:flex;align-items:center;gap:30px}
.nav a:not(.btn){position:relative;padding-block:6px;font-size:15px;font-weight:500;color:var(--ink-2);text-decoration:none;transition:color .2s}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--teal-700);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav a:not(.btn):hover{color:var(--ink)}
.nav a:not(.btn):hover::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav .btn{height:42px;padding:0 18px;font-size:15px;margin-left:4px}
.mnav{display:none}
.mnav summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--radius);font-weight:600;font-size:15px}
.mnav summary::-webkit-details-marker{display:none}
.bars{position:relative;width:16px;height:11px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor}
.bars::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor}
.mnav-panel{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);padding:4px var(--gutter) 24px;box-shadow:0 22px 30px -20px rgba(10,14,15,.4)}
.mnav-panel a:not(.btn){display:block;padding:14px 0;border-bottom:1px solid var(--line);font:500 20px/1.3 var(--serif);text-decoration:none}
.mnav-panel .btn{width:100%;margin-top:20px}

/* hero */
.hero{background:var(--dark-900);color:#fff}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);gap:clamp(40px,6vw,88px);align-items:center;padding-block:clamp(56px,7.5vw,100px)}
.hero-kicker{margin:0 0 22px;font:500 15.5px/1.5 var(--sans);letter-spacing:.01em;color:var(--teal-300);text-wrap:balance}
.hero-kicker span{opacity:.6;margin:0 .35em}
.hero h1{font-size:clamp(42px, 1.5rem + 4vw, 76px);line-height:1.03;letter-spacing:-.022em}
.hero h1 em{font-weight:500;color:#7cc3cf}
.hero-sub{font-size:clamp(18px, 1rem + .35vw, 20.5px);line-height:1.6;color:var(--on-dark);max-width:33em;margin:26px 0 36px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px}
.play-link{display:inline-flex;align-items:center;gap:12px;color:#fff;font-weight:600;font-size:15.5px;text-decoration:none}
.play-dot{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.45);transition:background-color .2s,border-color .2s}
.play-dot::before{content:"";margin-left:3px;border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
.play-link:hover .play-dot{background:rgba(255,255,255,.12);border-color:#fff}
.hero-figure{margin:0}
.hero-photo{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:#000}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:55% 0;transition:transform .7s ease}
.hero-photo:hover img{transform:scale(1.025)}
.play{position:absolute;left:20px;bottom:20px;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--teal-700);box-shadow:0 10px 24px -8px rgba(0,0,0,.6);transition:transform .2s}
.play::before{content:"";margin-left:5px;border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.hero-photo:hover .play{transform:scale(1.06)}
.hero-figure figcaption{margin-top:14px;padding-left:14px;border-left:1px solid rgba(124,195,207,.45);font-size:14px;line-height:1.45;color:var(--teal-300)}
.hero-figure figcaption em{display:block;font:italic 500 17px/1.35 var(--serif);color:#fff}
.hero-portrait{aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:#000}
.hero-portrait img{width:100%;height:100%;object-fit:cover}

/* credibility band */
.cred{border-bottom:1px solid var(--line)}
.cred-row{display:grid;grid-template-columns:132px minmax(0,1fr);gap:24px;align-items:start;padding-block:34px}
.cred-row + .cred-row{border-top:1px solid var(--line)}
.cred-label{margin:0;padding-top:4px;color:var(--ink-3)}
.logos{list-style:none;margin:-2px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:18px clamp(18px,2vw,30px)}
.logos li{display:flex;align-items:center}
.logos img{height:28px;width:auto;filter:grayscale(1) contrast(1.1);opacity:.68;mix-blend-mode:multiply;transition:opacity .2s}
.logos li:hover img,.logos li:hover .lg-text{opacity:1}
.logos .knock{filter:grayscale(1) invert(1) brightness(1.6) contrast(2)}
.logos .knock-dark{filter:grayscale(1) invert(1) contrast(3)}
.logos .lg-nbc{height:32px}
.logos .lg-guardian{height:32px}
.logos .lg-hulu{height:52px;margin-block:-13px}
.logos .lg-beast{height:36px;margin-block:-4px}
.logos .lg-tedx{filter:grayscale(1) contrast(2)}
.lg-text{font:700 23px/1 var(--serif);color:#20262a;opacity:.68;transition:opacity .2s;text-decoration:none}
.lg-bbc{font:700 20px/1 var(--sans);letter-spacing:.1em}
.venues{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:10px 36px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}

/* praise */
.praise{background:var(--teal-700);color:#fff;padding-block:var(--section)}
.praise figure{margin:0}
.praise blockquote{margin:0}
.praise-lead{max-width:900px}
.praise-lead blockquote p{margin:0;font:500 clamp(26px, 1rem + 1.85vw, 40px)/1.28 var(--serif);letter-spacing:-.01em;text-indent:-.45em}
.praise figcaption{margin-top:24px;font-size:15px;line-height:1.5;color:var(--teal-100)}
.praise figcaption strong{display:block;color:#fff;font-weight:600}
.praise-more{margin-top:clamp(48px,6vw,80px);padding-top:40px;border-top:1px solid rgba(255,255,255,.2)}
.praise-more blockquote p{margin:0;font:400 20.5px/1.5 var(--serif);text-indent:-.4em}

/* about */
.about{padding-block:var(--section)}
.about-grid{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);grid-template-areas:"photo copy" "note copy";grid-template-rows:auto 1fr;gap:32px clamp(40px,7vw,104px);align-items:start}
.about-photo{grid-area:photo;margin:0}
.about-photo img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius)}
.about-copy{grid-area:copy;max-width:40em}
.about-copy .h2{margin-bottom:26px}
.lead{font:400 clamp(20px, 1rem + .5vw, 23.5px)/1.5 var(--serif);color:var(--ink)}
.about-copy p:not(.lead){color:var(--ink-2)}
.also-true{grid-area:note;padding:2px 0 2px 20px;border-left:2px solid var(--teal-700)}
.also-true h3{margin-bottom:6px;font:italic 500 19px/1.3 var(--serif);color:var(--teal-700)}
.also-true p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2)}

/* gains */
.gains{background:var(--mist);padding-block:var(--section)}
.gains-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,7vw,104px);align-items:start}
.gains-intro{position:sticky;top:120px}
.gains-intro p{max-width:24em;margin:22px 0 18px;color:var(--ink-2)}
.gains-list{list-style:none;margin:0;padding:0;counter-reset:g}
.gains-list li{counter-increment:g;display:grid;grid-template-columns:60px minmax(0,1fr);column-gap:8px;padding:28px 0;border-top:1px solid var(--line-2)}
.gains-list li:last-child{border-bottom:1px solid var(--line-2)}
.gains-list li::before{content:counter(g, decimal-leading-zero);grid-row:span 2;font:italic 500 19px/1.55 var(--serif);color:var(--teal-700)}
.gains-list h3{margin-bottom:6px;font-size:23px;line-height:1.3}
.gains-list p{margin:0;color:var(--ink-2)}

/* books */
.books{padding-block:var(--section)}
.section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px;margin-bottom:26px}
.walls{max-width:42em;margin:0 0 60px}
.walls blockquote{margin:0}
.walls p{margin:0 0 10px;font:italic 400 clamp(22px, 1rem + .85vw, 28px)/1.4 var(--serif);text-indent:-.4em}
.walls figcaption{font-size:15px;color:var(--ink-3)}
.cover{position:relative;display:block;width:min(100%, 200px);aspect-ratio:2/3;margin-bottom:28px;border-radius:2px 4px 4px 2px;overflow:hidden;box-shadow:0 1px 2px rgba(10,14,15,.2),0 20px 34px -18px rgba(10,14,15,.55);transition:transform .3s,box-shadow .3s}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(255,255,255,.1) 3%,rgba(0,0,0,0) 8%)}
.cover img{width:100%;height:100%;object-fit:cover}
.cover:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(10,14,15,.2),0 28px 40px -20px rgba(10,14,15,.6)}
.cover-static{cursor:default}
.cover-static:hover{transform:none}
.book-tag{margin:0 0 6px;font:italic 500 15.5px/1.4 var(--serif);color:var(--teal-700)}
.book h2,.book h3{margin-bottom:10px;font-size:23px;line-height:1.25}
.book p{font-size:16px;line-height:1.6;color:var(--ink-2)}
.book-hero{background:var(--dark-900);color:#fff;border-radius:6px;padding:clamp(28px,3.5vw,44px);display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:clamp(28px,4vw,48px);align-items:start}
.book-hero .cover{margin-bottom:0}
.book-hero .book-tag{color:var(--teal-300)}
.book-hero h2{font-size:clamp(26px,1rem + 1.6vw,34px)}
.book-hero p{color:var(--on-dark)}

/* writing */
.writing{background:var(--mist);padding-block:var(--section)}
.writing-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4.4fr);gap:clamp(40px,6vw,88px);align-items:start}
.posts{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--line-2)}
.posts a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 24px;padding:22px 0;border-bottom:1px solid var(--line-2);text-decoration:none}
.post-title{font:600 21px/1.35 var(--serif);transition:color .2s}
.post-meta{grid-column:1;font-size:14px;color:var(--ink-3)}
.posts a::after{content:"\2192";grid-column:2;grid-row:1 / span 2;font-size:20px;color:var(--teal-700);transition:transform .2s}
.posts a:hover .post-title{color:var(--teal-700)}
.posts a:hover::after{transform:translateX(4px)}
/* The signup is her Substack's own embed (see Main.dc.html). It arrives white
   with a black button, so this card is light: a white panel on the mist band,
   edged with the same hairline as the post list it sits beside. */
.newsletter{color:var(--ink)}
.newsletter h2{margin-bottom:18px;font-size:28px;line-height:1.15}
.nl-frame{background:#fff;border:1px solid var(--line-2);border-radius:6px;overflow:hidden}
/* The embed fills whatever box it is given and reports no height across
   origins, so the height is set here and checked in a browser at each
   breakpoint. Narrower box, more wrapping, taller frame. */
/* 520 is measured, not guessed. The embed scales its logo and spacing to fill
   whatever box it is given, so a shorter frame does not compress it, it clips
   it: at 420 the Substack logo lost its top and the terms line was cut in half
   at every width from 601 to 1440. 520 renders the whole card, logo to small
   print, everywhere except the 961-1060 band, where this column squeezes to
   317px and it clipped again by 12. 548 clears every width in the matrix, and
   a 360px-wide phone needs a little more again. */
.nl-frame iframe{display:block;width:100%;height:548px;border:0}
@media (max-width:380px){.nl-frame iframe{height:575px}}

/* contact */
.contact{padding-block:var(--section)}
.contact-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.contact-intro p{max-width:24em;color:var(--ink-2)}
.contact-intro .h2{margin-bottom:22px}
.contact-alt{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.field-full{grid-column:1 / -1}
/* The honeypot. Off-screen rather than display:none, which bots skip. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field label{display:block;margin-bottom:8px;font-size:14.5px;font-weight:500}
.field label span{font-weight:400;color:var(--ink-3)}
.field input,.field textarea{width:100%;height:50px;padding:0 14px;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:var(--radius);transition:border-color .2s,box-shadow .2s}
.field textarea{height:auto;min-height:140px;padding:12px 14px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--teal-700);box-shadow:0 0 0 3px rgba(21,94,105,.15)}
.form-note{grid-column:1 / -1;margin:0;padding:14px 16px;background:#eaf3f5;border-left:3px solid var(--teal-700);font-size:15px;color:var(--ink-2)}

/* keynote abstract + topics (speaking page) */
.abstract{font-size:clamp(18px, 1rem + .35vw, 20.5px);line-height:1.6;color:var(--on-dark);max-width:40em;margin:26px 0 36px}
.topics{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--line-2)}
.topics li{padding:18px 0;border-bottom:1px solid var(--line-2);font:600 21px/1.3 var(--serif)}
.venue-list{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--line-2)}
.venue-list li{padding:14px 0;border-bottom:1px solid var(--line-2);font-size:16px;color:var(--ink-2)}
.feature{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,64px);align-items:center}
.feature-media{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#000}
.feature-media img{width:100%;height:100%;object-fit:cover}
.feature h2{font-size:clamp(26px,1rem + 1.6vw,36px);line-height:1.12;margin-bottom:12px}
.feature p{color:var(--ink-2);margin-bottom:18px}

/* band */
.band{background:var(--teal-700);color:#fff;padding-block:clamp(44px,6vw,72px)}
.band-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px}
.band h2{font-size:clamp(26px,1rem + 1.3vw,32px);margin-bottom:8px}
.band p{margin:0;color:var(--teal-100)}

/* footer */
.footer{background:var(--dark-950);color:var(--teal-100);padding-block:44px}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.footer .wordmark{color:#fff}
.footer p{margin:10px 0 0;font-size:14px;color:rgba(215,237,241,.7)}
.footer nav{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:15px}
.footer nav a{text-decoration:none;color:var(--teal-100)}
.footer nav a:hover{color:#fff}

/* responsive */
@media (max-width: 960px){
  .hero-grid{grid-template-columns:1fr;gap:34px;padding-top:0}
  .hero-figure{order:-1;margin-inline:calc(-1 * var(--gutter))}
  .hero-photo{aspect-ratio:3/2;border-radius:0}
  .hero-photo img{object-position:69% 0}
  .hero-figure figcaption{margin-inline:var(--gutter)}
  .hero-portrait{max-width:340px}
  .about-grid{grid-template-columns:1fr;grid-template-areas:"photo" "copy" "note";grid-template-rows:auto}
  .about-photo{max-width:300px}
  .gains-grid,.writing-grid,.contact-grid,.feature{grid-template-columns:1fr}
  .gains-intro{position:static}
  .book-hero{grid-template-columns:minmax(0,160px) minmax(0,1fr)}
}
@media (max-width: 760px){
  body{font-size:17px}
  .nav{display:none}
  .mnav{display:block}
  .header-inner{height:64px}
  .wordmark{font-size:15px}
  .label{font-size:11.5px;letter-spacing:.1em}
  .hero-actions{gap:20px}
  .hero-actions .btn{width:100%;height:54px}
  .hero-kicker{font-size:14.5px}
  .cred-row{grid-template-columns:1fr;gap:14px;padding-block:24px}
  .logos{justify-content:flex-start;gap:20px 26px}
  .logos img{height:24px}
  .logos .lg-nbc,.logos .lg-guardian{height:28px}
  .logos .lg-hulu{height:46px;margin-block:-11px}
  .logos .lg-beast{height:32px}
  .lg-text{font-size:21px}
  .lg-bbc{font-size:18px}
  .gains-list li{grid-template-columns:44px minmax(0,1fr)}
  .gains-list h3{font-size:21px}
  .book{display:grid;grid-template-columns:104px minmax(0,1fr);gap:20px;align-items:start}
  .cover{width:104px;margin:0}
  .book h2,.book h3{font-size:20px}
  .book p{font-size:15.5px}
  .book-hero{grid-template-columns:1fr}
  .book-hero .cover{width:140px}
  .post-title{font-size:19px}
  .topics li{font-size:19px}
}

/* Jane Doe call for submissions. Her own card is black with teal accents, so the
   page uses the dark tokens rather than the light page shell. One column on
   purpose: this page exists to be read once and shared. */
.jd-hero{background:var(--dark-950);color:#fff;padding-block:clamp(56px,8vw,104px)}
.jd-kicker{display:flex;justify-content:space-between;gap:16px;margin:0 0 18px;
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.jd-kicker span:first-child{color:var(--teal-300)}
.jd-kicker span:last-child{color:var(--ink-3)}
.jd-title{margin:0;font-family:var(--serif);font-weight:700;line-height:.92;
  font-size:clamp(60px,13vw,150px);letter-spacing:-.02em}
.jd-lede{max-width:34ch;margin:28px 0 0;padding-top:26px;border-top:2px solid var(--teal-600);
  font-family:var(--serif);font-size:clamp(20px,2.4vw,27px);line-height:1.38;color:var(--on-dark)}
.jd-lede em{color:#fff;font-style:italic;font-weight:500}
.jd-body{background:var(--dark-900);color:#fff;padding-block:clamp(48px,7vw,90px)}
.jd-ask{margin:0 0 40px;font-family:var(--serif);font-weight:700;line-height:1.08;
  font-size:clamp(30px,5vw,56px);max-width:18ch}
.jd-ask em{color:var(--teal-300);font-style:italic}
.jd-stat{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 32px;margin-bottom:40px}
.jd-figure{margin:0;font-family:var(--serif);font-weight:700;font-size:clamp(44px,8vw,86px);
  line-height:1;letter-spacing:-.01em;border-bottom:6px solid var(--teal-600);padding-bottom:4px}
.jd-figure-note{margin:0;max-width:34ch;font-size:17px;line-height:1.5;color:var(--ink-3)}
.jd-copy{max-width:56ch;margin:0 0 44px;font-family:var(--serif);
  font-size:clamp(18px,2vw,22px);line-height:1.55;color:var(--on-dark)}
.jd-call{background:var(--teal-300);color:var(--dark-950);border-radius:var(--radius);
  padding:clamp(24px,3vw,36px)}
.jd-call-label{margin:0 0 14px;font-family:var(--sans);font-size:13px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase}
.jd-call-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px}
.jd-address{font-family:var(--serif);font-size:clamp(20px,3vw,34px);font-weight:600;
  color:var(--dark-950);text-decoration:none;border-bottom:2px solid rgba(5,5,5,.3);word-break:break-word}
.jd-address:hover{border-bottom-color:var(--dark-950)}
.jd-call-note{margin:16px 0 0;font-size:16px;line-height:1.5}
.jd-figure-img{margin:48px 0 0}
.jd-figure-img img{width:100%;height:auto;max-width:560px;display:block;border-radius:var(--radius)}
.jd-figure-img figcaption{margin-top:12px;font-size:15px;color:var(--ink-3)}
.jd-sig{margin:40px 0 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);
  font-size:15px;color:var(--ink-3)}
.jd-sig strong{color:#fff}

/* .form-note is an alert box on the booking form. Under the newsletter embed it
   is a plain caption instead, or an alert box sits under the card for no reason.
   Scoped so the booking form keeps its own styling. */
.newsletter .form-note{margin-top:14px;padding:0;background:none;border-left:0;
  font-size:14px;color:var(--ink-3)}
.newsletter .form-note a{color:inherit}

/* ---- Her blog, 235 posts carried over from WordPress at their old URLs ---- */
.post-head{padding-block:clamp(40px,6vw,76px) 0;max-width:760px}
.post-kicker{margin:0 0 14px;font-family:var(--sans);font-size:13px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase}
.post-kicker a{color:var(--teal-700);text-decoration:none}
.post-kicker a:hover{text-decoration:underline}
.post-title-main{margin:0;font-family:var(--serif);font-weight:700;line-height:1.1;
  font-size:clamp(30px,4.6vw,52px);letter-spacing:-.01em}
.post-date{margin:16px 0 0;font-size:15px;color:var(--ink-3)}
/* 68ch is the readable measure; her longest post is 23,000 characters */
.post-body{max-width:760px;padding-block:clamp(28px,4vw,44px)}
.post-body p{margin:0 0 1.25em;font-family:var(--serif);font-size:19px;line-height:1.72;color:var(--ink)}
.post-body a{color:var(--teal-700)}
.post-body h2,.post-body h3,.post-body h4{font-family:var(--serif);line-height:1.25;
  margin:1.8em 0 .6em;font-weight:700}
.post-body h2{font-size:28px} .post-body h3{font-size:23px} .post-body h4{font-size:20px}
.post-body ul,.post-body ol{margin:0 0 1.25em 1.2em;font-family:var(--serif);font-size:19px;line-height:1.7}
.post-body li{margin-bottom:.5em}
.post-body blockquote{margin:1.6em 0;padding:4px 0 4px 22px;border-left:3px solid var(--teal-600);
  font-family:var(--serif);font-size:20px;font-style:italic;color:var(--ink-2)}
.post-body hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}
.post-img,.post-figure img{max-width:100%;height:auto;border-radius:var(--radius)}
.post-figure{margin:1.8em 0}
.post-figure figcaption{margin-top:10px;font-family:var(--sans);font-size:14px;color:var(--ink-3)}
/* she floats a lot of captions; that only works once there is room for it */
@media (min-width:720px){
  .post-figure{max-width:340px}
  .post-figure.alignright{float:right;margin:.4em 0 1.2em 28px}
  .post-figure.alignleft{float:left;margin:.4em 28px 1.2em 0}
}
.post-nav{display:grid;gap:14px;grid-template-columns:1fr;border-top:1px solid var(--line);
  padding:28px 0 clamp(48px,7vw,88px);max-width:760px}
@media (min-width:720px){.post-nav{grid-template-columns:1fr 1fr;gap:28px}}
.post-nav a{display:block;text-decoration:none;color:var(--ink);font-family:var(--serif);
  font-size:18px;line-height:1.35}
.post-nav a span{display:block;margin-bottom:6px;font-family:var(--sans);font-size:12px;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.post-nav a:hover{color:var(--teal-700)}
.post-nav-next{text-align:left}
@media (min-width:720px){.post-nav-next{text-align:right}}

.arc-hero{background:var(--dark-950);color:#fff;padding-block:clamp(44px,6vw,86px)}
.arc-hero h1{margin:0;font-family:var(--serif);font-weight:700;line-height:1;
  font-size:clamp(40px,7vw,74px)}
.arc-lede{max-width:52ch;margin:20px 0 0;font-family:var(--serif);
  font-size:clamp(17px,2vw,21px);line-height:1.5;color:var(--on-dark)}
.arc{padding-block:clamp(40px,6vw,72px)}
.arc-year{margin-bottom:46px}
.arc-head{display:flex;align-items:baseline;gap:14px;margin:0 0 16px;padding-bottom:10px;
  border-bottom:2px solid var(--teal-700);font-family:var(--sans);font-size:22px;font-weight:700}
.arc-head span{font-size:13px;font-weight:500;color:var(--ink-3)}
.arc-list{list-style:none;margin:0;padding:0}
.arc-list li{border-bottom:1px solid var(--line)}
.arc-list a{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:6px 24px;padding:13px 0;text-decoration:none;color:var(--ink)}
.arc-list a:hover{color:var(--teal-700)}
.arc-title{font-family:var(--serif);font-size:18px;line-height:1.35;flex:1 1 60%}
.arc-date{font-family:var(--sans);font-size:13px;color:var(--ink-3);white-space:nowrap}
.writing-all{margin:-14px 0 20px}
.writing-all a{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--teal-700)}