/* 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                  -> .tp-bstep--active|--done
     v4.1 step by step: .mk-builder .mk-closed .mk-stepbtn .mk-plus .mk-tick
                                         -> .tp-builder--steps .tp-bstep--closed .tp-bstep__btn .tp-bstep__plus .tp-bstep__tick
     .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 and measuring-diagram rows and their lines), .tp-ok (pack parts),
   .tp-bstep--active / --done / --closed, .tp-builder--steps.
   Type (v4.1, spec 7), as on the homepage: body text is Arial (--body); headings use the site's own "Arial Bold"
   webfont (--display); long ledes use "Arial Light" (--light). Both webfonts are the homepage's own files, copied
   byte for byte as data URLs below, so they are same-origin and need no request. "Arial Bold" has one bold face:
   a rule under weight 700 takes --body, or it would render bold. Inter ships in weight 400 and is used in the
   header nav only (--nav), as on the homepage.
   Orange (v4 file, 2026-10-29; owner: "orange color is too less"). The homepage's brand orange #ff6517 now carries
   the primary actions, the key numbers, the current or selected state and an orange band: the footer bar on every
   page, as on the homepage, and on the hub also the ticker under the hero. It never colours body text, long copy
   or errors. Three tokens, one job each:
     --orange     #ff6517  the brand fill: primary pills, the footer and ticker bands, ::selection; and every orange mark on a
                           dark ground (dots, the nav underline, facts and numbers on black). Text on it is #111
                           (--on-orange, 6.41:1); white on it would be 2.95:1.
     --orange-ui  #e55605  the same hue a step darker, for marks on light grounds that must be seen: selection rings,
                           focus rings, ticks, plus icons, measuring lines, the pressed cm/inch button, and orange text
                           of 24px and up (3:1 or more on white, mist, the wash and the photo ground; #111 on it 5.09:1).
     --orange-ink #c14619  orange text under 24px on light grounds (5.05:1 on white, 4.63:1 on mist, 4.64:1 on the wash).
   Errors take --error, a red, so orange keeps its meaning. */

@font-face{font-family:"Arial Bold";src:url(data:font/woff2;base64,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) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Arial Light";src:url(data:font/woff2;base64,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) format("woff2");font-weight:300;font-display:swap}
/* the homepage's Arial Light file has no "$", so "$16.80" in a lede took a regular-weight dollar sign from Arial; this
   face, checked first for that one character, takes it from an installed light face. With none installed the
   browser falls through to the file above and then to Arial, as before. */
@font-face{font-family:"Arial Light";src:local("Arial Light"),local("Arial-Light"),local("HelveticaNeue-Light"),local("Helvetica Neue Light"),local("Segoe UI Light"),local("SegoeUI-Light");font-weight:300;unicode-range:U+0024}
@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:#ff6517;     /* the homepage's brand orange: fills under #111 text, and marks on dark grounds (7.13:1 on black) */
  --orange-ui:#e55605;  /* same hue, a step darker: marks on light grounds, 3.71:1 on white, 3.40:1 on mist */
  --orange-ink:#c14619; /* darker still: orange text under 24px, 5.05:1 on white, 4.64:1 on the wash */
  --on-orange:#111;     /* text on an orange fill: 6.41:1 on --orange, 5.09:1 on --orange-ui */
  --orange-wash:#fff3ed;
  --error:#b42318;      /* errors only, never orange: 6.57:1 on white */
  --faint:#8a8a86;      /* quiet grey for large text only: 3.47:1 on white */
  --lede-ink:#3d3d3a;   /* ledes in Arial Light: its strokes are thin, so a darker grey than --muted (10.9:1 on white, 10.0:1 on mist) */
  --display:"Arial Bold",Arial,"Helvetica Neue",Helvetica,sans-serif;
  --body:Arial,Helvetica,sans-serif;
  --light:"Arial Light",Arial,Helvetica,sans-serif;
  --nav:Inter,Arial,Helvetica,sans-serif;
  --wrap:1240px;
  color-scheme:light;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
/* links to a place on the page (#build, #handoff, the how-to jump nav) glide there; instant under reduced motion
   (bottom of the file). tp-builder.js turns it off for its own keep-in-place jumps. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-color:var(--faint) var(--mist);scroll-behavior:smooth}
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:var(--on-orange)}
a{color:inherit;text-decoration-color:var(--orange-ui);text-decoration-thickness:.08em;text-underline-offset:.2em}
a:not([class]):hover{color:var(--orange-ink)}
/* --orange-ui is 3:1 or more on white and mist and 5.3:1 on black, so one ring works on every ground but the orange footer */
:focus-visible{outline:2px solid var(--orange-ui);outline-offset:3px}
/* focus a script moved after a mouse click or tap (tp-builder.js focusQuietly): no ring until a key is pressed */
.tp-quiet:focus,.tp-quiet:focus-visible,.tp-bstep__btn.tp-quiet:focus-visible::after{outline:0}
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-family:var(--light);font-weight:300;font-size:clamp(16px,1.4vw,18px);max-width:62ch;color:var(--lede-ink);margin-top:16px}
/* Arial Light is too thin for small grey text on black (checked at 1280 and 375 px), so ledes on dark bands stay on --body. */
.tp-band--dark .tp-lede{font-family:var(--body);font-weight:400;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}
/* the primary action of a band is the brand orange with #111 text (6.41:1), as the homepage's orange buttons; on the
   dark bands and boxes hover turns it white, on white grounds (.tp-page main, builder Next) it turns #111 */
.tp-pill--solid{background:var(--orange);color:var(--on-orange);border-color:var(--orange)}
.tp-pill--solid:hover{background:#fff;border-color:#fff;color:#111}
.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-ui);border-color:var(--orange-ui);color:var(--on-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(--nav);overflow-x:auto;scrollbar-width:none;scroll-padding-inline:6px}
.tp-nav::-webkit-scrollbar{display:none}
.tp-nav a{padding-block:6px;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)}

/* the page's one orange band, as the homepage's orange copyright bar: #111 text on the brand orange (6.41:1). The
   orange focus ring would vanish on it, so the ring here is #111. */
.tp-footer{background:var(--orange);color:var(--on-orange);font-size:13px}
.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{text-decoration:underline;text-decoration-color:currentColor}
.tp-footer :focus-visible{outline-color:var(--on-orange)}
.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;background:var(--stone)}
.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}
/* the lit line and its label in one orange; the label text turns #111, as on every orange fill (5.09:1) */
.tp-dims__lbl text{transition:fill .2s}
.tp-dims .tp-on .tp-dims__line{stroke:var(--orange-ui);stroke-width:5}
.tp-dims .tp-on .tp-dims__dot{fill:var(--orange-ui)}
.tp-dims .tp-on .tp-dims__lbl rect{fill:var(--orange-ui)}
.tp-dims .tp-on .tp-dims__lbl text{fill:var(--on-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-ink)}
.tp-spec__cap{font-size:12px;color:var(--muted);padding:10px 16px 14px;border-top:1px solid var(--line)}

/* ticker */
/* the hub's second orange band (controller, 2026-10-29: the first screen read mostly black): #111 type and dots on
   the brand orange (6.41:1), straight under the black hero, so it needs no top rule */
.tp-ticker{background:var(--orange);color:var(--on-orange);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(--on-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}
/* the seven step numbers are the section's key numbers, like the homepage's orange figures: 30px, so --orange-ui (3.71:1, large text) */
.tp-bstep__num{font:400 30px/1 var(--body);color:var(--orange-ui)}
/* the open step: its top rule turns orange and doubles to 2px (border plus an inset line, so nothing moves) */
.tp-builder--steps .tp-bstep--active{border-top-color:var(--orange-ui);box-shadow:inset 0 1px var(--orange-ui)}
.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}
/* step by step (v4.1; the mockup's .mk-builder rules). tp-builder.js (initSteps) marks the builder .tp-builder--steps,
   turns each title into .tp-bstep__btn, adds the plus mark, the pick line under a collapsed title (steps 1-3) and a
   Next button at the end of steps 1-3, and keeps one step open (.tp-bstep--active; the rest .tp-bstep--closed, body
   hidden). Without the script none of these exist and every step stays open. The button's ::after covers the whole
   header row, so a click anywhere on it toggles the step; the focus ring goes round that row. The script keeps the
   pressed header in place itself, so the browser's scroll anchoring is off inside the builder. */
.tp-bstep,.tp-bstep [id]{scroll-margin-top:16px}
.tp-builder--steps{overflow-anchor:none}
.tp-builder--steps .tp-bstep__head{position:relative;grid-template-columns:44px minmax(0,1fr) auto 16px;row-gap:6px}
.tp-bstep--closed{padding:20px 0 22px}
.tp-bstep__body[hidden]{display:none}
.tp-builder--steps .tp-bstep:last-child{border-bottom:1px solid var(--line)}
/* inline-flex, not the default inline-block: its baseline is the first line's, so a title that wraps at 375px keeps the
   step number on its first line, as without the script */
.tp-bstep__btn{display:inline-flex;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}
.tp-bstep__btn::after{content:"";position:absolute;inset:-12px 0}
.tp-bstep__btn:focus-visible{outline:0}
.tp-bstep__btn:focus-visible::after{inset:-6px;outline:2px solid var(--orange-ui);border-radius:4px}
.tp-bstep__head:hover .tp-bstep__btn{text-decoration:underline;text-decoration-color:var(--orange-ui);text-decoration-thickness:2px;text-underline-offset:.2em}
.tp-bstep__plus{align-self:center;width:16px;height:16px;background:linear-gradient(var(--orange-ui),var(--orange-ui)) 0 7.25px/100% 1.5px no-repeat,linear-gradient(var(--orange-ui),var(--orange-ui)) 7.25px 0/1.5px 100% no-repeat;transition:transform .25s}
.tp-bstep--active .tp-bstep__plus{transform:rotate(45deg)}
.tp-bstep__pick{grid-column:2;grid-row:2;font-size:14px;line-height:1.4;color:var(--muted)}
.tp-bstep--active .tp-bstep__pick,.tp-bstep__pick:empty{display:none}
.tp-bstep--done .tp-bstep__state{color:var(--text)}
.tp-bstep__tick{position:relative;display:inline-block;width:15px;height:15px;margin-right:7px;border-radius:50%;background:var(--orange-ui);vertical-align:-3px}
.tp-bstep__tick::after{content:"";position:absolute;left:4px;top:4.3px;width:7px;height:3.5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg)}
/* Next (tp-builder.js makes it a .tp-pill--ink): the step's primary action, so it takes the orange fill, #111 on hover */
.tp-bstep [data-next]{margin-top:4px;background:var(--orange);border-color:var(--orange);color:var(--on-orange)}
.tp-bstep [data-next]:hover{background:#111;border-color:#111;color:#fff}

/* 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}
/* the name wraps inside its own space and the price stays top right; at 760px and below the price wraps under it */
.tp-gpick__name{display:flex;flex-wrap:nowrap;align-items:baseline;justify-content:space-between;gap:2px 8px;padding:10px 12px 4px;font:800 15px/1.2 var(--display)}
.tp-gpick__name small{flex:none;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-ui);box-shadow:0 0 0 2px var(--orange-ui)}
.tp-gpick>:has(input:focus-visible){outline:2px solid var(--orange-ui);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(--body)}
.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-ui);box-shadow:0 0 0 2px var(--orange-ui)}
.tp-vpick label:has(input:focus-visible){outline:2px solid var(--orange-ui);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,.tp-colours legend{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-ui);background:var(--orange-wash)}
.tp-opts label:has(input:focus-visible){outline:2px solid var(--orange-ui);outline-offset:3px}

/* step 3 colours: 12 swatches (checkboxes; tp-builder.js disables the rest at 3), the rule line, the Pantone
   TCX field and its hint. A swatch shows its colour in --c and, when checked, a tick in --tk (dark on the
   four light swatches). 6 across, 4 under 700px, 3 under 420px. */
.tp-colours{min-width:0;margin:28px 0 0 56px;padding:0;border:0}
.tp-colours legend{padding:0;margin-bottom:10px}
.tp-swatches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.tp-swatches label{position:relative;display:flex;flex-direction:column;gap:7px;min-width:0;padding:6px 6px 9px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;font:400 13px/1.25 var(--body);color:var(--text);transition:border-color .2s,box-shadow .2s}
.tp-swatches input{position:absolute;opacity:0;pointer-events:none}
.tp-chip{position:relative;display:block;height:34px;border-radius:5px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
.tp-chip::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:6px;border:2.5px solid var(--tk,#fff);border-top:0;border-right:0;transform:translate(-50%,-70%) rotate(-45deg);opacity:0}
.tp-swatches label:hover{border-color:#111}
.tp-swatches label:has(input:checked){border-color:var(--orange-ui);box-shadow:0 0 0 2px var(--orange-ui)}
.tp-swatches label:has(input:checked) .tp-chip::after{opacity:1}
.tp-swatches label:has(input:focus-visible){outline:2px solid var(--orange-ui);outline-offset:3px}
.tp-swatches label:has(input:disabled){cursor:not-allowed;color:var(--muted);border-color:var(--line)}
.tp-swatches label:has(input:disabled) .tp-chip{opacity:.35}
.tp-colrule{margin-top:14px;font-size:15px}
.tp-colrule b{font-weight:700}
/* the 50-piece stock route right under the rule line, quieter than it (outside review 2026-10-29) */
.tp-colstock{margin-top:4px;font-size:14px;line-height:1.5;color:var(--muted)}
.tp-colstock a{color:var(--text)}
.tp-pantone{display:grid;gap:6px;max-width:360px;margin-top:18px}
.tp-pantone label{font:700 14px/1.3 var(--display)}
/* 16px text, so iOS does not zoom the page when the field takes focus */
.tp-pantone input{min-width:0;height:44px;padding:0 14px;border:1px solid #8a8a86;border-radius:8px;background:#fff;color:var(--text);font:400 16px/1.2 var(--body)}
.tp-pantone input::placeholder{color:var(--muted);opacity:1}
.tp-pantone input:focus-visible{outline:2px solid var(--orange-ui);outline-offset:2px;border-color:#111}
.tp-pantone input:disabled{background:var(--mist);border-color:var(--line);cursor:not-allowed}
/* an unreadable Pantone code is an error, so it takes --error, not orange (orange means action, key number or selection) */
.tp-pantone input[aria-invalid="true"]{border-color:var(--error)}
.tp-pmshint{margin:0;font-size:13px;color:var(--error)}
.tp-colours .tp-note{margin-top:12px}
/* the chosen colours under the fabric line, across both columns (row 3, so "bulk, after sample OK" stays beside the fabric) */
#pCol{grid-column:1/-1;grid-row:3;margin-top:6px;font:700 13px/1.35 var(--display);color:var(--text);text-align:left}

/* 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}
/* the board is square and the hoodie flat (400x323) fills 82% of its width: a 16.9% top inset centres the
   drawing the same way in every engine (WebKit does not stretch the grid row to the aspect-ratio height),
   and the logo box and the 8 cm line are placed on that inset */
.tp-art__board{position:relative;aspect-ratio:1/1;padding-top:16.9%;background:#f1f1ef;border-radius:8px;display:grid;align-content:start;justify-items:center}
.tp-art__board img{width:82%}
.tp-art__logo{position:absolute;left:50%;top:47.9%;transform:translateX(-50%);width:17%;aspect-ratio:2/1;border:1.5px dashed var(--orange-ui);background:rgba(229,86,5,.08);display:grid;place-items:center;font:800 9px/1 var(--display);color:var(--orange-ink)}
.tp-art__measure{position:absolute;left:50%;top:37.9%;width:1.5px;height:10%;background:#111} /* ends on the logo box top (47.9%) */
.tp-art__measure span{position:absolute;left:6px;top:20%;padding:1px 3px;border-radius:2px;background:#f1f1ef;font:700 10px/1 var(--display);white-space:nowrap} /* board ground behind it, so the drawcord does not run through the label */
.tp-art__list{display:flex;flex-direction:column;gap:8px;font-size:13px}
.tp-art__list>div{display:flex;justify-content:space-between;align-items:baseline;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}
/* the price is the panel's key number: 26px (22px on phones) bold is large text, so --orange-ui (3.71:1) */
.tp-pack__price b{font:800 26px/1 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--orange-ui)}
.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-ui);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-ui);border-color:var(--orange-ui)}
.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:40px -6px 0;padding:0 6px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--orange-ui) var(--mist)}
.tp-cost table{width:100%;border-collapse:collapse;min-width:640px;border-top:1px solid #111}
.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{font:800 18px/1.2 var(--display)}
.tp-cost tbody th a{color:inherit;text-decoration:none}
.tp-cost tbody th a:hover,.tp-cost tbody th a:focus-visible{color:inherit;text-decoration:underline;text-decoration-color:var(--orange-ui)}
.tp-cost td.tp-num{font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums}
/* the 100-pcs price, the minimum order and the builder's price, is the key number of each row: 15px, so --orange-ink (5.05:1) */
.tp-cost td:nth-child(3){color:var(--orange-ink)}
.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}
/* the three facts read like the homepage's orange figures on black (6.72:1 on the ink band) */
.tp-factory li b{font:800 17px/1.3 var(--display);color:var(--orange)}

/* ---------- 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}
/* a drawn plus: two 1.5px orange bars crossing at the centre of a 17.5px box (8px + 0.75px), level with the first line */
.tp-faq summary::after{content:"";flex:none;width:17.5px;height:17.5px;margin-top:calc((1.3em - 17.5px) / 2);background:linear-gradient(var(--orange-ui),var(--orange-ui)) 0 8px/100% 1.5px no-repeat,linear-gradient(var(--orange-ui),var(--orange-ui)) 8px 0/1.5px 100% no-repeat;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}
/* the team photo has a backlit "UNIT100 GARMENT" sign at headline height: the side shade keeps its letters from
   reading into the headline next to the copy; on phones the copy spans the band, so the shade deepens top to bottom
   (responsive block) */
.tp-close__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.72) 45%,rgba(0,0,0,.2) 80%),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{font-family:var(--body);font-weight:400;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-family:var(--light);font-weight:300;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-ui)}
.tp-page main ol>li::marker{color:var(--orange-ink)}
.tp-page main .tp-note{margin-top:14px;font-size:13px;max-width:80ch}
.tp-page main .tp-pill--solid:hover{background:#111;border-color:#111;color:#fff}
.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}

/* garment pages: "styles we make" cards; same look as the builder's style picker (.tp-vpick__*), without the radio */
.tp-styles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:960px;margin-top:20px}
.tp-style{display:flex;flex-direction:column;gap:3px;border:1px solid var(--line);border-radius:8px;padding:8px 8px 11px;background:#fff}
.tp-page .tp-style h3{margin:0;padding:0 2px;font:800 15px/1.2 var(--display);letter-spacing:-.01em}
.tp-style .tp-vpick__meta{font-size:13px}

/* 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-ui) var(--mist);background:linear-gradient(90deg,var(--paper) 40%,rgba(255,255,255,0)) left/28px 100% no-repeat local,linear-gradient(270deg,var(--paper) 40%,rgba(255,255,255,0)) right/28px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.22),rgba(0,0,0,0)) left/14px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.22),rgba(0,0,0,0)) right/14px 100% no-repeat scroll}
.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}
/* "in cm" / "in inches" after the Measurement header, for screen readers and page-text readers; the cm/inches switch shows the unit on screen */
.tp-size__unit{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);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-ink);text-decoration:none;cursor:help}

/* measuring diagrams and the key points of measure (garment pages, builder step 2, how-to-measure page).
   Source: docs/design/2026-10-29-tech-pack-v4-1/mockup.html ("annotated flat"). Markup: measure.php.
   .tp-dia holds the figure on mist. The flat is an <image>, so CSS cannot grey its strokes the way the mockup
   does: it is dimmed instead, which keeps the black measuring lines readable over a seam. A [data-measure]
   scope (the figure plus its table or list) is wired by tp-v2.js; .tp-on marks the row and the line it points at. */
.tp-dia{margin:0;background:var(--mist);border-radius:8px;padding:12px}
.tp-pomfig{display:block;width:100%;height:auto;overflow:visible}
.tp-pomfig image{opacity:.55}
.tp-pom__line{fill:none;stroke:#111;stroke-width:1.7;stroke-linecap:round;transition:stroke .2s,stroke-width .2s}
.tp-pom__ext{fill:none;stroke:#111;stroke-width:.9;stroke-dasharray:2.5 2}
.tp-pom__lbl rect{fill:#111;transition:fill .2s}
.tp-pom__lbl text{fill:#fff;font:700 12px var(--display);letter-spacing:.03em;transition:fill .2s}
.tp-pom.tp-on .tp-pom__line{stroke:var(--orange-ui);stroke-width:2.8}
.tp-pom.tp-on .tp-pom__ext{stroke:var(--orange-ui)}
.tp-pom.tp-on .tp-pom__lbl rect{fill:var(--orange-ui)}
.tp-pom.tp-on .tp-pom__lbl text{fill:var(--on-orange)}
.tp-code,.tp-key{display:inline-grid;place-items:center;min-width:36px;height:21px;padding:0 7px;border-radius:999px;background:#111;color:#fff;font:700 11px/1 var(--display);letter-spacing:.05em;transition:background .2s,color .2s}
.tp-size tbody th .tp-key{min-width:38px}
.tp-size tbody tr.tp-on{background:var(--orange-wash)}
.tp-size tbody tr.tp-on td:first-of-type{color:var(--orange-ink)}
/* the list under (or beside) the figure: code, name and how to measure it, tolerance on the right */
.tp-points{list-style:none;margin:0;padding:0;border-top:1px solid #111}
.tp-points li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:start;margin:0;padding:12px 6px 12px 0;border-bottom:1px solid var(--line);transition:background .2s}
.tp-points b{display:block;font:700 15px/1.3 var(--display)}
.tp-points p{margin:3px 0 0;max-width:none;font-size:14px;line-height:1.5;color:var(--muted)}
.tp-points .tp-code{min-width:0;width:44px;padding:0;margin-top:1px}
.tp-tol{font:700 14px/1.3 var(--display);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tp-tol small{display:block;font:400 12px/1.3 var(--body);color:var(--muted)}
/* garment pages set bare lists and paragraphs (.tp-page main ol, li+li, p); the list above undoes that */
.tp-page main .tp-points{max-width:none;margin-top:0;padding:0}
.tp-page main .tp-points li{margin:0}
.tp-page main .tp-points p{margin:3px 0 0;max-width:none}
/* the same list inside the builder's "How we measure" disclosure: a narrower column, so smaller type */
.tp-measure__in .tp-points li{grid-template-columns:40px minmax(0,1fr) auto;gap:10px;padding:8px 6px 8px 0}
.tp-measure__in .tp-points b{font-size:13px;line-height:1.35}
.tp-measure__in .tp-points p{font-size:13px;line-height:1.45}
.tp-measure__in .tp-points .tp-code{width:40px}
/* builder step 2: "How we measure", a closed disclosure under the fit chips. Source: the mockup's .mk-measure.
   Markup: pages/builder.php (tpBuilderMeasure). It sits in the step like .tp-bstep__ctl (same left margin). The scope
   (.tp-measure__in, [data-measure]) stays in the page for good; tp-builder.js swaps the pieces inside it, and the
   link's href, when the garment changes. A piece is the flat beside its list; a set has two pieces, each under its
   name. The pants piece (front and back flats, 820 units wide) takes the whole row, with its label pills scaled up
   like the garment pages do. The box is only 550-680px wide from phone to laptop, so the layout follows the width of
   the scope (a container query), not the screen: the flat sits beside its list from 600px, above it below that. */
.tp-measure{margin:20px 0 0 56px;border:1px solid var(--line);border-radius:10px;background:#fff}
.tp-measure>summary{list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;padding:14px 46px 14px 18px;position:relative;cursor:pointer;font:700 15px/1.3 var(--display)}
.tp-measure>summary::-webkit-details-marker{display:none}
.tp-measure>summary small{font:400 13px/1.3 var(--body);color:var(--muted)}
.tp-measure>summary::after{content:"";position:absolute;right:18px;top:calc(50% - 8px);width:16px;height:16px;background:linear-gradient(var(--orange-ui),var(--orange-ui)) 0 7.25px/100% 1.5px no-repeat,linear-gradient(var(--orange-ui),var(--orange-ui)) 7.25px 0/1.5px 100% no-repeat;transition:transform .25s}
.tp-measure[open]>summary::after{transform:rotate(45deg)}
.tp-measure>summary:focus-visible{outline:2px solid var(--orange-ui);outline-offset:-2px;border-radius:10px}
.tp-measure__in{padding:0 18px;container-type:inline-size}
.tp-measure__piece{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;align-items:start}
.tp-measure__piece+.tp-measure__piece{margin-top:28px}
.tp-measure__name{grid-column:1/-1;margin:0;font:700 14px/1.3 var(--display)}
.tp-measure__in .tp-dia{position:sticky;top:calc(env(safe-area-inset-top,0px) + 24px);padding:6px}
.tp-measure__piece--wide{grid-template-columns:minmax(0,1fr);--lbl-scale:1.5}
.tp-measure__piece--wide .tp-dia{position:static}
.tp-measure__piece--wide .tp-pom__lbl{transform-box:fill-box;transform-origin:center;transform:scale(var(--lbl-scale))}
.tp-measure__more{margin:0;padding:14px 18px 16px;font-size:14px;color:var(--muted)}
.tp-measure__more a{color:var(--text);font-weight:700;font-family:var(--display)}
/* pointing at a row or a list item turns its line orange; every row can take focus, so show where it is */
[data-measure] [data-k][tabindex]:focus-visible{outline:2px solid var(--orange-ui);outline-offset:-2px}
[data-measure] li.tp-on{background:var(--orange-wash)}
[data-measure] .tp-on .tp-code,[data-measure] .tp-on .tp-key{background:var(--orange-ui);color:var(--on-orange)}
/* garment page: the size chart (note, cm and inch tables, list) beside the annotated flat, which stays in view while
   the chart scrolls. The header does not stick, so the figure sticks 24px from the top like .tp-pack. Under 820px the
   figure goes above the chart (rule in the responsive block). */
.tp-sizegrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:32px;align-items:start;margin-top:20px}
.tp-sizemain{min-width:0}
.tp-sizefig{position:sticky;top:calc(env(safe-area-inset-top,0px) + 24px);margin:0}
.tp-sizefig .tp-dia{padding:8px}
.tp-sizefig figcaption{margin-top:10px;font-size:13px;color:var(--muted)}
.tp-sizefig figcaption a{color:var(--text);font-weight:700;font-family:var(--display);white-space:nowrap}
/* the cm / inch switch heads the chart column, so it stays next to its table when the figure goes above the chart */
.tp-sizemain>.tp-unit-toggle{margin:0 0 8px}
/* two flats side by side (pants, front and back): the drawing is 820 units wide, and in a 360px column the label text
   would render at about 5px. It takes the whole row above the chart, up to 680px, and the label pills are scaled
   up about their own centre (they sit well apart, so they do not touch); more on a narrow screen, where the drawing is
   smaller still. */
.tp-sizegrid:has(.tp-sizefig--wide){grid-template-columns:minmax(0,1fr)}
.tp-sizefig--wide{position:static;order:-1;max-width:680px;--lbl-scale:1.3}
.tp-sizefig--wide .tp-pom__lbl{transform-box:fill-box;transform-origin:center;transform:scale(var(--lbl-scale))}

/* how-to-measure page: the rules card, the garment jump nav and, per garment, the annotated flat beside its list of
   key points (one [data-measure] scope). Source: the mockup's .mk-rules, .mk-jump and .mk-htgrid. Markup:
   pages/measure.php. The figure sticks 24px from the top while the list scrolls, like .tp-sizefig. The pants figure
   (two flats, tp-htgrid--wide) takes the whole row above its list and scales its label pills, as on the garment pages.
   Under 900px every figure goes above its list. */
.tp-rules{margin-top:36px;padding:clamp(20px,3vw,32px);background:var(--mist);border-radius:10px}
.tp-rules ol{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px 22px;margin:24px 0 0;padding:0}
.tp-rules li{border-top:2px solid #111;padding-top:12px;font-size:14px;line-height:1.5;color:var(--muted)}
.tp-rules li b{display:block;margin-bottom:6px;font:700 16px/1.25 var(--display);color:var(--text)}
.tp-jumpnav{margin-top:36px}
.tp-jump{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;list-style:none;margin:12px 0 0;padding:0}
.tp-jump li{min-width:0}
.tp-jump a{display:flex;flex-direction:column;gap:8px;height:100%;padding:8px 8px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;text-decoration:none;font:700 14px/1.2 var(--display);transition:border-color .2s}
.tp-jump a:hover{border-color:#111}
.tp-jump__f{display:block;min-width:0;padding:10px;background:var(--mist);border-radius:5px}
.tp-jump__f img{display:block;width:100%;height:auto;aspect-ratio:5/4;object-fit:contain}
.tp-htgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,3vw,40px);align-items:start;margin-top:24px}
.tp-htgrid .tp-dia{padding:16px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 24px)}
.tp-htgrid--wide{grid-template-columns:minmax(0,1fr);--lbl-scale:1.3}
.tp-htgrid--wide>*,.tp-page main .tp-htgrid--wide .tp-points{max-width:680px}
.tp-htgrid--wide .tp-dia{position:static}
.tp-htgrid--wide .tp-pom__lbl{transform-box:fill-box;transform-origin:center;transform:scale(var(--lbl-scale))}
/* outside review 2026-10-29: the shoulder point under the rules; "a garment you already own" as a section whose four
   steps take the rules' look (no card); per garment, the contact step on mist under the garment-page link */
.tp-term{padding-top:16px;border-top:1px solid #c9c9c5;font-size:14px;line-height:1.5;color:var(--muted)}
/* recheck 2026-10-29: the defined term reads as a term (bold, in text ink), not in the browser's italics */
.tp-term dfn{font-style:normal;font-weight:700;color:var(--text)}
.tp-own ol{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 22px;margin:24px 0 0;padding:0}
.tp-own li{border-top:2px solid #111;padding-top:12px;font-size:14px;line-height:1.5;color:var(--muted)}
.tp-own li b{display:block;margin-bottom:6px;font:700 16px/1.25 var(--display);color:var(--text)}
.tp-htsend{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin-top:20px;padding:20px 22px;background:var(--mist);border-radius:10px}
.tp-htsend .tp-actions{gap:10px}
.tp-nobr{white-space:nowrap}
/* the page sets bare lists and paragraphs (.tp-page main ol, ul, li+li, p); the rules and the jump nav undo that */
.tp-page main .tp-rules p{margin-top:10px}
.tp-page main .tp-rules ol,.tp-page main .tp-own ol,.tp-page main .tp-jump{max-width:none;padding:0}
.tp-page main .tp-rules ol,.tp-page main .tp-own ol{margin-top:24px}
.tp-page main .tp-jump{margin-top:12px}
.tp-page main .tp-rules li,.tp-page main .tp-own li,.tp-page main .tp-jump li{margin:0}
.tp-page main .tp-jumpnav .tp-label{margin-top:0}
/* recheck 2026-10-29: the shoulder-point note keeps the page's 72ch measure (full width ran ~165 characters a line at
   1280), and the contact text runs two lines beside its buttons on a desktop, not three, so six cards weigh less */
.tp-page main .tp-rules .tp-term{margin-top:24px}
.tp-page main .tp-htsend p{margin:0;max-width:68ch}
.tp-page main .tp-htsend .tp-actions{max-width:none}

/* 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-ink)}
/* the pressed unit is the selected state: --orange-ui (3.71:1 against the white around it), #111 text (5.09:1) */
.tp-unit-toggle button[aria-pressed="true"]{background:var(--orange-ui);color:var(--on-orange)}
.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. Over text and tables the tile stays at 4% so it never stripes what you
   read; the flat-sketch panel sits above it (z-index) and carries its own, stronger tile on the mist ground */
.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='.04'%3ESAMPLE %C2%B7 UNIT-100%3C/text%3E%3C/svg%3E") 0 0/360px 240px repeat}
.tp-watermark .tp-flat{position:relative;z-index:1}
.tp-watermark .tp-flat::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;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='.1'%3ESAMPLE %C2%B7 UNIT-100%3C/text%3E%3C/svg%3E") 50% 50%/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))}
}
/* the live site's ten menu items need about 915px next to the logo (W - 187px is free), so below 1140px the
   menu moves to its own row under the logo */
@media (max-width:1140px){
  .tp-header__in{flex-wrap:wrap;height:auto;gap:0;padding-top:14px}
  /* the row scrolls: the last 28px fade out, so a cut-off link reads as "more this way";
     34px of end padding keeps the last link (and its focus ring) clear of the fade at the end */
  .tp-nav{flex:1 0 100%;gap:20px;margin:0 -6px;padding:8px 34px 12px 6px;scroll-padding-inline:6px 34px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
}
@media (max-width:900px){
  .tp-hero>.tp-wrap,.tp-factory{grid-template-columns:minmax(0,1fr)}
  /* one column: the copy runs the full width over the top half, so the shade runs top to bottom; it stays
     dark behind the copy (white sub text 4.5:1 or more) and lets the stone interior through around the card */
  .tp-hero__bg::after{background:linear-gradient(180deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.7) 55%,rgba(0,0,0,.35) 100%)}
  /* one column: the spec card and the factory photo stop short of filling a tablet screen */
  .tp-spec{max-width:560px}
  .tp-factory .tp-media{aspect-ratio:3/2}
  .tp-logo img{width:118px}
}
@media (max-width:820px){
  .tp-sizegrid{grid-template-columns:minmax(0,1fr)}
  .tp-sizefig{position:static;order:-1;max-width:460px}
  .tp-sizefig--wide{max-width:680px} /* same specificity as the rule above, so it must come after it */
}
/* how-to-measure: 5 rules go 3-up, then (under 900px) each figure sits above its list and the jump nav goes 3-up */
@media (max-width:1100px){
  .tp-rules ol{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tp-own ol{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .tp-htgrid{grid-template-columns:minmax(0,1fr)}
  .tp-htgrid .tp-dia{position:static}
  .tp-htgrid:not(.tp-htgrid--wide) .tp-dia{max-width:460px}
  .tp-jump{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* 601-760px: style cards go 3-up (4-up left ~115px inside each card) */
@media (max-width:760px){
  .tp-vpick,.tp-styles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tp-gpick__name{flex-wrap:wrap}
}
/* builder step 2 "How we measure": under 600px of room the flat goes above its list, and the pants labels grow */
@container (max-width:599px){
  .tp-measure__piece{grid-template-columns:minmax(0,1fr)}
  .tp-measure__in .tp-dia{position:static;max-width:420px}
  .tp-measure__piece--wide{--lbl-scale:1.7}
  .tp-measure__piece--wide .tp-dia{max-width:none}
}
@container (max-width:380px){
  .tp-measure__piece--wide{--lbl-scale:2}
}
/* hub cost table: each garment becomes a short card, so both prices stay on screen instead of sitting off
   to the right. The table needs 640px plus the gutters, so the cards start below 700px, not 600px. */
@media (max-width:700px){
  .tp-cost{overflow-x:visible}
  .tp-cost table,.tp-cost tbody{display:block;min-width:0}
  .tp-cost thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tp-cost tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px;padding:16px 0;border-bottom:1px solid var(--line)}
  .tp-cost th,.tp-cost td{padding:0;border:0}
  .tp-cost tbody th{grid-column:1/-1}
  .tp-cost td:nth-child(2){grid-column:1/-1;margin-bottom:8px;font-size:13px;line-height:1.4;color:var(--muted)}
  .tp-cost td.tp-num::before{display:block;margin-bottom:2px;font:700 11px/1.3 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .tp-cost td:nth-child(3)::before{content:"100 pcs"}
  .tp-cost td:nth-child(4)::before{content:"300 pcs"}
  .tp-swatches{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:600px){
  .tp-gpick{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tp-bstep__how,.tp-bstep__ctl,.tp-colours,.tp-handoff,.tp-art,.tp-measure{margin-left:0}
  .tp-measure__in{padding:0 12px}
  .tp-measure>summary{padding-left:14px}
  .tp-measure__more{padding:14px 12px 16px}
  .tp-art{grid-template-columns:minmax(0,1fr)}
  .tp-vpick,.tp-styles{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* "Something else": the text stays beside the plus and the link sits under the text */
  .tp-gpick>.tp-gpick__more{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px 16px;align-items:center}
  .tp-gpick__go{grid-column:2;margin-left:0}
  .tp-bstep__head{grid-template-columns:36px minmax(0,1fr)}
  .tp-bstep__state{grid-column:2}
  /* step by step: the plus stays top right; the pick, then the state, go under the title */
  .tp-builder--steps .tp-bstep__head{grid-template-columns:36px minmax(0,1fr) 16px}
  .tp-bstep__plus{grid-column:3;grid-row:1}
  .tp-bstep__pick{grid-row:auto}
  .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}
  .tp-factory .tp-media{aspect-ratio:4/5}
  .tp-pack__price b{font-size:22px}
  .tp-close__bg::after{background:linear-gradient(180deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.76) 55%,rgba(0,0,0,.9) 100%)}
  .tp-sizefig--wide,.tp-htgrid--wide{--lbl-scale:1.7}
  /* how-to-measure: one rule per row; in each key point the tolerance moves under the text, so the text keeps the width */
  .tp-rules ol,.tp-own ol{grid-template-columns:minmax(0,1fr)}
  .tp-htgrid .tp-points li{grid-template-columns:44px minmax(0,1fr)}
  /* flex: the space before <small> (kept for the page text) collapses, so the gap stays the 6px margin; with the
     inch figures the washed value can drop to its own line on the narrowest phones */
  .tp-htgrid .tp-tol{grid-column:2;display:flex;align-items:baseline;flex-wrap:wrap;column-gap:6px;text-align:left}
  .tp-htgrid .tp-tol small{display:inline}
  .tp-htsend{padding:18px 16px}
  .tp-jump{gap:8px}
  .tp-jump a{font-size:13px;padding:6px 6px 10px}
}
@media (max-width:420px){
  .tp-sizefig--wide,.tp-htgrid--wide{--lbl-scale:1.95}
  .tp-swatches{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* recheck 2026-10-29: on a 320 px phone "Email sales@unithundred.com" broke onto two lines inside its 46 px pill (the
   contact cards and the closing band); 16px side padding keeps it on one */
@media (max-width:360px){
  .tp-actions .tp-pill{padding:0 16px}
}
/* reduced motion: the ticker stops and shows one set of items, wrapped, so nothing is clipped */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::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}
}