/* Ethos (option 1, "Classic") — the home page's composition carried over:
   hero (Our Story + Franklin | the philosopher photograph), the story (first line 38.2 | text 61.8),
   the Order Symbol explained, the mission (text 61.8 | picture 38.2), the mottos, closing.
   The only page where the symbol appears beyond the brand mark: here its meaning is explained. */

/* ---------- hero: text 38.2 | photo 61.8 ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: var(--s-4) var(--split-gap);
  align-items: center; padding-top: var(--s-5);
}
.hero h1 { line-height: 1.08; margin: 0 0 var(--s-5); } /* size: the one h1 size (style.css --h1) */
.hero .quote { margin-bottom: var(--s-5); }
.hero-media { aspect-ratio: 1.272 / 1; }
.hero-media img { object-position: 50% 18%; }

/* ---------- story: first line 38.2 | text 61.8 ---------- */
.story, .symbol-split, .mottos-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: var(--s-4) var(--split-gap); align-items: start;
}
.story { /* section rule, stopped at the content edge like every other rule */
  padding-top: var(--s-4);
  background: linear-gradient(var(--rule-strong), var(--rule-strong)) no-repeat var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px;
}
.story-lede { font-size: var(--t-3); line-height: 1.2; margin: 0; text-wrap: balance; } /* no two-word runt at tablet */
.story-text p { max-width: 32em; }
.story-text p:last-child { margin-bottom: 0; color: var(--cream); }

/* ---------- the Order Symbol and its legend ---------- */
.symbol-section { scroll-margin-top: var(--s-4); }
/* the whole symbol, then its two parts: 377 / 144 on desktop, 233 / 144 on phones (φ² and φ), all hung
   from the column's left edge */
.diagram .sym-lg { width: min(100%, 377px); margin: 0 0 var(--s-5); }
/* the legend: two keys side by side. Each key is the whole symbol in quiet line with the part being
   explained in orange, drawn as a true miniature (the symbol's own stroke, scaled) and large enough
   (144px) that the three waves still read as waves. */
.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--gap); margin: 0; padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.legend dt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); font: 500 var(--t-label)/1.6 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.legend dd { margin: var(--s-1) 0 0; font-size: var(--t-0h); line-height: 1.5; color: var(--cream); text-wrap: balance; } /* no lone 'Love' / 'Courage' */
.sym-key { width: 100%; max-width: 144px; height: auto; aspect-ratio: 1 / 1; flex: none; color: var(--text-2); }
.sym-key .sym-line { stroke-width: 6; }
.sym-key .sym-line * { vector-effect: none; }
.sym-key .sym-waves.is-accent { stroke: var(--orange); }

/* quote attributions: the dash hangs, so a wrapped line starts under the name, not under the dash */
.quote figcaption { position: relative; padding-left: var(--s-4); text-wrap: balance; }
.quote figcaption::before { position: absolute; left: 0; top: .8em; margin: 0; }

/* ---------- mission: text 61.8 | picture 38.2 ---------- */
.pair { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: var(--s-5) var(--split-gap); align-items: center; }
.pair-media { aspect-ratio: 1 / 1; }
.pair-text h2 { margin-bottom: var(--s-4); }

/* ---------- mottos: intro 38.2 | the five mottos 61.8 ---------- */
.mottos-intro { font-size: var(--t-1); max-width: 22em; margin: 0; }
.mottos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.mottos li { display: flex; align-items: baseline; gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--rule); font-size: var(--t-3); line-height: 1.2; color: var(--cream); }

/* ---------- closing: two paragraphs, so the split flips to headline 38.2 | text 61.8 (like the story at
   the top of the page); the wider measure keeps the text short beside the headline ---------- */
@media (min-width: 1000px) { .closing-long { grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); } }
.closing-long .closing-aside > p { max-width: 34em; }

/* ---------- tablet ---------- */
@media (max-width: 999px) {
  .hero, .story, .symbol-split, .pair, .mottos-split { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-top: var(--s-4); }
  .hero-text { max-width: 34em; }
  .diagram { max-width: 430px; }
  .pair-media { max-width: 520px; }
}

/* ---------- mobile ---------- */
@media (max-width: 759px) {
  .closing-aside .btn { width: 100%; } /* the last action, full width like the first */
  .hero h1 { margin-bottom: var(--s-4); }
  .hero .quote { margin-bottom: var(--s-4); }
  .hero .actions .btn { flex: 1 1 auto; }
  .story-lede { font-size: var(--t-2); }
  .mottos li { font-size: var(--t-1); gap: var(--s-3); padding-block: var(--s-2); }
  .mottos-intro { font-size: var(--t-0h); }
  .diagram .sym-lg { width: min(100%, 233px); }
}