/* (unchanged structure; kept exactly as provided) */
/* ========================================================================== */
/* Reset                                                                      */
/* ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,h5,h6,p,figure{margin:0}
img,picture,svg,video,canvas{display:block;max-width:100%}
ul[role="list"],ol[role="list"]{list-style:none;margin:0;padding:0}
input,button,textarea,select{font:inherit}
a{color:inherit;text-decoration:none}

/* ========================================================================== */
/* Design Tokens — COLORS ONLY                                                */
/* (Dark mode = white UI; Light mode = black UI)                              */
/* ========================================================================== */
:root {
  --font-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --font-headings:"Outfit","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;

  --fs-xxl:clamp(2.1rem,4.4vw + 1rem,3.5rem);
  --fs-xl: clamp(1.6rem,2.6vw + .5rem,2.4rem);
  --fs-lg: 1.35rem;
  --fs-md: 1.12rem;
  --fs-sm: .96rem;

  --container:72rem;
  --radius:16px;
  --radius-sm:12px;
  --shadow-1:0 1px 2px rgba(0,0,0,.25), 0 8px 30px rgba(0,0,0,.25);
  --shadow-2:0 10px 40px rgba(0,0,0,.35);

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-8:3rem;

  --measure:68ch; --ul-off:.15em;
  --max-width:74ch;

  --bg:#ffffff;
  --surface:#f9fafb;
  --elev:#f3f4f6;

  --text:#111827;
  --text-muted:#374151;
  --text-subtle:#6b7280;

  --brand:#1d4ed8;
  --brand-contrast:#ffffff;
  --accent:#0ea5e9;

  --border:#e5e7eb;
  --border-subtle:#eef2f7;
  --focus:#2563eb;

  --card:#f3f4f6;
  --link:#1d4ed8;
}

html[data-theme="dark"]{
  --bg:#ffffff;
  --surface:#f9fafb;
  --elev:#f3f4f6;

  --text:#111827;
  --text-muted:#374151;
  --text-subtle:#6b7280;

  --brand:#1d4ed8;
  --brand-contrast:#ffffff;
  --accent:#0ea5e9;

  --border:#e5e7eb;
  --border-subtle:#eef2f7;
  --focus:#2563eb;

  --card:#f3f4f6;
  --link:#1d4ed8;
}

html[data-theme="light"]{
  --bg:#000000;
  --surface:#000000;
  --elev:#1a2335;

  --text:#e5e7eb;
  --text-muted:#9aa4b2;
  --text-subtle:#7c8599;

  --brand:#93c5fd;
  --brand-contrast:#0b1220;
  --accent:#22d3ee;

  --border:#ffffff;
  --border-subtle:#6d0808;
  --focus:#93c5fd;

  --card:#101826;
  --link:#93c5fd;
}

html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:var(--link);text-underline-offset:var(--ul-off)}
a:hover{text-decoration-thickness:2px;text-decoration:underline}

h1,h2,h3,h4{line-height:1.15;font-weight:800;letter-spacing:-0.015em;font-family:var(--font-headings)}
h1{font-size:var(--fs-xxl);margin:var(--space-6) 0 var(--space-4)}
h2{font-size:var(--fs-xl); margin:var(--space-6) 0 var(--space-3)}
h3{font-size:var(--fs-lg); margin:var(--space-5) 0 var(--space-2)}
h4{font-size:var(--fs-md); margin:var(--space-4) 0 var(--space-2)}
p + p{margin-top:var(--space-3)}
.lede{font-size:clamp(1.1rem,1.1vw + .95rem,1.35rem);color:var(--text-muted)}
h1, h2, h3, h4 { letter-spacing:-0.02em; }

.container{max-width:var(--container);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
main{display:block}

.site-head{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(160%) blur(10px);
  background:color-mix(in oklab, var(--surface), transparent 15%);
  border-bottom:1px solid var(--border);
}
.site-head .inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.9rem}

.brand{display:flex;align-items:center;gap:.6rem;color:var(--text);font-weight:800}
.brand-logo{width:34px;height:34px;border-radius:var(--radius-sm);object-fit:cover;display:block}
.brand-text{font-family:var(--font-headings);letter-spacing:-.02em}

.nav{display:flex;align-items:center;gap:1rem}
.nav a{color:var(--text-muted);font-weight:700}
.nav a:hover{color:var(--brand)}
.theme-toggle{
  display:inline-grid;place-items:center;width:38px;height:34px;border-radius:12px;
  background:color-mix(in oklab,var(--surface),transparent 10%);
  border:1px solid var(--border); color:var(--text);
}

/* FIXED (scoped) */
.site-header,
.site-head .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 0 1rem;
}

/* with this */
.site-head .logo { margin-left: auto; }

html[data-theme="dark"] .site-head{
  background: color-mix(in oklab, var(--surface) 95%, white 5%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
html[data-theme="light"] .site-head{
  background: color-mix(in oklab, var(--surface) 90%, black 10%);
  box-shadow: none;
}

.is-home .brand-text{display:none!important}

.site-foot{margin-top:var(--space-8);padding:var(--space-6) 0;color:var(--text-subtle);border-top:1px solid var(--border)}

.hero{position:relative;isolation:isolate;min-height:clamp(300px,42vh,560px)}
.hero__media{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__overlay{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero__inner{position:relative;z-index:2}

.hero__img{
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:.65;
  filter:saturate(1.05) contrast(1.08) brightness(1.05) grayscale(12%);
}

html[data-theme="light"] .hero__overlay {
  background: linear-gradient(to bottom,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.30) 45%,
    rgba(0,0,0,0) 100%
  );
}
html[data-theme="dark"] .hero__overlay {
  background: linear-gradient(to bottom,
    rgba(17,24,39,.15) 0%,
    rgba(17,24,39,.06) 40%,
    rgba(17,24,39,0) 100%
  );
}

.hero__intro{
  background: color-mix(in oklab, var(--surface) 75%, transparent 25%);
  border:1px solid color-mix(in oklab, var(--border) 70%, transparent 30%);
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  padding:clamp(1.25rem,2vw,2rem);
  max-width:min(48rem,90%);
  color: var(--text);
}
.hero__title{margin:0 0 .4rem}
.hero__tag{margin:0;color:var(--text)}
.hero__cite{margin-top:.9rem;color:var(--text-subtle);font-style:italic}

.card-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--space-5)}
.card-grid>*{grid-column:span 4}
@media (max-width:1000px){.card-grid>*{grid-column:span 6}}
@media (max-width:640px){.card-grid>*{grid-column:span 12}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-1);display:flex;flex-direction:column;height:100%}
.card a{text-decoration:none}
.card-cover{aspect-ratio:16/9;background:var(--elev);overflow:hidden}
.card-cover img{width:100%;height:100%;object-fit:cover}
.card-body{padding:1rem;display:grid;gap:.5rem}
.card-title{font-weight:800;font-size:1.125rem;color:var(--text)}
.card-meta{color:var(--text-subtle);font-size:.95rem}

.post{margin:var(--space-6) 0}
.post-header .meta{color:var(--text-subtle);font-size:.95rem}
.post .content{max-width:var(--measure)}
.post .content>*+*{margin-top:1.1em}
.post .content blockquote{
  border-left:3px solid var(--border);
  margin:1rem 0;padding:.75rem 1rem;
  background:color-mix(in oklab,var(--elev) 85%, transparent);
  color:var(--text-muted)
}

.meta{color:var(--text-subtle);font-size:.95rem}
.divider{height:1px;background:var(--border);margin:var(--space-6) 0}
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--brand);color:var(--brand-contrast);border-radius:var(--radius-sm);padding:.55rem .9rem;font-weight:700}
.btn.secondary{background:var(--elev);color:var(--text);border:1px solid var(--border)}

.hero__img{ opacity: .65; filter: contrast(1.05) saturate(1.02); }

.hero__intro{
  background: color-mix(in oklab, var(--surface) 75%, transparent 25%);
  border-color: color-mix(in oklab, var(--border) 70%, transparent 30%);
  color: var(--text);
}

.about { margin-top: var(--space-8); }
.about__grid { display: grid; gap: var(--space-6); max-width: var(--container); margin-inline: auto; }
.about__copy {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.about__title { font-size: var(--fs-xl); margin-bottom: var(--space-3); }
.about__content p + p { margin-top: var(--space-3); }
.about__cta { margin-top: var(--space-4); }
.about__media img { opacity: 0.3; transition: opacity 0.3s ease; }
.about__media img:hover { opacity: 1; }
.about__cta { margin-top: 1rem; position: relative; z-index: 3; }
.about__cta .btn { pointer-events: auto; position: relative; z-index: 3; }
.about__media { position: relative; z-index: 1; }
.about__content { position: relative; z-index: 2; }
.about, .about__grid, .about__copy { pointer-events: auto; }

main, .post, .home { padding: 1.25rem; }
@media (min-width: 768px) {
  main, .post, .home { padding: 2rem; }
}

.post { margin: 0 auto; max-width: var(--max-width); }

.post-hero { margin: 0 0 1.25rem 0; }
.post-hero img { width: 100%; height: auto; display: block; border-radius: 14px; }
.post-hero figcaption { color: var(--text-muted); font-size: 0.9rem; margin-top: 0.5rem; }

.post-title {
  font-size: clamp(2rem, 3vw + 1rem, 2.75rem);
  line-height: 1.1;
  margin: 0.25rem 0 0.5rem;
}
.post-meta { color: var(--text-muted); margin: 0 0 1.5rem 0; }

.prose { color: var(--text); font-size: 1.125rem; line-height: 1.7; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: 1.6rem; line-height: 1.2; margin-top: 2rem; }
.prose h3 { font-size: 1.3rem; line-height: 1.25; margin-top: 1.5rem; }
.prose p, .prose li { letter-spacing: 0.01em; }
.prose blockquote {
  border-left: 4px solid var(--border);
  padding: 0.5rem 1rem;
  color: var(--text-muted);
  background: color-mix(in oklab, var(--elev) 85%, transparent);
  border-radius: 8px;
}
.prose img { max-width: 100%; border-radius: 10px; }
.prose code { background: color-mix(in oklab, var(--elev) 80%, transparent); padding: 0.15em 0.35em; border-radius: 6px; }
.prose pre { overflow: auto; padding: 1rem; background: #0f172a; color: #e5e7eb; border-radius: 12px; }

.post-tags { margin-top: 1.25rem; color: var(--text-muted); }
.post-tags a { color: inherit; text-decoration: underline; }
.related { margin-top: 2.5rem; }
.related h2 { font-size: 1.25rem; margin-bottom: 0.75rem; }
.prevnext {
  display: flex; justify-content: space-between; align-items: center;
  margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--border);
}

.post-grid { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .post-grid { grid-template-columns: 1fr; } }
.card { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--card); }
.card__media img { display: block; width: 100%; height: auto; }
.card__body { padding: 1rem 1.25rem; }
.card__title { margin: 0 0 0.25rem; line-height: 1.25; font-size: 1.4rem; }
.card__meta { color: var(--text-muted); font-size: 0.95rem; }

.post-article{ margin: 2rem auto; max-width: 70ch; }
.post-hero{ margin: 0 0 1.25rem; }
.post-hero img{ width:100%; height:min(56vh,520px); object-fit:cover; border-radius:14px; display:block; }
.post-hero figcaption{ font-size:.92rem; color:var(--text-subtle); margin-top:.5rem; }

.post-header{ margin-bottom: .75rem; }
.post-title{ font-size: clamp(2rem, 3vw + 1rem, 2.6rem); line-height:1.15; margin:.25rem 0 .35rem; }
.post-meta{ color: var(--text-muted); font-size: .98rem; }

.article-body{
  font-size: 1.08rem;
  line-height: 1.75;
  letter-spacing: .005em;
}
.article-body > * + *{ margin-top: 1.05em; }
.article-body p{ text-wrap: pretty; }
.article-body h2{ font-size: 1.55rem; line-height:1.25; margin-top: 2rem; }
.article-body h3{ font-size: 1.28rem; line-height:1.3; margin-top: 1.5rem; }
.article-body blockquote{
  margin: 1.2rem 0;
  padding: .75rem 1rem;
  border-left: 4px solid var(--border);
  background: color-mix(in oklab, var(--elev) 85%, transparent);
  color: var(--text-muted);
  border-radius: 10px;
}
.article-body img{ max-width:100%; border-radius:10px; }
.article-body code{ background: color-mix(in oklab, var(--elev) 80%, transparent); padding:.12em .35em; border-radius:6px; }
.article-body pre{ overflow:auto; padding:1rem; background:#0f172a; color:#e5e7eb; border-radius:12px; }

.post-tags{ margin-top: 1.25rem; color: var(--text-muted); }
.post-tags a{ color: inherit; text-decoration: underline; }

.post-grid{ display:grid; gap:1rem; }
@media (min-width: 640px){ .post-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width:1024px){ .post-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-1);
}

.card__media{
  aspect-ratio: 3/2;
  max-height: 180px;
  overflow: hidden;
}
.card__media img{ width:100%; height:100%; object-fit: cover; display:block; }

.card__body{ padding: .75rem 1rem; }
.card__title{ font-size: 1.12rem; line-height: 1.3; margin: 0 0 .25rem; }
.card__meta{ color: var(--text-muted); font-size: .95rem; }

.post-header .post-meta {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--muted);
  margin: 0 0 1.5rem;
}
.post-title { color: var(--text) !important; display:block; }
.article-body, .article-body * { color: var(--text) !important; }

/* Full-bleed hero polish */
.hero { min-height: clamp(360px, 45vh, 560px); }
.hero__media { position: absolute; inset: 0; }
.hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__overlay { position: absolute; inset: 0; pointer-events: none; }
.hero__inner { padding: clamp(1.25rem, 2vw, 2rem) 0; }

/* Ensure the glass card never hugs page edges */
.hero .hero__intro { margin: 0 clamp(1rem, 4vw, 2rem); }

/* Home page spacing */
.intro.container { margin-top: 1rem; }

/* Active nav state (subtle) */
.nav a.active { color: var(--text); text-decoration: underline; text-decoration-thickness: 2px; }

.about__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center; /* makes text centered too */
}

.about__media {
  margin-top: 1.5rem;
}

.about__media img {
  max-width: 100%;
  height: auto;
}

.search-box {
  margin: 2rem 0;
}
#search {
  width: 100%;
  max-width: 30rem;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
}
#results {
  margin-top: 1rem;
  list-style: none;
  padding: 0;
}
#results li {
  margin-bottom: 0.75rem;
}
/* Make the header a single, non-wrapping row */
.site-head .inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;          /* ⬅ prevent wrapping */
  gap:1rem;
}

/* Left group: logo + search stay in a row */
.site-head__left{
  display:flex;
  align-items:center;
  gap:0.75rem;
  flex:1 1 auto;             /* can grow/shrink */
  min-width:0;               /* allow children to shrink */
}

/* Keep brand compact */
.brand{ display:flex; align-items:center; gap:.5rem; white-space:nowrap; }

/* Search box should NOT be full-width */
.search-box{ position:relative; flex:0 1 26rem; max-width:26rem; }
.search-box input{
  width:100%;                /* fill only its flex basis (not the whole row) */
  padding:.45rem .65rem;
  border:1px solid var(--color-border,#ccc);
  border-radius:.5rem;
}

/* Right group: nav + toggle tight together on the right */
.site-head__right{
  display:flex;
  align-items:center;
  gap:0.75rem;
  flex:0 0 auto;             /* fixed-size group */
}
.nav{ display:flex; align-items:center; gap:1rem; }
.theme-toggle{ flex:0 0 auto; }

/* Optional: on small screens stack nicely */
@media (max-width: 720px){
  .site-head .inner{ flex-wrap:wrap; row-gap:.75rem; }
  .site-head__left, .site-head__right{ width:100%; justify-content:space-between; }
  .search-box{ flex:1 1 auto; max-width:100%; }
}

/* Make search bar smaller */
.search-box {
  flex: 0 0 auto;       /* don’t grow, don’t shrink */
  width: 12rem;         /* set the size (try 10–14rem) */
  max-width: 100%;
}

.search-box input {
  width: 100%;
  padding: 0.35rem 0.5rem;  /* slightly smaller padding */
  font-size: 0.9rem;        /* smaller text */

/* Search bar container */
.search-box {
  flex: 0 0 auto;       /* don’t stretch across the header */
  width: 12rem;         /* adjust size (10–14rem looks good) */
  max-width: 100%;
  position: relative;
}

/* Search input */
.search-box input {
  width: 100%;
  padding: 0.35rem 0.5rem;
  font-size: 0.9rem;
  border: 1px solid #000;     /* black outline */
  border-radius: 0.4rem;      /* rounded corners */
  background: var(--color-bg, #fff);
  color: var(--color-text, #111);
}

.search-box input:focus {
  outline: none;
  border-color: #000;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.15);
}
.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;        /* ensures image corners match card corners */
  border-radius: 1rem;     /* keep your rounded corners */
}

.card__media {
  margin: 0;               /* remove spacing around image */
  padding: 0;
  width: 100%;
}

.card__media img {
  display: block;
  width: 100%;             /* make image fill card */
  height: auto;
  object-fit: cover;       /* crop instead of squish */
}

.site-head .inner{gap:.75rem;padding-block:.65rem}
.nav a{opacity:.9}
.nav a:hover{opacity:1;text-decoration:underline}
.nav a.active{color:var(--text);text-decoration:underline;text-decoration-thickness:2px}

.card{border:1px solid color-mix(in oklab,var(--border) 80%, transparent);transition:transform .16s ease, box-shadow .16s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.12)}
.card__media{aspect-ratio: 16/9;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;display:block}
.card__title{font-weight:800}

:root{ --radius:14px; }
.card, .about__copy, .hero__intro, .prose img, .post-hero img{ border-radius: var(--radius); }

html, body, .card, .hero__intro{ transition: background-color .2s ease, color .2s ease, border-color .2s ease }

.hero__intro{max-width:min(46rem,90%);backdrop-filter:saturate(140%) blur(6px)}
.hero__tag{opacity:.9}
.intro.container .lede{max-width:56ch}