/* Magic Hour: shared styles for the Rough Cut and Ryan Podolsky sites.
   Graded for grit rather than pastel: a dusty high-desert sky that burns down to amber, near-black
   land, coarse moving grain and a lens vignette. Every sky color stays light enough for the ink text
   (at least 4.5:1). Photographs share the warm #mh filter inlined at the top of each page.
   Motion runs regardless of the OS reduce-motion setting, by the site owner's choice.
   Scroll-linked motion uses CSS scroll-driven animations; magic-hour.js supplies
   progress variables (--p-root, --p-hero, --p-day) where those aren't supported. */

/* Registered so the sky colors interpolate smoothly */
@property --s1 { syntax: '<color>'; inherits: true; initial-value: #6389AC; }
@property --s2 { syntax: '<color>'; inherits: true; initial-value: #9DAAB0; }
@property --s3 { syntax: '<color>'; inherits: true; initial-value: #CDBB9C; }
@property --glow { syntax: '<color>'; inherits: true; initial-value: rgba(255, 228, 190, .55); }
@property --haze { syntax: '<color>'; inherits: true; initial-value: rgba(196, 170, 130, .55); }
@property --land { syntax: '<color>'; inherits: true; initial-value: #4A5157; }

:root {
  --blue: #6389AC;   /* dusty high-desert sky */
  --peach: #DD8A40;  /* burnt amber at the horizon */
  --ink: #0E1B2C;
  --ink-2: #2A3A4F;
  --cloud: #EFEAE0;  /* bone, not white */
  --mist: #EEF1F2;
  --red: #D7261E;
  --red-d: #B91F18;
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(16px, 4.2vw, 64px);
  --max: 1320px;
  --ease: cubic-bezier(.22, .7, .18, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background: #9DAAB0;
  font: 400 17px/1.62 var(--sans);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
ol, ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
blockquote { margin: 0; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--ink); color: var(--cloud); border-radius: 999px; text-decoration: none; }
.skip:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
[id] { scroll-margin-top: 88px; }
@media (max-width: 900px) { [id] { scroll-margin-top: 74px; } }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- Type ---------- */
.eyebrow {
  margin: 0 0 18px;
  font: 600 12px/1.4 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}
.eyebrow .sep { display: inline-block; width: 22px; height: 1px; margin: 0 10px; vertical-align: middle; background: currentColor; opacity: .55; }
.display {
  font-family: var(--serif);
  font-size: clamp(48px, 7.6vw, 124px);
  line-height: .94;
  letter-spacing: -.012em;
}
.h2 {
  font-family: var(--serif);
  font-size: clamp(40px, 5.2vw, 76px);
  line-height: 1;
  letter-spacing: -.01em;
}
.lede {
  font-family: var(--serif);
  font-size: clamp(28px, 3.3vw, 48px);
  line-height: 1.12;
  letter-spacing: -.005em;
}
.serif { font-family: var(--serif); }
em, .it { font-style: italic; }
.muted { color: var(--ink-2); }

/* ---------- Actions: the only place red appears ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 12px 22px 12px 24px;
  border-radius: 999px;
  background: var(--red); color: #fff;
  font: 600 15px/1.2 var(--sans); letter-spacing: .01em;
  text-decoration: none;
  box-shadow: 0 10px 30px -12px rgba(150, 25, 18, .55);
  transition: background .3s, transform .3s var(--ease), box-shadow .3s;
}
.btn:hover { background: var(--red-d); transform: translateY(-1px); box-shadow: 0 14px 34px -12px rgba(150, 25, 18, .6); }
.btn .arr { transition: transform .3s var(--ease); }
.btn:hover .arr { transform: translate(2px, -2px); }
.link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--red);
  font: 600 15px/1.3 var(--sans);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}
.link .arr { transition: transform .3s var(--ease); }
.link:hover .arr { transform: translate(2px, -2px); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 28px;
  height: 72px; padding-inline: var(--gutter);
  transition: background .4s, box-shadow .4s, backdrop-filter .4s;
}
.nav.scrolled, .nav.open {
  background: rgba(239, 234, 224, .74);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  backdrop-filter: saturate(1.4) blur(18px);
  box-shadow: 0 1px 0 rgba(14, 27, 44, .08);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand .mark { width: 26px; height: 26px; }
.brand-word { font: 600 13px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.brand-serif { font: 400 28px/1 var(--serif); letter-spacing: .01em; }
.nav-links { display: flex; gap: 26px; }
.nav-links a { font: 500 14px/1 var(--sans); text-decoration: none; color: var(--ink); opacity: .9; padding: 8px 0; position: relative; }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav .btn { min-height: 40px; padding: 9px 18px; font-size: 14px; box-shadow: none; }
.nav-toggle { display: none; }
.nav-links .nav-m { display: none; }

@media (max-width: 900px) {
  .nav { height: 62px; gap: 12px; }
  .nav-links {
    position: absolute; top: 62px; left: 0; right: 0;
    flex-direction: column; gap: 0;
    padding: 8px var(--gutter) 24px;
    background: rgba(239, 234, 224, .97);
    box-shadow: 0 20px 40px -20px rgba(14, 27, 44, .25);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .3s, transform .3s var(--ease), visibility 0s .3s;
  }
  .nav.open .nav-links { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .3s var(--ease); }
  .nav-links a { font: 400 30px/1.1 var(--serif); padding: 12px 0; border-bottom: 1px solid rgba(14, 27, 44, .1); }
  .nav-links a::after { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
    border: 1px solid rgba(14, 27, 44, .3); border-radius: 999px; background: transparent;
    font: 500 14px/1 var(--sans); color: var(--ink); cursor: pointer;
  }
  .nav .btn { display: none; }
  .nav-links .nav-m { display: block; }
}

/* ---------- The sky (fixed, behind everything) ---------- */
.sky {
  position: fixed; left: 0; top: 0; z-index: -2;
  width: 100%; height: 100vh; height: 100lvh;
  overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, var(--s1) 0%, var(--s2) 56%, var(--s3) 100%);
}
.sky-glow {
  position: absolute; width: 130vmax; height: 130vmax; left: -65vmax; top: -65vmax;
  background: radial-gradient(closest-side, var(--glow), transparent);
}
.sky-haze {
  position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
  background: linear-gradient(180deg, transparent, var(--haze));
  opacity: .55;
}
/* Pre-blurred cirrus wisps: radial gradients, no filters, so they're cheap to move */
.wisp {
  position: absolute; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 240, 220, .4), rgba(255, 236, 214, .12) 55%, transparent);
  animation: drift 80s linear infinite alternate;
}
.wisp.w1 { width: 70vw; height: 3.4vh; left: 38%; top: 16%; transform: rotate(-4deg); }
.wisp.w2 { width: 50vw; height: 2.2vh; left: -6%; top: 31%; animation-duration: 110s; opacity: .8; }
.wisp.w3 { width: 58vw; height: 2.6vh; left: 56%; top: 46%; animation-duration: 95s; animation-direction: alternate-reverse; opacity: .7; }
.wisp.w4 { width: 30vw; height: 3vh; left: 18%; top: 9%; animation-duration: 130s; opacity: .55; }
@keyframes drift { from { translate: -6vw 0; } to { translate: 6vw 0; } }
/* Coarse film grain over everything, jumping like a projector gate */
.grain {
  /* Normal blending (not overlay) at low opacity: the same grain strength, far cheaper to composite */
  position: fixed; inset: -100px; z-index: 60; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='2.2 0 0 0 -.6 2.2 0 0 0 -.6 2.2 0 0 0 -.6 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  animation: grain .5s steps(1) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  12.5% { transform: translate(-37px, 22px); }
  25% { transform: translate(51px, -14px); }
  37.5% { transform: translate(-12px, 63px); }
  50% { transform: translate(28px, 41px); }
  62.5% { transform: translate(-58px, -33px); }
  75% { transform: translate(9px, -71px); }
  87.5% { transform: translate(66px, 18px); }
}
/* The sky falls off at the corners like a long lens shot into the light */
.sky::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(150% 120% at 50% 35%, transparent 55%, rgba(52, 30, 18, .18) 100%); }

/* ---------- Timelines ----------
   Elements carry .tl-root / .tl-hero / .tl-day plus their own animation-name.
   Fallback: a paused 1s animation scrubbed with a negative delay from JS progress. */
.tl-root, .tl-hero, .tl-day {
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-play-state: paused;
}
.tl-root { animation-delay: calc(var(--p-root, 0) * -1s); }
.tl-hero { animation-delay: calc(var(--p-hero, 0) * -1s); }
.tl-day { animation-delay: calc(var(--p-day, 0) * -1s); }
@supports (animation-timeline: scroll()) {
  .tl-root, .tl-hero, .tl-day { animation-play-state: running; animation-delay: 0s; animation-duration: auto; }
  .tl-root { animation-timeline: scroll(root); }
  .tl-hero { animation-timeline: --hero; animation-range: contain 0% contain 100%; }
  .tl-day { animation-timeline: --day; animation-range: contain 0% contain 100%; }
}

/* Dissolve reveals */
@keyframes dissolve {
  from { opacity: 0; filter: blur(10px); transform: translateY(22px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
@supports (animation-timeline: view()) {
  .reveal { animation: dissolve linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
}
.no-sda .reveal { opacity: 0; filter: blur(10px); transform: translateY(22px); transition: opacity 1.2s var(--ease), filter 1.2s var(--ease), transform 1.2s var(--ease); }
.no-sda .title-card-inner { opacity: 0; filter: blur(10px); transition: opacity 1.4s var(--ease), filter 1.4s var(--ease); }
.no-sda .title-card-inner.in { opacity: 1; filter: blur(0); }
.no-sda .reveal.in { opacity: 1; filter: blur(0); transform: none; }

/* Vapor trails: layered strokes (halo, body, core) read as soft contrails without blur filters */
.trail { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trail path, .trail rect { stroke-dasharray: 1 1; stroke-dashoffset: 1.02; }
.trail .halo { stroke: rgba(255, 244, 228, .08); }
.trail .body { stroke: rgba(255, 244, 228, .2); }
.trail .core { stroke: rgba(255, 255, 255, .95); }
@keyframes draw { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }

/* Cloud-bank edges: white panels fade into the sky like flying through cloud tops */
.panel { position: relative; background: var(--cloud); }
.panel::before, .panel::after {
  content: ''; position: absolute; left: 0; right: 0; height: clamp(36px, 6vh, 64px); pointer-events: none;
}
.panel::before { bottom: 100%; background: linear-gradient(180deg, rgba(239, 234, 224, 0), rgba(239, 234, 224, .55) 60%, var(--cloud)); }
.panel::after { top: 100%; background: linear-gradient(0deg, rgba(239, 234, 224, 0), rgba(239, 234, 224, .55) 60%, var(--cloud)); }
.panel.no-bottom::after { display: none; }

.section { padding-block: clamp(88px, 12vw, 168px); }

/* Shared footer bits */
.footer { position: relative; background: var(--ink); color: var(--cloud); }
.footer a { color: var(--cloud); }
.footer .eyebrow { color: #B7C2CF; }

/* =====================================================================
   ROUGH CUT
   ===================================================================== */
.rc-page .sky { animation-name: rc-sky; }
@keyframes rc-sky {
  0%   { --s1: #6389AC; --s2: #9DAAB0; --s3: #CDBB9C; --glow: rgba(255, 228, 190, .55); --haze: rgba(196, 170, 130, .55); }
  16%  { --s1: #6488A9; --s2: #ADA797; --s3: #D6A877; --glow: rgba(255, 210, 150, .6); --haze: rgba(200, 160, 110, .55); }
  45%  { --s1: #6C85A2; --s2: #BC9B7C; --s3: #D99A5E; --glow: rgba(255, 190, 110, .62); --haze: rgba(190, 140, 90, .55); }
  75%  { --s1: #77849E; --s2: #C38E66; --s3: #DB8C47; --glow: rgba(255, 172, 84, .64); --haze: rgba(180, 122, 72, .55); }
  100% { --s1: #7E869D; --s2: #C58660; --s3: #DD8A40; --glow: rgba(255, 160, 70, .66); --haze: rgba(170, 110, 65, .55); }
}

/* Hero: a sticky stage; scrolling pulls the beams back until they settle into the mark.
   magic-hour.js redraws the geometry every frame in a viewport-sized SVG, so nothing is scaled as a
   bitmap and nothing blurs. It sets the stroke widths in screen pixels (--wc, --wb, --wh, --wf, in mark
   units) so the trails stay fine while the mark is huge, and lands them exactly on the logo's own
   weights: 2.6 for the lines, 3.7 for the frame, square ends and mitered corners. The glow
   (--ob, --oh) fades out as the trails condense; --fd draws the frame. */
.rc-hero { position: relative; height: 250vh; view-timeline: --hero block; }
.rc-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.rc-beams {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none;
  fill: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10;
}
.rc-beams path, .rc-beams rect { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
@keyframes beam-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.rc-beams path { animation: beam-draw 2.8s cubic-bezier(.6, 0, .2, 1) both; animation-delay: calc(.35s + var(--i) * .17s); }
.rc-beams .halo path { animation-duration: 4.2s; animation-delay: calc(.9s + var(--i) * .17s); }
.rc-beams .body path { animation-duration: 3.4s; animation-delay: calc(.6s + var(--i) * .17s); }
.rc-beams .halo { stroke: #FFF4E4; stroke-width: var(--wh, .9); stroke-opacity: var(--oh, .08); }
.rc-beams .body { stroke: #FFF4E4; stroke-width: var(--wb, .26); stroke-opacity: var(--ob, .2); }
.rc-beams .core { stroke: #FFF; stroke-width: var(--wc, .06); stroke-opacity: var(--oc, .95); }
/* The frame draws as one dash that starts and ends at the top-left corner. A dash's ends never join, so
   square caps fill that corner while it draws; once drawn it becomes a plain closed rect (--fdash: none),
   identical to the logo's. Hidden until it starts, so no cap shows early. */
.rc-beams .frame { stroke: #FFF; stroke-width: var(--wf, .1); stroke-linecap: square; stroke-dasharray: var(--fdash, 1 2); stroke-dashoffset: calc(1 - var(--fd, 0)); stroke-opacity: var(--fo, 0); }

.rc-land { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(90px, 17vh, 170px); }
.rc-land .far { animation-name: land-far; }
.rc-land .mid { animation-name: land-mid; }
.rc-land .near { animation-name: land-near; }
@keyframes land-far { from { fill: #5E6870; } to { fill: #6A4A3B; } }
@keyframes land-mid { from { fill: #3B4249; } to { fill: #43302A; } }
@keyframes land-near { from { fill: #212529; } to { fill: #1C1513; } }
.rc-sunline { position: absolute; left: 0; right: 0; bottom: 0; height: 60vh; pointer-events: none;
  background: radial-gradient(55% 45% at 66% 72%, rgba(255, 200, 128, .8), rgba(240, 160, 90, .28) 55%, transparent 80%); animation-name: sunline; }
@keyframes sunline { from { opacity: .35; } to { opacity: 1; } }

.rc-hero-copy {
  position: absolute; left: 0; right: 0; bottom: clamp(120px, 23vh, 230px);
}
.rc-hero-eyebrow span:not(.sep) { white-space: nowrap; }
.rc-hero-copy h1 { max-width: 12.5ch; font-size: clamp(46px, 6.9vw, 112px); }
.rc-hero-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 30px; font: 500 14px/1.4 var(--sans); color: var(--ink); }
.rc-hero-meta span { display: inline-flex; align-items: center; gap: 10px; }
.rc-hero-meta span + span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); opacity: .6; }
.scroll-cue {
  position: absolute; right: var(--gutter); bottom: clamp(24px, 5vh, 44px); z-index: 2;
  display: flex; align-items: center; gap: 12px;
  font: 600 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--cloud);
  animation-name: cue-out;
}
.scroll-cue i { display: block; width: 44px; height: 1px; background: currentColor; transform-origin: left; animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes cue-out { 0% { opacity: 1; } 12%, 100% { opacity: 0; } }

@media (max-width: 899px) {
  .rc-hero { height: 165vh; }
  .scroll-cue { display: none; }
  .rc-hero-copy { bottom: clamp(110px, 17vh, 170px); }
  .rc-hero-copy h1 { font-size: clamp(44px, 13vw, 76px); }
  .rc-hero-meta { margin-top: 20px; font-size: 13px; }
}
@media (max-width: 640px) {
  .rc-hero-eyebrow span:not(.sep) { display: block; }
  .rc-hero-eyebrow span + .sep + span { margin-top: 4px; }
  .rc-hero-eyebrow .sep { display: none; }
}

/* Company */
.rc-company { padding-top: clamp(72px, 9vw, 130px); padding-bottom: clamp(64px, 8vw, 120px); }
.rc-company .lede { max-width: 25ch; font-size: clamp(30px, 3.9vw, 58px); margin-bottom: clamp(36px, 5vw, 64px); }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 72px); max-width: 980px; margin-left: auto; color: var(--ink-2); font-size: 18px; }
.cols p:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .cols { grid-template-columns: 1fr; font-size: 17px; }
}

/* On set: large color photography of crews and aircraft, graded warm by #mh */
.rc-onset { padding-top: clamp(72px, 9vw, 130px); }
.onset-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(16px, 2vw, 28px); align-items: end; }
.shot-img { position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 1 / 1; background: #3a2a22; box-shadow: 0 40px 80px -46px rgba(40, 20, 10, .6); }
.shot-lg .shot-img { aspect-ratio: 4 / 3; }
.shot-img img { width: 100%; height: 100%; object-fit: cover; filter: url(#mh); transition: transform 1.6s var(--ease); }
.shot:hover img { transform: scale(1.03); }
.shot figcaption { margin-top: 12px; font: 600 11px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
@media (max-width: 860px) {
  .onset-grid { grid-template-columns: 1fr; }
  .shot .shot-img { aspect-ratio: 3 / 2; }
}

/* Principles: title cards over the sky (near full-screen on desktop, a tight stack on phones) */
.rc-principles-head { display: grid; align-content: center; text-align: center; padding-block: clamp(150px, 15vw, 210px) clamp(8px, 2vw, 24px); }
.rc-principles-head .h2 { font-size: clamp(44px, 6vw, 96px); }
.rc-principles-head .eyebrow { margin-bottom: 22px; }
.title-card { min-height: 78vh; min-height: 78svh; display: grid; place-items: center; text-align: center; padding-block: 64px; }
.title-card-inner { max-width: 1100px; }
@supports (animation-timeline: view()) {
  .title-card-inner { animation: title-card linear both; animation-timeline: view(); animation-range: cover 5% cover 95%; }
}
@keyframes title-card {
  0% { opacity: 0; filter: blur(14px); transform: scale(.97); }
  25%, 75% { opacity: 1; filter: blur(0); transform: none; }
  100% { opacity: 0; filter: blur(14px); transform: scale(1.02); }
}
.title-card .num { display: inline-flex; align-items: center; gap: 14px; margin-bottom: clamp(20px, 3vw, 34px); font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.title-card .num::before, .title-card .num::after { content: ''; width: 36px; height: 1px; background: currentColor; opacity: .6; }
.title-card h3 { font-family: var(--serif); font-size: clamp(58px, 11.5vw, 188px); line-height: .9; letter-spacing: -.02em; }
.title-card p { max-width: 34ch; margin: clamp(24px, 3vw, 40px) auto 0; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; color: var(--ink); }
@media (max-width: 760px) {
  .rc-principles-head { padding-block: 120px 4px; }
  .title-card { min-height: 0; padding-block: 40px; }
  .title-card + .title-card { border-top: 1px solid rgba(14, 27, 44, .14); }
  .title-card .num { margin-bottom: 16px; }
  .title-card h3 { font-size: clamp(48px, 13vw, 64px); line-height: .94; }
  .title-card p { margin-top: 16px; font-size: 17px; }
}
/* On phones several cards share the screen, so each dissolves in once and stays sharp */
@supports (animation-timeline: view()) {
  @media (max-width: 760px) {
    .title-card-inner { animation-name: dissolve; animation-range: entry 0% cover 30%; }
  }
}

/* Themes: written across the sky */
.rc-themes { padding-block: clamp(60px, 8vw, 120px) clamp(100px, 12vw, 180px); }
.rc-themes-head { max-width: 760px; margin-bottom: clamp(30px, 5vw, 70px); }
.rc-themes-head .lede { font-size: clamp(28px, 3.1vw, 44px); }
.themes { display: grid; gap: clamp(0px, 1vw, 12px); }
.theme { position: relative; view-timeline: --theme block; }
.theme svg { width: 100%; height: auto; overflow: visible; }
.theme:nth-child(even) svg { transform: scaleX(-1); }
.theme .halo { stroke-width: 22; }
.theme .body { stroke-width: 8; }
.theme .core { stroke-width: 2.2; }
.theme-word {
  position: absolute; bottom: 30%;
  font: italic 400 clamp(54px, 9.6vw, 156px)/1 var(--serif); letter-spacing: -.015em;
}
.theme:nth-child(odd) .theme-word { right: 4%; }
.theme:nth-child(even) .theme-word { left: 4%; }
.theme-word { white-space: nowrap; }
@supports (animation-timeline: view()) {
  .theme path { animation: draw linear both; animation-timeline: --theme; animation-range: entry 10% cover 55%; }
}
.no-sda .theme path { transition: stroke-dashoffset 2s var(--ease); }
.no-sda .theme.in path { stroke-dashoffset: 0; }
/* magic-hour.js adds .themes-io only when it can reveal the words, so they never stay hidden */
.themes-io .theme-word { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease) .15s, transform 1s var(--ease) .15s; }
.themes-io .theme.in .theme-word { opacity: 1; transform: none; }
@media (max-width: 760px) {
  /* Trail and word share one grid cell, so each row is as tall as its word and rows never overlap */
  .themes { gap: 2px; }
  .theme { display: grid; align-items: center; min-height: 84px; }
  .theme > * { grid-area: 1 / 1; }
  .theme .halo { stroke-width: 34; }
  .theme .body { stroke-width: 13; }
  .theme .core { stroke-width: 4; }
  .theme-word { position: relative; bottom: auto; font-size: clamp(44px, 12.4vw, 64px); }
  .theme:nth-child(odd) .theme-word { right: auto; justify-self: end; margin-right: var(--gutter); }
  .theme:nth-child(even) .theme-word { left: auto; justify-self: start; margin-left: var(--gutter); }
}

/* In Development: one wide sunlit tile, deliberately unnamed */
.rc-slate { padding-block: clamp(40px, 6vw, 80px) clamp(110px, 12vw, 180px); }
.slate-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 40px; margin-bottom: clamp(30px, 4vw, 56px); }
.slate-head p:last-child { max-width: 44ch; margin: 0; font-size: 18px; color: var(--ink); }
.tile { position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 2.39 / 1; background: #2a2433; box-shadow: 0 40px 80px -46px rgba(60, 30, 20, .55); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; filter: url(#mh); transition: transform 1.6s var(--ease); }
.tile:hover img { transform: scale(1.035); }
.tile::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(18, 12, 10, .72), rgba(18, 12, 10, 0) 52%); }
.tile figcaption { z-index: 2; position: absolute; left: clamp(16px, 2.4vw, 32px); right: clamp(16px, 2.4vw, 32px); bottom: clamp(14px, 2.2vw, 28px); color: #fff; }
.tile .t-title { display: block; font: 400 clamp(30px, 3.6vw, 54px)/1 var(--serif); }
.tile .t-meta { display: block; margin-bottom: 10px; font: 600 11px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #F3E3D3; }
@media (max-width: 760px) {
  .tile { aspect-ratio: 4 / 3; }
}

/* Leadership + press */
.rc-people { padding-block: clamp(80px, 10vw, 150px); }
.leader { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 110px); align-items: center; }
.portrait { position: relative; }
.portrait::before {
  content: ''; position: absolute; inset: 7% -6% -6% 7%; border-radius: 4px;
  background: linear-gradient(160deg, #6389AC, #C38E66 55%, #DD8A40);
}
.portrait img { position: relative; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 30px 60px -30px rgba(14, 27, 44, .45); }
.leader-copy .h2 { margin-bottom: 10px; }
.role { margin-bottom: 28px; font: 500 16px/1.4 var(--sans); color: var(--ink-2); }
.leader-copy p:not(.eyebrow):not(.role) { max-width: 54ch; color: var(--ink-2); font-size: 18px; }
.leader-copy .link { margin-top: 12px; }

.press-wrap { margin-top: clamp(72px, 12vw, 180px); padding-top: clamp(48px, 6vw, 80px); border-top: 1px solid rgba(14, 27, 44, .14); }
.press-wrap .h2 { margin-bottom: clamp(30px, 4vw, 52px); }
.press-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: center; text-decoration: none; }
.press-card .img { overflow: hidden; border-radius: 4px; }
.press-card img { width: 100%; height: auto; transition: transform 1.4s var(--ease); }
.press-card:hover img { transform: scale(1.03); }
.press-meta { display: flex; gap: 16px; margin-bottom: 18px; font: 600 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.press-card h3 { font: 400 clamp(28px, 3vw, 44px)/1.08 var(--serif); margin-bottom: 18px; }
.press-card .dek { color: var(--ink-2); font-size: 18px; }
@media (max-width: 860px) {
  .leader, .press-card { grid-template-columns: 1fr; }
  .portrait { max-width: 420px; margin-right: 6%; }
}

/* Contact */
.rc-contact { padding-block: clamp(110px, 16vw, 230px) clamp(88px, 12vw, 170px); }
.rc-contact .display { font-size: clamp(64px, 12vw, 200px); margin-bottom: clamp(28px, 4vw, 48px); }
.rc-contact .btn { font-size: clamp(15px, 1.4vw, 18px); }
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 4vw, 64px); margin-top: clamp(56px, 7vw, 100px); padding-top: 28px; border-top: 1px solid rgba(14, 27, 44, .25); }
.contact-grid .eyebrow { margin-bottom: 10px; }
.contact-grid p:not(.eyebrow) { margin: 0; font-size: 17px; }
.contact-grid a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (max-width: 760px) {
  .contact-grid { grid-template-columns: 1fr; }
  .rc-contact .btn { font-size: 14px; padding-inline: 18px; }
}

/* Footer */
.rc-footer { padding: clamp(64px, 8vw, 110px) 0 clamp(90px, 8vw, 110px); overflow: hidden; }
.rc-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--blue), var(--peach) 60%, #C2582A); }
.footer-word { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); font: 400 clamp(56px, 11vw, 180px)/.9 var(--serif); letter-spacing: -.02em; }
.footer-word svg { flex: none; width: .78em; height: .78em; color: var(--peach); }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 32px; margin-top: clamp(40px, 6vw, 80px); padding-top: 24px; border-top: 1px solid rgba(239, 234, 224, .16); font: 500 14px/1.4 var(--sans); color: #C9D2DC; }
.footer-row a { text-decoration: none; border-bottom: 1px solid rgba(239, 234, 224, .4); padding-bottom: 2px; }
.credits { max-width: 72em; margin: 28px 0 0; font: 400 13px/1.6 var(--sans); color: #C9D2DC; }
.credits a { text-decoration: none; border-bottom: 1px solid rgba(239, 234, 224, .35); }

/* =====================================================================
   RYAN PODOLSKY
   ===================================================================== */
.rp-page { timeline-scope: --day; }
.rp-page .sky { animation-name: rp-sky; }
/* One day: first light, morning, high noon, magic hour. Each chapter holds its light. */
@keyframes rp-sky {
  0%, 6%   { --s1: #7584A2; --s2: #9A9595; --s3: #C97F4E; --glow: rgba(255, 190, 150, .6); --haze: rgba(190, 150, 130, .5); --land: #3A3E4A; }
  27%, 39% { --s1: #6389AC; --s2: #A4B0B2; --s3: #D3C6AA; --glow: rgba(255, 236, 200, .62); --haze: rgba(205, 190, 160, .5); --land: #464D53; }
  60%, 72% { --s1: #5D8DB8; --s2: #A9BAC2; --s3: #DCD6C6; --glow: rgba(255, 250, 235, .85); --haze: rgba(220, 210, 190, .55); --land: #50565A; }
  93%, 100% { --s1: #7E869D; --s2: #C58660; --s3: #DD8A40; --glow: rgba(255, 160, 70, .75); --haze: rgba(170, 110, 65, .55); --land: #241A16; }
}
.rp-page .sky-glow { width: 90vmax; height: 90vmax; left: -45vmax; top: -45vmax; animation-name: rp-sun; }
/* The sun climbs, peaks, then sets up the long, low light of magic hour */
@keyframes rp-sun {
  0%, 6%    { transform: translate(72vw, 88vh) scale(.8); }
  27%, 39%  { transform: translate(66vw, 24vh) scale(.9); }
  60%, 72%  { transform: translate(52vw, 2vh) scale(1.15); }
  93%, 100% { transform: translate(78vw, 80vh) scale(1.25); }
}
.rp-page .sun-disc {
  position: absolute; left: 0; top: 0; width: 7vmin; height: 7vmin; margin: -3.5vmin 0 0 -3.5vmin; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 226, 1) 0 38%, rgba(255, 190, 110, .55) 54%, transparent 70%);
  animation-name: rp-sun-disc;
}
@keyframes rp-sun-disc {
  0%, 6%    { transform: translate(72vw, 88vh); opacity: .9; }
  27%, 39%  { transform: translate(66vw, 24vh); opacity: .95; }
  60%, 72%  { transform: translate(52vw, 2vh); opacity: 1; }
  93%, 100% { transform: translate(78vw, 80vh) scale(1.4); opacity: 1; }
}
.rp-page .sky-land { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(54px, 9vh, 96px); fill: var(--land); }
.rp-page .sky-land .far { fill: var(--land); opacity: .7; }

/* Hero */
.rp-hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: end; padding-block: 120px clamp(110px, 16vh, 170px); }
.rp-hero .contrails { position: absolute; inset: 0; width: 100%; height: 100%; }
.rp-hero .contrails path { animation: draw 4.5s cubic-bezier(.5, 0, .2, 1) both; animation-delay: calc(.6s + var(--i) * .5s); }
.rp-hero .contrails .halo { stroke: rgba(255, 238, 226, .12); stroke-width: 9; }
.rp-hero .contrails .body { stroke: rgba(255, 240, 230, .28); stroke-width: 3.4; }
.rp-hero .contrails .core { stroke: rgba(255, 250, 244, .95); stroke-width: 1.1; }
.rp-hero-inner { position: relative; }
.rp-name { font-size: clamp(64px, 14.5vw, 236px); line-height: .86; letter-spacing: -.025em; margin-left: -.04em; }
.rp-hero-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 48px; margin-top: clamp(24px, 3vw, 40px); }
.rp-sub { max-width: 34ch; margin: 0; font: 400 clamp(19px, 1.7vw, 24px)/1.4 var(--sans); }
.rp-hero .eyebrow a { display: inline-block; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.rp-cue { display: flex; align-items: center; gap: 12px; font: 600 11px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.rp-cue i { display: block; width: 44px; height: 1px; background: currentColor; transform-origin: left; animation: cue 2.4s var(--ease) infinite; }
@media (max-width: 760px) { .rp-hero-foot { grid-template-columns: 1fr; } .rp-name { font-size: clamp(60px, 18vw, 120px); } }

/* About */
.rp-about { padding-block: clamp(70px, 9vw, 140px); }
.about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 110px); align-items: start; }
.about-copy .lede { margin-bottom: 34px; }
.about-copy .lede a { text-decoration-thickness: 1px; text-underline-offset: 6px; }
.about-copy .body p { color: var(--ink-2); font-size: 18px; max-width: 58ch; }
.edu { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(14, 27, 44, .14); }
.edu .eyebrow { grid-column: 1 / -1; margin: 0; }
.edu p { margin: 0; }
.edu .serif { display: block; font-size: 28px; line-height: 1.1; }
.edu .muted { font-size: 15px; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } .about-grid .portrait { max-width: 420px; margin-right: 6%; } }
@media (max-width: 560px) {
  .rp-about { padding-block: 56px 64px; }
  .about-grid { gap: 40px; }
  .about-grid .portrait { max-width: 280px; }
  .about-copy .lede { margin-bottom: 26px; }
  .about-copy .body p, .service-copy p:not(.eyebrow) { font-size: 17px; }
  .edu { margin-top: 28px; }
}
@media (max-width: 480px) { .edu { grid-template-columns: 1fr; } }

/* The day */
.rp-day-head { padding-block: clamp(110px, 14vw, 210px) clamp(10px, 2vw, 30px); }
.rp-day-head .display { max-width: 12ch; }
.rp-day-head p:last-child { max-width: 40ch; margin-top: 26px; font-size: clamp(18px, 1.6vw, 22px); }
.rp-day { position: relative; view-timeline: --day block; }
.chapter { position: relative; min-height: 88vh; display: grid; align-items: center; padding-block: 80px; }
.chapter-inner { position: relative; z-index: 1; margin-left: clamp(0px, 22vw, 330px); max-width: 760px; }
.chapter-time { display: flex; align-items: baseline; gap: 18px; margin: 0 0 clamp(18px, 2.4vw, 32px); font: italic 400 clamp(64px, 9.6vw, 156px)/.9 var(--serif); letter-spacing: -.02em; }
.chapter-time .n { font: 600 12px/1 var(--sans); font-style: normal; letter-spacing: .18em; transform: translateY(-1.6em); }
.chapter .eyebrow { margin-bottom: 10px; }
.chapter-org { font: 400 clamp(32px, 3.8vw, 56px)/1.04 var(--serif); margin-bottom: 18px; }
.chapter-text { max-width: 40ch; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; }
.chapter.now .chapter-inner { max-width: 620px; }
.chapter-note { max-width: 36ch; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(14, 27, 44, .28); font: 400 clamp(22px, 2.2vw, 30px)/1.25 var(--serif); }
.chapter .btn { margin-top: 18px; }
.chapter-beams { max-width: none; position: absolute; right: var(--gutter); top: 56%; width: min(54vh, 30vw); height: min(54vh, 30vw); transform: translateY(-50%); z-index: 0; pointer-events: none; }
.chapter-beams .halo { stroke-width: 4; }
.chapter-beams .body { stroke-width: 1.5; }
.chapter-beams .core { stroke-width: .55; }
.chapter-beams .frame { stroke: rgba(255, 255, 255, .9); stroke-width: 1.1; }
.chapter.now { view-timeline: --now block; }
@supports (animation-timeline: view()) {
  .chapter-beams path, .chapter-beams rect { animation: draw linear both; animation-timeline: --now; animation-range: entry 30% contain 30%; }
  .chapter-beams rect { animation-range: contain 0% contain 40%; }
}
.no-sda .chapter-beams path, .no-sda .chapter-beams rect { transition: stroke-dashoffset 2.6s var(--ease); }
.no-sda .chapter.now.in .chapter-beams path, .no-sda .chapter.now.in .chapter-beams rect { stroke-dashoffset: 0; }

.rail { position: absolute; top: 0; bottom: 0; left: var(--gutter); width: 200px; }
.rail-inner { position: sticky; top: calc(50vh - 120px); display: grid; gap: 22px; padding-left: 22px; }
.rail-inner::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: rgba(14, 27, 44, .22); }
.rail-progress { position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; margin-left: -.5px; background: var(--ink); transform-origin: top; animation-name: rail; }
@keyframes rail { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.rail a { display: block; text-decoration: none; font: 500 13px/1.3 var(--sans); letter-spacing: .04em; color: var(--ink); transition: color .4s; }
.rail a b { display: block; font: 600 11px/1 var(--sans); letter-spacing: .18em; margin-bottom: 5px; opacity: .8; }
.rail a span { display: block; font: 400 22px/1 var(--serif); transition: transform .5s var(--ease); transform-origin: left; }
.rail a.on { color: var(--ink); }
.rail a.on span { transform: scale(1.18); }
@media (max-width: 1000px) {
  .rail { display: none; }
  .chapter-inner { margin-left: 0; }
  .chapter-beams { right: -18vw; top: 34%; width: 78vw; height: 78vw; opacity: .75; }
}
@media (max-width: 760px) {
  .chapter { min-height: 50vh; min-height: 50svh; padding-block: 44px; }
  .chapter-time { font-size: clamp(56px, 15vw, 72px); }
  .chapter-org { font-size: 32px; margin-bottom: 12px; }
  .chapter-note { margin-top: 22px; padding-top: 18px; }
}

/* Service */
.rp-service { padding-block: clamp(80px, 10vw, 150px); }
.service-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 100px); align-items: center; }
.service-photo img { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 40px 80px -40px rgba(14, 27, 44, .45); }
.service-photo figcaption { margin-top: 14px; font: 500 13px/1.4 var(--sans); color: var(--ink-2); }
.service-copy .h2 { margin-bottom: 28px; }
.service-copy p:not(.eyebrow) { color: var(--ink-2); font-size: 18px; }
@media (max-width: 860px) { .service-grid { grid-template-columns: 1fr; } }

.rp-quote { padding-block: clamp(104px, 16vw, 240px); text-align: center; }
.rp-quote blockquote p { max-width: 15ch; margin: 0 auto; font: 400 clamp(52px, 8.4vw, 136px)/.98 var(--serif); letter-spacing: -.02em; }
.rp-quote blockquote p .q { font-style: italic; }
.rp-quote cite { display: block; margin-top: clamp(28px, 3vw, 44px); font: 500 14px/1.5 var(--sans); font-style: normal; letter-spacing: .02em; }
.rp-quote cite a { text-decoration-thickness: 1px; text-underline-offset: 4px; }

.rp-lessons { padding-block: clamp(80px, 10vw, 140px); }
.lessons-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 40px; margin-bottom: clamp(36px, 5vw, 64px); }
.lessons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(20px, 2vw, 32px); }
.lessons li { padding-top: 22px; border-top: 1px solid rgba(14, 27, 44, .2); }
.lessons .idx { display: block; margin-bottom: 26px; font: italic 400 56px/1 var(--serif); color: #A85F36; }
.lessons h3 { font: 400 26px/1.08 var(--serif); margin-bottom: 14px; }
.lessons p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 1100px) { .lessons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .lessons { grid-template-columns: 1fr; gap: 24px; }
  .lessons li { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; padding-top: 18px; }
  .lessons .idx { grid-row: 1 / span 2; margin: -4px 0 0; font-size: 40px; }
  .lessons h3 { font-size: 24px; margin-bottom: 8px; }
}

.rp-press { padding-block: clamp(80px, 10vw, 140px) clamp(80px, 10vw, 140px); }
.press-row { display: grid; grid-template-columns: 150px 200px minmax(0, 1fr) auto; align-items: baseline; gap: 12px 32px; padding-block: 28px; border-block: 1px solid rgba(14, 27, 44, .2); text-decoration: none; }
.press-row .d, .press-row .pub { font: 600 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.press-row .t { font: 400 clamp(26px, 2.6vw, 38px)/1.1 var(--serif); }
.press-row .arr { color: var(--red); font-size: 22px; transition: transform .3s var(--ease); }
.press-row:hover .arr { transform: translate(3px, -3px); }
.press-row + .press-row { border-top: 0; }
@media (max-width: 860px) { .press-row { grid-template-columns: auto 1fr; } .press-row .t { grid-column: 1 / -1; } .press-row .arr { grid-column: 1 / -1; } }

.rp-rc { padding-block: clamp(100px, 16vw, 230px); }
.rp-rc-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 110px); align-items: center; }
.rp-rc .mark-trail { width: 100%; max-width: 440px; aspect-ratio: 1; view-timeline: --rcband block; }
.rp-rc .mark-trail .halo { stroke-width: 4; }
.rp-rc .mark-trail .body { stroke-width: 1.6; }
.rp-rc .mark-trail .core { stroke-width: .7; }
.rp-rc .mark-trail .frame { stroke: rgba(255, 255, 255, .95); stroke-width: 2.4; }
@supports (animation-timeline: view()) {
  .rp-rc .mark-trail path, .rp-rc .mark-trail rect { animation: draw linear both; animation-timeline: --rcband; animation-range: entry 40% cover 55%; }
}
.no-sda .rp-rc .mark-trail path, .no-sda .rp-rc .mark-trail rect { transition: stroke-dashoffset 2.4s var(--ease); }
.no-sda .rp-rc .mark-trail.in path, .no-sda .rp-rc .mark-trail.in rect { stroke-dashoffset: 0; }
.rp-rc h2 { font-size: clamp(42px, 5.6vw, 92px); line-height: .98; max-width: 14ch; margin-bottom: 36px; }
@media (max-width: 860px) { .rp-rc-grid { grid-template-columns: 1fr; } .rp-rc .mark-trail { max-width: 200px; } }
@media (max-width: 560px) {
  .rp-day-head { padding-top: 92px; }
  .rp-service, .rp-lessons { padding-block: 64px; }
  .service-grid { gap: 32px; }
  .rp-press { padding-block: 64px 24px; }
  .rp-rc { padding-block: 88px; }
  .rp-rc-grid { gap: 28px; }
  .rp-rc .mark-trail { max-width: 168px; }
  .rp-rc h2 { margin-bottom: 28px; }
}

.rp-footer { padding: clamp(70px, 8vw, 110px) 0 clamp(90px, 8vw, 110px); }
.rp-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--blue), var(--peach) 60%, #C2582A); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.footer-name { margin: 0; font: 400 clamp(52px, 7vw, 112px)/.92 var(--serif); letter-spacing: -.02em; }
.footer-links li + li { margin-top: 8px; }
.footer-links a { text-decoration: none; border-bottom: 1px solid rgba(239, 234, 224, .35); padding-bottom: 2px; font-size: 17px; overflow-wrap: anywhere; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .rp-footer { padding-top: 56px; } .footer-grid { gap: 28px; } }