@font-face {
  font-family: Fraunces;
  src: url("/assets/font/fraunces-italic-500.woff2?v=20260906b") format("woff2");
  font-style: italic;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: Fraunces;
  src: url("/assets/font/fraunces-var-latin.woff2?v=20260903c") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: InterVariable;
  src: url("/assets/font/inter-var-latin.woff2?v=20260903c") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ground: #fbf8f1;
  --surface: #fff;
  --ink: #201d1a;
  --ink-body: #45413a;
  --ink-soft: #6b6459;
  --ink-faint: #8b857a;
  --crimson: #b01e28;
  --crimson-band: #a81d26;
  --crimson-deep: #8e1620;
  --crimson-tint: rgb(176 30 40 / 8%);
  --gold: #d69a24;
  --gold-tint: rgb(214 154 36 / 10%);
  --gold-deep: #8a6a14;
  --on-dark: #fff;
  --on-dark-soft: #f2ebe2;
  --on-red-soft: #ffd9d4;
  --line: rgb(32 29 26 / 12%);
  --radius-card: 1.35rem;
  --radius-control: 999px;
  --font-display: Fraunces, Georgia, serif;
  --font-sans: InterVariable, Inter, system-ui, sans-serif;
  font-family: var(--font-sans);
  font-synthesis: none;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

* {
  box-sizing: border-box;
}

html {
  background: var(--ground);
  color: var(--ink-body);
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  min-width: 20rem;
  background: var(--ground);
}

button,
input {
  font: inherit;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p,
dl,
dd {
  margin: 0;
}

h1,
h2,
h3 {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 560;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 6vw, 3.625rem);
  line-height: 1.2;
}

h2 {
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  line-height: 1.22;
}

h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  line-height: 1.25;
}

p,
li,
dt,
dd,
label,
input,
button,
.button,
.text-link {
  font-size: 1rem;
  line-height: 1.7;
}

.lede {
  max-width: 48ch;
  color: var(--ink-body);
  font-size: 1.09375rem;
  line-height: 1.72;
  text-wrap: pretty;
}

.eyebrow {
  margin: 0;
  color: var(--crimson);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Over artwork an eyebrow carries its own label plate: a shadow cannot hold AA against
   every hero frame, so the plate supplies the ground the small caps are measured on. */
.home-hero .eyebrow,
.account-banner .eyebrow {
  display: inline-block;
  border: 1px solid rgb(214 154 36 / 35%);
  border-radius: 999px;
  background: rgb(15 13 11 / 62%);
  padding: 0.3rem 0.75rem;
}

.button,
button {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-control);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.85rem 1.75rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button-primary,
button[type="submit"].button-primary {
  border: 2px solid var(--gold);
  box-shadow: 0 0.5rem 1.8rem rgb(176 30 40 / 18%);
  background: var(--crimson);
  color: var(--on-dark);
}

.button-primary:hover,
button[type="submit"].button-primary:hover {
  background: linear-gradient(180deg, #b62a35, #7d1219);
}

.button-secondary,
button[type="submit"].button-secondary {
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
}

.button-secondary:hover,
button[type="submit"].button-secondary:hover {
  border-color: var(--ink);
  background: rgb(32 29 26 / 4%);
}

.button-secondary--on-art {
  border-color: rgb(255 255 255 / 75%);
  background: rgb(30 24 18 / 25%);
  color: var(--on-dark);
  padding: 0.85rem 2.5rem;
}

.button-secondary--on-art:hover {
  border-color: var(--on-dark);
  background: rgb(30 24 18 / 45%);
}

.text-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.45rem;
  color: var(--crimson);
  font-weight: 600;
  text-decoration-color: rgb(176 30 40 / 35%);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35rem;
}

.text-link::after {
  content: "→";
}

.text-link:hover {
  color: var(--crimson-deep);
  text-decoration-color: currentcolor;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--crimson);
  outline-offset: 2px;
}

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

.skip-link {
  position: fixed;
  z-index: 50;
  top: 0.75rem;
  left: 0.75rem;
  transform: translateY(-200%);
  border-radius: var(--radius-control);
  background: var(--crimson-band);
  color: var(--on-dark);
  padding: 0.75rem 1rem;
}

.skip-link:focus {
  transform: translateY(0);
}

.app-shell {
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
  background: var(--ground);
}

.site-header-frame {
  position: fixed;
  z-index: 40;
  inset: 0 0 auto;
  background: rgb(32 29 26 / 76%);
  color: var(--ground);
  backdrop-filter: blur(14px);
}

.site-header,
.site-footer,
.legal-page {
  margin-inline: auto;
}

.site-header {
  display: flex;
  width: min(100%, 90rem);
  min-height: 5.5rem;
  gap: 2.5rem;
  align-items: center;
  padding-block: 1rem;
  padding-inline: clamp(1.25rem, 4.45vw, 4rem);
}

.wordmark {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.75rem;
  color: var(--ground);
  text-decoration: none;
  margin-right: auto;
}

.wordmark svg {
  flex: 0 0 auto;
  width: 2.15rem;
  height: 2.15rem;
  color: var(--gold);
}

.wordmark-name {
  min-width: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.5rem;
}

.site-nav__link {
  color: var(--ground);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

.site-nav__link:hover {
  color: #efc564;
}

.site-account {
  display: flex;
  align-items: center;
  justify-self: end;
}

.site-nav__sign-in {
  display: inline-flex;
  min-height: 2.65rem;
  align-items: center;
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  color: var(--ground);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 0.5rem 1.4rem;
  text-transform: uppercase;
  text-decoration: none;
}


.site-nav__sign-in:hover,
.site-nav__sign-in:focus-visible {
  border-color: var(--crimson-deep);
  background: var(--crimson);
  color: #fff6f2;
}


.account-menu {
  position: relative;
}

.account-chip {
  display: inline-flex;
  min-height: 2.65rem;
  align-items: center;
  gap: 0.5rem;
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  background: rgb(32 29 26 / 35%);
  padding: 0.25rem 0.75rem 0.25rem 0.3rem;
  cursor: pointer;
  list-style: none;
}

.account-chip::-webkit-details-marker {
  display: none;
}

.account-chip:hover {
  border-color: rgb(176 30 40 / 55%);
}

.account-chip__icon {
  display: inline-grid;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #c43843, var(--crimson-deep));
  color: var(--ground);
}

.account-chip__name {
  overflow: hidden;
  max-width: 13rem;
  color: var(--ground);
  font-size: 0.8125rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-chip__chevron {
  width: 0.4rem;
  height: 0.4rem;
  flex: 0 0 auto;
  transform: rotate(45deg);
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
}

.account-menu[open] .account-chip__chevron {
  margin-top: 0.2rem;
  transform: rotate(225deg);
}

.account-menu__panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  display: grid;
  width: 18.75rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface);
  box-shadow: 0 1.5rem 3rem rgb(32 29 26 / 20%);
  padding: 0.85rem 0.55rem 0.55rem;
  overflow: clip;
}

/* A painted gold edge, the same ornament language as the hero band. */
.account-menu__edge {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 7px;
}

.account-menu__identity {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.6rem 0.7rem 0.85rem;
}

.account-menu__icon {
  display: inline-grid;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  place-items: center;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: linear-gradient(135deg, #c43843, var(--crimson-deep));
  color: var(--ground);
}

.account-chip__icon svg,
.account-menu__icon svg {
  display: block;
}

.account-menu__who {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.account-menu__label {
  color: var(--ink-faint);
  font-size: 0.65625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.account-menu__name {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.account-menu__item {
  display: flex;
  width: 100%;
  min-height: 2.75rem;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--ink);
  font-size: 0.84375rem;
  font-weight: 500;
  letter-spacing: normal;
  padding: 0.5rem 0.7rem;
  text-align: left;
  text-decoration: none;
}

.account-menu__item svg {
  flex: 0 0 auto;
}

.account-menu__item--primary {
  background: var(--crimson-tint);
  font-weight: 600;
}

.account-menu__item--primary svg {
  color: var(--crimson);
}

/* The trailing chevron stays a pseudo-element so the anchor keeps its bare text node. */
.account-menu__item--primary::after {
  width: 0.375rem;
  height: 0.375rem;
  flex: 0 0 auto;
  margin-inline-start: auto;
  transform: rotate(45deg);
  border-top: 1.5px solid var(--gold);
  border-right: 1.5px solid var(--gold);
  content: "";
}

.account-menu__item--quiet {
  color: var(--ink-soft);
}

.account-menu__item--quiet svg {
  color: var(--ink-faint);
}

.account-menu__item:hover {
  background: var(--crimson-tint);
}

.account-menu__item--primary:hover {
  background: rgb(176 30 40 / 16%);
}

.account-menu__ornament {
  display: block;
  margin: 0.55rem auto 0.35rem;
  color: var(--gold);
}

.page-main {
  width: 100%;
  flex: 1;
}

/* The header is fixed, so every in-page jump keeps the header's height clear of its
   target — otherwise "See how it plays" lands with the section's eyebrow behind it. */
.page-main [id] {
  scroll-margin-top: calc(4.75rem + 1rem);
}

.legal-page {
  padding-block: 3rem 5rem;
}

.page-main--auth {
  display: grid;
}

.page-main--login {
  display: grid;
}

.site-footer {
  display: flex;
  width: 100%;
  max-width: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  border-top: 1px solid rgb(251 248 241 / 12%);
  background: var(--ink);
  color: #c4bdb0;
  padding: 2rem clamp(1.25rem, 4.45vw, 4rem);
}

.site-footer__mark {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ground);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  text-decoration: none;
}

.site-footer__mark svg {
  color: var(--gold);
}

.site-footer p {
  font-size: 0.90625rem;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.site-footer nav a {
  color: #c4bdb0;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

.site-footer nav a:hover {
  color: #efc564;
}

@media (min-width: 40rem) {
  .site-header,
  .site-footer,
  .legal-page {
    padding-inline: 2rem;
  }

  .legal-page {
    padding-block: 4.5rem 6rem;
  }

  .site-footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-block: 1.625rem 3rem;
  }
}

@media (max-width: 30rem) {
  .site-nav {
    display: none;
  }

  .account-chip {
    min-height: 2.75rem;
  }

  .account-chip__name {
    max-width: 7rem;
  }

  .wordmark-name {
    font-size: 1.1875rem;
  }
}

/* Login, auth, system and legal pages */

.heading-group,
.auth-copy,
.stack,
.form-stack,
.provider-list {
  display: flex;
  flex-direction: column;
}

.heading-group,
.auth-copy {
  gap: 0.875rem;
}

.stack {
  gap: 1.5rem;
}

.login-split {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  min-width: 0;
  min-height: max(62.5rem, 100svh);
  background: var(--ink);
  padding: 9.375rem clamp(1.25rem, 5.55vw, 5rem) 4rem;
}

.login-art {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(32 29 26 / 25%), transparent 30%, rgb(32 29 26 / 42%) 58%, rgb(32 29 26 / 85%)), url("/assets/art/login-gate.webp?v=20260906b") center / cover no-repeat;
}

.login-form {
  position: relative;
  display: flex;
  grid-column: 2;
  min-width: 0;
  width: 100%;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
}

.auth-card {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 35rem;
  min-width: 0;
  flex-direction: column;
  gap: 1.35rem;
  align-items: flex-start;
  border: 2px solid var(--gold);
  border-radius: 1.5rem;
  background: var(--ground);
  padding: 2.5rem 3rem;
  box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 15%);
}

.auth-card > form,
.auth-card > .stack,
.auth-card > .provider-list,
.auth-card > .auth-divider,
.auth-card > .auth-copy,
.auth-card > .button {
  width: 100%;
}

.auth-card h1 {
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 600;
  line-height: 1.09;
  overflow-wrap: break-word;
}

.auth-card .lede {
  max-width: none;
  font-size: 1rem;
  line-height: 1.65;
}

.auth-card .button,
.auth-card button { border-radius: 999px; }
.auth-card input { border-radius: 0.875rem; background: var(--surface); }

.auth-trust {
  display: grid;
  width: 100%;
  max-width: 37rem;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.auth-trust li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  color: var(--ground);
  font-size: 0.875rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.auth-trust li::before {
  width: 0.55rem;
  height: 0.55rem;
  flex: 0 0 auto;
  margin-top: 0.4rem;
  background: var(--gold);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  content: "";
}

.form-stack {
  width: 100%;
  gap: 1rem;
}

.form-stack > .button-primary {
  width: 100%;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

label {
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 500;
}

input {
  width: 100%;
  min-height: 3.25rem;
  border: 1px solid rgb(32 29 26 / 18%);
  border-radius: var(--radius-control);
  background: var(--ground);
  color: var(--ink);
  padding: 0.9375rem 1.125rem;
}

input::placeholder {
  color: var(--ink-faint);
}

input:hover {
  border-color: rgb(32 29 26 / 42%);
}

input[aria-invalid="true"] {
  border-color: var(--crimson);
}

.hint,
.fine-print {
  color: var(--ink-soft);
  text-wrap: pretty;
}

.fine-print {
  font-size: 0.84375rem;
  line-height: 1.56;
}

.safety-note {
  display: flex;
  width: 100%;
  gap: 0.625rem;
  align-items: flex-start;
  color: var(--ink-soft);
}

.safety-note svg {
  flex: 0 0 auto;
  margin-top: 0.2rem;
}

.notice,
.error {
  border-left: 3px solid var(--gold);
  border-radius: 0.375rem;
  background: var(--gold-tint);
  padding: 0.875rem 1rem;
  text-wrap: pretty;
}

.error {
  border-color: var(--crimson);
  background: #fdf0ef;
  color: #7d1219;
}

.provider-list {
  width: 100%;
  gap: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.provider-list form,
.provider-list button {
  width: 100%;
}

.provider-list--first {
  padding-top: 0;
  border-top: 0;
}

.provider-button {
  gap: 0.75rem;
  border-width: 2px;
  background: var(--surface);
  font-size: 0.96875rem;
  font-weight: 500;
}

.provider-button__mark {
  display: inline-grid;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--ground);
  color: var(--crimson);
  font-size: 0.8125rem;
  font-weight: 700;
}

.auth-divider {
  display: flex;
  gap: 0.875rem;
  align-items: center;
  color: var(--ink-faint);
  font-size: 0.78125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.auth-divider::before,
.auth-divider::after {
  height: 1px;
  flex: 1;
  background: var(--line);
  content: "";
}

.auth-card--consent .account-choice {
  border-left: 3px solid var(--gold);
  border-radius: 0.375rem;
  background: var(--gold-tint);
  padding: 0.9rem 1rem;
}

.consent-cancel {
  width: 100%;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.button-quiet,
button[type="submit"].button-quiet {
  min-height: 2.75rem;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-weight: 500;
}

.button-quiet:hover,
button[type="submit"].button-quiet:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.button-compact,
button[type="submit"].button-compact {
  min-height: 2.75rem;
  padding: 0.45rem 0.75rem;
  font-size: 1rem;
}

.legal-page {
  width: min(100%, 76rem);
  padding-inline: 1.25rem;
  display: grid;
  gap: 3rem;
}

.legal-page__body {
  display: grid;
  max-width: 48rem;
  gap: 2.5rem;
}

.legal-page__body section {
  display: grid;
  gap: 0.85rem;
}

.legal-page__body h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
}

.legal-page__body p,
.legal-page__body li {
  color: var(--ink-body);
}

@media (min-width: 40rem) {
  .auth-card {
    padding: 2.5rem 2.75rem 2.75rem;
  }
}

@media (min-width: 54rem) {
  .legal-page {
    grid-template-columns: minmax(18rem, 4fr) minmax(0, 6fr);
    gap: 5rem;
    align-items: start;
  }

  .legal-page__header {
    position: sticky;
    top: 7rem;
  }
}



.login-welcome { position: relative; grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 1.3rem; align-self: end; padding-top: 34rem; padding-right: 2rem; color: var(--ground); }
.login-welcome h2 { max-width: 20ch; color: var(--ground); font-size: clamp(2.5rem, 4vw, 3.5rem); font-style: italic; font-weight: 500; line-height: 1.08; text-shadow: 0 3px 20px rgb(32 29 26 / 80%); }
.login-welcome > p { max-width: 46ch; color: #e7e1d6; font-size: 1rem; }
.auth-card--code #code { font-size: clamp(1.5rem, 3.5vw, 2.5rem); font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: 0.32em; text-align: center; border-color: var(--gold); min-height: 4.5rem; padding-inline: 0.5rem; }
.legal-page { padding-top: 9rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.isolate { isolation: isolate; }
.mobile-nav { display: none; }
@media (max-width: 59.999rem) {
  .site-header { min-height: 4.5rem; gap: 1rem; }
  .site-nav { display: none; }
  .wordmark-name { font-size: 1.4rem; }
  .wordmark svg { width: 1.8rem; height: 1.8rem; }
  .mobile-nav { display: block; }
  .mobile-nav summary { list-style: none; cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; font-size: 0.9rem; color: var(--ground); }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  .mobile-nav__panel { position: absolute; inset: 100% 0 auto; display: grid; gap: 0.25rem; background: var(--ink); border-bottom: 1px solid var(--gold); padding: 1rem 1.5rem; }
  .mobile-nav__panel a { color: var(--ground); text-decoration: none; padding: 0.7rem; font-size: 1rem; }
  .mobile-nav__panel a:hover { background: rgb(251 248 241 / 8%); }
  .login-split { display: flex; flex-direction: column; gap: 2rem; min-height: 100svh; padding: 24rem 1.25rem 3.5rem; }
  .login-art { background-size: auto 42rem; background-position: 15% top; background-color: var(--ink); background-repeat: no-repeat; }
  .login-art::after { position: absolute; inset: 0; content: ""; background: linear-gradient(transparent 20rem, var(--ink) 40rem); }
  .login-welcome { padding: 0; align-self: stretch; width: min(100%, 35rem); margin-inline: auto; }
  .login-welcome h2 { font-size: 2.6rem; }
  .login-welcome .auth-trust { display: none; }
  .login-form { align-items: center; padding: 0; }
  .auth-card { padding: 2rem 1.5rem; }
  .auth-card h1 { font-size: 2.25rem; }
  .auth-card .lede, .fine-print, label, .hint { font-size: 1rem; }
  .site-footer { align-items: flex-start; flex-direction: column; padding: 2rem 1.25rem; }
  .site-footer p, .site-footer nav a { font-size: 1rem; }
}
@media (max-width: 39.999rem) {
  .site-header { padding-inline: 1rem; gap: 0.8rem; }
  .wordmark { gap: 0.45rem; }
  .wordmark-name { font-size: 1.25rem; }
  .site-nav__sign-in { padding-inline: 0.8rem; font-size: 0.75rem; }
  .account-chip__name { max-width: 5rem; }
  .account-chip__icon { display: none; }
  .account-menu__panel { width: min(18.75rem, calc(100vw - 2rem)); }
  .login-split { padding-top: 24rem; }
  .login-welcome h2 { font-size: 2.5rem; }
  .auth-card { padding: 1.75rem 1.3rem; }
  .auth-card h1 { font-size: 2.2rem; }
  .auth-card--code #code { font-size: 1.8rem; letter-spacing: 0.26em; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }
/* Shared layout primitives also used by the account and authentication templates. */
.home-inset, .account-inset { width: min(100%, 90rem); margin-inline: auto; padding-inline: clamp(1.25rem, 5.55vw, 5rem); }
.home-flourish, .home-kicker, .home-emblem, .account-kicker, .page-kicker { flex: 0 0 auto; color: var(--gold); }
.sprinkle { display: block; height: auto; pointer-events: none; user-select: none; object-fit: contain; }
.section-watermark { position: absolute; pointer-events: none; width: 29rem; height: 29rem; left: 50%; top: -2rem; transform: translateX(-50%); color: rgb(81 10 21 / 20%); }

.home-story { --story-gold: #edc675; --story-dark: #242823; overflow: clip; }
.home-story h1, .home-story h2 { font-weight: 500; letter-spacing: -0.045em; text-wrap: balance; }
.home-story h2 { font-size: clamp(2.65rem, 4.5vw, 4.7rem); line-height: 1.08; }
.home-story h2 em { color: #956b24; font-weight: 500; }
.home-story p { text-wrap: pretty; }
.home-label { font: 0.75rem/1.6 ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.15em; color: #8c6122; }
.home-link { display: inline-flex; align-items: center; gap: 1.25rem; min-height: 3rem; color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; width: fit-content; }
.home-link span { display: inline-block; }
.home-link:hover span { transform: translate(3px, -2px); }
.home-link:focus-visible, .home-motion:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
.home-motion { position: fixed; z-index: 15; right: 1.25rem; bottom: 1.25rem; display: flex; align-items: center; gap: 0.6rem; min-height: 3rem; padding: 0.7rem 1rem; border: 1px solid #bda269; border-radius: 2rem; background: #252824; color: #fbf8f1; font-size: 0.75rem; box-shadow: 0 2px 16px #0002; }
.home-motion[hidden] { display: none; }
.home-motion__mark { width: 0.6rem; height: 0.7rem; border-inline: 2px solid currentColor; }
.home-motion[aria-pressed="false"] .home-motion__mark { border: 1px solid currentColor; border-radius: 50%; }

/* One canvas owns the crop of every painted plane. Additions never rescale it. */
.home-defs { position: absolute; pointer-events: none; }
.home-paint { position: relative; overflow: clip; background: #9cc7bc; }
.home-paint__base, .home-paint__complete, .home-paint__layers { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.home-paint__complete { pointer-events: none; }
.home-paint__layers { display: none; }
.home-story[data-motion="on"] .home-paint__complete { visibility: hidden; }
.home-story[data-motion="on"] .home-paint[data-ready] .home-paint__layers { display: block; }
.home-story[data-motion="on"] .home-paint[data-failed] .home-paint__complete { visibility: visible; }
.home-hero { position: relative; display: grid; align-content: center; min-height: min(62rem, 100svh); padding: 10rem 0 6rem; overflow: clip; color: var(--ground); background: #44695c; }
.home-hero__art { position: absolute; inset: 4.75rem 0 0; }
.home-hero__art[data-ready] .home-hero__sky { display: block; }
.home-hero__sky { mask-image: url(#hero-sky-clip); }
.home-hero__sky > img, .home-hero__cloud-depth { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-hero__cloud-depth--near { mask-image: linear-gradient(#000 var(--sky-near), transparent var(--sky-far)); }
.home-hero__cloud-depth--far { mask-image: linear-gradient(transparent var(--sky-near), #000 var(--sky-far)); }
.home-hero__cloud { position: absolute; left: var(--cloud-left); top: var(--cloud-top); width: calc(var(--cloud-unit) * 1872); height: calc(var(--cloud-unit) * 1053.56); object-fit: cover; animation-play-state: paused; }
.home-hero__cloud--near { animation: home-cloud-near 56s -8s ease-in-out infinite alternate paused; }
.home-hero__cloud--far { animation: home-cloud-far 92s -18s ease-in-out infinite alternate paused; }
.home-story[data-motion="on"] .home-hero[data-visible] .home-hero__art[data-ready] .home-hero__cloud { animation-play-state: running; will-change: transform; }
.home-hero__art::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, #201d1ae6, #201d1a99 36%, #201d1a24 68%, transparent 95%); }
.home-hero__copy { position: relative; display: flex; align-items: flex-start; flex-direction: column; gap: 1.5rem; }
.home-hero .home-label { color: var(--story-gold); }
.home-hero__title { display: flex; flex-direction: column; font-size: clamp(3.3rem, 6.1vw, 5.9rem); line-height: 1.1; color: var(--ground); max-width: 20ch; }
.home-hero__title > * { display: block; }
.home-hero__title em { color: var(--ground); font-size: 0.94em; font-weight: 500; }
.home-hero__lede { font-size: 1.2rem; line-height: 1.6; color: #fbf8f1; max-width: 48ch; }
.home-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.home-hero__actions .button { min-height: 3.5rem; padding-inline: 1.8rem; }
.home-hero__replay .home-link { min-height: 3rem; padding: 0; background: transparent; border-width: 0 0 1px; border-radius: 0; font-size: 0.875rem; color: #efe6d2; }
.home-hero__replay[hidden] { display: none; }
.home-hero > .home-flourish { position: relative; margin: 2rem 0 1rem clamp(1.25rem, 5.55vw, 5rem); color: var(--story-gold); }
.home-hero__footnote { position: relative; padding-inline: clamp(1.25rem, 5.55vw, 5rem); font-size: 0.875rem; color: #e6e3d6; }
.home-wave { position: absolute; bottom: -1px; left: 0; width: 100%; height: 3rem; fill: #a81d26; pointer-events: none; }
.home-wave__gold { fill: none; stroke: var(--gold); stroke-width: 3; }
.home-invitation { position: relative; overflow: clip; padding-block: 5rem 6rem; background: #a81d26; color: var(--ground); }
.home-invitation__inner { display: flex; flex-direction: column; align-items: center; gap: 1.7rem; text-align: center; }
.home-invitation h2 { max-width: 24ch; color: var(--ground); }
.home-invitation h2 em, .home-invitation .home-label, .home-invitation .home-flourish { color: var(--story-gold); }
.home-invitation__inner > p:last-child { max-width: 48ch; font-size: 1.15rem; line-height: 1.7; }
.home-invitation .home-wave { fill: var(--ground); }
.home-discover__themes { padding-block: 1.3rem; color: #8c6122; font-size: 0.875rem; border-bottom: 1px solid var(--line); }
.home-together__journey { position: relative; }
.home-together__painting .home-paint__base, .home-together__painting .home-paint__complete { object-position: left center; }
.home-possibility { position: relative; }
.home-possibility .home-wave { bottom: auto; top: -2.5rem; }
.home-chapters { display: flex; justify-content: space-between; gap: 1.5rem; padding-block: 1.5rem; border-bottom: 1px solid var(--line); }
.home-chapters a { display: flex; align-items: center; gap: 0.75rem; min-height: 3rem; color: var(--ink); text-decoration: none; font-size: 0.875rem; }
.home-chapters a:hover { color: #9b641a; }
.home-chapters span { color: #996c2c; font: 0.75rem ui-monospace, monospace; }
.home-intro { display: grid; grid-template-columns: 3fr 2fr; align-items: end; gap: 4rem; padding-block: 6rem 3.5rem; }
.home-intro > div { display: flex; flex-direction: column; gap: 1.25rem; }
.home-intro > p { max-width: 40ch; font-size: 1.125rem; line-height: 1.8; padding-bottom: 0.3rem; }
.home-discover__painting, .home-together__painting { position: relative; overflow: clip; height: clamp(30rem, 49vw, 47rem); background: var(--story-dark); }
.home-landscape { width: 100%; height: 108%; position: absolute; inset: -4% 0; object-fit: cover; transform: translateY(var(--scene-shift, 0px)) scale(1.025); }
.home-discover__painting::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 25%, #1d292530 55%, #1d2925d9); }
.home-discover__caption { position: absolute; z-index: 1; right: 7%; top: 26%; display: flex; flex-direction: column; gap: 1.5rem; color: var(--ground); }
.home-discover__caption .home-label { color: var(--story-gold); }
.home-discover__caption > p:last-child { font: 500 clamp(2rem, 3vw, 3rem)/1.35 var(--font-display); }
.home-discover__caption em { color: var(--story-gold); }
.home-discover__after { display: grid; grid-template-columns: 2fr 3fr; align-items: center; gap: 2rem; padding-block: 4rem; }
.home-discover__after > p, .home-possibility__foot > p, .home-together__after > p { font: 500 clamp(1.7rem, 2.6vw, 2.5rem)/1.35 var(--font-display); }
.home-discover__after > p { max-width: 16ch; }
.home-discover__after em { color: #956b24; }
.home-vignette { position: relative; width: 100%; aspect-ratio: 16 / 9; pointer-events: none; mask-image: linear-gradient(transparent, #000 6%, #000 89%, transparent); }
.home-vignette__static, .home-vignette__layers { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-vignette__layers { display: none; }
.home-story[data-motion="on"] .home-vignette[data-ready]:not([data-settled]) .home-vignette__static { visibility: hidden; }
.home-story[data-motion="on"] .home-vignette[data-ready]:not([data-settled]) .home-vignette__layers { display: block; }
.home-story[data-motion="on"] .home-vignette[data-ready] .home-vignette__pigment { transform: scale(0); }
.home-story[data-motion="on"] .home-vignette[data-ready][data-seen] .home-vignette__pigment { animation: home-vignette-ground 2.6s cubic-bezier(0.2, 0.6, 0.3, 1) both; }
.home-story[data-motion="on"] .home-vignette[data-ready][data-seen] .home-vignette__pigment--detail { animation: home-vignette-detail 3.2s 0.4s cubic-bezier(0.2, 0.6, 0.3, 1) both; }

.home-play { background: #eae7dc; padding-block: 6rem; border-block: 1px solid #d8d1bf; }
.home-play__heading { display: grid; grid-template-columns: 3fr 2fr; align-items: end; gap: 3rem; }
.home-play__heading .home-label { margin-bottom: 1.25rem; }
.home-play__heading > p { line-height: 1.8; font-size: 1.125rem; max-width: 38ch; padding-bottom: 0.3rem; }
.home-example { margin-top: 3.5rem; }
.home-example__heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 2rem; padding-bottom: 1.25rem; }
.home-example__heading .home-label { color: #842c30; }
.home-example__heading > p:last-child { color: #666254; font-size: 0.875rem; }
.home-example__controls { position: sticky; top: 6rem; z-index: 3; background: #eae7dc; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
.home-moment { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.7rem 1rem; min-height: 3rem; cursor: pointer; color: #665f50; border-bottom: 2px solid #c8bfa9; }
.home-moment input { min-height: 0; }
.home-moment > span { color: #8c6122; font: 0.75rem/1.6 ui-monospace, monospace; }
.home-moment:has(input:checked) { color: #842c30; border-color: #842c30; background: #fbf8f199; }
.home-moment:hover { background: #fbf8f180; }
.home-moment:has(input:focus-visible) { outline: 3px solid #9d732d; outline-offset: 3px; }
.home-example__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding: 0; margin: 1.5rem 0 0; border: 0; min-width: 0; }
.home-step { position: relative; display: flex; gap: 0.75rem; padding: 1.25rem 1rem; border-top: 2px solid #c8bfa9; }
.home-step > span:last-child { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; }
.home-step strong { font: 500 1.35rem/1.2 var(--font-display); }
.home-step__number { font: 0.75rem/1.9 ui-monospace, monospace; color: #8c6122; }
.home-step__speaker { font-size: 0.8rem; color: #726750; }
.home-step__quote { font-size: 0.925rem; line-height: 1.65; }
.home-example:has(#bridge-idea:checked) .home-step:nth-child(1),
.home-example:has(#bridge-proposal:checked) .home-step:nth-child(2),
.home-example:has(#bridge-confirm:checked) .home-step:nth-child(3),
.home-example:has(#bridge-result:checked) .home-step:nth-child(4) { background: #fbf8f199; border-top-color: #842c30; }
.home-bridge { margin: 0; }
.home-bridge__stage { position: relative; overflow: clip; background: #842c30; }
.home-bridge__canvas { position: relative; aspect-ratio: 16 / 9; background: #9cc7bc; }
.home-bridge__coast, .home-bridge__layers { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.home-bridge__layers { pointer-events: none; }
.home-bridge__pigment--bridge, .home-bridge__pigment--travelers { transform: scale(0); }
.home-bridge__addition--bridge { opacity: 0.65; }
.home-bridge__captions { position: absolute; inset: auto 0 0; padding: 6rem 2.5rem 2rem; background: linear-gradient(transparent, #172720e6); color: #f1e8cf; font: 500 clamp(1.8rem, 3vw, 2.8rem)/1.2 var(--font-display); }
.home-bridge__captions p { display: none; font-size: inherit; line-height: inherit; }
.home-bridge__captions em { color: var(--story-gold); }
.home-example:has(#bridge-idea:checked) .home-bridge__caption--idea,
.home-example:has(#bridge-proposal:checked) .home-bridge__caption--proposal,
.home-example:has(#bridge-confirm:checked) .home-bridge__caption--confirm,
.home-example:has(#bridge-result:checked) .home-bridge__caption--result { display: block; }
.home-example:has(#bridge-proposal:checked) .home-bridge__pigment--bridge,
.home-example:has(#bridge-confirm:checked) .home-bridge__pigment--bridge,
.home-example:has(#bridge-result:checked) .home-bridge__pigment--bridge,
.home-example:has(#bridge-result:checked) .home-bridge__pigment--travelers { transform: scale(2000, 1200); }
.home-example:has(#bridge-confirm:checked) .home-bridge__addition--bridge { opacity: 0.85; }
.home-example:has(#bridge-result:checked) .home-bridge__addition--bridge { opacity: 1; }
.home-bridge figcaption { font-size: 0.8rem; color: #665f50; line-height: 1.6; padding-top: 1rem; max-width: 100ch; }
.home-play__connection { display: flex; justify-content: space-between; align-items: center; gap: 3rem; border-top: 1px solid #c8bfa9; padding-top: 2rem; margin-top: 3rem; }
.home-play__connection > p { max-width: 64ch; line-height: 1.8; font-size: 0.95rem; }
.home-play__connection strong { display: block; font-weight: 600; }
.home-play__connection a { flex-shrink: 0; font-size: 0.875rem; }

.home-possibility { background: #842c30; color: #f8edda; padding-top: 6rem; }
.home-possibility__inner { display: grid; grid-template-columns: 2fr 3fr; gap: 4rem; align-items: center; }
.home-possibility__inner > div { display: flex; flex-direction: column; gap: 1.5rem; }
.home-possibility h2, .home-possibility h2 em { color: #f8edda; }
.home-possibility .home-label { color: var(--story-gold); }
.home-possibility__inner p:last-child { max-width: 36ch; font-size: 1.1rem; line-height: 1.8; }
.home-possibility__inner > img { width: 100%; height: 34rem; object-fit: cover; object-position: 20%; border-radius: 50% 50% 0.5rem 0.5rem; }
.home-possibility__foot { display: grid; justify-items: center; gap: 1rem; padding-block: 4rem 3rem; text-align: center; }
.home-possibility__foot em { color: var(--story-gold); }
.home-possibility__foot .home-vignette { max-width: 64rem; }
.home-together__painting::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 25%, #16221bde); }
.home-together__contributions { position: absolute; z-index: 1; bottom: 3rem; left: 6%; right: 6%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; color: #fff8e9; }
.home-contribution { display: flex; flex-direction: column; gap: 0.85rem; font: 500 1.6rem/1.3 var(--font-display); border-top: 1px solid #eed19270; padding-top: 1rem; }
.home-contribution span { color: #edcf91; font: 0.75rem/1.6 ui-monospace, monospace; }
.home-together__after { display: grid; grid-template-columns: 2fr 3fr; align-items: center; gap: 2rem; padding-block: 4rem; }
.home-together__after > p { max-width: 18ch; }
.home-together__after em { color: #956b24; }
.home-evening { position: relative; min-height: 53rem; display: flex; align-items: center; overflow: clip; background: #202722; }
.home-evening::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #16251af2, #19281cb3 45%, #19281c22), linear-gradient(0deg, #15251d99, transparent); }
.home-evening__copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; padding-block: 7rem; color: #eee8d9; }
.home-evening .home-label, .home-evening h2 em { color: var(--story-gold); }
.home-evening h2 { color: var(--ground); font-size: clamp(3rem, 6.2vw, 6rem); }
.home-evening__copy > p:not(.home-label) { max-width: 40ch; font-size: 1.125rem; line-height: 1.8; }
.home-evening__copy > .home-evening__last { font-family: var(--font-display); font-style: italic; font-size: 1.7rem; color: var(--story-gold); }
.home-closing { padding-block: 6rem; }
.home-closing__inner { display: grid; grid-template-columns: 3fr 2fr; gap: 4rem; align-items: center; }
.home-closing__inner > div { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.home-closing__inner p:not(.home-label) { max-width: 44ch; line-height: 1.8; }
.home-closing__gate { width: min(100%, 23rem); height: 30rem; object-fit: cover; border-radius: 50% 50% 0.5rem 0.5rem; justify-self: center; }
.home-closing__note { color: var(--ink-soft); font-size: 0.875rem; }
.home-agent { border-top: 1px solid #786b44; background: #242823; color: var(--ground); padding-block: 5rem; }
.home-agent__body { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.home-agent__copy { display: flex; flex-direction: column; gap: 1.2rem; }
.home-agent .eyebrow { color: var(--story-gold); }
.home-agent h2 { color: var(--ground); font-size: 3rem; }
.home-agent__copy > p { color: #ddd9ce; line-height: 1.8; }
.home-agent__copy .home-agent__note { color: #c4c5b9; font-size: 0.875rem; }
.home-guide { display: flex; flex-direction: column; gap: 1.25rem; padding: 2rem; outline: 1px solid #edc67566; border-radius: 0.5rem; }
.home-guide__label { color: var(--story-gold); font: 0.75rem/1.6 ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.08em; }
.home-guide__url { color: #f8edda; font: 1.25rem ui-monospace, monospace; overflow-wrap: anywhere; }
.home-guide > p { line-height: 1.8; }
.home-guide__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.home-guide__actions .button { background: transparent; color: var(--story-gold); border-color: #edc67566; }
.home-guide__actions p { flex: 1; min-width: 10rem; font-size: 0.875rem; color: #c4c5b9; }

/* Entrances finish once; scroll paints additions without owning the visitor's scroll. */
.home-story[data-motion="on"] .home-hero__title > * { opacity: var(--title-opacity, 1); transform: translateY(var(--title-rise, 0px)); filter: blur(var(--title-blur, 0px)); }
.home-story[data-motion="on"] .home-bridge__pigment--bridge,
.home-story[data-motion="on"] .home-bridge__pigment--travelers { transition: transform 2s cubic-bezier(0.2, 0.6, 0.3, 1); }
.home-story[data-motion="on"] .home-bridge__addition--bridge { transition: opacity 1s ease; }
.home-story[data-motion="on"] .home-reveal[data-seen] { animation: home-arrive 1s both; }
.home-story[data-motion="on"] .home-reveal[data-seen] h2 em { display: inline-block; animation: home-title 1.2s 0.15s both; }

.home-story[data-motion="on"] .home-contribution { opacity: calc(0.65 + var(--contribution, 1) * 0.35); border-color: rgb(238 209 146 / calc(0.25 + var(--contribution, 1) * 0.55)); }
.home-story [data-scene]:not([data-visible]) *,
.home-story [data-vignette]:not([data-visible]) *,
.home-story [data-seen]:not([data-visible]),
.home-story[data-motion="off"] *,
.home-story[data-document-hidden] * { animation-play-state: paused !important; }
.home-story[data-motion="off"] .home-landscape { transform: none; }
.home-story[data-document-hidden] * { transition: none !important; }
@keyframes home-arrive { from { opacity: 0.25; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes home-title { from { opacity: 0.1; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes home-vignette-ground { from { transform: scale(0); } to { transform: scale(2200, 360); } }
@keyframes home-vignette-detail { from { transform: scale(0); } to { transform: scale(2400, 1600); } }
@keyframes home-cloud-near { from { transform: translate(calc(var(--cloud-unit) * -24), 0); } to { transform: translate(calc(var(--cloud-unit) * 74), calc(var(--cloud-unit) * 12)); } }
@keyframes home-cloud-far { from { transform: translate(calc(var(--cloud-unit) * 16), 0); } to { transform: translate(calc(var(--cloud-unit) * -28), calc(var(--cloud-unit) * -4)); } }
@media (min-width: 60rem) {
  .home-story[data-motion="on"] .home-together__journey { height: 260svh; }
  .home-story[data-motion="on"] .home-together__journey .home-together__painting { position: sticky; top: 4.75rem; height: calc(100svh - 4.75rem); }
}
@media (prefers-reduced-motion: reduce) {
  .home-story *, .home-story *::before, .home-story *::after { animation: none !important; transition: none !important; }
  .home-story .home-landscape, .home-story .home-hero__title > * { transform: none !important; filter: none !important; opacity: 1 !important; }
  .home-story .home-paint__layers { display: none !important; }
  .home-story .home-paint__complete { visibility: visible !important; }
  .home-story .home-vignette__static { visibility: visible !important; }
  .home-story .home-vignette__layers { display: none !important; }
  .home-story .home-together__journey { height: auto !important; }
  .home-story .home-together__painting { position: relative !important; }
}
@media (max-width: 59.999rem) {
  .home-hero { min-height: 50rem; padding: 11rem 0 5rem; }
  .home-hero__title { font-size: clamp(3.1rem, 6.8vw, 4.6rem); }
  .home-hero__copy { align-items: flex-start; }
  .home-intro, .home-possibility__inner, .home-closing__inner, .home-agent__body { gap: 2rem; }
  .home-intro { grid-template-columns: 1fr; padding-block: 4rem 2.5rem; }
  .home-intro > p { max-width: 56ch; }
  .home-discover__painting .home-landscape { object-position: 25%; }
  .home-discover__caption { right: 5%; top: auto; bottom: 2.5rem; }
  .home-discover__after, .home-together__after { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 3rem; }
  .home-discover__after > p, .home-together__after > p { max-width: 28ch; }
  .home-play__heading { grid-template-columns: 1fr; gap: 1.5rem; }
  .home-play__heading > p { max-width: 54ch; }
  .home-example__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-play__connection { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .home-possibility__inner { grid-template-columns: 1fr 1fr; }
  .home-possibility__inner > img { height: 29rem; }
  .home-possibility__foot { padding-block: 3rem 2rem; }
  .home-together__contributions { gap: 1.5rem; }
  .home-contribution { font-size: 1.3rem; }
  .home-agent__body { grid-template-columns: 1fr; }
  .home-closing__gate { height: 25rem; }
}
@media (max-width: 39.999rem) {
  .home-hero { min-height: 49rem; padding: 13rem 0 5rem; text-align: center; }
  .home-hero__art { inset: 4.75rem 0 0; }
  .home-hero__art::after { background: linear-gradient(0deg, #201d1af2, #201d1a9c 55%, #201d1a1a); }
  .home-hero__copy { align-items: center; gap: 1.4rem; }
  .home-hero__title { font-size: clamp(2.45rem, 10vw, 3.8rem); line-height: 1.17; }
  .home-hero__title em { font-size: 0.82em; margin: 0; }
  .home-hero__lede { font-size: 1.0625rem; line-height: 1.65; }
  .home-hero > .home-flourish { margin-inline: auto; }
  .home-invitation { padding-block: 4rem 5rem; }
  .home-invitation__inner > p:last-child { font-size: 1.0625rem; }
  .home-discover__themes { font-size: 1rem; line-height: 1.7; }
  .home-hero__lede br { display: none; }
  .home-hero__actions { flex-direction: column; gap: 0.5rem; }
  .home-hero__footnote { padding-inline: 1.25rem; font-size: 1rem; }
  .home-chapters { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; padding-block: 1rem; }
  .home-chapters a { font-size: 1rem; gap: 0.5rem; }
  .home-intro { gap: 1.5rem; }
  .home-story h2 { font-size: 2.65rem; }
  .home-intro > p { font-size: 1.1rem; }
  .home-discover__painting { height: 34rem; }
  .home-discover__painting::after { background: linear-gradient(transparent 25%, #18271ad9); }
  .home-discover__caption { left: 1.25rem; right: auto; bottom: 2rem; }
  .home-discover__caption > p:last-child { font-size: 2rem; }
  .home-discover__after { padding-block: 2.5rem; }
  .home-discover__after > p { font-size: 1.65rem; }
  .home-play { padding-block: 4rem; }
  .home-play__heading h2 { font-size: 2.9rem; }
  .home-play__heading > p { font-size: 1rem; }
  .home-example { margin-top: 2.5rem; }
  .home-example__heading { gap: 0.5rem; }
  .home-example__heading > p:last-child { font-size: 1rem; }
  .home-example__controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .home-moment { padding-inline: 0.75rem; font-size: 1rem; }
  .home-example__steps { grid-template-columns: 1fr; gap: 0.5rem; margin-top: 1rem; }
  .home-step { padding: 1rem; align-items: flex-start; }
  .home-step strong { font-size: 1.35rem; }
  .home-step__quote, .home-step__speaker { font-size: 1rem; }
  .home-bridge__canvas { aspect-ratio: 4 / 3; }
  .home-bridge__captions { position: relative; font-size: 1.6rem; padding: 1.25rem; background: #842c30; min-height: 9rem; }
  .home-bridge figcaption { padding-top: 0.75rem; }
  .home-bridge figcaption, .home-play__connection > p, .home-play__connection a { font-size: 1rem; }
  .home-play__connection { margin-top: 2rem; }
  .home-possibility { padding-top: 4rem; }
  .home-possibility__inner { grid-template-columns: 1fr; }
  .home-possibility__inner > img { height: 27rem; }
  .home-possibility__foot { padding-block: 2.5rem 2rem; }
  .home-possibility__foot > p { font-size: 1.55rem; }
  .home-together__painting { height: auto; padding-top: 90vw; }
  .home-together__painting > img, .home-together__painting > svg { height: 90vw; }
  .home-together__painting::after { bottom: auto; height: 90vw; background: linear-gradient(transparent 60%, #242823); }
  .home-together__contributions { position: relative; inset: auto; grid-template-columns: 1fr; gap: 1rem; padding: 1.5rem 1.25rem 2rem; background: #242823; }
  .home-contribution { font-size: 1.4rem; gap: 0.25rem; padding-top: 0.8rem; }
  .home-contribution span { font-size: 0.85rem; }
  .home-together__after { padding-block: 2.5rem; }
  .home-together__after > p { max-width: 100%; font-size: 1.65rem; }
  .home-evening { min-height: 53rem; align-items: flex-start; }
  .home-evening__copy { padding-block: 4rem; }
  .home-evening h2 { font-size: 3.5rem; }
  .home-closing { padding-block: 4rem; }
  .home-closing__inner { grid-template-columns: 1fr; gap: 3rem; }
  .home-closing__gate { width: 17rem; height: 23rem; }
  .home-closing__note, .home-agent__copy .home-agent__note, .home-guide__actions p { font-size: 1rem; }
  .home-guide { padding: 1.5rem; }
  .home-guide__url { font-size: 1.05rem; }
  .home-motion { right: 0.75rem; bottom: 0.75rem; font-size: 1rem; }
}
.account-page {
  display: flex;
  flex-direction: column;
}

.account-banner {
  position: relative;
  display: flex;
  min-height: 40rem;
  flex-direction: column;
  justify-content: flex-end;
  overflow: clip;
  background: url("/assets/art/account-banner.webp?v=20260906b") center / cover no-repeat var(--ink);
  padding-block: 13rem 4.2rem;
}

.account-banner::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(32 29 26 / 55%), rgb(32 29 26 / 10%) 30%, rgb(32 29 26 / 55%) 60%, rgb(32 29 26 / 92%));
  content: "";
}

.account-banner__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4.5rem;
  align-items: flex-start;
}

.account-banner__copy {
  display: flex;
  min-width: 0;
  max-width: 57rem;
  flex-direction: column;
  gap: 1.1rem;
  align-items: flex-start;
}

/* Keep the heading and location readable over the coastal painting. */
.account-banner .eyebrow {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  color: #efc564;
  text-shadow: 0 2px 16px rgb(12 10 8 / 85%);
}

.account-banner h1 {
  max-width: 21ch;
  color: var(--ground);
  font-size: clamp(2.5rem, 5.6vw, 5.2rem);
  font-weight: 500;
  line-height: 1.06;
  overflow-wrap: break-word;
  text-shadow: 0 3px 24px rgb(12 10 8 / 60%);
}

.account-banner__sub {
  max-width: 54ch;
  color: #e5e1d8;
  font-size: 1.2rem;
  line-height: 1.6;
  text-shadow: 0 2px 18px rgb(12 10 8 / 85%);
}

.account-banner__place {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
  border: 1.5px solid rgb(214 154 36 / 85%);
  border-radius: var(--radius-control);
  background: rgb(18 15 12 / 55%);
  color: var(--on-dark);
  font-size: 0.90625rem;
  padding: 0.55rem 0.9rem;
  overflow-wrap: anywhere;
}

.account-banner__place svg {
  flex: 0 0 auto;
  color: var(--gold);
}

.account-content {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  padding-block: 4.5rem 4rem;
}

.account-columns {
  display: grid;
  gap: 1.75rem;
  align-items: start;
}

.account-stack {
  display: grid;
  min-width: 0;
  gap: 2rem;
}

.account-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1.1rem;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 1.3rem 2.7rem rgb(32 29 26 / 8%);
  padding: 2rem;
}

.account-card__header {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: flex-end;
  justify-content: space-between;
}

.account-card__title {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.55rem;
  align-items: flex-start;
}

.account-card h2 {
  font-size: 2rem;
  line-height: 1.15;
}

.account-card__note {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.67;
  text-wrap: pretty;
}

.account-character {
  gap: 0;
  overflow: clip;
  padding: 0;
}

.account-character__name {
  margin: 0;
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 1.15;
  overflow-wrap: break-word;
}

.account-character__description {
  color: var(--ink-body);
  font-size: 1.0625rem;
  line-height: 1.71;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.account-character__place {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-size: 0.96875rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.account-character__place svg {
  flex: 0 0 auto;
  color: var(--crimson);
}

.account-character__place-description {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 0.90625rem;
  line-height: 1.59;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

.account-character__traits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.account-character__traits li {
  max-width: 100%;
  border: 1px solid rgb(214 154 36 / 40%);
  border-radius: 999px;
  background: #fbf4e4;
  color: var(--gold-deep);
  padding: 0.2rem 0.8rem;
  font-size: 0.83rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}


/* The story card repeats the character card's recipe; only its rows are new. */
.account-story__list {
  display: grid;
  width: 100%;
  gap: 1.2rem;
  margin: 0;
  padding: 0 0 0 2.5rem;
  list-style: upper-roman;
}

.account-story__entry {
  display: list-item;
  min-width: 0;
  padding-left: 0.75rem;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 2rem;
}


.account-story__body {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
}

.account-story__prose {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-body);
  font-size: 0.96875rem;
  line-height: 1.6;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

.account-story__date {
  color: var(--ink-faint);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.account-notice {
  display: block;
  width: 100%;
  border: 1px solid rgb(214 154 36 / 45%);
  border-radius: 1rem;
  background: #fbf4e4;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.5;
  padding: 1.15rem 1.35rem;
  text-wrap: pretty;
}

.account-rows {
  display: grid;
  width: 100%;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.account-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0.625rem;
  background: var(--ground);
  padding: 1rem 1.125rem;
}

.account-row__tile {
  display: inline-grid;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 0.625rem;
  background: var(--surface);
  color: var(--crimson);
  font-size: 1.0625rem;
  font-weight: 700;
}

.account-row__body {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}

.account-row strong {
  color: var(--ink);
  font-size: 0.96875rem;
  overflow-wrap: anywhere;
}

.account-row small {
  color: var(--ink-soft);
  font-size: 0.84375rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.account-empty {
  color: var(--ink-soft);
  font-size: 0.96875rem;
  text-wrap: pretty;
}

.account-refresh {
  color: var(--crimson);
  font-size: 0.84375rem;
  font-weight: 600;
  text-underline-offset: 0.25rem;
}

.account-refresh:hover {
  color: var(--crimson-deep);
}

.account-add {
  display: grid;
  width: 100%;
  gap: 1rem;
  margin-top: 0.4rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.account-add__heading {
  display: grid;
  gap: 0.3rem;
}

.account-add__heading h3 {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
}

.account-add__heading p {
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.account-add__email {
  display: grid;
  max-width: 28rem;
  gap: 0.45rem;
}

.account-add__field,
.account-add__providers {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.account-add__field input {
  min-width: 10rem;
  flex: 1;
}

.account-add__providers form {
  display: flex;
}

.account-trust {
  display: flex;
  max-width: 62ch;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--ink-soft);
  font-size: 0.90625rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.account-trust svg {
  flex: 0 0 auto;
  margin-top: 0.2rem;
  color: var(--ink-faint);
}

.account-strip {
  position: relative;
  min-height: 22.5rem;
  overflow: clip;
  display: flex;
  align-items: center;
  background: var(--crimson-band);
  color: var(--ground);
  padding-block: 4.5rem;
  text-align: center;
}

.account-strip__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.65rem;
  align-items: center;
  padding-inline: 16rem;
}

.account-strip h2 {
  max-width: 32ch;
  color: var(--ground);
  font-size: clamp(2rem, 3.3vw, 3rem);
  font-weight: 500;
  line-height: 1.15;
  overflow-wrap: break-word;
}

.account-strip__cue {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  justify-content: center;
  color: var(--on-red-soft);
}

.account-strip__pill {
  border: 2px solid var(--gold);
  border-radius: 999px;
  background: var(--ground);
  color: var(--crimson);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  padding: 0.65rem 1.8rem;
}

@media (min-width: 40rem) {
  .account-card {
    padding: 2rem;
  }
}

@media (min-width: 60rem) {
  .account-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
  }

  .account-content {
    gap: 2.25rem;
  }
}


.account-banner__edge { position: absolute; z-index: 2; bottom: -1px; left: 0; width: 100%; height: 2.5rem; }
.account-character__painting { position: relative; width: 100%; height: 15rem; }
.account-character__painting::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgb(32 29 26 / 90%)); }
.account-character__painting img { width: 100%; height: 100%; object-fit: cover; }
.account-character__painting-label { position: absolute; z-index: 1; bottom: 1.5rem; left: 2rem; display: flex; align-items: center; gap: 1rem; }
.account-character__painting-label .eyebrow { color: #efc564; font-size: 0.72rem; }
.account-character__painting-label .account-kicker { width: 3.5rem; }
.account-character__art-note { position: absolute; z-index: 1; right: 1rem; bottom: 0.3rem; color: #e1d8c6; font-size: 0.625rem; }
.account-card.account-character { padding: 0; }
.account-character__body { display: flex; min-width: 0; width: 100%; flex-direction: column; align-items: flex-start; gap: 1.2rem; padding: 2rem; }
.account-story__prose, .account-story__date { font-family: var(--font-sans); }
.account-story__prose { color: var(--ink); }
.account-strip .sprinkle { position: absolute; bottom: 0.4rem; }
.account-strip__traveler { left: max(1rem, calc(50% - 42.75rem)); width: 13.6rem; }
.account-strip__bicycle { right: max(1rem, calc(50% - 42.75rem)); width: 20.5rem; }
@media (max-width: 79.999rem) {
  .account-strip__inner { padding-inline: 12rem; }
  .account-strip__traveler { width: 10rem; }
  .account-strip__bicycle { width: 15rem; }
}
@media (max-width: 59.999rem) {
  .account-banner { min-height: 36rem; padding-top: 10rem; background-position: 68% center; }
  .account-banner__inner { gap: 2.5rem; }
  .account-banner__copy { max-width: 40rem; }
  .account-banner__sub { font-size: 1.1rem; }
  .account-strip { padding-bottom: 13rem; }
  .account-strip__inner { padding-inline: 1.25rem; }
  .account-strip__traveler { width: 8rem; }
  .account-strip__bicycle { width: 13rem; }
  .account-trust { font-size: 1rem; }
}
@media (max-width: 39.999rem) {
  .account-banner { min-height: 34rem; padding-block: 9rem 3rem; }
  .account-banner h1 { font-size: 2.8rem; }
  .account-banner__place { font-size: 1rem; border-radius: 1.5rem; }
  .account-content { padding-block: 2rem 3rem; }
  .account-card, .account-character__body { padding: 1.5rem; }
  .account-card h2 { font-size: 1.9rem; }
  .account-character__painting { height: 12rem; }
  .account-character__painting-label { left: 1.5rem; }
  .account-character__traits li { font-size: 1rem; }
  .account-row { padding: 0.85rem; gap: 0.75rem; }
  .account-row strong, .account-row small, .account-card__note, .account-empty, .account-story__date, .account-add__heading p { font-size: 1rem; }
  .account-story__prose { font-size: 1.05rem; }
  .account-add__field { flex-direction: column; align-items: stretch; }
  .account-strip__cue { font-size: 1rem; }
  .account-strip__bicycle { width: 12rem; right: 0.5rem; }
  .account-strip__traveler { left: 0.5rem; }
}