/* ==========================================================================
   SHOP GUIDE UK — "THE STORE GUIDE"
   Site-locked to shopguideuk.co.uk. Not a fleet template.

   THE DIRECTION
   A reference for people who buy online in Britain, in the idiom of the shops
   they already know. Warm white and cream paper, near-black ink, hairline
   rules — and the colours of a British shopfront:

     Bottle green   the fascia: the top line, the store guide board, the
                    footer, every link and primary action
     Brass          the lettering on the board: rules, numerals, small marks.
                    Never body text on white — it is too light for that
     Pillar-box red one place only: the district on the nameplate

   Four voices of type, each with one job:
     Source Serif 4          headlines — a transitional serif, the English
                             book face
     Source Sans 3           reading copy and the interface
     IBM Plex Mono           the receipt, and every label, number and caption
     Barlow Semi Condensed   the street nameplate, nowhere else

   THE RULES
   No decorative gradients, no glows. One soft shadow in the whole design: the
   receipt, because paper lies on a counter. Hierarchy comes from type size and
   rule weight: a 2px ink rule opens a list, 1px rules divide it. Numbers are
   tabular. Light theme only, painted explicitly on every surface.
   ========================================================================== */
:root{
  /* Palette — the layout overrides the base tokens from template fields. */
  --green:       #1F5A44;
  --green-deep:  #123B2E;
  --brass:       #B8975A;
  --red:         #B3261E;
  --paper:       #F6F2E8;
  --ink:         #1A1D1B;
  --rule:        #D9D2C1;

  --white:       #FFFEFB;
  --green-tint:  color-mix(in srgb, var(--green) 7%, #FFFEFB);
  --green-soft:  color-mix(in srgb, var(--green) 18%, #FFFEFB);
  --brass-tint:  color-mix(in srgb, var(--brass) 15%, #FFFEFB);
  --brass-rule:  color-mix(in srgb, var(--brass) 55%, #FFFEFB);
  --brass-deep:  color-mix(in srgb, var(--brass) 58%, #3A2A00);  /* text on paper ≥4.5:1 */
  --brass-lite:  color-mix(in srgb, var(--brass) 72%, #FFFFFF);  /* text on green ≥6:1   */
  --ink-2:       color-mix(in srgb, var(--ink) 86%, #FFFFFF);    /* body copy            */
  --ink-3:       color-mix(in srgb, var(--ink) 68%, #FFFFFF);    /* secondary ≥5:1       */
  --ink-4:       color-mix(in srgb, var(--ink) 50%, #FFFFFF);    /* large/decor only     */
  --rule-2:      color-mix(in srgb, var(--rule) 55%, #FFFFFF);
  --board-ink:   #F4EFE2;
  --board-mute:  #BFCDC3;
  --board-rule:  rgba(244,239,226,.16);
  --foot-ink:    #D3DCD5;
  --foot-mute:   #A3B4A9;
  --foot-rule:   rgba(244,239,226,.16);

  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body:    "Source Sans 3", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-label:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-plate:   "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;

  --container:  1280px;
  --read:       720px;
  --measure:    68ch;
  --radius:     3px;
  --base-size:  18px;
  --base-lh:    1.68;

  --ease:       cubic-bezier(.2,.6,.3,1);
  --t:          150ms;
}

html, body{ overflow-x:hidden; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--base-size);
  line-height:var(--base-lh);
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; height:auto; }
svg{ display:block; }
a{ color:var(--green); text-decoration:none; }
a:hover{ color:var(--green-deep); }
:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }
::selection{ background:var(--brass-tint); color:var(--ink); }

.container{
  max-width:var(--container); margin-inline:auto;
  padding-inline:clamp(18px,4vw,48px); position:relative;
}
.container .container{ max-width:none; padding-inline:0; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--green-deep); color:#fff; padding:.7rem 1.1rem; font-weight:700;
}
.skip-link:focus{ left:0; }

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

/* --- The receipt voice: one rule for every label, caption and small number. --- */

.label, .lk-desc, .tp-over, .finder-label, .finder-terms span, .tp-facts span,
.band-more, .gd-tag, .gd-go, .foot-h, .foot-top-link,
.toc-h, .breadcrumb, .post-card-meta, .result-meta, .results-count, .pl-eyebrow,
.eyebrow, .post-cat, .card-tag, .pc-tag, .post-links h2, .chip, .section-cap,
.stat .l, .article-body thead th, .article-body .pro-tip::before,
.article-body .related-inline-link::before, .pagination, .shop-one, .src-org{
  font-family:var(--font-label);
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.35;
}

/* --- Type ---------------------------------------------------------------- */

h1,h2,h3,h4{
  font-family:var(--font-display); font-weight:600;
  letter-spacing:-.012em; margin:0; color:var(--ink);
  font-optical-sizing:auto;
}
p{ margin:0 0 1rem; }
.muted{ color:var(--ink-3); }
.accent{ color:var(--green); font-style:normal; }
.center{ text-align:center; }
.display{ font-family:var(--font-display); font-weight:600; letter-spacing:-.014em; }
.lead{ font-size:1.12rem; line-height:1.6; color:var(--ink-2); max-width:var(--measure); }
.eyebrow{ display:inline-block; color:var(--green); margin-bottom:.6rem; }

/* --- The brand mark: a street nameplate -----------------------------------
   White plate, black border and capitals, the district in pillar-box red. The
   plate keeps its own white and black wherever it hangs — on the white header
   and on the green footer alike. */

.np{ width:158px; height:37px; flex:none; }
.np-lg{ width:204px; height:48px; }
.np-plate{ fill:#FFFFFF; stroke:#141414; stroke-width:1.6; }
.np-edge{ stroke:#141414; stroke-width:1; }
.np-name, .np-area{
  font-family:var(--font-plate); font-weight:700; font-size:23px; letter-spacing:.4px;
}
.np-name{ fill:#141414; }
.np-area{ fill:var(--red); }

/* --- The top line: the fascia, cream lettering on bottle green ----------- */

.topline{ background:var(--green-deep); color:var(--board-ink); }
.topline-in{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  min-height:34px;
}
.topline-what, .topline-asof{
  font-family:var(--font-label); font-weight:500; font-size:.7rem;
  letter-spacing:.08em; text-transform:uppercase; line-height:1.3;
}
.topline-asof{ white-space:nowrap; color:var(--brass-lite); }
.topline-asof time{ font-variant-numeric:tabular-nums; }

.lk-text{
  display:flex; flex-direction:column; gap:.22rem; min-width:0;
  padding-left:.9rem; border-left:1px solid var(--rule);
}
.lk-name{
  font-family:var(--font-display); font-weight:600; font-size:1.38rem;
  line-height:1; letter-spacing:-.015em; color:var(--ink); white-space:nowrap;
}
.lk-desc{ font-size:.62rem; letter-spacing:.08em; color:var(--ink-3); max-width:22ch; }
.lk-img{ height:42px; width:auto; }

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header{
  position:sticky; top:0; z-index:60;
  background:var(--white);
  border-bottom:1px solid var(--rule);
}
.nav{ display:flex; align-items:center; gap:clamp(16px,2.4vw,36px); min-height:78px; }
.nav-brand{ display:inline-flex; align-items:center; gap:.9rem; color:var(--ink); flex:none; }
.nav-brand:hover{ color:var(--ink); }

.nav-links{ display:flex; align-items:center; gap:.1rem; margin-left:auto; }
.nav-link{
  position:relative; padding:.55rem .75rem;
  font-size:.98rem; font-weight:600; color:var(--ink-2);
  transition:color var(--t) var(--ease);
}
.nav-link::after{
  content:""; position:absolute; left:.75rem; right:.75rem; bottom:.15rem; height:3px;
  background:var(--brass); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t) var(--ease);
}
.nav-link:hover{ color:var(--green-deep); }
.nav-link:hover::after{ transform:scaleX(1); }

.nav-tail{ display:flex; align-items:center; gap:.6rem; flex:none; }
.nav-search{
  display:flex; align-items:center;
  border:1px solid var(--rule); background:var(--paper); border-radius:var(--radius);
  transition:border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.nav-search:focus-within{ border-color:var(--green); background:var(--white); }
.nav-search input{
  width:200px; border:0; background:transparent; outline:none;
  font:inherit; font-size:.95rem; color:var(--ink); padding:.55rem .1rem .55rem .8rem;
}
.nav-search input::placeholder{ color:var(--ink-3); }
.nav-search button{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border:0; background:transparent; color:var(--ink-2); cursor:pointer;
}
.nav-search button svg{ width:18px; height:18px; }
.nav-search button:hover{ color:var(--green); }

.nav-toggle{
  display:none; width:44px; height:44px; padding:0;
  background:var(--white); border:1px solid var(--rule); border-radius:var(--radius);
  cursor:pointer; align-items:center; justify-content:center;
}
.nav-burger, .nav-burger::before, .nav-burger::after{
  display:block; width:18px; height:2px; background:var(--ink);
  transition:transform var(--t) var(--ease), background var(--t) var(--ease);
}
.nav-burger{ position:relative; }
.nav-burger::before, .nav-burger::after{ content:""; position:absolute; left:0; }
.nav-burger::before{ top:-6px; }
.nav-burger::after{ top:6px; }
.site-header.is-open .nav-burger{ background:transparent; }
.site-header.is-open .nav-burger::before{ transform:translateY(6px) rotate(45deg); }
.site-header.is-open .nav-burger::after{ transform:translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   HOME — the title page
   ========================================================================== */

.title-page{
  background:var(--paper);
  padding:clamp(40px,6vw,88px) 0 clamp(48px,6vw,88px);
  border-bottom:1px solid var(--rule);
}
.tp-grid{
  display:grid; grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
  gap:clamp(32px,5vw,88px); align-items:center;
}

/* One heading, two tiers: the name set small over a brass rule, then the
   promise in the display face. */
.tp-title{ margin:0 0 1.5rem; font-weight:600; }
.tp-over{
  display:flex; align-items:center; gap:.8rem; margin-bottom:1.15rem;
  color:var(--green); font-size:.8rem; letter-spacing:.16em;
}
.tp-over::before{ content:""; width:44px; height:2px; background:var(--brass); flex:none; }
.tp-main{
  display:block;
  font-size:clamp(2.45rem,4.9vw,4.25rem); line-height:1.04; letter-spacing:-.024em;
  text-wrap:balance;
}
.tp-lead{
  font-size:clamp(1.08rem,1.5vw,1.26rem); line-height:1.6;
  color:var(--ink-2); max-width:54ch; margin:0 0 2.1rem;
}

.finder{ max-width:640px; margin:0; }
.finder-label{ display:block; color:var(--ink); margin-bottom:.6rem; }
.finder-row{
  display:flex; background:var(--white);
  border:1.5px solid var(--ink); border-radius:var(--radius);
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.finder-row:focus-within{ border-color:var(--green); box-shadow:0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent); }
.finder-input{
  flex:1; min-width:0; border:0; outline:none; background:transparent;
  font:inherit; font-size:1.06rem; color:var(--ink); padding:.95rem 1.1rem;
}
.finder-input::placeholder{ color:var(--ink-3); }
.finder-go{
  display:inline-flex; align-items:center; gap:.65rem; flex:none;
  border:0; border-left:1.5px solid var(--ink); background:var(--green); color:#fff;
  padding:0 1.5rem; cursor:pointer;
  font-family:var(--font-body); font-weight:700; font-size:1.02rem;
  transition:background var(--t) var(--ease);
}
.finder-go svg{ width:20px; height:10px; }
.finder-go:hover{ background:var(--green-deep); }
.finder-terms{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem .9rem;
  margin:1rem 0 0; font-size:.98rem;
}
.finder-terms span{ color:var(--ink-3); }
.finder-terms a{ color:var(--ink-2); border-bottom:1px solid var(--brass-rule); padding-bottom:1px; }
.finder-terms a:hover{ color:var(--green); border-bottom-color:var(--green); }

.tp-facts{
  display:flex; flex-wrap:wrap; gap:.6rem 0; margin:2.2rem 0 0;
  padding-top:1.1rem; border-top:1px solid var(--rule); max-width:640px;
}
.tp-facts span{ color:var(--ink-3); padding-right:1.3rem; margin-right:1.3rem; border-right:1px solid var(--rule); }
.tp-facts span:last-child{ border-right:0; margin-right:0; padding-right:0; }
.tp-facts strong{
  font-family:var(--font-display); font-weight:600; font-size:1.55rem;
  letter-spacing:0; text-transform:none; color:var(--ink);
  margin-right:.35rem; font-variant-numeric:tabular-nums lining-nums;
}

/* --- The receipt -----------------------------------------------------------
   A till receipt on the counter: white paper, monospace, a torn lower edge.
   Four moments of an order, three lines each; the column on the right prints
   the department where a receipt prints the price. Every line is a link.
   The shadow sits on the figure, because the paper itself is cut by a mask. */

.receipt{
  margin:0; justify-self:center; width:100%; max-width:440px;
}
.rc-paper{
  position:relative;
  background:#FFFFFF; color:var(--ink);
  padding:1.6rem clamp(1.1rem,2vw,1.6rem) 2.3rem;
  font-family:var(--font-mono); font-size:.86rem; line-height:1.45;
  font-variant-numeric:tabular-nums;
  -webkit-mask:conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%;
          mask:conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%;
}
.receipt{ filter:drop-shadow(0 1px 0 rgba(26,29,27,.10)) drop-shadow(0 16px 28px rgba(26,29,27,.11)); }
.rc-paper p{ margin:0; }
.rc-head{ text-align:center; padding-bottom:.7rem; border-bottom:1px dashed var(--ink-3); }
.rc-shop{ font-weight:600; font-size:1.02rem; letter-spacing:.22em; padding-left:.22em; }
.rc-title{ margin-top:.3rem !important; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.rc-meta, .rc-cols{
  display:flex; justify-content:space-between; gap:1rem;
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
}
.rc-meta{ margin-top:.9rem !important; }
.rc-cols{ margin-top:.2rem !important; }

.rc-group{ padding:.75rem 0 .55rem; border-bottom:1px dashed var(--ink-3); }
.rc-when{ font-weight:600; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--green); }
.rc-group ul{ list-style:none; margin:.3rem 0 0; padding:0; }
.rc-row{
  display:grid; grid-template-columns:minmax(0,auto) minmax(14px,1fr) auto; align-items:end; column-gap:.45rem;
  padding:.3rem 0; color:var(--ink);
}
.rc-row:hover{ color:var(--green-deep); }
.rc-row:hover .rc-what{ text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; }
.rc-dots{ border-bottom:1px dotted var(--ink-4); margin-bottom:.36em; }
.rc-dept{ font-weight:600; color:var(--green); min-width:2ch; text-align:right; }

.rc-foot{ padding-top:.75rem; text-align:center; }
.rc-total{
  display:flex; justify-content:space-between; gap:1rem; text-align:left;
  font-weight:600; font-size:.98rem; text-transform:uppercase; letter-spacing:.04em;
  padding-bottom:.75rem; border-bottom:3px double var(--ink-3);
}
.rc-thanks{ margin-top:.9rem !important; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.rc-barcode{
  width:62%; height:36px; margin:.85rem auto 0;
  background:repeating-linear-gradient(90deg,
    var(--ink) 0 2px, #0000 2px 4px, var(--ink) 4px 5px, #0000 5px 8px,
    var(--ink) 8px 11px, #0000 11px 12px, var(--ink) 12px 13px, #0000 13px 16px,
    var(--ink) 16px 18px, #0000 18px 21px, var(--ink) 21px 22px, #0000 22px 23px);
}
.rc-cap{ display:block; margin:1.5rem 0 0; }
.rc-cap-title{ display:block; font-family:var(--font-display); font-weight:600; font-size:1.06rem; line-height:1.3; }
.rc-cap-legend{ display:block; margin-top:.25rem; font-size:.92rem; color:var(--ink-3); line-height:1.5; }

/* ==========================================================================
   HOME — bands
   ========================================================================== */

section{ position:relative; }
.band{ padding:clamp(52px,6.5vw,96px) 0; border-bottom:1px solid var(--rule); }
.band.questions, .band.guides, .band.principles{ background:var(--white); }
.band.latest, .band.sources{ background:var(--paper); }
.band.sources{ border-bottom:0; }

.band-head{ margin-bottom:clamp(26px,3vw,42px); max-width:780px; }
.band-head-row{
  max-width:none; display:grid; grid-template-columns:minmax(0,1fr) auto;
  column-gap:2rem; align-items:end;
}
.band-head-row .label, .band-head-row .band-note{ grid-column:1 / -1; }
.band-head-row .band-note{ order:3; }
.label{ display:flex; align-items:center; gap:.6rem; margin:0 0 .75rem; color:var(--green); letter-spacing:.12em; }
.label::before{ content:""; width:28px; height:2px; background:var(--brass); flex:none; }
.band-title{
  font-size:clamp(1.9rem,3.3vw,2.75rem); line-height:1.12; letter-spacing:-.018em;
  margin:0; text-wrap:balance;
}
.band-note{ margin:.85rem 0 0; color:var(--ink-3); font-size:1.04rem; max-width:62ch; }
.band-more{ color:var(--green); white-space:nowrap; padding-bottom:.35rem; }
.band-more:hover{ color:var(--green-deep); }

/* --- The store guide ------------------------------------------------------
   The board by the lifts of a department store: bottle green, brass numerals,
   cream lettering. Departments are numbered; under each, the shops the site
   covers, with the number of answers where a board prints the floor. A shop
   with several topic pages lists them underneath. */

.band.directory{ background:var(--green-deep); color:var(--board-ink); border-bottom:0; }
.directory .label{ color:var(--brass-lite); }
.directory .band-title{ color:#fff; }
.directory .band-note{ color:var(--board-mute); }
.directory :focus-visible{ outline-color:var(--brass-lite); }

.dept-cols{ columns:3 300px; column-gap:clamp(28px,3.4vw,60px); }
.dept{ break-inside:avoid; margin:0 0 clamp(28px,3vw,44px); }
.dept-h{
  display:flex; align-items:center; gap:.8rem; margin:0; padding-bottom:.8rem;
  border-bottom:1px solid var(--brass); font-size:1.36rem; line-height:1.2; color:#fff;
}
.dept-no{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:36px; height:36px; border-radius:50%; border:1px solid var(--brass); color:var(--brass-lite);
  font-family:var(--font-label); font-weight:500; font-size:.86rem; letter-spacing:0;
  font-variant-numeric:tabular-nums;
}
.dept-list{ list-style:none; margin:0; padding:0; }
.shop{ padding:.66rem 0 .7rem; border-bottom:1px solid var(--board-rule); }
.shop p{ margin:0; }
.shop-row{ display:flex; align-items:baseline; gap:.7rem; }
.shop-name{ color:var(--board-ink); font-weight:600; font-size:1.07rem; line-height:1.35; }
.shop-name:hover{ color:#fff; text-decoration:underline; text-decoration-color:var(--brass); text-underline-offset:4px; }
.shop-one{ color:var(--board-mute); font-size:.66rem; }
.shop-n{
  margin-left:auto; flex:none; color:var(--brass-lite);
  font-family:var(--font-label); font-weight:500; font-size:.84rem; font-variant-numeric:tabular-nums;
}
.shop-themes{ display:flex; flex-wrap:wrap; gap:.15rem 1rem; margin-top:.3rem !important; }
.shop-themes a{ color:var(--board-mute); font-size:.93rem; line-height:1.5; }
.shop-themes a span{ font-family:var(--font-label); font-size:.76rem; color:var(--brass-lite); font-variant-numeric:tabular-nums; }
.shop-themes a:hover{ color:#fff; text-decoration:underline; text-decoration-color:var(--brass); text-underline-offset:3px; }

/* --- Common questions ---------------------------------------------------- */

.diag-grid{
  display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(28px,4vw,76px); align-items:start;
}
.diag-grid .band-head{ margin-bottom:0; }
.symptoms{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:2rem;
  border-top:2px solid var(--ink);
}
.symptoms li{ display:flex; border-bottom:1px solid var(--rule); }
.symptoms a{
  flex:1; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  position:relative; padding:.95rem 0 .95rem 2.2rem;
  color:var(--ink); font-weight:600; font-size:1.04rem; line-height:1.35;
}
.symptoms a::before{
  content:"?"; position:absolute; left:0; top:50%; width:22px; height:22px; margin-top:-11px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--brass); border-radius:50%; color:var(--green);
  font-family:var(--font-display); font-weight:600; font-size:.86rem; line-height:1;
}
.sy-go{ color:var(--ink-4); transition:transform var(--t) var(--ease), color var(--t) var(--ease); }
.symptoms a:hover{ color:var(--green); }
.symptoms a:hover .sy-go{ color:var(--green); transform:translateX(4px); }

/* --- House rules --------------------------------------------------------- */

.pr-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:2px solid var(--ink);
}
.pr-list li{ padding:1.6rem 1.6rem 1.7rem; border-right:1px solid var(--rule); }
.pr-list li:first-child{ padding-left:0; }
.pr-list li:last-child{ border-right:0; padding-right:0; }
.pr-no{
  display:block; margin-bottom:.7rem; color:var(--brass-deep);
  font-family:var(--font-display); font-weight:400; font-size:2.3rem; line-height:1;
  font-variant-numeric:lining-nums;
}
.pr-h{ font-size:1.22rem; line-height:1.28; margin:0 0 .5rem; }
.pr-p{ margin:0; color:var(--ink-3); font-size:.99rem; line-height:1.56; }

/* --- The main guides ----------------------------------------------------- */

.gd-grid{
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  gap:clamp(28px,4vw,72px); padding-top:1.9rem; border-top:2px solid var(--ink);
}
.gd-tag{ color:var(--green); margin:0 0 .8rem; }
.gd-lead-title{ font-size:clamp(1.85rem,3.1vw,2.6rem); line-height:1.1; letter-spacing:-.018em; margin:0; text-wrap:balance; }
.gd-lead-title a{ color:var(--ink); }
.gd-lead-title a:hover{ color:var(--green); }
.gd-lead-ex{ margin:1.05rem 0 0; color:var(--ink-2); font-size:1.1rem; line-height:1.62; max-width:54ch; }
.gd-go{
  display:inline-block; margin-top:1.4rem; padding:.85rem 1.25rem;
  background:var(--green); color:#fff; font-size:.78rem; font-weight:600; border-radius:var(--radius);
  transition:background var(--t) var(--ease);
}
.gd-go:hover{ background:var(--green-deep); color:#fff; }
.gd-side{ border-left:1px solid var(--rule); padding-left:clamp(22px,3vw,48px); min-width:0; }
.gd-med{ padding:0 0 1.25rem; margin:0 0 1.25rem; border-bottom:1px solid var(--rule); }
.gd-med h3{ font-size:1.26rem; line-height:1.28; margin:0; }
.gd-med h3 a{ color:var(--ink); }
.gd-med h3 a:hover{ color:var(--green); }
.gd-med p{ margin:.45rem 0 0; color:var(--ink-3); font-size:.98rem; line-height:1.52; }
.gd-med:last-child{ padding-bottom:0; margin-bottom:0; border-bottom:0; }
/* The rest of the guides: a numbered index under the feature, three columns. */
.gd-list{
  list-style:none; margin:clamp(28px,3.4vw,48px) 0 0; padding:0; counter-reset:gd;
  columns:3 300px; column-gap:clamp(28px,3.4vw,60px); border-top:1px solid var(--rule);
}
.gd-list li{ counter-increment:gd; break-inside:avoid; border-bottom:1px solid var(--rule-2); }
.gd-list a{
  display:grid; grid-template-columns:2.3rem minmax(0,1fr); gap:.5rem;
  padding:.72rem 0; color:var(--ink-2); font-size:1.02rem; line-height:1.4;
}
.gd-list a::before{
  content:counter(gd, decimal-leading-zero);
  font-family:var(--font-label); font-weight:500; font-size:.86rem; line-height:1.65;
  color:var(--brass-deep); font-variant-numeric:tabular-nums;
}
.gd-list a:hover{ color:var(--green); }

/* --- Official guidance: the notice and the sources ------------------------
   The notice carries the information sign — a round green plate with a white
   "i" — because this is information, not a warning. */

.src-grid{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4vw,72px); align-items:start;
}
.notice{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(16px,2vw,26px);
  align-items:start; padding:clamp(22px,2.8vw,34px);
  background:var(--white); border:1px solid var(--rule); border-top:3px solid var(--green);
}
.notice-sign{ width:52px; height:52px; }
.ns-plate{ fill:var(--green); }
.ns-mark{ fill:#fff; }
.notice-h{ font-size:1.55rem; line-height:1.2; margin:0 0 .6rem; text-wrap:balance; }
.notice-p{ margin:0; color:var(--ink-2); font-size:1.04rem; line-height:1.64; }

.src-h{ margin:0; padding-bottom:.8rem; border-bottom:2px solid var(--ink); font-size:1.36rem; line-height:1.2; }
.src-list{ list-style:none; margin:0; padding:0; }
.src-list li{ border-bottom:1px solid var(--rule); }
.src-list a{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.15rem 1rem; align-items:center;
  padding:.8rem 0; color:var(--ink);
}
.src-name{ font-weight:600; font-size:1.06rem; line-height:1.3; }
.src-org{ grid-column:1; color:var(--ink-3); text-transform:none; letter-spacing:0; font-size:.78rem; }
.src-go{
  grid-column:2; grid-row:1 / span 2; color:var(--ink-4); font-size:1.15rem;
  transition:transform var(--t) var(--ease), color var(--t) var(--ease);
}
.src-list a:hover .src-name{ color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.src-list a:hover .src-go{ color:var(--green); transform:translate(2px,-2px); }
.src-note{ margin:.9rem 0 0; font-size:.9rem; line-height:1.5; color:var(--ink-3); }

/* --- Latest: the engine's own band, restyled ---------------------------- */

.latest .section{ padding:0; }
.latest .section-head{ margin-bottom:clamp(26px,3vw,40px); }
/* The engine prints only the heading; the band gets the same label as the
   others (the rule drawn as a background so no extra element is needed). */
.latest .section-head::before{
  content:"New"; display:block; margin:0 0 .75rem; padding-left:calc(28px + .6rem);
  background:linear-gradient(var(--brass),var(--brass)) no-repeat left center / 28px 2px;
  color:var(--green); font-family:var(--font-label); font-weight:500; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; line-height:1.35;
}
.latest .section-head h2{ font-size:clamp(1.9rem,3.3vw,2.75rem); line-height:1.12; letter-spacing:-.018em; }

/* ==========================================================================
   CARDS — post grid, pillar grid, generic cards
   ========================================================================== */

.post-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:clamp(18px,2vw,28px);
}
.post-card{
  display:flex; flex-direction:column; min-width:0;
  background:var(--white); border:1px solid var(--rule); border-top:3px solid var(--green-deep);
  transition:border-top-color var(--t) var(--ease);
}
.post-card:hover{ border-top-color:var(--brass); }
/* The archive has no photography: these images are generated cards that
   re-print the headline. Hidden, never fetched (display:none on the link). */
.post-card-media{ display:none; }
.post-card-body{ padding:1.2rem 1.3rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.post-cat{ color:var(--brass-deep); }
.post-card-title{ font-size:1.2rem; line-height:1.28; margin:0; }
.post-card-title a{ color:var(--ink); }
.post-card-title a:hover{ color:var(--green); }
.post-card-excerpt{ margin:0; font-size:.97rem; line-height:1.52; color:var(--ink-3); }
.post-card-meta{ margin-top:auto; padding-top:.7rem; color:var(--ink-3); font-size:.72rem; }

.card-grid, .pillar-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:clamp(18px,2vw,28px);
}
.card, .pillar-card{
  display:block; padding:1.3rem 1.35rem 1.4rem;
  background:var(--white); border:1px solid var(--rule); border-top:3px solid var(--green-deep);
  color:var(--ink); transition:border-top-color var(--t) var(--ease);
}
.card:hover, .pillar-card:hover{ border-top-color:var(--brass); color:var(--ink); }
.card-tag, .pc-tag{ display:block; color:var(--brass-deep); margin-bottom:.6rem; }
.card h3, .pillar-card h3{ font-size:1.18rem; line-height:1.3; margin:0; }
.pc-arrow{ display:inline-block; margin-top:.8rem; color:var(--ink-4); }
.card:hover .pc-arrow, .pillar-card:hover .pc-arrow{ color:var(--green); }
.blk-more{ margin-top:1.8rem; }

/* ==========================================================================
   BUTTONS · CHIPS · PAGINATION
   ========================================================================== */

.btn{
  display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1.25rem;
  font-family:var(--font-label); font-size:.86rem; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase;
  border:1.5px solid transparent; border-radius:var(--radius); cursor:pointer;
  transition:background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.btn--accent{ background:var(--green); color:#fff; }
.btn--accent:hover{ background:var(--green-deep); color:#fff; }
.btn--ghost{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--green); color:var(--green); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.7rem; }

.chip-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.chip{
  display:inline-block; padding:.45rem .75rem;
  border:1px solid var(--rule); background:var(--white); color:var(--ink-2);
  transition:border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.chip:hover{ color:var(--green); border-color:var(--green); }

.pagination{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--rule); color:var(--ink-3);
}
.pagination a{ padding:.65rem 1.05rem; border:1.5px solid var(--ink); color:var(--ink); }
.pagination a:hover{ border-color:var(--green); color:var(--green); }
.pagination span{ font-variant-numeric:tabular-nums; }

/* ==========================================================================
   GENERIC PAGE SHELL — list, search, topic, legal, about/contact, 404
   ========================================================================== */

.page-shell{ padding:clamp(28px,4vw,52px) 0 clamp(60px,7vw,100px); }

.breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .5rem;
  margin-bottom:1.6rem; color:var(--ink-3); font-size:.72rem;
}
.breadcrumb a{ color:var(--ink-3); }
.breadcrumb a:hover{ color:var(--green); }
.breadcrumb [aria-hidden="true"]{ color:var(--brass); }
.breadcrumb [aria-current="page"], .breadcrumb > span:last-child{
  color:var(--ink-4); max-width:46ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Page titles. A topic the store guide does not name still arrives in lower
   case from the archive; its first letter is capitalised here. */
.page-shell h1.display{ font-size:clamp(2.1rem,4.2vw,3.2rem); line-height:1.08; letter-spacing:-.02em; margin:0; text-wrap:balance; }
.page-shell h1.display::first-letter{ text-transform:uppercase; }
.page-shell .section{ padding:clamp(32px,4vw,52px) 0 0; }
.page-shell .section-head h2{ font-size:clamp(1.45rem,2.4vw,1.85rem); }

.results-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-bottom:1.6rem; padding-bottom:1.1rem; border-bottom:2px solid var(--ink);
}
.results-head h1{ font-size:clamp(1.8rem,3.4vw,2.5rem); margin:0; }
.results-count{ color:var(--ink-3); }
.results-list{ display:flex; flex-direction:column; }
.result{ display:block; padding:1.3rem 0; border-bottom:1px solid var(--rule); color:var(--ink); }
.result h2{ font-size:1.3rem; line-height:1.28; margin:0; color:var(--ink); }
.result:hover h2{ color:var(--green); }
.result p{ margin:.45rem 0 0; font-size:.98rem; line-height:1.55; color:var(--ink-3); max-width:76ch; }
.result-meta{ display:flex; gap:.9rem; margin-top:.6rem; color:var(--ink-4); font-size:.72rem; }

.topic-index{ margin-top:2.6rem; }
.topic-index-head{ margin-bottom:1.1rem; padding-bottom:.8rem; border-bottom:2px solid var(--ink); }
.topic-index-head p{ margin:.35rem 0 0; color:var(--ink-3); font-size:.95rem; }
.topic-index-list{ columns:2 320px; column-gap:2.5rem; }
.topic-index-list a{
  display:block; break-inside:avoid; padding:.7rem 0;
  border-bottom:1px solid var(--rule-2); color:var(--ink-2); font-size:1rem; line-height:1.4;
}
.topic-index-list a:hover{ color:var(--green); }

/* ==========================================================================
   ARTICLE — one answer
   ========================================================================== */

.article{ padding-bottom:1rem; }
.article-hero{
  margin-bottom:clamp(26px,4vw,44px); padding-bottom:clamp(20px,3vw,30px);
  border-bottom:2px solid var(--ink);
}
.article-hero-grid{ display:block; }
.article-hero-copy h1{
  font-size:clamp(2.1rem,4.2vw,3.3rem); line-height:1.07; letter-spacing:-.02em;
  margin:.2rem 0 0; max-width:24ch; text-wrap:balance;
}
.post-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  margin-top:1.1rem; font-size:.98rem; color:var(--ink-3);
}
.post-meta [aria-hidden="true"]{ color:var(--brass); }
.post-meta time{ font-variant-numeric:tabular-nums; }
.post-meta strong{ color:var(--ink); font-weight:600; }
.article-lead{ margin:1.2rem 0 0; font-size:1.22rem; line-height:1.56; color:var(--ink-2); max-width:60ch; }

/* The generated hero card re-prints the title; hidden, never fetched. The
   <img> stays in the DOM, so og:image and the schema ImageObject are intact. */
.article-hero-media{ display:none; }

.article-shell{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:start; }
.article-shell:has(.toc){ grid-template-columns:236px minmax(0,1fr); }
.article-shell:not(:has(.toc)){ justify-items:center; }
.article-main{ min-width:0; max-width:var(--read); width:100%; overflow-wrap:break-word; contain:inline-size; }

/* --- On this page (TOC) ------------------------------------------------- */

.toc{ position:sticky; top:108px; }
.toc-h{ margin:0 0 .4rem; padding-bottom:.6rem; color:var(--ink); border-bottom:2px solid var(--ink); }
.toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; }
.toc li{ counter-increment:toc; border-bottom:1px solid var(--rule-2); }
.toc a{
  display:grid; grid-template-columns:1.7rem minmax(0,1fr); gap:.3rem;
  padding:.62rem 0; font-size:.95rem; line-height:1.4; color:var(--ink-2);
}
.toc a::before{
  content:counter(toc); font-family:var(--font-label); font-weight:500; font-size:.84rem; line-height:1.6;
  color:var(--brass-deep); font-variant-numeric:tabular-nums;
}
.toc a:hover{ color:var(--green); }
.article-rail{ min-width:0; }

/* --- Body ---------------------------------------------------------------- */

.article-body{ font-size:1rem; line-height:var(--base-lh); color:var(--ink-2); }
.article-body > *:first-child{ margin-top:0; }
.article-body p{ margin:0 0 1.15rem; }
.article-body h2{
  margin:2.7rem 0 1rem; padding-top:1.3rem; border-top:1px solid var(--rule);
  font-size:clamp(1.55rem,2.5vw,1.95rem); line-height:1.18; letter-spacing:-.016em;
}
.article-body > h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.article-body h3{ margin:2rem 0 .6rem; font-size:1.3rem; line-height:1.28; }
.article-body h4{ margin:1.5rem 0 .45rem; font-family:var(--font-body); font-weight:700; font-size:1.05rem; letter-spacing:0; }
.article-body a{
  color:var(--green); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; text-decoration-color:color-mix(in srgb, var(--green) 40%, transparent);
}
.article-body a:hover{ color:var(--green-deep); text-decoration-color:currentColor; }
.article-body strong{ color:var(--ink); font-weight:650; }

/* Lists: a small brass lozenge for a point, a monospace numeral for a step. */
.article-body ul, .article-body ol{ list-style:none; margin:0 0 1.35rem; padding:0; }
.article-body ul > li{ position:relative; padding-left:1.4rem; margin-bottom:.5rem; }
.article-body ul > li::before{
  content:""; position:absolute; left:.15rem; top:.62em; width:.42em; height:.42em;
  background:var(--brass); transform:rotate(45deg);
}
.article-body ol{ counter-reset:step; }
.article-body ol > li{ counter-increment:step; position:relative; padding-left:2.2rem; margin-bottom:.6rem; }
.article-body ol > li::before{
  content:counter(step) "."; position:absolute; left:0; top:0;
  font-family:var(--font-label); font-weight:600; font-size:.9em; line-height:1.87;
  color:var(--green); font-variant-numeric:tabular-nums;
}

/* Worth knowing */
.article-body .pro-tip{
  margin:1.7rem 0; padding:1rem 1.2rem 1.05rem;
  background:var(--green-tint); border-left:3px solid var(--green); color:var(--ink);
}
.article-body .pro-tip::before{ content:"Worth knowing"; display:block; margin-bottom:.35rem; color:var(--green); }

/* "See also". The engine prints "→ " as a text node before the link;
   font-size:0 retires it without touching the DOM. */
.article-body .related-inline-link{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .8rem;
  margin:1.5rem 0; padding:.8rem 1rem; font-size:0;
  background:var(--paper); border:1px solid var(--rule);
}
.article-body .related-inline-link::before{ content:"See also"; font-size:.72rem; color:var(--ink-3); }
.article-body .related-inline-link a{ font-size:1rem; font-weight:600; text-decoration:none; }
.article-body .related-inline-link a:hover{ text-decoration:underline; }

.article-body blockquote{
  margin:1.8rem 0; padding:.2rem 0 .2rem 1.3rem;
  border-left:3px solid var(--brass); color:var(--ink);
  font-family:var(--font-display); font-size:1.22rem; line-height:1.5;
}
.article-body blockquote p:last-child{ margin-bottom:0; }
.article-body img{ border:1px solid var(--rule); }
.article-body hr{ border:0; border-top:1px solid var(--rule); margin:2.4rem 0; }
.article-body code{
  font-family:var(--font-mono); font-size:.86em; padding:.12em .38em;
  background:var(--paper); border:1px solid var(--rule); color:var(--ink);
}
.article-body pre{ margin:1.5rem 0; padding:1rem 1.2rem; overflow-x:auto; background:var(--paper); border:1px solid var(--rule); }
.article-body pre code{ padding:0; border:0; background:transparent; }

/* Tables: a green head, hairline rows. */
.table-wrap{ margin:1.8rem 0; overflow-x:auto; border:1px solid var(--rule); }
.article-body table{ width:100%; border-collapse:collapse; font-size:.96rem; font-variant-numeric:tabular-nums; }
.article-body th, .article-body td{ padding:.72rem .95rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--rule-2); }
.article-body thead th{ background:var(--green-deep); color:var(--board-ink); font-size:.72rem; white-space:nowrap; }
.article-body tbody tr:nth-child(even) td{ background:color-mix(in srgb, var(--paper) 60%, #fff); }
.article-body tbody tr:last-child td{ border-bottom:0; }

/* --- Inline CTA, FAQ, further reading ----------------------------------- */

.inline-cta{
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap;
  margin:2.2rem 0; padding:1.3rem 1.4rem;
  background:var(--paper); border:1px solid var(--rule); border-left:3px solid var(--green);
}
.inline-cta-body{ display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.inline-cta-body strong{ font-family:var(--font-display); font-size:1.12rem; color:var(--ink); }
.inline-cta-body span{ font-size:.96rem; color:var(--ink-3); }

.faq{ margin-top:3rem; padding-top:1.3rem; border-top:2px solid var(--ink); }
.faq h2{ font-size:1.75rem; margin:0 0 .8rem; }
.faq-item{ border-bottom:1px solid var(--rule); }
.faq-item summary{
  list-style:none; cursor:pointer; position:relative;
  padding:1rem 2.6rem 1rem 0; font-weight:600; font-size:1.06rem; line-height:1.42; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; position:absolute; right:.25rem; top:.62rem;
  font-family:var(--font-label); font-weight:500; font-size:1.55rem; line-height:1; color:var(--green);
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item summary:hover{ color:var(--green); }
.faq-a{ padding:0 0 1.1rem; }
.faq-a p{ margin:0 0 .8rem; font-size:1rem; line-height:1.68; color:var(--ink-2); }
.faq-a p:last-child{ margin-bottom:0; }

.post-links{ margin-top:3rem; padding-top:1.3rem; border-top:1px solid var(--rule); }
.post-links h2{ margin:0 0 1rem; color:var(--ink); }
.pillar-link{
  display:flex; align-items:center; gap:1rem; padding:1.1rem 1.25rem;
  background:var(--white); border:1px solid var(--rule); border-left:3px solid var(--green); color:var(--ink);
  transition:background var(--t) var(--ease);
}
.pillar-link:hover{ background:var(--green-tint); color:var(--ink); }
.pl-eyebrow{ display:block; margin-bottom:.25rem; color:var(--green); }
.pl-title{ display:block; font-family:var(--font-display); font-weight:600; font-size:1.2rem; line-height:1.3; }
.pl-arrow{ margin-left:auto; color:var(--green); font-size:1.2rem; transition:transform var(--t) var(--ease); }
.pillar-link:hover .pl-arrow{ transform:translateX(4px); }

/* ==========================================================================
   BLOCKS — the Pages studio's own components
   ========================================================================== */

.blk{ padding:clamp(44px,6vw,80px) 0; }
.blk-space{ padding:0; }
.section{ padding:clamp(44px,6vw,80px) 0; }
.section-head{ margin-bottom:1.8rem; }
.section-cap{ color:var(--ink-3); }

.blk-hero .hero, .hero{ padding:clamp(40px,6vw,88px) 0; }
.hero-inner{ display:grid; gap:clamp(24px,3vw,48px); align-items:center; }
.hero h1{ font-size:clamp(2.2rem,5vw,3.8rem); line-height:1.06; letter-spacing:-.022em; text-wrap:balance; }
.hero .lead{ margin-top:1.1rem; color:var(--ink-3); }
.hero-media img{ border:1px solid var(--rule); }

.blk-prose, .blk-text{ font-size:1.02rem; line-height:1.72; color:var(--ink-2); }
.blk-prose h2, .blk-text h2{ font-size:1.8rem; margin:2rem 0 .9rem; }

.feat{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(26px,3.4vw,56px); align-items:center; }
.feat-copy h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:.9rem; }
.feat-media img{ border:1px solid var(--rule); }
.blk-feat-title{ margin-bottom:.9rem; }

.cols{ display:grid; gap:clamp(20px,2.4vw,36px); }
.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.col{ padding:1.4rem 1.45rem; background:var(--white); border:1px solid var(--rule); border-top:3px solid var(--green-deep); min-width:0; }
.col h3{ font-size:1.18rem; margin-bottom:.5rem; }
.col p{ margin:0; font-size:.97rem; line-height:1.6; color:var(--ink-3); }

.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); border-top:2px solid var(--ink); }
.stat{ padding:1.4rem 1.4rem 1.4rem 0; border-right:1px solid var(--rule); }
.stat:last-child{ border-right:0; }
.stat .n{
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.9rem,3.4vw,2.6rem); line-height:1; font-variant-numeric:tabular-nums lining-nums; color:var(--ink);
}
.stat .l{ display:block; margin-top:.5rem; color:var(--ink-3); }
.sec-stat-band{ border-top:0; }

.blk-quote blockquote, .sec-quote blockquote{
  margin:0; padding:0 0 0 1.4rem; border-left:3px solid var(--brass);
  font-family:var(--font-display); font-size:clamp(1.3rem,2.4vw,1.8rem);
  font-weight:400; line-height:1.38; color:var(--ink); max-width:36ch;
}
.cite{ display:block; margin-top:.9rem; font-size:.9rem; color:var(--ink-3); }

.cta, .cta-band, .sec-cta-band{
  padding:clamp(32px,4.4vw,60px) clamp(24px,4vw,54px);
  background:var(--paper); border:1px solid var(--rule); border-top:3px solid var(--green); text-align:center;
}
.cta h2, .cta-band h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:.8rem; }
.cta p, .cta-band p{ color:var(--ink-3); max-width:56ch; margin-inline:auto; }
.cta .btn-row, .cta-band .btn-row{ justify-content:center; margin-top:1.5rem; }

.blk-divider hr, hr{ border:0; border-top:1px solid var(--rule); margin:0; }
.blk-figure figcaption{ margin-top:.7rem; font-size:.9rem; color:var(--ink-3); }
.blk-notfound .lead{ margin-inline:auto; }

/* ==========================================================================
   FOOTER — the colophon, in bottle green
   ========================================================================== */

.site-footer{
  background:var(--green-deep); color:var(--foot-ink);
  padding:clamp(52px,6vw,84px) 0 clamp(28px,3vw,40px);
  border-top:4px solid var(--brass);
}
.site-footer :focus-visible{ outline-color:var(--brass-lite); }
.foot-top{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);
  gap:clamp(32px,4vw,76px); padding-bottom:clamp(8px,1vw,16px);
}
.foot-brand-col{ min-width:0; }
.foot-brand{ display:inline-flex; align-items:center; gap:.9rem; color:#fff; }
.foot-brand:hover{ color:#fff; }
.foot-brand .lk-text{ display:none; }
.foot-brand .lk-name{ color:#fff; font-size:1.5rem; }
.foot-tag{ margin:1.3rem 0 0; font-family:var(--font-display); font-size:1.3rem; line-height:1.35; color:#fff; }
.foot-about{ margin:.8rem 0 0; font-size:.97rem; line-height:1.62; color:var(--foot-mute); max-width:46ch; }

.foot-cols{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,2.4vw,40px); min-width:0; }
.foot-col{ min-width:0; }
.foot-h{ margin:0 0 .9rem; padding-bottom:.6rem; color:var(--brass-lite); border-bottom:1px solid var(--foot-rule); font-size:.72rem; letter-spacing:.12em; }
.foot-col ul, .foot-col ol{ list-style:none; margin:0; padding:0; }
.foot-col-2up{ columns:2; column-gap:1rem; }
.foot-col li{ break-inside:avoid; }
.foot-col li a{ display:block; padding:.3rem 0; font-size:.97rem; line-height:1.45; color:var(--foot-ink); }
.foot-col li a:hover{ color:#fff; text-decoration:underline; text-decoration-color:var(--brass); text-underline-offset:3px; }
.foot-chapters span{ font-family:var(--font-label); font-weight:500; font-size:.82rem; color:var(--brass-lite); font-variant-numeric:tabular-nums; margin-right:.3rem; }

.foot-disclosure{
  margin:clamp(22px,2.4vw,32px) 0 0; padding:1rem 1.2rem;
  border:1px solid var(--foot-rule); font-size:.9rem; line-height:1.6; color:var(--foot-ink); max-width:100ch;
}
.foot-disclosure a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

.foot-base{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:clamp(22px,2.4vw,32px); padding-top:1.2rem; border-top:1px solid var(--foot-rule);
}
.foot-copy{ margin:0; font-size:.92rem; color:var(--foot-mute); font-variant-numeric:tabular-nums; }
.foot-top-link{ color:var(--foot-ink); }
.foot-top-link:hover{ color:#fff; }
.foot-note{ margin:1.1rem 0 0; font-size:.85rem; line-height:1.6; color:var(--foot-mute); max-width:104ch; }

/* ==========================================================================
   MOTION
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:1180px){
  .tp-grid{ grid-template-columns:minmax(0,1fr); }
  .receipt{ justify-self:start; }
  .foot-top{ grid-template-columns:minmax(0,1fr); }
  .lk-text{ display:none; }
  .pr-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pr-list li{ padding-left:1.6rem; border-bottom:1px solid var(--rule); }
  .pr-list li:nth-child(2n+1){ padding-left:0; }
  .pr-list li:nth-child(2n){ border-right:0; }
}

@media (max-width:1040px){
  .diag-grid{ grid-template-columns:minmax(0,1fr); gap:1.6rem; }
  .gd-grid{ grid-template-columns:minmax(0,1fr); }
  .gd-side{ border-left:0; padding-left:0; border-top:1px solid var(--rule); padding-top:1.5rem; }
  .src-grid{ grid-template-columns:minmax(0,1fr); }
}

/* The article collapses to one column; both shell selectors are restated
   because `.article-shell:has(.toc)` outranks a bare class. */
@media (max-width:1000px){
  .article-shell, .article-shell:has(.toc){ grid-template-columns:minmax(0,1fr); }
  .article-shell:not(:has(.toc)){ justify-items:stretch; }
  .article-main{ max-width:none; }
  .toc{ position:static; order:-1; margin-bottom:1.2rem; }
  .toc ol{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); column-gap:1.6rem; }
  .article-rail{ order:-2; }
  .foot-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:920px){
  .nav{ min-height:68px; }
  .nav-toggle{ display:inline-flex; }
  .nav-search input{ display:none; }
  .nav-search{ background:var(--white); }
  .nav-links{
    position:absolute; left:0; right:0; top:100%;
    display:none; flex-direction:column; align-items:stretch; gap:0; margin:0;
    padding:.4rem clamp(18px,4vw,48px) 1.1rem;
    background:var(--white); border-bottom:1px solid var(--rule);
  }
  .site-header.is-open .nav-links{ display:flex; }
  .nav-link{ padding:.9rem 0; border-bottom:1px solid var(--rule-2); font-size:1.05rem; }
  .nav-link::after{ display:none; }
  .nav-tail{ margin-left:auto; }
  .feat, .cols-3, .cols-4, .cols-2{ grid-template-columns:minmax(0,1fr); }
}

@media (max-width:760px){
  .symptoms{ grid-template-columns:minmax(0,1fr); }
  .band-head-row{ grid-template-columns:minmax(0,1fr); }
  .band-more{ padding:.8rem 0 0; }
  .results-head{ flex-direction:column; gap:.4rem; }
  .stats{ grid-template-columns:minmax(0,1fr); }
  .stat{ padding:1.1rem 0; border-right:0; border-bottom:1px solid var(--rule); }
  .notice{ grid-template-columns:minmax(0,1fr); }
  .notice-sign{ width:44px; height:44px; }

  /* Stacked table rows; the engine stamps data-label on each cell. */
  .article-body table, .article-body thead, .article-body tbody,
  .article-body tr, .article-body td{ display:block; width:100%; }
  .article-body thead{ display:none; }
  .article-body tr{ border-bottom:1px solid var(--rule); padding:.4rem 0; }
  .article-body tr:last-child{ border-bottom:0; }
  .article-body tbody tr:nth-child(even) td{ background:transparent; }
  .article-body td{ border-bottom:0; padding:.4rem .95rem; }
  .article-body td[data-label]::before{
    content:attr(data-label); display:block; margin-bottom:.15rem;
    font-family:var(--font-label); font-weight:600; font-size:.7rem;
    letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3);
  }
}

@media (max-width:720px){
  .topline-asof{ display:none; }
  .topline-in{ min-height:30px; padding-block:.35rem; }
  .topline-what{ font-size:.64rem; letter-spacing:.05em; }
}

@media (max-width:600px){
  .np{ width:136px; height:32px; }
  .np-lg{ width:180px; height:42px; }
  .tp-over{ font-size:.72rem; letter-spacing:.14em; }
  .pr-list{ grid-template-columns:minmax(0,1fr); }
  .pr-list li, .pr-list li:nth-child(2n+1){ padding:1.3rem 0; border-right:0; }
  .finder-row{ flex-wrap:wrap; }
  .finder-input{ flex:1 1 100%; }
  .finder-go{ flex:1 1 100%; justify-content:center; padding:.9rem 1rem; border-left:0; border-top:1.5px solid var(--ink); }
  /* Three figures in a row, each over its label. */
  .tp-facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 .9rem; }
  .tp-facts span{ display:flex; flex-direction:column; gap:.2rem; padding:0; margin:0; border-right:0; font-size:.64rem; }
  .tp-facts strong{ margin:0; }
  .post-grid, .card-grid, .pillar-grid{ grid-template-columns:minmax(0,1fr); }
  .foot-cols{ grid-template-columns:minmax(0,1fr); gap:1.8rem; }
  .inline-cta{ flex-direction:column; align-items:stretch; }
  .topic-index-list{ columns:1; }
  .dept-cols{ columns:1; }

  /* On a phone the newest-articles band stacks into one long column; six cards
     are enough there. The rest stay in the document and in /blog. */
  .is-home .latest .post-grid > .post-card:nth-child(n+7){ display:none; }
}