:root { --ink:#102426; --paper:#f6f4ee; --aqua:#c7f2ef; --teal:#087f83; --cheese:#ffd85a; --line:rgba(16,36,38,.22); --serif:Georgia, "Times New Roman", serif; --sans:Arial, Helvetica, sans-serif; --mono:"Courier New", Courier, monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5; }
a { color:inherit; }
.skip-link { position:fixed; left:1rem; top:-5rem; z-index:10; padding:.7rem 1rem; background:var(--ink); color:#fff; font-weight:700; text-decoration:none; }
.skip-link:focus { top:1rem; }
.site-header { min-height:92px; padding:20px 4.15vw; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--line); }
.wordmark { font-weight:800; font-size:1.05rem; line-height:.79; letter-spacing:-.09em; text-decoration:none; width:max-content; }
.wordmark span { font-family:var(--mono); vertical-align:top; font-size:.42rem; margin-left:3px; letter-spacing:0; }
nav { display:flex; align-items:center; gap:2.15rem; font-size:.72rem; font-weight:700; letter-spacing:.045em; }
nav a { text-decoration:none; border-bottom:1px solid transparent; }
nav a:hover, nav a:focus-visible { border-color:var(--ink); }
.cloud-nav { display:inline-block; width:auto; padding:0; border:0; background:transparent; color:var(--ink); cursor:not-allowed; font:inherit; letter-spacing:inherit; opacity:.48; }
.cloud-nav span { margin-left:.28rem; font: .57rem var(--mono); text-transform:uppercase; letter-spacing:.06em; }
.review-flag { margin:0; justify-self:end; font: .62rem var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.hero { min-height:calc(100vh - 92px); display:grid; grid-template-columns:1.15fr .85fr 80px; align-items:center; padding:7vh 4.15vw 5vh; position:relative; overflow:hidden; }
.hero-copy { position:relative; z-index:1; }
.eyebrow, .section-label { font: .67rem var(--mono); text-transform:uppercase; letter-spacing:.11em; }
.eyebrow { margin:0 0 1.7rem; color:var(--teal); font-weight:500; }
h1, h2, p { margin-top:0; }
h1 { max-width:850px; margin-bottom:1.7rem; font-size:clamp(4rem, 9.4vw, 10.5rem); font-weight:800; letter-spacing:-.095em; line-height:.78; }
h1 em { font-family:var(--serif); font-size:.93em; font-weight:500; letter-spacing:-.08em; }
.hero-deck { max-width:430px; font-size:clamp(1rem,1.3vw,1.27rem); line-height:1.55; }
.text-link { display:inline-flex; align-items:center; gap:.8rem; margin-top:1rem; padding-bottom:.25rem; text-decoration:none; border-bottom:1px solid var(--ink); font-size:.83rem; font-weight:700; }
.text-link:hover { color:var(--teal); border-color:var(--teal); }
.hero-index { align-self:end; margin:0; font:.62rem/1.55 var(--mono); letter-spacing:.07em; }
.motif-wrap { justify-self:center; width:min(33vw,440px); aspect-ratio:1; position:relative; display:grid; place-items:center; }
.orbit { position:absolute; inset:6%; border:1px solid rgba(8,127,131,.35); border-radius:50%; }
.orbit-one { transform:rotate(-27deg) scaleY(.44); }
.orbit-two { inset:22%; border-color:rgba(8,127,131,.16); transform:rotate(55deg) scaleX(1.7); }
.star { position:absolute; color:var(--teal); font-size:1.6rem; }.star-one { top:6%; right:18%; }.star-two { bottom:17%; left:7%; font-size:.9rem; }
.fox-mark { width:43%; height:43%; position:relative; transform:rotate(-5deg); }
.ear { position:absolute; top:0; width:43%; height:55%; background:var(--teal); border-radius:90% 15% 25% 20%; }.left-ear { left:3%; transform:rotate(-26deg); }.right-ear { right:3%; transform:scaleX(-1) rotate(-26deg); }
.face { position:absolute; inset:21% 7% 1%; background:var(--cheese); border-radius:48% 48% 56% 56%; border:3px solid var(--ink); }.eye { width:9%; aspect-ratio:1; position:absolute; top:30%; background:var(--ink); border-radius:50%; }.left-eye { left:23%; }.right-eye { right:23%; }.muzzle { position:absolute; width:44%; height:28%; left:28%; bottom:14%; border-radius:50% 50% 48% 48%; background:#fff5d6; }.nose { position:absolute; width:12%; aspect-ratio:1; left:44%; bottom:34%; background:var(--ink); border-radius:45% 45% 55% 55%; }
.motif-caption { position:absolute; top:12%; left:-7%; margin:0; font:.58rem/1.45 var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.manifesto { padding:12vw 11vw; background:var(--ink); color:var(--paper); display:grid; grid-template-columns:150px 1fr; gap:5vw; }.section-label { display:flex; gap:.7rem; height:max-content; }.section-label span:first-child { color:var(--teal); }.manifesto .section-label span:first-child { color:var(--aqua); }.manifesto-statement h2, .cheese-copy h2, .interest h2 { margin:0 0 2rem; font:500 clamp(2.7rem,5.6vw,6rem)/.98 var(--serif); letter-spacing:-.06em; }.manifesto-statement p { max-width:550px; margin:0; color:rgba(246,244,238,.74); font-size:1.08rem; }
.cheese-section { min-height:82vh; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:8vw; padding:11vw; }.cheese-illustration { min-height:360px; position:relative; display:grid; place-items:center; background:var(--aqua); overflow:hidden; }.cheese-slice { width:min(55%,300px); aspect-ratio:1.27; position:relative; background:var(--cheese); clip-path:polygon(0 5%, 100% 47%, 0 100%); filter:drop-shadow(11px 13px 0 rgba(16,36,38,.15)); transform:rotate(-7deg); }.cheese-slice i { position:absolute; width:9%; aspect-ratio:1; background:#d9af2d; border-radius:50%; }.cheese-slice i:nth-child(1){left:25%;top:26%}.cheese-slice i:nth-child(2){left:54%;top:51%}.cheese-slice i:nth-child(3){left:21%;bottom:19%}.cheese-slice i:nth-child(4){left:69%;top:38%;width:6%}.cheese-shadow { position:absolute; bottom:16%; width:55%; height:5%; background:rgba(16,36,38,.22); border-radius:50%; filter:blur(9px); }.cheese-copy p { max-width:480px; font-size:1.05rem; }.aside { margin-top:2.5rem; font:.66rem var(--mono); text-transform:uppercase; letter-spacing:.09em; color:var(--teal); }
.cloud-section { padding:10vw 11vw; border-top:1px solid var(--line); display:grid; grid-template-columns:150px 1fr; gap:5vw; }.cloud-panel { position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:1.6rem; align-items:start; padding:clamp(1.6rem,3vw,3rem); background:var(--aqua); border:1px solid rgba(8,127,131,.32); }.cloud-glyph { width:54px; height:40px; position:relative; margin-top:.2rem; }.cloud-glyph i { position:absolute; display:block; border:2px solid var(--teal); border-radius:50%; }.cloud-glyph i:nth-child(1) { width:30px; height:30px; left:0; bottom:0; }.cloud-glyph i:nth-child(2) { width:36px; height:36px; right:0; bottom:0; }.cloud-glyph i:nth-child(3) { width:46px; height:18px; left:4px; bottom:0; border-width:0 0 2px; border-radius:0; }.cloud-kicker,.cloud-state { margin:0; font:.65rem/1.45 var(--mono); text-transform:uppercase; letter-spacing:.09em; color:var(--teal); }.cloud-panel h2 { margin:.6rem 0 1rem; font:500 clamp(2rem,4vw,4.25rem)/.97 var(--serif); letter-spacing:-.06em; }.cloud-panel div > p:last-child { max-width:560px; margin:0; font-size:1.02rem; }.cloud-state { padding-left:1.5rem; border-left:1px solid rgba(8,127,131,.4); text-align:right; white-space:nowrap; }.interest { padding:10vw 4.15vw 8vw; border-top:1px solid var(--line); }.interest > .section-label { margin-bottom:5.7rem; }.interest-grid { display:grid; grid-template-columns:1fr 1fr; gap:8vw; }.interest h2 { font-size:clamp(2.7rem,5vw,5.5rem); }.interest-grid > div > p { max-width:360px; } form { align-self:end; padding-bottom:.25rem; } label { display:block; margin-bottom:.7rem; font:.65rem var(--mono); text-transform:uppercase; letter-spacing:.09em; }.form-row { display:flex; border-bottom:1px solid var(--ink); } input { min-width:0; flex:1; border:0; background:transparent; padding:.8rem 0; font:inherit; color:var(--ink); outline:none; } input::placeholder { color:rgba(16,36,38,.52); } button { border:0; background:transparent; padding:.8rem 0 .8rem 1rem; color:var(--ink); cursor:pointer; font:700 .78rem var(--sans); white-space:nowrap; } button:hover { color:var(--teal);}.form-note,.form-status { margin:.9rem 0 0; font:.66rem/1.45 var(--mono); }.form-note { color:rgba(16,36,38,.68); }.form-status { min-height:1.5em; color:var(--teal); font-weight:500; }
footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:2rem 4.15vw; border-top:1px solid var(--line); font:.61rem var(--mono); text-transform:uppercase; letter-spacing:.07em; } footer p { margin:0; } footer p:last-child { justify-self:end; }.footer-mark { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--ink); border-radius:50%; text-decoration:none; font-weight:700; letter-spacing:-.07em; }
:focus-visible { outline:3px solid var(--teal); outline-offset:4px; }
@media (prefers-reduced-motion:no-preference){ .motion-ready .reveal { opacity:0; transform:translateY(1.35rem); }.motion-ready .reveal.is-visible { animation:editorial-reveal 620ms cubic-bezier(.16,1,.3,1) both; }.motion-ready .reveal--delayed.is-visible { animation-delay:110ms; }.motif-drift { animation:motif-settle 5s ease-in-out infinite alternate; } @keyframes editorial-reveal { to { opacity:1; transform:translateY(0); } } @keyframes motif-settle { to { transform:translateY(-7px) rotate(1deg); } } }
@media (max-width:760px){ .site-header { min-height:75px; padding:17px 5vw; grid-template-columns:1fr auto; }.review-flag { display:none; } nav { gap:.25rem; font-size:.62rem; }.site-header nav a, .cloud-nav { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; }.cloud-nav span { display:none; }.hero { min-height:calc(100svh - 75px); grid-template-columns:1fr; padding:11vh 5vw 6vh; }.hero-copy { align-self:start; }.hero-deck { max-width:340px; font-size:1rem; }.motif-wrap { position:absolute; bottom:2.7rem; right:-4vw; width:53vw; opacity:.95; }.motif-caption { display:none; }.hero-index { display:none; }.manifesto { padding:22vw 7vw; grid-template-columns:1fr; gap:3rem; }.cheese-section { min-height:0; padding:0 0 20vw; grid-template-columns:1fr; gap:0; }.cheese-illustration { min-height:330px; }.cheese-copy { padding:14vw 7vw 0; }.cloud-section { padding:17vw 7vw; grid-template-columns:1fr; gap:3rem; }.cloud-panel { grid-template-columns:1fr; gap:1.3rem; }.cloud-state { padding:1rem 0 0; border-top:1px solid rgba(8,127,131,.4); border-left:0; text-align:left; }.interest { padding:17vw 7vw 13vw; }.interest > .section-label { margin-bottom:4rem; }.interest-grid { grid-template-columns:1fr; gap:2rem; }.interest h2 { margin-bottom:1.3rem; } .form-row { display:block; } button { display:flex; width:100%; justify-content:space-between; padding-left:0; } footer { grid-template-columns:1fr auto; gap:1.2rem; padding:1.5rem 5vw; } footer p:nth-of-type(1) { justify-self:end; text-align:right; } footer p:last-child { grid-column:1 / -1; justify-self:start; } }
@media (prefers-reduced-motion:reduce){ html { scroll-behavior:auto; } * { transition:none!important; animation:none!important; } }