/* Swiss editorial 12-column grid · monumental condensed grotesk vs. mono metadata · colour comes only from hosted projects */
:root{
  --background:#F2F1ED; --surface:#E5E4DE; --text:#171717; --muted:#777773; --meta:#5E5E5A;
  --border:#CFCEC8; --inverse:#111111; --inverse-text:#F2F1ED; --inverse-muted:#A9A8A2;
  --paper:#FFFFFF; --ok:#2E6B3A; --warn:#8A5A00; --err:#A3271B; --scrim:rgba(17,17,17,.55);
  --f-sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --g:clamp(16px,3.2vw,48px); --cg:clamp(12px,1.6vw,24px); --head-h:56px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--background);color:var(--text);font:400 16px/1.5 var(--f-sans);-webkit-font-smoothing:antialiased}
html.lock,html.lock body{overflow:hidden}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--text);outline-offset:3px}
#main:focus{outline:none}
.skip{position:absolute;left:-9999px;top:8px}
.skip:focus{left:16px;z-index:200;background:var(--inverse);color:var(--inverse-text);padding:8px 12px}
.wrap{padding-inline:var(--g)}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg)}
.mono{font-family:var(--f-mono);font-size:11.5px;line-height:1.45;letter-spacing:.07em;text-transform:uppercase;font-weight:400}
.meta{color:var(--meta)}
p{margin:0}
h1,h2,h3{text-wrap:balance}

/* header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--background);border-bottom:1px solid var(--border);padding-block:14px}
.site-head .g12{align-items:baseline;row-gap:8px}
.brand-wrap{grid-column:1/4;display:flex;align-items:center;gap:12px;min-width:0}
.brand{font-weight:700;font-size:21px;letter-spacing:-.02em;text-decoration:none;font-stretch:92%}
.brand-sub{grid-column:4/7}
.main-nav{grid-column:7/12;display:flex;gap:clamp(12px,2vw,28px);flex-wrap:wrap}
.main-nav a{text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
.main-nav a:hover{border-bottom-color:var(--muted)}
.main-nav a[aria-current="page"]{border-bottom-color:var(--text)}
.lang{grid-column:12/13;justify-self:end;display:flex;gap:6px;align-items:baseline}
.lang button{background:none;border:0;padding:2px;cursor:pointer;color:var(--meta)}
.lang button[aria-pressed="true"]{color:var(--text);text-decoration:underline;text-underline-offset:4px}
@media (max-width:860px){.brand-wrap{grid-column:1/8}.brand-sub{display:none}.lang{grid-column:8/13}.main-nav{grid-column:1/13}}

/* hero */
.hero{padding-block:clamp(14px,2vw,28px) clamp(48px,7vw,104px)}
.hero-meta{padding-bottom:12px}
.hero-meta span:nth-child(1){grid-column:1/7}
.hero-meta span:nth-child(2){grid-column:7/10}
.hero-meta span:nth-child(3){grid-column:10/13;text-align:right}
@media (max-width:700px){.hero-meta span:nth-child(1){grid-column:1/13}.hero-meta span:nth-child(2),.hero-meta span:nth-child(3){display:none}}
.surface{position:relative;height:clamp(280px,50vh,580px);background:var(--surface);overflow:hidden;border:1px solid var(--border);touch-action:pan-y}
.surface canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.halftone{position:absolute;right:0;top:0;width:30%;height:52%;background-image:radial-gradient(var(--text) 0.9px,transparent 1.3px);background-size:7px 7px;opacity:.22;pointer-events:none;-webkit-mask-image:linear-gradient(225deg,#000 10%,transparent 72%);mask-image:linear-gradient(225deg,#000 10%,transparent 72%)}
.surface .tag{position:absolute;pointer-events:none}
.surface .tl{left:12px;top:10px}.surface .br{right:12px;bottom:10px;font-variant-numeric:tabular-nums}
.surface .bl{left:12px;bottom:10px}
.hero-foot{margin-top:clamp(22px,3vw,44px);align-items:end;row-gap:28px}
.hero h1{grid-column:1/10;margin:0;font-weight:500;font-stretch:76%;font-size:clamp(46px,8.6vw,146px);line-height:.86;letter-spacing:-.045em}
.hero h1 span{display:block;color:var(--muted)}
.hero-aside{grid-column:10/13;display:grid;gap:22px;max-width:40ch}
@media (max-width:900px){.hero h1,.hero-aside{grid-column:1/13}}
.cta{display:inline-flex;align-items:center;gap:12px;padding:14px 18px;background:var(--inverse);color:var(--inverse-text);text-decoration:none;justify-self:start}
.cta:hover{background:var(--text)}
.cta .arr,.arr{display:inline-block;transition:transform .25s}
.cta:hover .arr,a:hover>.arr{transform:translate(3px,-3px)}


/* generative hero */
.hero-x{position:relative;height:clamp(560px,86vh,940px);background:#0B0B0C;color:#F2F1ED;overflow:hidden;isolation:isolate}
.hero-x canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:crosshair}
.hero-x canvas.wave-gl{pointer-events:none}
.hero-scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 70% at 0% 100%,rgba(6,6,8,.62) 0%,rgba(6,6,8,.3) 45%,rgba(6,6,8,0) 75%)}
.hero-x-in{position:relative;z-index:1;height:100%;display:grid;grid-template-rows:auto 1fr auto;padding-block:18px clamp(28px,4vw,60px);pointer-events:none}
.hero-x-in a{pointer-events:auto}
.hero-x-top{display:flex;justify-content:flex-end;align-items:center;gap:16px;color:rgba(242,241,237,.82);text-shadow:0 1px 12px rgba(0,0,0,.35)}
.hero-hint{color:rgba(242,241,237,.6)}
.hero-x-foot{align-items:end;row-gap:24px}
.hero-x h1{grid-column:1/9;margin:0;font-weight:500;font-stretch:74%;font-size:clamp(50px,7.1vw,128px);line-height:.86;letter-spacing:-.05em;color:#F7F6F2;text-shadow:0 2px 40px rgba(0,0,0,.35)}
.hero-x h1 span{display:block;color:rgba(242,241,237,.56)}
.hero-x-aside{grid-column:9/13;display:grid;gap:22px;max-width:40ch;color:rgba(242,241,237,.84);text-shadow:0 1px 18px rgba(0,0,0,.5)}
.cta-light{display:inline-flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 18px;background:#F2F1ED;color:#111;text-decoration:none;justify-self:start;text-shadow:none}
.cta-light:hover{background:#FFFFFF}
.cta-light:hover .arr{transform:translate(3px,-3px)}
.cta-light:focus-visible{outline-color:#F2F1ED}
@media (max-width:900px){.hero-x h1,.hero-x-aside{grid-column:1/-1}}
@media (max-width:760px){
  .hero-x{height:max(600px,calc(100svh - var(--head-h)));max-height:860px}
  .hero-x-in{padding-block:14px 28px}
  .hero-x h1{font-size:clamp(44px,13.5vw,70px);line-height:.9}
  .cta-light{justify-self:stretch;min-height:50px}
}
/* header sitting on the dark hero */
.site-head{transition:background-color .25s,color .25s,border-color .25s}
.site-head.on-dark{background:#0B0B0C;color:#F2F1ED;border-bottom-color:#26262A}
.site-head.on-dark .meta,.site-head.on-dark .lang button{color:rgba(242,241,237,.6)}
.site-head.on-dark .lang button[aria-pressed="true"]{color:#F2F1ED}
.site-head.on-dark .site-head.on-dark .menu-btn{border-color:rgba(242,241,237,.7);color:#F2F1ED}
.site-head.on-dark .main-nav a:hover{border-bottom-color:rgba(242,241,237,.6)}
.site-head.on-dark :focus-visible{outline-color:#F2F1ED}

/* sections */
.sec{padding-block:clamp(56px,8vw,120px);border-top:1px solid var(--border)}
.sec-head{align-items:baseline;margin-bottom:clamp(28px,4vw,56px);row-gap:10px}
.sec-head .mono{grid-column:1/4}
.sec-head h2{grid-column:4/11;margin:0;font-weight:500;font-stretch:84%;font-size:clamp(30px,4.4vw,64px);line-height:.95;letter-spacing:-.035em}
.sec-head .more{grid-column:11/13;justify-self:end}
@media (max-width:760px){.sec-head .mono,.sec-head h2,.sec-head .more{grid-column:1/13;justify-self:start}}
.link-mono{text-decoration:none;border-bottom:1px solid var(--text);padding-bottom:2px}

/* windows */
.windows{row-gap:clamp(44px,6vw,96px)}
.win{display:block;text-decoration:none;min-width:0}
.win{grid-column:span 6}
@media (max-width:760px){.win{grid-column:1/-1}}
.win-bar{display:flex;justify-content:space-between;gap:12px;border:1px solid var(--text);border-bottom:0;padding:6px 10px;background:var(--background)}
.win-bar span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shot{position:relative;overflow:hidden;background:var(--surface);aspect-ratio:16/10;max-width:100%}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.win .shot{border:1px solid var(--text)}
.win:hover .shot img,.g-item:hover .shot img{transform:scale(1.025)}
.cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:12px}
.cap-title{font-size:clamp(20px,2vw,28px);font-weight:500;letter-spacing:-.02em;font-stretch:90%;line-height:1.1}

/* manifesto */
.manifesto{background:var(--inverse);color:var(--inverse-text);padding-block:clamp(72px,10vw,160px)}
.manifesto .mono{grid-column:1/13;color:var(--inverse-muted);margin-bottom:clamp(24px,4vw,48px)}
.manifesto h2{grid-column:1/12;font-size:clamp(46px,8.4vw,136px);font-weight:400;font-stretch:72%;line-height:.88;letter-spacing:-.045em;margin:0}
.manifesto h2 span{display:block;color:var(--inverse-muted)}
.manifesto p{grid-column:7/12;margin-top:clamp(28px,4vw,56px);color:var(--inverse-text);font-size:17px;max-width:52ch}
@media (max-width:760px){.manifesto h2,.manifesto p{grid-column:1/13}}

/* process */
.process{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--text)}
.process li{padding:14px 18px 0;border-left:1px solid var(--border);min-width:0}
.process li:first-child{border-left:0;padding-left:0}
.process .top{display:flex;justify-content:space-between}
.process h3{font-size:clamp(22px,2.4vw,36px);font-weight:500;font-stretch:84%;margin:clamp(24px,3vw,44px) 0 10px;letter-spacing:-.025em;line-height:1}
.process p{color:var(--meta);font-size:15px}
.process .out{margin-top:14px}
@media (max-width:860px){.process{grid-template-columns:1fr}.process li{border-left:0;padding:14px 0 22px;border-bottom:1px solid var(--border)}.process h3{margin-top:12px}}

/* contact cta */
.cta-big{display:block;text-decoration:none;font-size:clamp(40px,7.4vw,124px);font-weight:500;font-stretch:78%;letter-spacing:-.045em;line-height:.9;grid-column:1/13}
.cta-big:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}

/* footer */
.site-foot{border-top:1px solid var(--text);padding-block:22px 36px;row-gap:12px}
.site-foot span:nth-child(1){grid-column:1/4}.site-foot span:nth-child(2){grid-column:4/8}.site-foot span:nth-child(3){grid-column:8/11}.site-foot span:nth-child(4){grid-column:11/13;text-align:right}
@media (max-width:760px){.site-foot span:nth-child(n){grid-column:1/13;text-align:left}}

/* page head */
.page-head{padding-block:clamp(28px,5vw,72px) clamp(20px,3vw,40px);align-items:end;row-gap:20px}
.page-title{grid-column:1/9;font-size:clamp(60px,12vw,196px);font-weight:500;font-stretch:70%;line-height:.82;letter-spacing:-.05em;margin:0}
.page-title sup{font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;vertical-align:top;margin-left:.5em;font-stretch:100%;font-weight:400}
.page-intro{grid-column:9/13;color:var(--meta);max-width:44ch}
@media (max-width:860px){.page-title,.page-intro{grid-column:1/13}}

/* works controls */
.controls{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;border-top:1px solid var(--text);border-bottom:1px solid var(--border);padding-block:10px;position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--head-h));background:var(--background);z-index:20}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--border);background:transparent;padding:6px 10px;cursor:pointer}
.chip:hover{border-color:var(--text)}
.chip[aria-pressed="true"]{background:var(--inverse);color:var(--inverse-text);border-color:var(--inverse)}
.chip sup{margin-left:4px;font-size:9px}
.seg{display:inline-flex;border:1px solid var(--text)}
.seg button{border:0;background:transparent;padding:6px 12px;cursor:pointer}
.seg button+button{border-left:1px solid var(--text)}
.seg button[aria-pressed="true"]{background:var(--inverse);color:var(--inverse-text)}
.seg button:disabled{opacity:.35;cursor:not-allowed}

/* gallery */
.gallery{row-gap:clamp(36px,5vw,72px);padding-block:clamp(28px,4vw,56px) clamp(56px,8vw,120px)}
.g-item{display:block;text-decoration:none;min-width:0}
.g-item .shot{border:1px solid var(--border);transition:border-color .2s}
.g-item:hover .shot,.g-item:focus-visible .shot{border-color:var(--text)}
.g-meta{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;margin-top:10px;align-items:baseline}
.g-title{font-size:clamp(18px,1.7vw,24px);font-weight:500;letter-spacing:-.015em;font-stretch:90%;line-height:1.15}
.g-desc{color:var(--meta);font-size:14px;margin-top:4px;max-width:56ch}
.g-item{grid-column:span 4}
@media (max-width:1100px){.g-item{grid-column:span 6}}
@media (max-width:760px){.g-item{grid-column:1/-1}}
.empty{padding-block:80px;color:var(--meta)}

/* index */
.index{list-style:none;margin:0;padding:0 0 clamp(56px,8vw,120px)}
.index a{display:grid;grid-template-columns:4ch minmax(0,1fr) 18ch 6ch 2ch;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--border);text-decoration:none}
.index a:hover,.index a:focus-visible{border-bottom-color:var(--text)}
.i-title{font-size:clamp(22px,3vw,46px);font-weight:500;font-stretch:76%;text-transform:uppercase;letter-spacing:-.015em;line-height:1;transition:transform .3s;min-width:0;overflow-wrap:anywhere}
.index a:hover .i-title{transform:translateX(.25em)}
.index .yr{font-variant-numeric:tabular-nums}
@media (max-width:760px){.index a{grid-template-columns:3ch minmax(0,1fr) 2ch}.index .cat,.index .yr{display:none}}
.peek{position:fixed;right:var(--g);top:40%;width:min(34vw,500px);aspect-ratio:16/10;pointer-events:none;border:1px solid var(--text);opacity:0;transition:opacity .2s;z-index:15;background:var(--surface)}
.peek img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.peek.on{opacity:1}
@media (max-width:900px),(hover:none){.peek{display:none}}

/* prose pages */
.cols{row-gap:28px;padding-block:clamp(24px,4vw,56px)}
.cols .lab{grid-column:1/4}
.cols .body{grid-column:4/11;display:grid;gap:18px;font-size:18px;max-width:62ch}
@media (max-width:860px){.cols .lab,.cols .body{grid-column:1/13}}
.lead-big{font-size:clamp(26px,3.4vw,46px);font-weight:400;font-stretch:88%;letter-spacing:-.025em;line-height:1.1;grid-column:1/11;margin:0}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border-top:1px solid var(--text)}
.facts div{padding:14px 18px 22px 0;border-bottom:1px solid var(--border)}
.facts dd{margin:8px 0 0;font-size:18px}
.facts dt{color:var(--meta)}
.consider{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--text)}
.consider div{padding:16px 20px 26px 0;border-bottom:1px solid var(--border)}
.consider h3{font-size:24px;font-weight:500;font-stretch:88%;margin:22px 0 6px;letter-spacing:-.02em}
.consider p{color:var(--meta)}
@media (max-width:760px){.consider{grid-template-columns:1fr}}

/* forms */
.field{display:grid;gap:6px;min-width:0}
.field>span{font-family:var(--f-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--meta)}
input,select,textarea{font:inherit;padding:10px 12px;border:1px solid var(--border);background:var(--paper);color:var(--text);border-radius:0;width:100%;min-width:0}
input:focus,select:focus,textarea:focus{border-color:var(--text);outline:1px solid var(--text);outline-offset:0}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--text)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form-grid .full{grid-column:1/-1}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
.contact-grid{row-gap:40px;padding-block:clamp(24px,4vw,56px) clamp(56px,8vw,120px)}
.contact-grid form{grid-column:1/8}
.contact-grid aside{grid-column:9/13;display:grid;gap:22px;align-content:start}
@media (max-width:860px){.contact-grid form,.contact-grid aside{grid-column:1/13}}
.copy-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.copy-row strong{font-size:20px;font-weight:500;user-select:all}
.notice{border-left:2px solid var(--text);padding:10px 14px;background:var(--surface);font-size:14px}

/* buttons */
.btn{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;border:1px solid var(--text);background:transparent;padding:9px 13px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.btn:hover{background:var(--surface)}
.btn.primary{background:var(--inverse);color:var(--inverse-text);border-color:var(--inverse)}
.btn.primary:hover{background:var(--text)}
.btn.danger{color:var(--err);border-color:var(--err)}
.btn.sm{padding:5px 8px;font-size:10.5px}
.btn:disabled{opacity:.35;cursor:not-allowed}

/* explorer */
.explorer{position:fixed;inset:0;z-index:60;background:var(--surface);display:grid;grid-template-rows:auto minmax(0,1fr);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.x-bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;padding:9px var(--g);background:var(--background);border-bottom:1px solid var(--text)}
.x-back{justify-self:start;border:0;background:none;cursor:pointer;padding:6px 0}
.x-back:hover{text-decoration:underline}
.x-name{text-align:center;min-width:0}
.x-name strong{display:block;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.x-path{display:flex;gap:8px;justify-content:center;align-items:center;white-space:nowrap;overflow:hidden}
.x-path button{border:0;background:none;cursor:pointer;padding:0 4px;font-family:var(--f-mono)}
.x-path button:disabled{opacity:.3;cursor:default}
.x-path span{overflow:hidden;text-overflow:ellipsis}
.x-tools{justify-self:end;display:flex;gap:8px;align-items:center}
.x-tools .seg button{padding:6px 10px}
.x-tools .sh{display:none}
.vh{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.vh:focus-visible+label{outline:2px solid var(--text);outline-offset:3px}
@media (max-width:760px){.x-bar{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"back tools" "name name"}.x-back{grid-area:back}.x-tools{grid-area:tools}.x-name{grid-area:name}.x-tools .lbl{display:none}.x-tools .sh{display:inline}}
.x-stage{position:relative;overflow:hidden;display:flex;justify-content:center;padding:clamp(10px,1.6vw,22px);background-color:var(--surface);background-image:radial-gradient(var(--border) 1px,transparent 1.2px);background-size:9px 9px}
.x-stage[data-mode="desktop"]{padding:0}
.x-frame{position:relative;width:100%;max-width:100%;height:100%;background:var(--paper);border:1px solid var(--text);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.x-stage[data-mode="desktop"] .x-frame{border:0}
.x-stage[data-mode="tablet"] .x-frame{width:820px}
.x-stage[data-mode="mobile"] .x-frame{width:390px}
.x-frame iframe{width:100%;height:100%;border:0;display:block;background:var(--paper)}
.x-load{position:absolute;inset:0;display:grid;place-items:center;background:var(--background);transition:opacity .3s}
.x-load.done{opacity:0;pointer-events:none}
.x-info{position:absolute;left:var(--g);bottom:var(--g);width:min(380px,calc(100% - 32px));background:var(--background);border:1px solid var(--text);padding:16px;display:grid;gap:10px;z-index:3}
.x-ext{max-width:640px;margin:auto;display:grid;gap:16px;padding:24px;background:var(--background);border:1px solid var(--text)}
.x-ext img{border:1px solid var(--border)}
.x-ext h2{margin:0;font-weight:500;font-stretch:84%;font-size:32px;letter-spacing:-.03em}
.pop{position:absolute;right:var(--g);top:8px;z-index:4;background:var(--background);border:1px solid var(--text);padding:14px;max-width:320px;display:grid;gap:10px;font-size:14px}
.flip{position:fixed;z-index:70;object-fit:cover;object-position:top;pointer-events:none;border:1px solid var(--text);background:var(--surface)}

/* studio */
.studio{padding-block:22px 96px}
.st-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--text);padding-bottom:14px}
.st-head h1{font-size:clamp(36px,5vw,72px);font-stretch:74%;font-weight:500;letter-spacing:-.045em;margin:0;line-height:.9}
.st-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--border)}
.stat{padding:16px 16px 18px 0;border-right:1px solid var(--border);min-width:0}
.stat+.stat{padding-left:16px}
.stat:last-child{border-right:0}
.stat b{display:block;font-size:clamp(28px,3.4vw,48px);font-weight:500;font-stretch:84%;font-variant-numeric:tabular-nums;letter-spacing:-.03em;margin-top:6px;line-height:1}
.stat b.small{font-size:clamp(16px,1.6vw,22px);line-height:1.2}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat{border-right:0;padding-left:0!important;border-bottom:1px solid var(--border)}}
.bar-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-block:18px}
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;min-width:900px}
.tbl th{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:400;color:var(--meta);text-align:left;padding:8px;border-bottom:1px solid var(--text)}
.tbl td{padding:10px 8px;border-bottom:1px solid var(--border);vertical-align:middle;font-size:14px}
.tbl tr:hover td{background:rgba(23,23,23,.025)}
.tthumb{width:96px;height:60px;object-fit:cover;object-position:top;border:1px solid var(--border);display:block;background:var(--surface)}
.ord{white-space:nowrap}
.ord .mono{display:inline-block;width:3ch;font-variant-numeric:tabular-nums}
.acts{display:flex;gap:6px;flex-wrap:wrap}
.pill{display:inline-block;font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;padding:3px 7px;border:1px solid var(--text);white-space:nowrap}
.pill.PUBLISHED{background:var(--inverse);color:var(--inverse-text);border-color:var(--inverse)}
.pill.DRAFT{border-style:dashed;color:var(--meta);border-color:var(--meta)}
.pill.HIDDEN{color:var(--meta);border-color:var(--border);text-decoration:line-through}
.pill.ERROR{color:var(--err);border-color:var(--err)}
.pill.ACTIVE{background:var(--inverse);color:var(--inverse-text)}
.pill.STAGED{border-style:dashed}
.sub{font-size:11px;margin-top:4px}

/* dialogs */
dialog{border:1px solid var(--text);background:var(--background);color:var(--text);padding:0;width:min(1120px,calc(100vw - 24px));max-height:calc(100vh - 24px)}
dialog.narrow{width:min(720px,calc(100vw - 24px))}
dialog::backdrop{background:var(--scrim)}
.dlg{display:grid;grid-template-rows:auto minmax(0,1fr) auto;max-height:calc(100vh - 26px)}
.dlg-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--text)}
.dlg-head h2{margin:0;font-size:20px;font-weight:600;letter-spacing:-.01em}
.dlg-body{padding:18px;overflow:auto}
.dlg-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--border)}
.steps{display:flex;list-style:none;padding:0;margin:0 0 20px;border-bottom:1px solid var(--border);overflow-x:auto}
.steps li{padding:8px 14px 8px 0;margin-right:14px;color:var(--meta);white-space:nowrap;border-bottom:2px solid transparent}
.steps li[aria-current="step"]{color:var(--text);border-bottom-color:var(--text)}
.steps li.done{color:var(--text)}
.src-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:760px){.src-opts{grid-template-columns:1fr}}
.src-opt{border:1px solid var(--border);padding:14px;cursor:pointer;display:grid;gap:6px;align-content:start}
.src-opt:has(input:checked){border-color:var(--text);background:var(--surface)}
.src-opt strong{font-size:18px;font-weight:500}
.src-opt p{color:var(--meta);font-size:14px}
.drop{border:1px dashed var(--muted);padding:26px;display:grid;gap:12px;justify-items:center;text-align:center;margin-top:16px}
.drop,.thumb-edit>div{position:relative}
.drop.over{border-color:var(--text);background:var(--surface)}
.progress{height:2px;background:var(--border);margin-top:14px}
.progress span{display:block;height:100%;width:0;background:var(--text);transition:width .15s}
.checks{list-style:none;margin:0;padding:0;border-top:1px solid var(--text)}
.checks li{display:grid;grid-template-columns:2.4ch 20ch minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:14px}
.checks .ic{font-family:var(--f-mono);font-weight:500}
.checks .ok .ic{color:var(--ok)}.checks .warn .ic{color:var(--warn)}.checks .err .ic{color:var(--err)}
.checks .lb{font-weight:600}
@media (max-width:640px){.checks li{grid-template-columns:2.4ch minmax(0,1fr)}.checks .dt{grid-column:2}}
.verdict{display:flex;gap:24px;flex-wrap:wrap;align-items:baseline;margin-bottom:16px}
.verdict b{font-size:28px;font-weight:500;font-stretch:84%;letter-spacing:-.02em}
.tree{font-family:var(--f-mono);font-size:12px;max-height:220px;overflow:auto;background:var(--surface);padding:10px 12px;margin-top:10px;white-space:pre}
.pv-frame{height:min(60vh,600px);display:flex;justify-content:center;background:var(--surface);padding:10px;margin-top:12px}
.pv-frame .x-frame{transition:width .3s}
.pv-frame[data-mode="tablet"] .x-frame{width:820px}
.pv-frame[data-mode="mobile"] .x-frame{width:390px}
.thumb-edit{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.thumb-edit img{width:240px;aspect-ratio:16/10;object-fit:cover;object-position:top;border:1px solid var(--border)}
.vlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--text)}
.vlist li{display:grid;grid-template-columns:8ch minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}
@media (max-width:640px){.vlist li{grid-template-columns:1fr}}
.login{min-height:70vh;display:grid;place-items:center;padding-block:48px}
.login-box{width:min(440px,100%);display:grid;gap:18px}
.login-box h1{font-size:64px;font-stretch:72%;font-weight:500;letter-spacing:-.045em;margin:0;line-height:.9}
.toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:100;display:grid;gap:8px;width:min(520px,calc(100vw - 32px))}
.toast{background:var(--inverse);color:var(--inverse-text);padding:12px 16px;font-size:14px;display:flex;justify-content:space-between;gap:12px;align-items:center}
.toast a{color:var(--inverse-text)}
.toast.err{border-left:4px solid var(--err)}
/* ---------- header menu (hidden on wide screens) ---------- */
.menu-btn{display:none;border:1px solid var(--text);background:transparent;padding:8px 12px;cursor:pointer;min-height:40px}
.m-nav{display:none}

/* ---------- phone ---------- */
@media (max-width:760px){
  :root{--g:16px;--cg:12px}
  body{font-size:16px}
  .site-head{padding-block:10px}
  .site-head .g12{display:flex;align-items:center;gap:12px}
  .brand-wrap{flex:1;gap:10px}
  .brand{font-size:20px}
    .main-nav{display:none}
  .lang{gap:2px}
  .lang button{min-width:36px;min-height:40px}
  .menu-btn{display:inline-flex;align-items:center}
  html.menu-open,html.menu-open body{overflow:hidden}
  .m-nav:not([hidden]){display:flex;flex-direction:column;justify-content:space-between;position:fixed;left:0;right:0;bottom:0;top:calc(env(safe-area-inset-top,0px) + var(--head-h));background:var(--background);z-index:40;padding:8px 16px calc(24px + env(safe-area-inset-bottom,0px));overflow:auto}
  .m-nav ul{list-style:none;margin:0;padding:0}
  .m-nav li a{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--border);text-decoration:none;font-size:clamp(40px,12vw,56px);font-weight:500;font-stretch:76%;letter-spacing:-.04em;line-height:1}
  .m-nav li a[aria-current="page"]{color:var(--muted)}
  .m-nav-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:24px}

  /* hero */
  .hero{padding-block:12px 48px}
  .surface{height:min(46vh,340px)}
  .surface .bl,.halftone{display:none}
  .hero h1{font-size:clamp(42px,13vw,64px);line-height:.9}
  .hero-aside{gap:18px}
  .cta{justify-self:stretch;justify-content:space-between;min-height:48px}

  /* windows + captions */
  .win-bar .host{display:none}
  .cap{flex-direction:column;align-items:flex-start;gap:4px}
  .windows{row-gap:40px}
  .sec{padding-block:56px}
  .sec-head{margin-bottom:24px}
  .manifesto{padding-block:64px}
  .manifesto h2{font-size:clamp(44px,13vw,64px)}
  .cta-big{font-size:clamp(36px,11vw,56px)}

  /* works controls: one compact sticky row */
  .page-head{padding-block:20px 16px}
  .page-title{font-size:clamp(56px,18vw,88px)}
  .controls{flex-wrap:nowrap;gap:10px;padding-block:8px;margin-inline:-16px;padding-inline:16px}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);padding-right:24px}
  .chips::-webkit-scrollbar{display:none}
  .chip{white-space:nowrap;min-height:38px}
  .seg button{min-height:38px}
  .controls .seg button{padding:6px 10px}
  .gallery{row-gap:36px;padding-block:20px 64px}
  .g-meta{grid-template-columns:auto minmax(0,1fr);gap:4px 10px}
  .g-meta>.mono.meta{grid-column:2}
  .index a{padding:16px 0}

  /* forms + buttons: finger-sized */
  input,select,textarea{font-size:16px;min-height:46px}
  textarea{min-height:120px}
  input[type=checkbox],input[type=radio]{width:20px;height:20px;min-height:0;flex:none;margin-top:2px}
  .btn{min-height:42px;padding:10px 14px}
  .btn.sm{min-height:36px;padding:6px 10px}
  .copy-row strong{font-size:18px;overflow-wrap:anywhere}
  .facts{grid-template-columns:1fr}

  /* explorer bar: back · title · tools on one line */
  .x-bar{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"back name tools";padding:6px 12px;gap:10px}
  .x-back{font-size:20px;min-width:40px;min-height:40px}
  .x-back .lbl,.x-tools .seg{display:none}
  .x-name strong{font-size:14px}
  .x-path{font-size:10px}
  .x-tools{gap:6px}
  .x-stage,.x-stage[data-mode]{padding:0}
  .x-stage .x-frame{width:100%!important;border:0}
  .x-info{left:12px;right:12px;bottom:12px;width:auto}
  .pop{left:12px;right:12px;max-width:none}
  .x-ext{margin:16px;padding:18px}

  /* studio */
  .studio{padding-block:16px 72px}
  .st-head{align-items:stretch;flex-direction:column}
  .st-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .st-tools .seg{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr)}
  .st-tools .seg button{padding:8px 4px}
  .stat:last-child{grid-column:1/-1}
  .bar-row{flex-direction:column;align-items:stretch}
  .bar-row .btn.primary{justify-content:center}
  .tbl-wrap{overflow:visible}
  .tbl,.ctbl{min-width:0!important}
  .tbl thead{display:none}
  .tbl,.tbl tbody{display:block}
  .tbl tr{display:grid;border-bottom:1px solid var(--border);padding:14px 0}
  .tbl td{display:block;border:0;padding:0;min-width:0}
  .tbl tr:hover td{background:none}
  .ptbl tr{grid-template-columns:104px minmax(0,1fr);grid-template-areas:"img name" "img meta" "img status" "ord ord" "acts acts";column-gap:12px;row-gap:4px}
  .ptbl .c-img{grid-area:img}.ptbl .tthumb{width:104px;height:66px}
  .ptbl .c-name{grid-area:name}
  .ptbl .c-cat{grid-area:meta;font-size:13px;color:var(--meta)}
  .ptbl .c-type{display:none}
  .ptbl .c-status{grid-area:status}
  .ptbl .c-ord{grid-area:ord;margin-top:8px}
  .ptbl .c-ord .btn,.ctbl .c-ord .btn,.ctbl .ord .btn{min-width:42px;min-height:40px;justify-content:center}
  .ptbl .c-acts{grid-area:acts;margin-top:6px}
  .ptbl .acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:6px}
  .ptbl .acts .btn{justify-content:center}
  .ctbl tr{grid-template-columns:1fr 1fr;gap:10px}
  .ctbl td:nth-child(1){grid-column:1/-1}
  .ctbl td:nth-child(2)::before{content:"Nome IT";display:block;font:11px var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--meta);margin-bottom:4px}
  .ctbl td:nth-child(3)::before{content:"Nome EN";display:block;font:11px var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--meta);margin-bottom:4px}
  .ctbl td:nth-child(4)::before{content:"Slug · "}
  .ctbl td:nth-child(5)::before{content:"Progetti · ";font-family:var(--f-mono)}
  .ctbl td:nth-child(6){display:flex;align-items:center;gap:8px}
  .ctbl td:nth-child(6)::before{content:"Attiva";font:11px var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--meta)}
  .ctbl td:nth-child(7){justify-self:end}

  /* dialogs become full screen sheets */
  dialog,dialog.narrow{width:100vw;max-width:100vw;height:100%;max-height:100%;margin:0;border:0}
  .dlg{height:100%;max-height:100%}
  .dlg-head{padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px}
  .dlg-head h2{font-size:17px;min-width:0}
  .dlg-body{padding:16px}
  .dlg-foot{padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
  .dlg-foot>div{flex:1;display:grid!important;grid-template-columns:1fr 1fr}
  .dlg-foot>.btn{flex:1;justify-content:center}
  .dlg-foot>span.mono{flex-basis:100%}
  .steps li{padding-right:8px;margin-right:8px}
  .pm-seg{display:none}
  .pv-frame{height:62vh;padding:0}
  .pv-frame .x-frame{width:100%!important}
  .thumb-edit img{width:100%}
  .checks li{grid-template-columns:2.4ch minmax(0,1fr)}
  .vlist .acts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .login-box h1{font-size:56px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}}