/* ============================================================
   SEVENONIC: the selvedge, editorial pass (24 Sep 2026)
   The printed edge of the roll (mill code, registration dots,
   tenter pin holes) carried by a fashion house's page: a Didone
   display line, garment-led crops, three depths of the brand
   blue and one rose taken from the garments.
   Class reference: build-notes/design-system.md
   ============================================================ */

:root{
  /* three depths of the brand blue */
  --paper:      #F2F6FA;   /* reading ground: tables, text, the body */
  --cloth:      #DAE6F1;   /* photo mats, hero, bands (the v2 ground) */
  --mid:        #9FBAD4;   /* one bold full-bleed band per page, at most */
  --cloth-2:    #E8F0F7;   /* inputs, result panel */
  --cloth-3:    #C7DAEA;   /* image placeholder ground */
  --blank:      #CEDCE9;   /* unfilled field ground */

  /* the print */
  --ink:        #142639;
  --ink-2:      #2B4560;
  --ink-3:      #3D5C77;
  --rev:        #E8F0F7;
  --rev-2:      #A2BDD6;
  --navy-2:     #1E3550;   /* a raised surface on navy */

  --rule:       #B3C9DC;
  --rule-2:     #8AA8C4;

  /* the one accent, from the floral rose in the garments */
  --rose:       #D68CA9;   /* fills, underlines, rose text on navy only */
  --rose-deep:  #9B3A62;   /* rose used as text on the light grounds */
  --error:      #9E3320;

  /* registration dots: the colourways this factory actually runs */
  --reg-1:      #1F7A70;
  --reg-2:      #E4695A;
  --reg-3:      #DFB63A;
  --reg-4:      #D68CA9;
  --reg-5:      #6E9A5A;

  --s-2xs: 4px;  --s-xs: 8px;  --s-sm: 12px; --s-md: 18px;
  --s-lg: 28px;  --s-xl: 44px; --s-2xl: 68px; --s-3xl: 104px;

  /* section rhythm: tight for specs, standard, loose for photographs */
  --pad-tight: clamp(40px, 5vw, 64px);
  --pad:       clamp(64px, 8vw, 104px);
  --pad-loose: clamp(88px, 11vw, 168px);

  --serif:   'Bodoni Moda', 'Bodoni 72', Didot, 'Times New Roman', serif;
  --display: var(--serif);
  --sans:    'Archivo', system-ui, sans-serif;
  --narrow:  'Archivo Narrow', 'Archivo', system-ui, sans-serif;
  --body:    'Archivo', system-ui, sans-serif;
  --data:    'Martian Mono', ui-monospace, monospace;   /* codes and measurements only */

  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --wrap: 1180px;
  --gut: 28px;
  --inner: calc(var(--wrap) - 2 * var(--gut));   /* 1124px content width */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:500 17px/1.62 var(--body);
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums lining-nums;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration-color:var(--rose);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--rose-deep)}
[id]{scroll-margin-top:96px}

/* --- browser surfaces: these ship with the design, not the browser --- */
::selection{background:var(--rose);color:var(--ink)}
:root{accent-color:var(--ink);caret-color:var(--rose-deep);color-scheme:light}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.mark :focus-visible,.foot :focus-visible{outline-color:var(--rose)}
html{scrollbar-color:var(--rule-2) var(--paper);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:var(--rule-2);border:3px solid var(--paper)}
::-webkit-scrollbar-thumb:hover{background:var(--rose)}

/* ============================================================
   TYPE
   Serif (Bodoni Moda) for H1, H2, pull lines and the big field
   numerals. Archivo for H3 and everything functional. Archivo
   Narrow for labels, legends and nav. Mono only for codes.
   ============================================================ */
h1,h2,.pull{margin:0;text-wrap:balance;}
h1,.pull{font-family:var(--serif);font-weight:400;
  font-optical-sizing:auto;font-kerning:normal}
h1{font-size:clamp(2.5rem, 1.35rem + 5vw, 6rem);line-height:1.06;letter-spacing:-0.012em}
/* h2 moved to Archivo 28 Sep: at 32px on phones Bodoni's hairlines thin out and read poorly */
h2{font-family:var(--body);font-size:clamp(1.75rem, 1.25rem + 2vw, 2.75rem);line-height:1.12;letter-spacing:-0.012em;font-weight:600}
h3{margin:0;font:700 1.06rem/1.3 var(--sans);letter-spacing:-0.012em;text-wrap:balance}
h1 em,h2 em,.pull em,.cap-lead,figcaption b{font-style:italic}
h1 em,h2 em,.pull em{font-weight:inherit}
p{margin:0 0 var(--s-md);max-width:68ch}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(1.08rem,1.7vw,1.3rem);line-height:1.5;color:var(--ink-2);max-width:54ch}
strong{font-weight:700}

/* the pull line: one oversized serif sentence per page */
.pull{font-size:clamp(2.6rem, 1.2rem + 5.4vw, 6rem);line-height:1.06;letter-spacing:-0.014em;
  max-width:17ch;color:var(--ink)}
.pull + p,.pull + .lede{margin-top:var(--s-lg)}
.pull-in{margin-left:calc(100% / 12 * 2)}            /* indented two columns of twelve */
.pull-end{margin-left:auto;text-align:right}
.pull-end + p,.pull-end + .lede{margin-left:auto}

/* the selvedge legend: small printed data along the edge of the cloth.
   Separators are drawn and clipped at line starts, so a wrapped line
   never begins with a stray rule. */
.legend{
  font:700 13px/1.25 var(--narrow); letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); display:flex; flex-wrap:wrap; align-items:center;
  column-gap:var(--s-md); row-gap:6px; position:relative; overflow:hidden; padding-block:3px;
}
.legend > span{position:relative}
.wrap.legend{clip-path:inset(0 calc(var(--gut) - 4px))}
.legend > span + span::before{content:'';position:absolute;left:calc(var(--s-md) / -2);top:50%;
  width:1px;height:.95em;transform:translateY(-50%);background:var(--rule-2)}
.legend b{font-weight:700;color:var(--ink)}
.legend .sep{color:var(--rule-2)}
.mark .legend{color:var(--rev-2)} .mark .legend b{color:var(--rev)}
.mark .legend > span + span::before{background:var(--ink-3)}
.mark .legend .sep{color:var(--ink-3)}

.code{font:400 11px/1 var(--data);letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-3)}
.lbl{font:700 13px/1.2 var(--narrow);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);display:block}
.mark .lbl{color:var(--rev-2)}

/* ============================================================
   LAYOUT AND RHYTHM
   ============================================================ */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
section{padding:var(--pad) 0}
section.tight{padding:var(--pad-tight) 0}
section.loose{padding:var(--pad-loose) 0}
section.flush{padding:0}
section.flush-top{padding-top:0}
section.flush-bottom{padding-bottom:0}

/* grounds: paper is the default. One band-mid per page at most. */
.band-paper{background:var(--paper)}
.band-cloth{background:var(--cloth)}
.band-mid{background:var(--mid);color:var(--ink)}
.band-mid p,.band-mid .lede{color:var(--ink-2)}
.band-mid .lbl,.band-mid .legend,.band-mid .row .k,.band-mid .code{color:var(--ink)}
.band-mid .legend > span + span::before{background:var(--ink-2)}
.band-mid .rows,.band-mid .fields{border-top-color:var(--ink-2)}
.band-mid .row,.band-mid .field{border-color:rgba(20,38,57,.28)}
.band-mid .field .u,.band-mid figcaption{color:var(--ink-2)}

.mark{background:var(--ink);color:var(--rev)}
.mark h1,.mark h2,.mark h3,.mark .pull{color:var(--rev)}
.mark p{color:var(--rev-2)}
.mark .lede{color:var(--rev-2)}
.mark a:not(.act){color:var(--rev)}
.mark a:not(.act):hover{color:var(--rose)}

/* tenter pin holes: the row of holes the stenter leaves along a real
   selvedge. Printed along the top edge of every navy and mid band. */
.mark,.band-mid{position:relative}
.mark::before,.band-mid::before{
  content:'';position:absolute;left:0;right:0;top:10px;height:4px;pointer-events:none;
  background:radial-gradient(circle at 2px 2px, var(--pin, rgba(162,189,214,.34)) 1.3px, transparent 1.9px) 0 0/14px 4px repeat-x;
}
.band-mid{--pin:rgba(20,38,57,.26)}
.mark.no-pins::before,.band-mid.no-pins::before{content:none}

/* the selvedge rule: a printed edge between regions */
.selvedge{border-top:1px solid var(--rule);padding-top:var(--s-sm)}
.mark .selvedge{border-top-color:var(--ink-3)}

/* the selvedge strip: pin holes, registration dots and the mill legend,
   printed as the top edge of a band. Decorative: aria-hidden. */
.selvedge-strip{position:relative;padding:22px 0 12px;border-bottom:1px solid var(--rule);color:var(--ink-3)}
.selvedge-strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-md)}
.selvedge-strip::before{content:'';position:absolute;left:0;right:0;top:8px;height:4px;
  background:radial-gradient(circle at 2px 2px, rgba(61,92,119,.38) 1.3px, transparent 1.9px) 0 0/14px 4px repeat-x}
.mark .selvedge-strip,.foot .selvedge-strip{border-bottom-color:var(--ink-3)}
.mark .selvedge-strip::before,.foot .selvedge-strip::before{
  background-image:radial-gradient(circle at 2px 2px, rgba(162,189,214,.34) 1.3px, transparent 1.9px)}
.band-mid .selvedge-strip{border-bottom-color:rgba(20,38,57,.28)}
/* a band that opens with a strip carries its own pin row: drop the band's */
.mark:has(> .selvedge-strip:first-child)::before,
.band-mid:has(> .selvedge-strip:first-child)::before{content:none}
.mark > .selvedge-strip:first-child,.band-mid > .selvedge-strip:first-child{margin:calc(-1 * var(--pad)) 0 var(--pad)}
.mark.tight > .selvedge-strip:first-child,.band-mid.tight > .selvedge-strip:first-child{margin:calc(-1 * var(--pad-tight)) 0 var(--pad-tight)}
.mark.loose > .selvedge-strip:first-child,.band-mid.loose > .selvedge-strip:first-child{margin:calc(-1 * var(--pad-loose)) 0 var(--pad-loose)}

/* registration dots: every ink in the print. The sixth dot is the ink
   itself, so it follows the text colour of whatever ground it sits on. */
.reg{display:flex;gap:6px;align-items:center;color:var(--ink)}
.reg i{width:9px;height:9px;border-radius:50%;display:block;flex:none}
.reg i:nth-child(1){background:var(--reg-1)}
.reg i:nth-child(2){background:var(--reg-2)}
.reg i:nth-child(3){background:var(--reg-3)}
.reg i:nth-child(4){background:var(--reg-4)}
.reg i:nth-child(5){background:var(--reg-5)}
.reg i:nth-child(6){background:currentColor}
.mark .reg,.foot .reg{color:var(--rev)}

/* split: text beside a portrait. 7/5 by default, --flip puts the image left */
.split{display:grid;grid-template-columns:7fr 5fr;gap:var(--s-2xl);align-items:center}
.split--top{align-items:start}
.split--flip{grid-template-columns:5fr 7fr}
.split--flip > :first-child{order:2}

/* ============================================================
   THE HERO
   ============================================================ */
.hero{padding:var(--s-xl) 0 var(--s-lg);background:var(--cloth)}
.hero-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s-md);
  border-bottom:1px solid var(--rule-2);padding-bottom:var(--s-sm);margin-bottom:var(--s-2xl)}
.hero h1{margin-bottom:var(--s-lg);max-width:15ch}
.hero .lede{margin-bottom:var(--s-xl)}
.hero-act{display:flex;flex-wrap:wrap;gap:var(--s-sm) var(--s-md);align-items:center}

/* hero split: text left on the content grid, a tall 4:5 garment crop
   right that bleeds off the right edge of the viewport. */
.hero-split{
  padding:0; display:grid;
  grid-template-columns:
    [full-start] minmax(var(--gut),1fr)
    [text-start] minmax(0, calc(var(--inner) * .55))
    [text-end] minmax(var(--s-lg), var(--s-2xl))
    [img-start] minmax(0, calc(var(--inner) * .45 - var(--s-2xl)))
    minmax(0,1fr) [full-end];
  grid-template-rows:auto 1fr auto auto auto;
  grid-template-areas:
    ". top  . img img"
    ". h1   . img img"
    ". facts . img img"
    ". lede . img img"
    ". act  . img img";
}
.hero-split > .hero-top{grid-area:top;margin:var(--s-xl) 0 var(--s-xl)}
.hero-split > h1{grid-area:h1;align-self:end;max-width:19ch;font-size:clamp(2.5rem, 1.2rem + 3.4vw, 4.4rem)}
.hero-split > .lede{grid-area:lede}
/* the four numbers a buyer compares, right under the h1 (28 Sep) */
.hero-facts{grid-area:facts;list-style:none;margin:var(--s-lg) 0 var(--s-lg);padding:0;
  display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:0;border-top:1px solid var(--rule-2)}
.hero-facts li{padding:var(--s-sm) var(--s-md) var(--s-sm) 0;margin-right:var(--s-md);border-right:1px solid var(--rule);
  font:500 14px/1.35 var(--body);color:var(--ink-2)}
.hero-facts li:last-child{border-right:0;margin-right:0}
.hero-facts b{display:block;font:700 clamp(1.3rem,1.1rem + .6vw,1.6rem)/1.1 var(--body);color:var(--ink);letter-spacing:-0.015em}
.hero-split > .hero-act{grid-area:act;padding-bottom:var(--s-2xl)}
.hero-img{grid-area:img;position:relative;margin:0;min-width:0;align-self:start}
.hero-img img{width:100%;aspect-ratio:4/5;max-height:calc(100svh - 96px);min-height:560px;
  height:auto;object-fit:cover;object-position:var(--focus,50% 40%)}
.hero-img figcaption{position:static;margin:0;max-width:34ch;
  background:var(--cloth);padding:10px 16px 10px 0;font-size:14px}

/* ruled field cells: fixed cells, state never breaks the grid */
.fields{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule-2);margin-top:var(--s-2xl)}
.field{padding:var(--s-md) var(--s-md) var(--s-md) 0;border-right:1px solid var(--rule)}
.field + .field{padding-left:var(--s-md)}
.field:last-child{border-right:0}
.field .v{font:700 clamp(1.9rem,3.2vw,2.6rem)/1.05 var(--body);letter-spacing:-0.02em;
  display:block;margin:var(--s-sm) 0 var(--s-xs)}
.field .u{font:500 14px/1.4 var(--body);color:var(--ink-2);display:block;max-width:24ch}
.mark .field{border-right-color:var(--ink-3)} .mark .fields{border-top-color:var(--ink-3)}
.mark .field .u{color:var(--rev-2)}

/* ============================================================
   PHOTOGRAPHY
   Standard markup for the new primitives:
   <figure class="…"><div class="frame"><img></div><figcaption>
   .frame clips the image so reveals and hover zooms stay inside it.
   ============================================================ */
figure{margin:0}
figure img{width:100%;height:auto;object-fit:cover;object-position:var(--focus,50% 50%);background:var(--cloth-3)}
.frame{overflow:hidden;position:relative;background:var(--cloth-3)}
.frame img{width:100%}

figcaption{margin-top:var(--s-sm);font:500 15px/1.5 var(--body);color:var(--ink-2);max-width:46ch;text-wrap:pretty}
figcaption b,.cap-lead{font:600 1em/1.5 var(--body);color:var(--ink);letter-spacing:0}
.mark figcaption{color:var(--rev-2)} .mark figcaption b{color:var(--rev)}
.shot{position:relative}
.shot .code{position:absolute;left:var(--s-xs);bottom:var(--s-xs);background:var(--cloth);padding:4px 6px}

.plate{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--s-lg);align-items:start}
.plate-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-lg)}
/* named client: ruled like .rows, logo in the right column under "What we decline" */
.client{border-top:1px solid var(--rule-2);padding-top:var(--s-lg)}
.client-logo{display:block;width:clamp(220px, 22vw, 300px);height:auto;margin:var(--s-2xs) 0 var(--s-md)}
/* the client's styles we made: three 4:5 crops across the full plate, one caption for the row */
.client-looks{margin-top:var(--s-xl)}
.client-looks .looks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-lg)}
.client-looks .frame img{display:block;object-fit:cover;object-position:50% 100%}
@media (max-width:620px){.client-looks{margin-top:var(--s-lg)} .client-looks .looks{gap:var(--s-xs)}}
.ratio-4x3{aspect-ratio:4/3;height:auto}
.ratio-16x9{aspect-ratio:16/9;height:auto}
.ratio-1x1{aspect-ratio:1/1;height:auto}
.ratio-4x5{aspect-ratio:4/5;height:auto}
.ratio-3x4{aspect-ratio:3/4;height:auto}
.ratio-5x4{aspect-ratio:5/4;height:auto}
.ratio-cine{aspect-ratio:2.35/1;height:auto}

/* a mat: a photograph set on the cloth ground inside a paper page */
.mat{background:var(--cloth);padding:clamp(16px,3vw,40px)}

/* full bleed: 100% of the viewport, cinematic at desktop, taller on
   phones. Place directly inside <section>, never inside .wrap. */
.bleed{width:100%}
.bleed .frame{background:var(--cloth-3)}
.bleed img{aspect-ratio:2.35/1;max-height:78svh}
.bleed figcaption{margin-left:max(var(--gut), calc((100% - var(--wrap)) / 2 + var(--gut)));
  padding-right:var(--gut);max-width:calc(52ch + var(--gut))}

/* lookbook pair: a wide shot with a tight portrait detail laid over its
   lower corner, like a print dropped on a print. */
.lookbook{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s-lg);align-items:start}
.lookbook .wide{grid-column:1 / 10;grid-row:1}
.lookbook .detail{grid-column:9 / 13;grid-row:1;margin-top:clamp(120px,24vw,340px);position:relative;z-index:1}
.lookbook .detail .frame{outline:clamp(8px,1vw,14px) solid var(--mat-edge,var(--paper))}
.lookbook .detail figcaption{margin-top:calc(var(--s-sm) + 12px)}
.lookbook .wide figcaption{max-width:40ch}
.lookbook--flip .wide{grid-column:4 / 13}
.lookbook--flip .detail{grid-column:1 / 5}
.lookbook--flip .wide figcaption{margin-left:auto}
.band-cloth .lookbook,.hero .lookbook{--mat-edge:var(--cloth)}
.band-mid .lookbook{--mat-edge:var(--mid)}
.mark .lookbook{--mat-edge:var(--ink)}

/* detail crop: a tight portrait with a restrained hover */
.detail .frame img{transition:transform .9s var(--ease-out)}
@media (hover:hover){.detail:hover .frame img{transform:scale(1.035)}}

/* navy band with a detail crop that overhangs its top edge.
   Give the section before the band at least --pad of bottom padding. */
.mark-split{display:grid;grid-template-columns:7fr 5fr;gap:var(--s-2xl);align-items:start}
.overhang{margin-top:calc(-1 * var(--pad) - var(--overhang, clamp(64px,8vw,120px)));position:relative;z-index:1}
.overhang figcaption{color:var(--rev-2)}

/* ============================================================
   COMP IMAGERY: generated placeholders, never shippable
   ============================================================ */
figure.comp{position:relative}
figure.comp img{filter:saturate(.62) contrast(.97)}
figure.comp::after{
  content:attr(data-comp);
  position:absolute;top:0;left:0;
  background:var(--reg-2);color:#fff;
  font:700 12px/1 var(--narrow);letter-spacing:.06em;text-transform:uppercase;
  padding:7px 9px;max-width:100%;
}
figure.comp::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,38,57,.14),rgba(20,38,57,.03));
  pointer-events:none;
}
figure.comp figcaption{color:var(--error);font-weight:600}

/* ============================================================
   ROWS: the spec table
   ============================================================ */
.rows{border-top:1px solid var(--rule-2)}
.row{display:grid;grid-template-columns:minmax(150px,1fr) 2.1fr;gap:var(--s-md) var(--s-lg);
  padding:var(--s-md) 0;border-bottom:1px solid var(--rule)}
.mark .rows{border-top-color:var(--ink-3)} .mark .row{border-bottom-color:var(--ink-3)}
.row .k{font:700 13px/1.35 var(--narrow);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding-top:4px}
.mark .row .k{color:var(--rev-2)}
.row .d{font-size:16px;max-width:68ch}
.row .d p{max-width:60ch;font-size:16px}

/* ============================================================
   STEPS: how an order runs
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--rule-2)}
.step{padding:var(--s-md) var(--s-md) var(--s-lg) 0;border-right:1px solid var(--rule)}
.step + .step{padding-left:var(--s-md)}
.step:last-child{border-right:0}
.step .n{font:700 1.4rem/1 var(--body);color:var(--rose-deep);display:block;margin-bottom:var(--s-sm)}
.step h3{margin-bottom:var(--s-xs)}
.step p{font-size:15px;line-height:1.5;color:var(--ink-2);margin:0}
.step .t{display:inline-block;margin-top:var(--s-sm);font:700 13px/1 var(--narrow);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);padding-top:var(--s-xs);border-top:1px solid var(--rose)}

/* ============================================================
   UNFILLED FIELDS: what the client still owes (N6, Q13)
   ============================================================ */
.blank{
  display:inline-block;background:var(--blank);color:var(--ink-2);
  border-bottom:1px solid var(--rule-2);padding:3px 8px;
  font:400 13.5px/1.5 var(--data);letter-spacing:-0.01em;
}
.blank .code{display:block;margin-bottom:2px;color:var(--ink-3)}
.blank-inline{display:inline-flex;align-items:baseline;gap:6px;background:var(--blank);color:var(--ink-2);
  border-bottom:1px solid var(--rule-2);padding:2px 7px;font:400 13.5px/1.5 var(--data)}
.mark .blank,.mark .blank-inline{background:var(--navy-2);color:var(--rev-2);border-bottom-color:var(--ink-3)}
.mark .blank .code,.mark .blank-inline .code{color:var(--rev-2)}
.flood{background:var(--reg-2)!important;color:#fff!important}

/* ============================================================
   ACTIONS: rose is the primary action, everywhere
   ============================================================ */
.act{
  display:inline-block;background:var(--rose);color:var(--ink);
  font:700 14px/1 var(--narrow);letter-spacing:.06em;text-transform:uppercase;
  padding:17px 26px;border:1px solid var(--rose);text-decoration:none;cursor:pointer;
  transition:background .2s var(--ease-out),color .2s var(--ease-out),border-color .2s var(--ease-out);
}
.act:hover{background:var(--ink);color:var(--rose);border-color:var(--ink)}
.act:active{transform:translateY(1px)}
.mark .act:hover{background:var(--rev);color:var(--ink);border-color:var(--rev)}
.act-2{background:transparent;color:var(--ink);border-color:var(--ink)}
.act-2:hover{background:var(--ink);color:var(--rev);border-color:var(--ink)}
.mark .act-2{color:var(--rev);border-color:var(--rev-2);background:transparent}
.mark .act-2:hover{background:var(--rev);color:var(--ink);border-color:var(--rev)}
/* a quiet text link with the rose underline */
.more{font:700 14px/1 var(--narrow);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  color:var(--ink);padding:8px 0;border-bottom:1px solid var(--rose);display:inline-block}
.more:hover{color:var(--rose-deep);border-bottom-color:var(--rose-deep)}
.mark .more{color:var(--rev)} .mark .more:hover{color:var(--rose)}

/* ============================================================
   PROTOTYPE BAR: build scaffolding, deletes at launch
   ============================================================ */

/* ============================================================
   HEADER
   ============================================================ */
.head{border-bottom:1px solid var(--rule-2);background:var(--cloth);position:sticky;top:0;z-index:30}
.head .wrap{display:flex;align-items:center;gap:var(--s-lg);min-height:64px}
.wordmark{display:flex;align-items:baseline;gap:10px;text-decoration:none;margin-right:auto;flex:none}
.wordmark .n{font:700 19px/1 var(--sans);letter-spacing:-0.035em}
.wordmark .c{font:700 12px/1 var(--narrow);letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase}
.wordmark:hover{color:var(--ink)}
nav{display:flex;gap:var(--s-lg)}
nav a{font:700 13px/1 var(--narrow);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;padding:9px 0 7px;border-bottom:2px solid transparent;white-space:nowrap}
nav a:hover{color:var(--ink);border-bottom-color:var(--rose)}
nav a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}
.head-act{font:700 13px/1 var(--narrow);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  background:var(--rose);color:var(--ink);text-decoration:none;padding:11px 14px;border:1px solid var(--rose);
  transition:background .2s var(--ease-out),color .2s var(--ease-out),border-color .2s var(--ease-out)}
.head-act:hover{background:var(--ink);color:var(--rose);border-color:var(--ink)}
.head-act[aria-current]{background:transparent;border-color:var(--ink);color:var(--ink)}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--ink);color:var(--rev-2);padding:0 0 var(--s-xl)}
.foot > .selvedge-strip{margin-bottom:var(--s-2xl)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--s-xl)}
.foot .foot-name{font:400 clamp(2rem,3vw,2.6rem)/1 var(--serif);letter-spacing:-0.015em;color:var(--rev);margin:0 0 var(--s-md)}
.foot p{color:var(--rev-2);font-size:15px;max-width:36ch}
.foot a{color:var(--rev);text-decoration:none;border-bottom:1px solid var(--ink-3);transition:border-color .2s var(--ease-out),color .2s var(--ease-out)}
.foot a:hover{border-bottom-color:var(--rose);color:var(--rose)}
.foot .lbl{margin-bottom:var(--s-sm);color:var(--rev-2)}
.foot .legend{color:var(--rev-2)}
.foot .legend b{color:var(--rev)}
.foot .sep{color:var(--rev-2)}
.foot .legend > span + span::before{background:var(--ink-3)}
.foot .code{color:var(--rev-2)}
.foot .blank-inline{background:var(--navy-2);color:var(--rev-2);border-bottom-color:var(--ink-3)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:var(--s-xs);font-size:15px}
.foot li small{display:block;font-size:13px;color:var(--rev-2);margin-top:2px}
/* 24px minimum tap area without moving the underline (WCAG 2.5.8) */
.foot li a,.wordmark{position:relative}
.foot li a::after,.wordmark::after{content:"";position:absolute;inset:-4px 0 -5px}
.foot-base{margin-top:var(--s-xl);padding-top:var(--s-sm);border-top:1px solid var(--ink-3);
  display:flex;justify-content:flex-start;gap:var(--s-xs) var(--s-xl);flex-wrap:wrap;
  font:700 13px/1.4 var(--narrow);letter-spacing:.06em;text-transform:uppercase;color:var(--rev-2)}
.foot-base span[lang="zh"]{letter-spacing:.04em}
.foot-base > :last-child{margin-left:auto}

/* ============================================================
   FORM
   ============================================================ */
form.enquiry{display:grid;gap:var(--s-lg);max-width:620px}
.f label{display:block;margin-bottom:var(--s-xs)}
.f input,.f select,.f textarea{
  width:100%;min-height:50px;padding:var(--s-sm) var(--s-sm);
  border:1px solid var(--rule-2);background:#FBFDFE;
  font:500 16px/1.4 var(--body);color:var(--ink);border-radius:0;
  transition:border-color .15s var(--ease-out)}
.f textarea{min-height:132px;resize:vertical}
.f input::placeholder,.f textarea::placeholder{color:var(--ink-3)}
.f input:hover,.f select:hover,.f textarea:hover{border-color:var(--ink-3)}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--ink);outline:2px solid var(--ink);outline-offset:1px}
.f input[type=file]{padding:11px var(--s-sm);font-size:14px;cursor:pointer}
.f input[type=file]::file-selector-button{
  margin-right:var(--s-sm);padding:9px 13px;border:1px solid var(--rule-2);background:var(--cloth);
  font:700 13px/1 var(--narrow);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  border-radius:0;cursor:pointer}
.f input[type=file]:hover::file-selector-button{border-color:var(--rose);background:var(--rose)}
.hint{font-size:14px;color:var(--ink-3);max-width:52ch}
.f .hint{margin-top:var(--s-xs)}
.hint .code{margin-right:6px}
.f .err{margin-top:var(--s-xs);color:var(--error);font-size:14px;min-height:1lh;font-weight:600}
.f.bad input,.f.bad select,.f.bad textarea{border-color:var(--error)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-lg)}
#result,.result{display:none;border:1px solid var(--ink);border-top:3px solid var(--rose);background:var(--cloth-2);padding:var(--s-lg)}
#result h3,.result h3{margin-bottom:var(--s-xs)}
#result p:last-child,.result p:last-child{margin-bottom:0}
/* Honeypot for bots: off-screen, not display:none, so naive fillers still see it */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============================================================
   MOTION: one authored moment. The cloth is drawn off the roll.
   Photographs marked .reveal are laid out left to right, like a
   length of cloth pulled across the cutting table, while the image
   settles from 1.06 to 1. The hero garment does it on load.
   Content is visible by default: reveal.js only arms figures that
   are below the fold, and only when motion is allowed.
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  .settle{animation:settle .62s var(--ease-out) both}
  .settle-2{animation-delay:.07s} .settle-3{animation-delay:.14s} .settle-4{animation-delay:.21s}
  @keyframes settle{from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none}}

  .hero-img .frame{animation:unroll 1.25s var(--ease-out) .12s both}
  .hero-img .frame img{animation:settle-in 1.8s var(--ease-out) .12s both}

  .reveal-armed .frame{clip-path:inset(0 100% 0 0)}
  .reveal-armed .frame img{transform:scale(1.06)}
  .reveal-armed.is-in .frame{animation:unroll 1.1s var(--ease-out) both}
  .reveal-armed.is-in .frame img{animation:settle-in 1.6s var(--ease-out) both}
  /* the client row is pulled off the roll as one length: each frame starts a beat after the last */
  .client-looks.is-in .frame:nth-child(2),.client-looks.is-in .frame:nth-child(2) img{animation-delay:.12s}
  .client-looks.is-in .frame:nth-child(3),.client-looks.is-in .frame:nth-child(3) img{animation-delay:.24s}

  @keyframes unroll{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}}
  @keyframes settle-in{from{transform:scale(1.06)} to{transform:scale(1)}}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  nav{gap:var(--s-md)}
}
@media (max-width:900px){
  :root{--gut:22px}
  .plate,.plate-3{grid-template-columns:1fr}
  .fields{grid-template-columns:1fr 1fr}
  .field{border-bottom:1px solid var(--rule)}
  .field:nth-child(2n){border-right:0}
  .field:nth-child(2n+1){padding-left:0}
  .steps{grid-template-columns:1fr 1fr}
  .step{border-bottom:1px solid var(--rule)}
  .step:nth-child(2n){border-right:0}
  .step:nth-child(2n+1){padding-left:0}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid > :first-child{grid-column:1 / -1}
  .split,.split--flip,.mark-split{grid-template-columns:1fr;gap:var(--s-xl)}
  .split--flip > :first-child{order:0}
  .overhang{margin-top:0;width:78%;margin-left:auto}
  .pull-in{margin-left:0}

  /* hero split stacks: legend, H1, then the garment straight away,
     then the lede and actions. The image runs edge to edge. */
  .hero-split{
    grid-template-columns:[full-start] var(--gut) [text-start] minmax(0,1fr) [text-end] var(--gut) [full-end];
    grid-template-rows:auto;
    grid-template-areas:". top ." ". h1 ." ". facts ." "img img img" ". lede ." ". act .";
  }
  .hero-split > .hero-top{margin:var(--s-lg) 0 var(--s-lg)}
  .hero-split > h1{margin-bottom:0;max-width:16ch}
  .hero-facts{grid-template-columns:1fr 1fr;margin:var(--s-md) 0 var(--s-lg)}
  .hero-facts li{margin-right:0;padding:var(--s-xs) var(--s-sm) var(--s-xs) 0;border-bottom:1px solid var(--rule)}
  .hero-facts li:nth-child(2n){border-right:0;padding-left:var(--s-sm)}
  .hero-split > .lede{margin-top:var(--s-lg)}
  .hero-img img{aspect-ratio:4/3;min-height:0;max-height:none}
  .hero-img figcaption{position:static;background:none;padding:var(--s-xs) var(--gut) 0;max-width:none}

  .lookbook .wide{grid-column:1 / -1}
  .lookbook .detail{grid-column:4 / -1;grid-row:2;margin-top:var(--s-lg)}
  .lookbook--flip .detail{grid-column:1 / 10}
  .lookbook .detail .frame{outline:0}
  .lookbook .detail figcaption{margin-top:var(--s-sm)}
  .lookbook--flip .wide figcaption{margin-left:0}
  .bleed img{aspect-ratio:3/2}
}
@media (max-width:620px){
  :root{--gut:20px}
  body{font-size:16.5px}
  .pair{grid-template-columns:1fr}
  .row{grid-template-columns:1fr;gap:var(--s-2xs)}
  .fields{grid-template-columns:1fr 1fr}
  .field .v{font-size:2rem}
  .foot-grid{grid-template-columns:1fr}

  /* steps become a horizontal scroller: the next card peeks in */
  /* steps stack on phones (28 Sep: the 78% scroller gave ~30-char lines) */
  .steps{grid-template-columns:1fr;border-top:0}
  .step{border-top:1px solid var(--rule-2);border-right:0!important;padding:var(--s-md) 0 var(--s-md)!important}

  /* phone header (phase 3): see the HEADER, PHASE 3 block at the end */
  .head-act{padding:10px 12px}

  .hero-img img{aspect-ratio:1/1}
  .bleed img{aspect-ratio:4/5;max-height:none}
  .bleed.bleed--keep img{aspect-ratio:4/3}
  .pull{max-width:none}
  .selvedge-strip .legend{display:none}
}
@media (max-width:380px){
  .wordmark .c{display:none}
}

/* coordinator fixes 24 Sep: 12-col lookbook gutter overflowed at 320; nav tap target >=24px */
@media (max-width:620px){.lookbook{column-gap:var(--s-xs)}}
nav a{min-height:24px;display:inline-flex;align-items:center}

/* ============================================================
   PHASE 3 (25 Sep 2026): seven pages, the reordered form, the
   entity facts, the FAQ, long-form prose, the 404 and the named
   contact. Snippets: build-notes/design-system.md, "Phase 3".
   Nothing above this line was renamed or removed.
   ============================================================ */

/* ---------- HEADER, PHASE 3: five links plus the action ----------
   >900px   one row: wordmark | five links | Send a tech pack
   <=900px  two rows: wordmark and action; the five links on a ruled
            row of their own, spread edge to edge
   <=620px  the links row keeps one line: it scrolls sideways if the
            screen is too narrow (320px), with a soft fade at the edge
            and snap points, so nothing ever wraps onto a third row.  */
@media (max-width:1100px) and (min-width:901px){
  .head .wrap{gap:var(--s-md)}
  nav{gap:var(--s-md)}
  nav a,.head-act{letter-spacing:.1em}
}
@media (max-width:900px){
  .head{position:static}
  .head .wrap{flex-wrap:wrap;min-height:0;padding-top:10px;padding-bottom:0;row-gap:4px;column-gap:var(--s-sm)}
  nav{order:3;flex:1 0 100%;justify-content:space-between;gap:var(--s-md);border-top:1px solid var(--rule);margin-top:6px}
  nav a{padding:12px 0 10px}
}
@media (max-width:620px){
  nav{gap:var(--s-md);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    scrollbar-width:none;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);
    scroll-padding-inline:var(--gut);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--gut),#000 calc(100% - var(--gut)),transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 var(--gut),#000 calc(100% - var(--gut)),transparent 100%)}
  nav::-webkit-scrollbar{display:none}
  nav a{letter-spacing:.09em;scroll-snap-align:start;flex:none}
  /* Contact duplicates the rose action on the row above (same page, and
     the action carries aria-current there), so phones drop it and the
     four page links fit one line from 375px down to 320px. */
  nav a.nav-dup{display:none}
}
@media (max-width:360px){
  nav{gap:10px}
  nav a{letter-spacing:.06em}
}

/* ---------- FOOTER, PHASE 3 ---------- */
.foot-base a{color:var(--rev-2);border-bottom-color:var(--ink-3)}
.foot-base a:hover{color:var(--rose)}
.foot-base a{position:relative}
.foot-base a::after{content:"";position:absolute;inset:-6px 0 -6px}

/* ---------- FORM, PHASE 3: garment, files, you ----------
   <fieldset class="fgroup"><legend>Garment</legend> ... </fieldset>
   Each group is a ruled section of the sheet with a serif heading. */
fieldset.fgroup{border:0;margin:0;padding:var(--s-md) 0 0;min-width:0;display:grid;gap:var(--s-lg);
  border-top:1px solid var(--rule-2)}
fieldset.fgroup + fieldset.fgroup{margin-top:var(--s-md)}
.fgroup > legend{float:left;width:100%;padding:0;margin:0 0 var(--s-2xs);
  font:600 clamp(1.3rem,1.15rem + .6vw,1.6rem)/1.2 var(--body);letter-spacing:-0.01em;color:var(--ink)}
.fgroup > legend + *{clear:both}
.fgroup > legend .opt,.lbl .opt{font:500 14px/1 var(--body);letter-spacing:0;text-transform:none;color:var(--ink-3);margin-left:.4em}
.fgroup-note{margin:calc(-1 * var(--s-md)) 0 0;font-size:15px;color:var(--ink-2);max-width:52ch}
.band-mid fieldset.fgroup{border-top-color:var(--ink-2)}

/* the "Worth attaching" list as the upload's hint */
.hint-list{list-style:none;margin:var(--s-xs) 0 0;padding:0;font-size:14px;color:var(--ink-2);
  display:grid;grid-template-columns:1fr 1fr;gap:4px var(--s-md);max-width:52ch}
.hint-list li{position:relative;padding-left:14px}
.hint-list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--rose-deep)}
.hint-list + .hint{margin-top:var(--s-xs)}
@media (max-width:620px){.hint-list{grid-template-columns:1fr}}

/* conditional note, e.g. under "Units per style" when "Fewer than 100"
   is chosen. Hidden until needed. Either toggle [hidden] from JS, or
   let CSS do it: give the option data-note and the note .cond--auto.
   <p class="cond cond--auto" id="units-note" aria-live="polite">…</p> */
.cond{margin:var(--s-xs) 0 0;padding:10px 14px;background:var(--cloth-2);border:1px solid var(--rule);
  border-top:2px solid var(--rose);font-size:14.5px;line-height:1.5;color:var(--ink);max-width:52ch}
.cond[hidden]{display:none}
.cond b{font-weight:700}
.cond--auto{display:none}
.f:has(option[data-note]:checked) .cond--auto{display:block}
@media (prefers-reduced-motion:no-preference){
  .cond:not([hidden]){animation:settle .35s var(--ease-out) both}
}

/* the submit row: button, then the privacy link beside it */
.submit-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-sm) var(--s-lg);margin:var(--s-xs) 0 0}
.submit-row .act{margin:0}
.submit-row .fine{font-size:14px;color:var(--ink-3);margin:0;max-width:34ch}
.submit-row .fine a{color:var(--ink-2)}
.submit-row .fine a:hover{color:var(--rose-deep)}

/* "What happens next": three numbered lines under the button. The
   numerals carry sequence, so they stay. Keep it an <ol>.
   <div class="next"><h3>What happens next</h3><ol><li>…</li></ol></div> */
.next{border-top:1px solid var(--rule-2);padding-top:var(--s-md);max-width:560px}
.next h3{font:700 13px/1.2 var(--narrow);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--s-sm)}
.next ol{list-style:none;margin:0;padding:0;counter-reset:next}
.next li{counter-increment:next;display:grid;grid-template-columns:2.1rem 1fr;align-items:baseline;
  padding:var(--s-xs) 0;border-bottom:1px solid var(--rule);font-size:15.5px;line-height:1.45;color:var(--ink)}
.next li:last-child{border-bottom:0}
.next li::before{content:counter(next);font:700 1.15rem/1 var(--body);color:var(--rose-deep)}
.next + .hint{margin-top:var(--s-sm)}
.mark .next{border-top-color:var(--ink-3)} .mark .next li{color:var(--rev);border-bottom-color:var(--ink-3)}
.mark .next li::before{color:var(--rose)} .mark .next h3{color:var(--rev-2)}

/* ---------- ROWS AS <dl> ----------
   .rows/.row/.k/.d work unchanged on dl/div/dt/dd (zero visual change):
   <dl class="rows"><div class="row"><dt class="k">…</dt><dd class="d">…</dd></div></dl> */
dl.rows{margin:0}
dl.rows dt,dl.rows dd{margin:0}
.row dd.d > p:first-child{margin-top:0}

/* ---------- FACTS: the entity, for people and crawlers ----------
   <dl class="facts">
     <div class="fact fact--wide"><dt>Registered name</dt><dd>Hangzhou Sevenonic Co., Ltd
       <span lang="zh-Hans">杭州七维贸易有限公司</span></dd></div>
     <div class="fact"><dt>Since</dt><dd>2019</dd></div> …
   </dl>  */
/* every cell carries a left rule; the block is shifted left by one
   cell padding and clipped there, so the first cell of each row loses
   its rule at any column count, with no nth-child arithmetic */
.facts{--fp:var(--s-md);margin:0 0 0 calc(-1 * var(--fp) - 1px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  clip-path:inset(0 0 0 calc(var(--fp) + 1px))}
.fact{padding:var(--s-md) var(--s-md) var(--s-md) var(--fp);border-top:1px solid var(--rule);border-left:1px solid var(--rule);min-width:0}
.facts > .fact:first-child{border-top-color:var(--rule-2)}
.facts{border-bottom:1px solid var(--rule)}
.fact--wide{grid-column:1 / -1}
.fact dt{font:700 13px/1.3 var(--narrow);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--s-xs)}
.fact dd{margin:0;font:600 clamp(1.25rem,1.1rem + .6vw,1.6rem)/1.25 var(--body);letter-spacing:-0.01em;color:var(--ink);
  overflow-wrap:anywhere}
.fact dd small{display:block;margin-top:6px;font:500 14px/1.45 var(--body);letter-spacing:0;color:var(--ink-2)}
.fact dd a{text-decoration-thickness:1px}
.fact dd.fact-text{font:500 16px/1.5 var(--body);letter-spacing:0}
.fact--wide dd{font-size:clamp(1.4rem,1.2rem + 1vw,2rem)}
.fact--wide dd span[lang|="zh"],.facts [lang|="zh"]{display:block;margin-top:6px}
.band-mid .fact,.band-mid .facts{border-color:rgba(20,38,57,.28)} .band-mid .facts > .fact:first-child{border-top-color:var(--ink-2)}
.band-mid .fact dt{color:var(--ink)} .band-mid .fact dd small{color:var(--ink-2)}
.mark .facts,.mark .fact{border-color:var(--ink-3)}
.mark .fact dt{color:var(--rev-2)} .mark .fact dd{color:var(--rev)} .mark .fact dd small{color:var(--rev-2)}

/* Chinese text: Bodoni and Archivo carry no CJK. Name a system CJK
   face (no download, no third party) so it never falls to a random one. */
:lang(zh){font-family:'PingFang SC','Hiragino Sans GB','Noto Sans CJK SC','Source Han Sans SC','Microsoft YaHei',sans-serif;
  letter-spacing:.02em;font-style:normal}
h1 :lang(zh),h2 :lang(zh),.fact dd :lang(zh),.foot-name :lang(zh){
  font-family:'Songti SC','STSong','Noto Serif CJK SC','Source Han Serif SC','SimSun',serif;font-weight:400}

@media (max-width:900px){.facts{grid-template-columns:1fr 1fr}}
@media (max-width:380px){.facts{grid-template-columns:1fr}}

/* ---------- THE NAMED CONTACT ----------
   One person, typeset, no photograph (none yet; never a stand-in).
   <div class="person">
     <p class="person-name">James Ashbridge</p>
     <p class="person-role">Business development · in English</p>
     <a class="person-mail" href="mailto:james@sevenonic.com">james@sevenonic.com</a>
     <p class="person-promise">Replies within one business day.</p>
   </div>
   .person--quiet for a secondary contact (Stella). Works on paper,
   cloth, mid and navy. */
.person{border-top:2px solid var(--ink);padding:var(--s-md) 0 var(--s-md);max-width:440px}
.person + .person{margin-top:var(--s-lg)}
.person-name{margin:0;font:600 clamp(1.6rem,1.35rem + 1vw,2.2rem)/1.1 var(--body);letter-spacing:-0.015em;color:var(--ink)}
.person-role{margin:var(--s-xs) 0 var(--s-md);font:700 13px/1.3 var(--narrow);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.person-mail{display:inline-block;font:600 clamp(1.05rem,1rem + .35vw,1.25rem)/1.3 var(--body);letter-spacing:-0.01em;
  color:var(--ink);text-decoration:underline;text-decoration-color:var(--rose);text-decoration-thickness:2px;
  text-underline-offset:.28em;overflow-wrap:anywhere;padding:4px 0}
.person-mail:hover{color:var(--rose-deep)}
.person-promise{margin:var(--s-sm) 0 0;font-size:15px;color:var(--ink-2)}
.person-promise b{color:var(--ink)}
.person--quiet{border-top-width:1px;border-top-color:var(--rule-2)}
.person--quiet .person-name{font-size:clamp(1.4rem,1.2rem + .6vw,1.7rem)}
.person--quiet .person-mail{font-size:1rem;font-weight:500;text-decoration-thickness:1px}
.band-mid .person-role{color:var(--ink)} .band-mid .person--quiet{border-top-color:var(--ink-2)}
.mark .person{border-top-color:var(--rev)} .mark .person--quiet{border-top-color:var(--ink-3)}
.mark .person-name,.mark .person-mail{color:var(--rev)} .mark .person-mail:hover{color:var(--rose)}
.mark .person-role,.mark .person-promise{color:var(--rev-2)}

/* ---------- FAQ: native <details>, themed ----------
   <div class="faq"><details><summary>Question?</summary>
     <div class="faq-a"><p>Answer.</p></div></details> … </div>
   Keyboard: summary is focusable, Enter/Space toggles (native). */
.faq{border-top:1px solid var(--rule-2);max-width:820px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 20px;gap:var(--s-md);align-items:center;
  padding:var(--s-md) 0;font:600 1.08rem/1.4 var(--sans);letter-spacing:-0.01em;color:var(--ink);min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
/* the plus: two drawn 1.5px rules; the upright folds away when open */
.faq summary::after{content:"";width:16px;height:16px;justify-self:end;
  background:linear-gradient(var(--ink),var(--ink)) center/16px 1.5px no-repeat,
             linear-gradient(var(--ink),var(--ink)) center/1.5px 16px no-repeat;
  transition:background-size .3s var(--ease-out)}
.faq details[open] > summary::after{background-size:16px 1.5px,1.5px 0}
.faq summary:hover{color:var(--rose-deep)}
.faq summary:hover::after{background-image:linear-gradient(var(--rose-deep),var(--rose-deep)),linear-gradient(var(--rose-deep),var(--rose-deep))}
.faq summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.faq-a{padding:0 44px var(--s-lg) 0;color:var(--ink-2)}
.faq-a p{max-width:66ch}
@media (prefers-reduced-motion:no-preference){
  .faq details[open] .faq-a{animation:settle .4s var(--ease-out) both}
}
.band-cloth .faq{border-top-color:var(--rule-2)}
.mark .faq{border-top-color:var(--ink-3)} .mark .faq details{border-bottom-color:var(--ink-3)}
.mark .faq summary{color:var(--rev)} .mark .faq-a{color:var(--rev-2)}
.mark .faq summary::after{background-image:linear-gradient(var(--rev),var(--rev)),linear-gradient(var(--rev),var(--rev))}

/* ---------- PROSE: long-form reading (privacy.html) ----------
   <article class="prose">…</article>  measure 68ch */
.prose{max-width:68ch;font-size:17px;line-height:1.7;color:var(--ink)}
.prose > * + *{margin-top:var(--s-md)}
.prose p{margin:0;max-width:none}
.prose h2{font-size:clamp(1.55rem,1.25rem + 1vw,2.1rem);line-height:1.15;margin-top:var(--s-2xl);
  padding-top:var(--s-md);border-top:1px solid var(--rule)}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:var(--s-xl);font-size:1.02rem}
.prose h2 + *,.prose h3 + *{margin-top:var(--s-sm)}
.prose ul,.prose ol{margin:0;padding-left:1.3em}
.prose li{margin:0 0 var(--s-xs);padding-left:.2em}
.prose li::marker{color:var(--rose-deep)}
.prose ol li::marker{font-weight:700}
.prose a{text-decoration-thickness:1px;text-underline-offset:.2em}
.prose .meta{font:700 13px/1.4 var(--narrow);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.prose dl{margin:0} .prose dt{font-weight:700;margin-top:var(--s-sm)} .prose dd{margin:2px 0 0}

/* ---------- 404 ----------
   <section class="nf"><div class="wrap nf-grid">
     <div><p class="legend"><span><b>404</b></span><span>Not found</span></p>
       <h1>…</h1><p class="lede">…</p>
       <ul class="nf-links"><li><a href="/capability">Capability</a> <span>…</span></li>…</ul></div>
     <figure class="nf-img"><div class="frame"><img …></div></figure>
   </div></section>  The figure is optional. */
.nf{background:var(--cloth);padding:var(--s-2xl) 0 var(--pad)}
.nf-grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--s-2xl);align-items:end}
.nf .legend{margin:0 0 var(--s-xl);padding-bottom:var(--s-sm);border-bottom:1px solid var(--rule-2)}
.nf h1{max-width:13ch;margin-bottom:var(--s-lg)}
.nf .lede{margin-bottom:var(--s-xl)}
.nf-links{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-2);max-width:560px}
.nf-links li{border-bottom:1px solid var(--rule);margin:0}
.nf-links a{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-md);padding:var(--s-sm) 0;
  text-decoration:none;font:700 14px/1.3 var(--narrow);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.nf-links a span{font:500 15px/1.4 var(--body);letter-spacing:0;text-transform:none;color:var(--ink-2);text-align:right}
.nf-links a:hover{color:var(--rose-deep)} .nf-links a:hover span{color:var(--ink)}
.nf-img img{aspect-ratio:4/5;height:auto}
@media (max-width:900px){
  .nf-grid{grid-template-columns:1fr;gap:var(--s-xl)}
  .nf-img{max-width:420px}
}
@media (max-width:620px){
  .nf-links a{flex-direction:column;gap:2px}
  .nf-links a span{text-align:left}
}

/* ---- Enquiry mode switch (28 Sep 2026): Get a costing / Ask a question ---- */
[data-mode][hidden], fieldset.fgroup[hidden]{display:none !important}
fieldset.mode{border:0;margin:0 0 var(--s-lg);padding:0;min-width:0;display:grid;
  grid-template-columns:1fr 1fr;gap:var(--s-sm)}
fieldset.mode > legend{grid-column:1 / -1;padding:0;margin-bottom:var(--s-sm)}
.mode-opt{display:flex;gap:var(--s-sm);align-items:flex-start;cursor:pointer;
  background:var(--cloth-2);border:1px solid var(--rule-2);padding:var(--s-md);
  font:500 16px/1.4 var(--body);color:var(--ink)}
.mode-opt input{margin:4px 0 0;accent-color:var(--ink);flex:none;width:18px;height:18px}
.mode-opt b{display:block;font-weight:700}
.mode-opt small{display:block;font-size:14px;color:var(--ink-2);margin-top:2px}
.mode-opt:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--paper)}
.mode-opt:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:560px){ fieldset.mode{grid-template-columns:1fr} }
.ask-line{margin:var(--s-md) 0 0;font-size:15px;color:var(--ink-2)}
.hero-act .ask-line{flex:0 0 100%;width:100%;max-width:none;margin-top:var(--s-xs)}