/*
 * doventry.com — site shell and home page.
 *
 * Translated from the Claude Design artboard `design/pages/Home.dc.html`.
 * The artboard styles everything inline with literal values; this file is the
 * token-based equivalent. Raw values are rejected here by
 * stylelint-declaration-strict-value — tokens.css is the only place a literal
 * belongs. See CLAUDE.md §3.
 *
 * Book Tracker components live in booktracker/static/booktracker/css/base.css
 * and are layered on top of this.
 */

/* ---------------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------------ */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-label);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  color: var(--color-accent-hover);
}

::selection {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}

/* height:auto keeps an image at its true aspect ratio even if the width and
 * height attributes disagree with the file. Those attributes are still worth
 * setting — they reserve layout space and prevent content jumping as images
 * load — but they must never be able to distort the picture. */
img {
  max-width: 100%;
  height: auto;
}

/* Available to screen readers, invisible on screen. Used to announce things
 * that are obvious visually but not otherwise — such as a link opening in a
 * new tab, which is disorienting when it happens unannounced. */
.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  margin: calc(var(--space-px) * -1);
  padding: 0;
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-subtle);
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  max-width: var(--measure-page);
  height: var(--space-header-height);
  margin: 0 auto;
  padding: 0 var(--space-section-x);
}

.site-header__brand {
  flex-shrink: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-brand);
  letter-spacing: var(--tracking-brand);
  white-space: nowrap;
}

.site-header__brand:hover {
  color: var(--color-accent);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-nav-gap);
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-nav-gap);
}

/* The nav and footer links are the same component — tracked uppercase Work
 * Sans, muted until hover. Defined once as .ui-link rather than twice by
 * container, which is also what keeps stylelint's no-descending-specificity
 * rule satisfied: two rules for the same element in different places is
 * exactly the drift that rule exists to catch. */
.ui-link {
  color: var(--color-text-subtle);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}

.ui-link:hover {
  color: var(--color-text);
}

.site-nav__contact-desktop {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-text);
  border-radius: var(--radius-full);
  color: var(--color-text);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  white-space: nowrap;
}

.site-nav__contact-desktop:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

.site-nav__contact-mobile,
.site-nav__burger {
  display: none;
}

.site-nav__burger {
  padding: var(--space-2);
  border: none;
  background: none;
  color: var(--color-text);
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * Section furniture
 * ------------------------------------------------------------------------ */

.section {
  max-width: var(--measure-page);
  margin: 0 auto;
  padding: var(--space-9) var(--space-section-x) var(--space-7);
}

.section--book {
  padding-top: var(--space-section-y-lg);
  padding-bottom: var(--space-section-y-lg);
}

.section--screenplays {
  padding-top: var(--space-7);
  padding-bottom: var(--space-section-y-lg);
}

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-rule-gap);
  border-bottom: 1px solid var(--color-border);
}

.section__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-section);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-section);
}

/* The project's reusable section label — see CLAUDE.md §3.
 *
 * Muted by default (the design's "01 — SCREENING" labels); the ink band
 * promotes it to the accent, which is why .journey overrides the color. The
 * font-family is explicit because tracker pages set <p> in the display face,
 * and this label must stay in Work Sans wherever it appears. */
.small-heading {
  margin: 0;
  color: var(--color-text-subtle);
  font-family: var(--font-label);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-section-label);
  text-transform: uppercase;
}

/* Journey report pages (title/copy/sponsor journey) put the eyebrow directly
 * above an <h1> with no other element between them, so the base margin: 0
 * above leaves them touching. Scoped to .container--wide, which only those
 * pages use as their main class. */
.container--wide .small-heading {
  margin-bottom: var(--space-block);
}

/* ---------------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------------ */

.hero {
  max-width: var(--measure-page);
  margin: 0 auto;
  padding: var(--space-hero-y) var(--space-section-x) var(--space-hero-y-end);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-column-gap);
  align-items: center;
}

.hero__title {
  margin: 0 0 var(--space-heading-gap);
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-tight);
}

.hero__title em {
  color: var(--color-accent);
  font-style: italic;
}

.hero__lead {
  max-width: var(--measure-hero-lead);
  margin: 0 0 var(--space-7);
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: var(--text-hero-lead);
  font-style: italic;
  font-weight: var(--font-weight-light);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

/* The offset rule behind the headshot. */
.hero__frame {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.hero__frame::before {
  position: absolute;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  content: "";
  inset: var(--space-hero-frame-offset) calc(var(--space-hero-frame-offset) * -1)
    calc(var(--space-hero-frame-offset) * -1) var(--space-hero-frame-offset);
}

.hero__image {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  background: var(--color-bg-sunken);
}

/* ---------------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-gap-sm);
  padding: var(--space-btn-y) var(--space-btn-x);
  border-radius: var(--radius-full);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.btn--filled {
  background: var(--color-text);
  color: var(--color-bg);
}

.btn--filled:hover {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}

.btn--outline {
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
}

.btn--outline:hover {
  border-color: var(--color-text);
  background: var(--color-accent-muted);
  color: var(--color-text);
}

/* Smaller pill button, used only where a button shares a row with something
 * else (the home page's Follow-the-journey + copy-lookup CTA row,
 * owner 2026-09-06) and needs to give up some width rather than push its
 * neighbor onto a second line. */
.btn--sm {
  padding: var(--space-btn-y-sm) var(--space-btn-x-sm);
}

/* ---------------------------------------------------------------------------
 * Media + prose blocks (Short Films, Memoir)
 * ------------------------------------------------------------------------ */

.media-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-media-gap);
  align-items: start;
}

.media-grid__frame {
  position: relative;
  overflow: hidden;

  /* Centred in its grid column. Both frames share a max-width and an aspect
   * ratio, so centring BOTH is what makes their left edges line up down the
   * page — the film poster and the book cover sit on the same vertical.
   *
   * This lived on --plain until 2026-09-02, which meant the book was centred
   * and the film poster was flush left, and the two sat on different
   * verticals. Alignment belongs to the frame, not to the modifier that
   * removes its border. */
  margin: 0 auto;
  max-width: var(--measure-poster);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-image);
  background: var(--color-bg-sunken);
  aspect-ratio: var(--ratio-poster);
}

.media-grid__frame--plain {
  border: none;
  background: none;
}

.media-grid__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.media-grid__frame--cover img {
  border-radius: var(--radius-image);
  box-shadow: var(--shadow-book);
  object-fit: cover;
}

.item__title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-item);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-section);
}

.item__lead {
  max-width: var(--measure-prose-narrow);
  margin: 0 0 var(--space-5);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-snug);
  text-wrap: pretty;
}

.item__lead--wide {
  max-width: var(--measure-prose-wide);
}

.item__text {
  max-width: var(--measure-prose);
  margin: 0 0 var(--space-5);
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}

.item__text:last-child {
  margin-bottom: 0;
}

.item__note {
  margin: 0 0 var(--space-7);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-style: italic;
  line-height: var(--leading-relaxed);
}

/* ---------------------------------------------------------------------------
 * Action rows — the hairline list used for buy links and journey links
 * ------------------------------------------------------------------------ */

.rows {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
}

.rows__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-gap);
  padding: var(--space-row-y) var(--space-hairline);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--text-row);
  transition: padding-left var(--duration-fast) var(--ease-out);
}

.rows__row:hover {
  padding-left: var(--space-gap-sm);
  color: var(--color-accent);
}

.rows__meta {
  color: var(--color-text-subtle);
  font-size: var(--text-arrow-sm);
}

/* The journey band's rows are larger and set in the display face. */
.rows--journey .rows__row {
  padding-top: var(--space-row);
  padding-bottom: var(--space-row);
  font-family: var(--font-display);
  font-size: var(--text-action);
}

.rows--journey .rows__meta {
  font-size: var(--text-arrow-lg);
}

/* ---------------------------------------------------------------------------
 * Book's Journey band — the ink section inside the light page
 * ------------------------------------------------------------------------ */

.journey {
  background: var(--color-bg);
  color: var(--color-text);
}

.journey__inner {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: var(--space-column-gap);
  align-items: center;
  max-width: var(--measure-page);
  margin: 0 auto;
  padding: var(--space-section-y) var(--space-section-x);
}

.journey__title {
  margin: 0 0 var(--space-block);
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.journey .small-heading {
  margin-bottom: var(--space-block);
  color: var(--color-accent);
  letter-spacing: var(--tracking-eyebrow);
}

.journey__lead {
  max-width: var(--measure-lead);
  margin: 0 0 var(--space-block-lg);
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
 * Screenplay cards
 * ------------------------------------------------------------------------ */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--measure-card-min), 1fr));
  gap: var(--space-card-gap);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.card__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-image);
  background: var(--color-bg-sunken);
  aspect-ratio: var(--ratio-poster);
}

.card__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.card:hover .card__frame img {
  transform: scale(1.035);
}

.card__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-card-title);
  font-weight: var(--font-weight-regular);
}

.card__meta {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: var(--text-card-meta);
  line-height: var(--leading-normal);
}

/* ---------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------ */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-7);
  max-width: var(--measure-page);
  margin: 0 auto;
  padding: var(--space-footer-y) var(--space-section-x) var(--space-footer-y-end);
}

.site-footer__name {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-footer-name);
}

.site-footer__fine {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: var(--text-meta);
}

.site-footer__links {
  display: flex;
  align-items: center;
  gap: var(--space-footer-gap);
}

/* ---------------------------------------------------------------------------
 * Reveal on scroll
 *
 * CSS-only, and deliberately not JavaScript-gated: if the animation never
 * runs, the content is still visible. The design's version hid content until
 * an IntersectionObserver revealed it, which fails closed for anyone without
 * JavaScript.
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rv {
      animation: rv-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}

@keyframes rv-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------ */

@media (width <= 860px) {
  .site-header__inner,
  .site-footer,
  .hero,
  .section {
    padding-right: var(--space-section-x-sm);
    padding-left: var(--space-section-x-sm);
  }

  .site-header__inner {
    flex-direction: row-reverse;
    justify-content: flex-end;
    height: auto;
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }

  .site-nav {
    gap: var(--space-3);
  }

  .site-nav__links {
    display: none;
  }

  .site-nav__links.is-open {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: var(--z-dropdown);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-section-x-sm) var(--space-section-x-sm);
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-bg);
    box-shadow: var(--shadow-nav);
  }

  /* 44px minimum touch target. */
  .site-nav__links.is-open .ui-link {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    min-height: var(--space-7);
    padding: var(--space-4) 0;
  }

  .site-nav__burger,
  .site-nav__contact-mobile {
    display: flex;
  }

  .site-nav__burger {
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
  }

  .site-nav__contact-desktop {
    display: none;
  }

  .hero__grid,
  .media-grid,
  .journey__inner {
    grid-template-columns: 1fr;
    gap: var(--space-column-gap-sm);
  }
}

@media (width <= 560px) {
  .hero {
    padding-top: var(--space-section-y-sm);
    padding-bottom: var(--space-section-y-sm);
  }

  .hero__title {
    font-size: var(--text-hero-sm);
  }

  .journey__inner {
    padding: var(--space-section-y-sm) var(--space-section-x-sm);
  }

  .hero__frame,
  .media-grid__frame--plain {
    max-width: 62%;
  }

  .media-grid__frame {
    max-width: 80%;
    margin: 0 auto;
  }
}

/* ---------------------------------------------------------------------------
 * Contact page
 * ------------------------------------------------------------------------ */

.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-contact-gap);
  align-items: start;
}

.contact__title {
  margin: 0 0 var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-page-title);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-tight);
}

.contact__title em {
  color: var(--color-accent);
  font-style: italic;
}

.contact__lead {
  max-width: var(--measure-contact-lead);
  margin: 0 0 var(--space-7);
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: var(--text-hero-lead);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}

.small-heading--accent {
  margin-bottom: var(--space-block);
  color: var(--color-accent);
  letter-spacing: var(--tracking-eyebrow);
}

.rows--contact .rows__row {
  font-family: var(--font-display);
  font-size: var(--text-input);
}

/* ---------------------------------------------------------------------------
 * Forms
 * ------------------------------------------------------------------------ */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-field-gap);
  padding: var(--space-form-padding);
  border-radius: var(--radius-sm);
  background: var(--color-bg-raised);
}

.form__field,
.form__check {
  display: flex;
  flex-direction: column;
  gap: var(--space-label-gap);
}

.form__label {
  color: var(--color-text-subtle);
  font-size: var(--text-field-label);
  letter-spacing: var(--tracking-field-label);
  text-transform: uppercase;
}

/* The design's fields are a single underline rather than a box. */
.form input[type="text"],
.form input[type="email"],
.form textarea {
  padding: var(--space-input-y) 0;
  border: none;
  border-bottom: 1px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-input);
}

.form textarea {
  resize: vertical;
}

.form input:focus,
.form textarea:focus {
  border-bottom-color: var(--color-accent);
  outline: none;
}

/* Focus is communicated by the underline above, but only for pointer users
 * who can see it move — keep a real focus ring for keyboard navigation. */
.form input:focus-visible,
.form textarea:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.form__check {
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-card-meta);
}

.form__submit {
  align-self: flex-start;
  border: none;
  cursor: pointer;
}

.form__error,
.form__errors {
  color: var(--color-danger);
  font-size: var(--text-card-meta);
}

/* Hidden from people, present for bots. Not display:none — some bots skip
 * fields that are not rendered at all. */
.form__honeypot {
  position: absolute;
  overflow: hidden;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  white-space: nowrap;
}

@media (width <= 860px) {
  .contact__grid {
    grid-template-columns: 1fr;
    gap: var(--space-column-gap-sm);
  }
}

@media (width <= 560px) {
  .form {
    padding: var(--space-form-padding-sm);
  }
}

/* ---------------------------------------------------------------------------
 * Legal pages (privacy policy) — single narrow prose column
 * ------------------------------------------------------------------------ */

.legal__title {
  margin: var(--space-block) 0 var(--space-block);
  font-family: var(--font-display);
  font-size: var(--text-page-title);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.legal__heading {
  max-width: var(--measure-prose-wide);
  margin: var(--space-7) 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-section);
}

.legal__lead {
  max-width: var(--measure-prose-wide);
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}

.legal__text {
  max-width: var(--measure-prose-wide);
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
 * Preference centre
 *
 * The pages people reach from a link in an email: their own consents, the
 * unsubscribe confirmation, and the erasure confirmation. Narrow measure and
 * no artwork — these are read once, acted on, and closed.
 * ------------------------------------------------------------------------ */

.prefs__inner {
  max-width: var(--measure-prose-wide);
}

.prefs__title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-page-title);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-tight);
}

.prefs__title em {
  color: var(--color-accent);
  font-style: italic;
}

.prefs__lead {
  margin: 0 0 var(--space-6);
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: var(--text-hero-lead);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}

.prefs__saved {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-success-muted);
  color: var(--color-success);
  font-size: var(--text-card-meta);
}

/* A consent is a checkbox plus a line of explanation, so unlike the contact
 * form's single-line checkboxes these have to top-align. */
.prefs .form__check {
  align-items: flex-start;
}

.prefs .form__check input {
  margin-top: var(--space-1);
}

.form__hint {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

/* Erasure is irreversible and sits below everything else, behind a rule and
 * its own explanation — never beside the save button. */
.prefs__danger {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-card-meta);
  line-height: var(--leading-normal);
}

.prefs__danger-title {
  margin: 0 0 var(--space-3);
  color: var(--color-danger);
  font-family: var(--font-display);
  font-size: var(--text-hero-lead);
  font-weight: var(--font-weight-regular);
}

.prefs__danger form {
  margin-top: var(--space-5);
}

/* The rights list in the privacy policy — the one list in the legal pages. */
.legal__list {
  max-width: var(--measure-prose-wide);
  margin: var(--space-4) 0 0;
  padding-left: var(--space-5);
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-relaxed);
}

.legal__list li {
  margin-bottom: var(--space-2);
}

/* ---------------------------------------------------------------------------
 * Copy lookup — the last row of the journey band's list
 *
 * Matches the title landing page's row exactly (owner, 2026-09-07): the
 * label reads as the row's own words, the field is an underline rather than
 * a boxed widget, and the submit is the row's arrow. It used to sit beside
 * the "See the map" button, where two pills read as competing calls to
 * action.
 * ------------------------------------------------------------------------ */

.rows__row--lookup {
  cursor: default;
}

.rows__row--lookup:hover {
  padding-left: var(--space-hairline);
  color: var(--color-text);
}

.rows__row--lookup .find-a-copy__form {
  display: flex;
  align-items: center;
  gap: var(--space-gap);
  width: 100%;
}

/* Set explicitly rather than inherited, so it matches the three links above
 * it exactly: the display face at the journey band's row size. */
.rows__row--lookup label {
  margin-bottom: 0;
  color: inherit;
  font-family: var(--font-display);
  font-weight: var(--font-weight-light);
  font-size: var(--text-action);
  letter-spacing: initial;
  text-transform: none;
  white-space: nowrap;
}

.rows__row--lookup input[type="text"] {
  flex: 0 1 auto;
  width: var(--measure-copy-lookup-input-sm);
  min-width: 0;
  padding: 0 0 var(--space-1);
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background-color: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-input);
}

.rows__row--lookup input[type="text"]:focus {
  border-bottom-color: var(--color-accent);
  outline: none;
}

.rows__submit {
  display: inline-flex;
  margin-left: auto;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.rows__submit:hover .rows__meta {
  color: var(--color-accent);
}

/* ---------------------------------------------------------------------------
 * Site-wide flash notices (Django messages) — rendered once in base.html so
 * every page, tracker included, can carry a one-time notice across a
 * redirect (e.g. the duplicate-email notice on profile creation) without
 * each view inventing its own banner.
 * ------------------------------------------------------------------------ */

.site-notices {
  max-width: var(--measure-page);
  margin: var(--space-5) auto 0;
  padding: 0 var(--space-section-x);
}

.site-notice {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-sm);
  background-color: var(--color-accent-muted);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--font-weight-light);
}

.site-notice + .site-notice {
  margin-top: var(--space-3);
}