/* ==========================================================================
   GoneNext — Main Stylesheet
   Tokens → Reset → Layout → Header → Hero → Sections → Cards → Footer
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   All colours, spacing, and brand values live here as --gn-* variables.
   Shared brand values live here; semantic urgency remains separate.
   -------------------------------------------------------------------------- */
:root {
  /* Backgrounds */
  --gn-bg:              #071019;
  --gn-surface:         #0d1823;
  --gn-surface-raised:  #132333;

  /* Text */
  --gn-text:            #f4f8fb;
  --gn-text-muted:      #9aaec1;
  --gn-text-dim:        #64788d;

  /* Borders */
  --gn-border:          #203246;

  --gn-accent:          #e3b74f;
  --gn-accent-hover:    #f0cc71;
  --gn-accent-ink:      #211806;

  /* Status */
  --gn-urgent:          #ff6b61;
  --gn-success:         #49d59a;

  /* Radii */
  --gn-radius:          10px;
  --gn-radius-sm:       6px;
  --gn-radius-lg:       14px;

  /* Layout */
  --gn-max-w:           1240px;
  --gn-gutter:          clamp(1rem, 3.5vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   2. Reset / Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--gn-bg);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The header is sticky (54px). Reserve room above in-page targets so an anchor
     jump never lands with its heading hidden behind the header. */
  scroll-padding-top: 72px;
}

:target { scroll-margin-top: 72px; }

body {
  margin: 0;
  background: var(--gn-bg);
  color: var(--gn-text);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  line-height: 1.2;
  color: var(--gn-text);
}

p { margin: 0; }

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

a { color: inherit; text-decoration: none; }

::selection {
  background: var(--gn-accent);
  color: var(--gn-accent-ink);
}

::-moz-selection {
  background: var(--gn-accent);
  color: var(--gn-accent-ink);
}

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

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

/* Accessible focus ring */
:focus-visible {
  outline: 2px solid var(--gn-accent);
  outline-offset: 2px;
  border-radius: var(--gn-radius-sm);
}

/* Screen-reader only */
.sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* --------------------------------------------------------------------------
   3. WordPress block-theme resets
   -------------------------------------------------------------------------- */
.wp-site-blocks {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-block-start: 0 !important;
  padding-block-end: 0 !important;
}

.gn-main { flex: 1 0 auto; }

.wp-block-template-part {
  display: block;
}

:root :where(.wp-block-template-part.has-background) {
  padding: 0;
  margin: 0;
}

/* --------------------------------------------------------------------------
   4. Layout Utilities
   -------------------------------------------------------------------------- */
.gn-container {
  width: 100%;
  max-width: var(--gn-max-w);
  margin-inline: auto;
  padding-inline: var(--gn-gutter);
}

.gn-section {
  padding-block: 2.25rem;
}

.gn-section + .gn-section {
  border-top: 1px solid var(--gn-border);
}

.gn-empty-state {
  grid-column: 1 / -1;
  color: var(--gn-muted);
  font-size: 0.875rem;
  padding: 2rem 0;
}

.gn-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.gn-section__head--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.gn-section__title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.gn-section__subtitle {
  font-size: 0.75rem;
  color: var(--gn-text-muted);
}

.gn-section__cta {
  font-size: 0.75rem;
  color: var(--gn-text-muted);
  white-space: nowrap;
  transition: color 0.15s;
}

.gn-section__cta:hover { color: var(--gn-text); }

.gn-section__title--star::before {
  content: "★ ";
  color: var(--gn-accent);
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.gn-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--gn-bg);
  border-bottom: 1px solid var(--gn-border);
}

@media (min-width: 601px) {
  body.admin-bar .gn-header { top: 32px; }
}
@media (max-width: 600px) {
  body.admin-bar .gn-header { top: 46px; }
}

.gn-header__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 54px;
  max-width: var(--gn-max-w);
  margin-inline: auto;
  padding-inline: var(--gn-gutter);
}

.gn-header__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}

.gn-header__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.gn-logo__text {
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  display: inline-flex;
  line-height: 1;
}

.gn-logo__gone {
  color: #ffffff;
}

.gn-logo__next {
  color: var(--gn-accent);
}

.gn-header__nav { flex: 1; }

/* --------------------------------------------------------------------------
   5b. Site navigation — real destinations, not homepage anchors
   --------------------------------------------------------------------------
   Two disclosure dropdowns (<details>), so hover is never required and the
   keyboard gets the browser's native disclosure behaviour for free. Every rule
   is scoped under .gn-header so the footer, the mobile menu's own <details> for
   the FAQ, and anything else using details/summary stay untouched. */
.gn-nav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gn-nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.gn-nav__link,
.gn-nav__summary {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.4375rem 0.6875rem;
  border-radius: var(--gn-radius-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  color: var(--gn-text-muted);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.gn-nav__link:hover,
.gn-nav__summary:hover {
  color: var(--gn-text);
  background: var(--gn-surface);
}

/* Remove the native disclosure triangle — the caret span replaces it. */
.gn-nav__summary { list-style: none; }
.gn-nav__summary::-webkit-details-marker { display: none; }
.gn-nav__summary::marker { content: ''; }

/* Caret drawn in CSS so it inherits the link colour and needs no icon request. */
.gn-nav__caret {
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.7;
  transition: transform 0.15s;
}

.gn-nav__menu[open] > .gn-nav__summary .gn-nav__caret {
  transform: rotate(180deg);
}

/* Active section: the top-level link is marked, never the whole bar. */
.gn-nav__link--active {
  color: var(--gn-text);
  background: var(--gn-surface);
}

/* The section containing the current page keeps its label lit even when the
   panel is shut, so the header still answers "where am I?". */
.gn-nav__item--active > .gn-nav__menu > .gn-nav__summary,
.gn-nav__item--has-menu.gn-nav__item--active > .gn-nav__summary {
  color: var(--gn-text);
}

.gn-nav__menu[open] > .gn-nav__summary {
  color: var(--gn-text);
  background: var(--gn-surface);
}

/* --- Dropdown panel ------------------------------------------------------ */
.gn-nav__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 200;
  min-width: 190px;
  padding: 0.375rem;
  background: var(--gn-surface);
  border: 1px solid var(--gn-border);
  border-radius: var(--gn-radius);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

/* A hairline bridge so the pointer can travel from the summary into the panel
   without crossing a gap that would close the menu. */
.gn-nav__panel::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 0;
  right: 0;
  height: 7px;
}

.gn-nav__panel-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gn-nav__panel-list a {
  display: block;
  padding: 0.4375rem 0.6875rem;
  border-radius: var(--gn-radius-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gn-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}

.gn-nav__panel-list a:hover {
  background: var(--gn-surface-raised);
  color: var(--gn-text);
}

/* The service/window the reader is actually on. */
.gn-nav__panel-list a.gn-nav__panel-link--active {
  color: var(--gn-accent);
  background: var(--gn-surface-raised);
}

.gn-nav__panel-sep {
  height: 1px;
  margin: 0.3125rem 0.375rem;
  background: var(--gn-border);
}

/* --- Search: icon plus label, kept compact ------------------------------ */
.gn-nav__item--icon { margin-left: auto; }

.gn-nav__icon-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.4375rem 0.6875rem;
  border-radius: var(--gn-radius-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gn-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}

.gn-nav__icon-link:hover {
  color: var(--gn-text);
  background: var(--gn-surface);
}

.gn-nav__icon-link--active {
  color: var(--gn-text);
  background: var(--gn-surface);
}

/* --- Visible keyboard focus --------------------------------------------- */
.gn-nav__link:focus-visible,
.gn-nav__summary:focus-visible,
.gn-nav__icon-link:focus-visible,
.gn-nav__panel-list a:focus-visible,
.gn-nav__mobile-link:focus-visible,
.gn-nav__group-summary:focus-visible,
.gn-nav__group-list a:focus-visible,
.gn-nav__burger:focus-visible {
  outline: 2px solid var(--gn-accent);
  outline-offset: 2px;
}

/* Between the tablet and compact-desktop range the labels are too tight, so the
   nav drops the word "Search" and keeps the icon rather than crushing items. */
@media (min-width: 768px) and (max-width: 1099px) {
  .gn-header__inner { gap: 1.25rem; }
  .gn-nav__list { gap: 0; }
  .gn-nav__link,
  .gn-nav__summary { padding-inline: 0.5rem; }
  .gn-nav__icon-label { display: none; }
}

/* Mobile nav — collapsible groups, native <details>, zero JS */
.gn-nav__mobile {
  display: none;
  position: relative;
  margin-left: auto;
}

.gn-nav__burger {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--gn-radius-sm);
  color: var(--gn-text);
  cursor: pointer;
  transition: background 0.15s;
}

.gn-nav__burger::-webkit-details-marker { display: none; }
.gn-nav__burger:hover { background: var(--gn-surface); }

.gn-nav__dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--gn-surface);
  border: 1px solid var(--gn-border);
  border-radius: var(--gn-radius);
  padding: 0.5rem;
  min-width: 220px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Collapsible group header inside the mobile menu. */
.gn-nav__group { border-bottom: 1px solid var(--gn-border); }
.gn-nav__group:last-of-type { border-bottom: 0; }

.gn-nav__group-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gn-text);
  cursor: pointer;
  list-style: none;
  border-radius: var(--gn-radius-sm);
  transition: background 0.1s;
}

.gn-nav__group-summary::-webkit-details-marker { display: none; }
.gn-nav__group-summary::marker { content: ''; }
.gn-nav__group-summary:hover { background: var(--gn-surface-raised); }

.gn-nav__group[open] > .gn-nav__group-summary .gn-nav__caret {
  transform: rotate(180deg);
}

.gn-nav__group-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0 0 0.375rem;
  padding: 0 0 0 0.5rem;
  list-style: none;
}

.gn-nav__group-list a {
  display: block;
  padding: 0.4375rem 0.75rem;
  border-radius: var(--gn-radius-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gn-text-muted);
  text-decoration: none;
  transition: background 0.1s, color 0.1s;
}

.gn-nav__group-list a:hover {
  background: var(--gn-surface-raised);
  color: var(--gn-text);
}

.gn-nav__group-list a[aria-current="page"] {
  color: var(--gn-accent);
}

/* Top-level mobile links that are destinations rather than groups. */
.gn-nav__mobile-link {
  display: block;
  padding: 0.625rem 0.75rem;
  border-radius: var(--gn-radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gn-text);
  text-decoration: none;
  transition: background 0.1s;
}

.gn-nav__mobile-link:hover { background: var(--gn-surface-raised); }
.gn-nav__mobile-link--active { color: var(--gn-accent); }

@media (max-width: 767px) {
  .gn-header__nav { display: none; }
  .gn-nav__mobile { display: block; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.gn-hero {
  padding-block: 2.75rem 2rem;
  border-bottom: 1px solid var(--gn-border);
}

.gn-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 99px;
  background: rgba(232, 103, 58, 0.1);
  border: 1px solid rgba(232, 103, 58, 0.28);
  margin-bottom: 0.875rem;
}

.gn-hero__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gn-accent);
}

.gn-hero__eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gn-accent);
}

.gn-hero__h1 {
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 0.75rem;
  max-width: 22ch;
}

.gn-hero__h1 .gn-muted { color: var(--gn-text-muted); }

.gn-hero__sub {
  font-size: 0.9375rem;
  color: var(--gn-text-muted);
  line-height: 1.6;
  max-width: 52ch;
  margin-bottom: 1.5rem;
}

/* Hero search — clean, input with left search icon */
.gn-search {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  max-width: 440px;
  background: var(--gn-surface);
  border: 1px solid var(--gn-border);
  border-radius: var(--gn-radius);
  padding: 0.625rem 0.875rem;
  transition: border-color 0.15s;
}

.gn-search:focus-within {
  border-color: var(--gn-text-muted);
}

.gn-search__icon {
  color: var(--gn-text-dim);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.gn-search__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  font-size: 0.875rem;
  color: var(--gn-text);
  font-family: inherit;
}

.gn-search__input::placeholder { color: var(--gn-text-muted); }

.gn-search__input[type="search"]::-webkit-search-decoration,
.gn-search__input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* --------------------------------------------------------------------------
   7. Leaving Soon — Head layout
   -------------------------------------------------------------------------- */
.gn-leaving-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.gn-leaving-head__left {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.gn-leaving-head__title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Informational text never uses --gn-text-dim (2.5:1 on the dark surfaces, below
   WCAG AA). --gn-text-muted clears AA at 5.4–5.7:1. Dim stays for decorative
   marks only: the search icon, the facts separator and the FAQ chevron. */
.gn-leaving-head__count {
  font-size: 0.75rem;
  color: var(--gn-text-muted);
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   8. Time Control — Segmented pill container (zero JS)
   -------------------------------------------------------------------------- */
.gn-time-control {
  display: inline-flex;
  align-items: center;
  background: var(--gn-surface);
  border: 1px solid var(--gn-border);
  border-radius: 99px;
  padding: 3px;
  gap: 2px;
}

.gn-time-control input[type="radio"],
.gn-svc-filter input[type="radio"] {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Chips are links on the homepage (they set the Leaving Soon filter state),
   labels inside the radio-based segmented control, and plain spans where a
   browse date page marks the window it is already showing. All share one look. */
.gn-time-control label,
.gn-time-control a,
.gn-time-control span {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 99px;
  color: var(--gn-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}

.gn-time-control label:hover,
.gn-time-control a:hover {
  color: var(--gn-text);
}

/* Active chip — the checked radio label, the link chip for the time window
   currently filtering the homepage preview, or the marked window on a browse
   date page. All share one look. */
.gn-time-control input[type="radio"]:checked + label,
.gn-time-control a.is-active,
.gn-time-control span.is-active {
  background: #ffffff;
  color: #0d0d0f;
  font-weight: 600;
}

.gn-time-control input[type="radio"]:focus-visible + label,
.gn-time-control a:focus-visible {
  outline: 2px solid var(--gn-accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   9. Service Filter Pills
   -------------------------------------------------------------------------- */
.gn-svc-filter {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 0.75rem;
  margin-bottom: 1.25rem;
}

.gn-svc-filter label,
.gn-svc-filter a {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 99px;
  border: 1px solid var(--gn-border);
  background: var(--gn-surface);
  color: var(--gn-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}

.gn-svc-filter label:hover,
.gn-svc-filter a:hover {
  border-color: var(--gn-text-muted);
  color: var(--gn-text);
}

/* Active chip — the checked radio label, or the link chip for the service
   currently filtering the homepage preview. Both share one look. */
.gn-svc-filter input[type="radio"]:checked + label,
.gn-svc-filter a.is-active {
  background: var(--gn-surface-raised);
  border-color: var(--gn-text-muted);
  color: #ffffff;
}

.gn-svc-filter input[type="radio"]:focus-visible + label,
.gn-svc-filter a:focus-visible {
  outline: 2px solid var(--gn-accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   9b. Browse filter & sort bar (/leaving/ and service pages)
   Reuses the existing surface, border and pill-button language.
   -------------------------------------------------------------------------- */
.gn-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding: 0.75rem 0.875rem;
  background: var(--gn-surface);
  border: 1px solid var(--gn-border);
  border-radius: var(--gn-radius);
}

.gn-filter-bar__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.gn-filter-bar__field label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gn-text-muted);
}

.gn-filter-bar__field select {
  background: var(--gn-bg);
  border: 1px solid var(--gn-border);
  border-radius: var(--gn-radius-sm);
  color: var(--gn-text);
  font-family: inherit;
  font-size: 0.75rem;
  padding: 6px 10px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.gn-filter-bar__field select:hover { border-color: var(--gn-text-muted); }

.gn-filter-bar__field select:focus-visible {
  outline: 2px solid var(--gn-accent);
  outline-offset: 2px;
}

.gn-filter-bar__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* Always hugs the right edge, on every page and at every width, so the primary
     action never ends up stranded left of an empty gap. */
  margin-left: auto;
}

/* The Apply button is the bar's primary action, so it uses the same raised
   surface + brighter border the site already uses for prominent controls instead
   of blending into the bar's own background. Scoped with the bar so it outranks
   the shared .gn-btn-pill base that is declared later in the file. */
.gn-filter-bar .gn-filter-bar__apply {
  background: var(--gn-surface-raised);
  border-color: var(--gn-text-muted);
}

.gn-filter-bar__reset {
  font-size: 0.75rem;
  color: var(--gn-text-muted);
  transition: color 0.15s;
}

.gn-filter-bar__reset:hover { color: var(--gn-text); }

@media (max-width: 599px) {
  .gn-filter-bar__field { flex: 1 1 8rem; }
  .gn-filter-bar__field select { width: 100%; }
}

/* --------------------------------------------------------------------------
   10. Card Grid / Rows
   -------------------------------------------------------------------------- */
.gn-row {
  display: grid;
  gap: 14px;
}

/* Desktop layout matching reference */
@media (min-width: 1024px) {
  .gn-row--grid6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .gn-row--grid5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Tablet / mobile scrolling layout */
@media (max-width: 1023px) {
  .gn-row {
    grid-auto-flow: column;
    grid-auto-columns: 160px;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--gn-border) transparent;
  }
  .gn-row::-webkit-scrollbar { height: 4px; }
  .gn-row::-webkit-scrollbar-thumb {
    background: var(--gn-border);
    border-radius: 2px;
  }
}

@media (max-width: 600px) {
  .gn-row {
    grid-auto-columns: 140px;
    gap: 10px;
  }
}

/* --------------------------------------------------------------------------
   10b. Browse-page catalogue grid
   Declared here on purpose: it must come after the shared .gn-row rules above
   to win, because both blocks have comparable specificity and the shared rail
   rules would otherwise re-impose the horizontal carousel below 1024px.

   The homepage shows a short *preview* (5–6 cards) and scrolls it sideways,
   which is a good rail. A browse page is the full catalogue — 24 results on one
   sideways-scrolling row is unusable, so browse pages stay a real grid at every
   width. Scoped to body.gn-browse so homepage, search and title pages are
   untouched.
   -------------------------------------------------------------------------- */
.gn-browse .gn-row {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  overflow-x: visible;
  scroll-snap-type: none;
  padding-bottom: 0;
}

/* Mobile-first paginated catalogue ramp. Every breakpoint divides the shared
   24-result page size cleanly, so only a genuinely shorter final page can end
   with an incomplete row. */
.gn-browse .gn-row.gn-row--grid6,
.gn-browse .gn-row.gn-row--grid5 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 0.75rem;
}

@media (min-width: 520px) {
  .gn-browse .gn-row.gn-row--grid6,
  .gn-browse .gn-row.gn-row--grid5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.125rem 0.875rem;
  }
}

@media (min-width: 768px) {
  .gn-browse .gn-row.gn-row--grid6,
  .gn-browse .gn-row.gn-row--grid5 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem 1rem;
  }
}

@media (min-width: 1024px) {
  .gn-browse .gn-row.gn-row--grid6,
  .gn-browse .gn-row.gn-row--grid5 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   11. Poster Card Component
   -------------------------------------------------------------------------- */
.gn-card {
  scroll-snap-align: start;
  min-width: 0;
}

.gn-card__poster-wrap {
  position: relative;
  border-radius: var(--gn-radius);
  overflow: hidden;
  background: var(--gn-surface);
}

.gn-card__poster {
  aspect-ratio: 2 / 3;
  width: 100%;
  display: block;
}

.gn-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Rating chip — top-left */
.gn-card__rating {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--gn-radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.08);
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 3px;
  pointer-events: none;
}

/* Card metadata */
.gn-card__meta {
  margin-top: 6px;
}

.gn-card__meta-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
}

.gn-card__title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gn-text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

.gn-card__leaving {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--gn-urgent);
  white-space: nowrap;
  flex-shrink: 0;
}

.gn-card__leaving--past {
  font-size: 0.6875rem;
  color: var(--gn-text-muted);
  margin-top: 2px;
}

.gn-card__info {
  font-size: 0.6875rem;
  color: var(--gn-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* Poster / title links — the card links to its permanent title page */
.gn-card__poster-link {
  display: block;
  color: inherit;
}

.gn-card__title a {
  color: inherit;
}

.gn-card__title a:hover {
  text-decoration: underline;
}

/* Where-to-watch chips */
.gn-card__where {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.gn-where-chip {
  font-size: 0.625rem;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: var(--gn-radius-sm);
  background: rgba(227, 183, 79, 0.12);
  color: var(--gn-accent-hover);
  border: 1px solid rgba(227, 183, 79, 0.25);
  line-height: 1.3;
}

/* Centered pill CTA below Leaving Soon */
.gn-section__more {
  text-align: center;
  margin-top: 1.5rem;
}

.gn-btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 22px;
  border-radius: 99px;
  border: 1px solid var(--gn-border);
  background: var(--gn-surface);
  color: var(--gn-text);
  font-size: 0.75rem;
  font-weight: 500;
  transition: all 0.15s;
}

.gn-btn-pill:hover {
  border-color: var(--gn-text-muted);
  background: var(--gn-surface-raised);
}

/* --------------------------------------------------------------------------
   11a-browse. Browse pages (/leaving/… and /leaving-soon/…)
   Every rule here is scoped to body.gn-browse so the homepage rails, the
   permanent title pages and search results keep their existing composition.

   The catalogue pages need the opposite treatment to the homepage: the
   homepage shows a short *preview* of 5–6 cards and scrolls them sideways as a
   rail, while a browse page is the full catalogue. Reusing the rail below
   1024px made 24 results into a one-row horizontal scroller (page height ~640px,
   most cards unreachable without dragging). These pages therefore opt out of
   the rail entirely and stay a real grid at every width.
   -------------------------------------------------------------------------- */

/* --- Page width --------------------------------------------------------- */
/* 1280px (not 1200px) buys a 7th catalogue column on a 1440px desktop while
   staying narrow enough that card text keeps a comfortable measure. --gn-max-w
   is left alone because the homepage and title page are tuned to 1200px. */
.gn-browse {
  --gn-browse-max-w: 1280px;
}

.gn-browse .gn-container {
  max-width: var(--gn-browse-max-w);
}

/* --- 11a-i. Compact browse header --------------------------------------- */
/* A catalogue header only has to establish place → catalogue → count → next
   step, so it sits much tighter than the homepage hero. The count is promoted
   out of the results section and into the header, where it answers "how many?"
   before the user reaches the controls. */
.gn-browse .gn-hero__badge {
  margin-bottom: 0.625rem;
}

.gn-browse .gn-hero__h1 {
  font-size: clamp(1.75rem, 2.6vw, 2.375rem);
  margin-bottom: 0.5rem;
  max-width: 28ch;
}

.gn-browse .gn-hero__sub {
  max-width: 68ch;
  margin-bottom: 0;
}

/* Browse totals introduce the listings below; they are part of the results
   heading, not hero copy or a control. */
.gn-browse .gn-browse-count {
  display: block;
  margin: 0 0 0.85rem;
  color: var(--gn-text);
  font-size: 1.125rem;
  font-weight: 650;
  line-height: 1.4;
}

/* --- 11a-ii. Results section: real grid, never a rail ------------------- */
/* See the end of this section for the column ramp — it is declared after the
   shared .gn-row rules (section 10) so source order resolves in its favour. */

/* --- 11a-iii. Card text on a browse grid -------------------------------- */
/* The shared card truncates the title and pins the departure date beside it on
   one line. In a dense catalogue grid that leaves almost nothing of a long
   title, so on browse pages the title gets two lines and the date drops
   underneath — the hierarchy the reader actually wants when scanning. */
.gn-browse .gn-card__meta-top {
  display: block;
}

.gn-browse .gn-card__title {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

.gn-browse .gn-card__leaving {
  display: block;
  margin-top: 3px;
  font-size: 0.6875rem;
  letter-spacing: 0.01em;
}

.gn-browse .gn-card__info {
  margin-top: 2px;
}

.gn-browse .gn-card__rating {
  top: 5px;
  left: 5px;
  font-size: 0.625rem;
  padding: 2px 5px;
}

/* --- 11a-iii-b. Recently Left cards ------------------------------------- */
/* Same card as every other catalogue grid, plus two extra facts. The removal
   line states a past event; the availability line states the present. They are
   visually separated (colour, weight, spacing) so a reader can never mistake
   today's availability for evidence about the removal. */
.gn-browse .gn-card--left .gn-card__left {
  display: block;
  margin-top: 4px;
  font-size: 0.6875rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--gn-accent);
  letter-spacing: 0.01em;
}

.gn-browse .gn-card__avail {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.6875rem;
  line-height: 1.3;
  color: var(--gn-text-dim);
}

/* Only the "watch it now" case earns emphasis; a purchase-only or absent offer
   is stated plainly rather than dressed up. */
.gn-browse .gn-card__avail--streaming {
  color: var(--gn-text);
}

.gn-browse .gn-card__avail--none {
  color: var(--gn-text-muted);
}

/* --- 11a-iv. Filter bar ------------------------------------------------- */
/* The no-JS fallback keeps the Apply button, but the selects submit on change
   (see leaving-service.php) so the common path is one interaction. The bar is
   deliberately flush with the grid below it — full container width, no
   horizontal inset — so it reads as the control strip for the results rather
   than a card floating above a separate region. */
.gn-browse .gn-filter-bar {
  margin-bottom: 1.25rem;
  padding: 0.75rem 0.875rem;
  gap: 0.625rem 0.75rem;
  align-items: flex-end;
}

.gn-browse .gn-filter-bar__field {
  flex: 0 1 auto;
  min-width: 0;
}

.gn-browse .gn-filter-bar__field select {
  padding: 6px 26px 6px 10px;
  min-width: 9rem;
}

.gn-browse .gn-filter-bar__field--service select {
  min-width: 11rem;
}

/* Progressively hand the actions row its own line rather than letting the
   selects squeeze down to unreadable widths. */
@media (max-width: 599px) {
  .gn-browse .gn-filter-bar {
    padding: 0.75rem;
  }
  .gn-browse .gn-filter-bar__field {
    flex: 1 1 100%;
  }
  .gn-browse .gn-filter-bar__field select {
    width: 100%;
    min-width: 0;
  }
  .gn-browse .gn-filter-bar__actions {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }
  .gn-browse .gn-filter-bar__apply {
    flex: 1 1 auto;
  }
}

/* --- 11a-v. Results meta line + pagination ------------------------------ */
/* The "sorted by… / 24 per page" note belongs with the grid, not with the
   count (which now lives in the header). */
.gn-browse .gn-browse-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-bottom: 0.875rem;
  font-size: 0.75rem;
  color: var(--gn-text-muted);
}

.gn-browse .gn-browse-meta__sort {
  color: var(--gn-text-muted);
}

.gn-browse .gn-browse-meta__per {
  white-space: nowrap;
}

/* Pagination sits closer to the last row so it reads as the grid's own
   footer rather than an orphan block in empty space. */
.gn-browse .gn-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.gn-browse .gn-pagination .gn-btn-pill {
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--gn-text-muted);
  font-size: 0.8125rem;
  font-weight: 650;
}

.gn-browse .gn-pagination a.gn-btn-pill:hover {
  background: var(--gn-surface-raised);
  color: var(--gn-text);
}

.gn-browse .gn-pagination .gn-pagination__current {
  background: var(--gn-accent);
  color: var(--gn-accent-ink);
}

.gn-browse .gn-pagination .gn-pagination__edge {
  display: none;
}

.gn-browse .gn-pagination__info {
  margin-top: 0.5rem;
  color: var(--gn-text-dim);
}

@media (max-width: 599px) {
  .gn-browse .gn-pagination {
    gap: 0.375rem;
  }
  .gn-browse .gn-pagination .gn-btn-pill {
    min-width: 2.125rem;
    min-height: 2.125rem;
    padding: 0.4rem 0.5rem;
  }
}

/* --- 11a-vi. Empty state ------------------------------------------------ */
/* A service with nothing leaving should be a short, deliberate panel with a
   way onwards — not a one-line apology under a half-height header followed by
   a mostly empty page. */
.gn-empty-panel {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 1.25rem 1.375rem;
  background: var(--gn-surface);
  border: 1px solid var(--gn-border);
  border-radius: var(--gn-radius);
}

.gn-empty-panel__body {
  min-width: 0;
  flex: 1 1 20rem;
}

.gn-empty-panel__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gn-text);
}

.gn-empty-panel__text {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--gn-text-muted);
  max-width: 62ch;
}

.gn-empty-panel__text a {
  color: var(--gn-text);
  text-decoration: underline;
}

.gn-empty-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  /* Must be allowed to shrink: a fixed flex-basis here overflows the panel on
     narrow viewports (three pill buttons never fit on a 390px screen). */
  flex: 1 1 auto;
  min-width: 0;
}

/* Below the two-column threshold the panel stacks and every action goes
   full-width, so nothing can push past the container edge. */
@media (max-width: 599px) {
  .gn-empty-panel {
    padding: 1rem;
  }
  .gn-empty-panel__body {
    flex: 1 1 100%;
  }
  .gn-empty-panel__actions {
    flex: 1 1 100%;
    flex-direction: column;
  }
  .gn-empty-panel__actions .gn-btn-pill {
    width: 100%;
    text-align: center;
  }
}

/* --- 11a-vii. Date-window switcher -------------------------------------- */
/* Lateral navigation between the three date windows, directly under the header
   so it is not buried at the foot of the page. The control itself is the
   existing segmented .gn-time-control, so it looks like the homepage's. */
.gn-window-switch {
  padding-top: 1.25rem;
}

/* --- 11a-viii. Contextual navigation ------------------------------------ */
/* A short row of links that continues the current browsing task. This replaces
   the previous tile grid, which listed every service and every date window on
   every page and mostly repeated the header, the footer and the Service filter.
   Counts are kept only where they say whether a link is worth following. */
.gn-ctx-nav {
  padding-block: 1.5rem 2rem;
  border-top: 1px solid var(--gn-border);
}

.gn-ctx-nav__heading {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gn-text-muted);
  margin-bottom: 0.625rem;
}

.gn-ctx-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gn-ctx-nav__item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  padding: 5px 12px;
  border: 1px solid var(--gn-border);
  border-radius: 99px;
  background: var(--gn-surface);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gn-text-muted);
  transition: color 0.15s, border-color 0.15s;
}

.gn-ctx-nav__item:hover {
  color: var(--gn-text);
  border-color: var(--gn-text-muted);
}

.gn-ctx-nav__count {
  font-size: 0.6875rem;
  color: var(--gn-text-dim);
}

/* --- 11a-ix. Explanation + small FAQ ------------------------------------ */
/* Short, factual copy about GoneNext's own data. Narrow measure and small type:
   it supports the catalogue, it is not the page's subject. */
.gn-browse-explain__body {
  max-width: 68ch;
  margin-top: 0.625rem;
}

.gn-browse-explain__body p {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--gn-text-muted);
}

.gn-browse-explain__body p + p {
  margin-top: 0.625rem;
}

.gn-browse-explain__link {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
}

.gn-browse-explain__link a {
  color: var(--gn-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gn-browse-explain__link a:hover {
  color: var(--gn-accent);
}

/* Two contextual links can share the line (the guide plus Data Sources), so
   they need a gap the inline flow does not give them. */
.gn-browse-explain__link a + a {
  margin-left: 1.25rem;
}

/* --------------------------------------------------------------------------
   11b. Pagination (browseable departure pages)
   -------------------------------------------------------------------------- */
.gn-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
}

.gn-pagination__current {
  border-color: var(--gn-text-muted);
  background: var(--gn-surface-raised);
  font-weight: 700;
}

.gn-pagination__edge {
  opacity: 0.4;
}

.gn-pagination__info {
  margin-top: 0.625rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--gn-text-muted);
}

/* Breadcrumb-style eyebrow links used on departure pages */
.gn-section__subtitle a:hover {
  color: var(--gn-text);
}

/* --------------------------------------------------------------------------
   11c. Permanent title page
   Composition: breadcrumb block → hero (poster | main | status) → Where to
   watch now → Streaming status & history → compact Explore chips.
   Everything below is scoped to .gn-title-page except where noted, so it
   never leaks into the homepage, browse or search templates.
   -------------------------------------------------------------------------- */

/* Breadcrumb sits above the hero with its own breathing room, clear of the
   sticky header and clear of the poster below it. */
.gn-title-crumb {
  padding-block: 1.25rem 0;
}

.gn-title-crumb .gn-section__subtitle {
  margin: 0;
}

/* Hero top padding is reduced on the title page only: the breadcrumb block
   above already carries the header→content gap, so the two don't stack into
   an oversized void before the poster. */
.gn-title-page .gn-hero {
  padding-block: 1.25rem 2rem;
}

.gn-title {
  display: grid;
  grid-template-columns: 96px 1fr;
  grid-template-areas: "poster main" "status status";
  gap: 1rem 0.875rem;
  align-items: start;
}

@media (min-width: 560px) {
  .gn-title {
    grid-template-columns: 150px 1fr;
    gap: 1.25rem 1.5rem;
  }
}

@media (min-width: 700px) {
  .gn-title {
    grid-template-columns: 180px 1fr;
    gap: 1.5rem 2rem;
  }
}

/* Large desktop: a genuine three-column composition — poster, main content and
   the status surface side by side, instead of poster + one wide empty column.
   960px (not 1024px) so the layout still applies at a nominal 1024px window —
   scrollbar width otherwise shrinks the usable viewport just under 1024px. */
@media (min-width: 960px) {
  .gn-title {
    grid-template-columns: 220px 1fr 280px;
    grid-template-areas: "poster main status";
    gap: 1.75rem;
  }
}

/* Poster treatment matches the card poster, deliberately kept modest so it
   never dominates the composition or the mobile viewport. */
.gn-title__poster {
  grid-area: poster;
  aspect-ratio: 2 / 3;
  width: 100%;
  border-radius: var(--gn-radius-lg);
  overflow: hidden;
  background: var(--gn-surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.gn-title__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gn-title__main {
  grid-area: main;
  min-width: 0;
}

.gn-title__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  color: var(--gn-text-muted);
}

.gn-title__facts span:not(:last-child)::after {
  content: "·";
  margin-left: 10px;
  color: var(--gn-text-dim);
}

.gn-title__facts-primary { display: contents; }
.gn-title__facts .gn-title__facts-primary::after { content: none; }
.gn-title__facts-separator { display: none; }

.gn-title__genres {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 0.75rem;
}

/* Synopsis stays part of the main content column — same width as the title —
   so it reads as one block instead of a floating unrelated sentence. */
.gn-title__overview {
  margin-top: 1rem;
  max-width: 62ch;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--gn-text-muted);
}

/* Primary departure status — a compact, self-contained surface rather than a
   thin full-width text line. Occupies the third hero column on desktop, sits
   under poster+main on medium/mobile widths (see .gn-title grid areas). */
.gn-status-card {
  grid-area: status;
  background: var(--gn-surface);
  border: 1px solid var(--gn-border);
  border-left: 3px solid var(--gn-border);
  border-radius: var(--gn-radius);
  padding: 0.875rem 1rem;
}

.gn-status-card--leaving {
  border-left-color: var(--gn-urgent);
}

.gn-status-card--available {
  border-left-color: var(--gn-success);
}

.gn-status-card__eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gn-text-muted);
  margin-bottom: 0.375rem;
}

.gn-status-card__headline {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gn-text);
  line-height: 1.3;
}

.gn-status-card__headline--muted {
  color: var(--gn-text-muted);
  font-weight: 600;
}

.gn-status-card__sub {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--gn-text-muted);
  line-height: 1.5;
}

/* One factual sentence under the status. The headline and the date above have
   already answered "is it leaving?" / "did it leave?", so this states the
   consequence plainly instead of repeating them as a question. */
.gn-status-card__why {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--gn-text-dim);
}

.gn-status-card__badge {
  display: inline-flex;
  margin-top: 0.625rem;
  padding: 3px 10px;
  border-radius: 99px;
  background: rgba(232, 103, 58, 0.12);
  color: var(--gn-urgent);
  font-size: 0.75rem;
  font-weight: 600;
}

.gn-status-card__more {
  margin-top: 0.625rem;
  font-size: 0.75rem;
}

.gn-status-card__more a {
  color: var(--gn-text-muted);
  text-decoration: underline;
}

.gn-status-card__more a:hover {
  color: var(--gn-text);
}

/* Compact empty-state line — replaces a full empty-state block's worth of
   padding when a section genuinely has nothing to show. */
.gn-empty-compact {
  font-size: 0.8125rem;
  color: var(--gn-text-muted);
  padding: 0.5rem 0;
}

/* Where to watch now — compact scannable rows per group. Subscription/free/
   add-on rows are visually promoted; rent/buy stay present but secondary. */
.gn-watch {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.gn-watch__group-title {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gn-text-muted);
  margin-bottom: 0.5rem;
}

/* The departing service leads the section, so its group label carries the same
   urgency colour the status card uses. */
.gn-watch__group--leaving .gn-watch__group-title {
  color: var(--gn-urgent);
}

.gn-watch__rows {
  display: grid;
  gap: 6px;
}

.gn-watch__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 8px 12px;
  border-radius: var(--gn-radius-sm);
  background: var(--gn-surface);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.gn-watch__row--primary {
  background: var(--gn-surface-raised);
  border-color: rgba(255, 255, 255, 0.08);
}

.gn-watch__row-left {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.gn-watch__service {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gn-text);
  white-space: nowrap;
}

.gn-watch__row--primary .gn-watch__service {
  font-weight: 700;
}

.gn-watch__quality {
  font-size: 0.6875rem;
  color: var(--gn-text-muted);
}

.gn-watch__row-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.gn-watch__price {
  font-size: 0.75rem;
  color: var(--gn-text-muted);
}

/* Same row shape as an availability offer, but the right-hand value is a
   last-watch date rather than a price — so it is not styled like one. */
.gn-watch__note {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gn-urgent);
}

.gn-watch__link {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gn-accent-hover);
  white-space: nowrap;
}

.gn-watch__link:hover {
  text-decoration: underline;
}

/* Streaming status & history — one lifecycle table combining the current
   snapshot with confirmed past departures. CURRENT rows (leaving/available)
   read distinctly from PAST rows via colour + weight, never by claiming a
   provider was historically available beyond what an event proves. */
.gn-lifecycle {
  display: grid;
  gap: 2px;
  border: 1px solid var(--gn-border);
  border-radius: var(--gn-radius);
  overflow: hidden;
}

.gn-lifecycle__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 10px 14px;
  background: var(--gn-surface);
}

.gn-lifecycle__row + .gn-lifecycle__row {
  border-top: 1px solid var(--gn-border);
}

.gn-lifecycle__service {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gn-text);
}

.gn-lifecycle__status {
  font-size: 0.75rem;
  font-weight: 600;
  text-align: right;
}

.gn-lifecycle__status--leaving {
  color: var(--gn-urgent);
}

.gn-lifecycle__status--available {
  color: var(--gn-success);
}

.gn-lifecycle__status--past {
  color: var(--gn-text-muted);
  font-weight: 500;
}

.gn-lifecycle__date {
  font-size: 0.75rem;
  color: var(--gn-text-muted);
  text-align: right;
  white-space: nowrap;
}

/* A quieter section title, for sections that support the page's main content
   rather than compete with it. */
.gn-section__title--minor {
  font-size: 0.9375rem;
  color: var(--gn-text-muted);
}

/* --------------------------------------------------------------------------
   12. Browse by Service grid
   -------------------------------------------------------------------------- */
.gn-services-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 0;
  margin-top: 1rem;
}

.gn-service-tile {
  display: block;
  width: 100%;
  padding: 14px 0;
  background: transparent;
  border-bottom: 1px solid var(--gn-border);
  color: var(--gn-text);
  text-align: left;
  min-height: 68px;
  transition: color 0.15s;
}

.gn-service-tile__copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.gn-service-tile__identity {
  display: flex;
  align-items: center;
  min-width: 0;
}

.gn-service-tile__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 108px;
  height: 40px;
}

.gn-service-tile__logo {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.gn-service-tile:hover {
  border-color: var(--gn-text-muted);
  color: var(--gn-accent);
}

.gn-service-tile__name {
  font-size: 0.8125rem;
  font-weight: 600;
  min-width: 0;
}

.gn-service-tile__count {
  justify-self: end;
  white-space: nowrap;
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--gn-text-muted);
  text-align: right;
}

@media (max-width: 900px) {
  .gn-services-grid { column-gap: 16px; }
  .gn-service-tile__logo-wrap {
    width: 92px;
    height: 36px;
  }
}

@media (max-width: 500px) {
  .gn-services-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 12px;
  }
  .gn-service-tile__copy { gap: 8px; }
  .gn-service-tile__logo-wrap {
    width: 72px;
    height: 30px;
  }
}

@media (max-width: 360px) {
  .gn-services-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   13. "How Streaming Departures Work" — 3-col info cards
   -------------------------------------------------------------------------- */

/* Short framing paragraph between the heading and the cards. Same body scale
   and muted tone as the card bodies, but a wider measure because it is a
   paragraph, not a column. */
.gn-how-intro {
  margin-top: 0.75rem;
  max-width: 62ch;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--gn-text-muted);
}

/* Emphasis has to survive the muted body colour — same treatment as .gn-prose. */
.gn-how-intro strong {
  font-weight: 650;
  color: var(--gn-text);
}

/* The one onward link in this section. Underlined, because a link that only
   differs by colour is not a link for anyone who cannot see the colour. */
.gn-how-intro__link {
  color: var(--gn-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gn-how-intro__link:hover {
  color: var(--gn-accent);
}

.gn-how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 1.125rem;
}

.gn-how-card {
  background: var(--gn-surface);
  border: 1px solid var(--gn-border);
  border-radius: var(--gn-radius);
  padding: 1.25rem;
}

.gn-how-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  margin-bottom: 0.75rem;
}

.gn-how-card__icon--red {
  background: rgba(232, 103, 58, 0.12);
  color: var(--gn-accent);
}

.gn-how-card__icon--blue {
  background: rgba(227, 183, 79, 0.12);
  color: var(--gn-accent-hover);
}

.gn-how-card__icon--green {
  background: rgba(58, 196, 125, 0.12);
  color: var(--gn-success);
}

.gn-how-card__title {
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 0.375rem;
}

.gn-how-card__body {
  font-size: 0.8125rem;
  color: var(--gn-text-muted);
  line-height: 1.55;
}

@media (max-width: 768px) {
  .gn-how-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   14. FAQ — native <details>/<summary>, zero JS
   -------------------------------------------------------------------------- */
.gn-faq {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}

.gn-faq__item {
  border-bottom: 1px solid var(--gn-border);
}

.gn-faq__item summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 0;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gn-text);
  transition: color 0.15s;
}

.gn-faq__item summary::-webkit-details-marker { display: none; }
.gn-faq__item summary:hover { color: var(--gn-text-muted); }

.gn-faq__chevron {
  color: var(--gn-text-dim);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.gn-faq__item[open] .gn-faq__chevron {
  transform: rotate(180deg);
}

.gn-faq__answer {
  padding: 0 1.5rem 1rem 0;
  font-size: 0.8125rem;
  color: var(--gn-text-muted);
  line-height: 1.6;
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   15. Email / Reminder CTA block (Horizontal card matching reference)
   -------------------------------------------------------------------------- */
.gn-cta-block {
  background: var(--gn-surface);
  border: 1px solid var(--gn-border);
  border-radius: var(--gn-radius-lg);
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.gn-cta-block__title {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.gn-cta-block__sub {
  font-size: 0.8125rem;
  color: var(--gn-text-muted);
}

.gn-cta-block__form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.gn-cta-block__input {
  background: var(--gn-bg);
  border: 1px solid var(--gn-border);
  border-radius: 99px;
  padding: 7px 16px;
  font-size: 0.8125rem;
  color: var(--gn-text);
  font-family: inherit;
  width: 220px;
  outline: none;
  transition: border-color 0.15s;
}

.gn-cta-block__input:focus { border-color: var(--gn-text-muted); }
.gn-cta-block__input::placeholder { color: var(--gn-text-muted); }

.gn-cta-block__btn {
  background: #ffffff;
  color: #0d0d0f;
  border-radius: 99px;
  padding: 7px 18px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.gn-cta-block__btn:hover { opacity: 0.9; }

@media (max-width: 768px) {
  .gn-cta-block {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem;
  }
  .gn-cta-block__form {
    width: 100%;
  }
  .gn-cta-block__input {
    flex: 1;
    width: auto;
  }
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.gn-footer {
  background: var(--gn-surface);
  border-top: 1px solid var(--gn-border);
}

.gn-footer__inner {
  max-width: var(--gn-max-w);
  margin-inline: auto;
  padding-inline: var(--gn-gutter);
  padding-block: 2rem 1.5rem;
}

/*
 * Five areas on one row: brand, then the four link groups.
 *
 * The previous `2fr 1fr 1fr 1fr` described four tracks for five children, so
 * Info wrapped onto an implicit second row and every column read ~45% wider
 * than it needed — which is what made the footer look disconnected and tall.
 *
 * The first track remains wider because it carries the tagline.
 * Explicit tracks keep the navigation starts intentional; space-between owns
 * the distribution while the Guides column gets room for editorial titles.
 */
.gn-footer__grid {
  display: grid;
  grid-template-columns: 16rem 9rem 9rem 16rem 8rem;
  justify-content: space-between;
  column-gap: 0;
  margin-bottom: 1.75rem;
}

.gn-footer__brand {
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.375rem;
}

.gn-footer__tagline {
  font-size: 0.8125rem;
  color: var(--gn-text-muted);
  line-height: 1.5;
  max-width: 24ch;
}

.gn-footer__col-title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gn-text-muted);
  margin-bottom: 0.6rem;
}

.gn-footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/*
 * The list is a flex column of <li>s, so each <li> is its own flex item and the
 * gaps above are the only spacing between links. Padding therefore adds to a
 * link's footprint without overlapping its neighbours, which is what lifts the
 * mobile tap targets without changing the desktop rhythm.
 */
.gn-footer__links a {
  display: inline-block;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--gn-text-muted);
  transition: color 0.15s;
}

.gn-footer__links a:hover { color: var(--gn-text); }

.gn-footer__bottom {
  border-top: 1px solid var(--gn-border);
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--gn-text-muted);
}

/*
 * Intermediate widths: 3 tracks, so the four groups fill two rows as 3 + 1.
 *
 * The breakpoint is 900px, not 1100px: the content box is capped at
 * --gn-max-w (1200px), so five tracks still fit comfortably well below the
 * viewport width where they visually start to squeeze. Triggering earlier
 * would abandon the single-row composition while it still had room.
 *
 * The brand spans the full first row as a masthead — without that it would sit
 * alone in row 1 as a single-column row, which is the "mostly empty row" this
 * breakpoint exists to avoid.
 */
@media (max-width: 900px) {
  .gn-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem 2rem;
  }

  .gn-footer__col--brand { grid-column: 1 / -1; }
}

/*
 * 2×2 group grid: Browse | Services over Guides | Info. The brand is a row
 * above and the legal row sits below, so the middle collapses from a
 * five-row column to two.
 *
 * This must stay the LAST footer breakpoint to win the cascade: it shares
 * `.gn-footer__grid` with the 479px rule below, which sits later in the file.
 */
@media (max-width: 767px) {
  .gn-footer__inner { padding-block: 1.75rem 1.25rem; }

  .gn-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1.25rem;
    margin-bottom: 1.5rem;
  }

  /* Drop to a single column only when two label columns stop fitting. */
  @media (max-width: 379px) {
    .gn-footer__grid { grid-template-columns: minmax(0, 1fr); }
  }

  .gn-footer__links { gap: 0; }
  .gn-footer__links a { padding-block: 0.375rem; }
}

@media (max-width: 479px) {
  .gn-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   17. Responsive Tweaks
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .gn-section { padding-block: 1.75rem; }
  .gn-hero { padding-block: 2rem 1.5rem; }
}

@media (max-width: 479px) {
  .gn-leaving-head { flex-direction: column; align-items: flex-start; }
}

/* Title page — deliberate mobile composition, not a same-spacing stack of the
   desktop blocks. Breadcrumb gets real air, the poster stays modest, and
   title + status appear immediately below it. */
@media (max-width: 767px) {
  .gn-title-crumb { padding-block: 1rem 0; }
  .gn-title-page .gn-hero { padding-block: 1rem 1.5rem; }

  .gn-title {
    grid-template-columns: 88px 1fr;
    grid-template-areas: "poster main" "status status";
    row-gap: 0.875rem;
  }

  .gn-status-card { margin-top: 0.25rem; }

  .gn-watch__row { flex-wrap: wrap; }

  .gn-lifecycle__row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "service status" "date date";
  }
  .gn-lifecycle__service { grid-area: service; }
  .gn-lifecycle__status { grid-area: status; }
  .gn-lifecycle__date { grid-area: date; text-align: left; margin-top: 2px; }
}

@media (max-width: 390px) {
  .gn-title {
    grid-template-columns: 1fr;
    grid-template-areas: "poster" "main" "status";
  }
  .gn-title__poster { max-width: 140px; }
}

/* --------------------------------------------------------------------------
   18. Static trust pages (About, Data Sources, Privacy, Terms)
   -------------------------------------------------------------------------- */
/* Readable long-form text on the dark surface. The measure is capped so lines
   stay comfortable to read, and the block is intentionally narrow relative to
   the browse grids — these pages are read, not scanned. Scoped to
   .gn-static-page so no other route is affected. */
.gn-prose {
  max-width: 68ch;
}

.gn-prose__block + .gn-prose__block {
  margin-top: 1.75rem;
}

.gn-prose__heading {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--gn-text);
}

/* Native Privacy editor content keeps the legal-page rhythm without asking
   editors to add presentational classes to normal headings. */
.gn-prose--editor > :is(h2, h3) {
  margin: 1.75rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--gn-text);
}

.gn-prose--editor > :is(h2, h3):first-child {
  margin-top: 0;
}

.gn-prose p {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--gn-text-muted);
}

.gn-prose p:last-child {
  margin-bottom: 0;
}

.gn-prose ul {
  margin: 0 0 0.75rem;
  padding-left: 1.125rem;
  list-style: disc;
}

.gn-prose li {
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--gn-text-muted);
}

.gn-prose li:last-child {
  margin-bottom: 0;
}

/* Emphasis has to survive the muted body colour: strong text carries the
   normal text colour so it reads as emphasis, not decoration. */
.gn-prose strong {
  font-weight: 650;
  color: var(--gn-text);
}

.gn-prose em {
  font-style: italic;
  color: var(--gn-text);
}

.gn-prose a {
  color: var(--gn-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.gn-prose a:hover {
  border-bottom-color: currentColor;
}

/* Onward links: every static page should be able to reach the others and the
   catalogue, so none of them is a dead end. */
.gn-static-nav {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gn-border);
}

.gn-static-nav__title {
  margin: 0 0 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gn-text-muted);
}

.gn-static-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gn-static-nav__list a {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--gn-border);
  border-radius: var(--gn-radius);
  background: var(--gn-surface);
  font-size: 0.8125rem;
  color: var(--gn-text);
  text-decoration: none;
}

.gn-static-nav__list a:hover {
  border-color: var(--gn-accent);
  color: var(--gn-accent);
}

@media (max-width: 767px) {
  .gn-prose__block + .gn-prose__block { margin-top: 1.5rem; }
  .gn-prose--editor > :is(h2, h3) { margin-top: 1.5rem; }
  .gn-prose--editor > :is(h2, h3):first-child { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   19. Contact form (/contact/)
   -------------------------------------------------------------------------- */
/* Same input language as the rest of the site (dark surface, hairline border,
   accent on focus), stacked in one column because the fields are taller and the
   message is the point. Scoped to .gn-contact so nothing else is affected. */
.gn-contact {
  max-width: 68ch;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gn-border);
}

/* Shared by the contact form and every email-alert form: one notice treatment,
   one place to change it. */
.gn-contact__notice,
.gn-alert__notice {
  margin: 0 0 1.25rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--gn-border);
  border-left-width: 3px;
  border-radius: var(--gn-radius-sm);
  background: var(--gn-surface);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--gn-text);
}

.gn-contact__notice--ok,
.gn-alert__notice--ok { border-left-color: var(--gn-success); }

.gn-contact__notice--bad,
.gn-alert__notice--bad { border-left-color: var(--gn-urgent); }

.gn-contact__form {
  margin: 0;
}

.gn-contact__field + .gn-contact__field {
  margin-top: 1rem;
}

.gn-contact__field label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--gn-text);
}

.gn-contact__req {
  color: var(--gn-accent);
}

.gn-contact__field input[type="text"],
.gn-contact__field input[type="email"],
.gn-contact__field select,
.gn-contact__field textarea {
  width: 100%;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--gn-border);
  border-radius: var(--gn-radius);
  background: var(--gn-bg);
  font-family: inherit;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--gn-text);
  outline: none;
  transition: border-color 0.15s;
}

.gn-contact__field textarea {
  resize: vertical;
  min-height: 8rem;
}

.gn-contact__field input:focus,
.gn-contact__field select:focus,
.gn-contact__field textarea:focus {
  border-color: var(--gn-text-muted);
}

/* Keyboard focus stays visible even when the pointer is not involved. */
.gn-contact__field input:focus-visible,
.gn-contact__field select:focus-visible,
.gn-contact__field textarea:focus-visible {
  outline: 2px solid var(--gn-accent);
  outline-offset: 1px;
}

.gn-contact__hint {
  margin: 0.375rem 0 0;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--gn-text-muted);
}

.gn-contact__actions {
  margin-top: 1.25rem;
}

.gn-contact__submit {
  border-color: var(--gn-accent);
  background: var(--gn-accent);
  color: var(--gn-accent-ink);
  padding-inline: 28px;
  font-weight: 600;
  cursor: pointer;
}

.gn-contact__submit:hover {
  border-color: var(--gn-accent-hover);
  background: var(--gn-accent-hover);
}

/* Honeypot — removed from view and from the accessibility tree entirely, so it
   can never be reached by a real visitor or by a screen reader. */
.gn-contact__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Contact is the only static page with an action form. At desktop widths its
   explanatory prose and existing form share the otherwise unused horizontal
   space; the shared onward navigation remains below both. */
@media (min-width: 900px) {
  .gn-static-page--contact .gn-section > .gn-container {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr);
    gap: 2rem 3rem;
  }

  .gn-static-page--contact .gn-prose,
  .gn-static-page--contact .gn-contact {
    min-width: 0;
    max-width: none;
  }

  .gn-static-page--contact .gn-contact {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .gn-static-page--contact .gn-static-nav {
    grid-column: 1 / -1;
    margin-top: 0;
  }
}

/* --------------------------------------------------------------------------
   20. Guides (/guides/ and /guides/<slug>/)
   --------------------------------------------------------------------------
   Editorial content inside the existing dark-premium system: same surfaces,
   borders and accent as everything else, with type sized for reading rather
   than scanning. Scoped to .gn-guides-page / .gn-guide-page so no other route
   is touched — the homepage, browse grids, search and title pages keep their
   own composition. */

/* --- 20-i. Archive: real grid, never a rail ------------------------------ */
/* Same reason as the browse grid in section 10b: a Guides archive is a list to
   skim, not a three-card carousel. Two columns at phone width is the floor. */
.gn-guides-page .gn-inner-hero + .gn-section,
.gn-static-page .gn-inner-hero + .gn-section {
  border-top: 1px solid var(--gn-border);
}

.gn-guides-page .gn-leaving-head {
  margin-bottom: 1.5rem;
}

.gn-guides-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .gn-guides-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .gn-guides-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

.gn-guide-card {
  min-width: 0;
}

/* The whole card is one link target — a bigger hit area than a title-only link
   and one tab stop instead of two. */
.gn-guide-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--gn-border);
  border-radius: var(--gn-radius);
  background: var(--gn-surface);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
}

.gn-guide-card__link:hover {
  border-color: var(--gn-text-muted);
  background: var(--gn-surface-raised);
}

.gn-guide-card__link:focus-visible {
  outline: 2px solid var(--gn-accent);
  outline-offset: 2px;
}

/* Fixed ratio so a mixed set of featured images still produces an even grid. */
.gn-guide-card__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--gn-bg);
  border-bottom: 1px solid var(--gn-border);
  overflow: hidden;
}

.gn-guide-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gn-guide-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  flex: 1;
  padding: 1.125rem 1.25rem;
}

.gn-guide-card__title {
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--gn-text);
}

.gn-guide-card__excerpt {
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--gn-text-muted);
}

.gn-guide-card__meta {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  margin-top: auto;
  padding-top: 0.875rem;
  font-size: 0.6875rem;
  color: var(--gn-text-dim);
}

.gn-guide-card__dot {
  color: var(--gn-text-dim);
}

/* --- 20-ii. Article: readable long-form --------------------------------- */
/* Deliberately narrow. The article body is prose, and prose set to the full
   width of a 1440px desktop is genuinely hard to read — the measure is capped
   at roughly 70 characters per line. */
.gn-guide__header .gn-hero__sub {
  max-width: 68ch;
}

.gn-guide-page .gn-guide__header {
  border-bottom: 1px solid var(--gn-border);
}

.gn-guide-page .gn-guide__header .gn-section__subtitle {
  max-width: none;
}

body.gn-guide-page .gn-guide__header .gn-guide-article__title {
  max-width: 52rem;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.02;
}

.gn-guide__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.875rem 0 0;
  font-size: 0.75rem;
  color: var(--gn-text-muted);
}

.gn-guide__figure {
  padding-block: 0.5rem 0;
}

.gn-guide__image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--gn-border);
  border-radius: var(--gn-radius);
}

.gn-guide__body {
  padding-block: clamp(1.75rem, 3vw, 2.25rem) 0;
}

.gn-guide__figure .gn-container,
.gn-guide__body .gn-container,
.gn-guide__outro .gn-container {
  max-width: var(--gn-max-w);
}

.gn-guide__image,
.gn-guide__reading-column,
.gn-guide__outro .gn-guide__more,
.gn-guide__outro .gn-static-nav {
  max-width: 46rem;
}

.gn-guide__outro {
  padding-block: 2.5rem 2rem;
}

/* Live departure context sits beside long-form guides only when the local
   catalogue has something trustworthy to show. It remains after the article's
   own onward navigation in source order, so narrow screens retain a natural
   reading flow. */
.gn-guide__data-sidebar {
  max-width: var(--gn-max-w);
  margin-inline: auto;
  padding: 2.5rem var(--gn-gutter) 2rem;
}

.gn-guide__data-module + .gn-guide__data-module {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--gn-border);
}

.gn-guide__data-title {
  margin: 0 0 0.9rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.gn-guide__data-list { margin: 0; }
.gn-guide__data-list li + li { border-top: 1px solid rgba(255, 255, 255, 0.08); }

.gn-guide__data-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
  padding-block: 0.75rem;
}

.gn-guide__data-poster {
  display: block;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  border-radius: var(--gn-radius-sm);
}

.gn-guide__data-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gn-guide__data-copy { min-width: 0; }

.gn-guide__data-item-title,
.gn-guide__data-timing { display: block; }

.gn-guide__data-item-title {
  overflow: hidden;
  color: var(--gn-text);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gn-guide__data-timing {
  margin-top: 0.2rem;
  color: var(--gn-text-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.gn-guide__data-cta {
  display: inline-block;
  margin-top: 1rem;
  color: var(--gn-accent);
  font-size: 0.85rem;
  font-weight: 650;
}

.gn-guide__data-item:hover .gn-guide__data-item-title,
.gn-guide__data-cta:hover { color: var(--gn-accent-hover); }

@media (min-width: 980px) {
  .gn-guide__article-layout {
    display: grid;
    grid-template-columns: minmax(0, 46rem) minmax(15rem, 1fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    max-width: var(--gn-max-w);
    margin-inline: auto;
    padding-inline: var(--gn-gutter);
  }

  .gn-guide__primary { min-width: 0; }

  .gn-guide__article-layout .gn-guide__body .gn-container,
  .gn-guide__article-layout .gn-guide__outro .gn-container {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .gn-guide__data-sidebar {
    min-width: 0;
    margin: 0;
    padding: clamp(1.75rem, 3vw, 2.25rem) 0 2rem;
  }
}

/* Article typography. Element selectors scoped under .gn-guide__body so they
   apply to editor-authored content only, and never leak to other routes. */
.gn-guide__body p {
  margin: 0 0 1.125rem;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--gn-text-muted);
}

.gn-guide__body h2 {
  margin: 2.25rem 0 0.875rem;
  font-size: 1.25rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--gn-text);
}

.gn-guide__body h3 {
  margin: 1.75rem 0 0.75rem;
  font-size: 1.0625rem;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--gn-text);
}

.gn-guide__body h4 {
  margin: 1.5rem 0 0.625rem;
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--gn-text);
}

.gn-guide__body ul,
.gn-guide__body ol {
  margin: 0 0 1.125rem;
  padding-left: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--gn-text-muted);
}

.gn-guide__body ul { list-style: disc; }
.gn-guide__body ol { list-style: decimal; }

.gn-guide__body li {
  margin-bottom: 0.4375rem;
}

.gn-guide__body li::marker {
  color: var(--gn-text-dim);
}

.gn-guide__body blockquote {
  margin: 1.5rem 0;
  padding: 0.25rem 0 0.25rem 1.125rem;
  border-left: 3px solid var(--gn-accent);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.7;
  color: var(--gn-text);
}

.gn-guide__body blockquote p:last-child {
  margin-bottom: 0;
}

.gn-guide__body strong {
  font-weight: 650;
  color: var(--gn-text);
}

.gn-guide__body em {
  color: var(--gn-text);
}

.gn-guide__body a {
  color: var(--gn-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.gn-guide__body a:hover {
  border-bottom-color: currentColor;
}

.gn-guide__body hr {
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid var(--gn-border);
}

.gn-guide__body code {
  padding: 0.125rem 0.375rem;
  border-radius: var(--gn-radius-sm);
  background: var(--gn-surface);
  border: 1px solid var(--gn-border);
  font-size: 0.8125em;
  color: var(--gn-text);
}

/* Images inside an article sit on the same measure as the text. */
.gn-guide__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--gn-radius-sm);
}

.gn-guide__body figure {
  margin: 1.75rem 0;
}

.gn-guide__body figcaption {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--gn-text-dim);
}

/* Tables need a horizontal escape hatch rather than forcing the page wide. */
.gn-guide__body .wp-block-table {
  margin: 0 0 1.5rem;
  overflow-x: auto;
}

.gn-guide__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  line-height: 1.6;
}

.gn-guide__body th,
.gn-guide__body td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gn-border);
  text-align: left;
  color: var(--gn-text-muted);
}

.gn-guide__body th {
  background: var(--gn-surface);
  font-weight: 650;
  color: var(--gn-text);
}

/* --- 20-iii. Onward navigation from an article -------------------------- */
.gn-guide__more {
  margin-bottom: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--gn-border);
}

.gn-guide__more .gn-section__title {
  font-size: 0.9375rem;
  color: var(--gn-text-muted);
  margin-bottom: 0.875rem;
}

.gn-guide__more-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gn-guide__more-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.gn-guide__more-list a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gn-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.gn-guide__more-list a:hover {
  border-bottom-color: currentColor;
}

.gn-guide__more-date {
  flex-shrink: 0;
  font-size: 0.6875rem;
  color: var(--gn-text-dim);
}

/* The shared static-page nav block is reused verbatim; only its top margin
   needs relaxing inside the article outro, where a divider already separates. */
.gn-guide__outro .gn-static-nav {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

@media (max-width: 767px) {
  .gn-guide__title { max-width: none; }
  .gn-guide__body h2 { margin-top: 1.875rem; }
}

/* --------------------------------------------------------------------------
   21. Email alerts — homepage weekly signup + title-page reminders
   --------------------------------------------------------------------------
   Deliberately minimal: these are the smallest additions that make the two
   forms usable and legible. The whole-site UI/UX pass will restyle them; what
   matters here is that they reuse the existing tokens, sit on the existing
   spacing scale, and do not introduce a second visual language.
   -------------------------------------------------------------------------- */

/* Homepage CTA — the input and button move inside a row so a notice or a note
   can sit underneath them without disturbing the card's horizontal layout. */
.gn-cta-block__form--stacked {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.gn-cta-block__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The shared notice rule carries a bottom margin for stacked forms; inside the
   CTA the flex gap already provides that spacing. */
.gn-cta-block__form--stacked .gn-alert__notice {
  margin: 0;
}

.gn-cta-block__note {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--gn-text-dim);
}

/* Title page — one compact row per departure that can be reminded. */
.gn-remind__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.gn-remind__item {
  background: var(--gn-surface);
  border: 1px solid var(--gn-border);
  border-radius: var(--gn-radius);
  padding: 0.875rem 1rem;
}

.gn-remind__what {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 0.625rem;
  margin: 0 0 0.625rem;
  font-size: 0.8125rem;
}

.gn-remind__service {
  font-weight: 600;
  color: var(--gn-text);
}

.gn-remind__date {
  color: var(--gn-text-muted);
}

.gn-remind__row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.gn-remind__input {
  flex: 1 1 14rem;
  min-width: 0;
  background: var(--gn-bg);
  border: 1px solid var(--gn-border);
  border-radius: 99px;
  padding: 7px 16px;
  font-size: 0.8125rem;
  font-family: inherit;
  color: var(--gn-text);
  outline: none;
  transition: border-color 0.15s;
}

.gn-remind__input:focus { border-color: var(--gn-text-muted); }
.gn-remind__input::placeholder { color: var(--gn-text-muted); }

.gn-remind__submit {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Keyboard focus must stay visible on both new controls. */
.gn-remind__input:focus-visible,
.gn-remind__submit:focus-visible,
.gn-cta-block__input:focus-visible,
.gn-cta-block__btn:focus-visible {
  outline: 2px solid var(--gn-accent);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .gn-cta-block__input { flex: 1; width: auto; }

  /* Full-width button on a narrow screen reads as the primary action rather
     than a chip floating beside the field. */
  .gn-cta-block__btn,
  .gn-remind__submit { width: 100%; }

  .gn-remind__row { flex-direction: column; align-items: stretch; }
  .gn-remind__input { flex: 0 0 auto; }
}

/* ========================================================================== 
   22. 2026 visual foundation — cinematic discovery system
   Shared tokens and components establish the language that later route passes
   can inherit without changing their structure.
   ========================================================================== */
body {
  background:
    radial-gradient(circle at 82% -12%, rgba(44, 105, 151, 0.12), transparent 34rem),
    var(--gn-bg);
  font-size: 0.9375rem;
}

.gn-container { max-width: var(--gn-max-w); }

.gn-section {
  padding-block: clamp(2.75rem, 5vw, 4.25rem);
}

.gn-section + .gn-section { border-color: rgba(79, 111, 140, 0.26); }

.gn-section__head { margin-bottom: 1.25rem; }

.gn-section__title,
.gn-leaving-head__title {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 750;
  letter-spacing: -0.025em;
}

.gn-section__subtitle {
  max-width: 52ch;
  font-size: 0.8125rem;
  line-height: 1.55;
}

.gn-section__cta {
  color: #b4c7d8;
  font-weight: 550;
}

.gn-section__cta:hover { color: var(--gn-accent); }

.gn-section__title--star::before { color: var(--gn-accent); }

/* Header */
.gn-header {
  background: rgba(7, 16, 25, 0.9);
  border-color: rgba(79, 111, 140, 0.3);
}

.gn-header__inner {
  height: 60px;
  gap: 2.75rem;
}

.gn-header__logo { gap: 9px; }

.gn-header__mark svg {
  width: 21px;
  height: 21px;
  filter: drop-shadow(0 0 10px rgba(227, 183, 79, 0.12));
}

.gn-logo__text {
  font-size: 0.9375rem;
  font-weight: 820;
  letter-spacing: 0.015em;
}

.gn-nav__list { gap: 0.5rem; }

.gn-nav__link,
.gn-nav__summary {
  padding: 0.55rem 0.75rem;
  color: #a8bacb;
  font-size: 0.8125rem;
}

.gn-nav__link:hover,
.gn-nav__summary:hover,
.gn-nav__link--active,
.gn-nav__menu[open] > .gn-nav__summary {
  color: var(--gn-text);
  background: rgba(227, 183, 79, 0.075);
}

.gn-nav__panel,
.gn-nav__dropdown {
  background: rgba(10, 24, 36, 0.98);
  border-color: #2a435b;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
}

/* Hero */
.gn-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 6.25rem) clamp(3rem, 5vw, 4.5rem);
  border-color: rgba(79, 111, 140, 0.3);
}

.gn-hero::after {
  content: "";
  position: absolute;
  top: 18%;
  bottom: 18%;
  left: calc(50% + 18rem);
  width: 1px;
  background: linear-gradient(transparent, rgba(227, 183, 79, 0.55), transparent);
  box-shadow: 56px 0 0 rgba(227, 183, 79, 0.12), 112px 0 0 rgba(227, 183, 79, 0.06);
  pointer-events: none;
}

.gn-hero__h1 {
  max-width: 19ch;
  margin-bottom: 1rem;
  font-size: clamp(2.65rem, 5.3vw, 4.8rem);
  font-weight: 820;
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.gn-hero__h1 .gn-muted { color: #7d94ae; }

.gn-hero__sub {
  max-width: 57ch;
  margin-bottom: 0;
  color: #b1c2d2;
  font-size: clamp(0.9375rem, 1.4vw, 1.075rem);
  line-height: 1.65;
}

/* Filters */
.gn-leaving-head { gap: 1rem; }

.gn-leaving-head__count {
  color: #8299ae;
  font-size: 0.75rem;
}

.gn-time-control {
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: rgba(13, 24, 35, 0.7);
  border-color: #294057;
  border-radius: var(--gn-radius-sm);
}

.gn-time-control a,
.gn-time-control label,
.gn-time-control span {
  min-height: 38px;
  padding: 0.65rem 1.1rem;
  border-radius: 0;
  border-right: 1px solid #294057;
  color: #aabccc;
  line-height: 1;
}

.gn-time-control > :last-child { border-right: 0; }

.gn-time-control input[type="radio"]:checked + label,
.gn-time-control a.is-active,
.gn-time-control span.is-active {
  color: var(--gn-text);
  background: rgba(227, 183, 79, 0.09);
  box-shadow: inset 0 -2px 0 var(--gn-accent);
}

.gn-svc-filter {
  flex-wrap: nowrap;
  gap: 8px;
  margin-block: 1rem 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.gn-svc-filter::-webkit-scrollbar { display: none; }

.gn-svc-filter a,
.gn-svc-filter label {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0.55rem 1rem;
  border-color: #294057;
  border-radius: var(--gn-radius-sm);
  background: rgba(13, 24, 35, 0.75);
  color: #aabccc;
  line-height: 1;
}

.gn-svc-filter input[type="radio"]:checked + label,
.gn-svc-filter a.is-active {
  border-color: var(--gn-accent);
  color: var(--gn-text);
  background: rgba(227, 183, 79, 0.08);
  box-shadow: inset 0 0 0 1px rgba(227, 183, 79, 0.12);
}

/* Poster rails */
.gn-row { gap: 18px; }

.gn-card__poster-wrap {
  border: 1px solid rgba(95, 125, 151, 0.28);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.gn-card__poster-link:focus-visible { outline-offset: -3px; }

.gn-card__rating {
  top: 7px;
  left: 7px;
  padding: 3px 7px;
  background: rgba(4, 10, 16, 0.82);
  border-color: rgba(255, 255, 255, 0.16);
  border-radius: 5px;
  color: #f8fbfd;
  font-variant-numeric: tabular-nums;
}

.gn-card__meta {
  display: grid;
  gap: 2px;
  margin-top: 0.55rem;
}

.gn-card__meta-top { display: contents; }

.gn-card__title {
  order: 1;
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.gn-card__info {
  order: 2;
  margin-top: 0;
  color: #8399ad;
}

.gn-card__leaving {
  order: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  margin-top: 0.2rem;
  color: var(--gn-urgent);
  font-size: 0.7rem;
  font-weight: 700;
}

.gn-card__leaving::before {
  content: "";
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.gn-card__leaving--past {
  display: block;
  width: auto;
  color: #91a6b9;
}

.gn-card__leaving--past::before { display: none; }

.gn-card__where { margin-top: 0.55rem; }

.gn-where-chip {
  padding: 3px 8px;
  border-color: rgba(227, 183, 79, 0.28);
  background: rgba(227, 183, 79, 0.09);
  color: var(--gn-accent-hover);
}

@media (hover: hover) {
  .gn-card:hover .gn-card__poster-wrap {
    transform: translateY(-4px);
    border-color: rgba(227, 183, 79, 0.62);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.34);
  }
}

.gn-btn-pill {
  min-height: 40px;
  border-color: #294057;
  border-radius: var(--gn-radius-sm);
  background: rgba(13, 24, 35, 0.8);
  color: #d9e6ef;
  font-weight: 600;
}

.gn-btn-pill:hover {
  border-color: var(--gn-accent);
  background: rgba(227, 183, 79, 0.08);
  color: var(--gn-accent);
}

/* Service discovery */
.gn-services-grid { gap: 10px; }

.gn-service-tile {
  min-height: 72px;
  flex-direction: row;
  justify-content: flex-start;
  gap: 10px;
  padding: 0.75rem;
  border-color: #23384c;
  border-radius: 8px;
  background: rgba(13, 24, 35, 0.68);
  text-align: left;
}

.gn-service-tile__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 1px solid rgba(227, 183, 79, 0.32);
  border-radius: 50%;
  color: var(--gn-accent);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.gn-service-tile__copy {
  min-width: 0;
}

.gn-service-tile__name { font-weight: 650; }
.gn-service-tile__count { color: #8299ae; }

.gn-service-tile:hover {
  border-color: rgba(227, 183, 79, 0.58);
  background: rgba(227, 183, 79, 0.065);
}

/* Explainer as an open timeline rather than a card trio */
.gn-how-intro {
  max-width: 72ch;
  color: #9db1c2;
  font-size: 0.875rem;
  line-height: 1.7;
}

.gn-how-intro__link { color: var(--gn-accent); }

.gn-how-grid {
  position: relative;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-top: 2.25rem;
}

.gn-how-grid::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, var(--gn-accent), #31536f 72%, rgba(49, 83, 111, 0.15));
}

.gn-how-card {
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
}

.gn-how-card__icon {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  margin-bottom: 1rem;
  border: 1px solid var(--gn-accent);
  border-radius: 50%;
  background: var(--gn-bg);
  color: var(--gn-accent);
}

.gn-how-card__icon--red,
.gn-how-card__icon--blue,
.gn-how-card__icon--green {
  background: var(--gn-bg);
  color: var(--gn-accent);
}

.gn-how-card__title {
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
}

.gn-how-card__body {
  color: #91a7ba;
  line-height: 1.65;
}

/* CTA + FAQ */
.gn-section--cta { padding-block: 1.25rem 3.5rem; }

.gn-cta-block {
  border-color: #29475e;
  background: linear-gradient(100deg, rgba(18, 37, 53, 0.95), rgba(10, 25, 38, 0.88));
  box-shadow: inset 3px 0 0 var(--gn-accent);
}

.gn-cta-block__input {
  min-height: 42px;
  border-color: #2b4358;
  border-radius: var(--gn-radius-sm);
  background: rgba(5, 14, 22, 0.72);
}

.gn-cta-block__input:focus { border-color: var(--gn-accent); }

.gn-cta-block__btn {
  min-height: 42px;
  border-radius: var(--gn-radius-sm);
  background: var(--gn-accent);
  color: #03131a;
  font-weight: 750;
}

.gn-cta-block__btn:hover { background: var(--gn-accent-hover); opacity: 1; }

.gn-faq { margin-top: 1.25rem; }

.gn-faq__item { border-color: rgba(79, 111, 140, 0.34); }

.gn-faq__item summary {
  min-height: 52px;
  padding-block: 1rem;
  font-weight: 600;
}

.gn-faq__item summary:hover { color: var(--gn-accent); }
.gn-faq__chevron { color: #7690a8; }

/* Footer */
.gn-footer {
  background: #09141f;
  border-color: #24384c;
}

.gn-footer__inner { padding-block: 2.75rem 1.5rem; }

.gn-footer__brand {
  font-size: 1rem;
  letter-spacing: 0.015em;
}

.gn-footer__brand-accent { color: var(--gn-accent); }

.gn-footer__tagline { color: #91a6b8; }

.gn-footer__col-title {
  color: #738ca2;
  letter-spacing: 0.12em;
}

.gn-footer__links a { color: #9fb2c3; }
.gn-footer__links a:hover { color: var(--gn-accent); }
.gn-footer__bottom { border-color: #203448; }

@media (max-width: 1023px) {
  .gn-row {
    grid-auto-columns: 172px;
    gap: 14px;
    margin-inline: calc(var(--gn-gutter) * -1);
    padding-inline: var(--gn-gutter);
    scroll-padding-inline: var(--gn-gutter);
  }
}

@media (max-width: 767px) {
  html { scroll-padding-top: 68px; }
  :target { scroll-margin-top: 68px; }

  .gn-header__inner { height: 56px; }

  .gn-nav__burger {
    width: 44px;
    height: 44px;
    color: #c9d8e4;
  }

  .gn-nav__dropdown {
    position: fixed;
    top: 56px;
    right: var(--gn-gutter);
    left: var(--gn-gutter);
    min-width: 0;
    max-height: calc(100vh - 72px);
    padding: 0.75rem;
  }

  .gn-nav__group-summary,
  .gn-nav__mobile-link { min-height: 46px; }

  .gn-hero {
    padding-block: 2.75rem 2.5rem;
  }

  .gn-hero:not(.gn-inner-hero)::after { display: none; }

  .gn-hero__h1 {
    max-width: 12ch;
    font-size: clamp(2.35rem, 12vw, 3.35rem);
    line-height: 1.02;
  }

  .gn-hero__sub {
    max-width: 38ch;
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  .gn-section { padding-block: 2.5rem; }

  .gn-leaving-head {
    align-items: flex-start;
  }

  .gn-time-control {
    max-width: 100%;
    overflow-x: auto;
  }

  .gn-time-control a,
  .gn-time-control label,
  .gn-time-control span {
    flex: 0 0 auto;
    min-height: 42px;
    padding-inline: 0.9rem;
  }

  .gn-svc-filter a,
  .gn-svc-filter label { min-height: 42px; padding-block: 0.7rem; }

  .gn-row {
    grid-auto-columns: 148px;
    gap: 12px;
  }

  .gn-card__title {
    min-height: 2.55em;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .gn-section__head { align-items: center; }

  .gn-section__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    overflow: hidden;
    font-size: 0;
  }

  .gn-section__cta::after {
    content: "→";
    font-size: 1.05rem;
    color: var(--gn-accent);
  }

  .gn-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .gn-service-tile { min-height: 70px; }

  .gn-how-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    padding-left: 0.25rem;
  }

  .gn-how-grid::before {
    top: 20px;
    bottom: 20px;
    left: 24px;
    width: 1px;
    height: auto;
    background: linear-gradient(var(--gn-accent), #31536f 72%, rgba(49, 83, 111, 0.15));
  }

  .gn-how-card {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: 1rem;
  }

  .gn-how-card__icon {
    grid-row: 1 / span 2;
    margin: 0;
  }

  .gn-how-card__title { align-self: end; }

  .gn-cta-block { padding: 1.5rem; }
  .gn-cta-block__row { flex-direction: column; align-items: stretch; }
  .gn-cta-block__input,
  .gn-cta-block__btn { width: 100%; }

  .gn-footer__grid { gap: 1.75rem 1.25rem; }
}

@media (max-width: 479px) {
  .gn-leaving-head { flex-direction: column; }
  .gn-leaving-head__left { width: 100%; }
  .gn-time-control { width: 100%; }
  .gn-time-control a { flex: 1 0 auto; text-align: center; }
  .gn-service-tile { padding-inline: 0.625rem; }
  .gn-service-tile__mark { width: 28px; height: 28px; flex-basis: 28px; }
}

/* ========================================================================== 
   23. Homepage polish — controls, rhythm and progressive filter state
   ========================================================================== */
.gn-header__logo { gap: 0; }

.gn-hero {
  padding-block: clamp(3.75rem, 7vw, 6.25rem) clamp(3.25rem, 5.5vw, 4.75rem);
}

.gn-hero__h1 .gn-muted { color: #59c4df; }

#leaving-soon {
  padding-block: clamp(3.25rem, 5.25vw, 4.5rem) clamp(3.75rem, 5.75vw, 5rem);
}

#leaving-soon .gn-leaving-head { margin-bottom: 1.125rem; }

#leaving-soon .gn-time-control,
#leaving-soon .gn-svc-filter a {
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: -0.005em;
}

#leaving-soon .gn-time-control {
  min-height: 44px;
  border-radius: 7px;
}

#leaving-soon .gn-time-control a,
#leaving-soon .gn-time-control label,
#leaving-soon .gn-time-control span,
#leaving-soon .gn-svc-filter a,
#leaving-soon .gn-svc-filter label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  line-height: 1.2;
}

#leaving-soon .gn-time-control a,
#leaving-soon .gn-time-control label,
#leaving-soon .gn-time-control span {
  padding: 0.65rem 1.2rem;
}

#leaving-soon .gn-time-control a:hover,
#leaving-soon .gn-svc-filter a:hover {
  border-color: rgba(227, 183, 79, 0.62);
  background: rgba(227, 183, 79, 0.075);
  color: var(--gn-text);
}

#leaving-soon .gn-time-control a.is-active,
#leaving-soon .gn-svc-filter a.is-active {
  border-color: rgba(227, 183, 79, 0.86);
  background: rgba(227, 183, 79, 0.13);
  color: var(--gn-accent-ink);
  box-shadow: inset 0 0 0 1px rgba(227, 183, 79, 0.12);
}

#leaving-soon .gn-time-control a.is-active {
  box-shadow: inset 0 -2px 0 var(--gn-accent);
}

#leaving-soon .gn-time-control a:focus-visible,
#leaving-soon .gn-svc-filter a:focus-visible,
.gn-main .gn-btn-pill:focus-visible,
.gn-main .gn-section__cta:focus-visible,
.gn-main .gn-cta-block__btn:focus-visible,
.gn-main .gn-cta-block__input:focus-visible,
.gn-service-tile:focus-visible {
  outline: 2px solid var(--gn-accent);
  outline-offset: 3px;
}

#leaving-soon .gn-svc-filter {
  gap: 10px;
  margin-block: 0 1.75rem;
}

#leaving-soon .gn-svc-filter a,
#leaving-soon .gn-svc-filter label {
  padding: 0.65rem 1.05rem;
  border-radius: 7px;
}

#leaving-soon .gn-row,
#leaving-soon .gn-section__more {
  transition: opacity 150ms ease;
}

#leaving-soon.is-loading { cursor: progress; }
#leaving-soon.is-loading .gn-row,
#leaving-soon.is-loading .gn-section__more {
  opacity: 0.55;
  pointer-events: none;
}

.gn-section__head { margin-bottom: 1.5rem; }
.gn-section__more { margin-top: 1.75rem; }

.gn-main .gn-btn-pill,
.gn-main .gn-section__cta,
.gn-main .gn-cta-block__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 42px;
  border-radius: 7px;
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1.2;
}

.gn-main .gn-btn-pill { padding: 0.65rem 1rem; }

.gn-main .gn-section__cta {
  padding: 0.55rem 0.75rem;
  border: 1px solid transparent;
}

.gn-main .gn-section__cta:hover {
  border-color: rgba(227, 183, 79, 0.26);
  background: rgba(227, 183, 79, 0.055);
}

.gn-services-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.gn-service-tile {
  min-height: 92px;
  padding: 1rem 1.125rem;
  border-color: #294057;
  border-radius: 9px;
  background: rgba(13, 24, 35, 0.82);
}

.gn-service-tile__copy { gap: 0.35rem; }

.gn-service-tile__name {
  color: #eef5f9;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.gn-service-tile__count {
  color: #8197aa;
  font-size: 0.75rem;
  font-weight: 500;
}

.gn-service-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(227, 183, 79, 0.52);
  background: rgba(21, 40, 55, 0.92);
}

.gn-cta-block {
  border-color: #29475e;
  background: linear-gradient(100deg, rgba(18, 37, 53, 0.95), rgba(10, 25, 38, 0.88));
  box-shadow: none;
}

.gn-cta-block__row { align-items: stretch; }
.gn-cta-block__input,
.gn-cta-block__btn { min-height: 44px; }

@media (max-width: 1023px) {
  .gn-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .gn-row { scrollbar-width: none; }
  .gn-row::-webkit-scrollbar { display: none; }
}

@media (max-width: 767px) {
  .gn-hero { padding-block: 3rem 2.75rem; }

  .gn-hero__h1 {
    max-width: 11ch;
    font-size: clamp(2.3rem, 11.25vw, 3.15rem);
  }

  #leaving-soon { padding-block: 2.75rem 3.25rem; }

  #leaving-soon .gn-time-control {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  #leaving-soon .gn-time-control::-webkit-scrollbar { display: none; }

  #leaving-soon .gn-time-control a { flex: 1 0 auto; }

  .gn-section__head { margin-bottom: 1.25rem; }
  .gn-section__more { margin-top: 1.5rem; }

  .gn-main .gn-section__cta {
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 0;
  }

  .gn-service-tile {
    min-height: 86px;
    padding: 0.9rem;
  }
}

@media (max-width: 479px) {
  #leaving-soon .gn-leaving-head { gap: 1rem; }
  #leaving-soon .gn-svc-filter { margin-bottom: 1.5rem; }
  .gn-services-grid { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  #leaving-soon .gn-row,
  #leaving-soon .gn-section__more,
  .gn-service-tile { transition: none; }
}

/* ========================================================================== 
   24. Title pages — shared cinematic lifecycle layout
   ========================================================================== */
.gn-title-page .gn-title-crumb {
  padding-block: 1.5rem 0;
}

.gn-title-page .gn-title-crumb .gn-section__subtitle {
  max-width: none;
  color: #71879a;
}

.gn-title-page .gn-title-crumb a {
  color: #9eb3c4;
  text-decoration: none;
}

.gn-title-page .gn-title-crumb a:hover { color: var(--gn-accent); }

.gn-title-page .gn-hero {
  padding-block: 1.75rem clamp(3.25rem, 5vw, 4.75rem);
}

.gn-title-page .gn-hero::after { display: none; }

.gn-title-page .gn-title {
  grid-template-columns: 240px minmax(0, 1fr) 320px;
  grid-template-areas: "poster main status";
  gap: clamp(1.75rem, 3vw, 3rem);
  align-items: start;
}

.gn-title-page .gn-title__poster {
  border-radius: 9px;
  border-color: rgba(95, 125, 151, 0.34);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.gn-title-page .gn-title__main {
  padding-top: 0.35rem;
}

.gn-title-page .gn-title__main .gn-hero__h1 {
  margin-bottom: 0;
  font-size: clamp(2.6rem, 4.4vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
}

.gn-title-page .gn-title__main > .gn-hero__sub {
  margin-top: 0.75rem;
  color: #8fa5b7;
  font-size: 0.8125rem;
}

.gn-title-page .gn-title__facts {
  gap: 6px 12px;
  margin-top: 1rem;
  color: #a8bac9;
  font-size: 0.875rem;
}

.gn-title-page .gn-title__facts span:not(:last-child)::after {
  margin-left: 12px;
  color: #587086;
}

.gn-title-page .gn-title__genres {
  gap: 0.4rem 1rem;
  margin-top: 1rem;
}

.gn-title-page .gn-title__genres .gn-where-chip {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gn-accent-hover);
  font-size: 0.8125rem;
  font-weight: 550;
}

.gn-title-page .gn-title__overview {
  max-width: 58ch;
  margin-top: 1.35rem;
  color: #aebfcd;
  font-size: 0.9375rem;
  line-height: 1.75;
}

.gn-title-page .gn-status-card {
  align-self: stretch;
  min-width: 0;
  padding: 1.6rem 1.5rem;
  border: 1px solid #294057;
  border-top: 2px solid var(--gn-accent);
  border-radius: 9px;
  background: rgba(13, 24, 35, 0.82);
}

.gn-title-page .gn-status-card--leaving { border-left: 1px solid #294057; }
.gn-title-page .gn-status-card--left { border-top-color: #547189; }
.gn-title-page .gn-status-card--available { border-left: 1px solid #294057; border-top-color: var(--gn-success); }

.gn-title-page .gn-status-card__headline {
  color: #f2f7fa;
  font-size: 1.15rem;
  font-weight: 720;
  letter-spacing: -0.02em;
}

.gn-title-page .gn-status-card__sub {
  margin-top: 1.25rem;
  color: #c0cfda;
  font-size: 0.875rem;
  line-height: 1.55;
}

.gn-title-page .gn-status-card__countdown {
  display: block;
  margin-top: 0.45rem;
  color: var(--gn-urgent);
  font-size: clamp(1.55rem, 2.4vw, 2.15rem);
  font-weight: 780;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.gn-title-page .gn-status-card__why {
  margin-top: 1.25rem;
  color: #8197aa;
  font-size: 0.78rem;
  line-height: 1.65;
}

.gn-title-page .gn-status-card__action,
.gn-title-page .gn-status-card__more {
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  font-weight: 650;
}

.gn-title-page .gn-status-card__action a,
.gn-title-page .gn-status-card__more a {
  color: var(--gn-accent);
  text-decoration: none;
}

.gn-title-page .gn-status-card__action a:hover,
.gn-title-page .gn-status-card__more a:hover { color: var(--gn-accent-hover); }

.gn-title-page .gn-section {
  padding-block: clamp(3rem, 4.75vw, 4.25rem);
}

.gn-title-page .gn-section__head { margin-bottom: 1.5rem; }

.gn-title-page .gn-section__title {
  font-size: clamp(1.35rem, 2vw, 1.75rem);
}

.gn-title-page .gn-section__title--minor {
  color: var(--gn-text);
  font-size: clamp(1.25rem, 1.7vw, 1.55rem);
}

.gn-title-page .gn-section__subtitle {
  color: #8da2b4;
  font-size: 0.8125rem;
}

.gn-title-page .gn-section--remind {
  padding-block: 2rem;
  border-top: 0;
}

.gn-title-page .gn-section--remind .gn-container {
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
  gap: 1.5rem 3rem;
  align-items: center;
  padding-block: 1.75rem;
  border: 1px solid #29475e;
  border-radius: 10px;
  background: rgba(16, 33, 47, 0.9);
}

.gn-title-page .gn-section--remind .gn-section__head { margin: 0; }
.gn-title-page .gn-remind__list { gap: 1rem; }

.gn-title-page .gn-remind__item {
  display: grid;
  grid-template-columns: minmax(150px, 0.45fr) minmax(0, 1fr);
  gap: 1rem 1.5rem;
  align-items: end;
  padding: 0;
  border: 0;
  background: transparent;
}

.gn-title-page .gn-remind__what {
  display: grid;
  gap: 0.25rem;
  margin: 0;
}

.gn-title-page .gn-remind__service {
  color: #eff6fa;
  font-size: 0.875rem;
  font-weight: 700;
}

.gn-title-page .gn-remind__date {
  color: #8fa4b6;
  font-size: 0.75rem;
  line-height: 1.5;
}

.gn-title-page .gn-remind__row { gap: 0.65rem; }

.gn-title-page .gn-remind__input,
.gn-title-page .gn-remind__submit {
  box-sizing: border-box;
  min-height: 44px;
  border-radius: 7px;
}

.gn-title-page .gn-remind__input {
  padding: 0.65rem 0.9rem;
  border-color: #2b4358;
  background: rgba(5, 14, 22, 0.72);
}

.gn-title-page .gn-remind__input:focus { border-color: var(--gn-accent); }

.gn-title-page .gn-remind__submit {
  padding-inline: 1.1rem;
  border-color: var(--gn-accent);
  background: var(--gn-accent);
  color: #03131a;
  font-weight: 750;
}

.gn-title-page .gn-remind__submit:hover {
  background: var(--gn-accent-hover);
  color: #03131a;
}

.gn-title-page .gn-watch {
  gap: 0;
  border-top: 1px solid #294057;
}

.gn-title-page .gn-watch__group {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 1.25rem;
  padding-block: 1rem;
  border-bottom: 1px solid #294057;
}

.gn-title-page .gn-watch__group-title {
  margin: 0;
  padding-top: 0.2rem;
  color: #7890a4;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
}

.gn-title-page .gn-watch__group--leaving .gn-watch__group-title { color: var(--gn-urgent); }
.gn-title-page .gn-watch__rows { gap: 0; }

.gn-title-page .gn-watch__row,
.gn-title-page .gn-watch__row--primary {
  min-height: 48px;
  padding: 0.65rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.gn-title-page .gn-watch__row + .gn-watch__row {
  border-top: 1px solid rgba(79, 111, 140, 0.2);
}

.gn-title-page .gn-watch__service {
  font-size: 0.875rem;
  font-weight: 700;
}

.gn-title-page .gn-watch__quality {
  color: #7890a4;
  font-size: 0.6875rem;
  font-weight: 650;
}

.gn-title-page .gn-watch__note,
.gn-title-page .gn-watch__price,
.gn-title-page .gn-watch__link { font-size: 0.75rem; }
.gn-title-page .gn-watch__link { color: var(--gn-accent); }

.gn-title-page .gn-empty-compact {
  padding: 1.25rem 1.35rem;
  border: 1px solid #294057;
  border-radius: 9px;
  background: rgba(13, 24, 35, 0.62);
  color: #8fa4b5;
  line-height: 1.55;
}

.gn-title-state-left .gn-empty-compact {
  padding-block: 1.5rem;
  font-size: 0.875rem;
}

@media (max-width: 1099px) {
  .gn-title-page .gn-title {
    grid-template-columns: 200px minmax(0, 1fr);
    grid-template-areas: "poster main" "status status";
  }

  .gn-title-page .gn-status-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.7fr);
    gap: 0 2rem;
  }

  .gn-title-page .gn-status-card__sub { margin-top: 0.35rem; }
  .gn-title-page .gn-status-card__why { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  .gn-title-page .gn-status-card__action,
  .gn-title-page .gn-status-card__more { grid-column: 1; }

  .gn-title-page .gn-section--remind .gn-container {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

@media (max-width: 767px) {
  .gn-title-page .gn-title-crumb { padding-block: 1.1rem 0; }

  .gn-title-page .gn-section__head { align-items: flex-start; }

  .gn-title-page .gn-hero { padding-block: 1.25rem 3rem; }

  .gn-title-page .gn-title {
    grid-template-columns: 148px minmax(0, 1fr);
    grid-template-areas: "poster main" "status status";
    gap: 1.25rem 1.35rem;
  }

  .gn-title-page .gn-title__main { padding-top: 0; }

  .gn-title-page .gn-title__main .gn-hero__h1 {
    max-width: none;
    font-size: clamp(2rem, 9vw, 2.65rem);
    line-height: 1.05;
  }

  .gn-title-page .gn-title__facts { margin-top: 0.75rem; }
  .gn-title-page .gn-title__genres { margin-top: 0.75rem; }

  .gn-title-page .gn-title__overview {
    grid-column: 1 / -1;
    font-size: 0.875rem;
  }

  .gn-title-page .gn-status-card {
    display: block;
    padding: 1.35rem;
  }

  .gn-title-page .gn-status-card__sub { margin-top: 0.9rem; }
  .gn-title-page .gn-status-card__why { margin-top: 1rem; }

  .gn-title-page .gn-section { padding-block: 2.75rem; }

  .gn-title-page .gn-section--remind { padding-block: 1.5rem 2.25rem; }

  .gn-title-page .gn-section--remind .gn-container {
    width: auto;
    margin-inline: var(--gn-gutter);
    padding: 1.35rem;
  }

  .gn-title-page .gn-remind__item { grid-template-columns: 1fr; }

  .gn-title-page .gn-watch__group {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

}

@media (max-width: 479px) {
  .gn-title-page .gn-title {
    grid-template-columns: 1fr;
    grid-template-areas: "poster" "main" "status";
    gap: 1.25rem;
  }

  .gn-title-page .gn-title__poster {
    width: min(62vw, 210px);
  }

  .gn-title-page .gn-title__main .gn-hero__h1 { font-size: clamp(2.25rem, 11vw, 3rem); }

  .gn-title-page .gn-title__overview {
    margin-top: 1.1rem;
    line-height: 1.65;
  }

  .gn-title-page .gn-watch__row {
    align-items: flex-start;
  }

  .gn-title-page .gn-watch__row-left,
  .gn-title-page .gn-watch__row-right {
    flex-wrap: wrap;
  }

}

/* ==========================================================================
   25. Consumer media system — graphite, warm gold and open content layouts
   ========================================================================== */
:root {
  --gn-bg: #0b0c0f;
  --gn-surface: #121419;
  --gn-surface-raised: #191b22;
  --gn-text: #f3f1ec;
  --gn-text-muted: #a6a9b3;
  --gn-text-dim: #747783;
  --gn-border: #262831;
  --gn-accent: #e3b74f;
  --gn-accent-hover: #f0cc71;
  --gn-accent-ink: #211806;
  --gn-urgent: #ff6f73;
  --gn-success: #62c995;
  --gn-radius: 8px;
  --gn-radius-sm: 6px;
  --gn-radius-lg: 12px;
  --gn-max-w: 1280px;
}

body {
  background: var(--gn-bg);
  color: var(--gn-text);
}

:focus-visible { outline-color: var(--gn-accent); }

.gn-section__title,
.gn-leaving-head__title {
  color: var(--gn-text);
  font-weight: 760;
  letter-spacing: -0.035em;
}

.gn-section__subtitle { color: var(--gn-text-muted); }
.gn-section__cta { color: #c1c3cc; }
.gn-section__cta:hover { color: var(--gn-accent-hover); }
.gn-section__title--star::before { color: var(--gn-accent); }

/* Header: quiet navigation, strong wordmark, no dashboard hover tiles. */
.gn-header {
  background: rgb(11, 12, 15);
  border-bottom: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.gn-header__inner {
  height: 66px;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.gn-logo__text {
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: -0.025em;
}

.gn-logo__gone { color: var(--gn-text); }
.gn-logo__next { color: var(--gn-accent); }
.gn-nav__list { gap: 0.85rem; }

.gn-nav__link,
.gn-nav__summary,
.gn-nav__icon-link {
  position: relative;
  padding: 0.7rem 0.25rem;
  border-radius: 0;
  color: #b2b4bd;
  font-size: 0.825rem;
  font-weight: 560;
}

.gn-nav__link:hover,
.gn-nav__summary:hover,
.gn-nav__icon-link:hover,
.gn-nav__link--active,
.gn-nav__menu[open] > .gn-nav__summary {
  color: var(--gn-text);
  background: transparent;
}

.gn-nav__link--active::after,
.gn-nav__menu[open] > .gn-nav__summary::after {
  content: "";
  position: absolute;
  right: 0.25rem;
  bottom: 0.2rem;
  left: 0.25rem;
  height: 2px;
  background: var(--gn-accent);
}

.gn-nav__panel,
.gn-nav__dropdown {
  background: rgba(18, 20, 25, 0.98);
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45);
}

.gn-nav__panel-list a:hover,
.gn-nav__group-summary:hover,
.gn-nav__group-list a:hover,
.gn-nav__mobile-link:hover {
  background: var(--gn-surface-raised);
}

/* Shared media cards: imagery leads; chrome recedes. */
.gn-row { gap: clamp(14px, 1.35vw, 20px); }

.gn-card__poster-wrap {
  border: 0;
  border-radius: 9px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.gn-card__rating {
  background: rgba(8, 8, 11, 0.84);
  border-color: rgba(255, 255, 255, 0.14);
  border-radius: 4px;
}

.gn-card__meta { margin-top: 0.7rem; }
.gn-card__title { color: var(--gn-text); font-weight: 680; }
.gn-card__info { color: #858893; }
.gn-card__leaving { color: var(--gn-urgent); }
.gn-card__leaving::before { width: 8px; }
.gn-card__leaving--past { color: #8d909a; }

.gn-where-chip {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--gn-accent-hover);
}

@media (hover: hover) {
  .gn-card:hover .gn-card__poster-wrap {
    transform: translateY(-5px);
    border-color: transparent;
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.42);
  }
}

/* Homepage: editorial opening, media controls, varied tonal section rhythm. */
.home:not(.gn-title-page) .gn-main > .gn-hero:not(.gn-inner-hero) {
  min-height: 0;
  padding-block: clamp(4.75rem, 7.7vw, 6.75rem) clamp(2rem, 4vw, 3.25rem);
  border-bottom: 0;
  background: var(--gn-bg);
}

.home .gn-main > .gn-hero:not(.gn-inner-hero)::after { display: none; }

.home .gn-hero__h1 {
  max-width: 13.5ch;
  margin-bottom: 1.5rem;
  color: var(--gn-text);
  font-size: clamp(3.35rem, 6vw, 5.35rem);
  font-weight: 830;
  line-height: 0.96;
  letter-spacing: -0.065em;
}

.home .gn-hero__h1 .gn-muted { color: var(--gn-accent); }

.home .gn-hero__sub {
  max-width: 58ch;
  color: #b0b2bb;
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  line-height: 1.7;
}

.home .gn-section {
  padding-block: clamp(3.6rem, 5.5vw, 5.2rem);
}

.home .gn-section + .gn-section { border-top: 0; }

.home #leaving-soon {
  padding-block: clamp(2rem, 3.8vw, 3.25rem) clamp(4.5rem, 6vw, 5.75rem);
  background: #0e0f13;
}

.home .gn-leaving-head { align-items: center; }
.home .gn-leaving-head__count { color: #7f828d; }

.home .gn-time-control {
  gap: 0.25rem;
  overflow: visible;
  border: 0;
  border-radius: 7px;
  background: transparent;
}

.home .gn-time-control a,
.home .gn-time-control label,
.home .gn-time-control span {
  min-height: 42px;
  padding: 0.72rem 1rem;
  border: 0;
  border-radius: 6px;
  color: #a7a9b2;
}

.home .gn-time-control a:hover { color: var(--gn-text); background: #191b21; }

.home .gn-time-control input[type="radio"]:checked + label,
.home .gn-time-control a.is-active,
.home .gn-time-control span.is-active {
  color: var(--gn-accent-ink);
  background: var(--gn-accent);
  box-shadow: none;
}

.home .gn-svc-filter {
  gap: 1.6rem;
  margin-block: 1.1rem 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.home .gn-svc-filter a,
.home .gn-svc-filter label {
  position: relative;
  min-height: 40px;
  padding: 0.5rem 0 0.75rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #9598a2;
}

.home .gn-svc-filter a:hover,
.home .gn-svc-filter label:hover { color: var(--gn-text); background: transparent; }

.home .gn-svc-filter input[type="radio"]:checked + label,
.home .gn-svc-filter a.is-active {
  border: 0;
  background: transparent;
  color: var(--gn-text);
  box-shadow: none;
}

.home .gn-svc-filter a.is-active::after,
.home .gn-svc-filter input[type="radio"]:checked + label::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--gn-accent);
}

/* The filter block has intentionally specific legacy selectors because it is
   replaced in-place after each progressive-enhancement request. Keep the new
   open control treatment equally specific so the fetched state is identical. */
.home #leaving-soon .gn-time-control {
  min-height: 42px;
  border: 0;
  border-radius: 7px;
  background: transparent;
}

.home #leaving-soon .gn-time-control a,
.home #leaving-soon .gn-time-control label,
.home #leaving-soon .gn-time-control span {
  min-height: 42px;
  padding: 0.72rem 1rem;
  border: 0;
  border-radius: 6px;
}

.home #leaving-soon .gn-time-control a:hover {
  border: 0;
  background: #191b21;
  color: var(--gn-text);
}

.home #leaving-soon .gn-time-control a.is-active {
  border: 0;
  background: var(--gn-accent);
  color: var(--gn-accent-ink);
  box-shadow: none;
}

.home #leaving-soon .gn-home-filters {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.6rem;
  margin-block: 1.1rem 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.home #leaving-soon .gn-home-filters .gn-svc-filter {
  gap: 1.6rem;
  margin: 0;
  border: 0;
}

.home #leaving-soon .gn-home-filters .gn-type-filter { margin-left: auto; }

.home #leaving-soon .gn-svc-filter a,
.home #leaving-soon .gn-svc-filter label {
  min-height: 40px;
  padding: 0.5rem 0 0.75rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.home #leaving-soon .gn-svc-filter a:hover {
  border: 0;
  background: transparent;
  color: var(--gn-text);
}

.home #leaving-soon .gn-svc-filter a.is-active {
  border: 0;
  background: transparent;
  color: var(--gn-text);
  box-shadow: none;
}

.home .gn-section__more { margin-top: 2.25rem; }

.home .gn-btn-pill {
  min-height: 44px;
  padding: 0.75rem 1.15rem;
  border: 0;
  border-radius: 7px;
  background: var(--gn-surface-raised);
  color: #d7d8de;
}

.home .gn-btn-pill:hover { background: var(--gn-accent); color: var(--gn-accent-ink); }

.home #browse-by-service {
  background: #14161b;
}

.home .gn-services-grid {
  gap: 0 clamp(1.5rem, 3vw, 3.5rem);
  margin-top: 1.2rem;
}

.home .gn-service-tile {
  min-height: 76px;
  padding: 1rem 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  background: transparent;
}

.home .gn-service-tile__copy { gap: 0.25rem; }
.home .gn-service-tile__name { color: var(--gn-text); font-size: 1rem; }
.home .gn-service-tile__count { color: #858893; }

.home .gn-service-tile:hover {
  transform: none;
  border-color: rgba(227, 183, 79, 0.7);
  background: transparent;
}

.home .gn-service-tile:hover .gn-service-tile__name { color: var(--gn-accent-hover); }

.home #highly-rated { background: #101116; }

.home .gn-how-intro {
  max-width: 68ch;
  color: #a6a8b1;
}

.home .gn-how-grid { gap: clamp(1.75rem, 4vw, 4.5rem); }

.home .gn-how-grid::before {
  background: rgba(227, 183, 79, 0.38);
}

.home .gn-how-card__icon,
.home .gn-how-card__icon--red,
.home .gn-how-card__icon--blue,
.home .gn-how-card__icon--green {
  border: 0;
  background: var(--gn-accent);
  color: var(--gn-accent-ink);
}

.home .gn-how-card__body { color: #9396a0; }

.home .gn-section--cta {
  padding-block: 1rem 4.5rem;
}

.home .gn-cta-block {
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border: 0;
  border-radius: 12px;
  background: #171922;
  box-shadow: none;
}

.home .gn-cta-block__title { color: var(--gn-text); letter-spacing: -0.035em; }
.home .gn-cta-block__sub,
.home .gn-cta-block__note { color: #989ba6; }

.home .gn-cta-block__input {
  min-height: 46px;
  border-color: #343744;
  border-radius: 7px;
  background: #0d0e12;
  color: var(--gn-text);
}

.home .gn-cta-block__input:focus { border-color: var(--gn-accent); }

.home .gn-cta-block__btn {
  min-height: 46px;
  border-radius: 7px;
  background: var(--gn-accent);
  color: var(--gn-accent-ink);
}

.home .gn-cta-block__btn:hover { background: var(--gn-accent-hover); }

.home .gn-faq { margin-top: 1.5rem; }
.home .gn-faq__item { border-color: rgba(255, 255, 255, 0.1); }
.home .gn-faq__item summary { min-height: 58px; color: #dddde2; }
.home .gn-faq__item summary:hover { color: var(--gn-accent-hover); }
.home .gn-faq__chevron { color: #7d808b; }
.home .gn-faq__answer { color: #9a9da7; }

/* Browse, date and service catalogues share one compact place → title →
   content rhythm. A service with a local backdrop uses the same header-over-
   hero state as the homepage and title pages; ordinary catalogues stay plain. */
.gn-inner-hero {
  --gn-inner-hero-top: clamp(1.35rem, 2.5vw, 2rem);
  --gn-inner-hero-bottom: clamp(1.6rem, 3vw, 2.4rem);
  padding-block: var(--gn-inner-hero-top) var(--gn-inner-hero-bottom);
  border-bottom: 0;
  background-color: var(--gn-bg);
}

.gn-inner-hero .gn-section__subtitle { margin: 0 0 0.8rem; }
.gn-inner-hero .gn-hero__h1 { margin-bottom: 0.55rem; }
.gn-inner-hero .gn-hero__sub { margin: 0; }
.gn-inner-hero + .gn-section { padding-top: clamp(1.65rem, 3vw, 2.35rem); }
.gn-browse .gn-window-switch { padding-top: 0.75rem; }
.gn-browse .gn-window-switch + .gn-section { padding-top: 1rem; }

.gn-browse .gn-hero.gn-hero--backdrop {
  padding-top: calc(66px + var(--gn-inner-hero-top));
  background-color: var(--gn-bg);
}

/* One artwork layer spans the hero and its visual exit, without changing the
   hero's flow or moving its content. */
.gn-browse .gn-inner-hero.gn-hero--backdrop {
  overflow: visible;
  isolation: isolate;
}

.gn-browse .gn-inner-hero.gn-hero--backdrop > .gn-container {
  position: relative;
  z-index: 1;
}

.gn-browse .gn-inner-hero.gn-hero--backdrop::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  left: 0;
  height: calc(100% + 90px);
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 72% 72% at 0 0, rgba(13, 14, 18, 0.94) 0%, rgba(13, 14, 18, 0.72) 35%, rgba(13, 14, 18, 0.30) 65%, transparent 100%),
    linear-gradient(90deg, rgba(13, 14, 18, 0.96) 0%, rgba(13, 14, 18, 0.82) 42%, rgba(13, 14, 18, 0.40) 70%, transparent 100%),
    linear-gradient(0deg, rgba(13, 14, 18, 0.92) 0%, rgba(13, 14, 18, 0.20) 72%, transparent 100%),
    linear-gradient(180deg, transparent calc(100% - 80px), var(--gn-bg) 100%),
    var(--gn-browse-backdrop);
  background-position: var(--gn-browse-backdrop-focus-x, 50%) var(--gn-browse-backdrop-focus-y, 50%);
  background-repeat: no-repeat;
  background-size: cover;
}

.gn-browse .gn-inner-hero.gn-hero--backdrop::after { display: none; }

/* Browse controls are an open editorial toolbar, not a boxed form panel. The
   existing form fields and links remain untouched so every direct-link and
   no-JavaScript filter state continues to work. */
.gn-browse .gn-filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 1rem 1.5rem;
  margin: 0 0 1rem;
  padding: 0 0 1rem;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 0;
  background: transparent;
}

.gn-browse .gn-filter-bar__controls {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
}

.gn-browse .gn-filter-bar__field {
  flex: 0 1 auto;
  gap: 0.3rem;
}

.gn-browse .gn-filter-bar__field label {
  color: var(--gn-text-dim);
  font-size: 0.625rem;
  font-weight: 650;
  letter-spacing: 0.07em;
}

.gn-browse .gn-filter-bar__field select {
  min-height: 38px;
  min-width: 8.5rem;
  padding: 0.45rem 2rem 0.45rem 0.7rem;
  border-color: rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: #15171d;
  color: var(--gn-text);
  font-size: 0.8125rem;
  font-weight: 600;
}

.gn-browse .gn-filter-bar__field--service select { min-width: 10.5rem; }
.gn-browse .gn-filter-bar__field select:hover { border-color: rgba(227, 183, 79, 0.62); }
.gn-browse .gn-filter-bar__field select:focus-visible {
  outline: 2px solid var(--gn-accent);
  outline-offset: 2px;
}

.gn-browse .gn-filter-bar__actions {
  min-height: 38px;
  margin-left: auto;
  font-size: 0.8125rem;
}

.gn-browse .gn-filter-bar__reset { color: var(--gn-text-muted); }
.gn-browse .gn-filter-bar__reset:hover { color: var(--gn-accent-hover); }

.gn-browse .gn-window-switch {
  padding: 0;
}

.gn-browse .gn-window-switch .gn-time-control {
  display: flex;
  width: auto;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 0;
  background: transparent;
}

.gn-browse .gn-window-switch .gn-time-control a,
.gn-browse .gn-window-switch .gn-time-control span {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 0 0.55rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--gn-text-muted);
  font-size: 0.8125rem;
  font-weight: 650;
}

.gn-browse .gn-window-switch .gn-time-control a:hover { color: var(--gn-text); }
.gn-browse .gn-window-switch .gn-time-control .is-active { color: var(--gn-text); }
.gn-browse .gn-window-switch .gn-time-control .is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--gn-accent);
}

.gn-browse .gn-window-switch .gn-time-control a:focus-visible {
  outline: 2px solid var(--gn-accent);
  outline-offset: 3px;
}

/* Title pages: open editorial status, integrated reminder and provider-led offers. */
.gn-title-page .gn-title-crumb { padding-block: 1.75rem 0; }
.gn-title-page .gn-title-crumb .gn-section__subtitle { color: #787b85; }
.gn-title-page .gn-title-crumb a { color: #a4a6af; }

/* A hero-backed page keeps the shared header transparent at its top. Its
   backdrop owns the navigation contrast, so the header remains edge-less. */
body:has(.gn-main > .gn-hero--backdrop) .gn-header {
  margin-bottom: -66px;
  background-color: rgba(11, 12, 15, var(--gn-header-scroll-opacity, 0));
  transition: background-color 160ms linear;
}

.gn-title-page .gn-hero {
  padding-block: 0 3rem;
  border-bottom: 0;
  background-color: var(--gn-bg);
}

.gn-title-page .gn-hero .gn-title-crumb { padding-block: 1.5rem clamp(1.75rem, 3vw, 2.75rem); }
body.gn-title-page:has(.gn-hero--backdrop) .gn-hero .gn-title-crumb { padding-top: calc(66px + 1.5rem); }

.gn-title-page .gn-title {
  grid-template-columns: 250px minmax(0, 1fr) minmax(250px, 300px);
  gap: clamp(2rem, 3.5vw, 4rem);
}

.gn-title-page .gn-title__poster-column {
  grid-area: poster;
  display: grid;
  width: 100%;
  min-width: 0;
  justify-items: stretch;
  gap: 0.7rem;
}

.gn-title-page .gn-title__poster {
  grid-area: auto;
  transform: translateY(-1.25rem);
  border: 0;
  border-radius: 9px;
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.42);
}

.gn-title-page .gn-title__watch-link {
  display: inline-flex;
  box-sizing: border-box;
  width: 100%;
  min-height: 47px;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 0;
  border-radius: var(--gn-radius-sm);
  background: var(--gn-accent);
  color: var(--gn-accent-ink);
  font-size: 0.875rem;
  font-weight: 650;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.gn-title-page .gn-title__watch-link:hover {
  background: var(--gn-accent-hover);
  color: var(--gn-accent-ink);
}
.gn-title-page .gn-title__watch-link:focus-visible {
  outline: 2px solid var(--gn-accent);
  outline-offset: 3px;
}

.gn-title-page .gn-title__main { padding-top: 0; }

.gn-title-page .gn-title__main .gn-hero__h1 {
  max-width: none;
  color: var(--gn-text);
  font-size: clamp(3rem, 4.8vw, 4.5rem);
  font-weight: 820;
  line-height: 0.98;
  letter-spacing: -0.06em;
  text-wrap: wrap;
}

.gn-title-page .gn-title__main .gn-hero__h1.gn-title--long {
  font-size: clamp(2.55rem, 4vw, 3.8rem);
  line-height: 1;
}

.gn-title-page .gn-title__main .gn-hero__h1.gn-title--very-long {
  font-size: clamp(2.2rem, 3.35vw, 3.2rem);
  line-height: 1.04;
}

.gn-title-page .gn-title__facts { color: #b2b4bd; }
.gn-title-page .gn-title__facts span:not(:last-child)::after { color: #555862; }

.gn-title-page .gn-title__genres .gn-where-chip {
  color: var(--gn-accent-hover);
}

.gn-title-page .gn-title__overview {
  max-width: 56ch;
  color: #b0b2ba;
  font-size: 0.975rem;
  line-height: 1.75;
}

.gn-title-page .gn-title__overview-preview { display: none; }

.gn-title-page .gn-title__overview.is-enhanced .gn-title__overview-full { display: none; }
.gn-title-page .gn-title__overview.is-enhanced .gn-title__overview-preview { display: inline; }

.gn-title-page .gn-title__overview.is-enhanced.is-expanded .gn-title__overview-full { display: inline; }
.gn-title-page .gn-title__overview.is-enhanced.is-expanded .gn-title__overview-preview { display: none; }

.gn-title-page .gn-title__overview-toggle {
  display: inline-flex;
  margin-top: 0;
  padding: 0;
  border: 0;
  color: var(--gn-accent);
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 650;
  cursor: pointer;
}

.gn-title-page .gn-title__overview.is-enhanced.is-expanded .gn-title__overview-toggle {
  display: flex;
  width: max-content;
  margin-top: 0.45rem;
}

.gn-title-page .gn-title__overview-toggle[hidden] { display: none; }
.gn-title-page .gn-title__overview-toggle:hover { color: var(--gn-accent-hover); }
.gn-title-page .gn-title__overview-toggle:focus-visible {
  outline: 2px solid var(--gn-accent);
  outline-offset: 3px;
}

.gn-title-page .gn-status-card,
.gn-title-page .gn-status-card--leaving,
.gn-title-page .gn-status-card--left,
.gn-title-page .gn-status-card--available {
  margin-top: 0;
  min-height: 100%;
  padding: 0.75rem 0 0.75rem clamp(1.5rem, 2.5vw, 2.25rem);
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 0;
  background: transparent;
}

.gn-title-page .gn-status-card__headline {
  color: var(--gn-text);
  font-size: 1.3rem;
  font-weight: 720;
}

.gn-title-page .gn-status-card__sub { color: #c0c1c8; }

.gn-title-page .gn-status-card__departures {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  color: #c0c1c8;
  font-size: 0.875rem;
  line-height: 1.55;
}

.gn-title-page .gn-status-card__departures li + li { margin-top: 0.25rem; }

.gn-title-page .gn-status-card__countdown {
  color: var(--gn-urgent);
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 790;
}

@media (min-width: 1100px) {
  .gn-title-page .gn-title__main {
    align-self: end;
  }

  .gn-title-page .gn-status-card,
  .gn-title-page .gn-status-card--leaving,
  .gn-title-page .gn-status-card--left,
  .gn-title-page .gn-status-card--available {
    align-self: end;
    min-height: 0;
    margin-top: 0;
    padding-bottom: 0;
  }
}

.gn-title-page .gn-status-card__why { color: #858893; }
.gn-title-page .gn-status-card__action a,
.gn-title-page .gn-status-card__more a { color: var(--gn-accent-hover); }

.gn-title-page .gn-section { padding-block: clamp(3.4rem, 5vw, 4.75rem); }
.gn-title-page .gn-section + .gn-section { border-top: 0; }
.gn-title-page .gn-section__title { font-size: clamp(1.55rem, 2.4vw, 2rem); }
.gn-title-page .gn-section__subtitle { color: #8d909a; }

/* Lower title content is deliberately editorial rather than another poster
   rail: the main facts stay readable while one compact actionable list sits
   alongside it on wide screens. */
.gn-title-page .gn-title-lower {
  padding-top: clamp(3rem, 4.5vw, 4.25rem);
  padding-bottom: clamp(2rem, 3vw, 3rem);
}
.gn-title-page .gn-title-lower__section { padding-block: 0; }

.gn-title-page .gn-title-answer {
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.gn-title-page .gn-title-answer h2 {
  margin: 0 0 0.65rem;
  color: var(--gn-text);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 740;
  letter-spacing: -0.025em;
}

.gn-title-page .gn-title-answer p {
  max-width: 68ch;
  color: #c7c8ce;
  font-size: 0.98rem;
  line-height: 1.65;
}

@media (max-width: 979px) {
  .gn-title-page .gn-title-answer + .gn-departure-history,
  .gn-title-page .gn-title-answer + .gn-title-lower__main,
  .gn-title-page .gn-departure-history + .gn-title-lower__main,
  .gn-title-page .gn-title-lower__main + .gn-title-sidebar { margin-top: clamp(2rem, 3.5vw, 3rem); }
}

.gn-title-page .gn-title-sidebar {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.gn-title-page .gn-departure-history {
  margin-top: 0;
  padding: 0;
}

.gn-title-page .gn-title-sidebar__title {
  margin: 0 0 0.9rem;
  color: var(--gn-text);
  font-size: 1.15rem;
  font-weight: 720;
  letter-spacing: -0.02em;
}

.gn-title-page .gn-streaming-history__list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gn-title-page .gn-streaming-history__event {
  position: relative;
  min-height: 58px;
  padding: 0 0 1.15rem 1.25rem;
}

.gn-title-page .gn-streaming-history__event::before {
  content: "";
  position: absolute;
  top: 0.38rem;
  left: 0;
  width: 8px;
  height: 8px;
  border: 2px solid var(--gn-bg);
  border-radius: 50%;
  background: #777a84;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.gn-title-page .gn-streaming-history__event:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1rem;
  bottom: 0;
  left: 0.3rem;
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
}

.gn-title-page .gn-streaming-history__event--left::before { background: var(--gn-urgent); }

.gn-title-page .gn-streaming-history__service,
.gn-title-page .gn-streaming-history__state,
.gn-title-page .gn-streaming-history__detail { display: block; }

.gn-title-page .gn-streaming-history__service {
  color: var(--gn-text);
  font-size: 0.92rem;
  font-weight: 680;
  line-height: 1.35;
}

.gn-title-page .gn-streaming-history__state {
  margin-top: 0.16rem;
  color: #aeb1ba;
  font-size: 0.82rem;
  line-height: 1.4;
}

.gn-title-page .gn-streaming-history__event--left .gn-streaming-history__state { color: #d88b82; }

.gn-title-page .gn-streaming-history__detail {
  margin-top: 0.12rem;
  color: #858893;
  font-size: 0.76rem;
  line-height: 1.4;
}

.gn-title-page .gn-title-sidebar__list { margin: 0; }
.gn-title-page .gn-title-sidebar__list li + li { border-top: 1px solid rgba(255, 255, 255, 0.08); }

.gn-title-page .gn-title-sidebar__item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
  padding-block: 0.75rem;
}

.gn-title-page .gn-title-sidebar__poster {
  display: block;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  border-radius: var(--gn-radius-sm);
}

.gn-title-page .gn-title-sidebar__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gn-title-page .gn-title-sidebar__copy { min-width: 0; }
.gn-title-page .gn-title-sidebar__item-title,
.gn-title-page .gn-title-sidebar__timing { display: block; }

.gn-title-page .gn-title-sidebar__item-title {
  overflow: hidden;
  color: var(--gn-text);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gn-title-page .gn-title-sidebar__timing {
  margin-top: 0.2rem;
  color: #92959f;
  font-size: 0.78rem;
}

.gn-title-page .gn-title-sidebar__item:hover .gn-title-sidebar__item-title,
.gn-title-page .gn-title-sidebar__cta:hover { color: var(--gn-accent-hover); }

.gn-title-page .gn-title-sidebar__cta {
  display: inline-block;
  margin-top: 1rem;
  color: var(--gn-accent);
  font-size: 0.85rem;
  font-weight: 650;
}

/* Once either sidebar joins the article flow, its compact desktop rows become
   a touch-scrollable poster strip rather than a long, narrow list. */
@media (max-width: 979px) {
  .gn-guide__data-list,
  .gn-title-page .gn-title-sidebar__list {
    display: grid;
    grid-auto-columns: clamp(8.25rem, 40vw, 9.25rem);
    grid-auto-flow: column;
    grid-template-rows: 1fr;
    gap: 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    padding: 0 0 0.375rem;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .gn-guide__data-list li,
  .gn-title-page .gn-title-sidebar__list li {
    min-width: 0;
    scroll-snap-align: start;
  }

  .gn-guide__data-list li + li,
  .gn-title-page .gn-title-sidebar__list li + li { border-top: 0; }

  .gn-guide__data-item,
  .gn-title-page .gn-title-sidebar__item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    height: 100%;
    padding: 0;
  }

  .gn-guide__data-poster,
  .gn-title-page .gn-title-sidebar__poster { width: 100%; }

  .gn-guide__data-item-title,
  .gn-title-page .gn-title-sidebar__item-title {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .gn-guide__data-timing,
  .gn-title-page .gn-title-sidebar__timing {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

@media (min-width: 980px) {
  .gn-title-page .gn-title-lower--has-sidebar .gn-title-lower__grid {
    display: grid;
    grid-template-columns: minmax(0, 2.15fr) minmax(260px, 0.95fr);
    grid-template-areas:
      "answer history"
      "watch related";
    column-gap: clamp(2.5rem, 5vw, 5rem);
    row-gap: clamp(2rem, 3vw, 2.75rem);
    align-items: start;
  }

  .gn-title-page .gn-title-lower--without-history:not(.gn-title-lower--without-answer) .gn-title-lower__grid {
    grid-template-areas:
      "answer answer"
      "watch related";
  }

  .gn-title-page .gn-title-lower--without-answer:not(.gn-title-lower--without-history) .gn-title-lower__grid {
    grid-template-areas:
      "watch history"
      "watch related";
  }

  .gn-title-page .gn-title-lower--without-answer.gn-title-lower--without-history .gn-title-lower__grid {
    grid-template-areas: "watch related";
  }

  .gn-title-page .gn-title-answer { grid-area: answer; }
  .gn-title-page .gn-departure-history { grid-area: history; }
  .gn-title-page .gn-title-lower__main { grid-area: watch; margin-top: 0; }
  .gn-title-page .gn-title-sidebar__related { grid-area: related; }

  /* Optical correction for the compact related rail beside the larger watch section. */
  .gn-title-page .gn-title-lower__grid .gn-title-sidebar__related { margin-top: 14px; }

  .gn-title-page .gn-title-sidebar,
  .gn-title-page .gn-departure-history {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .gn-title-page .gn-title-lower--has-sidebar .gn-title-answer + .gn-departure-history { margin-top: 0; }
}

.gn-title-page .gn-section--remind {
  padding-block: 2.25rem;
  background: #15171e;
}

.gn-title-page .gn-section--remind .gn-container {
  padding-block: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.gn-title-page .gn-remind__service { color: var(--gn-text); }
.gn-title-page .gn-remind__date { color: #8f929c; }

.gn-title-page .gn-remind__input {
  min-height: 46px;
  border-color: #353844;
  background: #0d0e12;
  color: var(--gn-text);
}

.gn-title-page .gn-remind__submit {
  min-height: 46px;
  border-color: var(--gn-accent);
  background: var(--gn-accent);
  color: var(--gn-accent-ink);
}

.gn-title-page .gn-remind__submit:hover { background: var(--gn-accent-hover); color: var(--gn-accent-ink); }

.gn-title-page .gn-title-closing {
  padding-block: clamp(1.5rem, 2vw, 2rem) 2.5rem;
}

.gn-title-page .gn-title-closing__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.gn-title-page .gn-title-closing__heading {
  margin: 0 0 0.9rem;
  color: var(--gn-text);
  font-size: 1rem;
  font-weight: 720;
  letter-spacing: -0.015em;
}

.gn-title-page .gn-title-closing__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gn-title-page .gn-title-closing__links li + li { border-top: 1px solid rgba(255, 255, 255, 0.08); }

.gn-title-page .gn-title-closing__links a {
  display: block;
  padding-block: 0.7rem;
  color: #92959f;
  font-size: 0.9rem;
  font-weight: 620;
  line-height: 1.4;
  text-decoration: none;
}

.gn-title-page .gn-title-closing__links a:hover,
.gn-title-page .gn-title-closing__links a:focus-visible { color: var(--gn-accent-hover); }

.gn-title-page .gn-title-closing__links a:focus-visible {
  outline: 2px solid var(--gn-accent);
  outline-offset: 3px;
}

.gn-title-page .gn-title-closing__newsletter-copy {
  margin: -0.25rem 0 0.9rem;
  color: var(--gn-text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.gn-title-page .gn-title-closing__form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.gn-title-page .gn-title-closing__form .gn-cta-block__row {
  align-items: stretch;
  gap: 0.5rem;
}

.gn-title-page .gn-title-closing__form .gn-cta-block__input {
  min-width: 0;
  width: 100%;
  flex: 1 1 auto;
}

.gn-title-page .gn-title-closing__form .gn-cta-block__btn {
  min-height: 38px;
  padding-inline: 0.875rem;
}

.gn-title-page .gn-title-closing__form .gn-alert__notice { margin: 0; }

.gn-title-page .gn-watch {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.gn-title-page .gn-watch__group {
  grid-template-columns: minmax(150px, 0.28fr) minmax(0, 1fr);
  gap: 1.5rem;
  padding-block: 1.25rem;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.gn-title-page .gn-watch__group-title {
  padding-top: 0.7rem;
  color: #9da0aa;
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.gn-title-page .gn-watch__group--leaving .gn-watch__group-title { color: var(--gn-urgent); }

.gn-title-page .gn-watch__row,
.gn-title-page .gn-watch__row--primary {
  min-height: 56px;
  padding-block: 0.75rem;
}

.gn-title-page .gn-watch__row + .gn-watch__row { border-top-color: rgba(255, 255, 255, 0.07); }
.gn-title-page .gn-watch__service { color: var(--gn-text); font-size: 0.95rem; }
.gn-title-page .gn-watch__quality { color: #7f828c; }
.gn-title-page .gn-watch__note,
.gn-title-page .gn-watch__price { color: #a1a4ad; }
.gn-title-page .gn-watch__link {
  color: var(--gn-accent-hover);
  font-weight: 650;
  text-align: right;
  white-space: normal;
}

.gn-title-page .gn-empty-compact {
  padding: 1.35rem 0;
  border: 0;
  border-block: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  background: transparent;
  color: #92959f;
}

.gn-title-page .gn-title-note {
  max-width: min(100%, 1100px);
  margin: clamp(1.25rem, 2vw, 1.5rem) 0 0;
  color: #777a84;
  font-size: 0.8125rem;
  line-height: 1.6;
}

.gn-title-page .gn-title-note__link { color: var(--gn-accent-hover); }

@media (max-width: 1180px) {
  .gn-title-page .gn-title-closing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gn-title-page .gn-title-closing__newsletter { grid-column: 1 / -1; }
}

@media (max-width: 979px) {
  .gn-title-page .gn-title-closing__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .gn-title-page .gn-title-closing__newsletter { grid-column: auto; }
}

/* Footer: calmer, more compact, and separated by one useful divider. */
.gn-footer {
  background: #0d0e12;
  border-color: rgba(255, 255, 255, 0.09);
}

.gn-footer__inner { padding-block: 3.25rem 1.5rem; }
.gn-footer__brand { color: var(--gn-text); }
.gn-footer__brand-accent { color: var(--gn-accent); }
.gn-footer__tagline { color: #858893; }
.gn-footer__col-title { color: #787b85; }
.gn-footer__links a { color: #9b9ea8; }
.gn-footer__links a:hover { color: var(--gn-accent-hover); }
.gn-footer__bottom { border-color: rgba(255, 255, 255, 0.09); color: #777a84; }

/* Real MotN imagery is decorative only. The existing graphite hero remains the
   fallback whenever the local title row has no stored backdrop URL. */
.home:not(.gn-title-page) .gn-main > .gn-hero.gn-hero--backdrop:not(.gn-inner-hero) {
  background-color: var(--gn-bg);
  overflow: visible;
  isolation: isolate;
}

.home:not(.gn-title-page) .gn-main > .gn-hero.gn-hero--backdrop:not(.gn-inner-hero) > .gn-container {
  position: relative;
  z-index: 1;
  transform: translateY(38px);
}

/* The homepage mirrors the service-hero artwork treatment: one image layer
   extends past the flow box and disappears into graphite without a seam. */
.home:not(.gn-title-page) .gn-main > .gn-hero.gn-hero--backdrop:not(.gn-inner-hero)::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  left: 0;
  height: calc(100% + 90px);
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 72% 72% at 0 0, rgba(13, 14, 18, 0.94) 0%, rgba(13, 14, 18, 0.72) 35%, rgba(13, 14, 18, 0.30) 65%, transparent 100%),
    linear-gradient(90deg, rgba(13, 14, 18, 0.98) 0%, rgba(13, 14, 18, 0.94) 32%, rgba(13, 14, 18, 0.72) 58%, rgba(13, 14, 18, 0.30) 100%),
    linear-gradient(0deg, rgba(13, 14, 18, 0.90) 0%, rgba(13, 14, 18, 0.30) 42%, rgba(13, 14, 18, 0.04) 76%),
    linear-gradient(180deg, transparent calc(100% - 80px), var(--gn-bg) 100%),
    var(--gn-home-backdrop);
  background-position: var(--gn-home-backdrop-focus-x, 50%) var(--gn-home-backdrop-focus-y, 50%);
  background-repeat: no-repeat;
  background-size: cover;
}

.gn-title-page .gn-hero.gn-hero--backdrop {
  --gn-title-backdrop-frame-height: 640px;
  position: relative;
  background-color: var(--gn-bg);
  background-image: none;
}

/* The artwork has a fixed cinematic frame; expanded title content continues
   in normal document flow over graphite rather than extending the image. */
.gn-title-page .gn-hero.gn-hero--backdrop::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: var(--gn-title-backdrop-frame-height);
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 72% 72% at 0 0, rgba(13, 14, 18, 0.94) 0%, rgba(13, 14, 18, 0.72) 35%, rgba(13, 14, 18, 0.30) 65%, transparent 100%),
    radial-gradient(ellipse at 73% 66%, rgba(13, 14, 18, 0.44) 0%, rgba(13, 14, 18, 0.18) 32%, transparent 62%),
    linear-gradient(90deg, rgba(13, 14, 18, 0.94) 0%, rgba(13, 14, 18, 0.90) 31%, rgba(13, 14, 18, 0.76) 57%, rgba(13, 14, 18, 0.49) 78%, rgba(13, 14, 18, 0.18) 100%),
    linear-gradient(0deg, rgba(13, 14, 18, 0.97) 0%, rgba(13, 14, 18, 0.68) 25%, rgba(13, 14, 18, 0.25) 54%, rgba(13, 14, 18, 0.03) 82%),
    linear-gradient(180deg, transparent calc(100% - 110px), var(--gn-bg) 100%),
    var(--gn-title-backdrop);
  background-position: var(--gn-title-backdrop-focus-x, 50%) var(--gn-title-backdrop-focus-y, 50%);
  background-repeat: no-repeat;
  background-size: cover;
}

/* Keep the open upper artwork visible while adding local contrast only where
   the information columns begin. This is a scrim, not a panel. */
.gn-title-page .gn-hero.gn-hero--backdrop::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  height: var(--gn-title-backdrop-frame-height);
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 48% at 54% 67%, rgba(13, 14, 18, 0.64) 0%, rgba(13, 14, 18, 0.34) 42%, transparent 76%),
    radial-gradient(ellipse 34% 52% at 88% 68%, rgba(13, 14, 18, 0.82) 0%, rgba(13, 14, 18, 0.48) 40%, transparent 74%);
}

.gn-title-page .gn-hero.gn-hero--backdrop > .gn-title-crumb,
.gn-title-page .gn-hero.gn-hero--backdrop > .gn-container {
  position: relative;
  z-index: 2;
}

@media (max-width: 1099px) {
  .home:not(.gn-title-page) .gn-main > .gn-hero.gn-hero--backdrop:not(.gn-inner-hero) > .gn-container { transform: translateY(26px); }

  .gn-title-page .gn-title {
    grid-template-columns: 200px minmax(0, 1fr);
    grid-template-areas: "poster main" "status status";
  }

  .gn-title-page .gn-status-card,
  .gn-title-page .gn-status-card--leaving,
  .gn-title-page .gn-status-card--left,
  .gn-title-page .gn-status-card--available {
    margin-top: 0;
    min-height: 0;
    padding: 1.5rem 0 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
}

@media (max-width: 767px) {
  .gn-header__inner { height: 60px; }
  .gn-nav__dropdown { top: 60px; }

  .home:not(.gn-title-page) .gn-main > .gn-hero:not(.gn-inner-hero) { padding-block: 4.125rem 1.5rem; }
  .home:not(.gn-title-page) .gn-main > .gn-hero.gn-hero--backdrop:not(.gn-inner-hero) > .gn-container { transform: translateY(18px); }

  .home .gn-hero__h1 {
    max-width: 11ch;
    font-size: clamp(2.8rem, 13vw, 4rem);
  }

  .home .gn-section { padding-block: 3.25rem; }

  .home .gn-leaving-head { align-items: flex-start; }

  .home .gn-time-control {
    width: 100%;
    padding: 0;
    overflow-x: auto;
  }

  .home .gn-time-control a { flex: 1 0 auto; text-align: center; }

  .home #leaving-soon .gn-home-filters {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
  }

  .home #leaving-soon .gn-home-filters .gn-svc-filter { gap: 1.25rem; }
  .home #leaving-soon .gn-home-filters .gn-type-filter {
    width: 100%;
    margin-left: 0;
  }

  .home .gn-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home .gn-service-tile { min-height: 72px; }

  .home .gn-how-grid::before { background: rgba(227, 183, 79, 0.38); }
  .home .gn-cta-block { padding: 1.5rem; }

  .gn-inner-hero {
    --gn-inner-hero-top: 1.25rem;
    --gn-inner-hero-bottom: 1.75rem;
  }
  .gn-browse .gn-hero.gn-hero--backdrop { padding-top: calc(60px + var(--gn-inner-hero-top)); }

  .gn-browse .gn-filter-bar { align-items: flex-start; }
  .gn-browse .gn-filter-bar__controls { flex-basis: 100%; }
  .gn-browse .gn-filter-bar__field { flex: 1 1 8.5rem; }
  .gn-browse .gn-filter-bar__field select { width: 100%; min-width: 0; }
  .gn-browse .gn-filter-bar__actions { margin-left: 0; }

  .gn-title-page .gn-hero { padding-block: 0 3.75rem; }
  .gn-title-page .gn-hero .gn-title-crumb { padding-block: 1.25rem 1.5rem; }
  body:has(.gn-main > .gn-hero--backdrop) .gn-header { margin-bottom: -60px; }
  body.gn-title-page:has(.gn-hero--backdrop) .gn-hero .gn-title-crumb { padding-top: calc(60px + 1.25rem); }

  .gn-title-page .gn-title {
    grid-template-columns: 148px minmax(0, 1fr);
  }

  .gn-title-page .gn-title__poster { transform: none; }

  .gn-title-page .gn-title__main .gn-hero__h1 {
    font-size: clamp(2.35rem, 10vw, 3.25rem);
  }

  .gn-title-page .gn-title__main .gn-hero__h1.gn-title--long {
    font-size: clamp(2.1rem, 8.5vw, 2.8rem);
  }

  .gn-title-page .gn-title__main .gn-hero__h1.gn-title--very-long {
    font-size: clamp(1.9rem, 7.4vw, 2.45rem);
  }

  .home:not(.gn-title-page) .gn-main > .gn-hero.gn-hero--backdrop:not(.gn-inner-hero)::before {
    background-image:
      radial-gradient(ellipse 105% 58% at 0 0, rgba(13, 14, 18, 0.92) 0%, rgba(13, 14, 18, 0.58) 48%, transparent 100%),
      linear-gradient(90deg, rgba(13, 14, 18, 0.96) 0%, rgba(13, 14, 18, 0.70) 64%, rgba(13, 14, 18, 0.38) 100%),
      linear-gradient(0deg, rgba(13, 14, 18, 0.88), rgba(13, 14, 18, 0.12) 68%),
      linear-gradient(180deg, transparent calc(100% - 80px), var(--gn-bg) 100%),
      var(--gn-home-backdrop);
    background-position: var(--gn-home-backdrop-focus-x, 50%) var(--gn-home-backdrop-focus-y, 50%);
  }

  .gn-title-page .gn-hero.gn-hero--backdrop::before {
    background-image:
      radial-gradient(ellipse 105% 58% at 0 0, rgba(13, 14, 18, 0.82) 0%, rgba(13, 14, 18, 0.40) 50%, transparent 100%),
      linear-gradient(180deg, rgba(13, 14, 18, 0.40) 0%, rgba(13, 14, 18, 0.78) 55%, rgba(13, 14, 18, 0.98) 100%),
      linear-gradient(180deg, transparent calc(100% - 110px), var(--gn-bg) 100%),
      var(--gn-title-backdrop-mobile, var(--gn-title-backdrop));
    background-position: var(--gn-title-backdrop-focus-x, 50%) var(--gn-title-backdrop-focus-y, 50%);
  }

  .gn-title-page .gn-status-card,
  .gn-title-page .gn-status-card--leaving,
  .gn-title-page .gn-status-card--left,
  .gn-title-page .gn-status-card--available {
    padding: 1.4rem 0 0;
    background: transparent;
  }

  .gn-title-page .gn-section { padding-block: 3.25rem; }

  .gn-title-page .gn-section--remind {
    padding-block: 2rem;
  }

  .gn-title-page .gn-section--remind .gn-container {
    width: auto;
    margin-inline: var(--gn-gutter);
    padding: 0;
  }

  .gn-title-page .gn-watch__group { grid-template-columns: 1fr; gap: 0.15rem; }

}

@media (max-width: 479px) {
  .home .gn-services-grid { gap: 0 1rem; }
  .home .gn-service-tile__name { font-size: 0.9rem; }

  .gn-title-page .gn-title {
    grid-template-columns: 1fr;
    grid-template-areas: "poster" "main" "status";
    gap: 1.5rem;
  }
  .gn-title-page .gn-title__poster { width: min(66vw, 220px); }

  .gn-title-page .gn-remind__row {
    flex-direction: column;
    align-items: stretch;
  }

  .gn-title-page .gn-remind__input,
  .gn-title-page .gn-remind__submit { width: 100%; }

}

/* Homepage departure explainer: one overview paired with a compact sequence. */
.home .gn-how-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.home .gn-how-overview { max-width: 36rem; }

.home .gn-how-layout .gn-section__title { margin-bottom: 0.875rem; }

.home .gn-how-layout .gn-how-intro {
  max-width: none;
  margin: 0;
}

.home .gn-how-layout .gn-how-supporting {
  margin: 0.875rem 0 0;
  color: #a6a8b1;
  font-size: 0.875rem;
  line-height: 1.7;
}

.home .gn-how-layout .gn-how-intro__link {
  display: inline-flex;
  margin-top: 1rem;
}

.home .gn-how-layout .gn-how-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
}

.home .gn-how-layout .gn-how-grid::before { content: none; }

.home .gn-how-layout .gn-how-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 1rem;
  padding: 0 0 1.25rem;
}

.home .gn-how-layout .gn-how-card + .gn-how-card {
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.home .gn-how-layout .gn-how-card__icon {
  grid-row: 1 / span 2;
  width: 40px;
  height: 40px;
  margin: 0;
}

.home .gn-how-layout .gn-how-card__title {
  align-self: end;
  margin-bottom: 0.375rem;
}

.home .gn-how-layout .gn-how-card__body {
  grid-column: 2;
  margin: 0;
}

@media (max-width: 900px) {
  .home .gn-how-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .home .gn-how-overview { max-width: 42rem; }
}

/* Homepage closing area: one signup and FAQ section, with their existing controls. */
.home .gn-section--closing { padding-block: clamp(2.75rem, 5vw, 4.5rem); }

.home .gn-closing-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.home .gn-closing__newsletter .gn-cta-block {
  display: block;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: var(--gn-surface);
}

@media (min-width: 901px) {
  .home .gn-closing__newsletter { align-self: center; }
}

.home .gn-closing__newsletter .gn-cta-block__title,
.home .gn-closing__faq .gn-section__title {
  font-size: 1.125rem;
}

.home .gn-closing__newsletter .gn-cta-block__sub { margin-top: 0.375rem; }

.home .gn-closing__newsletter .gn-cta-block__form { margin-top: 1.25rem; }

.home .gn-closing__newsletter .gn-cta-block__row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.home .gn-closing__newsletter .gn-cta-block__input {
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
}

.home .gn-closing__newsletter .gn-cta-block__btn { flex: 0 0 auto; }

.home .gn-closing__faq .gn-faq { margin-top: 0.875rem; }

@media (max-width: 900px) {
  .home .gn-closing-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .home .gn-closing__newsletter { align-self: start; }
}

@media (max-width: 479px) {
  .home .gn-closing__newsletter .gn-cta-block__row { flex-direction: column; }
  .home .gn-closing__newsletter .gn-cta-block__btn { width: 100%; }
}

/* Keep the homepage compact on small screens without changing its desktop rhythm. */
@media (max-width: 767px) {
  .home .gn-section { padding-block: 2.75rem; }
  .home .gn-section__more { margin-top: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gn-card__poster-wrap,
  .gn-service-tile { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .gn-card__poster-wrap,
  .gn-faq__chevron { transition: none; }
}

/* Generic departures closes with one paired information section. */
.gn-browse-info__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.gn-browse-info__column { min-width: 0; }

.gn-browse-info--window .gn-browse-info__layout {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.gn-browse-info--window .gn-browse-info__column--faq { order: -1; }

.gn-browse-info .gn-browse-explain__body {
  max-width: 52ch;
  margin-top: 0.625rem;
}

.gn-browse-info .gn-faq { margin-top: 0.625rem; }

@media (max-width: 900px) {
  .gn-browse-info__layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* Generic departures: route links sit above, but remain distinct from filters. */
.gn-quick-views {
  margin: 0.875rem 0 1rem;
}

.gn-quick-views .gn-ctx-nav__heading { margin-bottom: 0.5rem; }

/* The generic catalogue leaves the hero with a clear section break; a time
   window already has its switcher in between, so its result heading stays
   closer to that divider. */
.gn-browse .gn-browse-results {
  padding-top: clamp(3rem, 4vw, 3.5rem);
  padding-bottom: 2rem;
}

.gn-browse .gn-window-switch + .gn-browse-results {
  padding-top: 1.5rem;
}

/* Keep the result controls and grid as one unit. */
.gn-browse .gn-quick-views { margin: 0.75rem 0 1.5rem; }

.gn-browse .gn-filter-bar {
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
}

.gn-browse .gn-browse-meta { margin-bottom: 1.5rem; }

/* Results hand off once to their next major block: a contextual nav receives
   its space from the results below, while a following section receives it
   from both sides in equal, compact portions. */
.gn-browse .gn-browse-results + .gn-section { padding-top: 2rem; }

.gn-browse .gn-section--cta { padding-top: 1.5rem; }

/* The CTA owns the space before the paired information block, avoiding its
   former stacked 56px + section-top gap. */
.gn-browse .gn-section--cta + .gn-browse-info { padding-top: 0; }
.gn-browse .gn-browse-info { padding-bottom: clamp(3rem, 5vw, 4.5rem); }

/* The two time-window columns are related content, not two separate major
   sections, so their desktop gutter stays below the page-level section gap. */
.gn-browse .gn-browse-info--window .gn-browse-info__layout {
  gap: clamp(2rem, 3vw, 3rem);
}

/* A true 404 is a focused recovery state, not another browse section. */
.gn-not-found-main { display: flex; }

.gn-not-found {
  display: grid;
  width: 100%;
  place-items: center;
  padding-block: clamp(3rem, 8vw, 6rem);
  text-align: center;
}

.gn-not-found__inner { width: min(100%, 38rem); margin-inline: auto; }

.gn-not-found__number {
  margin: 0;
  color: var(--gn-text);
  font-size: clamp(5.5rem, 14vw, 9rem);
  font-weight: 820;
  letter-spacing: -0.09em;
  line-height: 0.8;
}

.gn-not-found__number span:last-child { color: var(--gn-accent); }

.gn-not-found__heading {
  margin-top: 1rem;
  color: var(--gn-text);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
}

.gn-not-found__copy {
  max-width: 34rem;
  margin: 0.875rem auto 0;
  color: var(--gn-text-muted);
  font-size: 1rem;
  line-height: 1.6;
}

.gn-not-found__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.875rem;
}

.gn-not-found__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.65rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--gn-radius-sm);
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.2;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.gn-not-found__button--primary { background: var(--gn-accent); color: var(--gn-accent-ink); }
.gn-not-found__button--primary:hover { background: var(--gn-accent-hover); }
.gn-not-found__button--secondary { border-color: var(--gn-border); color: var(--gn-text); }
.gn-not-found__button--secondary:hover { border-color: var(--gn-text-muted); background: var(--gn-surface-raised); }

.gn-not-found__services {
  display: inline-block;
  margin-top: 1.25rem;
  color: var(--gn-text-muted);
  font-size: 0.875rem;
}

.gn-not-found__services:hover { color: var(--gn-text); }

@media (max-width: 479px) {
  .gn-not-found { padding-block: 3rem; }
  .gn-not-found__actions { flex-direction: column; }
  .gn-not-found__button { width: 100%; }
}

/* Recently Left interrupts its result sequence with the shared signup after a
   complete row, without treating the signup as a poster card. */
.gn-recent-newsletter {
  grid-column: 1 / -1;
  margin-block: 0.25rem;
  position: relative;
  isolation: isolate;
}

/* The signup is a full-bleed section break in this grid, not a floating card. */
.gn-recent-newsletter::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset-block: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #171922;
}

/* The viewport-wide paint must not create a horizontal scroll surface. */
.wp-site-blocks:has(.gn-recent-newsletter) { overflow-x: clip; }

.gn-recent-newsletter .gn-cta-block {
  position: relative;
  z-index: 1;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: clamp(1.5rem, 3vw, 2rem);
}

/* Its help content is one closing section: FAQ first, then the watch-guide
   copy, while the original sections retain their own content and semantics. */
.gn-recent-closing__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.gn-recent-closing__layout > .gn-section {
  min-width: 0;
  padding-block: 0;
  border: 0;
}

.gn-recent-closing__layout > .gn-section > .gn-container {
  max-width: none;
  margin: 0;
  padding-inline: 0;
}

.gn-recent-closing__layout > .gn-section[aria-labelledby="gn-browse-faq-heading"] { order: -1; }

/* Service pages close with their existing tracking copy and newsletter as one
   paired section. The tracking copy precedes the signup at every viewport. */
.gn-service-closing__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.gn-service-closing__layout > .gn-section {
  min-width: 0;
  padding-block: 0;
  border: 0;
}

.gn-service-closing__layout > .gn-section > .gn-container {
  max-width: none;
  margin: 0;
  padding-inline: 0;
}

.gn-service-closing__layout > .gn-browse-explain { order: -1; }

.gn-service-closing .gn-cta-block { display: block; }
.gn-service-closing .gn-cta-block__form { margin-top: 1.25rem; }
.gn-service-closing .gn-cta-block__input { min-width: 0; flex: 1 1 auto; }
.gn-service-closing .gn-cta-block__btn { flex: 0 0 auto; }

@media (max-width: 900px) {
  .gn-recent-closing__layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .gn-service-closing__layout { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 767px) {
  .gn-browse .gn-browse-results {
    padding-top: 2.25rem;
    padding-bottom: 1.5rem;
  }

  .gn-browse .gn-window-switch + .gn-browse-results { padding-top: 1.5rem; }
  .gn-browse .gn-quick-views { margin-bottom: 1.25rem; }

  .gn-browse .gn-filter-bar {
    margin-bottom: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .gn-browse .gn-browse-meta { margin-bottom: 1.25rem; }
  .gn-browse .gn-browse-results + .gn-section { padding-top: 1.5rem; }
  .gn-browse .gn-ctx-nav { padding-block: 1.25rem; }
  .gn-browse .gn-section--cta { padding-top: 1rem; }
  .gn-browse .gn-browse-info { padding-bottom: 2.5rem; }
  /* Keep the time-window FAQ and coverage blocks readable on phones: the
     more-specific desktop window rule must still collapse to one track. */
  .gn-browse .gn-browse-info--window .gn-browse-info__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
}

@media (max-width: 599px) {
  /* Match the narrow All Departures filter boundary: 0.625rem control
     padding plus 0.625rem bottom margin before its result content. */
  .gn-browse .gn-window-switch + .gn-browse-results { padding-top: 1.25rem; }
}

@media (min-width: 768px) {
  /* All Departures has no window divider between the hero and results. Match
     its effective hero-to-results rhythm without changing the time-window
     pages or any control spacing. */
  .gn-browse .gn-inner-hero + .gn-browse-results { padding-top: 2rem; }

  /* Service pages retain a clear but shorter hero handoff than the generic
     catalogue, matching their existing compact result context. */
  .gn-browse .gn-inner-hero + .gn-browse-results--service { padding-top: 1.5rem; }

  /* The result section already owns 2rem below its pagination; give Recently
     Left the remaining 1.5rem so the supporting section begins at ~56px. */
  .gn-browse .gn-browse-results + .gn-service-left-section { padding-top: 1.5rem; }
}

/* The service-hero artwork deliberately extends below its flow box for the
   fade-out. Keep that layer behind the local results foreground so it cannot
   paint over the filter controls when their hero gap is compact. */
.gn-browse .gn-browse-results--service {
  position: relative;
  z-index: 1;
}

/* Phone title pages lead with the title, then pair the poster/action with
   stacked identity facts. The synopsis and lifecycle retain a readable span. */
@media (max-width: 767px) {
  .gn-title-page .gn-title {
    grid-template-columns: minmax(10rem, 1.3fr) minmax(0, 0.7fr);
    grid-template-areas:
      "title title"
      "poster identity"
      "watch watch"
      "overview overview"
      "status status";
    column-gap: 1rem;
    row-gap: 1.25rem;
  }

  .gn-title-page .gn-title__main { display: contents; }

  .gn-title-page .gn-title__main .gn-hero__h1 {
    grid-area: title;
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    margin: 0;
    text-wrap: initial;
  }

  .gn-title-page .gn-title__identity {
    grid-area: identity;
    min-width: 0;
    align-self: end;
    text-align: left;
  }

  .gn-title-page .gn-title__identity > .gn-hero__sub {
    margin: 0 0 0.6rem;
  }

  .gn-title-page .gn-title__facts {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    margin: 0;
    font-size: 1.125rem;
  }

  .gn-title-page .gn-title__facts span:not(:last-child)::after { display: none; }

  .gn-title-page .gn-title__facts .gn-title__facts-primary {
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }

  .gn-title-page .gn-title__facts .gn-title__facts-primary::after { content: none; }
  .gn-title-page .gn-title__facts .gn-title__facts-separator {
    display: inline;
    margin-inline: 0.35rem;
    color: var(--gn-text-dim);
  }

  .gn-title-page .gn-title__genres {
    display: grid;
    justify-items: start;
    gap: 0.4rem;
    margin-top: 0.7rem;
  }

  .gn-title-page .gn-title__overview {
    grid-area: overview;
    max-width: none;
    margin: 0;
  }

  .gn-title-page .gn-title__poster-column { display: contents; }
  .gn-title-page .gn-title__poster { width: 100%; }
  .gn-title-page .gn-title__watch-link {
    grid-area: watch;
    width: 100%;
    min-height: 48px;
    padding-inline: 0.5rem;
    font-size: 1.125rem;
  }

  /* The status/Q&A row is display:contents outside tablet; let it own the
     mobile handoff to history only when that history block exists. */
  .gn-title-page .gn-title-status-qa-row + .gn-departure-history {
    margin-top: 2rem;
  }
}

/* Outside tablet, the existing Q&A stays in its original lower-page flow and
   the hero owns the one visible lifecycle card. */
.gn-title-status-qa-row { display: contents; }
.gn-title-status-qa-row__status { display: none; }

/* Tablet has a real shared parent for lifecycle and Q&A. The hero card is
   hidden only here; the same partial is rendered once in this paired row. */
@media (min-width: 768px) and (max-width: 1099px) {
  /* Keep the tablet page rhythm deliberate: each major handoff has one
     spacing owner, matching the established 24px crumb gap and 48px
     section transitions without affecting desktop or mobile layouts. */
  .gn-title-page .gn-hero { padding-bottom: 3rem; }
  .gn-title-page .gn-hero .gn-title-crumb { padding-bottom: 1.5rem; }
  .gn-title-page .gn-title__poster { transform: none; }
  .gn-title-page .gn-title-lower { padding-top: 0; }

  .gn-title-page .gn-title > .gn-status-card { display: none; }

  .gn-title-page .gn-title-lower--has-sidebar .gn-title-lower__grid { display: block; }

  .gn-title-page .gn-title-status-qa-row {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 4vw, 3rem);
    align-items: start;
  }

  .gn-title-page .gn-title-status-qa-row__status { display: block; }

  .gn-title-page .gn-title-status-qa-row__status .gn-status-card {
    display: block;
    grid-area: auto;
    min-height: 0;
    margin: 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 0;
    border-radius: 0;
    background: transparent;
  }

  .gn-title-page .gn-title-status-qa-row .gn-title-answer {
    grid-area: auto;
    margin: 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 0;
  }

  .gn-title-page .gn-title-status-qa-row + .gn-departure-history,
  .gn-title-page .gn-title-status-qa-row + .gn-title-lower__main,
  .gn-title-page .gn-departure-history + .gn-title-lower__main {
    margin-top: 3rem;
  }
}