/* ============================================================
   Morning Mob — founder story view (merged into the storefront).
   Editorial story page: warm archival floor, EB Garamond italics,
   Helvetica tracked labels, hairline rules, 0px corners.
   Nav + footer come from the app shell; this file styles content only.
   All classes are .fs-* to avoid collision with commerce chrome.
   ============================================================ */
:root {
  --paper: #f4f0e8;        /* warm editorial cream, archival family */
  --paper-tint: #ece6db;   /* empty photo zones / nested warm */
  --ink-soft: #141210;     /* near-black display ink */
}

.fs-root { background: var(--paper); }
.fs-root ::selection { background: var(--ink); color: var(--paper); }

/* ---------- Section scaffold ---------- */
.fs-split { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 86px); }
.fs-split--reverse { direction: rtl; }
.fs-split--reverse > * { direction: ltr; }

.fs-panel {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(48px, 6vw, 104px) clamp(28px, 6vw, 96px);
}

/* ---------- Photo zones (image-slot) ---------- */
.fs-photo {
  position: relative; min-height: 60vh; background: var(--paper-tint);
  border-left: 1px solid var(--hairline);
}
.fs-split--reverse .fs-photo { border-left: none; border-right: 1px solid var(--hairline); }
.fs-photo image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Type ---------- */
.fs-eyebrow { font-family: var(--font-sans); font-size: 11px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; color: var(--tobacco); }
.fs-kicker  { font-family: var(--font-sans); font-size: 11px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); }
.fs-display {
  font-family: var(--font-serif); font-weight: 400; color: var(--ink-soft);
  letter-spacing: -0.5px; line-height: 1.04; margin: 0;
  font-size: clamp(42px, 5.6vw, 80px); text-wrap: balance;
}
.fs-display em { font-style: italic; }
.fs-subhead {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  color: var(--body-strong); line-height: 1.25; margin: 0;
  font-size: clamp(26px, 3vw, 40px); text-wrap: balance;
}
.fs-lead {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  color: var(--body-strong); line-height: 1.5; margin: 0;
  font-size: clamp(18px, 1.6vw, 22px); max-width: 30ch; text-wrap: pretty;
}
.fs-body {
  font-family: var(--font-sans); font-weight: 300; color: var(--body);
  font-size: 15px; line-height: 1.85; max-width: 46ch; text-wrap: pretty;
}
.fs-sig { font-family: var(--font-serif); font-style: italic; font-size: 26px; color: var(--ink-soft); line-height: 1; white-space: nowrap; }

/* ---------- Centered pull-quote ---------- */
.fs-quote { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: clamp(72px, 11vw, 152px) clamp(24px, 6vw, 80px); text-align: center; }
.fs-quote__text {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  color: var(--ink-soft); line-height: 1.3; margin: 0 auto; max-width: 18ch;
  font-size: clamp(30px, 4.2vw, 58px); letter-spacing: -0.5px; text-wrap: balance;
}
.fs-quote__by { font-family: var(--font-sans); font-size: 11px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); margin-top: clamp(28px, 4vw, 48px); }

/* ---------- Values ---------- */
.fs-values { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
.fs-value { padding: clamp(28px, 3vw, 44px) clamp(24px, 2.6vw, 40px); border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.fs-value__num { font-family: var(--font-serif); font-style: italic; font-size: 24px; color: var(--tobacco); line-height: 1; }
.fs-value__title { font-family: var(--font-serif); font-weight: 400; color: var(--ink-soft); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.2; margin: 18px 0 10px; }
.fs-value__desc { font-family: var(--font-sans); font-weight: 300; color: var(--body); font-size: 13.5px; line-height: 1.7; max-width: 34ch; text-wrap: pretty; }

/* ---------- Editable affordance ---------- */
.fs-root [contenteditable] { outline: none; transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.fs-root [contenteditable]:hover { background: rgba(20,18,16,0.035); box-shadow: 0 0 0 1px rgba(20,18,16,0.07); }
.fs-root [contenteditable]:focus { background: color-mix(in srgb, var(--paper) 40%, #fff); box-shadow: 0 0 0 1px var(--hairline-strong); }

/* ---------- Reveal animation ---------- */
.fs-reveal { opacity: 0; transform: translateY(22px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
.fs-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fs-reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .fs-split, .fs-split--reverse { grid-template-columns: 1fr; direction: ltr; min-height: auto; }
  .fs-photo { min-height: 78vw; order: -1; border-left: none !important; border-right: none !important; border-bottom: 1px solid var(--hairline); }
  .fs-split--reverse .fs-photo { order: -1; }
  .fs-panel { padding: clamp(44px, 12vw, 72px) clamp(24px, 7vw, 44px); }
  .fs-values { grid-template-columns: 1fr; }
}