/* ============================================================================
   CCAE booklet, mobile-first.
   The unit is a square. A square carries its own header (title, top) and
   footer (description, bottom). Three squares make a triad. A narrow bridge
   joins the two triads. Each page has an outer margin (left on even pages,
   right on odd pages) and one page footer.

   Mobile (default): one column. In source order a page reads
   margin -> square -> square -> square -> bridge -> square -> square ->
   square -> page footer. Scroll on to the next page.

   Desktop (>=60rem): the page folds back into an A4-landscape spread.
   The margin is the outer vertical band; the two triads sit three-up with
   the bridge as the centre rule; the page footer spans the foot.
   ========================================================================== */
.bk {
  --ink:#15130F; --paper:#F4F1EA; --line:rgba(21,19,15,.16);
  --red:#E2231A; --blue:#4B3FB0; --yellow:#FFD500; --green:#1F7A4D;
  --purple:#4B3FB0;
  font-family:'Futura','Century Gothic','Trebuchet MS','Segoe UI',system-ui,sans-serif;
  color:var(--ink); background:var(--paper);
}
.bk * { box-sizing:border-box; }

/* A page */
.bk-page {
  display:flex; flex-direction:column;
  border-bottom:1px solid var(--line);
}

/* Outer margin band. Mobile: a short full-width spine with the page label.
   Decorative label is spoken once via aria-label on the band. */
.bk-margin {
  background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  padding:1rem; min-height:3.5rem;
  letter-spacing:3px; text-transform:uppercase; font-size:.74rem; font-weight:700;
}
.bk-margin span { writing-mode:horizontal-tb; }

/* Triad and square */
.bk-triad { display:flex; flex-direction:column; }
.bk-square {
  display:flex; flex-direction:column;
  border-top:1px solid var(--line); background:#fff;
  min-height:min(86vh, 40rem);
}
.bk-square__hdr {
  padding:1.1rem 1.25rem .6rem;
  border-top:4px solid var(--blue);
  font-size:1.15rem; font-weight:700; letter-spacing:-.2px;
}
.bk-square__body {
  flex:1; padding:.4rem 1.25rem 1rem; font-size:.96rem; line-height:1.6;
}
.bk-square__body > :first-child { margin-top:0; }
.bk-square__ftr {
  padding:.7rem 1.25rem 1.1rem; border-top:1px solid var(--line);
  font-size:.82rem; color:#6b6458;
}
.bk-square:nth-of-type(3n+1) .bk-square__hdr { border-top-color:var(--red); }
.bk-square:nth-of-type(3n+2) .bk-square__hdr { border-top-color:var(--blue); }
.bk-square:nth-of-type(3n)   .bk-square__hdr { border-top-color:var(--yellow); }

/* ---- T&L index-card referencing ----------------------------------------
   Every card has a code: <page><T|B><1-3>. T = top triad (concept,
   generalized principle). B = bottom triad (example, special-case
   scenario). The two sit on a spectrum, not as absolutes. The code is the
   anchor id, so any card is linkable and citable with the version stamp. */
.bk-square { position:relative; scroll-margin-top:5.5rem; }
.bk-square__hdr { padding-right:5.5rem; }
.bk-ref {
  position:absolute; top:.7rem; right:1rem;
  font-family:'JetBrains Mono',ui-monospace,Consolas,monospace;
  font-size:.72rem; font-weight:700; letter-spacing:1px;
  background:var(--ink); color:var(--paper);
  padding:.2rem .45rem; border-radius:3px; text-decoration:none;
}
.bk-ref:focus-visible { outline:3px solid var(--yellow); outline-offset:2px; }
.bk-ref small { font-weight:400; opacity:.7; }
.bk-triad__cap {
  font-size:.72rem; letter-spacing:2px; text-transform:uppercase;
  font-weight:700; color:#6b6458; padding:.7rem 1.25rem .2rem;
}
.bk-twin {
  margin:.6rem 0 0; border:1px solid var(--line); border-radius:4px;
  font-size:.8rem; overflow:hidden;
}
.bk-twin div { padding:.45rem .65rem; }
.bk-twin .gp { border-left:4px solid var(--red); }
.bk-twin .ss { border-left:4px solid var(--green); border-top:1px solid var(--line); }
.bk-twin b { font-size:.7rem; letter-spacing:1px; text-transform:uppercase;
  color:#6b6458; display:block; }
.bk-ver {
  font-family:'JetBrains Mono',ui-monospace,Consolas,monospace;
  font-size:.72rem; color:#6b6458;
}
.bk-twin-note {
  font-size:.78rem; color:#6b6458; line-height:1.5;
  padding:.7rem 1.25rem; border-top:1px dashed var(--line);
}
.bk-twin-note b { color:var(--ink); }
.bk-twin-note a { color:var(--blue); }

/* The bridge: a narrow joining strip */
.bk-bridge {
  background:linear-gradient(90deg,
    var(--red) 0 33.33%, var(--purple) 33.33% 66.66%, var(--yellow) 66.66% 100%);
  color:#fff; text-align:center;
  padding:.55rem 1rem; font-size:.74rem; font-weight:700; letter-spacing:2px;
  text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; gap:.6rem; min-height:44px;
}
.bk-bridge::before, .bk-bridge::after { content:"\00B7"; opacity:.7; }

/* Page footer */
.bk-page-ftr {
  background:var(--paper); border-top:2px solid var(--ink);
  padding:1rem 1.25rem; font-size:.8rem; color:#6b6458;
  display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; justify-content:space-between;
}
.bk-page-ftr a { color:var(--blue); min-height:44px; display:inline-flex; align-items:center; }
.bk-page-ftr a:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }

/* Gentle page cadence on touch scroll, never mandatory */
@media (hover:none) {
  .bk { scroll-snap-type:y proximity; }
  .bk-square, .bk-margin, .bk-page-ftr { scroll-snap-align:start; }
}
@media (prefers-reduced-motion:reduce) {
  .bk { scroll-snap-type:none; }
}

/* ---- Desktop: fold back into the A4-landscape spread ---------------------- */
@media (min-width:60rem) {
  .bk-page {
    display:grid; gap:0;
    max-width:74rem; margin:0 auto; padding:1.5rem;
    grid-template-columns:4rem 1fr;
    grid-template-areas:"margin body" "margin foot";
  }
  .bk-page[data-parity="odd"] {
    grid-template-columns:1fr 4rem;
    grid-template-areas:"body margin" "foot margin";
  }
  .bk-margin {
    grid-area:margin; min-height:0;
    writing-mode:vertical-rl; text-orientation:mixed; transform:none;
  }
  /* Left spine (even) reads upward, bottom-to-top. Right spine (odd) reads
     downward, top-to-bottom. The inner span inherits the writing-mode now,
     so the 180 flip is correct and nothing prints upside down. */
  .bk-page[data-parity="even"] .bk-margin { transform:rotate(180deg); }
  .bk-margin span { writing-mode:inherit; letter-spacing:3px; }
  .bk-body { grid-area:body; display:flex; flex-direction:column; }
  .bk-triad {
    display:grid; grid-template-columns:repeat(3,1fr);
    border-inline:1px solid var(--line);
  }
  .bk-square {
    border-left:1px solid var(--line); border-top:0;
    min-height:0; aspect-ratio:1/1; overflow:auto;
  }
  .bk-triad .bk-square:first-child { border-left:0; }
  .bk-bridge { min-height:0; }
  .bk-page-ftr { grid-area:foot; }
}

/* Print: clean A4 landscape, no chrome */
@media print {
  #ccae-header, #ccae-footer { display:none !important; }
  @page { size:A4 landscape; margin:12mm; }
  .bk-page { break-after:page; }
}