/* ==========================================================================
   COMPONENTS — brand marks, editorial furniture, cards, evidence, newsletter
   ========================================================================== */

/* --------------------------------------------------------------------------
   LOGO — C6: sans DIMMI + handwritten "di me"
   The hand is set larger than the sans (Caveat runs optically small) and is
   baseline-aligned, so the lockup reads as one word-image at any size.
   -------------------------------------------------------------------------- */
.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.22em;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

.logo__sans {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 1em;
  letter-spacing: var(--tracking-tight);
  color: var(--color-plum);
}

.logo__hand {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.5em;          /* optical match to the sans caps */
  letter-spacing: 0.01em;
  color: var(--color-coral);
  transform: translateY(0.055em);
}

.logo--sm { font-size: 1rem; }
.logo--md { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); }
.logo--lg { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); }
.logo--xl { font-size: clamp(2.5rem, 1.6rem + 4vw, 4.5rem); }

/* On dark the hand lightens — never pure white, or the human voice
   flattens into the interface. */
.logo--on-dark .logo__sans { color: var(--color-ivory); }
.logo--on-dark .logo__hand { color: var(--color-coral-light); }

.logo:hover .logo__hand { color: var(--color-coral-ink); }
.logo--on-dark:hover .logo__hand { color: var(--color-ivory); }

/* --- (D) — the tiny secondary mark. The parentheses carry the brand. ----- */
.avatar-mark {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  background: var(--color-plum);
  color: var(--color-ivory);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: -0.02em;
}

.avatar-mark--on-dark {
  background: transparent;
  border: 1.5px solid var(--color-coral-light);
  color: var(--color-coral-light);
}

/* --------------------------------------------------------------------------
   KICKER — the sans voice: uppercase, tracked, small but never tiny
   -------------------------------------------------------------------------- */
.kicker {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  line-height: 1.4;
}

.kicker--jade    { color: var(--color-jade); }
.kicker--coral   { color: var(--color-coral-ink); }
.kicker--orchid  { color: var(--color-orchid-ink); }
.kicker--plum    { color: var(--color-plum-soft); }
.kicker--on-dark { color: var(--color-coral-light); }
.kicker--on-jade { color: var(--color-jade-tint); }

/* --------------------------------------------------------------------------
   FORMAT BADGE — what makes a recurring series recognisable
   -------------------------------------------------------------------------- */
.format-badge {
  display: inline-block;
  padding: 0.3em 0.7em 0.34em;
  border-radius: var(--radius-xs);
  font-family: var(--font-sans);
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  line-height: 1.35;
}

.format-badge--jade   { background: var(--color-jade); color: var(--color-ivory); }
.format-badge--coral  { background: var(--color-coral-strong); color: var(--color-ivory); }
.format-badge--orchid { background: var(--color-orchid); color: var(--color-ivory); }
.format-badge--blush  { background: var(--color-blush); color: var(--color-plum); }

.format-badge--on-dark {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor;
  color: var(--color-ivory);
}

/* --------------------------------------------------------------------------
   PULL QUOTE — plum ground, serif italic. The line she screenshots.
   -------------------------------------------------------------------------- */
.pull-quote {
  background: var(--color-plum);
  color: var(--color-ivory);
  padding: var(--space-md) var(--space-md) var(--space-sm);
  margin: var(--space-lg) 0;
}

.pull-quote blockquote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  text-wrap: balance;
}

.pull-quote blockquote p::before { content: "\00AB"; }

.pull-quote blockquote p::after  { content: "\00BB"; }

.pull-quote__attr {
  margin-top: var(--space-2xs);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-orchid-light);
}

.pull-quote__attr::before { content: "\2014\00A0"; }

@media (min-width: 48rem) {
  .pull-quote { padding: var(--space-lg) var(--space-xl) var(--space-md); }
}

/* The author's own pulled line takes no quote marks: they would read as an
   attribution to somebody else. */
.pull-quote--plain blockquote p::before,
.pull-quote--plain blockquote p::after { content: none; }

/* And it takes no plum field either. A solid block claimed more hierarchy than
   the sentence needs and spent a device kept in reserve for moments that
   genuinely require it. On the page's own ivory, in plum, at a scale that reads
   as a sharp realisation rather than a section heading: on desktop the line sets
   naturally in one line inside the reading measure, and wraps on mobile. */
.pull-quote--plain {
  margin-block: var(--space-2xl);
  margin-inline: 0;
  padding: 0;
  background: transparent;
  color: var(--color-plum);
}

.pull-quote--plain blockquote p {
  font-size: var(--text-2xl);
  font-style: italic;
  font-weight: 500;
  line-height: 1.22;
  color: var(--color-plum);
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   PLACEHOLDER — a labelled reservation for real photography.
   No synthetic people. The block states the shot it is holding open, so the
   photo brief travels with the layout.
   -------------------------------------------------------------------------- */
.placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: var(--ratio, 3 / 2);
  overflow: hidden;
  background: var(--color-sand);
  border: 1px solid var(--color-rule);
}

.placeholder__hatch {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    transparent 0 9px,
    rgb(var(--color-plum-rgb) / 0.055) 9px 18px
  );
}

.placeholder__chip {
  position: absolute;
  left: var(--space-sm);
  top: var(--space-sm);
  padding: 0.4em 0.75em;
  background: var(--color-plum);
  color: var(--color-ivory);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: -0.005em;
}

.placeholder__caption {
  position: relative;
  padding: var(--space-sm);
  display: grid;
  gap: 0.2rem;
}

.placeholder__label {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--color-plum);
}

.placeholder__note {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-plum-soft);
  max-width: 34ch;
}

.placeholder--blush { background: var(--color-blush); }

/* --------------------------------------------------------------------------
   CARDS — six deliberately different compositions
   -------------------------------------------------------------------------- */
.card { display: grid; gap: var(--space-2xs); }

.card__labels {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  flex-wrap: wrap;
}

.card__section {
  font-family: var(--font-sans);
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--color-plum-soft);
}

.card__title {
  font-size: var(--text-xl);
  letter-spacing: -0.012em;
}

/* A card title is a standalone control - the only content of its own heading, and
   the whole reason the card exists - so it owes the 44px promise in CLAUDE.md 12.
   Its type size belongs to the card composition instead: a quiet card's title has
   to stay at --text-base to read as quiet, and a feature title at --text-lg. A
   single-line title therefore measures 26-33px, at every width, in both
   implementations (measured 22 August).

   So the same device as .link-arrow: an invisible ::before, which is what
   `position: relative` is here for. It changes no layout, no spacing and no visual
   weight - only the hit area.

   Sized to exactly --target-min and centred, rather than grown by --target-grow at
   each edge. A card title's size varies by variant and by how many lines it takes,
   so a fixed growth would overshoot on the large ones and reach into the standfirst
   for no benefit; a centred band of the floor height adds nothing once the text box
   already clears it. Horizontal insets stay at 0, so it can never reach sideways
   into the card beside it in a grid. */
.card__link {
  position: relative;
  text-decoration: none;
  text-decoration-color: transparent;
}

.card__link::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: var(--target-min);
  transform: translateY(-50%);
  /* Above the panel card's standfirst, which carries `opacity` and therefore its own
     stacking context - so it painted over this band and took 2.5px of the target with
     it. Measured on the panel card at 1280px: 42.6px instead of 44px, and only there,
     because it is the only standfirst with an opacity. Nothing else can be swallowed:
     the band is 44px tall with zero horizontal inset, and the nearest other target on
     any card is 81px away vertically. */
  z-index: 1;
}

.card__link:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: var(--card-accent, var(--color-coral));
}

/* Each format carries its accent onto the card, so a series stays recognisable
   even where the badge is out of view. */
.card--accent-jade   { --card-accent: var(--color-jade); }
.card--accent-coral  { --card-accent: var(--color-coral); }
.card--accent-orchid { --card-accent: var(--color-orchid); }
.card--accent-blush  { --card-accent: var(--color-orchid); }

.card__cta { margin-top: var(--space-2xs); }

.card__standfirst {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-plum-soft);
  max-width: 46ch;
}

.card__meta {
  font-size: var(--text-2xs);
  font-weight: 500;
  color: var(--color-plum-soft);
}

.card__media { margin-bottom: var(--space-2xs); }

/* -- hero: the lead. Words first on mobile, words beside image on desktop. */
.card--hero { gap: var(--space-md); }

.card--hero .card__title {
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.card--hero .card__standfirst {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--color-plum);
  max-width: 34ch;
}

.card--hero .card__words { display: grid; gap: var(--space-sm); align-content: start; }
.card--hero .hand { margin-top: calc(-1 * var(--space-3xs)); }

@media (min-width: 62rem) {
  .card--hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: center;
  }
}

/* -- feature: stacked. The workhorse. */
.card--feature .card__title { font-size: var(--text-lg); }

/* -- wide: landscape image beside the words */
.card--wide { gap: var(--space-sm); }
.card--wide .card__title { font-size: var(--text-2xl); }
.card--wide .card__words { display: grid; gap: var(--space-2xs); align-content: center; }

@media (min-width: 48rem) {
  .card--wide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: center;
  }
  .card--wide .card__media { margin-bottom: 0; }
}

/* -- panel: blush ground, no photograph. Lightness without an image. */
.card--panel {
  background: var(--color-blush);
  padding: var(--space-md);
  gap: var(--space-2xs);
  align-content: start;
}

.card--panel .card__title { font-size: var(--text-lg); }
.card--panel .card__standfirst { color: var(--color-plum); opacity: 0.82; }

/* -- solid: colour is the image. Title sits at the bottom of the block. */
.card--solid {
  padding: var(--space-md);
  min-height: 20rem;
  grid-template-rows: auto 1fr;
  color: var(--color-ivory);
}

.card--solid .card__solid-body {
  display: grid;
  gap: var(--space-2xs);
  align-content: end;
}

.card--solid .card__title {
  font-size: var(--text-2xl);
  color: var(--color-ivory);
}

/* The label row sits on saturated colour, so it cannot inherit the ink
   intended for ivory grounds. */
.card--solid .card__section { color: var(--color-ivory); }

.card--solid-jade  { background: var(--color-jade); }
.card--solid-coral { background: var(--color-coral-strong); }

/* -- quiet: text only, hairline separated. For dense, scannable runs. */
.card--quiet {
  gap: var(--space-3xs);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--color-rule);
}

.card--quiet .card__title { font-size: var(--text-base); line-height: 1.35; }

/* --------------------------------------------------------------------------
   EVIDENCE — uncertainty presented as information, not as an alarm
   -------------------------------------------------------------------------- */
.evidence {
  background: var(--color-ivory);
  color: var(--color-plum);
  border: 1px solid var(--color-rule);
  padding: var(--space-md);
  display: grid;
  gap: var(--space-md);
}

.evidence__head { display: grid; gap: var(--space-3xs); }
.evidence__title { font-size: var(--text-2xl); }

.evidence__verdict {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-sm);
  background: var(--color-blush);
}

.evidence__meaning {
  font-size: var(--text-sm);
  line-height: 1.55;
  max-width: 52ch;
}

.evidence__grid { display: grid; gap: var(--space-md); }

.evidence__col { display: grid; gap: var(--space-2xs); align-content: start; }

.evidence__list { display: grid; gap: var(--space-2xs); }

.evidence__list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-plum-soft);
}

.evidence__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--radius-pill);
  background: currentColor;
  opacity: 0.5;
}

.evidence__conclusion {
  display: grid;
  gap: var(--space-2xs);
  padding-top: var(--space-md);
  border-top: 2px solid var(--color-plum);
}

.evidence__conclusion p {
  font-size: var(--text-base);
  line-height: 1.6;
  max-width: 58ch;
}

.evidence__disclaimer {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 600;
  line-height: 1.5;
  padding: var(--space-2xs) var(--space-xs);
  background: var(--color-sand);
  color: var(--color-plum);
}

@media (min-width: 48rem) {
  .evidence { padding: var(--space-lg); }
  .evidence__grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
}

/* -- the four working states -------------------------------------------- */
.evidence-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.85em 0.44em;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--color-ivory);
  width: fit-content;
}

.evidence-chip__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: var(--radius-pill);
  background: currentColor;
}

.evidence-chip--jade   { background: var(--color-jade); }
.evidence-chip--plum   { background: var(--color-plum); }
.evidence-chip--orchid { background: var(--color-orchid); }
.evidence-chip--coral  { background: var(--color-coral-strong); }

/* On its own ground the jade chip would disappear; invert it so every state in
   the legend still reads as a pill. */
.band--jade .evidence-chip--jade {
  background: var(--color-ivory);
  color: var(--color-jade);
}

.evidence-key { display: grid; gap: var(--space-sm); align-content: start; }

.evidence-key__intro {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-ivory);
  opacity: 0.88;
  max-width: 42ch;
}

.evidence-key__rows { display: grid; gap: var(--space-sm); }

.evidence-key__row { display: grid; gap: var(--space-3xs); }

.evidence-key__row p {
  font-size: var(--text-2xs);
  line-height: 1.5;
  color: var(--color-ivory);
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   SOURCES — with a review date for health and science pieces
   -------------------------------------------------------------------------- */
.sources {
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 2px solid var(--color-plum);
}

.sources__list {
  display: grid;
  gap: var(--space-2xs);
  counter-reset: src;
  margin-top: var(--space-2xs);
}

.sources__list li {
  counter-increment: src;
  position: relative;
  padding-left: 2rem;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.sources__list li::before {
  content: counter(src);
  position: absolute;
  left: 0;
  top: 0.1em;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: var(--radius-pill);
  background: var(--color-jade);
  color: var(--color-ivory);
  font-family: var(--font-sans);
  font-size: var(--text-3xs);
  font-weight: 700;
}

.sources__reviewed {
  margin-top: var(--space-sm);
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  color: var(--color-plum-soft);
}

.sources__reviewed-label {
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--color-plum);
}

/* --------------------------------------------------------------------------
   SECTION HEAD
   -------------------------------------------------------------------------- */
.section-head {
  display: grid;
  gap: var(--space-2xs);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-rule);
  max-width: var(--layout-content);
}

.section-head__title { font-size: var(--text-2xl); }

.section-head__blurb {
  font-size: var(--text-sm);
  color: var(--color-plum-soft);
  max-width: 52ch;
}

.section-head__more { justify-self: start; margin-top: var(--space-3xs); }

.section-head--on-dark { border-bottom-color: rgb(var(--color-ivory-rgb) / 0.22); }
.section-head--on-dark .section-head__title { color: var(--color-ivory); }
.section-head--on-dark .section-head__blurb { color: var(--color-orchid-light); }

.section-head--on-jade { border-bottom-color: rgb(var(--color-ivory-rgb) / 0.28); }
.section-head--on-jade .section-head__title { color: var(--color-ivory); }
.section-head--on-jade .section-head__blurb { color: var(--color-jade-tint); }

/* --------------------------------------------------------------------------
   RARE EVENT — orange x fuchsia. The only gradient in the stylesheet.
   Reserved for joy, desire, reinvention. Never the everyday palette.
   -------------------------------------------------------------------------- */
.rare-event {
  position: relative;
  padding: var(--space-lg) var(--space-md) var(--space-xl);
  color: var(--color-ivory);
  background:
    radial-gradient(120% 140% at 62% 100%, var(--color-collision-bloom) 0%, transparent 42%),
    linear-gradient(
      100deg,
      var(--color-collision-orange) 0%,
      var(--color-collision-orange) 34%,
      var(--color-collision-mid) 50%,
      var(--color-collision-fuchsia) 66%,
      var(--color-collision-fuchsia) 100%
    );
  display: grid;
  gap: var(--space-sm);
  overflow: hidden;
}

.rare-event__eyebrow {
  justify-self: start;
  padding: 0.45em 0.9em 0.5em;
  background: var(--color-plum);
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  max-width: 44ch;
}

.rare-event__title {
  font-size: var(--text-3xl);
  line-height: var(--leading-display);
  max-width: 26ch;
  color: var(--color-ivory);
}

.rare-event__title em { font-style: italic; }

.rare-event__cta { margin-top: var(--space-2xs); }

@media (min-width: 48rem) {
  .rare-event { padding: var(--space-xl) var(--space-xl) var(--space-2xl); }
}

/* --------------------------------------------------------------------------
   LA LETTERA — newsletter. Announced, not offered: no form (D-LAUNCH-NEWSLETTER-01).
   -------------------------------------------------------------------------- */
.letter {
  background: var(--color-plum);
  color: var(--color-ivory);
  padding: var(--space-lg) var(--space-md);
  display: grid;
  gap: var(--space-lg);
}

.letter__words { display: grid; gap: var(--space-2xs); align-content: start; }

.letter__title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  color: var(--color-ivory);
}

.letter__promise {
  font-size: var(--text-base);
  color: var(--color-ivory);
  opacity: 0.85;
  max-width: 34ch;
}

.letter__items {
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
  counter-reset: letter;
}

.letter__items li {
  counter-increment: letter;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5ch;
  padding-top: var(--space-2xs);
  border-top: 1px solid rgb(var(--color-ivory-rgb) / 0.2);
  font-size: var(--text-base);
}

.letter__item-kicker {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--color-coral-light);
}

.letter__item-text { font-style: italic; }

.letter__form-wrap { display: grid; gap: var(--space-2xs); align-content: start; }

/* The announcement that stands where the form used to. Sans, because it states a fact
   about the product rather than speaking editorially, and ivory on plum - the band's
   own pair - so it needs no new colour and no new contrast guarantee. */
.letter__status {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-ivory);
}

@media (min-width: 56rem) {
  .letter {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-2xl);
    padding: var(--space-2xl) var(--space-xl);
  }
  .letter--compact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--color-ivory);
  border-bottom: 1px solid var(--color-rule);
}

/* Translucency only where the browser can also blur; otherwise the opaque
   ivory above stands. */
@supports (backdrop-filter: blur(1px)) {
  .site-header {
    background: rgb(var(--color-ivory-rgb) / 0.9);
    backdrop-filter: blur(12px);
  }
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  max-width: var(--layout-wide);
  margin-inline: auto;
  padding: var(--space-xs) var(--layout-gutter);
}

.site-header__tools {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-left: auto;
}

.site-header__tagline {
  display: none;
  font-family: var(--font-sans);
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--color-plum-soft);
  text-align: right;
  max-width: var(--layout-wide);
  margin-inline: auto;
  padding: 0 var(--layout-gutter) var(--space-2xs);
}

.nav__list { display: flex; gap: var(--space-md); }

.nav__link {
  display: inline-block;
  padding: 0.5rem 0;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-plum);
  border-bottom: 2px solid transparent;
}

.nav__link:hover { border-bottom-color: var(--color-coral); }
.nav__link.is-active { border-bottom-color: var(--color-jade); }

.nav--desktop { display: none; }

/* -- search: <details>, so it works with no JavaScript ------------------- */
.search__toggle,
.menu__toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--target-min);
  padding: 0 0.65rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--color-plum);
}

.search__toggle::-webkit-details-marker,
.menu__toggle::-webkit-details-marker { display: none; }

.search__toggle:hover, .menu__toggle:hover { background: var(--color-sand); }

.icon { width: 1.15rem; height: 1.15rem; }

.search__label { display: none; }

.search__form {
  /* Positioned against .site-header (sticky, so a containing block), never
     against the icon: anchoring to the icon pushed the panel off-canvas on
     narrow screens. */
  position: absolute;
  top: 100%;
  left: var(--layout-gutter);
  right: var(--layout-gutter);
  z-index: 50;
  display: flex;
  gap: var(--space-2xs);
  padding: var(--space-xs);
  background: var(--color-ivory-raised);
  border: 1px solid var(--color-rule);
  box-shadow: var(--shadow-raise);
}

.search__form .field__input { flex: 1; min-width: 0; }

/* -- mobile menu -------------------------------------------------------- */
.menu__bars {
  position: relative;
  width: 1.1rem;
  height: 2px;
  background: currentColor;
}

.menu__bars::before,
.menu__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
}

.menu__bars::before { top: -6px; }
.menu__bars::after  { top: 6px; }

.nav--mobile {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 45;
  background: var(--color-ivory-raised);
  border-bottom: 1px solid var(--color-rule);
  box-shadow: var(--shadow-raise);
  padding: var(--space-xs) var(--layout-gutter) var(--space-md);
}

.nav--mobile .nav__list { flex-direction: column; gap: 0; }

.nav--mobile .nav__link {
  display: block;
  padding: var(--space-xs) 0;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-rule);
}

.site-header__cta { display: none; }

@media (min-width: 62rem) {
  .nav--desktop { display: block; margin-left: var(--space-lg); }
  .menu { display: none; }
  .search__label { display: inline; }
  .search__form {
    left: auto;
    width: min(26rem, calc(100vw - 2 * var(--layout-gutter)));
  }
  .site-header__cta { display: inline-flex; }
  .site-header__tagline { display: block; }
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-plum);
  color: var(--color-ivory);
  margin-top: var(--space-3xl);
  padding: var(--space-2xl) var(--layout-gutter) var(--space-lg);
}

.site-footer__top {
  display: grid;
  gap: var(--space-xl);
  max-width: var(--layout-wide);
  margin-inline: auto;
}

/* The brand column is the wordmark alone. It kept a serif line and the `(D)` mark until
   September 2026; the grid and its gap stay because the column is still a column, and a
   single child simply has nothing to be spaced from. */
.site-footer__brand { display: grid; gap: var(--space-sm); justify-items: start; }

.site-footer__cols {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.site-footer__col { display: grid; gap: var(--space-2xs); align-content: start; }

.site-footer__col ul { display: grid; gap: var(--space-3xs); }

.site-footer__col a {
  display: inline-block;
  padding: 0.28rem 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-ivory);
  text-decoration: none;
}

.site-footer__col a:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-coral-light);
  text-underline-offset: 0.18em;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  justify-content: space-between;
  max-width: var(--layout-wide);
  margin: var(--space-xl) auto 0;
  padding-top: var(--space-sm);
  border-top: 1px solid rgb(var(--color-ivory-rgb) / 0.2);
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  color: var(--color-orchid-light);
}

@media (min-width: 56rem) {
  .site-footer__top {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
    gap: var(--space-2xl);
  }
}