/* =====================================================================
IVAI public site: the homepage and its pages (how-it-works/, team/, news/)
The deck's language, run as a scrolling site: ink and paper panels in turn,
Barlow Condensed headlines, JetBrains Mono for the furniture, and one hue per
panel from the deck's five. A panel names its hue with data-hue, which scopes
--accent to it; js/site.js mirrors the hue of whichever panel is under the
header onto , so the header's BUY IVAI moves with you down the page,
the way the deck's SCHEDULE CALL button moves with the slide.
===================================================================== */
:root{
--ink:#0B0B09; --ink-2:#14140F; --ink-3:#1A1A13;
--paper:#EAE7D8; --paper-2:#E0DDCB; --paper-3:#F1EFE3;
--line-d:#262620; --line-p:#C7C3AC;
--text-d:#EDEBDF; --text-p:#181810; --body-p:#3A382B;
--mute-d:#B4B1A2; --mute-p:#5E5C4B;
--font-display:"Barlow Condensed",sans-serif;
--font-mono:"JetBrains Mono",Menlo,monospace;
--font-body:"Inter",sans-serif;
--head-h:58px;
/* the deck's palette. The brights are for ink; on paper they sit at 1-2.4:1 and fail as
text, so each has a darkened -d twin that clears 4.6:1 there. */
--c-ice:#01FDF6; --c-mint:#03FCBA; --c-peri:#CBBAED; --c-coral:#FF5C7A; --c-highlight:#FFFF33;
--c-ice-d:#0A6B68; --c-mint-d:#06705A; --c-peri-d:#5B46A0; --c-coral-d:#CD0026; --c-highlight-d:#686800;
--accent:var(--c-coral); --accent-deep:var(--c-coral-d);
}
[data-hue="coral"] {--accent:var(--c-coral); --accent-deep:var(--c-coral-d)}
[data-hue="mint"] {--accent:var(--c-mint); --accent-deep:var(--c-mint-d)}
[data-hue="ice"] {--accent:var(--c-ice); --accent-deep:var(--c-ice-d)}
[data-hue="peri"] {--accent:var(--c-peri); --accent-deep:var(--c-peri-d)}
[data-hue="highlight"]{--accent:var(--c-highlight); --accent-deep:var(--c-highlight-d)}
*{margin:0;padding:0;box-sizing:border-box}
address{font-style:normal}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 16px);background:var(--ink)}
body{position:relative;background:var(--ink);color:var(--text-d);font-family:var(--font-body);
font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--accent);color:var(--ink)}
[hidden]{display:none !important}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--accent);color:var(--ink);
font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.14em;padding:10px 14px;transition:top .15s}
.skip:focus{top:10px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tone-paper :focus-visible{outline-color:var(--accent-deep)}
/* ---------- top bar: the deck's, plus the pages ---------- */
.site-head{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(11,11,9,.86);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line-d)}
/* wider than the body on big screens, capped so it isn't lost on an ultrawide */
.site-head .wrap{max-width:none;padding:0 clamp(24px, calc((100vw - 1280px) / 2 + 24px), 112px)}
.nav{display:flex;align-items:stretch;justify-content:space-between;height:var(--head-h);gap:20px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
/* ivai.svg ships in its cover dodge colour; on the dark chrome the mark reads white */
.brand-logo{height:24px;width:auto;filter:brightness(0) invert(1)}
.brand span{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;color:var(--mute-d);
border-left:1px solid var(--line-d);padding-left:12px;white-space:nowrap}
.nav-right{display:flex;align-items:center;gap:26px}
.nav-links{display:flex;gap:24px}
.nav-links a{position:relative;font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
color:var(--mute-d);white-space:nowrap;padding:6px 0;transition:color .15s}
.nav-links a:hover{color:var(--accent)}
.nav-links a[aria-current="page"]{color:var(--text-d)}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:.18em;bottom:-2px;height:2px;background:var(--accent)}
.nav-toggle{display:none;background:none;border:1px solid var(--line-d);cursor:pointer;
font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;color:var(--mute-d);padding:9px 12px;
align-items:center;gap:9px;transition:color .15s,border-color .15s}
.nav-toggle:hover,.nav-toggle[aria-expanded="true"]{color:var(--accent);border-color:var(--accent)}
.nav-toggle i{display:grid;gap:3px;width:13px}
.nav-toggle i::before,.nav-toggle i::after{content:"";height:1.5px;background:currentColor;transition:transform .2s}
.nav-toggle[aria-expanded="true"] i::before{transform:translateY(2.25px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] i::after{transform:translateY(-2.25px) rotate(-45deg)}
/* the phone menu: a sheet under the bar, one big line per page */
.mnav{border-top:1px solid var(--line-d);background:rgba(11,11,9,.97)}
.mnav a{display:flex;align-items:baseline;gap:14px;padding:16px 24px;border-bottom:1px solid var(--line-d);
font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:28px;line-height:1;color:var(--text-d)}
.mnav a i{font-style:normal;font-family:var(--font-mono);font-weight:400;font-size:10px;letter-spacing:.2em;color:var(--mute-d)}
.mnav a[aria-current="page"],.mnav a:hover{color:var(--accent)}
.mnav a:last-child{border-bottom:0}
/* the name steps aside where the full nav needs the room, and on a phone */
@media(max-width:960px) and (min-width:881px){ .brand span{display:none} }
@media(max-width:600px){ .brand span{display:none} }
@media(max-width:880px){
.nav-links{display:none}
.nav-toggle{display:inline-flex}
.nav-right{gap:10px}
}
@media(min-width:881px){ .mnav{display:none !important} }
/* the announcement over the bar: one line on a coral ground, whatever the page's hue, the whole
of it a link, folded away once the page moves (html.is-scrolled, from js/site.js). Animating the row track from 1fr to 0fr lets it
collapse to nothing without guessing its height, which changes when it wraps. */
.notice{display:grid;grid-template-rows:1fr;transition:grid-template-rows .35s cubic-bezier(.4,0,.2,1)}
.notice-in{display:block;overflow:hidden;min-height:0;background:var(--c-coral);color:var(--ink)}
.notice-in:focus-visible{outline-color:var(--ink);outline-offset:-3px}
.notice-row{display:flex;align-items:center;justify-content:center;gap:14px;padding:8px 24px;
font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;line-height:1.5;text-align:center}
.notice-tag{flex:0 0 auto;background:var(--ink);color:var(--c-coral);font-weight:700;padding:2px 7px}
.notice-go{flex:0 0 auto;font-weight:700;white-space:nowrap;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;
padding:2px 6px;margin:-2px -6px -2px 4px;transition:background-color .15s,color .15s}
.notice-in:hover .notice-go{background:var(--ink);color:var(--c-coral)}
.nt-short,.ng-short{display:none}
html.is-scrolled .notice{grid-template-rows:0fr}
@media(max-width:760px){
.nt-long,.ng-long,.notice-tag{display:none}
.nt-short,.ng-short{display:inline}
.notice-row{gap:12px;padding:8px 16px;font-size:10px;letter-spacing:.08em}
}
@media (prefers-reduced-motion:reduce){ .notice{transition:none} }
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--accent);color:var(--ink);
font-family:var(--font-mono);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
padding:11px 22px;border:1px solid var(--accent);cursor:pointer;white-space:nowrap;
transition:background-color .15s,color .15s,border-color .15s}
.btn:hover{background:transparent;color:var(--accent)}
.btn--ghost{background:transparent;color:var(--accent)}
.btn--ghost:hover{background:var(--accent);color:var(--ink)}
.tone-paper .btn--ghost{color:var(--accent-deep);border-color:var(--accent-deep)}
.tone-paper .btn--ghost:hover{background:var(--accent-deep);color:var(--paper-3)}
.btn--lg{font-size:clamp(15px,1.6vw,20px);letter-spacing:.24em;padding:clamp(18px,2.4vw,24px) 44px}
.btn--block{display:flex;width:100%}
.btn .arr{font-family:var(--font-body);font-weight:500;letter-spacing:0}
.cta-row{display:flex;gap:14px 22px;margin-top:30px;flex-wrap:wrap;align-items:center}
.cta-row .more{color:var(--text-d)}
.cta-row .more:hover{color:var(--accent)}
@media(max-width:620px){ .btn{padding:10px 16px} .btn--lg{padding:20px 24px} }
/* BUY IVAI: the propagating wavefront (accent <-> ink), ported from the deck.
--w-rest is the accent of wherever the button sits, so the header's copy is the colour of
the panel you are reading and moves with it; the one at the foot keeps the footer's hue.
Only the sweep is on hover: the resting colour stays under the cells. The hue change is
eased, so scrolling from one panel into the next reads as the button changing its mind
rather than blinking. */
.buy-prop{--w-rest:var(--accent);position:relative;overflow:hidden;background:var(--w-rest);border-color:var(--w-rest);
transition:background-color .45s ease,border-color .45s ease,color .2s}
.buy-prop:hover{background:var(--w-rest);color:var(--ink)}
.buy-grid{position:absolute;inset:0;display:grid;pointer-events:none;z-index:1}
.buy-grid .cell{background:var(--ink);opacity:0;transform:scale(0);transform-origin:center;will-change:transform,opacity;
transition:transform .34s cubic-bezier(.4,0,.2,1),opacity .34s ease}
.buy-label{position:relative;z-index:2;pointer-events:none;color:var(--ink);transition:color .2s ease}
@media (prefers-reduced-motion:reduce){
.buy-grid{display:none}
.buy-prop:hover{background:var(--ink)}
.buy-prop:hover .buy-label{color:var(--w-rest)}
}
/* ---------- type ---------- */
/* the deck's panel headline: title case, condensed, tight */
.panel-line{font-family:var(--font-display);font-weight:700;line-height:1.02;letter-spacing:.002em;
font-size:clamp(32px,4vw,60px);color:var(--text-d);max-width:21em;margin-bottom:clamp(18px,3vh,30px);text-wrap:balance}
.tone-paper .panel-line{color:var(--text-p)}
html.fonts-loading .panel-line,html.fonts-loading .hero-h,html.fonts-loading .page-h{opacity:0}
/* The deck's highlighter: a marker behind the phrase rather than a colour on it. Drawn as a
background-size so it can sweep in left to right once the line is on screen (.in comes
from the reveal observer); box-decoration-break carries it across a wrap. */
.pl-hl{background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;
background-size:0% 100%;color:inherit;padding:.02em .1em;
-webkit-box-decoration-break:clone;box-decoration-break:clone;
transition:background-size .7s cubic-bezier(.76,0,.24,1) .25s,color .3s ease .45s}
.in .pl-hl,.pl-hl.in{background-size:100% 100%;color:var(--text-p)}
.panel-line:has(.pl-hl){line-height:1.14}
.lede{font-size:17px;line-height:1.75;color:var(--mute-d);max-width:68ch}
.lede b{color:var(--text-d);font-weight:600}
.lede--wide{max-width:80ch}
.tone-paper .lede{color:var(--body-p)}
.tone-paper .lede b{color:var(--text-p)}
.note{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;line-height:1.9;color:var(--mute-d);max-width:960px;margin-top:22px}
.tone-paper .note{color:var(--mute-p)}
.note b{font-weight:700}
.more{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;
text-transform:uppercase;color:var(--accent);border-bottom:1px solid transparent;padding-bottom:3px;transition:border-color .15s,gap .2s}
.more:hover{border-color:currentColor;gap:14px}
button.more{background:none;border:0;border-bottom:1px solid transparent;cursor:pointer;padding:0 0 3px}
.tone-paper .more{color:var(--accent-deep)}
/* ---------- panels ---------- */
.sec{position:relative;padding:clamp(76px,12vh,132px) 0}
.tone-dark{background:var(--ink);color:var(--text-d)}
.tone-paper{background:var(--paper);color:var(--text-p)}
/* the deck's paper grain, over the panel and under its content */
.tone-paper::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.34'/%3E%3C/svg%3E")}
.tone-paper > .wrap{position:relative;z-index:1}
.tone-paper + .tone-paper{border-top:1px solid var(--line-p)} /* two paper panels in a row */
.sec-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap}
.sec-top .panel-line{margin-bottom:0}
.sec-top + *{margin-top:clamp(26px,4vh,44px)}
/* the grain over the whole site, as on the deck */
.site-noise{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='sn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23sn)'/%3E%3C/svg%3E");background-size:300px 300px}
/* ---------- reveal on scroll ----------
Only hidden once the page's head script has marked .js, so a reader without script
gets every block, just without the entrance. */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.js .rv{opacity:1;transform:none;transition:none}
.pl-hl{transition:none}
}
/* =====================================================================
HOME 01 — hero: the deck's cover clip under the old homepage's line
===================================================================== */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
overflow:hidden;background:#000;isolation:isolate;padding-top:calc(var(--head-h) + 64px)}
/* 1920x1080 sources: at most aspects `cover` crops only a few percent */
/* z-index:0 makes the stage its own stacking context, so the clips' z-indexes stay inside it
and the vignette and type keep painting over them */
.hero-photo{position:absolute;inset:0;z-index:0;background:url("../img/hero/generic-chip-cover.webp") center center/cover no-repeat}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;
pointer-events:none;user-select:none;visibility:hidden}
/* A clip with no poster paints its first decoded frame, and the loop's first frame is the lit
chip, so the clips stay invisible until they are genuinely presenting frames. visibility,
not opacity, so the power-on's own fade still works. */
.hero-video.is-live{visibility:visible}
.hero.is-photo-only .hero-video{display:none}
@media (prefers-reduced-motion:reduce){ .hero-video{display:none} }
/* unlit until the power-on has run, so the boot reads as the chip coming up */
.hero.is-preboot .hero-photo{background-image:url("../img/hero/generic-chip-cover-dark.webp")}
.hero-intro{z-index:1;transition:opacity .25s linear}
.hero-intro.is-done{opacity:0}
.hero-vig{position:absolute;inset:0;background:
linear-gradient(90deg, rgba(11,11,9,.62) 0%, rgba(11,11,9,.18) 46%, rgba(11,11,9,0) 70%),
radial-gradient(120% 90% at 62% 42%, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%),
linear-gradient(180deg, rgba(11,11,9,.6) 0%, rgba(11,11,9,0) 24%, rgba(11,11,9,.2) 58%, rgba(11,11,9,.92) 100%)}
@media (prefers-reduced-motion:no-preference){
.hero-photo{animation:coverZoom 1.6s cubic-bezier(.16,1,.3,1) both}
.hero-copy > *{animation:heroIn .9s cubic-bezier(.16,1,.3,1) both}
.hero-copy > :nth-child(2){animation-delay:.12s}
}
@keyframes coverZoom{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes heroIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* width:100% because auto margins on a flex item would otherwise shrink it to its content */
.hero-main{position:relative;z-index:2;width:100%;padding-bottom:clamp(56px,12vh,136px)}
.hero-h{font-family:var(--font-display);font-weight:700;text-transform:uppercase;line-height:.92;letter-spacing:.005em;
font-size:clamp(44px,7vw,108px);color:var(--text-d)}
.hero-h > span,.hero-h > em{display:block}
/* the second line is set in the hero's hue (ice, the same as the footer's line, so the page opens
and closes on one colour) */
.hero-h em{font-style:normal;color:var(--accent)}
/* the copy block is as wide as the headline, and the line under it wraps to that width rather than
setting it (width 0, stretched back to 100%), so it always sits under "Publicly Listed." */
.hero-copy{width:fit-content;max-width:100%}
.hero-sub{margin-top:24px;color:#D6D3C4;font-size:16px;line-height:1.7;width:0;min-width:100%;text-wrap:pretty}
/* =====================================================================
HOME 02 — private AI: the case told as one chart, an ink plate on the paper, three points beside it
===================================================================== */
.opp{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start;margin-top:clamp(30px,4.6vh,48px)}
/* a footnote mark in running text, linked to its source at the foot of the panel */
.ref{font-family:var(--font-mono);font-size:.62em;font-weight:700;vertical-align:super;line-height:0;margin-left:.15em}
.ref a{color:var(--accent-deep)}
.tone-dark .ref a,.opp-chart .ref a{color:var(--accent)}
.ref a:hover{text-decoration:underline}
.opp-chart{background:var(--ink);color:var(--text-d);border:1px solid var(--text-p);
padding:clamp(18px,2.2vw,28px) clamp(16px,2vw,26px) clamp(14px,1.8vw,20px)}
.opp-chart-cap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 18px;
padding-bottom:14px;margin-bottom:clamp(18px,2.6vh,28px);border-bottom:1px solid var(--line-d)}
.opp-chart-cap h3{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.opp-chart-cap p{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-d)}
.chart-svg{width:100%;height:auto;overflow:visible}
.chart-svg .grid{stroke:var(--line-d);stroke-width:1}
.chart-svg .base{stroke:#5E5C4B;stroke-width:1.5}
.chart-svg .ax{fill:#8F8D7C;font:400 10px var(--font-mono);letter-spacing:.06em}
.chart-svg .val{fill:var(--text-d);font:500 10.5px var(--font-mono);opacity:0;transition:opacity .2s}
/* grey bars that rise once the plate is on screen; the latest year is set in the panel's hue */
.b rect{fill:#3A3A30;transform-box:fill-box;transform-origin:50% 100%;transition:fill .2s}
.b:hover rect{fill:#6E6C5E}
.b:hover .val,.b--keep .val{opacity:1}
.b--last rect,.b--last:hover rect{fill:var(--accent)}
.b--last .val{fill:var(--accent);font-weight:700}
.js .opp-chart .b rect{transform:scaleY(0);transition:transform 1s cubic-bezier(.16,1,.3,1) calc(.3s + var(--i) * 70ms),fill .2s}
.js .opp-chart.in .b rect{transform:none}
.js .opp-chart .b--keep .val{opacity:0}
.js .opp-chart.in .b--keep .val{opacity:1;transition-delay:1.5s}
.opp-chart-src{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute-d);
margin-top:12px;padding-top:12px;border-top:1px solid var(--line-d)}
.opp-pts{list-style:none;border-top:1px solid var(--line-p)}
.opp-pts li{padding:clamp(20px,3vh,28px) 0;border-bottom:1px solid var(--line-p)}
.opp-pts .n{display:block;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.22em;color:var(--accent-deep);margin-bottom:10px}
.opp-pts h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(22px,2.1vw,30px);line-height:1;color:var(--text-p)}
.opp-pts p{font-size:15.5px;line-height:1.7;color:var(--body-p);margin-top:10px}
@media (prefers-reduced-motion:reduce){ .js .opp-chart .b rect{transition:none} }
@media(max-width:980px){ .opp{grid-template-columns:1fr} }
/* the SVG scales down with its column, type and all, so a phone gets larger type in its units */
@media(max-width:600px){ .chart-svg .ax{font-size:17px;letter-spacing:0} .chart-svg .val{font-size:17px} }
/* =====================================================================
HOME 03 — the fund: private AI companies inside one listed wrapper
===================================================================== */
/* The frame is the fund. Once on screen it draws itself in the panel's hue, the ticker's tag lands
on its top edge, the four things a listing brings fill in under it (how-it-works/'s step cells),
and then the kinds of company it targets arrive, one by one. The frame is the only outline in the
hue: no corner ticks, and the cells' own accent bars are off here. */
.wrapper{position:relative;margin-top:clamp(44px,6.4vh,68px)}
.wrapper-line{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible;pointer-events:none}
.wrapper-line rect{fill:none;stroke:var(--accent);stroke-width:1.5}
.wrapper-tab{position:absolute;z-index:3;top:0;left:32px;transform:translateY(-50%);display:flex;align-items:center;gap:12px;
background:var(--accent);color:var(--ink);font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;padding:8px 12px 7px}
.wrapper-tab b{font-weight:700}
.wrapper-tab span{padding-left:12px;border-left:1px solid rgba(11,11,9,.35)}
.js .wrapper-line rect{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s cubic-bezier(.65,0,.35,1) .2s}
.js .wrapper.in .wrapper-line rect{stroke-dashoffset:0}
.js .wrapper-tab{opacity:0;transition:opacity .5s ease 1.3s}
.js .wrapper.in .wrapper-tab{opacity:1}
/* The four things a listing brings describe the vehicle, not what is in it, so they are the frame's
lid: flush to its edges, tinted and divided in its hue, and closed off from the holdings below by a
crossbar of the same line. The tag sits on the lid's top edge. */
.wrapper .yl-steps{grid-template-columns:repeat(4,minmax(0,1fr));border:0;border-bottom:1.5px solid var(--accent);
background:color-mix(in srgb,var(--accent) 38%,transparent)}
.wrapper .yl-step{background:color-mix(in srgb,var(--accent) 7%,var(--ink));padding-top:clamp(28px,3.6vh,34px)}
.wrapper .yl-step::before{display:none}
.js .wrapper .yl-steps{opacity:0;transition:opacity .8s ease .5s}
.js .wrapper.in .yl-steps{opacity:1}
.sectors{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:clamp(16px,2vw,24px)}
/* the deck's portfolio card, as a sector tile */
.card{position:relative;overflow:hidden;border:1px solid var(--line-d);background:var(--ink-2);height:clamp(150px,19vh,190px)}
.card .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
transition:transform .45s ease,filter .45s ease;filter:saturate(.85) brightness(.8)}
.card:hover .bg{transform:scale(1.045);filter:saturate(1) brightness(.95)}
.card .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,9,.1) 0%,rgba(11,11,9,.36) 50%,rgba(11,11,9,.9) 100%)}
.card .body{position:absolute;left:0;right:0;bottom:0;padding:16px 18px}
.card .name{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,1.8vw,24px);text-transform:uppercase;line-height:1;color:#fff}
.card .corner{position:absolute;width:14px;height:14px;border:1.5px solid var(--accent);opacity:0;transition:opacity .25s}
.card .c1{top:8px;right:8px;border-left:0;border-bottom:0}
.card .c2{bottom:8px;left:8px;border-right:0;border-top:0}
.card:hover .corner{opacity:1}
.js .sectors .card{opacity:0;transform:translateY(10px);
transition:opacity .6s ease calc(.8s + var(--i) * 70ms),transform .6s cubic-bezier(.16,1,.3,1) calc(.8s + var(--i) * 70ms)}
.js .wrapper.in .sectors .card{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
.js .wrapper-line rect{stroke-dashoffset:0;transition:none}
.js .wrapper-tab,.js .wrapper .yl-steps,.js .sectors .card{opacity:1;transform:none;transition:none}
}
/* two by two from a tablet down, where how-it-works/ would stack its three */
@media(max-width:980px){ .wrapper .yl-steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:880px){ .sectors{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:520px){
.wrapper .yl-step{padding:24px 14px 18px}
.wrapper .yl-step h3{font-size:21px;margin:8px 0 8px}
.wrapper .yl-step p{font-size:13px;line-height:1.5}
.sectors{gap:10px;padding:10px 12px 12px}
.card{height:128px}
.card .body{padding:12px}
.card .name{font-size:18px}
}
/* under the frame, the SPAC-like tender, which how-it-works/ explains: the label, the line running
across the page, and a small button to that page */
.callout{margin-top:clamp(32px,4.6vh,48px);border-left:3px solid var(--accent);background:var(--ink-2);
padding:clamp(20px,2.8vh,26px) clamp(20px,2.4vw,30px)}
.callout h3{font-family:var(--font-mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.callout p{font-size:15.5px;line-height:1.7;color:var(--mute-d);max-width:120ch}
.callout p b{color:var(--text-d)}
.callout .btn{margin-top:18px}
/* =====================================================================
HOME 04 — the fund summary: the title and what the fund is on the left, and on the right one ink
card with the deck's corner ticks and dotted leaders
===================================================================== */
.spec{position:relative;background:var(--ink);color:var(--text-d);padding:clamp(30px,4.4vh,46px) clamp(24px,3.2vw,48px) clamp(24px,3.6vh,38px)}
.spec::before,.spec::after{content:"";position:absolute;width:20px;height:20px;border:2px solid var(--accent)}
.spec::before{top:-7px;left:-7px;border-right:0;border-bottom:0}
.spec::after{bottom:-7px;right:-7px;border-left:0;border-top:0}
.spec-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:clamp(18px,3vh,30px)}
.spec-top p{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.spec-top span{font-family:var(--font-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#8F8D7C;white-space:nowrap}
.spec-row{display:flex;align-items:baseline;gap:12px;font-family:var(--font-mono);font-size:14px;letter-spacing:.06em;padding:10px 0}
.spec-row dt{color:var(--mute-d);white-space:nowrap;text-transform:uppercase}
.spec-row .dots{flex:1;min-width:14px;border-bottom:1.5px dotted #3d3d32;transform:translateY(-4px)}
.spec-row dd{color:var(--text-d);text-align:right;font-weight:500;text-transform:uppercase;padding:2px 8px;margin:-2px -8px;
transition:background .15s,color .15s}
.spec-row:hover dd{background:var(--accent);color:var(--ink);font-weight:700}
.summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:start}
.summary .lede{max-width:46ch}
@media(max-width:1080px){ .summary{grid-template-columns:1fr} }
@media(max-width:520px){
.spec-row{flex-wrap:wrap;gap:3px 10px;font-size:13px}
.spec-row .dots{display:none}
.spec-row dd{text-align:left;margin:0;padding:0;width:100%}
}
/* =====================================================================
Team — the chairman's block, shared by the homepage and team/
===================================================================== */
/* an ink plate, the way the deck seats a chart on paper: his portrait down the left, and beside it
his name and bio */
.dan{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,2fr);grid-template-areas:"ph tx";
background:var(--ink);color:var(--text-d);border:1px solid var(--ink);position:relative;isolation:isolate}
/* the portrait only spans the name-and-bio row, so a square source crops gently instead of
being stretched down the height of the whole card */
.dan-ph{grid-area:ph;position:relative;min-height:300px;overflow:hidden;background:#101009}
.dan-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 14%}
.tone-dark .dan{border-color:var(--line-d)}
.dan-ph figcaption{position:absolute;left:12px;bottom:10px;font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;
text-transform:uppercase;color:rgba(237,235,223,.8);background:rgba(11,11,9,.66);padding:6px 9px}
.dan-tx{grid-area:tx;padding:clamp(24px,3vw,40px) clamp(22px,3vw,44px);border-left:1px solid var(--line-d);display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,2.2vh,24px)}
.dan-role{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);line-height:1.7}
.dan-role span{display:block;color:var(--mute-d);letter-spacing:.16em}
.dan-nm{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(40px,5vw,72px);line-height:.92;
color:var(--text-d);margin-top:8px}
.dan-bio p{font-size:15.5px;line-height:1.72;color:#C8C5B4}
.dan-bio p + p{margin-top:12px}
.dan-bio b{color:var(--text-d);font-weight:600}
/* an outlet's mark: a square logo, or its monogram when the file is missing (news/) */
.press-lg{width:22px;height:22px;flex:0 0 auto;display:grid;place-items:center;background:var(--ink-2);border:1px solid var(--line-d);
font-family:var(--font-mono);font-weight:700;font-size:8px;color:var(--mute-d);overflow:hidden}
.press-lg img{width:100%;height:100%;object-fit:cover}
/* his figures: the deck's stat tiles, the number on a marker */
.stats{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:1px;background:var(--line-d);border:1px solid var(--line-d)}
.stat{background:var(--ink-2);padding:16px 16px 15px}
.stat b{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(26px,2.6vw,38px);line-height:1;color:var(--text-d);white-space:nowrap}
.stat b i{font-style:normal;background:var(--accent);color:var(--text-p);padding:.04em .12em;
-webkit-box-decoration-break:clone;box-decoration-break:clone}
.stat b sup{font-family:var(--font-mono);font-size:.34em;font-weight:700;vertical-align:super;line-height:0;margin-left:.2em;color:var(--mute-d)}
.stat b sup a{color:inherit}
.stat span{display:block;font-size:12.5px;line-height:1.45;color:var(--mute-d);margin-top:10px}
@media(max-width:720px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* recent appearances: one line each, the outlet mark, the headline and its age */
.press-k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute-d);
padding-bottom:6px;border-bottom:1px solid var(--line-d)}
.press-i{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;
padding:9px 0;border-bottom:1px solid #1B1B15;color:#C8C5B4;transition:color .14s}
.press-i:last-child{border-bottom:0}
a.press-i:hover{color:var(--accent)}
.press-h{font-size:14px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.press-t{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-d);white-space:nowrap}
/* footnotes at the foot of a panel */
.fn{list-style:none;margin-top:18px;padding-top:12px;border-top:1px solid var(--line-p);font-family:var(--font-mono);
font-size:9.5px;letter-spacing:.05em;line-height:1.85;color:var(--mute-p);max-width:960px}
.tone-dark .fn{border-top-color:var(--line-d);color:var(--mute-d)}
.fn li{padding-left:1.15em;text-indent:-1.15em}
.fn li + li{margin-top:4px}
.fn sup{font-weight:700;font-size:.9em;vertical-align:super;line-height:0;margin-right:.5em}
.fn a{color:var(--accent-deep);border-bottom:1px solid transparent;transition:border-color .15s}
.tone-dark .fn a{color:var(--accent)}
.fn a:hover{border-color:currentColor}
@media(max-width:980px){
.dan{grid-template-columns:1fr;grid-template-areas:"ph" "tx"}
.dan-ph{min-height:0;aspect-ratio:4/3}
.dan-tx{border-left:0;border-top:1px solid var(--line-d)}
}
/* On the homepage the team is two chunks side by side: his plate on the left, three quarters of the
width (wide enough that his bio and figures stay short), and the rest of the team on the right as
a grid of faces three across, the way to the full team under it. The split is set so the grid and
button come out about as tall as his plate; the right chunk stretches to it, so the button lands
level with its foot. */
.team-duo{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:clamp(18px,2.4vw,36px);align-items:stretch}
.dan--side{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-areas:"ph tx"}
.dan--side .dan-ph{min-height:260px}
.dan--side .dan-tx{--pad:clamp(22px,2.4vw,32px);padding:var(--pad)}
/* his two figures close the text column, run out to its edges; the free height goes above them */
.dan--side .stats{margin:auto calc(var(--pad) * -1) calc(var(--pad) * -1);border:0;border-top:1px solid var(--line-d)}
.dan--side .stat b{font-size:clamp(24px,2.2vw,32px)}
.dan--side .dan-nm{font-size:clamp(38px,4vw,58px)}
.team-side{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:18px}
/* each face opens team/ at that person; the name only surfaces on hover or focus, so the grid reads
as faces */
.faces{list-style:none;align-self:stretch;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1vw,12px)}
.faces a{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:#0B0B09;border:1px solid var(--line-d);transition:border-color .2s}
.faces a:hover,.faces a:focus-visible{border-color:var(--accent)}
.faces img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:transform .45s ease}
.faces a:hover img{transform:scale(1.05)}
.face-n{position:absolute;left:0;right:0;bottom:0;padding:18px 7px 6px;background:linear-gradient(180deg,rgba(11,11,9,0),rgba(11,11,9,.9));
font-family:var(--font-mono);font-size:8.5px;letter-spacing:.1em;line-height:1.3;text-transform:uppercase;color:var(--text-d);
opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}
.faces a:hover .face-n,.faces a:focus-visible .face-n{opacity:1;transform:none}
/* a tablet: the chunks stack, and the faces run in one row of eight under him */
@media(max-width:1023px){
.team-duo{grid-template-columns:1fr}
.dan--side .dan-ph{aspect-ratio:auto}
.dan--side .dan-tx{border-top:0;border-left:1px solid var(--line-d)}
.faces{grid-template-columns:repeat(8,minmax(0,1fr))}
}
/* a phone: portrait over bio, and the faces four across */
@media(max-width:760px){
.dan--side{grid-template-columns:1fr;grid-template-areas:"ph" "tx"}
.dan--side .dan-ph{min-height:0;aspect-ratio:3/2}
.dan--side .dan-tx{border-left:0;border-top:1px solid var(--line-d)}
.faces{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* =====================================================================
Pages — the head every page opens on
===================================================================== */
.page-head{position:relative;overflow:hidden;background:var(--ink);border-bottom:1px solid var(--line-d);
padding:calc(var(--head-h) + clamp(64px,11vh,120px)) 0 clamp(52px,8vh,92px)}
/* the IVAI mark, watermarked in the page's hue at a whisper */
.page-head .ph-mark{position:absolute;right:-3vw;top:54%;transform:translateY(-50%);width:min(64vw,900px);aspect-ratio:1672/728;
background:color-mix(in srgb,var(--accent) 9%,transparent);pointer-events:none;
-webkit-mask:var(--ivai-mask) center/contain no-repeat;mask:var(--ivai-mask) center/contain no-repeat}
.page-head .wrap{position:relative;z-index:1}
/* a head with a photograph behind it, the way the homepage opens on its chip: the picture fills
the head and the type sits bottom-left over its darkest ground. Only the left and the foot are
shaded, so the subject on the right keeps its light. */
.page-head--photo{min-height:clamp(600px,100svh,1000px);display:flex;flex-direction:column;justify-content:flex-end;
background:#000;isolation:isolate;padding-top:calc(var(--head-h) + 48px);padding-bottom:clamp(56px,10vh,120px)}
.page-head--photo .wrap{width:100%} /* auto margins on a flex item would shrink it to its content */
.ph-photo{position:absolute;inset:0;z-index:0;background-position:62% 50%;background-size:cover;background-repeat:no-repeat}
/* a photo whose subject would sit under the headline hangs from the right: the frame starts a
fifth of the way in and fades up from the black on its left, so the subject clears the type */
@media(min-width:761px){
.ph-photo--right{left:20%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%)}
}
.ph-vig{position:absolute;inset:0;z-index:0;background:
linear-gradient(90deg, rgba(11,11,9,.72) 0%, rgba(11,11,9,.28) 44%, rgba(11,11,9,0) 68%),
linear-gradient(180deg, rgba(11,11,9,.55) 0%, rgba(11,11,9,0) 22%, rgba(11,11,9,.15) 55%, rgba(11,11,9,.88) 100%)}
@media (prefers-reduced-motion:no-preference){ .ph-photo{animation:coverZoom 1.6s cubic-bezier(.16,1,.3,1) both} }
/* on a phone the type spans the whole width and lands on the subject, so the lower part of the
picture goes darker there; the top of it stays lit above the headline */
@media(max-width:760px){
.ph-vig{background:linear-gradient(180deg, rgba(11,11,9,.5) 0%, rgba(11,11,9,.1) 18%, rgba(11,11,9,.55) 40%,
rgba(11,11,9,.86) 62%, rgba(11,11,9,.95) 100%)}
}
.page-h{font-family:var(--font-display);font-weight:700;text-transform:uppercase;line-height:.92;letter-spacing:.005em;
font-size:clamp(48px,7.2vw,112px);color:var(--text-d);max-width:14ch}
/* a longer two-line head ("A Closed-End Fund / Built Like a SPAC.") is set smaller, with the room to
keep to two lines */
.page-h--wide{max-width:18ch;font-size:clamp(40px,5.8vw,86px)}
/* the marker box is taller than the .92 line, so the marked line steps down a touch to keep it
off the baseline above */
.page-h > em{display:block;font-style:normal;margin-top:.1em}
/* the trust account at a glance, along the foot of a photo head: three monthly figures under one
"as of" date, and the search period counting down live beside them. Glass over the picture, so
the photo still reads through; the countdown cell is tinted in the page's hue. */
.trust{margin-top:clamp(26px,4vh,40px)}
/* each monthly figure carries its own date, on a line of its own under the number */
.trust-d{flex-basis:100%;font-family:var(--font-mono);font-weight:400;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
color:#B4B1A2;line-height:1.4;margin-top:-2px}
.trust-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(237,235,223,.14);
border:1px solid rgba(237,235,223,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.trust-c{background:rgba(11,11,9,.58);padding:clamp(14px,2vh,20px) clamp(14px,1.5vw,22px);min-width:0}
.trust-c dt{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#B4B1A2;line-height:1.5}
.trust-c dd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:10px;font-family:var(--font-display);
font-weight:700;font-size:clamp(26px,2.6vw,38px);line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.trust-c dd small{font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.trust-c--timer{background:color-mix(in srgb,var(--accent) 12%,rgba(11,11,9,.66))}
.trust-c .cd{gap:14px}
.cd-u{display:flex;flex-direction:column;align-items:flex-start}
.cd-u b{font-weight:700;min-width:1.05em}
.cd-u:first-child b{color:var(--accent)}
.cd-u i{font-style:normal;font-family:var(--font-mono);font-size:9px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;
color:#B4B1A2;margin-top:6px}
@media(max-width:980px){ .trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* while only the countdown and Redemption Value are shown: two cells, at a width that suits two */
.trust-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}
/* a phone: the countdown and Redemption Value each across the full width, then cash and yield side
by side, so the two-up grid never leaves a hole */
@media(max-width:480px){ .trust-c--timer,.trust-c:nth-child(2){grid-column:1 / -1} .trust-c dd{font-size:24px} }
/* a head line without the marker is set in the page's hue instead */
.page-h > em:not(:has(.pl-hl)){color:var(--accent)}
.page-sub{margin-top:24px;max-width:62ch;font-size:18px;line-height:1.7;color:#C8C5B4}
.page-sub b{color:var(--text-d);font-weight:600}
/* ivai.svg's path, inlined: Chrome won't load a mask image across file:// origins */
:root{--ivai-mask:url("data:image/svg+xml,")}
/* =====================================================================
How it works — the lifecycle rail and diagram (the deck's process slide)
===================================================================== */
.pr-rail{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(30px,5vh,46px);border-top:1px solid var(--line-p)}
.pr-step{position:relative;background:none;border:0;border-right:1px solid var(--line-p);padding:26px 22px 22px;text-align:left;
cursor:pointer;color:inherit;transition:background .2s}
.pr-step:last-child{border-right:0}
.pr-step:hover,.pr-step[aria-selected="true"]{background:var(--paper-2)}
.pr-step:focus-visible{outline:2px solid var(--accent-deep);outline-offset:-2px}
.pr-dot{position:absolute;top:-6px;left:0;width:11px;height:11px;border-radius:50%;z-index:3;
background:var(--paper);border:2px solid var(--line-p);transition:border-color .2s,background .2s}
.pr-step[aria-selected="true"] .pr-dot{border-color:var(--accent-deep);background:var(--accent)}
.pr-step.is-done .pr-dot{border-color:var(--accent-deep)}
.pr-when{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute-p);margin-bottom:9px}
.pr-step[aria-selected="true"] .pr-when{color:var(--accent-deep)}
.pr-ttl{display:block;font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(22px,2.3vw,32px);line-height:1;color:var(--text-p)}
.pr-num{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:#9C9884;margin-top:8px}
/* the timeline plays itself: one line creeps across the rail; clicking a step parks it */
.pr-progress{position:absolute;top:-1px;left:0;width:100%;height:3px;background:var(--accent-deep);
transform:scaleX(0);transform-origin:left;pointer-events:none;z-index:1}
.pr-body{display:grid;grid-template-columns:1.45fr 1fr;gap:36px;align-items:start;margin-top:34px}
.pr-diagram{border:1px solid var(--line-p);background:var(--paper-3);padding:12px}
.pr-diagram .pr-svg--v{display:none}
.nd rect{fill:var(--paper);stroke:#C0BCA4;stroke-width:1.5;transition:fill .3s,stroke .3s}
.nd .k{font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;fill:#9C9884;transition:fill .3s}
.nd .v{font-family:var(--font-display);font-weight:700;font-size:15px;fill:#9C9884;letter-spacing:.02em;transition:fill .3s}
.nd.on rect{fill:#fff;stroke:var(--text-p);stroke-width:2}
.nd.on .k{fill:var(--accent-deep)}
.nd.on .v{fill:var(--text-p)}
.nd.trust.on rect{fill:var(--accent);stroke:var(--text-p)}
.fl{opacity:.3;transition:opacity .3s}
.fl path{fill:none;stroke:#B4B09A;stroke-width:2;transition:stroke .3s}
.fl polygon{fill:#B4B09A;transition:fill .3s}
.fl text{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.14em;fill:#9C9884;opacity:0;transition:opacity .3s}
.fl.on{opacity:1}
.fl.on path{stroke:var(--text-p);stroke-dasharray:7 5;animation:prflow 1.1s linear infinite}
.fl.on polygon{fill:var(--text-p)}
.fl.on text{opacity:1;fill:var(--text-p)}
@keyframes prflow{to{stroke-dashoffset:-24}}
@media (prefers-reduced-motion:reduce){ .fl.on path{animation:none;stroke-dasharray:none} }
.pr-detail{border-left:3px solid var(--accent-deep);padding-left:24px;min-height:260px}
.pr-detail .tagline{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:12px}
.pr-detail h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(26px,2.6vw,36px);line-height:1.02;color:var(--text-p);margin-bottom:16px}
.pr-detail ul{list-style:none}
.pr-detail li{position:relative;padding-left:20px;margin-bottom:14px;font-size:15px;line-height:1.65;color:var(--body-p)}
.pr-detail li::before{content:"";position:absolute;left:0;top:.66em;width:8px;height:1.5px;background:var(--accent-deep)}
.pr-detail li b{color:var(--text-p)}
@media(max-width:1080px){ .pr-body{grid-template-columns:1fr;gap:28px} .pr-detail{min-height:0} }
@media(max-width:880px){
.pr-rail{grid-template-columns:repeat(2,1fr)}
.pr-step:nth-child(2){border-right:0}
.pr-step:nth-child(3),.pr-step:nth-child(4){border-top:1px solid var(--line-p)}
}
@media(max-width:820px){ .pr-diagram .pr-svg--h{display:none} .pr-diagram .pr-svg--v{display:block} }
/* the sponsor's contribution: a big figure beside the three moving parts */
.yl-grid{display:grid;grid-template-columns:minmax(240px,.62fr) 1.6fr;gap:clamp(22px,3.2vw,54px);align-items:stretch;margin-top:clamp(28px,4.4vh,42px)}
.yl-hero{border:1px solid var(--line-d);background:var(--ink-2);padding:clamp(22px,3vh,32px) clamp(20px,2vw,30px);display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.yl-big{font-family:var(--font-display);font-weight:700;font-size:clamp(64px,8vw,112px);line-height:.86;color:var(--accent)}
.yl-big small{font-size:.4em;margin-left:4px}
.yl-kick{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-d);line-height:1.8;margin-top:14px}
.yl-bar{display:flex;flex-direction:column;border:1px solid var(--line-d);min-height:150px}
.yl-seg{display:flex;flex-direction:column;justify-content:center;padding:12px 14px;font-family:var(--font-mono);font-size:10px;
letter-spacing:.16em;text-transform:uppercase}
.yl-seg--spon{flex:0 0 38%;background:var(--accent);color:var(--ink);font-weight:700}
.yl-seg--cash{flex:1;background:#22221A;color:var(--mute-d);border-top:1px solid var(--line-d)}
.yl-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-d);border:1px solid var(--line-d)}
.yl-step{background:var(--ink-2);padding:clamp(22px,3vh,30px) clamp(18px,1.8vw,26px);position:relative}
.yl-step::before{content:"";position:absolute;top:-1px;left:0;right:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;
transition:transform .6s cubic-bezier(.76,0,.24,1)}
.in .yl-step::before{transform:scaleX(1)}
.in .yl-step:nth-child(2)::before{transition-delay:.15s}
.in .yl-step:nth-child(3)::before{transition-delay:.3s}
.yl-step .n{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;color:var(--accent)}
.yl-step h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(22px,2.1vw,28px);line-height:1.02;margin:10px 0 12px}
.yl-step p{font-size:14.5px;line-height:1.65;color:var(--mute-d)}
.yl-step p b{color:var(--text-d);font-weight:600}
@media(max-width:1080px){ .yl-grid{grid-template-columns:1fr} }
@media(max-width:820px){ .yl-steps{grid-template-columns:1fr} }
/* your choice at the tender: the payoff sketch and the two outcomes */
.ch-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(20px,2.6vw,36px);align-items:stretch;margin-top:clamp(28px,4.4vh,42px)}
.ch-chart{background:var(--ink);border:1px solid var(--text-p);padding:14px 14px 8px;display:flex;flex-direction:column}
.ch-chart h3{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);padding:4px 6px 10px}
.ch-chart h3 small{display:block;color:var(--mute-d);letter-spacing:.16em;margin-top:5px;font-size:9.5px}
.ch-chart svg{width:100%;height:auto;margin-top:auto}
.ch-cards{display:grid;gap:18px}
.ch-card{border:1px solid var(--line-p);background:var(--paper-3);padding:24px 26px;position:relative}
.ch-card::before{content:"";position:absolute;top:-1px;left:0;width:100%;height:3px;background:var(--text-p)}
.ch-card--up::before{background:var(--accent-deep)}
.ch-kick{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute-p);margin-bottom:10px}
.ch-card h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(26px,2.6vw,36px);line-height:1;color:var(--text-p);margin-bottom:12px}
.ch-card h3 em{font-style:normal;background:var(--accent);padding:0 .1em}
.ch-card p{font-size:15px;line-height:1.7;color:var(--body-p)}
.ch-card p b{color:var(--text-p)}
@media(max-width:980px){ .ch-grid{grid-template-columns:1fr} }
/* the FAQ: the heading and the calls to action hold still on the left while the questions run
down the right. Native , with the deck's accordion toggle drawn on the summary: a
hairline square whose plus closes to a minus, filled in the section's hue once open. */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:clamp(28px,5vw,80px);align-items:start}
.faq-side{position:sticky;top:calc(var(--head-h) + 36px)}
.faq-side .panel-line{max-width:11ch}
.faq{border-top:1px solid var(--line-d)}
.faq-i{border-bottom:1px solid var(--line-d)}
.faq-i summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:clamp(18px,2.6vh,24px) 0;
cursor:pointer;list-style:none}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.faq-i .q{font-family:var(--font-display);font-weight:700;font-size:clamp(21px,2vw,28px);line-height:1.12;
color:var(--text-d);transition:color .15s}
.faq-i summary:hover .q,.faq-i[open] .q{color:var(--accent)}
.faq-i .pm{position:relative;flex:0 0 auto;width:30px;height:30px;border:1px solid var(--line-d);
transition:border-color .2s,background .2s}
.faq-i .pm::before,.faq-i .pm::after{content:"";position:absolute;left:50%;top:50%;background:var(--mute-d);
transform:translate(-50%,-50%);transition:transform .3s ease,background .2s}
.faq-i .pm::before{width:12px;height:1.5px}
.faq-i .pm::after{width:1.5px;height:12px}
.faq-i summary:hover .pm{border-color:var(--accent)}
.faq-i summary:hover .pm::before,.faq-i summary:hover .pm::after{background:var(--accent)}
.faq-i[open] .pm{background:var(--accent);border-color:var(--accent)}
.faq-i[open] .pm::before,.faq-i[open] .pm::after{background:var(--ink)}
.faq-i[open] .pm::after{transform:translate(-50%,-50%) rotate(90deg) scaleY(0)}
.faq-i .a{padding:0 50px clamp(20px,3vh,28px) 0;max-width:72ch}
.faq-i .a p{font-size:16px;line-height:1.75;color:var(--mute-d)}
.faq-i .a p + p{margin-top:12px}
.faq-i .a b{color:var(--text-d);font-weight:600}
/* a link inside an answer's sentence, as against the arrow links that close an answer */
.faq-i .a p a:not(.more){color:var(--accent);border-bottom:1px solid currentColor}
.faq-i .a .a-links{display:flex;flex-wrap:wrap;gap:10px 28px}
@media (prefers-reduced-motion:no-preference){ .faq-i[open] .a{animation:faqIn .35s ease both} }
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* On paper, no text takes the hue: its darkened twin reads muddy there (the yellow worst of all), so
type and links stay ink. A hovered question tints its whole row instead, a little wider than the
rules; the open question sits on the deck's marker in the hue, and its toggle fills with it, the
bright hue working as a fill where it wouldn't as text. */
.tone-paper .faq{border-top-color:var(--line-p)}
.tone-paper .faq-i{border-bottom-color:var(--line-p)}
.tone-paper .faq-i summary{transition:background-color .15s,box-shadow .15s}
.tone-paper .faq-i summary:hover{background:var(--paper-2);box-shadow:-14px 0 0 var(--paper-2),14px 0 0 var(--paper-2)}
.tone-paper .faq-i summary:focus-visible{outline-color:var(--text-p)}
.tone-paper .faq-i .q,.tone-paper .faq-i summary:hover .q{color:var(--text-p)}
.tone-paper .faq-i[open] .q{color:var(--text-p);background:linear-gradient(var(--accent),var(--accent)) no-repeat;padding:0 .12em;margin-left:-.12em;
-webkit-box-decoration-break:clone;box-decoration-break:clone}
.tone-paper .faq-i .pm{border-color:var(--line-p)}
.tone-paper .faq-i .pm::before,.tone-paper .faq-i .pm::after{background:var(--mute-p)}
.tone-paper .faq-i summary:hover .pm{border-color:var(--text-p)}
.tone-paper .faq-i summary:hover .pm::before,.tone-paper .faq-i summary:hover .pm::after{background:var(--text-p)}
.tone-paper .faq-i[open] .pm{background:var(--accent);border-color:var(--text-p)}
.tone-paper .faq-i[open] .pm::before,.tone-paper .faq-i[open] .pm::after{background:var(--text-p)}
.tone-paper .faq-i .a p{color:var(--body-p)}
.tone-paper .faq-i .a b{color:var(--text-p)}
.tone-paper .faq-i .a .more,.tone-paper .faq-i .a p a:not(.more){color:var(--text-p)}
@media(max-width:980px){ .faq-grid{grid-template-columns:1fr} .faq-side{position:static} .faq-side .panel-line{max-width:none} }
@media(max-width:620px){ .faq-i .a{padding-right:0} }
/* =====================================================================
Team page — a plain directory: the chairman across the top, then everyone else on one grid, in
one hue, with no headings
===================================================================== */
/* a page with no head: the first panel clears the fixed bar itself */
.sec--first{padding-top:calc(var(--head-h) + clamp(44px,7vh,76px))}
.people{--g:clamp(16px,2vw,26px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g)}
/* his plate: the portrait as wide as one column of the grid under it, so the two line up; the bio;
and down the right his figures over his recent appearances, which keeps the bio to a readable measure */
.dan--team{--g:clamp(16px,2vw,26px);grid-template-columns:calc((100% - 3 * var(--g)) / 4) minmax(0,1.6fr) minmax(0,1fr);
grid-template-areas:"ph tx pr";margin-bottom:var(--g)}
.dan--team .dan-ph{min-height:260px}
/* the figures fill the top of the column edge to edge, the column's own rules for their outer lines;
the appearances sit in the space under them */
.dan-side{grid-area:pr;display:flex;flex-direction:column;border-left:1px solid var(--line-d)}
/* his figures close the bio column, run out to its edges; the free height goes above them */
.dan--team .dan-tx{--px:clamp(22px,3vw,44px);--py:clamp(24px,3vw,40px);padding:var(--py) var(--px)}
.dan--team .dan-tx .stats{margin:auto calc(var(--px) * -1) calc(var(--py) * -1);border:0;border-top:1px solid var(--line-d)}
.dan-press{flex:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(20px,2.6vw,30px) clamp(20px,2.4vw,32px)}
.dan--team .stat{padding:13px 12px 12px}
.dan--team .stat b{font-size:clamp(22px,2vw,30px)}
.dan--team .stat span{font-size:12px}
.dan-press .press-i{align-items:start}
.dan-press .press-lg{margin-top:1px}
/* a headline may take two lines in the narrow column, then trails off */
.dan-press .press-h{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.person{display:grid;grid-template-rows:auto 1fr;background:var(--ink);border:1px solid var(--line-d);color:var(--text-d)}
.person-ph{position:relative;aspect-ratio:1;overflow:hidden;background:#0B0B09}
.person-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:transform .5s ease}
.person:hover .person-ph img{transform:scale(1.035)}
.person-tx{position:relative;display:flex;flex-direction:column;gap:8px;padding:18px 20px 22px;border-top:1px solid var(--line-d)}
.person-tx::before{content:"";position:absolute;top:-1px;left:0;right:0;height:3px;background:var(--accent)}
.person-r{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);line-height:1.6}
.person-n{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(24px,2.2vw,30px);line-height:1;color:var(--text-d)}
.person-d{font-family:var(--font-mono);font-size:11.5px;line-height:1.7;color:var(--mute-d);margin-top:6px}
.person-d i{font-style:normal;color:#8F8D7C;letter-spacing:.14em;font-size:10px;display:block;margin-top:8px}
.person-d i:first-child{margin-top:0}
/* narrower: the figures and appearances drop under the bio, in the same column, the figures four across */
@media(max-width:1080px){
.people{grid-template-columns:repeat(3,minmax(0,1fr))}
.dan--team{grid-template-columns:calc((100% - 2 * var(--g)) / 3) minmax(0,1fr);grid-template-areas:"ph tx" "ph pr"}
.dan-side{border-top:1px solid var(--line-d)}
/* under the bio at this width, five appearances are plenty */
.dan-press a.press-i:nth-of-type(n+6){display:none}
}
@media(max-width:980px){
.dan--team{grid-template-areas:"ph tx" "ph pr"}
.dan--team .dan-ph{aspect-ratio:auto;min-height:260px}
.dan--team .dan-tx{border-top:0;border-left:1px solid var(--line-d)}
}
@media(max-width:760px){
.people{grid-template-columns:repeat(2,minmax(0,1fr))}
.dan--team{grid-template-columns:1fr;grid-template-areas:"ph" "tx" "pr"}
.dan--team .dan-ph{aspect-ratio:4/3;min-height:0}
.dan--team .dan-tx{border-left:0;border-top:1px solid var(--line-d)}
.dan-side{border-left:0}
}
@media(max-width:420px){ .person-tx{padding:14px 14px 16px} .person-n{font-size:21px} .person-d{font-size:10.5px} }
/* =====================================================================
Terms of Use and Privacy Policy — a plain legal document on paper, at a reading measure
===================================================================== */
.doc{max-width:760px}
.doc-h{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(40px,5vw,64px);line-height:.95;color:var(--text-p)}
.doc .doc-date{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute-p);margin:14px 0 clamp(20px,3vh,32px)}
.doc h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(20px,1.9vw,25px);line-height:1.1;color:var(--text-p);
margin-top:clamp(28px,4vh,40px);padding-top:18px;border-top:1px solid var(--line-p);margin-bottom:12px}
.doc p,.doc li{font-size:15.5px;line-height:1.75;color:var(--body-p)}
.doc p + p{margin-top:12px}
.doc ul{margin:12px 0 0 1.15em}
.doc ul + p{margin-top:12px}
.doc li + li{margin-top:6px}
.doc b{color:var(--text-p);font-weight:600}
.doc a{color:var(--accent-deep);border-bottom:1px solid currentColor}
.doc address{font-family:var(--font-mono);font-size:13.5px;line-height:1.8;color:var(--text-p);margin-top:12px}
/* =====================================================================
News & resources page
===================================================================== */
.news{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(18px,2.4vw,32px);margin-top:clamp(26px,4vh,40px);align-items:start}
.nw-feature{display:flex;flex-direction:column;background:var(--ink);color:var(--text-d);border:1px solid var(--ink);min-height:100%;transition:transform .25s}
.nw-feature:hover{transform:translateY(-3px)}
.nw-feature .top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line-d)}
.nw-src{display:flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute-d)}
.nw-src .press-lg{width:30px;height:30px}
.nw-date{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-d);white-space:nowrap}
.nw-feature h3{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,3.8vw,56px);line-height:1;padding:clamp(26px,4vh,44px) 22px;flex:1}
.nw-feature .go{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-top:1px solid var(--line-d);
font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.nw-list{border-top:1px solid var(--line-p)}
.nw-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:start;padding:20px 0;border-bottom:1px solid var(--line-p);transition:padding-left .2s}
.nw-item:hover{padding-left:6px}
.nw-item .press-lg{width:34px;height:34px;background:var(--ink);border-color:var(--ink)}
.nw-item h3{font-family:var(--font-display);font-weight:700;font-size:clamp(21px,1.9vw,26px);line-height:1.08;color:var(--text-p);transition:color .15s}
.nw-item:hover h3{color:var(--accent-deep)}
.nw-item .meta{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute-p);margin-top:8px}
.nw-item .arr{font-family:var(--font-mono);color:var(--mute-p);padding-top:4px}
@media(max-width:980px){ .news{grid-template-columns:1fr} }
.res{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-d);border:1px solid var(--line-d);margin-top:clamp(26px,4vh,40px)}
.res-card{position:relative;display:flex;flex-direction:column;gap:12px;background:var(--ink);padding:clamp(22px,3vh,30px) clamp(20px,2vw,28px);
min-height:220px;text-align:left;border:0;cursor:pointer;color:var(--text-d);transition:background .2s}
.res-card:hover{background:#111109}
button.res-card{width:100%;font:inherit}
.res-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.res-card:hover::before{transform:scaleX(1)}
.res-card .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.res-card h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(26px,2.4vw,34px);line-height:1}
.res-card p{font-size:14px;line-height:1.6;color:var(--mute-d)}
.res-card .go{margin-top:auto;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute-d);transition:color .15s}
.res-card:hover .go{color:var(--accent)}
@media(max-width:980px){ .res{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:620px){ .res{grid-template-columns:1fr} .res-card{min-height:0} }
.facts{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,3.4vw,56px);margin-top:clamp(26px,4vh,40px);align-items:start}
.facts dl{border-top:1px solid var(--line-p)}
.facts .row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line-p)}
.facts dt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute-p);padding-top:2px}
.facts dd{font-family:var(--font-mono);font-size:13px;color:var(--text-p)}
.contact{background:var(--ink);color:var(--text-d);padding:clamp(24px,3.2vh,34px) clamp(22px,2.4vw,32px)}
.contact + .contact{margin-top:18px}
.contact h3{font-family:var(--font-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.contact p{font-family:var(--font-mono);font-size:13px;line-height:1.9;color:var(--text-d)}
.contact p + p{margin-top:12px}
.contact small{display:block;font-size:10.5px;color:var(--mute-d);line-height:1.8;letter-spacing:.03em}
@media(max-width:980px){ .facts{grid-template-columns:1fr} }
/* =====================================================================
Footer — the deck's closing plate, then the fine print
===================================================================== */
.outro{position:relative;min-height:clamp(720px,100svh,1040px);overflow:hidden;background:#000;isolation:isolate}
/* the still behind the clips is the clip's own first frame: the poster, the reduced-motion
treatment, and what shows if the file never decodes */
/* z-index:0 for the same reason as the hero: the cross-dissolve lifts its incoming layer to
z-index 2, which must stay inside the stage rather than cover what floats over it */
.outro-stage{position:absolute;inset:0;z-index:0;background:url("../img/hero/starcloud-color.webp") center center/cover no-repeat}
.outro-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
@media (prefers-reduced-motion:reduce){ .outro-video{display:none} }
/* darkened at the top, behind the header and the headline, and faded to ink at the foot so the
Earth runs into the fine print; the middle, where the planet is, is left alone */
.outro-vig{position:absolute;inset:0;background:
radial-gradient(110% 80% at 52% 40%, rgba(0,0,0,0) 34%, rgba(0,0,0,.45) 100%),
linear-gradient(180deg, rgba(11,11,9,.72) 0%, rgba(11,11,9,0) 24%, rgba(11,11,9,0) 64%, rgba(11,11,9,.92) 100%)}
/* The close floats in the open sky above the Earth: the line, with the fund's name and address
beside it, then the big BUY IVAI. The horizon crests at ~48% of the frame and a centred `cover`
crop keeps it there at any aspect, from ultrawide to a phone held upright, so the block is hung
from 45% and grows upward from just above the crest. The min-height keeps that sky tall enough. */
.outro-cta{position:absolute;z-index:2;left:0;right:0;bottom:55%}
.outro-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px clamp(28px,5vw,80px);
align-items:start;margin-bottom:clamp(20px,3.2vh,32px)}
.outro-h{font-family:var(--font-display);font-weight:700;text-transform:uppercase;line-height:.92;letter-spacing:.005em;
font-size:clamp(40px,5.6vw,84px);color:var(--text-d)}
.outro-h em{display:block;font-style:normal;color:var(--accent)}
/* On a wide screen this column lands where the video's sun sits, so it carries its own shade:
a soft pool of dark behind the type, no edge to it, that reads as the sky dimming rather than
as a panel, and keeps the address legible over the flare. */
/* the old site's closing column: the Ultra mark, the adviser's address, the copyright. Hung from
the top of the headline (the padding lands the mark on its cap height), it runs about as tall
as the two lines beside it, which is what lines the pair up. */
.outro-addr{position:relative;text-shadow:0 1px 14px rgba(0,0,0,.6);padding-top:clamp(5px,.55vw,9px)}
.outro-addr::before{content:"";position:absolute;inset:-36px -48px;z-index:-1;pointer-events:none;
background:radial-gradient(closest-side,rgba(11,11,9,.74),rgba(11,11,9,.42) 62%,rgba(11,11,9,0))}
.outro-logo{display:block;height:clamp(22px,1.9vw,30px);width:auto;margin-bottom:clamp(10px,.9vw,14px);
filter:invert(1) drop-shadow(0 1px 10px rgba(0,0,0,.5))} /* the mark ships black on clear */
.outro-addr address{font-style:normal;font-family:var(--font-mono);font-size:clamp(11.5px,1vw,14px);line-height:1.75;
letter-spacing:.04em;color:#D6D3C4}
.outro-copy{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#D6D3C4;margin-top:8px}
.outro-cta .buy-prop{box-shadow:0 18px 70px color-mix(in srgb,var(--accent) 20%,transparent)}
/* stacked on a narrow screen the close runs taller, so the plate does too: enough sky that the
block clears the header above and the Earth below */
@media(max-width:760px){ .outro-top{grid-template-columns:1fr} .outro{min-height:max(100svh,880px)} }
.legal{background:var(--ink);border-top:1px solid var(--line-d);padding:clamp(34px,5vh,52px) 0 clamp(30px,4vh,40px)}
.legal-h{font-family:var(--font-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute-d);margin-bottom:18px}
.legal-cols{column-count:3;column-gap:40px;font-size:11px;line-height:1.85;color:#A09D8E}
.legal-cols p{margin-bottom:14px;break-inside:avoid-column}
.legal-cols h3{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-d);
margin:6px 0 10px;break-after:avoid}
.legal-cols ul{margin:0 0 14px 16px;break-inside:avoid-column}
.legal-cols li{margin-bottom:4px}
.legal-cols a{color:var(--text-d);border-bottom:1px solid var(--line-d)}
@media(max-width:1080px){ .legal-cols{column-count:2} }
@media(max-width:680px){ .legal-cols{column-count:1} }
.footbar{background:var(--ink);border-top:1px solid var(--line-d)}
.footbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;padding-top:16px;padding-bottom:18px}
.footbar p{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#B4B1A2;line-height:1.9}
.footbar a{transition:color .15s}
.footbar a:hover{color:var(--accent)}
/* =====================================================================
The email signup above the homepage FAQ: a thin band filled with its section hue (peri), ink
on the fill, as the notice bar is. The form itself is Netlify Forms, sent by js/site.js.
===================================================================== */
.signup{position:relative;background:var(--accent);color:var(--ink);padding:clamp(34px,5.4vh,56px) 0}
.signup-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px clamp(28px,5vw,80px);align-items:center}
.signup-h{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(30px,3.4vw,48px);line-height:.94}
html.fonts-loading .signup-h{opacity:0}
.signup-tx p{font-size:15.5px;line-height:1.6;margin-top:10px;max-width:46ch;color:rgba(11,11,9,.82)}
.signup-row{display:flex}
.signup-row input{flex:1;min-width:0;background:transparent;border:1px solid var(--ink);border-right:0;border-radius:0;color:var(--ink);
font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;padding:14px 16px;outline:none;transition:background-color .15s}
.signup-row input::placeholder{color:rgba(11,11,9,.55)}
.signup-row input:focus{background:rgba(255,255,255,.22)}
.signup-btn{flex:0 0 auto;background:var(--ink);color:var(--accent);border:1px solid var(--ink);border-radius:0;cursor:pointer;
font-family:var(--font-mono);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding:0 24px;
transition:background-color .15s,color .15s}
.signup-btn:hover{background:transparent;color:var(--ink)}
.signup-btn:focus-visible,.signup-row input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.signup-btn[disabled]{cursor:progress;opacity:.7}
.signup-fine{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;line-height:1.8;margin-top:10px;color:rgba(11,11,9,.7)}
.signup-fine a,.signup-msg a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.signup-msg{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;line-height:1.7;font-weight:700}
.signup-msg:empty{display:none}
.signup-fine + .signup-msg{margin-top:8px}
.signup-form.is-done .signup-row,.signup-form.is-done .signup-fine{display:none}
.signup-form.is-done .signup-msg{font-size:14px;margin-top:0}
.signup-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:760px){ .signup-in{grid-template-columns:1fr} }
@media(max-width:400px){
.signup-row{flex-direction:column}
.signup-row input{border-right:1px solid var(--ink);border-bottom:0}
.signup-btn{padding:14px 24px}
}
/* iOS zooms in on a focused field under 16px and stays zoomed */
@media (pointer:coarse){ .signup-row input{font-size:16px} }
/* =====================================================================
Where to buy — the slide-in panel behind every BUY IVAI
===================================================================== */
.panel-overlay{position:fixed;inset:0;z-index:100;display:none;justify-content:flex-end}
.panel-overlay .scrim{position:absolute;inset:0;background:rgba(0,0,0,.7);opacity:0;transition:opacity .42s ease}
.panel-overlay.open .scrim{opacity:1}
.panel{position:relative;width:100%;max-width:460px;height:100%;overflow-y:auto;overscroll-behavior:contain;background:#0A0A08;
border-left:1px solid var(--line-d);transform:translateX(480px);transition:transform .44s cubic-bezier(.16,1,.3,1);
box-shadow:-24px 0 60px rgba(0,0,0,.5)}
.panel-overlay.open .panel{transform:translateX(0)}
.panel-body > *{opacity:0;transform:translateY(16px);transition:opacity .45s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.panel-overlay.open .panel-body > *{opacity:1;transform:none}
.panel-overlay.open .panel-body > :nth-child(1){transition-delay:.14s}
.panel-overlay.open .panel-body > :nth-child(2){transition-delay:.19s}
.panel-overlay.open .panel-body > :nth-child(3){transition-delay:.24s}
.panel-overlay.open .panel-body > :nth-child(4){transition-delay:.29s}
.panel-overlay.open .panel-body > :nth-child(5){transition-delay:.34s}
.panel-overlay.open .panel-body > :nth-child(6){transition-delay:.39s}
.panel-overlay.open .panel-body > :nth-child(7){transition-delay:.44s}
@media (prefers-reduced-motion:reduce){ .panel,.panel-overlay .scrim,.panel-body > *{transition:none} .panel-body > *{opacity:1;transform:none} }
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;border-bottom:1px solid var(--line-d);
position:sticky;top:0;background:#0A0A08;z-index:2}
.panel-head .tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:var(--mute-d);text-transform:uppercase}
.panel-close{background:none;border:0;color:var(--mute-d);font-size:18px;line-height:1;cursor:pointer;font-family:var(--font-mono);
padding:6px 9px;margin:-6px -9px;transition:background .15s,color .15s}
.panel-close:hover{background:var(--accent);color:var(--ink)}
.panel-body{padding:34px 28px 44px}
.panel-body h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(32px,8vw,40px);line-height:.96;margin-bottom:14px;color:#fff}
.panel-intro{font-family:var(--font-mono);font-size:12.5px;line-height:1.7;color:var(--mute-d);margin-bottom:30px}
.panel-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute-d);margin-bottom:12px}
.panel-label i{color:var(--accent);font-style:normal;margin-right:6px}
.broker-list{border:1px solid var(--line-d);margin-bottom:34px}
.broker-list a{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;font-family:var(--font-mono);font-size:13px;
letter-spacing:.04em;color:#D8D6C8;border-top:1px solid var(--line-d);transition:background .15s,color .15s}
.broker-list a:first-child{border-top:0}
.broker-list a:hover{background:#15150F;color:#fff}
.broker-list .arrow,.doc-link .arrow{color:#55554a;transition:color .15s}
.broker-list a:hover .arrow,.doc-link:hover .arrow{color:var(--accent)}
.doc-link{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--line-d);padding:16px;margin-bottom:32px;transition:background .15s}
.doc-link:hover{background:#15150F}
.doc-link .dk{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute-d);margin-bottom:5px}
.doc-link .dn{font-family:var(--font-mono);font-size:13px;color:var(--text-d)}
.doc-link .ds{font-family:var(--font-mono);font-size:10px;color:var(--mute-d);margin-top:4px}
.panel-fine{border-top:1px solid var(--line-d);padding-top:22px}
.panel-fine p{font-family:var(--font-mono);font-size:10.5px;line-height:1.75;color:#8F8D7C;margin-bottom:12px}
.panel-fine p:last-child{margin-bottom:0}
html.panel-open,html.panel-open body{overflow:hidden}