/* ==========================================================================
   Tvaris Labs — brochure
   Consumes tokens.css. Playbook 24-brochure.md.

   Motion rules (playbook 24 §5):
   - ALL motion gated behind prefers-reduced-motion: no-preference
   - Only transform + opacity animated (compositor-only)
   - Reduced motion = END state, never opacity:0
   - No auto-marquee (WCAG 2.2 SC 2.2.2 is a Non-Interference requirement)
   ========================================================================== */

/* ---- Brochure-local tokens ---------------------------------------------- */
.br {
  /* Motion timing — Material 3 emphasized set, playbook 24 §5 */
  --br-enter:  cubic-bezier(0.05, 0.7, 0.1, 1);
  --br-exit:   cubic-bezier(0.3, 0, 0.8, 0.15);
  --br-micro:  120ms;
  --br-elem:   320ms;
  --br-hero:   520ms;
  --br-stagger: 60ms;
}

/* ==========================================================================
   Reading rhythm — one screen per section (playbook 24 §2)
   ========================================================================== */

.br-section {
  padding-block: var(--space-16);
  border-top: 1px solid var(--color-line);
}
.br-section:first-of-type { border-top: 0; }

.br-num {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-3);
  display: block;
  margin-bottom: var(--space-4);
}

.br-h {
  font-size: var(--type-h1);
  max-width: 20ch;
  margin-bottom: var(--space-5);
}

/* Measure: 45–75 chars, 66 ideal (Bringhurst §2.1.2) */
.br-lede {
  font-size: var(--type-h3);
  line-height: var(--leading-snug);
  color: var(--color-ink-2);
  max-width: 60ch;
}

.br-p {
  color: var(--color-ink-2);
  max-width: 66ch;
  margin-top: var(--space-5);
}

.br-p + .br-p { margin-top: var(--space-4); }

/* ==========================================================================
   Cover — value prop must survive an 11-character glance (playbook 24 §1)
   ========================================================================== */

.br-cover {
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-12) var(--space-16);
  position: relative;
  overflow: hidden;
}

.br-cover-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-bottom: var(--space-4);
}

.br-cover h1 {
  font-size: var(--type-hero);
  max-width: 15ch;
  text-wrap: balance;
  margin-bottom: var(--space-6);
}

.br-cover-sub {
  font-size: var(--type-h3);
  line-height: var(--leading-snug);
  color: var(--color-ink-2);
  max-width: 54ch;
  text-wrap: pretty;
  margin-bottom: var(--space-8);
}

.br-cover-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}

/* Proof strip: a real definition list, not a run-on of faint mono text.
   These are the only credibility claims on the cover, so the VALUE is set in
   ink at display size and the label carries the small mono treatment. */
.br-cover-meta {
  margin: 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line-2);
  max-width: 62ch;
}

.br-stat + .br-stat {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}

/* Cover composition. On wide viewports the copy holds the left column and the
   proof stats sit in the right, so the hero is a balanced two-column spread
   instead of a text block with dead space beside it. Two cells only — spanning
   a centred item across auto rows opened a large gap under the eyebrow. */
@media (min-width: 1000px) {
  .br-cover > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    column-gap: var(--space-12);
    align-items: center;
  }
  .br-cover-copy { grid-column: 1; }
  .br-cover-meta {
    grid-column: 2;
    max-width: none;
    padding-top: 0;
    border-top: 0;
    border-inline-start: 1px solid var(--color-line-2);
    padding-inline-start: var(--space-7);
  }
  .br-cover-meta .br-stat + .br-stat {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
  }
  .br-cover-meta .br-stat dd { max-width: none; }
}
/* Proof strip: a real definition list, not a run-on of faint mono text.
   These are the only credibility claims on the cover, so the VALUE is set in
   ink at display size and the label carries the small mono treatment.
   Labels share a fixed block so all three values sit on one baseline. */

.br-stat {
  display: block;
}
.br-stat dt {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-2);
  margin-bottom: var(--space-2);
}
.br-stat dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-h3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  text-wrap: balance;
  max-width: 14ch;
}

/* Scroll progress — 3 lines, effectively free (playbook 24 §5) */
.br-progress {
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: var(--color-accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 90;
}

/* ==========================================================================
   Winners / losers — the contrast pair
   ========================================================================== */

.br-split {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-8);
}
@media (min-width: 760px) { .br-split { grid-template-columns: 1fr 1fr; } }

.br-col {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  background: var(--color-surface);
}
.br-col-signal { border-color: rgba(228, 145, 90, 0.32); }
.br-col-win    { border-color: rgba(111, 196, 158, 0.32); }

.br-col-h {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.br-col-signal .br-col-h { color: var(--color-signal); }
.br-col-win .br-col-h    { color: var(--color-accent); }

.br-list { list-style: none; margin: 0; padding: 0; }
.br-list li {
  font-size: var(--type-small);
  color: var(--color-ink-2);
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-line);
}
.br-list li:first-child { border-top: 0; padding-top: 0; }

/* ==========================================================================
   Promised land — the one thing to remember
   ========================================================================== */

.br-promise {
  margin-top: var(--space-8);
  padding: var(--space-10) var(--space-8);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-line-2);
  background: var(--color-surface-2);
}

.br-promise q {
  display: block;
  font-family: var(--font-display);
  font-size: var(--type-h2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  max-width: 32ch;
  quotes: none;
}

/* ==========================================================================
   Positioning statement — Moore template
   ========================================================================== */

.br-position {
  margin-top: var(--space-8);
  font-family: var(--font-display);
  font-size: var(--type-h3);
  line-height: var(--leading-snug);
  color: var(--color-ink-2);
  max-width: 58ch;
}
.br-position strong { color: var(--color-ink); font-weight: 600; }

/* ==========================================================================
   Product / capability cards
   ========================================================================== */

.br-cards {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
@media (min-width: 700px)  { .br-cards-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px)  { .br-cards-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .br-cards-3 { grid-template-columns: repeat(3, 1fr); } }

.br-card {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  transition: border-color var(--br-micro) var(--br-enter),
              transform var(--br-micro) var(--br-enter);
}
.br-card:hover { border-color: var(--color-line-2); }

.br-card-mark {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--type-small);
  background: var(--color-surface-2);
  border: 1px solid var(--color-line-2);
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}

.br-card-t {
  font-family: var(--font-display);
  font-size: var(--type-h3);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-1);
}

.br-card-url {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.br-card-b {
  font-size: var(--type-small);
  color: var(--color-ink-2);
  max-width: 46ch;
}

/* ==========================================================================
   Jobs / pains / gains table
   ========================================================================== */

.br-jobs { margin-top: var(--space-8); }

.br-job {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-line);
}
@media (min-width: 860px) {
  .br-job { grid-template-columns: 1fr 1fr 1fr; gap: var(--space-6); }
}

.br-job-k {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-3);
  margin-bottom: var(--space-1);
}
.br-job-v { font-size: var(--type-small); color: var(--color-ink-2); }

/* ==========================================================================
   Evidence — no fabricated social proof (playbook 24 §6)
   ========================================================================== */

.br-evidence {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
@media (min-width: 760px) { .br-evidence { grid-template-columns: repeat(2, 1fr); } }

.br-ev {
  padding: var(--space-5) var(--space-6);
  border-left: 2px solid var(--color-accent);
  background: var(--color-surface);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.br-ev-t {
  font-weight: 600;
  font-size: var(--type-small);
  margin-bottom: var(--space-2);
}
.br-ev-b { font-size: var(--type-small); color: var(--color-ink-2); }

/* ==========================================================================
   The ask
   ========================================================================== */

.br-ask {
  text-align: left;
  padding-block: var(--space-16);
}
.br-ask h2 { font-size: var(--type-h1); max-width: 18ch; margin-bottom: var(--space-5); }
.br-ask-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.br-legal {
  margin-top: var(--space-12);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  color: var(--color-ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

/* ==========================================================================
   MOTION — opt-in only. Default state below is the FINAL state, so a
   reduced-motion / no-JS / print reader sees a complete document.
   (playbook 24 §5 rule zero)
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .br-rise {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity var(--br-elem) var(--br-enter),
                transform var(--br-elem) var(--br-enter);
  }
  .br-rise.is-in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  /* Stagger capped: 60ms x n, total <= ~500ms (playbook 24 §5) */
  .br-rise[data-i="1"] { transition-delay: 60ms; }
  .br-rise[data-i="2"] { transition-delay: 120ms; }
  .br-rise[data-i="3"] { transition-delay: 180ms; }
  .br-rise[data-i="4"] { transition-delay: 240ms; }
  .br-rise[data-i="5"] { transition-delay: 300ms; }
  .br-rise[data-i="6"] { transition-delay: 360ms; }

  .br-cover .br-rise { transition-duration: var(--br-hero); }

  .br-card:hover { transform: translate3d(0, -2px, 0); }
}

/* ==========================================================================
   PRINT — playbook 24 §7. Digital PDF export path.
   ========================================================================== */

@media print {
  /* -----------------------------------------------------------------------
     5-PAGE COMPOSITION (playbook 24 §7b/§7d)
     p1 cover (full-bleed field, declared divider)
     p2 01 shift + 02 stakes
     p3 03 promise + 04 positioning + 05 capabilities
     p4 06 evidence + 07 ask
     p5 back cover (full-bleed field, declared divider)
     Gate: printgate.py --dividers 1,5 --expect-pages 5 --ink-tolerance 0.08
     ----------------------------------------------------------------------- */
  @page {
    size: A4;
    margin: 15mm 15mm 17mm 15mm;

    @bottom-left {
      content: "Tvaris Labs LLP";
      font-family: var(--font-mono);
      font-size: 7.5pt;
      color: #5C574C;
    }
    @bottom-right {
      content: counter(page) " / " counter(pages);
      font-family: var(--font-mono);
      font-size: 7.5pt;
      color: #1F6B4C;
    }
  }
  @page :first { margin: 0; }

  :root {
    --color-bg: #fff;
    --color-surface: #fff;
    --color-surface-2: #FAF8F3;
    --color-ink: #14120E;
    --color-ink-2: #3A362E;
    --color-ink-3: #5C574C;
    --color-line: #D8D3C8;
    --color-line-2: #BDB7A9;
    --color-accent: #1F6B4C;
  }

  html, body { background: #fff; color: #14120E; }
  body { font-size: 9.1pt; line-height: 1.38; }

  .site-head, .site-foot, .skip-link, .br-progress,
  .br-cover-actions, .br-ask-actions, .br-print-hide { display: none !important; }

  .br-print-only { display: block !important; }

  /* Reduced motion for print: END state, never opacity:0 */
  .br-rise { opacity: 1 !important; transform: none !important; }

  .wrap, .wrap-narrow { max-width: none !important; width: 100% !important;
                        margin: 0 !important; padding: 0 !important; }

  /* ---- p1 COVER: full-bleed field, declared divider -------------------- */
  .br-cover {
    height: 292mm; max-height: 292mm; overflow: hidden;
    box-sizing: border-box;
    padding: 30mm 22mm 24mm 22mm;
    background: #14120E;
    color: #FAF8F3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    page-break-after: always;
    overflow: hidden;
  }
  .br-cover > .wrap {
    display: flex !important; flex-direction: column;
    height: 100%; min-height: 0;
  }
  .br-cover-eyebrow { color: #6FC49E; letter-spacing: 0.16em; }
  .br-cover h1 {
    font-size: 33pt; line-height: 1.06; max-width: 15ch;
    color: #FAF8F3; margin-bottom: 7mm;
    border-top: 2px solid #6FC49E; padding-top: 7mm;
  }
  .br-cover-sub { font-size: 11.5pt; color: #CFC9BC; max-width: 46ch; margin-bottom: 0; }
  .br-cover-meta {
    margin-top: auto; padding-top: 5mm;
    border-top: 1px solid rgba(250,248,243,0.22);
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6mm;
    max-width: none;
  }
  .br-stat + .br-stat { margin-top: 0; padding-top: 0; border-top: 0; }
  .br-stat dt { color: #9E978A; font-size: 7pt; }
  .br-stat dd { color: #FAF8F3; font-size: 12pt; max-width: none; }

  /* ---- page groups ----------------------------------------------------- */
  .br-pg-start { page-break-before: always; }

  .br-section {
    padding-block: 0 0;
    border-top: 0;
    page-break-inside: auto;
  }
  /* Breaks are DECLARED, never left to overflow. Only .br-pg-start breaks. */
  #stakes, #positioning, #capabilities { page-break-before: avoid; }
  .br-section + .br-section { margin-top: 5mm; padding-top: 4.5mm; border-top: 1px solid #D8D3C8; }

  /* colour index rides on numbers + rules + folios (no opener pages at 5pp) */
  .br-num {
    color: #1F6B4C; font-size: 7.5pt; margin-bottom: 2.5mm;
    padding-left: 3mm; border-left: 2px solid #1F6B4C;
  }

  .br-h { font-size: 14pt; line-height: 1.14; max-width: 28ch; margin-bottom: 3mm; }
  .br-lede { font-size: 9.5pt; line-height: 1.38; max-width: none; }
  .br-p { font-size: 9.2pt; max-width: none; margin-top: 2.5mm; }

  /* one card component everywhere */
  .br-card, .br-col, .br-ev, .br-promise {
    break-inside: avoid; page-break-inside: avoid;
    border: 1px solid #D8D3C8;
    border-radius: 2mm;
    background: #fff;
    padding: 3.5mm 3.5mm;
  }
  .br-col-signal { border-left: 2.5px solid #BDB7A9; }
  .br-col-win    { border-left: 2.5px solid #1F6B4C; }
  /* every card in the document: same frame, same rail, same fill */
  .br-card { border-left: 2.5px solid #1F6B4C; background: #fff; }
  .br-col-signal .br-col-h { color: #5C574C; }
  .br-col-win .br-col-h    { color: #1F6B4C; }
  .br-ev         { border-left: 2.5px solid #1F6B4C; }

  .br-split { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; margin-top: 5mm; align-items: stretch; }
  .br-col { display: flex; flex-direction: column; }
  .br-cards, .br-cards-2 {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; margin-top: 4mm;
    align-items: stretch;
    break-inside: avoid; page-break-inside: avoid;
  }
  .br-card { display: flex; flex-direction: column; }
  .br-evidence { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; margin-top: 5mm; align-items: stretch; }

  .br-list li { font-size: 8.3pt; padding-block: 1.4mm; line-height: 1.36; }
  .br-card-t { font-size: 9pt; line-height: 1.15; margin-bottom: 1.5mm; }
  .br-card-b { font-size: 7.8pt; max-width: none; line-height: 1.4; hyphens: none; -webkit-hyphens: none; }
  .br-ev-b, .br-list li, .br-p, .br-lede { hyphens: none; -webkit-hyphens: none; }
  .br-card-mark {
    width: 6mm; height: 6mm; margin-bottom: 2mm;
    background: #1F6B4C; color: #fff; border: 0; font-size: 8pt;
  }
  .br-col-h { font-size: 7.5pt; margin-bottom: 2.5mm; }
  .br-ev-t { font-size: 9.2pt; margin-bottom: 1.5mm; color: #14120E; }
  .br-ev-b { font-size: 8.8pt; }

  .br-promise { padding: 5mm 5.5mm; background: #FAF8F3; border: 1px solid #D8D3C8; border-left: 3px solid #1F6B4C; margin-top: 4mm; }
  .br-promise q { font-size: 12.5pt; max-width: 32ch; }
  .br-position { font-size: 9.6pt; max-width: none; margin-top: 3mm; }

  .br-ask { padding-block: 0; }
  .br-ask h2 { font-size: 15pt; max-width: 26ch; margin-bottom: 3.5mm; }
  .br-email {
    font-family: var(--font-mono);
    font-size: 9.6pt;
    color: #1F6B4C !important;
    border-bottom: 1px solid #1F6B4C;
  }
  .br-legal {
    margin-top: 8mm; padding-top: 3.5mm; border-top: 1px solid #D8D3C8;
    font-size: 7.5pt; gap: 4mm; line-height: 1.6;
  }

  /* ---- p5 BACK COVER: full-bleed field, declared divider --------------- */
  .br-back {
    page-break-before: always;
    page-break-after: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    box-sizing: border-box;
    margin: 0; padding: 24mm 22mm 20mm 22mm;
    /* usable box on a NON-first page = 297 - 24(top margin) - 32(bottom) = 241mm.
       @page :first{margin:0} only frees the cover. Size the back cover to the
       usable box or it spills a phantom sheet. (playbook 24 §7e) */
    height: 236mm; max-height: 236mm; overflow: hidden;
    background: #14120E; color: #FAF8F3;
    display: flex !important; flex-direction: column; justify-content: space-between;
  }
  .br-back > .wrap, .br-back > .wrap-narrow {
    display: block; height: auto; min-height: 0;
    break-inside: avoid; page-break-inside: avoid;
  }
  .br-back-h {
    font-family: var(--font-display);
    font-size: 33pt; line-height: 1.06; max-width: 15ch; color: #FAF8F3;
    border-top: 2px solid #6FC49E; padding-top: 7mm; margin-bottom: 0;
    text-wrap: balance;
  }
  .br-back-c {
    margin-top: 9mm; padding-top: 0;
    font-size: 10.5pt; color: #CFC9BC; line-height: 1.9;
  }
  .br-back-eyebrow {
    font-family: var(--font-mono);
    font-size: 7pt; letter-spacing: 0.16em; text-transform: uppercase;
    color: #6FC49E; margin-bottom: 6mm;
  }
  .br-back-legal {
    margin-top: 26mm; padding-top: 4mm;
    break-before: avoid; page-break-before: avoid;
    border-top: 1px solid rgba(250,248,243,0.22);
    font-size: 7.5pt; color: #CFC9BC; line-height: 1.7;
  }

  p, li { orphans: 3; widows: 3; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  a { color: #14120E; text-decoration: none; }
}

/* Print-only blocks are invisible on screen. */
.br-print-only { display: none; }