/* reference-weight.css
   ---------------------------------------------------------------------------
   THE JOB: three reference pages — /stack, /faq, /pricing — read as long runs
   of visually identical units. Nothing signals importance, nothing groups, and
   the only way in is to read everything.

     /stack   22 tool cells, six label-derived groups, every cell the same size
     /faq     10 closed rows that say nothing until you open them
     /pricing  8 identical answer blocks + 38 identical ledger rows

   This file does not add decoration. It adds WEIGHT — three tiers of it per
   page, derived from what the content actually is, so a reader can skip.

   RULES OBSERVED
   - Tokens only. --ink --bone --red --ink-2 --dim-ink --hair-* --serif --sans
     --mono, all defined in reference.css. No invented colour, radius or shadow.
   - Every one of these pages sits on a Toronto photographic backdrop, so all
     type here is measured on PAINTED pixels, not on the nominal ground.
   - No hard totals. Families are named, never counted.
   - Additive only. Every rule here is a layer on markup that already renders
     correctly without this file: drop the stylesheet and the pages fall back
     to their previous appearance rather than breaking.
   --------------------------------------------------------------------------- */

/* ===========================================================================
   1. FAMILY HEADS — shared by /stack and /faq and /pricing
   A family is a claim with items under it, not a label with items under it.
   The head carries the argument; the items are the evidence.
   =========================================================================== */

.wt-fam {
  margin: clamp(2.75rem, 6vw, 4.5rem) 0 0;
}
.wt-fam:first-of-type { margin-top: clamp(2rem, 4vw, 3rem); }

.wt-fam__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--hair-bone);
}
.on-ink .wt-fam__head,
.band--ink .wt-fam__head,
.wt-fam--onink .wt-fam__head { border-bottom-color: var(--hair-ink); }

.wt-fam__n {
  margin: 0;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red-bone);
}
.wt-fam--onink .wt-fam__n { color: var(--red-ink); }

.wt-fam__h {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.1vw, 2.125rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--ink);
  /* the base .tgroup rule sets mono/uppercase/small — undo it here */
  text-transform: none;
}
.wt-fam--onink .wt-fam__h { color: var(--bone); }
/* .tgroup draws a trailing hairline with ::after to fill the rest of its row.
   Inside a family head that row is a narrow grid column, so the rule came out
   as a stub the width of a hyphen sitting after the last word. The family head
   already carries a full-width rule of its own. */
.wt-fam__h { display: block; }
.wt-fam__h::after { content: none; }

.wt-fam__why {
  margin: 0;
  max-width: 46ch;
  font-family: var(--sans);
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.wt-fam--onink .wt-fam__why { color: var(--dim-ink); }

@media (min-width: 60rem) {
  .wt-fam__head {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    grid-template-areas: "n    why"
                         "head why";
    align-items: start;
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
    row-gap: .35rem;
  }
  .wt-fam__n   { grid-area: n; }
  .wt-fam__h   { grid-area: head; }
  .wt-fam__why { grid-area: why; padding-top: .3rem; }
}

/* ===========================================================================
   2. /stack — THREE WEIGHTS OF TOOL
   Family 01 is the part a client would have to physically move if they left,
   so it is set large. Family 02 is what the code is written in — the skills
   they would hire for — set medium. Family 03 is outside services the product
   calls, individually swappable, so they are set as compact rows.
   =========================================================================== */

/* --- 01 load-bearing: four to a row becomes two, at double the size -------- */
.wt-grid--anchor {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  background: var(--hair-bone);
  border: 1px solid var(--hair-bone);
}
@media (min-width: 40rem)  { .wt-grid--anchor { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem)  {
  .wt-grid--anchor { grid-template-columns: repeat(3, 1fr); }
  /* the database everything else hangs off gets the double cell: the family
     is load-bearing, and inside it one item is more load-bearing still */
  .wt-grid--anchor .tgrid__cell:first-child { grid-column: span 2; }
  .wt-grid--anchor .tgrid__cell:first-child .tgrid__name { font-size: 1.875rem; }
  .wt-grid--anchor .tgrid__cell:first-child .tgrid__mark { width: 2.5rem; height: 2.5rem; }
}

.wt-grid--anchor .tgrid__cell {
  border: 0;
  background: var(--bone);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 1.75rem);
  min-height: 11.5rem;
  display: flex;
  flex-direction: column;
}
.wt-grid--anchor .tgrid__mark { width: 2rem; height: 2rem; margin-bottom: 1.15rem; }
.wt-grid--anchor .tgrid__mark svg { width: 100%; height: 100%; }
.wt-grid--anchor .tgrid__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  line-height: 1.1;
  letter-spacing: -.005em;
  margin: 0 0 .5rem;
  color: var(--ink);
}
.wt-grid--anchor .tgrid__use {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--ink-2);
}
/* --- 02 written in: unchanged four-up, but quieter than family 01 ---------- */
.wt-grid--craft .tgrid__cell { padding: 1.15rem 1.15rem 1.25rem; }
.wt-grid--craft .tgrid__name { font-size: 1rem; }
.wt-grid--craft .tgrid__use  { font-size: .875rem; color: var(--ink-2); }

/* --- 03 services it calls: rows, not cards -------------------------------- */
.wt-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--hair-bone);
}
@media (min-width: 46rem) { .wt-list { grid-template-columns: repeat(2, 1fr); column-gap: clamp(1.5rem, 4vw, 3rem); } }
@media (min-width: 76rem) { .wt-list { grid-template-columns: repeat(3, 1fr); } }

.wt-list .tgrid__cell {
  border: 0;
  border-bottom: 1px solid var(--hair-bone);
  background: none;
  padding: .85rem 0;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: baseline;
  column-gap: .75rem;
  min-height: 2.75rem; /* 44px tap target */
}
.wt-list .tgrid__mark {
  grid-row: span 2;
  width: 1.125rem; height: 1.125rem;
  align-self: center;
  margin: 0;
  opacity: .62;
}
.wt-list .tgrid__mark svg { width: 100%; height: 100%; }
.wt-list .tgrid__mono { font-size: .625rem; }
.wt-list .tgrid__name {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.35;
  color: var(--ink);
}
.wt-list .tgrid__use {
  grid-column: 2;
  margin: .1rem 0 0;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--ink-2);
}
@media (pointer: fine) {
  .wt-list .tgrid__cell { min-height: 0; padding: .7rem 0; }
}

/* ===========================================================================
   3. /faq — THE VERDICT LINE
   Every question now answers itself in the closed state. The line under each
   summary is the first sentence of that answer, MOVED out of the panel rather
   than copied into it, so the page still says exactly what the FAQPage
   structured data says, and nothing has left the DOM.
   =========================================================================== */

/* faq.css lays the summary out as 'num chev' / 'q chev'. The verdict needs a
   third row of its own, full width, with the chevron still centred on the
   question rather than on the whole block. */
details.qa > .qa__sum {
  grid-template-areas: 'num  chev'
                       'q    chev'
                       'verdict verdict';
}
.qa__verdict {
  grid-area: verdict;
  margin: .5rem 0 0;
  font-family: var(--sans);
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--dim-ink);
  max-width: 54ch;
}
/* a one-word verdict — "Yes." "No." — earns display weight */
.qa__verdict--short {
  font-family: var(--serif);
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--bone);
}
.qa__verdict--short b { font-weight: 400; }

/* the lead question: open on arrival, and set like a statement */
.qa--lead {
  border-left: 2px solid var(--red);
  padding-left: clamp(1rem, 2.5vw, 1.75rem);
  margin-bottom: 2rem;
}
.qa--lead .qa__q {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  line-height: 1.12;
}
.qa--lead .qa__verdict {
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  line-height: 1.35;
  color: var(--bone);
  max-width: 42ch;
}

/* ===========================================================================
   4. /pricing — SCANNABLE ANSWERS, WEIGHTED LEDGER
   =========================================================================== */

/* --- the position, lifted above the eight answers ------------------------- */
.wt-claim {
  margin: 0 0 clamp(2rem, 5vw, 3.25rem);
  padding: clamp(1.5rem, 3.5vw, 2.25rem) 0 0;
  border-top: 2px solid var(--red);
  max-width: 40rem;
}
.wt-claim__h {
  margin: 0 0 .65rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--bone);
}
.wt-claim__p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--dim-ink);
}

/* --- the firm's position on billing, set as a statement rather than as the
       fifth of eight identical paragraphs ------------------------------------ */
.qa--claim {
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
  padding-left: clamp(1rem, 2.5vw, 1.75rem);
  border-left: 2px solid var(--red);
  max-width: 44rem;
}
.qa--claim .qa__q {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  line-height: 1.12;
}
.qa--claim .qa__a p {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.55;
  color: var(--bone);
}

/* --- eight identical paragraphs become two columns of four ---------------- */
/* multi-column rather than grid, so an odd-numbered family balances its two
   columns instead of leaving a hole under the shorter one */
@media (min-width: 68rem) {
  .wt-answers {
    columns: 2;
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }
  .wt-answers > .qa {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }
}

/* the lead figure inside each answer, marked up in place — the sentence is
   unchanged, only its number is set to stand up out of the paragraph */
.qa__fig {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.16em;
  letter-spacing: -.005em;
  color: var(--bone);
}

/* --- ledger rows: fixed, starting-point, pass-through --------------------- */
.ledger tr[data-kind="fixed"] th[scope="row"] { font-weight: 600; }
.ledger tr[data-kind="fixed"] .fig {
  color: var(--bone);
  font-weight: 600;
}
.ledger tr[data-kind="from"] .fig { color: var(--dim-ink); }
.ledger tr[data-kind="pass"] th[scope="row"],
.ledger tr[data-kind="pass"] .fig {
  color: var(--dim-ink);
  font-style: normal;
}
.ledger tr[data-kind="pass"] .fig { font-family: var(--mono); font-size: .75rem; }
/* the pass-through tail is separated from the priced lines by a rule */
.ledger tr[data-kind="pass"]:first-of-type { box-shadow: none; }
.ledger tr[data-first-pass] th[scope="row"],
.ledger tr[data-first-pass] td { border-top: 1px solid var(--hair-ink); padding-top: 1rem; }


/* ===========================================================================
   5. MOTION
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .wt-fam, .wt-claim, .qa--lead { transition: none !important; animation: none !important; }
}