/* =========================================================
   Moving parts: the page of a component or a pack, in the
   landing's shell (AB-153). The page loads base.css, then the
   site's own site.css (and cards.css), then this sheet. The
   content keeps the site's look to the pixel: the stage, the
   three routes, the rail, the neighbours. What follows sets
   it in the shell: the nav, the phone menu and the footer keep
   the landing's type and accent, and the head reads like the
   head of the Library page.
   ========================================================= */

/* site.css comes after base.css and sets the accent back to the ink of the
   text for the whole page; the shell keeps the landing's amber */
.nav, .menu, .foot { --accent: #ffab1a; }
::selection { background: #ffab1a; color: #150b06; }

/* the body: the site's leading and tracking for the content, the landing's for the shell */
body.fiche { letter-spacing: normal; line-height: normal; overflow-x: clip; }
.fiche .nav, .fiche .menu, .fiche .foot, .fiche a.sr { letter-spacing: -.012em; line-height: 1.5; }

/* the site's .mono is set smaller and looser than the landing's: the shell keeps its own */
.fiche .nav .mono, .fiche .menu .mono, .fiche .foot .mono { font-size: 11px; line-height: 1.6; letter-spacing: .06em; }

/* the sheet the footer lies under: its rounded edge cuts the neighbours at the end of the page too */
.fiche-sheet { overflow: clip; }
.fiche .pack-next { margin-bottom: 0; }

/* ---------- the head, in the landing's type ---------- */
.fiche .detail-head h1 { font-weight: 430; font-size: clamp(40px, 5vw, 80px); line-height: .94; letter-spacing: -.05em; max-width: 16ch; }
.fiche .detail-head .description { font-size: clamp(15.5px, 1.15vw, 18px); line-height: 1.45; }

/* the pack page is a shelf of the library: its head is the Library page's */
.fiche-pack .masthead { padding-top: clamp(120px, 20vh, 220px); }
.fiche-pack .masthead h1 { font-weight: 430; font-size: clamp(56px, 10vw, 168px); line-height: .88; letter-spacing: -.06em; }
.fiche-pack .mast-count .n { font-weight: 430; letter-spacing: -.05em; }
.fiche-pack .masthead .intro { font-size: clamp(15.5px, 1.15vw, 18px); line-height: 1.45; }
/* New, in the landing's accent, as on the cards of the Library page */
.fiche-pack .grid { --accent: #ffab1a; }

/* base.css sets every link, button and field in the landing's way (inherited
   font, no background, no border, no underline) and every picture as a block.
   Inside the sheet the site's page had the browser's own defaults there: they
   come back, at the weight of an element rule, so every class of site.css
   still wins over them. */
:where(.fiche-sheet) :is(button, input) { font: revert; background: revert; border: revert; color: revert; }
:where(.fiche-sheet) a { text-decoration: revert; background: revert; border: revert; }
:where(.fiche-sheet) :is(img, video) { display: revert; max-width: revert; }