/* 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-dark{background:var(--dark-900);color:#fff}
.btn-dark:hover{background:var(--teal-700)}
.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)}
/* Her publication's card, built here instead of framed in from Substack, which
   rendered her description at 1.41:1 and could not be restyled across origins.
   A white panel on the mist band, edged with the same hairline as the post list
   it sits beside. Every colour below is a site token and clears 4.5:1 on white:
   --ink 17.71, --ink-2 7.99, --ink-3 4.78, white on --dark-900 19.44. */
.newsletter{color:var(--ink)}
.newsletter h2{margin-bottom:18px;font-size:28px;line-height:1.15}
.nl-card{background:#fff;border:1px solid var(--line-2);border-radius:6px;
  padding:clamp(22px,2.4vw,30px)}
.nl-head{display:flex;align-items:center;gap:16px}
.nl-mark{width:72px;height:72px;flex:0 0 auto;border-radius:6px}
.nl-name{margin:0;font:700 24px/1.2 var(--serif);letter-spacing:-.01em}
.nl-by{margin:4px 0 0;font:500 14px/1.4 var(--sans);color:var(--ink-3)}
.nl-desc{margin:18px 0 0;font:400 17px/1.55 var(--serif);color:var(--ink-2)}
.nl-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
/* 150, not 200: this column is 335px inside the card at 1280, and a 200px basis
   pushed Subscribe onto its own line at every desktop width. */
.nl-row input{flex:1 1 150px;min-width:0;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)}
.nl-row input:focus{border-color:var(--teal-700);outline:none;
  box-shadow:0 0 0 3px rgba(21,94,105,.15)}
.nl-row .btn{flex:0 0 auto}

/* 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){
  .nav{gap:20px}
  .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)}
/* the only route to /reviews-and-awards/, which is out of the nav on purpose */
.arc-lede a{color:var(--teal-300);text-decoration:underline;text-underline-offset:4px}
.arc-lede a:hover{color:#fff}
.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)}

/* Search: the box on the writing page, and the /search/ page itself. */
.arc-find{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0}
.sf{margin:18px 0 10px}
.arc-find input,.sf input{flex:1 1 260px;width:100%;max-width:480px;height:50px;padding:0 16px;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);
  font:400 16.5px/1.4 var(--sans);-webkit-appearance:none;appearance:none}
.arc-find input:focus,.sf input:focus{outline:2px solid var(--teal-700);outline-offset:1px;
  border-color:var(--teal-700)}
.arc-find input::placeholder,.sf input::placeholder{color:var(--ink-3)}
.sf-status{margin:0;font-family:var(--sans);font-size:14px;color:var(--ink-3)}
.sf-results{list-style:none;margin:0;padding:0}
.sf-results li{padding:16px 0;border-bottom:1px solid var(--line)}
.sf-hit{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:6px 24px;text-decoration:none;color:var(--ink)}
.sf-hit:hover{color:var(--teal-700)}
.sf-title{flex:1 1 60%;font-family:var(--serif);font-size:18px;line-height:1.35}
.sf-date{font-family:var(--sans);font-size:13px;color:var(--ink-3);white-space:nowrap}
.sf-snip{margin:7px 0 0;font-family:var(--serif);font-size:15px;line-height:1.55;color:var(--ink-2)}
.sf-more{border-bottom:0;font-family:var(--sans);font-size:14px;color:var(--ink-3)}
mark{background:var(--teal-100);color:inherit;padding:0 .12em;border-radius:2px}

/* Search box in the header, on every page. The desktop nav already carries
   five items including the Book Daleen button, so this input is deliberately
   small and allowed to shrink rather than push the CTA off the row. Below
   760px the nav is replaced by the menu panel, which gets a full-width one. */
.nav-search{display:flex;margin-left:2px}
/* 148px fits down to the 761px edge of the desktop nav with no overflow
   (measured at 1440/1280/1000/961/900/800/761), so there is no width override
   in the 960px block. An earlier one was there and was DEAD: these rules sit
   after that block and media queries add no specificity, so the later rule won
   and the shrink never applied. Keep that in mind before adding one. */
.nav-search input{width:148px;height:40px;padding:0 12px;border:1px solid var(--line-2);
  border-radius:var(--radius);background:#fff;color:var(--ink);
  font:400 14.5px/1 var(--sans);-webkit-appearance:none;appearance:none}
.nav-search input::placeholder{color:var(--ink-3)}
.nav-search input:focus{outline:2px solid var(--teal-700);outline-offset:1px;
  border-color:var(--teal-700)}
.mnav-search{margin:16px 0 2px}
.mnav-search input{width:100%;height:50px;padding:0 14px;border:1px solid var(--line-2);
  border-radius:var(--radius);background:#fff;color:var(--ink);
  font:400 16.5px/1 var(--sans);-webkit-appearance:none;appearance:none}
.mnav-search input:focus{outline:2px solid var(--teal-700);outline-offset:1px;
  border-color:var(--teal-700)}