/* ==========================================================================
   Shared section furniture

   One header component for every section on the merged home page, so the eight
   rebuilt blocks read as one page rather than eight ports.

   Carroll's structure and scale, kept exactly:
     a small italic name line over a large uppercase label
     name  clamp(1.0625rem, 0.8146rem + 1.0604vw, 1.875rem)   17px to 30px
     label clamp(2rem,      1.4662rem + 2.2838vw, 3.75rem)    32px to 60px
     60px of air under the block
   Those two clamps are lifted verbatim from their stylesheet.

   Two deliberate departures, both client direction:

   1. TYPOGRAPHY IS OURS. Theirs is Compass Serif; this is Newsreader via
      var(--yp-serif). That changes one thing structurally: their label carries
      letter-spacing:-1px because Compass Serif sets tight in caps. Newsreader
      in caps needs the opposite, so the label takes the brand's positive
      display tracking. Copying the -1px would jam the letterforms together.

   2. LEFT ALIGNED. Theirs is centred throughout. Ours is not, anywhere.
   ========================================================================== */

.yp-shead {
  position: relative;
  padding-bottom: clamp(30px, 3.2vw, 60px);
  text-align: left;
}

/* The name line. Italic is Carroll's, and it earns its place here: it is the
   only italic on the page, so it reads as a signature rather than as emphasis. */
.yp-shead-name {
  margin: 0 0 0.32em;
  color: var(--yp-ink);
  font-family: var(--yp-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.0625rem, 0.8146rem + 1.0604vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* The label. Negative right margin cancels the trailing letter-space, which
   otherwise leaves a tracked line sitting a fraction right of its own left
   edge when it wraps. */
.yp-shead-label {
  margin: 0 calc(-1 * var(--yp-track-display, 0.14em)) 0 0;
  color: var(--yp-ink);
  font-family: var(--yp-serif);
  font-weight: var(--yp-w-section, 540);
  font-size: clamp(2rem, 1.4662rem + 2.2838vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: var(--yp-track-display, 0.14em);
  text-transform: uppercase;
  text-wrap: balance;
}

/* Carroll's .ms-smt, the one-line standfirst under some headers. */
.yp-shead-note {
  margin: 14px 0 0;
  max-width: 54ch;
  color: rgb(var(--yp-ink-rgb) / 0.74);
  font-family: var(--yp-serif);
  font-size: clamp(0.9375rem, 0.3vw + 0.85rem, 1.125rem);
  line-height: 1.6;
}

/* ---- section rhythm ------------------------------------------------------
   Grounds alternate Shell and Sand down the page. Assigned on the section
   itself rather than by :nth-child so reordering the page cannot silently put
   two identical grounds against each other. */

.yp-sec {
  position: relative;
  padding: clamp(64px, 7vw, 118px) 0;
}

.yp-sec-shell { background: var(--yp-shell); }
.yp-sec-sand  { background: var(--yp-sand); }
.yp-sec-ink   { background: var(--yp-ink); }

.yp-sec-ink .yp-shead-name,
.yp-sec-ink .yp-shead-label { color: var(--yp-white); }
.yp-sec-ink .yp-shead-note  { color: rgb(var(--yp-white-rgb) / 0.76); }

/* Matches the header and hero gutter, so every left edge on the page stacks. */
.yp-wrap {
  width: 100%;
  max-width: 1460px;
  margin: 0 auto;
  padding: 0 30px;
}

/* Same breakpoint as the header and the hero, so every left edge on the
   page stacks on one vertical at every width. */
@media (max-width: 540px) {
  .yp-wrap { padding: 0 16px; }
}

/* ---- reveal --------------------------------------------------------------
   Carroll's exact numbers: opacity .3s ease, transform .6s on their easing,
   from translateY(20%), staggered in 0.1s steps from 0.3s.

   The visibility contract: the default below is VISIBLE. .yp-anim is added by
   sections.js only when JS is actually running, and it is what applies the
   hidden resting state. .yp-in then plays the reveal. Never invert this: a
   JS-gated default ships a blank section in any context where transitions do
   not run, and the reader has no way to recover it. */

.yp-rise {
  transition: opacity 0.3s ease,
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.yp-anim .yp-rise { opacity: 0; transform: translateY(20%); }
.yp-anim.yp-in .yp-rise { opacity: 1; transform: translateY(0); }

.yp-anim .yp-rise:nth-child(1) { transition-delay: 0.30s; }
.yp-anim .yp-rise:nth-child(2) { transition-delay: 0.40s; }
.yp-anim .yp-rise:nth-child(3) { transition-delay: 0.50s; }
.yp-anim .yp-rise:nth-child(4) { transition-delay: 0.60s; }
.yp-anim .yp-rise:nth-child(5) { transition-delay: 0.70s; }
.yp-anim .yp-rise:nth-child(6) { transition-delay: 0.80s; }

@media (prefers-reduced-motion: reduce) {
  .yp-rise,
  .yp-anim .yp-rise,
  .yp-anim.yp-in .yp-rise {
    opacity: 1;
    transform: none;
    transition: none;
  }
}