/* ═══════════════════════════════════════════════════════════
   PAULA — BARCELONA 2026
   Editorial aesthetic: Vogue × Devil Wears Prada × Sephora
   Fonts: Cormorant Garamond (display) + Montserrat (UI)
   ═══════════════════════════════════════════════════════════ */

/* ─── DESIGN TOKENS ─── */
:root {
  /* Colors — warm Vogue parchment palette */
  --bg-primary:    #F5F1EB;   /* aged magazine paper — warmer than before */
  --bg-secondary:  #EAE6DE;   /* parchment — visually distinct from primary */
  --bg-dark:       #080808;   /* near-true-black — maximum contrast */
  --bg-card:       #FDFBF8;   /* slightly warm white for cards */
  --text-primary:  #0C0C0C;
  --text-inverse:  #F5F1EB;
  --text-muted:    #7A7570;
  --accent:        #C41E3A;   /* fashion crimson — use once per section */
  --accent-subtle: #E8D5D5;
  --border:        #D8D4CC;
  --border-dark:   #232323;

  /* Typography — Bodoni Moda (Vogue Didone) + Cormorant (editorial serif) + Montserrat (UI) */
  --font-heading:   'Bodoni Moda', 'Didot', Georgia, serif;   /* structural headlines */
  --font-display:   'Cormorant Garamond', Georgia, serif;      /* pull quotes, taglines, personal */
  --font-body:      'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  /* Type scale — fluid */
  --type-display: clamp(80px, 13vw, 150px);
  --type-h1:      clamp(44px, 7vw, 88px);
  --type-h2:      clamp(36px, 5.5vw, 68px);
  --type-h3:      clamp(20px, 2.5vw, 28px);
  --type-body:    15px;
  --type-sm:      13px;
  --type-caption: 11px;
  --type-nav:     10px;

  /* Leading & tracking */
  --leading-tight:   1.0;
  --leading-display: 1.02;
  --leading-normal:  1.55;
  --leading-body:    1.7;
  --tracking-display: -0.025em;
  --tracking-nav:     0.22em;   /* wider — more Vogue */
  --tracking-label:   0.26em;   /* wide tracked labels */

  /* Spacing */
  --space-section:  clamp(88px, 13vw, 176px);
  --space-element:  clamp(36px, 5.5vw, 72px);
  --space-inner:    clamp(16px, 3vw, 32px);

  /* Layout */
  --container-max: 1400px;
  --container-pad: clamp(24px, 5vw, 80px);
  --grid-gap:      24px;

  /* Motion */
  --ease-fast:   150ms ease;
  --ease-mid:    250ms ease;
  --ease-reveal: 700ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-image:  600ms ease;

  /* Non-negotiable */
  --radius: 0px;
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: var(--leading-body);
  color: var(--text-primary);
  background: var(--bg-primary);
  cursor: none; /* custom cursor */
  overflow-x: hidden;
}

/* Restore cursor for mobile where custom cursor hides */
@media (pointer: coarse) {
  body { cursor: auto; }
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* Bodoni Moda for structural headings — high-contrast Vogue Didone */
h1, h2 {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: 400;
}

/* Cormorant for intimate h3 and editorial display class */
h3, .display {
  font-family: var(--font-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: 300;
}

/* ─── GRAIN OVERLAY ─── */
.grain {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  /* Animate grain subtly for life */
  animation: grainShift 0.3s steps(1) infinite;
}

@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-2px, 1px); }
  40%  { transform: translate(1px, -2px); }
  60%  { transform: translate(-1px, 2px); }
  80%  { transform: translate(2px, -1px); }
  100% { transform: translate(0, 0); }
}

/* ─── CUSTOM CURSOR — heart ♥ / heels 👠 switcher ─── */
.cursor {
  position: fixed;
  font-size: 28px;
  line-height: 1;
  color: var(--accent); /* heart ♥ is a text char → crimson; emoji 👠 uses native colors */
  pointer-events: none;
  z-index: 998;
  transform: translate(-50%, -50%) scale(1);
  /* spring easing makes the pop-back feel alive */
  transition: transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.12s ease;
  user-select: none;
  will-change: left, top, transform;
}

/* Scale-out phase while the symbol is being swapped by JS */
.cursor--switching {
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}

/* Heels emoji is slightly wider — bump size so it reads cleanly */
.cursor--heels {
  font-size: 32px;
}

/* Scale up on interactive elements */
body:has(a:hover) .cursor,
body:has(button:hover) .cursor {
  transform: translate(-50%, -50%) scale(1.35);
}

/* ─── NAVIGATION ─── */
.nav {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 24px var(--container-pad);
  z-index: 100;
  transition: background 300ms ease, backdrop-filter 300ms ease, border-color 300ms ease, padding 300ms ease;
  border-bottom: 1px solid transparent;
}

.nav.scrolled {
  background: rgba(250, 250, 248, 0.90);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding-top: 16px;
  padding-bottom: 16px;
}

/* Dark version when over hero */
.nav.nav--dark .nav__brand { color: var(--text-inverse); }
.nav.nav--dark .nav__links a { color: rgba(250, 250, 248, 0.5); }
.nav.nav--dark .nav__links a:hover { color: var(--text-inverse); }

.nav__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__brand {
  font-family: var(--font-heading); /* Bodoni Moda — the magazine masthead */
  font-optical-sizing: auto;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.10em;
  transition: color var(--ease-fast);
}

.nav__links {
  display: flex;
  gap: clamp(20px, 3.5vw, 44px);
}

.nav__links a {
  font-size: var(--type-nav);
  font-weight: 400;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--ease-fast);
}

.nav__links a:hover { color: var(--text-primary); }

/* ─── SECTION BASE ─── */
.section {
  padding: var(--space-section) 0;
}

.section--dark {
  background: var(--bg-dark);
  color: var(--text-inverse);
}

.section--secondary {
  background: var(--bg-secondary);
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ─── EYEBROW LABELS — Vogue tracked uppercase ─── */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

/* ─── SECTION MARKS — Roman numerals as editorial chapter markers ─── */
.section-mark {
  display: block;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.30em;
  color: var(--text-muted);
  opacity: 0.45;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
  width: 40px; /* hairline rule spans just enough for the numeral */
  text-indent: 2px;
}

.section-mark--light {
  color: rgba(250, 250, 248, 0.3);
  border-bottom-color: rgba(250, 250, 248, 0.10);
  opacity: 1;
}

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  font-family: var(--font-body);
  font-size: var(--type-caption);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-radius: var(--radius);
  cursor: none;
  transition: background var(--ease-fast), color var(--ease-fast), border-color var(--ease-fast);
  border: 1px solid transparent;
}

.btn--light {
  background: var(--text-inverse);
  color: var(--bg-dark);
  border-color: var(--text-inverse);
}

.btn--light:hover {
  background: transparent;
  color: var(--text-inverse);
}

.btn--outline-light {
  background: transparent;
  color: var(--text-inverse);
  border-color: rgba(250, 250, 248, 0.35);
}

.btn--outline-light:hover {
  border-color: var(--text-inverse);
}

/* ═══════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════ */

.hero {
  display: grid;
  grid-template-columns: 55fr 45fr;
  min-height: 100vh;
  background: var(--bg-dark);
  overflow: hidden;
  position: relative;
}

.hero__text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--container-pad);
  padding-top: 120px;
  padding-bottom: clamp(64px, 10vw, 120px);
  gap: clamp(12px, 2vw, 20px);
  position: relative;
  z-index: 2;
}

.hero__eyebrow {
  color: var(--accent);
  margin-bottom: 4px;
  /* Animate in after name */
  opacity: 0;
  transform: translateY(8px);
  animation: fadeUp 0.6s 0.3s forwards;
}

/* Vogue magazine edition line — "EDICIÓ ESPECIAL · PRIMAVERA 2026 · Nº 1" */
.hero__edition {
  display: block;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(250, 250, 248, 0.28);
  margin-bottom: 4px;
  opacity: 0;
  animation: fadeUp 0.6s 0.5s forwards;
}

/* Letter-by-letter hero name reveal — Bodoni Moda for maximum Vogue impact */
.hero__name {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-size: var(--type-display);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--text-inverse);
  line-height: 0.85;
  display: flex;
  overflow: hidden;
}

.char {
  display: inline-block;
  /* Each char pressed into view from below, staggered like a printing press */
  animation: charReveal 1.0s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i) * 90ms + 120ms);
}

@keyframes charReveal {
  from {
    transform: translateY(110%);
    opacity: 0;
    filter: blur(3px);  /* ink-set blur — clears as char arrives */
  }
  to {
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
  }
}

.hero__tagline {
  font-family: var(--font-display); /* Cormorant — warm, personal */
  font-size: clamp(18px, 2.5vw, 30px);
  font-weight: 300;
  color: var(--text-inverse);
  line-height: 1.3;
  opacity: 0;
  animation: fadeUp 0.8s 0.7s forwards;
}

.hero__tagline em {
  font-style: italic;
  color: rgba(250, 250, 248, 0.65);
}

.hero__disciplines {
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.28em;   /* pushed Vogue tracking */
  text-transform: uppercase;
  color: rgba(250, 250, 248, 0.38);
  opacity: 0;
  animation: fadeUp 0.7s 1.0s forwards;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--type-caption);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250, 250, 248, 0.55);
  margin-top: 8px;
  transition: color var(--ease-mid);
  opacity: 0;
  animation: fadeUp 0.7s 1.2s forwards;
}

.hero__cta svg {
  transition: transform var(--ease-mid);
}

.hero__cta:hover {
  color: var(--text-inverse);
}

.hero__cta:hover svg {
  transform: translateY(4px);
}

/* Hero visual column */
.hero__visual {
  position: relative;
  overflow: hidden;
}

/* Editorial image frame */
.hero__image-frame {
  position: absolute;
  inset: 0;
}

/* hero__image-frame img: used when a real photo replaces the editorial panel */
.hero__image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.08) saturate(0.92);
}

/* lineExpand keyframe — shared by editorial lines */
@keyframes lineExpand {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* Scroll indicator line */
.hero__scroll-line {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 60px;
  background: rgba(250, 250, 248, 0.2);
  transform-origin: bottom;
  animation: scrollLine 2.5s ease-in-out infinite 2.5s;
  z-index: 10;
}

@keyframes scrollLine {
  0%, 100% { transform: scaleY(1); opacity: 0.2; }
  50%       { transform: scaleY(0.5); opacity: 0.7; }
}

/* Hero mobile */
@media (max-width: 768px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: 50vh auto;
  }

  .hero__visual { grid-row: 1; }
  .hero__text {
    grid-row: 2;
    padding-top: 48px;
    justify-content: flex-start;
  }

  .hero__scroll-line { display: none; }
}

/* ─── Shared fade-up animation ─── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ═══════════════════════════════════════════════
   HERO EDITORIAL COLLAGE — Vogue × Devil Wears Prada
   Pure typographic composition, no image required.
   ═══════════════════════════════════════════════ */

.hero__editorial {
  position: relative;
  width: 100%;
  height: 100%;
  background: #0a0a0a; /* slightly deeper than hero bg — creates depth separation */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(32px, 5vw, 56px) clamp(28px, 4vw, 48px);
  overflow: hidden;
  /* Subtle warm noise texture to feel like premium paper */
  background-image:
    radial-gradient(ellipse at 70% 20%, rgba(196, 30, 58, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(250, 250, 248, 0.02) 0%, transparent 50%);
}

/* ── Background "MODE" — enormous, nearly invisible, adds depth ── */
.editorial__bg-word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-55%, -50%);
  font-family: var(--font-display);
  font-size: clamp(140px, 22vw, 280px);
  font-weight: 300;
  color: rgba(250, 250, 248, 0.035);
  letter-spacing: -0.04em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  line-height: 1;
  opacity: 0;
  animation: fadeIn 3s 1.2s forwards;
}

/* ── Editorial separator lines — draw left to right ── */
.editorial__line {
  height: 1px;
  background: rgba(250, 250, 248, 0.10);
  transform: scaleX(0);
  transform-origin: left;
  flex-shrink: 0;
}

.editorial__line--1    { animation: lineExpand 1.0s cubic-bezier(0.16,1,0.3,1) 1.35s both; }
.editorial__line--2    { animation: lineExpand 0.9s cubic-bezier(0.16,1,0.3,1) 1.55s both; }
.editorial__line--3    { animation: lineExpand 0.9s cubic-bezier(0.16,1,0.3,1) 2.05s both; }
.editorial__line--4    { animation: lineExpand 1.0s cubic-bezier(0.16,1,0.3,1) 2.25s both; }
.editorial__line--half {
  width: 45%;
  animation: lineExpand 0.7s cubic-bezier(0.16,1,0.3,1) 1.85s both;
}

/* ── City strip: Milan · Paris · BARCELONA ── */
.editorial__cities {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: clamp(9px, 0.9vw, 11px);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 250, 248, 0.4);
  opacity: 0;
  animation: fadeUp 0.6s 1.5s forwards;
  flex-shrink: 0;
}

.editorial__sep {
  color: rgba(250, 250, 248, 0.18);
}

/* Barcelona always in accent red — the destination */
.editorial__city-accent {
  color: var(--accent);
  letter-spacing: 0.20em;
}

/* ── Season row: large SS left, vertical "Collection" right ── */
.editorial__season-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: clamp(8px, 1.5vw, 16px) 0;
  opacity: 0;
  animation: fadeUp 0.7s 1.65s forwards;
  flex-shrink: 0;
}

.editorial__season {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1;
}

.editorial__season-num {
  font-family: var(--font-display);
  font-size: clamp(52px, 8vw, 96px);
  font-weight: 300;
  color: rgba(250, 250, 248, 0.08);
  letter-spacing: -0.04em;
  line-height: 0.85;
}

.editorial__season-year {
  font-family: var(--font-body);
  font-size: clamp(9px, 0.8vw, 10px);
  font-weight: 400;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(250, 250, 248, 0.3);
}

.editorial__vert-label {
  font-family: var(--font-display);
  font-size: clamp(10px, 0.9vw, 12px);
  font-style: italic;
  color: rgba(250, 250, 248, 0.25);
  letter-spacing: 0.10em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding-bottom: 4px;
}

/* ── Main display words: Visual / Merchandising ── */
.editorial__display {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  justify-content: center;
  padding: clamp(8px, 1.5vw, 16px) 0;
  opacity: 0;
  animation: fadeUp 0.9s 1.75s forwards;
}

.editorial__word {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.5vw, 88px);
  font-weight: 300;
  color: var(--text-inverse);
  line-height: 0.92;
  letter-spacing: -0.025em;
}

.editorial__word--italic {
  font-style: italic;
  color: rgba(250, 250, 248, 0.5);
  font-size: clamp(30px, 5vw, 68px);
}

/* ── Disciplines ── */
.editorial__disciplines {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.8vw, 12px);
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: clamp(8px, 0.75vw, 10px);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 250, 248, 0.3);
  flex-wrap: wrap;
  flex-shrink: 0;
  opacity: 0;
  animation: fadeIn 0.6s 2.0s forwards;
}

/* ── Brand names — staggered vertical list ── */
.editorial__brands {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.6vw, 8px);
  padding: clamp(10px, 1.5vw, 16px) 0;
  flex-shrink: 0;
}

.editorial__brand {
  font-family: var(--font-display);
  font-size: clamp(16px, 2.2vw, 26px);
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.2;
  /* Staggered opacity: first brand 70%, last brand 30% — depth recession effect */
  color: rgba(250, 250, 248, calc(0.65 - var(--bi) * 0.1));
  opacity: 0;
  animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(2.1s + var(--bi) * 70ms);
  transition: color 200ms ease;
}

.editorial__brand:hover {
  color: rgba(250, 250, 248, 0.9);
}

/* ── Corner micro-label: BCN · 2027 ── */
.editorial__corner {
  position: absolute;
  bottom: clamp(16px, 2.5vw, 28px);
  right: clamp(16px, 2.5vw, 28px);
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 250, 248, 0.18);
  opacity: 0;
  animation: fadeIn 0.8s 2.5s forwards;
}

/* Mobile: editorial collapses to a banner */
@media (max-width: 768px) {
  .hero__editorial {
    padding: 24px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
  }

  .editorial__bg-word  { font-size: 80px; }
  .editorial__line--half { display: none; }
  .editorial__vert-label { display: none; }
  .editorial__season-row { padding: 6px 0; }
  .editorial__corner { display: none; }
}

/* ═══════════════════════════════════════════════
   SCROLL REVEAL
   ═══════════════════════════════════════════════ */

/* Base reveal — subtle 8px lift, 900ms decelerate. The clip-path / tracking
   animations on children carry the editorial weight; this is just the foundation. */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger siblings within grids */
.reframe__grid .reveal:nth-child(2),
.paths__cards  .reveal:nth-child(2),
.week__days    .day-card:nth-child(2) { transition-delay: 90ms; }

.reframe__grid .reveal:nth-child(3),
.paths__cards  .reveal:nth-child(3),
.week__days    .day-card:nth-child(3) { transition-delay: 180ms; }

.paths__cards  .reveal:nth-child(4),
.week__days    .day-card:nth-child(4) { transition-delay: 270ms; }

.week__days .day-card:nth-child(5) { transition-delay: 360ms; }

/* Places grid — 3-column so stagger feels like a press sheet being populated */
.places__grid .reveal:nth-child(2) { transition-delay:  70ms; }
.places__grid .reveal:nth-child(3) { transition-delay: 140ms; }
.places__grid .reveal:nth-child(4) { transition-delay: 210ms; }
.places__grid .reveal:nth-child(5) { transition-delay: 280ms; }
.places__grid .reveal:nth-child(6) { transition-delay: 350ms; }
.places__grid .reveal:nth-child(7) { transition-delay: 420ms; }

/* ═══════════════════════════════════════════════
   CHILD ANIMATIONS — triggered by parent .reveal gaining .is-visible
   Cascade: section-mark draws (0ms) → eyebrow tracks out (120ms)
            → h2 wipes top-to-bottom (220ms) → sub-text arrives (400ms)
   Cards: number fades (120ms) → name slides (180ms) → personal text (350ms)
   Close: special slow sequence for emotional climax (see below)
   ═══════════════════════════════════════════════ */

/* ── Section mark: hairline rule stamps in from the left ── */
.reveal .section-mark {
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.4s ease;
}
.reveal.is-visible .section-mark      { transform: scaleX(1); opacity: 0.45; }
.reveal.is-visible .section-mark--light { transform: scaleX(1); opacity: 1; }

/* ── Eyebrow labels: letter-spacing expands as if being typeset ── */
.reveal .eyebrow {
  letter-spacing: 0.03em;
  opacity: 0;
  transition: letter-spacing 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.12s,
              opacity 0.55s ease 0.12s;
}
.reveal.is-visible .eyebrow {
  letter-spacing: var(--tracking-label);
  opacity: 1;
}

/* ── Section h2: clip-path wipe — text materialises top-to-bottom (print press) ── */
.reveal h2 {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.22s;
}
.reveal.is-visible h2 {
  clip-path: inset(0 0 0% 0);
}

/* ── Sub-text under section headers: gentle fade-up after h2 ── */
.reveal .paths__sub,
.reveal .places__sub,
.reveal .portfolio__sub,
.reveal .week__sub {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.8s ease 0.55s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.55s;
}
.reveal.is-visible .paths__sub,
.reveal.is-visible .places__sub,
.reveal.is-visible .portfolio__sub,
.reveal.is-visible .week__sub {
  opacity: 1;
  transform: translateY(0);
}

/* ── Card numbers (01 02 03): arrive slightly after the card container ── */
.reveal .reframe__card-num {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s ease 0.12s,
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.12s;
}
.reveal.is-visible .reframe__card-num {
  opacity: 1;
  transform: translateY(0);
}

.reveal .path-card__num {
  opacity: 0;
  transition: opacity 0.8s ease 0.1s;
}
.reveal.is-visible .path-card__num { opacity: 1; }

/* ── Brand names in place cards: slide up after the card border appears ── */
.reveal .place-card__name {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.7s ease 0.18s,
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.18s;
}
.reveal.is-visible .place-card__name { opacity: 1; transform: translateY(0); }

/* ── Portfolio project titles ── */
.reveal .portfolio__item-title {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.65s ease 0.2s,
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
.reveal.is-visible .portfolio__item-title { opacity: 1; transform: translateY(0); }

/* ── Personal italic text in path cards: arrives last, like a whisper ── */
.reveal .path-card__personal {
  opacity: 0;
  transition: opacity 1.0s ease 0.38s;
}
.reveal.is-visible .path-card__personal { opacity: 0.7; }

/* ── Day card titles ── */
.reveal .day-card__title {
  opacity: 0;
  transition: opacity 0.7s ease 0.15s;
}
.reveal.is-visible .day-card__title { opacity: 1; }

/* ══ CLOSE SECTION — slow love-letter sequence ══════════════════════════════
   Container becomes visible instantly; children arrive over ~3s in order:
   eyebrow → quote (slow, 2s) → divider draws → body arrives → signature → CTAs
   ══════════════════════════════════════════════════════════════════════════ */
.close__inner.reveal {
  transform: translateY(0);          /* no translate — this is a pure fade reveal */
  transition: opacity 0.25s ease;    /* container becomes visible fast */
}

/* The enormous quote is the centrepiece — slowest, most deliberate */
.close__inner .close__quote {
  opacity: 0;
  transition: opacity 2.2s cubic-bezier(0.22, 0, 0.08, 1) 0.2s;
}
.close__inner.is-visible .close__quote { opacity: 1; }

/* Thin crimson divider draws in like a signature underline */
.close__inner .close__divider {
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 2.0s,
              opacity 0.3s ease 2.0s;
}
.close__inner.is-visible .close__divider { transform: scaleX(1); opacity: 1; }

/* Body text slides up after the quote has largely arrived */
.close__inner .close__body {
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 1.0s ease 2.2s,
              transform 1.0s cubic-bezier(0.16, 1, 0.3, 1) 2.2s;
}
.close__inner.is-visible .close__body { opacity: 1; transform: translateY(0); }

/* Signature fades in last — "— Jordi" is the final word */
.close__inner .close__signature {
  opacity: 0;
  transition: opacity 1.2s ease 2.8s;
}
.close__inner.is-visible .close__signature { opacity: 1; }

/* CTAs appear after the signature — action follows emotion */
.close__inner .close__ctas {
  opacity: 0;
  transition: opacity 0.9s ease 3.2s;
}
.close__inner.is-visible .close__ctas { opacity: 1; }

/* Job rows stagger */
.job-list .job-row:nth-child(2) { transition-delay: 60ms; }
.job-list .job-row:nth-child(3) { transition-delay: 120ms; }
.job-list .job-row:nth-child(4) { transition-delay: 180ms; }
.job-list .job-row:nth-child(5) { transition-delay: 240ms; }
.job-list .job-row:nth-child(6) { transition-delay: 300ms; }
.job-list .job-row:nth-child(7) { transition-delay: 360ms; }
.job-list .job-row:nth-child(8) { transition-delay: 420ms; }
.job-list .job-row:nth-child(9) { transition-delay: 480ms; }
.job-list .job-row:nth-child(10) { transition-delay: 540ms; }

/* ═══════════════════════════════════════════════
   REFRAME SECTION — "No empiezas de cero"
   ═══════════════════════════════════════════════ */

.reframe { background: var(--bg-primary); }

.reframe__header {
  max-width: 560px;
  margin-bottom: var(--space-element);
}

.reframe__title {
  font-family: var(--font-heading); /* Bodoni — structural statement */
  font-optical-sizing: auto;
  font-size: var(--type-h1);
  font-weight: 400;
  margin-top: 8px;
  line-height: 1.0;
}

.reframe__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  margin-bottom: var(--space-element);
}

.reframe__card {
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--border);
  position: relative;
  transition: transform var(--ease-mid), border-color var(--ease-mid);
  background: var(--bg-card);
  overflow: hidden;
}

.reframe__card:hover {
  border-color: rgba(196, 30, 58, 0.4);
  background: var(--bg-primary); /* subtle warmth shift */
}

/* Growing red accent on left edge */
.reframe__card-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0%;
  background: var(--accent);
  transition: height 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.reframe__card:hover .reframe__card-accent,
.reframe__card.is-visible .reframe__card-accent {
  height: 100%;
}

.reframe__card-num {
  font-family: var(--font-heading); /* Bodoni numbers — dramatic editorial */
  font-optical-sizing: auto;
  font-size: 68px;
  font-weight: 400;
  color: var(--border);
  line-height: 0.9;
  letter-spacing: -0.03em;
  display: block;
  margin-bottom: 20px;
}

.reframe__card-title {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 400;
  margin-bottom: 12px;
  letter-spacing: -0.015em;
}

.reframe__card-body {
  font-size: var(--type-sm);
  color: var(--text-muted);
  line-height: 1.7;
}

/* Editorial pull quote — Vogue-size, takes up visual real estate */
.reframe__quote {
  border-top: 1px solid var(--border);
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(8px, 2vw, 20px);
  position: relative;
}

/* Quotation mark as decorative opener */
.reframe__quote blockquote::before {
  content: '\201C';
  font-family: var(--font-display);
  font-size: clamp(80px, 14vw, 180px);
  font-weight: 300;
  line-height: 0;
  color: var(--border);
  position: absolute;
  top: clamp(36px, 5vw, 64px);
  left: -8px;
  pointer-events: none;
}

.reframe__quote blockquote p {
  font-family: var(--font-display); /* Cormorant — personal, editorial italic */
  font-size: clamp(26px, 3.8vw, 52px);
  font-style: italic;
  font-weight: 300;
  line-height: 1.3;
  color: var(--text-primary);
  max-width: 860px;
  padding-left: clamp(24px, 4vw, 60px); /* clear the decorative quote mark */
}

.reframe__quote blockquote cite {
  display: block;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 24px;
  padding-left: clamp(24px, 4vw, 60px);
  font-style: normal;
}

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

/* ═══════════════════════════════════════════════
   PATHS SECTION — Career cards (accordion)
   ═══════════════════════════════════════════════ */

.paths { background: var(--bg-secondary); }

.paths__header {
  max-width: 640px;
  margin-bottom: var(--space-element);
}

.paths__header h2 {
  font-size: var(--type-h2);
  margin-top: 8px;
  margin-bottom: 16px;
}

.paths__sub {
  font-size: var(--type-sm);
  color: var(--text-muted);
  line-height: 1.7;
}

.paths__cards {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
}

/* Path card accordion */
.path-card {
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.path-card__header {
  display: grid;
  grid-template-columns: 80px 1fr 40px;
  align-items: center;
  gap: 24px;
  padding: clamp(24px, 3vw, 36px) 0;
  cursor: pointer;
  transition: color var(--ease-fast);
}

.path-card__header:focus { outline: none; }
.path-card__header:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.path-card__num {
  font-family: var(--font-heading); /* Bodoni — editorial issue numbers */
  font-optical-sizing: auto;
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 400;
  color: var(--border);
  line-height: 0.9;
  letter-spacing: -0.03em;
  transition: color var(--ease-mid);
}

.path-card.is-open .path-card__num { color: var(--accent); }

.path-card__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 400;
  letter-spacing: -0.01em;
  transition: color var(--ease-fast);
}

.path-card__teaser {
  font-size: var(--type-sm);
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.5;
}

.path-card__personal {
  font-size: var(--type-sm);
  font-style: italic;
  color: var(--accent);
  opacity: 0.7;
  margin-top: 10px;
  line-height: 1.5;
}

.path-card__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  flex-shrink: 0;
  transition: border-color var(--ease-fast), background var(--ease-fast), color var(--ease-fast);
}

.path-card__toggle svg {
  transition: transform 300ms ease;
}

.path-card.is-open .path-card__toggle {
  border-color: var(--accent);
  background: var(--accent);
  color: white;
}

.path-card.is-open .path-card__toggle svg {
  transform: rotate(180deg);
}

/* Accordion body — max-height transition */
.path-card__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.path-card.is-open .path-card__body {
  max-height: 600px;
}

.path-card__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 0 0 clamp(32px, 4vw, 48px) 104px;  /* aligns with text, not num */
  border-top: 1px solid var(--border);
}

.path-card__col h4 {
  font-family: var(--font-body);
  font-size: var(--type-caption);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
  margin-top: 20px;
}

.path-card__col h4:first-child { margin-top: 20px; }

.path-card__col p,
.path-card__col li {
  font-size: var(--type-sm);
  color: var(--text-primary);
  line-height: 1.7;
}

.path-card__col ul { display: flex; flex-direction: column; gap: 4px; }

.path-card__col li::before {
  content: '—';
  margin-right: 8px;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .path-card__header { grid-template-columns: 56px 1fr 32px; gap: 16px; }
  .path-card__content { grid-template-columns: 1fr; gap: 0; padding-left: 0; }
}

/* ═══════════════════════════════════════════════
   JOBS SECTION — Index listing
   ═══════════════════════════════════════════════ */

.jobs { background: var(--bg-primary); }

.jobs__header {
  max-width: 640px;
  margin-bottom: var(--space-element);
}

.jobs__header h2 {
  font-size: var(--type-h2);
  margin-top: 8px;
  margin-bottom: 16px;
}

.jobs__sub {
  font-size: var(--type-sm);
  color: var(--text-muted);
  line-height: 1.7;
}

.jobs__sub em { font-style: normal; color: var(--accent); }

/* Job list index */
.job-list {
  border-top: 1px solid var(--border);
  margin-bottom: 32px;
}

.job-row {
  display: grid;
  grid-template-columns: 100px 200px 1fr 120px 80px;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  transition: padding-left var(--ease-mid), background var(--ease-mid);
}

.job-row:hover {
  padding-left: 12px;
  background: var(--bg-secondary);
  margin: 0 -12px;
  padding-right: 12px;
}

/* Tags */
.job-tag {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  padding: 4px 8px;
  color: var(--text-muted);
  white-space: nowrap;
}

.job-tag--urgent {
  border-color: var(--accent);
  color: var(--accent);
  position: relative;
}

/* Pulse animation on urgent tag */
.job-tag--urgent::before {
  content: '';
  position: absolute;
  inset: -2px;
  border: 1px solid var(--accent);
  animation: urgentPulse 2s ease-in-out infinite;
}

@keyframes urgentPulse {
  0%, 100% { opacity: 0; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.06); }
}

.job-tag--medium {
  border-color: var(--border);
  color: var(--text-muted);
}

.job-company {
  font-size: var(--type-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.job-title {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.job-category {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.job-apply {
  font-size: var(--type-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  position: relative;
  transition: color var(--ease-fast);
  justify-self: end;
}

.job-apply::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width var(--ease-mid);
}

.job-apply:hover { color: var(--accent); }
.job-apply:hover::after { width: 100%; }

.jobs__note {
  font-size: var(--type-caption);
  color: var(--text-muted);
  line-height: 1.6;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* Jobs mobile */
@media (max-width: 900px) {
  .job-row {
    grid-template-columns: 90px 1fr 70px;
    grid-template-rows: auto auto;
    gap: 8px 16px;
  }

  .job-tag     { grid-column: 1; grid-row: 1; }
  .job-company { grid-column: 2; grid-row: 1; }
  .job-apply   { grid-column: 3; grid-row: 1; }
  .job-title   { grid-column: 1 / -1; grid-row: 2; }
  .job-category { display: none; }
}

@media (max-width: 560px) {
  .job-row { grid-template-columns: 1fr auto; }
  .job-tag { grid-column: 1; }
  .job-apply { grid-column: 2; }
  .job-company { grid-column: 1 / -1; }
  .job-title { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════
   PORTFOLIO SECTION
   ═══════════════════════════════════════════════ */

.portfolio { background: var(--bg-dark); color: var(--text-inverse); }

.portfolio__header {
  max-width: 640px;
  margin-bottom: var(--space-element);
}

.portfolio__header h2 {
  font-size: var(--type-h2);
  margin-top: 8px;
  margin-bottom: 16px;
  color: var(--text-inverse);
}

.portfolio__sub {
  font-size: var(--type-sm);
  color: rgba(250, 250, 248, 0.5);
  line-height: 1.7;
  max-width: 500px;
}

/* Progress bar */
.portfolio__progress-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: var(--space-element);
}

.portfolio__progress-bar {
  flex: 1;
  height: 2px;
  background: var(--border-dark);
  position: relative;
}

.portfolio__progress-fill {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 0%;
  background: var(--accent);
  transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio__progress-label {
  font-size: var(--type-caption);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(250, 250, 248, 0.4);
  white-space: nowrap;
}

/* Portfolio items */
.portfolio__items {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border-dark);
}

.portfolio__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--border-dark);
  align-items: start;
  transition: opacity var(--ease-mid);
}

.portfolio__item.is-done {
  opacity: 0.4;
}

.portfolio__check-label {
  position: relative;
  width: 24px;
  height: 24px;
  margin-top: 4px;
  cursor: pointer;
  display: block;
  flex-shrink: 0;
}

.portfolio__checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.portfolio__check-box {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(250, 250, 248, 0.25);
  transition: background var(--ease-fast), border-color var(--ease-fast);
}

.portfolio__checkbox:checked + .portfolio__check-box {
  background: var(--accent);
  border-color: var(--accent);
}

.portfolio__checkbox:checked + .portfolio__check-box::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 3px;
  width: 6px;
  height: 10px;
  border: 1px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.portfolio__item-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.portfolio__week {
  font-size: var(--type-caption);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
}

.portfolio__item-title {
  font-family: var(--font-heading); /* Bodoni — project titles as headlines */
  font-optical-sizing: auto;
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 400;
  color: var(--text-inverse);
  letter-spacing: -0.02em;
  line-height: 1.0;
}

.portfolio__item-text p {
  font-size: var(--type-sm);
  color: rgba(250, 250, 248, 0.5);
  line-height: 1.7;
}

.portfolio__item-text p strong {
  color: rgba(250, 250, 248, 0.8);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════
   WEEK 1 SECTION
   ═══════════════════════════════════════════════ */

.week { background: var(--bg-primary); }

.week__header {
  max-width: 560px;
  margin-bottom: var(--space-element);
}

.week__header h2 {
  font-size: var(--type-h2);
  margin-top: 8px;
  margin-bottom: 16px;
}

.week__sub {
  font-size: var(--type-sm);
  color: var(--text-muted);
  line-height: 1.7;
}

/* Day cards — horizontal scroll on mobile */
.week__days {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--grid-gap);
}

.day-card {
  border: 1px solid var(--border);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--ease-mid), box-shadow var(--ease-mid), border-color var(--ease-mid);
}

.day-card:hover {
  border-color: rgba(196, 30, 58, 0.30);
  box-shadow: 4px 4px 0 rgba(196, 30, 58, 0.06); /* architectural shadow, no float */
}

.day-card__label {
  font-size: var(--type-caption);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 16px 20px 0;
}

.day-card__accent {
  height: 3px;
  width: 0%;
  background: var(--accent);
  margin: 12px 0 0;
  transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.day-card.is-visible .day-card__accent {
  width: 100%;
}

.day-card__body {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.day-card__priority {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  padding: 3px 8px;
  color: var(--text-muted);
  align-self: flex-start;
}

.day-card__priority--urgent {
  border-color: var(--accent);
  color: var(--accent);
}

.day-card__title {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.day-card__body > p {
  font-size: var(--type-caption);
  color: var(--text-muted);
  line-height: 1.65;
  flex: 1;
}

.day-card__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.day-card__links a {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--ease-fast);
  position: relative;
}

.day-card__links a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width var(--ease-mid);
}

.day-card__links a:hover { color: var(--accent); }
.day-card__links a:hover::after { width: 100%; }

/* Week days mobile */
@media (max-width: 1100px) {
  .week__days { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
  .week__days {
    grid-template-columns: repeat(2, 1fr);
  }

  .week__days .day-card:last-child {
    grid-column: 1 / -1;
  }
}

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

/* ═══════════════════════════════════════════════
   CLOSING SECTION
   ═══════════════════════════════════════════════ */

.close {
  background: var(--bg-dark);
  min-height: 85vh;
  display: flex;
  align-items: center;
}

/* Centered single-column — full emotional impact */
.close__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(24px, 3.5vw, 40px);
  max-width: 800px;
}

.close__quote {
  font-family: var(--font-display); /* Cormorant — this is personal, not structural */
  font-size: clamp(48px, 7.5vw, 96px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--text-inverse);
}

.close__quote em {
  font-style: italic;
  color: rgba(250, 250, 248, 0.65);
}

/* Thin red accent line — replaces the number decoration */
.close__divider {
  width: 48px;
  height: 2px;
  background: var(--accent);
  flex-shrink: 0;
}

.close__body {
  font-size: clamp(14px, 1.4vw, 16px);
  color: rgba(250, 250, 248, 0.5);
  line-height: 1.8;
  max-width: 560px;
}

.close__signature {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 300;
  font-style: italic;
  color: rgba(250, 250, 248, 0.65);
  letter-spacing: 0.02em;
  margin-top: 8px;
}

.close__ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 8px;
}

/* ═══════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════ */

.footer {
  padding: 32px 0;
  border-top: 1px solid var(--border);
  background: var(--bg-primary);
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.footer__brand {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.footer__note {
  font-size: var(--type-caption);
  color: var(--text-muted);
  letter-spacing: 0.02em;
  text-align: right;
}

@media (max-width: 560px) {
  .footer__inner { flex-direction: column; align-items: flex-start; }
  .footer__note { text-align: left; }
}

/* ═══════════════════════════════════════════════
   HEART TUNNEL — scroll-driven perspective tunnel
   Section is tall; inner stage sticks to viewport.
   Scrolling through the section drives the depth.
   ═══════════════════════════════════════════════ */

.heart-tunnel {
  /* Scroll distance — scrolling through this reveals the infinite depth */
  height: 380vh;
  position: relative;
  background: var(--bg-dark);
}

/* Sticky viewport container — stays pinned while user scrolls */
.heart-tunnel__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg-dark);
}

.heart-tunnel__bar {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px clamp(24px, 4vw, 64px);
  border-top: 1px solid rgba(250, 250, 248, 0.08);
}

.heart-tunnel__brand {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(250, 250, 248, 0.30);
}

.heart-tunnel__note {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250, 250, 248, 0.18);
}

/* Canvas fills the remaining height inside the sticky stage */
.heart-tunnel__canvas {
  display: block;
  width: 100%;
  flex: 1;
  min-height: 0; /* required for flex children to shrink */
}

/* ─── FOCUS VISIBLE (accessibility) ─── */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════════
   PLACES TO WORK SECTION
   ═══════════════════════════════════════════════ */

.places { background: var(--bg-secondary); }

.places__header {
  max-width: 640px;
  margin-bottom: var(--space-element);
}

.places__header h2 {
  font-size: var(--type-h2);
  margin-top: 8px;
  margin-bottom: 16px;
}

.places__sub {
  font-size: var(--type-sm);
  color: var(--text-muted);
  line-height: 1.7;
}

/* Block: each category (Marcas / Eventos) */
.places__block {
  margin-bottom: clamp(48px, 7vw, 80px);
}

.places__block-header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 28px;
}

.places__category-label {
  font-size: var(--type-caption);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.places__category-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Grid — 3 columns on desktop, 2 on tablet, 1 on mobile */
.places__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}

/* Brand / Place card */
.place-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: transform var(--ease-mid), border-color var(--ease-mid);
}

/* Growing red accent line on left */
.place-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0%;
  background: var(--accent);
  transition: height 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.place-card:hover {
  border-color: rgba(196, 30, 58, 0.35);
  background: var(--bg-primary);
}

.place-card:hover::before,
.place-card.is-visible::before {
  height: 100%;
}

.place-card__type {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.place-card__name {
  font-family: var(--font-heading); /* Bodoni — brand names deserve Didone weight */
  font-optical-sizing: auto;
  font-size: clamp(30px, 3.8vw, 46px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 0.95;
  color: var(--text-primary);
}

.place-card__fit {
  font-size: var(--type-sm);
  color: var(--text-muted);
  line-height: 1.65;
  flex: 1;
}

/* Role chips at card bottom */
.place-card__roles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.place-card__roles span {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  padding: 3px 8px;
  color: var(--text-muted);
}

@media (max-width: 1000px) {
  .places__grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* Closing "y muchos más" line */
.places__more {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: clamp(32px, 5vw, 48px);
  border-top: 1px solid var(--border);
}

.places__more-line {
  width: 40px;
  height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}

.places__more-text {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 300;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════════
   PORTFOLIO SECTION — EXPANDED
   ═══════════════════════════════════════════════ */

/* Override item layout for the richer structure */
.portfolio__item {
  grid-template-columns: 56px 1fr;
  gap: 32px;
  padding: 40px 0;
  align-items: start;
}

.portfolio__item-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.portfolio__item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* Metadata chips (time, tools) */
.portfolio__meta-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.portfolio__meta-chip {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border: 1px solid var(--border-dark);
  padding: 3px 10px;
  color: rgba(250, 250, 248, 0.35);
}

.portfolio__item-concept {
  font-size: var(--type-sm);
  color: rgba(250, 250, 248, 0.6);
  line-height: 1.7;
  font-style: italic;
  max-width: 680px;
}

/* Two-column brief */
.portfolio__item-brief {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-top: 4px;
}

.portfolio__brief-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.portfolio__brief-label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250, 250, 248, 0.3);
  display: block;
}

.portfolio__brief-col p {
  font-size: var(--type-sm);
  color: rgba(250, 250, 248, 0.5);
  line-height: 1.7;
}

/* "Lo que demuestra" — the emotional hook, accent colored */
.portfolio__proves {
  color: rgba(250, 250, 248, 0.85) !important;
  font-weight: 400;
}

/* AI tools row — sits between meta chips and the title */
.portfolio__ai-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.portfolio__ai-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(196, 30, 58, 0.5);
  padding: 2px 7px;
  flex-shrink: 0;
  opacity: 0.9;
}

.portfolio__ai-tools {
  font-size: var(--type-caption);
  color: rgba(250, 250, 248, 0.35);
  line-height: 1.5;
  letter-spacing: 0.01em;
}

@media (max-width: 700px) {
  .portfolio__item-brief { grid-template-columns: 1fr; }
  .portfolio__item-top { flex-direction: column; align-items: flex-start; }
}

/* ─── Day card time label ─── */
.day-card__time {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0 20px 8px;
  display: block;
}

/* ═══════════════════════════════════════════════
   PDF DOWNLOAD BUTTON — Fixed floating
   ═══════════════════════════════════════════════ */

.pdf-download-btn {
  position: fixed;
  bottom: clamp(24px, 4vw, 40px);
  right: clamp(24px, 4vw, 40px);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px 13px 16px;
  background: var(--bg-dark);
  color: rgba(250, 250, 248, 0.75);
  border: 1px solid rgba(250, 250, 248, 0.14);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--ease-fast), color var(--ease-fast), border-color var(--ease-fast);
}

.pdf-download-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.pdf-download-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.65;
  transition: opacity var(--ease-fast);
}

.pdf-download-btn:hover svg { opacity: 1; }

@media (max-width: 480px) {
  .pdf-download-btn span { display: none; }
  .pdf-download-btn { padding: 13px 14px; }
}

/* ═══════════════════════════════════════════════
   PDF-ONLY CONTENT — invisible on screen
   ═══════════════════════════════════════════════ */

.pdf-only { display: none; }

/* Section container */
.pdf-section {
  padding: 0;
  margin: 0;
}

/* Part headers */
.pdf-part-header { margin-bottom: 18pt; }

.pdf-roman {
  display: block;
  font-family: var(--font-body);
  font-size: 7pt;
  font-weight: 400;
  letter-spacing: 0.30em;
  color: #aaa;
  border-bottom: 1pt solid #e0e0e0;
  padding-bottom: 7pt;
  margin-bottom: 10pt;
  width: 28pt;
}

.pdf-eyebrow-label {
  display: block;
  font-family: var(--font-body);
  font-size: 7pt;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #C41E3A;
  margin-bottom: 7pt;
}

.pdf-h2 {
  font-family: var(--font-heading);
  font-size: 26pt;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.0;
  color: #111;
  margin-bottom: 8pt;
}

.pdf-intro {
  font-family: var(--font-display);
  font-size: 11pt;
  font-style: italic;
  color: #555;
  line-height: 1.6;
  max-width: 520pt;
  margin-bottom: 18pt;
}

.pdf-h3 {
  font-family: var(--font-heading);
  font-size: 13pt;
  font-weight: 400;
  color: #111;
  margin-bottom: 8pt;
  letter-spacing: -0.01em;
}

/* ── Month roadmap ── */
.pdf-month { margin-bottom: 18pt; }

.pdf-month-header {
  display: flex;
  align-items: baseline;
  gap: 12pt;
  border-bottom: 1pt solid #e0e0e0;
  padding-bottom: 5pt;
  margin-bottom: 10pt;
}

.pdf-month-label {
  font-family: var(--font-body);
  font-size: 7pt;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #aaa;
}

.pdf-month-focus {
  font-family: var(--font-display);
  font-size: 15pt;
  font-weight: 300;
  font-style: italic;
  color: #333;
  letter-spacing: -0.01em;
}

.pdf-week-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8pt;
}

.pdf-week {
  display: flex;
  gap: 8pt;
  padding: 9pt 10pt;
  border: 1pt solid #ebebeb;
  background: #fafafa;
  page-break-inside: avoid;
}

.pdf-week-num {
  font-family: var(--font-body);
  font-size: 7.5pt;
  font-weight: 700;
  color: #C41E3A;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  width: 16pt;
  padding-top: 1pt;
}

.pdf-week-content { flex: 1; }

.pdf-week-content strong {
  font-family: var(--font-body);
  font-size: 7.5pt;
  font-weight: 600;
  color: #111;
  display: block;
  margin-bottom: 4pt;
}

.pdf-week-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2.5pt;
}

.pdf-week-content li {
  font-family: var(--font-body);
  font-size: 7.5pt;
  color: #555;
  line-height: 1.45;
  padding-left: 9pt;
  position: relative;
}

.pdf-week-content li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: #ccc;
}

.pdf-week-goal {
  display: block;
  font-family: var(--font-body);
  font-size: 7pt;
  font-weight: 600;
  font-style: italic;
  color: #C41E3A;
  letter-spacing: 0.02em;
  margin-top: 5pt;
  padding-top: 5pt;
  border-top: 1pt solid #ebebeb;
}

/* ── Cover letter ── */
.pdf-structure-block,
.pdf-template-block,
.pdf-note-block { margin-bottom: 14pt; }

.pdf-numbered-list {
  display: flex;
  flex-direction: column;
  gap: 8pt;
}

.pdf-numbered-item {
  display: flex;
  gap: 10pt;
  align-items: flex-start;
}

.pdf-item-num {
  font-family: var(--font-heading);
  font-size: 24pt;
  font-weight: 400;
  color: #e0dbd4;
  line-height: 0.85;
  flex-shrink: 0;
  width: 20pt;
}

.pdf-numbered-item strong {
  font-family: var(--font-body);
  font-size: 7.5pt;
  font-weight: 600;
  color: #111;
  display: block;
  margin-bottom: 3pt;
}

.pdf-numbered-item p {
  font-family: var(--font-body);
  font-size: 8.5pt;
  color: #555;
  line-height: 1.55;
}

.pdf-letter-template {
  background: #f9f7f4;
  border-left: 3pt solid #C41E3A;
  padding: 12pt 14pt;
  font-family: var(--font-display);
  font-size: 9.5pt;
  line-height: 1.65;
  color: #333;
  font-style: italic;
  margin: 0;
}

.pdf-note-block {
  border: 1pt solid #e8e4de;
  padding: 9pt 12pt;
  background: #fafaf8;
}

.pdf-note-block strong {
  font-family: var(--font-body);
  font-size: 7pt;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #333;
  display: block;
  margin-bottom: 5pt;
}

.pdf-rules {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3.5pt;
}

.pdf-rules li {
  font-family: var(--font-body);
  font-size: 8pt;
  color: #555;
  line-height: 1.45;
  padding-left: 11pt;
  position: relative;
}

.pdf-rules li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: #C41E3A;
  font-weight: 600;
}

/* ── Interview questions ── */
.pdf-questions {
  display: flex;
  flex-direction: column;
  gap: 11pt;
  margin-bottom: 16pt;
}

.pdf-question {
  border-bottom: 1pt solid #ebebeb;
  padding-bottom: 10pt;
  page-break-inside: avoid;
}

.pdf-question:last-child { border-bottom: none; }

.pdf-question-header {
  display: flex;
  align-items: baseline;
  gap: 5pt;
  margin-bottom: 5pt;
}

.pdf-q-mark {
  font-family: var(--font-display);
  font-size: 26pt;
  font-weight: 300;
  color: #e0dbd4;
  line-height: 0.65;
  flex-shrink: 0;
}

.pdf-q-text {
  font-family: var(--font-display);
  font-size: 13.5pt;
  font-weight: 400;
  font-style: italic;
  color: #111;
  line-height: 1.2;
}

.pdf-answer-label {
  font-family: var(--font-body);
  font-size: 6.5pt;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #aaa;
  display: block;
  margin-bottom: 3pt;
}

.pdf-answer p {
  font-family: var(--font-body);
  font-size: 8.5pt;
  color: #444;
  line-height: 1.6;
}

/* ── Psychology principles ── */
.pdf-principles {
  display: flex;
  flex-direction: column;
  gap: 12pt;
  margin-bottom: 18pt;
}

.pdf-principle {
  display: flex;
  gap: 11pt;
  align-items: flex-start;
  padding-bottom: 12pt;
  border-bottom: 1pt solid #ebebeb;
  page-break-inside: avoid;
}

.pdf-principle:last-child { border-bottom: none; }

.pdf-principle-num {
  font-family: var(--font-heading);
  font-size: 24pt;
  font-weight: 400;
  color: #e8e4de;
  line-height: 0.85;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  width: 26pt;
}

.pdf-principle-title {
  font-family: var(--font-heading);
  font-size: 12pt;
  font-weight: 400;
  color: #111;
  margin-bottom: 4pt;
  letter-spacing: -0.01em;
}

.pdf-principle-body p {
  font-family: var(--font-body);
  font-size: 8.5pt;
  color: #444;
  line-height: 1.65;
}

.pdf-principle-body em {
  font-style: italic;
  color: #222;
}

/* ── PDF closing quote ── */
.pdf-closing { padding-top: 18pt; }

.pdf-closing-line {
  width: 36pt;
  height: 2pt;
  background: #C41E3A;
  margin-bottom: 12pt;
}

.pdf-closing-quote {
  font-family: var(--font-display);
  font-size: 15pt;
  font-style: italic;
  font-weight: 300;
  color: #333;
  line-height: 1.45;
  letter-spacing: -0.01em;
  border: none;
  padding: 0;
  margin: 0;
}

.pdf-closing-quote cite {
  display: block;
  font-family: var(--font-body);
  font-size: 7.5pt;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.10em;
  color: #aaa;
  margin-top: 7pt;
}

/* Page-break utility */
.pdf-page-break { page-break-before: always; }

/* ═══════════════════════════════════════════════
   PRINT STYLES — A4 formatted PDF
   ═══════════════════════════════════════════════ */

@media print {

  @page {
    size: A4;
    margin: 18mm 22mm;
  }

  /* ── HIDE SCREEN-ONLY ELEMENTS ── */
  .grain,
  .cursor,
  .nav,
  .hero__scroll-line,
  .hero__visual,
  .heart-tunnel,
  .portfolio__progress-wrap,
  .path-card__toggle,
  .pdf-download-btn,
  .hero__cta,
  .close__ctas,
  .day-card__links,
  .portfolio__check-label,
  .portfolio__ai-row,
  .portfolio__meta-chips,
  .places__more { display: none !important; }

  /* ── GLOBAL RESET ── */
  *, *::before, *::after {
    box-shadow: none !important;
    animation: none !important;
    transition: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body {
    background: #fff !important;
    color: #111 !important;
    font-size: 9pt;
    overflow-x: visible !important;
    cursor: auto !important;
  }

  /* ── SHOW PDF-ONLY CONTENT ── */
  .pdf-only { display: block !important; }

  /* ── OVERRIDE ALL REVEAL ANIMATIONS — everything visible ── */
  .reveal,
  .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    clip-path: none !important;
  }

  .reveal h2 {
    clip-path: none !important;
    opacity: 1 !important;
  }

  .reveal .eyebrow {
    letter-spacing: 0.26em !important;
    opacity: 1 !important;
  }

  .reveal .section-mark { transform: none !important; opacity: 0.45 !important; }

  .reveal .paths__sub,
  .reveal .places__sub,
  .reveal .portfolio__sub,
  .reveal .week__sub,
  .reveal .reframe__card-num,
  .reveal .path-card__num,
  .reveal .place-card__name,
  .reveal .portfolio__item-title,
  .reveal .path-card__personal,
  .reveal .day-card__title { opacity: 1 !important; transform: none !important; }

  .close__inner .close__quote,
  .close__inner .close__body,
  .close__inner .close__signature {
    opacity: 1 !important; transform: none !important;
  }

  .close__inner .close__divider {
    transform: scaleX(1) !important; opacity: 1 !important;
  }

  /* Hero chars (letter-by-letter animation) */
  .char {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  /* Editorial panel elements */
  .editorial__brand, .editorial__cities, .editorial__season-row,
  .editorial__display, .editorial__disciplines, .editorial__corner,
  .editorial__bg-word, .hero__eyebrow, .hero__edition,
  .hero__tagline, .hero__disciplines {
    opacity: 1 !important;
    transform: none !important;
  }

  .editorial__line {
    transform: scaleX(1) !important;
    opacity: 1 !important;
  }

  /* Day card accents */
  .day-card__accent { width: 100% !important; }
  .day-card.is-visible .day-card__accent { width: 100% !important; }

  /* Open ALL path card bodies */
  .path-card__body { max-height: none !important; overflow: visible !important; }
  .reframe__card-accent { height: 100% !important; }
  .place-card::before { height: 100% !important; }

  /* ── HERO: dark cover page ── */
  .hero {
    background: #080808 !important;
    min-height: 80vh !important;
    grid-template-columns: 1fr !important;
    display: flex !important;
    align-items: flex-end !important;
    padding: 0 !important;
    page-break-after: always;
  }

  .hero__text {
    color: #F5F1EB !important;
    padding: 48pt 44pt !important;
    padding-top: 80pt !important;
    gap: 14pt !important;
  }

  .hero__name { color: #F5F1EB !important; font-size: 90pt !important; }
  .hero__tagline { color: #F5F1EB !important; font-size: 18pt !important; }
  .hero__tagline em { color: rgba(245,241,235,0.65) !important; }
  .hero__disciplines {
    color: rgba(245,241,235,0.4) !important;
    letter-spacing: 0.20em !important;
    font-size: 7pt !important;
  }
  .hero__eyebrow { color: #C41E3A !important; }
  .hero__edition { opacity: 1 !important; }

  /* Print-only hero subtitle */
  .hero__print-subtitle {
    display: block !important;
    font-family: var(--font-body);
    font-size: 7.5pt;
    font-weight: 400;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(245,241,235,0.28);
    margin-top: 8pt;
    border-top: 1pt solid rgba(245,241,235,0.12);
    padding-top: 8pt;
  }

  /* ── SECTIONS: white background ── */
  .section,
  .section--dark,
  .section--secondary,
  .reframe, .paths, .places, .portfolio, .week {
    background: #fff !important;
    color: #111 !important;
    padding: 20pt 0 !important;
  }

  /* Dark section text overrides */
  .section--dark *,
  .portfolio * { color: #111 !important; }

  .portfolio__item-concept { color: #555 !important; }
  .portfolio__brief-col p { color: #555 !important; }
  .portfolio__proves { color: #111 !important; }
  .portfolio__items { border-top-color: #ccc !important; }
  .portfolio__item { border-bottom-color: #ccc !important; }
  .portfolio__item-brief { border-top-color: #eee !important; }
  .portfolio__meta-chip { color: #777 !important; border-color: #ccc !important; }
  .portfolio__week { color: #C41E3A !important; }

  .close { background: #fff !important; min-height: auto !important; }
  .close__quote { color: #111 !important; font-size: 22pt !important; }
  .close__body { color: #555 !important; }
  .close__signature { color: #555 !important; }
  .close__divider { background: #C41E3A !important; }

  /* ── REFRAME ── */
  .reframe__card { border: 1pt solid #ddd !important; background: #fafafa !important; break-inside: avoid; }
  .reframe__card-num { color: #ddd !important; }
  .reframe__quote blockquote p { color: #111 !important; font-size: 16pt !important; }
  .reframe__quote blockquote cite { color: #999 !important; }
  .reframe__quote blockquote::before { color: #e0e0e0 !important; }

  /* ── PATHS ── */
  .paths__cards { border-top-color: #ddd !important; }
  .path-card { border-bottom-color: #ddd !important; break-inside: avoid; }
  .path-card__content { border-top-color: #eee !important; }
  .path-card__num { color: #ddd !important; }
  .path-card__personal { color: #C41E3A !important; opacity: 1 !important; }
  .path-card__teaser { color: #777 !important; }

  /* ── PLACES ── */
  .places__grid { grid-template-columns: repeat(2, 1fr) !important; }
  .place-card { background: #fafafa !important; border: 1pt solid #e0e0e0 !important; break-inside: avoid; }
  .place-card__name { color: #111 !important; font-size: 18pt !important; }
  .place-card__fit { color: #555 !important; }
  .place-card__roles span { border-color: #ddd !important; color: #777 !important; }
  .places__category-line { background: #ccc !important; }
  .places__category-label { color: #999 !important; }
  .places__sub { color: #777 !important; }

  /* ── WEEK ── */
  .week__days { grid-template-columns: repeat(3, 1fr) !important; }
  .day-card { border: 1pt solid #ddd !important; background: #fafafa !important; break-inside: avoid; }
  .day-card__priority { border-color: #ddd !important; color: #999 !important; }
  .day-card__label { color: #999 !important; }
  .day-card__body > p { color: #555 !important; }

  /* ── SECTION MARKS ── */
  .section-mark { border-bottom-color: #ddd !important; color: #bbb !important; }
  .section-mark--light { color: #bbb !important; border-bottom-color: #ddd !important; }

  /* ── PAGE BREAKS ── */
  .reframe   { page-break-before: always; }
  .paths     { page-break-before: always; }
  .places    { page-break-before: always; }
  .portfolio { page-break-before: always; }
  .week      { page-break-before: always; }
  .close     { page-break-before: always; }

  h1, h2, h3 { page-break-after: avoid; }
  p { orphans: 3; widows: 3; }

  .path-card  { page-break-inside: avoid; }
  .place-card { page-break-inside: avoid; }
  .portfolio__item { page-break-inside: avoid; }
  .day-card   { page-break-inside: avoid; }

  /* ── PORTFOLIO GRID ── */
  .portfolio__item { grid-template-columns: 1fr !important; }
  .portfolio__item-brief { grid-template-columns: 1fr 1fr !important; }
  .portfolio__item-top { flex-direction: column !important; }

  /* ── REFRAME GRID ── */
  .reframe__grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* ── CONTAINER ── */
  .container { padding: 0 !important; }

}