/* GALOK — Living Archive · homepage perspective system · 2026-11
   Four perspectives over one archive: Discover (editorial cover), Place (city rooms),
   Time (an honest timeline), Connections (a stated relation network).
   Consumes /styles.css (shared masthead), assets/galok-tokens.css and assets/galok-plate.css.
   Progressive enhancement: without JavaScript every .ga-view stays in the document flow and
   every work link is reachable; with JS, html[data-js] gates single-view mode. */

:root {
  --ga-accent: #7898b0;        /* identity blue-gray: marks, rules, large accents only */
  --ga-accent-ink: #46617a;    /* its 5.6:1 text twin on --g-bg */
  --ga-signal: #ffd60a;        /* signal yellow: non-text marks only (ticks, focus dots) */
  --ga-signal-ink: #6b5900;    /* 5.2:1 text twin, used sparingly */
  --ga-page: min(1280px, calc(100% - 48px));
  --ga-font-ui: "Galok Sans", "Helvetica Neue", Arial, "PingFang SC", "Noto Sans CJK SC", sans-serif;
  --ga-font-serif: "Galok Serif", Georgia, "Songti SC", "Noto Serif CJK SC", serif;
  --ga-font-display: "Galok Display Serif", "Galok Serif", Georgia, "Songti SC", "Noto Serif CJK SC", serif;
  --ga-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ga-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

html { scroll-padding-top: 132px; }
html[data-js="1"] { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html[data-js="1"] { scroll-behavior: auto; }
}

/* ---- single-view gating (JS present) ------------------------------------ */
html[data-js="1"] .ga-view { display: none; }
html[data-js="1"][data-ga-view="discover"] .ga-view--discover { display: block; animation: ga-view-in 280ms var(--ga-ease) both; }
html[data-js="1"][data-ga-view="place"] .ga-view--place { display: block; animation: ga-view-in 280ms var(--ga-ease) both; }
html[data-js="1"][data-ga-view="time"] .ga-view--time { display: block; animation: ga-view-in 280ms var(--ga-ease) both; }
html[data-js="1"][data-ga-view="connections"] .ga-view--connections { display: block; animation: ga-view-in 280ms var(--ga-ease) both; }
@keyframes ga-view-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html[data-js="1"] .ga-view--discover,
  html[data-js="1"] .ga-view--place,
  html[data-js="1"] .ga-view--time,
  html[data-js="1"] .ga-view--connections { animation: none; }
}

/* ---- shared chrome ------------------------------------------------------- */
/* dark: the identity blue-gray gets a light text twin (the foundation supplies every other dark token) */
@media (prefers-color-scheme: dark) { html[data-g]:not([data-theme="light"]) { --ga-accent: #8fa9bd; --ga-accent-ink: #a9c0d2; --ga-signal-ink: #ffd60a; --ga-on-ink-signal: #6b5900; } }
html[data-g][data-theme="dark"] { --ga-accent: #8fa9bd; --ga-accent-ink: #a9c0d2; --ga-signal-ink: #ffd60a; --ga-on-ink-signal: #6b5900; }
/* the MixMatter feature keeps the product's own light palette: on a dark page it sits as a light product plate */
@media (prefers-color-scheme: dark) { html[data-g]:not([data-theme="light"]) .home-mm-feature { background: var(--mm-paper); padding: clamp(14px, 2vw, 28px); } }
html[data-g][data-theme="dark"] .home-mm-feature { background: var(--mm-paper); padding: clamp(14px, 2vw, 28px); }
.ga-home { background: var(--g-bg, #f5f6f7); color: var(--g-ink, #0a0c0e); font-family: var(--ga-font-ui); }

.ga-main { width: var(--ga-page); margin: 0 auto; }

/* The masthead above scrolls away (it has no sticky offset), so the view switch sticks flush to the top on a solid ground:
   no gap above it and nothing showing through it. */
.ga-switch {
  position: sticky;
  top: 0;
  z-index: 140;
  display: flex;
  align-items: stretch;
  width: 100%;
  border-bottom: 1px solid var(--g-rule, #d9dee2);
  background: var(--g-bg, #f5f6f7);
  overflow-x: auto;
  scrollbar-width: none;
}
.ga-switch::-webkit-scrollbar { display: none; }
.ga-switch a {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex: 1 0 auto;
  min-height: 46px;
  padding: 10px 20px 12px;
  color: var(--g-muted, #626b73);
  text-decoration: none;
  font-family: var(--ga-font-ui);
  white-space: nowrap;
}
.ga-switch a b {
  font: 600 10px/1 var(--ga-font-mono);
  letter-spacing: 0.1em;
  color: var(--g-muted, #626b73);
}
.ga-switch a span { font-size: 0.92rem; font-weight: 500; letter-spacing: 0.01em; }
.ga-switch a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--ga-signal);
  transform: scaleX(0);
  transition: transform 200ms var(--ga-ease);
}
.ga-switch a:is(:hover, :focus-visible) { color: var(--g-ink, #0a0c0e); }
.ga-switch a:focus-visible { outline: 2px solid var(--g-ink, #0a0c0e); outline-offset: -3px; }
.ga-switch a[aria-current="page"] { color: var(--g-ink, #0a0c0e); }
.ga-switch a[aria-current="page"] b { color: var(--ga-accent-ink); }
.ga-switch a[aria-current="page"]::after { transform: scaleX(1); }

/* ---- shared view scaffolding --------------------------------------------- */
.ga-view { padding: clamp(40px, 6vw, 84px) 0 clamp(64px, 8vw, 120px); }

.ga-eyebrow {
  margin: 0 0 14px;
  font: 600 11px/1 var(--ga-font-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ga-accent-ink);
}
.ga-kicker {
  margin: 0 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 11px/1.4 var(--ga-font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--g-muted, #626b73);
}
.ga-kicker .ga-lens { display: inline-flex; align-items: center; gap: 6px; }
.ga-kicker .ga-lens .g-glyph { font-size: 1.1rem; color: var(--ga-accent-ink); }
.ga-kicker .ga-lens[data-lens="view"] .g-glyph { color: var(--g-view-text, #c91d38); }
.ga-kicker .ga-lens[data-lens="frame"] .g-glyph { color: var(--g-frame-text, #2a5ae6); }
.ga-kicker .ga-lens[data-lens="observe"] .g-glyph { color: var(--g-observe-text, #5a7300); }

.ga-block { margin: 0 0 clamp(56px, 8vw, 104px); }
.ga-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 26px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--g-ink, #0a0c0e);
}
.ga-block-head h2 {
  margin: 0;
  font: 600 clamp(1.5rem, 2.6vw, 2.1rem)/1.1 var(--ga-font-serif);
  letter-spacing: -0.015em;
}
.ga-block-head a, .ga-block-note a { color: var(--g-ink, #0a0c0e); font-size: 0.86rem; text-underline-offset: 3px; }
.ga-block-note { margin: 14px 0 0; color: var(--g-muted, #626b73); font-size: 0.82rem; max-width: 62ch; }

.ga-view-head { max-width: 62ch; margin: 0 0 34px; }
.ga-view-head h2 { margin: 0 0 14px; font: 600 clamp(2rem, 4.2vw, 3.2rem)/1.05 var(--ga-font-serif); letter-spacing: -0.02em; }
.ga-view-deck { margin: 0; color: var(--g-ink-2, #2c3338); font-size: 1.02rem; line-height: 1.6; }

/* ---- Discover: the cover -------------------------------------------------- */
.ga-cover {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
  margin: 0 0 clamp(56px, 8vw, 104px);
}
.ga-cover-id { align-self: center; display: grid; gap: 0; }
.ga-avatar {
  width: 88px;
  height: 88px;
  margin: 0 0 22px;
  border-radius: 0;
}
.ga-display {
  margin: 0 0 24px;
  font: 400 clamp(3.2rem, 7vw, 6.4rem)/0.98 var(--ga-font-display);
  letter-spacing: -0.02em;
  color: var(--g-ink, #0a0c0e);
}
.ga-display em { font-style: italic; color: var(--ga-accent-ink); }
.ga-lede { margin: 0 0 12px; max-width: 30em; font-size: 1.12rem; line-height: 1.55; color: var(--g-ink, #0a0c0e); }
.ga-lede--sub { font-size: 0.94rem; color: var(--g-muted, #626b73); }
.ga-cover-cta { margin: 22px 0 0; }
.ga-cover-cta a { color: var(--g-ink, #0a0c0e); font-size: 0.9rem; font-weight: 500; text-underline-offset: 4px; }

.ga-hero { position: relative; margin: 0; }
.ga-hero-media { display: block; }
.ga-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--g-soft, #eef1f3); }
.ga-hero-cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  padding: 12px 0 0;
  border-top: 0;
  font: 500 11px/1.5 var(--ga-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g-muted, #626b73);
}
.ga-hero-cap .ga-cap-place { color: var(--g-ink, #0a0c0e); }
.ga-hero-cap a { margin-left: auto; color: var(--g-ink, #0a0c0e); }

.ga-featured-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.ga-feature { margin: 0; }
.ga-feature-title { margin: 0 0 12px; font: 600 clamp(1.7rem, 3vw, 2.6rem)/1.08 var(--ga-font-serif); letter-spacing: -0.015em; }
.ga-feature-title a { color: inherit; text-decoration: none; }
.ga-feature-title a:hover, .ga-feature-title a:focus-visible { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.ga-deck { margin: 0 0 10px; font: 400 italic 1.05rem/1.5 var(--ga-font-serif); color: var(--ga-accent-ink); }
.ga-sum { margin: 0 0 14px; max-width: 56ch; font-size: 0.98rem; line-height: 1.6; color: var(--g-ink-2, #2c3338); }
.ga-meta { margin: 0; font: 500 11px/1.6 var(--ga-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--g-muted, #626b73); }
.ga-feature--essay { border-left: 3px solid var(--ga-signal); padding-left: clamp(16px, 2vw, 28px); }
.ga-feature--research .ga-feature-media { display: block; margin: 0 0 16px; }
.ga-feature--research .ga-feature-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--g-soft, #eef1f3); }

.ga-update-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--g-ink, #0a0c0e); }
.ga-update a {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: baseline;
  min-height: 56px;
  padding: 14px 0;
  border-bottom: 1px solid var(--g-rule, #d9dee2);
  color: inherit;
  text-decoration: none;
  transition: background 160ms var(--ga-ease);
}
.ga-update a:hover, .ga-update a:focus-visible { background: var(--g-soft, #eef1f3); }
.ga-update-kind { font: 600 10px/1.4 var(--ga-font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ga-accent-ink); }
.ga-update-title { font: 500 1.02rem/1.35 var(--ga-font-ui); letter-spacing: -0.005em; }
.ga-update time { font: 500 11px/1.4 var(--ga-font-mono); letter-spacing: 0.1em; color: var(--g-muted, #626b73); }

.ga-theme-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--g-ink, #0a0c0e); }
.ga-theme {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--g-rule, #d9dee2);
}
.ga-theme-no { font: 600 12px/1.6 var(--ga-font-mono); color: var(--ga-accent-ink); }
.ga-theme-body h3 { margin: 0 0 6px; font: 600 1.25rem/1.2 var(--ga-font-serif); }
.ga-theme-body p { margin: 0; color: var(--g-muted, #626b73); font-size: 0.92rem; line-height: 1.55; }
.ga-theme-links { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; align-content: center; }
.ga-theme-links a { display: inline-flex; min-height: 32px; align-items: center; color: var(--g-ink, #0a0c0e); font-size: 0.9rem; text-underline-offset: 3px; }

.ga-city-strip {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
}
.ga-city-card { scroll-snap-align: start; }
.ga-city-card a { position: relative; display: block; }
.ga-city-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--g-soft, #eef1f3); }
.ga-city-card-meta {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 26px 14px 10px;
  background: linear-gradient(180deg, transparent, rgba(8, 10, 14, 0.72));
  color: #fff;
}
.ga-city-card-meta small { font: 600 9px/1.4 var(--ga-font-mono); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; }
.ga-city-card-meta strong { font: 500 1rem/1.2 var(--ga-font-ui); letter-spacing: 0.02em; }

.ga-cinema { background: var(--g-night, #080a0e); color: var(--g-night-ink, #ededE8); margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: clamp(40px, 6vw, 72px) max(24px, calc(50vw - 640px)); }
.ga-cinema-body { max-width: 720px; }
.ga-kicker--dark { color: var(--g-night-muted, #92979c); }
.ga-cinema h2 { margin: 0 0 12px; font: 600 clamp(1.8rem, 3.4vw, 2.8rem)/1.05 var(--ga-font-serif); color: var(--g-night-ink, #ededE8); }
.ga-cinema-sum { margin: 0 0 14px; color: var(--g-night-ink, #ededE8); font-size: 1rem; line-height: 1.6; }
.ga-cinema-fine { margin: 0 0 22px; color: var(--g-night-muted, #92979c); font-size: 0.84rem; line-height: 1.6; }
.ga-cinema-link { display: inline-flex; min-height: 44px; align-items: center; color: var(--g-night-ink, #ededE8); font-weight: 500; text-underline-offset: 4px; }

/* ---- MixMatter band (kept markup, re-grounded) ---------------------------- */
.ga-mixmatter { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: var(--g-surface, #fff); border-top: 1px solid var(--g-rule, #d9dee2); border-bottom: 1px solid var(--g-rule, #d9dee2); }
.ga-mixmatter .home-mm-feature__rail p { color: #46617a; } /* the feature is a light plate in both themes */

/* ---- Place ---------------------------------------------------------------- */
.ga-city-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 30px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--g-rule, #d9dee2);
}
.ga-city-rail a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--g-rule-strong, #b9c1c7);
  color: var(--g-ink-2, #2c3338);
  text-decoration: none;
  font-size: 0.9rem;
  transition: border-color 160ms var(--ga-ease), color 160ms var(--ga-ease);
}
.ga-city-rail a b { font: 600 10px/1 var(--ga-font-mono); letter-spacing: 0.1em; color: var(--g-muted, #626b73); }
.ga-city-rail a:is(:hover, :focus-visible) { color: var(--g-ink, #0a0c0e); border-color: var(--g-ink, #0a0c0e); }
.ga-city-rail a[aria-current="true"] { border-color: var(--g-ink, #0a0c0e); background: var(--g-ink, #0a0c0e); color: var(--g-bg, #f5f6f7); }
.ga-city-rail a[aria-current="true"] b { color: var(--ga-on-ink-signal, var(--ga-signal)); }
.ga-city-rail a:focus-visible { outline: 2px solid var(--g-ink, #0a0c0e); outline-offset: 2px; }

.ga-place-city[hidden] { display: none; }
.ga-place-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  margin: 0 0 8px;
}
.ga-place-head h3 { margin: 0; font: 600 clamp(1.6rem, 2.6vw, 2.2rem)/1.1 var(--ga-font-serif); }
.ga-place-meta { margin: 4px 0 0; font: 500 11px/1.5 var(--ga-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--g-muted, #626b73); }
.ga-place-open { color: var(--g-ink, #0a0c0e); font-size: 0.9rem; font-weight: 500; text-underline-offset: 4px; }
.ga-place-sum { margin: 0 0 24px; max-width: 62ch; color: var(--g-ink-2, #2c3338); font-size: 0.96rem; line-height: 1.6; }

.ga-mosaic {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  grid-auto-rows: 200px;
  gap: 12px;
  grid-auto-flow: dense;
}
.ga-mosaic li { min-width: 0; }
.ga-photo { position: relative; display: block; height: 100%; overflow: hidden; background: var(--g-soft, #eef1f3); }
.ga-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 420ms var(--ga-ease); }
.ga-photo:hover img, .ga-photo:focus-visible img { transform: scale(1.025); }
.ga-photo-cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 30px 12px 10px;
  background: linear-gradient(180deg, transparent, rgba(8, 10, 14, 0.74));
  color: #fff;
  font: 500 11px/1.45 var(--ga-font-mono);
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 200ms var(--ga-ease);
}
.ga-photo:is(:hover, :focus-visible) .ga-photo-cap { opacity: 1; }
.ga-photo:focus-visible { outline: 3px solid var(--ga-signal); outline-offset: -3px; }
@media (hover: none) { .ga-photo-cap { opacity: 1; } }
.ga-mosaic li:first-child { grid-column: span 2; grid-row: span 2; }

.ga-related { margin: 26px 0 0; padding: 18px 0 0; border-top: 1px solid var(--g-ink, #0a0c0e); max-width: 720px; }
.ga-related h4 { margin: 0 0 10px; font: 600 11px/1.4 var(--ga-font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ga-accent-ink); }
.ga-related ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ga-related li { display: grid; gap: 2px; }
.ga-related a { color: var(--g-ink, #0a0c0e); font-size: 0.94rem; font-weight: 500; text-underline-offset: 3px; }
.ga-related-note { color: var(--g-muted, #626b73); font-size: 0.82rem; line-height: 1.5; }

/* ---- Time ------------------------------------------------------------------ */
/* the month rail follows the switch on wide screens only; on phones it wraps to two rows and would cover a third of the screen */
.ga-time-rail {
  position: sticky;
  top: 47px;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0 0 34px;
  padding: 10px 0;
  background: var(--g-bg, #f5f6f7);
  border-top: 1px solid var(--g-ink, #0a0c0e);
  border-bottom: 1px solid var(--g-rule, #d9dee2);
}
@media (max-width: 860px) { .ga-time-rail { position: static; } }
.ga-time-rail a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  color: var(--g-ink-2, #2c3338);
  font: 600 11px/1 var(--ga-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;
}
.ga-time-rail a:is(:hover, :focus-visible) { color: var(--g-ink, #0a0c0e); background: var(--g-soft, #eef1f3); }
.ga-time-rail a:focus-visible { outline: 2px solid var(--g-ink, #0a0c0e); outline-offset: -2px; }
.ga-time-rail .ga-time-mode { margin-left: auto; border-left: 1px solid var(--g-rule-strong, #b9c1c7); color: var(--ga-accent-ink); }

.ga-time-year { margin: 0 0 40px; }
.ga-time-year-label { margin: 0 0 18px; font: 400 clamp(2.4rem, 5vw, 4rem)/1 var(--ga-font-display); letter-spacing: -0.01em; }
.ga-time-month { margin: 0 0 26px; padding-left: clamp(16px, 3vw, 40px); border-left: 2px solid var(--g-rule-strong, #b9c1c7); position: relative; }
.ga-time-month::before { content: ""; position: absolute; left: -5px; top: 6px; width: 8px; height: 8px; background: var(--ga-signal); }
.ga-time-month > h4 { margin: 0 0 14px; font: 600 12px/1.4 var(--ga-font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--g-muted, #626b73); }
.ga-time-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.ga-time-item { padding: 14px 0; border-bottom: 1px solid var(--g-rule, #d9dee2); display: grid; gap: 4px; }
.ga-time-item[data-weight="major"] { padding: 22px 0; }
.ga-time-item[data-weight="major"] .ga-time-title { font-size: 1.45rem; }
.ga-time-item[data-weight="minor"] .ga-time-title { font-size: 0.98rem; }
.ga-time-kind { margin: 0; font: 600 10px/1.4 var(--ga-font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ga-accent-ink); }
.ga-time-title { margin: 0; font: 500 1.15rem/1.3 var(--ga-font-ui); letter-spacing: -0.005em; }
.ga-time-title a { color: inherit; text-decoration: none; }
.ga-time-title a:hover, .ga-time-title a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.ga-time-sum { margin: 0; max-width: 68ch; color: var(--g-muted, #626b73); font-size: 0.88rem; line-height: 1.55; }
.ga-time-precision { margin: 2px 0 0; font: 500 11px/1.5 var(--ga-font-mono); color: var(--ga-signal-ink); }
.ga-time-undated { margin: 8px 0 0; padding: 22px clamp(16px, 2vw, 28px); border: 1px dashed var(--g-rule-strong, #b9c1c7); background: var(--g-surface, #fff); }
.ga-time-undated h4 { margin: 0 0 6px; font: 600 1.1rem/1.3 var(--ga-font-serif); }
.ga-time-undated-note { margin: 0 0 14px; color: var(--g-muted, #626b73); font-size: 0.86rem; }

/* list mode: the same entries, flattened */
.ga-time-body[data-mode="list"] .ga-time-month { border-left: 0; padding-left: 0; }
.ga-time-body[data-mode="list"] .ga-time-month::before { display: none; }
.ga-time-body[data-mode="list"] .ga-time-month h4 { display: none; }
.ga-time-body[data-mode="list"] .ga-time-item { grid-template-columns: 130px minmax(0, 1fr); gap: 14px; padding: 8px 0; align-items: baseline; }
.ga-time-body[data-mode="list"] .ga-time-item .ga-time-kind { white-space: nowrap; }
.ga-time-body[data-mode="list"] .ga-time-item .ga-time-sum,
.ga-time-body[data-mode="list"] .ga-time-item .ga-time-precision { display: none; }
.ga-time-body[data-mode="list"] .ga-time-item[data-weight="major"] .ga-time-title { font-size: 1.05rem; }

/* ---- Connections ------------------------------------------------------------ */
.ga-conn-stage {
  position: relative;
  height: clamp(480px, 72vh, 760px);
  margin: 0 0 40px;
  border: 1px solid var(--g-rule-strong, #b9c1c7);
  background:
    linear-gradient(var(--g-rule, #d9dee2) 1px, transparent 1px) 0 0 / 100% 12.5% no-repeat padding-box,
    linear-gradient(90deg, var(--g-rule, #d9dee2) 1px, transparent 1px) 0 0 / 12.5% 100% no-repeat padding-box,
    var(--g-surface, #fff);
  background-blend-mode: normal;
  touch-action: none;
  overflow: hidden;
}
.ga-conn-edges { position: absolute; inset: 0; width: 100%; height: 100%; }
.ga-conn-edges line { stroke: var(--g-rule-strong, #b9c1c7); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke 160ms var(--ga-ease); }
.ga-conn-edges line.is-active { stroke: var(--ga-accent-ink); stroke-width: 1.5; }
.ga-conn-nodes { margin: 0; padding: 0; list-style: none; }
.ga-conn-node { position: static; }
.ga-node {
  position: absolute;
  transform: translate(-50%, -50%);
  max-width: 148px;
  padding: 6px 10px;
  border: 1px solid var(--g-rule-strong, #b9c1c7);
  background: var(--g-surface, #fff);
  color: var(--g-ink, #0a0c0e);
  font: 500 11.5px/1.3 var(--ga-font-ui);
  text-decoration: none;
  cursor: grab;
  box-shadow: 0 1px 0 rgba(10, 12, 14, 0.06);
}
.ga-node span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ga-node:is(:hover, :focus-visible) { border-color: var(--g-ink, #0a0c0e); z-index: 5; }
.ga-node:focus-visible { outline: 2px solid var(--ga-accent-ink); outline-offset: 1px; }
.ga-node.is-focus { border-color: var(--g-ink, #0a0c0e); box-shadow: inset 0 -3px 0 var(--ga-signal); z-index: 6; }
.ga-node.is-dim { opacity: 0.45; }
.ga-conn-node[data-kind="city"] .ga-node { border-color: var(--ga-accent); }
.ga-conn-node[data-kind="research"] .ga-node { box-shadow: inset 0 -3px 0 var(--g-frame, #2f63ff); }
.ga-conn-node[data-kind="essay"] .ga-node { box-shadow: inset 0 -3px 0 var(--ga-accent); }

.ga-conn-panel {
  position: absolute;
  top: 16px;
  right: 16px;
  bottom: 16px;
  width: min(340px, calc(100% - 32px));
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--g-ink, #0a0c0e);
  background: var(--g-surface, #fff);
  overflow-y: auto;
}
.ga-conn-panel[hidden] { display: none; }
.ga-conn-panel-body h3 { margin: 0 0 4px; font: 600 1.2rem/1.25 var(--ga-font-serif); }
.ga-conn-panel-body .ga-panel-kind { margin: 0 0 10px; font: 600 10px/1.4 var(--ga-font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ga-accent-ink); }
.ga-conn-panel-body .ga-panel-sum { margin: 0 0 14px; color: var(--g-ink-2, #2c3338); font-size: 0.88rem; line-height: 1.55; }
.ga-conn-panel-body .ga-panel-open { display: inline-flex; min-height: 36px; align-items: center; margin: 0 0 16px; color: var(--g-ink, #0a0c0e); font-weight: 500; text-underline-offset: 3px; }
.ga-conn-relations { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--g-rule, #d9dee2); }
.ga-conn-relations li { padding: 10px 0; border-bottom: 1px solid var(--g-rule, #d9dee2); display: grid; gap: 4px; }
.ga-conn-relations a { color: var(--g-ink, #0a0c0e); font-size: 0.92rem; font-weight: 500; text-underline-offset: 3px; }
.ga-conn-relations .ga-rel-note { color: var(--g-muted, #626b73); font-size: 0.8rem; line-height: 1.5; }
.ga-conn-relations .ga-rel-follow { justify-self: start; min-height: 32px; padding: 0 10px; border: 1px solid var(--g-rule-strong, #b9c1c7); background: transparent; color: var(--g-ink, #0a0c0e); font: 600 10px/1 var(--ga-font-mono); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.ga-conn-relations .ga-rel-follow:is(:hover, :focus-visible) { border-color: var(--g-ink, #0a0c0e); }
.ga-conn-exit { min-height: 44px; border: 0; border-top: 1px solid var(--g-rule, #d9dee2); background: transparent; color: var(--g-ink, #0a0c0e); font: 600 11px/1 var(--ga-font-mono); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; text-align: left; }
.ga-conn-exit:is(:hover, :focus-visible) { color: var(--ga-accent-ink); }
.ga-conn-hint { margin: -22px 0 40px; color: var(--g-muted, #626b73); font: 500 11px/1.6 var(--ga-font-mono); letter-spacing: 0.06em; }

.ga-conn-index { margin: 0 0 24px; }
.ga-conn-index h3 { margin: 0 0 16px; font: 600 1.3rem/1.2 var(--ga-font-serif); }
.ga-conn-index-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--g-ink, #0a0c0e); columns: 2; column-gap: 48px; }
.ga-conn-pair { break-inside: avoid; padding: 12px 0; border-bottom: 1px solid var(--g-rule, #d9dee2); }
.ga-conn-pair > a { color: var(--g-ink, #0a0c0e); font-size: 0.9rem; font-weight: 500; text-underline-offset: 3px; }
.ga-conn-link-mark { color: var(--ga-accent-ink); padding: 0 4px; }
.ga-conn-note { margin: 4px 0 0; color: var(--g-muted, #626b73); font-size: 0.8rem; line-height: 1.5; }

/* ---- Lightbox ---------------------------------------------------------------- */
.ga-lightbox {
  width: min(960px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 0;
  border: 1px solid var(--g-ink, #0a0c0e);
  border-radius: 0;
  background: var(--g-night, #080a0e);
  color: var(--g-night-ink, #ededE8);
}
.ga-lightbox::backdrop { background: rgba(8, 10, 14, 0.82); }
.ga-lightbox-figure { margin: 0; display: grid; }
.ga-lightbox-figure img { display: block; width: 100%; max-height: 68vh; object-fit: contain; background: var(--g-night-2, #0f1217); }
.ga-lightbox-cap { display: grid; gap: 6px; padding: 14px 18px 6px; }
.ga-lightbox-place { font: 600 10px/1.4 var(--ga-font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ga-signal); }
.ga-lightbox-caption { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--g-night-ink, #ededE8); }
.ga-lightbox-open { color: var(--g-night-ink, #ededE8); font-size: 0.88rem; text-underline-offset: 3px; }
.ga-lightbox-bar { display: flex; align-items: center; gap: 10px; padding: 12px 18px 16px; }
.ga-lightbox-btn {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--g-night-rule, #34383d);
  background: transparent;
  color: var(--g-night-ink, #ededE8);
  font: 500 0.9rem/1 var(--ga-font-ui);
  cursor: pointer;
}
.ga-lightbox-btn:is(:hover, :focus-visible) { border-color: var(--g-night-ink, #ededE8); }
.ga-lightbox-btn:focus-visible { outline: 2px solid var(--ga-signal); outline-offset: 2px; }
.ga-lightbox-count { margin: 0; font: 500 11px/1 var(--ga-font-mono); letter-spacing: 0.14em; color: var(--g-night-muted, #92979c); }
.ga-lightbox-close { margin-left: auto; }

/* ---- Footer ------------------------------------------------------------------- */
.ga-footer { border-top: 1px solid var(--g-ink, #0a0c0e); background: var(--g-surface, #fff); }
.ga-footer-inner {
  width: var(--ga-page);
  margin: 0 auto;
  padding: clamp(36px, 5vw, 64px) 0;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
}
.ga-footer-id img { width: 40px; height: 40px; }
.ga-footer-id p { margin: 10px 0 0; display: flex; align-items: baseline; gap: 10px; }
.ga-footer-id b { font-size: 1rem; letter-spacing: 0.16em; }
.ga-footer-id span { font: 500 10px/1.4 var(--ga-font-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--g-muted, #626b73); }
.ga-footer-note { display: block !important; margin: 10px 0 0 !important; max-width: 34ch; color: var(--g-muted, #626b73); font-size: 0.86rem; line-height: 1.55; }
.ga-footer-col h2 { margin: 0 0 12px; font: 600 11px/1.4 var(--ga-font-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ga-accent-ink); }
.ga-footer-col a { display: flex; align-items: center; min-height: 32px; width: fit-content; color: var(--g-ink-2, #2c3338); text-decoration: none; font-size: 0.9rem; }
.ga-footer-col a:is(:hover, :focus-visible) { color: var(--g-ink, #0a0c0e); text-decoration: underline; text-underline-offset: 3px; }
.ga-footer-fine { margin: 14px 0 0; color: var(--g-muted, #626b73); font-size: 0.8rem; }

/* ---- responsive ----------------------------------------------------------------- */
@media (max-width: 1020px) {
  .ga-cover { grid-template-columns: 1fr; align-items: start; }
  .ga-featured-grid { grid-template-columns: 1fr; }
  .ga-theme { grid-template-columns: 40px 1fr; }
  .ga-theme-links { grid-column: 2; }
  .ga-footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .ga-switch { top: 0; }
  .ga-switch a { flex: 1 0 25%; justify-content: center; padding: 10px 8px 12px; }
  .ga-switch a span { font-size: 0.84rem; }
  .ga-switch a b { display: none; }
  .ga-time-rail { top: 108px; }
  .ga-conn-stage { display: none; }
  .ga-conn-hint { display: none; }
  .ga-conn-index-list { columns: 1; }
  .ga-mosaic { grid-auto-rows: 160px; }
  .ga-mosaic li:first-child .ga-photo { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 640px) {
  :root { --ga-page: calc(100% - 32px); }
  .ga-update a { grid-template-columns: 1fr; gap: 4px; }
  .ga-update time { order: -1; }
  .ga-footer-inner { grid-template-columns: 1fr; }
  .ga-lightbox-bar { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .ga-photo img, .ga-photo-cap, .ga-switch a::after, .ga-conn-edges line { transition: none; }
  .ga-photo:hover img, .ga-photo:focus-visible img { transform: none; }
}

/* Print: the cover reads as a page; interactive layers come out. */
@media print {
  .ga-switch, .ga-conn-stage, .ga-lightbox, .ga-time-rail { display: none !important; }
  html[data-js="1"] .ga-view { display: block; }
}