/* ==========================================================================
   alestrcek.com — v5 main page, laid out in v2.0 "THE STUDY"

   Used ONLY by site/index.html and site/en/index.html.
   assets/style.css is left untouched: /it/ and the three /hvala/ pages still
   run on it, and nothing here may reach them.

   Sources: 06 DESIGN RULEBOOK — v4 stran v THE STUDY (2026-08-21)
            09 WEBSITE HANDOFF — v5 (2026-08-21)
            _brief/DESIGN-BRIEF.md §V2.0 THE STUDY

   The page is 12 dark sections of stacked single-sentence paragraphs. Design
   carries all the readability; the text is locked verbatim. Two intensity
   peaks only — the hero portrait and the UVODNI POGOVOR card — everything
   else is quiet affinity: one narrow band, alternating background steps,
   typographic rhythm.
   ========================================================================== */

/* EB Garamond, served from this origin. Must stay the first rule in the file:
   @import is only legal before any other rule. See assets/fonts.css. */
@import url("fonts.css");

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Ground + the barely-there section steps (black stays dominant) */
  --study-0: #0D0A08;
  --study-1: #131009;
  --study-2: #181310;

  /* Panels + rules */
  --mahogany: #2A1B12;
  --hairline: #3A2C21;

  /* The red. CTA, price, focus ring, favicon. The hero energy is the single
     founder-approved exception: luminous line only, never a filled surface. */
  --leather: #722520;
  --leather-deep: #571A17;
  --leather-bright: #A6473C;         /* focus ring on the study steps: 3.37:1 */
  --leather-bright-panel: #B14C40;   /* price on --mahogany: 3.15:1 large */
  --energy-neon: #FF1717;
  --energy-hot: #FFD6D6;

  /* Text — measured: parchment 12.70–15.09:1, muted 6.51–7.73:1 on every bg */
  --parchment: #EAE0CE;
  --muted: #B0A088;
  /* Titles — founder ruling 2026-08-22: rose gold. 8.08:1 on study-0,
     7.54:1 on study-2, and 2.4x away from leather-bright so the CTA red
     keeps its monopoly on "action". */
  --rosegold: #CE9A87;

  --accent-text: var(--leather-bright);

  /* Rulebook §1 — measure. Two sources, two units, and they disagree:
     Bringhurst counts REAL characters (45–75, ideal ~66); Every Layout writes
     the axiom in CSS as `max-inline-size: 60ch`, and `ch` is the advance of
     "0", ~13% wider than EB Garamond's average lowercase. 58ch satisfies both
     at once — measured with the alphabet instrument it is ~64 real characters
     (inside 45–72, on the ~60–66 target), and it is ≤ 60 CSS ch. */
  --measure: 58ch;
  --measure-centered: 46ch;   /* the hero block; centred text wants it shorter */
  --panel: 44rem;

  /* Rulebook §2 — u = one body line-box = 1.15rem × 1.7 ≈ 1.955rem → 2rem */
  --u: 2rem;
  --sp-breath: calc(var(--u) * 0.5);   /* sentences of one breath */
  --sp-thought: var(--u);              /* thoughts inside a section */
  --sp-turn: calc(var(--u) * 1.5);     /* before a bold turn */
  --h2-below: var(--u);                /* 1u under an H2 … */
  --sec-gap: clamp(6rem, 14vh, 10rem); /* … and the whole gap above it (≈4u) */

  --gutter: clamp(1.15rem, 5vw, 2.5rem);

  --font: "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
}

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--study-0);
  color: var(--parchment);
  font-family: var(--font);
  font-size: 1.15rem;
  /* Rulebook §0.2: EB Garamond 400 has thin serifs that vanish on dark.
     Body on dark is 500. Never 400. */
  font-weight: 500;
  line-height: 1.7;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, li, blockquote, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 1px;
}

/* --------------------------------------------------------------------------
   3. Section shell — the alternating steps, and the 4u : 1u heading rule
   -------------------------------------------------------------------------- */
.section {
  /* Half the gap here, half on the neighbour: the space above an H2 is the
     whole --sec-gap (≈4u at a laptop height), the space under it is 1u. */
  padding-block: calc(var(--sec-gap) / 2);
  padding-inline: var(--gutter);
}

.step-0 { background: var(--study-0); }
.step-1 { background: var(--study-1); }
.step-2 { background: var(--study-2); }

/* --------------------------------------------------------------------------
   3a. The page's psychological movement — obscured → seen → settled.

   The background colour still carries the twelve-step rhythm. These neutral
   overlays only change how much of the room is perceptible: the first third is
   held at the edges, the middle opens, and the close is almost unvignetted.
   No new hue and no extra peak — only a slow release of visual pressure. */
#s2,
#s3 {
  background-image:
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.28) 0%,
      rgba(0, 0, 0, 0.06) 24%,
      rgba(0, 0, 0, 0.06) 76%,
      rgba(0, 0, 0, 0.28) 100%);
}

#s4,
#s5,
#s6 {
  background-image:
    radial-gradient(ellipse at 50% 5%, rgba(234, 224, 206, 0.022), transparent 52%),
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.18) 0%,
      transparent 28%,
      transparent 72%,
      rgba(0, 0, 0, 0.18) 100%);
}

#klic,
#s8,
#s9,
#s10 {
  background-image:
    radial-gradient(ellipse at 50% 8%, rgba(234, 224, 206, 0.032), transparent 58%),
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.10) 0%,
      transparent 32%,
      transparent 68%,
      rgba(0, 0, 0, 0.10) 100%);
}

#s11,
#konec {
  background-image:
    radial-gradient(ellipse at 50% 12%, rgba(234, 224, 206, 0.038), transparent 64%);
}

/* --------------------------------------------------------------------------
   3b. The section numerals — II … XII above the H2 (the hero is I, unlabelled)

   The numeral must NOT change the rhythm: the air above an H2 is the whole
   --sec-gap and it stays the whole --sec-gap. The arithmetic is exact and does
   not depend on the font:

     numeral box   = font-size 0.76rem × line-height 1   = 0.76rem
     numeral margin= --u − 0.76rem                        = 1.24rem
     numeral block = exactly --u (1u)

   and .section--numbered gives up exactly 1u of its own padding-top. So

     prev padding-bottom (sec-gap/2) + this padding-top (sec-gap/2 − 1u)
       + numeral block (1u)  =  sec-gap        ← unchanged, to the pixel

   The numeral sits 1u above the H2; the rest of the gap sits above the numeral.
   Interface voice, --muted. Never leather: leather is the CTA and the price.
   -------------------------------------------------------------------------- */
.section--numbered {
  padding-top: calc(var(--sec-gap) / 2 - var(--u));
}

.numeral {
  position: relative;
  width: 3.8rem;
  margin-inline: auto;
  font-family: var(--font);
  font-weight: 500;
  font-size: 0.76rem;
  line-height: 1;                       /* box height == font-size, exactly */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  /* Letterspacing hangs after the last glyph; the indent puts the numeral back
     on the optical centre axis the H2 under it holds. */
  text-indent: 0.14em;
  color: var(--muted);                  /* 7.73:1 on --study-0 */
  margin-bottom: calc(var(--u) - 0.76rem);
}

/* One mark, repeated quietly: a frame that closes as the blind spot becomes
   visible. It is absolutely positioned, so the numeral remains exactly 1u and
   the heading-rhythm arithmetic above does not move by a pixel. */
.numeral::before {
  content: "";
  position: absolute;
  inset: -0.48rem -0.62rem;
  border: 1px solid;
  border-color: var(--hairline) transparent transparent var(--hairline);
  opacity: 0.62;
  pointer-events: none;
}

#s4 .numeral::before,
#s5 .numeral::before,
#s6 .numeral::before {
  border-right-color: var(--hairline);
}

#klic .numeral::before,
#s8 .numeral::before,
#s9 .numeral::before,
#s10 .numeral::before,
#s11 .numeral::before,
#konec .numeral::before {
  border-color: var(--hairline);
}

/* Once the frame is complete it recedes; the visitor no longer needs the
   device explained at full volume. */
#s10 .numeral::before { opacity: 0.50; }
#s11 .numeral::before { opacity: 0.40; }
#konec .numeral::before { opacity: 0.30; }

/* The band. Prose sits left-aligned inside it; the band itself is centred. */
.band {
  max-width: var(--measure);
  margin-inline: auto;
  text-align: left;
}

.band--wide {
  max-width: var(--panel);
}

/* --------------------------------------------------------------------------
   4. The three voices
   -------------------------------------------------------------------------- */

/* Display */
.h2,
h2 {
  color: var(--rosegold);
  font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.24;
  text-transform: uppercase;
  letter-spacing: 0.08em;   /* rulebook §1: every caps string, ≥0.06em */
  text-align: center;       /* the heading apparatus stays on the centre axis */
  max-width: 26ch;
  margin: 0 auto var(--h2-below);
  text-wrap: balance;
}

h3 {
  color: var(--rosegold);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: left;
  margin-top: calc(var(--u) * 2.5);
  margin-bottom: calc(var(--u) * 0.75);
}

/* Interface voice — the engraved label */
.iface,
.btn,
.sticky-cta,
.price,
.micro,
.credential,
.footer__line,
.lang,
.foot-nav {
  font-family: var(--font);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.76rem;
  line-height: 1.7;
}

/* Body */
.line {
  margin-top: var(--sp-thought);
  /* Long-form prose only. A browser without support ignores the line and the
     paragraph sets exactly as it did before. Never on headings, buttons or
     interface voice — those set in the balance/nowrap family instead. */
  text-wrap: pretty;
}

.line--breath { margin-top: var(--sp-breath); }
.line--turn { margin-top: var(--sp-turn); }
.line:first-child,
.band > .line:first-child { margin-top: 0; }

.line strong,
strong {
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.cta {
  margin-top: var(--sp-turn);
  text-align: center;
}

.btn {
  display: inline-block;
  background: var(--leather);
  color: var(--parchment);          /* measured 8.02:1 */
  font-size: 0.8rem;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-decoration: none;
  padding: 1.15rem 2.4rem;          /* clears the 48px CTA height floor */
  min-height: 48px;
  border: 1px solid var(--leather);
  border-radius: 1px;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* From the tablet width up the three calls are identical objects, so they must
   all set on one line — the hero's is the longest and was the only one to
   wrap. Below 45rem wrapping is still the correct behaviour: the label must
   never push past the gutter. */
@media (min-width: 45rem) {
  .btn { white-space: nowrap; }
}

.btn:hover,
.btn:focus-visible {
  background: var(--leather-deep);
  border-color: var(--leather-deep);
}

/* Press feedback. A finger has no hover: without this the button gives nothing
   back on a phone. Same treatment as the hover, so a mouse sees one colour for
   "reachable" and "pressed" and nothing new is invented. */
.btn:active,
.sticky-cta:active {
  background: var(--leather-deep);
  border-color: var(--leather-deep);
}

/* --------------------------------------------------------------------------
   6. PEAK 1 — the hero
   Full-bleed library portrait, gradient scrim to the ground colour, the H1
   block riding the lower third. Text never lands on his face at any width:
   the portrait band is its own box and the H1 sits inside the solid end of
   the scrim; everything after it is on the ground colour.
   -------------------------------------------------------------------------- */
.hero {
  background: var(--study-0);
  padding-bottom: calc(var(--sec-gap) / 2);
}

.hero__frame {
  position: relative;
  width: min(100%, 78rem);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(114, 37, 32, 0.12), transparent 62%),
    var(--study-0);
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__img { animation: hero-fade 1.6s ease-out both; }
}

@keyframes hero-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to right,
      #0D0A08 0%,
      rgba(13, 10, 8, 0.92) 3%,
      rgba(13, 10, 8, 0.34) 10%,
      rgba(13, 10, 8, 0) 18%,
      rgba(13, 10, 8, 0) 82%,
      rgba(13, 10, 8, 0.34) 90%,
      rgba(13, 10, 8, 0.92) 97%,
      #0D0A08 100%
    ),
    linear-gradient(
      to bottom,
      rgba(13, 10, 8, 0.50) 0%,
      rgba(13, 10, 8, 0.08) 10%,
      rgba(13, 10, 8, 0) 30%,
      rgba(13, 10, 8, 0.45) 52%,
      rgba(13, 10, 8, 0.88) 76%,
      #0D0A08 100%
    );
}

/* Founder-approved empowerment beat: an inert SVG sits over the unchanged
   engraving. JavaScript slowly raises only the original circle. */
.hero-energy {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 2;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
}

.hero-energy.is-ready { opacity: 1; }

.hero-energy__stroke {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.hero-energy__stroke--bloom {
  stroke: var(--energy-neon);
  stroke-width: 7px;
  opacity: 0.50;
  filter: url("#hero-neon-bloom");
}

.hero-energy__stroke--tube {
  stroke: var(--energy-neon);
  stroke-width: 3px;
  opacity: 0.94;
}

.hero-energy__stroke--core {
  stroke: var(--energy-hot);
  stroke-width: 1px;
  opacity: 0.96;
}

.hero-energy__traveller {
  fill: var(--energy-hot);
  stroke: var(--energy-neon);
  stroke-width: 5px;
  vector-effect: non-scaling-stroke;
  filter: url("#hero-neon-bloom");
}

/* The mast carries its OWN scrim, sized to itself. However many lines the
   locked headline takes in a given language, the ground under it is solid and
   the portrait above it is untouched — text can never land on raw photo. */
.hero__mast {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(3rem, 9vh, 5.5rem) var(--gutter) clamp(1.25rem, 3.5vh, 2.25rem);
  text-align: center;
  background: linear-gradient(
    to bottom,
    rgba(13, 10, 8, 0) 0%,
    rgba(13, 10, 8, 0.74) 34%,
    rgba(13, 10, 8, 0.94) 68%,
    #0D0A08 100%
  );
}

.hero__title {
  font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 4.7rem);
  line-height: 1.06;
  /* Bringhurst: letterspace every caps string. Display size wants the low end
     of the 5–10% band, so 0.04em, not the 0.08em the section heads carry. */
  letter-spacing: 0.04em;
  color: var(--parchment);   /* founder 2026-08-22: hero stays white, sections gold */
  /* Wide enough that the longest locked headline (EN) still breaks to two or
     three lines. Four lines would push the block up onto his face. */
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}

.hero__body {
  max-width: var(--measure-centered);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-top: clamp(2rem, 5vh, 3rem);
  text-align: center;   /* rulebook §1: the hero block keeps the centre axis */
}

.hero__position {
  font-size: clamp(1.18rem, 2.4vw, 1.35rem);
  line-height: 1.55;
  margin-top: var(--sp-turn);
  text-wrap: balance;
}

.micro {
  color: var(--muted);   /* measured 7.73:1 on --study-0 */
  margin-top: var(--sp-thought);
}

/* Phone: the portrait becomes a PORTRAIT crop, not the 4:3 block the v2 brief
   described. At 360px the longest locked headline (EN) sets four lines; on a
   4:3 crop (270px tall) the mast would climb over his chin. 4:5 gives 450px
   and leaves the face clear at every language. File 09 §4 — "hero tekst nikoli
   čez obraz" — outranks the brief's crop ratio. */
@media (max-width: 45rem) {
  .hero__frame {
    aspect-ratio: 4 / 5;
  }

  .hero__img {
    height: auto;
    aspect-ratio: 1 / 1;
    object-position: center top;
    /* The overlaid language/navigation bars occupy the top of the artwork.
       Lower and slightly tighten the square on phones so the Da Vinci head
       clears that interface instead of appearing cropped behind it. */
    transform: translateY(3.5rem) scale(0.94);
    transform-origin: center top;
  }

  .hero-energy {
    transform: translateY(3.5rem) scale(0.94);
    transform-origin: center top;
  }

  .hero__mast { padding-top: clamp(2.5rem, 7vh, 4rem); }
}

/* --------------------------------------------------------------------------
   7. Marko — medium intensity: one mahogany panel, credentials in the
   interface voice, the quote italic.
   -------------------------------------------------------------------------- */
.panel {
  max-width: var(--panel);
  margin-inline: auto;
  background-color: var(--mahogany);
  background-image:
    repeating-linear-gradient(105deg,
      rgba(234, 224, 206, 0.010) 0,
      rgba(234, 224, 206, 0.010) 1px,
      transparent 1px,
      transparent 8px);
  border: 1px solid var(--hairline);
  padding: clamp(1.9rem, 5vw, 3rem) clamp(1.15rem, 4.5vw, 2.75rem);
  text-align: left;
  --accent-text: var(--leather-bright-panel);
}

.marko-proof {
  max-width: var(--panel);
  margin-inline: auto;
}

.panel--marko {
  position: relative;
  max-width: none;
  margin-top: calc(clamp(4.75rem, 14vw, 6.25rem) + var(--u));
  padding-top: calc(clamp(4.75rem, 14vw, 6.25rem) + var(--u));
  border-radius: clamp(1rem, 3vw, 1.6rem);
  background-image:
    radial-gradient(circle at 50% 0%, rgba(206, 154, 135, 0.10), transparent 31%),
    repeating-linear-gradient(105deg,
      rgba(234, 224, 206, 0.010) 0,
      rgba(234, 224, 206, 0.010) 1px,
      transparent 1px,
      transparent 8px);
}

.marko-portrait {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  width: clamp(9.5rem, 28vw, 12.5rem);
  aspect-ratio: 1;
  margin: 0;
  transform: translate(-50%, -50%);
  border: 2px solid var(--rosegold);
  border-radius: 50%;
  padding: 5px;
  background: var(--mahogany);
  box-shadow:
    0 0 0 1px rgba(234, 224, 206, 0.12),
    0 1.4rem 3rem rgba(0, 0, 0, 0.42);
  overflow: hidden;
}

.marko-portrait img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.credential {
  color: var(--parchment);
  text-align: center;
}

.credential-sub {
  color: var(--muted);   /* 6.51:1 on --mahogany */
  font-size: 1.02rem;
  line-height: 1.6;
  text-align: center;
  margin-top: var(--sp-breath);
}

.marko-card__header {
  max-width: var(--measure);
  margin-inline: auto;
}

.quote {
  max-width: var(--measure);
  margin-inline: auto;
  margin-top: var(--sp-turn);
  border-block: 1px solid var(--hairline);
  padding-block: var(--sp-turn);
}

.quote p {
  text-wrap: pretty;
  font-style: italic;
  font-size: clamp(1.18rem, 2.4vw, 1.3rem);
  line-height: 1.62;
}

.quote p + p { margin-top: var(--sp-thought); }

.quote__by {
  max-width: var(--measure);
  margin-inline: auto;
  margin-top: var(--sp-turn);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--parchment);
  text-align: center;
}

.marko-card__identity {
  max-width: var(--measure);
  margin-inline: auto;
}

.marko-ventures {
  margin-top: var(--sp-turn);
}

.marko-ventures__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: clamp(0.65rem, 2vw, 1.4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.marko-ventures__list li {
  min-width: 0;
  height: 100%;
}

.marko-ventures__list a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 5.2rem;
  padding: 0.45rem 0.2rem;
  color: var(--muted);
  font-family: var(--sans);
  text-decoration: none;
  transition: color 180ms ease, background-color 180ms ease;
}

.marko-ventures__list a:hover,
.marko-ventures__list a:focus-visible {
  color: #aaa49c;
  background: rgba(234, 224, 206, 0.025);
}

.marko-ventures__list a:focus-visible {
  outline: 2px solid var(--rosegold);
  outline-offset: -3px;
}

.marko-venture__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 4.5rem;
}

.marko-venture__logo img {
  display: block;
  width: auto;
  max-width: 8.5rem;
  height: auto;
  max-height: 3.1rem;
  opacity: 0.72;
  filter: grayscale(1);
  transition: opacity 180ms ease;
}

.marko-ventures__list a:hover img,
.marko-ventures__list a:focus-visible img { opacity: 0.92; }

.marko-venture--opis .marko-venture__logo img { max-width: 7.1rem; max-height: 3.7rem; }
.marko-venture--pigenta .marko-venture__logo img { max-width: 8.9rem; }
.marko-venture--123pdi .marko-venture__logo img { max-width: 7.5rem; }
.marko-venture--gpx-guide .marko-venture__logo img { max-height: 4rem; }

@media (max-width: 430px) {
  .marko-ventures__list { grid-template-columns: 1fr; gap: 0.75rem; }
  .marko-ventures__list a { min-height: 5.4rem; }
}

/* --------------------------------------------------------------------------
   7b. Marko's video — a plain <video>, native controls, nothing else.

   No player library, no embed, no iframe, no third-party host: the file is
   served from this origin like every other asset. preload="none" means the
   9:16 file is not touched until he presses play.

   The scrim is one overlay on the poster state: the poster is bright outdoors
   and the panel is mahogany, so it needs to be sat down before it belongs
   here. pointer-events: none — the native controls underneath stay live — and
   it lifts on the first play and does not return.
   -------------------------------------------------------------------------- */
.vid {
  position: relative;
  /* Width is slaved to the viewport HEIGHT too (9/16 box): the whole player,
     controls included, must be visible with context around it — on phones the
     unconstrained 514px box filled the screen and collided with the sticky
     CTA (founder report 2026-08-22). svh respects mobile browser bars. */
  /* 64svh * 9/16 pre-computed to 36svh: WebKit (iOS) rejected the nested
     calc()-inside-min() form and dropped the declaration entirely, leaving the
     video at full container width (founder iPhone report 2026-08-22). */
  width: min(320px, 100%, 36vh);
  width: min(320px, 100%, 36svh);
  margin: var(--sp-turn) auto 0;
  aspect-ratio: 9 / 16;
  background: var(--study-0);
  border: 1px solid var(--hairline);
  overflow: hidden;
  box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, 0.24);
}

.panel--marko > .vid { margin-top: var(--sp-turn); }

/* On larger screens the video stays a quiet phone-sized object inside the
   panel — at 9/16 every extra 20px of width adds ~36px of height, so the cap
   is deliberately low (founder-adjusted 2026-08-21: 400px read too big). */
@media (min-width: 45rem) {
  .vid { width: min(300px, 100%, 36vh); width: min(300px, 100%, 36svh); }
}

.vid__player {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: var(--study-0);
}

.vid__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;   /* the native controls under it stay clickable */
  background: linear-gradient(
    to bottom,
    rgba(13, 10, 8, 0.30) 0%,
    rgba(13, 10, 8, 0.40) 55%,
    rgba(13, 10, 8, 0.54) 100%
  );
  transition: opacity 0.35s ease;
}

.vid[data-played] .vid__scrim { opacity: 0; }

/* --------------------------------------------------------------------------
   8. PEAK 2 — the UVODNI POGOVOR card.
   Mahogany, double hairline frame: the one ornament on the page.
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  max-width: var(--panel);
  margin-inline: auto;
  background-color: var(--mahogany);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(234, 224, 206, 0.034), transparent 42%),
    repeating-linear-gradient(105deg,
      rgba(234, 224, 206, 0.010) 0,
      rgba(234, 224, 206, 0.010) 1px,
      transparent 1px,
      transparent 8px),
    linear-gradient(90deg,
      rgba(13, 10, 8, 0.34) 0%,
      transparent 16%,
      transparent 84%,
      rgba(13, 10, 8, 0.34) 100%);
  border: 1px solid var(--hairline);
  padding: clamp(2.25rem, 6vw, 3.5rem) clamp(1.3rem, 5vw, 3rem);
  text-align: left;
  --accent-text: var(--leather-bright-panel);
  box-shadow:
    0 2.4rem 5.5rem rgba(0, 0, 0, 0.24),
    inset 0 0 4rem rgba(13, 10, 8, 0.22);
}

.card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--hairline);
  pointer-events: none;
}

.card > * { position: relative; }

/* The panel is wide (44rem, so the double frame reads as a card, not a note);
   the TEXT inside it still holds the measure. Same column, centred in it. */
.card > .line,
.card > h3,
.card > .price,
.card > .boundary,
.card > .cta {
  max-width: var(--measure);
  margin-inline: auto;
}

.card h3:first-of-type { margin-top: calc(var(--u) * 2); }

.price {
  color: var(--muted);
  text-align: center;
  margin-top: var(--sp-turn);
}

/* 1.2rem @600 = 19.2px semibold: past the WCAG large-text floor (18.66px
   bold), so --leather-bright-panel on --mahogany (3.15:1) clears 3:1. */
.price__amount {
  color: var(--accent-text);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
}

.boundary {
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--muted);
  text-align: center;
  max-width: 54ch;
  margin-inline: auto;
  margin-top: var(--sp-breath);
}

/* --------------------------------------------------------------------------
   9. MOJA PRAVILA — the ledger device. Hairline-separated rows, nothing else.
   -------------------------------------------------------------------------- */
.ledger {
  max-width: var(--measure);
  margin-inline: auto;
  margin-top: 0;
}

.ledger li {
  border-top: 1px solid var(--hairline);
  padding-block: clamp(0.95rem, 2.6vw, 1.2rem);
  text-align: left;
}

.ledger li:last-child { border-bottom: 1px solid var(--hairline); }

.ledger + .line { margin-top: var(--sp-turn); }

/* --------------------------------------------------------------------------
   9b. Founder portrait + social paths
   -------------------------------------------------------------------------- */
.founder-portrait {
  position: relative;
  isolation: isolate;
  width: calc(100% + 2 * var(--gutter));
  max-width: none;
  aspect-ratio: 19 / 10;
  margin: 0 calc(-1 * var(--gutter)) clamp(2.5rem, 7vw, 4.5rem);
  overflow: hidden;
  background: var(--study-0);
}

.founder-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.founder-portrait__base {
  filter: saturate(0.78) brightness(0.76) contrast(1.04);
}

.founder-portrait__eyes {
  position: absolute;
  inset: 0;
  z-index: 2;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 25%,
    rgba(0, 0, 0, 0.18) 28%,
    rgba(0, 0, 0, 0.72) 30%,
    #000 31%,
    #000 34%,
    rgba(0, 0, 0, 0.72) 35%,
    rgba(0, 0, 0, 0.18) 37%,
    transparent 40%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 25%,
    rgba(0, 0, 0, 0.18) 28%,
    rgba(0, 0, 0, 0.72) 30%,
    #000 31%,
    #000 34%,
    rgba(0, 0, 0, 0.72) 35%,
    rgba(0, 0, 0, 0.18) 37%,
    transparent 40%,
    transparent 100%
  );
  pointer-events: none;
}

.founder-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(13, 10, 8, 0.42) 0%,
    rgba(13, 10, 8, 0.18) 18%,
    rgba(13, 10, 8, 0.04) 27%,
    rgba(13, 10, 8, 0) 30%,
    rgba(13, 10, 8, 0.04) 35%,
    rgba(13, 10, 8, 0.34) 62%,
    rgba(13, 10, 8, 0.82) 100%
  );
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.4rem;
  margin-top: var(--sp-turn);
}

.social-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  color: var(--muted);
  font-family: var(--font);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

.social-links a:hover { color: var(--parchment); }

.social-links svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.social-links .social-dot,
.social-links .social-fill { fill: currentColor; stroke: none; }

.social-links--compact {
  margin-top: 1.2rem;
  gap: 1rem;
}

.social-links--compact a { font-size: 0.7rem; }

/* --------------------------------------------------------------------------
   10. The close — the quiz line. A live link, so it may be underlined.
   -------------------------------------------------------------------------- */
.quiz-line {
  margin-top: var(--sp-breath);
  text-align: center;
}

.quiz-line a {
  color: var(--parchment);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--hairline);
  transition: text-decoration-color 0.25s ease;
}

.quiz-line a:hover { text-decoration-color: var(--parchment); }

.quiz-lead {
  margin-top: var(--sp-thought);
  text-align: center;
  color: var(--muted);
}

/* The argument is over. Give the final decision more air than another sales
   paragraph, while keeping the heading's established 4u:1u relationship. */
#konec {
  padding-bottom: calc(var(--sec-gap) / 2 + var(--u) * 2);
}

#konec .band { max-width: 54ch; }

#konec .cta { margin-top: calc(var(--sp-turn) + var(--u)); }

/* --------------------------------------------------------------------------
   11. Footer — legal block v1.4, unchanged
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--study-0);
  border-top: 1px solid var(--hairline);
  padding-block: clamp(2.5rem, 6vh, 3.5rem);
  padding-inline: var(--gutter);
  text-align: center;
}

.footer__line {
  font-size: 0.72rem;
  line-height: 2;
  color: var(--muted);
}

/* The footer sets at 0.72rem — correct for the voice, too small for a thumb.
   The links keep their exact visual density (the padding is cancelled by an
   equal negative margin) while the hit box grows past the 34px floor. The
   hover rule moved from border-bottom to text-decoration so the underline
   stays welded to the text instead of dropping to the padding edge. */
.footer__line a,
.foot-nav a,
.lang a {
  display: inline-block;
  color: var(--muted);
  text-decoration: none;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  padding-block: 0.65em;
  padding-inline: 0.4em;
  margin-block: -0.65em;
  margin-inline: -0.4em;
}

.footer__line a:hover,
.foot-nav a:hover,
.lang a:hover {
  color: var(--parchment);
  text-decoration: underline;
}

/* The two legal pages. Interface voice, quiet, never a call. */
.foot-nav {
  margin-top: clamp(1.2rem, 3.5vh, 1.8rem);
  font-size: 0.72rem;
  line-height: 2;
  color: var(--muted);
}

.lang {
  margin-top: 0.55rem;
  font-size: 0.72rem;
  color: var(--muted);
}

.lang a[aria-current] { color: var(--parchment); }

/* --------------------------------------------------------------------------
   12. Sticky pill — the fourth call, same destination as the other three
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  right: clamp(0.75rem, 3vw, 1.6rem);
  bottom: clamp(0.75rem, 3vw, 1.6rem);
  z-index: 50;
  display: inline-block;
  max-width: calc(100vw - 1.5rem);
  padding: 0.85rem 1.35rem;
  border-radius: 1px;
  background: var(--leather);
  border: 1px solid var(--leather);
  color: var(--parchment);
  font-size: 0.68rem;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease,
              background-color 0.25s ease;
}

.sticky-cta.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.sticky-cta:hover {
  background: var(--leather-deep);
  border-color: var(--leather-deep);
}

/* A quiet utility control on the centre axis. It appears only after a
   meaningful scroll and never borrows the leather red. */
.back-to-top {
  --back-offset: 0px;
  position: fixed;
  left: 50%;
  bottom: calc(clamp(0.75rem, 3vw, 1.6rem) + var(--back-offset));
  z-index: 50;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: rgba(19, 16, 9, 0.94);
  color: var(--muted);
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.28);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease,
              color 0.2s ease, border-color 0.2s ease;
}

.back-to-top svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
}

.back-to-top:hover,
.back-to-top:focus-visible {
  color: var(--parchment);
  border-color: var(--rosegold);
}

.back-to-top:focus-visible {
  outline: 2px solid var(--rosegold);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   13. Small screens, down to 360px
   -------------------------------------------------------------------------- */
@media (max-width: 30rem) {
  :root { --gutter: 1.05rem; }

  .card { padding-inline: 1.15rem; }
  .panel { padding-inline: 1.1rem; }
  .hero__title { font-size: clamp(2.15rem, 10vw, 2.8rem); }
  .back-to-top { --back-offset: 3.75rem; }
}

/* --------------------------------------------------------------------------
   14. Reduced motion — nothing moves
   -------------------------------------------------------------------------- */
@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;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .hero__img { animation: none !important; opacity: 1; }
  .sticky-cta { transform: none; }
  .back-to-top { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   15. Guides — the free-guide card, the homepage banner, the gender choice
       (2026-09-14). Mobile-first: everything below stacks at 390px and the
       cover never forces a horizontal scroll.
   -------------------------------------------------------------------------- */
.guides-title {
  color: var(--rosegold, #CE9A87);
  text-align: center;
  margin: 0 0 2rem;
}

.guide-card__cover {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 1px solid rgba(234, 224, 206, 0.12);
  margin-bottom: 1.6rem;
}

.guide-card__subtitle {
  color: var(--rosegold, #CE9A87);
  font-style: italic;
}

.guide-card__facts {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
}

.guide-card__facts li {
  margin-top: 0.75rem;
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.6;
}

.guide-card__facts li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--rosegold, #CE9A87);
}

/* The gender choice on the signup forms. A fieldset, so a screen reader hears
   the group label before either option. */
.signup-form__choice {
  border: 0;
  margin: 1.2rem 0 0;
  padding: 0;
}

.signup-form__choice legend {
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rosegold, #CE9A87);
}

.signup-form__choice label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-right: 1.4rem;
  cursor: pointer;
}

.signup-form__choice input { margin: 0; }

/* The homepage banner. Full-width strip directly under the hero. */
.guide-banner {
  display: block;
  padding: 2.4rem var(--gutter, 1.25rem);
  background: #181310;
  border-block: 1px solid rgba(234, 224, 206, 0.08);
}

.guide-banner__inner {
  max-width: 62rem;
  margin: 0 auto;
  display: grid;
  gap: 1.6rem;
  grid-template-columns: 1fr;
  align-items: center;
}

.guide-banner__cover {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 1px solid rgba(234, 224, 206, 0.12);
}

.guide-banner__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rosegold, #CE9A87);
}

.guide-banner h2 {
  margin: 0 0 0.7rem;
  color: var(--rosegold, #CE9A87);
}

.guide-banner__line { margin: 0 0 1.5rem; }

@media (min-width: 46rem) {
  .guide-banner__inner { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 2.4rem; }
}

/* --------------------------------------------------------------------------
   16. The homepage guide pop-up (2026-09-15)

   The video names only the domain now, so the offer has to find the visitor on
   the home page. Two stages inside one card: the poster, then the form.
   Ships hidden — no layout shift, no effect on any measurement.

   The yellow is the ONE exception to the leather-red budget, and it is
   deliberate: this is the only button on the site that is not the coaching
   offer, and it must not be mistaken for it.

   2026-09-15: the label is DARK, not white. White on #F2C230 measures about
   1.9:1 — below any legibility floor. #1A1208 on the same yellow measures
   about 12:1 and still reads as the site's own near-black.
   -------------------------------------------------------------------------- */
:root {
  --guide-yellow: #F2C230;
  --guide-yellow-hover: #FFD04F;
  --guide-yellow-ink: #1A1208;
}

.guide-popup[hidden] { display: none; }

.guide-popup {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
}

.guide-popup__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 3, 2, 0.92);
}

.guide-popup__card {
  position: relative;
  width: 100%;
  max-width: 30rem;              /* ≈480px — the poster is portrait */
  max-height: calc(100svh - 2rem);
  overflow-y: auto;
  background: #0D0A08;
  border: 1px solid rgba(234, 224, 206, 0.16);
  padding: 1rem 1rem 1.4rem;
}

/* The card is a container that takes focus programmatically so a screen reader
   starts inside the dialog. It is not a control, so it wears no focus ring —
   Chrome otherwise paints one around the whole card on open. The real controls
   inside it keep theirs. */
.guide-popup__card:focus,
.guide-popup__card:focus-visible { outline: none; }

.guide-popup__close {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 10, 8, 0.72);
  border: 1px solid rgba(234, 224, 206, 0.22);
  color: #EAE0CE;
  cursor: pointer;
  padding: 0;
}

.guide-popup__close svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.guide-popup__close:hover,
.guide-popup__close:focus-visible { background: rgba(234, 224, 206, 0.12); }

.guide-popup__cover {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.guide-popup__cta {
  display: block;
  width: 100%;
  margin-top: 1.1rem;
  padding: 0.95rem 1.2rem;
  background: var(--guide-yellow);
  color: var(--guide-yellow-ink);
  border: 0;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.guide-popup__cta:hover,
.guide-popup__cta:focus-visible { background: var(--guide-yellow-hover); }
.guide-popup__cta:disabled { cursor: wait; opacity: 0.62; }

.guide-popup__title {
  margin: 0.2rem 0 0;
  padding-right: 2.4rem;
  color: var(--rosegold, #CE9A87);
  font-size: 1.28rem;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.guide-popup__line {
  margin: 0.85rem 0 0;
  line-height: 1.6;
}

.guide-popup__line strong { color: var(--parchment, #EAE0CE); }

.guide-popup__form { margin-top: 1.4rem; }

.guide-popup__sign {
  margin: 0.7rem 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--rosegold, #CE9A87);
}

.guide-popup__sign + .guide-popup__sign { margin-top: 0.25rem; }

/* The page behind a modal must not scroll under the finger. */
html.is-popup-open,
body.is-popup-open { overflow: hidden; }

/* Desktop. The brief asked for a card up to ~900px wide; that number was
   written for the landscape spread. The poster crop is PORTRAIT (756×1200), so
   a 900px-wide card would stand 1430px tall and the button would fall off the
   screen. The card is therefore bounded by HEIGHT here, and the poster is
   centred inside it — the image still fills the card, it just fills it the way
   a portrait image can. */
@media (min-width: 46rem) {
  .guide-popup { padding: 2rem; }
  .guide-popup__card { max-width: 34rem; padding: 1.4rem 1.6rem 1.8rem; }
  .guide-popup__cover {
    width: auto;
    max-height: calc(100svh - 16rem);
    margin-inline: auto;
  }
  .guide-popup__cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .guide-popup,
  .guide-popup__card { animation: none !important; transition: none !important; }
}

/* Language link under the guides heading (2026-09-15). */
.guides-lang { text-align: center; margin: -0.6rem 0 1.6rem; font-size: 0.95rem; }
.guides-lang a { color: var(--rosegold, #CE9A87); text-decoration: underline; text-underline-offset: 0.2em; }