/* =============================================================
   JVDAS BERRA — Fashion & Fine Art Photographer
   Hybrid scroll: Home vertical → Portfolio horizontal pinned → Contact vertical
   Palette + typography LOCKED per design-tokens.md (MANDATORY)
   ============================================================= */

/* =============================================================
   1. Tokens (LOCKED — design-tokens.md)
   ============================================================= */
:root {
  /* Cream (universal bg) */
  --cream:        #f4efe6;
  --cream-2:      #e9dfcd;
  --paper:        #fbf8f1;

  /* Charcoal (dark interludes) */
  --charcoal:     #18140f;
  --charcoal-2:   #221c16;

  /* Clay (warm pastel) */
  --clay:         #c8b297;
  --clay-2:       #b89a78;

  /* Lava (accent — curado) */
  --lava:         #d8401d;
  --lava-2:       #b9311a;

  /* Ink (foreground sobre cream) */
  --ink:          #1a1714;
  --ink-soft:     #3a342e;
  --ink-mute:     #6b6357;

  /* Cream-text (foreground sobre charcoal) */
  --cream-text:   #f2ebda;

  /* Lines */
  --line:         rgba(24,20,15,.12);
  --line-light:   rgba(242,235,218,.16);

  /* Placeholder backgrounds */
  --ph-bg-cream:    #e6dcc8;
  --ph-bg-cream-2:  #d9cbb0;
  --ph-bg-clay:     #b59c7e;
  --ph-bg-clay-2:   #a48a6a;
  --ph-bg-charcoal: #2a231c;
  --ph-bg-lava:     #b32f15;

  /* Type */
  --serif: "Fraunces", "Times New Roman", Georgia, serif;
  --sans:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:  ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Easings */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Layout */
  --pad-edge: clamp(1.4rem, 3vw, 3rem);
  --ui-z: 99;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scrollbar-width: none;
  background: var(--cream);
}
html::-webkit-scrollbar { display: none; }

body {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior: none;
  cursor: default;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
ul, ol, dl { list-style: none; padding: 0; }

::selection { background: var(--lava); color: var(--cream); }

:focus-visible {
  outline: 2px solid var(--lava);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .6rem 1rem; background: var(--charcoal); color: var(--cream);
  z-index: 9999; border-radius: 999px; font-weight: 500;
  font-size: .8rem; letter-spacing: .04em;
}
.skip-link:focus { top: 1rem; }

/* Site-wide grain — editorial paper feel */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .055;
  mix-blend-mode: multiply;
}

/* =============================================================
   3. Type
   ============================================================= */
.serif-md, .serif-lg, .serif-huge, .serif-display, .serif-italic {
  font-family: var(--serif);
}

.serif-italic { font-style: italic; }

.serif-md {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.1vw, 2rem);
  font-weight: 350;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.serif-lg {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4.2vw, 4.2rem);
  font-weight: 350;
  line-height: 1;
  letter-spacing: -0.025em;
}
.serif-huge {
  font-family: var(--serif);
  font-size: clamp(3rem, 7.5vw, 7.8rem);
  font-weight: 350;
  line-height: .92;
  letter-spacing: -0.035em;
}
.serif-huge em {
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "SOFT" 100, "opsz" 144;
}
.serif-display {
  font-family: var(--serif);
  font-size: clamp(4rem, 13vw, 13rem);
  font-weight: 300;
  line-height: .88;
  letter-spacing: -0.045em;
}
.serif-display em {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "opsz" 144;
}

.kicker {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}

.ui-mono {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.ui-dim { opacity: .55; }

/* =============================================================
   4. Backgrounds (4 repositorios)
   ============================================================= */
.bg-cream    { background: var(--cream);    color: var(--ink); }
.bg-charcoal { background: var(--charcoal); color: var(--cream-text); }
.bg-clay     { background: var(--clay);     color: var(--ink); }
.bg-lava     { background: var(--lava);     color: var(--cream-text); }
.bg-charcoal .kicker,
.bg-lava     .kicker { color: rgba(242,235,218,.65); }

/* =============================================================
   5. Placeholders
   ============================================================= */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.ph::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(0,0,0,.012) 22px 23px);
  pointer-events: none;
}
.ph::after {
  content: attr(data-label);
  position: relative;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: .32;
  white-space: nowrap;
}
.ph-cream    { background: var(--ph-bg-cream);    color: var(--ink-soft); }
.ph-cream-2  { background: var(--ph-bg-cream-2);  color: var(--ink-soft); }
.ph-clay     { background: var(--ph-bg-clay);     color: var(--ink-soft); }
.ph-clay-2   { background: var(--ph-bg-clay-2);   color: var(--ink-soft); }
.ph-charcoal { background: var(--ph-bg-charcoal); color: var(--cream-text); }
.ph-charcoal::after { opacity: .25; }
.ph-lava     { background: var(--ph-bg-lava);     color: var(--cream-text); }
.ph-lava::after { opacity: .35; }

/* =============================================================
   6. Fixed UI — mix-blend-mode for adaptive contrast
   ============================================================= */
.ui {
  position: fixed;
  z-index: var(--ui-z);
  pointer-events: auto;
}
.ui-tl { top: var(--pad-edge); left: var(--pad-edge); }
.ui-tr { top: var(--pad-edge); right: var(--pad-edge); }
.ui-bl {
  bottom: var(--pad-edge);
  left: var(--pad-edge);
  display: grid;
  gap: .25rem;
}
.ui-left-mid {
  top: 50%;
  left: calc(var(--pad-edge) - .35rem);
  transform: translateY(-50%);
}
.ui-right-mid {
  top: 50%;
  right: calc(var(--pad-edge) - .35rem);
  transform: translateY(-50%);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .02em;
  mix-blend-mode: difference;
  color: var(--cream);
  transition: opacity .3s var(--ease-out);
}
.brand-mark {
  display: inline-block;
  font-size: 1.05rem;
  line-height: 1;
  animation: rotateMark 28s linear infinite;
}
@keyframes rotateMark { to { transform: rotate(360deg); } }
.brand-name {
  letter-spacing: .14em;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 500;
}
.brand:hover { opacity: .7; }

.rot {
  display: inline-block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  mix-blend-mode: difference;
  color: var(--cream);
}
.rot-left {
  transform-origin: 0 100%;
  transform: rotate(-90deg) translateX(-50%);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.rot-right {
  transform-origin: 100% 0;
  transform: rotate(90deg) translateY(-50%);
  white-space: nowrap;
}
.rot-dot {
  width: .35rem; height: .35rem;
  background: currentColor;
  border-radius: 50%;
  animation: pulseDot 2.2s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

.anchors { display: inline-flex; gap: 2rem; }
.anchors a {
  position: relative;
  transition: opacity .25s var(--ease-out);
}
.anchors a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.3rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .35s var(--ease-out), background .25s var(--ease-out);
}
.anchors a:hover::after,
.anchors a.is-active::after { transform: scaleX(1); }
.anchors a.is-active { color: var(--lava); }
.anchors a.is-active::after { background: var(--lava); height: 2px; bottom: -.35rem; }
.anchors a:not(:hover):not(.is-active) { opacity: .55; }

.ui-bl { mix-blend-mode: difference; color: var(--cream); }
.ui-bl .ui-mono { font-size: .62rem; letter-spacing: .18em; }

/* Pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .58rem 1.05rem .58rem .85rem;
  background: var(--charcoal);
  color: var(--cream-text);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: background .3s var(--ease-out), color .3s var(--ease-out), transform .3s var(--ease-out);
}
.pill:hover {
  background: var(--lava);
  transform: translateY(-1px);
}
.pill-dot {
  width: .42rem; height: .42rem;
  background: currentColor;
  border-radius: 50%;
}
.pill-fill {
  background: var(--lava);
  color: var(--cream);
  padding: 1.1rem 1.7rem;
  font-size: .72rem;
}
.pill-fill svg { width: 14px; height: 14px; }
.pill-fill:hover { background: var(--charcoal); color: var(--cream); }

/* Progress bar */
.scroll-progress {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--line);
  z-index: var(--ui-z);
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--lava);
  transition: width .15s linear;
}

/* Phase hint */
.phase-hint {
  position: fixed;
  bottom: clamp(2rem, 5vh, 3.2rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--ui-z);
  display: flex;
  align-items: center;
  gap: .8rem;
  mix-blend-mode: difference;
  color: var(--cream);
  pointer-events: none;
  transition: opacity .6s var(--ease-out);
}
.phase-hint.is-hidden { opacity: 0; }
.phase-hint-line { width: 32px; height: 1px; background: currentColor; opacity: .5; }
.phase-hint-text { font-size: .56rem; letter-spacing: .3em; opacity: .65; }

/* =============================================================
   7. Menu panel
   ============================================================= */
.menu-panel {
  position: fixed;
  inset: 0;
  background: var(--charcoal);
  color: var(--cream-text);
  z-index: 200;
  padding: clamp(2.5rem, 6vw, 5rem);
  display: grid;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s var(--ease-out);
}
.menu-panel.is-open { opacity: 1; pointer-events: auto; }
.menu-panel[hidden] { display: grid; }
.menu-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 4rem;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
.menu-col { padding-block: 2rem; }
.menu-kicker {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(242,235,218,.5);
  margin-bottom: 1.6rem;
}
.menu-kicker.mt { margin-top: 2.5rem; }
.menu-list { display: grid; gap: .3rem; }
.menu-list a {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 5rem);
  font-weight: 350;
  line-height: 1.05;
  letter-spacing: -.025em;
  display: inline-flex;
  align-items: baseline;
  gap: 1.4rem;
  transition: color .3s var(--ease-out), transform .35s var(--ease-out);
}
.menu-list a span {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .2em;
  color: rgba(242,235,218,.4);
  font-weight: 400;
  min-width: 2em;
}
.menu-list a:hover { color: var(--lava); transform: translateX(.6rem); }
.menu-list a:hover span { color: var(--lava); }
.menu-large {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-style: italic;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  margin-bottom: .4rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}
.menu-social {
  display: grid;
  gap: .4rem;
  margin-top: .8rem;
}
.menu-social a {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  transition: color .3s var(--ease-out);
}
.menu-social a:hover { color: var(--lava); }
.menu-close {
  position: absolute;
  top: var(--pad-edge);
  right: var(--pad-edge);
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid var(--line-light);
  display: grid; place-items: center;
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--cream-text);
  transition: background .3s var(--ease-out), color .3s var(--ease-out), transform .3s var(--ease-out);
}
.menu-close:hover { background: var(--lava); color: var(--cream); transform: rotate(90deg); }

/* =============================================================
   8. Vertical sections
   ============================================================= */
.vsec {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

/* =============================================================
   9. Home
   ============================================================= */
.home {
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(5rem, 9vh, 8rem) clamp(2rem, 6vw, 6rem) clamp(3rem, 6vh, 5rem);
}
.home-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}
.home-vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at center, transparent 25%, rgba(244,239,230,.5) 65%, var(--cream) 100%),
    linear-gradient(180deg, rgba(244,239,230,.4) 0%, transparent 25%, transparent 65%, rgba(244,239,230,.6) 100%);
  pointer-events: none;
}
.home-meta-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding-inline: clamp(3rem, 6vw, 6rem);
  margin: 0 auto;
  width: 100%;
  max-width: 1600px;
  color: var(--ink-soft);
}
.home-inner {
  display: grid;
  gap: 1.4rem;
  align-content: center;
  justify-items: center;
  text-align: center;
  margin: auto;
  max-width: 1200px;
}
.home-inner .kicker { color: var(--lava); }
/* H1 — visually hidden. The splash-name overlay provides the visual representation
   (multi-stage choreography lands the words at top-left + bottom-right corners). */
.hero-name {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}
.t-name {
  display: inline-block;
  animation: tLineReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  will-change: transform, opacity, clip-path;
}
.t-name:nth-of-type(1) { animation-delay: .45s; }
.t-name:nth-of-type(2) {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  animation-delay: .72s;
}
.t-name em {
  font-style: normal;
  color: var(--lava);
  font-size: .6em;
  vertical-align: super;
  line-height: 0;
}
@keyframes tLineReveal {
  from { clip-path: inset(-12% 100% -18% 0); opacity: 0; }
  to   { clip-path: inset(-12% 0    -18% 0); opacity: 1; }
}
.home-sub {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  font-weight: 350;
  letter-spacing: -.005em;
  color: var(--ink-soft);
  line-height: 1.5;
}
.home-sub-em {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  color: var(--ink);
}
.home-press {
  display: grid;
  gap: .8rem;
  text-align: center;
  justify-items: center;
  margin-top: 2rem;
}
.home-press-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem 2rem;
  font-family: var(--serif);
  font-size: .95rem;
  font-style: italic;
  color: var(--ink-soft);
  font-variation-settings: "SOFT" 100, "opsz" 144;
}
.home-cue {
  text-align: center;
  margin-top: 1rem;
  color: var(--ink-mute);
  animation: cueBob 2.5s ease-in-out infinite;
}
@keyframes cueBob {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* =============================================================
   10. Portfolio — horizontal canvas
   ============================================================= */
.viewport {
  width: 100vw;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  position: relative;
}
.scroll-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 100%;
  will-change: transform;
}
.panel {
  position: relative;
  flex: 0 0 auto;
  width: var(--w, 100vw);
  height: 100%;
  display: grid;
  overflow: hidden;
  padding: clamp(3rem, 6vh, 5rem) clamp(2rem, 4vw, 4rem);
  background: var(--cream);
  color: var(--ink);
}

.panel-meta {
  position: absolute;
  bottom: clamp(2rem, 5vh, 4rem);
  left: clamp(2rem, 4vw, 4rem);
  display: flex;
  gap: 1.5rem;
  color: var(--ink-mute);
  z-index: 4;
}

/* Image panel base */
.panel-img {
  position: absolute;
  inset: clamp(3rem, 6vh, 5rem) clamp(2rem, 4vw, 4rem);
  width: auto;
  height: auto;
  border-radius: 2px;
  overflow: hidden;
  /* NO background — the panel chapter bg shows through any contain'd matte
     and clip-path "bars" are the panel bg, not a cream box */
  will-change: transform, opacity, clip-path;
}
.panel-img > img,
.split-half > img,
.triptych-tile > img {
  width: 100%;
  height: 100%;
  object-fit: contain;       /* show full photo — letter/pillar-box around it = panel bg */
  display: block;
  border-radius: inherit;
}

/* Triptych — 3 photos side by side, all fully visible */
.triptych-wrap {
  position: absolute;
  inset: clamp(3rem, 6vh, 5rem) clamp(2rem, 4vw, 4rem);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(1rem, 2vw, 2rem);
}
.triptych-tile {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 2px;
  will-change: transform;
}

/* ---- T1 slide-left (default — wrapper translation only) ---- */

/* ---- T2 split-center ---- */
.split-wrap {
  position: absolute;
  inset: clamp(3rem, 6vh, 5rem) clamp(2rem, 4vw, 4rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
.split-half {
  position: relative;
  width: 100%;
  height: 100%;
  inset: auto;
  will-change: transform;
  border-radius: 2px;
  overflow: hidden;
  /* NO background — panel bg shows through contain'd matte */
}
.split-left  { margin-right: 1px; }
.split-right { margin-left: 1px; }

/* ---- T3 zoom ---- */
.panel[data-transition="zoom"] .panel-img { transform-origin: center; }

/* ---- T6 layered ---- */
.panel[data-transition="layered"] { position: relative; }
.panel[data-transition="layered"] .layer-back {
  inset: 10% 20%;
  z-index: 1;
  opacity: .65;
}
.panel[data-transition="layered"] .layer-mid {
  inset: 18% 30%;
  z-index: 2;
  opacity: .85;
}
.panel[data-transition="layered"] .layer-front {
  inset: 24% 38%;
  z-index: 3;
  border: 1px solid var(--line-light);
  box-shadow: 0 40px 100px rgba(0,0,0,.4);
}

/* ---- T7 scale-fade ---- */
.panel[data-transition="scale-fade"] .panel-img { transform-origin: center; }

/* ---- T8 chapter ---- */
.panel-chapter {
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 1.2rem;
  align-content: center;
  background: var(--cream-2);
  padding: clamp(4rem, 8vh, 8rem) clamp(3rem, 6vw, 6rem);
}
.panel-chapter > .kicker {
  color: var(--lava);
  align-self: end;
}
.panel-chapter h2 { align-self: center; color: var(--ink); }
.panel-chapter h2 em { color: var(--lava); }
.panel-chapter-foot {
  align-self: end;
  color: var(--ink-mute);
}

/* Chapter variants by bg */
.panel-chapter-clay {
  background: var(--clay);
}
.panel-chapter-clay > .kicker { color: var(--charcoal); opacity: .7; }
.panel-chapter-clay h2 em { color: var(--lava); }
.panel-chapter-clay .panel-chapter-foot { color: var(--charcoal); opacity: .65; }

.panel-chapter-dark {
  background: var(--charcoal);
  color: var(--cream-text);
}
.panel-chapter-dark > .kicker { color: var(--cream-text); opacity: .6; }
.panel-chapter-dark h2 { color: var(--cream-text); }
.panel-chapter-dark h2 em { color: var(--lava); }
.panel-chapter-dark .panel-chapter-foot { color: var(--cream-text); opacity: .55; }
.panel-chapter-dark .panel-meta { color: var(--cream-text); opacity: .65; }

/* ---- Text panel ---- */
.panel-text {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 1.8rem;
  align-content: center;
  padding: clamp(4rem, 8vh, 8rem) clamp(4rem, 8vw, 8rem);
}
.panel-text .kicker { color: var(--lava); }
.panel-text h3 em { color: var(--lava); }
.panel-meta-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  margin-top: 1rem;
  max-width: 800px;
}
.panel-meta-list div { display: grid; gap: .25rem; }
.panel-meta-list dt {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}
.panel-meta-list dd {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* ---- Pull quote panel ---- */
.panel-quote {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 2rem;
  align-content: center;
  padding: clamp(4rem, 8vh, 8rem) clamp(5rem, 10vw, 10rem);
  position: relative;
}
.quote-mark {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  font-size: 12rem;
  line-height: .6;
  color: var(--lava);
  opacity: .65;
}
.panel-quote blockquote {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  max-width: 18ch;
  line-height: 1;
  letter-spacing: -.03em;
  font-weight: 300;
}
.panel-quote blockquote em { color: var(--lava); font-style: italic; }
.panel-quote cite { font-style: normal; }

/* ---- Closing panel ---- */
.panel-closing {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 1.2rem;
  background: var(--cream);
  padding: clamp(4rem, 8vh, 8rem) clamp(3rem, 6vw, 6rem);
}
.closing-rule {
  width: 5rem;
  height: 1px;
  background: var(--lava);
  display: block;
}
.panel-closing .kicker { color: var(--lava); }

/* =============================================================
   11. Contact
   ============================================================= */
.contact {
  padding: clamp(6rem, 12vh, 12rem) clamp(2rem, 6vw, 6rem) 0;
  display: grid;
  gap: clamp(4rem, 7vh, 7rem);
  position: relative;
}
.contact-head {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  gap: 1.5rem;
}
.contact-head .kicker { color: var(--lava); }
.contact-cta em { color: var(--lava); }

.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* Form */
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 1.5rem;
  border-top: 1px solid var(--line);
  padding-top: clamp(2rem, 4vh, 4rem);
}
.field { display: grid; gap: .5rem; }
.field-full { grid-column: 1 / -1; }
.field label {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}
.field input,
.field select,
.field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: .8rem 0;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--ink);
  border-radius: 0;
  width: 100%;
  outline: none;
  transition: border-color .3s var(--ease-out);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-bottom-color: var(--lava);
}
.field textarea { resize: vertical; min-height: 4rem; line-height: 1.5; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M6 9l6 6 6-6' stroke='%23d8401d' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right .5rem center;
  background-size: 16px;
  padding-right: 2rem;
}
.field select option { background: var(--cream); color: var(--ink); }
.field-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1rem;
}
.form-status { margin: 0; }
.form-status.is-success { color: var(--lava); opacity: 1; }
.form-status.is-error { color: var(--lava); opacity: 1; }

/* Aside */
.contact-aside {
  display: grid;
  gap: 2.5rem;
  border-left: 1px solid var(--line);
  padding-left: clamp(2rem, 4vw, 4rem);
  align-content: start;
  padding-top: clamp(2rem, 4vh, 4rem);
}
.contact-block { display: grid; gap: .6rem; }
.contact-block .kicker { color: var(--lava); }
.contact-email {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  letter-spacing: -.015em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  transition: color .3s var(--ease-out);
}
.contact-email:hover { color: var(--lava); }
.contact-social { display: grid; gap: .4rem; }
.contact-social a {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: color .3s var(--ease-out);
}
.contact-social a:hover { color: var(--lava); }
.contact-social a span { font-size: .9em; opacity: .6; }

/* Contact monumental foot */
.contact-foot {
  position: relative;
  padding: clamp(8rem, 16vh, 18rem) 0 clamp(2rem, 4vh, 3rem);
  overflow: hidden;
  display: grid;
  align-content: end;
  min-height: 50vh;
}
.contact-mega {
  position: absolute;
  bottom: 4vh;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  font-size: 42vh;
  line-height: .82;
  letter-spacing: -.06em;
  color: var(--cream-2);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}
.contact-legal {
  position: relative;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink-mute);
  z-index: 6;
  padding-bottom: 1rem;
}
.contact-legal a { transition: color .3s var(--ease-out); }
.contact-legal a:hover { color: var(--lava); }

/* =============================================================
   11b. Portfolio storyboard — per-scene layouts & transitions
   3 viewports (one per chapter), 21 scenes total.
   ============================================================= */

/* Viewport bgs per chapter + per-chapter overlay color (matches bg for "curtain" reveal) */
.viewport-ed   { background: var(--cream);    --overlay-bg: var(--cream); }
.viewport-art  { background: var(--cream-2);  --overlay-bg: var(--cream-2); }
.viewport-com  { background: var(--paper);    --overlay-bg: var(--paper); }

/* Panel reset for storyboard panels (transparent so viewport bg shows) */
.panel-photo,
.panel-phrase,
.panel-intro {
  background: transparent;
  color: var(--ink);
  position: relative;
  overflow: hidden;
}

/* Photo panels are FORCED to 100vw so number positions stay visible inside viewport */
.panel-photo {
  width: 100vw !important;
}

/* === S01/S08/S15 Chapter intro === */
.panel-intro {
  display: grid;
  place-items: center;
}
.intro-counter {
  position: absolute;
  top: clamp(3rem, 6vh, 5rem);
  right: clamp(2rem, 4vw, 4rem);
  color: var(--ink-mute);
  opacity: 0;
  font-size: .65rem;
  letter-spacing: .25em;
  z-index: 3;
}
.intro-grid {
  display: grid;
  grid-template-columns: 1fr 2.5fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  width: 88%;
  max-width: 1600px;
}
.intro-grid-reverse { grid-template-columns: 2.5fr 1fr; }
.intro-grid-reverse .intro-desc { order: 2; }
.intro-grid-reverse .intro-title-block { order: 1; }
.intro-desc {
  font-family: var(--sans);
  font-size: clamp(.85rem, 1vw, 1rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 38ch;
  opacity: 0;
}
.intro-title-block { position: relative; }
.intro-line {
  display: block;
  width: 0;
  height: 1px;
  background: var(--ink);
  margin-bottom: clamp(1.5rem, 3vh, 3rem);
}
.intro-title {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  font-weight: 300;
  font-size: clamp(5rem, 14vw, 15rem);
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--ink);
  display: inline-flex;
  overflow: hidden;
}
.il {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%);
  will-change: transform, opacity;
}

/* === Photo frames === */
.panel-photo { display: grid; place-items: center; }
.photo-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  border-radius: 2px;
  will-change: transform, opacity, clip-path, filter;
}
.photo-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* Horizontal photo slot — 88vw × 78vh (margin 11vh / 6vw para los números) */
.orient-h .photo-frame {
  width: 88vw;
  height: 78vh;
  margin-top: -39vh;
  margin-left: -44vw;
}
.orient-h-wide .photo-frame {
  width: 90vw;
  height: 74vh;
  margin-top: -37vh;
  margin-left: -45vw;
}
/* Vertical photo slot — 42vw × 82vh (margin 9vh para los números arriba/abajo) */
.orient-v .photo-frame {
  width: 42vw;
  height: 82vh;
  margin-top: -41vh;
  margin-left: -21vw;
}

/* Photo numbers — positions & typography */
.photo-num {
  position: absolute;
  z-index: 4;
  color: var(--ink);
  pointer-events: none;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}
/* Number positions — tight to viewport edges so they never overlap the photo */
.photo-num.pos-tl { top: clamp(1.5rem, 4vh, 4rem); left: clamp(1.5rem, 3vw, 3rem); }
.photo-num.pos-tr { top: clamp(1.5rem, 4vh, 4rem); right: clamp(1.5rem, 3vw, 3rem); }
.photo-num.pos-bl { bottom: clamp(1.5rem, 4vh, 4rem); left: clamp(1.5rem, 3vw, 3rem); }
.photo-num.pos-br { bottom: clamp(1.5rem, 4vh, 4rem); right: clamp(1.5rem, 3vw, 3rem); }
.photo-num.pos-top    { top: clamp(1rem, 3vh, 3rem); left: 50%; transform: translateX(-50%); }
.photo-num.pos-bottom { bottom: clamp(1rem, 3vh, 3rem); left: 50%; transform: translateX(-50%); }
.photo-num.pos-side-left {
  top: 50%;
  left: clamp(1.5rem, 3vw, 3rem);
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
}
.photo-num.pos-side-right {
  top: 50%;
  right: clamp(1.5rem, 3vw, 3rem);
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center;
}
.photo-num.pos-tiny { font-size: .55rem; opacity: .45; }

.num-serif {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  line-height: 1;
  font-weight: 350;
  letter-spacing: -.01em;
}
.num-serif-big {
  font-family: var(--serif);
  font-size: clamp(3rem, 5vw, 5rem);
  line-height: 1;
  font-weight: 350;
}
.num-serif-italic {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1;
}
.num-serif-italic-big {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  font-size: clamp(3rem, 5vw, 5rem);
  line-height: 1;
}
.num-sans-bold {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 4rem);
  letter-spacing: -.02em;
  text-transform: uppercase;
}

/* Captions */
.photo-caption {
  position: absolute;
  z-index: 3;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--ink-mute);
  max-width: 32ch;
  line-height: 1.4;
  pointer-events: none;
}
.photo-caption.pos-top {
  top: clamp(1rem, 3vh, 3rem);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.photo-caption.pos-bottom {
  bottom: clamp(1rem, 3vh, 3rem);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.photo-caption.pos-side-left {
  top: 50%;
  left: clamp(1.5rem, 3vw, 3rem);
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .25em;
  text-transform: uppercase;
}
.photo-caption.pos-side-right {
  top: 50%;
  right: clamp(1.5rem, 3vw, 3rem);
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .25em;
  text-transform: uppercase;
}
.photo-caption.letter-spread { letter-spacing: .3em; }

/* === Phrase panels === */
.panel-phrase { display: grid; place-items: center; }
.phrase {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  font-weight: 350;
  font-size: clamp(2.4rem, 5.2vw, 5.5rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  text-align: center;
  max-width: 30ch;
  color: var(--ink);
  position: relative;
  z-index: 2;
}
.pw { display: inline-block; margin-right: .25em; }
.pw-italic-big { font-size: 1.15em; }

/* S05 color-shift — words start muted, shift to full color as scroll advances */
.phrase-shift .pw {
  color: var(--ink-mute);
  transition: color .35s cubic-bezier(0.16, 1, 0.3, 1);
}
.phrase-shift .pw.is-active { color: var(--ink); }
.phrase-shift .pw-accent.is-active { color: var(--lava); }

/* S12 word-stagger */
.phrase-stagger .pw {
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
}
.phrase-underline {
  position: absolute;
  bottom: 30%;
  left: 20%;
  width: 0;
  height: 1px;
  background: var(--ink);
  z-index: 1;
}

/* S19 color-block (basic placeholder for iteration 2) */
.phrase-block {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  width: 100%;
  height: 25vh;
  background: var(--lava);
  z-index: 1;
}
.phrase.phrase-on-block {
  color: var(--cream);
  z-index: 2;
}
.phrase.phrase-on-block .pw {
  color: inherit;
  opacity: 0;
  transform: translateY(15px);
}

/* === Per-transition initial states === */

.panel-photo[data-transition="corner-scale"] .photo-frame { transform-origin: bottom right; }
.panel-photo[data-transition="corner-scale-inverse"] .photo-frame { transform-origin: top left; }

.panel-photo[data-transition="strip-curtain"] .photo-frame {
  clip-path: inset(0 0 0 87.5%);
}
.panel-photo[data-transition="center-curtain"] .photo-frame {
  clip-path: inset(45% 0 45% 0);
}

/* Overlay-style reveals — all 6 directions share the same overlay div with chapter-matched bg */
.panel-photo[data-transition="overlay-down"]  .photo-overlay,
.panel-photo[data-transition="overlay-up"]    .photo-overlay,
.panel-photo[data-transition="overlay-left"]  .photo-overlay,
.panel-photo[data-transition="overlay-right"] .photo-overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-bg, var(--cream));
  z-index: 5;
}
.panel-photo[data-transition="overlay-down"]  .photo-overlay { transform-origin: bottom center; }
.panel-photo[data-transition="overlay-up"]    .photo-overlay { transform-origin: top center; }
.panel-photo[data-transition="overlay-left"]  .photo-overlay { transform-origin: left center; }
.panel-photo[data-transition="overlay-right"] .photo-overlay { transform-origin: right center; }

/* Split reveals — two overlays separated from center */
.panel-photo[data-transition="overlay-split"] .photo-overlay-top,
.panel-photo[data-transition="overlay-split"] .photo-overlay-bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  background: var(--overlay-bg, var(--cream));
  z-index: 5;
}
.panel-photo[data-transition="overlay-split"] .photo-overlay-top    { top: 0; transform-origin: top center; }
.panel-photo[data-transition="overlay-split"] .photo-overlay-bottom { bottom: 0; transform-origin: bottom center; }

.panel-photo[data-transition="overlay-split-h"] .photo-overlay-left,
.panel-photo[data-transition="overlay-split-h"] .photo-overlay-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: var(--overlay-bg, var(--cream));
  z-index: 5;
}
.panel-photo[data-transition="overlay-split-h"] .photo-overlay-left  { left: 0;  transform-origin: left center; }
.panel-photo[data-transition="overlay-split-h"] .photo-overlay-right { right: 0; transform-origin: right center; }

.panel-photo[data-transition="blur-focus"] .photo-frame {
  filter: blur(40px);
  opacity: 0;
}

.panel-photo[data-transition="two-halves"] .photo-half {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--cream-2);
  z-index: 5;
}
.panel-photo[data-transition="two-halves"] .photo-half-top {
  top: 0; height: 50%;
  transform-origin: top;
}
.panel-photo[data-transition="two-halves"] .photo-half-bottom {
  bottom: 0; height: 50%;
  transform-origin: bottom;
}

.panel-photo[data-transition="desat"] .photo-frame > img { filter: saturate(0); }

.panel-photo[data-transition="cross-fade"] .photo-frame { opacity: 0; }

.panel-photo[data-transition="three-bands"] .band-line {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--cream);
  z-index: 5;
}
.panel-photo[data-transition="three-bands"] .band-line-1 { left: 33.33%; }
.panel-photo[data-transition="three-bands"] .band-line-2 { left: 66.66%; }

/* =============================================================
   12. Splash — multi-stage loading sequence
   Layout: Jvdas (top, normal) + Berra (bottom, mirrored scaleY -1)
   Stage 1: typewriter — letters appear one by one, machine-like
   Stage 2: Jvdas → left edge, Berra → right edge (each on its own row)
   Stage 3: Jvdas → top-left corner, Berra → bottom-right corner
   Stage 4: splash bg fades, names remain at corners (faded by scroll-out)
   ============================================================= */
.splash {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
}
.splash-bg {
  position: absolute;
  inset: 0;
  background: var(--cream);
  animation: splashBgFade 1s ease-out 3.2s forwards;
  will-change: opacity;
}
@keyframes splashBgFade {
  to { opacity: 0; }
}

.splash-name {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;     /* Jvdas above, Berra below */
  align-items: center;
  gap: 0;                      /* mirror line — tight stack */
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3.5rem, 9.5vw, 10rem);
  line-height: .85;
  letter-spacing: -.03em;
  color: var(--ink);
  white-space: nowrap;
  text-transform: uppercase;   /* JVDAS / BERRA */
  z-index: 2;
  will-change: opacity;
}

.splash-word {
  display: inline-flex;
  will-change: transform;
}

/* Jvdas — sans-serif (palo seco), bold uppercase, no italic */
.splash-word-jvdas {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -.02em;
}

/* Berra — serif uppercase, NOT italic, mirrored vertically (scaleY -1) */
.splash-word-berra {
  font-variation-settings: "opsz" 144;
  transform: scaleY(-1);
}

/* Stage 1 — typewriter: letters snap in sequentially, machine-cadence */
.splash-letter {
  display: inline-block;
  opacity: 0;
  animation: splashLetterIn .08s linear forwards;
  will-change: opacity;
}
@keyframes splashLetterIn {
  to { opacity: 1; }
}

/* Cadence: Jvdas first (top), then short pause, then Berra (bottom) */
.splash-word-jvdas .splash-letter:nth-child(1) { animation-delay: .30s; }
.splash-word-jvdas .splash-letter:nth-child(2) { animation-delay: .40s; }
.splash-word-jvdas .splash-letter:nth-child(3) { animation-delay: .50s; }
.splash-word-jvdas .splash-letter:nth-child(4) { animation-delay: .60s; }
.splash-word-jvdas .splash-letter:nth-child(5) { animation-delay: .70s; }

.splash-word-berra .splash-letter:nth-child(1) { animation-delay:  .95s; }
.splash-word-berra .splash-letter:nth-child(2) { animation-delay: 1.05s; }
.splash-word-berra .splash-letter:nth-child(3) { animation-delay: 1.15s; }
.splash-word-berra .splash-letter:nth-child(4) { animation-delay: 1.25s; }
.splash-word-berra .splash-letter:nth-child(5) { animation-delay: 1.35s; }

/* Stage 2 + 3 — STRAIGHT L-shape paths (no diagonal)
   Jvdas: center → straight LEFT (50%) → straight UP to top-left corner (100%)
   Berra: center → straight RIGHT (50%) → straight DOWN to bottom-right corner (100%)
   Linear timing = sharp corner, mechanical feel consistent with the typewriter. */
.splash-word-jvdas {
  animation: splashJvdasJourney 1.6s linear 1.65s forwards;
}
.splash-word-berra {
  animation: splashBerraJourney 1.6s linear 1.65s forwards;
}
@keyframes splashJvdasJourney {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-40vw, 0); }      /* straight to left edge */
  100% { transform: translate(-40vw, -40vh); }  /* straight up to top-left */
}
@keyframes splashBerraJourney {
  0%   { transform: translate(0, 0)       scaleY(-1); }
  50%  { transform: translate(40vw, 0)    scaleY(-1); }    /* straight to right edge */
  100% { transform: translate(40vw, 40vh) scaleY(-1); }    /* straight down to bottom-right */
}

/* Reduced motion — skip choreography, names stay centered, bg fades */
@media (prefers-reduced-motion: reduce) {
  .splash-letter { animation: none; opacity: 1; }
  .splash-word-jvdas { animation: none; transform: none; }
  .splash-word-berra { animation: none; transform: scaleY(-1); }
  .splash-bg { animation: splashBgFade .5s ease-out 1.4s forwards; }
}

/* =============================================================
   13. Responsive
   ============================================================= */
@media (max-width: 960px) {
  .viewport { width: 100%; height: auto; overflow: visible; }
  .scroll-wrapper { flex-direction: column; transform: none !important; will-change: auto; height: auto; }
  .panel {
    width: 100% !important;
    height: auto;
    min-height: 100vh;
    padding: 4rem 1.5rem;
  }
  .panel-img { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 5; }
  .split-wrap { position: relative; inset: auto; height: 70vh; }
  .panel[data-transition="layered"] .layer-back,
  .panel[data-transition="layered"] .layer-mid,
  .panel[data-transition="layered"] .layer-front { position: relative; inset: auto; width: 100%; aspect-ratio: 4/5; margin-bottom: 1rem; opacity: 1; }
  .panel-quote { padding: 5rem 2rem; }
  .quote-mark { font-size: 6rem; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-aside { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 3rem; }
  .contact-form { grid-template-columns: 1fr; }
  .contact-mega { font-size: 22vh; }
  .ui-left-mid, .ui-right-mid, .scroll-progress, .phase-hint { display: none; }
  .home-meta-top { padding-inline: 0; flex-direction: column; gap: .3rem; }
  .home-press-list { font-size: .85rem; }
}

/* =============================================================
   14. Reduced motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .brand-mark, .splash-symbol { animation: none; }
  .rot-dot { animation: none; }
  .home-cue { animation: none; }
  .splash { animation: splashSafety .01s 1.5s forwards; }
}