/* ============================================================
   Sphere Chem Resources
   A trade catalogue, set for the screen.

   Rules, not shadows. Paper, not gradients. Nothing has a
   rounded corner and nothing slides in when you scroll past it.
   ============================================================ */

:root{
  --paper:   #ede9e1;
  --paper-2: #e3ded2;
  --ink:     #17181a;
  --ink-2:   #55554f;
  --rule:    #c5bfb0;
  --oxide:   #a3391b;
  --oxide-2: #d2673f;
  --deep:    #14161a;

  --serif: "Source Serif 4", Charter, Georgia, "Times New Roman", serif;
  --sans:  "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gut: clamp(20px, 4vw, 52px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:112px; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.6;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

/* the faintest tooth of paper, laid over everything */
body::before{
  content:"";
  position:fixed; inset:0; z-index:9999;
  pointer-events:none;
  opacity:.14;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ display:block; max-width:100%; height:auto; }
hr{ border:0; border-top:1px solid var(--rule); margin:0; }

a{ color:inherit; text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--oxide); }

:focus-visible{ outline:2px solid var(--oxide); outline-offset:3px; }

.wrap{ width:100%; max-width:1240px; margin-inline:auto; padding-inline:var(--gut); }

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--ink); color:var(--paper);
  padding:12px 18px; font-family:var(--sans); font-size:13px;
}
.skip:focus{ left:0; }

.sep{ color:var(--rule); padding-inline:.5em; }

/* ── utility bar ─────────────────────────────────────────── */

.utility{
  background:var(--deep);
  color:#b9b4a8;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.utility__in{
  display:flex; justify-content:space-between; gap:20px;
  padding-block:9px;
}
.utility p{ margin:0; }
.utility a{ color:#e0dbcf; text-decoration:none; }
.utility a:hover{ color:var(--oxide-2); }

/* ── masthead ────────────────────────────────────────────── */

.masthead{
  position:sticky; top:0; z-index:100;
  background:var(--paper);
  border-bottom:1px solid var(--ink);
}
.masthead__in{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  min-height:74px;
}

.logo{ display:flex; align-items:center; gap:13px; text-decoration:none; }
.logo__mark{ color:var(--ink); flex:none; }
.logo__dot{ fill:var(--oxide); }
.logo__type{ display:block; line-height:1.1; }
.logo__name{
  display:block;
  font-family:var(--serif); font-weight:700; font-size:22px;
  letter-spacing:-.015em;
}
.logo__sub{
  display:block;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2); margin-top:2px;
}

.nav ul{ display:flex; align-items:center; gap:clamp(14px,1.9vw,28px); list-style:none; margin:0; padding:0; }
.nav a{
  font-family:var(--sans); font-weight:500; font-size:12px;
  letter-spacing:.09em; text-transform:uppercase;
  text-decoration:none; padding-block:6px;
  border-bottom:2px solid transparent;
}
.nav a:hover{ border-bottom-color:var(--oxide); color:var(--ink); }
.nav a[aria-current="true"]{ border-bottom-color:var(--ink); }
.nav__cta a{
  background:var(--ink); color:var(--paper);
  padding:10px 16px; border-bottom:2px solid var(--ink);
}
.nav__cta a:hover{ background:var(--oxide); border-bottom-color:var(--oxide); color:var(--paper); }

.burger{
  display:none;
  width:44px; height:38px; padding:0;
  background:none; border:1px solid var(--ink); cursor:pointer;
  flex-direction:column; justify-content:center; align-items:center; gap:6px;
}
.burger span[aria-hidden]{ display:block; width:20px; height:1.5px; background:var(--ink); }
.burger[aria-expanded="true"] span[aria-hidden]:first-child{ transform:translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span[aria-hidden]:nth-child(2){ transform:translateY(-3.75px) rotate(-45deg); }

/* ── opening ─────────────────────────────────────────────── */

.opener{ padding-top:clamp(48px,7vw,88px); }

.opener__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gut);
  align-items:stretch;
  padding-bottom:clamp(40px,5vw,64px);
}
.opener__text{ grid-column:1 / span 7; }

/* the plate runs the full height of the column, cropped tall on purpose */
.opener__plate{
  grid-column:9 / span 4;
  display:flex; flex-direction:column;
}
.opener__plate img{
  flex:1 1 auto;
  min-height:400px;
  object-fit:cover; object-position:52% 46%;
}

.kicker{
  display:flex; align-items:center; gap:14px;
  margin:0 0 26px;
  font-family:var(--mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-2);
}
.kicker::before{ content:""; width:52px; height:1px; background:var(--oxide); flex:none; }

h1{
  margin:0 0 26px;
  font-family:var(--serif); font-weight:700;
  font-size:clamp(38px,5.6vw,72px);
  line-height:1.02; letter-spacing:-.025em;
  text-wrap:balance;
}

.lead{
  margin:0 0 26px;
  font-size:clamp(18px,1.5vw,20.5px);
  line-height:1.62; color:var(--ink-2);
  max-width:48ch;
}

.opener__links{
  margin:0 0 40px;
  font-family:var(--sans); font-size:13px; letter-spacing:.05em;
  text-transform:uppercase;
}
.lnk{ text-decoration:none; border-bottom:2px solid var(--oxide); padding-bottom:3px; }
.lnk:hover{ background:var(--oxide); color:var(--paper); border-bottom-color:var(--oxide); }

.spec{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0; margin:0;
  border-top:2px solid var(--ink);
}
.spec > div{ padding:14px 16px 0 0; }
.spec dt{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2); margin-bottom:5px;
}
.spec dd{ margin:0; font-size:16px; font-weight:600; line-height:1.3; }

/* plates */

.plate{ margin:0; }
.plate img{ width:100%; border:1px solid var(--ink); }
.plate figcaption,
.band figcaption{
  margin-top:11px;
  font-family:var(--mono); font-size:11px; line-height:1.55;
  color:var(--ink-2);
}
.plate__no{
  display:inline-block; margin-right:7px;
  color:var(--oxide); text-transform:uppercase; letter-spacing:.08em;
}
.plate--wide{ margin-top:clamp(40px,5vw,64px); }
.plate--wide img{ width:100%; max-height:520px; object-fit:cover; }

/* a plate sitting under something else in a narrow column */
.plate--stacked{ margin-top:28px; }
.plate--stacked img{ max-height:460px; object-fit:cover; }

/* pillars */

.pillars{
  display:grid; grid-template-columns:repeat(4,1fr);
  list-style:none; margin:0; padding:0;
  border-top:2px solid var(--ink); border-bottom:1px solid var(--ink);
}
.pillars li{
  padding:16px 18px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase;
  border-left:1px solid var(--rule);
}
.pillars li:first-child{ border-left:0; padding-left:0; }

/* ── sections ────────────────────────────────────────────── */

.sec{ padding-block:clamp(60px,8vw,110px); }
.sec--tint{ background:var(--paper-2); }
.sec--dark{ background:var(--deep); color:#e6e1d6; }

.sec__head{
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  column-gap:var(--gut);
  margin-bottom:clamp(36px,4.5vw,58px);
}
.sec__no{
  margin:0; padding-top:.55em;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  color:var(--oxide);
}
.sec--dark .sec__no{ color:var(--oxide-2); }
.sec__head h1,
.sec__head h2{
  grid-column:2;
  margin:0;
  font-family:var(--serif); font-weight:700;
  font-size:clamp(28px,3.6vw,44px);
  line-height:1.1; letter-spacing:-.02em;
  text-wrap:balance;
}
.sec__intro{
  grid-column:2;
  margin:18px 0 0;
  font-size:18px; line-height:1.6; color:var(--ink-2);
  max-width:56ch;
}
.sec--dark .sec__intro{ color:#a9a498; }

/* two columns with a marginal note */

.cols{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:var(--gut);
}
.cols__main{ grid-column:1 / span 7; }
.cols__note{
  grid-column:9 / span 4;
  border-top:2px solid var(--ink);
  padding-top:16px;
}

.prose p{ margin:0 0 1.15em; max-width:62ch; line-height:1.68; }
.prose p:last-child{ margin-bottom:0; }

/* one drop cap, in the one place it belongs */
#about .prose > p:first-of-type::first-letter{
  float:left;
  font-size:4.1em; line-height:.78;
  padding:.06em .09em 0 0;
  font-weight:700;
}

.note__label{
  margin:0 0 8px;
  font-family:var(--mono); font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--oxide);
}
.note__body + .note__label{ margin-top:24px; }
.note__body{
  margin:0;
  font-family:var(--sans); font-size:14.5px; line-height:1.7; color:var(--ink-2);
}
.note__body a{ color:var(--ink); }

.sub{
  margin:clamp(48px,6vw,76px) 0 0;
  padding-top:22px;
  border-top:1px solid var(--rule);
  font-family:var(--mono); font-weight:500; font-size:12px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-2);
}

/* values */

.values{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:0 var(--gut);
  list-style:none; margin:22px 0 0; padding:0;
}
.values li{ border-top:2px solid var(--ink); padding-top:14px; }
.values__no{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--oxide);
}
.values h4{
  margin:8px 0 6px;
  font-family:var(--serif); font-weight:700; font-size:20px;
  letter-spacing:-.01em;
}
.values p{
  margin:0;
  font-family:var(--sans); font-size:14px; line-height:1.55; color:var(--ink-2);
}

/* ── categories ──────────────────────────────────────────── */

.cats{ list-style:none; margin:0; padding:0; border-bottom:1px solid var(--rule); }

.cat{
  display:grid;
  grid-template-columns:56px 220px minmax(0,1fr);
  gap:var(--gut);
  align-items:start;
  padding-block:clamp(26px,3vw,38px);
  border-top:1px solid var(--rule);
}
.cat:first-child{ border-top:2px solid var(--ink); }

.cat__no{
  font-family:var(--mono); font-size:13px; letter-spacing:.06em;
  color:var(--ink-2); padding-top:4px;
}
.cat:hover .cat__no{ color:var(--oxide); }
.cat__plate img{ aspect-ratio:4/3; object-fit:cover; }

.cat__body h3{
  margin:0 0 10px;
  font-family:var(--serif); font-weight:700; font-size:clamp(21px,2vw,27px);
  letter-spacing:-.015em; line-height:1.15;
}
.cat__body p{ margin:0; max-width:58ch; line-height:1.62; color:var(--ink-2); }
.gloss{ font-style:italic; color:#7c7870; }

.cat__items{
  margin-top:16px !important;
  padding-top:12px;
  border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:11px !important; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-2);
}

/* ── product index ───────────────────────────────────────── */

.filters{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:18px 26px;
  margin-bottom:26px;
}
.filters__label{
  margin:0;
  font-family:var(--mono); font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--oxide); padding-bottom:9px;
}
.filters__row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  font-family:var(--sans); font-weight:500; font-size:11.5px;
  letter-spacing:.07em; text-transform:uppercase;
  padding:9px 13px; cursor:pointer;
  background:transparent; color:var(--ink);
  border:1px solid var(--rule);
}
.chip:hover{ border-color:var(--ink); }
.chip.is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

.filters__find{ margin-left:auto; display:flex; align-items:baseline; gap:10px; }
.filters__find label{
  font-family:var(--mono); font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-2);
}
.filters__find input{
  width:230px; max-width:44vw;
  background:transparent; border:0; border-bottom:1px solid var(--ink);
  padding:7px 2px;
  font-family:var(--mono); font-size:12.5px; color:var(--ink);
}
.filters__find input::placeholder{ color:#959083; }

.tablewrap{ overflow-x:auto; }

.idx{ width:100%; border-collapse:collapse; }
.idx thead th{
  text-align:left; vertical-align:bottom;
  padding:0 14px 11px 0;
  font-family:var(--mono); font-weight:500; font-size:10px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-2);
  border-bottom:2px solid var(--ink);
  white-space:nowrap;
}
.idx tbody tr{ border-bottom:1px solid var(--rule); }
.idx tbody tr:hover{ background:rgba(163,57,27,.05); }
.idx th[scope="row"]{
  text-align:left; font-weight:600; font-size:17px;
  padding:15px 14px 15px 0; width:20%;
  letter-spacing:-.01em;
}
.idx td{
  padding:15px 14px 15px 0;
  font-family:var(--sans); font-size:13.5px; line-height:1.5; color:var(--ink-2);
  vertical-align:top;
}
.idx td.cas{ font-family:var(--mono); font-size:12.5px; color:var(--ink); white-space:nowrap; }
.idx sub{ font-size:.72em; }

.empty{
  margin:26px 0 0;
  font-family:var(--sans); font-size:14.5px; color:var(--ink-2);
}
.tablenote{
  margin:30px 0 0; padding-top:18px;
  border-top:1px solid var(--rule);
  max-width:64ch; font-size:16.5px; color:var(--ink-2);
}

/* ── full-width plate ────────────────────────────────────── */

.band{ margin:0; }
.band img{
  width:100%; height:clamp(200px,26vw,340px); object-fit:cover; object-position:50% 55%;
  border-block:1px solid var(--ink);
}
.band figcaption{
  max-width:1240px; margin-inline:auto;
  padding:11px var(--gut) 0;
}

/* ── industries ──────────────────────────────────────────── */

.inds{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0 var(--gut);
  list-style:none; margin:0; padding:0;
}
.inds li{
  display:flex; align-items:baseline; gap:12px;
  padding:15px 0;
  border-top:1px solid var(--rule);
  font-size:19px; letter-spacing:-.01em;
}
.inds li:nth-child(-n+4){ border-top:2px solid var(--ink); }
.inds span{
  font-family:var(--mono); font-size:11px; color:var(--oxide);
  flex:none;
}
.inds__more{ color:var(--ink-2); font-style:italic; }

/* ── quality (dark) ──────────────────────────────────────── */

.sec--dark .sec__head h2{ color:#f0ece2; }

.qual{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:var(--gut);
}
.qual__side{ grid-column:1 / span 4; align-self:start; }
/* the certificate keeps pace with the list beside it */
@media (min-width:901px){
  .qual__side{ position:sticky; top:110px; }
}
.cert{
  border:1px solid rgba(230,225,214,.3);
  padding:26px 24px 22px;
}
.sec--dark .plate img{ border-color:rgba(230,225,214,.32); }
.sec--dark .plate figcaption{ color:#918c80; }
.cert__top{
  margin:0 0 14px;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--oxide-2);
}
.cert__iso{
  margin:0 0 20px;
  font-family:var(--serif); font-weight:700; font-size:clamp(34px,3.6vw,46px);
  line-height:1; letter-spacing:-.02em; color:#f2eee5;
}
.cert hr{ border-top:1px solid rgba(230,225,214,.3); }
.cert dl{ margin:18px 0 0; }
.cert dl > div{ padding-block:9px; border-top:1px solid rgba(230,225,214,.14); }
.cert dl > div:first-child{ border-top:0; }
.cert dt{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:#918c80; margin-bottom:3px;
}
.cert dd{ margin:0; font-size:16px; font-weight:600; }
.cert__foot{
  margin:20px 0 0;
  font-family:var(--sans); font-size:12.5px; color:#918c80;
}

.reasons{
  grid-column:6 / span 7;
  list-style:none; margin:0; padding:0;
  counter-reset:r;
}
.reasons li{
  counter-increment:r;
  display:grid; grid-template-columns:52px minmax(0,1fr);
  gap:0 18px;
  padding:20px 0;
  border-top:1px solid rgba(230,225,214,.16);
}
.reasons li:first-child{ border-top:2px solid rgba(230,225,214,.5); }
.reasons li::before{
  content:counter(r,decimal-leading-zero);
  font-family:var(--mono); font-size:11px; color:var(--oxide-2);
  padding-top:.45em;
}
.reasons h3,
.reasons p{ grid-column:2; }
.reasons h3{
  margin:0 0 5px;
  font-family:var(--serif); font-weight:600; font-size:21px;
  letter-spacing:-.015em; color:#f0ece2;
}
.reasons p{
  margin:0; max-width:56ch;
  font-family:var(--sans); font-size:14px; line-height:1.6; color:#a29d91;
}

/* ── export ──────────────────────────────────────────────── */

.checklist{ list-style:none; margin:0; padding:0; }
.checklist li{
  padding:9px 0 9px 20px;
  border-top:1px solid var(--rule);
  font-family:var(--sans); font-size:14px; color:var(--ink-2);
  position:relative;
}
.checklist li:first-child{ border-top:0; }
.checklist li::before{
  content:"—"; position:absolute; left:0;
  font-family:var(--mono); color:var(--oxide);
}

/* ── enquiry ─────────────────────────────────────────────── */

.enq{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:var(--gut);
}
.form{ grid-column:1 / span 7; }
.reach{
  grid-column:9 / span 4;
  border-top:2px solid var(--ink);
  padding-top:16px;
}

.field{ margin-bottom:26px; }
.field--pair{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.form label{
  display:block; margin-bottom:7px;
  font-family:var(--mono); font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-2);
}
.form abbr{ color:var(--oxide); text-decoration:none; }
.form input,
.form select,
.form textarea{
  width:100%;
  background:transparent;
  border:0; border-bottom:1px solid var(--ink);
  padding:9px 0;
  font-family:var(--serif); font-size:17px; color:var(--ink);
}
.form textarea{ resize:vertical; line-height:1.55; }
.form input::placeholder{ color:#9b968a; font-style:italic; }
.form input:focus, .form select:focus, .form textarea:focus{ border-bottom-color:var(--oxide); }
.form input[aria-invalid="true"], .form textarea[aria-invalid="true"]{ border-bottom-color:var(--oxide); border-bottom-width:2px; }

.form select{
  appearance:none; -webkit-appearance:none;
  padding-right:26px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%2317181a' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 2px center;
}

.btn{
  display:inline-block; margin-top:6px;
  background:var(--ink); color:var(--paper);
  border:1px solid var(--ink); cursor:pointer;
  padding:16px 30px;
  font-family:var(--sans); font-weight:600; font-size:12px;
  letter-spacing:.11em; text-transform:uppercase;
}
.btn:hover{ background:var(--oxide); border-color:var(--oxide); }
.btn[disabled]{ opacity:.55; cursor:default; }
.btn[disabled]:hover{ background:var(--ink); border-color:var(--ink); }

.form__foot{
  margin:20px 0 0; max-width:52ch;
  font-family:var(--sans); font-size:13px; line-height:1.6; color:var(--ink-2);
}
.form__foot--done{ color:var(--oxide); font-weight:500; }

/* ── product and category pages ──────────────────────────────
   Same rules, same paper. Nothing here introduces a new idea:
   mono for labels, oxide for the one accent, hairlines between
   rows and no boxes anywhere. */

.crumbs{
  padding-block:22px 0;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  color:var(--ink-2);
}
.crumbs ol{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:0 8px;
}
.crumbs li::after{ content:"/"; margin-left:8px; color:var(--rule); }
.crumbs li:last-child::after{ content:""; }
.crumbs a{ text-decoration:none; border-bottom:1px solid var(--rule); }
.crumbs a:hover{ border-bottom-color:var(--oxide); }
.crumbs [aria-current]{ color:var(--ink); }

.prose h2{
  margin:2.1em 0 .6em;
  font-family:var(--serif); font-weight:700;
  font-size:clamp(20px,2.1vw,25px); line-height:1.2; letter-spacing:-.01em;
}
.prose h2:first-child{ margin-top:0; }
.prose h3{
  margin:1.7em 0 .4em;
  font-family:var(--sans); font-weight:600; font-size:15px;
  letter-spacing:.02em;
}

/* key facts, set like the certificate block but on paper */
.facts{ margin:0; }
.facts > div{
  display:grid; grid-template-columns:minmax(0,1fr);
  padding:11px 0;
  border-top:1px solid var(--rule);
}
.facts > div:first-child{ border-top:0; padding-top:0; }
.facts dt{
  font-family:var(--mono); font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-2); margin-bottom:4px;
}
.facts dd{ margin:0; font-size:16.5px; }
.facts dd.cas{ font-family:var(--mono); font-size:13.5px; }
.facts sub{ font-size:.72em; }

/* a list of products, as links */
.plist{ list-style:none; margin:0; padding:0; }
.plist li{
  border-top:1px solid var(--rule);
}
.plist li:first-child{ border-top:2px solid var(--ink); }
.plist a{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline; gap:14px;
  padding:14px 0;
  text-decoration:none;
}
.plist a:hover{ color:var(--oxide); }
.plist__name{ font-size:18px; font-weight:600; }
.plist__note{
  font-family:var(--sans); font-size:13px; color:var(--ink-2);
  text-align:right;
}
.plist a:hover .plist__note{ color:var(--oxide); }

/* product names in the index table, once they lead somewhere */
.idx th[scope="row"] a{ text-decoration:none; border-bottom:1px solid var(--rule); }
.idx th[scope="row"] a:hover{ border-bottom-color:var(--oxide); }

/* the category cards, once their headings lead somewhere */
.cat__body h3 a{ text-decoration:none; border-bottom:2px solid var(--rule); }
.cat__body h3 a:hover{ border-bottom-color:var(--oxide); }

/* the products hub: category groups, one after another */
.hub{ margin-top:clamp(40px,4.5vw,64px); }
.hub h2{
  margin:0 0 6px;
  font-family:var(--serif); font-weight:700;
  font-size:clamp(21px,2.3vw,27px); letter-spacing:-.01em;
  scroll-margin-top:120px;
}
.hub__lede{
  margin:0 0 14px; max-width:60ch;
  font-family:var(--sans); font-size:14px; line-height:1.6; color:var(--ink-2);
}
.hub .plist{ margin-bottom:clamp(34px,4vw,52px); }
.hub .plist:last-child{ margin-bottom:0; }

.pagefoot{
  margin-top:clamp(44px,5vw,70px);
  padding-top:26px;
  border-top:2px solid var(--ink);
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gut);
}
.pagefoot__main{ grid-column:1 / span 7; }
.pagefoot__side{ grid-column:9 / span 4; }

@media (max-width:900px){
  .pagefoot{ grid-template-columns:1fr; }
  .pagefoot__main, .pagefoot__side{ grid-column:1; }
  .pagefoot__side{ margin-top:26px; }
}

/* honeypot — off-screen rather than display:none, which some bots skip */
.form .hp{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; opacity:0; pointer-events:none;
}

.reach__block{ margin:0 0 22px; }
.reach__tag{
  display:block; margin-bottom:5px;
  font-family:var(--mono); font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-2);
}
.reach__big{
  font-family:var(--serif); font-size:20px; font-weight:600;
  letter-spacing:-.015em;
  text-decoration:none; border-bottom:1px solid var(--rule);
}
.reach__big:hover{ border-bottom-color:var(--oxide); }
.reach__addr{ font-size:17px; line-height:1.55; color:var(--ink-2); }

/* ── footer ──────────────────────────────────────────────── */

.foot{
  background:var(--deep); color:#cdc8bc;
  padding-block:clamp(46px,6vw,72px) 30px;
  font-family:var(--sans);
}

.creed{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px 24px;
  list-style:none; margin:0 0 clamp(40px,5vw,62px); padding:0 0 20px;
  border-bottom:1px solid rgba(205,200,188,.22);
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:#8e8a7f;
}

.foot__grid{
  display:grid; grid-template-columns:2.2fr 1fr 1fr 1.3fr;
  gap:var(--gut);
}
.foot__name{
  margin:0 0 10px;
  font-family:var(--serif); font-weight:700; font-size:25px;
  letter-spacing:-.02em; color:#f0ece2;
}
.foot__line{ margin:0; font-size:14px; line-height:1.65; max-width:34ch; color:#98938a; }
.foot__h{
  margin:0 0 14px;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--oxide-2);
}
.foot__col ul{ list-style:none; margin:0; padding:0; font-size:14px; line-height:1.95; }
.foot__col a{ text-decoration:none; }
.foot__col a:hover{ color:var(--oxide-2); text-decoration:underline; }

.foot__rule{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px;
  margin-top:clamp(40px,5vw,60px); padding-top:20px;
  border-top:1px solid rgba(205,200,188,.22);
  font-family:var(--mono); font-size:11px; color:#87837a;
}
.foot__rule p{ margin:0; }
.foot__rule a{ color:#b3aea2; }

/* ── narrower screens ────────────────────────────────────── */

@media (max-width:1080px){
  .opener__text{ grid-column:1 / span 8; }
  .opener__plate{ grid-column:9 / span 4; }
  .values{ grid-template-columns:repeat(3,1fr); gap:0 32px; }
  .values li:nth-child(n+4){ margin-top:28px; }
  .inds{ grid-template-columns:repeat(3,1fr); }
  .inds li:nth-child(-n+4){ border-top:1px solid var(--rule); }
  .inds li:nth-child(-n+3){ border-top:2px solid var(--ink); }
  .qual__side{ grid-column:1 / span 5; }
  .reasons{ grid-column:7 / span 6; }
  .foot__grid{ grid-template-columns:1.6fr 1fr 1fr; }
  .foot__brand{ grid-column:1 / -1; margin-bottom:14px; }
}

@media (max-width:900px){
  html{ scroll-padding-top:80px; }

  .nav{
    position:absolute; left:0; right:0; top:100%;
    background:var(--paper);
    border-bottom:1px solid var(--ink);
    display:none;
  }
  .nav.is-open{ display:block; }
  .nav ul{ flex-direction:column; align-items:stretch; gap:0; padding:0 var(--gut) 14px; }
  .nav li{ border-top:1px solid var(--rule); }
  .nav a{ display:block; padding:15px 0; border-bottom:0; }
  .nav a:hover{ color:var(--oxide); }
  .nav__cta a{ margin:14px 0 4px; text-align:center; }
  .burger{ display:flex; }

  .opener__grid{ display:block; }
  .opener__plate{ margin-top:40px; }
  .opener__plate img{ max-height:60vh; object-fit:cover; }

  .cols__main,
  .cols__note,
  .form,
  .reach{ grid-column:1 / -1; }
  .cols__note{ margin-top:12px; }
  .reach{ margin-top:20px; }

  .qual__side,
  .reasons{ grid-column:1 / -1; }
  .reasons{ margin-top:34px; }

  .cat{ grid-template-columns:40px 160px minmax(0,1fr); gap:22px; }

  .sec__head{ grid-template-columns:1fr; }
  .sec__no{ padding-top:0; margin-bottom:10px; }
  .sec__head h1,
  .sec__head h2,
  .sec__intro{ grid-column:1; }

  .spec{ grid-template-columns:repeat(2,1fr); }
  .spec > div:nth-child(n+3){ border-top:1px solid var(--rule); margin-top:14px; }

  .pillars{ grid-template-columns:repeat(2,1fr); }
  .pillars li:nth-child(3){ border-left:0; padding-left:0; }
  .pillars li:nth-child(n+3){ border-top:1px solid var(--rule); }
}

@media (max-width:680px){
  body{ font-size:16.5px; }
  .utility__place{ display:none; }
  .utility__in{ justify-content:center; }

  .values{ grid-template-columns:1fr 1fr; }
  .values li:nth-child(n+3){ margin-top:26px; }
  .inds{ grid-template-columns:1fr 1fr; }
  .inds li:nth-child(-n+3){ border-top:1px solid var(--rule); }
  .inds li:nth-child(-n+2){ border-top:2px solid var(--ink); }

  .cat{ grid-template-columns:34px minmax(0,1fr); }
  .cat__plate{ grid-column:2; margin-bottom:16px; }
  .cat__body{ grid-column:2; }

  .field--pair{ grid-template-columns:1fr; gap:0; }
  .field--pair > div{ margin-bottom:26px; }
  .field--pair > div:last-child{ margin-bottom:0; }

  .filters{ gap:16px; }
  .filters__find{ margin-left:0; width:100%; }
  .filters__find input{ flex:1; max-width:none; }

  .foot__grid{ grid-template-columns:1fr 1fr; }

  /* the index becomes a stack of record cards */
  .tablewrap{ overflow-x:visible; }
  .idx thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .idx tbody tr{
    display:block; border:1px solid var(--rule); border-top:2px solid var(--ink);
    padding:16px; margin-bottom:14px;
  }
  .idx tbody tr:hover{ background:transparent; }
  .idx th[scope="row"]{
    display:block; width:auto; padding:0 0 12px;
    font-size:21px; border-bottom:1px solid var(--rule); margin-bottom:12px;
  }
  /* label to the left, value flowing normally — a grid here would tear
     subscripts out of their formulae and set them on their own lines */
  .idx td{
    display:block; position:relative;
    padding:5px 0 5px 100px;
  }
  .idx td::before{
    content:attr(data-l);
    position:absolute; left:0; top:0; width:88px;
    font-family:var(--mono); font-size:9.5px; letter-spacing:.09em;
    text-transform:uppercase; color:var(--oxide); line-height:2.1;
  }
}

@media (max-width:460px){
  .values,
  .inds,
  .foot__grid{ grid-template-columns:1fr; }
  .values li:nth-child(n+2){ margin-top:24px; }
  .inds li{ border-top:1px solid var(--rule) !important; }
  .inds li:first-child{ border-top:2px solid var(--ink) !important; }
  .pillars{ grid-template-columns:1fr; }
  .pillars li{ border-left:0; padding-left:0; border-top:1px solid var(--rule); }
  .pillars li:first-child{ border-top:0; }
  .spec{ grid-template-columns:1fr; }
  .spec > div:nth-child(n+2){ border-top:1px solid var(--rule); margin-top:14px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}

/* ── print ───────────────────────────────────────────────── */

@media print{
  body{ background:#fff; color:#000; font-size:11pt; }
  body::before,
  .utility, .masthead, .burger, .filters, .band, .btn, .form__foot{ display:none !important; }
  .sec{ padding-block:18pt; break-inside:avoid; }
  .sec--dark, .foot{ background:#fff !important; color:#000 !important; }
  .sec--dark .sec__head h2, .cert__iso, .reasons h3, .foot__name{ color:#000 !important; }
  .reasons p, .foot__line, .foot__col ul{ color:#333 !important; }
  .plate, .cat__plate{ display:none; }
  .cat{ grid-template-columns:40px 1fr; }
  a{ text-decoration:none; }
  .idx tbody tr{ break-inside:avoid; }
}