:root { --bg:#080a09; --surface:#0e1210; --surface-alt:#121713; --text:#f1f0ea; --muted:#92988f; --ember:#c66a3d; --ember-bright:#df9558; --mineral:#c9a16d; --earth:#66756b; --line:rgba(191,205,190,.18); --serif:Georgia, 'Times New Roman', serif; --sans:'Trebuchet MS', 'Segoe UI', sans-serif; --mono:ui-monospace, SFMono-Regular, Consolas, monospace; --shell:min(1320px, calc(100% - 96px)); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; background:var(--bg); } body { margin:0; overflow-x:clip; background:var(--bg); color:var(--text); font:15px/1.55 var(--sans); } a { color:inherit; text-decoration:none; } .mono,.section-index,.kicker,dt,footer { font-family:var(--mono); } .skip-link { position:fixed; z-index:10; top:-60px; left:15px; padding:10px 14px; background:var(--text); color:var(--bg); transition:top .2s; } .skip-link:focus { top:15px; }
:focus-visible { outline:2px solid var(--ember-bright); outline-offset:4px; }
.site-header { position:absolute; z-index:3; top:0; right:0; left:0; display:flex; align-items:center; justify-content:space-between; width:var(--shell); height:88px; margin:auto; border-bottom:1px solid var(--line); } .wordmark { display:flex; align-items:center; gap:9px; font:11px/1 var(--mono); letter-spacing:.13em; } .wordmark i { width:20px; height:1px; background:var(--ember); } .wordmark strong { color:var(--ember-bright); font-weight:500; } .header-cta { display:flex; align-items:center; gap:11px; color:var(--text); font:10px var(--mono); letter-spacing:.08em; } .header-cta span { color:var(--ember-bright); font-size:17px; transition:transform .2s; } .header-cta:hover span { transform:translate(3px,-3px); }
.hero { position:relative; display:flex; align-items:center; min-height:100vh; min-height:100svh; padding:128px max(48px,calc((100% - 1320px)/2)) 80px; isolation:isolate; overflow:hidden; background:#050806; } .hero::before { content:""; position:absolute; z-index:-2; inset:-2%; background:url('assets/worldmantle-hero.webp') center right / cover no-repeat; transform:scale(1.01); animation:hero-breathe 21s ease-in-out infinite alternate; } .hero::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(4,7,5,.98) 0%,rgba(4,7,5,.91) 30%,rgba(4,7,5,.56) 53%,rgba(4,7,5,.15) 77%,rgba(4,7,5,.2) 100%),linear-gradient(0deg,rgba(5,8,6,.98) 0%,rgba(5,8,6,.28) 26%,transparent 58%),radial-gradient(ellipse at 73% 52%,transparent 0%,rgba(4,7,5,.12) 50%,rgba(4,7,5,.58) 100%); }
.hero-copy { position:relative; z-index:1; align-self:center; max-width:620px; animation:rise .9s .1s both; } .kicker,.section-index { margin:0; color:var(--earth); font-size:9px; letter-spacing:.14em; } .kicker span { color:var(--ember); padding:0 6px; } h1,h2,h3,p { margin-top:0; } h1 { margin:27px 0 12px; font:400 clamp(3.1rem,8vw,8.5rem)/.82 var(--serif); letter-spacing:-.085em; } .hero-statement { margin:0; color:var(--text); font:400 clamp(1.55rem,2.7vw,3rem)/1.02 var(--serif); letter-spacing:-.055em; } .hero-statement::first-line { color:var(--mineral); } .hero-intro { max-width:515px; margin:30px 0; color:var(--muted); line-height:1.65; } .hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:22px; } .button { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:50px; padding:0 21px; border:1px solid var(--ember); background:var(--ember); color:#170e0b; font:600 10px var(--mono); letter-spacing:.06em; transition:background .25s, transform .25s; } .button:hover { background:var(--ember-bright); transform:translateY(-2px); } .button span { font-size:18px; } .quiet-link { color:var(--muted); font:10px var(--mono); letter-spacing:.07em; } .quiet-link span { color:var(--ember-bright); padding-left:6px; } .quiet-link:hover { color:var(--text); }
.hero-meta { position:absolute; right:max(48px,calc((100% - 1320px)/2)); bottom:108px; display:flex; align-items:center; gap:11px; color:rgba(230,208,177,.7); font-size:8px; letter-spacing:.12em; animation:rise 1s .45s both; } .hero-meta i { width:29px; height:1px; background:var(--ember-bright); } .hero-foot { position:absolute; bottom:23px; left:max(48px,calc((100% - 1320px)/2)); display:flex; align-items:center; gap:14px; color:var(--earth); font-size:8px; letter-spacing:.12em; } .hero-foot span { width:62px; height:1px; background:var(--earth); }
.section-wrap { width:var(--shell); margin:0 auto; } .meaning { padding-top:clamp(120px,16vw,230px); padding-bottom:clamp(120px,13vw,190px); } h2 { font:400 clamp(3rem,7vw,7rem)/.85 var(--serif); letter-spacing:-.085em; } .meaning h2 { margin:26px 0 clamp(70px,10vw,145px); } .word-strata { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .word-strata article { min-height:388px; padding:20px 4% 30px 0; } .word-strata article+article { padding-right:0; padding-left:10%; border-left:1px solid var(--line); background:linear-gradient(90deg,transparent,rgba(198,106,61,.08)); } .strata-number { color:var(--earth); font-size:9px; letter-spacing:.13em; } .word-strata h3 { margin:67px 0 23px; font:400 clamp(4.8rem,10.5vw,11rem)/.67 var(--serif); letter-spacing:-.11em; } .word-strata article+article h3 { color:var(--ember-bright); } .word-strata p { max-width:350px; margin:0; color:var(--muted); font-size:17px; line-height:1.5; } .meaning-sum { max-width:660px; margin:47px 0 0 auto; font:400 clamp(1.55rem,2.7vw,2.7rem)/1.07 var(--serif); letter-spacing:-.06em; } .meaning-sum em { color:var(--mineral); }
.architecture { padding:clamp(110px,14vw,190px) 0 0; background:var(--surface); border-top:1px solid var(--line); } .architecture-head { display:grid; grid-template-columns:.68fr 1.32fr; gap:25px; align-items:start; margin-bottom:90px; } .architecture-head h2 { margin:0; } .layer-stack { width:100%; max-width:1520px; margin:0 auto; padding:0; list-style:none; } .layer-stack li { position:relative; display:grid; grid-template-columns:9% 34% 1fr 20%; align-items:center; min-height:120px; padding:20px max(48px,calc((100% - 1320px)/2)); border-top:1px solid rgba(190,205,190,.12); transition:padding .35s, background .35s; } .layer-stack li:hover { padding-left:max(62px,calc((100% - 1320px)/2 + 14px)); background:rgba(130,146,133,.04); } .layer-stack li span { color:var(--earth); font-size:10px; } .layer-stack h3 { margin:0; font:400 clamp(1.6rem,3vw,3.3rem)/.95 var(--serif); letter-spacing:-.06em; } .layer-stack p { max-width:340px; margin:0; color:var(--muted); } .layer-stack i { justify-self:end; width:34px; height:1px; background:var(--earth); } .layer-stack .mantle-layer { min-height:176px; background:linear-gradient(90deg,rgba(116,51,37,.28),rgba(198,106,61,.08)); border-color:rgba(220,146,84,.42); } .mantle-layer span,.mantle-layer h3 { color:var(--ember-bright) !important; } .mantle-layer i { width:60px; background:var(--ember-bright); }
.applications { padding:clamp(125px,16vw,220px) 0; } .applications-top { display:grid; grid-template-columns:.52fr 1.12fr .55fr; gap:30px; align-items:end; margin-bottom:90px; } .applications h2 { margin:0; } .applications-top>p:last-child { max-width:245px; margin:0 0 6px; color:var(--muted); } .application-list { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); } .application-list li { display:grid; grid-template-columns:7% 39% 1fr; gap:18px; align-items:center; min-height:98px; border-bottom:1px solid var(--line); transition:padding .25s, background .25s; } .application-list li:hover { padding-left:14px; background:linear-gradient(90deg,rgba(198,106,61,.08),transparent 70%); } .application-list span { color:var(--earth); font-size:9px; } .application-list strong { font:400 clamp(1.1rem,1.8vw,1.65rem)/1 var(--sans); letter-spacing:-.045em; } .application-list p { margin:0; color:var(--muted); font-size:13px; }
.mantle-map { position:relative; min-height:740px; display:grid; place-items:center; overflow:hidden; background:#0c100d; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .topography { position:absolute; inset:0; width:100%; height:100%; color:#617268; opacity:.65; } .topography path { stroke-width:1.1; } .map-content { position:relative; z-index:1; width:var(--shell); text-align:center; } .map-content h2 { margin:26px 0 25px; font-size:clamp(4rem,9vw,9rem); } .map-content h2 em { color:var(--mineral); font-style:italic; } .map-word { display:inline-flex; align-items:center; gap:13px; color:#d7dfd5; font-size:10px; letter-spacing:.16em; } .map-word i { width:35px; height:1px; background:var(--ember); } .map-nodes { position:absolute; inset:0; color:var(--earth); font-size:8px; letter-spacing:.16em; } .map-nodes span { position:absolute; } .map-nodes span:nth-child(1){top:22%;left:12%}.map-nodes span:nth-child(2){top:32%;right:13%}.map-nodes span:nth-child(3){bottom:26%;left:9%}.map-nodes span:nth-child(4){top:14%;left:45%}.map-nodes span:nth-child(5){bottom:18%;right:12%}.map-nodes span:nth-child(6){bottom:34%;right:28%}
.specimen { padding:clamp(125px,16vw,220px) 0; } .specimen h2 { margin:26px 0 70px; } .specimen-field { position:relative; min-height:560px; display:grid; place-items:center; overflow:hidden; border:1px solid var(--line); background:repeating-linear-gradient(0deg,transparent,transparent 47px,rgba(114,132,119,.14) 48px),repeating-linear-gradient(90deg,transparent,transparent 47px,rgba(114,132,119,.14) 48px); } .specimen-core { position:absolute; width:min(48vw,490px); aspect-ratio:1; border:1px solid rgba(222,148,88,.5); border-radius:50%; box-shadow:0 0 0 68px rgba(198,106,61,.05),0 0 0 154px rgba(102,117,107,.05); } .specimen-core::after { content:""; position:absolute; inset:32%; border-radius:50%; background:rgba(198,106,61,.22); } .specimen-name { position:relative; z-index:1; font:400 clamp(3.7rem,9vw,9rem)/.8 var(--serif); letter-spacing:-.1em; } .specimen-name span { color:var(--ember-bright); } .direction-grid { position:absolute; right:0; bottom:0; left:0; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); background:rgba(8,10,9,.72); } .direction-grid div { min-height:96px; padding:14px 17px; border-right:1px solid var(--line); color:var(--earth); font:10px/1.45 var(--mono); letter-spacing:.05em; } .direction-grid div:nth-child(3n) { border-right:0; } .direction-grid div:nth-child(n+4) { border-top:1px solid var(--line); } .direction-grid b { color:var(--text); font:400 clamp(1rem,1.5vw,1.4rem)/1 var(--serif); letter-spacing:-.04em; } .specimen-note { margin:15px 0 0; color:var(--earth); font-size:8px; letter-spacing:.1em; }
.why { padding-bottom:clamp(130px,16vw,220px); } .why h2 { margin:26px 0 75px; } .why-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); } .why-grid article { min-height:290px; padding:20px 9% 25px 0; border-bottom:1px solid var(--line); } .why-grid article+article { padding-left:9%; border-left:1px solid var(--line); } .why-grid span { color:var(--ember-bright); font:10px var(--mono); } .why-grid h3 { margin:72px 0 12px; font:400 clamp(1.8rem,2.7vw,3rem)/.94 var(--serif); letter-spacing:-.06em; } .why-grid p { max-width:285px; margin:0; color:var(--muted); font-size:14px; }
.record { padding:clamp(110px,14vw,190px) 0; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .record-top { display:flex; justify-content:space-between; align-items:center; gap:20px; } .record-top>p:last-child { margin:0; color:var(--earth); font-size:9px; letter-spacing:.1em; } .record h2 { margin:58px 0 60px; font-size:clamp(3.35rem,8vw,8.5rem); } .record h2 span { color:var(--ember-bright); font-size:.54em; } dl { display:grid; grid-template-columns:repeat(3,1fr); margin:0; border-top:1px solid var(--line); border-left:1px solid var(--line); } dl div { min-height:115px; padding:17px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); } dt { margin-bottom:19px; color:var(--earth); font-size:8px; letter-spacing:.11em; } dd { margin:0; color:var(--text); font:13px var(--mono); } dl div:nth-child(2) dd { font-size:22px; color:var(--mineral); } .available { color:var(--ember-bright); } .available i { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:var(--ember-bright); box-shadow:0 0 0 5px rgba(198,106,61,.11); }
.closing { min-height:720px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:90px 24px; text-align:center; background:radial-gradient(ellipse at 50% 55%,rgba(198,106,61,.11),transparent 34%); } .closing h2 { margin:28px 0 25px; font-size:clamp(4.5rem,10vw,10rem); } .closing h2 span { color:var(--ember-bright); } .closing>p:not(.section-index) { max-width:430px; margin-bottom:30px; color:var(--muted); font:400 20px/1.25 var(--serif); } .closing small { margin-top:19px; color:var(--earth); font-size:8px; letter-spacing:.1em; }
footer { width:var(--shell); margin:auto; padding:30px 0 24px; color:var(--earth); font-size:9px; letter-spacing:.08em; } footer>div { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; align-items:center; padding-bottom:34px; } footer strong { color:var(--text); font-weight:500; } footer div span { text-align:center; } footer a { justify-self:end; color:var(--mineral); } footer p { display:flex; align-items:center; gap:14px; margin:0; padding-top:15px; border-top:1px solid var(--line); font-size:8px; letter-spacing:.1em; } footer p i { flex:1; height:1px; background:var(--line); }
@keyframes rise { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } } @keyframes drift { to { transform:translate(12px,-8px); } } @keyframes pulse { 50% { opacity:.35; transform:scale(1.6); transform-origin:center; } } @keyframes hero-breathe { to { transform:scale(1.035); } }
@media (max-width:1050px) { :root { --shell:min(100% - 64px, 1320px); } .hero { min-height:100svh; padding-top:128px; padding-bottom:80px; } .hero::before { background-position:62% center; } .hero-meta { right:32px; bottom:92px; } .applications-top { grid-template-columns:1fr 1.4fr; } .applications-top>p:last-child { grid-column:2; } }
@media (max-width:700px) { :root { --shell:calc(100% - 40px); } .site-header { height:68px; } .header-cta { font-size:8px; } .hero { padding:108px 20px 38px; } h1 { margin-top:22px; } .hero-intro { font-size:14px; } .hero-actions { align-items:stretch; flex-direction:column; gap:18px; } .button { width:100%; } .planetary-cutaway { margin-top:18px; } .cutaway-legend { display:none; } .planetary-cutaway figcaption { font-size:6.5px; } .svg-label { font-size:9px; } .svg-mantle { font-size:11px; } .hero-foot { gap:8px; font-size:6.5px; white-space:nowrap; } .hero-foot span { width:14px; } .meaning { padding-top:100px; padding-bottom:105px; } .meaning h2 { margin-bottom:54px; } .word-strata { grid-template-columns:1fr; } .word-strata article { min-height:270px; padding-right:0; } .word-strata article+article { padding:20px 0 28px; border-top:1px solid var(--line); border-left:0; } .word-strata h3 { margin:48px 0 20px; font-size:clamp(4.8rem,25vw,7rem); } .word-strata p { font-size:15px; } .meaning-sum { margin-top:38px; } .architecture { padding-top:100px; } .architecture-head { display:block; margin-bottom:55px; } .architecture-head h2 { margin-top:26px; } .layer-stack li { grid-template-columns:42px 1fr 20px; gap:9px; min-height:132px; padding:18px 20px; } .layer-stack li p { grid-column:2; font-size:13px; } .layer-stack li i { grid-column:3; grid-row:1; } .layer-stack .mantle-layer { min-height:148px; } .applications { padding:105px 0; } .applications-top { display:block; margin-bottom:55px; } .applications h2 { margin:26px 0; } .application-list li { grid-template-columns:32px 1fr; gap:10px; min-height:126px; padding:17px 0; } .application-list li:hover { padding-left:6px; } .application-list p { grid-column:2; font-size:12px; } .application-list strong { font-size:1.12rem; } .mantle-map { min-height:560px; } .map-nodes span { font-size:6px; } .map-nodes span:nth-child(4),.map-nodes span:nth-child(6) { display:none; } .specimen { padding:105px 0; } .specimen h2 { margin-bottom:52px; } .specimen-field { min-height:460px; } .specimen-core { width:260px; box-shadow:0 0 0 37px rgba(198,106,61,.05),0 0 0 81px rgba(102,117,107,.05); } .direction-grid { grid-template-columns:1fr 1fr; } .direction-grid div:nth-child(3n) { border-right:1px solid var(--line); } .direction-grid div:nth-child(2n) { border-right:0; } .direction-grid div:nth-child(n+3) { border-top:1px solid var(--line); } .why { padding-bottom:110px; } .why h2 { margin-bottom:55px; } .why-grid { grid-template-columns:1fr; } .why-grid article,.why-grid article+article { min-height:205px; padding:18px 0 25px; border-left:0; } .why-grid h3 { margin:46px 0 10px; } .record { padding:100px 0; } .record-top { align-items:flex-start; flex-direction:column; gap:8px; } .record h2 { margin:45px 0; font-size:clamp(3.1rem,15vw,5rem); } dl { grid-template-columns:1fr 1fr; } dl div { min-height:104px; padding:13px 10px; } dl div:nth-child(3),dl div:nth-child(4),dl div:nth-child(5),dl div:nth-child(6) { grid-column:span 2; min-height:82px; } dd { font-size:10px; } .closing { min-height:610px; } .closing>p:not(.section-index) { font-size:18px; } footer>div { grid-template-columns:1fr auto; gap:16px; } footer div span { grid-column:1/-1; grid-row:2; text-align:left; } footer a { font-size:8px; } footer p { display:block; line-height:1.9; } footer p i { display:block; width:100%; margin:8px 0; } }
@media (max-width:700px) { .hero { align-items:flex-start; min-height:100svh; padding:118px 20px 72px; } .hero::before { inset:0 -55% 0 -38%; background-position:64% center; background-size:auto 100%; } .hero::after { background:linear-gradient(90deg,rgba(4,7,5,.94),rgba(4,7,5,.64) 68%,rgba(4,7,5,.24)),linear-gradient(0deg,rgba(5,8,6,.99),rgba(5,8,6,.13) 61%,rgba(5,8,6,.42)); } h1 { font-size:clamp(3.1rem,15vw,5rem); } .hero-statement { font-size:clamp(1.65rem,8vw,2.5rem); } .hero-intro { max-width:340px; margin:25px 0; } .hero-meta { right:20px; bottom:88px; font-size:6.5px; } .hero-foot { position:absolute; bottom:24px; left:20px; margin:0; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none !important; transition:none !important; } }