/* ============================================================
   zenbu.life — Soul Plate (the writing room)
   Loads after /styles/base.css.

   Soul Plate adopts the site's TOKEN CONTRACT (--bg, --bg-2, --fg,
   --muted, --line, --accent) but declares its own values: this is a
   reading room, not a portfolio surface. Because the names match,
   a future re-look of base.css moves this surface with it.

   Inherited from base.css, deliberately not redeclared:
     --sans  (UI, labels, headings, wordmark)
     --mono, --radius, --sp-*, --t-*
   Intentional deviation, per handoff: long-form body is SERIF.
   ============================================================ */

:root{
  /* color — a single warm near-black reading state, light and dark alike.
     A reading room does not change temperature with the OS. */
  --bg:     #0b0b0d;
  --bg-2:   #101014;
  --fg:     #E9E2D2;
  --muted:  #948e80;
  --line:   #22221c;
  --accent: #E8A33D;            /* restrained orange — kicker, drop cap, pull-quote, active surface */

  /* surface-local tiers base.css doesn't carry */
  --faint:  #5c584e;            /* below --muted: labels, metadata, footer */
  --rule:   #31302a;            /* drafting hairline, heavier than --line */
  --accent-green: #77a485;      /* restrained green — published marker only */
  --serif:  "Iowan Old Style","Palatino Linotype","Palatino","Georgia",serif;

  --measure: 720px;             /* reading column */
}

body{
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  line-height: 1.5;
}
a{ color: var(--fg); text-decoration: none; }

/* --- surface nav --- */
.surfaces{
  max-width: var(--measure); margin: 0 auto; padding: 22px 28px 16px;
  display: flex; gap: 20px; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint);
  border-bottom: 1px solid var(--line);
}
.surfaces a{ color: var(--faint); }
.surfaces a:hover{ color: var(--muted); }
.surfaces a[aria-current]{ color: var(--accent); }
.surfaces .spacer{ flex: 1; }

/* --- masthead --- */
header.mast{ max-width: var(--measure); margin: 0 auto; padding: 54px 28px 40px; }
.kicker{ font-size: 11px; letter-spacing: .30em; text-transform: uppercase; color: var(--accent); }
.kicker .jp{ color: var(--muted); margin-left: 6px; }
h1.word{ font-family: var(--sans); font-size: 40px; font-weight: 600; letter-spacing: -.02em; margin: 12px 0 0; }
.manifesto{ font-family: var(--serif); font-size: 18px; line-height: 1.6; color: var(--muted); margin: 18px 0 0; max-width: 560px; }
.manifesto em{ color: var(--fg); font-style: italic; }

main{ max-width: var(--measure); margin: 0 auto; padding: 0 28px; }
hr.rule{ border: none; border-top: 1px solid var(--rule); margin: 40px 0; }

.back{ display: inline-block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); margin: 26px 0 0; }
.back:hover{ color: var(--accent); }

/* --- essay --- */
article .essay-kicker{ font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--faint); }
article h2{ font-family: var(--sans); font-size: 27px; font-weight: 600; letter-spacing: -.01em; margin: 8px 0 26px; }
article p{ font-family: var(--serif); font-size: 18.5px; line-height: 1.72; margin: 0 0 22px; color: var(--fg); }
article p.first{ margin-top: 0; }
article p.first::first-letter{ float: left; font-size: 58px; line-height: .86; padding: 6px 12px 0 0; color: var(--accent); font-weight: 600; }
article em{ font-style: italic; color: var(--fg); }
article strong{ font-weight: 600; color: var(--fg); }

aside.pull{ margin: 34px 0; padding: 6px 0 6px 22px; border-left: 2px solid var(--accent); }
aside.pull p{ font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.5; color: var(--fg); margin: 0; }

ruby{ ruby-position: over; }
rt{
  font-family: var(--sans);
  font-size: .42em;
  color: #b7b1a3;
  font-weight: 400;
  letter-spacing: .03em;
  line-height: 1;
  text-transform: none;
}

/* --- collection / canon lists --- */
section.canon{ margin: 0 0 20px; }
.canon .lbl{ font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--faint); margin-bottom: 18px; }
.canon ol{ list-style: none; margin: 0; padding: 0; counter-reset: c; }
.canon li{ counter-increment: c; padding: 16px 0; border-top: 1px solid var(--line); display: flex; gap: 18px; align-items: baseline; }
.canon li::before{ content: counter(c, decimal-leading-zero); color: var(--accent-green); font-size: 12px; font-family: var(--sans); letter-spacing: .1em; flex: 0 0 auto; }
.canon a.t, .canon .t{ font-family: var(--sans); font-size: 15.5px; font-weight: 600; color: var(--fg); }
.canon a.t:hover{ color: var(--accent); }
.canon .d{ font-family: var(--serif); font-size: 15px; color: var(--muted); line-height: 1.55; margin-top: 3px; }
.canon .up{ font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-left: auto; flex: 0 0 auto; align-self: center; }
.canon .up:hover{ color: var(--accent); }
.canon .pub{ color: var(--accent-green); }   /* honesty rule: published = "read", forthcoming = "soon" */

/* --- footer --- */
footer{ max-width: var(--measure); margin: 44px auto 0; padding: 36px 28px 70px; border-top: 1px solid var(--line); }
footer p{ font-size: 12.5px; color: var(--faint); line-height: 1.7; margin: 0; }
footer .col{ font-family: var(--sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-top: 14px; }
footer a{ color: var(--muted); }
footer a:hover{ color: var(--fg); }

/* --- motion ---
   base.css also defines .reveal (opacity:0 until JS adds .in). Soul Plate
   ships no JS, so both states are pinned explicitly here to guarantee the
   text is never stranded invisible. */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity: 0; transform: translateY(8px); animation: rise .7s ease forwards; }
  header.mast{ animation-delay: .05s; }
  @keyframes rise{ to{ opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; animation: none; transition: none; }
}

@media (max-width: 640px){
  h1.word{ font-size: 32px; }
  article p{ font-size: 17.5px; }
  /* four surfaces + the 全部 mark don't fit one line at 375px — let them wrap
     rather than clip the mark off the right edge. */
  .surfaces{ flex-wrap: wrap; gap: 10px 16px; }
  .surfaces .spacer{ display: none; }
}