/* Pricep: the Romanian school notebook raised to a fine book. Parchment and ink, a red margin rule down the page,
   squared paper for mathematics, writing lines for Romanian, the teacher's red for what matters.
   One family (Alegreya, roman and italic, OFL), self-hosted in assets/. The drawings and the guides are computed
   and checked in tools/figures.ts; the colours are checked in tools/contrast.ts.

   THE PENCILS, shared with the trainers (matematica/, romana/). Every chapter of a trainer owns a coloured pencil;
   the page wears the same pencils where they mean something. Each pencil has a paint (fills, lines, hatching, at
   least 3:1 on the sheet; crom excepted, which is only a fill) and a text tone (AA on paper and sheet), by daylight
   and by lamplight:
       id          name                  paint day  text day   paint night  text night
       prusia      Albastru de Prusia    #1f4f8f    #1e4f8f    #6f9de0      #93b6ec    the pencil of mathematics
       ultramarin  Ultramarin            #3a49c0    #3442b0    #8794f2      #a9b3f7
       violet      Violet de mangan      #6c3fa5    #5f3593    #b392ec      #c6abf2    the pencil of Romanian
       fucsia      Fucsia                #c0377a    #a32f68    #ee7fb5      #f39cc7
       carmin      Carmin                #b4233c    #a11d34    #ee7086      #f394a4
       cinabru     Cinabru               #d24f29    #b13f1d    #f2875f      #f6a07f
       crom        Galben de crom        #e0a512    #7d5a04    #ecc24a      #f0cf6e
       ocru        Ocru                  #b57a26    #8a5a14    #d9a65c      #e2b87a
       oliv        Verde oliv            #6f7f24    #56631a    #b2c25a      #c3d27a
       veronese    Verde Veronese        #1d8a63    #146b4d    #5ccd9c      #82dbb5
       turcoaz     Turcoaz               #11869a    #0b6973    #4fc8d6      #79d7de
       sepia       Sepia                 #7d4b28    #6e4424    #cf9f78      #dcb393
       grafit      Grafit                #4a4c54    #4a4c54    #b8bcc6      #c9ccd4
   THE LEARNER'S PENCIL: localStorage 'pricep-culoare' holds one of these ids (the pupil picks it in a trainer).
   The head script of every page sets <html data-accent="<id>">; with no choice (or an unknown id) the learner's
   mark stays the teacher's red. Older names are accepted as aliases: albastru = ultramarin, verde = veronese,
   portocaliu = cinabru, roz = fucsia (so violet, turcoaz and grafit keep their meaning too). On this page the
   learner's pencil colours only the learner's own marks: arc AC (Fig. 1), the point G (Fig. 2), today's ring
   (Fig. 3); where it would match a step of Fig. 1 or a median of Fig. 2, that figure keeps the teacher's red. Wood
   of a sharpened pencil: --lemn; the stamp's ink: --cerneala; the inside cover: --panza. */

/* ---------- 1. Fonts ---------- */
@font-face { font-family: Alegreya; src: url("assets/alegreya.woff2") format("woff2"); font-style: normal; font-weight: 400 700; font-display: swap; }
@font-face { font-family: Alegreya; src: url("assets/alegreya-italic.woff2") format("woff2"); font-style: italic; font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Serif fallback"; src: local("Palatino Linotype"), local("Palatino"), local("Book Antiqua"), local("P052-Roman"), local("Georgia"); size-adjust: 96%; }

/* ---------- 2. Tokens: paper and ink; by daylight, then by lamplight ---------- */
:root {
  --paper: #f4efe5;      /* the page */
  --sheet: #fbf8f1;      /* the notebook's leaves, a shade lighter */
  --ink: #24201b;
  --ink2: #574e42;       /* secondary text: 7.4:1 on paper */
  --rubric: #93301f;     /* the teacher's red, for text: 7.2:1 on paper */
  --margine: #c4513b;    /* the margin rule of the caiet (decoration) */
  --frame: #d2c7b2;      /* frames and hairlines */
  --tick: #b3a58d;       /* ticks, leaders, crop marks (decoration) */
  --ruling: #6f8fb0;     /* the blue ruling of the paper: writing lines, construction (decoration) */
  --grila: rgba(86, 124, 163, .24);  /* squared paper (decoration) */
  --wash: rgba(147, 48, 31, .05);
  --verde: #2f6a3c;      /* "done", on the moving page: 6.1:1 on sheet */
  /* the pencils the page wears (the table at the top): paint, then text tone */
  --p-prusia: #1f4f8f; --p-prusia-t: #1e4f8f; --p-violet: #6c3fa5; --p-violet-t: #5f3593;
  --p-turcoaz: #11869a; --p-turcoaz-t: #0b6973; --p-veronese: #1d8a63; --p-veronese-t: #146b4d;
  --p-ocru: #b57a26; --p-ocru-t: #8a5a14; --p-fucsia: #c0377a; --p-fucsia-t: #a32f68;
  --p-crom-l: #a8780c; --p-crom-t: #7d5a04;   /* chrome yellow: its paint is a fill only; lines take this deeper tone */
  --p-ultramarin: #3a49c0; --p-ultramarin-t: #3442b0;
  /* the highlighters, laid over the paper: the colour, how much of it covers, and where the stroke starts (from the
     top of the line; by daylight a broad stroke, by lamplight a band low on the letters) */
  --marker: #ffe04a; --marker-a: 60%; --marker-roz: #ffa6cc; --marker-roz-a: 55%; --rima-a: 60%;
  --marker-sus: 12%; --rima-sus: 24%;
  /* the doors' wash: how much of the subject's pencil tints the leaf, at rest and under the pointer */
  --spalat: 5%; --spalat-hover: 8%;
  --lemn: #e3c391; --lemn-umbra: #b88f5c;   /* the wood of a sharpened pencil */
  --cerneala: #b3412f;   /* the stamp's ink */
  --panza: #5b2119; --panza-ink: #f3e7d2; --panza-ink2: #d9c3a6; --aur: #c49a3c; --aur2: #e7c873;   /* the inside cover: book cloth and gold */
  /* the learner's own mark (arc AC, the point G): the teacher's red, or the colour chosen in the trainers */
  --mark-l: var(--rubric); --mark-d: var(--rubric); --mark: var(--mark-l);
  --font: Alegreya, "Serif fallback", Georgia, "Times New Roman", serif;
  --sageata: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M1 6h19.4M15.2 1.5 20.4 6l-5.2 4.5' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme: light;
}
/* the learner's pencil (pricep-culoare), a graphic on the sheet: its paint, by day and by lamplight (chrome yellow
   takes its text tone by day, its paint being too pale for a line) */
:root[data-accent="prusia"] { --mark-l: #1f4f8f; --mark-d: #6f9de0; }
:root[data-accent="ultramarin"] { --mark-l: #3a49c0; --mark-d: #8794f2; }
:root[data-accent="violet"] { --mark-l: #6c3fa5; --mark-d: #b392ec; }
:root[data-accent="fucsia"] { --mark-l: #c0377a; --mark-d: #ee7fb5; }
:root[data-accent="carmin"] { --mark-l: #b4233c; --mark-d: #ee7086; }
:root[data-accent="cinabru"] { --mark-l: #d24f29; --mark-d: #f2875f; }
:root[data-accent="crom"] { --mark-l: #7d5a04; --mark-d: #ecc24a; }
:root[data-accent="ocru"] { --mark-l: #b57a26; --mark-d: #d9a65c; }
:root[data-accent="oliv"] { --mark-l: #6f7f24; --mark-d: #b2c25a; }
:root[data-accent="veronese"] { --mark-l: #1d8a63; --mark-d: #5ccd9c; }
:root[data-accent="turcoaz"] { --mark-l: #11869a; --mark-d: #4fc8d6; }
:root[data-accent="sepia"] { --mark-l: #7d4b28; --mark-d: #cf9f78; }
:root[data-accent="grafit"] { --mark-l: #4a4c54; --mark-d: #b8bcc6; }
/* older names, still accepted */
:root[data-accent="albastru"] { --mark-l: #3a49c0; --mark-d: #8794f2; }
:root[data-accent="verde"] { --mark-l: #1d8a63; --mark-d: #5ccd9c; }
:root[data-accent="portocaliu"] { --mark-l: #d24f29; --mark-d: #f2875f; }
:root[data-accent="roz"] { --mark-l: #c0377a; --mark-d: #ee7fb5; }
/* a pencil that keys a step of a figure, or looks like one, would make the learner's mark read as one more step:
   there the mark keeps the teacher's red. Fig. 1 keys its steps in turquoise, ochre and Veronese green (chrome yellow
   and sepia sit too close to the ochre); Fig. 2 its medians in Prussian blue, ochre and Veronese green (ultramarine
   sits too close to the Prussian blue). tools/contrast.ts checks that every other pencil stays clear of them. */
:root:is([data-accent="turcoaz"], [data-accent="ocru"], [data-accent="veronese"], [data-accent="verde"], [data-accent="crom"], [data-accent="sepia"]) :is(.fig-erou, .erou-fig .k-arc) { --mark: var(--rubric); }
:root:is([data-accent="prusia"], [data-accent="ultramarin"], [data-accent="albastru"], [data-accent="ocru"], [data-accent="veronese"], [data-accent="verde"], [data-accent="crom"], [data-accent="sepia"]) .fig-centru { --mark: var(--rubric); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #191713; --sheet: #201d18; --ink: #ece3d2; --ink2: #b6ab97; --rubric: #ee9a80;
  --margine: #a8503c; --frame: #423b31; --tick: #6a5f50; --ruling: #7d9cc0; --grila: rgba(125, 158, 196, .15);
  --wash: rgba(238, 154, 128, .06); --verde: #96c9a0; --mark: var(--mark-d);
  --p-prusia: #6f9de0; --p-prusia-t: #93b6ec; --p-violet: #b392ec; --p-violet-t: #c6abf2;
  --p-turcoaz: #4fc8d6; --p-turcoaz-t: #79d7de; --p-veronese: #5ccd9c; --p-veronese-t: #82dbb5;
  --p-ocru: #d9a65c; --p-ocru-t: #e2b87a; --p-fucsia: #ee7fb5; --p-fucsia-t: #f39cc7;
  --p-crom-l: #ecc24a; --p-crom-t: #f0cf6e; --p-ultramarin: #8794f2; --p-ultramarin-t: #a9b3f7;
  --marker: #d6aa48; --marker-a: 48%; --marker-roz: #ee7fb5; --marker-roz-a: 42%; --rima-a: 48%;   /* by lamplight: soft gold, soft rose, a band low under light ink */
  --marker-sus: 58%; --rima-sus: 56%; --spalat: 9%; --spalat-hover: 13%;
  --lemn: #c9a676; --lemn-umbra: #8d6c45; --cerneala: #e0846a;
  --panza: #3b1611; --panza-ink: #f1e3cc; --panza-ink2: #cdb596; --aur: #b38a35; --aur2: #e2c26c;
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --paper: #191713; --sheet: #201d18; --ink: #ece3d2; --ink2: #b6ab97; --rubric: #ee9a80;
  --margine: #a8503c; --frame: #423b31; --tick: #6a5f50; --ruling: #7d9cc0; --grila: rgba(125, 158, 196, .15);
  --wash: rgba(238, 154, 128, .06); --verde: #96c9a0; --mark: var(--mark-d);
  --p-prusia: #6f9de0; --p-prusia-t: #93b6ec; --p-violet: #b392ec; --p-violet-t: #c6abf2;
  --p-turcoaz: #4fc8d6; --p-turcoaz-t: #79d7de; --p-veronese: #5ccd9c; --p-veronese-t: #82dbb5;
  --p-ocru: #d9a65c; --p-ocru-t: #e2b87a; --p-fucsia: #ee7fb5; --p-fucsia-t: #f39cc7;
  --p-crom-l: #ecc24a; --p-crom-t: #f0cf6e; --p-ultramarin: #8794f2; --p-ultramarin-t: #a9b3f7;
  --marker: #d6aa48; --marker-a: 48%; --marker-roz: #ee7fb5; --marker-roz-a: 42%; --rima-a: 48%;   /* by lamplight: soft gold, soft rose, a band low under light ink */
  --marker-sus: 58%; --rima-sus: 56%; --spalat: 9%; --spalat-hover: 13%;
  --lemn: #c9a676; --lemn-umbra: #8d6c45; --cerneala: #e0846a;
  --panza: #3b1611; --panza-ink: #f1e3cc; --panza-ink2: #cdb596; --aur: #b38a35; --aur2: #e2c26c;
  color-scheme: dark;
}

/*gen:ghiduri*/
:root {
  /* generated by tools/figures.ts from Alegreya Italic's measured metrics (tools/metrics.json); do not edit by hand */
  --lh-erou: 1.2em;                 /* line box of the slogan */
  --lh-vers: 2.6em;                 /* line box of a verse line */
  --semn-sus: -0.0195em;   /* centre of a scansion mark, from the top of its syllable's inline box */
  --semn-aplecare: 0.123em;   /* tan 8.7° × its height above the middle of the x-height band */
  --ghid-erou: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 124 120' preserveAspectRatio='none'%3E%3Cpath d='M0 20.25H124M0 117.05H124' stroke='%23000' stroke-opacity='.55' stroke-width='1.1'/%3E%3Cpath d='M0 47.15H124' stroke='%23000' stroke-opacity='.8' stroke-width='1.1'/%3E%3Cpath d='M0 93.55H124' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M-54.59 20.25L-69.41 117.05M69.41 20.25L54.59 117.05M193.41 20.25L178.59 117.05' stroke='%23000' stroke-opacity='.45' stroke-width='1'/%3E%3C/svg%3E");
  --ghid-vers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 260' preserveAspectRatio='none'%3E%3Cpath d='M0 90.25H90M0 187.05H90' stroke='%23000' stroke-opacity='.55' stroke-width='1.76'/%3E%3Cpath d='M0 117.15H90' stroke='%23000' stroke-opacity='.8' stroke-width='1.76'/%3E%3Cpath d='M0 163.55H90' stroke='%23000' stroke-width='2.4'/%3E%3Cpath d='M-37.59 90.25L-52.41 187.05M52.41 90.25L37.59 187.05M142.41 90.25L127.59 187.05' stroke='%23000' stroke-opacity='.45' stroke-width='1.6'/%3E%3C/svg%3E");
  --semn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%23b9412e'/%3E%3Cg fill='%23fff' transform='rotate(-90 16 16)'%3E%3Crect x='14.5' y='4.6' width='4.4' height='15.6' rx='1.4'/%3E%3Crect x='8.7' y='10.2' width='16' height='4.4' rx='1.4'/%3E%3Crect x='8.7' y='21.6' width='16' height='4.4' rx='1.4'/%3E%3C/g%3E%3C/svg%3E");   /* the ± on the move page's name */
  /* the colour keys of Fig. 1's caption: each step's mark, drawn as on the figure (the colour comes from its pencil) */
  --cheie-cerc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8.4' r='6.3' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Cpath d='M1.7 8.4H14.3' stroke='%23000' stroke-width='1.1'/%3E%3Ccircle cx='1.7' cy='8.4' r='1.55'/%3E%3Ccircle cx='14.3' cy='8.4' r='1.55'/%3E%3Ccircle cx='8' cy='8.4' r='1.2'/%3E%3C/svg%3E");
  --cheie-echi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 13.6L14.5 13.6L8 2.34Z' fill='%23000' fill-opacity='.38' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
  --cheie-unghi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.34 6.9L14.6 13.4L1.6 13.4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M7.4 13.4A7.2 7.2 0 0 1 8.36 9.8' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E");
  --cheie-drept: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14 13.6H2.4V2' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M7 13.6V9H2.4' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E");
  --cheie-arc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 7.01A12 12 0 0 1 14 7.01' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
/*/gen:ghiduri*/

/* ---------- 3. Page grid ----------
   One notebook page: a margin column (numerals, the teacher's notes), the red margin rule, and the text column.
   Phones: the margin shrinks to the rule alone. */
:root {
  --pad: 16px; --marg: 0px; --gap: 20px; --maxw: 1440px;
  --fs: 1.125rem; --fs-small: 1rem; --fs-cap: .9375rem;
}
@media (min-width: 700px) { :root { --pad: 32px; --marg: 64px; --gap: 32px; --fs: 1.1875rem; } }
@media (min-width: 1100px) { :root { --pad: 48px; --marg: 168px; --gap: 48px; --fs-small: 1.0625rem; --fs-cap: 1rem; } }
@media (min-width: 1600px) { :root { --marg: 220px; --gap: 56px; --fs: 1.25rem; --fs-small: 1.125rem; --fs-cap: 1.0625rem; --maxw: 1560px; } }
@media (min-width: 2200px) { html { zoom: 1.3; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--paper); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: var(--fs); line-height: 1.55;
  font-variant-numeric: oldstyle-nums proportional-nums; font-kerning: normal;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--rubric); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4, p, dl, dd, ol, figure, blockquote { margin: 0; }
.nw { white-space: nowrap; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* read aloud, not shown */
.sari { position: absolute; left: var(--pad); top: -4rem; background: var(--ink); color: var(--paper); padding: .5rem .9rem; z-index: 5; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.sari:focus { top: .75rem; }

.kicker {
  font-feature-settings: "c2sc", "smcp"; letter-spacing: .13em; font-size: var(--fs-cap); font-weight: 500;
  color: var(--rubric); font-variant-numeric: oldstyle-nums proportional-nums; /* digits at small-cap height */
}
.punct { letter-spacing: 0; margin: 0 .35em; color: var(--tick); }
.curand { /* a quiet stamp: what is announced, not yet open; square and hairline, like every frame on the page. No
              margin of its own: its heading's flex gap spaces it, so it never stands indented when it wraps */
  display: inline-block; font-style: italic; font-feature-settings: normal; letter-spacing: 0; font-weight: 400;
  font-size: max(.8em, .875rem); line-height: 1.25; color: var(--rubric); white-space: nowrap; vertical-align: baseline;
  padding: .06em .5em .12em; border: 1px solid color-mix(in srgb, var(--rubric) 32%, var(--frame));
}
/* line breaks: short blurbs are balanced in every browser; longer paragraphs avoid a stub last line, with pretty where
   the browser has it (Chrome, Safari) and with balance where it does not (Firefox) */
.rg .d, .tarif-nota, .usa-ce, .surse, .usi-nota, .usi-parinte, .fig-cap, .vers-sursa, .sin figcaption { text-wrap: balance; }
.lead, .sec-lead, .note p, .inca-nu, .mai-departe p, .rezolvare .r-rand, .rezolvare .r-sursa, .text { text-wrap: pretty; }
@supports not (text-wrap: pretty) { .lead, .sec-lead, .note p, .inca-nu, .mai-departe p, .rezolvare .r-rand, .rezolvare .r-sursa, .text { text-wrap: balance; } }
/* the drawn arrow on every door: a line and an open head, in the teacher's red */
.sageata { display: block; flex: none; width: 1.375rem; height: .75rem; overflow: visible; }
.sageata path { fill: none; stroke: var(--rubric); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
/* the fold (details.plus), for what a reader may skip: a hairline, a line in small caps whose words say what it holds
   (with the sums, in italic), and a thin red plus that turns into a minus. The whole line is the target, at least
   44 px tall; a summary never holds a heading. data-pliat on a fold names the widths where it starts closed (the
   page's scripts); without scripts every fold is as the HTML ships it, and print opens them all. */
details.plus > summary {
  list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .7rem; min-height: 44px;
  padding: .7rem 1.8rem .55rem 0; border-top: 1px solid var(--frame); position: relative;
  font-feature-settings: "c2sc", "smcp"; letter-spacing: .1em; font-size: var(--fs-cap); color: var(--ink2);
}
details.plus > summary::-webkit-details-marker { display: none; }
details.plus > summary::after { /* two 1.3 px strokes; open, only the bar stays */
  content: ""; position: absolute; right: .2rem; top: 22px; width: 11px; height: 11px; transform: translateY(-50%);
  background: linear-gradient(var(--rubric), var(--rubric)) center / 11px 1.3px no-repeat, linear-gradient(var(--rubric), var(--rubric)) center / 1.3px 11px no-repeat;
}
details.plus[open] > summary::after { background: linear-gradient(var(--rubric), var(--rubric)) center / 11px 1.3px no-repeat; }
details.plus > summary:hover { color: var(--ink); }
details.plus > summary:focus-visible { outline-offset: 2px; }
details.plus > summary .sum { font-feature-settings: normal; letter-spacing: 0; font-style: italic; font-weight: 400; font-size: var(--fs-small); color: var(--ink2); font-variant-numeric: lining-nums; }
/* the phone folds (details.pe-telefon): below 700 px a section shows its heading and its lead, and the rest waits under
   one line each (the notebook, the notes, the pencil case, the plans); the last line of a section is ruled below too.
   From 700 px the line is hidden and the content is the page, as it always was. */
@media (min-width: 700px) { details.pe-telefon > summary { display: none; } }
@media (max-width: 699px) {
  details.pe-telefon[open] > summary { margin-bottom: .9rem; }
  details.pe-telefon:not(:has(~ details.pe-telefon)):not([open]) { border-bottom: 1px solid var(--frame); }
  .familia { margin-bottom: 0; }
  .familia + details.planuri > summary { border-top: 0; } /* the heading's double rule is the line above it */
}

/* ---------- 4. Running head ----------
   The mark and the two names are 44 px tall targets; the head's own padding gives back what they gained, so the
   head keeps its height. The names' line is a text underline at the baseline, not the foot of the target. */
.cap {
  width: min(100%, var(--maxw)); margin-inline: auto; padding: 13px var(--pad) 12px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; position: relative;
}
.cap::after { /* the top margin line of the page: a double hairline */
  content: ""; position: absolute; left: var(--pad); right: var(--pad); bottom: 0; height: 4px;
  border-top: 1px solid var(--frame); border-bottom: 1px solid var(--frame);
}
.marca { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 1.375rem; letter-spacing: .01em; line-height: 1; min-height: 44px; }
.marca .semn { width: 30px; height: 30px; flex: none; color: var(--ink); }
.cap-nav { display: flex; flex-wrap: wrap; gap: 0 1.4rem; }
.cap-nav a {
  font-feature-settings: "c2sc", "smcp"; letter-spacing: .12em; font-size: var(--fs-cap); color: var(--ink2);
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: underline 1px transparent; text-underline-offset: .62em; text-decoration-skip-ink: none;
}
.cap-nav a:hover { color: var(--ink); text-decoration-color: var(--rubric); }
@media (max-width: 520px) {
  .cap { padding-top: 8px; padding-bottom: 6px; }
  .marca { font-size: 1.25rem; gap: .45rem; } .marca .semn { width: 26px; height: 26px; }
  .cap-nav { column-gap: .9rem; } .cap-nav a { letter-spacing: .06em; font-size: .9375rem; }
}
@media (max-width: 359px) { .cap { row-gap: 0; } } /* the names wrap under the mark: two rows of targets, no gap between */

/* ---------- 5. The page and its margin rule ---------- */
.caiet {
  position: relative; width: min(100%, var(--maxw)); margin-inline: auto;
  padding: 0 var(--pad) 0 calc(var(--pad) + var(--marg) + var(--gap));
}
.caiet::before { /* the red margin rule, double, the whole height of the page */
  content: ""; position: absolute; top: -4px; bottom: 0; width: 4px;
  left: calc(var(--pad) + var(--marg) + var(--gap) / 2 - 2px);
  border-left: 1px solid var(--margine); border-right: 1px solid color-mix(in srgb, var(--margine) 45%, transparent);
  pointer-events: none;
}
@media (max-width: 699px) { .caiet::before { left: calc(var(--pad) - 1px); } .caiet { padding-left: calc(var(--pad) + 18px); } }

/* ---------- 6. Hero: the words and the doors on the left, the construction on the right ---------- */
.erou { display: grid; gap: 2.75rem; padding: clamp(2.25rem, 6vh, 4.5rem) 0 clamp(1rem, 3vh, 2.5rem); }
@media (max-width: 699px) { .erou { padding-top: 1.5rem; gap: 1.9rem; } }
.erou-text { container-type: inline-size; min-width: 0; }
.erou .kicker { margin-bottom: 1rem; position: relative; }
.erou .kicker::before { /* the knot on the margin rule where the page begins */
  content: ""; position: absolute; top: .3em; width: 11px; height: 11px; border-radius: 50%;
  left: calc(-1 * var(--gap) / 2 - 5.5px); background: var(--rubric); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--margine);
}
@media (max-width: 699px) { .erou .kicker { margin-bottom: .65rem; } .erou .kicker::before { left: -23px; } }
@container (max-width: 334px) { .erou .kicker .punct { display: none; } .erou .kicker > .nw { display: block; } }
/* the note's asterisk: a target 44 px each way, by a padding that moves neither the line nor the letters beside it */
.nota-ref { color: var(--rubric); text-decoration: none; font-feature-settings: normal; font-size: 1.15em; line-height: 0; position: relative; top: -.05em; padding: 11px 18px; margin: 0 -18px 0 calc(.08em - 18px); }
.nota-ref:hover { color: var(--ink); }
.nota-ref:focus-visible { outline: none; } /* the keyboard's ring is a circle round the mark, not round the padding */
.nota-ref:focus-visible::before { content: ""; position: absolute; left: 50%; top: 50%; width: 1.05em; height: 1.05em; transform: translate(-50%, -66%); border: 2px solid var(--rubric); border-radius: 50%; box-sizing: border-box; }
h1 { /* sized to its column: "Înveți câte puțin" is 6.68 em, so 13.4cqi fills ninety per cent of it */
  font-weight: 450; font-size: clamp(2.25rem, 13.4cqi, 4.25rem); line-height: 1.04; letter-spacing: -.012em; color: var(--ink);
}
h1 .r1 { display: block; }
h1 .nb { display: inline-block; }
h1 .r2 { display: block; position: relative; font-style: italic; color: var(--rubric); font-weight: 400; line-height: var(--lh-erou); margin-top: .03em; }
h1 .r2::before { /* the writing guides under the slogan, from the margin rule, fading out */
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--gap) / 2 + 3px); right: 0;
  background: linear-gradient(to right, var(--ruling) 0, var(--ruling) 55%, transparent 98%);
  -webkit-mask: var(--ghid-erou) 0 0 / 1.24em var(--lh-erou) repeat; mask: var(--ghid-erou) 0 0 / 1.24em var(--lh-erou) repeat;
  opacity: .4; pointer-events: none;
}
@media (max-width: 699px) { h1 .r2::before { left: -17px; } }
h1 .ghid { position: relative; }
.lead { margin-top: clamp(1.4rem, 3vh, 2rem); font-size: clamp(1.125rem, .95rem + .4vw, 1.375rem); line-height: 1.5; color: var(--ink2); max-width: 31em; }

/* the doors: two leaves in a double hairline, outlined, never solid slabs */
.usi { display: grid; gap: .75rem; margin-top: clamp(1.5rem, 3.4vh, 2.25rem); max-width: 36rem; }
@media (max-width: 699px) { .usi { margin-top: 1.2rem; gap: .5rem; } }
.usa-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 1.1rem;
  padding: .85rem 1.2rem .85rem 1rem; color: var(--ink); text-decoration: none; background: var(--sheet);
  border: 1px solid var(--frame); box-shadow: inset 0 0 0 3px var(--sheet), inset 0 0 0 4px color-mix(in srgb, var(--frame) 70%, transparent);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.usa-card:hover { border-color: var(--tick); background: color-mix(in srgb, var(--sheet) 70%, var(--paper)); box-shadow: inset 0 0 0 3px var(--sheet), inset 0 0 0 4px var(--tick); }
.usa-card:focus-visible { outline-offset: 4px; }
.usa-semn { width: 2.75rem; height: 2.75rem; flex: none; }
.usa-text { display: grid; }
.usa-tip { font-feature-settings: "c2sc", "smcp"; letter-spacing: .14em; font-size: .875rem; line-height: 1.25; color: var(--ink2); font-weight: 500; }
.usa-titlu { font-size: 1.5rem; line-height: 1.15; font-weight: 500; }
.usa-ce { font-style: italic; color: var(--ink2); font-size: 1rem; line-height: 1.35; }
.usa-sag { width: 1.5rem; height: .82rem; transition: transform .25s ease; }
.usa-card:hover .usa-sag { transform: translateX(4px); }
.usi-nota { font-style: italic; color: var(--ink2); font-size: var(--fs-small); margin-top: .2rem; padding-left: .1rem; }
.usi-parinte { font-style: italic; color: var(--ink2); font-size: var(--fs-small); margin-top: -.55rem; padding-left: .1rem; }
.usi-parinte a, .sec-lead a, .h2 a, .leg-parere { color: var(--rubric); text-decoration-thickness: 1px; text-underline-offset: .2em; padding-block: 12px; } /* inline, in a sentence: the padding makes the target 44 px tall without moving the lines */
.usi-parinte a:hover, .sec-lead a:hover, .h2 a:hover, .leg-parere:hover { color: var(--ink); }
.leg-parere { font: inherit; background: none; border: 0; padding-inline: 0; margin: -12px 0; cursor: pointer; text-decoration: underline; } /* a button that reads as the colophon's links */
.parere-rand { font-size: var(--fs-small); margin-top: .25rem; }
@media (min-width: 640px) and (max-width: 999px) { .usi { grid-template-columns: 1fr 1fr; max-width: none; } .usi-nota, .usi-parinte { grid-column: 1 / -1; } }
@media (max-width: 400px) { .usa-card { column-gap: .85rem; padding-inline: .85rem .95rem; } .usa-semn { width: 2.4rem; height: 2.4rem; } .usa-titlu { font-size: 1.375rem; } .usa-ce { font-size: .9375rem; } }
/* phones: the bottom-right corner belongs to the servos bar (three 40 px buttons, 12 px from the edges). The doors step
   aside: they end 60 px from the right edge, so no part of them, the arrows included, ever lies under it. */
@media (max-width: 699px), (hover: none) and (pointer: coarse) and (max-height: 520px) { .usi { margin-right: 44px; } }
/* a door narrower than about 260 px: the arrow leaves its own column and stands at the top, beside "Antrenor", so the
   subject's name keeps one line */
@container (max-width: 305px) {
  .usa-card { grid-template-areas: "semn tip sag" "semn titlu titlu" "semn ce ce"; }
  .usa-card .usa-text { display: contents; }
  .usa-semn { grid-area: semn; } .usa-tip { grid-area: tip; } .usa-titlu { grid-area: titlu; } .usa-ce { grid-area: ce; }
  .usa-card .usa-sag { grid-area: sag; align-self: center; }
}
/* the tiles inside the doors */
.u-grila { stroke: var(--grila); stroke-width: 1; fill: none; }
.u-ink { stroke: var(--ink); stroke-width: 1.4; fill: none; stroke-linejoin: round; }
.u-drept { stroke: var(--rubric); stroke-width: 1.3; fill: none; }
.u-sl { stroke: var(--ruling); stroke-width: .8; opacity: .55; fill: none; }
.u-g { stroke: var(--ruling); stroke-width: .9; opacity: .7; fill: none; }
.u-x { stroke: var(--ruling); stroke-width: .9; stroke-dasharray: 2 2; opacity: .8; fill: none; }
.u-b { stroke: var(--ruling); stroke-width: 1.3; fill: none; }
.u-a { font-family: var(--font); font-style: italic; fill: var(--ink); }

/* Fig. 1 */
.erou-fig { min-width: 0; max-width: 35rem; }
.erou-desen { container-type: inline-size; }
.erou-desen svg { display: block; width: 100%; height: auto; overflow: visible; }
.fig-ingust { display: none !important; }
@container (max-width: 400px) { .fig-lat { display: none !important; } .fig-ingust { display: block !important; } }
.erou-fig .rezolvare { margin-top: 1.1rem; }
@media (max-width: 699px) { .erou-fig .rezolvare { margin-top: .75rem; } }
.erou-fig details.pasi { margin-top: .1rem; }
.plus-in { display: grid; gap: .3rem; padding: .25rem 0 .2rem; } /* the five steps, in their fold */
@media (min-width: 700px) and (max-width: 999px) {
  .erou-fig { max-width: none; display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); column-gap: clamp(1.5rem, 3.5vw, 2.5rem); align-items: start; }
  .erou-fig .rezolvare { margin-top: 0; }
}
@media (min-width: 834px) { /* the column beside the drawing has room for the five steps: they read as the caption, with no fold line */
  .erou-fig details.pasi { margin-top: 0; } .erou-fig details.pasi > .plus-in { padding: 0; }
  .erou-fig details.pasi > summary { display: none; }
}
.fig-cap { display: block; margin-bottom: .35rem; font-feature-settings: "c2sc", "smcp"; letter-spacing: .1em; font-size: var(--fs-cap); color: var(--ink2); }
.fig-nr { color: var(--rubric); margin-right: .45em; font-variant-numeric: oldstyle-nums proportional-nums; } /* in small caps: 1 must not read as I */
@media (min-width: 1000px) {
  .erou {
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(360px, 34vw, 560px)); column-gap: clamp(2.5rem, 5vw, 5.5rem); align-items: start;
    padding-top: clamp(2rem, 5.5vh, 4rem);
  }
  h1 { font-size: clamp(3rem, 13.4cqi, 6rem); }
  .erou-fig { margin-top: .4rem; max-width: none; }
}

/* the drawings: squared paper, the figure in ink, the learner's mark; Fig. 1 is coloured as a solution in steps,
   one pencil a step, and its caption's bullets carry the same keys: the compass and the equilateral triangle AOC
   (washed) with its 60° in turquoise, the inscribed 30° in ochre, the right angle in Veronese green */
.desen text { font-family: var(--font); }
.g-foaie { fill: var(--sheet); stroke: var(--frame); stroke-width: 1; }
.g-grid { stroke: var(--grila); stroke-width: 1; fill: none; }
.g-frame2 { fill: none; stroke: var(--tick); stroke-width: 1; }
.g-tick { stroke: var(--tick); stroke-width: 1; fill: none; }
.g-coord { fill: var(--ink2); font-size: 12px; font-variant-numeric: lining-nums tabular-nums; }
.g-coord .u { font-style: italic; }
.g-axis { stroke: var(--ink2); stroke-width: .8; fill: none; opacity: .75; }
.g-constr { stroke: var(--p-turcoaz); stroke-width: 1.1; fill: none; }
.g-ac { stroke: var(--p-turcoaz); stroke-width: 1; fill: none; }
.g-echi { fill: color-mix(in srgb, var(--p-turcoaz) 14%, transparent); stroke: none; }
.g-egal { stroke: var(--p-turcoaz); stroke-width: 1.5; fill: none; }
.g-ink { stroke: var(--ink); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.g-thin { stroke: var(--ink); stroke-width: 1; fill: none; }
.g-acc { stroke: var(--mark); stroke-width: 3; fill: none; stroke-linecap: round; }
.g-drept { stroke: var(--p-veronese); stroke-width: 1.6; fill: none; }
.g-unghi-r { stroke: var(--p-ocru); stroke-width: 1.6; fill: none; }
.g-unghi { stroke: var(--p-turcoaz); stroke-width: 1.5; fill: none; }
.g-dot { fill: var(--ink); }
.g-dim { stroke: var(--ink2); stroke-width: .8; fill: none; }
.g-arrow { fill: var(--ink2); }
.g-pt, .g-val, .g-dimtext { paint-order: stroke; stroke: var(--sheet); stroke-width: 4px; stroke-linejoin: round; }
.g-pt { font-style: italic; font-size: 19px; fill: var(--ink); }
.fig-ingust .g-pt { font-size: 17px; }
.g-val { font-size: 13.5px; fill: var(--p-turcoaz-t); font-variant-numeric: lining-nums; }
.g-val.r { fill: var(--p-ocru-t); }
.g-dimtext { font-size: 13px; fill: var(--ink2); font-variant-numeric: lining-nums; }
.g-acc-fill { fill: var(--mark); }
/* Fig. 2: each median and the ticks of the side it halves in one pencil */
.g-med { stroke-width: 1.35; fill: none; }
.g-med-t { stroke-width: 1.6; fill: none; }
.fig-centru .m1 { stroke: var(--p-prusia); } .fig-centru .m2 { stroke: var(--p-ocru); } .fig-centru .m3 { stroke: var(--p-veronese); }
.c-m1 { color: var(--p-prusia-t); } .c-m2 { color: var(--p-ocru-t); } .c-m3 { color: var(--p-veronese-t); }
.g-g-halo { fill: var(--sheet); stroke: var(--mark); stroke-width: 1; }

/* the solution under a figure, as a pupil writes it */
.rezolvare { display: grid; align-content: start; gap: .3rem; font-size: var(--fs-small); line-height: 1.5; color: var(--ink); font-variant-numeric: lining-nums proportional-nums; }
@media (max-width: 699px) { .rezolvare { line-height: 1.45; gap: .15rem; } }
.rezolvare .r-rand { display: block; padding-left: 1.1rem; position: relative; }
.rezolvare .r-rand::before { content: ""; position: absolute; left: .1rem; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--rubric); }
/* Fig. 1's bullets: a colour key each, the mark its step leaves on the drawing, in that step's pencil */
.rezolvare .r-rand:is(.k-cerc, .k-echi, .k-unghi, .k-drept, .k-arc) { padding-left: 1.55rem; }
.rezolvare .r-rand:is(.k-cerc, .k-echi, .k-unghi, .k-drept, .k-arc)::before {
  width: 1em; height: 1em; left: 0; top: .26em; border-radius: 0; background: var(--k);
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
.k-cerc { --k: var(--ink); --m: var(--cheie-cerc); }
.k-echi { --k: var(--p-turcoaz); --m: var(--cheie-echi); }
.k-unghi { --k: var(--p-ocru); --m: var(--cheie-unghi); }
.k-drept { --k: var(--p-veronese); --m: var(--cheie-drept); }
.k-arc { --k: var(--mark); --m: var(--cheie-arc); }
.rezolvare i { font-style: italic; }
.rezolvare .r-sursa { display: block; margin-top: .45rem; font-feature-settings: "c2sc", "smcp"; letter-spacing: .1em; color: var(--ink2); font-size: var(--fs-cap); font-variant-numeric: oldstyle-nums proportional-nums; }
@media (max-width: 699px) { .rezolvare .r-sursa { letter-spacing: .06em; } } /* the exam's reference keeps to two lines on a phone */
.ung { width: .7em; height: .7em; display: inline-block; vertical-align: -.04em; margin: 0 .08em 0 .03em; overflow: visible; }
.ung path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.fr { font-variant-numeric: diagonal-fractions lining-nums; }

/* ---------- 7. Sections ---------- */
.sectiune { padding: 2.5rem 0; position: relative; }
.sec-cap { position: relative; max-width: 46rem; margin-bottom: 1.4rem; }
@media (min-width: 700px) {
  .sectiune { padding: clamp(2.75rem, 5vh, 3.75rem) 0; }
  .sec-cap { margin-bottom: clamp(1.5rem, 2.6vh, 2.25rem); }
}
.sec-cap .kicker { margin-bottom: .5rem; }
.sec-cap::before { /* a small ring on the margin rule at each section */
  content: ""; position: absolute; top: .55rem; width: 11px; height: 11px; border-radius: 50%;
  left: calc(-1 * var(--gap) / 2 - 5.5px);
  background: radial-gradient(circle, var(--rubric) 0 1.4px, var(--paper) 1.9px);
  box-shadow: 0 0 0 1px var(--margine);
}
.numeral { display: block; font-size: 2.25rem; line-height: 1; margin-bottom: .45rem; color: var(--rubric); font-weight: 400; }
@media (max-width: 699px) {
  /* the numeral on the kicker's line, the heading under both */
  .sec-cap { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .6rem; align-items: baseline; }
  .sec-cap > * { grid-column: 1 / -1; }
  .sec-cap > .numeral { grid-column: 1; grid-row: 1; font-size: 1.6rem; line-height: 1; margin: 0; }
  .sec-cap > .kicker { grid-column: 2; grid-row: 1; margin: 0 0 .3rem; }
  .sec-cap::before { left: -23px; }
}
@media (min-width: 700px) {
  /* in the margin, the numeral shares the heading's first baseline: both sit in one grid row, aligned by baseline;
     its column is zero wide and the numeral is moved out of it by its own width plus the margin rule's half gap */
  .sec-cap { display: grid; grid-template-columns: 0 minmax(0, 1fr); }
  .sec-cap > .kicker { grid-column: 2; grid-row: 1; }
  .sec-cap > h2 { grid-column: 2; grid-row: 2; align-self: baseline; }
  .sec-cap > .sec-lead { grid-column: 2; grid-row: 3; }
  .sec-cap > .numeral {
    grid-column: 1; grid-row: 2; align-self: baseline; justify-self: start; margin: 0; white-space: nowrap;
    font-size: 2.5rem; line-height: .7; /* a short line box, so it never pushes the heading down */
    transform: translateX(calc(-100% - var(--gap) / 2 - 14px));
  }
}
@media (min-width: 700px) and (max-width: 1099px) { .sec-cap > .pana { grid-column: 2; grid-row: 4; } }
@media (min-width: 1100px) {
  .sec-cap { max-width: 62rem; } /* a heading keeps one line; the lead keeps its 34 em */
  .sec-cap > .numeral { font-size: clamp(2.5rem, 2rem + 1.6vw, 4.25rem); transform: translateX(calc(-100% - var(--gap) / 2 - 22px)); }
}
h2 { font-weight: 450; font-size: clamp(1.875rem, 1.3rem + 1.8vw, 3.25rem); line-height: 1.12; letter-spacing: -.005em; text-wrap: balance; }
.sec-lead { margin-top: 1rem; color: var(--ink2); max-width: 34em; font-size: clamp(1.125rem, 1rem + .3vw, 1.3125rem); text-wrap: pretty; }
@media (max-width: 699px) { .sec-lead { margin-top: .65rem; } }

/* the count to the first paper: a note in the margin on wide pages, a line under the lead elsewhere */
.pana { margin-top: .85rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .6rem; }
@media (max-width: 699px) { .pana { margin-top: .5rem; } }
.pana .et { font-feature-settings: "c2sc", "smcp"; letter-spacing: .12em; font-size: var(--fs-cap); color: var(--ink2); }
.pana .v { font-style: italic; color: var(--rubric); font-size: 1.125em; font-variant-numeric: lining-nums; }
@media (min-width: 1100px) {
  .pana { position: absolute; right: calc(100% + var(--gap) / 2 + 22px); bottom: .15rem; width: calc(var(--marg) - 8px); margin: 0; display: grid; justify-items: end; text-align: right; }
  .pana .et { line-height: 1.3; text-wrap: balance; }
  .pana .v { font-size: 1.5rem; line-height: 1.2; margin-top: .15rem; }
}

/* ---------- 8. The spread: two leaves of the notebook ----------
   Phones show one leaf at a time under two index tabs (radios and :has(), no script; Limba română first, since
   Fig. 1 already shows geometry and Romanian is the first paper). Without :has() both leaves show. From 700 px the
   leaves face each other; each register is folded, its line on the shared foot. */
.spread { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.foaie {
  background: var(--sheet); position: relative; padding: 1.4rem 1.1rem 1.25rem; border: 1px solid var(--frame);
  box-shadow: 0 0 0 4px var(--sheet), 0 0 0 5px var(--frame); margin: 5px;
  display: grid; gap: 1.25rem; align-content: start;
}
@media (min-width: 700px) {
  .spread {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(6, auto); gap: 0;
    background: var(--sheet); border: 1px solid var(--frame); box-shadow: 0 0 0 4px var(--sheet), 0 0 0 5px var(--frame); margin: 5px;
  }
  .foaie { grid-row: span 6; grid-template-rows: subgrid; border: 0; box-shadow: none; margin: 0; background: none; padding: 1.4rem 1rem 1.25rem; }
  .foaie .plansa { grid-row: span 2; grid-template-rows: subgrid; row-gap: 1rem; }
  .foaie .punctaj { align-self: end; } /* the shorter leaf's fold sits on the shared foot; the air falls above it */
  .foaie + .foaie { border-left: 1px solid var(--frame); }
  .foaie + .foaie::before { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; border-left: 1px solid color-mix(in srgb, var(--frame) 60%, transparent); }
}
@media (min-width: 700px) and (max-width: 999px) { .foaie .plansa-desen { padding: .8rem .6rem; } .foaie .rg dt { letter-spacing: .06em; } }
/* a narrow leaf's folio names the subject only; the heading under it says the rest */
@media (max-width: 767px) { .foaie .folio .caiet-de { display: none; } }
/* the narrowest leaves (phones under 360 px, facing leaves of 264 to 296 px): a register's label keeps one line */
@media (max-width: 359px), (min-width: 700px) and (max-width: 767px) {
  .foaie .rg { column-gap: .4rem; grid-template-columns: minmax(0, max-content) minmax(.5rem, 1fr) max-content; }
}
@media (max-width: 359px) { .foaie .rg dt { letter-spacing: .05em; } }
@media (min-width: 700px) and (max-width: 767px) { /* facing leaves of 264 to 296 px: every label keeps one line */
  .foaie .rg dt { letter-spacing: .02em; }
  .foaie .usa-mica { font-size: 1em; gap: .6rem; padding-right: .9rem; } .foaie .usa-mica:is(.mat-mate, .mat-romana) { padding-left: 1.2rem; }
}
@media (min-width: 1000px) {
  .foaie { row-gap: 1.5rem; padding: clamp(1.75rem, 2.6vw, 2.75rem) clamp(1.5rem, 3vw, 3.25rem) clamp(1.75rem, 2.6vw, 2.5rem); }
  .foaie .plansa { row-gap: 1.1rem; }
}
.folio {
  display: flex; justify-content: space-between; gap: 1rem;
  font-feature-settings: "c2sc", "smcp"; letter-spacing: .13em; font-size: var(--fs-cap); color: var(--ink2);
  border-bottom: 1px solid var(--frame); padding-bottom: .55rem;
}
.folio-nr { color: var(--rubric); font-variant-numeric: oldstyle-nums proportional-nums; white-space: nowrap; flex: none; } /* a figure's number never leaves its label */
.foaie h3 { font-weight: 450; font-size: clamp(1.625rem, 1.2rem + 1vw, 2.25rem); line-height: 1.15; }
@media (max-width: 699px) { .foaie { box-shadow: none; margin: 0; padding: .95rem .8rem .9rem; gap: .85rem; } }

/* the index tabs: two equal columns, so a longer name never moves anything; the chosen tab joins its sheet (the
   sheet's ground, the pencil's line along its top, its hexagon in full colour). On phones the leaf's heading is
   read, not shown (the tab says it), and the folio keeps only the figure's number. */
.taburi { display: none; border: 0; margin: 0; padding: 0; min-width: 0; }
@supports selector(:has(*)) { /* without :has() a tab could not hide a leaf: no tabs there, and both leaves show */
  @media screen and (max-width: 699px) {
    .taburi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); position: relative; z-index: 1; margin-bottom: -1px; }
    .taburi input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
    .taburi label {
      display: flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: 0 .5rem; cursor: pointer;
      font-feature-settings: "c2sc", "smcp"; letter-spacing: .1em; font-size: var(--fs-cap); color: var(--ink2);
      border: 1px solid var(--frame); background: var(--paper); white-space: nowrap;
    }
    .taburi label + input + label { border-left: 0; }
    .taburi input:checked + label { background: var(--sheet); color: var(--ink); border-bottom-color: var(--sheet); box-shadow: inset 0 3px 0 var(--c); }
    .taburi input:focus-visible + label, .taburi[data-kbd] input:focus + label { outline: 2px solid var(--rubric); outline-offset: -5px; }
    .probe:has(#t-romana:checked) .foaie.mate, .probe:has(#t-mate:checked) .foaie.romana { display: none; }
    .probe:has(.taburi) .foaie h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .probe:has(.taburi) .foaie .folio { justify-content: flex-end; }
    .probe:has(.taburi) .foaie .folio > span:first-child { display: none; }
  }
  @media screen and (max-width: 359px) { .taburi label { letter-spacing: .05em; gap: .35em; padding: 0 .3rem; } }
}

/* the plate: a framed drawing with crop marks at its corners */
.plansa { display: grid; gap: 1rem; align-content: start; }
@media (max-width: 699px) { .plansa { gap: .7rem; } }
.plansa-desen { position: relative; container-type: inline-size; border: 1px solid var(--frame); background: var(--sheet); padding: clamp(.9rem, 2vw, 1.4rem); }
.plansa-desen::before {
  content: ""; position: absolute; inset: -9px; pointer-events: none; --c: var(--tick);
  background:
    linear-gradient(var(--c), var(--c)) 0 6px / 6px 1px no-repeat, linear-gradient(var(--c), var(--c)) 6px 0 / 1px 6px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 6px / 6px 1px no-repeat, linear-gradient(var(--c), var(--c)) calc(100% - 6px) 0 / 1px 6px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 calc(100% - 6px) / 6px 1px no-repeat, linear-gradient(var(--c), var(--c)) 6px 100% / 1px 6px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% calc(100% - 6px) / 6px 1px no-repeat, linear-gradient(var(--c), var(--c)) calc(100% - 6px) 100% / 1px 6px no-repeat;
}
@media (max-width: 699px) { .plansa-desen { padding: .65rem .5rem; } }
.plansa-desen > svg { display: block; width: 100%; height: auto; overflow: visible; }
.fig-centru { max-width: 30rem; margin-inline: auto; }
.fig-centru .g-pt { font-size: 18px; }

/* the verse, on writing lines, with the teacher's marks */
.vers-plansa { display: grid; justify-items: center; align-content: center; gap: 1.1rem; }
.vers { font-size: min(clamp(1.1875rem, .45rem + 4.3cqi, 2.125rem), 6.8cqi); }
.strofa {
  position: relative; font-style: italic; color: var(--ink);
  display: grid; grid-template-columns: max-content 2.1em 1.1em 1.6em; grid-template-rows: repeat(4, var(--lh-vers));
  line-height: var(--lh-vers);
}
.strofa::before { /* writing lines, one set per verse line, drawn to the italic's own measured metrics */
  content: ""; position: absolute; left: -1.1em; right: -.6em; bottom: 0; height: calc(4 * var(--lh-vers));
  background: var(--ruling); opacity: .42;
  -webkit-mask: var(--ghid-vers) 0 0 / .9em var(--lh-vers) repeat; mask: var(--ghid-vers) 0 0 / .9em var(--lh-vers) repeat;
  pointer-events: none;
}
.strofa .rand { display: contents; }
.strofa .t { grid-column: 1; white-space: nowrap; position: relative; }
.strofa .nr, .strofa .rl { position: relative; text-align: center; font-style: italic; color: var(--rubric); }
.strofa .nr { grid-column: 2; font-variant-numeric: lining-nums; font-size: .78em; }
.strofa .rl { grid-column: 3; font-size: .8em; }
.strofa .rand:nth-of-type(1) > * { grid-row: 1; }
.strofa .rand:nth-of-type(2) > * { grid-row: 2; }
.strofa .rand:nth-of-type(3) > * { grid-row: 3; }
.strofa .rand:nth-of-type(4) > * { grid-row: 4; }
.rime-legaturi { grid-column: 4; grid-row: 1 / span 4; width: 1.6em; height: calc(4 * var(--lh-vers)); }
.rime-legaturi path { fill: none; stroke: var(--rubric); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.rime-legaturi .rb { stroke-dasharray: 3 3; }
@container (max-width: 339px) { .strofa { grid-template-columns: max-content 1.7em .95em 1.6em; } }
.s { position: relative; }
.s::before {
  content: ""; position: absolute; left: calc(50% + var(--semn-aplecare)); top: var(--semn-sus);
  transform: translate(-50%, -50%); border-color: var(--rubric); border-style: solid; border-width: 0;
}
.s.n::before { width: .4em; height: .2em; border-width: 0 1.5px 1.5px; border-radius: 0 0 .2em .2em / 0 0 .2em .2em; transform: translate(-50%, -30%); }
.s.a::before { width: .44em; height: 0; border-top-width: 1.6px; }
.strofa u { text-decoration: underline; text-decoration-color: var(--rubric); text-decoration-thickness: 1.4px; text-underline-offset: .3em; text-decoration-skip-ink: none; }
.strofa u.b { text-decoration-style: double; }
.vers-sursa { font-size: var(--fs-small); color: var(--ink2); font-feature-settings: "c2sc", "smcp"; letter-spacing: .1em; text-align: center; }
.vers-sursa cite { font-style: italic; font-feature-settings: normal; letter-spacing: 0; }
.picior { display: inline-flex; gap: .15em; vertical-align: middle; height: 1em; align-items: center; margin: 0 .1em; }
.picior .s { display: inline-block; width: .55em; height: .6em; }
.picior .s::before { top: 50%; left: 50%; }

/* the register: names, dotted leaders, points or prices */
.registru { display: flex; flex-direction: column; font-variant-numeric: lining-nums tabular-nums; }
.rg { display: grid; grid-template-columns: minmax(0, max-content) minmax(1rem, 1fr) max-content; column-gap: .6rem; align-items: baseline; padding: .55rem 0 .6rem; border-top: 1px solid var(--frame); }
.rg::before { content: ""; grid-column: 2; grid-row: 1; border-bottom: 1px dotted var(--tick); transform: translateY(-.3em); }
.rg dt { grid-column: 1; grid-row: 1; font-feature-settings: "c2sc", "smcp"; letter-spacing: .1em; font-size: 1.04em; }
.rg .p { grid-column: 3; grid-row: 1; color: var(--rubric); }
.rg .d { grid-column: 1 / -1; font-style: italic; color: var(--ink2); font-size: var(--fs-small); line-height: 1.45; margin-top: .15rem; font-variant-numeric: oldstyle-nums proportional-nums; }
@media (max-width: 699px) { .rg { padding: .4rem 0 .45rem; } .rg .d { line-height: 1.38; } }
.rg.sub { border-top: 1px dotted var(--frame); padding: .4rem 0 .45rem 1.3rem; }
.rg.sub dt { font-feature-settings: normal; letter-spacing: 0; font-style: italic; font-size: var(--fs-small); color: var(--ink2); }
.rg.sub .p { font-size: var(--fs-small); }
.rg.sub .d { font-size: calc(var(--fs-small) * .97); }
.rg.total { border-top: 3px double var(--frame); }
.rg.total dt { font-feature-settings: normal; letter-spacing: 0; font-style: italic; }
.rg.total .p { color: var(--ink); font-weight: 600; }
.foaie details.punctaj > summary { color: var(--ink); }
.foaie details.punctaj .registru > .rg:first-child { border-top: 1px dotted var(--frame); }

/* the door at the foot of each leaf: the same double hairline as the doors above */
.usa-mica {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; align-self: end;
  padding: .9rem 1.15rem; text-decoration: none; color: var(--ink); background: var(--sheet);
  font-size: 1.0625em; line-height: 1.3; border: 1px solid var(--frame);
  box-shadow: inset 0 0 0 3px var(--sheet), inset 0 0 0 4px color-mix(in srgb, var(--frame) 70%, transparent);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.usa-mica .sag { transition: transform .25s ease; }
.usa-mica:hover { border-color: var(--tick); background: var(--paper); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--tick); }
.usa-mica:hover .sag { transform: translateX(4px); }
.usa-mica:focus-visible { outline-offset: 4px; }

/* ---------- 9. How it works: notes on the page ---------- */
.note { list-style: none; padding: 0; display: grid; gap: 2rem 3rem; counter-reset: n; }
@media (max-width: 699px) { .note { gap: 1.25rem; } }
@media (min-width: 700px) and (max-width: 1099px) { .note { grid-template-columns: minmax(0, 1fr); max-width: 40em; gap: 1.5rem; } }
@media (min-width: 1100px) { .note { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.75rem clamp(2.5rem, 4vw, 4.5rem); } }
.note li { counter-increment: n; border-top: 1px solid var(--frame); padding-top: .9rem; }
.note h3 { /* a long name wraps beside its number, never under it */
  font-weight: 500; font-feature-settings: "c2sc", "smcp"; letter-spacing: .12em; font-size: 1.06em; margin-bottom: .35rem;
  display: flex; gap: .65rem; align-items: baseline;
}
.note h3::before { content: counter(n); color: var(--rubric); font-variant-numeric: lining-nums; letter-spacing: 0; font-feature-settings: normal; font-style: italic; }
.note p { color: var(--ink2); }
@media (max-width: 699px) { .note li { padding-top: .7rem; } .note h3 { margin-bottom: .2rem; } }
.inca-nu { position: relative; margin-top: clamp(2.5rem, 5vh, 3.5rem); color: var(--ink2); font-style: italic; max-width: 42em; }
@media (max-width: 699px) { .inca-nu { margin-top: 1.5rem; } }
.inca-nu .et { font-style: normal; font-feature-settings: "c2sc", "smcp"; letter-spacing: .13em; color: var(--rubric); margin-right: .6rem; font-weight: 500; }
@media (min-width: 1100px) { .inca-nu .et { position: absolute; right: calc(100% + var(--gap) / 2 + 22px); top: 0; margin: 0; white-space: nowrap; } }

/* ---------- 10. For parents: how to begin and what it will cost ----------
   What works today in the lead; then one ruled heading with the one stamp, "în curând", over the family account and
   its plans: the text and the rhythm (a fold, open from 900 px) on the left, the support and its prices with the
   siblings' line on the right; one column below 900 px. */
.familia { border-bottom: 3px double var(--frame); padding-bottom: .55rem; margin-bottom: 1rem; }
.tarife { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 700px) and (max-width: 899px) { .tarife { gap: 2.5rem; max-width: 40em; } }
@media (min-width: 900px) { .tarife { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 5vw, 4rem); align-items: start; } }
@media (min-width: 1100px) { .tarife { column-gap: clamp(3rem, 6vw, 6.5rem); } }
.tarif-cap {
  font-weight: 500; font-feature-settings: "c2sc", "smcp"; letter-spacing: .13em; font-size: var(--fs-cap); color: var(--rubric);
  padding-bottom: .5rem; display: flex; flex-wrap: wrap; gap: 0 .7rem; align-items: baseline;
}
.tarif-cap span:not(.curand) { font-style: italic; font-feature-settings: normal; letter-spacing: 0; color: var(--ink2); font-weight: 400; font-size: var(--fs-small); }
.cont-text { color: var(--ink2); max-width: 34em; margin-bottom: 1rem; }
@media (max-width: 699px) { .cont-text { margin-bottom: .75rem; } }
details.ritm > summary { color: var(--rubric); font-weight: 500; letter-spacing: .13em; } /* in the register's own small caps */
details.ritm .registru > .rg:first-child { border-top: 1px dotted var(--frame); }
.insotire .registru > .rg:first-child { border-top: 1px solid var(--frame); }
.tarif .rg:not(.sub) dt { font-size: 1.1em; }
.tarif .rg .p { font-size: 1.06em; } /* every price the same size */
.de-la { font-style: italic; color: var(--ink2); font-size: .86em; margin-right: .12em; }
.saptamana { width: 96px; height: 12px; display: inline-block; vertical-align: -.05em; overflow: visible; }
.z-gol { fill: none; stroke: var(--tick); stroke-width: 1; }
.z-plin { fill: var(--rubric); opacity: .82; }
.tarif-nota { margin-top: 1rem; font-style: italic; color: var(--ink2); font-size: var(--fs-small); }
@media (max-width: 699px) { .tarif-nota { margin-top: .6rem; } }

/* ---------- 11. The quiet note, with the sine ---------- */
.mai-departe {
  display: grid; gap: 1rem 2.25rem; align-items: center; padding: 1.75rem 0 2.25rem; position: relative;
  font-size: var(--fs-small); color: var(--ink2);
}
.mai-departe::before { content: ""; position: absolute; top: 0; left: 0; width: 8rem; border-top: 1px solid var(--frame); }
.mai-departe p { max-width: 36em; position: relative; }
.asterisc { color: var(--rubric); margin-right: .3em; }
.sin { display: grid; gap: .3rem; width: min(100%, 260px); }
.sin figcaption { font-style: italic; font-size: .92em; }
.fig-sin { width: 100%; height: auto; display: block; overflow: visible; }
.s-ax { stroke: var(--tick); stroke-width: 1; fill: none; }
.s-cerc { stroke: var(--ink2); stroke-width: 1; fill: none; }
.s-unda { stroke: var(--ink2); stroke-width: 1.2; fill: none; stroke-linejoin: round; }
.s-raza { stroke: var(--ink2); stroke-width: 1; fill: none; }
.s-dus { stroke: var(--rubric); stroke-width: 1; fill: none; stroke-dasharray: 1.5 2.5; }
.s-pct { fill: var(--rubric); }
.s-et { fill: var(--ink2); font-family: var(--font); font-style: italic; }
.mai-departe .sin { order: 2; }
@media (max-width: 699px) { .mai-departe .sin { display: none; } } /* phones: the note alone; the sine is for wider pages */
@media (min-width: 700px) {
  .mai-departe { grid-template-columns: minmax(0, 36em) clamp(260px, 18vw, 360px); justify-content: start; column-gap: clamp(2.5rem, 5vw, 5rem); }
  .sin { width: 100%; }
}

/* ---------- 12. Colophon ---------- */
.colofon { position: relative; width: min(100%, var(--maxw)); margin-inline: auto; padding: 0 var(--pad); }
.colofon-in {
  border-top: 4px double var(--frame); padding: 2.25rem 0 4.5rem calc(var(--marg) + var(--gap));
  display: grid; gap: .65rem; justify-items: start;
}
@media (max-width: 699px) { .colofon-in { padding-top: 1.75rem; padding-left: 18px; padding-bottom: 6rem; } } /* the text column's own indent (.caiet) */
@media (min-width: 1100px) { /* the mark on the left; the sources and the H2 Labs line on the right, 96 px clear of the servos corner */
  .colofon-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap); align-items: start; padding-top: 1.75rem; padding-bottom: 3rem; padding-right: 96px; }
  .colofon-in > .marca { grid-column: 1; grid-row: 1 / span 2; }
  .colofon-in > .surse { grid-column: 2; grid-row: 1; }
  .colofon-in > .h2 { grid-column: 2; grid-row: 2; margin-top: 0; }
  .colofon-in > .parere-rand { grid-column: 2; grid-row: 3; }
}
.marca .semn.mic { width: 26px; height: 26px; }
.colofon .marca { font-size: 1.25rem; }
.surse { font-style: italic; color: var(--ink2); font-size: var(--fs-small); max-width: 40em; }
.h2 { font-size: var(--fs-small); color: var(--ink2); margin-top: .5rem; } /* the name as it is written, Pricep, never in capitals */
.h2 .punct { margin: 0 .25em; }

/* ---------- 13. The page that moves progress (muta.html): one leaf, the same hand ---------- */
main.usa {
  width: min(100% - 2 * var(--pad), 40rem); margin: clamp(2rem, 10vh, 6rem) auto 6rem; position: relative;
  background: var(--sheet); border: 1px solid var(--frame); box-shadow: 0 0 0 4px var(--sheet), 0 0 0 5px var(--frame);
  padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 3rem) clamp(1.75rem, 4vw, 2.75rem);
}
main.usa::before { /* the red margin rule of the leaf */
  content: ""; position: absolute; top: 0; bottom: 0; left: clamp(.6rem, 2vw, 1.4rem); width: 4px;
  border-left: 1px solid var(--margine); border-right: 1px solid color-mix(in srgb, var(--margine) 45%, transparent);
}
main.usa .mic { display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0; position: relative; font-weight: 600; font-size: 1.375rem; line-height: 1; color: var(--ink); text-decoration: none; padding: 0 0 0 2.4rem; }
main.usa .mic::before { /* the mark, drawn by the stylesheet because the page's script owns its markup */
  content: ""; position: absolute; left: 0; top: 50%; width: 26px; height: 26px; transform: translateY(-50%);
  background: var(--semn) center / contain no-repeat;
}
main.usa h2 { margin: .9rem 0 1rem; padding-top: 1rem; border-top: 1px solid var(--frame); font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.text { color: var(--ink2); margin: 0 0 1rem; max-width: 34em; }
.text a:not(.btn), .stare a { color: var(--rubric); text-decoration-thickness: 1px; text-underline-offset: .18em; padding-block: 12px; } /* inline: a 44 px target without moving the lines */
@media (max-width: 699px) { main.usa { box-shadow: none; } }
.lista {
  margin: 0 0 1.25rem; padding: .8rem 1rem .85rem 1.1rem; border-top: 1px solid var(--frame); border-bottom: 1px solid var(--frame);
  font-style: italic; color: var(--ink); line-height: 1.75; background: var(--wash);
}
.stare { margin: 1.1rem 0 0; padding-left: 1.1rem; position: relative; color: var(--ink2); }
.stare::before { content: ""; position: absolute; left: .1rem; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--tick); }
.stare.ok { color: var(--verde); } .stare.ok::before { background: var(--verde); }
.stare.rau { color: var(--rubric); } .stare.rau::before { background: var(--rubric); }
.btn {
  display: inline-flex; align-items: center; gap: .7rem; font: inherit; font-size: 1.0625rem; line-height: 1.3; cursor: pointer;
  padding: .75rem 1.2rem; text-decoration: none; color: var(--ink); background: var(--sheet); border: 1px solid var(--tick);
  box-shadow: inset 0 0 0 3px var(--sheet), inset 0 0 0 4px color-mix(in srgb, var(--frame) 75%, transparent);
  transition: border-color .2s ease, background-color .2s ease;
}
.btn::after {
  content: ""; flex: none; width: 1.3rem; height: .72rem; background: var(--rubric); transition: transform .25s ease;
  -webkit-mask: var(--sageata) center / contain no-repeat; mask: var(--sageata) center / contain no-repeat;
}
.btn:hover { border-color: var(--ink2); background: var(--paper); }
.btn:hover::after { transform: translateX(3px); }
.btn.ghost { border-color: var(--frame); box-shadow: none; color: var(--ink2); background: transparent; }
main.usa .btn { margin: 0 .6rem .6rem 0; }
.btn.ghost::after { content: none; }
.btn:focus-visible { outline-offset: 4px; }

/* ---------- 14. Motion: each drawing traces itself once, slowly, when it comes into view ----------
   The script at the end of the page adds .anim to <html> only when motion is welcome; without it (or with reduced
   motion) every drawing is simply there, finished. */
@media screen {
  .anim .desen:not(.trasat) .a-draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .anim .desen:not(.trasat) :is(.a-fade, .rime-legaturi) { opacity: 0; }
  .anim .desen:not(.trasat) .s::before { opacity: 0; }
}
.a-1 { --d: .1s; } .a-2 { --d: .45s; } .a-2b { --d: 1.6s; } .a-3 { --d: 2.2s; } .a-4 { --d: 3s; }
.a-5 { --d: 3.3s; } .a-6 { --d: 4.1s; } .a-7 { --d: 4.5s; } .a-8 { --d: 4.8s; }
@media screen and (prefers-reduced-motion: no-preference) { /* print gets every drawing finished */
  .trasat .a-draw { stroke-dasharray: 1 1; animation: trasare 1.4s cubic-bezier(.45, 0, .25, 1) var(--d, 0s) both; }
  .trasat .a-fade { animation: apare .9s ease var(--d, 0s) both; }
  .trasat .s::before { animation: apare .8s ease .3s both; }
  .trasat .rime-legaturi { animation: apare 1s ease 1s both; }
}
@keyframes trasare { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes apare { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

@media print { details.plus > summary::after { display: none; } } /* the script has opened every fold; the tabs are for screens */
@media (forced-colors: active) {
  .caiet::before { border-color: CanvasText; }
  .usa-card, .usa-mica, .btn { border: 1px solid ButtonText; }
  /* gradients are dropped in forced colours: the fold's mark becomes a plain plus or minus, the chosen tab is underlined */
  details.plus > summary::after { content: "+"; background: none; width: auto; height: auto; line-height: 1; font-size: 1.25rem; font-feature-settings: normal; letter-spacing: 0; color: CanvasText; }
  details.plus[open] > summary::after { content: "\2212"; }
  .taburi input:checked + label { text-decoration: underline 2px; text-underline-offset: .45em; }
}

/* ---------- 15. The pencils on the page ----------
   The trainers' coloured pencils, worn where they mean something: each subject in its pencil (Prussian blue for
   mathematics, manganese violet for Romanian) on the doors, the head and the leaves; the highlighter on the one fact
   a pupil would mark; the rhymes in two highlighters; Fig. 3, the trainers' pencil case. */
.mat-mate, .foaie.mate, .taburi [for="t-mate"] { --c: var(--p-prusia); --ct: var(--p-prusia-t); }
.mat-romana, .foaie.romana, .taburi [for="t-romana"] { --c: var(--p-violet); --ct: var(--p-violet-t); }
.cr-prusia { --c: var(--p-prusia); --ct: var(--p-prusia-t); }
.cr-ultramarin { --c: var(--p-ultramarin); --ct: var(--p-ultramarin-t); }
.cr-veronese { --c: var(--p-veronese); --ct: var(--p-veronese-t); }

/* the end of a hexagonal pencil, as a key: in the head, on each leaf's folio and tab, and before "Antrenor" on the doors */
.cap-nav a:is(.mat-mate, .mat-romana)::before, .foaie .folio > span:first-child::before, .usa-card:is(.mat-mate, .mat-romana) .usa-tip::before, .taburi label::before {
  content: ""; display: inline-block; width: .62em; height: .7em; margin-right: .55em; vertical-align: -.02em; background: var(--c);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.taburi label::before { margin-right: 0; opacity: .55; } /* the tab's gap spaces it; full colour on the chosen tab */
.taburi input:checked + label::before { opacity: 1; }
.usa-card:is(.mat-mate, .mat-romana) .usa-tip::before { width: .75em; height: .85em; margin-right: .5em; vertical-align: -.1em; }
.cap-nav a:is(.mat-mate, .mat-romana):hover { text-decoration-color: var(--c); }
@media (max-width: 420px) { /* no room for the key beside the name: the pencil underlines it instead */
  .cap-nav a:is(.mat-mate, .mat-romana)::before { content: none; }
  .cap-nav a:is(.mat-mate, .mat-romana) { text-decoration-color: color-mix(in srgb, var(--c) 70%, transparent); text-decoration-thickness: 2px; text-underline-offset: .55em; }
}
.sec-lead a:is(.mat-mate, .mat-romana) { color: var(--ct); }

/* the doors: the subject's pencil as a spine on the outer edge, a faint wash of it over the leaf, in the inner hairline,
   the label, the tile and the arrow */
:is(.usa-card, .usa-mica):is(.mat-mate, .mat-romana) {
  position: relative;
  box-shadow: inset 0 0 0 3px var(--sheet), inset 0 0 0 4px color-mix(in srgb, var(--c) 34%, var(--frame));
}
.usa-card:is(.mat-mate, .mat-romana) {
  --fond: color-mix(in srgb, var(--c) var(--spalat), var(--sheet)); background: var(--fond);
  box-shadow: inset 0 0 0 3px var(--fond), inset 0 0 0 4px color-mix(in srgb, var(--c) 40%, var(--frame));
}
:is(.usa-card, .usa-mica):is(.mat-mate, .mat-romana)::before {
  content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 5px; background: var(--c); pointer-events: none;
}
.usa-card:is(.mat-mate, .mat-romana) { padding-left: 1.3rem; }
.usa-mica:is(.mat-mate, .mat-romana) { padding-left: 1.4rem; }
.usa-card:is(.mat-mate, .mat-romana):hover { --fond: color-mix(in srgb, var(--c) var(--spalat-hover), var(--sheet)); border-color: color-mix(in srgb, var(--c) 55%, var(--frame)); box-shadow: inset 0 0 0 3px var(--fond), inset 0 0 0 4px var(--c); }
.usa-mica:is(.mat-mate, .mat-romana):hover { border-color: color-mix(in srgb, var(--c) 55%, var(--frame)); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--c); }
:is(.usa-card, .usa-mica):is(.mat-mate, .mat-romana) .sageata path { stroke: var(--c); }
.usa-card:is(.mat-mate, .mat-romana) .usa-tip { color: var(--ct); }
/* the tile: a leaf of the sheet, its squares or writing lines in the subject's pencil, the figure in full paint */
.usa-card:is(.mat-mate, .mat-romana) .usa-semn { background: var(--sheet); }
.usa-card:is(.mat-mate, .mat-romana) :is(.u-grila, .u-sl, .u-g, .u-x) { stroke: color-mix(in srgb, var(--c) 35%, transparent); opacity: 1; }
.usa-card.mat-mate .u-ink { stroke: var(--c); stroke-width: 1.6; fill: color-mix(in srgb, var(--c) 18%, transparent); }
.usa-card.mat-romana .u-b { stroke: var(--c); stroke-width: 1.5; }
.usa-card.mat-romana .u-a { fill: var(--c); }
@media (max-width: 400px) { .usa-card:is(.mat-mate, .mat-romana) { padding-left: .95rem; } }

/* the highlighter, on the one fact a pupil would mark: a stroke that leans a little; by lamplight a soft gold band, low
   on the letters, so it stays gold and does not turn the whole word brown */
mark.marker {
  color: var(--ink); padding: 0 .1em; margin: 0 -.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  border-radius: .18em .32em .2em .4em / .4em .22em .36em .2em;
  background: linear-gradient(177deg, transparent var(--marker-sus), color-mix(in srgb, var(--marker) var(--marker-a), transparent) var(--marker-sus) 92%, transparent 92%);
}

/* Ex. 1: the two rhymes in two highlighters, only on the rhyming part; their letters, lines and links in the same pencils */
.strofa u { text-decoration-color: var(--p-crom-l); background: linear-gradient(transparent var(--rima-sus), color-mix(in srgb, var(--marker) var(--rima-a), transparent) var(--rima-sus) 88%, transparent 88%); }
.strofa u.b { text-decoration-color: var(--p-fucsia); background: linear-gradient(transparent var(--rima-sus), color-mix(in srgb, var(--marker-roz) var(--marker-roz-a), transparent) var(--rima-sus) 88%, transparent 88%); }
.strofa .rand:nth-of-type(odd) .rl { color: var(--p-crom-t); }
.strofa .rand:nth-of-type(even) .rl { color: var(--p-fucsia-t); }
.rime-legaturi .ra { stroke: var(--p-crom-l); } .rime-legaturi .rb { stroke: var(--p-fucsia); }

/* Fig. 3, the pencil case: the maths trainer's home for one sample pupil, as the trainer draws it: the chapters on
   their rulers, the stamped week, the inside cover with its pins and stars. Generated by tools/figures.ts from the
   trainers' own tables, geometry and symbols; three compartments side by side on wide plates, fewer as it narrows. */
.penar-fig { margin-top: clamp(2.75rem, 6vh, 4rem); display: grid; gap: .9rem; max-width: 72rem; }
@media (max-width: 699px) { .penar-fig { margin-top: 0; gap: .6rem; } } /* in its fold, under the fold's line */
.penar-plansa { padding: 0; }
.penar-fig .fig-cap { margin-bottom: .25rem; }
.penar-d { display: block; font-style: italic; color: var(--ink2); font-size: var(--fs-small); line-height: 1.5; max-width: 44em; text-wrap: pretty; }
.penar { display: grid; grid-template-columns: minmax(0, 1fr); }
.penar text { font-family: var(--font); }
.pn-cutie { min-width: 0; padding: .95rem 1rem 1.05rem; display: grid; align-content: start; gap: .7rem; }
@media (max-width: 699px) { .pn-cutie { padding: .75rem .85rem .85rem; gap: .5rem; } }
.pn-cutie + .pn-cutie { border-top: 1px solid var(--frame); }
.pn-et {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  font-feature-settings: "c2sc", "smcp"; letter-spacing: .12em; font-size: var(--fs-cap); color: var(--ink2); line-height: 1.3;
}
.pn-mat { color: var(--ct); }
.pn-mat::before {
  content: ""; display: inline-block; width: .62em; height: .7em; margin-right: .5em; vertical-align: -.02em; background: var(--c);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.penar ul, .penar ol { list-style: none; margin: 0; padding: 0; }
.pn-capitole ul { display: grid; gap: .55rem; }
.pn-cap { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: .6rem; row-gap: .2rem; align-items: center; color: var(--c); }
.pn-cap + .pn-cap { border-top: 1px solid color-mix(in srgb, var(--frame) 60%, transparent); padding-top: .55rem; }
.pn-capat { width: 22px; height: 22px; display: block; }
.pn-n { color: var(--ink); font-size: var(--fs-small); line-height: 1.3; }
.pn-p { color: var(--ink); font-size: var(--fs-small); line-height: 1.3; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.pn-rigla { grid-column: 2 / -1; display: block; width: 100%; height: auto; overflow: visible; }
.pn-gradatii { stroke: var(--tick); stroke-width: 1; fill: none; }
.pn-gradatii-s { stroke: color-mix(in srgb, var(--tick) 70%, transparent); stroke-width: 1; fill: none; }
.pn-pista { fill: color-mix(in srgb, var(--ink) 4%, transparent); stroke: color-mix(in srgb, var(--frame) 80%, transparent); stroke-width: 1; }
.pn-prag { stroke: var(--rubric); fill: none; }
.pn-prag-v { fill: var(--rubric); }
.pn-stare { grid-column: 2 / -1; display: inline-flex; align-items: center; gap: .3rem; color: var(--verde); font-weight: 700; font-size: .9375rem; line-height: 1.3; }
.pn-stare svg { width: 16px; height: 16px; display: block; }
/* the week: the stamp in the stamp's ink, turned as it fell; the free day's moon in a ring; today circled by hand in
   the learner's pencil (the teacher's red until one is chosen), with its share of the goal */
.pn-sapt { grid-template-rows: auto auto 1fr; }
.pn-sapt ol { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; max-width: 24rem; padding-top: .15rem; }
.pn-sapt li { display: grid; justify-items: center; gap: .25rem; }
.pn-loc { width: min(40px, 100%); aspect-ratio: 1; display: grid; place-items: center; position: relative; border-radius: 50%; }
.pn-loc > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pn-z-f .pn-loc > svg { color: var(--cerneala); transform: rotate(var(--r, -8deg)); }
.pn-z-l .pn-loc { border: 1px solid var(--frame); }
.pn-z-l .pn-loc > svg { width: 20px; height: 20px; color: var(--ink2); }
.pn-z-a .pn-loc::before {
  content: ""; position: absolute; inset: -1px -2px; border: 2px solid var(--mark); border-radius: 52% 48% 50% 46% / 46% 52% 48% 54%;
  transform: rotate(-12deg); border-right-color: color-mix(in srgb, var(--mark) 35%, transparent);
}
.pn-pct { font-weight: 700; font-size: .8125rem; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.pn-sapt li > span:last-child { font-size: .875rem; line-height: 1.1; color: var(--ink2); font-variant-numeric: lining-nums; }
.pn-z-a > span:last-child { color: var(--ink); font-weight: 700; }
.pn-sir { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .2rem 1rem; align-self: end; border-top: 1px solid color-mix(in srgb, var(--frame) 60%, transparent); padding-top: .55rem; }
.pn-sir p { color: var(--ink2); font-style: italic; font-size: var(--fs-small); display: flex; align-items: baseline; gap: .45rem; }
.pn-sir b { font-style: normal; font-weight: 450; font-size: 2.25rem; line-height: 1; color: var(--ink); font-variant-numeric: lining-nums; }
.pn-azi-t { font-variant-numeric: lining-nums; }
.pn-azi-t::before { content: ""; width: .7em; height: .7em; border-radius: 50%; border: 2px solid var(--mark); border-right-color: color-mix(in srgb, var(--mark) 35%, transparent); transform: rotate(-12deg); align-self: center; }
/* the inside cover: book cloth, a gold rule, the pins turned a little as they were pinned, the ones still to earn
   dimmed, the stars stuck in a row */
.pn-coperta {
  margin: .55rem; padding: .85rem .9rem 1rem; color: var(--panza-ink); grid-template-rows: auto 1fr auto;
  background-color: var(--panza);
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .09) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 0 5px var(--panza), inset 0 0 0 6px color-mix(in srgb, var(--aur) 75%, transparent), inset 0 0 0 8px var(--panza), inset 0 0 0 9px color-mix(in srgb, var(--aur) 40%, transparent);
}
@media (max-width: 699px) { .pn-coperta { padding: .75rem .85rem .85rem; } }
.pn-cutie + .pn-coperta { border-top: 0; }
.pn-coperta .pn-et { color: var(--aur2); padding: .1rem .2rem 0; flex-wrap: wrap; }
.pn-nr { font-feature-settings: normal; letter-spacing: 0; font-style: italic; color: var(--panza-ink2); font-size: .9375rem; }
.pn-coperta ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem .35rem; align-self: center; }
.pn-coperta li { display: grid; justify-items: center; align-content: start; gap: .3rem; text-align: center; }
.pn-coperta li > svg { width: 48px; height: 48px; display: block; filter: drop-shadow(0 1.5px 1px rgba(0, 0, 0, .4)); transform: rotate(var(--r, 0deg)); }
.pn-coperta li text { font-family: var(--font); }
.pn-coperta li span { font-size: .875rem; line-height: 1.25; color: var(--panza-ink2); text-wrap: balance; }
.pn-coperta li.pn-lipsa > svg { opacity: .28; filter: grayscale(1); }
.pn-coperta li.pn-lipsa span { opacity: .8; }
@media (max-width: 699px) { .pn-coperta li.pn-lipsa { display: none; } } /* phones: the pins earned, one row; the ones still to earn wait in the trainer */
.pn-stele { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: .7rem .2rem 0; border-top: 1px solid color-mix(in srgb, var(--aur) 35%, transparent); font-size: .875rem; line-height: 1.3; color: var(--panza-ink2); }
.pn-stele > svg { width: 22px; height: 22px; display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.pn-stele > svg:nth-child(odd) { transform: rotate(-9deg); } .pn-stele > svg:nth-child(3n) { transform: rotate(7deg); }
.pn-stele span { margin-left: .4rem; }
@container (min-width: 600px) {
  /* the chapters on the left; the week over the cover on the right */
  .penar { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: "cap sapt" "cap cop"; }
  .pn-capitole { grid-area: cap; border-right: 1px solid var(--frame); }
  .pn-sapt { grid-area: sapt; border-top: 0; }
  .pn-coperta { grid-area: cop; }
}
@container (min-width: 820px) {
  .penar { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "cap sapt cop"; }
  .pn-sapt { border-right: 1px solid var(--frame); grid-template-rows: auto 1fr auto; }
  .pn-sapt ol { align-self: center; }
}
@container (min-width: 960px) { .pn-coperta li > svg { width: 52px; height: 52px; } }

@media (forced-colors: active) {
  mark.marker, .strofa u { background: Mark; color: MarkText; forced-color-adjust: none; }
  :is(.usa-card, .usa-mica):is(.mat-mate, .mat-romana)::before { background: ButtonText; }
}