/* Bowen Island Judo Club — page-About-Judo.css
   Page-only rules for About-Judo.html, linked after site.css. Scoped to <main class="page-about-judo">.
   Owned by the About-Judo page builder; shared rules live in site.css (read-only, see STYLEGUIDE.md).

   The essay is a list of rows in source order: a paragraph (plus the years it mentions, as a decorative
   aria-hidden marker) or a historic plate (Kano portrait, 1951 poster: shown as they are, no .bw).
   - Under 900px: one column; the years sit above their paragraph as a small dateline.
   - 900px+: the years move into a left margin on a timeline rail (hairline + red dots); prose beside it.
     900-1199px: the plates stay in the text column, on the rail.
   - 1200px+: the plates move into a right margin: Kano beside the founding, the poster closing the essay.
   Closing spread (paper): the last paragraph + Register Now / Classes beside the olympic-throw photo,
   which bleeds to the right edge with a sun stamp. */

.page-about-judo {
  --years-w: 64px;                          /* left margin: the years */
  --rail-gap: 48px;                         /* years → prose; the rail runs down the middle of it */
  --aside-w: clamp(320px, 29.5vw, 425px);   /* right margin (1200px+); at 425px Kano shows his 395px original 1:1 */
  --aside-gap: clamp(48px, 5vw, 72px);
  --para-gap: 1.9rem;
}
@media (min-width: 900px) { .page-about-judo { --para-gap: 1.6rem; } }

/* ---------- Hero: "WHAT IS / JUDO?" over the rising sun ---------- */
.page-about-judo .ph-line { display: block; }
.page-about-judo .page-hero__title--l { font-size: 24vw; line-height: .9; }
.page-about-judo .page-hero__sun { --sun-size-m: 60vw; }
@media (min-width: 600px) {
  .page-about-judo .ph-line { display: inline; }
  .page-about-judo .page-hero__title--l { font-size: 15vw; line-height: .86; }
  .page-about-judo .page-hero__sun { --sun-size-m: 36vw; }   /* the whole disc fits between the header rule and the essay */
}
@media (min-width: 900px) {
  .page-about-judo .page-hero__title--l { font-size: clamp(6rem, .5rem + 10.2vw, 10.75rem); }
  .page-about-judo .page-hero__sun { --sun-x: 41%; }
}

/* ---------- Essay ---------- */
.page-about-judo .essay__grid {
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--para-gap);
  padding-block: var(--sec);
}
.page-about-judo .essay__p {
  max-width: var(--measure);
  font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem);
  line-height: 1.72; color: var(--text-soft);
}
.page-about-judo .essay__p--lead {
  max-width: 32em;
  font-size: clamp(1.1875rem, .95rem + .5vw, 1.375rem); line-height: 1.52; font-weight: 500; color: var(--ink);
}

/* the years a paragraph mentions: a dateline above it (decorative, aria-hidden; the years are in the text).
   Visually secondary: smaller than the body text, grey, never the loudest thing in the essay. */
.page-about-judo .essay__years {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  margin-bottom: 8px;
  font-weight: 700; font-size: .875rem; line-height: 1.2; letter-spacing: .08em;
  font-variant-numeric: tabular-nums lining-nums; color: var(--grey);
}
.page-about-judo .essay__years::before {
  content: ""; flex: none; width: 8px; height: 8px; margin-right: -4px;
  border-radius: 50%; background: var(--red);
}

/* historic plates */
.page-about-judo .essay__plate--kano {
  /* an archival print: paper mat inside a thin ink rule; the image never exceeds its 395px original */
  max-width: calc(395px + 2 * 14px + 2px);
  padding: 14px 14px 12px;
  background: var(--paper);
  border: 1px solid var(--ink);
}
.page-about-judo .essay__plate--kano figcaption { margin-top: 10px; }
.page-about-judo .essay__plate--poster { max-width: calc(554px + 6px); }   /* never wider than the original */
@media (max-width: 899px) {
  .page-about-judo .essay__row--kano, .page-about-judo .essay__row--poster { padding-block: .5rem; }
}

/* 900px+: the timeline rail. Every row is [years | text] with one continuous hairline between. */
@media (min-width: 900px) {
  .page-about-judo .essay__grid { row-gap: 0; }
  .page-about-judo .essay__row {
    position: relative;
    display: grid; grid-template-columns: [years] var(--years-w) [text] minmax(0, 1fr);
    align-content: start; column-gap: var(--rail-gap);
    padding-bottom: var(--para-gap);
  }
  .page-about-judo .essay__row::before {
    content: ""; position: absolute; top: 0; bottom: 0;
    left: calc(var(--years-w) + var(--rail-gap) / 2); width: 1px;
    background: var(--paper-line);
  }
  .page-about-judo .essay__row--p1::before { top: .9rem; }   /* the rail starts at the first year */
  .page-about-judo .essay__row--p5 { padding-bottom: 0; }    /* …and ends with the essay */
  .page-about-judo .essay__p, .page-about-judo .essay__plate { grid-column: text; }
  .page-about-judo .essay__row--kano, .page-about-judo .essay__row--poster {
    padding-top: .5rem; padding-bottom: calc(var(--para-gap) + .75rem);
  }
  .page-about-judo .essay__years {
    grid-column: years; grid-row: 1;
    position: relative;
    flex-direction: column; align-items: flex-start; gap: 6px;
    margin: 0; padding-top: .45rem;
    font-size: 1rem; line-height: 1; letter-spacing: .04em;
  }
  .page-about-judo .essay__row--p1 .essay__years { padding-top: .55rem; }
  /* its red dot sits on the rail, level with the first year */
  .page-about-judo .essay__years::before {
    position: absolute; top: calc(.45rem + .5rem - 6px);
    right: calc(-1 * var(--rail-gap) / 2 - 6px);
    width: 12px; height: 12px; margin: 0;
    box-shadow: 0 0 0 5px var(--white);
  }
  .page-about-judo .essay__row--p1 .essay__years::before { top: calc(.55rem + .5rem - 6px); }
}

/* 1200px+: the plates leave the text column for a right margin */
@media (min-width: 1200px) {
  .page-about-judo .essay__grid {
    grid-template-columns: [main] minmax(0, 1fr) [aside] var(--aside-w);
    /* five paragraph rows, then a flexible row that takes any poster overhang
       so a plate never stretches the gaps between paragraphs */
    grid-template-rows: repeat(5, auto) 1fr;
    column-gap: var(--aside-gap);
  }
  .page-about-judo .essay__row { grid-column: main; }
  .page-about-judo .essay__row--p1 { grid-row: 1; }
  .page-about-judo .essay__row--p2 { grid-row: 2; }
  .page-about-judo .essay__row--p3 { grid-row: 3; }
  .page-about-judo .essay__row--p4 { grid-row: 4; }
  .page-about-judo .essay__row--p5 { grid-row: 5; }
  .page-about-judo .essay__row--kano, .page-about-judo .essay__row--poster {
    grid-column: aside; display: block; padding: 0;
  }
  .page-about-judo .essay__row--kano::before, .page-about-judo .essay__row--poster::before { content: none; }
  /* Kano beside the founding (top aligned with the first line); the poster ends level with the essay */
  /* the negative margin lets the print overhang into row 3's empty margin instead of stretching rows 1-2
     (which would open a wider gap between the first two paragraphs than between the others) */
  .page-about-judo .essay__row--kano { grid-row: 1 / 3; align-self: start; margin-bottom: -6rem; }
  .page-about-judo .essay__row--poster { grid-row: 3 / 7; align-self: end; }
}

/* ---------- Closing spread ---------- */
.page-about-judo .essay__end { background: var(--paper); padding-block: var(--sec); }
.page-about-judo .essay__end-grid { display: grid; gap: 28px; padding-inline: var(--gutter); }
.page-about-judo .essay__p--end {
  max-width: 32em;
  font-size: clamp(1.1875rem, .6rem + 1.1vw, 1.5rem); line-height: 1.5; font-weight: 500; color: var(--ink);
}
.page-about-judo .essay__photo { position: relative; background: var(--ink); }
.page-about-judo .essay__photo img { width: 100%; height: auto; }
@media (max-width: 899px) {
  /* full-bleed photo; room above it for the sun stamp (40px above the top edge on phones) */
  .page-about-judo .essay__photo { margin: 30px calc(-1 * var(--gutter)) 0; }
  .page-about-judo .essay__actions .btn { flex: 1 1 auto; }
}
@media (min-width: 900px) {
  .page-about-judo .essay__end-grid {
    grid-template-columns: [text] minmax(0, 1fr) [media] minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: clamp(32px, 5vw, 88px); row-gap: 32px;
    padding-left: var(--edge); padding-right: 0;
  }
  .page-about-judo .essay__p--end { grid-column: text; grid-row: 1; align-self: end; }
  .page-about-judo .essay__photo { grid-column: media; grid-row: 1 / span 2; align-self: center; }
  .page-about-judo .essay__actions { grid-column: text; grid-row: 2; align-self: start; }
}
@media (min-width: 1200px) {
  .page-about-judo .essay__end-grid { grid-template-columns: [text] minmax(0, 5fr) [media] minmax(0, 7fr); }
}