:root{
--void:#06070A; --obsidian:#0B0E13; --slate:#12171E; --slate-2:#191F28;
--hairline:#1C232C; --hairline-hi:#2B3540;
--ink-hi:#F4F6F8; --ink:#AFB9C4; --ink-lo:#68737F;
--brass:#C9A227; --brass-hi:#E8CC6A; --brass-dim:rgba(201,162,39,.14);
--jade:#2E9E6B; --vermilion:#C2452D;
--heb:"Taamey Frank CLM","SBL Hebrew","Ezra SIL","New Peninim MT","Arial Hebrew","Times New Roman",serif;
--pf-green:#34d399;
--serif:"Hoefler Text","Canela",Georgia,"Times New Roman",serif;
--sans:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,sans-serif;
--mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
--gut:clamp(20px,5vw,72px);
--measure:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;background:var(--void);color:var(--ink);
font-family:var(--sans);font-size:16px;line-height:1.7;
-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* film grain — turns the plates from illustration into archival print */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.038;
background-image:url("data:image/svg+xml;utf8,")}
img{max-width:100%;display:block}
h1,h2,h3,h4{color:var(--ink-hi);margin:0;font-weight:400}
h1{font-family:var(--serif);font-size:clamp(34px,6.1vw,78px);line-height:1.0;letter-spacing:-.025em;text-wrap:balance}
h2{font-family:var(--serif);font-size:clamp(27px,4.2vw,50px);line-height:1.08;letter-spacing:-.022em;text-wrap:balance}
h3{font-family:var(--serif);font-size:clamp(20px,2.4vw,28px);line-height:1.2;letter-spacing:-.015em}
p{margin:0 0 16px;max-width:62ch}
a{color:var(--brass-hi);text-decoration:none}
.wrap{max-width:var(--measure);margin:0 auto;padding:0 var(--gut);width:100%}
.kicker{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.26em;
text-transform:uppercase;color:var(--brass);display:block}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-lo)}
.lede{font-size:clamp(17px,1.6vw,19.5px);line-height:1.62;color:var(--ink);max-width:56ch}
/* ══ NAV ══════════════════════════════════════════════════════════ */
nav{position:fixed;top:0;left:0;right:0;z-index:100;
display:flex;align-items:center;justify-content:space-between;
padding:0 var(--gut);height:68px;
background:rgba(6,7,10,0);border-bottom:1px solid transparent;
transition:background .5s ease,border-color .5s ease,backdrop-filter .5s ease}
nav.stuck{background:rgba(6,7,10,.86);backdrop-filter:blur(14px) saturate(1.2);
-webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--hairline)}
/* Set in the same face as the Hebrew and in the green the app uses inside,
so the front door and the product read as one thing. */
/* The wordmark is set, not just typed. One flat line in a fallback serif read
as an accident; this gives it a hierarchy — a small letterspaced possessive
over the name itself in the display face, both in PhilForge's green. The
Hebrew stack is NOT used here: it carries no Latin design, so "PhilForge's
Dōjima" fell through to plain Times. */
.brand{display:flex;align-items:center;gap:12px;color:var(--pf-green);
text-decoration:none}
.brand .bw{display:flex;flex-direction:column;justify-content:center;
line-height:1;gap:4px}
.brand .bw-1{font-family:var(--mono);font-size:9px;letter-spacing:.3em;
text-transform:uppercase;color:var(--brass-hi);opacity:.72}
/* Two owners, two colours, the other way round: the possessive carries the
page's brass, the name carries PhilForge's green. */
.brand .bw-2{font-family:var(--serif);font-size:23px;letter-spacing:.005em;
color:var(--pf-green)}
.brand:hover .bw-1{opacity:1}
/* Phil's own mark, cropped to the shield — the wordmark and tagline that sit
under it in the source file are illegible below ~60px and would only repeat
the words next to it. The hairline frame is what ties an outside piece of
artwork into the obsidian-and-brass vocabulary. */
/* The artwork is a shield, not a square. A square box with object-fit:cover
sliced its point off, which is exactly what Phil saw; height-only sizing
with contain lets the whole silhouette through, and the shield's own edge
replaces the hairline frame a rectangle needed. */
.brand .mark{height:36px;width:auto;flex:none;display:block;
object-fit:contain;filter:saturate(.94) contrast(1.02)
drop-shadow(0 2px 9px rgba(0,0,0,.6))}
.navlinks{display:flex;align-items:center;gap:30px}
/* The front door has always forked to two desks — that is what "one method,
two markets" means, and a single "Enter" threw the choice away. Absolute
URLs, so the pair reads and behaves identically on both hosts. */
.desks{display:flex;align-items:center;gap:10px;padding:5px 13px;
border:1px solid var(--hairline-hi);border-radius:2px}
.desks i{font-style:normal;color:var(--brass);opacity:.55;font-size:11px}
.desks a{font-size:12px;letter-spacing:.02em}
.desks a::after{bottom:-1px}
/* An approved viewer should not have to scroll the whole story to find the
door. Quieter than the desks — it is a way back in, not an invitation. */
/* NOTE: this colour is dormant on the desktop bar and deliberately left so.
`.navlinks a` below outranks a lone class, so the link renders in --ink, and
at 13px --ink-lo would sit at 4.08:1 on the obsidian ground — under the 4.5
floor. The sheet's rule is written as `.navlinks a.navviewer` where it does
need to win. */
.navviewer{color:var(--ink-lo)}
.navviewer:hover{color:var(--brass-hi)}
.navlinks a{font-size:13px;color:var(--ink);letter-spacing:.005em;position:relative;padding:4px 0}
.navlinks a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
background:var(--brass);transition:right .34s cubic-bezier(.2,.7,.2,1)}
.navlinks a:hover{color:var(--ink-hi)}
.navlinks a:hover::after{right:0}
.navcta{border:1px solid var(--hairline-hi);border-radius:2px;padding:9px 17px !important;
font-size:12.5px !important;color:var(--ink-hi) !important;
transition:border-color .3s,background .3s,color .3s}
.navcta::after{display:none}
.navcta:hover{border-color:var(--brass);background:var(--brass-dim)}
/* Hiding the links alone would leave the desk pair as an empty hairline box.
The Markets cards carry the same fork further down the page. */
/* The right-hand group. On a wide screen it reads exactly as one row of links
did before: same 30px rhythm, the CTA last. On a phone the links leave the
row and the CTA and the menu control stay in it. */
.navright{display:flex;align-items:center;gap:30px}
.navtoggle{display:none}
@media(max-width:820px){
/* Was: every link but the CTA set to display:none — which is how the viewer
sign-in, both desks and all four section links went missing on a phone.
They drop into a sheet under the bar instead. */
.navright{gap:14px}
.navtoggle{display:inline-flex;align-items:center;background:none;
border:1px solid var(--hairline-hi);border-radius:2px;padding:9px 14px;
font-family:var(--mono);font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink);cursor:pointer;
transition:border-color .3s ease,background .3s ease}
.navtoggle[aria-expanded="true"]{border-color:var(--brass);background:var(--brass-dim);
color:var(--brass-hi)}
.navlinks{position:fixed;top:68px;left:0;right:0;
flex-direction:column;align-items:stretch;gap:0;
background:rgba(6,7,10,.97);backdrop-filter:blur(14px) saturate(1.2);
-webkit-backdrop-filter:blur(14px) saturate(1.2);
border-bottom:1px solid var(--hairline);
max-height:0;overflow:hidden;visibility:hidden;
transition:max-height .38s cubic-bezier(.22,.61,.36,1),visibility 0s linear .38s}
.navlinks.open{max-height:calc(100svh - 68px);overflow-y:auto;visibility:visible;
transition:max-height .38s cubic-bezier(.22,.61,.36,1),visibility 0s}
/* Full-width rows at a size a thumb can hit — 15px, not the 13px of the
desktop row, and 16px of vertical padding each side of the text. */
.navlinks a{font-size:15px;padding:16px var(--gut);border-top:1px solid var(--hairline)}
.navlinks a::after{display:none}
.navlinks > a:first-child{border-top:0}
/* The desk pair keeps its own shape: one row, both doors, side by side. */
.desks{display:flex;justify-content:flex-start;gap:14px;
margin:0;padding:16px var(--gut);background:none;border-radius:0;
border:0;border-top:1px solid var(--hairline)}
/* The row rule above gives every link its own separator; the two desk links
sit INSIDE one row and must not each draw one over their own text. */
.desks a{font-size:15px;padding:0;border-top:0}
/* In the sheet it takes the brass. Every other row is a place on this page;
this one is a door, and the sheet is where someone goes to look for it. */
.navlinks a.navviewer{color:var(--brass-hi)}
}
/* ══ HERO ═════════════════════════════════════════════════════════ */
/* The hero is bottom-aligned, so a full-screen minimum would park the headline
a whole screen below the epigraph. It asks only for what the first screen has
left after the epigraph (~340px) AND the proof tape that follows it (~62px),
so the opening screen reads verse → headline → tape with nothing cut off.
The content is taller than this minimum on short screens, so the film keeps
its height there. Both subtractions are measured — verify_epigraph.js fails
if either drifts. */
.hero{position:relative;min-height:calc(100svh - 392px);display:flex;align-items:flex-end;
overflow:hidden;isolation:isolate}
.hero-plate{position:absolute;inset:-6% -6% -6% -6%;z-index:-3;
background-size:cover;background-position:center 42%;
will-change:transform;transform:scale(1.06);
animation:kenburns 26s ease-in-out infinite alternate}
@keyframes kenburns{
from{transform:scale(1.06) translate3d(0,0,0)}
to{transform:scale(1.15) translate3d(-1.4%,-1.6%,0)}
}
/* three-layer grade: warm the lantern side, sink the ground, seal the type well */
.hero-grade{position:absolute;inset:0;z-index:-2;
background:
radial-gradient(120% 80% at 78% 30%, rgba(201,162,39,.20), transparent 58%),
linear-gradient(180deg, rgba(6,7,10,.74) 0%, rgba(6,7,10,.30) 34%, rgba(6,7,10,.86) 78%, var(--void) 100%),
linear-gradient(90deg, rgba(6,7,10,.80) 0%, rgba(6,7,10,.16) 62%, rgba(6,7,10,.44) 100%)}
.hero-vig{position:absolute;inset:0;z-index:-1;
box-shadow:inset 0 0 220px 60px rgba(6,7,10,.85)}
.hero .wrap{padding-top:6px;padding-bottom:clamp(10px,1.5vh,16px)}
.hero h1{max-width:17ch}
.hero .kicker{margin-bottom:26px}
.hero-sub{margin:12px 0 0;max-width:54ch;font-size:clamp(16px,1.5vw,19px);line-height:1.45;color:#C8D1DA}
.hero-sub b{color:var(--ink-hi);font-weight:500}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;align-items:center}
/* the word-by-word rise */
.rise{display:inline-block;overflow:hidden;vertical-align:bottom}
.rise > span{display:inline-block;transform:translateY(112%);opacity:0;
animation:riseUp .95s cubic-bezier(.16,.84,.28,1) forwards}
@keyframes riseUp{to{transform:translateY(0);opacity:1}}
.btn{display:inline-flex;align-items:center;gap:10px;
font-family:var(--sans);font-size:14px;letter-spacing:.005em;
padding:14px 24px;border-radius:2px;border:1px solid transparent;cursor:pointer;
transition:transform .28s cubic-bezier(.2,.7,.2,1),background .28s,border-color .28s,color .28s}
.btn-p{background:var(--brass);color:#0A0B0D;font-weight:600}
.btn-p:hover{background:var(--brass-hi);transform:translateY(-2px)}
.btn-g{border-color:var(--hairline-hi);color:var(--ink-hi);background:rgba(11,14,19,.5)}
.btn-g:hover{border-color:var(--brass);background:var(--brass-dim);transform:translateY(-2px)}
.btn .ar{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.btn:hover .ar{transform:translateX(4px)}
/* Retired: the opening screen now ends on the proof tape, which says
"there is more" better than the word does — and at this density the cue
printed straight through the sub-heading. */
.scrollcue{display:none !important;position:absolute;left:var(--gut);bottom:22px;align-items:center;gap:12px;
font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
color:var(--ink-lo);opacity:0;animation:fadeIn .8s 2.4s forwards}
.scrollcue i{display:block;width:44px;height:1px;background:var(--hairline-hi);position:relative;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;inset:0;background:var(--brass);
animation:sweep 2.6s cubic-bezier(.6,0,.3,1) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
@keyframes fadeIn{to{opacity:1}}
/* ══ PROOF TAPE ═══════════════════════════════════════════════════ */
.tape{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
background:var(--obsidian);overflow:hidden;position:relative;z-index:2}
.tape::before,.tape::after{content:"";position:absolute;top:0;bottom:0;width:110px;z-index:3;pointer-events:none}
.tape::before{left:0;background:linear-gradient(90deg,var(--obsidian),transparent)}
.tape::after{right:0;background:linear-gradient(270deg,var(--obsidian),transparent)}
.tape-run{display:flex;width:max-content;animation:run 46s linear infinite}
.tape:hover .tape-run{animation-play-state:paused}
@keyframes run{to{transform:translateX(-50%)}}
.tape-i{display:flex;align-items:baseline;gap:11px;padding:9px 30px;white-space:nowrap;
border-right:1px solid var(--hairline)}
.tape-i .v{font-family:var(--mono);font-size:14px;color:var(--ink-hi);font-variant-numeric:tabular-nums}
.tape-i .v.up{color:var(--jade)}
.tape-i .v.dn{color:var(--vermilion)}
.tape-i .l{font-size:11.5px;color:var(--ink-lo);letter-spacing:.02em}
/* ══ SECTIONS ═════════════════════════════════════════════════════ */
section{position:relative}
/* the nav is fixed, so an anchor jump must not park the heading under it */
section[id],header[id]{scroll-margin-top:88px}
.band{padding:clamp(80px,11vh,132px) 0}
.band-line{border-top:1px solid var(--hairline)}
.sechead{display:flex;align-items:baseline;gap:18px;margin-bottom:14px}
.sechead .rule{flex:1;height:1px;background:var(--hairline);position:relative;top:-4px}
/* reveal */
.rv{opacity:0;transform:translateY(26px);
transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.09s}.rv[data-d="2"]{transition-delay:.18s}
.rv[data-d="3"]{transition-delay:.27s}.rv[data-d="4"]{transition-delay:.36s}
.rv[data-d="5"]{transition-delay:.45s}.rv[data-d="6"]{transition-delay:.54s}
/* hairline that draws itself */
.drawline{height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;
transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.drawline.in{transform:scaleX(1)}
/* ══ ACTS (plate + copy) ══════════════════════════════════════════ */
.act{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(28px,4.4vw,72px);align-items:center}
.act.flip .act-fig{order:2}
@media(max-width:900px){.act{grid-template-columns:1fr}.act.flip .act-fig{order:0}}
.act-fig{position:relative;border:1px solid var(--hairline);border-radius:3px;
overflow:hidden;background:var(--obsidian);min-width:0}
.act-fig .ph{position:relative;overflow:hidden;aspect-ratio:16/10}
.act-fig .ph img{width:100%;height:100%;object-fit:cover;
transform:scale(1.09);transition:transform 1.6s cubic-bezier(.2,.7,.2,1),filter 1.6s ease;
filter:saturate(.82) contrast(1.05)}
.act-fig.in .ph img{transform:scale(1)}
.act-fig .ph::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,transparent 42%,rgba(6,7,10,.62) 100%)}
/* ink wipe reveal */
.act-fig .wipe{position:absolute;inset:0;background:var(--void);z-index:3;
transform-origin:right;transition:transform 1.15s cubic-bezier(.72,0,.2,1)}
.act-fig.in .wipe{transform:scaleX(0)}
.act-cap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
padding:13px 16px;border-top:1px solid var(--hairline);
font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-lo)}
.act-body h2{margin-bottom:18px}
.actno{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--brass);
display:block;margin-bottom:16px}
/* the chalk numbers over plate III */
.chalk{position:absolute;z-index:4;left:0;right:0;bottom:54px;
display:flex;justify-content:center;gap:clamp(10px,2.4vw,30px);flex-wrap:wrap;padding:0 16px}
.chalk .c{font-family:var(--mono);font-size:clamp(11px,1.3vw,14px);
color:rgba(244,246,248,.94);text-shadow:0 0 18px rgba(6,7,10,.95),0 1px 3px #000;
opacity:0;transform:translateY(7px);letter-spacing:.04em}
.act-fig.in .chalk .c{animation:chalkIn .62s cubic-bezier(.2,.7,.2,1) forwards}
.act-fig.in .chalk .c:nth-child(1){animation-delay:1.15s}
.act-fig.in .chalk .c:nth-child(2){animation-delay:1.34s}
.act-fig.in .chalk .c:nth-child(3){animation-delay:1.53s}
.act-fig.in .chalk .c:nth-child(4){animation-delay:1.72s}
@keyframes chalkIn{to{opacity:1;transform:none}}
.chalk .c b{color:var(--brass-hi);font-weight:400}
/* lantern flicker over the candle */
.flame{position:absolute;z-index:2;width:34%;aspect-ratio:1;left:6%;top:8%;
background:radial-gradient(circle,rgba(255,190,90,.30),transparent 66%);
mix-blend-mode:screen;animation:flick 3.1s ease-in-out infinite}
@keyframes flick{
0%,100%{opacity:.62;transform:scale(1)}
18%{opacity:.92;transform:scale(1.06)}
31%{opacity:.55;transform:scale(.97)}
47%{opacity:.86;transform:scale(1.04)}
63%{opacity:.60;transform:scale(1)}
81%{opacity:.95;transform:scale(1.07)}
}
/* ══ NUMBER CARDS ═════════════════════════════════════════════════ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:1px;
background:var(--hairline);border:1px solid var(--hairline);border-radius:3px;overflow:hidden}
.stat{background:var(--obsidian);padding:26px 24px 24px;min-width:0;
transition:background .4s ease}
.stat:hover{background:var(--slate)}
.stat .n{font-family:var(--mono);font-size:clamp(25px,3vw,34px);color:var(--ink-hi);
font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
.stat .n.up{color:var(--jade)}.stat .n.dn{color:var(--vermilion)}
.stat .k{font-size:12.5px;color:var(--ink);margin-top:12px}
.stat .s{font-size:11.5px;color:var(--ink-lo);margin-top:5px;line-height:1.5}
/* ══ CHART ════════════════════════════════════════════════════════ */
.chartcard{border:1px solid var(--hairline);border-radius:3px;background:var(--obsidian);overflow:hidden}
.chart-h{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;
padding:22px 24px 18px;border-bottom:1px solid var(--hairline)}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-lo)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i:not([lang]){width:14px;height:2px;display:block;border-radius:1px}
.chart-b{padding:16px 10px 10px;position:relative}
canvas{display:block;width:100%;touch-action:pan-y}
.chart-f{padding:12px 24px 18px;font-size:11.5px;color:var(--ink-lo);border-top:1px solid var(--hairline)}
#tip{position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-118%);
background:rgba(11,14,19,.97);border:1px solid var(--hairline-hi);border-radius:3px;
padding:9px 12px;font-family:var(--mono);font-size:11px;color:var(--ink-hi);white-space:nowrap;
transition:opacity .16s ease;z-index:6;box-shadow:0 8px 30px rgba(0,0,0,.6)}
/* ══ AUDIENCE ═════════════════════════════════════════════════════ */
.aud{display:grid;grid-template-columns:repeat(auto-fit,minmax(276px,1fr));gap:1px;
background:var(--hairline);border:1px solid var(--hairline);border-radius:3px;overflow:hidden}
.acard{background:var(--obsidian);padding:32px 28px 30px;min-width:0;position:relative;
transition:background .45s ease}
.acard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--brass);
transform:scaleY(0);transform-origin:top;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.acard:hover{background:var(--slate)}
.acard:hover::before{transform:scaleY(1)}
.acard h3{margin:14px 0 12px}
.acard ul{list-style:none;padding:0;margin:18px 0 0}
.acard li{position:relative;padding-left:20px;font-size:13.5px;color:var(--ink);
margin-bottom:10px;line-height:1.55}
.acard li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:1px;background:var(--brass)}
.acard .who{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
/* ══ SPLIT (two markets) ══════════════════════════════════════════ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hairline);
border:1px solid var(--hairline);border-radius:3px;overflow:hidden}
@media(max-width:760px){.split{grid-template-columns:1fr}}
.sp{background:var(--obsidian);padding:34px 30px;min-width:0;position:relative;overflow:hidden}
.sp .mark{font-family:var(--serif);font-size:23px;color:var(--ink-hi);letter-spacing:-.01em}
.sp .dom{font-family:var(--mono);font-size:10.5px;color:var(--brass);letter-spacing:.2em;margin-top:6px}
.sp p{font-size:14px;margin-top:18px}
.sp .rows{margin-top:22px;border-top:1px solid var(--hairline)}
.sp .row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
border-bottom:1px solid var(--hairline);font-size:12.5px}
.sp .row b{font-family:var(--mono);color:var(--ink-hi);font-weight:400;text-align:right}
/* Label OVER value, both flush left — not label-left/value-right. These cards
live inside .act's two-column layout, so they are ~215px wide whatever the
viewport does; a viewport media query never reaches them. At that measure a
right-aligned value wrapped mid-phrase — "NIFTY ·" above "BANKNIFTY",
ragged against its own label. Stacking is the only alignment that holds at
every width, so it is unconditional. */
.sp .row{flex-direction:column;align-items:flex-start;gap:3px;padding:9px 0}
.sp .row b{text-align:left}
/* The two desks are the way in. This page is the front door of BOTH sites, so
each card links to its own terminal by absolute URL and reads the same on
either host. */
a.sp{display:block;text-decoration:none;color:inherit;
transition:background .35s ease,box-shadow .35s ease}
a.sp:hover{background:#0E1626;box-shadow:inset 0 0 0 1px var(--hairline-hi)}
/* .18em tracking broke this line in two inside a ~215px card and orphaned the
arrow on the second line; .09em holds it on one. */
a.sp .enter{display:block;margin-top:18px;font-family:var(--mono);font-size:11px;
letter-spacing:.09em;text-transform:uppercase;color:var(--brass);white-space:nowrap}
a.sp:hover .enter{color:var(--brass-hi)}
a.sp .enter .ar{transition:transform .3s ease;display:inline-block}
a.sp:hover .enter .ar{transform:translateX(4px)}
/* ══ CTA ══════════════════════════════════════════════════════════ */
.cta{position:relative;overflow:hidden;isolation:isolate;
padding:clamp(90px,14vh,150px) 0;border-top:1px solid var(--hairline)}
.cta-plate{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center 60%;
filter:saturate(.5) contrast(1.06);will-change:transform}
.cta-grade{position:absolute;inset:0;z-index:-1;
background:linear-gradient(180deg,var(--void) 0%,rgba(6,7,10,.90) 42%,rgba(6,7,10,.95) 100%)}
.form{margin-top:34px;display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:3px}
.fld{background:rgba(11,14,19,.9);padding:16px 18px;min-width:0}
.fld label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
text-transform:uppercase;color:var(--ink-lo);margin-bottom:8px}
.fld input,.fld select{width:100%;background:transparent;border:0;outline:none;
color:var(--ink-hi);font-family:var(--sans);font-size:14.5px;padding:2px 0}
.fld input::placeholder{color:#414B57}
.fld:focus-within{background:var(--slate)}
.fld:focus-within label{color:var(--brass)}
.fld select option{background:var(--obsidian)}
.formnote{margin-top:16px;font-size:12.5px;color:var(--ink-lo);max-width:60ch}
/* The way IN for someone Phil has already approved. It belongs here, at the end
of the access story — request, conversation, then a door — and not in the nav,
which is for the two desks. Absolute URL: the viewer role lives on PhilForge,
so this reads the same from either host. */
.signin{margin-top:18px;font-size:13px;color:var(--ink-lo);max-width:60ch}
.signin a{color:var(--brass-hi);border-bottom:1px solid var(--hairline-hi);
padding-bottom:1px;transition:border-color .3s ease}
.signin a:hover{border-bottom-color:var(--brass)}
.signin a .ar{transition:transform .3s ease;display:inline-block}
.signin a:hover .ar{transform:translateX(3px)}
.signin-note{display:block;margin-top:6px;font-family:var(--mono);font-size:10.5px;
letter-spacing:.06em;color:var(--ink-lo);opacity:.72}
/* ── The desk picker ─────────────────────────────────────────────
Phil, 2026-08-17: "when I click viewer's login, I should be asked equities
or crypto — from there it has to go to crypto or equities." Both viewer
sign-in links open this instead of pointing at one desk; each choice is an
absolute URL, so the same file answers correctly from either host.
Opened by JS on click, and by :target without it — the links' href is
#viewerpick, so a no-script visitor still gets the choice, not a dead link.
No inline handlers, no inline styles that CSP would drop. */
.viewerpick{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;
padding:24px;background:rgba(6,7,10,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.viewerpick.open,.viewerpick:target{display:flex}
.viewerpick-card{position:relative;width:min(660px,100%);background:var(--obsidian);
border:1px solid var(--hairline-hi);padding:34px 30px 28px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.viewerpick-eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
color:var(--brass);margin:0}
.viewerpick-card h3{margin-top:10px}
.viewerpick-desks{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hairline);
border:1px solid var(--hairline);margin-top:22px}
.viewerpick-desks a.sp{padding:22px 20px}
.viewerpick-desks a.sp .enter{margin-top:14px}
.viewerpick-desks a.sp .dom{white-space:nowrap;letter-spacing:.14em}
.viewerpick-note{display:block;margin-top:16px;font-family:var(--mono);font-size:10.5px;
letter-spacing:.06em;color:var(--ink-lo);opacity:.72}
.viewerpick-close{position:absolute;top:10px;right:10px;width:36px;height:36px;display:flex;
align-items:center;justify-content:center;background:transparent;border:1px solid transparent;
border-radius:2px;color:var(--ink-lo);font:400 20px/1 var(--sans);cursor:pointer;
transition:color .2s ease,border-color .2s ease}
.viewerpick-close:hover{color:var(--ink-hi);border-color:var(--hairline-hi)}
@media (max-width:560px){
.viewerpick{padding:14px}
.viewerpick-card{padding:28px 20px 22px}
.viewerpick-desks{grid-template-columns:1fr}
}
/* ══ FOOTER ═══════════════════════════════════════════════════════ */
footer{border-top:1px solid var(--hairline);padding:46px 0 40px;background:var(--void)}
.frow{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:flex-start}
.fdis{font-size:11.5px;color:var(--ink-lo);max-width:70ch;margin-top:22px;line-height:1.6}
/* ══ EPIGRAPH ═════════════════════════════════════════════════════ */
/* Ecclesiastes 10:19. The Hebrew is the verse's own closing phrase —
וְהַכֶּ֖סֶף, v'hakesef, "and the money" — set right-to-left in its own
lane. The cantillation mark under the kaf only renders in a font that
carries te'amim, and the CSP forbids font CDNs, so the stack is all
system faces with a plain serif at the end. */
.epi{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
background:linear-gradient(180deg,var(--void),var(--obsidian) 52%,var(--void));
padding:clamp(58px,9vh,104px) 0;text-align:center;position:relative}
/* NOT overflow:hidden. The band's last line — the Ecclesiastes citation — is a
.rv, and an un-revealed .rv is translated DOWN 26px. With only 2px of bottom
padding here, that painted box fell outside the clip, so the observer saw
zero of it, never added .in, and the transform never released: the line was
invisible forever and no amount of scrolling could bring it back. The clip
bought nothing — the ::after glow is inset:0 and cannot overflow.
.epi::after{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(60% 70% at 50% 42%,rgba(201,162,39,.09),transparent 70%)}
.epi .wrap{position:relative;z-index:1}
/* As the opening of the page it sits under the fixed nav, so it clears it by
hand. It is deliberately NOT tall: it must leave the port film at least the
lower half of the first screen, or the picture the page is built on never
gets seen. Verified at 1440x900 — keep it under ~48svh. */
.epi-open{border-top:0;display:flex;align-items:center;
padding-top:74px;padding-bottom:2px}
/* Every
on this page carries `max-width:62ch` with no auto margins, so a
paragraph narrower than its column silently hugs the left edge. Each line
here sets its own inline margins; do not drop them. */
.heb{direction:rtl;unicode-bidi:isolate;font-family:var(--heb);
font-size:clamp(46px,8.5vw,96px);line-height:1.0;color:var(--brass-hi);
font-weight:400;letter-spacing:.01em;
text-shadow:0 0 34px rgba(201,162,39,.30);
max-width:none;margin:0 auto;padding-bottom:.08em}
.epi-tr{margin:4px auto 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;
text-transform:uppercase;color:var(--ink-lo);max-width:none}
.epi-rule{width:64px;height:1px;background:var(--hairline-hi);margin:8px auto}
/* Two lines, broken where the proverb itself turns: the feast and the wine on
one, the answer on the other. The measure is wide enough to hold the first
half; below 800px the forced break is dropped so it can wrap naturally. */
.epi-v{font-family:var(--serif);font-size:clamp(18px,2.4vw,29px);line-height:1.34;
color:var(--ink-hi);max-width:58ch;margin:0 auto;font-style:italic;
text-wrap:pretty}
@media(max-width:800px){.epi-br{display:none}.epi-v{max-width:26ch}}
.epi-v b{font-style:normal;font-weight:400;color:var(--brass-hi)}
.epi-cite{margin:6px auto 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;
text-transform:uppercase;color:var(--brass);max-width:none}
/* A 13" laptop is ~800px tall, and the verse plus the headline have to share
that one screen down to "We never needed a fifth." Both give up a little air
here rather than letting the last line slide under the fold. */
/* Short screens give up SPACE, never type size. The verse and the headline are
the page; shrinking them to win a few pixels was the wrong trade. */
@media (max-height:880px) and (min-width:880px){
/* padding-top stays 74 — it is what clears the fixed nav, not decoration.
Everything else here is air, and the Hebrew citation had to be paid for
out of air rather than out of type sizes. */
.epi-open{padding-top:74px;padding-bottom:0}
.epi-tr{margin-top:1px}
.epi-rule{margin:5px auto}
.epi-cite{margin:4px auto 0}
.hero .wrap{padding-top:0;padding-bottom:2px}
.hero-sub{margin-top:7px}
.hero-actions{margin-top:6px}
.tape-i{padding-top:4px;padding-bottom:4px}
.hero-actions .btn{padding-top:11px;padding-bottom:11px}
}
@media (max-width:700px){
.epi-open{padding-top:66px;padding-bottom:4px}
.epi-rule{margin:8px auto}
.epi-cite{margin:6px auto 0}
.hero .wrap{padding-top:10px;padding-bottom:10px}
.hero-sub{margin-top:12px}
.hero-actions{margin-top:12px}
}
/* ══ FILM ═════════════════════════════════════════════════════════ */
/* The plates keep moving on their own; the film simply lies over them
and fades up once it is actually playing, so a blocked or slow clip
is never visible as a gap. */
.hero-film{position:absolute;inset:0;z-index:-3;width:100%;height:100%;
object-fit:cover;object-position:50% 54%;
filter:saturate(.60) contrast(1.04) brightness(.93);
opacity:0;transition:opacity 1.6s ease}
.hero-film.lit{opacity:1}
/* while the film carries the motion, the plate's own drift stops —
two moving backgrounds at once is what cost us a machine before */
.hero-plate.hushed{animation-play-state:paused}
.act-fig .ph .film{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;filter:saturate(.82) contrast(1.05);
opacity:0;transition:opacity 1.1s ease}
.act-fig .ph .film.lit{opacity:1}
/* The figure is 16:10 and the films are 16:9, so cover eats ~5% off each side.
Usually that is invisible — but Plate IV's wax candle stands in the right
hand strip, and centring the crop cut its flame clean off. Bias this one
frame right; the only thing lost on the left is the edge of the book. */
.act-fig .ph .film.film-right{object-position:90% 50%}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
transition-duration:.001ms !important;scroll-behavior:auto !important}
.rv{opacity:1;transform:none}.act-fig .wipe{display:none}
.chalk .c{opacity:1;transform:none}.drawline{transform:scaleX(1)}
.hero-film,.act-fig .ph .film{display:none}
}