/* Weave 100 hub route styles. Links after tokens.css, uses only shared tokens
   plus this file's own Indigo Ledger accents, and is loaded by exactly one
   page: /100/.

   PATTERNS ARE PORTED, NOT REFERENCED. The vitrine, hallmark, book render,
   shelf/stamp furniture, print bands, rights card and torn seams below are
   ported from css/sprint.css rather than reused from it: sprint.css is route
   scoped to /sprint/ and is not loaded on this page, so every rule this page's
   markup needs is restated here. Editing one file never updates the other, and
   that is deliberate. tokens.css is still inherited for site chrome (nav,
   footer, crisis block, buttons, .stamp, .pen, .scribbled, .art-plate, .torn).

   PALETTE. Indigo Ledger, from exam-prep/weave-100/DESIGN.md, which is the
   product's own locked palette: structure #2a3564 (dark #1b224a, wash #ecedf5),
   key number #d68a06 (dark #a86500, wash #fdf1d9), danger #c2402c. The sage and
   brown of the older exam-prep design spec is SUPERSEDED for every Weave 100
   surface and appears nowhere below.

   Stock: one continuous indigo wash from the hero through the rights band,
   torn into at the top out of the white nav ground, torn out of above the
   crisis block. Cards are white on the wash.

   Legibility, measured on the light wash #ecedf5:
     --ink #2B2320            13.7:1   body copy
     --h-accent #2a3564       10.1:1   accent ink, links, numerals
     --h-num-dk #a86500        4.0:1   large bold numerals only, never body
     --h-num #d68a06           2.4:1   DEVICE ONLY: rules, scribble, borders
   Dark theme moves the sheet to #1b224a and the accent to #a8b2e0, measured
   7.4:1 on the sheet and 8.3:1 on the dark card. The amber measures 5.5:1 on
   the dark sheet and stays a device there too, for consistency of voice.

   Rotation: containers only, and only the taped plates plus the two stamp
   families. The hero art plate, the five cover plates, the fact stamps and the
   pen annotation. Vitrines, hallmarks, bands, ledger rows and the rights card
   are all 0deg: reference surfaces a reader scans or clicks never tilt.

   NO 3D BOOK RENDERS. Wilfred's ruling of 2026-08-29 for this product: the
   cards show the real printed cover, mounted the way /library mounts cover
   art, on a white plate with a tape strip. The pattern is tokens.css
   .art-plate plus .tape, not a product shot, and there is no render slot to
   fall back from.

   Shadows are the offset solid ink tint from tokens, never blur glows.
   No dashed or dotted rule is declared anywhere in this file. */

/* ------------------------------------------------------------------ route */

.hundred {
  --h-struct: #2a3564;
  --h-struct-dk: #1b224a;
  --h-wash: #ecedf5;
  --h-num: #d68a06;
  --h-num-dk: #a86500;
  --h-num-wash: #fdf1d9;
  --h-warn: #c2402c;
  --h-accent: var(--h-struct);
  --h-card: var(--cloth-card);
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ink);
}
[data-theme="dark"] .hundred {
  --h-wash: #1b224a;
  --h-accent: #a8b2e0;
  --h-num-wash: #2c2a1f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hundred {
    --h-wash: #1b224a;
    --h-accent: #a8b2e0;
    --h-num-wash: #2c2a1f;
  }
}

/* Long drug, statute and syndrome names wrap rather than widen a card. */
.hundred :where(p, li, h1, h2, h3, .vitrine__title, .board-row__name) {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.hundred :where(img, svg) { max-width: 100%; }

/* Seam law, ported: the tear is the sheet's first child, its fill is the sheet
   ABOVE, and the sheet carries no top padding. .sheet-indigo is this page's own
   stock class, declared here because tokens.css owns only the five house
   stocks and none of them is the ledger wash. The exit tear rides its own
   wrapper so the copied crisis section stays byte-identical to the study,
   library and sprint instances. */
.sheet-indigo { background: var(--h-wash); padding-top: 0; }
.sheet-indigo, .sheet-indigo .lede { color: var(--ink); }
.torn--cloth { color: var(--cloth); }
.torn--indigo { color: var(--h-wash); }
.hundred-seam { background: var(--paper-quiet); line-height: 0; }
.sheet-pad { padding-top: var(--space-section); }

.hundred-eyebrow {
  display: block;
  margin: 0 0 0.9rem;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* One pen annotation on the page, on a container, per the rotation budget. */
.hundred-annot {
  display: inline-block;
  margin: 1.4rem 0 0;
  transform: rotate(-1.2deg);
}

/* ------------------------------------------------------------------- hero */

.hundred-hero {
  width: min(1184px, calc(100% - 2.5rem));
  margin-inline: auto;
  padding: clamp(7rem, 13vw, 10rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.hundred-hero__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.hundred-hero__text { max-width: 44rem; }

.hundred-title {
  margin: 0 0 0.6rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.04;
  padding-bottom: 0.28em;
  font-variant-numeric: lining-nums;
}
/* The scribble is the amber, which is a device colour here and not text: it
   never has to clear a text floor, and against ink it is the one warm mark on
   an otherwise cool page. */
.hundred-title .scribbled path { stroke: var(--h-num); }

.hundred-sub {
  margin: 0 0 1rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 700;
  line-height: 1.35;
}
.hundred-lede {
  max-width: 62ch;
  margin: 0;
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.6;
}
.hundred-lede + .hundred-lede { margin-top: 0.9rem; }

/* Stamp wall, ported. The house .stamp already carries the wobble and the
   tabular numerals; this only re-inks the border to the ledger accent so the
   four counts read as one set rather than as loose chips. */
.hundred-stamps { margin-top: 1.5rem; }
.hundred-stamps .stamp {
  border-color: var(--h-accent);
  color: var(--ink);
  font-size: 0.84375rem;
  background: var(--h-card);
}
.hundred-stamps .stamp--alt { border-color: var(--h-num-dk); }

/* The hero art is landscape (1152 x 896), so the plate runs the full text
   column UNDER the copy rather than sitting in a portrait side rail. A wide
   plate squeezed into a 16rem column reads as a thumbnail; given the whole
   measure it reads as the pinboard it is. */
.hundred-hero__art { justify-self: stretch; }
.hundred-plate { width: min(100%, 44rem); margin-inline: 0; }
.hundred-plate > img { mix-blend-mode: multiply; transform: rotate(-0.9deg); }
[data-theme="dark"] .hundred-plate > img { mix-blend-mode: normal; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hundred-plate > img { mix-blend-mode: normal; }
}

/* --------------------------------------------------------------- vitrines */

.hundred-books { display: block; }
.vitrine {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: center;
  width: min(1184px, calc(100% - 2.5rem));
  margin-inline: auto;
  padding: clamp(2.25rem, 5vw, 3.5rem) 0;
  border-bottom: 2px solid var(--ink);
  scroll-margin-top: 150px;
  background-image: radial-gradient(58% 68% at var(--spot-x, 30%) 44%,
    color-mix(in srgb, var(--stage, var(--h-struct)) 12%, transparent),
    transparent 64%);
}
.hundred-books .vitrine:last-of-type { border-bottom: 0; }
.vitrine__text { position: relative; z-index: 1; max-width: 46rem; }
.vitrine__eyebrow {
  display: block;
  margin: 0 0 1rem;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.vitrine__title {
  margin: 0 0 0.5rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.06;
}
.vitrine__subtitle {
  margin: 0 0 1rem;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
}
.vitrine__promise {
  margin: 0 0 1.2rem;
  color: var(--h-accent);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.4rem);
  font-style: italic;
  line-height: 1.4;
}
.vitrine__what {
  max-width: 62ch;
  margin: 0 0 1.6rem;
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.62;
}
.vitrine__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.vitrine__author {
  margin: 1.1rem 0 0;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
}
.vitrine__stage {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hallmark, ported. A matched top-and-bottom pair, never a side tab. The rule
   between rows takes the amber at low mix so the ledger accent shows up in the
   furniture without ever carrying a word. */
.hallmark {
  margin: 0 0 1.7rem;
  padding: 0.35rem 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.hallmark__row {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.6rem 0.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--h-num) 42%, transparent);
}
.hallmark__row:last-child { border-bottom: 0; }
.hallmark__k {
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hallmark__v {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  text-align: right;
}
.hallmark__v--num {
  color: var(--h-accent);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ------------------------------------------------------------ cover plate */

/* The real printed cover, taped to a white plate. Everything structural comes
   from tokens.css .art-plate (white ground, 2.5px ink border, hand-cut radius,
   offset lift shadow) and tokens.css .tape (the strip across the top edge), so
   this block only sizes the plate, alternates its tilt down the page, and
   drops a soft cast shadow under it.

   The cover artwork is flat colour on white, exactly like the riso plates the
   rest of the estate mounts, so it takes the same multiply on the light sheet
   and drops the blend in dark theme (stacking-context law: the blend lives on
   the img, never on a wrapped ancestor). */
.cover-plate {
  width: min(100%, 21rem);
  filter: drop-shadow(0 10px 18px rgb(27 34 74 / 18%));
  transform: rotate(-1.1deg);
}
.hundred-books .vitrine:nth-of-type(even) .cover-plate {
  transform: rotate(1.1deg);
}
.cover-plate__art {
  mix-blend-mode: multiply;
  /* A hair of counter-tilt so the cover reads as a sheet lying inside the
     frame rather than as one rigid object with the plate. */
  transform: rotate(0.5deg);
}
[data-theme="dark"] .cover-plate__art { mix-blend-mode: normal; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cover-plate__art { mix-blend-mode: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .cover-plate,
  .hundred-books .vitrine:nth-of-type(even) .cover-plate,
  .cover-plate__art,
  .hundred-plate > img { transform: none; }
}

/* --------------------------------------------------------------- method */

.hundred-method,
.hundred-print,
.hundred-follow {
  width: min(1184px, calc(100% - 2.5rem));
  margin-inline: auto;
  padding: clamp(3rem, 6vw, 5rem) 0 0;
}
.hundred-method__head,
.hundred-print__head,
.hundred-follow__head { max-width: 62ch; margin: 0 0 2rem; }
.hundred-method__title,
.hundred-print__title,
.hundred-follow__title {
  margin: 0 0 0.7rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.08;
}
.hundred-method__lede,
.hundred-print__lede,
.hundred-follow__lede {
  margin: 0;
  color: var(--ink);
  font-size: 1.0625rem;
}
.hundred-method__lede + .hundred-method__lede { margin-top: 0.9rem; }

/* The boards, as a ledger: name left, sittings right, one hairline per row and
   the count set tabular so the column reads down. This is the pinboard idiom
   the product's own DESIGN.md fixes, ported into web furniture. */
.board-ledger {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding: clamp(1.15rem, 2.6vw, 1.6rem);
  border: 2px solid var(--ink);
  border-radius: var(--radius-card);
  background: var(--h-card);
}
.board-ledger__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--h-struct);
}
.board-ledger__name {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
}
.board-ledger__meta {
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
}
.board-rows { margin: 0; padding: 0; list-style: none; }
.board-row {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.5rem 0.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--h-num) 42%, transparent);
}
.board-row:last-child { border-bottom: 0; }
.board-row__name {
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
}
.board-row__n {
  color: var(--h-accent);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}

/* The five steps. Numbered by content, not by a counter: the number is written
   into the markup so a reordered list can never renumber itself silently. */
.method-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding: 0;
  list-style: none;
}
.method-step {
  display: flex;
  gap: 0.95rem;
  align-items: flex-start;
  padding: 1.05rem 1.15rem 1.1rem;
  border: 2px solid var(--ink);
  border-radius: var(--wonky-1);
  background: var(--h-card);
  box-shadow: var(--shadow-soft);
}
.method-step:nth-child(even) { border-radius: var(--wonky-2); }
.method-step__n {
  flex: 0 0 auto;
  min-width: 2.1rem;
  padding: 3px 8px 2px;
  border: 2px solid var(--h-num-dk);
  border-radius: 4px 9px 5px 10px;
  color: var(--h-accent);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  font-variant-numeric: tabular-nums lining-nums;
}
.method-step__body { margin: 0; }
.method-step__k {
  display: block;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.method-step__v {
  display: block;
  margin-top: 0.25rem;
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.55;
}

/* The caveat, and the honesty line under it. The caveat is the book's own
   sentence and is set as the loudest quiet thing on the page: display face,
   ink, an amber rule above it, no box. */
.method-caveat {
  max-width: 62ch;
  margin: 0 0 1rem;
  padding-top: 1.1rem;
  border-top: 3px solid var(--h-num);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  font-weight: 700;
  line-height: 1.32;
}
.method-honest {
  max-width: 62ch;
  margin: 0;
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.62;
}

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

/* Two advisory bands at card width rather than measure width, so a reader can
   hold the printed route and the do-it-yourself route side by side. Ported
   from the sprint print section; the volume and zip tiles are not, because
   this product ships five files and no per-volume shelf. */
.hundred-print__head p + p { margin-top: 0.9rem; }
.print-bands {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.print-band {
  padding: clamp(1.15rem, 2.6vw, 1.6rem);
  border: 2px solid var(--ink);
  border-radius: var(--radius-card);
  background: var(--h-card);
}
.print-band__title {
  margin: 0 0 0.6rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.16;
}
.print-band p { margin: 0; color: var(--ink-2); font-size: 1rem; }
.print-band p + p { margin-top: 0.7rem; }
.print-band__lock {
  color: var(--ink) !important;
  font-weight: 600;
}
.print-brief {
  margin: 0.7rem 0 0;
  padding-inline-start: 1.15rem;
  color: var(--ink-2);
  font-size: 1rem;
}
.print-brief li { margin: 0 0 0.45rem; }
.print-brief li:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- follow */

.follow-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}
.follow-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 14px;
  border: 2px solid var(--h-accent);
  border-radius: 4px 9px 5px 10px;
  background: var(--h-card);
  color: var(--h-accent);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-weave);
}
.follow-link:hover {
  background: var(--h-num-wash);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.follow-link:active { transform: scale(.97); }

/* ------------------------------------------------------------ cross band */

/* A modest band, not a second hero: one sentence and one link, on the sheet,
   at 0deg. The mirror of the band build-sprint.py now carries back this way. */
.hundred-cross {
  width: min(1184px, calc(100% - 2.5rem));
  margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 3.5rem) 0 0;
}
.hundred-cross__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.4rem;
  align-items: baseline;
  justify-content: space-between;
  padding: clamp(1.15rem, 2.6vw, 1.5rem);
  border: 2px solid var(--ink);
  border-radius: var(--radius-card);
  background: var(--h-card);
}
.hundred-cross__text {
  max-width: 58ch;
  margin: 0;
  color: var(--ink);
  font-size: 1.0625rem;
}
.hundred-cross__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--h-accent);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ rights */

.hundred-rights {
  width: min(1184px, calc(100% - 2.5rem));
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 7vw, 6rem);
}
.hundred-rights__inner {
  max-width: 68ch;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 2px solid var(--ink);
  border-radius: var(--radius-card);
  background: var(--h-card);
  transform: none;
}
.hundred-rights__title {
  margin: 0 0 1rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.12;
}
.hundred-rights p {
  margin: 0 0 1rem;
  color: var(--ink-2);
  font-size: 1.0625rem;
  line-height: 1.62;
}
.hundred-rights p:last-child { margin-bottom: 0; }
.hundred-rights__by { color: var(--ink) !important; font-weight: 600; }
.hundred-rights .hundred-eyebrow { color: var(--ink-2); }

/* ------------------------------------------------------------- responsive */

@media (min-width: 700px) {
  .method-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .print-bands { grid-template-columns: repeat(2, 1fr); }
  /* The hero stays one column at every width: the art is landscape, so the
     stacked arrangement is the wide layout, not a fallback from one. */
  .vitrine { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .vitrine:nth-of-type(even) { --spot-x: 70%; }
  .vitrine:nth-of-type(even) .vitrine__stage { order: 1; }
  .vitrine:nth-of-type(even) .vitrine__text { order: 2; }
}
@media (max-width: 599px) {
  .hundred-hero { padding-top: 6.5rem; }
  .cover-plate { width: min(100%, 16rem); }
  .board-row { flex-wrap: wrap; gap: 0.2rem 1rem; }
  .hundred-cross__inner { gap: 0.4rem; }
}

/* ------------------------------------------------------------ motion floor */

@media (prefers-reduced-motion: reduce) {
  .follow-link { transition: none; }
  .follow-link:active { transform: none; }
}