nested inside a so it can carry a dropdown. Three
different elements at three different default line heights,
which is why the account link sat a shade low and a shade
right of the other two.
Fixed by making every item in the row behave the same way:
one flex line, no baseline dependence, an explicit line-height
so the cap heights agree, and the wrapper div made a flex box
of its own so its child is centred rather than sitting on a
block line box.
============================================================ */
.header__tools{
display:flex;
align-items:center; /* was already here — kept explicit */
gap:26px;
}
.header__tools > *{
display:flex;
align-items:center;
line-height:1; /* the actual culprit: button and a differed */
}
.header__tools button,
.header__tools a{
font-family:var(--font-ui); font-size:11px;
letter-spacing:.2em; text-transform:uppercase; color:var(--ink);
background:none; border:0; padding:0; margin:0;
line-height:1;
text-decoration:none;
white-space:nowrap; /* "Sign In" must never wrap mid-row */
}
/* The dropdown is absolutely positioned, so the wrapper contributes only
the width of the link itself. */
.acct-menu{ position:relative; display:flex; align-items:center; }
.nav-acct{ display:flex; align-items:center; line-height:1; margin:0; }
/* The burger is three stacked bars, so it is the one item that must NOT be
flattened to a single flex line. */
.header__tools > .burger{ flex-direction:column; gap:5px; line-height:normal; }
/* The cart count sits inside the link; keep it on the same line box. */
.cart-count{ line-height:1; }
/* ---- 36b. READING THE MEASUREMENTS BACK ----
The confirmation a made-to-order house takes before cutting. The
checkout button stays shut until every piece has one. */
.mx__check{
display:flex; align-items:flex-start; gap:11px;
margin:16px 0 4px; padding:13px 15px;
border:1px solid var(--linen); background:var(--ivory);
cursor:pointer; text-transform:none; letter-spacing:0;
font-family:var(--font-body); font-size:14px; color:var(--ink);
}
.mx__check:hover{ border-color:var(--gold); }
.mx__check.is-on{ border-color:var(--gold); background:#faf3e4; }
.mx__check input{
width:17px; height:17px; margin:2px 0 0; flex:0 0 auto;
accent-color:var(--gold); cursor:pointer;
}
.mx__check span{ line-height:1.45; }
.gate-note{
font-family:var(--font-ui); font-size:11px; letter-spacing:.08em;
color:#7a3f28; margin:0 0 10px; min-height:1.2em;
}
.btn.is-blocked{ opacity:.42; cursor:not-allowed; }
.btn:disabled{ opacity:.42; cursor:not-allowed; }
@media (max-width:600px){
.mx__check{ font-size:13.5px; padding:12px 13px; }
}
/* ---- 36c. THE ACCOUNT DROPDOWN, ROOM TO READ ----
Section 36 flattened every item in the tools row to a single flex line
with line-height:1, which is right for the row itself and wrong for the
dropdown hanging beneath it. These put the dropdown back to normal
typography without disturbing the row. */
.header__tools .drop{
display:block; /* not a flex line — it is a list */
line-height:1.3;
padding:16px 0;
}
.header__tools .drop a{
display:block;
padding:10px 26px;
line-height:1.3;
white-space:nowrap;
}
/* On a narrow screen the row itself can run out of room before the burger
takes over. Let Sign In shorten rather than overflow. */
@media (max-width:760px){
.header__tools{ gap:18px; }
}
/* ============================================================
37. MEASUREMENTS, MADE LESS OF AN INTERROGATION (v5.3.4)
------------------------------------------------------------
Three faults were being fixed here. The bag repeated "our
block" on every one of a dozen rows, which is a dozen times
the words for none of the meaning. It showed all of them at
once, which reads as a form to be filled rather than an
answer already given. And the measurements arrived as a final
demand at checkout, having been mentioned nowhere earlier.
============================================================ */
/* ---- said once, before the pieces ---- */
.mx-intro{
border:1px solid var(--linen); background:var(--paper);
padding:20px 22px; margin:0 0 28px;
}
.mx-intro p{ margin:0 0 10px; font-size:15px; line-height:1.62; }
.mx-intro p:last-child{ margin-bottom:0; }
.mx-intro a{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
/* ---- the disclosure ---- */
.mx__reveal{ margin:10px 0 4px; }
.mx__reveal > summary{
cursor:pointer; list-style:none;
display:inline-flex; align-items:center; gap:9px;
font-family:var(--font-ui); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
color:var(--gold); padding:6px 0;
}
.mx__reveal > summary::-webkit-details-marker{ display:none; }
.mx__reveal > summary::before{
content:"+"; display:inline-block; width:14px; text-align:center;
font-size:13px; letter-spacing:0; color:var(--gold);
}
.mx__reveal[open] > summary::before{ content:"\2212"; } /* minus */
.mx__reveal > summary:hover{ color:var(--ink); }
.mx__count{
font-size:10px; letter-spacing:.1em; color:var(--ink-soft);
border:1px solid var(--linen); border-radius:999px; padding:2px 8px;
}
/* ---- provenance, once ---- */
.mx__prov, .mx-cap{
font-family:var(--font-body); font-size:13.5px; font-style:italic;
color:var(--ink-soft); margin:2px 0 10px;
}
/* a row she changed is the only one that needs marking */
.mx__table tr.is-mine th, .mx-table tr.is-mine th{ color:var(--ink); }
.mx__table tr.is-mine .mx__val, .mx-table tr.is-mine .n{ font-weight:500; }
/* ---- the editor, gentler ---- */
.mx__editlede{
font-size:14px; line-height:1.55; color:var(--ink-soft);
margin:0 0 16px; padding-bottom:14px; border-bottom:1px solid var(--linen);
}
.mx__howwrap{ margin:4px 0 0; }
.mx__howwrap > summary{
cursor:pointer; list-style:none;
font-family:var(--font-ui); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
color:var(--gold); padding:3px 0;
}
.mx__howwrap > summary::-webkit-details-marker{ display:none; }
.mx__howwrap > summary:hover{ color:var(--ink); }
.mx__howwrap .mx__how{ margin:5px 0 0; }
/* ============================================================
38. THE PIECE, PRESENT WHILE SHE MEASURES (v5.3.4)
------------------------------------------------------------
Fifteen steps is a long way to go with nothing on screen
saying what any of it is for.
============================================================ */
.fit-piece{
display:flex; align-items:center; gap:16px;
border:1px solid var(--linen); background:var(--paper);
padding:14px 16px; margin:22px 0 0;
}
.fit-piece__img{
width:58px; height:74px; object-fit:cover; flex:0 0 auto;
background:var(--ivory); border:1px solid var(--linen);
}
.fit-piece__body{ flex:1 1 auto; min-width:0; }
.fit-piece__eyebrow{
font-family:var(--font-ui); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
color:var(--gold); margin:0 0 3px;
}
.fit-piece__name{
font-family:var(--font-display); font-size:19px; line-height:1.2;
margin:0; color:var(--ink);
}
.fit-piece__note{ font-size:13.5px; color:var(--ink-soft); margin:6px 0 0; line-height:1.5; }
.fit-piece__back{
flex:0 0 auto; font-family:var(--font-ui); font-size:10px;
letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
text-decoration:none; border-bottom:1px solid var(--linen); padding-bottom:2px;
}
.fit-piece__back:hover{ color:var(--ink); border-color:var(--gold); }
/* The copy that rides along through the tour. */
.fit-piece--sticky{
position:sticky; top:0; z-index:60;
margin:0 0 20px; background:var(--ivory);
border-left:0; border-right:0; border-top:0;
padding:11px 2px;
}
.fit-piece--sticky .fit-piece__img{ width:42px; height:54px; }
.fit-piece--sticky .fit-piece__name{ font-size:16px; }
.fit-piece--bag .fit-piece__body{ padding-left:2px; }
@media (max-width:600px){
.fit-piece{ gap:12px; padding:12px; }
.fit-piece__back{ display:none; }
.fit-piece--sticky .fit-piece__img{ width:36px; height:46px; }
}
/* ============================================================
39. FINDING YOUR FIT, GIVEN ITS DUE (v5.3.4)
------------------------------------------------------------
It was a link inside a paragraph. It is the most useful thing
on a made-to-order product page.
============================================================ */
.pdp-fit__cta{
border:1px solid var(--gold); background:var(--paper);
padding:20px 22px; margin:16px 0 0;
}
.pdp-fit__ctaLead{
font-size:15.5px; line-height:1.6; margin:0 0 16px; color:var(--ink);
}
.pdp-fit__cta .btn{ width:100%; text-align:center; }
.pdp-fit__ctaNote{
font-family:var(--font-ui); font-size:10.5px; letter-spacing:.06em;
line-height:1.7; color:var(--ink-soft); margin:13px 0 0;
}
/* ============================================================
40. THE REGISTRATION PAGE (v5.3.10)
------------------------------------------------------------
A form on its own asks for a commitment and explains nothing.
The right-hand column carries the measuring plate and what an
account is actually for, so the ask has an answer beside it.
The plate is the same drawing as the Atelier's, at the same
scale, and shares the magnifier from sections 32 and 33.
============================================================ */
.reg,
.authcols{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(34px,5vw,72px);
align-items:start;
padding:10px 0 80px;
}
.reg__form,
.authcols__form{ min-width:0; }
.reg__form .auth-card,
.authcols__form .auth-card{ margin:0; max-width:46ch; }
.reg__side,
.authcols__side{
min-width:0;
border-left:1px solid var(--linen);
padding-left:clamp(24px,3vw,44px);
}
/* ---- the plate ---- */
.reg-figure{
position:relative; overflow:hidden;
background:var(--paper); border:1px solid var(--linen);
padding:18px 18px 34px;
cursor:zoom-in; -webkit-tap-highlight-color:transparent;
margin-bottom:26px;
}
.reg-figure svg{
display:block; width:100%; height:auto;
transform-origin:var(--zx,50%) var(--zy,50%);
transition:transform .3s cubic-bezier(.2,.7,.3,1);
will-change:transform;
}
.reg-figure:hover svg,
.reg-figure:focus-visible svg{ transform:scale(2.1); }
.reg-figure.is-zoomed{ cursor:zoom-out; }
.reg-figure.is-zoomed svg{ transform:scale(2.7); transition-duration:.2s; }
.reg-figure:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.reg-figure__hint{
position:absolute; left:0; right:0; bottom:0; z-index:2;
margin:0; padding:9px 12px;
background:rgba(233,228,214,.95); border-top:1px solid var(--linen);
font-family:var(--font-ui); font-size:10px; letter-spacing:.16em;
text-transform:uppercase; color:var(--ink-soft); text-align:center;
pointer-events:none;
}
@media (hover:none){
.reg-figure:hover svg{ transform:none; }
.reg-figure.is-zoomed svg{ transform:scale(2.4); }
}
@media (prefers-reduced-motion:reduce){ .reg-figure svg{ transition:none; } }
/* ---- the words ---- */
.reg__lead{ font-size:15px; line-height:1.62; margin:0 0 26px; }
.reg__setlabel{
font-family:var(--font-ui); font-size:10px; letter-spacing:.2em;
text-transform:uppercase; color:var(--gold);
margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--linen);
}
.reg__setlabel--second{ margin-top:28px; }
.reg__dims{ list-style:none; padding:0; margin:0 0 12px; }
.reg__dims li{
font-size:14px; line-height:1.5; padding:7px 0;
border-bottom:1px solid var(--linen);
}
.reg__dims li:last-child{ border-bottom:0; }
.reg__dims em{
display:block; font-style:normal;
font-family:var(--font-ui); font-size:9.5px; letter-spacing:.16em;
text-transform:uppercase; color:var(--ink-soft); margin-bottom:3px;
}
.reg__setfoot{
font-family:var(--font-ui); font-size:11.5px; line-height:1.65;
color:var(--ink-soft); margin:10px 0 0;
}
.reg__set{ margin-bottom:34px; }
.reg__benefits{ margin-bottom:28px; }
.reg__list{ list-style:none; padding:0; margin:0; }
.reg__list li{
font-size:14.5px; line-height:1.58;
padding:0 0 14px 16px; margin:0 0 14px;
border-left:2px solid var(--linen);
}
.reg__list li:last-child{ margin-bottom:0; padding-bottom:0; }
.reg__list strong{ font-weight:500; }
.reg__privacy{
font-family:var(--font-ui); font-size:11.5px; line-height:1.7;
color:var(--ink-soft); border-top:1px solid var(--linen);
padding-top:16px; margin:0;
}
.reg__privacy a{ text-decoration:underline; text-underline-offset:2px; }
/* ---- the consent tick ---- */
.reg__consent{
display:flex; align-items:flex-start; gap:11px;
margin:6px 0 24px; padding:14px 16px;
border:1px solid var(--linen); background:var(--paper);
cursor:pointer; font-family:var(--font-body); font-size:14px;
line-height:1.5; color:var(--ink);
text-transform:none; letter-spacing:0;
}
.reg__consent:hover{ border-color:var(--gold); }
.reg__consent input{
width:17px; height:17px; margin:2px 0 0; flex:0 0 auto;
accent-color:var(--gold); cursor:pointer;
}
/* ---- one column on the way down ---- */
@media (max-width:1000px){
.reg, .authcols{ grid-template-columns:1fr; gap:44px; }
.reg__side, .authcols__side{
border-left:0; padding-left:0;
border-top:1px solid var(--linen); padding-top:36px;
}
.reg__form .auth-card, .authcols__form .auth-card{ max-width:none; }
.reg-figure{ max-width:420px; }
}
@media (max-width:600px){
.reg, .authcols{ padding-bottom:60px; }
.reg__consent{ font-size:13.5px; padding:12px 13px; }
.reg__dims li{ font-size:13.5px; }
}
/* ---- 41. PASSWORDS THAT MATCH, AND THE CAPTCHA SLOT (v5.3.12) ---- */
.field__note{
display:block; margin-top:6px;
font-family:var(--font-ui); font-size:11px; letter-spacing:.06em;
color:#7a3f28;
}
.field input.is-mismatch{ border-bottom-color:#8a4b32; }
.field input.is-mismatch:focus{ border-bottom-color:#8a4b32; }
/* The widget only appears when a provider is configured, so this styles a
space that is usually empty. */
.bot-widget{ margin:4px 0 22px; }
/* ============================================================
41. BOT PROTECTION (v5.3.12)
------------------------------------------------------------
The honeypot needs no CSS: bot_fields() carries its own inline
positioning, so it stays off screen even if this stylesheet
fails to load — which is the one moment a trap must not become
a visible field asking a customer to "leave this blank".
What is left is the provider's widget, when one is configured.
============================================================ */
.bot-widget{ margin:4px 0 22px; }
.bot-widget iframe{ max-width:100%; }
.bot-note{
font-family:var(--font-ui); font-size:10.5px; line-height:1.7;
letter-spacing:.04em; color:var(--ink-soft); margin:0 0 20px;
}
.bot-note a{ text-decoration:underline; text-underline-offset:2px; }
/* The live "those do not match yet" hint beside the second password field.
The markup uses [data-pw-match], so style that rather than inventing a
class the page does not carry. */
[data-pw-match]{
display:block; margin-top:6px;
font-family:var(--font-ui); font-size:11px; line-height:1.5;
letter-spacing:.04em; color:#8a4b32;
}
[data-pw-match][hidden]{ display:none; }
[data-pw-match].is-ok{ color:#3f5236; }
.field__note{
display:block; margin-top:6px;
font-family:var(--font-ui); font-size:11px; line-height:1.5;
letter-spacing:.04em; color:var(--ink-soft);
}
/* ============================================================
42. SIGNING IN (v5.3.15)
------------------------------------------------------------
Two things. The route to creating an account used to be a
sentence in soft grey with an undecorated link inside it — a
footnote where a door was needed. And the space to the right
of a four-field form was empty on a page most people reach
while expecting to be recognised.
============================================================ */
/* ---- the way in for someone who has not been here before ---- */
.auth-new{
border:1px solid var(--linen);
background:var(--paper);
padding:20px 22px;
margin:30px 0 0;
}
.auth-new__lead{
font-family:var(--font-ui); font-size:10.5px; letter-spacing:.2em;
text-transform:uppercase; color:var(--gold);
margin:0 0 14px;
}
/* .textlink already carries the arrow, the tracking and the underline, so the
link reads as a link without inventing a second style for it. */
.auth-new .textlink{ margin-bottom:2px; }
.auth-new__note{
font-size:13.5px; line-height:1.6; color:var(--ink-soft);
margin:16px 0 0;
}
/* ---- welcome back ---- */
.si__head{
font-family:var(--font-display); font-weight:500;
font-size:clamp(24px,2.5vw,33px); line-height:1.16;
margin:0 0 16px;
}
.si__lead{ font-size:15px; line-height:1.62; margin:0 0 28px; }
.si__list{ list-style:none; padding:0; margin:0 0 28px; }
.si__list li{
padding:0 0 16px 16px; margin:0 0 16px;
border-left:2px solid var(--linen);
}
.si__list li:last-child{ margin-bottom:0; padding-bottom:0; }
.si__list strong{
display:block; font-weight:500; font-size:15px; margin-bottom:4px;
}
.si__list span{
display:block; font-size:14px; line-height:1.55; color:var(--ink-soft);
}
.si__foot{
font-family:var(--font-ui); font-size:11.5px; line-height:1.7;
color:var(--ink-soft);
border-top:1px solid var(--linen); padding-top:16px; margin:0;
}
@media (max-width:600px){
.si__head{ font-size:23px; }
.auth-new{ padding:18px 18px; }
}
/* ============================================================
43. POLICY PAGES (v7.0)
------------------------------------------------------------
The terms and the shipping pages are long, and a customer
arrives at them looking for one specific thing. The section
headings are set apart so the eye can find the right block
without reading the paragraph before it — which is the whole
job of a policy page and the reason the old tags were
there.
============================================================ */
.prose .policy-h{
font-family:var(--font-display); font-weight:500;
font-size:clamp(20px,2vw,26px); line-height:1.2;
color:var(--maroon, #94191B);
border-top:1px solid var(--linen);
padding-top:30px; margin:52px 0 6px;
}
.prose .policy-h:first-of-type{ border-top:0; padding-top:0; margin-top:34px; }
.prose h3{
font-family:var(--font-ui); font-size:11px; letter-spacing:.18em;
text-transform:uppercase; color:var(--gold);
font-weight:600; margin:26px 0 6px;
}
.textlink-inline{ border-bottom:1px solid var(--gold); }
/* ============================================================
43. INSPIRATION · GARMENT · CARE (v7)
------------------------------------------------------------
Three fields where there was one paragraph. Each carries a
small gold heading in the house's label style, so a customer
reading for the story and a customer checking whether she can
wash it both find their part at a glance.
============================================================ */
.pdp__about{ margin:26px 0 32px; }
.pdp__sec{ margin:0 0 24px; }
.pdp__sec:last-child{ margin-bottom:0; }
.pdp__sec h2{
font-family:var(--font-ui);
font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
font-weight:500; color:var(--gold);
margin:0 0 9px;
}
.pdp__sec p{
margin:0; font-size:15px; line-height:1.68; color:var(--ink);
}
/* Care is reference rather than reading, so it sits back a little and is
separated by a hairline instead of shouting for the same attention. */
.pdp__sec--care{
border-top:1px solid var(--linen);
padding-top:20px; margin-top:26px;
}
.pdp__sec--care p{ font-size:14px; color:var(--ink-soft); }
@media (max-width:600px){
.pdp__sec p{ font-size:14.5px; }
}
/* ============================================================
44. OPTIONAL MEASUREMENTS, AND WHAT THEY BUY (v7)
------------------------------------------------------------
The six leg and armhole dimensions are optional. That word on
its own reads as "unimportant", which is not what it means —
so each optional step now says what it decides, and what
skipping it costs. She chooses knowing the trade.
============================================================ */
.tour-step__count .opt{
display:inline-block; margin-left:9px;
font-family:var(--font-ui); font-size:9.5px; letter-spacing:.18em;
text-transform:uppercase; color:var(--gold);
border:1px solid var(--gold); border-radius:2px;
padding:3px 6px; vertical-align:1px;
}
.tour-step__buys{
border-left:2px solid var(--gold);
background:var(--paper);
padding:14px 16px; margin:0 0 22px;
font-size:14.5px; line-height:1.62;
}
.tour-step__buysLabel{
display:block;
font-family:var(--font-ui); font-size:9.5px; letter-spacing:.2em;
text-transform:uppercase; color:var(--gold);
margin-bottom:6px;
}
.tour-step__buysSkip{
display:block; margin-top:9px;
font-size:13px; color:var(--ink-soft);
}
@media (max-width:600px){
.tour-step__buys{ padding:12px 13px; font-size:14px; }
}
/* ============================================================
45. THE FIT SCALE, DRAWN (v7)
------------------------------------------------------------
fit_scale() computed a seven-position signed scale from the
beginning and nothing ever drew it, so a customer read a
sentence where she could have seen a position.
============================================================ */
.fitscale{ margin:22px 0 4px; }
.fitscale--legend{ border-top:1px solid var(--linen); padding-top:18px; }
.fitscale__cap{
font-family:var(--font-ui); font-size:9.5px; letter-spacing:.2em;
text-transform:uppercase; color:var(--gold); margin:0 0 10px;
}
.fitscale svg{ display:block; max-width:340px; }
.fitscale__note{
font-size:13px; line-height:1.6; color:var(--ink-soft); margin:10px 0 0; max-width:52ch;
}
.fitscale__row{ margin:0 0 14px; }
.fitscale__row:last-child{ margin-bottom:0; }
/* ============================================================
46. THE BRA SIZE PATH (v7)
------------------------------------------------------------
A second way into the bodice measurements. The tape is the
accurate answer and stays the recommended one; this is here
because a woman who does not have a tape to hand should not
be turned away, and because she certainly knows her bra size.
It fills the field with a labelled estimate. It never
overwrites a number she measured.
============================================================ */
.brapath{
border:1px solid var(--linen); background:var(--ivory);
padding:16px 18px; margin:0 0 22px;
}
.brapath__lead{
font-family:var(--font-ui); font-size:10px; letter-spacing:.2em;
text-transform:uppercase; color:var(--gold); margin:0 0 8px;
}
.brapath__body{ font-size:14px; line-height:1.6; color:var(--ink-soft); margin:0 0 14px; }
.brapath__row{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.brapath__f{ display:block; }
.brapath__f span{
display:block; font-family:var(--font-ui); font-size:9.5px; letter-spacing:.16em;
text-transform:uppercase; color:var(--ink-soft); margin-bottom:5px;
}
.brapath__f input, .brapath__f select{
padding:9px 10px; border:1px solid var(--linen); background:var(--paper);
font:14px/1.4 Georgia,serif; color:var(--ink);
}
.brapath__out{
font-size:13.5px; line-height:1.62; color:var(--ink);
border-left:2px solid var(--gold); padding:11px 14px; margin:14px 0 0;
background:var(--paper);
}
.brapath__out[hidden]{ display:none; }
@media (max-width:600px){
.brapath__row{ gap:10px; }
.brapath__f input, .brapath__f select{ width:100%; }
}
/* An estimated value looks different from a measured one, because it is. */
input.is-estimated{
border-color:var(--gold) !important;
background-image:linear-gradient(to bottom, rgba(143,117,73,.07), rgba(143,117,73,.07));
}
.brapath__out[data-tone="bad"]{ border-left-color:var(--rust); }
/* ============================================================
47. EVERY MEASUREMENT SHOWS ITS OWN DRAWING (v7.2)
------------------------------------------------------------
The review table gave each measurement a one-line description,
which helped. What it could not do was show her.
The panel is a row of its own spanning the whole table, and the
figures inside are drawn at the size they had in the tour. A
diagram she needs while correcting a number should be at least
as legible as the one she was given when she first took the
measurement — until v7.2 it was a thumbnail squeezed into a
two-inch column, which was worse exactly where it mattered more.
Built on : no JavaScript, keyboard-reachable, announced
by a screen reader for free, and a printed page keeps whichever
panels were left open.
============================================================ */
.mhelp-row > td{
padding:0 10px 14px !important;
border-bottom:1px solid var(--linen);
}
.mhelp{ margin:0; }
.mhelp__sum{
cursor:pointer; list-style:none;
display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
padding:8px 0 2px;
}
.mhelp__sum::-webkit-details-marker{ display:none; }
.mhelp__sum:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.mhelp__name{
font-family:var(--font-ui); font-size:11px; letter-spacing:.1em;
color:var(--ink-soft); border-bottom:1px dotted var(--linen);
}
.mhelp__sum:hover .mhelp__name{ color:var(--ink); border-bottom-color:var(--gold); }
.mhelp__cue{
font-family:var(--font-ui); font-size:9px; letter-spacing:.18em;
text-transform:uppercase; color:var(--gold);
border:1px solid var(--linen); padding:2px 6px; white-space:nowrap;
}
.mhelp[open] .mhelp__cue{ border-color:var(--gold); }
.mhelp[open] .mhelp__cue::after{ content:" \2014 close"; }
/* Words at a readable measure on the left, the figures beside them with room
to actually be figures. */
.mhelp__body{
display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,42%);
gap:22px; align-items:start;
border-left:2px solid var(--gold); background:var(--paper);
padding:18px 20px; margin:10px 0 4px;
}
/* ---- one figure at a time, front by default ----
Two drawings side by side gave any step with a back view half the width per
drawing, so the bust came out smaller than the waist for no reason a customer
could see. Switchable now, which keeps every panel and every drawing the same
size whatever the step.
Radio inputs and sibling selectors, so it needs no JavaScript and no :has().
The radios are clipped rather than display:none — display:none would take
them out of the tab order and off a screen reader, and the labels are real
labels, so the whole control works from a keyboard for free.
The names are prefixed with an underscore so the fit engine ignores them if
they arrive with a submit. */
.mhelp__figs{ display:block; }
.mhelp__tabs{ display:flex; gap:6px; margin:0 0 9px; }
.mhelp__radio{
position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.mhelp__tab{
cursor:pointer;
font-family:var(--font-ui); font-size:9.5px; letter-spacing:.16em;
text-transform:uppercase; color:var(--ink-soft);
border:1px solid var(--linen); background:var(--ivory);
padding:6px 10px;
transition:color .2s var(--ease), border-color .2s var(--ease);
}
.mhelp__tab:hover{ color:var(--ink); border-color:var(--gold); }
.mhelp__radio:focus-visible + .mhelp__radio + .mhelp__tabs .mhelp__tab,
.mhelp__radio:focus-visible ~ .mhelp__tabs .mhelp__tab{ outline:none; }
/* Which tab looks chosen, and which figure shows. Two views is the most any
step has; a third would want one more pair of these. */
.mhelp__figs--tabbed .mhelp__fig{ display:none; }
.mhelp__radio:nth-of-type(1):checked ~ .mhelp__fig:nth-of-type(1){ display:block; }
.mhelp__radio:nth-of-type(2):checked ~ .mhelp__fig:nth-of-type(2){ display:block; }
.mhelp__radio:nth-of-type(1):checked ~ .mhelp__tabs .mhelp__tab:nth-of-type(1),
.mhelp__radio:nth-of-type(2):checked ~ .mhelp__tabs .mhelp__tab:nth-of-type(2){
color:var(--ink); border-color:var(--gold); background:var(--paper);
}
.mhelp__radio:nth-of-type(1):focus-visible ~ .mhelp__tabs .mhelp__tab:nth-of-type(1),
.mhelp__radio:nth-of-type(2):focus-visible ~ .mhelp__tabs .mhelp__tab:nth-of-type(2){
outline:2px solid var(--gold); outline-offset:2px;
}
.mhelp__fig{
margin:0; background:var(--ivory); border:1px solid var(--linen); padding:8px;
/* v7.2 — the same magnifier as the tour, so these need the same box: relative
for the corner mark, overflow hidden so the scaled drawing is clipped to the
frame rather than spilling across the table. */
position:relative; overflow:hidden; cursor:zoom-in;
-webkit-tap-highlight-color:transparent;
}
.mhelp__fig svg{ display:block; width:100%; height:auto; }
.mhelp__text p{ margin:0 0 11px; font-size:14px; line-height:1.62; max-width:62ch; }
.mhelp__text p:last-child{ margin-bottom:0; }
.mhelp__lead{ font-weight:500; font-size:15px; }
.mhelp__err{ color:var(--ink-soft); }
.mhelp__err span{
display:block; font-family:var(--font-ui); font-size:9px; letter-spacing:.18em;
text-transform:uppercase; color:var(--rust); margin-bottom:3px;
}
.mhelp__tip{
color:var(--ink-soft); font-size:13px;
border-top:1px solid var(--linen); padding-top:9px;
}
.fit-name{ font-weight:500; font-size:15px; display:block; }
@media (max-width:860px){
.mhelp__body{ grid-template-columns:1fr; }
.mhelp__figs{ max-width:420px; }
}