/* Home page ("Inscription"). Shapes cut from the A: streamer rules, swelled
   rules, the A's diagonal cut. Tokens come from style.css. */
.home {
  /* The swelled rule from the section dividers, stood upright. */
  --vswell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 1000' preserveAspectRatio='none'%3E%3Cpath d='M5 0Q-.5 500 5 1000Q10.5 500 5 0Z'/%3E%3C/svg%3E");
}
.home .wrap { max-width: 1180px; margin: 0 auto; padding-inline: clamp(16px, 5vw, 56px); }
.home p { margin: 0 0 1em; max-width: 62ch; }
.home img { max-width: 100%; height: auto; display: block; }

.home .label { font: 400 0.74rem/1.4 var(--font-cut); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-ink-muted); margin: 0 0 18px; }

/* Hero: the letter stands at full height beside the text */
.home .i-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: end; padding-top: clamp(36px, 7vw, 88px); }
.home .i-hero > * { min-width: 0; }
/* No bottom padding: the button and dates sit level with the foot of the A */
.home .hero-text { padding-bottom: 0; }
.home h1 { margin: 0 0 30px; font-weight: 400; color: var(--color-ink); }
.home h1 .l1 { display: block; font: 400 clamp(1.95rem, 4.4vw, 3.6rem)/1.08 var(--font-cut); letter-spacing: 0.05em; text-wrap: balance; }
.home h1 .l2 { display: block; font: italic 300 clamp(2.35rem, 5.8vw, 4.9rem)/1.02 var(--font-serif); letter-spacing: -0.015em; margin-top: 0.12em; color: var(--color-accent-deep); }
.home .lede { font-size: 1.16rem; max-width: 52ch; }
/* Keep the circled phrase on one line so the hand-drawn circle wraps it cleanly. */
.home .nowrap { white-space: nowrap; }
/* Extra leading in the intro so the hand-drawn circle around one phrase sits
   in the space between lines instead of crossing them. */
.home .lede { line-height: 2.05; }
.home #mark-holistic { margin: 0 0.6em; }
.home .hero-mark { justify-self: end; width: 100%; max-width: 520px; aspect-ratio: 1345 / 1466; background: var(--color-ink); -webkit-mask: url(/assets/logo-glyph.svg) right bottom / contain no-repeat; mask: url(/assets/logo-glyph.svg) right bottom / contain no-repeat; }

.home .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 30px; }
/* Hero: Apply with the dates right under it */
.home .actions--stacked { flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 44px; }
/* The deadline, right under the button where the eye already is */
.home .apply-note { margin: -6px 0 0; max-width: none; font-size: 1rem; line-height: 1.55; color: var(--color-ink); }

/* Cards side by side, split by upright swelled rules (Oct 2026; they were hairline stems on serif feet) */
.home .stones { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); border-bottom: 1px solid var(--color-ink); }
.home .stones > * { position: relative; min-width: 0; padding: 20px clamp(14px, 2.2vw, 28px) 26px; }
.home .stones > *:first-child { padding-left: 0; }
.home .stones > * + *::before { content: ""; position: absolute; left: -2px; top: 16px; bottom: 16px; width: 4px; background: var(--color-ink); -webkit-mask: var(--vswell) 0 0 / 100% 100% no-repeat; mask: var(--vswell) 0 0 / 100% 100% no-repeat; }
.home .facts { --n: 5; border-top: 1px solid var(--color-ink); }
.home .facts dl { margin: 0; }
.home .facts dt { font: 400 0.7rem/1.4 var(--font-cut); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-ink-muted); margin-bottom: 6px; }
.home .facts dd { margin: 0; font-size: 1.02rem; line-height: 1.4; color: var(--color-ink); }

/* Sections open on a swelled rule over a hairline (--streamers); quotes get a rule that thins out to the right (--quote-rule) */
.home section { padding-top: clamp(64px, 10vw, 128px); scroll-margin-top: calc(var(--nav-height) + 16px); }
.home .open { display: grid; justify-items: end; gap: 3px; margin-bottom: clamp(26px, 4vw, 44px); }
.home .streamer { display: block; width: 42%; height: 3px; background: var(--color-rule-dark); -webkit-mask: var(--quote-rule) 0 0 / 100% 100% no-repeat; mask: var(--quote-rule) 0 0 / 100% 100% no-repeat; }
.home .open .streamer { width: 100%; height: 10px; background: var(--color-ink); -webkit-mask-image: var(--streamers); mask-image: var(--streamers); }
.home .open .streamer + .streamer { display: none; }
.home h2 { font: 400 clamp(1.5rem, 4vw, 3.1rem)/1.1 var(--font-cut); letter-spacing: 0.045em; color: var(--color-ink); margin: 0 0 24px; text-wrap: balance; }
.home .split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 5vw, 80px); }
.home .split > * { min-width: 0; }

/* Testimony: three quotes stepped like the three streamers */
.home .testimony { display: grid; gap: clamp(40px, 5vw, 60px); margin-top: 12px; }
/* Oct 2026: each quote box shrinks to its text, and the name sits at the box's lower right.
   (Out at the far right of the page it no longer read as belonging to its quote.) */
.home .testimony figure { margin: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-self: start; width: fit-content; max-width: 100%; }
.home .testimony figure > .streamer { grid-column: 1 / -1; margin-bottom: 22px; }
/* Stepped across the full width: first at the left edge, second centred, third at the right edge */
.home .testimony figure:nth-child(2) { justify-self: center; }
.home .testimony figure:nth-child(3) { justify-self: end; }
.home .testimony blockquote { margin: 0; font: italic 300 1.34rem/1.5 var(--font-serif); color: var(--color-ink); max-width: 40ch; }
.home .testimony figcaption { padding-top: 14px; text-align: right; margin-right: -0.2em; /* cancels the letter-spacing after the last letter */ font: 400 0.72rem/1.4 var(--font-cut); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-ink-muted); }

/* The three offerings stand as stones */
.home .offer { --n: 3; margin-top: clamp(36px, 5vw, 56px); }
/* Oct 2026: no rules around or between the cards; space alone splits them, so the timeline below is the only drawing in the block */
.home .offer { border-bottom: 0; }
.home .offer > * + *::before { display: none; }
.home .offer .num { font: 400 2.6rem/1 var(--font-cut); color: var(--color-ink); margin: 6px 0 14px; letter-spacing: 0.04em; }
.home .offer h3 { font: 400 1.05rem/1.3 var(--font-cut); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-ink); margin: 0 0 10px; }
.home .offer p { font-size: 1.02rem; margin-bottom: 18px; }
.home .offer .meta { font: 400 0.7rem/1.5 var(--font-cut); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-ink-muted); margin: 0; padding-top: 10px; border-top: 1px solid var(--color-rule-dark); }
.home .creed { font: italic 300 clamp(1.5rem, 3vw, 2.2rem)/1.35 var(--font-serif); color: var(--color-ink); margin: 8px 0 0; max-width: 24ch; }

.home .photo { margin: clamp(48px, 7vw, 88px) 0 0; }
/* In the first-cohort section the photo comes straight after the heading, then the quotes */
.home .photo--lead { margin: 8px 0 clamp(40px, 5vw, 60px); }
/* Cropped by 10% of its height: 6% off the top, 4% off the bottom */
.home .photo img { width: 100%; aspect-ratio: 2026 / 1367; object-fit: cover; object-position: 50% 60%; --c: clamp(34px, 8vw, 110px); clip-path: polygon(0 calc(var(--c) * 1.6), var(--c) 0, 100% 0, 100% 100%, 0 100%); filter: saturate(0.78) sepia(0.08); }
.home .photo figcaption { margin-top: 12px; font: 400 0.7rem/1.5 var(--font-cut); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-ink-muted); }

/* The year: a green post with a slanted top for the deadline, a green slab cut on the A's diagonal at both ends for the seminar,
   and the same slab, paler and fading out, for the fellowship that follows it */
.home .year { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 1.9fr); margin-top: 16px; }
.home .year > div { min-width: 0; }
.home .year .when { font: 400 0.74rem/1.4 var(--font-cut); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-ink-muted); padding-right: 12px; min-height: 2.8em; margin: 0; }
.home .year .mark { height: 52px; display: flex; align-items: flex-end; border-bottom: 1px solid var(--color-ink); }
.home .year .what { padding: 14px 16px 0 0; font-size: 1.04rem; line-height: 1.45; color: var(--color-ink); }
/* The deadline post keeps its words flush with it. The seminar's slab is symmetrical, so its date and label are each centred on it.
   The fellowship's date and label share one left edge: they sit in a grid track as wide as the wider of the two,
   pulled left of centre because the slab fades out to the right. */
.home .year > :nth-child(2) > :not(.mark) { text-align: center; padding-left: 12px; padding-right: 12px; }
.home .year > :nth-child(3) { display: grid; grid-template-columns: minmax(0, 0.55fr) fit-content(100%) minmax(0, 1.45fr); }
.home .year > :nth-child(3) > * { grid-column: 2; padding-left: 0; padding-right: 0; }
.home .year > :nth-child(3) > .mark { grid-column: 1 / -1; }
.home .m-day { width: 6px; height: 34px; background: var(--color-accent); clip-path: polygon(0 4px, 100% 0, 100% 100%, 0 100%); }
.home .m-month { width: 100%; height: 26px; background: var(--color-accent); clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 100%, 0 100%); }
.home .m-yearlong { width: 100%; height: 26px; background: linear-gradient(to right, rgba(47, 90, 69, 0.42), rgba(47, 90, 69, 0)); clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%); }

/* The timeline draws itself left to right when it scrolls into view: one sweep across all three marks,
   each column's span timed to its width (0.9 : 1.2 : 1.9 of 4.0, over 1.8s), and each column's words fading in as the sweep reaches them.
   Only when JS has added .will-draw, so without JS or with reduced motion the timeline is simply there. */
.home .year.will-draw .mark { clip-path: inset(0 100% -2px 0); }
.home .year.will-draw .when, .home .year.will-draw .what { opacity: 0; transform: translateY(4px); }
.home .year.drawn .mark { clip-path: inset(0 0 -2px 0); transition: clip-path var(--d) linear var(--t); }
.home .year.drawn .when, .home .year.drawn .what { opacity: 1; transform: none; transition: opacity 0.6s ease var(--t), transform 0.6s ease var(--t); }
.home .year > :nth-child(1) { --t: 0s; --d: 0.405s; }
.home .year > :nth-child(2) { --t: 0.405s; --d: 0.54s; }
.home .year > :nth-child(3) { --t: 0.945s; --d: 0.855s; }

/* Method */
.home .said { margin: 0 0 clamp(36px, 5vw, 56px); padding-left: clamp(16px, 2.4vw, 28px); border-left: 2px solid var(--color-accent); }
.home .said blockquote { margin: 0; font: italic 300 1.34rem/1.5 var(--font-serif); color: var(--color-ink); max-width: 40ch; } /* same size as the participant quotes */
.home .rhythm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 4vw, 48px); margin: 0 0 clamp(32px, 4vw, 44px); }
.home .rhythm > div { min-width: 0; border-top: 1px solid var(--color-ink); padding-top: 14px; }
.home .rhythm h3 { font: 400 0.84rem/1.3 var(--font-cut); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-ink); margin: 0 0 6px; }
.home .rhythm p { font-size: 1.02rem; margin: 0; }

/* Mentors */
.home .mentors { list-style: none; padding: 10px 0 0; margin: 30px 0 0; columns: 2 17rem; column-gap: clamp(24px, 4vw, 56px); }
.home .mentors li { break-inside: avoid; display: grid; grid-template-columns: 22px minmax(0, 1fr); padding: 10px 0; }
.home .mentors li::before { content: ""; width: 10px; height: 5px; margin-top: 0.72em; background: var(--color-ink); transform: rotate(23deg); border-radius: 1px; }
.home .mentors b { font-weight: 500; color: var(--color-ink); font-size: 1.08rem; }
.home .mentors b a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--color-accent); }
.home .mentors b a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.home .mentors span { display: block; font: 400 0.68rem/1.5 var(--font-cut); letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-ink-muted); margin-top: 3px; }
.home a:not(.btn) { color: var(--color-accent); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

/* Who it's for */
.home .for { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 5vw, 72px); }
.home .for > div { min-width: 0; display: flex; flex-direction: column; }
/* Each column ends in its own buttons, so "Plan a visit" sits under the text about visiting */
.home .for .actions { margin-top: auto; padding-top: 22px; min-height: calc(22px + 50px); } /* both rows line up: as tall as the filled button, items centred */
.home .for h3 { font: 400 0.8rem/1.4 var(--font-cut); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-ink-muted); margin: 0 0 12px; }
.home .close { padding-bottom: clamp(24px, 4vw, 48px); }


/* Original-copy pieces */
.home .differ-line { color: var(--color-accent); font-size: 1.12rem; }
.home .offer h3 { margin-top: 8px; }
.home .year { margin-top: clamp(40px, 6vw, 64px); }

@media (max-width: 900px) {
  .home .facts { --n: 2; border-bottom: 0; }
  .home .facts > * { border-bottom: 1px solid var(--color-ink); }
  .home .facts > *:nth-child(odd) { padding-left: 0; }
  .home .facts > *:nth-child(odd)::before, .home .facts > *:nth-child(odd)::after { display: none; }
  .home .facts > *:last-child { grid-column: 1 / -1; }
  .home .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .home .i-hero { grid-template-columns: minmax(0, 1fr); }
  .home .hero-text { padding-bottom: 8px; }
  /* Oct 2026: no big A on narrow screens. Stacked, it sat alone under the button, and
     no smaller placement fitted well; the nav carries the logo. */
  .home .hero-mark { display: none; }
  .home .testimony figure:nth-child(2) { justify-self: start; margin-left: 7%; }
  .home .testimony figure:nth-child(3) { justify-self: start; margin-left: 14%; }
  .home .testimony figure { grid-template-columns: minmax(0, 1fr); }
  .home .offer { --n: 1; border-bottom: 0; }
  .home .offer > * { padding-left: 0; padding-right: 0; }
  /* Oct 2026: tighter on phones (was about 72px between cards: padding plus margins). */
  .home .offer > * { padding-top: 0; padding-bottom: 0; }
  .home .offer > * + * { margin-top: 28px; }
  .home .offer h3 { margin-top: 0; }
  .home .offer p:last-child { margin-bottom: 0; }
  .home .offer > * + *::before, .home .offer > * + *::after { display: none; }
  .home .rhythm, .home .for { grid-template-columns: minmax(0, 1fr); }
  /* Oct 2026: no timeline on phones. Stacked, it only repeated the text above it. */
  .home .year { display: none; }
  .home .year { grid-template-columns: minmax(0, 1fr); }
  .home .year .mark { height: 40px; }
  .home .year .what { padding-bottom: 22px; }
  .home .year .when { min-height: 0; padding-top: 8px; }
  .home .year > :nth-child(3) { display: block; }
  .home .year > :nth-child(2) > :not(.mark) { text-align: left; padding-left: 0; padding-right: 0; }
  /* Stacked: each row sweeps full width, one after the other */
  .home .year > :nth-child(1) { --t: 0s; --d: 0.5s; }
  .home .year > :nth-child(2) { --t: 0.35s; --d: 0.6s; }
  .home .year > :nth-child(3) { --t: 0.7s; --d: 0.8s; }
}
/* Reading links after the timeline, before the photo */
.home .mission-links { margin-top: clamp(36px, 5vw, 56px); }