/* ============ SYSTEM TOKENS ============ */
:root{
  --color-bg:        #E9E6DC;
  --color-bg-soft:   #F3F1E9;
  --color-surface:   #FBFAF6;
  --color-ink:       #24261F;
  --color-ink-soft:  #5A5D50;
  --color-ink-faint: #8C8D7D;
  --color-line:      #CBC6B4;
  --color-accent:    #5E6E52;
  --color-accent-deep:#39432F;
  --color-dusk:      #23261F;
  --color-dusk-soft: #C9CBBE;
  --color-dusk-line: #3A3E31;
  --color-dusk-tint: rgba(201,203,190,0.07);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --edge: clamp(1.5rem, 6vw, 6rem);
  --radius: 3px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body{
  margin:0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a{ color: inherit; }
h1,h2,h3,h4,p,figure{ margin:0; }
ul{ list-style:none; margin:0; padding:0; }
button, input{ font-family: inherit; }

:focus-visible{ outline: 2px solid var(--color-accent-deep); outline-offset: 3px; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}
.eyebrow--on-dusk{ color: var(--color-dusk-soft); }

section{ padding: clamp(4rem, 9vw, 8rem) var(--edge); }
.wrap{ max-width: 1180px; margin: 0 auto; }

.reveal{ opacity:0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

/* ============ NAV ============ */
.nav{
  position: sticky; top:0; z-index: 40;
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
  padding: 1.2rem var(--edge);
  background: rgba(233,230,220,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-line);
}
.logotype{
  justify-self:start;
  font-family: var(--font-display); font-weight:600; font-size:1.15rem;
  display:flex; align-items:center; gap:0.55rem;
  text-decoration:none; color: var(--color-ink);
}
.logotype .mark{ width:9px; height:9px; border-radius:50%; background: var(--color-accent); flex-shrink:0; }
.nav-links{ justify-self:center; display:flex; gap:2.25rem; }
.nav-links a{ text-decoration:none; font-size:0.9rem; color: var(--color-ink-soft); transition: color .2s ease; }
.nav-links a:hover{ color: var(--color-ink); }
.nav-cta{
  justify-self:end;
  font-family: var(--font-mono); font-size:0.83rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius);
  text-decoration:none; color: var(--color-ink);
  white-space:nowrap;
  transition: background .2s ease, color .2s ease;
}
.nav-cta:hover{ background: var(--color-ink); color: var(--color-bg-soft); }

/* --- mobile nav toggle --- */
.nav-toggle{
  display:none;
  align-items:center; gap:0.55rem;
  justify-self:end;
  background:none; border:none; cursor:pointer;
  padding:0.5rem;
}
.nav-toggle-bars{ display:flex; flex-direction:column; gap:4px; }
.nav-toggle-bars span{
  display:block; width:20px; height:1px; background: var(--color-ink);
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle-label{
  font-family: var(--font-mono); font-size:0.72rem; letter-spacing:0.04em; color: var(--color-ink-soft);
}
.nav-toggle.is-open .nav-toggle-bars span:nth-child(1){ transform: translateY(5px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bars span:nth-child(2){ opacity:0; }
.nav-toggle.is-open .nav-toggle-bars span:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

/* --- mobile nav panel --- */
.mobile-nav{
  display:none;
  position: fixed;
  top: var(--nav-h, 64px);
  left:0; right:0;
  z-index: 39;
  max-height: calc(100vh - var(--nav-h, 64px));
  overflow-y: auto;
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-line);
}
.mobile-nav.is-open{ display:block; }
.mobile-nav-inner{
  padding: 0.5rem var(--edge) 1.25rem;
  display:flex; flex-direction:column;
  opacity:0; transform: translateY(-8px);
  transition: opacity .3s ease, transform .3s ease;
}
.mobile-nav.is-open .mobile-nav-inner{ opacity:1; transform:none; }
.mobile-nav-inner a{
  text-decoration:none; color: var(--color-ink-soft);
  font-size:0.95rem; padding: 0.9rem 0;
  border-bottom: 1px solid var(--color-line);
}
.mobile-nav-inner a:last-of-type{ border-bottom:none; }
.mobile-nav-inner a:hover, .mobile-nav-inner a:focus-visible{ color: var(--color-ink); }
.mobile-nav-cta{
  margin-top:0.75rem !important;
  font-family: var(--font-mono); font-size:0.83rem;
  border: 1px solid var(--color-ink) !important;
  border-radius: var(--radius);
  padding: 0.75rem 1rem !important;
  text-align:center; color: var(--color-ink) !important;
}

@media (max-width: 780px){
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav{ grid-template-columns: 1fr auto; }
  .nav-toggle{ display:inline-flex; }
}
@media (min-width: 781px){
  .mobile-nav{ display:none !important; }
}

/* --- lock body scroll while mobile menu is open --- */
body.mobile-nav-open{
  position: fixed;
  top: calc(-1 * var(--scroll-y, 0px));
  left:0; right:0;
  overflow:hidden;
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family: var(--font-mono); font-size:0.86rem; letter-spacing:0.02em;
  padding: 0.9rem 1.4rem;
  border-radius: var(--radius);
  text-decoration:none; cursor:pointer;
  border: 1px solid transparent;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:active{ transform: translateY(1px); }
.btn--primary{ background: var(--color-ink); color: var(--color-bg-soft); border-color: var(--color-ink); }
.btn--primary:hover{ background: var(--color-accent-deep); border-color: var(--color-accent-deep); }
.btn--text{ padding: 0.9rem 0; color: var(--color-ink-soft); border-bottom: 1px solid var(--color-ink-faint); border-radius:0; }
.btn--text:hover{ color: var(--color-ink); border-color: var(--color-ink); }
.btn--on-dusk.btn--primary{ background: var(--color-dusk-soft); color: var(--color-dusk); border-color: var(--color-dusk-soft); }
.btn--on-dusk.btn--primary:hover{ background:#fff; border-color:#fff; }
.cta-row{ display:flex; gap:1.75rem; align-items:center; flex-wrap:wrap; }

/* ============ SECTION HEAD ============ */
.section-head{ max-width: 52ch; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.section-head.centered{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem); line-height:1.2;
  margin-top:0.85rem;
}
.section-head p.sub{ color: var(--color-ink-soft); margin-top:1rem; max-width:58ch; }
.section-head.centered p.sub{ margin-left:auto; margin-right:auto; }

/* ============ HERO ============ */
.hero{ padding-top: clamp(3.25rem, 7vw, 5.5rem); }
.hero-grid{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem, 6vw, 5rem); align-items:center; }
.hero h1{
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(2.3rem, 4.6vw, 3.4rem); line-height:1.14;
  margin: 1.1rem 0 1.5rem; max-width: 15ch;
}
.hero h1 em{ font-style:italic; font-weight:400; color: var(--color-accent-deep); }
.hero p.lede{ font-size:1.05rem; color: var(--color-ink-soft); max-width:44ch; margin-bottom:2.25rem; }

/* --- feed-frame mockup --- */
.feed-frame{
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  padding: 1.5rem 1.4rem 1.6rem;
  box-shadow: 0 30px 60px -32px rgba(36,38,31,0.28);
}
.feed-frame-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.1rem; }
.feed-frame-top .who{ font-family: var(--font-mono); font-size:0.72rem; color: var(--color-ink-faint); letter-spacing:0.05em; }
.expiry-chip{
  font-family: var(--font-mono); font-size:0.66rem; letter-spacing:0.03em;
  color: var(--color-accent-deep);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 0.32rem 0.75rem;
}
.feed-post{ padding-bottom:1.1rem; margin-bottom:1.1rem; border-bottom:1px solid var(--color-line); }
.feed-post-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:0.5rem; }
.feed-post-head .name{ font-family: var(--font-mono); font-size:0.76rem; color: var(--color-ink); }
.feed-post-head .when{ font-family: var(--font-mono); font-size:0.66rem; color: var(--color-ink-faint); }
.feed-post p{ font-size:0.92rem; color: var(--color-ink-soft); line-height:1.55; }

.comment-section .eyebrow{ display:block; margin-bottom:0.75rem; }
.comment{ display:flex; gap:0.5rem; font-size:0.86rem; padding:0.5rem 0; }
.comment .who{ font-family: var(--font-mono); font-size:0.74rem; color: var(--color-ink); flex-shrink:0; }
.comment .text{ color: var(--color-ink-soft); }
.comment--recent{ opacity:1; }
.comment--older{ opacity:0.68; }
.comment--hidden{ position:relative; margin-top:0.35rem; border-radius:6px; overflow:hidden; }
.comment--hidden .comment-row{ filter: blur(3.5px); user-select:none; padding:0.5rem 0; }
.comment--hidden .hidden-label{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background: rgba(251,250,246,0.72);
  font-family: var(--font-mono); font-size:0.66rem; letter-spacing:0.03em;
  color: var(--color-ink-faint); padding: 0 1rem;
}

@media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; } }

/* ============ MANIFESTO (dusk) ============ */
.manifesto{ background: var(--color-dusk); color: var(--color-dusk-soft); }
.manifesto .wrap{ max-width: 900px; }
.manifesto blockquote{
  font-family: var(--font-display); font-style:italic; font-weight:400;
  font-size: clamp(1.55rem, 3.2vw, 2.3rem); line-height:1.65;
  color:#F4F2EA; margin:1.5rem 0 0;
}

/* ============ PILLARS ============ */
.pillar-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); }
.pillar{ background: var(--color-bg); padding: 2.25rem 2rem; }
.pillar .eyebrow{ margin-bottom:1.3rem; }
.pillar h3{ font-family: var(--font-display); font-weight:500; font-size:1.3rem; line-height:1.3; margin-bottom:0.85rem; }
.pillar p{ color: var(--color-ink-soft); font-size:0.94rem; }
@media (max-width: 820px){ .pillar-grid{ grid-template-columns:1fr; } }

/* ============ SPLIT ROWS ============ */
.split-row{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem);
  align-items:center;
  padding: clamp(2.5rem,5vw,3.5rem) 0;
  border-top: 1px solid var(--color-line);
}
.split-row:last-child{ border-bottom: 1px solid var(--color-line); }
.split-row.reverse .split-copy{ order:2; }
.split-row.reverse .split-visual{ order:1; }
.split-copy h3{ font-family: var(--font-display); font-weight:500; font-size:1.55rem; margin: 0.6rem 0 0.9rem; }
.split-copy p{ color: var(--color-ink-soft); max-width: 46ch; }

.orbit{
  position:relative; width: 220px; height:220px; margin:0 auto;
  border: 1px solid var(--color-line); border-radius:50%;
}
.orbit .dot{ position:absolute; border-radius:50%; }
.orbit .dot--core{ width:14px; height:14px; background: var(--color-accent); }
.orbit .dot--far{ width:8px; height:8px; border: 1px solid var(--color-ink-faint); background:transparent; }

.reminder-card{
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 8px;
  padding: 1.5rem 1.6rem; max-width: 340px; margin: 0 auto;
}
.reminder-card .eyebrow{ margin-bottom: 0.75rem; }
.reminder-card p{ color: var(--color-ink); font-size:0.94rem; margin-bottom:1.1rem; }
.reminder-chip{
  display:inline-block; font-family: var(--font-mono); font-size:0.74rem;
  border: 1px solid var(--color-ink); border-radius: var(--radius);
  padding: 0.4rem 0.85rem;
}

@media (max-width: 820px){
  .split-row, .split-row.reverse{ grid-template-columns:1fr; }
  .split-row.reverse .split-copy, .split-row.reverse .split-visual{ order:initial; }
}

/* ============ ANTI-LOCK-IN ============ */
.lockin{ background: var(--color-bg-soft); }
.lockin-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2.5rem,6vw,4.5rem); align-items:center; }
.lockin-lead{ font-family: var(--font-display); font-size: clamp(1.5rem, 2.8vw, 2rem); line-height:1.35; margin: 1rem 0 1.25rem; }
.lockin-lead .soft{ display:block; font-style:italic; color: var(--color-accent-deep); font-weight:400; }
.lockin p.body{ color: var(--color-ink-soft); max-width: 48ch; }

.routing-card{
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 10px;
  padding: 1.6rem 1.6rem 1.7rem;
}
.routing-card-head{ padding-bottom:1rem; margin-bottom:1.1rem; border-bottom: 1px solid var(--color-line); }
.routing-card-head .name{ font-family: var(--font-display); font-weight:500; font-size:1.1rem; }
.routing-card-head .sub{ font-family: var(--font-mono); font-size:0.68rem; color: var(--color-ink-faint); margin-top:0.3rem; display:block; }
.routing-chips{ display:flex; flex-wrap:wrap; gap:0.6rem; }
.chip{
  font-family: var(--font-mono); font-size:0.72rem;
  border-radius: var(--radius); padding: 0.45rem 0.75rem;
  border: 1px solid var(--color-line);
}
.chip--verified{ border-color: var(--color-accent); color: var(--color-accent-deep); }
.chip--shared{ color: var(--color-ink-soft); }

@media (max-width: 820px){ .lockin-grid{ grid-template-columns:1fr; } }

/* ============ TRANSPARENCY MATRIX ============ */
.matrix-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); }
.matrix-panel{ background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 8px; overflow:hidden; }
.matrix-panel-head{
  padding: 1.3rem 1.5rem; border-bottom: 1px solid var(--color-line);
  font-family: var(--font-mono); font-size:0.74rem; letter-spacing:0.08em; text-transform:uppercase;
}
.matrix-panel--secures .matrix-panel-head{ color: var(--color-accent-deep); }
.matrix-panel--not .matrix-panel-head{ color: var(--color-ink-faint); }
.matrix-item{ display:flex; gap:0.85rem; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--color-line); font-size:0.92rem; color: var(--color-ink-soft); }
.matrix-item:last-child{ border-bottom:none; }
.matrix-item .mark{ font-family: var(--font-mono); flex-shrink:0; }
.matrix-panel--secures .mark{ color: var(--color-accent); }
.matrix-panel--not .mark{ color: var(--color-ink-faint); }
@media (max-width: 820px){ .matrix-grid{ grid-template-columns:1fr; } }

/* ============ ONBOARDING + FOOTER (dusk) ============ */
.onboarding{ background: var(--color-dusk); color: var(--color-dusk-soft); text-align:center; }
.onboarding .wrap{ max-width: 640px; }
.onboarding h2{ font-family: var(--font-display); font-weight:500; font-size: clamp(1.9rem,3.6vw,2.6rem); color:#F4F2EA; margin-top:1rem; }
.callout{
  margin: clamp(2rem,5vw,3rem) 0; text-align:left;
  background: var(--color-dusk-tint); border: 1px solid var(--color-dusk-line); border-radius:8px;
  padding: 1.9rem 2.1rem;
}
.callout p{ font-size:0.94rem; line-height:1.65; color: var(--color-dusk-soft); }
.signup{ display:flex; gap:0.75rem; justify-content:center; flex-wrap:wrap; margin-top: 0.5rem; }
.signup input[type="email"]{
  background: transparent; border: 1px solid var(--color-dusk-line); border-radius: var(--radius);
  padding: 0.9rem 1.1rem; color:#F4F2EA; font-family: var(--font-mono); font-size:0.86rem;
  min-width: 260px; flex: 1 1 260px;
}
.signup input[type="email"]::placeholder{ color:#6C6F60; }
.signup input[type="email"]:focus{ outline: 2px solid var(--color-dusk-soft); outline-offset:2px; }
.fine{ margin-top:1.1rem; font-family: var(--font-mono); font-size:0.7rem; color:#6C6F60; }

footer{ border-top: 1px solid var(--color-dusk-line); padding: 2.5rem var(--edge); }
.footer-grid{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.5rem; }
.footer-links{ display:flex; gap:1.75rem; flex-wrap:wrap; }
.footer-links a{ text-decoration:none; color: var(--color-dusk-soft); font-size:0.82rem; opacity:0.85; }
.footer-links a:hover{ opacity:1; }
.footer-copy{ font-family: var(--font-mono); font-size:0.68rem; color:#6C6F60; }
.back-to-top{ font-family: var(--font-mono); font-size:0.72rem; color: var(--color-dusk-soft); text-decoration:none; }
.back-to-top:hover{ color:#fff; }

/* ============ BLOG INDEX ============ */
.blog-index .wrap{ max-width: 900px; }

.post-list{ border-top: 1px solid var(--color-line); }
.post-list-item{ border-bottom: 1px solid var(--color-line); }
.post-list-link{
  display:grid;
  grid-template-columns: 9rem 1fr auto;
  align-items:baseline;
  gap: 0.5rem 1.5rem;
  padding: 1.75rem 0;
  text-decoration:none;
  color: var(--color-ink);
  transition: opacity .2s ease;
}
.post-list-link:hover{ opacity: 0.7; }
.post-list-link:hover .post-list-arrow{ transform: translateX(3px); }
.post-list-meta{ grid-column: 1; grid-row: 1; }
.post-list-date{
  font-family: var(--font-mono); font-size:0.72rem; letter-spacing:0.04em;
  color: var(--color-ink-faint);
}
.post-list-title{
  grid-column: 2; grid-row: 1;
  font-family: var(--font-display); font-weight:500; font-size:1.3rem; line-height:1.3;
}
.post-list-arrow{
  grid-column: 3; grid-row: 1;
  font-family: var(--font-mono); color: var(--color-ink-faint);
  transition: transform .2s ease;
}
.post-list-excerpt{
  grid-column: 2 / span 2; grid-row: 2;
  color: var(--color-ink-soft); font-size:0.92rem; max-width: 56ch; margin-top: 0.35rem;
}
.post-list-empty{ color: var(--color-ink-soft); padding: 2rem 0; border-top: 1px solid var(--color-line); }

@media (max-width: 640px){
  .post-list-link{ grid-template-columns: 1fr auto; }
  .post-list-meta{ grid-column: 1 / span 2; grid-row: 1; margin-bottom: 0.3rem; }
  .post-list-title{ grid-column: 1; grid-row: 2; }
  .post-list-arrow{ grid-column: 2; grid-row: 2; }
  .post-list-excerpt{ grid-column: 1 / span 2; grid-row: 3; }
}

/* ============ POST HEADER + BODY ============ */
.post-wrap{ max-width: 720px; }

.post-header{ padding-top: clamp(1rem, 3vw, 2rem); border-bottom: 1px solid var(--color-line); padding-bottom: 2.5rem; margin-bottom: 2.75rem; }
.post-header h1{
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(2rem, 4vw, 2.75rem); line-height:1.2;
  margin-top: 0.85rem;
}

.post-body{ font-size: 1.05rem; color: var(--color-ink); line-height: 1.75; }
.post-body p{ margin: 0 0 1.4rem; }
.post-body p:last-child{ margin-bottom: 0; }
.post-body h2{
  font-family: var(--font-display); font-weight:500; font-size:1.5rem;
  margin: 2.5rem 0 1rem;
}
.post-body h3{
  font-family: var(--font-display); font-weight:500; font-size:1.2rem;
  margin: 2rem 0 0.85rem;
}
.post-body a{ color: var(--color-accent-deep); text-decoration-color: var(--color-line); text-underline-offset: 3px; }
.post-body a:hover{ text-decoration-color: currentColor; }
.post-body ul, .post-body ol{ margin: 0 0 1.4rem; padding-left: 1.4rem; list-style: disc; }
.post-body ol{ list-style: decimal; }
.post-body li{ margin-bottom: 0.5rem; }
.post-body blockquote{
  margin: 2rem 0; padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 2px solid var(--color-accent);
  font-family: var(--font-display); font-style: italic; color: var(--color-ink-soft);
  font-size: 1.15rem; line-height: 1.6;
}
.post-body code{
  font-family: var(--font-mono); font-size: 0.88em;
  background: var(--color-bg-soft); border: 1px solid var(--color-line); border-radius: 3px;
  padding: 0.1rem 0.35rem;
}
.post-body pre{
  background: var(--color-dusk); color: var(--color-dusk-soft);
  border-radius: 6px; padding: 1.25rem 1.5rem; overflow-x: auto; margin: 0 0 1.4rem;
}
.post-body pre code{ background: none; border: none; padding: 0; color: inherit; }
.post-body img{ max-width: 100%; border-radius: 6px; margin: 1.5rem 0; }
.post-body hr{ border: none; border-top: 1px solid var(--color-line); margin: 2.5rem 0; }

.post-footer{ margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--color-line); }