/* TARS brand layer (Brand Book v1.2, October 2026).
   Loaded after each page's own <style>, so it restyles the site without touching the wording.
   Website brief (p.32): simple, elegant and white; Archivo; Ink text; the hide strip once under the hero.
   Colour (p.12-15), type scale (p.18-19), perforation and rules (p.22-23), square corners and no shadows (p.23). */

:root {
  --ink:#101418; --bone:#F1ECE3; --paper:#FFFFFF;
  --indigo:#1B2A4A; --brick:#9B3A2F; --saddle:#C79038; --olive:#6E7A5A;
  --ink-muted:#55585B; --line:#D6D2CB; --screen-ink:#4C4F52; --bone-muted:#B8B5B0;

  /* the site's own variable names, mapped onto the brand palette */
  --bg:var(--paper); --bg2:var(--bone); --card:var(--paper); --card2:var(--bone);
  --line2:var(--line); --muted:var(--ink-muted); --dim:var(--ink-muted); --indigo:#1B2A4A;
  --r:0px;

  /* the perforation dot texture is switched off (owner's decision, 1 Nov 2026): a transparent layer keeps every
     "var(--perf), <colour>" background valid, so Ink, Indigo and the hide strip show as flat colour */
  --perf:linear-gradient(transparent, transparent);

  /* type scale: display 800/125%, title 700/125%, heading 700/100%, label 500 caps +0.18em */
  --fs-display:clamp(2.6rem, 5.6vw, 4.6rem);
  --fs-h1:clamp(2.1rem, 1.3rem + 3vw, 3.6rem);
  --fs-h2:clamp(1.55rem, 1.15rem + 1.55vw, 2.3rem);
  --fs-h3:1.14rem;
  --fs-body:clamp(.95rem, .92rem + .12vw, 1rem);
  --fs-lead:clamp(1.02rem, .96rem + .3vw, 1.16rem);
  --fs-label:.7rem;
  --pad:clamp(4.2rem, 3rem + 5vw, 7.5rem);
}

/* ---------- base ---------- */
body { background:var(--paper); color:var(--ink); line-height:1.6; font-feature-settings:"kern"; }
::selection { background:var(--ink); color:var(--bone); }
a { text-underline-offset:3px; }
:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }

/* square corners and flat surfaces everywhere (p.23: square-cornered, no drop shadows) */
*, *::before, *::after { border-radius:0 !important; box-shadow:none !important; text-shadow:none !important; }
.hproof li::before, .node .ok, .skcard .bar i, .lbclose { border-radius:50% !important; }

/* ---------- typography ---------- */
h1, h2, h3, .bigword, .stat b, .ftag, .cap-title { font-family:var(--sans); }
h1 { font-size:var(--fs-h1); font-weight:800; font-stretch:125%; letter-spacing:-.01em; line-height:1.04; }
h2 { font-size:var(--fs-h2); font-weight:700; font-stretch:125%; letter-spacing:-.01em; line-height:1.12; }
h3 { font-size:var(--fs-h3); font-weight:700; font-stretch:100%; letter-spacing:0; line-height:1.3; }
p, li { max-width:72ch; }
b, strong { font-weight:600; }
.grad { color:var(--brick); }

/* labels: medium, tracked capitals in ink-muted (saddle fails as text on white, p.15) */
.eyebrow, .label, .k, .cap-title, small, .marquee .lbl, .gcap .code, .lbcode, .cat, .node small, .pc small,
.flegal .l, .sec .side .label, .details .cap-title {
  font-weight:500; letter-spacing:.18em; text-transform:uppercase; font-size:var(--fs-label); color:var(--ink-muted);
}
.eyebrow { gap:.7rem; }
.eyebrow i { width:24px; height:3px; background:var(--saddle); }
.cap-title { color:var(--ink); }
.muted, .lede, .shead p { color:var(--ink-muted); }
.lede, .shead p { font-size:var(--fs-lead); line-height:1.6; }
table, .stat b, .gcap .code, .lbcode { font-variant-numeric:tabular-nums; }

/* ---------- announcement + header ---------- */
.announce { background:var(--bone); border-bottom:0; font-size:.8rem; letter-spacing:.02em; color:var(--ink); }
.announce a { color:var(--brick); font-weight:600; }
header.top { background:rgba(255,255,255,.94); border-bottom:0; }
/* the perforated Ink rule under the header (p.23) */
header.top::after { content:""; display:block; height:5px; background:var(--perf), var(--ink); background-position:0 -1.5px, 0 0; }
header.top .wrap { min-height:70px; }
.logo { width:118px; }
.nav { gap:1.7rem; }
.nav a { color:var(--ink); font-size:.86rem; font-weight:500; letter-spacing:.01em; padding:.4rem 0; border-bottom:2px solid transparent; }
.nav a:hover, .nav a:focus-visible { color:var(--ink); border-bottom-color:var(--saddle); }
nav.nav a.on { color:var(--ink); font-weight:600; border-bottom-color:var(--ink); }
.mnav summary { border:1.5px solid var(--ink); font-weight:600; }
.mnav div { border:1px solid var(--line); background:var(--paper); }

/* ---------- buttons ---------- */
.btn { border:1.5px solid var(--ink); color:var(--ink); background:transparent; font-weight:600; letter-spacing:.01em; padding:.85rem 1.35rem; transition:background .18s, color .18s; }
.btn:hover, .btn:focus-visible { background:var(--ink); color:var(--bone); }
.btn.hot { background:var(--ink); color:var(--bone); border-color:var(--ink); }
.btn.hot:hover, .btn.hot:focus-visible { background:var(--screen-ink); border-color:var(--screen-ink); color:var(--bone); }
.btn.sm { padding:.6rem 1rem; font-size:.84rem; }

/* ---------- home hero: white, headline first, product on Bone, no lifestyle (p.23, p.32) ---------- */
.hero { background:var(--paper); color:var(--ink); min-height:clamp(600px, calc(100svh - 112px), 820px); align-items:stretch; }
.hero::after { display:none; }
.hero::before {
  inset:0 0 0 auto; width:38%; transform:none; animation:none;
  background:url("/assets/collection/lg-bag-f-004.webp") 50% 62%/cover no-repeat, var(--bone);
}
.hero .hgrid { display:flex; align-items:center; padding-top:clamp(3.5rem,7vw,6rem); padding-bottom:clamp(3.5rem,7vw,6rem); }
.hero .hgrid > div.hero-copy { max-width:60%; animation:heroCopyIn .9s .1s cubic-bezier(.2,.75,.25,1) forwards; }
.hero h1 { font-size:var(--fs-display); font-weight:800; font-stretch:125%; letter-spacing:-.01em; line-height:.98; color:var(--ink); max-width:none; margin:0 0 2.2rem; }
.hero .grad { color:var(--brick); }
.hero .btn, .hero .btn.hot { background:var(--ink); color:var(--bone); border-color:var(--ink); backdrop-filter:none; -webkit-backdrop-filter:none; padding:1rem 1.5rem; }
.hero .btn:hover, .hero .btn:focus-visible { background:var(--screen-ink); border-color:var(--screen-ink); color:var(--bone); }
@media (max-width:1100px){ .hero .hgrid > div.hero-copy { max-width:62%; } .hero::before { width:35%; } }
@media (max-width:860px){
  /* the headline fills the first screen on a phone (p.32); the product follows in the strip below */
  .hero { min-height:calc(100svh - var(--hdr, 126px)); align-items:stretch; }
  .hero::before { display:none; }
  .hero .hgrid { align-items:flex-end; padding-top:clamp(2rem,6svh,4rem); padding-bottom:clamp(1.6rem,4svh,2.6rem); }
  .hero .hgrid > div.hero-copy { max-width:none; width:100%; min-width:0; flex:1 1 auto; }
  /* "Leather Goods" is the longest line (8.3em at 112% width): size it to fit the screen */
  .hero h1 { font-size:min(calc((100vw - 2.6rem) / 8.4), 6.8svh, 4.4rem); font-stretch:112%; line-height:1.02; letter-spacing:-.01em; max-width:none; }
}

/* the hide strip, once, under the hero: Ink 63%, then Indigo, Bone, Brick, Saddle, Olive at 7.4% each, perforated (p.14, p.22) */
.hidestrip { height:14px; background:
  var(--perf),
  linear-gradient(90deg, var(--ink) 0 63%, var(--indigo) 63% 70.4%, var(--bone) 70.4% 77.8%, var(--brick) 77.8% 85.2%, var(--saddle) 85.2% 92.6%, var(--olive) 92.6% 100%); }
.hidestrip-photo { display:none; }
@media (max-width:860px){
  .hidestrip-photo { display:block; aspect-ratio:4/3; background:url("/assets/collection/lg-bag-f-004.webp") 50% 62%/cover no-repeat, var(--bone); }
}

/* ---------- product-type line ---------- */
.marquee { border-top:0; border-bottom:1px solid var(--line); padding:1.6rem 0 1.4rem; }
.marquee .lbl { margin-bottom:1rem; }
.marquee::before { background:linear-gradient(90deg, var(--paper), rgba(255,255,255,0)); }
.marquee::after { background:linear-gradient(270deg, var(--paper), rgba(255,255,255,0)); }
.track span { font-size:1.02rem; font-weight:600; font-stretch:112%; color:var(--ink); letter-spacing:0; }
.track span b { color:var(--saddle); }
@media (prefers-reduced-motion:reduce){ .track span:nth-child(n+13) { display:none; } .track { gap:.6rem 2rem; max-width:1100px; margin:0 auto; padding:0 1rem; } .track span b { margin-right:2rem; } }

/* ---------- section rhythm ---------- */
.shead { max-width:48rem; }
.shead h2 { margin-top:1.1rem !important; }
section + section { border-top:1px solid var(--line); }
#catalogue { border-top:0 !important; }

/* who we work with: tabs */
.tbtn { border:1px solid var(--line); background:var(--paper); }
.tbtn b { font-weight:500; letter-spacing:.18em; font-size:var(--fs-label); color:var(--ink-muted); }
.tbtn span { color:var(--ink); font-weight:500; }
.tbtn:hover { border-color:var(--ink); }
.tbtn.on { background:var(--bone); border-color:var(--bone); border-left:3px solid var(--ink); }
.tbtn.on b { color:var(--ink); }
.tpanel { background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--saddle); }
.tpanel::after { display:none; }
.tpanel h3 { font-size:1.3rem; font-stretch:112%; }
.tpanel li::before { color:var(--ink); }

/* figures: a perforated Ink band, Saddle numbers on Ink (p.15 pairing) */
section:has(> .wrap > .stats:only-child) { padding:0 0 var(--pad); border-top:0 !important; }
.stats { gap:0; background:var(--perf), var(--ink); padding:0; margin-top:clamp(3rem,5vw,4.5rem); }
.stat { background:transparent; border:0; border-left:1px solid rgba(241,236,227,.16); padding:clamp(1.6rem,3vw,2.4rem) clamp(1.2rem,2.4vw,2rem); }
.stat:first-child { border-left:0; }
.stat b, .stat b.grad { color:var(--saddle); font-weight:800; font-stretch:125%; letter-spacing:-.01em; }
.stat span { color:var(--bone); opacity:.82; }
@media (max-width:760px){ .stat { border-left:0; border-top:1px solid rgba(241,236,227,.16); } .stat:nth-child(-n+2) { border-top:0; } .stat:nth-child(even) { border-left:1px solid rgba(241,236,227,.16); } }

/* leather to shipment */
.canvas { background:var(--bone); border:0; }
.node { background:var(--paper); border:1px solid var(--line); }
.node.lit { border-color:var(--ink); }
.node .ic { background:transparent; border:1px solid var(--line); }
.node .ic svg { stroke:var(--ink); stroke-width:1.5; }
.node h3 { font-size:1rem; }
.node .ok { background:var(--line); }
.node.lit .ok { background:var(--olive); }
.clog, .clog b { color:var(--ink-muted); }

/* credentials */
.cell .k, .cell.feature .k { color:var(--ink-muted); }
.cell { background:var(--paper); border:1px solid var(--line); }
.cell.feature { background:var(--bone); border-color:var(--bone); border-top:3px solid var(--saddle); }
.bigword { font-weight:800; font-stretch:125%; letter-spacing:-.01em; color:var(--ink); }
.badges span, .chips span { border:1px solid var(--line); background:var(--paper); color:var(--ink); font-weight:500; }
.cell.feature .badges span { border-color:var(--ink); background:transparent; }

/* gallery tiles */
.gtile { border:1px solid var(--line); background:var(--paper); }
.gtile:hover, .gtile:focus-visible { border-color:var(--ink); transform:none; }
.gtile .gimg { background:var(--bone); }
.gcap b { font-weight:600; }
.gcap .code { color:var(--ink-muted); }
.gchip { border:1px solid var(--line); background:var(--paper); color:var(--ink); font-weight:500; }
.gchip:hover { border-color:var(--ink); }
.gchip.on { background:var(--ink); border-color:var(--ink); color:var(--bone); }
.lightbox { border:0; }
.lightbox::backdrop { background:rgba(16,20,24,.72); }
.lbclose { background:var(--ink); color:var(--bone); }

/* journal cards: catalogue-style Saddle top rule */
.pc { border:1px solid var(--line); border-top:3px solid var(--saddle); background:var(--paper); }
.pc:hover, .pc:focus-visible { border-color:var(--ink); border-top-color:var(--saddle); transform:none; }
.pc small { color:var(--ink-muted); }

/* catalogue request: a Bone panel (the footer below is the Ink block) */
.finalcta { background:var(--bone); color:var(--ink); border:0; border-top:3px solid var(--saddle); }
.finalcta::before, .finalcta::after { display:none; }
.finalcta h2 { color:var(--ink); }
.finalcta .grad { color:var(--brick); }
.finalcta p, .finalcta .fnote { color:var(--ink-muted); }
.finalcta .fnote a { color:var(--ink) !important; text-decoration:underline; text-decoration-color:var(--saddle); text-decoration-thickness:2px; }
.form input { background:var(--paper); border:1px solid var(--line); color:var(--ink); }
.form input:focus { outline:2px solid var(--ink); outline-offset:0; border-color:var(--ink); }

/* ---------- inner pages ---------- */
.pagehead { background:var(--paper); border-bottom:1px solid var(--line); }
.pagehead .glow { display:none; }
.pagehead h1 { font-size:var(--fs-h1); max-width:20ch; }
.sec { border-top:1px solid var(--line); }
.sec:first-child { border-top:0; }
.sec .body h2 { font-size:var(--fs-h2); }
.list li { border-bottom:1px solid var(--line); }
.list .k { color:var(--ink); }
.plain li { border-top:1px solid var(--line); }
.cred, .cert { background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--saddle); }
.cred b { font-stretch:125%; font-weight:800; }
.cert .who { color:var(--ink-muted); font-weight:500; letter-spacing:.18em; text-transform:uppercase; font-size:var(--fs-label); }
.posts li a { border-top:1px solid var(--line); }
.posts li a:hover h3, .posts li a:focus-visible h3 { text-decoration:underline; text-decoration-color:var(--saddle); text-decoration-thickness:2px; }
.struct th, .struct td { border-color:var(--line); }
.struct tr:first-child th { background:transparent; border-bottom:1px solid var(--line); font-weight:500; letter-spacing:.18em; text-transform:uppercase; font-size:var(--fs-label); color:var(--ink-muted); }
.steps2 li::before { background:var(--ink); color:var(--bone); }
.cta-band { background:var(--perf), var(--ink); color:var(--bone); border:0; }
.cta-band h2, .cta-band h3, .cta-band p { color:var(--bone); }
.cta-band .btn, .cta-band .btn.hot { background:var(--bone); color:var(--ink); border-color:var(--bone); }
.cta-band .btn:hover { background:var(--paper); border-color:var(--paper); }
.link, .tlink { color:var(--ink); text-decoration:underline; text-decoration-color:var(--saddle); text-decoration-thickness:2px; }
.tlink:hover, .link:hover { color:var(--brick); }

/* contact form */
.field label { font-weight:500; letter-spacing:.18em; text-transform:uppercase; font-size:var(--fs-label); color:var(--ink-muted); }
.field label .opt { letter-spacing:0; text-transform:none; }
.field input, .field textarea { border:1px solid var(--line); background:var(--paper); }
.field input:focus, .field textarea:focus { border-color:var(--ink); outline:0; }

/* journal articles: measure 55-75 characters */
.article { max-width:44rem; }
.article h1 { font-size:clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem); font-weight:800; font-stretch:125%; line-height:1.08; }
.article h2 { font-size:1.35rem; font-stretch:100%; font-weight:700; margin-top:2.4rem; }
.article p, .article li { font-size:1.02rem; line-height:1.7; }
.article .meta { color:var(--ink-muted); font-size:.85rem; }
.article .rule { height:5px; background:var(--perf), var(--ink); background-position:0 -1.5px, 0 0; border:0; }
.article .cat { color:var(--ink-muted); }
.article .cta { background:var(--bone); border:0; border-top:3px solid var(--saddle); }
.article .back { color:var(--ink); }

/* ---------- footer: perforated Ink, Bone type ---------- */
footer { background:var(--perf), var(--ink); color:var(--bone-muted); border-top:0; }
footer .logo, .fbrand .logo { color:var(--bone); }
.ftag { color:var(--bone); font-weight:700; font-stretch:125%; letter-spacing:-.01em; max-width:24ch; }
.fmail { color:var(--bone); border-bottom-color:rgba(241,236,227,.35); }
.fmail:hover { color:var(--paper); border-color:var(--saddle); }
.fnav a { color:var(--bone); }
.fnav a:hover { color:var(--saddle); }
.flegal { border-top-color:rgba(241,236,227,.16); }
.flegal .l { color:var(--saddle); }
.fbottom { color:var(--bone-muted); }
.fbottom a { color:var(--bone); }

@media (prefers-reduced-motion:reduce){ .btn, .gtile, .pc { transition:none; } }

/* =====================================================================
   BOLD LAYER (31 Oct 2026): the brand palette in full-width blocks.
   Contrast pairs used (measured): Bone on Ink 15.7, Bone on Indigo 12.1,
   Bone on Brick 5.9, Ink on Saddle 6.6, Saddle on Ink 6.6, Saddle on Indigo 5.1.
   ===================================================================== */
:root { --fs-h2:clamp(1.8rem, 1.2rem + 2.4vw, 3.1rem); --fs-h1:clamp(2.3rem, 1.3rem + 3.6vw, 4.2rem); }

/* dark and coloured blocks share these text rules */
.on-dark, #process, section:has(> .wrap > .stats:only-child), #journal, .pagehead, .hero { --tx:var(--bone); }
#process .eyebrow, #journal .eyebrow, .pagehead .eyebrow { color:var(--bone); }
#process h2, #journal h2, .pagehead h1 { color:var(--bone); }
#process .grad, .pagehead .grad { color:var(--saddle); }
#process .shead p, .pagehead .lede { color:var(--bone-muted); }
#journal .grad { color:var(--bone); text-decoration:underline; text-decoration-color:var(--saddle); text-decoration-thickness:.12em; text-underline-offset:.14em; }
#journal .shead p { color:var(--bone); opacity:.9; }

/* announcement on Indigo */
.announce { background:var(--indigo); color:var(--bone); }
.announce a { color:var(--saddle); }

/* ---------- hero: Ink, the photograph fading into it ---------- */
.hero { background:var(--perf), var(--ink); color:var(--bone); min-height:clamp(640px, calc(100svh - 112px), 860px); }
.hero::before {
  inset:0 0 0 auto; width:68%; transform:scale(1.03); animation:heroImageIn 2.4s cubic-bezier(.2,.75,.25,1) forwards;
  background:url("/assets/hero-lifestyle-wide-lg-bag-f-004.webp") 62% 30%/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 18%, #000 46%), linear-gradient(0deg, transparent 0%, #000 22%);
  -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 18%, #000 46%), linear-gradient(0deg, transparent 0%, #000 22%); mask-composite:intersect;
}
.hero::after { display:block; content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(16,20,24,.55) 0%, rgba(16,20,24,0) 55%); }
.hero h1 { color:var(--bone); }
.hero .grad { color:var(--saddle); }
.hero .btn, .hero .btn.hot { background:var(--saddle); border-color:var(--saddle); color:var(--ink); }
.hero .btn:hover, .hero .btn:focus-visible { background:var(--bone); border-color:var(--bone); color:var(--ink); }
.hero .hgrid > div.hero-copy { max-width:58%; }
@media (max-width:860px){
  .hero { align-items:stretch; }
  .hero::before { display:block; inset:0; width:100%; background-position:72% 20%;
    -webkit-mask-image:linear-gradient(0deg, transparent 8%, rgba(0,0,0,.25) 42%, #000 78%); mask-image:linear-gradient(0deg, transparent 8%, rgba(0,0,0,.25) 42%, #000 78%); }
  .hero::after { background:linear-gradient(0deg, rgba(16,20,24,.85) 0%, rgba(16,20,24,0) 60%); }
  .hero .hgrid > div.hero-copy { max-width:none; }
}
/* the photograph is the hero now, so the extra phone photo below it goes */
.hidestrip-photo { display:none !important; }
.hidestrip { height:22px; }

/* ---------- product line on Saddle ---------- */
.marquee { background:var(--saddle); border:0; padding:1.7rem 0 1.6rem; }
.marquee::before { background:linear-gradient(90deg, var(--saddle), rgba(199,144,56,0)); }
.marquee::after { background:linear-gradient(270deg, var(--saddle), rgba(199,144,56,0)); }
.marquee .lbl { color:var(--ink); }
.track span { color:var(--ink); font-size:clamp(1.15rem, 1rem + .6vw, 1.55rem); font-weight:800; font-stretch:125%; }
.track span b { color:var(--ink); opacity:.45; }

/* ---------- sections ---------- */
section + section { border-top:0; }
.shead { max-width:54rem; }
.eyebrow i { width:32px; height:4px; }

/* who we work with: active tab in Ink */
.tbtn.on { background:var(--ink); border-color:var(--ink); border-left:6px solid var(--saddle); }
.tbtn.on b { color:var(--saddle); }
.tbtn.on span { color:var(--bone); }
.tpanel { border:2px solid var(--ink); border-top:8px solid var(--saddle); }

/* figures: full-width Indigo band, big Saddle numbers */
section:has(> .wrap > .stats:only-child) { background:var(--perf), var(--indigo); padding:clamp(3rem,6vw,5rem) 0; margin-top:var(--pad); }
.stats { background:transparent; margin-top:0; }
.stat { border-left-color:rgba(241,236,227,.22); }
.stat b, .stat b.grad { font-size:clamp(3rem, 2rem + 4vw, 5.4rem); line-height:1; color:var(--saddle); }
.stat span { color:var(--bone); opacity:1; font-size:1rem; }

/* leather to shipment on Ink */
#process { background:var(--perf), var(--ink); }
#process .canvas { background:transparent; border:1px solid rgba(241,236,227,.18); }
#process .node { background:rgba(241,236,227,.04); border-color:rgba(241,236,227,.22); color:var(--bone); }
#process .node.lit { border-color:var(--saddle); background:rgba(199,144,56,.08); }
#process .node h3 { color:var(--bone); }
#process .node p { color:var(--bone-muted); }
#process .node small { color:var(--saddle); }
#process .node .ic { border-color:rgba(241,236,227,.3); }
#process .node .ic svg { stroke:var(--bone); }
#process .wire [stroke="rgba(16,20,24,.16)"] { stroke:rgba(241,236,227,.22); }
#process .clog, #process .clog b { color:var(--bone-muted); }

/* credentials on Bone; LWG Gold in a Brick block */
#credentials { background:var(--bone); }
#credentials .cell { border-color:var(--line); }
#credentials .cell.feature { background:var(--brick); border:0; color:#fff; }
#credentials .cell.feature .k, #credentials .cell.feature p { color:#fff; }
#credentials .cell.feature .bigword { color:#fff; font-size:clamp(3rem, 2rem + 4vw, 5.2rem); }
#credentials .cell.feature .badges span { border-color:rgba(255,255,255,.7); color:#fff; }

/* journal on Brick */
#journal { background:var(--brick); }
#journal .pc { border:0; border-top:6px solid var(--ink); }
#journal .btn { border-color:var(--bone); color:var(--bone); }
#journal .btn:hover { background:var(--bone); color:var(--ink); }

/* catalogue request: a full Saddle panel */
.finalcta { background:var(--saddle); border:0; padding:clamp(3rem,6vw,5.5rem) clamp(1.4rem,5vw,4rem); }
.finalcta h2 { font-size:clamp(2rem, 1.3rem + 3vw, 3.6rem); }
.finalcta .grad { color:var(--indigo); }
.finalcta p, .finalcta .fnote, .finalcta .eyebrow { color:var(--ink); }
.finalcta .eyebrow i { background:var(--ink); }
.finalcta .fnote a { text-decoration-color:var(--ink); }
.form input { border-color:var(--paper); }
.finalcta .btn.hot { background:var(--ink); color:var(--bone); border-color:var(--ink); }

/* footer: the hide strip on top, a bigger line */
footer { position:relative; margin-top:var(--pad); }
footer::before { content:""; position:absolute; left:0; right:0; top:0; height:22px; background:var(--perf),
  linear-gradient(90deg, var(--ink) 0 63%, var(--indigo) 63% 70.4%, var(--bone) 70.4% 77.8%, var(--brick) 77.8% 85.2%, var(--saddle) 85.2% 92.6%, var(--olive) 92.6% 100%); }
#catalogue + * + footer, main:has(#catalogue) + footer { margin-top:clamp(4rem,7vw,6rem); }
.ftag { font-size:clamp(1.4rem, 1rem + 1.6vw, 2.2rem); }

/* ---------- inner pages ---------- */
.pagehead { background:var(--perf), var(--ink); border:0; position:relative; padding-bottom:calc(clamp(3rem,6vw,5rem) + 22px); }
.pagehead::after { content:""; position:absolute; left:0; right:0; bottom:0; height:22px; background:var(--perf),
  linear-gradient(90deg, var(--ink) 0 63%, var(--indigo) 63% 70.4%, var(--bone) 70.4% 77.8%, var(--brick) 77.8% 85.2%, var(--saddle) 85.2% 92.6%, var(--olive) 92.6% 100%); }
.pagehead h1 { font-size:var(--fs-h1); max-width:22ch; }
.pagehead .gchip { background:transparent; color:var(--bone); border-color:rgba(241,236,227,.4); }
.pagehead .gchip:hover { border-color:var(--saddle); }
/* cards take the hide colours in turn */
.certs > :nth-child(4n+1), .creds > :nth-child(4n+1), .four > :nth-child(4n+1) { border-top-color:var(--indigo); }
.certs > :nth-child(4n+2), .creds > :nth-child(4n+2), .four > :nth-child(4n+2) { border-top-color:var(--brick); }
.certs > :nth-child(4n+3), .creds > :nth-child(4n+3), .four > :nth-child(4n+3) { border-top-color:var(--saddle); }
.certs > :nth-child(4n+4), .creds > :nth-child(4n+4), .four > :nth-child(4n+4) { border-top-color:var(--olive); }
.cert, .cred { border-top-width:6px; }
.four > div { background:var(--paper); border:1px solid var(--line); border-top:6px solid var(--indigo); }
.cta-band { background:var(--saddle); color:var(--ink); }
.cta-band h2, .cta-band h3, .cta-band p { color:var(--ink); }
.cta-band .btn, .cta-band .btn.hot { background:var(--ink); color:var(--bone); border-color:var(--ink); }
.cta-band .btn:hover { background:var(--screen-ink); border-color:var(--screen-ink); }
.sec .side .label::before { content:""; display:block; width:32px; height:4px; background:var(--saddle); margin-bottom:.8rem; }
.worn { background:var(--indigo); color:var(--bone); }
.worn h2, .worn .spec div span, .worn .spec div b, .worn p { color:var(--bone); }
.worn .wt .k, .worn .spec div b { color:var(--saddle); }
.article .rule { height:22px; background:var(--perf),
  linear-gradient(90deg, var(--ink) 0 63%, var(--indigo) 63% 70.4%, var(--bone) 70.4% 77.8%, var(--brick) 77.8% 85.2%, var(--saddle) 85.2% 92.6%, var(--olive) 92.6% 100%); }
.article .cta { background:var(--saddle); border:0; }
.article .cta .btn { background:var(--ink); color:var(--bone); border-color:var(--ink); }
.article .rule { width:100%; max-width:none; }