/* ==========================================================================
   The Stretch Guru — staging stylesheet
   Single stylesheet, no external dependencies, no web-font requests,
   no gradients. White primary / black structural / royal blue restrained.
   Sections:
     1. Tokens
     2. Reset and base
     3. Typography
     4. Layout primitives
     5. Header and navigation
     6. Buttons and links
     7. Editorial modules
     8. Media placeholders
     9. Booking placeholder
    10. Footer
    11. Motion and reduced motion
    12. Responsive
    13. Print
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */

:root {
  /* Colour: white leads, black carries structure, royal blue is an accent only. */
  --white: #ffffff;
  --paper: #f5f5f3;
  --ink: #0b0b0c;
  --ink-80: #2b2d31;
  --ink-60: #4d5057;
  --rule: #dedee2;
  --rule-strong: #0b0b0c;
  --blue: #1c37a8;        /* royal blue, AA+ on white */
  --blue-bright: #2b4fe0; /* used only on black, where contrast allows */

  /* Deliberate, non-default pairing: condensed grotesque display over an
     old-style serif lede, with a neutral UI sans for body copy. */
  --font-display: "Bahnschrift", "DIN Alternate", "DIN Condensed",
    "Franklin Gothic Medium", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua",
    Palatino, "Times New Roman", Georgia, serif;
  --font-sans: "Segoe UI", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1: clamp(1.18rem, 1.08rem + 0.5vw, 1.44rem);
  --step-2: clamp(1.5rem, 1.28rem + 1.1vw, 2.1rem);
  --step-3: clamp(2rem, 1.5rem + 2.4vw, 3.4rem);
  --step-4: clamp(2.7rem, 1.6rem + 5vw, 6rem);

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 62ch;
  --shell: 82.5rem;
}

/* 2. Reset and base -------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.62;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

/* Visible keyboard focus everywhere, tuned per surface. */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.on-ink :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--white);
}

::selection {
  background: var(--blue);
  color: var(--white);
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: 100;
  transform: translateY(-140%);
  padding: 0.85rem 1.25rem;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

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

/* 3. Typography ------------------------------------------------------------ */

.display,
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

h1 {
  font-size: var(--step-4);
}

h2 {
  font-size: var(--step-3);
}

h3 {
  font-size: var(--step-2);
  line-height: 1.02;
}

.lede {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-80);
  max-width: 34ch;
}

.prose p + p {
  margin-top: 1.1em;
}

.prose {
  max-width: var(--measure);
  color: var(--ink-80);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.1rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blue);
}

.eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 2.25rem;
  height: 0.1875rem;
  background: currentColor;
}

.on-ink .eyebrow {
  color: var(--blue-bright);
}

.index-mark {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ink-60);
}

.fine {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-60);
}

/* 4. Layout primitives ----------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(3.5rem, 8vw, 7.5rem);
}

.section--tight {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.section--ruled {
  border-top: 1px solid var(--rule);
}

.on-ink {
  background: var(--ink);
  color: var(--white);
}

.on-ink .prose,
.on-ink .lede {
  color: #d5d7dd;
}

.on-paper {
  background: var(--paper);
}

/* An asymmetric editorial split: heading rail on the left, argument on the
   right. Deliberately unequal so the page never reads as a card grid. */
.split {
  display: grid;
  gap: clamp(1.75rem, 4vw, 4.5rem);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
}

.split--flip {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.stack > * + * {
  margin-top: 1.5rem;
}

.stack--tight > * + * {
  margin-top: 0.75rem;
}

.rule-top {
  border-top: 3px solid var(--rule-strong);
  padding-top: 1.25rem;
}

/* 5. Header and navigation ------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.75rem;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}

.wordmark__dot {
  width: 0.4rem;
  height: 0.4rem;
  background: var(--blue);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
}

.site-nav__link {
  display: inline-block;
  padding: 0.35rem 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 2px solid transparent;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  border-bottom-color: var(--blue);
}

.site-nav__link[aria-current="page"] {
  border-bottom-color: var(--ink);
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  background: var(--white);
  border: 2px solid var(--ink);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav-toggle__bars {
  position: relative;
  width: 1.1rem;
  height: 0.7rem;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.nav-toggle__bars::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  border-top: 2px solid currentColor;
}

/* 6. Buttons and links ----------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem 1.6rem;
  border: 2px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease,
    border-color 160ms ease;
}

.btn:hover,
.btn:focus-visible {
  background: var(--ink);
  color: var(--white);
}

.btn--primary {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

/* Placeholder control: reads as a real control but is explicitly inert
   until the owner approves live booking. */
.btn--placeholder {
  border-style: dashed;
  border-color: var(--ink-60);
  background: var(--white);
  color: var(--ink-60);
  cursor: not-allowed;
}

.btn--placeholder:hover,
.btn--placeholder:focus-visible {
  background: var(--white);
  color: var(--ink);
  border-color: var(--ink);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2rem;
}

.text-link {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 2px;
}

.text-link:hover,
.text-link:focus-visible {
  color: var(--ink);
}

/* 7. Editorial modules ----------------------------------------------------- */

/* Hero: a tall left column of type against an offset portrait plate. */
.hero {
  padding-block: clamp(2.75rem, 6vw, 5.5rem) 0;
}

.hero__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
}

/* Practitioner page inverts the hero so the two openers do not read alike. */
.hero__grid--media-first {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.hero h1 {
  max-width: 12ch;
}

.hero__lede {
  margin-top: 1.5rem;
}

.hero__figure {
  position: relative;
  padding: 0 1.25rem 1.25rem 0;
}

.hero__figure::after {
  content: "";
  position: absolute;
  inset: 1.25rem 0 0 1.25rem;
  border: 2px solid var(--ink);
  z-index: -1;
}

/* Logo variant: the hero figure displays the circular logo badge on a black
   plate with a blue offset frame, echoing the coming-soon page treatment. */
.hero__figure--logo {
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--ink);
  border: 1px solid var(--rule);
  min-height: clamp(280px, 32vw, 460px);
}

.hero__figure--logo::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--blue);
  transform: translate(0.85rem, 0.85rem);
  z-index: 0;
}

.hero__figure--logo img {
  position: relative;
  z-index: 1;
  width: min(80%, 340px);
  height: auto;
  aspect-ratio: 1;
  border: 0;
  background: transparent;
  box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, 0.42);
}

@media (max-width: 48rem) {
  .hero__figure--logo {
    min-height: 240px;
  }

  .hero__figure--logo::after {
    transform: translate(0.65rem, 0.65rem);
  }

  .hero__figure--logo img {
    width: min(70%, 260px);
  }
}

/* Statement bar: measured facts on rules, never a card row. */
.factbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 3px solid var(--ink);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.factbar__item {
  padding: 1.5rem 1.5rem 1.75rem 0;
  border-right: 1px solid var(--rule);
}

.factbar__item:last-child {
  border-right: 0;
}

.factbar__value {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.factbar__label {
  margin-top: 0.5rem;
  font-size: var(--step--1);
  color: var(--ink-60);
}

/* Sequence: a weighted, numbered walk-through. The lead step is set on black
   and spans wider than the rest, so the module is intentionally unequal. */
.sequence {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
}

.sequence__step {
  background: var(--white);
  padding: clamp(1.75rem, 3vw, 2.75rem);
}

.sequence__step--lead {
  background: var(--ink);
  color: var(--white);
}

.sequence__step--lead .sequence__num,
.sequence__step--lead .sequence__body {
  color: #d5d7dd;
}

.sequence__num {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1;
  color: var(--rule);
  display: block;
  margin-bottom: 1.25rem;
}

.sequence__step--lead .sequence__num {
  color: var(--blue-bright);
}

.sequence__body {
  margin-top: 0.75rem;
  color: var(--ink-60);
}

/* Ledger: credentials and session facts as a rule-separated record. */
.ledger {
  border-top: 3px solid var(--ink);
}

.ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 1rem clamp(1rem, 3vw, 2.5rem);
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule);
}

.ledger__term {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ledger__desc {
  margin: 0;
  color: var(--ink-80);
}

.on-ink .ledger {
  border-top-color: var(--white);
}

.on-ink .ledger__row {
  border-bottom-color: #33353b;
}

.on-ink .ledger__desc {
  color: #d5d7dd;
}

/* Pull statement: oversized serif line used sparingly. */
.statement {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  line-height: 1.28;
  max-width: 24ch;
}

.statement em {
  font-style: italic;
  color: var(--blue);
}

.on-ink .statement em {
  color: var(--blue-bright);
}

/* Marker list: hanging blue ticks, no bullets. */
.marker-list > li {
  position: relative;
  padding: 0.9rem 0 0.9rem 1.9rem;
  border-bottom: 1px solid var(--rule);
}

.marker-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.55rem;
  width: 1.05rem;
  height: 0.1875rem;
  background: var(--blue);
}

.on-ink .marker-list > li {
  border-bottom-color: #33353b;
}

.on-ink .marker-list > li::before {
  background: var(--blue-bright);
}

/* 8. Media placeholders ---------------------------------------------------- */

.figure {
  margin: 0;
}

.figure img {
  width: 100%;
  border: 1px solid var(--rule);
  background: var(--paper);
}

.figure__caption {
  margin-top: 0.75rem;
  font-size: var(--step--1);
  color: var(--ink-60);
}

.asset-note {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border: 1px dashed var(--ink-60);
  font-size: var(--step--1);
  color: var(--ink-60);
}

.asset-note strong {
  color: var(--ink);
}

/* 9. Booking placeholder --------------------------------------------------- */

.booking-panel {
  border: 3px solid var(--ink);
  background: var(--white);
  padding: clamp(1.5rem, 4vw, 3rem);
}

.booking-panel__flag {
  display: inline-block;
  margin-bottom: 1.25rem;
  padding: 0.4rem 0.75rem;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* The reserved area for an approved scheduling embed. Hatch-free, flat,
   and obviously empty so nobody mistakes it for a working widget. */
.embed-slot {
  margin-top: 1.75rem;
  min-height: 15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 2rem 1.25rem;
  border: 2px dashed var(--ink-60);
  background: var(--paper);
  color: var(--ink-60);
}

.embed-slot__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

/* 9b. Contact form --------------------------------------------------------- */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  top: 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.field label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
}

.on-ink .field label {
  color: #d5d7dd;
}

.field__optional {
  font-family: var(--font-sans);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
  color: var(--ink-60);
  margin-left: 0.4rem;
}

.field input,
.field select,
.field textarea {
  font-family: var(--font-sans);
  font-size: 1rem;
  padding: 0.8rem 1rem;
  border: 2px solid #33353b;
  background: var(--white);
  color: var(--ink);
  border-radius: 0;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue-bright);
}

.field textarea {
  resize: vertical;
  min-height: 5rem;
}

.field--consent {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.75rem;
}

.consent-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: #d5d7dd;
  cursor: pointer;
}

.consent-check input {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--blue-bright);
}

#form-status.is-success {
  color: #4ade80;
  font-weight: 700;
}

#form-status.is-error {
  color: #f87171;
  font-weight: 700;
}

/* 10. Footer --------------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: #b9bcc4;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.site-footer a {
  color: var(--white);
}

.site-footer__grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr);
  align-items: start;
}

.site-footer h2 {
  font-size: var(--step-2);
  color: var(--white);
}

.footer-heading {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 0.9rem;
}

.footer-list li + li {
  margin-top: 0.5rem;
}

.site-footer__base {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid #33353b;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  font-size: var(--step--1);
}

/* 11. Motion and reduced motion -------------------------------------------- */

/* Sections stay readable immediately. Motion is intentionally non-blocking so
   content never disappears when a browser delays IntersectionObserver work. */
.js .reveal {
  opacity: 1;
  transform: none;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* 12. Responsive ----------------------------------------------------------- */

@media (max-width: 62rem) {
  .hero__grid,
  .split,
  .split--flip {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero h1 {
    max-width: 16ch;
  }

  .sequence {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .sequence__step--lead {
    grid-column: 1 / -1;
  }

  .site-footer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 48rem) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    display: none;
    width: 100%;
  }

  .site-nav.is-open {
    display: block;
  }

  .site-header__inner {
    flex-wrap: wrap;
    padding-block: 0.9rem;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 0.75rem;
  }

  .site-nav__link {
    padding: 0.9rem 0;
    border-top: 1px solid var(--rule);
    border-bottom: 0;
  }

  .site-nav__link:hover,
  .site-nav__link:focus-visible,
  .site-nav__link[aria-current="page"] {
    border-bottom: 0;
    color: var(--blue);
  }

  .factbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .factbar__item {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    padding-right: 0;
  }

  .sequence,
  .site-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ledger__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
  }

  .hero__figure {
    padding: 0 0.75rem 0.75rem 0;
  }

  .hero__figure::after {
    inset: 0.75rem 0 0 0.75rem;
  }
}

/* Utilities — a deliberately small set so markup stays free of inline styles. */

.u-mt-sm {
  margin-top: 1.25rem;
}

.u-mt-md {
  margin-top: 1.75rem;
}

.u-mt-lg {
  margin-top: 2.5rem;
}

.u-narrow {
  max-width: 44ch;
}

.btn--ghost-light {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
}

.btn--ghost-light:hover,
.btn--ghost-light:focus-visible {
  background: var(--white);
  color: var(--ink);
}

.on-ink .figure__caption,
.on-ink .fine,
.site-footer .fine {
  color: #b9bcc4;
}

/* 12b. Logo wordmark -------------------------------------------------------- */

.wordmark__logo {
  display: inline-block;
  width: 2.25rem;
  height: 2.25rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  vertical-align: middle;
}

.wordmark {
  gap: 0.3rem;
}

/* 12c. FAQ accordion -------------------------------------------------------- */

.faq-accordion {
  display: flex;
  flex-direction: column;
  border-top: 3px solid var(--ink);
}

.faq-item {
  border-bottom: 1px solid var(--rule);
}

.faq-item__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.1rem, 2.5vw, 1.5rem) 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink);
  list-style: none;
  user-select: none;
  transition: color 160ms ease;
}

.faq-item__summary::-webkit-details-marker {
  display: none;
}

.faq-item__summary:hover,
.faq-item__summary:focus-visible {
  color: var(--blue);
}

.faq-item[open] .faq-item__summary {
  color: var(--blue);
}

.faq-item__icon {
  position: relative;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 200ms ease;
}

.faq-item__icon::before {
  width: 0.875rem;
  height: 0.1875rem;
}

.faq-item__icon::after {
  width: 0.1875rem;
  height: 0.875rem;
}

.faq-item[open] .faq-item__icon::after {
  transform: scaleY(0);
}

.faq-item__body {
  padding: 0 0 clamp(1.5rem, 3vw, 2rem);
  max-width: var(--measure);
  color: var(--ink-80);
  line-height: 1.65;
}

.faq-item__body p + p {
  margin-top: 1em;
}

.faq-item__body .marker-list > li {
  padding-left: 1.9rem;
}

.faq-item__body .marker-list > li::before {
  top: 1.55rem;
}

@media (max-width: 48rem) {
  .faq-item__summary {
    font-size: var(--step-0);
    gap: 1rem;
  }
}

/* 12d. Blog ---------------------------------------------------------------- */

.blog-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 3px solid var(--ink);
}

.blog-list__empty {
  padding: 2.5rem 0;
}

.blog-card {
  border-bottom: 1px solid var(--rule);
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
  transition: background-color 160ms ease;
}

.blog-card:hover {
  background: var(--paper);
}

.blog-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.blog-card__meta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.85rem;
}

.blog-card__tag {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.blog-card__date {
  font-size: var(--step--1);
  color: var(--ink-60);
}

.blog-card__title {
  font-size: var(--step-2);
  line-height: 1.05;
  margin-bottom: 0.75rem;
}

.blog-card:hover .blog-card__title {
  color: var(--blue);
}

.blog-card__excerpt {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-80);
  max-width: 56ch;
  margin-bottom: 0.85rem;
}

.blog-card__read {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}

/* Blog article page */

.article-header {
  padding-block: clamp(2.75rem, 6vw, 5.5rem) 0;
}

.article-header__eyebrow {
  margin-bottom: 1.25rem;
}

.article-header__title {
  max-width: 18ch;
  margin-bottom: 1.25rem;
}

.article-header__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

.article-header__date {
  font-size: var(--step--1);
  color: var(--ink-60);
}

.article-header__category {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.article-body {
  padding-block: clamp(2rem, 4vw, 3.5rem);
}

.article-body h2 {
  font-size: var(--step-2);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.article-body h3 {
  font-size: var(--step-1);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  text-transform: none;
  letter-spacing: 0;
}

.article-body p {
  max-width: var(--measure);
  color: var(--ink-80);
  line-height: 1.68;
}

.article-body p + p {
  margin-top: 1.15em;
}

.article-body ul,
.article-body ol {
  max-width: var(--measure);
  margin-top: 1.15em;
  margin-bottom: 1.15em;
  padding-left: 1.5rem;
}

.article-body li {
  margin-bottom: 0.6em;
  color: var(--ink-80);
  line-height: 1.6;
}

.article-body ul li {
  list-style: disc;
}

.article-body ol li {
  list-style: decimal;
}

.article-body blockquote {
  margin: 2rem 0;
  padding: 1.5rem 0 1.5rem 1.75rem;
  border-left: 3px solid var(--blue);
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink);
  max-width: var(--measure);
}

.article-body .source-note {
  margin-top: 3rem;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--ink-60);
  font-size: var(--step--1);
  color: var(--ink-60);
  max-width: var(--measure);
  line-height: 1.55;
}

.article-nav {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule);
}

.article-nav a {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}

.article-nav a:hover,
.article-nav a:focus-visible {
  color: var(--blue);
}

.article-nav__prev::before {
  content: "\2190 ";
}

.article-nav__next::after {
  content: " \2192";
}

@media (max-width: 48rem) {
  .blog-card__title {
    font-size: var(--step-1);
  }

  .blog-card__excerpt {
    font-size: var(--step-0);
  }

  .article-nav {
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* 13. Print ---------------------------------------------------------------- */

@media print {
  .site-header,
  .nav-toggle,
  .actions,
  .embed-slot {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  .on-ink,
  .site-footer {
    background: #fff !important;
    color: #000 !important;
  }
}