:root{
  --ink:#000; --panel:#0C0C0C; --panel-2:#141414; --line:#262626;
  --stage:#E9E8E5;   /* the product stage: light, so every colourway shows its own edge */
  --gold:#C7A54A; --gold-dim:#8E7533; --text:#F2EFE9; --muted:#9A948B;
  --serif:'Times New Roman',Times,'Noto Serif',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --pad:clamp(20px,5vw,64px); --max:1180px;
}

/* The hidden attribute must win over any author display rule. Without this,
   .modal{display:grid} and .t-row{display:flex} keep [hidden] elements on screen —
   which left the Creator/Business sheet open on page load. */
[hidden]{display:none!important}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.08}

.eyebrow{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.sub{color:var(--muted);max-width:62ch}

/* ------------------------------------------------------------------- chrome */
.bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px var(--pad);background:rgba(0,0,0,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.brand{font-family:var(--serif);font-size:20px;letter-spacing:.16em;color:var(--gold);white-space:nowrap}
.bar-nav{display:flex;gap:22px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bar-nav a{white-space:nowrap}
.bar-nav a:hover{color:var(--text)}
.bar-nav .here{color:var(--gold)}
/* On a phone the three uppercase links cannot shrink below their own text, so the
   header pushed the whole page sideways. Tighten the nav and drop the marker for
   the page you are already on. */
@media(max-width:720px){
  .bar{gap:10px}
  .brand{font-size:17px;letter-spacing:.12em}
  .bar-nav{gap:14px;font-size:11px;letter-spacing:.08em}
  .bar-nav .here{display:none}
}

main{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.section{padding:56px 0;border-top:1px solid var(--line)}
.section h2{font-size:clamp(26px,4vw,38px);margin-bottom:8px}

/* --------------------------------------------------------------------- hero */
.hero{padding:clamp(40px,7vw,80px) 0 8px}
.hero h1{font-size:clamp(42px,9vw,78px);margin:14px 0 18px}
.lede{color:var(--muted);font-size:clamp(16px,2.1vw,19px);max-width:56ch}

.notice{margin:30px 0 26px;padding:22px;border:1px solid var(--gold);border-radius:2px;max-width:640px}
.notice-head{color:var(--gold);font-size:18px;font-weight:600;margin-bottom:6px}
.notice p+p{color:var(--muted)}
.notice .btn{margin-top:16px}

.badges{list-style:none;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:6px}
.badges li{border-top:1px solid var(--line);padding-top:12px}
.badges strong{display:block;font-size:15px}
.badges span{color:var(--muted);font-size:14px}

/* ------------------------------------------------------------------ buttons */
.btn{border:1px solid var(--line);background:transparent;color:var(--text);padding:11px 20px;border-radius:2px;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;transition:.18s}
.btn:hover{border-color:var(--gold);color:var(--gold)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#0A0A0A;font-weight:600}
.btn.gold:hover{background:#D8B65C;border-color:#D8B65C;color:#0A0A0A}
.btn.ghost{color:var(--muted)}
.btn.wide{width:100%;margin-top:14px}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ------------------------------------------------------------------ catalog */
.chips{display:flex;gap:10px;overflow-x:auto;padding-bottom:18px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border:1px solid var(--line);background:transparent;color:var(--muted);
  padding:10px 22px;border-radius:2px;font-size:14px}
.chip[aria-selected="true"]{border-color:var(--gold);color:var(--gold)}

.chip.sm{padding:7px 14px;font-size:11.5px;letter-spacing:.1em}
/* Family and product chips wrap rather than scroll. The product row is the
   configurator's primary control: a third tab parked off the right edge of a
   scroller is a tab most people never find. */
.chips.fams{flex-wrap:wrap;overflow-x:visible;gap:7px}
#prodTabs{flex-wrap:wrap;overflow-x:visible}
/* size to content and wrap only when they genuinely do not fit: growing them to
   fill the row is what pushed the third product onto a line of its own */
#prodTabs .chip{flex:0 1 auto;text-align:center}

/* ------------------------------------------------------------- configurator */
.cfg{display:grid;gap:26px;grid-template-columns:1fr;margin-top:22px}
@media(min-width:900px){.cfg{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start}}
.cfg-view{min-width:0;position:sticky;top:78px}
@media(max-width:899px){.cfg-view{position:static}}
/* The product stage is light, like every blanks supplier's. On the near-black
   panel this used to sit on, a BLACK tee lost its own silhouette and a WHITE one
   blew out to a featureless slab — the garments were fine, the stage was not. */
.stage-wrap{background:var(--stage);border:1px solid rgba(255,255,255,.10);border-radius:2px;padding:10px}
#stage{display:block;width:100%;height:auto;aspect-ratio:1;background:var(--stage);border-radius:2px}
.stage-cap{color:#6E6C68;font-size:12px;letter-spacing:.04em;margin-top:9px;text-align:center;min-height:1.2em}

.art{margin-top:14px}
.art .btn.wide{margin-top:0}
.art-note{color:var(--muted);font-size:12.5px;margin-top:9px;line-height:1.5}
.art-note.warn{color:#D8A24C}
.btn.link{border:0;background:none;color:var(--muted);padding:8px 0;font-size:11.5px;text-decoration:underline}
.btn.link:hover{color:#C96A6A}

.cfg-opts{min-width:0}
.opt{margin-bottom:22px}
.opt-k{display:block;font-size:11px;letter-spacing:.16em;color:var(--muted);margin-bottom:10px}
.opt-v{color:var(--gold);letter-spacing:.06em;margin-left:8px}
.opt .chips{padding-bottom:12px}
.cfg-opts select{background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  padding:9px 11px;border-radius:2px;font:inherit;font-size:14px;flex:1 1 150px;min-width:0}
.cfg-opts .sizes input{background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  border-radius:2px;font:inherit;font-size:14px}
/* Price per size, above its box. The extended sizes carry the mill's upcharge,
   so they are marked rather than left to look like a typo. */
.szp{display:block;font-size:10.5px;font-variant-numeric:tabular-nums;color:#7BBF8A;
  margin-bottom:4px;white-space:nowrap}
.sz.ext .szp{color:var(--gold)}

/* Named chips, the way a blanks supplier lists a palette. 78 colourways still
   have to stay inside the panel, so the grid scrolls and the family tabs narrow
   it. The name is set in ink chosen per chip for contrast, from the script. */
.sws{display:grid;gap:5px;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  max-height:272px;overflow-y:auto;padding-right:4px;scrollbar-width:thin}
.sw{min-height:34px;border:1px solid rgba(255,255,255,.14);border-radius:2px;
  font-size:9.5px;font-weight:600;letter-spacing:.05em;line-height:1.15;padding:4px 5px;
  display:grid;place-items:center;text-align:center;word-break:break-word;transition:.12s;
  /* a touch of edge definition for the dozen mid-tones that sit near 4:1 */
  text-shadow:0 0 2px rgba(0,0,0,.28)}
.sw[style*="#141414"]{text-shadow:0 0 2px rgba(255,255,255,.35)}
.sw:hover{border-color:var(--gold-dim)}
.sw.on{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
/* Heathers are a yarn, not a flat colour — mark them so the chip does not lie. */
.sw.heather{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.14) 0 2px,transparent 2px 4px)}

.cfg-foot{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:16px}
.cfg-price span{display:block;color:var(--muted);font-size:11px;letter-spacing:.16em}
.cfg-price strong{font-size:26px;color:var(--gold);font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- estimator */
.est-build{min-width:0}
.est{display:grid;gap:22px;grid-template-columns:1fr;margin-top:22px}
@media(min-width:900px){.est{grid-template-columns:1.6fr 1fr;align-items:start}}

.line{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:16px;margin-bottom:14px}
.ltop{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px}
.line select,.line input{background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  padding:9px 11px;border-radius:2px;font:inherit;font-size:14px}
.ltop select{flex:1 1 150px;min-width:0}
.sizes{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(60px,1fr))}
/* Once the estimator splits into two columns the panel is wide enough to carry
   the whole size run on one row. --n is the real size count, set by the script,
   so headwear (one size) and apparel (nine) both lay out correctly. */
@media(min-width:960px){.sizes{grid-template-columns:repeat(var(--n,9),minmax(0,1fr));gap:6px}}
.sizes:has(> .sz:only-child){grid-template-columns:96px}
.sz{min-width:0}
.sz input{width:100%;min-width:0;text-align:center;padding:9px 2px;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.sz input::-webkit-outer-spin-button,.sz input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sz label{display:block;font-size:10.5px;letter-spacing:.08em;white-space:nowrap;color:var(--muted);margin-bottom:4px}
.lfoot{display:flex;gap:14px;align-items:center;justify-content:space-between;margin-top:12px;flex-wrap:wrap}
.lfoot .lt{color:var(--gold);font-weight:600}
.rm{background:none;border:0;color:var(--muted);font-size:13px}
.rm:hover{color:#C96A6A}

.est-total{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:20px;position:sticky;top:76px}
.t-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:15px;border-bottom:1px solid var(--line)}
.t-row.bulk strong{color:var(--gold)}
.t-row.grand{border-bottom:0;font-size:20px;padding-top:14px}
.t-row.grand strong{font-family:var(--serif);font-size:26px}
.t-state{color:var(--muted);font-size:13px;margin:12px 0 8px}
.t-state.on{color:var(--gold)}
.t-fine{color:#6F6A63;font-size:11.5px;margin-top:12px;line-height:1.5}
.meter{height:3px;background:var(--panel-2);border-radius:2px;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--gold);transition:width .3s}

/* -------------------------------------------------------------------- tiers */
.tier-cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));margin-top:22px}
.tier{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:22px}
.tier.hi{border-color:var(--gold)}
.tier-k{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.tier-v{font-family:var(--serif);font-size:30px;margin:8px 0 14px}
.tier.hi .tier-v{color:var(--gold)}
.tier-v span{font-family:var(--sans);font-size:14px;color:var(--muted)}
.tier ul{list-style:none;display:grid;gap:7px;font-size:14px;color:var(--muted)}
.tier li::before{content:'—';color:var(--gold);margin-right:9px}

/* -------------------------------------------------------------------- steps */
.steps{list-style:none;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));margin-top:22px}
.steps li{border-top:1px solid var(--line);padding-top:14px}
.steps span{color:var(--gold);font-family:var(--serif);font-size:13px;letter-spacing:.2em}
.steps strong{display:block;margin:5px 0 5px;font-size:16px}
.steps p{color:var(--muted);font-size:14px}

.foot{border-top:1px solid var(--line);margin-top:24px;padding:36px var(--pad);text-align:center;color:var(--muted);font-size:13px}
.foot strong{color:var(--text);letter-spacing:.1em}

/* ------------------------------------------------------------------- modal */
.modal{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.84);backdrop-filter:blur(5px);
  display:grid;place-items:end center;padding:0}
@media(min-width:760px){.modal{place-items:center}}
.sheet{position:relative;width:100%;max-width:640px;max-height:92vh;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:4px 4px 0 0;padding:26px var(--pad) 32px}
@media(min-width:760px){.sheet{border-radius:3px;padding:30px 34px 34px}}
.sheet h3{font-size:28px;margin:10px 0 6px}
.x{position:absolute;top:12px;right:16px;background:none;border:0;color:var(--muted);font-size:28px;line-height:1}
.x:hover{color:var(--text)}
.progress{height:2px;background:var(--panel-2);margin:18px 0 20px;border-radius:2px;overflow:hidden}
.progress i{display:block;height:100%;width:33%;background:var(--gold);transition:width .3s}

.types{display:grid;gap:14px}
@media(min-width:620px){.types{grid-template-columns:1fr 1fr}}
.type{text-align:left;background:var(--panel-2);border:1px solid var(--line);border-radius:3px;padding:20px;transition:.18s}
.type:hover,.type[aria-pressed="true"]{border-color:var(--gold)}
.type h4{font-family:var(--serif);font-size:24px;font-weight:400;color:var(--gold)}
.type .tag{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:3px 0 9px}
.type p{color:var(--muted);font-size:14px}

.fields{display:grid;gap:15px}
@media(min-width:620px){.fields{grid-template-columns:1fr 1fr}.f.wide{grid-column:1/-1}}
.f label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.f label .req{color:var(--gold)}
.f input,.f select{width:100%;background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  padding:11px 12px;border-radius:2px;font:inherit;font-size:15px}
.f input:focus,.f select:focus,.line input:focus,.line select:focus{outline:0;border-color:var(--gold)}
.f .help{color:#6F6A63;font-size:12px;margin-top:5px}
.multi{display:flex;flex-wrap:wrap;gap:8px}
.multi button{border:1px solid var(--line);background:var(--panel-2);color:var(--muted);
  padding:8px 14px;border-radius:2px;font-size:13.5px}
.multi button[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}
.actions{display:flex;gap:12px;justify-content:flex-end;margin-top:22px}
.err{color:#D98080;font-size:13.5px;margin-top:14px}

.done{text-align:center;padding:8px 0 4px}
.done .mark{font-size:40px;color:var(--gold);font-family:var(--serif)}
.offers{list-style:none;display:grid;gap:11px;margin-top:20px;text-align:left}
.offers li{border:1px solid var(--line);border-left:2px solid var(--gold);border-radius:2px;padding:13px 15px}
.offers strong{display:block;font-size:15px}
.offers span{color:var(--muted);font-size:13.5px}

/* real garment art from the Studio renderer, and the shipping line */
.thumb img.shot{width:100%;height:100%;object-fit:contain;padding:8%}
.card .desc{color:var(--muted);font-size:12.5px;margin-top:3px}
.sw{cursor:pointer;padding:0}
.t-ship{color:var(--gold);font-size:12.5px;margin-top:6px}
.thumb .noart{width:72%;height:72%;border-radius:2px;border:1px solid #3B3B3B}