/* ==========================================================================
   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;
}

.card__link {
  text-decoration: none;
  text-decoration-color: transparent;
}

.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. Placeholder form, no submission.
   -------------------------------------------------------------------------- */
.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; }

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

.letter__form .field__label { color: var(--color-ivory); }

.letter__form .field__input {
  background: var(--color-ivory-raised);
  border-color: transparent;
}

.letter__note {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  color: var(--color-orchid-light);
}

@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;
}

.site-footer__brand { display: grid; gap: var(--space-sm); justify-items: start; }

.site-footer__line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--color-orchid-light);
  max-width: 24ch;
}

.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);
  }
}