/* BUILD75 | Four perspectives / one editorial system.
   Shared families, label and number tokens, quieter grouped navigation.
   Keep story layouts (including the approved Before We Meet page) intact. */
:root{--as-porcelain:#f6f1ea;--as-ink:#2b2823;--as-ink-deep:#1c1a16;
 --as-champagne:#b89b72;--as-champagne-text:#96764f;--as-muted:#46423c;
 --as-serif:'Cormorant Garamond',Georgia,serif;--as-sans:'Inter',Arial,sans-serif}

/* Shared typographic rhythm. Titles keep the editorial serif, all utility labels the
   same Inter tracking, and narrative pages retain their approved text layouts. */
.story-detail-copy :is(h1,h2), .career-map-intro h1, .career-map-detail h2,
.memoir-copy :is(h1,h2), body[data-theme="signature"] #portrait-main :is(.hero-title,.section-title,.unseen-thesis),
body[data-theme="signature"] #summary-main :is(h1,h2){
 font-family:var(--as-serif)!important;font-kerning:normal;text-rendering:optimizeLegibility;
 letter-spacing:-.015em!important;
}
.story-eyebrow,.career-map-eyebrow,.career-map-detail-kicker,.career-map-cap-label,
.memoir-eyebrow,body[data-theme="signature"] #portrait-main :is(.kicker,.eyebrow,.micro,.rail-number),
body[data-theme="signature"] #summary-main :is(.kicker,.eyebrow,.micro,.rail-number){
 font-family:var(--as-sans)!important;font-weight:600!important;font-size:10px;
 line-height:1.5;letter-spacing:.13em!important;text-transform:uppercase;
 color:var(--as-champagne-text)!important;
}
/* Legible and coherent body/UI typography. Narrative text can remain editorial serif;
   the discovery report stays Inter, without an unintended wholesale reflow. */
.story-detail-copy :is(.story-note,.story-continue), .career-map-detail .career-map-tags,
.career-map-hint,.memoir-route button,.memoir-progress,.memoir-soundtrack,
body[data-theme="signature"] #portrait-main :is(.section-takeaway,.methodology-disclosure),
body[data-theme="signature"] #summary-main :is(.summary-cta,.summary-pill){font-family:var(--as-sans)!important}

/* A single quiet nav vocabulary across Before, Portrait, Map and Memoir. */
:where(.story-topbar,.site-header .btt-unified-header) :is(a,button){
 font-family:var(--as-sans)!important;text-shadow:none!important;
 transition:color .18s ease,opacity .18s ease,background-color .18s ease,border-color .18s ease!important;
}
.story-topbar .story-subnav-left,.site-header .btt-header-left{gap:clamp(18px,2.2vw,29px)!important}
.story-topbar .story-back,.site-header .btt-back-to-about{
 display:inline-flex;align-items:center;gap:9px;
 font:600 11px/1.5 var(--as-sans)!important;
 letter-spacing:.10em!important;white-space:nowrap;
 color:inherit;text-decoration:none!important;opacity:.92;
}
.story-topbar .story-back span,.site-header .btt-back-to-about span{
 color:var(--as-champagne)!important;font-size:17px;line-height:1;transition:none!important}
.story-topbar .story-section-nav,.site-header .btt-story-nav{
 display:flex;align-items:center;gap:0!important;min-width:0;position:relative;
 padding-left:20px;
}
/* A soft boundary makes 'Rólam' the parent, not a fifth peer page. */
.story-topbar .story-section-nav::before,.site-header .btt-story-nav::before{
 content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
 height:17px;border-left:1px solid rgba(184,155,114,.46);
}
.story-topbar .story-section-link,.site-header .btt-story-section-link{
 display:inline-flex;align-items:center;justify-content:center;position:relative;
 padding:8px 0!important;white-space:nowrap;
 font:500 11px/1.4 var(--as-sans)!important;letter-spacing:.035em!important;
 text-transform:uppercase;text-decoration:none!important;transform:none!important;
 border:0!important;box-shadow:none!important;opacity:.73!important;
 color:inherit!important;transition:color .18s ease,opacity .18s ease!important;
}
/* Tiny champagne interpuncts visually group the four story pages. */
.story-topbar .story-section-link+.story-section-link::before,
.site-header .btt-story-section-link+.btt-story-section-link::before{
 content:'·';display:inline-block;position:relative;margin:0 clamp(9px,1.15vw,17px);
 font:500 15px/1 var(--as-sans);color:var(--as-champagne);opacity:.65;
 pointer-events:none;transform:none!important;
}
.story-topbar .story-section-link.is-current,.site-header .btt-story-section-link.is-current{
 opacity:1!important;font-weight:600!important;color:var(--as-ink-deep)!important;
 background:none!important;text-decoration:none!important;border:0!important;
}
.story-topbar .story-section-link:hover,.site-header .btt-story-section-link:hover,
.story-topbar .story-section-link:focus-visible,.site-header .btt-story-section-link:focus-visible{
 opacity:1!important;color:var(--as-champagne-text)!important;transform:none!important;
 background:none!important;border:0!important;text-decoration:none!important;
}
.story-topbar .story-subnav-right{gap:clamp(13px,1.2vw,20px)!important}
.story-topbar .story-language,.site-header .lang-switch{
 font:600 11px/1.4 var(--as-sans)!important;letter-spacing:.08em!important;
 color:inherit!important;opacity:.85!important;transform:none!important;
 text-decoration:none!important;border:0!important;background:none!important;
}
.story-topbar .story-close,.site-header .btt-close{
 width:31px;height:31px;min-width:31px;min-height:31px;
 border-radius:50%;border:1px solid rgba(70,66,60,.25);
 font:400 21px/1 var(--as-sans)!important;text-decoration:none!important;
 background:transparent!important;transform:none!important;
}
.story-topbar :is(.story-close,.story-back,.story-language):hover,
.site-header :is(.btt-close,.btt-back-to-about,.lang-switch):hover{
 color:var(--as-champagne-text)!important;transform:none!important;
}
.story-topbar :is(a,button):focus-visible,.site-header .btt-unified-header :is(a,button):focus-visible{
 outline:1px solid var(--as-champagne);outline-offset:4px;
}
/* The dark memoir retains its distinctive film-like background and ivory text. */
.memoir-page .story-topbar :is(.story-back,.story-section-link,.story-language,.story-close),
.memoir-page .story-topbar .story-section-link.is-current{color:#f0ece4!important}
.memoir-page .story-topbar .story-section-link:not(.is-current){opacity:.72!important}
.memoir-page .story-topbar :is(.story-back,.story-section-link,.story-language,.story-close):hover,
.memoir-page .story-topbar :is(.story-back,.story-section-link,.story-language,.story-close):focus-visible{
 color:#b89b72!important}
.memoir-page .story-topbar .story-close{border-color:rgba(240,236,228,.3)}
/* Reader mode stays on the right, but no heavy active fill/underline. */
.site-header .btt-header-right{gap:clamp(12px,1.45vw,20px)!important}
.site-header .reading-switch{padding:2px!important;background:rgba(184,155,114,.07)!important;
 border:1px solid rgba(184,155,114,.18)!important;border-radius:4px!important}
.site-header .reading-option{font:500 11px/1.4 var(--as-sans)!important;
 padding:7px 11px!important;letter-spacing:.005em!important;transform:none!important;
 border:0!important;text-decoration:none!important;box-shadow:none!important;
 background:transparent!important;color:var(--as-muted)!important}
.site-header .reading-option[aria-pressed="true"]{
 background:rgba(184,155,114,.13)!important;color:var(--as-ink-deep)!important;
 border:0!important;box-shadow:none!important;text-decoration:none!important}
.site-header .reading-option:hover{color:var(--as-champagne-text)!important}
/* Restore readable 11px nav at 1366px laptop sizes; only collapse when truly crowded. */
@media(min-width:1121px){.site-header .btt-story-nav{display:flex!important}}
@media(max-width:1120px){.site-header .btt-story-nav{display:none!important}}
@media(max-width:900px){
 .story-topbar .story-subnav-left{gap:12px!important}
 .story-topbar .story-section-nav{padding-left:11px;gap:0!important;max-width:65vw;
 overflow-x:auto;scrollbar-width:none;mask-image:linear-gradient(to right,#000 93%,transparent)}
 .story-topbar .story-section-link{font-size:10px!important}
 .story-topbar .story-section-link+.story-section-link::before{margin:0 9px}
 .story-topbar .story-back{font-size:10px!important}
}
@media(max-width:600px){
 .site-header .reading-option{font-size:10px!important;padding:6px 8px!important}
 .site-header .btt-header-right{gap:7px!important}
 .site-header .btt-back-to-about,.site-header .lang-switch{font-size:10px!important}
 .story-topbar .story-section-nav{max-width:57vw}
 .story-topbar .story-section-link{font-size:10px!important}
 .story-topbar .story-language{font-size:10px!important}
}
@media(prefers-reduced-motion:reduce){
 .story-topbar :is(a,button),.site-header .btt-unified-header :is(a,button){transition:none!important}
}