/* Baze3 — style.css. One stylesheet; every visual value is a :root token or derives from one
   (Workflow §6.1 AX-G). Blueprint: web_BAZE_2026.pdf, 1200 design width (Basics §3). */

/* ============================== TOKENS ============================== */
/* B1/6: Geist and Aboreto are served from this host (fonts/), not from Google — Latin + Latin Extended
   subsets, generated from Google's own stylesheet by B1/6/selfhost_fonts.py. */
@font-face { font-family: 'Aboreto'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/aboreto-latin-ext-v2.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: 'Aboreto'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/aboreto-latin-v2.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: 'Geist'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/geist-latin-ext-v5.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: 'Geist'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/geist-latin-v5.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; }

:root {
  /* the blueprint is a 1200-wide drawing; --px scales it: 1 design px = var(--px) */
  --px: clamp(0.8px, calc(100vw / 1200), 1.25px);

  /* palette (blueprint §1.3; the AA-grey is Q-D6, shown on the strip) */
  --c-bg: #ffffff;
  --c-text: #231f20;
  --c-secondary: #808285;
  --c-secondary-aa: #6b6e71;
  --c-band: #ebebec;   /* B1/4: measured from the blueprint's own fills (p1 band, p4 footer: 235,235,236); was #ebecec */
  --c-hair: #231f20;
  --c-green: #cfe5c5;
  --c-cyan: #70cddd;
  --c-band-light: #f0f0f0;   /* "a ještě více" expanded state: lighter grey (operator, B1/3; was a cream tint, reverted) */

  /* type — single grotesk, four weights; the toggle swaps only the family (S16) */
  --font-a: 'Saans', 'Helvetica Neue', Arial, sans-serif;
  --font-b: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --font-c: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --font: var(--font-b);
  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-bold: 700;

  /* type ladder at 1200 (blueprint §1.2): HERO 29 > BODY 29 > NAV/CAPTION 20 > FOOT 18 > META 15 > MICRO 13 */
  --fs-title: calc(29 * var(--px));
  --fs-body: calc(29 * var(--px));
  --fs-nav: calc(20 * var(--px));
  --fs-caption: calc(20 * var(--px));
  --fs-foot: calc(18 * var(--px));
  --fs-meta: calc(15 * var(--px));
  --fs-micro: calc(13 * var(--px));
  --lh-tight: 1.15;
  --lh-body: 1.35;
  --lh-loose: 1.6;

  /* grid (blueprint: 72 margins, 1056 content, 3 × 336 tiles, 24 gaps) */
  --gutter: calc(72 * var(--px));
  --content: calc(1056 * var(--px));
  --gap: calc(24 * var(--px));
  --tile: calc(336 * var(--px));
  --hair: 1px;
  --header-h: calc(100 * var(--px));
  --hero-ratio: 1200 / 281;   /* half the height (operator, B1/3; was 1200/562) */
  --panel-ratio: 1200 / 560;
  --section-gap: calc(90 * var(--px));
  --block-gap: calc(48 * var(--px));
  --stack-gap: calc(40 * var(--px));
  --radius: 0px;

  /* motion */
  --dur-fast: 300ms;
  --dur-view: 260ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --carousel-move: 1200ms;
  --carousel-hold: 6000ms;
  --carousel-lag: 140ms;
  --trail-life: 2000ms;
  --trail-ease: cubic-bezier(.4, 0, .6, 1);
  --trail-h: 28px;

  /* layers (Basics S5) */
  --z-curtain: 100;
  --z-header: 90;
  --z-menu: 85;
  --z-trail: 60;
  --z-overlay: 50;
  --z-main: 10;
  --z-video: 0;

  --touch: 48px;
}
html[data-font="A"] { --font: var(--font-a); }
html[data-font="B"] { --font: var(--font-b); }
html[data-font="C"] { --font: var(--font-c); --w-light: 400; } /* Instrument Sans has no 300 */
html[data-grey="aa"] { --c-secondary: var(--c-secondary-aa); }

/* ============================== BASE ============================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
  font-weight: var(--w-regular);
  font-size: var(--fs-nav);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
/* B1/4 (operator): no blue flash when a link or button is tapped on a phone. Keyboard focus keeps
   its own visible ring below (:focus-visible) — this only removes the touch highlight. */
a, button, label, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--c-text); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; font-weight: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.wrap { width: min(var(--content), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.hairline { border: 0; border-top: var(--hair) solid var(--c-hair); margin: 0; }
.u { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: var(--hair); }

/* ============================== HEADER ============================== */
/* Half-transparent always, not just once scrolled (operator, B1/3) — the tucked-under hero (S51)
   shows through from the very first paint, not only after the header's is-scrolled toggle fires.
   Plain text and logo — no shadow/glow: at 100% strength, the header's own half-white backing is
   what keeps them legible. */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  /* B1/6: the backing's strength is set from the web updater (--header-alpha, js/app.js); .5 is the base (S50) */
  background: rgba(255, 255, 255, var(--header-alpha, .5));
}
.site-header .bar {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--header-h);
}
[tabindex="-1"]:focus { outline: none; }
.brand { display: block; width: calc(120 * var(--px)); }
.brand svg { width: 100%; height: auto; fill: var(--c-text); }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: calc(40 * var(--px)); }
.nav a {
  display: inline-block; font-size: var(--fs-nav); line-height: 1; padding-block: .3em;
  text-decoration: underline transparent; text-underline-offset: .22em; text-decoration-thickness: var(--hair);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.nav a:hover, .nav a[aria-current="page"] { text-decoration-color: currentColor; }
.menu-btn { display: none; min-width: var(--touch); min-height: var(--touch); font-size: var(--fs-nav); text-align: right; }
.site-header .hairline { display: none; }
/* B1/4 (operator): the blueprint's hairline under the header on subpages is gone EVERYWHERE — it was
   removed view by view (Loga, then Výroční zprávy) until the operator asked for all of naše práce.
   The .hairline element stays in the markup for the moment the sister wants it back: one rule. */
body[data-view] .site-header .hairline { display: none; }

/* ============================== MAIN / VIEWS ============================== */
main { flex: 1; position: relative; z-index: var(--z-main); }
.view { padding-bottom: var(--section-gap); }
.view-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap);
  padding-block: calc(36 * var(--px)) calc(40 * var(--px));
}
.view-head h1 { font-size: var(--fs-title); font-weight: var(--w-regular); line-height: var(--lh-tight); }
.view-head h1:focus { outline: none; }
/* the X top-right (blueprint p4), replacing the B1/2 text arrow: the origin arrow (any project
   view opened from elsewhere) and the L3 → category element are the same glyph, same spot
   (operator, B1/3). align-self overrides the row's own baseline alignment. */
.view-x { display: inline-flex; align-self: center; color: var(--c-text); opacity: .7; transition: opacity var(--dur-fast); }
.view-x:hover, .view-x:focus-visible { opacity: 1; }
/* blueprint p4, measured: the X reads about 1.4× the title's own font-size (operator, B1/3 — the
   first build was a placeholder 20px, fixed, not scaled by --px at all). */
.x-glyph { display: block; width: calc(40 * var(--px)); height: calc(40 * var(--px)); }

/* ---------- hero carousel ---------- */
.hero {
  position: relative; overflow: hidden; width: 100%;
  aspect-ratio: var(--hero-ratio);
  background: var(--c-band);
  isolation: isolate;
  /* Tucked under the header rather than starting below it (operator, B1/3) — invisible while the
     header is solid at the very top, showing through once it goes half-transparent on scroll. */
  margin-top: calc(-1 * var(--header-h));
}
.hero-track { position: absolute; inset: 0; }
.slide {
  position: absolute; inset: 0; display: block; overflow: hidden;
  background: var(--slide-bg, var(--c-band));
  visibility: hidden;
  will-change: transform, opacity, clip-path;
}
.slide.is-active, .slide.is-leaving { visibility: visible; }
.slide.is-active { z-index: 2; }
.slide.is-leaving { z-index: 1; }
.slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.slide--panel .slide-img { object-fit: contain; }
.hero-dots {
  position: absolute; left: var(--gutter); bottom: calc(20 * var(--px)); z-index: 3;
  display: flex; gap: calc(10 * var(--px)); margin: 0; padding: 0; list-style: none;
}
.hero-dots button {
  width: calc(8 * var(--px)); height: calc(8 * var(--px)); border-radius: 50%;
  background: currentColor; opacity: .35; transition: opacity var(--dur-fast);
  min-width: 0; min-height: 0; padding: 0;
}
.hero-dots button[aria-current="true"] { opacity: 1; }
.hero-dots { color: var(--c-text); }
.hero--dark .hero-dots { color: var(--c-bg); }

/* ---------- claim ---------- */
.claim { padding-block: var(--section-gap) var(--section-gap); }
.claim h1 { font-size: var(--fs-title); font-weight: var(--w-bold); line-height: var(--lh-body); }
.claim p { font-size: var(--fs-body); font-weight: var(--w-regular); line-height: var(--lh-body); margin-top: 1.1em; max-width: 26em; }

/* ---------- tile grids (reference anchor for every grid: gap on the parent, plain children) ---------- */
.band { background: var(--c-band); }
.grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(2 * var(--gap)) var(--gap);
  align-items: start; list-style: none; margin: 0; padding: 0;
}
.picks { padding-block: var(--block-gap) var(--block-gap); }
.tile { display: block; }
.tile-media {
  position: relative; overflow: hidden; background: var(--c-bg);
  transition: transform var(--dur-fast) var(--ease-out);
}
/* B1/4: the tile overlay is sized from the TILE's width (cqw, see .video-overlay-logo--tile). The
   element is a <span>; an inline box cannot be a size container (measured: cqw fell back to the
   viewport, 12cqw = 172.8px at 1440), so it is made block here. */
.tile-media { display: block; container-type: inline-size; }
.tile-media img, .tile-media video { display: block; width: 100%; height: auto; }
.tile-media video { object-fit: cover; } /* homeVideo (B1/3): crops a wider source to the tile's own ratio */
/* Q-D4: the hover zoom scales the media box itself, not the <video>/<img> inside it — scaling a
   playing video directly made it flicker/shake as the transform ran (operator, B1/3). */
.tile:hover .tile-media, .tile:focus-visible .tile-media { transform: scale(1.02); }
.tile-caption {
  display: block; margin-top: calc(14 * var(--px)); font-size: var(--fs-caption); font-weight: var(--w-medium);
  text-decoration: underline transparent; text-underline-offset: .2em; text-decoration-thickness: var(--hair);
  transition: text-decoration-color var(--dur-fast);
}
.tile:hover .tile-caption { text-decoration-color: currentColor; }
.more { display: flex; justify-content: flex-end; margin-top: var(--block-gap); }
.more a, .more button { font-size: var(--fs-title); font-weight: var(--w-regular); }
.tile-more[hidden] { display: none; }
/* "a ještě více" (operator, B1/3): the band stays, tinted lighter and cream once expanded. */
.picks.is-expanded { background: var(--c-band-light); }

/* ---------- reference (home only since B1/3 — the header's "reference" item rolls here, no
   separate page) ---------- */
.reference { padding-block: var(--section-gap) var(--block-gap); }
.reference h2 { font-size: var(--fs-title); font-weight: var(--w-regular); line-height: var(--lh-tight); padding-block: calc(10 * var(--px)); }
.reference .hairline + h2 { margin: 0; }
.logos {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: calc(64 * var(--px)) calc(72 * var(--px)); padding-block: calc(70 * var(--px)); margin: 0; list-style: none;
  padding-inline: 0; /* B1/9 (Q-O8): a <ul> keeps the browser's padding-inline-start: 40px unless named — the wall sat 20px right of centre */
}
.logos li { flex: 0 0 auto; }
.logos li.logo-break { flex-basis: 100%; height: 0; margin: 0; padding: 0; } /* .logos li above outranks a bare .logo-break */
/* --s (manifest ref[].scale) equalises visual weight across logos of very different ink density —
   a bounding-box height alone is not enough (Workflow §6.1, operator B1/3). */
.logos img, .logos svg { height: calc(var(--logo-h, calc(40 * var(--px))) * var(--s, 1)); width: auto; max-width: calc(170 * var(--px) * var(--s, 1)); }
.logos a { display: block; transition: opacity var(--dur-fast); }
.logos a:hover { opacity: .55; }

/* ---------- detail image stack (blueprint p4) ---------- */
.stack { display: flex; flex-direction: column; gap: var(--stack-gap); }
.stack-divider { margin-block: calc(20 * var(--px)) 0; } /* extraStack (B1/3): a folded-in second block */
.stack figure { margin: 0; position: relative; }
/* B1/4 (operator: "make it reasonable"): a stack image never exceeds the viewport height. Landscape
   images still fill the content width; square and portrait ones are bounded by the screen instead of
   towering (a 1:1 image at 1252px wide was 1252px tall on a 900px screen). Centred when narrower. */
.stack figure img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100vh - var(--header-h) - 2 * var(--stack-gap)); margin-inline: auto; }
.stack .bleed { width: 100%; }
/* B1/6: a text block placed between the pictures from the web updater; spacing stays the parent's gap */
.stack .stack-text { width: min(var(--content), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.stack-text p { font-size: var(--fs-body); font-weight: var(--w-regular); line-height: var(--lh-body); max-width: 34em; white-space: pre-line; }
.stack-text h2 { font-size: var(--fs-title); font-weight: var(--w-bold); line-height: var(--lh-body); max-width: 34em; }
.stack-text h2.is-normal { font-weight: var(--w-regular); }
.stack-text p.is-bold { font-weight: var(--w-bold); }
.stack-text p + p, .stack-text h2 + p { margin-top: 1.1em; }
/* B1/4 (operator): the grey bed belongs to the FIRST picture of a stack only, in the blueprint's grey;
   and no rule forces an image's width any more — `.bed`/`.bed--alpha` used to set width:, which
   together with the viewport-height cap deformed a portrait PNG (dpp-2019/03, 803x1157 forced to
   ~1013 wide). Widths are ceilings now; the image keeps its own ratio and never upscales. */
.stack .bed { background: var(--c-band); padding: calc(60 * var(--px)) 0; }
.stack .bed img { max-width: min(var(--content), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.stack .bed.bed--alpha img { max-width: min(calc(0.8 * var(--content)), calc(100% - 2 * var(--gutter))); }
.stack .contained { width: min(var(--content), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.stack .narrow { width: min(calc(0.62 * var(--content)), calc(100% - 2 * var(--gutter))); }
/* B1/5: the updater's smallest sizing option */
.stack .small { width: min(calc(0.38 * var(--content)), calc(100% - 2 * var(--gutter))); }
/* a landscape clip next to the square/portrait ones (operator, B1/3): same height as the narrow
   ones instead of stretching to the full content width, since at this aspect that read as too
   tall on a standard screen. max-width lets the aspect ratio shrink it back down on narrow
   viewports, the same safety net .narrow gets from its own min(). */
.stack .h-narrow { width: min(var(--content), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.stack .h-narrow video { width: auto; height: calc(0.62 * var(--content)); max-width: 100%; margin-inline: auto; }
.stack .pair { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap); width: min(var(--content), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.stack video { width: 100%; height: auto; background: var(--c-band); }
.stack .video-wrap { position: relative; }
/* Okula's own title card, reproduced over the hero loop (operator, B1/3) — this is Okula's logo,
   not a font we picked: measured from okularezidence.cz's own CSS ("OKULA" 150px Aboreto/400/20px
   tracking; "REZIDENCE" 37px Saans/300/10px, at their 1440 container — scaled here by --px the
   same way every other type on this site scales). --ov-scale shrinks it for the tile-sized copy. */
.video-overlay-logo {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; text-align: center; pointer-events: none; text-shadow: 0 calc(2 * var(--px)) calc(24 * var(--px)) rgba(0,0,0,.35);
}
/* clamp(), not a bare --px multiple: on a narrow phone --px bottoms out at its floor while the
   hero stays full-bleed, and 5 tracked capitals at the raw 150px figure overflowed the viewport
   (operator, B1/3). The vw middle term keeps it proportional to the actual box down to the floor;
   letter-spacing in em rides along with whichever size the clamp picks. */
.video-overlay-logo span {
  font-family: 'Aboreto', serif; font-weight: 400; line-height: 1; letter-spacing: .133em;
  /* B1/4: Okula's 150px / 37px are measured AT 1440, so the --px base is 1440 here, not 1200 —
     the earlier 150*--px rendered 172.8px at 1440 (measured: OKULA 719px wide vs 606px on
     okularezidence.cz). 150 * 1200/1440 = 125; 37 * 1200/1440 = 30.8. */
  font-size: clamp(calc(24px * var(--ov-scale, 1)), calc(10.4 * var(--ov-scale, 1) * 1vw), calc(125 * var(--px) * var(--ov-scale, 1)));
}
.video-overlay-logo small {
  /* .66em: the live page shows 57px of clear space between the OKULA baseline and the REZIDENCE
     cap line at 1440; pixel-measured on a black backing, B1/4 (1.2em gave 77px, .5em gave ~38). */
  display: block; margin-top: .66em; font-weight: var(--w-light); letter-spacing: .27em; text-transform: uppercase;
  font-size: clamp(calc(8px * var(--ov-scale, 1)), calc(2.6 * var(--ov-scale, 1) * 1vw), calc(30.8 * var(--px) * var(--ov-scale, 1)));
}
.video-overlay-logo--tile { --ov-scale: 0.22; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
/* B1/4 (operator): the tile's title card was too small on desktop and tiny on a phone, because the
   clamp above is viewport-based while the tile is not. Container-query units size it from the tile
   itself, so it is the same proportion of the tile at every screen: OKULA 12% of the tile width,
   REZIDENCE 3% (the live card's own 150:37 ratio). */
.video-overlay-logo--tile span { font-size: 12cqw; }
.video-overlay-logo--tile small { font-size: 3cqw; margin-top: .66em; }
.img-link {
  display: inline-block; margin-top: calc(14 * var(--px)); font-size: var(--fs-nav);
  text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: var(--hair);
}
.img-link::after { content: ' →'; }
.stack .contained .img-link, .stack .bleed .img-link { margin-inline: auto; display: block; width: min(var(--content), calc(100% - 2 * var(--gutter))); text-align: right; }

/* ---------- panels (blueprint p2) ---------- */
.panels { display: flex; flex-direction: column; gap: 0; }
.panel { position: relative; width: 100%; aspect-ratio: var(--panel-ratio); background: var(--panel-bg, var(--c-band)); overflow: hidden; }
.panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Finalist badge (operator, B1/3): a fixed chip so it reads on any panel colour, including a
   near-white one. */
.panel-badge {
  position: absolute; right: calc(24 * var(--px)); bottom: calc(24 * var(--px));
  background: var(--c-text); color: var(--c-bg); font-size: var(--fs-micro);
  padding: .5em .9em; line-height: 1;
}

/* ---------- group (Knihy) ---------- */
.group-section + .group-section { margin-top: var(--section-gap); }
.group-section h2 { font-size: var(--fs-title); font-weight: var(--w-regular); margin-bottom: var(--block-gap); }

/* ---------- produkce ---------- */
.produkce .text { max-width: 55%; padding-block: calc(20 * var(--px)) var(--section-gap); }
.produkce h1 { font-size: var(--fs-title); font-weight: var(--w-medium); line-height: var(--lh-body); }
.produkce p { font-size: var(--fs-body); font-weight: var(--w-light); line-height: var(--lh-body); margin-top: 1em; }
.produkce .space { min-height: calc(500 * var(--px)); }

/* ---------- kontakt ---------- */
.kontakt .cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--gap); padding-block: calc(20 * var(--px)) 0; }
.kontakt .main { font-size: var(--fs-body); font-weight: var(--w-light); line-height: var(--lh-body); }
.kontakt .side { font-size: var(--fs-foot); font-weight: var(--w-light); line-height: var(--lh-loose); padding-top: .3em; }
.kontakt .blank { height: 1em; }
.kontakt .register {
  font-size: var(--fs-micro); font-weight: var(--w-light); max-width: 62%;
  margin-top: calc(300 * var(--px)); line-height: var(--lh-loose); white-space: pre-line;
}
.kontakt a:hover { text-decoration: underline; text-underline-offset: .18em; }

/* ============================== FOOTER ============================== */
.site-footer { background: var(--c-band); margin-top: auto; }
.site-footer .cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding-block: calc(56 * var(--px)) calc(48 * var(--px)); }
.site-footer .col { font-size: var(--fs-foot); font-weight: var(--w-light); line-height: var(--lh-loose); color: var(--c-secondary); }
.site-footer .col > :first-child { color: var(--c-text); font-weight: var(--w-regular); }
.site-footer .col .blank { height: 1em; }
.site-footer .col a:hover { text-decoration: underline; }
.site-footer .bottom { display: flex; align-items: center; gap: var(--gap); padding-block: calc(24 * var(--px)) calc(28 * var(--px)); }
.site-footer .copy { font-size: var(--fs-meta); font-weight: var(--w-light); color: var(--c-secondary); }
.site-footer .legal { margin-left: auto; font-size: var(--fs-micro); font-weight: var(--w-regular); color: var(--c-secondary); text-align: right; }

/* ============================== TRAIL (S17) ============================== */
#trail { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-trail); overflow: hidden; }
#trail img {
  position: absolute; left: 0; top: 0; height: var(--trail-h); width: auto; opacity: 0;
  will-change: transform, opacity;
}
@media (pointer: coarse), (prefers-reduced-motion: reduce) { #trail { display: none; } }

/* ============================== VIEW TRANSITIONS ============================== */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-view); }
.site-header { view-transition-name: header; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .tile-media img, .nav a, .tile-caption { transition: none; }
}

/* ============================== DEV STRIP (temporary, S11; removed once settled) ============================== */

/* ============================== MOBILE (Q-D2 default) ============================== */
@media (max-width: 720px) {
  :root { --gutter: 16px; --header-h: 64px; --section-gap: 48px; --block-gap: 32px; --stack-gap: 20px; }
  .brand { width: 96px; }
  .menu-btn { display: block; }
  .nav {
    position: fixed; inset: 0; z-index: var(--z-menu); background: var(--c-bg);
    display: none; padding: calc(var(--header-h) + 24px) var(--gutter) var(--gutter);
  }
  .nav.is-open { display: block; z-index: 0; }
  .brand, .menu-btn { position: relative; z-index: 1; }
  .nav ul { flex-direction: column; gap: 24px; }
  .nav a { font-size: 28px; min-height: var(--touch); display: inline-flex; align-items: center; }
  /* B1/4 (operator): the hero keeps the picture's own ratio on a phone. The 4:5 portrait box was a
     B1/2 default and cropped a 4.27:1 banner down to 19% of itself (measured). No crop now.
     The tuck under the half-transparent header (S51) is kept here too, so the picture shows through
     behind the logo and menu exactly as on desktop — it only had to go while the band was 91px tall
     (a 64px header left just 27px of it); at 183px there is room for both. */
  /* …then zoomed 2x (operator): the band is half as wide in picture terms, so it shows the middle
     50% of each slide at twice the size, and is twice as tall (390x183 instead of 390x91). */
  .hero { aspect-ratio: calc(var(--hero-ratio) / 2); }
  .grid { grid-template-columns: 1fr; gap: 32px; }
  .claim h1, .claim p, .stack-text p, .stack-text h2, .view-head h1, .produkce h1, .produkce p, .kontakt .main, .more a, .more button, .reference h2, .group-section h2 { font-size: 22px; }
  .tile-caption, .nav a, .back, .img-link { font-size: 17px; }
  .site-footer .col, .kontakt .side { font-size: 15px; }
  .site-footer .copy, .site-footer .legal, .kontakt .register { font-size: 12px; }
  .produkce .text, .kontakt .register { max-width: none; }
  .kontakt .cols, .site-footer .cols { grid-template-columns: 1fr; gap: 32px; }
  .kontakt .register { margin-top: 64px; }
  .site-footer .bottom { flex-wrap: wrap; }
  .site-footer .legal { margin-left: 0; text-align: left; flex-basis: 100%; }
  /* B1/7 (operator, on a phone): the wall sat right of centre with nothing visible pushing it.
     A <ul> keeps the browser's own padding-inline-start: 40px unless a rule removes it, and .logos
     is the one list here that never did (.nav ul and .grid both set padding: 0) — so every row was
     centred inside a box 40px narrower and 40px further right than the wrap: 40px of asymmetry,
     measured identical on every row. Zeroing it puts the wall on the same 16px gutters as the
     pictures above and hands back 40px of width, which the logos take (28 -> 38px tall).
     The cap follows the desktop rule, --logo-h * 4.25 * --s (there: 170 / 40), instead of a flat
     120px: a flat cap divided by a scaled height squeezed the wide logotypes harder here than on
     desktop. Column gap 32px so the six-logo group still reads three-up. (B1/9: the base rule now zeroes
     the padding too, for desktop; the padding-inline here is kept so this breakpoint stays as shipped.) */
  .logos { gap: 32px 32px; padding-block: 32px; padding-inline: 0; }
  .logos img, .logos svg { --logo-h: 38px; max-width: calc(var(--logo-h) * 4.25 * var(--s, 1)); }
  .stack .pair { grid-template-columns: 1fr; }
  .stack .bed { padding: 24px 0; }
  .panel { aspect-ratio: 4 / 3; }
  .produkce .space { min-height: 120px; }
  /* B1/4 (operator): the dots read as too pronounced on a phone — smaller, dimmer and tighter, so
     they stay a hint of position rather than a control competing with the picture. */
  .hero-dots { bottom: 10px; gap: 7px; }
  .hero-dots button { width: 5px; height: 5px; opacity: .3; }
  .hero-dots button[aria-current="true"] { opacity: .8; }
}