/* ============================================================================
   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--indigo, .band--ink, .close, .onward { --comb-ink: var(--bone); }
.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: #7C1A11;
  color: var(--bone);
  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 rgba(241, 239, 232, 0.72);
  flex: none;
}
.seal > span { transform: translateY(0.02em); font-size: 0.7em; }

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

/* --- Header -----------------------------------------------------------
   Four destinations. Five was over Miller's limit and the fifth was a stub. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--cinnabar);
  --comb-ink: var(--bone);
}
.masthead-in {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-right: auto;
  min-width: 0;
}
.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;
}
.wordmark-role {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bone-quiet);
  margin-top: 2px;
}

.marks { display: flex; align-items: stretch; gap: 2px; }
.mark {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  text-decoration: none;
  color: var(--bone);
  transition: background 160ms var(--press);
}
.mark .seal { --seal-size: 26px; background: transparent; box-shadow: inset 0 0 0 1px var(--bone-faint); }
.mark-name {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mark:hover { background: var(--cinnabar-lift); }
.mark[aria-current="page"] { background: var(--cinnabar-press); }
.mark[aria-current="page"] .seal { background: var(--bone); color: var(--cinnabar-press); box-shadow: none; }

.mark--write { background: var(--bone); color: var(--cinnabar); }
.mark--write .seal { background: var(--cinnabar); color: var(--bone); box-shadow: none; }
.mark--write:hover { background: var(--bone-lift); }

.menu-btn {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  min-height: 44px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--bone-faint);
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --- Hero: the converging pair ---------------------------------------
   Two subjects on one baseline, mirrored, with the bridge between them
   ranking above either — then merged into a single block below. */
.field { background: var(--cinnabar); 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; }

.pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.32fr) minmax(0, 1fr);
  gap: var(--s4);
  /* Both seals share the top line so the pair reads as a pair. Bottom
     alignment put them 60px apart and the mirroring stopped registering. */
  align-items: start;
}

.arm { min-width: 0; }
/* STORY says the visitor "opens one". Without an affordance these read as two
   headlines rather than two doors. */
.arm a { display: block; text-decoration: none; }
.arm a:hover .seal { background: var(--cinnabar-lift); }
.arm a:hover .arm-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.arm-open {
  display: block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.arm--r { text-align: right; }
.arm--r .cert { flex-direction: row-reverse; text-align: right; }
.arm .seal { --seal-size: clamp(84px, 11vw, 128px); margin-bottom: var(--s3); }
.arm--r .seal { margin-left: auto; }
.arm-title {
  font-family: var(--display);
  font-size: var(--t-lead);
  font-weight: 800;
  font-variation-settings: "wdth" 108;
  line-height: 1.02;
  letter-spacing: -0.018em;
}
.arm-sub {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-quiet);
  margin-top: 10px;
}
.arm-facts { list-style: none; margin-top: var(--s3); display: grid; gap: 7px; }
.arm-facts li {
  font-size: var(--t-small);
  line-height: 1.4;
  padding-top: 7px;
  border-top: 1px solid var(--bone-faint);
}

/* The bridge outranks both arms: it is the only bone object in the field. */
.bridge {
  background: var(--bone);
  color: var(--ink);
  padding: var(--s4) var(--s4) var(--s3);
  --comb-ink: var(--ink);
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.bridge .thesis {
  font-family: var(--display);
  font-size: var(--t-h2);
  font-weight: 800;
  font-variation-settings: "wdth" 106;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.bridge .thesis em { font-style: normal; color: var(--cinnabar); }
.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;
}

/* --- 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(--cinnabar);
  color: var(--bone);
  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(--cinnabar-lift); }
.btn:active { transform: translateY(1px); background: var(--cinnabar-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(--bone);
  color: var(--cinnabar);
}
.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: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-top: 5px;
  color: var(--bone-quiet);
}
.doc .cert-src { color: var(--ink-quiet); }

/* --- Register: ranked rows of certified entries ----------------------- */
.register { display: grid; gap: 1px; background: var(--ink-faint); }
.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-mark {
  font-family: var(--cjk);
  font-size: 19px;
  color: var(--cinnabar);
  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: 9.5px;
  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); }
a.entry:hover .entry-role { color: var(--cinnabar); }
.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: 9.5px;
  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: rgba(241, 239, 232, 0.16);
  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(--cinnabar);
  padding: var(--s4);
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}
.close-card--primary:hover { background: var(--cinnabar-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(--cinnabar); }
.close-key {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bone-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 rgba(241, 239, 232, 0.2);
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 9.5px;
  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(--bone-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(--cinnabar);
  padding: var(--s4) var(--s3);
  text-decoration: none;
  display: block;
  transition: background 150ms var(--press);
}
.onward a:hover { background: var(--cinnabar-lift); }
.onward-key {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-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: 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. */
  .pair { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .arm--r, .arm--r .cert { text-align: left; flex-direction: row; }
  .arm--r .seal { margin-left: 0; }
  .bridge { order: -1; }
  .two-up, .two-even { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .marks {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cinnabar-press);
    flex-direction: column;
    gap: 1px;
    padding: 1px;
  }
  .marks.is-open { display: flex; }
  .mark { padding: 15px var(--gutter); min-height: 52px; background: var(--cinnabar); }
  /* .mark and .mark--write have equal specificity, so the rule above would
     otherwise win here purely by coming later, painting cinnabar text on a
     cinnabar ground and making the site's primary action invisible on every
     phone. Measured at 1.0:1 before this line existed. */
  .mark--write { background: var(--bone); }
  .menu-btn { display: inline-flex; }
  .masthead-in { position: relative; }
  .close-grid { grid-template-columns: minmax(0, 1fr); }
  .close-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

@media (max-width: 560px) {
  .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; }
  .arm .seal { --seal-size: 76px; }
  .entry { padding: var(--s3); }
}