/* Rayakala landing — warm paper, reused tokens from monthly-logs, stripped to essentials */
:root{
  --paper:#faf8f3;
  --surface:#ffffff;
  --ink:#1c1917;
  --muted:#6b655a;
  --hairline:#e7e0d3;
  --hairline-strong:#d9cfbd;
  --ledger:#1a3c34;
  --ledger-hover:#16332c;
  --accent:#b45309;
  --radius:10px;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'Cascadia Code',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-size:16px;
}
a{color:var(--ledger)}
:focus-visible{outline:2px solid var(--ledger);outline-offset:2px}
::selection{background:rgba(26,60,52,.15)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:8px 14px;z-index:99}
.skip:focus{left:8px;top:8px}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(250,248,243,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
}
.site-header__inner{
  display:flex;align-items:center;gap:16px;
  padding-top:12px;padding-bottom:12px;
}
.brand{display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink);font-weight:700;margin-right:auto}
.brand__mark{color:var(--ledger)}
.brand__suffix{color:var(--muted);font-weight:400}
.site-nav{display:flex;gap:14px}
.site-nav a{text-decoration:none;color:var(--muted);font-size:14px;font-weight:500}
.site-nav a:hover,.site-nav a.active{color:var(--ink)}

/* Buttons */
.btn{
  display:inline-block;
  background:var(--ledger);color:#fff;
  border:1px solid var(--ledger);
  border-radius:999px;
  padding:10px 18px;
  font-size:14px;font-weight:600;text-decoration:none;line-height:1.2;
}
.btn:hover{background:var(--ledger-hover);color:#fff}
.btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--hairline-strong)}
.btn--ghost:hover{background:var(--paper)}
.btn--small{padding:7px 13px;font-size:13px;white-space:nowrap}

/* Hero */
.hero{padding:64px 20px 32px}
.pill{
  display:inline-block;
  font-family:var(--mono);font-size:12.5px;
  background:var(--surface);border:1px solid var(--hairline);
  border-radius:999px;padding:6px 12px;color:var(--muted);
  margin-bottom:16px;
}
.hero h1{
  font-size:clamp(2.2rem,6vw,3.2rem);
  letter-spacing:-.03em;line-height:1.05;font-weight:800;
  margin-bottom:14px;
}
.lede{font-size:18px;color:var(--muted);max-width:56ch}
.lede strong{color:var(--ink)}
.hero__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}

/* Sections */
.section{padding:28px 20px}
.section h2{font-size:24px;letter-spacing:-.02em;margin-bottom:10px}
.section p{margin-bottom:12px;max-width:62ch}
.smallcaps{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:6px}
.muted{color:var(--muted)}
.chips{list-style:none;display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chips li{background:var(--surface);border:1px solid var(--hairline);border-radius:999px;padding:6px 12px;font-size:13px}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:14px}
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);padding:16px 18px}
.card h3{font-size:17px;margin-bottom:6px}
.card p{font-size:14px;color:var(--muted)}
.card p.tags{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.card .tags span{font-family:var(--mono);font-size:11.5px;background:var(--paper);border:1px solid var(--hairline);border-radius:6px;padding:2px 8px}

/* Now / links */
.now-list{list-style:none;margin-top:8px}
.now-list li{padding:10px 0;border-bottom:1px solid var(--hairline);font-size:15px}
.now-list span{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);display:block}
.colophon{font-size:13px;margin-top:14px}
.link-row{list-style:none;display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.link-row a{display:inline-block;background:var(--surface);border:1px solid var(--hairline);border-radius:999px;padding:8px 14px;font-size:14px;text-decoration:none}
.link-row a:hover{border-color:var(--ledger)}
.contact{margin-bottom:24px}

/* Reveal */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}

/* Footer */
.site-footer{border-top:1px solid var(--hairline);margin-top:12px}
.site-footer__inner{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:18px;padding-bottom:28px;font-size:13.5px}

/* Dark mode */
@media (prefers-color-scheme:dark){
  :root{
    --paper:#141210;
    --surface:#1e1b18;
    --ink:#ece7dd;
    --muted:#a8a094;
    --hairline:#2e2a26;
    --hairline-strong:#3d3833;
    --ledger:#7fc4ad;
    --ledger-hover:#96d3bd;
  }
  .site-header{background:rgba(20,18,16,.92)}
  .btn{background:var(--ledger);border-color:var(--ledger);color:#10201b}
  .btn:hover{background:var(--ledger-hover);color:#10201b}
  .btn--ghost{background:var(--surface);color:var(--ink)}
  a{color:var(--ledger)}
}

/* Mobile */
@media (max-width:720px){
  .site-nav{display:none}
  .hero{padding-top:44px}
  .site-header__inner{gap:10px}
}