/* ============================================================
   Turner & Barnett — subpage stylesheet
   Loaded by every page the scaffolder makes (Insights articles,
   explainers, industry pages) and by insights/index.html.
   Bone paper, navy ink, gold accents, Playfair headings, Inter
   body, 65ch measure. No animation, no scripts required.

   The header, buttons, mobile menu and footer reuse the homepage's
   class names, but the rules live HERE: css/variant.css is
   homepage-only (dark hero, GSAP/Lenis motion) and subpages never
   load it. These are the light-page equivalents of those rules.
   Tokens only — see shared/css/tokens.css.
   ============================================================ */

body { background: var(--bone); color: var(--ink); }
::selection { background: var(--gold); color: var(--navy-deep); }
/* Anchor targets clear the sticky header (88px on desktop, 73px under 480px). */
section[id],
.page-body [id] { scroll-margin-top: 6.5rem; }

/* Keyboard focus ring. base.css draws it in raw --gold, which is 2.18:1 on bone and fails
   WCAG 1.4.11 (3:1 for focus indicators); --gold-ink is 4.96:1. The navy surfaces keep the
   brighter gold, where it has plenty of contrast. */
:focus-visible { outline-color: var(--gold-ink); }
.site-header :focus-visible,
.mobile-menu__panel :focus-visible,
.cta--page :focus-visible,
.site-footer :focus-visible { outline-color: var(--gold-light); }

/* ---------- header (navy band, sticky) ----------
   Sticky on subpages so the brand, the nav and the "Email us the job" button stay
   reachable the whole way down a long page. Navy fill and a hairline bottom rule
   only: no blur, no shadow (DESIGN.md is flat by design). The open mobile menu
   (position: fixed, z-index 40/41) still sits above it. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--navy);
  color: var(--off-white);
  border-bottom: 1px solid rgba(197, 160, 84, 0.32);
  padding-block: 1.3rem;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  /* The band is full-bleed and the page column below is the narrow one, so the
     header may run wider than the 72rem container: seven links + brand + CTA
     need ~1100px of content width to sit inside the gutters. */
  max-width: calc(var(--container) + 6rem);
}

.brand { text-decoration: none; flex: none; }

.brand__word {
  position: relative;
  font-family: var(--font-serif);
  font-weight: 540;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  color: var(--off-white);
  white-space: nowrap;
}

.brand__word::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.3rem;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s var(--ease-out);
}

.brand:hover .brand__word::after,
.brand:focus-visible .brand__word::after { transform: scaleX(1); }

.amp { color: var(--gold); font-style: italic; font-weight: 460; }

/* Seven links must fit beside the brand and the CTA on a 1200px laptop, so the
   nav runs a touch tighter than the homepage's (0.68rem / 0.17em / 1.6vw gap),
   and the mobile menu takes over below 1200px instead of 1120px. Measured 2 Sep
   2026: with the homepage metrics the CTA button is clipped below ~1400px. */
.site-nav {
  margin-left: auto;
  display: flex;
  gap: clamp(0.7rem, 1vw, 1.05rem);
}

.site-nav a {
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(248, 247, 244, 0.72);
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}

.site-nav a:hover,
.site-nav a:focus-visible { color: var(--off-white); border-color: var(--gold); }

.site-nav a[aria-current="page"] { color: var(--off-white); border-color: rgba(197, 160, 84, 0.6); }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 1.9rem;
  border: 1px solid transparent;
  transition: color 0.3s var(--ease-out), background-color 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out);
}

.btn--gold { background: var(--gold); color: var(--navy-deep); border-color: var(--gold); }
.btn--gold:hover { background: var(--gold-light); border-color: var(--gold-light); color: var(--navy-deep); }

.btn--hairline { border-color: rgba(197, 160, 84, 0.5); color: var(--off-white); background: transparent; }
.btn--hairline:hover { border-color: var(--gold); color: var(--gold-light); }

.btn:focus-visible { outline-color: var(--gold-light); outline-offset: 5px; }
.btn:active { transform: scale(0.97); transition: transform 0.12s var(--ease-out); }

.header-cta { padding: 0.72rem 1.25rem; flex: none; }

/* ---------- mobile menu (native <details>, works without JS; the inline script at the
   foot of every template only adds aria-expanded, focus, Escape and a scroll lock) ---------- */

.mobile-menu { display: none; }

@media (max-width: 1199px) {
  .site-nav { display: none; }
  .header-inner { justify-content: space-between; }
  .mobile-menu { display: block; }
}

.mobile-menu > summary.menu-trigger {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--off-white);
  padding: 0.5rem 0.15rem;
  transition: color 0.25s var(--ease-out);
}

.mobile-menu > summary.menu-trigger::-webkit-details-marker,
.mobile-menu > summary.menu-trigger::marker { display: none; content: ""; }

.mobile-menu > summary.menu-trigger:hover,
.mobile-menu > summary.menu-trigger:focus-visible { color: var(--gold-light); }

.menu-trigger__close { display: none; }
.mobile-menu[open] .menu-trigger__open { display: none; }
.mobile-menu[open] .menu-trigger__close { display: inline; }

.mobile-menu[open] > summary.menu-trigger {
  position: fixed;
  top: 1.4rem;
  right: var(--gutter);
  z-index: 41;
  color: var(--gold-light);
}

.mobile-menu__panel {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--navy-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 6vh, 3.5rem);
  padding: 2rem;
  text-align: center;
  overflow-y: auto;
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.mobile-menu__nav a {
  font-family: var(--font-serif);
  font-weight: 550;
  font-size: clamp(1.5rem, 6vw, 2.3rem);
  color: var(--off-white);
  text-decoration: none;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(197, 160, 84, 0.35);
  transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}

.mobile-menu__nav a:hover,
.mobile-menu__nav a:focus-visible { color: var(--gold-light); border-color: var(--gold); }

/* ---------- page frame ---------- */

main.container--narrow { padding-bottom: 0; }

.breadcrumb {
  padding-top: 2rem;
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
}

.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.55rem;
}

.breadcrumb li + li::before {
  content: "\203A";
  margin-right: 0.55rem;
  color: var(--gold-ink);
}

.breadcrumb a { color: var(--navy-light); text-decoration: none; }
.breadcrumb a:hover,
.breadcrumb a:focus-visible { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold-ink); text-underline-offset: 3px; }
.breadcrumb [aria-current="page"] { color: var(--navy-light); }

.page-head {
  padding-block: 1.6rem 2.4rem;
  border-bottom: 1px solid var(--border-warm);
}

.page-head__eyebrow { color: var(--gold-ink); margin-bottom: 1.1rem; }

.page-head__title {
  font-family: var(--font-serif);
  font-weight: 560;
  /* One step above --fs-h2 so the page's own headline outranks the closing CTA's h2 at
     every width (before 3 Sep 2026: 52px vs 57.6px at 1440, 30.4px vs 33.6px at 375). */
  font-size: clamp(2.15rem, 4.4vw, 3.5rem);
  letter-spacing: -0.01em;
  color: var(--navy);
}

.page-head__standfirst {
  margin-top: 1.4rem;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--navy-mid);
  max-width: 60ch;
}

.page-head__byline {
  margin-top: 1.4rem;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--navy-light);
}

/* ---------- body copy ---------- */

.page-body { padding-block: 2.4rem 1rem; }

/* Block rhythm: one full line of leading between paragraphs (29.6px against the 28.9px
   line height at 17px/1.7), so a long page has visual entry points instead of one slab.
   Headings sit further from what precedes them and close to what they introduce. */
.page-body > * + * { margin-top: 1.85rem; }

.page-body h2 {
  font-family: var(--font-serif);
  font-weight: 560;
  font-size: var(--fs-h3);
  color: var(--navy);
  margin-top: 3.2rem;
}

.page-body h3 {
  font-family: var(--font-serif);
  font-weight: 560;
  font-size: 1.2rem;
  color: var(--navy);
  margin-top: 2.4rem;
}

.page-body h2 + * { margin-top: 1rem; }
.page-body h3 + * { margin-top: 0.8rem; }

.page-body p,
.page-body li { max-width: 65ch; line-height: 1.7; }

.page-body ul,
.page-body ol { padding-left: 1.3rem; }

.page-body li + li { margin-top: 0.5rem; }
.page-body li::marker { color: var(--gold-ink); }

.page-body a,
.page-head a,
.index-item a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--gold-ink); /* raw --gold is 2.18:1 on bone; gold-ink is 4.96:1 */
  text-underline-offset: 3px;
}

.page-body a:hover,
.page-head a:hover,
.index-item a:hover { color: var(--gold-ink); }

.page-body blockquote {
  border-left: 2px solid var(--gold);
  padding-left: 1.2rem;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--navy);
  max-width: 60ch;
}

.page-body hr { border: 0; border-top: 1px solid var(--border-warm); margin-block: 2.4rem; }

.page-body img { border: 1px solid var(--border-warm); }

.page-body table { border-collapse: collapse; width: 100%; font-size: var(--fs-small); }
.page-body th,
.page-body td { text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--border-warm); vertical-align: top; }
.page-body th { font-weight: 600; color: var(--navy); }

/* ---------- Insights index ---------- */

.index-intro { padding-block: 2.2rem 0.4rem; }
.index-intro p { max-width: 65ch; line-height: 1.7; font-size: var(--fs-lead); color: var(--navy-mid); }
.index-intro p + p { margin-top: 0.8rem; }

.index-list { list-style: none; margin: 0; padding: 0; }

.index-item { padding-block: 1.9rem; border-bottom: 1px solid var(--border-warm); }
.index-item:last-child { border-bottom: 0; }

.index-section__title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--navy);
  margin: 2.4rem 0 0.9rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-warm);
}

.index-item__title {
  font-family: var(--font-serif);
  font-weight: 560;
  font-size: var(--fs-h3);
  color: var(--navy);
}

.index-item__title a { text-decoration: none; }
.index-item__title a:hover,
.index-item__title a:focus-visible { text-decoration: underline; }

.index-item__meta {
  margin-top: 0.45rem;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--navy-light);
}

.index-item__desc { margin-top: 0.75rem; max-width: 65ch; line-height: 1.7; }

.index-empty {
  padding-block: 2rem 2.6rem;
  color: var(--navy-light);
  max-width: 65ch;
}

/* ---------- about the firm (static chrome between the body and the CTA) ----------
   Copy deck § subpage-about: four deck-verbatim lines that tell a search visitor who
   the firm is, who it is for, who does the work and what it costs. Hairline-ruled, no
   card. Rendered by scripts/templates/page.html and article.html, never by the loop. */

.about-firm {
  margin-top: clamp(2.6rem, 6vh, 4rem);
  padding-top: 2rem;
  border-top: 1px solid rgba(197, 160, 84, 0.55);
}

.about-firm__eyebrow { color: var(--gold-ink); margin-bottom: 0.9rem; }

.about-firm__title {
  font-family: var(--font-serif);
  font-weight: 560;
  font-size: var(--fs-h3);
  color: var(--navy);
}

.about-firm__body { margin-top: 1.1rem; }

.about-firm__body p {
  max-width: 65ch;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--navy-mid);
}

.about-firm__body p + p { margin-top: 1rem; }

.about-firm a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--gold-ink);
  text-underline-offset: 3px;
}

.about-firm a:hover,
.about-firm a:focus-visible { color: var(--gold-ink); }

/* ---------- closing CTA (full-bleed navy band inside the narrow main) ---------- */

.cta--page {
  position: relative;
  margin-top: clamp(3.5rem, 9vh, 6rem);
  margin-inline: calc(50% - 50vw);
  padding: clamp(4rem, 10vh, 6.5rem) var(--gutter);
  background: var(--navy-deep);
  color: var(--off-white);
  text-align: center;
  border-top: 1px solid rgba(197, 160, 84, 0.25);
}

.cta__content { max-width: var(--container-narrow); margin-inline: auto; }

.cta__title {
  font-family: var(--font-serif);
  font-weight: 600;
  /* Subordinate to the page's own h1 (which is clamp(2.15rem, 4.4vw, 3.5rem)); the
     homepage CTA is styled by css/variant.css and is not affected. */
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--off-white);
}

.cta__body {
  margin-top: 1.6rem;
  font-size: var(--fs-lead);
  line-height: 1.75;
  color: rgba(248, 247, 244, 0.88);
  overflow-wrap: anywhere;
}

.cta__body a {
  color: var(--off-white);
  text-decoration: underline;
  text-decoration-color: rgba(197, 160, 84, 0.6);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 0.25s var(--ease-out);
}

.cta__body a:hover { color: var(--gold-light); }

.cta__action { margin-top: 2.2rem; }

/* ---------- footer (same as the homepage footer) ---------- */

.site-footer {
  background: var(--navy-deep);
  color: var(--off-white);
  border-top: 1px solid rgba(197, 160, 84, 0.25);
  padding-block: 3.2rem;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.05rem;
  text-align: center;
}

.footer__brand {
  font-family: var(--font-serif);
  font-weight: 540;
  font-size: 1.15rem;
  color: var(--off-white);
}

.footer__legal {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: rgba(248, 247, 244, 0.55);
  overflow-wrap: anywhere;
}

/* The company name in the legal line is a route home. */
.footer__legal a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(197, 160, 84, 0.5);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.25s var(--ease-out);
}

.footer__legal a:hover,
.footer__legal a:focus-visible { color: var(--gold-light); }

.footer__privacy,
.footer__insights {
  font-size: 0.8rem;
  color: rgba(248, 247, 244, 0.72);
  text-decoration: underline;
  text-decoration-color: rgba(197, 160, 84, 0.5);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.25s var(--ease-out);
}

.footer__privacy:hover,
.footer__insights:hover { color: var(--gold-light); }

/* ---------- small screens ---------- */

@media (max-width: 640px) {
  .cta__action .btn { width: 100%; max-width: 21rem; text-align: center; }
}

@media (max-width: 480px) {
  .site-header { padding-block: 1.15rem; }
  .header-inner { gap: 0.75rem; }
  .brand__word { font-size: 1.05rem; }
  .header-cta { font-size: 0.62rem; letter-spacing: 0.1em; padding: 0.55rem 0.8rem; }
  .breadcrumb { padding-top: 1.5rem; }
  .page-head { padding-block: 1.3rem 1.9rem; }
}