/*
Theme Name: TMQ Platform
Theme URI: https://tajmahalquartzite.cn
Description: Single-variety B2B aggregation platform for Taj Mahal Quartzite (StoneContact-style). Zero-plugin core: custom post types, taxonomies, aggregation homepage, lead capture.
Version: 1.0.0
Author: Platform Engineering
License: MIT
Text Domain: tmq-platform
*/

:root{
  --ink:#0b0b0d;          /* deep black */
  --ink-2:#14130f;        /* warm black */
  --panel:#1a1813;
  --panel-2:#252219;
  --line:#322d22;
  --muted:#9b9488;
  --text:#F2ECE1;         /* rice */
  --text-soft:#d8cfc0;
  --gold:#C9A86A;         /* luxury gold accent */
  --gold-soft:#e3d3a8;
  --gold-deep:#a8842f;
  --ok:#5db37a;
  --danger:#e06c5a;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --maxw:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* ⛔ READING MEASURE, 2026-10-19. 1.6 → 1.72, and 16px → 16.5px.
 *
 * BOSS saw the fourth site after its paper palette landed and asked for the
 * other three to match. The fourth site's own body rule was already at 1.6, so
 * line height is NOT what made that site feel easy to read — the palette did.
 *
 * ⛔ SO WHY CHANGE IT HERE AT ALL?
 * Because 1.6 at 16px is 25.6px of leading for 16px of text, which is tight
 * for prose in English at reading size, and the third site — a resource
 * directory, so long paragraphs — is the one that suffers most. 1.72 gives
 * 27.6px: measurably airier, still inside the range print typography uses, and
 * it costs nothing on the pages that are not prose because line-height only
 * applies to lines of text that exist.
 *
 * ⛔ 16.5px, NOT 18px. 18px looks generous in a screenshot and pushes the
 * measure past 75 characters in these columns, which is worse for reading than
 * the extra size helps. The measure, not the size, is what a long paragraph
 * suffers from.
 */
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  line-height:1.72;font-size:16.5px;-webkit-font-smoothing:antialiased;
}
a{color:var(--gold-soft);text-decoration:none;transition:color .15s}
a:hover{color:var(--gold-soft)}
img{max-width:100%;display:block}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}

/* ---------- top bar ---------- */
/* ---------- top bar (simple single row) ---------- */
.topbar{
  position:sticky;top:0;z-index:80;
  background:rgba(18,17,14,.94);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-in{display:flex;align-items:center;gap:24px;min-height:66px}

.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:18.5px;color:var(--text);letter-spacing:.2px;flex:0 0 auto}
.brand .mark{
  width:34px;height:34px;border-radius:9px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  color:#1a1405;font-weight:800;font-size:17px;
}
.brand b{color:var(--gold-soft);font-weight:700}
.brand:hover .brand-txt{color:var(--gold-soft)}
.brand-txt{white-space:nowrap;transition:color .18s}

.nav-wrap{display:flex;align-items:center;gap:18px;margin-left:auto;min-width:0}
.nav{display:flex;align-items:center;gap:2px}
.nav a{
  color:var(--text-soft);text-decoration:none;font-size:14.5px;
  padding:9px 13px;border-radius:9px;white-space:nowrap;transition:color .16s,background .16s;
}
.nav a:hover{color:var(--text);background:var(--panel)}
.nav a.is-current{color:var(--gold-soft);background:rgba(201,168,106,.1)}
/* "Post Your Needs" occupies a nav slot but is the buyer's primary action —
   outlined gold, never a filled block, so the nav row keeps one weight. */
.nav a.nav-pyn{
  color:var(--gold-soft);
  border:1px solid rgba(201,168,106,.55);
  background:rgba(201,168,106,.10);
  font-weight:700;
}
.nav a.nav-pyn:hover{
  color:#1a1405;background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  border-color:var(--gold);box-shadow:0 3px 12px rgba(201,168,106,.3);
}
.nav a.nav-pyn.is-current{color:var(--gold-soft);background:rgba(201,168,106,.18)}

.nav-cta{display:flex;align-items:center;gap:16px;flex:0 0 auto;margin-left:4px}

/* Secondary account actions: quiet text links. B2B buyers scanning the bar
   should see exactly one loud action, not three competing buttons. */
.nav-cta-minor{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.nav-link-plain{
  color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:500;
  padding:4px 2px;white-space:nowrap;transition:color .16s;
}
.nav-link-plain:hover{color:var(--gold-soft)}
/* ⛔ AND THE DOT IN THE NAVIGATION, SAME FAULT.
   --line is a rule colour. A dot a reader is meant to see is text. */
.nav-dot{color:var(--muted);font-size:13px;user-select:none}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;padding:10px 17px;font-size:14.5px;font-weight:600;
  text-decoration:none;white-space:nowrap;cursor:pointer;border:1px solid transparent;
  transition:filter .16s,background .16s,color .16s;
}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--text-soft)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-soft)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#1a1405;font-weight:700}
.btn-gold:hover{filter:brightness(1.07)}
/* "Post Your Needs" — the buyer's primary action, given the highest visual
   weight in the bar (solid gold, slightly larger) so it reads as the fastest
   conversion path, mirroring StoneContact's top-bar quick entry. */
.btn-need{
  background:linear-gradient(135deg,#D9BC7E,var(--gold),var(--gold-deep));
  color:#161005;font-weight:800;font-size:15.5px;letter-spacing:.2px;
  padding:12px 22px;border-radius:11px;
  box-shadow:0 4px 18px rgba(201,168,106,.30);
  transition:transform .16s,box-shadow .16s,filter .16s;
}
.btn-need:hover{
  transform:translateY(-1px);filter:brightness(1.06);
  box-shadow:0 8px 26px rgba(201,168,106,.44);
}
.btn-need:active{transform:translateY(0)}

/* Mobile toggle.
   ROOT CAUSE of the "white dot" in the header: the burger <button> was only
   given `display:none` on desktop but never had its UA default background
   neutralised. A <button> paints with the platform default
   `background-color: ButtonFace` (≈ rgb(239,239,239) — near-white). Inside the
   sticky bar's backdrop-filter stacking context some engines still composite
   that hidden button's face, showing up as a small white speck. So we hide it
   properly AND reset its paint, in every state. */
.nav-burger{
  /* ROOT CAUSE of the persistent "white dot" in the header: this <button>'s
     UA default `background-color: ButtonFace` (≈ #EFEFEF, near-white). Inside
     the sticky bar's backdrop-filter stacking context some engines still
     composite that face even while the button is `display:none`, painting a
     small white speck. Fix: reset EVERY paint property in all states and make
     the desktop box zero-sized + off-canvas so there is nothing to composite.
     A bare `display:none` alone is NOT enough. */
  display:none;
  width:0;height:0;min-width:0;min-height:0;
  margin:0;padding:0;border:0;outline:0;
  overflow:hidden;visibility:hidden;
  background:transparent;background-color:transparent;background-image:none;
  box-shadow:none;
  -webkit-appearance:none;appearance:none;
  color:inherit;font:inherit;
  position:absolute;left:-9999px;top:-9999px;
}
.nav-burger > span{background:transparent;border:0;box-shadow:none}
@media(max-width:900px){
  .topbar-in{flex-wrap:wrap;min-height:58px;gap:12px}
  .nav-burger{
    display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    position:static;visibility:visible;overflow:visible;
    width:42px;height:42px;min-width:42px;min-height:42px;margin-left:auto;cursor:pointer;
    border:1px solid var(--line);border-radius:10px;
    background:var(--panel);background-image:none;box-shadow:none;
    padding:0 10px;-webkit-appearance:none;appearance:none;
  }
  .nav-burger span{display:block;height:2px;width:100%;background:var(--text);border-radius:2px;transition:transform .2s,opacity .2s}
  .nav-wrap{
    order:3;width:100%;margin-left:0;flex-direction:column;align-items:stretch;gap:12px;
    padding:0 0 16px;display:none;
  }
  .nav-wrap.is-open{display:flex}
  .nav{flex-direction:column;align-items:stretch;gap:0}
  .nav a{padding:12px 14px;font-size:15.5px}
  .nav a.nav-pyn{margin-top:4px;text-align:center}
  .nav-cta{flex-direction:column-reverse;align-items:stretch;gap:14px;padding-top:4px}
  .nav-cta .btn{width:100%;padding:15px 18px}
  .nav-cta-minor{justify-content:center;gap:10px;padding-top:2px}
  .nav-link-plain{font-size:14.5px;padding:6px 4px}
  .nav-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-burger.is-open span:nth-child(2){opacity:0}
  .nav-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media(max-width:560px){
  .brand-txt{font-size:16.5px}
  .brand .mark{width:30px;height:30px;font-size:15px}
}

/* ---------- hero ---------- */
.hero{
  position:relative;padding:64px 0 54px;
  background:
    radial-gradient(900px 380px at 78% -10%,rgba(201,168,106,.18),transparent 60%),
    radial-gradient(700px 320px at 10% 110%,rgba(201,168,106,.08),transparent 55%),
    linear-gradient(180deg,#0b0b0d,#14130f);
  border-bottom:1px solid var(--line);
}
.hero .eyebrow{color:var(--gold);font-weight:600;letter-spacing:2px;text-transform:uppercase;font-size:12.5px}
.hero h1{
  font-size:clamp(34px,5.4vw,60px);line-height:1.05;margin:12px 0 14px;font-weight:800;letter-spacing:-.5px;
}
.hero h1 .accent{background:linear-gradient(135deg,var(--gold-soft),var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
/* ⛔ 680px was 76 characters a line at 18px. The measure is 31em. */
.hero p.lead{font-size:18px;color:var(--text-soft);max-width:30em;margin:0 0 26px}
.searchbar{display:flex;gap:10px;max-width:680px;flex-wrap:wrap}
.searchbar input[type=text]{
  flex:1;min-width:240px;background:var(--panel);border:1px solid var(--line);color:var(--text);
  padding:14px 16px;border-radius:11px;font-size:15px;outline:none;
}
.searchbar input[type=text]:focus{border-color:var(--gold)}
.searchbar button{
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#1a1405;border:0;
  padding:14px 22px;border-radius:11px;font-weight:700;cursor:pointer;font-size:15px;
}
.hero-stats{display:flex;gap:30px;margin-top:34px;flex-wrap:wrap}
.hero-stats .stat .n{font-size:26px;font-weight:800;color:var(--gold-soft)}
.hero-stats .stat .l{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}

/* ---------- sections ---------- */
.section{padding:52px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.section-head h2{font-size:28px;margin:0;font-weight:800;letter-spacing:-.3px}
.section-head .sub{color:var(--muted);font-size:14.5px;margin-top:4px}
.section-head a.more{color:var(--gold-soft);font-weight:600;font-size:14px}

/* filters */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.filters a{
  border:1px solid var(--line);background:var(--panel);color:var(--text-soft);
  padding:7px 14px;border-radius:999px;font-size:13.5px;
}
.filters a:hover,.filters a.active{border-color:var(--gold);color:var(--gold-soft);background:var(--panel-2)}

/* grids */
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid-4,.grid-3{grid-template-columns:1fr}}

.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .18s,border-color .18s,box-shadow .18s;
}
.card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:var(--shadow)}
.card .thumb{aspect-ratio:4/3;background:var(--panel-2);position:relative;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .thumb .ph{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(135deg,#20262f,#2c3543);color:var(--muted);font-size:13px;
}
.card .body{padding:15px 16px;display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.card .kicker{font-size:11.5px;text-transform:uppercase;letter-spacing:1px;color:var(--gold-soft)}
/* Titles wrap to two lines and stop. A longer one pushed the price row out of
   the card entirely, which is what made the archive look broken once real
   photographs started filling the frames. */
.card h3{margin:0;font-size:16.5px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{font-size:13px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}
.card .meta .tag{background:var(--panel-2);border:1px solid var(--line);padding:2px 9px;border-radius:999px}
/* The excerpt is a summary, not the specification. Clamping it keeps every card
   the same height and keeps the price row visible without a scrollbar. */
.card .excerpt{
  font-size:13px;line-height:1.55;color:var(--text-soft);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.card .foot{
  margin-top:auto;padding-top:10px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.card .foot .price{font-size:13px;line-height:1.4;min-width:0}
.card .price{color:var(--gold-soft);font-weight:700}
.chip{font-size:12px;color:var(--muted)}

/* supplier card variant */
.supplier .thumb{aspect-ratio:16/7}
.supplier .logo{
  position:absolute;left:14px;bottom:-22px;width:54px;height:54px;border-radius:12px;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));display:grid;place-items:center;
  color:#1a1405;font-weight:800;font-size:20px;box-shadow:var(--shadow);border:2px solid var(--panel);
}
.supplier .body{padding-top:30px}

/* CTA band */
.cta-band{
  background:linear-gradient(135deg,#1a2230,#11161d);border:1px solid var(--line);
  border-radius:18px;padding:38px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:10px 0;
}
.cta-band h2{margin:0 0 6px;font-size:26px}
.cta-band p{margin:0;color:var(--text-soft)}
.cta-band a.btn{
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#1a1405;font-weight:700;
  padding:14px 26px;border-radius:11px;white-space:nowrap;
}

/* ---------- single ---------- */
.single-wrap{padding:44px 0}
.back-link{color:var(--muted);font-size:14px;margin-bottom:18px;display:inline-block}
/* The picture column is deliberately the wider one. A rail needs room to show
   more than one photograph at a time - that is the entire point of it - and at
   an even split a 1400px screen gave the track 641px, enough for one picture
   and a sliver of the next, which is the single-frame layout with extra
   scrolling. */
.single-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:34px;align-items:start}
@media(max-width:880px){.single-grid{grid-template-columns:1fr}}
.gallery{display:grid;gap:12px}
.gallery .main{border-radius:14px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:var(--panel-2)}
.gallery .main img{width:100%;height:100%;object-fit:cover}
.single h1{font-size:32px;margin:0 0 8px;letter-spacing:-.4px}
.single .sub{color:var(--muted);margin-bottom:18px}
.spec-table{width:100%;border-collapse:collapse;margin:18px 0}
.spec-table td{padding:11px 12px;border-bottom:1px solid var(--line);font-size:14.5px}
.spec-table td:first-child{color:var(--muted);width:40%}
.tagrow{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.tagrow a,.tagrow span{background:var(--panel-2);border:1px solid var(--line);padding:5px 12px;border-radius:999px;font-size:13px;color:var(--text-soft)}

/* ---------- inquiry form ---------- */
.form-card{max-width:640px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:30px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;color:var(--text-soft);margin-bottom:6px;font-weight:600}
.field input,.field textarea,.field select{
  width:100%;background:var(--ink-2);border:1px solid var(--line);color:var(--text);
  padding:12px 14px;border-radius:10px;font-size:15px;outline:none;font-family:inherit;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--gold)}
.field textarea{min-height:110px;resize:vertical}
.btn-submit{
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#1a1405;border:0;
  padding:14px 24px;border-radius:11px;font-weight:700;cursor:pointer;font-size:15px;width:100%;
}
.notice{padding:12px 16px;border-radius:10px;margin-bottom:18px;font-size:14.5px}
/* ⛔ AND THE SUCCESS MESSAGE HAD THE SAME FAULT AS THE ERROR ONE.
 * #bff0cd is a light green for a dark ground. On the paper wash it sits
 * on — #e5f0e6 — it measures 1.08:1: a confirmation nobody can read.
 * #276A42 measures 5.56:1 on that same wash and 6.24:1 on the page, and
 * still carries white text on itself at 6.51:1. */
.notice.ok{background:rgba(93,179,122,.14);border:1px solid var(--ok);color:#276A42}
.notice.err{background:rgba(224,108,90,.14);border:1px solid var(--danger);color:#B93F2B}
/* ⛔ THE ERROR MESSAGE WAS A LIGHT PINK ON A LIGHT WASH.
 * #f3c4bc is a colour for a dark ground — it is what a light-red
 * label reads on a near-black panel. On paper the wash it sits on is
 * #f7e6e1, and the pair measures 1.29:1: an error message nobody can
 * read. The fourth station had this fixed already, with #B93F2B,
 * which measures 4.56:1 on that same wash and 5.28:1 on the page, and
 * still carries white text on itself at 5.51:1. So the value is that
 * one, and the reason it is quoted rather than derived is that it was
 * measured on a wash this stylesheet also uses. */

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line);background:var(--ink-2);margin-top:40px;padding:38px 0 26px}
footer.site .cols{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between}
footer.site h4{font-size:14px;color:var(--text);margin:0 0 12px;letter-spacing:.5px}
footer.site a{display:block;color:var(--muted);font-size:13.5px;padding:3px 0}
footer.site a:hover{color:var(--gold-soft)}
footer.site .copy{margin-top:26px;color:var(--muted);font-size:12.5px;border-top:1px solid var(--line);padding-top:16px}
.disclaimer{max-width:var(--maxw);margin:14px auto 0;padding:0 20px;color:var(--muted);font-size:12px}

/* breadcrumb */
.crumbs{color:var(--muted);font-size:13px;margin:18px 0}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--gold-soft)}

/* pagination */
.pager{display:flex;gap:8px;margin-top:26px;flex-wrap:wrap}
.pager a,.pager span{background:var(--panel);border:1px solid var(--line);padding:8px 14px;border-radius:9px;font-size:14px;color:var(--text-soft)}
.pager a:hover{border-color:var(--gold)}
.pager .current{background:var(--gold);color:#1a1405;border-color:var(--gold);font-weight:700}

/* empty */
.empty{text-align:center;padding:50px 0;color:var(--muted)}

/* ---------- hero background image ---------- */
.hero{overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.30}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,13,.70),rgba(20,19,15,.92))}
.hero .container{position:relative;z-index:2}

/* ---------- taxonomy INDEX (application/finish/etc.) ---------- */
.tax-group{padding:30px 0;border-bottom:1px solid var(--line)}
.tax-group:last-child{border-bottom:0}
.tax-head{display:flex;align-items:center;gap:18px;margin-bottom:20px}
.tax-banner{width:124px;height:84px;object-fit:cover;border-radius:12px;border:1px solid var(--line);flex:none}
.tax-head-txt h2{margin:0;font-size:22px;font-weight:800;letter-spacing:-.3px}
.tax-head-txt .sub{color:var(--muted);font-size:13.5px;margin-top:3px}
/* The origin's physical description, shown on the origin archive card. Kept
   narrow on purpose: it sits beside a thumbnail and has to read as a caption
   rather than compete with the product grid below it. */
.tax-head-txt .tax-note{color:var(--text-soft);font-size:13.5px;line-height:1.6;margin-top:9px;max-width:30em}
/* Origin archive hero: photograph beside the physical description.
 * Side by side rather than stacked, because the two say different things --
 * the image is what the material looks like, the text is why this origin
 * differs from the other six -- and a buyer reads them as a pair. */
.tax-hero{display:flex;gap:22px;align-items:flex-start;margin:0 0 26px;
  padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.tax-hero-img{width:280px;height:188px;object-fit:cover;border-radius:10px;flex:none;border:1px solid var(--line)}
.tax-hero-txt{flex:1;min-width:0}
.tax-hero-txt p{margin:0 0 10px;color:var(--text-soft);font-size:14px;line-height:1.7}
.tax-hero-txt p:last-child{margin-bottom:0}
@media(max-width:820px){.tax-hero{flex-direction:column}.tax-hero-img{width:100%;height:200px}}
@media(max-width:600px){.tax-head{flex-direction:column;align-items:flex-start}.tax-banner{width:100%;height:120px}}

/* ---------- China supply chain section ---------- */
.supply-chain .sc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
@media(max-width:980px){.supply-chain .sc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.supply-chain .sc-grid{grid-template-columns:1fr}}
.sc-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px;transition:transform .18s,border-color .18s,box-shadow .18s}
.sc-card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:var(--shadow)}
.sc-ico{font-size:24px;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#1a1405;margin-bottom:14px}
.sc-card h3{margin:0 0 8px;font-size:17px}
.sc-card p{margin:0;color:var(--text-soft);font-size:14px}

/* china tag + note */
.tag-china{background:linear-gradient(135deg,rgba(201,168,106,.18),rgba(168,132,47,.10));border:1px solid var(--gold);color:var(--gold-soft);padding:4px 12px;border-radius:999px;font-size:12.5px;font-weight:600}
.tag-china.soft{background:var(--panel-2);border-color:var(--line);color:var(--muted);font-weight:500}
.china-note{color:var(--text-soft);font-size:14.5px;border-left:3px solid var(--gold);padding:4px 0 4px 14px;margin:14px 0}

/* About pillars */
.about-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0}
@media(max-width:880px){.about-pillars{grid-template-columns:1fr}}
.about-pillar{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.about-pillar h3{margin:0 0 8px;font-size:16.5px;color:var(--gold-soft)}
.about-pillar p{margin:0;color:var(--text-soft);font-size:14px}
.about-pillar code{background:var(--panel-2);border:1px solid var(--line);padding:1px 6px;border-radius:6px;color:var(--gold-soft);font-size:13px}

/* ---------- Social media icon module (footer) ---------- */
.social-wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.social-label{color:var(--muted);font-size:13.5px;letter-spacing:.3px}
.social-row{display:flex;gap:10px;flex-wrap:wrap}
.soc{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line);color:var(--text-soft);transition:transform .15s,border-color .15s,color .15s,background .15s}
.soc:hover{transform:translateY(-3px);border-color:var(--gold);color:var(--gold);background:linear-gradient(135deg,rgba(201,168,106,.15),rgba(168,132,47,.08))}
.soc-svg{width:20px;height:20px;fill:currentColor}
@media(max-width:600px){.social-wrap{justify-content:center}.social-label{width:100%;text-align:center}}

/* ensure hotlinked / asset images fill their frames */
img.ph-img, img.tax-banner{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- Taxonomy INDEX per-term gallery (e.g. /application/) ---------- */
.tax-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 26px}
.tax-gallery-img{width:100%;height:172px;object-fit:cover;border-radius:12px;border:1px solid var(--line);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.tax-gallery-img:hover{transform:scale(1.02);border-color:var(--gold);box-shadow:var(--shadow)}
@media(max-width:600px){.tax-gallery{grid-template-columns:1fr}.tax-gallery-img{height:200px}}

/* ---------- Supplier verification block (single supplier) ---------- */
.verify-block{margin:18px 0 8px;background:linear-gradient(180deg,rgba(201,168,106,.08),rgba(201,168,106,.02));border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:12px;padding:16px 18px}
.vb-head{font-size:14px;font-weight:700;color:var(--gold-soft);letter-spacing:.3px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.vb-check{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--gold);color:#1a1405;font-size:12px;font-weight:800}
.vb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 22px}
.vb-item.vb-full{grid-column:1 / -1}
.vb-k{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:2px}
.vb-v{font-size:14.5px;color:var(--text);font-weight:600}
@media(max-width:560px){.vb-grid{grid-template-columns:1fr}}

/* ---------- Verified badge (supplier cards) ---------- */
.card.supplier .thumb{position:relative}
.verified-badge{position:absolute;top:10px;left:10px;background:rgba(11,11,13,.82);border:1px solid var(--gold);color:var(--gold-soft);font-size:11px;font-weight:700;letter-spacing:.4px;padding:4px 9px;border-radius:20px}

/* ---------- Homepage trust strip ---------- */
.trust-strip .trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px}
.trust-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 18px;transition:border-color .15s,transform .15s}
.trust-card:hover{border-color:var(--gold);transform:translateY(-3px)}
.t-ico{font-size:24px;margin-bottom:8px}
.trust-card h3{margin:0 0 6px;font-size:15.5px;color:var(--text)}
.trust-card p{margin:0;color:var(--text-soft);font-size:13.5px;line-height:1.5}
@media(max-width:880px){.trust-strip .trust-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.trust-strip .trust-grid{grid-template-columns:1fr}}

/* ================================================================
   MEMBERS · LOGIN · RFQ  (two-sided marketplace)
   ================================================================ */

/* ---------- auth (register / login) ---------- */
.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;padding:18px 0}
@media(max-width:900px){.auth-grid{grid-template-columns:1fr;gap:26px}}
.auth-intro h1{font-size:32px;margin:0 0 8px;letter-spacing:-.4px}
.auth-intro .sub{color:var(--muted);margin-bottom:22px;line-height:1.6}
/* Login / register secondary actions. Both sit on one rule so the filled
   Log in button stays the only primary control on the card. */
.auth-alt{
  margin:18px 0 0;padding-top:15px;
  border-top:1px solid var(--line);
  color:var(--muted);font-size:13.5px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.auth-alt a,.auth-intro a{color:var(--gold-soft);text-decoration:none}
.auth-alt a:hover{text-decoration:underline}
/* ⛔ A SEPARATOR IS PUNCTUATION, AND PUNCTUATION IS READ.
   The dot between "Forgot your password?" and "Create an account" was
   set in --line, which is the 1px rule colour. On the three dark
   stations --line is #322d22 and the dot measured 1.30:1 on the
   account card: a character nobody can see. The fourth station had
   this fixed on its own fork and the shared copy did not, and the
   contrast gate only found it once it was asked to look at separators
   at all.

   The dot now uses --muted, which is the station's own quiet ink:
   5.29:1 on a panel, 6.54:1 on the page. */
.auth-alt .sep{color:var(--muted)}

.role-switch{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.role-switch a{
  background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:16px 18px;
  display:flex;flex-direction:column;gap:4px;text-decoration:none;transition:border-color .2s,background .2s;
}
.role-switch a:hover{border-color:var(--gold)}
.role-switch a.on{border-color:var(--gold);background:rgba(201,168,106,.08)}
.rs-t{font-weight:700;font-size:16px;color:var(--text)}
.role-switch a.on .rs-t{color:var(--gold-soft)}
.rs-d{font-size:13px;color:var(--muted);line-height:1.4}
.role-perks{list-style:none;padding:0;margin:0 0 20px}
.role-perks li{color:var(--text-soft);font-size:14.5px;padding:7px 0 7px 24px;position:relative;line-height:1.5}
.role-perks li::before{content:"";position:absolute;left:0;top:14px;width:8px;height:8px;border-radius:2px;background:var(--gold)}
.notice.gate{background:rgba(201,168,106,.08);border:1px solid var(--gold);color:var(--text-soft);line-height:1.6}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.field-row{grid-template-columns:1fr}}
.field-inline{margin-bottom:20px}
.field .ck{display:flex;align-items:center;gap:9px;font-weight:400;cursor:pointer;margin:0}
.field .ck input{width:auto;accent-color:var(--gold)}
.fine{margin:14px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}
.fine a{color:var(--gold-soft)}

/* ---------- account shell ---------- */
.acct-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:20px}
.acct-head h1{font-size:30px;margin:0 0 6px}
.acct-head .sub{margin:0;color:var(--muted)}
.acct-head-row{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:26px 0 16px}
.acct-head-row h3{margin:0}
.acct-badges{display:flex;gap:8px;flex-wrap:wrap}
.pill{font-size:12.5px;padding:5px 12px;border-radius:999px;border:1px solid var(--line);color:var(--text-soft);background:var(--panel-2)}
.pill.p-buy{border-color:var(--gold);color:var(--gold-soft)}
.pill.p-sup{border-color:var(--gold);color:var(--gold-soft)}
.pill.p-ok{border-color:var(--ok);color:#276A42}
.pill.p-wait{border-color:var(--gold);color:var(--gold-soft)}
.pill.p-no{border-color:var(--danger);color:#B93F2B}
.pill.p-free{color:var(--muted)}

.acct-nav{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 26px;border-bottom:1px solid var(--line);padding-bottom:14px}
.acct-nav a{
  background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;font-size:14px;color:var(--text-soft);text-decoration:none;
}
.acct-nav a:hover{border-color:var(--gold)}
.acct-nav a.active{background:var(--gold);color:#1a1405;border-color:var(--gold);font-weight:700}
.acct-nav a.out{margin-left:auto;color:#B93F2B;border-color:var(--line)}
.acct-nav a.out:hover{border-color:var(--danger)}

.acct-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:22px}
@media(max-width:880px){.acct-grid{grid-template-columns:1fr}}
.acct-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px}
.acct-card h3{margin:0 0 14px}
.btn-link{
  display:inline-block;background:rgba(201,168,106,.1);border:1px solid var(--gold);
  color:var(--gold-soft);border-radius:10px;padding:11px 16px;font-size:14px;font-weight:600;text-decoration:none;
}
.btn-link:hover{background:var(--gold);color:#1a1405}
.empty{
  background:var(--panel);border:1px dashed var(--line);border-radius:14px;
  padding:34px;text-align:center;color:var(--muted);
}
.empty a{color:var(--gold-soft)}

/* ---------- RFQ board ---------- */
.rfq-item{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:20px 22px;margin-bottom:14px;
}
.rfq-item:hover{border-color:var(--gold)}
.rfq-item-t{font-size:18px;font-weight:700;color:var(--text);text-decoration:none;display:block;margin-bottom:6px;line-height:1.35}
.rfq-item-t:hover{color:var(--gold-soft)}
.rfq-meta{font-size:13px;color:var(--muted);margin-bottom:10px}
.rfq-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.rfq-tag{background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:12.5px;color:var(--text-soft)}
.rfq-tag b{color:var(--gold-soft);font-weight:600}
.rfq-foot{font-size:12.5px;color:var(--muted);padding-top:4px;border-top:1px solid var(--line)}
.rfq-detail{font-size:15px;line-height:1.7;color:var(--text-soft);margin:16px 0}
.rfq-buyer{background:var(--panel-2);border:1px solid var(--line);border-radius:13px;padding:18px 20px;margin-top:22px}
.rfq-buyer h4{margin:0 0 8px}
.rfq-buyer p{margin:0 0 6px}
.small{font-size:13px;color:var(--muted);line-height:1.5}
.quote-box{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;position:sticky;top:20px}
.quote-box h4{margin:0 0 14px}
.quote-box.owned{border-color:var(--gold)}
.quote-box.sent{border-color:var(--ok)}
.quote-box .btn-link{margin-bottom:8px}

/* single-rfq uses existing .single-grid/.single */

/* ================================================================
   PRODUCT FORM ATLAS  (/form/ 8 groups -> 69 forms)
   ================================================================ */
.form-groups{display:flex;flex-direction:column;gap:14px;margin:26px 0 10px}

.fg{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:18px 20px;transition:border-color .2s;
}
.fg:hover{border-color:var(--gold)}

.fg-head{
  display:flex;align-items:center;gap:14px;text-decoration:none;
  padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line);
}
.fg-key{
  flex:0 0 auto;width:34px;height:34px;border-radius:9px;
  background:rgba(201,168,106,.14);border:1px solid var(--gold);
  color:var(--gold-soft);font-weight:700;font-size:15px;
  display:flex;align-items:center;justify-content:center;
}
.fg-titles{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}
.fg-cn{font-size:17px;font-weight:700;color:var(--text)}
.fg-head:hover .fg-cn{color:var(--gold-soft)}
.fg-en{font-size:12.5px;color:var(--muted);letter-spacing:.2px}
.fg-count{
  flex:0 0 auto;font-size:12.5px;color:var(--gold-soft);
  background:rgba(201,168,106,.1);border:1px solid var(--line);
  border-radius:999px;padding:5px 12px;white-space:nowrap;
}

.fg-forms{display:flex;flex-wrap:wrap;gap:8px}
.fg-chip{
  display:inline-flex;align-items:center;
  background:var(--panel-2);border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;font-size:13.5px;color:var(--text-soft);
  text-decoration:none;transition:all .18s;
}
.fg-chip:hover{border-color:var(--gold);color:var(--gold-soft);transform:translateY(-1px)}
.fg-chip.is-p0{border-color:rgba(201,168,106,.55);color:var(--gold-soft);font-weight:600}
.fg-chip.is-p1{color:var(--text)}

/* group landing page: spec tiles */
.form-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:14px;margin:24px 0 8px;
}
.form-card-tile{
  display:flex;flex-direction:column;gap:7px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:18px 18px 16px;text-decoration:none;transition:all .2s;
}
.form-card-tile:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--shadow)}
.form-card-tile.is-p0{border-color:rgba(201,168,106,.5)}
.ft-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.form-card-tile h3{margin:0;font-size:16.5px;line-height:1.35;color:var(--text)}
.form-card-tile:hover h3{color:var(--gold-soft)}
.ft-badge{
  flex:0 0 auto;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;
  color:#1a1405;background:var(--gold);border-radius:999px;padding:3px 9px;font-weight:700;
}
.ft-en{font-size:12.5px;color:var(--muted);letter-spacing:.2px}
.ft-spec{
  font-size:12.5px;color:var(--text-soft);line-height:1.5;
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:9px;padding:8px 10px;
}
.ft-fin{font-size:12px;color:var(--muted);line-height:1.45}
.ft-fin b,.ft-uses b{color:var(--gold-soft);font-weight:600}
.ft-uses{font-size:12px;color:var(--gold-soft);opacity:.85;margin-top:auto;padding-top:4px}

@media(max-width:640px){
  .fg-head{flex-wrap:wrap;gap:10px}
  .fg-count{order:3}
}

/* ---------- single product-form page (/form/<slug>/) ---------- */
.spec-blocks{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:14px;margin:24px 0 8px;
}
.spec-block{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;
}
.spec-block h4{
  margin:0 0 10px;font-size:12.5px;letter-spacing:.8px;text-transform:uppercase;
  color:var(--gold-soft);font-weight:600;
}
.spec-block p{margin:0;font-size:14.5px;color:var(--text-soft);line-height:1.65}
.spec-block .tagrow{margin:0}
.spec-block .tagrow a,.spec-block .tagrow span{
  background:var(--panel-2);border:1px solid var(--line);
  padding:5px 12px;border-radius:999px;font-size:13px;color:var(--text-soft);text-decoration:none;
}
.spec-block .tagrow a:hover{border-color:var(--gold);color:var(--gold-soft)}

/* ================================================================
   POST YOUR NEEDS  (/post-your-needs/  buyer landing page)
   ================================================================ */
.btn-lg{padding:14px 24px;font-size:15.5px;border-radius:12px}

/* hero */
.need-hero{
  background:linear-gradient(140deg,rgba(201,168,106,.10),rgba(201,168,106,.02) 55%);
  border:1px solid var(--line);border-radius:20px;
  padding:32px 34px;margin:26px 0 8px;
}
.need-hero-in{display:grid;grid-template-columns:1.55fr .75fr;gap:34px;align-items:start}
@media(max-width:880px){.need-hero{padding:24px 20px}.need-hero-in{grid-template-columns:1fr;gap:22px}}
.need-hero .kicker{
  display:inline-block;font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--gold-soft);border:1px solid var(--line);border-radius:999px;
  padding:4px 12px;margin-bottom:14px;
}
.need-hero h1{font-size:38px;margin:0 0 12px;letter-spacing:-.6px;line-height:1.1}
@media(max-width:560px){.need-hero h1{font-size:30px}}
.need-hero-txt > p{color:var(--text-soft);font-size:15.5px;line-height:1.75;margin:0 0 20px;max-width:30em}

.need-points{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.need-points li{
  position:relative;padding:6px 0 6px 26px;
  font-size:14.5px;color:var(--text-soft);line-height:1.55;
}
.need-points li::before{
  content:"";position:absolute;left:0;top:14px;width:9px;height:9px;
  border-radius:3px;background:var(--gold);
}
.need-points b{color:var(--text);font-weight:600}

.need-hero-side{
  display:grid;gap:10px;background:var(--panel);
  border:1px solid var(--line);border-radius:15px;padding:20px;
}
.need-stat{display:flex;flex-direction:column;gap:3px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.need-stat:last-child{padding-bottom:0;border-bottom:0}
.need-stat .l{font-size:11.5px;letter-spacing:.9px;text-transform:uppercase;color:var(--muted)}
.need-stat .v{font-size:14.5px;color:var(--text);font-weight:600}

/* body layout */
.need-body{display:grid;grid-template-columns:1.5fr .7fr;gap:30px;align-items:start;margin:30px 0 20px}
@media(max-width:900px){.need-body{grid-template-columns:1fr;gap:26px}}
.need-main h2{font-size:25px;margin:0 0 8px}
.need-sub{color:var(--muted);font-size:14.5px;line-height:1.7;margin:0 0 20px;max-width:30em}
.need-form .field-row{margin-bottom:0}

.notice.ok{background:rgba(120,200,140,.1);border:1px solid var(--ok);color:#cdeed4}
.notice.ok a{color:#e6ffed;text-decoration:underline}

/* sidebar */
.need-side{
  background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:24px;
}
.need-side h3{font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--gold-soft);margin:0 0 14px}
.need-side h3.mt{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.need-steps{margin:0 0 4px;padding-left:20px;display:grid;gap:11px}
.need-steps li{font-size:14px;color:var(--text-soft);line-height:1.6}
.need-steps li::marker{color:var(--gold-soft);font-weight:700}
.need-steps b{color:var(--text)}
.need-side-p{font-size:13.5px;color:var(--muted);line-height:1.6;margin:0 0 12px}
.need-groups{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px}
.need-groups a{
  display:block;font-size:14px;color:var(--text-soft);
  text-decoration:none;padding:7px 11px;border-radius:9px;
  background:var(--panel-2);border:1px solid var(--line);transition:all .16s;
}
.need-groups a:hover{border-color:var(--gold);color:var(--gold-soft);transform:translateX(2px)}

/* ================================================================
   OUR SUPPLY  (/supply-chain/) — replaces the old supplier directory
   ================================================================ */
.sc-hero{
  background:linear-gradient(140deg,rgba(201,168,106,.10),rgba(201,168,106,.02) 55%);
  border:1px solid var(--line);border-radius:20px;padding:34px 36px;margin:26px 0 8px;
}
.sc-hero .kicker{
  display:inline-block;font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--gold-soft);border:1px solid var(--line);border-radius:999px;
  padding:4px 12px;margin-bottom:14px;
}
.sc-hero h1{font-size:36px;margin:0 0 14px;letter-spacing:-.5px;line-height:1.15}
.sc-hero p{color:var(--text-soft);font-size:16px;line-height:1.75;margin:0;max-width:30em}
@media(max-width:560px){.sc-hero{padding:24px 20px}.sc-hero h1{font-size:28px}}

.sc-chain{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:30px 0 10px}
@media(max-width:880px){.sc-chain{grid-template-columns:1fr}}
.sc-step{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px 26px 24px;
  position:relative;transition:border-color .2s;
}
.sc-step:hover{border-color:var(--gold)}
.sc-step .n{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:9px;margin-bottom:12px;
  background:rgba(201,168,106,.14);border:1px solid var(--gold);
  color:var(--gold-soft);font-weight:700;font-size:13px;
}
.sc-step h3{margin:0 0 10px;font-size:19px}
.sc-step p{margin:0 0 12px;color:var(--text-soft);font-size:14.5px;line-height:1.7}
.sc-step ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.sc-step li{
  position:relative;padding:3px 0 3px 20px;
  font-size:14px;color:var(--muted);line-height:1.6;
}
.sc-step li::before{
  content:"";position:absolute;left:0;top:11px;width:7px;height:7px;
  border-radius:2px;background:var(--gold);opacity:.8;
}

.sc-specs,.sc-forms,.sc-cta{margin:40px 0 10px}
.sc-specs h2,.sc-forms h2,.sc-cta h2{font-size:26px;margin:0 0 8px}
.sc-sub{color:var(--muted);font-size:14.5px;line-height:1.7;margin:0 0 20px;max-width:30em}
.sc-more{margin:16px 0 0}

/* The stance line — the one sentence that answers "whose side are you on?".
   It sits first in the hero paragraph and must be visually dominant. */
.stance{
  display:block;
  color:var(--gold-soft);
  font-weight:600;
  font-size:16px;
  letter-spacing:.1px;
  margin-bottom:10px;
}
.hero .lead .stance{font-size:17px}

/* ================================================================
   CONTACT — email + WhatsApp, single source: TMQ_EMAIL / TMQ_WHATSAPP
   ================================================================ */

/* --- shared strip --- */
.contact-strip{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.contact-strip .cs-item{
  display:inline-flex;align-items:center;gap:9px;
  text-decoration:none;font-size:14.5px;color:var(--text-soft);
  border:1px solid var(--line);border-radius:10px;padding:9px 15px;
  background:var(--panel-2);transition:border-color .16s,color .16s,background .16s;
}
.contact-strip .cs-item:hover{border-color:var(--gold);color:var(--gold-soft)}
.contact-strip .cs-txt{white-space:nowrap}

/* envelope icon */
.contact-strip .cs-mail .cs-ico{
  width:16px;height:16px;flex:0 0 auto;position:relative;
  border:1.6px solid currentColor;border-radius:3px;
}
.contact-strip .cs-mail .cs-ico::after{
  content:"";position:absolute;left:1.6px;top:1.6px;width:9px;height:9px;
  border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;
  transform:rotate(45deg) skew(8deg,8deg);
}
/* whatsapp glyph: rounded square with a phone hook */
.contact-strip .cs-wa .cs-ico{
  width:16px;height:16px;flex:0 0 auto;border-radius:50%;
  border:1.6px solid #25D366;position:relative;
}
.contact-strip .cs-wa .cs-ico::before{
  content:"";position:absolute;left:4.6px;top:3.2px;width:6px;height:8px;
  border-left:1.8px solid #25D366;border-bottom:1.8px solid #25D366;
  border-bottom-left-radius:3px;transform:rotate(-12deg);
}
.contact-strip .cs-wa:hover{border-color:#25D366;color:#25D366}

/* --- footer block --- */
.footer-contact{
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:22px 26px;margin:26px 0 4px;
}
.footer-contact .fc-l h4{margin:0 0 5px;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--gold-soft)}
.footer-contact .fc-l p{margin:0;font-size:14px;color:var(--muted);line-height:1.55;max-width:30em}

/* --- quote page (under the form) --- */
.need-alt{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.need-alt-t{margin:0 0 12px;font-size:14.5px;color:var(--muted)}

/* --- services page (in CTA) --- */
.contact-strip.in-cta{margin-bottom:18px;justify-content:flex-start}

/* --- header WhatsApp link --- */
.nav-wa{
  display:inline-flex;align-items:center;gap:7px;
  color:#25D366;text-decoration:none;font-size:13.5px;font-weight:600;
  padding:5px 10px;border-radius:9px;border:1px solid transparent;
  white-space:nowrap;transition:background .16s,border-color .16s;
}
.nav-wa:hover{background:rgba(37,211,102,.10);border-color:rgba(37,211,102,.45)}
.nav-wa .wa-ico{
  width:15px;height:15px;flex:0 0 auto;border-radius:50%;
  border:1.6px solid #25D366;position:relative;
}
.nav-wa .wa-ico::before{
  content:"";position:absolute;left:4.4px;top:3px;width:5.6px;height:7.4px;
  border-left:1.7px solid #25D666;border-bottom:1.7px solid #25D666;
  border-bottom-left-radius:3px;transform:rotate(-12deg);
}
@media(max-width:560px){.nav-wa .wa-txt{display:none}.nav-wa{padding:6px 8px}}

@media(max-width:760px){
  .footer-contact{flex-direction:column;align-items:flex-start;gap:16px}
  .contact-strip{width:100%}
  .contact-strip .cs-item{flex:1 1 auto;justify-content:center}
}

/* ================================================================
   OUR CAPABILITY  (/capability/)
   The soft-power proof: workshop, machines, people, numbers, timeline,
   and the limits we do not cross. Visual language deliberately matches
   /supply-chain/ so the two pages read as one system.
   ================================================================ */
.cap-hero{
  background:linear-gradient(140deg,rgba(201,168,106,.10),rgba(201,168,106,.02) 55%);
  border:1px solid var(--line);border-radius:20px;padding:34px 36px;margin:26px 0 8px;
}
.cap-hero .kicker{
  display:inline-block;font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--gold-soft);border:1px solid var(--line);border-radius:999px;
  padding:4px 12px;margin-bottom:14px;
}
.cap-hero h1{font-size:36px;margin:0 0 14px;letter-spacing:-.5px;line-height:1.15}
.cap-hero p{color:var(--text-soft);font-size:16px;line-height:1.75;margin:0;max-width:30em}
@media(max-width:560px){.cap-hero{padding:24px 20px}.cap-hero h1{font-size:28px}}

.cap-block{margin:42px 0 10px}
.cap-n{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:9px;margin-bottom:12px;
  background:rgba(201,168,106,.14);border:1px solid var(--gold);
  color:var(--gold-soft);font-weight:700;font-size:13px;
}
.cap-head h2{font-size:26px;margin:0 0 8px}
.cap-sub{color:var(--muted);font-size:14.5px;line-height:1.7;margin:0 0 20px;max-width:30em}

/* --- 01 workshop: text beside image --- */
.cap-split{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:start}
@media(max-width:880px){.cap-split{grid-template-columns:1fr;gap:20px}}
.cap-split-txt h2{font-size:26px;margin:0 0 14px}
.cap-split-txt p{margin:0 0 12px;color:var(--text-soft);font-size:14.5px;line-height:1.75}
.cap-split-txt strong{color:var(--gold-soft);font-weight:600}
.cap-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.cap-list li{position:relative;padding:3px 0 3px 22px;font-size:14px;color:var(--muted);line-height:1.6}
.cap-list li::before{
  content:"";position:absolute;left:0;top:11px;width:7px;height:7px;
  border-radius:2px;background:var(--gold);opacity:.8;
}
.cap-split-img{position:relative}
.cap-img{
  width:100%;border-radius:16px;border:1px solid var(--line);
  aspect-ratio:4/3;object-fit:cover;
  max-height:400px;
}
.cap-cap{
  display:block;margin-top:9px;font-size:12.5px;color:var(--muted);line-height:1.5;
}

/* --- 02 machines / 03 people / 06 never-do: 3-up cards --- */
.cap-machines,.cap-roles,.cap-never{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:6px;
}
@media(max-width:880px){.cap-machines,.cap-roles,.cap-never{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cap-machines,.cap-roles,.cap-never{grid-template-columns:1fr}}
.cap-machine,.cap-role,.cap-never-item{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px 22px 20px;
  transition:border-color .2s;
}
.cap-machine:hover,.cap-role:hover,.cap-never-item:hover{border-color:var(--gold)}
.cap-machine h4,.cap-role h4,.cap-never-item h4{
  margin:0 0 8px;font-size:16.5px;color:var(--gold-soft);
}
.cap-machine p,.cap-role p,.cap-never-item p{
  margin:0;color:var(--text-soft);font-size:14px;line-height:1.7;
}

/* --- 04 numbers --- */
.cap-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:6px}
@media(max-width:880px){.cap-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cap-stats{grid-template-columns:1fr}}
.cap-stat{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:22px 22px 20px;display:flex;flex-direction:column;gap:5px;
  transition:border-color .2s;
}
.cap-stat:hover{border-color:var(--gold)}
.cap-stat .v{
  font-size:32px;line-height:1.05;color:var(--gold-soft);letter-spacing:-.5px;font-weight:700;
}
.cap-stat .k{font-size:14.5px;color:var(--text)}
.cap-stat .n{font-size:12.5px;color:var(--muted);line-height:1.55}
.cap-fine{
  margin:20px 0 0;font-size:13.5px;color:var(--muted);line-height:1.7;
  border-left:2px solid var(--line);padding-left:14px;max-width:30em;
}

/* --- 05 timeline --- */
.cap-track{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:6px}
@media(max-width:1000px){.cap-track{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.cap-track{grid-template-columns:1fr}}
.cap-day{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 20px 18px;
  position:relative;transition:border-color .2s;
}
.cap-day:hover{border-color:var(--gold)}
.cap-day .d{
  display:inline-block;margin-bottom:10px;padding:3px 10px;border-radius:999px;
  background:rgba(201,168,106,.14);border:1px solid var(--gold);
  color:var(--gold-soft);font-size:12px;font-weight:700;letter-spacing:.3px;
}
.cap-day h4{margin:0 0 8px;font-size:16px}
.cap-day p{margin:0;color:var(--text-soft);font-size:13.5px;line-height:1.65}
/* ================================================================
   REQUEST A SAMPLE  (/sample-request/)
   The second buyer entry point. Reuses .need-* for the form layout so
   it reads as one system with /post-your-needs/; only the hero and the
   sample-specific bits are new.
   ================================================================ */
.smp-hero{
  background:linear-gradient(140deg,rgba(201,168,106,.10),rgba(201,168,106,.02) 55%);
  border:1px solid var(--line);border-radius:20px;padding:34px 36px;margin:26px 0 8px;
}
.smp-hero .kicker{
  display:inline-block;font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--gold-soft);border:1px solid var(--line);border-radius:999px;
  padding:4px 12px;margin-bottom:14px;
}
.smp-hero h1{font-size:38px;margin:0 0 12px;letter-spacing:-.6px;line-height:1.1}
.smp-hero p{color:var(--text-soft);font-size:15.5px;line-height:1.75;margin:0;max-width:30em}
@media(max-width:560px){.smp-hero{padding:24px 20px}.smp-hero h1{font-size:29px}}

/* contact strip inside the sample sidebar */
.need-side .contact-strip{margin-top:16px}
.need-side .contact-strip .cs-item{font-size:13.5px;padding:8px 13px}
/* checkbox rows: .field supplies the spacing, keep the list compact */
.need-form .field .ck{margin-bottom:6px}

/* Footer now carries three columns, not four: the top nav owns the catalogue
   so the footer only lists company, specification and account.
   .cols is a flex row, so give each third a floor and let them wrap. */
.cols-3 > div{flex:1 1 260px;min-width:0}
@media(max-width:640px){
  .cols-3{gap:28px}
  .cols-3 > div{flex:1 1 100%}
}

/* ================================================================
   DOWNLOAD CENTRE  (/download/)
   Cards, not a filing column. Each card carries the file's own first
   page as its face so a buyer can see what they are about to download.
   Grid is CSS grid with auto-fit, so three files look like three cards
   rather than three full-width bars. Gating stays server-side in dl/.
   ================================================================ */
.dl-head{margin:30px 0 0}
.dl-head h1{font-size:34px;margin:0 0 10px;letter-spacing:-.5px;line-height:1.1}
/* The sub-headline is the stone's own sentence about which documents it
   publishes. It sits between the H1 and the access line, and it is the part
   that differs between sites -- before this existed the page said the same
   forty words on all three domains. */
.dl-sub{margin:0 0 14px;font-size:15.5px;line-height:1.62;color:var(--text-soft);max-width:30em}
.dl-open{margin:0;font-size:14.5px;color:var(--muted);line-height:1.6}
.dl-open a{color:var(--gold-soft)}

/* Empty state.
   An empty library is not a dead end if the visitor has a way out of it, so
   the state carries the two actions that actually move the enquiry forward:
   a sample, and a specification. Both were absent before, which left the page
   reporting an absence and nothing else. */
.dl-empty{margin:26px 0 0;padding:22px 0 0;border-top:1px solid var(--line)}
.dl-empty .dl-open{max-width:30em}
.dl-empty-act{margin:16px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.dl-empty-act .btn{min-height:44px}
@media(max-width:560px){
  .dl-head h1{font-size:27px}
  .dl-empty-act .btn{width:100%}
}

/* auto-fit + minmax: the card count decides the columns, and a single file
   does not stretch across the whole page the way a flex row would. */
.dl-grid{
  list-style:none;margin:30px 0 0;padding:0;
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
}

.dl-card{
  display:flex;flex-direction:column;
  background:var(--panel,#141310);
  border:1px solid var(--line);border-radius:12px;
  overflow:hidden;
  transition:border-color .16s ease,transform .16s ease;
}
.dl-card:hover{border-color:rgba(201,168,106,.42);transform:translateY(-2px)}

/* face: a fixed-ratio window onto the document itself */
.dl-face{
  position:relative;
  aspect-ratio:4/3;
  background:#0e0e0c;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.dl-face img{width:100%;height:100%;object-fit:cover;display:block}
/* No cover available: a quiet type block, not a broken-image icon. */
.dl-face-fallback{
  font-size:26px;letter-spacing:2px;color:var(--muted);opacity:.5;font-weight:600;
}
.dl-badge{
  position:absolute;top:10px;left:10px;
  font-size:10px;letter-spacing:.9px;text-transform:uppercase;font-weight:600;
  padding:4px 9px;border-radius:4px;
  background:rgba(14,14,12,.82);color:var(--gold-soft);
  border:1px solid rgba(201,168,106,.4);
  backdrop-filter:blur(4px);
}
.dl-badge.is-member{color:var(--muted);border-color:var(--line);border-style:dashed}

.dl-body{flex:1;padding:16px 17px 6px}
.dl-name{
  margin:0;font-size:15.5px;line-height:1.42;color:var(--text);font-weight:600;
}
.dl-card.is-member .dl-name{color:var(--text-soft)}
.dl-desc{
  margin:8px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.dl-meta{
  margin:10px 0 0;font-size:12px;letter-spacing:.3px;color:var(--muted);opacity:.85;
}

.dl-act{padding:6px 17px 17px}
.dl-go{
  display:block;text-align:center;
  font-size:13px;font-weight:600;text-decoration:none;line-height:1.4;
  padding:9px 16px;border-radius:7px;white-space:nowrap;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#1a1405;
  transition:filter .15s ease;
}
.dl-go:hover{filter:brightness(1.08);color:#1a1405}
.dl-go.is-lock{
  background:transparent;border:1px solid var(--line);
  color:var(--gold-soft);font-weight:500;
}
.dl-go.is-lock:hover{border-color:var(--gold)}
.dl-go.is-soon{
  background:transparent;border:1px dashed var(--line);
  color:var(--muted);font-weight:400;
}

@media(max-width:560px){
  /* One column by default on a phone; the face keeps its ratio so the page
     still reads as a set of documents rather than a list. */
  .dl-grid{grid-template-columns:1fr;gap:16px}
  .dl-face{aspect-ratio:16/10}
}

/* ================================================================
   PRODUCT GALLERY + IMAGE VIEWER  (single-product.php)
   A stone buyer reads a photograph rather than glancing at it, so
   the set matters: one picture per product was hiding the edge,
   the back and the veining. The main frame is a button because it
   opens the full-size file, and the hint says so - an affordance
   nobody can guess is an affordance nobody uses.
   ================================================================ */
.gallery{display:grid;gap:12px}

/* main frame */
.gallery .main{
  position:relative;display:block;width:100%;padding:0;margin:0;
  border-radius:14px;overflow:hidden;border:1px solid var(--line);
  aspect-ratio:4/3;background:var(--panel-2);
  cursor:zoom-in;font:inherit;
}
.gallery .main img{width:100%;height:100%;object-fit:cover;display:block}
.gallery .main:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.tmq-zoom-hint{
  position:absolute;right:10px;bottom:10px;
  font-size:11px;letter-spacing:.4px;
  padding:5px 10px;border-radius:20px;
  background:rgba(14,14,12,.72);color:var(--gold-soft);
  border:1px solid rgba(201,168,106,.34);
  opacity:0;transition:opacity .16s ease;
}
.gallery .main:hover .tmq-zoom-hint,
.gallery .main:focus-visible .tmq-zoom-hint{opacity:1}

/* ---------- the rail ----------
   Two and a half pictures at a time, the rest one swipe away. A single large
   frame with a thumbnail strip underneath makes a visitor assemble a mental
   picture of the product by clicking through it one photograph at a time;
   showing a row means the comparison - face against edge, daylight against
   lamplight - happens without any interaction at all.

   Slides are a fixed share of the track rather than a fixed width, so the same
   markup gives two-up on a phone and three-up on a desktop without a
   breakpoint per count.

   align-items:start matters more than it looks. .gallery is a grid, and a grid
   stretches its children to the tallest row by default; the caption line under
   the rail was being pulled to the height of the specification column beside it,
   which left a block of dead space under the pictures. */
.gallery{display:grid;gap:12px;align-items:start}
.tmq-rail{position:relative}
.tmq-rail-track{
  display:flex;gap:14px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:2px;
  cursor:grab;
}
.tmq-rail-track::-webkit-scrollbar{display:none}
.tmq-rail-track.is-dragging{cursor:grabbing;scroll-snap-type:none}
.tmq-rail-track:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:10px}

.tmq-slide{
  position:relative;margin:0;flex:0 0 auto;
  /* 2.4 per view mirrors the reference site: never quite three, so the rail
     visibly continues and the visitor knows there is more. */
  width:calc((100% - 28px)/2.4);
  aspect-ratio:4/3;
  border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:var(--panel-2);
  scroll-snap-align:start;
  cursor:zoom-in;
}
.tmq-slide img{width:100%;height:100%;object-fit:cover;display:block}
.tmq-slide figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 10px 8px;
  font-size:11.5px;line-height:1.4;color:var(--text-soft);
  background:linear-gradient(to top,rgba(10,10,9,.9),rgba(10,10,9,0));
  pointer-events:none;
}
.tmq-slide:hover{border-color:rgba(201,168,106,.45)}
.tmq-slide .tmq-zoom-hint{right:8px;bottom:8px}

/* Arrows sit outside the track so they never cover a picture. They are
   hidden by markup until the script proves there is somewhere to go. */
.tmq-rail-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:2;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  font-size:24px;line-height:1;
  color:var(--gold-soft);background:rgba(16,16,14,.9);
  border:1px solid var(--line);border-radius:50%;
  cursor:pointer;transition:color .15s ease,border-color .15s ease;
}
.tmq-rail-nav:hover{color:var(--gold);border-color:var(--gold)}
.tmq-rail-nav:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.tmq-rail-nav[hidden]{display:none}
.tmq-rail-nav.is-prev{left:-6px}
.tmq-rail-nav.is-next{right:-6px}

.tmq-rail-bar{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin:10px 0 0;font-size:12px;color:var(--muted);
}
.tmq-rail-count{letter-spacing:1px;color:var(--gold-soft);font-weight:600}
.tmq-rail-tip{opacity:.7}

@media(max-width:900px){
  .tmq-slide{width:calc((100% - 14px)/1.6)}
  .tmq-rail-nav{width:36px;height:36px;font-size:21px}
  .tmq-rail-nav.is-prev{left:-4px}
  .tmq-rail-nav.is-next{right:-4px}
}
@media(max-width:560px){
  /* One and a half on a phone: enough to see that the face and the edge
     differ, without leaving a sliver too narrow to read. */
  .tmq-slide{width:78%}
  .tmq-slide figcaption{display:none}
  .tmq-rail-tip{display:none}
}

/* ---------- the overlay ---------- */
.tmq-lb{
  position:fixed;inset:0;z-index:9999;
  display:none;
  background:rgba(8,8,7,.96);
  padding:clamp(14px,3vw,40px);
  grid-template-rows:1fr auto auto auto;
  justify-items:center;align-items:center;
}
.tmq-lb.is-open{display:grid}
/* Scroll lock while the lightbox is open.
   Both elements are locked, not just the body. The scrolling box on a desktop
   browser is the root element, so body{overflow:hidden} on its own left the
   page fully scrollable behind the picture -- measured at 428px of scroll
   while the overlay was open, which is how a viewer ends up looking at a
   black rectangle and the page they had already scrolled away from. */
html.tmq-lb-open,body.tmq-lb-open{overflow:hidden}
/* Compensate for the scrollbar so the page does not shift sideways on close. */
html.tmq-lb-open{scrollbar-width:none}
html.tmq-lb-open::-webkit-scrollbar{display:none}

.tmq-lb-stage{
  grid-row:1;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;cursor:zoom-in;min-height:0;
}
.tmq-lb-stage img{
  max-width:100%;max-height:100%;
  object-fit:contain;
  border-radius:6px;
  transition:transform .18s ease;
  transform-origin:center center;
}
.tmq-lb.is-zoomed .tmq-lb-stage{cursor:zoom-out}

/* Controls sized in vmin so they stay reachable on a phone and do not
   dwarf the picture on a desktop monitor.
   The floor is 44px, not 38: both Apple and Google specify 44px as the
   minimum comfortable touch target, and a close button measured at 38x38 on an
   iPhone viewport meant the hardest thing to hit on the screen was the one
   control a visitor has to find to get out. */
.tmq-lb-close,.tmq-lb-nav{
  position:absolute;z-index:2;
  width:clamp(44px,4.4vmin,52px);height:clamp(44px,4.4vmin,52px);
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(20px,2.6vmin,30px);line-height:1;
  color:var(--gold-soft);background:rgba(20,19,16,.9);
  border:1px solid var(--line);border-radius:50%;
  cursor:pointer;transition:color .15s ease,border-color .15s ease;
  /* Grow the tappable area past the visible circle without moving anything. */
  touch-action:manipulation;
}
.tmq-lb-close::after,.tmq-lb-nav::after{content:"";position:absolute;inset:-6px}
.tmq-lb-close:hover,.tmq-lb-nav:hover{color:var(--gold);border-color:var(--gold)}
.tmq-lb-close{top:14px;right:16px}
.tmq-lb-prev{left:clamp(6px,1.6vw,22px);top:50%;transform:translateY(-50%)}
.tmq-lb-next{right:clamp(6px,1.6vw,22px);top:50%;transform:translateY(-50%)}
.tmq-lb.is-single .tmq-lb-nav{display:none}
.tmq-lb-close:focus-visible,.tmq-lb-nav:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.tmq-lb-cap{
  grid-row:2;margin:12px 0 0;
  font-size:14px;color:var(--text);text-align:center;max-width:30em;
}
.tmq-lb-cap:empty{display:none}
.tmq-lb-count{
  grid-row:3;margin:6px 0 0;
  font-size:12px;letter-spacing:1px;color:var(--muted);
}
.tmq-lb-count:empty{display:none}
.tmq-lb-hint{
  grid-row:4;margin:10px 0 0;
  font-size:11.5px;color:rgba(255,255,255,.34);text-align:center;
}
@media(max-width:700px){
  .tmq-lb-hint{display:none}
  .tmq-lb-prev{left:4px}
  .tmq-lb-next{right:4px}
}

/* ================================================================
   BLOG  (/blog/)
   The subject is one stone, so the writing is organised by question:
   the topics lead, because that is how a buyer arrives. Card measure
   is 600px, matching tmq-card, and the article column is narrower
   still - these are read, not glanced at.
   ================================================================ */
.kb-topics{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:12px;margin:26px 0 34px;
}
.kb-topic{
  display:block;text-decoration:none;color:inherit;
  background:var(--panel,#141310);border:1px solid var(--line);
  border-radius:12px;padding:18px 18px 16px;
  transition:border-color .16s ease,transform .16s ease;
}
.kb-topic:hover{border-color:rgba(201,168,106,.42);transform:translateY(-2px)}
.kb-topic-n{
  display:inline-block;font-size:11px;letter-spacing:1px;font-weight:700;
  color:var(--gold-soft);margin-bottom:9px;
}
.kb-topic-t{display:block;font-size:16px;font-weight:600;color:var(--text);margin-bottom:6px;line-height:1.3}
.kb-topic-d{display:block;font-size:12.5px;line-height:1.55;color:var(--muted)}

/* the lead article, given more room because it is the newest thing */
.kb-lead{margin:0 0 30px}
.kb-lead-card{
  display:grid;grid-template-columns:1.15fr 1fr;gap:0;
  text-decoration:none;color:inherit;
  background:var(--panel,#141310);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;
  transition:border-color .16s ease;
}
.kb-lead-card:hover{border-color:rgba(201,168,106,.42)}
.kb-lead-img{display:block;background:var(--panel-2)}
.kb-lead-img img{width:100%;height:100%;max-height:340px;object-fit:cover;display:block}
.kb-lead-img.is-blank{display:flex;align-items:center;justify-content:center;min-height:220px}
/* No cover picture, so the card becomes one column rather than half empty.
   The class on the card itself is the primary hook; :has() is only a safety
   net for a markup variant, because older Safari ignores it silently and a
   half-empty lead card is worse than a plain one. */
.kb-lead-card.is-nocover{grid-template-columns:1fr}
@supports selector(:has(*)){
  .kb-lead-card:has(.kb-lead-img.is-blank){grid-template-columns:1fr}
}
.kb-lead-body{padding:26px 28px;display:flex;flex-direction:column;justify-content:center}
.kb-lead-tag{
  font-size:10px;letter-spacing:1px;text-transform:uppercase;
  color:var(--gold-soft);margin-bottom:10px;
}
.kb-lead-body h2{font-size:23px;line-height:1.28;margin:0 0 10px;color:var(--text)}
.kb-lead-body p{font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 16px}
.kb-more{font-size:13px;color:var(--gold-soft);font-weight:600}

/* card grid */
.kb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px}
.kb-card{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--panel,#141310);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;
  transition:border-color .16s ease,transform .16s ease;
}
.kb-card:hover{border-color:rgba(201,168,106,.42);transform:translateY(-2px)}
.kb-card-img{display:block;background:var(--panel-2);aspect-ratio:4/3;overflow:hidden}
.kb-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.kb-card-img.is-blank{display:flex;align-items:center;justify-content:center}
.kb-card-fb{font-size:22px;letter-spacing:2px;color:var(--muted);opacity:.42;font-weight:600}
.kb-card-body{padding:15px 16px 17px;display:flex;flex-direction:column;flex:1}
.kb-card-tag{
  font-size:10px;letter-spacing:.7px;text-transform:uppercase;
  color:var(--gold-soft);margin-bottom:7px;
}
.kb-card-body h3{font-size:15.5px;line-height:1.4;margin:0 0 7px;color:var(--text);font-weight:600}
.kb-card-body p{font-size:13px;line-height:1.55;color:var(--muted);margin:0 0 11px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kb-card-m{font-size:11.5px;color:var(--muted);opacity:.72;margin-top:auto}
.kb-empty{color:var(--muted);padding:30px 0}

/* ---------- one article ---------- */
.kb-article{padding-top:26px}
/* ⛔ 760px was 80 characters a line. The measure is 31em. */
.kb-head{max-width:30em;margin:0 0 26px}
.kb-head h1{font-size:35px;line-height:1.2;margin:0 0 13px;letter-spacing:-.5px}
.kb-head .lede{font-size:16.5px;line-height:1.65;color:var(--muted);margin:0 0 14px}
.kb-meta{font-size:12.5px;color:var(--muted);margin:0;display:flex;gap:9px;align-items:center;flex-wrap:wrap}

/* Credit line for a shared article. Deliberately above the body: a reader who
   would want to know who wrote it should not have to finish first. */
.kb-credit{font-size:13px;color:var(--muted);margin:14px 0 0;padding:10px 14px;
  border-left:3px solid var(--gold);background:rgba(201,168,106,.07);line-height:1.6}
.kb-credit-tag{display:inline-block;font-size:10px;letter-spacing:.6px;text-transform:uppercase;
  padding:2px 8px;border-radius:3px;background:rgba(201,168,106,.16);color:var(--gold);
  border:1px solid rgba(201,168,106,.42);margin-right:8px;font-weight:600;vertical-align:1px}
.kb-credit a{color:var(--gold-soft)}

/* Sourced-fact list. Each row quotes somebody else's published figure and
   links back, so it is set apart from our own prose on purpose: a reader must
   be able to see at a glance which numbers are borrowed and which are ours. */
.kb-factlist{list-style:none;margin:18px 0 26px;padding:0}
.kb-factlist li{border-left:3px solid rgba(201,168,106,.55);background:rgba(201,168,106,.05);
  padding:12px 16px;margin:0 0 10px;font-size:14.5px;line-height:1.7}
.kb-factlist cite{font-style:normal;color:var(--gold-soft);font-size:13px;font-weight:600}
.kb-factlist a{color:var(--gold-soft);font-size:12.5px;white-space:nowrap;margin-left:4px}

/* Where to go next. Internal links move weight through our own site, which is
   the point of publishing these articles rather than leaving them standalone. */
.kb-nextlinks{list-style:none;margin:14px 0 24px;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.kb-nextlinks li{margin:0}
.kb-nextlinks a{display:block;padding:11px 15px;border:1px solid var(--line);border-radius:4px;
  text-decoration:none;font-size:14px;color:#d6d1c4;background:var(--panel,#141310)}
.kb-nextlinks a:hover{border-color:var(--gold);color:var(--gold)}

/* An in-article photograph of our own stock. It is what makes the piece read
   as ours rather than as a citation: the words may come from the trade, the
   picture is the material we actually ship. */
.kb-figure{margin:26px 0}
.kb-figure-img{display:block;width:100%;height:auto;border-radius:4px;border:1px solid var(--line)}
.kb-figure figcaption{margin-top:9px;font-size:12.5px;line-height:1.6;color:var(--muted)}

/* The questions this article answers. Visible on the page as well as in the
   schema: a reader (and a model verifying a source) can only trust a claim
   they can actually see. */
.kb-faq{margin:32px 0 8px;padding-top:26px;border-top:1px solid var(--line)}
.kb-faq h2{font-size:20px;margin:0 0 18px}
.kb-faq-item{margin:0 0 18px}
/* ⛔ AND THE FAQ TEXT READ A COLOUR, NOT A VARIABLE.
 *
 * #efe9dc and #c6c1b4 are the dark site's own text tones, written into
 * the rule instead of naming --text and --text-soft. On paper they are
 * a near-white paragraph on a near-white ground: the answer paragraph of
 * every knowledge-base article measured 1.72:1, and the gate found it on
 * a single blog page and on no other, which is exactly the kind of thing
 * a probe list misses and a full-page sweep does not.
 *
 * The fix is the same as everywhere else: the rule names the variable,
 * and the variable carries the ground's reading. */
.kb-faq-item h3{font-size:15.5px;line-height:1.5;margin:0 0 6px;color:var(--text)}
.kb-faq-item p{margin:0;font-size:14.5px;line-height:1.7;color:var(--text-soft)}
.kb-dot{opacity:.5}

.kb-hero{margin:0 0 30px}
.kb-hero img{width:100%;max-height:560px;object-fit:cover;border-radius:14px;display:block;border:1px solid var(--line)}
.kb-hero figcaption{font-size:12px;color:var(--muted);margin-top:8px;text-align:center}

/* The reading column. 680px is roughly 70 characters at this size, which is
   where long-form technical text stops being tiring. */
.kb-body{max-width:30em;margin:0;font-size:15.5px;line-height:1.78;color:var(--text-soft)}
.kb-body p{margin:0 0 1.15em}
.kb-body h2{font-size:23px;line-height:1.32;margin:1.9em 0 .7em;color:var(--text);letter-spacing:-.2px}
.kb-body h3{font-size:18.5px;line-height:1.36;margin:1.6em 0 .6em;color:var(--text)}
.kb-body h4{font-size:16px;line-height:1.4;margin:1.4em 0 .5em;color:var(--text)}
.kb-body ul,.kb-body ol{margin:0 0 1.2em;padding-left:1.35em}
.kb-body li{margin-bottom:.45em}
.kb-body img{border-radius:10px;margin:1.2em 0}
.kb-body figure{margin:1.4em 0}
.kb-body figcaption{font-size:12.5px;color:var(--muted);margin-top:8px;text-align:center}
.kb-body blockquote{
  margin:1.5em 0;padding:14px 18px;border-left:3px solid var(--gold);
  background:var(--panel,#141310);color:var(--text-soft);font-size:15px;
}
.kb-body a{color:var(--gold-soft)}
.kb-body table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:14px}
.kb-body th,.kb-body td{padding:10px 12px;border:1px solid var(--line);text-align:left;vertical-align:top}
.kb-body th{background:var(--panel,#141310);color:var(--text);font-weight:600}
.kb-body code{background:var(--panel-2);padding:2px 6px;border-radius:3px;font-size:.9em}

/* A stated source. A figure on this site that cannot be traced is worth
   nothing to somebody who has to sign the material off. */
.kb-source{
  margin:2em 0 0;padding:13px 16px;border-left:3px solid rgba(201,168,106,.5);
  background:var(--panel,#141310);font-size:13px;line-height:1.6;color:var(--muted);
}
.kb-source strong{color:var(--gold-soft);margin-right:6px;letter-spacing:.4px;font-size:11px;text-transform:uppercase}
.kb-foot-topic{margin:1.6em 0 0;font-size:13px;color:var(--muted)}
.kb-foot-topic a{color:var(--gold-soft)}

.kb-more-wrap{margin:52px 0 0;padding-top:28px;border-top:1px solid var(--line)}
.kb-more-wrap h2{font-size:21px;margin:0 0 20px;color:var(--text)}
.kb-grid.is-small{grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:14px}

@media(max-width:820px){
  .kb-lead-card{grid-template-columns:1fr}
  .kb-lead-img img{max-height:220px}
  .kb-head h1{font-size:28px}
  .kb-head .lede{font-size:15.5px}
  .kb-body{font-size:15px}
}

/* ---------- per-stone knowledge block ----------
   The homepage block that cannot be written for any other stone. Styling only
   distinguishes it from the other cards; what makes it valuable is the copy
   behind it, and that copy is per stone (config/page-copy-<slug>.php).

   Left border in the stone's own accent is deliberate: the block reads as
   "this material", not as "another section", which is the visual cue a buyer
   comparing two of our sites picks up without reading it. */
.stone-knowledge{background:var(--panel);border-top:1px solid var(--line)}
.stone-knowledge .section-head{margin-bottom:22px}
.stone-knowledge .grid{gap:16px}
.sk-card{
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  background:var(--ink-2);
  border-radius:var(--radius);
  overflow:hidden;
}
.sk-card .body{padding:20px 20px 22px}
.sk-card .kicker{
  color:var(--gold-soft);font-size:11.5px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;margin:0 0 8px;
}
.sk-card h3{font-size:17.5px;line-height:1.35;margin:0 0 10px;color:var(--text)}
.sk-card p{margin:0;color:var(--text-soft);font-size:14.5px;line-height:1.72}
@media (max-width:820px){
  .sk-card{padding:0}
}

/* ---------- group photograph ----------
   Rendered only for stones whose config names an image for a form group, so a
   stone with no photographs gets no element and no caption. The photo is the
   first thing a buyer looks at on a stone site, and a page of headings with no
   picture on it reads as a site that has nothing to show. */
.fg-photo{display:block;overflow:hidden;border-radius:var(--radius);margin-bottom:14px;line-height:0}
.fg-photo img{width:100%;height:210px;object-fit:cover;display:block;transition:transform .5s ease}
.fg:hover .fg-photo img{transform:scale(1.03)}

.group-hero{margin:0 0 26px;overflow:hidden;border-radius:var(--radius);line-height:0}
.group-hero img{width:100%;height:380px;object-fit:cover;display:block}

@media (max-width:820px){
  .fg-photo img{height:160px}
  .group-hero img{height:220px}
}

/* ============================================================================
   APPLE'S DISPLAY TYPOGRAPHY, MEASURED AND BORROWED
   ============================================================================
   BOSS, 2026-10-21: "我们这四个站的显示风格全部参照apple.com网站的风格来
   修改下, 但是网站的内容就不要改动了" -- after finding that the fourth
   station, which had just been set this way, read more easily than the
   other three.

   ⛔ WHAT WAS MEASURED, NOT REMEMBERED
   These numbers were read out of Apple's own stylesheet in a browser
   (getComputedStyle on apple.com), not recalled:

       body      17px / 400 / 25px line / -0.374px tracking / #1D1D1F
       h2        56px / 600 / 60px line / -0.28px tracking
       paragraph 21px / 400 / 25px line / +0.231px tracking
       buttons   17px / 400 / 20px line / -0.374px / radius 980px
       link      rgb(0,102,204)

   ⛔ WHAT IS BORROWED
     · the SYSTEM FONT STACK, already first here since 2026-10-19, with
       "SF Pro Text" named so a machine that has it uses it;
     · 17px on a 25px line -- Apple's body;
     · NEGATIVE tracking. Apple tightens (-0.374px at 17px) because its
       faces are drawn to be set that way. These stations tracked NEUTRAL,
       and neutral tracking on a wide face is loose;
     · 600 for headings, not 700. Apple's large headings are semibold, and
       700 at 38px is a slab rather than a headline.

   ⛔ WHAT IS NOT BORROWED, AND WHY
     · the palette. These three stations are dark by design -- warm black,
       rice text, gold -- and that is the brand. Apple's white-and-blue is
       not a better brand for a stone supplier, and BOSS asked for the
       DISPLAY style, not a different station;
     · the pill button (Apple's radius 980px). The fourth station, which
       BOSS named as the one that reads well, keeps its 10px radius. The
       reference for this work is that station, not the other two.

   ⛔ THE FOURTH STATION HAS ITS OWN COPY OF THIS BLOCK
   It runs on its own fork of this stylesheet, so the shared block does
   not reach it, and it carries the same values under `body.trz`. The two
   copies are checked against each other by
   tools/check_apple_typography.py, because two copies of one decision
   drift apart the moment one of them is edited.
*/
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  /* Apple's body: 17px on a 25px line. */
  font-size:17px;
  line-height:1.47;
  /* Apple's tracking is negative. Neutral tracking on a wide face is loose. */
  letter-spacing:-.006em;
}

/* ⛔ THE HEADINGS WERE SET AT 700 AND 800.
   Apple's large headings are 600: semibold, not bold. At 38px a 700
   heading is a slab; at 600 it is a headline, and it lets the body text
   stay the quieter of the two.

   ⛔ AND THE FIRST ATTEMPT AT THIS COULD NOT WIN.
   `h1,h2,h3,h4{font-weight:600}` is specificity 0,0,1. The site's own
   heading rules are `.hero h1` and `.section-head h2` at 0,1,1, so the
   generic rule lost to every one of them and changed nothing -- the same
   trap as a rule that matches no element: it looks applied and is not.
   So the weight is set on the SAME selectors, at the SAME specificity,
   later in this file. */
.hero h1,
.section-head h2,
.tax-head-txt h2,
.single h1,
.auth-intro h1,
.acct-head h1,
.need-hero h1,
.sc-hero h1,
.cap-hero h1,
.smp-hero h1,
.lead-card-body h2,
.kb-lead-body h2,
.kb-body h2,
.kb-body h3,
.kb-body h4,
.kb-card-body h3,
.dl-name{font-weight:600}

/* ⛔ AND THE HEADINGS TIGHTEN MORE THAN THE BODY DOES.
   Apple's display type tightens by -0.28px at 56px; scaled to the
   sizes these stations use, -0.018em is the same gesture. */
.hero h1,
.section-head h2,
.tax-head-txt h2,
.single h1,
.auth-intro h1,
.acct-head h1,
.need-hero h1,
.sc-hero h1,
.cap-hero h1,
.smp-hero h1,
.lead-card-body h2,
.kb-lead-body h2,
.kb-body h2,
.kb-body h3,
.kb-body h4,
.kb-card-body h3,
.dl-name{letter-spacing:-.018em}

/* ============================================================================
   THE MEASURE: THE LINE LENGTH, NOT THE SIZE
   ============================================================================
   2026-10-19 measured this on the third station: "⛔ 不是 18px: 18px 会把
   行长推过 75 字符, 长段落更难读。痛点是行长不是字号。"

   ⛔ AND THESE THREE STATIONS HAD IT WORSE THAN THE FOURTH
   Measured on travertine.cn before this change:

       /about/         101 characters a line
       /capability/    95 - 167 characters a line
       /supply-chain/  85 - 109 characters a line

   A hundred and sixty-seven characters on one line is not a paragraph any
   reader can find their place in.

   ⛔ WHY 31em AND NOT ch
   Thirteen rules in this stylesheet set their width in `ch`, which is the
   width of the glyph "0". A line of prose is made of letters, and a zero
   is wider than most of them, so `ch` quietly measures a line of zeros
   rather than a line of words. `ch` is not a wrong unit for a heading --
   a heading is set to break early on purpose -- but it is the wrong unit
   for a sentence.

   The number was measured, not guessed. With real prose in a real column,
   the width that holds 70 characters is:

       12.5px  33.0em      15px    32.1em      17px    31.3em
       13px    32.7em      15.5px  31.9em      18px    31.2em
       14px    32.3em      16px    31.7em

   The smallest size wants the LARGEST em, so one number has to be the
   largest of them or the small print runs long. 31em covers the whole
   range: 70 characters at 12.5px, 74 at 17px, 76 at 18px.
*/
p,
.lead,
.lede,
.sub,
.prose,
.answer-direct,
.trz-answer-lede{max-width:30em}

/* ⛔ AND THE THINGS THAT ARE NOT SENTENCES KEEP THEIR OWN WIDTH.
   A measure is for sentences. A table cell, a caption, a chip, a badge
   and a product card are not sentences, and squeezing them to a reading
   measure would break the grid they are part of. */
td,
th,
figcaption,
.chip,
.kicker,
.eyebrow,
.pill,
.badge,
.spec-table,
.cw-card,
.dl-card,
.label,
.value{max-width:none}

/* ============================================================================
   THE PAPER GROUND, 2026-10-22
   ============================================================================
   BOSS: "目前前三站背景都是黑色的，看起来很累，我们要学习Apple那种简约大气的
   白色+黑色字体，这样显示起来干干净" — the fourth station is already paper
   and is the reference, so this block copies that station's numbers rather
   than inventing a second reading of the same request.

   ⛔ THE FOURTH STATION IS THE SPECIFICATION, AND IT IS MEASURED
   It is the only one of the four that has been through this change and
   through a contrast gate, and it passes it: 113 text/background pairs on
   five pages, every one at or above the WCAG AA floor for its size. So its
   answers are the answers here, and the two of them that matter are:

       --gold  keeps the brand colour, for BLOCKS and RULES
       --gold-soft  becomes a DARK gold, for WORDS

   ⛔ WHY ONE COLOUR HAS TO BECOME TWO
   A brand gold is a light colour by nature — it is the colour of travertine
   bedding, of quartzite veining, of Amazonite — and a light colour on paper
   is not a text colour. Measured on the paper ground #FBFAF7:

       travertine  #BE8A48   2.91:1     tajmahal  #C9A86A   2.17:1
       amazonite  #518C7E   3.72:1

   All three are below the 4.5:1 floor for body text, and two of them are
   below it for large text as well. So the brand colour cannot be the word
   colour on paper, and the theme uses --gold as a word in 36 rules and
   --gold-soft as a word in 70.

   The fourth station's answer: the brand colour stays for the things a rule
   can be (a border, a fill, a marker, a hover), and a DARK gold carries the
   words. A dark gold is still recognisably the stone's own colour — it is
   the same hue, pressed down until it can be read — so the three sites stay
   tellable apart at a glance, which is the whole reason the palette system
   exists.

   ⛔ AND THE THREE DARK GROUNDS THAT STAY
   The hero, the CTA band and the badge on a photograph are dark on all three
   stations, and they are dark on the fourth station too, and BOSS approved
   that site with them dark. They keep their grounds. What changes is that
   their TEXT is pinned to a light value, because the text colour of the page
   is now ink and ink on a near-black panel is 1.02:1.

   ⛔ AND THE WAY THAT IS DONE HERE IS A VARIABLE RE-DECLARATION, NOT A LIST
   Each of those three grounds re-declares --text, --text-soft and --muted
   for its own subtree, and the rules inside it read the variables they
   already read. An earlier attempt named every selector individually, and
   the count went UP: 401 to 444. A list of the places a variable is read is a
   list that is missing one, and the one it misses is found by a gate after
   the change rather than before it. The variable is re-declared once, at the
   ground, and the rules that live on that ground follow it.
   ============================================================================ */

/* ---------- the ground, the panels, the hairline ---------- */
/* These arrive as custom properties from config/palette.php, which reads
   each stone's own palette. Changing them there changed every rule in this
   file at once, which is the only way to be sure none was missed — this
   stylesheet names --text in 44 rules and --muted in 67. */

/* ---------- the navigation bar: was a hard-coded near-black ---------- */
.topbar{
  background:rgba(251,250,247,.92);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar .brand{color:var(--text)}
.topbar .brand b{color:var(--gold-soft)}
.topbar .nav a{color:var(--text-soft)}
.topbar .nav a:hover{color:var(--text)}
.topbar .nav a.is-current{color:var(--gold-soft)}
.topbar .nav a.nav-pyn{color:var(--gold-soft)}
.topbar .nav a.nav-pyn:hover{color:var(--gold-soft)}
.topbar .nav a.nav-pyn.is-current{color:var(--gold-soft)}
.topbar .brand .mark{box-shadow:none}

/* ============================================================================
   THE DARK GROUNDS THAT STAY, AND WHY THEIR TEXT IS RE-DECLARED
   ============================================================================
   Three places on these pages paint a dark ground of their own and are not
   reading the palette: the hero (it carries the product photograph), the CTA
   band (it is the page's one piece of emphasis) and the badge on a document
   card (it sits on the card's own dark chip). All three keep their ground.

   ⛔ AND THE TEXT IS RE-DECLARED AT THE GROUND, INSTEAD OF BEING NAMED.
   The CTA band's heading read var(--text), which on paper is near-black, and
   the band itself is a near-black gradient: a near-black heading on a
   near-black band, at 1.02:1, invisible. The first fix named the selectors
   — .cta-band h1, .cta-band h2, .cta-band h3, .cta-band h4, .cta-band p,
   .cta-band li, .cta-band .sub, .cta-band .muted, .cta-band .meta — and
   every rule that reads var(--text) inside that band had to be found and
   named too, because a rule that reads the variable is not affected by a
   rule that sets it on the band.

   So the band re-declares the three text variables for its own subtree, and
   the rules inside it read the variables they already read. One declaration
   replaces a list that could not be complete.
   ============================================================================ */

/* ---------- the hero: dark ground, product photograph, light text ---------- */
.hero{
  background:
    radial-gradient(900px 380px at 78% -10%,rgba(201,168,106,.16),transparent 60%),
    radial-gradient(700px 320px at 10% 110%,rgba(201,168,106,.07),transparent 55%),
    linear-gradient(180deg,#141210,#1c1a15);
  border-bottom:1px solid var(--line);
  --text:#F4F2ED;
  --text-soft:#E4E1D9;
  --muted:#BFB8A9;
  --gold-soft:#E8D9AE;
}
.hero h1{color:#F4F2ED}
.hero p.lead{color:#E4E1D9}
.hero .eyebrow{color:#E8D9AE}
.hero-stats .stat .n{color:#E8D9AE}
.hero-stats .stat .l{color:#BFB8A9}
/* ⛔ AND THE HERO'S OWN LABELS ARE PINNED WITH THE HERO'S SELECTOR, NOT
 * WITH A SHORTER ONE.
 *
 * `.hero .eyebrow` has the same specificity as the rule it is meant to
 * override, so which of the two wins is decided by their order in the
 * file. The hero's own rule is at the top of the stylesheet and this
 * block is at the bottom, so this one wins — and it wins by being LATER,
 * which is a fact about the file and not about the cascade. Any rule added
 * to the hero section later would silently take the label back.
 *
 * So the label is pinned where the hero is, with the hero's own selector
 * and the hero's own values, and the small-caps rule for the page at
 * large cannot reach inside it. */
.hero .kicker,
.hero .eyebrow{color:#E8D9AE}
.searchbar input[type=text]{background:rgba(255,255,255,.94);color:var(--text)}
.searchbar input[type=text]::placeholder{color:#8A857A}

/* ---------- the CTA band: the page's one dark panel ---------- */
.cta-band{
  --text:#F4F2ED;
  --text-soft:#E4E1D9;
  --muted:#BFB8A9;
  --gold-soft:#E8D9AE;
}
.cta-band h1,.cta-band h2,.cta-band h3,.cta-band h4{color:#F4F2ED}
.cta-band p,.cta-band li{color:#E4E1D9}
.cta-band .sub,.cta-band .muted,.cta-band .meta{color:#BFB8A9}
.cta-band a:not(.btn):not(.btn-gold){color:#E8D9AE}

/* ---------- the badge that sits on a photograph keeps its dark ground ---------- */
.verified-badge{background:rgba(11,11,13,.82);color:#E8D9AE}
.dl-badge{background:rgba(14,14,12,.82);color:#E8D9AE;border-color:rgba(201,168,106,.4)}
.dl-badge.is-member{color:#E8D9AE}

/* ---------- the shadow was sized for a dark ground ---------- */
.card,.sc-card,.cap-card,.sk-card{box-shadow:0 2px 10px rgba(22,19,15,.06)}

/* ---------- the placeholder tile for a card with no photograph ---------- */
.card .thumb .ph{background:linear-gradient(135deg,#EFEDE7,#E4E1D8)}

/* ============================================================================
   THE GOLD, DOING TWO JOBS
   ============================================================================
   --gold is the brand colour and it paints BLOCKS and RULES: a border, a
   fill, a marker, a hover. --gold-soft is the same hue pressed down until
   it can be read as a word, and it carries the text: the 70 rules that use
   it as a colour and the 36 that use --gold for the same purpose.

   ⛔ AND THE BRAND COLOUR IS NOT LOST. It is still the stone's own colour on
   every rule, every border and every button, so the three sites still look
   like three different stones. What moved is only WHICH shade of it is
   allowed to be a letter.
   ============================================================================ */

/* ---------- the small caps labels: the brand colour, but as a RULE ---------- */
/* .kicker and .eyebrow are 11–13px uppercase labels. On the dark ground
   they were the brand gold, and on the dark ground that read. On paper the
   brand gold measures 2.17:1 to 3.72:1, and a 11.5px label at 2.9:1 is the
   combination that makes a page feel tiring fastest. The fourth station
   solved this the same way: the small print takes --muted, and the brand
   colour stays for the rules and the marks. */
.kicker,.eyebrow{color:var(--muted)}

/* ---------- and the word that wants one step deeper, for hover ---------- */
.section-head a.more:hover,
.filters a.active:hover,
.kb-more:hover,
.btn-link:hover,
.topbar .nav a.nav-pyn:hover{color:var(--gold-ink)}