/* Shared by every RADAR page: tokens, reset, header, garments, footer and the concept bag. */
:root{--paper:#000;--ink:#f1f1f1;--muted:#999;--rule:#292929;--gutter:clamp(20px,4vw,64px);--mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;--sans:'Helvetica Neue',Helvetica,Arial,sans-serif}
:root[data-theme=light]{--paper:#f3f2ee;--ink:#141414;--muted:#6b6b6b;--rule:#d9d8d3}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;-webkit-font-smoothing:antialiased}body.locked{overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button{background:none;border:0;padding:0}button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:5px}img{display:block;width:100%;height:100%;object-fit:cover}::selection{background:#ddd;color:#000}.mono{font:11px/1.55 var(--mono);text-transform:uppercase;letter-spacing:.035em}.muted{color:var(--muted)}.wrap{padding-inline:var(--gutter)}
[data-theme=light] ::selection{background:#222;color:#f3f2ee}

/* Header and navigation */
.header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-top:30px;position:relative;z-index:1}.brand{display:block;width:136px;height:auto;grid-column:2;grid-row:1;justify-self:center}.brand img{height:auto;object-fit:contain}.nav{display:flex;grid-column:3;grid-row:1;justify-self:end;gap:32px;font:11px var(--mono);letter-spacing:.06em}.nav a{padding:10px 0}.nav a:hover{opacity:.6}.menu-button{display:none}.theme-toggle{font:11px var(--mono)}
@media(max-width:1000px){.nav{gap:22px}}@media(min-width:701px) and (max-width:900px){.nav{grid-column:1/-1;grid-row:2;justify-self:center;margin-top:18px;gap:28px}}
@media(max-width:700px){.header{padding-top:18px}.brand{width:108px}.menu-button{display:block;font:11px var(--mono);z-index:3;grid-column:3;grid-row:1;justify-self:end}.nav{display:none;position:absolute;top:88px;justify-self:stretch;left:var(--gutter);right:var(--gutter);background:#000;z-index:2;border-top:1px solid #444;padding:20px 0}.nav.open{display:flex;flex-direction:column;gap:8px}.nav a{font-size:14px;padding:10px 0}}
[data-theme=light] .brand img{filter:invert(.92)}
@media(max-width:700px){[data-theme=light] .nav{background:var(--paper);border-top-color:#c9c8c3}}

/* Dialogs */
dialog{border:0;padding:0;background:var(--paper);color:var(--ink);width:min(1160px,calc(100% - 64px));max-height:90svh}dialog::backdrop{background:rgba(0,0,0,.75)}.detail-bar{display:flex;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--rule);align-items:center}.close{font-size:12px}
@media(max-width:700px){.detail-bar{padding:16px}dialog{width:calc(100% - 24px);max-height:92svh}}
[data-theme=light] dialog::backdrop{background:rgba(20,20,20,.38)}

/* Garments: illustrative tees with soft light behind them. */
.garment-space{height:clamp(240px,34svh,410px);position:relative;display:flex;align-items:center;justify-content:center;transition:background .3s}.signal-tag{position:absolute;top:0;left:0;color:#777;font:9px var(--mono);letter-spacing:.05em}
.concept-tee{position:relative;width:88%;height:90%;max-width:320px;background:linear-gradient(95deg,#b8b5ad,#e3dfd4 22%,#eee9df 48%,#c5c2ba 78%,#e2ded3);clip-path:polygon(23% 6%,38% 0,43% 6%,57% 6%,62% 0,77% 6%,100% 22%,88% 42%,76% 32%,77% 100%,23% 100%,24% 32%,12% 42%,0 22%)}.concept-tee:before{content:'';position:absolute;left:39%;top:0;width:22%;height:10%;border:3px solid #aaa59b;border-radius:0 0 50% 50%;background:#000}.concept-tee:after{content:'';position:absolute;bottom:2%;left:24%;right:24%;border-bottom:1px solid #aaa;opacity:.35}.concept-tee.dark{background:linear-gradient(95deg,#111,#292929 25%,#383838 48%,#191919 78%,#282828)}.concept-tee.dark:before{border-color:#444}.concept-tee img{position:absolute;top:27%;left:28%;width:44%;height:44%;object-fit:contain;mix-blend-mode:multiply;pointer-events:none}.concept-tee.dark img{mix-blend-mode:normal}.piece-caption{display:flex;justify-content:space-between;gap:16px;padding:18px 4px 0;font-size:14px;line-height:1.4}.piece-caption .mono{font-size:10px;white-space:nowrap;color:#aaa}.piece-caption del{color:#666;display:block;font-size:9px}.piece-meta{font:9px var(--mono);color:#777;margin:8px 4px 0}
/* Soft light separates the clothing from the distant radar field. */
.garment-space{isolation:isolate;background:none}
.garment-space:before{content:'';position:absolute;inset:-6% -8% -3%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 47%,#292929 0%,#202020 29%,#111 49%,rgba(0,0,0,0) 73%);opacity:var(--focus-light,1);transition:opacity .25s}
/* Feather the light to an oval inside its own box, so it never ends in a hard edge on any card or stage. */
.garment-space:before{inset:-10% -12% -8%;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent);mask-image:radial-gradient(closest-side,#000 62%,transparent)}
.garment-space:has(.concept-tee.dark):before{background:radial-gradient(ellipse at 50% 47%,#505050 0%,#404040 27%,#252525 44%,#111 58%,rgba(0,0,0,0) 76%)}
.concept-tee.dark{background:linear-gradient(95deg,#1c1c1c,#303030 25%,#424242 48%,#252525 78%,#333)}
.signal-tag{color:#aaa;z-index:1}
.piece-caption{position:relative;isolation:isolate;align-items:baseline;padding:17px 4px 0;border-top:1px solid #ffffff21;color:#f2f2ee}
.piece-caption:before{content:'';position:absolute;inset:0 -6px -24px;background:#000;z-index:-1;pointer-events:none}
.piece-caption .mono{font-size:11px;color:#ddd}
.piece-caption del{color:#999}
.piece-meta{position:relative;color:#aaa;line-height:1.5}
@media(prefers-reduced-motion:reduce){.garment-space:before{transition:none}}
[data-theme=light] .signal-tag{color:#666}
/* Chalk garments now need the stronger backdrop; washed black separates on its own. */
[data-theme=light] .garment-space:before{background:radial-gradient(ellipse at 50% 47%,#d2d1cb 0%,#d9d8d2 29%,#e5e4df 49%,rgba(243,242,238,0) 73%)}
[data-theme=light] .garment-space:has(.concept-tee.dark):before{background:radial-gradient(ellipse at 50% 47%,#e3e2dd 0%,#e9e8e3 35%,rgba(243,242,238,0) 70%)}
[data-theme=light] .piece-caption{border-top-color:rgba(0,0,0,.14);color:var(--ink)}
[data-theme=light] .piece-caption:before{background:var(--paper)}
[data-theme=light] .piece-caption .mono{color:#2a2a2a}
[data-theme=light] .piece-caption del{color:var(--muted)}
[data-theme=light] .piece-meta{color:#5c5c5c}

/* Footer and concept bag */
.field-footer{padding:50px var(--gutter) 30px;border-top:1px solid #333;display:flex;justify-content:space-between;gap:25px;font:10px/1.6 var(--mono);color:#888}.field-footer a{color:#ddd;text-decoration:underline;text-underline-offset:4px}.bag-items{padding:25px;max-height:65svh;overflow:auto}.bag-row{display:flex;justify-content:space-between;gap:30px;padding:18px 0;border-bottom:1px solid #333;font-size:14px}.bag-note{padding:0 25px 25px;color:#999;font-size:12px}.bag-open{font:11px var(--mono)}
@media(max-width:700px){.field-footer{flex-direction:column;padding-bottom:40px}}
[data-theme=light] .field-footer{border-top-color:var(--rule);color:var(--muted)}
[data-theme=light] .field-footer a{color:#222}
[data-theme=light] .bag-row{border-bottom-color:var(--rule)}
[data-theme=light] .bag-note{color:var(--muted)}
.bag-row{align-items:center}.bag-row a{flex:1}.bag-row a:hover{text-decoration:underline;text-underline-offset:4px}
.bag-size{color:var(--muted);min-width:64px}
.bag-qty{display:flex;align-items:center;gap:10px}.bag-qty button{width:26px;height:26px;border:1px solid var(--rule);font:12px var(--mono)}.bag-qty button:hover{border-color:var(--ink)}
.bag-total{display:flex;justify-content:space-between;padding-top:18px}
@media(max-width:700px){.bag-row{flex-wrap:wrap;gap:12px 20px}.bag-row a{flex-basis:100%}}
/* A brief radar ping on the bag counter when a piece is added. */
.bag-open{position:relative}.bag-open.pinged:after{content:'';position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border:1px solid currentColor;border-radius:50%;animation:bag-ping .7s ease-out}
@keyframes bag-ping{from{transform:scale(.4);opacity:.9}to{transform:scale(5);opacity:0}}
@media(prefers-reduced-motion:reduce){.bag-open.pinged:after{animation:none}}

/* Page to page: the clicked garment morphs into the product stage (cross-document view transitions). */
@view-transition{navigation:auto}
::view-transition-group(piece){animation-duration:.5s;animation-timing-function:cubic-bezier(.3,.7,.2,1)}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* Utilities and the breadcrumb used by the product and catalogue pages. */
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.crumb{grid-column:1;grid-row:1;justify-self:start;font:11px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:10px 0}
.crumb:hover{opacity:.6}
@media(max-width:700px){.crumb{font-size:10px}.crumb-trail{display:none}}
.nav a[aria-current=page]{text-decoration:underline;text-underline-offset:5px}
.stress-badge{position:fixed;left:12px;bottom:12px;z-index:60;display:flex;gap:12px;align-items:center;padding:7px 10px;background:var(--ink);color:var(--paper);font:10px var(--mono);letter-spacing:.05em;text-transform:uppercase}
.stress-badge button{text-decoration:underline;text-underline-offset:3px;font:inherit;letter-spacing:inherit;text-transform:inherit}

/* Data couldn't be loaded: a calm explanation and a retry, in place of the missing content. */
.load-error{grid-column:1/-1;min-height:40svh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px;padding:40px var(--gutter)}
.load-error h2{font-size:clamp(28px,3.4vw,48px);font-weight:400;letter-spacing:-.04em;margin:0}
.load-error p{color:var(--muted);margin:0 0 6px}
.load-retry{border:1px solid var(--ink);padding:12px 16px;font:11px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.load-retry:hover{background:var(--ink);color:var(--paper)}
.wrap .load-error{padding-inline:0}