/* ==========================================================
   SineZero site stylesheet — built on the SineZero design
   system tokens (paper/surface/ink/steel/line/signal).
   ========================================================== */
:root{
  --paper:   #F5F3EF;
  --surface: #FFFFFF;
  --ink:     #1C1B19;
  --steel:   #6B6862;
  --line:    #DEDAD3;
  --signal:  #A8502F;

  --font-ui:   'Inter', -apple-system, sans-serif;
  --font-mark: 'Space Grotesk', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
}


*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--font-ui); font-size:16px; line-height:1.65;
}
::selection{ background:var(--signal); color:#fff; }
a{ color:var(--signal); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{ max-width:760px; margin:0 auto; padding:0 var(--space-5); }

/* ---------- header ---------- */
.topbar{ border-bottom:1px solid var(--line); position:sticky; top:0; background:color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter:blur(8px); z-index:10; }
/* ---------- header ---------- */
/* Solid, flat header — no blur. Backdrop-filter was creating a
   containing block for the fixed mobile nav, which is why it rendered
   clipped and see-through. It was also the wrong call stylistically:
   frosted glass reads as glassmorphism, which this system rejects. */
.topbar{ border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--paper); z-index:30; }
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-4); padding:var(--space-4) var(--space-3); max-width:920px;
}

/* logo — scales by height, width follows the SVG's own aspect ratio */
.wordmark{ display:flex; align-items:center; color:var(--ink); margin-right:auto; }
.wordmark:hover{ text-decoration:none; }
.logo-mark{ height:38px; width:auto; display:block; color:var(--ink); }

/* desktop nav */
.mainnav{ display:flex; gap:var(--space-5); align-items:center; }
.mainnav a{ color:var(--steel); font-size:14px; }
.mainnav a:hover{ color:var(--signal); text-decoration:none; }
.mainnav a.current{ color:var(--ink); }
.mainnav a.rss{ font-family:var(--font-mono); font-size:11px; border:1px solid var(--line); border-radius:100px; padding:3px 9px; }
.mainnav-eyebrow{ display:none; }

/* hamburger toggle — bordered control, same visual family as
   buttons/inputs/dropdowns rather than a bare floating icon */
.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:36px; height:36px; flex-shrink:0;
  background:var(--surface); border:1px solid var(--line); border-radius:6px;
  padding:0; cursor:pointer; color:var(--ink); margin-left:var(--space-3);
  transition:border-color .15s ease, color .15s ease;
}
.nav-toggle:hover{ border-color:var(--signal); color:var(--signal); }
.nav-toggle svg{ width:18px; height:18px; display:block; }
.nav-toggle .icon-close{ display:none; }
.nav-toggle.is-open .icon-open{ display:none; }
.nav-toggle.is-open .icon-close{ display:block; }

/* ---------- responsive nav ---------- */
@media (max-width:640px){
  .nav-toggle{ display:flex; }

  .mainnav{
    position:fixed;
    top:var(--header-h, 61px); left:0; right:0;
    height:calc(100vh - var(--header-h, 61px));
    background:var(--surface);
    border-top:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:0;
    padding:var(--space-5);
    overflow-y:auto;
    transform:translateY(-6px); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
    z-index:25;
  }
  .mainnav.is-open{
    opacity:1; transform:translateY(0); visibility:visible; pointer-events:auto;
    transition:opacity .16s ease, transform .16s ease;
  }
  .mainnav-eyebrow{
    display:block; font-family:var(--font-mono); font-size:11px;
    letter-spacing:.08em; text-transform:uppercase; color:var(--steel);
    margin-bottom:var(--space-3);
  }
  .mainnav a{
    width:100%; padding:var(--space-4) 0; font-size:17px;
    border-bottom:1px solid var(--line); color:var(--ink);
  }
  .mainnav a.rss{
    display:inline-block; width:auto; border:1px solid var(--line);
    border-radius:100px; padding:5px 12px; margin-top:var(--space-4);
    font-size:11px; color:var(--steel);
  }

  body.nav-locked{ overflow:hidden; }
}

/* ---------- hero / home ---------- */
.hero{ padding:var(--space-8) 0 var(--space-6); }
.eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--signal); margin:0 0 var(--space-3); }
.hero h2{ font-family:var(--font-mark); font-size:34px; letter-spacing:-.01em; margin:0 0 var(--space-4); }
.hero p{ color:var(--steel); max-width:56ch; }

.home-section{ padding:var(--space-6) 0 var(--space-8); border-top:1px solid var(--line); }
.home-section h2{ font-family:var(--font-mark); font-size:14px; text-transform:uppercase; letter-spacing:.06em; color:var(--steel); margin-bottom:var(--space-4); }

/* ---------- post list ---------- */
.post-list{ display:flex; flex-direction:column; margin-bottom:var(--space-5); }
.post-row{ display:flex; align-items:baseline; gap:var(--space-4); padding:var(--space-3) 0; border-bottom:1px solid var(--line); color:var(--ink); }
.post-row:hover{ color:var(--signal); text-decoration:none; }
.post-date{ font-family:var(--font-mono); font-size:12px; color:var(--steel); white-space:nowrap; width:88px; flex-shrink:0; }
.post-title{ font-weight:500; flex:1; }
.post-arrow{ color:var(--steel); }
.post-tags{ font-family:var(--font-mono); font-size:11px; color:var(--steel); white-space:nowrap; }
.post-summary{ color:var(--steel); font-size:14px; margin:2px 0 var(--space-2); }
.post-list-full .post-row{ flex-wrap:wrap; }

/* ---------- article page ---------- */
.page{ padding:var(--space-7) 0 var(--space-8); }
.page h1{ font-family:var(--font-mark); font-size:32px; letter-spacing:-.01em; margin:0 0 var(--space-5); }
.page-header{ padding-top:var(--space-7); }
.page h2{ font-family:var(--font-mark); font-size:20px; margin-top:var(--space-6); }
.page h3{ font-family:var(--font-mark); font-size:17px; }
.page p{ margin:0 0 var(--space-4); }
.page ul{ padding-left:1.2em; }
.page li{ margin-bottom:6px; }
.page code{ font-family:var(--font-mono); background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:1px 5px; font-size:14px; }
.page a{ text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:2px; }

.journal-post .post-meta{ font-family:var(--font-mono); font-size:12px; color:var(--steel); margin-bottom:var(--space-2); }
.post-footer{ margin-top:var(--space-6); border-top:1px solid var(--line); padding-top:var(--space-5); }

/* ---------- changelog ---------- */
.changelog-entry{ display:flex; gap:var(--space-5); padding:var(--space-5) 0; border-bottom:1px solid var(--line); }
.changelog-date{ font-family:var(--font-mono); font-size:12px; color:var(--steel); width:88px; flex-shrink:0; padding-top:3px; }
.changelog-body h3{ margin:0 0 var(--space-2); }

/* ---------- buttons (shared with design system) ---------- */
.btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-ui); font-weight:500; font-size:14px; border-radius:6px; padding:9px 18px; cursor:pointer; border:1px solid transparent; }
.btn-primary{ background:var(--signal); color:#fff; }
.btn-secondary{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-secondary:hover{ border-color:var(--signal); color:var(--signal); text-decoration:none; }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-sm{ padding:6px 12px; font-size:12.5px; }

/* ---------- footer ---------- */
.sitefooter{ border-top:1px solid var(--line); padding:var(--space-6) 0; margin-top:var(--space-7); }
.sitefooter p{ font-family:var(--font-mono); font-size:12px; color:var(--steel); margin:0 0 4px; }
.sitefooter .fine a{ color:var(--steel); }

@media (max-width:640px){
  .hero h2{ font-size:26px; }
  .post-date{ width:auto; }
}