/* ============================================================
   CambiumPak — site stylesheet
   Palette and type are the CambiumPak brand tokens, nothing else.
   Moss (#7D9161) is reserved for recycled-content figures.
   ============================================================ */
:root{
  --r:0; --r-lg:0;
  --pine:#1E4D3B; --pine-deep:#143529; --pine-mid:#2C6B52; --pine-tint:#E8EFE9;
  --kraft:#A87D52; --kraft-deep:#8A6138; --kraft-light:#E4D3BE; --kraft-tint:#F2E9DE;
  --moss:#7D9161;
  --ink:#232A26; --slate:#6B7168; --slate-2:#8A8F87;
  --paper:#F7F4ED; --white:#FFFFFF; --wash:#EFEBE1; --rule:#D8D3C7; --rule-soft:#E7E2D6;
  --sans:'Inter','Source Sans 3','Helvetica Neue',Arial,sans-serif;
  --mono:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
  --wrap:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased}
/* Headings carry the page; body copy sits well below them. The old scale ran
   h1 2.15rem against 1rem body, which read as a document. */
img{max-width:100%;display:block}
a{color:var(--pine);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.012em;color:var(--ink);margin:0}
h1{font-size:clamp(2.3rem,3.6vw,3rem);line-height:1.06;letter-spacing:-.026em}
h2{font-size:clamp(1.7rem,2.4vw,2.1rem);line-height:1.14;letter-spacing:-.022em}
h3{font-size:1rem;letter-spacing:-.006em}
p{margin:0 0 1em;font-size:1rem;line-height:1.72}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.narrow{max-width:820px}
.skip{position:absolute;left:-9999px;background:var(--pine);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:12px;top:12px}
.eyebrow{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);
  font-weight:600;margin:0 0 10px;display:block}
.lede{font-size:1.1rem;line-height:1.6;color:var(--slate);max-width:60ch}
.muted{color:var(--slate)}
.sku{font-family:var(--mono);font-size:.8em;color:var(--kraft-deep);letter-spacing:.03em}
.rc{color:var(--moss);font-weight:600;font-variant-numeric:tabular-nums}
hr.rule{border:0;border-top:1px solid var(--rule);margin:0}

/* ---------------------------------------------------- announcement bar
   Deliberately not the brand's own colour. Kraft deep reads as a notice
   rather than as chrome, so it does not get filed away as decoration by the
   second page. It is never dismissible — the whole point is that it stays. */
.announce{background:var(--kraft-deep);color:#F6EDE1;font-size:.78rem;letter-spacing:.005em;
  border-bottom:1px solid rgba(0,0,0,.16)}
.announce .wrap{display:flex;gap:9px;align-items:baseline;padding-top:10px;padding-bottom:10px;
  flex-wrap:wrap;line-height:1.45}
.announce .ico{align-self:center}
.announce .ico{flex:0 0 auto;opacity:.9}
.announce b{color:#fff;font-weight:700}
.announce span{color:#F0E2D0;flex:1 1 auto;min-width:0}
/* the link reads as the end of the sentence rather than a floated button —
   pushing it right with margin-left:auto left it stranded on its own row */
.announce a{color:#fff;text-decoration:underline;text-underline-offset:2px;font-weight:600;
  white-space:nowrap}
.announce a:hover{text-decoration-thickness:2px}

/* ---------------------------------------------------- utility bar */
.util{background:var(--wash);border-bottom:1px solid var(--rule);font-size:.76rem;color:var(--slate)}
.util .wrap{display:flex;gap:20px;align-items:center;padding-top:8px;padding-bottom:8px}
.util .spacer{margin-left:auto}
.util a{color:var(--slate)}
.util .lgn{border:1px solid var(--rule);background:var(--white);padding:4px 12px;border-radius:0;color:var(--pine);font-weight:600}

/* ---------------------------------------------------- masthead + nav */
.masthead{background:var(--white);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:100}
.masthead .wrap{display:flex;align-items:center;gap:34px;padding-top:14px;padding-bottom:14px}
.brandlink{display:block;flex:0 0 auto}
.brandlink svg{height:34px;width:auto}
nav.main{margin-left:auto;display:flex;gap:2px;align-items:stretch}
.navitem{position:relative}
.navitem>a,.navitem>button{display:block;font:inherit;font-size:.85rem;font-weight:600;color:var(--ink);
  background:none;border:0;padding:10px 14px;cursor:pointer;letter-spacing:.01em;border-bottom:2px solid transparent}
.navitem>a:hover,.navitem>button:hover,.navitem.on>a,.navitem.on>button{color:var(--pine);border-bottom-color:var(--kraft);text-decoration:none}
.navitem[aria-current] > a{color:var(--pine);border-bottom-color:var(--pine)}
.mega{position:absolute;right:0;top:100%;min-width:560px;background:var(--white);
  border:1px solid var(--ink);border-top:3px solid var(--pine);padding:22px 24px;
  display:none;z-index:120}
@media (hover:hover){
  .navitem:hover .mega,.navitem:focus-within .mega{display:grid}
}
.mega.open{display:grid}
.mega{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 30px}
.mega .mlbl{font-size:.66rem;margin:0 0 9px;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);margin:0 0 9px}
.mega ul{list-style:none;margin:0;padding:0}
.mega li{margin:0 0 6px}
.mega li a{font-size:.85rem;color:var(--ink)}
.mega li a:hover{color:var(--pine)}
.mega .chiprow{display:flex;flex-wrap:wrap;gap:6px}
.mega .chiprow a{font-size:.7rem;border:1px solid var(--rule);border-radius:0;padding:3px 9px;color:var(--slate)}
.mega .trend a{display:block;font-family:var(--mono);font-size:.74rem;color:var(--kraft-deep)}
.navtoggle{display:none}

/* ---------------------------------------------------- hero */
.hero{background:var(--pine-deep);color:#fff;position:relative;overflow:hidden}
.hero .photo{position:absolute;inset:0;background:var(--pine-deep);object-fit:cover;width:100%;height:100%;opacity:.42}
.hero .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,53,41,.94) 0%,rgba(20,53,41,.82) 46%,rgba(20,53,41,.42) 100%)}
.hero .wrap{position:relative;padding-top:78px;padding-bottom:78px}
.hero h1{color:#fff;max-width:19ch;font-size:2.6rem}
.hero p{color:#CFDED5;max-width:52ch;font-size:1.05rem;margin-top:16px}
.hero .eyebrow{color:#A9C4B6}
.hero .btnrow{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
/* Split hero, after Moo: a flat colour block carrying the copy, meeting a
   second block that runs to the edge of the viewport. No card, no rounding, no
   gap between them. The product is a cutout PNG because the ground is dark. */
.herosplit{display:grid;grid-template-columns:1.04fr .96fr;min-height:min(72vh,580px);
  border-bottom:0}
.hs-copy{background:var(--paper);display:grid;align-items:center;
  padding:56px max(34px,calc((100vw - var(--wrap))/2 + 28px)) 56px
          max(28px,calc((100vw - var(--wrap))/2 + 28px))}
.hs-inner{max-width:30rem}
.hs-inner h1{font-size:clamp(2.5rem,4.4vw,3.7rem);line-height:1.02;margin-bottom:18px}
.hs-inner p{font-size:1.05rem;color:var(--slate);max-width:34ch}
.hs-inner .eyebrow{color:var(--kraft-deep)}
.hs-shot{background:var(--pine-deep);display:grid;place-items:center;padding:40px;overflow:hidden}
.hs-shot img{max-width:86%;max-height:78%;width:auto;height:auto}
@media (max-width:900px){
  .herosplit{grid-template-columns:1fr;min-height:0}
  .hs-copy{padding:44px 28px}
  .hs-shot{min-height:320px;padding:28px}
}

/* light, product-led hero — kept for any page that still wants it */
.hero.light{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--rule)}
.hero.light .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center;
  padding-top:64px;padding-bottom:64px}
.hero.light h1{color:var(--ink);max-width:15ch;font-size:clamp(2.6rem,4.6vw,3.9rem)}
.hero.light p{color:var(--slate);max-width:44ch;font-size:1.05rem}
.hero.light .eyebrow{color:var(--kraft-deep)}
.hero.light .shot{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:22px;display:grid;place-items:center;min-height:390px}
.hero.light .shot img{max-height:340px;width:auto;mix-blend-mode:multiply}
.hero.light .btn.light{background:var(--white)}
/* Green flat with icons and figures over it. Hairline dividers, a big number,
   a unit under it in small caps, then the thing it counts. Every figure comes
   from the record — no invented impact statistics, which is what this treatment
   is usually carrying elsewhere. */
.statband{background:var(--kraft-light);color:var(--ink);padding:78px 0 82px}
.statband .rule{height:1px;background:rgba(35,42,38,.18);margin-bottom:28px}
.statband .eyebrow{color:var(--kraft-deep)}
.statband h2{color:var(--ink);max-width:20ch;margin-bottom:44px}
.statrow{display:grid;grid-template-columns:repeat(5,1fr)}
.statrow > div{padding:0 26px;border-left:1px solid rgba(35,42,38,.16)}
.statrow > div:first-child{padding-left:0;border-left:0}
.statrow .ico{opacity:.9;margin-bottom:20px;line-height:0}
.statrow .ico svg{stroke:var(--pine)}
.statrow .n{display:block;font-size:clamp(2.2rem,3.6vw,3rem);line-height:1;color:var(--pine);
  font-weight:600;letter-spacing:-.028em;font-variant-numeric:tabular-nums}
.statrow .n.moss{color:#5E7345}
.statrow .u{display:block;font-size:.84rem;color:var(--kraft-deep);margin-top:12px;
  font-weight:600;letter-spacing:.02em}
.statrow .k{display:block;font-size:.94rem;color:var(--ink);margin-top:9px;line-height:1.55}
@media (max-width:900px){
  .statrow{grid-template-columns:repeat(2,1fr);gap:34px 0}
  .statrow > div:nth-child(odd){padding-left:0;border-left:0}
}

/* product gallery */
.gallery{background:var(--wash);padding:0 0 14px}
.gal-main{display:grid;place-items:center;aspect-ratio:1;overflow:hidden}
.gal-main img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);mix-blend-mode:multiply}
.gal-thumbs{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;padding:0 8px}
.gal-thumb{border:1px solid var(--rule);border-radius:0;background:var(--paper);padding:2px;
  cursor:pointer;width:70px;font:inherit;aspect-ratio:1;overflow:hidden}
.gal-thumb img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);mix-blend-mode:multiply}
.gal-thumb span{display:none}
.gal-thumb[aria-pressed="true"]{border-color:var(--pine);box-shadow:inset 0 0 0 1px var(--pine)}
.gal-thumb:hover{border-color:var(--pine)}
.gal-cap{font-size:.76rem;color:var(--slate);margin:10px 0 0;padding:0 8px;text-transform:lowercase}

.pagehead{background:var(--white);border-bottom:1px solid var(--rule)}
.pagehead .wrap{padding-top:54px;padding-bottom:48px}
.pagehead h1{max-width:22ch}
.pagehead p.lede{color:var(--slate);margin-top:12px}

/* ---------------------------------------------------- buttons */
.btn{display:inline-block;font-size:.85rem;font-weight:600;padding:12px 22px;border-radius:var(--r);
  background:var(--pine);color:#fff;border:1px solid var(--pine);cursor:pointer;font-family:inherit}
.btn:hover{background:var(--pine-mid);border-color:var(--pine-mid);text-decoration:none;color:#fff}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn.ghost:hover{background:rgba(255,255,255,.1);color:#fff}
/* the light button lands on white bands as often as on paper, so it carries a
   Pine outline rather than relying on a background that may match its ground */
.btn.light{background:transparent;color:var(--pine);border-color:var(--pine)}
.btn.light:hover{background:var(--pine-tint);color:var(--pine)}
section.band.deep .btn.light,.hs-shot .btn.light{background:var(--white);border-color:var(--white)}
.btn.sm{font-size:.78rem;padding:8px 14px}
.btn[disabled],.btn.off{background:var(--wash);color:var(--slate-2);border-color:var(--rule);cursor:not-allowed}
.btn.off:hover{background:var(--wash);color:var(--slate-2)}

/* a deep band with a photograph behind it — the image is optional, and the
   band is a solid pine panel without it */
section.band.deep.scene{position:relative;overflow:hidden}
section.band.deep.scene>.scene-img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.72}
section.band.deep.scene>.scene-veil{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,53,41,.93) 0%,rgba(20,53,41,.72) 46%,rgba(20,53,41,.34) 100%)}
section.band.deep.scene>.wrap{position:relative}
.pagehead.scene{position:relative;overflow:hidden;background:var(--pine-deep);border-bottom:0}
.pagehead.scene{padding:4px 0}
.pagehead.scene>.scene-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62}
.pagehead.scene>.scene-veil{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,53,41,.94) 0%,rgba(20,53,41,.78) 52%,rgba(20,53,41,.38) 100%)}
.pagehead.scene .crumb,.pagehead.scene .crumb a{color:#A9C4B6}
.pagehead.scene>.wrap{position:relative}
.pagehead.scene h1{color:#fff}
.pagehead.scene .eyebrow{color:#A9C4B6}
.pagehead.scene p.lede{color:#CFDED5}

/* the name explainer — photograph in a framed panel */
.namefig{background:var(--white);border:1px solid var(--rule);border-radius:0;overflow:hidden}
.namefig img{width:100%;height:320px;object-fit:cover;display:block}
.namefig .nofig{height:320px;background:var(--wash);display:grid;place-items:center}
.namefig figcaption{font-size:.75rem;color:var(--slate);padding:12px 16px;line-height:1.5;margin:0;
  border-top:1px solid var(--rule-soft)}

/* The full-bleed feature band was replaced by .halfhalf — a photograph and a
   flat colour meeting down the middle reads better than text over a veil, and
   the wood grain survives at full contrast instead of being dimmed to make
   room for the copy. */

/* product floated on a dark ground — needs the cutout PNGs, not the on-white
   JPGs, because multiply on a dark ground turns the shot to mud */
.floatshot{position:relative;display:grid;place-items:center}
.floatshot img{max-height:380px;width:auto;filter:none}

/* ---------------------------------------------------- generic sections */
/* The ground ladder: White, Paper, light Kraft, dark Kraft. Neighbouring bands
   step one rung, so the page changes tone without ever going heavy. Pine deep
   is reserved for the footer, which is the only place a full-strength dark
   should land on a catalog site this light. */
section.band{padding:86px 0;border-bottom:0}
section.band.white{background:var(--white)}
section.band.paper{background:var(--paper)}
section.band.kraft{background:var(--kraft-light)}
section.band.kraft .eyebrow{color:var(--kraft-deep)}
section.band.kraft .tablewrap,
section.band.kraft .note,
section.band.kraft .plate,
section.band.kraft .doc{background:var(--white)}
section.band.kraftdeep{background:var(--kraft-deep);color:#F3E7D8}
section.band.kraftdeep h2,section.band.kraftdeep h3{color:#fff}
section.band.kraftdeep .eyebrow{color:#E4CDAE}
section.band.kraftdeep .doc{background:var(--paper)}
section.band.kraftdeep .doc h3{color:var(--ink)}
section.band.kraftdeep .doc .owns,section.band.kraftdeep .doc .pages{color:var(--slate)}
section.band.kraftdeep a.btn.light{background:var(--white);border-color:var(--white)}
section.band.deep{background:var(--pine-deep);color:#D7E3DB;border-bottom:0}
section.band.deep h2,section.band.deep h3{color:#fff}
section.band.deep .eyebrow{color:#A9C4B6}
section.band.deep a{color:var(--kraft-light)}
/* white components sitting inside a reversed band keep their own colours —
   the band's light text colour must not leak into a table or a button */
section.band.deep .tablewrap,
section.band.deep table.data,
section.band.deep table.data td,
section.band.deep .card,
section.band.deep .note{color:var(--ink)}
section.band.deep table.data thead th{color:var(--slate)}
section.band.deep table.data td.muted,
section.band.deep table.data .muted{color:var(--slate)}
section.band.deep a.btn{color:#fff}
section.band.deep a.btn.light{color:var(--pine)}
.sechead{margin-bottom:32px;max-width:62ch}
.sechead p{color:var(--slate);margin:12px 0 0;font-size:1rem}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
/* Two columns of unequal length read as a mistake when they are centred against
   each other. .top lines the headings up instead. */
.split.top{align-items:start}
.split.rev>*:first-child{order:2}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}

/* ---------------------------------------------------- cards */
.card{background:transparent;border:0;display:flex;flex-direction:column;overflow:hidden}
/* Product shots are photographed on white. Putting them in a white card left
   the box floating in a void — so the ground is Paper and mix-blend-mode
   multiply drops the white out of the shot into it. The crop is 4:3 against a
   square source, which trims the shoot's generous margin and lets the product
   fill the frame instead of sitting in the middle of it. */
.card .art{background:var(--wash);display:grid;place-items:center;position:relative;
  aspect-ratio:1;overflow:hidden}
.card .art svg{width:74%;height:auto}
/* the line art is the fallback, not an overlay: while the photograph is
   present it stays hidden, and if the <img> removes itself on error the
   :has() stops matching and the diagram comes back. */
.art:has(img) svg{display:none}
.card .art.big svg{height:210px}
.card .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  mix-blend-mode:multiply;transform:scale(1.06)}
.card .bd{padding:18px 0 4px;flex:1;display:flex;flex-direction:column}
.card h3{font-size:.98rem;margin:6px 0 5px}
.card .tag{font-size:.86rem;color:var(--slate);margin:0 0 12px;line-height:1.5}
.card .foot{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;
  align-items:center;font-size:.84rem;color:var(--slate)}
.card a.stretch::after{content:'';position:absolute;inset:0}
.card{position:relative}

/* numbered columns — 01 / 02 / 03, hairline under the figure */
.numcols{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.numcol{padding:0 30px;border-left:1px solid var(--rule)}
.numcol:first-child{padding-left:0;border-left:0}
.numcol .num{display:block;font-size:2.7rem;line-height:1;font-weight:600;color:var(--pine);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;padding-bottom:18px;
  border-bottom:1px solid var(--rule);margin-bottom:20px}
.numcol h3{font-size:1.02rem;margin-bottom:8px}
.numcol p{font-size:.98rem;color:var(--ink);margin:0;line-height:1.65}
@media (max-width:900px){
  .numcols{grid-template-columns:repeat(2,1fr);gap:32px 0}
  .numcol:nth-child(odd){padding-left:0;border-left:0}
}
@media (max-width:560px){
  .numcols{grid-template-columns:1fr}
  .numcol{padding-left:0;border-left:0}
}

.promise-ico{line-height:0}
.promise-ico svg{display:block}

/* one or two drawings, sitting above the downloads */
.plates{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px}
.plate{margin:0;background:var(--white);border:1px solid var(--rule);padding:26px}
.plate img{width:100%;height:auto;max-height:290px;object-fit:contain}
.plate figcaption{font-size:.9rem;color:var(--slate);margin-top:18px;line-height:1.6;
  border-top:1px solid var(--rule-soft);padding-top:14px}
.plate figcaption b{color:var(--ink);display:block;margin-bottom:3px;font-weight:600}

/* dimensioned drawing */
.drawing{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);padding:26px;
  display:grid;place-items:center;overflow-x:auto}
.drawing img{max-width:100%;height:auto}

/* make-up steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.step-art{background:var(--paper);border-bottom:1px solid var(--rule);padding:14px;
  display:grid;place-items:center}
.step-art img{max-width:100%;height:auto}
.step p{font-size:.82rem;margin:0;padding:13px 15px;line-height:1.5}
.step p b{color:var(--pine)}

/* at-a-glance facts. Brand rule 5 lives here now that the big specification
   table has gone: the band and the figure by weight are two labelled facts,
   side by side, never merged into one number. */
/* Wash, not white — this sits on a white band, and a white panel on a white
   ground is a panel you cannot see. */
.facts{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--rule);
  overflow:hidden;background:var(--wash);margin:22px 0 0}
.facts div{padding:14px 18px;flex:1 1 auto;border-right:1px solid var(--rule);min-width:150px}
.facts div:last-child{border-right:0}
.facts dt{font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--slate);
  margin:0 0 5px}
.facts dd{margin:0;font-size:1.02rem;font-weight:600;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------- badge chips */
.badges{display:flex;flex-wrap:wrap;gap:5px}
.badge{font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;font-weight:600;padding:3px 7px;
  border-radius:0;background:var(--pine-tint);color:var(--pine);border:1px solid #CFDFD4;white-space:nowrap}
.badge.kraft{background:var(--kraft-tint);color:var(--kraft-deep);border-color:#E0CDB4}
.badge.moss{background:#EDF1E7;color:#5C6E45;border-color:#D3DCC6}
.badge.off{background:var(--wash);color:var(--slate-2);border-color:var(--rule)}
.tagchips{display:flex;flex-wrap:wrap;gap:6px}
.tagchip{font-size:.7rem;padding:3px 9px;border:1px solid var(--rule);border-radius:0;color:var(--slate);background:var(--white)}

/* ---------------------------------------------------- tables */
/* transparent: the table takes whatever ground .tablewrap is sitting on, so it
   never has to know which band it landed in */
table.data{width:100%;border-collapse:collapse;font-size:.92rem;background:transparent}
table.data th,table.data td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--rule-soft);vertical-align:top}
table.data thead th{background:var(--wash);border-bottom:1px solid var(--rule);font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--slate);font-weight:600;white-space:nowrap}
table.data tbody tr:last-child td{border-bottom:0}
table.data td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.tablewrap{border:1px solid var(--rule);border-radius:var(--r-lg);overflow-x:auto;background:var(--white)}

/* ---------------------------------------------------- spec list */
dl.specs{display:grid;grid-template-columns:auto 1fr;gap:0;margin:0;font-size:.85rem;
  border:1px solid var(--rule);border-radius:0;overflow:hidden;background:var(--white)}
dl.specs dt{padding:9px 14px;color:var(--slate);border-bottom:1px solid var(--rule-soft);background:#FCFBF7;white-space:nowrap}
dl.specs dd{padding:9px 14px;margin:0;border-bottom:1px solid var(--rule-soft)}
dl.specs dt:last-of-type,dl.specs dd:last-of-type{border-bottom:0}

/* The product-page specification table and its data-sheet filter used to live
   here. They were removed: that detail belongs in the four PDFs, and needing to
   open a document to answer a question is the point, not an oversight. */

/* ---------------------------------------------------- documents */
.docgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.doc{border:0;background:var(--paper);padding:24px 24px 22px;display:flex;flex-direction:column}
.doc.unavailable{background:rgba(247,244,237,.13);border:1px dashed rgba(255,255,255,.32)}
section.band.deep .doc h3{color:var(--ink)}
section.band.deep .doc .owns{color:var(--slate)}
section.band.deep .doc .pages{color:var(--slate)}
section.band.deep .doc.unavailable h3{color:#EAF0EB}
section.band.deep .doc.unavailable .owns,section.band.deep .doc.unavailable .pages{color:#A9C4B6}
section.band.deep .doc.unavailable .btn.off{background:transparent;color:#A9C4B6;
  border-color:rgba(255,255,255,.34)}
.doc .q{font-size:.74rem;color:var(--slate);font-style:italic;margin:2px 0 10px}
.doc h3{font-size:.92rem;margin:0}
.doc .owns{font-size:.94rem;color:var(--slate);margin:8px 0 20px;line-height:1.55}
.doc .actions{margin-top:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* .pages says what is behind a link before you follow it: format, length,
   weight. It travels outside .doc now, so it is styled on its own. */
.pages{font-size:.78rem;color:var(--slate)}
.inline-dl{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap}
.doc .where{font-size:.72rem;color:var(--kraft-deep);margin:10px 0 0}

/* ---------------------------------------------------- notes and callouts */
.note{border-left:3px solid var(--pine);background:var(--white);border:1px solid var(--rule);
  border-left-color:var(--pine);border-left-width:3px;padding:14px 17px;font-size:.85rem;border-radius:0}
.note.warn{border-left-color:var(--kraft)}
.note strong{font-weight:600}
.provisional{font-size:.8rem;color:var(--slate);margin-top:12px;line-height:1.55}

/* ---------------------------------------------------- stat row */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.stat{background:var(--white);padding:20px 18px}
.stat .n{font-size:1.7rem;font-weight:600;line-height:1;color:var(--pine);font-variant-numeric:tabular-nums}
.stat .n.moss{color:var(--moss)}
.stat .k{font-size:.72rem;color:var(--slate);margin-top:7px;display:block;line-height:1.45}

/* ---------------------------------------------------- filters */
.filterbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:14px 0 22px}
.filterbar .lbl{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-right:2px}
.fbtn{font:inherit;font-size:.78rem;padding:6px 13px;border-radius:0;cursor:pointer;
  border:1px solid var(--rule);background:var(--white);color:var(--slate)}
.fbtn[aria-pressed="true"]{background:var(--pine);border-color:var(--pine);color:#fff}
.fbtn:hover{border-color:var(--pine)}
[hidden]{display:none !important}

/* ---------------------------------------------------- breadcrumb */
.crumb{font-size:.75rem;color:var(--slate);padding:14px 0 0}
.crumb a{color:var(--slate)}
.crumb span{margin:0 7px;color:var(--rule)}

/* ---------------------------------------------------- forms (mock) */
.field{margin:0 0 14px}
.field label{display:block;font-size:.75rem;font-weight:600;color:var(--slate);margin:0 0 5px}
.field input,.field select{width:100%;font:inherit;font-size:.88rem;padding:9px 11px;border:1px solid var(--rule);
  border-radius:0;background:var(--white);color:var(--ink)}
.field input:focus,.field select:focus{outline:2px solid var(--pine-mid);outline-offset:-1px}

/* ---------------------------------------------------- footer */
/* Two-part footer. The kraft half is the company: the mark at a size worth
   looking at, the address, the sitemap. The pine half is the disclosure, which
   is the one piece of text on this site nobody can be allowed to skim past, so
   it gets its own ground and its own room. The mark appears once, in the kraft
   half; it was in both and read as a repeat rather than a signature. */
footer.site{background:var(--kraft-deep);color:#F0E2D0;font-size:.82rem;padding:72px 0 0}
footer.site .flbl{color:#fff;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  margin:0 0 14px;font-weight:600}
footer.site a{color:#F6EDE1}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin:0 0 9px}
.footgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px;padding-bottom:64px}
.footbrand svg{height:46px;width:auto;margin-bottom:22px}
.footbrand address{font-style:normal;line-height:1.8;color:#E8D6C0}

.footlegal{background:var(--pine-deep);color:#9CB0A5;padding:56px 0;font-size:.78rem}
.footlegal .purpose{display:grid;grid-template-columns:1fr auto;gap:52px;align-items:start}
.footlegal .purpose-copy{max-width:74ch}
.footlegal p{margin:0 0 14px;line-height:1.75}
.footlegal p:last-child{margin-bottom:0}
.footlegal .purpose .flbl{color:#E4D3BE;font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;margin:0 0 14px;font-weight:600}
.footlegal b{color:#E4D3BE;font-weight:600}
.footlegal .purpose-links{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.footlegal .purpose-links .btn{white-space:nowrap;text-align:center;background:transparent;
  color:#E4D3BE;border:1px solid rgba(228,211,190,.45);font-size:.8rem}
.footlegal .purpose-links .btn:hover{background:#E4D3BE;color:var(--pine-deep);
  border-color:#E4D3BE;text-decoration:none}
@media (max-width:820px){
  .footlegal .purpose{grid-template-columns:1fr;gap:28px}
  .footlegal .purpose-links{flex-direction:row;flex-wrap:wrap}
}

/* ---------------------------------------------------- responsive */
@media (max-width:1000px){
  .hero.light .wrap{grid-template-columns:1fr;gap:30px;padding-top:40px;padding-bottom:40px}
  .hero.light h1{font-size:2.1rem}
  .split{grid-template-columns:1fr;gap:28px}
  .split.rev>*:first-child{order:0}
  .grid4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .footgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .grid3,.grid2,.docgrid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .hero h1{font-size:1.9rem}
  h1{font-size:1.75rem}
}
@media print{
  .masthead,.util,.announce,footer.site,.filterbar{display:none}
  body{background:#fff}
}

/* ------------------------------------------------ ground-aware panels
   A panel has to differ from whatever it is sitting on. Bands alternate
   between Paper and White, so panels take White on a Paper band and Wash on a
   White band. Doing it here, once, is why no page needs a bespoke fix. */
section.band .tablewrap,
section.band .note,
section.band .plate,
section.band .namefig,
section.band .field input,
section.band .field select,
section.band .fbtn,
section.band .srcbtn{background:var(--white)}

section.band.white .tablewrap,
section.band.white .note,
section.band.white .plate,
section.band.white .namefig,
section.band.white .field input,
section.band.white .field select,
section.band.white .fbtn{background:var(--wash)}

section.band.white table.data,
section.band.white table.data tbody tr{background:transparent}
section.band.white dl.specs{background:var(--wash)}
section.band.white dl.specs dt{background:transparent}

/* the pagehead is a White band too */
.pagehead .fbtn{background:var(--wash)}
.pagehead .fbtn[aria-pressed="true"]{background:var(--pine)}

/* ---------------------------------------------- hero, half and half
   Left half Paper with the copy. Right half a forest photograph under a Pine
   multiply, with one product floated on it. Multiply rather than an alpha veil:
   it keeps the trunks' own contrast and pulls the whole frame into the brand
   green instead of greying it out. */
/* The hero is one flat field of Paper the full width of the page, with the
   product floated on it. The earlier version split the band down the middle and
   put the shot on a second ground, which drew a line where there is no
   division: the box and the sentence are the same idea. Multiply drops the
   shot's white studio ground into Paper, so it floats rather than sits in a
   panel. */
.heroflat{background:var(--paper)}
.hf-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center;
  padding:80px 0 88px}
.hf-copy{max-width:34rem}
/* Two sentences, two lines. Left to the browser the break landed after "All",
   which reads as a stumble. Each sentence is its own block, so the break is
   editorial at every width and still wraps if the screen is narrower than the
   sentence. */
.hf-copy h1{font-size:clamp(2.5rem,4.4vw,3.7rem);line-height:1.02;margin-bottom:18px}
.hf-copy h1 span{display:block}
.hf-copy p{font-size:1.05rem;color:var(--slate);max-width:42ch}
.hf-copy .eyebrow{color:var(--kraft-deep)}
.hf-shot{display:grid;place-items:center}
.hf-prod{display:block;width:min(74%,400px);height:auto;mix-blend-mode:multiply}
@media (max-width:900px){
  .hf-grid{grid-template-columns:1fr;gap:34px;padding:52px 0 60px}
  .hf-prod{width:min(56%,280px)}
}

/* ---------------------------------------------- half wood, half forest green */
.halfhalf{display:grid;grid-template-columns:1fr 1fr;min-height:min(64vh,540px)}
/* The photograph is taken out of flow so the band's height is set by the copy,
   not by whatever aspect ratio the picture happens to have. A portrait shot in
   the Company hero was forcing a 1080px row against 450px of text, which is
   where all that dangling white space came from. */
.hh-img{position:relative;overflow:hidden;background:var(--kraft-deep);min-height:inherit}
.hh-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center}
.halfhalf.rev .hh-img{order:2}
.halfhalf.rev .hh-copy{order:1}
.hh-copy.light{background:var(--white);color:var(--ink)}
.hh-copy.light .hh-inner{color:var(--ink)}
.hh-copy.light .hh-inner h2{color:var(--ink)}
.hh-copy.light .hh-inner .eyebrow{color:var(--kraft-deep)}

/* The copy block is centred in its own half rather than pushed out to the page
   gutter. Aligning it to the wrap looked right in the abstract and left a wide
   empty margin on the outer edge, which is the first thing anyone notices. */
.hh-copy{background:var(--kraft-deep);display:grid;place-items:center;
  padding:64px clamp(32px,4.4vw,76px)}

/* .fade softens the seam where a photograph meets a light copy panel, so the
   two halves read as one band instead of two tiles butted together. The
   gradient runs toward whichever edge the copy is on. */
.halfhalf.fade .hh-img{position:relative}
.halfhalf.fade .hh-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,rgba(255,255,255,0) 46%,rgba(255,255,255,.55) 76%,
    rgba(255,255,255,.92) 93%,#fff 100%)}
.halfhalf.fade.rev .hh-img::after{
  background:linear-gradient(to left,rgba(255,255,255,0) 46%,rgba(255,255,255,.55) 76%,
    rgba(255,255,255,.92) 93%,#fff 100%)}
.hh-inner{max-width:42ch;color:#F3E7D8}
.hh-inner h2{color:#fff;font-size:clamp(2rem,3vw,2.6rem);margin-bottom:16px}
/* Both headings in these panels open on a round capital, O and C, which
   overshoots the baseline box and reads as indented against the flat S of the
   eyebrow above it. Everything here is flush to the same pixel; this nudges the
   label to where the eye says the column starts. */
.hh-inner .eyebrow{margin-left:3px}
.hh-inner .eyebrow{color:#E4CDAE}
.hh-inner p{font-size:1rem;line-height:1.7}
.hh-inner p:last-child{margin-bottom:0}
@media (max-width:900px){
  .halfhalf{grid-template-columns:1fr}
  .hh-img{min-height:280px}
  .hh-copy{padding:44px 28px}
  /* Stacked, the seam is horizontal, so the fade has to turn with it. */
  .halfhalf.fade .hh-img::after,.halfhalf.fade.rev .hh-img::after{
    background:linear-gradient(to bottom,rgba(255,255,255,0) 62%,rgba(255,255,255,.9) 92%,#fff 100%)}
}

/* ------------------------------------------------------------ sheet pages */
/* One page per data sheet. The download sits directly under the title, with
   the page count, the weight and the actual filename beside it, because a
   buyer deciding whether to open a PDF wants all three before they click. */
.pagehead.docpage .wrap{padding-bottom:38px}
.pagehead.docpage h1{max-width:26ch}
.pagehead.docpage p.lede{font-style:italic}
.dl{margin-top:26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.dl-meta{font-size:.86rem;color:var(--slate)}
.dl-meta .mono{font-family:var(--mono);font-size:.78rem;color:var(--kraft-deep)}

/* Page one of the sheet, at the size you would hold it. The reader can see
   what the document is before deciding to download it, which is the whole job
   of this page. Everything else that used to be here explained a document the
   reader could simply look at. */
.docsplit{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
.preview{margin:0;border:1px solid var(--rule);background:var(--white);padding:0}
.preview img{width:100%;height:auto;display:block}
.preview figcaption{font-size:.8rem;color:var(--slate);padding:12px 16px;margin:0;
  border-top:1px solid var(--rule-soft)}
.preview.empty .ph{aspect-ratio:1/1.294;background:var(--wash);display:grid;place-items:center;
  padding:32px;text-align:center}
.preview.empty .ph span{font-size:.9rem;color:var(--slate-2);max-width:22ch}
.docaction{padding-top:6px}
.doc-lede{font-size:1.12rem;line-height:1.5;margin:0 0 22px;max-width:26ch}
.docaction .dl-meta{display:block;margin-top:16px}
@media (max-width:900px){
  .docsplit{grid-template-columns:1fr;gap:32px}
}

.sheetgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sheetlink{display:block;background:var(--white);padding:20px 20px 18px;color:inherit;
  border-top:2px solid var(--rule)}
.sheetlink:hover{border-top-color:var(--pine)}
.sheetlink.current{border-top-color:var(--pine);background:var(--wash);pointer-events:none}
.sheetlink b{display:block;font-size:.92rem;color:var(--pine)}
.sheetlink.current b{color:var(--ink)}
.sheetlink span{display:block;font-size:.88rem;color:var(--slate);margin-top:6px;line-height:1.5;
  font-style:italic}
.sheetlink em{display:block;font-style:normal;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--kraft-deep);margin-top:14px}
@media (max-width:900px){
  .sheetgrid{grid-template-columns:1fr 1fr}
}

/* ------------------------------------------------------- one header, log in */
/* The utility strip is gone. Everything it held is either in a mega menu or is
   the log-in button, which is the only thing on it anyone clicked. */
.masthead .wrap{display:flex;align-items:center;gap:28px;padding-top:16px;padding-bottom:16px}
nav.main{margin-left:auto}
.btn.sm.login{flex:0 0 auto;background:var(--pine);color:#fff;border-color:var(--pine)}
.btn.sm.login:hover{background:var(--pine-deep);border-color:var(--pine-deep);text-decoration:none}

/* ------------------------------------------------------- literature cards */
/* Forty-four rows in two flat tables was accurate and was not how anyone looks
   for a document. Nobody wants every spec sheet; they want the four sheets for
   the one thing they are buying. So: one card per family, the product, and its
   pack as a table you can click. */
.litgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.litcard{background:var(--paper);display:flex;flex-direction:column}
.litshot{display:block;background:var(--wash)}
.litshot .art{aspect-ratio:1/1;display:grid;place-items:center;padding:26px;background:var(--wash)}
.litshot .art img{max-height:100%;width:auto;mix-blend-mode:multiply}
.litbody{padding:20px 22px 18px;display:flex;flex-direction:column;flex:1}
.litbody .eyebrow{font-family:var(--mono);color:var(--kraft-deep);letter-spacing:.06em;
  text-transform:none;margin-bottom:4px}
.litbody h3{font-size:1rem;margin:0 0 14px}
.littable{width:100%;border-collapse:collapse;font-size:.88rem}
.littable td{padding:8px 0;border-bottom:1px solid var(--rule-soft);vertical-align:baseline}
.littable tr:last-child td{border-bottom:0}
.littable td.st{text-align:right;color:var(--slate);font-size:.78rem;white-space:nowrap;
  padding-left:12px}
.litfoot{margin:14px 0 0;font-size:.76rem;color:var(--slate-2)}
@media (max-width:1000px){ .litgrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:680px){ .litgrid{grid-template-columns:1fr} }

/* ------------------------------------------------------------ pill filters */
.pillsets{display:grid;gap:18px;margin-bottom:22px}
.pillset{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.pillset .lbl{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);
  font-weight:600;flex:0 0 9.5rem}
.pills{display:flex;gap:8px;flex-wrap:wrap;flex:1}
.pill{font:inherit;font-size:.84rem;background:var(--white);border:1px solid var(--rule);
  color:var(--ink);padding:6px 14px;cursor:pointer;border-radius:0;line-height:1.4}
.pill:hover{border-color:var(--pine)}
.pill[aria-pressed="true"]{background:var(--pine);border-color:var(--pine);color:#fff}
.pillbar{display:flex;align-items:center;gap:16px;margin:0 0 16px;
  border-top:1px solid var(--rule);padding-top:16px}
.tally{font-size:.9rem;color:var(--slate)}
.tally b{font-size:1.5rem;color:var(--pine);font-variant-numeric:tabular-nums;margin-right:4px}
.empty-note{font-size:.92rem;color:var(--slate);margin-top:14px}

/* ------------------------------------------------------------ distributors */
.usmap{background:var(--white);border:1px solid var(--rule);padding:26px 26px 8px}
.usmap svg{width:100%;height:auto;display:block}
.usmap .land{fill:var(--wash);stroke:var(--rule);stroke-width:2}
.usmap .pin path{fill:var(--pine)}
.usmap .pin .hole{fill:var(--white)}
.usmap .pin .halo{fill:var(--pine);opacity:.1}
.usmap .provisional{margin:14px 0 12px}

/* ------------------------------------------------------------- log in page */
/* One column, one decision at a time. The page used to explain all three
   account types up front, which is the portfolio write-up's job, not the job of
   the screen someone landed on to sign in. */
.loginwrap{max-width:30rem;margin:0 auto;padding:18px 0 10px}
.loginwrap h1,.loginwrap h2{margin-bottom:12px}
.loginwrap .lede{margin-bottom:30px;font-size:1.02rem}
.rolebtns{display:flex;flex-direction:column;gap:12px}
.rolebtn{width:100%;justify-content:center;text-align:center}
.lgor{margin-top:30px;padding-top:24px;border-top:1px solid var(--rule);display:flex;
  align-items:center;gap:14px;flex-wrap:wrap}
.lgor span{font-size:.92rem;color:var(--slate)}
.lgback{background:none;border:0;font:inherit;font-size:.86rem;color:var(--slate);cursor:pointer;
  padding:0;margin-bottom:18px;display:inline-block}
.lgback::before{content:"\2190\00a0"}
.lgback:hover{color:var(--pine)}
.loginwrap form .btn{margin-top:6px}
.loginwrap .provisional{border-top:1px solid var(--rule);padding-top:18px}

/* --------------------------------------------------------- hairline groups */
/* Cards on a plain ground read as floating tiles. A rule per item, sharing one
   baseline, reads as a set. */
.hairs{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px}
.hair{border-top:1px solid var(--rule);padding:20px 0 24px}
.hair h3{font-size:.98rem;margin:0 0 8px}
.hair p{font-size:.94rem;color:var(--slate);margin:0;line-height:1.6}
@media (max-width:820px){ .hairs{grid-template-columns:1fr} }


/* A heading butted straight against its first paragraph reads as a mistake.
   h2/h3 carry margin:0 so section spacing stays predictable, so the gap goes
   on the paragraph that follows one. */
h1 + p, h2 + p, h3 + p{margin-top:14px}
.sechead h2 + p{margin-top:12px}

/* -------------------------------------------------- navigation, small screens
   Four sections wrapping onto a second row under the mark was not a menu, it
   was a menu that had run out of room. Below 940px the sections collapse behind
   a hamburger; the log-in button stays out on the bar, because it is the one
   thing a returning distributor came for and burying it costs a tap every
   visit. Same markup as the desktop nav, different layout. */
.navitem>.subtoggle{display:none;background:none;border:0;color:inherit;cursor:pointer;
  padding:6px;border-bottom:0}
.navtoggle{display:none;background:none;border:1px solid var(--rule);color:var(--ink);
  cursor:pointer;padding:7px 9px;line-height:0;border-radius:0}
.navtoggle:hover{border-color:var(--pine);color:var(--pine)}

@media (max-width:940px){
  .masthead .wrap{gap:14px;flex-wrap:wrap}
  .navtoggle{display:block;order:3}
  .btn.sm.login{order:2;margin-left:auto}
  nav.main{order:4;display:none;width:100%;margin:0;flex-direction:column;gap:0;
    border-top:1px solid var(--rule);padding-top:4px}
  .masthead.navopen nav.main{display:flex}
  .navitem{display:flex;flex-wrap:wrap;align-items:center;
    border-bottom:1px solid var(--rule-soft)}
  .navitem>a{flex:1;padding:15px 2px;font-size:1rem;border-bottom:0}
  .navitem[aria-current]>a{color:var(--pine)}
  .navitem>.subtoggle{display:block;transition:transform .15s ease}
  .navitem.on>.subtoggle{transform:rotate(180deg)}
  .mega{position:static;display:none;width:100%;min-width:0;border:0;border-top:0;
    padding:2px 0 18px;grid-template-columns:1fr;gap:14px;background:transparent}
  .navitem.on .mega{display:grid}
  .mega h4{margin-bottom:6px}
  .mega li{margin:0}
  .mega li a{display:block;padding:8px 0 8px 14px;border-left:2px solid var(--rule-soft)}
  .mega .chiprow{padding-left:14px}
  /* the sticky header must not eat the screen once the panel is open */
  .masthead.navopen{max-height:100vh;overflow-y:auto}
}

/* A drawing above the eyebrow in a half-and-half copy panel. The Company hero
   was a short paragraph in a tall column, so most of the panel was nothing. */
.hh-plate{width:100%;max-width:22rem;height:auto;margin:0 0 30px;opacity:.92}
@media (max-width:900px){ .hh-plate{max-width:16rem;margin-bottom:22px} }

/* A cutout with real alpha needs no multiply: multiply would darken the green
   against Paper and mud the whole thing. It also runs taller than a product
   shot, so it gets its own size. */
.hf-prod.cutout{mix-blend-mode:normal;width:min(100%,520px)}
@media (max-width:900px){ .hf-prod.cutout{width:min(78%,360px)} }

/* Menu and footer group labels. They were <h4>, which put a level-four heading
   in front of every page's <h1> and skipped a level getting there; anyone
   navigating by heading met "By category" before the page title. They label
   lists, they are not sections, so they are paragraphs now.
   Contrast, while we are here: Slate 2 at .76rem on white measured 3.30:1,
   under the 4.5:1 floor for body text. The small print reads in Slate. */
.mega .mlbl,footer.site .flbl{font-weight:600}
.litfoot{color:var(--slate)}
.card .foot,.doc .pages,.provisional,.gal-cap{color:var(--slate)}