/* ==========================================================================
ASTON GARMENT · Henan Aston Garment Co., Ltd.
Global stylesheet · v1.0
--------------------------------------------------------------------------
Palette taken from the live astongarment.com theme:
#c7a488 camel / clay — the brand colour, used for accents and rules
#835a42 deep bark — actions and depth
#f9f5f5 warm blush — page ground
#1f1a17 warm ink — body text
Type: Fraunces (display serif) + Inter (UI and body). Both self-hosted,
woff2, latin subset — no third-party font request leaves the domain.
Sections
01 tokens 06 navigation 11 process
02 reset / base 07 footer 12 certificates
03 typography 08 sections 13 forms
04 layout 09 cards 14 prose
05 components 10 catalogue 15 responsive
========================================================================== */
/* ----------------------------------------------------------- 00 webfonts */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400;font-display:swap;
src:url("fonts/fraunces-400.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;
src:url("fonts/fraunces-600.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
src:url("fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;
src:url("fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
src:url("fonts/inter-600.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;
src:url("fonts/inter-700.woff2") format("woff2")}
/* ------------------------------------------------------------- 01 tokens */
:root{
/* ink */
--ink:#1f1a17;
--ink-2:#3b332c;
--ink-3:#5d5349;
--muted:#8a7d70;
/* brand — camel */
--clay:#c7a488;
--clay-2:#d9c3aa;
--clay-3:#e8dbc9;
--clay-wash:#f5ede4;
/* brand — deep bark (actions, dark grounds) */
--bark:#835a42;
--bark-2:#6b4732;
--bark-3:#452c1e;
/* grounds */
--cream:#fdfbf8;
--blush:#f9f5f5;
--blush-2:#f6f0ea;
--white:#fff;
/* secondary — sage, reserved for the safety/natural-material layer */
--sage:#6f8468;
--sage-wash:#eef2ec;
/* rules */
--line:#ece1d6;
--line-2:#dccab6;
--line-3:#c4ac93;
--line-dark:rgba(255,255,255,.16);
/* status */
--ok:#3f7a52;
--ok-wash:#eef4ef;
--warn:#9a6b1f;
--warn-wash:#fdf5e6;
--stop:#a3452f;
--stop-wash:#fbefec;
--font-display:"Fraunces",Georgia,"Times New Roman",serif;
--font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
/* Spacing and radius are kept as complete scales even where the site does
not yet use every step, so a new component picks a value off the ramp
instead of inventing one. */
--s1:8px; --s2:16px; --s3:24px; --s4:40px;
--s5:56px; --s6:72px; --s7:96px;
--r:3px;
--r-lg:10px;
--r-xl:18px;
--max:1300px;
--narrow:768px;
--sh:0 24px 64px rgba(52,38,28,.11);
--sh-sm:0 8px 26px rgba(52,38,28,.07);
--hdr-h:78px;
--ease:cubic-bezier(.22,.61,.36,1);
}
/* ------------------------------------------------------- 02 reset / base */
*,*::before,*::after{box-sizing:border-box}
/* The catalogue filter and the mobile drawer both work by toggling the `hidden`
attribute. Every component below sets an explicit `display` (.results is
grid, .record is flex, .empty is block), and an author `display` beats the
UA's `[hidden]{display:none}` whatever the specificity — so without this the
filter computed correctly and then showed all forty styles anyway. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
margin:0;background:var(--cream);color:var(--ink);
font-family:var(--font-body);font-size:16px;line-height:1.72;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
hr{border:0;border-top:1px solid var(--line);margin:var(--s5) 0}
::selection{background:var(--clay-3);color:var(--ink)}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:#fff;padding:12px 20px}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--bark);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* --------------------------------------------------------- 03 typography */
h1,h2,h3,h4,h5{
font-family:var(--font-display);font-weight:600;color:var(--ink);
line-height:1.16;margin:0 0 .5em;letter-spacing:-.005em;
}
h1{font-size:clamp(34px,4.7vw,58px);line-height:1.04;letter-spacing:-.018em}
h2{font-size:clamp(27px,3.2vw,42px);letter-spacing:-.012em}
h3{font-size:clamp(20px,1.9vw,26px);line-height:1.24}
h4{font-size:19px;line-height:1.32}
h5{font-size:16px;line-height:1.4}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
strong,b{font-weight:600;color:var(--ink)}
small{font-size:13px}
/* The eyebrow is the site's connective tissue: a small camel label above
nearly every section head. Uppercase Inter, wide tracking, never larger
than 12px so it stays a signpost and not a headline. */
.eyebrow{
display:block;font-family:var(--font-body);font-size:11.5px;font-weight:700;
letter-spacing:.2em;text-transform:uppercase;color:var(--bark);
margin:0 0 16px;
}
.eyebrow--light{color:var(--clay-2)}
.eyebrow--rule{display:flex;align-items:center;gap:14px}
.eyebrow--rule::after{content:"";flex:1;height:1px;background:var(--line-2);max-width:80px}
.lead{font-size:clamp(16.5px,1.4vw,19px);line-height:1.72;color:var(--ink-3);max-width:66ch}
.sub{font-size:15.5px;color:var(--muted);line-height:1.7}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;letter-spacing:.05em}
.serif{font-family:var(--font-display)}
.num{font-family:var(--font-display);font-weight:600;font-variant-numeric:lining-nums tabular-nums}
/* status chip — used for certificate validity and stock state */
.chip{
display:inline-flex;align-items:center;gap:6px;border-radius:100px;
padding:4px 11px;font-size:10.5px;font-weight:700;letter-spacing:.09em;
text-transform:uppercase;white-space:nowrap;border:1px solid transparent;
}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.chip--ok{background:var(--ok-wash);color:var(--ok);border-color:#cfe0d3}
.chip--warn{background:var(--warn-wash);color:var(--warn);border-color:#eddcbb}
.chip--stop{background:var(--stop-wash);color:var(--stop);border-color:#eccfc8}
.chip--neutral{background:var(--blush-2);color:var(--muted);border-color:var(--line)}
.chip--clay{background:var(--clay-wash);color:var(--bark);border-color:#e2d2bd}
/* -------------------------------------------------------------- 04 layout */
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.narrow{max-width:var(--narrow);margin:0 auto;padding:0 32px}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.stack>*+*{margin-top:var(--s3)}
.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:40px}.mt-5{margin-top:64px}
.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:40px}
.rule{border-top:1px solid var(--line);margin:var(--s4) 0}
.grid{display:grid;gap:26px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,76px);align-items:center}
.split--top{align-items:start}
.split--wide{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.split--narrow-l{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
.aside{display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:clamp(32px,4vw,64px);align-items:start}
.aside--left{grid-template-columns:280px minmax(0,1fr)}
.flow>*+*{margin-top:var(--s3)}
/* ---------------------------------------------------------- 05 components */
/* buttons ---------------------------------------------------------------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
padding:16px 32px;font-family:var(--font-body);font-size:12.5px;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r);
border:1px solid transparent;cursor:pointer;text-align:center;
transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
/* Primary fill is --bark, not --clay: white on --clay is 2.2:1 and reads as
washed out at button size. --clay stays on decorative marks and rules. */
.btn--bark{background:var(--bark);color:#fff}
.btn--bark:hover{background:var(--bark-2)}
.btn--ink{background:var(--ink);color:var(--cream)}
.btn--ink:hover{background:#000;color:#fff}
.btn--line{border-color:var(--line-2);color:var(--ink)}
.btn--line:hover{border-color:var(--bark);background:var(--bark);color:#fff}
.btn--light{border-color:rgba(255,255,255,.45);color:#fff}
.btn--light:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--sm{padding:12px 22px;font-size:11.5px}
.btn--block{width:100%}
.btnrow{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btnrow--center{justify-content:center}
.textlink{
display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;color:var(--bark);
border-bottom:1px solid var(--clay-2);padding-bottom:3px;
}
.textlink:hover{color:var(--ink);border-color:var(--ink)}
.textlink::after{content:"→"}
.textlink--quiet{color:var(--muted);border-color:var(--line-2)}
.textlink--quiet:hover{color:var(--bark)}
/* cards ------------------------------------------------------------------ */
.card{
background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
padding:34px 32px;height:100%;display:flex;flex-direction:column;
transition:box-shadow .3s var(--ease),transform .3s var(--ease),border-color .3s var(--ease);
}
.card:hover{box-shadow:var(--sh-sm);transform:translateY(-3px);border-color:var(--line-2)}
.card h3,.card h4{margin-bottom:10px}
.card p{font-size:15.5px;color:var(--ink-3);line-height:1.68}
.card__kicker{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--bark);margin-bottom:14px}
.card__more{margin-top:auto;padding-top:24px}
.card--plain{background:transparent;border:0;padding:0}
.card--plain:hover{transform:none;box-shadow:none}
.card--wash{background:var(--clay-wash);border-color:#e4d5c2}
.card--dark{background:var(--bark-3);border-color:transparent;color:#e6d8cd}
.card--dark h3,.card--dark h4{color:#fff}
.card--dark p{color:#c9b6a8}
.card--dark .flist li{color:#d2c0b3}
.card--dark .flist li b{color:#fff}
/* icon card */
.icard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 30px;height:100%;color:var(--ink)}
.icard__ic{
width:52px;height:52px;border-radius:50%;background:var(--clay-wash);color:var(--bark);
border:1px solid var(--clay-3);
display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.icard__ic svg{width:23px;height:23px}
.icard h4{margin-bottom:8px}
.icard p{font-size:15.5px;color:var(--ink-3)}
.icard--dark{background:rgba(255,255,255,.045);border-color:var(--line-dark);color:#e6d8cd}
.icard--dark .icard__ic{background:rgba(199,164,136,.16);border-color:rgba(199,164,136,.34);color:var(--clay-2)}
.icard--dark h4{color:#fff}
.icard--dark p{color:#c2aea0}
/* numbered claim grid — hairline rules, no boxes */
.claims{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line-2)}
.claim{padding:34px 46px 34px 0;border-bottom:1px solid var(--line-2)}
.claim:nth-child(even){padding-left:46px;padding-right:0;border-left:1px solid var(--line-2)}
.claim h3{font-size:21px;line-height:1.26;margin:0 0 12px}
.claim p{color:var(--ink-3);font-size:15.5px;line-height:1.68;margin:0}
.claim p.claim__n{
font-family:var(--font-body);font-size:11.5px;font-weight:700;letter-spacing:.2em;
color:var(--bark);line-height:1;margin:0 0 15px;
}
.claims--dark{border-top-color:var(--line-dark)}
.claims--dark .claim{border-bottom-color:var(--line-dark)}
.claims--dark .claim:nth-child(even){border-left-color:var(--line-dark)}
.claims--dark .claim h3{color:#fff}
.claims--dark .claim p{color:#c2aea0}
.claims--dark .claim p.claim__n{color:var(--clay-2)}
/* stat row */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.stat{border-top:2px solid var(--clay);padding-top:20px}
.stat__n{font-family:var(--font-display);font-size:clamp(34px,4vw,52px);font-weight:600;color:var(--bark);line-height:1;display:block}
.stat__l{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:12px;line-height:1.6}
/* image card */
.imgcard{display:block;height:100%}
.imgcard__media{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--blush-2);aspect-ratio:4/5}
.imgcard--wide .imgcard__media{aspect-ratio:4/3}
.imgcard--square .imgcard__media{aspect-ratio:1/1}
.imgcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .65s var(--ease)}
.imgcard:hover .imgcard__media img{transform:scale(1.045)}
.imgcard__media::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,transparent 58%,rgba(31,26,23,.42));
opacity:0;transition:opacity .35s var(--ease);
}
.imgcard:hover .imgcard__media::after{opacity:1}
.imgcard__tag{
position:absolute;left:14px;top:14px;z-index:2;background:rgba(255,255,255,.94);
color:var(--ink);font-size:10.5px;font-weight:700;letter-spacing:.11em;
text-transform:uppercase;padding:7px 11px;border-radius:var(--r);
}
.imgcard__tag--clay{background:var(--bark);color:#fff}
.imgcard__body{padding-top:18px}
.imgcard__title{font-family:var(--font-display);font-size:19px;font-weight:600;margin:0 0 6px}
.imgcard:hover .imgcard__title{color:var(--bark)}
.imgcard__meta{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.imgcard__desc{font-size:15px;color:var(--ink-3);margin-top:10px}
/* feature list */
.flist{list-style:none;margin:0;padding:0}
.flist li{position:relative;padding-left:32px;margin-bottom:18px;font-size:15.5px;line-height:1.66;color:var(--ink-2)}
.flist li:last-child{margin-bottom:0}
.flist li::before{
content:"";position:absolute;left:2px;top:10px;width:8px;height:8px;
background:var(--clay);transform:rotate(45deg);
}
.flist b{display:block;font-family:var(--font-display);font-size:17px;margin-bottom:3px;color:var(--ink)}
.flist--check li::before{
content:"";left:0;top:2px;width:19px;height:19px;transform:none;background:var(--bark);
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.flist--dark li{color:#d2c0b3}
.flist--dark li b{color:#fff}
.flist--dark li::before{background:var(--clay-2)}
/* numbered steps */
.steps{list-style:none;counter-reset:s;margin:0;padding:0}
.steps li{counter-increment:s;position:relative;padding:0 0 32px 66px;border-left:1px solid var(--line-2);margin-left:20px}
.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps li::before{
content:counter(s,decimal-leading-zero);position:absolute;left:-21px;top:-2px;
width:42px;height:42px;border-radius:50%;background:var(--cream);
border:1px solid var(--clay);color:var(--bark);
font-family:var(--font-display);font-size:13px;font-weight:600;
display:flex;align-items:center;justify-content:center;
}
.steps b{display:block;font-family:var(--font-display);font-size:19px;font-weight:600;margin:7px 0 6px}
.steps p{font-size:15.5px;color:var(--ink-3);margin:0}
.steps--dark li{border-left-color:var(--line-dark)}
.steps--dark li::before{background:var(--bark-3);border-color:var(--clay);color:var(--clay-2)}
.steps--dark b{color:#fff}
.steps--dark p{color:#c2aea0}
/* spec table */
.spec{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.spec th,.spec td{padding:15px 20px;text-align:left;font-size:15px;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{width:34%;font-weight:500;color:var(--muted);background:var(--blush);font-family:var(--font-body)}
.spec td{font-weight:600;color:var(--ink)}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.spec--dark{background:rgba(255,255,255,.04);border-color:var(--line-dark)}
.spec--dark th{background:rgba(255,255,255,.05);color:#b09b8c}
.spec--dark td{color:#fff}
.spec--dark th,.spec--dark td{border-bottom-color:var(--line-dark)}
/* pill / chip row */
.pill{
display:inline-block;padding:6px 14px;border-radius:100px;font-size:11px;
font-weight:700;letter-spacing:.09em;text-transform:uppercase;
background:var(--clay-wash);color:var(--bark);border:1px solid #e2d2bd;
}
.pill--ink{background:var(--blush-2);color:var(--ink-2);border-color:var(--line)}
.pill--sage{background:var(--sage-wash);color:var(--sage);border-color:#d5e0d2}
.pillrow{display:flex;gap:8px;flex-wrap:wrap}
/* callout / notice */
.note{
background:var(--blush-2);border:1px solid var(--line);border-left:3px solid var(--clay);
border-radius:var(--r);padding:22px 26px;font-size:15px;color:var(--ink-2);
}
.note b{display:block;font-family:var(--font-display);font-size:17px;margin-bottom:6px}
.note--warn{background:var(--warn-wash);border-color:#eddcbb;border-left-color:var(--warn);color:#6d4c15}
.note--warn b{color:#6d4c15}
.note--sage{background:var(--sage-wash);border-color:#d5e0d2;border-left-color:var(--sage);color:#3f4d3b}
.note--sage b{color:#3f4d3b}
/* quote */
.quote{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--clay);border-radius:var(--r);padding:30px 32px}
.quote p{font-family:var(--font-display);font-size:19px;line-height:1.55;color:var(--ink-2);margin:0 0 16px}
.quote__src{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
/* accordion */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
list-style:none;cursor:pointer;padding:24px 52px 24px 0;position:relative;
font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;
margin-top:-7px;border-right:1.5px solid var(--bark);border-bottom:1.5px solid var(--bark);
transform:rotate(45deg);transition:transform .25s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details[open] summary{color:var(--bark)}
.faq__a{padding:0 52px 26px 0;font-size:15.5px;color:var(--ink-3);line-height:1.75}
.faq__a p{margin-bottom:.85em}
/* breadcrumb */
.crumbs{font-size:12.5px;letter-spacing:.05em;color:var(--muted);margin:0 0 26px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.crumbs li::after{content:"/";margin-left:8px;color:var(--line-3)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--muted);border-bottom:1px solid transparent}
.crumbs a:hover{color:var(--bark);border-color:var(--clay-2)}
.crumbs [aria-current]{color:var(--ink)}
/* spec strip — a horizontal band of key facts */
.strip{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);background:var(--blush)}
.strip__inner{max-width:var(--max);margin:0 auto;padding:0 32px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.strip__i{padding:26px 24px 26px 0}
.strip__i+.strip__i{padding-left:24px;border-left:1px solid var(--line-2)}
.strip__k{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bark);margin:0 0 8px}
.strip__v{font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--ink);margin:0;line-height:1.3}
.strip__n{font-size:13.5px;color:var(--muted);margin:5px 0 0;line-height:1.55}
/* swatch list */
.swatches{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.swatches li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-3);
border:1px solid var(--line);border-radius:100px;padding:5px 13px 5px 7px;background:var(--white)}
.swatches i{width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,.1);flex:none;display:block}
/* sticky mobile CTA + back to top */
.stickycta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--white);
border-top:1px solid var(--line);padding:11px 16px;box-shadow:0 -6px 20px rgba(52,38,28,.09)}
.stickycta .btn{width:100%}
.totop{
position:fixed;right:22px;bottom:22px;z-index:56;width:48px;height:48px;border-radius:50%;
background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;
box-shadow:0 12px 28px rgba(52,38,28,.24);border:0;cursor:pointer;
opacity:0;visibility:hidden;transform:translateY(10px);
transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s linear,background .25s var(--ease)}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--bark)}
/* --------------------------------------------------------- 06 navigation */
.utilbar{background:var(--bark-3);color:#cdbcae;font-size:11.5px;letter-spacing:.08em}
.utilbar__inner{max-width:var(--max);margin:0 auto;padding:9px 32px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.utilbar a{border-bottom:1px solid transparent}
.utilbar a:hover{color:#fff;border-color:var(--clay-2)}
.utilbar__id{white-space:nowrap;display:inline-flex;align-items:center;gap:10px}
.utilbar__badge{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border:1px solid rgba(199,164,136,.45);border-radius:999px;color:var(--clay-2);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.utilbar__badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--clay-2)}
.utilbar__right{display:inline-flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:flex-end}
.hdr{position:sticky;top:0;z-index:60;background:rgba(253,251,248,.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr__inner{max-width:var(--max);margin:0 auto;padding:0 32px;height:var(--hdr-h);display:flex;align-items:center;gap:18px;position:relative}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand__mark{width:40px;height:40px;flex:none;border-radius:50%;background:var(--clay-wash);
border:1px solid var(--clay-3);display:flex;align-items:center;justify-content:center;
font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--bark);line-height:1}
.brand__txt{display:flex;flex-direction:column;gap:1px}
.brand__name{font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:.03em;color:var(--ink);line-height:1}
.brand__sub{font-size:8.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--bark)}
/* The descriptor was hidden for one revision, when the bar had to hold seven
items and the lockup pushed the row 9px past the container — the browser
answered by wrapping "FACTORY & QUALITY" onto three lines. The bar is down to
five items, so the row now measures 920px of a 1137px budget at the 1201px
floor and the descriptor fits with ~66px to spare. It is back on, at 26
characters rather than 30. */
.hdr .brand__sub{display:block}
.nav{margin-left:auto;display:flex;align-items:center;gap:2px;flex-wrap:nowrap}
.nav__item{position:relative;flex:none}
.nav__link{
display:flex;align-items:center;gap:5px;padding:10px 10px;font-size:11.5px;
font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-2);
white-space:nowrap;
border-radius:var(--r);transition:color .18s,background-color .18s;
}
.nav__link:hover,.nav__item[data-open] .nav__link{color:var(--bark);background:var(--clay-wash)}
.nav__link::after{content:"";width:5px;height:5px;border-right:1.2px solid currentColor;border-bottom:1.2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.nav__item--plain .nav__link::after{display:none}
.nav__panel{
position:absolute;top:calc(100% + 10px);left:0;
width:min(560px,calc(100vw - 32px));
background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
box-shadow:var(--sh);padding:16px;
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px 16px;
opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .18s,transform .18s,visibility .18s;
}
.nav__item:hover .nav__panel,.nav__item:focus-within .nav__panel,
.nav__item[data-open] .nav__panel{opacity:1;visibility:visible;transform:translateY(0)}
/* Panels open from the side of the bar their item sits on: items 1-3 anchor
left, items 4-7 anchor right. This is not styling, it is the only placement
that clears the viewport for every item. A fixed 560px panel anchored to its
item needs that item's left edge to be <= 581px from the right of the bar,
or its right edge to be >= 560px from the left; the bar is 638px-780px wide
depending on viewport, so the split has to follow the bar, not a fixed list.
Measured on the previous build: centring every panel under its own item ran
43px past the viewport at 1440 and 212px at 1201 (About), which turned the
whole page into a horizontally scrolling document. Right-anchoring *every*
panel fixed the overflow but parked the Products menu 170px clear of the item
that opened it, so it read as a floating card rather than a menu. The split
keeps each panel touching its own item:
at 1201px items sit at 229..973, so 1-3 open right, 4-7 open left;
at 1920px items sit at 638..1382, same split still clears both edges. */
.nav__item:nth-child(n+4) .nav__panel{left:auto;right:0}
/* Products carries fourteen links now that Fabrics moved in underneath it, so
its panel takes three columns. Only the first item can host a panel this
wide: it is the leftmost, so the panel grows rightward into free space —
760px clears the viewport edge at every desktop width because the bar starts
at least 366px from the left at the 1201px floor. */
.nav__item:first-child .nav__panel{
width:min(760px,calc(100vw - 32px));
grid-template-columns:repeat(3,minmax(0,1fr))}
/* Each group heading spans the grid, so a group always starts on a fresh row. */
.nav__ph{grid-column:1/-1;font-size:10.5px;font-weight:700;letter-spacing:.15em;
text-transform:uppercase;color:var(--muted);padding:12px 12px 5px;
border-top:1px solid var(--line);margin-top:4px}
.nav__ph:first-child{border-top:0;margin-top:0;padding-top:2px}
/* The last link of an odd-sized group takes the whole row, so no group is left
with a single dangling cell. Only Buyers (7 links) needs this today. */
.nav__i--span{grid-column:1/-1}
.nav__panel a{display:block;padding:8px 11px;border-radius:var(--r);font-size:13.5px;color:var(--ink-2);transition:background-color .16s,color .16s}
.nav__panel a:hover{background:var(--clay-wash);color:var(--bark)}
.nav__panel a span{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.hdr__cta{flex:none;margin-left:6px}
.burger{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:22px;height:1.6px;background:var(--ink);margin:5px 0;transition:transform .25s,opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:70;background:var(--cream);transform:translateX(100%);
transition:transform .32s var(--ease);overflow-y:auto;padding:24px 24px 70px;display:none}
.drawer[data-open]{transform:translateX(0)}
.drawer__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.drawer__close{background:none;border:0;font-size:26px;line-height:1;cursor:pointer;padding:6px 10px}
.drawer__grp{border-bottom:1px solid var(--line);padding:14px 0}
.drawer__grp>summary{font-family:var(--font-display);font-size:19px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.drawer__grp>summary::-webkit-details-marker{display:none}
.drawer__grp>summary::after{content:"+";color:var(--bark);font-size:20px}
.drawer__grp[open]>summary::after{content:"–"}
.drawer__grp a{display:block;padding:11px 0 11px 14px;font-size:15px;color:var(--ink-2);border-left:2px solid var(--line)}
.drawer__grp a:hover{border-left-color:var(--clay);color:var(--bark)}
.drawer .btn{margin-top:26px}
/* ------------------------------------------------------------- 07 footer */
/* The ground is the client's showroom photograph (1920x500, 22 KB WebP) with
the bark wash already baked into its pixels, laid under a warm overlay.
The overlay is not decoration. The raw frame's brightest pixels sit at
L .140 and its median at .104 — it is a mid-brown plate, not a dark one —
so against it the old muted footer palette (#8c7b6e) fell to 2.0:1. At
.30 -> .42 the frame lands at L .054 -> .064: still plainly the picture
(racks and garments read), and every colour below clears AA on it.
Measured worst case, p95 of each element's own box:
1440px h4 12.3 · links 6.8 · channels 7.5 · blurb 6.5 · legal 7.2
390px h4 12.6 · links 6.7 · channels 7.2 · blurb 6.2 · legal 7.3
`background-color` stays underneath as the fallback: for a failed image
load, and for anything that strips backgrounds on the way to paper.
The photo carries the 8px brand strapline at 5.3:1 — it is the tightest
thing in the block and it is decorative, so it is allowed to sit there. */
.ftr{background-color:var(--bark-3);
background-image:linear-gradient(rgba(26,17,12,.30),rgba(26,17,12,.42)),
url("/assets/img/site/footer-showroom.webp");
background-size:cover,cover;
background-position:center 58%,center 58%;
background-repeat:no-repeat,no-repeat;
color:#e2d8cb;font-size:14.5px}
.ftr__top{max-width:var(--max);margin:0 auto;padding:var(--s6) 32px var(--s5);display:grid;
grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:44px}
.ftr h4{color:#fff;font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
font-family:var(--font-body);margin-bottom:20px}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:11px}
.ftr a:hover{color:#fff}
.ftr__brand .brand__name{color:#fff}
.ftr__brand .brand__sub{color:var(--clay-2)}
.ftr__brand .brand__mark{background:rgba(199,164,136,.16);border-color:rgba(199,164,136,.34);color:var(--clay-2)}
.ftr__blurb{margin-top:20px;font-size:14px;line-height:1.75;color:#d6cabc;max-width:40ch}
.ftr__channels{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:20px}
.ftr__channels a{font-size:13.5px;color:var(--clay-2);border-bottom:1px solid rgba(199,164,136,.35)}
.ftr__channels a:hover{color:#fff;border-bottom-color:#fff}
.ftr__bottom{border-top:1px solid rgba(255,255,255,.16)}
.ftr__bottom-inner{max-width:var(--max);margin:0 auto;padding:22px 32px;display:flex;
justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;color:#d4c8b9}
/* The bottom row carries a secondary link set separated by interpuncts.
Flex would turn each separator into its own item and space them 20px
apart, so this line is plain inline flow and wraps on the spaces. */
.ftr__legal{line-height:1.9}
/* Below 680px the footer stacks into one column and grows far taller than it
is wide — 1484px at 390 against a 3.84:1 photograph. Running that frame as a
`cover` plate scales it 2.97x but shows only 6.8% of its width: a 132px
sliver of empty floor, which is why the phone footer read as a flat
gradient. So on phones the picture becomes a BAND instead — full width,
280px tall, which is the whole room at 0.56x (downscaled, so not soft at
all), fading into the flat --bark-3 the rest of the block sits on.
The fade is a second gradient layer rather than a hard edge: it reaches
solid #452c1e exactly where the band ends, and the uniform overlay above it
is continuous across that line, so there is no seam.
Measured: at these widths the band's visible window is 643-1214px of the
1920px frame — 33% to 63% of it — so its horizontal position changes the
picture by 0.1%. Plain centre is the right answer; no position tuning. */
@media (max-width:680px){
.ftr{background-image:
linear-gradient(rgba(26,17,12,.30),rgba(26,17,12,.42)),
linear-gradient(rgba(69,44,30,0) 0,rgba(69,44,30,.5) 62%,#452c1e 100%),
url("/assets/img/site/footer-showroom.webp");
background-size:100% 100%,100% 280px,auto 280px;
background-position:center center,left top,center top;
background-repeat:no-repeat,no-repeat,no-repeat}
}
/* two sourcing routes — the first decision a buyer makes here, so they sit
above the catalogue rather than buried inside it. Two cards and no more: a
third would stop being a decision and start being a menu again. */
.routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.route{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
padding:34px clamp(24px,3vw,36px) 32px;display:flex;flex-direction:column;height:100%}
.route__tag{display:inline-flex;align-self:flex-start;font-size:11px;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:var(--bark);
background:var(--clay-wash);border:1px solid var(--clay-3);border-radius:999px;
padding:6px 14px;margin-bottom:18px}
.route h3{font-family:var(--font-display);font-weight:600;color:var(--ink);
font-size:clamp(20px,2.2vw,25px);line-height:1.25;margin-bottom:10px}
.route__lead{font-size:15.5px;line-height:1.72;color:var(--ink-3);margin:0}
.route__list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.route__list li{display:flex;gap:10px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.route__list svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--bark)}
.route .btnrow{margin-top:auto;padding-top:28px}
@media (max-width:900px){
/* Between 681px and 900px the utility bar still has room for the company
line but not for the contacts beside it, and it wrapped to two rows (82px
against 41px) — the one thing a thin utility bar must not do. The contacts
are already in the header CTA, the footer and the drawer, so the right-hand
group stands down here rather than pushing the bar taller. */
.utilbar__right{display:none}.routes{grid-template-columns:minmax(0,1fr);gap:18px}}
/* A production flow drawn as numbered stops across one line. Numbering comes
from a CSS counter so the markup carries no ordinal that a copy edit could
fall out of step with — the same reason .steps works this way. Four columns
because eight stops then read as two even rows, and because the longest label
("Pre-production approval") still sets on one line at that width. */
.flowline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 24px;
counter-reset:fl;border-top:1px solid var(--line-2);padding-top:34px}
.flowline__step{counter-increment:fl}
.flowline__step::before{
content:counter(fl,decimal-leading-zero);display:block;
font-family:var(--font-body);font-size:11.5px;font-weight:700;letter-spacing:.2em;
color:var(--bark);line-height:1;margin-bottom:12px;
}
.flowline__step b{display:block;font-family:var(--font-display);font-size:18px;
font-weight:600;line-height:1.28;margin-bottom:7px}
.flowline__step p{margin:0;font-size:14.5px;line-height:1.62;color:var(--ink-3)}
@media (max-width:1100px){.flowline{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.flowline{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.flowline{grid-template-columns:minmax(0,1fr);gap:26px}}
/* A category with nothing catalogued yet. It used to render as an empty
.imgcard__media — a blank panel with an invisible label, which reads as a
broken image rather than as a deliberate "made to order" state. Now it is a
bordered plate that says what it is. */
.imgcard__media.imgcard--empty{
display:flex;align-items:center;justify-content:center;
background:var(--clay-wash);
border:1px dashed var(--clay-3);
}
.imgcard--empty span{
font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--bark);text-align:center;padding:0 18px;line-height:1.6;
}
/* ----------------------------------------------------------- 08 sections */
.sec{padding:var(--s7) 0}
.sec--tight{padding:var(--s6) 0}
.sec--snug{padding:var(--s5) 0}
.sec--white{background:var(--white)}
.sec--cream{background:var(--cream)}
.sec--blush{background:var(--blush)}
.sec--wash{background:var(--clay-wash)}
.sec--dark{background:var(--bark-3);color:#d6c5b8}
.sec--dark h1,.sec--dark h2,.sec--dark h3,.sec--dark h4{color:#fff}
.sec--dark .lead{color:#c2aea0}
.sec--dark .eyebrow{color:var(--clay-2)}
.sec--ink{background:var(--ink);color:#cec5bb}
.sec--ink h1,.sec--ink h2,.sec--ink h3,.sec--ink h4{color:#fff}
.sec--ink .lead{color:#bdb4aa}
.sec--ink .eyebrow{color:var(--clay-2)}
.sec--sage{background:var(--sage-wash);color:var(--ink-2)}
.sec__head{max-width:74ch;margin-bottom:var(--s5)}
.sec__head--center{margin-left:auto;margin-right:auto;text-align:center}
.sec__head--wide{max-width:88ch}
.sec__foot{margin-top:var(--s5)}
/* page head (inner pages) */
.phead{background:var(--blush);border-bottom:1px solid var(--line);padding:var(--s6) 0 var(--s5)}
.phead--wash{background:var(--clay-wash);border-bottom-color:#e4d5c2}
.phead--dark{background:var(--bark-3);border-bottom-color:transparent;color:#d6c5b8}
.phead--dark h1{color:#fff}
.phead--dark .lead{color:#c2aea0}
.phead--dark .eyebrow{color:var(--clay-2)}
.phead--dark .crumbs,.phead--dark .crumbs a{color:#9c8b7e}
.phead--dark .crumbs [aria-current]{color:#fff}
.phead__inner{max-width:var(--max);margin:0 auto;padding:0 32px}
.phead h1{max-width:24ch;margin-bottom:20px}
.phead .lead{max-width:68ch}
/* hero (home) — full-bleed showroom photograph, copy laid over the left of it.
The gradient is deliberately lighter than the one this started from, which
ran .90 -> .74 -> .32 -> .12 across the frame and made the left half read as
a warehouse at night. This one holds around .62 only as far as the copy
actually reaches (the text column ends at 54% of the viewport) and is gone by
90%, so the right two-thirds of the photograph is untouched.
The copy also sits below the flexbox default. Centred, the eyebrow landed on
the lit ceiling band at the top of the frame and measured 2.05:1 against
white; pushed down onto the shelving it clears AA with room to spare. */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;
min-height:min(78vh,660px);display:flex;align-items:center}
.hero__bg{position:absolute;inset:0;overflow:hidden}
.hero__bg::after{content:"";position:absolute;inset:0;
background:linear-gradient(90deg,
rgba(20,15,12,.52) 0%,rgba(20,15,12,.50) 48%,
rgba(20,15,12,.22) 70%,rgba(20,15,12,.06) 88%,
rgba(20,15,12,0) 100%)}
.hero__bg picture{position:absolute;inset:0;display:block}
.hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
/* The copy sits low in the frame on purpose — see the note above. */
.hero__inner{position:relative;max-width:var(--max);margin:0 auto;
padding:clamp(150px,15vw,220px) 32px clamp(32px,3.6vw,50px);width:100%}
.hero__txt{max-width:680px}
.hero h1{color:#fff;max-width:26ch;font-size:clamp(30px,3.6vw,44px)}
.hero .eyebrow{color:var(--clay-2)}
.hero__sub{font-size:clamp(16px,1.4vw,19px);color:#e6ded6;max-width:56ch;margin:22px 0 0;line-height:1.72}
.hero .btnrow{margin-top:36px}
.hero__facts{display:flex;gap:34px;flex-wrap:wrap;margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.24)}
.hero__fact{display:flex;flex-direction:column;gap:3px}
.hero__fact b{font-family:var(--font-display);font-size:23px;font-weight:600;color:#fff;line-height:1.1}
.hero__fact span{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--clay-2)}
/* CTA band */
.ctaband{background:var(--bark-3);color:#fff;text-align:center;padding:var(--s6) 0}
.ctaband h2{color:#fff;max-width:26ch;margin-left:auto;margin-right:auto}
.ctaband p{color:#c2aea0;max-width:62ch;margin:0 auto 32px}
.ctaband--wash{background:var(--clay-wash);color:var(--ink)}
.ctaband--wash h2{color:var(--ink)}
.ctaband--wash p{color:var(--ink-3)}
/* ------------------------------------------------------------ 09 cards */
/* two-track split */
.tracks{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;
border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--white)}
.track{padding:clamp(30px,3.4vw,50px)}
.track+.track{border-left:1px solid var(--line)}
.track__tag{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--bark);margin-bottom:14px}
.track h3{font-size:clamp(21px,2vw,27px);margin-bottom:12px}
.track p{font-size:15.5px;color:var(--ink-3)}
.track ul{list-style:none;margin:22px 0 0;padding:0}
.track li{position:relative;padding-left:24px;font-size:15px;margin-bottom:11px;color:var(--ink-2)}
.track li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--clay);transform:rotate(45deg)}
.track--dark{background:var(--bark-3);color:#d6c5b8}
.track--dark h3{color:#fff}
.track--dark p{color:#c2aea0}
.track--dark .track__tag{color:var(--clay-2)}
.track--dark li{color:#cdbcae}
.track--dark li::before{background:var(--clay-2)}
/* contact channel card */
.chan{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;height:100%;display:flex;flex-direction:column}
.chan--off{background:var(--blush);border-style:dashed}
.chan__top{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.chan__ic{flex:0 0 48px;width:48px;height:48px;border-radius:50%;background:var(--clay-wash);
color:var(--bark);border:1px solid var(--clay-3);display:flex;align-items:center;justify-content:center}
.chan__ic svg{width:22px;height:22px}
.chan h3{font-size:20px;margin:0}
.chan__addr{font-family:var(--font-body);font-size:14px;color:var(--bark);margin:2px 0 0;word-break:break-word}
.chan__desc{font-size:15px;line-height:1.65;color:var(--ink-3);margin:0 0 24px}
.chan .btn{margin-top:auto}
.chan__off{font-size:13px;color:var(--muted);margin:auto 0 0;padding-top:14px;border-top:1px solid var(--line)}
/* brief checklist */
.brief__list{list-style:none;counter-reset:bf;margin:34px 0 0;padding:0;border-top:1px solid var(--line)}
.brief__list li{counter-increment:bf;position:relative;padding:19px 0 19px 54px;
border-bottom:1px solid var(--line);font-size:15px;line-height:1.62;color:var(--ink-3)}
.brief__list li::before{content:counter(bf,decimal-leading-zero);position:absolute;left:0;top:21px;
font-family:var(--font-body);font-size:11.5px;font-weight:700;letter-spacing:.16em;color:var(--bark);line-height:1}
.brief__list b{display:block;font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--ink);margin-bottom:3px}
.brief__attach{font-size:15px;line-height:1.65;color:var(--ink-2);margin:22px 0 0;padding-left:18px;border-left:3px solid var(--clay-2)}
.brief__copy{display:flex;align-items:center;gap:16px;margin-top:26px;flex-wrap:wrap}
.brief__hint{font-size:13.5px;color:var(--ok);font-weight:600}
.brief__hint[data-state=error]{color:var(--stop);font-weight:400}
.brief__src{position:absolute;left:-9999px;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
/* -------------------------------------------------------- 10 catalogue */
/* series band */
.series{display:grid;gap:0;border-top:1px solid var(--line-2)}
.series__row{
display:grid;grid-template-columns:88px minmax(0,1.1fr) minmax(0,1.5fr) 200px;
gap:34px;align-items:center;padding:34px 0;border-bottom:1px solid var(--line-2);
transition:background-color .25s var(--ease);
}
.series__row:hover{background:var(--clay-wash)}
.series__n{font-family:var(--font-display);font-size:34px;font-weight:600;color:var(--clay);line-height:1}
.series__media{aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-lg);background:var(--blush-2)}
.series__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.series__row:hover .series__media img{transform:scale(1.04)}
.series__body h3{margin:0 0 8px;font-size:clamp(21px,2vw,28px)}
.series__body h3 a:hover{color:var(--bark)}
.series__body p{font-size:15.5px;color:var(--ink-3);margin:0 0 14px}
.series__meta{font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.series__cta{text-align:right}
/* filter bar */
.filters{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;margin-bottom:32px}
.filters__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.filters__foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.filters__count{font-size:13.5px;color:var(--muted)}
.filters__count b{color:var(--ink)}
.filters__reset{background:none;border:0;padding:0;font-size:12.5px;font-weight:700;letter-spacing:.09em;
text-transform:uppercase;color:var(--bark);cursor:pointer;border-bottom:1px solid var(--clay-2)}
.activefilters{display:flex;gap:9px;flex-wrap:wrap;margin:-6px 0 22px}
.activefilters:empty{display:none}
.activefilters button{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;
border:0;border-radius:100px;padding:7px 14px;font-size:12px;cursor:pointer}
.activefilters button::after{content:"×";font-size:15px;line-height:1;opacity:.7}
.empty{text-align:center;padding:70px 20px;border:1px dashed var(--line-2);border-radius:var(--r-lg);background:var(--white)}
.empty h3{margin-bottom:10px}
.empty p{color:var(--muted);font-size:15px;margin-bottom:22px}
/* style catalogue tab strip */
.tabs{display:flex;gap:8px;overflow-x:auto;margin:0 0 22px;padding-bottom:3px;scrollbar-width:none;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
flex:0 0 auto;scroll-snap-align:start;background:transparent;border:1px solid var(--line-2);border-radius:100px;
padding:9px 17px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);
cursor:pointer;white-space:nowrap;transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
.tabs button:hover{border-color:var(--clay)}
.tabs button[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
/* catalogue grid — the product tile */
.results{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:38px 24px}
.results--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
.record{display:flex;flex-direction:column;height:100%}
.record__media{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:var(--r);background:#f3eee8}
.record__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),opacity .35s var(--ease)}
.record:hover .record__media img{transform:scale(1.04)}
/* second image cross-fades in on hover — the tile shows the flat lay, the
hover shows the piece worn. Skipped entirely on touch, where there is no
hover to reveal it. */
.record__img--alt{position:absolute;inset:0;opacity:0}
.record:hover .record__img--alt,.record:focus-within .record__img--alt{opacity:1}
.record__flag{position:absolute;right:12px;top:12px;z-index:2;background:var(--bark);color:#fff;
font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:var(--r)}
.record__body{padding:17px 2px 0;display:flex;flex-direction:column;flex:1}
.record__cat{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--bark);margin-bottom:8px}
.record__name{font-family:var(--font-display);font-size:18px;font-weight:600;line-height:1.3;margin:0 0 10px;color:var(--ink)}
.record__name a:hover{color:var(--bark)}
.record__specs{list-style:none;margin:0;padding:0;font-size:13px;color:var(--muted)}
.record__specs li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px dotted var(--line)}
.record__specs li:last-child{border-bottom:0}
.record__specs span:last-child{color:var(--ink-2);font-weight:600;text-align:right}
@media (hover:none){.record__img--alt{display:none}}
/* style detail */
.sd__hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.sd__main{border-radius:var(--r-lg);overflow:hidden;background:var(--blush-2);border:1px solid var(--line)}
.sd__main img{width:100%;display:block;aspect-ratio:1/1;object-fit:cover}
.sd__thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.sd__thumbs button{padding:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
background:none;cursor:pointer;width:84px;height:84px;opacity:.68;transition:opacity .2s,border-color .2s}
.sd__thumbs button img{width:100%;height:100%;object-fit:cover}
.sd__thumbs button:hover{opacity:1}
.sd__thumbs button[aria-current="true"]{opacity:1;border-color:var(--bark);border-width:2px}
.sd__code{font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--bark);margin-bottom:14px}
.sd__title{font-size:clamp(27px,2.9vw,38px);margin-bottom:16px}
.sd__tag{font-size:17px;color:var(--ink-3);line-height:1.7;margin-bottom:26px}
.sd__points{list-style:none;margin:0 0 30px;padding:0}
.sd__points li{position:relative;padding:11px 0 11px 22px;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink-2)}
.sd__points li::before{content:"";position:absolute;left:2px;top:19px;width:7px;height:7px;background:var(--clay);transform:rotate(45deg)}
.sd__box{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px}
.sd__box h3{font-size:18px;margin-bottom:18px}
.sd__row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
.sd__row:last-of-type{border-bottom:0}
.sd__row span:first-child{color:var(--muted)}
.sd__row span:last-child{font-weight:600;text-align:right;max-width:60%}
.sd__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sd__grid button{padding:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:none;cursor:pointer}
.sd__grid img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
/* ----------------------------------------------------------- 11 process */
.rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 18px;counter-reset:r}
.rail__step{counter-increment:r}
.rail__media{aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);background:var(--blush-2);position:relative}
.rail__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.rail__step:hover .rail__media img{transform:scale(1.05)}
.rail__media::before{
content:counter(r,decimal-leading-zero);position:absolute;left:0;top:0;z-index:2;
background:var(--bark);color:#fff;font-size:11px;font-weight:700;letter-spacing:.1em;
padding:5px 10px;font-family:var(--font-body);
}
.rail__t{font-family:var(--font-display);font-size:16.5px;font-weight:600;margin:13px 0 5px;line-height:1.3}
.rail__d{font-size:13.5px;color:var(--muted);line-height:1.6;margin:0}
/* gallery */
.gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.gal figure{margin:0}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);background:var(--blush-2)}
.gal figcaption{font-size:12.5px;color:var(--muted);margin-top:9px;line-height:1.5}
.gal--wide{grid-template-columns:repeat(3,minmax(0,1fr))}
.gal--masonry{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:180px}
.gal--masonry figure:nth-child(1){grid-column:span 2;grid-row:span 2}
.gal--masonry figure:nth-child(4){grid-row:span 2}
.gal--masonry figure:nth-child(6){grid-column:span 2}
.gal--masonry img{height:100%;aspect-ratio:auto}
/* ------------------------------------------------------- 12 certificates */
.cert{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.dcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
overflow:hidden;height:100%;display:flex;flex-direction:column;
transition:box-shadow .3s var(--ease),border-color .3s var(--ease)}
.dcard:hover{box-shadow:var(--sh-sm);border-color:var(--line-2)}
.dcard__doc{position:relative;background:var(--blush-2);border-bottom:1px solid var(--line);
padding:22px;display:flex;align-items:center;justify-content:center;min-height:280px}
.dcard__doc img{max-height:300px;width:auto;max-width:100%;object-fit:contain;
border:1px solid var(--line);box-shadow:0 6px 22px rgba(52,38,28,.13);background:#fff}
.dcard__body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.dcard__title{font-family:var(--font-display);font-size:19px;font-weight:600;line-height:1.3;margin:0 0 8px}
.dcard__meta{font-size:12.5px;color:var(--muted);margin:0 0 16px}
.dcard__list{list-style:none;margin:0 0 18px;padding:0;font-size:13.5px}
.dcard__list li{padding:8px 0;border-bottom:1px dotted var(--line);display:flex;gap:12px}
.dcard__list li:last-child{border-bottom:0}
.dcard__list dt,.dcard__list span:first-child{color:var(--muted);flex:0 0 92px}
.dcard__list span:last-child{color:var(--ink-2);font-weight:500;flex:1}
.dcard__note{font-size:13.5px;line-height:1.6;color:var(--ink-3);margin:0;padding-top:16px;border-top:1px solid var(--line)}
.dcard__note--warn{color:#7a5316}
.dcard__foot{margin-top:auto;padding-top:18px}
.dcard--flag{border-color:#e6cdc5}
.dcard--flag .dcard__doc{background:var(--stop-wash)}
/* -------------------------------------------------------------- 13 forms */
.form{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(28px,3.4vw,48px)}
.form__sec{padding-bottom:34px;margin-bottom:34px;border-bottom:1px solid var(--line)}
.form__sec:last-of-type{border-bottom:0;padding-bottom:0;margin-bottom:0}
.form__legend{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
.form__num{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--bark);
border:1px solid var(--clay);border-radius:50%;width:32px;height:32px;display:flex;
align-items:center;justify-content:center;flex:none}
.form__legend h3{font-size:21px;margin:0}
.form__hint{font-size:14.5px;color:var(--muted);margin:0 0 24px 46px}
.form__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.form__grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.form__note{font-size:12.5px;color:var(--muted);margin-top:10px}
.form__drop{border:1px dashed var(--line-2);border-radius:var(--r);padding:30px 24px;text-align:center;
background:var(--blush);cursor:pointer;transition:border-color .2s,background-color .2s}
.form__drop:hover{border-color:var(--clay);background:var(--clay-wash)}
.form__drop svg{width:30px;height:30px;color:var(--bark);margin:0 auto 12px}
.form__drop b{display:block;font-family:var(--font-display);font-size:16px;margin-bottom:5px}
.form__drop span{font-size:13px;color:var(--muted)}
.form__drop input{display:none}
.form__foot{margin-top:32px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
/* The submit result. A form that looks like it sent but did not is worse than
no form, so the outcome is always stated in the page — not left to the
visitor noticing whether their mail client opened. */
.form__status{margin-top:22px;padding:14px 18px;border-radius:var(--r);font-size:14.5px;line-height:1.6;border:1px solid}
.form__status[data-state="ok"]{background:var(--ok-wash);border-color:var(--ok);color:var(--ok)}
.form__status[data-state="error"]{background:var(--stop-wash);border-color:var(--stop);color:var(--stop)}
.form__status[data-state="note"]{background:var(--clay-wash);border-color:var(--line-3);color:var(--ink-2)}
.form__status a{text-decoration:underline;text-underline-offset:2px}
.form button[type="submit"][disabled]{opacity:.6;cursor:progress}
.form__consent{font-size:12.5px;color:var(--muted);max-width:54ch}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.field select,.field input,.field textarea{
font-family:var(--font-body);font-size:15px;color:var(--ink);background:var(--white);
border:1px solid var(--line-2);border-radius:var(--r);padding:13px 14px;width:100%;
transition:border-color .18s,box-shadow .18s;
}
.field select{appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 14px center;background-size:11px;padding-right:38px}
.field select:focus,.field input:focus,.field textarea:focus{outline:none;border-color:var(--clay);box-shadow:0 0 0 3px rgba(199,164,136,.2)}
.field textarea{min-height:120px;resize:vertical;line-height:1.65}
.field--wide{grid-column:1/-1}
.checkline{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--ink-2)}
.checkline input{width:17px;height:17px;margin-top:4px;accent-color:var(--bark);flex:none}
.formside{position:sticky;top:calc(var(--hdr-h) + 24px)}
.formside__box{background:var(--blush-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px}
.formside__box+.formside__box{margin-top:22px}
.formside__box h3{font-size:19px;margin-bottom:16px}
.formside__list{list-style:none;margin:0;padding:0}
.formside__list li{padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink-2)}
.formside__list li:last-child{border-bottom:0}
.formside__list b{display:block;font-family:var(--font-display);font-size:15px;color:var(--ink);margin-bottom:2px}
.formside__box .spec{background:transparent;border:0;border-radius:0;overflow:visible}
.formside__box .spec th,.formside__box .spec td{display:block;width:auto;padding:0;border:0;background:transparent;text-align:left}
.formside__box .spec tr{display:block;padding:11px 0;border-bottom:1px solid var(--line)}
.formside__box .spec tr:last-child{border-bottom:0}
.formside__box .spec th{font-family:var(--font-display);font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:3px}
.formside__box .spec td{font-size:14px;color:var(--ink-2)}
/* -------------------------------------------------------------- 14 prose */
.prose{max-width:var(--narrow)}
.prose>*+*{margin-top:1.15em}
.prose h2{font-size:clamp(24px,2.5vw,32px);margin-top:2.1em;padding-top:.2em}
.prose h3{font-size:clamp(19px,1.9vw,23px);margin-top:1.7em}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p,.prose li{font-size:16.5px;line-height:1.78;color:var(--ink-2)}
.prose ul,.prose ol{padding-left:1.3em;margin:1.15em 0}
.prose li{margin-bottom:.6em}
.prose li::marker{color:var(--bark)}
.prose blockquote{margin:1.8em 0;padding:6px 0 6px 28px;border-left:3px solid var(--clay);
font-family:var(--font-display);font-size:19px;line-height:1.6;color:var(--ink-2)}
.prose table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:14.5px}
.prose th,.prose td{border:1px solid var(--line);padding:12px 15px;text-align:left;vertical-align:top}
.prose th{background:var(--blush-2);font-weight:600;font-size:13.5px}
.prose td{color:var(--ink-2)}
.prose code{background:var(--blush-2);padding:2px 7px;border-radius:3px;font-size:13.5px}
.prose .note{margin:1.8em 0}
.prose figure{margin:2em 0}
.prose figure img{border-radius:var(--r-lg);border:1px solid var(--line)}
.prose img{max-width:100%;height:auto}
.prose__fig{margin:2.3em 0}
.prose__fig img{width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--line);display:block}
.prose__fig figcaption{font-size:13px;color:var(--muted);margin-top:12px;line-height:1.6}
/* toc */
.toc{background:var(--blush-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 30px;margin-bottom:44px}
.toc h4{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
font-family:var(--font-body);color:var(--muted);margin-bottom:16px}
.toc ol{list-style:none;counter-reset:t;margin:0;padding:0;columns:2;column-gap:32px}
.toc li{counter-increment:t;margin-bottom:9px;font-size:14.5px;break-inside:avoid}
.toc a{color:var(--ink-2);border-bottom:1px solid transparent}
.toc a:hover{color:var(--bark);border-color:var(--clay-2)}
.toc a::before{content:counter(t,decimal-leading-zero) " ";color:var(--bark);font-weight:600;font-size:12.5px}
/* article card */
.acard{display:flex;flex-direction:column;height:100%;background:var(--white);border:1px solid var(--line);
border-radius:var(--r-lg);overflow:hidden;transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.acard:hover{box-shadow:var(--sh-sm);transform:translateY(-3px)}
.acard__media{aspect-ratio:16/9;overflow:hidden;background:var(--blush-2);margin:0}
.acard__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.acard:hover .acard__media img{transform:scale(1.04)}
.acard__body{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1}
.acard__topic{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bark);margin-bottom:12px}
.acard__title{font-family:var(--font-display);font-size:19px;font-weight:600;line-height:1.34;margin:0 0 12px}
.acard:hover .acard__title{color:var(--bark)}
.acard__desc{font-size:15px;color:var(--ink-3);line-height:1.68;margin-bottom:18px}
.acard__more{margin-top:auto;font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
/* pager */
.pager{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:var(--s5);
padding-top:var(--s4);border-top:1px solid var(--line)}
.pager a{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;background:var(--white);transition:border-color .2s}
.pager a:hover{border-color:var(--clay)}
.pager span{display:block;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.pager b{font-family:var(--font-display);font-size:16.5px;font-weight:600}
.pager--right{text-align:right}
/* ------------------------------------------------ 15 section components */
/* Ported from the reference build the client supplied — luxudress.com, and
its source in ./02. The behaviour is kept; the palette is not. Their greens
and golds map onto Aston's bark and clay, so the two sites share a rhythm —
the overlapping discovery panel, the full-bleed trust strip, the captioned
gallery, the facet toolbar — without sharing a colour scheme. */
/* trust strip — sits directly under the hero and states four things a buyer
can check. These used to be a row inside the hero, over the photograph,
where they competed with the picture; on a solid ground they read.
flex-wrap:wrap, not nowrap: the four labels have `white-space:nowrap`, so
their natural row is a fixed 1104px. With nowrap that row overhung every
viewport between 901px and 1103px — the 900px breakpoint below was the only
thing that ever caught it. Wrapping on the base rule means the strip fits
at any width; at >=1104px the result is byte-identical to the old row. */
.trust{background:var(--ink);color:#e6ded4}
.trust__inner{max-width:var(--max);margin:0 auto;padding:16px 32px;display:flex;gap:24px;
flex-wrap:wrap;justify-content:space-between;align-items:center;
font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.trust__inner span{white-space:nowrap}
.trust__inner span{display:inline-flex;align-items:center;gap:8px;opacity:.92}
.trust__inner b{color:#fff;font-weight:700}
.trust__inner svg{width:14px;height:14px;color:var(--clay-2);flex:none}
/* Between 901px and 1135px the four labels no longer fit on one row — their
natural row is 1000px of text + 3×24px gaps + 64px padding = exactly 1136px —
so the strip wraps to two lines. `space-between` across a wrapped row spreads
the first line edge to edge and strands the tail item at the left margin, so
centre the lines while they wrap. Above 1135px the row is untouched, and at
900px and below the phone rules below take over. */
@media (min-width:901px) and (max-width:1135px){
.trust__inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
justify-items:start;gap:14px 28px}
}
/* discovery panel — pulled up over the hero, so it reads as a tool laid on
the photograph rather than a section that merely follows it. */
.discover{background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);
box-shadow:var(--sh);padding:34px clamp(24px,3vw,40px) 36px}
.discover h2{font-size:clamp(21px,2.2vw,29px);margin-bottom:8px}
.discover__sub{font-size:14.5px;color:var(--muted);margin-bottom:26px;max-width:74ch}
.discover__fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:22px}
/* field — one label/control pair, shared by the discovery panel and the
enquiry form, so a select looks the same wherever it appears. */
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.field select,.field input,.field textarea{font-family:var(--font-body);font-size:14.5px;color:var(--ink);
background:var(--white);border:1px solid var(--line-2);border-radius:var(--r);padding:13px 14px;width:100%;
transition:border-color .18s,box-shadow .18s}
.field select{appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 14px center;background-size:11px;padding-right:38px}
.field select:focus,.field input:focus,.field textarea:focus{outline:none;border-color:var(--clay);
box-shadow:0 0 0 3px rgba(199,164,136,.22)}
.field--wide{grid-column:1/-1}
/* captioned editorial gallery — the factory and process photographs. */
.lx-gallery figure{margin:0}
.lx-gallery img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg);
border:1px solid var(--line);background:var(--blush-2)}
.lx-gallery figcaption{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.55}
.lx-gallery figcaption b{display:block;color:var(--ink-2);font-weight:600;margin-bottom:3px}
/* flow gallery — for the show photographs, which are a genuine mix of 4:3 and
3:4. Forcing them into one box crops a third off every portrait frame, and
a booth photograph with the top of someone's head missing is worse than a
gallery that is not a perfect rectangle. CSS columns keep every frame at
the ratio it was shot at. */
.gal--flow{display:block;columns:3;column-gap:14px}
.gal--flow figure{break-inside:avoid;margin:0 0 14px}
.gal--flow img{width:100%;height:auto;aspect-ratio:auto;object-fit:initial}
/* wide figure — one uncropped photograph used as a section divider. */
.rangefig{margin:0}
.rangefig img{width:100%;height:auto;display:block;border-radius:var(--r-lg);background:var(--blush-2)}
/* channel rows — who we sell to, as rows rather than cards, so the list can
run to seven entries without becoming a wall of boxes. */
.chanrow{align-items:stretch}
.chanrow__note{font-size:14px;line-height:1.7;color:var(--muted);max-width:74ch;margin:28px auto 0;text-align:center}
.chanrow__note a{color:var(--bark);font-weight:600;border-bottom:1px solid var(--clay-2)}
/* style library ---------------------------------------------------------- */
/* A product-first catalogue: headline, count and facet toolbar are kept short
so the first row of garments lands inside the first viewport. */
.phead--styles{padding:42px 0 46px}
.phead--styles .crumbs{margin-bottom:28px}
.phead--styles .eyebrow{margin-bottom:12px}
.phead--styles h1{font-size:clamp(38px,4.2vw,60px);margin-bottom:14px}
.phead--styles .lead{font-size:18px;max-width:62ch}
.sl__count{font-size:13.5px;color:var(--muted);margin:0 0 5px;white-space:nowrap}
.sl__count b{color:var(--ink);font-size:16px}
.style-tools{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:12px;margin-bottom:20px}
.style-search label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.style-search input{height:54px;padding:0 18px;border-color:var(--line-2);background:var(--white);font-size:14px}
.style-search input:focus{border-color:var(--clay);box-shadow:0 0 0 3px rgba(199,164,136,.2);outline:0}
.style-filters summary{height:54px;display:flex;flex-direction:column;justify-content:center;position:relative;
background:var(--white);border:1px solid var(--line-2);border-radius:var(--r);padding:0 46px 0 18px;
cursor:pointer;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;list-style:none}
.style-filters summary::-webkit-details-marker{display:none}
.style-filters summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);
font-size:20px;font-weight:400;color:var(--bark)}
.style-filters[open] summary::after{content:"\2212"}
.style-filters summary span{display:block;margin-top:2px;color:var(--muted);font-size:10.5px;font-weight:500;
letter-spacing:0;text-transform:none}
.style-filters__panel{position:absolute;z-index:20;left:0;right:0;top:66px;background:var(--white);
border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:0 18px 45px rgba(52,38,28,.13)}
.style-filters__panel .filters__row{grid-template-columns:repeat(5,minmax(0,1fr))}
.style-filters__foot{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:20px;
padding-top:18px;border-top:1px solid var(--line)}
.style-filters__foot p{font-size:13px;color:var(--muted);margin:0}
.results.results--styles{grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 24px}
/* style detail — the colour cards under the gallery, so the colour range is
visible without opening the factory's own sheet. */
.sd__colors{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.sd__color{background:none;border:0;padding:0;cursor:pointer;text-align:center}
.sd__color img{width:106px;height:106px;object-fit:cover;border:1px solid var(--line);border-radius:var(--r);
transition:border-color .2s}
.sd__color[aria-pressed="true"] img{border-color:var(--bark);border-width:2px}
.sd__color span{display:block;font-size:12px;color:var(--muted);margin-top:7px}
/* feature card — spans two columns and turns horizontal, for the one article
or category that should carry the section. */
.acard--feature{grid-column:span 2;flex-direction:row;gap:34px;align-items:center}
.acard--feature .acard__media{flex:none;width:280px;border-radius:var(--r-lg);overflow:hidden;
aspect-ratio:4/3;background:var(--blush-2)}
.acard--feature .acard__media img{width:100%;height:100%;object-fit:cover}
/* small marks */
.pill--deep{background:rgba(131,90,66,.09);color:var(--bark-2);border-color:rgba(131,90,66,.2)}
.chip--on,.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
/* --------------------------------------------- 16 the range (home) ------- */
/* Four families read side by side, not stacked as four full-width rows. The
row layout gave each series a 240px photograph and a column of text that
pushed the fourth family off the fold; four equal cards let a buyer compare
knit weights against each other, which is the only reason the section is on
the page at all. The image is square because every product photograph the
factory supplies is square — nothing is cropped to fit.
The card is the photograph, the name and one paragraph. It used to carry a
Styles / Weight / Composition table and a "View series" link as well, which
turned four shop windows into four specification sheets: the weight and the
composition are on the series page, one click away, and the whole card is
already that link. */
.range{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.range__card{display:flex;flex-direction:column}
.range__media{display:block;border-radius:var(--r-lg);overflow:hidden;background:var(--blush-2)}
.range__media img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
transition:transform .55s var(--ease)}
.range__card:hover .range__media img{transform:scale(1.035)}
.range__body{display:flex;flex-direction:column;flex:1;padding-top:20px}
.range__n{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
color:var(--clay);display:block;margin-bottom:7px}
.range__body h3{font-size:19.5px;margin:0 0 9px;line-height:1.25}
.range__blurb{font-size:14px;color:var(--ink-2);line-height:1.62;margin:0}
/* ------------------------------------------- 17 company tiles (home) ----- */
/* Six equal doors, in the astongarment.com idiom: a soft card, a circular
icon, a label and one line of what is behind it. */
.ptiles{gap:22px}
.ptile{display:block;background:var(--white);border:1px solid var(--line);
border-radius:var(--r-lg);padding:30px 28px 28px;
transition:border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease)}
.ptile:hover{border-color:var(--clay);transform:translateY(-3px);
box-shadow:0 16px 38px rgba(52,38,28,.09)}
.ptile__ic{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
background:var(--clay-wash);color:var(--bark);margin-bottom:20px}
.ptile__ic svg{width:24px;height:24px}
.ptile h4{font-family:var(--font-body);font-size:16.5px;font-weight:600;letter-spacing:0;
text-transform:none;color:var(--ink);margin:0 0 8px}
.ptile p{font-size:14px;color:var(--muted);line-height:1.62;margin:0}
/* ------------------------------------------- 18 exhibition wall (home) ---- */
/* One square, twelve frames, four across. The photographs are a genuine mix
of landscape and portrait, and the column flow this started as kept every
frame whole — but it also left the columns ending at three different
heights, which reads as a mistake rather than as a wall. A square crop of
each frame lines the row up and matches the 1:1 the product photography
already uses everywhere else on the page. */
.hall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.hall figure{margin:0}
.hall a{display:block;border-radius:var(--r);overflow:hidden;background:var(--blush-2)}
.hall img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
transition:transform .55s var(--ease)}
.hall a:hover img{transform:scale(1.03)}
/* --------------------------------------------------------- 19 responsive */
/* The desktop nav stops at 1200, not 1160. At 1161 the header row could not
hold the brand, six menu items and the quote button inside the 32px page
padding: the button's right edge landed at 1162.4 on a 1161px viewport, a
1.4px overflow and a visible horizontal scrollbar. The row fits from 1201 up,
which the width sweep confirms. */
@media (max-width:1200px){
.nav,.hdr__cta{display:none}
.burger{display:block}
.drawer{display:block}
.results{grid-template-columns:repeat(3,minmax(0,1fr))}
.rail{grid-template-columns:repeat(4,minmax(0,1fr))}
.cert{grid-template-columns:repeat(2,minmax(0,1fr))}
.series__row{grid-template-columns:70px minmax(0,1fr) minmax(0,1.4fr);gap:26px}
.series__cta{display:none}
.aside{grid-template-columns:minmax(0,1fr)}
.aside--left{grid-template-columns:minmax(0,1fr)}
.formside{position:static}
.ftr__top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px}
.strip__inner{grid-template-columns:repeat(2,minmax(0,1fr))}
.strip__i:nth-child(3){padding-left:0;border-left:0;border-top:1px solid var(--line-2)}
.strip__i:nth-child(4){border-top:1px solid var(--line-2)}
}
@media (max-width:900px){
:root{--s7:62px;--s6:52px}
.sec{padding:var(--s6) 0}
.split,.split--wide,.split--narrow-l{grid-template-columns:minmax(0,1fr);gap:34px}
.tracks{grid-template-columns:minmax(0,1fr)}
.track+.track{border-left:0;border-top:1px solid var(--line)}
.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.sd__hero{grid-template-columns:minmax(0,1fr);gap:32px}
.sd__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.gal{grid-template-columns:repeat(2,minmax(0,1fr))}
.gal--masonry{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:150px}
.gal--masonry figure:nth-child(1),.gal--masonry figure:nth-child(4),.gal--masonry figure:nth-child(6){grid-column:span 1;grid-row:span 1}
.rail{grid-template-columns:repeat(3,minmax(0,1fr))}
.toc ol{columns:1}
.range{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
/* The hero stops being a fixed-height band and grows to whatever the copy
needs. The phone gets the portrait window cut out of the panorama,
delivered as a in the markup, framed so the racks sit behind the
type rather than the skylights. No overlay here either. */
.hero{min-height:auto}
/* The horizontal fade only protects the left column, which is fine on a
desktop where the copy stops at 54% of the viewport. On a phone the copy
spans the full width and sits over the lit ceiling, so the scrim has to be
an even wash with a little extra at the top. Measured on the frame, the
copy band runs to a 95th percentile of 176 — 2.17:1 against white — and no
crop of this photograph does better, because it is the pale floor and the
pale garments that fill the frame. At .62 the same pixels measure 4.6:1. */
.hero__bg::after{background:linear-gradient(180deg,
rgba(20,15,12,.66) 0%,rgba(20,15,12,.60) 46%,
rgba(20,15,12,.56) 100%)}
.hero__bg img{object-position:40% 48%}
.hero__inner{padding:44px 20px 48px}
.hall{grid-template-columns:repeat(3,minmax(0,1fr))}
.trust__inner{flex-wrap:wrap;gap:14px 22px;padding:14px 20px;font-size:10.5px;justify-content:center}
.gal--flow{columns:2}
.claims{grid-template-columns:minmax(0,1fr)}
.claim{padding:28px 0}
.claim:nth-child(even){padding-left:0;border-left:0}
.filters__row{grid-template-columns:repeat(2,minmax(0,1fr))}
.spec{table-layout:fixed;width:100%}
.spec th,.spec td{overflow-wrap:anywhere}
.prose table{table-layout:fixed;width:100%}
.prose th,.prose td{overflow-wrap:anywhere}
.aside>*{min-width:0}
.brief__list li{padding-left:0;padding-top:16px}
.brief__list li::before{position:static;display:block;margin-bottom:7px}
}
@media (max-width:680px){
.wrap,.narrow,.phead__inner,.ftr__top,.ftr__bottom-inner,.hdr__inner,.utilbar__inner,.strip__inner,.hero__inner{padding-left:20px;padding-right:20px}
:root{--s7:50px;--s6:42px;--hdr-h:68px}
/* The fabric filter is a primary control, so on a phone the chips wrap onto
two rows rather than hiding three of them off the right edge. */
.tabs{flex-wrap:wrap;overflow-x:visible;gap:7px}
.tabs button{padding:8px 14px;font-size:12px}
.g2,.g3,.g4,.form__grid,.form__grid--3,.pager,.filters__row,.strip__inner{grid-template-columns:minmax(0,1fr)}
.strip__i{padding:20px 0;border-left:0!important;padding-left:0!important}
.strip__i+.strip__i{border-top:1px solid var(--line-2)}
.results,.results--3{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px}
.record__body{padding:13px 1px 0}
.record__name{font-size:15.5px;margin-bottom:9px}
.record__specs{display:none}
.record__cat{font-size:9.5px;margin-bottom:6px}
.rail{grid-template-columns:repeat(2,minmax(0,1fr))}
.cert{grid-template-columns:minmax(0,1fr)}
.stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.sd__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.series__row{grid-template-columns:minmax(0,1fr);gap:18px;padding:26px 0}
.series__n{font-size:26px}
.btnrow .btn{width:100%}
/* The trust strip stays on a phone. It was hidden at this width, but the
four facts it carries — the count, the MOQ, the dispatch window, the
label service — are the first things a buyer checks, and a three-line
strip costs less than making them scroll to find the same numbers. */
.trust__inner{gap:9px 18px;padding:13px 20px;font-size:10px;justify-content:flex-start}
.discover{margin-top:0;padding:24px 20px 26px}
.discover__fields{grid-template-columns:minmax(0,1fr)}
.range{grid-template-columns:minmax(0,1fr);gap:30px}
.hall{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.style-tools{grid-template-columns:minmax(0,1fr)}
.style-filters__panel{position:static;margin-top:8px;padding:18px;box-shadow:none}
.style-filters__panel .filters__row{grid-template-columns:minmax(0,1fr)}
.style-filters__foot{align-items:flex-start;flex-direction:column}
.results.results--styles{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px}
.acard--feature{grid-column:span 1}
.gal--flow{columns:1}
.phead--styles{padding:30px 0 34px}
.phead--styles h1{font-size:clamp(34px,10vw,46px)}
.utilbar{display:none}
.stickycta{display:block}
body{padding-bottom:64px}
.totop{right:16px;bottom:78px}
.ftr__top{grid-template-columns:minmax(0,1fr);gap:30px}
h1{font-size:32px}
.steps li{padding:0 0 24px 54px;margin-left:18px}
.faq__a{padding-right:0}
.brand__mark{width:36px;height:36px;font-size:17px}
.brand__name{font-size:19px}
}
/* 360px-wide Android phones: the wordmark's letter-spaced strapline is what
pushes the burger button off the right edge, so the strapline tightens rather
than the type shrinking. */
@media (max-width:420px){
.hdr__inner{gap:14px}
.brand__sub{font-size:8px;letter-spacing:.12em}
.burger{padding:8px}
}
/* QQ browser and WeChat render both "save as image" and "save as PDF" through
the print pipeline rather than the screen one. This block used to hide .hdr
along with the footer and the utility bar, so every export of every page came
out with no brand and no navigation and read as a broken page. The header now
prints, flattened: un-stuck, blur removed, and the desktop nav forced back on
because the print canvas is narrower than the 1200px breakpoint and would
otherwise swap it for the burger. The dropdown panels stay off — on paper
they would cover the content they are meant to lead to. */
@media print{
.hdr{display:block;position:static;background:#fff;backdrop-filter:none;border-bottom:1px solid var(--line)}
.hdr__inner{display:block;height:auto;padding:12px 20px}
.nav{display:flex;margin:9px 0 0;flex-wrap:wrap}
.nav__link{padding:4px 9px 4px 0;font-size:11px;gap:4px}
.nav__link::after{display:none}
.nav__panel{display:none}
.hdr__cta{display:none}
.burger,.drawer{display:none}
/* Restore everything else so "save as image / PDF" exports look exactly like
the screen rather than a stripped-down print view. Fixed-position bars are
flattened to static so they land in the document flow instead of overlaying
content at arbitrary page breaks. */
.stickycta,.totop{position:static}
:root{print-color-adjust:exact;-webkit-print-color-adjust:exact}
.hero{min-height:440px}
body{background:#fff}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}
/* The homepage production flow runs four-up: eight stops read as two even rows,
where the default five-column rail leaves a ragged row of three. Declared at
the end of the sheet on purpose — the rail's own breakpoints appear above, and
at equal specificity the later rule wins. */
.rail--flow{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.rail--flow{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:680px){.rail--flow{grid-template-columns:repeat(2,minmax(0,1fr))}}