/* wkisme.com — site styles v2
   All colours, fonts, sizes and spacing come from wk-tokens-v1.css, a byte-identical copy of
   skill/wkisme/references/tokens.css. Never define --wk-* here; change the skill tokens instead.
   Theme: <html data-wk-theme="gulf"> (default) or "nusantara". Mode: prefers-color-scheme.
   Brand rules enforced by tools/check_site.py: accent at most once per page (the hero highlight),
   display face only with --wk-display-word-spacing, no colours outside the tokens. */

/* Site layout values (not brand tokens) */
:root{--gutter:16px;--max:1080px}

/* Logo colours: tokens.json -> themes.<theme>.logo (light = on light bg, dark = on dark bg) */
:root{--mk-box:#1E1B16;--mk-bar:#FDFBF7;--mk-acc:#D99A1E}
:root[data-wk-theme="nusantara"]{--mk-box:#25336B;--mk-bar:#FFFFFF;--mk-acc:#E09A10}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--mk-box:#FDFBF7;--mk-bar:#1E1B16;--mk-acc:#D99A1E}
  :root[data-wk-theme="nusantara"]:not([data-theme="light"]){--mk-box:#FFFFFF;--mk-bar:#25336B;--mk-acc:#E09A10}
}
:root[data-theme="dark"]{--mk-box:#FDFBF7;--mk-bar:#1E1B16;--mk-acc:#D99A1E}
:root[data-wk-theme="nusantara"][data-theme="dark"]{--mk-box:#FFFFFF;--mk-bar:#25336B;--mk-acc:#E09A10}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;padding-inline:0;background:var(--wk-bg);color:var(--wk-text);font:400 var(--wk-fs-body)/var(--wk-lh-body) var(--wk-font-body);
  font-variant-numeric:lining-nums;text-rendering:optimizeLegibility}
/* Display face for h1/h2 (section titles) only, always with the theme word spacing. h3 and below use the body face. */
h1,h2{font-family:var(--wk-font-display);font-weight:var(--wk-display-weight);word-spacing:var(--wk-display-word-spacing);
  color:var(--wk-ink);margin:0;line-height:1.12;text-wrap:balance;font-feature-settings:"lnum" 1}
h3{font:600 18px/1.3 var(--wk-font-body);color:var(--wk-text);margin:0}
p{margin:0}
a{color:var(--wk-accent-text);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--wk-accent-text);outline-offset:3px;border-radius:4px}
img,svg{display:block;max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--gutter);top:-60px;z-index:10;background:var(--wk-ink);color:var(--wk-on-ink);
  padding:10px 14px;border-radius:6px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(var(--gutter),env(safe-area-inset-left));
  padding-right:max(var(--gutter),env(safe-area-inset-right))}

/* ---------- mark (inline SVG coloured by tokens) ---------- */
.mk-box{fill:var(--mk-box)} .mk-bar{fill:var(--mk-bar)} .mk-acc{fill:var(--mk-acc)}
.lock-text{fill:var(--wk-ink);font-family:var(--wk-font-display);font-weight:var(--wk-display-weight);word-spacing:var(--wk-display-word-spacing);font-feature-settings:"lnum" 1}
.lockup{height:32px;width:auto}
.lockup.nus{display:none}
:root[data-wk-theme="nusantara"] .lockup.gulf{display:none}
:root[data-wk-theme="nusantara"] .lockup.nus{display:block}

/* Keepie-uppie (same keyframes as assets/final/wkisme-keepie-uppie-*.svg), runs only on .ku */
.b{transform-box:fill-box;transform-origin:50% 100%}
.dot{opacity:1}
@keyframes ku-kick{0%{transform:translate(-78px,-23px);opacity:0;animation-timing-function:ease-in}6%{transform:translate(-78px,-9px);opacity:1;animation-timing-function:ease-out}11.5%{transform:translate(-71.5px,-21px);animation-timing-function:ease-in}17%{transform:translate(-65px,19px);animation-timing-function:ease-out}22.5%{transform:translate(-58.5px,7px);animation-timing-function:ease-in}28%{transform:translate(-52px,43px);animation-timing-function:ease-out}33.5%{transform:translate(-45.5px,-3px);animation-timing-function:ease-in}39%{transform:translate(-39px,9px);animation-timing-function:ease-out}44.5%{transform:translate(-32.5px,-3px);animation-timing-function:ease-in}50%{transform:translate(-26px,43px);animation-timing-function:ease-out}55.5%{transform:translate(-19.5px,7px);animation-timing-function:ease-in}61%{transform:translate(-13px,19px);animation-timing-function:ease-out}66.5%{transform:translate(-6.5px,-7px);animation-timing-function:ease-in}72%{transform:translate(0,5px);animation-timing-function:ease-out}78%{transform:translate(0,-3px);animation-timing-function:ease-in}84%{transform:translate(0,5px);animation-timing-function:ease-out}90%{transform:translate(0,0);opacity:1;animation-timing-function:ease-in-out}96%,100%{transform:translate(0,0);opacity:0;animation-timing-function:linear}}
@keyframes ku-h0{0%,3%,11%,100%{transform:scaleY(1)}6%{transform:scaleY(.86)}}
@keyframes ku-h1{0%,14%,22%,100%{transform:scaleY(1)}17%{transform:scaleY(.86)}}
@keyframes ku-h2{0%,25%,33%,100%{transform:scaleY(1)}28%{transform:scaleY(.86)}}
@keyframes ku-h3{0%,36%,44%,100%{transform:scaleY(1)}39%{transform:scaleY(.86)}}
@keyframes ku-h4{0%,47%,55%,100%{transform:scaleY(1)}50%{transform:scaleY(.86)}}
@keyframes ku-h5{0%,58%,66%,100%{transform:scaleY(1)}61%{transform:scaleY(.86)}}
@keyframes ku-h6{0%,69%,77%,81%,87%,100%{transform:scaleY(1)}72%,84%{transform:scaleY(.86)}}
.ku .dot{animation:ku-kick 2.8s infinite}
.ku .b0{animation:ku-h0 2.8s ease-in-out infinite}.ku .b1{animation:ku-h1 2.8s ease-in-out infinite}
.ku .b2{animation:ku-h2 2.8s ease-in-out infinite}.ku .b3{animation:ku-h3 2.8s ease-in-out infinite}
.ku .b4{animation:ku-h4 2.8s ease-in-out infinite}.ku .b5{animation:ku-h5 2.8s ease-in-out infinite}
.ku .b6{animation:ku-h6 2.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.ku *{animation:none!important;opacity:1!important}}

/* ---------- header ---------- */
.site-head{border-bottom:1px solid var(--wk-line)}
.head{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand theme" "nav nav";
  align-items:center;gap:10px 16px;padding-block:14px 4px}
.brand-link{grid-area:brand;display:inline-flex;justify-self:start;border-radius:6px}
.nav{grid-area:nav;display:flex;gap:2px 18px;flex-wrap:wrap;font-size:15px}
.nav a{color:var(--wk-text);text-decoration:none;padding:8px 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--wk-ink)}
.ctl{grid-area:theme;display:flex;align-items:center;gap:8px}
/* Mode switch: system -> light -> dark, the same control as the brand guideline */
.mode{width:38px;height:38px;flex:none;display:grid;place-items:center;border:1px solid var(--wk-line);border-radius:999px;
  background:var(--wk-surface);color:var(--wk-ink);cursor:pointer;padding:0}
.mode:hover{border-color:var(--wk-ink)}
.mode svg{width:19px;height:19px}
.mode svg [data-i]{display:none}
.mode[data-mode="system"] [data-i="system"],.mode[data-mode="light"] [data-i="light"],.mode[data-mode="dark"] [data-i="dark"]{display:inline}
@media (max-width:400px){.theme button{padding:8px 9px}.mode{width:36px;height:36px}.lockup{height:26px}}
.theme{display:inline-flex;border:1px solid var(--wk-line);border-radius:999px;padding:3px;background:var(--wk-surface)}
.theme button{font:500 13px/1 var(--wk-font-body);color:var(--wk-muted);background:none;border:0;border-radius:999px;
  padding:8px 12px;min-height:36px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.theme button[aria-pressed="true"]{background:var(--wk-ink);color:var(--wk-on-ink)}
.theme .sw{width:10px;height:10px;border-radius:3px;flex:none}
.theme .sw.g{background:#D99A1E}.theme .sw.n{background:#25336B;box-shadow:0 0 0 1px #9AA8E0}
@media (min-width:820px){
  .head{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"brand nav theme";padding-block:18px}
  .nav{justify-self:end;gap:4px 22px}
}

/* ---------- sections ---------- */
main section{padding-block:56px;border-top:1px solid var(--wk-line)}
main section.hero{border-top:0;padding-block:40px 56px}
.eyebrow{display:flex;align-items:center;gap:10px;font:500 var(--wk-fs-caption)/1 var(--wk-font-mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--wk-muted);margin-bottom:16px}
.eyebrow .n{color:var(--wk-ink)}
.eyebrow::before{content:"";width:6px;height:14px;border-radius:3px;background:var(--wk-ink);flex:none}
h2{font-size:clamp(28px,6vw,40px);max-width:22ch}
.lede{margin-top:14px;max-width:60ch;color:var(--wk-muted);font-size:17px}
.grid{display:grid;gap:12px;margin-top:28px}
@media (min-width:640px){.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:640px) and (max-width:899px){.grid.c3,.grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{background:var(--wk-surface);border:1px solid var(--wk-line);border-radius:var(--wk-radius);padding:20px;min-width:0;
  display:flex;flex-direction:column;gap:8px}
.card p{color:var(--wk-text)}
.card .k{font:500 12px/1.2 var(--wk-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--wk-muted)}

/* placeholder chips for [CONFIRM] content */
.tbd{display:inline-block;font:500 .82em/1.3 var(--wk-font-mono);color:var(--wk-muted);border:1px dashed var(--wk-muted);
  border-radius:4px;padding:1px 6px;overflow-wrap:anywhere}

/* hero. The highlight under one word is the page's single accent use. */
.hero-grid{display:grid;gap:32px;align-items:center}
.hero h1{font-size:clamp(36px,9vw,64px);letter-spacing:-.005em;max-width:16ch}
.hero h1 .hl{background:linear-gradient(transparent 78%,var(--wk-accent) 78%,var(--wk-accent) 92%,transparent 92%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero .lede{font-size:18px}
.meta{margin-top:18px;font:500 13px/1.6 var(--wk-font-mono);color:var(--wk-muted)}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 18px;border-radius:6px;
  font:600 15px/1 var(--wk-font-body);text-decoration:none;border:1px solid var(--wk-ink)}
.btn.primary{background:var(--wk-ink);color:var(--wk-on-ink)}
.btn.ghost{color:var(--wk-text);border-color:var(--wk-line);background:var(--wk-surface)}
.btn.ghost:hover{border-color:var(--wk-text)}
.kick{justify-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:none;border:0;padding:0;
  cursor:pointer;color:var(--wk-muted);font:500 12.5px/1.3 var(--wk-font-mono);text-align:left}
.kick svg{width:132px;height:132px;transition:transform .2s ease}
.kick:hover svg{transform:translateY(-2px)}
@media (min-width:760px){
  .hero-grid{grid-template-columns:minmax(0,1fr) auto;gap:56px}
  main section.hero{padding-block:88px 96px}
  .kick{justify-self:end;align-items:center;text-align:center}
  .kick svg{width:220px;height:220px}
}
@media (prefers-reduced-motion:reduce){.kick .hint-motion{display:none}}
.kick .hint-still{display:none}
@media (prefers-reduced-motion:reduce){.kick .hint-still{display:inline}}

/* name story */
.name-row{display:grid;gap:12px;margin-top:28px}
.name-row .card{gap:12px}
.name-row .big{font:var(--wk-display-weight) 34px/1 var(--wk-font-display);word-spacing:var(--wk-display-word-spacing);color:var(--wk-ink);align-self:flex-start;font-feature-settings:"lnum" 1}
.name-row .big.seven{position:relative;padding-bottom:8px}
.name-row .big.seven::after{content:"";position:absolute;left:0;bottom:0;width:1.6ch;height:4px;border-radius:2px;background:var(--wk-ink)}
@media (min-width:900px){.name-row{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* stack */
.stack{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding:0;list-style:none}
.stack li{font:500 13.5px/1 var(--wk-font-mono);padding:9px 12px;border-radius:6px;background:var(--wk-tint);color:var(--wk-text)}
.stack li small{color:var(--wk-muted);font-size:12px}

/* work empty state */
.empty{display:flex;gap:20px;align-items:center;background:var(--wk-tint);border-radius:var(--wk-radius);padding:20px;margin-top:28px}
.empty svg{width:64px;height:64px;flex:none}
.empty b{font-family:var(--wk-font-display);font-weight:var(--wk-display-weight);word-spacing:var(--wk-display-word-spacing);font-size:20px;color:var(--wk-ink);display:block;margin-bottom:4px}
.card.ph{background:transparent;border-style:dashed}
.card.ph dl{margin:4px 0 0;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:14px}
.card.ph dt{font:500 12px/1.6 var(--wk-font-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--wk-muted)}
.card.ph dd{margin:0;color:var(--wk-muted)}

/* now */
.now{margin:24px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;max-width:60ch}
.now li{display:flex;gap:12px;align-items:baseline}
.now li::before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:var(--wk-ink);transform:translateY(-1px)}

/* contact */
.contact-list{margin:28px 0 0;padding:0;list-style:none;display:grid;gap:10px;max-width:560px}
.contact-list li{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 16px;
  border:1px solid var(--wk-line);border-radius:var(--wk-radius);background:var(--wk-surface);flex-wrap:wrap}
.contact-list .k{font:500 12.5px/1 var(--wk-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--wk-muted)}

/* footer */
.site-foot{border-top:1px solid var(--wk-line);padding-block:28px 40px;color:var(--wk-muted);font-size:14px}
.foot-row{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.foot-row .who{display:flex;align-items:center;gap:10px}
.foot-row svg{width:28px;height:28px}

/* 404 */
.oops{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;padding-block:56px}
.oops svg{width:112px;height:112px}
.oops h1{font-size:clamp(34px,8vw,52px)}
.oops p{color:var(--wk-muted);max-width:40ch}