/* GALOK plate system · 2026-11
   Components: .g-plate (caption: scale · extent · evidence), .g-frame (crop marks), .g-axis (ticks that carry data),
   .g-head (section header with instrument modifiers), .g-scale-switch (density control).
   Consumes assets/galok-tokens.css. Additive: it does not override any legacy selector. */

/* ---------- glyph ---------- */
.g-glyph{font-family:var(--g-font-glyph);font-weight:400;font-style:normal;line-height:1}

/* ---------- plate: what am I looking at, how far away, on what basis ---------- */
.g-plate{margin:0;padding:0;display:flex;flex-wrap:nowrap;align-items:stretch;gap:0;position:relative;
  border-top:1px solid var(--g-ink);font:600 var(--g-t-label)/1.3 var(--g-font-mono);letter-spacing:var(--g-track-label);text-transform:uppercase;color:var(--g-muted)}
.g-plate>*{display:inline-flex;align-items:center;min-height:36px;padding:8px 14px 8px 0;margin-right:14px;position:relative}
.g-plate>*+*{padding-left:14px;border-left:1px solid var(--g-rule)}
.g-plate>*:last-child{margin-right:0}
.g-plate::before{content:"";position:absolute;left:0;top:-1px;width:44px;height:3px;background:var(--g-scale)}   /* the tab */
.g-plate__scale{gap:8px;color:var(--g-scale-text)}
.g-plate__scale .g-glyph{font-size:1.5rem;color:var(--g-scale-text);padding-top:3px}
.g-plate__extent{color:var(--g-ink);flex:1 1 auto;min-width:0}
.g-plate__evidence{color:var(--g-muted)}
.g-plate a{color:inherit;text-underline-offset:3px}
/* plates that are not tied to one scale (neutral) show a plain cyan tab and no glyph */
.g-plate[data-scale="none"]::before{background:var(--g-rule-strong)}
.g-dark .g-plate{border-top-color:var(--g-ink)}
@media (max-width:640px){
  .g-plate{flex-wrap:wrap}
  .g-plate>*{min-height:32px;padding-right:10px;margin-right:10px}
  .g-plate>*+*{padding-left:10px}
  .g-plate__extent{flex:1 1 0}
  .g-plate__evidence{flex-basis:100%;border-left:0;padding-left:0;margin:0;min-height:0;padding-top:0}
}

/* stacked plate: the three slots as a short column (narrow gutters, list rows) */
.g-plate--stack{flex-direction:column}
.g-plate--stack>*{min-height:0;margin:0;padding:6px 0;border-left:0}
.g-plate--stack>*+*{border-top:1px solid var(--g-rule)}
.g-plate--stack .g-plate__extent{flex:0 0 auto}

/* ---------- frame: crop marks that stand outside the content ---------- */
.g-frame{position:relative;margin:var(--g-mark-gap)}
.g-frame>.g-frame__marks{position:absolute;inset:calc(-1 * var(--g-mark-gap));pointer-events:none;color:var(--g-ink);
  --m:var(--g-mark);--w:var(--g-mark-weight);
  background:
    linear-gradient(currentColor,currentColor) 0 0/var(--m) var(--w) no-repeat,
    linear-gradient(currentColor,currentColor) 0 0/var(--w) var(--m) no-repeat,
    linear-gradient(currentColor,currentColor) 100% 0/var(--m) var(--w) no-repeat,
    linear-gradient(currentColor,currentColor) 100% 0/var(--w) var(--m) no-repeat,
    linear-gradient(currentColor,currentColor) 0 100%/var(--m) var(--w) no-repeat,
    linear-gradient(currentColor,currentColor) 0 100%/var(--w) var(--m) no-repeat,
    linear-gradient(currentColor,currentColor) 100% 100%/var(--m) var(--w) no-repeat,
    linear-gradient(currentColor,currentColor) 100% 100%/var(--w) var(--m) no-repeat;
  transition:color var(--g-dur) var(--g-ease)}
.g-frame:is(:hover,:focus-within)>.g-frame__marks{color:var(--g-scale-text)}
.g-frame[data-ratio]::after{content:attr(data-ratio);position:absolute;right:0;bottom:calc(-1 * var(--g-mark-gap) - 18px);
  font:600 10px/1 var(--g-font-mono);letter-spacing:var(--g-track-label);color:var(--g-muted)}
.g-dark .g-frame>.g-frame__marks{color:var(--g-ink)}
.g-frame>img,.g-frame>picture,.g-frame>canvas,.g-frame>svg,.g-frame>figure{display:block}

/* ---------- axis: ticks that carry something ---------- */
.g-axis{position:relative;height:22px;margin:0;color:var(--g-ink);border-bottom:1px solid currentColor;
  background:
    repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px var(--g-tick-minor,12px)) 0 100%/100% 5px no-repeat,
    repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px var(--g-tick-major,60px)) 0 100%/100% 12px no-repeat}
.g-axis[data-from]::before,.g-axis[data-to]::after{position:absolute;top:0;font:600 10px/1 var(--g-font-mono);letter-spacing:var(--g-track-label);color:var(--g-muted)}
.g-axis[data-from]::before{content:attr(data-from);left:0}
.g-axis[data-to]::after{content:attr(data-to);right:0}
.g-axis__now{position:absolute;bottom:0;width:2px;height:22px;background:var(--g-scale);transform:translateX(-1px)}

/* ---------- head: the section opening, composed from plate + title + deck ---------- */
.g-head{width:var(--g-page);margin:0 auto;padding:clamp(40px,7vw,96px) 0 clamp(28px,4vw,56px);display:grid;gap:var(--g-s5)}
.g-head__title{margin:0;font:700 var(--g-t-h1)/var(--g-lh-head) var(--g-font-sans);letter-spacing:-.025em;max-width:16ch}
.g-head__deck{margin:0;max-width:var(--g-measure);font:400 var(--g-t-lede)/1.5 var(--g-font-sans);color:var(--g-ink-2)}
.g-head__aside{font:400 var(--g-t-small)/1.55 var(--g-font-sans);color:var(--g-muted)}
.g-head__aside b{display:block;font:700 1.9rem/1 var(--g-font-sans);color:var(--g-ink);letter-spacing:-.02em;margin-bottom:6px}

/* instrument: column — Research, Essays (title column + margin notes) */
.g-head--column{grid-template-columns:minmax(0,7fr) minmax(220px,4fr);column-gap:clamp(24px,5vw,80px);align-items:end}
.g-head--column .g-plate{grid-column:1/-1}
.g-head--column .g-head__aside{border-left:1px solid var(--g-rule);padding-left:var(--g-s5)}

/* instrument: axis — Data (a reading on a ruler) */
.g-head--axis .g-head__reading{display:flex;align-items:baseline;gap:var(--g-s4);flex-wrap:wrap}
.g-head--axis .g-head__reading b{font:700 var(--g-t-display)/var(--g-lh-tight) var(--g-font-sans);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.g-head--axis .g-head__reading span{font:600 var(--g-t-label)/1.4 var(--g-font-mono);letter-spacing:var(--g-track-label);text-transform:uppercase;color:var(--g-muted)}

/* instrument: timeline — Radar (the latest signals on a time rail) */
.g-head--timeline .g-timeline{position:relative;padding-top:var(--g-s5);margin:0;list-style:none;display:flex;gap:0;overflow-x:auto;scrollbar-width:thin}
.g-head--timeline .g-timeline li{flex:0 0 auto;min-width:min(260px,72vw);padding:var(--g-s4) var(--g-s5) 0 0;border-top:1px solid var(--g-ink);position:relative;font:400 var(--g-t-small)/1.45 var(--g-font-sans)}
.g-head--timeline .g-timeline li::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;background:var(--g-scale)}
.g-head--timeline .g-timeline time{display:block;font:600 var(--g-t-label)/1.2 var(--g-font-mono);letter-spacing:var(--g-track-label);color:var(--g-muted);margin-bottom:4px}

/* instrument: viewfinder — Cities, Home (the frame is the page) */
.g-head--viewfinder{padding-top:var(--g-s5)}

/* instrument: gloss — Reading (text with its commentary in the margin) */
.g-head--gloss{grid-template-columns:minmax(0,8fr) minmax(200px,3fr);column-gap:clamp(24px,5vw,72px)}
.g-head--gloss .g-plate{grid-column:1/-1}

/* instrument: slate — Cinematic Poetry */
.g-head--slate .g-slate{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--g-rule-strong)}
.g-head--slate .g-slate>*{padding:var(--g-s4);border-left:1px solid var(--g-rule-strong);font:600 var(--g-t-label)/1.4 var(--g-font-mono);letter-spacing:var(--g-track-label);text-transform:uppercase;color:var(--g-muted)}
.g-head--slate .g-slate>*:first-child{border-left:0}
.g-head--slate .g-slate b{display:block;margin-top:4px;font:700 1.25rem/1.1 var(--g-font-sans);letter-spacing:0;text-transform:none;color:var(--g-ink)}

@media (max-width:860px){
  .g-head--column,.g-head--gloss{grid-template-columns:1fr}
  .g-head--column .g-head__aside{border-left:0;padding-left:0;border-top:1px solid var(--g-rule);padding-top:var(--g-s4)}
  .g-head--slate .g-slate{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-head--slate .g-slate>*:nth-child(3){border-left:0;border-top:1px solid var(--g-rule-strong)}
  .g-head--slate .g-slate>*:nth-child(4){border-top:1px solid var(--g-rule-strong)}
}

/* ---------- scale switch: one control, three densities ---------- */
.g-scale-switch{display:inline-flex;border:1px solid var(--g-ink);background:var(--g-surface)}
.g-scale-switch button{appearance:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;margin:0;border:0;border-left:1px solid var(--g-rule-strong);border-radius:0;background:transparent;color:var(--g-ink);font:600 var(--g-t-label)/1 var(--g-font-mono);letter-spacing:var(--g-track-label);text-transform:uppercase;cursor:pointer;transition:background var(--g-dur-fast) var(--g-ease),color var(--g-dur-fast) var(--g-ease)}
.g-scale-switch button:first-child{border-left:0}
.g-scale-switch .g-glyph{font-size:1.25rem}
.g-scale-switch button[data-scale="view"] .g-glyph{color:var(--g-view-text)}
.g-scale-switch button[data-scale="frame"] .g-glyph{color:var(--g-frame-text)}
.g-scale-switch button[data-scale="observe"] .g-glyph{color:var(--g-observe-text)}
.g-scale-switch button[aria-pressed="true"]{background:var(--g-ink);color:var(--g-bg)}
.g-scale-switch button[aria-pressed="true"] .g-glyph{color:var(--g-bg)}
.g-scale-switch button:focus-visible{outline:2px solid var(--g-scale-text);outline-offset:-4px}
@media (max-width:480px){.g-scale-switch button{padding:0 12px}.g-scale-switch button span.g-word{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}

/* list densities (applied by assets/galok-plate.js through data-density on a [data-g-list]) */
[data-g-list]{list-style:none;margin:0;padding:0;display:grid}
[data-g-list]>*{min-width:0}
[data-g-list][data-density="view"]{grid-template-columns:1fr;border-top:1px solid var(--g-ink)}
[data-g-list][data-density="view"]>*{display:grid;grid-template-columns:3.2rem minmax(0,1fr) auto;gap:var(--g-s4);align-items:baseline;padding:10px 0;border-bottom:1px solid var(--g-rule)}
[data-g-list][data-density="view"] [data-g-detail],[data-g-list][data-density="view"] [data-g-media]{display:none}
[data-g-list][data-density="frame"]{grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:var(--g-s6) var(--g-s5)}
[data-g-list][data-density="frame"]>*{display:grid;gap:var(--g-s3);align-content:start}
[data-g-list][data-density="frame"] [data-g-detail]{display:none}
[data-g-list][data-density="observe"]{grid-template-columns:1fr;gap:0;border-top:1px solid var(--g-ink)}
[data-g-list][data-density="observe"]>*{display:grid;grid-template-columns:minmax(0,16rem) minmax(0,1fr);gap:var(--g-s5);padding:var(--g-s5) 0;border-bottom:1px solid var(--g-rule)}
@media (max-width:700px){[data-g-list][data-density="observe"]>*{grid-template-columns:1fr;gap:var(--g-s3)}}

/* a collection (no lens claimed) is marked with ink, not a scale colour */
.g-plate[data-scale="index"]::before{background:var(--g-ink)}

/* the page plate: one strip at the head of a page, saying what it is before it says anything else */
.g-pagebar{box-sizing:border-box;width:100%;padding:var(--g-s4) var(--g-gutter,16px) var(--g-s3);border-bottom:1px solid var(--g-rule);background:transparent}
.g-pagebar .g-plate{margin:0 auto;max-width:1360px}
@media (max-width:640px){.g-pagebar .g-plate{flex-direction:column}.g-pagebar .g-plate>*{min-height:0;margin:0;padding:6px 0;border-left:0}.g-pagebar .g-plate>*+*{border-top:1px solid var(--g-rule)}}
.g-scale-switch button .g-word{color:inherit}

/* the shared head: collection and section front pages set their first <h1> at one scale (audit §3.3: nine hand-built heroes, 98–164px, five trackings) */
body:not([data-foundations]) .g-pagebar[data-hero] + main h1{
  font-size:clamp(3.4rem,9.1vw,8.1rem) !important;
  letter-spacing:-.055em !important;
  line-height:.9 !important;
  font-weight:600 !important;
}