/* ===========================================================================
   AzureToZ — Apple design language · "Structured Vibrancy"
   SF Pro type · azure accent · tasteful frosted vibrancy · light + dark
   One terminal nod survives: monospace metadata (dates, read time, eyebrows).
   =========================================================================== */

:root {
  --sf: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
        "Helvetica Neue", system-ui, sans-serif;
  --sf-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, monospace;

  --maxw: 1140px;
  --topbar-h: 56px;

  --radius:  22px;
  --radius-sm: 14px;
}

/* ---- light (default) ---- */
[data-theme="light"] {
  --bg:       #f5f5f7;
  --bg-solid: #ffffff;
  --ink:      #1d1d1f;
  --ink-2:    #6e6e73;
  --ink-3:    #86868b;
  --line:     rgba(0,0,0,0.09);
  --line-2:   rgba(0,0,0,0.14);
  --acc:      #0a6fe0;
  --acc-2:    #4f9fff;
  --acc-soft: rgba(10,111,224,0.10);
  --acc-line: rgba(10,111,224,0.32);

  /* frosted material */
  --glass:      rgba(255,255,255,0.62);
  --glass-2:    rgba(255,255,255,0.78);
  --glass-brd:  rgba(255,255,255,0.85);
  --glass-hi:   rgba(255,255,255,0.7);
  --glass-sh:   0 1px 0 var(--glass-hi) inset, 0 22px 50px -30px rgba(31,38,55,0.40);
  --lift-sh:    0 1px 0 var(--glass-hi) inset, 0 30px 60px -32px rgba(31,38,55,0.55);
  --bar:        rgba(255,255,255,0.72);
  --tagbg:      rgba(0,0,0,0.045);

  /* ambient wash tints */
  --wash-1: rgba(10,111,224,0.16);
  --wash-2: rgba(120,80,230,0.13);

  /* code syntax (Xcode-light-ish, tuned to the site palette) */
  --code-com:  #5d7048;
  --code-key:  #9b2393;
  --code-str:  #c41a16;
  --code-num:  #1c00cf;
  --code-type: #3e8087;
  --code-fn:   #6f42c1;
  --code-attr: #836c28;
}

/* ---- dark ---- */
[data-theme="dark"] {
  --bg:       #0a0a0c;
  --bg-solid: #161618;
  --ink:      #f5f5f7;
  --ink-2:    #a1a1a6;
  --ink-3:    #6e6e73;
  --line:     rgba(255,255,255,0.10);
  --line-2:   rgba(255,255,255,0.16);
  --acc:      #4f9fff;
  --acc-2:    #6fb0ff;
  --acc-soft: rgba(79,159,255,0.14);
  --acc-line: rgba(79,159,255,0.36);

  --glass:      rgba(40,40,46,0.58);
  --glass-2:    rgba(48,48,55,0.72);
  --glass-brd:  rgba(255,255,255,0.12);
  --glass-hi:   rgba(255,255,255,0.08);
  --glass-sh:   0 1px 0 var(--glass-hi) inset, 0 22px 50px -28px rgba(0,0,0,0.7);
  --lift-sh:    0 1px 0 var(--glass-hi) inset, 0 30px 60px -28px rgba(0,0,0,0.85);
  --bar:        rgba(22,22,26,0.64);
  --tagbg:      rgba(255,255,255,0.08);

  --wash-1: rgba(40,110,230,0.26);
  --wash-2: rgba(120,80,230,0.20);

  /* code syntax (Xcode-dark-ish) */
  --code-com:  #7f8c98;
  --code-key:  #ff7ab2;
  --code-str:  #ff8170;
  --code-num:  #d9c97c;
  --code-type: #6bdfff;
  --code-fn:   #b281eb;
  --code-attr: #cda1ff;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
a, button, .chip, summary, [role="button"] { touch-action: manipulation; }
html { scroll-behavior: smooth; hanging-punctuation: first allow-end last; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sf);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  accent-color: var(--acc);
}

.app { min-height: 100vh; position: relative; z-index: 1; padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
::selection { background: var(--acc-soft); }
.mono { font-family: var(--sf-mono); }

/* ===========================================================================
   AMBIENT WASH — the faint colour the frosted cards refract
   =========================================================================== */
.ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.ambient::before, .ambient::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(60px);
}
.ambient::before {
  width: 50rem; height: 44rem; left: -12rem; top: -16rem;
  background: radial-gradient(circle, var(--wash-1), transparent 66%);
  animation: drift1 32s ease-in-out infinite alternate;
}
.ambient::after {
  width: 48rem; height: 42rem; right: -13rem; top: 18rem;
  background: radial-gradient(circle, var(--wash-2), transparent 66%);
  animation: drift2 38s ease-in-out infinite alternate;
}
@keyframes drift1 { from { transform: translate(0,0); } to { transform: translate(4rem,3rem); } }
@keyframes drift2 { from { transform: translate(0,0); } to { transform: translate(-3rem,-2rem); } }

/* legacy element kept harmless (scanlines removed from design) */
.scanlines { display: none; }

/* ===========================================================================
   FROSTED MATERIAL
   =========================================================================== */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius);
  box-shadow: var(--glass-sh);
}

/* ===========================================================================
   TOP BAR
   =========================================================================== */
/* Solid colour Safari 26 can sample to tint its toolbar (the glass nav uses
   backdrop-filter and isn't sampled). Sits behind the nav at the very top
   edge, so it's not visible — it just controls the browser-chrome tint.
   z-index below .app(1) keeps it behind the nav. */
.tint-anchor {
  position: fixed; top: 0; left: 0; right: 0; z-index: 0;
  height: calc(6px + env(safe-area-inset-top, 0px));
  background: var(--bg-solid); pointer-events: none;
}

.topbar {
  position: sticky; top: 0; z-index: 100;
  /* Extend the bar through the iOS status-bar / notch area on mobile.
     env() resolves to 0 on devices (and desktops) without a safe-area inset. */
  height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) clamp(20px, 5vw, 56px) 0;
  display: flex; align-items: center; gap: 24px;
  /* frosted glass nav. Safari 26 can't sample backdrop-filter elements for its
     toolbar tint, so a solid .tint-anchor strip sits behind this (see body). */
  background: var(--bar);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex; align-items: center; gap: 9px;
  font-size: 17px; font-weight: 600; letter-spacing: -0.015em;
  cursor: pointer; background: none; border: 0; color: var(--ink); padding: 0;
}
.brand-mark {
  width: 24px; height: 24px; border-radius: 7px; flex: 0 0 auto;
  background: var(--ink); color: var(--bg); display: grid; place-items: center;
}
.brand-mark svg { display: block; }
.brand-name b { font-weight: 600; }

/* wordmark — "zure" treatment, set by [data-wordmark] on <html> (see Tweaks) */
.brand-name .zure { font-weight: 500; color: var(--ink-3); transition: color .2s; }
[data-wordmark="azure"] .brand-name .zure { font-weight: 600; color: var(--acc); }
[data-wordmark="mono"] .brand-name .zure { font-weight: inherit; color: inherit; }

.topbar-end { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.bar-divider { width: 1px; height: 18px; background: var(--line-2); flex: 0 0 auto; }
.bar-actions { display: flex; align-items: center; gap: 8px; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav-link {
  font-size: 14px; font-weight: 400; color: var(--ink-2);
  background: none; border: 0; cursor: pointer; text-decoration: none;
  padding: 7px 14px; border-radius: 980px;
  transition: color .15s, background .15s;
}
.nav-link:hover { color: var(--ink); background: var(--tagbg); }
.nav-link[data-active="true"] { color: var(--ink); font-weight: 500; }

/* bar buttons — theme toggle + menu */
.bar-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 32px; padding: 0 12px; cursor: pointer;
  font-size: 13px; font-weight: 400; color: var(--ink-2);
  background: none; border: 1px solid var(--line-2); border-radius: 980px;
  transition: color .15s, border-color .15s, background .15s;
}
.bar-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.theme-toggle { width: 32px; height: 32px; padding: 0; border-radius: 50%; }
.theme-toggle:hover { color: var(--acc); }
.iconbtn { width: 32px; height: 32px; padding: 0; border-radius: 50%; }
.iconbtn:hover { color: var(--acc); }
.tt-icon { display: grid; place-items: center; }

/* dropdown menu (mobile) */
.topmenu { position: relative; display: none; align-items: center; }
.menu-lines { display: flex; flex-direction: column; gap: 3px; width: 15px; }
.menu-lines span { height: 1.5px; border-radius: 2px; background: currentColor; }
.menu-btn[data-open="true"] { color: var(--acc); border-color: var(--acc-line); background: var(--acc-soft); }

.menu-pop {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 200;
  min-width: 230px; padding: 8px;
  background: var(--glass-2);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid var(--glass-brd); border-radius: 18px;
  box-shadow: var(--glass-sh);
  display: flex; flex-direction: column;
  transform-origin: top right;
  animation: pop-in .18s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
.mp-group { display: flex; flex-direction: column; }
.mp-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 12px; border-radius: 10px; width: 100%; text-align: left;
  font-size: 15px; font-weight: 400; color: var(--ink);
  background: none; border: 0; cursor: pointer; text-decoration: none;
  transition: background .15s;
}
.mp-item:hover, .mp-item:focus-visible { background: var(--tagbg); outline: none; }
.mp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); opacity: 0; flex: 0 0 auto; }
.mp-item[data-active="true"] .mp-dot { opacity: 1; }
.mp-value { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.mp-ext-arr { font-size: 13px; color: var(--ink-3); transition: color .15s, transform .15s; }
.mp-ext:hover .mp-ext-arr { color: var(--acc); transform: translate(1px,-1px); }
.mp-sep { height: 1px; background: var(--line); margin: 7px 8px; }

/* scroll-to-top */
.scrolltop {
  position: fixed; right: clamp(16px, 4vw, 30px);
  bottom: calc(28px + env(safe-area-inset-bottom, 0px)); z-index: 90;
  display: grid; place-items: center;
  width: 46px; height: 46px; cursor: pointer;
  color: var(--ink-2);
  background: var(--glass-2);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--glass-brd); border-radius: 50%;
  box-shadow: var(--glass-sh);
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.94);
  transition: opacity .22s, transform .22s, visibility .22s, color .15s;
}
.scrolltop[data-show="true"] { opacity: 1; visibility: visible; transform: none; }
.scrolltop:hover { color: var(--acc); transform: translateY(-2px); }
.st-chevron {
  width: 9px; height: 9px; margin-top: 3px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(-45deg);
}

@media (max-width: 640px) {
  .nav, .bar-divider { display: none; }
  .topmenu { display: flex; }
}

/* ===========================================================================
   SPOTLIGHT SEARCH (⌘K)
   =========================================================================== */
.spot-backdrop {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,0.18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; justify-content: center; align-items: flex-start;
  padding: 16vh 20px 0;
  animation: spot-fade .18s ease both;
}
[data-theme="dark"] .spot-backdrop { background: rgba(0,0,0,0.45); }
@keyframes spot-fade { from { opacity: 0; } }

.spotlight {
  width: min(560px, 100%);
  background: var(--glass-2);
  -webkit-backdrop-filter: saturate(180%) blur(28px); backdrop-filter: saturate(180%) blur(28px);
  border: 1px solid var(--glass-brd); border-radius: 18px;
  box-shadow: var(--glass-sh); overflow: hidden;
  animation: spot-pop .2s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes spot-pop { from { opacity: 0; transform: translateY(-10px) scale(.985); } }

.spot-input { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.spot-input .ico { color: var(--ink-3); display: grid; place-items: center; }
.spot-input input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--ink); font: inherit; font-size: 17px; }
.spot-input input::placeholder { color: var(--ink-3); }
.spot-esc {
  font-family: var(--sf-mono); font-size: 11px; color: var(--ink-3);
  border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 7px; cursor: pointer;
}

.spot-results { max-height: min(420px, 52vh); overflow-y: auto; padding: 8px; display: flex; flex-direction: column; }
.spot-h {
  font-family: var(--sf-mono); font-size: 11px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-3); margin: 6px 10px;
}
.spot-item {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  text-align: left; width: 100%; padding: 11px 12px; border-radius: 11px;
  background: none; border: 0; cursor: pointer; color: inherit; font: inherit;
}
.spot-item[data-active="true"] { background: var(--acc-soft); }
.spot-item[data-active="true"] .spot-t { color: var(--acc); }
.spot-t { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.spot-meta { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.spot-none { padding: 28px 18px 24px; color: var(--ink-3); font-size: 15px; margin: 0; }
.spot-foot { display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-3); }

/* ===========================================================================
   LAYOUT
   =========================================================================== */
.container {
  max-width: var(--maxw); margin: 0 auto;
  /* keep clear of the rounded-corner / notch safe area in landscape */
  padding-left: max(clamp(20px, 5vw, 56px), env(safe-area-inset-left));
  padding-right: max(clamp(20px, 5vw, 56px), env(safe-area-inset-right));
}
.page { padding-top: clamp(56px, 8vw, 104px); }

@media (prefers-reduced-motion: no-preference) {
  .page > *:not(.reveal) { animation: rise .55s cubic-bezier(.2,.7,.3,1) both; }
  .page > *:nth-child(2) { animation-delay: .06s; }
  .page > *:nth-child(3) { animation-delay: .12s; }
  .page > *:nth-child(4) { animation-delay: .18s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* eyebrow — the surviving monospace nod */
.eyebrow {
  font-family: var(--sf-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--acc); margin: 0 0 22px;
  font-variant-numeric: tabular-nums;
}
.eyebrow.muted { color: var(--ink-3); }

.section { padding-top: clamp(64px, 9vw, 96px); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.h-section { font-size: clamp(1.5rem, 3vw, 1.75rem); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.viewall { font-size: 15px; color: var(--acc); background: none; border: 0; cursor: pointer; font-family: inherit; }
.viewall:hover { text-decoration: underline; }

/* ===========================================================================
   HERO
   =========================================================================== */
.hero { padding-top: clamp(24px, 4vw, 48px); }
.hero h1 {
  font-size: clamp(2.8rem, 6.4vw, 4.4rem); line-height: 1.05; font-weight: 600;
  letter-spacing: -0.027em; margin: 0; max-width: 16ch; text-wrap: balance;
}
.hero h1 .hl { color: var(--acc); }
.hero-sub {
  font-size: clamp(1.12rem, 1.7vw, 1.32rem); line-height: 1.5; color: var(--ink-2);
  max-width: 54ch; margin: 26px 0 0; text-wrap: pretty;
}
.hero-sub b, .hero-sub strong { color: var(--ink); font-weight: 500; }

.focus { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 34px; }
.focus-chip {
  font-size: 13px; color: var(--ink-2); padding: 8px 15px; border-radius: 980px;
  background: var(--glass); border: 1px solid var(--glass-brd);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* "Now" strip — one quiet, living line under the hero */
.now {
  display: flex; align-items: baseline; gap: 16px;
  margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line);
  max-width: 580px;
}
.now-k {
  font-family: var(--sf-mono); font-size: 11px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--acc); flex: 0 0 auto;
}
.now p { margin: 0; font-size: 0.98rem; color: var(--ink-2); line-height: 1.5; text-wrap: pretty; }

/* scroll-linked reveal — sections fade + rise as they enter the viewport */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal[data-in="true"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
.cardcell { display: flex; }
.cardcell > * { width: 100%; }

/* theme crossfade (View Transitions) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s; }

/* ===========================================================================
   FEATURE CARD (frosted, with arrow)
   =========================================================================== */
.feature {
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
  width: 100%; text-align: left; cursor: pointer; color: inherit; font: inherit;
  padding: clamp(28px, 4vw, 44px);
  transition: transform .2s, box-shadow .2s;
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--lift-sh); }
.feature .kicker {
  font-family: var(--sf-mono); font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--acc); margin: 0 0 16px;
}
.feature h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.1rem); line-height: 1.12; font-weight: 600;
  letter-spacing: -0.022em; margin: 0; max-width: 20ch; text-wrap: balance;
}
.feature .excerpt {
  font-size: 1.06rem; color: var(--ink-2); line-height: 1.5; max-width: 58ch;
  margin: 16px 0 0; text-wrap: pretty;
}
.feature-arrow {
  width: 54px; height: 54px; border-radius: 50%; background: var(--acc);
  display: grid; place-items: center; flex: 0 0 auto; color: #fff;
  transition: transform .2s;
}
.feature:hover .feature-arrow { transform: translateX(3px); }
@media (max-width: 600px) {
  .feature { grid-template-columns: 1fr; }
  .feature-arrow { display: none; }
}

/* meta row (mono) */
.post-meta {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  font-family: var(--sf-mono); font-size: 13px; color: var(--ink-3);
  margin-top: 22px; font-variant-numeric: tabular-nums;
}
.post-meta .dot { color: var(--line-2); }
.tags { display: inline-flex; flex-wrap: wrap; gap: 7px; }
.tag {
  font-family: var(--sf-mono); font-size: 11.5px; color: var(--ink-2);
  padding: 3px 9px; border-radius: 6px; background: var(--tagbg);
}

/* ===========================================================================
   RECENT / ARCHIVE — frosted card grid
   =========================================================================== */
.cardgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 720px) { .cardgrid { grid-template-columns: 1fr; } }

.pcard {
  display: flex; flex-direction: column; text-align: left; width: 100%;
  cursor: pointer; color: inherit; font: inherit;
  padding: clamp(22px, 3vw, 28px);
  transition: transform .2s, box-shadow .2s;
}
.pcard:hover { transform: translateY(-3px); box-shadow: var(--lift-sh); }
.pcard .p-date {
  font-family: var(--sf-mono); font-size: 12.5px; color: var(--ink-3);
  margin-bottom: 14px; font-variant-numeric: tabular-nums;
}
.pcard .p-title {
  font-size: 1.3rem; line-height: 1.18; font-weight: 600; letter-spacing: -0.018em;
  margin: 0; color: var(--ink); text-wrap: balance;
  transition: color .15s;
}
.pcard:hover .p-title { color: var(--acc); }
.pcard .p-excerpt {
  font-size: 0.97rem; color: var(--ink-2); line-height: 1.46; margin: 12px 0 0;
  text-wrap: pretty;
}
.pcard .p-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 20px;
}
.pcard .p-read { font-family: var(--sf-mono); font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.pcard .p-foot .tags { flex: 1; }

/* ===========================================================================
   POSTS PAGE — filters + search
   =========================================================================== */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 32px 0 22px; justify-content: space-between; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-size: 13px; font-weight: 400; color: var(--ink-2);
  background: var(--glass); border: 1px solid var(--glass-brd); border-radius: 980px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 7px 15px; cursor: pointer; transition: .15s;
  display: flex; align-items: center; gap: 7px;
}
.chip:hover { color: var(--ink); }
.chip .n { color: var(--ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.chip[data-active="true"] { color: #fff; background: var(--acc); border-color: var(--acc); }
.chip[data-active="true"] .n { color: #fff; opacity: .75; }
.chip[hidden] { display: none; }
/* quiet "More / Less" disclosure so the bar shows ~5 tags by default */
.chip-more { background: none; border-color: transparent; color: var(--ink-2); }
.chip-more:hover { color: var(--ink); background: var(--tagbg); }
.chip-more .more-plus { color: var(--ink-3); font-size: 14px; line-height: 1; }

.search {
  display: flex; align-items: center; gap: 9px; font-size: 14px;
  background: var(--glass); border: 1px solid var(--glass-brd); border-radius: 980px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 8px 16px; min-width: 240px; transition: border-color .15s;
}
.search:focus-within { border-color: var(--acc-line); }
.search .ico { color: var(--ink-3); display: grid; place-items: center; }
.search input { border: 0; background: none; outline: none; color: var(--ink); font: inherit; flex: 1; min-width: 0; }
.search input::placeholder { color: var(--ink-3); }

.empty {
  color: var(--ink-3); font-size: 1rem; padding: 60px 4px; text-align: center;
  border-top: 1px solid var(--line);
}

/* ===========================================================================
   ABOUT
   =========================================================================== */
.about-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: start; margin-top: 8px; }
/* On narrow screens, flatten the two columns and interleave the blocks by
   importance: identity → bio → contact → focus → stack, so the "who I am /
   how to reach me" essentials lead instead of being buried under the columns. */
@media (max-width: 820px) {
  /* align-items must be stretch (not the desktop grid's "start"), or the flex
     children collapse to their content width — that was the odd narrow card. */
  .about-grid { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
  .about-main, .about-side { display: contents; }
  .about-grid > .about-main > *, .about-grid > .about-side > * { margin-top: 0; }
  /* Lead with the essentials; the contact card sits at the very bottom. */
  .about-grid .id-card       { order: 1; }
  .about-grid .bio           { order: 2; }
  .about-grid .focus         { order: 3; }
  .about-grid .stack-panel   { order: 4; }
  .about-grid .contact-panel { order: 5; }
}

.about-lead {
  font-size: clamp(1.5rem, 2.8vw, 2rem); line-height: 1.32; font-weight: 600;
  letter-spacing: -0.02em; margin: 0 0 28px; max-width: 22ch; text-wrap: balance;
}
.about-lead .hl { color: var(--acc); }
.about-body p { color: var(--ink-2); margin: 0 0 18px; max-width: 60ch; font-size: 1.06rem; line-height: 1.55; }
.about-body b, .about-body strong { color: var(--ink); font-weight: 500; }

/* focus bento — frosted tiles instead of a plain list */
.focus-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.focus-tile { padding: 20px 22px; border-radius: var(--radius-sm); }
.focus-tile .fa-title { font-size: 1.04rem; font-weight: 600; letter-spacing: -0.012em; margin: 0; }
.focus-tile .fa-desc { color: var(--ink-2); font-size: 0.93rem; margin: 6px 0 0; line-height: 1.5; text-wrap: pretty; }
@media (max-width: 560px) { .focus-bento { grid-template-columns: 1fr; } }

.panel { padding: clamp(24px, 3vw, 30px); }
.panel + .panel { margin-top: 18px; }
.panel .eyebrow { margin-bottom: 18px; }

.stack-group { margin-bottom: 22px; }
.stack-group:last-child { margin-bottom: 0; }
.stack-group h4 {
  font-family: var(--sf-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px;
}
.stack-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.stack-tags .tag { font-size: 12.5px; padding: 5px 11px; }

.id-card .id-head { display: flex; flex-direction: column; gap: 5px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.id-name { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.id-role { font-family: var(--sf-mono); font-size: 12px; color: var(--acc); }
.id-facts { margin: 0; padding-top: 18px; display: flex; flex-direction: column; gap: 16px; }
.id-facts > div { display: grid; grid-template-columns: 78px 1fr; gap: 12px; align-items: start; }
.id-facts dt { font-family: var(--sf-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); padding-top: 2px; }
.id-facts dd { margin: 0; font-size: 0.96rem; color: var(--ink-2); line-height: 1.45; text-wrap: pretty; }
.id-certs { display: flex; flex-wrap: wrap; gap: 7px; }
.cert {
  font-family: var(--sf-mono); font-size: 11.5px; font-weight: 500; color: var(--acc);
  padding: 3px 9px; border-radius: 6px; border: 1px solid var(--acc-line); background: var(--acc-soft);
}

.contact { display: flex; flex-direction: column; }
.contact a {
  display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-2);
  text-decoration: none; padding: 12px 2px; border-bottom: 1px solid var(--line);
  transition: color .15s, padding .15s;
}
.contact a:last-child { border-bottom: 0; }
.contact a:hover { color: var(--acc); padding-left: 6px; }
.contact a .k { font-family: var(--sf-mono); font-size: 12px; color: var(--ink-3); width: 80px; text-transform: uppercase; letter-spacing: 0.04em; }
.contact a .arr { margin-left: auto; opacity: 0; transition: opacity .15s; }
.contact a:hover .arr { opacity: 1; }

/* ===========================================================================
   ARTICLE / READING
   =========================================================================== */
.article { max-width: 720px; margin: 0 auto; }
.backlink {
  background: none; border: 0; cursor: pointer; color: var(--ink-2); font: inherit;
  font-size: 14px; padding: 0; margin-bottom: 30px;
  display: inline-flex; align-items: center; gap: 7px; transition: color .15s;
}
.backlink:hover { color: var(--acc); }
.article-title {
  font-size: clamp(2.1rem, 4.6vw, 3rem); line-height: 1.07; font-weight: 600;
  letter-spacing: -0.027em; margin: 0; text-wrap: balance;
}
.article-meta { margin-top: 20px; }
.article-rule { height: 1px; background: var(--line); border: 0; margin: 30px 0 4px; }

.prose { font-size: 1.14rem; line-height: 1.7; color: var(--ink); }
.prose > *:first-child { margin-top: 28px; }
.prose > p:first-child { font-size: 1.3rem; line-height: 1.52; letter-spacing: -0.016em; }
.prose p { margin: 0 0 1.35em; text-wrap: pretty; }
.prose h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.18; margin: 2em 0 .7em; }
.prose h3 { font-size: 1.28rem; font-weight: 600; letter-spacing: -0.015em; margin: 1.7em 0 .6em; }
.prose a { color: var(--acc); text-decoration: none; border-bottom: 1px solid var(--acc-line); }
.prose a:hover { border-bottom-color: var(--acc); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { margin: 0 0 1.35em; padding-left: 1.4em; }
.prose li { margin: 0 0 .5em; padding-left: .3em; }
.prose li::marker { color: var(--acc); }
.prose hr { height: 1px; background: var(--line); border: 0; margin: 2em 0; }
.prose code {
  font-family: var(--sf-mono); font-size: 0.85em;
  background: var(--tagbg); padding: 2px 6px; border-radius: 6px; color: var(--ink);
}
.prose pre {
  position: relative;
  background: var(--bg-solid); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 22px 24px; overflow-x: auto; margin: 0 0 1.6em;
}

/* copy-to-clipboard button — appears on hover/focus */
.code-copy {
  position: absolute; top: 10px; right: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--sf-mono); font-size: 11px; line-height: 1;
  color: var(--ink-2); background: var(--bg-solid);
  border: 1px solid var(--line-2); border-radius: 7px;
  padding: 6px 9px; cursor: pointer;
  opacity: 0; transition: opacity .15s, color .15s, border-color .15s;
}
.prose pre:hover .code-copy, .code-copy:focus-visible { opacity: 1; }
.code-copy:hover { color: var(--ink); border-color: var(--ink-3); }
.code-copy.copied { opacity: 1; color: var(--acc); border-color: var(--acc-line); }
@media (hover: none) { .code-copy { opacity: 1; } }

/* syntax tokens — colours follow the light/dark theme */
.hljs-comment, .hljs-quote { color: var(--code-com); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag { color: var(--code-key); }
.hljs-string, .hljs-regexp, .hljs-meta .hljs-string { color: var(--code-str); }
.hljs-number, .hljs-symbol, .hljs-bullet { color: var(--code-num); }
.hljs-type, .hljs-built_in, .hljs-class .hljs-title, .hljs-title.class_ { color: var(--code-type); }
.hljs-title, .hljs-title.function_, .hljs-section, .hljs-name { color: var(--code-fn); }
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable, .hljs-property, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id { color: var(--code-attr); }
.hljs-meta { color: var(--code-type); }
.hljs-subst { color: var(--ink-2); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 600; }
.prose pre code { background: none; padding: 0; color: var(--ink-2); font-size: 0.92rem; line-height: 1.65; display: block; }
.prose blockquote {
  margin: 0 0 1.5em; padding: 2px 0 2px 22px; border-left: 3px solid var(--acc);
  color: var(--ink); font-size: 1.2rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.45;
}
.prose blockquote p { margin: 0; }
.prose img {
  display: block; max-width: 100%; height: auto; margin: 1.8em 0;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
}
/* caption: italic line immediately after an image (no blank line between) */
.prose img + em { display: block; margin: -1.2em 0 1.8em; font-size: 0.9rem; font-style: normal; color: var(--ink-3); text-align: center; }

.article-foot { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.foot-sig { font-family: var(--sf-mono); color: var(--ink-3); font-size: 13px; }

/* reading progress — hairline under the top bar, article pages only */
.readbar { position: fixed; top: var(--topbar-h); left: 0; right: 0; height: 2px; z-index: 99; pointer-events: none; }
.readbar span {
  display: block; height: 100%; background: var(--acc);
  transform-origin: 0 50%; transform: scaleX(0); transition: transform .08s linear;
}

/* up next — the article's destination card */
.upnext { margin-top: 28px; }
.upnext .feature.compact { padding: clamp(24px, 3.4vw, 36px); }
.upnext .feature.compact h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); }
.upnext-foot { display: flex; justify-content: center; margin-top: 22px; }

/* ===========================================================================
   FOOTER
   =========================================================================== */
.site-footer { margin-top: clamp(72px, 11vw, 130px); border-top: 1px solid var(--line); padding: clamp(44px, 6vw, 64px) 0 28px; }
.footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(24px, 5vw, 56px); align-items: start; }
@media (max-width: 720px) { .footer-inner { grid-template-columns: 1fr; gap: 28px; } }
.footer-id .brand-name { font-size: 16px; font-weight: 600; }
.footer-tag { margin: 12px 0 0; color: var(--ink-2); font-size: 0.96rem; max-width: 40ch; line-height: 1.5; text-wrap: pretty; }
.footer-col-h { font-family: var(--sf-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; }
.footer-nav, .footer-links { display: flex; flex-direction: column; gap: 4px; }
.footer-link { background: none; border: 0; cursor: pointer; text-align: left; font: inherit; font-size: 14px; color: var(--ink-2); padding: 5px 0; width: max-content; transition: color .15s; }
.footer-link:hover, .footer-links a:hover { color: var(--acc); }
.footer-link[data-active="true"] { color: var(--ink); }
.footer-links a { display: inline-flex; align-items: center; gap: 6px; width: max-content; font-size: 14px; color: var(--ink-2); text-decoration: none; padding: 5px 0; transition: color .15s; }
.footer-links a .arr { font-size: 12px; opacity: .6; }
.footer-base { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: clamp(32px,5vw,48px); padding-top: 22px; border-top: 1px solid var(--line); font-family: var(--sf-mono); font-size: 12px; color: var(--ink-3); }
.footer-base .dim { opacity: .6; }

/* ===========================================================================
   UTIL / CRAFT
   =========================================================================== */
.linkbtn { background: none; border: 0; color: var(--acc); cursor: pointer; font: inherit; font-size: 15px; padding: 0; }
.linkbtn:hover { text-decoration: underline; }
.loading { font-family: var(--sf-mono); font-size: 14px; color: var(--ink-2); padding: 80px 4px; }
.block { margin-top: clamp(48px, 7vw, 88px); }

:where(a, button, [tabindex], summary):focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 8px; }
.search:focus-within { outline: 2px solid var(--acc); outline-offset: 3px; }
input:focus-visible { outline: none; }

* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ===========================================================================
   HUGO ADDITIONS — anchor tag overrides for cards that were <button> in React
   =========================================================================== */
a.pcard, a.feature {
  text-decoration: none;
  display: flex;
}
a.pcard { flex-direction: column; }
a.feature { display: grid; grid-template-columns: 1fr auto; }
@media (max-width: 600px) { a.feature { grid-template-columns: 1fr; } }

/* brand as anchor link */
a.brand { text-decoration: none; }

/* backlink as anchor */
a.backlink { text-decoration: none; }

/* keep anchored headings clear of the sticky top bar when jumped to */
.prose h2, .prose h3, .article-title, .hero, .h-section {
  scroll-margin-top: calc(var(--topbar-h) + 24px);
}

/* viewall as anchor */
a.viewall { text-decoration: none; }

/* footer links */
a.footer-link { text-decoration: none; display: block; }

/* linkbtn as anchor */
a.linkbtn { text-decoration: none; display: inline; }
a.linkbtn:hover { text-decoration: underline; }

/* ===========================================================================
   PREMIUM MOBILE — comfortable touch targets (Apple HIG: 44pt min),
   tighter rhythm, and a bit more breathing room on small screens.
   =========================================================================== */
@media (max-width: 640px) {
  /* 44×44 hit targets for every top-bar control */
  .bar-btn, .theme-toggle, .iconbtn, .menu-btn { width: 44px; height: 44px; padding: 0; }
  .bar-actions { gap: 4px; }
  .topbar { gap: 14px; }

  /* roomier menu + list-style rows that read like an iOS sheet */
  .menu-pop { min-width: min(78vw, 300px); padding: 10px; border-radius: 20px; }
  .mp-item { padding: 13px 14px; font-size: 16px; }   /* ~46px tall */

  /* comfier filter chips and search field */
  .chip { padding: 9px 16px; font-size: 13.5px; }
  .toolbar { gap: 12px; margin: 26px 0 20px; }
  .search { flex: 1; min-width: 100%; }

  /* tappable footer + contact rows */
  .footer-link { padding: 7px 0; }
  .footer-links a { padding: 9px 0; }

  /* hero breathes a touch more and isn't oversized on small phones */
  .hero h1 { font-size: clamp(2.4rem, 10.5vw, 3.1rem); }
  .page { padding-top: clamp(40px, 11vw, 64px); }

  /* spotlight search sits a little higher and fills the width */
  .spot-backdrop { padding: 10vh 16px 0; }
  .spot-item { padding: 13px 12px; }
}

/* On touch devices the code-copy button is always visible (no hover) */
@media (hover: none) and (pointer: coarse) {
  .scrolltop { width: 50px; height: 50px; }   /* easier thumb target */
}