/* A smaller masthead stays with the reader; the section links never wrap. */
:root{scroll-padding-block-start:calc(var(--site-header-height,116px) + 12px)}
.site-header{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:auto minmax(0,1fr) auto;max-width:none;gap:12px 28px;padding:8px max(5%,calc((100vw - 1280px)/2));background:#101713fa;border-bottom:1px solid var(--line);box-shadow:0 3px 14px #0002;align-items:center}
.site-header .wordmark{font-size:1.25rem;min-height:44px;align-items:center;letter-spacing:-.06em}
.site-header .mark-dot{width:5px;height:5px;align-self:center;margin:9px 0 0 4px}
.site-header .edition{display:none}
.site-header nav{display:flex;flex-wrap:nowrap;justify-content:center;gap:0 20px;min-width:0;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;scrollbar-color:#526254 transparent;order:initial;flex-basis:auto}
.site-header nav a{flex:none;display:flex;align-items:center;min-height:44px;font-size:.875rem;white-space:nowrap;border-bottom:2px solid transparent;padding:0 1px;color:var(--muted)}
.site-header nav a[aria-current]{color:var(--fg);border-bottom-color:var(--red)}
.site-header nav a:focus-visible,.case-controls button:focus-visible,.case-rail:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.site-header .language-picker{margin:0;padding:0 8px;font-size:.875rem;min-height:44px}
.language-picker select{min-height:42px;max-width:125px}
main section[id],#person-detail{scroll-margin-block-start:12px}
.skip:focus{z-index:50}

/* The opening gives one clear path into the existing stories. */
.reading-intro{padding-top:60px;padding-bottom:40px;max-width:1280px}
.reading-kicker{display:flex;gap:12px;align-items:center;font-size:.8125rem;color:var(--muted);letter-spacing:.08em}
.reading-kicker img{width:32px;height:16px;object-fit:contain}
.reading-intro h1{font-family:'Manrope',sans-serif;font-size:clamp(2.5rem,5.1vw,4.7rem);line-height:1.12;font-weight:500;letter-spacing:-.055em;margin:28px 0 22px}
.reading-intro h1 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.035em}
.reading-deck{max-width:580px;color:var(--muted);font-size:1.0625rem;line-height:1.7;margin:0 0 26px}
.reading-start{font-size:1rem;min-height:48px;display:inline-flex;align-items:center;padding:12px 22px}
.reading-scroll{display:flex;gap:12px;align-items:center;color:var(--muted);font-size:.875rem;margin-top:32px}
.scroll-chevron{display:inline-block;width:7px;height:7px;border-inline-end:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);margin-top:-4px}
#hind .call-content .hind-native-player{margin-top:20px}
#hind .hind-caption-line{font-size:clamp(1.5rem,3vw,2rem)}
#hind .call-content .call-actions{gap:12px}
#hind .call-content .call-actions>.action{font-size:.9375rem;min-height:44px}

/* Timeline, sound analysis and all 64 symbols belong to the same horizontal rail. */
.hind-case-flow{margin-top:32px;border-top:1px solid var(--line);padding-top:24px}
.case-heading{display:flex;justify-content:space-between;gap:20px;align-items:baseline}
.case-heading h3{font-family:Georgia,serif;font-size:1.65rem;font-weight:400;line-height:1.3}
.case-heading p{font-size:.875rem;color:var(--muted);margin:0}
.case-controls{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.case-controls button{min-height:44px;font-size:.875rem;padding:9px 13px;background:none;border:1px solid var(--line);color:var(--muted)}
.case-controls button[aria-pressed=true]{border-color:var(--red);color:var(--fg)}
.case-rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;scrollbar-width:thin;scrollbar-color:#7b463c #172019;padding-bottom:15px;scroll-padding-inline:0}
.case-card{flex:0 0 calc(50% - 10px);min-width:0;box-sizing:border-box;scroll-snap-align:start;scroll-margin:0!important;border:1px solid var(--line);padding:24px;background:#101713;overflow-wrap:anywhere}
.case-card.timeline{padding-top:24px}
.case-card .timeline-title{font-size:.875rem;margin-bottom:18px}
.case-card .timeline-steps{gap:12px}
.case-card .timeline-step{padding:12px 0;min-height:74px;text-align:start}
.case-card .timeline-step small{font-size:.75rem;line-height:1.4}
.case-card .timeline-step strong{font-size:.9375rem;line-height:1.4}
.case-card .timeline-detail{display:block;min-height:0;margin-top:20px;padding-bottom:0}
.case-card .timeline-detail h3{font-size:1.65rem;line-height:1.3;margin-bottom:14px}
.case-card .timeline-detail p,.case-card>p{font-size:1rem;line-height:1.7;color:var(--muted)}
.case-card .large-number{font-family:'Manrope',sans-serif;font-size:2.65rem;line-height:1.15;letter-spacing:-.045em}
.case-card>h3{font-family:Georgia,serif;font-size:1.6rem;line-height:1.3;font-weight:400;margin:14px 0}
.case-card>p{margin-top:16px}
.case-card .source-link{margin-top:20px;font-size:.875rem;min-height:44px}
.case-bullets{display:flex;flex-direction:column;justify-content:center}
.case-bullets>h3{margin-top:0}
.case-bullets .dot-field{grid-template-columns:repeat(8,minmax(0,1fr));gap:7px 12px;width:100%;max-width:400px;margin:16px 0 0}
.case-bullets .dot-field i{height:25px}
.case-bullets .dot-field-label{font-size:.875rem;line-height:1.6}

/* The partner credit remains legible without dominating the footer. */
footer{grid-template-columns:minmax(0,1fr) 72px;gap:10px 24px;padding-top:24px;padding-bottom:28px}
footer .wordmark{font-size:1.125rem;min-height:44px;align-items:center}
footer .mark-dot{width:4px;height:4px;margin:8px 0 0 4px}
footer .footer-meta{font-size:.875rem;line-height:1.6}
footer .footer-teknovizyon{width:72px;max-width:72px;grid-row:1 / span 3;align-self:start;margin-top:8px}
footer .footer-links{display:flex;gap:20px;flex-wrap:wrap}
footer .source-link{font-size:.875rem;min-height:44px}
@media(max-width:1100px){
 .site-header{grid-template-columns:minmax(0,1fr) auto;gap:0 16px;padding:6px 5% 0}
 .site-header nav{grid-column:1/-1;grid-row:2;justify-content:flex-start;gap:22px}
 .site-header .language-picker{grid-column:2;grid-row:1}
}
@media(max-width:720px){
 .site-header{padding-inline:6%;flex-direction:initial}
 .site-header .wordmark{font-size:1.125rem}
 .site-header nav{gap:20px;flex-basis:auto}
 .site-header .language-picker{padding:0 6px;font-size:.875rem;margin:0}
 .language-picker select{max-width:112px}
 .reading-intro{padding-top:35px;padding-bottom:30px}
 .reading-intro h1{font-size:clamp(2.35rem,9vw,3.5rem);margin:24px 0 20px}
 .reading-deck{font-size:1rem;line-height:1.7;margin-bottom:24px}
 .reading-scroll{margin-top:28px}
 .case-heading{align-items:flex-start;gap:10px;flex-direction:column}
 .case-heading h3{font-size:1.5rem}
 .case-controls{gap:7px}
 .case-controls button{font-size:.875rem;padding-inline:10px}
 .case-rail{gap:12px}
 .case-card{flex-basis:92%;padding:20px}
 .case-card .large-number{font-size:2.3rem}
 .case-card .timeline-steps{gap:8px}
 .case-card .timeline-step strong{font-size:.875rem}
 .case-card .timeline-step small{font-size:.75rem}
 footer{grid-template-columns:minmax(0,1fr) 64px;gap:8px 18px}
 footer .footer-teknovizyon{width:64px;max-width:64px;grid-row:1;grid-column:2}
 footer .footer-meta,footer .footer-links{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}}
