/* ==========================================================================
   QTYONE UK LTD - stockroom sheet
   The page is a specification sheet: a full-width table is the body, prose
   sits between table blocks, and the furniture is drawn from a gondola bay -
   ribbed back panel, pressed shelf-edge channels, rails and tickets.
   ========================================================================== */

/* ---- reset: one line, deliberately. Specificity stays free for the table. */
:where(*) { box-sizing: border-box; }

/* ---- tokens --------------------------------------------------------------- */
:root {
  --umber: #221d19;
  --umber-deep: #1a1613;
  --shelf: #2c2622;
  --shelf-lift: #352e28;
  --ink: #ece4da;
  --ink-soft: #c3b6a8;
  --ink-faint: #9b8d7f;
  --brass: #d99a3e;
  --brass-dim: #a9762c;
  --bark: #7d6352;
  --bark-line: #4a3c32;

  --head: "Antonio", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --body: "Pontano Sans", "Segoe UI", system-ui, sans-serif;

  --step: 0.45rem;
  --gut: clamp(0.85rem, 3.2vw, 2rem);
  --measure: 38rem;
  --sheet: 64rem;

  --rib: repeating-linear-gradient(90deg,
          rgba(125, 99, 82, 0.42) 0 1px,
          rgba(125, 99, 82, 0) 1px 4px);
  --rib-wide: repeating-linear-gradient(90deg,
          rgba(125, 99, 82, 0.30) 0 1px,
          rgba(125, 99, 82, 0) 1px 7px);

  --press: inset 0 2px 0 rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(236, 228, 218, 0.09);
  --ease: cubic-bezier(0.22, 0.75, 0.25, 1);
}

/* ---- base ---------------------------------------------------------------- */
html {
  background: var(--umber);
  color: var(--ink);
  font: 400 100%/1.62 var(--body);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, var(--umber-deep) 0 5rem, var(--umber) 16rem),
    var(--umber);
}

p { margin: 0 0 0.95em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--brass); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--ink); }
a:focus-visible,
summary:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-radius: 1px;
}

strong { font-weight: 400; color: var(--brass); }
abbr { text-decoration: none; border-bottom: 1px dotted var(--bark); cursor: help; }
code, .num {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.92em;
  letter-spacing: 0.01em;
}

.wrap {
  max-width: var(--sheet);
  margin: 0 auto;
  padding-inline: var(--gut);
}
.wrap-narrow { max-width: 54rem; }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 0.6rem;
  top: -4rem;
  z-index: 9;
  padding: 0.5rem 0.9rem;
  font: 600 0.8rem/1 var(--head);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--umber-deep);
  background: var(--brass);
  border-radius: 0 0 3px 3px;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip:focus { top: 0; color: var(--umber-deep); }

/* ---- masthead ------------------------------------------------------------ */
.mast {
  background: var(--umber-deep);
  border-bottom: 1px solid var(--bark-line);
}

.mast-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 1.1rem;
  padding-block: 1.05rem 0.8rem;
}

.mark {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--head);
  font-weight: 600;
  font-size: clamp(1.45rem, 6vw, 2.1rem);
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.mark:hover { color: var(--ink); }
.mark .qty {
  background: var(--brass);
  color: var(--umber-deep);
  padding: 0.12em 0.3em 0.06em;
  border-radius: 2px;
  transition: background 0.2s var(--ease), letter-spacing 0.2s var(--ease);
}
.mark:hover .qty { background: var(--ink); letter-spacing: 0.09em; }
.mark .one { color: var(--ink-soft); }

.mast-trade {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.mast-reg {
  background: var(--shelf);
  background-image: var(--rib-wide);
  border-top: 1px solid var(--bark-line);
  font-size: 0.74rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.mast-reg ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.4rem;
  margin: 0;
  padding: 0.42rem 0;
  list-style: none;
}
.mast-reg b { color: var(--ink-faint); font-weight: 400; }

/* ---- tree-disclosure navigation ------------------------------------------ */
.tree {
  border-top: 1px solid var(--bark-line);
  padding-block: 0.6rem 0.9rem;
}
.tree h2 {
  margin: 0 0 0.35rem;
  font: 600 0.72rem/1 var(--head);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tree ul { margin: 0; padding: 0; list-style: none; }

.tree-root > li + li { margin-top: 0.1rem; }

.tree a {
  display: block;
  padding: 0.33rem 0.5rem 0.33rem 0.1rem;
  font-size: 0.93rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease),
              padding-left 0.18s var(--ease), background-color 0.18s var(--ease);
}
.tree a:hover {
  color: var(--ink);
  border-left-color: var(--brass);
  padding-left: 0.45rem;
  background: rgba(125, 99, 82, 0.13);
}
.tree a[aria-current="page"] {
  color: var(--brass);
  border-left-color: var(--brass);
  padding-left: 0.45rem;
}
.tree a[aria-current="page"]::after {
  content: "\2022\00a0 this page";
  display: block;
  margin-top: 0.1rem;
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.tree details { border-left: 1px solid var(--bark-line); }
.tree summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.38rem 0.5rem 0.38rem 0.55rem;
  margin-left: -1px;
  font: 600 0.84rem/1 var(--head);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  border-left: 2px solid var(--bark);
  background: linear-gradient(90deg, rgba(125, 99, 82, 0.16), rgba(125, 99, 82, 0));
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
              background-color 0.2s var(--ease);
}
.tree summary::-webkit-details-marker { display: none; }
.tree summary::marker { content: ""; }
.tree summary:hover { color: var(--brass); border-left-color: var(--brass); }

.tree summary .twig {
  flex: none;
  width: 0.62rem;
  height: 0.62rem;
  border-left: 1px solid var(--bark);
  border-bottom: 1px solid var(--bark);
  transform: translateY(-0.18rem) rotate(0deg);
  transform-origin: 20% 80%;
  transition: transform 0.24s var(--ease), border-color 0.24s var(--ease);
}
.tree details[open] > summary .twig { transform: translateY(-0.05rem) rotate(-45deg); }
.tree summary:hover .twig { border-color: var(--brass); }

.tree summary .count {
  margin-left: auto;
  font-family: var(--body);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  text-transform: none;
}

/* children are indented past the point the branch label starts, so the tree
   reads as a tree and not as an outdented list */
.tree ul.tree-branch {
  margin: 0.1rem 0 0.45rem;
  padding-left: 1.9rem;
  background-image: var(--rib);
  background-repeat: no-repeat;
  background-size: 7px 100%;
  background-position: 0.78rem 0;
}
.tree-branch li { position: relative; }
.tree-branch li::before {
  content: "";
  position: absolute;
  left: -0.62rem;
  top: 1.05em;
  width: 0.5rem;
  border-top: 1px solid var(--bark-line);
}

@media (min-width: 52rem) {
  .tree-root {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 2.2rem;
  }
  .tree-root > li { flex: 1 1 13rem; min-width: 0; }
  .tree-root > li + li { margin-top: 0; }
  .tree details[open] > summary { color: var(--brass); }
}

/* ---- the wide rule pair (opener) ----------------------------------------- */
.rule {
  border: 0;
  margin: 0;
  height: 6px;
  background: var(--brass);
  background-image: linear-gradient(180deg, var(--brass), var(--brass-dim));
}
.rule-light {
  height: 2px;
  background: var(--bark);
  background-image: none;
}
.rule-pairfoot {
  height: 0;
  border-top: 2px solid var(--bark);
  border-bottom: 6px solid var(--brass-dim);
}

.opener {
  background: var(--umber);
  padding-block: clamp(1.4rem, 5vw, 2.6rem);
}
.opener h1 {
  margin: 0 0 0.6rem;
  font: 600 clamp(2rem, 9.4vw, 4.1rem)/0.96 var(--head);
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--ink);
}
.opener h1 em {
  display: block;
  margin-top: 0.42rem;
  font-style: normal;
  font-size: 0.42em;
  line-height: 1.22;
  letter-spacing: 0.17em;
  color: var(--brass);
}
.opener .lede {
  font-size: clamp(1rem, 3.1vw, 1.12rem);
  color: var(--ink-soft);
  max-width: 44rem;
}

/* Two columns of standfirst once the sheet is wide enough to hold them, so the
   opening block occupies the same measure as the tables underneath it. */
@media (min-width: 58rem) {
  .opener > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 2.8rem;
    align-items: start;
  }
  .opener h1,
  .opener .stage { grid-column: 1 / -1; }
  .opener .lede { max-width: none; margin-bottom: 0; }
  .opener .lede + .lede {
    padding-left: 2.8rem;
    margin-left: -2.8rem;
    border-left: 1px solid var(--bark-line);
  }
}

/* ---- inset caps headings ------------------------------------------------- */
.inset {
  position: relative;
  margin: 0 0 0.9rem;
  padding: 0.52rem 0.9rem 0.46rem 3.4rem;
  font: 600 clamp(1.15rem, 4.3vw, 1.6rem)/1.1 var(--head);
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--shelf);
  border-radius: 2px;
  box-shadow: var(--press), inset 3px 0 0 var(--brass);
}
.inset::before {
  content: attr(data-slot);
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-48%);
  font-size: 0.72em;
  letter-spacing: 0.04em;
  color: var(--bark);
}
.inset-sub {
  margin: 1.6rem 0 0.7rem;
  padding: 0.34rem 0.75rem 0.3rem 1rem;
  font: 600 1rem/1.15 var(--head);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: rgba(44, 38, 34, 0.75);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.45), inset 2px 0 0 var(--bark);
}
.inset-sub:first-child { margin-top: 0; }

/* ---- sections ------------------------------------------------------------ */
.band { padding-block: clamp(1.7rem, 5vw, 3rem); }
.band-shelf {
  background: linear-gradient(180deg, rgba(44, 38, 34, 0.55), rgba(34, 29, 25, 0));
  border-top: 1px solid var(--bark-line);
}
.band + .band { border-top: 1px solid rgba(74, 60, 50, 0.6); }

.notes {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(74, 60, 50, 0.85);
}
.notes > p { max-width: var(--measure); }
.notes > p:last-child { margin-bottom: 0; }
@media (min-width: 58rem) {
  .notes {
    background-image: linear-gradient(90deg, var(--bark-line) 0 1px, transparent 1px);
    background-repeat: no-repeat;
    background-position: calc(var(--measure) + 2.4rem) 1.1rem;
    background-size: 1px calc(100% - 1.1rem);
  }
}
.after-table { margin-top: 1.25rem; }
.gap-top { margin-top: 1.2rem; }
.before-table { margin: 1.5rem 0 1.25rem; }

.note {
  margin: 0.9rem 0 0;
  padding-left: 0.8rem;
  border-left: 2px solid var(--bark);
  font-size: 0.88rem;
  color: var(--ink-faint);
  max-width: 46rem;
}

.pair {
  display: grid;
  gap: 1.3rem;
}
@media (min-width: 56rem) {
  .pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.8rem;
          align-items: start; }
  .pair-wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* ---- the specification table (the body of the page) ---------------------- */
.sheet {
  margin: 0;
  background: var(--shelf);
  border: 1px solid var(--bark-line);
  border-radius: 2px;
}
.sheet-cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--umber-deep);
  background-image: var(--rib);
  border-bottom: 1px solid var(--bark-line);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.sheet-cap .unitword { color: var(--ink-faint); letter-spacing: 0.05em; }

table.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
table.spec caption {
  padding: 0.55rem 0.75rem;
  font: 600 0.78rem/1.4 var(--head);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-align: left;
  color: var(--brass);
  background: rgba(26, 22, 19, 0.55);
  border-bottom: 1px solid var(--bark-line);
}
table.spec thead th {
  padding: 0.5rem 0.6rem;
  font: 600 0.76rem/1.15 var(--head);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink);
  background: var(--umber-deep);
  background-image: var(--rib);
  border-bottom: 2px solid var(--brass-dim);
  white-space: nowrap;
  vertical-align: bottom;
}
table.spec tbody th,
table.spec tbody td {
  padding: 0.46rem 0.6rem;
  border-bottom: 1px solid rgba(74, 60, 50, 0.72);
  vertical-align: top;
  text-align: left;
  font-weight: 400;
}
table.spec tbody th {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.82rem;
  color: var(--bark);
  white-space: nowrap;
}
/* the reference column is as wide as a reference, so a two-column block does
   not open a corridor between the ref and the thing it refers to */
table.spec thead th:first-child,
table.spec tbody tr > th:first-child { width: 1%; }
table.spec tbody tr { transition: background-color 0.16s var(--ease); }
table.spec tbody tr:hover { background: rgba(125, 99, 82, 0.16); }
table.spec tbody tr:hover th { color: var(--brass); }
table.spec tbody tr:last-child td,
table.spec tbody tr:last-child th { border-bottom: 0; }
table.spec .line { color: var(--ink); }
table.spec .qty { font-family: ui-monospace, Consolas, monospace; color: var(--brass); }
table.spec .cond { color: var(--ink-soft); }
table.spec .chan {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
table.spec tfoot td {
  padding: 0.5rem 0.6rem;
  border-top: 1px solid var(--bark-line);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}

/* stacked rows first; the real table arrives when there is room for it */
@media (max-width: 47.99rem) {
  table.spec, table.spec tbody, table.spec tr, table.spec td, table.spec th { display: block; }
  table.spec thead { display: none; }
  table.spec tfoot, table.spec tfoot tr, table.spec tfoot td { display: block; }
  table.spec tbody tr {
    padding: 0.55rem 0.7rem 0.6rem;
    border-bottom: 1px solid rgba(74, 60, 50, 0.72);
    background-image: var(--rib);
    background-repeat: no-repeat;
    background-size: 7px 100%;
  }
  table.spec tbody th,
  table.spec tbody td { padding: 0.1rem 0 0.1rem 0.6rem; border-bottom: 0; }
  table.spec tbody th { font-size: 0.95rem; color: var(--brass); padding-bottom: 0.3rem; }
  table.spec tbody td::before {
    content: attr(data-col) " ";
    display: inline-block;
    min-width: 7.2rem;
    font: 600 0.68rem/1.5 var(--head);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
}

/* ---- table tools (built by script; absent and unmissed without it) ------- */
.tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--bark-line);
  background: rgba(26, 22, 19, 0.4);
}
.tools:empty { display: none; }
.tools span.tools-label {
  font: 600 0.7rem/1 var(--head);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.chip {
  padding: 0.3rem 0.65rem 0.26rem;
  font: 600 0.72rem/1 var(--head);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--shelf-lift);
  border: 1px solid var(--bark-line);
  border-radius: 2px;
  cursor: pointer;
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease),
              border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.chip:hover { color: var(--ink); border-color: var(--bark); transform: translateY(-1px); }
.chip[aria-pressed="true"] {
  color: var(--umber-deep);
  background: var(--brass);
  border-color: var(--brass);
}
.tools-count {
  margin-left: auto;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

/* ---- tabbed panes (divider tabs on a stock card) ------------------------- */
.card { margin-top: 0.4rem; }
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0 0.3rem;
}
.pane-tab {
  position: relative;
  display: block;
  padding: 0.5rem 0.85rem 0.44rem;
  font: 600 0.82rem/1 var(--head);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  background: var(--umber-deep);
  border: 1px solid var(--bark-line);
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  cursor: pointer;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease),
              transform 0.2s var(--ease);
}
.pane-tab:hover { color: var(--ink); background: var(--shelf-lift); }
.pane-tab[aria-selected="true"] {
  color: var(--brass);
  background: var(--shelf);
  transform: translateY(1px);
}
.pane-tab::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left center;
}
.pane-tab[aria-selected="true"]::after {
  animation: qty_tab_bar 0.34s var(--ease) both;
}

.pane {
  padding: 1rem 0.85rem 1.15rem;
  background: var(--shelf);
  border: 1px solid var(--bark-line);
  border-radius: 0 2px 2px 2px;
}
.pane[hidden] { display: none; }
.pane + .pane { margin-top: 0.5rem; }
.pane > :last-child { margin-bottom: 0; }
.pane .sheet { background: var(--umber-deep); }

/* ---- the gondola set-piece ---------------------------------------------- */
.stage {
  margin: 1.4rem 0 0;
  padding: 0.75rem;
  background: var(--umber-deep);
  border: 1px solid var(--bark-line);
  border-radius: 2px;
  color: var(--bark);
}
.stage svg { display: block; width: 100%; height: auto; }
.stage figcaption {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: var(--ink-faint);
  max-width: 44rem;
}

.g-panel { fill: var(--shelf); }
.g-rib { color: var(--bark); }
.g-head { fill: var(--shelf-lift); }
.g-post { fill: var(--bark-line); }
.g-slot { fill: var(--umber-deep); }
.g-divide { stroke: rgba(125, 99, 82, 0.5); stroke-width: 1; }
.g-deck {
  fill: var(--brass-dim);
  animation: qty_deck 0.5s var(--ease) backwards;
  animation-delay: calc(var(--i) * 0.13s);
}
.g-rail { fill: var(--umber-deep); }
.g-rail-rib { color: var(--bark); }

/* --i is set on the bay and inherits down; --j is the facing within the bay,
   so the stagger reads left to right, one bay at a time. */
.g-face {
  animation: qty_drop 0.46s var(--ease) backwards;
  animation-delay: calc(0.42s + var(--i) * 0.15s + var(--j) * 0.04s);
}
.qf-body { fill: var(--bark); }
.qf-neck { fill: var(--bark); }
.qf-cap { fill: var(--brass); }
.qf-seam { stroke: rgba(34, 29, 25, 0.75); stroke-width: 1.5; }
.g-bay[data-kind="jar"] .qf-body { fill: #6c5546; }
.g-bay[data-kind="carton"] .qf-body { fill: #5d4a3d; }
.g-bay[data-kind="carton"] .qf-cap { fill: var(--brass-dim); }
.g-bay[data-kind="tube"] .qf-body { fill: #8a6e5b; }

.g-ticket { animation: qty_rail 0.6s var(--ease) backwards; animation-delay: 2.05s; }
.g-ticket-card { fill: var(--ink); }
.g-ticket-bar { fill: var(--umber-deep); }
.g-count {
  fill: var(--brass);
  font: 600 11px/1 var(--head);
  letter-spacing: 0.14em;
  animation: qty_print 0.5s var(--ease) backwards;
  animation-delay: 2.5s;
}
.g-legend {
  fill: var(--ink-faint);
  font: 600 9px/1 var(--head);
  letter-spacing: 0.2em;
}

/* ---- the nesting diagram ------------------------------------------------- */
.nest-fig { margin: 0; }
.nest { display: block; width: 100%; height: auto; }
.n-outer { fill: rgba(125, 99, 82, 0.14); stroke: var(--bark); stroke-width: 2; }
.n-flute { fill: none; stroke: var(--bark); stroke-width: 1.5; }
.n-inner { fill: var(--shelf); stroke: var(--bark-line); stroke-width: 1.5; }
.n-inner-open { fill: var(--umber-deep); stroke: var(--brass-dim); }
.n-seam { stroke: var(--bark-line); stroke-width: 1.5; }
.n-unit { fill: var(--bark); }
.n-unit-dim { opacity: 0.38; }
.n-unit-cap { fill: var(--brass); }
.n-lead { stroke: var(--bark); stroke-width: 1; }
.n-label {
  fill: var(--ink-soft);
  font: 600 11px/1 var(--head);
  letter-spacing: 0.14em;
}
.n-sum {
  fill: var(--brass);
  font: 600 13px/1 var(--head);
  letter-spacing: 0.1em;
}

/* ---- drawn plan (Preston) ------------------------------------------------ */
.plan { display: block; width: 100%; height: auto; }
.pl-water { fill: rgba(125, 99, 82, 0.22); }
.pl-motor { stroke: var(--brass-dim); stroke-width: 5; fill: none; stroke-linecap: round; }
.pl-trunk { stroke: var(--bark); stroke-width: 3; fill: none; stroke-linecap: round; }
.pl-rail { stroke: var(--ink-faint); stroke-width: 1.4; stroke-dasharray: 2 5; fill: none; }
.pl-place { fill: var(--ink-faint); }
.pl-here { fill: var(--brass); }
.pl-label {
  fill: var(--ink-soft);
  font: 400 11px/1 var(--body);
  letter-spacing: 0.04em;
}
.pl-road {
  fill: var(--brass);
  font: 600 11px/1 var(--head);
  letter-spacing: 0.1em;
}
.pl-here-label {
  fill: var(--brass);
  font: 600 12px/1 var(--head);
  letter-spacing: 0.12em;
}

/* ---- drawn label anatomy / bay elevation -------------------------------- */
.anat { display: block; width: 100%; height: auto; }
.an-pack { fill: var(--shelf); stroke: var(--bark); stroke-width: 2; }
.an-zone { fill: rgba(217, 154, 62, 0.08); stroke: var(--brass-dim); stroke-width: 1; }
.an-text { stroke: var(--bark); stroke-width: 3; stroke-linecap: round; }
.an-lead { stroke: var(--bark); stroke-width: 1; stroke-dasharray: 3 3; }
.an-pin { fill: var(--brass); stroke: var(--umber-deep); stroke-width: 2; }
.an-pin-num { fill: var(--umber-deep); font: 600 10px/1 var(--head); }
.an-key { fill: var(--ink-soft); font: 400 11px/1 var(--body); }
.an-sym { fill: none; stroke: var(--bark); stroke-width: 2; }
.an-sym-line { stroke: var(--bark); stroke-width: 2; }
.an-sym-solid { fill: var(--bark); }
.an-sym-lid { fill: none; stroke: var(--bark); stroke-width: 3; stroke-linecap: round; }
.an-sym-num { fill: var(--ink-soft); font: 600 11px/1 var(--head); letter-spacing: 0.06em; }
.an-rack { stroke: var(--bark); stroke-width: 3; fill: none; }
.an-case { fill: var(--bark); }
.an-case-warn { fill: var(--brass-dim); }

/* ---- widgets ------------------------------------------------------------- */
.calc {
  margin: 0;
  padding: 0.9rem 0.85rem 1rem;
  background: var(--shelf);
  border: 1px solid var(--bark-line);
  border-top: 3px solid var(--bark);
  border-radius: 2px;
}
.calc fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.calc legend {
  padding: 0 0.4rem;
  font: 600 0.84rem/1 var(--head);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brass);
}
.calc .guide {
  margin: 0.15rem 0 0.85rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.fields {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}
.field { display: flex; flex-direction: column; gap: 0.22rem; min-width: 0; }
.field label {
  font: 600 0.7rem/1.3 var(--head);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field input {
  width: 100%;
  padding: 0.44rem 0.5rem;
  font: 400 1rem/1.2 var(--body);
  color: var(--ink);
  background: var(--umber-deep);
  border: 1px solid var(--bark-line);
  border-radius: 2px;
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease),
              box-shadow 0.18s var(--ease);
}
.field input:hover { border-color: var(--bark); }
.field input:focus { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass-dim); }
.field .hint { font-size: 0.72rem; color: var(--ink-faint); }

.calc-act { margin-top: 0.85rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.btn {
  padding: 0.5rem 1rem 0.44rem;
  font: 600 0.8rem/1 var(--head);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--umber-deep);
  background: var(--brass);
  border: 1px solid var(--brass);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
              transform 0.12s var(--ease);
}
.btn:hover { background: var(--ink); border-color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn-quiet {
  color: var(--ink-soft);
  background: transparent;
  border-color: var(--bark-line);
}
.btn-quiet:hover { color: var(--ink); background: var(--shelf-lift); border-color: var(--bark); }

.readout {
  margin-top: 0.9rem;
  border-top: 1px solid var(--bark-line);
  padding-top: 0.7rem;
}
.readout:empty { display: none; }
.readout dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1rem 0.8rem;
  margin: 0;
  align-items: baseline;
}
.readout dt {
  font-size: 0.86rem;
  color: var(--ink-soft);
  padding-block: 0.22rem;
  border-bottom: 1px dotted rgba(125, 99, 82, 0.5);
}
.readout dd {
  margin: 0;
  padding-block: 0.22rem;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.95rem;
  color: var(--brass);
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px dotted rgba(125, 99, 82, 0.5);
}
.readout .sum {
  max-width: none;
  margin-top: 0.6rem;
  padding: 0.5rem 0.6rem;
  background: var(--umber-deep);
  border-left: 3px solid var(--brass);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.86rem;
  line-height: 1.75;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}
.readout .sum b { color: var(--ink); font-weight: 400; }
.readout .warn { margin-top: 0.6rem; font-size: 0.82rem; color: var(--brass); }

/* ---- footer -------------------------------------------------------------- */
.foot {
  margin-top: clamp(1.8rem, 5vw, 3rem);
  padding-block: 1.5rem 2.2rem;
  background: var(--umber-deep);
  border-top: 4px solid var(--brass-dim);
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.foot-grid { display: grid; gap: 1.2rem; }
@media (min-width: 46rem) {
  .foot-grid { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 2.4rem; }
}
.foot-name {
  margin: 0 0 0.5rem;
  font: 600 1.05rem/1.2 var(--head);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.foot address { font-style: normal; line-height: 1.75; color: var(--ink-soft); }
.foot p { margin: 0.35rem 0 0; }
.foot .reg { color: var(--ink-faint); }
.foot h2 {
  margin: 0 0 0.4rem;
  font: 600 0.72rem/1 var(--head);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.foot-links { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 1.6rem; }
.foot-links li { margin-bottom: 0.2rem; break-inside: avoid; }
.foot-links a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.foot-links a:hover { color: var(--brass); border-bottom-color: var(--brass-dim); }
.foot-rule {
  border: 0;
  height: 1px;
  margin: 1.3rem 0 0;
  background: var(--bark-line);
}
.foot-sic {
  margin-top: 0.9rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

/* ==========================================================================
   SECTION SHAPES
   The sheet's body is seven sections and no two of them are built the same
   way. Each block below is one of those shapes and is used exactly once on
   index.html, so a reader scrolling the page never meets the same figure
   twice: picture-over-caption, ruled table, floated plate, card row,
   full-bleed band, pull quote, offset split.
   ========================================================================== */

/* ---- 01 wide figure: picture at sheet width, prose beneath as its caption -- */
.plate-wide {
  margin: 1.35rem 0 0;
}
.plate-wide .plate-shot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--bark-line);
  border-bottom: 0;
  background: var(--umber-deep);
}
.plate-wide figcaption {
  border-top: 4px solid var(--brass-dim);
  padding-top: 0.95rem;
}
.plate-mark {
  max-width: none;
  margin: 0 0 0.6rem;
  font: 600 0.69rem/1 var(--head);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
}
.plate-mark .plate-mark-soft { color: var(--ink-faint); letter-spacing: 0.12em; }
.cap-cols > p { max-width: none; font-size: 0.95rem; }
.cap-cols > p:last-child { margin-bottom: 0; }
/* The caption sets as two balanced columns of one flow - break-inside:avoid
   was pinning a paragraph per column and leaving three lines beside seven. */
@media (min-width: 58rem) {
  .cap-cols { columns: 2; column-gap: 2.8rem; column-rule: 1px solid var(--bark-line); }
  .cap-cols > p:first-child { margin-top: 0; }
}

/* ---- 03 inset plate: a plate set into the text, the prose running past it -- */
.inset-body {
  margin-top: 1.3rem;
  max-width: 56rem;
}
.inset-body > p { max-width: none; }
.inset-body::after { content: ""; display: block; clear: both; }
.plate-inset {
  margin: 0 0 1.1rem;
  padding: 0.6rem 0.65rem 0.55rem;
  background: var(--shelf);
  border: 1px solid var(--bark-line);
  box-shadow: var(--press);
}
.plate-inset .plate-shot { display: block; width: 100%; height: auto; }
.plate-inset figcaption {
  margin-top: 0.55rem;
  padding-left: 0.6rem;
  border-left: 2px solid var(--brass-dim);
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--ink-faint);
}
@media (min-width: 50rem) {
  .plate-inset {
    float: right;
    width: 24rem;
    max-width: 46%;
    margin: 0.3rem 0 1rem 2.1rem;
    shape-outside: margin-box;
  }
}

/* ---- 04 card grid: one fact to a card, four across ----------------------- */
.factcards {
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
}
@media (min-width: 34rem) { .factcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .factcards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; } }
.factcards li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.85rem 0.9rem 0.95rem;
  background: var(--shelf);
  border: 1px solid var(--bark-line);
  border-top: 3px solid var(--bark);
  transition: border-top-color 0.2s var(--ease), background-color 0.2s var(--ease),
              transform 0.2s var(--ease);
}
.factcards li:hover {
  border-top-color: var(--brass);
  background: var(--shelf-lift);
  transform: translateY(-2px);
}
.fc-level {
  max-width: none;
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.fc-name {
  margin: 0;
  font: 600 1.5rem/1 var(--head);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brass);
}
.fc-fact {
  max-width: none;
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.56;
  color: var(--ink-soft);
}

/* ---- 05 full-bleed band: edge to edge, the column centred inside it ------- */
.fullband {
  margin-block: clamp(1.9rem, 5vw, 3.2rem);
  padding-block: clamp(1.9rem, 5vw, 3.4rem);
  border-top: 4px solid var(--brass-dim);
  border-bottom: 4px solid var(--brass-dim);
  background:
    var(--rib-wide),
    linear-gradient(180deg, #171310 0%, var(--umber-deep) 42%, #171310 100%);
}
.fullband .wrap { max-width: 53rem; }
.fullband .inset { text-align: center; padding-left: 3.4rem; padding-right: 3.4rem; }
.fullband .pane { background: rgba(26, 22, 19, 0.5); }

.steps { margin: 0.95rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
@media (min-width: 46rem) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } }
.steps li {
  position: relative;
  padding: 0.7rem 0.85rem 0.85rem;
  background: rgba(44, 38, 34, 0.6);
  border-left: 3px solid var(--bark);
  transition: border-left-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.steps li:hover { border-left-color: var(--brass); background: var(--shelf-lift); }
.step-k { display: block; font: 600 1.55rem/1 var(--head); color: var(--brass-dim); }
.step-w {
  display: block;
  margin-top: 0.22rem;
  font: 600 0.79rem/1.2 var(--head);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
}
.step-d { display: block; margin-top: 0.3rem; font-size: 0.8rem; line-height: 1.5; color: var(--ink-faint); }

.ruler { display: block; width: 100%; height: auto; margin-top: 0.95rem; }
.rl-axis { stroke: var(--bark); stroke-width: 2; }
.rl-tick { stroke: var(--bark-line); stroke-width: 2; }
/* thick enough for the interval number to sit INSIDE the bar: at 6px the
   digits fell below it onto the dark ground and read as smudges */
.rl-span { stroke: var(--brass-dim); stroke-width: 15; stroke-linecap: butt; }
.rl-span-last { stroke: var(--brass); }
.rl-num { fill: var(--umber-deep); font: 600 11px/1 var(--head); }
.rl-word { fill: var(--ink-soft); font: 400 12px/1 var(--body); }
.rl-edge { fill: var(--ink-faint); font: 400 10px/1 var(--body); letter-spacing: 0.08em; }

/* ---- 06 pull quote: one sentence set large, the body resuming beneath ----- */
.pull {
  margin: 1.1rem 0 1.5rem;
  padding: 0.2rem 0 0.2rem 1.15rem;
  border-left: 5px solid var(--brass);
}
.pull p {
  max-width: 44rem;
  margin: 0;
  font: 600 clamp(1.45rem, 4.5vw, 2.6rem)/1.08 var(--head);
  letter-spacing: 0.012em;
  color: var(--ink);
  text-wrap: balance;
}
.pull .pull-hi { color: var(--brass); }

/* ---- 07 offset split: narrow figure column overhanging the gutter -------- */
.split { margin-top: 1.35rem; display: grid; gap: 1.3rem; }
.split-fig {
  margin: 0;
  padding: 0.75rem 0.85rem 0.6rem;
  background: var(--shelf);
  border: 1px solid var(--bark-line);
  box-shadow: var(--press);
}
.split-fig figcaption {
  margin-top: 0.5rem;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--ink-faint);
}
.split-main > p { max-width: var(--measure); }
.split-note { margin-top: 1.05rem; }
@media (min-width: 58rem) {
  .split {
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    column-gap: 3.4rem;
    align-items: start;
  }
  /* the narrow side is a rail, not a lone plate: figure plus margin note,
     the whole rail pulled left out of the page gutter and right into the
     column gap so it overhangs on both edges of its track */
  .split-side {
    position: relative;
    z-index: 1;
    margin-left: calc(var(--gut) * -1);
    margin-right: -2.1rem;
  }
}

/* ---- run-in labels, used where a list would have been a second table ----- */
.runin {
  font-family: var(--head);
  font-weight: 600;
  font-size: 0.95em;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brass);
}
.lead-line { color: var(--ink-soft); }

/* ---- motion -------------------------------------------------------------- */
@keyframes qty_deck {
  from { opacity: 0; transform: translateX(-46px); }
}
@keyframes qty_drop {
  from { opacity: 0; transform: translateY(-38px); }
}
@keyframes qty_rail {
  from { opacity: 0; transform: translateX(-210px); }
}
@keyframes qty_print {
  from { opacity: 0; }
}
@keyframes qty_tab_bar {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Every animated element's resting state IS its finished state - the
   keyframes only describe where it comes from - so switching motion off
   leaves the shelf stocked, the ticket railed and the count printed. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .pane-tab[aria-selected="true"]::after { transform: scaleX(1) !important; }
}