/* Master PROJECT template v1 · BUILD_SPEC + VARIANTS.md
 * Top of page = the SITE's shared header (.sx-nav from build/chrome/header.html, solid
 * on non-home pages, styled by /css/sx.css). Below it, the template owns only the
 * project subbar (.psub: client + task tabs) and the client rail. Never add a second
 * top bar, wordmark or burger here.
 */

/* ===== tokens ===== */
:root{
 --page:#0A0A0A; --chrome:#111111; --tile:#161616; --inner:#1F1F1F; --bd:#2A2A2A; --bd-hover:#3A3A3A;
 --h:#FFFFFF; --body:#E6E6E6; --focus:#54CDF2; --live:#D95D51;
 --r:24px; --r-in:16px; --gap:20px; --pad:32px;
 --bar:48px; --rail:68px; /* real chrome; mock/wireframe used 76/84 */
 --col:1240px;
 --h-hero:64px; --h-1:48px; --h-2:44px; --t-body:20px; --t-meta:17px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--page);color:var(--h);font-family:'D-DIN',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
.wf body{visibility:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
img{display:block;max-width:100%}
.cap{text-transform:uppercase;letter-spacing:.14em;font-weight:700}
.ph{display:inline-block;font-size:13px;letter-spacing:.12em;font-weight:700;text-transform:uppercase;border:1px dashed #fff;border-radius:6px;padding:3px 7px;color:#fff;vertical-align:middle;margin-left:6px;max-width:100%;box-sizing:border-box;white-space:normal;overflow-wrap:anywhere}

/* ===== rail (template-owned) ===== */
.rail{position:fixed;left:0;top:64px;bottom:0;transition:top .3s;width:var(--rail);background:var(--chrome);border-right:1px solid var(--bd);z-index:3;display:flex;flex-direction:column;align-items:center}
.rail .lab{height:var(--bar);display:flex;align-items:center;font-size:13px;color:var(--h)}
.rail ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:20px}
.ci{width:44px;height:44px;border-radius:14px;background:var(--tile);border:1px solid var(--bd);display:grid;place-items:center}
.ci:hover{border-color:var(--bd-hover)}
.ci[aria-current]{border-color:#fff}
.ci img{width:28px;height:28px;object-fit:contain}
.ci svg{width:28px;height:auto;max-height:28px}
.ci.wide svg{width:34px}
.ci .mono{width:28px;height:28px;border-radius:50%;border:1px solid #fff;display:grid;place-items:center;font-size:13px;font-weight:700;letter-spacing:.02em;color:#fff}
.ci .mono svg{width:18px;height:auto}
html.sx-nav-hidden .rail{top:0}

/* ===== project subbar: sits UNDER the site header (sticky; top follows .pj-sub in sx.css) ===== */
.psub{position:sticky;top:64px;z-index:4}
.bar{margin-left:var(--rail);height:var(--bar);background:var(--chrome);border-bottom:1px solid var(--bd);display:flex;align-items:center;padding:0 28px;white-space:nowrap;overflow:hidden;min-width:0}
.duo{display:flex;align-items:center;gap:12px;flex:none;min-width:0}
.duo .client{font-size:13px;letter-spacing:.22em;font-weight:700;line-height:1}
.vdiv{width:1px;height:22px;background:var(--bd-hover);margin:0 20px;flex:none}
.tabs{display:flex;gap:22px;height:var(--bar);align-items:stretch;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;flex:1;min-width:0;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.tabs a{position:relative;display:flex;align-items:center;font-size:13px;letter-spacing:.14em;font-weight:700;color:var(--body);flex:none}
.tabs a:hover{color:#fff}
.tabs a[aria-current]{color:#fff}
.tabs a[aria-current]:after{content:"";position:absolute;left:0;right:.14em;bottom:-1px;height:3px;background:#fff;border-radius:2px}
.mtabs{display:none}

/* ===== grid ===== */
.well{margin-left:var(--rail);padding:28px 56px 0}
.col{max-width:var(--col);margin:0 auto}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(220px,auto);gap:var(--gap)}
.t{position:relative;background:var(--tile);border:1px solid var(--bd);border-radius:var(--r);padding:var(--pad) 34px;min-width:0;overflow:visible;container-type:inline-size;container-name:tile}
.t h1,.t h2{overflow-wrap:break-word;word-break:normal;hyphens:manual;white-space:normal;line-height:1.05;text-wrap:balance;color:#fff;font-weight:700;max-width:100%}
.t h1{font-size:var(--h-1)}
.t h2{font-size:var(--h-2)}
/* Show-more: [hidden] must win over display:grid on rows */
[hidden],li[hidden],.rows li[hidden]{display:none!important}
.more[hidden]{display:none!important}
.no-js .more{display:none!important}
.rows-collapse>li:nth-child(n+9){display:none!important}
.rows-collapse.is-open>li:nth-child(n+9){display:block!important}
.t h2{line-height:1.05;font-weight:700;text-transform:uppercase;letter-spacing:.01em;color:var(--h)}
.t .d{font-size:var(--t-body);line-height:1.4;color:var(--body);margin-top:12px}
.t .empty{font-size:var(--t-meta);color:var(--body);margin-top:22px}

/* placement: shared frame + s1..s5 (VARIANTS.md §2) */
.hero{grid-column:1/8;grid-row:1/3;padding:20px;min-height:720px}
.title{grid-column:8/13;grid-row:1/2}
.status{grid-column:8/13;grid-row:2/3}
.s1{grid-column:1/7;grid-row:3/6;min-height:0;align-self:start}
.s2,.s3,.s4,.s5,.title,.status,.meta{align-self:start}
.hero{align-self:stretch}
.s2{grid-column:7/13;grid-row:3/4}
.s3{grid-column:7/13;grid-row:4/5}
.s4{grid-column:7/13;grid-row:5/6}
.s5{grid-column:1/9;grid-row:6/7}
.meta{grid-column:9/13;grid-row:6/7}

/* hero */
.hero figure,.hero .well2{position:absolute;inset:20px;border-radius:var(--r-in);overflow:hidden;background:var(--inner);display:grid;place-items:center}
.hero img,.hero video{width:100%;height:100%;object-fit:cover;object-position:35% 50%}
.hero .frame{border:1px dashed var(--bd-hover);border-radius:12px;display:grid;place-items:center;color:var(--body);font-size:14px;letter-spacing:.14em;font-weight:700;text-transform:uppercase;position:relative}
.hero figcaption,.hero .hcap{position:absolute;left:20px;bottom:20px;background:var(--tile);border:1px solid var(--bd);border-radius:14px;padding:14px 18px;font-size:var(--t-meta);color:var(--body);max-width:calc(100% - 40px);z-index:1}
.hero figcaption b,.hero .hcap b{display:block;color:#fff;font-size:15px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
.live-pill{position:absolute;top:16px;left:16px;z-index:2;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border:2px solid #fff;border-radius:999px;padding:4px 12px;background:var(--inner);color:#fff}
.live-pill .ldot{width:8px;height:8px;border-radius:50%;background:var(--live)}

/* title */
.title h1{line-height:1.05;font-weight:700;text-transform:uppercase;letter-spacing:.01em}
.title .d{margin-top:16px}
.facts{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:20px}
.facts span{font-size:var(--t-meta);font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--bd-hover);border-radius:999px;padding:7px 14px;color:#fff}

/* status */
.st{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:start;gap:4px 14px;border-top:1px solid var(--bd);padding:16px 0}
.st:first-of-type{margin-top:22px}
.st b{font-size:clamp(16px,5cqw,22px);letter-spacing:.05em;text-transform:uppercase;grid-column:2;min-width:0;overflow-wrap:normal;word-break:normal}
.st>span:not(.dot){font-size:var(--t-meta);color:var(--body);line-height:1.35;grid-column:2;min-width:0;overflow-wrap:normal;word-break:normal}
.dot{width:16px;height:16px;border-radius:50%;border:2px solid #fff;flex:none}
.dot.shipped{background:#fff}.dot.progress{background:linear-gradient(90deg,#fff 50%,transparent 50%)}

/* block: rows */
.rows{list-style:none;margin-top:22px}
.rows{overflow-x:hidden}
.rows li{display:block;width:100%;margin:0;padding:0}
.rows li>a,.rows .row-plain{display:grid;width:100%;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 14px;align-items:center;border-top:1px solid var(--bd);padding:14px 12px;margin:0;border-radius:12px;color:inherit}
.rows a:hover{background:var(--inner)}
.rows a[aria-current]{outline:1px solid #fff;outline-offset:-1px;background:#202020}
.rows .tag{font-size:13px;letter-spacing:.12em;font-weight:700;text-transform:uppercase;color:#fff;min-width:2.5em;max-width:100%;white-space:normal}
.rows .label{font-size:clamp(15px,4.5cqw,20px);font-weight:700;color:#fff;line-height:1.25;overflow-wrap:normal;word-break:normal;min-width:0}
.rows .meta{grid-column:2/4;font-size:var(--t-meta);color:var(--body)}
.rows .here{font-size:13px;letter-spacing:.14em;font-weight:700;background:#fff;color:#0A0A0A;border-radius:999px;padding:3px 9px;margin-left:8px;vertical-align:2px}

/* block: chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;min-width:0}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-meta);font-weight:700;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--bd-hover);border-radius:999px;padding:9px 14px;color:#fff;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:normal;hyphens:none}
.chip .dot{width:12px;height:12px;border-width:1.5px}
a.chip:hover{border-color:#fff}

/* block: media */
.media{display:grid;gap:14px;margin-top:20px}
.media figure{margin:0;min-width:0}
.media .box,.media img{width:100%;height:auto;aspect-ratio:var(--ar,16/9);object-fit:cover;border-radius:14px;border:1px solid var(--bd);background:var(--inner)}
.media .box{display:grid;place-items:center;color:var(--body);font-size:14px;letter-spacing:.1em;font-weight:700;text-transform:uppercase;padding:12px;text-align:center}
.media figcaption{font-size:var(--t-meta);color:var(--body);margin-top:10px;line-height:1.3;overflow-wrap:anywhere;word-break:normal;max-width:100%}
.media figcaption .ph,.chip .ph,.rows .ph{margin-left:0;margin-top:4px;display:inline-block;max-width:100%;white-space:normal;letter-spacing:.1em}
.media .box.ph-box{border-style:dashed}

/* block: swatches */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;margin-top:20px}
.swatch{border:1px solid var(--bd);border-radius:12px;overflow:hidden;background:var(--inner)}
.swatch .chip-color{height:72px}
.swatch .info{padding:10px 12px}
.swatch b{display:block;font-size:15px;letter-spacing:.04em}
.swatch span{display:block;font-size:14px;color:var(--body);margin-top:4px}

/* block: compare */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.compare a,.compare .side{border:1px solid var(--bd);border-radius:14px;overflow:hidden;background:var(--inner);min-width:0}
.compare .shot{aspect-ratio:16/10;display:grid;place-items:center;color:var(--body);font-size:14px;letter-spacing:.12em;font-weight:700;text-transform:uppercase}
.compare img{width:100%;aspect-ratio:16/10;object-fit:cover}
.compare .lbl{padding:12px 14px;font-size:var(--t-meta);font-weight:700;text-transform:uppercase;letter-spacing:.08em;border-top:1px solid var(--bd)}

/* meta + footer */
.meta .big{font-size:28px;font-weight:700;margin-top:20px;line-height:1.15}
.meta .d{font-size:var(--t-meta)}
.foot{margin-left:var(--rail);padding:var(--gap) 56px 56px}
.foot .col{display:flex;align-items:flex-end;gap:56px;background:var(--chrome);border:1px solid var(--bd);border-radius:var(--r);padding:44px 40px}
.foot .lock{width:170px;flex:none}
.foot .lock svg{width:100%;height:auto;display:block}
.foot .fn{font-size:var(--t-meta);color:var(--body);line-height:1.5;max-width:760px}
.foot .fn b{color:#fff}
.shot .rail{position:absolute;bottom:auto;height:900px}.shot .psub{position:relative;top:0}

/* tablet */
@media (min-width:768px) and (max-width:1099px){
 .duo .client{font-size:13px;letter-spacing:.16em}
 .bar{padding:0 20px}
 .vdiv{margin:0 14px}
 .tabs{gap:16px}
 .well{padding:20px 20px 0}
 .foot{padding:var(--gap) 20px 40px}
 .t{padding:20px 16px}
 .hero{padding:14px;min-height:760px}
 .hero figure,.hero .well2{inset:14px}
 .grid>.t{grid-column:1/13;grid-row:auto}
 .st{grid-template-columns:20px 1fr;gap:4px 12px;align-items:start}
 .rows li>a,.rows .row-plain{grid-template-columns:auto minmax(0,1fr)}
 .rows .meta{grid-column:2}
 .media{gap:10px}
}
@media (min-width:1100px) and (max-width:1280px){
 .well{padding:24px 32px 0}
 .t{padding:24px 20px}
 .hero{min-height:680px}
}

/* mobile */
@media (max-width:767px){
 :root{--r:20px;--gap:16px;--pad:24px;--bar:48px;--h-1:34px;--h-2:32px;--t-body:17px;--t-meta:17px}
 .rail{display:none}
 .bar{margin-left:0;padding:0 16px}
 .duo{gap:10px}.duo .client{font-size:13.4px;letter-spacing:.24em}
 .bar .vdiv,.bar .tabs{display:none}
 .mtabs{display:flex;height:54px;background:var(--chrome);border-bottom:1px solid var(--bd);padding:0 16px;gap:24px;white-space:nowrap;overflow-x:auto;scrollbar-width:none;z-index:2;-webkit-mask-image:linear-gradient(90deg,#000 84%,transparent)}
 .mtabs a{position:relative;display:flex;align-items:center;font-size:17px;letter-spacing:.1em;font-weight:700;color:var(--body)}
 .mtabs a[aria-current]{color:#fff}
 .mtabs a[aria-current]:after{content:"";position:absolute;left:0;right:.1em;bottom:-1px;height:3px;background:#fff;border-radius:2px}
 .well{margin-left:0;padding:20px 16px 0}
 .grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
 .grid>.t{grid-column:auto;grid-row:auto}
 .t{padding:var(--pad) 22px}
 .hero{padding:14px;aspect-ratio:4/5;min-height:max(640px, calc((100vw - 32px) * 1.6));width:100%}
 .hero figure,.hero .well2{inset:14px;border-radius:12px}
 .hero figcaption,.hero .hcap{left:14px;bottom:14px;right:14px;padding:12px 14px}
 .st{grid-template-columns:20px 1fr;padding:14px 0}
 .st>span:not(.dot){grid-column:2}
 .st b{font-size:20px}
 .rows .label{font-size:18px}
 .media{grid-template-columns:1fr 1fr!important}
 .media figure:first-child{grid-column:span 2}
 .compare{grid-template-columns:1fr}
 .foot{margin-left:0;padding:var(--gap) 16px 40px}
 .foot .col{flex-direction:column;align-items:flex-start;gap:28px;padding:30px 22px}
 .foot .lock{width:148px}
}

@media (prefers-reduced-motion:reduce){
 .ci,.tabs a,.rows a,.chip,.more{transition:none!important;transition-duration:0s!important}
}
.ci,.tabs a,.rows a,.chip,.more{transition:border-color 160ms,background 160ms,color 160ms}
.more{display:inline-block;margin-top:16px;background:transparent;border:1px solid var(--bd-hover);border-radius:12px;color:#fff;font:inherit;font-size:var(--t-meta);font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:10px 16px;cursor:pointer}
.more:hover{border-color:#fff}
.meta-wide{grid-column:1/13}
@media (max-width:767px){.meta-wide{grid-column:auto}}

.example-flag{display:inline-block;margin-top:12px;font-size:13px;letter-spacing:.14em;font-weight:700;text-transform:uppercase;border:1px dashed #fff;border-radius:6px;padding:3px 7px}

@container tile (max-width: 280px){
 .media{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .media figure:first-child{grid-column:auto}
 .chip{padding:7px 10px;letter-spacing:.03em}
}
/* keep s1 from outgrowing hero on desktop: cap list height */
@media (min-width:768px){
 .s1 .rows{max-height:480px;overflow:auto;scrollbar-width:thin}
 .s1 .media{max-height:480px;overflow:auto}
}
@media (max-width:767px){
 .s1 .rows{max-height:360px;overflow:auto;scrollbar-width:thin}
 .s1 .media{max-height:360px;overflow:auto}
 .s3 .media,.s5 .media{max-height:320px;overflow:auto}
 .s4 .media{max-height:360px;overflow:auto}
}

/* ===== site header coexistence =====
 * sx.css restyles h1/h2/h3 on every page with .sx-nav (Orbitron, clamp sizes, weight 900).
 * Template tile headings keep their own type: 48/44px desktop, 34/32px mobile, D-DIN 700.
 * Selectors carry #grid so they outrank sx.css's body:has(.sx-nav):not(:has(#auction-timer)) rules. */
html[data-project-type] body #grid .t h1,html[data-project-type] body #grid .t h2{font-family:'D-DIN',system-ui,sans-serif;font-weight:700;line-height:1.05;letter-spacing:.01em;overflow-wrap:break-word;text-wrap:balance}
html[data-project-type] body #grid .t h1{font-size:var(--h-1)}
html[data-project-type] body #grid .t h2{font-size:var(--h-2)}
@media (prefers-reduced-motion:reduce){.rail{transition:none}}