/* ==========================================================================
   WESTERN — one page. Loaded on a/western.html. CULTURAL PROTOCOL.

   A wood-type specimen book on dusty warm stock: two leaves, the first the
   specimen, the second the record, both banded and ruled the same way.
   Rye carries the inline, Ultra the heads, Alfa Slab One the small caps,
   Roboto Slab the reading matter. Type, ornament and material only.

   The display line is sized to its own band (container-query units), so the
   word never breaks out of the leaf at any width (Annie, 2026-09-26).

   NOTHING MOVES: letterpress does not move, and this stylesheet contains no
   animation. The shell's scroll reveal is switched off for the record.
   ========================================================================== */

@font-face { font-family: "WrRye"; src: url("fonts/rye.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "WrUltra"; src: url("fonts/ultra.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "WrAlfa"; src: url("fonts/alfa-slab-one.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "WrSlab"; src: url("fonts/roboto-slab.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

.wr-page {
  --wr-board: #CDB991;        /* the table the leaves lie on */
  --wr-ground: #E6D5B2;       /* the stock */
  --wr-ground-2: #EFE3C7;     /* a lighter pull, for plates */
  --wr-ink: #2A1D14;
  --wr-ink-2: #4E3A2A;        /* secondary text: 8.9:1 on the stock */
  --wr-rust: #8E3B1F;         /* the one accent: 5.2:1 on the stock */
  --wr-rib-dk: #5C2410;
  --wr-display: "WrRye", "Rockwell", Georgia, serif;
  --wr-head: "WrUltra", "Rockwell", Georgia, serif;
  --wr-caps: "WrAlfa", "Rockwell", Georgia, serif;
  --wr-text: "WrSlab", "Rockwell", Georgia, serif;
}
.wr-page main { background: var(--wr-board); color: var(--wr-ink); }
/* Roboto Slab has no italic; let the few italics lean rather than vanish. */
.wr-page main i, .wr-page main em, .wr-anno figcaption, .wr-mat figcaption { font-synthesis: style; }

.wr-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- the leaf -------------------------------------------------------------- */
.wr-wrap { padding: clamp(16px, 3vw, 40px) clamp(12px, 3vw, 40px) 0; }
.wr-sheet {
  /* Wider than the artifact's 880: the display line needs the measure. */
  max-width: 68rem;
  margin: 0 auto;
  padding: clamp(18px, 4vw, 52px);
  background-color: var(--wr-ground);
  background-image: radial-gradient(rgba(90, 60, 20, 0.08) 1px, transparent 1.5px);
  background-size: 5px 5px;
  border: 2px solid var(--wr-ink);
  outline: 8px solid var(--wr-ground);
  outline-offset: -18px;
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.5);
  font: 400 1.0625rem/1.65 var(--wr-text);
  color: var(--wr-ink);
  overflow-wrap: break-word;
}
.wr-sheet p { margin: 0 0 0.9em; }
.wr-sheet b { font-weight: 700; }
.wr-imp { filter: url(#wr-press); }

.wr-cat {
  margin: 0; text-align: center;
  font: 400 0.75rem/1.5 var(--wr-text); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--wr-ink-2);
}
.wr-sheet .wr-cat { margin: 0; }

/* ---- bands: heavy rule over, light rule under ------------------------------ */
.wr-band { text-align: center; border-top: 3px solid var(--wr-ink); border-bottom: 1px solid var(--wr-ink); padding: 10px 0; margin: 14px 0; }
.wr-band + .wr-band { margin-top: 0; border-top-width: 1px; }
.wr-sheet .wr-band > p { margin: 0; }
.wr-spec-t { font: 400 clamp(1rem, 3vw, 1.75rem)/1.25 var(--wr-caps); letter-spacing: 0.3em; text-transform: uppercase; margin: 0; }
.wr-band--end { margin-top: 2.2rem; }

/* THE FIX. The band is the container; the word is sized to it. Rye's
   WESTERN at .02em tracking measures 5.53em, so 16.8cqi fills ~93% of the
   band at every width, beside the rail or not. Capped at 170px, the
   artifact's largest size. Never hyphenated, never wrapped. */
.wr-band--display { padding: 4px 0; container-type: inline-size; }
.wr-display {
  margin: 0;
  font: 400 min(16.8cqi, 170px)/1 var(--wr-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--wr-rust);
  white-space: nowrap;
  padding-block: 0.06em 0.02em;
}

.wr-lede { text-align: center; max-width: 52ch; margin: 10px auto 0 !important; }

/* ---- sections ------------------------------------------------------------- */
.wr-sec { margin-top: 2.2rem; }
.wr-h { margin: 0; font: 400 clamp(1.35rem, 3.4vw, 2.25rem)/1.15 var(--wr-head); text-transform: uppercase; letter-spacing: 0.04em; }
.wr-sheet .wr-sub { margin: -4px 0 14px; text-align: center; font: 400 0.8rem/1.5 var(--wr-caps); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wr-rust); }

/* ---- ribbon ---------------------------------------------------------------- */
.wr-rib { display: flex; align-items: stretch; justify-content: center; max-width: 40rem; margin: 0 auto 14px; min-height: 3.1rem; }
.wr-rib__tail { width: clamp(22px, 5vw, 40px); height: auto; flex: none; fill: var(--wr-rib-dk); margin-block: 10px -4px; }
.wr-rib__tail--l { margin-inline-end: -6px; }
.wr-rib__tail--r { margin-inline-start: -6px; }
.wr-sheet .wr-rib__t {
  position: relative; z-index: 1;
  flex: 0 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  margin: 0;
  padding: 0.55em 1.1em;
  background: var(--wr-rust);
  color: var(--wr-ground);
  box-shadow: inset 0 0 0 6px var(--wr-rust), inset 0 0 0 7.5px var(--wr-ground);
  font: 400 clamp(0.95rem, 3.6vw, 1.5rem)/1.2 var(--wr-head);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.wr-rib--dk .wr-rib__t { background: var(--wr-ink); box-shadow: inset 0 0 0 6px var(--wr-ink), inset 0 0 0 7.5px var(--wr-ground); }

/* ---- the annotated inline -------------------------------------------------- */
.wr-anno { margin: 0; }
.wr-anno svg { display: block; width: 100%; height: auto; background: var(--wr-ground-2); border: 1px solid var(--wr-ink); }
.wr-anno__glyphs { font: 400 250px var(--wr-display); fill: var(--wr-ink); filter: url(#wr-press); }
.wr-anno__l { stroke: var(--wr-rust); stroke-width: 2; }
.wr-anno__c { fill: none; stroke: var(--wr-rust); stroke-width: 2; }
.wr-anno__t { font: 400 19px var(--wr-text); fill: var(--wr-ink); }
.wr-anno__t--b { font-weight: 600; }
.wr-anno__n { display: none; font: 400 30px var(--wr-caps); fill: var(--wr-rust); }
.wr-anno__key { display: none; margin: 10px 0 0; padding-left: 1.4em; font-size: 0.95rem; }
.wr-anno__key li::marker { font-family: var(--wr-caps); color: var(--wr-rust); }
.wr-anno figcaption, .wr-mat figcaption { font-style: italic; font-size: 0.9375rem; margin-top: 6px; }
/* Below ~560px the callout text would print under 9px: swap it for numbers and a key. */
@media (max-width: 560px) {
  .wr-anno__t { display: none; }
  .wr-anno__n { display: inline; }
  .wr-anno__key { display: block; }
}

/* ---- three logics ---------------------------------------------------------- */
.wr-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 2px solid var(--wr-ink); }
.wr-three > div { padding: 14px; border-right: 1px solid var(--wr-ink); }
.wr-three > div:last-child { border-right: 0; }
.wr-three h3 { margin: 0 0 6px; font: 400 1.125rem/1.2 var(--wr-head); text-transform: uppercase; }
.wr-three p { margin: 0; }
.wr-sheet a { color: var(--wr-rust); text-underline-offset: 0.15em; }
.wr-sheet a:hover { color: var(--wr-ink); }
.wr-sheet :focus-visible { outline: 3px solid var(--wr-rust); outline-offset: 3px; }
.wr-lk { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- drawn material -------------------------------------------------------- */
.wr-mat { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.wr-mat figure { margin: 0; }
.wr-mat figcaption { text-align: center; }
.wr-mat__sw { height: 170px; border: 2px solid var(--wr-ink); }
.wr-mat__sw--leather { background: radial-gradient(circle at 30% 30%, rgba(255, 200, 140, 0.25), transparent 60%), #7A4526; filter: url(#wr-grain); clip-path: inset(0); box-shadow: inset 0 0 0 8px #6A3A1F, inset 0 0 0 10px #C79A5E; }
.wr-mat__sw--denim { background: repeating-linear-gradient(45deg, #2F4A6D 0 2px, #3D5B82 2px 3px, #27405F 3px 5px); box-shadow: inset 0 0 0 8px #2F4A6D, inset 0 0 0 10px #D9A441; }

/* ==========================================================================
   THE RECORD: the second leaf.
   ========================================================================== */
/* Motionless by ruling reaches the shell's scroll reveal too: the record is
   present, never arriving. (Outranks site.css's .js-reveal rule.) */
.wr-page main > section.wr-rec { opacity: 1; transform: none; transition: none; will-change: auto; }
.wr-rec { padding: clamp(28px, 4vw, 48px) clamp(12px, 3vw, 40px) clamp(40px, 6vw, 72px); background: var(--wr-board); }
.wr-sec--first { margin-top: 0; }

.wr-meta { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.wr-meta > div { border-top: 1px solid var(--wr-ink); padding-top: 6px; }
.wr-meta dt { font: 400 0.8125rem/1.4 var(--wr-caps); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wr-rust); }
.wr-meta dd { margin: 2px 0 0; }
.wr-meta__full { grid-column: 1 / -1; border-top-width: 3px !important; border-bottom: 1px solid var(--wr-ink); padding-bottom: 10px; }

.wr-sheet .wr-claim { font: 400 clamp(1.25rem, 2.6vw, 1.75rem)/1.3 var(--wr-caps); text-align: center; max-width: 34ch; margin: 0.4em auto 0.8em; }

/* what carries the look: a set-up forme */
.wr-tw { overflow-x: auto; }
.wr-ct, .wr-rt { width: 100%; border-collapse: collapse; border: 2px solid var(--wr-ink); }
.wr-ct th, .wr-ct td, .wr-rt th, .wr-rt td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--wr-ink); }
.wr-ct th { width: 12rem; border-right: 1px solid var(--wr-ink); font: 400 1rem/1.3 var(--wr-head); text-transform: uppercase; }
.wr-ct th a { color: var(--wr-ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.wr-ct th a:hover { color: var(--wr-rust); text-decoration: underline; }
.wr-ct th small { display: block; font: 400 0.6875rem/1.3 var(--wr-caps); letter-spacing: 0.12em; color: var(--wr-rust); }
.wr-ct td p { margin: 0 0 6px; }
.wr-ct td p:last-child { margin: 0; }
.wr-nl { color: var(--wr-ink-2); font-style: italic; font-synthesis: style; }
.wr-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.wr-sheet .wr-tags a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--wr-ink); background: var(--wr-ground-2); color: var(--wr-ink); text-decoration: none; font: 400 0.8125rem/1.2 var(--wr-caps); letter-spacing: 0.06em; text-transform: uppercase; }
.wr-sheet .wr-tags a:hover { background: var(--wr-ink); color: var(--wr-ground); }
.wr-chips { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.wr-chip { display: inline-flex; align-items: center; gap: 6px; font: 400 0.8125rem/1 var(--wr-text); font-variant-numeric: tabular-nums; }
.wr-chip i { display: inline-block; width: 22px; height: 22px; border: 1px solid var(--wr-ink); }
.wr-sheet .wr-asbuilt { font: 400 0.6875rem/1 var(--wr-caps); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wr-ink-2); }

/* rules: a case of type, each sort in its own compartment */
.wr-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); border-top: 2px solid var(--wr-ink); border-left: 2px solid var(--wr-ink); }
.wr-rule { padding: 14px 16px 16px; border-right: 2px solid var(--wr-ink); border-bottom: 2px solid var(--wr-ink); background: var(--wr-ground); }
.wr-rule--ctx { grid-column: 1 / -1; background: var(--wr-ground-2); }
.wr-rule h3 { margin: 0 0 6px; font: 400 1.125rem/1.2 var(--wr-head); text-transform: uppercase; letter-spacing: 0.03em; }
.wr-k { display: inline-block; margin-bottom: 8px; padding: 2px 8px; border: 1px solid var(--wr-rust); color: var(--wr-rust); font: 400 0.6875rem/1.5 var(--wr-caps); letter-spacing: 0.12em; text-transform: uppercase; }
.wr-rule p { margin: 0 0 6px; }
.wr-rule small { display: block; font-size: 0.8125rem; color: var(--wr-ink-2); }

/* behind */
.wr-rt thead th { font: 400 0.75rem/1.3 var(--wr-caps); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wr-rust); border-bottom-width: 2px; }
.wr-rt tbody th { font-weight: 600; }
.wr-tw[tabindex]:focus-visible { outline: 3px solid var(--wr-rust); outline-offset: 3px; }
.wr-sheet .wr-firm { margin-top: 14px; padding: 10px 14px; border: 2px solid var(--wr-ink); border-left-width: 8px; font-weight: 600; }

/* neighbours: three logics again, one compartment each */
.wr-conf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); border-top: 2px solid var(--wr-ink); border-left: 2px solid var(--wr-ink); }
.wr-conf > a, .wr-conf > div { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-right: 2px solid var(--wr-ink); border-bottom: 2px solid var(--wr-ink); text-decoration: none; }
.wr-sheet .wr-conf > a { color: var(--wr-ink); }
.wr-sheet .wr-conf > a:hover { background: var(--wr-ground-2); }
.wr-conf b { font: 400 1.125rem/1.2 var(--wr-head); text-transform: uppercase; color: var(--wr-rust); }
.wr-conf small { font: 400 0.6875rem/1.4 var(--wr-caps); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wr-ink-2); }

/* use it: wood-type furniture */
.wr-use { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 14px; }
.wr-sheet .wr-use a { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 2px solid var(--wr-ink); background: var(--wr-ink); color: var(--wr-ground); text-decoration: none; box-shadow: inset 0 0 0 4px var(--wr-ink), inset 0 0 0 5px var(--wr-ground); }
.wr-sheet .wr-use a:hover { background: var(--wr-rust); box-shadow: inset 0 0 0 4px var(--wr-rust), inset 0 0 0 5px var(--wr-ground); }
.wr-use b { font: 400 1.25rem/1.2 var(--wr-head); text-transform: uppercase; }
.wr-use span { font-size: 0.9375rem; }
.wr-sheet .wr-use a:focus-visible { outline-offset: 4px; }
.wr-sheet .wr-mach, .wr-sheet .wr-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin: 16px 0 0; }
.wr-mach span { font: 400 0.75rem/1 var(--wr-caps); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wr-ink-2); }
.wr-mach a, .wr-foot a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 680px) {
  .wr-three, .wr-mat, .wr-meta { grid-template-columns: 1fr; }
  .wr-three > div { border-right: 0; border-bottom: 1px solid var(--wr-ink); }
  .wr-three > div:last-child { border-bottom: 0; }
  .wr-ct th { width: auto; }
  .wr-ct, .wr-ct tbody, .wr-ct tr, .wr-ct th, .wr-ct td { display: block; }
  .wr-ct th { border-right: 0; border-bottom: 0; padding-bottom: 0; }
}
@media (max-width: 420px) {
  .wr-rt th, .wr-rt td { padding: 8px 8px; font-size: 0.875rem; }
  .wr-sheet { outline-width: 5px; outline-offset: -12px; }
  .wr-spec-t { letter-spacing: 0.16em; }
}

/* research-dimension table at phone width: no fixed floor, cells wrap (QA 2026-09-29) */
@media (max-width: 480px) {
  .wr-rt { min-width: 0; }
  .wr-rt th, .wr-rt td { padding-inline: 6px; overflow-wrap: break-word; }
  .wr-rt thead th { letter-spacing: 0.04em; }
}