/* ==========================================================================
   HERITAGE — one page. Loaded on a/heritage.html.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   An engraved crest, the name in spaced Prata capitals and two specimen
   founding dates, then the record on one central axis: double-ruled
   cartouches and open sections in alternation, an engraved rule at each
   heading. Every rule here is scoped to .ht-hero or .ht-rec; the shell (rail,
   top bar, community drawer) is never restyled.

   Motionless by ruling: this sheet contains no animation and no transition.
   The record says motion dates a page to its year of making.

   Palette (deep navy, engraved gold linework; SUPPORTED, the values ours).
   The first eight hex values below are the page's "as built" swatches:
   #14213A navy · #0E1830 navy, deep · #EFE8D8 cream · #B08D3E gold
   #C9C2B0 stone · #A79F8C stone, dim · #C96A5A rust · #1A1608 ink
   Text on #14213A, WCAG: cream 13.3 · stone 9.5 · stone dim 6.1 ·
   gold 5.1 (AA at body size) · #E3988A 6.9 (the specimen 2024 date).
   ========================================================================== */
@font-face {
  font-family: "Prata HT";
  src: url("fonts/prata.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Petrona HT";
  src: url("fonts/petrona.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Petrona HT";
  src: url("fonts/petrona-italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

.ht-page {
  --ht-navy: #14213A;
  --ht-navy2: #0E1830;
  --ht-cream: #EFE8D8;
  --ht-gold: #B08D3E;
  --ht-stone: #C9C2B0;
  --ht-stone2: #A79F8C;
  --ht-rust: #C96A5A;
  --ht-ink: #1A1608;
  --ht-hair: rgba(201, 194, 176, 0.25);
  --ht-display: "Prata HT", "Times New Roman", serif;
  --ht-serif: "Petrona HT", Georgia, serif;
}
.ht-page main { background: var(--ht-navy); color: var(--ht-cream); }
/* Motionless by ruling reaches the shell's scroll reveal too: the record is
   present, never arriving. (Outranks site.css's .js-reveal rule.) */
.ht-page main > section.ht-rec { opacity: 1; transform: none; transition: none; will-change: auto; }

/* ---- shared register: both roots, nothing outside them ---------------- */
.ht-hero, .ht-rec { font: 300 19px/1.75 var(--ht-serif); color: var(--ht-cream); text-align: center; }
.ht-hero b, .ht-rec b { font-weight: 600; }
.ht-rec a { color: var(--ht-cream); text-decoration-color: var(--ht-gold); text-underline-offset: 4px; }
.ht-rec a:hover { color: var(--ht-gold); }
.ht-rec :focus-visible { outline: 1px solid var(--ht-gold); outline-offset: 6px; }

/* ---- hero: the lockup, on its axis ------------------------------------ */
.ht-hero { padding: clamp(60px, 10vw, 120px) 16px 40px; }
.ht-crest { width: min(260px, 58vw); height: auto; display: block; margin: 0 auto; }
.ht-crest__line { fill: none; stroke: var(--ht-cream); stroke-width: 1.4; }
.ht-crest__hatch { stroke: var(--ht-cream); stroke-width: 0.7; }
.ht-crest__gold { fill: none; stroke: var(--ht-gold); stroke-width: 1.4; }
.ht-crest__lozenge { fill: var(--ht-gold); }
.ht-crest__banner { fill: var(--ht-navy); }
.ht-crest__est { font: 400 12px var(--ht-display); fill: var(--ht-cream); letter-spacing: 3px; }
.ht-house { margin: 26px 0 0; font: 400 clamp(20px, 2.6vw, 28px)/1.3 var(--ht-display); letter-spacing: 0.34em; color: var(--ht-stone); }
.ht-h1 { margin: 14px 0 0; font: 400 clamp(38px, 8vw, 96px)/1.05 var(--ht-display); letter-spacing: 0.14em; text-transform: uppercase; overflow-wrap: anywhere; }
.ht-est { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin: 22px 0 0; font: 400 16px/1.4 var(--ht-display); letter-spacing: 0.4em; }
.ht-est i { flex: 0 0 60px; height: 1px; background: var(--ht-gold); }
.ht-est__new { color: #E3988A; }
.ht-est__cap { margin: 12px auto 0; max-width: 34ch; font-size: 15px; line-height: 1.5; font-style: italic; color: var(--ht-stone); }
.ht-tag { margin: 26px auto 0; max-width: 36ch; font-style: italic; color: var(--ht-stone); }

/* ---- the record ------------------------------------------------------- */
.ht-rec { padding: 0 0 100px; }
.ht-w { max-width: 860px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 48px); }
.ht-s { margin: clamp(100px, 12vw, 150px) 0 0; }
.ht-s:first-child { margin-top: 40px; }
.ht-rec h2 { margin: 0 0 26px; font: 400 clamp(22px, 3.6vw, 36px)/1.3 var(--ht-display); letter-spacing: 0.2em; text-transform: uppercase; overflow-wrap: anywhere; }
.ht-rec p { margin: 0 auto 1em; max-width: 60ch; }
.ht-cart {
  padding: clamp(40px, 6vw, 64px) clamp(18px, 5vw, 60px);
  border: 1px solid var(--ht-gold);
  outline: 1px solid var(--ht-gold);
  outline-offset: -8px;
}
.ht-cart > :last-child { margin-bottom: 0; }
.ht-rule { display: block; width: min(360px, 80%); height: 22px; margin: 0 auto 30px; fill: none; stroke: var(--ht-gold); stroke-width: 1; }
.ht-rule__dot { fill: var(--ht-gold); }

.ht-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 24px; margin: 0; }
.ht-meta dt { font: 400 12px/1.5 var(--ht-display); letter-spacing: 0.3em; text-transform: uppercase; color: var(--ht-gold); }
.ht-meta dd { margin: 6px 0 0; }

.ht-rec .ht-big { font: 400 clamp(24px, 3.4vw, 34px)/1.45 var(--ht-display); max-width: 24ch; margin-bottom: 22px; }
.ht-refuse { margin: 30px auto 0; max-width: 60ch; padding-top: 24px; border-top: 1px solid var(--ht-stone2); font-style: italic; }
.ht-refuse b, .ht-note b {
  display: block; margin-bottom: 6px;
  font: 400 12px/1.5 var(--ht-display); letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ht-gold); font-style: normal;
}
.ht-rec .ht-dx { margin: 28px auto; max-width: 44ch; font-size: 21px; font-style: italic; color: #FFFFFF; }

.ht-nl { color: var(--ht-stone2); font-style: italic; }
.ht-tw { overflow-x: auto; }
.ht-tw:focus-visible { outline: 1px solid var(--ht-gold); outline-offset: 6px; }
.ht-ct, .ht-rt { width: 100%; border-collapse: collapse; margin: 0 0 1em; }
.ht-ct th, .ht-ct td, .ht-rt th, .ht-rt td { padding: 12px 8px; border-bottom: 1px solid var(--ht-hair); text-align: center; vertical-align: middle; }
.ht-ct th { font-weight: 400; }
.ht-ct th a { display: inline-flex; align-items: center; min-height: 44px; font: 400 14px/1.3 var(--ht-display); letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; }
.ht-ct small { display: block; font-style: italic; color: var(--ht-gold); font-size: 14px; }
.ht-ct td.ht-nl { color: var(--ht-stone2); }
.ht-tags a { display: inline-flex; align-items: center; min-height: 44px; margin: 0 8px; }
.ht-rt thead th { font: 400 12px/1.5 var(--ht-display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ht-gold); }
.ht-rt tbody th { font-weight: 400; }
.ht-swatch { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.ht-swatch span {
  width: 66px; height: 80px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 26px;
  font: 400 10px/1 var(--ht-serif); border: 1px solid var(--ht-stone2);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
}
.ht-rec .ht-asbuilt { margin: 0; font-style: italic; color: var(--ht-stone2); }

.ht-rules article { padding: 30px 0; border-bottom: 1px solid var(--ht-hair); }
.ht-rules article:last-child { border-bottom: 0; padding-bottom: 0; }
.ht-rules h3 { margin: 0; font: 400 18px/1.4 var(--ht-display); letter-spacing: 0.3em; text-transform: uppercase; }
.ht-k { display: block; font-style: italic; color: var(--ht-gold); font-size: 15px; }
.ht-rec .ht-rules p { max-width: 50ch; margin: 8px auto 0; }
.ht-rules small { display: block; font-style: italic; color: var(--ht-stone2); font-size: 14px; margin-top: 4px; }
.ht-rules article.ht-device { border: 1px solid var(--ht-gold); padding: 30px 20px; margin-top: 20px; }

.ht-firm { font-style: italic; }
.ht-note { font-size: 17px; }

.ht-conf { display: grid; gap: 30px; }
.ht-conf > a, .ht-conf > div { display: block; padding: 6px 0; text-decoration: none; }
.ht-conf b { display: block; font: 400 16px/1.5 var(--ht-display); letter-spacing: 0.2em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--ht-gold); text-underline-offset: 6px; }
.ht-conf > div b { text-decoration: none; }
.ht-conf i { display: block; color: var(--ht-gold); }

.ht-use { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 0 auto; }
.ht-use a {
  display: block; padding: 28px 20px; text-decoration: none;
  border: 1px solid var(--ht-gold); outline: 1px solid var(--ht-gold); outline-offset: 4px;
}
.ht-use a:focus-visible { outline: 3px solid var(--ht-gold); outline-offset: 4px; }
.ht-use b { display: block; margin-bottom: 8px; font: 400 16px/1.4 var(--ht-display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ht-gold); }
.ht-rec .ht-mach { margin-top: 34px; }
.ht-mach span { display: block; font: 400 12px/1.5 var(--ht-display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ht-gold); }
.ht-mach a, .ht-foot a { display: inline-flex; align-items: center; min-height: 44px; margin: 0 10px; }
.ht-rec .ht-foot { margin-top: 30px; }

@media (max-width: 720px) {
  .ht-meta { grid-template-columns: 1fr 1fr; }
  .ht-use { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  /* The ledger stacks: area over its entry, so the swatches get the full width. */
  .ht-ct th, .ht-ct td { display: block; }
  .ht-ct th { border-bottom: 0; padding-bottom: 0; }
}
@media (max-width: 420px) {
  .ht-hero, .ht-rec { font-size: 17px; }
  .ht-meta { grid-template-columns: 1fr; }
  .ht-est { letter-spacing: 0.2em; gap: 10px 12px; font-size: 14px; }
  .ht-est i { flex-basis: 24px; }
  .ht-rec h2 { letter-spacing: 0.12em; }
  .ht-rules h3 { letter-spacing: 0.2em; }
}