/* GALOK Design · section sheet on the unified foundation (with assets/galok/archive.css).
   The page documents the foundation it is built on: swatches paint with the tokens themselves and design.js reads
   their live values, so the page shows whatever the system really is, in whichever theme is on. Every colour is a token. */

@font-face{font-family:"Galok Seal";src:url("/assets/fonts/galok-glyph-display.woff2") format("woff2");font-display:swap}

html[data-g] .design-section{padding-block:clamp(64px,9vw,128px);border-top:1px solid var(--g-rule)}
html[data-g] .design-section .archive-section-head p{color:var(--g-muted)}

/* ---------- 01 philosophy ---------- */
html[data-g] .design-laws{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:clamp(36px,5vw,64px);border-top:1px solid var(--g-ink)}
html[data-g] .design-law{padding-top:22px}
html[data-g] .design-law b{display:block;margin-bottom:10px;font:560 clamp(1.2rem,1.7vw,1.5rem)/1.15 var(--g-sans);letter-spacing:-.025em}
html[data-g] .design-law p{margin:0;color:var(--g-ink-2);line-height:1.6}
html[data-g] .design-lenses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,20px);margin-top:clamp(40px,5vw,72px)}
html[data-g] .design-lens{position:relative;display:grid;align-content:start;gap:12px;padding:clamp(22px,3vw,32px);border:1px solid var(--g-rule);background:var(--g-surface);transition:transform .3s var(--g-ease),border-color .2s}
html[data-g] .design-lens:hover{transform:translateY(-2px);border-color:var(--g-rule-strong)}
html[data-g] .design-lens-mark{font:400 clamp(2.6rem,4vw,3.4rem)/1 "Galok Seal",var(--g-serif)}
html[data-g] .design-lens-mark.glyph-sight{color:var(--g-view-text)}
html[data-g] .design-lens-mark.glyph-frame{color:var(--g-frame-text)}
html[data-g] .design-lens-mark.glyph-observe{color:var(--g-observe-text)}
html[data-g] .design-lens h3{margin:6px 0 0;font:560 1.6rem/1 var(--g-sans);letter-spacing:-.035em}
html[data-g] .design-lens p{margin:0;color:var(--g-ink-2);line-height:1.6}
html[data-g] .design-lens small{color:var(--g-muted);font:500 11px/1.4 var(--g-mono);letter-spacing:.06em}

/* ---------- 02 palette ---------- */
html[data-g] .ds-theme{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:clamp(32px,4vw,48px)}
html[data-g] .ds-theme__label{font:500 11px/1 var(--g-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--g-muted)}
html[data-g] .ds-theme__note{color:var(--g-muted);font-size:13px}
html[data-g] .ds-pills{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--g-rule-strong);border-radius:999px}
html[data-g] .ds-pills button{min-height:36px;min-width:44px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--g-muted);font:500 13px/1 var(--g-sans);cursor:pointer;transition:background .25s var(--g-ease),color .2s}
html[data-g] .ds-pills button:hover{color:var(--g-ink)}
html[data-g] .ds-pills button[aria-pressed="true"]{background:var(--g-inv-bg);color:var(--g-inv-ink)}
@media (pointer:coarse){html[data-g] .ds-pills button{min-height:44px}}

html[data-g] .ds-groups{display:grid;gap:clamp(28px,4vw,44px);margin-top:clamp(28px,4vw,44px)}
html[data-g] .ds-group__label{display:flex;align-items:baseline;gap:12px;margin:0 0 14px;font:500 11px/1.3 var(--g-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--g-muted)}
html[data-g] .ds-group__label b{color:var(--g-ink);font-weight:600}
html[data-g] .ds-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));border-top:1px solid var(--g-rule);border-left:1px solid var(--g-rule)}
html[data-g] .ds-swatch{position:relative;display:grid;grid-template-rows:auto auto auto 1fr auto;gap:4px;min-height:200px;padding:14px 14px 16px;border:0;border-right:1px solid var(--g-rule);border-bottom:1px solid var(--g-rule);background:transparent;color:var(--g-ink);font:inherit;text-align:left;cursor:pointer;transition:background .2s}
html[data-g] .ds-swatch:hover{background:var(--g-surface)}
html[data-g] .ds-swatch__chip{display:block;height:72px;margin-bottom:10px;background:var(--sw);box-shadow:inset 0 0 0 1px var(--g-rule-strong);transition:background .4s var(--g-ease)}
html[data-g] .ds-swatch__name{font:560 15px/1.2 var(--g-sans);letter-spacing:-.01em}
html[data-g] .ds-swatch code{color:var(--g-muted);font:500 11px/1.3 var(--g-mono)}
html[data-g] .ds-swatch small{color:var(--g-muted);font-size:12.5px;line-height:1.4}
html[data-g] .ds-swatch__val{display:flex;justify-content:space-between;gap:8px;margin-top:8px;color:var(--g-ink-2);font:500 11.5px/1.3 var(--g-mono)}
html[data-g] .ds-swatch__val:empty{display:none}
html[data-g] .ds-swatch.is-copied .ds-swatch__val::after{content:"copied";color:var(--g-ink)}
html[data-g] .ds-swatch.is-copied .ds-swatch__val b{display:none}
html[data-g] .ds-note{margin-top:22px;color:var(--g-muted);font-size:14px}

/* ---------- 03 type ---------- */
html[data-g] .ds-typestack{margin-top:clamp(32px,4vw,48px);border-top:1px solid var(--g-ink)}
html[data-g] .ds-type-row{display:grid;grid-template-columns:3rem minmax(0,15rem) minmax(0,1fr);gap:clamp(16px,3vw,40px);align-items:center;padding:clamp(22px,3vw,32px) 0;border-bottom:1px solid var(--g-rule)}
html[data-g] .ds-type-num{font:500 12px/1 var(--g-mono);color:var(--g-muted)}
html[data-g] .ds-type-spec{display:grid;gap:6px}
html[data-g] .ds-type-spec b{font:560 17px/1.2 var(--g-sans)}
html[data-g] .ds-type-spec small{color:var(--g-muted);font-size:13px;line-height:1.45}
html[data-g] .ds-type-sample{margin:0;min-width:0;font:560 clamp(2rem,4.6vw,4.2rem)/1 var(--g-sans);letter-spacing:-.045em;overflow-wrap:anywhere}
html[data-g] .ds-type-sample--mono{font:500 clamp(1rem,1.9vw,1.5rem)/1.3 var(--g-mono);letter-spacing:.02em}
html[data-g] .ds-type-sample--serif{font:400 clamp(2rem,4.6vw,4.2rem)/1.05 var(--g-serif);letter-spacing:-.02em}
html[data-g] .ds-type-sample--serif em{font-style:italic}
html[data-g] .ds-type-sample--seal{font:400 clamp(2.4rem,5vw,4.6rem)/1 "Galok Seal",var(--g-serif);letter-spacing:.12em}
html[data-g] :is(.ds-type-sample--seal,.ds-chip) .is-view{color:var(--g-view-text)}
html[data-g] :is(.ds-type-sample--seal,.ds-chip) .is-frame{color:var(--g-frame-text)}
html[data-g] :is(.ds-type-sample--seal,.ds-chip) .is-observe{color:var(--g-observe-text)}
html[data-g] .ds-weight{display:grid;gap:6px;margin-top:10px;color:var(--g-muted);font:500 11px/1 var(--g-mono);letter-spacing:.06em;text-transform:uppercase}
html[data-g] .ds-weight output{color:var(--g-ink)}
html[data-g] .ds-weight input{width:100%;max-width:220px;min-height:28px;accent-color:var(--g-ink)}

/* ---------- 04 grid & rules ---------- */
html[data-g] .design-rules{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(32px,4vw,48px)}
html[data-g] .design-rule{padding-top:16px;border-top:1px solid var(--g-ink)}
html[data-g] .design-rule b{display:block;margin-bottom:10px;font:560 1.1rem/1.15 var(--g-sans);letter-spacing:-.02em}
html[data-g] .design-rule p{margin:0;color:var(--g-ink-2);font-size:14.5px;line-height:1.55}
html[data-g] .ds-live{margin-top:clamp(36px,5vw,56px);padding:clamp(20px,3vw,28px);border:1px solid var(--g-rule);background:var(--g-surface)}
html[data-g] .ds-live__row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
html[data-g] .ds-chip{display:inline-flex;align-items:center;gap:8px;color:var(--g-ink-2);font:500 13px/1 var(--g-sans)}
html[data-g] .ds-chip i{width:10px;height:10px;border-radius:50%;background:currentColor}
html[data-g] .ds-chip i.is-view{color:var(--g-view)}
html[data-g] .ds-chip i.is-frame{color:var(--g-frame)}
html[data-g] .ds-chip i.is-observe{color:var(--g-observe)}

/* ---------- 05 motion ---------- */
html[data-g] .design-motion{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(32px,4vw,48px)}
html[data-g] .design-motion-rule{padding-top:16px;border-top:1px solid var(--g-ink)}
html[data-g] .design-motion-rule b{display:block;margin-bottom:10px;font:560 1.1rem/1.15 var(--g-sans);letter-spacing:-.02em}
html[data-g] .design-motion-rule p{margin:0;color:var(--g-ink-2);font-size:14.5px;line-height:1.55}
html[data-g] .design-motion-rule code{font:500 .86em var(--g-mono);color:var(--g-ink)}
html[data-g] .ds-lanes{display:grid;gap:10px;margin-top:clamp(28px,4vw,44px);padding:clamp(20px,3vw,28px);border:1px solid var(--g-rule)}
html[data-g] .ds-lane{position:relative;display:grid;grid-template-columns:4.5rem 1fr;align-items:center;height:36px}
html[data-g] .ds-lane span{font:500 11px/1 var(--g-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--g-muted)}
html[data-g] .ds-lane::after{content:"";grid-column:2;grid-row:1;height:1px;background:var(--g-rule-strong)}
html[data-g] .ds-lane i{grid-column:2;grid-row:1;z-index:1;width:18px;height:18px;border-radius:50%;background:var(--g-ink);transform:translateX(0)}
html[data-g] .ds-lane i[data-lane="spring"]{background:var(--g-signal);box-shadow:0 0 0 1px var(--g-rule-strong)}
html[data-g] .ds-lanes.is-playing i[data-lane="ease"]{transition:transform .9s var(--g-ease)}
html[data-g] .ds-lanes.is-playing i[data-lane="spring"]{transition:transform .9s var(--g-spring)}
html[data-g] .ds-lanes [data-lanes-play]{justify-self:start;margin-top:8px}

/* ---------- 06 assets ---------- */
html[data-g] .design-assets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,56px);margin:clamp(32px,4vw,48px) 0 0}
html[data-g] .design-assets div{display:grid;grid-template-columns:8.5rem 1fr;gap:14px;padding:14px 0;border-top:1px solid var(--g-rule)}
html[data-g] .design-assets dt{font:500 11px/1.6 var(--g-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--g-muted)}
html[data-g] .design-assets dd{margin:0;color:var(--g-ink-2);font-size:14.5px;line-height:1.55;overflow-wrap:anywhere}
html[data-g] .design-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,20px);margin-top:clamp(36px,5vw,56px)}
html[data-g] .design-gallery figure{margin:0;aspect-ratio:3/4;background:var(--g-surface);overflow:hidden}
html[data-g] .design-gallery img{width:100%;height:100%;object-fit:cover}

/* ---------- smaller screens ---------- */
@media (max-width:1100px){
  html[data-g] .design-rules{grid-template-columns:repeat(3,minmax(0,1fr))}
  html[data-g] .design-motion{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  html[data-g] .design-laws,html[data-g] .design-lenses{grid-template-columns:1fr}
  html[data-g] .design-rules{grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-g] .design-assets{grid-template-columns:1fr}
  html[data-g] .ds-type-row{grid-template-columns:2rem minmax(0,1fr)}
  html[data-g] .ds-type-sample{grid-column:1/-1}
}
@media (max-width:560px){
  html[data-g] .design-rules,html[data-g] .design-motion{grid-template-columns:1fr}
  html[data-g] .design-gallery{grid-template-columns:1fr 1fr}
  html[data-g] .design-assets div{grid-template-columns:1fr;gap:4px}
  html[data-g] .ds-swatches{grid-template-columns:1fr 1fr}
  html[data-g] .ds-swatch{min-height:180px}
}
@media (prefers-reduced-motion:reduce){html[data-g] .ds-lanes i,html[data-g] .design-lens,html[data-g] .ds-swatch__chip{transition:none}}