/* GALOK About · section sheet on the unified foundation (assets/galok/foundation.css).
   Signature of the About page: the quietest page on the site — a person, a method, and how to reach them.
   Every colour is a --g-* token (complete light and dark). Hooks kept: .about-footer > div (support link). */

.ab-page{width:min(100%,var(--g-max));margin-inline:auto;padding-inline:var(--g-pad)}

/* cover */
.ab-cover{padding:clamp(48px,9vw,128px) 0 clamp(32px,5vw,72px)}
.ab-cover-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center}
.ab-cover-id{display:grid;justify-items:start}
.ab-avatar{width:84px;height:84px;margin-bottom:22px}
html[data-g][data-theme="dark"] .ab-avatar{filter:invert(1)}
@media (prefers-color-scheme:dark){html[data-g]:not([data-theme="light"]) .ab-avatar{filter:invert(1)}}
.ab-cover-id .f-eyebrow{margin-bottom:14px}
.ab-cover-id .f-display{margin-bottom:22px}
.ab-cover-id .f-lede{max-width:30em;margin-bottom:14px}
.ab-fact{margin:0;font:500 12px/1.6 var(--g-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--g-muted)}
.ab-cover-media img{aspect-ratio:3/2;object-fit:cover}

/* the four ways in */
.ab-ways{margin:0;padding:0;list-style:none;border-top:1px solid var(--g-ink)}
.ab-way a{display:grid;grid-template-columns:3.5rem minmax(0,1fr) minmax(120px,220px);gap:clamp(14px,3vw,36px);align-items:center;padding:clamp(18px,2.4vw,26px) 0;border-bottom:1px solid var(--g-rule);color:inherit;text-decoration:none}
.ab-way-no{font:500 12px/1 var(--g-mono);color:var(--g-muted)}
.ab-way-body{display:grid;gap:6px}
.ab-way-body strong{font:560 clamp(1.3rem,2.2vw,1.8rem)/1.1 var(--g-sans);letter-spacing:-.04em;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.2em;transition:text-decoration-color .25s}
.ab-way a:hover .ab-way-body strong,.ab-way a:focus-visible .ab-way-body strong{text-decoration-color:var(--g-signal)}
.ab-way-body small{max-width:58ch;color:var(--g-ink-2);font-size:15px;line-height:1.55}
.ab-way img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:4px;background:var(--g-surface)}

/* cities strip */
.ab-cities{margin:clamp(24px,4vw,56px) 0;padding:clamp(36px,5vw,64px) 0;background:var(--g-surface);border-block:1px solid var(--g-rule)}
.ab-city-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:16px;margin:0;padding:0 0 12px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.ab-city-strip li{scroll-snap-align:start}
.ab-city-strip a{position:relative;display:block;overflow:hidden;border-radius:6px}
.ab-city-strip img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s var(--g-ease)}
.ab-city-strip a:hover img{transform:scale(1.03)}
.ab-city-m{position:absolute;inset:auto 0 0 0;display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:34px 14px 12px;background:linear-gradient(180deg,transparent,rgba(10,10,9,.78));color:#fff}
.ab-city-m small{font:500 10px/1.4 var(--g-mono);letter-spacing:.1em;text-transform:uppercase;color:#e9e7de}
.ab-city-m strong{font:560 1.05rem/1.2 var(--g-sans)}

/* method */
.ab-method-step{display:grid;gap:10px;align-content:start}
.ab-method-step h3{margin:4px 0 0;font:560 1.35rem/1.15 var(--g-sans);letter-spacing:-.03em}
.ab-method-step p{margin:0;color:var(--g-ink-2);line-height:1.6}
.ab-method-step .f-figure img{aspect-ratio:3/2;object-fit:cover}

/* reading band: a dark interlude in both themes (its own ground, not the page's); its colours must outrank the foundation's general .f-* colours */
.f-band--dark{margin-inline:calc(50% - 50vw);padding:clamp(48px,7vw,96px) max(var(--g-pad),calc(50vw - var(--g-max) / 2 + var(--g-pad)));background:#111310;color:#f4f4ec}
html[data-g][data-theme="dark"] .f-band--dark{background:#1a1c18}
@media (prefers-color-scheme:dark){html[data-g]:not([data-theme="light"]) .f-band--dark{background:#1a1c18}}
.ab-reading-band{display:grid;gap:18px;justify-items:start}
html[data-g] .ab-reading-band .f-kicker{color:#b5b6ad}
html[data-g] .ab-reading-band .f-title{max-width:24ch;color:#f4f4ec;font-size:clamp(1.7rem,3vw,2.6rem)}
.ab-quote-zh{max-width:34em;color:#f4f4ec;font:400 1.45rem/1.9 "Galok Song","Songti SC","Noto Serif CJK SC",serif}
.ab-quote-en{max-width:62ch;margin-top:-6px;color:#c9cac1;font-size:15px}
html[data-g] .ab-reading-band .f-btn{border-color:#f4f4ec;color:#f4f4ec}
html[data-g] .ab-reading-band .f-btn:hover,html[data-g] .ab-reading-band .f-btn:focus-visible{background:#f4f4ec;color:#111310;border-color:#f4f4ec}

/* contact */
.ab-contact-block{display:grid;gap:16px;justify-items:start}
.ab-contact-block .f-title{font-size:clamp(1.9rem,3.4vw,3rem)}
.ab-contact-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;width:100%;margin-top:12px}
.ab-contact-links a{display:flex;align-items:baseline;gap:14px;min-height:56px;padding:16px 18px;border:1px solid var(--g-rule-strong);border-radius:14px;color:inherit;text-decoration:none;transition:border-color .2s,background .2s}
.ab-contact-links a:hover,.ab-contact-links a:focus-visible{border-color:var(--g-ink);background:var(--g-surface)}
.ab-contact-links span{font:500 11px/1.4 var(--g-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--g-muted)}
.ab-contact-links strong{font-weight:560}
.ab-contact-links b{margin-left:auto;color:var(--g-muted)}

/* footer (hook preserved: .about-footer > div) */
.about-footer{display:flex;flex-wrap:wrap;align-items:center;gap:20px 36px;width:min(100%,var(--g-max));margin:clamp(64px,10vw,140px) auto 0;padding:36px var(--g-pad) calc(110px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--g-rule)}
.about-footer p{margin:0;color:var(--g-muted);font-size:14px;line-height:1.55}
.about-footer > div{display:flex;flex-wrap:wrap;gap:0 22px;margin-left:auto}
.about-footer a{display:inline-flex;align-items:center;min-height:44px;color:var(--g-muted);font-size:14px;text-decoration:none}
.about-footer a:hover,.about-footer a:focus-visible{color:var(--g-ink)}
.about-footer .brand{gap:10px;color:var(--g-ink)}
.about-footer .brand-mark{width:32px;height:32px}
html[data-g][data-theme="dark"] .about-footer .brand-mark{filter:invert(1)}
@media (prefers-color-scheme:dark){html[data-g]:not([data-theme="light"]) .about-footer .brand-mark{filter:invert(1)}}
.about-footer .brand-lockup{display:grid;line-height:1}
.about-footer .brand-lockup b{font:640 15px/1 var(--g-sans);letter-spacing:.02em;color:var(--g-ink)}
.about-footer .brand-lockup small{margin-top:3px;font:500 10px/1 var(--g-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--g-muted)}

@media (max-width:860px){
  .ab-cover-grid{grid-template-columns:1fr}
  .ab-way a{grid-template-columns:2.5rem 1fr}
  html[data-g] .ab-way img{display:none}
  .about-footer{flex-direction:column;align-items:flex-start}
  .about-footer > div{margin-left:0}
}