@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Italiana&family=Space+Grotesk:wght@400;500;600;700&display=swap");
:root{--bg:#0c0d10;--cream:#f1efe8;--acid:#d1fa57;--ink:#0c0d10}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--cream);font:16px/1.5 Arial,Helvetica,sans-serif;overflow-x:clip}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:3px solid var(--acid);outline-offset:4px}.skip{position:absolute;top:-100px;left:10px;background:var(--acid);color:#111;padding:10px}.skip:focus{top:10px;z-index:100}
.story-nav{height:82px;padding:0 4vw;position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #ffffff34;background:#0c0d10ed;backdrop-filter:blur(15px)}
.story-brand{font:900 clamp(20px,2.4vw,35px)/1 system-ui;letter-spacing:-.09em;white-space:nowrap}.story-brand span{color:var(--acid)}.story-brand span:last-child{font-size:14px;vertical-align:top;margin-left:7px}
.story-nav nav{display:flex;gap:clamp(12px,2.5vw,45px);font:800 11px monospace}.story-nav nav a:hover{color:var(--acid)}
.story-hero{min-height:94svh;position:relative;display:grid;align-items:center;overflow:hidden;background:radial-gradient(ellipse at 85% 30%,#28301c,#0c0d10 65%);isolation:isolate}
.story-hero-inner{width:min(1480px,90%);margin:80px auto;position:relative;z-index:3}
.story-meta,.story-kicker,.story-hero-bottom>a,.story-line{font:750 11px monospace;letter-spacing:.12em}
.story-meta{display:flex;justify-content:space-between;gap:25px;padding:22px 0;border-block:1px solid #ffffff40}
.story-kicker{color:var(--acid);margin:40px 0 15px}
.story-hero h1{font:1000 clamp(75px,11vw,220px)/.81 system-ui,sans-serif;letter-spacing:-.12em;margin:35px 0 65px;position:relative;z-index:3}
.story-hero h1 em{font:italic 400 .93em Georgia,serif;color:var(--acid)}
.story-hero h1 span{color:#e7e7e1}
.story-hero-bottom{display:flex;align-items:end;justify-content:space-between;gap:35px;border-top:1px solid #ffffff50;padding-top:28px}
.story-hero-bottom p{max-width:660px;font-size:clamp(18px,2vw,26px);margin:0}
.story-hero-bottom>a{padding:20px;background:var(--acid);color:var(--ink);font-weight:900;white-space:nowrap;transition:transform .3s}
.story-hero-bottom>a:hover{transform:translateY(-5px)}
.story-line{position:absolute;bottom:-30px;right:-5%;font-size:30vw;letter-spacing:-.18em;color:#ffffff09;line-height:1;z-index:-1}
.story-orbit{position:absolute;right:-8vw;top:12%;width:min(50vw,750px);aspect-ratio:1;border-radius:50%;border:3px solid #deff3a38;transform:rotate(-20deg) scaleX(.7);pointer-events:none;animation:story-orbit 30s linear infinite}.story-orbit i{position:absolute;inset:15%;border-radius:50%;border:15px solid #dcfd4244}
.story-preface{padding:clamp(100px,15vw,220px) 5vw;background:#141518;color:var(--cream);display:grid;grid-template-columns:1.2fr 1fr;gap:30px 8vw}
.story-preface .story-kicker{grid-column:1/-1;color:var(--acid)}.story-preface h2{font:950 clamp(60px,8vw,145px)/.9 system-ui;letter-spacing:-.1em;grid-row:2/4;margin:0}.story-preface h2 em{font:italic 400 .95em Georgia,serif;color:var(--acid)}
.story-preface p{font:clamp(19px,2vw,30px)/1.45 Georgia,serif;max-width:650px;margin:0;color:#b6bab4}.story-preface p:last-child{font:17px/1.7 system-ui}
.story-chapters{background:#141518;color:var(--cream)}
.chapters-heading{padding:35px 5vw;display:flex;justify-content:space-between;gap:20px;font:800 10px monospace;letter-spacing:.12em;border-block:1px solid #f4f6e23c}.chapters-heading p{margin:0;color:#b8bdac}
.story-chapter{padding:70px 5vw 160px;position:relative;overflow:clip;border-bottom:1px solid #ffffff38}
.chapter-label{display:flex;justify-content:space-between;gap:20px;margin-bottom:50px;border-top:1px solid #ffffff77;padding-top:14px;font:750 10px monospace;letter-spacing:.12em}
.chapter-composition{display:grid;grid-template-columns:1fr .85fr;gap:clamp(35px,5vw,85px);align-items:center;max-width:1550px;margin:auto}
.chapter-art{min-height:clamp(460px,48vw,760px);position:relative;isolation:isolate;overflow:hidden;padding:50px;display:flex;flex-direction:column;justify-content:end}
.chapter-art-label{position:absolute;top:28px;left:32px;right:32px;font:700 10px monospace;letter-spacing:.14em}
.chapter-art strong{position:relative;z-index:2;font:950 clamp(60px,7vw,120px)/.85 system-ui;letter-spacing:-.105em;max-width:90%;overflow-wrap:break-word}
.chapter-art strong em{font:italic 400 1em Georgia,serif}
.chapter-details>span{font:800 11px monospace;color:var(--acid);letter-spacing:.1em}
.chapter-details h2{font:900 clamp(46px,5vw,88px)/.94 system-ui;letter-spacing:-.09em;margin:35px 0}
.chapter-details h2 em{font:italic 400 1em Georgia,serif;color:var(--acid)}
.chapter-details p{font:clamp(16px,1.6vw,23px)/1.55 system-ui;color:#d7dacf}
.chapter-points{display:grid;gap:12px;border-top:1px solid #ffffff4a;padding-top:30px;margin-top:40px;font:750 10px monospace;letter-spacing:.1em;color:#bec7b7}
.chapter-details>a{display:inline-flex;padding:19px 25px;background:var(--acid);color:#111;margin-top:45px;font:850 11px monospace;transition:transform .3s}
.chapter-details>a:hover{transform:translateY(-6px)}
.art-actor{background:radial-gradient(circle at 50% 15%,#805552,#130e17 70%);color:#f8e0cd}.actor-arch{position:absolute;inset:10% 15% 0 28%;border:13px solid #d2a78b9c;border-radius:50% 50% 0 0;transform:rotate(7deg)}
.art-actor strong em{color:#dcb29d}
.art-business{background:#f0d6df;color:#724258;justify-content:center}.art-business strong{font:400 clamp(62px,6vw,110px)/.9 Georgia,serif}.art-business strong em{color:#b26387}
.art-business .flower{position:absolute;font:clamp(350px,40vw,600px)/1 Georgia;color:#cb8bab;right:-20%;bottom:-40%;animation:story-orbit 45s linear infinite}
.art-business .chapter-art-label{color:#89516e}
.art-developer{background:repeating-linear-gradient(0deg,#0b200e 0 4px,#123017 5px 6px);color:#baffc0;border:2px solid #73f186;font-family:monospace}
.developer-top{position:absolute;top:0;left:0;right:0;border-bottom:2px solid #73f186;padding:13px 22px;color:#afffb7;font:700 12px monospace}.developer-top span{float:right}
.art-developer .chapter-art-label{top:90px}
.art-developer strong{font:900 clamp(58px,7vw,115px)/.85 monospace}
.art-developer .cursor{color:#fff;animation:story-cursor 1s steps(1) infinite}.developer-foot{margin-top:35px;font:12px monospace}
.art-creative{background:linear-gradient(105deg,#e9d4b1,#ba8d66);color:#50372f}.art-creative strong{font:italic 400 clamp(62px,8vw,130px)/.85 Georgia,serif}.art-creative strong em{color:#985f47}
.creative-frame{position:absolute;inset:10% 7% 24% 44%;border:40px solid #fff8;transform:rotate(-12deg);box-shadow:10px 30px 45px #0003}
.process{background:var(--acid);color:var(--ink);padding:clamp(90px,12vw,170px) 5vw}.process .story-kicker{color:#46662e}
.process h2{font:1000 clamp(70px,12vw,210px)/.85 system-ui;letter-spacing:-.12em;margin:35px 0 100px}
.process h2 em{font:italic 400 .9em Georgia,serif;color:#4e702e}
.process-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.process-steps article{border-top:4px solid #162713;padding-top:25px}
.process-steps article>span{font:800 11px monospace}.process-steps h3{font:900 clamp(25px,3vw,43px)/1.05 system-ui;letter-spacing:-.07em}
.process-steps p{font:16px/1.6 system-ui;max-width:280px}
.story-outro{padding:clamp(90px,13vw,190px) 5vw;background:radial-gradient(circle at 80% 45%,#28301c,#0c0d10 65%);position:relative}
.story-outro>span{font:800 11px monospace;color:var(--acid)}
.story-outro h2{font:1000 clamp(65px,12vw,195px)/.83 system-ui;letter-spacing:-.11em}
.story-outro h2 em{font:italic 400 .88em Georgia,serif;color:var(--acid)}
.story-outro>div{display:flex;flex-wrap:wrap;gap:25px;align-items:center}
.story-outro p{max-width:600px;font-size:21px}.story-outro a{font:850 11px monospace;padding:20px 26px;background:var(--acid);color:var(--ink)}
.story-outro .outro-secondary{background:transparent;color:#f7f7e9;border:1px solid #ffffff55}
.story-footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;padding:30px 5vw;border-top:1px solid #ffffff55;font:750 10px monospace;letter-spacing:.12em}
@keyframes story-orbit{to{transform:rotate(340deg)}}@keyframes story-cursor{50%{opacity:0}}
@media(max-width:950px){.chapter-composition{grid-template-columns:1fr}.chapter-art{min-height:500px}.story-preface{grid-template-columns:1fr}.story-preface h2{grid-row:auto}.process-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.story-nav{height:72px;padding:0 17px}.story-nav nav{gap:15px;font-size:9px}.story-nav nav a:first-child{display:none}.story-brand{font-size:21px}.story-meta>span:last-child{display:none}.story-hero-inner{width:90%;margin:80px auto}.story-hero h1{font-size:clamp(54px,14vw,100px)}.story-hero-bottom{flex-direction:column;align-items:start}.story-preface{padding:100px 6%}.story-preface h2{font-size:clamp(60px,13vw,90px)}.story-chapter{padding:50px 5% 100px}.chapter-art{min-height:430px;padding:24px}.chapter-art strong{font-size:clamp(48px,12vw,90px)}.chapter-details h2{font-size:clamp(45px,11vw,77px)}.process-steps{grid-template-columns:1fr}.story-outro h2{font-size:clamp(55px,12vw,90px)}.story-outro>div{display:block}.story-outro a{display:inline-block;margin:15px 10px 0 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.story-orbit,.flower,.cursor{animation:none!important}}

/* New AW vector lockup */
.story-brand img{display:block;width:clamp(135px,17vw,190px);height:auto}

/* The editorial explainer is part of the same charcoal / lime studio shell.
   Its four sample artwork compositions retain their own visual identities. */
body{font-family:"DM Sans",Arial,sans-serif;-webkit-font-smoothing:antialiased}
.story-hero h1,.story-preface h2,.chapter-details h2,.process h2,.story-outro h2{font-family:"Space Grotesk",Arial,sans-serif}
.story-meta,.story-kicker,.story-nav nav,.story-footer{font-family:"DM Mono",ui-monospace,monospace}
.story-preface{border-block:1px solid rgba(241,239,232,.12)}
.story-preface h2 em{color:var(--acid)}
.story-nav{border-bottom-color:rgba(241,239,232,.2)}
.story-hero h1 span{color:var(--cream)}
