/* ===========================================================================
© Copyright 1990-2026 Toptronic® Ltd, all rights reserved; no part of this
document may be reproduced, modified or stored in a retrieval system, or
transmitted in any form or by any means, electronic, mechanical, photocopying,
recording or otherwise, without the prior written permission of Toptronic Limited.
For copyright inquiries: jacques@toptronic.com

  PLWS :: Plazdiez Website — About-page portrait sheet (styles_020.css)
  Project: Paul Lambourn Web Site (PLWS) — www.plazdiez.co.za
  Generated: 2026-09-20T19:21:35+10:00 (session 0117)
  Audience: Jacques, Ryan (14), Ava (9), Students (15-23)

  WHAT THIS FILE IS FOR, IN SIMPLE ENGLISH
    Session 0117 adds a portrait photo of Paul Lambourn to the About page
    (about.html), sitting between the "40+ years" line and the career
    timeline. This sheet holds the styling for that one photo block.

  WHY A NEW FILE
    The classic sheets styles_001–013 are FROZEN by the 0115 theme gate
    (tools/PLWS_verify_theme_0115.py CHECK 1), and sheets styles_014–019 are
    reserved for the GO BOKKIES palette layer (CHECK 6 expects every selector
    in them to start with html[data-theme="bokkies"]). So new base styling
    lives in its own numbered sheet, styles_020.css, linked only by
    about.html after the shared sheets.

  HOW IT WORKS
    The photo is a cut-out with a transparent background (PNG with alpha,
    plus the same picture as WebP). Because the background is transparent,
    the portrait sits directly on the page in BOTH colour themes — the
    classic paper theme and the Bokkies theme — with no white box around it.
    The size is chosen with CSS (not with the image file), so the browser
    can pick the sharpest file for the screen: small files for phones,
    bigger ones for big desktop displays.
=========================================================================== */

/* --- The picture block -----------------------------------------------------
   It lives inside the centred page-hero band. margin auto + text-align
   centre (inherited) keep it in the middle under the "40+ years" line. */
.about-portrait {
  margin: var(--sp-xl) auto 0;      /* space above (below the tagline) */
  width: fit-content;               /* shrink-wrap the picture */
}

/* --- The portrait itself ---------------------------------------------------
   Base width: 260 CSS pixels on desktop. On small phones it shrinks to
   62% of the screen width. These numbers MUST match the sizes= attribute
   in about.html (the browser uses it to pick the sharpest file). On wide
   screens (1200px and up) the portrait grows to 300px. height:auto keeps
   the true photo proportions; the width/height attributes in the HTML give
   the browser the right box before the file loads (no layout jump). */
.about-portrait img {
  display: block;
  width: min(260px, 62vw);
  height: auto;
  margin: 0 auto;
}

/* --- Gentle framing ---------------------------------------------------------
   A soft drop shadow gives the cut-out a calm "studio" feel. The colours
   here are near-black at low opacity, which reads correctly on both the
   light (classic) and the Springbok (bokkies) backgrounds. */
.about-portrait img {
  filter: drop-shadow(0 6px 14px rgba(20, 22, 26, 0.22));
}

/* --- Slightly larger on big screens ---------------------------------------- */
@media (min-width: 1200px) {
  .about-portrait img { width: 300px; }
}