/* Chess Ghosts (play/ghosts.html). Uses the tokens from site.css. A warm ivory and walnut board on the site's
   darkroom black; your game is an amber road, and the ghosts are pale moonlight: cool, translucent, fading with age.
   Walking a ghost turns the board itself to moonlight. */
.gh-body { --gh-moon: #a9c8ff; --gh-gold: #ffd27a; --gh-coral: #ff9a7a; --gh-violet: #c9b8ff; --gh-ash: #a39c92;
  --gh-light: #e6dccb; --gh-dark: #9c8669; }
.gh-stage [hidden], .gh-map-sec [hidden] { display: none !important; }
.gh-stage { padding-block: 28px 64px; background:
  radial-gradient(1200px 520px at 78% -10%, rgba(169, 200, 255, 0.07), transparent 70%),
  radial-gradient(900px 500px at 10% 30%, rgba(255, 174, 74, 0.05), transparent 70%); }
.gh-head { grid-area: head; display: grid; gap: 10px; }
.gh-head .label { color: var(--gh-moon); }
.gh-head h1 { font-weight: 300; font-size: clamp(2.4rem, 4.6vw, 3.6rem); letter-spacing: -0.025em; }
.gh-lede { color: #c8bfb1; font-size: 1.15rem; line-height: 1.45; max-width: 52ch; }

/* a laptop: the board on the left, the title and then your road on the right; a phone: title, board, road */
.gh-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 430px); grid-template-areas: "play head" "play side"; grid-template-rows: auto 1fr;
  gap: 24px 48px; align-items: start; }
@media (max-width: 960px) { .gh-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "play" "side"; grid-template-rows: none; gap: 24px; } }
@media (max-width: 960px) { .gh-stage.is-setup .gh-grid { grid-template-areas: "head" "side" "play"; } }   /* choose first, then the board */
.gh-play { grid-area: play; display: grid; gap: 14px; width: min(100%, 560px); width: min(100%, 640px, max(340px, calc(100svh - 280px))); justify-self: end; }   /* a fallback width first: without it, an older browser collapses the board to nothing */
@media (max-width: 960px) { .gh-play { width: min(100%, 640px); justify-self: center; } }

/* ---------- the board ---------- */
.gh-board-row { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 10px; }
@media (max-width: 520px) { .gh-board-row { grid-template-columns: 8px minmax(0, 1fr); gap: 7px; } }
.gh-bar { position: relative; border-radius: 6px; background: #1d1915; box-shadow: inset 0 0 0 1px rgba(237, 231, 219, 0.14); overflow: hidden; transition: opacity 0.3s; }
.gh-bar.idle { opacity: 0.45; }
.gh-bar-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: linear-gradient(180deg, #fff6e2, #e2d3b4); transition: height 0.7s var(--ease-out); }
.gh-board { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); aspect-ratio: 1; width: 100%; border-radius: 6px; overflow: hidden;
  container-type: inline-size; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  box-shadow: 0 0 0 1px rgba(237, 231, 219, 0.1), 0 40px 90px -40px rgba(0, 0, 0, 0.95), 0 0 70px -20px rgba(255, 174, 74, 0.12);
  transition: box-shadow 0.6s var(--ease-out); }
.gh-sq { position: relative; display: grid; place-items: center; min-width: 0; aspect-ratio: 1; margin: 0; padding: 0; border: 0; border-radius: 0; font: inherit; color: inherit; cursor: default; overflow: hidden;
  transition: background-color 0.5s; }
.gh-sq.l { background: var(--gh-light); background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.03)); }
.gh-sq.d { background: var(--gh-dark); background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.08)); }
.gh-sq.own, .gh-sq.t-dot, .gh-sq.t-cap { cursor: pointer; }
.gh-sq.own { touch-action: none; }                       /* a piece you can drag does not scroll the page */
.gh-sq.last::before { content: ""; position: absolute; inset: 0; background: rgba(255, 174, 74, 0.36); }
.gh-sq.sel::before { content: ""; position: absolute; inset: 0; background: rgba(255, 174, 74, 0.3); box-shadow: inset 0 0 0 3px #ffae4a; }
.gh-sq.t-dot::after { content: ""; position: absolute; width: 28%; height: 28%; border-radius: 50%; background: rgba(40, 30, 20, 0.34); }
.gh-sq.t-cap::after { content: ""; position: absolute; inset: 5%; border-radius: 50%; box-shadow: inset 0 0 0 5px rgba(40, 30, 20, 0.32); }
.gh-sq.check::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 74, 61, 0.85) 0%, rgba(255, 74, 61, 0.35) 45%, transparent 72%); }
.gh-sq:focus-visible { outline: none; box-shadow: inset 0 0 0 3px #1c63d6, inset 0 0 0 5px #fff; z-index: 1; }
.gh-sq.lifted .gh-pc { opacity: 0.25; }
.gh-pc { position: relative; z-index: 1; font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", "DejaVu Sans", serif; font-size: 10.6cqi; line-height: 1;
  pointer-events: none; transition: transform 240ms var(--ease-out), opacity 0.4s; }
.gh-pc.w { color: #fffaf0; text-shadow: 0 0 1px #2c241b, 0 0 1px #2c241b, 0 1px 1px #2c241b, 0 4px 8px rgba(0, 0, 0, 0.35); }
.gh-pc.b { color: #1b1611; text-shadow: 0 0 1px rgba(255, 248, 230, 0.4), 0 4px 8px rgba(0, 0, 0, 0.35); }
.gh-co { position: absolute; z-index: 1; font-family: var(--font-data); font-weight: 600; font-size: max(9px, 2.1cqi); line-height: 1; pointer-events: none; }
.gh-co.f { right: 4%; bottom: 4%; }
.gh-co.r { left: 5%; top: 5%; }
.gh-sq.l .gh-co { color: #7d6a52; }
.gh-sq.d .gh-co { color: #f1e8d8; }
.gh-arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.gh-ar line { stroke-width: 15; stroke-linecap: round; }
.gh-ar.ghost line { stroke: rgba(80, 130, 245, 0.78); }
.gh-ar.ghost polygon { fill: rgba(80, 130, 245, 0.85); }
.gh-board.is-wait .gh-sq { cursor: progress; }
.gh-float { position: fixed; z-index: 60; display: grid; place-items: center; pointer-events: none; line-height: 1; font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", serif;
  transform: scale(1.12); filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.5)); }
.gh-float.w { color: #fffaf0; text-shadow: 0 0 1px #2c241b, 0 0 1px #2c241b; }
.gh-float.b { color: #1b1611; }

/* walking a ghost: the board turns to moonlight */
.gh-board.is-ghost { box-shadow: 0 0 0 1px rgba(169, 200, 255, 0.5), 0 40px 90px -40px rgba(0, 0, 0, 0.95), 0 0 90px -10px rgba(120, 160, 255, 0.45); }
.gh-board.is-ghost .gh-sq.l { background-color: #d4dced; }
.gh-board.is-ghost .gh-sq.d { background-color: #7f8daa; }
.gh-board.is-ghost .gh-sq.last::before { background: rgba(120, 160, 255, 0.34); }
.gh-board.is-ghost .gh-pc { opacity: 0.86; }
.gh-board.is-ghost .gh-sq.l .gh-co { color: #56627c; }
.gh-board.is-ghost::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, transparent 45%, rgba(169, 200, 255, 0.22) 100%); }
.gh-banner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0; }
.gh-banner-move { font-family: var(--font-display); font-size: 1.35rem; font-style: italic; color: #e6eeff; }
.gh-banner-words { font-family: var(--font-data); font-size: var(--step--1); color: var(--gh-moon); }

.gh-promo { position: absolute; z-index: 4; inset: 0; display: grid; grid-template-columns: repeat(4, min(72px, 20%)); place-content: center; gap: 8px; background: rgba(13, 12, 11, 0.72); }
.gh-promo button { pointer-events: auto; aspect-ratio: 1; border-radius: 12px; border: 1px solid rgba(237, 231, 219, 0.4); background: var(--gh-light); font-size: 2.6rem; cursor: pointer; padding: 0; }
.gh-promo button:focus-visible { outline: 3px solid #ffae4a; outline-offset: 2px; }

.gh-status { font-family: var(--font-data); font-size: var(--step--1); color: #d8d0c2; min-height: 1.6em; line-height: 1.45; }

/* ---------- controls ---------- */
.gh-ctl { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.gh-ctl-gap { flex: 1 1 0; min-width: 4px; }
.gh-btn { font-family: var(--font-data); font-size: var(--step--1); font-weight: 500; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(237, 231, 219, 0.32);
  background: transparent; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; touch-action: manipulation; }
.gh-btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.gh-btn.subtle { color: #c8bfb1; border-color: rgba(237, 231, 219, 0.18); }
.gh-btn.round { width: 44px; padding: 0; font-size: 1.1rem; }
.gh-btn:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .gh-btn:hover:not(:disabled) { border-color: #ffae4a; } .gh-btn.primary:hover { background: #ffae4a; border-color: #ffae4a; } }
.gh-btn:focus-visible { outline: 2px solid #ffae4a; outline-offset: 3px; }

.gh-setup { grid-area: side; display: grid; gap: 14px; padding: 18px; border-radius: 14px; background: rgba(23, 21, 19, 0.85); border: 1px solid var(--rule); }
.gh-seg { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.gh-seg legend { font-family: var(--font-data); font-size: var(--step--2); color: var(--muted); font-weight: 500; padding: 0; margin-bottom: 8px; width: 100%; }
.gh-seg label { position: relative; }
.gh-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gh-seg span { font-family: var(--font-data); font-size: var(--step--1); min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(237, 231, 219, 0.24);
  display: inline-flex; align-items: center; cursor: pointer; color: #d8d0c2; }
.gh-seg input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.gh-seg input:focus-visible + span { outline: 2px solid #ffae4a; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .gh-seg span:hover { border-color: #ffae4a; } }
.gh-start { justify-self: start; min-height: 46px; cursor: pointer; }

.gh-walk { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: rgba(120, 160, 255, 0.07); border: 1px solid rgba(169, 200, 255, 0.25); }
.gh-walk-line { font-family: var(--font-data); font-size: var(--step--1); color: rgba(214, 226, 255, 0.45); line-height: 1.6; }
.gh-walk-line .on { color: #e6eeff; }
.gh-walk-pos { font-family: var(--font-data); font-size: var(--step--2); color: var(--gh-moon); margin-left: 6px; white-space: nowrap; }
.gh-walk .gh-btn.primary { background: #e6eeff; border-color: #e6eeff; color: #0d0c0b; }

/* ---------- the timeline ---------- */
.gh-timeline { grid-area: side; display: grid; gap: 8px; align-content: start; max-height: max(360px, calc(100svh - 360px)); overflow-y: auto; overscroll-behavior: contain; padding-right: 6px;
  scrollbar-width: thin; scrollbar-color: #3a352f transparent; }
@media (max-width: 960px) { .gh-timeline { max-height: none; overflow: visible; padding-right: 0; } }
.gh-timeline h2 { font-size: var(--step-2); font-weight: 300; }
.gh-tl-sub, .gh-tl-empty { font-family: var(--font-data); font-size: var(--step--2); color: var(--muted); line-height: 1.5; }
.gh-tl-empty { color: #c8bfb1; padding: 14px 0; }
.gh-path { list-style: none; margin: 8px 0 0; padding: 0 0 0 24px; position: relative; display: grid; gap: 18px; }
.gh-path:not(:empty)::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, #ffae4a, rgba(255, 174, 74, 0.25)); box-shadow: 0 0 12px rgba(255, 174, 74, 0.55); }
.gh-moment { position: relative; display: grid; gap: 8px; }
.gh-step { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-family: var(--font-data); font-size: var(--step--1); }
.gh-dot { position: absolute; left: -23px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #ffd9a0; box-shadow: 0 0 0 3px rgba(255, 174, 74, 0.25), 0 0 10px rgba(255, 174, 74, 0.6); }
.gh-moment.start .gh-dot { background: #8a8278; box-shadow: none; width: 8px; height: 8px; left: -21px; top: 8px; }
.gh-num { color: var(--muted); font-variant-numeric: tabular-nums; }
.gh-you { font-weight: 600; color: var(--ink); font-size: 1.05rem; }
.gh-reply { color: #b8afa1; }
.gh-ev { color: var(--muted); font-size: var(--step--2); }
.gh-moment.missed .gh-dot { background: #ffe3b8; box-shadow: 0 0 0 4px rgba(255, 174, 74, 0.3), 0 0 22px 6px rgba(255, 140, 80, 0.6); animation: gh-breathe 3.2s ease-in-out infinite; }
@keyframes gh-breathe { 50% { box-shadow: 0 0 0 6px rgba(255, 174, 74, 0.18), 0 0 30px 10px rgba(255, 140, 80, 0.45); } }
.gh-note { font-size: 1rem; line-height: 1.45; color: #ffe1b8; padding: 8px 12px; border-radius: 10px; background: linear-gradient(90deg, rgba(255, 150, 80, 0.14), rgba(255, 150, 80, 0.03));
  border-left: 2px solid rgba(255, 174, 74, 0.7); }
.gh-gather { font-family: var(--font-data); font-size: var(--step--2); color: #b9c9e8; }
.gh-moment.newest .gh-gather { animation: gh-shimmer 1.8s ease-in-out infinite; }
@keyframes gh-shimmer { 50% { opacity: 0.45; } }

.gh-ghosts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gh-ghost { --gc: var(--gh-moon); position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 10px; margin-left: 14px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(169, 200, 255, 0.07), rgba(169, 200, 255, 0.02)); border: 1px solid rgba(169, 200, 255, 0.16);
  opacity: calc(1 - var(--age, 0) * 0.3); transition: opacity 0.4s, border-color 0.3s; }
.gh-ghost::before { content: ""; position: absolute; left: -32px; top: -12px; width: 30px; height: 40px; border-left: 1.5px dashed rgba(169, 200, 255, calc(0.5 - var(--age, 0) * 0.3));
  border-bottom: 1.5px dashed rgba(169, 200, 255, calc(0.5 - var(--age, 0) * 0.3)); border-bottom-left-radius: 18px; }
.gh-ghost:hover, .gh-ghost:focus-within { opacity: 1; border-color: color-mix(in srgb, var(--gc) 55%, transparent); }
.gh-ghost.k-win, .gh-ghost.k-mate { --gc: var(--gh-gold); }
.gh-ghost.k-stronger { --gc: #ffbe6e; }
.gh-ghost.k-sharp { --gc: var(--gh-coral); }
.gh-ghost.k-fainter { --gc: var(--gh-ash); }
.gh-ghost.k-left { --gc: var(--gh-violet); }
.gh-mini { width: 84px; height: 84px; border-radius: 6px; opacity: calc(0.92 - var(--age, 0) * 0.45); transition: opacity 0.4s;
  box-shadow: 0 0 22px -6px color-mix(in srgb, var(--gc) 70%, transparent); }
.gh-ghost:hover .gh-mini, .gh-ghost:focus-within .gh-mini { opacity: 1; }
.gh-mini rect.l { fill: #d4dced; }
.gh-mini rect.d { fill: #7f8daa; }
.gh-mini rect.h { fill: #9fb9f5; }
.gh-mini text { font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", serif; font-size: 10.5px; text-anchor: middle; }
.gh-mini text.w { fill: #fffaf0; stroke: #2c241b; stroke-width: 0.5px; paint-order: stroke; }
.gh-mini text.b { fill: #1b1611; }
.gh-g-body { display: grid; gap: 4px; min-width: 0; align-content: start; }
.gh-g-words { font-family: var(--font-display); font-style: italic; font-size: 1.12rem; line-height: 1.2; color: var(--gc); }
.gh-g-move { font-family: var(--font-data); font-size: var(--step--1); color: var(--ink); overflow-wrap: anywhere; }
.gh-g-line { color: #a8a093; font-size: var(--step--2); }
.gh-g-note { font-family: var(--font-data); font-size: var(--step--2); color: #c8bfb1; }
.gh-cmp { display: grid; gap: 3px; margin: 2px 0; max-width: 240px; }
.gh-cmp .row { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 8px; }
.gh-cmp i { font-style: normal; font-family: var(--font-data); font-size: 0.72rem; color: #a8a093; }
.gh-cmp b { position: relative; height: 6px; border-radius: 3px; background: rgba(237, 231, 219, 0.1); overflow: hidden; }
.gh-cmp s { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: #ede7db; text-decoration: none; }
.gh-cmp .road s { background: var(--gc); }
.gh-g-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.gh-g-acts .gh-btn { min-height: 40px; padding: 0 14px; font-size: var(--step--2); border-color: color-mix(in srgb, var(--gc) 45%, transparent); }
@media (pointer: coarse) { .gh-g-acts .gh-btn { min-height: 44px; } }
/* older moments fold their ghosts smaller: the board shrinks, the bars and notes go, the words stay */
.gh-moment.old .gh-ghost { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 8px; }
.gh-moment.old .gh-mini { width: 52px; height: 52px; }
.gh-moment.old .gh-cmp, .gh-moment.old .gh-g-note { display: none; }
.gh-moment.old .gh-g-words { font-size: 1rem; }
@media (max-width: 420px) { .gh-ghost { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; margin-left: 8px; } .gh-moment:not(.old) .gh-mini { width: 64px; height: 64px; } .gh-ghost::before { left: -26px; width: 24px; } }

/* ---------- the finished map ---------- */
.gh-map-sec { padding-block: 56px; border-top: 1px solid var(--rule); background: radial-gradient(1000px 400px at 50% 0%, rgba(169, 200, 255, 0.06), transparent 70%); }
.gh-map-sec .page { display: grid; gap: 14px; }
.gh-map-sec .page > .label { color: var(--gh-moon); }
.gh-map-sec h2 { font-weight: 300; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.02em; }
.gh-map-result { font-size: var(--step-1); color: var(--ink); }
.gh-map-sum { color: #c8bfb1; }
.gh-map-box { overflow-x: auto; overflow-y: hidden; border-radius: 14px; border: 1px solid var(--rule); padding: 10px 0; background: rgba(11, 12, 16, 0.6);
  scrollbar-width: thin; scrollbar-color: #3a352f transparent; }
.gh-map-box:focus-visible { outline: 2px solid #ffae4a; outline-offset: 3px; }
.gh-map-svg { display: block; margin-inline: auto; }
.gh-map-svg text { font-family: var(--font-data); text-anchor: middle; }
.gh-m-road { fill: none; stroke: #ffae4a; stroke-width: 3; stroke-linecap: round; }
.gh-m-road.glow { stroke-width: 12; stroke-opacity: 0.16; }
.gh-m-start { fill: #ffd9a0; }
.gh-m-node.you { fill: #ffe3b8; stroke: #ffae4a; stroke-width: 2; }
.gh-m-node.engine { fill: #8a8278; }
.gh-m-missed { fill: rgba(255, 140, 80, 0.85); }
.gh-m-san { font-size: 11px; fill: #a8a093; }
.gh-m-san.you { fill: #ede7db; font-weight: 600; }
.gh-m-ghost { --gc: var(--gh-moon); cursor: pointer; outline: none; }
.gh-m-ghost.k-win, .gh-m-ghost.k-mate { --gc: var(--gh-gold); }
.gh-m-ghost.k-stronger { --gc: #ffbe6e; }
.gh-m-ghost.k-sharp { --gc: var(--gh-coral); }
.gh-m-ghost.k-fainter { --gc: var(--gh-ash); }
.gh-m-ghost path { fill: none; stroke: var(--gc); stroke-opacity: 0.5; stroke-width: 1.6; stroke-dasharray: 2 5; stroke-linecap: round; }
.gh-m-ghost circle { fill: var(--gc); fill-opacity: 0.45; }
.gh-m-ghost text.san { font-size: 10.5px; fill: var(--gc); }
.gh-m-ghost text.words { font-family: var(--font-display); font-style: italic; font-size: 13px; fill: var(--gc); fill-opacity: 0.85; text-anchor: start; }
.gh-m-ghost.missed path { stroke-opacity: 0.9; stroke-dasharray: none; stroke-width: 2; }
.gh-m-ghost:hover path, .gh-m-ghost:focus-visible path { stroke-opacity: 1; stroke-width: 2.4; }
.gh-m-ghost:hover circle, .gh-m-ghost:focus-visible circle { fill-opacity: 1; }
.gh-m-ghost:focus-visible text.words { text-decoration: underline; }
.gh-m-left path { fill: none; stroke: var(--gh-violet); stroke-opacity: 0.55; stroke-width: 2; }
.gh-m-left circle { fill: var(--gh-violet); fill-opacity: 0.55; }
.gh-m-left text.san { font-size: 10.5px; fill: var(--gh-violet); }
.gh-m-left text.words { font-family: var(--font-display); font-style: italic; font-size: 13px; fill: var(--gh-violet); text-anchor: start; }
.gh-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--font-data); font-size: var(--step--2); color: #c8bfb1; }
.gh-legend li { display: inline-flex; align-items: center; gap: 8px; }
.gh-legend .sw { width: 22px; height: 0; border-top: 3px solid #ffae4a; }
.gh-legend .sw.ghost { border-top: 2px dashed var(--gh-moon); }
.gh-legend .sw.left { border-top: 2px solid var(--gh-violet); }
.gh-legend .sw.missed { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #ff8c50; box-shadow: 0 0 10px 3px rgba(255, 140, 80, 0.6); }
.gh-copy-status { font-family: var(--font-data); font-size: var(--step--2); color: #c8bfb1; overflow-wrap: anywhere; min-height: 1.4em; }
.gh-map-sec .btn { cursor: pointer; }

/* ---------- about ---------- */
.gh-about { padding-block: 64px; border-top: 1px solid var(--rule); }
.gh-about .page { display: grid; gap: 20px; }
.gh-about .page > .label { color: var(--gh-moon); }
.gh-about h2 { font-weight: 300; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.02em; }
.gh-about-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 860px) { .gh-about-grid { grid-template-columns: 1fr; gap: 22px; } }
.gh-about-grid h3 { font-size: 1.3rem; margin-bottom: 6px; }
.gh-about-grid p, .gh-small { color: #cfc6b8; max-width: var(--measure); }
.gh-small { font-size: var(--step--1); }
.gh-back a { font-family: var(--font-data); font-size: var(--step--1); min-height: 44px; display: inline-flex; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  .gh-pc, .gh-bar-fill, .gh-board, .gh-sq, .gh-ghost, .gh-mini { transition: none; }
  .gh-moment.missed .gh-dot, .gh-moment.newest .gh-gather { animation: none; }
}