/* EXECUTIVE MERIDIAN · KC Style / OP01 foundation + OP02 Hyperframe + OP02.5 Paper Seal */
:root {
  --ivory: #f0d4bf;
  --ivory-light: #f9ebdf;
  --walnut: #864c2c;
  --mahogany: #6e3115;
  --espresso: #4f210d;
  --navy-950: #071524;
  --navy-800: #1e3653;
  --academic-blue: #305b7e;
  --crest-blue-original: #044c7e; /* asset itself never filtered or recolored */
  --color-canvas: var(--ivory-light);
  --color-ink: var(--navy-950);
  --color-action: var(--ivory);
  --color-focus: var(--academic-blue);
  --ink: var(--color-ink);
  --paper: var(--color-canvas);
  --ink-inverse: var(--ivory-light);
  --line-dark: rgba(7, 21, 36, .23);
  --line-light: rgba(240, 212, 191, .33);
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Trebuchet MS", Arial, sans-serif;
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --gutter: clamp(1.25rem, 5.4vw, 6rem);
  --kc-music-safe-rail: 3.75rem;
  --measure: 76rem;
  --text-measure: 40rem;
  --display: clamp(2.9rem, 11.8vw, 7.75rem);
  --title: clamp(2.5rem, 10.4vw, 5.9rem);
  --body-size: clamp(1rem, 2.7vw, 1.125rem);
  --radius-detail: .125rem;
  --elevation-plate: 0 12px 44px rgba(0, 0, 0, .24);
  --focus: #f0d4bf;
  --duration-short: 180ms;
  --duration-scene: 420ms;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --footer-canvas: var(--espresso);
  --footer-ink: var(--ivory-light);
  --footer-muted: var(--ivory);
  --footer-rule: rgba(240, 212, 191, .38);
  /* MERIDIAN_DEPTH_CORE: optical order, not a generic 3D scene. */
  --depth-canvas: 0;
  --depth-engraving: 1;
  --depth-frame: 2;
  --depth-crest: 3;
  --depth-control: 4;
  --shadow-frame-rest: 0 2px 0 rgba(240,212,191,.12), 0 7px 12px rgba(0,0,0,.32);
  --shadow-frame-active: 0 3px 0 rgba(240,212,191,.2), 0 12px 18px rgba(0,0,0,.38);
  --shadow-crest-rest: 0 3px 3px rgba(7,21,36,.27);
  --highlight-edge: rgba(249,235,223,.72);
  --engraving-inset: inset 0 1px 0 rgba(249,235,223,.55), inset 0 -2px 2px rgba(79,33,13,.11);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); font-family: var(--sans); background: var(--navy-950); }
body.gate-locked { overflow: hidden; }
main[hidden], .kc-float[hidden], .gate[hidden] { display: none !important; }
img, svg { display: block; }
img { max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.hero :focus-visible, .dedication :focus-visible, .itinerary :focus-visible { outline-color: var(--academic-blue); }
::selection { background: var(--walnut); color: #fff; }
.skip-link { position: fixed; z-index: 100; top: 0; left: .75rem; padding: .8rem 1rem; background: var(--ivory-light); color: var(--navy-950); transform: translateY(calc(-100% - 4px)); }
.skip-link:focus { transform: translateY(0); }
.gate-locked .skip-link { display: none; }
.scene { position: relative; isolation: isolate; overflow: clip; }
.eyebrow, .gate-kicker, .gate-date, .gate-topline { font-size: .74rem; font-weight: 700; letter-spacing: .14em; line-height: 1.5; }
.eyebrow { margin: 0 0 1.5rem; color: var(--walnut); }
.eyebrow--light { color: var(--ivory); }

/* 00 · A final-state architectural threshold. OP02 owns the HF chronology. */
.gate {
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr);
  min-height: 100svh; padding: max(1.15rem, env(safe-area-inset-top, 0px)) var(--gutter) max(1.15rem, var(--safe-bottom));
  color: var(--ivory-light); background: radial-gradient(ellipse at 53% 48%, #23374b 0, var(--navy-950) 65%);
  overflow: auto; overflow-x: hidden; isolation: isolate;
}
.gate-grid { position: absolute; z-index: var(--depth-canvas); inset: 0; opacity: .38; background-image: linear-gradient(90deg, transparent calc(50% - .5px), rgba(240,212,191,.14) 50%, transparent calc(50% + .5px)), linear-gradient(rgba(240,212,191,.11) 1px, transparent 1px); background-size: 100% 100%, 100% 13.5%; pointer-events: none; }
.gate-contours { position: absolute; z-index: var(--depth-engraving); inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(240,212,191,.16); stroke-width: .7; pointer-events: none; }
.gate-topline { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: min(100%,18rem); margin-inline: auto; gap: .55rem; color: var(--ivory); }
.gate-topline { justify-content: center; border-bottom: 1px solid var(--line-light); padding-bottom: .4rem; }
.gate-brand-lockup { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.gate-generation { position: relative; display: inline-block; padding-bottom: .15rem; }
.gate-generation::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: rgba(240,212,191,.62); transform: scaleX(0); transform-origin: left center; }
.gate-meridian-mark { display: block; width: 1.75rem; height: .5rem; flex: none; fill: none; stroke: var(--ivory); stroke-width: .8; opacity: .68; }
.gate-stage { position: relative; z-index: var(--depth-frame); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(.45rem, 1.3svh, 1.05rem); padding: 1rem 0; text-align: center; }
.gate-kicker, .gate-date { margin: 0; color: var(--ivory); }
.gate-heading { margin: 0; font: normal clamp(2.15rem, 8.3vw, 4.5rem)/.98 var(--serif); letter-spacing: -.052em; }
.gate-heading em { color: var(--ivory); font-weight: normal; }
/* OP02.5 · THE PAPER SEAL. The crest is constructed, not revealed: engraved ghost, die-cut
   paper pieces carrying the original pixels, registration lock, then the seal becomes the door.
   One declarative keyframe timeline from t0 (.hf-sequencing) — seekable live and in the film.
   The unclassed markup IS the last frame: no JS, reduced motion and READY all rest here. */
.gate { --hf-t01: 400ms; --hf-t02: 1700ms; --hf-t03: 3100ms; --hf-t04: 3800ms; --hf-t05: 5000ms; --hf-ready: 5700ms; --meridian-c: calc(50vw + 50vh); --paper-ease: cubic-bezier(.3,0,.12,1); }
.gate-leaf { position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 53% 48%, #23374b 0, var(--navy-950) 65%); pointer-events: none; }
.hyperframe { position: relative; z-index: var(--depth-frame); width: clamp(220px, min(78vw, 45svh), 330px); aspect-ratio: 320 / 390; flex: none; margin-bottom: 1.9rem; }
.hyperframe-engraving { position: absolute; z-index: var(--depth-frame); inset: 0; width: 100%; height: 100%; fill: none; filter: drop-shadow(0 4px 4px rgba(0,0,0,.34)); }
.frame-edge, .frame-inner, .frame-datum, .crest-outline, .crest-ink-line { stroke-dasharray: 1; stroke-dashoffset: 0; }
.frame-edge { stroke: var(--ivory); stroke-width: 1.5; }
.frame-inner { stroke: var(--highlight-edge); stroke-width: .7; }
.frame-datum { stroke: rgba(240,212,191,.8); stroke-width: 1; }
.hf-origin-point { fill: var(--ivory); stroke: none; opacity: 0; }
.hf-relations { fill: none; stroke: var(--ivory); stroke-width: .8; opacity: 0; transform-box: fill-box; transform-origin: center; } /* registration marks: guides, gone once locked */

/* The plate is now the engraved navy recess that receives the paper. */
.hyperframe-relief, .hyperframe-plate { position: absolute; top: 12%; bottom: 12%; left: 14%; right: 14%; clip-path: polygon(13% 0, 87% 0, 100% 12%, 100% 88%, 87% 100%, 13% 100%, 0 88%, 0 12%); }
.hyperframe-relief { z-index: var(--depth-frame); background: rgba(7,21,36,.73); transform: translate(3px, 7px); box-shadow: var(--shadow-frame-rest); }
.hyperframe-plate { z-index: var(--depth-crest); background: linear-gradient(135deg, var(--navy-800), var(--navy-950) 78%); box-shadow: inset 0 1px 0 rgba(240,212,191,.2), inset 0 -2px 3px rgba(0,0,0,.45), inset 0 0 0 1px rgba(240,212,191,.22); }
.hyperframe-plate::before { content: ""; position: absolute; inset: 1px; border: 1px solid rgba(240,212,191,.28); clip-path: inherit; pointer-events: none; }
.hyperframe-plate::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(240,212,191,.12); clip-path: inherit; pointer-events: none; }

/* Crest box = the old img box (contain + 1.09). Unclipped, so paper can travel. */
.crest-stage { position: absolute; z-index: var(--depth-crest); top: 12%; bottom: 12%; left: 14%; right: 14%; display: grid; place-items: center; pointer-events: none; }
.crest-box { position: relative; width: 100%; aspect-ratio: 1; transform: scale(1.2); } /* shield fills the plate: 16px air each side */
.crest-box > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.crest-ghost { display: none; }
@supports (mask-size: contain) or (-webkit-mask-size: contain) {
  .crest-ghost { display: block; opacity: .3; -webkit-mask: url("fotos/escudo-admin.png") center / contain no-repeat; mask: url("fotos/escudo-admin.png") center / contain no-repeat; }
  .crest-ghost--light { background: rgba(240,212,191,.34); transform: translate(.7px, .9px); }
  .crest-ghost--dark { background: rgba(0,0,0,.6); transform: translate(-.4px, -.5px); }
}
.crest-contour { overflow: visible; fill: none; }
.crest-outline { stroke: rgba(240,212,191,.34); stroke-width: 12; } /* half peeks past the bleed: the engraved residue */
.crest-paper { background: linear-gradient(160deg, var(--ivory-light), #f0d4bf 88%); }
.crest-paper img { width: 100%; height: 100%; }
.crest-assembly { visibility: hidden; }
.crest-piece { position: absolute; inset: 0; display: block; }
.crest-piece > span { position: absolute; inset: 0; display: block; background: linear-gradient(160deg, var(--ivory-light), #f0d4bf 88%); }
.crest-piece > span::before { content: ""; position: absolute; inset: 0; background: url("fotos/escudo-admin.png") center / 100% 100% no-repeat; } /* original pixels, inked after the paper lands */
.crest-piece:is(.crest-piece--p2, .crest-piece--p4a, .crest-piece--p5, .crest-piece--p8) > span::after { content: ""; position: absolute; inset: 0; background: rgba(134,76,44,.1); mix-blend-mode: multiply; opacity: 0; } /* second cardstock while loose */
.crest-shadow { filter: blur(6px); opacity: .6; transform: translateY(5px); } /* static blur, rasterised once */
.crest-shadow > span { position: absolute; inset: 0; background: #000; }
.crest-ink { overflow: visible; fill: none; opacity: 0; } /* construction lines: gone once the real ink is down */
.crest-ink-line { stroke: var(--ivory); stroke-width: 2.2; stroke-linejoin: round; }
.crest-ink-fill { fill: #044c7e; fill-rule: evenodd; } /* ink painted in code from the traced alpha, same blue as the original */
.crest-sheen { overflow: hidden; opacity: 0; }
.crest-sheen::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent); transform: translateX(-150%); }

/* >>> GENERATED crest fragments (build_fragments.py) >>> */
/* GENERATED by assets/derived/crest-hyperframe/build_fragments.py — do not hand-edit.
   Geometry derived from escudo-admin.png alpha; pixels always come from the original. */
.crest-paper, .crest-sheen, .crest-shadow > span { clip-path: polygon(14.39% 2.42%, 85.28% 2.42%, 85.61% 2.75%, 85.61% 61.57%, 84.76% 68.40%, 82.80% 74.51%, 80.60% 78.67%, 77.17% 83.19%, 71.81% 88.20%, 65.96% 91.97%, 61.20% 94.29%, 54.64% 96.60%, 50.32% 97.59%, 47.81% 97.21%, 44.51% 96.36%, 37.70% 93.80%, 30.51% 89.91%, 26.12% 86.48%, 21.36% 81.48%, 18.18% 76.59%, 16.59% 73.04%, 15.24% 68.52%, 14.51% 63.89%, 14.39% 62.17%); }
.crest-piece--p1 > span { clip-path: polygon(14.39% 2.42%, 85.28% 2.42%, 85.61% 2.75%, 85.61% 11.61%, 14.39% 11.61%); } /* p1-top-band · centroid 413,58 · unit 0.001,-1.000 */
.crest-piece--p2 > span { clip-path: polygon(14.51% 63.89%, 14.39% 62.17%, 14.39% 11.61%, 23.70% 11.61%, 23.70% 65.30%, 14.73% 65.30%); } /* p2-left-band · centroid 158,318 · unit -0.937,-0.349 */
.crest-piece--p3 > span { clip-path: polygon(76.30% 11.61%, 85.61% 11.61%, 85.61% 61.57%, 85.14% 65.30%, 76.30% 65.30%); } /* p3-right-band · centroid 669,318 · unit 0.937,-0.349 */
.crest-piece--p4a > span { clip-path: polygon(47.81% 97.21%, 44.51% 96.36%, 37.70% 93.80%, 30.51% 89.91%, 26.12% 86.48%, 21.36% 81.48%, 18.18% 76.59%, 16.59% 73.04%, 15.24% 68.52%, 14.73% 65.30%, 23.70% 65.30%, 24.55% 67.71%, 26.48% 72.55%, 31.20% 78.60%, 40.15% 84.64%, 49.94% 88.15%, 49.94% 97.53%); } /* p4a-lower-left · centroid 261,681 · unit -0.492,0.870 */
.crest-piece--p4b > span { clip-path: polygon(71.81% 88.20%, 65.96% 91.97%, 61.20% 94.29%, 54.64% 96.60%, 50.32% 97.59%, 49.94% 97.53%, 49.94% 88.15%, 59.73% 84.64%, 68.56% 78.60%, 73.28% 72.55%, 75.21% 67.71%, 76.30% 65.30%, 85.14% 65.30%, 84.76% 68.40%, 82.80% 74.51%, 80.60% 78.67%, 77.17% 83.19%); } /* p4b-lower-right · centroid 565,681 · unit 0.493,0.870 */
.crest-piece--p5 > span { clip-path: polygon(23.70% 62.39%, 23.70% 11.61%, 74.49% 11.61%); } /* p5-figure-field · centroid 336,236 · unit -0.399,-0.917 */
.crest-piece--p6 > span { clip-path: polygon(23.70% 62.39%, 74.49% 11.61%, 76.30% 11.61%, 76.30% 13.18%, 23.83% 65.65%, 23.70% 65.30%); } /* p6-meridian · centroid 412,315 · unit -0.015,-1.000 */
.crest-piece--p7 > span { clip-path: polygon(48.97% 40.51%, 76.30% 13.18%, 76.30% 40.51%); } /* p7-star-field · centroid 556,260 · unit 0.681,-0.732 */
.crest-piece--p8 > span { clip-path: polygon(48.97% 40.51%, 76.30% 40.51%, 76.30% 65.30%, 75.21% 67.71%, 73.28% 72.55%, 68.56% 78.60%, 59.73% 84.64%, 49.94% 88.15%, 40.15% 84.64%, 31.20% 78.60%, 26.48% 72.55%, 24.55% 67.71%, 23.83% 65.65%); } /* p8-circle-field · centroid 439,523 · unit 0.231,0.973 */
/* <<< GENERATED crest fragments <<< */

/* PRESS THE SEAL: the whole frame is one native button; the tab is its visible handle. */
.gate-open { position: absolute; z-index: var(--depth-control); inset: 0; display: block; width: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.gate-open:disabled { cursor: default; }
.gate-open:focus-visible { outline: none; }
.gate-open-tab { position: absolute; left: 50%; top: 93%; isolation: isolate; display: flex; align-items: center; gap: .9rem; width: max-content; min-height: 44px; padding: .6rem .95rem .55rem 1.15rem; color: var(--navy-950); font-size: .76rem; font-weight: 700; letter-spacing: .1em; line-height: 1; transform: translateX(-50%); }
.gate-open-tab::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--ivory); clip-path: polygon(0 0, calc(50% - 7px) 0, 50% 6px, calc(50% + 7px) 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px)); transition: background var(--duration-short); }
.gate-open:hover .gate-open-tab::before { background: var(--ivory-light); }
.gate-open:focus-visible .gate-open-tab { outline: 2px solid var(--focus); outline-offset: 3px; }
.hyperframe:has(.gate-open:focus-visible) .frame-edge { stroke: var(--ivory-light); stroke-width: 2.2; }
.gate-open-arrow { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; font-size: 1.15rem; font-weight: 400; }
.gate.hf-sealed:has(#gate-open:active) .crest-box { transform: translateY(1px) scale(1.185); }
.gate.hf-sealed:has(#gate-open:active) .gate-open-tab { transform: translateX(-50%) translateY(1px); }

/* HF00 origin → HF05 seal. Beats live in --hf-t0N; JS reads the same vars for data-hf-state. */
.gate.hf-sequencing .gate-grid { animation: hf-grid 550ms var(--ease) var(--hf-t01) both; }
.gate.hf-sequencing .gate-contours { animation: hf-contours 750ms var(--ease) var(--hf-t01) both; }
.gate.hf-sequencing .gate-topline { animation: hf-topline 500ms var(--ease) var(--hf-t01) both; }
.gate.hf-sequencing .gate-generation { animation: hf-rise-in 480ms var(--ease) var(--hf-t05) both; }
.gate.hf-sequencing .gate-generation::after { animation: gate-generation-engrave 360ms var(--ease) calc(var(--hf-t05) + 120ms) both; }
.gate.hf-sequencing .hf-origin-point { animation: hf-origin 600ms var(--ease) var(--hf-t01) both; }
.gate.hf-sequencing :is(.hyperframe-plate, .hyperframe-relief) { animation: hf-plate 600ms var(--ease) var(--hf-t01) both; }
.gate.hf-sequencing .crest-ghost { animation: hf-ghost var(--hf-t05) linear both; }
.gate.hf-sequencing .frame-edge { animation: hf-draw 850ms cubic-bezier(.32,.05,.46,1) var(--hf-t01) both; }
.gate.hf-sequencing .frame-inner { animation: hf-draw 800ms cubic-bezier(.32,.05,.46,1) calc(var(--hf-t01) + 200ms) both; }
.gate.hf-sequencing .frame-datum { animation: hf-draw 600ms var(--ease) calc(var(--hf-t01) + 400ms) both; }
.gate.hf-sequencing .crest-outline { animation: hf-draw 850ms cubic-bezier(.32,.05,.46,1) calc(var(--hf-t01) + 50ms) both; }
.gate.hf-sequencing .hf-relations { animation: hf-marks 3520ms linear calc(var(--hf-t01) + 500ms) both; }
/* HF01: the crest is written — rules, title, legend (along the U), then the three emblems. */
.gate.hf-sequencing .crest-ink { opacity: 1; }
.gate.hf-sequencing .crest-ink-line { animation: hf-draw var(--ink-dur) cubic-bezier(.45,.05,.35,1) calc(var(--ink-at) + var(--k) * var(--ink-step)) both, hf-ink-tint 1100ms var(--ease) calc(var(--hf-t02) + 200ms) both, hf-line-lift 600ms ease-in calc(var(--hf-t04) + 900ms) both; }
/* HF04: the ink is painted glyph by glyph in the writing order, then the lines lift off it. */
.gate.hf-sequencing .crest-ink-fill { animation: hf-fade-in var(--fill-dur) cubic-bezier(.3,.1,.3,1) calc(var(--fill-at) + var(--k) * var(--fill-step)) both; }
.crest-ink-fill--rules { --fill-at: var(--hf-t04); --fill-step: 60ms; --fill-dur: 500ms; }
.crest-ink-fill--title { --fill-at: calc(var(--hf-t04) + 100ms); --fill-step: 14ms; --fill-dur: 380ms; }
.crest-ink-fill--legend { --fill-at: calc(var(--hf-t04) + 150ms); --fill-step: 16ms; --fill-dur: 380ms; }
.crest-ink-fill--figure { --fill-at: calc(var(--hf-t04) + 250ms); --fill-step: 60ms; --fill-dur: 600ms; }
.crest-ink-fill--star { --fill-at: calc(var(--hf-t04) + 300ms); --fill-step: 45ms; --fill-dur: 600ms; }
.crest-ink-fill--circle { --fill-at: calc(var(--hf-t04) + 350ms); --fill-step: 60ms; --fill-dur: 600ms; }
.crest-ink-line--rules { --ink-at: var(--hf-t01); --ink-step: 70ms; --ink-dur: 700ms; }
.crest-ink-line--title { --ink-at: calc(var(--hf-t01) + 150ms); --ink-step: 12ms; --ink-dur: 380ms; }
.crest-ink-line--legend { --ink-at: calc(var(--hf-t01) + 250ms); --ink-step: 16ms; --ink-dur: 400ms; }
.crest-ink-line--figure { --ink-at: calc(var(--hf-t01) + 450ms); --ink-step: 60ms; --ink-dur: 500ms; }
.crest-ink-line--star { --ink-at: calc(var(--hf-t01) + 500ms); --ink-step: 40ms; --ink-dur: 500ms; }
.crest-ink-line--circle { --ink-at: calc(var(--hf-t01) + 550ms); --ink-step: 35ms; --ink-dur: 500ms; }
.gate.hf-sequencing .crest-shadow { animation: hf-fade-in 900ms var(--ease) calc(var(--hf-t02) + 500ms) both; }
/* HF02: pieces land outside-in with a hairline gap and an empty meridian channel. */
.gate.hf-sequencing .crest-assembly { animation: hf-lock 520ms var(--paper-ease) var(--hf-t04) both, hf-assembly-off 1ms steps(1) calc(var(--hf-t05) + 700ms) both; }
.gate.hf-sequencing .crest-piece { animation: hf-piece-arrive 700ms var(--paper-ease) calc(var(--hf-t02) + var(--i) * 100ms) both, hf-piece-settle 600ms ease-out calc(var(--hf-t04) + 200ms) both; }
.gate.hf-sequencing .crest-piece > span { animation: hf-piece-lock 380ms var(--paper-ease) var(--hf-t04) both; }
.gate.hf-sequencing .crest-piece > span::after { animation: hf-stock 380ms var(--paper-ease) var(--hf-t04) both; }
/* Pieces stay blank paper while building; their raster ink only matters for HF06. */
.gate.hf-sequencing .crest-piece > span::before { opacity: 0; }
/* HF03: the strip lands along its own 45° axis and completes the star (no lines outside the shield). */
.gate.hf-sequencing .crest-piece--p6 { animation-duration: 560ms, 600ms; animation-delay: var(--hf-t03), calc(var(--hf-t04) + 200ms); }
/* HF04: registration lock + one edge-light pass (second pass lands at READY). */
.gate.hf-sequencing .crest-sheen { animation: hf-sheen-on 1900ms linear var(--hf-t04) both; }
.gate.hf-sequencing .crest-sheen::before { animation: hf-sheen 1900ms linear var(--hf-t04) both; }
.gate.hf-sequencing :is(.gate-kicker, .gate-heading) { animation: hf-rise-in 550ms var(--ease) var(--hf-t04) both; }
/* HF05: authentic master takes over; the handle appears. */
.gate.hf-sequencing .crest-paper { animation: hf-fade-in 650ms ease-in-out var(--hf-t05) both; } /* the original crossfades over the painted ink: identical pixels, no cut */
.gate.hf-sequencing .gate-date { animation: hf-rise-in 480ms var(--ease) var(--hf-t05) both; }
.gate.hf-sequencing .gate-open-tab { animation: hf-tab-in 480ms var(--ease) var(--hf-t05) both; }

@keyframes hf-fade-in { from { opacity: 0; } }
@keyframes hf-rise-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes gate-generation-engrave { to { transform: scaleX(1); } }
@keyframes hf-tab-in { from { opacity: 0; transform: translateX(-50%) translateY(6px); } }
@keyframes hf-draw { from { stroke-dashoffset: 1; } }
@keyframes hf-grid { from { opacity: .2; } }
@keyframes hf-contours { from { opacity: .25; } }
@keyframes hf-topline { from { opacity: .38; } }
@keyframes hf-origin { from { opacity: 1; } }
@keyframes hf-plate { from { opacity: .35; } }
/* % of --hf-t05 (5000ms): .06 until t01, a faint press under the writing, .3 rest before the seal. */
@keyframes hf-ghost { 0%, 8% { opacity: .06; } 34%, 90% { opacity: .2; } 100% { opacity: .3; } }
/* 3520ms from t01+500: appear, hold through assembly, sink toward the plate from t04+200. */
@keyframes hf-marks { 0% { opacity: 0; } 15%, 88% { opacity: .8; transform: none; } 100% { opacity: 0; transform: scale(.97); } }
@keyframes hf-piece-arrive { from { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.96); } 35% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes hf-piece-lock { from { transform: translate(var(--gx), var(--gy)); } }
@keyframes hf-stock { from { opacity: 1; } }
@keyframes hf-piece-settle { from { filter: drop-shadow(0 -1px 0 rgba(249,235,223,.6)) drop-shadow(0 2px 1.5px rgba(0,0,0,.42)); } to { filter: drop-shadow(0 0 0 rgba(249,235,223,0)) drop-shadow(0 0 0 rgba(0,0,0,0)); } }
@keyframes hf-lock { 0%, 100% { transform: none; } 40% { transform: scale(.985); } }
@keyframes hf-assembly-off { from { visibility: visible; } to { visibility: hidden; } }
@keyframes hf-sheen-on { 0%, 99.9% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hf-sheen { 0% { transform: translateX(-150%); } 35% { transform: translateX(250%); } 35.1%, 80% { transform: translateX(-150%); } 100% { transform: translateX(250%); } }
@keyframes hf-line-lift { to { stroke-opacity: 0; } }
@keyframes hf-ink-tint { from { stroke: var(--ivory); } to { stroke: #044c7e; } }

/* HF06 · the seal becomes the door. Pieces release along the crest's own meridian (x+y=c). */
.gate.hf-activating { position: fixed; inset: 0; z-index: 20; width: 100%; height: 100svh; min-height: 100svh; overflow: hidden; background: transparent; }
.gate.hf-activating .crest-paper { visibility: hidden; }
.gate.hf-activating .crest-assembly { visibility: visible; }
.gate.hf-activating .crest-box { animation: hf-press 180ms ease-out both; }
.gate.hf-activating .crest-piece { animation: hf-piece-release 1000ms cubic-bezier(.33,0,.2,1) calc(350ms + var(--i) * 25ms) both; }
.gate.hf-activating .crest-piece > span::before { animation: hf-ink-out 650ms ease-in calc(450ms + var(--i) * 45ms) both; } /* colour drains progressively, piece by piece */
.gate.hf-activating .crest-piece--p6 { animation-duration: 520ms; animation-delay: 150ms; } /* the key comes out first */
.gate.hf-activating .crest-piece--p6 > span::before { animation-delay: 200ms; }
.gate.hf-activating :is(.gate-kicker, .gate-heading, .gate-date, .gate-open-tab, .gate-topline, .gate-grid, .gate-contours) { animation: hf-fade-out 260ms ease-in both; }
.gate.hf-activating :is(.hyperframe-engraving, .hyperframe-relief, .hyperframe-plate, .crest-ghost, .crest-outline, .crest-shadow) { animation: hf-fade-out 420ms ease-in-out 300ms both; } /* gone before the crack reaches the crest: no grey smear over the Hero */
.gate.hf-activating .gate-leaf--a { clip-path: polygon(0 0, var(--meridian-c) 0, 0 var(--meridian-c)); --leaf-dx: -72vmax; --leaf-dy: -72vmax; }
.gate.hf-activating .gate-leaf--b { clip-path: polygon(var(--meridian-c) 0, 400% 0, 400% 400%, 0 400%, 0 var(--meridian-c)); --leaf-dx: 72vmax; --leaf-dy: 72vmax; }
.gate.hf-activating .gate-leaf { animation: meridian-open 1100ms cubic-bezier(.55,0,.25,1) 780ms both; }
@keyframes hf-press { from { transform: translateY(1px) scale(1.185); } to { transform: scale(1.2); } }
@keyframes hf-piece-release { 70% { opacity: 1; } to { opacity: 0; transform: translate(var(--ox), var(--oy)) rotate(calc(var(--r) * -1)); } }
@keyframes hf-ink-out { to { opacity: 0; } }
@keyframes hf-fade-out { to { opacity: 0; } }
@keyframes meridian-open {
  from { transform: none; }
  to { transform: translate(var(--leaf-dx), var(--leaf-dy)); }
}

/* 01 · Ivory proclamation / diagonal continues from the threshold. */
.hero { --hero-contour-at: 900ms; --hero-overline-at: 1100ms; --hero-seal-at: 3150ms; --hero-cue-at: 3800ms; --hero-write-at: 1200ms; --hero-line1-duration: 600ms; --hero-line2-at: 1750ms; --hero-line2-duration: 1050ms; --hero-details-at: 2800ms; --hero-details-duration: 420ms; --hero-complete-at: 4600ms; min-height: 100svh; display: flex; flex-direction: column; padding: 1.25rem var(--gutter) 1.4rem; background: radial-gradient(ellipse at 64% 40%, rgba(249,235,223,.96) 0%, rgba(249,235,223,0) 56%), radial-gradient(ellipse at 8% 92%, rgba(30,54,83,.045) 0%, transparent 48%), var(--ivory-light); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(128deg, transparent 38%, rgba(134,76,44,.085) 38.1%, rgba(134,76,44,.085) 38.35%, transparent 38.45%), linear-gradient(128deg, transparent 67%, rgba(48,91,126,.09) 67.1%, transparent 67.35%); }
.hero::after { content: ""; position: absolute; z-index: -1; top: 0; right: -11%; height: 100%; width: 30%; transform: skew(-23deg); background: linear-gradient(to bottom, rgba(240,212,191,.6), rgba(48,91,126,.04)); }
.hero-contour { position: absolute; z-index: -1; top: 6%; right: -22%; width: min(110%, 65rem); height: 100%; fill: none; stroke: rgba(110,49,21,.17); stroke-width: .9; pointer-events: none; }
.hero-downline { display: flex; justify-content: center; align-items: center; }
.hero-composition { width: min(100%, var(--measure)); flex: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(2rem, 7svh, 5rem); margin: auto; padding: 4rem 0 3rem; }
.hero-copy { position: relative; }
.hero-overline { margin: 0 0 1.3rem; padding-left: .7rem; border-left: 1px solid rgba(110,49,21,.42); color: var(--mahogany); font-size: .66rem; font-weight: 700; letter-spacing: .18em; }
.hero-overline span { padding: 0 .35rem; }
.hero h1 { position: relative; display: flex; flex-direction: column; margin: 0; color: var(--navy-950); }
.hero-title-first { font: 600 clamp(.9rem, 3.4vw, 1.45rem)/1.3 var(--sans); letter-spacing: .12em; }
.hero-title-main { font: normal clamp(2.05rem, 9.1vw, 6.8rem)/.98 var(--serif); letter-spacing: -.067em; margin: .16em 0 0 -.045em; }
/* Gate → Hero on one clock (t0 = tap). The H1 stays the real serif; a pen mask writes it, then the mask is dropped at `complete`. */
.hero-title-writing { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.hero-title-pen__stroke { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.hero-title-pen__fill { fill: #fff; opacity: 0; }
.hero:is([data-entry-state="writing"],[data-entry-state="settling"]) #hero-title { -webkit-mask: url(#hero-title-pen); mask: url(#hero-title-pen); }
.hero:is([data-entry-state="writing"],[data-entry-state="settling"]) .hero-title-pen__stroke { animation: hero-ink-write var(--pen-for) linear var(--pen-at) forwards; }
.hero:is([data-entry-state="writing"],[data-entry-state="settling"]) .hero-title-pen__fill { animation: hero-fill-in var(--pen-for) ease-out var(--pen-at) forwards; }
.hero:is([data-entry-state="writing"],[data-entry-state="settling"]) .hero-contour path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hero-contour-draw 1500ms cubic-bezier(.45,.05,.35,1) calc(var(--hero-contour-at) + var(--k, 0) * 140ms) forwards; }
.hero:is([data-entry-state="writing"],[data-entry-state="settling"]) :is(.hero-overline,.hero-generation,.hero-date,.hero-downline) { opacity: 0; animation: hero-wipe-in var(--hero-wipe, 800ms) var(--ease) var(--hero-at, 0ms) forwards; }
.hero:is([data-entry-state="writing"],[data-entry-state="settling"]) .hero-mark--seal img { opacity: 0; animation: hero-seal-in 1000ms var(--ease) var(--hero-seal-at) forwards; }
.hero-overline { --hero-at: var(--hero-overline-at); }
.hero-generation { --hero-at: var(--hero-details-at); --hero-wipe: 900ms; }
.hero-date { --hero-at: calc(var(--hero-details-at) + 250ms); }
.hero-downline { --hero-at: var(--hero-cue-at); --hero-wipe: 900ms; }
.hero-contour path:nth-child(2) { --k: 1; } .hero-contour path:nth-child(3) { --k: 2; } .hero-contour path:nth-child(4) { --k: 3; }
@keyframes hero-ink-write { from { opacity: 1; stroke-dashoffset: 1; } to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes hero-fill-in { to { opacity: 1; } }
@keyframes hero-wipe-in { from { opacity: 0; clip-path: inset(-2px 100% -2px -2px); transform: translateY(5px); } 30% { opacity: 1; } to { opacity: 1; clip-path: inset(-2px -2px -2px -2px); transform: none; } }
@keyframes hero-contour-draw { to { stroke-dashoffset: 0; } }
/* The seal animates on the <img> itself: a parent with opacity/transform would isolate its multiply blend and jump at `complete`. */
@keyframes hero-seal-in { from { opacity: 0; transform: rotate(-8deg) scale(.92); } to { opacity: .72; transform: none; } }
.hero-generation { display: flex; flex-direction: column; width: max-content; max-width: 100%; margin-top: clamp(2.2rem, 7svh, 4.4rem); padding-top: .75rem; border-top: 1px solid var(--navy-950); }
.hero-generation span { color: var(--mahogany); font-size: .7rem; font-weight: 700; letter-spacing: .2em; }
.hero-generation strong { margin-top: .15rem; font: normal clamp(2.1rem, 10vw, 5rem)/1.08 var(--serif); letter-spacing: -.04em; }
.hero-date { margin: 2rem 0 0; font-size: clamp(.8rem, 2.7vw, 1rem); font-weight: 700; letter-spacing: .17em; white-space: nowrap; }
.hero-date span { color: var(--walnut); padding: 0 .1rem; }
.hero-identity { align-self: end; display: grid; place-items: center; width: clamp(4.5rem, 15vw, 5.35rem); aspect-ratio: 1; padding: 0; }
.hero-mark { display: grid; place-items: center; overflow: hidden; }
.hero-mark--seal { width: 100%; aspect-ratio: 1; background: transparent; overflow: visible; }
.hero-mark--seal img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; opacity: .72; filter: drop-shadow(0 2px 3px rgba(7,21,36,.18)); }
.hero-downline { border-top: 1px solid var(--line-dark); padding-top: .75rem; color: var(--mahogany); }
.scroll-cue { display: inline-flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 44px; min-height: 44px; padding: .15rem 1.25rem .05rem; color: var(--mahogany); font-size: .62rem; font-weight: 700; letter-spacing: .3em; text-decoration: none; text-indent: .3em; }
.scroll-cue:hover .scroll-cue__label { color: var(--navy-950); }
.scroll-cue:focus-visible { outline: 3px solid var(--mahogany); outline-offset: 2px; }
.scroll-cue { --cue-h: 1.9rem; }
.scroll-cue__thread { position: relative; display: block; width: 1px; height: var(--cue-h); background: linear-gradient(to bottom, rgba(110,49,21,.15), rgba(110,49,21,.6)); }
.scroll-cue__thread::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 7px; height: 7px; border-right: 1px solid var(--mahogany); border-bottom: 1px solid var(--mahogany); transform: translateX(-50%) rotate(45deg); }
.scroll-cue__thread i { position: absolute; left: 50%; top: 0; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--mahogany); box-shadow: 0 0 0 3px rgba(110,49,21,.1); animation: scroll-cue-run 2000ms cubic-bezier(.5,0,.3,1) 900ms infinite; }
@keyframes scroll-cue-run { 0% { transform: translateY(0); opacity: 0; } 18% { opacity: 1; } 78% { opacity: 1; } 100% { transform: translateY(calc(var(--cue-h) - .25rem)); opacity: 0; } }

/* 02 · Meridian date register: custom linework, one blue instrument. */
.counter { min-height: 0; background: linear-gradient(148deg, var(--navy-800), var(--navy-950) 82%); color: var(--ink-inverse); }
.counter-inner { position: relative; display: flex; flex-direction: column; align-items: center; width: min(100% - 2 * var(--gutter), 54rem); margin: 0 auto; padding: 1.45rem 0 1.75rem; }
.counter-engraving { position: absolute; z-index: 0; top: .65rem; right: .25rem; width: clamp(3.5rem, 10vw, 6.2rem); height: auto; opacity: .48; filter: drop-shadow(0 1px 2px rgba(0,0,0,.36)); pointer-events: none; }
.counter-engraving path, .counter-engraving circle { fill: none; stroke: rgba(240,212,191,.42); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.counter-heading { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .26rem; text-align: center; }
.counter-title { margin: 0; color: rgba(240,212,191,.78); font: 700 .62rem/1.2 var(--sans); letter-spacing: .23em; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.counter-date { color: var(--ivory-light); font: normal clamp(1.06rem,4.4vw,1.25rem)/1.1 var(--serif); letter-spacing: .12em; text-shadow: 0 2px 3px rgba(0,0,0,.32); }
.counter-divider { display: block; width: clamp(5rem, 18vw, 7rem); height: .8rem; margin: .35rem 0 .42rem; overflow: visible; filter: drop-shadow(0 1px 2px rgba(0,0,0,.34)); }
.counter-divider path { fill: none; stroke: rgba(240,212,191,.62); stroke-width: .8; stroke-linecap: round; stroke-linejoin: round; }
.counter-divider circle { fill: var(--ivory-light); stroke: none; }
.counter-instrument { width: min(100%,18rem); margin-inline: auto; padding: .9rem .55rem; border: 1px solid rgba(240,212,191,.3); background: linear-gradient(160deg, rgba(30,54,83,.94), rgba(7,21,36,.94)); box-shadow: inset 0 1px 0 rgba(249,235,223,.22), inset 0 -1px 0 rgba(0,0,0,.38); filter: drop-shadow(0 5px 8px rgba(0,0,0,.28)); }
.counter-register { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-items: stretch; min-width: 0; padding-right: 0; }
.counter-unit { min-width: 0; min-height: 3.9rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .22rem; padding: .3rem .1rem; text-align: center; }
.counter-unit + .counter-unit { border-left: 1px solid rgba(240,212,191,.2); }
.counter-unit strong { color: var(--ivory-light); font: normal clamp(1.6rem,6.4vw,2.03rem)/1 var(--serif); font-variant-numeric: tabular-nums; letter-spacing: -.035em; filter: drop-shadow(0 1px 1px rgba(0,0,0,.38)); }
.counter-unit--days strong { font-size: clamp(1.82rem,6.82vw,2.24rem); }
.counter-unit span { color: rgba(240,212,191,.82); font-size: .5rem; font-weight: 700; letter-spacing: .11em; line-height: 1.2; }
.counter [data-unit].is-ticking { animation: counter-register-shift 190ms ease-out both; }
@keyframes counter-register-shift { from { opacity: .58; transform: translateY(.1em); } to { opacity: 1; transform: translateY(0); } }

/* 03 · Collective editorial pause. */
.dedication { background: var(--ivory); }
.dedication-inner { position: relative; display: grid; gap: 1.25rem; width: min(100% - 2 * var(--gutter), var(--measure)); margin: 0 auto; padding: 3rem 0 4rem; }
.dedication-rule { display: flex; gap: .35rem; align-items: start; height: 3rem; }
.dedication-rule span { display: block; width: 1px; height: 100%; background: var(--walnut); transform: rotate(38deg); transform-origin: top center; }
.dedication-rule span:nth-child(2) { height: 74%; opacity: .5; }
.dedication-rule span:nth-child(3) { height: 50%; opacity: .25; }
.dedication h2 { max-width: 14ch; }
.dedication h2 em { color: var(--mahogany); }
.dedication-copy { position: relative; padding: .9rem 0 1rem .9rem; border-left: 1px solid rgba(110,49,21,.38); box-shadow: inset 1px 0 0 rgba(249,235,223,.55); }
.dedication-copy::before { content: ""; position: absolute; top: 0; left: 0; width: min(72%, 20rem); border-top: 1px solid rgba(110,49,21,.28); }
.dedication-copy > p:not(.eyebrow, .dedication-signature) { max-width: 35rem; margin: 2rem 0 0; font: normal clamp(1.08rem, 3.9vw, 1.42rem)/1.65 var(--serif); }
.dedication-signature { margin: 2rem 0 0; padding-top: .7rem; border-top: 1px solid var(--line-dark); color: var(--espresso); font-size: .64rem; font-weight: 700; letter-spacing: .12em; line-height: 1.7; }
.dedication-signature span { padding: 0 .25rem; }

/* 04 · Casa Zafiro architecture, drawn into the celebration field. */
.location { background: #0e2234; color: var(--ivory-light); }
.location-texture { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; fill: none; pointer-events: none; }
.location-texture path { stroke: rgba(240,212,191,.095); stroke-width: 1; vector-effect: non-scaling-stroke; }
.location-texture path:nth-child(3n) { stroke: rgba(48,91,126,.24); }
.location-inner { position: relative; z-index: 1; width: min(100% - 2 * var(--gutter), var(--measure)); margin: 0 auto; padding: 1.75rem 0 2.25rem; }
.location-heading-block { position: relative; z-index: 1; padding-bottom: .85rem; }
.location h2 { font-size: clamp(3rem, 13.5vw, 4.8rem); line-height: .9; }
.location h2 em { color: var(--ivory); }
.location-caption { margin: .9rem 0 0; color: var(--ivory); font-size: .74rem; font-weight: 700; letter-spacing: .13em; }
.location-caption span { padding: 0 .3rem; }
.location-map { margin: 1.45rem 0 1.1rem; }
.location-map[hidden] { display: none !important; }
/* Map button · adapted from assets-kc-galery/buttons/button-linea: a hairline that traces its own perimeter (the site speaks in lines). */
.kc-map-btn { --btn-ink: var(--ivory-light); --btn-line: var(--ivory); --btn-rest: rgba(240,212,191,.42); --btn-wash: rgba(240,212,191,.1); --btn-shadow: 0 7px 16px -6px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.22);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; padding: .7rem 1.15rem; overflow: hidden; color: var(--btn-ink); font: 700 .68rem/1.2 var(--sans); letter-spacing: .15em; text-decoration: none; background: transparent; box-shadow: inset 0 0 0 1px var(--btn-rest), var(--btn-shadow); -webkit-tap-highlight-color: transparent; transition: transform var(--duration-short) var(--ease), background-color var(--duration-short) ease, box-shadow var(--duration-short) ease; }
.kc-map-btn--light { --btn-ink: var(--navy-950); --btn-line: var(--mahogany); --btn-rest: rgba(110,49,21,.4); --btn-wash: rgba(110,49,21,.07); --btn-shadow: 0 6px 13px -6px rgba(79,33,13,.4), 0 1px 3px rgba(79,33,13,.16); }
.kc-map-btn::before, .kc-map-btn::after { content: ""; position: absolute; z-index: -1; left: 0; width: 100%; height: 1.5px; box-sizing: border-box; pointer-events: none; transition: transform .26s linear, height .26s linear; }
.kc-map-btn::before { bottom: 0; border-bottom: 1.5px solid transparent; border-left: 1.5px solid transparent; transform: translateX(100%); }
.kc-map-btn::after { top: 0; border-top: 1.5px solid transparent; border-right: 1.5px solid transparent; transform: translateX(-100%); }
.kc-map-btn span { font-size: 1rem; font-weight: 400; transition: transform var(--duration-short) var(--ease); }
.kc-map-btn:is(:hover, :focus-visible, :active)::before, .reveal-ready.is-in-view .kc-map-btn::before { border-color: var(--btn-line); height: 100%; transform: translateX(0); transition: transform .3s linear .12s, height .3s linear .42s; }
.kc-map-btn:is(:hover, :focus-visible, :active)::after, .reveal-ready.is-in-view .kc-map-btn::after { border-color: var(--btn-line); height: 100%; transform: translateX(0); transition: transform .3s linear .12s, height .3s linear .62s; }
.reveal-ready.is-in-view .kc-map-btn::before, .reveal-ready.is-in-view .kc-map-btn::after { transition-delay: .7s, 1s; }
.kc-map-btn:hover { background: var(--btn-wash); }
.kc-map-btn:hover span { transform: translate(2px,-2px); }
.kc-map-btn:active { transform: scale(.97); box-shadow: inset 0 0 0 1px var(--btn-rest), 0 2px 5px -2px rgba(0,0,0,.4); }
.kc-map-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.kc-map-btn--light:focus-visible { outline-color: var(--mahogany); }
.hotel-feature .kc-map-btn { width: 100%; min-height: 44px; margin-bottom: .3rem; gap: .4rem; padding: .5rem .65rem; font-size: .58rem; letter-spacing: .08em; white-space: nowrap; }
.location-window { position: relative; width: min(100%, 32rem); margin: 0; }
.location-window::before { content: ""; position: absolute; z-index: 2; top: -.3rem; left: -.25rem; width: 4.5rem; height: 1px; background: var(--ivory); transform: rotate(-8deg); transform-origin: left; }
.location-image { --location-photo-mask: polygon(0 100%, 0 22%, 12% 22%, 12% 12%, 30% 12%, 30% 3%, 73% 3%, 82% 6%, 91% 11%, 100% 20%, 100% 100%); position: relative; isolation: isolate; height: clamp(12.5rem, 62vw, 15.5rem); overflow: visible; background: transparent; border: 0; box-shadow: none; }
.location-image::before, .location-image img, .location-image::after { clip-path: var(--location-photo-mask); }
.location-image::before { content: ""; position: absolute; z-index: -1; inset: 0; background: rgba(134,76,44,.42); transform: translate(5px,6px); }
.location-image img { position: relative; z-index: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 46% 58%; }
.location-image::after { content: ""; position: absolute; z-index: 1; inset: 0; border: 1px solid rgba(240,212,191,.34); pointer-events: none; }
.location-window figcaption { display: flex; justify-content: flex-end; padding-top: .55rem; color: var(--ivory); font-size: .63rem; font-weight: 700; letter-spacing: .14em; line-height: 1.5; text-align: right; }

/* 05 · A single executive spine, no separate cards or carousel. */
.itinerary { background: var(--ivory-light); }
.itinerary-inner { width: min(100% - 2 * var(--gutter), var(--measure)); margin: 0 auto; padding: 3.5rem 0 6rem; }
.itinerary h2 em { color: var(--mahogany); }
.itinerary-heading > p:last-child { max-width: 25rem; margin: 1.5rem 0 0; font: normal 1.08rem/1.55 var(--serif); }
.timeline-sequence { position: relative; margin: 3.75rem 0 0; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline-spine { position: absolute; z-index: 0; top: 1.05rem; bottom: 1.05rem; left: .42rem; width: 2px; background: linear-gradient(90deg, rgba(79,33,13,.8), rgba(134,76,44,.52)); box-shadow: 1px 0 0 rgba(249,235,223,.75); transform-origin: top; }
.itinerary.reveal-ready .timeline-spine { transform: scaleY(0); }
.itinerary.reveal-ready .timeline li { opacity: 0; transform: translateY(12px); }
.timeline li { position: relative; display: grid; grid-template-columns: minmax(5.6rem, 6.1rem) minmax(0,1fr); gap: .55rem; min-height: 6.2rem; padding: .65rem 0 1.45rem 2.2rem; border-bottom: 1px solid var(--line-dark); }
.timeline li:last-child { border-bottom: 0; }
.timeline-marker { position: absolute; z-index: 1; top: .91rem; left: .15rem; width: .57rem; height: .57rem; background: var(--ivory-light); border: 1px solid var(--mahogany); transform: rotate(45deg); }
.timeline-marker.is-lit { background: var(--walnut); box-shadow: 0 0 0 2px rgba(134,76,44,.12); }
.timeline li::after { content: ""; position: absolute; z-index: 0; top: 1.18rem; left: .42rem; width: 1.1rem; border-top: 1px solid rgba(110,49,21,.58); }
.timeline li:first-child .timeline-marker, .timeline li:last-child .timeline-marker { background: var(--walnut); }
.timeline time { color: var(--mahogany); font-size: clamp(.7rem, 2.7vw, .82rem); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .025em; white-space: nowrap; line-height: 1.5; }
.timeline h3 { margin: -.1rem 0 0; font: normal clamp(1.06rem, 4.4vw, 1.48rem)/1.3 var(--serif); letter-spacing: -.018em; }
.timeline p { margin: .3rem 0 0; color: var(--espresso); font-size: .86rem; line-height: 1.45; }

/* 06 · Executive Stay: the itinerary spine resolves into two room-key paper objects. */
.preferred-lodging { background: var(--ivory); }
.preferred-lodging__inner { position: relative; width: min(100% - 2 * var(--gutter), var(--measure)); margin: 0 auto; padding: .25rem 0 2.25rem; }
.lodging-handoff { display: block; width: 2rem; height: 1.75rem; margin: 0 0 .45rem .1rem; overflow: visible; fill: none; stroke: var(--walnut); stroke-width: 1; stroke-linecap: square; stroke-linejoin: miter; }
.lodging-handoff circle { fill: var(--walnut); stroke: none; }
.preferred-lodging__heading { max-width: 38rem; padding: 0 0 .75rem; }
.preferred-lodging__heading h2 { margin: 0; color: var(--navy-950); font: normal clamp(2.5rem, 9.5vw, 5rem)/.93 var(--serif); letter-spacing: -.055em; }
.preferred-lodging__heading h2 em { color: var(--mahogany); font-weight: normal; }
.preferred-lodging__heading > p:not(.eyebrow) { max-width: 31rem; margin: .75rem 0 0; font: normal clamp(1.05rem, 3.5vw, 1.25rem)/1.5 var(--serif); }
.preferred-lodging__heading .preferred-lodging__support { margin-top: .55rem; color: var(--espresso); font: 500 .85rem/1.55 var(--sans); }
.lodging-list { display: grid; gap: 0; margin-top: .75rem; }
.hotel-feature { position: relative; display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: .6rem; align-items: center; min-height: 0; padding: .7rem 0 .8rem; border-top: 1px solid rgba(79,33,13,.28); }
.hotel-feature:last-child { border-bottom: 1px solid rgba(79,33,13,.28); }
.hotel-feature__visual { --hotel-photo-mask: ellipse(49% 45% at 51% 50%); position: relative; z-index: 0; width: 100%; max-height: 8.5rem; aspect-ratio: 1.2 / 1; margin: 0; isolation: isolate; }
.hotel-feature__visual::before, .hotel-feature__visual img { clip-path: var(--hotel-photo-mask); }
.hotel-feature__visual::before { content: ""; position: absolute; z-index: -1; inset: 0; background: rgba(110,49,21,.17); transform: translate(4px,5px); }
.hotel-feature__visual img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
.hotel-feature--alborada .hotel-feature__visual { --hotel-photo-mask: ellipse(49% 45% at 51% 50%); }
.hotel-feature--alborada .hotel-feature__visual img { object-position: 64% 48%; }
.hotel-feature--norte .hotel-feature__visual { --hotel-photo-mask: polygon(4% 7%, 94% 0, 100% 80%, 88% 100%, 0 92%); grid-column: 2; grid-row: 1; }
.hotel-feature--norte .hotel-feature__visual::before { transform: translate(-4px,5px); }
.hotel-feature--norte .hotel-feature__visual img { object-position: 42% 52%; }
.hotel-feature__copy { position: relative; z-index: 1; max-width: 27rem; padding: .25rem 0 .25rem .95rem; border-left: 1px solid rgba(110,49,21,.48); box-shadow: inset 1px 0 0 rgba(249,235,223,.65); }
.hotel-feature--norte .hotel-feature__copy { grid-column: 1; grid-row: 1; justify-self: end; padding: .25rem .75rem .25rem 0; border-left: 0; border-right: 1px solid rgba(110,49,21,.48); box-shadow: inset -1px 0 0 rgba(249,235,223,.65); text-align: right; }
.hotel-feature__eyebrow { margin: 0 0 .35rem; color: var(--walnut); font-size: .6rem; font-weight: 700; letter-spacing: .14em; }
.hotel-feature__name { margin: 0; color: var(--navy-950); font: normal clamp(1.2rem, 5.2vw, 1.65rem)/1.02 var(--serif); letter-spacing: -.035em; }
.hotel-feature__rate { margin: .45rem 0 0; color: var(--mahogany); font-size: .66rem; font-weight: 700; letter-spacing: .12em; }
.hotel-feature__code { display: inline-flex; align-items: baseline; gap: .2rem; margin: .35rem 0 0; padding: .3rem .25rem .26rem; border-top: 1px solid rgba(110,49,21,.52); border-bottom: 1px solid rgba(110,49,21,.32); color: var(--espresso); font-size: .64rem; letter-spacing: .03em; white-space: nowrap; }
.hotel-feature__code strong { color: var(--navy-950); font: 700 .85rem/1.2 var(--sans); letter-spacing: .08em; }
.hotel-feature--norte .hotel-feature__code { justify-content: flex-end; }
.hotel-feature__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5rem; margin-top: .2rem; }
.hotel-feature--norte .hotel-feature__actions { justify-content: flex-end; }
.lodging-action { display: inline-flex; align-items: center; justify-content: space-between; gap: .65rem; min-width: 44px; min-height: 44px; padding: .62rem .1rem; border: 0; border-bottom: 1px solid rgba(79,33,13,.48); background: transparent; color: var(--navy-950); font: 700 .65rem/1.3 var(--sans); letter-spacing: .11em; text-align: left; text-decoration: none; cursor: pointer; }
.lodging-action--primary { color: var(--mahogany); border-bottom-color: var(--mahogany); }
.lodging-action span { font-size: .95rem; font-weight: 400; }
.lodging-action:hover { color: var(--walnut); border-bottom-color: var(--walnut); }
.lodging-action:focus-visible { outline: 3px solid var(--academic-blue); outline-offset: 3px; }
.preferred-lodging.reveal-ready:not(.is-in-view) .hotel-feature { opacity: 0; transform: translateY(10px); }
.preferred-lodging.reveal-ready.is-in-view .hotel-feature { animation: lodging-paper-reveal 520ms var(--ease) both; }
.preferred-lodging.reveal-ready.is-in-view .hotel-feature--norte { animation-delay: 80ms; }
@keyframes lodging-paper-reveal { to { opacity: 1; transform: none; } }

/* 07 · RSVP as an engraved reservation, not a generic form card. */
.rsvp { background: linear-gradient(138deg, var(--navy-950), #10283b 72%, #17324a); color: var(--ivory-light); }
.rsvp-inner { position: relative; display: grid; gap: clamp(2.5rem,7vw,5rem); align-items: center; width: min(100% - 2 * var(--gutter),var(--measure)); margin: 0 auto; padding: clamp(3.5rem,8vw,6.5rem) 0; }
.rsvp-heading { max-width: 36rem; padding: .5rem 0 .65rem 1.15rem; border-left: 1px solid rgba(240,212,191,.46); box-shadow: inset 1px 0 0 rgba(249,235,223,.12); }
.rsvp-heading h2 { margin: 0; color: var(--ivory-light); font: normal clamp(2.35rem,8.4vw,4.7rem)/.98 var(--serif); letter-spacing: -.055em; }
.rsvp-heading h2 em { color: var(--ivory); font-weight: normal; }
.rsvp-heading > p:last-child { max-width: 28rem; margin: 1.25rem 0 0; color: rgba(249,235,223,.88); font: normal clamp(1.05rem,3.5vw,1.24rem)/1.55 var(--serif); }
.rsvp-inscription { position: relative; display: flex; flex-direction: column; align-items: flex-start; max-width: 27rem; padding: .2rem 0 .2rem 1.15rem; border-left: 1px solid rgba(240,212,191,.36); }
.rsvp-meridian-mark { width: 2.25rem; height: 2.25rem; margin: 0 0 1.1rem; fill: none; stroke: rgba(240,212,191,.82); stroke-width: .8; stroke-linecap: square; stroke-linejoin: miter; }
.rsvp-meridian-mark circle { fill: var(--ivory-light); stroke: none; }
.rsvp-generation { display: flex; flex-direction: column; gap: .18rem; margin: 0; color: rgba(240,212,191,.82); font-size: .66rem; font-weight: 700; letter-spacing: .15em; }
.rsvp-generation span { color: var(--ivory-light); font: normal 1.2rem/1.2 var(--serif); letter-spacing: .08em; }
.rsvp-event-label { margin: .85rem 0 0; color: rgba(249,235,223,.82); font-size: .66rem; font-weight: 700; letter-spacing: .09em; }
.rsvp-date { margin-top: .35rem; color: var(--ivory-light); font: normal clamp(1.45rem,5vw,2rem)/1.2 var(--serif); letter-spacing: .04em; }
.rsvp-venue { margin: .3rem 0 0; color: var(--ivory); font-size: .72rem; font-weight: 700; letter-spacing: .13em; }
.rsvp-engraved-rule { display: flex; align-items: center; gap: .4rem; width: min(100%,16rem); margin: 1rem 0 .65rem; }
.rsvp-engraved-rule span { height: 1px; flex: 1; background: rgba(240,212,191,.34); }
.rsvp-engraved-rule i { width: .35rem; height: .35rem; border: 1px solid rgba(240,212,191,.65); transform: rotate(45deg); }
.rsvp-preview-action { display: inline-flex; align-items: center; justify-content: flex-start; min-width: 44px; min-height: 48px; padding: .65rem .1rem; border: 0; border-bottom: 1px solid rgba(240,212,191,.5); background: transparent; color: rgba(249,235,223,.82); font: 700 .65rem/1.35 var(--sans); letter-spacing: .1em; text-align: left; }
.rsvp-preview-action:disabled { cursor: not-allowed; }
.rsvp-status { max-width: 22rem; margin: .55rem 0 0; color: rgba(249,235,223,.84); font-size: .82rem; line-height: 1.55; }

/* 08 · The camera is an engraved instrument; upload/gallery behavior is not enabled in this preview. */
.capture-moment { background: #0e2234; color: var(--ivory-light); }
.capture-inner { display: grid; gap: .85rem; align-items: center; width: min(100% - 2 * var(--gutter),var(--measure)); margin: 0 auto; padding: 1.6rem 0 1.9rem; }
.capture-copy { max-width: 35rem; }
.capture-copy h2 { margin: 0; color: var(--ivory-light); font: normal clamp(1.7rem,7vw,2.8rem)/.98 var(--serif); letter-spacing: -.05em; }
.capture-copy h2 em { color: var(--ivory); font-weight: normal; }
.capture-copy .capture-status { max-width: 24rem; margin: .45rem 0 0; color: rgba(240,212,191,.82); font: 500 .82rem/1.5 var(--sans); letter-spacing: .01em; }
.capture-object { display: grid; justify-items: center; width: min(100%,12rem); margin: .1rem auto 0; }
.capture-camera { display: block; width: min(100%,11rem); height: auto; overflow: visible; filter: drop-shadow(0 6px 14px rgba(0,0,0,.28));  animation: kc-echoes-levita 4.6s ease-in-out infinite; }
@keyframes kc-echoes-levita { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1deg); } }
.capture-soon { margin-top: 1.1rem; cursor: not-allowed; opacity: .82; }
.capture-soon:hover { background: transparent; }
.capture-soon:active { transform: none; }
@media (prefers-reduced-motion: reduce) { .capture-camera { animation: none; } }
.capture-camera__body { fill: rgba(7,21,36,.3); stroke: rgba(240,212,191,.78); stroke-width: 1.2; stroke-linejoin: miter; }
.capture-camera__inner { fill: none; stroke: rgba(240,212,191,.25); stroke-width: .7; }
.capture-camera__lens { fill: rgba(48,91,126,.17); stroke: var(--ivory); stroke-width: 1.15; }
.capture-camera__lens-inner { fill: none; stroke: rgba(240,212,191,.64); stroke-width: .8; }
.capture-camera__meridian, .capture-camera__datum, .capture-camera__flash { fill: none; stroke: rgba(240,212,191,.64); stroke-width: .75; stroke-linecap: square; stroke-linejoin: miter; }
.capture-camera__flash { stroke: var(--ivory); stroke-width: 1; }
.capture-camera__point { fill: var(--ivory-light); stroke: none; }
/* 09 · The Meridian seal opens one private line of copy, then returns to rest. */
.secret-message { overflow-anchor: none; background: var(--ivory-light); color: var(--navy-950); }
.secret-inner { display: grid; gap: .85rem; align-items: center; width: min(100% - 2 * var(--gutter),var(--measure)); margin: 0 auto; padding: 1.6rem 0 1.9rem; }
.secret-heading-block { max-width: 35rem; }
.secret-heading-block > .eyebrow { margin-bottom: .55rem; }
.secret-heading-block h2 { margin: 0; color: var(--navy-950); font: normal clamp(1.7rem,7vw,3rem)/.98 var(--serif); letter-spacing: -.05em; }
.secret-heading-block h2 em { color: var(--mahogany); font-weight: normal; }
.secret-object { display: grid; justify-items: center; gap: .5rem; width: min(100%,26rem); margin-inline: auto; }
.secret-trigger { display: grid; justify-items: center; gap: .2rem; min-width: 44px; min-height: 44px; padding: .15rem .8rem .25rem; border: 0; background: transparent; color: var(--mahogany); font: 700 .66rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.secret-seal { display: block; width: clamp(5rem,20vw,6rem); height: auto; overflow: visible; filter: drop-shadow(0 4px 4px rgba(79,33,13,.18)); transform: rotate(-5deg); transition: transform 460ms var(--ease), filter 460ms ease; }
.secret-seal__outer { fill: rgba(240,212,191,.58); stroke: rgba(79,33,13,.86); stroke-width: 1.15; }
.secret-seal__inner { fill: none; stroke: rgba(110,49,21,.62); stroke-width: .85; }
.secret-seal__rays { fill: none; stroke: rgba(110,49,21,.58); stroke-width: .72; stroke-linecap: square; }
.secret-seal__axis { fill: rgba(240,212,191,.48); stroke: var(--mahogany); stroke-width: 1.15; }
.secret-seal__needle { fill: rgba(110,49,21,.1); stroke: var(--walnut); stroke-width: .8; stroke-linejoin: miter; }
.secret-seal__point { fill: var(--mahogany); stroke: none; }
.secret-trigger[aria-expanded="true"] .secret-seal { filter: drop-shadow(0 1px 2px rgba(79,33,13,.2)); transform: rotate(40deg) scale(.96); }
.secret-trigger:active .secret-seal { transform: translateY(2px) scale(.985); }
.secret-trigger:focus-visible { outline: 2px solid var(--academic-blue); outline-offset: 5px; }
.secret-trigger-label { min-height: 1.2em; }
.secret-reveal[hidden] { display: none !important; }
.secret-reveal { width: 100%; max-width: 26rem; padding: .25rem 0 .15rem 1rem; border-left: 1px solid rgba(110,49,21,.46); box-shadow: inset 1px 0 0 rgba(249,235,223,.7); }
.secret-copy { margin: .25rem 0 0; color: var(--navy-950); font: normal clamp(1rem,3vw,1.15rem)/1.5 var(--serif); }
.secret-progress { width: min(100%,18rem); height: 3px; margin-top: .65rem; overflow: hidden; background: rgba(110,49,21,.18); }
.secret-progress__fill { display: block; width: 100%; height: 100%; background: var(--mahogany); transform: scaleX(1); transform-origin: right center; }
.secret-reveal.is-open .secret-progress__fill { animation: secret-message-dwell 13s linear both; }
@keyframes secret-message-dwell { to { transform: scaleX(0); } }
.secret-reveal__hint { margin: .25rem 0 0; color: var(--espresso); font-size: .68rem; line-height: 1.4; }

/* KC_PROMO_SHEET · one native modal; source flyer stays whole and scrolls inside its paper frame. */
.promo-sheet { width: min(100%, 52rem); max-width: 100%; max-height: 100svh; margin: auto; padding: 0; overflow: visible; border: 0; background: transparent; color: var(--navy-950); }
.promo-sheet::backdrop { background: rgba(7,21,36,.78); }
.promo-sheet__panel { display: grid; grid-template-rows: auto auto auto minmax(0,1fr) auto; gap: .65rem; max-height: 100svh; padding: max(1rem,env(safe-area-inset-top,0px)) clamp(1rem,4vw,2rem) max(1rem,env(safe-area-inset-bottom,0px)); background: var(--ivory-light); box-shadow: 0 14px 40px rgba(0,0,0,.32); opacity: 0; transform: translateY(28px); transition: opacity 220ms ease, transform 260ms var(--ease); }
.promo-sheet[open][data-state="open"] .promo-sheet__panel { opacity: 1; transform: translateY(0); }
.promo-sheet[open][data-state="closing"] .promo-sheet__panel { opacity: 0; transform: translateY(28px); }
.promo-sheet__close { justify-self: end; display: inline-flex; align-items: center; gap: .8rem; min-width: 44px; min-height: 44px; padding: .45rem 0 .45rem .55rem; border: 0; background: transparent; color: var(--mahogany); font-size: .68rem; font-weight: 700; letter-spacing: .12em; cursor: pointer; }
.promo-sheet__close span { font: normal 1.65rem/1 var(--serif); }
.promo-sheet__panel > .eyebrow { margin: 0; font-size: .62rem; }
.promo-sheet__panel h2 { margin: 0; font: normal clamp(1.65rem,6vw,2.55rem)/1.05 var(--serif); }
.promo-sheet__scroll { min-height: 0; max-height: calc(100svh - 14rem); overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border: 1px solid rgba(79,33,13,.22); background: #fff; }
.promo-sheet__scroll img { display: block; width: auto; height: auto; max-width: 100%; margin: 0 auto; object-fit: initial; }
.promo-sheet__actions { display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; align-items: center; }
.promo-sheet__actions .lodging-action { min-height: 44px; }
.promo-sheet :focus-visible { outline-color: var(--academic-blue); }

/* 08 · KC Style Kit footer, tailored to Executive Meridian. */
.footer { background: var(--footer-canvas); color: var(--footer-ink); }
.footer-inner { display: flex; flex-direction: column; align-items: center; width: min(100% - 2 * var(--gutter), var(--measure)); margin: 0 auto; padding: 4rem 0 calc(2rem + var(--safe-bottom)); text-align: center; }
.footer-divider { display: flex; align-items: center; justify-content: center; gap: .8rem; width: min(14rem, 80%); margin: 0 auto 1.15rem; }
.footer-divider > span:not(.yin-yang) { height: 1px; flex: 1; }
.footer-divider > span:first-child { background: linear-gradient(90deg, transparent, var(--footer-rule)); }
.footer-divider > span:last-child { background: linear-gradient(90deg, var(--footer-rule), transparent); }
.footer-divider .footer-yin-yang { --yy-light: var(--ivory-light); --yy-deep: var(--espresso); width: 1.4rem; height: 1.4rem; flex: none; }
.footer-sello { display: flex; flex-direction: column; gap: .2rem; margin: 0; color: var(--footer-muted); font-size: .66rem; font-weight: 600; letter-spacing: .15em; line-height: 1.9; text-transform: uppercase; }
.footer-sello .nombre-dedicado { color: var(--footer-ink); font: italic normal clamp(.95rem, 3.8vw, 1.2rem)/1.5 var(--serif); letter-spacing: .025em; text-transform: none; }
.footer-sello .lugar-fecha { color: var(--footer-muted); font-size: .64rem; letter-spacing: .11em; }
.footer-brand { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; max-width: 100%; margin-top: 1.8rem; padding: .55rem .25rem; color: var(--footer-ink); font-size: .78rem; font-weight: 700; text-decoration: none; transition: color var(--duration-short) ease; }
.footer-brand .ig-ico { width: .9rem; height: .9rem; flex: none; color: var(--footer-muted); transition: color var(--duration-short) ease; }
.footer-brand-text { font-family: var(--serif); font-style: italic; letter-spacing: .035em; }
.footer-copyright { margin-left: .15rem; color: var(--footer-muted); font-size: .68rem; font-weight: 400; }
.footer-brand:hover, .footer-brand:hover .ig-ico { color: var(--ivory); }
.footer-brand:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.js-observe .footer-reveal { opacity: 0; filter: blur(1px); transition: opacity .65s ease, filter .65s ease; }
.js-observe .footer-reveal.appeared { opacity: 1; filter: blur(0); }

/* Mobile editorial counterpoint: keep the Hero's left axis for titles, let supporting copy answer from the right. */
@media (max-width: 649px) {
  .hero-composition { width: min(calc(100% - var(--kc-music-safe-rail)),var(--measure)); margin-left: 0; margin-right: 0; }
  .counter-register { padding-right: 1rem; }
  .dedication-inner, .location-inner, .itinerary-inner, .preferred-lodging__inner, .footer-inner, .rsvp-inner, .capture-inner, .secret-inner {
    width: min(calc(100% - 2 * var(--gutter) - var(--kc-music-safe-rail)),var(--measure));
    margin-left: var(--gutter);
    margin-right: 0;
  }
  .capture-object, .secret-trigger { transform: translateX(calc(var(--kc-music-safe-rail) / 2)); }
  .location-window { width: min(calc(100% + var(--kc-music-safe-rail)),calc(100vw - 2 * var(--gutter))); max-width: none; }
  .location-caption { width: min(100%,16rem); margin-left: auto; line-height: 1.55; text-align: right; }
  .location-window figcaption { width: min(100%,17rem); margin-left: auto; }
  .itinerary-heading > p:last-child { max-width: 17rem; margin: 1.15rem 0 0 auto; text-align: right; }
  .preferred-lodging__heading > p:not(.eyebrow) { max-width: 18rem; margin-left: auto; text-align: right; }
}
@media (max-width: 360px) {
  :root { --kc-music-safe-rail: 3.75rem; }
  .hero-title-main { font-size: clamp(1.5rem,8vw,1.9rem); }
  .counter-instrument { width: 11rem; padding: .85rem .35rem; }
  .counter-register { padding-right: 0; }
  .counter-unit { min-height: 3.85rem; }
  .capture-copy h2 { font-size: clamp(1.65rem,7.5vw,2rem); }
  .secret-heading-block h2 { font-size: 1.7rem; }
  .rsvp-preview-action { font-size: .58rem; letter-spacing: .07em; }
  .preferred-lodging__heading h2 { font-size: clamp(1.75rem,9.5vw,2rem); }
}

/* Screen-reader-only utility shared with the dedicated KC music component. */
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

@media (min-width: 650px) {
  .gate { padding-right: clamp(2rem, 6vw, 6rem); padding-left: clamp(2rem, 6vw, 6rem); }
  .gate-topline { width: min(100%,24rem); }
  .gate-stage { padding: 2rem 0; }
  .hero-composition { display: grid; grid-template-columns: minmax(0,1fr) 11rem; align-items: end; gap: 3rem; }
  .scroll-cue { --cue-h: 2.5rem; font-size: .72rem; }
  .hero-identity { align-self: center; width: 6.25rem; }
  .hero-mark--seal { width: 6.25rem; }
  .hero-title-main { font-size: clamp(3.3rem, 8.2vw, 7.25rem); }
  .counter-inner { width: min(100% - 2 * var(--gutter), 54rem); padding: 2rem 0 2.25rem; }
  .counter-instrument { padding: .8rem; }
  .counter-unit { min-height: 4.45rem; }
  .counter-unit strong { font-size: clamp(2rem,2.98vw,2.35rem); }
  .counter-unit--days strong { font-size: clamp(2.18rem,3.2vw,2.58rem); }
  .counter-unit span { font-size: .56rem; }
  .rsvp-inner { grid-template-columns: minmax(0,1fr) minmax(19rem,.92fr); }
  .rsvp-heading { justify-self: start; }
  .rsvp-inscription { justify-self: center; width: min(100%,27rem); }
  .capture-inner { grid-template-columns: minmax(0,1fr) minmax(12rem,.65fr); gap: clamp(1.5rem,4vw,3rem); padding: 2.5rem 0 2.7rem; }
  .capture-object { width: min(100%,20rem); justify-self: end; }
  .capture-camera { width: min(100%,18rem); }
  .secret-inner { grid-template-columns: minmax(0,1fr) minmax(16rem,.8fr); gap: 2rem; padding: 2.5rem 0 2.7rem; }
  .secret-object { justify-self: end; }
  .dedication-inner { grid-template-columns: minmax(5rem,.5fr) minmax(0,1.5fr); gap: 2.5rem; padding: 4.5rem 0 5.5rem; }
  .dedication-rule { height: 6rem; }
  .location-inner { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(1.5rem,4vw,3rem); align-items: center; padding: clamp(2.5rem,4vw,4rem) 0; }
  .location-heading-block { padding-bottom: 0; }
  .location h2 { font-size: clamp(3.5rem,7vw,6rem); }
  .location-window { max-width: 36rem; justify-self: end; }
  .location-image { height: clamp(18rem,25vw,22rem); }
  .itinerary-inner { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 8%; padding: 6rem 0 8rem; }
  .timeline-sequence { margin: 1rem 0 0; }
  .preferred-lodging__inner { padding-top: .35rem; padding-bottom: 3rem; }
  .lodging-handoff { margin-bottom: .6rem; }
  .preferred-lodging__heading { max-width: 42rem; padding-bottom: .75rem; }
  .lodging-list { margin-top: .9rem; }
  .hotel-feature { grid-template-columns: minmax(0,1.1fr) minmax(15rem,.9fr); gap: clamp(1.2rem,3.5vw,3rem); min-height: 0; padding: 1.15rem 0 1.35rem; }
  .hotel-feature__visual { grid-column: 1; grid-row: 1; width: min(100%, 25rem); max-height: 20rem; aspect-ratio: 4 / 3; }
  .hotel-feature__copy { grid-column: 2; grid-row: 1; justify-self: start; }
  .hotel-feature__name { font-size: clamp(1.55rem,3vw,2.1rem); }
  .hotel-feature--norte { grid-template-columns: minmax(15rem,.9fr) minmax(0,1.1fr); }
  .hotel-feature--norte .hotel-feature__visual { grid-column: 2; justify-self: end; }
  .hotel-feature--norte .hotel-feature__copy { grid-column: 1; justify-self: end; padding: .25rem .95rem .25rem 0; border-left: 0; border-right: 1px solid rgba(110,49,21,.48); box-shadow: inset -1px 0 0 rgba(249,235,223,.65); text-align: right; }
  .hotel-feature--norte .hotel-feature__actions { justify-content: flex-end; }
  .hotel-feature--norte .hotel-feature__code { justify-content: flex-end; }
  .hotel-feature .kc-map-btn { font-size: .66rem; letter-spacing: .13em; }
  .promo-sheet { width: min(100% - 2rem, 52rem); }
  .promo-sheet__panel { max-height: calc(100svh - 2rem); }
  .promo-sheet__scroll { max-height: calc(100svh - 16rem); }
}
@media (min-width: 1050px) {
  .hero-title-main { font-size: clamp(5rem, 7.5vw, 8.5rem); }
  .hero-generation strong { font-size: 5rem; }
  .hero-composition { grid-template-columns: minmax(0,1fr) 12rem; }
  .counter-register { max-width: 56rem; }
  .timeline li { grid-template-columns: 8rem minmax(0,1fr); gap: 1.5rem; }
  .preferred-lodging__heading { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(20rem,.95fr); grid-template-rows: auto auto auto; column-gap: clamp(3rem,7vw,7rem); row-gap: .35rem; align-items: center; max-width: none; padding-bottom: .35rem; }
  .preferred-lodging__heading > .eyebrow { grid-row: 1; grid-column: 1 / -1; margin-bottom: 0; }
  .preferred-lodging__heading h2 { grid-row: 2 / 4; grid-column: 1; align-self: center; font-size: clamp(2.8rem,4.7vw,4.25rem); }
  .preferred-lodging__heading > p:not(.eyebrow) { grid-column: 2; max-width: 29rem; margin: 0; }
  .preferred-lodging__heading > p:not(.eyebrow):not(.preferred-lodging__support) { grid-row: 2; align-self: end; }
  .preferred-lodging__heading .preferred-lodging__support { grid-row: 3; align-self: start; }
  .hotel-feature { gap: clamp(1.2rem,3.5vw,3rem); padding: .85rem 0 1rem; }
  .hotel-feature__visual { width: min(100%, 23.5rem); max-height: 17.625rem; }
  .hotel-feature--norte { grid-template-columns: minmax(15rem,.9fr) minmax(0,1.1fr); }
}
/* Phones: the copy column gets the larger share so name, rate and both text links sit on one line each; that pays for the Maps button without growing the scene. */
@media (max-width: 649px) { .hotel-feature { grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); } .hotel-feature--norte { grid-template-columns: minmax(0,1.28fr) minmax(0,.72fr); } .hotel-feature .lodging-action { font-size: .6rem; letter-spacing: .08em; } .hotel-feature__actions { gap: 0 .55rem; } }
@media (max-width: 360px) {
  .hotel-feature { grid-template-columns: minmax(0,1fr); gap: .55rem; padding: .75rem 0 .9rem; }
  .hotel-feature__visual { grid-column: 1; grid-row: 1; width: min(100%,11rem); justify-self: start; }
  .hotel-feature--norte .hotel-feature__visual { grid-column: 1; grid-row: 1; justify-self: end; }
  .hotel-feature__copy, .hotel-feature--norte .hotel-feature__copy { grid-column: 1; grid-row: 2; justify-self: stretch; max-width: none; padding: .25rem 0 .25rem .75rem; border-left: 1px solid rgba(110,49,21,.48); border-right: 0; box-shadow: inset 1px 0 0 rgba(249,235,223,.65); text-align: left; }
  .hotel-feature--norte .hotel-feature__code, .hotel-feature--norte .hotel-feature__actions { justify-content: flex-start; }
}
@media (max-height: 670px) and (max-width: 649px) {
  .gate-stage { gap: .3rem; }
  .gate-heading { font-size: 2rem; }
  .hyperframe { width: min(53vw, 36svh); }
}
/* OP04 · depth: one warm light from the top-left. Photos carry a soft cast shadow on their wrapper (the mask clips a shadow set on the masked node itself). */
.location-image { filter: drop-shadow(0 9px 10px rgba(0,0,0,.38)); }
.hotel-feature__visual { filter: drop-shadow(0 4px 5px rgba(79,33,13,.26)); }
.rsvp-meridian-mark { filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
/* Scenes read as stacked sheets: each one casts a short shadow up onto the one before it. */
main > .scene:not(:first-child) { z-index: 1; box-shadow: 0 -9px 16px -11px rgba(7,21,36,.38); }
/* OP04 · one entrance verb per scene. JS adds .reveal-ready (never under reduced motion); .is-in-view plays it. Fill is `backwards`, so every scene lands on its natural CSS. */
.reveal-ready:not(.is-in-view) :is(.counter-engraving path,.rsvp-meridian-mark path,.capture-camera :is(path,circle):not(.capture-camera__point),.secret-seal :is(path,circle):not(.secret-seal__point)) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.reveal-ready:not(.is-in-view) :is(.counter-title,.counter-date,.counter-divider,.counter-instrument,.counter-unit,.dedication-copy > *,.location-heading-block > *,.location-window figcaption,.location-texture,.rsvp-heading > *,.rsvp-inscription > *,.capture-copy > *,.secret-heading-block > *,.secret-object) { opacity: 0; }
.reveal-ready:not(.is-in-view) .dedication-rule span { clip-path: inset(0 0 100% 0); }
.reveal-ready:not(.is-in-view) .location-window { clip-path: polygon(-10% -8%, -10% -8%, -10% 112%, -10% 112%); }
.reveal-ready.is-in-view :is(.counter-title,.counter-date,.dedication-copy > *,.location-heading-block > *,.location-window figcaption,.rsvp-heading > *,.rsvp-inscription > *,.capture-copy > *,.secret-heading-block > *,.secret-object) { animation: scene-rise 760ms var(--ease) var(--in, 0ms) backwards; }
.reveal-ready.is-in-view .counter-title { --in: 0ms; } .reveal-ready.is-in-view .counter-date { --in: 120ms; }
.reveal-ready.is-in-view .counter-engraving path { animation: scene-draw 1500ms cubic-bezier(.45,.05,.35,1) calc(200ms + var(--k, 0) * 160ms) backwards; }
.counter-engraving path:nth-child(2) { --k: 1; } .counter-engraving path:nth-child(3) { --k: 2; }
.reveal-ready.is-in-view .counter-divider { animation: scene-center-grow 800ms var(--ease) 320ms backwards; transform-origin: center; }
.reveal-ready.is-in-view .counter-instrument { animation: scene-rise 900ms var(--ease) 460ms backwards; }
.reveal-ready.is-in-view .counter-unit { animation: scene-rise 700ms var(--ease) calc(680ms + var(--u, 0) * 90ms) backwards; }
.counter-unit:nth-child(2) { --u: 1; } .counter-unit:nth-child(3) { --u: 2; } .counter-unit:nth-child(4) { --u: 3; }
.reveal-ready.is-in-view .dedication-rule span { animation: scene-drop-draw 1000ms cubic-bezier(.45,.05,.35,1) calc(var(--k, 0) * 140ms) backwards; }
.dedication-rule span:nth-child(2) { --k: 1; } .dedication-rule span:nth-child(3) { --k: 2; }
.reveal-ready.is-in-view .dedication-copy > :nth-child(1) { --in: 200ms; } .reveal-ready.is-in-view .dedication-copy > :nth-child(2) { --in: 340ms; } .reveal-ready.is-in-view .dedication-copy > :nth-child(3) { --in: 520ms; } .reveal-ready.is-in-view .dedication-copy > :nth-child(4) { --in: 700ms; animation-name: scene-wipe-in; animation-duration: 1000ms; }
.reveal-ready.is-in-view .location-texture { animation: scene-fade 1600ms ease-out backwards; }
.reveal-ready.is-in-view .location-heading-block > :nth-child(1) { --in: 100ms; } .reveal-ready.is-in-view .location-heading-block > :nth-child(2) { --in: 220ms; } .reveal-ready.is-in-view .location-heading-block > :nth-child(3) { --in: 400ms; } .reveal-ready.is-in-view .location-heading-block > :nth-child(4) { --in: 520ms; }
.reveal-ready.is-in-view .location-window { animation: scene-diagonal-reveal 1300ms cubic-bezier(.5,0,.2,1) 250ms backwards; }
.reveal-ready.is-in-view .location-image img { animation: scene-settle 1700ms var(--ease) 250ms backwards; }
.reveal-ready.is-in-view .location-window figcaption { --in: 1100ms; }
.reveal-ready.is-in-view .rsvp-heading > :nth-child(1) { --in: 0ms; } .reveal-ready.is-in-view .rsvp-heading > :nth-child(2) { --in: 120ms; } .reveal-ready.is-in-view .rsvp-heading > :nth-child(3) { --in: 260ms; }
.reveal-ready.is-in-view .rsvp-inscription > :nth-child(n) { --in: calc(320ms + var(--r, 0) * 90ms); }
.rsvp-inscription > :nth-child(2) { --r: 1; } .rsvp-inscription > :nth-child(3) { --r: 2; } .rsvp-inscription > :nth-child(4) { --r: 3; } .rsvp-inscription > :nth-child(5) { --r: 4; } .rsvp-inscription > :nth-child(6) { --r: 5; } .rsvp-inscription > :nth-child(7) { --r: 6; } .rsvp-inscription > :nth-child(8) { --r: 7; }
.reveal-ready.is-in-view .rsvp-meridian-mark { animation: scene-rise 760ms var(--ease) 320ms backwards, scene-turn 1300ms var(--ease) 320ms backwards; }
.reveal-ready.is-in-view .rsvp-meridian-mark path { animation: scene-draw 1300ms cubic-bezier(.45,.05,.35,1) 380ms backwards; }
.reveal-ready.is-in-view .capture-copy > :nth-child(1) { --in: 0ms; } .reveal-ready.is-in-view .capture-copy > :nth-child(2) { --in: 160ms; }
.reveal-ready.is-in-view .capture-camera :is(path,circle):not(.capture-camera__point) { animation: scene-draw 1400ms cubic-bezier(.45,.05,.35,1) calc(150ms + var(--k, 0) * 110ms) backwards; }
.capture-camera__inner { --k: 1; } .capture-camera__lens { --k: 2; } .capture-camera__lens-inner { --k: 3; } .capture-camera__meridian { --k: 4; } .capture-camera__datum { --k: 5; } .capture-camera__flash { --k: 6; }
.reveal-ready.is-in-view .capture-camera__lens-inner { transform-box: fill-box; transform-origin: center; animation: scene-draw 1400ms cubic-bezier(.45,.05,.35,1) 480ms backwards, scene-focus 1200ms var(--ease) 480ms backwards; }
.reveal-ready.is-in-view .secret-heading-block > :nth-child(1) { --in: 0ms; } .reveal-ready.is-in-view .secret-heading-block > :nth-child(2) { --in: 130ms; }
.reveal-ready.is-in-view .secret-object { --in: 320ms; }
.reveal-ready.is-in-view .secret-seal :is(path,circle):not(.secret-seal__point) { animation: scene-draw 1300ms cubic-bezier(.45,.05,.35,1) calc(500ms + var(--k, 0) * 120ms) backwards; }
.secret-seal__inner { --k: 1; } .secret-seal__rays { --k: 2; } .secret-seal__axis { --k: 3; } .secret-seal__needle { --k: 4; }
.reveal-ready.is-in-view .secret-seal__needle { transform-box: fill-box; transform-origin: center; animation: scene-draw 1300ms cubic-bezier(.45,.05,.35,1) 980ms backwards, scene-swing 1500ms cubic-bezier(.34,1.4,.64,1) 980ms backwards; }
@keyframes scene-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes scene-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes scene-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes scene-center-grow { from { opacity: 0; transform: scaleX(.15); } to { opacity: 1; transform: none; } }
@keyframes scene-drop-draw { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes scene-wipe-in { from { opacity: 0; clip-path: inset(-2px 100% -2px -2px); } 25% { opacity: 1; } to { opacity: 1; clip-path: inset(-2px); } }
@keyframes scene-diagonal-reveal { from { clip-path: polygon(-10% -8%, -10% -8%, -10% 112%, -10% 112%); } to { clip-path: polygon(-10% -8%, 140% -8%, 110% 112%, -10% 112%); } }
@keyframes scene-settle { from { transform: scale(1.06); } to { transform: none; } }
@keyframes scene-turn { from { rotate: -24deg; } to { rotate: 0deg; } }
@keyframes scene-focus { from { transform: scale(.84); } to { transform: none; } }
@keyframes scene-swing { from { rotate: -38deg; } to { rotate: 0deg; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js-observe .footer-reveal { opacity: 1; transform: none; }
  .scroll-cue__thread i { animation: none; opacity: 0; }
  .preferred-lodging.reveal-ready:not(.is-in-view) .hotel-feature { opacity: 1; transform: none; }
  /* Seal stays tactile; the door is a short directional slide, no fragment flight. */
  .gate.hf-activating .crest-assembly { visibility: hidden !important; }
  .gate.hf-activating .gate-leaf { animation-duration: 280ms !important; animation-delay: 0ms !important; }
}

/* KC mobile: below-the-fold scenes skip layout/paint until they approach the viewport.
   Halves the long task when the Gate reveals <main> on mid-range Android (A/B at 4x CPU). */
main > section:not(#counter), main > footer { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* WebKit Hero: the title inks in left to right on the same beats the pen uses elsewhere. */
.hero--wipe:is([data-entry-state="writing"],[data-entry-state="settling"]) #hero-title { -webkit-mask: none; mask: none; }
.hero--wipe[data-entry-state="writing"] .hero-title-first { animation: hero-title-wipe var(--hero-line1-duration) cubic-bezier(.45,.05,.35,1) var(--hero-write-at) backwards; }
.hero--wipe[data-entry-state="writing"] .hero-title-main { animation: hero-title-wipe var(--hero-line2-duration) cubic-bezier(.45,.05,.35,1) var(--hero-line2-at) backwards; }
@keyframes hero-title-wipe { from { opacity: .2; clip-path: inset(-.2em 100% -.2em 0); } to { opacity: 1; clip-path: inset(-.2em 0 -.2em 0); } }

/* A01 · Sin destello azul al tocar en móvil: cada control ya tiene su propio :active/:checked. */
:is(a,button,label,input,select,textarea,summary,[role=button]){-webkit-tap-highlight-color:transparent;}