/*
Theme Name: Keyzy
Theme URI: https://keyzy.shop/
Description: Reference theme for keyzy.shop. Sober editorial layout for dense tax and legal content, built around a source-citation component. One accent colour, 2px radius, hairline separation, no decorative motion. See DESIGN.md.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: keyzy
*/

/* keyzy.shop - design tokens per DESIGN.md. One accent, 2px radius, hairline separation. */
:root{
  --surface:#FBFBF9; --surface-2:#F2F2EE; --ink:#15191C; --ink-muted:#5A646B;
  --hairline:#E0E2DE; --accent:#15616D; --accent-soft:#15616D1a;
  --r:2px; --measure:68ch;
  --sans:"Public Sans",ui-sans-serif,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
}
@media (prefers-color-scheme:dark){
  :root{--surface:#101416;--surface-2:#171C1F;--ink:#ECEEEC;--ink-muted:#9AA4A9;
    --hairline:#2A3135;--accent:#4FA3AF;--accent-soft:#4FA3AF1f;}
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--sans);
  font-size:1.0625rem;line-height:1.7;font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r)}
h1,h2,h3,h4{font-weight:700;line-height:1.18;letter-spacing:-0.015em;margin:0 0 .5em}
h1{font-size:clamp(2rem,1.4rem + 2.4vw,3rem)}
h2{font-size:clamp(1.375rem,1.1rem + 1.1vw,1.75rem);letter-spacing:-0.01em}
h3{font-size:1.125rem;letter-spacing:0}
p,ul,ol{margin:0 0 1.1em}
ul,ol{padding-left:1.15em}
li{margin:0 0 .4em}
strong{font-weight:700}
code,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* layout */
.wrap{max-width:1180px;margin:0 auto;padding:0 1.25rem}
.prose{max-width:var(--measure)}
.sec{padding:3.5rem 0;border-top:1px solid var(--hairline)}
.sec:first-of-type{border-top:0}
@media(min-width:900px){.sec{padding:5rem 0}}
.lede{font-size:1.1875rem;color:var(--ink-muted);max-width:60ch}
.kicker{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-muted);margin:0 0 1rem}

/* header + nav: single line, <=80px */
.site-head{border-bottom:1px solid var(--hairline);position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(8px)}
.site-head .wrap{display:flex;align-items:center;gap:1.5rem;min-height:64px}
.brand{font-weight:700;letter-spacing:-0.02em;font-size:1.0625rem;text-decoration:none;color:var(--ink);
  display:flex;align-items:baseline;gap:.45rem;flex:none}
.brand span{font-family:var(--mono);font-size:.6875rem;color:var(--ink-muted);letter-spacing:.06em;text-transform:uppercase}
.site-nav{margin-left:auto;display:flex;gap:1.25rem;flex-wrap:nowrap;align-items:center}
.site-nav a{font-size:.9375rem;text-decoration:none;color:var(--ink);white-space:nowrap}
.site-nav a:hover,.site-nav a[aria-current=page]{color:var(--accent);text-decoration:underline}
@media(max-width:760px){
  .site-head .wrap{flex-wrap:wrap;padding-bottom:.6rem;min-height:0;padding-top:.6rem}
  .site-nav{margin-left:0;width:100%;overflow-x:auto;gap:1rem;padding-bottom:.15rem}
}

/* hero */
.hero{padding:3rem 0 3.5rem}
@media(min-width:900px){.hero{padding:4.5rem 0 5rem;display:grid;grid-template-columns:1.15fr .85fr;gap:4rem;align-items:start}}
.hero h1{max-width:16ch}
.hero .lede{margin-bottom:1.75rem}
.btnrow{display:flex;gap:.75rem;flex-wrap:wrap}
.btn{display:inline-block;padding:.6rem 1.1rem;border-radius:var(--r);font-size:.9375rem;
  font-weight:500;text-decoration:none;white-space:nowrap;border:1px solid var(--accent);
  background:var(--accent);color:var(--surface);transition:background .15s,color .15s}
.btn:hover{background:transparent;color:var(--accent)}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--hairline)}
.btn-ghost:hover{background:transparent;color:var(--accent);border-color:var(--accent)}

/* figure block: the signature component */
.figgrid{display:grid;gap:0;border-top:1px solid var(--hairline)}
@media(min-width:620px){.figgrid{grid-template-columns:1fr 1fr}}
.fig{padding:1.25rem 0;border-bottom:1px solid var(--hairline)}
@media(min-width:620px){.fig{padding:1.25rem 1.25rem 1.25rem 0}
  .fig:nth-child(even){padding-left:1.25rem;border-left:1px solid var(--hairline)}}
.fig b{display:block;font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;
  font-size:1.75rem;line-height:1.1;letter-spacing:-0.02em}
.fig .lbl{display:block;font-size:.9375rem;margin:.35rem 0 .5rem;max-width:34ch}
.src{font-family:var(--mono);font-size:.6875rem;line-height:1.5;color:var(--ink-muted);display:block}
.src a{color:var(--ink-muted);text-decoration:underline;text-decoration-color:var(--accent)}
.src a:hover{color:var(--accent)}

/* inset / callout */
.inset{background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--r);
  padding:1.25rem 1.25rem .4rem;margin:1.75rem 0}
.inset h3{margin-top:0}
.unverified{border:1px dashed var(--hairline);border-radius:var(--r);padding:1.25rem 1.25rem .4rem;margin:2rem 0}
.unverified h3{font-family:var(--mono);font-size:.8125rem;text-transform:uppercase;letter-spacing:.07em;
  font-weight:500;color:var(--ink-muted);margin-bottom:.75rem}
.unverified li{font-size:.9375rem;color:var(--ink-muted)}
.warn{border-left:3px solid var(--accent);padding:.1rem 0 .1rem 1rem;margin:1.75rem 0;
  font-size:.9375rem;color:var(--ink-muted);max-width:var(--measure)}

/* tables */
.tbl-scroll{overflow-x:auto;margin:1.5rem 0;border:1px solid var(--hairline);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;font-size:.9375rem;min-width:560px}
th,td{text-align:left;padding:.6rem .85rem;border-bottom:1px solid var(--hairline);vertical-align:top}
thead th{font-family:var(--mono);font-size:.6875rem;text-transform:uppercase;letter-spacing:.06em;
  font-weight:500;color:var(--ink-muted);background:var(--surface-2);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
caption{caption-side:bottom;text-align:left;padding:.7rem .85rem;font-family:var(--mono);
  font-size:.6875rem;line-height:1.5;color:var(--ink-muted);border-top:1px solid var(--hairline)}

/* article shell with margin rail */
.article{padding:2.5rem 0 4rem}
@media(min-width:1000px){
  .article{display:grid;grid-template-columns:200px minmax(0,1fr);gap:3.5rem;align-items:start}
  .rail{position:sticky;top:96px}
}
.rail{font-size:.875rem;border-left:1px solid var(--hairline);padding-left:1rem;margin-bottom:2.5rem}
.rail p{font-family:var(--mono);font-size:.6875rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-muted);margin:0 0 .6rem}
.rail ol{list-style:none;padding:0;margin:0;counter-reset:r}
.rail li{counter-increment:r;margin:0 0 .45rem}
.rail li a{text-decoration:none;color:var(--ink)}
.rail li a::before{content:counter(r,decimal-leading-zero) "  ";font-family:var(--mono);
  font-size:.75rem;color:var(--ink-muted)}
.rail li a:hover{color:var(--accent);text-decoration:underline}
.article h2{margin-top:2.75rem;padding-top:1.5rem;border-top:1px solid var(--hairline)}
.article h2:first-of-type{margin-top:2rem}
.meta{font-family:var(--mono);font-size:.75rem;color:var(--ink-muted);margin:0 0 1.5rem}

/* link lists */
.cards{display:grid;gap:0;border-top:1px solid var(--hairline)}
.cards a.row{display:block;padding:1.25rem 0;border-bottom:1px solid var(--hairline);text-decoration:none;color:var(--ink)}
.cards a.row:hover{background:var(--surface-2)}
.cards a.row h3{margin:0 0 .25rem;color:var(--accent)}
.cards a.row p{margin:0;color:var(--ink-muted);font-size:.9375rem;max-width:72ch}
@media(min-width:800px){.cards.two{grid-template-columns:1fr 1fr;column-gap:2.5rem}}

/* diagrams */
figure.dia{margin:2rem 0;border:1px solid var(--hairline);border-radius:var(--r);padding:1.25rem;background:var(--surface-2)}
figure.dia svg{width:100%;height:auto}
figure.dia figcaption{font-family:var(--mono);font-size:.6875rem;line-height:1.6;color:var(--ink-muted);margin-top:1rem}
.d-stroke{stroke:var(--hairline)}
.d-ink{fill:var(--ink)}
.d-mut{fill:var(--ink-muted)}
.d-acc{fill:var(--accent)}
.d-accs{stroke:var(--accent)}
.d-box{fill:var(--surface)}
text{font-family:var(--sans);font-size:13px;fill:var(--ink)}
text.m{font-family:var(--mono);font-size:11px;fill:var(--ink-muted)}
text.h{font-weight:700;font-size:13px}

/* footer */
.site-foot{border-top:1px solid var(--hairline);padding:3rem 0 4rem;font-size:.9375rem}
.foot-grid{display:grid;gap:2rem}
@media(min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.foot-grid h4{font-family:var(--mono);font-size:.6875rem;text-transform:uppercase;letter-spacing:.07em;
  font-weight:500;color:var(--ink-muted);margin:0 0 .75rem}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin:0 0 .4rem}
.foot-grid a{color:var(--ink);text-decoration:none}
.foot-grid a:hover{color:var(--accent);text-decoration:underline}
.foot-note{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--hairline);
  font-size:.8125rem;color:var(--ink-muted);max-width:90ch}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:.5rem;position:fixed;background:var(--accent);color:var(--surface);
  padding:.5rem .9rem;border-radius:var(--r);z-index:50}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}