/* ============================================================
   Perlas Atelier — page styles (Story, Process, Sizing, folio bits)
   Ported from the React prototype so the narrative pages render
   with their full design, not as flat text. Layers on perlas.css.
   ============================================================ */

/* ---------- FOLIO POLICY BITS (shipping, materials, care) ---------- */
.folio-mail {
  color: var(--navy-700);
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 1px;
  text-decoration: none;
  transition: color var(--dur-2) var(--ease-soft), border-color var(--dur-2) var(--ease-soft);
}
.folio-mail:hover { color: var(--accent-hover); border-color: var(--accent-hover); }

.folio-divider { margin: var(--space-9) 0 var(--space-7); }

/* Quiet bullet list within a chapter body (styles plain <ul> in folio bodies too) */
.folio-list,
.folio-body ul {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
}
.folio-list li,
.folio-body ul li {
  position: relative;
  padding-left: var(--space-5);
  margin-top: var(--space-2);
  line-height: 1.65;
}
.folio-list li::before,
.folio-body ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.7em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sand-500);
}

/* Cost / spec rows (shipping rates, sizing tables) */
.folio-rates {
  margin-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.folio-rates__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.folio-rates__row span:first-child { color: var(--ink-700); }
.folio-rates__row span:last-child {
  font-family: var(--sans-heading);
  font-weight: 500;
  color: var(--navy-700);
  font-variant-numeric: tabular-nums;
}
.folio-rates__row--free span:last-child { color: var(--lustre-champagne-ink); }

.folio-fineprint {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--cream-050);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-500);
  max-width: 62ch;
}

/* Make a plain editor <blockquote> read as a centred pull-quote inside a folio body */
.folio-body blockquote {
  margin: var(--space-8) auto;
  max-width: 28ch;
  text-align: center;
  border: none;
  padding: 0;
}
.folio-body blockquote p {
  font-family: var(--sans-heading);
  font-weight: 200;
  font-size: clamp(24px, 3.4vw, 42px);
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--navy-700);
  margin: 0;
}

/* ---------- PROCESS CLOSING STATEMENT ---------- */
.statement { text-align: center; }
.statement__inner { max-width: 760px; margin: 0 auto; }
.statement__line {
  font-family: var(--sans-heading);
  font-weight: 200;
  font-size: clamp(30px, 4.6vw, 60px);
  line-height: 1.18;
  letter-spacing: var(--ls-tight);
  color: var(--navy-700);
  margin: var(--space-5) 0 0;
  text-wrap: balance;
}
.statement__line .accent {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: 1.12em;
  color: var(--lustre-champagne-ink);
}

/* ============================================================
   STORY — founder narrative (long-form scrolling page)
   ============================================================ */
.story { overflow: hidden; }
.story__hero {
  padding: clamp(88px, 13vh, 168px) 0 clamp(40px, 6vw, 80px);
  position: relative;
}
.story-statement {
  font-family: var(--sans-heading);
  font-weight: 200;
  font-size: clamp(34px, 5.6vw, 76px);
  line-height: 1.06;
  letter-spacing: var(--ls-tight);
  color: var(--navy-700);
  max-width: 15ch;
  margin: var(--space-5) 0 0;
  text-wrap: balance;
}
.story-statement .accent {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: 1.15em;
  letter-spacing: 0;
  color: var(--lustre-champagne-ink);
}

.story-section { padding: clamp(56px, 9vw, 128px) 0; position: relative; }
.story-section--bordered { border-top: 1px solid var(--border); }
.story-section--tint {
  background: radial-gradient(125% 110% at 28% 22%, var(--cream-050) 0%, var(--sand-100) 55%, var(--sand-300) 120%);
  border-top: 1px solid var(--border);
}

.story-prose { max-width: 60ch; }
.story-prose.is-centered { margin-left: auto; margin-right: auto; }
.story-prose p {
  font-family: var(--sans-body);
  font-size: clamp(17px, 1.2vw, 19px);
  line-height: 1.86;
  color: var(--ink-700);
  margin: 0 0 var(--space-5);
}
.story-prose p:last-child { margin-bottom: 0; }
.story-lede {
  font-weight: 300;
  font-size: clamp(20px, 2vw, 25px) !important;
  line-height: 1.6 !important;
  color: var(--navy-700) !important;
}

.story-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}
.story-head .rule { flex: 1; height: 1px; background: var(--border); }

.story-quote {
  margin: 0 auto;
  max-width: 24ch;
  text-align: center;
  text-wrap: balance;
}
.story-quote__mark {
  font-family: var(--serif-display);
  font-size: clamp(64px, 9vw, 120px);
  line-height: 0.5;
  color: var(--sand-300);
  display: block;
  margin-bottom: var(--space-3);
  height: 0.5em;
}
.story-quote p {
  font-family: var(--sans-heading);
  font-weight: 200;
  font-size: clamp(26px, 3.7vw, 48px);
  line-height: 1.28;
  letter-spacing: -0.012em;
  color: var(--navy-700);
  margin: 0;
}
.story-quote--gold p { color: var(--lustre-champagne-ink); }
.story-quote cite {
  display: block;
  margin-top: var(--space-5);
  font-family: var(--sans-heading);
  font-style: normal;
  font-size: 11px;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-3);
}

.story-born {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(48px, 8vw, 104px);
  line-height: 0.95;
  color: var(--navy-700);
  text-align: center;
  margin: 0;
}

.emblem-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto clamp(40px, 6vw, 72px);
  max-width: 560px;
}
.emblem-panel {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 7vw, 88px);
  border-radius: var(--radius-xl);
  background: radial-gradient(120% 100% at 30% 30%, var(--cream-050) 0%, var(--sand-300) 100%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2);
}
.emblem-panel img { width: min(280px, 64%); height: auto; display: block; }
.emblem-figure figcaption {
  margin-top: var(--space-5);
  font-family: var(--sans-heading);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-3);
  text-align: center;
}

/* Placeholder photo frame — swap in real photography later */
.photo-frame {
  position: relative;
  background:
    radial-gradient(80% 70% at 32% 24%, var(--cream-050) 0%, transparent 60%),
    linear-gradient(160deg, var(--sand-100) 0%, var(--cream-200) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.photo-frame__cap {
  position: relative;
  z-index: 1;
  margin: var(--space-5);
  font-family: var(--sans-body);
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sand-700);
  max-width: 26ch;
}
.photo-frame__cap::before {
  content: "Photograph";
  display: block;
  font-family: var(--sans-heading);
  font-style: normal;
  font-size: 9px;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-4);
  margin-bottom: 6px;
}
.photo-frame.is-portrait { aspect-ratio: 4 / 5; }
.photo-frame.is-wide { aspect-ratio: 16 / 10; }
.photo-frame.is-tall { aspect-ratio: 3 / 4; }

.story-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.story-split.is-reverse > .story-split__media { order: -1; }
.story-split__text { max-width: 52ch; }
@media (max-width: 820px) {
  .story-split { grid-template-columns: 1fr; gap: var(--space-7); }
  .story-split.is-reverse > .story-split__media { order: 0; }
}

.story-meaning-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}
@media (max-width: 820px) {
  .story-meaning-grid { grid-template-columns: 1fr; gap: var(--space-7); }
}

.story-cta {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-8);
}

/* ---------- SIZING DIAGRAMS ---------- */
.sizing-diagrams {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0 var(--space-3);
}
.sizing-diagram { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sizing-diagram svg { display: block; width: 100%; max-width: 156px; height: auto; }
.sizing-diagram__label {
  font-family: var(--sans-heading);
  font-size: 13px;
  color: var(--navy-700);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: center;
}
.sizing-diagram__len {
  font-family: var(--sans-body);
  font-size: 12px;
  color: var(--ink-500);
  font-style: italic;
  margin-top: 3px;
  text-align: center;
}

/* contact details column next to the form */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 760px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.contact-aside .eyebrow--muted { display: block; margin-bottom: 8px; }
.contact-aside .eyebrow--muted + p { margin: 0 0 var(--space-6); }

/* ---------- COLLECTION STATEMENT (Pieces / shop intro) ---------- */
.collection-statement {
  margin-top: var(--space-7);
  max-width: 60ch;
}
.collection-statement p {
  font-family: var(--sans-body);
  font-size: 17px;
  line-height: 1.8;
  color: var(--ink-700);
  margin: 0 0 var(--space-4);
}
.collection-statement p:last-child { margin-bottom: 0; }
.collection-statement__close {
  font-family: var(--sans-heading) !important;
  font-weight: 300;
  font-size: clamp(20px, 2.2vw, 26px) !important;
  line-height: 1.5 !important;
  color: var(--navy-700) !important;
  padding-top: var(--space-5);
  margin-top: var(--space-5) !important;
  border-top: 1px solid var(--border);
  max-width: 28ch;
}