/* Focus is a reader, using the same content as Exploration. */
[hidden] { display:none !important; }
.focus-only { display:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.project-story > p { margin-top:20px; }
.hero h1 { letter-spacing:-.06em; }
.hero-description { max-width:470px; }
.focus-reader, .focus-controls { max-width:800px; margin-inline:auto; padding-inline:32px; }
.focus-reader { padding-top:36px; }
.focus-reader-top { display:flex; justify-content:space-between; align-items:center; gap:24px; }
.focus-reader-top > p { display:flex; align-items:center; gap:16px; flex-wrap:wrap; font:14px/1.5 var(--display); }
.focus-kicker { letter-spacing:.08em; }
#focus-position { color:var(--muted); font-variant-numeric:tabular-nums; }
.focus-jump { display:flex; align-items:center; gap:12px; font-size:14px; color:var(--muted); }
.focus-jump select { max-width:245px; min-height:44px; border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--ink); font:14px var(--body); padding:8px 28px 8px 12px; }
.focus-track { height:3px; margin-top:19px; background:var(--line); }
.focus-track span { display:block; height:100%; background:var(--ink); }
.focus-hint { margin-top:15px; color:var(--muted); font-size:14px; line-height:1.6; max-width:58ch; }
.focus-controls { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-block:30px 48px; }
.focus-controls button { min-height:56px; font-size:16px; padding:12px 18px; border-radius:4px; }
#focus-prev { border:1px solid var(--line); background:transparent; }
#focus-prev:disabled { opacity:.4; }
#focus-next { display:flex; align-items:center; justify-content:space-between; gap:32px; min-width:240px; background:var(--ink); color:var(--paper); text-align:left; }
#focus-next > span:first-child { display:flex; flex-direction:column; gap:4px; }
#focus-next small { font-size:11px; letter-spacing:.08em; color:var(--lime); }
.focus-mode { --focus-body:18px; }
.focus-mode *, .focus-mode *::before, .focus-mode *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
.focus-mode .site-header { height:80px; position:sticky; top:0; max-width:none; background:var(--paper); }
.focus-mode .header-nav, .focus-mode .hero-topline, .focus-mode .mindmap,
.focus-mode .hero-footer, .focus-mode .hero-copy > .button,
.focus-mode .work-section .section-kicker, .focus-mode .section-heading, .focus-mode .work-footnote,
.focus-mode .project-number, .focus-mode .project-tag,
.focus-mode .lab-section .section-kicker, .focus-mode .lab-intro .lab-handnote,
.focus-mode .about-visual, .focus-mode .about-section .section-kicker, .focus-mode .sound-playground,
.focus-mode .journey-heading > .eyebrow, .focus-mode .contact-section .section-kicker,
.focus-mode .contact-arrow, .focus-mode footer > span,
.focus-mode footer a[href="#"] { display:none; }
.focus-mode #main { min-height:390px; }
.focus-mode #main > section { max-width:800px; margin:auto; padding:42px 32px 34px; background:var(--paper); color:var(--ink); border-bottom:1px solid var(--line); }
.focus-mode #main > section > .section-shell { padding:0; }
.focus-mode .hero-grid, .focus-mode .about-layout, .focus-mode .project-detail, .focus-mode .lab-intro { display:block; min-height:0; margin:0; }
.focus-mode .hero-copy { padding:0; }
.focus-mode .hero h1 { font-size:64px; line-height:1.06; letter-spacing:-.05em; max-width:14ch; }
.focus-mode .solid-word svg { display:none; }
.focus-mode .solid-word:after { height:.16em; bottom:.08em; left:0; transform:none; }
.focus-mode .hero-description { margin:28px 0 0; max-width:54ch; }
.focus-mode .hero-description .muted { display:inline-block; margin-top:12px; }
.focus-mode .project { border:0; }
.focus-mode .project summary { gap:20px; padding:0; align-items:flex-start; }
.focus-mode .project-heading { gap:14px; }
.focus-mode .project-client { color:var(--muted); }
.focus-mode .project-name { font-size:36px; letter-spacing:-.04em; line-height:1.15; }
.focus-mode .project-subtitle { color:var(--muted); }
.focus-mode .project-open { width:40px; height:40px; font-size:22px; margin:0; }
.focus-mode .project-detail { padding:28px 0 0; }
.focus-mode .project-story > .micro { color:var(--muted); }
.focus-mode .project-story p, .focus-mode .project-story li { color:var(--ink); }
.focus-mode .project-story ul { margin-block:20px; padding-left:22px; }
.focus-mode .project-story li { margin-block:10px; }
.focus-mode .project-tools { color:var(--muted); gap:10px; }
.focus-mode .project summary:hover .project-name { color:var(--ink); }
.focus-mode .project-visual { border:0; padding:0; margin-top:24px; background:none; min-height:0; }
.focus-mode .project-visual > :not(.stat-line) { display:none; }
.focus-mode .interface-diagram { display:none; }
.focus-mode .stat-line { border-color:var(--line); padding-top:18px; gap:42px; }
.focus-mode .stat-line strong { font-size:28px; }
.focus-mode .stat-line strong span { color:var(--muted); font-size:14px; }
.focus-mode .about-copy h2, .focus-mode .lab-intro h2, .focus-mode .journey-heading h2, .focus-mode .contact-main h2 { font-size:44px; line-height:1.12; letter-spacing:-.045em; }
.focus-mode .serif-word { letter-spacing:-.045em; }
.focus-mode .about-copy h2 br, .focus-mode .lab-intro h2 br { display:none; }
.focus-mode .about-copy h2, .focus-mode .lab-intro h2 { margin-bottom:24px; }
.focus-mode .lab-intro > div { max-width:62ch; padding:0; }
.focus-mode .hero-copy > p, .focus-mode .project-story p, .focus-mode .project-story li,
.focus-mode .project-subtitle, .focus-mode .lab-intro p, .focus-mode .about-copy > p,
.focus-mode .timeline p, .focus-mode .contact-bottom p { font-size:var(--focus-body); line-height:1.75; max-width:62ch; }
.focus-mode .focus-only { display:block; }
.focus-lab-gate { border-top:1px solid var(--line); margin-top:26px; padding-top:22px; }
.focus-lab-gate p { font-size:16px; line-height:1.7; color:var(--muted); max-width:50ch; }
.focus-lab-gate button { background:transparent; border:1px solid var(--ink); padding:12px 18px; min-height:48px; margin-top:18px; font-size:16px; border-radius:4px; }
.focus-mode #focus-lab-content { padding-top:30px; }
.focus-mode .system-lab { grid-template-columns:1fr; }
.focus-mode .lab-desk { display:block; }
.focus-mode .lab-setting { margin-top:22px; }
.focus-mode .preview-canvas { grid-template-columns:1fr; }
.focus-mode .function-chain { display:none; }
.focus-mode .focus-sound-link { margin-top:28px; text-decoration:underline; text-underline-offset:5px; font-size:16px; line-height:1.6; padding-block:10px; }
.focus-mode .journey-heading { display:flex; flex-direction:column; align-items:flex-start; gap:22px; }
.focus-mode .timeline { display:block; margin-top:32px; }
.focus-mode .timeline li { padding:16px 0 20px; }
.focus-mode .timeline li::before { display:none; }
.focus-mode .timeline h3 { margin-top:6px; font-size:22px; }
.focus-mode .timeline p { margin-top:4px; }
.focus-mode .contact-main { margin:0 0 24px; }
.focus-mode .contact-bottom { display:flex; flex-direction:column; align-items:flex-start; gap:28px; padding-bottom:30px; }
.focus-mode .contact-bottom > a { max-width:100%; font-size:24px; overflow-wrap:anywhere; }
.focus-mode footer { border:0; padding:0; }
.focus-mode footer > div { margin:0; }
.focus-mode footer a { display:inline-block; padding-block:12px; }
.focus-mode :is(h1,h2,summary) { scroll-margin-top:110px; }
.focus-mode :is(h1,h2):focus { outline:none; }
.focus-mode :is(h1,h2):focus-visible { outline:2px solid #8061db; outline-offset:8px; }
.focus-mode select:focus-visible { outline:3px solid #8061db; outline-offset:4px; }
@media(max-width:700px) {
  .hero h1 { font-size:clamp(46px,13.2vw,90px); }
  .focus-reader, .focus-controls { padding-inline:24px; }
  .focus-reader { padding-top:24px; }
  .focus-reader-top { flex-wrap:wrap; gap:14px; }
  .focus-reader-top > p { justify-content:space-between; width:100%; }
  .focus-jump { width:100%; justify-content:space-between; }
  .focus-jump select { min-width:0; max-width:70%; font-size:14px; }
  .focus-hint { font-size:13px; }
  .focus-mode .site-header { height:76px; }
  .focus-mode .wordmark-caption { display:none; }
  .focus-mode #main > section { padding:30px 24px; }
  .focus-mode .hero h1 { font-size:clamp(42px,10.5vw,64px); }
  .focus-mode .project-name { font-size:30px; }
  .focus-mode .about-copy h2, .focus-mode .lab-intro h2, .focus-mode .journey-heading h2, .focus-mode .contact-main h2 { font-size:36px; }
  .focus-mode .hero-copy > p { font-size:18px; }
  .focus-mode .hero-copy br + .solid-word { white-space:nowrap; }
  .focus-controls { gap:12px; padding-block:24px 36px; align-items:stretch; }
  .focus-controls button { font-size:14px; padding:12px; }
  #focus-prev { flex:0 0 auto; }
  #focus-next { min-width:0; flex:1; gap:12px; }
  .focus-mode .contact-bottom > a { font-size:21px; }
  .focus-mode .contact-bottom > a span { margin-left:8px; }
}