/* ============================================================
   GALOK 2.0 R1.3 — home skin over launch.css (the D-020 engine).
   launch.css stays verbatim as the interaction/motion baseline;
   this layer re-expresses it in the 2.0 design language:
   Google Sans Flex (real slnt axis) · warm paper #F5F4F0 · ink #111315
   · GALOK blue #7898B0 (non-text) / #46617A (text-level) · night #101419.
   The fluorescent signal #ffd60a is retired; its roles are split:
   emphasis = blue wash under ink text (light) / pale-blue text (dark),
   hover/active = ink inversions or blue tints, never blue bg + white text
   (that pair is ~2.8:1 and fails WCAG — see R1.1/R1.2 TEST-REPORT §contrast).
   ============================================================ */

:root{
  --lc-sans:"Google Sans Flex","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --lc-bg:#f5f4f0;
  --lc-ink:#111315;
  --lc-muted:#5f676e;          /* 5.2:1 on paper — AA for all small text */
  --lc-line:#d8d9d6;
  --lc-line-strong:#c3c6c0;
  --lc-ghost:#83867f;          /* decorative giant numerals only — ≥3:1 large-graphics threshold */
  --lc-surface:#faf9f6;
  --lc-signal:#7898b0;         /* non-text accent: dots, rules, underlines, film edge */
  --lc-on-signal:#101419;
  --lc-accent-ink:#46617a;     /* text-level accent 5.9:1 */
  --lc-em-bg:linear-gradient(transparent 62%,rgba(120,152,176,.34) 62% 94%,transparent 94%);
  --lc-em-ink:#111315;
  --lc-inv-bg:#111315;
  --lc-inv-ink:#f5f4f0;
  --lc-focus:#46617a;
  color-scheme:light;
}
html[data-theme="dark"]{
  --lc-bg:#101419;
  --lc-ink:#f3f4f2;
  --lc-muted:#a4b4c0;          /* 8.7:1 on night */
  --lc-line:#2a323b;
  --lc-line-strong:#39444d;
  --lc-ghost:#6a7683;
  --lc-surface:#1d252d;
  --lc-signal:#a5bfcf;
  --lc-accent-ink:#a5bfcf;
  --lc-em-bg:none;
  --lc-em-ink:#a5bfcf;
  --lc-inv-bg:#f3f4f2;
  --lc-inv-ink:#101419;
  --lc-focus:#a5bfcf;
  color-scheme:dark;
}

/* ---------- base ---------- */
body{font:400 16px/1.55 var(--lc-sans)}
::selection{background:#46617a;color:#fff}
html[data-theme="dark"] ::selection{background:#a5bfcf;color:#101419}
:focus-visible{outline:2px solid var(--lc-focus);outline-offset:2px}

/* ---------- header (2.0 site brand, launch tools) ---------- */
.site-head{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:16px;width:min(100%,var(--lc-max));margin-inline:auto;padding:14px var(--lc-pad);min-height:64px}
.site-brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;min-height:44px;color:var(--lc-ink)}
.site-brand__mark{font-size:24px;font-weight:700;letter-spacing:-.08em}
.site-brand__word{display:flex;flex-direction:column;font-size:12px;font-weight:700;letter-spacing:.18em;line-height:1}
.site-brand__sub{margin-top:4px;font-size:9px;font-weight:500;letter-spacing:.11em;color:var(--lc-muted)}
.site-tools{display:flex;align-items:center;gap:clamp(10px,2.4vw,24px)}
.site-study{font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--lc-muted);border:1px solid var(--lc-line-strong);border-radius:999px;padding:6px 10px;white-space:nowrap}
.lc-quiet{font-family:var(--lc-sans)}
html[data-theme="dark"] .site-study{border-color:var(--lc-line-strong)}

/* ---------- the question ---------- */
.lc-q{font-weight:650;letter-spacing:-.058em;caret-color:var(--lc-accent-ink)}
html[data-theme="light"] .lc-q{caret-color:var(--lc-ink)}
.lc-eyebrow,.lc-kicker,.lc-label,.lc-steps,.lc-srcbtn,.lc-scope,.lc-film__count,.lc-film__cap em{font-family:var(--lc-sans)}  /* 2.0: no second mono family */
.lc-eyebrow,.lc-kicker{color:var(--lc-accent-ink);font-weight:600}
.lc-label{color:var(--lc-muted);font-weight:600}
.lc-h2{font-weight:600;letter-spacing:-.05em}
.lc-send:hover{background:var(--lc-ink);color:var(--lc-bg);border-color:var(--lc-ink)}
.lc-send:active{transform:scale(.92)}
.lc-form:focus-within::after{background:var(--lc-signal)}

/* listening */
.lc-listen b{color:var(--lc-ink)}
.lc-listen__ear::before{background:var(--lc-signal)}
.lc-listen__hit{text-decoration-color:var(--lc-signal)}
.lc-listen__hit:hover{background:rgba(120,152,176,.18);color:var(--lc-ink);text-decoration-color:transparent}
html[data-theme="dark"] .lc-listen__hit:hover{background:rgba(165,191,207,.16)}

/* steps */
.lc-steps li.is-done::before{content:"✓";color:var(--lc-accent-ink)}
.lc-bar::after{background:var(--lc-ink)}
html[data-theme="dark"] .lc-bar::after{background:var(--lc-signal)}
.lc-run.is-finished .lc-bar::after{background:var(--lc-line)}

/* the answer */
.lc-ans__title{font-weight:620;letter-spacing:-.058em}
.lc-ans__title em{font-style:oblique 8deg;font-weight:480;color:var(--lc-em-ink)}
.lc-ref{text-decoration-color:var(--lc-signal)}
.lc-ref:hover,.lc-ref[aria-expanded="true"]{background:rgba(120,152,176,.18);color:var(--lc-ink);text-decoration-color:transparent}
html[data-theme="dark"] .lc-ref:hover,html[data-theme="dark"] .lc-ref[aria-expanded="true"]{background:rgba(165,191,207,.16);color:var(--lc-ink)}
.lc-ans__src a{color:var(--lc-accent-ink)}
.lc-caret{--lc-caret:var(--lc-ink)}
html[data-theme="dark"] .lc-caret{--lc-caret:var(--lc-signal)}
.lc-srcbtn:hover{color:var(--lc-ink)}

/* the preview */
.lc-pv__fig{border-radius:8px;background:var(--lc-surface)}
.lc-pv__items a:hover{text-decoration-color:var(--lc-signal)}
.lc-open{border-radius:999px;background:var(--lc-inv-bg);color:var(--lc-inv-ink)}
.lc-open:hover{background:var(--lc-accent-ink);color:#fff}
html[data-theme="dark"] .lc-open:hover{background:var(--lc-accent-ink);color:#101419}
.lc-chip::before{content:"→ ";color:var(--lc-signal)}
.lc-chip:hover,.lc-chip:hover::before{color:var(--lc-ink)}

/* ---------- the person in the hero: quiet, top-right, never competing ---------- */
.lc-hero .lc-wrap{display:grid;grid-template-columns:minmax(0,1fr) clamp(200px,23vw,300px);column-gap:clamp(28px,4vw,72px);align-items:start}
.lc-hero .lc-wrap > *{grid-column:1}
.lc-hero .lc-wrap > .galok-figure{grid-column:2;grid-row:1;position:sticky;top:88px;margin:0;align-self:start;border:1px solid var(--lc-line);background:var(--lc-surface);padding:14px 14px 12px;max-width:100%;isolation:isolate}
.galok-figure{border:1px solid var(--lc-line);background:var(--lc-surface);padding:14px 14px 12px;max-width:100%;isolation:isolate}
.galok-figure img{width:100%;height:auto;mix-blend-mode:multiply;filter:contrast(1.03)}
.galok-figure figcaption{display:grid;gap:4px;margin-top:10px;font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--lc-muted);text-align:center;line-height:1.5}
.galok-figure figcaption span{font-weight:500;color:var(--lc-muted);opacity:.85}
/* V1 freeze fix: on the night theme the multiply-blended ink drawing otherwise vanishes
   against the dark plate — the figure keeps a paper plate in both themes (a mounted print
   on a dark wall); isolation confines the multiply blend to the plate itself. Alternative
   (inverted white-on-dark sketch) recorded in OPEN-ISSUES for Owner review. */
html[data-theme="dark"] .lc-hero .lc-wrap > .galok-figure,html[data-theme="dark"] .galok-figure{background:#f5f4f0;border-color:#c9ccc4}  /* (0,4,0)/(0,2,1) — must out-rank the sticky base rule (0,3,0) */
html[data-theme="dark"] .galok-figure figcaption{color:#5f676e}
html[data-theme="dark"] .galok-figure figcaption span{color:#5f676e;opacity:1}
@media (max-width:1023px){
  .lc-hero .lc-wrap{display:block}
  .galok-figure{position:static;width:min(240px,64%);margin:34px 0 0}
}

/* ---------- sections ---------- */
.lc-h2{color:var(--lc-ink)}
.lc-tl__year{color:var(--lc-ghost)}
.lc-i__link:hover,.lc-tl__yearonly a:hover,.lc-tl__ongoing a:hover,.lc-sel__row:hover .lc-sel__t,.lc-arch a:hover b{text-decoration-color:var(--lc-signal)}
.lc-i:hover .lc-i__img img{transform:scale(1.04)}
.lc-i__img,.lc-sel__img,.lc-pv__fig{border-radius:8px}

/* the film strip: an object, dark in both themes (kept from production);
   its amber edge print is film-stock branding, deliberately not UI signal colour */
.lc-film__strip{background:#0c0d0f;border-radius:6px}
.lc-film__nav button{border-radius:999px}
.lc-film__nav button:hover{background:var(--lc-ink);border-color:var(--lc-ink);color:var(--lc-bg)}
html[data-theme="dark"] .lc-film__nav button:hover{background:var(--lc-signal);border-color:var(--lc-signal);color:#101419}
.lc-film__nav button:disabled{opacity:.35}

/* ---------- the capsule dock ---------- */
.lc-dock{background:var(--lc-bg);border-radius:999px}
.lc-dock a{border-radius:999px}
.lc-dock a[aria-current="location"] b{color:var(--lc-signal)}
html[data-theme="dark"] .lc-dock a[aria-current="location"] b{color:#46617a}  /* active pill is light in dark theme: dark accent keeps ≥4.5:1 */

/* ---------- footer ---------- */
.site-foot{display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;width:min(100%,var(--lc-max));margin-inline:auto;padding:26px var(--lc-pad) 96px;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--lc-muted)}
@media (max-width:640px){.site-foot{flex-direction:column;gap:8px;padding-bottom:120px}}

/* ---------- a11y fixes carried from R1.1 (44px control targets; see TEST-REPORT) ---------- */
.lc-quiet{padding-inline:6px}
.lc-hero.is-answered .lc-send{width:44px;height:44px}      /* production shrinks to 36px when answered — kept ≥44 per WCAG 2.5.8 */
.lc-tl__yearonly a{min-height:44px}
.lc-end a{padding-inline:6px}
.lc-tl__ongoing a{padding-inline:6px}

/* ---------- unified site navigation (D-034): same six destinations, targets and
   modal-menu behaviour as about/work; scene-scoped tokens (paper/night) ---------- */
.site-nav{display:flex;gap:26px;align-items:center;font-size:12px;font-weight:600}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;padding:4px 2px;color:var(--lc-ink);text-decoration:none}
.site-nav a .ext{font-size:10px;margin-left:3px;opacity:.8}
.site-nav a:hover,.site-nav a[aria-current]{text-decoration:underline;text-underline-offset:8px}
.site-nav .site-nav__secondary{display:none}  /* 0,2,0 — beats .site-nav a (V1 freeze fix: desktop showed a second Index) */
.nav-toggle{display:none;border:1px solid var(--lc-line-strong);background:transparent;color:var(--lc-ink);padding:10px 14px;min-width:96px;min-height:44px;white-space:nowrap;align-items:center;gap:8px;justify-content:center;cursor:pointer}
.nav-toggle:hover{border-color:var(--lc-muted)}
@media (max-width:800px){
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--lc-surface);padding:18px 23px 26px;border-bottom:1px solid var(--lc-line);flex-direction:column;gap:4px;align-items:stretch;z-index:30}
  .site-head[data-open="true"] .site-nav{display:flex}
  .site-nav a{padding:12px 2px;font-size:15px}
  .site-nav .site-nav__secondary{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;padding-top:10px;border-top:1px solid var(--lc-line);color:var(--lc-muted)}
  .nav-toggle{display:inline-flex}
  .site-index{display:none}
}

/* ---------- D-032 Selected showcases: four rooms, four identities ---------- */
.showcase{margin-top:clamp(40px,7vw,88px);border-top:1px solid var(--lc-line);padding-top:clamp(28px,4vw,44px);display:grid;gap:clamp(16px,2.6vw,32px)}
.showcase:first-of-type{border-top:0;padding-top:0;margin-top:clamp(24px,4vw,48px)}
.showcase__body{min-width:0}
.showcase__body p{margin:0}
.showcase__no{margin-bottom:14px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--lc-accent-ink)}
.showcase__title{margin:0 0 14px;font-weight:620;letter-spacing:-.04em;font-size:clamp(2rem,4.6vw,3.6rem);line-height:1;color:var(--lc-ink)}
.showcase__desc{margin-top:14px;max-width:34em;color:var(--lc-muted);font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.6}
.showcase__meta{margin-top:10px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--lc-muted)}
.showcase__act{margin-top:18px}
.showcase__open{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--lc-ink);text-decoration:none;border-bottom:1px solid var(--lc-signal);padding-bottom:6px}
.showcase__open:hover{background:rgba(120,152,176,.18)}
.showcase__open .showcase__open-arrow, .showcase__open span[aria-hidden]{transition:transform 150ms var(--lc-ease)}
.showcase__open:hover span[aria-hidden]{transform:translate(2px,-2px)}

/* 01 studio — IVDNI: a dark projection panel embedded in the paper page */
.showcase--studio{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;background:#101419;border:0;border-radius:8px;padding:clamp(20px,3vw,40px)}
.showcase--studio .showcase__no{color:#a5bfcf}
.showcase--studio .showcase__title{color:#f3f4f2}
.showcase--studio .showcase__desc,.showcase--studio .showcase__meta{color:#a4b4c0}
.showcase--studio .chip--early{color:#a5bfcf}
.showcase--studio .showcase__open{color:#f3f4f2;border-bottom-color:#a5bfcf}
.showcase--studio .showcase__open:hover{background:rgba(165,191,207,.16)}
.showcase--studio .showcase__media img{width:100%;height:auto;border-radius:6px}

/* 02 field — Cities: light contact sheet of the seven real chapters */
.showcase--field .showcase__media--strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:8px;scrollbar-width:none;overscroll-behavior-x:contain}
.showcase--field .showcase__media--strip::-webkit-scrollbar{display:none}
.showcase__thumb{flex:none;width:clamp(150px,20vw,220px);scroll-snap-align:start;text-decoration:none;color:var(--lc-ink);min-height:44px}
.showcase__thumb img{aspect-ratio:3/2;object-fit:cover;width:100%;border-radius:6px;border:1px solid var(--lc-line-strong)}
.showcase__thumb span{display:block;margin-top:8px;font-weight:600;font-size:13px;letter-spacing:.02em}
.showcase__thumb:hover img{border-color:var(--lc-signal)}

/* 03 cinema — Cinematic Poetry: dark typographic room with a real prompt specimen */
.showcase--cinema{background:#101419;border:0;border-radius:8px;padding:clamp(20px,3vw,40px);grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.showcase--cinema .showcase__no{color:#a5bfcf}
.showcase--cinema .showcase__title{color:#f3f4f2}
.showcase--cinema .showcase__desc,.showcase--cinema .showcase__meta{color:#a4b4c0}
.showcase--cinema .chip--shipped{color:#7fb894}
.showcase--cinema .showcase__open{color:#f3f4f2;border-bottom-color:#a5bfcf}
.showcase--cinema .showcase__open:hover{background:rgba(165,191,207,.16)}
.showcase--cinema .showcase__media img{width:100%;height:auto;border-radius:6px}
.showcase__specimen{margin:16px 0 0;border-left:2px solid #a5bfcf;padding:6px 0 6px 18px}
.showcase__specimen p{margin:0;font-style:oblique 8deg;font-weight:480;font-size:clamp(1.3rem,2.4vw,1.9rem);letter-spacing:-.02em;color:#f3f4f2;line-height:1.25}
.showcase__specimen cite{display:block;margin-top:8px;font-style:normal;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#a4b4c0}

/* 04 press — Writing & Research: print ledger, no cards */
.showcase__press{list-style:none;margin:18px 0 0;padding:0;max-width:56em}
.showcase__press-row{display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:clamp(14px,2.4vw,28px);border-top:1px solid var(--lc-line);padding:20px 0}
.showcase__press-row time{align-self:start;text-align:center}
.showcase__press-row time b{display:block;font-weight:620;font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.05em;line-height:1;color:var(--lc-ink)}
.showcase__press-row time span{display:block;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--lc-muted);margin-top:2px}
.showcase__kind{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--lc-accent-ink);margin-bottom:6px}
.showcase__press-link{font-weight:600;font-size:clamp(1.2rem,2vw,1.55rem);letter-spacing:-.02em;color:var(--lc-ink);text-decoration:none}
.showcase__press-link:hover{text-decoration:underline;text-decoration-color:var(--lc-signal);text-decoration-thickness:2px;text-underline-offset:.2em}
.showcase__press-row p{margin:6px 0 0;color:var(--lc-muted);font-size:14px;line-height:1.55;max-width:38em}

@media (max-width:800px){
  .showcase--studio,.showcase--cinema{grid-template-columns:1fr;padding:clamp(16px,4vw,24px)}
  .showcase--field .showcase__media--strip{margin-inline:calc(-1 * clamp(20px,5vw,64px));padding-inline:clamp(20px,5vw,64px)}
}

/* small screens carried from launch.css; 2.0 additions */
@media (max-width:640px){
  .site-study{display:none}
  .lc-steps{font-size:11px;letter-spacing:.03em}
}
@media (max-width:360px){
  .site-brand__sub{display:none}
  .lc-dock a{font-size:13px}
}