/* ============================================================
   BLACK JAPAN — studio surface (site/)
   Minimal editorial. Kuro & Kin tokens via ../design-system/tokens.css
   serif for argument · mono for evidence · dark always
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--kuro-1);
  color: var(--paper);
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--kin-soft); color: var(--kin); }

a { color: inherit; text-decoration: none; }

.jp { font-family: var(--jp); }

/* ── layout ─────────────────────────────────────────────── */
.top, .hero-inner, .block, .colophon-inner {
  max-width: 880px;               /* narrower than estate --maxw: editorial column */
  margin: 0 auto;
  padding-left: clamp(22px, 5vw, 56px);
  padding-right: clamp(22px, 5vw, 56px);
}

.rule {
  max-width: 880px;
  margin: 0 auto;
  border-top: var(--rule);
}

/* ── top bar ────────────────────────────────────────────── */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 34px;
  padding-bottom: 34px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  color: var(--paper-dim);
}
.wordmark:hover { color: var(--paper); }
.mark { width: 26px; height: 22px; }

.top-nav {
  display: flex;
  gap: 28px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.top-nav a { color: var(--paper-faint); transition: color .2s; }
.top-nav a:hover { color: var(--kin); }

/* ── hero ───────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: clamp(70px, 14vh, 150px) 0 clamp(70px, 12vh, 130px);
  overflow: hidden;
}

.hero-vertical {
  position: absolute;
  top: 50%;
  right: clamp(8px, 4vw, 60px);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.22em;
  font-family: var(--jp);
  font-weight: 500;
  font-size: clamp(56px, 9vw, 104px);
  line-height: 1;
  color: var(--paper-ghost);
  opacity: 0.45;
  user-select: none;
  pointer-events: none;
}

.hero-eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  color: var(--kin-dim);
  margin-bottom: 34px;
}

.hero h1 {
  font-size: clamp(34px, 5.6vw, 62px);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.01em;
  max-width: 15em;
}
.hero h1 em {
  font-style: italic;
  color: var(--kin);
}

.hero-lede {
  margin-top: 30px;
  max-width: 34em;
  font-size: 17px;
  color: var(--paper-dim);
}

/* ── section blocks ─────────────────────────────────────── */
.block { padding: clamp(60px, 9vh, 110px) 0; }

.block-head { margin-bottom: 48px; }

.block-no {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--kin-dim);
  margin-bottom: 14px;
}

.block-head h2 {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 300;
}

.block-sub {
  margin-top: 10px;
  color: var(--paper-dim);
  max-width: 36em;
  font-size: 15.5px;
}
.block-sub a { color: var(--kin); border-bottom: 1px solid var(--kin-dim); }
.block-sub a:hover { border-bottom-color: var(--kin); }
.block-sub em { font-style: italic; }

/* ── essays ─────────────────────────────────────────────── */
.essays { border-top: var(--rule); }

.essay {
  display: grid;
  grid-template-columns: 86px 1fr 24px;
  gap: 22px;
  align-items: baseline;
  padding: 22px 4px;
  border-bottom: var(--rule);
  transition: background .2s;
}
.essay:hover { background: var(--kuro-2); }

.essay-date {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--paper-faint);
  white-space: nowrap;
}

.essay-title {
  display: block;
  font-size: 19px;
  font-weight: 400;
  transition: color .2s;
}
.essay:hover .essay-title { color: var(--kin); }

.essay-line {
  display: block;
  margin-top: 5px;
  font-size: 14.5px;
  color: var(--paper-dim);
  max-width: 42em;
}

.essay-arrow {
  color: var(--paper-ghost);
  transition: color .2s, transform .2s;
}
.essay:hover .essay-arrow { color: var(--kin); transform: translateX(3px); }

.writing-cta {
  margin-top: 34px;
  display: flex;
  gap: 14px;
}

.quiet-btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-dim);
  border: 1px solid var(--kuro-rule);
  padding: 11px 22px;
  transition: all .2s;
}
.quiet-btn:hover { color: var(--paper); border-color: var(--paper-faint); }
.quiet-btn.gold { color: var(--kin); border-color: var(--kin-dim); }
.quiet-btn.gold:hover { background: var(--kin-soft); border-color: var(--kin); }

/* ── work pieces ────────────────────────────────────────── */
.piece {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 30px;
  padding: 44px 0;
}
.piece + .piece { border-top: var(--rule); }

.piece-jp {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  font-family: var(--jp);
  font-weight: 500;
  font-size: 40px;
  color: var(--paper-ghost);
  line-height: 1;
}

.piece-main h3 {
  font-size: 25px;
  font-weight: 400;
}
.piece-main h3 a { border-bottom: 1px solid transparent; transition: all .2s; }
.piece-main h3 a:hover { color: var(--kin); border-bottom-color: var(--kin-dim); }

.piece-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kin-dim);
  margin: 8px 0 16px;
}

.piece-main > p:not(.piece-tag) {
  color: var(--paper-dim);
  max-width: 40em;
  font-size: 15.5px;
}

.piece-link {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--kin);
}
.piece-link .arrow { transition: transform .2s; display: inline-block; }
.piece-link:hover .arrow { transform: translateX(4px); }

/* ── colophon ───────────────────────────────────────────── */
.colophon { background: var(--kuro-0); }

.colophon-inner { padding-top: 74px; padding-bottom: 60px; }

.colophon-mark {
  width: 64px;
  height: 54px;
  display: block;
  margin-bottom: 34px;
}

.colophon-line {
  font-size: clamp(19px, 2.6vw, 25px);
  font-weight: 300;
  line-height: 1.45;
  max-width: 26em;
  color: var(--paper);
}

.colophon-mail {
  display: inline-block;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--kin);
  border-bottom: 1px solid var(--kin-dim);
  padding-bottom: 2px;
}
.colophon-mail:hover { border-bottom-color: var(--kin); }

.colophon-meta {
  margin-top: 64px;
  padding-top: 22px;
  border-top: 1px solid var(--kuro-line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 34px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--paper-faint);
}

/* ── responsive ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .hero-vertical { display: none; }
  .top-nav { gap: 18px; }
  .essay { grid-template-columns: 1fr 20px; }
  .essay-date { display: none; }
  .piece { grid-template-columns: 1fr; gap: 14px; }
  .piece-jp { flex-direction: row; font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}