/* ---------------------------------------------------------------------------
   layout.css — structure, sections, hover and press.

   The composition is cut on diagonals. Every wedge uses the same --shear angle
   so the page reads as one sheet sliced repeatedly rather than a pile of
   unrelated shapes, and every wedge flattens below 52rem, because a diagonal
   that looks decisive on a desktop just eats a phone screen.
--------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 56rem; }

section { position: relative; }
.section-pad { padding-block: clamp(4rem, 2.5rem + 7vw, 8.5rem); }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* A short teal rule — the mockup's most repeated small gesture. */
.tick {
  display: block;
  width: 3.25rem; height: 2px;
  background: var(--accent);
  border: 0;
}

/* =========================================================================
   Dark panels and wedges
   ========================================================================= */

.dark {
  position: relative;
  background: var(--navy);
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
}
/* Anything that normally takes its colour from the light palette has to be
   re-pointed at the on-dark ramp here, or it lands at ~3.5:1 on navy. */
.dark .label,
.dark .prose,
.dark .mono,
.dark .colophon__where { color: var(--on-dark-2); }
.dark .prose strong { color: var(--on-dark); }

/* His lattice lives here now — low-opacity teal inside the navy, where the
   mockup has faint contour lines. It keeps its provenance without competing. */
.dark__field {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}
.dark > *:not(.dark__field) { position: relative; z-index: 1; }

/* A dotted grid, generated rather than drawn. */
.dots {
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 14px 14px;
  color: var(--rule);
  opacity: 0.9;
}
.dark .dots { color: color-mix(in srgb, var(--teal-lt) 45%, transparent); }

/* Wedge edges. The diagonal is read from --wedge so motif.js can shear it on
   scroll by writing one number per panel, instead of rebuilding polygon strings
   every frame. */
.wedge-b  { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--wedge, 4vw)), 0 100%); }
.wedge-t  { clip-path: polygon(0 var(--wedge, 4vw), 100% 0, 100% 100%, 0 100%); }
.wedge-tb { clip-path: polygon(0 var(--wedge, 4vw), 100% 0, 100% calc(100% - var(--wedge, 4vw)), 0 100%); }
@media (max-width: 52rem) {
  /* Flattened on phones: the shape is a desktop luxury, the content is not. */
  .wedge-b, .wedge-t, .wedge-tb { clip-path: none; }
}

/* =========================================================================
   Chrome
   ========================================================================= */

.chrome {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: var(--chrome-bg);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--rule-2);
  transition: background-color 350ms ease, border-color 350ms ease,
              backdrop-filter 350ms ease, color 350ms ease;
}

/* Over the film everything fixed has to invert, or dark-on-paper text sits on a
   night sky and disappears. Measured: the rail's slate came in at 3.09:1 against
   the footage. main.js puts .over-film on the root from scroll position. */
.over-film .chrome {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  color: #F6F3EC;
}
.over-film .chrome__strap { color: rgba(246, 243, 236, 0.78); }
.over-film .chrome__link { color: rgba(246, 243, 236, 0.88); }
.over-film .chrome__link::after { background: var(--gold-lt); }
.over-film .chrome__link[aria-current="true"] { color: var(--gold-lt); }
@media (hover: hover) { .over-film .chrome__link:hover { color: #fff; } }

.over-film .railtext span { color: rgba(246, 243, 236, 0.82); }
.over-film .railtext svg { color: var(--gold-lt); }
.chrome__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 4.25rem;
}
/* Clear the navy corner wedge, which is fixed on top of everything. */
@media (min-width: 52.0625rem) {
  .chrome__inner { padding-left: clamp(4.5rem, 8vw, 7.5rem); }
}
.chrome__id { display: flex; flex-direction: column; gap: 0.15rem; }
.chrome__mark {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.chrome__strap {
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
@media (max-width: 30rem) { .chrome__strap { display: none; } }

.chrome__nav { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 2rem); }
.chrome__link {
  position: relative;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-block: 0.5rem;
  transition: color 160ms ease;
}
.chrome__link::after {
  content: "";
  position: absolute; left: 0; bottom: 0.2rem;
  height: 2px; width: 100%;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .chrome__link:hover { color: var(--ink); }
  .chrome__link:hover::after { transform: scaleX(1); }
}
.chrome__link:focus-visible::after { transform: scaleX(1); }
.chrome__link[aria-current="true"] { color: var(--accent); }
.chrome__link[aria-current="true"]::after { transform: scaleX(1); }
@media (max-width: 52rem) { .chrome__nav .chrome__link { display: none; } }

/* The gold square with the pulse glyph, straight from the mockup. It is the
   theme toggle, so it does something rather than just sitting there. */
.pulse-btn {
  position: relative;
  display: grid; place-items: center;
  width: 2.65rem; height: 2.65rem;
  background: var(--gold);
  color: var(--navy);
  transition: transform 140ms cubic-bezier(0.22,1,0.36,1), background-color 200ms ease;
}
.pulse-btn::before { content: ""; position: absolute; inset: -0.35rem; }
.pulse-btn svg { width: 20px; height: 20px; }
@media (hover: hover) { .pulse-btn:hover { background: var(--gold-lt); } }
.pulse-btn:active { transform: scale(0.92); }
.pulse-btn .icon-sun { display: none; }
:root[data-theme="dark"] .pulse-btn .icon-sun { display: block; }
:root[data-theme="dark"] .pulse-btn .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pulse-btn .icon-sun { display: block; }
  :root:not([data-theme="light"]) .pulse-btn .icon-moon { display: none; }
}

.progress {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(to right, var(--teal), var(--gold));
  z-index: 101;
}

/* The navy corner wedge carrying the drawn monogram. */
.corner-mark {
  position: fixed;
  top: 0; left: 0;
  width: clamp(96px, 11vw, 150px);
  height: clamp(72px, 8vw, 106px);
  background: var(--navy);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: 102;
  pointer-events: none;
  display: grid;
}
.corner-mark svg {
  width: 46%; height: auto;
  margin: 12% 0 0 10%;
  color: var(--gold);
}
@media (max-width: 52rem) { .corner-mark { display: none; } }

/* The rotated rail down the left edge. */
.railtext {
  position: fixed;
  left: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  width: 3.25rem;
  display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
  pointer-events: none;
}
.railtext span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: var(--step--2);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  white-space: nowrap;
  transition: color 350ms ease;
}
.railtext svg { width: 14px; height: 14px; color: var(--accent); transition: color 350ms ease; }
@media (max-width: 68rem) { .railtext { display: none; } }

/* =========================================================================
   Hero — the film
   ========================================================================= */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
  /* Behind the video while it loads, and behind any edge object-fit can't fill. */
  background: var(--navy);
  color: var(--on-dark);
}

.hero__media { position: absolute; inset: 0; z-index: 0; }

.hero__video {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Biased up: the subject and horizon sit above centre, and on a tall phone a
     centred crop would put the railing straight across the middle. */
  object-position: 50% 42%;
  display: block;
}

/* The scrim is sized from measurement, not taste. Peak luminance in the left
   45% of the footage is 114/255, which leaves cream text at 4.07:1 unaided —
   under AA. Weighted heavily left so the sunset survives on the right. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    /* Corner vignette. The source clip carries a static AI-generation sparkle
       at x 1140–1184, y 578–620 of 1280×720 — roughly 90% across, 83% down.
       Cropping it out cuts the cross; delogo leaves a worse smear. So it is
       sunk under a vignette instead, which is where a vignette belongs anyway:
       nothing lives in that corner, and it seats the frame. */
    radial-gradient(62% 48% at 92% 86%,
      color-mix(in srgb, var(--navy) 82%, transparent) 0%,
      color-mix(in srgb, var(--navy) 62%, transparent) 42%,
      color-mix(in srgb, var(--navy) 26%, transparent) 70%,
      transparent 88%),
    linear-gradient(100deg,
      color-mix(in srgb, var(--navy) 92%, transparent) 0%,
      color-mix(in srgb, var(--navy) 78%, transparent) 28%,
      color-mix(in srgb, var(--navy) 36%, transparent) 55%,
      color-mix(in srgb, var(--navy) 10%, transparent) 76%,
      transparent 100%),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--navy) 62%, transparent) 0%,
      transparent 20%,
      transparent 52%,
      color-mix(in srgb, var(--navy) 85%, transparent) 100%);
}

/* His lattice, faint, over the right of the frame as in the reference — masked
   away from the text so it never competes with reading. */
.hero__lattice {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(to right, transparent 38%, #000 88%);
  mask-image: linear-gradient(to right, transparent 38%, #000 88%);
}

.hero__inner {
  position: relative; z-index: 2;
  width: 100%;
  padding-block: clamp(7rem, 12vh, 10rem) clamp(5rem, 12vh, 8rem);
}

/* The monogram. Two characters, so it can run far larger than a whole word. */
.hero__mark { position: relative; display: inline-block; }
.hero__cm {
  display: block;
  font-family: var(--display-face);
  font-size: clamp(4.5rem, 1.5rem + 13vw, 13rem);
  line-height: 0.84;
  letter-spacing: -0.015em;
  font-weight: 500;
  font-optical-sizing: auto;
  color: #F6F3EC;
}

/* Gold over the footage rather than teal: it reads against a sunset, and it
   matches the ECG already burnt into the film. */
.hero .signature { color: var(--gold-lt); }

.hero__full {
  font-family: var(--display-face);
  font-size: clamp(1.05rem, 0.85rem + 0.7vw, 1.4rem);
  font-optical-sizing: auto;
  color: rgba(246, 243, 236, 0.88);
  margin-top: clamp(0.9rem, 2vw, 1.4rem);
  letter-spacing: -0.004em;
}

.hero__roles {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem 0.55rem;
  margin-top: clamp(0.9rem, 2vw, 1.35rem);
  font-size: var(--step--1);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  font-weight: 700;
}
/* Lifted variants. --teal and --gold are tuned for paper and for navy panels;
   both fall under AA against scrimmed footage. */
.hero__roles b:nth-of-type(1) { color: #FFFFFF; }
.hero__roles b:nth-of-type(2) { color: var(--teal-video); }
.hero__roles b:nth-of-type(3) { color: var(--gold-lt); }
.hero__roles i { font-style: normal; color: rgba(246, 243, 236, 0.45); }

.hero__place {
  display: flex; align-items: center; gap: 0.65rem;
  margin-top: clamp(1.6rem, 4vw, 2.6rem);
  font-size: var(--step--2);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(246, 243, 236, 0.86);
}
.hero__place svg { width: 15px; height: 15px; color: var(--gold-lt); flex: none; }

.hero__cue {
  position: absolute;
  left: 50%; bottom: clamp(1.25rem, 3vh, 2.25rem);
  transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
  color: rgba(246, 243, 236, 0.75);
  transition: color 200ms ease;
}
.hero__cue .label { color: inherit; letter-spacing: 0.24em; }
.hero__cue svg { width: 13px; height: 20px; animation: cue 2.6s cubic-bezier(0.4,0,0.2,1) infinite; }
@media (hover: hover) { .hero__cue:hover { color: #fff; } }
@keyframes cue {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(5px); opacity: 1; }
}

/* The drawn "M." — an SVG path, not a script webfont, so it can ink itself in
   and never depends on what the platform happens to ship. */
.signature {
  position: absolute;
  right: 0; bottom: 0;
  transform: translate(46%, 26%);
  width: clamp(110px, 15vw, 230px);
  pointer-events: none;
  z-index: 2;
}
.signature path { fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 62rem) { .signature { width: clamp(92px, 20vw, 150px); transform: translate(38%, 24%); } }

/* =========================================================================
   Statement — the bridge out of the film
   ========================================================================= */

.statement { padding-block: clamp(3.5rem, 7vw, 6rem); }

.pullquote { position: relative; padding-left: 1.5rem; border-left: 2px solid var(--rule); }
.pullquote__mark {
  font-family: var(--display-face);
  font-size: 4.2rem; line-height: 0.72;
  font-weight: 700;
  color: var(--accent);
  display: block; margin-bottom: 0.1rem;
}
.pullquote p {
  font-family: var(--display-face);
  font-optical-sizing: auto;
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2.35rem);
  line-height: 1.22;
  letter-spacing: -0.014em;
  font-weight: 500;
  color: var(--ink);
}
.pullquote em { font-style: normal; color: var(--accent); }
.pullquote__under { display: block; width: 6.5rem; height: 3px; background: var(--gold); margin-top: 1.1rem; }

/* =========================================================================
   The pulse — one live heartbeat, running the length of the page
   ========================================================================= */

.pulse-rule {
  position: relative;
  height: clamp(46px, 6vw, 68px);
  overflow: hidden;
  background: var(--ground);
  border-block: 1px solid var(--rule-2);
}
/* A whisper of ECG graph paper. Real traces are printed on a grid; this is the
   quietest possible nod to that. */
.pulse-rule::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--rule-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule-2) 1px, transparent 1px);
  background-size: 16px 16px, 16px 16px;
  opacity: 0.6;
}
.pulse-rule .ecg { position: relative; width: 100%; height: 100%; }

.ecg { width: 100%; height: 100%; }
/* preserveAspectRatio="none" stretches the geometry, which would stretch the
   stroke into an ellipse with it. This keeps the line an even weight. */
.ecg path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.ecg .glow { stroke: var(--gold); stroke-width: 6; opacity: 0.3; filter: blur(3px); }
.ecg .head { fill: var(--gold); stroke: none; }

/* =========================================================================
   Creed cards — the three at a glance
   ========================================================================= */

.creedband {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2.25rem);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: clamp(1rem, 3vw, 2rem);
  border-block: 1px solid var(--rule);
}
@media (max-width: 48rem) { .creedband { grid-template-columns: 1fr; gap: 1.1rem; } }

.creedcard { display: flex; gap: 0.9rem; align-items: flex-start; text-align: left; }
.creedcard__icon {
  flex: none;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: grid; place-items: center;
  transition: transform 300ms cubic-bezier(0.22,1,0.36,1), background-color 200ms ease;
}
.creedcard__icon svg { width: 17px; height: 17px; }
.creedcard__line {
  display: block;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--ink);
}
.creedcard__gloss {
  display: inline-block;
  font-size: var(--step--1);
  color: var(--ink-2);
  margin-top: 0.35rem;
  padding-bottom: 0.45rem;
  border-bottom: 2px solid var(--accent);
}
@media (hover: hover) {
  .creedcard:hover .creedcard__icon { transform: translateY(-3px); background: var(--teal-dk); }
}

/* =========================================================================
   Section headers
   ========================================================================= */

.shead { display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.shead__no { display: flex; align-items: center; gap: 0.8rem; }
.shead__no .tick { width: 2.25rem; }
.shead h2 { max-width: 18ch; }
.shead .prose { margin-top: 0.4rem; }

/* =========================================================================
   Creed section
   ========================================================================= */

.creedrow {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--rule);
}
.creedrow:last-child { border-bottom: 1px solid var(--rule); }
@media (max-width: 40rem) { .creedrow { grid-template-columns: 1fr; gap: 0.9rem; } }

.creedrow__icon {
  width: 3.1rem; height: 3.1rem;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: grid; place-items: center;
}
.creedrow__icon svg { width: 20px; height: 20px; }
.creedrow__line {
  font-family: var(--display-face);
  font-size: var(--step-2);
  font-weight: 600;
  font-optical-sizing: auto;
  letter-spacing: -0.012em;
  line-height: 1.12;
  margin-bottom: 0.45rem;
}
.creedrow__gloss {
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

/* =========================================================================
   Route
   ========================================================================= */

.route__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 58rem) { .route__grid { grid-template-columns: 1fr; gap: 1.25rem; } }

.route__mapwrap { position: sticky; top: 6.5rem; }
@media (max-width: 58rem) {
  .route__mapwrap {
    top: 4.4rem; z-index: 5;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    padding-block: 0.6rem;
    background: color-mix(in srgb, var(--ground) 94%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--rule);
  }
  .route__map { max-height: 30svh; margin-inline: auto; }
}

.route__chart { background: var(--navy); padding: clamp(0.75rem, 1.5vw, 1.25rem); position: relative; }
.route__map { width: 100%; height: auto; overflow: visible; }
.route__graticule path { stroke: color-mix(in srgb, var(--teal-lt) 30%, transparent); stroke-width: 0.3; fill: none; }
.route__path { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.route__path--ghost { stroke: color-mix(in srgb, #EAF0F7 22%, transparent); stroke-width: 0.9; stroke-dasharray: 2 3; }

.route__node circle.dot {
  fill: var(--navy); stroke: var(--gold); stroke-width: 1.5;
  transition: r 320ms cubic-bezier(0.22,1,0.36,1), fill 320ms ease;
}
.route__node circle.halo { fill: none; stroke: var(--gold); stroke-width: 0.9; opacity: 0; transition: opacity 320ms ease, r 420ms cubic-bezier(0.22,1,0.36,1); }
.route__node text {
  font-family: var(--sans); font-size: 4.6px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  fill: var(--on-dark-2); transition: fill 300ms ease;
}
.route__node.is-active circle.dot { fill: var(--gold); r: 3.2; }
.route__node.is-active circle.halo { opacity: 0.8; r: 7.5; }
.route__node.is-active text { fill: var(--on-dark); }

.route__entries { display: flex; flex-direction: column; }
.stop {
  padding-block: clamp(1.4rem, 3vw, 2.2rem);
  border-top: 1px solid var(--rule);
  opacity: 0.48;
  transition: opacity 420ms ease;
}
.stop:last-child { border-bottom: 1px solid var(--rule); }
.stop.is-active { opacity: 1; }
.stop.is-active .stop__place { color: var(--accent); }

.stop__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.45rem; }
.stop__place {
  font-size: var(--step--2); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; transition: color 300ms ease;
}
.stop__role {
  font-family: var(--display-face); font-size: var(--step-2);
  font-weight: 600; font-optical-sizing: auto;
  letter-spacing: -0.012em; line-height: 1.14; margin-bottom: 0.3rem;
}
.stop__org { font-size: var(--step--1); color: var(--ink-2); font-weight: 600; margin-bottom: 0.65rem; }
.stop__body { font-size: var(--step-0); color: var(--ink-2); line-height: 1.64; max-width: 38rem; }

.stop__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.85rem; }
.tag {
  font-size: var(--step--2); letter-spacing: 0.07em; font-weight: 600;
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--rule);
  color: var(--ink-2);
  white-space: nowrap;
}
.tag--strong { border-color: var(--accent); color: var(--accent); }

/* =========================================================================
   Credentials rail
   ========================================================================= */

.rail { position: relative; }
.rail__viewport {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-inline: var(--gutter);
}
.rail__viewport::-webkit-scrollbar { display: none; }
.js-rail .rail__viewport { overflow: hidden; scroll-snap-type: none; cursor: grab; touch-action: pan-y; }
.js-rail .rail__viewport.is-dragging { cursor: grabbing; }
.rail__track { display: flex; gap: clamp(0.7rem, 1.5vw, 1rem); width: max-content; padding-block: 0.5rem; }
.js-rail .rail__track { will-change: transform; }

.card {
  position: relative;
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: clamp(14.5rem, 72vw, 18rem);
  min-height: 13.5rem;
  padding: 1.4rem 1.35rem 1.25rem;
  background: var(--navy);
  color: var(--on-dark);
  display: flex; flex-direction: column;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.5rem), calc(100% - 1.5rem) 100%, 0 100%);
  transition: transform 300ms cubic-bezier(0.22,1,0.36,1);
}
.card__year { font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-lt); font-weight: 700; margin-bottom: auto; }
.card__figure {
  font-family: var(--display-face);
  font-size: var(--step-3);
  font-weight: 600;
  font-optical-sizing: auto;
  letter-spacing: -0.018em;
  /* Fraunces defaults to old-style figures, which are lovely in running text and
     wrong in a column of grades — they'd sit at different heights. */
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.02;
  color: var(--gold);
  margin-block: 1.1rem 0.5rem;
}
.card__title { font-size: var(--step-0); font-weight: 650; line-height: 1.3; margin-bottom: 0.3rem; }
.card__meta { font-size: var(--step--1); color: var(--on-dark-2); line-height: 1.45; }
@media (hover: hover) {
  .js-rail .rail__viewport:not(.is-dragging) .card:hover { transform: translateY(-4px); }
}
.rail__hint { display: flex; align-items: center; gap: 0.55rem; margin-top: 1.35rem; color: var(--ink-3); }

/* =========================================================================
   Faith
   ========================================================================= */

.faith__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 56rem) { .faith__inner { grid-template-columns: 1fr; gap: 2rem; } }

.prayer { font-size: clamp(1.15rem, 0.9rem + 1vw, 1.7rem); line-height: 1.4; font-weight: 500; }
.prayer em { font-style: normal; color: var(--gold); font-weight: 700; }
.prayer__attr { display: block; margin-top: 1.25rem; }

.photoframe { position: relative; }
.photoframe img {
  width: 100%;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), calc(100% - 2.5rem) 100%, 0 100%);
}
.photoframe figcaption { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.photoframe blockquote { font-size: var(--step-0); font-weight: 600; line-height: 1.45; }

/* The cross-heart is the control that opens the Spanish prayer. */
.reveal-btn {
  display: inline-flex; align-items: center; gap: 0.85rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: 0.7rem 1.15rem 0.7rem 0.7rem;
  border: 1px solid var(--on-dark-rule);
  color: var(--on-dark);
  transition: border-color 220ms ease, transform 160ms cubic-bezier(0.22,1,0.36,1);
}
.reveal-btn .crossheart { width: 30px; flex: none; }
.reveal-btn span { font-size: var(--step--2); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }
@media (hover: hover) { .reveal-btn:hover { border-color: var(--gold); } }
.reveal-btn:active { transform: scale(0.97); }

.letter { display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 1.1rem;
  transition: grid-template-rows 520ms cubic-bezier(0.22,1,0.36,1), opacity 380ms ease; }
.letter > div { overflow: hidden; min-height: 0; }
.faith__block.is-open .letter { grid-template-rows: 1fr; opacity: 1; }
.letter__inner { border-left: 3px solid var(--gold); padding-left: 1.1rem; margin-top: 0.6rem; }
.letter p { font-size: var(--step-0); line-height: 1.6; color: var(--on-dark-2); }

/* =========================================================================
   Vitals
   ========================================================================= */

.vitals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap: 1px; background: var(--on-dark-rule); }
.vital { background: var(--navy); padding: clamp(1.1rem, 2.2vw, 1.75rem); display: flex; flex-direction: column; gap: 0.45rem; }
.vital__figure {
  font-family: var(--display-face); font-size: var(--step-3);
  font-weight: 600; font-optical-sizing: auto; letter-spacing: -0.018em;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.02; color: var(--gold);
}
.vital__figure small { font-family: var(--sans); font-size: 0.34em; font-weight: 600; letter-spacing: 0.08em; margin-left: 0.2em; color: var(--on-dark-2); }
.vital__label { font-size: var(--step--1); color: var(--on-dark-2); line-height: 1.42; }
.vital__tick { width: 100%; height: 14px; color: var(--teal-lt); opacity: 0.7; margin-top: auto; }
.vital__tick path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* =========================================================================
   Colophon
   ========================================================================= */

.colophon { position: relative; }
.colophon__who { display: flex; align-items: center; gap: 1.1rem; }
.colophon__portrait {
  width: 74px; height: 74px; object-fit: cover; flex: none;
  border: 2px solid var(--gold);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.9rem), calc(100% - 0.9rem) 100%, 0 100%);
}
.colophon__name {
  font-family: var(--display-face); font-size: var(--step-2);
  font-weight: 600; font-optical-sizing: auto;
  letter-spacing: -0.012em; line-height: 1.1;
}
.colophon__where { font-size: var(--step--1); color: var(--on-dark-2); margin-top: 0.3rem; }

.social { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-block: 2rem; }
.social__link {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.8rem 1.25rem;
  border: 1px solid var(--on-dark-rule);
  font-size: var(--step--1); font-weight: 600;
  transition: border-color 240ms ease, transform 240ms cubic-bezier(0.22,1,0.36,1);
}
.social__link svg { width: 16px; height: 16px; flex: none; }
.social__link .arrow { transition: transform 300ms cubic-bezier(0.22,1,0.36,1); opacity: 0.55; }
@media (hover: hover) {
  .social__link:hover { border-color: var(--gold); transform: translateY(-2px); }
  .social__link:hover .arrow { transform: translateX(3px); opacity: 1; }
}
.social__link:active { transform: scale(0.97); }

/* Moved down from the hero, which the video now carries on its own. */
.why {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--on-dark-rule);
  display: flex; flex-direction: column; gap: 0.6rem;
}
.why__roles {
  font-size: var(--step--2);
  letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; color: var(--on-dark);
}
.why__roles i { font-style: normal; color: var(--teal-lt); padding-inline: 0.4rem; }
.why__built { font-size: var(--step--2); letter-spacing: 0.13em; text-transform: uppercase; color: var(--on-dark-2); }
.why__built b { color: var(--gold); font-weight: 700; }

.colophon__creed { display: flex; align-items: center; gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); flex-wrap: wrap; }
.colophon__creed .scriptline { width: clamp(160px, 18vw, 230px); color: var(--gold); }
.colophon__creed .scriptline path { fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.colophon__fine { margin-top: 1.1rem; padding-bottom: 3rem; font-size: var(--step--2); color: var(--on-dark-2); line-height: 1.65; max-width: 44rem; }

/* =========================================================================
   Reveal on scroll
   ========================================================================= */

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 640ms cubic-bezier(0.22,1,0.36,1), transform 640ms cubic-bezier(0.22,1,0.36,1);
}
.js .reveal.is-in { opacity: 1; transform: none; }
.reveal--d1 { transition-delay: 70ms; }
.reveal--d2 { transition-delay: 140ms; }
.reveal--d3 { transition-delay: 210ms; }