/* ============================================================================
   SQUIRE front page: the squire's kit bag.

   The world: a canvas bag with waxed-leather straps, stitched seams and
   luggage tags. Light and warm. WSU green and gold stay as the family tie:
   green for the stitched-on sections and the satchel's tile, gold for the
   buckles and wax seals. Slate from the board is steel, used only for rivets.

   Built on WayneUI 2.0.8, copied from its documented static path
   (wayne-ui/apps/site/public/v2) so the page works offline: tokens, Lato for
   body text, container, skip link and sr-only come from wayne-ui.css. Its
   rules all live inside @layer, so the unlayered rules below re-dress it
   without !important. Display face: Arvo (SIL OFL 1.1), self-hosted in
   assets/fonts, a sturdy slab that reads like a stamped luggage label.

   File map:
      1. fonts, tokens, frame      7. setup steps
     2. header, labels, buttons   8. party: the rail of tags, roster
     3. hero                      9. limits, footer, toast
     4. packing list and bag     10. responsive
     5. doctor patches           11. motion (only with .motion, at the end)
     6. parity field, OS tabs
   ========================================================================== */

/* ---------------------------------------------------- 1. fonts, tokens */

@font-face {
  font-family: "Arvo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/arvo-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Arvo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/arvo-latin-700-normal.woff2") format("woff2");
}

:root {
  --sq-green: #0c5449;
  --sq-green-deep: #073a32;
  --sq-gold: #ffcc33;
  --sq-gold-deep: #d9a514;
  --sq-cream: #f4f1ea;
  --sq-canvas: #efe6d4;
  --sq-canvas-deep: #e4d6bc;
  --sq-paper: #fbf7ee;
  --sq-leather: #8b5a2b;
  --sq-leather-dark: #5a3a22;
  --sq-leather-ink: #3b2614;
  --sq-ink: #2a2118;           /* body on canvas: 13:1 */
  --sq-ink-muted: #5a4a3a;     /* muted on canvas: 6.7:1, on canvas-deep 5.8:1 */
  --sq-slate: #6b7c85;
  --sq-stitch: rgba(139, 90, 43, 0.5);
  --sq-stitch-light: rgba(251, 236, 200, 0.55);
  --sq-term: #1d1813;
  --sq-term-text: #efe6d4;
  --sq-term-dim: #b3a48e;
  --sq-term-ok: #9fe0b4;
  --sq-focus: var(--sq-green);
  --sq-display: "Arvo", "Rockwell", "Roboto Slab", Georgia, serif;
  --sq-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sq-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* A fine canvas weave: two sets of hairlines, warm brown at 4%. */
  --sq-weave:
    repeating-linear-gradient(0deg, rgba(90, 58, 34, 0.045) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(90, 58, 34, 0.04) 0 1px, transparent 1px 4px);
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--sq-ink);
  background-color: var(--sq-canvas);
  background-image: var(--sq-weave);
}

.wsu-container {
  padding-inline: max(16px, var(--wsu-size-gutter));
}

code {
  font-family: var(--wsu-font-family-mono);
  font-size: 0.88em;
  color: inherit;
  background: none;
  overflow-wrap: anywhere;
}

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--sq-focus);
  outline-offset: 2px;
}

.section--green,
.section--leather,
.term,
.os,
.site-footer {
  --sq-focus: var(--sq-gold);
}

/* -------------------------------------------- 2. header, labels, buttons */

.site-header {
  padding-block: var(--wsu-space-4);
  border-bottom: 2px dashed var(--sq-stitch);
}

.site-header .wsu-container {
  display: flex;
  align-items: center;
  gap: var(--wsu-space-6);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: auto;
  text-decoration: none;
}

.brand img {
  border-radius: 8px;
  transition: transform 0.45s var(--sq-ease-spring);
}

.brand:hover img {
  transform: rotate(-10deg) translateY(-2px);
}

.brand__name {
  font-family: var(--sq-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--sq-green);
}

.site-nav {
  display: flex;
  gap: var(--wsu-space-5);
}

.site-nav a {
  position: relative;
  font-weight: var(--wsu-font-weight-bold);
  color: var(--sq-ink);
  text-decoration: none;
  padding-block: 0.3rem;
}

/* A stitch line that sews itself under the link. */
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--sq-leather) 0 6px, transparent 6px 10px);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.35s var(--sq-ease-out);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  clip-path: inset(0 0 0 0);
}

/* The version is a little luggage tag. */
.brand__version,
.label {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.75rem 0.22rem 1.5rem;
  font-family: var(--wsu-font-family-mono);
  font-size: 0.78rem;
  font-weight: var(--wsu-font-weight-bold);
  letter-spacing: 0.04em;
  color: var(--sq-leather-ink);
  background: var(--sq-paper);
  clip-path: polygon(0.75rem 0, 100% 0, 100% 100%, 0.75rem 100%, 0 50%);
  filter: drop-shadow(0 1px 0 rgba(90, 58, 34, 0.35));
}

.brand__version::before,
.label::before {
  content: "";
  position: absolute;
  left: 0.62rem;
  top: 50%;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--sq-canvas-deep);
  box-shadow: 0 0 0 2px var(--sq-gold);
  transform: translateY(-50%);
}

.label {
  margin: 0 0 var(--wsu-space-3);
}

.section--green .label::before { background: var(--sq-green); }
.section--leather .label::before { background: var(--sq-leather-dark); }

.minor {
  margin: 0 0 var(--wsu-space-3);
  font-family: var(--sq-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--sq-green);
}

/* Waxed leather with a stitched edge and a gold buckle. */
.btn-leather {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 48px;
  padding: 0.7rem 1.35rem 0.7rem 1.1rem;
  font: inherit;
  font-weight: var(--wsu-font-weight-bold);
  color: var(--sq-paper);
  text-decoration: none;
  background: linear-gradient(180deg, #9a6533, var(--sq-leather) 55%, #7a4e25);
  border: 0;
  border-radius: 10px;
  outline: 1.5px dashed var(--sq-stitch-light);
  outline-offset: -5px;
  box-shadow: 0 3px 0 var(--sq-leather-dark), 0 10px 18px -10px rgba(59, 38, 20, 0.7);
  cursor: pointer;
  transition: transform 0.2s var(--sq-ease-spring), box-shadow 0.2s;
}

.btn-leather::before {
  content: "";
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 3px;
  background: var(--sq-gold);
  box-shadow: inset 0 0 0 2px var(--sq-gold), inset 0 0 0 4px var(--sq-leather-dark);
}

.btn-leather:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--sq-leather-dark), 0 14px 22px -12px rgba(59, 38, 20, 0.7);
}

.btn-leather:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--sq-leather-dark);
}

.btn-leather:focus-visible {
  outline: 3px solid var(--sq-green);
  outline-offset: 3px;
}

.btn-leather[aria-disabled="true"] {
  cursor: progress;
  filter: saturate(0.6);
}

.btn-leather--wide {
  width: 100%;
}

/* ------------------------------------------------------------------ 3. hero */

.hero {
  overflow-x: clip;
  padding-block: clamp(1.5rem, 4vw, 3.5rem) clamp(3rem, 7vw, 5.5rem);
}

/* Art on the left, words on the right. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 5rem);
}

.hero__copy {
  min-width: 0;
}

.hero__title {
  margin: 0;
  font-family: var(--sq-display);
  font-size: clamp(3.5rem, 10vw, 7.75rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--sq-green);
}

.hero__letters {
  display: inline-flex;
}

.hero__letters span {
  display: inline-block;
}

.hero__tagline {
  margin: var(--wsu-space-4) 0 0;
  font-family: var(--sq-display);
  font-size: clamp(1.3rem, 2.8vw, 1.9rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--sq-leather-ink);
}

/* "the Citadel." wears a leather strap, fastened by a gold buckle. */
.strap {
  position: relative;
  display: inline-block;
  padding-right: 1.1em;
  white-space: nowrap;
}

.strap__band {
  position: absolute;
  left: 0;
  right: 0.5em;
  bottom: -0.2em;
  height: 0.28em;
  border-radius: 0.06em;
  background: var(--sq-leather);
  background-image: repeating-linear-gradient(90deg, var(--sq-stitch-light) 0 0.18em, transparent 0.18em 0.32em);
  background-size: 100% 1.5px;
  background-position: 0 50%;
  background-repeat: no-repeat;
  transform-origin: left;
}

.strap__buckle {
  position: absolute;
  right: 0;
  bottom: -0.38em;
  width: 0.64em;
  height: 0.64em;
  border-radius: 0.12em;
  background: transparent;
  border: 0.12em solid var(--sq-gold);
  box-shadow: 0 0 0 0.04em var(--sq-leather-dark), inset 0 0 0 0.04em var(--sq-leather-dark);
}

.hero__blurb {
  max-width: 35rem;
  margin: var(--wsu-space-6) 0 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--sq-ink-muted);
}

.quickstart {
  display: flex;
  align-items: stretch;
  max-width: 33rem;
  margin-top: var(--wsu-space-6);
  border-radius: 10px;
  background: var(--sq-term);
  box-shadow: 0 14px 26px -18px rgba(59, 38, 20, 0.8);
  overflow: hidden;
}

.quickstart__code {
  flex: 1;
  min-width: 0;
  padding: 0.9rem 1rem;
  font-size: 0.875rem;
  color: var(--sq-term-text);
  white-space: nowrap;
  overflow-x: auto;
  overflow-wrap: normal;
}

.t-dim { color: var(--sq-term-dim); }
.t-ok { color: var(--sq-term-ok); }
.t-gold { color: var(--sq-gold); }

.copy-btn {
  flex: none;
  min-width: 5.25rem;
  padding: 0 1rem;
  border: 0;
  font: inherit;
  font-weight: var(--wsu-font-weight-bold);
  color: var(--sq-leather-ink);
  background: var(--sq-gold);
  cursor: pointer;
  transition: background-color 0.2s;
}

.copy-btn:hover {
  background: #ffd95c;
}

.copy-btn:focus-visible {
  outline: 3px solid var(--sq-leather-ink);
  outline-offset: -5px;
}

.copy-btn.is-copied .copy-btn__label {
  display: inline-block;
  animation: pop 0.4s var(--sq-ease-spring);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wsu-space-5);
  margin: var(--wsu-space-6) 0 0;
}

.hero__link {
  font-weight: var(--wsu-font-weight-bold);
  color: var(--sq-green);
  text-decoration-thickness: 2px;
  text-decoration-style: dashed;
  text-underline-offset: 5px;
}

/* The art: a fixed-ratio box, so nothing below it moves while tags swing. */
.hero__art {
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 1 / 1.04;
  justify-self: center;
  container-type: inline-size;
}

.hero__rail {
  position: absolute;
  left: 2%;
  right: 2%;
  top: 3%;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(180deg, #9a6533, var(--sq-leather) 60%, #774b23);
  box-shadow: 0 6px 12px -8px rgba(59, 38, 20, 0.8);
}

/* Stitches along the rail, and a rivet at each end. */
.hero__rail::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 50%;
  height: 1.5px;
  background: repeating-linear-gradient(90deg, var(--sq-stitch-light) 0 6px, transparent 6px 10px);
  transform: translateY(-50%);
}

.hero__rail::after {
  content: "";
  position: absolute;
  inset: 4px 5px;
  background:
    radial-gradient(circle at 4px 50%, #c9d1d5 0 3px, var(--sq-slate) 3.5px 4px, transparent 4.5px) left / 8px 100% no-repeat,
    radial-gradient(circle at 4px 50%, #c9d1d5 0 3px, var(--sq-slate) 3.5px 4px, transparent 4.5px) right / 8px 100% no-repeat;
}

.hero__tags {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each tag hangs from the rail on a string of its own length. */
.hero__tags li {
  position: absolute;
  left: var(--x);
  top: calc(3% + 16px);
  z-index: 1;
  display: grid;
  justify-items: center;
  transform: translateX(-50%);
  filter: drop-shadow(0 6px 6px rgba(59, 38, 20, 0.28));
}

.hero__tags li::before {
  content: "";
  width: 2px;
  height: var(--len);
  background: var(--sq-leather-dark);
}

.tag {
  position: relative;
  display: block;
  padding: 1.55em 0.75em 0.7em;
  font-family: var(--wsu-font-family-mono);
  font-size: clamp(0.625rem, 2.6cqw, 0.8125rem);
  font-weight: var(--wsu-font-weight-bold);
  white-space: nowrap;
  color: var(--sq-leather-ink);
  background: var(--sq-paper);
  clip-path: polygon(22% 0, 78% 0, 100% 20%, 100% 100%, 0 100%, 0 20%);
  transform: rotate(var(--r));
  transform-origin: 50% 0;
  outline: 1.5px dashed var(--sq-stitch);
  outline-offset: -4px;
}

/* The eyelet: a gold ring the string passes through. */
.tag::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.45em;
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  background: var(--sq-canvas);
  box-shadow: 0 0 0 2px var(--sq-gold), 0 0 0 3px var(--sq-leather-dark);
  transform: translateX(-50%);
}

/* The satchel is a button: press it and the squire packs. The PNG carries its
   own green tile; it is shown as is, never recoloured or redrawn. */
.hero__satchel {
  position: absolute;
  left: 50%;
  top: 37%;
  z-index: 2;
  width: 56%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 20%;
  background: none;
  cursor: pointer;
  transform: translateX(-50%);
  box-shadow: 0 26px 40px -18px rgba(59, 38, 20, 0.6), 0 6px 14px -8px rgba(59, 38, 20, 0.45);
  -webkit-tap-highlight-color: transparent;
}

.hero__satchel:focus-visible {
  outline-offset: 6px;
}

.hero__mark {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 20%;
}

/* The buckle sits at 55%, 59% of the mark. The glint is a ring of light laid
   over it, never a change to the mark itself. */
.buckle-glint {
  position: absolute;
  left: 55.3%;
  top: 58.6%;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 24%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 240, 0.85), rgba(255, 214, 92, 0.4) 55%, transparent 75%);
}

.hero__shadow {
  position: absolute;
  left: 50%;
  top: 92%;
  width: 52%;
  height: 5%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(59, 38, 20, 0.35), transparent);
  transform: translateX(-50%);
}

/* ----------------------------------------------------- 4. sections, list */

.section {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

/* Each section is a panel of the bag, sewn on with a seam at the top. */
.section--canvas {
  border-top: 2px dashed var(--sq-stitch);
}

.section--green {
  color: var(--sq-cream);
  background-color: var(--sq-green);
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 4px);
  box-shadow: inset 0 10px 0 -8px rgba(251, 236, 200, 0.35);
}

.section--leather-light {
  background-color: var(--sq-canvas-deep);
  border-top: 2px dashed var(--sq-stitch);
}

.section--leather {
  color: var(--sq-paper);
  background-color: var(--sq-leather-dark);
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, 0.07), transparent 60%),
    radial-gradient(ellipse at 90% 100%, rgba(0, 0, 0, 0.18), transparent 55%);
}

.section__head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section__head h2 {
  margin: 0;
  font-family: var(--sq-display);
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  font-weight: 700;
  line-height: 1.08;
  color: var(--sq-green);
}

.section--green .section__head h2,
.section--leather .section__head h2 {
  color: var(--sq-paper);
}

.section__head p:not(.label) {
  margin: var(--wsu-space-4) 0 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--sq-ink-muted);
}

.section--green .section__head p:not(.label) { color: rgba(244, 241, 234, 0.9); }
.section--leather .section__head p:not(.label) { color: rgba(251, 247, 238, 0.88); }

/* Terminals: command blocks, warm-dark like oiled leather. */
.term {
  position: relative;
  min-width: 0;
  border-radius: 12px;
  background: var(--sq-term);
  color: var(--sq-term-text);
  box-shadow: 0 24px 40px -28px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}

.term__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0.6rem 1rem;
  font-family: var(--wsu-font-family-mono);
  font-size: 0.75rem;
  color: var(--sq-term-dim);
  border-bottom: 1px dashed rgba(239, 230, 212, 0.18);
}

.term__note {
  margin-left: auto;
  padding: 0 0.5rem;
  border: 1px solid rgba(239, 230, 212, 0.25);
  border-radius: 999px;
}

/* Long lines wrap with a hanging indent instead of scrolling sideways. */
.term__body {
  padding: 0.9rem 1rem 1.1rem;
  font-family: var(--wsu-font-family-mono);
  font-size: 0.78rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* Lines are paragraphs, so the whitespace between them in the HTML never
   shows; inside a line, the columns keep their spacing. */
.term__body p {
  margin: 0;
  white-space: pre-wrap;
  padding-left: 2ch;
  text-indent: -2ch;
}

.term__result {
  margin-top: 0.35rem !important;
  color: var(--sq-gold);
  font-weight: var(--wsu-font-weight-bold);
}

.term__body .is-drift { color: var(--sq-gold); }

/* The packing list: a leather strap down the left, each item a tag tied to it
   by a short string that only crosses the gap. */
.packer {
  overflow-x: clip;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.packlist {
  position: relative;
  display: grid;
  gap: 0.9rem;
  margin: 0;
  padding: 0.5rem 0 0.5rem 62px;
  list-style: none;
}

.packlist::before {
  content: "";
  position: absolute;
  left: 8px;
  top: -6px;
  bottom: -6px;
  width: 24px;
  border-radius: 5px;
  background: linear-gradient(90deg, #7a4e25, var(--sq-leather) 40%, #9a6533);
  box-shadow: 3px 0 8px -4px rgba(59, 38, 20, 0.6);
}

.packlist::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: repeating-linear-gradient(180deg, var(--sq-stitch-light) 0 6px, transparent 6px 10px);
}

.item {
  position: relative;
  filter: drop-shadow(0 6px 8px rgba(59, 38, 20, 0.18));
}

/* The string, from the strap to the tag's eyelet. */
.item::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 50%;
  width: 46px;
  height: 2px;
  background: var(--sq-leather-dark);
}

.item__tag {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  padding: 0.95rem 6.5rem 1rem 2.6rem;
  background: var(--sq-paper);
  clip-path: polygon(1.4rem 0, 100% 0, 100% 100%, 1.4rem 100%, 0 50%);
  outline: 1.5px dashed var(--sq-stitch);
  outline-offset: -5px;
  transform-origin: 0.9rem 50%;
  transition: transform 0.45s var(--sq-ease-spring);
}

.item__tag::before {
  content: "";
  position: absolute;
  left: 0.65rem;
  top: 50%;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: var(--sq-canvas);
  box-shadow: 0 0 0 2px var(--sq-gold), 0 0 0 3px var(--sq-leather-dark);
  transform: translateY(-50%);
}

.item:hover .item__tag {
  transform: rotate(-1.6deg);
}

.item__check {
  position: relative;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.05rem;
  border-radius: 5px;
  border: 2px solid var(--sq-leather-dark);
  background: var(--sq-canvas);
}

.item.is-packed .item__check {
  border-color: var(--sq-green);
  background: var(--sq-green);
}

.item.is-packed .item__check::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid var(--sq-gold);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.item__name {
  display: block;
  font-size: 0.9375rem;
  font-weight: var(--wsu-font-weight-bold);
  color: var(--sq-leather-ink);
}

.item__count {
  margin-left: 0.4em;
  padding: 0 0.45em;
  font-size: 0.75rem;
  color: var(--sq-paper);
  background: var(--sq-leather);
  border-radius: 999px;
}

.item__what {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--sq-ink-muted);
}

/* The PACKED stamp: green ink, a double rule, set a little crooked. */
.stamp {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  padding: 0.2rem 0.5rem;
  font-family: var(--sq-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sq-green);
  border: 3px double var(--sq-green);
  border-radius: 6px;
  transform: translateY(-50%) rotate(-9deg);
  opacity: 0;
}

.item.is-packed .stamp {
  opacity: 0.9;
}

.item.is-edited .item__tag {
  outline-color: var(--sq-gold-deep);
  outline-width: 2px;
}

.item.is-edited .item__name::after {
  content: "edited";
  margin-left: 0.5em;
  padding: 0 0.45em;
  font-size: 0.75rem;
  color: var(--sq-leather-ink);
  background: var(--sq-gold);
  border-radius: 999px;
}

/* The bag: the satchel catches the kit, then wears its own luggage label. */
.bag {
  display: grid;
  gap: var(--wsu-space-4);
  min-width: 0;
}

.bag__stage {
  position: relative;
  justify-self: center;
  width: min(100%, 380px);
  height: 230px;
  perspective: 600px;
}

.bag__satchel {
  position: absolute;
  left: 36%;
  bottom: 0;
  z-index: 2;
  width: 190px;
  aspect-ratio: 1;
  margin-left: -95px;
  transform-origin: 50% 100%;
}

.bag__satchel img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 20%;
  box-shadow: 0 22px 30px -18px rgba(59, 38, 20, 0.7);
}

.bag__label {
  position: absolute;
  right: 0;
  top: 6px;
  z-index: 3;
  display: grid;
  gap: 0.1rem;
  width: 9.6rem;
  padding: 0.55rem 0.6rem 0.55rem 1.7rem;
  white-space: nowrap;
  font-family: var(--sq-display);
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--sq-leather-ink);
  background: var(--sq-paper);
  clip-path: polygon(0.9rem 0, 100% 0, 100% 100%, 0.9rem 100%, 0 50%);
  outline: 1.5px dashed var(--sq-stitch);
  outline-offset: -4px;
  filter: drop-shadow(0 6px 6px rgba(59, 38, 20, 0.3));
  transform: rotate(8deg);
  transform-origin: 0 50%;
}

.bag__label::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--sq-canvas);
  box-shadow: 0 0 0 2px var(--sq-gold);
  transform: translateY(-50%);
}

.bag:not(.is-ready) .bag__label {
  visibility: hidden;
}

.bag__label b {
  display: inline-block;
  min-width: 2.6rem;
  font-family: var(--wsu-font-family-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sq-leather);
}

.bag__count {
  margin: 0;
  text-align: center;
  font-family: var(--sq-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sq-green);
}

.bag__more {
  font-size: 0.9375rem;
}

.bag__more summary {
  width: max-content;
  max-width: 100%;
  font-weight: var(--wsu-font-weight-bold);
  color: var(--sq-green);
  cursor: pointer;
}

.bag__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.act {
  min-height: 44px;
  padding: 0.4rem 0.9rem;
  font-family: var(--wsu-font-family-mono);
  font-size: 0.8125rem;
  font-weight: var(--wsu-font-weight-bold);
  color: var(--sq-leather-ink);
  background: var(--sq-paper);
  border: 1.5px solid var(--sq-leather);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s var(--sq-ease-spring), background-color 0.2s;
}

.act:hover {
  transform: translateY(-2px) rotate(-1deg);
  background: #fff;
}

.act--meddle {
  border-style: dashed;
}

.term--packer .term__body {
  max-height: 15rem;
  overflow: auto;
  overflow-wrap: normal;
}

/* init's output is a table: keep its columns and scroll inside the box. */
.term--packer .term__body p {
  white-space: pre;
  padding-left: 0;
  text-indent: 0;
}

.kit-note {
  max-width: 52rem;
  margin: var(--wsu-space-8) 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--sq-ink-muted);
}

/* A tag on its way into the bag. It travels inside the bag's stage, under
   the satchel, so it slides in behind the satchel's top edge. */
.flyer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  padding: 0.3em 0.7em 0.3em 1.3em;
  font-family: var(--wsu-font-family-mono);
  font-size: 0.75rem;
  font-weight: var(--wsu-font-weight-bold);
  white-space: nowrap;
  color: var(--sq-leather-ink);
  background: var(--sq-paper);
  clip-path: polygon(0.7rem 0, 100% 0, 100% 100%, 0.7rem 100%, 0 50%);
  pointer-events: none;
  filter: drop-shadow(0 6px 6px rgba(59, 38, 20, 0.35));
}

/* ------------------------------------------------------ 5. doctor patches */

.inspect {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}

.rules__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  margin: 0 0 var(--wsu-space-4);
  font-size: 0.9rem;
  color: rgba(244, 241, 234, 0.9);
}

.lvl {
  padding: 0.05rem 0.55rem;
  font-family: var(--wsu-font-family-mono);
  font-size: 0.75rem;
  font-weight: var(--wsu-font-weight-bold);
  border-radius: 999px;
}

.lvl--fail { color: var(--sq-green-deep); background: var(--sq-paper); }
.lvl--warn { color: var(--sq-leather-ink); background: var(--sq-gold); }
.lvl--info { color: var(--sq-paper); box-shadow: inset 0 0 0 2px #c9d1d5; }

.patches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr));
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A sewn-on patch: canvas cloth, a stitched edge, an embroidered roundel. */
.patch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: center;
  padding: 0.55rem 0.8rem 0.55rem 0.55rem;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--sq-ink);
  background: var(--sq-canvas);
  border-radius: 12px;
  outline: 1.5px dashed var(--sq-stitch);
  outline-offset: -4px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
  transition: transform 0.3s var(--sq-ease-spring);
}

.patch:nth-child(3n + 1):hover { transform: rotate(-1.5deg) translateY(-3px); }
.patch:nth-child(3n + 2):hover { transform: rotate(1.2deg) translateY(-3px); }
.patch:nth-child(3n):hover { transform: rotate(-0.8deg) translateY(-3px); }

.patch__no {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  font-family: var(--sq-display);
  font-size: 0.8125rem;
  font-weight: 700;
  border-radius: 50%;
  transition: transform 0.4s var(--sq-ease-spring);
}

.patch:hover .patch__no {
  transform: rotate(-14deg) scale(1.08);
}

.patch--fail .patch__no {
  color: var(--sq-paper);
  background: var(--sq-green);
  box-shadow: inset 0 0 0 2px var(--sq-green), inset 0 0 0 3.5px var(--sq-gold);
}

.patch--warn .patch__no {
  color: var(--sq-leather-ink);
  background: var(--sq-gold);
  box-shadow: inset 0 0 0 2px var(--sq-gold), inset 0 0 0 3.5px var(--sq-leather-dark);
}

.patch--info .patch__no {
  color: var(--sq-leather-ink);
  background: #d5dbde;
  box-shadow: inset 0 0 0 2px #d5dbde, inset 0 0 0 3.5px var(--sq-slate);
}

.rules__more {
  margin: var(--wsu-space-5) 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(244, 241, 234, 0.9);
}

/* ------------------------------------------------- 6. parity field, OS tabs */

.field {
  display: flex;
  align-items: flex-start;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding: 0;
  list-style: none;
}

.field__stop {
  display: grid;
  justify-items: center;
  flex: 0 0 auto;
  width: clamp(7.5rem, 15vw, 11rem);
  text-align: center;
}

.field__tile {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background: var(--sq-paper);
  outline: 1.5px dashed var(--sq-stitch);
  outline-offset: -6px;
  box-shadow: 0 3px 0 var(--sq-canvas-deep), 0 14px 20px -14px rgba(59, 38, 20, 0.6);
  transition: transform 0.35s var(--sq-ease-spring);
}

.field__stop:hover .field__tile {
  transform: translateY(-4px) rotate(-4deg);
}

.field__glyph {
  font-family: var(--sq-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sq-leather);
}

.field__tile--app {
  outline: 0;
  box-shadow: 0 0 0 3px var(--sq-gold), 0 14px 20px -14px rgba(59, 38, 20, 0.6);
}

.field__tile--app img {
  width: 100%;
  height: 100%;
  border-radius: 16px;
}

.field__name {
  margin-top: 0.75rem;
  font-family: var(--sq-display);
  font-weight: 700;
  color: var(--sq-green);
}

.field__role {
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--sq-ink-muted);
}

/* A stitched lane only spans the gap between two tiles, at their centre. */
.field__lane {
  position: relative;
  flex: 1 1 0;
  min-width: 1.5rem;
  height: 80px;
  margin-inline: 0.5rem;
}

.field__lane::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--sq-leather) 0 7px, transparent 7px 12px);
  transform: translateY(-50%);
}

/* The rider: a tiny gold buckle carrying the request down the lane. */
.field__rider {
  position: absolute;
  left: 0;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  border: 2.5px solid var(--sq-gold);
  box-shadow: 0 0 0 1px var(--sq-leather-dark);
  transform: translate(-50%, -50%);
  opacity: 0;
}

.parity {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}

.os {
  min-width: 0;
  border-radius: 12px;
  background: var(--sq-term);
  overflow: hidden;
  box-shadow: 0 24px 40px -28px rgba(0, 0, 0, 0.8);
}

.os__tabs {
  display: flex;
  border-bottom: 1px dashed rgba(239, 230, 212, 0.2);
}

.os__tabs button {
  flex: 1;
  min-height: 48px;
  padding: 0.6rem 1rem;
  font: inherit;
  font-weight: var(--wsu-font-weight-bold);
  color: var(--sq-term-dim);
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}

.os__tabs button[aria-selected="true"] {
  color: var(--sq-paper);
  border-bottom-color: var(--sq-gold);
}

.os__tabs button:focus-visible {
  outline-offset: -4px;
}

.os__panel {
  padding: 1rem 1.1rem 1.2rem;
}

.os__panel + .os__panel {
  border-top: 1px dashed rgba(239, 230, 212, 0.2);
}

[data-os].is-tabbed .os__panel + .os__panel {
  border-top: 0;
}

.os__lead {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  color: var(--sq-term-text);
}

.code {
  margin: 0;
  font-family: var(--wsu-font-family-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--sq-term-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.code code {
  font-size: inherit;
}

.parity__side p {
  margin: var(--wsu-space-3) 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--sq-ink-muted);
}

.verbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.verbs li code {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  font-weight: var(--wsu-font-weight-bold);
  color: var(--sq-leather-ink);
  background: var(--sq-paper);
  border-radius: 6px;
  outline: 1px dashed var(--sq-stitch);
  outline-offset: -3px;
  box-shadow: 0 2px 0 var(--sq-canvas-deep);
  transition: transform 0.25s var(--sq-ease-spring);
}

.verbs li:nth-child(odd):hover code { transform: translateY(-3px) rotate(-4deg); }
.verbs li:nth-child(even):hover code { transform: translateY(-3px) rotate(4deg); }

.parity__fallback {
  padding: 0.8rem 1rem;
  border-left: 4px solid var(--sq-leather);
  background: var(--sq-paper);
  border-radius: 0 8px 8px 0;
}

/* ------------------------------------------------------ 7. setup steps */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wsu-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  padding: 1.3rem 1.3rem 1.4rem;
  background: var(--sq-paper);
  border-radius: 14px;
  outline: 1.5px dashed var(--sq-stitch);
  outline-offset: -6px;
  box-shadow: 0 3px 0 rgba(90, 58, 34, 0.25);
}

.step h3 {
  margin: 0.9rem 0 0.4rem;
  font-family: var(--sq-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--sq-green);
}

.step p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--sq-ink-muted);
}

/* The step number sits in a gold buckle frame, which fastens on hover. */
.step__no {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  font-family: var(--sq-display);
  font-weight: 700;
  color: var(--sq-leather-ink);
  border: 4px solid var(--sq-gold);
  border-radius: 8px;
  box-shadow: 0 0 0 1.5px var(--sq-leather-dark), inset 0 0 0 1.5px var(--sq-leather-dark);
  transition: transform 0.35s var(--sq-ease-spring), background-color 0.2s;
}

.step:hover .step__no {
  background: var(--sq-gold);
  transform: scale(1.1) rotate(-6deg);
}

.exits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  margin: var(--wsu-space-6) 0 0;
  font-size: 0.9375rem;
  color: var(--sq-ink-muted);
}

.exits div {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
}

.exits dt code {
  display: inline-block;
  min-width: 1.8rem;
  padding: 0.05rem 0.4rem;
  text-align: center;
  font-weight: var(--wsu-font-weight-bold);
  color: var(--sq-paper);
  background: var(--sq-leather);
  border-radius: 6px;
}

.exits dd {
  margin: 0;
}

/* ------------------------------------------- 8. party: rail of tags, roster */

/* Six tags on one strap, in riding order. The strap is drawn per tag (so it
   stays continuous when the row wraps); each string runs only in the gap
   between the strap and the tag's eyelet. */
.rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
  padding: 0;
  list-style: none;
}

.rail__tag {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 44px 0.4rem 0;
}

.rail__tag::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 16px;
  background:
    repeating-linear-gradient(90deg, var(--sq-stitch-light) 0 6px, transparent 6px 10px) 0 50% / 100% 1.5px no-repeat,
    linear-gradient(180deg, #9a6533, var(--sq-leather) 60%, #774b23);
}

.rail__tag:first-child::before { border-radius: 5px 0 0 5px; }
.rail__tag:last-child::before { border-radius: 0 5px 5px 0; }

.rail__tag::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 16px;
  width: 2px;
  height: 31px;
  background: var(--sq-leather-dark);
  transform: translateX(-50%);
}

.ptag {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  width: 100%;
  max-width: 10rem;
  padding: 1.7rem 0.6rem 1rem;
  text-align: center;
  background: var(--sq-paper);
  clip-path: polygon(24% 0, 76% 0, 100% 12%, 100% 100%, 0 100%, 0 12%);
  outline: 1.5px dashed var(--sq-stitch);
  outline-offset: -5px;
  filter: drop-shadow(0 8px 8px rgba(59, 38, 20, 0.2));
  transform-origin: 50% 0;
  transition: transform 0.5s var(--sq-ease-spring);
}

.ptag::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.55rem;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--sq-canvas);
  box-shadow: 0 0 0 2px var(--sq-gold), 0 0 0 3px var(--sq-leather-dark);
  transform: translateX(-50%);
}

.rail__tag:nth-child(odd):hover .ptag { transform: rotate(-5deg); }
.rail__tag:nth-child(even):hover .ptag { transform: rotate(5deg); }

.ptag img,
.ptag__tile {
  width: 56px;
  height: 56px;
  border-radius: 14px;
}

/* WayneUI's own reversed mark, on the green of the other marks' tiles. */
.ptag__tile {
  display: grid;
  place-items: center;
  background: #065a4e;
}

.ptag__tile img {
  width: 40px;
  height: 40px;
  border-radius: 0;
}

.ptag__no {
  margin-top: 0.4rem;
  font-family: var(--wsu-font-family-mono);
  font-size: 0.6875rem;
  font-weight: var(--wsu-font-weight-bold);
  color: var(--sq-leather);
}

.ptag b {
  font-family: var(--sq-display);
  font-size: 0.95rem;
  color: var(--sq-green);
}

.ptag > span:last-child {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--sq-ink-muted);
}

.rail__tag--here .ptag {
  outline: 2px solid var(--sq-gold-deep);
}

.here {
  display: block;
  width: max-content;
  margin: 0.35rem auto 0;
  padding: 0.05rem 0.5rem;
  font-family: var(--wsu-font-family-mono);
  font-size: 0.6875rem;
  font-weight: var(--wsu-font-weight-bold);
  color: var(--sq-leather-ink);
  background: var(--sq-gold);
  border-radius: 999px;
}

.roster {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.roster__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.roster__list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem 0.6rem 0.6rem;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--sq-ink-muted);
  background: var(--sq-paper);
  border-radius: 12px;
  outline: 1.5px dashed var(--sq-stitch);
  outline-offset: -4px;
  transition: transform 0.3s var(--sq-ease-spring);
}

.roster__list li:hover {
  transform: translateY(-3px) rotate(-0.8deg);
}

.roster__list img {
  flex: none;
  border-radius: 10px;
}

.roster__list b {
  display: block;
  font-family: var(--sq-display);
  color: var(--sq-green);
}

.roster__list .is-here {
  outline: 2px solid var(--sq-gold-deep);
}

/* ------------------------------------------------ 9. limits, footer, toast */

.dents {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wsu-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A scuff on the leather: a lighter worn patch with a stitched edge. */
.dents li {
  position: relative;
  padding: 1rem 1.1rem 1rem 3.1rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--sq-paper);
  background: rgba(251, 236, 200, 0.08);
  border-radius: 12px;
  outline: 1.5px dashed var(--sq-stitch-light);
  outline-offset: -5px;
}

.dents li::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 1.15rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e9eef0, #c9d1d5 40%, var(--sq-slate) 75%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.site-footer {
  padding-block: var(--wsu-space-10);
  text-align: center;
  color: var(--sq-cream);
  background: var(--sq-green-deep);
  border-top: 6px solid var(--sq-leather);
}

.site-footer__mark {
  border-radius: 10px;
}

.site-footer__joke {
  margin: var(--wsu-space-3) 0 0;
  font-family: var(--sq-display);
  font-size: 1rem;
  color: var(--sq-gold);
}

.site-footer__org {
  margin: var(--wsu-space-2) 0 0;
  font-size: 0.875rem;
  color: rgba(244, 241, 234, 0.88);
}

/* The squire's replies arrive on a luggage tag. */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  z-index: 60;
  max-width: min(30rem, calc(100vw - 32px));
  padding: 0.8rem 1.1rem 0.8rem 2.1rem;
  font-family: var(--sq-display);
  line-height: 1.4;
  color: var(--sq-leather-ink);
  background: var(--sq-paper);
  clip-path: polygon(1rem 0, 100% 0, 100% 100%, 1rem 100%, 0 50%);
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.35));
  transform: translate(-50%, 0);
  visibility: hidden;
  opacity: 0;
}

.toast::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--sq-canvas-deep);
  box-shadow: 0 0 0 2px var(--sq-gold);
  transform: translateY(-50%);
}

.toast.is-on {
  visibility: visible;
  opacity: 1;
}

@keyframes pop {
  0% { transform: scale(0.6); }
  100% { transform: scale(1); }
}

/* ---------------------------------------------------------- 10. responsive */

@media (max-width: 1024px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inspect { grid-template-columns: minmax(0, 1fr); }
  .roster { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__art { width: min(100%, 380px); }
  .packer { grid-template-columns: minmax(0, 1fr); }
  .parity { grid-template-columns: minmax(0, 1fr); }
  .rail { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.25rem; }
  .rail__tag:nth-child(3)::before { border-radius: 0 5px 5px 0; }
  .rail__tag:nth-child(4)::before { border-radius: 5px 0 0 5px; }
}

@media (max-width: 720px) {
  .site-nav { display: none; }

  /* The field turns and runs down the page. */
  .field {
    flex-direction: column;
    align-items: stretch;
  }

  .field__stop {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1rem;
    justify-items: start;
    align-items: center;
    width: auto;
    text-align: left;
  }

  .field__tile { grid-row: span 2; width: 72px; height: 72px; }
  .field__name { margin-top: 0; align-self: end; }
  .field__role { align-self: start; }

  .field__lane {
    flex: none;
    width: 72px;
    height: 2.25rem;
    min-width: 0;
    margin: 0.4rem 0;
  }

  .field__lane::before {
    left: 50%;
    right: auto;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
    background: repeating-linear-gradient(180deg, var(--sq-leather) 0 7px, transparent 7px 12px);
    transform: translateX(-50%);
  }

  .field__rider { left: 50%; top: 0; }

  .dents { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail__tag:nth-child(n)::before { border-radius: 0; }
  .rail__tag:nth-child(odd)::before { border-radius: 5px 0 0 5px; }
  .rail__tag:nth-child(even)::before { border-radius: 0 5px 5px 0; }
  .bag__satchel { width: 160px; margin-left: -80px; left: 32%; }
  .item__tag { padding: 2.4rem 0.9rem 0.95rem 2.4rem; }
  .stamp { top: 0.9rem; right: 0.8rem; transform: rotate(-6deg); font-size: 0.75rem; }
  .packlist { padding-left: 50px; }
  .packlist::before { left: 4px; width: 20px; }
  .packlist::after { left: 13px; }
  .item::before { left: -26px; width: 40px; }
  .quickstart__code { font-size: 0.75rem; padding-inline: 0.75rem; }
  .copy-btn { min-width: 4.25rem; padding: 0 0.75rem; }
  .term__body { font-size: 0.72rem; padding-inline: 0.85rem; }
}

@media (max-width: 360px) {
  .hero__title { font-size: 3.2rem; }
  .bag__label { width: 8.6rem; font-size: 0.6875rem; }
}

/* ------------------------------------------------------------- 11. motion */

/* Everything below only applies with .motion, which the <head> script adds
   when the system has no reduced-motion request. Without it the page is the
   finished state: kit hung, bag packed, strap buckled, every word in place. */
@media (prefers-reduced-motion: no-preference) {

  /* Hero: the satchel hops onto the field and opens wide (a squash, since
     the mark is never redrawn), the letters are packed in one by one, then
     the strap is pulled and the buckle fastens. */
  .motion .hero__satchel {
    animation: arrive 0.95s var(--sq-ease-out) 0.1s both;
  }

  .motion .hero__shadow {
    animation: shadow-land 0.95s var(--sq-ease-out) 0.1s both;
  }

  .motion .hero__rail {
    animation: rail-in 0.6s var(--sq-ease-out) both;
  }

  .motion .hero__letters span {
    animation: pack-letter 0.65s var(--sq-ease-spring) calc(0.5s + var(--i) * 75ms) both;
  }

  .motion .strap__band {
    animation: band 0.7s var(--sq-ease-out) 1.2s both;
  }

  .motion .strap__buckle {
    animation: fasten 0.6s var(--sq-ease-spring) 1.8s both;
  }

  .motion .hero__satchel .buckle-glint {
    animation: glint 0.9s ease-out 1.95s both;
  }

  /* Hero tags: start above the rail, drop onto their strings, then sway. */
  .motion .hero__tags li {
    opacity: 0;
    translate: 0 -40cqw;
    transition:
      translate 0.75s var(--sq-ease-spring) calc(var(--i) * 110ms),
      opacity 0.25s ease calc(var(--i) * 110ms);
  }

  .motion .hero__art.is-hung .hero__tags li {
    opacity: 1;
    translate: 0 0;
  }

  .motion .hero__art.is-hung .tag {
    animation: sway 3.4s ease-in-out calc(var(--i) * -0.8s) infinite alternate;
  }

  .motion .hero__tags li:hover .tag {
    animation: swing-hard 0.9s var(--sq-ease-out);
  }

  /* Packing: each tag slides down behind the satchel's top edge. */
  .motion .hero__art.is-packing .hero__tags li {
    opacity: 0;
    translate: 0 34cqw;
    transition:
      translate 0.5s cubic-bezier(0.55, 0, 0.75, 0.3) calc(var(--i) * 120ms),
      opacity 0.15s ease calc(0.38s + var(--i) * 120ms);
  }

  .motion .hero__art.is-rehang .hero__tags li {
    transition: none;
  }

  /* Once landed, the drop is put away so a hover cannot replay it. */
  .motion .hero__satchel.is-landed {
    animation: none;
  }

  .motion .hero__satchel.is-landed:hover {
    animation: nudge 0.5s ease-in-out;
  }

  .motion .is-squash {
    animation: squash 0.45s var(--sq-ease-spring) !important;
  }

  .motion .is-open {
    animation: open-wide 0.5s var(--sq-ease-spring) both !important;
  }

  .motion .is-glint > .buckle-glint {
    animation: glint 0.9s ease-out both !important;
  }

  /* Packing list: stamps thump down; the bag's own label swings on. */
  .motion .item.is-packed .stamp {
    animation: thump 0.4s var(--sq-ease-spring);
  }

  .motion .item.is-packed .item__check {
    animation: pop 0.35s var(--sq-ease-spring);
  }

  .motion .bag__label {
    transition: opacity 0.3s, transform 0.7s var(--sq-ease-spring);
  }

  .motion .bag:not(.is-ready) .bag__label {
    opacity: 0;
    transform: rotate(70deg) translateY(-20px);
  }

  .motion .bag.is-ready .bag__label {
    animation: label-swing 2.6s ease-in-out 0.7s infinite alternate;
  }


  .motion .term .is-hidden { opacity: 0; }
  .motion .term .is-shown { animation: line-in 0.2s ease-out both; }

  /* Scroll reveals, added by the script so nothing hides without it. */
  .motion .reveal {
    opacity: 0;
    translate: 0 20px;
    transition: opacity 0.6s var(--sq-ease-out), translate 0.7s var(--sq-ease-out);
    transition-delay: calc(var(--i, 0) * 45ms);
  }

  .motion .reveal.is-in {
    opacity: 1;
    translate: 0 0;
  }

  /* List items and party tags slide in like things going into a bag. */
  .motion .item.reveal,
  .motion .rail__tag.reveal {
    translate: 0 -26px;
    transition: opacity 0.4s ease, translate 0.7s var(--sq-ease-spring);
    transition-delay: calc(var(--i, 0) * 110ms);
  }

  .motion .item.reveal.is-in,
  .motion .rail__tag.reveal.is-in {
    translate: 0 0;
  }

  .motion .rail__tag.reveal.is-in .ptag {
    animation: settle 1.4s var(--sq-ease-out) calc(0.3s + var(--i, 0) * 110ms) backwards;
  }

  .motion .field.is-in .field__rider {
    animation: ride 2.6s ease-in-out infinite;
  }

  .motion .field.is-in .field__lane:nth-child(4) .field__rider { animation-delay: 0.85s; }
  .motion .field.is-in .field__lane:nth-child(6) .field__rider { animation-delay: 1.7s; }

  .toast {
    transition: opacity 0.3s, transform 0.45s var(--sq-ease-spring), visibility 0s 0.45s;
    transform: translate(-50%, 18px) rotate(-3deg);
  }

  .toast.is-on {
    transform: translate(-50%, 0) rotate(0);
    transition: opacity 0.3s, transform 0.45s var(--sq-ease-spring), visibility 0s;
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 720px) {
  .motion .field.is-in .field__rider {
    animation-name: ride-down;
  }
}

.hero__satchel { --sq-base: translateX(-50%); }

@keyframes arrive {
  0% { transform: translateX(-50%) translateY(30%) scale(0.6); opacity: 0; }
  45% { transform: translateX(-50%) translateY(-6%) scale(1.04); opacity: 1; }
  62% { transform: translateX(-50%) scale(1.1, 0.88); }
  78% { transform: translateX(-50%) scale(0.96, 1.05); }
  100% { transform: translateX(-50%); }
}

@keyframes shadow-land {
  0% { opacity: 0; transform: translateX(-50%) scale(0.3); }
  62% { opacity: 1; transform: translateX(-50%) scale(1.12); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

@keyframes rail-in {
  from { clip-path: inset(0 50% 0 50%); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes pack-letter {
  0% { transform: translateY(-0.55em) rotate(-8deg); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

@keyframes band {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes fasten {
  0% { transform: translateX(-0.7em) scale(0.4); opacity: 0; }
  60% { transform: translateX(0) scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes glint {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  35% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); }
}

@keyframes sway {
  from { transform: rotate(calc(var(--r) - 2.5deg)); }
  to { transform: rotate(calc(var(--r) + 2.5deg)); }
}

@keyframes swing-hard {
  0% { transform: rotate(var(--r)); }
  20% { transform: rotate(18deg); }
  45% { transform: rotate(-12deg); }
  70% { transform: rotate(6deg); }
  100% { transform: rotate(var(--r)); }
}

@keyframes settle {
  0% { transform: rotate(9deg); }
  30% { transform: rotate(-6deg); }
  55% { transform: rotate(3deg); }
  80% { transform: rotate(-1deg); }
  100% { transform: rotate(0); }
}

@keyframes label-swing {
  from { transform: rotate(5deg); }
  to { transform: rotate(11deg); }
}

@keyframes nudge {
  0%, 100% { transform: translateX(-50%); }
  30% { transform: translateX(-50%) rotate(-3deg); }
  65% { transform: translateX(-50%) rotate(2deg); }
}

@keyframes squash {
  0% { transform: var(--sq-base, none); }
  30% { transform: var(--sq-base, ) scale(1.1, 0.88); }
  60% { transform: var(--sq-base, ) scale(0.95, 1.06); }
  100% { transform: var(--sq-base, none); }
}

/* The bag opens: it leans back and widens at the mouth, ready to be filled. */
@keyframes open-wide {
  0% { transform: var(--sq-base, none); }
  100% { transform: var(--sq-base, ) rotateX(16deg) scale(1.06, 0.97); }
}

@keyframes thump {
  0% { opacity: 0; transform: translateY(-50%) rotate(-9deg) scale(1.5); }
  70% { opacity: 0.9; transform: translateY(-50%) rotate(-9deg) scale(0.94); }
  100% { opacity: 0.9; transform: translateY(-50%) rotate(-9deg) scale(1); }
}

@keyframes line-in {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: none; }
}

@keyframes ride {
  0% { left: 0; opacity: 0; }
  12% { opacity: 1; }
  80% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@keyframes ride-down {
  0% { top: 0; opacity: 0; }
  12% { opacity: 1; }
  80% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 560px) {
  @keyframes thump {
    0% { opacity: 0; transform: rotate(-6deg) scale(1.5); }
    70% { opacity: 0.9; transform: rotate(-6deg) scale(0.94); }
    100% { opacity: 0.9; transform: rotate(-6deg) scale(1); }
  }
}

/* A part's mark and name are one link: the name's link stretches over its
   whole entry, so the mark is clickable too and the entry takes the focus
   ring. No underline on these; the mark brightens (and, with motion allowed,
   lifts) on hover instead. Prose links elsewhere keep their underline. */
.ptag,
ul.roster__list > li { position: relative; }
.ptag .part-link,
ul.roster__list > li .part-link { color: inherit; text-decoration: none; }
.ptag .part-link::after,
ul.roster__list > li .part-link::after { content: ""; position: absolute; inset: 0; }
.ptag .part-link:focus-visible,
ul.roster__list > li .part-link:focus-visible { outline: none; box-shadow: none; }
.ptag:has(.part-link:focus-visible),
ul.roster__list > li:has(.part-link:focus-visible) { outline: 3px solid currentColor; outline-offset: -3px; }
.ptag:has(.part-link:hover) img,
ul.roster__list > li:has(.part-link:hover) img { filter: brightness(1.12) saturate(1.1); }
@media (prefers-reduced-motion: no-preference) {
.ptag img,
ul.roster__list > li img { transition: transform 160ms ease, filter 160ms ease; }
.ptag:has(.part-link:hover) img,
ul.roster__list > li:has(.part-link:hover) img { transform: translateY(-2px); }
}