/* The Mission — editorial, slow, generous. */
.mission-page .nav { background: transparent; }
.ms-narrow { max-width: 62rem; margin-inline: 0; }

.ms-hero { position: relative; min-height: 92svh; display: grid; align-items: end; padding: calc(var(--nav-h) + 60px) 0 clamp(56px, 12vh, 140px); }
.ms-hero-in { display: grid; gap: 0; }
.ms-mark { width: clamp(56px, 6vw, 84px); height: auto; margin-bottom: clamp(26px, 5vh, 52px); }
.ms-hero h1 { font-size: clamp(2.9rem, 9vw, 9.4rem); letter-spacing: -0.035em; line-height: 0.96; max-width: 13em; }
.ms-sub { margin-top: clamp(24px, 4vh, 44px); max-width: 30rem; font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2.2vw, 1.9rem); line-height: 1.3; color: var(--bone-2); }

.ms-story { padding: clamp(80px, 14vh, 180px) 0; border-top: 1px solid var(--hair); }
.ms-big { font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem, 4vw, 3.8rem); line-height: 1.14; letter-spacing: -0.02em; max-width: 24em; margin-bottom: 1em; }
.ms-body { font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.75; color: var(--bone-2); max-width: 40rem; }
.ms-story .ms-body { margin-top: clamp(32px, 6vh, 64px); }

.ms-mission { padding: clamp(96px, 18vh, 220px) 0; background: var(--char); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.ms-tag { font-family: var(--sans); font-size: 1rem; font-weight: 400; letter-spacing: 0; color: var(--brass); margin-bottom: 28px; }
.ms-quote { font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem, 5.6vw, 5.6rem); line-height: 1.06; letter-spacing: -0.028em; max-width: 16em; }

.ms-beliefs { padding: clamp(96px, 16vh, 200px) 0; }
.ms-b-head { display: grid; gap: 14px; margin-bottom: clamp(44px, 8vh, 96px); }
.ms-b-head h2 { font-size: clamp(2.6rem, 7vw, 6.4rem); letter-spacing: -0.03em; }
.ms-b-head p { color: var(--bone-2); font-size: 1.15rem; }
.ms-b-grid { display: grid; gap: 56px 28px; }
.ms-b-img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--char); margin-bottom: 22px; }
.ms-b-img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.82); transition: transform 1.6s var(--ease), filter 0.8s; }
.ms-b-grid article:hover .ms-b-img img { transform: scale(1.04); filter: brightness(1); }
.ms-b-grid h3 { font-size: clamp(1.8rem, 2.4vw, 2.4rem); letter-spacing: -0.02em; margin-bottom: 12px; }
.ms-b-grid p { color: var(--bone-2); max-width: 24rem; }
@media (min-width: 700px) { .ms-b-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ms-b-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ms-quiet { padding: clamp(80px, 14vh, 170px) 0; background: var(--char); border-top: 1px solid var(--hair); }
.ms-quiet h2 { font-size: clamp(2.6rem, 7vw, 6.4rem); letter-spacing: -0.03em; margin-bottom: 30px; }
.ms-quiet .link { margin-top: 30px; }

.ms-found { padding: clamp(80px, 14vh, 170px) 0; }
.ms-f-box { border: 1px solid var(--hair-strong); padding: clamp(36px, 7vw, 96px) clamp(24px, 6vw, 96px); text-align: center; display: grid; justify-items: center; gap: 0; }
.ms-f-mark { width: 54px; height: auto; margin-bottom: 26px; }
.ms-f-status { display: inline-block; font-size: 0.95rem; color: var(--brass); padding: 6px 16px; border: 1px solid var(--hair-strong); margin-bottom: 26px; }
.ms-f-box h2 { font-size: clamp(2.6rem, 7vw, 6rem); letter-spacing: -0.03em; margin-bottom: 26px; }
.ms-f-box p:not(.ms-f-status):not(.ms-f-fine) { max-width: 38rem; font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.7; color: var(--bone-2); }
.ms-f-fine { margin-top: 26px; max-width: 34rem; font-size: 0.92rem; color: var(--bone-3); }

.ms-flag { padding: clamp(80px, 14vh, 170px) 0 clamp(96px, 16vh, 200px); border-top: 1px solid var(--hair); }
.ms-flag h2 { font-size: clamp(2.4rem, 6vw, 5.4rem); letter-spacing: -0.03em; margin-bottom: 26px; max-width: 14em; }
.ms-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.ms-close { margin-top: clamp(64px, 12vh, 140px); font-family: var(--serif); font-style: italic; font-size: clamp(1.8rem, 3.6vw, 3.2rem); color: var(--brass); }

/* ---------- The name ---------- */
.ms-name { padding: clamp(96px, 16vh, 200px) 0; border-top: 1px solid var(--hair); }
.ms-name-big { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 4.6vw, 4.4rem); line-height: 1.1; letter-spacing: -0.025em; max-width: 17em; margin-bottom: clamp(28px, 5vh, 52px); }

/* ---------- A note from the founder ---------- */
.ms-note { padding: clamp(96px, 16vh, 200px) 0; background: var(--char); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.ms-note-grid { display: grid; gap: clamp(28px, 5vh, 56px); }
.ms-note-grid > .ms-tag { margin-bottom: 0; }
.ms-letter { max-width: 40rem; }
.ms-letter p { font-family: var(--serif); font-weight: 300; font-size: clamp(1.3rem, 1.9vw, 1.75rem); line-height: 1.5; color: var(--bone); margin-bottom: 1.3em; }
.ms-letter p.ms-last { margin-top: 1.8em; font-style: italic; font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1.3; color: var(--brass); }
.ms-letter .ms-sig { display: grid; gap: 4px; margin: 2.4em 0 0; }
.ms-sig-role { font-family: var(--sans); font-size: 0.95rem; color: var(--bone-2); }
@media (min-width: 1000px) {
  .ms-note-grid { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 6vw; align-items: start; }
  .ms-note-grid > .ms-tag { position: sticky; top: calc(var(--nav-h) + 32px); }
}

/* ---------- Full-bleed images ---------- */
.ms-fig { margin: 0; position: relative; height: clamp(320px, 62vh, 720px); overflow: hidden; background: var(--char); }
.ms-fig img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.72); }
.ms-fig::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(11, 9, 8, 0.5), rgba(11, 9, 8, 0) 30%, rgba(11, 9, 8, 0) 70%, rgba(11, 9, 8, 0.5)); }

/* ---------- Signature ---------- */
@font-face { font-family: 'Signature'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/signature.woff2') format('woff2'); }
.ms-sig-hand { font-family: 'Signature', 'Snell Roundhand', cursive; font-size: clamp(3.6rem, 7vw, 5.6rem); line-height: 1; color: var(--bone); transform: rotate(-3deg); transform-origin: left bottom; display: block; margin: 0 0 6px -0.04em; }
.ms-sig-name { font-family: var(--sans); font-size: 0.95rem; font-weight: 400; letter-spacing: 0; color: var(--bone-2); }