:root {--ink: #120b0d;
      --ink-2: #1b1014;
      --wine: #32151d;
      --wine-2: #4a202b;
      --cream: #f4eadc;
      --cream-soft: #eadfce;
      --paper: #f6f0e7;
      --champagne: #d7b982;
      --champagne-2: #f0d8a7;
      --bronze: #9b6847;
      --ash: #8c8580;
      --smoke: #b7aea7;
      --line: rgba(240, 216, 167, .20);
      --display: "Cormorant Garamond", Georgia, serif;
      --body: "Manrope", "Helvetica Neue", Arial, sans-serif;
      --ease-lux: cubic-bezier(.22, .73, .22, 1);
      --ease-soft: cubic-bezier(.16, 1, .3, 1);
      --vh: 1vh;}

* {box-sizing: border-box;}

html {scroll-behavior: smooth; background: var(--ink);}

body {margin: 0;
      overflow-x: hidden;
      background: var(--ink);
      color: var(--cream);
      font-family: var(--body);
      font-weight: 300;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;}

body::selection,
::selection {color: var(--ink);
      background: var(--champagne-2);}

a {color: inherit;}

button,
a {-webkit-tap-highlight-color: transparent;}

button {font: inherit;}

.sf-page {position: relative;
      isolation: isolate;
      width: 100%;
      min-height: 100vh;
      background:
        linear-gradient(180deg, #120b0d 0%, #170c10 22%, #120b0d 100%);}

/* Ambient layers */
    .sf-vignette,
#sf-embers {position: fixed;
      inset: 0;
      pointer-events: none;}

#sf-embers {z-index: 0; opacity: .62; transition: opacity 1.4s var(--ease-soft);}
.sf-vignette {z-index: 20;
      box-shadow: inset 0 0 16vw rgba(0,0,0,.54);
      opacity: .75;}

/* Hermit-style lantern cursor */

.sf-lamp-cursor {position: fixed;
      left: 0;
      top: 0;
      width: 36px;
      height: 48px;
      transform: translate3d(-9999px, -9999px, 0);
      transform-origin: 50% 18%;
      z-index: 60;
      pointer-events: none;
      opacity: 0;
      transition: opacity .18s ease;
      will-change: transform;}

.sf-lamp-cursor svg {width: 100%;
      height: 100%;
      overflow: visible;
      filter:
        drop-shadow(0 2px 6px rgba(0,0,0,.58))
        drop-shadow(0 0 8px rgba(227, 183, 110, .14));}

.sf-lamp-metal {fill: url(#sfOldBrass);
      stroke: rgba(177, 135, 83, .62);
      stroke-width: 1.35;}

.sf-lamp-frame {fill: url(#sfOldIron);
      stroke: rgba(138, 101, 65, .72);
      stroke-width: 1.15;}

.sf-lamp-glass {fill: url(#sfOldGlass);
      stroke: rgba(201, 176, 128, .46);
      stroke-width: .9;}

.sf-lamp-patina {fill: rgba(72, 97, 75, .34);
      opacity: .72;}

.sf-lamp-wear {fill: none;
      stroke: rgba(236, 206, 145, .25);
      stroke-width: .7;
      stroke-linecap: round;
      opacity: .72;}

.sf-lamp-scratch {fill: none;
      stroke: rgba(57, 35, 28, .50);
      stroke-width: .55;
      stroke-linecap: round;
      opacity: .65;}

.sf-lamp-core {fill: rgba(255, 234, 173, .92);
      filter: drop-shadow(0 0 6px rgba(255, 231, 176, .75));}

.sf-lamp-star {fill: none;
      stroke: rgba(255, 238, 198, .72);
      stroke-width: 1.45;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 0 4px rgba(255, 240, 208, .55));}

.sf-lamp-halo {fill: url(#sfLampGlow);
      opacity: .9;
      mix-blend-mode: screen;}

.sf-lamp-ray {fill: url(#sfLampBeam);
      opacity: .42;
      mix-blend-mode: screen;
      filter: blur(1.2px);}

.sf-lamp-cursor.is-visible {opacity: 1;}


/* Grain */

.sf-grain {position: fixed;
      inset: -50%;
      z-index: 19;
      pointer-events: none;
      opacity: .035;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
      animation: sfGrain 9s steps(9) infinite;}

@keyframes sfGrain{
      0% { transform: translate3d(0,0,0); }
      20% { transform: translate3d(-2%, 1%, 0); }
      40% { transform: translate3d(2%, -1%, 0); }
      60% { transform: translate3d(-1%, -2%, 0); }
      80% { transform: translate3d(1%, 2%, 0); }
      100% { transform: translate3d(0,0,0); }
    }

/* Minimal top navigation */

.sf-topbar {position: fixed;
      z-index: 50;
      top: 0;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 22px clamp(20px, 4vw, 64px);
      color: rgba(244, 234, 220, .70);
      mix-blend-mode: normal;
      transition: opacity .7s var(--ease-soft), transform .7s var(--ease-soft);}

.sf-topbar.is-hidden {opacity: 0; transform: translateY(-16px); pointer-events: none;}

.sf-brand {text-decoration: none;
      text-transform: uppercase;
      letter-spacing: .24em;
      font-size: 12px;
      font-weight: 500;}

.sf-topbar-link {border: 0;
      background: transparent;
      color: inherit;
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: .18em;
      font-size: 11px;
      padding: 9px 0;}

.sf-topbar-link::after {content: "";
      display: block;
      width: 100%;
      height: 1px;
      margin-top: 6px;
      background: linear-gradient(90deg, transparent, var(--champagne), transparent);
      transform: scaleX(0);
      transition: transform .45s var(--ease-soft);}

.sf-topbar-link:hover::after,
.sf-topbar-link:focus-visible::after {transform: scaleX(1);}

/* Flame thread */

.sf-thread {position: fixed;
      z-index: 45;
      right: clamp(13px, 2vw, 30px);
      top: 50%;
      width: 22px;
      height: min(48vh, 440px);
      transform: translateY(-50%);
      display: flex;
      justify-content: center;}

.sf-thread-line {position: relative;
      width: 1px;
      height: 100%;
      background: rgba(240, 216, 167, .12);
      overflow: visible;}

.sf-thread-progress {position: absolute;
      inset: 0 0 auto;
      height: var(--progress, 0%);
      background: linear-gradient(180deg, rgba(240,216,167,.15), var(--champagne), var(--bronze));
      box-shadow: 0 0 14px rgba(215, 185, 130, .35);}

.sf-thread-ember {position: absolute;
      left: 50%;
      top: var(--progress, 0%);
      width: 6px;
      height: 6px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: var(--champagne-2);
      box-shadow:
        0 0 7px rgba(240,216,167,.95),
        0 0 20px rgba(180,98,51,.55);
      transition: top .08s linear;}

.sf-chapter-dots {position: absolute;
      inset: 0;}

.sf-chapter-dot {position: absolute;
      left: 50%;
      width: 5px;
      height: 5px;
      transform: translate(-50%, -50%);
      border: 1px solid rgba(240,216,167,.38);
      border-radius: 50%;
      background: var(--ink);}

.sf-chapter-dot[data-index="0"] {top: 4%;}

.sf-chapter-dot[data-index="1"] {top: 27%;}

.sf-chapter-dot[data-index="2"] {top: 49%;}

.sf-chapter-dot[data-index="3"] {top: 72%;}

.sf-chapter-dot[data-index="4"] {top: 96%;}

/* Core layout */

.sf-section {position: relative;
      z-index: 2;
      width: 100%;}

.sf-inner {width: min(1180px, calc(100% - 48px));
      margin-inline: auto;}

.sf-reading {width: min(560px, 100%);}

.sf-kicker {margin: 0 0 18px;
      text-transform: uppercase;
      letter-spacing: .28em;
      font-size: 12px;
      font-weight: 600;
      color: var(--champagne);}

.sf-act {display: inline-flex;
      align-items: center;
      gap: 14px;
      color: rgba(240,216,167,.62);
      text-transform: uppercase;
      letter-spacing: .24em;
      font-size: 11px;
      font-weight: 500;}

.sf-act::before {content: "";
      width: 28px;
      height: 1px;
      background: currentColor;}

.sf-display {margin: 0;
      font-family: var(--display);
      font-weight: 400;
      letter-spacing: -.025em;
      line-height: .92;
      text-wrap: balance;}

.sf-copy {margin: 0;
      font-size: clamp(15px, 1.25vw, 18px);
      line-height: 1.9;
      color: rgba(244, 234, 220, .76);
      letter-spacing: -.01em;}

.sf-copy + .sf-copy {margin-top: 1.35em;}

/* Reveal */

.sf-reveal {opacity: 0;
      transform: translate3d(0, 26px, 0);
      filter: blur(7px);
      transition:
        opacity 1.2s var(--ease-soft),
        transform 1.4s var(--ease-soft),
        filter 1.2s var(--ease-soft);}

.sf-reveal.is-visible {opacity: 1;
      transform: translate3d(0,0,0);
      filter: blur(0);}

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

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

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

/* Signature flame: sculptural, translucent, narrative-responsive */

.sf-flame {--flame-scale: 1;
      --flame-lean: 0deg;
      --flame-warmth: 1;
      --flame-opacity: 1;
      --flame-aura: .17;
      --flame-edge: .58;
      --flame-core: 1;
      --flame-cool: 0;
      --flame-state-brightness: 1;
      --flicker-light: 1;
      --flicker-stretch: 1;
      --flicker-sway: 0deg;
      --flicker-glow: 1;
      --tip-x: 0px;
      --tip-y: 0px;
      --core-scale: 1;
      --outer-scale-x: 1;
      --live-glow-opacity: .84;
      --hot-glow-opacity: .78;
      position: relative;
      width: clamp(190px, 26vw, 380px);
      aspect-ratio: 1 / 1.2;
      transform:
        scale(var(--flame-scale))
        scaleY(var(--flicker-stretch))
        rotate(calc(var(--flame-lean) + var(--flicker-sway)));
      transform-origin: 50% 84%;
      opacity: var(--flame-opacity);
      filter:
        brightness(var(--flame-state-brightness))
        drop-shadow(0 0 26px rgba(215, 153, 86, .20))
        drop-shadow(0 0 66px rgba(122, 44, 42, .17));
      transition: opacity 1.8s var(--ease-soft);
      isolation: isolate;
      will-change: transform, filter;}

.sf-flame > * {position: absolute;
      pointer-events: none;}

/* Very large invisible light field */

.sf-flame-aura {left: 50%;
      top: 55%;
      width: 260%;
      height: 220%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background:
        radial-gradient(circle,
          rgba(226, 181, 107, calc(var(--flame-aura) * .50)) 0%,
          rgba(142, 57, 49, calc(var(--flame-aura) * .42)) 18%,
          rgba(77, 24, 35, calc(var(--flame-aura) * .20)) 44%,
          transparent 72%);
      filter: blur(34px);
      opacity: .72;
      animation: sfAuraBreath 11.3s cubic-bezier(.45,0,.55,1) infinite alternate;
      z-index: -4;}

/* Thin architectural halo, introduced more strongly in final states */

.sf-flame-ring {left: 50%;
      top: 53%;
      width: 86%;
      aspect-ratio: 1;
      transform: translate(-50%, -50%) scale(.94);
      border-radius: 50%;
      border: 1px solid rgba(215, 185, 130, .10);
      box-shadow:
        inset 0 0 22px rgba(240, 216, 167, .02),
        0 0 28px rgba(215, 185, 130, .035);
      opacity: .38;
      z-index: -1;
      transition: opacity 1.8s var(--ease-soft), transform 1.8s var(--ease-soft), border-color 1.8s ease;}

/* Refractive glass membrane */

.sf-flame-membrane {left: 50%;
      top: 8%;
      width: 58%;
      height: 76%;
      transform: translateX(-50%);
      clip-path: polygon(
        53% 0%,
        64% 12%,
        74% 25%,
        89% 42%,
        91% 60%,
        81% 78%,
        67% 92%,
        49% 100%,
        32% 94%,
        18% 82%,
        10% 64%,
        15% 45%,
        27% 29%,
        41% 18%
      );
      background:
        linear-gradient(112deg,
          rgba(255,255,255,.08) 0%,
          rgba(240,216,167,.16) 14%,
          rgba(255,255,255,.018) 25%,
          rgba(155, 76, 55, .12) 47%,
          rgba(255,255,255,.025) 64%,
          rgba(217, 181, 122, .11) 79%,
          rgba(67, 22, 33, .03) 100%);
      border-radius: 48% 52% 45% 55% / 66% 56% 44% 34%;
      backdrop-filter: blur(2.5px) saturate(1.12);
      -webkit-backdrop-filter: blur(2.5px) saturate(1.12);
      box-shadow:
        inset 11px 0 18px rgba(255, 240, 209, .04),
        inset -14px -8px 26px rgba(78, 23, 31, .16);
      opacity: .78;
      animation: sfMembrane 12.5s cubic-bezier(.37,0,.32,1) infinite alternate;
      translate: calc(var(--tip-x) * .22) calc(var(--tip-y) * .16);
      z-index: 1;}

/* Main asymmetric outer tongue */

.sf-flame-outer {left: 50%;
      top: 7%;
      width: 48%;
      height: 77%;
      transform: translateX(-50%);
      clip-path: polygon(
        54% 0%,
        68% 15%,
        73% 29%,
        86% 43%,
        93% 58%,
        83% 77%,
        68% 91%,
        51% 100%,
        31% 94%,
        16% 81%,
        9% 63%,
        16% 43%,
        33% 30%,
        43% 15%
      );
      background:
        radial-gradient(circle at 46% 75%,
          rgba(255,248,225,.86) 0 3%,
          rgba(245,217,159,.82) 5% 11%,
          rgba(223,166,92,.55) 18%,
          transparent 36%),
        linear-gradient(145deg,
          rgba(246, 220, 171, calc(.44 * var(--flame-warmth))) 2%,
          rgba(223, 168, 102, .25) 18%,
          rgba(151, 69, 53, .27) 49%,
          rgba(66, 20, 31, .05) 78%);
      opacity: .78;
      filter: saturate(calc(.72 + var(--flame-warmth) * .32));
      animation: none;
      transform:
        translateX(-50%)
        translate3d(var(--tip-x), var(--tip-y), 0)
        scaleX(var(--outer-scale-x))
        scaleY(var(--flicker-stretch))
        rotate(var(--flicker-sway));
      transform-origin: 50% 88%;
      transition: none;
      will-change: transform, opacity, filter;
      z-index: 2;}

/* Secondary left tongue */

.sf-flame-tongue-a {left: 36%;
      top: 16%;
      width: 20%;
      height: 52%;
      clip-path: polygon(64% 0%, 89% 29%, 78% 48%, 89% 68%, 65% 100%, 31% 82%, 17% 54%, 38% 29%);
      background:
        linear-gradient(165deg,
          rgba(255, 236, 192, .26),
          rgba(209, 135, 76, .30) 42%,
          rgba(112, 44, 46, .10) 76%,
          transparent 100%);
      filter: blur(.25px);
      opacity: .62;
      animation: sfTongueA .82s cubic-bezier(.37,.05,.24,1) infinite alternate;
      z-index: 3;}

/* Secondary upper wisp */

.sf-flame-tongue-b {left: 51%;
      top: 3%;
      width: 15%;
      height: 43%;
      clip-path: polygon(44% 0%, 79% 28%, 70% 51%, 94% 69%, 62% 100%, 31% 72%, 15% 44%);
      background:
        linear-gradient(150deg,
          rgba(240, 215, 169, .22),
          rgba(171, 87, 62, .19) 58%,
          transparent 100%);
      filter: blur(.45px);
      opacity: .54;
      animation: sfTongueB 1.14s cubic-bezier(.31,.02,.28,1) infinite alternate;
      z-index: 2;}

/* Hot core */

.sf-flame-core {left: 50%;
      top: 38%;
      width: 18%;
      height: 38%;
      transform: translateX(-50%);
      clip-path: polygon(54% 0%, 80% 27%, 86% 56%, 68% 88%, 50% 100%, 29% 83%, 19% 53%, 35% 24%);
      background:
        radial-gradient(circle at 50% 72%,
          rgba(255,255,244, calc(.98 * var(--flame-core))) 0 5%,
          rgba(255,244,211, calc(.96 * var(--flame-core))) 7% 13%,
          rgba(244,211,147,.88) 20%,
          rgba(219,155,83,.55) 44%,
          rgba(162,72,52,.13) 67%,
          transparent 76%);
      filter: blur(.2px);
      opacity: .94;
      animation: none;
      transform:
        translateX(-50%)
        translate3d(calc(var(--tip-x) * .18), calc(var(--tip-y) * .12), 0)
        scale(var(--core-scale));
      transform-origin: 50% 86%;
      transition: none;
      will-change: transform, opacity, filter;
      z-index: 5;}

/* Liquid ribbon current */

.sf-flame-ribbon {left: 47%;
      top: 25%;
      width: 15%;
      height: 52%;
      transform: translateX(-50%) rotate(-7deg);
      border-radius: 50% 58% 44% 55%;
      background:
        linear-gradient(180deg,
          transparent 0 8%,
          rgba(255,247,224,.02) 18%,
          rgba(255,238,195,.33) 35%,
          rgba(220,160,92,.22) 56%,
          transparent 85%);
      clip-path: polygon(50% 0%, 75% 15%, 57% 39%, 78% 57%, 47% 79%, 39% 100%, 24% 77%, 42% 56%, 25% 31%);
      filter: blur(.7px);
      opacity: .78;
      animation: sfRibbon 9.6s cubic-bezier(.38,0,.25,1) infinite;
      z-index: 6;}

/* Partial champagne/silver edge catches */

.sf-flame-edge-a,
.sf-flame-edge-b,
.sf-flame-edge-c {border-radius: 50%;
      opacity: var(--flame-edge);
      mix-blend-mode: screen;
      z-index: 7;}

.sf-flame-edge-a {left: 27%;
      top: 30%;
      width: 28%;
      height: 42%;
      border-left: 1px solid rgba(250, 233, 198, .52);
      transform: rotate(13deg);
      filter: blur(.2px);
      animation: sfEdgeA 8.8s ease-in-out infinite alternate;}

.sf-flame-edge-b {right: 25%;
      top: 43%;
      width: 23%;
      height: 29%;
      border-right: 1px solid rgba(220, 183, 126, .42);
      transform: rotate(-8deg);
      animation: sfEdgeB 11.2s ease-in-out infinite alternate;}

.sf-flame-edge-c {left: 42%;
      top: 13%;
      width: 17%;
      height: 23%;
      border-right: 1px solid rgba(218, 225, 225, calc(.19 + var(--flame-cool) * .18));
      transform: rotate(-17deg);
      filter: blur(.25px);
      animation: sfEdgeC 13.3s ease-in-out infinite alternate;}

/* Suspended source point */

.sf-flame-source {left: 50%;
      bottom: 9%;
      width: 6px;
      height: 6px;
      transform: translateX(-50%);
      border-radius: 50%;
      background: rgba(255, 236, 195, .92);
      box-shadow:
        0 0 7px rgba(255,236,195,.92),
        0 0 18px rgba(215,154,86,.58),
        0 0 42px rgba(127,48,42,.42);
      z-index: 8;}

/* Soft source pool */

.sf-flame-pool {left: 50%;
      bottom: 4%;
      width: 34%;
      height: 5%;
      transform: translateX(-50%);
      border-radius: 50%;
      background: rgba(223, 173, 101, .22);
      filter: blur(10px);
      z-index: -1;}

/* Distorted reflection */

.sf-flame-reflection {left: 50%;
      bottom: -13%;
      width: 30%;
      height: 23%;
      transform: translateX(-50%) scaleY(-1) skewX(-6deg);
      background:
        radial-gradient(ellipse at 50% 0%,
          rgba(229, 188, 119, .14),
          rgba(147, 69, 51, .08) 34%,
          transparent 74%);
      filter: blur(8px);
      opacity: .38;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,.82), transparent 82%);
      -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.82), transparent 82%);
      z-index: -2;}

/* Heat shimmer above flame */

.sf-flame-heat {left: 50%;
      top: -9%;
      width: 34%;
      height: 25%;
      transform: translateX(-50%);
      border-radius: 48%;
      background:
        radial-gradient(ellipse at 50% 70%, rgba(244,220,171,.05), transparent 68%);
      filter: blur(9px);
      opacity: .42;
      animation: sfHeat 7.7s ease-in-out infinite alternate;
      z-index: 0;}

/* Rare attached ember */

.sf-flame-spark {left: 60%;
      top: 21%;
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: rgba(244, 208, 145, .82);
      box-shadow: 0 0 8px rgba(235,181,100,.7);
      opacity: 0;
      animation: sfSpark 12.8s cubic-bezier(.3,0,.25,1) infinite;
      z-index: 9;}

/* Candle-like light bloom, synchronized with the flame */

.sf-flame-live-glow {left: 50%;
      top: 56%;
      width: 145%;
      height: 132%;
      transform: translate(-50%, -50%) scale(var(--flicker-glow));
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 58%,
          rgba(255, 239, 202, .13) 0 7%,
          rgba(233, 187, 116, .10) 17%,
          rgba(169, 89, 55, .065) 35%,
          rgba(86, 30, 39, .028) 56%,
          transparent 74%);
      filter: blur(24px);
      opacity: var(--live-glow-opacity, .84);
      mix-blend-mode: screen;
      z-index: -2;
      pointer-events: none;
      will-change: transform, opacity;
      transition: none;}

.sf-flame-hot-glow {left: 50%;
      top: 62%;
      width: 54%;
      height: 46%;
      transform: translate(-50%, -50%) scale(var(--flicker-glow));
      border-radius: 50%;
      background:
        radial-gradient(circle,
          rgba(255, 249, 226, .16) 0 8%,
          rgba(248, 215, 153, .13) 20%,
          rgba(202, 120, 68, .055) 47%,
          transparent 70%);
      filter: blur(11px);
      opacity: var(--hot-glow-opacity, .78);
      z-index: 0;
      pointer-events: none;
      will-change: transform, opacity;
      transition: none;}

/* Sparse embers released from the flame itself */

.sf-flame-embers {position: absolute;
      inset: -42% -48% -18%;
      z-index: 12;
      overflow: visible;
      pointer-events: none;}

.sf-local-ember {position: absolute;
      left: 50%;
      top: 58%;
      width: var(--ember-size, 2px);
      height: var(--ember-size, 2px);
      border-radius: 50%;
      background: rgba(255, 224, 165, .94);
      box-shadow:
        0 0 4px rgba(255, 226, 169, .82),
        0 0 10px rgba(218, 141, 77, .48),
        0 0 18px rgba(255, 198, 120, .22);
      opacity: 0;
      transform: translate3d(0,0,0) scale(.7);
      filter: blur(var(--ember-blur, 0px));
      animation: sfLocalEmber var(--ember-life, 2200ms) cubic-bezier(.18,.72,.2,1) forwards;
      will-change: transform, opacity;}

.sf-local-ember.is-bronze {background: rgba(211, 136, 83, .90);
      box-shadow:
        0 0 4px rgba(211, 136, 83, .68),
        0 0 9px rgba(126, 55, 45, .38);}

@keyframes sfLocalEmber{
      0% {
        opacity: 0;
        transform:
          translate3d(var(--start-x, 0px), var(--start-y, 0px), 0)
          scale(.45);
      }
      9% { opacity: var(--ember-opacity, .75); }
      33% {
        opacity: calc(var(--ember-opacity, .75) * .92);
        transform:
          translate3d(calc(var(--start-x, 0px) + var(--mid-drift-x, 5px)), calc(var(--start-y, 0px) + var(--mid-rise, -22px)), 0)
          scale(.82);
      }
      67% {
        opacity: calc(var(--ember-opacity, .75) * .48);
        transform:
          translate3d(calc(var(--drift-x, 12px) * .68), calc(var(--rise, -82px) * .68), 0)
          scale(.42);
      }
      100% {
        opacity: 0;
        transform:
          translate3d(var(--drift-x, 12px), var(--rise, -82px), 0)
          scale(.14);
      }
    }

.sf-local-ember.is-large {box-shadow:
        0 0 6px rgba(255, 232, 178, .94),
        0 0 16px rgba(236, 165, 92, .60),
        0 0 30px rgba(255, 191, 112, .28);}

.sf-local-ember.is-tiny {opacity: 0;
      box-shadow:
        0 0 2px rgba(255, 232, 178, .72),
        0 0 6px rgba(220, 146, 81, .28);}


/* Narrative states */

.sf-flame[data-flame-state="opening"] {--flame-warmth: .62;
      --flame-aura: .11;
      --flame-edge: .38;
      --flame-core: .72;
      --flame-cool: .18;
      --flame-state-brightness: .84;}

.sf-flame[data-flame-state="opening"] .sf-flame-ring {opacity: .18;
      transform: translate(-50%, -50%) scale(.88);}

.sf-flame[data-flame-state="inheritance"] {--flame-warmth: .38;
      --flame-aura: .08;
      --flame-edge: .34;
      --flame-core: .68;
      --flame-cool: 1;
      --flame-state-brightness: .74;
      filter:
        saturate(.45)
        brightness(.72)
        drop-shadow(0 0 24px rgba(173, 181, 183, .08));}

.sf-flame[data-flame-state="remembering"] {--flame-warmth: .76;
      --flame-aura: .14;
      --flame-edge: .48;
      --flame-core: .86;
      --flame-cool: .32;
      --flame-state-brightness: .94;}

.sf-flame[data-flame-state="union"] {--flame-warmth: 1.02;
      --flame-aura: .20;
      --flame-edge: .66;
      --flame-core: 1;
      --flame-cool: .18;
      --flame-state-brightness: 1.04;}

.sf-flame[data-flame-state="final"] {--flame-warmth: 1.08;
      --flame-aura: .25;
      --flame-edge: .72;
      --flame-core: 1.08;
      --flame-cool: .22;
      --flame-state-brightness: 1.08;}

.sf-flame[data-flame-state="final"] .sf-flame-ring {opacity: .82;
      transform: translate(-50%, -50%) scale(1.04);
      border-color: rgba(215, 185, 130, .28);}

/* Narrative near-absence moment */

.sf-flame.is-veiled .sf-flame-outer,
.sf-flame.is-veiled .sf-flame-tongue-a,
.sf-flame.is-veiled .sf-flame-tongue-b,
.sf-flame.is-veiled .sf-flame-membrane,
.sf-flame.is-veiled .sf-flame-ribbon,
.sf-flame.is-veiled .sf-flame-edge-a,
.sf-flame.is-veiled .sf-flame-edge-b,
.sf-flame.is-veiled .sf-flame-edge-c {opacity: .07;
      transition: opacity 1.8s var(--ease-soft);}

.sf-flame.is-veiled .sf-flame-core {opacity: .82;
      transform: translateX(-50%) scale(.75);
      transition: opacity 1.8s var(--ease-soft), transform 1.8s var(--ease-soft);}

.sf-flame:not(.is-veiled) .sf-flame-outer,
.sf-flame:not(.is-veiled) .sf-flame-tongue-a,
.sf-flame:not(.is-veiled) .sf-flame-tongue-b,
.sf-flame:not(.is-veiled) .sf-flame-membrane,
.sf-flame:not(.is-veiled) .sf-flame-ribbon,
.sf-flame:not(.is-veiled) .sf-flame-edge-a,
.sf-flame:not(.is-veiled) .sf-flame-edge-b,
.sf-flame:not(.is-veiled) .sf-flame-edge-c {transition: opacity 2.4s var(--ease-soft);}


@keyframes sfTongueA{
      0%   { transform: translate3d(-4%, 3%, 0) scale(.94) rotate(-7deg); opacity: .46; }
      100% { transform: translate3d(4%, -4%, 0) scale(1.08) rotate(3deg); opacity: .67; }
    }

@keyframes sfTongueB{
      0%   { transform: translate3d(1%, 4%, 0) scale(.9) rotate(4deg); opacity: .34; }
      100% { transform: translate3d(-6%, -6%, 0) scale(1.1) rotate(-5deg); opacity: .58; }
    }

@keyframes sfMembrane{
      0%   { transform: translateX(-50%) scale(.98) skewX(-.6deg); opacity: .62; }
      52%  { transform: translateX(-50%) scale(1.015) skewX(.4deg); opacity: .80; }
      100% { transform: translateX(-50%) scale(.992) skewX(-.2deg); opacity: .70; }
    }


@keyframes sfRibbon{
      0%   { transform: translateX(-50%) translateY(10%) rotate(-8deg) scaleY(.82); opacity: .22; }
      34%  { transform: translateX(-50%) translateY(0%) rotate(3deg) scaleY(1.02); opacity: .68; }
      67%  { transform: translateX(-50%) translateY(-9%) rotate(-3deg) scaleY(.94); opacity: .48; }
      100% { transform: translateX(-50%) translateY(-16%) rotate(7deg) scaleY(1.05); opacity: .12; }
    }

@keyframes sfEdgeA{
      0% { opacity: .20; transform: rotate(13deg) translateY(3%); }
      100% { opacity: var(--flame-edge); transform: rotate(17deg) translateY(-3%); }
    }

@keyframes sfEdgeB{
      0% { opacity: calc(var(--flame-edge) * .38); }
      100% { opacity: calc(var(--flame-edge) * .76); }
    }

@keyframes sfEdgeC{
      0% { opacity: .08; transform: rotate(-17deg) translateY(3%); }
      100% { opacity: .28; transform: rotate(-13deg) translateY(-5%); }
    }

@keyframes sfAuraBreath{
      0%   { transform: translate(-50%, -50%) scale(.94); opacity: .56; }
      47%  { transform: translate(-50%, -50%) scale(1.018); opacity: .78; }
      100% { transform: translate(-50%, -50%) scale(1.045); opacity: .67; }
    }

@keyframes sfHeat{
      0% { transform: translateX(-50%) translateY(4%) scaleX(.92); opacity: .20; }
      100% { transform: translateX(-50%) translateY(-8%) scaleX(1.08); opacity: .46; }
    }

@keyframes sfSpark{
      0%, 68% { opacity: 0; transform: translate3d(0,0,0) scale(.5); }
      70% { opacity: .8; }
      77% { opacity: .62; transform: translate3d(12px,-22px,0) scale(.9); }
      86% { opacity: .28; transform: translate3d(19px,-44px,0) scale(.6); }
      92%,100% { opacity: 0; transform: translate3d(23px,-62px,0) scale(.25); }
    }

/* HERO */

.sf-hero {min-height: auto;
      display: grid;
      place-items: center;
      overflow: hidden;
      text-align: center;
      padding: 88px 24px 48px;}

.sf-hero-content {position: relative;
      z-index: 4;
      display: grid;
      justify-items: center;
      max-width: 1000px;}

.sf-hero .sf-kicker {margin-bottom: clamp(22px, 4vh, 42px);}

.sf-hero-title {font-size: clamp(62px, 11.2vw, 158px);
      color: var(--cream);}

.sf-hero-title .italic {display: block;
      margin-top: .08em;
      font-style: italic;
      color: var(--champagne-2);
      text-shadow: 0 0 40px rgba(215,185,130,.08);}

.sf-hero-flame-wrap {position: absolute;
      z-index: -1;
      left: 50%;
      top: 48%;
      transform: translate(-50%, -50%);
      opacity: .34;
      filter: blur(.1px);}

.sf-hero-thesis {margin: clamp(26px, 4vh, 44px) auto 0;
      max-width: 610px;
      font-family: var(--display);
      font-size: clamp(20px, 2.2vw, 31px);
      line-height: 1.36;
      font-style: italic;
      color: rgba(244,234,220,.74);
      text-wrap: balance;}


/* ACT I */

.sf-story {padding: clamp(84px, 10vw, 150px) 0 clamp(96px, 12vw, 170px);}

.sf-story-grid {display: grid;
      grid-template-columns: minmax(0, .88fr) minmax(300px, 1.12fr);
      gap: clamp(34px, 5vw, 72px);
      align-items: start;}

.sf-story-heading {margin: 20px 0 28px;
      font-size: clamp(42px, 6vw, 78px);
      color: var(--cream);}

.sf-story-emphasis {margin: 34px 0 0;
      padding-left: 30px;
      border-left: 1px solid var(--line);
      font-family: var(--display);
      font-size: clamp(24px, 2.5vw, 34px);
      line-height: 1.4;
      color: var(--champagne-2);}

/* Full-screen declaration */

.sf-declaration {min-height: calc(var(--vh) * 145);
      background: #10090b;}

.sf-declaration-stage {position: sticky;
      top: 0;
      min-height: calc(var(--vh) * 100);
      display: grid;
      place-items: center;
      overflow: hidden;
      padding: 70px 24px;}

.sf-declaration-copy {text-align: center;
      width: min(1100px, 100%);}

.sf-declaration-big {font-family: var(--display);
      font-size: clamp(44px, 8.4vw, 120px);
      line-height: .93;
      letter-spacing: -.035em;
      color: var(--cream);
      text-wrap: balance;}

.sf-declaration-big .second {display: block;
      margin-top: .22em;
      font-style: italic;
      color: var(--champagne-2);}

.sf-choices {margin: clamp(34px, 5vh, 52px) auto 0;
      width: min(760px, 100%);
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px 50px;}

.sf-choice-line {display: flex;
      justify-content: center;
      gap: .45em;
      font-family: var(--display);
      font-size: clamp(20px, 2.1vw, 30px);
      color: rgba(244,234,220,.48);}

.sf-choice-line strong {color: var(--cream);
      font-weight: 500;}

.sf-choice-line span {color: var(--champagne); font-style: italic;}

/* ACT II history */

.sf-history {padding: clamp(96px, 12vw, 170px) 0;
      background:
        linear-gradient(180deg, #0d0c0c 0%, #151313 50%, #0e0c0d 100%);
      color: #e0dad3;
      overflow: hidden;}

.sf-history-year {position: absolute;
      z-index: 0;
      top: 5%;
      right: -2vw;
      font-family: var(--display);
      font-size: clamp(150px, 31vw, 500px);
      line-height: 1;
      color: rgba(235,226,217,.026);
      letter-spacing: -.07em;
      user-select: none;}

.sf-history .sf-inner {position: relative;
      z-index: 2;}

.sf-history-grid {display: grid;
      grid-template-columns: minmax(0, .8fr) minmax(340px, 1.1fr);
      gap: clamp(38px, 6vw, 86px);}

.sf-history-side {padding-top: 48px;}

.sf-history-title {margin: 22px 0 30px;
      font-size: clamp(48px, 7vw, 92px);
      color: #e7e0d9;}

.sf-history .sf-copy {color: rgba(231,224,217,.62);}

.sf-history-note {margin-top: 32px;
      font-size: 13.5px;
      line-height: 1.72;
      color: rgba(231,224,217,.35);
      max-width: 520px;}

.sf-whispers {display: grid;
      gap: 2px;
      padding: 40px 0;}

.sf-whisper {margin: 0;
      font-family: var(--display);
      font-size: clamp(34px, 5.4vw, 76px);
      line-height: 1.06;
      color: rgba(220,213,205,.24);
      transition:
        opacity 1s var(--ease-soft),
        filter 1s var(--ease-soft),
        transform 1s var(--ease-soft),
        color 1s var(--ease-soft);}

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

.sf-whisper.is-released {opacity: .07;
      filter: blur(9px);
      transform: translate3d(2vw, -4px, 0);
      color: rgba(220,213,205,.08);}

.sf-seed {margin-top: 58px;
      width: min(760px, 100%);
      font-family: var(--display);
      font-size: clamp(27px, 3.5vw, 46px);
      line-height: 1.25;
      color: rgba(244,234,220,.78);}

.sf-seed em {color: var(--champagne-2);}

.sf-history-ember {position: absolute;
      right: clamp(4vw, 10vw, 150px);
      bottom: 7%;
      width: clamp(130px, 16vw, 230px);
      opacity: .46;
      pointer-events: none;
      z-index: 1;}

.sf-history-ember .sf-flame {width: 100%;}

/* Nearby type catches a fraction of the flame warmth */

.sf-flame-lit {background: linear-gradient(
        90deg,
        var(--cream) 0%,
        var(--cream) 32%,
        var(--champagne-2) 49%,
        var(--cream) 66%,
        var(--cream) 100%
      );
      background-size: 220% 100%;
      background-position: 50% 0;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent !important;}


/* ACT III handoff */

.sf-handoff {min-height: calc(var(--vh) * 92);
      display: grid;
      place-items: center;
      overflow: hidden;
      background: linear-gradient(180deg, #0e0c0d 0%, #160c0f 100%);
      text-align: center;
      padding: 72px 24px;}

.sf-handoff-content {width: min(860px, 100%);}

.sf-handoff .sf-flame {margin: 0 auto clamp(20px, 3.5vh, 34px);
      --flame-scale: .48;
      opacity: .9;}

.sf-handoff-line {font-family: var(--display);
      font-size: clamp(40px, 7vw, 92px);
      line-height: 1;
      color: var(--cream);}

.sf-handoff-line + .sf-handoff-line {margin-top: .35em;
      font-style: italic;
      color: var(--champagne-2);}

/* ACT IV union */

.sf-union {min-height: calc(var(--vh) * 195);
      background: linear-gradient(180deg, #0c0709 0%, #160a0f 58%, #080506 100%);}


/* Discernment axis */


/* Final scene */

.sf-finale {min-height: calc(var(--vh) * 125);
      display: grid;
      place-items: center;
      text-align: center;
      padding: 88px 24px 54px;
      background: linear-gradient(180deg, #120a0d 0%, #160b0f 48%, #0e080a 100%);}

.sf-finale-content {width: min(880px, 100%);}

.sf-finale .sf-flame {width: clamp(180px, 25vw, 330px);
      margin: 0 auto 10px;
      --flame-scale: .82;}

.sf-finale-title {margin: 0;
      font-family: var(--display);
      font-size: clamp(48px, 7.4vw, 100px);
      line-height: .96;
      font-weight: 400;
      color: var(--cream);
      text-wrap: balance;}

.sf-finale-sub {margin: 30px auto 0;
      font-family: var(--display);
      font-size: clamp(21px, 2.5vw, 34px);
      line-height: 1.35;
      font-style: italic;
      color: var(--champagne-2);}

.sf-final-links {margin-top: 36px;
      display: flex;
      justify-content: center;
      gap: 30px;
      flex-wrap: wrap;}

.sf-final-links a {position: relative;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: .17em;
      font-size: 11px;
      color: rgba(244,234,220,.60);
      padding: 8px 0;}

.sf-final-links a::after {content: "";
      position: absolute;
      left: 50%;
      right: 50%;
      bottom: 2px;
      height: 1px;
      background: var(--champagne);
      transition: left .45s var(--ease-soft), right .45s var(--ease-soft);}

.sf-final-links a:hover::after,
.sf-final-links a:focus-visible::after {left: 0; right: 0;}

/* Focus */

:focus-visible {outline: 1px solid rgba(240,216,167,.7);
      outline-offset: 6px;}

/* Idle state */

body.sf-idle #sf-embers {opacity: .42;}
body.sf-idle .sf-flame {filter: drop-shadow(0 0 44px rgba(189,105,49,.34));}

/* Tablet */


/* Mobile */


/* =========================================================
   INTIMACY PASS
   Pulls the content closer together and reduces stage-like distance.
   ========================================================= */

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

.sf-reading {width: min(560px, 100%);}

.sf-copy {line-height: 1.72;}

.sf-copy + .sf-copy {margin-top: 1.05em;}

.sf-section + .sf-section {scroll-margin-top: 0;}

/* Keep the flame emotionally close to the text. */

/* Reduce giant-screen feeling without losing hierarchy. */

.sf-declaration-big {font-size: clamp(40px, 7vw, 92px);}

.sf-history-title {max-width: 760px;}

.sf-whispers {max-width: 900px;}

.sf-whisper {font-size: clamp(30px, 4.6vw, 62px);}

.sf-handoff-content {width: min(720px, 100%);}

.sf-handoff-line {font-size: clamp(36px, 5.8vw, 72px);}

/* Reflection becomes quieter and more private. */

/* Finale is closer and quieter. */

.sf-finale-content {width: min(740px, 100%);}

.sf-finale-sub {margin-top: 22px;}


/* =========================================================
   LEGIBILITY PASS
   Keeps editorial microtype refined without becoming tiny.
   ========================================================= */

.sf-brand {font-size: clamp(11px, .82vw, 13px);}

.sf-topbar-link {font-size: clamp(10.5px, .72vw, 12px);}

.sf-kicker {font-size: clamp(11.5px, .76vw, 13px);
  letter-spacing: .24em;}

.sf-act {font-size: clamp(10.5px, .72vw, 12px);
  letter-spacing: .20em;}

.sf-history-note {font-size: clamp(13px, 1vw, 14.5px);
  color: rgba(231,224,217,.48);}

.sf-final-links a {font-size: clamp(10.5px, .75vw, 12px);}


/* =========================================================
   PRESENCE ENGINE
   Movement creates disturbance. Stillness creates clarity.
   ========================================================= */

body.sf-disturbed .sf-grain {opacity: .06;}

body.sf-disturbed #sf-embers {opacity: .88;}
body.sf-present .sf-grain {opacity: .018;}

body.sf-present #sf-embers {opacity: .46;}
/* History feels compressed, without literal historical decoration. */

.sf-history {position: relative;}

.sf-history::after {content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 10vw 0 12vw rgba(0,0,0,.30),
    inset -10vw 0 12vw rgba(0,0,0,.30);
  z-index: 1;}

.sf-history .sf-inner {width: min(930px, calc(100% - 56px));}

/* Text discovered by illumination. */

.sf-light-reveal {position: relative;
  z-index: 4;
  width: min(760px, 100%);
  margin: 72px auto 0;
  min-height: 160px;
  display: grid;
  place-items: center;
  text-align: center;
  --lr-x: 50%;
  --lr-y: 50%;}

.sf-light-reveal span {font-family: var(--display);
  font-size: clamp(29px, 4vw, 54px);
  line-height: 1.08;
  color: rgba(7, 5, 6, .94);
  transition: filter .45s ease, color .45s ease;}

.sf-light-reveal.is-hover span {color: transparent;
  background:
    radial-gradient(
      210px 165px at var(--lr-x) var(--lr-y),
      rgba(255,247,226,1) 0%,
      rgba(240,215,170,.94) 24%,
      rgba(214,175,114,.54) 50%,
      rgba(173,120,88,.16) 70%,
      transparent 100%
    );
  -webkit-background-clip: text;
  background-clip: text;
  filter:
    drop-shadow(0 0 9px rgba(255, 233, 192, .16))
    drop-shadow(0 0 24px rgba(220, 168, 96, .10));}


/* =========================================================
   FINALE FIRE FIELD
   A second, louder particle layer born from the final flame.
   ========================================================= */

.sf-finale {position: relative;
  overflow: hidden;
  isolation: isolate;}

.sf-finale-content {position: relative;
  z-index: 6;}

.sf-finale-burst-field {position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;}

.sf-finale-burst-back,
.sf-finale-burst-front {position: absolute;
  inset: 0;
  pointer-events: none;}

.sf-finale-burst-back {z-index: 1;
  opacity: .78;
  filter: blur(.15px);}

.sf-finale-burst-front {z-index: 7;}

.sf-finale-big-ember,
.sf-finale-big-spark {position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  will-change: transform, opacity, filter;}

.sf-finale-big-ember {width: var(--p-size, 5px);
  height: var(--p-size, 5px);
  margin-left: calc(var(--p-size, 5px) * -.5);
  margin-top: calc(var(--p-size, 5px) * -.5);
  border-radius: 50%;
  background:
    radial-gradient(circle,
      rgba(255,255,243,1) 0%,
      rgba(255,239,197,.98) 14%,
      rgba(255,201,116,.94) 34%,
      rgba(220,119,63,.80) 60%,
      rgba(117,43,37,.28) 78%,
      transparent 100%);
  box-shadow:
    0 0 calc(var(--p-size, 5px) * .85) rgba(255,246,218,.98),
    0 0 calc(var(--p-size, 5px) * 2.6) rgba(255,197,109,.78),
    0 0 calc(var(--p-size, 5px) * 6.2) rgba(194,84,51,.44);
  animation: sfFinaleEmberFlight var(--p-life, 1800ms) cubic-bezier(.12,.62,.16,1) forwards;}

.sf-finale-big-ember.is-hot {background:
    radial-gradient(circle,
      #fffef5 0%,
      #fff4c9 12%,
      #ffd889 30%,
      #f29c56 54%,
      rgba(139,49,38,.52) 76%,
      transparent 100%);
  box-shadow:
    0 0 calc(var(--p-size, 5px) * 1.2) rgba(255,252,229,1),
    0 0 calc(var(--p-size, 5px) * 3.4) rgba(255,211,132,.92),
    0 0 calc(var(--p-size, 5px) * 8) rgba(224,103,57,.52);}

.sf-finale-big-ember.is-ash {filter: saturate(.68);
  opacity: .72;}

.sf-finale-big-spark {width: var(--s-length, 48px);
  height: var(--s-thickness, 2px);
  transform-origin: 0 50%;
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      rgba(255,255,246,1) 0%,
      rgba(255,240,198,1) 10%,
      rgba(255,202,119,.95) 34%,
      rgba(230,124,65,.68) 60%,
      rgba(171,62,43,.24) 82%,
      transparent 100%);
  box-shadow:
    0 0 4px rgba(255,248,220,.95),
    0 0 12px rgba(255,209,131,.76),
    0 0 28px rgba(217,101,56,.40);
  animation: sfFinaleSparkFlight var(--p-life, 1200ms) cubic-bezier(.10,.72,.18,1) forwards;}

.sf-finale-big-spark.is-comet {height: calc(var(--s-thickness, 2px) * 1.35);
  filter: brightness(1.16);
  box-shadow:
    0 0 5px rgba(255,252,233,1),
    0 0 16px rgba(255,221,153,.92),
    0 0 40px rgba(234,126,67,.55);}

.sf-finale-big-spark::before {content: "";
  position: absolute;
  left: -2px;
  top: 50%;
  width: calc(var(--s-thickness, 2px) * 3.6);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #fffbe9;
  box-shadow:
    0 0 8px rgba(255,250,224,.96),
    0 0 18px rgba(255,215,143,.82);}

@keyframes sfFinaleEmberFlight{
  0% {
    opacity: 0;
    transform:
      translate3d(var(--x0, 0px), var(--y0, 0px), 0)
      scale(.28);
  }
  7% {
    opacity: var(--p-opacity, .96);
  }
  38% {
    opacity: calc(var(--p-opacity, .96) * .92);
    transform:
      translate3d(var(--x1, 120px), var(--y1, -90px), 0)
      scale(1.05);
  }
  72% {
    opacity: calc(var(--p-opacity, .96) * .56);
    transform:
      translate3d(var(--x2, 260px), var(--y2, -140px), 0)
      scale(.72);
  }
  100% {
    opacity: 0;
    transform:
      translate3d(var(--x3, 420px), var(--y3, -180px), 0)
      scale(.12);
  }
}

@keyframes sfFinaleSparkFlight{
  0% {
    opacity: 0;
    transform:
      translate3d(var(--x0, 0px), var(--y0, 0px), 0)
      rotate(var(--s-angle, -25deg))
      scaleX(.22);
  }
  8% {
    opacity: var(--p-opacity, .98);
  }
  42% {
    opacity: calc(var(--p-opacity, .98) * .94);
    transform:
      translate3d(var(--x1, 130px), var(--y1, -90px), 0)
      rotate(var(--s-angle, -25deg))
      scaleX(.82);
  }
  76% {
    opacity: calc(var(--p-opacity, .98) * .42);
    transform:
      translate3d(var(--x2, 310px), var(--y2, -150px), 0)
      rotate(var(--s-angle, -25deg))
      scaleX(1);
  }
  100% {
    opacity: 0;
    transform:
      translate3d(var(--x3, 500px), var(--y3, -190px), 0)
      rotate(var(--s-angle, -25deg))
      scaleX(.72);
  }
}

/* The final flame visibly surges whenever a major spark burst fires. */

.sf-finale.is-flaring .sf-flame {filter:
    brightness(1.24)
    drop-shadow(0 0 26px rgba(255,228,171,.40))
    drop-shadow(0 0 82px rgba(211,105,58,.38));}

.sf-finale.is-flaring .sf-flame-aura {opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1.28);}

.sf-finale.is-flaring::before {content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 28%;
  width: 40vmax;
  height: 40vmax;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle,
      rgba(255,227,169,.16) 0%,
      rgba(219,134,74,.08) 30%,
      rgba(115,46,43,.035) 55%,
      transparent 72%);
  filter: blur(22px);
  animation: sfFinaleFlare .95s var(--ease-soft) both;
  pointer-events: none;}

@keyframes sfFinaleFlare{
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
  26% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); }
}


/* Finale becomes deliberately small after the larger union climax. */

.sf-finale .sf-flame {width: clamp(125px, 15vw, 205px);}

.sf-finale-title {font-size: clamp(44px, 6.2vw, 82px);}


/* Inheritance → flame handoff */

.sf-handoff-burn {max-width: 760px;
  margin-inline: auto;
  font-size: clamp(34px, 5vw, 66px);
  line-height: 1.06;
  font-style: italic;
  color: rgba(244,234,220,.86);
  text-shadow:
    0 0 20px rgba(224,174,105,.05),
    0 0 54px rgba(153,70,44,.04);}


/* =========================================================
   ACT I · EMBER RELIQUARY
   ========================================================= */

.sf-story {position: relative;
  overflow: clip;
}

.sf-story-grid {grid-template-columns: minmax(365px, .92fr) minmax(0, 1.08fr);
  gap: clamp(54px, 6vw, 96px);
  align-items: start;}

/* Incense smoke.
   Narrow translucent ribbons rather than opaque fire smoke. */

/* A faint amber catch where smoke passes over the heated opening. */

.sf-story-heading {margin-top: 18px;}

.sf-story-emphasis {margin-top: 38px;}

/* Keep the cursor's ambient illumination, but remove the tiny lantern
   when it sits directly over the prose. */

.sf-lamp-cursor.is-reading {opacity: 0 !important;}

/* ---------------------------------------------------------
   Reliquary motion
   --------------------------------------------------------- */


/* Incense-like rise: it coils, thins, drifts, and vanishes.
   The long periods of low opacity keep it from becoming fog. */


/* =========================================================
   ACT I · TEXT-ONLY COMPOSITION
   ========================================================= */

.sf-story {background: linear-gradient(180deg, #120b0d 0%, #170c10 54%, #10090b 100%);}

.sf-story-grid {display: block;
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;}

.sf-reading-centered {width: min(980px, 100%);
  margin-inline: auto;
  text-align: center;
  padding: clamp(80px, 10vw, 150px) 0 clamp(96px, 11vw, 170px);}

.sf-reading-centered .sf-kicker {justify-content: center;}

.sf-reading-centered .sf-story-heading {max-width: 900px;
  margin: 18px auto 0;
  text-wrap: balance;}

.sf-reading-centered .sf-story-emphasis {max-width: 900px;
  margin: clamp(42px, 5vw, 66px) auto 0;
  padding-left: 0;
  border-left: 0;
  text-align: center;}

.sf-reading-centered .sf-story-emphasis::before {content: "";
  display: block;
  width: 72px;
  height: 1px;
  margin: 0 auto 28px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(231,197,136,.58),
    transparent
  );}

.sf-reading-centered .sf-story-emphasis p {margin-inline: auto;}


/* =========================================================
   YOUR FLAME · LAMP-LIT WORD / FLAME EXPANSION
   ========================================================= */

/* When the lamp enters one circle, the other two recede slightly. */

/* Default label remains elegant and quiet. */

/* The word becomes the cinematic event, similar to the attached
   DISCERNMENT treatment. It rises into the centre and expands. */

/* The candle point grows into a real flame behind the enlarged word. */

/* The original dot disappears completely once ignited. */

/* More light catches the ring as the flame grows, but the ring remains
   secondary to the typography. */

/* Integration's larger ring should not over-expand relative to the others. */

/* Keyboard focus gets the same visual event. */

/* Mobile/touch: keep the labels readable without allowing giant words
   to run off the viewport. Clicking still lights the mini flame. */

/* =========================================================
   ACT I · TIGHTER READING COLUMN
   ========================================================= */

.sf-reading-centered > .sf-copy {width: min(680px, 88vw);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  text-wrap: pretty;}

.sf-reading-centered > .sf-copy + .sf-copy {margin-top: 1.45em;}


/* =========================================================
   ACT I · HEADING / COPY BREATHING ROOM
   ========================================================= */

.sf-reading-centered .sf-story-heading {margin-bottom: clamp(54px, 5.5vw, 84px);}


/* =========================================================
   SIGNATURE FLAME · PHYSICAL REALISM PASS
   The flame remains ethereal, but its movement now behaves
   more like heat and combustion than a repeating animation.
   ========================================================= */

.sf-flame {--real-outer-x: 0px;
  --real-outer-y: 0px;
  --real-outer-rotate: 0deg;
  --real-outer-skew: 0deg;
  --real-outer-width: 1;
  --real-outer-height: 1;

  --real-membrane-x: 0px;
  --real-membrane-y: 0px;
  --real-membrane-rotate: 0deg;
  --real-membrane-width: 1;
  --real-membrane-height: 1;

  --real-core-x: 0px;
  --real-core-y: 0px;
  --real-core-rotate: 0deg;
  --real-core-width: 1;
  --real-core-height: 1;

  --real-tongue-a-x: 0px;
  --real-tongue-a-y: 0px;
  --real-tongue-a-rotate: 0deg;
  --real-tongue-a-scale: 1;
  --real-tongue-a-opacity: .58;

  --real-tongue-b-x: 0px;
  --real-tongue-b-y: 0px;
  --real-tongue-b-rotate: 0deg;
  --real-tongue-b-scale: 1;
  --real-tongue-b-opacity: .50;

  --real-ribbon-x: 0px;
  --real-ribbon-rotate: -7deg;

  --real-heat-x: 0px;
  --real-heat-y: 0px;
  --real-heat-skew: 0deg;
  --real-heat-width: 1;

  --real-aura-lag: 1;
  --real-hot-lag: 1;
  --real-pool-width: 1;}

/* The base stays visually anchored while the upper silhouette wanders. */

.sf-flame-outer {animation: none !important;
  transform:
    translateX(-50%)
    translate3d(
      calc(var(--tip-x) + var(--real-outer-x)),
      calc(var(--tip-y) + var(--real-outer-y)),
      0
    )
    scaleX(var(--outer-scale-x))
    scaleX(var(--real-outer-width))
    scaleY(var(--flicker-stretch))
    scaleY(var(--real-outer-height))
    rotate(var(--flicker-sway))
    rotate(var(--real-outer-rotate))
    skewX(var(--real-outer-skew));
  transform-origin: 50% 94%;}

/* The transparent membrane has more inertia than the visible flame. */

.sf-flame-membrane {animation: none !important;
  transform:
    translateX(-50%)
    translate3d(
      calc(var(--tip-x) * .18 + var(--real-membrane-x)),
      calc(var(--tip-y) * .10 + var(--real-membrane-y)),
      0
    )
    scaleX(var(--real-membrane-width))
    scaleY(var(--real-membrane-height))
    rotate(var(--real-membrane-rotate));
  transform-origin: 50% 93%;}

/* Inner combustion is deliberately independent of the outside shell. */

.sf-flame-core {transform:
    translateX(-50%)
    translate3d(
      calc(var(--tip-x) * .10 + var(--real-core-x)),
      calc(var(--tip-y) * .05 + var(--real-core-y)),
      0
    )
    scale(var(--core-scale))
    scaleX(var(--real-core-width))
    scaleY(var(--real-core-height))
    rotate(var(--real-core-rotate));
  transform-origin: 50% 93%;}

/* Remove the short repeating tongue loops. Each tongue now has its own
   procedural movement and can briefly separate from the main body. */

.sf-flame-tongue-a {animation: none !important;
  opacity: var(--real-tongue-a-opacity);
  transform:
    translate3d(var(--real-tongue-a-x), var(--real-tongue-a-y), 0)
    scale(var(--real-tongue-a-scale))
    rotate(var(--real-tongue-a-rotate));
  transform-origin: 50% 92%;
  will-change: transform, opacity;}

.sf-flame-tongue-b {animation: none !important;
  opacity: var(--real-tongue-b-opacity);
  transform:
    translate3d(var(--real-tongue-b-x), var(--real-tongue-b-y), 0)
    scale(var(--real-tongue-b-scale))
    rotate(var(--real-tongue-b-rotate));
  transform-origin: 50% 94%;
  will-change: transform, opacity;}

.sf-flame-ribbon {transform:
    translateX(-50%)
    translate3d(var(--real-ribbon-x), 0, 0)
    rotate(var(--real-ribbon-rotate));
  transform-origin: 50% 92%;}

/* Glow does not react instantly. It trails the flame like residual heat. */

.sf-flame-aura {animation: none !important;
  transform:
    translate(-50%, -50%)
    scale(var(--real-aura-lag));
  transition: none !important;
  will-change: transform, opacity;}

.sf-flame-live-glow {transform:
    translate(-50%, -50%)
    scale(var(--flicker-glow))
    scale(var(--real-aura-lag));}

.sf-flame-hot-glow {transform:
    translate(-50%, -50%)
    scale(var(--flicker-glow))
    scale(var(--real-hot-lag));}

/* The source pool breathes less than the upper flame, another important
   cue that the combustion is attached to a fixed source. */

.sf-flame-pool {transform:
    translateX(-50%)
    scaleX(var(--real-pool-width));
  transform-origin: 50% 50%;}

/* Heat distortion. This is intentionally almost invisible until the eye
   notices the background bending above the flame. */

.sf-flame-heat {top: -13%;
  width: 38%;
  height: 32%;
  opacity: .52;
  animation: none !important;
  transform:
    translateX(-50%)
    translate3d(var(--real-heat-x), var(--real-heat-y), 0)
    scaleX(var(--real-heat-width))
    skewX(var(--real-heat-skew));
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,244,218,.012) 24%,
      rgba(255,240,205,.045) 48%,
      rgba(255,244,218,.012) 72%,
      transparent 100%
    );
  backdrop-filter: blur(1.35px) saturate(1.035);
  -webkit-backdrop-filter: blur(1.35px) saturate(1.035);
  filter: blur(2.6px);
  clip-path: polygon(
    34% 100%, 22% 79%, 31% 58%, 22% 36%,
    38% 11%, 53% 0%, 70% 13%, 78% 36%,
    68% 58%, 80% 79%, 65% 100%
  );
  will-change: transform, opacity;}

.sf-flame-heat::before,
.sf-flame-heat::after {content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 46%;
  height: 94%;
  border-radius: 48% 52% 42% 58%;
  border-left: 1px solid rgba(255,240,211,.035);
  border-right: 1px solid rgba(214,163,107,.022);
  transform-origin: 50% 100%;
  filter: blur(1.8px);}

.sf-flame-heat::before {transform: translateX(-72%) rotate(-8deg) scaleX(.75);}

.sf-flame-heat::after {transform: translateX(-28%) rotate(9deg) scaleX(.62);
  opacity: .72;}

/* A nearly imperceptible cooler foot gives the flame more plausible
   temperature layering without changing the page's warm palette. */

.sf-flame-source::before {content: "";
  position: absolute;
  left: 50%;
  top: -9px;
  width: 8px;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 50% 50% 42% 42%;
  background:
    radial-gradient(
      ellipse at 50% 78%,
      rgba(227,224,236,.32) 0 10%,
      rgba(157,147,181,.16) 27%,
      rgba(111,82,126,.06) 52%,
      transparent 76%
    );
  filter: blur(.55px);
  opacity: .28;
  z-index: -1;}

/* Rare natural event: the flame forks for a fraction of a second. */

.sf-flame.is-real-split .sf-flame-tongue-a {opacity: .82;
  transform:
    translate3d(
      calc(var(--real-tongue-a-x) - 8px),
      calc(var(--real-tongue-a-y) - 4px),
      0
    )
    scale(calc(var(--real-tongue-a-scale) * 1.10))
    rotate(calc(var(--real-tongue-a-rotate) - 7deg));}

.sf-flame.is-real-split .sf-flame-tongue-b {opacity: .78;
  transform:
    translate3d(
      calc(var(--real-tongue-b-x) + 9px),
      calc(var(--real-tongue-b-y) - 7px),
      0
    )
    scale(calc(var(--real-tongue-b-scale) * 1.16))
    rotate(calc(var(--real-tongue-b-rotate) + 8deg));}

.sf-flame.is-real-split .sf-flame-outer {filter: saturate(1.04) brightness(1.025);}

/* Rare flare: narrow, bright and upward rather than simply "bigger". */

.sf-flame.is-real-flare .sf-flame-outer {filter: saturate(1.07) brightness(1.10);}

.sf-flame.is-real-flare .sf-flame-core {filter: blur(.12px) brightness(1.18);
  opacity: 1;}

.sf-flame.is-real-flare .sf-flame-hot-glow {opacity: .94;}

.sf-flame.is-real-flare .sf-flame-source {box-shadow:
    0 0 9px rgba(255,245,219,.98),
    0 0 24px rgba(230,171,94,.76),
    0 0 58px rgba(143,53,43,.48);}

/* A brief air current bends the top while the base remains attached. */

.sf-flame.is-real-gust-left .sf-flame-outer {transform:
    translateX(-50%)
    translate3d(
      calc(var(--tip-x) + var(--real-outer-x) - 7px),
      calc(var(--tip-y) + var(--real-outer-y)),
      0
    )
    scaleX(var(--outer-scale-x))
    scaleX(var(--real-outer-width))
    scaleY(var(--flicker-stretch))
    scaleY(var(--real-outer-height))
    rotate(calc(var(--flicker-sway) - 3.5deg))
    rotate(var(--real-outer-rotate))
    skewX(calc(var(--real-outer-skew) - 4deg));}

.sf-flame.is-real-gust-right .sf-flame-outer {transform:
    translateX(-50%)
    translate3d(
      calc(var(--tip-x) + var(--real-outer-x) + 7px),
      calc(var(--tip-y) + var(--real-outer-y)),
      0
    )
    scaleX(var(--outer-scale-x))
    scaleX(var(--real-outer-width))
    scaleY(var(--flicker-stretch))
    scaleY(var(--real-outer-height))
    rotate(calc(var(--flicker-sway) + 3.5deg))
    rotate(var(--real-outer-rotate))
    skewX(calc(var(--real-outer-skew) + 4deg));}

/* Tip ember created only during rare flare events. */


/* =========================================================
   ECLIPSE TYPOGRAPHY · RECENTERED WITHIN SPHERE
   ========================================================= */

/* =========================================================
   UNION TITLE · PRESERVE AFTER COLLISION
   Once the spheres merge, keep the line readable by lifting
   it above the eclipse instead of letting the sphere swallow it.
   ========================================================= */

/* Give the sphere slightly more vertical breathing room under the title. */

/* Mobile: raise the title, but keep the hierarchy compact. */

html,
body {max-width: 100%;
  overflow-x: clip;}

@supports (height: 100svh){
:root {--vh: 1svh;}
}


/* Very small phones: 320–360px */


/* =========================================================
   SIGNATURE FLAME · ORIGINAL PLUS
   Preserve the original multi-layer flame exactly.
   Only the two exterior silhouettes are converted from
   polygon clipping to continuous curved SVG masks.
   ========================================================= */

.sf-flame-membrane {clip-path: none !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M%2053.000%200.000%20C%2055.760%20-0.720,%2061.480%209.000,%2064.000%2012.000%20C%2066.520%2015.000,%2071.000%2021.400,%2074.000%2025.000%20C%2077.000%2028.600,%2086.960%2037.800,%2089.000%2042.000%20C%2091.040%2046.200,%2091.960%2055.680,%2091.000%2060.000%20C%2090.040%2064.320,%2083.880%2074.160,%2081.000%2078.000%20C%2078.120%2081.840,%2070.840%2089.360,%2067.000%2092.000%20C%2063.160%2094.640,%2053.200%2099.760,%2049.000%20100.000%20C%2044.800%20100.240,%2035.720%2096.160,%2032.000%2094.000%20C%2028.280%2091.840,%2020.640%2085.600,%2018.000%2082.000%20C%2015.360%2078.400,%2010.360%2068.440,%2010.000%2064.000%20C%209.640%2059.560,%2012.960%2049.200,%2015.000%2045.000%20C%2017.040%2040.800,%2023.880%2032.240,%2027.000%2029.000%20C%2030.120%2025.760,%2037.880%2021.480,%2041.000%2018.000%20C%2044.120%2014.520,%2050.240%200.720,%2053.000%200.000%20Z%22%20fill=%22white%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M%2053.000%200.000%20C%2055.760%20-0.720,%2061.480%209.000,%2064.000%2012.000%20C%2066.520%2015.000,%2071.000%2021.400,%2074.000%2025.000%20C%2077.000%2028.600,%2086.960%2037.800,%2089.000%2042.000%20C%2091.040%2046.200,%2091.960%2055.680,%2091.000%2060.000%20C%2090.040%2064.320,%2083.880%2074.160,%2081.000%2078.000%20C%2078.120%2081.840,%2070.840%2089.360,%2067.000%2092.000%20C%2063.160%2094.640,%2053.200%2099.760,%2049.000%20100.000%20C%2044.800%20100.240,%2035.720%2096.160,%2032.000%2094.000%20C%2028.280%2091.840,%2020.640%2085.600,%2018.000%2082.000%20C%2015.360%2078.400,%2010.360%2068.440,%2010.000%2064.000%20C%209.640%2059.560,%2012.960%2049.200,%2015.000%2045.000%20C%2017.040%2040.800,%2023.880%2032.240,%2027.000%2029.000%20C%2030.120%2025.760,%2037.880%2021.480,%2041.000%2018.000%20C%2044.120%2014.520,%2050.240%200.720,%2053.000%200.000%20Z%22%20fill=%22white%22/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  /* Keep the original membrane treatment. */
  filter: none;}

.sf-flame-outer {clip-path: none !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M%2054.000%200.000%20C%2056.333%200.000,%2066.227%2012.293,%2068.000%2015.000%20C%2069.773%2017.707,%2071.320%2026.387,%2073.000%2029.000%20C%2074.680%2031.613,%2084.133%2040.293,%2086.000%2043.000%20C%2087.867%2045.707,%2093.280%2054.827,%2093.000%2058.000%20C%2092.720%2061.173,%2085.333%2073.920,%2083.000%2077.000%20C%2080.667%2080.080,%2070.987%2088.853,%2068.000%2091.000%20C%2065.013%2093.147,%2054.453%2099.720,%2051.000%20100.000%20C%2047.547%20100.280,%2034.267%2095.773,%2031.000%2094.000%20C%2027.733%2092.227,%2018.053%2083.893,%2016.000%2081.000%20C%2013.947%2078.107,%209.000%2066.547,%209.000%2063.000%20C%209.000%2059.453,%2013.760%2046.080,%2016.000%2043.000%20C%2018.240%2039.920,%2030.480%2032.613,%2033.000%2030.000%20C%2035.520%2027.387,%2041.040%2017.800,%2043.000%2015.000%20C%2044.960%2012.200,%2051.667%200.000,%2054.000%200.000%20Z%22%20fill=%22white%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20100%20100%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M%2054.000%200.000%20C%2056.333%200.000,%2066.227%2012.293,%2068.000%2015.000%20C%2069.773%2017.707,%2071.320%2026.387,%2073.000%2029.000%20C%2074.680%2031.613,%2084.133%2040.293,%2086.000%2043.000%20C%2087.867%2045.707,%2093.280%2054.827,%2093.000%2058.000%20C%2092.720%2061.173,%2085.333%2073.920,%2083.000%2077.000%20C%2080.667%2080.080,%2070.987%2088.853,%2068.000%2091.000%20C%2065.013%2093.147,%2054.453%2099.720,%2051.000%20100.000%20C%2047.547%20100.280,%2034.267%2095.773,%2031.000%2094.000%20C%2027.733%2092.227,%2018.053%2083.893,%2016.000%2081.000%20C%2013.947%2078.107,%209.000%2066.547,%209.000%2063.000%20C%209.000%2059.453,%2013.760%2046.080,%2016.000%2043.000%20C%2018.240%2039.920,%2030.480%2032.613,%2033.000%2030.000%20C%2035.520%2027.387,%2041.040%2017.800,%2043.000%2015.000%20C%2044.960%2012.200,%2051.667%200.000,%2054.000%200.000%20Z%22%20fill=%22white%22/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  /* Preserve the original colour physics and procedural realism. */
  filter: saturate(calc(.72 + var(--flame-warmth) * .32));}

/* Everything inside the flame intentionally remains unchanged:
   tongue A, tongue B, core, ribbon, edge catches, source point,
   heat shimmer, rare splits, flares and procedural movement. */

/* =========================================================
   ACT II · METAPHOR TURN
   ========================================================= */

.sf-history-metaphor {position: relative;
  margin-top: clamp(38px, 5vw, 64px);
  padding-top: clamp(30px, 4vw, 44px);
  max-width: 620px;
  border-top: 1px solid rgba(239,210,154,.13);}

.sf-history-metaphor-label {margin-bottom: 18px;
  color: rgba(239,210,154,.62);
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .28em;}

.sf-history-metaphor p {margin: 0;
  max-width: 590px;
  color: rgba(244,234,220,.62);
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.72;}

.sf-history-metaphor h3 {margin: clamp(34px, 4vw, 50px) 0 14px;
  max-width: 570px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 4.5vw, 54px);
  line-height: .98;
  color: var(--cream);}

.sf-history-metaphor .sf-history-metaphor-answer {max-width: 570px;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(23px, 2.7vw, 34px);
  line-height: 1.18;
  color: var(--champagne-2);}


/* =========================================================
   HERO · DESKTOP REFINEMENT
   Match the intended elegant title-case hero treatment.
   ========================================================= */


/* Mobile-specific supporting elements.
   The complete mobile narrative is defined in the responsive stylesheet. */

.sf-mobile-memory-line {display: none;}


/* Keep the Hermit lantern above every isolated cinematic layer,
   including the finale's foreground sparks and Return Home link. */

.sf-lamp-cursor {z-index: 10000 !important;}

.sf-lamp-cursor.is-over-final-link {opacity: 1 !important;
  visibility: visible !important;}

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

body > .sf-lamp-cursor {position: fixed !important;
  z-index: 10000 !important;
  pointer-events: none !important;
  contain: layout style paint;
  isolation: isolate;}

body > .sf-lamp-cursor.is-visible,
body > .sf-lamp-cursor.is-over-final-link {display: block !important;
  opacity: 1 !important;
  visibility: visible !important;}


.sf-finale-seen {margin: 22px auto 0;
  font-family: var(--display);
  font-size: clamp(30px, 3.7vw, 52px);
  line-height: 1.08;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -.02em;
  color: var(--cream);
  text-wrap: balance;}


/* The large mouse-following radial light was one of the most expensive
   full-viewport repaints. The lantern remains as the desktop cursor. */

/* Keep film grain as a static texture instead of animating a huge
   fixed SVG turbulence layer over the entire viewport. */

.sf-grain {animation: none !important;
  transform: none !important;
  opacity: .022 !important;}

/* JavaScript marks only flames near the viewport as active.
   Off-screen flame keyframes are fully paused. */

.sf-flame:not(.sf-perf-active),
.sf-flame:not(.sf-perf-active) * {animation-play-state: paused !important;}

.sf-flame:not(.sf-perf-active) {will-change: auto !important;}

.sf-flame:not(.sf-perf-active) * {will-change: auto !important;}

/* The lantern is tiny; keep the object but simplify its compositing. */

body > .sf-lamp-cursor svg {filter: drop-shadow(0 2px 5px rgba(0,0,0,.46)) !important;}

body > .sf-lamp-cursor .sf-lamp-halo {mix-blend-mode: normal !important;
  opacity: .72 !important;}

body > .sf-lamp-cursor .sf-lamp-ray {mix-blend-mode: normal !important;
  filter: none !important;
  opacity: .26 !important;}

/* Mobile is deliberately calmer. The background remains atmospheric,
   but continuous canvas/grain and costly distortion are removed. */


/* When the tab is not visible, CSS animation should stop too. */

body.sf-tab-hidden .sf-page *,
body.sf-tab-hidden .sf-page *::before,
body.sf-tab-hidden .sf-page *::after {animation-play-state: paused !important;}

.sf-section:not(.sf-perf-section-active) *,
.sf-section:not(.sf-perf-section-active) *::before,
.sf-section:not(.sf-perf-section-active) *::after {animation-play-state: paused !important;}

.sf-section:not(.sf-perf-section-active) [style*="will-change"] {will-change: auto !important;}

/* Remove paint containment so the glow is not clipped into a box. */

body > .sf-lamp-cursor {contain: layout style !important;
  isolation: isolate;
  overflow: visible !important;}

/* Replace the previous circular read with a softer lighting system. */

body > .sf-lamp-cursor::before,
body > .sf-lamp-cursor::after {content: "";
  position: absolute;
  left: 50%;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transform-origin: center;
  transition:
    opacity .2s ease,
    transform .2s ease;
  will-change: opacity, transform;}

/* Outer atmosphere + directional spill.
   Taller than it is wide, slightly lower than centre, and with no hard edge. */

body > .sf-lamp-cursor::before {top: 57%;
  width: 148px;
  height: 184px;
  z-index: 0;
  transform: translate(-50%, -50%) scale(.94);
  background:
    radial-gradient(
      ellipse 42% 36% at 50% 34%,
      rgba(255, 242, 204, .13) 0%,
      rgba(252, 218, 154, .08) 34%,
      rgba(244, 183, 101, .03) 56%,
      rgba(244, 183, 101, 0) 76%
    ),
    radial-gradient(
      ellipse 60% 70% at 50% 57%,
      rgba(242, 188, 112, .12) 0%,
      rgba(215, 141, 78, .07) 28%,
      rgba(150, 78, 56, .028) 54%,
      rgba(150, 78, 56, 0) 80%
    ),
    radial-gradient(
      ellipse 50% 58% at 50% 77%,
      rgba(255, 213, 142, .085) 0%,
      rgba(221, 156, 96, .05) 30%,
      rgba(161, 87, 62, .022) 58%,
      rgba(161, 87, 62, 0) 82%
    );}

/* Inner bloom around the lantern glass. */

body > .sf-lamp-cursor::after {top: 50%;
  width: 76px;
  height: 92px;
  z-index: 1;
  transform: translate(-50%, -50%) scale(.96);
  background:
    radial-gradient(
      ellipse 36% 28% at 50% 34%,
      rgba(255, 249, 228, .46) 0%,
      rgba(255, 234, 185, .30) 33%,
      rgba(242, 191, 114, .13) 55%,
      rgba(242, 191, 114, 0) 76%
    ),
    radial-gradient(
      ellipse 56% 62% at 50% 55%,
      rgba(255, 228, 168, .22) 0%,
      rgba(239, 188, 110, .12) 37%,
      rgba(206, 138, 82, .05) 58%,
      rgba(206, 138, 82, 0) 78%
    );}

body > .sf-lamp-cursor svg {position: relative;
  z-index: 2;}

/* Subtle default presence. */

body > .sf-lamp-cursor.is-visible::before {opacity: .42;}

body > .sf-lamp-cursor.is-visible::after {opacity: .66;}

/* Reading text warms and opens the spill slightly. */

body > .sf-lamp-cursor.is-reading::before {opacity: .58;
  transform: translate(-50%, -50%) scale(1.02);}

body > .sf-lamp-cursor.is-reading::after {opacity: .8;
  transform: translate(-50%, -50%) scale(1.05);}

/* RETURN HOME receives the strongest state. */

body > .sf-lamp-cursor.is-over-final-link::before {opacity: .62;
  transform: translate(-50%, -50%) scale(1.03);}

body > .sf-lamp-cursor.is-over-final-link::after {opacity: .84;
  transform: translate(-50%, -50%) scale(1.06);}

/* Slight warm highlight on the lantern itself, without extra animation. */

body > .sf-lamp-cursor.is-visible svg {filter: drop-shadow(0 2px 5px rgba(0,0,0,.42)) drop-shadow(0 0 7px rgba(243,191,108,.14)) !important;}


/* Hidden by default on desktop. */

.sf-mobile-history-threshold,
.sf-mobile-history-bridge,
.sf-mobile-finale-prelude {display: none;}


.sf-chapter-dot[data-index="0"] {top: 4% !important;}

.sf-chapter-dot[data-index="1"] {top: 34% !important;}

.sf-chapter-dot[data-index="2"] {top: 64% !important;}

.sf-chapter-dot[data-index="3"] {top: 96% !important;}

.sf-union.sf-triad4 {min-height: calc(var(--vh) * 178) !important;
  padding: 0 !important;
  overflow: clip !important;
  position: relative;
  background:
    linear-gradient(180deg, #0c0709 0%, #160a0f 58%, #080506 100%) !important;}

.sf-triad4-stage {position: sticky;
  top: 0;
  width: 100%;
  min-height: calc(var(--vh) * 100);
  height: calc(var(--vh) * 100);
  overflow: hidden;
  isolation: isolate;}

.sf-triad4-stage::before {display: none;}

.sf-triad4-heading {position: absolute;
  z-index: 15;
  left: 50%;
  top: clamp(54px, 8vh, 92px);
  width: min(1120px, 94vw);
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;}

.sf-triad4-heading .sf-act {margin-bottom: 14px;
  color: rgba(222,183,118,.66);}

.sf-triad4-heading-swap {position: relative;
  height: clamp(56px, 8vw, 96px);}

.sf-triad4-heading h2 {position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: clamp(48px, 5vw, 88px);
  line-height: .9;
  font-weight: 400;
  letter-spacing: .006em;
  color: rgba(247,238,224,.95);
  transition:
    opacity .9s ease,
    transform 1s var(--ease-soft);}

.sf-triad4-heading-after {opacity: 0;
  transform: translateY(20px);}

.sf-union.is-united .sf-triad4-heading-before {opacity: 0;
  transform: translateY(-20px);}

.sf-union.is-united .sf-triad4-heading-after {opacity: 1;
  transform: translateY(0);}

.sf-triad4-energy {position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;}

.sf-triad4-energy line {stroke: rgba(239,209,154,0);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: stroke .8s ease, filter .8s ease;}

.sf-union.is-gathering .sf-triad4-energy line {stroke: rgba(239,209,154,.20);}

.sf-union.is-charged .sf-triad4-energy line {stroke: rgba(247,221,167,.42);
  filter: drop-shadow(0 0 5px rgba(239,209,154,.14));}

.sf-union.is-united .sf-triad4-energy line {stroke: rgba(239,209,154,.07);}

.sf-triad4-forces {position: absolute;
  inset: 0;
  z-index: 5;}

.sf-triad4-force {position: absolute;
  width: clamp(220px, 20vw, 286px);
  text-align: center;
  transition:
    left 1.45s var(--ease-soft),
    right 1.45s var(--ease-soft),
    top 1.45s var(--ease-soft),
    transform 1.45s var(--ease-soft),
    opacity .76s ease,
    filter .76s ease;}

.sf-triad4-discernment {left: 50%;
  top: 28%;
  transform: translate(-50%,-50%);}

.sf-triad4-selftrust {left: 17%;
  top: 61%;
  transform: translate(-50%,-50%);}

.sf-triad4-integrity {left: 83%;
  top: 61%;
  transform: translate(-50%,-50%);}

.sf-triad4-orb {width: clamp(190px, 18vw, 254px);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(239,209,154,.17);
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, rgba(239,209,154,.014), transparent 64%);
  box-shadow: inset 0 0 42px rgba(239,209,154,.01);
  transition:
    transform 1.05s var(--ease-soft),
    border-color .72s ease,
    box-shadow .8s ease,
    background .8s ease;}

.sf-triad4-orb > span {width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #efd19a;
  transition:
    transform .8s var(--ease-soft),
    box-shadow .8s ease,
    background .7s ease;}

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

.sf-triad4-label strong {display: block;
  font-family: var(--display);
  font-size: clamp(29px, 2.65vw, 45px);
  font-weight: 500;
  letter-spacing: .055em;
  line-height: .95;
  white-space: nowrap;
  color: rgba(247,238,224,.94);}

.sf-triad4-label em {display: block;
  margin-top: 8px;
  font-family: var(--display);
  font-size: clamp(16px, 1.35vw, 20px);
  font-style: italic;
  line-height: 1.25;
  color: rgba(247,238,224,.45);
  transition: opacity .6s ease, color .6s ease;}

.sf-union.is-awake .sf-triad4-orb {border-color: rgba(239,209,154,.39);
  background:
    radial-gradient(circle, rgba(239,209,154,.058), rgba(146,67,49,.022) 48%, transparent 70%);}

.sf-union.is-awake .sf-triad4-orb > span {transform: scale(1.28);
  box-shadow:
    0 0 10px rgba(255,239,201,.84),
    0 0 28px rgba(229,174,98,.38),
    0 0 54px rgba(168,80,49,.16);}

/* First pull. The three forces leave their separate positions. */

.sf-union.is-gathering .sf-triad4-discernment {top: 48%;
  transform: translate(-50%,-50%) scale(.84);}

.sf-union.is-gathering .sf-triad4-selftrust {left: 37%;
  top: 54%;
  transform: translate(-50%,-50%) scale(.84);}

.sf-union.is-gathering .sf-triad4-integrity {left: 63%;
  top: 54%;
  transform: translate(-50%,-50%) scale(.84);}

.sf-union.is-gathering .sf-triad4-label {opacity: .26;}

/* Second pulse of tension. The triad nearly occupies one point. */

.sf-union.is-charged .sf-triad4-discernment {top: 51.5%;
  transform: translate(-50%,-50%) scale(.66);}

.sf-union.is-charged .sf-triad4-selftrust {left: 45%;
  top: 55%;
  transform: translate(-50%,-50%) scale(.66);}

.sf-union.is-charged .sf-triad4-integrity {left: 55%;
  top: 55%;
  transform: translate(-50%,-50%) scale(.66);}

.sf-union.is-charged .sf-triad4-label {opacity: 0;}

.sf-union.is-charged .sf-triad4-selftrust .sf-triad4-orb > span {background: #f8e9cb;}

.sf-union.is-charged .sf-triad4-discernment .sf-triad4-orb > span {background: #d9d1c4;}

.sf-union.is-charged .sf-triad4-integrity .sf-triad4-orb > span {background: #bb825b;}

.sf-union.is-united .sf-triad4-force {opacity: 0;
  filter: blur(3px);
  transform: translate(-50%,-50%) scale(.42);}

/* ---------- recovered Act IV pulse architecture ---------- */

.sf-triad4-world {position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;}

.sf-triad4-whitecore {position: absolute;
  left: 50%;
  top: 55%;
  width: 9px;
  height: 9px;
  transform: translate(-50%,-50%) scale(.08);
  border-radius: 50%;
  background: #fff5db;
  box-shadow:
    0 0 12px rgba(255,247,222,.98),
    0 0 48px rgba(242,206,143,.76),
    0 0 138px rgba(190,108,66,.30);
  opacity: 0;}

.sf-triad4-wave {position: absolute;
  left: 50%;
  top: 55%;
  width: 22vmax;
  height: 22vmax;
  transform: translate(-50%,-50%) scale(.10);
  border-radius: 50%;
  opacity: 0;
  border: 1px solid rgba(247,218,157,.31);
  background:
    radial-gradient(circle,
      rgba(255,224,156,.16) 0%,
      rgba(235,178,91,.095) 23%,
      rgba(173,94,55,.038) 53%,
      transparent 72%);
  box-shadow:
    0 0 86px rgba(239,185,96,.17),
    inset 0 0 76px rgba(239,185,96,.07);}

.sf-triad4-halo,
.sf-triad4-aura {position: absolute;
  left: 50%;
  top: 55%;
  width: min(50vw, 570px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;}

.sf-triad4-halo {transform: translate(-50%,-50%) scale(.4);
  border: 1px solid rgba(255,226,157,.24);
  background:
    radial-gradient(circle,
      rgba(255,239,188,.14) 0%,
      rgba(245,198,104,.11) 28%,
      rgba(205,127,59,.055) 54%,
      transparent 77%);
  box-shadow:
    0 0 76px rgba(250,201,108,.24),
    0 0 176px rgba(199,120,58,.14),
    inset 0 0 58px rgba(255,223,151,.10);}

.sf-triad4-aura {transform: translate(-50%,-50%);
  background:
    radial-gradient(circle,
      rgba(255,247,205,.28) 0%,
      rgba(255,220,139,.23) 13%,
      rgba(239,183,89,.18) 26%,
      rgba(202,128,61,.10) 42%,
      rgba(112,49,36,.035) 60%,
      transparent 80%);}

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

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

.sf-triad4-aura-c {filter: blur(50px);}

.sf-union.is-united .sf-triad4-whitecore {animation: sfTriadWhiteCore 1.25s var(--ease-soft) both;}

.sf-union.is-united .sf-triad4-wave-1 {animation: sfTriadPulseStrong 3.4s .10s cubic-bezier(.14,.64,.28,1) both;}

.sf-union.is-united .sf-triad4-wave-2 {animation: sfTriadPulseStrong 4.15s .42s cubic-bezier(.14,.64,.28,1) both;}

.sf-union.is-united .sf-triad4-wave-3 {animation: sfTriadPulseReverb 5.05s .78s cubic-bezier(.14,.64,.28,1) both;}

.sf-union.is-united .sf-triad4-wave-4 {animation: sfTriadPulseReverb 6s 1.20s cubic-bezier(.14,.64,.28,1) both;}

.sf-union.is-united .sf-triad4-halo-a {animation: sfTriadHaloExpand 4s .18s ease-out both;}

.sf-union.is-united .sf-triad4-halo-b {animation: sfTriadHaloExpand 5.4s .40s ease-out both;}

.sf-union.is-united .sf-triad4-aura-a {animation: sfTriadAuraA 4.8s .15s ease-in-out infinite;}

.sf-union.is-united .sf-triad4-aura-b {animation: sfTriadAuraB 5.8s .20s ease-in-out infinite;}

.sf-union.is-united .sf-triad4-aura-c {animation: sfTriadAuraC 7.2s .25s ease-in-out infinite;}

/* ---------- final eclipse ---------- */

.sf-triad4-eclipse {position: absolute;
  z-index: 8;
  left: 50%;
  top: 55%;
  width: min(50vw, 570px);
  aspect-ratio: 1;
  transform: translate(-50%,-50%) scale(.62);
  border: 0;
  padding: 0;
  background: transparent;
  appearance: none;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 1.05s ease .18s,
    transform 1.2s var(--ease-soft) .12s;}

.sf-union.is-united .sf-triad4-eclipse {opacity: 1;
  transform: translate(-50%,-50%) scale(1);
  pointer-events: auto;
  cursor: pointer;}

.sf-triad4-corona {position: absolute;
  inset: -20%;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      rgba(255,250,218,.34) 0%,
      rgba(255,223,145,.30) 17%,
      rgba(244,188,91,.24) 32%,
      rgba(211,135,63,.14) 48%,
      rgba(108,48,35,.035) 64%,
      transparent 79%);
  transition: transform .9s var(--ease-soft), background .8s ease;}

.sf-triad4-ring {position: absolute;
  inset: -2%;
  border-radius: 50%;
  border: 1px solid rgba(255,226,158,.44);
  box-shadow:
    0 0 62px rgba(255,208,113,.24),
    0 0 146px rgba(197,116,54,.16),
    inset 0 0 30px rgba(255,242,198,.07);
  transition: border-color .7s ease, box-shadow .8s ease, transform .9s var(--ease-soft);}

.sf-triad4-core {position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 43%, #2a1015 0%, #16090d 55%, #090506 100%);
  box-shadow:
    inset 0 0 68px rgba(123,40,39,.31),
    inset 0 -34px 70px rgba(41,10,16,.36);}

.sf-triad4-eclipse-copy {position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgba(247,238,224,.97);}

.sf-triad4-eclipse-copy strong {display: block;
  font-family: var(--display);
  font-size: clamp(54px, 5vw, 84px);
  font-weight: 400;
  line-height: .88;
  letter-spacing: .03em;}

.sf-triad4-eclipse-copy > em {display: block;
  margin-top: 10px;
  font-family: var(--display);
  font-size: clamp(58px, 5.4vw, 92px);
  font-weight: 400;
  line-height: .82;
  font-style: italic;
  color: #efd19a;}

.sf-triad4-eclipse-copy > span {display: block;
  margin-top: 22px;
  font-family: var(--display);
  font-size: clamp(20px, 1.8vw, 30px);
  line-height: 1.2;
  font-style: italic;
  color: rgba(247,238,224,.58);}

.sf-triad4-eclipse:hover .sf-triad4-corona,
.sf-triad4-eclipse:focus-visible .sf-triad4-corona {transform: scale(1.08);
  background:
    radial-gradient(circle,
      rgba(255,252,222,.42) 0%,
      rgba(255,226,147,.36) 17%,
      rgba(247,192,93,.29) 32%,
      rgba(217,140,65,.16) 48%,
      rgba(113,49,35,.04) 64%,
      transparent 80%);}

.sf-triad4-eclipse:hover .sf-triad4-ring,
.sf-triad4-eclipse:focus-visible .sf-triad4-ring {border-color: rgba(255,232,167,.72);
  box-shadow:
    0 0 84px rgba(255,211,120,.32),
    0 0 168px rgba(204,124,58,.20),
    inset 0 0 38px rgba(255,245,210,.10);
  transform: scale(1.012);}

.sf-triad4-eclipse:focus-visible {outline: 1px solid rgba(255,228,166,.52);
  outline-offset: 14px;
  border-radius: 50%;}

@keyframes sfTriadWhiteCore{
  0% { opacity:0; transform:translate(-50%,-50%) scale(.08); }
  14% { opacity:1; transform:translate(-50%,-50%) scale(2.3); }
  28% { opacity:.98; transform:translate(-50%,-50%) scale(5.4); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(9.6); }
}

@keyframes sfTriadPulseStrong{
  0% { opacity:.94; transform:translate(-50%,-50%) scale(.10); }
  17% { opacity:.76; }
  35% { opacity:.50; }
  68% { opacity:.16; }
  100% { opacity:0; transform:translate(-50%,-50%) scale(34); }
}

@keyframes sfTriadPulseReverb{
  0% { opacity:.56; transform:translate(-50%,-50%) scale(.14); }
  25% { opacity:.36; }
  66% { opacity:.10; }
  100% { opacity:0; transform:translate(-50%,-50%) scale(34); }
}

@keyframes sfTriadHaloExpand{
  0% { opacity:0; transform:translate(-50%,-50%) scale(.4); }
  24% { opacity:.76; }
  100% { opacity:0; transform:translate(-50%,-50%) scale(3.8); }
}

@keyframes sfTriadAuraA{
  0%,100% { transform:translate(-50%,-50%) scale(1.22); opacity:.40; }
  50% { transform:translate(-50%,-50%) scale(1.38); opacity:.62; }
}

@keyframes sfTriadAuraB{
  0%,100% { transform:translate(-50%,-50%) scale(1.54); opacity:.25; }
  50% { transform:translate(-50%,-50%) scale(1.78); opacity:.43; }
}

@keyframes sfTriadAuraC{
  0%,100% { transform:translate(-50%,-50%) scale(1.88); opacity:.13; }
  50% { transform:translate(-50%,-50%) scale(2.22); opacity:.27; }
}


.sf-triad4-eclipse {background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none;
  color: inherit;
  text-decoration: none;}

.sf-triad4-eclipse-copy > span {display: none !important;}


/* =========================================================
   V52 · PRODUCTION ARCHITECTURE
   One viewport breakout point. No JS layout correction.
   ========================================================= */
html,
body.sovereign-flame-active {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--ink) !important;
  overflow-x: clip !important;
}

body.sovereign-flame-active :where(
  .site,
  .site-content,
  .content-area,
  .site-main,
  main,
  article,
  .page,
  .post,
  .entry-content,
  .wp-block-post-content
) {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  background: var(--ink) !important;
}

body.sovereign-flame-active :where(
  .site-header,
  #masthead,
  .site-footer,
  #colophon,
  .entry-header,
  .wp-block-post-title
) {
  display: none !important;
}

body.sovereign-flame-active :where(.wp-site-blocks, .wp-site-blocks > main) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--ink) !important;
}

body.sovereign-flame-active .wp-block-shortcode:has(.sf-page) {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-inline: calc(50% - 50vw) !important;
  padding: 0 !important;
  background: var(--ink) !important;
  overflow: visible !important;
}

.sf-page {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  transform: none !important;
  overflow-x: clip !important;
  background: linear-gradient(180deg, #120b0d 0%, #170c10 22%, #120b0d 100%) !important;
  isolation: isolate;
}

/* Host themes must not restyle cinematic controls. */
.sf-page button {
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent;
  color: inherit;
}

.sf-topbar-link {
  background: transparent !important;
  color: inherit !important;
}

/* Narrative sections stay atmospheric without unexplained fixed spotlights. */
.sf-story {
  background: linear-gradient(180deg, #120b0d 0%, #170c10 54%, #10090b 100%) !important;
}
.sf-declaration { background: #10090b !important; }
.sf-handoff { background: linear-gradient(180deg, #0e0c0d 0%, #160c0f 100%) !important; }
.sf-union.sf-triad4 { background: linear-gradient(180deg, #0c0709 0%, #160a0f 58%, #080506 100%) !important; }
.sf-finale { background: linear-gradient(180deg, #120a0d 0%, #160b0f 48%, #0e080a 100%) !important; }
.sf-triad4-stage::before { display: none !important; }

/* The final eclipse is a cinematic object, not a UI control. */
.sf-triad4-eclipse { cursor: default !important; }