/* Shared type system. Deliberately text-only:
   existing surface, image, border, and interaction colors stay untouched. */
:root {
  --type-ink: #2c2820;
  --type-muted: #7a7060;
  --type-gold: #c8a96d;
  --type-section: clamp(1.875rem, 7.6vw, 2.5rem);
  --type-body: 1rem;
}

body {
  color: var(--type-ink);
  font-family: var(--font-sans);
  font-weight: 300;
}

body .responsive-version :is(.hero__title, .hero h1, .object-intro h1, .story-hero > h1, .story-cover h1) {
  font-family: var(--font-serif);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

body .responsive-version :is(.flip-guide__title, .starting-hard__copy h2, .modes > h2,
  .moments__intro h2, .section-head__title, .home-specifications__heading,
  .object-timeless__center h2, .object-crafted__header h2,
  .idea-section h2, .evolution-story h2, .story-idea h2) {
  color: var(--type-ink);
  font-family: var(--font-serif);
  font-size: var(--type-section);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

body .responsive-version .section-head__subtitle {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

body .responsive-version :is(.hero__lede, .starting-hard__copy p, .story__copy p,
  .moments__intro p, .moments-head p, .mode-row__copy p, .feature-card p,
  .object-intro > p:not(.page-eyebrow), .object-crafted__control p) {
  color: var(--type-muted);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: 0;
}

body .responsive-version :is(.mode-row__copy h3, .feature-card h3) {
  color: var(--type-ink);
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

body .responsive-version .flip-step h3 {
  color: var(--type-ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}
body .responsive-version .flip-step p {
  color: var(--type-muted);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.65;
}

body .responsive-version :is(.kicker, .hero__kicker, .page-eyebrow,
  .story-cover__eyebrow, .home-specifications__eyebrow, .object-crafted__eyebrow,
  .object-timeless__feature h3) {
  color: var(--type-gold);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

body .responsive-version .home-specifications__grid dt {
  color: var(--type-muted);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.12em;
}
body .responsive-version .home-specifications__grid dd {
  color: var(--type-muted);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
}
body .responsive-version .object-timeless__feature p {
  color: var(--type-muted);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75;
}
body .responsive-version .object-crafted__control h3 {
  color: var(--type-ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}
body .responsive-version :is(.why-link, .home-specifications__link) {
  color: var(--type-ink);
  font-size: 0.9375rem;
  font-weight: 400;
}
body .responsive-version :is(.why-link, .home-specifications__link):hover { color: var(--olive, #606b58); }

/* Story paragraphs had separate serif/Biolinum overrides. */
body.story-page .responsive-version :is(.origin-story p, .idea-section p,
  .evolution-story p, .story-cover__sub, .story-beginning__prose p,
  .story-idea p, .story-evolved__heading p) {
  color: var(--type-muted);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: 0;
}
body.story-page .responsive-version :is(p.origin-story__closing, .story-beginning__prose .story-beginning__closing, p.story-idea__closing) {
  color: var(--type-ink);
}
body.story-page .responsive-version strong { font-weight: 500; }
body.story-page .responsive-version p.origin-story__closing { font-weight: 500; }
body.story-page .story-beginning__prose p:first-child::first-letter {
  color: var(--type-ink);
  font-family: var(--font-serif);
  font-weight: 400;
}

/* Signup and confirmation share the same family and hierarchy as the pages. */
.launch-signup .launch-signup__heading,
.launch-modal .launch-modal__title,
.launch-modal .launch-modal__success-title,
.launch-modal .launch-modal__success-subtitle {
  font-family: var(--font-serif);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.launch-signup .launch-signup__heading { font-size: var(--type-section); }
.launch-modal .launch-modal__title,
.launch-modal .launch-modal__success-title { font-size: clamp(2rem, 7.6vw, 2.75rem); }
.launch-modal .launch-modal__success-subtitle { font-size: 1.875rem; }
.launch-signup .launch-signup__sub,
.launch-modal .launch-modal__sub { font-size: 1rem; font-weight: 300; line-height: 1.75; }
.launch-signup .launch-signup__eyebrow,
.launch-modal .launch-modal__eyebrow { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.2em; }
.launch-signup .launch-signup__note,
.launch-modal .launch-modal__note { font-size: 0.8125rem; font-weight: 300; line-height: 1.6; }
.launch-signup .launch-signup__button,
.launch-modal .launch-modal__submit,
.launch-thanks .launch-thanks__button,
body .responsive-version .cta,
body .responsive-version .outline-cta,
body .responsive-version .inner-outline-cta,
body .mobile-launch-cta {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.16em;
}
body .responsive-version .inner-outline-cta:not(:hover):not(:focus-visible) { color: var(--type-ink); }

/* Keep warm light text on the existing dark footer surfaces. */
body .responsive-version :is(.site-footer, .colophon) { color: rgba(244, 239, 230, 0.75); }
body .responsive-version :is(.footer-brand, .colophon__brand) {
  color: #f4efe6;
  font-family: var(--font-serif);
  font-weight: 400;
}
body .responsive-version :is(.site-footer h2, .colophon h3) {
  color: var(--type-gold);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.16em;
}
body .responsive-version :is(.footer-intro p:not(.footer-brand), .site-footer section p,
  .colophon__tag, .colophon__grid p) {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 300;
  font-style: normal;
  line-height: 1.7;
}

@media (min-width: 960px) {
  :root { --type-section: clamp(2.25rem, 3.6vw, 3.25rem); }
  body .responsive-version--desktop :is(.hero__title, .story-cover h1) {
    color: var(--type-ink);
    font-size: clamp(3.2rem, 5.5vw, 6rem);
  }
  body .responsive-version--desktop .hero__title em { color: inherit; }
  body .responsive-version--desktop :is(.hero__lede, .hero__launch-note, .hero__measure) { color: var(--type-muted); }
  body .responsive-version--desktop .hero__launch-note { font-size: 0.8125rem; }
  body .responsive-version--desktop .colophon__brand { font-size: 1.4rem; }
  body .responsive-version--desktop .hero__lede { max-width: 42ch; }
  body .responsive-version--desktop .masthead__nav a {
    color: var(--type-ink);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.1em;
  }
  body .responsive-version--desktop .mode-row__listen { font-size: 0.875rem; letter-spacing: 0.12em; }
  body .responsive-version--desktop .story-evolved h2 {
    color: var(--type-ink);
    font-size: var(--type-section);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.01em;
  }
  body .responsive-version--desktop .story-idea h2 {
    /* The reference's single-line title must also fit the narrow desktop layout. */
    font-size: clamp(2rem, 3.4vw, 3.25rem);
    white-space: nowrap;
  }
  body .responsive-version--desktop .story-beginning__image {
    /* Do not let shorter, lighter prose turn the existing photo into a thin strip. */
    aspect-ratio: 3 / 2;
    align-self: center;
  }
  body .responsive-version--desktop .story-beginning__copy { align-self: center; }
}

@media (max-width: 959.98px) {
  body .responsive-version--mobile .hero h1 {
    font-size: clamp(2rem, 8.2vw, 3.5rem);
    max-width: 18ch;
  }
  body .responsive-version--mobile :is(.object-intro h1, .story-hero > h1) {
    font-size: clamp(2.25rem, 9vw, 3.75rem);
  }
  body .responsive-version--mobile .hero__description { font-size: 1rem; font-weight: 300; line-height: 1.55; }
  body .responsive-version--mobile .hero__launch-note { font-size: 0.8125rem; }
  body .responsive-version--mobile .hero__cta { font-size: 0.875rem; letter-spacing: 0.16em; }
  /* This photograph needs its own high-contrast, single-line reference treatment. */
  body .responsive-version--mobile .starting-hard--mobile .starting-hard__copy {
    padding: 3.5rem 1.75rem 0;
  }
  body .responsive-version--mobile .starting-hard--mobile .starting-hard__copy h2 {
    margin-bottom: 2.5rem;
    color: #000;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.05;
    white-space: nowrap;
    text-wrap: nowrap;
    text-shadow: none;
  }
  body .responsive-version--mobile .starting-hard--mobile .starting-hard__copy p {
    max-width: none;
    color: #000;
    font-size: 0.97rem;
    line-height: 1.85;
    text-shadow: none;
  }
  body .responsive-version--mobile .starting-hard--mobile .starting-hard__copy p + p { margin-top: 0.5rem; }
  body .responsive-version--mobile .mode-card h3 {
    color: var(--type-ink);
    font-size: clamp(1.25rem, 5.2vw, 1.5rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.01em;
  }
  body .responsive-version--mobile .mode-card p {
    color: var(--type-muted);
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.45;
  }
  body .responsive-version--mobile .mode-toggle { font-size: 0.75rem; }
  body .responsive-version--mobile .feature-card p { font-size: 0.9375rem; line-height: 1.65; }
  body .responsive-version--mobile .site-nav a { color: var(--type-ink); font-size: 1rem; font-weight: 400; }
  body.story-page .responsive-version--mobile .idea-section h2 { font-size: clamp(1.625rem, 6.4vw, 2.25rem); }
  body .responsive-version--mobile .modes { container: mode-layout / inline-size; }
  body .responsive-version--mobile .flip-guide__content { container: flip-layout / inline-size; }
  body .responsive-version--mobile :is(.home-specifications__copy, .object-crafted__wrap) { container: spec-layout / inline-size; }
  body .responsive-version--mobile .site-footer { container: footer-layout / inline-size; }
}

@media (max-width: 400px) {
  body .responsive-version--mobile .starting-hard--mobile .starting-hard__copy h2 { font-size: 1.65rem; }
  body .responsive-version--mobile .starting-hard--mobile .starting-hard__copy p { font-size: 0.9rem; }
}
@media (max-width: 370px) {
  body .responsive-version--mobile .starting-hard--mobile .starting-hard__copy h2 { font-size: 1.49rem; }
  body .responsive-version--mobile .starting-hard--mobile .starting-hard__copy p { font-size: 0.81rem; }
}
@media (max-width: 340px) {
  body .responsive-version--mobile .starting-hard--mobile .starting-hard__copy h2 { font-size: 1.3rem; }
}
@media (max-width: 959.98px) and (max-height: 700px) {
  body .responsive-version--mobile .starting-hard--mobile .starting-hard__copy { padding-top: 3.15rem; }
}
@media (max-width: 959.98px) and (min-height: 840px) {
  body .responsive-version--mobile .starting-hard--mobile .starting-hard__copy { padding-top: 4rem; }
}
@media (max-width: 959.98px) and (max-height: 600px) {
  /* Keep the last sentence above the cube on shorter phone screens. */
  body .responsive-version--mobile .starting-hard--mobile .starting-hard__copy { padding-top: 2rem; }
  body .responsive-version--mobile .starting-hard--mobile .starting-hard__copy h2 { margin-bottom: 1.5rem; }
}

/* Reflow at narrow reading widths, including enlarged text, without shrinking fonts. */
@container mode-layout (max-width: 18rem) {
  body .responsive-version--mobile .mode-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }
  body .responsive-version--mobile .mode-card > img { order: 0; }
  body .responsive-version--mobile .mode-card__copy { order: 1; }
}
@container flip-layout (max-width: 18rem) {
  body .responsive-version--mobile .flip-step { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}
@container spec-layout (max-width: 15rem) {
  body .responsive-version--mobile .home-specifications__grid { grid-template-columns: minmax(0, 1fr); }
}
@container footer-layout (max-width: 18rem) {
  body .responsive-version--mobile .footer-intro { grid-template-columns: minmax(0, 1fr); }
}