* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--display); } a { color:inherit; text-decoration:none; } a:focus-visible { outline:3px solid var(--cyan); outline-offset:4px; } .shell { width:min(1200px,calc(100% - 48px)); margin:0 auto; }
.nav { display:flex; align-items:center; justify-content:space-between; padding:24px 0; border-bottom:1px solid var(--line); font-size:13px; letter-spacing:.02em; text-transform:uppercase; } .monogram { color:var(--accent); font-weight:700; letter-spacing:-.08em; font-size:23px; } .nav-links { display:flex; gap:20px; } .nav-links a { display:inline-flex; align-items:center; min-height:44px; } .nav-links a:hover,.text-link:hover { color:var(--accent); }
.hero { padding:76px 0 95px; min-height:620px; display:grid; grid-template-columns:1.6fr .8fr; align-content:start; gap:64px; } .eyebrow { margin:0 0 25px; color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; } h1 { max-width:900px; margin:0; font-size:clamp(56px,8.6vw,124px); line-height:.87; letter-spacing:-.085em; font-weight:500; } h1 em { font-family:var(--reading); font-weight:400; } .dek { align-self:end; max-width:330px; margin:0 0 7px; font:22px/1.3 var(--reading); }
.facts { background:var(--ink); color:var(--surface); } .facts-inner { display:grid; grid-template-columns:repeat(3,1fr); } .fact { min-height:164px; padding:27px 30px; border-right:1px solid rgba(255,255,255,.22); } .fact:last-child { border:0; } .fact b { display:block; margin-bottom:13px; color:#4cc9f0; font-size:11px; letter-spacing:.1em; text-transform:uppercase; } .fact span { font:21px/1.15 var(--reading); }
.article { width:min(820px,calc(100% - 48px)); margin:0 auto; padding:110px 0 55px; } .article h2 { margin:76px 0 22px; font-size:clamp(33px,4.4vw,55px); line-height:.96; letter-spacing:-.065em; font-weight:500; } .article h2:first-child { margin-top:0; } .article h3 { margin:48px 0 15px; color:var(--secondary); font-size:26px; letter-spacing:-.045em; font-weight:500; } .article p { margin:0 0 23px; font:22px/1.43 var(--reading); letter-spacing:-.015em; } .article ol { margin:0 0 26px; padding-left:25px; font:21px/1.45 var(--reading); } .article li { padding-left:9px; margin:8px 0; } .flow { margin:38px 0; padding:29px 31px; background:var(--surface-violet); color:var(--secondary); font:19px/1.45 var(--display); white-space:pre-line; } .comparison { width:100%; margin:38px 0; border-collapse:collapse; font:18px/1.4 var(--reading); } .comparison th,.comparison td { width:50%; padding:18px 20px; vertical-align:top; text-align:left; border:1px solid var(--line); } .comparison th { background:#eadde1; color:var(--secondary); font:700 11px var(--display); letter-spacing:.1em; text-transform:uppercase; }
.next { padding:70px 0 98px; background:var(--surface-violet); } .next-inner { display:flex; align-items:end; justify-content:space-between; gap:40px; } .next p { max-width:580px; margin:0; font:clamp(31px,4vw,53px)/.98 var(--reading); letter-spacing:-.055em; } .text-link { display:inline-flex; gap:10px; color:var(--secondary); font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap; }.footer { display:flex; justify-content:space-between; margin-top:88px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
@media (max-width:760px) { .shell { width:min(100% - 32px,1200px); } .nav { padding:18px 0; } .nav-links { gap:15px; font-size:11px; } .hero { min-height:560px; grid-template-columns:1fr; padding:70px 0; gap:35px; } .facts-inner { grid-template-columns:1fr; } .fact { min-height:auto; border-right:0; border-bottom:1px solid rgba(255,255,255,.22); } .article { width:min(100% - 32px,820px); padding:76px 0 30px; } .article h2 { margin-top:57px; } .article p,.article ol { font-size:19px; } .comparison { font-size:16px; } .comparison th,.comparison td { padding:14px; } .next { padding:62px 0; }.next-inner { align-items:start; flex-direction:column; }.footer { margin-top:65px; flex-direction:column; gap:14px; } }
.case-visual { width:min(1200px,calc(100% - 48px)); height:440px; margin:86px auto 0; position:relative; overflow:hidden; background:#eadde1; } .case-visual small { position:absolute; top:28px; left:30px; color:var(--secondary); font:700 11px var(--display); letter-spacing:.1em; text-transform:uppercase; z-index:2; }.case-visual p { position:absolute; left:30px; bottom:24px; max-width:310px; margin:0; color:var(--secondary); font:27px/1.02 var(--reading); letter-spacing:-.04em; z-index:2; }.native-visual .orb { position:absolute; width:310px; height:310px; border:2px solid var(--accent); border-radius:50%; right:105px; top:69px; }.native-visual .orb:before,.native-visual .orb:after { content:""; position:absolute; border-radius:50%; }.native-visual .orb:before { width:150px; height:150px; left:78px; top:78px; background:var(--cyan); }.native-visual .orb:after { width:65px; height:65px; left:120px; top:120px; background:var(--surface); }.native-visual .rail { position:absolute; right:0; top:218px; width:610px; height:2px; background:var(--secondary); }.native-visual .dot { position:absolute; right:554px; top:205px; width:28px; height:28px; border-radius:50%; background:var(--accent); }.system-visual { background:#f3ece8; }.system-visual .tile { position:absolute; background:var(--secondary); color:var(--surface); padding:24px; font:500 25px/.95 var(--display); letter-spacing:-.06em; }.system-visual .tile.one { width:245px; height:170px; right:400px; top:90px; }.system-visual .tile.two { width:175px; height:230px; right:205px; top:130px; background:var(--cyan); color:var(--ink); }.system-visual .tile.three { width:130px; height:130px; right:58px; top:72px; background:var(--accent); }.system-visual .grid { position:absolute; right:58px; bottom:70px; width:560px; height:1px; background:var(--secondary); box-shadow:0 -75px 0 rgba(114,28,52,.25),0 -150px 0 rgba(114,28,52,.25); }.growth-visual { background:#f2e1e4; }.growth-visual .rise { position:absolute; right:70px; bottom:83px; width:690px; height:2px; background:var(--accent); transform:rotate(-18deg); transform-origin:right; }.growth-visual .stage { position:absolute; border-radius:50%; display:grid; place-items:center; font:500 48px var(--display); }.growth-visual .stage.three { right:555px; bottom:76px; width:125px; height:125px; border:2px solid var(--accent); color:var(--secondary); background:var(--surface); }.growth-visual .stage.four { right:145px; bottom:165px; width:205px; height:205px; color:var(--surface); background:var(--accent); }.growth-visual .stage b { font-size:12px; letter-spacing:.12em; }.growth-visual .bars { position:absolute; right:412px; bottom:70px; display:flex; gap:9px; align-items:end; }.growth-visual .bars i { width:18px; background:var(--cyan); }.growth-visual .bars i:nth-child(1){height:55px}.growth-visual .bars i:nth-child(2){height:87px}.growth-visual .bars i:nth-child(3){height:124px}.growth-visual .bars i:nth-child(4){height:158px}.growth-visual .bars i:nth-child(5){height:190px}.growth-visual .bars i:nth-child(6){height:225px}.growth-visual .bars i:nth-child(7){height:258px}
/* Abstract covers retain the original geometry; content diagrams sit in the article. */
.case-visual { margin-top:48px; background:var(--surface-violet); }
.case-visual small, .case-visual p { color:var(--ink); }
.case-visual p { top:70px; bottom:auto; }
.abstract-shapes { position:absolute; width:760px; height:440px; right:0; bottom:0; transform-origin:right bottom; }
.system-visual { background:var(--surface-cyan); }
.growth-visual { background:var(--surface-violet); }
.article .project-art { width:100%; margin:38px 0 48px; grid-template-columns:1fr; gap:30px; padding:30px; }
.article .project-art figcaption p { font:17px/1.5 var(--display); max-width:560px; margin:18px 0 0; }
.article .art-kicker { margin-bottom:16px; }
.article .art-foot { padding-top:16px; }
.article .artifact p { font:12px/1.5 var(--display); margin:12px 0 0; }
.article .board-note { font:12px/1.6 var(--display); }
.code-evolution { width:min(1040px,calc(100vw - 48px)); margin:48px 50% 68px; padding:34px; transform:translateX(-50%); background:var(--ink); color:var(--surface); }
.code-evolution figcaption { display:grid; grid-template-columns:.7fr 1fr 1.2fr; gap:26px; align-items:start; padding:0 0 30px; }
.code-evolution figcaption > span { color:var(--cyan); font:700 11px/1.5 var(--display); letter-spacing:.09em; text-transform:uppercase; }
.code-evolution figcaption > strong { font:400 clamp(30px,3vw,42px)/1.06 var(--reading); letter-spacing:-.04em; }
.article .code-evolution figcaption p { margin:0; color:var(--surface); font:15px/1.5 var(--display); letter-spacing:0; }
.wave-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.wave-grid section { position:relative; min-width:0; min-height:330px; padding:24px 24px 0 0; display:flex; flex-direction:column; border-top:1px solid rgba(255,255,255,.45); }
.wave-grid section + section { padding-left:24px; border-left:1px solid rgba(255,255,255,.3); }
.wave-grid b { color:var(--cyan); font:500 48px/1 var(--display); letter-spacing:-.07em; }
.wave-grid section:nth-child(2) b { color:var(--surface); }
.wave-grid section:nth-child(3) b { color:#b88cff; }
.wave-grid small { margin:30px 0 12px; font:700 11px/1.4 var(--display); letter-spacing:.08em; text-transform:uppercase; }
.article .wave-grid h3 { margin:0; color:inherit; font-size:23px; line-height:1.12; }
.article .wave-grid p { margin:20px 0 26px; font:15px/1.5 var(--display); letter-spacing:0; }
.wave-grid i { margin-top:auto; padding:14px 0 18px; border-top:1px solid rgba(255,255,255,.3); color:var(--cyan); font:700 10px/1.4 var(--display); font-style:normal; letter-spacing:.09em; text-transform:uppercase; }
.delivery-pipeline { width:min(1040px,calc(100vw - 48px)); margin:42px 50% 58px; padding:34px; transform:translateX(-50%); background:var(--ink); color:var(--surface); }
.delivery-pipeline figcaption { display:grid; grid-template-columns:.7fr 1fr 1.2fr; gap:26px; align-items:start; padding-bottom:30px; }
.delivery-pipeline figcaption > span { color:var(--cyan); font:700 11px/1.5 var(--display); letter-spacing:.09em; text-transform:uppercase; }
.delivery-pipeline figcaption > strong { font:400 clamp(30px,3vw,42px)/1.06 var(--reading); letter-spacing:-.04em; }
.article .delivery-pipeline figcaption p { margin:0; color:var(--surface); font:15px/1.5 var(--display); letter-spacing:0; }
.delivery-pipeline ol { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); margin:0; padding:0; list-style:none; border-top:1px solid rgba(255,255,255,.45); }
.delivery-pipeline li { position:relative; min-width:0; min-height:170px; padding:18px 14px 14px 0; }
.delivery-pipeline li + li { padding-left:14px; border-left:1px solid rgba(255,255,255,.3); }
.delivery-pipeline li:not(:last-child)::after { content:"→"; position:absolute; top:17px; right:-10px; z-index:2; width:20px; color:var(--cyan); background:var(--ink); text-align:center; }
.delivery-pipeline li b { display:block; margin-bottom:38px; color:var(--cyan); font:700 10px/1 var(--display); letter-spacing:.09em; }
.delivery-pipeline li strong { display:block; margin-bottom:10px; font:500 17px/1.15 var(--display); }
.delivery-pipeline li span { display:block; font:12px/1.4 var(--display); color:#dddde7; }
@media (max-width:1050px) {
 .case-visual { height:620px; }
 .case-visual p { max-width:440px; }
 .abstract-shapes { transform:scale(.85); }
 .code-evolution figcaption,.delivery-pipeline figcaption { grid-template-columns:1fr 1.2fr; }
 .code-evolution figcaption p,.delivery-pipeline figcaption p { grid-column:2; }
 .delivery-pipeline ol { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .delivery-pipeline li:nth-child(4) { border-left:0; }
 .delivery-pipeline li:nth-child(-n+3) { border-bottom:1px solid rgba(255,255,255,.3); }
 .delivery-pipeline li:nth-child(3)::after { display:none; }
}
@media (max-width:600px) {
 .case-visual { width:calc(100% - 32px); height:430px; }
 .case-visual p { left:24px; right:24px; font-size:25px; max-width:none; }
 .case-visual small { left:24px; }
 .abstract-shapes { transform:scale(.48); }
 .article .project-art { padding:24px; }
 .code-evolution,.delivery-pipeline { width:calc(100vw - 32px); margin-block:36px 50px; }
 .code-evolution figcaption,.delivery-pipeline figcaption { grid-template-columns:1fr; gap:14px; }
 .code-evolution figcaption p,.delivery-pipeline figcaption p { grid-column:auto; }
 .wave-grid { grid-template-columns:1fr; }
 .wave-grid section { min-height:0; }
 .wave-grid section + section { padding-left:0; border-left:0; border-top:1px solid rgba(255,255,255,.45); }
 .code-evolution { padding:24px; }
 .delivery-pipeline { padding:24px; }
 .delivery-pipeline ol { grid-template-columns:1fr 1fr; }
 .delivery-pipeline li { min-height:145px; }
 .delivery-pipeline li:nth-child(odd) { border-left:0; }
 .delivery-pipeline li:nth-child(even) { border-left:1px solid rgba(255,255,255,.3); }
 .delivery-pipeline li:nth-child(-n+4) { border-bottom:1px solid rgba(255,255,255,.3); }
 .delivery-pipeline li:nth-child(3)::after,.delivery-pipeline li:nth-child(5)::after { display:block; }
 .delivery-pipeline li:nth-child(even)::after { display:none; }
}
@media (max-width:380px) {
 .abstract-shapes { transform:scale(.37); }
 .case-visual { height:390px; }
}