:root{--g:#002E21;--g2:#07402F;--l:#E8F997;--cream:#EDE7DB;--sage:#718C69;--ink:#002E21;--serif:'Instrument Serif',serif;--sans:'Geist',system-ui,sans-serif;--mono:'Geist Mono',ui-monospace,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--g)}
body{font-family:var(--sans);font-weight:300;color:var(--sage);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
.dark{background:var(--g) url(img/bg-dark.jpg) center/cover;color:var(--l)}
.cream{background:var(--cream) url(img/bg-cream.jpg) center/cover;color:var(--sage)}
.plain{background:var(--cream)}
.pg{position:relative;min-height:100vh;padding:clamp(96px,12vh,150px) clamp(22px,6vw,96px) clamp(64px,10vh,120px);overflow:hidden}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1;letter-spacing:-.012em}
.cream h1,.cream h2,.cream h3{color:var(--ink)}.cream .sage{color:var(--sage)}
.dark h1,.dark h2,.dark h3{color:var(--l)}
h2{font-size:clamp(40px,6.2vw,92px)}
h3{font-size:clamp(22px,2.2vw,32px)}
.sw{display:inline-block;height:1.04em;width:calc(var(--w)*1.04em);vertical-align:-.2em;overflow:visible;fill:currentColor;margin:0 .05em;flex:none}
.sw.i{margin-left:0;margin-right:-.02em}
.eb{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.lead{font-size:clamp(15px,1.25vw,18px);max-width:52ch}
.hex{display:inline-block;width:10px;height:11.5px;background:currentColor;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.hex.o{background:none;position:relative}.hex.o:after{content:"";position:absolute;inset:1px;background:var(--bgc,var(--cream));clip-path:inherit}
.ph{opacity:.55}
/* fixed label + rail */
#lbl{position:fixed;top:30px;left:50%;transform:translateX(-50%);z-index:40;font-size:11px;letter-spacing:.04em;font-weight:300;color:var(--l);transition:color .4s,opacity .4s;pointer-events:none;white-space:nowrap}
#lbl.c{color:var(--sage)}
#rail{position:fixed;right:clamp(14px,2.4vw,36px);top:50%;transform:translateY(-50%);z-index:40;display:grid;gap:12px;opacity:0;transition:opacity .5s;pointer-events:none}
#rail.on{opacity:1}
#rail i{display:block;width:12px;height:13.8px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:rgba(232,249,151,.28);transition:.4s}
#rail i.on{background:var(--l);transform:scale(1.25)}
#prog{position:fixed;left:0;top:0;height:2px;width:0;background:var(--l);z-index:60}
/* cover */
.cover{display:flex;flex-direction:column;justify-content:center;padding:0}
.cover .bar{position:absolute;left:0;right:0;top:clamp(70px,13.2vh,110px);height:clamp(40px,5.9vh,50px);border-top:1px solid rgba(255,255,255,.9);border-bottom:1px solid rgba(255,255,255,.9);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,6.8vw,100px);font-size:10px;font-weight:200;letter-spacing:.04em;color:var(--l);text-transform:uppercase}
.cover .bar svg{height:22px;width:auto;color:var(--l)}
.cover h1{font-size:clamp(56px,8.6vw,132px);text-align:center;line-height:1.02;font-weight:400}
.cover .sub{display:grid;place-items:center;gap:22px;margin-top:clamp(22px,4vh,40px)}
.cover .sub .wm{height:18px;width:auto;color:var(--l)}
.cover .sub p{font-size:clamp(13px,1.1vw,15px);color:var(--l);opacity:.85;letter-spacing:.02em;text-align:center}
.cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);display:grid;justify-items:center;gap:10px;color:var(--l);opacity:.75}
.cue i{display:block;width:1px;height:46px;background:linear-gradient(var(--l),transparent);animation:cue 2.2s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
/* brief */
.brief{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,7vw,120px);align-items:end;min-height:100vh}
.brief h2{margin:22px 0 0}
.brief .col p+p{margin-top:16px}
.facts{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--sage);margin-top:clamp(28px,6vh,72px)}
.facts div{padding:18px 20px 0 0}.facts div+div{padding-left:20px;border-left:1px solid rgba(113,140,105,.4)}
.facts b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.9vw,28px);color:var(--ink);line-height:1.15;margin-top:8px}
/* wall */
.wall{padding-bottom:clamp(120px,18vh,220px)}
.wall .head{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,7vw,120px);align-items:end}
.wall .head p{font-size:clamp(15px,1.25vw,18px);max-width:46ch;color:var(--l);opacity:.85}
.tiles{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.4vw,20px);margin-top:clamp(40px,8vh,96px);align-items:start}
.tile{position:relative;overflow:hidden;transform:translateY(var(--y,0px))}
.tile img{width:100%;height:100%;object-fit:cover}
.tile figcaption{position:absolute;left:10px;bottom:8px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--l);z-index:2}
.tile:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(transparent 55%,rgba(0,30,21,.7))}
.then{filter:grayscale(1) contrast(1.02) brightness(.86) sepia(.28) hue-rotate(60deg) saturate(.8)}
.t1{grid-column:1/6;aspect-ratio:4/3}.t2{grid-column:7/10;aspect-ratio:3/4;margin-top:8vh}.t3{grid-column:10/13;aspect-ratio:1;margin-top:0}
.t4{grid-column:2/5;aspect-ratio:1;margin-top:-4vh}.t5{grid-column:5/9;aspect-ratio:4/3;margin-top:6vh}.t6{grid-column:9/12;aspect-ratio:3/4;margin-top:-2vh}
.to{margin-top:clamp(56px,10vh,120px);display:flex;align-items:center;gap:18px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--l)}
.to i{height:1px;width:clamp(60px,12vw,180px);background:var(--l);opacity:.5}
/* morph */
#morph .chap{position:relative;height:320vh;--s:0}
#morph .stage{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;grid-template-columns:minmax(280px,34%) 1fr;gap:clamp(24px,4.5vw,72px);align-items:center;padding:0 clamp(22px,7vw,110px) 0 clamp(22px,6vw,96px)}
.txt{position:relative;display:grid;align-content:center}
.txt .no{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--l);opacity:.75;display:flex;gap:14px;align-items:center}
.txt .no i{height:1px;width:56px;background:var(--l);opacity:.4}
.txt h2{font-size:clamp(44px,5.4vw,84px);margin:18px 0 26px}
.caps{display:grid}
.cap{grid-area:1/1;font-size:clamp(14px,1.15vw,17px);line-height:1.55;max-width:38ch}
.cap b{display:block;font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px}
.cap.t{color:#c9d7b4;opacity:clamp(0,calc((.5 - var(--s))*4),1);transform:translateY(calc(var(--s)*-14px))}
.cap.n{color:var(--l);opacity:clamp(0,calc((var(--s) - .5)*4),1);transform:translateY(calc((1 - var(--s))*14px))}
.cap.n b{color:var(--l)}.cap.t b{opacity:.75}
.move{margin-top:26px;padding-top:14px;border-top:1px solid rgba(232,249,151,.3);font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--l);opacity:clamp(0,calc((var(--s) - .6)*4),1);max-width:40ch;line-height:1.7}
.frame{position:relative;justify-self:center;width:min(100%,calc(76vh * var(--ar)));aspect-ratio:var(--ar);background:var(--g2)}
.frame .clip{position:absolute;inset:0;overflow:hidden}.frame .clip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame .fb{filter:grayscale(1) contrast(1.02) brightness(.84) sepia(.3) hue-rotate(60deg) saturate(.8);transform:scale(calc(1 + (1 - var(--s))*.0)) }
.frame .fa{clip-path:inset(0 calc(100% - var(--s)*100%) 0 0);transform:scale(calc(1 + (1 - var(--s))*.06));transform-origin:0 50%}
.scan{position:absolute;top:-14px;bottom:-14px;left:calc(var(--s)*100%);width:1px;background:var(--l);box-shadow:0 0 16px 1px rgba(232,249,151,.55);opacity:clamp(0,calc(var(--s)*40),1);z-index:3}
.scan:before{content:"";position:absolute;top:-4px;left:-4px;width:9px;height:10px;background:var(--l);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.scan:after{content:"";position:absolute;bottom:-4px;left:-4px;width:9px;height:10px;background:var(--l);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.frame .corner{position:absolute;width:16px;height:16px;border:1px solid var(--l);opacity:.7;z-index:3;pointer-events:none}
.corner.a{top:-8px;left:-8px;border-right:0;border-bottom:0}.corner.b{top:-8px;right:-8px;border-left:0;border-bottom:0}
.corner.c{bottom:-8px;left:-8px;border-right:0;border-top:0}.corner.d{bottom:-8px;right:-8px;border-left:0;border-top:0}
.hud{position:absolute;left:0;right:0;bottom:calc(100% + 16px);display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--l)}
.hud span:first-child{opacity:calc(1 - var(--s)*.7)}.hud span:last-child{opacity:calc(.35 + var(--s)*.65)}
.meter{position:absolute;left:0;right:0;top:calc(100% + 16px);display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--l)}
.meter i{flex:1;height:1px;background:rgba(232,249,151,.3);position:relative}
.meter i:after{content:"";position:absolute;left:0;top:0;height:1px;width:calc(var(--s)*100%);background:var(--l)}
.meter output{min-width:5ch;text-align:right}
/* moods */
.moods h2{margin:22px 0 0;max-width:12ch}
.moods .top{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,6vw,100px);align-items:end}
.mgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);margin-top:clamp(40px,8vh,80px)}
.mood{position:relative}
.mood .im{aspect-ratio:3/4.4;overflow:hidden;position:relative}
.mood img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.mood:hover img{transform:scale(1.05)}
.mood h3{margin:18px 0 6px;color:var(--ink)}
.mood p{font-size:14px;max-width:30ch}
.dots{display:flex;gap:6px;margin-top:14px}.dots i{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,46,33,.2)}
.mood .n{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:#fff;z-index:2;mix-blend-mode:difference}
/* touches */
.touches .top{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,6vw,100px);align-items:end}
.touches h2{margin-top:22px}
.trow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);margin-top:clamp(40px,8vh,80px);align-items:end}
.trow figure{position:relative}
.trow .im{overflow:hidden;aspect-ratio:3/4}
.trow figure:nth-child(2n) .im{aspect-ratio:1}
.trow img{width:100%;height:100%;object-fit:cover}
.trow figcaption{display:flex;justify-content:space-between;margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--l)}
/* build */
.build .top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,6vw,100px);align-items:end}
.build h2{margin-top:22px}
.pieces{margin-top:clamp(32px,6vh,64px);border-top:1px solid var(--sage)}
.pr{display:grid;grid-template-columns:.8fr 2fr .7fr;gap:24px;align-items:baseline;padding:20px 0;border-bottom:1px solid rgba(113,140,105,.45)}
.pr h3{font-size:clamp(22px,2.2vw,30px)}.pr p{font-size:14.5px;max-width:62ch}.pr .b{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-align:right;color:var(--ink)}
.proc{margin-top:clamp(56px,10vh,110px)}
.proc h2{font-size:clamp(34px,4.4vw,64px)}
.ph3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,4vw,64px);margin-top:clamp(28px,5vh,56px);position:relative}
.ph3:before{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:rgba(113,140,105,.5)}
.ph3:after{content:"";position:absolute;left:0;top:5px;height:1px;width:var(--w,0%);background:var(--ink);transition:width 1.8s cubic-bezier(.2,.7,.2,1)}
.ph3 .st{position:relative;padding-top:34px}
.ph3 .st .hex{position:absolute;top:0;left:0;color:var(--ink);z-index:1;width:12px;height:13.8px}
.ph3 .st .eb{color:var(--sage)}
.ph3 h3{margin:10px 0 10px}.ph3 p{font-size:14.5px;max-width:34ch}
/* results */
.results h2{margin:22px 0 0}
.rgrid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,7vw,120px);margin-top:clamp(36px,7vh,80px);align-items:start}
.big{font-family:var(--serif);font-size:clamp(110px,19vw,300px);line-height:.82;color:var(--ink);letter-spacing:-.03em}
.big small{font-size:.28em;letter-spacing:0;margin-left:.08em;color:var(--sage)}
.rsub{font-size:clamp(15px,1.3vw,19px);margin-top:18px;max-width:34ch}
.stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--sage)}
.stats div{padding:18px 18px 22px 0;border-bottom:1px solid rgba(113,140,105,.4)}.stats div:nth-child(2n){padding-left:18px;border-left:1px solid rgba(113,140,105,.4)}
.stats b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.6vw,54px);color:var(--ink);line-height:1.05;margin-top:6px}
.men{margin-top:clamp(28px,5vh,48px)}
.men .row{display:grid;grid-template-columns:110px 1fr 28px;gap:14px;align-items:center;padding:8px 0;font-size:14px}
.men .row i{height:1px;background:rgba(113,140,105,.4);position:relative}
.men .row i:after{content:"";position:absolute;left:0;top:-1px;height:3px;width:0;background:var(--ink);transition:width 1.6s cubic-bezier(.2,.7,.2,1)}
.men.in .row i:after{width:var(--v)}
.men .row b{font-family:var(--mono);font-weight:400;font-size:12px;text-align:right;color:var(--ink)}
.todo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(28px,5vh,48px)}
.todo div{border:1px dashed rgba(113,140,105,.7);padding:14px 16px;font-size:13px}
.todo b{display:block;font-family:var(--serif);font-weight:400;font-size:28px;color:var(--ink);opacity:.5}
/* next */
.next{display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(rgba(0,46,33,.62),rgba(0,38,27,.9)),var(--g) url(img/maarouf/a44.jpg) center/cover;min-height:100vh}
.next h2{font-size:clamp(46px,8vw,124px);max-width:11ch}
.next .row{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,6vw,100px);align-items:end;margin-top:clamp(28px,6vh,60px);padding-top:clamp(20px,4vh,34px);border-top:1px solid rgba(232,249,151,.6)}
.next p{max-width:46ch;color:var(--l);font-size:clamp(15px,1.25vw,18px)}
.next .pct{font-family:var(--serif);font-size:clamp(56px,7vw,104px);line-height:.9;color:var(--l);display:block;margin-bottom:10px}
.next .ct{font-size:13px;color:var(--l);opacity:.85;margin-top:22px;line-height:1.8}
.foot{display:flex;justify-content:space-between;align-items:center;margin-top:clamp(40px,8vh,90px);color:var(--l)}
.foot .wm{height:18px;width:auto}.foot .bee{height:22px;width:auto}
/* reveal */
.rev{opacity:0;transform:translateY(26px);transition:opacity 1s,transform 1s cubic-bezier(.2,.7,.2,1)}
.rev.in{opacity:1;transform:none}
@media(max-width:900px){
 .brief,.wall .head,.moods .top,.touches .top,.build .top,.rgrid,.next .row{grid-template-columns:1fr}
 .facts{grid-template-columns:1fr 1fr}.facts div:nth-child(3){padding-left:0;border-left:0}.facts div:nth-child(n+3){margin-top:18px}
 .tiles{grid-template-columns:repeat(6,1fr)}.t1{grid-column:1/5}.t2{grid-column:5/7;margin-top:6vh}.t3{grid-column:1/3}.t4{grid-column:3/7;margin-top:2vh}.t5{grid-column:1/5}.t6{grid-column:5/7;margin-top:4vh}
 #morph .chap{height:280vh}
 #morph .stage{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:54px;padding:64px 22px 24px}
 .frame{width:min(100%,calc(50vh * var(--ar)));margin-top:20px}
 .txt h2{margin:10px 0 14px;font-size:44px}.move{margin-top:14px}
 #rail{display:none}
 .mgrid,.trow{grid-template-columns:1fr 1fr}
 .pr{grid-template-columns:1fr;gap:6px}.pr .b{text-align:left}
 .ph3{grid-template-columns:1fr}.ph3:before,.ph3:after{display:none}
 .todo{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 #morph .chap{height:auto;--s:1!important}
 #morph .stage{position:relative;height:auto;padding-top:80px;padding-bottom:80px}
 .rev{opacity:1;transform:none}
}
.results .rsub,.results .men .row span,.results .men .eb{color:#2f4b3a}
.proc .eb,.results .eb{color:#4d6a52}
.next .ct{opacity:1}.next .ct .ph{opacity:.8}