/* ═══════════════════════════════════════════════════════════════════════════
   NanoCMS base.css — token-driven theme foundation.
   Themes override the --t-* tokens in their style.css; this file never
   hardcodes a palette below the :root blocks.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens (Clean defaults) ────────────────────────────────────────────── */
:root{
  --t-font-head:-apple-system,'Segoe UI',system-ui,Roboto,'Helvetica Neue',sans-serif;
  --t-font-body:-apple-system,'Segoe UI',system-ui,Roboto,'Helvetica Neue',sans-serif;

  --t-bg:#fafaf9;
  --t-surface:#ffffff;
  --t-text:#37352f;
  --t-heading:#111110;
  --t-muted:#77726a;
  --t-border:#e7e4de;
  --t-accent:#2563eb;
  --t-accent-2:#0d9488;
  --t-accent-contrast:#ffffff;
  --t-header-bg:#ffffff;
  --t-header-text:#111110;

  --t-radius:10px;
  --t-max:1160px;
  --t-scale:1;
  --t-head-weight:750;
  --t-head-spacing:-0.015em;
  --t-shadow:0 1px 2px rgba(17,17,16,.05),0 12px 32px rgba(17,17,16,.07);
}

/* ── Bridge: recolor blocks.css from theme tokens ───────────────────────── */
:root{
  --blk-bg:var(--t-bg);
  --blk-surface:var(--t-surface);
  --blk-text:var(--t-text);
  --blk-heading:var(--t-heading);
  --blk-muted:var(--t-muted);
  --blk-border:var(--t-border);
  --blk-accent:var(--t-accent);
  --blk-accent2:var(--t-accent-2);
  --blk-radius:var(--t-radius);
  --blk-max:var(--t-max);
  --blk-shadow:var(--t-shadow);
  --blk-font-head:var(--t-font-head);
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
section[id],div[id]{scroll-margin-top:88px}
body{
  font-family:var(--t-font-body);
  font-size:calc(1rem * var(--t-scale));
  line-height:1.65;
  color:var(--t-text);
  background:var(--t-bg);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--t-accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--t-accent);outline-offset:2px}
::selection{background:var(--t-accent);color:var(--t-accent-contrast)}

/* ── Typography ─────────────────────────────────────────────────────────── */
h1,h2,h3,h4,h5{
  font-family:var(--t-font-head);
  font-weight:var(--t-head-weight);
  letter-spacing:var(--t-head-spacing);
  line-height:1.12;
  color:var(--t-heading);
  text-wrap:balance;
}
h1{font-size:clamp(1.9rem, 4.5vw, calc(3rem * var(--t-scale)))}
h2{font-size:clamp(1.4rem, 3vw, calc(2rem * var(--t-scale)))}
h3{font-size:clamp(1.1rem, 2vw, calc(1.3rem * var(--t-scale)))}
p{margin-bottom:1rem}
ul,ol{padding-left:1.4rem;margin-bottom:1rem}
.lead{
  font-size:clamp(1.05rem, 1.8vw, 1.25rem);
  color:var(--t-muted);
  max-width:56ch;
}

/* ── Skip link ──────────────────────────────────────────────────────────── */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--t-accent);color:var(--t-accent-contrast);
  padding:8px 16px;border-radius:0 0 var(--t-radius) 0;
}
.skip-link:focus{left:0}

/* ── Layout containers ──────────────────────────────────────────────────── */
.container{max-width:var(--t-max);margin:0 auto;padding:0 22px}
.container-narrow{max-width:min(68ch, 100% - 44px);margin:0 auto;padding:0 22px}

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--t-header-bg);
  color:var(--t-header-text);
  border-bottom:1px solid color-mix(in srgb, var(--t-header-text) 12%, transparent);
}
.header-inner{
  max-width:var(--t-max);
  margin:0 auto;
  padding:0 22px;
  min-height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.site-logo{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--t-font-head);
  font-weight:var(--t-head-weight);
  font-size:1.12rem;
  letter-spacing:var(--t-head-spacing);
  color:var(--t-header-text);
  white-space:nowrap;
}
.site-logo:hover{text-decoration:none;color:var(--t-header-text)}
.site-logo img{height:34px;width:auto}
.site-logo::before{
  content:'';width:10px;height:10px;border-radius:50%;
  background:linear-gradient(135deg, var(--t-accent), var(--t-accent-2));
  box-shadow:0 0 0 4px color-mix(in srgb, var(--t-accent) 16%, transparent);
  flex-shrink:0;
}
.site-logo:has(img)::before{display:none}

/* Desktop nav */
.site-nav ul{display:flex;gap:4px;list-style:none;align-items:center;flex-wrap:wrap;padding:0;margin:0}
.site-nav a{
  display:block;padding:8px 13px;border-radius:999px;
  font-size:.9rem;font-weight:550;
  color:color-mix(in srgb, var(--t-header-text) 78%, transparent);
  transition:background .15s ease, color .15s ease;
}
.site-nav a:hover,.site-nav a:focus{
  background:color-mix(in srgb, var(--t-header-text) 10%, transparent);
  color:var(--t-header-text);
  text-decoration:none;
}

/* Mobile nav (burger) */
.nav-toggle{
  display:none;
  background:transparent;border:1px solid color-mix(in srgb, var(--t-header-text) 24%, transparent);
  border-radius:8px;color:var(--t-header-text);
  width:40px;height:40px;cursor:pointer;
  align-items:center;justify-content:center;
}
@media (max-width: 767px){
  .nav-toggle{display:inline-flex}
  .site-nav{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    background:var(--t-header-bg);
    border-bottom:1px solid color-mix(in srgb, var(--t-header-text) 12%, transparent);
    padding:8px 14px 14px;
    box-shadow:var(--t-shadow);
  }
  body.nav-open .site-nav{display:block}
  .site-nav ul{flex-direction:column;align-items:stretch;gap:2px}
  .site-nav a{border-radius:8px;padding:11px 13px;font-size:1rem}
}

/* ── Page hero (blog/gallery/fallback home headers) ─────────────────────── */
.page-hero{
  padding:clamp(52px, 9vw, 104px) 0 clamp(34px, 6vw, 64px);
}
.page-hero h1{margin-bottom:.5rem}
.page-hero .lead{margin-bottom:0}

/* ── Post grid + cards ──────────────────────────────────────────────────── */
.post-grid-section{padding:clamp(28px, 5vw, 56px) 0 clamp(56px, 9vw, 104px)}
.post-grid-section > .container > h2{margin-bottom:1.4rem}
.post-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:26px;
}
.post-card{
  background:var(--t-surface);
  border:1px solid var(--t-border);
  border-radius:var(--t-radius);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--t-shadow)}
.post-card-media{display:block;aspect-ratio:16/10;overflow:hidden}
.post-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.post-card:hover .post-card-media img{transform:scale(1.03)}
.post-card-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:.45rem;flex:1}
.post-card-date{
  font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--t-muted);
}
.post-card h3{font-size:1.15rem;line-height:1.3}
.post-card h3 a{color:var(--t-heading)}
.post-card h3 a:hover{color:var(--t-accent);text-decoration:none}
.post-card p{color:var(--t-muted);font-size:.94rem;margin-bottom:.3rem;flex:1}
.read-more{
  font-size:.88rem;font-weight:650;color:var(--t-accent);
  display:inline-flex;align-items:center;gap:.3em;
}
.read-more::after{content:'→';transition:transform .15s ease}
.read-more:hover{text-decoration:none}
.read-more:hover::after{transform:translateX(3px)}
.empty{color:var(--t-muted);padding:40px 0;text-align:center}

/* ── Single post ────────────────────────────────────────────────────────── */
.post-header{padding:clamp(52px, 9vw, 104px) 0 clamp(22px, 4vw, 40px)}
.post-header time{
  font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--t-muted);display:block;margin-bottom:.7rem;
}
.post-header h1{max-width:24ch}
.post-cover{margin-bottom:clamp(22px, 4vw, 44px)}
.post-cover img{
  width:100%;max-height:540px;object-fit:cover;
  border-radius:var(--t-radius);
}
.post-content{padding-bottom:clamp(56px, 9vw, 104px);font-size:1.03em}
.post-content h2,.post-content h3{margin:1.6em 0 .55em}
.post-content img{border-radius:var(--t-radius);margin:1.2em 0}
.post-content blockquote{
  border-left:3px solid var(--t-accent);
  padding:.35em 0 .35em 1.1em;
  margin:1.4em 0;
  color:var(--t-muted);
  font-style:italic;
}
.post-content pre{
  background:color-mix(in srgb, var(--t-heading) 6%, var(--t-bg));
  border:1px solid var(--t-border);
  border-radius:var(--t-radius);
  padding:14px 16px;overflow-x:auto;margin:1.2em 0;
  font-size:.9em;
}
.post-content a{text-decoration:underline;text-underline-offset:2px}
.post-content hr{border:none;border-top:1px solid var(--t-border);margin:2em 0}

/* Static page free content */
.page-body{min-height:40vh}
.page-body .content-wrap{
  max-width:min(68ch, 100% - 44px);margin:0 auto;
  padding:clamp(52px, 9vw, 104px) 22px;
}
.page-body .content-wrap h1{margin-bottom:1rem}

/* ── Gallery ────────────────────────────────────────────────────────────── */
.tpl-gallery main > .container{padding-bottom:clamp(56px, 9vw, 104px)}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:18px;
}
.gallery-item{
  border-radius:var(--t-radius);
  overflow:hidden;
  background:var(--t-surface);
  border:1px solid var(--t-border);
}
.gallery-item img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .3s ease;
}
.gallery-item:hover img{transform:scale(1.04)}
.gallery-item figcaption{
  padding:10px 14px;font-size:.85rem;color:var(--t-muted);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer{
  border-top:1px solid var(--t-border);
  margin-top:auto;
}
.footer-inner{
  max-width:var(--t-max);margin:0 auto;
  padding:30px 22px;
  font-size:.88rem;color:var(--t-muted);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
}
.footer-inner p{margin:0}
.footer-inner a{color:var(--t-muted)}

/* Sticky-footer page frame */
body{min-height:100vh;display:flex;flex-direction:column}
main{flex:1}

/* ── Small screens polish ───────────────────────────────────────────────── */
@media (max-width: 480px){
  .post-grid{gap:18px}
  .container,.container-narrow,.header-inner,.footer-inner{padding-left:16px;padding-right:16px}
}