/* Mini Moos & Crew — the approved Our Story concept.
   Scoped to this page; site.css continues to provide the cookie panel. */
body.story-page {
  --paper: #f8f5ed;
  --forest: #414b34;
  --rust: #a64d2c;
  --text: #201e18;
  --line: #d8cfbd;
  --display: 'Cormorant Garamond', Georgia, serif;
  /* The type here runs to 106px and the sections were padded like a form —
     about 25px each. That mismatch is what reads as crammed: editorial type
     needs editorial air. One scale, used by every section below. */
  --air-s: clamp(40px, 4.5vw, 64px);
  --air-m: clamp(64px, 7vw, 104px);
  --air-l: clamp(88px, 9.5vw, 148px);
  background: var(--paper);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  line-height: 1.62;
}
/* Scoped to #main, which is this page's own content. These were on
   .story-page — the whole body — and the nav and footer are now the shared
   ones site.js draws. A blanket margin:0 stripped the footer's spacing, the
   display face overrode DM Serif Display there, and a rust focus ring gave
   this one page a different one from every other. The story keeps its look;
   the chrome keeps the site's. */
/* :where() so the reset carries no specificity at all. Scoping it to #main
   put an id in the selector, which outranked every rule below it — including
   the paragraph margins — and silently collapsed the founder copy into one
   block. A reset should lose every argument it is in. */
:where(.story-page #main) :where(h1, h2, h3, p, figure) { margin: 0; }
:where(.story-page #main) :where(h1, h2, h3) {
  font-family: var(--display); font-weight: 500; letter-spacing: -.045em; }
:where(.story-page #main) a { text-decoration: none; }
/* The focus ring comes from motion.css and is the same on every page. */
.story-skip { position: absolute; top: -100px; left: 16px; padding: 12px 20px; background: var(--paper); z-index: 30; }
.story-skip:focus { top: 12px; }
.story-button { display: inline-flex; justify-content: center; align-items: center; gap: 16px; background: var(--forest); color: var(--paper); padding: 13px 24px; border-radius: 5px; font: 500 22px/1.2 var(--display); white-space: nowrap; min-height: 48px; transition: background .2s; }
.story-button:hover { background: #303b27; }
.story-button span { font: 18px/1 sans-serif; }
.story-intro { text-align: center; padding: var(--air-m) 24px var(--air-s); }
.story-eyebrow { color: var(--rust); text-transform: uppercase; font-size: 11px; font-weight: 600; letter-spacing: .29em; line-height: 1.6; }
.story-intro h1 { font-size: clamp(54px, 6.6vw, 98px); line-height: 1.04; margin-top: clamp(34px, 3.4vw, 52px); text-wrap: balance; }
.story-intro h1 span, .story-intro h1 em { display: block; }
.story-intro h1 em { margin-top: .08em; }
.story-intro h1 em { font-weight: 400; }
.story-intro .story-subtitle { font-size: clamp(17px, 1.8vw, 23px); margin-top: clamp(30px, 3vw, 46px); letter-spacing: -.015em; line-height: 1.6; color: #4c4436; }
.story-landscape { position: relative; max-width: 1380px; margin: 0 auto !important; width: calc(100% - 56px); border-radius: 7px; overflow: hidden; background: #d3bd98; }
.story-landscape img { width: 100%; height: auto; display: block; aspect-ratio: 2.95; object-fit: cover; }
.story-landscape figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 64px 40px 28px; color: #fffaf0; font: 500 clamp(18px, 2vw, 25px)/1.2 var(--display); background: linear-gradient(transparent, #171d1299); text-shadow: 0 1px 3px #0008; }
.story-content { width: calc(100% - 136px); max-width: 1240px; margin: auto; }
.story-founders { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: clamp(48px, 5.5vw, 88px); padding: var(--air-l) 0; }
.story-portrait { position: relative; }
.story-portrait img { width: 100%; height: auto; aspect-ratio: 1.3; object-fit: cover; object-position: center 39%; display: block; border-radius: 7px; }
.story-portrait figcaption { position: absolute; bottom: -6px; left: -12px; padding: 3px 23px 7px; background: #f3eddf; transform: rotate(-5deg); color: var(--rust); font: 30px/1.2 'Caveat', cursive; box-shadow: 0 2px 5px #34261108; }
.story-copy h2 { font-size: clamp(34px, 4.1vw, 58px); line-height: 1.04; margin: 24px 0 32px; text-wrap: balance; }
/* The gap between paragraphs has to beat the leading or the break vanishes
   and two paragraphs read as one wall. Leading is 1.78, so the space
   between them is a line and a half. */
.story-copy > p:not(.story-eyebrow):not(.story-signature) { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.78; margin-top: 1.55em; letter-spacing: -.005em; max-width: 46ch; }
.story-copy > p:not(.story-eyebrow):not(.story-signature) + p { margin-top: 1.55em; }
.story-copy .story-signature { font: 400 clamp(29px, 3.2vw, 43px)/1.2 'Caveat', cursive; color: var(--rust); margin-top: 40px; transform: rotate(-2deg); }
.story-signature-heart { width: 35px; height: 39px; color: var(--rust); margin: 12px 0 0 5px; transform: rotate(-12deg); }
.story-values { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #cfc4ae; padding: var(--air-m) 0; margin-top: 0; }
.story-value { text-align: center; padding: 0 clamp(20px, 2.6vw, 40px); }
.story-value + .story-value { border-left: 1px solid var(--line); }
.story-value-icon { display: block; width: 70px; height: 70px; margin: 0 auto 12px; color: var(--rust); stroke-width: 1.5; }
.story-value h3 { font-size: clamp(24px, 2.3vw, 31px); line-height: 1.15; margin-bottom: 16px; letter-spacing: -.03em; }
.story-value p { font-size: clamp(14px, 1.3vw, 16px); line-height: 1.72; letter-spacing: 0; color: #4c4436; max-width: 28ch; margin-inline: auto; }
.story-invitation { background: var(--forest); color: var(--paper); padding: var(--air-m) 0; position: relative; overflow: hidden; }
.story-invitation-inner { max-width: 1320px; padding: 0 44px; margin: auto; display: flex; justify-content: space-between; gap: 36px; align-items: center; position: relative; }
.story-invitation h2 { color: inherit; font-size: clamp(34px, 4.3vw, 60px); line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; }
.story-invitation p { font-size: 12px; letter-spacing: .25em; margin-top: 18px; text-transform: uppercase; opacity: .82; }
.story-button-light { background: var(--paper); color: var(--text); padding: 18px 29px; }
.story-button-light:hover { background: #e8dfcd; }
.story-botanical { position: absolute; width: 150px; height: 190px; color: #f4eed2; opacity: .24; right: -25px; bottom: -32px; pointer-events: none; }
.story-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }

@media (max-width: 1100px) {
  .story-founders { gap: clamp(40px, 5vw, 56px); }
  .story-content { width: calc(100% - 88px); }
  .story-value { padding-inline: 20px; }
}
@media (max-width: 900px) {
  .story-invitation-inner { gap: 24px; padding-inline: 32px; }
  .story-invitation p { letter-spacing: .1em; }
  .story-button-light { padding: 16px 20px; font-size: 20px; }
}
@media (max-width: 640px) {
  .story-intro { padding: clamp(48px, 13vw, 72px) 16px clamp(32px, 8vw, 44px); }
  .story-eyebrow { font-size: 9px; letter-spacing: .23em; }
  .story-intro h1 { font-size: clamp(40px, 10.2vw, 62px); margin-top: 30px; line-height: 1.08; }
  .story-intro .story-subtitle { font-size: 16px; max-width: 320px; margin: 30px auto 0; line-height: 1.62; }
  .story-landscape { width: calc(100% - 28px); }
  .story-landscape img { aspect-ratio: 1.32; object-position: 41% center; }
  .story-landscape figcaption { padding: 32px 16px 16px; font-size: 20px; }
  .story-content { width: calc(100% - 44px); }
  .story-founders { grid-template-columns: 1fr; gap: 36px; padding: clamp(56px, 14vw, 80px) 0; }
  .story-portrait img { aspect-ratio: 1.12; }
  .story-portrait figcaption { left: -7px; font-size: 29px; }
  .story-copy h2 { font-size: 40px; line-height: 1.08; margin: 20px 0 26px; max-width: 440px; }
  .story-copy > p:not(.story-eyebrow):not(.story-signature) { font-size: 16px; }
  .story-copy .story-signature { font-size: 32px; margin-top: 22px; }
  .story-values { grid-template-columns: 1fr; gap: clamp(40px, 10vw, 56px); padding: clamp(48px, 12vw, 72px) 0; }
  .story-value { padding: 24px 8px; }
  .story-value + .story-value { border-left: 0; border-top: 1px solid var(--line); }
  .story-value-icon { width: 58px; height: 58px; margin-bottom: 12px; }
  .story-value h3 { font-size: 30px; }
  .story-value p { font-size: 16px; max-width: 290px; margin: auto; }
  .story-invitation { padding: 33px 0; }
  .story-invitation-inner { padding-inline: 24px; flex-direction: column; align-items: flex-start; gap: 25px; }
  .story-invitation h2 { font-size: 45px; max-width: 440px; }
  .story-invitation p { line-height: 1.8; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .story-button { transition: none; } }