:root {
  /* Core palette */
  --page: #fffaf6;
  --surface: #ffffff;
  --surface-soft: #fff3ec;
  --surface-warm: #fdf0e7;
  --ink: #252b2b;
  --ink-soft: #5e625f;
  --line: #e9dfd8;

  /* Functional coral is dark enough for normal text and white button labels. */
  --coral: #b9553d;
  --coral-dark: #a24732;
  --coral-bright: #ea7658;
  --coral-soft: #f8d8ca;
  --teal: #2f615c;

  /* Typography families. Phase 02 freezes local/system fonts only. */
  --font-display: Georgia, "Times New Roman", ui-serif, serif;
  --font-reader: Georgia, "Times New Roman", ui-serif, serif;
  --font-ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Talevara type scale */
  --type-hero: clamp(4rem, 4.75vw, 4.75rem);      /* 64–76px */
  --type-h2: clamp(2rem, 3vw, 2.75rem);          /* 32–44px */
  --type-h3: clamp(1.5rem, 2vw, 1.75rem);        /* 24–28px */
  --type-card-title: 1.25rem;                     /* 20px */
  --type-lead: 1.125rem;                          /* 18px */
  --type-body: 1rem;                              /* 16px */
  --type-ui: 0.9375rem;                           /* 15px */
  --type-secondary: 0.875rem;                     /* 14px */
  --type-meta: 0.8125rem;                         /* 13px */
  --type-eyebrow: 0.75rem;                        /* 12px */

  --shadow: 0 18px 50px rgba(96, 61, 44, 0.08);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --container: 1180px;

  /* Semantic aliases used by page, app, reader, creator, and operations surfaces. */
  --color-canvas: var(--page);
  --color-surface: var(--surface);
  --color-surface-soft: var(--surface-soft);
  --color-text: var(--ink);
  --color-text-muted: var(--ink-soft);
  --color-border: var(--line);
  --color-accent: var(--coral);
  --color-accent-hover: var(--coral-dark);
  --color-focus: rgba(185, 85, 61, 0.38);
  --color-success: #3f6847;
  --color-warning: #8c5b28;
  --color-danger: #91372e;
  --radius-control: 10px;
  --radius-card: 16px;
  --radius-panel: 20px;
  --shadow-panel: 0 18px 50px rgba(96, 61, 44, 0.08);
  --shadow-elevated: 0 24px 70px rgba(31, 27, 24, 0.22);
  --control-height: 48px;
  --icon-ink: #3f4643;
  --icon-coral: #ad4f3b;
  --icon-teal: #2f615c;
  --icon-blue: #64708a;
  --icon-surface-coral: #fff0e8;
  --icon-surface-teal: #edf5f2;
  --icon-surface-blue: #f0f2f7;
  --icon-border: rgba(185, 85, 61, 0.12);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  color-scheme: light;
  background: var(--page);
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 11%, rgba(240, 193, 167, 0.12), transparent 24rem),
    linear-gradient(180deg, #fffaf6 0%, #fffdfb 58%, #fffaf6 100%);
  font-family: var(--font-ui);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.6;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
}

.talevara-icon,
.talevara-icon-img,
.button svg,
.button .talevara-icon-img,
.site-header svg,
.site-header .talevara-icon-img,
.format-icon svg,
.format-icon img,
.trust-icon svg,
.trust-icon img,
.story-page svg {
  flex: 0 0 auto;
}

.talevara-icon-img {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  max-width: 1.2em;
  max-height: 1.2em;
  object-fit: contain;
  vertical-align: -0.18em;
}

.talevara-icon,
.button svg,
.site-header svg,
.format-icon svg,
.trust-icon svg,
.story-page svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

button {
  border: 0;
}

:focus-visible {
  outline: 3px solid rgba(185, 85, 61, 0.38);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 999;
  transform: translateY(-160%);
  padding: 10px 14px;
  border-radius: 10px;
  color: #fff;
  background: var(--ink);
  text-decoration: none;
}

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

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.container {
  width: min(calc(100% - 48px), var(--container));
  margin-inline: auto;
}

.section {
  padding: 76px 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 250, 246, 0.9);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(18px);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.site-header.is-scrolled {
  border-color: rgba(233, 223, 216, 0.92);
  box-shadow: 0 10px 30px rgba(55, 35, 23, 0.04);
}

.header-inner {
  min-height: 78px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  color: #191d1d;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand img {
  flex: 0 0 auto;
}

.primary-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 48px);
}

.primary-nav a,
.footer-column a {
  color: #3d4140;
  text-decoration: none;
  transition: color 150ms ease;
}

.primary-nav a {
  position: relative;
  padding: 10px 0;
  font-size: var(--type-ui);
  font-weight: 600;
  line-height: 1.2;
}

.primary-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--coral);
  transform: translateX(-50%);
  transition: width 150ms ease;
}

.primary-nav a:hover,
.footer-column a:hover {
  color: var(--coral);
}

.primary-nav a:hover::after {
  width: 100%;
}

.header-actions,
.hero-actions,
.newsletter-row {
  display: flex;
  align-items: center;
}

.header-actions {
  gap: 12px;
}

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: var(--type-ui);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button-primary {
  color: #fff;
  background: var(--coral);
  box-shadow: 0 9px 22px rgba(185, 85, 61, 0.2);
}

.button-primary:hover {
  background: var(--coral-dark);
  box-shadow: 0 12px 28px rgba(162, 71, 50, 0.24);
}

.button-secondary,
.button-ghost,
.button-outline {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.66);
  border-color: #d8ccc4;
}

.button-secondary:hover,
.button-ghost:hover,
.button-outline:hover {
  border-color: #c5b3a8;
  background: #fff;
}

.button svg {
  width: 20px;
  height: 20px;
}

.button-outline {
  color: var(--coral);
  border-color: var(--coral);
  background: transparent;
}

.button-small {
  min-height: 42px;
  padding-inline: 18px;
  font-size: var(--type-secondary);
}

.menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  place-items: center;
  padding: 12px;
  border-radius: 10px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}

.menu-toggle span {
  width: 22px;
  height: 2px;
  margin: 2.5px 0;
  border-radius: 10px;
  background: currentColor;
  transition: transform 150ms ease, opacity 150ms ease;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.hero {
  padding-top: 62px;
  padding-bottom: 34px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(520px, 1.03fr) minmax(0, 0.97fr);
  align-items: center;
  gap: clamp(38px, 4.2vw, 56px);
}

.hero-copy {
  min-width: 0;
  padding-left: 6px;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--coral);
  font-size: var(--type-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}

.hero h1,
.section-heading h2,
.creator-copy h2 {
  margin: 0;
  font-family: var(--font-display);
  color: #303535;
  font-weight: 400;
  font-synthesis: none;
}

.hero h1 {
  max-width: none;
  font-size: var(--type-hero);
  line-height: 0.99;
  letter-spacing: -0.018em;
}

.hero-title-line {
  display: block;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
}

.hero-title-accent,
.creator-copy h2 span {
  color: var(--coral);
}

.hero-lede {
  max-width: 34rem;
  margin: 24px 0 0;
  color: #4e5452;
  font-size: var(--type-lead);
  font-weight: 400;
  line-height: 1.6;
}

.hero-actions {
  gap: 14px;
  margin-top: 28px;
}

.reader-proof {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 28px;
}

.reader-proof p {
  max-width: 315px;
  margin: 0;
  color: #656967;
  font-size: var(--type-secondary);
  line-height: 1.5;
}

.reader-avatars {
  display: flex;
  padding-left: 7px;
}

.avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  margin-left: -7px;
  border: 2px solid var(--page);
  border-radius: 50%;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(37, 43, 43, 0.1);
}

.avatar-one { background: #476a66; }
.avatar-two { background: #b46d56; }
.avatar-three { background: #786f87; }
.avatar-four { background: #8b7157; }

.hero-art {
  position: relative;
  min-width: 0;
}

.hero-art::before,
.hero-art::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: rgba(248, 216, 202, 0.5);
}

.hero-art::before {
  top: 6%;
  right: 2%;
  width: 160px;
  height: 160px;
}

.hero-art::after {
  left: 5%;
  top: 12%;
  width: 46px;
  height: 46px;
}

.hero-art img {
  width: 100%;
  height: auto;
  border-radius: 0;
  mix-blend-mode: normal;
}

.hero-art-glow {
  position: absolute;
  inset: 16% 12% 6% 5%;
  z-index: -2;
  border-radius: 40% 55% 36% 49%;
  background: rgba(245, 225, 211, 0.75);
  filter: blur(30px);
}

.story-formats {
  padding-top: 54px;
}

.section-heading {
  margin-bottom: 34px;
}

.section-heading.centered {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.section-heading h2,
.creator-copy h2 {
  font-size: var(--type-h2);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.section-heading p:not(.eyebrow) {
  max-width: 44rem;
  margin: 14px auto 0;
  color: var(--ink-soft);
  font-size: var(--type-body);
  line-height: 1.6;
}

.format-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.format-card {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 26px 20px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.62);
  text-align: center;
  text-decoration: none;
  box-shadow: 0 12px 34px rgba(75, 52, 41, 0.035);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.format-card:hover {
  transform: translateY(-5px);
  border-color: #dcc5b8;
  background: #fff;
  box-shadow: var(--shadow);
}

.format-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  margin-bottom: 17px;
  border: 1px solid var(--icon-border);
  border-radius: 15px;
  color: var(--coral);
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.85), transparent 42%),
    var(--icon-surface-coral);
  box-shadow: inset 0 -10px 22px rgba(185, 85, 61, 0.04);
}

.format-card:nth-child(2) .format-icon,
.format-card:nth-child(4) .format-icon {
  color: var(--teal);
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.85), transparent 42%),
    var(--icon-surface-teal);
  border-color: rgba(47, 97, 92, 0.12);
}

.format-card:nth-child(3) .format-icon {
  color: #6c768e;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.86), transparent 42%),
    var(--icon-surface-blue);
  border-color: rgba(100, 112, 138, 0.12);
}

.format-icon svg {
  width: 31px;
  height: 31px;
}

.format-icon img {
  width: 58px;
  height: 58px;
  max-width: 58px;
  max-height: 58px;
  object-fit: contain;
}

.format-card h3 {
  margin: 0;
  color: #292e2d;
  font-family: var(--font-ui);
  font-size: var(--type-card-title);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}

.format-card p {
  margin: 12px 0 0;
  color: #626866;
  font-size: var(--type-secondary);
  line-height: 1.55;
}

.section-action {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.creator-section {
  padding-top: 36px;
  padding-bottom: 56px;
}

.creator-panel {
  min-height: 460px;
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  align-items: center;
  gap: 30px;
  overflow: hidden;
  padding: 36px 40px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 70% 35%, rgba(255, 255, 255, 0.7), transparent 13rem),
    linear-gradient(100deg, #fff2ea, #fff7f2);
}

.creator-copy {
  position: relative;
  z-index: 2;
}

.creator-copy p:not(.eyebrow) {
  max-width: 27rem;
  margin: 20px 0 24px;
  color: #525755;
  font-size: var(--type-body);
  line-height: 1.6;
}

.creator-art {
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-width: 0;
}

.creator-art img {
  display: block;
  width: min(100%, 580px);
  max-width: none;
  height: auto;
  aspect-ratio: auto;
  border-radius: 0;
  transform: translateX(8px);
  mix-blend-mode: normal;
}

.trust-section {
  padding: 22px 0 64px;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.trust-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  align-items: start;
}

.trust-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(185, 85, 61, 0.1);
  border-radius: 13px;
  color: var(--icon-coral);
  background: var(--icon-surface-coral);
}

.trust-icon svg {
  width: 23px;
  height: 23px;
}

.trust-icon img {
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
  object-fit: contain;
}

.trust-item h3 {
  margin: 0;
  color: #292e2d;
  font-family: var(--font-ui);
  font-size: var(--type-body);
  font-weight: 600;
  line-height: 1.3;
}

.trust-item p {
  margin: 7px 0 0;
  color: #676c69;
  font-size: var(--type-secondary);
  line-height: 1.55;
}

.site-footer {
  border-top: 1px solid var(--line);
  background: rgba(255, 252, 249, 0.78);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.45fr repeat(3, 0.72fr) 1.35fr;
  gap: 30px;
  padding-top: 46px;
  padding-bottom: 42px;
}

.footer-brand p,
.newsletter p {
  margin: 16px 0 0;
  color: #666b69;
  font-size: var(--type-secondary);
  line-height: 1.55;
}

.footer-brand p {
  max-width: 255px;
}

.footer-column,
.newsletter {
  min-width: 0;
}

.footer-column h2,
.newsletter h2 {
  margin: 3px 0 14px;
  font-family: var(--font-ui);
  font-size: var(--type-meta);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
}

.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.footer-column a {
  font-size: var(--type-secondary);
  line-height: 1.5;
}

.newsletter p {
  margin-top: 0;
}

.newsletter-row {
  align-items: stretch;
  gap: 8px;
  margin-top: 15px;
}

.newsletter input {
  min-width: 0;
  width: 100%;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid #dfcfc6;
  border-radius: 9px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  font-size: var(--type-secondary);
}

.newsletter input::placeholder {
  color: #777c79;
}

.newsletter input:focus {
  border-color: var(--coral);
  outline: 3px solid rgba(185, 85, 61, 0.16);
}

.form-status {
  min-height: 1.3em;
  margin-top: 9px !important;
  color: var(--teal) !important;
}

.footer-bottom {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--line);
}

.footer-bottom p {
  margin: 0;
  color: #747876;
  font-size: var(--type-meta);
  line-height: 1.45;
}

.social-links {
  display: flex;
  gap: 8px;
}

.social-links a {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  color: #6f7471;
  text-decoration: none;
  transition: color 150ms ease, background 150ms ease;
}

.social-links a:hover {
  color: var(--coral);
  background: var(--surface-warm);
}

.social-links svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1080px) {
  .header-inner {
    grid-template-columns: auto 1fr auto;
  }

  .primary-nav {
    gap: 26px;
  }

  .hero-grid {
    grid-template-columns: minmax(460px, 1fr) minmax(0, 1fr);
    gap: 28px;
  }

  .hero h1 {
    font-size: 3.75rem;
  }

  .format-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .format-card:nth-child(4),
  .format-card:nth-child(5) {
    grid-column: span 1;
  }

  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 40px;
  }

  .footer-grid {
    grid-template-columns: 1.4fr repeat(3, 0.8fr);
  }

  .newsletter {
    grid-column: 1 / -1;
    max-width: 520px;
  }
}

@media (max-width: 860px) {
  .container {
    width: min(calc(100% - 36px), var(--container));
  }

  .header-inner {
    min-height: 70px;
    grid-template-columns: auto auto 1fr;
    gap: 10px;
  }

  .menu-toggle {
    display: grid;
    grid-column: 2;
  }

  .header-actions {
    grid-column: 3;
    justify-self: end;
  }

  .primary-nav {
    position: absolute;
    top: calc(100% + 1px);
    left: 18px;
    right: 18px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fffdfb;
    box-shadow: var(--shadow);
  }

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

  .primary-nav a {
    min-height: 46px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 9px;
  }

  .primary-nav a::after {
    display: none;
  }

  .primary-nav a:hover {
    background: var(--surface-warm);
  }

  .hero {
    padding-top: 38px;
  }

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

  .hero-copy {
    max-width: 680px;
  }

  .hero h1 {
    font-size: clamp(3.375rem, 8vw, 3.75rem);
  }

  .hero-art {
    width: min(100%, 670px);
    margin-inline: auto;
  }

  .format-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .format-card:nth-child(5) {
    grid-column: 1 / -1;
    min-height: 205px;
  }

  .creator-panel {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 38px;
  }

  .creator-art {
    justify-content: flex-start;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-brand,
  .newsletter {
    grid-column: 1 / -1;
  }
}

@media (max-width: 580px) {
  .container {
    width: min(calc(100% - 28px), var(--container));
  }

  .section {
    padding: 58px 0;
  }

  .site-header .brand span {
    display: none;
  }

  .header-inner {
    grid-template-columns: auto auto 1fr;
  }

  .header-actions .button-ghost {
    display: none;
  }

  .header-actions .button-primary {
    min-height: 40px;
    padding-inline: 14px;
  }

  .hero {
    padding-top: 32px;
    padding-bottom: 14px;
  }

  .hero h1 {
    font-size: clamp(2.75rem, 13vw, 3rem);
    line-height: 1;
  }

  .hero-lede {
    margin-top: 20px;
    font-size: 1.0625rem;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-actions .button {
    width: 100%;
  }

  .reader-proof {
    align-items: flex-start;
  }

  .hero-art img {
    border-radius: 24px;
  }

  .story-formats {
    padding-top: 48px;
  }

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

  .format-card,
  .format-card:nth-child(5) {
    min-height: auto;
    grid-column: auto;
    align-items: flex-start;
    padding: 22px;
    text-align: left;
  }

  .format-icon {
    margin-bottom: 14px;
  }

  .section-action .button {
    width: 100%;
  }

  .creator-panel {
    padding: 30px 24px 24px;
    border-radius: 22px;
  }

  .creator-copy .button {
    width: 100%;
  }

  .creator-art img {
    border-radius: 16px;
  }

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

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 34px 22px;
  }

  .newsletter-row {
    flex-direction: column;
  }

  .newsletter-row .button {
    width: 100%;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    padding: 20px 0;
  }
}

@media (max-width: 360px) {
  .hero h1 {
    font-size: 2.625rem;
  }
}

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

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

.footer-legal-inline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-left:auto}.footer-legal-inline a{color:#747875;font-size:var(--type-meta);text-decoration:none}.footer-legal-inline a:hover{color:var(--coral)}@media(max-width:720px){.footer-legal-inline{margin-left:0}}



/* =========================================================
   Talevara responsive layout system
   Fluid from narrow mobile to wide desktop and short windows.
   All artwork preserves its intrinsic aspect ratio.
   ========================================================= */

:root {
  --container-gutter: clamp(14px, 3.2vw, 32px);
  --section-space: clamp(48px, 6.2vw, 76px);
  --type-hero: clamp(3rem, 2.35rem + 2.45vw, 4.75rem);
  --type-h2: clamp(2rem, 1.62rem + 1.45vw, 2.75rem);
  --type-h3: clamp(1.375rem, 1.18rem + .72vw, 1.75rem);
  --type-card-title: clamp(1.0625rem, 1rem + .25vw, 1.25rem);
  --type-lead: clamp(1.0625rem, 1.02rem + .2vw, 1.125rem);
}

.container {
  width: min(calc(100% - (var(--container-gutter) * 2)), var(--container));
}

.section {
  padding-block: var(--section-space);
}

img {
  height: auto;
}

.hero-art img,
.creator-art img,
.page-hero-art img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  aspect-ratio: auto;
  object-fit: contain;
}

.hero {
  padding-top: clamp(34px, 5vw, 62px);
  padding-bottom: clamp(22px, 3vw, 34px);
}

.hero-grid {
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr);
  gap: clamp(24px, 4vw, 56px);
}

.hero-copy {
  max-width: 610px;
}

.hero-title-line {
  max-width: 100%;
}

.hero-art {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-art img {
  width: min(100%, 590px);
}

.format-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.format-card {
  min-width: 0;
  padding-inline: clamp(16px, 1.8vw, 20px);
}

.creator-panel {
  min-height: clamp(390px, 34vw, 460px);
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  gap: clamp(22px, 3vw, 36px);
  padding: clamp(28px, 3.2vw, 40px);
}

.creator-art {
  align-self: center;
  justify-content: flex-end;
}

.creator-art img {
  width: min(100%, 620px);
  transform: none;
}

.footer-grid > *,
.trust-grid > *,
.format-grid > * {
  min-width: 0;
}

@media (max-width: 1180px) {
  .header-inner {
    gap: clamp(14px, 2vw, 24px);
  }

  .primary-nav {
    gap: clamp(18px, 2.4vw, 30px);
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(330px, .9fr);
  }

  .format-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .format-card:nth-child(4),
  .format-card:nth-child(5) {
    grid-column: auto;
  }

  .footer-grid {
    grid-template-columns: 1.35fr repeat(3, minmax(110px, .8fr));
  }

  .newsletter {
    grid-column: 1 / -1;
    max-width: 560px;
  }
}

@media (max-width: 920px) {
  .container {
    --container-gutter: clamp(16px, 3vw, 24px);
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .hero-copy {
    max-width: 720px;
  }

  .hero-art {
    width: min(100%, 700px);
    margin-inline: auto;
  }

  .hero-art img {
    width: min(100%, 650px);
  }

  .format-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .format-card:nth-child(5) {
    grid-column: 1 / -1;
  }

  .creator-panel {
    grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
    min-height: 380px;
  }

  .creator-art img {
    width: min(100%, 540px);
  }

  .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .creator-panel {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 24px;
  }

  .creator-copy {
    max-width: 560px;
  }

  .creator-art {
    justify-content: center;
  }

  .creator-art img {
    width: min(100%, 620px);
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-brand,
  .newsletter {
    grid-column: 1 / -1;
  }
}

@media (max-width: 580px) {
  :root {
    --container-gutter: 14px;
    --section-space: 54px;
  }

  .hero-title-line {
    width: auto;
    white-space: normal;
  }

  .hero h1 {
    font-size: clamp(2.7rem, 12.5vw, 3.35rem);
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .button {
    width: 100%;
  }

  .reader-proof {
    align-items: flex-start;
  }

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

  .format-card,
  .format-card:nth-child(5) {
    grid-column: auto;
    min-height: auto;
  }

  .creator-panel {
    padding: 26px 20px 22px;
  }

  .creator-art img {
    width: 100%;
  }

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

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

  .newsletter-row {
    flex-direction: column;
  }

  .newsletter-row .button {
    width: 100%;
  }
}

@media (max-width: 390px) {
  .header-actions .button-primary {
    padding-inline: 11px;
    font-size: .8125rem;
  }

  .hero h1 {
    font-size: clamp(2.45rem, 12vw, 2.8rem);
  }

  .reader-proof {
    flex-direction: column;
    gap: 10px;
  }

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

  .footer-brand,
  .newsletter {
    grid-column: auto;
  }
}

@media (min-width: 921px) and (max-height: 760px) {
  .hero {
    padding-top: 34px;
    padding-bottom: 20px;
  }

  .hero-art img {
    max-height: 58vh;
    width: auto;
  }

  .creator-panel {
    min-height: 350px;
    padding-block: 26px;
  }

  .creator-art img {
    max-height: 320px;
    width: auto;
  }
}

@media (min-width: 921px) and (max-height: 640px) {
  .site-header .header-inner {
    min-height: 66px;
  }

  .hero {
    padding-top: 24px;
  }

  .hero-art img {
    max-height: 50vh;
  }

  .hero-lede {
    margin-top: 18px;
  }

  .hero-actions,
  .reader-proof {
    margin-top: 20px;
  }
}


/* v11: targeted desktop scaling for the welcome hero artwork.
   Do not shrink it merely because the browser window is short. */
@media (min-width: 921px) {
  .home-page .hero-grid {
    grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
    gap: clamp(18px, 2.2vw, 32px);
  }

  .home-page .hero-art {
    overflow: visible;
    justify-content: flex-end;
  }

  .home-page .hero-art img {
    width: min(100%, 720px);
    max-width: none;
    max-height: none;
    height: auto;
    transform: scale(1.55);
    transform-origin: center right;
  }
}

@media (max-width: 920px) {
  .home-page .hero-art img {
    width: min(100%, 650px);
    max-height: none;
    transform: none;
  }
}

/* =========================================================
   v12 CROSS-BROWSER RESPONSIVE BASELINE
   Uses only long-supported Flexbox, fixed breakpoint sizes,
   percentages, max-width and calc() for critical layout.
   This layer intentionally overrides clamp(), min(), Grid gap
   and transformed hero artwork used by newer browsers.
   ========================================================= */

/* Container fallback: old Edge ignores width:min(...). */
.container {
  width: 100%;
  max-width: 1228px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* Fixed typography fallbacks: old Edge does not support clamp(). */
.hero h1 {
  font-size: 76px;
}

.section-heading h2,
.creator-copy h2 {
  font-size: 44px;
}

.hero-lede {
  font-size: 18px;
}

/* Header: Flexbox instead of CSS Grid. */
.header-inner {
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
}

.brand {
  flex: 0 0 auto;
}

.primary-nav {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  margin-left: 28px;
  margin-right: 28px;
}

.primary-nav a {
  margin-left: 20px;
  margin-right: 20px;
}

.header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.header-actions .button + .button {
  margin-left: 12px;
}

/* Welcome hero: no min(), no grid dependency and no transform scaling. */
.home-page .hero-grid,
.hero-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hero-copy {
  flex: 0 1 48%;
  width: 48%;
  max-width: 590px;
}

.home-page .hero-art,
.hero-art {
  flex: 0 1 52%;
  width: 52%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: visible;
}

.home-page .hero-art img,
.hero-art img {
  display: block;
  width: 100%;
  max-width: 650px;
  height: auto;
  max-height: none;
  transform: none;
  object-fit: contain;
}

/* Format cards: flex wrapping works in EdgeHTML. */
.format-grid {
  display: flex;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}

.format-card,
.format-card:nth-child(4),
.format-card:nth-child(5) {
  flex: 1 1 calc(20% - 16px);
  width: calc(20% - 16px);
  min-width: 0;
  margin: 8px;
  grid-column: auto;
}

/* Creator panel */
.creator-panel {
  display: flex;
  min-height: 410px;
  align-items: center;
  padding: 38px 42px;
}

.creator-copy {
  flex: 0 1 36%;
  width: 36%;
}

.creator-art {
  flex: 0 1 64%;
  width: 64%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: visible;
}

.creator-art img {
  display: block;
  width: 100%;
  max-width: 650px;
  height: auto;
  max-height: none;
  transform: none;
  object-fit: contain;
}

/* Trust strip */
.trust-grid {
  display: flex;
  flex-wrap: wrap;
  margin-left: -13px;
  margin-right: -13px;
}

.trust-item {
  flex: 1 1 calc(25% - 26px);
  width: calc(25% - 26px);
  margin: 13px;
}

/* Footer */
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

.footer-grid > * {
  margin-left: 15px;
  margin-right: 15px;
}

.footer-brand {
  flex: 1 1 220px;
}

.footer-column {
  flex: 0 1 130px;
}

.newsletter {
  flex: 1 1 250px;
  max-width: 340px;
  grid-column: auto;
}

/* ---- Compact desktop ---- */
@media (max-width: 1180px) {
  .container {
    padding-left: 22px;
    padding-right: 22px;
  }

  .primary-nav a {
    margin-left: 13px;
    margin-right: 13px;
  }

  .hero h1 {
    font-size: 64px;
  }

  .section-heading h2,
  .creator-copy h2 {
    font-size: 40px;
  }

  .format-card,
  .format-card:nth-child(4),
  .format-card:nth-child(5) {
    flex-basis: calc(33.333% - 16px);
    width: calc(33.333% - 16px);
  }

  .creator-panel {
    min-height: 380px;
  }

  .creator-copy {
    flex-basis: 38%;
    width: 38%;
  }

  .creator-art {
    flex-basis: 62%;
    width: 62%;
  }

  .trust-item {
    flex-basis: calc(50% - 26px);
    width: calc(50% - 26px);
  }
}

/* ---- Tablet / narrow browser ---- */
@media (max-width: 860px) {
  .container {
    padding-left: 18px;
    padding-right: 18px;
  }

  .header-inner {
    min-height: 70px;
    position: relative;
  }

  .menu-toggle {
    display: block;
    flex: 0 0 48px;
    margin-left: 12px;
  }

  .primary-nav {
    position: absolute;
    top: 70px;
    left: 18px;
    right: 18px;
    z-index: 20;
    display: none;
    margin: 0;
    padding: 10px;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid #e9dfd8;
    border-radius: 14px;
    background: #fffdfb;
    box-shadow: 0 18px 50px rgba(96, 61, 44, 0.08);
  }

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

  .primary-nav a {
    margin: 0;
    min-height: 46px;
    display: flex;
    align-items: center;
    padding-left: 14px;
    padding-right: 14px;
  }

  .header-actions {
    margin-left: auto;
  }

  .hero-grid,
  .home-page .hero-grid {
    display: block;
  }

  .hero-copy,
  .hero-art,
  .home-page .hero-art {
    width: 100%;
    max-width: none;
  }

  .hero-copy {
    margin-bottom: 28px;
  }

  .hero-art,
  .home-page .hero-art {
    justify-content: center;
  }

  .hero-art img,
  .home-page .hero-art img {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero h1 {
    font-size: 52px;
  }

  .section-heading h2,
  .creator-copy h2 {
    font-size: 36px;
  }

  .format-card,
  .format-card:nth-child(4),
  .format-card:nth-child(5) {
    flex-basis: calc(50% - 16px);
    width: calc(50% - 16px);
  }

  .creator-panel {
    display: block;
    min-height: 0;
  }

  .creator-copy,
  .creator-art {
    width: 100%;
    max-width: none;
  }

  .creator-copy {
    margin-bottom: 22px;
  }

  .creator-art {
    justify-content: center;
  }

  .creator-art img {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
  }

  .footer-brand {
    flex-basis: calc(50% - 30px);
  }

  .footer-column {
    flex-basis: calc(25% - 30px);
  }

  .newsletter {
    flex-basis: calc(50% - 30px);
    max-width: none;
  }
}

/* ---- Mobile ---- */
@media (max-width: 580px) {
  .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  .hero h1 {
    font-size: 46px;
    line-height: 1;
  }

  .hero-title-line {
    width: auto;
    white-space: normal;
  }

  .hero-lede {
    font-size: 17px;
  }

  .section-heading h2,
  .creator-copy h2 {
    font-size: 32px;
  }

  .format-card,
  .format-card:nth-child(4),
  .format-card:nth-child(5) {
    flex-basis: calc(100% - 16px);
    width: calc(100% - 16px);
  }

  .trust-item {
    flex-basis: calc(100% - 26px);
    width: calc(100% - 26px);
  }

  .creator-panel {
    padding: 28px 22px 24px;
  }

  .footer-brand,
  .footer-column,
  .newsletter {
    flex-basis: calc(50% - 30px);
    max-width: none;
  }
}

/* ---- Very narrow mobile ---- */
@media (max-width: 390px) {
  .hero h1 {
    font-size: 40px;
  }

  .footer-brand,
  .footer-column,
  .newsletter {
    flex-basis: calc(100% - 30px);
  }
}

/* =========================================================
   v14 WELCOME-PAGE VISUAL PROPORTION RESTORATION
   Restores the accepted wide-desktop composition that was
   unintentionally reduced by the v12 compatibility layer.
   Uses intrinsic image sizing (no transform scaling) so the
   artwork keeps its original aspect ratio in Chrome and Edge.
   ========================================================= */

/* Wide desktop: restore the large hero illustration and the
   intended five-card story-format row. */
@media (min-width: 1181px) {
  .home-page .hero-art {
    overflow: visible;
    justify-content: flex-end;
  }

  .home-page .hero-art img {
    flex: 0 0 auto;
    width: 158%;
    max-width: none;
    height: auto;
    max-height: none;
    object-fit: contain;
    transform: none;
  }

  /* The compatibility flex fallback previously wrapped the fifth
     card because the card margins consumed the last few pixels.
     Give the flex row the same effective width as the original
     five-column grid and disable flex-grow on individual cards. */
  .home-page .format-grid {
    width: calc(100% + 16px);
  }

  .home-page .format-card,
  .home-page .format-card:nth-child(4),
  .home-page .format-card:nth-child(5) {
    flex: 0 0 calc(20% - 16px);
    width: calc(20% - 16px);
  }
}

/* Compact desktop / narrow browser: keep the artwork prominent,
   but avoid overlap before the layout stacks at 860px. */
@media (min-width: 861px) and (max-width: 1180px) {
  .home-page .hero-art {
    overflow: visible;
    justify-content: flex-end;
  }

  .home-page .hero-art img {
    flex: 0 0 auto;
    width: 122%;
    max-width: none;
    height: auto;
    max-height: none;
    object-fit: contain;
    transform: none;
  }
}

/* Once stacked, artwork follows the available width normally. */
@media (max-width: 860px) {
  .home-page .hero-art img {
    width: 100%;
    max-width: 650px;
    height: auto;
    max-height: none;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
    transform: none;
  }
}

/* v14.1: preserve the original desktop hero rhythm while the artwork is
   enlarged. The image is taken out of flex sizing, so its larger visual
   footprint does not push every following section down the page. */
@media (min-width: 1181px) {
  .home-page .hero-art {
    position: relative;
    min-height: 408px;
    align-self: stretch;
  }

  .home-page .hero-art img {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }

  /* Chrome/modern Edge support flex-gap while the compatibility layer also
     adds margin gaps. Disable flex-gap here so spacing is not doubled. */
  .home-page .format-grid {
    gap: 0;
  }
}

/* v14.2: the v12 fallback added margin-based spacing but did not disable
   the original Flex/Grid gap declarations. Chromium-based Chrome and Edge
   therefore applied both systems at once, causing wide spacing and early
   wrapping. Keep the fallback margins and remove the duplicate gap. */
.header-inner,
.primary-nav,
.header-actions,
.format-grid,
.trust-grid,
.footer-grid {
  gap: 0;
}

/* v14.3: trust/footer grids are themselves `.container` elements. The v12
   negative-margin fallback overwrote their auto centering and pulled both
   sections to the left edge of the viewport. Keep their container centering;
   child margins already provide the fallback spacing. */
.trust-grid,
.footer-grid {
  margin-left: auto;
  margin-right: auto;
}

/* v25 — format catalogue transition */
.home-page .format-explore-wrap {
  margin-top: 20px;
}

.home-page .format-explore-link {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 20px 24px 20px 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 50%, rgba(185, 85, 61, 0.07), transparent 14rem),
    rgba(255, 255, 255, 0.54);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 12px 34px rgba(75, 52, 41, 0.03);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.home-page .format-explore-link:hover {
  transform: translateY(-2px);
  border-color: #d9b9aa;
  background: #fff;
  box-shadow: 0 16px 38px rgba(75, 52, 41, 0.07);
}

.home-page .format-explore-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.home-page .format-explore-copy strong {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.55rem);
  font-weight: 400;
  line-height: 1.1;
}

.home-page .format-explore-copy small {
  color: var(--ink-soft);
  font-size: var(--type-secondary);
  line-height: 1.45;
}

.home-page .format-explore-action {
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  border-radius: 11px;
  color: var(--coral-dark);
  background: var(--surface-warm);
  font-size: var(--type-ui);
  font-weight: 650;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease;
}

.home-page .format-explore-action span {
  font-size: 17px;
  transition: transform 150ms ease;
}

.home-page .format-explore-link:hover .format-explore-action {
  color: #fff;
  background: var(--coral);
}

.home-page .format-explore-link:hover .format-explore-action span {
  transform: translateX(2px);
}

@media (max-width: 700px) {
  .home-page .format-explore-wrap { margin-top: 14px; }
  .home-page .format-explore-link {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
    padding: 22px;
  }
  .home-page .format-explore-action { width: 100%; }
}

/* v29 protected-route startup guard: prevents protected content flashing before Auth/permission resolution. */
[data-auth-required][data-auth-guard="pending"] main { visibility: hidden; }

/* Core story format: one interactive-story format, three primary reader capabilities. */
.home-page .core-format-section .format-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:100%;margin-left:0;margin-right:0}
.home-page .core-format-section .format-card,.home-page .core-format-section .format-card:nth-child(4),.home-page .core-format-section .format-card:nth-child(5){width:auto;min-width:0;min-height:210px;margin:0;flex:none;cursor:default}
.home-page .core-format-section .format-card:hover{transform:none;box-shadow:0 12px 34px rgba(75,52,41,.035);border-color:var(--line);background:rgba(255,255,255,.62)}
@media(max-width:860px){.home-page .core-format-section .format-grid{grid-template-columns:1fr}.home-page .core-format-section .format-card{min-height:0}}

/* Final homepage card guard: legacy browser fallbacks above use flex widths
   and negative margins. Keep this section as a contained responsive grid. */
.home-page .core-format-section,
.home-page .core-format-section .container {
  max-width: 100%;
  overflow-x: clip;
}

.home-page .core-format-section .format-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.home-page .core-format-section .format-card,
.home-page .core-format-section .format-card:nth-child(4),
.home-page .core-format-section .format-card:nth-child(5) {
  flex: none !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.home-page .core-format-section .format-icon {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  max-width: 58px;
  max-height: 58px;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.home-page .core-format-section .format-icon img {
  display: block;
  width: 58px;
  height: 58px;
  max-width: 58px;
  max-height: 58px;
  object-fit: contain;
}

@media (max-width: 980px) {
  .home-page .core-format-section .format-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  .home-page .core-format-section .format-grid {
    grid-template-columns: 1fr !important;
  }

  .home-page .core-format-section .format-card {
    min-height: 0 !important;
  }
}

/* Launch illustration system: generated artwork is alpha-safe editorial art,
   not rectangular photography. Let it blend into the page naturally. */
.home-page .hero-art::before,
.home-page .hero-art::after,
.home-page .hero-art-glow {
  display: none;
}

.home-page .hero-art img,
.creator-art img {
  border-radius: 0;
  mix-blend-mode: normal;
  filter: drop-shadow(0 26px 54px rgba(91, 69, 52, .08));
}

.creator-panel {
  overflow: visible;
}
.header-notification-link{position:relative;width:40px;height:40px;display:inline-grid;place-items:center;border:1px solid rgba(185,85,61,.12);border-radius:12px;color:#4e5857;background:rgba(255,250,246,.72);text-decoration:none;flex:0 0 auto}.header-notification-link:hover{background:#fff;color:#9d4c39;border-color:rgba(157,76,57,.25)}.header-notification-link svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}.header-notification-badge{position:absolute;right:-5px;top:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:#b65443;color:white;border:2px solid #fff;font:700 10px/14px var(--font-ui);text-align:center}

/* Step 27 — privacy choices */
.privacy-banner{position:fixed;z-index:80;left:50%;bottom:18px;transform:translateX(-50%);width:min(1120px,calc(100% - 32px));display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 20px;border:1px solid rgba(45,37,34,.14);border-radius:18px;background:rgba(255,250,246,.97);box-shadow:0 18px 52px rgba(32,24,20,.18);backdrop-filter:blur(14px)}
.privacy-banner strong{display:block;font-size:15px}.privacy-banner p{margin:5px 0 0;max-width:650px;color:var(--muted,#6f625c);font-size:13px;line-height:1.55}.privacy-banner-actions,.privacy-actions{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;justify-content:flex-end}.privacy-banner-actions{flex:0 0 auto;min-width:max-content}.privacy-banner-actions .button{white-space:nowrap}.privacy-banner-actions [data-privacy-reject],.privacy-banner-actions [data-privacy-accept]{min-width:132px}.privacy-banner-actions [data-privacy-manage]{min-width:96px}
.privacy-dialog{width:min(650px,calc(100% - 28px));padding:0;border:0;border-radius:20px;background:transparent}.privacy-dialog::backdrop{background:rgba(24,18,16,.45);backdrop-filter:blur(3px)}.privacy-dialog-card{padding:24px;border:1px solid rgba(45,37,34,.14);border-radius:20px;background:#fffaf6;box-shadow:0 24px 70px rgba(32,24,20,.25)}.privacy-dialog-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.privacy-dialog-head h2{margin:2px 0 8px}.privacy-dialog-head p:not(.eyebrow){margin:0;color:var(--muted,#6f625c);line-height:1.55}.privacy-close{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:12px;background:transparent;color:inherit;cursor:pointer}.privacy-close svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}.privacy-choice-list{display:grid;gap:0;margin:20px 0;border-top:1px solid rgba(45,37,34,.12)}.privacy-choice-list label{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:15px 0;border-bottom:1px solid rgba(45,37,34,.12)}.privacy-choice-list span{display:grid;gap:3px}.privacy-choice-list small,.privacy-dialog-note{color:var(--muted,#6f625c);line-height:1.45}.privacy-choice-list input{width:20px;height:20px;accent-color:var(--coral,#d65e49)}.privacy-dialog-note{font-size:12px;margin:0 0 18px}.privacy-account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.privacy-account-option{display:flex;justify-content:space-between;gap:18px;padding:15px;border:1px solid rgba(45,37,34,.12);border-radius:14px;background:rgba(255,255,255,.45)}.privacy-account-option span{display:grid;gap:4px}.privacy-account-option small{color:var(--muted,#6f625c);line-height:1.45}.privacy-account-option input{width:20px;height:20px;accent-color:var(--coral,#d65e49)}.privacy-data-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}.privacy-status-line{font-size:12px;color:var(--muted,#6f625c);margin-top:10px}.privacy-status-line strong{color:inherit}
@media(max-width:720px){.privacy-banner{align-items:stretch;flex-direction:column;bottom:10px;width:calc(100% - 20px);padding:16px}.privacy-banner-actions{width:100%;justify-content:stretch;gap:6px}.privacy-banner-actions .button{flex:1 1 0;min-width:0;padding-inline:8px;font-size:.78rem;white-space:nowrap}.privacy-banner-actions [data-privacy-reject],.privacy-banner-actions [data-privacy-manage],.privacy-banner-actions [data-privacy-accept]{min-width:0}.privacy-account-grid{grid-template-columns:1fr}.privacy-dialog-card{padding:19px}.privacy-actions{justify-content:stretch}.privacy-actions .button{flex:1}}

/* Platform chrome: one consistent public header and footer across pages. */
.site-header {
  min-height: 80px;
  border-bottom: 1px solid rgba(233, 223, 216, 0.92);
}

.site-header .header-inner {
  position: relative;
  display: flex;
  min-height: 80px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-header .brand {
  flex: 0 0 190px;
  font-size: 1.28rem;
  letter-spacing: 0;
}

.site-header .primary-nav {
  flex: 1 1 auto;
  justify-content: center;
  gap: 0;
  margin: 0;
}

.site-header .primary-nav a {
  margin: 0 clamp(14px, 2.1vw, 28px);
  white-space: nowrap;
}

.site-header .header-actions {
  flex: 0 0 236px;
  justify-content: flex-end;
  gap: 10px;
}

.site-header .header-actions .button {
  min-width: 104px;
  white-space: nowrap;
}

.site-header .header-actions .button-primary {
  min-width: 118px;
}

.site-header .header-actions .button + .button {
  margin-left: 0;
}

.site-footer {
  margin-top: auto;
}

.site-footer .footer-grid,
.site-footer .footer-grid.footer-grid-expanded {
  display: grid !important;
  grid-template-columns: minmax(260px, 1.55fr) repeat(4, minmax(132px, 1fr));
  gap: 28px;
  padding-top: 46px;
  padding-bottom: 42px;
  align-items: start;
}

.site-footer .footer-grid > * {
  margin: 0 !important;
}

.site-footer .footer-brand,
.site-footer .footer-column,
.site-footer .newsletter {
  grid-column: auto !important;
  flex: initial !important;
  width: auto !important;
  max-width: none !important;
}

.site-footer .footer-brand p {
  max-width: 260px;
}

.site-footer .footer-column {
  gap: 8px;
}

.site-footer .footer-bottom {
  min-height: 68px;
}

.site-footer .footer-bottom nav,
.site-footer .footer-legal-inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 16px;
}

.site-footer .footer-bottom nav a,
.site-footer .footer-legal-inline a {
  color: #747875;
  font-size: var(--type-meta);
  text-decoration: none;
}

.site-footer .footer-bottom nav a:hover,
.site-footer .footer-legal-inline a:hover {
  color: var(--coral);
}

@media (max-width: 1120px) {
  .site-header .brand { flex-basis: 168px; }
  .site-header .header-actions { flex-basis: 220px; }
  .site-header .primary-nav a { margin-inline: 13px; }
  .site-footer .footer-grid,
  .site-footer .footer-grid.footer-grid-expanded {
    grid-template-columns: minmax(220px, 1.35fr) repeat(4, minmax(110px, 1fr));
    gap: 22px;
  }
  .site-footer .footer-brand { grid-column: auto !important; }
}

@media (max-width: 860px) {
  .site-footer .footer-grid,
  .site-footer .footer-grid.footer-grid-expanded {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .site-footer .footer-brand { grid-column: 1 / -1 !important; }
}

@media (max-width: 760px) {
  .site-header,
  .site-header .header-inner {
    min-height: 70px;
  }
  .site-header .header-inner {
    gap: 10px;
  }
  .site-header .brand {
    flex: 1 1 auto;
    min-width: 0;
  }
  .site-header .menu-toggle {
    display: grid;
    flex: 0 0 48px;
    margin-left: 0;
  }
  .site-header .primary-nav {
    position: absolute;
    top: calc(100% + 1px);
    left: 18px;
    right: 18px;
    z-index: 20;
    display: none;
    flex: none;
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fffdfb;
    box-shadow: var(--shadow);
  }
  .site-header .primary-nav.is-open {
    display: flex;
  }
  .site-header .primary-nav a {
    min-height: 46px;
    margin: 0;
    padding: 0 14px;
  }
  .site-header .header-actions {
    flex: 0 0 auto;
    gap: 8px;
  }
  .site-header .header-actions .button {
    min-width: 0;
  }
  .site-footer .footer-grid,
  .site-footer .footer-grid.footer-grid-expanded {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .site-footer .footer-brand { grid-column: 1 / -1 !important; }
  .site-footer .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding-block: 18px;
  }
  .site-footer .footer-bottom nav,
  .site-footer .footer-legal-inline {
    justify-content: flex-start;
  }
}

@media (max-width: 580px) {
  .site-header .brand {
    flex: 0 0 auto;
  }
  .site-header .header-actions .button-ghost {
    display: none;
  }
  .site-header .header-actions .button-primary {
    min-width: 104px;
    padding-inline: 12px;
  }
  .site-footer .footer-grid,
  .site-footer .footer-grid.footer-grid-expanded {
    grid-template-columns: 1fr;
  }
  .site-footer .footer-brand { grid-column: auto !important; }
}