/* ============================================================================
   ABOUT — the founder spread and the heritage chronology.

   Page-scoped composition, not a second design system. Every colour, face and
   size here comes from css/variables.css: --font-display (House Display),
   --font-body, --font-mono, and the existing --fs-* scale. Nothing invents a
   competing scale, and the shared header, footer and components are untouched.

   Two deliberate restraints, both from the brief:

   1. NO SCRIPT ACCENT ANYWHERE ON THIS PAGE. The rest of the site sets one word
      of most headings in Allura; here hierarchy is size, weight and space, and
      the accent survives as colour rather than a change of typeface. This began
      scoped to the founder and chronology and was later applied page-wide —
      see the note at the foot of this file for why.
   2. NO EYEBROW above a heading. The founder's name is the headline and his
      role reads underneath it as a byline, which is how a magazine sets a
      profile and avoids the label-above-title reflex.
   ========================================================================= */

/* ------------------------------------------------------------ founder spread
   Asymmetric on purpose. The portrait column runs to the left viewport edge
   with no gutter — the section is deliberately not inside .wrap — while the
   note is centred against it on a narrow measure. The two never start on the
   same line, and that offset plus the bleed is most of what separates an
   editorial spread from a team-bio card. */
/* padding-top was 0, which butted the portrait straight against the hero band — two
   photographs meeting on a hard seam with no paper between them, so they read as one
   run-on image rather than the end of one section and the start of the next. The top
   step is deliberately smaller than the bottom one: the section should sit closer to
   the hero it follows than to the chronology it precedes. */
.founder{
  display:grid;
  grid-template-columns:minmax(0,44fr) minmax(0,56fr);
  align-items:start;
  column-gap:clamp(2rem,5vw,5.5rem);
  padding-block:clamp(2.5rem,8vw,5rem) clamp(3rem,7vw,7rem);
}
.founder__portrait{position:relative;}
.founder__portrait picture{display:block;}
.founder__portrait img{display:block;width:100%;height:auto;}

/* align-self rather than a fixed top offset: the portrait is a tall 2:3 and the
   note is roughly half its height, so a hard padding left a large dead field
   under the text at some widths and crowded the top at others. Centring the
   note against the portrait balances the spread at every size on its own. */
.founder__note{
  align-self:center;
  padding-right:var(--gutter);
  padding-block:clamp(2rem,5vw,4rem);
  max-width:54ch;
}
/* The name IS the headline. --fs-h2 is the site's existing heading step, so
   this is the same scale every other page uses, not a new one. */
.founder__name{
  font-family:var(--font-display);font-weight:500;
  font-size:var(--fs-h2);line-height:.96;letter-spacing:-.02em;
  color:var(--ink);
}
.founder__role{
  font-family:var(--font-mono);font-size:var(--fs-mono);
  letter-spacing:.22em;text-transform:uppercase;color:var(--oxblood-deep);
  margin-top:1.1rem;
}
/* a hairline, then the prose — the only rule in the section */
.founder__body p + p{margin-top:1.1rem;}
.founder__body{
  font-family:var(--font-body);color:var(--ink-2);
  margin-top:clamp(1.6rem,3vw,2.4rem);padding-top:clamp(1.6rem,3vw,2.4rem);
  border-top:1px solid var(--line);
}

/* ---- desktop: a composed portrait plate, not a full-bleed slab ----
   The spread used to run the portrait to the left viewport edge at its natural 2:3,
   which made it a 584x877 block of dark image hard against the frame — it read as a
   photograph that had run off the page rather than one that had been placed. Three
   changes, all desktop-only; the phone layout above is untouched.

   1. It comes inside the page gutter, so its left edge lines up with the header, the
      chronology and the footer instead of ignoring them.
   2. It crops to a 4:5 portrait with the subject held high in frame, which is the
      proportion a profile photograph is actually printed at. The 2:3 original spent
      its bottom third on an empty floor.
   3. The section breathes: the block padding roughly doubles, and the note is centred
      against the plate so neither half hangs below the other.
   Reverting to the bleed is deleting this block. */
@media (min-width:901px){
  .founder{
    grid-template-columns:minmax(0,41fr) minmax(0,59fr);
    column-gap:clamp(2.5rem,6vw,6.5rem);
    padding-inline:var(--gutter);
    padding-block:clamp(4rem,9vw,8rem) clamp(4.5rem,10vw,9rem);
    align-items:center;
  }
  .founder__portrait img{
    aspect-ratio:4/5;
    object-fit:cover;
    /* 50% 22%: keeps the head and shoulders in the upper half and drops the empty
       floor the original frame ended on. Tune the second value, not the crop. */
    object-position:50% 22%;
    /* The two caps MUST stay in 4:5 with each other (544 x 1.25 = 680). A max-height
       that disagrees with the width cap silently wins over aspect-ratio and object-fit
       crops to whatever is left — at 1920 that turned the portrait into an 803x660
       landscape band. Change one, recompute the other. */
    max-width:min(100%,34rem);
    max-height:680px;
    border-radius:2px;
  }
  .founder__note{padding-right:0;}
}

@media (max-width:900px){
  .founder{grid-template-columns:1fr;column-gap:0;padding-bottom:clamp(2.5rem,7vw,4rem);}
  .founder__note{align-self:start;padding-inline:var(--gutter);padding-block:clamp(1.8rem,6vw,2.6rem);max-width:60ch;}
  /* Softened corners, phone only. The desktop spread keeps its hard full-bleed edge —
     that squared left bleed is the editorial device the section is built on. Stacked on
     a phone the portrait is just a wide block, and the radius reads there instead.
     It is inset by the page gutter so the curve has paper to sit against: rounding an
     image that still touches both viewport edges leaves the corners looking clipped
     rather than drawn. */
  .founder__portrait{padding-inline:var(--gutter);}
  .founder__portrait img{border-radius:clamp(10px,3.5vw,18px);}
}

/* ------------------------------------------------------------- chronology
   A vertical axis the page scrolls down, and one <ol> for both forms.

   Earlier this ran left-to-right in rows of four. Reading a chronology in rows
   means jumping back to the left margin every fourth milestone, which is the
   one movement a timeline should never ask for — the eye loses the thread at
   exactly the point the years jump a decade. It now descends, which is the
   direction the page already moves.

   WIDE (>=760px): three bands — the years right-aligned hard against the axis,
   the axis itself, the events to its right. Putting the years on their own side
   of the line is what makes it read as a measured scale rather than a list with
   a rule down it: the numerals form a column you can scan on their own.

   NARROW (<760px): the same list with the axis at the far left and the year
   above its title, because a 150px year column would leave nothing for the text
   at 360px.

   Neither form is the pattern the brief rules out: the axis is well left of
   centre, entries never alternate sides, and every mark is a tick rather than
   a dot. */
.chron{
  list-style:none;
  /* distance from the content edge to the axis */
  --axis-x:clamp(96px,11vw,150px);
  --pad:clamp(1.7rem,3.2vw,2.9rem);
}

.chron__mark{
  position:relative;
  display:grid;
  grid-template-columns:var(--axis-x) minmax(0,1fr);
  column-gap:clamp(1.5rem,3vw,3rem);
  /* baseline, not start: the year is set at --fs-h3 and its title at ~1.35x
     body, so aligning their boxes left the two sitting on different baselines
     either side of the axis — visible as a slight stagger all the way down the
     column. Baseline alignment makes each milestone read as one line. */
  align-items:baseline;
  padding-block:var(--pad);
}

/* The axis. Drawn per mark, so stacked marks give one unbroken line that spans
   exactly the list and nothing more. The first and last segments fade rather
   than butting into the heading above and the section edge below — which also
   avoids having to compute where the first and last ticks sit. */
.chron__mark::before{
  content:"";position:absolute;left:var(--axis-x);top:0;bottom:0;
  width:1px;background-color:var(--line-strong);pointer-events:none;
}
.chron__mark:first-child::before{
  background-color:transparent;
  background-image:linear-gradient(to bottom,transparent,var(--line-strong) clamp(1.6rem,3vw,2.6rem));
}
.chron__mark:last-child::before{
  background-color:transparent;
  background-image:linear-gradient(to top,transparent,var(--line-strong) clamp(1.6rem,3vw,2.6rem));
}

/* The year sits in the left band, right-aligned so all eight numerals stack
   into a clean edge against the axis. --fs-h3 is the site's existing step. */
.chron__year{
  grid-column:1;position:relative;
  display:block;text-align:right;
  padding-right:clamp(.9rem,1.8vw,1.5rem);
  font-family:var(--font-display);font-weight:500;
  font-size:var(--fs-h3);line-height:1;letter-spacing:-.02em;
  color:var(--ink);
  font-variant-numeric:lining-nums tabular-nums;
}
/* The tick crosses the axis at the year's own centre. left:100% is the right
   edge of the year's band, which is exactly where the axis is drawn. */
.chron__year::before{
  content:"";position:absolute;left:calc(100% - .3rem);top:.5em;
  width:clamp(.85rem,1.7vw,1.35rem);height:1px;
  background:var(--oxblood);transform-origin:left;
}
.chron__mark:first-child .chron__year::before,
.chron__mark:last-child .chron__year::before{height:2px;}
.chron__mark:last-child .chron__year::before{background:var(--oxblood-deep);}
.chron__mark:last-child .chron__year{color:var(--oxblood-deep);}

.chron__title{
  grid-column:2;
  font-family:var(--font-display);font-weight:500;
  font-size:calc(var(--fs-body) * 1.35);line-height:1.16;letter-spacing:-.008em;
  color:var(--ink);
}
.chron__body{
  grid-column:2;
  font-family:var(--font-body);font-size:var(--fs-body);
  color:var(--ink-2);margin-top:.6rem;max-width:56ch;
}

@media (max-width:760px){
  .chron{--axis-x:0px;--pad:clamp(1.4rem,5vw,1.9rem);--gap:clamp(1.1rem,4.5vw,1.5rem);}
  .chron__mark{
    grid-template-columns:minmax(0,1fr);
    column-gap:0;
    padding-left:var(--gap);
  }
  .chron__year{
    grid-column:1;text-align:left;padding-right:0;
    font-size:clamp(1.6rem,7vw,2rem);
  }
  .chron__year::before{
    left:calc(-1 * var(--gap));top:.52em;
    width:calc(var(--gap) - .3rem);
  }
  .chron__title{grid-column:1;margin-top:.5rem;}
  .chron__body{grid-column:1;max-width:none;}
}

/* Motion: the house .reveal system, only quieter. A chronology that flies in
   fights the reading, so travel and stagger are both short. */
.chron{--reveal-travel:14px;--reveal-dur:.7s;--reveal-stagger:.055s;}
.founder{--reveal-travel:22px;--reveal-dur:1s;--reveal-wipe:1.1s;}

/* The ticks measure themselves out along the axis as each milestone arrives,
   in the same stagger order as the text. It is the one place on this page where
   motion carries meaning rather than decoration: a timeline being marked off is
   the passage the section is about.

   scaleX of a pseudo-element — composited, and deliberately not an animated
   width, which would put a layout pass on every frame. */
@media (prefers-reduced-motion:no-preference){
  .js .chron .chron__year::before{
    transform:scaleX(0);
    transition:transform .5s var(--ease);
    transition-delay:calc(var(--i,0) * var(--reveal-stagger,.055s));
  }
  .js .chron .chron__mark.is-visible .chron__year::before{transform:none;}
}

/* ---- one page, one voice --------------------------------------------------
   This page used to suppress the script face outright: every emphasised word was
   re-set in the display face and the accent survived as colour alone, on the brief's
   reading of "premium — not gold gradients, script fonts, or sparkle effects."

   That is now reversed. A gold accent word inside a heading is Allura everywhere on
   the site, and About is no longer the exception — it was the only page where those
   words came out in the display face. The typeface is no longer restated here at all:
   it comes from the shared rules (base.css h1/h2/h3 em, plus the per-component rules
   in components.css), which is what keeps this page on the same system as the rest.

   What is left is colour, and only where no component rule already provides one.
   .chero h1 em, .pull em, .cta__big em, .figures__n em and .band h2 em each carry
   --gold from components.css and are deliberately not repeated below. A bare h2/h3
   em has no component rule, so it would otherwise inherit its heading's ink — which
   is why "Our Vision" needs this and the others do not.

   --oxblood, not --oxblood-deep: these are display-scale words, and the lighter gold
   is the token the site uses above 24px (see the note in css/variables.css).
   -deep exists for small text, which none of these are.

   Written with :where() on purpose. A plain `body.about h2 em` scores (0,1,2) and so
   outranks every component rule — it silently repainted .cta__big em from --gold to
   the darker --oxblood, which on the CTA band's imagery is the one place that gold
   must not go. :where() contributes nothing, leaving this at (0,0,1), below every
   component rule, so it only ever reaches an accent no component has coloured. */
:where(body.about) :where(h2,h3) em{color:var(--oxblood);}
:where(body.about) :where(.dark) :where(h2,h3) em{color:var(--gold);}

/* ---- founder: give the portrait the weight the brief asked of it -----------
   The brief calls this section the page's emotional anchor. At 44/56 the
   portrait was the smaller half of its own spread; 48/52 with a tighter measure
   beside it makes the photograph lead and turns the note into a caption column,
   which is the relationship a magazine profile actually has. */
@media (min-width:901px){
  .founder{grid-template-columns:minmax(0,48fr) minmax(0,52fr);}
  .founder__note{max-width:50ch;}
}