/* ============================================================
   zenbu.life — design system
   Tokens first, then elements, then components, then layout.
   Monochrome + one warm off-white/near-black. Light + dark.
   ============================================================ */

:root {
  /* color — light default */
  --bg:        #f7f6f3;
  --bg-2:      #efeee9;
  --fg:        #1a1a1a;
  --muted:     #77756d;
  --line:      #dcdad3;
  --accent:    #b4552d; /* warm terracotta, used sparingly */

  /* type */
  --sans: "Helvetica Neue", Helvetica, Arial, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* type scale (fluid) */
  --t-hero:  clamp(2.6rem, 7vw, 5.2rem);
  --t-h2:    clamp(1.5rem, 3.4vw, 2.3rem);
  --t-h3:    clamp(1.05rem, 1.8vw, 1.25rem);
  --t-body:  1rem;
  --t-small: 0.82rem;

  /* space */
  --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.75rem; --sp-4: 3rem; --sp-5: 5rem; --sp-6: 8rem;
  --maxw: 1080px;
  --radius: 4px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:     #111110;
    --bg-2:   #191917;
    --fg:     #ece9e2;
    --muted:  #86847b;
    --line:   #2a2a27;
    --accent: #d9754a;
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* --- layout helpers --- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sp-3); }
.section { padding-block: var(--sp-5); border-top: 1px solid var(--line); }
.eyebrow {
  font-family: var(--mono); font-size: var(--t-small); letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-2);
}
.lead { color: var(--muted); max-width: 46ch; }

/* --- nav --- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-2) var(--sp-3);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: baseline; gap: .5rem; font-weight: 500; letter-spacing: .04em; }
.brand .glyph { font-size: 1.3rem; font-weight: 300; }
.brand .rom { font-family: var(--mono); font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.nav-links { display: flex; gap: var(--sp-3); font-size: var(--t-small); letter-spacing: .08em; text-transform: uppercase; }
.nav-links a { color: var(--muted); transition: color .2s; }
.nav-links a:hover { color: var(--fg); }
@media (max-width: 620px) { .nav-links { gap: var(--sp-2); } .nav-links a:nth-child(n+4){ display:none; } }

/* --- hero --- */
.hero { padding-block: var(--sp-6) var(--sp-5); }
.hero .glyph { font-size: var(--t-hero); font-weight: 200; line-height: 1; letter-spacing: .04em; }
.hero h1 { font-size: var(--t-h3); font-weight: 400; margin-top: var(--sp-3); max-width: 30ch; }
.hero .sub { color: var(--muted); margin-top: var(--sp-2); max-width: 52ch; }

/* --- section head --- */
.section h2 { font-size: var(--t-h2); font-weight: 300; letter-spacing: .01em; }
.section-head { margin-bottom: var(--sp-4); }

/* --- work grid / cards --- */
.area { margin-bottom: var(--sp-4); }
.area-title { font-family: var(--mono); font-size: var(--t-small); letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg); padding-bottom: var(--sp-1); margin-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-2); }
.card {
  display: flex; flex-direction: column; gap: .4rem;
  padding: var(--sp-3); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.card .top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.card h3 { font-size: var(--t-h3); font-weight: 500; }
.card .year { font-family: var(--mono); font-size: var(--t-small); color: var(--muted); }
.card p { font-size: var(--t-small); color: var(--muted); }
.card .tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.tag { font-family: var(--mono); font-size: .68rem; letter-spacing: .05em; color: var(--muted);
  border: 1px solid var(--line); border-radius: 100px; padding: .1rem .5rem; }
.badge-wip { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }

/* --- lab feed --- */
.lab-list { display: flex; flex-direction: column; }
.lab-item { display: flex; gap: var(--sp-3); padding-block: var(--sp-2); border-bottom: 1px solid var(--line); }
.lab-item .date { font-family: var(--mono); font-size: var(--t-small); color: var(--muted); min-width: 5.5rem; }
.lab-item .body h3 { font-size: 1rem; font-weight: 500; }
.lab-item .body p { font-size: var(--t-small); color: var(--muted); }

/* --- about --- */
.about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-4); }
@media (max-width: 720px){ .about-grid { grid-template-columns: 1fr; } }
.caps { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.caps li { font-family: var(--mono); font-size: var(--t-small); color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius); padding: .25rem .6rem; }

/* --- footer --- */
.footer { padding-block: var(--sp-4); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: space-between; align-items: center; }
.footer a { color: var(--muted); border-bottom: 1px solid var(--line); transition: color .2s, border-color .2s; }
.footer a:hover { color: var(--fg); border-color: var(--fg); }
.footer .fine { font-family: var(--mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

/* reveal-on-scroll (progressive; no-JS shows everything) */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity:1; transform:none; transition:none; } html{scroll-behavior:auto;} }