/* ============================================================
   ANGELA WHITE — Ivory & Bordeaux Design System

   The other two sites are dark rooms. This one is a gallery in
   daylight: warm ivory paper, bordeaux ink, bronze detailing.
   Where Mia is candlelight and Violet is voltage, Angela is
   an editorial spread — expensive, composed, in command.

   Because the ground is LIGHT, every pattern inverts:
   locked media frosts rather than dims, depth comes from
   shadow and paper rather than glow.
   ============================================================ */

:root {
  /* palette */
  --ivory: #f6f2ec;
  --ivory-deep: #ece4d9;
  --paper: #fffdfa;
  --ink: #17110f;
  --ink-soft: #574b45;
  --ink-faint: #8b7d75;
  --bordeaux: #6e1225;
  --bordeaux-deep: #4a0b18;
  --bordeaux-lift: #92223a;
  --bronze: #a67c4e;
  --champagne: #e0cdae;

  /* type */
  --font-display: "Bodoni Moda", "Didot", Georgia, serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;

  --text-hero: clamp(3rem, 1.8rem + 6.6vw, 8rem);
  --text-h2: clamp(2rem, 1.3rem + 3.2vw, 4.2rem);
  --text-h3: clamp(1.3rem, 1.05rem + 1.1vw, 1.95rem);
  --text-base: clamp(1rem, 0.95rem + 0.3vw, 1.08rem);
  --text-small: 0.78rem;

  /* rhythm */
  --space-section: clamp(5rem, 4rem + 6vw, 10rem);
  --gutter: clamp(1.25rem, 4vw, 4.5rem);

  /* motion */
  --ease-silk: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-slow: 1s;
  --dur-mid: 0.5s;
}

/* ---------- reset & base ---------- */

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

html { scroll-behavior: smooth; }

body {
  background: var(--ivory);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: 0.005em;
  overflow-x: hidden;
  min-height: 100vh;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ul, ol { list-style: none; }

::selection { background: var(--bordeaux); color: var(--ivory); }

/* paper atmosphere — warm gradient wash plus a whisper of tooth */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 45% at 82% 6%, rgba(166, 124, 78, 0.1), transparent 70%),
    radial-gradient(50% 50% at 8% 90%, rgba(110, 18, 37, 0.06), transparent 70%),
    linear-gradient(180deg, var(--paper) 0%, var(--ivory) 45%, var(--ivory-deep) 100%);
}

/* fine paper grain — much lighter than the dark sites' film grain */
.atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- typography ---------- */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.display em {
  font-style: italic;
  color: var(--bordeaux);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--bordeaux);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.eyebrow::before {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: var(--bronze);
}

.lede {
  color: var(--ink-soft);
  max-width: 34rem;
  font-size: 1.05rem;
}

/* a rule with a bronze diamond — recurring editorial motif */
.rule {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--bronze);
  font-size: 0.7rem;
}

.rule::before,
.rule::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, rgba(166, 124, 78, 0.5), transparent);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1rem 2.3rem;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  position: relative;
  transition: transform var(--dur-mid) var(--ease-silk),
              box-shadow var(--dur-mid) var(--ease-silk),
              background-color var(--dur-mid) var(--ease-silk),
              color var(--dur-mid) var(--ease-silk),
              border-color var(--dur-mid) var(--ease-silk);
}

/* solid bordeaux — the primary action */
.btn-wine {
  background: var(--bordeaux);
  color: var(--ivory);
  box-shadow: 0 12px 30px -14px rgba(110, 18, 37, 0.6);
}

.btn-wine:hover {
  background: var(--bordeaux-deep);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -14px rgba(110, 18, 37, 0.7);
}

/* hairline outline — the quiet action */
.btn-line {
  border: 1px solid rgba(110, 18, 37, 0.35);
  color: var(--bordeaux);
}

.btn-line:hover {
  border-color: var(--bordeaux);
  background: rgba(110, 18, 37, 0.06);
  transform: translateY(-2px);
}

.btn:focus-visible,
a:focus-visible {
  outline: 2px solid var(--bordeaux);
  outline-offset: 3px;
}

/* ---------- nav ---------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem var(--gutter);

  /* Frosted, never opaque: whatever is underneath stays visible through it.
     The bar has two states — over a dark hero it carries a faint wine scrim
     and light type; once that hero has scrolled past, .is-scrolled swaps it
     to an ivory frost with the normal ink type. initNav() in js/main.js
     drives the class off the hero's real bottom edge.

     NOTE: the previous rule painted a background *image* (a linear-gradient),
     which the old JS could never clear because it only set background-COLOR.
     That is why the ivory bar always sat on top of the hero. */
  background-color: transparent;
  backdrop-filter: blur(14px) saturate(1.06);
  -webkit-backdrop-filter: blur(14px) saturate(1.06);
  transition: background-color var(--dur-mid) ease,
              box-shadow var(--dur-mid) ease,
              border-color var(--dur-mid) ease;
  border-bottom: 1px solid transparent;
}

/* --- state A: sitting over the hero film ------------------------------- */
.nav.nav-over-media:not(.is-scrolled):not(.is-menu-open) {
  background-color: rgba(46, 6, 14, 0.26);
  border-bottom-color: rgba(224, 205, 174, 0.18);
}

.nav.nav-over-media:not(.is-scrolled):not(.is-menu-open) .nav-brand { color: var(--ivory); }
.nav.nav-over-media:not(.is-scrolled):not(.is-menu-open) .nav-brand .monogram { color: var(--champagne); }

.nav.nav-over-media:not(.is-scrolled):not(.is-menu-open) .nav-links a:not(.nav-cta) {
  color: rgba(246, 242, 236, 0.76);
}

.nav.nav-over-media:not(.is-scrolled):not(.is-menu-open) .nav-links a:not(.nav-cta):hover,
.nav.nav-over-media:not(.is-scrolled):not(.is-menu-open) .nav-links a:not(.nav-cta)[aria-current="page"] {
  color: var(--ivory);
}

.nav.nav-over-media:not(.is-scrolled):not(.is-menu-open) .nav-links a:not(.nav-cta)::after {
  background: var(--champagne);
}

/* on the wine ground the filled button inverts, or it disappears into it */
.nav.nav-over-media:not(.is-scrolled):not(.is-menu-open) .nav-cta {
  background: var(--ivory);
  color: var(--bordeaux-deep);
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.7);
}

.nav.nav-over-media:not(.is-scrolled):not(.is-menu-open) .nav-cta:hover {
  background: var(--paper);
}

.nav.nav-over-media:not(.is-scrolled):not(.is-menu-open) .nav-toggle {
  border-color: rgba(246, 242, 236, 0.45);
}

.nav.nav-over-media:not(.is-scrolled):not(.is-menu-open) .nav-toggle span {
  background: var(--ivory);
}

/* --- state B: content now runs underneath ------------------------------ */
.nav.is-scrolled {
  background-color: rgba(246, 242, 236, 0.78);
  border-bottom-color: rgba(166, 124, 78, 0.22);
  box-shadow: 0 18px 40px -34px rgba(23, 17, 15, 0.55);
}

.nav-brand {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.nav-brand .monogram {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.7rem;
  color: var(--bordeaux);
}

.nav-brand-name { white-space: nowrap; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}

.nav-links a:not(.nav-cta) {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
  position: relative;
  padding: 0.4rem 0;
  transition: color var(--dur-mid) ease;
}

.nav-links a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--bordeaux);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-mid) var(--ease-silk);
}

.nav-links a:not(.nav-cta):hover,
.nav-links a:not(.nav-cta)[aria-current="page"] { color: var(--bordeaux); }

.nav-links a:not(.nav-cta):hover::after,
.nav-links a:not(.nav-cta)[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-cta {
  padding: 0.6rem 1.5rem;
  font-size: 0.66rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

/* ---------- mobile menu ----------
   Ivory takeover rather than a dark one. */

.nav-toggle {
  display: none;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 2px;
  border: 1px solid rgba(110, 18, 37, 0.3);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.34rem;
  flex-shrink: 0;
  transition: border-color var(--dur-mid) ease, background-color var(--dur-mid) ease;
}

.nav-toggle:hover { border-color: var(--bordeaux); background: rgba(110, 18, 37, 0.06); }

.nav-toggle span {
  display: block;
  width: 1.05rem;
  height: 1px;
  background: var(--bordeaux);
  transition: transform var(--dur-mid) var(--ease-silk);
}

.nav.is-menu-open .nav-toggle span:first-child { transform: translateY(0.175rem) rotate(45deg); }
.nav.is-menu-open .nav-toggle span:last-child  { transform: translateY(-0.175rem) rotate(-45deg); }

body.menu-open { overflow: hidden; }

@media (max-width: 900px) {
  /* .nav has no backdrop-filter, so fixed children anchor to the
     viewport correctly — no containing-block trap here */
  .nav-toggle { display: flex; }
  /* backdrop-filter makes .nav the containing block for its
     position:fixed children, which would break the full-screen
     menu takeover below. Drop the blur and carry a slightly
     stronger scrim instead so the light type still reads. */
  .nav {
    padding: 0.9rem var(--gutter);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav.nav-over-media:not(.is-scrolled):not(.is-menu-open) {
    background-color: rgba(46, 6, 14, 0.42);
  }

  .nav.is-scrolled { background-color: rgba(246, 242, 236, 0.94); }

  /* menu open = ivory panel, so the type must go back to ink */
  .nav.is-menu-open,
  .nav.nav-over-media.is-menu-open {
    background-color: var(--ivory);
    border-bottom-color: transparent;
  }
  .nav-brand { font-size: 1.15rem; }
  .nav-cta { padding: 0.52rem 1.05rem; font-size: 0.6rem; }

  .nav-links {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.35rem;
    padding: 6.5rem var(--gutter) 3rem;
    background:
      radial-gradient(60% 45% at 85% 10%, rgba(166, 124, 78, 0.14), transparent 70%),
      radial-gradient(55% 45% at 8% 90%, rgba(110, 18, 37, 0.08), transparent 70%),
      var(--ivory);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.6rem);
    transition: opacity var(--dur-mid) var(--ease-silk),
                transform var(--dur-mid) var(--ease-silk),
                visibility var(--dur-mid);
  }

  .nav.is-menu-open .nav-links { opacity: 1; visibility: visible; transform: none; }

  .nav-links a:not(.nav-cta) {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 10vw, 3.2rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--ink);
    padding: 0.28rem 0;
    opacity: 0;
    transform: translateY(0.7rem);
    transition: opacity 0.45s var(--ease-silk), transform 0.45s var(--ease-silk), color var(--dur-mid) ease;
  }

  .nav.is-menu-open .nav-links a:not(.nav-cta) { opacity: 1; transform: none; }
  .nav.is-menu-open .nav-links a:nth-child(1) { transition-delay: 0.05s; }
  .nav.is-menu-open .nav-links a:nth-child(2) { transition-delay: 0.10s; }
  .nav.is-menu-open .nav-links a:nth-child(3) { transition-delay: 0.15s; }
  .nav.is-menu-open .nav-links a:nth-child(4) { transition-delay: 0.20s; }

  .nav-links a:not(.nav-cta)[aria-current="page"] { color: var(--bordeaux); font-style: italic; }
  .nav-links a:not(.nav-cta)::after { display: none; }
}

@media (max-width: 560px) {
  .nav-brand-name { display: none; }
}

/* ---------- media frames ----------
   On ivory, a frame is a mounted print: white mat, thin bronze
   hairline, soft shadow. No glow anywhere. */

.ph {
  position: relative;
  overflow: hidden;
  background: var(--ivory-deep);
  box-shadow: 0 24px 60px -30px rgba(23, 17, 15, 0.4);
}

.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(166, 124, 78, 0.35);
  pointer-events: none;
  z-index: 3;
}

.ph-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* locked media frosts to ivory instead of dimming to black */
.ph-locked .ph-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  backdrop-filter: blur(16px) saturate(0.85);
  -webkit-backdrop-filter: blur(16px) saturate(0.85);
  background: rgba(246, 242, 236, 0.42);
  transition: backdrop-filter var(--dur-slow) var(--ease-silk),
              background-color var(--dur-slow) var(--ease-silk);
}

/* a wax seal, not a padlock */
.ph-lock {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: var(--bordeaux);
  color: var(--ivory);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  box-shadow: 0 10px 24px -10px rgba(110, 18, 37, 0.7);
  transition: transform var(--dur-mid) var(--ease-silk),
              box-shadow var(--dur-mid) var(--ease-silk);
}

/* ---------- scroll reveals ---------- */

.reveal {
  opacity: 0;
  transform: translateY(1.6rem);
  transition: opacity var(--dur-slow) var(--ease-silk),
              transform var(--dur-slow) var(--ease-silk);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}

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

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- scaffolding ---------- */

.section {
  padding: var(--space-section) var(--gutter) 0;
  max-width: 90rem;
  margin: 0 auto;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* marquee ribbon — bordeaux band across the ivory */
.marquee {
  margin-top: var(--space-section);
  padding: 0.9rem 0;
  overflow: hidden;
  white-space: nowrap;
  background: var(--bordeaux);
  color: var(--ivory);
}

.marquee-track {
  display: inline-flex;
  gap: 3rem;
  animation: marquee 30s linear infinite;
  will-change: transform;
}

.marquee-track span {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

.marquee-track .dot { color: var(--champagne); font-style: normal; }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- footer ---------- */

.footer {
  margin-top: var(--space-section);
  padding: 4.5rem var(--gutter) 2.5rem;
  background: var(--ink);
  color: var(--ivory-deep);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  justify-content: space-between;
  align-items: flex-end;
}

.footer-word {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  line-height: 1;
  color: var(--ivory);
}

.footer-note {
  margin-top: 0.9rem;
  color: rgba(236, 228, 217, 0.6);
  font-size: var(--text-small);
  max-width: 26rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(236, 228, 217, 0.65);
}

.footer-links a:hover { color: var(--champagne); }

.footer-legal {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(236, 228, 217, 0.16);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  color: rgba(236, 228, 217, 0.5);
}

.badge-18 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid rgba(224, 205, 174, 0.5);
  color: var(--champagne);
  font-size: 0.68rem;
  font-weight: 700;
}


/* legal links in the footer strip */
.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.1rem;
}

.footer-legal-links a {
  font-size: inherit;
  letter-spacing: inherit;
  color: inherit;
  opacity: 0.78;
  transition: opacity var(--dur-mid) ease, color var(--dur-mid) ease;
}

.footer-legal-links a:hover,
.footer-legal-links a:focus-visible { opacity: 1; color: var(--bordeaux); }


/* ============================================================
   CONNECT MODAL — every route to her on one screen.
   Light-mode sibling of the dark modals on the other sites: the
   photograph underlays the whole card and the copy column lays
   an ivory wash over it so the list stays readable.
   ============================================================ */

.connect {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2rem);
}

.connect[hidden] { display: none; }

.connect-scrim {
  position: absolute;
  inset: 0;
  background: rgba(23, 17, 15, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.connect-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  width: min(64rem, 100%);
  max-height: min(92vh, 52rem);
  border: 1px solid rgba(166, 124, 78, 0.45);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 50px 120px -40px rgba(23, 17, 15, 0.6);
}

/* she underlays the WHOLE card, not just one column */
.connect-figure {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.connect-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 24%;
}

/* warm paper cast — enough to sit in the palette, not enough to dull her */
.connect-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg, rgba(246, 242, 236, 0.16), rgba(246, 242, 236, 0.34)),
    radial-gradient(60% 55% at 82% 84%, rgba(110, 18, 37, 0.14), transparent 72%);
}

.connect-body {
  grid-column: 2;
  position: relative;
  z-index: 1;
  padding: clamp(1.7rem, 3.4vw, 2.6rem);
  overflow-y: auto;
  background: linear-gradient(100deg,
    rgba(246, 242, 236, 0.72) 0%,
    rgba(246, 242, 236, 0.95) 18%,
    rgba(255, 253, 250, 0.97) 100%);
}

.connect-title {
  margin-top: 0.7rem;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.1;
  color: var(--ink);
}

.connect-title em { font-style: italic; color: var(--bordeaux); }

.connect-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 3;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(166, 124, 78, 0.5);
  background: rgba(255, 253, 250, 0.82);
  color: var(--bordeaux);
  font-size: 1.35rem;
  line-height: 1;
  transition: background-color var(--dur-mid) ease, border-color var(--dur-mid) ease;
}

.connect-close:hover {
  background: var(--bordeaux);
  border-color: var(--bordeaux);
  color: var(--ivory);
}

.connect-group { margin-top: 1.7rem; }

.connect-label {
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--bronze);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(166, 124, 78, 0.32);
}

.connect-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0.2rem;
  border-bottom: 1px solid rgba(166, 124, 78, 0.2);
  transition: background-color var(--dur-mid) var(--ease-silk),
              padding-left var(--dur-mid) var(--ease-silk);
}

.connect-link:hover {
  background: rgba(110, 18, 37, 0.06);
  padding-left: 0.7rem;
}

.connect-link-main { display: flex; flex-direction: column; gap: 0.15rem; }

.connect-link-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink);
}

.connect-link-note { font-size: 0.82rem; color: var(--ink-soft); }

.connect-link-meta {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* the tier most people should land on */
.connect-link.is-featured .connect-link-name { color: var(--bordeaux); font-style: italic; }
.connect-link.is-featured .connect-link-meta { color: var(--bordeaux); }

.connect-foot {
  margin-top: 1.7rem;
  font-size: 0.78rem;
  color: var(--ink-faint);
}

.connect-foot a { color: var(--bordeaux); border-bottom: 1px solid rgba(110, 18, 37, 0.4); }
.connect-foot a:hover { color: var(--bordeaux-lift); }

/* narrow: one column, photograph still underlays the card */
@media (max-width: 760px) {
  .connect-card { grid-template-columns: 1fr; max-height: 94vh; }
  .connect-body {
    grid-column: 1;
    background: linear-gradient(180deg,
      rgba(246, 242, 236, 0.86) 0%,
      rgba(246, 242, 236, 0.96) 28%,
      rgba(255, 253, 250, 0.98) 100%);
  }
}


/* ============================================================
   SKIP LINK — keyboard users shouldn't have to tab the whole
   nav on every page. Hidden until focused, then it arrives as
   a bordeaux card on the ivory ground.
   ============================================================ */

.skip-link {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 200;
  transform: translate(-50%, -120%);
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--bordeaux);
  border-top: none;
  border-radius: 0 0 2px 2px;
  background: var(--bordeaux);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  box-shadow: 0 14px 40px -14px rgba(23, 17, 15, 0.55);
  transition: transform var(--dur-mid) var(--ease-silk);
}

/* :focus as well as :focus-visible — a skip link must appear for any
   focus, including programmatic and assistive-tech focus, not only
   for Chrome's keyboard heuristic */
.skip-link:focus,
.skip-link:focus-visible {
  transform: translate(-50%, 0);
  outline: none;
}

main:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}


/* ============================================================
   HOMEPAGE (body.hp) — the dark room.
   Scoped so the ivory pages are completely unaffected.
   ============================================================ */

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

/* the wordmark occupies the top-left, so the nav's own row starts
   clear of it and the brand only fades in once docking completes */
body.hp .nav.is-scrolled,
body.cc .nav.is-scrolled {
  background-color: rgba(23, 3, 10, 0.72);
  border-bottom-color: rgba(224, 205, 174, 0.14);
  box-shadow: none;
}

body.hp .nav.is-scrolled:not(.is-menu-open) .nav-brand,
body.cc .nav.is-scrolled:not(.is-menu-open) .nav-brand { color: var(--ivory); }
body.hp .nav.is-scrolled:not(.is-menu-open) .nav-brand .monogram,
body.cc .nav.is-scrolled:not(.is-menu-open) .nav-brand .monogram { color: var(--champagne); }
body.hp .nav.is-scrolled:not(.is-menu-open) .nav-links a:not(.nav-cta),
body.cc .nav.is-scrolled:not(.is-menu-open) .nav-links a:not(.nav-cta) { color: rgba(246, 242, 236, 0.76); }

body.hp .nav.is-scrolled:not(.is-menu-open) .nav-links a:not(.nav-cta):hover,
body.cc .nav.is-scrolled:not(.is-menu-open) .nav-links a:not(.nav-cta):hover,
body.hp .nav.is-scrolled:not(.is-menu-open) .nav-links a:not(.nav-cta)[aria-current="page"],
body.cc .nav.is-scrolled:not(.is-menu-open) .nav-links a:not(.nav-cta)[aria-current="page"] { color: var(--ivory); }

body.hp .nav.is-scrolled:not(.is-menu-open) .nav-links a:not(.nav-cta)::after,
body.cc .nav.is-scrolled:not(.is-menu-open) .nav-links a:not(.nav-cta)::after { background: var(--champagne); }

body.hp .nav.is-scrolled:not(.is-menu-open) .nav-cta,
body.cc .nav.is-scrolled:not(.is-menu-open) .nav-cta {
  background: var(--ivory);
  color: var(--bordeaux-deep);
}

body.hp .nav.is-scrolled:not(.is-menu-open) .nav-toggle,
body.cc .nav.is-scrolled:not(.is-menu-open) .nav-toggle { border-color: rgba(246, 242, 236, 0.45); }
body.hp .nav.is-scrolled:not(.is-menu-open) .nav-toggle span,
body.cc .nav.is-scrolled:not(.is-menu-open) .nav-toggle span { background: var(--ivory); }

/* footer on the wine ground */
body.hp .footer,
body.cc .footer {
  background: transparent;
  border-top: 1px solid rgba(224, 205, 174, 0.16);
  color: rgba(246, 242, 236, 0.6);
}

body.hp .footer-word,
body.cc .footer-word { color: var(--ivory); }
body.hp .footer-note,
body.cc .footer-note { color: rgba(246, 242, 236, 0.55); }
body.hp .footer-links a,
body.cc .footer-links a,
body.hp .footer-legal,
body.cc .footer-legal,
body.hp .footer-legal-links a,
body.cc .footer-legal-links a { color: rgba(246, 242, 236, 0.6); }
body.hp .footer-links a:hover,
body.cc .footer-links a:hover,
body.hp .footer-legal-links a:hover,
body.cc .footer-legal-links a:hover { color: var(--champagne); }
body.hp .badge-18,
body.cc .badge-18 { border-color: rgba(224, 205, 174, 0.4); color: var(--champagne); }

/* the gate sits over the dark page */
body.hp .gate,
body.cc .gate { background: rgba(15, 2, 6, 0.94); }


/* ------------------------------------------------------------
   TOUCH TARGETS (narrow)
   Ten controls in the shared nav and footer were 19-42px tall on a
   phone -- the footer links were 19px, which is roughly half a
   fingertip. Height only: both footer groups already wrap, so
   nothing here can push the page sideways.
   ------------------------------------------------------------ */

@media (max-width: 900px) {
  .nav-cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .nav-toggle {
    width: 44px;
    height: 44px;
  }

  .footer-links a,
  .footer-legal-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* the rows carry their own height now, so the old vertical gap
     would only add dead space */
  .footer-links { gap: 0 1.6rem; }
  .footer-legal-links { gap: 0 1.1rem; }
}