@font-face{font-family:"Fredoka";src:url("/assets/fredoka-latin.ab46fdbe.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("/assets/figtree-latin.bf7828e2.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
:root{
/* Ground: warm off-white, not grey. The frames are studio white (44% of
every sampled frame), so a cool ground makes the pack shots look dirty. */
--paper:#fffaf2; --paper-2:#fff3e4; --panel:#ffffff;
--ink:#231a16; --ink-2:#5b4a42; --ink-3:#7a6a61;
/* The house colours: the two the histogram put first, kept for the chrome so
the department colours can be the loud ones. */
--brandA:#e2521a; --brandB:#0f8ea8; --brandC:#f0b429;
--brandA-ink:#b83f10; --brandB-ink:#0b6d82;
--line:#eadfd0; --line-2:#f3ebe0;
--wrap:1360px; --gut:40px;
--r:14px; --r-lg:26px; --r-pill:999px;
--sh:0 2px 0 rgba(35,26,22,.06);
--sh-lift:0 10px 30px rgba(35,26,22,.13);
--ease:cubic-bezier(.2,.7,.2,1);
--display:"Fredoka",system-ui,-apple-system,"Segoe UI",sans-serif;
--text:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--label-ratio:0.9333;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
font:400 17px/1.6 var(--text);letter-spacing:.002em}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.1;letter-spacing:-.01em;margin:0}
p{margin:0 0 1em}
[hidden]{display:none!important}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:60;background:var(--panel);padding:10px 16px;border-radius:var(--r)}
:focus-visible{outline:3px solid var(--brandB);outline-offset:2px}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.eyebrow{font:700 12px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;
color:var(--brandA-ink);margin:0 0 12px}
.tiny{font-size:13.5px;color:var(--ink-2)}
/* ---------------------------------------------------------------- topbar */
.wx-topbar{background:var(--ink);color:#fff5ea;font:600 12.5px/1 var(--text);letter-spacing:.06em}
.wx-topbar .wrap{display:flex;gap:20px;align-items:center;min-height:38px;flex-wrap:wrap;
justify-content:space-between}
.wx-topbar a{color:#ffd9a8}
/* Three notices wrap to three lines on a phone and, with the two-row nav under
them, the chrome took 200px before the page began. The middle one is a
slogan; the other two are the range size and the link to the one page that
carries the price date, and both of those earn their line. */
.hide-sm{display:inline}
/* ---------------------------------------------------------------- header */
.wx-head{background:var(--panel);border-bottom:2px solid var(--ink);position:relative;z-index:30}
.wx-head .wrap{display:flex;align-items:center;gap:24px;min-height:76px}
.wordmark{font-family:var(--display);font-weight:700;font-size:30px;letter-spacing:-.02em;
text-decoration:none;line-height:1;flex:0 0 auto;display:flex;align-items:baseline;gap:10px}
.wordmark small{font:700 10.5px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-2)}
/* The same wordmark appears in the dark footer, where --ink-2 measured 2.03:1.
The footer copy of the tagline gets the footer's own light tone. */
.wx-foot .wordmark small{color:#e8cdb0}
.wx-nav{display:flex;align-items:center;gap:6px;flex:1 1 0;min-width:0;justify-content:flex-end}
.wx-nav a,.wx-nav button{font:600 14px/1 var(--text);text-decoration:none;color:inherit;
background:none;border:0;padding:9px 13px;cursor:pointer;white-space:nowrap;border-radius:var(--r-pill)}
.wx-nav a:hover,.wx-nav button:hover{background:var(--paper-2);color:var(--brandA-ink)}
.wx-nav [aria-current="page"]{background:var(--ink);color:#fff}
.wx-panel{position:absolute;left:0;right:0;top:100%;background:var(--panel);
border-bottom:2px solid var(--ink);box-shadow:var(--sh-lift);z-index:40}
.wx-panel .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 22px;padding-block:22px}
.wx-panel a{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;
text-decoration:none;font-size:14.5px;border-radius:var(--r);border-left:5px solid var(--c,var(--brandA))}
.wx-panel a:hover{background:var(--paper-2)}
.wx-panel .n{color:var(--ink-3);font-size:13.5px}
/* ------------------------------------------------------------ bento wall */
/* The hero and the department entrances are one mosaic: tiles of three sizes
in a twelve-column grid, each carrying its department's colour. dense flow
is a safety net, but the spans below are counted so the rows come out even
and no orphan is left at the bottom (§5). */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;grid-auto-flow:dense}
.bt{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--c,var(--brandA));
color:#fff;text-decoration:none;display:flex;flex-direction:column;justify-content:flex-end;
min-height:190px;padding:20px;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.bt:hover{transform:translateY(-3px);box-shadow:var(--sh-lift)}
.bt.sz-l{grid-column:span 6;min-height:340px}
.bt.sz-m{grid-column:span 4;min-height:250px}
.bt.sz-s{grid-column:span 3;min-height:190px}
.bt.sz-w{grid-column:span 8;min-height:250px}
/* The frame occupies the tile ABOVE the wording, not the whole tile: laid over
the full area it sat on top of the department name and cut it in half. The
bottom inset is the space the name and the count need. */
.bt-shot{position:absolute;inset:14px 14px 92px 14px;display:flex;align-items:center;
justify-content:center}
/* NO multiply here, unlike the cards. The tile behind the frame is a saturated
colour, and multiplying a studio-white pack shot into it tints the PRODUCT:
the alphabet stickers came out pink and the screws came out blue. On a
coloured tile the frame sits on its own white plate instead, which keeps the
product its own colour and still reads as one object. */
.bt-shot img{max-width:min(100%,500px);max-height:100%;width:auto;
background:#fff;border-radius:var(--r);padding:8px}
.bt-body{position:relative;z-index:2}
.bt h3{font-size:clamp(19px,2vw,27px);color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.28)}
.bt .n{display:inline-block;margin-top:8px;font:700 13px/1 var(--text);
background:rgba(0,0,0,.34);border-radius:var(--r-pill);padding:7px 12px}
/* The tile plate sits BEHIND the picture, on the tile itself, never on the
: multiply blends an element with what is behind it, and a plate on the
image leaves a white rectangle where the frame was (the bbto lesson). */
.bt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:112px;
background:linear-gradient(to top,rgba(0,0,0,.42),rgba(0,0,0,0))}
/* ------------------------------------------------------------------ hero */
.hero{padding-block:34px 10px}
.hero-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:36px;align-items:center;
margin-bottom:22px}
.hero h1{font-size:clamp(38px,5.4vw,68px);line-height:1.02;letter-spacing:-.025em;max-width:15ch}
.hero h1 em{font-style:normal;color:var(--brandA-ink)}
.hero .lede{max-width:52ch;margin:18px 0 22px;font-size:19px;color:var(--ink-2)}
.hero-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.figbox{background:var(--panel);border:2px solid var(--ink);border-radius:var(--r-lg);padding:18px 20px}
.figbox .v{font-family:var(--display);font-weight:700;font-size:clamp(26px,3.4vw,40px);line-height:1;
color:var(--brandA-ink)}
.figbox .k{font:700 11.5px/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-2);margin-top:7px}
/* ----------------------------------------------------------------- lanes */
/* A department as a shelf: solid colour block, then its frames running across.
This is the rhythm that replaces the stacked bands used everywhere else. */
.lane{display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr);gap:0;
border-radius:var(--r-lg);overflow:hidden;margin-bottom:16px;background:var(--panel);
border:2px solid var(--ink)}
.lane-head{background:var(--c,var(--brandA));color:#fff;padding:24px;display:flex;
flex-direction:column;justify-content:space-between;gap:14px;text-decoration:none}
.lane-head h3{font-size:23px;color:#fff}
.lane-head p{margin:8px 0 0;font-size:14px;color:#fff}
.lane-head .n{font:700 13px/1 var(--text);background:rgba(0,0,0,.28);
border-radius:var(--r-pill);padding:8px 13px;align-self:flex-start}
.lane-strip{display:flex;gap:0;overflow-x:auto;scrollbar-width:thin}
.lane-strip a{flex:0 0 auto;width:172px;padding:14px;border-left:1px solid var(--line);
text-decoration:none;display:flex;flex-direction:column;gap:9px;min-width:0}
.lane-strip a:hover{background:var(--paper-2)}
.lane-strip img{width:100%;max-width:144px;margin:0 auto}
.lane-strip .nm{font-size:13px;line-height:1.35;color:var(--ink);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lane-strip .pr{font-family:var(--display);font-weight:600;font-size:15px;color:var(--brandA-ink)}
/* ----------------------------------------------------------------- bands */
.band{padding-block:56px}
.band.tight{padding-block:36px}
.band.paper{background:var(--paper)}
.band.cream{background:var(--paper-2)}
.band.panel{background:var(--panel)}
/* The kraft band: the paper stock the range is packed in. It is the quiet
variant between two loud ones, and the builder asks for it by name on the
department index and on "the rest of the range". */
.band.kraft{background:#f6ead6}
.band.ink{background:var(--ink);color:#fdf3e7}
.band.ink h2,.band.ink h3{color:#fff}
.band.ink .tiny,.band.ink .eyebrow{color:#f0c9a4}
.band.ink a{color:#ffd9a8}
.band-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
margin-bottom:26px;flex-wrap:wrap}
.band-head h2{font-size:clamp(27px,3.2vw,44px)}
.band-head p{max-width:62ch;margin:10px 0 0;color:var(--ink-2)}
.band.ink .band-head p{color:#e8d3bd}
.band-head .more{font:700 14.5px/1 var(--text);flex:0 0 auto;color:var(--brandB-ink);
text-underline-offset:4px}
.band.ink .band-head .more{color:#ffd9a8}
/* ----------------------------------------------------------------- cards */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.card{background:var(--panel);border:2px solid var(--ink);border-radius:var(--r-lg);
display:flex;flex-direction:column;overflow:hidden;min-width:0;
transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-lift)}
.card-media{display:block;background:var(--paper-2);padding:16px;position:relative}
.card-media img{margin:0 auto;max-width:min(100%,420px);mix-blend-mode:multiply}
/* The count chip is the loudest fact on a card in this range, so it gets the
badge treatment rather than inheriting link styling: unstyled it rendered as
an underlined line of text under the photograph. */
.count-chip{position:absolute;left:12px;top:12px;background:var(--c,#c44514);color:#fff;
font:700 13px/1 var(--text);border-radius:var(--r-pill);padding:9px 13px;z-index:2;
text-decoration:none;letter-spacing:.01em}
.count-chip .u{font-weight:600;opacity:.9}
/* ------------------------------------------------------- department index */
/* Fifteen shelves at the foot of a department or a product page. A contents
page rather than a second tile wall: the bento mosaic upstairs is the loud
entrance, this is the quiet one, and repeating the mosaic here would make
every page look like the home page. Unstyled it shipped as fifteen stacked
underlined blocks running the full width of the screen. */
.index{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.index a{background:var(--panel);border:2px solid var(--ink);border-radius:var(--r);
padding:15px 16px 14px;text-decoration:none;display:flex;flex-direction:column;gap:5px;
min-width:0;transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.index a:hover{transform:translateY(-3px);box-shadow:var(--sh-lift)}
.index .n{font-family:var(--display);font-weight:700;font-size:23px;color:var(--c,var(--ink))}
.index h3{font-size:16px;font-weight:600;font-family:var(--text)}
.index p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.45}
/* ------------------------------------------------------------------ rail */
/* The four-up carousel under a product: cards side by side with a progress bar
and two round buttons. Unstyled it stacked the four cards full width, one
under another, and turned every one of 1198 product pages into a nine
thousand pixel scroll. */
.rail-outer{position:relative}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:16px;
overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px;
margin:-4px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start;min-width:0}
.rail-foot{display:flex;align-items:center;gap:16px;margin-top:20px}
.rail-bar{flex:1 1 0;min-width:0;height:3px;background:var(--line);position:relative;
border-radius:var(--r-pill)}
.rail-bar span{position:absolute;left:0;top:0;height:3px;background:var(--ink);width:25%;
border-radius:var(--r-pill);transition:left .25s var(--ease),width .25s var(--ease)}
.rail-btn{width:42px;height:42px;border:2px solid var(--ink);border-radius:var(--r-pill);
background:var(--panel);color:inherit;cursor:pointer;display:grid;place-items:center;
flex:0 0 auto}
.rail-btn:hover{background:var(--paper-2)}
.rail-btn svg{width:16px;height:16px}
/* ----------------------------------------------------------- brand story */
/* The §9.6 block on the home page. Half and half with the text centred leaves
a hole of several hundred pixels beside every picture: three paragraphs are
shorter than a 500px square, and centring puts the emptiness above AND below
the words. Both columns are sized to their content and pushed left, so the
leftover height falls at the bottom of the row instead of through it.
Unstyled, this was the worst block on the site: full-width 150-character
lines with a lone picture on its own row under each of them. */
.brand-story{margin-top:8px}
.story-row{display:grid;grid-template-columns:minmax(0,66ch) minmax(0,340px);
justify-content:start;gap:40px;align-items:start;margin-bottom:36px}
.story-row:last-child{margin-bottom:0}
.story-row h3{font-size:clamp(20px,2.2vw,27px);margin-bottom:10px}
.story-row figure{margin:0}
/* Never wider than the file itself: the frames here are 500px (§4.2). */
.story-row figure img{width:100%;max-width:340px;height:auto;mix-blend-mode:multiply}
.story-row figcaption{margin-top:8px}
/* ------------------------------------------------------- article furniture */
.article-head{background:#f6ead6;border-bottom:2px solid var(--ink);padding-block:42px 34px}
.article-head h1{font-size:clamp(28px,4vw,48px);max-width:22ch;line-height:1.12}
.article-head .meta{margin:12px 0 0;font-size:14px;color:var(--ink-2)}
.article-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;
padding-block:34px 64px;align-items:start}
.article-body>*{min-width:0}
/* The measure is set by the column here, so the prose does not centre itself
inside it: a centred column left the body indented 160px under a heading
that started at the page margin. */
.article-body>.prose{max-width:76ch;margin-left:0}
/* align-items:start above, or the sticky box stretches to the height of the
whole article and its border runs the length of the page. */
.toc{position:sticky;top:18px;border:2px solid var(--ink);border-radius:var(--r);
background:var(--panel);padding:16px 18px}
.toc h2{font:700 12px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-2);margin:0 0 10px}
.toc ol{list-style:none;margin:0;padding:0;font-size:14px}
.toc li{margin-bottom:8px;line-height:1.4}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}
/* The product inset inside a guide: a card, not a stack of loose lines. */
.inset{border:2px solid var(--ink);border-radius:var(--r);background:var(--panel);
padding:16px;margin:26px 0;display:grid;grid-template-columns:130px minmax(0,1fr);
gap:18px;align-items:center}
.inset img{margin:0;mix-blend-mode:multiply}
.inset h3{font-size:16.5px;margin-bottom:4px;font-family:var(--text);font-weight:700}
.inset p{margin:0 0 8px;font-size:14px;color:var(--ink-2)}
.inset .price{font-size:19px}
.card-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.src{font-style:normal}
.center-page{text-align:center;padding-block:96px}
.center-page h1{font-size:clamp(32px,5vw,58px);margin-bottom:12px}
/* ------------------------------------------------- department page header */
.dept-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;
flex-wrap:wrap;padding-block:18px 22px}
.dept-bar h1{font-size:clamp(27px,3.4vw,44px);max-width:22ch}
.dept-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:14px}
.dept-tools label{display:inline-flex;align-items:center;gap:7px;color:var(--ink-2);
font-weight:600}
.dept-tools select{font:600 14px/1 var(--text);color:var(--ink);background:var(--panel);
border:2px solid var(--ink);border-radius:var(--r-pill);padding:9px 13px;cursor:pointer}
.dept-tools select:hover{background:var(--paper-2)}
.card-body{padding:15px 16px 17px;display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.card-dept{margin:0;font:700 11.5px/1 var(--text);letter-spacing:.1em;text-transform:uppercase}
.card-dept a{color:var(--c,var(--brandA-ink));text-decoration:none}
.card-dept a:hover{text-decoration:underline}
/* Product names in this range carry long single words ("Aromatherapy",
"Self-Adhesive"), and at 390px the card column is about 125px wide. Without
this the word sets the card's width and the whole grid overflows. */
.card-name{font-size:16.5px;line-height:1.3;font-weight:600;font-family:var(--text);
overflow-wrap:anywhere}
.card,.card-body{min-width:0}
.card-name a{text-decoration:none}
.card-name a:hover{color:var(--brandA-ink)}
.card-spec{margin:0;font-size:13.5px;color:var(--ink-2)}
/* min-width:0 on the children, or the price and the per-piece figure refuse to
shrink below their content and push the card wider than its column at 390px
(§5: flex children default to min-width:auto). */
.card-foot{margin-top:auto;padding-top:8px;display:flex;align-items:baseline;
justify-content:space-between;gap:6px 10px;flex-wrap:wrap}
.card-foot>*{min-width:0}
.price{font-family:var(--display);font-weight:700;font-size:21px}
/* The per-piece figure. The markup calls it .per; a rule written for
.unit-price left it at body size beside a 21px price, which read as a second
price rather than as the arithmetic under one. */
.per{font-size:13px;color:var(--ink-2);white-space:nowrap}
/* --------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
border:2px solid var(--ink);border-radius:var(--r-pill);padding:12px 22px;
font:700 15px/1 var(--text);text-decoration:none;cursor:pointer;background:var(--panel);
color:var(--ink);transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-lift)}
/* --brandA is the decorative orange (3.85:1 under white wording, measured).
The filled button uses the darker step so the label clears 4.5:1, the same
split the ochre needed on bosmarlin. */
.btn-primary{background:#c44514;color:#fff;border-color:var(--ink)}
.btn-ghost{background:var(--panel);color:var(--ink)}
.btn-primary:hover{background:var(--brandA-ink)}
.btn-wide{width:100%}
.btn-sm{padding:9px 16px;font-size:13.5px}
/* The wording is a picture in two colours; exactly one is ever displayed.
The filled button carries the light one, the outline button the dark one,
and the outline button keeps its white ground on hover, so it keeps the dark
one there too. Shipping both at once printed the wording twice, which is
what the first build did. */
.buy-label{height:calc(1em * 0.9333);width:auto;max-width:none;display:block}
.buy-label.dark{display:none}
.btn-ghost .buy-label.light,.btn:not(.btn-primary) .buy-label.light{display:none}
.btn-ghost .buy-label.dark,.btn:not(.btn-primary) .buy-label.dark{display:block}
img.buy-label{background:none!important}
/* ----------------------------------------------------------- product page */
.pdp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;
padding-block:28px 20px}
.pdp-stage{background:var(--paper-2);border:2px solid var(--ink);border-radius:var(--r-lg);
padding:26px;position:relative}
.pdp-stage img{margin:0 auto;max-width:min(100%,500px);mix-blend-mode:multiply}
.pdp-photo{display:grid;place-items:center}
/* The markup calls the thumbnail row .strip. Styling .filmstrip instead left
the row of buttons to the browser default: no gap, no current-frame mark and
a ragged 3+2 wrap under the stage. Same class of drift as .foot-bot below,
and the reason the unstyled-class check now runs over the built site. */
.strip{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
.strip button{border:2px solid var(--line);background:var(--panel);border-radius:var(--r);
padding:5px;cursor:pointer;line-height:0}
.strip button:hover{border-color:var(--ink-3)}
.strip button[aria-current="true"]{border-color:var(--ink)}
.strip img{width:62px;height:auto;max-width:160px}
.pdp-col{min-width:0}
.pdp-col h1{font-size:clamp(25px,3vw,38px);line-height:1.08}
.pdp-lede{font-size:16.5px;color:var(--ink-2);max-width:62ch;margin:0 0 .7em}
.pdp-desc{max-width:62ch}
.pdp-rule{border:0;border-top:2px solid var(--line);margin:20px 0}
.pdp-buy{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.pdp-price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:16px 0 6px}
.pdp-price .price{font-size:34px}
.values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:20px 0 6px}
.values>div{display:flex;align-items:center;gap:10px;background:var(--paper-2);
border-radius:var(--r);padding:11px 13px;font-size:14px;min-width:0}
.values svg{width:19px;height:19px;flex:0 0 auto;color:var(--brandA-ink)}
.acc{border-top:2px solid var(--line);padding-block:14px}
.acc summary{font-family:var(--display);font-weight:600;font-size:19px;cursor:pointer;
list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-size:23px;color:var(--brandA-ink)}
.acc[open] summary::after{content:"\2212"}
.acc-body{padding-top:12px}
.facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 26px}
.facts li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
border-bottom:1px solid var(--line-2);font-size:14.5px;min-width:0}
.facts .k{color:var(--ink-2)}
.facts .v{font-weight:600;text-align:right}
/* ---------------------------------------------------------------- tables */
.rt{width:100%;border-collapse:collapse;margin:20px 0;font-size:15px}
.rt th,.rt td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line)}
.rt th{font:700 12px/1.2 var(--text);letter-spacing:.08em;text-transform:uppercase;
color:var(--ink-2);background:var(--paper-2)}
.rt td.n,.rt th.n{text-align:right;font-variant-numeric:tabular-nums}
.rt tbody tr:hover td{background:var(--paper-2)}
/* --------------------------------------------------------------- gallery */
.gallery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.gallery a{background:var(--panel);border:2px solid var(--ink);border-radius:var(--r);
padding:12px;display:block}
.gallery img{margin:0 auto;max-width:min(100%,420px);mix-blend-mode:multiply}
/* ----------------------------------------------------------------- prose */
.prose{max-width:72ch;padding-block:22px 64px}
.prose h2{font-size:clamp(23px,2.4vw,32px);margin:34px 0 12px}
.prose h3{font-size:20px;margin:24px 0 10px}
.prose ul,.prose ol{padding-left:20px}
/* Prose lists whose items open with a bold lead-in. They exist because a run
of six such paragraphs is a list pretending to be prose, and a wall of text
is what the reader actually sees (§4 of the checklist). */
.lead-list{list-style:none;padding-left:0;margin:18px 0;display:grid;gap:12px}
.lead-list li{padding-left:16px;border-left:3px solid var(--brandC);margin:0}
.lead-list li b{font-weight:700}
.prose li{margin-bottom:8px}
.prose figure{margin:24px 0}
.prose figcaption{margin-top:8px;font-size:13.5px;color:var(--ink-2)}
blockquote.q{margin:24px 0;padding:16px 20px;border-left:6px solid var(--brandC);
background:var(--paper-2);border-radius:0 var(--r) var(--r) 0}
blockquote.q p{margin:0 0 .5em}
blockquote.q cite{font-style:normal;font-size:13.5px;color:var(--ink-2)}
.note{background:var(--paper-2);border-left:6px solid var(--brandB);padding:15px 19px;
margin:22px 0;border-radius:0 var(--r) var(--r) 0}
.crumbs{padding:16px 0 0;font-size:13.5px;color:var(--ink-2)}
.crumbs ol{list-style:none;display:flex;gap:9px;flex-wrap:wrap;margin:0;padding:0}
.crumbs li+li::before{content:"/";margin-right:9px;color:var(--ink-3)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
/* Document pages: the small print and the reference pages are a column of
prose, and a 72ch column inside a 1360px grid leaves the right half of the
screen empty. The grid itself narrows here, and only the reading elements
keep the measure, so tables and figures use the full column. */
body.is-doc > .wrap,body.is-doc main > .wrap{max-width:1040px}
body.is-doc .prose{max-width:none}
body.is-doc .prose>p,body.is-doc .prose>ul,body.is-doc .prose>ol,
body.is-doc .prose>h1,body.is-doc .prose>h2,body.is-doc .prose>h3,
body.is-doc .prose>blockquote,body.is-doc .prose>.note{max-width:72ch}
/* ---------------------------------------------------------------- footer */
.wx-foot{background:var(--ink);color:#f7e9da;padding-block:52px 26px;margin-top:60px}
.wx-foot a{color:#f7e9da;text-decoration:none}
.wx-foot a:hover{text-decoration:underline}
/* Four columns, not three: the footer emits a brand block, TWO columns of
departments and a site column. Declaring three sent the fourth below the
grid, where it landed outside the dark band on the page background. */
.foot-top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:30px}
.wx-foot h3,.wx-foot h4{font:700 12px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;
color:#f0c9a4;margin:0 0 14px}
.wx-foot .foot-list{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14.5px}
.wx-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14.5px}
/* The social row. An inline