/* ============================================================================
   SEAL — the visual world: 印章 and the vermilion-stamped document.
   Seals mark things that are actually being certified. Where nothing is being
   certified, there is no seal; that rule is what keeps this a system rather
   than a costume.
   ========================================================================= */

/* --- The comb rule ----------------------------------------------------
   Ink combed along an edge, as on a stamped cloth or a register margin.
   Drawn as a gradient rather than an image so it inherits the surface hue. */
.comb-b, .comb-t {
  --comb-ink: var(--ink);
  position: relative;
}
/* Ink combing is invisible on a saturated ground, so the dark surfaces comb
   in bone instead. Without this the rule simply vanishes at every field and
   indigo edge. */
.field, .band--second, .band--indigo, .band--ink, .close, .onward { --comb-ink: var(--on-ground); }
.comb-b::after, .comb-t::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 7px;
  background: repeating-linear-gradient(
    90deg,
    var(--comb-ink) 0 1.5px,
    transparent 1.5px 6px
  );
  opacity: 0.42;
}
.comb-b::after { bottom: 0; }
.comb-t::before { top: 0; }

/* --- Seal -------------------------------------------------------------
   白文 (intaglio) is the default: the character is cut away and reads bone
   out of a solid field. 朱文 (relief) inverts it for stamps sitting on a
   document panel, where a solid red block would fight the text. */
.seal {
  display: grid;
  place-items: center;
  /* Seal paste sits thicker than the field it is pressed onto, so the mark
     is a deeper red than the page. --cinnabar-press was too close to the
     ground and the seal — the one object the whole world is built on —
     came out as the faintest thing on the page. */
  background: var(--seal-ink);
  color: var(--on-ground);
  font-family: var(--cjk);
  font-weight: 600;
  line-height: 1;
  aspect-ratio: 1;
  width: var(--seal-size, 56px);
  box-shadow: inset 0 0 0 2px var(--seal-frame);
  flex: none;
}
.seal > span { transform: translateY(0.02em); font-size: 0.7em; }

.seal--relief {
  background: var(--bone);
  color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.seal--indigo { background: var(--indigo-press); }
.seal--ink { background: var(--ink); }

/* --- Masthead: the tab rail -----------------------------------------
   Four leaves and the door, visible at every width. There is no hidden
   menu: on a phone the rail drops under the wordmark and scrolls sideways,
   so navigation exists with JavaScript off and the current leaf is always
   marked. The door is mail, here and everywhere else it is named. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ground);
  --comb-ink: var(--on-ground);
}
.masthead-in {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s3);
}

/* The tabs and the door are set nowrap and never shrink; the wordmark is the
   name alone. A strapline was tried here and could not fit on two lines
   beside four long tabs at the shell's full width, and it only repeated
   what the cover says. */
.masthead-top { display: contents; }
.wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  /* Never squeezed: the finish review measured the first tab overpainting
     the name by 47px at 1292px and by 101px at 320px when this could shrink. */
  flex: none;
  margin-right: auto;
  order: 1;
}
.wordmark .seal { --seal-size: 34px; }
.wordmark-name {
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: "wdth" 100;
  font-size: 15px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.rail { display: flex; align-items: stretch; gap: 2px; flex: 0 0 auto; order: 2; }
.tab {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  text-decoration: none;
  color: var(--on-ground);
  white-space: nowrap;
  transition: background 160ms var(--press);
}
.tab .seal { --seal-size: 26px; background: transparent; box-shadow: inset 0 0 0 1px var(--on-ground-faint); }
.tab-name {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tab:hover { background: var(--ground-lift); }
/* The current leaf is pressed: its seal fills with bone, the way a stamp
   sits proud of the page it was pressed into. */
.tab[aria-current="page"] { background: var(--ground-press); }
.tab[aria-current="page"] .seal { background: var(--on-ground); color: var(--ground-press); box-shadow: none; }

/* The search control rides at the end of the rail, emitted hidden and
   revealed by the palette island when it mounts, so a page without scripts
   never shows a dead button. */
.tab--search { cursor: pointer; flex: 0 0 auto; margin-left: 6px; }
.tab--search[hidden] { display: none; }
.tab--write { background: var(--on-ground); color: var(--ground); flex: 0 0 auto; order: 4; }
.tab--write .seal { background: var(--ground); color: var(--on-ground); box-shadow: none; }
.tab--write:hover { background: var(--bone-lift); }
/* On the door itself the tab is pressed like any current leaf: the page's
   own head is the bright object there, and an inverted tile beside it read
   as a second, unpressed door. */
.tab--write[aria-current="page"], .tab--write[aria-current="page"]:hover { background: var(--ground-press); color: var(--on-ground); }
.tab--write[aria-current="page"] .seal { background: var(--on-ground); color: var(--ground-press); }

/* --- The cover -------------------------------------------------------
   The front page is the cover of a bound register. The bridge, the only
   bone object in the field, carries the thesis and the door; under it the
   seal tray holds the four leaves, each pressed in its own paste. Hovering
   a door tints the whole field toward that paste, so the cover teaches the
   colour code before anyone clicks. */
.field { background: var(--ground); padding-block: var(--s6) var(--s7); }
/* A section head carries its own vertical padding on the inner wrap, so the
   field must not add a second set: the two together left 212px of empty red
   under every sub-page title. */
.field--head { padding-block: 0; }

.cover { padding-block: var(--s5) var(--s6); transition: background 360ms var(--press); }
/* Whole first viewport on a wide screen: the bridge on the left, the tray
   two by two on the right, nothing else. Below 1100px the tray drops under
   the bridge in one row of four, then two by two. */
.cover .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--s3) var(--s5);
  align-items: start;
}
/* The tint reaches the masthead, so the preview on hover is the leaf you
   would land on: one paste from the top of the page down. */
.masthead { transition: background 360ms var(--press); }
body:has(.cover .door--indigo:is(:hover, :focus-visible))    { --ground: var(--indigo);    --ground-lift: var(--indigo-lift);    --ground-press: var(--indigo-press); }
body:has(.cover .door--malachite:is(:hover, :focus-visible)) { --ground: var(--malachite); --ground-lift: var(--malachite-lift); --ground-press: var(--malachite-press); }
body:has(.cover .door--ochre:is(:hover, :focus-visible))     { --ground: var(--ochre);     --ground-lift: var(--ochre-lift);     --ground-press: var(--ochre-press); }

.bridge {
  position: relative;
  background: var(--bone);
  color: var(--ink);
  padding: var(--s4) var(--s4) var(--s3);
  --comb-ink: var(--ink);
  grid-column: 1;
  grid-row: 1 / span 2;
}
/* One relief seal pressed in the document's corner: the bridge is a stamped
   sheet, and the mark stays out of the thesis's measure. */
.bridge-seal { position: absolute; top: var(--s3); right: var(--s3); --seal-size: 44px; }
.bridge .thesis { padding-right: 56px; }
.bridge .thesis {
  font-family: var(--display);
  /* Beside the tray the column is narrow: --t-h1 set the thesis in eight
     lines of 56px, a wall. One step down lands it in six. */
  font-size: var(--t-thesis);
  font-weight: 800;
  font-variation-settings: "wdth" 106;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.bridge .thesis em { font-style: normal; color: var(--accent); }
/* The identity line answers the admissions reader's first question at body
   size, in the fold, on every width. */
.identity {
  margin-top: var(--s3);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--ink-quiet);
  max-width: 52ch;
  text-wrap: pretty;
}
.bridge-foot {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--ink-faint);
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

.tray-label { grid-column: 2; grid-row: 1; align-self: end; color: var(--on-ground-quiet); }
.tray {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--on-ground-faint);
}
.door {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--s3) var(--s3) var(--s3);
  background: var(--ground);
  color: var(--on-ground);
  text-decoration: none;
  min-height: 100%;
  /* A rule in the leaf's own paste along the top edge: the tile reads as a
     stamped card and the four provenance lines share one bottom line. */
  border-top: 4px solid var(--door-paste, var(--seal-ink));
  transition: background 360ms var(--press);
}
.door--cinnabar  { --door-paste: var(--seal-ink); }
.door--indigo    { --door-paste: var(--indigo); }
.door--malachite { --door-paste: var(--malachite); }
.door--ochre     { --door-paste: var(--ochre); }
.door:hover, .door:focus-visible { background: var(--ground-press); }
.door .seal { --seal-size: clamp(56px, 6vw, 72px); margin-bottom: 6px; transition: transform 160ms var(--press); }
.door:hover .seal, .door:focus-visible .seal { transform: translateY(1px); }
.door--indigo .seal    { background: var(--indigo-seal); }
.door--malachite .seal { background: var(--malachite-seal); }
.door--ochre .seal     { background: var(--ochre-seal); }
.door-name {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "wdth" 106;
  font-size: var(--t-lead);
  line-height: 1.02;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.door-sub {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 8px;
  color: var(--on-ground-quiet);
}
.door-line { display: block; font-size: var(--t-small); line-height: 1.45; text-wrap: pretty; }
.door-prov {
  display: block;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--on-ground-faint);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-ground-quiet);
  line-height: 1.5;
}

/* No cross-document view transition. It was tried here with the seals as
   shared elements, and in Chrome the arriving page produced no frames for
   about four seconds until the browser abandoned the transition, on every
   door press, headed and headless alike. The press impression is the
   cover's departure; the leaf simply arrives. */
@media (prefers-reduced-motion: reduce) {
  .cover, .door, .door .seal { transition: none; }
}

/* --- Rhythm inside a document panel ------------------------------------
   One rule instead of forty inline margins: siblings sit one step apart,
   a section heading gets three steps above it and one below. */
.doc-pad > * + * { margin-top: var(--s3); }
.doc-pad > .h2 { margin-top: var(--s6); }
.doc-pad > .h2:first-child, .doc-pad > :first-child { margin-top: 0; }
.doc-pad > .figure { margin-top: var(--s4); }
.doc-pad > [data-lead] { margin-bottom: var(--s5); }
.doc-pad[data-open] { padding-block: var(--s5) 0; }
.doc .h2 { max-width: 22ch; }
.two-up > div > * + *, .two-even > div > * + *, .band .two-up > div > * + * { margin-top: var(--s3); }
.two-up[data-wide], .two-even[data-wide] { gap: var(--s5); }
.two-up .prose, .band .prose { max-width: 56ch; }
.table-scroll[data-narrow] { max-width: 620px; }
.plate[data-tall] { min-height: 200px; }
.label[data-accent] { color: var(--accent); }
.quiet { color: var(--ink-quiet); }
.mt-4 { margin-top: var(--s4) !important; }
.mt-5 { margin-top: var(--s5) !important; }
[data-flagship] { margin-top: var(--s3); border-top: 1px solid var(--ink-faint); padding-top: var(--s3); }
.close-head { margin-top: var(--s3); }
.close-head .prose { max-width: 46ch; }
.tbl .glyph { font-size: var(--t-lead); }

/* --- Page head --------------------------------------------------------
   The head every leaf opens with: the leaf's seal, the label, the title and
   a lede, on the leaf's own paste. */
.page-head {
  padding-block: var(--s5) var(--s6);
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
  flex-wrap: wrap;
}
.page-head > .seal { --seal-size: clamp(72px, 9vw, 104px); }
.page-head-body { flex: 1; min-width: min(100%, 320px); }
.page-head .h1 { margin-top: var(--s2); max-width: 18ch; }
.page-head .lede { margin-top: var(--s3); max-width: 46ch; }

/* --- Certificate: who this is ---------------------------------------
   The seal beside the label, the name and one line; then the four facts as
   one row and the roles as register rows, each across the full panel under
   a hairline, so no grid cell is left empty at any width. */
.certificate {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s3) var(--s4);
  align-items: start;
  padding: var(--s4);
  background: var(--bone);
  box-shadow: inset 0 0 0 1px var(--ink-faint);
}
.certificate > .seal { --seal-size: 72px; }
.cert-id { min-width: 0; }
.cert-name { margin-top: var(--s2); max-width: none; }
.cert-line { margin-top: var(--s3); max-width: 70ch; text-wrap: pretty; }
.cert-strip { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--s3) var(--s4); padding-top: var(--s3); border-top: 1px solid var(--ink-faint); }
.cert-strip dt { color: var(--ink-quiet); }
.cert-strip dd { margin-top: 6px; font-size: var(--t-small); line-height: 1.5; text-wrap: pretty; }
.cert-roles { grid-column: 1 / -1; padding-top: var(--s3); border-top: 1px solid var(--ink-faint); }
.cert-roles .register { margin-top: var(--s2); }
.cert-roles .register-mark { align-self: start; padding-top: 3px; }
@media (max-width: 720px) { .cert-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.repo-line { margin-top: var(--s2); }
.meta { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-quiet); line-height: 1.5; }

/* --- Keyed rows: an aside of key and value on hairlines ---------------
   The toolbox that closes Record: label keys in mono, small values, one
   hairline above each row and below the last, on the second ground. */
.aside-rows > .label + * { margin-top: var(--s2); }
.band .aside-rows .label { color: var(--on-ground-quiet); }
.keyed-rows > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s2); padding: 10px 0; border-top: 1px solid var(--on-ground-faint); }
.keyed-rows > div:last-child { border-bottom: 1px solid var(--on-ground-faint); }
.keyed-rows dt { font-family: var(--mono); font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-ground-quiet); padding-top: 3px; }
.keyed-rows dd { font-size: var(--t-small); line-height: 1.5; color: var(--on-ground); text-wrap: pretty; }
@media (max-width: 480px) {
  .keyed-rows > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .keyed-rows dt { padding-top: 0; }
}

/* --- The door: /write/ ------------------------------------------------
   The close, opened into a whole leaf on ink. The head is composed like
   the cover: the title, the lede and three practical facts beside the
   certificate of how to reach me, the one bone object in the field, and a
   strip of five seals closing the head. Under it the register of who I
   hope to hear from runs at the shell's full width as ledger rows, and a
   cinnabar address bar closes it, so the page ends on the action. */
.page-head--door {
  display: grid;
  grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--s4) var(--s5);
  align-items: start;
  padding-block: var(--s5);
}
.page-head--door .page-head-body { min-width: 0; }
.door-facts { margin-top: var(--s4); max-width: 56ch; }

/* The five seals, one per kind, each a jump into the register: a 1px-gap
   row across the shell, seal beside name, the way the tray rules itself.
   Below 720px the row becomes wrapped chips so no cell is ever empty. */
.kind-index {
  grid-column: 1 / -1;
  margin-top: var(--s2);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--on-ground-faint);
}
.kind-index a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--ground);
  color: var(--on-ground);
  text-decoration: none;
  transition: background 160ms var(--press);
}
.kind-index a:hover, .kind-index a:focus-visible { background: var(--ground-lift); }
.kind-index a:hover .seal { transform: translateY(1px); }
.kind-index .seal { --seal-size: 36px; transition: transform 160ms var(--press); }
.kind-index-name {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--on-ground-quiet);
}

/* The certificate of how to reach me: a bone panel in the field with a
   relief seal pressed in its corner as on the bridge, the address as its
   largest object, the two actions, then the three channels as keyed rows. */
.address {
  position: relative;
  grid-column: 3;
  min-width: 0;
  padding: var(--s4);
  background: var(--bone);
  color: var(--ink);
  --comb-ink: var(--ink);
}
.address .label { color: var(--ink-quiet); }
.address a:not(.btn):not([data-plain]) {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent-rule);
}
.address a:not(.btn):not([data-plain]):hover { text-decoration-color: currentColor; }
.address-seal { position: absolute; top: var(--s4); right: var(--s4); --seal-size: 56px; }
.address > .label, .address-name { padding-right: 68px; }
.address-name {
  margin-top: var(--s1);
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: "wdth" 100;
  font-size: var(--t-h3);
  line-height: 1.16;
  letter-spacing: -0.01em;
}
.address-mail {
  display: block;
  margin-top: var(--s3);
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "wdth" 106;
  /* The subtitle step rather than the lead: beside the title the panel is
     390px wide, and the address at the lead size broke before its last
     letter. */
  font-size: var(--t-h3);
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--accent);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.address-mail:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.address-actions {
  margin-top: var(--s3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}
.address .copy-state { color: var(--ink-quiet); }
.address .copy-state .stamp { background: var(--accent); }
.address .keyed-rows { margin-top: var(--s3); }
.keyed-rows--doc > div { border-top-color: var(--ink-faint); }
.keyed-rows--doc > div:last-child { border-bottom-color: var(--ink-faint); }
.keyed-rows--doc dt { color: var(--ink-quiet); }
.keyed-rows--doc dd { color: var(--ink); }

/* The register of correspondents: five ledger rows on hairlines across the
   shell. Each is a relief seal, then the title with its prepared door
   beneath, then the paragraph with what to include beneath. Arriving from
   the index lights the row the way the timeline lights a register row. */
.kinds { margin-top: var(--s4); }
.kind {
  display: grid;
  grid-template-columns: 56px minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--s3) var(--s4);
  align-items: start;
  padding: var(--s3);
  margin-inline: calc(-1 * var(--s3));
  border-top: 1px solid var(--ink-faint);
  transition: background 150ms var(--press);
}
.kind:last-child { border-bottom: 1px solid var(--ink-faint); }
.kind:target { background: var(--bone-dim); box-shadow: inset 1px 0 0 var(--accent); }
.kind > .seal { --seal-size: 56px; }
.kind-lead, .kind-body { min-width: 0; }
.kind-title {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "wdth" 106;
  font-size: var(--t-lead);
  line-height: 1.04;
  letter-spacing: -0.018em;
  text-wrap: balance;
  max-width: 22ch;
}
.kind-text { max-width: 58ch; text-wrap: pretty; }
.kind-ask {
  margin-top: var(--s2);
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--s2);
  padding-top: var(--s2);
  border-top: 1px solid var(--ink-faint);
  font-size: var(--t-small);
  line-height: 1.5;
  max-width: 58ch;
}
.kind-ask .label { color: var(--ink-quiet); padding-top: 3px; }
.kind-door {
  display: inline-block;
  margin-top: var(--s2);
  padding: 10px 0;
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.kind-door:hover { text-decoration: underline; text-underline-offset: 5px; }

/* The address bar closing the register: the close's primary card on the
   second paste, with both actions, so the page ends on the door. */
.address-door {
  margin-top: var(--s4);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s3) var(--s4);
  align-items: center;
  padding: var(--s3) var(--s4);
  background: var(--second);
  color: var(--on-ground);
}
.address-door .seal { --seal-size: 52px; }
.address-door-text { min-width: 0; }
.address-door-key {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--on-ground-quiet);
}
.address-door-val {
  display: block;
  margin-top: 6px;
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "wdth" 106;
  font-size: var(--t-lead);
  line-height: 1.04;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}
.address-door-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s2);
}
.address-door .btn--edge { background: transparent; color: var(--on-ground); box-shadow: inset 0 0 0 1px var(--on-ground-faint); }
.address-door .btn--edge:hover { background: rgba(241, 239, 232, 0.08); }
.address-door .copy-state { color: var(--on-ground-quiet); }
.address-door .copy-state .stamp { background: var(--ink); }

/* The door's own foot: the page above it is the contact block. */
.close--slim { padding-block: var(--s4); }
.close--slim .colophon { margin-top: 0; padding-top: 0; border-top: 0; }

/* --- Page map ---------------------------------------------------------
   Two doors of equal weight under a paper's title, verb first: read the
   argument on this page, or open the manuscript on its own. The status is
   certified once beneath them and the repository is a small third mark. */
.pagemap {
  margin-top: var(--s4);
  max-width: 680px;
  display: grid;
  gap: 1px;
  background: var(--on-ground-faint);
}
.pagemap-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; }
.pagemap-door {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 18px 20px 20px;
  background: var(--on-ground);
  color: var(--ground);
  text-decoration: none;
  min-height: 44px;
  transition: background 150ms var(--press);
}
.pagemap-door:hover { background: var(--bone-lift); }
.pagemap-title {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "wdth" 104;
  font-size: var(--t-h3);
  line-height: 1.12;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.pagemap-key {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  line-height: 1.5;
}
.pagemap-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  padding: 12px 20px;
  background: var(--ground);
  color: var(--on-ground);
}
.pagemap-cert { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pagemap-cert .seal { --seal-size: 36px; }
.pagemap-claim {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-ground-quiet);
  line-height: 1.5;
}
.pagemap-mark {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ground);
  text-decoration: none;
  padding: 10px 0;
  white-space: nowrap;
}
.pagemap-mark:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --- Manuscript head -------------------------------------------------- */
.ms-title { max-width: 30ch; }
.ms-lede { max-width: 60ch; }
.ms-actions { display: flex; flex-wrap: wrap; gap: 1px; margin-top: var(--s4); }
.ms-actions .btn { justify-content: center; }
.ms-note {
  margin-top: var(--s3);
  max-width: 62ch;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--on-ground-quiet);
  text-wrap: pretty;
}

/* Reading progress: a bone rule that grows along the masthead's bottom
   edge with scroll. Scroll-driven, so it is state rather than motion and
   is kept under reduced motion. */
.progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--on-ground);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 1;
}
@supports (animation-timeline: scroll()) {
  .progress { animation: reading-progress linear both; animation-timeline: scroll(root); }
}
@keyframes reading-progress { to { transform: scaleX(1); } }

/* --- Stamped action ---------------------------------------------------
   The primary action is a stamp: it lands with a press, not a fade. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  min-height: 44px;
  background: var(--ground);
  color: var(--on-ground);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms var(--press), transform 110ms var(--press);
}
.btn:hover { background: var(--ground-lift); }
.btn:active { transform: translateY(1px); background: var(--ground-press); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink-faint);
}
.btn--ghost:hover { background: var(--bone-dim); }
.btn--onfield {
  background: var(--on-ground);
  color: var(--ground);
}
.btn--onfield:hover { background: var(--bone-lift); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

/* --- Certificate ------------------------------------------------------
   The device the whole world exists for: a claim, its seal, and the source
   that backs it. The provenance line is always present, never a tooltip. */
.cert { display: flex; gap: 14px; align-items: flex-start; }
.cert .seal { --seal-size: 40px; }
.cert-body { min-width: 0; }
.cert-claim {
  /* These pairs are spans, and a span is display:inline, which makes every
     margin-top below inert and collapses claim and source onto one line. The
     same two classes look right on /making/ only because they sit on an <h2>
     and a <p> there. Declared explicitly so the component does not depend on
     which element it is written with. */
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: "wdth" 100;
  font-size: 17px;
  line-height: 1.18;
  letter-spacing: -0.008em;
}
.cert-src {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-top: 5px;
  color: var(--on-ground-quiet);
}
.doc .cert-src { color: var(--ink-quiet); }

/* --- Register: ranked rows of certified entries ----------------------- */
.register { display: grid; gap: 1px; background: var(--ink-faint); }
.register-group { margin-top: var(--s5); margin-bottom: var(--s2); }
.register-group:first-of-type { margin-top: var(--s4); }
a.register-row { text-decoration: none; }
a.register-row .register-meta { color: var(--accent); }
.register--plain .register-row { grid-template-columns: 34px minmax(0, 1fr); }
.register-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: var(--s3);
  align-items: baseline;
  background: var(--bone);
  padding: 16px var(--s3);
}
.register-row:hover { background: var(--bone-lift); }
.register-row.is-lit { background: var(--bone-dim); box-shadow: inset 1px 0 0 var(--accent); }
.register-mark {
  font-family: var(--cjk);
  font-size: 19px;
  color: var(--accent);
  line-height: 1;
  align-self: center;
}
.register-title { font-size: var(--t-small); line-height: 1.35; }
.register-title b { font-weight: 700; }
.register-meta {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  text-align: right;
  white-space: nowrap;
}

/* --- Document panel --------------------------------------------------- */
.doc {
  background: var(--bone);
  color: var(--ink);
  --comb-ink: var(--ink);
}
.doc .label { color: var(--ink-quiet); }
/* padding-block, never the shorthand: `padding: a 0 b` on an element that
   also carries .wrap silently zeroes the horizontal gutter, and the last
   build shipped exactly that bug at every width below 1100px. */
.doc-pad { padding-block: var(--s5) var(--s6); }

/* --- Entry: a substantial piece of work, sized by weight -------------- */
.entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s3);
  background: var(--bone);
  /* The panel sits on a .doc that is also bone, so without an edge there is
     no inset document — only the bottom comb survived and the cards read as
     floating text. */
  box-shadow: inset 0 0 0 1px var(--ink-faint);
  padding: var(--s4);
  --comb-ink: var(--ink);
  transition: background 150ms var(--press);
}
a.entry:hover { background: var(--bone-dim); }
/* The ring must not replace the panel's own hairline edge. */
a.entry:focus-visible, .entry-sum:focus-visible { box-shadow: inset 0 0 0 1px var(--ink-faint), var(--ring); }

/* A folded entry: the summary is the head plus one line, the paragraph and
   the doors open beneath. Native <details>, so it works with scripts off. */
.ledger { display: grid; gap: var(--s3); }
.entry--fold { padding: 0; display: block; }
.entry-sum {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: var(--s3) var(--s4);
}
.entry-sum::-webkit-details-marker { display: none; }
.entry-sum:hover { background: var(--bone-dim); }
.entry-sum .seal { --seal-size: 48px; }
.entry-sum-body { min-width: 0; }
.entry-sum .entry-title { margin: 0; }
.entry-line { display: block; margin-top: 10px; font-size: var(--t-small); line-height: 1.5; text-wrap: pretty; }
.entry-toggle {
  width: 11px;
  height: 11px;
  margin-top: 14px;
  border-right: 1.5px solid var(--ink-quiet);
  border-bottom: 1.5px solid var(--ink-quiet);
  transform: rotate(45deg);
  transition: transform 160ms var(--press);
}
.entry--fold[open] .entry-toggle { transform: rotate(-135deg); margin-top: 20px; }
.entry-more { padding: 0 var(--s4) var(--s4); font-size: var(--t-small); line-height: 1.55; border-top: 1px solid var(--ink-faint); }
.entry-more > p:first-child { margin-top: var(--s3); }
.entry-more p { font-size: var(--t-small); line-height: 1.55; }
.entry-links { margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: var(--s2); }
/* An honest slot: a door whose address has not been supplied. */
.slot {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  box-shadow: inset 0 0 0 1px var(--ink-faint);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
a.entry:hover .entry-role { color: var(--accent); }
.entry-head { display: flex; align-items: flex-start; gap: 14px; }
.entry-head .seal { --seal-size: 44px; }
.entry-title {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "wdth" 106;
  font-size: var(--t-lead);
  line-height: 1.04;
  letter-spacing: -0.018em;
}
.entry-role {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-top: 6px;
}
.entry p { font-size: var(--t-small); line-height: 1.55; }

.stack { display: grid; gap: var(--s3); }
.two-up { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s3); }
.two-even { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }

/* --- Plate: an image, or an honest placeholder for one ---------------- */
.plate {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--bone-dim);
  box-shadow: inset 0 0 0 1px var(--ink-faint);
  min-height: 180px;
  padding: var(--s3);
  text-align: center;
}
.plate span {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

/* --- Contact ----------------------------------------------------------
   Restated at the foot of every page because it is the site's whole job,
   but it is not the only place it appears: the masthead carries it too. */
.close { background: var(--ink); color: var(--bone); padding-block: var(--s6); }
.close .h2 { max-width: 26ch; }
/* The heading alone left ~590px of empty ink to its right, directly above the
   one block the site's success metric depends on. Its own prose fills it. */
.close-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--s4) var(--s5);
  align-items: end;
}
/* Email is the site's only success metric, so it is not one of three equal
   cards: it takes the whole first row and twice the type size, and the two
   profiles sit under it as secondary. */
.close-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--ink-hair);
  margin-top: var(--s4);
}
.close-card {
  background: var(--ink);
  padding: var(--s3);
  text-decoration: none;
  display: block;
  transition: background 150ms var(--press);
}
.close-card--primary {
  grid-column: 1 / -1;
  background: var(--ground);
  padding: var(--s4);
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}
.close-card--primary:hover { background: var(--ground-lift); }
.close-card--primary .seal { --seal-size: 52px; }
.close-card--primary .close-val {
  display: block;
  font-size: var(--t-lead);
  font-variation-settings: "wdth" 106;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.close-card:hover { background: var(--ground); }
.close-key {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--on-ground-quiet);
}
.close-val {
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: "wdth" 100;
  font-size: 17px;
  margin-top: 7px;
  word-break: break-word;
}
.colophon {
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--ink-hair);
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--bone-quiet);
}

/* --- Onward ----------------------------------------------------------- */
.onward {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--on-ground-faint);
  /* The band is full-bleed but its content belongs on the shell: measured at
     1440 this started at x=20 while every other band on the page started at
     x=186. vw rather than % because a percentage inside a custom property
     resolves against the element that uses it, which here is a half-width
     column. */
  --edge: max(var(--s3), calc((100vw - var(--shell)) / 2 + var(--gutter)));
}
.onward a {
  background: var(--ground);
  padding: var(--s4) var(--s3);
  text-decoration: none;
  display: block;
  transition: background 150ms var(--press);
}
.onward a:hover { background: var(--ground-lift); }
.onward-key {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ground-quiet);
}
.onward-title {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "wdth" 106;
  font-size: var(--t-h3);
  margin-top: 8px;
  letter-spacing: -0.015em;
}
.onward a:first-child { padding-left: var(--edge); }
.onward a:last-child { padding-right: var(--edge); text-align: right; }

/* ============================== Responsive ============================= */

@media (max-width: 1100px) {
  .cover .wrap { grid-template-columns: minmax(0, 1fr); }
  .bridge { grid-column: auto; grid-row: auto; max-width: 760px; }
  .bridge .thesis { font-size: var(--t-h1); }
  .tray-label { grid-column: auto; grid-row: auto; margin-top: var(--s4); }
  .tray { grid-column: auto; grid-row: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  /* minmax(0,…) rather than 1fr throughout: a bare 1fr takes its minimum
     from content, and one nowrap label is enough to push the page sideways
     past a 320px viewport, where overflow-x:hidden clips it beyond reach. */
  .tray { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-up, .two-even { grid-template-columns: minmax(0, 1fr); }
  /* The door's head stacks: the certificate drops under the title and the
     facts, still in the field, and each ledger row folds to seal beside
     one column. */
  .page-head--door { grid-template-columns: auto minmax(0, 1fr); }
  .address { grid-column: 1 / -1; }
  /* One column beside the seal, read in the order the row argues: title,
     paragraph, what to include, then the door. The two wrappers dissolve
     so the four pieces can be ordered as grid items. */
  .kind { grid-template-columns: 56px minmax(0, 1fr); gap: var(--s2) var(--s3); }
  .kind-lead, .kind-body { display: contents; }
  .kind-title, .kind-text, .kind-ask, .kind-door { grid-column: 2; margin-top: 0; }
  .kind-door { order: 1; }
  .kind > .seal { grid-row: 1 / span 4; }
  .kind-title { max-width: 28ch; }
  .address-door { grid-template-columns: auto minmax(0, 1fr); }
  .address-door-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 720px) {
  /* Wrapped chips rather than a five-column row, so no cell is ever empty. */
  .kind-index { display: flex; flex-wrap: wrap; gap: 6px; background: none; }
  .kind-index a { gap: 9px; padding: 6px 12px 6px 6px; box-shadow: inset 0 0 0 1px var(--on-ground-faint); }
  .kind-index .seal { --seal-size: 28px; }
}

@media (max-width: 1100px) {
  /* Two rows below 1100px, where one row with a search control no longer
     fits (measured 194px of page overflow at 861): wordmark and the door on
     the first, the four leaves on a rail that bleeds to the screen edge and scrolls sideways on the second.
     The band sticks, but the rail folds away over the first 120px of scroll
     (a scroll-driven animation, CSS only), so on every reading page the
     sticky cost drops from 110px to 60px while the door stays open. Where
     scroll timelines are unsupported the whole band simply stays. Nothing is
     hidden and nothing needs a script to appear. */
  .masthead-in { display: block; padding: 0; }
  .masthead-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px var(--gutter);
  }
  .wordmark { margin-right: 0; }
  .wordmark .seal { --seal-size: 30px; }
  .tab--write { padding-block: 8px; min-height: 40px; }
  .rail .tab--search { padding: 10px 12px; min-height: 44px; margin-left: 4px; }
  .rail {
    padding-block: 6px 0;
    max-height: 64px;
    overflow-y: hidden;
    overflow-x: auto;
    scrollbar-width: none;
    padding-inline: var(--gutter);
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail .tab { scroll-snap-align: start; padding: 10px 12px; min-height: 44px; }
  @supports (animation-timeline: scroll()) {
    .rail { animation: rail-away linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
  }
}

@media (max-width: 360px) {
  /* Below 360 the rail overflows again; fade the edge as the tables do. */
  .rail { mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
}

@media (max-width: 400px) {
  /* Name and door on one row at 320: the third row appeared at 310px of
     content in a 280px band. */
  .masthead-in { gap: 12px; }
  .wordmark { gap: 9px; }
  .wordmark .seal { --seal-size: 26px; }
  .wordmark-name { font-size: var(--t-ms); }
  .tab--write { padding-inline: 10px; }
}

@media (max-width: 860px) {
  .close-grid { grid-template-columns: minmax(0, 1fr); }
  .close-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

@media (max-width: 560px) {
  /* The door reads "Write" alone on a phone; "to me" returned at 320. */
  .tab--write .tab-long { display: none; }
  /* Without the seal squares all four names fit at 390 (344px of 350). */
  .rail .tab { grid-template-columns: 1fr; gap: 0; padding: 12px 10px; }
  .rail .tab .seal { display: none; }
  .register-row { grid-template-columns: 30px minmax(0, 1fr); }
  .register-meta { grid-column: 2; text-align: left; margin-top: 4px; white-space: normal; }
  .onward { grid-template-columns: minmax(0, 1fr); }
  .onward a:last-child { text-align: left; }
    .pagemap-doors { grid-template-columns: minmax(0, 1fr); }
  /* Two even rows of tools, two by two. Free-wrapped, the four tiles ended
     in a ragged third row and an 882px head at 390. */
  .ms-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .certificate { grid-template-columns: minmax(0, 1fr); padding: var(--s3); }
  .certificate > .seal { --seal-size: 56px; }
  .bridge-seal { --seal-size: 36px; }
  .entry-sum { padding: var(--s3); grid-template-columns: auto minmax(0, 1fr) auto; }
  .entry-more { padding: 0 var(--s3) var(--s3); }
  .door { padding: 14px; }
  .door .seal { --seal-size: 44px; }
  .door-line { display: none; }
  .bridge { padding: var(--s3) var(--s3) var(--s3); }
  .entry { padding: var(--s3); }
  /* The door on a phone: the seal stacks above the title, the certificate
     tightens with its two actions sharing the width, each row stacks its
     seal above its title, and the closing bar does the same. */
  .page-head--door { grid-template-columns: minmax(0, 1fr); }
  .address { padding: var(--s3); }
  .address-seal { top: var(--s3); right: var(--s3); --seal-size: 44px; }
  .address > .label, .address-name { padding-right: 60px; }
  .address-actions .btn { flex: 1 1 auto; justify-content: center; }
  .kind { grid-template-columns: minmax(0, 1fr); }
  .kind-title, .kind-text, .kind-ask, .kind-door { grid-column: auto; }
  .kind > .seal { grid-row: auto; }
  .kind > .seal { --seal-size: 44px; }
  .kind-ask { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .kind-ask .label { padding-top: 0; }
  .address-door { grid-template-columns: minmax(0, 1fr); padding: var(--s3); }
  .address-door .seal { --seal-size: 44px; }
  .address-door-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* The paste impression the seal-tray island draws when a door is pressed:
   a full-viewport canvas above everything, gone when the page turns. */
.tray-press { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; }

@keyframes rail-away {
  to { max-height: 0; padding-block: 0; opacity: 0; }
}

/* --- Copy the address (the copy-email island) -------------------------- */
.copy-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--s3);
  background: var(--ink);
  padding: 10px var(--s3);
}
.copy-btn {
  background: transparent;
  color: var(--bone);
  box-shadow: inset 0 0 0 1px var(--ink-hair);
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 14px;
  min-height: 40px;
  cursor: pointer;
}
.copy-btn:hover { background: rgba(241, 239, 232, 0.08); }
.copy-state { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-quiet); min-height: 28px; }
.copy-state .stamp { --seal-size: 28px; background: var(--ground); }
@media (prefers-reduced-motion: no-preference) {
  .copy-state .stamp { animation: stamp-land 220ms var(--press) both; }
}
@keyframes stamp-land { from { transform: scale(1.3); opacity: 0; } to { transform: none; opacity: 1; } }