/* Adapted from the selected native Figma R04 desktop/mobile route variants. */
.about-walk { display:flex; flex-direction:column; gap:24px; min-height:853px; padding-block:40px; scroll-margin-top:24px; letter-spacing:0; }
.about-walk-header { display:grid; grid-template-columns:minmax(0,1fr) 76px 224px; gap:16px; align-items:center; padding-bottom:24px; border-bottom:1px solid var(--color-hairline); }
.about-walk-intro { display:flex; flex-direction:column; gap:16px; padding-right:48px; }
.about-walk-title { font-size:clamp(32px,4.4vw,56px); line-height:1.35; letter-spacing:0; }
.about-walk-tagline { color:var(--color-muted); font-size:18px; line-height:1.75; letter-spacing:.02em; }
.about-walk-portrait { width:76px; height:96px; object-fit:cover; border-radius:var(--radius-sm); }
.about-walk-identity { display:flex; flex-direction:column; gap:4px; min-width:0; }
.about-walk-name-line { display:flex; flex-direction:column; gap:4px; }
.about-walk-name { font:600 25px/1.4 var(--wb-serif); color:var(--color-ink); }
.about-walk-english { font:500 22px/1 var(--font-latin); color:var(--color-muted); }
.about-walk-role { color:var(--color-muted); font-size:15px; line-height:1.6; letter-spacing:.04em; }
.about-walk-role span { display:block; }
.about-walk-role .about-role-separator { display:none; }
.about-walk-layout { display:grid; grid-template-columns:minmax(260px,520fr) minmax(0,728fr); gap:64px; align-items:start; }
.about-route-caption { margin-bottom:16px; font-size:15px; line-height:1.6; letter-spacing:.04em; color:var(--color-muted); }
.about-route-map { position:relative; }
.about-route-art { position:absolute; left:0; top:0; pointer-events:none; }
.about-route-art img { display:block; max-width:none; }
.about-route-art-mobile { display:none; width:350px; height:104px; transform-origin:top left; }
.about-stations { position:relative; display:grid; grid-template-rows:repeat(5,94px); }
.about-step { width:100%; height:94px; display:flex; align-items:center; gap:16px; min-width:0; padding:0; border:0; background:transparent; text-align:left; letter-spacing:0; }
.about-step:nth-child(even) { padding-left:44px; }
.about-marker { display:grid; place-items:center; flex:0 0 46px; width:46px; height:46px; border:1px solid var(--color-muted); border-radius:50%; background:var(--color-paper); font:500 22px/28.6px var(--font-latin); color:var(--color-muted); }
.about-step-copy { min-width:0; display:flex; flex-direction:column; gap:2px; }
.about-step-label { font:500 18px/27px var(--wb-sans); color:var(--color-ink); }
.about-step-note { font:400 15px/24px var(--wb-sans); color:var(--color-muted); letter-spacing:.04em; }
.about-step-short { display:none; }
.about-step[aria-selected="true"] .about-marker { color:var(--color-on-accent); background:var(--color-accent); border-color:var(--color-accent); }
.about-step[aria-selected="true"] .about-step-label, .about-step:hover .about-step-label { color:var(--color-accent); }
.about-walk .about-step:hover { background:transparent; }
.about-step:hover .about-marker { border-color:var(--color-accent); }
.about-step:focus-visible { outline-offset:-2px; }
.about-panels { min-width:0; }
.about-panel { display:flex; flex-direction:column; gap:16px; border-top:2px solid var(--color-accent); padding-top:16px; scroll-margin-top:24px; }
.about-question { margin:0; color:var(--color-ink); font:600 clamp(25px,2.6vw,33px)/1.55 var(--wb-serif); letter-spacing:0; }
.about-answer-copy { font-size:17px; line-height:32.3px; }
.about-answer-detail { font-size:15px; line-height:24px; letter-spacing:.04em; color:var(--color-muted); }
.about-education { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.about-education li { display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--color-hairline); padding-top:8px; min-width:0; }
.about-education span { font-size:15px; line-height:24px; letter-spacing:.04em; color:var(--color-muted); }
.about-education strong { font-size:15px; line-height:1.3; letter-spacing:.06em; font-weight:500; color:var(--color-ink); }
.about-research-verbs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; color:var(--color-accent); font:500 22px/1.5 var(--wb-sans); }
.about-products { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.about-product { display:flex; flex-direction:column; gap:8px; min-width:0; border-top:1px solid var(--color-hairline); padding-top:8px; }
.about-product h4 { margin:0; color:var(--color-accent); font:500 25px/1.3 var(--font-latin); overflow-wrap:anywhere; }
.about-product p { font-size:15px; line-height:24px; letter-spacing:.04em; color:var(--color-muted); }
.about-records { list-style:none; padding:0; margin:0; display:grid; gap:16px; }
.about-records li { display:grid; grid-template-columns:130px minmax(0,1fr); gap:16px; border-top:1px solid var(--color-hairline); padding-top:12px; }
.about-record-years { color:var(--color-accent); font:500 22px/28.6px var(--font-latin); }
.about-record-description { font-size:15px; line-height:24px; letter-spacing:.04em; }
.about-next, .about-email { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:48px; width:100%; border:0; padding:8px 0; background:none; color:var(--color-accent); text-align:left; }
.about-next { font:500 15px/1.5 var(--wb-sans); letter-spacing:.06em; }
.about-email { font-size:17px; line-height:32.3px; }
.about-walk .about-next:hover { background:transparent; color:var(--color-accent-ink); text-decoration:underline; text-underline-offset:.25em; }
.about-next > span:last-child, .about-email > span:last-child { flex:0 0 20px; text-align:center; }
.about-walk-motto { margin-top:auto; padding-top:16px; border-top:1px solid var(--color-hairline); color:var(--color-accent); font-size:15px; line-height:24px; letter-spacing:.04em; }
.about-walk:not([data-ready]) .about-walk-layout { display:block; }
.about-walk:not([data-ready]) .about-panel + .about-panel { margin-top:32px; }
@media (max-width:1100px) and (min-width:768px) { .about-walk-layout { gap:32px; } .about-walk-intro { padding-right:16px; } .about-walk-header { grid-template-columns:minmax(0,1fr) 76px 200px; } }
@media (max-width:767px) {
 .about-walk { min-height:987px; padding-block:24px; }
 .about-walk-header { grid-template-columns:minmax(0,1fr) 50px; grid-template-areas:'title portrait' 'tagline tagline' 'identity identity'; gap:12px 16px; }
 .about-walk-intro { display:contents; }
 .about-walk-title { grid-area:title; font-size:clamp(28px,8.205vw,32px); }
 .about-walk-tagline { grid-area:tagline; font-size:15px; line-height:24px; letter-spacing:.04em; }
 .about-walk-portrait { grid-area:portrait; width:50px; height:63px; }
 .about-walk-identity { grid-area:identity; }
 .about-walk-name-line { flex-direction:row; align-items:center; gap:8px; }
 .about-walk-name { flex:0 0 60px; font:500 15px/1 var(--wb-sans); letter-spacing:.06em; }
 .about-walk-role span, .about-walk-role .about-role-separator { display:inline; }
 .about-walk-layout { display:flex; flex-direction:column; gap:24px; }
 .about-route-nav, .about-panels { width:100%; }
 .about-route-art-desktop { display:none; }
 .about-route-art-mobile { display:block; }
 .about-stations { grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:104px; }
 .about-step, .about-step:nth-child(even) { height:104px; flex-direction:column; justify-content:flex-start; gap:8px; padding:0; text-align:center; }
 .about-step:nth-child(even) { padding-top:14px; }
 .about-marker { flex:0 0 42px; width:42px; height:42px; }
 .about-step-label { font-size:15px; line-height:1; letter-spacing:.06em; }
 .about-step-long, .about-step-note { display:none; }
 .about-step-short { display:inline; }
 .about-question { font-size:25px; line-height:1.5; }
 .about-education span { min-height:48px; }
 .about-product h4 { font-size:22px; line-height:1.3; }
 .about-records li { grid-template-columns:90px minmax(0,1fr); }
 .about-record-years span { display:block; }
 .about-record-years .about-record-separator { display:none; }
}
@media (max-width:359px) {
 .about-products, .about-education { grid-template-columns:minmax(0,1fr); }
 .about-education li { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; align-items:start; }
 .about-education span { min-height:0; }
 .about-walk-role span:last-child { display:block; }
 .about-walk-role .about-role-separator { display:none; }
}
@media (prefers-reduced-motion:no-preference) { .about-marker { transition:background-color .2s ease, border-color .2s ease, color .2s ease; } }