/* =========================================================
ACTAA · PORCELAIN — shared design system
Soft 3D cream world. Questrial display, Hanken body,
JetBrains Mono labels. Ink CTAs, stone two-tone, gold labels.
Loaded by every page. Home (porcelain.html) adds its own
animation CSS on top of this.
========================================================= */
:root{
--porcelain:#F6F1E8;
--bone:#EDE5D6;
--sand:#E2D7C2;
--ink:#26211A;
--ink-70:rgba(38,33,26,.72);
--ink-50:rgba(38,33,26,.52);
--stone:#A89C82;
--gold:#B8924B;
--line:rgba(38,33,26,.14);
--dark:#12213A;
--navy:#1A3D6E;
--blue:#2E6FD6;
--onDark:#F4EFE6;
--onDark-60:rgba(244,239,230,.62);
--line-dark:rgba(244,239,230,.16);
--display:'Questrial','Century Gothic',sans-serif;
--sans:'Hanken Grotesk',system-ui,sans-serif;
--mono:'JetBrains Mono',ui-monospace,monospace;
--wrap:1280px;
--pad:clamp(20px,5vw,64px);
--nav-h:70px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
body{
font-family:var(--sans);font-weight:300;
background:var(--porcelain);color:var(--ink);
font-size:16px;line-height:1.9;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--navy);color:var(--porcelain)}
/* film grain */
body::after{
content:"";position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.05;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
/* ---------- brand mark ---------- */
.brand{display:inline-flex;align-items:center;gap:10px}
.brand__logo{height:22px;width:auto;display:block}
.footer .brand__logo{height:24px}
.brand__mark{
width:15px;height:15px;border-radius:3.5px;transform:rotate(45deg);
background:linear-gradient(135deg,#3A3327,var(--ink));
box-shadow:inset 0 0 0 2px rgba(246,241,232,.35);flex:none;
}
.brand__word{font-family:var(--display);letter-spacing:.22em;font-size:15px}
/* ---------- top nav ---------- */
.topbar{
position:fixed;inset:0 0 auto 0;z-index:60;
transition:background .3s ease,box-shadow .3s ease;
}
.topbar.scrolled{background:rgba(246,241,232,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.topbar__wrap{
max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
height:var(--nav-h);display:flex;align-items:center;gap:24px;position:relative;
}
/* logo left, nav links centered, CTA right */
.topbar__nav{display:flex;align-items:center;gap:6px;position:absolute;left:50%;transform:translateX(-50%)}
.topbar__nav a,.topbar__drop>button{
font-family:var(--sans);font-weight:400;font-size:14.5px;color:var(--ink-70);
padding:8px 12px;border-radius:9px;border:0;background:none;cursor:pointer;
transition:color .2s ease,background .2s ease;display:inline-flex;align-items:center;gap:6px;
}
.topbar__nav a:hover,.topbar__drop>button:hover{color:var(--ink);background:rgba(38,33,26,.05)}
.topbar__nav a.active{color:var(--navy)}
.topbar__drop{position:relative}
.topbar__drop>button .caret{font-size:10px;transition:transform .25s ease;color:var(--ink-50)}
.topbar__drop:hover>button .caret{transform:rotate(180deg)}
.topbar__menu{
position:absolute;top:calc(100% + 6px);left:0;min-width:240px;
background:var(--porcelain);border:0.5px solid var(--line);border-radius:14px;
padding:8px;box-shadow:0 24px 50px rgba(38,33,26,.12);
opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;
}
.topbar__drop:hover .topbar__menu,.topbar__drop:focus-within .topbar__menu{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .22s ease,transform .22s ease}
.topbar__menu a{display:block;padding:10px 12px;border-radius:9px;font-size:14px}
.topbar__menu a b{display:block;font-weight:500;color:var(--ink)}
.topbar__menu a span{display:block;font-size:13px;color:var(--ink-50);line-height:1.4}
.topbar__cta{margin-left:auto}
.topbar__burger{
display:none;margin-left:auto;background:none;border:0;cursor:pointer;
width:40px;height:40px;flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
.topbar__burger span{width:20px;height:1.6px;background:var(--ink);border-radius:2px;transition:.25s}
.topbar__burger.open span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.topbar__burger.open span:nth-child(2){opacity:0}
.topbar__burger.open span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
/* mobile drawer */
.drawer{
position:fixed;inset:var(--nav-h) 0 0 0;z-index:59;
background:rgba(246,241,232,.98);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
padding:24px var(--pad) 48px;overflow-y:auto;
opacity:0;visibility:hidden;transform:translateY(-8px);
transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s;
}
.drawer.open{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .3s ease,transform .3s ease}
.drawer a{display:block;font-family:var(--display);font-size:22px;color:var(--ink);padding:13px 0;border-bottom:0.5px solid var(--line)}
.drawer .drawer__sub a{font-family:var(--sans);font-size:15px;color:var(--ink-70);padding:9px 0 9px 16px}
.drawer .btn{margin-top:26px}
/* ---------- buttons ---------- */
.btn{
display:inline-flex;align-items:center;gap:12px;
font-family:var(--sans);font-weight:400;font-size:14.5px;line-height:1;
padding:15px 24px;border-radius:12px;border:0.5px solid transparent;cursor:pointer;
transition:transform .35s cubic-bezier(.22,1,.36,1),background .25s ease,color .25s ease,border-color .25s ease;
}
.btn .arw{transition:transform .35s cubic-bezier(.22,1,.36,1)}
.btn:hover .arw{transform:translateX(5px)}
.btn--solid{background:var(--navy);color:#F6F1E8}
.btn--solid:hover{background:#16345D}
.btn--ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--ink-50)}
.btn--ghost-onDark{border-color:var(--line-dark);color:var(--onDark)}
.btn--ghost-onDark:hover{border-color:var(--onDark-60)}
.btn--sm{padding:11px 18px;font-size:14px;border-radius:10px}
.link-arw{
display:inline-flex;align-items:center;gap:10px;font-size:15px;color:var(--ink-70);
border-bottom:1px solid var(--line);padding-bottom:4px;
transition:color .2s ease,border-color .2s ease;
}
.link-arw:hover{color:var(--navy);border-color:var(--navy)}
/* ---------- type ---------- */
.label{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--gold);text-transform:uppercase}
.label--onDark{color:var(--gold)}
.h-display{font-family:var(--display);font-weight:400;font-size:clamp(40px,4.9vw,92px);line-height:1.1;letter-spacing:.012em}
.h-sec{font-family:var(--display);font-weight:400;font-size:clamp(34px,4.6vw,64px);line-height:1.16;letter-spacing:.012em}
.h-sub{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.6vw,36px);line-height:1.2;letter-spacing:.012em}
.stone{color:var(--stone)}
.onDark .stone{color:rgba(244,239,230,.45)}
.lede{font-size:clamp(16px,1.5vw,19px);color:var(--ink-70);line-height:1.8;max-width:62ch}
/* ---------- generic section + page hero ---------- */
.section{position:relative;padding-block:clamp(80px,12vh,150px)}
/* soft wash instead of flat bone, sections melt into each other (carried from V1) */
.section--alt{background:linear-gradient(180deg,var(--porcelain),var(--bone) 30% 70%,var(--porcelain))}
/* deep navy with a blue dawn at the top and a faint gold ember low right (carried from V1) */
.section--dark{
background:
radial-gradient(120% 90% at 50% 0%,rgba(46,111,214,.16),transparent 55%),
radial-gradient(70% 55% at 86% 100%,rgba(184,146,75,.10),transparent 60%),
linear-gradient(180deg,#172A4C,var(--dark) 62%);
color:var(--onDark);
}
.section .label{display:block;margin-bottom:22px}
/* Section headers are centered sitewide, matching the home page rhythm.
The old 56ch cap sat on the whole head, which squeezed .h-sec and broke the
author's
line breaks into four ragged lines. The cap now lives on the
lede alone, so headlines break where they were written to break and only the
reading measure stays constrained. Grids and lists below are siblings, so
they keep their left alignment. */
/* Only FULL-WIDTH heads centre, i.e. direct children of .wrap. A head nested in
a grid is one half of a side-by-side layout (ai.html "grounded") and stays
ranged left against its partner card. balance keeps headlines with no authored
from orphaning a short last line now that they span the full wrap;
authored breaks still win. */
.wrap > .section__head{text-align:center}
.wrap > .section__head .h-sec{text-wrap:balance}
.wrap > .section__head .lede{margin-inline:auto;text-wrap:pretty}
.section__head .h-sec{margin-bottom:20px}
.page-hero{
position:relative;
padding-block:calc(var(--nav-h) + clamp(70px,12vh,120px)) clamp(50px,8vh,90px);
border-bottom:0.5px solid var(--line);
text-align:center;
/* ambient light: warm gold from the left, cool tech blue upper right, whisper only */
background:
radial-gradient(72% 88% at 82% 0%,rgba(46,111,214,.07),transparent 58%),
radial-gradient(64% 80% at 10% 6%,rgba(184,146,75,.09),transparent 55%),
linear-gradient(180deg,#FAF6EF,var(--porcelain) 80%);
}
.page-hero .label{display:block;margin-bottom:24px}
.page-hero .h-display{text-wrap:balance}
.page-hero__sub{margin-top:24px;font-size:clamp(16px,1.5vw,20px);color:var(--ink-70);max-width:60ch;margin-inline:auto;line-height:1.8;text-wrap:pretty}
.page-hero--media{border-bottom:0;overflow:hidden}
.page-hero__bg{position:absolute;inset:0;z-index:-1}
.page-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:70% 60%;opacity:.9}
/* ---------- ambient aura (carried from V1's aurora, porcelain toned) ----------
Usage: give the section class="has-aura" and drop in
Three huge blurred glows, gold, blue, sand, drifting very slowly. */
.has-aura{position:relative;overflow:hidden}
.has-aura>.wrap{position:relative;z-index:1}
.aura{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.aura i{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
.aura i:nth-child(1){
width:52vw;aspect-ratio:1;top:-20%;left:-12%;
background:radial-gradient(circle,rgba(184,146,75,.17),transparent 64%);
animation:auraA 36s ease-in-out infinite alternate;
}
.aura i:nth-child(2){
width:44vw;aspect-ratio:1;top:0;right:-14%;
background:radial-gradient(circle,rgba(46,111,214,.13),transparent 64%);
animation:auraB 44s ease-in-out infinite alternate;
}
.aura i:nth-child(3){
width:48vw;aspect-ratio:1;bottom:-26%;left:22%;
background:radial-gradient(circle,rgba(226,215,194,.62),transparent 66%);
animation:auraC 50s ease-in-out infinite alternate;
}
/* blue leaning variant for tech sections */
.aura--tech i:nth-child(1){background:radial-gradient(circle,rgba(46,111,214,.14),transparent 64%)}
.aura--tech i:nth-child(2){background:radial-gradient(circle,rgba(184,146,75,.13),transparent 64%)}
@keyframes auraA{to{transform:translate(7vw,6vh) scale(1.12)}}
@keyframes auraB{to{transform:translate(-6vw,8vh) scale(1.07)}}
@keyframes auraC{to{transform:translate(5vw,-6vh) scale(1.14)}}
body.static .aura i,body.no-fx .aura i{animation:none}
/* ---------- cards & grids ---------- */
.grid{display:grid;gap:clamp(18px,2vw,28px)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.card{
background:rgba(255,252,246,.7);border:0.5px solid var(--line);border-radius:20px;
padding:clamp(24px,2.6vw,34px);
transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s ease;
}
.card--hover:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(38,33,26,.09)}
.card__no{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--gold)}
.card__k{font-family:var(--display);font-weight:400;font-size:clamp(20px,1.9vw,26px);line-height:1.2;margin:14px 0 10px}
.card__d{font-size:15px;color:var(--ink-70);line-height:1.65}
.card__repl{margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ink-50);text-transform:uppercase}
/* feature list (module rows) */
.rows{list-style:none}
.rows li{padding:20px 0;border-bottom:0.5px solid var(--line)}
.rows li:first-child{border-top:0.5px solid var(--line)}
.rows .k{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--gold);text-transform:uppercase}
.rows h3{font-family:var(--display);font-weight:400;font-size:clamp(19px,1.7vw,25px);line-height:1.3;margin:6px 0 4px}
.rows p{font-size:15px;color:var(--ink-70);line-height:1.65;max-width:60ch}
/* chip row */
.chips-row{display:flex;flex-wrap:wrap;gap:12px}
.chips-row span{font-size:14px;color:var(--ink-70);border:0.5px solid var(--line);border-radius:999px;padding:11px 20px;line-height:1;background:rgba(255,252,246,.5)}
.section--dark .chips-row span{color:var(--onDark-60);border-color:var(--line-dark);background:transparent}
/* stat band */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
.stat{border-top:0.5px solid var(--line);padding-top:22px}
.stat__num{font-family:var(--display);font-size:clamp(38px,4.4vw,68px);line-height:1;color:var(--ink)}
.stat__cap{margin-top:10px;font-size:14px;color:var(--ink-50);line-height:1.6}
/* CTA band */
.cta-row{display:flex;flex-wrap:wrap;gap:14px 24px;margin-top:38px;align-items:center}
.cta-row--center{justify-content:center}
.closing-band{text-align:center}
.closing-band .h-sec{margin-bottom:8px}
/* ---------- legal / prose ---------- */
.legal-wrap{max-width:900px;margin-inline:auto;padding-inline:var(--pad)}
.legal-hero{padding-block:calc(var(--nav-h) + clamp(60px,10vh,100px)) clamp(30px,5vh,50px)}
.legal-hero .kicker{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--gold);text-transform:uppercase}
.legal-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,5vw,60px);line-height:1.12;letter-spacing:.012em;margin-top:20px}
.legal-hero .meta{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:26px}
.legal-hero .meta span{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-50)}
.legal-hero .meta b{font-weight:500;color:var(--ink-70)}
.toc{border:0.5px solid var(--line);border-radius:16px;padding:24px 28px;margin:8px 0 44px;background:rgba(255,252,246,.5)}
.toc p{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--gold);text-transform:uppercase;margin-bottom:14px}
.toc ol{list-style:none;columns:2;column-gap:36px}
.toc ol li{margin-bottom:9px;break-inside:avoid}
.toc ol a{font-size:14px;color:var(--ink-70);transition:color .2s ease}
.toc ol a:hover{color:var(--ink)}
.legal{font-size:16px;line-height:1.85;color:var(--ink-70);padding-bottom:clamp(60px,10vh,110px)}
.legal>p{margin-bottom:20px}
.legal section{padding-top:clamp(34px,4vh,52px);margin-top:clamp(34px,4vh,52px);border-top:0.5px solid var(--line)}
.legal section:first-of-type{border-top:0;margin-top:0}
.legal h2{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.4vw,32px);line-height:1.2;color:var(--ink);margin-bottom:20px;letter-spacing:.01em}
.legal h2 .n{font-family:var(--mono);font-size:.5em;color:var(--gold);vertical-align:middle;margin-right:12px;letter-spacing:.1em}
.legal h3{font-family:var(--display);font-weight:400;font-size:clamp(19px,1.7vw,23px);color:var(--ink);margin:32px 0 14px}
.legal h4{font-family:var(--sans);font-weight:500;font-size:16px;color:var(--ink);margin:24px 0 10px}
.legal p{margin-bottom:18px}
.legal a{color:var(--ink);border-bottom:1px solid var(--line);transition:border-color .2s ease,color .2s ease}
.legal a:hover{color:var(--navy);border-color:var(--navy)}
.legal ul,.legal ol{margin:0 0 20px 22px}
.legal li{margin-bottom:10px}
.legal code{font-family:var(--mono);font-size:.86em;background:var(--bone);padding:2px 7px;border-radius:6px;color:var(--ink)}
.legal table{width:100%;border-collapse:collapse;margin:8px 0 26px;font-size:14px}
.legal th,.legal td{text-align:left;padding:12px 14px;border:0.5px solid var(--line);vertical-align:top}
.legal th{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--bone)}
.legal .callout{background:var(--bone);border-left:2px solid var(--gold);border-radius:0 12px 12px 0;padding:16px 20px;margin:0 0 22px;color:var(--ink-70)}
/* legal hub */
.legal-index{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:clamp(40px,6vh,70px)}
.legal-index a{
display:block;border:0.5px solid var(--line);border-radius:16px;padding:24px 26px;
background:rgba(255,252,246,.5);transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease;
}
.legal-index a:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(38,33,26,.08)}
.legal-index .kk{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--gold);text-transform:uppercase}
.legal-index .tt{display:block;font-family:var(--display);font-size:20px;margin-top:10px;color:var(--ink)}
/* ---------- footer ---------- */
.footer{border-top:0.5px solid var(--line);padding-block:60px 40px;background:linear-gradient(180deg,var(--porcelain),#F0E9DB);position:relative;z-index:2}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.footer__tag{margin-top:16px;font-size:14px;color:var(--ink-70);max-width:32ch;line-height:1.7}
.footer__nom{margin-top:8px;font-size:13.5px;color:var(--ink-50)}
.footer__h{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--gold);text-transform:uppercase;margin-bottom:16px}
.footer__col a{display:block;font-size:14px;color:var(--ink-70);padding:6px 0;transition:color .2s ease}
.footer__col a:hover{color:var(--navy)}
.footer__base{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;margin-top:48px;padding-top:24px;border-top:0.5px solid var(--line);font-size:13.5px;color:var(--ink-50)}
.footer__legal{display:flex;flex-wrap:wrap;gap:18px}
.footer__legal a:hover{color:var(--ink)}
/* ---------- reveal (shared, opt-in via .reveal) ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
body.no-fx .reveal{opacity:1;transform:none}
/* ---------- responsive ---------- */
@media (max-width:1080px){
.footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
.topbar__nav{display:none}
.topbar .topbar__cta{display:none} /* higher specificity: beats a page's inline .btn rule */
.topbar__burger{display:flex}
.grid--3,.grid--4{grid-template-columns:1fr 1fr}
.stat-grid{grid-template-columns:1fr 1fr}
.toc ol{columns:1}
.legal-index{grid-template-columns:1fr}
}
@media (max-width:620px){
.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
.footer__grid{grid-template-columns:1fr 1fr}
.stat-grid{grid-template-columns:1fr 1fr}
.legal-wrap,.legal-hero{padding-inline:var(--pad)}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
.reveal{opacity:1;transform:none}
}
/* ---------- cookie consent banner, porcelain skin ----------
consent.js ships its own "Ocean Breeze" styling (Satoshi, sky #0EA5E9) and is
SHARED with the live V1 site (preview.html), so it is not edited here. These
rules restyle it for porcelain pages only. Every selector is prefixed with
`body` to reach specificity (0,1,1,1), which beats the script's own
`#acConsent .x` (0,1,1,0) no matter that its