/* ===========================================================================
   JNCO TRADING LTD - jncotrading.online
   Bone and indigo on a blueprint grid. Bands are returns, not services.
   Load order: reset, tokens, texture, masthead, tab strip, bands, heads,
   strips, returns rail, sorting stream, sheets, figures, footer, motion.
   Every transition and every animation is declared inside
   @media (prefers-reduced-motion: no-preference). Nothing moves by default.
   =========================================================================== */

/* --- 1. reset: a sanitize-style subset, element normalisation only --------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; }
h1, h2, h3, h4, p, dl, dd, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; }
svg { display: block; }
a { color: inherit; }
abbr[title] { text-decoration: underline dotted; }
button, input, select { font: inherit; color: inherit; margin: 0; }
button { -webkit-appearance: button; appearance: button; }
[hidden] { display: none; }

/* --- 2. tokens ------------------------------------------------------------ */
:root {
  --jn-bone: #f4f3ef;
  --jn-ink: #1e2338;
  --jn-indigo: #36488e;
  --jn-bronze: #7d6134;
  --jn-paper: #ffffff;

  --jn-ink-78: rgba(30, 35, 56, .78);
  --jn-ink-62: rgba(30, 35, 56, .62);
  --jn-ink-42: rgba(30, 35, 56, .42);
  --jn-rule: rgba(30, 35, 56, .9);
  --jn-rule-mid: rgba(30, 35, 56, .3);
  --jn-rule-hair: rgba(30, 35, 56, .14);
  --jn-grid-minor: rgba(54, 72, 142, .07);
  --jn-grid-major: rgba(54, 72, 142, .15);
  --jn-grid-faint: rgba(54, 72, 142, .045);
  --jn-grid-faint-major: rgba(54, 72, 142, .09);
  --jn-indigo-wash: rgba(54, 72, 142, .07);
  --jn-indigo-edge: rgba(54, 72, 142, .32);
  --jn-bronze-wash: rgba(125, 97, 52, .11);
  --jn-bronze-edge: rgba(125, 97, 52, .45);
  --jn-bone-78: rgba(244, 243, 239, .78);

  --jn-slab: "Zilla Slab", Rockwell, Georgia, "Times New Roman", serif;
  --jn-sans: "Signika", "Segoe UI", Tahoma, system-ui, sans-serif;

  --jn-step: 24px;
  --jn-measure: 62rem;
  --jn-gutter: clamp(1rem, 5vw, 3.5rem);
  --jn-rail-w: clamp(1.9rem, 7vw, 3.4rem);

  color-scheme: light;
}

/* --- 3. page shell and blueprint texture ---------------------------------- */
body {
  background-color: var(--jn-bone);
  background-image:
    repeating-linear-gradient(to right, var(--jn-grid-minor) 0 1px, transparent 1px var(--jn-step)),
    repeating-linear-gradient(to bottom, var(--jn-grid-minor) 0 1px, transparent 1px var(--jn-step)),
    repeating-linear-gradient(to right, var(--jn-grid-major) 0 1px, transparent 1px calc(var(--jn-step) * 5)),
    repeating-linear-gradient(to bottom, var(--jn-grid-major) 0 1px, transparent 1px calc(var(--jn-step) * 5));
  background-attachment: fixed;
  color: var(--jn-ink);
  font-family: var(--jn-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.62;
  overflow-wrap: break-word;
}

.jn-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9;
  background: var(--jn-ink);
  color: var(--jn-bone);
  padding: .55rem 1rem;
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.jn-skip:focus { left: 0; }

/* --- 4. masthead with the register facts set into the rule ---------------- */
.jn-mast {
  background: var(--jn-paper);
  border-bottom: 3px solid var(--jn-rule);
}
.jn-mast__top {
  max-width: var(--jn-measure);
  margin: 0 auto;
  padding: 1.35rem var(--jn-gutter) .9rem;
  display: flex;
  align-items: flex-start;
  gap: .9rem;
}
.jn-mark {
  width: 2.6rem;
  height: 2.6rem;
  flex: 0 0 auto;
  color: var(--jn-indigo);
}
.jn-mast__kicker {
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--jn-bronze);
  line-height: 1.4;
}
.jn-mast__name {
  font-family: var(--jn-slab);
  font-weight: 600;
  font-size: clamp(1.4rem, 7.2vw, 2.6rem);
  line-height: 1.04;
  letter-spacing: -.012em;
  margin-top: .25rem;
}
.jn-mast__name a { text-decoration: none; }
.jn-mast__where {
  font-size: .86rem;
  color: var(--jn-ink-62);
  margin-top: .35rem;
  max-width: 54ch;
}
.jn-mast__ruleline {
  height: 3px;
  background: var(--jn-indigo);
  max-width: var(--jn-measure);
  margin: 0 auto;
}

.jn-rulestrip {
  border-bottom: 1px solid var(--jn-rule-hair);
  background: var(--jn-indigo-wash);
}
.jn-rulestrip__inner {
  max-width: var(--jn-measure);
  margin: 0 auto;
  padding: .4rem var(--jn-gutter);
  display: flex;
  flex-wrap: wrap;
  gap: .15rem 1.1rem;
  font-size: .705rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--jn-ink-62);
}
.jn-rulestrip__inner > div { display: flex; gap: .4rem; white-space: nowrap; }
.jn-rulestrip dt { color: var(--jn-indigo); }
.jn-rulestrip dd { margin: 0; }

/* --- 5. tab strip: one mechanism at every width --------------------------- */
.jn-tabs {
  background: var(--jn-paper);
  border-top: 1px solid var(--jn-rule-hair);
}
.jn-tabs__scroll {
  max-width: var(--jn-measure);
  margin: 0 auto;
  padding: 0 var(--jn-gutter);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.jn-tabs__list {
  display: flex;
  list-style: none;
  min-width: max-content;
  gap: 0;
}
.jn-tabs__item { min-width: 0; }
.jn-tabs__tab {
  display: block;
  padding: .62rem .82rem .56rem;
  font-size: .79rem;
  letter-spacing: .085em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--jn-ink-62);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.jn-tabs__tab:hover { color: var(--jn-ink); background: var(--jn-indigo-wash); }
.jn-tabs__tab[aria-current="page"] {
  color: var(--jn-ink);
  border-bottom-color: var(--jn-indigo);
  background: var(--jn-indigo-wash);
}
jn-tab-strip { display: block; }
jn-tab-strip[data-roving="on"] .jn-tabs__tab:focus { background: var(--jn-bronze-wash); }

/* --- 6. bands: full width, measured inside -------------------------------- */
.jn-band { border-bottom: 1px solid var(--jn-rule-hair); }
.jn-band__inner {
  max-width: var(--jn-measure);
  margin: 0 auto;
  padding: 2.1rem var(--jn-gutter) 2.3rem;
}
.jn-band__inner--flush { padding-top: 0; padding-bottom: 0; }
.jn-band--paper {
  background-color: var(--jn-paper);
  background-image:
    repeating-linear-gradient(to right, var(--jn-grid-faint) 0 1px, transparent 1px var(--jn-step)),
    repeating-linear-gradient(to bottom, var(--jn-grid-faint) 0 1px, transparent 1px var(--jn-step)),
    repeating-linear-gradient(to right, var(--jn-grid-faint-major) 0 1px, transparent 1px calc(var(--jn-step) * 5)),
    repeating-linear-gradient(to bottom, var(--jn-grid-faint-major) 0 1px, transparent 1px calc(var(--jn-step) * 5));
  background-attachment: fixed;
}
.jn-band--wash { background: var(--jn-indigo-wash); }
.jn-band--ink {
  background: var(--jn-ink);
  color: var(--jn-bone);
  border-bottom-color: var(--jn-ink);
}
.jn-band--ink .jn-lede { color: var(--jn-bone-78); }
.jn-band--ink .jn-label { color: rgba(244, 243, 239, .62); }
.jn-band--ink .jn-head__no { color: rgba(244, 243, 239, .5); }
.jn-band--ink a { color: var(--jn-bone); }
.jn-band--open { border-bottom: 3px solid var(--jn-rule); }

/* --- 7. hanging-indent heads --------------------------------------------- */
.jn-head {
  font-family: var(--jn-slab);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.008em;
  font-size: clamp(1.18rem, 4.6vw, 1.72rem);
  padding-left: 4.6ch;
  text-indent: -4.6ch;
  max-width: 36ch;
}
.jn-head__no {
  font-family: var(--jn-sans);
  font-weight: 400;
  font-size: .6em;
  letter-spacing: .1em;
  color: var(--jn-indigo);
  padding-right: 1.1ch;
}
.jn-head--sub {
  font-size: clamp(1.02rem, 3.6vw, 1.22rem);
  padding-left: 3.4ch;
  text-indent: -3.4ch;
  max-width: 42ch;
  margin-top: 1.6rem;
}
.jn-head--plain { padding-left: 0; text-indent: 0; }
.jn-window {
  display: block;
  font-family: var(--jn-sans);
  font-weight: 400;
  font-size: .76rem;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--jn-bronze);
  text-indent: 0;
  margin-top: .5rem;
  line-height: 1.45;
}
.jn-band--ink .jn-window { color: rgba(244, 243, 239, .7); }

.jn-label {
  font-size: .705rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--jn-bronze);
}
.jn-lede {
  margin-top: .95rem;
  max-width: 62ch;
  color: var(--jn-ink-78);
}
.jn-lede + .jn-lede { margin-top: .8rem; }
.jn-lede--wide { max-width: 72ch; }
.jn-note {
  margin-top: 1.1rem;
  max-width: 64ch;
  font-size: .845rem;
  line-height: 1.55;
  color: var(--jn-ink-62);
  border-left: 3px solid var(--jn-bronze-edge);
  padding: .3rem 0 .3rem .85rem;
}
.jn-link {
  text-decoration: none;
  border-bottom: 1px solid var(--jn-indigo-edge);
  color: var(--jn-indigo);
}
.jn-link:hover { border-bottom-color: var(--jn-indigo); background: var(--jn-indigo-wash); }
.jn-band--ink .jn-link { border-bottom-color: rgba(244, 243, 239, .5); }

/* --- 8. strips: the component ------------------------------------------- */
.jn-strips {
  margin-top: 1.5rem;
  border-top: 1px solid var(--jn-rule-mid);
}
.jn-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: .1rem .9rem;
  padding: .62rem 0 .68rem;
  border-bottom: 1px solid var(--jn-rule-hair);
}
.jn-strip dt {
  font-size: .685rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--jn-bronze);
  line-height: 1.5;
}
.jn-strip dd {
  margin: 0;
  font-size: .94rem;
  line-height: 1.55;
  color: var(--jn-ink-78);
}
.jn-band--ink .jn-strip dt { color: rgba(188, 156, 100, .95); }
.jn-band--ink .jn-strip dd { color: rgba(244, 243, 239, .86); }
.jn-band--ink .jn-strips,
.jn-band--ink .jn-strip { border-color: rgba(244, 243, 239, .22); }
.jn-strip:hover { background: var(--jn-bronze-wash); }
.jn-band--ink .jn-strip:hover { background: rgba(244, 243, 239, .07); }
.jn-strip--lane {
  grid-template-columns: 1fr;
  border-left: 4px solid var(--jn-bronze-edge);
  padding-left: .8rem;
}
.jn-strip--two { border-left-color: var(--jn-indigo-edge); }
.jn-strip--three { border-left-color: var(--jn-rule-mid); }
.jn-strip--index dd { font-size: .89rem; }

/* --- 9. returns rail: the only scroll-driven thing on the site ----------- */
.jn-return { display: grid; grid-template-columns: var(--jn-rail-w) 1fr; }
.jn-rail { position: relative; }
.jn-rail__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - .5px);
  width: 1px;
  background: var(--jn-rule-hair);
}
.jn-rail__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 1.5px);
  width: 3px;
  background: var(--jn-indigo);
  transform-origin: top center;
  transform: scaleY(1);
}
.jn-rail__dot {
  position: absolute;
  top: 2.3rem;
  left: calc(50% - .42rem);
  width: .84rem;
  height: .84rem;
  background: var(--jn-bone);
  border: 3px solid var(--jn-indigo);
  border-radius: 50%;
}
.jn-band--paper .jn-rail__dot { background: var(--jn-paper); }
.jn-return__body { padding: 2rem 0 2.2rem; min-width: 0; }
.jn-return--last .jn-rail__line,
.jn-return--last .jn-rail__fill { bottom: 2.8rem; }

/* --- 10. the sorting stream --------------------------------------------- */
.jn-stream {
  margin-top: 1.5rem;
  max-width: 48rem;
  background: var(--jn-paper);
  border: 1px solid var(--jn-rule-mid);
  padding: .5rem;
}
.jn-stream svg { width: 100%; height: auto; }
.jn-stream__cap {
  margin-top: .55rem;
  font-size: .775rem;
  line-height: 1.5;
  color: var(--jn-ink-62);
  padding: 0 .35rem .25rem;
  max-width: 68ch;
}
.jn-sv-rule { fill: none; stroke: var(--jn-rule-mid); stroke-width: 1; }
.jn-sv-hair { fill: none; stroke: var(--jn-rule-hair); stroke-width: 1; }
.jn-sv-lane { fill: var(--jn-indigo-wash); stroke: var(--jn-rule-hair); stroke-width: 1; }
.jn-sv-floor { fill: none; stroke: var(--jn-rule); stroke-width: 2; }
.jn-sv-intake { fill: var(--jn-bronze-wash); stroke: var(--jn-bronze-edge); stroke-width: 1.3; }
/* The drawings scale with their container, so the type inside them is set per
   breakpoint: a figure 335px wide on a phone and 750px wide on a desktop cannot
   share one font-size and stay legible at both. */
.jn-sv-text {
  fill: var(--jn-ink-62);
  font-family: var(--jn-sans);
  font-size: 19px;
  letter-spacing: 1.3px;
}
.jn-sv-text--lane { fill: var(--jn-indigo); font-size: 22px; letter-spacing: 1.3px; }
.jn-sv-text--small { font-size: 16px; letter-spacing: 1px; fill: var(--jn-ink-42); }
.jn-sv-tick { fill: none; stroke: var(--jn-bronze-edge); stroke-width: 1.6; }
.jn-sv-tickfill { fill: var(--jn-bronze); }
.jn-blk { fill: var(--jn-paper); stroke: var(--jn-bronze-edge); stroke-width: 1.4; }
.jn-blk__bar { fill: var(--jn-bronze); }
.jn-blkgrp--two .jn-blk { stroke: var(--jn-indigo-edge); }
.jn-blkgrp--two .jn-blk__bar { fill: var(--jn-indigo); }
.jn-blkgrp--three .jn-blk { stroke: var(--jn-rule-mid); }
.jn-blkgrp--three .jn-blk__bar { fill: var(--jn-rule-mid); }
.jn-blkgrp { opacity: 1; }
/* intake-to-lane deltas: each block is drawn where it lands, the animation
   plays it in from the intake slot, so the sorted stacks are the resting state. */
.jn-b01 { --jn-dx: 165px; --jn-dy: -260px; --jn-del: .02s; }
.jn-b02 { --jn-dx: 165px; --jn-dy: -234px; --jn-del: .26s; }
.jn-b03 { --jn-dx: 165px; --jn-dy: -208px; --jn-del: .50s; }
.jn-b04 { --jn-dx: 165px; --jn-dy: -182px; --jn-del: .74s; }
.jn-b05 { --jn-dx: 0px; --jn-dy: -260px; --jn-del: .10s; }
.jn-b06 { --jn-dx: 0px; --jn-dy: -234px; --jn-del: .34s; }
.jn-b07 { --jn-dx: 0px; --jn-dy: -208px; --jn-del: .58s; }
.jn-b08 { --jn-dx: 0px; --jn-dy: -182px; --jn-del: .82s; }
.jn-b09 { --jn-dx: 0px; --jn-dy: -156px; --jn-del: 1.06s; }
.jn-b10 { --jn-dx: -165px; --jn-dy: -260px; --jn-del: .18s; }
.jn-b11 { --jn-dx: -165px; --jn-dy: -234px; --jn-del: .42s; }
.jn-b12 { --jn-dx: -165px; --jn-dy: -208px; --jn-del: .66s; }
.jn-b13 { --jn-dx: -165px; --jn-dy: -182px; --jn-del: .90s; }
.jn-b14 { --jn-dx: -165px; --jn-dy: -156px; --jn-del: 1.14s; }

/* --- 11. the two sheets ------------------------------------------------- */
jn-sheet { display: block; margin-top: 1.5rem; }
.jn-sheet {
  background: var(--jn-paper);
  border: 1px solid var(--jn-rule-mid);
  border-top: 3px solid var(--jn-indigo);
}
.jn-sheet__head {
  padding: .7rem .95rem .6rem;
  border-bottom: 1px solid var(--jn-rule-hair);
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .8rem;
  align-items: baseline;
}
.jn-sheet__ref {
  font-size: .685rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--jn-bronze);
}
.jn-sheet__title { font-family: var(--jn-slab); font-weight: 600; font-size: 1.02rem; }
.jn-sheet__form { padding: .95rem; display: grid; gap: .85rem; }
.jn-field { display: grid; gap: .25rem; min-width: 0; }
.jn-field > span {
  font-size: .715rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--jn-ink-62);
}
.jn-field input {
  width: 100%;
  padding: .45rem .55rem;
  background: var(--jn-bone);
  border: 1px solid var(--jn-rule-mid);
  border-radius: 0;
  font-size: .95rem;
}
.jn-field input:focus {
  border-color: var(--jn-indigo);
  background: var(--jn-paper);
  outline: 3px solid var(--jn-bronze);
  outline-offset: 1px;
}
.jn-field small { font-size: .74rem; color: var(--jn-ink-42); line-height: 1.4; }
.jn-fieldset {
  border: 1px solid var(--jn-rule-hair);
  padding: .6rem .7rem .75rem;
  display: grid;
  gap: .55rem;
  min-width: 0;
}
.jn-fieldset legend {
  font-size: .705rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--jn-bronze);
  padding: 0 .35rem;
}
.jn-prio { display: flex; flex-wrap: wrap; gap: .4rem; }
.jn-prio label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .6rem;
  border: 1px solid var(--jn-rule-mid);
  font-size: .78rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
}
.jn-prio input { accent-color: var(--jn-indigo); }
.jn-prio label:hover { background: var(--jn-indigo-wash); }
.jn-prio label:has(input:checked) {
  border-color: var(--jn-indigo);
  background: var(--jn-indigo-wash);
  color: var(--jn-indigo);
}
.jn-prio label:has(input:focus-visible) { outline: 3px solid var(--jn-bronze); outline-offset: 2px; }
.jn-sheet__go {
  justify-self: start;
  padding: .5rem 1.05rem;
  background: var(--jn-ink);
  color: var(--jn-bone);
  border: 1px solid var(--jn-ink);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.jn-sheet__go:hover { background: var(--jn-indigo); border-color: var(--jn-indigo); }
.jn-work {
  border-top: 1px solid var(--jn-rule-mid);
  background: var(--jn-bone);
  padding: .85rem .95rem 1rem;
}
.jn-work__label {
  font-size: .685rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--jn-bronze);
  margin-bottom: .45rem;
}
.jn-work__list { list-style: none; counter-reset: jnstep; }
.jn-work__list li {
  counter-increment: jnstep;
  display: grid;
  grid-template-columns: 1.9rem 1fr;
  gap: .5rem;
  padding: .32rem 0;
  border-bottom: 1px dotted var(--jn-rule-hair);
  font-size: .875rem;
  line-height: 1.5;
}
.jn-work__list li::before {
  content: counter(jnstep, decimal-leading-zero);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--jn-bronze);
  padding-top: .18rem;
}
.jn-work__out {
  margin-top: .8rem;
  padding: .6rem .75rem;
  background: var(--jn-paper);
  border: 1px solid var(--jn-indigo-edge);
  border-left-width: 4px;
}
.jn-work__out b {
  font-family: var(--jn-slab);
  font-weight: 600;
  font-size: 1.05rem;
  display: block;
  line-height: 1.25;
}
.jn-work__out span { font-size: .84rem; color: var(--jn-ink-62); display: block; margin-top: .2rem; }
.jn-work__guide { margin-top: .75rem; font-size: .775rem; line-height: 1.5; color: var(--jn-ink-62); }
jn-sheet[data-state="waiting"] .jn-work__list li { color: var(--jn-ink-62); }
jn-sheet[data-state="waiting"] .jn-work__label::after { content: " / nothing to add yet"; letter-spacing: .06em; }
jn-sheet[data-state="printed"] .jn-work { border-top-color: var(--jn-indigo); }
jn-sheet[data-state="printed"] .jn-work__label::after { content: " / from the figures entered"; letter-spacing: .06em; }
.jn-sheet__fallback { padding: .95rem; font-size: .9rem; color: var(--jn-ink-78); }
.jn-sheet__fallback p + p { margin-top: .7rem; }

/* --- 12. drawn figures -------------------------------------------------- */
.jn-figure {
  margin-top: 1.5rem;
  max-width: 46rem;
  background: var(--jn-paper);
  border: 1px solid var(--jn-rule-mid);
  padding: .55rem .55rem .35rem;
}
.jn-figure svg { width: 100%; height: auto; }
.jn-figure figcaption {
  font-size: .775rem;
  line-height: 1.5;
  color: var(--jn-ink-62);
  padding: .5rem .35rem .3rem;
  border-top: 1px solid var(--jn-rule-hair);
  margin-top: .4rem;
  max-width: 68ch;
}
.jn-cols { display: grid; gap: 1.4rem; margin-top: 1.4rem; }

/* --- 13. footer -------------------------------------------------------- */
.jn-foot {
  background: var(--jn-ink);
  color: var(--jn-bone-78);
  border-top: 3px solid var(--jn-bronze);
}
.jn-foot__inner {
  max-width: var(--jn-measure);
  margin: 0 auto;
  padding: 1.9rem var(--jn-gutter) 2.2rem;
  display: grid;
  gap: 1.5rem;
}
.jn-foot__name {
  font-family: var(--jn-slab);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: .02em;
  color: var(--jn-bone);
}
.jn-foot address { font-style: normal; margin-top: .6rem; font-size: .9rem; line-height: 1.65; }
.jn-foot__reg { margin-top: .75rem; font-size: .83rem; line-height: 1.7; }
.jn-foot__reg a {
  color: var(--jn-bone);
  border-bottom: 1px solid rgba(244, 243, 239, .4);
  text-decoration: none;
}
.jn-foot__reg a:hover { border-bottom-color: var(--jn-bone); }
.jn-foot__aside { font-size: .83rem; line-height: 1.65; }
.jn-foot__aside dt {
  color: rgba(188, 156, 100, .95);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .685rem;
}
.jn-foot__aside dd { margin: 0 0 .5rem; }
.jn-foot__nav { font-size: .83rem; }
.jn-foot__nav ul { list-style: none; columns: 2; column-gap: 1.2rem; }
.jn-foot__nav li { padding: .12rem 0; break-inside: avoid; }
.jn-foot__nav a {
  color: var(--jn-bone-78);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.jn-foot__nav a:hover { color: var(--jn-bone); border-bottom-color: var(--jn-bronze); }

/* --- 14. focus ---------------------------------------------------------- */
:focus-visible { outline: 3px solid var(--jn-bronze); outline-offset: 2px; }

/* --- 15. wider viewports ------------------------------------------------ */
@media (min-width: 40rem) {
  .jn-strip { grid-template-columns: 11rem 1fr; align-items: baseline; }
  .jn-strip dt { padding-top: .14rem; }
  .jn-strip--lane { grid-template-columns: 9rem 1fr; }
  .jn-sheet__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jn-fieldset { grid-column: 1 / -1; }
  .jn-prio { gap: .5rem; }
  .jn-sheet__go { grid-column: 1 / -1; }
  .jn-mast__top { gap: 1.2rem; padding-top: 1.7rem; }
  .jn-cols--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
  .jn-sv-text { font-size: 13px; }
  .jn-sv-text--lane { font-size: 18px; }
  .jn-sv-text--small { font-size: 11px; }
}
@media (min-width: 64rem) {
  :root { --jn-step: 26px; }
  .jn-band__inner { padding: 2.7rem var(--jn-gutter) 3rem; }
  .jn-return__body { padding: 2.6rem 0 2.8rem; }
  .jn-foot__inner { grid-template-columns: 1.35fr .85fr .8fr; gap: 2rem; }
  .jn-fieldset { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
  .jn-fieldset legend { grid-column: 1 / -1; }
  .jn-prio { grid-column: 1 / -1; }
  .jn-work__list li { grid-template-columns: 2.2rem 1fr; font-size: .9rem; }
  .jn-lede { max-width: 68ch; }
  .jn-note { max-width: 70ch; }
  .jn-sv-text { font-size: 12px; }
  .jn-sv-text--lane { font-size: 16px; }
  .jn-sv-text--small { font-size: 10.5px; }
}

/* --- 16. keyframes ----------------------------------------------------- */
@keyframes jn-fall {
  0% { transform: translate(var(--jn-dx), var(--jn-dy)); opacity: 0; }
  12% { opacity: 1; }
  42% { transform: translate(0, var(--jn-dy)); }
  100% { transform: translate(0, 0); }
}
@keyframes jn-rail-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
@keyframes jn-dot-ink {
  from { transform: scale(.35); border-color: var(--jn-rule-mid); }
  to { transform: scale(1); border-color: var(--jn-indigo); }
}
@keyframes jn-rule-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes jn-print-in {
  from { opacity: 0; transform: translateY(-.3rem); }
  to { opacity: 1; transform: none; }
}

/* --- 17. motion, declared only where motion is wanted ----------------- */
@media (prefers-reduced-motion: no-preference) {
  .jn-tabs__tab { transition: color .18s linear, background-color .18s linear, border-bottom-color .18s linear; }
  .jn-link { transition: border-bottom-color .16s linear, background-color .16s linear; }
  .jn-strip { transition: background-color .2s linear; }
  .jn-field input { transition: border-color .15s linear, background-color .15s linear; }
  .jn-prio label { transition: border-color .15s linear, background-color .15s linear, color .15s linear; }
  .jn-sheet__go { transition: background-color .17s linear, border-color .17s linear; }
  .jn-foot__nav a { transition: color .16s linear, border-bottom-color .16s linear; }
  .jn-foot__reg a { transition: border-bottom-color .16s linear; }
  .jn-rail__dot { transition: border-color .25s linear; }
  .jn-figure { transition: border-color .2s linear; }
  .jn-figure:hover { border-color: var(--jn-indigo-edge); }
  .jn-skip { transition: left .12s linear; }

  .jn-blkgrp {
    animation: jn-fall 1.15s cubic-bezier(.33, .02, .35, 1) both;
    animation-delay: var(--jn-del, 0s);
  }
  .jn-mast__ruleline {
    transform-origin: left center;
    animation: jn-rule-draw .7s cubic-bezier(.2, .7, .3, 1) both;
  }
  .jn-work__out { animation: jn-print-in .3s linear both; }

  /* the reveal: a scroll timeline on the rail, and nowhere else. No script
     reads scroll position anywhere on this site. */
  @supports (animation-timeline: view()) {
    .jn-rail__fill {
      animation: jn-rail-grow linear both;
      animation-timeline: view(block);
      animation-range: entry 8% cover 42%;
    }
    .jn-rail__dot {
      animation: jn-dot-ink linear both;
      animation-timeline: view(block);
      animation-range: entry 18% entry 92%;
    }
  }
}

/* --- 18. reduced motion: the set-piece lands, it does not hurry ------- */
@media (prefers-reduced-motion: reduce) {
  .jn-blkgrp { animation: none; transform: none; opacity: 1; }
  .jn-rail__fill { animation: none; transform: scaleY(1); }
  .jn-rail__dot { animation: none; transform: none; border-color: var(--jn-indigo); }
  .jn-mast__ruleline { animation: none; transform: none; }
  .jn-work__out { animation: none; opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* --- 19. dark scheme: the same two inks, swapped ---------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --jn-bone: #1e2338;
    --jn-ink: #f4f3ef;
    --jn-paper: rgba(244, 243, 239, .05);
    --jn-ink-78: rgba(244, 243, 239, .8);
    --jn-ink-62: rgba(244, 243, 239, .64);
    --jn-ink-42: rgba(244, 243, 239, .45);
    --jn-rule: rgba(244, 243, 239, .72);
    --jn-rule-mid: rgba(244, 243, 239, .3);
    --jn-rule-hair: rgba(244, 243, 239, .16);
    --jn-grid-minor: rgba(244, 243, 239, .05);
    --jn-grid-major: rgba(244, 243, 239, .1);
    --jn-grid-faint: rgba(244, 243, 239, .04);
    --jn-grid-faint-major: rgba(244, 243, 239, .08);
    --jn-indigo: rgba(167, 183, 235, .95);
    --jn-indigo-wash: rgba(54, 72, 142, .32);
    --jn-indigo-edge: rgba(167, 183, 235, .55);
    --jn-bronze: rgba(201, 170, 112, .95);
    --jn-bronze-wash: rgba(125, 97, 52, .26);
    --jn-bronze-edge: rgba(201, 170, 112, .55);
    --jn-bone-78: rgba(244, 243, 239, .8);
    color-scheme: dark;
  }
  .jn-band--ink { background: rgba(244, 243, 239, .07); color: var(--jn-ink); }
  .jn-band--ink .jn-lede,
  .jn-band--ink .jn-strip dd { color: var(--jn-ink-78); }
  .jn-band--ink .jn-strip dt,
  .jn-foot__aside dt { color: var(--jn-bronze); }
  .jn-band--ink .jn-window { color: var(--jn-bronze); }
  .jn-foot { background: rgba(244, 243, 239, .07); color: var(--jn-ink-78); }
  .jn-foot__name,
  .jn-foot__reg a { color: var(--jn-ink); }
  .jn-blk { fill: rgba(30, 35, 56, .55); }
  .jn-work { background: rgba(30, 35, 56, .5); }
}

/* --- 20. print: the office keeps paper too --------------------------- */
@media print {
  body { background: none; color: #1e2338; font-size: 10.5pt; }
  .jn-tabs,
  .jn-skip,
  .jn-sheet__form,
  .jn-foot__nav { display: none; }
  .jn-band,
  .jn-mast { border-color: #1e2338; }
  .jn-band--ink,
  .jn-foot { background: none; color: #1e2338; }
  .jn-band--ink .jn-lede,
  .jn-band--ink .jn-strip dd { color: #1e2338; }
  .jn-return { grid-template-columns: 1.4rem 1fr; }
  .jn-band__inner { padding: 1rem 0; }
  .jn-figure,
  .jn-stream,
  .jn-return { break-inside: avoid; }
}