/* ============================================================
   THE HOUSE MANNER
   Ivory laid paper, iron-gall ink, Caslon in one weight,
   hairline rules, no rounded corner anywhere in the house.
   Shared by the prospectus (index.html) and the console.
   ============================================================ */

@font-face { font-family: "Caslon Display"; src: url("fonts/libre-caslon-display.woff2") format("woff2");
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Caslon Text"; src: url("fonts/libre-caslon-text.woff2") format("woff2");
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Caslon Text"; src: url("fonts/libre-caslon-text-italic.woff2") format("woff2");
             font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("fonts/courier-prime.woff2") format("woff2");
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("fonts/courier-prime-italic.woff2") format("woff2");
             font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --paper:       #F4EFE3;
  --paper-high:  #F9F5EC;   /* a lifted card                */
  --paper-shade: #ECE5D4;   /* a recessed well              */
  --ink:         #221D12;   /* iron gall                    */
  --ink-mid:     #5C5343;
  --ink-faint:   #766B54;
  --rule:        #CBC2AB;   /* the hairline                 */
  --rule-soft:   #DAD2BE;
  --oxblood:     #702F21;
  --green:       #33503E;   /* racing, for the rare word    */
  --gilt:        #A5813B;

  --display: "Caslon Display", "Big Caslon", Georgia, serif;
  --text:    "Caslon Text", Georgia, "Times New Roman", serif;
  --type:    "Courier Prime", "Courier New", monospace;

  --frame-inset: 16px;
  --measure: 61ch;
}

* { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; }
[hidden] { display: none !important; }

body {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.72 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  overflow-x: hidden;
}

/* laid paper: faint chain lines and a breath of grain */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(34,29,18,0.008) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(34,29,18,0.02) 0 1px, transparent 1px 112px);
}
/* the gilt top edge of the sheet — matte leaf over an ink rule, one edge only */
body::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 96;
  background: var(--gilt);
  border-bottom: 1px solid rgba(34,29,18,0.3);
  opacity: .9;
}

::selection { background: var(--oxblood); color: var(--paper); }

/* ---------- the plate frame: engraved onto the sheet, it scrolls with it ---------- */
.plate-frame { position: absolute; inset: var(--frame-inset); pointer-events: none; z-index: 95;
               border: 1px solid rgba(34,29,18,0.55); }
.plate-frame::before { content: ""; position: absolute; inset: 4px;
                       border: 1px solid rgba(34,29,18,0.16); }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.12; }
em { font-family: var(--text); }
a { color: inherit; text-decoration: underline;
    text-decoration-thickness: 1px; text-decoration-color: var(--rule);
    text-underline-offset: 0.22em; }
a:hover { color: var(--oxblood); text-decoration-color: var(--oxblood); }
:focus-visible { outline: 1.5px solid var(--oxblood); outline-offset: 3px; }

.sc, .lbl {
  font-family: var(--text); text-transform: uppercase;
  font-size: 10.5px; letter-spacing: 0.24em; line-height: 1.6;
  color: var(--ink-mid); font-variant-numeric: lining-nums;
}
.lbl-faint { color: var(--ink-faint); }
.lbl-ox { color: var(--oxblood); }

.numeral { color: var(--ink-mid); letter-spacing: 0.3em; }

/* ---------- rules & ornaments ---------- */
.rule { border: 0; border-top: 1px solid var(--rule); }
.rule-strong { border: 0; border-top: 1px solid rgba(34,29,18,0.5); }

.rule-fleuron { display: flex; align-items: center; gap: 14px; border: 0; }
.rule-fleuron::before, .rule-fleuron::after {
  content: ""; flex: 1; border-top: 1px solid var(--rule); }
.rule-fleuron .lozenge { width: 7px; height: 7px; background: var(--ink);
  transform: rotate(45deg); flex: none; opacity: 0.8; }

/* the asterism ⁂ — drawn, not typed; the glyph itself is unreliable */
.asterism { display: inline-block; color: var(--ink-mid); line-height: 0; }

/* the thinking asterism */
.asterism.thinking { animation: think 1.15s ease-in-out infinite; }
@keyframes think { 0%,100% { opacity: .28; } 50% { opacity: .9; } }

/* ---------- letterpress buttons ---------- */
.btn {
  display: inline-block; cursor: pointer; user-select: none; white-space: nowrap;
  font-family: var(--text); text-transform: uppercase; text-decoration: none;
  font-size: 11px; letter-spacing: 0.28em; line-height: 1;
  color: var(--ink); background: transparent;
  border: 1px solid var(--ink); padding: 16px 30px 14px 32px;
  transition: background .16s ease, color .16s ease, transform .05s ease;
}
.btn:hover { color: var(--oxblood); border-color: var(--oxblood);
             box-shadow: inset 0 0 0 1px var(--oxblood); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-ox { border-color: var(--oxblood); color: var(--oxblood); }
.btn-ox:hover { box-shadow: inset 0 0 0 1px var(--oxblood); }
.btn[disabled] { opacity: .4; pointer-events: none; }

/* quiet inline action */
.quiet-link { font-family: var(--text); text-transform: uppercase; font-size: 10.5px;
  letter-spacing: 0.28em; color: var(--ink-mid); text-decoration: none;
  border-bottom: 1px dotted var(--ink-faint); padding-bottom: 3px; }
.quiet-link:hover { color: var(--oxblood); border-bottom: 1px solid var(--oxblood); }

/* ---------- cards ---------- */
.card { background: var(--paper-high); border: 1px solid var(--rule);
        box-shadow: 0 1px 0 rgba(34,29,18,0.05); }
.well { background: var(--paper-shade); border: 1px solid var(--rule-soft); }

/* a ledger sheet: the double crimson margin rule of a ruled book */
.ledger { position: relative; }
.ledger::before { content: ""; position: absolute; top: 0; bottom: 0; left: 52px;
  width: 5px; pointer-events: none;
  border-left: 1px solid rgba(112,47,33,0.34);
  border-right: 1px solid rgba(112,47,33,0.34); }

/* ---------- dot leaders (the tariff card) ---------- */
.leaders { list-style: none; }
.leaders li { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; }
.leaders .term { font-family: var(--text); text-transform: uppercase; font-size: 11px;
  letter-spacing: 0.22em; color: var(--ink); white-space: nowrap; }
.leaders .dots { flex: 1; min-width: 24px; height: 2px; transform: translateY(-1px);
  background-image: radial-gradient(circle, #A79C80 0.9px, transparent 1.15px);
  background-size: 8px 2px; background-repeat: repeat-x; background-position: 0 50%; }
.leaders .worth { text-align: right; max-width: 34em; font-size: 15.5px;
  line-height: 1.55; color: var(--ink); }
.leaders .worth .path { font-family: var(--type); font-size: 13px; }

/* ---------- footnotes ---------- */
.footnote { font-size: 13.5px; line-height: 1.7; color: var(--ink-mid); }
.footnote .mark, sup.mark { color: var(--ink-mid); font-style: normal; }

/* ---------- typewritten matter ---------- */
.typed { font-family: var(--type); font-size: 14.5px; line-height: 1.75; color: var(--ink); }

/* ---------- figure captions ---------- */
figcaption, .figcap { font-family: var(--text); text-transform: uppercase;
  font-size: 9.5px; letter-spacing: 0.24em; color: var(--ink-faint); }

/* ---------- microprint: a hairline that is actually sentences ---------- */
.microprint { font-family: var(--text); font-size: 4px; letter-spacing: 0.16em;
  line-height: 1; white-space: nowrap; overflow: hidden;
  color: rgba(34,29,18,0.62); user-select: none; }

/* ---------- the seal ---------- */
.seal { position: relative; width: 118px; height: 118px; cursor: pointer;
  background: transparent; border: 1px solid rgba(34,29,18,0.6); border-radius: 50%;
  display: grid; place-items: center; transition: transform .08s ease;
  touch-action: none; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; }
.seal::before { content: ""; position: absolute; inset: 5px; border-radius: 50%;
  border: 1px solid rgba(34,29,18,0.22); }
.seal canvas { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px);
  border-radius: 50%; }
.seal .g { position: relative; font-family: var(--display); font-size: 44px; color: var(--ink);
  transform: translateY(-2px); transition: color .2s ease; }
.seal .ring { position: absolute; inset: -7px; border-radius: 50%; pointer-events: none; }
.seal .ring circle { fill: none; stroke: var(--oxblood); stroke-width: 1.4;
  stroke-dasharray: 4 7; opacity: 0; transition: opacity .25s ease; }
.seal.held { transform: scale(0.97); }
.seal.held .g { color: var(--oxblood); }
.seal.held .ring circle { opacity: .9; animation: sealturn 6s linear infinite; }
@keyframes sealturn { to { transform: rotate(360deg); } }
.seal .ring svg { overflow: visible; }
.seal .ring circle { transform-origin: 50% 50%; }

/* ---------- masthead: a running head, printed once ---------- */
.masthead { position: relative; z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--rule); }
.masthead-in { display: flex; align-items: center; gap: 26px;
  padding: 34px 10px 14px; }   /* content sits clear below the plate frame's top rule */
.masthead nav { margin-left: auto; display: flex; gap: 26px; align-items: baseline; }
.masthead nav a { font-family: var(--text); text-transform: uppercase; font-size: 10px;
  letter-spacing: 0.22em; color: var(--ink-mid); text-decoration: none; }
.masthead nav a:hover { color: var(--oxblood); }
.masthead nav a.gh { color: var(--ink); border-bottom: 1px solid var(--rule); padding-bottom: 2px; }

.monogram { display: block; width: 34px; height: 34px; flex: none; }

/* ---------- shared layout ---------- */
.sheet { position: relative; z-index: 1; max-width: 1140px; margin: 0 auto;
         padding-left: 48px; padding-right: 48px; }

@media (max-width: 720px) {
  :root { --frame-inset: 9px; }
  .sheet { padding-left: 26px; padding-right: 26px; }
  .leaders li { flex-wrap: wrap; }
  .leaders .worth { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}