/* generated by includes/head.php from: fonts, tokens, base, layout, components, wide, motion — edit the sources, not this file */

/* ==== fonts.css ==== */
/* self-hosted fonts of the approved mockup (Google Fonts, OFL) — node tools/fonts-pull.js */
@font-face{font-family:'Alfa Slab One';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/alfa-slab-one-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Alfa Slab One';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/alfa-slab-one-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/work-sans-var-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/work-sans-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/courier-prime-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/courier-prime-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/courier-prime-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/courier-prime-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Metric-matched fallback: Arial sized to Work Sans (measured: 110.74% width, ascent 93, descent 24 per 100px),
   so the swap to the web font does not move the layout. */
@font-face{font-family:'Work Sans Fallback';src:local('Arial'),local('ArialMT'),local('Liberation Sans');size-adjust:110.74%;ascent-override:84%;descent-override:21.7%;line-gap-override:0%}

/* ==== tokens.css ==== */
/* Design tokens — the numbers of the approved mockup, named by role.
 *
 * Source: <kit>/mockups/jockeyce.com/a-folheto-de-cordel.html (Folheto de Cordel,
 * Neo-Retro), approved 2026-09-24. Values from its :root move here as they are;
 * everything marked «added» is not in the mockup and was needed to build the site.
 */
:root {
  /* ── Colour: from the mockup ─────────────────────────────────────────── */
  --color-bg: #EFE6D2;            /* papel */
  --color-bg-2: #E6DAC0;          /* papel-2: bands, notes */
  --color-surface: #F8F2E3;       /* folha clara: cards, folhetos */
  --color-ink: #1B1611;           /* tinta */
  --color-ink-2: #4A4036;         /* tinta secundária — 8.4:1 on papel */
  --color-brand: #C8471D;         /* urucum — fills only (4.0:1 on papel) */
  --color-on-brand: #FFF9EE;      /* 4.8:1 on urucum */
  --color-accent: #2B3A8F;        /* anil — links, focus, selection */
  --color-on-accent: #FFFFFF;
  --color-sun: #E3A21A;           /* sol — small marks only, never text */
  --color-line: #1B1611;
  --color-line-soft: #CBBB98;

  /* ── Colour: added ───────────────────────────────────────────────────── */
  --color-brand-text: #A33A14;    /* urucum for text on papel/surface: 5.3:1 */
  --color-brand-hover: color-mix(in srgb, var(--color-brand) 86%, black);
  --color-accent-hover: color-mix(in srgb, var(--color-accent) 80%, black);
  --color-foot-text: #E3D9C3;     /* body text on tinta (footer) */
  --color-foot-muted: #D8CDB4;
  --color-error: #A1260F;         /* 6.0:1 on papel */
  --color-error-bg: #F6DCCF;
  --color-success: #2F5E2A;       /* 6.3:1 on papel */
  --color-success-bg: #DCE6CC;
  --focus-ring: 0 0 0 3px var(--color-accent);

  /* ── Typography: from the mockup ─────────────────────────────────────── */
  --font-display: "Alfa Slab One", Rockwell, Georgia, serif;
  --font-body: "Work Sans", "Work Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-data: "Courier Prime", "Courier New", ui-monospace, monospace;
  --fs-h1: clamp(50px, 6.4vw, 100px);
  --fs-h2: clamp(38px, 4.4vw, 64px);
  --fs-lead: clamp(17px, 1.35vw, 20px);
  --fs-body: 17px;
  --fs-small: 14px;
  /* added: inner pages and card titles */
  --fs-h1-page: clamp(40px, 5.2vw, 80px);
  --fs-h3: clamp(22px, 1.9vw, 28px);
  --fs-data: 15px;
  --fs-micro: 12px;
  --lh-tight: .95;
  --lh-head: 1.05;
  --lh-base: 1.55;

  /* ── Shape and depth: from the mockup ────────────────────────────────── */
  --radius: 0;
  --bw: 3px;
  --shadow-block: 6px 6px 0 var(--color-ink);
  --shadow-btn: 4px 4px 0 var(--color-ink);
  --shadow-btn-hover: 6px 6px 0 var(--color-ink);
  --shadow-btn-active: 2px 2px 0 var(--color-ink);
  --flag: 34px;                   /* bandeirola width */

  /* ── Space: from the mockup ──────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 104px;

  /* ── Container: from the mockup ──────────────────────────────────────── */
  --container: 1320px;
  --gutter: clamp(16px, 4.2vw, 60px);

  /* ── Motion (added) ──────────────────────────────────────────────────── */
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;
  --ease: cubic-bezier(.2, .7, .3, 1);

  /* ── Layers (added) ──────────────────────────────────────────────────── */
  --z-dropdown: 40;
  --z-header: 50;
  --z-overlay: 98;             /* the full-screen menu sits above the cookie banner */
  --z-banner: 95;
  --z-modal: 100;
  --z-gate: 110;
}

@media (max-width: 760px) {
  :root { --fs-body: 16px; }
}

/* Breakpoints cannot be custom properties in media queries. The reference widths
   live in kit.config.json → breakpoints; the mockup switches at these:
   --bp-mobile: 760px   --bp-tablet: 1024px   --bp-nav: 1180px   --bp-desktop: 1440px */

/* ==== base.css ==== */
/* Reset, document defaults, accessibility basics. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font: 400 var(--fs-body)/var(--lh-base) var(--font-body);
  min-height: 100vh;
  overflow-x: clip;            /* nothing may scroll the page sideways */
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

/* headings take face, size and line-height from their class */
h1, h2, h3, h4 { font: inherit; }

a { color: var(--color-accent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--color-ink); }

ul, ol { list-style: none; padding: 0; }

.num, time, .tab, table { font-variant-numeric: tabular-nums; }

/* Visible focus is not optional. */
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

.visually-hidden, .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.visually-hidden.visually-hidden { width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; }

.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: var(--z-gate);
  padding: 10px 16px; background: var(--color-ink); color: var(--color-bg);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--color-bg); }

/* A hidden element must stay hidden even when a component sets display. */
[hidden][hidden] { display: none !important; }

/* Tap targets: 24×24 minimum added by a pseudo-element, never by padding. */
.tap-target { position: relative; }
.tap-target::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%;
  height: 100%; min-height: 24px; z-index: 1;
}

::selection { background: var(--color-accent); color: var(--color-on-accent); }

/* ==== layout.css ==== */
/* Page-level structure: container, masthead, inner-page head, sections, footer.
 * Moved from the approved mockup (masthead, grid-bleed, section rhythm, footer);
 * .page-head, .crumbs and the footer columns are new, built in its language. */

.wrap { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap--narrow { width: min(880px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* 12-column grid that can bleed to the viewport edge (hero, Quina, page heads) */
.grid-bleed {
  display: grid;
  grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [content-start] repeat(12, minmax(0, 110px)) [content-end] minmax(var(--gutter), 1fr) [full-end];
}

/* ── masthead ─────────────────────────────────────────────────────────── */
.mast { padding-top: 10px; background: var(--color-bg); position: relative; z-index: var(--z-header); }
.edition {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 6px 0 10px; border-bottom: 1px solid var(--color-ink);
  font: 400 14px/1.3 var(--font-data); color: var(--color-ink-2);
}
.edition b { color: var(--color-ink); font-weight: 700; }
.ed-left, .ed-right { display: flex; align-items: center; gap: 10px; }
.ed-right .icon { width: 16px; height: 16px; }
.badge18 {
  display: inline-grid; place-items: center; min-width: 38px; height: 24px; padding: 0 5px;
  background: var(--color-ink); color: var(--color-bg); font: 400 14px/1 var(--font-display); text-decoration: none;
}
a.badge18:hover { color: var(--color-bg); background: var(--color-brand); }

.nameplate { display: block; padding: 14px 0 10px; color: var(--color-ink); text-decoration: none; overflow: hidden; }
.nameplate:hover { color: var(--color-ink); }
.np { display: inline-block; white-space: nowrap; font: 400 min(5.05vw, 72px)/.92 var(--font-display); letter-spacing: .005em; }   /* safe before JS fit: never wider than the column */
.np-line { display: inline-block; }
.np-2 { color: var(--color-brand); transition: color var(--dur-base) var(--ease); }
.nameplate:hover .np-2 { color: var(--color-accent); }
/* inner pages: a compact nameplate, the full one belongs to the home page */
.mast--compact .np { font-size: clamp(34px, 3.4vw, 54px); }
.mast--compact .nameplate { padding: 10px 0 8px; }

.rubric {
  display: flex; align-items: stretch; justify-content: space-between; gap: 16px; padding-top: 9px;
  background:
    linear-gradient(var(--color-ink), var(--color-ink)) 0 0 / 100% 4px no-repeat,
    linear-gradient(var(--color-ink), var(--color-ink)) 0 6px / 100% 1px no-repeat,
    linear-gradient(var(--color-ink), var(--color-ink)) 0 100% / 100% 1px no-repeat;
}
.rub-list { display: flex; align-items: stretch; list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; }
.rub-list > li { display: flex; position: relative; }
.rub-list > li + li::before { content: ""; align-self: center; width: 5px; height: 5px; background: var(--color-ink); transform: rotate(45deg); margin: 0 2px; }
.rub-link {
  display: flex; align-items: center; gap: 6px; min-height: 50px; padding: 0 13px; border: 0; background: none;
  font: 600 15px/1 var(--font-body); color: var(--color-ink); text-decoration: none;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.rub-link:hover, .rub-link[aria-expanded="true"] { background: var(--color-ink); color: var(--color-bg); }
.rub-link[aria-current="page"] { box-shadow: inset 0 -4px 0 var(--color-brand); }
.rub-link[aria-current="page"]:hover { color: var(--color-bg); }
.rub-link .icon { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease); }
.rub-link[aria-expanded="true"] .icon { transform: rotate(180deg); }
.more-panel {
  position: absolute; top: 100%; right: 0; z-index: var(--z-dropdown); min-width: 260px;
  background: var(--color-surface); border: var(--bw) solid var(--color-ink); box-shadow: var(--shadow-block); padding: 8px 0;
}
.more-panel ul { list-style: none; margin: 0; padding: 0; }
.more-panel a { display: flex; align-items: center; min-height: 44px; padding: 0 18px; color: var(--color-ink); text-decoration: none; font-weight: 500; }
.more-panel a:hover, .more-panel a:focus-visible, .more-panel a[aria-current="page"] { background: var(--color-bg-2); box-shadow: inset 4px 0 0 var(--color-brand); }
.rub-bet {
  display: flex; align-items: center; gap: 8px; align-self: center; min-height: 44px; padding: 0 14px; margin: 3px 0;
  background: var(--color-accent); color: var(--color-on-accent); text-decoration: none;
  font: 600 15px/1 var(--font-body); border: 2px solid var(--color-ink);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.rub-bet small { font: 400 12px/1 var(--font-data); opacity: .9; }
.rub-bet:hover { background: var(--color-ink); color: var(--color-bg); }
.rub-bet .icon { width: 16px; height: 16px; }
.menu-btn, .rub-bet-m { display: none; }

/* ── inner-page head (new, in the mockup's language) ─────────────────── */
.page-head { padding: 34px 0 0; overflow-x: clip; }
.crumbs { font: 400 14px/1.4 var(--font-data); color: var(--color-ink-2); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; }
.crumbs li + li::before { content: "/"; margin: 0 8px; color: var(--color-ink-2); }
.crumbs a { color: var(--color-ink-2); }
.crumbs a:hover { color: var(--color-ink); }
.crumbs [aria-current] { color: var(--color-ink); font-weight: 700; }
.ph-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 32px 56px; align-items: end; margin-top: 22px; }
.ph-folio { font: 400 15px/1.3 var(--font-data); color: var(--color-ink-2); display: flex; align-items: center; gap: 10px; }
.ph-folio span { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border: 2px solid var(--color-ink); font: 400 16px/1 var(--font-display); color: var(--color-ink); }
.page-head h1 { font: 400 var(--fs-h1-page)/1.04 var(--font-display); margin-top: 14px; letter-spacing: -.005em; }
.page-head h1 .h1-2 { color: var(--color-accent); }
.ph-lead { font-size: var(--fs-lead); line-height: 1.55; max-width: 36em; }
.ph-lead + .btn-row { margin-top: 22px; }
.ph-meta { margin-top: 18px; font: 400 14px/1.5 var(--font-data); color: var(--color-ink-2); }
/* the photo strip: a xilogravura cut on the diagonal, bleeding right */
.ph-media { position: relative; margin-top: 34px; height: clamp(200px, 22vw, 320px); background: var(--color-brand); clip-path: polygon(0 0, 100% 0, 100% 100%, 3% 100%); }
.ph-media .xilo { position: absolute; inset: 0; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(3% + 14px) calc(100% - 14px)); }
.ph-media .cap { position: absolute; right: var(--gutter); top: 12px; margin: 0; background: var(--color-bg); padding: 3px 8px; border: 1.5px solid var(--color-ink); z-index: 2; }
.page-head + .flags { margin-top: 0; }

/* ── sections ─────────────────────────────────────────────────────────── */
.sec { padding: var(--space-8) 0; }
.sec--tight { padding: var(--space-7) 0; }
.sec--band { background: var(--color-bg-2); }
.sec--ink { background: var(--color-ink); color: var(--color-bg); }
.sec--ink a { color: var(--color-bg); }
.sec--ink a:hover { color: var(--color-sun); }
.sec-folio { font: 400 15px/1.3 var(--font-data); color: var(--color-ink-2); display: flex; align-items: center; gap: 10px; }
.sec-folio span { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border: 2px solid var(--color-ink); font: 400 16px/1 var(--font-display); color: var(--color-ink); }
.sec--ink .sec-folio { color: var(--color-foot-muted); }
.sec--ink .sec-folio span { border-color: var(--color-bg); color: var(--color-bg); }
.sec-title { font: 400 var(--fs-h2)/1 var(--font-display); margin-top: 14px; }
.sec-lead { font-size: var(--fs-lead); line-height: 1.55; margin-top: 16px; max-width: 40em; }
.sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 32px; margin-bottom: 34px; }
.sec-head > div { max-width: 46em; }
.sec-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; }
.sec-more .icon { width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease); }
.sec-more:hover .icon { transform: translateX(3px); }
.h3 { font: 400 var(--fs-h3)/1.1 var(--font-display); }

/* long text (legal, guides) */
.prose { font-size: var(--fs-body); line-height: 1.65; max-width: 44em; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font: 400 clamp(28px, 2.6vw, 38px)/1.08 var(--font-display); margin-top: 1.8em; scroll-margin-top: 24px; }
.prose h3 { font: 700 19px/1.3 var(--font-body); margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: square; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--color-brand-text); }
.prose strong { font-weight: 700; }
.prose .note { border-left: var(--bw) solid var(--color-brand); padding: 10px 0 10px 16px; background: var(--color-bg-2); }

/* ── footer ───────────────────────────────────────────────────────────── */
.foot { background: var(--color-ink); color: var(--color-bg); padding: 48px 0 28px; }
.foot a { color: var(--color-bg); }
.foot a:hover { color: var(--color-sun); }
.rg {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px 32px; align-items: center;
  padding: 24px 28px; border: var(--bw) solid var(--color-bg); box-shadow: 6px 6px 0 var(--color-brand);
}
.rg-badge {
  width: 84px; height: 84px; display: grid; place-items: center;
  background: var(--color-brand); color: var(--color-on-brand); border: var(--bw) solid var(--color-bg);
  font: 400 34px/1 var(--font-display);
}
.rg-1 { font: 700 19px/1.35 var(--font-body); }
.rg-2 { font-size: 17px; line-height: 1.5; margin-top: 6px; max-width: 46em; }
.foot .btn { background: transparent; color: var(--color-bg); border-color: var(--color-bg); box-shadow: 4px 4px 0 var(--color-brand); }
.foot .btn:hover { background: var(--color-bg); color: var(--color-ink); }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
.foot-h { font: 400 22px/1.1 var(--font-display); margin-bottom: 12px; color: var(--color-bg); }
.foot-cols ul { list-style: none; margin: 0; padding: 0; }
.foot-cols li { font-size: 15px; line-height: 1.5; color: var(--color-foot-text); }
.foot-cols li a, .foot-cols li button { display: inline-flex; min-height: 34px; align-items: center; color: var(--color-bg); text-decoration: none; }
.foot-cols li a:hover, .foot-cols li button:hover { color: var(--color-sun); text-decoration: underline; }
.foot-cols li button { background: none; border: 0; padding: 0; font: inherit; }
/* data blocks go in a wide auto-fit band, never a narrow 4th column */
.foot-data {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 32px;
  margin-top: 40px; padding-top: 26px; border-top: 1px solid rgba(239, 230, 210, .35);
}
.foot-data h3 { font: 700 13px/1.3 var(--font-data); text-transform: uppercase; letter-spacing: .06em; color: var(--color-sun); margin-bottom: 6px; }
.foot-data p { font-size: 15px; line-height: 1.55; color: var(--color-foot-text); }
.foot-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(239, 230, 210, .35);
  font: 400 13px/1.5 var(--font-data); color: var(--color-foot-muted);
}
.foot-np { display: inline-block; font: 400 clamp(28px, 3vw, 40px)/1 var(--font-display); color: var(--color-bg); text-decoration: none; margin-bottom: 12px; }
.foot-np span { color: var(--color-brand); }

/* ── back to top ──────────────────────────────────────────────────────── */
.to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: var(--z-header);
  width: 48px; height: 48px; display: grid; place-items: center;
  border: var(--bw) solid var(--color-ink); background: var(--color-surface); color: var(--color-ink);
  box-shadow: 3px 3px 0 var(--color-ink);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.to-top:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--color-ink); }
.to-top .icon { width: 22px; height: 22px; }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .rub-list .rub-hide-md { display: none; }
}
@media (max-width: 1024px) {
  .foot-data { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rubric { align-items: center; padding-bottom: 0; }
  .rub-list, .rub-bet { display: none; }
  .menu-btn {
    display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; margin: 8px 0;
    border: var(--bw) solid var(--color-ink); background: var(--color-surface); color: var(--color-ink);
    font: 600 16px/1 var(--font-body); box-shadow: 3px 3px 0 var(--color-ink);
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  }
  .menu-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--color-ink); }
  .menu-btn .icon { width: 20px; height: 20px; }
  .rubric .rub-bet-m { display: inline-flex; align-self: center; }
  .ph-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 760px) {
  .edition { font-size: 12.5px; flex-wrap: wrap; gap: 4px 12px; }
  .ed-mid { display: none; }
  .np { display: block; font-size: 12vw; line-height: .94; }
  .np-line { display: block; width: max-content; }
  .mast--compact .np { font-size: 10.4vw; }
  .mast--compact .np-line { display: block; width: auto; }
  .nameplate { padding: 12px 0 8px; }
  .rubric .rub-bet-m { flex-direction: column; align-items: flex-start; gap: 3px; padding: 6px 34px 6px 12px; position: relative; }
  .rubric .rub-bet-m .icon { position: absolute; right: 10px; top: 50%; margin-top: -8px; }
  .page-head { padding-top: 22px; }
  .ph-media { height: 190px; margin-top: 26px; clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%); }
  .ph-media .xilo { clip-path: polygon(0 calc(12% + 12px), 100% 12px, 100% 100%, 0 100%); }
  .ph-media .cap { top: auto; bottom: 10px; }
  .sec { padding: 56px 0; }
  .sec--tight { padding: 40px 0; }
  .sec-head { margin-bottom: 26px; }
  .rg { grid-template-columns: auto minmax(0, 1fr); padding: 20px 18px; }
  .rg-badge { width: 64px; height: 64px; font-size: 26px; align-self: start; }
  .rg .btn { grid-column: 1 / -1; }
  .rg-1 { font-size: 17px; }
  .rg-2 { font-size: 16px; }
  .foot-cols { grid-template-columns: 1fr; gap: 26px; }
  .foot-data { grid-template-columns: 1fr; }
}
@media (max-width: 389px) {
  .rubric .rub-bet-m small { display: none; }
}

/* "Rateios" moves into the Mais panel when the rubric gets tight */
.more-panel .more-md { display: none; }
@media (max-width: 1180px) { .more-panel .more-md { display: block; } }

/* ==== components.css ==== */
/* Reusable pieces. From the mockup: buttons, bandeirolas, zig-zag edge,
 * xilogravura, folheto, status, segmented switch, páreo accordion, inscritos
 * table, Quina combination, cascade. New in its language (S3): data tables,
 * filters, tabs, fields and form states, alerts, overlays (menu, modal, gate,
 * cookie banner), gallery, steps, facts, empty state. */

/* ── icons ────────────────────────────────────────────────────────────── */
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon--missing { display: inline-block; width: 1em; height: 1em; outline: 1px dashed var(--color-error); }

/* ── buttons (mockup) ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 20px;
  border: var(--bw) solid var(--color-ink); background: var(--color-surface); color: var(--color-ink);
  font: 600 16px/1.1 var(--font-body); text-decoration: none; text-align: center; box-shadow: var(--shadow-btn);
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-btn-hover); color: var(--color-ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: var(--shadow-btn-active); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; transform: none; box-shadow: none; background: var(--color-bg-2); color: var(--color-ink-2); border-style: dashed; }
.btn--brand { background: var(--color-brand); color: var(--color-on-brand); }
.btn--brand:hover { color: var(--color-on-brand); }
.btn--ink { background: var(--color-ink); color: var(--color-bg); box-shadow: 4px 4px 0 var(--color-brand); }
.btn--ink:hover { color: var(--color-bg); box-shadow: 6px 6px 0 var(--color-brand); }
.btn--ink:active { box-shadow: 2px 2px 0 var(--color-brand); }
.btn--accent { background: var(--color-accent); color: var(--color-on-accent); }
.btn--accent:hover { color: var(--color-on-accent); }
.btn--sm { min-height: 44px; padding: 0 14px; font-size: 15px; box-shadow: 3px 3px 0 var(--color-ink); }
.btn small { font: 400 12px/1 var(--font-data); }   /* full opacity: 4.5:1 on urucum and anil */
.btn .icon { width: 20px; height: 20px; }
.btn.is-busy { pointer-events: none; opacity: .75; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px 16px; }
/* four buttons never break 3 + 1: below the width where they fit in one line they sit 2 × 2 */
@media (min-width: 761px) and (max-width: 1380px) {
  .btn-row:has(> :nth-child(4):last-child) { display: grid; grid-template-columns: repeat(2, max-content); }
}

/* text link with an arrow / external mark */
.ext { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-width: 100%; min-height: 44px; font-weight: 600; color: var(--color-accent); }
.ext small { font: 400 12px/1 var(--font-data); color: var(--color-ink-2); }
.ext .icon { width: 17px; height: 17px; }
.ext:hover { color: var(--color-ink); }

/* ── signature: bandeirolas + zig-zag edge (mockup) ───────────────────── */
.flags { height: 30px; position: relative; overflow: hidden; }
.flags::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 2px; background: var(--color-ink); }
.flags::after {
  content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 22px;
  background: repeating-linear-gradient(90deg, var(--color-brand) 0 var(--flag), var(--color-accent) 0 calc(2 * var(--flag)), var(--color-sun) 0 calc(3 * var(--flag)), var(--color-ink) 0 calc(4 * var(--flag)));
  -webkit-mask: conic-gradient(from 150deg at 50% 0, #000 60deg, #0000 0) 0 0 / var(--flag) 100% repeat-x;
          mask: conic-gradient(from 150deg at 50% 0, #000 60deg, #0000 0) 0 0 / var(--flag) 100% repeat-x;
}
.zz-top, .zz-bottom { position: relative; }
.zz-top::before, .zz-bottom::after { content: ""; position: absolute; left: 0; right: 0; height: 14px; pointer-events: none; background-size: 28px 14px; background-repeat: repeat-x; }
.zz-top::before { top: -14px; background-image: conic-gradient(from -45deg at 50% 100%, var(--zz, var(--color-bg-2)) 90deg, #0000 0); }
.zz-bottom::after { bottom: -14px; background-image: conic-gradient(from 135deg at 50% 0, var(--zz, var(--color-bg-2)) 90deg, #0000 0); }

/* ── signature: xilogravura photo (mockup) ────────────────────────────── */
.xilo { margin: 0; position: relative; isolation: isolate; overflow: hidden; background: var(--color-bg); }
.xilo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(2.1) brightness(1.12); mix-blend-mode: multiply; }
.xilo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background: repeating-linear-gradient(-14deg, rgba(27, 22, 17, .2) 0 1px, transparent 1px 4px);
}
.xilo picture { width: 100%; height: 100%; }
.xilo img { object-position: var(--pos, 50% 50%); }
.xilo--soft img { filter: grayscale(1) contrast(1.45) brightness(1.02); }
.xilo--urucum { background: var(--color-brand); }
.xilo--urucum img { filter: grayscale(1) contrast(2.3) brightness(1.2); }
.xilo--urucum::after { background: repeating-linear-gradient(-14deg, rgba(27, 22, 17, .28) 0 1px, transparent 1px 4px); }
.xilo--anil { background: #9AA3D6; }
/* the photo in colour, framed like a print — for galleries where people are the point */
.print { margin: 0; border: var(--bw) solid var(--color-ink); background: var(--color-surface); box-shadow: 5px 5px 0 var(--color-ink); }
.print picture { display: block; height: 100%; }
.print img { width: 100%; height: 100%; object-fit: cover; }
.cap { font: 400 12px/1.35 var(--font-data); color: var(--color-ink-2); margin-top: 8px; }

/* ── signature: folheto card (mockup) ─────────────────────────────────── */
/* The sheet (paper, frame, block shadow) is painted by ::before, so the number badge
   sits ON the sheet's corner instead of spilling out of a painted box. */
/* The tilt belongs to the paper: the sheet, its title band and photo lean; the body text stays level. */
.folheto { position: relative; padding: var(--bw); transition: transform var(--dur-base) ease; }
.folheto > .fo-head, .folheto > .fo-photo { transform: rotate(var(--tilt, 0deg)); transition: transform var(--dur-base) ease; }
.folheto::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--color-surface); border: var(--bw) solid var(--color-ink); box-shadow: var(--fo-shadow, var(--shadow-block));
  transform: rotate(var(--tilt, 0deg)); transition: box-shadow var(--dur-base) ease, transform var(--dur-base) ease;
}
.folheto:hover { transform: translate(-2px, -3px); }
.folheto:hover::before, .folheto:hover > .fo-head, .folheto:hover > .fo-photo { transform: none; }
.folheto:hover::before { box-shadow: 9px 9px 0 var(--color-ink); }
.folheto--still:hover { transform: none; }
.folheto--still:hover::before, .folheto--still:hover > .fo-head, .folheto--still:hover > .fo-photo { transform: rotate(var(--tilt, 0deg)); }
.folheto--still:hover::before { box-shadow: var(--fo-shadow, var(--shadow-block)); }
.fo-head {
  background: var(--color-ink); color: var(--color-bg); padding: 12px 64px 12px 16px; position: relative;
  font: 400 21px/1.05 var(--font-display); letter-spacing: .01em;
}
.fo-head::after { content: ""; position: absolute; inset: 5px; border: 1.5px solid rgba(239, 230, 210, .55); pointer-events: none; }
.fo-head a { color: inherit; text-decoration: none; }
.fo-head a::before { content: ""; position: absolute; inset: 0; z-index: 1; }   /* whole card clickable */
.fo-num {
  position: absolute; top: -16px; right: -14px; z-index: 2; width: 54px; height: 54px; display: grid; place-items: center;
  background: var(--color-brand); color: var(--color-on-brand); border: var(--bw) solid var(--color-ink);
  font: 400 30px/1 var(--font-display); transform: rotate(5deg); box-shadow: 3px 3px 0 var(--color-ink); font-variant-numeric: tabular-nums;
}
.fo-num--anil { background: var(--color-accent); color: var(--color-on-accent); }
.fo-num--ink { background: var(--color-ink); color: var(--color-bg); }
.fo-num .icon { width: 26px; height: 26px; }
.fo-body { padding: 14px 16px 16px; }
.fo-time { display: flex; align-items: baseline; gap: 12px; font: 700 30px/1 var(--font-data); font-variant-numeric: tabular-nums; }
.fo-time span { font: 400 16px/1 var(--font-data); color: var(--color-ink-2); }
.fo-name { font: 600 16px/1.3 var(--font-body); margin-top: 10px; }
.fo-sub { font: 400 14px/1.35 var(--font-body); color: var(--color-ink-2); margin-top: 2px; }
.fo-text { font-size: 15px; line-height: 1.5; }
.fo-text + .fo-text { margin-top: 8px; }
.fo-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-top: 14px; padding-top: 12px; border-top: 1.5px dashed var(--color-ink); }
.fo-link { position: relative; z-index: 2; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 600 15px/1 var(--font-body); color: var(--color-accent); }
.fo-link .icon { width: 18px; height: 18px; }
.fo-photo { border-bottom: var(--bw) solid var(--color-ink); aspect-ratio: 16 / 9; overflow: hidden; }

/* grids of folhetos with the tilt rhythm */
.fo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 34px 28px; }
.fo-grid > .folheto:nth-child(3n+1) { --tilt: -1.2deg; }
.fo-grid > .folheto:nth-child(3n+2) { --tilt: .9deg; }
.fo-grid > .folheto:nth-child(3n) { --tilt: -.6deg; }

/* ── status stamp (mockup) ────────────────────────────────────────────── */
.status {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 3px 9px; border: 2px solid var(--color-ink);
  font: 700 12px/1 var(--font-data); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  background: var(--color-bg); color: var(--color-ink);
}
.status[data-s="insc"] { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.status[data-s="prog"]::before { content: ""; width: 8px; height: 8px; background: var(--color-sun); border: 1.5px solid var(--color-ink); }
.status[data-s="vivo"] { background: var(--color-brand); color: var(--color-on-brand); }
.status[data-s="ofic"] { background: var(--color-ink); color: var(--color-bg); }
.status[data-s="aguard"] { background: var(--color-bg-2); border-style: dashed; }
.status[data-s="arq"] { background: var(--color-bg-2); color: var(--color-ink-2); border-color: var(--color-ink-2); }

/* ── segmented switch (mockup) ────────────────────────────────────────── */
.seg-label { font: 400 13px/1.3 var(--font-data); color: var(--color-ink-2); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.seg { display: inline-flex; flex-wrap: wrap; border: var(--bw) solid var(--color-ink); background: var(--color-surface); }
.seg button, .seg a {
  min-height: 44px; padding: 0 18px; border: 0; background: transparent; display: inline-flex; align-items: center;
  font: 600 15px/1 var(--font-body); color: var(--color-ink); text-decoration: none;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.seg > * + * { border-left: var(--bw) solid var(--color-ink) !important; }
.seg [aria-pressed="true"], .seg [aria-selected="true"], .seg [aria-current="true"] { background: var(--color-ink); color: var(--color-bg); }
.seg button:not([aria-pressed="true"]):not([aria-selected="true"]):hover, .seg a:not([aria-current="true"]):hover { background: var(--color-bg-2); }

/* ── páreo accordion + inscritos table (mockup) ───────────────────────── */
.pareos { display: grid; gap: 14px; }
.pareo { border: var(--bw) solid var(--color-ink); background: var(--color-surface); scroll-margin-top: 20px; }
.pareo:nth-child(even) { background: var(--color-bg); }
.pareo-btn {
  width: 100%; display: grid; grid-template-columns: 56px 90px minmax(0, 1fr) auto 28px; align-items: center; gap: 18px;
  padding: 14px 18px 14px 14px; background: transparent; border: 0; text-align: left; color: var(--color-ink);
  transition: background-color var(--dur-fast) ease;
}
.pareo-btn:hover { background: rgba(27, 22, 17, .05); }
.p-num {
  width: 56px; height: 56px; display: grid; place-items: center; background: var(--color-brand); color: var(--color-on-brand);
  border: var(--bw) solid var(--color-ink); font: 400 30px/1 var(--font-display); box-shadow: 3px 3px 0 var(--color-ink);
}
.pareo:nth-child(even) .p-num { background: var(--color-accent); color: var(--color-on-accent); }
.p-time { font: 700 28px/1 var(--font-data); font-variant-numeric: tabular-nums; }
.p-title { display: grid; gap: 4px; }
.p-name { font: 600 17px/1.3 var(--font-body); }
.p-sub { font: 400 14px/1.35 var(--font-data); color: var(--color-ink-2); }
.p-chev { width: 24px; height: 24px; transition: transform var(--dur-base) ease; }
.pareo-btn[aria-expanded="true"] .p-chev { transform: rotate(180deg); }
.pareo-body { border-top: var(--bw) solid var(--color-ink); padding: 6px 18px 18px; }
.p-cond { font: 400 14px/1.5 var(--font-data); color: var(--color-ink-2); padding: 10px 0 4px; }
.p-cond b { color: var(--color-ink); }

.insc { width: 100%; border-collapse: collapse; font-size: 15px; }
.insc caption { text-align: left; font: 400 13px/1.4 var(--font-data); color: var(--color-ink-2); padding: 10px 0 6px; }
.insc th { font: 400 12px/1.2 var(--font-data); text-transform: uppercase; letter-spacing: .06em; color: var(--color-ink-2); text-align: left; padding: 10px 10px 8px 0; border-bottom: 2px solid var(--color-ink); }
.insc td { padding: 11px 10px 11px 0; border-bottom: 1px solid var(--color-line-soft); vertical-align: top; }
.insc tr:last-child td { border-bottom: 0; }
.cloth {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--color-ink); background: var(--color-bg);
  font: 700 17px/1 var(--font-data); font-variant-numeric: tabular-nums;
}
.cloth--1 { background: var(--color-brand); color: var(--color-on-brand); }
.c-animal strong { font-weight: 700; font-size: 16px; }
.c-peso, .c-data { font-family: var(--font-data); font-variant-numeric: tabular-nums; white-space: nowrap; }
.x-line { display: none; font: 400 13px/1.4 var(--font-data); color: var(--color-ink-2); margin-top: 3px; }
.is-full .x-line { display: block; }
.pareo-actions { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1.5px dashed var(--color-ink); }

/* ── generic data table (results, rateios, GP) ────────────────────────── */
.table-wrap { overflow-x: auto; border: var(--bw) solid var(--color-ink); background: var(--color-surface); box-shadow: var(--shadow-block); }
.dtable { width: 100%; border-collapse: collapse; font-size: 15px; }
.dtable caption { text-align: left; padding: 12px 16px; font: 400 13px/1.4 var(--font-data); color: var(--color-ink-2); border-bottom: 2px solid var(--color-ink); }
.dtable th { background: var(--color-ink); color: var(--color-bg); font: 400 12px/1.2 var(--font-data); text-transform: uppercase; letter-spacing: .06em; text-align: left; padding: 12px 14px; white-space: nowrap; }
.dtable td { padding: 12px 14px; border-bottom: 1px solid var(--color-line-soft); vertical-align: top; }
.dtable tbody tr:nth-child(even) td { background: rgba(230, 218, 192, .45); }
.dtable tbody tr:hover td { background: var(--color-bg-2); }
.dtable tr:last-child td { border-bottom: 0; }
.dtable .r { text-align: right; }
.dtable .mono { font-family: var(--font-data); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dtable .strong { font-weight: 700; }
.dtable .combo-cell { font: 700 16px/1 var(--font-data); letter-spacing: .04em; }

/* ── filters (new) ────────────────────────────────────────────────────── */
.filters {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 16px; align-items: end;
  padding: 18px; border: var(--bw) solid var(--color-ink); background: var(--color-bg-2);
}
.filters .field__label { color: var(--color-ink); font: 700 13px/1.3 var(--font-data); text-transform: uppercase; letter-spacing: .05em; }
.filters-count { font: 400 14px/1.4 var(--font-data); color: var(--color-ink-2); margin: 16px 0 14px; }
.filters-count b { color: var(--color-ink); }

/* ── tabs (new, same look as .seg) ────────────────────────────────────── */
.tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: var(--bw) solid var(--color-ink); }
.tabs [role="tab"] {
  min-height: 48px; padding: 0 18px; border: var(--bw) solid var(--color-ink); border-bottom: 0; margin-right: -3px;
  background: var(--color-bg-2); font: 600 15px/1 var(--font-body); color: var(--color-ink);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.tabs [role="tab"]:hover { background: var(--color-surface); }
.tabs [role="tab"][aria-selected="true"] { background: var(--color-ink); color: var(--color-bg); }
.tab-panel { padding-top: 24px; }

/* ── Quina: combination + cascade (mockup) ────────────────────────────── */
.combo-label { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; background: var(--color-ink); color: var(--color-bg); padding: 8px 14px; font: 400 15px/1.3 var(--font-data); margin-bottom: 14px; }
.combo-label b { color: var(--color-sun); font-weight: 700; }
.combo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.combo li { display: grid; gap: 8px; align-content: start; }
.cb {
  position: relative; aspect-ratio: 4 / 5; display: grid; place-items: center; background: var(--color-surface);
  border: var(--bw) solid var(--color-ink); box-shadow: 5px 5px 0 var(--color-ink);
  font: 400 clamp(40px, 4.6vw, 70px)/1 var(--font-display); font-variant-numeric: tabular-nums;
}
.cb::before { content: ""; position: absolute; inset: 6px; border: 1.5px solid var(--color-ink); opacity: .35; }
.cb i { position: absolute; top: 8px; left: 10px; font: 700 13px/1 var(--font-data); font-style: normal; }
.combo li:first-child .cb { background: var(--color-brand); color: var(--color-on-brand); }
.combo li:first-child .cb::before { border-color: var(--color-on-brand); opacity: .6; }
.cb-name { font: 700 14px/1.25 var(--font-data); }
.combo-names { display: none; }
.combo--sm .cb { font-size: clamp(28px, 2.6vw, 40px); box-shadow: 3px 3px 0 var(--color-ink); }

.cascade { list-style: none; margin: 16px 0 0; padding: 0 0 42px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cascade .folheto { --fo-shadow: 4px 4px 0 var(--color-ink); }
.cascade li:nth-child(1) { --tilt: -1.5deg; }
.cascade li:nth-child(2) { --tilt: 1deg; transform: translateY(14px); }
.cascade li:nth-child(3) { --tilt: -1deg; transform: translateY(28px); }
.cascade li:nth-child(4) { --tilt: 1.4deg; transform: translateY(42px); }
.cascade .fo-head { font-size: 18px; padding: 10px 12px; }
.cascade .fo-head::after { inset: 4px; }
.cascade .fo-num { width: 40px; height: 40px; font-size: 22px; top: -14px; right: -10px; }
.cascade .fo-body { padding: 10px 12px 12px; font-size: 14px; line-height: 1.35; }
.pips { display: flex; flex-wrap: nowrap; gap: 4px; margin-top: 10px; }
.pips i { width: 12px; height: 12px; border: 2px solid var(--color-ink); }
.pips i.on { background: var(--color-ink); }

/* ── steps (new: numbered folheto path) ───────────────────────────────── */
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px 22px; counter-reset: step; }
.steps > li { counter-increment: step; position: relative; background: var(--color-surface); border: var(--bw) solid var(--color-ink); box-shadow: 4px 4px 0 var(--color-ink); padding: 44px 16px 16px; }
.steps > li::before {
  content: counter(step); position: absolute; top: -18px; left: 14px; width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--color-brand); color: var(--color-on-brand); border: var(--bw) solid var(--color-ink);
  font: 400 24px/1 var(--font-display); box-shadow: 3px 3px 0 var(--color-ink); transform: rotate(-4deg);
}
.steps > li:nth-child(even)::before { background: var(--color-accent); color: var(--color-on-accent); transform: rotate(4deg); }
.steps h3 { font: 700 17px/1.3 var(--font-body); }
.steps p { font-size: 15px; line-height: 1.5; margin-top: 6px; color: var(--color-ink-2); }
/* a horizontal chain of short labels: Largada → Corrida → … */
/* one line on desktop (steps share the width); a vertical path below 1025px */
.chain { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 8px; list-style: none; padding: 0; }
.chain li { flex: 1 1 0; min-width: 0; }
.chain li span { width: 100%; }
.chain li { display: inline-flex; align-items: center; gap: 8px; }
.chain li span { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 10px; border: 2px solid var(--color-ink); background: var(--color-surface); font: 700 14px/1.2 var(--font-data); }
.chain li + li::before { content: "→"; font: 700 18px/1 var(--font-data); color: var(--color-brand-text); }
.chain li:last-child span { background: var(--color-ink); color: var(--color-bg); }
/* vertical path for narrow columns (and every chain below 1025px) */
.chain--v, .po-chain, .corr-read-side .chain { flex-direction: column; align-items: flex-start; }
.chain--v li, .po-chain li, .corr-read-side .chain li { flex: none; width: 100%; max-width: 420px; }
.chain--v li + li::before, .po-chain li + li::before, .corr-read-side .chain li + li::before { content: "↓"; }

/* ── facts list (new) ─────────────────────────────────────────────────── */
.facts { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; border-top: var(--bw) solid var(--color-ink); }
.facts dt, .facts dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--color-line-soft); }
.facts dt { font: 400 13px/1.5 var(--font-data); color: var(--color-ink-2); text-transform: uppercase; letter-spacing: .05em; }
.facts dd { font: 700 15px/1.5 var(--font-data); }

/* big number stats (new) */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: var(--bw) solid var(--color-ink); background: var(--color-surface); }
.stats > div { padding: 16px 18px; }
.stats > div + div { border-left: 1.5px dashed var(--color-ink); }
.stats b { display: block; font: 400 clamp(30px, 3vw, 44px)/1 var(--font-display); }
.stats span { display: block; margin-top: 6px; font: 400 13px/1.35 var(--font-data); color: var(--color-ink-2); }

/* ── gallery (new) ────────────────────────────────────────────────────── */
.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.gallery figure { margin: 0; grid-column: span 4; }
.gallery figure.w6 { grid-column: span 6; }
.gallery figure.w8 { grid-column: span 8; }
.gallery figure.w12 { grid-column: span 12; }
.gallery .print, .gallery .xilo { aspect-ratio: 3 / 2; }
.gallery figure.wide .print, .gallery figure.wide .xilo { aspect-ratio: 21 / 9; }
.gallery .xilo { border: var(--bw) solid var(--color-ink); }

/* ── quote (new) ──────────────────────────────────────────────────────── */
.quote { border-left: 6px solid var(--color-brand); padding: 6px 0 6px 22px; }
.quote p { font: 400 clamp(22px, 2.2vw, 30px)/1.25 var(--font-display); }
.quote cite { display: block; margin-top: 12px; font: 400 14px/1.4 var(--font-data); font-style: normal; color: var(--color-ink-2); }

/* ── notice / empty state / alerts (new) ──────────────────────────────── */
.notice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 18px; align-items: start; padding: 18px 20px; border: var(--bw) solid var(--color-ink); background: var(--color-surface); }
.notice .icon { width: 28px; height: 28px; color: var(--color-brand-text); }
.notice h3 { font: 700 17px/1.3 var(--font-body); }
.notice p { font-size: 15px; line-height: 1.5; margin-top: 4px; }
.notice--anil { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-ink); }
.notice--anil .icon { color: var(--color-on-accent); }
.notice--anil a { color: var(--color-on-accent); }
.empty { padding: 36px 20px; text-align: center; border: 2px dashed var(--color-ink); background: var(--color-surface); }
.empty h3 { font: 400 24px/1.1 var(--font-display); }
.empty p { margin-top: 8px; color: var(--color-ink-2); }
.alert { padding: 12px 16px; border: 2px solid currentColor; font-weight: 600; }
.alert--ok { color: var(--color-success); background: var(--color-success-bg); }
.alert--err { color: var(--color-error); background: var(--color-error-bg); }

/* ── live screen + pieces inside .sec--ink (home, Ao Vivo) ──────────── */
.live-screen { position: relative; aspect-ratio: 16 / 9; border: var(--bw) solid var(--color-bg); background: #0F0C09; display: grid; place-items: center; text-align: center; padding: 24px; overflow: hidden; }
.live-screen .xilo { position: absolute; inset: 0; opacity: .32; background: #0F0C09; }
.live-screen .xilo img { mix-blend-mode: screen; filter: grayscale(1) contrast(1.6) brightness(.9); }
.live-screen .xilo::after { display: none; }
.live-msg { position: relative; z-index: 1; display: grid; gap: 10px; justify-items: center; }
.live-msg .icon { width: 40px; height: 40px; color: var(--color-sun); }
.live-msg strong { font: 400 clamp(22px, 2.2vw, 30px)/1.1 var(--font-display); }
.live-msg span { font: 400 14px/1.4 var(--font-data); color: var(--color-foot-muted); }
.sec--ink .facts { border-top-color: var(--color-bg); }
.sec--ink .facts dt { color: var(--color-foot-muted); }
.sec--ink .facts dt, .sec--ink .facts dd { border-bottom-color: rgba(239, 230, 210, .25); }
.sec--ink .btn { background: transparent; color: var(--color-bg); border-color: var(--color-bg); box-shadow: 4px 4px 0 var(--color-brand); }
.sec--ink .btn:hover { background: var(--color-bg); color: var(--color-ink); }
.sec--ink .btn--brand { background: var(--color-brand); color: var(--color-on-brand); }
.sec--ink .btn--brand:hover { background: var(--color-bg); color: var(--color-ink); }
.sec--ink .status { border-color: var(--color-bg); }


/* ── fields and forms (new) ───────────────────────────────────────────── */
.form { display: grid; gap: 18px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.field { display: grid; gap: 6px; }
.field__label { font: 600 15px/1.3 var(--font-body); color: var(--color-ink); }
.field__label .req { color: var(--color-brand-text); }
.field__hint { font: 400 13px/1.4 var(--font-data); color: var(--color-ink-2); }
.field input:not(.visually-hidden):not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 0 14px; border: 2px solid var(--color-ink); border-radius: 0;
  background: var(--color-surface); color: var(--color-ink); font: 400 16px/1.3 var(--font-body);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.field select { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--color-ink) 50%), linear-gradient(135deg, var(--color-ink) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.field textarea { min-height: 150px; padding-block: 12px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { background-color: #FFFCF4; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 4px 4px 0 var(--color-accent); }
.field input:disabled, .field select:disabled, .field textarea:disabled { opacity: .55; cursor: not-allowed; }
.field__error { color: var(--color-error); font: 600 14px/1.4 var(--font-body); }
.field [aria-invalid="true"], .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--color-error) !important; box-shadow: 4px 4px 0 var(--color-error-bg); }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: 12px; }
.field--check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--color-ink); }
.field--check .field__label { font-weight: 400; }
.form__error { color: var(--color-error); background: var(--color-error-bg); border: 2px solid var(--color-error); padding: 10px 14px; font-weight: 600; }
.form__success { color: var(--color-success); }
.form-done { border: var(--bw) solid var(--color-ink); background: var(--color-surface); box-shadow: var(--shadow-block); padding: 26px; }
.form-done h3 { font: 400 28px/1.1 var(--font-display); }
.form-done p { margin-top: 10px; }
.protocol { display: inline-block; margin-top: 12px; padding: 8px 14px; background: var(--color-ink); color: var(--color-bg); font: 700 20px/1.2 var(--font-data); letter-spacing: .06em; }

/* switch (cookie categories) */
.switch { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--color-line-soft); }
.switch .sw-t { font: 700 16px/1.3 var(--font-body); }
.switch .sw-d { grid-column: 1; font-size: 14px; line-height: 1.45; color: var(--color-ink-2); }
.switch input { grid-row: 1 / span 2; grid-column: 2; appearance: none; width: 52px; height: 30px; border: 2px solid var(--color-ink); background: var(--color-bg-2); position: relative; cursor: pointer; transition: background-color var(--dur-fast) ease; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: var(--color-ink); transition: transform var(--dur-fast) ease; }
.switch input:checked { background: var(--color-accent); }
.switch input:checked::after { transform: translateX(22px); background: var(--color-on-accent); }
.switch input:disabled { opacity: .6; cursor: not-allowed; }

/* ── overlays (menu, modal, gate) ─────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 16px;
  background: rgba(27, 22, 17, .6); opacity: 0; transition: opacity var(--dur-slow) var(--ease);
}
.overlay.is-open { opacity: 1; }
.overlay__panel {
  position: relative; width: min(100%, 560px); max-height: calc(100vh - 32px); overflow: auto;
  background: var(--color-bg); border: var(--bw) solid var(--color-ink); box-shadow: 8px 8px 0 var(--color-brand);
  transform: translateY(10px); transition: transform var(--dur-slow) var(--ease);
}
.overlay.is-open .overlay__panel { transform: none; }
.ov-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--color-ink); color: var(--color-bg); padding: 14px 16px 14px 20px; }
.ov-head h2 { font: 400 24px/1.05 var(--font-display); }
.ov-body { padding: 20px; }
.ov-body > * + * { margin-top: 14px; }
.ov-actions { display: flex; flex-wrap: wrap; gap: 12px 14px; padding: 0 20px 22px; }
.ov-x {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 2px solid currentColor; background: transparent; color: inherit;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.ov-head .ov-x:hover { background: var(--color-bg); color: var(--color-ink); }

/* full-screen menu (mockup overlay) */
.overlay--menu { display: block; padding: 0; background: var(--color-bg); z-index: var(--z-overlay); overflow-y: auto; }
.overlay--menu .overlay__panel { width: 100%; max-height: none; min-height: 100%; border: 0; box-shadow: none; display: flex; flex-direction: column; transform: translateY(-8px); }
.ov-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px var(--gutter) 6px; }
.ov-brand { font: 400 22px/1 var(--font-display); color: var(--color-ink); text-decoration: none; }
.ov-brand span { color: var(--color-brand); }
.ov-close { width: 48px; height: 48px; display: grid; place-items: center; border: var(--bw) solid var(--color-ink); background: var(--color-surface); box-shadow: 3px 3px 0 var(--color-ink); }
.ov-nav { padding: 10px var(--gutter) 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px 32px; }
.ov-group h2 { font: 400 13px/1.3 var(--font-data); text-transform: uppercase; letter-spacing: .06em; color: var(--color-ink-2); padding-bottom: 6px; border-bottom: var(--bw) solid var(--color-ink); }
.ov-group a { display: flex; align-items: center; justify-content: space-between; min-height: 50px; border-bottom: 1px solid var(--color-line-soft); color: var(--color-ink); text-decoration: none; font: 600 20px/1.2 var(--font-body); }
.ov-group a:hover, .ov-group a[aria-current="page"] { color: var(--color-brand-text); }
.ov-foot { margin-top: auto; padding: 18px var(--gutter) 26px; background: var(--color-bg-2); font-size: 15px; }
.ov-foot .btn { width: 100%; margin-bottom: 14px; }

/* age gate (TZ §8): locked, server-rendered */
.overlay--gate { z-index: var(--z-gate); background: rgba(27, 22, 17, .82); }
.overlay--gate .overlay__panel { width: min(100%, 600px); text-align: left; }
.gate-badge { width: 76px; height: 76px; display: grid; place-items: center; background: var(--color-brand); color: var(--color-on-brand); border: var(--bw) solid var(--color-ink); box-shadow: 4px 4px 0 var(--color-ink); font: 400 30px/1 var(--font-display); transform: rotate(-4deg); }
.gate-title { font: 400 clamp(30px, 4vw, 44px)/1.02 var(--font-display); }
.gate-note { font-size: 15px; line-height: 1.5; color: var(--color-ink-2); border-top: 1.5px dashed var(--color-ink); padding-top: 14px; }

/* cookie banner: bottom sheet, not a modal */
.cookie-bar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: var(--z-banner); max-width: 980px; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 28px; align-items: center;
  padding: 18px 20px; background: var(--color-surface); border: var(--bw) solid var(--color-ink); box-shadow: 8px 8px 0 var(--color-accent);
}
.cookie-bar h2 { font: 400 22px/1.1 var(--font-display); }
.cookie-bar p { font-size: 15px; line-height: 1.5; margin-top: 6px; }
.cookie-bar .btn-row { justify-content: flex-end; }

/* redirect interstitial content */
.redirect-url { display: block; margin-top: 6px; padding: 10px 12px; border: 2px dashed var(--color-ink); background: var(--color-surface); font: 700 17px/1.3 var(--font-data); word-break: break-all; }

@media (max-width: 1024px) {
  .chain { flex-direction: column; align-items: flex-start; }
  .chain li { flex: none; width: 100%; max-width: 420px; }
  .chain li + li::before { content: "↓"; }
  .cascade { grid-template-columns: 1fr 1fr; gap: 26px 16px; padding-bottom: 14px; }
  .cascade li:nth-child(n) { transform: none; }
  .cascade li:nth-child(2), .cascade li:nth-child(4) { transform: translateY(14px); }
  .gallery figure, .gallery figure.w8 { grid-column: span 6; }
}
@media (max-width: 760px) {
  .fo-num { right: -8px; }
  .fo-grid { gap: 30px; }
  .pareo-btn { grid-template-columns: 48px minmax(0, 1fr) 24px; grid-template-rows: auto auto; gap: 6px 14px; padding: 12px; }
  .p-num { width: 48px; height: 48px; font-size: 26px; grid-row: 1 / span 2; }
  .p-time { font-size: 22px; grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 10px; }
  .p-title { grid-column: 2 / 4; grid-row: 2; }
  .pareo-btn .status { grid-column: 2; grid-row: 1; justify-self: end; }
  .p-chev { grid-column: 3; grid-row: 1; }
  .pareo-body { padding: 4px 12px 14px; }
  .insc thead { display: none; }
  .insc, .insc tbody { display: block; }
  .insc caption { display: block; }
  .insc tr { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--color-line-soft); }
  .insc tr:last-child { border-bottom: 0; }
  .insc td { padding: 0; border: 0; }
  .insc td.c-n { grid-row: 1 / span 3; }
  .insc td.c-animal { grid-column: 2 / 4; }
  .insc td[data-label]::before { content: attr(data-label); display: block; font: 400 11px/1.3 var(--font-data); text-transform: uppercase; letter-spacing: .06em; color: var(--color-ink-2); }
  /* data tables become labelled cards */
  .dtable--cards thead { display: none; }
  .dtable--cards, .dtable--cards tbody, .dtable--cards tr, .dtable--cards td { display: block; }
  .dtable--cards tr { padding: 12px 14px; border-bottom: 1px solid var(--color-line-soft); }
  .dtable--cards tbody tr:nth-child(even) td { background: transparent; }
  .dtable--cards tbody tr:nth-child(even) { background: rgba(230, 218, 192, .45); }
  .dtable--cards td { padding: 3px 0; border: 0; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; }
  .dtable--cards td::before { content: attr(data-label); font: 400 11px/1.6 var(--font-data); text-transform: uppercase; letter-spacing: .06em; color: var(--color-ink-2); }
  .dtable--cards td.r { text-align: left; }
  .table-wrap:has(.dtable--cards) { overflow: visible; }
  .dtable--cards caption { display: block; }
  .dtable--cards td > .status { justify-self: start; }
  .combo { gap: 8px; }
  .cb { font-size: 34px; box-shadow: 3px 3px 0 var(--color-ink); }
  .cb i { font-size: 11px; top: 5px; left: 5px; }
  .cb::before { inset: 4px; }
  .combo .cb-name { display: none; }
  .combo-names { display: block; margin-top: 14px; font: 400 14px/1.6 var(--font-data); }
  .combo-names b { font-weight: 700; }
  .form-grid { grid-template-columns: 1fr; }
  .gallery { gap: 14px; }
  .gallery figure, .gallery figure.w6, .gallery figure.w8 { grid-column: span 12; }
  .stats > div + div { border-left: 0; border-top: 1.5px dashed var(--color-ink); }
  .cookie-bar { grid-template-columns: 1fr; left: 10px; right: 10px; bottom: 10px; padding: 16px; }
  .cookie-bar .btn-row { justify-content: stretch; display: grid; grid-template-columns: 1fr 1fr; }
  .cookie-bar .btn-row .btn:first-child { grid-column: 1 / -1; }
  .overlay__panel { box-shadow: 5px 5px 0 var(--color-brand); }
  .tabs { flex-wrap: nowrap; overflow-x: auto; }
  .tabs [role="tab"] { flex: none; }
}

@media (max-width: 389px) {
  .pareo-btn { grid-template-rows: auto auto auto; }
  .pareo-btn .status { grid-column: 2 / 4; grid-row: 3; justify-self: start; }
}

/* ── a11y (final pass) ────────────────────────────────────────────────── */
/* focus ring on dark (tinta) and anil surfaces: sol — 8.3:1 on tinta, 4.9:1 on anil */
.foot :focus-visible, .sec--ink :focus-visible, .notice--anil :focus-visible, .fo-head :focus-visible,
.ov-head :focus-visible, .combo-label :focus-visible, .bs-opt:has(input:checked) :focus-visible { outline-color: var(--color-sun); }

/* while the cookie banner is on screen, a focused element is never scrolled under it (WCAG 2.4.11) —
   plain CSS, so it also holds without JS; the padding disappears with the banner */
html:has(.cookie-bar) { scroll-padding-bottom: 200px; }
@media (max-width: 1023px) { html:has(.cookie-bar) { scroll-padding-bottom: 360px; } }
@media (max-width: 760px) { html:has(.cookie-bar) { scroll-padding-bottom: 310px; } }
@media (max-width: 389px) { html:has(.cookie-bar) { scroll-padding-bottom: 380px; } }

@media (max-width: 389px) {
  /* card tables on 320: long values wrap instead of touching the card frame */
  .dtable--cards .combo-cell, .dtable--cards .mono { white-space: normal; letter-spacing: 0; font-size: 14px; }
  .dtable--cards td { overflow-wrap: anywhere; }
  .dtable--cards tr { padding-inline: 10px; }
}

/* ==== wide.css ==== */
/* Шире 1440: раскладка стоит по центру, фоны секций — во всю ширину. Каждой
 * секции верхнего уровня — её боковой паддинг плюс половина «лишней» ширины
 * окна. Абсолютные декорации, привязанные к краю секции, сдвигаются margin'ом на
 * ту же величину. Ниже 1441 не срабатывает. Проверка на 1920 — обязательная часть
 * S6 (flow.js включает 1920). См. site-task/S5-build.md, «Ширины шире 1440». */
@media (min-width: 1441px) {
  :root { --edge: calc((100vw - 1440px) / 2); }
  /* секции с боковым паддингом 60 — перечислить все верхнеуровневые блоки */
  /* .site-header, .hero, .section-a { padding-inline: calc(60px + var(--edge)); } */
  /* секции с паддингом 80 */
  /* .legal-body { padding-inline: calc(80px + var(--edge)); } */
  /* секции, у которых паддинг живёт на детях */
  /* .hero-split { padding-inline: var(--edge); } */
  /* абсолютные декорации у левого / правого края */
  /* .hero__wm { margin-left: var(--edge); }  .featured__wm { margin-right: var(--edge); } */
}

/* ==== motion.css ==== */
/* Motion, loaded last: transitions, keyframes, and the reduced-motion block.
 *
 * Rules that do not bend (S5-tech, "Движение"):
 *   · only opacity, transform, colour, shadow and filter are animated;
 *   · the first screen does not animate in — that is a direct hit on LCP;
 *   · the end state is the resting layout (transform: none, opacity: 1) — a
 *     screenshot must not catch a half-played animation.
 */

[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Staggering by nth-child costs nothing and reads as intentional. */
[data-reveal-group] > * { transition-delay: 0ms; }
[data-reveal-group] > *:nth-child(2) { transition-delay: 60ms; }
[data-reveal-group] > *:nth-child(3) { transition-delay: 120ms; }
[data-reveal-group] > *:nth-child(4) { transition-delay: 180ms; }

/* Height is never animated: a row expands through grid-template-rows. */
.collapsible { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease); }
.collapsible.is-open { grid-template-rows: 1fr; }
.collapsible > * { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s var(--dur-base); }   /* min-height: a 0fr row cannot collapse a padded item; put padding on the grandchild */
.collapsible.is-open > * { visibility: visible; transition-delay: 0s; }

/* no global smooth scrolling: it slows every programmatic scroll (tools, focus jumps) */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* Signature motion: the folheto settles when hovered (defined in components.css);
   with reduced motion it keeps its tilt and does not move. */
@media (prefers-reduced-motion: reduce) {
  .folheto:hover { transform: rotate(var(--tilt, 0deg)); }
  .btn:hover, .btn:active { transform: none; }
}