/* base.css — structure + shared components. Everything visual comes from tokens that each theme sets. */
:root{
  --bg:#fff; --surface:#fff; --text:#111; --muted:#555; --line:#ddd; --accent:#0866c6; --on-accent:#fff; --focus:#0866c6;
  --font-body:system-ui,sans-serif; --font-display:var(--font-body); --font-mono:ui-monospace,monospace;
  --r1:8px; --r2:14px; --r3:20px;
  /* header controls (switcher + language) */
  --ctl-bg:transparent; --ctl-line:var(--line); --ctl-text:var(--text); --ctl-on-bg:var(--text); --ctl-on-text:var(--bg); --ctl-radius:999px; --ctl-font:600 14px var(--font-body);
  /* popover */
  --pop-bg:var(--surface); --pop-text:var(--text); --pop-muted:var(--muted); --pop-line:var(--line); --pop-radius:var(--r2); --pop-shadow:0 18px 50px rgba(0,0,0,.18); --pop-sel:var(--accent);
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--text);font-family:var(--font-body);line-height:1.75;-webkit-font-smoothing:antialiased}
body{margin:0;min-height:100vh}
a{color:var(--accent)}
img{max-width:100%}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.vh,.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-999px;z-index:50}.skip:focus{left:12px;top:12px;background:var(--surface);color:var(--text);padding:8px 12px}
.slot:empty{display:none}
[hidden]{display:none!important}
kbd{font:600 .8em var(--font-mono);border:1px solid currentColor;border-bottom-width:2px;border-radius:5px;padding:0 .4em;opacity:.85}

/* header skeleton */
.site-header{position:relative;z-index:20;display:flex;align-items:center;gap:16px;padding:16px 40px}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:inherit;margin-right:auto}
.brand-mark{display:flex}.brand-mark svg{display:none;width:32px;height:32px}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-name{font:700 20px var(--font-display);white-space:nowrap}
.brand-sub{font-size:12px;opacity:.8}
.site-nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;color:inherit;text-decoration:none;font-weight:500;border-radius:999px}
.controls{display:flex;align-items:center;gap:8px}

/* language toggle */
.langtog{display:inline-flex;padding:0;border:1px solid var(--ctl-line);border-radius:var(--ctl-radius);background:var(--ctl-bg)}
.langtog button,.langtog a,.langtog span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:0;border-radius:var(--ctl-radius);background:transparent;color:var(--ctl-text);font:var(--ctl-font);cursor:pointer;text-decoration:none}
.langtog button[aria-pressed=true],.langtog a[aria-current=page],.langtog span[aria-current=page]{background:var(--ctl-on-bg);color:var(--ctl-on-text)}

/* theme switcher */
.theme-switch{position:relative}
.theme-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:0 12px 0 10px;border:1px solid var(--ctl-line);border-radius:var(--ctl-radius);background:var(--ctl-bg);color:var(--ctl-text);font:var(--ctl-font);cursor:pointer}
.theme-btn svg{opacity:.8;transition:transform .2s}
.theme-btn[aria-expanded=true] svg{transform:rotate(180deg)}
.tb-dots{display:inline-flex}
.tb-dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--ctl-dot-ring,rgba(255,255,255,.9));margin-left:-5px}
.tb-dots i:first-child{margin-left:0}
.d-a{background:linear-gradient(135deg,#f4a983,#0a8ef7 55%,#050a14)}
.d-b{background:radial-gradient(circle at 50% 60%,#34eed6 0 2px,#050a14 3px)}
.d-c{background:radial-gradient(circle at 60% 40%,#b03a24 0 3px,#f6f1e6 4px)}
.theme-pop{position:absolute;right:0;top:calc(100% + 10px);width:330px;max-width:calc(100vw - 24px);background:var(--pop-bg);color:var(--pop-text);border:1px solid var(--pop-line);border-radius:var(--pop-radius);box-shadow:var(--pop-shadow);padding:10px;z-index:40}
.pop-title{margin:2px 8px 8px;font:600 12px var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--pop-muted)}
.theme-opt{display:grid;grid-template-columns:76px 1fr 22px;align-items:center;gap:12px;width:100%;min-height:64px;padding:8px;border:1.5px solid transparent;border-radius:calc(var(--pop-radius) - 4px);background:transparent;color:inherit;text-align:left;cursor:pointer;font:inherit}
.theme-opt:hover{background:var(--pop-hover,rgba(127,127,127,.08))}
.theme-opt[aria-checked=true]{border-color:var(--pop-sel);background:var(--pop-hover,rgba(127,127,127,.08))}
.opt-txt{display:flex;flex-direction:column;line-height:1.35}
.opt-name{font-weight:700;font-size:16px}
.opt-sub{font-size:12.5px;color:var(--pop-muted)}
.opt-check{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 13px var(--font-body);color:var(--on-accent);background:var(--pop-sel);opacity:0}
.theme-opt[aria-checked=true] .opt-check{opacity:1}
.pop-hint{margin:8px 8px 2px;font-size:12.5px;color:var(--pop-muted)}
/* mini previews (fixed colours: they depict the theme, not the current one) */
.sw{position:relative;display:block;width:76px;height:48px;border-radius:8px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(127,127,127,.35)}
.sw-a{background:linear-gradient(180deg,#1b3566 0,#7d6fa3 28%,#f4a983 46%,#123a5e 50%,#050a14 100%)}
.sw-a::before{content:"";position:absolute;left:10px;right:10px;top:5px;height:20px;background:linear-gradient(180deg,#ffe6d8 0 40%,#56658c 40%);clip-path:polygon(0 100%,26% 62%,36% 70%,52% 0,66% 48%,74% 40%,100% 100%)}
.sw-a::after{content:"";position:absolute;left:38px;top:31px;width:24px;height:7px;border:1px solid rgba(210,245,255,.8);border-radius:50%}
.sw-b{background:#050a14}
.sw-b::before{content:"";position:absolute;inset:8px 6px 10px;background:linear-gradient(#13223a 1px,transparent 1px) 0 0/100% 7px}
.sw-b::after{content:"";position:absolute;left:6px;right:6px;bottom:10px;height:24px;background:linear-gradient(90deg,#0a8ef7,#34eed6);clip-path:polygon(0 100%,0 92%,20% 92%,24% 10%,38% 10%,42% 92%,48% 92%,52% 40%,64% 40%,68% 92%,100% 92%,100% 100%)}
.sw-c{background:#f6f1e6}
.sw-c::before{content:"White Mountain";position:absolute;left:0;right:0;top:5px;text-align:center;font:700 8.5px 'Source Serif 4','Noto Serif SC',serif;white-space:nowrap;letter-spacing:0;color:#1f1c17;border-bottom:2px double #1f1c17;padding-bottom:2px;margin:0 8px}
.sw-c::after{content:"";position:absolute;right:9px;bottom:6px;width:15px;height:15px;border:2px solid #b03a24;border-radius:3px;transform:rotate(-8deg);box-shadow:-46px -2px 0 -5px #d9cfbd,-30px -2px 0 -5px #d9cfbd}

.menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--ctl-line);border-radius:var(--ctl-radius);background:var(--ctl-bg);color:var(--ctl-text);cursor:pointer}

/* layout skeleton */
.layout{max-width:1180px;margin:0 auto;padding:48px 40px 32px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px}
.feed{list-style:none;margin:0;padding:0}
.entry{position:relative;display:grid;grid-template-columns:96px 1fr;gap:24px}
.entry-mark{display:none}
a.entry-date{color:inherit;text-decoration:none}
a.entry-date time{display:block}
.entry-date span{display:block}
.entry-title{margin:0 0 6px}
.entry-text{margin:0}
.entry-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px;font-size:13px;color:var(--muted)}
.entry-meta a{display:inline-flex;align-items:center;min-height:32px}
.chip{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px}
.archive-more a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:none}
.widget{margin-bottom:22px}
.widget p{margin:0}
.w-title{margin:0 0 8px}
.tools{list-style:none;margin:8px 0 0;padding:0}
.tools li{display:flex;align-items:center;gap:10px;min-height:44px}
.tools li > span:last-child{margin-left:auto;color:var(--muted);font-size:14px}
.tool-ic{display:none}
.site-footer{max-width:1180px;margin:0 auto;padding:22px 40px 44px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--muted);border-top:1px solid var(--line)}
/* post */
.layout--post,.layout--about{grid-template-columns:220px minmax(0,700px) 1fr}
.layout--post::after,.layout--about::after{content:""}
.back{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:600}
.post-meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:14px;color:var(--muted)}
.post-title{margin:8px 0 4px}
.post-body code{font-family:var(--font-mono)}
.post-nav{display:flex;gap:16px;margin-top:40px}
.post-nav a{flex:1;min-height:44px;padding:14px 18px;text-decoration:none;color:var(--text);border:1px solid var(--line);border-radius:var(--r2)}
.post-nav small{display:block;color:var(--muted)}

/* cross-fade between themes (View Transitions); skipped under reduced motion in JS too */
::view-transition-old(root),::view-transition-new(root){animation-duration:.38s;animation-timing-function:ease}

@media (max-width:760px){
  .site-header{flex-wrap:wrap;row-gap:8px;padding:10px 14px;gap:8px}
  .brand{gap:8px}.brand-name{font-size:18px}.brand-sub{display:none}
  .tb-label,.theme-btn svg{display:none}
  .theme-btn{padding:0;justify-content:center;width:44px}
  .tb-dots i{width:12px;height:12px}
  .menu-btn{display:inline-flex}
  .site-nav{display:none;position:absolute;top:100%;left:12px;right:12px;background:var(--pop-bg);color:var(--pop-text);border:1px solid var(--pop-line);border-radius:var(--pop-radius);box-shadow:var(--pop-shadow);padding:8px}
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column}
  .theme-pop{position:fixed;left:12px;right:12px;top:64px;width:auto}
  .layout,.layout--post,.layout--about{grid-template-columns:minmax(0,1fr);padding:28px 18px;gap:24px}
  .layout > *,.layout--post > *,.layout--about > *{min-width:0}
  .entry{grid-template-columns:1fr;gap:4px}
  .site-footer{padding:20px 18px 36px;flex-direction:column}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* name variant b: on phones, stack "White / Mountain" in the header so the controls keep their 44px targets.
   Theme A overrides this back to 21px in a.css (same specificity, later file). Theme C is excluded. */
@media (max-width:480px){ :root:not([data-theme=c]) .brand-name{white-space:normal;width:min-content;font-size:16px;line-height:1.05} }

/* Theme-variant copy is all in the HTML; CSS shows the active one (no JS, no flash).
   :root keeps the hide rule above a single class + element display (for example .archive-more a). */
:root [data-for-theme]{display:none}
:root[data-theme=a] [data-for-theme=a],:root[data-theme=b] [data-for-theme=b],:root[data-theme=c] [data-for-theme=c]{display:inline}
.layout--page{display:block;max-width:760px}
.post-body img,.post-body video{max-width:100%;height:auto}
.post-body pre{overflow-x:auto;padding:.75rem 1rem;border-radius:var(--r1);background:var(--code-bg);font-size:.9em}
.post-body :not(pre)>code{background:var(--code-bg);padding:.1em .35em;border-radius:4px}
.post-body table{border-collapse:collapse;display:block;overflow-x:auto}
.post-body th,.post-body td{padding:.35rem .75rem;border:1px solid var(--line);text-align:left}
.post-body .callout{display:flex;gap:.6rem;margin:1rem 0;padding:.75rem 1rem;border-radius:var(--r1);background:var(--code-bg)}
.post-body .callout-body>:first-child{margin-top:0}
.post-body .callout-body>:last-child{margin-bottom:0}
.post-body details{margin:1rem 0}
.post-body summary{cursor:pointer}
.post-body hr{border:none;border-top:1px solid var(--line)}
.post-body>*:first-child{margin-top:0}
.pagination{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem;color:var(--muted);font-size:.9rem}
.archive-list{padding:0;list-style:none}
.archive-list li{display:flex;gap:1rem;margin:.35rem 0}
.archive-list time{flex:none;min-width:7.5rem;color:var(--muted)}