@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');

:root { --navy:#071b3d; --navy-soft:#18345c; --paper:#f8f5ef; --paper-deep:#ece6da; --sage:#aebda6; --sage-light:#d8e1d0; --peach:#e88b70; --ink-soft:#4f5b6f; --line:rgba(7,27,61,.14); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--navy); font-family:"DM Sans",system-ui,sans-serif; } a { color:inherit; }
.site-header,main,footer { width:min(1160px,calc(100% - 48px)); margin:0 auto; }.site-header { min-height:92px; display:flex; align-items:center; justify-content:space-between; }.brand { display:inline-flex; align-items:center; gap:.72rem; text-decoration:none; font:600 1.34rem/1 Fraunces,Georgia,serif; letter-spacing:-.055em; }.brand img { width:35px; height:35px; border-radius:10px; box-shadow:0 6px 14px rgba(7,27,61,.12); } nav { display:flex; gap:1.4rem; font:500 .68rem/1 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.045em; } nav a,.text-link { text-decoration:none; } nav a:hover,.text-link:hover { color:var(--peach); }
.hero { min-height:650px; padding:4.4rem 0 5.9rem; display:grid; grid-template-columns:.94fr 1.06fr; gap:3.6rem; align-items:center; }.eyebrow { margin:0 0 1.2rem; color:var(--ink-soft); font:500 .65rem/1.4 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.075em; }.eyebrow span { display:inline-block; width:7px; height:7px; margin-right:.55rem; border-radius:50%; background:var(--peach); } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:Fraunces,Georgia,serif; letter-spacing:-.065em; } h1 { max-width:650px; margin-bottom:1.55rem; font-size:clamp(3.8rem,6.2vw,6.7rem); line-height:.91; } h1 em { color:var(--peach); font-weight:500; }.hero-intro { max-width:510px; margin-bottom:2rem; color:var(--ink-soft); font-size:1.05rem; line-height:1.7; }.button { display:inline-flex; align-items:center; gap:.9rem; padding:1rem 1.26rem; border-radius:99px; background:var(--navy); color:#fff; font-size:.82rem; font-weight:600; text-decoration:none; transition:transform .2s ease,background .2s ease; }.button:hover { transform:translateY(-2px); background:var(--navy-soft); }.button span { color:var(--sage-light); font-size:1rem; }.microcopy { margin:1rem 0 0; color:#778194; font-size:.72rem; }
.hero-stage { min-height:440px; position:relative; isolation:isolate; }.halo { position:absolute; border-radius:50%; z-index:-1; }.halo-one { width:440px; aspect-ratio:1; top:1%; left:7%; background:var(--sage-light); }.halo-two { width:342px; aspect-ratio:1; top:12%; left:17%; border:1px solid rgba(232,139,112,.65); }.app-icon { position:absolute; z-index:3; top:5%; right:2%; width:124px; aspect-ratio:1; border-radius:30px; box-shadow:0 23px 45px rgba(7,27,61,.22); transform:rotate(7deg); overflow:hidden; }.app-icon img { display:block; width:100%; height:100%; }.reader-preview { position:absolute; left:14%; top:11%; width:min(330px,76vw); height:382px; padding:30px 35px; border-radius:13px 25px 23px 13px; background:#fffdf8; box-shadow:15px 22px 42px rgba(7,27,61,.18); transform:rotate(-3deg); overflow:hidden; }.reader-preview::after { content:""; position:absolute; inset:0 0 0 auto; width:14px; background:linear-gradient(90deg,transparent,rgba(7,27,61,.1)); }.preview-top,.preview-footer { display:flex; justify-content:space-between; color:#929099; font:500 .48rem/1 "DM Mono",monospace; letter-spacing:.07em; }.preview-chapter { margin:46px 0 22px; color:var(--peach); font:500 .57rem/1 "DM Mono",monospace; letter-spacing:.13em; }.preview-line { width:87%; height:6px; margin:0 0 14px; background:var(--navy); opacity:.86; }.preview-line.wide { width:100%; }.preview-line.short { width:58%; }.preview-footer { position:absolute; right:35px; bottom:28px; left:35px; padding-top:13px; border-top:1px solid #e9e4db; color:#607064; }.tool-card { position:absolute; z-index:4; right:4%; bottom:5%; width:236px; padding:.95rem 1rem 1rem; border:1px solid rgba(255,255,255,.32); border-radius:14px; background:rgba(7,27,61,.96); color:#fff; box-shadow:0 16px 30px rgba(7,27,61,.24); transform:rotate(4deg); }.tool-card strong { display:block; margin-bottom:.35rem; font:500 .9rem/1.2 Fraunces,serif; letter-spacing:-.03em; }.tool-card small { display:block; color:#ccd5e2; font-size:.62rem; }.tool-dot { display:inline-block; width:7px; height:7px; margin:0 .42rem .1rem 0; border-radius:50%; background:var(--sage); }
.manifesto { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; padding:4.5rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.manifesto p { margin:0; font:600 clamp(2.3rem,4.7vw,4.7rem)/.98 Fraunces,Georgia,serif; letter-spacing:-.072em; }.manifesto em { color:var(--peach); font-weight:500; }.manifesto span { padding-bottom:.45rem; color:var(--ink-soft); font:500 .63rem/1.4 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
.section { padding:8rem 0; }.current { display:grid; grid-template-columns:.84fr 1.16fr; gap:6.6rem; }.section-heading h2,.experiment h2,.data-section h2,.pilot h2 { margin-bottom:1.3rem; font-size:clamp(2.5rem,4.2vw,4.65rem); line-height:.97; }.section-heading > p:not(.eyebrow),.experiment-copy > p:not(.eyebrow),.data-copy > p,.pilot p { color:var(--ink-soft); font-size:.96rem; line-height:1.7; }.feature-grid { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:18px; overflow:hidden; }.feature { position:relative; min-height:254px; padding:1.45rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; }.feature:nth-child(2n) { border-right:0; }.feature:nth-last-child(-n + 2) { border-bottom:0; }.feature-number { color:var(--peach); font:500 .62rem/1 "DM Mono",monospace; }.feature h3 { max-width:190px; margin:2.7rem 0 .55rem; font-size:1.62rem; line-height:1.02; }.feature p { max-width:215px; margin:0; color:var(--ink-soft); font-size:.78rem; line-height:1.55; }.feature-library { background:#fdfbf6; }.feature-appearance { background:var(--sage-light); }.feature-places { background:var(--paper-deep); }.feature-quiet { background:var(--navy); color:#fff; }.feature-quiet p { color:#d0d9e5; }.feature-mark { position:absolute; right:1.5rem; bottom:1rem; color:var(--peach); font:500 4.4rem/.8 Fraunces,serif; }.type-sample { position:absolute; right:1rem; bottom:1rem; display:grid; place-items:center; width:76px; aspect-ratio:1; border:1px solid rgba(7,27,61,.14); border-radius:50%; color:var(--navy); }.type-sample i { font:italic 1.8rem/.8 Fraunces,serif; }.type-sample b { font:.9rem/1 "DM Mono",monospace; }.bookmark { position:absolute; right:1.5rem; bottom:0; width:39px; height:83px; border-radius:6px 6px 0 0; background:var(--peach); clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%); }.quiet-lines { position:absolute; right:1.4rem; bottom:1.55rem; display:grid; gap:8px; }.quiet-lines i { display:block; width:66px; height:4px; border-radius:99px; background:var(--sage); }.quiet-lines i:nth-child(2) { width:50px; }.quiet-lines i:nth-child(3) { width:37px; }
.experiment { display:grid; grid-template-columns:1fr .92fr; gap:8rem; align-items:center; margin-left:calc((100vw - min(1160px,calc(100% - 48px))) / -2); margin-right:calc((100vw - min(1160px,calc(100% - 48px))) / -2); padding:7.3rem max(24px,calc((100vw - 1160px) / 2)); background:var(--navy); color:#fff; }.experiment .eyebrow { color:#bfcbda; }.experiment-copy > p:not(.eyebrow) { color:#d4dce7; }.experiment-art { min-height:325px; position:relative; }.experiment-page { position:absolute; left:12%; top:4%; width:242px; height:290px; border-radius:10px 18px 18px 10px; background:repeating-linear-gradient(to bottom,#fffdf8 0 25px,#d7d4ce 26px 28px); box-shadow:12px 18px 32px rgba(0,0,0,.24); transform:rotate(-8deg); }.experiment-note { position:absolute; right:1%; bottom:5%; width:260px; padding:1.1rem; border-radius:15px; background:var(--sage); color:var(--navy); box-shadow:0 20px 34px rgba(0,0,0,.25); transform:rotate(5deg); }.experiment-note span { display:block; margin-bottom:.85rem; font:500 .55rem/1 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }.experiment-note strong { display:block; font:500 1.4rem/1 Fraunces,serif; letter-spacing:-.05em; }.experiment-note div { display:flex; gap:.45rem; margin-top:1rem; }.experiment-note b,.experiment-note i { padding:.45rem .6rem; border-radius:7px; font:500 .6rem/1 "DM Sans",sans-serif; font-style:normal; }.experiment-note b { background:var(--navy); color:#fff; }.experiment-note i { border:1px solid rgba(7,27,61,.2); }
.data-section { display:grid; grid-template-columns:.9fr 1.1fr; gap:8rem; margin:0 -1px; padding:7.8rem max(24px,calc((100vw - 1160px) / 2)); background:var(--paper-deep); }.data-copy details { padding-top:1.35rem; border-top:1px solid var(--line); }.data-copy summary { cursor:pointer; font-size:.82rem; font-weight:600; }.data-copy details p { margin:1rem 0 0; color:var(--ink-soft); font-size:.82rem; line-height:1.6; }.pilot { display:grid; grid-template-columns:168px 1fr; gap:5rem; align-items:center; padding:7rem 0; }.pilot > img { width:154px; border-radius:38px; box-shadow:0 17px 33px rgba(7,27,61,.16); }.pilot > div { max-width:640px; }.text-link { display:inline-block; margin-top:.9rem; color:var(--navy); font:500 .72rem/1 "DM Mono",monospace; }.text-link span { margin-left:.35rem; color:var(--peach); } footer { display:grid; grid-template-columns:1fr auto; gap:.85rem 2rem; padding:2rem 0 2.7rem; border-top:1px solid var(--line); color:var(--ink-soft); font-size:.73rem; } footer p { margin:0; align-self:end; }.privacy-note { grid-column:1 / -1; color:#788191; }
@media (max-width:790px) { .site-header,main,footer { width:min(100% - 36px,1160px); }.site-header { min-height:73px; }.brand img { width:31px; height:31px; } nav { gap:.85rem; font-size:.58rem; }.hero { grid-template-columns:1fr; min-height:0; padding:3.6rem 0 4.7rem; gap:2.6rem; }.hero-stage { width:min(100%,470px); height:380px; min-height:380px; margin:0 auto; }.halo-one { width:360px; }.halo-two { width:280px; }.app-icon { width:96px; border-radius:23px; }.reader-preview { left:9%; width:270px; height:326px; padding:27px 29px; }.preview-chapter { margin-top:37px; }.preview-footer { right:29px; left:29px; }.tool-card { right:0; bottom:0; width:206px; }.manifesto { display:block; padding:3.5rem 0; }.manifesto span { display:block; margin-top:1.2rem; white-space:normal; }.current,.experiment,.data-section { grid-template-columns:1fr; gap:3.2rem; }.section { padding:5.4rem 0; }.feature-grid { grid-template-columns:1fr; }.feature { min-height:215px; border-right:0; border-bottom:1px solid var(--line) !important; }.feature:last-child { border-bottom:0 !important; }.feature h3 { margin-top:2.25rem; }.experiment { margin-right:-18px; margin-left:-18px; padding:5.4rem 18px; }.experiment-art { min-height:290px; }.experiment-page { left:5%; width:210px; height:260px; }.experiment-note { width:216px; right:0; }.data-section { margin-right:-18px; margin-left:-18px; padding:5.4rem 18px; }.pilot { grid-template-columns:1fr; gap:2rem; padding:5.5rem 0; }.pilot > img { width:116px; border-radius:28px; } footer { grid-template-columns:1fr; padding-bottom:2rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.button { transition:none; } }