/* ============================================================
   Terminal Garden — shared site chrome
   Linked by all pages AFTER styles.css (tokens).
   Holds base, veil, nav, footer + reusable components so each
   page file only carries its own page-specific styles.
   ============================================================ */

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin:0; background:var(--surface-page); color:var(--text-secondary);
  font-family:var(--font-serif); font-size:var(--fs-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* faint technical grid wash, fading near the top */
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(oklch(0.945 0.01 142 / 0.022) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.945 0.01 142 / 0.022) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 30%, transparent 85%);
}
.wrap { position:relative; z-index:1; max-width:var(--page-max); margin:0 auto; padding:0 var(--gutter); }
a { color:inherit; }
.leaf { display:inline-block; color:var(--leaf); flex:none; }
.leaf svg { display:block; width:100%; height:100%; }

/* ---- botanical veil ---- */
.leaf-veil { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.leaf-veil span { position:absolute; line-height:0; color:var(--leaf-deep); }
.leaf-veil .sway-slow { animation:sway 7.5s var(--ease-in-out) infinite; transform-origin:50% 90%; }
@keyframes sway { 0%,100%{transform:rotate(-7deg)} 50%{transform:rotate(7deg)} }

/* ============ NAV ============ */
.nav { position:sticky; top:0; z-index:50; background:oklch(0.158 0.008 152 / 0.78); backdrop-filter:blur(12px); border-bottom:var(--bw) solid var(--border); }
.nav-inner { display:flex; align-items:center; gap:var(--sp-5); height:64px; }
.brand { display:flex; align-items:center; gap:var(--sp-3); margin-right:auto; text-decoration:none; }
.brand .leaf { width:22px; height:22px; }
.brand-name { font-family:var(--font-mono); font-weight:700; font-size:0.95rem; color:var(--text-primary); letter-spacing:-0.01em; }
.brand-name .dim { color:var(--text-tertiary); font-weight:400; }
.nav-links { display:flex; align-items:center; gap:var(--sp-5); }
.nav-links a { font-family:var(--font-mono); font-size:var(--fs-meta); text-decoration:none; color:var(--text-tertiary); transition:color var(--dur-1) var(--ease-out); }
.nav-links a:hover { color:var(--leaf); }
.nav-links a.current { color:var(--text-primary); }
.nav-cta { font-family:var(--font-mono); font-size:var(--fs-meta); font-weight:500; color:var(--accent-on); background:var(--leaf); border:none; border-radius:var(--radius-sm); padding:8px var(--sp-4); cursor:pointer; text-decoration:none; transition:background var(--dur-2) var(--ease-out); }
.nav-cta:hover { background:oklch(0.885 0.155 143); }
.nav-cta.current { color:var(--accent-on); }
@media (max-width:680px){ .nav-links a:not(.nav-cta){ display:none; } }

/* ============ shared section bits ============ */
section { padding:var(--sp-9) 0; }
.kicker { font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--text-tertiary); display:flex; align-items:center; gap:var(--sp-2); margin:0 0 var(--sp-5); }
.kicker .leaf { width:13px; height:13px; }
.sec-head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-7); }
.sec-head h2 { font-family:var(--font-serif); font-weight:400; font-size:var(--fs-h1); line-height:var(--lh-snug); letter-spacing:var(--ls-tight); color:var(--text-primary); margin:0; }

.glink { font-family:var(--font-mono); font-size:var(--fs-meta); color:var(--text-primary); text-decoration:none; position:relative; padding-bottom:2px; white-space:nowrap; }
.glink::after { content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%; background:var(--leaf); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-2) var(--ease-out); }
.glink:hover::after { transform:scaleX(1); }
.glink .arr { color:var(--leaf); display:inline-block; transition:transform var(--dur-2) var(--ease-out); }
.glink:hover .arr { transform:translateX(3px); }
.tag { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--text-secondary); background:var(--surface-inset); border:var(--bw) solid var(--border); border-radius:var(--radius-xs); padding:3px 8px; text-decoration:none; white-space:nowrap; transition:all var(--dur-1) var(--ease-out); cursor:pointer; }
.tag::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--moss); }
.tag:hover { color:var(--leaf); border-color:var(--leaf-ring); }
.tag:hover::before { background:var(--leaf); }

/* placeholder imagery */
.ph { position:relative; background:
    repeating-linear-gradient(135deg, oklch(0.245 0.012 152) 0 10px, oklch(0.21 0.01 152) 10px 20px);
    border:var(--bw) solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.ph::after { content:attr(data-label); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--text-dim); letter-spacing:.08em; text-align:center; padding:var(--sp-3); }

/* form controls */
.input { font-family:var(--font-mono); font-size:var(--fs-meta); color:var(--text-primary); background:var(--surface-page); border:var(--bw) solid var(--border-strong); border-radius:var(--radius-sm); padding:10px var(--sp-3); flex:1; min-width:0; transition:border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.input::placeholder { color:var(--text-faint); }
.input:focus { outline:none; border-color:var(--leaf); box-shadow:0 0 0 3px var(--leaf-wash); }
.btn { font-family:var(--font-mono); font-size:var(--fs-meta); font-weight:500; border-radius:var(--radius-sm); padding:10px var(--sp-4); border:none; background:var(--leaf); color:var(--accent-on); cursor:pointer; display:inline-flex; align-items:center; gap:var(--sp-2); transition:background var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); white-space:nowrap; text-decoration:none; }
.btn .leaf { width:13px; height:13px; color:var(--accent-on); }
.btn:hover { background:oklch(0.885 0.155 143); transform:translateY(-1px); }
.btn.ghost { background:transparent; color:var(--text-primary); border:var(--bw) solid var(--border-strong); }
.btn.ghost .leaf { color:var(--leaf); }
.btn.ghost:hover { background:var(--surface-inset); border-color:var(--leaf-ring); }

/* ============ PAGE HEADER (interior pages) ============ */
.page-head { padding:var(--sp-8) 0 var(--sp-7); }
.page-head h1 { font-family:var(--font-serif); font-weight:400; font-size:var(--fs-display); line-height:var(--lh-tight); letter-spacing:var(--ls-display); color:var(--text-primary); margin:var(--sp-4) 0 var(--sp-4); }
.page-head h1 em { font-style:italic; color:var(--leaf); }
.page-head .lede { max-width:58ch; font-size:var(--fs-lead); color:var(--text-secondary); margin:0; }

/* ============ FOOTER ============ */
footer { position:relative; overflow:hidden; border-top:var(--bw) solid var(--border); padding:var(--sp-8) 0 var(--sp-9); margin-top:var(--sp-9); }
.footer-growth { position:absolute; left:0; right:0; bottom:-14px; height:220px; z-index:0; pointer-events:none; }
.footer-growth span { position:absolute; bottom:0; line-height:0; }
.foot-grid { position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-5); flex-wrap:wrap; }
.foot-note { font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--text-dim); line-height:1.8; }
.foot-note .leaf { width:12px; height:12px; translate:0 2px; }
.foot-links { display:flex; gap:var(--sp-4); font-family:var(--font-mono); font-size:var(--fs-micro); }
.foot-links a { color:var(--text-tertiary); text-decoration:none; }
.foot-links a:hover { color:var(--leaf); }

@media (prefers-reduced-motion: reduce){ .cursor,.sway-slow{ animation:none !important; } html{ scroll-behavior:auto; } }