/* Old England: parchment, iron-gall ink, oxblood wax, bottle-green leather, gilt */
:root{
  --navy:#153524; --navy-2:#1E4732; --navy-3:#0F2519;
  --ink:#2A1E12; --ink-2:#4A3826;
  --paper:#E9DAB0; --white:#F4EAD0; --parch:#F1E5C6; --parch-3:#F8F0DA;
  --gold:#86661C; --gold-2:#D8B968;
  --line:#CDB98A; --line-navy:rgba(216,185,104,.30);
  --muted:#5B4A34; --muted-navy:#DACDA7;
  --wax:#8A1F2D; --wax-2:#5E1420;
  --serif:"IM Fell English","IM Fell DW Pica",Georgia,"Times New Roman",serif;
  --sans:"EB Garamond",Garamond,Georgia,serif;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .22 0 0 0 0 .08 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --stain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .38 0 0 0 0 .12 0 0 0 .38 -.08'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
  --fleuron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c2 4 3 6 6 7-3 1-4 3-6 7-2-4-3-6-6-7 3-1 4-3 6-7z M12 15c1.5 3 2.5 4.5 5 5.5-2.5.5-3.5 2-5 4.5-1.5-2.5-2.5-4-5-4.5 2.5-1 3.5-2.5 5-5.5z' fill='%2386661C'/%3E%3C/svg%3E");
  --fleuron-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c2 4 3 6 6 7-3 1-4 3-6 7-2-4-3-6-6-7 3-1 4-3 6-7z M12 15c1.5 3 2.5 4.5 5 5.5-2.5.5-3.5 2-5 4.5-1.5-2.5-2.5-4-5-4.5 2.5-1 3.5-2.5 5-5.5z' fill='%23D8B968'/%3E%3C/svg%3E");
}
html{scroll-padding-top:84px}
body{font-family:var(--sans);font-size:19.5px;line-height:1.6;color:var(--ink);
  background-color:var(--parch);
  background-image:radial-gradient(1400px 800px at 12% 0%,rgba(255,251,238,.7),transparent 62%),radial-gradient(1000px 700px at 100% 35%,rgba(150,105,40,.12),transparent 62%),var(--noise),var(--stain)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;box-shadow:inset 0 0 150px rgba(88,58,20,.26)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:0;line-height:1.1}
.label{font-family:var(--sans);font-size:14.5px;font-weight:600;letter-spacing:.22em;color:var(--gold)}
.label::before{content:"";display:inline-block;width:15px;height:15px;margin-right:10px;vertical-align:-2px;background:var(--fleuron) center/contain no-repeat}
.hero .label::before,.navy .label::before,.connect .label::before,.band .label::before,.honours .label::before,.cv-top .label::before{background-image:var(--fleuron-gold)}
.rule{background:var(--gold)}

/* letterhead */
.bar{background:var(--navy);border-bottom:3px double var(--gold-2)}
.mark{font-family:var(--serif);font-size:22px;font-weight:400;letter-spacing:.03em;text-transform:none;gap:12px}
.mark i{display:none}
.seal-mini{width:36px;height:36px;flex:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}
.bar nav a{font-family:var(--sans);font-size:16.5px;letter-spacing:.05em;text-transform:none;font-weight:500}
.bar nav a.cta{font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:13.5px;background:var(--wax);color:#F6E9C6;border:2px solid var(--gold-2)}
.bar nav a.cta:hover{background:var(--wax-2);color:#fff}

/* buttons */
.btn{font-family:var(--sans);font-size:14.5px;font-weight:700;letter-spacing:.14em;border-radius:0}
.btn-gold{background:var(--wax);background-image:none;color:#F7EBCB;border:2px solid var(--gold-2)}
.btn-gold:hover{background:var(--wax-2);background-position:0 0;color:#fff}
.btn-line{border-color:var(--gold-2);color:var(--parch)}
.btn-line:hover{background:rgba(216,185,104,.14);color:#fff;border-color:var(--gold-2)}
.btn-navy{background:var(--navy);border-color:var(--navy);color:var(--parch-3)}
.btn-navy:hover{background:var(--navy-2)}
.btn-outline{border:2px solid var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--parch-3)}

/* hero: leather binding */
.hero{background:radial-gradient(1000px 640px at 78% 34%,#2D6247 0%,rgba(45,98,71,0) 62%),linear-gradient(180deg,#183D2A,#0F2519);outline:2px solid rgba(216,185,104,.5);outline-offset:-14px}
.hero::before{content:"";position:absolute;inset:0;background:var(--noise);opacity:.9;mix-blend-mode:overlay;pointer-events:none}
.hero h1{font-size:clamp(54px,6.6vw,96px);line-height:.98}
.hero .slogan{font-style:italic;color:var(--gold-2);max-width:20ch}
.hero .dek{font-size:20.5px;line-height:1.55}
.case-aim p{font-size:18.5px}
.seal{display:block}
.ticker{background:var(--gold-2);border-block:2px solid #6E5316}
.ticker li{font-family:var(--sans);font-size:14.5px;letter-spacing:.24em;color:var(--navy-3);font-weight:700}
.stats{background:var(--navy-3)}
.stats b{font-family:var(--serif)}
.stats span{font-size:15.5px}

/* the ink chart */
.display{background:var(--navy-3);padding-block:0 8px}
.plate-chart{position:relative;margin:0;background-color:#EBDDB6;background-image:var(--noise),var(--stain);border:10px double var(--ink-2);box-shadow:0 40px 80px -30px rgba(0,0,0,.75),inset 0 0 100px rgba(120,80,20,.4)}
.plate-chart #chart svg{display:block;width:100%;height:auto}
.cartouche{position:absolute;top:14px;left:22px;padding:6px 16px;border:2px solid var(--ink-2);background:rgba(240,228,196,.85);font-family:var(--serif);font-size:19px;letter-spacing:.06em;color:var(--ink);font-style:italic}
.seal-plate{position:absolute;right:26px;bottom:-34px;width:112px;height:112px;transform:rotate(8deg);filter:drop-shadow(0 8px 10px rgba(0,0,0,.5))}
.plate-cap{margin-top:52px;text-align:center;font-family:var(--serif);font-style:italic;color:var(--muted-navy);font-size:24px}
.ink{fill:none;stroke:var(--ink);stroke-linecap:butt;stroke-linejoin:round}
.ink.wax{stroke:var(--wax)}
.ink.faint{opacity:.35}
.tint{fill:rgba(140,100,45,.12);stroke:none}
.dot{fill:var(--ink)} .dot.home{fill:var(--wax)}
.pulse{fill:none;stroke:var(--wax);stroke-width:1.4}
.lbl{font-family:var(--serif);font-style:italic;fill:var(--ink)}
.lbl.faint{fill:var(--ink-2);opacity:.6}
.cap{font-family:var(--serif);letter-spacing:.32em;fill:var(--ink-2)}
.cap.faint{opacity:.45}
.script{font-family:"Pinyon Script","IM Fell English",serif;fill:var(--ink);paint-order:stroke;stroke:#EBDDB6;stroke-width:4.5px;stroke-linejoin:round}
.nib{fill:var(--ink)}

/* engraved plates */
.plate-sm{position:relative;aspect-ratio:16/10;width:100%;background-color:#E6D5AB;background-image:var(--noise),var(--stain);border:6px double var(--ink-2);box-shadow:inset 0 0 50px rgba(120,80,20,.32),0 24px 40px -24px rgba(60,35,10,.5);color:var(--ink)}
.plate-sm svg{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px)}
.plate-sm .ink{stroke-width:1.5}
.navy .plate-sm,.band .plate-sm{background:rgba(255,255,255,.04);border-color:var(--gold-2);box-shadow:none}
.navy .plate-sm .ink,.band .plate-sm .ink{stroke:var(--gold-2)}
.plate-sm.glyph{aspect-ratio:1/1;max-width:300px;margin-top:40px;position:sticky;top:110px}
.band-grid .plate-sm{aspect-ratio:1/1;max-width:340px;justify-self:end}
.head-row{grid-template-columns:1fr minmax(260px,380px)}

/* sections */
.paper{background-color:#E9DAB0;background-image:var(--noise),var(--stain)}
.navy{background-color:var(--navy);background-image:var(--noise)}
.section-head h2{font-size:clamp(38px,5vw,62px)}
.section-head p{font-size:21px}
.case-quote{font-style:italic;font-size:clamp(32px,4.2vw,52px)}
.case-body{font-size:21px}
.writeup h2{font-size:clamp(32px,4vw,50px)}
.writeup p{font-size:20.5px}
.writeup p:first-of-type::first-letter{font-family:"UnifrakturCook",var(--serif);float:left;font-size:4.7em;line-height:.82;padding:.05em .1em 0 0;color:var(--wax)}
.bio-card{background:var(--parch-3);border:3px double var(--ink-2);border-top-width:3px}
.bio-card p{font-size:19px}
.facts dd{font-size:18px}
.issue p,.role .lead,.lrow p,.topics p,.cv-two p,.cv-two li{font-size:19.5px}
.role li{font-size:19px}
.issue .proof{font-size:18px;border-left-color:var(--wax)}
.recog b{font-size:19.5px}.recog small{font-size:17px}
.recog .yr{font-size:15.5px;font-weight:700;color:var(--wax);letter-spacing:.05em}
.role .when{font-size:16px;color:var(--wax)}
.roll li{font-size:18px}
.skills li{font-size:16.5px;background:var(--parch-3);border-color:var(--line)}
.expertise .plain li{font-size:19px}
.stage b{font-size:19.5px}.stage small{font-size:16.5px}
.post q{font-size:19px}
.frames-note{font-size:18px}
.band{background:linear-gradient(135deg,#6E1826 0%,#45101A 100%)}
.band blockquote{font-style:italic;font-size:clamp(28px,3.7vw,50px);max-width:26ch;line-height:1.18}
.honours b{font-size:clamp(20px,2vw,26px)}
.role::before{background:var(--parch)}
.timeline::after{background:linear-gradient(var(--wax),var(--gold))}
summary{font-family:var(--sans);font-size:14px;color:var(--wax)}
summary::before{border-color:var(--wax);color:var(--wax)}
.media-row a,.post .go,.stage a,.writeup .more a{color:var(--wax);border-bottom-color:var(--gold)}
.cv-top{background:radial-gradient(900px 500px at 80% 30%,#2D6247 0%,rgba(45,98,71,0) 60%),linear-gradient(180deg,#183D2A,#0F2519)}
.cv-top .slogan{font-style:italic}

/* correspondence */
.connect{background:linear-gradient(180deg,var(--navy),var(--navy-3))}
.seal-connect{position:absolute;right:0;top:-8px;width:min(290px,28%);transform:rotate(7deg);filter:drop-shadow(0 12px 16px rgba(0,0,0,.6))}
@media (max-width:900px){.seal-connect{display:none}}
footer{background:#0A1B12}
footer .wrap{align-items:center}
.foot-seal{display:inline-flex;align-items:center;gap:12px}
.fab{background:var(--wax);color:#F6E9C6;border:2px solid var(--gold-2);font-family:var(--sans);letter-spacing:.16em}
.fab:hover{background:var(--wax-2);color:#fff}
dialog{background:var(--parch-3);border:4px double var(--ink-2)}
.dlg-head{background:var(--navy);border-bottom:3px double var(--gold-2)}
.dlg-body label{font-family:var(--sans);font-size:14px;letter-spacing:.14em}
.dlg-body input,.dlg-body select,.dlg-body textarea{font-family:var(--sans);font-size:18px;background:#FBF5E4;border-color:#B9A67A}
.spot::after{background:radial-gradient(540px circle at var(--mx,74%) var(--my,30%),rgba(216,185,104,.13),transparent 62%)}
@media print{body::after{display:none}}

/* ===== mobile fixes ===== */
body{overflow-x:clip}
@media (max-width:900px){.head-row{grid-template-columns:1fr}}
@media (max-width:640px){
  .bar .wrap{gap:10px;min-height:58px}
  .mark{font-size:clamp(15px,4.4vw,19px);gap:8px;min-width:0;letter-spacing:.01em}
  .seal-mini{width:30px;height:30px}
  .bar nav a.cta{padding:9px 12px;font-size:12px;letter-spacing:.08em}
  .hero-grid{padding-block:40px 36px}
  .hero h1{font-size:clamp(46px,14vw,64px)}
  .hero .dek{font-size:18.5px}
  .plate-chart{border-width:6px}
  .cartouche{font-size:14px;padding:4px 10px;top:8px;left:12px}
  .seal-plate{width:76px;height:76px;right:12px;bottom:-24px}
  .plate-cap{font-size:19px;margin-top:42px}
  .section-head h2{font-size:clamp(32px,9vw,44px)}
  .case-quote{font-size:clamp(26px,7.4vw,36px)}
  .writeup p:first-of-type::first-letter{font-size:3.6em}
}


/* ===== house seal (image) + arms section ===== */
img.seal,img.seal-mini{object-fit:contain}
.seal-mini{border-radius:50%}
.arms-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:center}
.arms-fig{margin:0;text-align:center}
.arms-fig img{width:min(100%,460px);height:auto;margin-inline:auto;filter:drop-shadow(0 24px 30px rgba(60,35,10,.35))}
.arms-fig figcaption{margin-top:22px;font-family:var(--serif);font-style:italic;font-size:27px;color:var(--wax)}
.arms-fig figcaption span{display:block;margin-top:4px;font-family:var(--sans);font-style:normal;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.arms-text h2{font-size:clamp(36px,4.6vw,56px);margin-top:16px}
.arms-text>p{margin-top:20px;color:var(--muted);font-size:20.5px;max-width:58ch}
.legend{margin:28px 0 0;border-top:2px solid var(--ink)}
.legend div{display:grid;grid-template-columns:130px 1fr;gap:18px;padding-block:14px;border-bottom:1px solid var(--line)}
.legend dt{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--wax)}
.legend dd{margin:0;font-size:18.5px}
.arms-note{margin-top:18px!important;font-size:16px!important;font-style:italic}
@media (max-width:900px){.arms-grid{grid-template-columns:1fr;gap:36px}.legend div{grid-template-columns:1fr;gap:4px}}



/* ===== 2026-09-20 pass: gilt portrait frame, cache-safe mobile menu, small-screen fit ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img{height:auto}
img[width][height].seal,img[width][height].seal-mini{height:auto}
.portrait{width:min(100%,490px);margin:0;justify-self:center}
.portrait::before{display:none}

/* header: hamburger below 980px so every page stays reachable */
.menu-btn{display:none;width:44px;height:44px;flex:none;align-items:center;justify-content:center;background:transparent;border:2px solid var(--gold-2);color:var(--gold-2);cursor:pointer;padding:0}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{content:"";display:block;width:20px;height:2px;background:currentColor;transition:transform .2s,opacity .2s}
.menu-btn span{position:relative}
.menu-btn span::before{position:absolute;top:-6px}
.menu-btn span::after{position:absolute;top:6px}
.bar.open .menu-btn span{background:transparent}
.bar.open .menu-btn span::before{transform:translateY(6px) rotate(45deg)}
.bar.open .menu-btn span::after{transform:translateY(-6px) rotate(-45deg)}
.menu-btn:focus-visible,.fab:focus-visible,.btn:focus-visible{outline:3px solid var(--gold-2);outline-offset:3px}
@media (max-width:980px){
  .bar .wrap{flex-wrap:wrap;gap:10px 12px;padding-block:8px;min-height:60px}
  .bar nav{display:contents}
  .mark{order:1;margin-right:auto;min-width:0}
  .bar nav a.cta{order:2;flex:none}
  .menu-btn{order:3;display:inline-flex}
  .bar nav a:not(.cta){order:4;flex:0 0 100%;display:none;padding:14px 4px;border-top:1px solid rgba(216,185,104,.28);font-size:20px;color:var(--parch)}
  .bar.open nav a:not(.cta){display:block}
  .bar.open{max-height:100vh;max-height:100dvh;overflow-y:auto}
}

/* phones */
@media (max-width:640px){
  :root{--gut:18px}
  .wrap{width:calc(100% - 36px)}
  .mark{white-space:normal;line-height:1.05;font-size:clamp(16px,4.6vw,19px)}
  .bar nav a.cta{padding:10px 12px;font-size:12px;letter-spacing:.07em;white-space:nowrap}
  .hero-grid{gap:34px;padding-block:34px 30px}
  .hero .slogan{max-width:none}
  .portrait{width:min(100%,400px)}
  .actions{flex-direction:column;align-items:stretch}
  .actions .btn{width:100%;padding:16px 18px}
  .fab{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));padding:13px 16px;font-size:12px;letter-spacing:.1em}
  .stats li{padding:22px 14px}
  .stats span{max-width:none}
  dialog{width:calc(100% - 24px);max-width:none}
}
@media (max-width:360px){
  .bar nav a.cta{padding:9px 9px;font-size:11px}
  .mark{gap:6px}
  .seal-mini{width:26px;height:26px}
}
@media (hover:none){.portrait .frame{transform:none!important}}

/* header fit: name wraps to two lines instead of pushing the buttons onto a second row */
@media (max-width:980px){.mark{flex:1 1 0}}
@media (max-width:640px){
  .hero{outline-offset:-8px}
  .hero .label{font-size:13px;letter-spacing:.14em}
  .hero .label::before{margin-right:8px}
}
@media (max-width:480px){
  .bar nav a.cta{padding:9px 10px;font-size:11px;letter-spacing:.05em}
  .mark{font-size:16px}
}
@media (max-width:340px){.bar nav a.cta{display:none}}


/* portrait: clean photo, no frame overlay (frame.webp removed 2026-09-22 per Marques) */
.portrait{width:min(100%,470px)}
.portrait .frame{position:relative;aspect-ratio:4/5;overflow:hidden;border:0;background:var(--navy-3);box-shadow:0 40px 80px -30px rgba(0,0,0,.65)}
.portrait .frame .photo{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;z-index:1}
.portrait .frame .photo img{width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.portrait .frame .photo.carousel img{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease-in-out;object-fit:contain;object-position:50% 50%}
.portrait .frame .photo.carousel img.is-active{opacity:1;z-index:1}
@media (prefers-reduced-motion:reduce){.portrait .frame .photo.carousel img{transition:none}}
.portrait figcaption{position:static;left:auto;right:auto;bottom:auto;z-index:auto;background:none;padding:0;margin-top:18px;text-align:center;font-family:var(--serif);font-size:inherit;font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--gold-2)}
.portrait figcaption em{display:block;font-size:26px;line-height:1.15}
.portrait figcaption span{display:block;margin-top:9px;font-family:var(--sans);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-navy)}
@media (max-width:640px){
  .portrait .frame{aspect-ratio:1/1}
  .portrait .frame .photo img{object-position:50% 22%}
}
@media (max-width:640px){
  .portrait{width:min(100%,380px)}
  .portrait figcaption em{font-size:22px}
  .portrait figcaption span{font-size:11.5px;letter-spacing:.12em}
}

/* stats strip: room for the longer captions */
.stats span{max-width:30ch}
@media (max-width:640px){.stats span{max-width:none}}


/* drawings stay on every screen size: no empty columns, no missing sketches */
.connect .plate-sm{background:rgba(255,255,255,.04);border-color:var(--gold-2);box-shadow:none}
.connect .plate-sm .ink{stroke:var(--gold-2)}
.connect-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center}
.connect-plate{position:relative}
.connect-plate .plate-sm{aspect-ratio:1/1;max-width:380px;margin-inline:auto}
.connect-plate img.seal-connect{position:absolute;right:-6px;bottom:-30px;top:auto;width:112px;height:112px;transform:rotate(8deg)}
@media (max-width:900px){
  .plate-sm{max-width:560px;margin-inline:auto}
  .head-row .plate-sm{margin-top:12px}
  .plate-sm.glyph{position:static;top:auto;max-width:300px;margin-top:28px}
  .band-grid .plate-sm{justify-self:center;max-width:320px;margin-top:8px}
  .connect-grid{grid-template-columns:1fr;gap:44px}
  .connect-plate{width:100%;max-width:320px;margin-inline:auto}
  .connect-plate img.seal-connect{display:block;width:88px;height:88px;right:-8px;bottom:-24px}
}

.bio-card .plate-sm{margin-top:28px;aspect-ratio:16/10}
.stage-col .plate-sm{margin-top:36px;aspect-ratio:16/10}
@media (max-width:900px){.bio-card .plate-sm,.stage-col .plate-sm{margin-top:24px}}

/* speaking: the drawing takes whatever height the topics column has left */
.stage-col{display:flex;flex-direction:column}
.stage-col .plate-sm{flex:1 1 auto;min-height:220px;aspect-ratio:auto}
@media (max-width:900px){.stage-col .plate-sm{flex:none;aspect-ratio:16/10;min-height:0}}


/* ===== idea pages: explainer film, plain-words copy, drawings everywhere ===== */
.idea-hero .hero-grid{align-items:center}
.idea-hero h1{font-size:clamp(40px,5.4vw,76px);line-height:1.02}
.idea-plate{display:flex;justify-content:center}
.hero .plate-sm,.film-sec .plate-sm{background:rgba(255,255,255,.04);border-color:var(--gold-2);box-shadow:none}
.hero .plate-sm .ink,.film-sec .plate-sm .ink{stroke:var(--gold-2)}
.idea-plate .plate-sm{width:100%;max-width:470px;aspect-ratio:4/3}
.film-sec{background:var(--navy-3);color:var(--parch);padding-block:84px}
.film-sec .label{color:var(--gold-2)}
.film-sec .section-head h2{color:var(--parch)}
.film-sec .section-head p{color:var(--muted-navy)}
.film{margin:40px 0 0;background:#1a120a;border:10px double var(--gold-2);box-shadow:0 40px 80px -30px rgba(0,0,0,.75)}
.film video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#1a120a}
.film figcaption{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;padding:14px 18px;background:var(--navy);font-family:var(--sans);font-size:15px;letter-spacing:.06em;color:var(--muted-navy)}
.film figcaption a{color:var(--gold-2);text-decoration:none;border-bottom:1px solid rgba(216,185,104,.6)}
.transcript{margin-top:28px;border:1px solid var(--line-navy);background:rgba(255,255,255,.03);padding:0 22px}
.transcript summary{cursor:pointer;padding:18px 0;font-family:var(--sans);font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2)}
.transcript ol{margin:0;padding:0 0 24px;list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:24px 44px}
.transcript li b{display:block;font-family:var(--serif);font-weight:400;font-size:23px;color:var(--parch)}
.transcript li p{margin:6px 0 0;color:var(--muted-navy);font-style:italic;font-size:18.5px}
.idea-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:72px;align-items:start}
.idea-copy h2{font-size:clamp(32px,4vw,50px);margin-top:14px}
.idea-copy p{margin-top:20px;font-size:20.5px;max-width:62ch}
.idea-side{position:sticky;top:110px}
.idea-side .plate-sm{aspect-ratio:4/3;width:100%}
.pull{margin:34px 0 0;padding-left:22px;border-left:3px solid var(--gold);font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.1vw,29px);line-height:1.28;color:var(--wax)}
.idea-side .who{margin:14px 0 0 25px;font-family:var(--sans);font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.gallery{margin-top:44px;display:grid;grid-template-columns:repeat(2,1fr);gap:40px 36px}
.gallery figure{margin:0}
.gallery img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:6px double var(--ink-2);box-shadow:0 24px 40px -24px rgba(60,35,10,.5)}
.gallery figcaption{margin-top:12px;font-style:italic;font-size:19px;color:var(--muted)}
.readings{margin:36px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 44px;border-top:2px solid var(--ink)}
.readings>div{padding:22px 0;border-bottom:1px solid var(--line)}
.readings dt{font-family:var(--serif);font-size:26px;line-height:1.15;color:var(--wax)}
.readings dd{margin:8px 0 0;font-size:18.5px}
.qlist{margin:36px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px;border-top:1px solid var(--line-navy)}
.qlist li{position:relative;padding:22px 0 22px 34px;border-bottom:1px solid var(--line-navy);font-family:var(--serif);font-size:clamp(21px,2vw,27px);line-height:1.25;color:var(--parch)}
.qlist li::before{content:"";position:absolute;left:0;top:29px;width:17px;height:17px;background:var(--fleuron-gold) center/contain no-repeat}
.next-grid{margin-top:40px;display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
.next-card{display:block;text-decoration:none;color:inherit;padding:18px;background:var(--parch-3);border:3px double var(--ink-2);box-shadow:0 24px 40px -28px rgba(60,35,10,.5);transition:transform .2s}
.next-card:hover{transform:translateY(-3px)}
.next-card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--ink-2);margin-bottom:16px}
.next-card h3{font-size:clamp(26px,2.6vw,34px);margin-top:8px}
.next-card p{margin:8px 0 0;color:var(--muted);font-size:19px}
.next-card .go{display:inline-block;margin-top:14px;font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--wax);border-bottom:1px solid var(--gold)}
@media (max-width:900px){
  .idea-grid{grid-template-columns:1fr;gap:40px}
  .idea-side{position:static}
  .transcript ol,.gallery,.readings,.qlist,.next-grid{grid-template-columns:1fr}
  .idea-plate .plate-sm{max-width:340px}
  .film-sec{padding-block:56px}
  .film{border-width:6px}
}
@media (max-width:640px){
  .idea-hero h1{font-size:clamp(34px,10vw,48px)}
  .transcript{padding:0 16px}
}

/* ideas list on the home page: each framework opens its own page */
.frames{list-style:none;margin:6px 0 0;padding:0}
.frames li{border-bottom:1px solid var(--line)}
.frames a{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:center;padding:18px 0;text-decoration:none;color:inherit}
.frames a:hover strong{color:var(--wax)}
.frames img{width:200px;height:auto;aspect-ratio:16/9;object-fit:cover;border:3px double var(--ink-2)}
.frames strong{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.4vw,31px);line-height:1.1}
.frames span{display:block;margin-top:6px;font-family:var(--sans);font-size:13.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--wax)}
@media (max-width:560px){.frames a{grid-template-columns:104px 1fr;gap:14px}.frames img{width:104px}}

.glance{margin:34px 0 0;border-top:2px solid var(--ink)}
.glance>div{padding:14px 0;border-bottom:1px solid var(--line)}
.glance dt{font-family:var(--sans);font-size:13.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--wax)}
.glance dd{margin:4px 0 0;font-size:19px;line-height:1.35}


/* ===== Aizen: the timed desk, the tiers, the checkout ===== */
.desk-sec{padding-block:72px}
.panel{background:var(--parch-3);border:4px double var(--ink-2);box-shadow:0 30px 60px -34px rgba(60,35,10,.55)}
.notice{margin:18px 0 0;padding:14px 18px;border:2px solid #2D6247;background:rgba(45,98,71,.08);font-size:18px;line-height:1.4}
.notice.bad{border-color:var(--wax);background:rgba(138,31,45,.08)}
.notice[hidden]{display:none}
.desk-intro{display:grid;grid-template-columns:1.15fr .85fr;gap:0}
.desk-intro>div{padding:34px 36px}
.desk-intro>div+div{border-left:1px solid var(--line);background:rgba(255,255,255,.28)}
.desk-intro h3,.desk-paid h3,.desk-ended h3{font-size:clamp(28px,3vw,38px);margin:10px 0 0}
.desk-intro p,.desk-paid p,.desk-ended p{margin:14px 0 0;font-size:19.5px;max-width:56ch}
.desk-intro .btn,.desk-paid .btn,.desk-ended .btn{margin-top:22px}
.tiny{font-size:16px!important;color:var(--muted);font-style:italic}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:0;list-style:none}
.chips button{font:inherit;font-size:17px;padding:9px 14px;border:1.5px solid var(--ink-2);background:var(--parch);color:var(--ink);cursor:pointer;text-align:left}
.chips button:hover{background:var(--ink);color:var(--parch-3)}
.mini-tiers{margin:18px 0 0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.mini-tiers li{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:19px}
.mini-tiers b{font-family:var(--serif);font-weight:400;color:var(--wax);font-size:22px}
.desk-paid,.desk-ended{padding:38px 40px;text-align:left}
.desk-live{display:grid;grid-template-columns:1fr 310px;gap:0}
.letters-wrap{display:flex;flex-direction:column;min-width:0}
.letters{height:min(62vh,560px);min-height:320px;overflow-y:auto;padding:26px 28px;background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0)),var(--parch);box-shadow:inset 0 0 40px rgba(120,80,20,.16);scroll-behavior:smooth}
.msg{max-width:90%;margin:0 0 18px;padding:14px 18px 12px;border:1.5px solid var(--ink-2);background:var(--parch-3);font-size:19.5px;line-height:1.5;position:relative}
.msg p{margin:0 0 10px}.msg p:last-child{margin-bottom:0}
.msg .who{display:block;margin-bottom:6px;font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--wax)}
.msg.aizen{margin-right:auto;border-left:5px solid var(--gold-2)}
.msg.you{margin-left:auto;background:#EBDBB0;border-right:5px solid #2D6247}
.msg.you .who{color:#2D6247;text-align:right}
.typing{padding:0 28px 8px;font-style:italic;color:var(--muted);font-size:17px;background:var(--parch)}
.typing[hidden]{display:none}
.compose{display:grid;grid-template-columns:1fr auto;gap:12px;padding:16px 20px 18px;border-top:2px solid var(--ink);background:var(--parch-3)}
.compose textarea{width:100%;min-height:58px;max-height:150px;resize:vertical;font:inherit;font-size:19px;padding:12px 14px;background:#FBF5E4;border:1.5px solid #B9A67A;color:var(--ink)}
.compose textarea:disabled{opacity:.55}
.compose .btn{align-self:stretch}
.gauge{background:radial-gradient(240px 200px at 50% 20%,#2D6247,rgba(45,98,71,0) 70%),linear-gradient(180deg,#183D2A,#0F2519);color:var(--parch);padding:28px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;border-left:4px double var(--gold-2)}
.clock{position:relative;width:150px;height:150px}
.clock svg{width:100%;height:100%;transform:rotate(-90deg)}
.clock .track{fill:none;stroke:rgba(216,185,104,.25);stroke-width:7}
.clock .ring{fill:none;stroke:var(--gold-2);stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .3s linear}
.clock .digits{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:38px;color:var(--parch-3);font-variant-numeric:tabular-nums}
.gauge .session-name{font-family:var(--serif);font-size:23px;line-height:1.15}
.gauge .hint{margin:0;font-size:16.5px;color:var(--muted-navy);line-height:1.35}
.gauge .hint.low{color:#F0B9A6}
.gauge .btn{width:100%;padding:12px 14px;font-size:12.5px}
.tiers{margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;align-items:stretch}
.tiers.tiers-solo{grid-template-columns:minmax(0,380px);justify-content:center}
.tier{display:flex;flex-direction:column;padding:20px 20px 24px;background:var(--parch-3);border:4px double var(--ink-2);box-shadow:0 26px 44px -30px rgba(60,35,10,.55);position:relative}
.tier.best{border-color:var(--wax);box-shadow:0 30px 50px -28px rgba(138,31,45,.5)}
.tier .badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);padding:4px 14px;background:var(--wax);color:#F6E9C6;font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.tier .plate-sm{width:100%;aspect-ratio:16/10;margin-bottom:18px}
.tier .mins{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--wax)}
.tier h3{font-size:clamp(25px,2.2vw,30px);margin-top:6px}
.tier .price{margin:10px 0 0;font-family:var(--serif);font-size:44px;line-height:1;color:var(--ink)}
.tier .price small{font-family:var(--sans);font-size:15px;letter-spacing:.06em;color:var(--muted)}
.tier .lead{margin:12px 0 0;font-style:italic;color:var(--muted);font-size:19px}
.tier ul{margin:16px 0 22px;padding:0;list-style:none;flex:1}
.tier li{position:relative;padding:8px 0 8px 26px;border-top:1px solid var(--line);font-size:18px;line-height:1.35}
.tier li::before{content:"";position:absolute;left:0;top:13px;width:14px;height:14px;background:var(--fleuron) center/contain no-repeat}
.tier .btn{width:100%}
.steps{margin:36px 0 0;padding:0;list-style:none;counter-reset:st;display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--line-navy)}
.steps li{counter-increment:st;padding:22px 20px 24px 0;font-size:19px;line-height:1.4;color:var(--parch)}
.steps li::before{content:counter(st);display:block;font-family:var(--serif);font-size:44px;line-height:1;color:var(--gold-2);margin-bottom:10px}
.steps b{display:block;font-family:var(--serif);font-weight:400;font-size:24px;margin-bottom:4px;color:var(--parch-3)}
.topic-grid{margin-top:40px;display:grid;grid-template-columns:repeat(2,1fr);gap:36px 40px}
.topic{display:grid;grid-template-columns:170px 1fr;gap:22px;align-items:center}
.topic .plate-sm{width:100%;aspect-ratio:1/1;max-width:none}
.topic h3{font-size:clamp(24px,2.3vw,30px)}
.topic p{margin:8px 0 0;font-size:19px;color:var(--muted)}
.faq{margin-top:34px;border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line);padding:0}
.faq summary{cursor:pointer;padding:18px 0;font-family:var(--serif);font-size:clamp(21px,2vw,26px);color:var(--ink);text-transform:none;letter-spacing:0}
.faq summary::before{content:none}
.faq details p{margin:0 0 20px;font-size:19.5px;max-width:70ch}
.pay-cta{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px}
.consult-teaser .tiers-row{margin:26px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line-navy)}
.consult-teaser .tiers-row li{padding:18px 18px 18px 0;color:var(--parch);font-size:18px;border-bottom:1px solid var(--line-navy)}
.consult-teaser .tiers-row b{display:block;font-family:var(--serif);font-weight:400;font-size:34px;color:var(--gold-2);line-height:1.1}
@media (max-width:1100px){.tiers{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){
  .desk-sec{padding-block:48px}
  .desk-intro{grid-template-columns:1fr}
  .desk-intro>div{padding:26px 22px}
  .desk-intro>div+div{border-left:0;border-top:1px solid var(--line)}
  .desk-paid,.desk-ended{padding:28px 22px}
  .desk-live{grid-template-columns:1fr}
  .gauge{order:-1;flex-direction:row;flex-wrap:wrap;justify-content:center;border-left:0;border-bottom:4px double var(--gold-2);padding:18px 16px;gap:10px 18px}
  .clock{width:96px;height:96px}.clock .digits{font-size:26px}
  .gauge .session-name{font-size:20px}.gauge .hint{flex:1 1 100%}
  .gauge .btn{width:auto;flex:1 1 140px}
  .letters{height:min(54vh,440px);padding:18px 14px}
  .msg{max-width:96%;font-size:18.5px}
  .topic-grid{grid-template-columns:1fr}
  .consult-teaser .tiers-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .tiers{grid-template-columns:1fr;gap:34px}
  .steps{grid-template-columns:1fr 1fr}
  .topic{grid-template-columns:110px 1fr;gap:14px}
  .compose{grid-template-columns:1fr;padding:12px}
  .compose .btn{padding:14px}
}
@media (prefers-reduced-motion:reduce){.clock .ring{transition:none}.letters{scroll-behavior:auto}}

.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* the hidden attribute must always win over layout classes */
[hidden]{display:none!important}

.tier .price small{display:block;margin-top:8px;font-size:15px}

/* ===== Registration, booking and privacy ===== */
.reg-form{margin-top:22px;display:grid;gap:16px;max-width:660px}
.reg-lead{margin:0!important;font-size:19px;font-style:italic;color:var(--ink-2)}
.reg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px 16px}
.reg-grid .check,.reg-grid .hp{grid-column:1/-1}
.fld{display:grid;gap:6px;align-content:start;min-width:0}
.fld label{font-family:var(--sans);font-size:13.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.fld input,.fld select,.fld textarea{width:100%;font:inherit;font-size:18px;padding:11px 13px;background:#FBF5E4;border:1.5px solid #B9A67A;color:var(--ink);border-radius:0}
.fld textarea{resize:vertical;min-height:96px}
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible{outline:3px solid var(--gold-2);outline-offset:1px;border-color:var(--ink-2)}
.fld [aria-invalid="true"],.check [aria-invalid="true"]{border-color:var(--wax);background:#FFF3EE;outline:2px solid var(--wax)}
.fld .hint{font-size:15px;color:var(--muted);font-style:italic;line-height:1.35}
.check{display:flex;gap:12px;align-items:flex-start;font-size:16.5px;line-height:1.42;color:var(--ink-2);cursor:pointer}
.check input{flex:none;width:22px;height:22px;margin-top:2px;accent-color:var(--wax)}
.check a{color:var(--wax)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.reg-welcome .hello{margin:14px 0 0;font-size:21px}
.reg-welcome .btn,.reg-used .pay-cta .btn{margin-top:16px}
.linkish{background:none;border:0;padding:0;margin:18px 0 0 16px;font:inherit;font-size:17px;color:var(--wax);text-decoration:underline;cursor:pointer}
.reg-used p{margin:14px 0 0;font-size:20px}

.book-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.book-pick,.book-form{padding:30px 32px;min-width:0}
.book-form{margin:0;max-width:none;border-left:1px solid var(--line);background:rgba(255,255,255,.28)}
.days{display:flex;gap:10px;overflow-x:auto;padding:6px 2px 14px;margin-top:12px;scroll-snap-type:x proximity}
.day{flex:none;width:78px;display:grid;justify-items:center;gap:0;padding:9px 6px;border:1.5px solid var(--ink-2);background:var(--parch);color:var(--ink);cursor:pointer;font-family:var(--sans);scroll-snap-align:start}
.day span{font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.day b{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.15}
.day:hover{background:var(--parch-3)}
.day[aria-pressed="true"]{background:var(--ink);color:var(--parch-3);border-color:var(--ink)}
.times{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;margin-top:6px}
.time{padding:12px 8px;border:1.5px solid var(--ink-2);background:var(--parch);font:inherit;font-size:19px;color:var(--ink);cursor:pointer}
.time:hover{background:var(--parch-3)}
.time[aria-pressed="true"]{background:var(--wax);color:#F6E9C6;border-color:var(--gold-2)}
.day:focus-visible,.time:focus-visible,.linkish:focus-visible{outline:3px solid var(--gold-2);outline-offset:2px}
.chosen{margin:0;padding:12px 14px;border:1.5px dashed var(--ink-2);background:rgba(255,255,255,.4);font-size:18px;line-height:1.4}
.book-done{padding:38px 40px;text-align:left}
.book-done h3{font-size:clamp(28px,3vw,38px);margin:10px 0 0}
.book-done p{margin:14px 0 0;max-width:60ch;font-size:19.5px}
.book-done .when{font-family:var(--serif);font-size:clamp(23px,3vw,34px);line-height:1.25;color:var(--wax)}
.privacy{max-width:72ch}
.privacy h2{font-size:clamp(24px,2.6vw,32px);margin:36px 0 8px}
.privacy h2:first-child{margin-top:0}
.privacy p,.privacy ul{margin:10px 0 0;max-width:64ch}
.privacy ul{padding-left:1.2em}
.privacy li{margin:6px 0}
.privacy a{color:var(--wax)}
@media (max-width:900px){
  .book-grid{grid-template-columns:1fr}
  .book-form{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:640px){
  .reg-grid{grid-template-columns:1fr}
  .book-pick,.book-form{padding:22px 18px}
  .book-done{padding:26px 20px}
  .day{width:70px}
}

.desk-plate{margin-top:30px;max-width:420px}
.book-pick .desk-plate{margin-top:26px;max-width:none}