@font-face{font-family:ManropeSP;src:url('fonts/manrope-latin.woff2') format('woff2');font-style:normal;font-weight:200 800;font-display:swap}
@font-face{font-family:InstrumentSP;src:url('fonts/instrument-serif-regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:InstrumentSP;src:url('fonts/instrument-serif-italic.woff2') format('woff2');font-style:italic;font-weight:400;font-display:swap}
:root{--bg:#0b1418;--bg2:#101e23;--panel:#17272d;--chalk:#f0eee5;--dim:rgba(240,238,229,.74);--faint:rgba(240,238,229,.48);--line:rgba(240,238,229,.2);--line2:rgba(240,238,229,.065);--orange:#f35d3c;--lime:#d8ee7d;--paper:#f0eee5;--ink:#0b1418;--body:ManropeSP,Arial,sans-serif;--disp:ManropeSP,Arial,sans-serif;--serif:InstrumentSP,Georgia,serif}
html{scrollbar-gutter:stable}
body{background:var(--bg);font-family:var(--body)}
.display{font-family:var(--disp);font-weight:760;letter-spacing:-.075em;line-height:.95}
.grain{opacity:.024}
.ruler a{font-size:10px;letter-spacing:.13em}
header{height:74px;padding:0 4vw;background:rgba(11,20,24,.82);backdrop-filter:blur(22px);border-bottom-color:rgba(240,238,229,.15)}
.logo{font:790 1.75rem/.9 var(--disp);letter-spacing:-.09em;gap:.18rem}
.logo em{font-size:1rem;align-self:flex-start;margin-left:.05rem;color:var(--orange)}
.logo small{margin-left:.8rem;align-self:center;font:600 .54rem/1 var(--mono);letter-spacing:.18em;color:var(--dim)}
nav.main a,.header-mail,.lang-toggle{font-family:var(--mono);font-size:.63rem;letter-spacing:.13em}
.lang-toggle{padding:.65rem .8rem;border-radius:2px}
.status{gap:1rem}
.scroll-progress{background:var(--orange)}

/* A single photograph makes the map feel physical; the plotted vectors stay in front. */
#hero{min-height:100dvh;background:radial-gradient(circle at 76% 36%,#263b3d 0%,var(--bg) 59%);isolation:isolate}
.hero-art{position:absolute;z-index:0;right:-3%;top:6%;width:65%;height:74%;overflow:hidden;opacity:.8;mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 100%)}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:65% center;animation:art-drift 18s ease-in-out infinite alternate}
.hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--bg),transparent 37%),linear-gradient(90deg,var(--bg),transparent 48%)}
.hero-art-cross{position:absolute;z-index:2;right:8%;top:14%;font:300 8rem/1 var(--body);color:var(--lime);opacity:.65;animation:cross-turn 24s linear infinite}
@keyframes art-drift{from{transform:scale(1.04) translate3d(-1%,0,0)}to{transform:scale(1.12) translate3d(1.5%,-1%,0)}}
@keyframes cross-turn{to{transform:rotate(360deg)}}
.hero-field{opacity:.45;background-size:20px 20px,20px 20px,160px 160px,160px 160px}
.contours{z-index:1;opacity:.55}
.contours path{stroke:rgba(240,238,229,.16)}
.contours path.hot{stroke:var(--orange)}
.compass{z-index:2;right:5vw;top:18vh;width:min(170px,16vw);opacity:.34}
.hero-inner{padding:0 4vw}
.hero-kicker{padding-top:112px;color:var(--chalk);font-size:.64rem;letter-spacing:.16em}
.hero-kicker span:first-child{color:var(--lime)}
.hero-title{position:relative;z-index:4;font-size:clamp(100px,22vw,340px);margin-top:1.3vh;letter-spacing:-.085em;line-height:.85}
.lti{font-family:var(--disp);font-weight:770;color:var(--chalk);-webkit-text-stroke:0;line-height:.88;padding-bottom:.14em}
.lt:last-child .lti{color:var(--orange)}
.lt:hover .lti{color:var(--lime);-webkit-text-stroke:0;transform:translateY(-.05em) rotate(-3deg)}
.hero-phrase{position:relative;z-index:4;font:730 clamp(2rem,4.2vw,5rem)/1 var(--disp);letter-spacing:-.075em;color:var(--chalk);padding-bottom:.15em;margin:-.03em 0 1.5rem}
.hero-phrase em{font:italic 400 1.15em/.9 var(--serif);letter-spacing:-.035em;color:var(--lime)}
.hero-sub{position:relative;z-index:4;align-items:start;gap:2rem;margin:0 0 2.6rem}
.hero-sub p{max-width:640px;color:var(--chalk);font-size:clamp(1.05rem,1.7vw,1.45rem);line-height:1.52;font-weight:450}
.hero-sub p b{color:var(--lime);font-weight:700}
.hero-tag{font-size:.64rem;letter-spacing:.13em;color:var(--lime);border-color:var(--lime);padding:.8rem 1rem}
.hero-form{position:relative;z-index:4;align-items:end;border-top-color:rgba(240,238,229,.52);padding:1.6rem 0 1.8rem}
.hero-form label{letter-spacing:.14em;font-size:.62rem;color:var(--lime)}
.hero-form input{font-family:var(--body);font-weight:520;border-bottom:1px solid rgba(240,238,229,.6);font-size:clamp(1.15rem,2vw,1.8rem);padding:.6rem 0 .9rem}
.hero-form input::placeholder{color:rgba(240,238,229,.42)}
.btn{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;transition:background .35s,color .35s,border-color .35s,transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.btn.solid{color:var(--bg);font-weight:600}
.btn.solid:hover{background:var(--lime);border-color:var(--lime);color:var(--bg);box-shadow:5px 5px 0 var(--orange)}
.chips{position:relative;z-index:4;padding-bottom:1.4rem}
.chip{font-size:.59rem;letter-spacing:.06em;color:var(--dim);padding:.62rem .85rem;border-color:rgba(240,238,229,.25);transition:border-color .3s,color .3s,transform .3s}
.chip:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-4px)}
.hero-ticker{background:rgba(11,20,24,.88);border-color:rgba(240,238,229,.22)}
.marq-track span{font-size:.61rem;letter-spacing:.18em}
.marq.big{background:var(--orange);border:0}
.marq.big .marq-track span{font-family:var(--disp);font-weight:760;letter-spacing:-.075em;color:var(--ink);-webkit-text-stroke:0;padding:1.2rem 0}
.marq.big .marq-track em{color:var(--chalk)}

/* The live instrument gets the visual weight of the work, not a secondary widget. */
.sec-head{grid-template-columns:minmax(0,1fr) minmax(210px,27%);gap:1.5rem 3rem;padding:8.5rem 0 2.8rem}
.sec-head .sec-no{grid-column:1/-1;padding-bottom:0;letter-spacing:.16em;font-size:.61rem}
.sec-title{font-size:clamp(3.9rem,7vw,8rem);line-height:.94;letter-spacing:-.077em;padding-bottom:.18em}
.sec-desc{max-width:360px;font-size:.95rem;line-height:1.65;color:var(--dim)}
.ln{overflow:visible}
.lni{padding-bottom:.13em}
.js .lni{transform:translateY(75%);opacity:0;transition:transform 1.1s cubic-bezier(.16,1,.3,1),opacity .9s ease;transition-delay:var(--d,0s)}
.js .in .lni{transform:translateY(0);opacity:1}
.js .rv{filter:blur(5px);transition:opacity .85s ease,transform 1s cubic-bezier(.16,1,.3,1),filter .9s ease;transition-delay:var(--d,0s)}
.js .rv.in{filter:blur(0)}
#demo{padding-bottom:9rem;background:var(--bg)}
.bench{grid-template-columns:minmax(300px,29%) 1fr;gap:2px;background:var(--line);border:1px solid var(--line);box-shadow:0 30px 90px rgba(0,0,0,.18);margin-top:2.7rem}
.bench>.panel:first-child{background:linear-gradient(155deg,#20353a 0%,#172a30 48%,#112127 100%);color:var(--chalk)}
.bench>.panel:first-child h4{color:var(--chalk);font-size:.76rem;letter-spacing:.17em}
.bench>.panel:first-child h4 i{color:#bdd1c2}
#briefInput{background:#0f1e23;color:var(--chalk);border-color:rgba(240,238,229,.25);border-radius:1px;font-size:1.05rem;line-height:1.65;padding:16px}
.mini-btn{border-color:rgba(240,238,229,.31);color:var(--chalk);font-size:.71rem;padding:11px 13px;transition:border-color .3s,color .3s,background .3s,transform .3s}
.mini-btn:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-2px)}
.mini-btn.hot{background:var(--orange);border-color:var(--orange);color:var(--ink);font-weight:700}
.mini-btn.hot:hover{background:#ff795a;border-color:#ff795a;color:var(--ink)}
.sig{color:var(--lime);border-color:rgba(216,238,125,.65);font-size:.7rem;padding:8px 10px}
.sig.tone{color:#ff9a80;border-color:rgba(243,93,60,.75)}
#log{background:#0f1e23;color:#d7e3d9;border-color:rgba(240,238,229,.24);font-size:.77rem;line-height:1.7;height:180px;padding:15px}
#log div{white-space:normal;overflow-wrap:anywhere}
#log .sys{color:#b6c8be}
#log .ok{color:var(--lime)}
#log .warn{color:#ff9a80}
.bench>.panel:nth-child(2){background:var(--bg2)}
.count b{font-family:var(--disp);font-weight:720;letter-spacing:-.07em}
#field{background-color:#12252a}
.field-label{color:var(--lime)}
.node{background:#1d3136;border-color:rgba(240,238,229,.28);border-radius:3px;box-shadow:0 14px 22px rgba(0,0,0,.15)}
.node .name{font-family:var(--disp);font-weight:760;letter-spacing:-.06em;font-size:1.1rem}
.node .acts{transition:opacity .25s,transform .25s}
.node .acts button{transition:background .2s,color .2s,border-color .2s}
.ticket h3{font-family:var(--disp);font-weight:760;letter-spacing:-.06em;line-height:1.06}
.ticket .quote{font-family:var(--serif);font-style:italic;font-size:1.5rem;line-height:1.3}

/* A quiet paper chapter gives the process room to breathe. */
#promise{background:var(--paper);color:var(--ink)}
#promise .sec-head{border-color:rgba(11,20,24,.28)}
#promise .sec-no,#notes .sec-no{color:#aa3925}
#promise .sec-desc{color:#4b5a57}
#promise .sec-title{max-width:1000px}
.promise-grid{gap:8vw;padding:5rem 0 9rem}
.promise-sticky .display{font-size:clamp(3.5rem,5.8vw,6.6rem);letter-spacing:-.08em;line-height:.99;padding-bottom:.19em}
.promise-sticky .display .lit-word{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.035em;color:var(--orange);-webkit-text-stroke:0;text-transform:none}
.promise-sticky p{color:#4b5a57;font-size:1rem;line-height:1.65}
.p-item{border-color:rgba(11,20,24,.2);grid-template-columns:60px 1fr}
.p-item .no{font:720 1.4rem var(--disp);letter-spacing:-.04em}
.p-item h3{font-family:var(--disp);font-weight:750;letter-spacing:-.055em;padding-bottom:.12em}
.p-item p{color:#4b5a57;line-height:1.6}
.plans-doc{background:#fffdf6;box-shadow:16px 18px 0 rgba(11,20,24,.12);border-color:rgba(11,20,24,.3)}
.plans-doc header b{font-family:var(--disp);font-weight:760;letter-spacing:-.04em}
.plans-doc .p-stamp{font-family:var(--disp);font-weight:780;letter-spacing:-.04em}

#specimen{background:radial-gradient(circle at 60% 50%,#1d3238,var(--bg) 60%);padding:8rem 0}
.wrow{padding:.5rem 0}
.wl{font-family:var(--disp);font-weight:760;letter-spacing:-.085em;font-size:clamp(5.5rem,13.3vw,15rem);line-height:1.05;padding-bottom:.16em}
.wrow:hover .wl{color:var(--accent,var(--chalk))}
.marq.big .marq-track span,.wl,.hero-title,.contact-cta a.big{overflow:visible}

/* Speculative cases alternate photographic and diagrammatic plates. */
#notes{background:var(--paper);color:var(--ink);padding-bottom:9rem}
#notes .sec-head{border-color:rgba(11,20,24,.25)}
#notes .sec-desc{color:#4b5a57}
#notes .sec-no{color:var(--orange)}
.concept-note{font:600 .62rem/1.5 var(--mono);letter-spacing:.15em;color:#4b5a57;margin:2.6rem 0 -1rem;text-transform:uppercase}
.notes-grid{gap:1.2rem}
.note{border:1px solid rgba(11,20,24,.18);background:#e7e9df;transition:transform .65s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .5s}
.note:hover{transform:translateY(-9px) rotate(-.25deg);border-color:var(--ink);box-shadow:12px 17px 0 rgba(11,20,24,.07)}
.note .img{isolation:isolate}
.note .img::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(11,20,24,.13),transparent 45%);pointer-events:none}
.note .img img{filter:saturate(.86) contrast(1.02);transition:filter .7s,transform 1.1s cubic-bezier(.16,1,.3,1)}
.note:hover .img img{filter:saturate(1.04);transform:scale(1.055)}
.note .idx{background:var(--paper);color:var(--ink);border-color:rgba(11,20,24,.3)}
.note .tagx{background:var(--orange);color:var(--ink)}
.note .body{padding:1.3rem 1.4rem 1.5rem}
.note h3{font-family:var(--disp);font-weight:750;letter-spacing:-.06em;line-height:1.14;padding-bottom:.12em;text-transform:none;font-size:clamp(1.4rem,2vw,2.1rem)}
.note .body small{color:#4b5a57;font-size:.54rem;letter-spacing:.11em}
.note .arrow{transition:opacity .35s,transform .35s}

#index{background:var(--bg);padding-bottom:8rem}
.cap-row{transition:background .35s,transform .45s cubic-bezier(.16,1,.3,1)}
.cap-row:hover{padding-left:10px;transform:translateX(12px);background:rgba(240,238,229,.035)}
.cap-row h3{font-family:var(--disp);font-weight:740;letter-spacing:-.06em;line-height:1.09;padding-bottom:.12em;text-transform:none}
.cap-row .ca{transition:color .35s,transform .35s}
#cap-preview{width:320px;height:210px;border:6px solid var(--paper);box-shadow:15px 18px 0 rgba(0,0,0,.28)}

.contact-cta{background:var(--orange);color:var(--ink);padding:7rem 5vw 8rem;border:0}
.contact-cta .k{color:var(--ink);font-weight:700}
.contact-cta a.big{font-family:var(--disp);font-weight:780;font-size:clamp(4.2rem,11vw,12rem);line-height:.96;letter-spacing:-.085em;color:var(--ink);-webkit-text-stroke:0;padding-bottom:.2em}
.contact-cta a.big:hover{color:var(--chalk);-webkit-text-stroke:0}
.contact-mail{color:var(--ink);letter-spacing:.12em;font-size:.65rem}
.contact-mail a{color:var(--ink);border-color:var(--ink)}
.spaco-footer{background:var(--bg);color:var(--chalk);padding:4rem 5vw 2rem;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2rem;align-items:start;border-top:1px solid var(--line)}
.spaco-footer>a{font:780 clamp(3rem,8vw,9rem)/.8 var(--disp);letter-spacing:-.09em;width:max-content}
.spaco-footer>a span{font-size:.4em;vertical-align:top;color:var(--orange);letter-spacing:0}
.spaco-footer p{font:600 .7rem/1.7 var(--mono);letter-spacing:.12em;color:var(--dim)}
.spaco-footer>div{display:grid;gap:.65rem;font:600 .65rem/1.4 var(--mono);letter-spacing:.1em}
.spaco-footer>div a:hover{color:var(--lime)}
.spaco-footer>small{grid-column:1/-1;border-top:1px solid var(--line);padding-top:1rem;color:var(--faint);font:500 .54rem/1.3 var(--mono);letter-spacing:.14em}
@supports(animation-timeline:view()){section:not(#hero)::after{display:none}}

@media(max-width:1100px){nav.main{gap:1rem}.status #coord{display:none}.sec-head{grid-template-columns:1fr}.sec-head .sec-no{grid-column:auto}.sec-desc{max-width:650px}.bench{grid-template-columns:1fr}}
@media(max-width:760px){header{height:66px;padding:0 5vw}.logo{font-size:1.5rem}.logo small{font-size:.44rem}.status{gap:.5rem}.status>span:nth-of-type(4){display:none}.hero-inner{padding:0 5vw}.hero-art{right:-20%;top:3%;width:108%;height:56%;opacity:.55;mask-image:linear-gradient(0deg,transparent 0%,#000 28%,#000 100%)}.hero-art-cross{font-size:5rem}.hero-kicker{font-size:.5rem;letter-spacing:.08em;padding-top:85px}.hero-kicker span:last-child{display:none}.hero-title{font-size:clamp(5.25rem,24.5vw,12rem);margin-top:5vh}.hero-sub{margin:.6rem 0 2rem}.hero-sub p{font-size:1rem;max-width:580px}.hero-tag{font-size:.5rem}.hero-form{gap:1rem;padding:1rem 0 1.2rem}.hero-form .field{min-width:220px}.hero-form .btn{padding:.9rem 1rem}.chips{gap:.4rem}.chip{font-size:.49rem;padding:.55rem}.sec-head{padding:6rem 0 2rem}.sec-title{font-size:clamp(3.1rem,10vw,6rem)}.sec-desc{font-size:.9rem}.promise-grid{padding:3.5rem 0 6rem}.promise-sticky{position:relative;top:auto}.note .body{display:block}.note .body small{display:block;margin-top:1rem;text-align:left}.contact-cta a.big{font-size:clamp(3.6rem,11vw,6rem)}.spaco-footer{grid-template-columns:1fr 1fr}.spaco-footer>a{grid-column:1/-1}.spaco-footer>small{grid-column:1/-1}}
@media(max-width:600px){.hero-art{top:2%;height:52%}.hero-title{font-size:24.5vw}.hero-sub{display:block}.hero-sub p{font-size:.94rem}.hero-tag{display:inline-block;margin-top:1rem}.hero-form .field{min-width:100%}.hero-form .btn{width:100%;justify-content:space-between}.chips{max-height:82px;overflow:hidden}.chip{font-size:.46rem}.sec-title{font-size:clamp(2.9rem,11vw,4.8rem)}.bench>.panel:first-child{padding:1.2rem}.panel{padding:1.2rem}.count b{font-size:1.65rem}.promise-sticky .display{font-size:clamp(3.1rem,11vw,4.8rem)}.p-item{grid-template-columns:42px 1fr;gap:.6rem}.plans-doc{padding:1rem}.plans-doc header{display:block}.plans-doc li{font-size:.65rem}.plans-doc li i{font-size:.45rem}.wl{font-size:clamp(4.9rem,17vw,8rem)}.wrow .num{right:4vw}.contact-cta{padding:5rem 5vw 6rem}.contact-cta a.big{font-size:clamp(3.15rem,12vw,5rem)}.contact-mail{line-height:1.8}.spaco-footer{grid-template-columns:1fr}.spaco-footer>a{font-size:18vw}.spaco-footer>small{grid-column:1}}
html[dir="rtl"] .hero-phrase{font-family:'Cairo',var(--body);font-weight:800;letter-spacing:0;line-height:1.3}
html[dir="rtl"] .hero-phrase em{font-family:'Cairo',var(--body);font-style:normal;font-weight:800;letter-spacing:0}
@media(hover:none){.node .acts{opacity:1;transform:none}.note .arrow{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hero-art img,.hero-art-cross{animation:none}.js .lni,.js .rv{transform:none;opacity:1;filter:none}}
html.has-lenis{scroll-behavior:auto}
html[dir="rtl"] .bench>.panel:first-child h4{font-family:'Cairo',var(--body);font-size:1.05rem;letter-spacing:0;line-height:1.5}
html[dir="rtl"] .bench>.panel:first-child h4 i{font-size:.82em}
html[dir="rtl"] .bench .mini-btn{font-family:'Noto Sans Arabic',var(--body);font-size:.9rem;letter-spacing:0}
html[dir="rtl"] .bench .sig{font-family:'Noto Sans Arabic',var(--body);font-size:.86rem;letter-spacing:0}
html[dir="rtl"] .bench #log{font-family:'Noto Sans Arabic',var(--body);font-size:.9rem;line-height:1.8;letter-spacing:0}
html[dir="rtl"] .bench #signals .mono{font-family:'Noto Sans Arabic',var(--body);font-size:.85rem!important}
@media(max-width:760px){.status>span:nth-of-type(3){display:none}}