/* ============================================================ TALK TODAY — stylesheet (i18n + light/dark) Adjusted palette: International Orange #FF5A1F · Deep Sky Blue #00BFFF · Cool Light Gray #CFC6DC. Navy + Ink carried over. Theme switches via [data-theme="dark"] on . ============================================================ */ :root { /* ----- Raw palette ----- */ --c-hearth:#FF5A1F; --c-hearth-light:#FF8052; --c-hearth-dark:#D14A19; --c-navy:#1A2B4A; --c-navy-soft:#24375A; --c-navy-deep:#0F1B33; --c-sky:#00BFFF; --c-cream:#CFC6DC; --c-cream-soft:#C2B8D0; --c-cream-warm:#E2DBEC; --c-ink:#2C2825; --c-line:rgba(26,43,74,0.14); --c-line-strong:rgba(26,43,74,0.28); --c-line-dark:rgba(207,198,220,0.16); --c-line-dark-strong:rgba(207,198,220,0.30); /* ----- Semantic (LIGHT defaults) ----- */ --bg:var(--c-cream); --bg-elevated:#FFFFFF; --bg-subdued:var(--c-cream-soft); --bg-dark:var(--c-navy); --bg-dark-deep:var(--c-navy-deep); --heading:var(--c-navy); --text:var(--c-ink); --text-subdued:#524e57; --text-muted:#837e8c; --text-on-dark:var(--c-cream); --text-on-dark-muted:#9aa8c4; --text-on-hearth:var(--c-navy); --text-link:var(--c-hearth-dark); --label-color:var(--c-hearth-dark); --accent:var(--c-hearth); --accent-hover:var(--c-hearth-dark); --accent-soft:rgba(255,90,31,0.12); --success:#4A8B6F; --warning:#D49F4B; --error:var(--c-hearth-dark); --info:var(--c-sky); --border:var(--c-line); --border-strong:var(--c-line-strong); --nav-bg:rgba(207,198,220,0.82); --menu-bg:var(--c-cream); /* ----- Type ----- */ --font-display:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif; --font-body:'Inter','Helvetica Neue',Arial,sans-serif; --t-display-xl:clamp(58px,10vw,150px); --t-display-lg:clamp(48px,7.5vw,104px); --t-display-md:clamp(36px,5.5vw,76px); --t-display-sm:clamp(26px,3.6vw,52px); --t-h1:34px; --t-h2:27px; --t-h3:21px; --t-h4:17px; --t-body-lg:18px; --t-body:15.5px; --t-body-sm:13.5px; --t-caption:12px; --t-label:11px; --w-light:300; --w-regular:400; --w-medium:500; --w-semi:600; --w-bold:700; --w-heavy:800; --track-display:-0.045em; --track-tight:-0.025em; --track-base:-0.01em; --track-label:0.18em; --track-stencil:0.22em; --leading-tight:0.9; --leading-snug:1.15; --leading-base:1.55; --leading-relaxed:1.7; /* ----- Space / radius ----- */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:40px; --space-8:48px; --space-9:56px; --space-10:64px; --space-11:80px; --space-12:96px; --space-13:128px; --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-pill:999px; /* ----- Shadow / motion ----- */ --shadow-sm:0 1px 2px rgba(26,43,74,0.06); --shadow-md:0 4px 12px rgba(26,43,74,0.08); --shadow-lg:0 12px 32px rgba(26,43,74,0.12); --shadow-xl:0 24px 56px rgba(26,43,74,0.20); --shadow-focus:0 0 0 3px rgba(255,90,31,0.38); --shadow-glow:0 0 16px 2px rgba(255,90,31,0.50); --d-fast:160ms; --d-base:240ms; --d-slow:400ms; --e-standard:cubic-bezier(0.4,0,0.2,1); --e-out:cubic-bezier(0,0,0.2,1); --e-emphasis:cubic-bezier(0.34,1.56,0.64,1); --maxw:1200px; } /* ----- DARK theme overrides ----- */ [data-theme="dark"] { --bg:#0F1B33; --bg-elevated:#1B2C4B; --bg-subdued:#16223C; --bg-dark:#1A2B4A; --bg-dark-deep:#0A1426; --heading:#ECE7F3; --text:#D6D0E0; --text-subdued:#b0aabe; --text-muted:#857f93; --text-on-dark:var(--c-cream); --text-on-dark-muted:#9aa8c4; --text-link:var(--c-hearth-light); --label-color:var(--c-hearth-light); --accent-soft:rgba(255,90,31,0.18); --border:var(--c-line-dark); --border-strong:var(--c-line-dark-strong); --c-line:rgba(207,198,220,0.13); --c-line-strong:rgba(207,198,220,0.24); --nav-bg:rgba(15,27,51,0.84); --menu-bg:#0F1B33; --shadow-sm:0 1px 2px rgba(0,0,0,0.4); --shadow-md:0 6px 18px rgba(0,0,0,0.45); --shadow-lg:0 16px 40px rgba(0,0,0,0.55); --shadow-xl:0 28px 64px rgba(0,0,0,0.62); color-scheme: dark; } /* ----- Reset ----- */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:var(--font-body);background:var(--bg);color:var(--text);font-size:var(--t-body);line-height:var(--leading-base); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background var(--d-base) var(--e-standard),color var(--d-base)} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:none;background:none} :focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--r-xs)} ::selection{background:var(--c-hearth);color:var(--c-navy)} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}} /* ----- Layout ----- */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--space-6)} @media (max-width:640px){.wrap{padding:0 var(--space-5)}} .section{padding:var(--space-13) 0} @media (max-width:768px){.section{padding:var(--space-11) 0}} .section--tight{padding:var(--space-11) 0} .dark{background:var(--bg-dark);color:var(--text-on-dark)} .deep{background:var(--bg-dark-deep);color:var(--text-on-dark)} /* ----- Wordmark + ember ----- */ .wordmark{font-family:var(--font-display);font-weight:var(--w-heavy);letter-spacing:-0.04em;color:var(--heading);display:inline-flex;align-items:baseline;line-height:1} .dark .wordmark,.deep .wordmark{color:var(--c-cream)} .em-dot{display:inline-block;width:0.2em;height:0.2em;border-radius:50%;background:var(--c-hearth);margin-left:0.06em;vertical-align:baseline;transform:translateY(-0.02em); box-shadow:0 0 0 0.03em rgba(255,90,31,0.22),0 0 0.5em 0.05em rgba(255,90,31,0.55);animation:ember 2.8s var(--e-standard) infinite} @keyframes ember{0%,100%{box-shadow:0 0 0 0.03em rgba(255,90,31,0.18),0 0 0.4em 0.04em rgba(255,90,31,0.40)}50%{box-shadow:0 0 0 0.04em rgba(255,90,31,0.30),0 0 0.7em 0.08em rgba(255,90,31,0.70)}} /* ----- Eyebrow label ----- */ .label{font-family:var(--font-body);font-weight:var(--w-bold);font-size:var(--t-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--label-color);display:inline-flex;align-items:center;gap:var(--space-2)} .dark .label,.deep .label{color:var(--c-sky)} .label::before{content:"";width:18px;height:1.5px;background:currentColor;opacity:.6} /* ----- Headlines ----- */ .display{font-family:var(--font-display);font-weight:var(--w-heavy);line-height:var(--leading-tight);letter-spacing:var(--track-display)} .display .hot{color:var(--c-hearth)} .h-xl{font-size:var(--t-display-xl)} .h-lg{font-size:var(--t-display-lg)} .h-md{font-size:var(--t-display-md)} .h-sm{font-size:var(--t-display-sm)} .italic-line{font-family:var(--font-display);font-weight:var(--w-light);font-style:italic;letter-spacing:-0.015em;line-height:1.25;color:var(--heading)} .italic-line em{color:var(--c-hearth);font-style:italic} .section-title{font-family:var(--font-display);font-weight:var(--w-heavy);font-size:var(--t-display-sm);line-height:1.02;letter-spacing:var(--track-tight);color:var(--heading);max-width:16ch} .dark .section-title,.deep .section-title{color:var(--c-cream)} .section-title em{font-weight:var(--w-light);font-style:italic;color:var(--c-hearth)} .lede{font-size:var(--t-body-lg);line-height:var(--leading-relaxed);color:var(--text-subdued);max-width:60ch;margin-top:var(--space-5)} .dark .lede,.deep .lede{color:var(--text-on-dark-muted)} .lede strong{color:var(--heading);font-weight:var(--w-semi)} .dark .lede strong,.deep .lede strong,.hero .lede strong,.page-head .lede strong{color:var(--c-cream)} /* ----- Buttons ----- */ .btn{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-weight:var(--w-bold);font-size:var(--t-body);letter-spacing:-0.01em;padding:15px 26px;border-radius:var(--r-pill); transition:transform var(--d-fast) var(--e-emphasis),background var(--d-base),color var(--d-base),box-shadow var(--d-base);will-change:transform} .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn .arrow{transition:transform var(--d-base) var(--e-out)} .btn:hover .arrow{transform:translateX(4px)} .btn--primary{background:var(--c-hearth);color:var(--c-navy);box-shadow:var(--shadow-md)} .btn--primary:hover{background:var(--c-hearth-light);box-shadow:var(--shadow-glow)} .btn--ghost{background:transparent;color:var(--heading);box-shadow:inset 0 0 0 1.5px var(--border-strong)} .dark .btn--ghost,.deep .btn--ghost,.hero .btn--ghost,.page-head .btn--ghost{color:var(--c-cream);box-shadow:inset 0 0 0 1.5px var(--c-line-dark-strong)} .btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--c-hearth);color:var(--c-hearth)} .cta-row{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-7)} /* ----- Navigation ----- */ .nav{position:sticky;top:0;z-index:100;background:var(--nav-bg);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid transparent;transition:border-color var(--d-base),background var(--d-base),box-shadow var(--d-base)} .nav.is-scrolled{border-bottom-color:var(--border);box-shadow:var(--shadow-sm)} .nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px;gap:var(--space-4)} .nav-brand{font-size:21px} .nav-links{display:flex;align-items:center;gap:var(--space-7)} .nav-links a{font-size:var(--t-body-sm);font-weight:var(--w-medium);color:var(--heading);letter-spacing:-0.005em;position:relative;padding:4px 0;transition:color var(--d-fast)} .nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:0;background:var(--c-hearth);transition:width var(--d-base) var(--e-out)} .nav-links a:hover{color:var(--c-hearth-dark)} .nav-links a:hover::after,.nav-links a[aria-current="page"]::after{width:100%} .nav-links a[aria-current="page"]{color:var(--c-hearth-dark)} [data-theme="dark"] .nav-links a:hover,[data-theme="dark"] .nav-links a[aria-current="page"]{color:var(--c-hearth-light)} .nav-links > .btn--primary{display:none} .nav-actions{display:flex;align-items:center;gap:var(--space-3)} .nav-toggle{display:none;width:40px;height:40px;align-items:center;justify-content:center;border-radius:var(--r-sm);color:var(--heading)} .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";display:block;width:20px;height:2px;background:currentColor;border-radius:2px;transition:transform var(--d-base) var(--e-standard),opacity var(--d-fast)} .nav-toggle span::before{transform:translateY(-6px)} .nav-toggle span::after{transform:translateY(4px)} .nav.is-open .nav-toggle span{background:transparent} .nav.is-open .nav-toggle span::before{transform:rotate(45deg)} .nav.is-open .nav-toggle span::after{transform:rotate(-45deg) translateY(-1.5px) translateX(1px)} /* ----- Switchers (lang + theme) ----- */ .nav-tools{display:flex;align-items:center;gap:var(--space-3)} .lang-switch{display:inline-flex;align-items:center;border:1px solid var(--border-strong);border-radius:var(--r-pill);overflow:hidden;background:transparent} .lang-switch button{padding:7px 11px;font-family:var(--font-body);font-weight:var(--w-bold);font-size:10.5px;letter-spacing:0.06em;color:var(--text-muted);transition:background var(--d-fast),color var(--d-fast)} .lang-switch button + button{border-left:1px solid var(--border)} .lang-switch button:hover{color:var(--heading)} .lang-switch button[aria-pressed="true"]{background:var(--c-hearth);color:var(--c-navy)} .theme-toggle{width:38px;height:38px;border-radius:var(--r-pill);border:1px solid var(--border-strong);display:grid;place-items:center;color:var(--heading);transition:border-color var(--d-fast),color var(--d-fast),transform var(--d-fast)} .theme-toggle:hover{color:var(--c-hearth);border-color:var(--c-hearth);transform:translateY(-1px)} .theme-toggle svg{width:18px;height:18px} .theme-toggle .i-sun{display:none} .theme-toggle .i-moon{display:block} [data-theme="dark"] .theme-toggle .i-moon{display:none} [data-theme="dark"] .theme-toggle .i-sun{display:block} @media (max-width:900px){ .nav-toggle{display:inline-flex} .lang-switch button{padding:6px 9px} .nav-links{position:absolute;left:0;right:0;top:68px;flex-direction:column;align-items:flex-start;gap:0;background:var(--menu-bg);border-bottom:1px solid var(--border); padding:var(--space-4) var(--space-6) var(--space-6);box-shadow:var(--shadow-lg);clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none; transition:clip-path var(--d-slow) var(--e-out),opacity var(--d-base)} .nav.is-open .nav-links{clip-path:inset(0 0 0 0);opacity:1;pointer-events:auto} .nav-links a{width:100%;padding:var(--space-4) 0;border-bottom:1px solid var(--border);font-size:var(--t-body-lg)} .nav-links > .btn--primary{display:inline-flex;margin-top:var(--space-4);border-bottom:none;width:auto} } @media (max-width:560px){ .lang-switch button{padding:6px 8px;font-size:10px} .nav-brand{font-size:19px} } /* ----- Hero ----- */ .hero{position:relative;overflow:hidden;background:var(--c-navy);color:var(--c-cream);padding:clamp(96px,16vh,200px) 0 clamp(80px,12vh,150px)} .hero::after{content:"";position:absolute;right:-10%;top:-20%;width:60vw;height:60vw;max-width:760px;max-height:760px; background:radial-gradient(circle at center,rgba(255,90,31,0.30) 0%,rgba(255,90,31,0.06) 38%,transparent 64%);filter:blur(10px);pointer-events:none;z-index:0} .hero::before{content:"";position:absolute;left:-15%;bottom:-30%;width:50vw;height:50vw;max-width:620px;max-height:620px; background:radial-gradient(circle at center,rgba(0,191,255,0.18) 0%,transparent 60%);filter:blur(12px);pointer-events:none;z-index:0} .hero .wrap{position:relative;z-index:1} .hero h1{font-size:var(--t-display-lg)} .hero .lede{color:var(--text-on-dark-muted);max-width:52ch} /* ----- Reveal (only with JS) ----- */ .js .reveal{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--e-out),transform 700ms var(--e-out)} .js .reveal.in{opacity:1;transform:none} .reveal[data-delay="1"]{transition-delay:90ms} .reveal[data-delay="2"]{transition-delay:180ms} .reveal[data-delay="3"]{transition-delay:270ms} .reveal[data-delay="4"]{transition-delay:360ms} /* ----- Grid ----- */ .grid{display:grid;gap:var(--space-6)} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} .grid-split{grid-template-columns:1fr 1fr;gap:var(--space-10);align-items:center} @media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}.grid-split{grid-template-columns:1fr;gap:var(--space-8)}} @media (max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}} /* ----- Scene ----- */ .scene{background:var(--c-navy-soft);border-radius:var(--r-lg);padding:var(--space-9);border:1px solid var(--c-line-dark)} .scene .turn{display:flex;gap:var(--space-4);padding:var(--space-3) 0;font-size:var(--t-body-lg)} .scene .who{font-weight:var(--w-bold);color:var(--c-sky);min-width:64px;font-size:var(--t-caption);letter-spacing:var(--track-label);text-transform:uppercase;padding-top:6px} .scene .said{color:var(--c-cream)} .scene .said.dim{color:var(--text-on-dark-muted)} .scene .ping{margin:var(--space-5) 0;display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-display);font-weight:var(--w-heavy);color:var(--c-hearth);letter-spacing:-0.02em} .scene .ping .dot{width:10px;height:10px;border-radius:50%;background:var(--c-hearth);box-shadow:var(--shadow-glow);animation:ember 2.8s infinite} /* ----- Cards ----- */ .card{background:var(--bg-elevated);border-radius:var(--r-lg);padding:var(--space-7);border:1px solid var(--border);transition:transform var(--d-base) var(--e-out),box-shadow var(--d-base),border-color var(--d-base);height:100%} .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .card .num{font-family:var(--font-display);font-weight:var(--w-heavy);font-size:15px;color:var(--c-hearth);letter-spacing:var(--track-label);margin-bottom:var(--space-4);display:block} .card h3{font-family:var(--font-display);font-weight:var(--w-bold);font-size:var(--t-h3);color:var(--heading);letter-spacing:-0.02em;line-height:1.05} .card p{margin-top:var(--space-3);color:var(--text-subdued);font-size:var(--t-body);line-height:var(--leading-relaxed)} .dark .card,.deep .card{background:var(--c-navy-soft);border-color:var(--c-line-dark)} .dark .card h3,.deep .card h3{color:var(--c-cream)} .dark .card p,.deep .card p{color:var(--text-on-dark-muted)} /* ----- Ecosystem rows ----- */ .eco-row{display:grid;grid-template-columns:56px 1fr auto;gap:var(--space-5);align-items:center;padding:var(--space-6) 0;border-top:1px solid var(--c-line-dark)} .eco-row:last-child{border-bottom:1px solid var(--c-line-dark)} .eco-row .idx{font-family:var(--font-display);font-weight:var(--w-heavy);font-size:var(--t-h3);color:var(--c-sky)} .eco-row h3{font-family:var(--font-display);font-weight:var(--w-bold);font-size:var(--t-h3);color:var(--c-cream);letter-spacing:-0.02em} .eco-row p{color:var(--text-on-dark-muted);font-size:var(--t-body);margin-top:4px} .eco-row .stage{font-size:var(--t-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--c-hearth);font-weight:var(--w-bold);white-space:nowrap} @media (max-width:600px){.eco-row{grid-template-columns:40px 1fr}.eco-row .stage{grid-column:2}} /* ----- Deck visual + prompt card (fixed contrast) ----- */ .deck-visual{position:relative;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(155deg,var(--c-navy) 0%,var(--c-navy-deep) 100%);display:flex;align-items:center;justify-content:center;padding:var(--space-8);box-shadow:var(--shadow-xl)} .deck-visual .glow{position:absolute;inset:0;background:radial-gradient(circle at 70% 25%,rgba(255,90,31,0.35),transparent 55%)} .prompt-card{position:relative;z-index:1;background:#F3EFF8;color:var(--c-navy);border-radius:var(--r-md);padding:var(--space-8) var(--space-7);width:100%;max-width:320px;box-shadow:var(--shadow-xl);transform:rotate(-3deg);border:1px solid #DDD5E6} .prompt-card .meta{font-size:var(--t-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--c-hearth-dark);font-weight:var(--w-bold);display:flex;justify-content:space-between} .prompt-card .q{font-family:var(--font-display);font-weight:var(--w-heavy);font-size:27px;line-height:1.08;letter-spacing:-0.025em;margin:var(--space-6) 0 var(--space-5)} .prompt-card .foot{font-size:var(--t-caption);color:#6c6877;border-top:1px solid rgba(26,43,74,0.14);padding-top:var(--space-3)} /* ----- Tiers ----- */ .tier{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--space-8) var(--space-7);display:flex;flex-direction:column;height:100%;transition:transform var(--d-base) var(--e-out),box-shadow var(--d-base)} .tier:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .tier.featured{border-color:var(--c-hearth);box-shadow:var(--shadow-md);position:relative} .tier.featured::before{content:attr(data-badge);position:absolute;top:-12px;left:var(--space-7);background:var(--c-hearth);color:var(--c-navy);font-size:var(--t-label);font-weight:var(--w-bold);letter-spacing:var(--track-label);text-transform:uppercase;padding:5px 12px;border-radius:var(--r-pill)} .tier .tname{font-family:var(--font-display);font-weight:var(--w-bold);font-size:var(--t-h3);color:var(--heading)} .tier .price{font-family:var(--font-display);font-weight:var(--w-heavy);font-size:44px;color:var(--heading);letter-spacing:-0.03em;margin:var(--space-3) 0} .tier .price span{font-size:var(--t-body);font-weight:var(--w-medium);color:var(--text-muted);letter-spacing:0} .tier ul{list-style:none;margin:var(--space-5) 0 var(--space-7);display:flex;flex-direction:column;gap:var(--space-3)} .tier li{display:flex;gap:var(--space-3);font-size:var(--t-body);color:var(--text-subdued);line-height:1.45} .tier li::before{content:"";flex:none;width:16px;height:16px;margin-top:3px;border-radius:50%;background:var(--accent-soft); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 5l2.5 2.5L9 2' fill='none' stroke='%23FF5A1F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center} .tier .btn{margin-top:auto;justify-content:center} /* ----- FAQ ----- */ .faq{border-top:1px solid var(--border)} .faq details{border-bottom:1px solid var(--border)} .faq summary{list-style:none;cursor:pointer;padding:var(--space-6) 0;display:flex;justify-content:space-between;gap:var(--space-5);font-family:var(--font-display);font-weight:var(--w-bold);font-size:var(--t-h4);color:var(--heading);letter-spacing:-0.015em} .faq summary::-webkit-details-marker{display:none} .faq summary .pm{flex:none;width:22px;height:22px;position:relative;transition:transform var(--d-base) var(--e-emphasis)} .faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:var(--c-hearth);border-radius:2px} .faq summary .pm::before{left:0;top:10px;width:22px;height:2px} .faq summary .pm::after{left:10px;top:0;width:2px;height:22px;transition:transform var(--d-base) var(--e-emphasis)} .faq details[open] summary .pm::after{transform:rotate(90deg)} .faq details[open] summary{color:var(--c-hearth-dark)} [data-theme="dark"] .faq details[open] summary{color:var(--c-hearth-light)} .faq .answer{padding:0 0 var(--space-6);color:var(--text-subdued);font-size:var(--t-body);line-height:var(--leading-relaxed);max-width:64ch} /* ----- Forms ----- */ .signup{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-6);max-width:520px} .signup input{flex:1 1 240px} .field{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-5)} .field label{font-size:var(--t-body-sm);font-weight:var(--w-semi);color:var(--heading)} .dark .field label,.deep .field label{color:var(--c-cream)} .field .req{color:var(--c-hearth-dark)} input,textarea,select{font-family:var(--font-body);font-size:var(--t-body);color:var(--text);background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:13px 15px;width:100%;transition:border-color var(--d-fast),box-shadow var(--d-fast)} textarea{min-height:130px;resize:vertical} input:focus,textarea:focus,select:focus{outline:none;border-color:var(--c-hearth);box-shadow:var(--shadow-focus)} input::placeholder,textarea::placeholder{color:var(--text-muted)} .field .error-msg{font-size:var(--t-body-sm);color:var(--c-hearth-dark);font-weight:var(--w-medium);min-height:1.2em} [data-theme="dark"] .field .error-msg{color:var(--c-hearth-light)} .field.invalid input,.field.invalid textarea{border-color:var(--c-hearth-dark)} .form-status{margin-top:var(--space-4);font-size:var(--t-body);font-weight:var(--w-medium)} .form-status.ok{color:var(--success)} .form-status.bad{color:var(--c-hearth-dark)} [data-theme="dark"] .form-status.bad{color:var(--c-hearth-light)} .form-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--space-8);box-shadow:var(--shadow-sm)} /* ----- Manifesto ----- */ .manifesto{text-align:center;max-width:20ch;margin:0 auto} .manifesto-quote{font-family:var(--font-display);font-weight:var(--w-light);font-style:italic;font-size:var(--t-display-sm);line-height:1.2;letter-spacing:-0.02em;color:var(--c-cream);max-width:24ch;margin:0 auto} .manifesto-quote em{color:var(--c-hearth)} .manifesto-attr{margin-top:var(--space-6);font-size:var(--t-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--c-sky);font-weight:var(--w-bold)} /* ----- Journal ----- */ .entry{padding:var(--space-7) 0;border-top:1px solid var(--border);display:grid;grid-template-columns:130px 1fr;gap:var(--space-6)} .entry:last-child{border-bottom:1px solid var(--border)} .entry .when{font-size:var(--t-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted);font-weight:var(--w-bold);padding-top:6px} .entry h3{font-family:var(--font-display);font-weight:var(--w-bold);font-size:var(--t-h2);color:var(--heading);letter-spacing:-0.02em;line-height:1.05} .entry p{color:var(--text-subdued);margin-top:var(--space-3);max-width:60ch} .entry .soon{font-size:var(--t-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--c-hearth-dark);font-weight:var(--w-bold);margin-top:var(--space-4);display:inline-block} [data-theme="dark"] .entry .soon{color:var(--c-hearth-light)} @media (max-width:600px){.entry{grid-template-columns:1fr;gap:var(--space-3)}} /* ----- Legal prose ----- */ .prose{max-width:70ch} .prose h2{font-family:var(--font-display);font-weight:var(--w-bold);font-size:var(--t-h2);color:var(--heading);letter-spacing:-0.02em;margin:var(--space-9) 0 var(--space-3)} .prose h3{font-family:var(--font-display);font-weight:var(--w-bold);font-size:var(--t-h4);color:var(--heading);margin:var(--space-6) 0 var(--space-2)} .prose p,.prose li{color:var(--text-subdued);line-height:var(--leading-relaxed);margin-bottom:var(--space-3)} .prose ul{padding-left:var(--space-5)} .prose a{color:var(--text-link);text-decoration:underline;text-underline-offset:2px} .prose strong{color:var(--heading);font-weight:var(--w-semi)} /* ----- Footer (always dark island) ----- */ .footer{background:var(--c-navy-deep);color:var(--text-on-dark);padding:var(--space-12) 0 var(--space-8)} [data-theme="dark"] .footer{background:var(--bg-dark-deep)} .footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--space-8)} @media (max-width:900px){.footer-top{grid-template-columns:1fr 1fr;gap:var(--space-7)}} @media (max-width:560px){.footer-top{grid-template-columns:1fr}} .footer-brand .wordmark{font-size:26px;color:var(--c-cream)} .footer-tag{margin-top:var(--space-4);color:var(--text-on-dark-muted);max-width:30ch;line-height:var(--leading-relaxed);font-size:var(--t-body-sm)} .footer h4{font-size:var(--t-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--c-sky);font-weight:var(--w-bold);margin-bottom:var(--space-4)} .footer ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-3)} .footer ul a{color:var(--text-on-dark-muted);font-size:var(--t-body-sm);transition:color var(--d-fast)} .footer ul a:hover{color:var(--c-hearth)} .footer-bottom{margin-top:var(--space-11);padding-top:var(--space-6);border-top:1px solid var(--c-line-dark);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);font-size:var(--t-caption);color:var(--text-on-dark-muted)} .footer-bottom a:hover{color:var(--c-hearth)} /* ----- Interior page header ----- */ .page-head{background:var(--c-navy);color:var(--c-cream);padding:clamp(80px,12vh,140px) 0 clamp(56px,8vh,90px);position:relative;overflow:hidden} .page-head::after{content:"";position:absolute;right:-8%;top:-30%;width:44vw;height:44vw;max-width:560px;max-height:560px;background:radial-gradient(circle at center,rgba(255,90,31,0.22),transparent 60%);filter:blur(10px)} .page-head .wrap{position:relative;z-index:1} .page-head h1{font-size:var(--t-display-md)} /* ----- Misc ----- */ .center{text-align:center} .mt-4{margin-top:var(--space-4)} .mt-6{margin-top:var(--space-6)} .mt-8{margin-top:var(--space-8)} .muted{color:var(--text-muted)} .skip-link{position:absolute;left:-9999px;top:0;background:var(--c-hearth);color:var(--c-navy);padding:10px 16px;border-radius:var(--r-sm);z-index:999;font-weight:var(--w-bold)} .skip-link:focus{left:var(--space-5);top:var(--space-4)} [hidden]{display:none!important}