/* Modern home page (LANDING-2): the Gomez landing redesign — photographic rounded hero, floating
   pill navigation, asymmetrical property cards, generous white space, ivory / charcoal / gold.
   Loaded only on the home page when the release's landing_design is "modern"; scoped to
   body.landing-modern. Original CSS on the design tokens (static/css/tokens.css): no raw colours.
   Motion: five sections (featured, team, sold, paths, closing) use the shared scroll reveal
   (.reveal in static/css/site.css + static/js/core/page.js; nothing hidden without JS or in print;
   it does run under reduced motion — an owner decision, see tokens.css). The hero intro on load (photo, then
   lettering, then the goals bar), the piece-by-piece featured homes and the photo hover zoom are also in
   static/css/site.css. This file adds no motion of its own. Heading sizes sit in :where() so the name cap
   (.website-name-capped, TREC §535.155) always wins. Breakpoints: 43.75em (700px), 64em (lg),
   68.75em (1100px), 75em (goals bar fits one row), 80.125em (social rail). */

.landing-modern {
  background-color: var(--color-surface);
  color: var(--color-text);
}
.landing-modern main { display: block; }
:where(.landing-modern main) h2 {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-display);
  letter-spacing: var(--tracking-heading);
  line-height: 1.1;
}
:where(.landing-modern main) h3 { margin: 0; line-height: 1.15; }
:where(.landing-modern main) p { margin: 0; }

.modern-wrap { width: min(78.75rem, 100% - 2 * var(--page-gutter)); margin-inline: auto; }
.modern-section { padding-block: var(--section-space); }
.modern-band { padding-block: var(--section-space); background-color: var(--color-bg); }
.modern-eyebrow {
  margin: 0 0 var(--space-4);
  color: var(--color-text-accent);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.modern-note { margin-top: var(--space-4); color: var(--color-text-secondary); font-size: var(--text-xs); }
.modern-text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-decoration-color: var(--color-border-accent);
  text-underline-offset: 0.35em;
}
.modern-text-link:hover { color: var(--color-text-accent); }

/* Buttons: pill shaped. Dark on light; gold (the dark band's primary) on charcoal. */
.modern-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: var(--control-height-lg);
  padding: var(--space-3) var(--space-6);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-md);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}
.modern-button--dark, .modern-button--gold {
  border-color: var(--color-primary-bg);
  background-color: var(--color-primary-bg);
  color: var(--color-primary-text);
}
.modern-button--dark:hover, .modern-button--gold:hover {
  border-color: var(--color-primary-bg-hover);
  background-color: var(--color-primary-bg-hover);
  color: var(--color-primary-text);
}
.modern-button--outline { border-color: var(--color-border-strong); color: var(--color-text); }
.modern-button--outline:hover { background-color: var(--color-surface-hover); color: var(--color-text); }

/* ---- Header: a white pill floating above the hero ---- */
.landing-modern .site-header { position: relative; z-index: 3; padding-inline: var(--space-3); background-color: transparent; }
.modern-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  width: min(87.5rem, 100%);
  margin: var(--space-4) auto 0;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-6);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-6);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.modern-nav__brand { margin-right: auto; }
.modern-nav__links { display: none; }
.modern-nav__actions { display: none; align-items: center; gap: var(--space-5); }
.modern-nav__login { color: var(--color-text-secondary); font-size: var(--text-sm); }
.modern-menu summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  padding-inline: var(--space-4);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: var(--text-md);
  list-style: none;
}
.modern-menu summary::-webkit-details-marker { display: none; }
.modern-menu nav {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 5;
  min-width: min(16rem, 100%);
  padding: var(--space-4);
  border-radius: var(--radius-5);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
}
.modern-menu .site-nav { flex-direction: column; align-items: stretch; gap: var(--space-1); }
@media (min-width: 64em) {
  .modern-nav { border-radius: var(--radius-full); }
  .modern-nav__links, .modern-nav__actions { display: flex; }
  .modern-menu { display: none; }
  .modern-nav .site-nav { gap: var(--space-1) var(--space-6); }
}

/* ---- Hero: rounded photographic band, centred copy, caption line ---- */
.modern-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 46.875rem;
  margin: calc(-1 * var(--space-12)) var(--space-6) 0;
  padding: calc(var(--space-16) + var(--space-12)) var(--space-6) calc(var(--space-20) + var(--space-12));
  overflow: hidden;
  border-radius: var(--radius-4);
  background-color: var(--color-bg);
  color: var(--color-text);
}
.modern-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.modern-hero--photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background-color: var(--color-scrim); }
.modern-hero__content { position: relative; z-index: 2; max-width: 65rem; margin-inline: auto; text-align: center; }
.modern-hero .modern-eyebrow { color: var(--color-text-accent); }
/* The gold eyebrow is small text: its own scrim pill keeps it >= 4.5:1 over the brightest part of any
   photo (the hero scrim alone guarantees only the ivory text). */
.modern-hero--photo .modern-eyebrow {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background-color: var(--color-scrim);
}
:where(.modern-hero) h1 {
  margin: var(--space-5) 0;
  font-family: var(--font-family-display);
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-display);
  letter-spacing: var(--tracking-heading);
  line-height: 1.05;
}
.modern-hero h1 em { font-weight: var(--font-weight-regular); }
.modern-hero__lead { max-width: 43.75rem; margin-inline: auto; font-size: var(--text-base); line-height: var(--leading-body); }
.modern-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-8); margin-top: var(--space-4); }
.modern-hero__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--control-height-lg);
  padding-top: var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border-strong);
  color: var(--color-text);
  font-size: var(--text-md);
  text-decoration: none;
}
.modern-hero__link:hover { border-bottom-color: var(--color-text-accent); color: var(--color-text); }
.modern-hero__caption {
  position: absolute;
  right: var(--space-10);
  bottom: var(--space-16);
  left: var(--space-10);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
}
.modern-hero__note { margin-left: auto; }
.modern-dot { width: 0.4375rem; height: 0.4375rem; border-radius: var(--radius-full); background-color: var(--color-rule-decorative); }
.modern-hero__hint { position: relative; z-index: 2; margin-top: var(--space-4); text-align: center; }

/* ---- Goals bar overlapping the hero ---- */
.modern-intents {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  width: min(70rem, 100% - 2 * var(--page-gutter));
  margin-top: calc(-1 * var(--space-16));
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-8);
  border: var(--border-width) solid var(--color-border-subtle);
  /* Rounded box while it wraps onto several rows; a full pill only once it fits one row (75em), since
     a full radius on a tall box turns it into an oval that its eyebrow and buttons stick out of. */
  border-radius: var(--radius-6);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
}
.modern-intents__intro { margin-right: auto; }
.modern-intents__intro .modern-eyebrow { display: block; margin-bottom: var(--space-1); }
.modern-intents__intro strong { font-weight: var(--font-weight-medium); }
.modern-intents > a:not(.modern-button) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-height);
  padding-inline: var(--space-4);
  border-left: var(--border-width) solid var(--color-border-subtle);
  color: var(--color-text);
  font-size: var(--text-md);
  text-decoration: none;
}
.modern-intents > a:not(.modern-button):hover { color: var(--color-text-accent); text-decoration: underline; }

@media (min-width: 75em) {
  /* Tighter spacing so the four English labels ("Request a Cash Offer" is the longest) stay on one row. */
  .modern-intents { column-gap: var(--space-3); border-radius: var(--radius-full); }
  .modern-intents > a:not(.modern-button) { padding-inline: var(--space-3); }
  /* The Spanish labels are longer and always take two rows: keep the rounded box, not the pill. */
  .modern-intents:lang(es) { border-radius: var(--radius-6); }
}

/* ---- Section heading: title left, lead right ---- */
.modern-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-4) var(--space-12); margin-bottom: var(--space-10); }
.modern-heading__lead { max-width: 22rem; color: var(--color-text-secondary); font-size: var(--text-sm); }

/* ---- Featured homes: asymmetrical grid, details panel floating on the photo ---- */
.modern-properties { display: grid; grid-template-columns: 1.05fr 1fr; grid-auto-rows: 17.5rem; gap: var(--space-5); }
.modern-property { position: relative; overflow: hidden; border-radius: var(--radius-5); background-color: var(--color-surface-sunken); }
.modern-property--lead { grid-row: span 2; }
/* Homes for rent: three equal cards (no lead card). */
.modern-properties--rentals { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 20rem; }
.modern-property__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.modern-property__photo--empty { display: grid; place-items: center; width: 100%; height: 100%; color: var(--color-text-secondary); }
/* On a card the details panel covers the lower half: the no-photo mark sits in the free space above it. */
.modern-property > .modern-property__photo--empty { align-items: start; padding-top: var(--space-16); }
.modern-tag {
  position: absolute;
  top: var(--space-5);
  left: var(--space-5);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
}
.modern-property__details {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  left: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-4);
  background-color: var(--color-surface);
}
:where(.modern-property__details) h3 { margin: var(--space-1) 0; font-size: var(--text-xl); font-weight: var(--font-weight-medium); }
.modern-property__price { color: var(--color-text-accent); font-weight: var(--font-weight-semibold); }
.modern-property__city, .modern-property__spec { color: var(--color-text-secondary); font-size: var(--text-xs); }
.modern-property__spec { margin-top: var(--space-1); }
.modern-circle {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-lg);
}
/* The address link covers its whole card (one link per card, the address is its name). */
.modern-card-link { color: var(--color-text); text-decoration: none; }
.modern-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.modern-card-link:hover { text-decoration: underline; }

/* ---- Team: alternating portrait + story ---- */
.modern-person { display: grid; grid-template-columns: 23.75rem minmax(0, 1fr); gap: var(--space-16); align-items: center; }
.modern-person + .modern-person { margin-top: var(--space-20); }
.modern-person--flip { grid-template-columns: minmax(0, 1fr) 23.75rem; }
.modern-person--flip .modern-person__photo { grid-column: 2; grid-row: 1; }
.modern-person--flip .modern-person__copy { grid-column: 1; grid-row: 1; }
.modern-person__photo { overflow: hidden; border-radius: var(--radius-5); background-color: var(--color-surface-sunken); }
.modern-person__photo img { display: block; width: 100%; height: 29.375rem; object-fit: cover; object-position: center top; }
.modern-person__copy { display: grid; gap: var(--space-4); }
.modern-person__copy > p:not(.modern-eyebrow):not(.modern-note):not(.modern-person__lead) { color: var(--color-text-secondary); }
:where(.modern-person__title) {
  font-family: var(--font-family-display);
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-display);
  letter-spacing: var(--tracking-heading);
}
.modern-person__lead { font-size: var(--text-lg); }
.modern-person__signature { display: grid; gap: var(--space-1); font-size: var(--text-md); }
.modern-person__name { font-weight: var(--font-weight-semibold); }
.modern-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-6) 0 0;
  border-top: var(--border-width) solid var(--color-border-subtle);
  list-style: none;
}
.modern-stats strong { display: block; font-family: var(--font-family-display); font-size: var(--text-3xl); font-weight: var(--font-weight-display); line-height: 1.2; }
.modern-stats span { color: var(--color-text-secondary); font-size: var(--text-xs); }
.modern-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.modern-chips li { padding: var(--space-1) var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-full); font-size: var(--text-sm); }
.modern-person__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }

/* ---- Recently sold ---- */
.modern-sold { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.modern-sold__card { position: relative; overflow: hidden; border-radius: var(--radius-5); background-color: var(--color-surface); }
.modern-sold__photo { position: relative; overflow: hidden; height: 13.75rem; background-color: var(--color-surface-sunken); }
.modern-sold__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.modern-sold__info { display: grid; gap: var(--space-2); padding: var(--space-5); color: var(--color-text-secondary); font-size: var(--text-xs); }
:where(.modern-sold__info) h3 { font-size: var(--text-xl); font-weight: var(--font-weight-medium); }
.modern-sold__price { color: var(--color-text-accent); font-size: var(--text-lg); font-weight: var(--font-weight-medium); }
.modern-sold__role { margin-top: var(--space-2); color: var(--color-text); letter-spacing: 0.08em; text-transform: uppercase; }

/* ---- Four paths ---- */
.modern-paths { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.modern-path {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-5);
}
.modern-path:hover { background-color: var(--color-bg); }
.modern-path__number {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-4);
  border: var(--border-width) solid var(--color-border-accent);
  border-radius: var(--radius-full);
  color: var(--color-text-accent);
  font-size: var(--text-sm);
}
:where(.modern-path) h3 { font-family: var(--font-family-display); font-size: var(--text-2xl); font-weight: var(--font-weight-display); }
.modern-path p { color: var(--color-text-secondary); font-size: var(--text-sm); }
.modern-path .modern-text-link { margin-top: auto; }

/* ---- Approach: Realtor side / investor side ---- */
.modern-approach__intro { max-width: 60rem; margin-bottom: var(--space-8); color: var(--color-text-secondary); font-size: var(--text-base); }
.modern-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
:where(.modern-sides) h3 { font-family: var(--font-family-display); font-size: var(--text-2xl); font-weight: var(--font-weight-display); }
.modern-sides ul { margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.modern-sides li { position: relative; padding: var(--space-3) 0 var(--space-3) var(--space-6); border-bottom: var(--border-width) solid var(--color-border-subtle); font-size: var(--text-sm); }
.modern-sides li::before { content: "↗"; position: absolute; left: 0; color: var(--color-text-accent); }

/* ---- Communities ---- */
.modern-areas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--space-8); margin: 0; padding: 0; list-style: none; }
.modern-areas a {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border-subtle);
  color: var(--color-text);
  font-size: var(--text-sm);
  text-decoration: none;
}
.modern-areas a:hover { color: var(--color-text-accent); text-decoration: underline; }
.modern-areas__note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-6); }

/* ---- Get started: copy + directory beside the real form ---- */
.modern-start__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-16); align-items: start; }
.modern-start__copy { display: grid; gap: var(--space-5); }
.modern-start__copy > p:not(.modern-eyebrow) { max-width: 32rem; color: var(--color-text-secondary); }
.modern-directory { display: grid; gap: var(--space-4); margin: 0; padding-left: var(--space-6); border-left: var(--border-width) solid var(--color-border-accent); }
.modern-directory dt { color: var(--color-text-accent); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; }
.modern-directory dd { margin: 0; font-size: var(--text-lg); overflow-wrap: anywhere; }
.modern-start__form { padding: var(--space-8); border-radius: var(--radius-5); background-color: var(--color-surface); box-shadow: var(--shadow-sm); }

/* ---- How it works ---- */
.modern-process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); margin: 0; padding: 0; list-style: none; }
.modern-process__number { display: block; color: var(--color-text-accent); font-family: var(--font-family-display); font-size: var(--text-4xl); }
:where(.modern-process) h3 { margin: var(--space-3) 0; font-size: var(--text-xl); font-weight: var(--font-weight-medium); }
.modern-process p { color: var(--color-text-secondary); font-size: var(--text-sm); }

/* ---- Closing band ---- */
.modern-closing { position: relative; overflow: hidden; padding-block: var(--section-space); background-color: var(--color-bg); color: var(--color-text); }
.modern-closing__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.modern-closing--photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background-color: var(--color-scrim); }
.modern-closing__layout { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-8); }
.modern-closing__layout h2 { max-width: 43.75rem; margin-bottom: var(--space-4); }
.modern-closing__actions { display: flex; flex-direction: column; align-items: end; gap: var(--space-3); }
.modern-closing__phone { color: var(--color-text); font-size: var(--text-lg); }

/* ---- Responsive ---- */
@media (max-width: 68.75em) {
  .modern-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modern-person { grid-template-columns: 18.75rem minmax(0, 1fr); gap: var(--space-10); }
  .modern-person--flip { grid-template-columns: minmax(0, 1fr) 18.75rem; }
  .modern-sold__photo { height: 11.25rem; }
  .modern-properties--rentals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modern-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .modern-start__layout { gap: var(--space-10); }
}
@media (max-width: 43.75em) {
  .modern-nav { margin-top: var(--space-2); padding-left: var(--space-4); }
  .modern-hero { min-height: 38rem; margin-inline: var(--space-2); padding: calc(var(--space-16) + var(--space-4)) var(--space-4) calc(var(--space-24) + var(--space-4)); }
  .modern-hero__caption { right: var(--space-5); bottom: var(--space-12); left: var(--space-5); }
  .modern-hero__note { display: none; }
  .modern-intents { margin-top: calc(-1 * var(--space-8)); padding: var(--space-5) var(--space-4); }
  .modern-intents__intro { width: 100%; margin-right: 0; text-align: center; }
  .modern-intents > a:not(.modern-button) { border-left: 0; padding-inline: var(--space-2); }
  .modern-intents .modern-button { width: 100%; }
  .modern-heading { display: block; margin-bottom: var(--space-8); }
  .modern-heading__lead { margin-top: var(--space-4); }
  .modern-properties { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 20rem; }
  .modern-property--lead { grid-row: auto; }
  .modern-property__details { right: var(--space-3); bottom: var(--space-3); left: var(--space-3); padding: var(--space-4); }
  .modern-person, .modern-person--flip { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .modern-person--flip .modern-person__photo, .modern-person--flip .modern-person__copy { grid-column: auto; grid-row: auto; }
  .modern-person__photo img { height: 25rem; object-position: center 20%; }
  .modern-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-5); }
  .modern-sold, .modern-paths, .modern-sides, .modern-process, .modern-start__layout { grid-template-columns: minmax(0, 1fr); }
  .modern-sold__photo { height: 15.625rem; }
  .modern-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-5); }
  .modern-directory { padding: var(--space-5) 0 0; border-top: var(--border-width) solid var(--color-border-accent); border-left: 0; }
  .modern-start__form { padding: var(--space-5); }
  .modern-closing__actions { align-items: stretch; width: 100%; }
}
@media (max-width: 22em) {
  .modern-areas { grid-template-columns: minmax(0, 1fr); }
  .modern-nav { gap: var(--space-2); padding-left: var(--space-3); }
}

/* ---- Floating "Get in touch" rail (right edge, from 80.125em) ----
   Shown only where --page-gutter has reached its 48px maximum (80em), so it sits beside the content
   column, never over it; the hero band gets the same inset on both sides while the rail is there.
   Label and icons sit on a solid surface, so they keep their contrast over photos and dark bands. */
.modern-rail {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 4;
  display: none;
  flex-direction: column;
  align-items: end;
  gap: var(--space-2);
  transform: translateY(-50%);
}
.modern-rail__label, .modern-rail__links {
  box-sizing: border-box;
  width: var(--control-height);
  border: var(--border-width) solid var(--color-border-subtle);
  border-right: 0;
  border-radius: var(--radius-2) 0 0 var(--radius-2);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.modern-rail__label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5) 0;
  color: var(--color-text);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-decoration: none;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.modern-rail__label:hover { background-color: var(--color-surface-hover); color: var(--color-text-accent); }
.modern-rail__links { display: flex; flex-direction: column; margin: 0; padding: var(--space-1) 0; list-style: none; }
.modern-rail__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--control-height);
  color: var(--color-text-secondary);
}
.modern-rail__icon svg { width: var(--icon-size-md); height: var(--icon-size-md); }
.modern-rail__icon:hover { color: var(--color-text-accent); }
/* Flush with the viewport edge: the focus ring is drawn inside, where it cannot be clipped. */
.modern-rail a:focus-visible { outline-offset: calc(-1 * var(--focus-ring-width)); }
@media (min-width: 80.125em) {
  .modern-rail { display: flex; }
  .landing-modern:has(.modern-rail) .modern-hero { margin-inline: calc(var(--control-height) + var(--space-3)); }
}