/* The supplied listening-page art direction: ivory, amber, serif display type.
   These styles are scoped to the homepage; account and player themes stay independent. */
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
html body.landing-page--home { --color-paper: #fbf7ef; --color-surface: #fbf7ef; --color-surface-raised: #eae2d5; --color-surface-hover: #e4d9c9; --color-ink: #29180e; --color-ink-soft: #69594b; --color-muted: #665f57; --color-rule: #dacdbb; --color-rule-strong: #a69886; --color-accent: #70411f; --color-accent-strong: #65380f; --color-accent-ink: #fff9ee; --color-focus: #88501c; --font-display: "Newsreader", Georgia, serif; --shell-width: 80rem; --page-gutter: clamp(24px, 6.5vw, 100px); --header-height: 64px; --creator-scene-height: clamp(530px, 43vw, 700px); --section-curve-height: calc(100vw / 28.8); color: #29180e; background: #fbf7ef; color-scheme: light; font-size: max(9px, .75rem); }
.landing-page--home * { box-sizing: border-box; }
.landing-page--home :is(h1, h2, h3, p, figure, blockquote) { margin: 0; }
.landing-page--home :is(h1, h2, h3) { font-family: var(--font-display); font-weight: 400; }
.landing-page--home main p { line-height: 1.65; }
.landing-page--home .landing-shell--home { background: #fbf7ef; overflow: clip; }
.landing-page--home .listening-container { width: min(calc(100% - 2 * var(--page-gutter)), 1320px); margin-inline: auto; position: relative; }
.landing-page--home .ragafied-brand-logo, .landing-page--home .ragafied-brand-compact { filter: none !important; }
.landing-page--home a:focus-visible, .landing-page--home summary:focus-visible { outline: 2px solid #925923; outline-offset: 5px; }
.landing-page--home .listening-hero { position: relative; display: block; isolation: isolate; min-height: 760px; height: min(70vw, 1120px); width: 100%; padding: 0; margin: 0; background: #f1e5d2; color: #29180e; overflow: visible; }
.landing-page--home .listening-hero::before, .landing-page--home .listening-hero::after { content: none; }
.landing-page--home .listening-artwork { position: absolute; inset: 0; overflow: clip; pointer-events: none; }
.landing-page--home .listening-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.landing-page--home .listening-hero .listening-scene { object-position: center; }
.landing-page--home .listening-hero__copy { position: absolute; left: var(--page-gutter); top: 23%; width: 36%; z-index: 2; }
.landing-page--home .listening-hero h1 { color: #29180e; font: 400 max(9px, calc((clamp(60px, 7vw, 108px)) * .75))/.98 var(--font-display); letter-spacing: -.065em; text-align: left; }
.landing-page--home .listening-hero .landing-hero__lede { font: 400 max(9px, calc((clamp(17px, 1.8vw, 27px)) * .75))/1.3 var(--font-body); color: #443b33; margin-top: 28px; max-width: 28ch; }
.landing-page--home .listening-actions { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 28px; }
.landing-page--home .listening-hero blockquote { margin-top: clamp(34px, 4.8vw, 76px); font: italic 400 max(9px, calc((clamp(18px, 1.7vw, 26px)) * .75))/1.18 var(--font-display); color: #4a3b2d; }
.landing-page--home .listening-hero cite { display: flex; align-items: center; gap: 12px; margin-top: 18px; font: normal 9px/1.4 var(--font-body); letter-spacing: .25em; text-transform: uppercase; }
.landing-page--home .listening-hero cite::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.landing-page--home .listening-player { position: absolute; z-index: 3; width: 27%; max-width: 410px; border: 0; border-radius: 22px; background: transparent; box-shadow: none; backdrop-filter: none; scroll-margin-top: 120px; }
.landing-page--home .listening-wave { position: absolute; z-index: 2; bottom: -1px; left: 0; width: 100%; height: var(--section-curve-height); fill: #fbf7ef; pointer-events: none; }
.landing-page--home .listening-wave--top { top: -1px; bottom: auto; transform: rotate(180deg); }
.landing-page--home .listening-method { position: relative; padding: 62px 0 74px; background: #fbf7ef; }
.landing-page--home .listening-method header { text-align: center; }
.landing-page--home .listening-method h2 { font-size: max(9px, calc((clamp(42px, 4.9vw, 74px)) * .75)); letter-spacing: -.055em; line-height: 1.1; }
.landing-page--home .listening-method header p { margin-top: 5px; font-size: max(9px, calc((clamp(18px, 2vw, 28px)) * .75)); color: #514b45; }
.landing-page--home .listening-steps-wrap { --steps-gap: 55px; position: relative; margin-top: 48px; }
.landing-page--home .listening-steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--steps-gap); list-style: none; padding: 0; margin: 0; text-align: center; }
.landing-page--home .listening-step-icon { display: grid; place-items: center; width: 100px; height: 100px; margin: 0 auto 17px; border-radius: 50%; background: radial-gradient(circle, #fffdf6 20%, #f5e8d4 100%); border: 7px solid #fbf7ef; }
.landing-page--home .listening-steps h3 { font-size: max(9px, calc((34px) * .75)); line-height: 1.2; letter-spacing: -.04em; }
.landing-page--home .listening-steps p { max-width: 30ch; margin-inline: auto; color: #645c53; line-height: 1.3; font-size: max(9px, calc((19px) * .75)); margin-top: 6px; }
.landing-page--home .listening-thread { position: absolute; width: calc((100% + var(--steps-gap)) * 2 / 3); height: 80px; left: calc((100% - 2 * var(--steps-gap)) / 6); top: 10px; fill: none; stroke: #d8944e; stroke-width: .8; }
.landing-page--home :is(.listening-playback, .listening-creators, .listening-closing) { position: relative; isolation: isolate; scroll-margin-top: 85px; }
.landing-page--home .listening-playback { min-height: 780px; height: auto; padding-block: 130px 145px; z-index: 3; }
/* Hard-crop the enlarged parallax artwork before applying the curved mask.
   Keep this on the backdrop only so the player glass can still sample the scene. */
.landing-page--home .listening-playback__backdrop { position: absolute; inset: 0; z-index: -1; isolation: isolate; overflow: clip; background: var(--player-paper, #e9d7b8); pointer-events: none; }
.landing-page--home .listening-playback[data-player-theme] { color: var(--player-ink); }
.landing-page--home .listening-playback[data-player-theme] h2 { color: var(--player-ink); }
.landing-page--home .listening-playback[data-player-theme] .listening-playback__backdrop > .listening-scene { display: none; }
.landing-page--home .listening-playback[data-player-theme] .listening-playback__backdrop::before,
.landing-page--home .listening-playback[data-player-theme] .listening-playback__backdrop::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.landing-page--home .listening-playback[data-player-theme] .listening-playback__backdrop::before { z-index: -2; background: var(--player-image) var(--player-position) / cover no-repeat; filter: var(--player-filter); }
.landing-page--home .listening-playback[data-player-theme] .listening-playback__backdrop::after { z-index: -1; background: var(--player-overlay); }
.landing-page--home .listening-playback[data-player-theme] :is(.listening-eyebrow, .listening-section-copy > p) { color: var(--player-muted); }
.landing-page--home .listening-playback[data-player-theme] .listening-button { color: var(--player-paper); background: var(--player-ink); border-color: var(--player-ink); }
.landing-page--home .listening-playback[data-player-theme] .listening-button:hover { opacity: .85; }
.landing-page--home .listening-playback[data-player-theme] a:focus-visible { outline-color: var(--player-ink); }
.landing-page--home .listening-section-copy { position: absolute; top: 24%; left: var(--page-gutter); z-index: 2; max-width: 39%; }
.landing-page--home .listening-eyebrow { font-size: max(9px, calc((11px) * .75)); letter-spacing: .25em; text-transform: uppercase; margin-bottom: 26px; color: #544436; }
.landing-page--home .listening-section-copy h2 { font-size: max(9px, calc((clamp(55px, 7vw, 106px)) * .75)); line-height: .89; letter-spacing: -.06em; }
.landing-page--home .listening-section-copy > p:not(.listening-eyebrow) { margin-top: 26px; color: #51483e; font-size: max(9px, calc((clamp(18px, 1.9vw, 27px)) * .75)); line-height: 1.3; }
.landing-page--home .listening-section-copy .listening-button { margin-top: 26px; }
.landing-page--home .listening-player--feature { position: relative; left: auto; top: auto; margin-left: 39%; width: 34%; max-width: 520px; }
.landing-page--home .listening-creators { height: auto; min-height: max(var(--creator-scene-height), 650px); }
.landing-page--home .listening-creators .listening-section-copy { position: relative; top: auto; padding-block: 85px 140px; }
.landing-page--home .listening-creators h2 { font-size: max(9px, calc((clamp(43px, 4.3vw, 64px)) * .75)); line-height: 1; }
.landing-page--home .listening-closing { height: clamp(740px, 72vw, 1150px); }
.landing-page--home .listening-closing__copy { position: absolute; z-index: 2; top: 18%; width: 100%; text-align: center; }
.landing-page--home .listening-closing h2 { font-size: max(9px, calc((clamp(42px, 4vw, 66px)) * .75)); letter-spacing: -.045em; line-height: 1; }
.landing-page--home .listening-closing .listening-button { margin-top: 25px; }
.landing-page--home .listening-closing__copy > p { margin: 18px auto 0; max-width: 38ch; font-size: clamp(14px, 1.5vw, 20px); line-height: 1.5; padding-inline: 12px; color: #29180e; }
/* A soft ivory haze keeps the copy legible over the bright sky. */
.landing-page--home .listening-closing__copy::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(96%, 860px); height: 190%; transform: translate(-50%, -50%); background: radial-gradient(ellipse at center, rgba(251, 247, 239, .82) 0%, rgba(251, 247, 239, .5) 38%, rgba(251, 247, 239, 0) 70%); pointer-events: none; }
.landing-page--home .listening-creators .listening-section-copy > p:not(.listening-eyebrow) { font-size: clamp(14px, 1.25vw, 18px); line-height: 1.55; }
.landing-page--home .listening-creators .listening-section-copy > .listening-beta-note { font-size: 12px; margin-top: 16px; }
.landing-page--home .listening-playback .listening-section-copy { max-width: 30%; }
.landing-page--home .listening-playback .listening-section-copy h2 { font-size: clamp(42px, 4.8vw, 70px); line-height: 1; }
/* Keep the photographic composition and two-column player through tablets. */
@media (min-width: 761px) and (max-width: 1199px) {
  .landing-page--home .listening-hero { min-height: 670px; height: 76vw; }
  .landing-page--home .listening-hero__copy { top: 22%; width: 42%; }
  .landing-page--home .listening-hero h1 { font-size: max(9px, calc((clamp(58px, 7.3vw, 88px)) * .75)); }
  .landing-page--home .listening-hero .listening-button { padding: 12px 16px; font-size: max(9px, calc((14px) * .75)); gap: 12px; }
  .landing-page--home .listening-actions { gap: 10px; }
  .landing-page--home .listening-playback { padding-block: 110px 130px; }
  .landing-page--home .listening-playback .listening-section-copy { max-width: 34%; }
  .landing-page--home .listening-section-copy h2 { font-size: max(9px, calc((clamp(48px, 6.7vw, 76px)) * .75)); }
  .landing-page--home .listening-player--feature { width: 49%; margin-left: 45%; }
  .landing-page--home .listening-steps-wrap { --steps-gap: 24px; }
  .landing-page--home .listening-steps p { font-size: max(9px, calc((17px) * .75)); }
}
@media (max-width: 760px) {
  html body.landing-page--home { --creator-scene-height: 760px; }
  .landing-page--home .listening-hero { display: block; height: max(860px, 100svh); min-height: 0; padding: 0; background: #f9f1e4; }
  .landing-page--home .listening-hero__copy { position: absolute; left: var(--page-gutter); top: 112px; width: calc(100% - 2 * var(--page-gutter)); margin: 0; }
  .landing-page--home .listening-hero h1 { font-size: max(9px, calc((clamp(55px, 12vw, 80px)) * .75)); }
  .landing-page--home .listening-hero .landing-hero__lede { font-size: max(9px, calc((18px) * .75)); max-width: 29ch; margin-top: 22px; }
  .landing-page--home .listening-hero blockquote { display: none; }
  .landing-page--home .listening-hero .listening-artwork { top: auto; bottom: 0; height: 68%; }
  .landing-page--home .listening-hero .listening-scene { object-position: 78% center; }
  .landing-page--home .listening-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, #f9f1e4 27%, rgb(249 241 228 / .96) 34%, rgb(249 241 228 / .45) 44%, transparent 57%); }
  .landing-page--home .listening-hero .listening-wave { z-index: 3; }
  .landing-page--home .listening-method { padding: 50px 0 45px; }
  .landing-page--home .listening-method h2 { font-size: max(9px, calc((clamp(36px, 6vw, 52px)) * .75)); }
  .landing-page--home .listening-steps-wrap { --steps-gap: 20px; margin-top: 30px; }
  .landing-page--home .listening-steps h3 { font-size: max(9px, calc((28px) * .75)); }
  .landing-page--home .listening-steps p { font-size: max(9px, calc((16px) * .75)); }
  .landing-page--home .listening-playback { height: auto; padding: 85px var(--page-gutter) 100px; }
  .landing-page--home .listening-playback .listening-section-copy { max-width: 100%; }
  .landing-page--home .listening-section-copy { position: relative; top: auto; left: auto; max-width: 65%; }
  .landing-page--home .listening-section-copy h2 { font-size: max(9px, calc((65px) * .75)); }
  .landing-page--home .listening-player--feature { position: relative; top: auto; left: auto; width: min(100%, 520px); margin: 40px 0 0; }
  .landing-page--home .listening-playback .listening-scene { object-position: 68% center; opacity: .6; }
  .landing-page--home .listening-creators { background: #fbf7ef; }
  .landing-page--home .listening-creators .listening-section-copy { top: auto; padding: 50px var(--page-gutter) 380px; max-width: 100%; }
  .landing-page--home .listening-creators h2 { font-size: max(9px, calc((54px) * .75)); }
  .landing-page--home .listening-creators .listening-artwork { top: auto; bottom: 0; height: 72%; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%); mask-image: linear-gradient(to bottom, transparent, #000 28%); }
  .landing-page--home .listening-creators .listening-scene { object-position: 80% center; }
  .landing-page--home .listening-closing { height: 810px; }
  .landing-page--home .listening-closing__copy { top: 14%; padding-inline: 20px; }
  .landing-page--home .listening-closing h2 { font-size: max(9px, calc((43px) * .75)); }
}
@media (max-width: 540px) {
  .landing-page--home .listening-steps { grid-template-columns: 1fr; gap: 32px; }
  .landing-page--home .listening-step-icon { width: 85px; height: 85px; margin-bottom: 10px; }
  .landing-page--home .listening-thread { display: none; }
  .landing-page--home .listening-actions { gap: 12px; }
  .landing-page--home .listening-button { padding: 12px 20px; font-size: max(9px, calc((15px) * .75)); gap: 16px; }
  .landing-page--home .listening-section-copy { max-width: 100%; }
  .landing-page--home .listening-creators h2 { font-size: max(9px, calc((46px) * .75)); }
  .landing-page--home .listening-closing h2 { font-size: max(9px, calc((36px) * .75)); }
}

/* Let the next photograph show through the flowing creator-section edge. */
/* The curve is a fixed-ratio strip, independent of the section's height.
   The upper mask overlaps it by one pixel to avoid a seam at fractional sizes. */
.landing-page--home :is(.listening-playback__backdrop, .listening-creators) {
  -webkit-mask-image: linear-gradient(#000, #000), url("/images/listening/section-edge-fluid.svg");
  mask-image: linear-gradient(#000, #000), url("/images/listening/section-edge-fluid.svg");
  -webkit-mask-size: 100% calc(100% - var(--section-curve-height) + 1px), 100% var(--section-curve-height);
  mask-size: 100% calc(100% - var(--section-curve-height) + 1px), 100% var(--section-curve-height);
  -webkit-mask-position: top, bottom;
  mask-position: top, bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.landing-page--home .listening-creators { z-index: 1; }
.landing-page--home .listening-creators .listening-wave { display: none; }
.landing-page--home .listening-closing { margin-top: calc(-1 * var(--section-curve-height)); }

/* One continuous photographic boundary, instead of an ivory wave ending at
   the next photograph's straight top edge. */
.landing-page--home .listening-playback > .listening-wave--bottom { display: none; }
.landing-page--home .listening-creators { margin-top: calc(-1 * var(--section-curve-height)); }
.landing-page--home .listening-closing .listening-scene { object-position: center; }
@media (max-width: 760px) {
  .landing-page--home .listening-playback { min-height: 0; height: auto; }
  .landing-page--home .listening-creators { margin-top: 0; }
}

.landing-page--home [data-embedded-player] { display: block; min-height: 560px; }
.landing-page--home [data-embedded-player][data-ready] { min-height: 0; }

/* Align this optical surface with the inner React panel, not its outer frame. */
/* The embedded player (apps/ragafied-practice) adds the glass behind itself. */
.landing-page--home .listening-player-glass { position: absolute; pointer-events: none; background: rgb(255 255 255 / .01); -webkit-backdrop-filter: blur(20px) saturate(118%) brightness(1.06); backdrop-filter: blur(20px) saturate(118%) brightness(1.06); }
.landing-page--home .listening-player--feature > [data-embedded-player] { position: relative; }

/* Move only the artwork inside a stationary crop; content and wave edges stay put.
   Overscan covers the full 12% travel without exposing an image edge. */
@media (prefers-reduced-motion: no-preference) {
  .landing-page--home [data-parallax] .listening-scene,
  .landing-page--home .listening-playback[data-parallax][data-player-theme] .listening-playback__backdrop::before {
    /* Rasterize at the displayed size; scaling a composited layer softens detail. */
    inset: -13% auto auto -13%; width: 126%; height: 126%;
    transform: translate3d(0, var(--parallax-y, 0px), 0);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .landing-page--home .listening-player-glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
}