/* ============================================================
   Origami site — shared design system (Meadow theme, from the product)
   Tokens + type + reveal idioms mirror packages/runtime/src/css.ts and the
   landing page (index.html). Loaded by every sub-page; pairs with fonts.css.
   ============================================================ */
:root{
  --bg:#FAF7F2; --paper:#fff; --ink:#1A1A1A; --soft:#5A5752; --mute:#8A8680;
  --rule:#E8E2D6; --rule-soft:#F0EBE1;
  --accent:#557A4E;                 /* Meadow green — the crane + the dot */
  --tint-a:rgba(85,122,78,0.06); --tint-b:rgba(176,125,43,0.04);
  --green:#3D8B5A; --amber:#B07D2B; --red:#B3402A; --ember:#C2410C;
  --font-display:'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-prose:'Source Serif 4','Lora', Georgia, serif;
  --font-ui:'Inter','Segoe UI', Arial, sans-serif;
  --font-mono:ui-monospace,'Cascadia Code','SF Mono',Consolas,monospace;
  --bar-h:64px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--bar-h) + 12px)}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-ui); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit}
img,svg{display:block}
.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:10px 16px; border-radius:8px; z-index:100}
.skip:focus{left:12px; top:10px}

/* crane mark (inline SMIL SVG, recolours via currentColor) */
.crane{width:1em; height:1em; color:var(--accent)}
.crane g{fill:currentColor}

/* reveal system — copied from css.ts, triggered on scroll */
.anim{opacity:0; transform:translateY(16px)}
.is-shown .anim{animation:o-rise .7s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:calc(var(--i,0)*90ms)}
@keyframes o-rise{to{opacity:1; transform:none}}

/* ---------- top bar ---------- */
.bar{
  position:fixed; inset:0 0 auto 0; z-index:50; height:var(--bar-h);
  display:flex; align-items:center; gap:24px; padding:0 clamp(16px,4vw,40px);
  background:linear-gradient(to bottom, var(--bg) 55%, rgba(250,247,242,.7) 80%, transparent);
  backdrop-filter:blur(2px);
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--font-display); font-weight:600; font-size:20px; letter-spacing:-.01em}
.brand .crane{width:26px; height:26px}
.brand .dot{color:var(--accent)}
.nav{display:flex; gap:2px; margin-left:auto}
.nav a{
  font:600 12.5px var(--font-ui); text-transform:uppercase; letter-spacing:.07em;
  color:var(--soft); text-decoration:none; padding:9px 12px; border-radius:7px; border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--accent)}
.nav a[aria-current=page]{color:var(--accent); border-bottom-color:var(--accent)}
.cta{
  font:600 13px var(--font-ui); text-decoration:none; color:#fff; background:var(--accent);
  padding:10px 18px; border-radius:8px; white-space:nowrap; margin-left:8px;
}
.cta:hover{filter:brightness(.94)}

/* ---------- layout primitives ---------- */
.wrap{width:min(1080px,90vw); margin:0 auto}
.wrap.wide{width:min(1240px,94vw)}
main{display:block}
.section{padding:clamp(40px,7vh,84px) 0; position:relative}
.section + .section{border-top:1px solid var(--rule-soft)}
.section.tint{
  background:
    radial-gradient(circle at 12% 8%, var(--tint-a) 0%, transparent 42%),
    radial-gradient(circle at 88% 92%, var(--tint-b) 0%, transparent 42%),
    var(--bg);
}
/* a compact sub-page hero (not the 100vh landing scene) */
.phero{padding:calc(var(--bar-h) + clamp(36px,7vh,76px)) 0 clamp(28px,5vh,52px)}
.phero .crane{width:clamp(48px,7vw,76px); height:clamp(48px,7vw,76px); margin-bottom:18px}

.eyebrow{font:700 13px var(--font-ui); text-transform:uppercase; letter-spacing:.2em; color:var(--accent); margin:0 0 18px}
h1{font-family:var(--font-display); font-weight:600; font-size:clamp(40px,6vw,76px); line-height:1.03; letter-spacing:-.022em; margin:0 0 22px}
h2{font-family:var(--font-display); font-weight:600; font-size:clamp(30px,4.4vw,52px); line-height:1.07; letter-spacing:-.018em; margin:0 0 20px}
h3{font-family:var(--font-display); font-weight:600; font-size:clamp(22px,3vw,30px); line-height:1.1; letter-spacing:-.01em; margin:0 0 14px}
.lede{font-size:clamp(18px,2vw,25px); line-height:1.5; color:var(--soft); max-width:58ch; margin:0 0 18px}
.prose{font-family:var(--font-prose); font-size:clamp(17px,1.4vw,20px); line-height:1.72; color:var(--ink); max-width:64ch}
.prose p{margin:0 0 18px}
.muted{color:var(--soft)}
.center{text-align:center} .center .lede{margin-left:auto; margin-right:auto}
.cols{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,60px); align-items:center}
.rule{border:none; border-top:1px solid var(--rule); margin:28px 0}

/* pills / buttons / cards — from the product block CSS */
.pill{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--rule); background:var(--paper); border-radius:999px; padding:9px 18px; font:600 14px var(--font-ui); color:var(--soft); margin:0 8px 10px 0}
.pill::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--accent)}
.btn{display:inline-block; background:var(--accent); color:#fff; border-radius:9px; padding:13px 26px; font:600 15px var(--font-ui); text-decoration:none; border:1.5px solid var(--accent); cursor:pointer; margin:8px 12px 8px 0}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--rule)}
.btn:hover{filter:brightness(.95)}
.btn.ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn.sm{padding:9px 16px; font-size:13.5px; border-radius:8px}
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:clamp(16px,2vw,28px); margin-top:clamp(24px,4vh,44px)}
.stat-card{background:var(--paper); border:1px solid var(--rule); border-radius:12px; padding:clamp(22px,3vw,36px); box-shadow:0 1px 2px rgba(26,26,26,.04),0 6px 24px rgba(26,26,26,.05)}
.stat-card[data-tone=accent]{border-color:var(--accent)} .stat-card[data-tone=accent] .big{color:var(--accent)}
.stat-card .big{font-family:var(--font-display); font-size:clamp(40px,5vw,72px); font-weight:600; line-height:1; letter-spacing:-.02em}
.stat-card .lbl{font-size:13.5px; font-weight:600; color:var(--soft); margin-top:12px; text-transform:uppercase; letter-spacing:.08em}
.figcap{font:400 13.5px var(--font-prose); font-style:italic; color:var(--soft); margin-top:14px; max-width:64ch}

/* a note / callout strip */
.note{margin:22px 0; padding:16px 20px; border-left:3px solid var(--accent); background:var(--tint-a); border-radius:0 10px 10px 0; font-size:15px; color:var(--ink); max-width:64ch}
.note[data-tone=amber]{border-left-color:var(--amber); background:rgba(176,125,43,.07)}
.note b{font-weight:700}

/* ---------- browser-chrome frame around a live deck iframe ---------- */
.browser{margin-top:clamp(20px,3vh,36px); border:1px solid var(--rule); border-radius:14px; overflow:hidden; background:var(--paper); box-shadow:0 2px 6px rgba(26,26,26,.06),0 24px 70px rgba(26,26,26,.13)}
.browser-bar{display:flex; align-items:center; gap:8px; padding:11px 16px; border-bottom:1px solid var(--rule); background:linear-gradient(var(--paper),#faf8f3)}
.browser-bar .dots{display:flex; gap:7px}
.browser-bar .dots i{width:12px; height:12px; border-radius:50%; background:var(--rule)}
.browser-bar .addr{flex:1; margin-left:8px; font:500 12.5px var(--font-mono); color:var(--mute); background:var(--bg); border:1px solid var(--rule); border-radius:7px; padding:6px 12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.browser-bar .live{font:700 11px var(--font-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--green); display:inline-flex; align-items:center; gap:6px}
.browser-bar .live::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--green); animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(61,139,90,.45)}70%{box-shadow:0 0 0 7px rgba(61,139,90,0)}100%{box-shadow:0 0 0 0 rgba(61,139,90,0)}}
.browser iframe{width:100%; height:min(70vh,620px); border:0; background:var(--paper); display:block}
.browser.tall iframe{height:min(78vh,760px)}

/* deck switcher chips (playground) */
.deckchips{display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 0}
.deckchip{font:600 13px var(--font-ui); padding:8px 15px; border-radius:999px; border:1.5px solid var(--rule); background:var(--paper); color:var(--soft); cursor:pointer}
.deckchip:hover{border-color:var(--accent); color:var(--accent)}
.deckchip[aria-pressed=true]{background:var(--ink); color:#fff; border-color:var(--ink)}

/* ---------- example gallery ---------- */
.gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(18px,2.4vw,30px); margin-top:clamp(24px,4vh,44px)}
.ex-card{display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--rule); border-radius:16px; overflow:hidden; box-shadow:0 1px 2px rgba(26,26,26,.04),0 10px 34px rgba(26,26,26,.06)}
.ex-mark{display:flex; align-items:center; justify-content:center; min-height:128px; padding:22px; background:
  radial-gradient(circle at 30% 20%, var(--tint-a), transparent 60%), var(--bg); border-bottom:1px solid var(--rule)}
.ex-mark svg{width:auto; max-width:78%; height:clamp(56px,9vw,76px)}
.ex-body{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1}
.ex-body h3{margin:0 0 8px; font-size:clamp(21px,2.4vw,26px)}
.ex-kicker{font:700 11px var(--font-ui); text-transform:uppercase; letter-spacing:.12em; color:var(--mute); margin:0 0 10px}
.ex-desc{font-family:var(--font-prose); font-size:15px; line-height:1.6; color:var(--soft); margin:0 0 18px; flex:1}
.ex-actions{display:flex; gap:10px; flex-wrap:wrap}

/* animated-logo strip */
.logostrip{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-top:clamp(20px,3vh,36px)}
.logo-cell{display:flex; flex-direction:column; align-items:center; gap:10px; padding:22px 14px; background:var(--paper); border:1px solid var(--rule); border-radius:14px}
.logo-cell svg{width:auto; height:54px; max-width:90%}
.logo-cell .nm{font:600 12px var(--font-ui); text-transform:uppercase; letter-spacing:.1em; color:var(--mute)}

/* ---------- code blocks ---------- */
pre.code{background:#23211d; color:#e9e3d6; border-radius:12px; padding:18px 20px; overflow:auto; font:500 13px/1.65 var(--font-mono); border:1px solid #322f2a; margin:18px 0; max-width:100%}
pre.code .c-tag{color:#9ec59a} pre.code .c-attr{color:#d9b779} pre.code .c-str{color:#c9d6a8} pre.code .c-com{color:#7c766c; font-style:italic}
code.inline{font:600 12.5px var(--font-mono); color:var(--accent); background:rgba(85,122,78,.10); padding:2px 7px; border-radius:5px}

/* ---------- step list ---------- */
.steps{list-style:none; counter-reset:s; margin:24px 0 0; padding:0; display:grid; gap:14px; max-width:68ch}
.steps li{counter-increment:s; position:relative; padding:16px 18px 16px 58px; background:var(--paper); border:1px solid var(--rule); border-radius:12px}
.steps li::before{content:counter(s); position:absolute; left:16px; top:14px; width:28px; height:28px; border-radius:50%; background:var(--accent); color:#fff; font:700 14px var(--font-ui); display:flex; align-items:center; justify-content:center}
.steps li b{display:block; font:700 15px var(--font-ui); margin-bottom:3px}
.steps li span{font-size:14.5px; color:var(--soft)}

/* ---------- forms (suggest page) ---------- */
.form{max-width:760px}
.field{margin:0 0 20px}
.field > label{display:block; font:700 13px var(--font-ui); text-transform:uppercase; letter-spacing:.06em; color:var(--soft); margin:0 0 8px}
.field .hint{font-weight:400; text-transform:none; letter-spacing:0; color:var(--mute); font-size:12.5px}
.field input[type=text], .field input[type=email], .field textarea, .field select{
  width:100%; font:inherit; font-size:15px; color:var(--ink); background:var(--paper);
  border:1.5px solid var(--rule); border-radius:10px; padding:12px 14px;
}
.field textarea{resize:vertical; line-height:1.55}
.field textarea.mono{font:500 13px/1.6 var(--font-mono)}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--accent); outline:none}
.seg{display:inline-flex; gap:6px; flex-wrap:wrap}
.seg label{font:600 13px var(--font-ui); padding:8px 14px; border:1.5px solid var(--rule); border-radius:999px; cursor:pointer; color:var(--soft)}
.seg input{position:absolute; opacity:0; width:0; height:0}
.seg input:checked + span{color:#fff}
.seg label:has(input:checked){background:var(--ink); border-color:var(--ink); color:#fff}
.preview-wrap{margin-top:8px}
.form-actions{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:8px}
.form-status{font-size:13.5px; color:var(--green); font-weight:600; min-height:1.2em}

/* ---------- footer ---------- */
.footer{background:var(--ink); color:#cfc9bf; padding:clamp(40px,7vh,72px) 0}
.footer .wrap{display:grid; grid-template-columns:1fr auto; gap:28px; align-items:start}
.footer .brand-f{display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-size:24px; color:#fff}
.footer .brand-f .crane{width:34px; height:34px; color:#9ec59a}
.footer .brand-f .dot{color:#9ec59a}
.footer .tagf{margin:14px 0 0; max-width:42ch; color:#a8a298; font-size:14.5px; line-height:1.6}
.footer .meta{text-align:right; font-size:13px; color:#8b857b; line-height:1.9}
.footer .meta a{color:#cfc9bf; text-decoration:none} .footer .meta a:hover{color:#9ec59a}
.footer .credits{grid-column:1/-1; border-top:1px solid #322f2a; margin-top:30px; padding-top:18px; font-size:12px; color:#7c766c; line-height:1.7}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .nav{gap:0}
  .nav a{padding:9px 8px; font-size:11.5px; letter-spacing:.03em}
  .cols{grid-template-columns:1fr}
  .footer .wrap{grid-template-columns:1fr}
  .footer .meta{text-align:left}
}
@media (max-width:560px){
  .nav a{padding:8px 6px}
  .cta{display:none}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .anim{opacity:1 !important; transform:none !important; animation:none !important}
  .browser-bar .live::before{animation:none}
  .bmc{transition:none}
}

/* ---------- Buy Me a Coffee — reproduced locally (no external request) ---------- */
.bmc{display:inline-flex; align-items:center; gap:8px; background:#FFDD00; color:#000; text-decoration:none; font:700 14px var(--font-ui); letter-spacing:-.01em; padding:11px 17px; border-radius:11px; border:1px solid rgba(0,0,0,.2); box-shadow:0 4px 14px rgba(0,0,0,.16); transition:transform .15s ease, box-shadow .15s ease}
.bmc:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.24)}
.bmc .e{font-size:16px; line-height:1}
.bmc-float{position:fixed; right:clamp(14px,2vw,22px); bottom:clamp(14px,2vw,22px); z-index:60}
@media (max-width:600px){ a.bmc-float{padding:12px; border-radius:50%} a.bmc-float .t{display:none} }