/* orpho-home.css — homepage composition only.
 * Shared surfaces live in orpho-primitives.css; this file positions them into
 * the asymmetric two-column hero from the reference. Loaded after primitives,
 * before index.css (which still owns the anchoring instrument below the fold).
 */

/* ── Hero grid ──────────────────────────────────────────────────────────
 * The reference is deliberately NOT 50/50: the lede column is narrower and
 * the envelope plate overhangs the right edge. Preserving that asymmetry is
 * most of what makes it read as editorial rather than SaaS.
 */
.orpho-hero {
  position: relative;
  overflow: hidden;
  padding: var(--orpho-s-7) var(--orpho-s-5) var(--orpho-s-8);
}

.orpho-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.04fr);
  gap: var(--orpho-s-7);
  align-items: start;
  max-width: var(--orpho-measure);
  margin: 0 auto;
}

.orpho-hero__lede { padding-top: var(--orpho-s-6); }

.orpho-hero__copy {
  font-size: 1.09rem;
  line-height: 1.78;
  color: var(--orpho-ink-soft);
  margin: 0 0 var(--orpho-s-6);
}

.orpho-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--orpho-s-4);
  margin-bottom: var(--orpho-s-7);
}

.orpho-hero__trust {
  font-size: var(--orpho-t-small);
  line-height: 1.55;
  color: var(--orpho-ink-faint);
  padding-left: 2.6rem;
  position: relative;
}

/* The small shield glyph before the trust line, drawn in CSS rather than
 * shipped as another asset. */
.orpho-hero__trust::before {
  content: "";
  position: absolute;
  left: 0; top: 0.15rem;
  width: 1.7rem; height: 1.9rem;
  border: 1px solid var(--orpho-border-firm);
  border-radius: 3px 3px 46% 46% / 3px 3px 34% 34%;
  box-shadow: inset 0 1px 0 var(--orpho-emboss-lit);
}

/* ── The plate: envelope, receipt, wax ──────────────────────────────────
 * Three stacked layers. The receipt is the hero of the composition, so it
 * sits highest in z and overhangs the envelope's left edge.
 */
.orpho-hero__plate {
  position: relative;
  min-height: 640px;
}

.orpho-envelope {
  position: absolute;
  inset: 0 -6% 12% 8%;
  background: linear-gradient(168deg, #f7f2e7 0%, #efe7d6 54%, #e2d7c0 100%);
  border: 1px solid var(--orpho-hairline);
  border-radius: 3px;
  box-shadow: 0 22px 50px -22px var(--orpho-shadow-deep),
              inset 0 1px 0 var(--orpho-emboss-lit);
}

/* Upper flap — a folded triangle rendered with a clip-path so the crease
 * catches light along its lower edge. */
.orpho-envelope__flap {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 27%;
  background: linear-gradient(180deg, #f9f4ea 0%, #ece2cf 100%);
  border-bottom: 1px solid var(--orpho-border);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
  box-shadow: 0 1px 0 var(--orpho-emboss-lit);
}

/* String-and-button closure: two brass discs. */
.orpho-envelope__closure {
  position: absolute;
  left: 50%; top: 5%;
  width: 26px; height: 26px;
  margin-left: -13px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #d8b878 0%, var(--orpho-brass) 52%, #7d6132 100%);
  box-shadow: 0 2px 4px var(--orpho-shadow-deep), inset 0 1px 0 rgba(255,240,210,0.5);
}
.orpho-envelope__closure::after {
  content: "";
  position: absolute;
  left: 0; top: 300%;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #d8b878 0%, var(--orpho-brass) 52%, #7d6132 100%);
  box-shadow: 0 2px 4px var(--orpho-shadow-deep), inset 0 1px 0 rgba(255,240,210,0.5);
}

/* Embossed crest on the upper-right flap. Light shifts with the pointer via
 * the :hover on the plate — the only pointer-reactive lighting in the hero. */
.orpho-envelope__crest {
  position: absolute;
  right: 6%; top: 9%;
  width: 92px; height: 92px;
}
.orpho-hero__plate:hover .orpho-envelope__crest {
  filter: drop-shadow(0 -1px 0 var(--orpho-emboss-lit))
          drop-shadow(0 1px 0 var(--orpho-emboss-dark));
  opacity: 0.68;
}

/* Receipt sits over the envelope, overhanging its left edge. */
.orpho-hero__receipt {
  position: absolute;
  left: 0; right: 22%; top: 17%;
  z-index: 2;
}

.orpho-receipt__sub { text-align: center; display: block; margin: 0 0 var(--orpho-s-2); }

/* Letterhead crest on the hero receipt: the seal artwork, untouched, set in
 * the top-left corner the way the sample-card receipt carries it. Peeks with
 * the tucked strip; fully visible once the receipt is drawn out. */
.orpho-receipt__crest {
  position: absolute;
  left: 16px;
  top: 14px;
  width: 44px;
  height: 44px;
  opacity: .94;
}
@media (max-width: 680px) {
  .orpho-receipt__crest { width: 34px; height: 34px; left: 12px; top: 12px; }
}

.orpho-receipt__sig {
  font-family: var(--orpho-display);
  font-style: italic;
  font-size: 1.6rem;
  text-align: center;
  color: var(--orpho-ink);
  margin: var(--orpho-s-6) 0 0;
  padding-bottom: var(--orpho-s-2);
  border-bottom: 1px solid var(--orpho-hairline);
}
.orpho-receipt__sig-sub { display: block; text-align: center; margin-top: var(--orpho-s-2); }

/* Wax seal, lower right, overlapping receipt and envelope. */
.orpho-hero__wax {
  position: absolute;
  right: 2%; bottom: 14%;
  z-index: 3;
}

/* ── Feature strip ──────────────────────────────────────────────────────
 * One card, five cells, hairline separators — not five floating cards.
 */
.orpho-features-wrap {
  max-width: var(--orpho-measure);
  margin: 0 auto var(--orpho-s-8);
  padding: var(--orpho-s-4) var(--orpho-s-2);
}
.orpho-features { list-style: none; margin: 0; padding: 0; }
.orpho-feature__title {
  font-family: var(--orpho-body);
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--orpho-ink);
  margin: 0 0 var(--orpho-s-3);
  line-height: 1.32;
}
.orpho-feature__body {
  font-size: var(--orpho-t-small);
  color: var(--orpho-ink-faint);
  line-height: 1.5;
  margin: 0;
}

/* ── Responsive ─────────────────────────────────────────────────────────
 * Mobile keeps the hierarchy: headline, copy, actions, then the plate as a
 * shorter but still-layered composition. It does not become a flat list.
 */
@media (max-width: 1040px) {
  .orpho-hero__inner { grid-template-columns: 1fr; gap: var(--orpho-s-6); }
  .orpho-hero__plate { min-height: 560px; }
  .orpho-envelope { inset: 0 0 10% 0; }
  .orpho-hero__receipt { right: 14%; }
}

@media (max-width: 680px) {
  .orpho-hero { padding: var(--orpho-s-5) var(--orpho-s-4) var(--orpho-s-7); }
  .orpho-hero__copy br { display: none; }   /* let it reflow naturally */
  .orpho-hero__plate { min-height: 470px; }
  .orpho-hero__receipt { left: 0; right: 8%; top: 13%; }
  .orpho-hero__wax { right: 0; bottom: 8%; }
  .orpho-envelope__crest { width: 62px; height: 62px; }
  .orpho-hero__actions .orpho-btn { flex: 1 1 100%; }
}

/* ══ Fidelity corrections, pass 1 (2026-08-08) ══════════════════════════
 * Measured against the reference render at 1440px. Each block below fixes a
 * specific deviation observed in the screenshot, not a guess.
 */

/* 1. The legacy .hero rule centres everything. The reference is left-aligned
 *    editorial. Scope the override to the new hero so other pages that still
 *    use .hero are untouched. */
.orpho-hero.hero,
.orpho-hero .orpho-hero__lede,
.orpho-hero .orpho-hero__copy,
.orpho-hero .orpho-hero__actions,
.orpho-hero .orpho-hero__trust { text-align: left; }
.orpho-hero .orpho-hero__actions { justify-content: flex-start; }

/* 2. Headline wrapped to three lines because the lede column was too narrow.
 *    The reference breaks exactly twice: "Proof that it existed." /
 *    "For all time." Widen the column and let the <br> do the work. */
.orpho-hero__inner { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.06fr); }
.orpho-hero-title { font-size: clamp(2.5rem, 4.4vw, 3.75rem); max-width: 13ch; }
.orpho-hero__copy { max-width: 46ch; }

/* 3. The impressed crest was --orpho-wax-deep on wax red: dark on dark, so it
 *    vanished. A real wax impression reads as a LIGHTER relief catching light
 *    from the top-left plus a dark occlusion below it. */
.orpho-wax__crest {
  background: linear-gradient(155deg,
    rgba(255, 196, 168, 0.55) 0%,
    rgba(190, 96, 68, 0.42) 42%,
    rgba(58, 14, 8, 0.62) 100%);
  opacity: 0.95;
  filter:
    drop-shadow(0 1px 0 rgba(255, 190, 160, 0.30))
    drop-shadow(0 -1px 1px rgba(45, 10, 5, 0.55));
}

/* 4. Envelope: the flap and emboss were too low-contrast to read at all. */
.orpho-envelope { background: linear-gradient(168deg, #f6f0e3 0%, #ebe1cd 54%, #ddd0b6 100%); }
.orpho-envelope__flap {
  height: 30%;
  background: linear-gradient(180deg, #fbf6ed 0%, #e9dfc9 100%);
  border-bottom: 1px solid var(--orpho-border-firm);
  filter: drop-shadow(0 2px 3px rgba(90, 70, 44, 0.16));
}
.orpho-envelope__crest {
  opacity: 0.9;
  background: linear-gradient(150deg, #cdbf9f 0%, #b9a883 55%, #8e7c58 100%);
  filter:
    drop-shadow(0 1px 0 rgba(255, 252, 245, 0.9))
    drop-shadow(0 -1px 1px rgba(90, 70, 44, 0.45));
}

/* 5. The CSS shield glyph rendered as an empty box. The reference's mark is a
 *    small outlined shield with a tick; until that asset exists, drop the
 *    pseudo-element rather than ship a stray rectangle. */
.orpho-hero__trust { padding-left: 0; }
.orpho-hero__trust::before { content: none; }

/* 6. Ornament sat too high and too pale to read as engraving. */
.orpho-ornament--left { left: -26vw; top: 14vh; opacity: 0.12; }

/* ══ Fidelity corrections, pass 2 ═══════════════════════════════════════
 * The crest PNG's alpha is DISC-shaped, not line-art-shaped: transparent
 * outside the medallion, fully opaque inside it. Using it as a CSS mask
 * therefore paints a solid circle — which is exactly what pass 1 rendered.
 * The artwork must be composited, not masked. mix-blend-mode lets the dark
 * engraving show while the cream ground drops out, and it keeps the shipped
 * artwork byte-identical (the medallion is never redrawn).
 */
.orpho-wax__crest,
.orpho-envelope__crest {
  -webkit-mask: none;
  mask: none;
  background: none;
  object-fit: contain;
}

.orpho-wax__crest {
  width: 78%; height: 78%;
  mix-blend-mode: multiply;
  opacity: 0.55;
  filter: contrast(1.3) brightness(0.85);
}

.orpho-envelope__crest {
  mix-blend-mode: multiply;
  opacity: 0.3;
  filter: grayscale(1) contrast(0.9);
}
.orpho-hero__plate:hover .orpho-envelope__crest { opacity: 0.42; }

/* Headline: 13ch was too tight and forced a third line. The reference breaks
 * only at the authored <br>. */
.orpho-hero-title { max-width: none; }

/* Copy: the authored <br>s plus a narrow measure produced a ragged four
 * lines. Widen the measure so each authored line fits on one visual line. */
.orpho-hero__copy { max-width: 60ch; }

/* ══ Fidelity corrections, pass 3 ═══════════════════════════════════════
 * "Proof that it existed." must sit on ONE line, breaking only at the
 * authored <br>. At 3.75rem Fraunces that string needs ~640px but the lede
 * column is ~570px, so it wrapped. Trade a little display size for the
 * correct break — the reference's two-line lockup is the point, and a
 * three-line headline changes the whole rhythm of the page.
 */
.orpho-hero-title {
  font-size: clamp(2.1rem, 3.5vw, 3.15rem);
  text-wrap: balance;
}
.orpho-hero__inner { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.0fr); }

/* ══ Fidelity corrections, pass 4 ═══════════════════════════════════════
 * `text-wrap: balance` distributed the headline evenly across three lines,
 * which is worse than the raw wrap — it optimises for even ragging, not for
 * the authored break. The break points are a design decision, so state them
 * as structure (two block spans) instead of hoping a font-size lands right.
 * Each line then shrinks to fit rather than wrapping.
 */
.orpho-hero-title { text-wrap: initial; font-size: clamp(2rem, 3.9vw, 3.4rem); }
.orpho-hero-title__line { display: block; white-space: nowrap; }

@media (max-width: 560px) {
  /* Below this the nowrap would overflow; allow the reflow. */
  .orpho-hero-title__line { white-space: normal; }
}

/* ══ How It Works ═══════════════════════════════════════════════════════
 * Numbered vertical flow. The numerals are engraved discs joined by a
 * hairline rule, drawn with counters + pseudo-elements so the markup stays a
 * plain <ol> and the order remains semantic.
 */
.orpho-hiw { padding: 0 var(--orpho-s-5) var(--orpho-s-6); }
.orpho-hiw__inner { max-width: var(--orpho-measure); margin: 0 auto; }
.orpho-hiw__steps { max-width: 30rem; }
.orpho-hiw__title { font-size: 0.82rem; letter-spacing: var(--orpho-track-wide); }

.orpho-steps {
  counter-reset: orpho-step;
  list-style: none;
  margin: var(--orpho-s-5) 0 0;
  padding: 0;
}

.orpho-step {
  counter-increment: orpho-step;
  position: relative;
  padding: 0 0 var(--orpho-s-5) 3.4rem;
}

/* The engraved numeral disc. */
.orpho-step::before {
  content: counter(orpho-step);
  position: absolute;
  left: 0; top: 0;
  width: 2.1rem; height: 2.1rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--orpho-gold);
  border-radius: 50%;
  font-family: var(--orpho-body);
  font-size: 0.85rem;
  color: var(--orpho-gold-deep);
  background: var(--orpho-paper-lit);
  box-shadow: inset 0 1px 0 var(--orpho-emboss-lit);
}

/* Hairline connector between discs; suppressed on the last step. */
.orpho-step::after {
  content: "";
  position: absolute;
  left: 1.05rem; top: 2.35rem; bottom: 0.35rem;
  width: 1px;
  background: repeating-linear-gradient(180deg,
    var(--orpho-border) 0 3px, transparent 3px 6px);
}
.orpho-step:last-child { padding-bottom: 0; }
.orpho-step:last-child::after { content: none; }

.orpho-step__title {
  font-family: var(--orpho-body);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--orpho-ink);
  margin: 0.16rem 0 0.22rem;
  line-height: 1.35;
}
.orpho-step__body {
  font-size: var(--orpho-t-small);
  color: var(--orpho-ink-faint);
  margin: 0;
  line-height: 1.5;
}

/* ══ Sample receipt card ════════════════════════════════════════════════ */
.orpho-sample {
  max-width: var(--orpho-measure);
  margin: 0 auto var(--orpho-s-8);
}

/* ══ Footer ═════════════════════════════════════════════════════════════
 * The existing footer markup is untouched — it carries the link columns,
 * the brand line and the legal disclaimer, which is a compliance
 * requirement. Only the ground, the ink and the medallion are new.
 */
.orpho-footer .wrap { position: relative; z-index: 1; }
.orpho-footer .brand-line,
.orpho-footer .legal-disclaimer { color: rgba(240, 234, 222, 0.5); }
.orpho-footer summary { color: rgba(240, 234, 222, 0.78); cursor: pointer; }
.orpho-footer .legal-disclaimer {
  border-top: 1px solid rgba(240, 234, 222, 0.12);
  margin-top: var(--orpho-s-5);
  padding-top: var(--orpho-s-4);
  font-size: var(--orpho-t-small);
  line-height: 1.55;
}

/* Bronze medallion, far right, behind the content. */
.orpho-footer > .orpho-footer__medallion {
  position: absolute;
  right: 4%;
  top: max(var(--orpho-s-5), calc(50% - 75px));   /* never above the box edge */
  transform: none;
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 1040px) {
  .orpho-footer > .orpho-footer__medallion { opacity: 0.3; right: -4%; }
}
@media (max-width: 680px) {
  .orpho-hiw__steps { max-width: none; }
  .orpho-footer > .orpho-footer__medallion { display: none; }
}

/* ══ How It Works ⇄ Sample receipt, paired ══════════════════════════════
 * The reference sets the five-step flow against the sample receipt on one
 * baseline. They are separate <section>s (the receipt carries #proof and its
 * own JS), so the pairing is done by a wrapper grid rather than by nesting
 * one inside the other — no content moves, no hook is disturbed.
 *
 * Ratio is not 50/50: the steps column is narrower, matching the reference,
 * and the receipt is the heavier object on the right.
 */
.orpho-pair {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: var(--orpho-s-7);
  align-items: start;
  max-width: var(--orpho-measure);
  margin: 0 auto var(--orpho-s-8);
  padding: 0 var(--orpho-s-5);
}

/* Both children already carry their own max-width/margin for the standalone
 * case; inside the pair they must fill their grid cell instead. */
.orpho-pair > .orpho-hiw,
.orpho-pair > .orpho-sample {
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

.orpho-pair > .orpho-sample { padding: var(--orpho-s-6); }
.orpho-pair .orpho-hiw__inner { max-width: none; padding: 0; }
.orpho-pair .orpho-hiw__steps { max-width: none; }

/* Optical alignment: the steps' first line should sit level with the
 * receipt card's first line, and the card has border + padding above it. */
.orpho-pair > .orpho-hiw { padding-top: var(--orpho-s-6); }

@media (max-width: 1040px) {
  .orpho-pair {
    grid-template-columns: 1fr;
    gap: var(--orpho-s-6);
    padding: 0 var(--orpho-s-4);
  }
  .orpho-pair > .orpho-hiw { padding-top: 0; }
}

/* ══ Letter composition, pass 5 (2026-08-08 mockup review) ══════════════
 * Founder review: "missing key elements of the letter." Each block below is
 * one named element from the reference. The reference ALSO swapped the crest
 * for a feather quill and a letter-O wax impression — those are NOT adopted:
 * the globe/serpent medallion is a hard rule and every emblem below still
 * composites the canonical seal-display.png.
 */

/* 1. Criss-cross twine between the two closure buttons. Two thin rotated
 *    strands + an anchor loop, all gradients — no asset, CSP-clean. */
.orpho-envelope__string,
.orpho-envelope__string::before {
  content: "";
  position: absolute;
  left: 50%; top: calc(5% + 13px);
  width: 3px; height: 86px;
  margin-left: -1.5px;
  background: linear-gradient(180deg, #efe6d2, #d9cbae 60%, #cbbb9a);
  box-shadow: 0 1px 2px rgba(90, 70, 44, 0.35);
  transform-origin: 50% 0;
  transform: rotate(24deg);
  border-radius: 2px;
}
.orpho-envelope__string::before {
  left: 0; top: 0; margin-left: 0;
  transform: rotate(-48deg);   /* relative to parent strand → the X wrap */
}

/* 2. Back-flap diagonal folds on the envelope's right side — the V-creases
 *    of a real envelope, drawn as two hairline diagonals that catch light. */
.orpho-envelope::before,
.orpho-envelope::after {
  content: "";
  position: absolute;
  top: 27%; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(76, 58, 34, 0.0) 0%,
    rgba(76, 58, 34, 0.16) 35%,
    rgba(76, 58, 34, 0.06) 100%);
  box-shadow: 1px 0 0 var(--orpho-emboss-lit);
}
.orpho-envelope::before { right: 18%; transform: skewX(-16deg); }
.orpho-envelope::after  { right: 4%;  transform: skewX(14deg); }

/* 3. Ring-style emboss around the flap crest — the crest sits inside an
 *    embossed circular rim, per the reference. Canonical artwork inside. */
.orpho-envelope__crest {
  border-radius: 50%;
  padding: 10px;
  box-shadow:
    inset 0 1px 0 var(--orpho-emboss-lit),
    inset 0 -1px 0 var(--orpho-emboss-dark),
    0 1px 0 var(--orpho-emboss-lit),
    0 -1px 0 var(--orpho-emboss-dark);
}

/* 4. Rosette rim on the wax seal: an outer scalloped ring behind the dome so
 *    the seal reads as pressed wax with squeeze-out, not a button. */
.orpho-hero__wax::before {
  content: "";
  position: absolute;
  inset: -9px;
  z-index: -1;
  border-radius: 46% 54% 52% 48% / 55% 47% 53% 45%;
  background:
    radial-gradient(circle at 40% 30%, var(--orpho-wax-lit) 0%, var(--orpho-wax) 55%, var(--orpho-wax-deep) 100%);
  filter: blur(0.4px);
  box-shadow:
    0 12px 24px -10px rgba(50, 12, 6, 0.5),
    inset 0 2px 4px rgba(255, 190, 160, 0.18);
}

/* 5. The receipt hangs FROM the string: raise the closure above the receipt
 *    and tuck the receipt's top edge under it. */
.orpho-envelope__closure, .orpho-envelope__string { z-index: 3; }
.orpho-hero__receipt { top: 15%; }

/* ══ Sample receipt card: calendar attestation row ══════════════════════
 * The five REAL OpenTimestamps calendars this service submits to, named from
 * server/engine.py CALENDARS — never the invented brands in the mockup. */
.orpho-cal-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--orpho-s-4) var(--orpho-s-6);
  justify-content: center;
  margin-top: var(--orpho-s-5);
  padding-top: var(--orpho-s-4);
  border-top: 1px solid var(--orpho-hairline);
}
.orpho-cal {
  text-align: center;
  font-size: var(--orpho-t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orpho-ink-faint);
}
.orpho-cal::after {
  content: "✓";
  display: block;
  margin-top: 0.3rem;
  color: var(--orpho-gold-deep);
  font-size: 0.9rem;
}
.orpho-cal-row__title {
  flex-basis: 100%;
  text-align: center;
  margin: 0;
}

/* ══ Letter pass 6 — corrections from the render ════════════════════════
 * The twine drew as a giant lambda: 86px strands at 24° overshoot the second
 * button and meet below it. A figure-8 wrap is COMPACT — it lives between
 * the two buttons. And the fold creases ran the full envelope height,
 * reading as scratches across the wax; real creases live in the lower half
 * and fade before any edge.
 */
.orpho-envelope__string,
.orpho-envelope__string::before {
  height: 46px;
  top: calc(5% + 20px);
  transform: rotate(30deg);
}
.orpho-envelope__string::before { transform: rotate(-60deg); top: 2px; }

.orpho-envelope::before,
.orpho-envelope::after {
  top: 46%; bottom: 10%;
  background: linear-gradient(180deg,
    rgba(76, 58, 34, 0.0) 0%,
    rgba(76, 58, 34, 0.10) 45%,
    rgba(76, 58, 34, 0.0) 100%);
  box-shadow: none;
}
.orpho-envelope::before { right: 20%; transform: skewX(-10deg); }
.orpho-envelope::after  { right: 6%;  transform: skewX(9deg); }

/* ══ Letter pass 7 — founder screenshot review (2026-08-08 late) ════════
 * Three named defects: the left ornament reads as fragments, the envelope
 * flaps are invisible behind the receipt, and the flap crest prints instead
 * of sinking. Each fix below maps to one of those.
 */

/* 1. "logo on the left is not whole" — at -26vw the circle lost its top and
 *    left simultaneously, so it read as stray arcs + a serpent, not a
 *    medallion cropped by the edge. Show a clear majority of the circle,
 *    cropped on ONE axis only. */
.orpho-ornament--left {
  left: -11vw; top: 22vh;
  width: 38vw; height: 38vw;
  max-width: 640px; max-height: 640px;
  opacity: 0.10;
}

/* 2. "letter isn't with the flaps" — the receipt sat at 15% and buried the
 *    flap V and the second button. Drop it below the closure, deepen the
 *    flap crease, and let the flap's point reach further down so the fold
 *    geometry is unmistakable. */
.orpho-hero__receipt { top: 26%; }
.orpho-envelope__flap {
  height: 34%;
  clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
  background: linear-gradient(180deg, #faf5ea 0%, #efe5d1 74%, #e2d5bc 100%);
  border-bottom: 0;
  filter: drop-shadow(0 3px 4px rgba(90, 70, 44, 0.22));
}

/* 3. "the crest isn't sunken in" — multiply-blending the dark engraving
 *    reads as PRINTED. A blind emboss is paper-coloured: the artwork is
 *    lifted almost to paper tone and the relief comes from a shadow pair —
 *    dark caught on the top-left of the recess, light on the bottom-right. */
.orpho-envelope__crest {
  mix-blend-mode: normal;
  opacity: 0.85;
  filter:
    grayscale(1) brightness(1.62) contrast(0.55)
    drop-shadow(-1px -1px 1px rgba(90, 70, 44, 0.55))
    drop-shadow(1px 1px 0 rgba(255, 252, 245, 0.95));
  box-shadow:
    inset 2px 2px 4px rgba(90, 70, 44, 0.28),
    inset -1px -1px 2px rgba(255, 252, 245, 0.9);
}
.orpho-hero__plate:hover .orpho-envelope__crest { opacity: 1; filter:
    grayscale(1) brightness(1.55) contrast(0.6)
    drop-shadow(-1px -1px 1px rgba(90, 70, 44, 0.62))
    drop-shadow(1px 1px 0 rgba(255, 252, 245, 1)); }

/* String follows the receipt down: keep the X centered between the buttons,
 * both of which are now fully visible above the receipt's top edge. */
.orpho-envelope__string, .orpho-envelope__string::before { top: calc(5% + 22px); height: 52px; }

/* Pass 7b — the twine needed weight to read against the parchment, and the
 * flap's V-crease pops via its outline shadow (drop-shadow follows the
 * clip-path, so darkening it draws the fold itself). */
.orpho-envelope__string,
.orpho-envelope__string::before {
  width: 4px;
  background: linear-gradient(180deg, #e6d9bf, #c9b892 55%, #b3a17f);
  box-shadow: 0 1px 2px rgba(90, 70, 44, 0.45);
}
.orpho-envelope__flap { filter: drop-shadow(0 2px 2px rgba(90, 70, 44, 0.34)); }

/* ══ Pass 8 — the two reference crops (letter detail + receipt card) ════ */

/* Letter: the flap in the crop is a wide shallow curve, not a V. */
.orpho-envelope__flap {
  clip-path: none;
  height: 30%;
  border-radius: 0 0 44% 44% / 0 0 58% 58%;
  border-bottom: 1px solid var(--orpho-border);
  box-shadow: 0 4px 8px -3px rgba(90, 70, 44, 0.3);
  filter: none;
}

/* Grommets: the receipt HANGS from the string through two punched eyelets. */
.orpho-hero__receipt::before,
.orpho-hero__receipt::after {
  content: "";
  position: absolute;
  top: 14px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--orpho-paper-deep);
  box-shadow:
    inset 0 1px 2px rgba(90, 70, 44, 0.5),
    0 1px 0 var(--orpho-emboss-lit);
  border: 2px solid #cbbb9a;
}
.orpho-hero__receipt::before { left: 38%; }
.orpho-hero__receipt::after  { right: 38%; }

/* String ends splay outward from the lower button toward the two eyelets. */
.orpho-envelope__string { height: 58px; transform: rotate(18deg); }
.orpho-envelope__string::before { transform: rotate(-36deg); height: 58px; }

/* Cord tail trailing from beneath the wax seal, per the crop. */
.orpho-hero__wax::after {
  content: "";
  position: absolute;
  right: -34px; bottom: -26px;
  width: 74px; height: 46px;
  border: 0;
  border-bottom: 4px solid #c9b892;
  border-radius: 0 0 70% 40% / 0 0 100% 55%;
  transform: rotate(-14deg);
  box-shadow: 0 2px 2px -1px rgba(90, 70, 44, 0.4);
  z-index: -2;
}

/* Receipt: lozenge-centred divider + dotted row separators, as in the crop. */
.orpho-hero__receipt .orpho-rule--centered::before {
  background: linear-gradient(90deg,
    rgba(154,122,67,0) 0%, var(--orpho-gold) 50%, rgba(154,122,67,0) 100%);
}
.orpho-receipt__meta dt, .orpho-receipt__meta dd {
  border-bottom: 1px dotted var(--orpho-hairline);
  padding-bottom: 0.45rem;
}
.orpho-receipt__meta dt:last-of-type, .orpho-receipt__meta dd:last-of-type { border-bottom: 0; }

/* ══ Sample receipt card — reference layout ═════════════════════════════ */
.orpho-sample__bar {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--orpho-s-5);
}
.orpho-sample__view {
  font-size: var(--orpho-t-small); letter-spacing: 0.06em;
  color: var(--orpho-gold-deep); text-decoration: none;
  border-bottom: 1px solid var(--orpho-gold);
}
.orpho-sample__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: var(--orpho-s-7);
  align-items: center;
}
/* Identity column: hairline rule separates it from the live record so the
 * wordmark never crowds the status line, and the seal (artwork untouched)
 * sits a step smaller with real air beneath it. */
.orpho-sample__brand {
  text-align: center;
  padding-right: var(--orpho-s-6);
  border-right: 1px solid var(--orpho-hairline);
}
.orpho-sample__crest { width: 128px; height: 128px; margin: 0 auto var(--orpho-s-4); display: block; }
.orpho-sample__word {
  font-family: var(--orpho-display);
  font-size: 1.3rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--orpho-ink); margin: 0 0 var(--orpho-s-1);
}
.orpho-sample__blurb {
  font-size: var(--orpho-t-small); color: var(--orpho-ink-soft);
  line-height: 1.55; margin: var(--orpho-s-4) auto 0; max-width: 24ch;
}
.orpho-sample__verify-line {
  font-size: var(--orpho-t-small); color: var(--orpho-ink-faint);
  margin-top: var(--orpho-s-4); line-height: 1.6;
}
.orpho-sample__foot {
  display: flex; align-items: center; gap: var(--orpho-s-6);
  border-top: 1px solid var(--orpho-hairline);
  margin-top: var(--orpho-s-6); padding-top: var(--orpho-s-5);
}
.orpho-sample__foot .orpho-cal-row { flex: 1; border-top: 0; margin: 0; padding: 0; }
.orpho-cal svg { display: block; margin: 0 auto 0.35rem; color: var(--orpho-gold-deep); opacity: 0.85; }

@media (max-width: 900px) {
  .orpho-sample__grid { grid-template-columns: 1fr; gap: var(--orpho-s-5); }
  .orpho-sample__brand { padding-right: 0; border-right: 0; }
  .orpho-sample__foot { flex-direction: column; }
}

/* ══ Pass 9 — founder screenshot review (2026-08-10): tie + deboss ══════
 * Two named defects from the envelope-detail crop.
 *
 * 1. "the string do not match": pass 8 splayed the strands ±18°/36° at 58px
 *    toward the receipt eyelets, but the two brass buttons sit 78px apart
 *    (centers: 5%+13px and 5%+91px — the lower disc is the closure's
 *    ::after at top:300% of a 26px button). 58·cos18° ≈ 55px of vertical
 *    reach across a 78px gap: the twine could never touch either disc, and
 *    the strands painted ABOVE the buttons, so both loose ends showed.
 *    Rebuilt from the button geometry instead of eyeballing: each strand
 *    runs top-button-center → bottom-button-center (height 80px ≈
 *    78/cos13°), offset ∓9px and rotated ±13° so they CROSS mid-way as a
 *    figure-8 wrap. The discs then layer over the strand ends, which is
 *    what a wrapped tie looks like — the cord vanishes behind the button.
 * 2. "placed, not impregnated": the crest was brightness-lifted to
 *    near-white (a coin), and because inset box-shadows paint UNDER a
 *    replaced element's content, the "recess" shading only ever showed in
 *    the 10px padding ring — a white disc on a plate. A deboss needs a
 *    dish: a dedicated recess element whose floor is DEEPER PAPER (never
 *    white), dark inner lip on the upper-left, lit inner lip on the
 *    lower-right (a recess shades opposite to a boss), and the artwork
 *    sunk to paper tone inside it with carved-line lighting — bright edge
 *    below each engraved line, shadow above. Canonical PNG untouched.
 */
.orpho-envelope__string {
  top: calc(5% + 13px);           /* top button center */
  height: 78px;                   /* exactly the center-to-center gap */
  width: 28px;
  margin-left: -14px;
  transform: none;
  border-radius: 0;
  box-shadow: none;
  /* Two 4px strands drawn corner-to-corner as gradient stripes: the box
   * spans button-center to button-center, so the strand ends are AT the
   * discs by construction. atan(28/78) ≈ 19.75° → stripe axes 90°±19.75°.
   * Each stripe shades light→dark across its width: a round cord, not a
   * flat band. drop-shadow follows the stripes' alpha for depth. */
  background:
    linear-gradient(109.75deg,
      transparent calc(50% - 2px), #e2d5b8 calc(50% - 2px),
      #b3a17f calc(50% + 2px), transparent calc(50% + 2px)),
    linear-gradient(70.25deg,
      transparent calc(50% - 2px), #e2d5b8 calc(50% - 2px),
      #b3a17f calc(50% + 2px), transparent calc(50% + 2px));
  filter: drop-shadow(1px 1px 1px rgba(90, 70, 44, 0.35));
}
.orpho-envelope__string::before { content: none; }
.orpho-envelope__closure { z-index: 4; }   /* discs over the strand ends */

.orpho-envelope__recess {
  position: absolute;
  right: calc(6% - 8px); top: calc(9% - 8px);
  width: 108px; height: 108px;
  border-radius: 50%;
  /* The dish is DARKER than the flap it is pressed into — shadowed paper,
   * deepest toward the upper-left where the light cannot reach. */
  background: radial-gradient(circle at 36% 30%,
    #cfc0a0 0%, #dccfb2 55%, #e6dabf 100%);
  box-shadow:
    inset 4px 6px 10px rgba(90, 70, 44, 0.5),
    inset -2px -3px 5px rgba(255, 252, 245, 0.55),
    0 1px 0 rgba(255, 252, 245, 0.9),
    0 -1px 1px rgba(90, 70, 44, 0.12);
}
.orpho-envelope__crest {
  padding: 0;
  box-shadow: none;
  mix-blend-mode: normal;
  opacity: 0.95;
  filter:
    grayscale(1) brightness(1.02) contrast(0.62) sepia(0.5) saturate(1.1)
    drop-shadow(0 1px 0 rgba(255, 252, 245, 0.85))
    drop-shadow(0 -1px 1px rgba(90, 70, 44, 0.5));
}
.orpho-hero__plate:hover .orpho-envelope__crest {
  opacity: 1;
  filter:
    grayscale(1) brightness(1.0) contrast(0.66) sepia(0.5) saturate(1.1)
    drop-shadow(0 1px 0 rgba(255, 252, 245, 0.95))
    drop-shadow(0 -1px 1px rgba(90, 70, 44, 0.58));
}
@media (max-width: 680px) {
  .orpho-envelope__recess {
    width: 72px; height: 72px;
    right: calc(4% - 8px); top: calc(9% - 8px);
  }
}

/* ══ Pass 10 — founder review 2026-08-10: organize, de-wax, fix the desk ═
 * Three directives from the annotated screenshot:
 * 1. The red wax stamp is GONE (markup removed; .orpho-wax rules below are
 *    inert on this page). The receipt links to its own permalink instead —
 *    an instrument, not a decoration. (The scannable code that briefly
 *    stood here was removed 2026-08-18; the permalink link does that job.)
 * 2. The engraved medallion becomes the DESK: position fixed, so the
 *    watermark stays put while the papers scroll over it. z-index -1
 *    paints it above the body paper but beneath every card and text
 *    block — engraving on the desk, documents on top.
 * 3. Containment: the plate gets room for the full receipt, and the
 *    feature strip stops colliding with the composition's tail.
 */
.orpho-ornament--left {
  position: fixed;
  z-index: -1;
  left: -11vw; top: 18vh;
}
.orpho-hero__plate { min-height: 700px; }
.orpho-features-wrap { margin-top: var(--orpho-s-7); }

/* ══ Pass 11 — the architecture of trust (audit item 10, 2026-08-12) ════
 * Three engraved layers, connected by a falling gold thread: who provides
 * what, ending on the survival kicker. Engraving = type + hairlines +
 * emboss shadows from tokens; no new assets.
 */
.orpho-arch {
  max-width: var(--orpho-measure);
  margin: 0 auto var(--orpho-s-8);
  padding: var(--orpho-s-7) var(--orpho-s-6);
  text-align: center;
}
.orpho-arch__title {
  font-family: var(--orpho-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin: 0 0 var(--orpho-s-6);
}
.orpho-arch__layers {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 460px;
}
.orpho-arch__layer {
  position: relative;
  padding: var(--orpho-s-5) var(--orpho-s-5) var(--orpho-s-4);
  border: 1px solid var(--orpho-border);
  border-radius: 3px;
  background: linear-gradient(180deg, #faf5eb 0%, #f2ead9 100%);
  box-shadow: inset 0 1px 0 var(--orpho-emboss-lit),
              0 1px 0 var(--orpho-emboss-dark);
}
/* The falling thread between layers: a short gold rule with an engraved
 * arrowhead, drawn by the layer that FOLLOWS it. */
.orpho-arch__layer + .orpho-arch__layer { margin-top: 44px; }
.orpho-arch__layer + .orpho-arch__layer::before {
  content: "";
  position: absolute;
  left: 50%; top: -44px;
  width: 1px; height: 32px;
  margin-left: -0.5px;
  background: linear-gradient(180deg, var(--orpho-brass), #8f7340);
}
.orpho-arch__layer + .orpho-arch__layer::after {
  content: "";
  position: absolute;
  left: 50%; top: -14px;
  width: 7px; height: 7px;
  margin-left: -3.5px;
  border-right: 1px solid #8f7340;
  border-bottom: 1px solid #8f7340;
  transform: rotate(45deg);
}
.orpho-arch__actor { margin: 0 0 var(--orpho-s-1); }
.orpho-arch__role {
  font-family: var(--orpho-display);
  font-size: 1.25rem;
  margin: 0 0 var(--orpho-s-2);
  color: var(--orpho-ink);
}
.orpho-arch__note {
  font-size: var(--orpho-t-small);
  color: var(--orpho-ink-faint);
  line-height: 1.55;
  margin: 0;
  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
}
.orpho-arch__kicker {
  font-family: var(--orpho-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.45;
  margin: var(--orpho-s-7) 0 var(--orpho-s-3);
  color: var(--orpho-ink);
}
.orpho-arch__foot {
  font-size: var(--orpho-t-small);
  color: var(--orpho-ink-faint);
  margin: 0;
}

/* Continuous genie composition: the envelope has its own fixed proportions,
 * independent of the receipt's height. Scoped IDs retire the old wallet poses. */
#hero-envelope.is-continuous {
  min-height: 0;
  width: 100%;
  max-width: 510px;
  margin: 0 auto;
  perspective: none;
  overflow: visible;
  overflow-anchor: none;
  align-self: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#hero-envelope.is-continuous.is-ready { transition: none; }
#hero-envelope.is-continuous .orpho-envelope {
  all: unset; position: absolute; box-sizing: border-box; display: block;
  top: auto; bottom: 58px; left: 0; right: 0;
  width: 94%; max-width: 420px; height: auto; aspect-ratio: 1.62;
  margin: 0 auto;
  border: 1px solid #d4c4a5;
  border-radius: 5px;
  background: linear-gradient(145deg, #fcf8ed, #eee2ca);
  box-shadow: 0 22px 35px -22px rgba(71,48,20,.45), inset 0 1px #fffdf7;
}
#hero-envelope.is-continuous .orpho-envelope__flap {
  all: unset; position: absolute; z-index: 5;
  left: 0; right: 0; top: 0; height: 58%;
  border: 0; border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, #fffaf0, #ecdec1);
  filter: none;
  transform: none;
  opacity: 1;
  transform-origin: 50% 0;
  transition: transform 450ms ease, opacity 300ms ease;
}
#hero-envelope.is-continuous.is-open .orpho-envelope__flap {
  transform: scaleY(-.72); opacity: .55;
}
#hero-envelope.is-continuous .orpho-envelope__pocket {
  all: unset; position: absolute; z-index: 3;
  inset: 0;
  border: 0;
  background: linear-gradient(32deg, #e4d4b5 0%, #f4ebd8 49.7%, transparent 50%) left/50.1% 100% no-repeat,
              linear-gradient(-32deg, #e4d4b5 0%, #f4ebd8 49.7%, transparent 50%) right/50.1% 100% no-repeat;
  box-shadow: none;
}
#hero-envelope.is-continuous .orpho-envelope__pocket::before { display: none; }
#hero-envelope.is-continuous .orpho-envelope__fold {
  all: unset; position: absolute;
  inset: 0; filter: drop-shadow(0 -1px 0 rgba(129,96,46,.17));
}
#hero-envelope.is-continuous .orpho-envelope__fold::before {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(0 100%, 50% 44%, 100% 100%);
  background: linear-gradient(0deg, #ede1c9, #f8f0df);
}
#hero-envelope.is-continuous .orpho-envelope__string { display: none; }
#hero-envelope.is-continuous .orpho-envelope__closure {
  all: unset; position: absolute; z-index: 6; border-radius: 50%;
  left: calc(50% - 20px); top: calc(49% - 20px); margin: 0;
  width: 40px; height: 40px;
  border: 1px solid #b89a5c;
  background: radial-gradient(circle at 35% 25%, #e6d19c, #bf9952 65%, #ad8748);
  box-shadow: inset 0 1px 2px #f6e8c4, 0 3px 6px rgba(95,63,17,.2);
  transition: opacity 200ms ease;
}
#hero-envelope.is-continuous .orpho-envelope__closure::before {
  all: unset;
  content: ""; position: absolute; inset: 6px;
  background: url('/seal-display.png?v=8') center/contain no-repeat;
  mix-blend-mode: multiply; opacity: .7;
}
#hero-envelope.is-continuous .orpho-envelope__closure::after { display: none; }
#hero-envelope.is-continuous.is-open .orpho-envelope__closure { opacity: 0; }
#hero-envelope.is-continuous .orpho-hero__receipt {
  visibility: hidden; z-index: 6;
  top: 58px; left: 8%; right: 8%;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  clip-path: none;
  border-radius: 2px;
  background: linear-gradient(#fcf8ef, #f1e8d6);
}
#hero-envelope.is-continuous.is-closing .orpho-hero__receipt { visibility: hidden; }
#hero-envelope.is-continuous.is-open .orpho-hero__receipt { visibility: visible; }
#hero-envelope.is-continuous.is-warp .orpho-hero__receipt { visibility: hidden !important; }
#hero-envelope.is-continuous .orpho-genie-surface {
  position: absolute; left: 0; top: 0; z-index: 7;
  pointer-events: none;
  filter: drop-shadow(0 12px 14px rgba(63,44,20,.12));
}
#hero-envelope.is-continuous .orpho-envelope__toggle {
  position: absolute; display: flex; flex-direction: column; z-index: 9;
  font: inherit; color: var(--orpho-ink); cursor: pointer;
  top: 0; bottom: auto; left: 50%; right: auto;
  transform: translateX(-50%);
  align-items: center;
  padding: 7px 26px 7px 12px;
  min-width: 190px;
  background: transparent;
  border: 0; box-shadow: none;
}
#hero-envelope.is-continuous .orpho-envelope__toggle-hint { display: none; }
@media (prefers-reduced-motion: reduce) {
  #hero-envelope.is-continuous, #hero-envelope.is-continuous * { transition: none !important; }
}

#hero-envelope.is-continuous .orpho-envelope::before,
#hero-envelope.is-continuous .orpho-envelope::after,
#hero-envelope.is-continuous::before, #hero-envelope.is-continuous::after,
#hero-envelope.is-continuous .orpho-hero__receipt::before,
#hero-envelope.is-continuous .orpho-hero__receipt::after { display: none; }

#hero-envelope.is-continuous .orpho-receipt__crest { width: 30px; height: 30px; top: 16px; left: calc(50% - 15px); }
#hero-envelope.is-continuous .orpho-receipt__title { margin-top: 34px; font-size: .94rem; white-space: nowrap; padding: 0; }
#hero-envelope.is-continuous .orpho-receipt__sub { font-size: .58rem; }

/* ── Three doors + the counter (homepage §2b) ─────────────────────────────
 * Same paper, same ink, same measure as the feature list below it. */
.orpho-doors-wrap {
  max-width: var(--orpho-measure);
  margin: 0 auto var(--orpho-s-8);
  padding: 0 var(--orpho-s-2);
}
.orpho-stats {
  font-family: var(--orpho-body);
  font-size: var(--orpho-t-small);
  color: var(--orpho-ink-faint);
  letter-spacing: 0.02em;
  margin: 0 0 var(--orpho-s-5);
  text-align: center;
}
.orpho-stats strong { color: var(--orpho-ink); font-weight: 600; }
.orpho-stats__sep { margin: 0 0.55em; }
.orpho-stats__link { color: var(--orpho-ink-soft); text-decoration: underline; text-underline-offset: 0.18em; }
.orpho-doors__title {
  font-size: 0.82rem;
  letter-spacing: var(--orpho-track-wide);
  text-transform: uppercase;
  color: var(--orpho-ink-faint);
  margin: 0 0 var(--orpho-s-4);
  text-align: center;
}
.orpho-doors {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--orpho-s-4);
}
.orpho-door {
  display: flex; flex-direction: column; gap: var(--orpho-s-3);
  padding: var(--orpho-s-5) var(--orpho-s-4);
  background: var(--orpho-paper-lit);
  border: 1px solid var(--orpho-paper-deep);
  border-radius: 6px;
}
.orpho-door__title {
  font-family: var(--orpho-display);
  font-size: 1.28rem; line-height: 1.2;
  color: var(--orpho-ink); margin: 0;
}
.orpho-door__body { font-size: var(--orpho-t-small); color: var(--orpho-ink-soft); line-height: 1.55; margin: 0; flex: 1; }
.orpho-door__cta { align-self: flex-start; }
.orpho-door__links { font-size: var(--orpho-t-small); color: var(--orpho-ink-faint); margin: 0; }
.orpho-door__links a { color: var(--orpho-ink-soft); text-decoration: underline; text-underline-offset: 0.18em; }

/* ── Pick your situation (homepage §3b) ─────────────────────────────── */
.orpho-situations-wrap {
  max-width: var(--orpho-measure);
  margin: 0 auto var(--orpho-s-8);
  padding: 0 var(--orpho-s-2);
}
.orpho-situations__title {
  font-size: 0.82rem; letter-spacing: var(--orpho-track-wide); text-transform: uppercase;
  color: var(--orpho-ink-faint); margin: 0 0 var(--orpho-s-3);
}
.orpho-situations {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--orpho-s-2) var(--orpho-s-5);
}
.orpho-situations li a {
  display: block; padding: 0.55rem 0;
  border-bottom: 1px solid var(--orpho-paper-deep);
  color: var(--orpho-ink); text-decoration: none; font-size: 0.97rem;
}
.orpho-situations li a:hover { color: var(--orpho-gold-deep); }
.orpho-situations__more { margin: var(--orpho-s-3) 0 0; font-size: var(--orpho-t-small); }
.orpho-situations__more a { color: var(--orpho-ink-soft); }
@media (max-width: 1040px) {
  .orpho-doors { grid-template-columns: 1fr; }
  .orpho-situations { grid-template-columns: 1fr; }
}

/* The two new header links fit only on wide viewports; below that the doors
 * carry the same routes, so the links step aside instead of pushing the
 * status badge and the primary CTA off-canvas (measured 881–1197px). */
@media (max-width: 1200px) {
  .orpho-nav .nav-agents, .orpho-nav .nav-guides { display: none; }
}


/* ══ TERMINAL BLOCK — mobile reassert (2026-08-10) ══════════════════════
 * Founder's phone screenshots: two squeezed columns at 390pt, receipt
 * clipped mid-word, wax adrift. Cause: correction passes 1–8 appended
 * UNSCOPED layout rules after the responsive media queries, so the last
 * declaration won at every width and the phone collapse never applied.
 *
 * This block is the LAST thing in the file BY CONTRACT (pinned by
 * tests/test_css_cascade_order.py). Any future correction pass goes ABOVE
 * it; layout set after it re-breaks every phone.
 */
/* Legacy index.css (deliberately loaded last) zeroes .hero's side padding
 * at its mobile breakpoints. Two-class specificity beats it at every width
 * without touching the legacy sheet that 40 other pages share. */
.orpho-hero.hero {
  padding-left: var(--orpho-s-5);
  padding-right: var(--orpho-s-5);
}
@media (max-width: 680px) {
  .orpho-hero.hero { padding-left: var(--orpho-s-4); padding-right: var(--orpho-s-4); }
}

@media (max-width: 1040px) {
  .orpho-hero__inner { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .orpho-hero__inner { grid-template-columns: 1fr; gap: var(--orpho-s-5); }
  .orpho-hero { padding: var(--orpho-s-5) var(--orpho-s-4) var(--orpho-s-6); }
  .orpho-hero-title { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .orpho-hero-title__line { white-space: normal; }
  /* The plate scales to the phone instead of cropping: envelope loses its
   * right overhang, receipt spans nearly full width below the closure,
   * seal tucks inside the plate. */
  .orpho-hero__plate { min-height: 470px; }
  .orpho-envelope { inset: 0 0 8% 0; }
  .orpho-hero__receipt { left: 4%; right: 4%; top: 24%; }
  .orpho-hero__wax { right: 2%; bottom: 4%; }
  .orpho-wax { width: 84px; height: 84px; }
  .orpho-envelope__crest { width: 56px; height: 56px; right: 4%; }
  .orpho-receipt__meta { grid-template-columns: 1fr; gap: 0.2rem 0; }
  .orpho-receipt__meta dt { padding-top: 0.5rem; border-bottom: 0; }
}