/* ==========================================================================
   Petronela NOW — one-pager
   1. Fonts            8.  Method
   2. Tokens           9.  Products
   3. Base             10. Private
   4. Utilities        11. Testimonials
   5. Header / menu    12. Gallery
   6. Hero             13. FAQ
   7. About            14. CTA / Instagram / Footer / FAB / Motion
   ========================================================================== */

/* ==========================================================================
   1. Fonts — self-hosted variable woff2 (latin + latin-ext for Slovak)
   ========================================================================== */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. Tokens
   ========================================================================== */

:root {
  --ink: #0a0806;
  --ink-2: #0d0a07;
  --ink-3: #151009;
  --ink-4: #120d08;
  --cream: #f2ebdf;
  --gold: #c8a468;
  --gold-soft: #e6ce9e;

  --cream-rgb: 242, 235, 223;
  --gold-rgb: 200, 164, 104;

  --line: rgba(var(--gold-rgb), 0.2);
  --line-soft: rgba(var(--gold-rgb), 0.12);
  --muted: rgba(var(--cream-rgb), 0.72);
  --muted-2: rgba(var(--cream-rgb), 0.5);

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Type scale — the only sizes the site uses. Everything below points here,
     so changing a step changes it everywhere at once. */
  --fs-display: clamp(34px, 5vw, 72px);   /* hero, nadpisy sekcií a stránok */
  --fs-sub: clamp(28px, 3vw, 40px);       /* podnadpisy, veľké ceny, štatistiky */
  --fs-title: 26px;                       /* názvy kariet, otázky FAQ, riadkové ceny */
  --fs-body: 18px;                        /* odseky, ledes, polia formulárov */
  --fs-small: 16px;                       /* drobný text, tabuľky, poznámky */
  --fs-label: 12px;                       /* eyebrows, navigácia, štítky, tlačidlá */
  --ls-label: 0.22em;
  --ls-display: -0.01em;

  --pad-x: clamp(20px, 5vw, 80px);
  --pad-y: clamp(30px, 3vw, 100px);
  --maxw: 1280px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   3. Base
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
video,
iframe { display: block; max-width: 100%; }

img { height: auto; }

a {
  color: var(--gold);
  text-decoration: none;
  transition: color 0.3s ease, background-color 0.35s ease, border-color 0.35s ease, opacity 0.4s ease, transform 0.5s var(--ease);
}
a:hover { color: var(--gold-soft); }

button {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 300;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

/* Lists here are structural, never bulleted or numbered — the markers and the
   40px indent that come with <ul>/<ol>/<dd> are always unwanted. */
ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
dl, dd, dt { margin: 0; }
figure { margin: 0; }

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

:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--gold);
  color: var(--ink);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  transition: top 0.25s ease;
}
.skip-link:focus { top: 12px; color: var(--ink); }

/* ==========================================================================
   4. Utilities & shared typography
   ========================================================================== */

.container {
  max-width: var(--maxw);
  margin-inline: auto;
}
/* Every section of the site runs to the same 1280px edge; only the booking
   detail page keeps a narrower reading column. */
.container--narrow { max-width: 1120px; }

.section {
  position: relative;
  z-index: 6;
  padding: var(--pad-y) var(--pad-x);
  background: var(--ink);
}
.section--alt { background: var(--ink-2); }

.section-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: clamp(30px, 4vw, 50px);
}

.eyebrow {
  font-size: 17px;
  letter-spacing: var(--ls-label);
  color: var(--gold);
}

.rule {
  flex: 1;
  height: 1px;
  background: rgba(var(--gold-rgb), 0.22);
}

.display {
  font-size: var(--fs-display);
  line-height: 1.04;
  letter-spacing: var(--ls-display);
}
.display--lg { font-size: var(--fs-display); line-height: 1.02; letter-spacing: var(--ls-display); }
.display--sm { font-size: var(--fs-sub); }

em.accent,
.accent {
  color: var(--gold);
  font-style: italic;
}
.accent--soft { color: var(--gold-soft); }

.lede {
  font-size: var(--fs-body);
  line-height: 1.35;
  color: rgba(var(--cream-rgb), 0.75);
}

.strong { color: var(--cream); }

/* The registered mark after Shifting, small and raised. Every ® on a page is
   wrapped in this by App\Http\Middleware\StyleRegisteredMark, so nothing in
   the copy has to mark it up by hand. A glyph, so it is sized relative to its
   word rather than on the type scale; the floor keeps it legible in labels. */
.reg {
  font-size: max(0.45em, 7px);
  font-style: normal;
  line-height: 0;
  letter-spacing: 0;
  vertical-align: super;
  margin-left: 0.05em;
}

/* Play triangle, drawn — see components/icon-play. */
.icon-play {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.14em;
}

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

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  font-size: var(--fs-label);
  font-weight: 300;
  letter-spacing: var(--ls-label);
  text-align: center;
  cursor: pointer;
  border: 0;
}
.btn--solid {
  background: var(--gold);
  color: var(--ink);
  font-weight: 300;
}
.btn--solid:hover { background: var(--gold-soft); color: var(--ink); }

.btn--ghost {
  border: 1px solid rgba(var(--cream-rgb), 0.35);
  color: var(--cream);
  background: transparent;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

.btn--gold-outline {
  border: 1px solid rgba(var(--gold-rgb), 0.5);
  color: var(--cream);
  background: transparent;
}
.btn--gold-outline:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.btn--sm { padding: 12px 20px; font-size: var(--fs-label);
  font-weight: 300; letter-spacing: var(--ls-label); }
.btn--md { padding: 15px 24px; font-size: var(--fs-label);
  font-weight: 300; letter-spacing: var(--ls-label); }
.btn--lg { padding: 17px 32px; }
.btn--block { display: flex; width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.btn-row--center { justify-content: center; }

.link-quiet {
  font-size: var(--fs-small);
  color: rgba(var(--cream-rgb), 0.65);
}
.link-quiet:hover { color: var(--gold); }

/* Press mentions under the About text: the logos lead, each links to its article. */
.press {
  display: grid;
  gap: 16px;
}
.press__label {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--gold);
}
.press__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.press__item {
  display: inline-flex;
  align-items: center;
  padding: 18px 28px;
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  background: rgba(var(--gold-rgb), 0.04);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.press__item:hover {
  border-color: var(--gold);
  background: rgba(var(--gold-rgb), 0.1);
}
.press__item img {
  display: block;
  height: clamp(34px, 4vw, 48px);
  width: auto;
}
/* An entry without a logo: its name, as tall as a logo bubble. */
.press__item--text {
  min-height: calc(clamp(34px, 4vw, 48px) + 36px);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--cream);
}
.press__item--text:hover { color: var(--gold); }

/* Media frames ----------------------------------------------------------- */

.frame {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #241a10, #0f0b07);
}
.frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.frame--zoom > img { transition: transform 1.1s var(--ease); }
.frame--zoom:hover > img { transform: scale(1.05); }

/* Keyframes -------------------------------------------------------------- */

@keyframes sweep {
  0%   { transform: translateX(-120%) skewX(-18deg); }
  100% { transform: translateX(320%) skewX(-18deg); }
}
@keyframes marq {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}
@keyframes glow {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.8; }
}

/* ==========================================================================
   5. Progress bar, header, mobile menu
   ========================================================================== */

.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, #8a6a32, var(--gold-soft));
  z-index: 120;
  transition: width 0.12s linear;
}

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px clamp(18px, 4vw, 54px);
  border-bottom: 1px solid transparent;
  transition: background-color 0.5s ease, backdrop-filter 0.5s ease, border-color 0.5s ease;
}
.header.is-stuck {
  background: rgba(10, 8, 6, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(var(--gold-rgb), 0.18);
}

/* The logo never gives way to the links beside it (client, Oct 2026): on a
   narrower screen the links go to the burger menu instead. */
.brand {
  display: flex;
  flex: none;
  align-items: center;
  color: var(--cream);
}
.brand:hover { color: var(--cream); }
.brand__logo {
  display: block;
  height: clamp(24px, 3vw, 32px);
  width: auto;
  transition: opacity 0.3s ease;
}
.brand:hover .brand__logo { opacity: 0.85; }

/* Seven links since Kontakt joined them (Oct 2026), so the gaps are a touch
   tighter. */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 28px);
}
.nav__link {
  white-space: nowrap;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: rgba(var(--cream-rgb), 0.7);
}
.nav__link:hover { color: var(--gold); }

.header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lang {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: rgba(var(--cream-rgb), 0.45);
}
.lang__current { color: var(--cream); }
.lang__sep { opacity: 0.3; }
.lang__alt {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.lang__alt:hover { color: var(--gold); }

.header__cta {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 11px 20px;
  border: 1px solid rgba(var(--gold-rgb), 0.5);
  color: var(--cream);
  font-size: var(--fs-label);
  font-weight: 300;
  letter-spacing: var(--ls-label);
  background: rgba(var(--gold-rgb), 0.07);
}
.header__cta:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

/* Members area — quieter than the gold CTA so the primary action still leads. */
.header__member {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid rgba(var(--cream-rgb), 0.2);
  color: rgba(var(--cream-rgb), 0.75);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  white-space: nowrap;
}
.header__member:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.header__member svg {
  width: 12px;
  height: 12px;
  flex: none;
}

.menu__member {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 13px 26px;
  border: 1px solid rgba(var(--gold-rgb), 0.45);
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--cream);
}
.menu__member:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
.menu__member svg { width: 13px; height: 13px; flex: none; }

.burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 38px;
  height: 38px;
  padding: 0;
  background: none;
  border: 1px solid rgba(var(--gold-rgb), 0.4);
  cursor: pointer;
}
.burger span {
  display: block;
  width: 15px;
  height: 1px;
  background: var(--cream);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.burger[aria-expanded='true'] span:first-child { transform: translateY(2.5px) rotate(45deg); }
.burger[aria-expanded='true'] span:last-child { transform: translateY(-2.5px) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 115;
  background: rgba(10, 8, 6, 0.97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  /* Short phones cannot fit six serif links plus the buttons, so the panel
     scrolls instead of pushing the close button off-screen. */
  padding: 90px 24px 40px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

/* Without this the links are inline and flow into rows instead of a column. */
.menu nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
}
.menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease, visibility 0s;
}
.menu__link {
  display: block;
  font-family: var(--serif);
  font-size: var(--fs-sub);
  line-height: 1.2;
  text-align: center;
  color: var(--cream);
}
.menu__link:hover,
.menu__link--active { color: var(--gold); }
.menu__close {
  margin-top: 14px;
  padding: 10px 18px;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: rgba(var(--cream-rgb), 0.4);
}
.menu__close:hover { color: var(--gold); }

body.is-locked { overflow: hidden; }

/* ==========================================================================
   6. Hero
   ========================================================================== */

/* Two discrete stops, one viewport of scroll between them.
   Height must stay in sync with STOPS in main.js: 100vh * STOPS. */
.hero {
  position: relative;
  height: 200vh;
  background: var(--ink);
}

/* While a step animation is running, native smooth-scroll must not fight
   the per-frame scroll writes. */
html.is-stepping { scroll-behavior: auto; }

.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--ink);
}

.hero__ambient {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}
.hero__ambient img {
  position: absolute;
  left: -10%;
  top: -10%;
  width: 120%;
  height: 120%;
  object-fit: cover;
  filter: blur(54px) saturate(0.8) brightness(0.55);
}
.hero__ambient-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 72% 62% at 50% 46%, rgba(var(--gold-rgb), 0.14), rgba(10, 8, 6, 0.9) 72%);
}

.hero__scene {
  position: absolute;
  inset: 0;
  z-index: 2;
  perspective: 1700px;
  perspective-origin: 50% 46%;
  pointer-events: none;
}

.hero__shadow {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0) 70%);
  filter: blur(16px);
}

.hero__book {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  transform-style: preserve-3d;
  will-change: transform;
}

.hero__spine {
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 100%;
  opacity: 0;
  transform-origin: left center;
  transform: rotateY(90deg);
  background: linear-gradient(90deg, #1d1409, #3d2c16 46%, #070502);
  box-shadow: inset 8px 0 18px rgba(0, 0, 0, 0.5);
}

.hero__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--ink);
}

.hero__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Centered in the book plane; JS sets explicit px dimensions each frame so
   the video covers the *viewport window* at full bleed (not the portrait
   plane, which would massively over-crop a landscape file) and morphs to
   cover the book face as the zoom progresses. */
.hero__video {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: 50% 50%;
  will-change: transform;
}
.hero__cover { opacity: 0; will-change: opacity; }

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 8, 6, 0.7) 0%, rgba(10, 8, 6, 0.16) 34%, rgba(10, 8, 6, 0.14) 55%, rgba(10, 8, 6, 0.84) 100%);
}

.hero__sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 22%;
  background: linear-gradient(90deg, transparent, rgba(255, 240, 210, 0.13), transparent);
  animation: sweep 9s ease-in-out infinite;
}

.hero__gloss {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(102deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.05) 16%, rgba(255, 255, 255, 0.05) 62%, rgba(255, 255, 255, 0.15) 100%);
}

.hero__frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  border: 1px solid rgba(0, 0, 0, 0.92);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.72), 0 10px 28px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 240, 215, 0.07);
  pointer-events: none;
}

.hero__edge {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  opacity: 0;
  background: linear-gradient(90deg, rgba(255, 244, 225, 0.4), rgba(255, 244, 225, 0));
}

.hero__intro {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 clamp(20px, 6vw, 80px);
  will-change: transform, opacity;
}

/* The copy never covers the face in the video (client, Oct 2026). main.js
   knows where the face sits in each cut and opens .hero__gap over it: the
   headline stays above, the buttons below, and the lede goes to whichever
   side has room. */
.hero__above,
.hero__below {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  max-width: 100%;
}
.hero__above { transform-origin: 50% 100%; }
.hero__below { transform-origin: 50% 0; }
.hero__gap { flex: none; height: 0; }
.hero__intro.is-fitted { justify-content: flex-start; }
.hero__intro.is-fitted .hero__below > :first-child { margin-top: 0; }
/* Too short to stack: the copy sits in the column left of the face. */
.hero__intro.is-fitted.is-beside { justify-content: center; }
.hero__intro.is-beside .hero__below > :first-child { margin-top: clamp(14px, 3vh, 26px); }
.hero__intro.is-beside .hero__above,
.hero__intro.is-beside .hero__below { width: 100%; }

.hero__kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: clamp(18px, 3vh, 30px);
}
.hero__kicker span:not(.hero__kicker-line) {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--gold);
}
.hero__kicker-line {
  display: block;
  width: 34px;
  height: 1px;
  background: rgba(var(--gold-rgb), 0.6);
  flex: none;
}

.hero__title {
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: var(--ls-display);
  text-shadow: 0 4px 40px rgba(10, 8, 6, 0.55);
}

.hero__lede {
  max-width: 640px;
  margin: clamp(20px, 3vh, 34px) 0 0;
  font-size: var(--fs-body);
  line-height: 1.28;
  color: rgba(var(--cream-rgb), 0.82);
}

.hero__actions { margin-top: clamp(26px, 4vh, 44px); }

.hero__book-copy {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.hero__row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero__book-kicker { margin-bottom: 18px; }
.hero__book-kicker span:not(.hero__kicker-line) {
  font-size: 14px;
  letter-spacing: var(--ls-label);
  color: var(--gold);
}
.hero__book-kicker .hero__kicker-line { width: 28px; background: rgba(var(--gold-rgb), 0.7); }
.hero__book-title {
  font-size: var(--fs-display);
  line-height: 1;
  letter-spacing: var(--ls-display);
}
.hero__book-sub {
  margin-top: 10px;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-title);
  font-weight: 400;
  color: var(--gold-soft);
  line-height: 1.25;
}
.hero__book-text {
  max-width: 52ch;
  margin-top: 22px;
  font-size: var(--fs-body);
  line-height: 1.35;
  color: rgba(var(--cream-rgb), 0.78);
}
.hero__book-actions {
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}
.hero__book-note {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: rgba(var(--cream-rgb), 0.5);
}

/* Centred by its margins: the bob animation owns the transform. */
.hero__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  width: max-content;
  margin-inline: auto;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: bob 2.6s ease-in-out infinite;
}
/* Clearly readable over the video and the book (client, Oct 2026): gold
   lettering with a shadow, and a thicker, longer line ending in an arrowhead. */
.hero__hint span:first-child {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--gold);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}
.hero__hint-line {
  position: relative;
  display: block;
  width: 2px;
  height: 54px;
  background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.35), var(--gold));
  box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.45);
}
.hero__hint-line::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: translateX(-50%) rotate(45deg);
}

/* ==========================================================================
   Marquee (shared: clients + testimonials)
   ========================================================================== */

/* Room to breathe (client, Oct 2026): the title stands clear of the strip,
   and the strip clear of the section edges. */
.marquee {
  overflow: hidden;
  padding: clamp(48px, 6vw, 84px) 0 clamp(40px, 5vw, 64px);
  border-top: 1px solid rgba(var(--gold-rgb), 0.16);
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.16);
  background: var(--ink);
}
.marquee__head { margin-bottom: clamp(30px, 4vw, 48px); }
.marquee__track {
  display: flex;
  width: max-content;
  animation: marq 42s linear infinite;
}
.marquee:hover .marquee__track,
.marquee__track:focus-within { animation-play-state: paused; }

.marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(44px, 5vw, 72px);
  padding-right: clamp(44px, 5vw, 72px);
}
.marquee__item {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: rgba(var(--cream-rgb), 0.55);
  white-space: nowrap;
}
.marquee__star { color: var(--gold); }

/* ==========================================================================
   7. About
   ========================================================================== */

.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 74px);
  align-items: start;
}
/* Text carries this section; the image column is a supporting rail, not a
   50/50 partner — at half width the three shots dominate the copy. */
@media (min-width: 900px) {
  .about__grid { grid-template-columns: 7fr 3fr; }
  /* The photos end level with the press logos at the foot of the text
     (client, Oct 2026). */
  .about__media { align-self: end; }
}

.about__title {
  margin-bottom: 26px;
  font-size: var(--fs-display);
  line-height: 1.06;
}

.about__text {
  margin-bottom: 20px;
  font-size: var(--fs-body);
  line-height: 1.39;
  color: rgba(var(--cream-rgb), 0.78);
}
/* The last line of the About text stands on its own, as it did inside the
   third paragraph before. */
.about__closing {
  margin-bottom: 34px;
  font-size: var(--fs-body);
  line-height: 1.39;
  color: var(--cream);
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 26px 0;
  margin-bottom: 34px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats__value {
  font-family: var(--serif);
  font-size: var(--fs-sub);
  line-height: 1;
  color: var(--gold);
}
.stats__label {
  margin-top: 8px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: rgba(var(--cream-rgb), 0.5);
}

/* The two portrait shots are a matched pair and stay side by side at every
   width — they read as one unit, so they are never allowed to stack. */
.about__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 420px) {
  .about__media { gap: 8px; }
}
.about__media-wide { grid-column: span 2; }

/* ==========================================================================
   8. Method (Shifting)
   ========================================================================== */

.method { overflow: hidden; padding-block: clamp(10px, 10vw, 20px); }
/* The desert (canopy-view.jpg, used only here) is shown whole from the top of
   the section at full width, not blown up to cover it (client, Oct 2026); its
   lower edge fades into the dark below. */
.method__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0.42;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
  mask-image: linear-gradient(180deg, #000 60%, transparent);
}
/* Light enough for the desert to show (client, Oct 2026), still dark enough
   behind the text. */
.method__veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(10, 8, 6, 0.35), rgba(10, 8, 6, 0.8));
}
.method__inner { position: relative; }

.method__head {
  margin-bottom: clamp(40px, 6vw, 72px);
}
.method__title {
  font-size: var(--fs-display);
  line-height: 1.05;
}
.method__lede {
  margin: 24px 0 0;
  font-size: var(--fs-body);
  line-height: 1.35;
  color: rgba(var(--cream-rgb), 0.75);
}

.method__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.step {
  background: var(--ink-2);
  padding: clamp(26px, 3vw, 40px);
  transition: background-color 0.5s ease;
}
.step:hover { background: #15100a; }
.step__num,
.step .step__num {
  font-family: var(--serif);
  font-size: var(--fs-sub);
  line-height: 1;
  color: rgba(var(--gold-rgb), 0.4);
}
.step__title {
  margin: 16px 0 12px;
  font-weight: 400;
  font-size: 30px;
  color: var(--cream);
}
.step p {
  font-size: var(--fs-small);
  line-height: 1.31;
  color: rgba(var(--cream-rgb), 0.68);
}

.method__areas { margin-top: clamp(34px, 4vw, 56px); }
.method__areas-title {
  margin-bottom: 18px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--gold);
}
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pill {
  padding: 9px 17px;
  border: 1px solid rgba(var(--gold-rgb), 0.28);
  border-radius: 999px;
  background: rgba(10, 8, 6, 0.55);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: rgba(var(--cream-rgb), 0.8);
}
/* The areas around her (client, Oct 2026): the photo runs the full width of
   the page, light background and all, and the areas stand on either side of
   her figure. Phone and tablet: the photo on top, edge to edge, and the areas
   wrapping under it. */
.areas { display: grid; gap: 18px; }
.areas__photo {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  aspect-ratio: 16 / 9;
}
.areas__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% 30%;
}
/* The photo is toned down (client, Oct 2026): at full brightness its pale
   background glared against the dark page. */
.areas__photo { position: relative; }
.areas__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 6, 0.4);
  pointer-events: none;
}
.areas .pills { justify-content: center; }
/* Wide enough for a column of areas on each side of her: the block becomes a
   band as wide as the page and taller than the two columns, the photo fills
   it, and the areas alternate left and right.

   The photo is sized by the band's height and hung by her figure — its
   centre sits 53.5% across the picture — so she always stands in the middle
   of the page, and the middle column is as wide as she is drawn. The band's
   height keeps the picture at least 107.5% of the page width, which is what
   that off-centre hanging needs to still cover both edges. */
@media (min-width: 1280px) {
  /* The heading stays on the dark section, centred over her and a size up,
     so it reads as the band's title. The band itself ends the section, on a
     hairline of gold, with nothing of the section under it. */
  .method { padding-bottom: 0; }
  .method__areas { margin-top: clamp(56px, 6vw, 90px); }
  .method__areas-title {
    margin-bottom: 34px;
    font-size: var(--fs-title);
    text-align: center;
  }
  .areas {
    position: relative;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    min-height: max(760px, 47.2vw);
    padding: 90px 28px 84px;
    grid-template-columns: minmax(0, 1fr) max(590px, 36.5vw) minmax(0, 1fr);
    gap: 12px 0;
    align-items: center;
    align-content: center;
    overflow: hidden;
    border-bottom: 1px solid rgba(var(--gold-rgb), 0.35);
  }
  /* The top of the photo dissolves into the section behind it — a mask, so
     there is no edge and no band of flat colour — while the bottom ends on
     the hairline. */
  .areas__photo {
    position: absolute;
    inset: 0;
    width: auto;
    margin: 0;
    aspect-ratio: auto;
    /* Her hair starts a few pixels below the top of the picture, so the
       picture hangs 160px lower and the fade runs over a strip of its own
       pale sky colour instead of over her head (client, Oct 2026). */
    background: rgb(240, 231, 225);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 160px);
    mask-image: linear-gradient(180deg, transparent 0, #000 160px);
  }
  .areas__photo img {
    position: absolute;
    top: 160px;
    left: 50%;
    width: auto;
    max-width: none;
    height: 100%;
    transform: translateX(-53.5%);
    /* Its own top edge melts into that strip, so there is no seam. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 70px);
    mask-image: linear-gradient(180deg, transparent 0, #000 70px);
  }
  /* On the light photo the areas are solid. */
  .areas .pills { display: contents; }
  .areas .pill {
    position: relative;
    background: rgba(10, 8, 6, 0.82);
    color: var(--cream);
  }
  .areas .pill:nth-child(odd) { grid-column: 1; justify-self: end; }
  .areas .pill:nth-child(even) { grid-column: 3; justify-self: start; }
}

/* ==========================================================================
   9. Products
   ========================================================================== */

.products { padding-bottom: clamp(50px, 7vw, 90px); }

.products__intro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(24px, 4vw, 60px);
  align-items: end;
  margin-bottom: clamp(44px, 6vw, 80px);
}

.paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 14px;
  margin-bottom: 10px;
}
/* Under the four paths: a word for whoever cannot tell yet which is theirs. */
.paths__consult {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  margin-top: clamp(24px, 3vw, 36px);
  padding: clamp(20px, 2.6vw, 30px) clamp(20px, 3vw, 36px);
  border: 1px solid rgba(var(--gold-rgb), 0.35);
  background: linear-gradient(160deg, rgba(var(--gold-rgb), 0.1), transparent);
}
.paths__consult-text {
  flex: 1 1 460px;
  font-size: var(--fs-body);
  line-height: 1.4;
  color: rgba(var(--cream-rgb), 0.8);
}

/* The top band holds the tag of where the path runs; every card keeps it, so
   the step labels line up across the row even where there is no tag. */
.path {
  position: relative;
  display: block;
  padding: 66px 24px 24px;
  border: 1px solid rgba(var(--gold-rgb), 0.25);
  background: linear-gradient(160deg, rgba(var(--gold-rgb), 0.07), transparent);
  color: var(--cream);
  transition: transform 0.5s var(--ease), border-color 0.4s ease;
}
.path:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--gold-rgb), 0.7);
  color: var(--cream);
}
.path--featured {
  border-color: rgba(var(--gold-rgb), 0.5);
  background: linear-gradient(160deg, rgba(var(--gold-rgb), 0.14), transparent);
}
.path--featured:hover { border-color: var(--gold); }
.path__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
/* Card internals are spans (they sit inside an <a>), so they need blockifying. */
.path__title,
.path__more { display: block; }
.path__step {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--gold);
}
.path__num {
  font-family: var(--serif);
  font-size: var(--fs-sub);
  line-height: 1;
  color: rgba(var(--gold-rgb), 0.3);
}
.path__title {
  margin: 14px 0 8px;
  font-weight: 400;
  font-family: var(--serif);
  font-size: 30px;
  color: var(--cream);
}
/* Where the path runs — top left, like the tags on the event cards. */
.path__tags {
  position: absolute;
  top: 20px;
  left: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.path__tags .tag { position: static; }
.path p {
  margin-bottom: 16px;
  font-size: var(--fs-small);
  line-height: 1.28;
  color: rgba(var(--cream-rgb), 0.65);
}
.path__more {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--gold);
}

.group-head {
  scroll-margin-top: 90px;
  display: flex;
  flex-wrap: wrap;   /* long subheadline tags drop to their own line on mobile */
  align-items: baseline;
  gap: 12px 16px;
  margin-bottom: 30px;
}
/* Product groups keep a clamp(56,8vw,110) rhythm between each other; groups
   that directly follow content without its own bottom margin (the tab
   panels) carry the gap themselves. */
.group-head--gap { margin-top: clamp(56px, 8vw, 110px); }
.group-head__num {
  font-family: var(--serif);
  font-size: var(--fs-sub);
  color: rgba(var(--gold-rgb), 0.45);
  line-height: 1;
}
.group-head__title {
  font-size: var(--fs-sub);
  color: var(--cream);
}
.group-head__tag {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: rgba(var(--cream-rgb), 0.45);
}

/* Book cards */

.books {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(16px, 2vw, 26px);
  margin-bottom: clamp(56px, 8vw, 110px);
}
.book {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(var(--gold-rgb), 0.22);
  background: linear-gradient(165deg, rgba(var(--gold-rgb), 0.06), transparent);
  overflow: hidden;
}
/* The picture fills the whole frame at its own proportions — never floated
   on a dark field, never cropped. */
.book__media {
  position: relative;
  overflow: hidden;
}
.book__media img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 1s var(--ease);
}
.book:hover .book__media img { transform: scale(1.03); }
.book__body {
  padding: 26px 26px 8px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* At full width two portrait covers side by side would each stand almost
   900px tall, so from here every book takes a row of its own: the picture on
   the left at its own proportions, the text beside it. */
@media (min-width: 900px) {
  .books { grid-template-columns: 1fr; }
  .book {
    display: grid;
    grid-template-columns: clamp(300px, 34%, 420px) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
  }
  .book__media { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .book__body { grid-column: 2; grid-row: 1; padding: clamp(26px, 3vw, 40px) clamp(26px, 3vw, 40px) 8px; }
  .book .book__foot { grid-column: 2; grid-row: 2; margin: 0 clamp(26px, 3vw, 40px) clamp(26px, 3vw, 40px); }
}
/* On a wide screen the books stand side by side (client, Oct 2026). Each card
   keeps its row — a smaller cover on the left, the text beside it — so the
   covers stay uncropped and neither towers over the other. The format links
   move under the cover, into the space the text column leaves there. */
@media (min-width: 1180px) {
  .books { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .book { grid-template-columns: 38% minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .book__media { grid-row: 1; }
  .book__body { grid-row: 1 / span 2; padding: 28px; }
  .book .book__foot {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    min-width: 0;
    margin: 0;
    padding: 20px 18px 22px;
    border-top: 0;
  }
  .book .book__note { overflow-wrap: break-word; }
}
.book__title {
  margin-bottom: 6px;
  font-weight: 400;
  font-size: var(--fs-title);
  line-height: 1.1;
}
.book__sub {
  margin-bottom: 6px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--gold);
}
.book__author {
  margin-bottom: 18px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: rgba(var(--cream-rgb), 0.5);
}
.book__text {
  margin-bottom: 16px;
  font-size: var(--fs-small);
  line-height: 1.31;
  color: rgba(var(--cream-rgb), 0.7);
}
.book__list { margin-bottom: 16px; }
/* No rule beside the quote — the client took it off in Oct 2026. */
.book__quote {
  margin: 4px 0 20px;
}
.book__quote p {
  font-size: var(--fs-small);
  line-height: 1.31;
  color: rgba(var(--cream-rgb), 0.82);
}
.book__quote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--gold);
}
/* Its own block after the text, so the format links line up across cards. */
.book__foot {
  display: grid;
  gap: 12px;
  margin: 0 26px 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(var(--gold-rgb), 0.18);
}
.book__note {
  font-size: var(--fs-small);
  line-height: 1.31;
  color: rgba(var(--cream-rgb), 0.55);
}
.book__formats {
  display: grid;
  gap: 8px;
}

.tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 12px;
  background: rgba(10, 8, 6, 0.75);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--gold);
}
.tag--solid {
  background: var(--gold);
  color: var(--ink);
  font-weight: 300;
  letter-spacing: var(--ls-label);
}
.tag--corner {
  top: 0;
  right: 0;
  left: auto;
  padding: 7px 14px;
  /* On a card with no picture behind it the dark tag needs an edge to read as one. */
  border-left: 1px solid rgba(var(--gold-rgb), 0.3);
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.3);
}

.row-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid rgba(var(--gold-rgb), 0.28);
  color: var(--cream);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
}
.row-link:hover {
  border-color: var(--gold);
  background: rgba(var(--gold-rgb), 0.1);
  color: var(--cream);
}

/* Tabs ------------------------------------------------------------------- */

/* Lead-in copy above the format switcher. */
.tabs-intro {
  margin-bottom: clamp(34px, 4.5vw, 52px);
}

/* Hand-drawn cue pointing at the switcher — the tabs read as static labels
   otherwise, so nothing signals that the panel below can be changed. */
.switch-hint {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--gold);
  pointer-events: none;
}
.switch-hint__text {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-title);
  font-weight: 400;
  line-height: 1;
  padding-bottom: 7px;
  white-space: nowrap;
}
.switch-hint__arrow {
  flex: none;
  width: clamp(46px, 4.5vw, 64px);
  height: auto;
  animation: nudge 3.2s ease-in-out infinite;
}
@keyframes nudge {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(3px, 5px); }
}

.tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(var(--gold-rgb), 0.22);
  margin-bottom: 30px;
}
.tab {
  padding: 13px 22px;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  background: transparent;
  color: rgba(var(--cream-rgb), 0.65);
  transition: background-color 0.35s ease, color 0.35s ease;
}
.tab:hover { color: var(--cream); }
.tab[aria-selected='true'] {
  background: var(--gold);
  color: var(--ink);
}
.tab--sm { padding: 12px 20px; font-size: var(--fs-label); }

.tabpanel[hidden] { display: none; }

.panel-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.panel-note__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}
.panel-note__dot--pulse { animation: glow 2.4s ease-in-out infinite; }
.panel-note span:last-child {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: rgba(var(--cream-rgb), 0.6);
}

/* Event cards — also used for the recordings, so both groups read the same. */

.events {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(16px, 2vw, 26px);
}
.event {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(var(--gold-rgb), 0.35);
  min-height: 580px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.event__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.event:hover .event__img { transform: scale(1.06); }
/* The recordings are cropped closer and higher (client, Oct 2026): zoomed in
   about a point low in the picture, so the people rise clear of the title and
   the price over the lower half of the card. */
.event--recording .event__img { transform: scale(1.2); transform-origin: 50% 82%; }
.event--recording:hover .event__img { transform: scale(1.26); }
.event__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10, 8, 6, 0.95) 8%, rgba(10, 8, 6, 0.35) 55%, rgba(10, 8, 6, 0.6) 100%);
}
.event__tags {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.event__tags .tag { position: static; }
/* Ends the row, so the tag after it starts a new one at any card width. */
.event__tags-break { flex-basis: 100%; height: 0; }
.event__body { position: relative; padding: 20px; }
.event__title {
  margin-bottom: 8px;
  font-weight: 400;
  font-size: var(--fs-title);
  line-height: 1.05;
}
/* One term per line, the note under them. */
.event__date span { display: block; }
.event__place {
  margin-left: 0.4em;
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--gold);
  white-space: nowrap;
  vertical-align: middle;
}
.event__date {
  margin-bottom: 14px;
  font-size: var(--fs-label);
  /* The line keeps to one row on every card (client, Oct 2026) — an event
     with two dates states both on it — so all cards share this slim tracking
     instead of --ls-label. */
  letter-spacing: 0.02em;
  color: var(--gold);
}
@media (max-width: 560px) {
  .event__body { padding: 24px 22px; }
  .event__date { letter-spacing: 0; }
}
.event__body p {
  margin-bottom: 18px;
  font-size: var(--fs-small);
  line-height: 1.28;
  color: rgba(var(--cream-rgb), 0.8);
}
.event__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--cream-rgb), 0.16);
}
.event__price-label {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: rgba(var(--cream-rgb), 0.5);
}
/* The earlier price, struck through beside the current one — smaller and
   muted, wherever a price is shown. */
/* Red, so the reduction reads at a glance (client, Oct 2026). */
.price-was {
  margin-right: 0.35em;
  font-family: var(--sans);
  font-size: var(--fs-small);
  font-weight: 300;
  color: #e0675c;
  text-decoration-thickness: 1px;
}
.event__price {
  font-family: var(--serif);
  font-size: var(--fs-title);
  font-weight: 400;
  color: var(--gold-soft);
}
/* A recording that is not on sale has no price; the button keeps to the right. */
/* The buttons keep to the right, also on a card without a price. */
.event__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-left: auto;
}

.callout {
  margin-top: 18px;
  padding: 20px 24px;
  border: 1px dashed rgba(var(--gold-rgb), 0.3);
  font-size: var(--fs-small);
  line-height: 1.28;
  color: rgba(var(--cream-rgb), 0.65);
}
/* A plain note, with no box drawn around it. */
.callout--plain {
  padding-inline: 0;
  border: 0;
}

/* Under the event cards: where to go when you cannot come in person. */
/* The note under the events, boxed with its button like a path card. */
.crosslink {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  margin-top: clamp(24px, 3vw, 36px);
  padding: clamp(20px, 2.6vw, 30px) clamp(20px, 3vw, 36px);
  border: 1px solid rgba(var(--gold-rgb), 0.25);
  background: linear-gradient(160deg, rgba(var(--gold-rgb), 0.07), transparent);
}
.crosslink__text {
  flex: 1 1 460px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--cream);
}

/* Recording cards use .event above; only the heading between the featured
   trio and the rest of the library is specific to that section. */
.library__head--between {
  margin: clamp(24px, 3vw, 40px) 0 20px;
  padding-inline: 0;
}

.library { border: 1px solid var(--line); }
.library__head {
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: rgba(var(--cream-rgb), 0.55);
}
.library__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.library__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 19px 22px;
  border-bottom: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
  color: var(--cream);
  font-size: var(--fs-small);
}
.library__link:hover {
  background: rgba(var(--gold-rgb), 0.08);
  color: var(--cream);
}
.library__link--all {
  color: var(--gold);
  letter-spacing: var(--ls-label);
}
.library__link--all:hover { color: var(--gold); }
.library__where {
  color: rgba(var(--cream-rgb), 0.45);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
}
.library__arrow { color: var(--gold); flex: none; }

/* Membership portal panel */

/* Compact summary panel — closes the recordings section without dominating
   it: tighter padding, smaller type, and the photo capped to a landscape
   crop instead of flowing at its full portrait height. */
.portal {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  margin-top: clamp(28px, 4vw, 48px);
  padding: clamp(22px, 3vw, 36px);
  background: linear-gradient(150deg, rgba(var(--gold-rgb), 0.1), transparent 60%);
}
.portal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(22px, 3vw, 40px);
  align-items: center;
}
.portal .frame {
  aspect-ratio: 3 / 2;
  align-self: center;
}
/* Side by side, the photo runs exactly as tall as the text beside it, so it
   ends level with the buttons (client, Oct 2026). The crop runs from her head
   to her hands, kept in view however the frame is cut. */
.portal .frame > img { object-position: 50% 45%; }
@media (min-width: 900px) {
  .portal__grid { grid-template-columns: 1.6fr 1fr; align-items: stretch; }
  .portal .frame { aspect-ratio: auto; align-self: stretch; min-height: 260px; }
  .portal .frame > img { position: absolute; inset: 0; }
}
.portal__label {
  margin-bottom: 12px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--gold);
}
.portal__title {
  margin-bottom: 14px;
  font-size: var(--fs-sub);
  line-height: 1.08;
}
.portal p {
  margin-bottom: 20px;
  font-size: var(--fs-small);
  line-height: 1.28;
  color: rgba(var(--cream-rgb), 0.75);
}

.ticks {
  display: grid;
  gap: 9px;
  margin-bottom: 22px;
}
.tick {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: var(--fs-small);
  color: rgba(var(--cream-rgb), 0.75);
}
.tick__mark { color: var(--gold); flex: none; }

/* Comparison table */

.compare {
  margin-top: clamp(30px, 4vw, 52px);
  overflow-x: auto;
  border: 1px solid var(--line);
}
.compare table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  text-align: left;
}
.compare th,
.compare td {
  padding: 18px 20px;
  vertical-align: top;
}
.compare thead th {
  padding: 16px 20px;
  background: rgba(var(--gold-rgb), 0.08);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-label);
  font-weight: 300;
  letter-spacing: var(--ls-label);
  color: rgba(var(--cream-rgb), 0.5);
}
.compare thead th:first-child { color: var(--gold); }
.compare tbody tr { border-bottom: 1px solid rgba(var(--gold-rgb), 0.12); }
.compare tbody tr:last-child { border-bottom: 0; }
.compare tbody tr.compare__highlight { background: rgba(var(--gold-rgb), 0.06); }
.compare tbody th {
  font-size: var(--fs-label);
  font-weight: 300;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--cream);
}
.compare__link {
  color: inherit;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.4);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.compare__link:hover {
  color: var(--gold);
  border-color: var(--gold);
}
.compare td {
  font-size: var(--fs-small);
  color: rgba(var(--cream-rgb), 0.65);
}
.compare td:last-child { color: var(--gold-soft); }

/* ==========================================================================
   10. Private cooperation
   ========================================================================== */

.private { overflow: hidden; }
/* Anchored to its top, so the sky and the lights on the horizon show (client,
   Oct 2026); the crop falls on the pool at the bottom. */
.private__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  opacity: 0.6;
}
/* An even veil: the resort at dusk shows across the whole section (client,
   Oct 2026), and the cards carry their own background. */
.private__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 8, 6, 0.72), rgba(10, 8, 6, 0.5) 40%, rgba(10, 8, 6, 0.68));
}
.private__inner { position: relative; }

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid rgba(var(--gold-rgb), 0.22);
  background: rgba(10, 8, 6, 0.74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.plan--featured {
  border-color: var(--gold);
  /* The gold tint lies on a dark base, so the photo behind never thins the text. */
  background: linear-gradient(165deg, rgba(var(--gold-rgb), 0.16), rgba(10, 8, 6, 0.4)), rgba(10, 8, 6, 0.72);
  overflow: hidden;
}
.plan__title {
  margin-bottom: 6px;
  font-weight: 400;
  font-size: var(--fs-title);
  line-height: 1.08;
}
/* The price is a paragraph too; without flex: none it would take a share of
   the spare height meant for the text and open a gap under itself. */
.plan__price,
.plan .plan__price {
  flex: none;
  margin-bottom: 18px;
  font-family: var(--serif);
  font-size: var(--fs-title);
  font-weight: 400;
  color: var(--gold-soft);
}
.plan p {
  margin-bottom: 22px;
  font-size: var(--fs-small);
  line-height: 1.31;
  color: rgba(var(--cream-rgb), 0.7);
  flex: 1;
}
.plan__list {
  display: grid;
  gap: 5px;
  margin-bottom: 24px;
  flex: 1;
}
.plan__item {
  display: flex;
  gap: 11px;
  font-size: var(--fs-small);
  line-height: 1.2;
  color: rgba(var(--cream-rgb), 0.78);
}
.plan__bullet { color: var(--gold); flex: none; }

/* ==========================================================================
   11. Testimonials
   ========================================================================== */

.quotes__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.quotes__nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.quotes__all { margin-right: 10px; }
.quotes__btn {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(var(--gold-rgb), 0.35);
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, opacity 0.35s ease;
}
.quotes__btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
.quotes__btn svg { width: 20px; height: 20px; }
.quotes__btn.swiper-button-disabled {
  opacity: 0.3;
  cursor: default;
}
.quotes__btn.swiper-button-disabled:hover {
  background: transparent;
  border-color: rgba(var(--gold-rgb), 0.35);
  color: var(--gold);
}

/* The strip keeps to the container edges like the heading above it; the
   moving text fades out at those edges rather than being cut mid-word. */
.quotes {
  padding-bottom: 6px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}
/* Until Swiper takes over (or if the CDN is unreachable) the strip stays
   swipeable as a plain overflow scroller rather than clipping to two cards. */
.quotes:not(.is-ready) {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.quotes:not(.is-ready) .swiper-wrapper { gap: 44px; }
.quotes:not(.is-ready) .swiper-slide { scroll-snap-align: start; }

.quotes .swiper-wrapper { align-items: stretch; }
.quotes .swiper-slide {
  width: min(86vw, 440px);
  height: auto;
}
.quotes.is-ready { cursor: grab; }
.quotes.is-ready:active { cursor: grabbing; }

/* Continuous crawl: each slide transition must run at constant speed —
   with the default ease the strip would surge and settle once per slide. */
.quotes.is-ready { --swiper-wrapper-transition-timing-function: linear; }
.quotes.is-ready .swiper-wrapper { transition-timing-function: linear; }

/* Pure text slides — no card border or background, just the quote. */
.quote {
  height: 100%;
  padding: 0 2px;
  display: flex;
  flex-direction: column;
}
.quote__mark {
  font-family: var(--serif);
  font-size: 56px;
  line-height: 0.6;
  color: rgba(var(--gold-rgb), 0.45);
}
.quote p {
  margin-top: 20px;
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.39;
  color: rgba(var(--cream-rgb), 0.82);
  flex: 1;
}
.quote__by {
  margin-top: 20px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--gold);
  font-style: normal;
}

/* A testimonial video of our own plays in the same frame as a YouTube one. */
.vcard__file {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--ink-3);
}

/* Testimonials page: one section per product. */
.tgroups__channel { margin-top: 28px; }
.tgroup { scroll-margin-top: 80px; }
.tgroup__all { margin-top: clamp(24px, 3vw, 36px); }
.tgroup__block { margin-top: clamp(28px, 4vw, 48px); }
.tgroup .group-head + .tgroup__block { margin-top: 0; }

/* Reels — vertical clips of our own and embedded Instagram posts. */
.reels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
}
.reel { margin: 0; }
/* One 9:16 frame for every reel, clip or Instagram post alike. */
.reel__frame {
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--ink-3);
}
.reel__file,
.reel__instagram {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.reel__file { object-fit: cover; }
.reel__instagram { background: #fff; }
.reel__caption {
  margin-top: 12px;
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.16;
  color: var(--muted);
}

/* Video svedectvá — intro row + facade grid */
.videos { margin-top: clamp(48px, 7vw, 96px); }
.videos__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px 32px;
  margin-bottom: clamp(24px, 3.5vw, 44px);
}
/* No width cap: the line fits on one row, and the buttons drop below it
   when the two do not fit side by side. */
.videos__head .video-copy p { margin-bottom: 0; }
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(16px, 2.2vw, 26px) clamp(14px, 2vw, 22px);
}
.vcard { margin: 0; }
.vcard__caption {
  margin-top: 12px;
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.16;
  color: var(--muted);
}
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(var(--gold-rgb), 0.25);
  background: var(--ink-4);
}
.video__btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
}
.video__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  transition: opacity 0.5s ease, transform 1s var(--ease);
}
.video__btn:hover img { opacity: 0.8; transform: scale(1.03); }
.video__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--gold-rgb), 0.6);
  border-radius: 50%;
  background: rgba(10, 8, 6, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--gold);
  font-size: 22px;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.video__btn:hover .video__icon {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-copy__label {
  margin-bottom: 14px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--gold);
}
.video-copy__title {
  margin-bottom: 16px;
  font-size: var(--fs-sub);
  line-height: 1.08;
}
.video-copy p {
  margin-bottom: 24px;
  font-size: var(--fs-body);
  line-height: 1.35;
  color: var(--muted);
}
.link-underline {
  display: inline-flex;
  align-items: center;
  padding: 15px 24px;
  color: var(--gold);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.4);
}

/* ==========================================================================
   12. Gallery
   ========================================================================== */

/* The title gets the full width on a line of its own and the category
   switcher sits underneath — sharing a row forced the heading onto two
   lines on desktop. */
.gallery__head {
  display: grid;
  gap: 22px;
  margin-bottom: 30px;
}
.gallery__title {
  font-size: var(--fs-display);
  line-height: 1.04;
}
.gallery__head .tabs { margin-bottom: 0; }

/* A phone swipes through every photo of the tab (client, Oct 2026); a wider
   screen shows one row of four, the fourth telling how many more the
   lightbox holds. A tab with fewer photos keeps the same tile size. */
.gallery__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-inline: calc(var(--pad-x) * -1);
  padding-inline: var(--pad-x);
  scroll-padding-inline: var(--pad-x);
}
.gallery__grid::-webkit-scrollbar { display: none; }
@media (min-width: 760px) {
  .gallery__grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .gallery__grid .shot:nth-child(n + 5) { display: none; }
}
.shot {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-3);
  cursor: zoom-in;
  scroll-snap-align: start;
}
.shot:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* "+3" over the last tile of the row — only where the row hides the rest. */
.shot__more { display: none; }
@media (min-width: 760px) {
  .shot__more {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(10, 8, 6, 0.55);
    font-family: var(--serif);
    font-size: var(--fs-sub);
    color: var(--cream);
  }
}

/* The lightbox: one photo at a time over the dimmed page. */
.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cream);
}
.lightbox::backdrop { background: rgba(6, 5, 4, 0.94); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__figure {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin: 0;
  padding: 64px 16px 56px;
}
.lightbox__img {
  max-width: min(100%, 1400px);
  max-height: calc(100dvh - 150px);
  width: auto;
  height: auto;
  object-fit: contain;
  touch-action: pan-y;
}
.lightbox__caption,
.lightbox__count {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: rgba(var(--cream-rgb), 0.7);
}
.lightbox__count {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 20px;
  margin: 0;
  text-align: center;
}
.lightbox__btn,
.lightbox__close {
  position: fixed;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(var(--gold-rgb), 0.4);
  border-radius: 50%;
  background: rgba(10, 8, 6, 0.6);
  color: var(--cream);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.lightbox__btn:hover,
.lightbox__close:hover { border-color: var(--gold); color: var(--gold); }
.lightbox__btn { top: 50%; transform: translateY(-50%); }
.lightbox__btn--prev { left: 16px; }
.lightbox__btn--next { right: 16px; }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__btn[hidden] { display: none; }
@media (max-width: 759px) {
  .lightbox__btn { top: auto; bottom: 8px; transform: none; }
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.shot:hover img { transform: scale(1.07); }
.shot__label {
  position: absolute;
  left: 14px;
  bottom: 14px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--cream);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
}

/* ==========================================================================
   13. FAQ
   ========================================================================== */

.faq__title { margin-bottom: clamp(30px, 4vw, 54px); font-size: var(--fs-sub); }
.faq__list { border-top: 1px solid rgba(var(--gold-rgb), 0.18); }
.faq__item { border-bottom: 1px solid rgba(var(--gold-rgb), 0.18); }

.faq__q { margin: 0; font-size: inherit; font-weight: inherit; }
.faq__btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--cream);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.39;
  transition: color 0.3s ease;
}
.faq__btn:hover { color: var(--gold); }
.faq__icon {
  flex: none;
  font-family: var(--sans);
  font-size: 20px;
  line-height: 1;
  color: var(--gold);
}
.faq__icon::before { content: '+'; }
.faq__btn[aria-expanded='true'] .faq__icon::before { content: '\2212'; }

.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.45s var(--ease), visibility 0s linear 0.45s;
}
.faq__item.is-open .faq__answer {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.45s var(--ease), visibility 0s;
}
.faq__answer > div { overflow: hidden; }
.faq__answer p {
  padding-bottom: 24px;
  font-size: var(--fs-small);
  line-height: 1.39;
  color: var(--muted);
}

/* ==========================================================================
   14. CTA, Instagram, footer, FAB
   ========================================================================== */

.cta {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(56px, 7vw, 100px) var(--pad-x);
  overflow: hidden;
}
.cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta__veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 55%, rgba(10, 8, 6, 0.62), rgba(10, 8, 6, 0.94));
}
.cta__inner {
  position: relative;
  max-width: 900px;
}
.cta__quote {
  font-style: italic;
  font-size: var(--fs-display);
  line-height: 1.1;
}
.cta__source {
  margin-top: 18px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: rgba(var(--cream-rgb), 0.55);
}
.cta__text {
  max-width: 600px;
  margin: 34px auto 0;
  font-size: var(--fs-body);
  line-height: 1.35;
  color: rgba(var(--cream-rgb), 0.8);
}
.cta .btn-row { margin-top: 38px; }

.social { padding: clamp(50px, 7vw, 90px) var(--pad-x) 0; }
.social__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px 32px;
  margin-bottom: 28px;
}
.social__title {
  display: flex;
  align-items: center;
  gap: 0.28em;
  font-size: var(--fs-display);
  line-height: 1.04;
  letter-spacing: var(--ls-display);
  color: var(--cream);
}
.icon-instagram {
  flex: none;
  width: 0.78em;
  height: 0.78em;
  color: var(--gold);
}
.social__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(45%, 150px), 1fr));
  gap: 8px;
}
.social__tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--ink-3);
}
.social__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  transition: opacity 0.5s ease, transform 1s var(--ease);
}
.social__tile:hover img { opacity: 1; transform: scale(1.06); }

.footer {
  position: relative;
  z-index: 6;
  background: var(--ink);
  padding: clamp(50px, 7vw, 90px) var(--pad-x) 40px;
  border-top: 1px solid rgba(var(--gold-rgb), 0.16);
  margin-top: clamp(50px, 7vw, 90px);
}
.footer__grid {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: clamp(28px, 4vw, 54px);
}
.footer__brand { margin-bottom: 18px; }
.footer__about {
  font-size: var(--fs-small);
  line-height: 1.31;
  color: rgba(var(--cream-rgb), 0.55);
  max-width: 34ch;
}
.footer__label {
  margin-bottom: 16px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--gold);
}
.footer__links { display: grid; gap: 10px; }
.footer__bar {
  max-width: var(--maxw);
  margin: clamp(38px, 5vw, 60px) auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(var(--gold-rgb), 0.14);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.footer__fine {
  font-size: var(--fs-label);
  color: rgba(var(--cream-rgb), 0.4);
}
a.footer__fine:hover { color: var(--gold); }

.fab {
  position: fixed;
  right: clamp(14px, 2.5vw, 28px);
  bottom: clamp(14px, 2.5vw, 28px);
  z-index: 118;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.fab.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Kept compact at the client's request (Sep 2026). The tighter tracking is the
   one deliberate exception to --ls-label: the label is long, and at full
   tracking the button covered three quarters of a phone's width. */
.fab__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(10, 8, 6, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--gold-rgb), 0.35);
  color: var(--cream);
  font-size: var(--fs-label);
  font-weight: 300;
  letter-spacing: 0.12em;
}
.fab__link:hover { border-color: var(--gold); color: var(--gold); }
.fab__link--solid {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  font-weight: 300;
  box-shadow: 0 8px 24px rgba(var(--gold-rgb), 0.22);
}
.fab__link--solid:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--ink); }

/* ==========================================================================
   Scroll reveal
   `is-armed` is added by JS only to elements still below the fold, so with
   JS disabled nothing is ever hidden and there is no flash of blank content.
   ========================================================================== */

.reveal {
  transition:
    opacity 0.95s var(--ease) var(--rv-delay, 0s),
    transform 0.95s var(--ease) var(--rv-delay, 0s),
    filter 0.95s ease var(--rv-delay, 0s);
}
.reveal.is-armed {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(5px);
}
.reveal.is-armed.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

.reveal--1 { --rv-delay: 0.09s; }
.reveal--2 { --rv-delay: 0.18s; }
.reveal--3 { --rv-delay: 0.27s; }
.reveal--4 { --rv-delay: 0.36s; }
.reveal--5 { --rv-delay: 0.45s; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* The links need about 1 400px beside the logo and the buttons (seven links and
   the Petronela NOW logo since Oct 2026); below that
   they move to the burger menu rather than squeeze the logo or wrap. */
@media (max-width: 1400px) {
  .nav { display: none; }
  .burger { display: flex; }
}

@media (max-width: 980px) {
  /* both header buttons live in the burger menu from here down */
  .header__member { display: none; }
}

@media (max-width: 760px) {
  .stats { grid-template-columns: 1fr; gap: 20px; }
  .header__cta { display: none; }
}

@media (max-width: 520px) {
  .menu__link { font-size: var(--fs-title);
  font-weight: 400; }
}

@media (max-width: 880px) {
  .hero__book-text { margin-left: auto; margin-right: auto; }
}


/* ==========================================================================
   Reduced motion — hero degrades to a static, fully readable layout
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal.is-armed {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .hero { height: auto; }
  .hero__stage {
    position: relative;
    height: auto;
    padding: clamp(120px, 18vh, 200px) var(--pad-x) var(--pad-y);
  }
  .hero__ambient,
  .hero__scene,
  .hero__hint { display: none; }
  .hero__intro {
    position: relative;
    inset: auto;
    padding: 0;
  }
  .hero__book-copy {
    position: relative;
    inset: auto;
    opacity: 1;
    pointer-events: auto;
    max-width: 640px;
    margin: clamp(48px, 8vw, 90px) auto 0;
    text-align: center;
  }
  .hero__book-copy .hero__row { justify-content: center; }
  .hero__book-text { margin-inline: auto; }
}

/* ==========================================================================
   Product subpages (produkt/*.html)
   Reuses the site system (.section, .btn, .ticks, .quote, .frame, .tag…);
   pp-* covers only what a product detail needs on top of it.
   ========================================================================== */

.pp-top {
  padding: calc(75px + clamp(18px, 3vw, 34px)) var(--pad-x) 0;
}
.pp-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: rgba(var(--cream-rgb), 0.55);
}
.pp-back:hover { color: var(--gold); }

.pp-hero { padding: clamp(26px, 4vw, 54px) var(--pad-x) clamp(28px, 4vw, 52px); }
/* The top of a product page reads at one size: the note above the type label
   matches the label, and the facts under the price match the lede. */
.pp-hero .panel-note span:not(.panel-note__dot) {
  font-size: 17px;
  letter-spacing: var(--ls-label);
}
.pp-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
@media (min-width: 940px) {
  .pp-hero__grid { grid-template-columns: minmax(0, 460px) 1fr; }
}

.pp-media {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #241a10, #0f0b07);
}
.pp-media--photo { aspect-ratio: 4 / 5; }
.pp-media--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Poster artwork is shown whole at its own proportions, filling the column —
   no dark field around it. */
.pp-media--poster { background: none; }
.pp-media--poster img {
  display: block;
  width: 100%;
  height: auto;
}

.pp-title {
  margin: 14px 0 10px;
  font-size: var(--fs-display);
  line-height: 1.04;
}
.pp-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-title);
  font-weight: 400;
  color: var(--gold-soft);
  line-height: 1.3;
}
.pp-lede {
  max-width: 62ch;
  margin-top: 20px;
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.35;
  color: rgba(var(--cream-rgb), 0.78);
}

.pp-price-box {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 18px;
  margin-top: clamp(20px, 2.5vw, 30px);
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pp-price {
  font-family: var(--serif);
  font-size: var(--fs-sub);
  line-height: 1;
  color: var(--gold-soft);
}
.pp-price-note {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: rgba(var(--cream-rgb), 0.5);
}

.pp-meta {
  display: grid;
  gap: 9px;
  margin-top: 20px;
}
.pp-meta div {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: var(--fs-body);
  font-weight: 300;
  color: rgba(var(--cream-rgb), 0.78);
}
.pp-meta b {
  flex: none;
  min-width: 96px;
  font-weight: 300;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--gold);
}

.pp-ctas { margin-top: clamp(24px, 3vw, 34px); }

.pp-section { padding: clamp(20px, 6vw, 40px) var(--pad-x); }
.pp-section--tight { padding-block: clamp(28px, 4vw, 52px); }
.pp-h2 {
  margin-bottom: clamp(18px, 2.5vw, 30px);
  font-size: var(--fs-sub);
  line-height: 1.1;
}
.pp-prose {
  max-width: 74ch;
  display: grid;
  gap: 14px;
}
.pp-prose p {
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.39;
  color: rgba(var(--cream-rgb), 0.78);
}
/* Terms and privacy: long legal text, set for reading. */
.legal__title { margin-bottom: clamp(24px, 3vw, 40px); font-size: var(--fs-sub); }
.legal {
  max-width: 80ch;
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(var(--cream-rgb), 0.8);
}
.legal p,
.legal ul,
.legal ol { margin-bottom: 14px; }
.legal ul,
.legal ol { padding-left: 1.4em; }
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal li { margin-bottom: 6px; }
.legal h3 { margin: 30px 0 12px; font-size: var(--fs-title); }
.legal strong { font-weight: 500; color: var(--cream); }
.legal a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* Contact, at the foot of the one-pager: details on the left, the form on
   the right. */
.contact__link {
  color: var(--cream);
  text-decoration: underline;
  text-decoration-color: rgba(var(--gold-rgb), 0.6);
  text-underline-offset: 4px;
}
.contact__link:hover { color: var(--gold); }
.contact__grid {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
}
@media (min-width: 900px) {
  .contact__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
}
.contact__title { margin-bottom: 18px; font-size: var(--fs-sub); }
.contact__facts {
  display: grid;
  gap: 18px;
  margin-top: 30px;
}
.contact__facts dt {
  margin-bottom: 4px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--gold);
}
.contact__facts dd {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.4;
  color: rgba(var(--cream-rgb), 0.85);
}
.contact__panel {
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  background: rgba(10, 8, 6, 0.5);
}
.contact__panel .field:first-child,
.contact__row .field { margin-top: 0; }
.contact__row {
  display: grid;
  gap: 18px;
}
@media (min-width: 600px) {
  .contact__row { grid-template-columns: 1fr 1fr; }
}
.contact__panel textarea.input { resize: vertical; min-height: 130px; }
.contact__panel .check { align-items: flex-start; }
.contact__panel .check input { margin-top: 3px; flex: none; }
.contact__submit { margin-top: 24px; }
.contact__sent {
  font-family: var(--serif);
  font-size: var(--fs-title);
  color: var(--cream);
}
/* The bot trap: out of sight and out of the tab order. */
.contact__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pp-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 10px clamp(24px, 3vw, 48px);
}
.pp-box {
  border: 1px solid rgba(var(--gold-rgb), 0.24);
  background: rgba(var(--gold-rgb), 0.04);
  padding: clamp(20px, 2.6vw, 30px);
}
.pp-box + .pp-box { margin-top: 14px; }
.pp-box .ticks { margin-bottom: 0; }
.pp-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 14px;
}
.pp-boxes .pp-box + .pp-box { margin-top: 0; }
.pp-box__label {
  margin-bottom: 12px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--gold);
}

.pp-tiers { display: grid; gap: 8px; }
.pp-tier {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-small);
  font-weight: 300;
  color: rgba(var(--cream-rgb), 0.78);
}
.pp-tier:last-child { border-bottom: 0; }
.pp-tier strong {
  font-family: var(--serif);
  font-size: var(--fs-title);
  font-weight: 400;
  color: var(--gold-soft);
  white-space: nowrap;
}

.pp-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 12px;
}
.pp-gallery .frame { aspect-ratio: 4 / 3; }

.pp-banner {
  padding: clamp(32px, 4vw, 56px) var(--pad-x);
  text-align: center;
}
.pp-banner blockquote {
  max-width: 860px;
  margin: 0 auto;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-sub);
  line-height: 1.5;
  color: rgba(var(--cream-rgb), 0.88);
}
.pp-banner cite {
  display: block;
  margin-top: 16px;
  font-family: var(--sans);
  font-style: normal;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--gold);
}

.pp-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(24px, 3.5vw, 54px);
}

.pp-bio__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 860px) {
  .pp-bio__grid { grid-template-columns: 320px 1fr; }
}
.pp-bio__grid .frame { aspect-ratio: 4 / 5; }

/* Short at the bottom: the footer brings its own space. */
.pp-closing {
  padding: clamp(36px, 4.5vw, 60px) var(--pad-x) clamp(8px, 1.5vw, 20px);
  text-align: center;
}
.pp-closing + .footer { margin-top: clamp(28px, 3vw, 44px); }
/* The box reads left to right like the one at the top of the page. */
.pp-closing .buybox {
  margin-inline: auto;
  text-align: left;
}
.pp-closing .pp-h2 { max-width: 22ch; margin-inline: auto; }
.pp-closing .pp-price-box {
  justify-content: center;
  border: 0;
  padding: 0;
  margin-top: 10px;
}
.pp-closing .btn-row { margin-top: 26px; }

/* ==========================================================================
   Auth & admin (Laravel Blade views)
   Same design system as the site; forms get their own field primitives.
   ========================================================================== */

.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: calc(75px + clamp(28px, 5vh, 56px)) var(--pad-x) clamp(40px, 7vh, 70px);
}
.auth__card {
  width: min(100%, 480px);
  border: 1px solid rgba(var(--gold-rgb), 0.28);
  background: linear-gradient(165deg, rgba(var(--gold-rgb), 0.07), rgba(10, 8, 6, 0.4));
  padding: clamp(26px, 5vw, 44px);
}
.auth__eyebrow { margin-bottom: 14px; }
.auth__title {
  font-size: var(--fs-sub);
  line-height: 1.1;
}
.auth__sub {
  margin-top: 10px;
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.2;
  color: var(--muted);
}
.auth__form { margin-top: 6px; }

.field { display: block; margin-top: 18px; }
.field__label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--gold);
}
.input {
  width: 100%;
  padding: 13px 14px;
  background: rgba(var(--cream-rgb), 0.045);
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  border-radius: 0;
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--fs-body);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.input::placeholder { color: rgba(var(--cream-rgb), 0.35); }
.input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(var(--gold-rgb), 0.07);
}
.input.is-invalid { border-color: rgba(217, 122, 122, 0.7); }
.field__error {
  display: block;
  margin-top: 7px;
  font-size: var(--fs-small);
  font-weight: 300;
  color: #d99a8c;
}

.check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--muted);
  cursor: pointer;
}
.check input {
  width: 15px;
  height: 15px;
  accent-color: var(--gold);
}

.auth__actions {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}
.auth__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 18px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-small);
  font-weight: 300;
}
.auth__links a { color: rgba(var(--cream-rgb), 0.6); }
.auth__links a:hover { color: var(--gold); }

.flash {
  margin-bottom: 18px;
  padding: 13px 16px;
  border: 1px solid rgba(var(--gold-rgb), 0.35);
  background: rgba(var(--gold-rgb), 0.08);
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--gold-soft);
}

/* header user chip (layout) */
.userchip {
  display: flex;
  align-items: center;
  gap: 14px;
}
.userchip__name {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: rgba(var(--cream-rgb), 0.7);
}
.userchip form { display: inline; }
.userchip button.header__cta { cursor: pointer; }

/* admin dashboard */
.admin {
  min-height: 72vh;
  padding: calc(75px + clamp(28px, 5vw, 56px)) var(--pad-x) clamp(50px, 7vw, 90px);
}
.admin__hello {
  margin: 6px 0 8px;
  font-size: var(--fs-sub);
  line-height: 1.06;
}
.admin__sub {
  max-width: 60ch;
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.31;
  color: var(--muted);
}
.admin .paths { margin-top: clamp(30px, 4vw, 48px); margin-bottom: 0; }

/* ---- members: stats strip ---- */
.mystats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: clamp(26px, 3.5vw, 40px);
  border: 1px solid var(--line);
  background: rgba(var(--gold-rgb), 0.03);
}
.mystats__item {
  flex: 1 1 150px;
  padding: 20px 24px;
  border-right: 1px solid var(--line-soft);
}
.mystats__item:last-child { border-right: 0; }
.mystats__value {
  font-family: var(--serif);
  font-size: var(--fs-sub);
  line-height: 1;
  color: var(--gold);
}
.mystats__label {
  margin-top: 8px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: rgba(var(--cream-rgb), 0.5);
}

/* ---- members: product cards ---- */
.mycourses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(16px, 2.2vw, 24px);
  margin-top: clamp(24px, 3vw, 34px);
}
.mycourse {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(var(--gold-rgb), 0.24);
  background: linear-gradient(165deg, rgba(var(--gold-rgb), 0.06), transparent);
  color: var(--cream);
  transition: transform 0.5s var(--ease), border-color 0.4s ease;
}
.mycourse:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--gold-rgb), 0.65);
  color: var(--cream);
}
/* The picture fills the frame — no dark field around it. 3:4 matches most of
   the posters, so the crop is slight; every card in the grid stays the same
   height. The image is absolutely placed so a tall poster cannot stretch the
   card: aspect-ratio alone loses to content height inside a flex column. */
.mycourse__media {
  position: relative;
  flex: none;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--ink-3);
}
.mycourse__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.mycourse:hover .mycourse__media img { transform: scale(1.04); }
.mycourse__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px;
}
.mycourse__title {
  margin-bottom: 12px;
  font-weight: 400;
  font-size: var(--fs-title);
  line-height: 1.15;
}
.mycourse__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.chip {
  padding: 5px 11px;
  border: 1px solid rgba(var(--gold-rgb), 0.25);
  border-radius: 999px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: rgba(var(--cream-rgb), 0.7);
}
.mycourse__go {
  margin-top: auto;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--gold);
}
.mycourse__expiry {
  margin-top: 10px;
  font-size: var(--fs-label);
  font-weight: 300;
  color: rgba(217, 154, 140, 0.9);
}

.empty-state {
  margin-top: clamp(28px, 4vw, 46px);
  padding: clamp(28px, 4vw, 48px);
  border: 1px dashed rgba(var(--gold-rgb), 0.3);
  text-align: center;
}
.empty-state p {
  max-width: 52ch;
  margin: 0 auto 22px;
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.31;
  color: var(--muted);
}

/* ---- members: course header ---- */
.course-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  margin-bottom: clamp(26px, 4vw, 44px);
}
@media (min-width: 760px) {
  .course-head { grid-template-columns: 150px 1fr; }
}
.course-head__poster {
  border: 1px solid rgba(var(--gold-rgb), 0.2);
}
.course-head__poster img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- members: the player + playlist ---- */
.course {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.5vw, 30px);
  align-items: start;
}
@media (min-width: 1000px) {
  .course { grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); }
  .course__list { max-height: 70vh; overflow-y: auto; }
}

.stage {
  position: sticky;
  top: 92px;
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  background: #050403;
}
.stage__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.stage__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.stage__placeholder {
  padding: clamp(20px, 4vw, 40px);
  text-align: center;
}
.stage__placeholder .video__icon {
  position: static;
  transform: none;
  margin: 0 auto 16px;
}
.stage__placeholder p {
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--muted);
}
.stage__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
}
.stage__title {
  font-family: var(--serif);
  font-size: var(--fs-title);
  font-weight: 400;
  color: var(--cream);
}
.stage__meta {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: rgba(var(--cream-rgb), 0.5);
}
.stage__ext {
  margin-left: auto;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: rgba(var(--gold-rgb), 0.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.3);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.stage__ext:hover {
  color: var(--gold);
  border-color: var(--gold);
}

.course__list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

/* ---- members: content rows ---- */
.lessons {
  display: grid;
  gap: 8px;
}
.lesson {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  background: rgba(var(--gold-rgb), 0.03);
  color: var(--cream);
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: border-color 0.35s ease, background-color 0.35s ease;
}
.lesson:hover {
  border-color: rgba(var(--gold-rgb), 0.6);
  background: rgba(var(--gold-rgb), 0.07);
  color: var(--cream);
}
.lesson.is-active {
  border-color: var(--gold);
  background: rgba(var(--gold-rgb), 0.12);
}
.lesson__num {
  flex: none;
  width: 30px;
  font-family: var(--serif);
  font-size: var(--fs-title);
  font-weight: 400;
  color: rgba(var(--gold-rgb), 0.55);
}
.lesson.is-active .lesson__num { color: var(--gold); }
.lesson__main { flex: 1; min-width: 0; }
.lesson__title {
  display: block;
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.05;
}
.lesson__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 5px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: rgba(var(--cream-rgb), 0.45);
}
.lesson__kind { color: var(--gold); }
.lesson__icon {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--gold-rgb), 0.35);
  border-radius: 50%;
  color: var(--gold);
  font-size: 11px;
  padding-left: 2px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.lesson:hover .lesson__icon,
.lesson.is-active .lesson__icon {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}

.materials { margin-top: clamp(34px, 4.5vw, 56px); }
.materials .lessons {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.member-note {
  margin-top: clamp(26px, 4vw, 44px);
}

/* slim footer for app pages */
.footer--slim {
  margin-top: 0;
  padding: 26px var(--pad-x);
}
.footer--slim .footer__bar {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  .header, .menu, .fab, .progress, .hero__scene, .hero__ambient, .marquee, .quotes { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { height: auto; }
  .hero__stage { position: static; height: auto; }
}

/* ======================================================================
   Shop — basket, checkout, orders, profile
   ====================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.shop { padding-top: clamp(110px, 12vw, 160px); }

.flash--error {
  border-color: rgba(217, 122, 122, 0.5);
  background: rgba(217, 122, 122, 0.08);
  color: #e8b3a6;
}
.flash ul { margin: 6px 0 0; padding-left: 18px; }
.flash li { margin-top: 3px; }

.chip--gold {
  border-color: rgba(var(--gold-rgb), 0.55);
  background: rgba(var(--gold-rgb), 0.12);
  color: var(--gold-soft);
}

/* --- Progress: basket, order, payment --- */

.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0 0 clamp(26px, 4vw, 44px);
  padding: 0;
  list-style: none;
}
.steps__item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: rgba(var(--cream-rgb), 0.4);
}
.steps__num {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  border-radius: 999px;
  font-size: var(--fs-label);
}
.steps__item--current { color: var(--gold-soft); }
.steps__item--current .steps__num {
  border-color: var(--gold);
  background: rgba(var(--gold-rgb), 0.14);
  color: var(--gold);
}
.steps__item--done { color: rgba(var(--cream-rgb), 0.62); }
.steps__item--done .steps__num {
  border-color: rgba(var(--gold-rgb), 0.5);
  color: var(--gold);
}

/* --- Buy box on product pages --- */

/* Starts on the same line as the text above it. */
.buybox {
  margin: 26px 0 22px;
  padding: 20px;
  border: 1px solid var(--line);
  background: rgba(var(--cream-rgb), 0.03);
  max-width: 600px;
}
.buybox__label {
  margin: 0 0 12px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--gold);
}
.buybox__options { display: grid; gap: 10px; margin-bottom: 18px; }
.buyopt {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 15px;
  border: 1px solid var(--line-soft);
  cursor: pointer;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.buyopt:hover { border-color: rgba(var(--gold-rgb), 0.4); }
.buyopt input {
  margin-top: 3px;
  width: 15px;
  height: 15px;
  accent-color: var(--gold);
  flex: none;
}
.buyopt:has(input:checked) {
  border-color: var(--gold);
  background: rgba(var(--gold-rgb), 0.08);
}
.buyopt__body { display: block; flex: 1; min-width: 0; }
.buyopt__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 14px;
}
.buyopt__name {
  font-family: var(--serif);
  font-size: var(--fs-title);
  font-weight: 400;
  color: var(--cream);
}
.buyopt__price {
  font-size: var(--fs-body);
  font-weight: 300;
  color: var(--gold-soft);
  white-space: nowrap;
}
.buyopt__note,
.buyopt__vat {
  display: block;
  margin-top: 5px;
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--muted-2);
}
.buybox__single { margin-bottom: 16px; }
.buybox__price {
  display: block;
  font-family: var(--serif);
  font-size: var(--fs-sub);
  color: var(--gold-soft);
}
.buybox__vat,
.buybox__note {
  display: block;
  margin-top: 5px;
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--muted-2);
}
.buybox .btn { width: 100%; justify-content: center; }

/* --- Basket --- */

.cart {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}
@media (min-width: 900px) {
  .cart { grid-template-columns: minmax(0, 1fr) 340px; }
}

.cart__lines { display: grid; gap: 12px; }
.cartline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 16px;
  align-items: center;
  padding: 17px 18px;
  border: 1px solid var(--line-soft);
  background: rgba(var(--cream-rgb), 0.025);
}
@media (min-width: 620px) {
  .cartline { grid-template-columns: minmax(0, 1fr) 84px 130px 30px; }
}
.cartline__main { min-width: 0; }
.cartline__name {
  display: block;
  font-family: var(--serif);
  font-size: var(--fs-title);
  font-weight: 400;
  color: var(--cream);
  text-decoration: none;
}
.cartline__name:hover { color: var(--gold-soft); }
.cartline__variant {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 7px 0 0;
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--muted-2);
}
.cartline__note {
  margin: 6px 0 0;
  font-size: var(--fs-small);
  font-weight: 300;
  color: rgba(var(--cream-rgb), 0.42);
}
.cartline__qty input {
  width: 100%;
  max-width: 74px;
  padding: 8px 9px;
  background: rgba(var(--cream-rgb), 0.05);
  border: 1px solid rgba(var(--gold-rgb), 0.28);
  color: var(--cream);
  font-family: var(--sans);
  font-size: var(--fs-small);
  text-align: center;
}
.cartline__qty input:focus { outline: none; border-color: var(--gold); }
.cartline__qtyfixed { font-size: var(--fs-small); color: var(--muted-2); }
.cartline__price { text-align: right; }
.cartline__price {
  display: block;
  font-size: var(--fs-body);
  color: var(--gold-soft);
  white-space: nowrap;
}
.cartline__vat {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-label);
  font-weight: 300;
  color: rgba(var(--cream-rgb), 0.42);
  white-space: nowrap;
}
.cartline__remove {
  width: 30px;
  height: 30px;
  background: none;
  border: 1px solid transparent;
  color: rgba(var(--cream-rgb), 0.4);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.cartline__remove:hover { color: var(--gold); border-color: rgba(var(--gold-rgb), 0.35); }

/* --- Order summary panel --- */

.summary {
  padding: 22px;
  border: 1px solid var(--line);
  background: rgba(var(--cream-rgb), 0.035);
}
@media (min-width: 900px) {
  .summary { position: sticky; top: 100px; }
}
.summary__title {
  margin: 0 0 16px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--gold);
}
.summary__line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 11px;
  margin-bottom: 11px;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--muted);
}
.summary__line-name { min-width: 0; }
.summary__line-name em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: var(--fs-label);
  color: rgba(var(--cream-rgb), 0.42);
}
.summary__row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 9px;
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--muted);
}
.summary__row--muted { color: rgba(var(--cream-rgb), 0.45); font-size: var(--fs-small); }
.summary__row--total {
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-size: var(--fs-title);
  font-weight: 400;
  color: var(--cream);
}
.summary__row--total span:last-child { color: var(--gold-soft); }
.summary__cta {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
}
.summary__hint {
  margin: 12px 0 0;
  font-size: var(--fs-label);
  font-weight: 300;
  line-height: 1.16;
  color: rgba(var(--cream-rgb), 0.42);
}
.summary__back {
  display: block;
  margin-top: 14px;
  text-align: center;
  font-size: var(--fs-small);
}

/* --- Checkout form --- */

.checkout {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}
@media (min-width: 900px) {
  .checkout { grid-template-columns: minmax(0, 1fr) 340px; }
}

.field-group {
  margin: 0 0 26px;
  padding: 0;
  border: 0;
}
.field-group__title {
  padding: 0;
  margin-bottom: 4px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--gold);
}
.field-group__note {
  margin: 10px 0 0;
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.2;
  color: var(--muted-2);
}
.field > label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--fs-body);
  color: var(--muted);
}
.field__opt {
  margin-left: 6px;
  font-size: var(--fs-label);
  font-weight: 300;
  letter-spacing: var(--ls-label);
  color: rgba(var(--cream-rgb), 0.35);
}
.field > input,
.field > select,
.field > textarea {
  width: 100%;
  padding: 13px 14px;
  background: rgba(var(--cream-rgb), 0.045);
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  border-radius: 0;
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--fs-body);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.field > textarea { resize: vertical; min-height: 84px; }
.field > input:focus,
.field > select:focus,
.field > textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(var(--gold-rgb), 0.07);
}
.field > select option { background: var(--ink-2); color: var(--cream); }
.field__hint {
  margin: 7px 0 0;
  font-size: var(--fs-label);
  font-weight: 300;
  color: rgba(var(--cream-rgb), 0.42);
}
.field-row { display: grid; gap: 0 16px; }
@media (min-width: 520px) {
  .field-row { grid-template-columns: 140px minmax(0, 1fr); }
}

/* --- Thank you --- */

.thanks__title { margin: 0 0 14px; }
.thanks__lede {
  margin: 0 0 clamp(26px, 3vw, 38px);
  font-size: var(--fs-body);
  font-weight: 300;
  color: var(--muted);
}
.thanks__grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.thanks__card {
  padding: 22px;
  border: 1px solid var(--line-soft);
  background: rgba(var(--cream-rgb), 0.025);
}
.thanks__list {
  margin: 12px 0 16px;
  padding-left: 17px;
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--muted);
}
.thanks__list li { margin-top: 5px; }
.thanks__list a { color: var(--cream); }
.thanks__list a:hover { color: var(--gold-soft); }
.thanks__note {
  margin: 10px 0 14px;
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.24;
  color: var(--muted-2);
}
.thanks__total {
  margin: 12px 0 6px;
  font-family: var(--serif);
  font-size: var(--fs-sub);
  color: var(--gold-soft);
}

/* --- Members: sub-navigation --- */

.membernav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(24px, 3vw, 38px);
}
.membernav__link {
  padding: 9px 16px;
  border: 1px solid var(--line-soft);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: rgba(var(--cream-rgb), 0.55);
  text-decoration: none;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.membernav__link:hover { color: var(--gold-soft); border-color: rgba(var(--gold-rgb), 0.4); }
.membernav__link--active {
  border-color: var(--gold);
  background: rgba(var(--gold-rgb), 0.1);
  color: var(--gold);
}

/* --- Members: order list and detail --- */

.orders { display: grid; gap: 12px; }
.order {
  display: block;
  padding: 19px 20px;
  border: 1px solid var(--line-soft);
  background: rgba(var(--cream-rgb), 0.025);
  text-decoration: none;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.order:hover { border-color: rgba(var(--gold-rgb), 0.42); background: rgba(var(--gold-rgb), 0.05); }
.order__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.order__number {
  font-family: var(--serif);
  font-size: var(--fs-title);
  font-weight: 400;
  color: var(--cream);
}
.order__items {
  margin: 9px 0 0;
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.2;
  color: var(--muted-2);
}
.order__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 14px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.order__date {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: rgba(var(--cream-rgb), 0.45);
}
.order__total { font-size: var(--fs-body); color: var(--gold-soft); }

.orderdetail {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}
@media (min-width: 900px) {
  .orderdetail { grid-template-columns: minmax(0, 1fr) 340px; }
}
.orderdetail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.orderdetail__block {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.31;
  color: var(--muted);
}
.orderdetail__block .eyebrow { margin-bottom: 10px; }
.lesson__price {
  font-size: var(--fs-body);
  color: var(--gold-soft);
  white-space: nowrap;
}

/* --- Members: profile --- */

.profile {
  display: grid;
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
}
@media (min-width: 900px) {
  .profile { grid-template-columns: minmax(0, 1fr) 320px; }
}
.profile__side {
  padding: 22px;
  border: 1px solid var(--line-soft);
  background: rgba(var(--cream-rgb), 0.025);
}
.profile__side .field-group:last-of-type { margin-bottom: 20px; }

/* --- Header basket ---------------------------------------------------------
   Framed like the buttons beside it, so it reads as an action rather than a
   nav link, and turns gold the moment it holds something. */

.header__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border: 1px solid rgba(var(--cream-rgb), 0.2);
  color: rgba(var(--cream-rgb), 0.75);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.header__cart svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.header__cart:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(var(--gold-rgb), 0.06);
}
.header__cart--full {
  border-color: rgba(var(--gold-rgb), 0.55);
  background: rgba(var(--gold-rgb), 0.1);
  color: var(--gold-soft);
}
.header__cart--full:hover {
  border-color: var(--gold);
  background: rgba(var(--gold-rgb), 0.16);
}

.header__cartcount {
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-size: 9.5px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1;
}

/* Below the desktop nav breakpoint the basket lives in the mobile menu. */
@media (max-width: 1080px) {
  .header__cart { display: none; }
}

.menu__cart {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 18px;
  border: 1px solid rgba(var(--gold-rgb), 0.4);
  color: var(--gold-soft);
  font-size: var(--fs-small);
  text-decoration: none;
}
.menu__cart svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.menu__cart:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* --- CTA buttons that post into the basket ---------------------------------
   A form wrapping a button must still behave like a button inside .btn-row,
   which is a flex container. */

.cta-form {
  display: inline-flex;
  margin: 0;
}
.cta-form .btn { width: 100%; }
.cta-form:has(.btn--block) { width: 100%; }

.checkout__guest,
.thanks__account {
  margin: 0 0 clamp(20px, 3vw, 30px);
}
.thanks__account a { color: var(--gold-soft); }
.thanks__account a:hover { color: var(--gold); }

/* ======================================================================
   Administration
   ====================================================================== */

.header--admin { position: static; }
.brand__badge {
  margin-left: 10px;
  padding: 3px 8px;
  border: 1px solid rgba(var(--gold-rgb), 0.5);
  border-radius: 3px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--gold);
}

.adminwrap { padding: clamp(24px, 4vw, 44px) 0 clamp(60px, 8vw, 110px); }

.admincards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-top: 16px;
}
.admincard {
  display: block;
  padding: 20px;
  border: 1px solid var(--line-soft);
  background: rgba(var(--cream-rgb), 0.025);
  text-decoration: none;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.admincard:hover { border-color: rgba(var(--gold-rgb), 0.45); background: rgba(var(--gold-rgb), 0.05); }
.admincard__value {
  display: block;
  font-family: var(--serif);
  font-size: var(--fs-sub);
  color: var(--gold-soft);
}
.admincard__label {
  display: block;
  margin-top: 5px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: rgba(var(--cream-rgb), 0.55);
}
.admincard__note {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-label);
  font-weight: 300;
  color: rgba(var(--cream-rgb), 0.4);
}

/* --- Filters and search --- */

.filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.filterbar__link {
  padding: 7px 13px;
  border: 1px solid var(--line-soft);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: rgba(var(--cream-rgb), 0.5);
  text-decoration: none;
}
.filterbar__link:hover { color: var(--gold-soft); border-color: rgba(var(--gold-rgb), 0.4); }
.filterbar__link--active {
  border-color: var(--gold);
  background: rgba(var(--gold-rgb), 0.1);
  color: var(--gold);
}

.searchbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.searchbar input[type="search"] {
  flex: 1 1 240px;
  padding: 11px 14px;
  background: rgba(var(--cream-rgb), 0.045);
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--fs-small);
}
.searchbar input[type="search"]:focus { outline: none; border-color: var(--gold); }

/* --- Row lists --- */

.adminlist { display: grid; gap: 10px; }
.adminrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px 18px;
  align-items: center;
  padding: 15px 18px;
  border: 1px solid var(--line-soft);
  background: rgba(var(--cream-rgb), 0.025);
}
@media (min-width: 800px) {
  .adminrow { grid-template-columns: minmax(0, 1fr) auto auto; }
  .adminrow:has(.adminrow__thumb) { grid-template-columns: 130px minmax(0, 1fr) auto; }
}
.adminrow--muted { opacity: 0.55; }
.adminrow__thumb {
  width: 130px;
  height: auto;
  border: 1px solid var(--line-soft);
}
.adminrow__main { min-width: 0; }
.adminrow__title {
  font-family: var(--serif);
  font-size: var(--fs-title);
  font-weight: 400;
  color: var(--cream);
  text-decoration: none;
}
.adminrow__title:hover { color: var(--gold-soft); }
.adminrow__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 7px 0 0;
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--muted-2);
}
.adminrow__meta code {
  font-size: var(--fs-label);
  color: rgba(var(--cream-rgb), 0.45);
}
.adminrow__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: var(--fs-label);
  font-weight: 300;
  color: rgba(var(--cream-rgb), 0.45);
  white-space: nowrap;
}
.adminrow__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.adminrow__actions form { margin: 0; }

.pager { margin-top: 22px; }
.pager nav { display: flex; gap: 8px; flex-wrap: wrap; }
.pager svg { width: 14px; height: 14px; }
.pager a, .pager span {
  padding: 6px 11px;
  border: 1px solid var(--line-soft);
  font-size: var(--fs-small);
  color: rgba(var(--cream-rgb), 0.6);
  text-decoration: none;
}
.pager a:hover { border-color: var(--gold); color: var(--gold); }

/* --- Two-column edit screens --- */

.admingrid {
  display: grid;
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
}
@media (min-width: 1000px) {
  .admingrid { grid-template-columns: minmax(0, 1fr) 380px; }
}

.checkrow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 26px;
  margin-top: 18px;
}
.checkrow .check { margin-top: 0; }

.field-row--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.field select[multiple] {
  min-height: 160px;
  padding: 8px;
}

.grantform {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid var(--line-soft);
  background: rgba(var(--cream-rgb), 0.025);
}
.grantform .field:first-child { margin-top: 0; }
.grantform .btn { margin-top: 16px; }

/* --- Per-language fields --- */

.localefield {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.localefield__label {
  margin: 0 0 4px;
  font-size: var(--fs-body);
  color: var(--cream);
}
.localefield__grid {
  display: grid;
  gap: 0 18px;
}
@media (min-width: 760px) {
  .localefield__grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
.localefield__missing {
  margin-left: 6px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: #d99a8c;
}

/* --- Variants --- */

.variantrow {
  display: grid;
  gap: 0 16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding: 18px;
  margin-top: 12px;
  border: 1px solid var(--line-soft);
  background: rgba(var(--cream-rgb), 0.025);
}
.variantrow--new { border-style: dashed; }
.variantrow__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.variantrow__foot .check { margin-top: 0; }
.variantrow__stripe {
  margin-left: auto;
  font-size: var(--fs-label);
  color: rgba(var(--cream-rgb), 0.35);
}
.variantrow__delete { margin: 6px 0 0; text-align: right; }

.linkbutton {
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--sans);
  font-size: var(--fs-small);
  font-weight: 300;
  color: rgba(var(--cream-rgb), 0.45);
  text-decoration: underline;
  cursor: pointer;
}
.linkbutton:hover { color: var(--gold); }

.dangerzone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  padding: 20px;
  border: 1px solid rgba(217, 122, 122, 0.3);
  background: rgba(217, 122, 122, 0.05);
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--muted);
}
.dangerzone p { margin: 0; flex: 1 1 100%; }
.dangerzone form { margin: 0; }

/* ======================================================================
   Questionnaire — a shared, continuously edited document
   ====================================================================== */

.qintro {
  max-width: 62ch;
  margin: 0 0 18px;
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.31;
  color: var(--muted);
}
.qnote { margin-bottom: 16px; }
.qnote--mentor {
  border-color: rgba(var(--gold-rgb), 0.45);
  background: rgba(var(--gold-rgb), 0.08);
}
.qnote--admin {
  border-color: rgba(122, 168, 217, 0.4);
  background: rgba(122, 168, 217, 0.07);
}

.qform {
  display: grid;
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
  margin-top: clamp(22px, 3vw, 34px);
}
@media (min-width: 1000px) {
  .qform { grid-template-columns: 260px minmax(0, 1fr); }
}

/* --- Section rail --- */

.qnav {
  padding: 20px;
  border: 1px solid var(--line-soft);
  background: rgba(var(--cream-rgb), 0.025);
}
@media (min-width: 1000px) {
  .qnav { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; }
}
.qnav nav { display: grid; gap: 2px; }
.qnav__link {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 8px 10px;
  font-size: var(--fs-small);
  font-weight: 300;
  color: rgba(var(--cream-rgb), 0.6);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.qnav__link:hover { color: var(--gold-soft); background: rgba(var(--gold-rgb), 0.05); }
.qnav__link--active {
  border-left-color: var(--gold);
  background: rgba(var(--gold-rgb), 0.08);
  color: var(--gold);
}
.qnav__num {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: rgba(var(--cream-rgb), 0.35);
}
.qnav__hint {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-label);
  font-weight: 300;
  line-height: 1.16;
  color: rgba(var(--cream-rgb), 0.42);
}

.qprogress { margin-bottom: 18px; }
.qprogress__bar {
  height: 4px;
  background: rgba(var(--cream-rgb), 0.1);
  overflow: hidden;
}
.qprogress__bar span {
  display: block;
  height: 100%;
  background: var(--gold);
  transition: width 0.5s var(--ease);
}
.qprogress__label {
  margin: 8px 0 0;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--gold);
}

/* --- Sections --- */

.qsections { display: grid; gap: clamp(28px, 4vw, 48px); }
.qsection { scroll-margin-top: 24px; }
.qsection__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.qsection__num {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--gold);
}
.qsection__title {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-title);
  font-weight: 400;
  color: var(--cream);
}
.qsection__desc {
  max-width: 62ch;
  margin: 12px 0 0;
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.28;
  color: var(--muted-2);
}

/* --- Question block --- */

.qblock {
  padding: 18px 0 16px;
  border-bottom: 1px solid var(--line-soft);
}
.qblock:last-child { border-bottom: 0; }
.qblock__label {
  display: block;
  max-width: 64ch;
  margin: 0 0 4px;
  font-size: var(--fs-body);
  line-height: 1.16;
  color: var(--cream);
}
.qblock__help {
  max-width: 64ch;
  margin: 0 0 12px;
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.24;
  color: var(--muted-2);
}
.qblock__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 8px 0 0;
  min-height: 15px;
  font-size: var(--fs-label);
  font-weight: 300;
}
.qblock__author { color: rgba(var(--cream-rgb), 0.35); }

.qstate { color: rgba(var(--cream-rgb), 0.4); }
.qstate--busy { color: var(--gold-soft); }
.qstate--ok { color: #86b98a; }
.qstate--error { color: #d99a8c; }

.qblock--static {
  padding: 18px;
  border: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: rgba(var(--cream-rgb), 0.025);
}

/* --- Inputs --- */

.qinput {
  width: 100%;
  padding: 12px 14px;
  background: rgba(var(--cream-rgb), 0.045);
  border: 1px solid rgba(var(--gold-rgb), 0.22);
  border-radius: 0;
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.2;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.qinput:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(var(--gold-rgb), 0.07);
}
.qinput:disabled { opacity: 0.6; cursor: not-allowed; }
textarea.qinput { resize: vertical; min-height: 72px; }
.qinput--date { max-width: 220px; }

.qsub {
  display: block;
  margin: 0 0 6px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: rgba(var(--cream-rgb), 0.5);
}
.qfield { margin-top: 12px; }
.qfield:first-child { margin-top: 0; }

/* --- Static links --- */

.qlinks {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-top: 12px;
}
.qlink {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border: 1px solid var(--line-soft);
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--muted);
  text-decoration: none;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.qlink:hover { border-color: rgba(var(--gold-rgb), 0.45); color: var(--gold-soft); }
.qlink__source {
  flex: none;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--gold);
}
.qlink span:last-child { margin-left: auto; color: var(--gold); }

/* --- Scale 1–10 --- */

.qscale {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.qscale__step,
.qscale__clear {
  min-width: 40px;
  height: 40px;
  padding: 0 6px;
  background: rgba(var(--cream-rgb), 0.045);
  border: 1px solid rgba(var(--gold-rgb), 0.22);
  color: var(--muted);
  font-family: var(--sans);
  font-size: var(--fs-small);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.qscale__step:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-soft); }
.qscale__step--on {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--ink);
  font-weight: 300;
}
.qscale__clear { min-width: 34px; color: rgba(var(--cream-rgb), 0.35); }
.qscale__clear:hover:not(:disabled) { color: #d99a8c; border-color: rgba(217, 122, 122, 0.5); }
.qscale button:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Ranking --- */

.qrank {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.qrank__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  background: rgba(var(--cream-rgb), 0.025);
}
.qrank__pos {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(var(--gold-rgb), 0.14);
  color: var(--gold);
  font-size: var(--fs-label);
}
.qrank__label {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--cream);
}
.qrank__moves { display: flex; gap: 4px; flex: none; }
.qrank__moves button {
  width: 34px;
  height: 34px;
  background: none;
  border: 1px solid var(--line-soft);
  color: rgba(var(--cream-rgb), 0.5);
  font-size: 11px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.qrank__moves button:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.qrank__moves button:disabled { opacity: 0.4; cursor: not-allowed; }

/* --- Grid: fixed rows Ă— defined columns --- */

.qgrid { display: grid; gap: 10px; margin-top: 4px; }
.qgrid__row {
  padding: 14px;
  border: 1px solid var(--line-soft);
  background: rgba(var(--cream-rgb), 0.02);
}
.qgrid__rowlabel {
  margin: 0 0 10px;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--gold);
}
/* Stacks on a phone, sits side by side once there is room — never a table
   the reader has to scroll sideways. */
.qgrid__fields { display: grid; gap: 12px; }
@media (min-width: 700px) {
  .qgrid__fields { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .qgrid__fields .qfield--narrow { max-width: 130px; }
  .qgrid__fields .qfield { margin-top: 0; }
}

/* --- Repeater --- */

.qrepeater { margin-top: 4px; }
.qrow {
  padding: 16px;
  margin-bottom: 10px;
  border: 1px solid var(--line-soft);
  background: rgba(var(--cream-rgb), 0.025);
}
.qrow__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.qrow__num {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--gold);
}
.qrow__remove {
  width: 28px;
  height: 28px;
  background: none;
  border: 1px solid transparent;
  color: rgba(var(--cream-rgb), 0.35);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.qrow__remove:hover:not(:disabled) { color: #d99a8c; border-color: rgba(217, 122, 122, 0.4); }

/* --- Admin: assignment list --- */

.qassign {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
  padding: 20px;
  border: 1px solid var(--line-soft);
  background: rgba(var(--cream-rgb), 0.025);
}
@media (min-width: 760px) {
  .qassign { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: end; }
}
.qassign .field { margin-top: 0; }

/* Below 700px the form is the whole screen, so it gets thumb-sized controls
   and 16px inputs — anything smaller makes iOS zoom in on focus and the
   reader then has to pinch back out after every field. */
@media (max-width: 700px) {
  .qinput { font-size: var(--fs-body); padding: 13px 14px; }
  .qrank__moves button { width: 44px; height: 44px; }
  .qrank__item { gap: 10px; padding: 10px; }
  .qscale__step, .qscale__clear { min-width: 44px; height: 44px; }
  .qrow__remove { width: 36px; height: 36px; }
  .qnav { padding: 16px; }
  /* A grid item defaults to min-width:auto, so without this the strip widens
     the whole page instead of scrolling inside itself. */
  .qnav { min-width: 0; }
  .qnav nav {
    /* The rail becomes a horizontal strip so it does not push the first
       question below the fold. */
    min-width: 0;
    max-width: 100%;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .qnav nav::-webkit-scrollbar { display: none; }
  .qnav__link {
    flex: none;
    border-left: 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  .qnav__link--active { border-left: 0; border-bottom-color: var(--gold); }
  .qnav__hint { display: none; }
}

/* ==========================================================================
   16. Rezervácie — typy stretnutí, kalendár, správa termínu
   ========================================================================== */

.lede--narrow { max-width: 62ch; }

.btn--full { width: 100%; justify-content: center; }

/* --- Zoznam typov stretnutí ------------------------------------------- */

.mtypes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
  margin-top: 34px;
}
.mtype {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 26px 24px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  overflow: hidden;
  transition: border-color 0.35s ease, transform 0.5s var(--ease);
}
.mtype:hover { border-color: rgba(var(--gold-rgb), 0.45); transform: translateY(-2px); }
.mtype__stripe {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
}
.mtype__title {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-title);
  font-weight: 400;
  line-height: 1.2;
}
.mtype__meta { display: flex; flex-wrap: wrap; gap: 7px; }
.mtype__lede {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.24;
}
.mtype__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 6px;
}
.mtype__note {
  color: var(--muted-2);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
}

/* --- Stránka rezervácie ------------------------------------------------ */

.booking {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 452px);
  gap: 44px;
  align-items: start;
  margin-top: 30px;
}
.booking__intro { position: sticky; top: 100px; }
.booking__back {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--muted-2);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
}
.booking__back:hover { color: var(--gold); }
.booking__title {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-size: var(--fs-sub);
  font-weight: 300;
  line-height: 1.14;
}
.booking__facts {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}
.booking__facts li {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: 12px;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.13;
}
.booking__facts svg {
  width: 20px;
  height: 20px;
  margin-top: -1px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.booking__text {
  max-width: 62ch;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.31;
}

.bookpanel {
  max-width: 452px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  padding: 26px;
  transition: opacity 0.25s ease;
}
.bookpanel.is-loading { opacity: 0.45; pointer-events: none; }

.bookpanel__locked { display: grid; gap: 14px; justify-items: start; }
.bookpanel__lockedtext {
  margin: 0;
  max-width: 48ch;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.28;
}
.bookpanel__price {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-sub);
  color: var(--gold);
}
.bookpanel__hint {
  margin: 0;
  color: var(--muted-2);
  font-size: var(--fs-small);
  line-height: 1.2;
}

/* --- Kalendár ---------------------------------------------------------- */

.cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.cal__month {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-title);
  font-weight: 400;
}
.cal__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  color: var(--cream);
  font-size: 20px;
  line-height: 1;
}
.cal__nav:hover { border-color: var(--gold); color: var(--gold); }
.cal__nav--off { opacity: 0.22; }

.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}
.cal__dow {
  padding-bottom: 8px;
  text-align: center;
  color: var(--muted-2);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.cal__day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  min-height: 44px;
  border: 1px solid transparent;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}
.cal__day--off { color: rgba(var(--cream-rgb), 0.24); }
.cal__day--dim { opacity: 0.4; }
.cal__day--today { border-color: var(--line-soft); }
.cal__day--free {
  border-color: rgba(var(--gold-rgb), 0.3);
  background: rgba(var(--gold-rgb), 0.06);
  color: var(--cream);
  cursor: pointer;
}
.cal__day--free:hover { border-color: var(--gold); background: rgba(var(--gold-rgb), 0.14); }
.cal__day--on {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  font-weight: 300;
}
.cal__dot {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
}
.cal__day--on .cal__dot { background: var(--ink); }

.cal__zone {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted-2);
  font-size: var(--fs-small);
}

/* --- Voľné časy -------------------------------------------------------- */

.slots {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
.slots__head {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: var(--fs-title);
  font-weight: 400;
}
.slots__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
}
.slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  color: var(--cream);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}
.slot:hover { border-color: var(--gold); background: var(--gold); color: var(--ink); }
.slots__empty { margin: 0; color: var(--muted-2); font-size: var(--fs-small); }

/* --- Formulár rezervácie ----------------------------------------------- */

.bookform__when {
  padding-bottom: 18px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line-soft);
}
.bookform__day {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-small);
}
.bookform__time {
  margin: 4px 0 0;
  font-family: var(--serif);
  font-size: var(--fs-title);
  font-weight: 400;
  color: var(--gold);
}
.bookform__zone { margin: 2px 0 0; color: var(--muted-2); font-size: var(--fs-small); }
.bookform__change {
  display: inline-block;
  margin-top: 12px;
  font-size: var(--fs-small);
}
.bookform__moving {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.28;
}
.bookform__fields .btn { margin-top: 22px; }

/* --- Detail rezervovaného stretnutia ----------------------------------- */

.bookcard {
  border: 1px solid var(--line);
  background: var(--ink-2);
  padding: 28px;
  margin-bottom: 22px;
}
.bookcard--off { opacity: 0.62; }
.bookcard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.bookcard__title {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-sub);
  font-weight: 300;
}
.bookcard__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin: 0;
}
.bookcard__facts dt {
  color: var(--muted-2);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.bookcard__facts dd {
  margin: 5px 0 0;
  font-size: var(--fs-body);
  line-height: 1.13;
}
.bookcard__note,
.bookcard__pending {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.28;
}
.bookcard__pending { color: var(--gold-soft); }

.bookactions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
}
.bookcancel { flex: 1 1 240px; }
.bookcancel > summary {
  cursor: pointer;
  color: var(--muted-2);
  font-size: var(--fs-small);
  list-style: none;
}
.bookcancel > summary::-webkit-details-marker { display: none; }
.bookcancel > summary::before { content: '+ '; color: var(--gold); }
.bookcancel[open] > summary::before { content: '– '; }
.bookcancel > summary:hover { color: var(--cream); }
.bookcancel form { margin-top: 10px; }
.bookcancel .btn { margin-top: 12px; }

/* --- Admin: týždenný rozvrh a výnimky ---------------------------------- */

.week {
  display: grid;
  /* A week reads as a week: seven columns while they fit, and only then
     does it wrap. auto-fit alone would silently drop Sunday onto its own row. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
@media (max-width: 1240px) {
  .week { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}
.week__day {
  padding: 16px;
  border: 1px solid var(--line-soft);
  background: var(--ink-2);
}
.week__day--off { opacity: 0.62; }
.week__name {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.week__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
}
.week__row input {
  width: 100%;
  min-width: 0;
  padding: 9px 8px;
  border: 1px solid var(--line-soft);
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-size: var(--fs-small);
}
.week__row input:focus { outline: none; border-color: var(--gold); }
.week__row span { color: var(--muted-2); font-size: var(--fs-small); }

.overrideform {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: end;
  gap: 14px;
  margin-bottom: 22px;
}
.overrideform .field { margin-top: 0; }
.overrideform .btn { height: fit-content; }

.adminrow__note {
  margin: 8px 0 0;
  color: var(--muted-2);
  font-size: var(--fs-small);
  font-style: italic;
  line-height: 1.2;
}
.order--muted { opacity: 0.62; }

/* --- Mobil ------------------------------------------------------------- */

@media (max-width: 900px) {
  .booking { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .booking__intro { position: static; }
}

@media (max-width: 640px) {
  .bookpanel { padding: 18px 14px; }
  .bookcard { padding: 20px 16px; }
  .cal__grid { gap: 4px; }
  .cal__day { min-height: 40px; font-size: var(--fs-small); }
  .cal__dow { font-size: var(--fs-label); letter-spacing: var(--ls-label); }
  .slots__list { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }

  /* 16px keeps iOS from zooming the page when a field takes focus. */
  .week__row input,
  .bookpanel input,
  .bookpanel select,
  .bookpanel textarea { font-size: var(--fs-body); }

  .bookactions { flex-direction: column; align-items: stretch; }
  .bookactions .btn { width: 100%; justify-content: center; }
}

/* --- Otázky pred stretnutím -------------------------------------------- */

fieldset.field { padding: 0; border: 0; min-width: 0; }
.field > legend {
  display: block;
  padding: 0;
  margin-bottom: 10px;
  font-size: var(--fs-body);
  line-height: 1.2;
  color: var(--muted);
}
.choices { display: grid; gap: 9px; }
.choices .check { margin-top: 0; align-items: flex-start; }
.choices .check input { flex: none; margin-top: 3px; }
.choices__other {
  width: 100%;
  margin-top: 2px;
  padding: 11px 14px;
  background: rgba(var(--cream-rgb), 0.045);
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  border-radius: 0;
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--fs-small);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.choices__other:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(var(--gold-rgb), 0.07);
}
.bookform__intro {
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--gold);
}
.bookform__notice {
  margin: 22px 0 0;
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.2;
  color: var(--muted);
}
.bookform__notice + .check { margin-top: 10px; }