/* About is an independent reading layer; the instrument underneath is untouched. */
#about {
 position:fixed; inset:0; margin:0; width:100%; max-width:none;
 height:100%; height:100dvh; max-height:none; border:0;
 padding:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain;
 touch-action:pan-x pan-y; -webkit-overflow-scrolling:touch;
 color:var(--ink); background:rgba(255,245,223,.70);
}
#about::backdrop { background:transparent; backdrop-filter:none; }
/* Keep the real field visible, without the homepage lettering beneath the paper. */
body:has(#about[open]) #experience { visibility:hidden; }
#about[open] { animation:about-enter .3s ease-out; }
#about .about-close-row { position:sticky; top:0; z-index:1; height:calc(76px + env(safe-area-inset-top)); text-align:right; background:transparent; }
#about #about-close {
 position:relative; top:auto; right:auto; margin:calc(18px + env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) 0 0;
 min-width:60px; min-height:44px; padding:10px; font:400 12px/1.4 var(--sans);
 background:transparent; border-radius:0;
}
#about article { width:min(640px,calc(100% - 64px)); margin:0 auto; padding:36px 0 calc(120px + env(safe-area-inset-bottom)); }
#about h2 { font:400 clamp(48px,6vw,72px)/1.08 var(--serif); letter-spacing:-.02em; margin:0 0 52px; }
#about h3 { font:500 11px/1.5 var(--sans); letter-spacing:.17em; margin:0 0 32px; }
#about p { font:400 16px/1.85 var(--sans); margin:0 0 24px; text-wrap:pretty; max-width:580px; }
#about strong { font-weight:600; }
#about section { margin:104px 0 0; }
#about p.about-concept { font:400 29px/1.35 var(--serif); margin-bottom:34px; max-width:640px; }
#about-the-sunsets-panel p.about-concept { margin-top:38px; }
#about-the-sunsets-panel p.about-concept + p.about-concept { margin-top:0; margin-bottom:40px; }
#about-the-movement-panel p.about-concept:last-child { margin-top:48px; }
#about p.about-concept strong { font-weight:400; }
#about p:last-child { margin-bottom:0; }
@keyframes about-enter { from {opacity:0;} to {opacity:1;} }
@media(max-width:650px) {
 #about article { width:calc(100% - 48px); padding-top:24px; padding-bottom:80px; }
 #about h2 { font-size:48px; margin-bottom:38px; }
 #about p { font-size:15px; line-height:1.8; margin-bottom:23px; }
 #about p.about-concept { font-size:26px; line-height:1.35; }
 #about section { margin-top:78px; }
 #about h3 { margin-bottom:26px; }
 #about #about-close { margin-right:max(14px,env(safe-area-inset-right)); }
}
@media(prefers-reduced-motion:reduce) { #about[open] { animation:none; } }

/* One reading space, with quiet editorial chapter controls. */
#about-chapters { display:flex; gap:28px; margin:28px 0 34px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; touch-action:pan-x pan-y; }
#about-chapters::-webkit-scrollbar { display:none; }
#about-chapters button { flex:0 0 auto; min-height:44px; padding:10px 0; font:500 11px/1.5 var(--sans); letter-spacing:.12em; position:relative; white-space:nowrap; }
#about-chapters button::after { content:''; position:absolute; bottom:6px; left:0; width:100%; height:1px; background:currentColor; opacity:0; }
#about-chapters button[aria-selected="true"]::after { opacity:1; }
#about-chapters button:focus-visible { outline:none; text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px; }
#about #about-reading section { margin:0; }
#about-reading [role="tabpanel"]:focus-visible { outline:none; }
#about-reading [role="tabpanel"]:focus-visible p:first-child { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
@media(max-width:650px) { #about-chapters { gap:26px; margin:22px -4px 30px; padding:0 4px; } }