/* ═══════════════════════════════════════════════════════════
   Ropes & Reflections — bright sunlit editorial.
   Page scope: .ropes-reflections / html.on-ropes-reflections
   ═══════════════════════════════════════════════════════════ */

.ropes-reflections {
  --rr-sky: #2f6fb0;
  --rr-water: #3f7d6e;
  --rr-sand: #f3ece1;
  --rr-paper: #faf6ef;
  --rr-ink: #1c1a17;
  --rr-ink-soft: #5a534a;
  --rr-rope: #c0341d;
  --rr-line: rgba(28,26,23,.14);
  --rr-shade: rgba(16,22,28,.45);
}

.ropes-reflections { background: var(--rr-paper); color: var(--rr-ink); overflow-x: hidden; }

/* Linked page: keep the site header/footer (noindex still applies via the inline script). */
html.on-ropes-reflections,
html.on-ropes-reflections body { background: var(--rr-paper); }
/* Hero is full-bleed: cancel the fixed-header offset so it sits flush under the transparent nav. */
html.on-ropes-reflections .ropes-reflections.site-main { padding-top: 0; }

/* ── Reveals (toggled by rr-page.js adding .is-visible) ── */
.rr-reveal { opacity: 0; transition: opacity 1.1s ease, transform 1.1s ease; will-change: opacity, transform; }
.rr-reveal.is-visible { opacity: 1; transform: none; }
.rr-reveal--drift { transform: translateY(28px); }
.rr-reveal--scale { transform: scale(1.04); }
.rr-reveal--slow { transition-duration: 1.8s; }
@media (prefers-reduced-motion: reduce) {
  .rr-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Hero ── */
.rr-hero { position: relative; min-height: 92vh; display: flex; align-items: flex-end; }
.rr-hero__media, .rr-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rr-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,14,18,.82) 0%, rgba(10,14,18,.5) 32%, rgba(10,14,18,.15) 60%, transparent 80%); }
.rr-hero__inner { position: relative; padding: 0 1.5rem clamp(3rem,9vh,7rem); color: #fff; max-width: 1200px; margin: 0 auto; width: 100%; }
.rr-hero__title { font-family: var(--font-serif, Georgia, serif); font-size: clamp(3rem,9vw,7rem); line-height: .98; margin: .2em 0; text-shadow: 0 2px 30px rgba(0,0,0,.6), 0 1px 6px rgba(0,0,0,.55); }
.rr-hero__amp { color: var(--rr-rope); }
.rr-hero__lede { font-size: clamp(1.1rem,2.4vw,1.5rem); max-width: 34rem; line-height: 1.5; text-shadow: 0 1px 14px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.55); }
.rr-hero__scroll { margin-top: 2rem; }
.rr-hero__scroll-label { font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; opacity: .8; text-shadow: 0 1px 8px rgba(0,0,0,.6); }

.rr-eyebrow { font-size: .78rem; letter-spacing: .32em; text-transform: uppercase; color: var(--rr-rope); }
.rr-eyebrow--hero { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.65); }

/* ── Editorial statement ── */
.rr-statement { padding: clamp(5rem,13vh,11rem) 0; }
.rr-statement__inner { max-width: 46rem; margin: 0 auto; padding: 0 1.5rem; }
.rr-statement__body { font-family: var(--font-serif, Georgia, serif); font-size: clamp(1.4rem,3vw,2.1rem); line-height: 1.45; color: var(--rr-ink); }

/* ── Chapters ── */
.rr-chapter { padding: clamp(5rem,12vh,11rem) 0; }
.rr-chapter__intro { max-width: 60rem; margin: 0 auto clamp(2rem,6vh,5rem); padding: 0 1.5rem; text-align: center; }
.rr-chapter__num { font-size: .8rem; letter-spacing: .35em; text-transform: uppercase; color: var(--rr-rope); }
.rr-chapter__name { font-family: var(--font-serif, Georgia, serif); font-size: clamp(2.4rem,6vw,4.5rem); line-height: 1.04; margin: .4em 0 .2em; }
.rr-chapter__cue { color: var(--rr-ink-soft); font-style: italic; }
.rr-chapter__text { max-width: 38rem; margin: clamp(2rem,5vh,4rem) auto 0; padding: 0 1.5rem; text-align: center; }
.rr-chapter__headline { font-family: var(--font-serif, Georgia, serif); font-size: clamp(1.6rem,3.5vw,2.6rem); line-height: 1.15; }
.rr-chapter__body { color: var(--rr-ink-soft); font-size: 1.05rem; line-height: 1.7; margin-top: 1rem; }

.rr-full { width: 100%; margin: clamp(1.5rem,5vh,4rem) 0; }
.rr-full img { width: 100%; height: clamp(60vh,80vh,90vh); object-fit: cover; display: block; }
.rr-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.5rem,2vw,1.5rem); margin: clamp(1.5rem,5vh,4rem) 0; padding: 0 clamp(.5rem,2vw,1.5rem); }
.rr-pair img { width: 100%; height: clamp(50vh,62vh,70vh); object-fit: cover; display: block; }
.rr-pair--offset img:nth-child(2) { margin-top: clamp(2rem,8vh,6rem); }

.rr-chapter--reflection { background: var(--rr-sand); }
.rr-chapter--release { padding-bottom: clamp(7rem,16vh,14rem); }

@media (max-width: 720px) {
  .rr-pair { grid-template-columns: 1fr; }
  .rr-pair--offset img:nth-child(2) { margin-top: 0; }
  .rr-full img, .rr-pair img { height: 70vh; }
}

/* ── B-roll marquee ── */
.rr-broll { padding: clamp(3rem,8vh,7rem) 0; overflow: hidden; }
.rr-broll__row { display: flex; gap: 1rem; width: max-content; }
.rr-broll__row--left { animation: rr-broll-left 42s linear infinite; }
.rr-broll__row--right { animation: rr-broll-right 48s linear infinite; margin-top: 1rem; }
.rr-broll:hover .rr-broll__row, .rr-broll:focus-within .rr-broll__row { animation-play-state: paused; }
.rr-broll__tile { flex: 0 0 auto; width: 340px; height: 260px; border: 0; padding: 0; cursor: pointer; background: #000; overflow: hidden; }
.rr-broll__tile video, .rr-broll__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes rr-broll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rr-broll-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (max-width: 768px) { .rr-broll__tile { width: 240px; height: 180px; } }
@media (prefers-reduced-motion: reduce) { .rr-broll__row { animation: none !important; } }

/* ── Lightbox ── */
.rr-lightbox { border: 0; padding: 0; background: transparent; width: fit-content; height: fit-content; max-width: 92vw; max-height: 92vh; margin: auto; inset: 0; overflow: visible; }
.rr-lightbox::backdrop { background: rgba(8,10,12,.82); }
.rr-lightbox video { width: min(92vw, 1100px); height: auto; max-height: 92vh; display: block; }
.rr-lightbox__close { position: absolute; top: -2.6rem; right: 0; background: none; border: 0; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }

/* ── Closing ── */
.rr-closing { position: relative; min-height: 80vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.rr-closing__bg, .rr-closing__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rr-closing__overlay { position: absolute; inset: 0; background: var(--rr-shade); }
.rr-closing__inner { position: relative; color: #fff; padding: 0 1.5rem; }
.rr-closing__line { font-family: var(--font-serif, Georgia, serif); font-size: clamp(1.6rem,4vw,3rem); line-height: 1.2; }
.rr-closing__line--accent { color: var(--rr-rope); }
.rr-closing__signature { margin-top: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; opacity: .9; }
.rr-closing__signature-mark { width: 64px; height: auto; }
.rr-closing__signature-label, .rr-closing__signature-by { font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; }

/* ═══ Movement & rest ═══ */

/* Slow Ken Burns drift on full-bleed images + hero (water/breath, not jarring) */
@keyframes rr-kb { from { transform: scale(1.05) translate3d(0,0,0); } to { transform: scale(1.12) translate3d(-1.6%,-1.2%,0); } }
@keyframes rr-kb-alt { from { transform: scale(1.12) translate3d(-1.6%,1%,0); } to { transform: scale(1.05) translate3d(1.6%,-1%,0); } }
.rr-full { overflow: hidden; }
.rr-full img { animation: rr-kb 26s ease-in-out infinite alternate; will-change: transform; }
.rr-full:nth-of-type(even) img { animation-name: rr-kb-alt; animation-duration: 31s; }
.rr-hero__media img { animation: rr-kb 40s ease-in-out infinite alternate; will-change: transform; }

/* Panning photo rail — the cramped, a-lot-happening energy */
.rr-strip { overflow: hidden; padding: clamp(2.5rem,6vh,5rem) 0; }
.rr-strip__track { display: flex; gap: .9rem; width: max-content; animation: rr-strip-pan 70s linear infinite; }
.rr-strip:hover .rr-strip__track, .rr-strip:focus-within .rr-strip__track { animation-play-state: paused; }
.rr-strip__cell { flex: 0 0 auto; width: clamp(220px,26vw,360px); height: clamp(300px,34vw,460px); overflow: hidden; }
.rr-strip__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes rr-strip-pan { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* A still point — the relaxing lulls */
.rr-rest { position: relative; }
.rr-rest__media { width: 100%; height: clamp(68vh,86vh,92vh); overflow: hidden; }
.rr-rest__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rr-rest__line { position: absolute; left: 0; right: 0; bottom: clamp(2rem,7vh,5rem); margin: 0; text-align: center; color: #fff; font-family: var(--font-serif, Georgia, serif); font-style: italic; font-size: clamp(1.4rem,3vw,2.3rem); text-shadow: 0 1px 18px rgba(0,0,0,.65); padding: 0 1.5rem; }

/* Words overlaid on full-bleed images (à la FetishBound word layer) */
.rr-full { position: relative; }
.rr-full__word {
  position: absolute; z-index: 2; margin: 0; pointer-events: none;
  font-family: var(--font-serif, Georgia, serif); font-weight: 400; text-transform: uppercase;
  letter-spacing: .06em; line-height: .85; color: rgba(255,255,255,.95);
  font-size: clamp(2.6rem, 12vw, 10rem);
  text-shadow: 0 2px 50px rgba(0,0,0,.45), 0 1px 8px rgba(0,0,0,.35);
  animation: rr-word-drift 16s ease-in-out infinite alternate; will-change: transform;
}
.rr-full__word--bl { left: clamp(1rem,4vw,4rem); bottom: clamp(1rem,5vh,3rem); }
.rr-full__word--tr { right: clamp(1rem,4vw,4rem); top: clamp(1rem,6vh,3.5rem); text-align: right; }
@keyframes rr-word-drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-16px,0); } }

/* Drifting keyword marquee (the emotional lexicon) */
.rr-wordmarquee { overflow: hidden; padding: clamp(2.2rem,6vh,4.5rem) 0; background: var(--rr-ink); }
.rr-wordmarquee__track {
  display: flex; align-items: center; gap: 2.2rem; width: max-content; white-space: nowrap;
  font-family: var(--font-serif, Georgia, serif); text-transform: uppercase; letter-spacing: .12em;
  font-size: clamp(1.5rem,4vw,3rem); color: var(--rr-paper);
  animation: rr-wordmarquee-pan 48s linear infinite;
}
.rr-wordmarquee__track span { opacity: .5; }
.rr-wordmarquee__track b { color: var(--rr-rope); font-weight: 400; opacity: 1; }
@keyframes rr-wordmarquee-pan { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Lightbox photos + zoomable editorial images */
.rr-lightbox img { width: auto; max-width: 92vw; max-height: 92vh; display: block; }
.rr-zoomable { cursor: zoom-in; }

/* Hero three-chevron scroll cue */
.rr-hero__chevrons { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; margin-top: .55rem; }
.rr-hero__chevron { width: 22px; height: 10px; color: #fff; opacity: .85; animation: rr-chev 1.5s ease-in-out infinite; }
.rr-hero__chevron:nth-child(2) { animation-delay: .18s; }
.rr-hero__chevron:nth-child(3) { animation-delay: .36s; }
@keyframes rr-chev { 0%,100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(4px); opacity: 1; } }

/* Quiet credits line */
.rr-credits { padding: 0 1.5rem clamp(3rem,8vh,6rem); text-align: center; background: var(--rr-paper); }
.rr-credits__inner { max-width: 46rem; margin: 0 auto; color: var(--rr-ink-soft); font-size: .92rem; line-height: 1.9; letter-spacing: .02em; }
.rr-credits__label { display: block; font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--rr-rope); margin-bottom: 1rem; }
.rr-credits__inner a { color: var(--rr-ink); text-decoration: none; border-bottom: 1px solid var(--rr-line); }

/* Voices — what people said about the day */
.rr-voices { background: var(--rr-sand); padding: clamp(5rem,13vh,11rem) 0; text-align: center; }
.rr-voices__inner { max-width: 44rem; margin: 0 auto; padding: 0 1.5rem; }
.rr-voices__label { display: block; font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--rr-rope); margin-bottom: clamp(2rem,5vh,3rem); }
.rr-voices__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(1.4rem,4vh,2.6rem); }
.rr-voices__list li { font-family: var(--font-serif, Georgia, serif); font-size: clamp(1.5rem,3.4vw,2.4rem); line-height: 1.3; color: var(--rr-ink); }
.rr-voices__close { margin: clamp(2.5rem,6vh,4rem) 0 0; color: var(--rr-ink-soft); font-size: 1.08rem; line-height: 1.75; }

/* Floating audio dock */
.rr-audio { position: fixed; left: clamp(1rem,3vw,2rem); bottom: clamp(1rem,3vw,2rem); z-index: 50; }
.rr-audio__btn { display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.15rem; border: 0; border-radius: 999px; cursor: pointer; background: var(--rr-ink); color: var(--rr-paper); font-family: inherit; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 8px 26px rgba(0,0,0,.3); transition: background .3s ease; }
.rr-audio__btn:hover { background: var(--rr-rope); }
.rr-audio__icon { position: relative; width: 12px; height: 12px; flex: 0 0 auto; }
.rr-audio__icon::before { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 11px; border-color: transparent transparent transparent currentColor; }
.rr-audio.is-playing .rr-audio__icon::before { border: 0; width: 3px; height: 12px; background: currentColor; box-shadow: 6px 0 0 currentColor; }
@media (max-width: 600px) { .rr-audio__label { display: none; } .rr-audio__btn { padding: .8rem; } }

@media (max-width: 600px) {
  .rr-full__word { font-size: clamp(2rem, 15vw, 4rem); letter-spacing: .04em; }
}

@media (prefers-reduced-motion: reduce) {
  .rr-full img, .rr-hero__media img { animation: none !important; transform: none !important; }
  .rr-strip__track, .rr-full__word, .rr-wordmarquee__track, .rr-hero__chevron { animation: none !important; transform: none !important; }
}