/* Design (option 1, "Classic") — the home page's composition carried over:
   hero (title + the three features | the sealed-bar photograph), the three features as alternating
   picture 61.8 | text 38.2 rows (like the home page's process), a quote, the principles on the shared
   stone tiles (style.css: .tiles / .tile-card), closing. */

/* ---------- 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-4); } /* size: the one h1 size (style.css --h1) */
.hero-media { aspect-ratio: 1.272 / 1; }
/* the hero shows the finished, sealed bar beside its brass seal (finish-seal: the design-seal photograph cut out
   onto the page charcoal); the golden-ratio bar is left to feature 01. Feature 03 shows the same photograph on its
   stone tile, whole and centred (feat-seal), as Joe asked. */
.hero-index { list-style: none; margin: 0 0 var(--s-5); padding: 0; border-top: 1px solid var(--rule); }
.hero-index li { border-bottom: 1px solid var(--rule); }
.hero-index a {
  display: flex; align-items: baseline; gap: var(--s-3); min-height: 55px; padding-block: var(--s-2);
  font-size: var(--t-1); line-height: 1.3; color: var(--cream); text-decoration: none;
}
.hero-index a::after { content: "\2193"; margin-left: auto; font: 400 var(--t-0)/1 var(--sans); color: var(--orange); transition: transform .2s ease; }
.hero-index a:hover { text-decoration: underline 1px var(--orange); text-underline-offset: .22em; }
.hero-index a:hover::after { transform: translateY(3px); }

/* ---------- the features: picture and text alternating ---------- */
.feature {
  display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: var(--s-4) var(--split-gap);
  align-items: center; scroll-margin-top: var(--s-4);
}
.feature + .feature { margin-top: var(--s-6); }
.feature:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); }
.feature:nth-of-type(even) .feature-media { order: 2; }
.feature-media { aspect-ratio: 1.618 / 1; }
.feature-media img { transform: none; } /* feat-* images are cropped to their contents (+ margin) at 1.618:1, shown whole (contain): nothing is ever cut */
.feature-text .num { display: block; margin-bottom: var(--s-2); }
.feature-text h2 { margin-bottom: var(--s-3); }
.feature-text p { max-width: 30em; }
.feature-text p:last-child { margin-bottom: 0; }
.feature-lede { font-size: var(--t-2); line-height: 1.38; color: var(--cream); }

/* ---------- the quote between features and principles ---------- */
.quote-block {
  margin-top: var(--section); padding-block: var(--s-6); text-align: center;
  background-image: linear-gradient(var(--rule-strong), var(--rule-strong));
  background-repeat: no-repeat;
  background-size: calc(100% - 2 * var(--gutter)) 1px;
  background-position: var(--gutter) 0;
}
.quote-block .quote { max-width: 34em; margin-inline: auto; }
.quote-block + .section { margin-top: 0; }  /* the next section's rule closes the quote */
#principles { scroll-margin-top: var(--s-4); }

/* ---------- tablet ---------- */
@media (max-width: 999px) {
  .hero, .feature, .feature:nth-of-type(even) { grid-template-columns: minmax(0, 1fr); }
  .feature:nth-of-type(even) .feature-media { order: 0; }
  .hero { padding-top: var(--s-4); }
  .hero-text { max-width: 34em; }
  /* stacked under the text, the hero is a golden rectangle: the sealed bar fills it, with no empty charcoal band
     above and below (the object sits inside the master's centre 1.618:1 band, so nothing is cropped) */
  .hero-media { aspect-ratio: 1.618 / 1; }
}
@media (min-width: 760px) and (max-width: 999px) {
  .tiles { column-gap: var(--s-3); } /* "Always Reach Higher" fits one line, so the three principles' text starts level */
}

/* ---------- mobile ---------- */
@media (max-width: 759px) {
  .closing-aside .btn { width: 100%; } /* the last action, full width like the first */
  .hero-index { margin-bottom: var(--s-4); }
  .hero-index a { font-size: var(--t-0h); }
  .hero .actions .btn { flex: 1 1 auto; }
  .feature + .feature { margin-top: var(--s-5); }
  .feature-lede { font-size: var(--t-1); }
  .quote-block { padding-block: var(--s-5); }
}