:root {
  /* Dark UA rendering for native chrome — without it the page's own scrollbar
     (and the gutter reserved below) render as a pale strip on a black site. */
  color-scheme: dark;
  --bg: #000000;
  --surface: #0a0a0a;
  --card: #111111;
  --border: rgba(255, 255, 255, 0.07);
  --border-arrows: 1px solid rgba(255, 255, 255, 0.2);
  --accent: rgb(0, 154, 214);
  --text: #c8c8c8;
  --muted: #a0a0a0;
  --nav-h: 52px;
  --sub-h: 36px;
  --mnav-h: 0px;
  /* mobile nav strip; 32px at ≤1024px — must stay a length, it feeds calc() */
  --font-size-smallheaders: 12px;
  --font-size-smalltext: 14px;
}

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

html {
  /* Reserved so locking the page (see the overlay rule below) can't shift the
     layout by the scrollbar's width when an overlay opens. */
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--sub-h) + var(--mnav-h) + 12px);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.04em;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.5;
}

/* ── Nav ── */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(16px, 4vw, 56px);
}

nav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(60%, 800px);
  height: 1px;
  background: var(--border);
}

.nav-logo {
  position: absolute;
  left: clamp(16px, 4vw, 56px);
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.nav-logo span {
  color: var(--accent);
}

.nav-logo img {
  height: 20px;
  display: block;
}

.nav-links {
  display: flex;
  gap: clamp(16px, 2.5vw, 32px);
  list-style: none;
}

.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.2s;
  white-space: nowrap;
}

.nav-links a:hover {
  color: var(--text);
}

.nav-links a.active,
.nav-links a.current {
  color: var(--accent);
}

.nav-langs {
  position: absolute;
  right: clamp(16px, 4vw, 56px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 12px;
  list-style: none;
}

.nav-langs a {
  color: var(--muted);
  text-decoration: none;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.2s;
}

.nav-langs a:hover {
  color: var(--accent);
}

.nav-langs a.active {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  margin-left: auto;
  padding: 8px;
  background: none;
  border: none;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--text);
  transition: all 0.3s;
}

/* ── Subnav ── */
.subnav {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  z-index: 99;
  height: var(--sub-h);
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(16px, 4vw, 56px);
  overflow-x: auto;
  scrollbar-width: none;
}

.subnav::-webkit-scrollbar {
  display: none;
}

.subnav-item {
  flex-shrink: 0;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0 16px;
  height: var(--sub-h);
  display: flex;
  align-items: center;
  position: relative;
  transition: color 0.2s;
  border: none;
  background: none;
}

.subnav-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.25s;
}

.subnav-item:hover {
  color: var(--text);
}

.subnav-item.active {
  color: var(--accent);
}

.subnav-item.active::after {
  transform: scaleX(1);
}


/* ── Mobile nav strip (≤1024px: the main menu as a thin scrollable line
   under the navbar — "you are here" feedback for the page arrows/swipe;
   site.js centers the .current item) ── */
.nav-strip {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  z-index: 97;
  /* under the .mobile-menu overlay (98) — the open menu covers it */
  height: var(--mnav-h);
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  align-items: center;
  /* flex-start + edge auto margins, never justify-content: center — with
     overflow that would clip the left end out of scroll reach */
  justify-content: flex-start;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  /* a flick at scroll end must not become the browser back/forward gesture */
}

.nav-strip::-webkit-scrollbar {
  display: none;
}

.nav-strip a {
  flex-shrink: 0;
  color: var(--muted);
  text-decoration: none;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0 14px;
  height: var(--mnav-h);
  display: flex;
  align-items: center;
  position: relative;
  transition: color 0.2s;
}

.nav-strip a:first-child {
  margin-left: auto;
}

.nav-strip a:last-child {
  margin-right: auto;
}

.nav-strip a.current {
  color: var(--accent);
}

.nav-strip a.current::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 14px;
  right: 14px;
  height: 1px;
  background: var(--accent);
}

/* ── Hero ── */
.hero {
  margin-top: calc(var(--nav-h) + var(--sub-h) + var(--mnav-h));
  height: calc(100vh - var(--nav-h) - var(--sub-h) - var(--mnav-h));
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: clamp(32px, 6vw, 80px);
}

.hero--simple {
  height: 40vh;
  min-height: 280px;
  max-height: 400px;
}

/* ── Page hero (tall unified hero on the reader pages / Kontakt + the
   off-menu Chronometr / Archiv pages; add .hero--sub when the page has a
   subnav) ── */
.hero--page {
  margin-top: calc(var(--nav-h) + var(--mnav-h));
  /* no subnav on these pages */
  height: 60vh;
  height: 60svh;
  /* iOS URL-bar-safe; falls back to 60vh above */
  min-height: 400px;
  max-height: 720px;
}

.hero--page.hero--sub {
  margin-top: calc(var(--nav-h) + var(--sub-h) + var(--mnav-h));
}

.hero--page .hero-title {
  font-size: clamp(34px, 5.5vw, 64px);
}

.hero--page .hero-desc {
  margin-bottom: 0;
  /* reserve two lines so the bottom-anchored title sits at the same height
     on every page hero no matter how many lines the description wraps to
     (one-line pages rendered their title ~25px lower, jumping against the
     uniformly-positioned page arrows between pages) */
  min-height: 3.6em;
  /* 2 × line-height 1.8 */
}

/* Reader-page hero variant: accent title, no eyebrow. The scroll-driven
   behavior lives with the .reader-shell rules (reader pages section). */
.hero--reader .hero-title {
  color: var(--accent);
}

@media (max-width: 768px) {
  .hero--page {
    height: 52vh;
    height: 52svh;
    min-height: 380px;
  }
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 70% 50%, rgba(0, 154, 214, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 20% 80%, rgba(0, 67, 125, 0.05) 0%, transparent 50%),
    linear-gradient(160deg, #000000 0%, #000000 100%);
}

.hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hero photo scrims — the photo itself stays full-opacity. ::before is the
   text scrim (full hero height on the text side), ::after the scrim under
   the next-page arrow; both fade to complete transparency, no hard edges.
   z-index lifts them above the img layers (incl. the crossfade img reader.js
   appends); .hero-content (z 2) and .hero-dial stay above them. */
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right,
      rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.68) 30%, rgba(0, 0, 0, 0.38) 50%,
      rgba(0, 0, 0, 0.15) 65%, rgba(0, 0, 0, 0) 78%);
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to left,
      rgba(0, 0, 0, 0.55) 0, rgba(0, 0, 0, 0.28) 90px, rgba(0, 0, 0, 0) 220px);
}

@media (max-width: 1024px) {

  /* the page arrows sit at the bottom corners there — the scrim follows */
  .hero-bg::after {
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.6) 0, rgba(0, 0, 0, 0.28) 80px, rgba(0, 0, 0, 0) 170px);
  }
}

@media (max-width: 768px) {

  /* narrow screens: the text spans nearly the full width and sits at the
     bottom — a bottom-up scrim carries it, and the horizontal one stays
     strong all the way right so the photo never washes the text out */
  .hero-bg::before {
    background:
      linear-gradient(to top,
        rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.78) 45%, rgba(0, 0, 0, 0.55) 72%,
        rgba(0, 0, 0, 0.3) 100%),
      linear-gradient(to right,
        rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.62) 55%, rgba(0, 0, 0, 0.4) 100%);
  }
}

.hero-dial {
  position: absolute;
  right: clamp(5%, 12vw, 18%);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(280px, 40vw, 560px);
  height: clamp(280px, 40vw, 560px);
  border-radius: 50%;
  border: 1px solid rgba(0, 154, 214, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: dialRotate 120s linear infinite;
}

.hero-dial::before {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0, 154, 214, 0.08);
}

.hero-dial::after {
  content: '';
  position: absolute;
  inset: 32px;
  border-radius: 50%;
  border: 1px solid rgba(0, 67, 125, 0.1);
  animation: dialRotate 80s linear infinite reverse;
}

/* Dial ticks are server-rendered (home.html loops 60 of them, rotation
   inline); minute vs. five-minute look lives here. */
.tick {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0 0;
  width: 1px;
  height: 8px;
  background: rgba(0, 154, 214, 0.3);
  opacity: 0.15;
  margin-top: calc(clamp(140px, 20vw, 280px) * -1);
  margin-left: -0.5px;
}

.tick--major {
  height: 16px;
  opacity: 0.5;
  background: rgba(0, 154, 214, 0.5);
}

@keyframes dialRotate {
  from {
    transform: translateY(-50%) rotate(0deg);
  }

  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 600px;
}

.hero-eyebrow {
  font-size: var(--font-size-smallheaders);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 9px;
}

.hero-eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--accent);
}

.hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(42px, 7vw, 88px);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: 0.02em;
  margin-bottom: 24px;
}

.hero-title em {
  display: block;
  font-style: italic;
  color: var(--accent);
}

.hero-desc {
  color: var(--muted);
  font-size: var(--font-size-smalltext);
  line-height: 1.8;
  max-width: 380px;
  margin-bottom: 40px;
}

.hero-actions {
  display: flex;
  /* wrap-reverse, not a breakpoint: the CTAs flip only in the state they are
     stacked in — once the two stop fitting side by side (narrow viewports),
     the second one (Filozofie) takes the top line. The desktop single row
     keeps its DOM order. */
  flex-wrap: wrap-reverse;
  align-items: center;
  gap: 12px 16px;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--text);
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  /* buttons don't inherit the body font */
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 14px 28px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s;
  cursor: pointer;
  background: none;
}

.hero-cta:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0, 154, 214, 0.04);
}

.hero-cta-arrow {
  width: 1px;
  height: 14px;
  background: currentColor;
  position: relative;
  transition: transform 0.3s;
}

.hero-cta-arrow::after {
  content: '';
  position: absolute;
  left: -3px;
  bottom: 0;
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}

.hero-cta:hover .hero-cta-arrow {
  transform: translateY(3px);
}

/* Right-pointing arrow variant (page-link buttons): the shaft goes
   horizontal, the same bordered corner sits at its right end */
.hero-cta-arrow--right {
  width: 14px;
  height: 1px;
}

.hero-cta-arrow--right::after {
  left: auto;
  right: -1px;
  bottom: -2.5px;
  transform: rotate(-45deg);
}

.hero-cta:hover .hero-cta-arrow--right {
  transform: translateX(3px);
}

/* ── Hero section (centered variant) ── */
.hero-section {
  position: relative;
  z-index: 1;
  padding: calc(clamp(100px, 14vw, 180px) + var(--mnav-h)) clamp(16px, 4vw, 56px) clamp(48px, 6vw, 80px);
  text-align: center;
}

.hero-section .hero-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
}

.hero-section .hero-eyebrow::before,
.hero-section .hero-eyebrow::after {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--accent);
}

.hero-section h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 7vw, 72px);
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1.1;
  margin-bottom: 16px;
}

.hero-section .hero-subtitle {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.08em;
  line-height: 1.8;
}

/* ── Section labels ── */
.section-label {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  /* one tunable knob: lifts the line/count/arrows from the row bottom onto
     the title's visual baseline (Cormorant's descender hangs below it).
     .section-nav subtracts a fixed 7px from it — a geometric correction for
     the counter text being centered in the 28px button row, not a second
     knob: moving the lift still moves all three together. */
  --label-baseline-lift: clamp(7px, 1.3vw, 13px);
  padding: clamp(16px, 2.5vw, 28px) clamp(16px, 4vw, 56px) 0;
}

.section-label-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1.1;
  color: #fff;
  /* accent is reserved for the section in view (.section--inview) */
  transition: color 0.5s ease;
}

.section--inview .section-label-text {
  color: var(--accent);
}

.section-label-sub {
  font-size: var(--font-size-smallheaders);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 8px;
  flex-shrink: 0;
  display: none;
}

.section-label-line {
  flex: 1;
  height: 1px;
  background: var(--border);
  max-width: 200px;
  margin-bottom: var(--label-baseline-lift);
}

.section-count {
  font-size: var(--font-size-smallheaders);
  color: var(--muted);
  letter-spacing: 0.1em;
  flex-shrink: 0;
  margin-bottom: var(--label-baseline-lift);
}

/* ── Section description (under each category label) ── */
.section-desc {
  padding: 0 clamp(16px, 4vw, 56px);
  margin-top: 16px;
  max-width: 760px;
  font-size: var(--font-size-smalltext);
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ── Section nav arrows (pinned to the right edge of the header row on all
   viewports — the same spot on every row regardless of the title's length).
   The margin calc drops the group below the shared lift: the counter's 12px
   text is centered inside the 28px button row, so its baseline rides ~7px
   above the group's bottom — subtracting that puts the "1 / 4" on the same
   baseline as the title and the count (the button rectangles deliberately
   dip below it). ── */
.section-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
  margin-bottom: calc(var(--label-baseline-lift) - 7px);
  margin-right: 36px;
}

.section-nav-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
  color: var(--muted);
  background: none;
  cursor: pointer;
  padding: 0;
}

.section-nav-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0, 154, 214, 0.06);
}

.section-nav-btn:disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

.section-nav-btn svg {
  width: 12px;
  height: 12px;
}

.section-nav-counter {
  font-size: var(--font-size-smallheaders);
  letter-spacing: 0.12em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 32px;
  text-align: center;
}

/* ── Horizontal scroll ── */
.hscroll-wrap {
  padding: 20px 0 16px;
  position: relative;
}

.hscroll-track {
  display: flex;
  gap: clamp(16px, 2.5vw, 24px);
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 clamp(16px, 4vw, 56px) 16px;
  /* Snap the cards to the section's text gutter instead of the scrollport
     edge — keep it equal to the padding above. Without it, mandatory snapping
     scrolls an overflowing row's left padding away on load (i.e. every row
     that shows the pager), so its first card sat flush against the viewport
     while short rows stayed aligned with the title and description. */
  scroll-padding-left: clamp(16px, 4vw, 56px);
  cursor: grab;
}

.hscroll-track::-webkit-scrollbar {
  display: none;
}

.hscroll-track.dragging {
  cursor: grabbing;
  user-select: none;
}

.hscroll-wrap::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: clamp(40px, 8vw, 100px);
  background: linear-gradient(to right, transparent, var(--bg));
  pointer-events: none;
  z-index: 10;
}

/* ── Watch card ── */
/* Cards with a detail entry are real <a> links to their model page — the
   color/decoration resets cover that, harmless on the inert div cards. */
.watch-card {
  flex-shrink: 0;
  width: clamp(240px, 28vw, 360px);
  scroll-snap-align: start;
  background: var(--card);
  border: 1px solid var(--border);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.3s, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.watch-card:hover {
  border-color: rgba(0, 154, 214, 0.3);
  transform: translateY(-4px);
  z-index: 2;
}

/* Cards for models with no detail entry yet carry no data-detail-id, so
   home.js binds no click — don't offer a pointer they can't act on. */
.watch-card:not([data-detail-id]):not(.watch-card--has-variants) {
  cursor: default;
}

.watch-card-img {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--surface);
}

.watch-card-img svg {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.watch-card:hover .watch-card-img svg {
  transform: scale(1.04);
}

.watch-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.watch-card:hover .watch-card-img img {
  transform: scale(1.04);
}

.watch-card-body {
  padding: 20px 20px 22px;
}

.watch-card-collection {
  display: none;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.watch-card-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text);
  margin-bottom: 0;
  line-height: 1.2;
}

.watch-card-detail {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.08em;
  margin-bottom: 16px;
  line-height: 1.6;
}

/* ── Variant name row ── */
.watch-card-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.watch-card-name-row .watch-card-name {
  margin-bottom: 0;
}

/* ── Variant cycling card ── */
.watch-card--has-variants {
  position: relative;
  overflow: hidden;
}

.watch-card-variant-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.watch-card-variant-counter {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.watch-card-variant-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
  color: var(--muted);
  background: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.watch-card-variant-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0, 154, 214, 0.06);
}

.watch-card-variant-btn svg {
  width: 12px;
  height: 12px;
}

@keyframes slideOutLeft {
  to {
    transform: translateX(-30px);
    opacity: 0;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(30px);
    opacity: 0;
  }
}

.watch-card-inner.animating-out {
  animation: slideOutLeft 0.25s ease forwards;
}

.watch-card-inner.animating-in {
  animation: slideInRight 0.25s ease forwards;
}

/* ── Variant faces (every model's image + name is a real link, stacked;
   only the .active one shows — home.js cycling toggles the class) ── */
.watch-card-face {
  display: none;
  height: 100%;
}

.watch-card-face.active {
  display: block;
}

.watch-card-face-name {
  display: none;
  color: inherit;
  text-decoration: none;
}

.watch-card-face-name.active {
  display: inline;
}

/* ── Card model strip (one clickable thumb per model; active = model shown) ── */
.watch-card-variants {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  margin-top: 10px;
}

.watch-card-variant-thumb {
  flex: 0 0 46px;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--card);
  overflow: hidden;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s, border-color 0.2s;
}

.watch-card-variant-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.watch-card-variant-thumb.active,
.watch-card-variant-thumb:hover {
  opacity: 1;
  border-color: var(--accent);
}

/* ── Variant model-cycle zone (right strip — spans the body only, not the image) ── */
.watch-card--has-variants .watch-card-body {
  position: relative;
  padding-right: 29%;
}

.watch-card-variant-zone {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 27%;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  transition: background 0.3s, color 0.25s;
  font-family: 'Montserrat', sans-serif;
}

.watch-card-variant-zone::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: var(--border);
  transition: background 0.25s;
}

.watch-card-variant-zone:hover {
  background: linear-gradient(to right, transparent, rgba(0, 154, 214, 0.10));
  color: var(--accent);
}

.watch-card-variant-zone:hover::before {
  background: rgba(0, 154, 214, 0.35);
}

.watch-card-variant-zone svg {
  width: 18px;
  height: 18px;
}

.watch-card-variant-zone .watch-card-variant-counter {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: inherit;
  font-variant-numeric: tabular-nums;
}

/* Touch devices have no hover — keep the model-cycle strip visibly tappable */
@media (hover: none) {
  .watch-card-variant-zone {
    background: linear-gradient(to right, transparent, rgba(0, 154, 214, 0.09));
    color: var(--accent);
  }

  .watch-card-variant-zone::before {
    background: rgba(0, 154, 214, 0.3);
  }
}

/* ── Scroll hint ── */
.scroll-hint {
  display: none;
}

.scroll-hint-track {
  width: 48px;
  height: 1px;
  background: var(--border);
  position: relative;
  overflow: hidden;
}

.scroll-hint-thumb {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 16px;
  background: var(--accent);
  animation: scrollHint 2s ease-in-out infinite;
}

@keyframes scrollHint {
  0% {
    left: 0;
  }

  100% {
    left: calc(100% - 16px);
  }
}

/* ── Detail overlay & panel ── */
/* Backdrop of the open panel: dims and blurs the page, and catches the click
   that closes the detail (home.js). The scrim sits on the base rule, not on
   .open — the opacity transition is what fades it, in both directions. Its
   inset deliberately starts below the fixed chrome: nav + subnav stay lit and
   clickable while the panel is open. */
/* Overlay chrome is modal — the page behind it must not scroll. The backdrop
   below blocks clicks but not the wheel. Companion to the .page-arrow /
   .scroll-top rules further down, which already treat these two the same.
   Goes on html, not body: body carries overflow-x:hidden, whose propagation to
   the viewport makes the same declaration on body far less predictable. */
html:has(.detail-panel.open),
html:has(.mobile-menu.open) {
  overflow: hidden;
}

.detail-overlay {
  position: fixed;
  inset: calc(var(--nav-h) + var(--sub-h)) 0 0 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}

.detail-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.detail-panel {
  position: fixed;
  top: calc(var(--nav-h) + var(--sub-h));
  right: 0;
  bottom: 0;
  z-index: 201;
  width: clamp(660px, 60vw, 100vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  /* Entry heights vary per model, so the bar can come and go between models;
     `stable` keeps the track reserved either way. */
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  /* .detail-body's two-column split depends on how wide the PANEL is, not the
     viewport: between 1025px and ~1350px the panel sits at its 660px clamp
     minimum while the viewport is still wide, so no media query can catch it.
     Safe here — the panel's width is set explicitly, and `transform` already
     made it the containing block for its fixed-position children. */
  container-type: inline-size;
}

.detail-panel.open {
  transform: translateX(0);
}

/* Detail scrollbars — wider and actually visible against --surface.
   scrollbar-width only accepts auto|thin|none, so widening past the platform
   default needs the WebKit pseudo-elements. A non-auto scrollbar-width or
   scrollbar-color on the same element makes those pseudo-elements be ignored,
   so the standard properties must stay off .detail-panel/.detail-spec-view and
   live in the @supports fallback below — which only Firefox matches. */
.detail-panel::-webkit-scrollbar,
.detail-spec-view::-webkit-scrollbar {
  width: 16px;
}

.detail-panel::-webkit-scrollbar-track,
.detail-spec-view::-webkit-scrollbar-track {
  background-color: transparent;
}

/* background-color longhand, not the shorthand — the shorthand would reset
   background-clip and undo the inset. */
.detail-panel::-webkit-scrollbar-thumb,
.detail-spec-view::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  background-clip: content-box;
  border: 2px solid transparent;
  border-radius: 7px;
}

.detail-panel::-webkit-scrollbar-thumb:hover,
.detail-spec-view::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.32);
}

/* Firefox has no ::-webkit-scrollbar. scrollbar-width is deliberately left at
   its initial `auto` — the widest Firefox offers; only the colour is set. */
@supports not selector(::-webkit-scrollbar) {
  .detail-panel,
  .detail-spec-view {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  }
}

/* Pre-rendered detail entries — one per model, all in the panel's HTML.
   display:contents keeps .detail-media/.detail-body direct flex children of
   the panel (and plain flow children on the model page); the [hidden] rule
   must out-specify it or hidden entries would show. */
.detail-entry {
  display: contents;
}

.detail-entry[hidden] {
  display: none;
}

.detail-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color 0.2s;
  font-family: 'Montserrat', sans-serif;
}

.detail-close-btn:hover {
  color: var(--text);
}

.detail-close-btn--overlay {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  padding: 10px 14px;
  border: var(--border-arrows);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  color: var(--text);
}

/* ── Detail media (16/9 photo + vertical thumb rail) ── */
.detail-media {
  display: flex;
  flex-shrink: 0;
  background: var(--bg);
}

.detail-gallery {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  aspect-ratio: 16 / 9;
  background: var(--card);
  overflow: hidden;
}

.detail-gallery-main {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}

/* The whole gallery is a pre-rendered <img> stack; only the active photo
   shows (hidden lazy images stay unfetched until revealed). */
.detail-gallery-main:not(.active) {
  display: none;
}

.detail-rail {
  flex: 0 0 152px;
  position: relative;
  background: var(--bg);
  border-left: 1px solid var(--border);
}

.detail-rail-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.detail-rail-nav {
  flex-shrink: 0;
  width: calc(100% - 24px);
  height: 32px;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
  font-family: 'Montserrat', sans-serif;
}

.detail-rail-nav:hover {
  color: var(--accent);
  background: rgba(0, 154, 214, 0.08);
  border-color: var(--accent);
}

.detail-rail-nav svg {
  width: 12px;
  height: 12px;
}

.detail-rail-nav--up {
  margin-top: 12px;
}

.detail-rail-nav--down {
  margin-bottom: 12px;
}

.detail-thumbs {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

.detail-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--card);
  overflow: hidden;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s, border-color 0.2s;
  flex-shrink: 0;
}

.detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.detail-thumb.active,
.detail-thumb:hover {
  opacity: 1;
  border-color: var(--accent);
}

.detail-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas: "name specs" "desc specs" "credits specs" "actions specs";
  /* Generous air between the text column and the spec table's accent rule.
     Two-column only — both stacked layouts reset this to 0. */
  column-gap: clamp(48px, 5vw, 96px);
  align-items: start;
  padding: 36px clamp(24px, 3vw, 48px) 48px;
  flex: 1;
}

/* The specs track is a rigid 420px, so below roughly this width the text column
   is starved (127px at a 660px panel — one word per line). Stack instead.
   The ≤768px media query below repeats this deliberately: the mobile layout
   must not depend on container-query support. */
@container (max-width: 820px) {
  .detail-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "name" "desc" "specs" "credits" "actions";
    column-gap: 0;
  }
}

.detail-body--nospecs {
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: "name" "desc" "credits" "actions";
}

.detail-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.1;
  margin-bottom: 8px;
}

.detail-name-row {
  grid-area: name;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* The button is flex-shrink:0; without wrapping it overflows the grid column
     and draws on top of the specs when the name column gets tight. */
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.detail-name-row .detail-name {
  margin-bottom: 0;
  min-width: 0;
}

/* Sits inside the pill link, so it inherits its color — including on hover. */
.detail-variant-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.detail-variant-counter {
  font-size: 10px;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Two stacked rows: the label above, the counter + arrow below. */
.detail-variant-btn {
  padding: 7px 14px;
  border: 1px solid var(--accent);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.25s;
  color: var(--accent);
  background: rgba(0, 154, 214, 0.06);
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
}

.detail-variant-btn:hover {
  background: var(--accent);
  color: #fff;
}

.detail-variant-btn svg {
  width: 14px;
  height: 14px;
}

.detail-variant-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.detail-media.animating-out,
.detail-body.animating-out {
  animation: slideOutLeft 0.25s ease forwards;
}

.detail-media.animating-in,
.detail-body.animating-in {
  animation: slideInRight 0.25s ease forwards;
}

.detail-desc {
  grid-area: desc;
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 32px;
  max-width: 600px;
}

.detail-specs {
  grid-area: specs;
  margin-bottom: 0;
}

/* Deliberately a second block with the same condition as the layout one above:
   @container adds no specificity, so this has to sit after the rule it
   overrides. Stacked, specs becomes a row between desc and credits and needs
   the bottom spacing they carry — the grid has no row-gap, and margin-bottom:0
   above is right for two columns, where specs owns its own column. */
@container (max-width: 820px) {
  .detail-specs {
    margin-bottom: 32px;
  }
}

.detail-specs-title {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.detail-specs-rows {
  border-left: solid 1px var(--accent);
  padding-left: 22px;
}

.detail-spec-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px 16px;
  padding: 5px 0;
  font-size: 11px;
}

.detail-spec-key {
  color: var(--muted);
}

.detail-spec-val {
  color: var(--text);
}

.detail-actions {
  grid-area: actions;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 8px;
}

.detail-credits {
  grid-area: credits;
  margin-bottom: 24px;
}

.detail-credits:empty {
  display: none;
}

.detail-credits-title {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.detail-credits-names {
  font-size: 12px;
  color: var(--text);
  line-height: 1.8;
}

/* ── Buttons ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--accent);
  color: #000000;
  border: none;
  padding: 14px 28px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  text-decoration: none;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  transition: all 0.25s;
}

.btn-primary:hover {
  background: #33b5e5;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: none;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 14px 24px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: all 0.25s;
  text-decoration: none;
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Section divider ── */
.section-divider {
  margin: 0 clamp(16px, 4vw, 56px);
  height: 1px;
  background: var(--border);
}

/* ── Page grid ── */
.page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 24px);
  padding: 32px clamp(16px, 4vw, 56px) 48px;
  position: relative;
  z-index: 1;
}

.page-grid .watch-card {
  width: 100%;
  flex-shrink: initial;
}

/* ── Gallery grid ── */
.gallery-grid {
  column-count: 4;
  column-gap: clamp(12px, 2vw, 20px);
  padding: 32px clamp(16px, 4vw, 56px) 48px;
  position: relative;
  z-index: 1;
}

.gallery-grid .gallery-item {
  break-inside: avoid;
  margin-bottom: clamp(12px, 2vw, 20px);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card);
  transition: border-color 0.3s;
}

.gallery-grid .gallery-item:hover {
  border-color: rgba(0, 154, 214, 0.3);
}

.gallery-grid .gallery-item img {
  width: 100%;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-grid .gallery-item:hover img {
  transform: scale(1.04);
}

/* ── Archive preview (end of the Zakázková výroba page) ── */
.archive-preview-more {
  padding: 0 clamp(16px, 4vw, 56px) 48px;
}

/* ── Contact section ── */
.contact-section {
  padding: clamp(48px, 8vw, 96px) clamp(16px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  margin-top: calc(var(--nav-h) + var(--mnav-h));
  /* heroless page — clear the fixed chrome */
  padding: clamp(48px, 8vh, 88px) clamp(16px, 4vw, 56px) 64px;
  position: relative;
  z-index: 1;
}

/* Kontakt: the fixed left page-arrow rides mid-viewport on desktop — shift
   the form out of its lane (arrow offset + 44px box + breathing room).
   Keyed off the arrows' presence, so the arrow-less /kontakty2 variant and
   no-JS renders keep the plain gutter; mobile arrows sit at the bottom
   corners, no shift needed. */
@media (min-width: 1025px) {
  body:has(.page-arrow) .contact-wrap {
    padding-left: calc(clamp(10px, 2vw, 28px) + 76px);
  }
}

/* Decorative image column next to the form (the form column drives the grid
   row height; the absolute img just fills whatever cell it gets). */
.contact-media {
  position: relative;
  border: 1px solid var(--border);
  background: var(--card);
  overflow: hidden;
  min-height: 320px;
}

.contact-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Heading of the form — the first child of the form itself, so it inherits
   the column flow and (on /kontakty2) the form's max-width instead of
   claiming a grid cell of its own in .contact-wrap. */
.contact-form-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 8px;
}

.contact-form label {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-form input,
.contact-form textarea {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 14px 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  outline: none;
  transition: border-color 0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--accent);
}

.contact-form textarea {
  min-height: 120px;
  resize: vertical;
}

.contact-form button {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--accent);
  color: #000000;
  border: none;
  padding: 14px 28px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  transition: all 0.25s;
}

.contact-form button:hover {
  background: #33b5e5;
}

/* ── Contact variant 2 (/kontakty2) — fullscreen photo background ──
   A/B twin of the contact page above: the photo is a viewport-sized cover
   layer behind the form, with the form alone on the scrimmed left side;
   ::after carries the scrims (the horizontal one mirrors .hero-bg::before;
   the bottom fade melts into the forced-opaque footer). Document-anchored
   (absolute, one viewport tall), not fixed: the fade has to scroll WITH the
   photo so its near-opaque end meets the footer instead of hiding behind
   it. */
.contact-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  height: 100vh;
  height: 100svh;
  /* iOS URL-bar-safe; falls back to 100vh above */
}

.contact-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top,
      rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 16%, rgba(0, 0, 0, 0) 42%),
    linear-gradient(to right,
      rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.68) 30%, rgba(0, 0, 0, 0.38) 50%,
      rgba(0, 0, 0, 0.15) 65%, rgba(0, 0, 0, 0) 78%);
}

/* Single column over the photo, vertically centered on one chrome-adjusted
   viewport (svh where supported — .hero--page precedent). */
.contact-wrap--overlay {
  grid-template-columns: 1fr;
  align-content: center;
  min-height: calc(100vh - var(--nav-h) - var(--mnav-h));
  min-height: calc(100svh - var(--nav-h) - var(--mnav-h));
}

.contact-wrap--overlay .contact-form {
  max-width: 520px;
}

/* The fixed photo would bleed through the transparent footer (same fix as
   .reader-shell.is-enhanced ~ footer); margin-top 0 closes the 80px gap so
   the bottom fade runs straight into the footer slab. */
.contact-bg~footer {
  background: var(--bg);
  margin-top: 0;
}

@media (max-width: 768px) {

  /* Narrow screens: the form spans the full width — a bottom-up scrim
     carries it (mirrors the .hero-bg::before mobile stacking). */
  .contact-bg::after {
    background:
      linear-gradient(to top,
        rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.8) 40%, rgba(0, 0, 0, 0.5) 72%,
        rgba(0, 0, 0, 0.3) 100%),
      linear-gradient(to right,
        rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 55%, rgba(0, 0, 0, 0.4) 100%);
  }
}

/* ── Caliber card ── */
.caliber-card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.caliber-card:hover {
  border-color: rgba(0, 154, 214, 0.3);
  transform: translateY(-4px);
}

.caliber-card-img {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--surface);
}

.caliber-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.caliber-card:hover .caliber-card-img img {
  transform: scale(1.04);
}

.caliber-card-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 12px;
}

.caliber-card-desc {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.06em;
  line-height: 1.8;
}

.caliber-card-body {
  padding: 20px 20px 22px;
}

.caliber-card-detail {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.08em;
  line-height: 1.6;
}

/* ── Mobile menu ── */
.mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 98;
  background: rgba(0, 0, 0, 0.97);
  backdrop-filter: blur(20px);
  flex-direction: column;
  padding: 32px clamp(16px, 4vw, 40px);
  overflow-y: auto;
}

.mobile-menu.open {
  display: flex;
}

.mobile-menu a {
  color: var(--text);
  text-decoration: none;
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 300;
  letter-spacing: 0.06em;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s;
}

.mobile-menu a:hover {
  color: var(--accent);
}

.mobile-menu a.current {
  color: var(--accent);
}

.mobile-menu .mobile-menu-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 0 12px 26px;
  border-bottom: none;
}

.mobile-menu .mobile-menu-sub.active {
  color: var(--accent);
}

.mobile-menu-row {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}

.mobile-menu-row > a {
  flex: 1;
  border-bottom: none;
}

.mobile-menu-toggle {
  background: none;
  border: none;
  color: var(--muted);
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 300;
  width: 52px;
  padding: 16px 0;
  cursor: pointer;
  text-align: center;
  transition: color 0.2s;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.mobile-menu-toggle:hover {
  color: var(--accent);
}

.mobile-menu-subs {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.mobile-menu-subs--open {
  max-height: 500px;
}

.mobile-langs {
  display: flex;
  gap: 16px;
  padding: 24px 0;
  margin-top: auto;
}

.mobile-langs a {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-bottom: none;
  padding: 0;
  transition: color 0.2s;
}

.mobile-langs a:hover {
  color: var(--accent);
}

.mobile-langs a.active {
  color: var(--accent);
}

/* ── Footer ── */
footer {
  margin-top: 80px;
  padding: 48px clamp(16px, 4vw, 56px);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.footer-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  letter-spacing: 0.18em;
  color: var(--muted);
}

.footer-logo span {
  color: var(--accent);
}

.footer-copy {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.1em;
}

/* ── Footer with contacts (detailed) ── */
.footer--contacts {
  display: block;
  padding: 56px clamp(16px, 4vw, 56px) 36px;
  margin-top: 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.footer-brand {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text);
  margin-bottom: 16px;
}

.footer-tagline {
  font-size: var(--font-size-smalltext);
  line-height: 1.8;
  color: var(--muted);
  max-width: 320px;
}

.footer-heading {
  font-size: var(--font-size-smallheaders);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 14px;
}

.footer-text {
  font-size: var(--font-size-smalltext);
  line-height: 1.9;
  color: var(--muted);
  margin-bottom: 14px;
}

.footer-text a {
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-text a:hover {
  color: var(--accent);
}

.footer-name {
  color: var(--text);
  font-weight: 500;
}

.footer-note {
  font-size: 11px;
  line-height: 1.7;
  color: var(--muted);
  font-style: italic;
  max-width: 320px;
}

.footer--contacts .footer-bottom {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Page arrows (prev/next page navigation; always visible — riding at ONE
   fixed height at the screen edges on desktop, identical on every menu page
   so nothing jumps during page transitions: nav + reader-hero clamp − hero
   pad − (24px title margin + two 25px desc lines + 44px arrow + 10px
   baseline trim = 128px). That is exact bottom-alignment with the hero
   title on the two-line-desc reader pages (filozofie, zakázková výroba) and
   nominal on the rest — deliberately NOT per-page measured, uniformity won
   over precision. Pinned at the bottom corners on mobile. ── */
.page-arrow {
  position: fixed;
  z-index: 90;
  top: calc(var(--nav-h) + clamp(400px, 60vh, 720px) - clamp(32px, 6vw, 80px) - 128px);
  top: calc(var(--nav-h) + clamp(400px, 60svh, 720px) - clamp(32px, 6vw, 80px) - 128px);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--border-arrows);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.35s, border-color 0.25s, color 0.25s, background 0.25s;
}

.page-arrow--prev {
  left: clamp(10px, 2vw, 28px);
}

.page-arrow--next {
  right: clamp(10px, 2vw, 28px);
}

.page-arrow:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0, 154, 214, 0.08);
}

.page-arrow svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s;
}

/* the icon nudges in its pointing direction, like the .hero-cta arrows */
.page-arrow--prev:hover svg {
  transform: translateX(-3px);
}

.page-arrow--next:hover svg {
  transform: translateX(3px);
}

.page-arrow-label {
  display: none;
}

@media (hover: hover) and (pointer: fine) {

  /* the label opens BELOW the arrow hugging the screen edge — it never
     extends inward where it could cover the hero heading */
  .page-arrow-label {
    display: block;
    position: absolute;
    top: calc(100% + 8px);
    white-space: nowrap;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text);
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid var(--border);
    padding: 6px 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
  }

  .page-arrow--prev .page-arrow-label {
    left: 0;
  }

  .page-arrow--next .page-arrow-label {
    right: 0;
  }

  .page-arrow:hover .page-arrow-label {
    opacity: 1;
  }
}

/* Hidden while any overlay chrome is open (JS guards the swipe/keys; this covers the visuals) */
body:has(.detail-panel.open) .page-arrow,
body:has(.mobile-menu.open) .page-arrow {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .page-arrow {
    top: auto;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .page-arrow--prev {
    left: calc(10px + env(safe-area-inset-left, 0px));
  }

  .page-arrow--next {
    right: calc(10px + env(safe-area-inset-right, 0px));
  }

  /* keep the bottom-anchored hero content clear of the bottom-corner arrows */
  .hero {
    padding-bottom: 88px;
  }
}

@keyframes arrowHint {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-6px);
  }
}

.page-arrow--hint svg {
  animation: arrowHint 1.2s ease 2;
}

/* ── Scroll to top (in layout.html on every page; site.js adds .visible once
   the page is scrolled about a viewport) ── */
.scroll-top {
  position: fixed;
  z-index: 90;
  right: clamp(10px, 2vw, 28px);
  bottom: 24px;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--border-arrows);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.35s, transform 0.35s, border-color 0.25s, color 0.25s, background 0.25s;
}

.scroll-top.visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.scroll-top:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0, 154, 214, 0.08);
}

.scroll-top svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s;
}

.scroll-top:hover svg {
  transform: translateY(-3px);
}

/* nudges up, like the .hero-cta arrows */
body:has(.detail-panel.open) .scroll-top,
body:has(.mobile-menu.open) .scroll-top {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 1024px) {

  /* stacked above the bottom-right next-arrow (16px inset + 44px + 10px gap) */
  .scroll-top {
    right: calc(10px + env(safe-area-inset-right, 0px));
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Page transitions (cross-document View Transitions; Chromium + Safari
   18.2+ animate, other browsers keep instant navigation). Navigations
   between menu pages get slide-fwd/slide-back types from site.js; everything
   else keeps the browser's default crossfade. ── */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

/* The fixed nav is its own snapshot group — it stays put while the page
   slides, and its 'current' highlight crossfades. Same for the mobile nav
   strip (display:none on desktop — not captured there). */
nav {
  view-transition-name: site-nav;
}

.nav-strip {
  view-transition-name: nav-strip;
}

@keyframes vt-slide-out-left {
  to {
    transform: translateX(-24%);
    opacity: 0;
  }
}

@keyframes vt-slide-in-right {
  from {
    transform: translateX(24%);
    opacity: 0;
  }
}

@keyframes vt-slide-out-right {
  to {
    transform: translateX(24%);
    opacity: 0;
  }
}

@keyframes vt-slide-in-left {
  from {
    transform: translateX(-24%);
    opacity: 0;
  }
}

html:active-view-transition-type(slide-fwd)::view-transition-old(root) {
  animation: vt-slide-out-left 0.3s ease both;
}

html:active-view-transition-type(slide-fwd)::view-transition-new(root) {
  animation: vt-slide-in-right 0.3s ease both;
}

html:active-view-transition-type(slide-back)::view-transition-old(root) {
  animation: vt-slide-out-right 0.3s ease both;
}

html:active-view-transition-type(slide-back)::view-transition-new(root) {
  animation: vt-slide-in-left 0.3s ease both;
}

/* ── Animations ── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-content {
  animation: fadeUp 0.8s ease 0.2s both;
}

.hero-section {
  animation: fadeUp 0.8s ease 0.2s both;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .page-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1200px) {
  .nav-langs {
    display: none;
  }

  .nav-links {
    gap: clamp(10px, 1.5vw, 20px);
  }

  .nav-links a {
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .section-nav {
    margin-right: 42px;
  }

}

@media (max-width: 1024px) {
  .nav-links {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  /* Subnav folds into the hamburger menu (home section links render there);
     --sub-h must stay a length — a unitless 0 would invalidate the calc()
     sums it feeds (scroll-padding-top, .hero margin/height). --mnav-h (same
     rule) turns on the .nav-strip slot below the navbar instead. */
  :root {
    --sub-h: 0px;
    --mnav-h: 32px;
  }

  .subnav {
    display: none;
  }

  .nav-strip {
    display: flex;
  }

  .detail-overlay,
  .detail-panel {
    top: 0;
  }

  .detail-panel {
    width: 100%;
    border-left: none;
  }
}

@media (max-width: 768px) {
  .nav-hamburger {
    display: flex;
  }

  .hero-dial {
    opacity: 0.3;
  }

  .watch-card {
    width: clamp(220px, 72vw, 300px);
  }

  .detail-media {
    flex-direction: column;
  }

  .detail-rail {
    flex: none;
    height: 84px;
    border-left: none;
    border-top: 1px solid var(--border);
  }

  .detail-rail-inner {
    flex-direction: row;
  }

  .detail-rail-nav {
    width: 32px;
    height: calc(100% - 20px);
  }

  .detail-rail-nav svg {
    transform: rotate(-90deg);
  }

  .detail-rail-nav--up {
    margin: 0 0 0 12px;
  }

  .detail-rail-nav--down {
    margin: 0 12px 0 0;
  }

  .detail-thumbs {
    flex-direction: row;
    overflow: hidden;
    padding: 10px 12px;
    gap: 8px;
  }

  .detail-thumb {
    width: 100px;
    flex-shrink: 0;
  }

  .detail-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "name" "desc" "specs" "credits" "actions";
    column-gap: 0;
  }

  /* Mirrors the @container rule above — see the note there. */
  .detail-specs {
    margin-bottom: 32px;
  }

  .detail-spec-row {
    grid-template-columns: 110px 1fr;
  }

  .page-grid {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    column-count: 2;
  }

  .contact-section {
    grid-template-columns: 1fr;
  }

  .contact-wrap {
    grid-template-columns: 1fr;
  }

  .contact-media {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  /* image below the form */
  footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .section-label-line {
    display: none;
  }

  .section-count {
    display: none;
  }

  .section-nav-btn {
    width: 32px;
    height: 32px;
  }

  .section-nav-btn svg {
    width: 14px;
    height: 14px;
  }

  /* Line + count are hidden here, so the baseline lift has nothing to align
     with — the 32px buttons would tower over the small title. Center the
     pager on the title instead. */
  .section-label {
    align-items: center;
  }

  .section-nav {
    margin-bottom: 0;
  }

  .section-desc {
    font-size: 11px;
    margin-top: 12px;
  }
}

@media (max-width: 480px) {
  .gallery-grid {
    column-count: 1;
  }

  .watch-card-variants {
    gap: 4px;
  }
}

/* Specification page */
.spec-page {
  margin-top: calc(var(--nav-h) + var(--mnav-h) + 32px);
  padding: clamp(32px, 6vw, 80px) clamp(16px, 4vw, 56px);
  max-width: 1200px;
  position: relative;
  z-index: 1;
}

.spec-header {
  margin-bottom: 32px;
}

.spec-back {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 24px;
  transition: color 0.2s;
}

.spec-back:hover {
  color: var(--accent);
}

.spec-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 300;
  color: var(--accent);
  letter-spacing: 0.04em;
}

.spec-divider {
  border: none;
  height: 1px;
  background: var(--border);
  margin: 32px 0;
}

.spec-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 48px;
}

.spec-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 8px 16px;
  padding: 8px 0;
}

.spec-row--spacer {
  height: 16px;
}

.spec-key {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}

.spec-val {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
}

.spec-sub {
  color: var(--muted);
  font-size: 11px;
}

.spec-prose {
  max-width: 900px;
}

.spec-prose p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 16px;
}

@media (max-width: 900px) {
  .spec-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .spec-row {
    grid-template-columns: 110px 1fr;
  }
}

/* In-panel spec view (slides over detail content) */
.detail-spec-view {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: var(--surface);
  z-index: 202;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  overscroll-behavior: contain;
}

.detail-spec-view.active {
  transform: translateX(0);
}

.detail-spec-view-header {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 20px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.spec-back-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color 0.2s;
}

.spec-back-btn:hover {
  color: var(--accent);
}

.detail-spec-view-body {
  padding: 32px 28px 48px;
}

.spec-view-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 300;
  color: var(--accent);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.detail-spec-view .spec-columns {
  gap: 16px 32px;
}

.detail-spec-view .spec-row {
  grid-template-columns: 110px 1fr;
}

.spec-prose-p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .detail-spec-view .spec-columns {
    grid-template-columns: 1fr;
  }

  .detail-spec-view .spec-row {
    grid-template-columns: 100px 1fr;
  }
}

/* ── Detail fullscreen photo gallery ── */
.detail-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s, visibility 0s 0.3s;
}

.detail-fullscreen.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.3s;
}

.detail-fullscreen-img {
  width: calc(100vw - 176px);
  height: calc(100vh - 96px);
  object-fit: contain;
  display: block;
}

.detail-fullscreen-close {
  position: absolute;
  top: 20px;
  left: 20px;
}

.detail-fullscreen-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--border-arrows);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
  font-family: 'Montserrat', sans-serif;
}

.detail-fullscreen-nav:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0, 154, 214, 0.08);
}

.detail-fullscreen-nav svg {
  width: 16px;
  height: 16px;
}

.detail-fullscreen-nav--prev {
  left: 24px;
}

.detail-fullscreen-nav--next {
  right: 24px;
}

.detail-fullscreen-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.detail-fullscreen--single .detail-fullscreen-nav,
.detail-fullscreen--single .detail-fullscreen-counter {
  display: none;
}

@media (max-width: 768px) {
  .detail-fullscreen-img {
    width: calc(100vw - 20px);
    height: calc(100vh - 96px);
  }

  .detail-fullscreen-nav {
    width: 40px;
    height: 40px;
  }

  .detail-fullscreen-nav--prev {
    left: 10px;
  }

  .detail-fullscreen-nav--next {
    right: 10px;
  }
}

/* ── Reader pages (Filozofie / Zakázková výroba / Kalibry / O nás —
   the page's chapters stacked on one scrolling page) ── */
.info-page {
  padding: clamp(40px, 7vh, 72px) clamp(20px, 8vw, 96px) 96px;
}

.info-section {
  max-width: 700px;
  margin: 0 auto;
}

.info-section+.info-section {
  margin-top: clamp(56px, 10vh, 96px);
  padding-top: clamp(56px, 10vh, 96px);
  border-top: 1px solid var(--border);
}

.info-chapter+.info-chapter {
  margin-top: clamp(48px, 8vh, 80px);
}

@media (max-width: 768px) {
  .info-page {
    padding: 32px 20px 80px;
  }
}

/* ── Chapter typography (reader pages) ── */
/* The former category kicker minus its text — just the small accent line. */
.reader-rule {
  width: 108px;
  height: 1px;
  background: var(--accent);
  margin-bottom: 20px;
}

.reader-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 32px;
}

.reader-body p {
  font-size: 13px;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 22px;
}

.reader-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}

.reader-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.reader-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 12px;
  height: 1px;
  background: var(--accent);
}

.reader-quote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.5;
  color: var(--text);
  border-left: 1px solid var(--accent);
  padding-left: 24px;
  margin-top: 40px;
}

/* ── Inline chapter photo (mobile only — desktop uses the crossfade hero) ── */
.chapter-photo {
  display: none;
}

/* ── Back-to-top link after each chapter ── */
.reader-top {
  display: block;
  text-align: right;
  margin-top: 32px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  opacity: 0.35;
  text-decoration: none;
  transition: opacity 0.2s;
}

.reader-top:hover {
  opacity: 0.7;
}

/* ── Reader scroll-driven chapter background (reader.js) ──
   .reader-shell wraps sentinel + hero + main on the four reader pages; the
   enhanced layout only applies once reader.js adds .is-enhanced (no JS or
   reduced motion ⇒ the plain static hero, plus inline chapter photos on
   phones). One behavior at every width: the image layer is fixed
   full-viewport behind the page and the veiled chapter blocks scroll over
   it — see the rules below. CONSTRAINT: never add overflow, transform,
   filter or contain to .hero/.reader-shell — the layout relies on
   .hero-bg escaping .hero via position:fixed. */
.reader-shell {
  position: relative;
}

/* What site.js's near-page-top keyboard gate observes — a stable strip at
   the top of the shell; its visibility tracks how far the page has
   scrolled, independent of the fixed image layer. */
.reader-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 60vh;
  height: min(60svh, 720px);
  pointer-events: none;
}

/* Crossfade buffer img appended by reader.js on top of the base img
   (both sit under the .hero-bg scrims). reader.js derives its commit
   fallback from the computed duration — tune the pace here alone. */
.hero-bg .hero-bg-img-swap {
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
  will-change: opacity;
}

.hero-bg .hero-bg-img-swap.is-visible {
  opacity: 1;
}

.hero-bg .hero-bg-img-swap.no-anim {
  transition: none;
}

/* Chapter caption (built by reader.js, text read from the chapter
   heading): names the chapter the shown photo belongs to. It lives inside
   the fixed z-0 layer, so the z-1 veil blocks cover it as they pass — it
   surfaces only through the clean-image windows, and only once reading
   started (.is-scrolled gate below), never over the hero text. The soft
   shadow keeps it legible on bright photos (the scrims are faded out by
   then). */
.hero-bg .hero-bg-caption {
  position: absolute;
  left: clamp(20px, 4vw, 48px);
  bottom: calc(clamp(20px, 5vh, 44px) + env(safe-area-inset-bottom, 0px));
  z-index: 1;
  max-width: 70%;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7), 0 0 3px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

/* …and reader.js adds .is-covered while a veil block passes over its
   spot, so it can't ghost through the translucent veil. */
.reader-shell.is-enhanced.is-scrolled .hero--reader .hero-bg .hero-bg-caption.is-visible:not(.is-covered) {
  opacity: 1;
}

@media (max-width: 1024px) {

  /* the page arrows own the bottom corners there — the caption moves to
     the bottom center, riding at the arrows' height between them */
  .hero-bg .hero-bg-caption {
    left: 72px;
    right: 72px;
    max-width: none;
    text-align: center;
    bottom: calc(31px + env(safe-area-inset-bottom, 0px));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Enhanced layout (all widths): the image layer is fixed full-viewport and
   keeps crossfading; the chapter blocks scroll over it carrying their own
   veil, and the transparent margin gaps between them are clean-image
   windows. The fixed .hero-bg escapes .hero's overflow:hidden only while
   no ancestor creates a containing block — see the CONSTRAINT above. */
.reader-shell.is-enhanced .hero--reader .hero-bg {
  position: fixed;
  inset: 0;
  height: 100lvh;
  /* iOS URL-bar collapse: pre-size past the bar; others drop the line */
  z-index: 0;
}

/* Hero text and scrims fade once reading starts (.is-scrolled from
   reader.js) — the windows must show the photo clean, no veil. */
.reader-shell.is-enhanced .hero--reader .hero-bg::before,
.reader-shell.is-enhanced .hero--reader .hero-bg::after {
  transition: opacity 0.45s ease;
}

.reader-shell.is-enhanced.is-scrolled .hero--reader .hero-bg::before,
.reader-shell.is-enhanced.is-scrolled .hero--reader .hero-bg::after {
  opacity: 0;
}

.reader-shell.is-enhanced .hero--reader .hero-content {
  /* fadeUp's fill-mode would pin opacity at 1 — animations outrank normal
     declarations in the cascade */
  animation: none;
  transition: opacity 0.45s ease;
}

.reader-shell.is-enhanced.is-scrolled .hero--reader .hero-content {
  opacity: 0;
}

.reader-shell.is-enhanced .info-page {
  position: relative;
  z-index: 1;
  /* above the fixed z-0 image layer */
  padding: 0 0 clamp(80px, 10vh, 96px);
  /* side padding moves into the chapter blocks */
}

/* Full-bleed veil blocks — the reading column moves into the block padding
   (below; on phones the max() floor keeps the plain 20px sides). */
.reader-shell.is-enhanced .info-section {
  max-width: none;
}

/* The clean-image window is the section separator here. */
.reader-shell.is-enhanced .info-section + .info-section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Every chapter opens with a clean-image window; the margins collapse
   through the section boundaries into uniform gaps. */
.reader-shell.is-enhanced .info-chapter {
  margin-top: 48vh;
  margin-top: 48svh;
  padding: clamp(28px, 5vh, 48px) max(20px, calc((100% - 700px) / 2)) clamp(32px, 6vh, 56px);
  background: rgba(0, 0, 0, 0.9);
}

/* …except the page's first one, which peeks below the hero box on load —
   the hero is its window (the hero image IS its image, see content.php). */
.reader-shell.is-enhanced .info-section:first-child .info-chapter:first-child {
  margin-top: clamp(24px, 4vh, 40px);
}

.reader-shell.is-enhanced .chapter-photo {
  display: none;
  /* the photo lives in the fixed layer */
}

/* Blocks after the shell must be opaque or the fixed image bleeds
   through (positioned z-0 paints above non-positioned content). */
.reader-shell.is-enhanced ~ .archive-preview,
.reader-shell.is-enhanced ~ footer {
  position: relative;
  z-index: 1;
  background: var(--bg);
}

@media (max-width: 768px) {

  /* Fallback (no JS / reduced motion): the hero scrolls away normally and
     the chapter photos sit inline in the content flow. */
  .chapter-photo {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin-top: 32px;
  }
}