:root { --ink:#f4f1e7; --paper:#d9d5c8; --mist:#9ba29a; --coal:#080a09; --amber:#d3964d; --line:rgba(244,241,231,.22); --max:1300px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--coal); }
body { margin:0; min-width:320px; color:var(--ink); background:#0b0e0c; font-family:"DM Mono",ui-monospace,monospace; font-size:16px; line-height:1.6; }
a { color:inherit; text-decoration:none; } button { font:inherit; } img { display:block; width:100%; }
.site-header { position:fixed; z-index:10; inset:0 0 auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:1.2rem clamp(1.2rem,4vw,3.5rem); border-bottom:1px solid rgba(255,255,255,.13); background:linear-gradient(#050706c7,transparent); }
.monogram { display:flex; align-items:center; width:2.5rem; height:2.5rem; }.monogram img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 8px rgba(211,150,77,.32)); }.project-state { justify-self:center; display:flex; align-items:center; gap:.6rem; margin:0; font-size:.67rem; text-transform:uppercase; letter-spacing:.1em; }.project-state span { width:.42rem; height:.42rem; border-radius:50%; background:#85ad7d; box-shadow:0 0 13px #85ad7d; }.project-state strong { color:var(--mist); font-weight:400; }.language-switch { justify-self:end; display:flex; align-items:center; gap:.4rem; }.language-switch i { color:var(--mist); font-style:normal; font-size:.75rem; }.lang-link { color:var(--mist); font-size:.72rem; letter-spacing:.08em; }.lang-link.is-active { color:var(--ink); }
.hero { position:relative; min-height:100svh; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:8rem clamp(1.2rem,4vw,3.5rem) 2.1rem; }.hero-image,.hero-shade,.rain { position:absolute; inset:0; pointer-events:none; }.hero-image { background:center / cover url("assets/the-gate-reborn-valley.png"); transform:scale(1.01); animation:drift 18s ease-in-out infinite alternate; }.hero-shade { background:linear-gradient(90deg,rgba(5,12,8,.73),rgba(5,12,8,.18) 58%,rgba(5,12,8,.18)),linear-gradient(180deg,rgba(2,4,3,.14),transparent 35%,rgba(2,4,3,.66)); }.rain { opacity:.1; background-image:repeating-linear-gradient(105deg,transparent 0 35px,rgba(210,228,239,.32) 36px 37px,transparent 38px 70px); background-size:150px 150px; mix-blend-mode:screen; animation:rain 1.3s linear infinite; }.hero-topline,.hero-title-wrap,.hero-bottom,.hero-caption { position:relative; z-index:1; }.hero-topline { display:flex; justify-content:space-between; gap:1rem; color:var(--paper); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; }.hero-title-wrap { margin-top:auto; padding-top:9rem; }.hero-title-wrap p { margin:0 0 .4rem .25rem; color:var(--amber); font-size:.7rem; letter-spacing:.17em; text-transform:uppercase; }
h1,h2 { margin:0; font-family:"Playfair Display",Georgia,serif; font-weight:500; letter-spacing:0; } h1 { max-width:900px; font-size:clamp(4.5rem,12.5vw,12.5rem); line-height:.78; } h1 span { display:block; color:transparent; -webkit-text-stroke:1px rgba(244,241,231,.86); }.hero-bottom { display:grid; grid-template-columns:minmax(0,440px) auto; justify-content:space-between; align-items:end; gap:2rem; margin-top:4.5rem; }.hero-copy { margin:0; font-family:"Playfair Display",Georgia,serif; font-size:clamp(1.2rem,2vw,1.65rem); line-height:1.2; }.explore-link,.founders-link { display:inline-flex; align-items:center; gap:1.25rem; padding-bottom:.55rem; border-bottom:1px solid var(--ink); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; }.explore-link b,.founders-link b { font-size:1.3rem; font-weight:400; line-height:.7; }.hero-caption { align-self:end; margin:2.8rem 0 0; color:var(--mist); font-size:.62rem; letter-spacing:.06em; }
.manifesto { position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(165px,.4fr) minmax(0,1.35fr); gap:2rem; max-width:var(--max); margin:auto; padding:clamp(6rem,13vw,12rem) clamp(1.2rem,4vw,3.5rem); }.section-index { margin:0; color:var(--amber); font-size:.66rem; letter-spacing:.11em; text-transform:uppercase; }.section-index span { margin-left:.7rem; color:var(--mist); }.lead { position:relative; z-index:1; max-width:970px; margin:0; font-size:clamp(2rem,5.1vw,5rem); line-height:1.03; }.split-copy { position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; max-width:660px; margin-top:3.5rem; color:var(--mist); font-size:.82rem; }.split-copy p { margin:0; }.manifesto-stamp { position:absolute; right:-.1em; bottom:.08em; display:flex; flex-direction:column; color:rgba(244,241,231,.035); font-family:"Playfair Display",Georgia,serif; font-size:clamp(5rem,16vw,16rem); font-weight:700; line-height:.68; text-align:right; pointer-events:none; }
.world { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(310px,.8fr); align-items:stretch; background:#23372a; }.world-art { position:relative; min-height:620px; overflow:hidden; }.world-art:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 60%,#23372a),linear-gradient(0deg,rgba(0,0,0,.14),transparent 40%); }.world-art img { height:100%; object-fit:cover; filter:saturate(.92) contrast(1.02); }.world-art p { position:absolute; z-index:1; right:1.6rem; top:1.5rem; margin:0; font-size:.63rem; color:var(--paper); }.world-copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(4rem,8vw,8rem) clamp(1.5rem,5vw,5rem); }.world-copy h2,.development h2,.founders h2 { margin:2.7rem 0 1.5rem; font-size:clamp(2.8rem,5.4vw,5.3rem); line-height:.98; }.world-copy > p { max-width:430px; margin:0; color:var(--paper); font-size:.9rem; } dl { display:grid; grid-template-columns:1fr; margin:4rem 0 0; border-top:1px solid var(--line); } dl div { display:flex; justify-content:space-between; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--line); font-size:.68rem; } dt { color:var(--mist); } dd { margin:0; color:var(--ink); text-align:right; }
.flight { position:relative; min-height:min(72vw,880px); overflow:hidden; background:#23372a; }.flight > img { width:100%; height:100%; min-height:inherit; object-fit:cover; }.flight:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,12,8,.8),rgba(5,12,8,.12) 67%); }.flight-copy { position:absolute; z-index:1; left:clamp(1.2rem,7vw,7rem); bottom:clamp(2.5rem,9vw,8rem); width:min(650px,calc(100% - 2.4rem)); }.flight-copy h2 { margin:2rem 0 1.1rem; font-family:Georgia,serif; font-size:clamp(3rem,6.5vw,6.2rem); font-weight:500; line-height:.94; }.flight-copy > p:last-child { max-width:480px; margin:0; color:var(--paper); font-size:.9rem; }
.design { max-width:var(--max); margin:auto; padding:clamp(6rem,12vw,11rem) clamp(1.2rem,4vw,3.5rem); }.design-heading { display:grid; grid-template-columns:minmax(165px,.4fr) minmax(0,1.35fr); gap:2rem; }.design h2 { max-width:820px; margin:0; font-family:"Playfair Display",Georgia,serif; font-size:clamp(2.8rem,5.4vw,5.3rem); font-weight:500; line-height:.98; }.design-heading > div > p { max-width:535px; margin:1.8rem 0 0; color:var(--paper); font-size:.9rem; }.design-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:5.5rem; border-top:1px solid var(--line); border-left:1px solid var(--line); }.design-grid article { min-height:250px; padding:1.55rem 2rem 2rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }.design-grid article > span { color:var(--amber); font-size:.66rem; }.design-grid h3 { max-width:410px; margin:3rem 0 .8rem; font-family:"Playfair Display",Georgia,serif; font-size:clamp(1.6rem,2.5vw,2.3rem); font-weight:500; line-height:1.06; }.design-grid p { max-width:440px; margin:0; color:var(--mist); font-size:.77rem; }
.development { max-width:var(--max); margin:auto; padding:clamp(6rem,12vw,11rem) clamp(1.2rem,4vw,3.5rem); }.development-heading { display:grid; grid-template-columns:minmax(165px,.4fr) minmax(0,1.35fr); gap:2rem; }.development h2 { max-width:820px; margin:0; }.build-list { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:5.5rem 0 0; padding:0; list-style:none; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.build-list li { min-height:210px; padding:1.25rem 1.25rem 1.6rem 0; border-right:1px solid var(--line); }.build-list li + li { padding-left:1.25rem; }.build-list li:last-child { border-right:0; }.build-list > li > span { color:var(--amber); font-size:.66rem; }.build-list p { display:flex; flex-direction:column; gap:.6rem; margin:4rem 0 0; }.build-list b { font-family:"Playfair Display",Georgia,serif; font-size:1.65rem; font-weight:500; line-height:1.1; }.build-list small { max-width:210px; color:var(--mist); font-size:.7rem; line-height:1.6; }
.founders { position:relative; overflow:hidden; min-height:760px; display:grid; place-items:center; padding:6rem 1.2rem; background:#183026; }.founders-backdrop { position:absolute; inset:0; opacity:.45; background:center / cover url("assets/the-gate-reborn-valley.png"); filter:saturate(.9) contrast(1.05); }.founders-backdrop:after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 51% 58%,rgba(8,20,13,.14),rgba(3,9,5,.82) 74%); }.founders-content { position:relative; z-index:1; width:min(760px,100%); text-align:center; }.founders .section-index { color:var(--amber); }.founders-label { margin:5rem 0 0; color:var(--mist); font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; }.founders h2 { margin:1.25rem auto 1.5rem; font-size:clamp(3rem,7.6vw,6.8rem); }.founders-content > p:not(.section-index):not(.founders-label) { max-width:570px; margin:0 auto; color:var(--paper); font-size:.86rem; }.founders-link { margin-top:2.7rem; }
.site-footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; padding:1.4rem clamp(1.2rem,4vw,3.5rem); background:#050605; color:var(--mist); font-size:.62rem; }.site-footer p { margin:0; text-align:center; }.site-footer p:last-child { text-align:right; }.footer-brand { color:var(--ink); font-family:"Playfair Display",Georgia,serif; font-size:1.2rem; }
@keyframes drift { to { transform:scale(1.075); } } @keyframes rain { to { background-position:-45px 150px; } } @media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; } }
@media (max-width:760px) { .site-header { grid-template-columns:1fr auto; }.project-state { display:none; }.hero { min-height:760px; padding-top:6.5rem; }.hero-image { background-position:58% center; }.hero-shade { background:linear-gradient(90deg,rgba(2,8,4,.68),rgba(2,8,4,.12)),linear-gradient(180deg,rgba(2,4,3,.16),transparent 35%,rgba(2,4,3,.74)); }.hero-title-wrap { padding-top:7rem; } h1 { font-size:clamp(4.3rem,21vw,7rem); }.hero-bottom { grid-template-columns:1fr; align-items:start; gap:2rem; margin-top:3rem; }.explore-link { justify-self:start; }.manifesto,.development-heading,.design-heading { grid-template-columns:1fr; gap:2rem; }.split-copy { grid-template-columns:1fr; gap:1.2rem; }.world { grid-template-columns:1fr; }.world-art { min-height:430px; }.world-art:after { background:linear-gradient(0deg,#23372a,transparent 45%); }.world-copy { padding-top:4rem; }.flight { min-height:620px; }.flight > img { object-position:38% center; }.flight:after { background:linear-gradient(0deg,rgba(3,11,6,.72),rgba(3,11,6,.05) 70%); }.flight-copy { left:1.2rem; bottom:2.5rem; }.flight-copy h2 { font-size:clamp(2.9rem,12vw,4.6rem); }.development h2 { margin-top:.3rem; }.design h2 { margin-top:.3rem; }.design-grid { grid-template-columns:1fr; margin-top:4rem; }.design-grid article { min-height:auto; padding:1.3rem 0 2rem; border-right:0; }.design-grid h3 { margin-top:2rem; }.build-list { grid-template-columns:1fr; margin-top:4rem; }.build-list li,.build-list li + li { min-height:auto; padding:1.2rem 0; border-right:0; border-bottom:1px solid var(--line); }.build-list li:last-child { border-bottom:0; }.build-list p { margin:1.5rem 0 0; }.founders { min-height:680px; }.founders-label { margin-top:4rem; }.site-footer { grid-template-columns:1fr; text-align:center; }.site-footer p:last-child,.site-footer p { text-align:center; } }