@import "/assets/app/shared/styles/page.3e88c4172a9633bb.css";

/**
 * Site chrome and the shared type system.
 *
 * The recurring device is one hairline rule — the tramline — that sections
 * hang from. Nothing else here decorates; every border carries structure.
 */

/**
 * The page is a column so a short page still puts its footer at the
 * bottom of the window rather than halfway up it.
 */
/*
 * Reserve the scrollbar gutter always. Otherwise a page that grows past
 * the viewport as content arrives (the cart filling in) gains a
 * scrollbar, the viewport narrows, and the whole layout lurches sideways.
 */
html {
  scrollbar-gutter: stable;
}

body.page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

.site-main {
  flex: 1;
}

.rail {
  width: 100%;
  max-width: 96rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.rail-tight {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/**
 * Display type. Archivo carries a width axis, so the headline sizes widen
 * as they grow rather than only getting taller.
 */
.headline {
  margin: 0;
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(2.25rem, 8.4vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  text-wrap: balance;
}

.headline-sm {
  margin: 0;
  font-weight: 800;
  font-stretch: 108%;
  font-size: clamp(1.75rem, 4.2vw, 3.5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.headline-xs {
  margin: 0;
  font-weight: 700;
  font-stretch: 104%;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.lede {
  font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 34ch;
}

.body-copy {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: var(--measure);
}

/** Real measurements: SKUs, weights, lengths, prices. Never used as decor. */
.data {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
}

.data-key {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: var(--line);
}

.site-header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: var(--header-h);
}

/**
 * The wordmark. The rule between TRAM and ® is the line in Tramline, and
 * it is the same hairline the rest of the page hangs from.
 */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 900;
  font-stretch: 118%;
  font-size: 1.375rem;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}

.wordmark:hover {
  color: var(--ink);
}

.wordmark-line {
  display: block;
  width: 3.25rem;
  height: 0.28em;
  background: currentColor;
}

.wordmark-r {
  font-size: 0.5em;
  font-weight: 700;
  align-self: flex-start;
  margin-top: 0.15em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-inline-end: auto;
}

.site-nav a {
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-soft);
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) var(--ease-out);
}

.site-nav a:hover {
  color: var(--ink);
}

.site-nav a.is-active {
  color: var(--ink);
  border-bottom-color: var(--flare);
}

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

.site-actions a {
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-soft);
}

.site-actions a:hover {
  color: var(--ink);
}

.cart-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/*
 * The count is filled in on attach, so it always occupies its box: shown
 * empty it would otherwise appear and shove the header sideways. It
 * fades up rather than snapping in, so arriving reads as arriving.
 */
.cart-count {
  opacity: 1;
  transform: scale(1);
  transition: opacity var(--duration-slower) var(--ease-out),
              transform var(--duration-slower) var(--ease-spring);
}

.cart-count.is-empty {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.7);
}

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

.cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding-inline: 0.35rem;
  background: var(--flare);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.nav-toggle {
  display: none;
}

.site-footer {
  margin-top: auto;
  padding-block: var(--space-20) var(--space-8);
}

.site-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-12) var(--space-8);
  padding-bottom: var(--space-16);
  border-bottom: var(--line);
}

.site-footer h3 {
  margin: 0 0 var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.site-footer a {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.footer-signup {
  max-width: 26rem;
}

.footer-signup p {
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* One control, not two: a field and its button inside a single border. */
.footer-signup form {
  display: flex;
  align-items: stretch;
  /* A bare form is a grid with a gap, and gap applies to flex too. */
  gap: 0;
  height: 2.75rem;
  border: 1px solid var(--rule-strong);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.footer-signup form:hover {
  border-color: var(--ink-dim);
}

/* The ring belongs to the whole control, not to the field inside it. */
.footer-signup form:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.footer-signup input {
  flex: 1;
  min-width: 0;
  height: 100%;
  min-height: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--ink);
}

.footer-signup input:focus,
.footer-signup input:focus-visible {
  outline: 0 none;
  /* The system's input focus ring is a box-shadow; the group draws its own. */
  box-shadow: none;
  border-color: transparent;
}

.footer-signup button {
  height: 100%;
  min-height: 0;
  border: none;
  border-radius: 0;
  padding-inline: var(--space-5);
}

.footer-signup .said {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--ink);
}

.site-footer-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-top: var(--space-8);
}

.site-footer-base p {
  margin: 0;
}

.site-footer-legal {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}

@media (max-width: 64rem) {
  .site-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-signup {
    grid-column: 1 / -1;
  }
}

@media (max-width: 52rem) {
  :root {
    --header-h: 3.75rem;
  }

  .site-nav {
    display: none;
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: var(--line);
    padding: var(--space-2) var(--gutter) var(--space-6);
    margin: 0;
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a {
    padding-block: var(--space-3);
    font-size: var(--text-md);
    border-bottom: var(--line);
  }

  .site-nav a.is-active {
    border-bottom-color: var(--flare);
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--ink);
  }

  .site-actions {
    gap: var(--space-4);
  }
}

@media (max-width: 24rem) {
  .site-header-inner {
    gap: var(--space-3);
  }

  .wordmark {
    font-size: 1.125rem;
  }

  .wordmark-line {
    width: 2.25rem;
  }

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

  .site-actions a {
    font-size: var(--text-xs);
  }
}

/**
 * The hero. The five cases in the photograph stand in a row like tram
 * towers, so the headline sets to their baseline rather than centring.
 */
.hero {
  position: relative;
  min-height: min(86vh, 54rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--spruce);
}

.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}

.hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgb(14 21 24 / 0.34) 0%,
    rgb(14 21 24 / 0.04) 22%,
    rgb(14 21 24 / 0.02) 40%,
    rgb(14 21 24 / 0.46) 62%,
    rgb(14 21 24 / 0.8) 86%,
    rgb(14 21 24 / 0.92) 100%
  );
}

.hero-inner {
  position: relative;
  padding-block: var(--space-16) var(--space-10);
  color: var(--snow);
}

.hero .headline {
  max-width: 11ch;
  color: var(--snow);
}

.hero-sub {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.hero-sub p {
  margin: 0;
  max-width: 38ch;
  font-size: var(--text-md);
  line-height: 1.45;
  color: rgb(242 243 241 / 0.82);
}

.hero-origin {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(242 243 241 / 0.6);
}

/**
 * The tramline itself: a rule across the foot of the hero with the
 * destinations hanging off it as stations.
 */
.stations {
  position: relative;
  border-top: 1px solid rgb(242 243 241 / 0.28);
  margin-top: var(--space-10);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.station {
  position: relative;
  display: block;
  padding: var(--space-6) var(--space-6) var(--space-2) 0;
  text-decoration: none;
  color: var(--snow);
}

.station + .station {
  padding-inline-start: var(--space-6);
  border-inline-start: 1px solid rgb(242 243 241 / 0.16);
}

/* The station dot sits on the line, not under it. */
.station::before {
  content: "";
  position: absolute;
  top: -4px;
  inset-inline-start: 0;
  width: 7px;
  height: 7px;
  background: var(--snow);
  transition: background var(--duration-fast) var(--ease-out);
}

.station + .station::before {
  inset-inline-start: var(--space-6);
}

.station:hover::before {
  background: var(--flare);
}

.station-name {
  display: block;
  font-weight: 700;
  font-stretch: 106%;
  font-size: var(--text-md);
  letter-spacing: -0.015em;
  text-transform: uppercase;
  line-height: 1.1;
}

.station-note {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
  color: rgb(242 243 241 / 0.62);
}

@media (max-width: 52rem) {
  .hero {
    min-height: min(80vh, 40rem);
  }

  /**
   * On a phone the copy runs the height of the photo, including over the
   * bright pink shell and the sky. The scrim goes nearly solid behind the
   * text: legibility wins over showing every inch of the photograph.
   */
  .hero-veil {
    background: linear-gradient(
      to bottom,
      rgb(14 21 24 / 0.3) 0%,
      rgb(14 21 24 / 0.62) 14%,
      rgb(14 21 24 / 0.82) 30%,
      rgb(14 21 24 / 0.9) 48%,
      rgb(14 21 24 / 0.94) 100%
    );
  }

  .stations {
    grid-template-columns: 1fr;
  }

  /* The mono sub-lines are the smallest type on the photo; lift them. */
  .hero-origin,
  .station-note {
    color: rgb(242 243 241 / 0.82);
  }

  .hero-sub p {
    color: rgb(242 243 241 / 0.94);
  }

  .station {
    padding-inline: 0;
  }

  .station + .station {
    padding-inline-start: 0;
    border-inline-start: none;
    border-top: 1px solid rgb(242 243 241 / 0.16);
  }

  .station + .station::before {
    inset-inline-start: 0;
  }
}

.site-main {
  display: block;
  max-width: none;
  padding: 0;
  margin: 0;
}

/**
 * Section heads hang off the tramline: the rule runs first with its link
 * riding on it, then the title sits well below so it has room to be large.
 */
.section-head {
  display: grid;
  gap: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--line-strong);
}

.on-spruce .section-head {
  border-top-color: var(--snow);
}

/**
 * The rule divides one section from the one above it, so the head that
 * opens a page has nothing to divide. There the link sits on the title's
 * own baseline instead.
 */
.section-head.is-page {
  border-top: none;
  padding-top: 0;
  grid-template-columns: minmax(0, 1fr) auto;
}

.section-head.is-page > .section-head-top {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  padding-bottom: 0.4rem;
}

.section-head.is-page > h1,
.section-head.is-page > h2 {
  grid-column: 1;
  grid-row: 1;
  padding-top: 0;
}

.section-head.is-page > .section-lede {
  grid-column: 1 / -1;
  grid-row: 2;
}

.section-head-top {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--space-6);
  min-height: 1rem;
}

.section-head-top:empty {
  display: none;
}

.section-head h2,
.section-head h1 {
  margin: 0;
  padding-top: var(--space-6);
  font-weight: 800;
  font-stretch: 110%;
  font-size: clamp(1.75rem, 5.4vw, 4.5rem);
  line-height: 0.94;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  max-width: 18ch;
  overflow-wrap: break-word;
}

.section-head + * {
  margin-top: clamp(2.5rem, 4vw, 4rem);
}

.section-lede {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(1rem, 1.2vw, 1.1875rem);
  line-height: 1.55;
  color: var(--ink-soft);
}

.section-link {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-dim);
  transition: color var(--duration-fast) var(--ease-out);
}

.section-link:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.4em;
  text-decoration-color: var(--flare);
  text-decoration-thickness: 1px;
}

.band {
  padding-block: clamp(3.5rem, 7vw, 7rem);
}

/**
 * A product told at full width: the photograph on one side bleeding to the
 * page edge, the case for it on the other.
 */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  border-top: var(--line);
}

.feature-photo {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-soft);
}

/**
 * Studio shots are cut out on pure white. Multiplying them drops the white
 * away so the product sits directly on the page, with its own shadow, and
 * no plate edge to give the crop away.
 */
.feature-photo.is-cutout {
  background: none;
}

.feature-photo.is-cutout img {
  mix-blend-mode: multiply;
}

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

.feature-copy > * {
  margin: 0;
}

.feature-copy {
  padding-block: clamp(2.5rem, 5vw, 5rem);
  padding-inline-end: var(--gutter);
  display: grid;
  gap: var(--space-6);
  justify-items: start;
}

.feature:nth-child(even) .feature-photo {
  order: 2;
}

.feature:nth-child(even) .feature-copy {
  padding-inline: var(--gutter) 0;
}

.feature-price {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

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

.swatch {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px rgb(14 21 24 / 0.22);
}

.feature-spec {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
  padding-top: var(--space-5);
  border-top: var(--line);
  width: 100%;
}

.feature-spec div {
  display: grid;
  gap: 0.25rem;
}

.feature-spec b {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/** Testimonials, set as pull quotes on the dark surface. */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/**
 * A figure carries flow margins, and base resets them on the first and
 * last child only, which knocks the outer columns out of line. The
 * container owns the spacing here, so zero them.
 */
.quote {
  margin: 0;
  padding: var(--space-2) var(--space-8) var(--space-2) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* The attributions share a baseline across columns of unequal length. */
.quote figcaption {
  margin-top: auto;
  padding-top: var(--space-2);
}

.quote + .quote {
  padding-inline-start: var(--space-8);
  border-inline-start: var(--line);
}

.quote blockquote {
  margin: 0;
  border: none;
  padding: 0;
  font-style: normal;
  font-size: var(--text-md);
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.stars {
  display: flex;
  gap: 0.15rem;
  color: var(--flare);
}

.quote figcaption {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/** The travel-guide promo: a wide photograph with the calculator's pitch. */
.promo {
  position: relative;
  min-height: 30rem;
  display: grid;
  align-items: end;
  overflow: hidden;
}

.promo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgb(14 21 24 / 0.86) 0%, rgb(14 21 24 / 0.62) 42%, rgb(14 21 24 / 0.16) 100%);
}

.promo-inner {
  position: relative;
  padding: clamp(2.5rem, 6vw, 5rem) var(--gutter);
  display: grid;
  gap: var(--space-6);
  justify-items: start;
  color: var(--snow);
  max-width: 44rem;
}

.promo-inner p {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.5;
  color: rgb(242 243 241 / 0.84);
}

.promo-inner .headline-sm {
  color: var(--snow);
}

.promo-stat {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(242 243 241 / 0.6);
}

/** Journal teasers. */
.posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
}

.post-card {
  display: grid;
  gap: var(--space-4);
  text-decoration: none;
  color: inherit;
  align-content: start;
}

.post-card figure {
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bg-soft);
}

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

.post-card:hover img {
  transform: scale(1.03);
}

.post-card h3 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.post-card .data,
.post-card p {
  transition: color var(--duration-fast) var(--ease-out);
}

.post-card:hover .data,
.post-card:hover p {
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .post-card img {
    transition: none;
  }
}

.post-card p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-soft);
}

@media (max-width: 60rem) {
  .feature,
  .feature:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  /*
   * Stacked, the divider lands directly on top of a cutout photo and
   * reads as a stray line rather than a section rule. Whitespace does
   * the separating instead.
   */
  .feature {
    border-top: none;
  }

  .feature + .feature {
    padding-top: var(--space-12);
  }

  .feature-photo,
  .feature:nth-child(even) .feature-photo {
    order: 0;
    aspect-ratio: 4 / 3;
  }

  .feature-copy,
  .feature:nth-child(even) .feature-copy {
    padding-inline: 0;
    padding-block: var(--space-8) var(--space-10);
  }

  /* A phone has one column: the call to action takes the whole of it. */
  .feature-copy .button,
  .promo-inner .button {
    justify-self: stretch;
    width: 100%;
  }

  /*
   * Three specs on one wrapping flex row leave a ragged 32px hole on a
   * phone. A two-column grid lays them out evenly and closes the gap.
   */
  .feature-spec {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-6);
  }

  .quotes,
  .posts {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stacked, the column divider becomes a rule between rows. */
  .quote {
    padding-inline: 0;
  }

  .quote + .quote {
    padding-inline-start: 0;
    border-inline-start: none;
    margin-top: var(--space-7);
    padding-top: var(--space-7);
    border-top: var(--line);
  }

  .posts {
    gap: var(--space-10);
  }
}

/**
 * Long-form pages: story, policies, journal posts. One measure, generous
 * leading, and the same rule discipline as everywhere else.
 */
.article {
  padding-block: var(--space-12) clamp(3rem, 6vw, 6rem);
}

.prose-body {
  max-width: 64ch;
  font-size: var(--text-md);
  line-height: 1.68;
  color: var(--ink-soft);
}

.prose-body > *:first-child {
  margin-top: 0;
}

.prose-body p {
  margin-block: 0 var(--space-6);
}

.prose-body h2 {
  margin-block: var(--space-12) var(--space-4);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-transform: none;
}

.prose-body h3 {
  margin-block: var(--space-8) var(--space-3);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink);
}

.prose-body ul,
.prose-body ol {
  margin-block: 0 var(--space-6);
  padding-inline-start: var(--space-6);
}

.prose-body li {
  margin-block: var(--space-2);
}

.prose-body a {
  color: var(--ink);
}

/** Two-column editorial split: a sticky caption beside running text. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.split-aside {
  position: sticky;
  top: calc(var(--header-h) + var(--space-8));
  display: grid;
  gap: var(--space-5);
}

.split-aside figure {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-soft);
}

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

/**
 * A document page: policies and anything else that is one column of
 * running text. Centred, because there is no second column for it to
 * align against.
 */
/* A rem measure, not ch: ch resolves per element, so a 16px title and an
   18px body given the same ch cap come out different widths. */
.prose-page {
  max-width: 42rem;
  margin-inline: auto;
}

.prose-page .prose-body {
  max-width: none;
}

.prose-title {
  margin: 0 0 var(--space-10);
  padding-bottom: var(--space-6);
  border-bottom: var(--line);
  font-size: clamp(1.75rem, 4.4vw, 3.25rem);
  font-weight: 800;
  font-stretch: 108%;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.prose-footer {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: var(--line);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink-soft);
}

/**
 * FAQ. Answers are on the page rather than behind a disclosure: there are
 * sixteen of them and they are short, so reading beats clicking. Search
 * filters them live. One rule per topic, none between the answers.
 */
/**
 * One measure for the whole page, so every left and right edge agrees,
 * and centred like the other single-column reading pages.
 */
.faq-page {
  max-width: 46rem;
  margin-inline: auto;
}

.faq-page .section-lede,
.faq-page .section-head h1 {
  max-width: none;
}

.faq-search {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-block: var(--space-8) var(--space-10);
}

.faq-search input {
  flex: 1;
  min-width: 0;
}

.faq-count {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  white-space: nowrap;
}

.faq-group {
  display: grid;
  gap: var(--space-8);
  padding-block: var(--space-10);
  border-top: var(--line);
}

.faq-group > h2 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.faq-list {
  display: grid;
  gap: var(--space-10);
}

.faq-item {
  display: grid;
  gap: var(--space-3);
}

.faq-item h3 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.3;
}

.faq-answer {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--ink-soft);
}

.faq-answer p {
  margin-block: 0 var(--space-4);
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-answer ol {
  margin: 0;
  padding-inline-start: var(--space-5);
  display: grid;
  gap: var(--space-2);
}

.faq-empty {
  padding-block: var(--space-12);
  border-top: var(--line);
  font-size: var(--text-md);
  color: var(--ink-soft);
}

/**
 * A form on its own page: contact, sign in, sign up. The copy and the form
 * are side by side, so the stacked-section spacing rule must not push the
 * form down away from the title it sits beside.
 */
.form-page {
  padding-block: var(--space-12) clamp(3rem, 6vw, 6rem);
  display: grid;
  grid-template-columns: minmax(0, 30rem) minmax(0, 26rem);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  justify-content: start;
}

.form-page > .section-head + * {
  margin-top: 0;
}

.form-card {
  display: grid;
  gap: var(--space-5);
}

.form-card > * {
  margin: 0;
}

.form-card form {
  display: grid;
  gap: var(--space-4);
}

.form-note {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-soft);
}

.form-said {
  padding: var(--space-4) var(--space-5);
  background: var(--bg-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.form-said.is-bad {
  color: var(--danger-ink);
}

@media (max-width: 60rem) {
  .split,
  .form-page {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-page > .section-head + * {
    margin-top: var(--space-8);
  }

  .split-aside {
    position: static;
  }
}

/**
 * A photographic page header. Shared by the travel guide and the story
 * page, so it lives with the chrome rather than with either page.
 */
.guide-hero {
  position: relative;
  min-height: 26rem;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--spruce);
}

.guide-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

.guide-hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(14 21 24 / 0.3) 0%, rgb(14 21 24 / 0.15) 40%, rgb(14 21 24 / 0.88) 100%);
}

.guide-hero-inner {
  position: relative;
  padding-block: var(--space-14) var(--space-10);
  color: var(--snow);
  display: grid;
  gap: var(--space-5);
}

.guide-hero-inner h1 {
  margin: 0;
  max-width: 16ch;
  font-weight: 800;
  font-stretch: 110%;
  font-size: clamp(1.75rem, 5.6vw, 4.5rem);
  line-height: 0.94;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.guide-hero-inner p {
  margin: 0;
  max-width: 52ch;
  font-size: var(--text-md);
  line-height: 1.5;
  color: rgb(242 243 241 / 0.84);
}


/**
 * The quantity stepper. Used by the product page and the cart, so it
 * lives with the chrome rather than with either page.
 */
/** The stepper and, once you want more than one, what that comes to. */
.qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.qty-total {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
}

.qty-total-note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
}

.qty-total b {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--ink);
}

.qty {
  display: flex;
  align-items: stretch;
  height: 2.75rem;
  border: 1px solid var(--rule-strong);
  width: max-content;
}

.qty button {
  appearance: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  /* Without this the design system's button height overruns the group's
     own border, and a hover fill paints straight over it. */
  height: 100%;
  min-height: 0;
  padding: 0;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: var(--text-md);
  line-height: 1;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.qty button:hover:not(:disabled) {
  background: var(--bg-muted);
  color: var(--ink);
}

.qty button:active:not(:disabled) {
  background: var(--accent-soft);
}

.qty button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Type a number straight in; the steppers are for small adjustments. */
.qty input {
  width: 3.25rem;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: none;
  border-inline: 1px solid var(--rule-strong);
  border-radius: 0;
  background: none;
  text-align: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  appearance: textfield;
}

.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.qty input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}


/* Placed after the base rules so source order does not undo them. */
@media (max-width: 52rem) {
  /*
   * The promo veil fades left to right, which works beside a wide photo
   * but leaves the copy sitting on bright snow when it stacks. On a phone
   * it runs top to bottom instead.
   */
  .promo-veil {
    background: linear-gradient(
      to bottom,
      rgb(14 21 24 / 0.22) 0%,
      rgb(14 21 24 / 0.46) 18%,
      rgb(14 21 24 / 0.8) 44%,
      rgb(14 21 24 / 0.92) 100%
    );
  }

  .promo-stat {
    color: rgb(242 243 241 / 0.82);
  }

  .promo-inner p {
    color: rgb(242 243 241 / 0.94);
  }
}

/**
 * iOS zooms on a quick second tap, so repeatedly tapping a stepper to
 * increment reads as double-tap-to-zoom. `manipulation` turns off the
 * double-tap gesture across the document, and leaves pinch-to-zoom and
 * scrolling alone, so zooming stays deliberate.
 */
html,
body,
a,
button,
input,
select,
textarea,
summary,
label,
[role="button"] {
  touch-action: manipulation;
}

/**
 * Separately, iOS Safari zooms whenever focus lands on a form control
 * whose font-size is under 16px, and ours are 14px. Setting 16px on
 * touch devices stops that one at its cause.
 *
 * The alternative, user-scalable=no / maximum-scale=1 on the viewport
 * meta, is both unreliable (modern iOS ignores it) and an accessibility
 * regression, because it takes pinch-to-zoom away from everyone.
 */
@media (pointer: coarse), (max-width: 52rem) {
  :root {
    --input-font-size: 1rem;
  }

  input,
  textarea,
  select,
  .qty input {
    font-size: 1rem;
  }
}