/* Geist display + Inter text, inspired by Katekima. The site section remains
   the signature; typography and controls give the project evidence more room.
   Apple HIG foundations adapted to the web: see design-notes.md. */

body { font-family:var(--font); font-optical-sizing:auto; }
h1,h2,h3,h4,h5,h6 { font-family:var(--display); }
.cluster.intro h1 {
  font-family:var(--display); font-weight:500;
  text-transform:none; letter-spacing:-.055em; line-height:1.06;
}
.c-info h2, .panel-box h2, #doc h1, #doc h3 {
  font-family:var(--display); font-weight:550; letter-spacing:-.035em;
}
.cluster.intro .i-sub { letter-spacing:.015em; line-height:1.65; font-weight:450; }
.c-intro .i-kicker {
  margin:.8rem auto 0; color:var(--w-ink2); font-weight:400;
  font-size:20px; letter-spacing:0; line-height:1.5; max-width:52ch;
}
.i-cred b { font-family:var(--display); font-weight:600; letter-spacing:-.02em; }
.i-cred.is-award b { letter-spacing:0; text-transform:none; }
.i-foc b { font-weight:600; letter-spacing:.025em; }
.i-focus-h { letter-spacing:.13em; font-weight:600; }
.i-cred-go { letter-spacing:.06em; font-weight:600; border-width:1px; border-radius:4px; }
.i-foc.is-live { border-radius:6px; }
.i-foc-btn { letter-spacing:.04em; border-radius:4px; }
.i-foc.is-live b { gap:.5rem; }
.i-foc.is-live b .i-foc-btn { flex-shrink:0; }
.i-foc.is-live b .i-foc-title { min-width:0; }
.i-foc b span { display:inline; margin:0; font-size:inherit; line-height:inherit; color:inherit; }
.i-foc b .i-foc-btn { font-size:11px; }
.i-foc.is-live > span { color:var(--w-ink2); }
.i-foc.is-live:hover { transform:none; }
.i-foc.is-live:focus-visible { background:rgba(26,60,255,.09); }

.gal-name { font-family:var(--display); letter-spacing:.06em; font-weight:600; }
.gal-role { letter-spacing:.1em; }
.gal-btn { min-height:44px; padding:.4rem .2rem; letter-spacing:.08em; font-weight:600; }
.gal-dot { min-width:32px; min-height:28px; justify-content:flex-end; letter-spacing:.04em; }
.gal-arrow { width:44px; height:44px; border-radius:6px; }
.gal-stamps { letter-spacing:.06em; }
.c-info .no, .c-info .meta, .c-main figcaption { letter-spacing:.09em; }
.c-info .body { font-weight:400; }
.c-award, .detail-award { letter-spacing:.06em; }
.c-more, .c-ctas a, .panel-box .btn, .doc-bar .btn {
  border-radius:6px; letter-spacing:.06em; font-weight:600;
}
.c-more, .c-ctas a { min-height:44px; }
.c-link { letter-spacing:.06em; }
.i-ctas a { display:inline-flex; align-items:center; justify-content:center; min-height:50px; }
.panel-box { border-radius:12px; }
.panel-box .panel-close { width:44px; height:44px; border-radius:6px; }
.panel-corner { display:none; }
.panel-body .lede { font-size:16px; }
.dt-note { font-size:14px; }
.tabs { gap:1rem; }
.tab { min-height:44px; letter-spacing:.08em; }
.panel-kicker, .panel-foot, .quick-facts b, .contact-grid span { letter-spacing:.07em; }
.panel-body .lede, .panel-body .note, .quest p, #doc .lede-doc { line-height:1.7; }
#doc h1 { text-transform:none; }
#doc p, #doc li { max-width:75ch; }
#gal-hint { letter-spacing:.12em; }

/* Visible keyboard focus also works on links, project controls and tabs. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline:2px solid var(--elec); outline-offset:4px;
}
#gallery:focus { outline:none; }
.panel-box :focus-visible, .doc-bar :focus-visible { outline-offset:2px; }

@media (max-width:920px) {
  .c-info .no, .c-info .meta, .c-main figcaption { letter-spacing:.07em; }
  .c-info .sub, .c-info .body { line-height:1.6; }
  .c-info .body { font-size:14px; }
}
@media (max-width:560px) {
  .cluster.intro h1 { font-size:clamp(1.75rem,8.2vw,2.5rem); letter-spacing:-.05em; }
  .cluster.intro .i-sub { font-size:11px; line-height:1.55; letter-spacing:0; }
  .i-cred b { font-size:12px; line-height:1.35; }
  .i-cred span { font-size:11px; }
  .i-foc b { letter-spacing:.02em; }
  .i-focus-h { letter-spacing:.1em; }
  .i-foc b .i-foc-btn { font-size:10px; }
  .i-ctas a { min-height:44px; letter-spacing:.04em; }
  .gal-name { font-size:10px; letter-spacing:.03em; }
  .gal-btn { font-size:10px; letter-spacing:.04em; }
  .gal-actions { gap:.65rem; }
  .panel-box { border-radius:9px; }
  #gal-head { padding-top:max(.25rem,env(safe-area-inset-top)); }
}
@media (max-width:560px) and (max-height:720px) {
  .cluster.intro h1 { font-size:clamp(1.65rem,7.5vw,2.15rem); }
  .i-creds { margin-top:.45rem; }
  .i-cred { padding:.3rem .65rem; }
  .i-focus-h { display:none; }
}
@media (prefers-reduced-transparency:reduce) {
  #gal-head, .doc-bar, #hero-help { background:#fff; backdrop-filter:none; }
  .overlay { background:#e7e9ed; backdrop-filter:none; }
}
@media (prefers-contrast:more) {
  :root { --w-dim:#454545; --w-hair:rgba(16,16,16,.4); --w-hair2:rgba(16,16,16,.6); }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}