/* Shared additions for every public page (v2.7) */
[hidden]{display:none!important}

/* Primary light buttons get the same gold hover as the rest of the site */
.pill.light{transition:transform .25s,opacity .25s,background .3s,color .3s}
.pill.light:hover:not(:disabled){background:var(--gold,#AB8B4E);color:#05081C}
.pill:disabled{opacity:.6;cursor:default;transform:none}

/* Newsletter: error line + success state that keeps the form's footprint */
.nl-err{margin:10px 0 0;min-height:1em;font-size:13.5px;color:#E7B7A9}
.nl-err:empty{display:none}
.nl-ok{display:flex;align-items:center;gap:14px;width:min(440px,100%);min-height:58px;padding:8px 10px 8px 22px;border-radius:999px;background:rgba(243,241,234,.08);text-align:start;outline:none}
.nl-ok i{flex:none;width:40px;height:40px;border-radius:50%;background:var(--gold,#AB8B4E);position:relative}
.nl-ok i::after{content:"";position:absolute;left:50%;top:46%;width:14px;height:7px;border-left:2px solid #05081C;border-bottom:2px solid #05081C;transform:translate(-50%,-50%) rotate(-45deg)}
.nl-ok b{display:block;font-weight:500;font-size:16px;line-height:1.4}
.nl-ok span{display:block;font-size:13.5px;line-height:1.6;color:var(--on2,rgba(243,241,234,.7))}
.nl-ok bdi{unicode-bidi:isolate}
.arnl .nl-ok{margin-inline:auto}
.arnl .nl-err{text-align:center}

/* Article without a cover image: the title on a brand colour */
.at-panel{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;width:100%;height:100%;padding:clamp(22px,4vw,56px);background:var(--pb);color:var(--pt);overflow:hidden;text-align:start}
.at-panel::before{content:"";position:absolute;inset-inline-start:clamp(22px,4vw,56px);top:clamp(22px,4vw,56px);width:44px;height:2px;background:var(--pa)}
.at-panel small{font-size:13px;letter-spacing:.02em;color:var(--pa);opacity:.95}
.at-panel b{font-family:var(--serif,inherit);font-weight:300;font-size:clamp(24px,3.2vw,48px);line-height:1.35;max-width:18ch}
.at-panel.sm b{font-size:clamp(20px,2vw,28px)}
.at-panel.sm{padding:22px}
.at-panel.sm::before{inset-inline-start:22px;top:22px}

/* Header navigation (desktop). Phones keep the burger menu. */
.hnav{display:none}
@media (min-width:760px){
  .hnav{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);margin-inline-start:auto;font-size:15px}
  .hnav a{position:relative;padding-block:6px;opacity:.82;transition:opacity .25s,color .25s}
  .hnav a:hover{opacity:1;color:var(--gold,#AB8B4E)}
  .hnav a[aria-current="page"]{opacity:1}
  .hnav a[aria-current="page"]::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--gold,#AB8B4E)}
  .hdr .burger{display:none}
}

/* Safari 15 (macOS 12) has no color-mix(): give the sticky header and toolbars a solid fallback */
@supports not (color:color-mix(in srgb,red 50%,blue)){
  .hdr.bg,.toolbar{background:rgba(247,246,242,.93)}
  .hdr.on-dark.bg{background:rgba(5,8,28,.85)}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hdr.bg:not(.on-dark),:root:not([data-theme="light"]) .toolbar{background:rgba(11,14,31,.9)}}
}

/* ---------- phones and tablets (v2.8 audit) ---------- */
/* Footer section links: no stray separator when the line wraps */
@media (max-width:600px){
  .ft nav.big{gap:4px 22px}
  .ft nav.big .sep{display:none}
}
/* Every link and control at least 44px tall, so it is comfortable to tap on phones and tablets */
.ft .sub a:not(.pill),.ft .soc a,.post-hero .back,.more2,.hdr .mark{display:inline-flex;align-items:center;min-height:44px}
.ft .soc a{min-width:44px;justify-content:center}
.ft nav.big a{display:inline-flex;align-items:center;min-height:44px}
@media (pointer:coarse),(max-width:860px){.bars button{height:44px}}
.at-slider .at-dots{gap:10px}
.at-slider .at-dots button{position:relative}
.at-slider .at-dots button::after{content:"";position:absolute;inset:-18px -5px}
/* Small phones: the article progress bars must not run into the newsletter badge */
@media (max-width:480px){
  .bars{gap:8px}
  .bars button{width:40px}
}
/* Tablets: keep the two secondary articles side by side */
@media (min-width:701px) and (max-width:860px){
  .duo2{grid-template-columns:1fr 1fr!important}
}

/* ---------- typography system (v2.9) ----------
   One rule for the whole site: headings break into balanced lines, and the last two words of any
   heading or paragraph stay together (site.js adds a non-breaking space where text-wrap is not supported). */
h1,h2,h3,.at-panel b,.cd .ov b{text-wrap:balance}
p,li,blockquote,.deck{text-wrap:pretty}

/* Inner pages (works, articles, about, article): one hero scale, less empty space above the fold */
.wk-hero,.ar-hero{padding-top:clamp(104px,14vh,150px);padding-bottom:clamp(24px,3.5vh,40px)}
.wk-hero h1,.ar-hero h1{margin:0 0 16px;font-size:clamp(34px,4.2vw,60px);line-height:1.3;max-width:none}
.wk-hero p,.ar-hero p{max-width:62ch;line-height:1.9}
.abt-hero{padding-top:clamp(104px,14vh,150px)!important}
.post-hero{padding-top:clamp(104px,14vh,150px)}
@media (max-width:700px){
  .wk-hero,.ar-hero,.abt-hero,.post-hero{padding-top:104px!important}
}

/* Turnstile check, shown only when Cloudflare asks for one */
.at-ts{position:fixed;z-index:200;bottom:16px;left:50%;transform:translateX(-50%)}

/* Current section: gold underline in the header, and marked in the phone menu */
.hnav a[aria-current="page"]{opacity:1;color:inherit}
.hnav a[aria-current="page"]::after{height:2px;bottom:-2px}
#menu nav a[aria-current="page"]{color:var(--gold,#AB8B4E)}

/* Anchored sections land below the fixed header */
[id]{scroll-margin-top:72px}
#consult,#top{scroll-margin-top:0}

/* Request form: three request types fit on a phone */
@media (max-width:520px){.seg button{font-size:13px;line-height:1.35;padding:6px 8px}}

/* Books (about page): a real cover when one is uploaded */
.bk .cv.has-img{padding:0;background:#E9E5DA}
.bk .cv.has-img img{width:100%;height:100%;object-fit:cover;display:block}
a.bk{color:inherit;text-decoration:none}

/* Footer (v3.6.7): one rhythm on every page, social links everywhere, less empty space */
.ft{padding-block:clamp(64px,7vw,104px) 32px}
.ft .sub{margin-top:clamp(28px,3vw,40px)}
.ft .bottom{margin-top:clamp(48px,5vw,72px)}
.ft .bottom.solo{align-items:center}
.ft .legal{margin-top:28px}
/* The last section of every page hands over to the footer without a second empty band */
main > section:last-child,main > div:last-child{padding-bottom:clamp(64px,7vw,104px)}
.ft .bottom.solo .soc{justify-content:center}
.ft .bottom.solo{justify-content:center}