/* ==========================================================================
   BASE — reset, typography, layout, and the components both sites share
   Requires 01-tokens.css
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--tx-2);
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
@media(max-width:640px){ body{ font-size:16px; } }

/* --------------------------------------------------------------------------
   LAYOUT SHELLS
   -------------------------------------------------------------------------- */
.shell{ max-width:var(--shell); margin:0 auto; padding:0 var(--gut); }
.shell-narrow{ max-width:var(--shell-narrow); margin:0 auto; padding:0 var(--gut); }
@media(max-width:640px){
  .shell,.shell-narrow{ padding:0 var(--gut-sm); }
}

section{ padding:78px 0; }
section.tight{ padding:56px 0; }
@media(max-width:640px){ section{ padding:52px 0; } }

.divider{ height:1px; background:var(--line); border:0; margin:0; }

/* --------------------------------------------------------------------------
   TYPE
   -------------------------------------------------------------------------- */
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--tx); margin:0; letter-spacing:var(--track-snug); }
h1{ font-size:clamp(31px,4.6vw,48px); font-weight:700; line-height:1.06; letter-spacing:var(--track-tight); }
h2{ font-size:clamp(25px,3.4vw,33px); font-weight:700; line-height:1.15; }
h3{ font-size:19px; font-weight:600; letter-spacing:-0.018em; }
h4{ font-size:16px; font-weight:600; }
p{ margin:0; }
a{ color:var(--accent); }

/* Small caps label — section eyebrows */
.label{
  font-size:13px; font-weight:600; letter-spacing:var(--track-wide);
  text-transform:uppercase; color:var(--accent);
}
.label.gold{ color:var(--gold); }

/* Lede paragraph under a heading */
.lead{ font-size:17px; line-height:1.7; color:var(--tx-3); max-width:62ch; }

/* Monospace metadata: part numbers, versions, IDs */
.mono{ font-family:var(--font-mono); font-size:13px; color:var(--tx-3); }

/* Section header cluster */
.shead{ margin-bottom:38px; }
.shead h2{ margin-top:9px; }
.shead .lead{ margin-top:14px; }

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  display:inline-block; font-family:var(--font-body); font-size:15px; font-weight:600;
  padding:12px 22px; border-radius:8px; border:1px solid transparent;
  background:var(--accent); color:var(--btn-tx);
  text-decoration:none; cursor:pointer;
  transition:filter .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ filter:brightness(1.07); }
.btn.alt{ background:transparent; color:var(--tx); border-color:var(--line); }
.btn.alt:hover{ background:var(--bg-2); filter:none; }
.btn.sm{ font-size:14px; padding:9px 16px; }

/* --------------------------------------------------------------------------
   NAV BAND — always dark; add .darkband alongside .nav
   -------------------------------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:20;
  border-bottom:1px solid rgba(216,178,107,.28);
  box-shadow:0 1px 0 rgba(0,0,0,.35), 0 6px 18px rgba(8,11,16,.18);
}
.nav__inner{
  max-width:var(--shell); margin:0 auto; padding:14px var(--gut);
  display:flex; align-items:center; gap:30px;
}
@media(max-width:640px){ .nav__inner{ padding:12px var(--gut-sm); gap:14px; } }

.brand{ display:flex; align-items:center; gap:3px; margin-right:auto; text-decoration:none; }
.brand__mark{ color:var(--tx); flex:none; }
.brand__wm{ font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:-0.04em; color:var(--tx); }

.navlinks{ display:flex; gap:26px; }
.navlinks a{ font-size:15px; color:var(--tx-3); text-decoration:none; }
.navlinks a:hover, .navlinks a[aria-current]{ color:var(--tx); }
@media(max-width:820px){ .navlinks{ display:none; } }

/* --------------------------------------------------------------------------
   FOOTER BAND — always dark; add .darkband alongside .foot
   -------------------------------------------------------------------------- */
.foot{ padding:52px 0 58px; border-top:3px solid var(--gold); }
.foot__grid{ display:flex; justify-content:space-between; gap:34px; flex-wrap:wrap; }
.foot__col h4{
  font-size:13px; font-weight:600; color:var(--tx-3); margin:0 0 12px;
  letter-spacing:0.03em; text-transform:uppercase;
}
.foot__col a, .foot__col div{
  display:block; font-size:14.5px; color:var(--tx-2); text-decoration:none; margin-bottom:7px;
}
.foot__col a:hover{ color:var(--accent); }
.foot__bot{
  margin-top:38px; padding-top:22px; border-top:1px solid var(--line-soft);
  font-size:13.5px; color:var(--tx-3);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}

/* --------------------------------------------------------------------------
   SHARED SMALL COMPONENTS
   -------------------------------------------------------------------------- */

/* Pill tag */
.tag{
  display:inline-block; font-size:13px; font-weight:500;
  padding:4px 11px; border-radius:var(--r-pill);
  background:var(--accent-soft); color:var(--accent);
  margin:0 5px 5px 0;
}
.tag.gold{ background:var(--gold-soft); color:var(--gold); }
.tag.plain{ background:transparent; border:1px solid var(--line); color:var(--tx-3); }

/* Gold callout — "what we'd change", credentials, anything vouched for */
.callout{
  background:var(--gold-soft); border-left:3px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0; padding:20px 22px; margin:32px 0;
}
.callout__h{
  font-size:12.5px; font-weight:700; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--gold);
}
.callout p{ margin:9px 0 0; font-size:16px; line-height:1.7; color:var(--tx-2); }

/* Blue callout — process notes, setup tips */
.callout.info{ background:var(--accent-soft); border-left-color:var(--accent); }
.callout.info .callout__h{ color:var(--accent); }

/* Key/value detail table */
.kv{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.kv__row{ display:grid; grid-template-columns:150px 1fr; border-bottom:1px solid var(--line); }
.kv__row:last-child{ border-bottom:none; }
.kv__k{ padding:14px 20px; font-size:13.5px; font-weight:600; color:var(--tx-3); background:var(--bg-3); }
.kv__v{ padding:14px 22px; font-size:15.5px; color:var(--tx-2); line-height:1.65; }
.kv__v ul{ margin:0; padding-left:18px; }
.kv__v li{ margin-bottom:5px; }
.kv__v li::marker{ color:var(--gold); }
@media(max-width:640px){
  .kv__row{ grid-template-columns:1fr; }
  .kv__k{ padding:11px 18px 5px; background:var(--bg-2); }
  .kv__v{ padding:0 18px 14px; }
}

/* Stat cluster */
.stats{ display:flex; gap:44px; flex-wrap:wrap; }
.stats__v{ font-family:var(--font-display); font-size:26px; font-weight:700; color:var(--tx); letter-spacing:var(--track-snug); }
.stats__k{ font-size:14px; color:var(--tx-3); margin-top:1px; }
@media(max-width:640px){ .stats{ gap:26px; } }

/* Form controls */
.input{
  font-family:var(--font-body); font-size:15px; color:var(--tx);
  background:var(--bg); border:1px solid var(--line); border-radius:8px;
  padding:10px 14px; outline:none;
}
.input::placeholder{ color:var(--tx-3); }
.input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

.filt{
  font-family:var(--font-body); font-size:14px; font-weight:500;
  padding:9px 15px; border:1px solid var(--line); border-radius:8px;
  color:var(--tx-3); background:var(--bg); cursor:pointer;
  transition:all .13s ease;
}
.filt:hover{ color:var(--tx); border-color:var(--tx-3); }
.filt[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--btn-tx); }

/* Empty state */
.empty{ padding:52px 0; text-align:center; color:var(--tx-3); font-size:15px; }

/* Accessibility: visible focus for keyboard users */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Respect reduced-motion preferences */
@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

/* --------------------------------------------------------------------------
   WORDPRESS ADDITIONS
   Entry content (block editor output) and the facts strip.
   -------------------------------------------------------------------------- */

.entry p{ margin:0 0 24px; max-width:var(--measure); }
.entry h2{ font-family:var(--font-display); font-size:25px; font-weight:700; color:var(--tx); margin:44px 0 14px; letter-spacing:var(--track-snug); line-height:1.2; }
.entry h2::before{ content:""; display:block; width:34px; height:2px; background:var(--accent); margin-bottom:14px; }
.entry h3{ margin:32px 0 10px; }
.entry ul,.entry ol{ margin:0 0 24px; padding-left:22px; max-width:var(--measure); }
.entry li{ margin-bottom:9px; }
.entry li::marker{ color:var(--gold); }
.entry strong{ color:var(--tx); font-weight:600; }
.entry a{ color:var(--accent); }
.entry blockquote{
  margin:32px 0; padding:2px 0 2px 22px; border-left:3px solid var(--accent);
  font-size:19px; color:var(--tx); max-width:56ch;
}
.entry code{
  font-family:var(--font-mono); font-size:14px; color:var(--gold);
  background:var(--gold-soft); padding:2px 6px; border-radius:4px;
}
.entry pre{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 20px; overflow-x:auto; font-family:var(--font-mono); font-size:14px;
}
.entry table{ width:100%; border-collapse:collapse; margin:0 0 26px; font-size:15px; }
.entry th{ text-align:left; padding:12px 14px; background:var(--bg-3); border-bottom:1px solid var(--line); font-size:13px; color:var(--tx-3); }
.entry td{ padding:12px 14px; border-bottom:1px solid var(--line-soft); }

/* Facts strip — the four-cell summary on a case study */
.facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; margin:34px 0 0;
}
.facts__f{ background:var(--bg); padding:18px 20px; }
.facts__k{ font-size:13px; font-weight:600; color:var(--tx-3); }
.facts__v{ font-family:var(--font-display); font-size:17px; font-weight:600; color:var(--tx); margin-top:5px; letter-spacing:-0.015em; }

/* Closing call-to-action box */
.cta-box{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:46px; text-align:center;
}
.cta-box h2{ max-width:26ch; margin:0 auto; }
.cta-box p{ font-size:16.5px; color:var(--tx-3); max-width:52ch; margin:16px auto 28px; }
@media(max-width:640px){ .cta-box{ padding:30px 22px; } }

/* Pagination */
.pagination{ display:flex; gap:8px; flex-wrap:wrap; padding:34px 0 60px; }
.pagination .page-numbers{
  display:inline-block; padding:9px 15px; border:1px solid var(--line);
  border-radius:8px; color:var(--tx-3); text-decoration:none; font-size:14.5px;
}
.pagination .page-numbers:hover{ color:var(--tx); border-color:var(--tx-3); }
.pagination .page-numbers.current{ background:var(--accent); border-color:var(--accent); color:var(--btn-tx); }

/* Wordmark tagline in the lockup */
.brand__tag{
  display:block; font-family:var(--font-mono); font-size:8.5px;
  letter-spacing:0.3em; text-transform:uppercase; color:var(--tx-3); margin-top:5px;
}