/* Beyond Hand to Mouth site styles.
   Every value comes from tokens.css. The only literal numbers are the two
   container breakpoints, because CSS cannot read a custom property inside
   an @container condition: tablet at 1000px and below, mobile at 600px and below. */

.site {
  container: site / inline-size;
  display: flex;
  flex-direction: column;
  width: var(--col-full);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
}
.site--desktop { width: var(--viewport-desktop); }
.site--tablet { width: var(--viewport-tablet); }
.site--mobile { width: var(--viewport-mobile); }
.site-main { display: flex; flex-direction: column; }
.site, .site * { box-sizing: border-box; }
.site img { display: block; max-width: var(--col-full); }
.site a { color: inherit; }
.site :focus-visible { outline: var(--rule-weight) solid var(--focus); outline-offset: var(--rule-weight); }

/* ---------- Type ---------- */
.eyebrow {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink);
}
.heading-display, .heading-page, .heading-section, .heading-card {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  color: var(--ink);
}
.heading-display { font-size: var(--fs-display); line-height: var(--lh-tight); }
.heading-page { font-size: var(--fs-h1); line-height: var(--lh-tight); }
.heading-section { font-size: var(--fs-h2); line-height: var(--lh-heading); }
.heading-card { font-size: var(--fs-h3); line-height: var(--lh-heading); font-weight: var(--fw-regular); }
.heading-script {
  margin: 0;
  font-family: var(--font-script);
  font-weight: var(--fw-regular);
  font-size: var(--fs-script);
  line-height: var(--lh-script);
  color: var(--taupe);
}
.lead { margin: 0; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink); max-width: var(--text-max); }
.body-text { margin: 0; max-width: var(--text-max); }
.caption { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.text-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.heading-group { display: flex; flex-direction: column; gap: var(--space-3); }
.heading-group--center { align-items: center; text-align: center; }
.rule-short { display: block; width: var(--rule-short); height: var(--rule-weight); background: var(--bronze); }
.rule-vertical { display: block; width: var(--hairline); height: var(--space-6); background: var(--ink); }

/* ---------- Buttons ---------- */
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.button-primary, .button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-0);
  font-family: var(--font-serif);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  line-height: var(--lh-heading);
  cursor: pointer;
}
.button-primary { background: var(--oxblood); color: var(--paper); border: var(--hairline) solid var(--oxblood); }
.button-primary:hover { background: var(--oxblood-deep); border-color: var(--oxblood-deep); }
.site a.button-primary { color: var(--paper); }
.button-secondary { background: var(--paper); color: var(--ink); border: var(--hairline) solid var(--ink); }
.button-secondary:hover { background: var(--linen); }
.link-arrow {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--bronze);
  text-decoration: none;
}
.site a.link-arrow { color: var(--bronze); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-height);
  padding: 0 var(--gutter);
  background: var(--paper);
  border-bottom: var(--hairline) solid var(--line);
}
.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.brand-mark { width: var(--logo-size); height: var(--logo-size); }
.brand-name {
  font-family: var(--font-serif);
  font-size: var(--fs-wordmark);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  line-height: var(--lh-heading);
  color: var(--ink);
}
.nav-links { display: flex; align-items: center; gap: var(--space-5); }
.nav-link {
  display: flex;
  padding: var(--space-2) 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: var(--rule-weight) solid var(--paper);
}
.nav-link--active { border-bottom-color: var(--oxblood); }
.header-actions { display: flex; align-items: center; gap: var(--space-5); }
.nav-mobile { display: none; }
.menu-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  list-style: none;
  cursor: pointer;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.menu-toggle::-webkit-details-marker { display: none; }
.menu-bars { display: flex; flex-direction: column; gap: var(--space-1); }
.menu-bar { display: block; width: var(--menu-bar-width); height: var(--rule-weight); background: var(--ink); }
.menu-panel { display: flex; flex-direction: column; padding: var(--space-3) 0 var(--space-4); }
.menu-link {
  display: flex;
  padding: var(--space-3) 0;
  border-bottom: var(--hairline) solid var(--line);
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  text-decoration: none;
  color: var(--ink);
}
.menu-link--active { color: var(--oxblood); }
.menu-panel .button-primary { margin-top: var(--space-4); }

/* ---------- Footer ---------- */
.site-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-7) var(--gutter) var(--space-5);
  background: var(--ink);
  color: var(--on-ink);
}
.footer-top { display: flex; justify-content: space-between; gap: var(--space-5); }
.footer-brand { display: flex; flex-direction: column; gap: var(--space-3); max-width: var(--text-max); }
.footer-brand .brand-mark { width: var(--logo-size-footer); height: var(--logo-size-footer); }
.footer-brand .brand-name { color: var(--on-ink); }
.footer-tagline { margin: 0; font-family: var(--font-serif); font-size: var(--fs-h3); line-height: var(--lh-heading); font-weight: var(--fw-light); color: var(--on-ink); }
.footer-columns { display: flex; gap: var(--space-7); }
.footer-column { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-heading { margin: 0 0 var(--space-2); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--on-ink-muted); }
.footer-link { font-size: var(--fs-small); text-decoration: none; color: var(--on-ink); }
.site a.footer-link { color: var(--on-ink); }
.footer-note { margin: 0; font-size: var(--fs-small); color: var(--on-ink); }
.footer-bottom { display: flex; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--hairline) solid var(--on-ink-muted); font-size: var(--fs-small); color: var(--on-ink-muted); }

/* ---------- Sections ---------- */
.section { display: flex; justify-content: center; padding: var(--space-7) var(--gutter); }
.section--linen { background: var(--linen); }
.section--stone { background: var(--stone); }
.section-inner { display: flex; flex-direction: column; gap: var(--space-5); width: var(--col-full); max-width: var(--content-max); }
.split { display: flex; gap: var(--space-6); align-items: center; }
.split--reverse { flex-direction: row-reverse; }
.split-text { display: flex; flex-direction: column; gap: var(--space-4); flex: 1 1 0; }
.split-media { display: flex; flex: 1 1 0; justify-content: center; }
.split-media .photo-frame { max-width: var(--media-max); }
.section--ink { background: var(--ink); color: var(--on-ink); }
.section--ink .heading-section, .section--ink .eyebrow, .section--ink .body-text { color: var(--on-ink); }
.painting { width: var(--col-full); aspect-ratio: var(--ratio-square); object-fit: cover; }
.painting-caption { margin: 0; font-size: var(--fs-small); color: var(--on-ink-muted); }
.figure-painting { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; width: var(--col-full); max-width: var(--media-max); }

/* ---------- Photos ---------- */
.photo { width: var(--col-full); object-fit: cover; aspect-ratio: var(--ratio-portrait); }
.photo--square { aspect-ratio: var(--ratio-square); }
.photo--landscape { aspect-ratio: var(--ratio-landscape); }
.photo--tall { aspect-ratio: var(--ratio-tall); }
.photo-frame { display: flex; width: var(--col-full); padding: var(--frame-inset); background: var(--paper); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-card); }
.photo-stack { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); width: var(--col-full); }

/* ---------- Home ---------- */
.hero { display: flex; justify-content: center; padding: var(--space-8) var(--gutter) var(--space-7); }
.hero-inner { display: flex; align-items: center; gap: var(--space-6); width: var(--col-full); max-width: var(--content-max); }
.hero-text { display: flex; flex-direction: column; gap: var(--space-4); flex: 3 1 0; }
.hero-media { display: flex; flex: 2 1 0; }
.question-panel { display: flex; flex-direction: column; background: var(--greige); border: var(--frame-inset) solid var(--stone); }
.question-title { display: flex; justify-content: center; padding: var(--space-5) var(--space-4); border-bottom: var(--hairline) solid var(--paper); text-align: center; }
.question-grid { display: flex; flex-wrap: wrap; }
.question-cell {
  display: flex;
  margin: 0;
  align-items: center;
  justify-content: center;
  flex: 1 1 var(--col-third);
  padding: var(--space-5) var(--space-4);
  border-right: var(--hairline) solid var(--paper);
  border-bottom: var(--hairline) solid var(--paper);
  text-align: center;
  color: var(--ink);
}
.check-list { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.check-item { display: flex; gap: var(--space-3); align-items: flex-start; }
.check-mark { flex: 0 0 var(--check-size); width: var(--check-size); height: var(--check-size); margin-top: var(--space-1); stroke: var(--bronze); fill: none; }
.card-row { display: flex; gap: var(--space-4); }
.card-service {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  flex: 1 1 0;
  padding: 0 var(--space-4) var(--space-5);
  background: var(--paper);
  border: var(--hairline) solid var(--line);
  box-shadow: var(--shadow-card);
  text-align: center;
}
.number-disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--disc-size);
  height: var(--disc-size);
  margin-top: calc(var(--disc-size) / -2);
  border-radius: var(--radius-disc);
  background: var(--sand);
  font-family: var(--font-serif);
  font-size: var(--fs-numeral);
  font-weight: var(--fw-light);
  color: var(--ink);
}
.card-row--services { padding-top: calc(var(--disc-size) / 2); }
.quote-block { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-6) var(--space-7); border: var(--hairline) solid var(--line); }
.quote-text { margin: 0; font-family: var(--font-serif); font-size: var(--fs-h3); line-height: var(--lh-heading); font-weight: var(--fw-light); }
.cta-band { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; }

/* ---------- Services ---------- */
.page-intro { display: flex; justify-content: center; padding: var(--space-8) var(--gutter) var(--space-6); }
.page-intro-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); max-width: var(--content-max); text-align: center; }
.service-number { font-family: var(--font-serif); font-size: var(--fs-numeral); font-weight: var(--fw-light); line-height: var(--lh-tight); color: var(--bronze); }
.list-ruled { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: var(--hairline) solid var(--line); }
.list-ruled-item { display: flex; padding: var(--space-2) 0; border-bottom: var(--hairline) solid var(--line); font-size: var(--fs-small); }
.fit-note { margin: 0; padding: var(--space-3) var(--space-4); background: var(--paper); border: var(--hairline) solid var(--line); font-size: var(--fs-small); }
.section--linen .fit-note { background: var(--paper); }
.step-table { display: flex; flex-direction: column; border: var(--hairline) solid var(--line); background: var(--paper); }
.step-row { display: flex; border-bottom: var(--hairline) solid var(--line); }
.step-number { display: flex; align-items: center; justify-content: center; flex: 0 0 var(--disc-size); padding: var(--space-4) 0; border-right: var(--hairline) solid var(--line); font-family: var(--font-serif); font-size: var(--fs-numeral); font-weight: var(--fw-light); color: var(--ink); }
.step-body { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); }
.step-title { margin: 0; font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: var(--fw-regular); line-height: var(--lh-heading); }

/* ---------- Gallery ---------- */
.gallery-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.gallery-item { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 calc(var(--col-third) - var(--space-4)); margin: 0; }
.gallery-item--wide { flex-basis: calc(var(--col-half) - var(--space-4)); }
.gallery-row--studio .gallery-item { flex-basis: calc(var(--col-quarter) - var(--space-4)); }

/* ---------- About ---------- */
.fact-row { display: flex; border-top: var(--hairline) solid var(--line); border-bottom: var(--hairline) solid var(--line); }
.fact { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 0; padding: var(--space-4); border-right: var(--hairline) solid var(--line); }
.fact-figure { font-family: var(--font-serif); font-size: var(--fs-h2); line-height: var(--lh-tight); font-weight: var(--fw-light); color: var(--bronze); }
.signature { font-family: var(--font-script); font-size: var(--fs-script); line-height: var(--lh-script); color: var(--taupe); }
.principle-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.principle { display: flex; gap: var(--space-5); padding: var(--space-4) 0; border-bottom: var(--hairline) solid var(--line); }
.principle-title { flex: 0 0 var(--col-label); margin: 0; font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: var(--fw-regular); line-height: var(--lh-heading); }

/* ---------- Contact ---------- */
.contact-split { display: flex; gap: var(--space-6); align-items: flex-start; }
.form-mock { display: flex; flex-direction: column; gap: var(--space-4); flex: 3 1 0; padding: var(--space-5); background: var(--linen); border: var(--hairline) solid var(--line); }
.mockup-label { display: flex; align-self: flex-start; gap: var(--space-2); padding: var(--space-1) var(--space-3); border: var(--hairline) dashed var(--ink); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.field-row { display: flex; gap: var(--space-4); }
.field { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 0; }
.field-label { font-size: var(--fs-small); font-weight: var(--fw-medium); }
.field-input {
  width: var(--col-full);
  padding: var(--space-3);
  border: var(--hairline) solid var(--muted);
  border-radius: var(--radius-0);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
}
.field-input--area { min-height: var(--textarea-height); resize: vertical; }
.field-help { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.contact-aside { display: flex; flex-direction: column; gap: var(--space-5); flex: 2 1 0; }
.contact-block { display: flex; flex-direction: column; gap: var(--space-2); padding-bottom: var(--space-4); border-bottom: var(--hairline) solid var(--line); }

/* ---------- Tablet ---------- */
@container site (max-width: 1000px) {
  .site-header, .section, .hero, .page-intro, .site-footer { padding-left: var(--gutter-tablet); padding-right: var(--gutter-tablet); }
  .header-actions .button-primary { display: none; }
  .nav-links { gap: var(--space-4); }
  .brand-name { font-size: var(--fs-small); }
  .hero { padding-top: var(--space-7); }
  .heading-display { font-size: var(--fs-h1); }
  .question-cell { flex-basis: var(--col-half); }
  .card-row--services { flex-wrap: wrap; row-gap: calc(var(--disc-size) / 2 + var(--space-5)); }
  .card-row--services .card-service { flex: 1 1 calc(var(--col-half) - var(--space-4)); }
  .gallery-row--studio .gallery-item { flex-basis: calc(var(--col-third) - var(--space-4)); }
  .split { gap: var(--space-5); }
  .contact-split { flex-direction: column; align-items: stretch; }
  .footer-columns { gap: var(--space-5); }
  .quote-block { padding: var(--space-5); }
}

/* ---------- Mobile ---------- */
@container site (max-width: 600px) {
  .site-header { min-height: var(--header-height-mobile); padding-left: var(--gutter-mobile); padding-right: var(--gutter-mobile); flex-wrap: wrap; }
  .nav-links { display: none; }
  .nav-mobile { display: flex; flex-direction: column; }
  .nav-mobile[open] { flex: 1 0 var(--col-full); order: 3; }
  .brand-mark { width: var(--space-6); height: var(--space-6); max-width: var(--logo-size); max-height: var(--logo-size); }
  .brand-name { font-size: var(--fs-eyebrow); }
  .section, .hero, .page-intro, .site-footer { padding-left: var(--gutter-mobile); padding-right: var(--gutter-mobile); }
  .section { padding-top: var(--space-6); padding-bottom: var(--space-6); }
  .hero { padding-top: var(--space-5); padding-bottom: var(--space-6); }
  .page-intro { padding-top: var(--space-6); padding-bottom: var(--space-5); }
  .page-intro-inner { align-items: flex-start; text-align: left; }
  .hero-inner { flex-direction: column; gap: var(--space-5); }
  .hero-media, .hero-text { flex: 0 0 auto; width: var(--col-full); }
  .hero-media .photo { aspect-ratio: var(--ratio-landscape); }
  .heading-display { font-size: var(--fs-display-mobile); }
  .heading-page { font-size: var(--fs-h1-mobile); }
  .heading-section { font-size: var(--fs-h2-mobile); }
  .heading-script, .signature { font-size: var(--fs-script-mobile); }
  .button-row { flex-direction: column; align-items: stretch; }
  .split, .split--reverse { flex-direction: column; align-items: stretch; }
  .split-media { order: -1; }
  .split-media .photo-frame, .figure-painting { max-width: var(--col-full); }
  .question-panel { border-width: var(--space-2); }
  .question-cell { flex-basis: var(--col-full); justify-content: flex-start; text-align: left; padding: var(--space-4); border-right: none; }
  .card-row--services { flex-direction: column; flex-wrap: nowrap; }
  .card-row--services .card-service { flex: 0 0 auto; }
  .quote-block { flex-direction: column; align-items: flex-start; padding: var(--space-4); gap: var(--space-3); }
  .step-number { flex-basis: var(--space-6); font-size: var(--fs-h3); }
  .gallery-row { gap: var(--space-3); }
  .gallery-item { flex-basis: var(--col-full); }
  .gallery-row--studio .gallery-item { flex-basis: calc(var(--col-half) - var(--space-3)); }
  .fact-row { flex-direction: column; }
  .fact { border-right: none; border-bottom: var(--hairline) solid var(--line); padding: var(--space-3) 0; }
  .principle { flex-direction: column; gap: var(--space-2); }
  .field-row { flex-direction: column; }
  .form-mock { padding: var(--space-4); }
  .footer-top, .footer-columns { flex-direction: column; }
  .footer-bottom { flex-direction: column; }
}

/* WordPress additions */
.field-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-notice { margin: 0; padding: var(--space-3) var(--space-4); background: var(--paper); border: var(--hairline) solid var(--line); border-left: var(--rule-weight) solid var(--bronze); font-size: var(--fs-small); }
.form-notice--error { border-left-color: var(--oxblood); }
.prose { display: flex; flex-direction: column; gap: var(--space-4); width: var(--col-full); max-width: var(--text-max); font-size: var(--fs-body); line-height: var(--lh-body); }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose figure { margin: 0; }
.prose h2, .prose h3, .prose h4 { margin: var(--space-3) 0 0; font-family: var(--font-serif); font-weight: var(--fw-regular); line-height: var(--lh-heading); }
.prose h2 { font-size: var(--fs-h2); }
.prose h3, .prose h4 { font-size: var(--fs-h3); }
.prose a { color: var(--bronze); }
.prose img { height: auto; }
.prose blockquote { padding: var(--space-3) var(--space-4); border-left: var(--rule-weight) solid var(--bronze); background: var(--linen); }
.post-list { display: flex; flex-direction: column; width: var(--col-full); border-top: var(--hairline) solid var(--line); }
.post-item { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) 0; border-bottom: var(--hairline) solid var(--line); }
.post-item .heading-card a { text-decoration: none; }
.post-date { font-size: var(--fs-small); color: var(--muted); }
.pagination-row { display: flex; justify-content: space-between; gap: var(--space-3); }

/* Money-tree logo in the header (replaces the SVG mark). */
.site-header .brand-mark--tree { width: auto; height: 60px; max-width: none; max-height: none; object-fit: contain; }
@container site (max-width: 600px) { .site-header .brand-mark--tree { height: 46px; } }

/* Brand subheading under the wordmark (header and footer). */
.brand-text { display: flex; flex-direction: column; gap: 3px; }
.brand-tag { font-family: var(--font-serif); font-style: italic; font-size: 14px; line-height: 1.2; color: var(--muted); letter-spacing: 0; text-transform: none; }
.brand--footer .brand-mark--tree { width: auto; height: 72px; max-width: none; max-height: none; object-fit: contain; }
.brand--footer .brand-name { color: var(--on-ink); }
.brand--footer .brand-tag { color: var(--on-ink-muted); font-size: 16px; }
@container site (max-width: 600px) { .site-header .brand-tag { font-size: 11px; } .brand--footer .brand-mark--tree { height: 56px; } }

/* Wordmark on one line; larger subheading. */
.brand-name { white-space: nowrap; }
.site-header .brand-tag { font-size: 18px; }
.brand--footer .brand-tag { font-size: 20px; }
@container site (max-width: 1000px) { .site-header .brand-tag { font-size: 16px; } }
@container site (max-width: 600px) { .site-header .brand-tag { font-size: 13px; } .brand--footer .brand-tag { font-size: 17px; } }

/* Tablet: keep one-line wordmark without pushing the menu off-screen. */
@container site (max-width: 1000px) {
  .site-header .brand { gap: var(--space-2); }
  .site-header .brand-mark--tree { height: 48px; }
  .site-header .brand-tag { font-size: 14px; }
  .nav-links { gap: var(--space-3); }
  .footer-top { flex-direction: column; gap: var(--space-5); }
}
@container site (max-width: 600px) { .site-header .brand-mark--tree { height: 42px; } .site-header .brand-tag { font-size: 12px; } }

/* Narrow tablets: switch to the menu button a little earlier so the one-line wordmark fits. */
@container site (max-width: 860px) {
  .site-header { flex-wrap: wrap; }
  .nav-links { display: none; }
  .nav-mobile { display: flex; flex-direction: column; }
  .nav-mobile[open] { flex: 1 0 var(--col-full); order: 3; }
}

/* Slightly bolder wordmark and subheading. */
.site-header .brand-name, .brand--footer .brand-name { font-weight: 700; }
.brand-tag { font-weight: 700; }


/* Anchor targets clear the header. */
[id] { scroll-margin-top: 110px; }