/* forgewealth.app: THE QUIET SCREEN, ON THE WEB (the websites redesign, 2026-10-22; scope decision 2 A).
 *
 * The site wears the app's quiet three look so a visitor who installs arrives where the page promised:
 *   THE GROUND IS DARK, ALWAYS (Erik, 22 Oct, after the sites went live: "the backgrounds should be dark instead of
 *   light"). The app's dark ground (lib/theme/groundCore.ts GROUNDS.dark): a fade from #1C1C1E at the top to #000000 at
 *   the foot with a still warm glow #4A2812 at 0.55, whatever the reader's phone is set to. The app itself still follows
 *   the phone; only the sites hold dark.
 *   THE GLOW (lib/theme/quietCore.ts QUIET_GLOW): a circle, its radius 0.8 of the screen's width, its falloff
 *   1, .72, .32, .08, 0 at 0, 30, 60, 85 and 100 percent of the radius. Still: drawn once, never moved.
 *   THE TYPE (lib/theme/typeCore.ts): the carved serif (Cinzel) for titles and numbers only, one clean sans (Work Sans)
 *   for every label and line. Both from Google Fonts.
 *   THE INKS: on dark, the Forge's own text colours (constants/forge textPrimary and textSecondary), with textMuted
 *   lifted at its own hue to #A8987A so it reads 4.6:1 even on the glow's peak (quietCore inkOn).
 * Embers rise in the hero only, and nothing moves for a reader who asked for less motion. */

:root{
  color-scheme:dark;
  --top:#1C1C1E; --bottom:#000000; --glow:74,40,18; --glow-peak:.55;
  --ink:#F4EEE2; --ink-2:#C3B69C; --ink-3:#A8987A;
  --fire:#FF7A2E; --gold:#FFD700; --growth:#22C55E;
  --panel:rgba(255,241,220,.05); --panel-line:rgba(255,241,220,.11); --rim:#5A4429;
  --field:rgba(255,255,255,.06); --field-line:rgba(255,255,255,.18);
  --focus:#FFD700; --ember:#FF7A2E;
  --shade:0 18px 46px rgba(0,0,0,.55);
  --carved:'Cinzel',Georgia,'Times New Roman',serif;
  --sans:'Work Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --wrap:1120px; --gutter:18px;
}

*{box-sizing:border-box}
html{background:var(--bottom);-webkit-text-size-adjust:100%;overflow-x:hidden}
body{margin:0;color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.62;
     -webkit-font-smoothing:antialiased;overflow-x:hidden;background:transparent;position:relative}
/* THE GROUND: one fade per screen, as on the phone, held still behind the scroll. A fixed layer rather than
   background-attachment:fixed, which iOS Safari ignores. */
body::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
             background:linear-gradient(180deg,var(--top),var(--bottom))}
img,video,svg{max-width:100%}
a{color:var(--gold);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--panel);color:var(--ink);padding:10px 14px;
      border:1px solid var(--panel-line);border-radius:8px}
.skip:focus{top:12px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.narrow{max-width:760px}

/* THE TYPE: carved for titles and numbers, the sans for everything a reader reads. */
h1,h2,h3,.carved{font-family:var(--carved);font-weight:700;margin:0;text-wrap:balance;letter-spacing:.01em}
h1{font-size:clamp(36px,6.2vw,66px);line-height:1.1;font-weight:900}
h2{font-size:clamp(28px,4.2vw,44px);line-height:1.14}
h3{font-size:19px;line-height:1.34}
h1 em,h2 em{font-style:normal;color:var(--fire)}
p{margin:0 0 16px}
.lede{font-size:clamp(18px,2.1vw,20px);line-height:1.55;color:var(--ink-2);max-width:46ch}
.eyebrow{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
         color:var(--fire);margin:0 0 14px}
.muted{color:var(--ink-3)}
.num{font-family:var(--carved);font-weight:700;font-variant-numeric:lining-nums tabular-nums}

/* THE BAR ACROSS THE TOP: the name, the press page, the one ask. */
.top{position:relative;z-index:5}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:16px}
.brand{font-family:var(--carved);font-weight:900;font-size:22px;letter-spacing:.08em;color:var(--ink);text-decoration:none}
.top nav{display:flex;align-items:center;gap:6px}
.top nav a{color:var(--ink-2);text-decoration:none;font-size:15px;font-weight:600;padding:8px 10px;border-radius:8px}
.top nav a:hover{color:var(--ink)}
.top nav a.navjoin{color:var(--ink);border:1px solid var(--panel-line);background:var(--panel)}

section{padding-block:clamp(56px,9vw,104px);position:relative;overflow:hidden}

/* THE GLOW: Quiet three's, a circle 0.8 of the screen wide (held under 720 px on a wide screen), still. */
.glow{position:absolute;left:50%;top:50%;width:min(160vw,1440px);aspect-ratio:1;transform:translate(-50%,-50%);
      pointer-events:none;z-index:-1;
      background:radial-gradient(circle closest-side,
        rgba(var(--glow),var(--glow-peak)) 0%,
        rgba(var(--glow),calc(var(--glow-peak)*.72)) 30%,
        rgba(var(--glow),calc(var(--glow-peak)*.32)) 60%,
        rgba(var(--glow),calc(var(--glow-peak)*.08)) 85%,
        rgba(var(--glow),0) 100%)}

/* Inside a band the glow is held to the band: 1000 px across at most, so it has faded to almost nothing at the band's
   own edges. */
.glow.inner{width:min(130vw,1000px)}

/* ── THE HERO ─────────────────────────────────────────────────────────────────────────────────── */
.hero{padding-block:clamp(10px,3vw,36px) clamp(48px,7vw,88px);overflow:hidden}
/* A glow is never cut by its band: where the browser can (overflow clip), a band clips sideways only, so the hero's glow
   reaches up behind the bar as the app's does behind its top bar, and no glow meets a hard edge. */
@supports (overflow-x:clip){ section,.hero{overflow:visible;overflow-x:clip} }
.herogrid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:end;
          grid-template-areas:"eyebrow" "title" "stage" "copy"}
.herocopy{display:contents}
.hero .eyebrow{grid-area:eyebrow;margin:0}
.hero h1{grid-area:title;margin:0}
.copyside{grid-area:copy;min-width:0}
.copyside .lede{margin:0}
.herostage{grid-area:stage;min-width:0;position:relative}
/* On a phone the line comes first, then the kingdom moving on the controller, then the field. On a wide screen the line
   and the field stand on the left and the controller on the right: it is nearly square, so it takes a column. */
@media (min-width:960px){
  .herogrid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);column-gap:56px;row-gap:14px;align-items:center;
            grid-template-areas:"eyebrow stage" "title stage" "copy stage"}
  .hero .eyebrow{align-self:end}
  .hero h1{font-size:clamp(44px,4.4vw,60px);align-self:center}
  .copyside{align-self:start}
  .copyside .lede{font-size:18px}
}
.stamp{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
       color:var(--gold);border:1px solid currentColor;border-radius:999px;padding:5px 12px;margin:0 0 4px}
.heronote{margin:14px 0 0;font-size:14.5px;color:var(--ink-3);display:flex;gap:8px 10px;flex-wrap:wrap;align-items:center}
.chip{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--ink-2);border:1px solid var(--panel-line);
      background:var(--panel);border-radius:999px;padding:5px 11px;text-decoration:none;white-space:nowrap}
a.chip:hover{color:var(--ink)}
.cap{font-size:12.5px;font-weight:600;letter-spacing:.06em;color:var(--ink-3);margin:12px 0 0;text-align:center}
.herostage .cap{margin-top:8px}

/* ── THE CONTROLLER (Erik's own, from his photo; never named on the
   page): a flat white slab split down the middle, and the phone lying LANDSCAPE across the slab's whole length, held on
   its back by the controller's magnet and leaning back over it, its foot over the slab's top strip. No clamp, no clip.
   The slab is one inline SVG (#slab, 1000 by 850 units, generated with the diagram's places); the phone is HTML so that
   its body and the real capture on its screen lean back together under one transform. Every place below is a share of
   that box: the phone 1000 by 480 at the top, the slab 440 to 850. ─────────────────────────────────────────────── */
.ctl{position:relative;width:100%;aspect-ratio:1000/850;margin:0 auto;filter:drop-shadow(0 28px 34px rgba(0,0,0,.6))}
.ctl > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ctl .phone{position:absolute;left:0;width:100%;top:0;height:56.471%;border-radius:8% / 16.67%;z-index:1;
             background:linear-gradient(180deg,#EDEDF0 0%,#B5B5BC 48%,#8E8E96 52%,#D3D3D8 100%);
             box-shadow:0 10px 16px rgba(0,0,0,.28);
             transform-origin:50% 100%;transform:perspective(1100px) rotateX(10deg)}
@media (min-width:960px){ .ctl .phone{transform:perspective(1900px) rotateX(10deg)} }
.ctl .bezel{position:absolute;inset:1.667% .8%;border-radius:7.32% / 15.5%;background:#050506}
.ctl .screen{position:absolute;inset:2.917% 1.6%;border-radius:5.17% / 11.06%;overflow:hidden;background:#0A0A0B}
.ctl .screen video{display:block;width:100%;height:100%;object-fit:cover}
.ctl .island{position:absolute;left:3%;top:37%;width:3%;height:26%;border-radius:999px;background:#000;z-index:2}
/* THE FILM (Erik's own controller footage, data-hero="film"): no drawn controller, the clip in a rounded card. */
.film{display:none;position:relative;max-width:920px;margin:0 auto;border-radius:18px;overflow:hidden;box-shadow:var(--shade);background:#0A0A0B}
.film video{display:block;width:100%;height:auto}
[data-hero="film"] .ctl{display:none}
[data-hero="film"] .film{display:block}

/* ── THE WAITLIST FIELD, wherever it stands ───────────────────────────────────────────────────── */
form.join{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;max-width:540px}
form.join input[type=email]{flex:1 1 230px;min-width:0;background:var(--field);border:1px solid var(--field-line);
  color:var(--ink);font-family:var(--sans);font-size:17px;padding:14px 16px;border-radius:12px;min-height:52px}
form.join input[type=email]::placeholder{color:var(--ink-3);opacity:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-weight:700;
     font-size:16.5px;padding:14px 22px;border-radius:12px;border:0;cursor:pointer;white-space:nowrap;min-height:52px;
     text-decoration:none}
.btn-fire{background:#FF5C0A;color:#160B03}
.btn-fire:hover{background:#FF7A2E}
.btn[disabled]{opacity:.6;cursor:default}
.said{margin:12px 0 0;font-size:15px;font-weight:600;min-height:1.3em}
.said:empty{margin:0;min-height:0}
.said.ok{color:var(--growth)} .said.bad{color:var(--fire)}
.formnote{font-size:14.5px;color:var(--ink-3);margin-top:12px}
@media (max-width:420px){ form.join .btn{flex:1 1 100%} }

/* ── PANELS: one step brighter than the ground they stand on (quiet ruling 5). ───────────────── */
.panel{background:var(--panel);border:1px solid var(--panel-line);border-radius:16px;padding:22px 22px}
.panel h3{margin-bottom:8px}
.panel p{color:var(--ink-2);font-size:16px;margin:0}
.grid{display:grid;gap:14px;margin-top:30px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
/* Five promises: three across, then two across, never four and an orphan. */
.g5{grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){ .g5{grid-template-columns:repeat(2,minmax(0,1fr))} .g5 > :last-child{grid-column:1 / -1} }
@media (min-width:1040px){ .g5{grid-template-columns:repeat(6,minmax(0,1fr))} .g5 > *{grid-column:span 2} .g5 > :nth-child(n+4){grid-column:span 3} }

/* ── WHAT FORGE IS: the daily loop, the four pillars and the closer (Erik, 22 Oct). On a phone the loop is a column
   down a thin ember thread, each step on its own icon; on a wide screen it is five across on one thread. The pillars
   are one column on a phone, two by two from 720 px. ──────────────────────────────────────────────────────────── */
.what .ico{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;flex:0 0 auto;
           background:rgba(255,92,10,.12);border:1px solid rgba(255,122,46,.45);color:var(--fire)}
.what .ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.loop{list-style:none;padding:0;margin:34px 0 0;display:grid;gap:22px;position:relative}
.loop li{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:16px;align-items:start;align-content:start}
.loop li > .ico{grid-row:1 / span 3;position:relative;z-index:1;background:#22140C}
.loop li::before{content:'';position:absolute;left:22.5px;top:46px;bottom:-22px;width:1px;background:rgba(255,122,46,.4)}
.loop li:last-child::before{display:none}
.loop .when{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fire);line-height:1.3;
            margin-top:3px}
.loop h3{font-size:18px;margin:4px 0 6px}
.loop p{font-size:15.5px;color:var(--ink-2);margin:0}
@media (min-width:960px){
  .loop{grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;margin-top:40px}
  .loop li{grid-template-columns:minmax(0,1fr);row-gap:0}
  .loop li > .ico{grid-row:auto;margin-bottom:14px}
  .loop li::before{left:46px;right:-22px;top:22.5px;bottom:auto;width:auto;height:1px}
}
.pillarshead{margin:56px 0 0;font-size:clamp(22px,2.8vw,28px)}
.pillars{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:20px}
@media (min-width:720px){ .pillars{grid-template-columns:repeat(2,minmax(0,1fr))} }
.pillar{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:16px;align-items:start;align-content:start}
.pillar > .ico{grid-row:auto}
.pillar h3{font-size:18.5px;margin:0;align-self:center}
.pillar p{grid-column:1 / -1;margin-top:12px}
.closer{font-family:var(--carved);font-weight:900;font-size:clamp(24px,3.4vw,38px);line-height:1.25;text-align:center;
        text-wrap:balance;max-width:24ch;margin:56px auto 0;color:var(--ink)}
.closer em{font-style:normal;color:var(--fire)}

/* ── YOUR MONEY IS THE GAME ───────────────────────────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center}
@media (min-width:960px){ .split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:64px} }
.split.flip > :first-child{order:2}
@media (max-width:959px){ .split.flip > :first-child{order:0} }
.halfhead{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
          color:var(--ink-3);margin:26px 0 8px}
.points{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.points li{padding:18px 20px}
.points h3{font-size:18px;margin-bottom:4px}
.points p{font-size:16px}
.cleared{display:flex;gap:12px;align-items:flex-start;margin-top:18px;font-size:15.5px;color:var(--ink-2)}
.cleared svg{flex:0 0 auto;width:22px;height:22px;color:var(--growth);margin-top:2px}
.cleared b{color:var(--ink)}

/* THE PHONE: the app's home today, in the reader's own appearance. */
.phone{width:min(100%,290px);margin:0 auto;aspect-ratio:600/1301;border-radius:44px;padding:9px;
       background:linear-gradient(160deg,#3A3A40,#151517);box-shadow:var(--shade);position:relative}
.phone::after{content:'';position:absolute;inset:0;border-radius:44px;border:1px solid rgba(255,255,255,.10);pointer-events:none}
.phone picture,.phone img{display:block;width:100%;height:100%;border-radius:35px;object-fit:cover}

/* ── A REAL KINGDOM ───────────────────────────────────────────────────────────────────────────── */
.kingdom{overflow:hidden}
.cast{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:0;min-height:300px}
.cast picture{display:block;width:min(46%,220px)}
.cast img{display:block;width:100%;height:auto}
.cast picture + picture{margin-left:-6%}
.cast::after{content:'';position:absolute;left:12%;right:12%;bottom:0;height:18px;border-radius:50%;
             background:radial-gradient(closest-side,rgba(0,0,0,.35),transparent);z-index:-1}
.lesson{margin-top:22px;padding:18px 20px;border-left:2px solid var(--fire);background:var(--panel);border-radius:0 14px 14px 0;
        font-size:16.5px;color:var(--ink-2)}
.lesson b{color:var(--ink);font-weight:600}

/* ── PLAYS WITH A CONTROLLER: A CLASSIC LABELLED DIAGRAM (Erik, 22 Oct). Wide: the controller in the middle, a thin
   line from each control to its label on the left, the right or below (.wide, a 1600 by 840 box, the controller at x
   400 to 1200). Narrower than 1024: numbered marks around the controller (.narrow, a 1220 by 1000 box, the controller
   at x 110) and the numbered list under it, so no word is ever drawn smaller than it can be read. The two boxes share
   the one controller; each mark sits where the slab's own units put that control. ───────────────────────────── */
.diagram{position:relative;width:100%;margin:36px auto 0}
.diagram .ctl{position:absolute;margin:0}
.diagram > svg.lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:3;pointer-events:none}
.diagram .wideonly{display:none}
.diagram{aspect-ratio:1220/1000;max-width:640px}
.diagram .ctl{left:9.016%;width:81.967%;top:4%}
@media (min-width:1024px){
  .diagram{aspect-ratio:1600/840;max-width:1180px}
  .diagram .ctl{left:25%;width:50%;top:2.381%}
  .diagram .wideonly{display:block}
  .diagram .narrowonly{display:none}
  /* the list stays for a screen reader; the drawing's labels say it to the eye */
  .legend{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* The lines are ember so they read both on the dark ground and across the white slab. */
.lines .lead{fill:none;stroke:#FF6A1A;stroke-width:1.6;vector-effect:non-scaling-stroke}
.lines .at{fill:#FF7A2E}
.lines .end{fill:#F4EEE2}
.lines text{font-family:var(--sans)}
.lines .t{font-size:26px;font-weight:600;fill:#F4EEE2}
.lines .t .k{fill:#FF7A2E;font-weight:700}
.lines .s{font-size:21px;font-weight:500;fill:#C3B69C}
.lines .badge circle{fill:#FF5C0A;stroke:#160B03;stroke-width:3}
.lines .badge text{font-size:42px;font-weight:700;fill:#160B03;text-anchor:middle}
.legend{list-style:none;padding:0;margin:22px auto 0;max-width:620px;display:grid;gap:8px;
        grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.legend li{display:flex;align-items:center;gap:12px;padding:10px 14px}
.legend .n{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;
           background:#FF5C0A;color:#160B03;font-weight:700;font-size:14px}
.legend b{display:block;font-weight:600;color:var(--ink);font-size:16px;line-height:1.3}
.legend b .k{color:var(--fire);margin-right:6px}
.legend span.what{display:block;color:var(--ink-2);font-size:14.5px;line-height:1.4}

/* ── BUILDING FORGE (hidden until the first devlog; BUILDING_FORGE in index.html turns it on) ─────── */
.devgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:30px;max-width:880px}
.yt{position:relative;display:block;width:100%;border:0;padding:0;margin:0;cursor:pointer;border-radius:16px;overflow:hidden;
    background:#0A0A0B;box-shadow:var(--shade)}
.yt.wide{aspect-ratio:16/9} .yt.tall{aspect-ratio:9/16}
.yt img,.yt iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.yt .play{position:absolute;left:50%;top:50%;width:68px;height:68px;transform:translate(-50%,-50%);border-radius:50%;
          background:rgba(0,0,0,.6);display:grid;place-items:center}
.yt .play svg{width:26px;height:26px;margin-left:4px;color:#fff}
/* The Shorts under the devlog: three across on a phone, four on a wide screen. */
.shorts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.shorts > :nth-child(n+4){display:none}
@media (min-width:720px){ .shorts{grid-template-columns:repeat(4,minmax(0,1fr))} .shorts > :nth-child(4){display:block} }

/* ── THE PROMISES ─────────────────────────────────────────────────────────────────────────────── */
.promise.free{border-color:var(--rim)}
.promise.free h3{color:var(--gold)}

footer{padding-block:44px 64px;color:var(--ink-3);font-size:14.5px;border-top:1px solid var(--panel-line)}
footer a{color:var(--ink-2)}
footer .brand{font-size:19px}
.legal{margin-top:18px;font-size:13px;line-height:1.6}

/* ── EMBERS: fourteen, in the hero only, transform and opacity only, stopped off screen. ───────── */
.embers{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.embers i{position:absolute;bottom:-12px;border-radius:50%;background:var(--ember);opacity:0;will-change:transform,opacity}
@media (prefers-reduced-motion:no-preference){
  .hero:not(.rest) .embers i{animation:rise var(--dur) linear var(--del) infinite}
}
@keyframes rise{
  0%  {opacity:0;   transform:translate3d(0,0,0) scale(.7)}
  12% {opacity:.8}
  70% {opacity:.45}
  100%{opacity:0;   transform:translate3d(var(--drift),var(--lift),0) scale(1.15)}
}

/* THE REVEAL: hidden only by script, shown by a safety net, never for a reader who asked for less motion. */
.js .rv{opacity:0;transform:translateY(14px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion:reduce){ .js .rv{opacity:1;transform:none} html{scroll-behavior:auto} }
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }