/* Public-home expression of Chudoly's shared consumer editorial system. */
.public-home {
  margin: 0;
  color: var(--consumer-ink);
  background: var(--consumer-bg);
  font-family: var(--consumer-ui);
}

.public-home * { border-color: var(--consumer-rule); }
.public-home :is(a, button):focus-visible {
  border-radius: 0;
  outline: 2px solid var(--consumer-rust);
  outline-offset: 4px;
}
.public-home h1,
.public-home h2,
.public-home h3 { color: var(--consumer-ink); font-family: var(--consumer-display); }
.public-home .eyebrow,
.public-home .value-label {
  margin: 0 0 10px;
  color: var(--consumer-rust);
  font: 750 .69rem/1.25 var(--consumer-ui);
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* Header */
.public-home .global-header {
  position: relative;
  min-height: 65px;
  padding: 0;
  border-bottom: 1px solid var(--consumer-rule);
  background: rgba(251, 247, 239, .97);
  backdrop-filter: none;
  box-shadow: none;
}
.public-home .global-header.is-scrolled { background: rgba(251, 247, 239, .98); box-shadow: none; }
.public-home .global-header .container {
  width: min(calc(100% - (2 * var(--consumer-gutter))), var(--consumer-width));
}
.public-home .global-nav { position: relative; min-height: 64px; gap: 28px; }
.public-home .global-brand { gap: 10px; border-radius: 0; color: var(--consumer-ink); }
.public-home .global-brand-mark { width: 27px; height: 27px; flex: 0 0 27px; }
.public-home .global-brand-name {
  font: 700 1.7rem/1 var(--consumer-display);
  letter-spacing: -.035em;
}
.public-home .public-nav-links { gap: 28px; }
.public-home .public-nav-link,
.public-home .global-primary-action,
.public-home .public-mobile-action {
  position: relative;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--consumer-muted);
  background: transparent;
  box-shadow: none;
  font: 500 .92rem/1.2 var(--consumer-ui);
  text-decoration: none;
}
.public-home .public-nav-link:hover,
.public-home .public-mobile-action:hover { color: var(--consumer-ink); background: transparent; }
.public-home .global-primary-action {
  gap: 6px;
  color: var(--consumer-rust-dark);
  font-weight: 650;
}
.public-home .global-primary-action:hover { color: var(--consumer-rust); background: transparent; }
.public-home .public-mobile-action::after {
  position: absolute;
  right: 0;
  bottom: 7px;
  left: 0;
  height: 2px;
  background: var(--consumer-rust);
  content: "";
}
.public-mobile-actions,
.public-mobile-menu { display: none; }

/* Source provenance */
.family-moment-caption { color: var(--consumer-muted); font-size: .78rem; line-height: 1.45; }
.home-sources { border-block: 1px solid var(--consumer-rule); background: var(--consumer-toast); }
.home-sources .consumer-width { display: flex; gap: 30px; align-items: baseline; padding-block: 18px; }
.home-sources p {
  flex: 0 0 auto;
  margin: 0;
  color: var(--consumer-muted);
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.home-sources ul { display: flex; flex: 1; flex-wrap: wrap; gap: 8px 30px; justify-content: space-between; margin: 0; padding: 0; list-style: none; }
.home-sources li { color: var(--consumer-ink); font-size: .83rem; }

/* Family story */
.home-story { padding: 46px 0 64px; }
.home-story-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, .8fr);
  gap: 56px;
  align-items: start;
  padding: 0 0 40px;
  border-bottom: 1px solid var(--consumer-rule);
}
.home-story-context {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  margin: 0 0 13px;
  font: 750 .66rem/1.3 var(--consumer-ui);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.home-story-context span:first-child { color: var(--consumer-rust); }
.home-story-context span:last-child { color: var(--consumer-muted); }
.home-story-context span + span { padding-left: 20px; border-left: 1px solid var(--consumer-rule); }
.home-story-intro h1 {
  max-width: 700px;
  margin: 0;
  font-size: clamp(2.35rem, 3.5vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.03;
}
.home-story-intro > p {
  max-width: 390px;
  margin: 0;
  color: var(--consumer-muted);
  font-size: 1rem;
  line-height: 1.55;
}
.family-moment-list { min-height: 420px; }
.family-moment {
  display: grid;
  grid-template-columns: var(--moment-width, 432px) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding: 40px 0 48px;
  border-bottom: 1px solid var(--consumer-rule);
}
.family-moment:first-child { --moment-width: 480px; padding-top: 44px; }
.family-moment:nth-child(2) { --moment-width: 336px; }
.family-moment:nth-child(3) { --moment-width: 270px; }
.family-moment-figure { margin: 0; }
.family-moment-image-link {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #e9dfd1;
}
.family-moment-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 6px;
  color: var(--consumer-muted);
  text-align: center;
}
.family-moment-fallback-icon { font-size: 1.5rem; }
.family-moment-image-link.has-image .family-moment-fallback { display: none; }
.family-moment-image-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.9) contrast(.95) sepia(.025);
  transition: transform .3s ease;
}
.family-moment-image-link:hover img { transform: scale(1.012); }
.family-moment[data-moment="bluey-dance-party"] img { object-position: 50% 46%; }
.family-moment[data-moment="pixar-cars-exhibit"] img { object-position: 51% 50%; }
.family-moment[data-moment="native-american-workshop"] img {
  object-position: 50% 34%;
  filter: saturate(.82) contrast(.9) brightness(1.035) sepia(.025);
}
.family-moment-caption { margin: 10px 0 0; }
.family-moment-copy { align-self: start; padding-top: 7px; }
.family-moment-eyebrow {
  margin: 0 0 10px;
  color: var(--consumer-muted);
  font-size: .67rem;
  font-weight: 750;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.family-moment-title {
  display: inline;
  color: var(--consumer-ink);
  font: 600 1.7rem/1.1 var(--consumer-display);
  letter-spacing: -.025em;
  text-decoration: none;
}
.family-moment-title:hover { color: var(--consumer-rust-dark); }
.family-moment-location {
  margin: 10px 0 14px;
  color: var(--consumer-muted);
  font-size: .87rem;
  line-height: 1.4;
}
.family-moment-description {
  max-width: 690px;
  margin: 0;
  color: var(--consumer-ink);
  font-size: .98rem;
  line-height: 1.62;
}

/* How it works */
.home-how,
.home-why { scroll-margin-top: 88px; }
.home-how { padding: 76px 0 0; background: var(--consumer-paper); }
.home-section-heading { max-width: 720px; padding-bottom: 42px; }
.home-section-heading h2 {
  margin: 0;
  font-size: clamp(2.5rem, 4.1vw, 3.55rem);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.02;
  text-wrap: balance;
}
.home-step {
  display: grid;
  grid-template-columns: 88px 320px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 31px 0 34px;
  border-top: 1px solid var(--consumer-rule);
}
.home-step-number {
  color: var(--consumer-rust);
  font: 400 2rem/1 var(--consumer-display);
}
.home-step h3 {
  margin: 0;
  font-size: 1.54rem;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.25;
}
.home-step p {
  max-width: 600px;
  margin: 0;
  color: var(--consumer-muted);
  font-size: .94rem;
  line-height: 1.58;
}

/* Why Chudoly */
.home-why { padding: 84px 0; background: var(--consumer-toast); }
.home-why-heading { max-width: 760px; }
.home-values { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--consumer-rule); }
.home-values article { min-height: 230px; padding: 34px 38px 38px 0; border-bottom: 1px solid var(--consumer-rule); }
.home-values article:nth-child(even) { padding-right: 0; padding-left: 38px; border-left: 1px solid var(--consumer-rule); }
.home-values h3 { margin: 0 0 12px; font-size: 1.75rem; font-weight: 600; letter-spacing: -.03em; }
.home-values article > p:last-child { max-width: 480px; margin: 0; color: var(--consumer-muted); line-height: 1.62; }
.home-considers { padding: 72px 0 76px; background: var(--consumer-bg); }
.home-context-heading { max-width: 700px; margin-bottom: 34px; }
.home-context-heading h2 { margin: 0; font-size: clamp(2.15rem, 3.5vw, 3rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; }
.home-context { display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: 56px; padding-top: 31px; border-top: 1px solid var(--consumer-rule); }
.home-context-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 38px; }
.home-context-groups h3 {
  margin: 0 0 10px;
  color: var(--consumer-muted);
  font: 750 .67rem/1.3 var(--consumer-ui);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.home-context-groups ul { margin: 0; padding: 0; list-style: none; }
.home-context-groups li { margin: 4px 0; color: var(--consumer-ink); font: 400 1.08rem/1.4 var(--consumer-display); }
.home-context-note { max-width: 560px; margin: 0; color: var(--consumer-muted); font-size: .93rem; line-height: 1.68; }

/* CTA and footer */
.home-cta { padding: 70px 0 74px; border-top: 1px solid var(--consumer-rule); background: var(--consumer-paper); }
.home-cta-layout { display: flex; gap: 48px; justify-content: space-between; align-items: end; }
.home-cta-layout > div { max-width: 650px; }
.home-cta h2 { margin: 0 0 15px; font-size: clamp(2.55rem, 4.2vw, 3.7rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.02; }
.home-cta p { max-width: 580px; margin: 0; color: var(--consumer-muted); font-size: 1rem; line-height: 1.6; }
.home-primary-action {
  display: inline-flex;
  min-height: 47px;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  color: #fffaf2;
  background: var(--consumer-rust);
  font-size: .92rem;
  font-weight: 700;
}
.home-primary-action:hover { background: var(--consumer-rust-dark); }
.public-home .site-footer { padding: 48px 0 24px; border-top: 1px solid var(--consumer-rule); color: var(--consumer-muted); background: var(--consumer-bg); }
.public-home .site-footer .container { width: min(calc(100% - (2 * var(--consumer-gutter))), var(--consumer-width)); }
.public-home .footer-grid { grid-template-columns: minmax(260px, 1.5fr) repeat(2, minmax(160px, .6fr)); gap: 54px; }
.public-home .footer-brand .brand { gap: 9px; color: var(--consumer-ink); }
.public-home .footer-brand .brand-mark { width: 28px; height: 28px; }
.public-home .footer-brand .brand-name { font: 700 1.7rem/1 var(--consumer-display); }
.public-home .footer-brand p { max-width: 360px; margin: 10px 0 0; color: var(--consumer-muted); }
.public-home .footer-brand .footer-brand-line { color: var(--consumer-ink); font: 400 1.08rem/1.45 var(--consumer-display); }
.public-home .footer-column h2 { color: var(--consumer-ink); font-size: .68rem; }
.public-home .footer-column :is(a, button) { padding: 0; border: 0; color: inherit; background: transparent; font: 450 .85rem/1.4 var(--consumer-ui); text-decoration: underline; text-decoration-color: var(--consumer-rule); text-underline-offset: 4px; cursor: pointer; }
.public-home .footer-column :is(a, button):hover { color: var(--consumer-rust-dark); text-decoration-color: currentColor; }
.public-home .footer-bottom { border-color: var(--consumer-rule); }

@media (max-width: 1000px) and (min-width: 781px) {
  .home-sources ul { justify-content: flex-start; }
  .family-moment { grid-template-columns: min(40vw, var(--moment-width, 410px)) minmax(0, 1fr); gap: 32px; }
  .home-step { grid-template-columns: 72px 280px minmax(0, 1fr); }
}

@media (max-width: 780px) {
  .public-home .global-header { min-height: 56px; }
  .public-home .global-nav { min-height: 55px; gap: 12px; }
  .public-home .global-brand { gap: 8px; }
  .public-home .global-brand-mark { width: 24px; height: 24px; flex-basis: 24px; }
  .public-home .global-brand-name { font-size: 1.55rem; }
  .public-home .public-nav-links { display: none; }
  .public-mobile-actions { display: flex; align-items: center; gap: 19px; margin-left: auto; }
  .public-home .public-mobile-action { display: inline-flex; align-items: center; gap: 5px; color: var(--consumer-rust-dark); font-size: .82rem; font-weight: 700; }
  .public-menu-toggle {
    display: grid;
    width: 36px;
    height: 44px;
    padding: 10px 5px;
    border: 0;
    border-radius: 0;
    place-content: center;
    gap: 5px;
    color: var(--consumer-muted);
    background: transparent;
  }
  .public-menu-toggle span { display: block; width: 20px; height: 1px; background: currentColor; }
  .public-mobile-menu {
    position: absolute;
    z-index: 3;
    top: 55px;
    right: 0;
    left: 0;
    display: grid;
    padding: 14px var(--consumer-gutter) 20px;
    border-bottom: 1px solid var(--consumer-rule);
    border-radius: 0;
    background: var(--consumer-paper);
    box-shadow: none;
  }
  .public-mobile-menu[hidden] { display: none; }
  .public-mobile-menu a {
    min-height: 46px;
    padding: 13px 0;
    border-bottom: 1px solid var(--consumer-rule);
    border-radius: 0;
    color: var(--consumer-ink);
    font-size: .9rem;
  }
  .story-page .public-mobile-menu a[aria-current="page"] {
    color: var(--consumer-ink);
    box-shadow: inset 2px 0 var(--consumer-rust);
    font-weight: 650;
  }
  .home-sources .consumer-width { display: block; padding-block: 20px; }
  .home-sources ul { justify-content: flex-start; gap: 8px 22px; margin-top: 12px; }
  .home-sources li { font-size: .81rem; }
  .home-story { padding: 28px 0 42px; }
  .home-story-intro { display: block; padding-bottom: 29px; }
  .home-story-context { gap: 7px 12px; margin-bottom: 11px; font-size: .61rem; }
  .home-story-context span + span { padding-left: 12px; }
  .home-story-intro h1 { font-size: clamp(2.2rem, 10vw, 2.85rem); line-height: 1.02; }
  .home-story-intro > p { max-width: none; margin-top: 13px; font-size: .97rem; line-height: 1.58; }
  .family-moment,
  .family-moment:first-child { display: block; padding: 25px 0 28px; }
  .family-moment-figure { width: calc(100% + (2 * var(--consumer-gutter))); margin-inline: calc(-1 * var(--consumer-gutter)); }
  .family-moment-image-link { aspect-ratio: 4 / 3; }
  .family-moment:first-child .family-moment-image-link { aspect-ratio: 4 / 5; }
  .family-moment[data-moment="bluey-dance-party"] img { object-position: 50% 48%; }
  .family-moment[data-moment="pixar-cars-exhibit"] img { object-position: 54% 50%; }
  .family-moment[data-moment="native-american-workshop"] img { object-position: 52% 34%; }
  .family-moment-caption { margin: 8px var(--consumer-gutter) 0; font-size: .76rem; }
  .family-moment-copy { padding-top: 20px; }
  .family-moment-eyebrow { margin-bottom: 9px; }
  .family-moment-title { font-size: 1.58rem; }
  .family-moment-location { margin: 8px 0 13px; }
  .family-moment-description { font-size: .94rem; line-height: 1.64; }
  .home-how { padding-top: 52px; }
  .home-how,
  .home-why { scroll-margin-top: 76px; }
  .home-section-heading { padding-bottom: 31px; }
  .home-section-heading h2 { font-size: clamp(2.25rem, 10vw, 3rem); }
  .home-step { grid-template-columns: 52px minmax(0, 1fr); gap: 12px 15px; padding: 25px 0 28px; }
  .home-step-number { grid-row: 1 / span 2; font-size: 1.7rem; }
  .home-step h3 { font-size: 1.4rem; }
  .home-step p { grid-column: 2; font-size: .9rem; }
  .home-why { padding: 58px 0; }
  .home-values { grid-template-columns: 1fr; }
  .home-values article,
  .home-values article:nth-child(even) { min-height: 0; padding: 27px 0 30px; border-left: 0; }
  .home-values h3 { font-size: 1.55rem; }
  .home-considers { padding: 54px 0 58px; }
  .home-context-heading { margin-bottom: 28px; }
  .home-context { display: block; padding-top: 27px; }
  .home-context-groups { grid-template-columns: 1fr 1fr; gap: 24px; }
  .home-context-groups li { font-size: 1.05rem; }
  .home-context-note { margin-top: 27px; }
  .home-cta { padding: 58px 0 62px; }
  .home-cta-layout { display: block; }
  .home-cta .home-primary-action { margin-top: 25px; }
  .public-home .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px 24px; }
  .public-home .footer-brand { grid-column: 1 / -1; }
  .public-home .footer-bottom { align-items: flex-start; flex-direction: column; line-height: 1.55; }
}

@media (max-width: 390px) {
  .public-home .global-header .container { width: calc(100% - 40px); }
  .public-home .global-brand-name { font-size: 1.45rem; }
  .public-home .public-mobile-actions { gap: 14px; }
  .public-home .public-mobile-action { font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
  .family-moment-image-link img { transition: none; }
  .family-moment-image-link:hover img { transform: none; }
}