/* Made with love by Webtoget · https://webtoget.no */
/* ==== tokens.css ==== */
/* Hallmark · macrostructure: 07 Manifesto (fight bill: H2 diptych with the club's own reel → the timetable bill → two ways in → the club's purpose on a night band → contact sheet from Instagram → club split → closing) · theme: custom — newsprint paper oklch(95.5% .013 88) / petrol-black ink oklch(21.5% .035 238) from the badge's petrol / avatar gold oklch(80% .13 82) as the one accent (fills only) · nav: N6 one-row masthead, double rule · footer: Ft4 colophon on night · read: club site for teenagers, adults and parents in Ringerike who want to start boxing this month, raw / warm / old-school, leaning toward a fight bill: Clarendon headlines on newsprint, the club's own footage in ink-on-paper duotone · dials: V6 M3 D4 */
/* Made with love by Webtoget · https://webtoget.no */
/* Omie's Gym — design tokens. Every colour, font, size, space, radius, easing and z-index lives here.
   Gold is a FILL (buttons, stars, rules on night) — never text on paper; links use --color-link.
   Contrast: ink/paper 15.3 · muted/paper-3 4.8 · ink/gold 9.3 · on-ink-2/night 9.0 · gold/night 9.6 · link/paper 8.0 */

:root {
  /* ---- colour · OKLCH only ---- */
  --color-paper:        oklch(95.5% 0.013 88);   /* newsprint                          */
  --color-paper-2:      oklch(92.5% 0.016 88);   /* raised band                        */
  --color-paper-3:      oklch(88.5% 0.018 88);   /* media backing                      */
  --color-ink:          oklch(21.5% 0.035 238);  /* petrol-black, the badge's hue      */
  --color-ink-2:        oklch(36% 0.03 238);
  --color-muted:        oklch(47% 0.025 238);    /* ≥ 4.5:1 on paper-3                 */
  --color-rule:         oklch(80% 0.02 88);      /* hairlines                          */
  --color-rule-2:       oklch(87% 0.016 88);
  --color-link:         oklch(40% 0.07 236);     /* the badge petrol — links on paper  */
  --color-accent:       oklch(80% 0.13 82);      /* THE accent: avatar gold, as a fill */
  --color-accent-2:     oklch(74% 0.135 78);     /* hover / pressed                    */
  --color-accent-ink:   oklch(21.5% 0.035 238);  /* text on gold                       */
  --color-accent-soft:  oklch(90% 0.06 86);      /* selection                          */
  --color-focus:        oklch(50% 0.1 238);
  --color-error:        oklch(50% 0.18 28);
  --color-success:      oklch(45% 0.11 160);

  /* the night band (manifesto, footer) — the same petrol, lifted with lightness, not glow */
  --color-ink-paper:    oklch(20% 0.032 238);
  --color-ink-paper-2:  oklch(25.5% 0.035 238);
  --color-on-ink:       oklch(95% 0.012 88);
  --color-on-ink-2:     oklch(78% 0.015 88);
  --color-rule-on-ink:  oklch(34% 0.03 238);
  --color-on-ink-wash:  oklch(95% 0.012 88 / 0.12);

  /* overlays */
  --color-scrim:        oklch(14% 0.03 238 / 0.72);
  --color-backdrop:     oklch(12% 0.03 238 / 0.9);

  /* the badge (logo artwork) */
  --color-badge:        oklch(40% 0.07 236);

  /* ---- type · Besley (Clarendon revival) + Libre Franklin · self-hosted ---- */
  --font-display: "Besley", Georgia, "Times New Roman", serif;
  --font-body:    "Libre Franklin", "Segoe UI", system-ui, sans-serif;
  --font-mono:    ui-monospace, "Cascadia Mono", Consolas, monospace;

  --text-xs:      0.8125rem;
  --text-sm:      0.9375rem;
  --text-base:    1.0625rem;
  --text-md:      1.25rem;
  --text-lg:      1.5625rem;
  --text-xl:      1.953rem;
  --text-2xl:     2.441rem;
  --text-3xl:     3.052rem;
  --text-h1:      clamp(2.75rem, 1.55rem + 4.9vw, 6.25rem);   /* «Boksing i Hønefoss.» on two lines from 320 to 1440 */
  --text-h2:      clamp(2rem, 1.35rem + 2.5vw, 3.5rem);
  --text-h3:      clamp(1.35rem, 1.2rem + 0.6vw, 1.75rem);
  --text-lead:    clamp(1.15rem, 1.05rem + 0.45vw, 1.375rem);
  --text-display: clamp(2.6rem, 1.2rem + 5.6vw, 7rem);       /* the manifesto line, the bill's figures */

  --leading-tight: 1;
  --leading-snug:  1.15;
  --leading-body:  1.6;
  --track-label:   0.08em;
  --track-tight:   -0.022em;
  --measure:       62ch;
  --measure-tight: 44ch;

  /* ---- space · 4pt scale ---- */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;
  --section-y:        clamp(3.5rem, 2.25rem + 5.5vw, 7.5rem);
  --section-y-tight:  clamp(2.25rem, 1.5rem + 3vw, 4rem);
  --page-gutter:      clamp(1rem, 4vw, 3rem);
  --page-max:         80rem;
  --nav-h:            4.25rem;

  /* ---- surface · sharp, like print ---- */
  --rule-hair:   1px;
  --rule-heavy:  4px;
  --radius-sm:   2px;
  --radius-md:   2px;
  --radius-lg:   3px;
  --radius-pill: 999px;
  --shadow-lift:  0 1px 2px oklch(21.5% 0.035 238 / 0.08), 0 10px 28px oklch(21.5% 0.035 238 / 0.1);
  --shadow-panel: 0 18px 48px oklch(21.5% 0.035 238 / 0.22);

  /* ---- motion · Emil's curves by role ---- */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-hover:  ease;
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-linear: linear;
  --dur-micro:   120ms;
  --dur-short:   220ms;
  --dur-medium:  380ms;
  --dur-long:    600ms;

  /* ---- z ---- */
  --z-base:   1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-nav:    200;
  --z-menu:   300;
  --z-modal:  400;
  --z-toast:  500;
  --z-skip:   600;
}


/* ==== fonts.css ==== */
/* ==========================================================================
   fonts.css — self-hosted webfonts (generated by _recipe/tools/fonts.mjs)
   Besley · Libre Franklin — SIL Open Font License.
   Served from /assets/fonts: no third-party request, works offline, GDPR-clean.
   ========================================================================== */
@font-face {
  font-family: "Besley";
  font-style: italic;
  font-weight: 700 900;
  font-display: swap;
  src: url(/assets/fonts/besley-italic-700-900-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: "Besley";
  font-style: italic;
  font-weight: 700 900;
  font-display: swap;
  src: url(/assets/fonts/besley-italic-700-900-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: "Besley";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/besley-normal-400-900-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: "Besley";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/besley-normal-400-900-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: "Libre Franklin";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/libre-franklin-normal-400-800-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: "Libre Franklin";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/libre-franklin-normal-400-800-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;
}


/* ==== base.css ==== */
/* ==========================================================================
   base.css — reset, typography, layout primitives, focus, motion floor.
   Design-neutral: this file is the same on every Webtoget site. Tokens only.
   ========================================================================== */

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

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--space-md));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color-scheme: light;
}

body {
  overflow-x: clip;
  min-height: 100dvh;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-variant-numeric: oldstyle-nums proportional-nums;
}

img, picture, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
picture { height: 100%; }   /* so an img with height: 100% + object-fit: cover fills a sized box even inside <picture> */
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; cursor: pointer; }
address { font-style: normal; }
table { border-collapse: collapse; width: 100%; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
[hidden] { display: none !important; }
main { display: block; }

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

/* ---- focus · appears instantly, never animated in ---- */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-sm); }

/* ---- typography ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}
h1 { font-size: var(--text-h1); line-height: var(--leading-tight); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-md); }
p, li, dd, td, th, figcaption, label { max-width: var(--measure); }
p + p { margin-top: var(--space-md); }
strong, b { font-weight: 600; }
small, .small { font-size: var(--text-sm); }
.lead { font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-2); max-width: var(--measure-tight); text-wrap: pretty; }
.t-num { font-variant-numeric: tabular-nums lining-nums; }
.t-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--color-muted); }

/* long-form copy (personvern, artikler) */
.prose > * + * { margin-top: var(--space-md); }
.prose h2 { margin-top: var(--space-2xl); font-size: var(--text-xl); }
.prose h3 { margin-top: var(--space-xl); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: var(--space-2xs); }
.prose a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--color-accent-2); }
.prose table th, .prose table td { text-align: left; padding: var(--space-xs) var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: top; }
.prose blockquote { padding-left: var(--space-lg); border-left: 2px solid var(--color-accent); color: var(--color-ink-2); }

/* ---- layout primitives ---- */
.wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter); }
.wrap--narrow { max-width: 48rem; }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section--rule { border-top: var(--rule-hair) solid var(--color-rule); }
.is-raised { background: var(--color-paper-2); }
.is-dark { background: var(--color-ink-paper); color: var(--color-on-ink); }
.is-dark .lead, .is-dark .t-label { color: var(--color-on-ink-2); }
.grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.stack > * + * { margin-top: var(--space-md); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); align-items: center; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- skip link ---- */
.skip-link {
  position: absolute; inset-inline-start: var(--space-md); top: -100%;
  z-index: var(--z-skip);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-ink); color: var(--color-paper);
  font-weight: 600; border-radius: var(--radius-sm);
}
.skip-link:focus-visible { top: var(--space-md); }

/* ---- reveals · one quiet rise per block, gated on .js so nothing is ever
        hidden without scripting; main.js adds a 3 s failsafe ---- */
.js .io-reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.js .io-reveal.is-in { opacity: 1; transform: none; }
.js .io-reveal:nth-child(2) { transition-delay: 60ms; }
.js .io-reveal:nth-child(3) { transition-delay: 120ms; }
.js .io-reveal:nth-child(4) { transition-delay: 180ms; }

/* ---- reduced motion · the floor, not an option ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .js .io-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- print ---- */
@media print {
  .nav, .menu, .actionbar, .skip-link, .consent, .footer__credit, .btn { display: none !important; }
  body { background: white; color: black; } /* print: real paper, real ink — the one place keywords are right */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}


/* ==== components.css ==== */
/* ==========================================================================
   components.css — the Webtoget component library.
   --------------------------------------------------------------------------
   Every block is wrapped in  /* @component name *\/ … /* @end *\/  markers so
   `npm run qa` can report which components a site actually uses (prune the
   rest before launch). Tokens only — no raw colours, fonts or magic numbers.
   Restyle in the design pass; keep the class names and a11y contract so
   js/main.js keeps working.

   Interaction craft (emil-design-eng), applied throughout and expected of
   every block the design pass adds in site.css:
   · every pressable element scales to 0.97 on :active (the UI is listening)
   · hover effects live behind @media (hover: hover) and (pointer: fine)
   · transitions name their properties — never `transition: all`
   · entrances start from opacity 0 + scale ≥ 0.95 / a few px — never scale(0)
   · easing by role (see tokens.css) — hover → --ease-hover, enter/exit →
     --ease-out, morph → --ease-in-out, sheets → --ease-drawer
   · nothing interactive takes longer than --dur-short; --dur-long is the reveal
   ========================================================================== */

/* @component nav */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: var(--color-paper);
  border-bottom: var(--rule-hair) solid transparent;
  transition: border-color var(--dur-short) var(--ease-hover), box-shadow var(--dur-short) var(--ease-hover);
}
.nav.is-scrolled { border-bottom-color: var(--color-rule); }
.nav__inner { min-height: var(--nav-h); display: flex; align-items: center; gap: var(--space-lg); }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 44px; min-width: 44px; flex: none; }
.brand__logo { height: 2.25rem; width: auto; }
.brand__word { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); letter-spacing: -0.01em; white-space: nowrap; }
.nav__links { display: none; }
.nav__links ul { display: flex; gap: var(--space-xs); }
.nav__links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm);
  font-weight: 500; color: var(--color-ink-2); white-space: nowrap;
  border-bottom: 2px solid transparent; transition: color var(--dur-short) var(--ease-hover);
}
.nav__links a[aria-current="page"] { color: var(--color-ink); }
@media (hover: hover) and (pointer: fine) { .nav__links a:hover { color: var(--color-ink); } }
.nav__links a[aria-current="page"] { border-bottom-color: var(--color-accent); }
.nav__aside { display: none; align-items: center; gap: var(--space-md); margin-left: auto; }
.nav__tel { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nav__toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-xs);
  min-height: 44px; min-width: 44px; padding: 0 var(--space-xs); font-weight: 600;
  transition: transform var(--dur-micro) var(--ease-out);
}
.nav__toggle:active { transform: scale(0.97); }
.nav__burger { position: relative; width: 1.25rem; height: 2px; background: currentColor; border-radius: 1px; }
.nav__burger::before, .nav__burger::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 1px; }
.nav__burger::before { top: -6px; }
.nav__burger::after { top: 6px; }
@media (min-width: 64rem) {
  .nav__links, .nav__aside { display: flex; }
  .nav__links { margin-left: auto; }
  .nav__aside { margin-left: 0; }
  .nav__toggle { display: none; }
}

/* mobile menu — native <dialog>. Opens as a sheet: fade + 12 px settle on the iOS
   drawer curve, items cascade 40 ms apart (Emil: stagger 30–80 ms, never blocking).
   Browsers without @starting-style / allow-discrete simply open it instantly. */
.menu { inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; border: 0; padding: 0; background: var(--color-paper); color: var(--color-ink); z-index: var(--z-menu); }
.menu::backdrop { background: transparent; }
.menu[open] { display: grid; grid-template-rows: auto 1fr auto; }
.menu { opacity: 0; transform: translateY(-12px); transition: opacity var(--dur-medium) var(--ease-out), transform var(--dur-medium) var(--ease-drawer); }
.menu { transition: opacity var(--dur-medium) var(--ease-out), transform var(--dur-medium) var(--ease-drawer), display var(--dur-medium) allow-discrete, overlay var(--dur-medium) allow-discrete; }
.menu[open] { opacity: 1; transform: none; }
@starting-style { .menu[open] { opacity: 0; transform: translateY(-12px); } }
.menu__bar { display: flex; align-items: center; justify-content: space-between; min-height: var(--nav-h); padding-inline: var(--page-gutter); border-bottom: var(--rule-hair) solid var(--color-rule); }
.menu__close { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; font-weight: 600; transition: transform var(--dur-micro) var(--ease-out); }
.menu__close:active { transform: scale(0.97); }
.menu__close svg { width: 1rem; height: 1rem; }
.menu__list { padding: var(--space-lg) var(--page-gutter); display: grid; align-content: start; }
.menu__list a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; font-family: var(--font-display); font-size: var(--text-xl); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.menu__list a[aria-current="page"] { color: var(--color-accent); }
.menu[open] .menu__list li { opacity: 1; transform: none; transition: opacity var(--dur-medium) var(--ease-out), transform var(--dur-medium) var(--ease-out); }
@starting-style { .menu[open] .menu__list li { opacity: 0; transform: translateY(8px); } }
.menu[open] .menu__list li:nth-child(2) { transition-delay: 40ms; }
.menu[open] .menu__list li:nth-child(3) { transition-delay: 80ms; }
.menu[open] .menu__list li:nth-child(4) { transition-delay: 120ms; }
.menu[open] .menu__list li:nth-child(5) { transition-delay: 160ms; }
.menu[open] .menu__list li:nth-child(n+6) { transition-delay: 200ms; }
.menu__foot { display: grid; gap: var(--space-2xs); padding: var(--space-lg) var(--page-gutter) calc(var(--space-lg) + env(safe-area-inset-bottom)); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); font-size: var(--text-sm); }
.menu__foot a { font-weight: 600; color: var(--color-ink); min-height: 44px; display: inline-flex; align-items: center; }
body.menu-open { overflow: hidden; }
/* @end */

/* @component buttons */
/* Press = scale(0.97) at --dur-micro, the single most-felt detail (Emil). Hover is a
   colour change on --ease-hover, only for devices that can hover. One label per intent
   across the whole site: the wording of the contact CTA is decided once. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 48px; padding: var(--space-sm) var(--space-lg);
  font-weight: 600; font-size: var(--text-base); line-height: 1; white-space: nowrap;
  border-radius: var(--radius-sm); border: var(--rule-hair) solid transparent;
  transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-hover), border-color var(--dur-short) var(--ease-hover), color var(--dur-short) var(--ease-hover);
}
.btn svg { width: 1em; height: 1em; flex: none; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--ghost { border-color: var(--color-rule); color: var(--color-ink); background: transparent; }
.btn--sm { min-height: 44px; padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); }
.btn--lg { min-height: 56px; padding-inline: var(--space-xl); font-size: var(--text-md); }
.is-dark .btn--ghost { border-color: var(--color-rule-on-ink); color: var(--color-on-ink); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--color-accent-2); }
  .btn--ghost:hover { border-color: var(--color-ink); background: var(--color-paper-2); }
  .is-dark .btn--ghost:hover { border-color: var(--color-on-ink); background: var(--color-ink-paper-2); }
  .link-arrow:hover { color: var(--color-accent); }
  .link-arrow:hover::after { transform: translateX(3px); }
}
.btn:active { transform: scale(0.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[data-state="loading"] { position: relative; color: transparent; pointer-events: none; }
.btn[data-state="loading"]::after { content: ""; position: absolute; width: 1.1em; height: 1.1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; color: var(--color-accent-ink); animation: spin 700ms var(--ease-linear) infinite; }
.btn--ghost[data-state="loading"]::after { color: var(--color-ink); }
@keyframes spin { to { transform: rotate(360deg); } }

/* C3 · typographic link */
.link-arrow { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; font-weight: 600; color: var(--color-ink); white-space: nowrap; transition: color var(--dur-short) var(--ease-hover), transform var(--dur-micro) var(--ease-out); }
.link-arrow::after { content: "→"; transition: transform var(--dur-short) var(--ease-hover); }
.link-arrow:active { transform: scale(0.97); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); align-items: center; }
/* @end */

/* @component hero */
.hero { padding-block: var(--section-y-tight) var(--section-y); }
.hero__grid { display: grid; gap: var(--space-xl); align-items: center; }
.hero__copy > * + * { margin-top: var(--space-lg); }
.hero__title { font-size: var(--text-h1); }
.hero__media { position: relative; min-width: 0; }
.hero__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-md); background: var(--color-paper-3); }
@media (min-width: 56rem) {
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
/* @end */

/* @component page-head */
.page-head { padding-block: var(--section-y-tight) var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.page-head h1 { max-width: 22ch; }
.page-head .lead { margin-top: var(--space-md); }
.page-head .actions { margin-top: var(--space-lg); }
/* the opener band: one wide photograph under the head of every subpage — the page's LCP, written `eager`.
   21/9 at desktop, 3/2 on phones so the h1, the lead and the button stay on the first screen. */
.page-head__media { margin-top: var(--space-xl); }
.page-head__media img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius-md); background: var(--color-paper-3); }
@media (max-width: 40rem) { .page-head__media img { aspect-ratio: 3 / 2; } }
.crumbs { padding-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); }
.crumbs li + li::before { content: "/"; margin-right: var(--space-xs); color: var(--color-rule); }
.crumbs a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
.crumbs a { transition: color var(--dur-short) var(--ease-hover); }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--color-ink); text-decoration: underline; } }
/* @end */

/* @component section-head */
/* Stacked: heading, then the lede — never a label-left / heading-right grid, and not
   heading-left / small-paragraph-right either (the "split header" AI tell). (The split
   variant is pruned here: no section on this site needs it.) */
.section__head { max-width: var(--measure); margin-bottom: var(--space-xl); }
.section__head .lead { margin-top: var(--space-sm); }
/* @end */

/* @component services */
/* Card grid — services with a photograph each (F6): the client's own, or stock from `npm run stock` while
   the client has none. Never icons instead of photos. The default for the service index since 1.3; the rows
   above are for a client who has no photos and declined stock. Keep the index number (.card__no) and the
   heading level of the rows: h3 on the front page, h2 on /tjenester/. */
.cards { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.card { position: relative; display: grid; gap: var(--space-sm); min-width: 0; }
.card__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-md); background: var(--color-paper-3); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-short) var(--ease-hover); }
.card :is(h2, h3) { font-size: var(--text-h3); }
.card :is(h2, h3) a { display: inline-block; padding-block: 0.75em; margin-block: -0.75em; text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: 0.18em; transition: text-decoration-color var(--dur-short) var(--ease-hover); }   /* padding = a 44 px target at every width without moving the layout (0.65em measured 42 px on a 390 px phone) */
.card :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; }
.card p { color: var(--color-ink-2); }
@media (hover: hover) and (pointer: fine) {
  .card:hover .card__media img { transform: scale(1.03); }
  .card :is(h2, h3) a:hover { text-decoration-color: var(--color-accent); }
}
/* @end */

/* @component steps */
/* F4 · numbered process. Ordinal content only — this is the one place numbers belong. */
.steps { counter-reset: step; display: grid; gap: var(--space-xl); }
.steps li { counter-increment: step; display: grid; gap: var(--space-xs); min-width: 0; }
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-accent); letter-spacing: var(--track-label); }
.steps h3 { font-size: var(--text-md); }
.steps p { color: var(--color-ink-2); }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
/* @end */

/* @component split */
/* Two columns: copy + one real photograph (about, subpages). */
.split { display: grid; gap: var(--space-xl); align-items: center; }
.split__text > * + * { margin-top: var(--space-md); }
.split__text h2 + .lead { margin-top: var(--space-sm); }
.split__media { min-width: 0; }
.split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-md); background: var(--color-paper-3); }
@media (min-width: 56rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); }
  .split--media-first .split__media { order: -1; }
}
/* @end */

/* @component gallery */
.gallery { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.gallery button { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-paper-3); transition: transform var(--dur-micro) var(--ease-out); }
.gallery button:active { transform: scale(0.97); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-short) var(--ease-hover); }
@media (hover: hover) and (pointer: fine) { .gallery button:hover img { transform: scale(1.04); } }
/* Lightbox is a modal: scales from centre (not from the thumbnail), from 0.97 — never from 0. */
.lightbox { margin: auto; border: 0; padding: 0; background: transparent; max-width: min(96vw, 80rem); max-height: 96dvh; }   /* margin: auto restores the centring the base reset (margin: 0 on *) removes from <dialog> */
.lightbox::backdrop { background: var(--color-backdrop); }
.lightbox[open] { opacity: 1; transform: none; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
@starting-style { .lightbox[open] { opacity: 0; transform: scale(0.97); } }
.lightbox[open]::backdrop { opacity: 1; transition: opacity var(--dur-short) var(--ease-out); }
@starting-style { .lightbox[open]::backdrop { opacity: 0; } }
.lightbox figure { display: grid; gap: var(--space-sm); justify-items: center; }
.lightbox img { max-height: 84dvh; width: auto; max-width: 100%; border-radius: var(--radius-sm); }
.lightbox figcaption { color: var(--color-on-ink-2); font-size: var(--text-sm); }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding: var(--space-xs); color: var(--color-on-ink); }
.lightbox__bar button { min-height: 44px; min-width: 44px; padding-inline: var(--space-sm); font-weight: 600; border-radius: var(--radius-sm); transition: background-color var(--dur-short) var(--ease-hover), transform var(--dur-micro) var(--ease-out); }
.lightbox__bar button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .lightbox__bar button:hover { background: var(--color-on-ink-wash); } }
/* @end */

/* @component hours */
.hours th, .hours td { text-align: left; padding: var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); font-variant-numeric: tabular-nums lining-nums; }
.hours th { font-weight: 500; color: var(--color-ink-2); padding-right: var(--space-lg); }
.hours tr.is-today th, .hours tr.is-today td { color: var(--color-ink); font-weight: 600; }
/* @end */

/* @component form */
.form { display: grid; gap: var(--space-md); max-width: 36rem; }
.form__grid { display: grid; gap: var(--space-md); }
@media (min-width: 40rem) { .form__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .form__grid .field--full { grid-column: 1 / -1; } }
.field { display: grid; gap: var(--space-2xs); min-width: 0; }
.field label { font-weight: 600; font-size: var(--text-sm); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md);
  background: var(--color-paper); color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm);
  transition: border-color var(--dur-short) var(--ease-hover);
}
.field textarea { min-height: 8rem; resize: vertical; }
@media (hover: hover) and (pointer: fine) { .field input:hover, .field textarea:hover { border-color: var(--color-muted); } }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline-offset: 0; border-color: var(--color-focus); }
.field [aria-invalid="true"] { border-color: var(--color-error); }
.field__help { font-size: var(--text-sm); color: var(--color-muted); min-height: 1.2em; }
.field__help.is-error { color: var(--color-error); }
.field--check { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-sm); }
.field--check input { width: 1.5rem; height: 1.5rem; min-height: 0; margin-top: 0.1rem; accent-color: var(--color-accent); } /* 24 px = WCAG 2.5.8; the label is a target too */
.field--check label { font-weight: 400; }
.form__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
.form__fallback { font-size: var(--text-sm); color: var(--color-muted); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notice { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); background: var(--color-paper-2); border-left: 3px solid var(--color-muted); font-size: var(--text-sm); }
.notice.is-error { border-left-color: var(--color-error); }
.notice.is-success { border-left-color: var(--color-success); }
/* @end */

/* @component contact */
/* Contact page: form on the left, the facts (NAP, hours, map) on the right. */
.contact-grid { display: grid; gap: var(--space-2xl); }
.contact-card { display: grid; gap: var(--space-lg); align-content: start; }
@media (min-width: 56rem) { .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
/* @end */

/* @component map */
/* Loads the Google embed only on click — no third-party request, no cookie, until asked. */
.map { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; background: var(--color-paper-3); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; }   /* minmax(0, 1fr): an auto column would grow to the help text's max-content and overflow the box */
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__load { display: grid; gap: var(--space-sm); justify-items: center; text-align: center; padding: var(--space-lg); }
.map__load p { font-size: var(--text-sm); color: var(--color-muted); }
/* @end */

/* @component cta-band */
.cta-band { padding-block: var(--section-y); }
/* @end */

/* @component footer */
.footer { background: var(--color-ink-paper); color: var(--color-on-ink); }
.footer__credit a { color: var(--color-on-ink); min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-color: var(--color-rule-on-ink); }
.footer__credit a { transition: text-decoration-color var(--dur-short) var(--ease-hover); }
@media (hover: hover) and (pointer: fine) { .footer__credit a:hover { text-decoration-color: currentColor; } }
/* @end */

/* @component notfound */
.notfound { min-height: 60dvh; display: grid; align-content: center; gap: var(--space-lg); }
.notfound h1 { font-size: var(--text-display); }
/* @end */


/* ==== site.css ==== */
/* ==========================================================================
   site.css — Omie's Gym. The fight bill.
   --------------------------------------------------------------------------
   Clarendon headlines (Besley) on newsprint, the club's own photographs in
   an ink-on-paper duotone, heavy print rules instead of shadows, one gold.
   Tokens only. Motion: transform + opacity on the role tokens, press on
   every pressable, hover behind (hover: hover) and (pointer: fine).
   Map: 1 base · 2 buttons · 3 masthead + menu · 4 hero + loop · 5 section
   heads · 6 the bill · 7 two ways in · 8 manifesto · 9 contact sheet ·
   10 club split · 11 closing · 12 subpage heads · 13 subpage blocks ·
   14 contact · 15 colophon footer · 16 questions (FAQ) · 17 the comparison
   ========================================================================== */

/* ---- 1 base -------------------------------------------------------------- */
body { font-variant-numeric: lining-nums proportional-nums; }
h1, h2 { font-weight: 900; letter-spacing: var(--track-tight); line-height: var(--leading-tight); }
h3 { font-weight: 800; letter-spacing: -0.012em; line-height: var(--leading-snug); }
h2 { font-size: var(--text-h2); }
::selection { background: var(--color-accent-soft); color: var(--color-ink); }

/* links on paper are the badge's petrol, never the gold (gold is a fill) */
.prose a, .text-link { color: var(--color-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color var(--dur-short) var(--ease-hover); }
@media (hover: hover) and (pointer: fine) {
  .prose a:hover, .text-link:hover { color: var(--color-ink); }
  .link-arrow:hover { color: var(--color-link); }
}
.link-arrow { font-weight: 700; }
.link-arrow::after { content: "→"; }

/* on the night band the focus ring turns gold (9.6:1) */
.is-dark :focus-visible, .footer :focus-visible, .lightbox :focus-visible { outline-color: var(--color-accent); }
.is-dark .link-arrow { color: var(--color-on-ink); }
@media (hover: hover) and (pointer: fine) { .is-dark .link-arrow:hover { color: var(--color-accent); } }

/* ---- 2 buttons ------------------------------------------------------------ */
.btn { font-weight: 700; letter-spacing: 0.005em; border-radius: var(--radius-sm); }
.btn--ghost { border: 2px solid var(--color-ink); color: var(--color-ink); }
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
}
.is-dark .btn--ghost { border-color: var(--color-on-ink); }
@media (hover: hover) and (pointer: fine) {
  .is-dark .btn--ghost:hover { background: var(--color-on-ink); color: var(--color-ink); border-color: var(--color-on-ink); }
}

/* ---- 3 masthead + menu (N6, one row, a double print rule) ----------------- */
.nav[data-nav-style="masthead"] { background: var(--color-paper); border-bottom: 0; padding-bottom: 6px; }
.nav[data-nav-style="masthead"]::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 6px;
  border-top: 3px solid var(--color-ink); border-bottom: var(--rule-hair) solid var(--color-ink);
}
.brand { gap: var(--space-sm); }
.brand__logo { width: 3rem; height: 3rem; }
.brand__word { font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; letter-spacing: -0.015em; line-height: 1; }
.nav__links ul { gap: var(--space-2xs); }
.nav__links a { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); }
.nav__links a[aria-current="page"] { color: var(--color-ink); border-bottom-color: var(--color-ink); }
.nav__aside .btn { margin-left: var(--space-sm); }
.nav__toggle { font-size: var(--text-sm); }
.menu__bar { border-bottom: 3px solid var(--color-ink); }
.menu__list a { font-weight: 800; font-size: var(--text-2xl); letter-spacing: var(--track-tight); }
.menu__list a[aria-current="page"] { color: var(--color-link); }
.menu__foot a { color: var(--color-ink); }

/* ---- 4 hero (H2 diptych, poster cut): copy bottom-left, the reel bleeding off the right edge ---- */
.hero { padding: 0; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 0; }
.hero__copy { padding: var(--space-xl) var(--page-gutter) var(--space-2xl); }
.hero__title { font-size: clamp(2.75rem, 14.5vw, 4.75rem); font-weight: 900; line-height: 0.98; letter-spacing: -0.03em; overflow-wrap: normal; }
.hero .lead { max-width: 31ch; color: var(--color-ink-2); }
.hero__copy > * + * { margin-top: var(--space-lg); }
.hero__copy .actions { margin-top: var(--space-xl); gap: var(--space-md) var(--space-xl); }
.hero__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--color-ink); }
.hero__media picture { height: 100%; }
.hero__media img, .hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; aspect-ratio: auto; border-radius: 0; background: var(--color-ink); }
.hero__media video { opacity: 0; transition: opacity var(--dur-medium) var(--ease-out); }
.hero__media.is-playing video { opacity: 1; }
@media (min-width: 64rem) {
  /* 55/45: the copy keeps the page's left edge (container units, so the scrollbar never skews it),
     the reel runs from the middle to the viewport's right edge, one screen tall */
  .hero { container-type: inline-size; }
  .hero__grid { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); align-items: stretch; gap: 0; min-height: min(56rem, calc(100svh - var(--nav-h) - 6px)); }
  .hero__copy { align-self: end; padding: var(--space-2xl) var(--space-2xl) var(--space-2xl) max(var(--page-gutter), calc((100cqw - var(--page-max)) / 2 + var(--page-gutter))); }
  .hero__title { font-size: clamp(4.25rem, 9vw - 1.1rem, 6.75rem); }
  .hero__media { aspect-ratio: auto; min-height: 32rem; }
}

.loop__toggle {
  position: absolute; right: var(--space-sm); bottom: var(--space-sm); z-index: var(--z-raised);
  display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md);
  background: var(--color-scrim); color: var(--color-on-ink); font-size: var(--text-sm); font-weight: 600;
  border-radius: var(--radius-sm); transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-hover);
}
.loop__toggle svg { width: 0.85rem; height: 0.85rem; flex: none; }
.loop__toggle .i-play, .loop__toggle.is-paused .i-pause { display: none; }
.loop__toggle.is-paused .i-play { display: block; }
.loop__toggle:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .loop__toggle:hover { background: var(--color-ink); } }

/* crumbs: every item on one line height, so «Hjem» and the current page share a baseline */
.crumbs ol { align-items: center; }
.crumbs li { display: inline-flex; align-items: center; min-height: 44px; }

/* stretched grid items keep their content at the top (steps, drills, form fields) */
.steps li, .drills li, .field { align-content: start; }

/* ---- 5 section heads (stacked: heading, then the lede) --------------------- */
.section__head { margin-bottom: var(--space-xl); }
.section__head .lead { margin-top: var(--space-sm); }

/* ---- 6 the bill: training times set like a fight card ---------------------- */
.bill { padding-block: var(--section-y-tight) var(--section-y); }
.bill__frame { border-top: var(--rule-heavy) solid var(--color-ink); border-bottom: var(--rule-hair) solid var(--color-ink); }
.bill__title { padding-block: var(--space-lg) var(--space-md); }
.bill__list { display: grid; grid-template-columns: minmax(0, 1fr); }
.bill__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-2xs) var(--space-md); padding-block: var(--space-md) var(--space-lg); border-top: var(--rule-hair) solid var(--color-ink); }
.bill__day { grid-column: 1; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.bill__what { grid-column: 1; color: var(--color-ink-2); }
.bill__time { grid-column: 2; grid-row: 1 / span 2; font-family: var(--font-display); font-weight: 900; font-size: clamp(3rem, 2rem + 4vw, 6.5rem); line-height: 0.85; letter-spacing: -0.035em; font-variant-numeric: lining-nums proportional-nums; }
.bill__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-lg); padding-block: var(--space-sm); }
.bill__foot p { font-weight: 600; }
@media (min-width: 48rem) {
  .bill__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bill__item { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; padding: var(--space-lg) var(--space-lg) var(--space-xl); border-top: var(--rule-hair) solid var(--color-ink); }
  .bill__item + .bill__item { border-left: var(--rule-hair) solid var(--color-ink); }
  .bill__item:first-child { padding-left: 0; }
  .bill__time { grid-column: 1; grid-row: auto; order: 2; margin-block: var(--space-sm) var(--space-2xs); }
  .bill__what { order: 3; }
}

/* ---- 7 two ways in (F6 cards, a photograph each) ---------------------------- */
.ways__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl) var(--space-xl); }
.ways .card { gap: var(--space-sm); }
.ways .card__media { aspect-ratio: 1; border-radius: var(--radius-md); }
.ways .card__media--low img { object-position: 50% 75%; }
.ways .card__media--high img { object-position: 50% 15%; }
.ways .card :is(h2, h3) { font-size: var(--text-h3); margin-top: var(--space-xs); }
.ways .card :is(h2, h3) a { text-decoration-thickness: 2px; text-decoration-color: var(--color-accent); }
.ways .card p { max-width: 46ch; }
@media (hover: hover) and (pointer: fine) { .ways .card :is(h2, h3) a:hover { text-decoration-color: var(--color-ink); } }
@media (min-width: 48rem) { .ways__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- 8 manifesto: the club's purpose, in its own words, on the night band ---- */
.manifest { padding-block: var(--section-y); }
.manifest__line { font-size: clamp(2.5rem, 1.2rem + 5.2vw, 6rem); line-height: 0.98; letter-spacing: -0.03em; max-width: 18ch; color: var(--color-on-ink); }
.manifest__line::before { content: ""; display: block; width: 3.5rem; height: var(--rule-heavy); margin-bottom: var(--space-xl); background: var(--color-accent); }
.manifest__text { margin-top: var(--space-xl); max-width: 40rem; display: grid; gap: var(--space-md); }
.manifest__text p { font-size: var(--text-lead); line-height: 1.5; color: var(--color-on-ink); }
.manifest__text .manifest__src { font-size: var(--text-sm); color: var(--color-on-ink-2); }
@media (min-width: 64rem) { .manifest__text { margin-left: calc(100% / 12 * 5); } }

/* ---- 9 contact sheet (gallery) ---------------------------------------------- */
.sheet__grid.gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs); }
.sheet__grid.gallery button { border-radius: 0; background: var(--color-ink); }
.sheet__foot { margin-top: var(--space-lg); }
@media (min-width: 48rem) { .sheet__grid.gallery { gap: var(--space-xs); } }
.lightbox__bar button { color: var(--color-on-ink); }

/* ---- 10 club split ------------------------------------------------------------ */
.club { padding-block: var(--section-y); }
.club .split { align-items: center; }
.club .split__media picture { height: auto; }
.club .split__media img { aspect-ratio: 4 / 5; border-radius: var(--radius-md); }
.club h2 { max-width: 14ch; }
.club .split__text .link-arrow { margin-top: var(--space-lg); }
@media (min-width: 56rem) { .club .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

/* ---- 11 closing ---------------------------------------------------------------- */
.closing { padding-block: var(--section-y); background: var(--color-paper-2); border-top: var(--rule-heavy) solid var(--color-ink); }
.closing__inner { display: grid; gap: var(--space-xl); align-items: end; }
.closing h2 { font-size: var(--text-h2); max-width: 12ch; }
.closing .lead { margin-top: var(--space-md); max-width: 38ch; }
.closing__links { display: grid; gap: var(--space-2xs); justify-items: start; }
.closing__links a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-short) var(--ease-hover); }
@media (hover: hover) and (pointer: fine) { .closing__links a:not(.btn):hover { text-decoration-color: var(--color-ink); } }
.closing__links .btn { margin-bottom: var(--space-sm); }
@media (min-width: 56rem) { .closing__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

/* ---- 12 subpage heads: the same diptych as the front, smaller ------------------- */
.page-head { padding-block: var(--space-lg) var(--space-2xl); border-bottom: var(--rule-heavy) solid var(--color-ink); }
.page-head__grid { display: grid; gap: var(--space-xl); align-items: end; }
.page-head h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 5rem); max-width: 12ch; line-height: 1; letter-spacing: -0.03em; }
.page-head .lead { max-width: 36ch; }
.page-head__media { margin-top: 0; }
.page-head__media picture { height: auto; }
.page-head__media img { aspect-ratio: 4 / 5; border-radius: var(--radius-md); }
@media (max-width: 40rem) { .page-head__media img { aspect-ratio: 4 / 3; object-position: 50% 28%; } }
@media (min-width: 56rem) {
  .page-head__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-2xl); }
  .page-head__media img { max-height: calc(100dvh - var(--nav-h) - 12rem); width: 100%; }
}
.page-head--plain { border-bottom-width: var(--rule-hair); }

/* ---- 13 subpage blocks ------------------------------------------------------------ */
/* drills: what a session is made of — a plain index on rules, not icon tiles */
.drills { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 2px solid var(--color-ink); }
.drills li { display: grid; gap: var(--space-2xs); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.drills h3 { font-size: var(--text-h3); }
.drills p { color: var(--color-ink-2); }
@media (min-width: 48rem) {
  .drills { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); }
}

/* the timetable on /trening/ */
.times { display: grid; gap: var(--space-xl); }
.times table { max-width: 34rem; }
.times th, .times td { text-align: left; padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); font-variant-numeric: tabular-nums lining-nums; vertical-align: top; }
.times thead th { font-size: var(--text-sm); color: var(--color-muted); font-weight: 600; border-bottom: 2px solid var(--color-ink); }
.times tbody th { font-weight: 700; padding-right: var(--space-lg); }
.times td + td { padding-left: var(--space-lg); }
@media (min-width: 56rem) { .times { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; } }

/* a loop or photo beside text on a subpage */
.feature .split__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius-md); background: var(--color-ink); }
.feature .split__media picture { height: 100%; }
.feature .split__media img, .feature .split__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; aspect-ratio: auto; }
.feature .split__media video { opacity: 0; transition: opacity var(--dur-medium) var(--ease-out); }
.feature .split__media.is-playing video { opacity: 1; }
.feature .split { align-items: center; }
@media (min-width: 56rem) { .feature .split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }

/* who private lessons are for */
.fits { display: grid; gap: var(--space-md); max-width: 46rem; counter-reset: fit; }
.fits li { position: relative; padding: var(--space-md) 0 var(--space-md) var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-md); line-height: 1.45; }
.fits li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 0.9rem; height: 0.9rem; background: var(--color-accent); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

/* the club facts on /klubben/ — the register, as a printed ledger */
.ledger { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 2px solid var(--color-ink); }
.ledger > div { display: grid; gap: var(--space-2xs); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.ledger dt { font-size: var(--text-sm); color: var(--color-muted); font-weight: 600; }
.ledger dd { font-family: var(--font-display); font-weight: 800; font-size: var(--text-md); line-height: 1.25; font-variant-numeric: lining-nums proportional-nums; }
@media (min-width: 48rem) { .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); } }
.ledger__src { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }

.purpose blockquote { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1.35; letter-spacing: -0.01em; max-width: 34ch; text-wrap: pretty; }
.purpose blockquote p + p { margin-top: var(--space-md); }
.purpose figcaption { margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }

.wide-photo picture { height: auto; }
.wide-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md); background: var(--color-paper-3); }
.wide-photo figcaption, .split__media figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 40rem) { .wide-photo img { aspect-ratio: 4 / 3; } }

.steps li::before { color: var(--color-ink); font-family: var(--font-display); font-weight: 900; font-size: var(--text-xl); letter-spacing: 0; }
.steps h3 { font-size: var(--text-h3); }
.steps li { padding-top: var(--space-md); border-top: 2px solid var(--color-ink); }

/* two photographs side by side (square sources stay sharp at half width) */
.pair { display: grid; gap: var(--space-xs); grid-template-columns: minmax(0, 1fr); }
.pair picture { height: auto; }
.pair img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); background: var(--color-paper-3); }
@media (min-width: 40rem) { .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* /trening/: where, beside the timetable */
.times h2 { margin-bottom: var(--space-lg); }
.times__where { display: grid; gap: var(--space-sm); justify-items: start; padding-top: var(--space-md); border-top: 2px solid var(--color-ink); }
.times__where h3 { font-size: var(--text-h3); }
@media (min-width: 56rem) { .times__where { margin-top: calc(var(--text-h2) + var(--space-lg)); } }

.page-head__media figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

/* ---- 14 contact ---------------------------------------------------------------------- */
.contact-card :is(h2, h3) { font-size: var(--text-h3); }
.contact-card address a { color: var(--color-link); text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: 0.18em; display: inline-flex; align-items: center; min-height: 44px; }
.map { border-radius: var(--radius-md); border: var(--rule-hair) solid var(--color-rule); }
.field input, .field textarea, .field select { border-color: var(--color-ink-2); border-radius: var(--radius-sm); background: var(--color-paper); }
.field--check input { accent-color: var(--color-ink); }
.field select { appearance: auto; }

/* ---- 15 colophon footer (Ft4) on the night band ------------------------------------- */
.footer { padding-block: var(--section-y) calc(var(--space-xl) + env(safe-area-inset-bottom)); border-top: 6px double var(--color-accent); }
.footer__grid { display: grid; gap: var(--space-xl); align-items: start; }
.footer__badge { display: block; width: clamp(8rem, 6rem + 8vw, 12rem); min-height: 44px; }
.footer__badge img { width: 100%; height: auto; }
.footer__colophon { display: grid; gap: var(--space-lg); }
.footer__name { font-family: var(--font-display); font-weight: 900; font-size: var(--text-xl); letter-spacing: -0.02em; line-height: 1.05; max-width: none; }
.footer__name span { display: block; margin-top: var(--space-2xs); font-family: var(--font-body); font-weight: 500; font-size: var(--text-base); letter-spacing: 0; color: var(--color-on-ink-2); }
.footer__facts { display: grid; gap: 0; font-size: var(--text-sm); color: var(--color-on-ink); }
.footer__facts span { display: block; padding-block: var(--space-3xs); }
.footer__facts a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-on-ink); text-decoration: underline; text-decoration-color: var(--color-rule-on-ink); text-underline-offset: 0.18em; transition: text-decoration-color var(--dur-short) var(--ease-hover); justify-self: start; }
.footer__nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); }
.footer__nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--color-on-ink); white-space: nowrap; transition: color var(--dur-short) var(--ease-hover); }
@media (hover: hover) and (pointer: fine) {
  .footer__facts a:hover { text-decoration-color: currentColor; }
  .footer__nav a:hover { color: var(--color-accent); }
}
.footer__base { margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-on-ink); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-xs) var(--space-lg); font-size: var(--text-sm); color: var(--color-on-ink-2); }
.footer__base p { max-width: none; }
@media (min-width: 48rem) {
  .footer__grid { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2xl); }
  .footer__colophon { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .footer__name { grid-column: 1 / -1; }
  .footer__nav ul { flex-direction: column; }
}

/* ---- 16 questions: the small print under the bill. Native <details>, a heavy rule on top, the question
        in Besley, a gold square that turns its plus into a cross (220 ms, --ease-out, press = 0.9).
        build.mjs writes the FAQPage schema from exactly these blocks, so page and schema never disagree. ---- */
.faq { max-width: 48rem; border-top: 2px solid var(--color-ink); }
.faq__item { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); min-height: 56px; padding-block: var(--space-md); font-family: var(--font-display); font-weight: 800; font-size: var(--text-md); line-height: 1.3; transition: color var(--dur-short) var(--ease-hover); }
.faq__item summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); background: var(--color-accent); color: var(--color-accent-ink); font-family: var(--font-body); font-weight: 700; line-height: 1; transition: transform var(--dur-short) var(--ease-out); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:active::after { transform: scale(0.9); }
.faq__item[open] summary:active::after { transform: rotate(45deg) scale(0.9); }
@media (hover: hover) and (pointer: fine) { .faq__item summary:hover { color: var(--color-link); } }
.faq__a { padding-bottom: var(--space-lg); color: var(--color-ink-2); }

/* ---- 17 /kampsport/: boxing beside the other combat sports, set as a printed table; our row in soft gold ---- */
.versus { max-width: 52rem; }
.versus th, .versus td { text-align: left; vertical-align: top; padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.versus thead th { font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); border-bottom: 2px solid var(--color-ink); }
.versus tbody th { font-family: var(--font-display); font-weight: 800; }
.versus .is-ours > * { background: var(--color-accent-soft); color: var(--color-ink); }
.versus__note { margin-top: var(--space-md); font-weight: 700; }