/* CLEAN SWEEP SUPPLY LTD — cleansweepsupply.store
   =============================================================================================
   The whole site is a standing order sheet: ruled columns carrying what is supplied, in what
   pack, on what cycle, and what is checked when it lands.

   RESET — two lines, and no more than two. Everything else a reset would normally flatten is
   something this sheet has an opinion about, and an opinion is better written where it applies.

   There is deliberately NO shared grid class. The ruled grid is declared PER SECTION, because
   each section rules a different number of columns: the band rules none, the annotated body
   rules two of unequal weight, the ledger rules five, the pair rules two, the cards rule four.
   A single .grid utility would force those five to agree, and the one thing this sheet must not
   do is make every section the same shape. The rules between columns never disappear as the
   viewport narrows — they only thin, because a column with no rule beside it stops being a
   column and becomes a paragraph.
   ============================================================================================= */

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, dl, dd, figure, blockquote, ol, ul { margin: 0; }

/* ---------------------------------------------------------------------------------- tokens */

:root {
  /* brass and porcelain */
  --ground: #f4f1ea;
  --ink: #23201b;
  --brass: #8c6a2f;
  --brass-deep: #6f5323;   /* the brass that is safe under small text on the ground */
  --brass-lit: #d8ab5a;    /* the brass that is safe over ink */
  --slate: #3f5550;
  --porcelain: #fffdf8;

  --ink-soft: #4c463d;
  --ink-faint: #6b6459;
  --ruleline: #cfc7b6;
  --ruleline-strong: #a89d86;
  --ruleline-dark: #4a443a;

  /* rule weights. They are tokens because the whole site turns on them: the narrow layouts
     reassign these three values rather than dropping any rule. */
  --w-hair: 1px;
  --w-mid: 2px;
  --w-heavy: 3px;

  --gut: 1.15rem;
  --measure: 34rem;
  --step: 0.75rem;

  /* The height of the opening band. It is a token because TWO things must agree on it: the
     photograph and the scrim laid over it. When the scrim was simply inset:0 on the section it
     also darkened the strip BELOW the photograph, where the editorial credit sits, and took that
     credit to 1.15:1 — invisible, and it is the one line on the page that has to be read. */
  --band-h: clamp(16rem, 46vw, 27rem);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --grotesk: "Public Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --ease: cubic-bezier(0.22, 0.68, 0.32, 1);
  --slow: 620ms;
  --mid: 320ms;
  --quick: 170ms;
}

/* The fine crosshatch. Two gradients at opposing diagonals, hairline and very pale: it reads as
   the tooth of an order pad rather than as a pattern, and it is the one texture on the site. */
:root {
  --hatch:
    repeating-linear-gradient(45deg, rgba(140, 106, 47, 0.055) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(63, 85, 80, 0.045) 0 1px, transparent 1px 7px);
  --hatch-dark:
    repeating-linear-gradient(45deg, rgba(216, 171, 90, 0.07) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(-45deg, rgba(255, 253, 248, 0.035) 0 1px, transparent 1px 8px);
}

/* ------------------------------------------------------------------------------ foundation */

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--ground);
  background-image: var(--hatch);
  color: var(--ink);
  font: 400 1rem/1.62 var(--grotesk);
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.004em;
}

p { max-width: var(--measure); }

a {
  color: var(--brass-deep);
  text-decoration-thickness: var(--w-hair);
  text-underline-offset: 0.16em;
  transition: color var(--quick) var(--ease), text-decoration-color var(--quick) var(--ease);
}
a:hover { color: var(--ink); text-decoration-color: var(--brass); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: var(--w-mid) solid var(--brass-deep);
  outline-offset: 2px;
}

b { font-weight: 600; }

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

.sw-skip {
  position: absolute;
  left: var(--gut);
  top: -4rem;
  z-index: 40;
  background: var(--ink);
  color: var(--porcelain);
  padding: 0.6rem 1rem;
  font-size: 0.875rem;
  text-decoration: none;
  transition: top var(--mid) var(--ease);
}
.sw-skip:focus { top: 0.6rem; }

/* ------------------------------------------------------------- masthead and the ruled shoulder */

.sw-mast {
  border-bottom: var(--w-heavy) solid var(--ink);
  background: var(--porcelain);
}
.sw-mast-in {
  max-width: 78rem;
  margin: 0 auto;
  padding: 1.5rem var(--gut) 0;
}

.sw-mark {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  max-width: none;
}
.sw-mark a {
  font-family: var(--serif);
  font-size: clamp(1.18rem, 4.6vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.012em;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--quick) var(--ease);
}
.sw-mark a:hover { color: var(--brass-deep); }

.sw-shoulder-mark { width: 2.1rem; height: auto; flex: none; }
.sw-mark-heavy { fill: var(--brass); }
.sw-mark-light { fill: var(--ruleline-strong); }

.sw-mast-sub {
  margin-top: 0.4rem;
  max-width: 48rem;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* -------------------------------------------------------------------- the segmented control */

/* Without the script this is a plain nested list: three group headings, every page beneath its
   own heading, all of them visible and all of them reachable. The script adds .sw-seg--live and
   only then does it behave as a segmented control — so the degraded state is the authored one,
   not a broken version of the upgraded one. */

.sw-seg { margin: 1.1rem 0 0; }
.sw-seg-lead {
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}

.sw-seg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.sw-seg-group { border-left: var(--w-mid) solid var(--ruleline); padding-left: 0.75rem; }

.sw-seg-tab {
  display: inline-block;
  font-family: var(--serif);
  font-size: 0.98rem;
  color: var(--ink);
  text-decoration: none;
  padding: 0.18rem 0;
  border-bottom: var(--w-mid) solid transparent;
  transition: border-color var(--quick) var(--ease), color var(--quick) var(--ease);
}
.sw-seg-tab:hover { border-bottom-color: var(--brass); }

.sw-seg-pages {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 1.1rem;
}
.sw-seg-pages a {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: var(--w-hair) solid var(--ruleline);
  padding-bottom: 1px;
  transition: border-color var(--quick) var(--ease), color var(--quick) var(--ease);
}
.sw-seg-pages a:hover { color: var(--ink); border-bottom-color: var(--brass); }
.sw-seg-pages a[aria-current="page"] {
  color: var(--brass-deep);
  border-bottom-color: var(--brass);
  border-bottom-width: var(--w-mid);
}

/* Upgraded. The list becomes a two-row grid: every tab sits in row one in its own column, and
   every panel is placed in row two spanning the whole width. The panels stack in the same cell
   and only the selected one is displayed, so the control reserves exactly the height its open
   panel needs — at 320px as much as at 1440px — and never overlaps the sheet beneath it. */
.sw-seg--live .sw-seg-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto)) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 0;
  border-bottom: var(--w-mid) solid var(--ruleline-strong);
}
.sw-seg--live .sw-seg-group { display: contents; }
.sw-seg--live .sw-seg-tab {
  grid-row: 1;
  align-self: stretch;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.3;
  border-bottom: var(--w-heavy) solid transparent;
  border-right: var(--w-hair) solid var(--ruleline);
  color: var(--ink-soft);
  transition: border-color var(--mid) var(--ease), color var(--mid) var(--ease),
              background-color var(--mid) var(--ease);
}
.sw-seg--live .sw-seg-group:last-child .sw-seg-tab { border-right: 0; }
.sw-seg--live .sw-seg-tab:hover { color: var(--ink); background: rgba(140, 106, 47, 0.05); }
.sw-seg--live .sw-seg-tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--brass);
  background: rgba(140, 106, 47, 0.08);
}
.sw-seg--live .sw-seg-pages {
  grid-row: 2;
  grid-column: 1 / -1;
  padding: 0.7rem 0 0.95rem;
  gap: 0.2rem 1.3rem;
}
.sw-seg--live .sw-seg-pages[hidden] { display: none; }

/* ------------------------------------------------------------------ the per-section reveal */

/* One transition per section, and the FINISHED state is the base state. The script arms the
   page (snaps the sections to their entry values with no transition), then releases it on the
   next frame. With the script blocked neither class is ever set and every section simply
   stands where it was authored. */

.sw-sheet > section {
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
body.sw-armed .sw-sheet > section { transition: none; opacity: 0; transform: translateY(14px); }
body.sw-live .sw-sheet > section { opacity: 1; transform: none; }
body.sw-live .sw-sheet > section:nth-child(2) { transition-delay: 60ms; }
body.sw-live .sw-sheet > section:nth-child(3) { transition-delay: 110ms; }
body.sw-live .sw-sheet > section:nth-child(4) { transition-delay: 150ms; }

/* ---------------------------------------------------------------------- shared head treatment */

/* ruled shoulder: a heavy rule runs off the left shoulder of the heading and a hair rule
   continues under it to the end of the measure. */
.sw-shoulder {
  position: relative;
  padding-top: 0.85rem;
  font-size: clamp(1.32rem, 4.6vw, 1.95rem);
}
.sw-shoulder::before,
.sw-shoulder::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
}
.sw-shoulder::before { width: 3.4rem; height: var(--w-heavy); background: var(--brass); }
.sw-shoulder::after  { width: 100%; height: var(--w-hair); background: var(--ruleline); top: 1px; }

.sw-sheet > section { padding: 2.6rem 0; }
.sw-sheet > section + section { border-top: var(--w-hair) solid var(--ruleline); }

/* ======================================================= ord-1 · full-bleed band, corner plate */

/* The band rules NO columns: it is the one place on the sheet where nothing is tabulated, and
   the photograph runs the full width under a plate hung into the corner. */

#ord-1 {
  position: relative;
  padding: 0;
  border-top: 0;
  isolation: isolate;
  overflow: hidden;
}
.sw-band-art {
  display: block;
  width: 100%;
  height: var(--band-h);
  object-fit: cover;
  object-position: 62% 50%;
  filter: saturate(0.78) contrast(1.02);
}
/* the scrim covers the PHOTOGRAPH and stops where it stops */
#ord-1::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--band-h);
  z-index: 1;
  background: linear-gradient(to bottom, rgba(35, 32, 27, 0.08) 0%, rgba(35, 32, 27, 0.52) 62%, rgba(35, 32, 27, 0.74) 100%);
  pointer-events: none;
}

.sw-band-plate {
  position: relative;
  z-index: 2;
  max-width: 78rem;
  margin: -7.5rem auto 0;
  padding: 0 var(--gut);
}
.sw-band-plate > * {
  background: var(--porcelain);
  padding: 1.1rem 1.2rem;
  max-width: 46rem;
}
.sw-band-plate h1 {
  font-size: clamp(1.5rem, 6vw, 2.5rem);
  border-top: var(--w-heavy) solid var(--brass);
  border-left: var(--w-heavy) solid var(--brass);
  padding-top: 1rem;
}
.sw-band-plate .sw-lede {
  font-size: 1.0625rem;
  color: var(--ink);
  border-left: var(--w-heavy) solid var(--brass);
  padding-top: 0;
}
.sw-band-plate p:last-of-type {
  border-left: var(--w-heavy) solid var(--brass);
  border-bottom: var(--w-heavy) solid var(--brass);
  padding-top: 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

.sw-band-credit {
  position: relative;
  z-index: 2;
  max-width: 78rem;
  margin: 0.55rem auto 1.6rem;
  padding: 0 var(--gut);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ===================================================== ord-2 · dark inversion, shelf-bay fill */

/* The ground flips to ink. This section rules one wide column and a four-term glossary under
   it; the rule between the drawing and the glossary is the heaviest on the page, because it is
   the one place the sheet changes voice. */

#ord-2 {
  background: var(--ink);
  background-image: var(--hatch-dark);
  color: var(--porcelain);
  padding: 2.8rem 0;
  border-top: 0;
}
.sw-invert-in {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 var(--gut);
}
#ord-2 .sw-shoulder { color: var(--porcelain); }
#ord-2 .sw-shoulder::before { background: var(--brass-lit); }
#ord-2 .sw-shoulder::after { background: var(--ruleline-dark); }
.sw-invert-lede {
  margin-top: 0.9rem;
  color: #e7e1d4;
  max-width: 44rem;
  font-size: 1.0125rem;
}

.sw-bays { margin: 1.7rem 0 0; }
.sw-bay-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 54rem;
  background: rgba(255, 253, 248, 0.03);
  border: var(--w-hair) solid var(--ruleline-dark);
  padding: 0.5rem;
}
.sw-bay-rail, .sw-bay-floor { fill: var(--brass-lit); }
.sw-bay-box { fill: none; stroke: #7e7466; stroke-width: 1.4; }
.sw-bay-fill {
  fill: var(--brass);
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.sw-bay-held .sw-bay-box { stroke: var(--brass-lit); stroke-dasharray: 5 4; }
.sw-bay-tick { fill: #b6ad9c; font: 400 11px var(--grotesk); }
.sw-bay-tick-held { fill: var(--brass-lit); }

/* The set-piece. The base state is the FINISHED drawing: every bay at its stated fill. Arming
   snaps the fills to nothing, releasing runs them back up bay by bay. Reduced motion never arms
   it, so it lands drawn. */
@keyframes csBayRise {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes csBayHeld {
  0%   { opacity: 0; stroke-dashoffset: 26; }
  60%  { opacity: 1; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes csRuleWipe {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.sw-bays.is-armed .sw-bay-fill { transform: scaleY(0); }
.sw-bays.is-armed .sw-bay-held .sw-bay-box { opacity: 0; }
.sw-bays.is-armed .sw-bay-rail,
.sw-bays.is-armed .sw-bay-floor { transform: scaleX(0); transform-box: fill-box; transform-origin: 0 50%; }

.sw-bays.is-running .sw-bay-rail,
.sw-bays.is-running .sw-bay-floor {
  transform-box: fill-box;
  transform-origin: 0 50%;
  animation: csRuleWipe 520ms var(--ease) forwards;
}
/* `both`, not `forwards`. With `forwards` a bay sits at its BASE value — full — until its own
   stagger delay elapses, so bays three to seven flashed full, dropped to nothing and redrew.
   `backwards` holds each bay at the `from` keyframe through its delay, which is what makes the
   run read as filling bay by bay instead of blinking. */
.sw-bays.is-running .sw-bay-fill {
  animation: csBayRise 460ms var(--ease) both;
  animation-delay: calc(360ms + var(--bay) * 150ms);
}
.sw-bays.is-running .sw-bay-held .sw-bay-box {
  animation: csBayHeld 520ms var(--ease) both;
  animation-delay: calc(360ms + 6 * 150ms);
}

.sw-bay-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1rem;
  margin-top: 0.9rem;
  max-width: 54rem;
}
.sw-replay {
  font: 400 0.8125rem/1 var(--grotesk);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--brass-lit);
  border: 0;
  border-bottom: var(--w-heavy) solid #a07c35;
  padding: 0.6rem 1rem;
  cursor: pointer;
  transition: background-color var(--quick) var(--ease), transform var(--quick) var(--ease),
              border-color var(--quick) var(--ease);
}
.sw-replay:hover { background: #e7bd72; }
.sw-replay:active { transform: translateY(2px); border-bottom-width: var(--w-hair); }
.sw-bay-state { font-size: 0.8125rem; color: #cfc6b4; flex: 1 1 14rem; }

.sw-terms {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: var(--w-heavy) solid var(--brass-lit);
  display: grid;
  gap: 0.2rem 1.4rem;
}
.sw-terms dt {
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--brass-lit);
  padding-top: 0.7rem;
  border-top: var(--w-hair) solid var(--ruleline-dark);
}
.sw-terms dd {
  color: #ddd6c8;
  font-size: 0.9rem;
  padding-bottom: 0.75rem;
  max-width: 30rem;
}

/* ============================================= ord-3 · margin-annotated, two unequal columns */

/* Two columns of unequal weight: a body measure and a margin. The rule lives on the margin's
   left edge and is the only rule in the section, because an annotated page is ruled once. */

#ord-3 {
  max-width: 78rem;
  margin: 0 auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
}
.sw-annot-body { margin-top: 1.4rem; display: grid; gap: 1.05rem; }
.sw-annot-body p { font-size: 1.0125rem; }
.sw-note {
  border-left: var(--w-mid) solid var(--brass);
  background: var(--porcelain);
  padding: 0.65rem 0.9rem;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 24rem;
  transition: border-left-width var(--mid) var(--ease), background-color var(--mid) var(--ease);
}
.sw-note b {
  display: block;
  font-family: var(--serif);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: 0.15rem;
}
.sw-note:hover { border-left-width: var(--w-heavy); }

/* ================================================== ord-4 · ledger rows, five ruled columns */

#ord-4 {
  max-width: 78rem;
  margin: 0 auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
}
.sw-ledger-lede { margin-top: 1rem; color: var(--ink-soft); max-width: 42rem; }

/* Said only where it is true. Above 51rem the five columns fit and the note would be a lie. */
.sw-ledger-hint {
  margin-top: 0.8rem;
  padding-left: 0.8rem;
  border-left: var(--w-mid) solid var(--brass);
  font-size: 0.78rem;
  color: var(--ink-faint);
  max-width: 30rem;
}
.sw-ledger-hint::after {
  content: " \2192";
  color: var(--brass-deep);
}

.sw-ledger-frame {
  margin: 1.5rem 0 1.3rem;
  border: var(--w-mid) solid var(--ink);
  background: var(--porcelain);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sw-ledger-frame:focus-visible { outline: var(--w-mid) solid var(--brass-deep); outline-offset: 2px; }

.sw-table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.sw-table caption {
  text-align: left;
  padding: 0.7rem 0.8rem;
  font-size: 0.72rem;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: var(--w-hair) solid var(--ruleline);
}
.sw-table th, .sw-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.7rem;
  /* the column rule. It thins in the narrow layouts; it is never removed. */
  border-right: var(--w-hair) solid var(--ruleline);
  border-bottom: var(--w-hair) solid var(--ruleline);
}
.sw-table th:last-child, .sw-table td:last-child { border-right: 0; }
.sw-table thead th {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  background: #ece7db;
  border-bottom: var(--w-mid) solid var(--ink);
  border-right-color: var(--ruleline-strong);
  position: sticky;
  top: 0;
}
.sw-table tbody th {
  font-family: var(--grotesk);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass-deep);
  white-space: nowrap;
  border-right-color: var(--ruleline-strong);
}
.sw-table tbody tr { transition: background-color var(--quick) var(--ease); }
.sw-table tbody tr:hover { background: #f6f2e8; }
.sw-table tbody tr:last-child th,
.sw-table tbody tr:last-child td { border-bottom: 0; }
.sw-table tbody tr:last-child { background: #f1ece0; }

/* ========================================================= ord-5 · figure pair, two columns */

#ord-5 {
  max-width: 78rem;
  margin: 0 auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
}
.sw-pair-in {
  margin-top: 1.4rem;
  display: grid;
  gap: 1.5rem;
}
.sw-plate img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--w-mid) solid var(--ink);
  filter: saturate(0.82);
  transition: filter var(--slow) var(--ease);
}
.sw-plate:hover img { filter: saturate(1); }
.sw-plate figcaption,
.sw-sched figcaption {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ink-faint);
  border-top: var(--w-hair) solid var(--ruleline);
  padding-top: 0.4rem;
}

.sw-pack-svg {
  display: block;
  width: 100%;
  max-width: 21rem;
  height: auto;
  margin-bottom: 1rem;
}
.sw-pack-outer { fill: #ece7db; stroke: var(--ink); stroke-width: 1.6; }
.sw-pack-inners rect { fill: var(--porcelain); stroke: var(--ruleline-strong); stroke-width: 1.1; }
.sw-pack-open { fill: var(--porcelain); stroke: var(--brass); stroke-width: 1.6; }
.sw-pack-units rect { fill: var(--brass); opacity: 0.72; }
.sw-pack-arrow { fill: none; stroke: var(--slate); stroke-width: 1.6; }
.sw-pack-label { fill: var(--ink-faint); font: 400 8px var(--grotesk); letter-spacing: 0.06em; }

/* the schedule row — the recurring component of this sheet */
.sw-rows { list-style: none; margin: 0; padding: 0; counter-reset: swrow; }
.sw-row {
  counter-increment: swrow;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.1rem;
  padding: 0.62rem 0 0.62rem 2.1rem;
  position: relative;
  border-top: var(--w-hair) solid var(--ruleline);
  transition: padding-left var(--mid) var(--ease), background-color var(--mid) var(--ease);
}
.sw-row:last-child { border-bottom: var(--w-hair) solid var(--ruleline); }
.sw-row::before {
  content: counter(swrow, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.68rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--brass-deep);
}
.sw-row::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 0;
  bottom: 0;
  width: var(--w-hair);
  background: var(--ruleline);
}
.sw-row:hover { background: var(--porcelain); }
.sw-row-k {
  font-family: var(--serif);
  font-size: 0.9rem;
  color: var(--ink);
}
.sw-row-v { font-size: 0.84rem; color: var(--ink-soft); line-height: 1.5; }

/* ============================================================== ord-6 · pull quote, no columns */

#ord-6 {
  max-width: 78rem;
  margin: 0 auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
}
.sw-quote-body {
  border-top: var(--w-heavy) solid var(--ink);
  border-bottom: var(--w-hair) solid var(--ruleline);
  padding: 1.3rem 0 1.2rem;
  position: relative;
}
.sw-quote-body p {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 5.2vw, 2.05rem);
  line-height: 1.26;
  max-width: 30ch;
  color: var(--ink);
}
.sw-quote-body::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 5.5rem;
  height: var(--w-heavy);
  background: var(--brass);
}
.sw-quote-after {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  max-width: 38rem;
}

/* ====================================================== ord-7 · offset split, rail plus tool */

#ord-7 {
  max-width: 78rem;
  margin: 0 auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
  display: grid;
  gap: 1.4rem;
}
.sw-split-rail p { margin-top: 0.8rem; font-size: 0.9rem; color: var(--ink-soft); }

.sw-split-tool, .sw-cycle {
  background: var(--porcelain);
  border: var(--w-mid) solid var(--ink);
  padding: 1.1rem;
}
.sw-fields {
  display: grid;
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: var(--w-mid) solid var(--ink);
}
.sw-field { display: grid; gap: 0.25rem; }
.sw-field-k {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sw-field input {
  font: 400 1.0625rem var(--grotesk);
  color: var(--ink);
  background: var(--ground);
  border: var(--w-hair) solid var(--ruleline-strong);
  border-bottom: var(--w-mid) solid var(--brass);
  padding: 0.45rem 0.55rem;
  width: 100%;
  transition: background-color var(--quick) var(--ease), border-color var(--quick) var(--ease);
}
.sw-field input:hover { background: #efebe1; }
.sw-field input:focus { background: var(--porcelain); border-color: var(--brass-deep); }

.sw-out { display: grid; gap: 0; padding-top: 0.35rem; }
.sw-out-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "k v" "w w";
  gap: 0.1rem 0.8rem;
  align-items: baseline;
  padding: 0.55rem 0;
  border-bottom: var(--w-hair) solid var(--ruleline);
  transition: background-color var(--mid) var(--ease);
}
.sw-out-row:last-child { border-bottom: 0; }
.sw-out-k { grid-area: k; font-size: 0.86rem; color: var(--ink-soft); }
.sw-out-v {
  grid-area: v;
  font-family: var(--serif);
  font-size: 1.32rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: color var(--mid) var(--ease);
}
.sw-out-w {
  grid-area: w;
  font-size: 0.72rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.sw-out-key { background: rgba(140, 106, 47, 0.08); padding-left: 0.5rem; padding-right: 0.5rem; }
.sw-out-key .sw-out-v { color: var(--brass-deep); font-size: 1.5rem; }
.sw-out-key .sw-out-k { color: var(--ink); }
.sw-out-void .sw-out-v { color: var(--slate); font-size: 1.02rem; }
.sw-out-note {
  margin-top: 0.8rem;
  padding-top: 0.6rem;
  border-top: var(--w-hair) solid var(--ruleline);
  font-size: 0.78rem;
  color: var(--ink-faint);
  max-width: none;
}
.sw-out-note.is-void { color: var(--slate); border-top-color: var(--slate); }

/* ========================================================== ord-8 · card grid, four columns */

#ord-8 {
  max-width: 78rem;
  margin: 0 auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
}
.sw-card-grid {
  list-style: none;
  margin: 1.4rem 0 1.2rem;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: var(--w-mid) solid var(--ink);
}
.sw-card {
  padding: 1rem 0.9rem 1.1rem;
  border-bottom: var(--w-hair) solid var(--ruleline);
  background: transparent;
  transition: background-color var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.sw-card:hover { background: var(--porcelain); }
.sw-card h3 {
  font-size: 1.02rem;
  margin-bottom: 0.35rem;
  padding-left: 0.85rem;
  position: relative;
}
.sw-card h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.22em;
  width: var(--w-heavy);
  height: 0.82em;
  background: var(--brass);
}
.sw-card p { font-size: 0.86rem; color: var(--ink-soft); }

/* ============================================================ ord-9 · wide figure, full measure */

#ord-9 {
  max-width: 78rem;
  margin: 0 auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
}
.sw-wide-fig { margin-bottom: 1.6rem; }
.sw-wide-fig img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 24rem;
  object-fit: cover;
  object-position: 50% 62%;
  border-top: var(--w-heavy) solid var(--ink);
  border-bottom: var(--w-hair) solid var(--ruleline);
  filter: saturate(0.8) contrast(1.03);
}
.sw-wide-fig figcaption {
  margin-top: 0.45rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ink-faint);
  max-width: 44rem;
}
.sw-wide-lede { margin-top: 0.9rem; font-size: 1.0125rem; color: var(--ink-soft); }
.sw-cycle { margin-top: 1.4rem; }

/* ------------------------------------------------------------------------------------ footer */

.sw-foot {
  margin-top: 2rem;
  background: var(--ink);
  background-image: var(--hatch-dark);
  color: #e4ded0;
  border-top: var(--w-heavy) solid var(--brass);
  padding: 2rem 0 2.4rem;
}
.sw-foot-in {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 var(--gut);
  display: grid;
  gap: 1.3rem;
}
.sw-foot-rule { width: 7rem; height: auto; }
.sw-foot-rule rect:first-child { fill: var(--brass-lit); }
.sw-foot-rule rect:last-child { fill: #6a6253; }
.sw-addr { font-style: normal; font-size: 0.875rem; line-height: 1.72; }
.sw-foot-co { font-family: var(--serif); font-size: 1.04rem; color: var(--porcelain); }
.sw-filed { display: grid; gap: 0; font-size: 0.8125rem; }
.sw-filed dt {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass-lit);
  padding-top: 0.55rem;
  border-top: var(--w-hair) solid var(--ruleline-dark);
}
.sw-filed dd { padding-bottom: 0.5rem; color: #e4ded0; }
.sw-filed a { color: var(--brass-lit); }
.sw-filed a:hover { color: var(--porcelain); }

/* ======================================================================== subpage furniture */

/* The inner pages rule their own columns too, but they share this furniture: a page head, a
   prose measure, a key/value block, and a stepped list. */

.sw-page-head {
  max-width: 78rem;
  margin: 0 auto;
  padding: 2.2rem var(--gut) 1.5rem;
  border-bottom: var(--w-mid) solid var(--ink);
}
.sw-page-head h1 {
  font-size: clamp(1.5rem, 5.6vw, 2.3rem);
  max-width: 28ch;
}
.sw-crumb {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.55rem;
}
.sw-crumb a { color: var(--brass-deep); text-decoration: none; border-bottom: var(--w-hair) solid var(--ruleline); }
.sw-crumb a:hover { border-bottom-color: var(--brass); }
.sw-page-lede { margin-top: 0.85rem; font-size: 1.0625rem; color: var(--ink-soft); max-width: 42rem; }

.sw-body { max-width: 78rem; margin: 0 auto; padding: 0 var(--gut); }
.sw-body > section { padding: 2rem 0; }
.sw-body > section + section { border-top: var(--w-hair) solid var(--ruleline); }
.sw-body p + p { margin-top: 0.85rem; }
.sw-body h2 { font-size: clamp(1.22rem, 4.2vw, 1.6rem); }
.sw-body h3 { font-size: 1.04rem; margin-top: 1.2rem; margin-bottom: 0.3rem; }

.sw-kv {
  margin-top: 1.1rem;
  display: grid;
  gap: 0;
  border-top: var(--w-mid) solid var(--ink);
}
.sw-kv dt {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass-deep);
  padding-top: 0.65rem;
  border-top: var(--w-hair) solid var(--ruleline);
}
.sw-kv dt:first-of-type { border-top: 0; }
.sw-kv dd { font-size: 0.9rem; color: var(--ink-soft); padding-bottom: 0.7rem; max-width: 38rem; }

.sw-steps { list-style: none; margin: 1.1rem 0 0; padding: 0; counter-reset: swstep; }
.sw-steps > li {
  counter-increment: swstep;
  position: relative;
  padding: 0.7rem 0 0.75rem 2.4rem;
  border-top: var(--w-hair) solid var(--ruleline);
  font-size: 0.9rem;
  color: var(--ink-soft);
  transition: background-color var(--mid) var(--ease);
}
.sw-steps > li:last-child { border-bottom: var(--w-hair) solid var(--ruleline); }
.sw-steps > li:hover { background: var(--porcelain); }
.sw-steps > li::before {
  content: counter(swstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.78rem;
  font-size: 0.72rem;
  color: var(--brass-deep);
  letter-spacing: 0.06em;
}
.sw-steps b { color: var(--ink); font-family: var(--serif); font-weight: 600; }

.sw-tiles { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0; }
.sw-tiles li {
  padding: 0.85rem 0 0.9rem;
  border-top: var(--w-hair) solid var(--ruleline);
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.sw-tiles li:last-child { border-bottom: var(--w-hair) solid var(--ruleline); }
.sw-tiles b { display: block; font-family: var(--serif); color: var(--ink); font-size: 0.96rem; }

.sw-pageout {
  margin-top: 1.6rem;
  padding-top: 1rem;
  border-top: var(--w-heavy) solid var(--ink);
  font-size: 0.875rem;
}
.sw-pageout p { max-width: 44rem; color: var(--ink-soft); }

/* ==================================================================== narrow to wide layouts */

/* 560px — the margin notes come out of the flow of the body column and sit beside it; the card
   grid pairs up; the rule weights step up one notch because there is room for them to be seen. */
@media (min-width: 35rem) {
  :root { --gut: 1.5rem; }
  .sw-terms { grid-template-columns: 9rem 1fr; }
  .sw-terms dt { border-top: var(--w-hair) solid var(--ruleline-dark); }
  .sw-terms dd { border-top: var(--w-hair) solid var(--ruleline-dark); padding-top: 0.7rem; }
  .sw-card-grid { grid-template-columns: repeat(2, 1fr); }
  .sw-card { border-right: var(--w-hair) solid var(--ruleline); padding-left: 1rem; }
  .sw-card:nth-child(2n) { border-right: 0; }
  .sw-row { grid-template-columns: 9.5rem 1fr; gap: 0 1rem; align-items: baseline; }
  .sw-out-row { grid-template-areas: "k v" "w v"; }
  .sw-fields { grid-template-columns: repeat(2, 1fr); gap: 0.8rem 1.1rem; }
  .sw-kv { grid-template-columns: 10rem 1fr; gap: 0 1.2rem; }
  .sw-kv dt { padding-bottom: 0.7rem; }
  .sw-kv dd { border-top: var(--w-hair) solid var(--ruleline); padding-top: 0.65rem; }
  .sw-kv dd:first-of-type { border-top: 0; }
  .sw-foot-in { grid-template-columns: auto 1fr; gap: 1.6rem 3rem; align-items: start; }
  .sw-foot-rule { grid-column: 1 / -1; }
  .sw-filed { grid-template-columns: 7.5rem 1fr; gap: 0 1.1rem; }
  .sw-filed dd { border-top: var(--w-hair) solid var(--ruleline-dark); padding-top: 0.55rem; }
}

/* 820px — the sheet opens out. The annotated section finally rules its two columns, the pair
   separates, and the split takes its offset. */
@media (min-width: 51rem) {
  :root { --gut: 2rem; --w-hair: 1px; --w-mid: 2px; --w-heavy: 4px; }
  body { font-size: 1.0625rem; }

  .sw-mast-in { padding-top: 1.9rem; }
  .sw-seg-lead { margin-bottom: 0.65rem; }

  .sw-sheet > section { padding: 3.4rem 0; }
  #ord-2 { padding: 3.6rem 0; }

  .sw-band-plate { margin-top: -9rem; }
  .sw-band-plate > * { padding: 1.3rem 1.6rem; }

  /* ord-3 rules two columns of unequal weight: body against margin. */
  .sw-annot-body {
    grid-template-columns: minmax(0, 1fr) 17rem;
    column-gap: 2.2rem;
    row-gap: 0;
    align-items: start;
  }
  .sw-annot-body p { grid-column: 1; padding-bottom: 1.15rem; }
  .sw-note {
    grid-column: 2;
    margin-bottom: 1.15rem;
    border-left-width: var(--w-heavy);
    max-width: none;
  }
  .sw-annot-body p:nth-of-type(1) { grid-row: 1; }
  .sw-note:nth-of-type(1) { grid-row: 1; }
  .sw-annot-body p:nth-of-type(2) { grid-row: 2; }
  .sw-note:nth-of-type(2) { grid-row: 2; }
  .sw-annot-body p:nth-of-type(3) { grid-row: 3; }
  .sw-note:nth-of-type(3) { grid-row: 3; }
  .sw-annot-body p:nth-of-type(4) { grid-row: 4; }
  /* the rule that separates the two columns, carried on the margin's edge all the way down */
  .sw-annot-body::before {
    content: "";
    grid-column: 2;
    grid-row: 1 / -1;
    width: var(--w-hair);
    justify-self: start;
    margin-left: -1.1rem;
    background: var(--ruleline);
    align-self: stretch;
  }

  .sw-ledger-hint { display: none; }
  .sw-table { font-size: 0.875rem; min-width: 0; }
  .sw-table th, .sw-table td { padding: 0.72rem 0.9rem; }
  .sw-table thead th { font-size: 0.82rem; }

  .sw-pair-in { grid-template-columns: 19rem minmax(0, 1fr); gap: 2.2rem; align-items: start; }
  .sw-sched { position: relative; padding-left: 2.2rem; }
  .sw-sched::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 2.2rem;
    width: var(--w-hair);
    background: var(--ruleline);
  }

  #ord-7 { grid-template-columns: 15rem minmax(0, 1fr); gap: 2.4rem; align-items: start; }
  .sw-split-rail { position: relative; padding-right: 2rem; }
  .sw-split-rail::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0.85rem;
    bottom: 0;
    width: var(--w-hair);
    background: var(--ruleline);
  }
  .sw-split-tool, .sw-cycle { padding: 1.5rem 1.6rem; }
  .sw-fields { grid-template-columns: repeat(4, 1fr); }
  .sw-fields-three { grid-template-columns: repeat(3, 1fr); }

  .sw-card-grid { grid-template-columns: repeat(4, 1fr); }
  .sw-card { border-right: var(--w-hair) solid var(--ruleline); }
  .sw-card:nth-child(2n) { border-right: var(--w-hair) solid var(--ruleline); }
  .sw-card:last-child { border-right: 0; }

  /* The inner pages rule two columns as well: the heading stands in a rail on the left and the
     argument runs in the column beside it. Before this the prose stopped at its 34rem measure
     while the stepped lists ran the full 82rem, so a page was simultaneously left-heavy and
     set to a line far too long to read. One grid fixes both. */
  .sw-body > section {
    padding: 2.6rem 0;
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    column-gap: 2.6rem;
  }
  .sw-body > section > * { grid-column: 2; max-width: 44rem; }
  .sw-body > section > h2 {
    grid-column: 1;
    grid-row: 1 / span 20;
    align-self: start;
    max-width: none;
    position: relative;
    padding-right: 1.4rem;
  }
  .sw-tiles { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; }
  .sw-page-head { padding: 3rem var(--gut) 1.9rem; }
}

/* 1080px — the fullest ruling. The ledger's rules take their heaviest weight and the band plate
   hangs properly into the corner. */
@media (min-width: 67rem) {
  :root { --gut: 2.5rem; --band-h: 30rem; }
  .sw-band-plate { margin-top: -11rem; }
  .sw-band-plate > * { max-width: 50rem; }
  .sw-band-plate h1 { padding: 1.4rem 2rem 1.1rem; }
  .sw-band-plate .sw-lede { padding: 0 2rem 1rem; }
  .sw-band-plate p:last-of-type { padding: 0 2rem 1.3rem; }

  .sw-table th, .sw-table td { border-right-width: var(--w-hair); }
  .sw-table thead th { border-right-width: var(--w-mid); }
  .sw-table tbody th { border-right-width: var(--w-mid); }

  .sw-annot-body { grid-template-columns: minmax(0, 1fr) 20rem; column-gap: 3rem; }
  .sw-pair-in { grid-template-columns: 23rem minmax(0, 1fr); gap: 3rem; }
  #ord-7 { grid-template-columns: 18rem minmax(0, 1fr); gap: 3.2rem; }
  .sw-terms { grid-template-columns: 11rem 1fr; }
  .sw-wide-fig img { max-height: 28rem; }
  /* the tiles stay 2-up: they live inside the inner pages' 44rem argument column, and three
     across it leaves a four-item set with one orphan on a second row */
}

/* 1360px — nothing new is introduced, the measures simply stop growing. */
@media (min-width: 85rem) {
  .sw-mast-in, .sw-invert-in, .sw-foot-in, .sw-body, .sw-page-head,
  #ord-3, #ord-4, #ord-5, #ord-6, #ord-7, #ord-8, #ord-9 { max-width: 82rem; }
  .sw-band-plate, .sw-band-credit { max-width: 82rem; }
}

/* ------------------------------------------------------------------------- reduced motion */

/* The set-piece LANDS. It is never shortened and never skipped: with motion reduced, the bays
   are simply drawn at their stated fills, which is the state the animation was going to reach
   anyway. The same applies to the per-section reveal — the sections stand where they were
   authored, because the authored state is the finished one. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  body.sw-armed .sw-sheet > section { opacity: 1; transform: none; }
  .sw-bays.is-armed .sw-bay-fill { transform: scaleY(1); }
  .sw-bays.is-armed .sw-bay-held .sw-bay-box { opacity: 1; }
  .sw-bays.is-armed .sw-bay-rail,
  .sw-bays.is-armed .sw-bay-floor { transform: none; }
  .sw-bays.is-running .sw-bay-fill,
  .sw-bays.is-running .sw-bay-held .sw-bay-box,
  .sw-bays.is-running .sw-bay-rail,
  .sw-bays.is-running .sw-bay-floor { animation: none; transform: none; opacity: 1; }
}

/* ------------------------------------------------------------------------------------ print */

@media print {
  body { background: #fff; background-image: none; color: #000; }
  .sw-skip, .sw-seg, .sw-replay { display: none; }
  #ord-2, .sw-foot { background: #fff; background-image: none; color: #000; }
  #ord-2 .sw-shoulder, .sw-invert-lede, .sw-terms dd, .sw-addr, .sw-filed dd { color: #000; }
  .sw-sheet > section { break-inside: avoid; padding: 1rem 0; }
  .sw-ledger-frame { overflow: visible; }
}