/* UNIT-100 Tech Pack section, v4 design.
   Source: docs/design/2026-10-28-tech-pack-hub-v4/hub.html (owner review layer not shipped).
   One stylesheet for the hub (tpRenderPage full mode: black/white bands) and for the
   garment, glossary and example pages (.tp-page: one white band).

   Spec class -> shipped class
     .wrap .band .band.dark .band.mist  -> .tp-wrap .tp-band .tp-band--dark .tp-band--mist
     .h2 .lede .num, td.n                -> .tp-h2 .tp-lede .tp-num
     .pill.solid|ghost|ink|line          -> .tp-pill.tp-pill--solid|--ghost|--ink|--line
     .actions .pack-actions              -> .tp-actions
     .slot  /  .slot.empty               -> .tp-media  /  .tp-media.tp-media--flat (flat on mist)
     .hero .hero-bg p.sub .facts         -> .tp-hero .tp-hero__bg .tp-hero__sub .tp-hero__facts
     .spec .photo .cap                   -> .tp-spec .tp-spec__photo .tp-spec__cap
     svg.dims .d .t .lbl                 -> svg.tp-dims .tp-dims__line .tp-dims__dot .tp-dims__lbl
     .ticker .track                      -> .tp-ticker .tp-ticker__track (.tp-ticker__set: one copy of the items)
     .builder                            -> .tp-builder
     .bstep header .k h3 .state .how .ctl-> .tp-bstep .tp-bstep__head .tp-bstep__num h3 .tp-bstep__state .tp-bstep__how .tp-bstep__ctl
     .bstep.active|done|locked           -> .tp-bstep--active|--done|--locked
     .gpick .n .sub                      -> .tp-gpick .tp-gpick__name .tp-gpick__sub
     .gpick label.more .plus .t .go      -> .tp-gpick__more .tp-gpick__plus .tp-gpick__text .tp-gpick__go
     .vpick .fl .m .p                    -> .tp-vpick .tp-vpick__flats .tp-vpick__meta .tp-vpick__price
     .fitrow .lab                        -> .tp-fitrow .tp-fitrow__label
     .opts .opts.row .p                  -> .tp-opts .tp-opts--row .tp-opts__price
     .art .board .m .logo .spec-list .req-> .tp-art .tp-art__board .tp-art__measure .tp-art__logo .tp-art__list .tp-art__req
     .gate .fine                         -> .tp-handoff .tp-handoff__fine (dark box at builder step 4)
     .pack .top .thumb .id .gname        -> .tp-pack .tp-pack__top .tp-pack__thumb .tp-pack__id .tp-pack__name
     .pack .price .lt .body .ans         -> .tp-pack__price .tp-pack__lead .tp-pack__body .tp-pack__ans
     .pack .bar .count .tick             -> .tp-pack__bar .tp-pack__count .tp-pack__tick
     .pages .pgl                         -> .tp-pages .tp-pgl
     .cost .cost-note                    -> .tp-cost .tp-note
     .factory .faq                       -> .tp-factory .tp-faq
     .close .contact                     -> .tp-close .tp-close__bg .tp-close__contact
     .site-head .logo .nav .foot         -> .tp-header .tp-logo .tp-nav .tp-footer
   States toggled by script: .tp-on (spec card rows and dimension groups), .tp-ok (pack parts),
   .tp-bstep--active / --done.
   Type: Inter ships in weight 400 only, so anything bold uses the Arial display stack. */

@font-face{font-family:Inter;src:url(/uploads/performance-20261025/inter.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  --black:#000; --ink:#0a0a0a; --paper:#fff; --mist:#f5f5f3; --stone:#d9d9d6;
  --text:#1d1d1f; --muted:#5f5f5c; --muted-d:#a9a9a4; --line:#e2e2df; --line-d:#262626;
  --orange:#e95a21; --orange-hot:#ff5a1f; --orange-wash:#fff3ed;
  --display:Arial,"Helvetica Neue",Helvetica,sans-serif;
  --body:Inter,Arial,Helvetica,sans-serif;
  --wrap:1240px;
  color-scheme:light;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-color:#8a8a86 var(--mist)}
body{margin:0;background:var(--paper);color:var(--text);font:400 16px/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
::selection{background:var(--orange);color:#fff}
a{color:inherit;text-decoration-color:var(--orange);text-decoration-thickness:.08em;text-underline-offset:.2em}
a:not([class]):hover{color:var(--orange)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.04;margin:0;text-wrap:balance}
p{margin:0}
b,strong{font-family:var(--display);font-weight:700}
button,input{font:inherit}
img{max-width:100%;height:auto}
table{font-variant-numeric:tabular-nums}
th{font-family:var(--display);font-weight:700}
[hidden]{display:none!important}

.tp-wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.tp-band{padding-block:clamp(64px,9vw,120px)}
.tp-band--dark{background:var(--ink);color:#fff}
.tp-band--mist{background:var(--mist)}
.tp-h2{font-size:clamp(32px,4.4vw,56px)}
.tp-lede{font-size:clamp(16px,1.4vw,18px);max-width:62ch;color:var(--muted);margin-top:16px}
.tp-band--dark .tp-lede{color:var(--muted-d)}
.tp-num{font-variant-numeric:tabular-nums}
.tp-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.tp-note{font-size:13px;color:var(--muted);margin-top:18px;max-width:80ch}

.tp-pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;max-width:100%;padding:0 24px;border-radius:999px;font:800 11px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;text-align:center;text-decoration:none;border:1px solid currentColor;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.tp-pill--solid{background:#fff;color:#111;border-color:#fff}
.tp-pill--solid:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.tp-pill--ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.32)}
.tp-pill--ghost:hover{border-color:#fff}
.tp-pill--ink{background:#111;color:#fff;border-color:#111}
.tp-pill--ink:hover{background:var(--orange);border-color:var(--orange)}
.tp-pill--line{background:transparent;color:#111;border-color:#c9c9c5}
.tp-pill--line:hover{border-color:#111}

.tp-media{position:relative;overflow:hidden;background:var(--stone)}
.tp-media>img{display:block;width:100%;height:100%;object-fit:cover}
.tp-media--flat{display:grid;place-items:center;background:var(--mist)}
.tp-media--flat>img{width:64%;height:auto;object-fit:contain}

.tp-skip{position:absolute;left:16px;top:-80px;z-index:100;display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;background:#fff;color:#111;font:800 11px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.tp-skip:focus{top:14px}

/* ---------- site header and footer ---------- */
.tp-header{background:var(--black);color:#fff;border-bottom:1px solid var(--line-d)}
.tp-header__in{display:flex;align-items:center;gap:28px;height:68px}
.tp-logo{flex:none;display:block}
.tp-logo img{display:block;width:139px;height:auto}
/* the nav scrolls on phones and overflow clips at the padding box: 6px padding (offset by the
   negative margin) keeps the whole 2px + 3px focus ring visible */
.tp-nav{display:flex;gap:22px;min-width:0;margin:-6px;padding:6px;font:400 13px/1 var(--body);overflow-x:auto;scrollbar-width:none;scroll-padding-inline:6px}
.tp-nav::-webkit-scrollbar{display:none}
.tp-nav a{text-decoration:none;opacity:.85;white-space:nowrap}
.tp-nav a:hover{opacity:1}
.tp-nav a[aria-current]{opacity:1;box-shadow:inset 0 -2px var(--orange);padding-bottom:6px}

.tp-footer{background:var(--black);color:#8d8d88;font-size:13px;border-top:1px solid var(--line-d)}
.tp-footer__in{padding-block:28px;display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between}
.tp-footer a{text-decoration:none}
.tp-footer a:hover{color:#fff;text-decoration:underline}
.tp-footer .tp-updated{margin:0;font-size:inherit;color:inherit}

/* ---------- hero ---------- */
.tp-hero{position:relative;background:var(--black);color:#fff;overflow:hidden}
.tp-hero__bg{position:absolute;inset:0}
.tp-hero__bg>img{display:block;width:100%;height:100%;object-fit:cover;opacity:.36}
.tp-hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.6) 55%,rgba(0,0,0,.3) 100%)}
.tp-hero>.tp-wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4vw,64px);align-items:center;padding-block:clamp(56px,8vw,100px)}
.tp-hero h1{font-size:clamp(36px,4.3vw,60px)}
.tp-hero__sub{font-size:clamp(16px,1.4vw,18px);color:rgba(255,255,255,.86);max-width:52ch;margin-top:22px}
.tp-hero__facts{display:flex;flex-wrap:wrap;gap:6px 18px;margin:22px 0 0;padding:0;list-style:none;font:700 13px/1.4 var(--display)}
.tp-hero__facts li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--orange);margin-right:8px;vertical-align:middle}

/* signature: annotated garment */
.tp-spec{margin:0;background:var(--paper);color:var(--text);border-radius:10px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.tp-spec__photo{position:relative;overflow:hidden;aspect-ratio:1/1;background:#e8e8ea}
.tp-spec__photo>img{display:block;width:100%;height:100%;object-fit:cover}
.tp-spec svg.tp-dims{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.tp-dims__line{stroke:#111;stroke-width:3;fill:none;transition:stroke .2s,stroke-width .2s}
.tp-dims__dot{fill:#111;transition:fill .2s}
.tp-dims__lbl rect{fill:#111;transition:fill .2s}
.tp-dims__lbl text{fill:#fff;font:700 26px var(--display);letter-spacing:.04em}
.tp-dims .tp-on .tp-dims__line{stroke:var(--orange);stroke-width:5}
.tp-dims .tp-on .tp-dims__dot,.tp-dims .tp-on .tp-dims__lbl rect{fill:var(--orange)}
.tp-spec table{width:100%;border-collapse:collapse;font-size:14px}
.tp-spec th,.tp-spec td{padding:9px 16px;text-align:left;border-top:1px solid var(--line)}
.tp-spec td{font-weight:400}
.tp-spec thead th{font:800 11px/1 var(--display);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-top:0;padding-top:14px}
.tp-spec .tp-num{text-align:right;font-variant-numeric:tabular-nums}
.tp-spec td.tp-num{font-family:var(--display);font-weight:700}
.tp-spec tbody tr{transition:background .2s}
.tp-spec tbody tr.tp-on{background:var(--orange-wash)}
.tp-spec tbody tr.tp-on td:first-child{color:var(--orange)}
.tp-spec__cap{font-size:12px;color:var(--muted);padding:10px 16px 14px;border-top:1px solid var(--line)}

/* ticker */
.tp-ticker{background:var(--black);color:#fff;border-top:1px solid var(--line-d);overflow:hidden}
.tp-ticker__track{display:flex;width:max-content;animation:tp-tick 48s linear infinite}
.tp-ticker__set{display:flex;flex:none}
.tp-ticker:hover .tp-ticker__track,.tp-ticker:focus-within .tp-ticker__track{animation-play-state:paused}
.tp-ticker span{font:800 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;padding:18px 0;white-space:nowrap}
.tp-ticker span::after{content:"";display:inline-block;width:7px;height:7px;background:var(--orange);border-radius:50%;margin:0 26px;vertical-align:middle}
@keyframes tp-tick{to{transform:translateX(-50%)}}

/* ---------- builder ---------- */
.tp-builder{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.85fr);gap:clamp(24px,3.5vw,56px);align-items:start;margin-top:44px}
.tp-bstep{border-top:1px solid #111;padding:26px 0 30px}
.tp-bstep__head{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:baseline}
.tp-bstep__num{font:400 30px/1 var(--display);color:#b3b3ae}
.tp-bstep--done .tp-bstep__num,.tp-bstep--active .tp-bstep__num{color:var(--orange)}
.tp-bstep h3{font-size:24px;letter-spacing:-.015em}
.tp-bstep__state{font:700 11px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tp-bstep__how{margin:10px 0 0 56px;color:var(--muted);font-size:15px;max-width:60ch}
.tp-bstep__ctl{margin:20px 0 0 56px}
.tp-bstep--locked .tp-bstep__how,.tp-bstep--locked h3{color:#8a8a86}

/* step 1: garment cards (labels with a hidden radio; the 7th is .tp-gpick__more) */
.tp-gpick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tp-gpick>*{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;background:#fff;color:inherit;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.tp-gpick input,.tp-vpick input,.tp-opts input{position:absolute;opacity:0;pointer-events:none}
.tp-gpick .tp-media{aspect-ratio:1/1}
.tp-gpick__name{display:flex;justify-content:space-between;gap:8px;padding:10px 12px 4px;font:800 15px/1.2 var(--display)}
.tp-gpick__name small{font:400 12px/1.2 var(--body);color:var(--muted);white-space:nowrap}
.tp-gpick__sub{display:block;padding:0 12px 12px;font-size:12px;line-height:1.4;color:var(--muted)}
.tp-gpick>:has(input:checked){border-color:var(--orange);box-shadow:0 0 0 2px var(--orange)}
.tp-gpick>:has(input:focus-visible){outline:2px solid var(--orange);outline-offset:3px}
.tp-gpick>.tp-gpick__more{grid-column:1/-1;flex-direction:row;align-items:center;gap:16px;padding:14px 16px;border-style:dashed}
.tp-gpick__plus{flex:none;width:44px;height:44px;border-radius:50%;border:1.5px solid #111;display:grid;place-items:center;font:400 24px/1 var(--display)}
.tp-gpick__text{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--muted)}
.tp-gpick__text b{font:800 15px/1.2 var(--display);color:#111}
.tp-gpick__go{margin-left:auto;font:800 11px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}

/* step 2: style cards and fit chips */
.tp-vpick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.tp-vpick label{position:relative;display:flex;flex-direction:column;gap:3px;border:1px solid var(--line);border-radius:8px;padding:8px 8px 11px;cursor:pointer;background:#fff;transition:border-color .2s,box-shadow .2s}
.tp-vpick__flats{display:flex;align-items:stretch;justify-content:center;gap:4px;aspect-ratio:5/4;min-height:0;overflow:hidden;background:var(--mist);border-radius:5px;margin-bottom:6px;padding:10px}
.tp-vpick__flats img{display:block;flex:1 1 0;min-width:0;width:0;height:100%;object-fit:contain}
.tp-vpick b{font:800 14px/1.2 var(--display);padding:0 2px}
.tp-vpick__meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 6px;padding:0 2px;font-size:12px;color:var(--muted)}
.tp-vpick__meta>span{white-space:nowrap}
.tp-vpick__price{font-family:var(--display);font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.tp-vpick label:has(input:checked){border-color:var(--orange);box-shadow:0 0 0 2px var(--orange)}
.tp-vpick label:has(input:focus-visible){outline:2px solid var(--orange);outline-offset:3px}
.tp-vpick label:hover .tp-vpick__flats{background:#efefec}
.tp-fitrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tp-fitrow__label{font:800 11px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* step 3 fabric rows, and the fit chips (.tp-opts--row) */
.tp-opts{display:flex;flex-direction:column;gap:8px}
.tp-opts--row{flex-direction:row;flex-wrap:wrap}
.tp-opts label{position:relative;display:flex;justify-content:space-between;align-items:center;gap:16px;border:1px solid var(--line);border-radius:999px;padding:12px 18px;cursor:pointer;background:#fff;font-size:14px;transition:border-color .2s,background .2s}
.tp-opts:not(.tp-opts--row) label{border-radius:8px}
.tp-opts label b{font:800 15px/1.2 var(--display)}
.tp-opts label small{color:var(--muted);font-size:13px}
.tp-opts__price{font:800 14px/1 var(--display);white-space:nowrap;font-variant-numeric:tabular-nums}
.tp-opts label:has(input:checked){border-color:var(--orange);background:var(--orange-wash)}
.tp-opts label:has(input:focus-visible){outline:2px solid var(--orange);outline-offset:3px}

/* step 4: static artwork placement preview */
.tp-art{margin:18px 0 0 56px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px}
.tp-bstep--locked .tp-art{opacity:.55;filter:grayscale(.2)}
.tp-art__board{position:relative;aspect-ratio:1/1;background:#f1f1ef;border-radius:8px;display:grid;place-items:center}
.tp-art__board img{width:82%}
.tp-art__logo{position:absolute;left:50%;top:31%;transform:translateX(-50%);width:17%;aspect-ratio:2/1;border:1.5px dashed var(--orange);background:rgba(233,90,33,.12);display:grid;place-items:center;font:800 9px/1 var(--display);color:var(--orange)}
.tp-art__measure{position:absolute;left:50%;top:21%;width:1.5px;height:9%;background:#111}
.tp-art__measure span{position:absolute;left:6px;top:20%;font:700 10px/1 var(--display);white-space:nowrap}
.tp-art__list{display:flex;flex-direction:column;gap:8px;font-size:13px}
.tp-art__list>div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding-bottom:8px}
.tp-art__list b{font:800 13px/1.3 var(--display)}
.tp-art__req{font-size:12px;color:var(--muted);line-height:1.5}

/* step 4: dark handoff box (WhatsApp / email) */
.tp-handoff{margin:22px 0 0 56px;background:var(--ink);color:#fff;border-radius:10px;padding:26px clamp(18px,3vw,30px)}
.tp-handoff h3{font-size:clamp(22px,2.2vw,28px)}
.tp-handoff p{color:#c8c8c3;font-size:15px;margin-top:10px;max-width:56ch}
.tp-handoff .tp-actions{gap:10px;margin-top:18px}
.tp-handoff__fine{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:13px;color:#9d9d98}

/* the tech pack panel (= "What goes in a tech pack") */
.tp-pack{position:sticky;top:calc(env(safe-area-inset-top,0px) + 24px);background:var(--paper);border:1px solid #111;border-radius:10px;overflow:hidden}
.tp-pack__top{background:#111;color:#fff;padding:18px 20px 16px;display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center}
.tp-pack__thumb{aspect-ratio:1/1;background:#fff;border-radius:6px;display:grid;place-items:center;overflow:hidden}
.tp-pack__thumb img{width:86%;height:auto}
.tp-pack__id{font:700 11px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:#9d9d98}
.tp-pack__name{font:800 20px/1.15 var(--display);margin-top:6px}
.tp-pack__price{padding:16px 20px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline}
.tp-pack__price b{font:800 26px/1 var(--display);font-variant-numeric:tabular-nums}
.tp-pack__price small{font-size:12px;color:var(--muted)}
.tp-pack__price small+small{text-align:right}
.tp-pack__lead{font:700 14px/1.2 var(--display);text-align:right}
.tp-pack__body{padding:18px 20px 20px}
.tp-pack h2{font-size:22px;letter-spacing:-.015em}
.tp-pack__ans{font-size:14px;color:var(--muted);margin-top:8px}
.tp-pack__bar{height:6px;border-radius:999px;background:#ecece9;margin:14px 0 6px;overflow:hidden}
.tp-pack__bar i{display:block;height:100%;width:0;background:var(--orange);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.tp-pack__count{font:700 12px/1 var(--display);color:var(--muted)}
.tp-pack ol{list-style:none;padding:0;margin:14px 0 0}
.tp-pack li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.4}
.tp-pack li b{font:800 14px/1.3 var(--display);display:block}
.tp-pack li span{color:var(--muted);font-size:13px}
.tp-pack__tick{width:18px;height:18px;border-radius:50%;border:1.5px solid #c9c9c5;margin-top:1px;display:grid;place-items:center;transition:background .25s,border-color .25s}
.tp-pack li.tp-ok .tp-pack__tick{background:var(--orange);border-color:var(--orange)}
.tp-pack li.tp-ok .tp-pack__tick::after{content:"";width:8px;height:4px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}

/* ---------- sample pack strip ---------- */
.tp-pages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px;margin-top:40px}
.tp-pages figure{margin:0}
.tp-pages img{display:block;width:100%;height:auto;border-radius:4px;box-shadow:0 18px 40px -18px rgba(0,0,0,.7);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.tp-pgl{display:block;text-decoration:none;color:#c8c8c3}
.tp-pgl:hover img{transform:translateY(-4px)}
.tp-pgl span,.tp-pages figcaption{display:block;font:700 13px/1.3 var(--display);margin-top:10px}
.tp-pgl:hover span{color:#fff}

/* ---------- cost table ---------- */
.tp-cost{margin-top:40px;overflow-x:auto;border-top:1px solid #111;scrollbar-width:thin;scrollbar-color:var(--orange) var(--mist)}
.tp-cost table{width:100%;border-collapse:collapse;min-width:640px}
.tp-cost th,.tp-cost td{text-align:left;padding:18px 14px 18px 0;border-bottom:1px solid var(--line);font-size:15px}
.tp-cost td{font-weight:400;font-variant-numeric:normal}
.tp-cost thead th{font:800 11px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tp-cost tbody th,.tp-cost td:first-child{font:800 18px/1.2 var(--display)}
.tp-cost td.tp-num{font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums}
.tp-cost small{display:block;font:400 12px/1.4 var(--body);color:var(--muted)}

/* ---------- factory ---------- */
.tp-factory{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center}
.tp-factory .tp-media{aspect-ratio:4/5;border-radius:8px}
.tp-factory ul{list-style:none;padding:0;margin:30px 0 0;border-top:1px solid #fff}
.tp-factory li{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line-d);font-size:15px;color:#d2d2cd}
.tp-factory li b{font:800 17px/1.3 var(--display);color:#fff}

/* ---------- faq ---------- */
.tp-faq{margin-top:34px;border-top:1px solid #111;max-width:920px}
.tp-faq details{border-bottom:1px solid var(--line)}
.tp-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font:800 20px/1.3 var(--display);letter-spacing:-.01em}
.tp-faq summary::-webkit-details-marker{display:none}
.tp-faq summary::after{content:"+";flex:none;font:400 26px/1 var(--display);color:var(--orange);transition:transform .25s}
.tp-faq details[open] summary::after{transform:rotate(45deg)}
.tp-faq details p{padding:0 0 22px;color:var(--muted);max-width:68ch}

/* ---------- closing ---------- */
.tp-close{position:relative;background:var(--black);color:#fff;overflow:hidden}
.tp-close__bg{position:absolute;inset:0;background:#111}
.tp-close__bg>img{display:block;width:100%;height:100%;object-fit:cover;opacity:.42}
.tp-close__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,.35))}
.tp-close>.tp-wrap{position:relative;z-index:2;padding-block:clamp(90px,12vw,170px)}
.tp-close h2{font-size:clamp(36px,5.2vw,70px);max-width:16ch}
.tp-close .tp-lede{color:#c8c8c3}
.tp-close__contact{margin-top:22px;font-size:14px;color:rgba(255,255,255,.75)}
.tp-close__contact b{color:#fff;user-select:all}

/* ---------- garment, glossary and example pages: one white band ---------- */
.tp-page{background:var(--paper);padding-block:20px clamp(56px,7vw,96px)}
.tp-crumbs{font-size:13px;color:var(--muted)}
.tp-crumbs a{text-decoration:none}
.tp-crumbs a:hover{color:var(--text);text-decoration:underline}
.tp-crumbs [aria-current]{color:var(--text)}
.tp-page h1{font-size:clamp(34px,5vw,60px);max-width:30ch;margin-top:28px}
.tp-page h2{font-size:clamp(26px,3vw,38px);letter-spacing:-.025em;line-height:1.1}
.tp-page h3{font-size:20px;letter-spacing:-.015em;line-height:1.2;margin-top:32px}
.tp-lead{font-size:clamp(17px,1.5vw,19px);line-height:1.6;max-width:65ch;margin-top:20px}
.tp-page main p,.tp-page main ul,.tp-page main ol{margin-top:16px;max-width:72ch}
.tp-page main ul,.tp-page main ol{padding-left:1.25em;margin-bottom:0}
.tp-page main ol{padding-left:1.75em}
.tp-page main li+li{margin-top:6px}
.tp-page main li::marker{color:var(--orange)}
.tp-page main .tp-note{margin-top:14px;font-size:13px;max-width:80ch}
.tp-page main .tp-pill--solid{background:#111;color:#fff;border-color:#111}
.tp-page main .tp-pill--solid:hover{background:var(--orange);border-color:var(--orange)}
.tp-page main .tp-pill--ghost{background:transparent;color:#111;border-color:#c9c9c5}
.tp-page main .tp-pill--ghost:hover{border-color:#111}
.tp-page main .tp-pgl{color:var(--muted)}
.tp-page main .tp-pgl:hover span{color:var(--text)}
.tp-page main .tp-pages img{box-shadow:0 0 0 1px var(--line),0 18px 40px -24px rgba(0,0,0,.35)}
.tp-page main .tp-pages figcaption{color:var(--muted)}
.tp-section{border-top:1px solid #111;margin-top:48px;padding-top:26px}
.tp-updated{margin-top:48px;font-size:13px;color:var(--muted)}

/* flat sketches on mist */
.tp-flat{display:flex;justify-content:center;gap:clamp(12px,3vw,40px);margin:28px 0 0;padding:clamp(16px,3vw,32px);background:var(--mist);border-radius:10px}
.tp-flat img{display:block;flex:0 1 400px;min-width:0;width:100%;max-width:400px;height:auto}

/* tables: black top rule, light hairlines between rows; wide ones scroll inside the wrap */
.tp-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:20px;border-top:1px solid #111;scrollbar-width:thin;scrollbar-color:var(--orange) var(--mist)}
.tp-page main .tp-table-wrap:not(:has(.tp-size)){max-width:960px}
.tp-table-wrap table{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.tp-table-wrap th,.tp-table-wrap td{padding:13px 16px 13px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.tp-table-wrap th:last-child,.tp-table-wrap td:last-child{padding-right:0}
.tp-table-wrap td{font-weight:400}
.tp-table-wrap thead th{font:800 11px/1.3 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);vertical-align:bottom}
.tp-table-wrap tbody th{font:700 15px/1.45 var(--display);color:var(--text)}
.tp-size th,.tp-size td{white-space:nowrap}
.tp-size tbody td:first-of-type{white-space:normal;min-width:10em}
.tp-size td+td,.tp-size thead th:nth-child(n+3){text-align:right;padding-left:12px}
.tp-size tbody th{font:800 12px/1.9 var(--display);letter-spacing:.06em;color:var(--muted)}
.tp-size tbody tr:hover{background:var(--orange-wash)}
.tp-size abbr{color:var(--orange);text-decoration:none;cursor:help}

/* cm / inch switch */
.tp-unit-toggle{display:inline-flex;gap:2px;margin-top:16px;padding:3px;border:1px solid #111;border-radius:999px}
.tp-unit-toggle button{height:32px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:#111;font:800 11px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s}
.tp-unit-toggle button:hover{color:var(--orange)}
.tp-unit-toggle button[aria-pressed="true"]{background:#111;color:#fff}
.tp-page main .tp-size-note,.tp-page main .tp-size-foot{font-size:13px;color:var(--muted);margin-top:12px}
.tp-size-how{margin-top:24px;padding:20px 22px;background:var(--mist);border-radius:10px}
.tp-page .tp-size-how h3{font-size:17px;margin:0}
.tp-page main .tp-size-how ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;list-style:none;padding:0;margin-top:12px;max-width:none}
.tp-page main .tp-size-how li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;margin:0;padding:9px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.5}
.tp-size-how strong{font-size:13px;letter-spacing:.04em}

/* link groups (glossary index, other garments) as chips */
.tp-card{margin-top:32px;padding:22px 24px;background:var(--mist);border-radius:10px}
.tp-label{font:800 11px/1.3 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tp-page main .tp-card .tp-label{margin-top:0}
.tp-page main .tp-card ul+.tp-label{margin-top:20px}
.tp-page main nav.tp-card ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin-top:10px;max-width:none}
.tp-page main nav.tp-card li{margin:0}
.tp-card li a{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border:1px solid #c9c9c5;border-radius:999px;background:#fff;font:700 13px/1.2 var(--display);text-decoration:none;transition:border-color .2s}
.tp-card li a:hover{border-color:#111}

/* contact box at the end of each page */
.tp-contact{margin-top:clamp(48px,6vw,72px);padding:clamp(28px,4vw,48px) clamp(20px,4vw,48px);background:var(--ink);color:#fff;border-radius:10px}
.tp-contact p{color:#c8c8c3;margin-top:12px;max-width:56ch}
.tp-contact .tp-actions{margin-top:24px}

/* example page: SAMPLE watermark tiled over the filled-in tech pack */
.tp-watermark{position:relative}
.tp-watermark::after{content:"";position:absolute;inset:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='240'%3E%3Ctext x='180' y='120' transform='rotate(-30 180 120)' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='22' font-weight='800' letter-spacing='3' fill='%23000' fill-opacity='.07'%3ESAMPLE %C2%B7 UNIT-100%3C/text%3E%3C/svg%3E") 0 0/360px 240px repeat}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .tp-builder{grid-template-columns:minmax(0,1fr)}
  .tp-pack{position:static;order:-1}
  .tp-pages{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .tp-hero>.tp-wrap,.tp-factory{grid-template-columns:minmax(0,1fr)}
  .tp-header__in{flex-wrap:wrap;height:auto;gap:0;padding-top:14px}
  .tp-logo img{width:118px}
  .tp-nav{flex:1 0 100%;gap:20px;margin:0 -6px;padding:14px 6px 12px}
}
@media (max-width:600px){
  .tp-gpick{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tp-bstep__how,.tp-bstep__ctl,.tp-handoff,.tp-art{margin-left:0}
  .tp-art{grid-template-columns:minmax(0,1fr)}
  .tp-vpick{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tp-gpick>.tp-gpick__more{flex-wrap:wrap}
  .tp-gpick__go{margin-left:60px}
  .tp-bstep__head{grid-template-columns:36px minmax(0,1fr)}
  .tp-bstep__state{grid-column:2}
  .tp-pages{gap:16px 12px}
  .tp-factory li{grid-template-columns:1fr;gap:4px}
  .tp-page main .tp-size-how ul{grid-template-columns:minmax(0,1fr)}
  .tp-card{padding:18px 16px}
}
/* reduced motion: the ticker stops and shows one set of items, wrapped, so nothing is clipped */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important}
  .tp-ticker__track{animation:none;width:auto}
  .tp-ticker__set{flex:1 1 auto;flex-wrap:wrap;justify-content:center;padding-block:8px}
  .tp-ticker__set+.tp-ticker__set{display:none}
  .tp-ticker span{padding-block:8px;white-space:normal}
  .tp-ticker span:last-child::after{display:none}
}