/* Rivera Brazil · base.css
   Fonts, tokens, reset, type, links, focus, print. Components live in components.css.
   Binding rules: 06-DESIGN.md (see §14 for what is not allowed here). */

@font-face { font-family: "Inter"; src: url("../fonts/inter-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-600.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair.woff") format("woff"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-i.woff") format("woff"); font-weight: 400 900; font-style: italic; font-display: swap; }

:root {
  color-scheme: light;

  /* brand (do not change) */
  --navy:        #002233;
  --navy-mid:    #1A3A5C;
  --navy-light:  #24527A;
  --green:       #11BB99;   /* strokes and fills only; never text on light */
  --green-light: #00CC77;   /* only on navy */
  --gold:        #FFAA11;   /* strokes and fills only; never text on light */
  --ink:         #1C2B3A;
  --tint:        #F5F7FA;

  /* roles */
  --paper:       var(--tint);
  --sheet:       #FFFFFF;
  --sheet-machine: #FBFCFD;
  --ink-soft:    #3A4756;
  --struck:      #5A6B7B;
  --pen:         #0A7A63;
  --pen-stroke:  var(--green);
  --pencil:      rgba(28, 43, 58, .55);
  --hl:          rgba(255, 170, 17, .34);
  --hl-soft:     rgba(255, 170, 17, .22);
  --ins-bg:      rgba(17, 187, 153, .16);
  --rule:        rgba(36, 82, 122, .16);
  --rule-strong: rgba(36, 82, 122, .32);
  --margin-line: var(--gold);
  --error:       #8A1128;
  --on-navy:     #F5F7FA;
  --on-navy-soft:#A9BCCB;

  /* voices (lanes; always with a text label) */
  --v-int: #24527A;  --v-m:  #24527A;
  --v-p1:  #0A7A63;  --v-r1: #0A7A63;
  --v-r2:  #A86400;
  --v-r3:  #5A6B7B;
  --v-r4:  #0E5E6F;
  --v-r5:  #1A3A5C;

  /* families */
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono:  ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;

  /* type scale */
  --fs-line:    clamp(3.4rem, 10.4vw, 10rem);
  --fs-line-en: clamp(1.7rem, 3.1vw, 2.9rem);
  --fs-h1:      clamp(2.4rem, 4.3vw, 4.25rem);
  --fs-h2:      clamp(1.625rem, 2.5vw, 2.375rem);   /* section heads: well under the H1 (round 2) */
  --fs-h2-feature: clamp(2.4rem, 4.9vw, 4.75rem);  /* one per page at most (.h2--feature), may beat the H1 */
  --fs-h3:      clamp(1.25rem, 1.6vw, 1.5rem);
  --fs-voice:   clamp(1.25rem, 1.9vw, 1.6rem);
  --fs-lede:    1.125rem;
  --fs-body:    1.0625rem;
  --fs-ui:      .9375rem;
  --fs-note:    1.0625rem;
  --fs-fn:      .875rem;
  --fs-meta:    .8125rem;
  --fs-tick:    .6875rem;

  --lh-line: .96;  --lh-h1: 1.02;  --lh-h2: 1.1;   --lh-h3: 1.2;
  --lh-body: 1.6;  --lh-note: 1.45; --lh-meta: 1.35;
  --tr-line: -.028em; --tr-h1: -.012em; --tr-h2: -.01em;

  /* space (4px base) */
  --s-1: .25rem;  --s-2: .5rem;  --s-3: .75rem;  --s-4: 1rem;  --s-5: 1.5rem;
  --s-6: 2rem;    --s-7: 3rem;   --s-8: 4.5rem;  --s-9: 6rem;  --s-10: 9rem;

  /* layout */
  --gut:        clamp(16px, 5vw, 72px);
  --col-gap:    clamp(16px, 2vw, 24px);
  --page-max:   1600px;
  --page-pad:   max(var(--gut), calc((100vw - var(--page-max)) / 2));
  --sheet-bleed: calc(var(--gut) * -.35);
  --meta-col:   9.2rem;
  --note-col:   15.5rem;
  --measure:    34em;
  --measure-voice: 26em;

  /* shape */
  --r-btn: 3px;
  --r-focus: 2px;
  --shadow-sheet: 0 1px 1px rgba(0, 34, 51, .05), 0 12px 28px -16px rgba(0, 34, 51, .22);
  --stamp: 3px 3px 0 0 var(--gold);
  --stroke-pen: 2.2px;
  --stroke-pencil: 1.4px;
  --focus-ring: 3px solid var(--pen);   /* 5:1 on paper and on the sheet; the colophon swaps in --green-light */

  /* motion */
  --ease-pen: cubic-bezier(.6, .05, .3, 1);
  --ease-ui:  cubic-bezier(.3, .7, .2, 1);
  --t-ui: .15s;
  --t-pen: .9s;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Lining figures everywhere. !important because every `font:` shorthand resets font-feature-settings
   (CSS Fonts 4), and Playfair's default figures are old-style: 00:00:33 would read "oo:oo:33". */
* { font-feature-settings: "lnum" 1, "kern" 1 !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background-color: var(--paper);
  /* paper grain, 6%, inline SVG noise: zero requests */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .17 0 0 0 0 .23 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
p, ul, ol, dl, figure, blockquote, h1, h2, h3, h4 { margin: 0; }
ul, ol { padding: 0; }
p { text-wrap: pretty; }
button, input, select, textarea { font: inherit; color: inherit; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
code, kbd, .mono { font-family: var(--mono); font-feature-settings: "tnum" 1, "lnum" 1, "kern" 1 !important; }
code { font-size: .9em; }
.mono { font-size: var(--fs-meta); line-height: var(--lh-meta); }
del, ins { text-decoration: none; }
b, strong { font-weight: 600; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 500; color: var(--navy); }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); }
.h2--feature { font-size: var(--fs-h2-feature); line-height: 1.02; letter-spacing: var(--tr-h1); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h1 .l1, h2 .l1 { display: block; }
h1 .l2, h2 .l2 { display: block; font-style: italic; font-weight: 400; color: var(--navy-mid); }
i, em { font-style: italic; }

/* ---------- links ---------- */
a { color: inherit; text-decoration: underline; text-decoration-color: var(--navy-light); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--pen-stroke); text-decoration-thickness: 2px; }
/* a link on a line of its own that is not a pen door: plain underline, sized for the thumb (round 2) */
.more { display: inline-block; padding-block: 10px; font: 600 var(--fs-ui)/1.35 var(--sans); color: var(--navy); }
.more:hover { color: var(--pen); }

/* ---------- focus ---------- */
:focus-visible { outline: var(--focus-ring); outline-offset: 3px; border-radius: var(--r-focus); }

/* ---------- helpers ---------- */
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 20; background: var(--navy); color: var(--on-navy); padding: 10px 16px; font-weight: 600; text-decoration: none; border-radius: var(--r-btn); }
.skip:focus { top: 8px; }
.nw { white-space: nowrap; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- print ---------- */
@media print {
  body { background: #fff; color: #000; font-size: 11pt; min-height: 0; }
  .site-header, .skip, .bench-controls, .player-ctl, .scrub, .fmt, .miniform, .divider, .colophon > :not(.print-line) { display: none !important; }
  .colophon { background: none !important; color: #000 !important; padding: 12pt 0 0 !important; margin: 0 !important; border-top: 1px solid #999; }
  .colophon .print-line { display: block !important; font-size: 9pt; }
  .ink.draw { animation: none !important; clip-path: none !important; }
  a { text-decoration: none; }
  .sheet { box-shadow: none !important; }
}