/* =========================================================
   V52 · RESPONSIVE SYSTEM
   Desktop baseline lives in sovereign-flame.css.
   Responsive behavior is consolidated here.
   ========================================================= */

@media (min-width: 901px) {
.sf-hero {min-height: calc(var(--vh) * 94);
    padding: 84px 24px 56px;}

.sf-hero-content {max-width: 1120px;}

.sf-hero .sf-kicker {margin-bottom: 18px;}

.sf-hero-title {max-width: 900px;
    font-size: clamp(112px, 10.8vw, 152px) !important;
    line-height: .88;
    letter-spacing: -.04em;
    text-transform: none !important;
    font-variant-caps: normal !important;}

.sf-hero-title .italic {display: block;
    margin-top: -.02em;
    font-size: .96em;
    line-height: .90;
    text-transform: none !important;
    font-variant-caps: normal !important;}

.sf-hero-thesis {margin-top: 24px;
    max-width: 1080px;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.38;}

.sf-hero-flame-wrap {top: 46%;
    opacity: .31;}

.sf-hero-flame-wrap .sf-flame {width: 320px;
    height: 540px;}


/* The declaration previously stayed sticky for ~45vh after the value
     statements were already visible. Reduce that dead zone substantially. */

.sf-declaration {min-height: calc(var(--vh) * 112) !important;}

.sf-declaration-stage {padding-bottom: 42px !important;}

/* Union appears while the title and spheres are still the dominant scene. */
}

@media (max-width: 900px) {
.sf-history-ember {right: 2vw;
        bottom: 2%;
        opacity: .30;}


.sf-thread {display: none;}

.sf-story-grid,
.sf-history-grid {grid-template-columns: 1fr;}

.sf-history-side {padding-top: 0;}

.sf-history-year {top: 8%; right: -8vw;}


.sf-story-grid,
.sf-history-grid {gap: 34px;}


.sf-story-grid {grid-template-columns: 1fr;
    gap: 24px;}
}

@media (max-width: 760px) {
.sf-history .sf-inner {width: min(100% - 34px, 930px);}

.sf-light-reveal {margin-top: 48px;
    min-height: 130px;}
}

@media (max-width: 680px) {
.sf-inner {width: min(100% - 36px, 1180px);}

.sf-topbar {padding: 18px 18px;}

.sf-brand {font-size: 11px; letter-spacing: .16em;}

.sf-topbar-link {font-size: 10.5px;}

.sf-vignette {box-shadow: inset 0 0 34vw rgba(0,0,0,.44);}

.sf-grain {opacity: .028;}

.sf-hero {padding: 100px 18px 70px;}

.sf-hero-title {font-size: clamp(58px, 20vw, 95px);}

.sf-hero-thesis {max-width: 350px; font-size: 20px;}

.sf-hero-flame-wrap {top: 45%;}

.sf-hero-flame-wrap .sf-flame {width: 230px;}

.sf-story {padding: 120px 0 160px;}

.sf-story-heading {font-size: 48px;}

.sf-copy {font-size: 16px; line-height: 1.78;}

.sf-story-emphasis {padding-left: 20px; margin-top: 42px; font-size: 26px;}

.sf-declaration {min-height: calc(var(--vh) * 165);}

.sf-declaration-big {font-size: 48px;}

.sf-choices {grid-template-columns: 1fr; gap: 8px; margin-top: 58px;}

.sf-choice-line {font-size: 23px;}

.sf-history {padding: 130px 0 160px;}

.sf-history-title {font-size: 54px;}

.sf-history-year {font-size: 53vw; top: 12%;}

.sf-whispers {padding: 60px 0 30px; gap: 10px;}

.sf-whisper {font-size: 42px;}

.sf-whisper:nth-child(even) {padding-left: 6vw;}

.sf-seed {margin-top: 70px; font-size: 29px;}

.sf-handoff {min-height: calc(var(--vh) * 105);}

.sf-handoff-line {font-size: 52px;}

.sf-union {min-height: calc(var(--vh) * 220);}

.sf-finale {min-height: calc(var(--vh) * 112); padding-inline: 18px;}

.sf-finale-title {font-size: 58px;}

.sf-finale-sub {font-size: 23px;}


.sf-inner {width: min(100% - 32px, 1040px);}

.sf-hero {padding: 82px 18px 52px;}

.sf-story {padding: 88px 0 108px;}

.sf-declaration {min-height: calc(var(--vh) * 128);}

.sf-history {padding: 92px 0 112px;}

.sf-whispers {padding: 32px 0 20px;}

.sf-handoff {min-height: calc(var(--vh) * 82);
    padding: 64px 18px;}

.sf-union {min-height: calc(var(--vh) * 172);}

.sf-finale {min-height: calc(var(--vh) * 88);
    padding: 80px 18px 48px;}


.sf-brand {font-size: 11px;}

.sf-topbar-link,
.sf-kicker,
.sf-act {font-size: 10.5px;}

.sf-copy {font-size: 16px;}

.sf-history-note {font-size: 13.5px;}

.sf-final-links a {font-size: 11px;}


.sf-finale-big-spark {--s-length: min(var(--s-length, 48px), 54px);}


.sf-handoff-burn {max-width: 88vw;
    font-size: clamp(30px, 9.2vw, 48px);}


.sf-story-grid {width: min(100% - 30px, 100%);}

.sf-reading-centered {padding: 72px 0 100px;}

.sf-reading-centered .sf-story-heading {max-width: 92vw;}

.sf-reading-centered .sf-story-emphasis {max-width: 90vw;}


.sf-reading-centered > .sf-copy {width: min(88vw, 520px);
    max-width: 520px;}


.sf-reading-centered .sf-story-heading {margin-bottom: 42px;}


/* ---------- GLOBAL MOBILE RHYTHM ---------- */

.sf-inner {width: min(100% - 32px, 1120px);}

.sf-section {max-width: 100%;}

.sf-act {font-size: 9.5px;
    letter-spacing: .22em;}

/* GPU-heavy desktop textures become simpler on phones. */

.sf-grain {inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    opacity: .075;}

.sf-lamp-cursor {display: none !important;}

.sf-flame-heat {-webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: blur(2px) !important;
    opacity: .34;}

/* Keep atmospheric light, but cap enormous offscreen effects. */

.sf-flame-aura {width: min(150vw, 520px) !important;
    height: min(150vw, 520px) !important;}

/* ---------- HERO ---------- */

.sf-hero {min-height: calc(var(--vh) * 94);
    padding:
      max(72px, env(safe-area-inset-top))
      18px
      54px;}

.sf-hero-title {max-width: 94vw;}

/* ---------- ACT I ---------- */

.sf-story {padding: 92px 0 112px;}

.sf-reading-centered {width: 100%;
    padding: 30px 0 46px;}

.sf-reading-centered .sf-story-heading {max-width: 92vw;
    margin-bottom: 46px;}

.sf-reading-centered > .sf-copy {width: min(86vw, 520px);
    max-width: 520px;
    line-height: 1.72;}

.sf-reading-centered > .sf-copy + .sf-copy {margin-top: 30px;}

.sf-reading-centered .sf-story-emphasis {max-width: 88vw;
    margin-top: 48px;}

/* ---------- DECLARATION ---------- */

.sf-declaration {min-height: calc(var(--vh) * 138);}

.sf-declaration-big {max-width: 92vw;
    font-size: clamp(39px, 12vw, 52px);
    line-height: .96;}

/* ---------- ACT II / HISTORY ---------- */

.sf-history {padding: 108px 0 122px;
    overflow: hidden;}

.sf-history-title {max-width: 92vw;
    font-size: clamp(43px, 13vw, 56px);}

.sf-history-year {right: -3vw !important;
    top: 11% !important;
    font-size: 45vw !important;
    opacity: .022;}

.sf-whispers {padding: 48px 0 20px;}

.sf-whisper {max-width: 94vw;
    font-size: clamp(33px, 10vw, 43px);
    line-height: 1.08;}

.sf-seed {max-width: 92vw;
    font-size: clamp(27px, 8vw, 34px);}

.sf-handoff {min-height: calc(var(--vh) * 88);}

.sf-handoff-line,
.sf-handoff-burn {width: min(90vw, 580px);
    max-width: 90vw;
    font-size: clamp(34px, 10vw, 46px);
    line-height: 1.04;}

/* =====================================================
     ACT IV · MOBILE UNION
     ===================================================== */

.sf-union {min-height: calc(var(--vh) * 178);
    overflow: clip;}


/* ---------- FINALE ---------- */

.sf-finale {min-height: calc(var(--vh) * 100);
    padding:
      74px
      18px
      max(64px, env(safe-area-inset-bottom));
    overflow: hidden;}

.sf-finale .sf-flame {width: min(38vw, 145px) !important;}

.sf-finale-title {max-width: 92vw;
    font-size: clamp(39px, 11.5vw, 50px) !important;
    line-height: .96;
    text-wrap: balance;}

.sf-finale-sub {width: min(86vw, 350px);
    font-size: 20px !important;
    line-height: 1.28;}

.sf-final-links {margin-top: 32px;}

/* ---------- EFFECT CONTAINMENT ---------- */

.sf-finale-big-spark,
.sf-finale-big-ember {will-change: auto;}


.sf-history-metaphor {width: min(88vw, 520px);
    max-width: 100%;
    margin-top: 38px;
    padding-top: 30px;}

.sf-history-metaphor h3 {font-size: clamp(33px, 10vw, 43px);}

.sf-history-metaphor .sf-history-metaphor-answer {font-size: clamp(23px, 7.2vw, 30px);}


/* On touch, the tapped side is deliberately stronger so the user
     understands that the words are interactive. */


/* ---------- GLOBAL / EDGE TO EDGE ---------- */

html,
body {width: 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: clip !important;
    background: #120b0d;}

.sf-section {width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;}

.sf-inner {width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 22px !important;
    padding-right: 22px !important;}

/* Remove desktop navigation/progress furniture. */

.sf-topbar,
.sf-thread,
.sf-lamp-cursor {display: none !important;}

/* Mobile narrative: Opening → The Imprint → Act IV → Finale. */

.sf-story,
.sf-declaration,
.sf-handoff {display: none !important;}

/* ---------- 1. OPENING ---------- */

.sf-hero {display: grid !important;
    min-height: 100svh !important;
    place-items: center;
    padding: max(34px, env(safe-area-inset-top)) 18px
             max(34px, env(safe-area-inset-bottom)) !important;
    overflow: hidden;
    background: linear-gradient(180deg, #130b0e 0%, #1a0d12 56%, #12090c 100%);}

.sf-hero-content {width: 100%;
    max-width: none;
    min-height: 86svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;}

.sf-hero .sf-kicker {margin: 0 0 30px !important;
    font-size: 11px;
    letter-spacing: .31em;}

.sf-hero-title {width: 100%;
    max-width: 100% !important;
    margin: 0;
    font-size: clamp(66px, 21vw, 88px) !important;
    line-height: .86 !important;
    letter-spacing: -.045em;
    text-align: center;
    text-transform: none !important;}

.sf-hero-title .italic {margin-top: .03em !important;
    font-size: .96em;
    line-height: .9;}

.sf-hero-flame-wrap {top: 46% !important;
    opacity: .25 !important;
    transform: translate(-50%, -50%) scale(.78) !important;}

.sf-hero-flame-wrap .sf-flame {width: 245px !important;
    height: 430px !important;}

.sf-hero-thesis {width: min(91vw, 430px);
    max-width: 430px !important;
    margin: 42px auto 0 !important;
    padding: 0;
    font-size: clamp(20px, 5.9vw, 25px) !important;
    line-height: 1.42 !important;
    text-align: center;
    color: rgba(244,234,220,.77);}

/* ---------- 2. THE IMPRINT ---------- */

.sf-history {display: block !important;
    min-height: auto !important;
    padding: 92px 0 96px !important;
    overflow: hidden;
    background: linear-gradient(180deg, #120a0d 0%, #201014 47%, #150b0f 100%);}

.sf-history-year,
.sf-history-ember {display: none !important;}

.sf-history-grid {display: block !important;
    width: 100%;
    max-width: none;
    margin: 0;}

.sf-history .sf-act {margin-bottom: 20px;
    font-size: 9px;
    letter-spacing: .22em;}

.sf-history-title {width: 100%;
    max-width: 340px;
    margin: 0 0 46px !important;
    font-size: clamp(48px, 14.2vw, 62px) !important;
    line-height: .94 !important;}

/* On mobile, the history is framed explicitly as metaphor.
     The fuller historical context remains on desktop. */

.sf-history-side > .sf-copy,
.sf-history-note,
.sf-whispers,
.sf-seed {display: none !important;}

.sf-history-side {width: 100%;
    max-width: none;}

.sf-history-metaphor {width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 32px 0 0 !important;
    border-top: 1px solid rgba(239,210,154,.17);}

.sf-history-metaphor-label {margin-bottom: 18px;
    font-size: 9px;
    letter-spacing: .28em;}

.sf-history-metaphor > p:not(.sf-history-metaphor-answer) {max-width: 100%;
    font-size: 17px;
    line-height: 1.65;}

.sf-history-metaphor h3 {max-width: 100%;
    margin: 44px 0 16px;
    font-size: clamp(42px, 12.7vw, 56px) !important;
    line-height: .98;}

.sf-history-metaphor .sf-history-metaphor-answer {max-width: 100%;
    font-size: clamp(25px, 7.4vw, 31px) !important;
    line-height: 1.23;}

.sf-mobile-memory-line {display: block;
    margin: 58px 0 0;
    padding: 42px 0 0;
    border-top: 1px solid rgba(239,210,154,.12);
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(27px, 8.2vw, 34px);
    line-height: 1.2;
    color: rgba(244,234,220,.82);}

.sf-light-reveal {position: static !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 60px 0 0 !important;
    padding: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    background: none !important;
    filter: none !important;}

.sf-light-reveal span {display: block !important;
    max-width: 100%;
    font-family: var(--display);
    font-size: clamp(28px, 8.7vw, 36px) !important;
    line-height: 1.12 !important;
    font-style: italic;
    color: var(--champagne-2) !important;
    opacity: .95 !important;
    transform: none !important;
    text-align: left;}

/* ---------- 4. FINALE ---------- */

.sf-finale {display: grid !important;
    min-height: 100svh !important;
    place-items: center;
    padding: 82px 20px
             max(54px, env(safe-area-inset-bottom)) !important;
    overflow: hidden;
    background: linear-gradient(180deg, #170d11 0%, #1a0e12 44%, #0e080a 100%);}

.sf-finale-burst-field {opacity: .42;}

.sf-finale-content {width: 100%;
    max-width: 420px;
    margin: 0 auto;}

.sf-finale .sf-flame {width: 205px !important;
    height: 355px !important;
    margin: 0 auto 10px;}

.sf-finale-title {width: 100%;
    max-width: 380px;
    margin: 0 auto;
    font-size: clamp(48px, 14.6vw, 64px) !important;
    line-height: .94 !important;
    text-align: center;}

.sf-finale-sub {width: min(88vw, 340px);
    max-width: 340px;
    margin: 30px auto 0;
    font-size: 19px;
    line-height: 1.5;
    text-align: center;}

.sf-final-links {margin-top: 38px;
    justify-content: center;}

.sf-final-links a {min-height: 44px;
    display: inline-flex;
    align-items: center;}

/* Remove unnecessary render-heavy ambient detail on phone. */

.sf-history .sf-flame-heat,
.sf-finale .sf-flame-heat,
.sf-finale .sf-flame-ring,
.sf-finale .sf-flame-live-glow {display: none !important;}


html,
body,
.sf-page {width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none;}

.sf-history,
.sf-history .sf-inner,
.sf-history-grid,
.sf-history-side,
.sf-history-metaphor,
.sf-light-reveal {box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;}

.sf-history .sf-inner {padding-left: 18px !important;
    padding-right: 18px !important;}

/* Centre the entire mobile Imprint sequence. */

.sf-history .sf-act,
.sf-history-title,
.sf-history-metaphor-label,
.sf-history-metaphor > p,
.sf-history-metaphor h3,
.sf-history-metaphor .sf-history-metaphor-answer,
.sf-mobile-memory-line,
.sf-light-reveal span {text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;}

.sf-history .sf-act {justify-content: center;}

.sf-history-title {max-width: 320px !important;
    margin-bottom: 40px !important;
    font-size: clamp(39px, 10.8vw, 47px) !important;
    line-height: .98 !important;}

.sf-history-metaphor {padding-top: 28px !important;}

.sf-history-metaphor > p:not(.sf-history-metaphor-answer) {width: min(92%, 350px) !important;
    max-width: 350px !important;
    font-size: 15px !important;
    line-height: 1.62 !important;}

.sf-history-metaphor h3 {width: 100% !important;
    max-width: 350px !important;
    margin-top: 40px !important;
    margin-bottom: 18px !important;
    padding: 0 !important;
    font-size: clamp(32px, 8.7vw, 38px) !important;
    line-height: 1.03 !important;
    letter-spacing: -.025em !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    text-wrap: balance;}

.sf-history-metaphor .sf-history-metaphor-answer {width: min(92%, 340px) !important;
    max-width: 340px !important;
    font-size: clamp(21px, 5.8vw, 24px) !important;
    line-height: 1.34 !important;}

.sf-mobile-memory-line {width: min(92%, 350px) !important;
    max-width: 350px !important;
    margin-top: 52px !important;
    padding-top: 36px !important;
    font-size: clamp(22px, 6.1vw, 26px) !important;
    line-height: 1.28 !important;}

.sf-light-reveal {margin-top: 52px !important;}

.sf-light-reveal span {width: min(92%, 350px) !important;
    max-width: 350px !important;
    font-size: clamp(22px, 6.1vw, 26px) !important;
    line-height: 1.25 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;}

/* Guard against inherited theme rules splitting display words. */

.sf-page h1,
.sf-page h2,
.sf-page h3,
.sf-page strong {word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;}


.sf-history-side > .sf-copy,
.sf-history-note {display: block !important;}

.sf-history-side > .sf-copy {width: min(92%, 350px) !important;
    max-width: 350px !important;
    margin: 0 auto 24px !important;
    font-size: 15px !important;
    line-height: 1.68 !important;
    letter-spacing: -.005em !important;
    text-align: left !important;
    color: rgba(244,234,220,.66) !important;}

.sf-history-side > .sf-copy + .sf-copy {margin-top: 26px !important;}

.sf-history-note {width: min(92%, 350px) !important;
    max-width: 350px !important;
    margin: 34px auto 0 !important;
    padding-top: 24px !important;
    border-top: 1px solid rgba(239,210,154,.10);
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    text-align: left !important;
    color: rgba(244,234,220,.40) !important;}

.sf-history-metaphor {width: min(92%, 350px) !important;
    max-width: 350px !important;
    margin: 50px auto 0 !important;
    padding-top: 30px !important;}

.sf-history-metaphor-label {text-align: center !important;}

/* Keep the decorative inherited-message sequence hidden on mobile.
     The historical context now carries the necessary meaning. */

.sf-whispers,
.sf-seed {display: none !important;}


.sf-finale-seen {width: min(88vw, 340px);
    max-width: 340px;
    margin-top: 18px;
    font-size: clamp(27px, 8vw, 34px);
    line-height: 1.08;
    text-align: center;}

.sf-final-links {margin-top: 44px;}


.sf-hero {background: linear-gradient(180deg, #130b0e 0%, #1a0d12 56%, #12090c 100%);}

.sf-hero-content {min-height: 90svh;
    justify-content: center;}

.sf-hero .sf-kicker {margin-bottom: 22px !important;}

.sf-hero-flame-wrap {top: 45.5% !important;
    opacity: .24 !important;
    transform: translate(-50%, -50%) scale(.76) !important;
    transition:
      opacity .55s ease,
      transform .6s var(--ease-soft);
    cursor: pointer;}

.sf-hero-thesis {width: min(91vw, 420px);
    margin-top: 28px !important;
    font-size: clamp(20px, 5.9vw, 25px) !important;
    color: rgba(244,234,220,.75);
    transition:
      opacity .55s ease,
      transform .55s var(--ease-soft);}

.sf-history {background: linear-gradient(180deg, #120a0d 0%, #201014 47%, #150b0f 100%);}

.sf-history-title {margin-bottom: 30px !important;}

.sf-mobile-history-threshold {display: block !important;
    width: min(92vw, 360px);
    max-width: 360px;
    margin: 0 auto 34px !important;
    font-family: var(--display);
    font-size: clamp(28px, 8.1vw, 34px);
    line-height: 1.14;
    text-align: left;
    color: rgba(245,236,220,.9);
    text-wrap: balance;}

.sf-history-side > .sf-copy {margin-bottom: 22px !important;}

.sf-history-metaphor {margin-top: 46px !important;
    padding-top: 28px !important;
    border-top-color: rgba(239,210,154,.14) !important;}

.sf-history-metaphor > p:not(.sf-history-metaphor-answer) {font-size: 16.5px !important;
    line-height: 1.67 !important;}

.sf-history-metaphor h3 {margin-top: 36px !important;}

.sf-mobile-history-bridge {display: block !important;
    width: min(92vw, 360px);
    max-width: 360px;
    margin: 44px auto 0 !important;
    font-family: var(--display);
    font-size: clamp(24px, 7vw, 30px);
    line-height: 1.18;
    text-align: left;
    color: rgba(243,231,212,.76);}

.sf-mobile-memory-line {margin-top: 26px !important;
    padding-top: 24px !important;
    border-top: none !important;
    font-size: clamp(29px, 8.5vw, 35px) !important;
    line-height: 1.16 !important;
    color: rgba(247,237,222,.88) !important;}

.sf-light-reveal {margin-top: 56px !important;}

.sf-light-reveal span {max-width: 330px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(30px, 8.9vw, 37px) !important;
    line-height: 1.08 !important;
    text-align: center !important;
    color: rgba(241, 216, 164, .98) !important;
    text-wrap: balance;}

.sf-finale {background: linear-gradient(180deg, #170d11 0%, #1a0e12 44%, #0e080a 100%);}

.sf-mobile-finale-prelude {display: block !important;
    width: min(80vw, 260px);
    margin: 0 auto 26px !important;
    font-family: var(--display);
    font-size: clamp(20px, 5.9vw, 24px);
    line-height: 1.2;
    font-style: italic;
    text-align: center;
    color: rgba(244,234,220,.7);}

.sf-finale .sf-flame {margin-top: 2px;}

.sf-finale-title {margin-top: 4px !important;}

.sf-finale-sub {margin-top: 24px !important;}

.sf-finale-seen {width: min(88vw, 340px) !important;
    max-width: 340px !important;
    margin-top: 16px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(27px, 8vw, 34px) !important;
    line-height: 1.08 !important;
    text-align: center !important;}


/* The flame remains visually behind the title, but can now receive touch.
     The title itself does not intercept the touch target. */

.sf-hero-flame-wrap {z-index: 1 !important;
    pointer-events: auto !important;
    touch-action: manipulation;
    cursor: pointer;}

.sf-hero .sf-kicker,
.sf-hero-title {position: relative;
    z-index: 2;
    pointer-events: none;}

.sf-hero-thesis {position: relative;
    z-index: 3;}

/* Before entry, preserve mystery. The visitor sees the title,
     flame and invitation rather than the entire opening argument. */

.sf-hero-thesis {max-height: 180px;
    transition:
      max-height .8s var(--ease-soft) .38s,
      margin-top .8s var(--ease-soft) .38s,
      opacity .68s ease .48s,
      transform .8s var(--ease-soft) .42s !important;}

/* Mobile text reveals remain cinematic but no longer animate blur.
     This is clearer visually and cheaper to render on a phone. */

.sf-reveal {filter: none !important;
    transition:
      opacity .78s var(--ease-soft),
      transform .92s var(--ease-soft) !important;}

.sf-reveal[data-delay="1"] {transition-delay: .10s !important;}

.sf-reveal[data-delay="2"] {transition-delay: .20s !important;}

.sf-reveal[data-delay="3"] {transition-delay: .30s !important;}

/* Keep the staged hero timing above the generic reveal timing. */

.sf-hero-thesis {transition:
      max-height .8s var(--ease-soft) .38s,
      margin-top .8s var(--ease-soft) .38s,
      opacity .68s ease .48s,
      transform .8s var(--ease-soft) .42s !important;}


.sf-union.sf-triad4 {min-height: calc(var(--vh) * 150) !important;}

.sf-triad4-heading {top: max(44px, env(safe-area-inset-top));
    width: calc(100% - 28px);}

.sf-triad4-heading .sf-act {font-size: 9px !important;}

.sf-triad4-heading-swap {height: 62px;}

.sf-triad4-heading h2 {font-size: clamp(32px, 9.2vw, 42px);
    line-height: .94;}

.sf-triad4-force {width: 150px;}

.sf-triad4-orb {width: 126px;}

.sf-triad4-discernment {top: 29%;}

.sf-triad4-selftrust {left: 24%;
    top: 61%;}

.sf-triad4-integrity {left: 76%;
    top: 61%;}

.sf-triad4-label {margin-top: 11px;}

.sf-triad4-label strong {font-size: clamp(20px, 6vw, 25px);
    letter-spacing: .035em;}

.sf-triad4-label em {margin-top: 6px;
    font-size: 14px;}

.sf-union.is-gathering .sf-triad4-discernment {top: 48%;}

.sf-union.is-gathering .sf-triad4-selftrust {left: 40%;
    top: 55%;}

.sf-union.is-gathering .sf-triad4-integrity {left: 60%;
    top: 55%;}

.sf-union.is-charged .sf-triad4-discernment {top: 51%;}

.sf-union.is-charged .sf-triad4-selftrust {left: 46%;
    top: 54%;}

.sf-union.is-charged .sf-triad4-integrity {left: 54%;
    top: 54%;}

.sf-triad4-eclipse,
.sf-triad4-halo,
.sf-triad4-aura {width: min(76vw, 300px);
    top: 55%;}

.sf-triad4-wave,
.sf-triad4-whitecore {top: 55%;}

.sf-triad4-wave {width: 24vmax;
    height: 24vmax;}

.sf-triad4-eclipse-copy strong {font-size: clamp(36px, 10.5vw, 46px);}

.sf-triad4-eclipse-copy > em {margin-top: 6px;
    font-size: clamp(39px, 11.5vw, 50px);}

.sf-triad4-eclipse-copy > span {width: 78%;
    margin-top: 14px;
    font-size: 17px;}

/* Keep mobile cinematic but less thermally expensive. */

.sf-triad4-aura-c {display: none !important;}

.sf-triad4-aura-a {filter: blur(8px);}

.sf-triad4-aura-b {filter: blur(18px);}


.sf-hero-flame-wrap {pointer-events: none !important;
    cursor: default !important;}

.sf-hero-thesis {display: block !important;
    max-height: 180px !important;
    overflow: visible !important;
    margin-top: 26px !important;
    opacity: 1 !important;
    transform: none !important;}


/* V52 mobile semantic lighting */
.sf-hero {
  background: linear-gradient(180deg, #130b0e 0%, #1a0d12 56%, #12090c 100%) !important;
}
.sf-history {
  background: linear-gradient(180deg, #120a0d 0%, #201014 47%, #150b0f 100%) !important;
}
.sf-union.sf-triad4 {
  display: block !important;
  background: linear-gradient(180deg, #0c0709 0%, #160a0f 58%, #080506 100%) !important;
}
.sf-finale {
  background: linear-gradient(180deg, #170d11 0%, #1a0e12 44%, #0e080a 100%) !important;
}
.sf-page {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}
}

@media (max-width: 360px) {
.sf-inner {width: calc(100% - 26px);}


.sf-inner {padding-left: 18px !important;
    padding-right: 18px !important;}

.sf-hero {padding-left: 14px !important;
    padding-right: 14px !important;}

.sf-hero-title {font-size: clamp(60px, 20.5vw, 74px) !important;}

.sf-hero-thesis {font-size: 19px !important;}

.sf-history-title {font-size: clamp(43px, 13.5vw, 51px) !important;}

.sf-history-metaphor h3 {font-size: clamp(39px, 12vw, 46px) !important;}

.sf-finale-title {font-size: clamp(44px, 14vw, 52px) !important;}


.sf-history .sf-inner {padding-left: 15px !important;
    padding-right: 15px !important;}

.sf-history-metaphor h3 {max-width: 326px !important;
    font-size: 31px !important;}

.sf-history-metaphor > p:not(.sf-history-metaphor-answer) {font-size: 14.5px !important;}

.sf-history-metaphor .sf-history-metaphor-answer,
.sf-mobile-memory-line,
.sf-light-reveal span {font-size: 21px !important;}


.sf-history-side > .sf-copy {width: min(94%, 326px) !important;
    max-width: 326px !important;
    font-size: 14.5px !important;}

.sf-history-note,
.sf-history-metaphor {width: min(94%, 326px) !important;
    max-width: 326px !important;}


.sf-mobile-history-threshold {font-size: clamp(26px, 8vw, 30px);}

.sf-mobile-history-bridge,
.sf-mobile-memory-line {font-size: clamp(24px, 7.5vw, 30px) !important;}

.sf-mobile-finale-prelude {font-size: 19px !important;}
}

@media (hover: hover) and (pointer: fine) {
body.sf-lamp-active,
body.sf-lamp-active a,
body.sf-lamp-active button {cursor: none !important;}


body.sf-lamp-active .sf-final-links,
body.sf-lamp-active .sf-final-links *,
body.sf-lamp-active .sf-final-links a {cursor: none !important;}
}

@media (hover: none) and (pointer: coarse) {
/* Avoid sticky hover styling on iOS/Android after tapping. */
}

@media (max-width: 900px), (pointer: coarse), (hover: none) {
.sf-lamp-cursor {display: none !important;}


body > .sf-lamp-cursor::before,
body > .sf-lamp-cursor::after {display: none !important;}
}

@media (max-width: 680px), (pointer: coarse), (hover: none) {
#sf-embers,
.sf-grain {display: none !important;}

.sf-flame-heat,
.sf-flame-reflection {display: none !important;}

.sf-flame-aura,
.sf-flame-live-glow,
.sf-flame-hot-glow {mix-blend-mode: normal !important;}

.sf-finale-burst-back {display: none !important;}
}

@media (prefers-reduced-motion: reduce) {
.sf-flame {--flicker-light: 1 !important;
        --flicker-stretch: 1 !important;
        --flicker-sway: 0deg !important;
        --flicker-glow: 1 !important;}

.sf-flame-embers,
.sf-local-ember {display: none !important;}

html {scroll-behavior: auto;}

*,
*::before,
*::after {animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;}

.sf-reveal {opacity: 1;
        transform: none;
        filter: none;}

.sf-flame {transform: scale(var(--flame-scale)) !important;}

.sf-whisper.is-released {opacity: .25;
        filter: none;
        transform: none;}


.sf-finale-burst-field {display: none !important;}


.sf-flame-outer,
.sf-flame-membrane,
.sf-flame-core,
.sf-flame-tongue-a,
.sf-flame-tongue-b,
.sf-flame-ribbon,
.sf-flame-aura,
.sf-flame-live-glow,
.sf-flame-hot-glow,
.sf-flame-heat,
.sf-flame-pool {transform: none;
    animation: none !important;}


body > .sf-lamp-cursor::before,
body > .sf-lamp-cursor::after {transition: none !important;}


.sf-triad4-whitecore,
.sf-triad4-wave,
.sf-triad4-halo,
.sf-triad4-aura {animation: none !important;}

.sf-union.is-united .sf-triad4-aura-a {opacity: .38 !important;
    transform: translate(-50%,-50%) scale(1.34) !important;}

.sf-union.is-united .sf-triad4-aura-b {opacity: .20 !important;
    transform: translate(-50%,-50%) scale(1.68) !important;}
}