/*
  About page stylesheet ("How I work"). Loaded only on /about/ via the
  pageStylesheets field in src/about.njk.

  Not a case page (case-shared.css does not apply here, no CPRR, no
  sidebar, no next-case block) and not the homepage either: this page
  has no scroll reveal, no marquee, no sticky contact bar, no
  keyframes or @property anywhere. Confirmed against the real page
  markup decoded from reference/How I work - About page (standalone)
  .html and cross-measured on reference/screenshots/about.png, not
  assumed from the homepage's build. See about.njk's own header
  comment for the full structure and reasoning.

  Content sits inside <main class="site-canvas"> (base.njk), which
  already applies the sitewide fixed-width canvas and 120px side
  padding (tokens.css --canvas-padding). Nothing in this file
  overrides that, unlike home.css: About's own reference export uses
  64px padding on its own 1440px canvas, but the site's header and
  footer are already locked at 120px and are out of scope this
  session, so About follows the site's real canvas rather than the
  export's. That shifts the reading column from the export's 916px to
  804px and each principle column from 199px to 171px (1200 total -
  300px rail - 96px gap = 804px, /4 columns -40*3 gap /4 = 171px).
  The rail's own 300px width and the 96px gap both come straight from
  the export and docs/Designbriefing_Portfolio.md, unscaled.

  Colors: the export's flat #111111 is replaced everywhere by the
  locked sitewide tiers from tokens.css (--color-title on headings,
  --color-body on paragraph copy, --color-muted via the shared
  .eyebrow utility in base.css). Two greys the token set has no tier
  for stay literal here, same treatment home.css already gives them:
    #4A505C - principle descriptions, the Based text
    #E1E4EA - the hairline above the Based block
  The "PDF" caption under the CV button used to be a third literal
  grey, #9AA0AB, until the integration session's Task 8 a11y-test pass
  found it measured 2.62:1 against white at its 11px size, below the
  WCAG 2.2 SC 1.4.3 4.5:1 minimum. It now uses --color-muted like
  everything else in this tier, see .about-rail__pdf-caption below.
*/

/* ==========================================================================
   Hero row: eyebrow + H1 on the left, small portrait on the right
   ========================================================================== */

.about-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 64px;
  padding: 64px 0 40px;
}

.about-hero__title {
  margin: 22px 0 0;
  font-size: 68px;
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
  /* Matches home.css's own hero title: prevents an orphaned single
     word at the wrap point, though "How I work" is short enough that
     this rarely fires in practice. */
  text-wrap: balance;
}

.about-hero__portrait {
  flex: 0 0 132px;
  width: 132px;
}

.about-hero__portrait img {
  display: block;
  width: 132px;
  height: 164px;
  object-fit: cover;
  /* Weighted toward the top of the frame (faces). Adjust this first
     if a future replacement portrait crops awkwardly, see the "TO
     SWAP THE PORTRAIT" comment in about.njk. */
  object-position: 50% 22%;
  border: 1px solid var(--color-line);
  /* Deliberately square, no border-radius: the sitewide locked 12px
     corner radius (docs/iteration-protocol.md, "Shape") applies to
     HERO images, this is a small profile photo and the reference
     itself shows it square. */
}

/* ==========================================================================
   Two-column grid: reading column + sticky contact rail
   ========================================================================== */

.about-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 96px;
  padding-bottom: 104px;
  border-top: 1px solid var(--color-line);
}

.about-main {
  padding-top: 56px;
}

/* --------------------------------------------------------------------
   Intro paragraphs
   -------------------------------------------------------------------- */

.about-intro {
  display: flex;
  flex-direction: column;
  gap: 34px;
  max-width: 720px;
}

.about-intro p {
  margin: 0;
  font-size: 20px;
  line-height: 1.6;
  color: var(--color-body);
}

/* --------------------------------------------------------------------
   Principles row (C17). Full width of the reading column, thin rule
   above and below.

   Grid uses three explicit rows (numbers / titles / descriptions)
   with every element assigned both a grid-column AND a grid-row via
   inline style in about.njk, rather than four independent stacked
   divs. This is the fix docs/Componenteninventaris.md's C17 entry
   calls out by name: without it, a title wrapping to two lines in one
   column pushes that column's description down relative to the
   others. With explicit rows, all four numbers/titles/descriptions
   stay aligned on their own shared row regardless of how much any one
   title wraps.
   -------------------------------------------------------------------- */

.about-principles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 40px;
  row-gap: 0;
  align-items: start;
  margin-top: 56px;
  padding: 40px 0 44px;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.about-principles__num {
  grid-row: 1;
  font-family: var(--font-label);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--color-accent);
}

.about-principles__title {
  grid-row: 2;
  margin: 20px 0 0;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-title);
}

.about-principles__desc {
  grid-row: 3;
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.55;
  /* #4A505C: see file header. */
  color: #4a505c;
}

/* --------------------------------------------------------------------
   Closing paragraph
   -------------------------------------------------------------------- */

.about-closing {
  margin: 44px 0 0;
  max-width: 720px;
  font-size: 20px;
  line-height: 1.6;
  color: var(--color-body);
}

.about-link {
  color: var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
}

/* --------------------------------------------------------------------
   Contact rail

   Sticks at top: 97px (65px measured header height, confirmed via
   Playwright during the integration session, plus the original 32px
   gap this value already had), now that the sitewide header is
   sticky (integration session, build order step 7). Some distance
   from the Design export's own top: 110px, which stuck to ITS sticky
   header at a different measured height; this site's header simply
   renders shorter. z-index: 10 keeps this rail below the header
   (z-index: 30, base.css) if they ever visually overlap while
   scrolling.
   -------------------------------------------------------------------- */

.about-rail {
  position: sticky;
  top: 97px;
  z-index: 10;
  align-self: start;
  padding-top: 56px;
}

.about-rail__block + .about-rail__block {
  margin-top: 28px;
}

.about-rail__links {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--color-line);
}

.about-rail__link {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-title);
  /* Sitewide plain-hover pattern (nav links, footer icons: base.css),
     added during the integration session's animation-consistency read:
     this page's file header says "no keyframes or @property anywhere",
     which still stands, but a hover COLOR CHANGE with no transition at
     all read as an oversight, not one of this page's deliberate
     animation omissions (scroll reveal, marquee, etc, which are whole
     systems, not individual hover polish). */
  transition: color 0.15s ease;
}

.about-rail__link:hover {
  color: var(--color-accent);
}

.about-rail__cv-button {
  /* display: flex (not inline-flex) makes this a block-level box, so
     it always starts on its own line below the "Curriculum vitae"
     eyebrow span above it, regardless of available width. width:
     fit-content keeps it sized to its own content, like a button,
     rather than stretching to the rail's full 300px. */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 15px 24px;
  border: 1px solid var(--color-line);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-title);
  /* Same reasoning as .about-rail__link above: this button's hover
     changes background, border and text color all at once and used to
     snap instantly, added during the integration session's animation-
     consistency read. */
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.about-rail__cv-button:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

.about-rail__pdf-caption {
  display: block;
  margin-top: 14px;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Was a bespoke #9AA0AB (see file header), changed to the sitewide
     --color-muted token (integration session, Task 8, a11y-test
     pass): #9AA0AB on white measured 2.62:1 at this 11px size, well
     below the 4.5:1 WCAG 2.2 SC 1.4.3 minimum. --color-muted is
     CLAUDE.md's own locked value for exactly this role, "subtitles,
     captions", and passes. */
  color: var(--color-muted);
}

.about-rail__block--based {
  margin-top: 36px;
  padding-top: 28px;
  /* #E1E4EA: see file header. */
  border-top: 1px solid #e1e4ea;
}

.about-rail__block--based p {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.5;
  /* #4A505C: see file header. */
  color: #4a505c;
}

/* ==========================================================================
   Below 768px

   No mobile reference exists for this page (same situation as the
   homepage, see home.css's own note). Everything below is a reasoned
   build decision, not a confirmed match: flagged as such in this
   session's QA-check.
   ========================================================================== */

@media (max-width: 767px) {
  .about-hero {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 20px;
    padding: 40px 0 28px;
  }

  .about-hero__title {
    font-size: 38px;
    letter-spacing: -0.02em;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-bottom: 56px;
  }

  .about-main {
    padding-top: 32px;
  }

  /* Stack the four principles in reading order instead of four
     columns: at 320-375px a four-column row leaves no room for the
     15px description text. Top and bottom rules stay around the
     whole block.

     The desktop markup groups elements by TYPE in the DOM (all four
     numbers, then all four titles, then all four descriptions), which
     is what lets the shared-row grid trick work at desktop widths.
     Read in plain DOM order that would print num-num-num-num-title-
     title-title-title-desc-desc-desc-desc, wrong for a stacked mobile
     read. flex + explicit `order` per element re-sequences it to
     num1/title1/desc1/num2/title2/desc2/... without touching the
     markup, so the desktop grid-row trick and the mobile reading
     order can both work off the same HTML. */
  .about-principles {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
    padding: 32px 0 36px;
  }

  .about-principles__num:nth-child(1) { order: 1; }
  .about-principles__title:nth-child(5) { order: 2; }
  .about-principles__desc:nth-child(9) { order: 3; }
  .about-principles__num:nth-child(2) { order: 4; }
  .about-principles__title:nth-child(6) { order: 5; }
  .about-principles__desc:nth-child(10) { order: 6; }
  .about-principles__num:nth-child(3) { order: 7; }
  .about-principles__title:nth-child(7) { order: 8; }
  .about-principles__desc:nth-child(11) { order: 9; }
  .about-principles__num:nth-child(4) { order: 10; }
  .about-principles__title:nth-child(8) { order: 11; }
  .about-principles__desc:nth-child(12) { order: 12; }

  /* Spacing before the 2nd, 3rd and 4th principle's number, so the
     four groups read as distinct blocks. The 1st number keeps only
     the container's own top padding above it. */
  .about-principles__num:not(:nth-child(1)) {
    margin-top: 28px;
  }

  .about-rail {
    position: static;
    padding-top: 0;
  }
}