/* ============================================================
   Komorebi — Minimal landing
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

/* subtle paper grain */
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:var(--grain);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

a{color:inherit}

/* page scaffold: header / centered main / footer */
.page{min-height:100svh;display:flex;flex-direction:column;
  max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
.top{padding-block:28px}
.hero{flex:1;display:flex;flex-direction:column;justify-content:center;
  padding-block:24px}
.bottom{padding-block:24px;color:var(--muted);font-size:14px;display:flex;flex-direction:column;gap:5px}
.bottom a:hover{color:var(--text)}
.vibe{margin:0;font-size:13.5px}
.vibe .heart{color:var(--accent)}
.vibe .rot{color:var(--text);font-weight:600;display:inline-block;min-width:1ch;
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.vibe .rot.swap{opacity:0;transform:translateY(-4px)}
.copy{margin:0;font-size:12.5px;opacity:.85}

/* brand */
.brand{font-family:var(--font-display);font-weight:800;font-size:22px;
  letter-spacing:-.02em;display:inline-flex;align-items:baseline;gap:7px}
.brand .jp{font-family:var(--font-body);font-weight:600;font-size:12px;color:var(--accent)}

/* type */
h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;
  line-height:1.04;margin:0;font-size:clamp(34px,7vw,52px)}
.lede{color:var(--muted);margin:18px 0 0;font-size:clamp(16px,2.2vw,19px);max-width:36ch}

/* subscribe */
.subscribe{margin-top:30px}
.subscribe form{display:flex;gap:10px}
.subscribe input{flex:1;min-width:0;font:inherit;font-size:16px;padding:13px 16px;
  background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius)}
.subscribe input::placeholder{color:var(--muted)}
.subscribe input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.subscribe input[aria-invalid="true"]{border-color:var(--accent)}
.micro{margin-top:11px;font-size:13px;color:var(--muted)}
.done{margin-top:8px;display:flex;gap:8px;align-items:center;font-weight:500;color:var(--accent)}
.done svg{width:20px;height:20px;flex:none}
[hidden]{display:none!important}

/* button */
.btn{font:inherit;font-weight:600;font-size:15px;cursor:pointer;white-space:nowrap;
  border:1px solid transparent;border-radius:var(--radius);padding:13px 22px;
  background:var(--accent);color:var(--accent-ink);
  display:inline-flex;align-items:center;gap:8px;
  transition:transform .15s var(--ease),opacity .2s var(--ease)}
.btn:hover{opacity:.92}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.6;cursor:default}

@media (max-width:460px){
  .subscribe form{flex-direction:column}
  .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}