/* Slowbranch — "scroll and seal".
   Rice paper, hairlines, vertical tags, one vermilion accent. No cards, no
   shadows, no gradients, no rounded corners: the page is a sheet, and the
   only ornament is the seal. */

:root {
  --paper: #f4f1e9;
  --paper-deep: #ece7db;
  --paper-edge: #e2dbca;
  --ink: #22262b;
  --ink-soft: #4b5259;
  --moss: #6a7f5a;
  --stone: #9aa0a6;
  --branch-bark: #463c33;
  --branch-leaf: #6a7f5a;
  --wire-bronze: #8a6a3b;
  --wire-gauge: #6e5a33;
  --pot-clay: #9c6b4f;
  --pot-slab: #8c8578;
  --seal-vermilion: #a8352c;
  --seal-faded: #c07a71;
  --rule: rgba(34, 38, 43, 0.16);
  --rule-strong: rgba(34, 38, 43, 0.38);
  --measure: 34rem;
  --wide: 66rem;
  --title: "Noto Serif JP", "Songti SC", "Source Han Serif SC", serif;
  --body: "EB Garamond", "Noto Serif JP", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.paperbody {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.72;
  font-variant-numeric: oldstyle-nums;
}

a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
a:hover { border-bottom-color: var(--seal-vermilion); color: var(--seal-vermilion); }

p { margin: 0 0 1.1em; }

img { max-width: 100%; height: auto; display: block; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper); padding: .6em 1em; z-index: 40;
}
.skip:focus { left: 0; }

/* ---------- vertical tag, the site's one recurring mark ---------- */

.vert {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--title);
  font-size: .68rem;
  letter-spacing: .3em;
  line-height: 1;
  color: var(--stone);
  text-transform: uppercase;
  align-self: flex-start;
  white-space: nowrap;
}

.seal {
  display: inline-block;
  background: var(--seal-vermilion);
  color: var(--paper);
  font-family: var(--title);
  font-size: .82rem;
  line-height: 1;
  letter-spacing: .08em;
  padding: .5em .45em;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

/* ---------- masthead ---------- */

.masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule-strong);
  background: var(--paper);
}
.masthead-brand { margin: 0; display: flex; align-items: center; gap: .85rem; }
.masthead-brand a { border: 0; display: flex; align-items: center; gap: .8rem; }
.masthead-name {
  font-family: var(--title); font-size: 1.28rem; letter-spacing: .18em;
  text-transform: uppercase;
}
.masthead-cn { color: var(--ink-soft); font-size: .86rem; letter-spacing: .04em; }
.masthead-turn { margin: 0; font-size: .88rem; letter-spacing: .08em; }
.masthead-turn a { border-bottom: 1px solid var(--seal-vermilion); color: var(--seal-vermilion); }

/* ---------- breadcrumb: the only navigation ---------- */

.crumbs {
  padding: .7rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--ink-soft);
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline;
}
.crumbs a { border-bottom: 0; color: var(--ink-soft); }
.crumbs a:hover { color: var(--seal-vermilion); }
.crumbsep { color: var(--stone); }
.crumbhere { color: var(--ink); font-style: italic; }

/* ---------- frame: left index + sheet ---------- */

.scrollframe {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(.75rem, 3vw, 2.5rem);
}
@media (min-width: 1180px) {
  .scrollframe { grid-template-columns: 15.5rem minmax(0, 1fr); gap: 2.5rem; }
}

.treeindex {
  display: none;
  border-right: 1px solid var(--rule);
  padding: 2rem 1.5rem 3rem 0;
  font-size: .84rem;
}
@media (min-width: 1180px) { .treeindex { display: block; } }
.treeindex summary {
  cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: .6rem;
  font-family: var(--title); letter-spacing: .14em; margin-bottom: .9rem;
}
.treeindex summary::-webkit-details-marker { display: none; }
.treeindex-word { text-transform: uppercase; font-size: .9rem; }
.treeindex::details-content { display: block; }
.treeindex-head {
  margin: 1.4rem 0 .5rem; color: var(--stone); letter-spacing: .18em;
  font-size: .7rem; text-transform: uppercase;
}
.treeindex-list { list-style: none; margin: 0 0 .8rem; padding: 0; }
.treeindex-list li { padding: .22rem 0; border-bottom: 1px dotted var(--rule); }
.treeindex-list a { border-bottom: 0; color: var(--ink-soft); }
.treeindex-list li.here a { color: var(--seal-vermilion); }
.treesplit { margin-bottom: .15rem; }
.treesplit summary {
  cursor: pointer; list-style: none; font-family: var(--body); letter-spacing: .04em;
  padding: .3rem 0; border-bottom: 1px solid var(--rule); display: flex;
  justify-content: space-between; gap: .5rem; margin-bottom: 0;
}
.treesplit summary::before { content: "＋ "; color: var(--stone); }
.treesplit[open] > summary::before { content: "－ "; color: var(--stone); }
.treesplit .treeindex-list { padding-left: .9rem; }

.sheet { min-width: 0; padding: 2.2rem 0 4rem; }

/* ---------- shared page furniture ---------- */

.sect-head {
  font-family: var(--title); font-size: .78rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: .5rem; margin: 2.6rem 0 1.2rem;
}
.tally {
  font-size: .72rem; color: var(--stone); letter-spacing: .1em;
  font-family: var(--body);
}
.metro { color: var(--ink-soft); font-size: .84rem; letter-spacing: .03em; white-space: nowrap; }
.metro b { color: var(--ink); font-weight: 600; }
/* The desk that keeps the record, set in the title face so the byline reads
   as a signature on the sheet rather than as a stray string. */
.metro-author { letter-spacing: .05em; }
.metro-author b { font-family: var(--title); letter-spacing: .02em; }

.page-head { max-width: var(--wide); margin-bottom: 2.2rem; }
.page-title {
  font-family: var(--title); font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.28;
  letter-spacing: .02em; margin: 1rem 0 .8rem;
}
.page-lead {
  max-width: var(--measure); color: var(--ink-soft);
  font-size: 1.02rem; border-left: 2px solid var(--seal-faded); padding-left: 1rem;
}
.leaf-kicker { display: flex; align-items: flex-start; gap: .9rem; margin: 0; }
.leaf-season {
  font-family: var(--title); font-size: .74rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--seal-vermilion); padding-top: .1rem;
}

/* ---------- home: four seasonal panels ---------- */

.hero { border-bottom: 1px solid var(--rule-strong); padding-bottom: 2rem; }
.hero-plate { width: 100%; max-width: 1200px; margin: 0 auto 1.6rem; }
.hero-copy { max-width: var(--wide); }
.hero-title {
  font-family: var(--title); font-weight: 400; font-size: clamp(2rem, 5vw, 3.2rem);
  letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .4rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem;
}
.hero-cn {
  font-size: .9rem; letter-spacing: .5em; color: var(--seal-vermilion);
  text-transform: none; border-bottom: 0;
}
.hero-stand { max-width: 46rem; color: var(--ink-soft); }

.tally { display: flex; flex-wrap: wrap; gap: 2.4rem; margin: 1.4rem 0 0; }
.tally dt { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--stone); }
.tally dd {
  margin: .15rem 0 0; font-family: var(--title); font-size: 1.7rem;
  border-top: 1px solid var(--rule-strong); padding-top: .3rem;
}

.seasongrid { display: flex; flex-wrap: wrap; gap: 0; margin-top: 2.4rem; }
.quadrant {
  flex: 1 1 22%; min-width: 15rem;
  padding: 1.2rem 1.4rem 1.6rem 0;
  border-top: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  transition: flex-grow .5s ease, background-color .5s ease;
}
.quadrant:last-child { border-right: 0; }
.quadrant.is-current {
  flex-grow: 2.6;
  background: var(--paper-deep);
  padding-left: 1.4rem;
  border-top: 3px solid var(--seal-vermilion);
}
.quadrant-head {
  display: flex; align-items: flex-start; gap: .8rem; margin: 0 0 .3rem;
  font-family: var(--title); font-weight: 400; font-size: 1.1rem; letter-spacing: .14em;
}
.quadrant.is-current .quadrant-head { font-size: 1.45rem; }
.quadrant-gloss { color: var(--stone); font-size: .82rem; margin-bottom: .9rem; }
.quadrant-list { list-style: none; margin: 0; padding: 0; }
.quadrant-list li { padding: .5rem 0; border-bottom: 1px dotted var(--rule); }
.quadrant-list li:last-child { border-bottom: 0; }
.quadrant-date { display: block; color: var(--stone); font-size: .76rem; letter-spacing: .04em; }
.quadrant-more, .quadrant-empty { margin-top: .9rem; font-size: .76rem; color: var(--stone); letter-spacing: .12em; text-transform: uppercase; }

.recent { margin-top: 3rem; }
.recent-list { list-style: none; margin: 0; padding: 0; max-width: var(--wide); }
.recent-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  padding: .85rem 0; border-bottom: 1px solid var(--rule);
}
.recent-title { display: flex; gap: .9rem; align-items: flex-start; border-bottom: 0; font-size: 1.06rem; }
.recent-meta { color: var(--stone); font-size: .8rem; letter-spacing: .04em; }
.recent-hint { margin-top: 1.4rem; color: var(--stone); font-size: .84rem; }

/* ---------- entry: the scroll ---------- */

.leaf { max-width: var(--wide); }
.leaf-head { margin-bottom: 1.8rem; }
.leaf-title {
  font-family: var(--title); font-weight: 400;
  font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.3; margin: 1rem 0 .7rem;
}
.leaf-alt { display: block; font-size: .95rem; color: var(--stone); letter-spacing: .1em; margin-top: .5rem; }
.leaf-meta { display: flex; flex-wrap: wrap; gap: 1.4rem; border-top: 1px solid var(--rule); padding-top: .7rem; }

.plate { margin: 0 0 2rem; }
.plate img { width: 100%; border: 1px solid var(--rule); background: var(--paper); }
.plate figcaption, .stagefig figcaption {
  margin-top: .5rem; font-size: .76rem; color: var(--stone); letter-spacing: .14em;
  text-transform: uppercase;
}

.traitline {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0; margin: 0 0 2.4rem; border-top: 1px solid var(--rule-strong);
  border-left: 1px solid var(--rule);
}
.traitline-head {
  grid-column: 1 / -1; margin: 0; padding: .5rem 0;
  font-family: var(--title); font-size: .72rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
}
.trait { padding: .8rem .9rem .9rem 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding-left: .9rem; }
.trait dt { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--stone); margin-bottom: .3rem; }
.trait dd { margin: 0; font-size: .95rem; }

.toolbox { border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule); padding: 1rem 0; margin-bottom: 2.4rem; }
.toolbox-head { font-family: var(--title); font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); }
.toolbox-list { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin: 0 0 .8rem; padding: 0; }
.toolbox-list li { font-size: .9rem; border-bottom: 1px solid var(--rule); }
.toolbox-risk { margin: 0; font-size: .88rem; }
.risk { font-family: var(--title); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
.risk-low { color: var(--moss); }
.risk-medium { color: var(--wire-bronze); }
.risk-high { color: var(--seal-vermilion); }

.scrollsheet { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 900px) {
  .scrollsheet { grid-template-columns: minmax(0, var(--measure)) 13rem; gap: 3rem; }
}
.scroll-body { max-width: var(--measure); }
.scroll-body h2 {
  font-family: var(--title); font-weight: 400; font-size: 1.15rem;
  letter-spacing: .06em; margin: 2.2rem 0 .8rem;
  border-bottom: 1px solid var(--rule); padding-bottom: .35rem;
}
.scroll-body > p:first-of-type::first-letter {
  float: left; font-family: var(--title); font-size: 3.5rem; line-height: .82;
  padding: .12em .14em 0 0; color: var(--seal-vermilion);
}
.scroll-body > p:first-of-type { text-indent: 0; }

.margin-note { align-self: start; position: sticky; top: 1.5rem; font-size: .84rem; color: var(--ink-soft); }
@media (max-width: 899px) { .margin-note { position: static; border-top: 1px solid var(--rule); padding-top: 1rem; } }
.margin-note-head { margin: 0 0 .6rem; }
.margin-note-list { margin: 0; padding-left: 1.2rem; }
.margin-note-list li { margin-bottom: .7rem; border-bottom: 1px dotted var(--rule); padding-bottom: .7rem; }
.margin-note-list li:last-child { border-bottom: 0; }

.procedure-list { max-width: var(--measure); padding-left: 1.4rem; }
.procedure-list li { margin-bottom: .7rem; padding-left: .3rem; }
.procedure-list li::marker { color: var(--seal-vermilion); font-family: var(--title); }

.takeaway-list { list-style: none; max-width: var(--measure); padding: 0; margin: 0; }
.takeaway-list li { padding: .55rem 0 .55rem 1.6rem; border-bottom: 1px solid var(--rule); position: relative; }
.takeaway-list li::before { content: "—"; position: absolute; left: 0; color: var(--seal-vermilion); }

.stagefig { margin: 2.6rem 0 0; border-top: 1px solid var(--rule-strong); padding-top: 1.2rem; }
.disclaim {
  max-width: var(--measure); margin-top: 2rem; padding: .9rem 1rem;
  background: var(--paper-deep); font-size: .86rem; color: var(--ink-soft);
  border-left: 3px solid var(--stone);
}
.disclaim b { color: var(--ink); letter-spacing: .16em; text-transform: uppercase; font-size: .72rem; }

.kinship-list { list-style: none; margin: 0; padding: 0; max-width: var(--wide); }
.kinship-list li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px dotted var(--rule);
}
.kinship-date { color: var(--stone); font-size: .78rem; }

.pageturn {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
  margin-top: 3rem; border-top: 1px solid var(--rule-strong); padding-top: 1.2rem;
}
.turn { border-bottom: 0; display: flex; flex-direction: column; gap: .3rem; }
.turn span { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--stone); }
.turn b { font-weight: 400; font-size: 1rem; }
.turn-next { text-align: right; }
.turn-empty { display: block; }

/* ---------- atlas ---------- */

.atlasgrid { border-top: 1px solid var(--rule-strong); }
.atlasrow { display: grid; grid-template-columns: 1fr; gap: .5rem 2rem; padding: 1.6rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 760px) { .atlasrow { grid-template-columns: 16rem minmax(0, 1fr); } }
.atlasrow-head { display: flex; align-items: flex-start; gap: .8rem; margin: 0; font-family: var(--title); font-weight: 400; font-size: 1.05rem; letter-spacing: .12em; }
.atlasrow-head a { border-bottom: 0; }
.atlasrow-head .tally { margin-top: .2rem; }
.atlasrow-term { margin: 0; font-size: .84rem; color: var(--stone); grid-column: 1; }
.atlasrow-list { list-style: none; margin: 0; padding: 0; grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 759px) { .atlasrow-list, .atlasrow-term { grid-column: 1; grid-row: auto; } }
.atlasrow-list li { padding: .45rem 0; border-bottom: 1px dotted var(--rule); }
.atlasrow-meta { display: block; color: var(--stone); font-size: .78rem; }
.atlasrow.is-empty { opacity: .55; }
.atlasrow-empty { margin: 0; color: var(--stone); font-size: .82rem; font-style: italic; grid-column: 2; }
.atlasrow-term:empty { display: none; }

/* ---------- workshop ---------- */

.shopgrid { border-top: 1px solid var(--rule-strong); }
.shoprow { padding: 1.6rem 0 2rem; border-bottom: 1px solid var(--rule); }
.shoprow-head { display: flex; align-items: flex-start; gap: .8rem; margin: 0 0 1.2rem; font-family: var(--title); font-weight: 400; font-size: 1.05rem; letter-spacing: .16em; }
.shoprow-empty { color: var(--stone); font-style: italic; }
.paper { max-width: var(--wide); padding: 0 0 1.4rem; border-bottom: 1px dotted var(--rule); margin-bottom: 1.4rem; }
.paper:last-child { border-bottom: 0; }
.paper-title { font-family: var(--title); font-weight: 400; font-size: 1.18rem; margin: 0 0 .4rem; letter-spacing: .04em; }
.paper-title a { border-bottom: 0; }
.paper-intro { max-width: 46rem; color: var(--ink-soft); font-size: .95rem; margin-bottom: .6rem; }
.paper-meta { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: baseline; margin-bottom: .5rem; }
.paper-tools { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 0; }
.tool { font-size: .78rem; color: var(--stone); border-bottom: 1px solid var(--rule); }

/* ---------- almanac: the roll ---------- */

.roll { border-top: 1px solid var(--rule-strong); max-width: var(--wide); }
.roll-season {
  display: flex; align-items: flex-start; gap: 1rem; margin: 2.4rem 0 1rem;
  font-family: var(--title); font-weight: 400; font-size: 1.05rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink);
}
.roll-gloss { font-family: var(--body); font-size: .78rem; letter-spacing: .04em; text-transform: none; color: var(--stone); }
.rollrow { display: grid; grid-template-columns: 1fr; gap: .3rem 2rem; padding: 1rem 0 1.2rem 1.2rem; border-left: 2px solid var(--rule); border-bottom: 1px solid var(--rule); }
@media (min-width: 700px) { .rollrow { grid-template-columns: 11rem minmax(0, 1fr); } .rollterm { grid-row: 1 / span 3; } }
.rollterm { margin: 0; }
.rollterm time { display: block; font-size: .76rem; color: var(--stone); letter-spacing: .06em; }
.rollterm b { font-family: var(--title); font-weight: 400; font-size: .95rem; letter-spacing: .12em; color: var(--seal-vermilion); }
.rolltitle { font-family: var(--title); font-weight: 400; font-size: 1.1rem; margin: 0; }
.rolltitle a { border-bottom: 0; }
.rollintro { margin: 0; color: var(--ink-soft); font-size: .93rem; max-width: 44rem; }
.rolltake { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .86rem; color: var(--ink-soft); }
.rolltake li::marker { color: var(--seal-faded); }

/* ---------- wiki / form ---------- */

.glossary { margin: 0; border-top: 1px solid var(--rule-strong); }
.term { display: grid; grid-template-columns: 1fr; gap: .4rem 2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 780px) { .term { grid-template-columns: 17rem minmax(0, 1fr); } }
.term dt { display: flex; align-items: flex-start; gap: .7rem; font-family: var(--title); font-size: 1.02rem; letter-spacing: .12em; }
.term-alt { font-family: var(--body); font-size: .8rem; color: var(--stone); letter-spacing: .04em; }
.term dd { margin: 0; }
.term dd p { max-width: 42rem; }
.term-eg { font-size: .84rem; color: var(--stone); }
.term-eg a { color: var(--ink-soft); }

.termleaf { max-width: var(--wide); }
.termbody { border-top: 1px solid var(--rule-strong); padding-top: 1rem; }
.termtext { max-width: var(--measure); font-size: 1.1rem; }
.termback { margin-top: 2.4rem; }

/* ---------- folio (legal) and 404 ---------- */

.folio { max-width: var(--wide); }
.folio-body { max-width: var(--measure); columns: 1; }
.folio-body h2 { font-family: var(--title); font-weight: 400; font-size: 1.08rem; margin: 2rem 0 .6rem; letter-spacing: .04em; }
.folio-body ul { padding-left: 1.2rem; }
.folio-body li { margin-bottom: .4rem; }
.folio-updated { margin-top: 2.4rem; border-top: 1px solid var(--rule); padding-top: .6rem; font-size: .8rem; color: var(--stone); }

.lostleaf { max-width: var(--wide); }
.lostseal { margin: 0 0 1.2rem; }
.lost-zh { max-width: var(--measure); color: var(--ink-soft); }
.lostways { margin-top: 2rem; border-top: 1px solid var(--rule-strong); padding-top: 1rem; }
.lostways ul { list-style: none; margin: 0; padding: 0; max-width: 40rem; }
.lostways li { display: flex; justify-content: space-between; gap: 1.5rem; padding: .5rem 0; border-bottom: 1px dotted var(--rule); }
.lostways span { color: var(--stone); font-size: .82rem; }

/* ---------- colophon ---------- */

.colophon {
  border-top: 1px solid var(--rule-strong);
  margin-top: 3rem;
  padding: 1.6rem clamp(1rem, 4vw, 3rem) 3rem;
  font-size: .84rem; color: var(--ink-soft);
}
.colophon-note { max-width: 42rem; }
.colophon-edit { max-width: 42rem; font-size: .78rem; color: var(--stone); letter-spacing: .04em; }
.colophon-edit-zh { display: block; margin-bottom: .25rem; }
.colophon-links, .colophon-legal { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-bottom: .5rem; }
.colophon-links a, .colophon-legal a { border-bottom: 0; color: var(--ink-soft); }
.colophon-links a:hover, .colophon-legal a:hover { color: var(--seal-vermilion); }
.colophon-mail a { color: var(--seal-vermilion); }
.colophon-copy { color: var(--stone); font-size: .78rem; letter-spacing: .06em; margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .quadrant { transition: none; }
}