/* Blog-specific atmosphere; keep the original artwork below a white reading wash. */
body.is-story:has(.blog-hero) {
  --blog-background: url('/brand/editorial/blog-backgrounds/pastel-sky-stems.webp');
  --blog-background-wash: .28;
  --blog-background-position: center center;
}
body.is-story:has(.our-story-article) {
  --blog-background: url('/brand/editorial/blog-backgrounds/blush-petals.webp');
  --blog-background-wash: .20;
  --blog-background-position: center center;
}
body.is-story:has(.blog-hero)::before {
  background-image: linear-gradient(
    rgba(255, 255, 255, var(--blog-background-wash)),
    rgba(255, 255, 255, var(--blog-background-wash))
  ), var(--blog-background);
  background-size: cover;
  background-position: var(--blog-background-position);
  background-repeat: no-repeat;
  opacity: 1;
  filter: none;
}
/* Readability washes cover the entire background, never individual text sections. */
/* Public editorial surfaces: scoped to the story preview and reusable classes. */
.site-menu { width: min(84vw, 360px); }
.site-menu nav a { font-size: 24px; line-height: 1.2; padding-block: 16px; min-height: 44px; }
@media(max-width:679px) { .site-menu nav a { font-size:22px; } }
.story .blog-hero { width:calc(100% - 96px); max-width:880px; margin:40px auto 0; padding:32px 0; }
.blog-hero-inner { width:100%; margin:0; }
.blog-hero .hero-action { max-width:360px; margin-top:24px; }
.story:has(.blog-hero) .article > .chapters { margin-top:0; }
.story:has(.blog-hero) .article > .actions,
.story:has(.blog-hero) .article > .editorial-faq { max-width:720px; margin-inline:auto; }
.story:has(.blog-hero) .editorial-copy .editorial-footnote { margin-top:16px; font-size:14px; line-height:1.45; }
@media(min-width:1200px) { .story .blog-hero { width:calc(100% - 160px); } }
@media(max-width:679px) { .story .blog-hero { width:calc(100% - 32px); margin-top:24px; padding:24px 0; } }
.editorial-faq > h2 { margin:0 0 32px; text-align:center; font:400 40px/1.1 Tinos,serif; }
.editorial-faq details { border-top:1px solid rgba(17,17,17,.15); }
.editorial-faq details:last-child { border-bottom:1px solid rgba(17,17,17,.15); }
.editorial-faq summary { position:relative; list-style:none; padding:24px 44px 24px 0; cursor:pointer; text-align:left; font:400 22px/1.3 Tinos,serif; }
.editorial-faq summary::-webkit-details-marker { display:none; }
.editorial-faq summary::after { color: #666666; }
.editorial-faq summary::after { content:'+'; position:absolute; right:0; top:50%; transform:translateY(-50%); width:44px; text-align:center; font:400 24px/1 Inter,sans-serif; }
.editorial-faq details[open] > summary::after { content:'−'; }
.editorial-faq summary:focus-visible { outline:2px solid #111; outline-offset:4px; }
.editorial-faq details > .faq-answer { padding:8px 0 24px; margin:0; color:#666; text-align:left; font:400 16px/1.55 Inter,sans-serif; }
@media(max-width:679px) { .editorial-faq > h2 { font-size:34px; }.editorial-faq summary { font-size:20px; } }
.story { --site-edge: max(24px, calc((100vw - 1120px) / 2)); }
.is-story .story > .header,
.is-story .story > .footer.footer-expanded { padding-inline: var(--site-edge); }
@font-face {
  font-family: Inter;
  src: url('/fonts/Inter-700.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
.primary,.secondary,.site-menu .primary,.account .primary {
  font-weight: 700 !important;
}
.footer a,.footer h2,.footer span {
  font-weight: 400 !important;
}
.story > .footer.footer-expanded { position:relative; bottom:auto; display:block; height:auto; flex:0 0 auto; border:0; padding:48px var(--site-edge); }
.footer-invitation { margin:0; font:400 34px/1.15 Tinos,serif; }
.footer-invitation[href] { display:inline-block; min-height:44px; text-decoration:none; }
.story .footer-expanded a.footer-invitation[href] { text-decoration:none; }
.story .footer-expanded :is(.footer-groups a[href], a.footer-invitation[href]):is(:hover, :focus-visible) { color:#707070; text-decoration:none; }
.story .footer-expanded :is(.footer-groups a[href], a.footer-invitation[href]):focus-visible { outline:2px solid #111111; outline-offset:4px; }
.footer-expanded .footer-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:32px; margin-top:32px; }
.story .footer-expanded nav { display:flex; flex-direction:column; align-items:flex-start; gap:0; }
.story .footer-expanded nav h2 { font:700 16px/1.4 Inter,sans-serif; font-weight:700!important; color:#666666; margin:0 0 12px; letter-spacing:.04em; }
.story .footer-expanded nav a { min-height:32px; padding-block:6px; font-size:14px; line-height:20px; overflow-wrap:anywhere; text-transform:none; letter-spacing:normal; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:40px; font:400 14px/20px Inter,sans-serif; }
.footer-socials { display:flex; gap:8px; }
.footer-socials a { display:grid; place-items:center; width:44px; height:44px; }
@media(max-width:679px) { .story > .footer.footer-expanded { padding:32px var(--site-edge); }.footer-expanded .footer-groups { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 24px; } }
@media(max-width:319px) { .footer-expanded .footer-groups { grid-template-columns:1fr; } }
@media(pointer:coarse) { .story .footer-expanded nav a { min-height:44px; } }
.copy-lead { display: block; margin-bottom: 8px; font-weight: 400; }
.editorial-copy { align-self: start; max-width: 65ch; font-weight: 400; line-height: 1.6; }
.editorial-questions { margin: 0; padding-left: 24px; list-style: disc; }
.editorial-questions li + li { margin-top: 8px; }
.story .editorial-copy .editorial-questions + p { margin-top: 16px; }
html { background: #f4f4f4; overscroll-behavior-y: none; }
body.is-story { overscroll-behavior-y: none; }
.story .chapters { align-items: stretch; }
.story .chapter { align-items: start; align-content: start; }
.story .chapter-heading { align-items: flex-start; margin: 0; }
.story .chapter-photo,.story .chapter p { align-self: start; }
.story .chapter p { margin: 0; }
@supports (grid-template-rows: subgrid) {
  .story .chapter {
    grid-template-rows: subgrid;
    grid-row: span 3;
  }
}
@supports not (grid-template-rows: subgrid) {
  .story .chapter { grid-template-rows: auto auto 1fr; }
  @media(min-width:680px) {
    .story .chapter-heading { min-height: var(--step-heading-height, 0px); }
  }
}
.story .chapter-heading .number {
  font: 400 14px/1.2 Inter, sans-serif;
  font-variant-numeric: tabular-nums;
  flex: 0 0 2ch;
}
.story .chapter-heading h2 {
  font: 400 25px/1.1 Tinos, serif;
  letter-spacing: -.03em;
}
.chapter-heading sup { position: relative; display: inline-block; width: 20px; vertical-align: baseline; font: 400 14px/0 Inter, sans-serif; }
.chapter-heading sup a { position: absolute; left: 0; top: -32px; width: 44px; height: 44px; display: grid; place-items: center; text-decoration: none; }
.story .chapter-heading h2 { padding-right: 24px; min-width: 0; overflow-wrap: break-word; }
.story > .header,.story > .footer { height: auto; min-height: 67.2px; flex: 0 0 auto; padding-block: 10px; }
.story > .header .desktop-nav { display: none !important; }
.story > .header .menu-trigger { display: grid; }
.story .editorial-footnote { margin: 24px 0 0; font: 400 14px/1.45 Inter, sans-serif; color: #111; text-align: left; scroll-margin-block: 24px; }
.is-story::before {
  background-image: url('/brand/editorial/flower-continuum-v3.webp');
  background-size: cover;
  background-position: center 60%;
  opacity: 1;
  filter: none;
}
.story .article,
.editorial-paper {
  container-type: inline-size;
  width: calc(100% - 64px);
  max-width: 1104px;
  margin: 40px auto;
  padding: 48px 48px;
  flex: 0 0 auto;
  background: #f4f4f4;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
}
.story .chapter-photo,
.editorial-paper img {
  border-radius: 0;
}
.story .chapter-photo { aspect-ratio: 8 / 5; }
.story > .header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244,244,244,.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.story > .footer {
  position: static;
  bottom: auto;
  z-index: auto;
  height: auto;
  min-height: 0;
  margin-top: auto;
  background: #f4f4f4;
}
.story > .footer.footer-expanded { position: static; }
.is-story { scroll-padding-bottom: 16px; }
@media(min-width:680px) {
  .is-story::before { background-position: 65% 85%; }
  .story .article { width: calc(100% - 96px); }
}
@media(min-width:1200px) {
  .is-story::before { background-position: center bottom; }
  .story .article { width: calc(100% - 160px); max-width: 1040px; }
}
.is-story { scroll-padding-top: 84px; }
.story .chapters { grid-template-columns: repeat(2,minmax(0,1fr)); }
@container (max-width: 561px) {
  .story .chapters { grid-template-columns: minmax(0,1fr); }
}
.editorial-prose {
  max-width: 65ch;
  margin-inline: auto;
  font: 400 16px/1.6 Inter, sans-serif;
  overflow-wrap: anywhere;
}
.editorial-prose > * + * { margin-top: 24px; }
.editorial-prose h2 {
  margin-top: 40px;
  font: 400 30px/1.15 Tinos, serif;
}
.editorial-prose h3 { font: 400 25px/1.2 Tinos, serif; }
.editorial-prose a { text-decoration: underline; text-underline-offset: 4px; }
.editorial-prose figure { margin: 32px 0; }
.editorial-prose img { display: block; width: 100%; height: auto; }
.editorial-prose figcaption { margin-top: 8px; font-size: 14px; line-height: 1.45; }
.editorial-prose blockquote {
  margin-inline: 0;
  border-left: 1px solid rgba(17,17,17,.2);
  padding-left: 24px;
}
.editorial-prose ul,.editorial-prose ol { padding-left: 24px; }
.editorial-prose li + li { margin-top: 8px; }
.editorial-prose table { width: 100%; border-collapse: collapse; }
.editorial-prose th,.editorial-prose td {
  padding: 12px 8px;
  border-bottom: 1px solid rgba(17,17,17,.15);
  text-align: left;
  font-weight: 400;
}
.editorial-prose .table-scroll { overflow-x: auto; }
@media(max-width:679px) {
  .is-story::before { background-image: url('/brand/editorial/flower-continuum-mobile-v4.webp'); }
  .story .article,.editorial-paper {
    width: calc(100% - 32px);
    margin-block: 24px;
    padding: 32px 24px;
  }
  .editorial-prose h2 { font-size: 25px; }
}

/* Blog reading-size preview: 18px copy; retain heading and footnote scales. */
.story:has(.blog-hero) .blog-hero p,
.story:has(.blog-hero) .intro,
.story:has(.blog-hero) .chapter p:not(.editorial-footnote),
.story:has(.blog-hero) .editorial-copy,
.story:has(.blog-hero) .editorial-copy li,
.story:has(.blog-hero) .faq-answer {
  font-size: 18px;
  line-height: 1.6;
}

/* Approved footer invitation: emphasize date without changing size or weight. */
.story .footer-expanded .footer-invitation em {
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  font-style: italic;
}

/* Compact header/drawer CTAs are controls, not 18px reading copy. */
.story .header .primary,
.story .header a[href*="mode=signup"],
.site-menu .primary,
.site-menu a[href*="mode=signup"] {
  font-family: Inter, sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

/* Centered footer follows the parchment width, independently of the header. */
.story .footer-expanded {
  --footer-paper-gutter: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 0;
  text-align: center;
}
.story .footer-expanded > .footer-invitation,
.story .footer-expanded > .footer-groups,
.story .footer-expanded > .footer-bottom {
  box-sizing: border-box;
  width: min(1104px, calc(100% - 2 * var(--footer-paper-gutter)));
  max-width: none;
  margin-inline: auto;
  text-align: center;
}
.story .footer-expanded .footer-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 24px;
  align-items: start;
}
.story .footer-expanded .footer-groups nav,
.story .footer-expanded .footer-groups h2,
.story .footer-expanded .footer-groups nav a {
  text-align: center;
}
.story .footer-expanded .footer-groups nav {
  min-width: 0;
  align-items: center;
}
.story .footer-expanded .footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}
.story .footer-expanded .footer-socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.story .footer-expanded .footer-socials a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}
.story .footer-expanded .footer-socials img,
.story .footer-expanded .footer-socials svg {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}
@media (min-width: 680px) {
  .story .footer-expanded { --footer-paper-gutter: 48px; padding-block: 48px; }
}
@media (min-width: 768px) {
  .story .footer-expanded .footer-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .story .footer-expanded { --footer-paper-gutter: 80px; }
}

/* FAQ questions retain the same reading size on every viewport. */
.story .editorial-faq summary {
  font-size: 22px;
}

/* Uppercase Inter controls use the compact 16px tier, not body sizing. */
.story .primary,
.story .secondary,
.site-menu .primary,
.site-menu .secondary,
.inter-uppercase {
  font-family: Inter, sans-serif;
  font-size: 16px;
  line-height: 1.4;
}
.inter-uppercase {
  font-weight: 700;
  text-transform: uppercase;
}

/* Preview decision: one 16px scale for Inter; preserve Tinos heading sizes. */
.story,
.story p,
.story .intro,
.story .editorial-copy,
.story .editorial-copy li,
.story .editorial-prose figcaption,
.story .chapter-heading sup,
.story:has(.blog-hero) .blog-hero p,
.story:has(.blog-hero) .intro,
.story:has(.blog-hero) .chapter p,
.story:has(.blog-hero) .editorial-copy,
.story:has(.blog-hero) .editorial-copy li,
.story:has(.blog-hero) .editorial-copy .editorial-footnote,
.story:has(.blog-hero) .faq-answer,
.story .editorial-faq details > .faq-answer,
.story .primary,
.story .secondary,
.story .footer-expanded .footer-groups h2,
.story .footer-expanded nav a,
.story .footer-expanded .footer-bottom > span,
.site-menu .primary,
.site-menu .secondary,
.inter-uppercase {
  font-size: 16px;
}

/* Center the parchment-width container, not the footer text. */
.story .footer-expanded,
.story .footer-expanded > .footer-invitation,
.story .footer-expanded > .footer-groups,
.story .footer-expanded > .footer-bottom,
.story .footer-expanded .footer-groups nav,
.story .footer-expanded .footer-groups h2,
.story .footer-expanded .footer-groups nav a {
  text-align: left;
}
.story .footer-expanded .footer-groups nav {
  align-items: flex-start;
}
.story .footer-expanded .footer-bottom {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.story .footer-expanded .footer-socials {
  margin-left: auto;
}

/* One shared rail: footer content never extends past the parchment edges. */
.story {
  --editorial-rail-gutter: 16px;
  --editorial-rail-width: min(var(--editorial-rail-max, 1104px), calc(100% - 2 * var(--editorial-rail-gutter)));
}
.story:has(.blog-hero) {
  --editorial-rail-max: 880px;
}
.story .article,
.story .blog-hero,
.story .footer-expanded > .footer-invitation,
.story .footer-expanded > .footer-groups,
.story .footer-expanded > .footer-bottom {
  box-sizing: border-box;
  width: var(--editorial-rail-width);
  max-width: none;
  margin-inline: auto;
}
.story .footer-expanded {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}
.story .footer-expanded > .footer-invitation,
.story .footer-expanded > .footer-groups,
.story .footer-expanded > .footer-bottom {
  padding-inline: 0;
  min-width: 0;
}
@media (min-width: 680px) {
  .story { --editorial-rail-gutter: 48px; }
}
@media (min-width: 1200px) {
  .story { --editorial-rail-gutter: 80px; }
}

/* Footer invitation and text share a left edge within the existing rail. */
.story .footer-expanded > .footer-invitation {
  display: block;
  text-align: left;
  justify-content: flex-start;
  justify-items: start;
  text-indent: 0;
}
.story .footer-expanded .footer-groups nav,
.story .footer-expanded .footer-groups h2,
.story .footer-expanded .footer-groups nav a,
.story .footer-expanded .footer-bottom > span {
  text-align: left;
  justify-content: flex-start;
  justify-items: start;
  text-indent: 0;
}

/* Local asterisk explanations are quieter, but remain readable. */
.story .editorial-footnote,
.story:has(.blog-hero) .editorial-copy .editorial-footnote {
  font-style: italic;
  color: #666666;
  font-size: 16px;
  font-weight: 400;
}

/* Keep the complete 8:5 date composition, including shoes, on every blog width. */
.story:has(.blog-hero) .chapter-photo {
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 8 / 5;
}


/* Story back navigation: keep headings on the article text rail. */
body.is-story {
  --story-content-inset: 48px;
}

body.is-story .article {
  padding-inline: var(--story-content-inset);
}

body.is-story .blog-hero-inner {
  position: relative;
  width: auto;
  margin-inline: var(--story-content-inset);
}

body.is-story .blog-hero-inner > h1 {
  min-height: 44px;
  padding-block-start: 3px;
}

body.is-story .blog-hero-back {
  position: absolute;
  top: 0;
  left: calc(var(--site-edge, 24px) - (100vw - 100%) / 2);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 6px;
  color: var(--ink, #111);
  background: none;
  border: 0;
  border-radius: 50%;
  text-decoration: none;
}

body.is-story .blog-hero-back svg {
  display: block;
  width: 32px;
  height: 32px;
}

body.is-story .blog-hero-back:is(:hover, :active) {
  background: rgba(17, 17, 17, 0.05);
}

body.is-story .blog-hero-back:hover svg {
  opacity: 0.6;
}

body.is-story .blog-hero-back:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Keep the logo-aligned back control clear of titles on smaller screens. */
@media (max-width: 1023px) {
  body.is-story .blog-hero-back {
    position: relative;
    margin-bottom: 16px;
  }
}

@media (max-width: 767px) {
  body.is-story {
    --story-content-inset: 24px;
  }
}

@media print {
  body.is-story .blog-hero-back {
    display: none;
  }
}