/* =============================================
   About / team page  (/about)
   Each section is a full-bleed band with its own background, alternating like
   the homepage (index.php). The backgrounds are the shared `bg-fws-new-gray` /
   `bg-fws-new-gray-dark` utilities, which Lumière+ and every colour palette
   remap, so the page follows all 10 themes without a rule of its own.
   HARD EDGES only: the site's shapes are square or angled (.fws-button's
   clip-path, .fws-toggle, .fws-settings-panel) — nothing here is rounded.
   ============================================= */

.ab-page {
    /* Theme-aware tokens — dark is the default. themes/light-plus.css has an
       "ABOUT PAGE" section that flips the two TEXT tokens, because
       --fws-white stays pure white in Lumière+ (only `.text-white` is
       remapped there). The surfaces already go through
       --fws-new-gray(-dark) / --fws-border, which every theme remaps.
       Use a token here rather than a hardcoded white for any new colour. */
    --ab-text:      var(--fws-white);         /* names + section titles */
    --ab-text-soft: rgba(255, 255, 255, .65); /* roles, bios, connector copy */
    --ab-tile-bg:   var(--fws-new-gray);      /* fill behind a portrait */
    --ab-line:      var(--fws-border);        /* hairlines */

    color: var(--ab-text);

    /* `main` absorbs the leftover viewport height on a short page (see the page
       shell in main.css). Painting it the LIGHT band colour keeps that slack
       seamless: every page here ends on a `bg-fws-new-gray` band, so the slack
       just reads as that band continuing. Left unset, the body's own colour
       shows through instead — the same value in the dark themes, but a
       different one in every colour palette. */
    background: var(--fws-new-gray);
}

/* ---- Bands ----
   Each page in the section is built from full-bleed bands that alternate
   `bg-fws-new-gray` / `bg-fws-new-gray-dark`, like index.php.

   THE LAST BAND OF A PAGE MUST BE LIGHT (`bg-fws-new-gray`): footer.php opens
   with its social section on `bg-fws-new-gray-dark`, so a page ending on the
   dark band fuses into the footer with no visible seam. An even number of
   bands therefore starts dark, an odd number starts light. */

.ab-band {
    padding: 3.5rem 1.5rem;
}

/* the navbar is fixed and 5rem tall — clear it before the title */
.ab-band--first {
    padding-top: 8rem;
}

.ab-wrap {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

/* ---- Headings ---- */

.ab-title {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 700;
    text-align: center;
    margin: 0;
}

.ab-section-title {
    font-size: clamp(1.05rem, 3vw, 1.3rem);
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin: 0 0 2.25rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--ab-line);
}

/* ---- Prose ----
   Free-running copy on a band — the /about/ landing page, and the stub note
   on /about/branding. Capped so a wide band cannot produce 120-character
   lines. */

.ab-intro {
    max-width: 70ch;
    margin: 0 auto;
    line-height: 1.8;
    color: var(--ab-text-soft);
}

.ab-intro p {
    margin: 0;
}

.ab-intro p + p {
    margin-top: 1rem;
}

/* ---- Signature ----
   The closing motto of /about/. It has to read as a SIGN-OFF rather than a
   seventh paragraph, so it is separated by a hairline and pulled out of the
   running prose: bigger, bold, letter-spaced, centred.
   `var(--ab-text)` and not the accent green: this block always sits on the
   LIGHT band, and --fws-green is NOT remapped by themes/light-plus.css, so
   accent-coloured text on a near-white fill would be unreadable there. */

.ab-signature {
    max-width: 70ch;
    margin: 2.75rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--ab-line);
    text-align: center;
    font-size: clamp(1rem, 2.4vw, 1.2rem);
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.7;
    color: var(--ab-text);
}

/* ---- Grids ---- */

/* The two leads sit SIDE BY SIDE so they read as peers on equal billing. Their
   portrait stays the largest on the page (240px vs the members' 190px cap) by
   stacking it ABOVE the copy inside the column: put it beside the copy in a
   ~500px column and it has to shrink to ~128px, i.e. smaller than the members'
   portraits right below it. */
.ab-leads {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

@media (min-width: 900px) {
    .ab-leads {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem 4rem;
    }
}

.ab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2.25rem 1.25rem;
}

.ab-grid--members {
    margin-top: 2.5rem;
}

@media (min-width: 640px) {
    .ab-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

/* ---- People ----
   No boxes: the portrait, name and role sit straight on the band, like the
   previous site's team page. That is also why there is no border-radius
   anywhere — the page follows the site's square/angled shapes. */

.ab-card {
    text-align: center;
}

/* Portrait on top, copy underneath — see the note on .ab-leads */
.ab-lead {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    text-align: center;
}

/* ---- Portrait ----
   Square, not a circle: the site has no rounded shapes. */

.ab-avatar {
    display: block;
    width: 100%;
    max-width: 190px;
    aspect-ratio: 1;
    margin: 0 auto 1rem;
    background: var(--ab-tile-bg);
    object-fit: cover;
}

/* The leads' portrait is the largest on the page — deliberately beyond the
   members' 190px cap so the hierarchy reads at a glance, while staying small
   enough that two leads still fit side by side. */
.ab-avatar--lead {
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
}

/* ---- Names, roles, bios ---- */

.ab-name {
    margin: 0 0 .25rem;
    font-size: 1rem;
    font-weight: 700;
}

.ab-name--lead {
    font-size: 1.25rem;
}

.ab-role {
    margin: 0 0 .9rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ab-text-soft);
}

.ab-card .ab-role:last-child {
    margin-bottom: 0;
}

.ab-bio {
    margin: 0 0 .8rem;
    /* the lead rows are full width now, so cap the measure — a ~700px line of
       0.95rem text is far too long to read comfortably */
    max-width: 70ch;
    font-size: .95rem;
    line-height: 1.7;
    color: var(--ab-text-soft);
}

.ab-bio:last-child {
    margin-bottom: 0;
}

/* ---- Join us ----
   An inverted block: dark copy on a white fill, cut into the same parallelogram
   as .fws-button / .lg-card — but it is NOT a button, just a panel wearing the
   site's shape. A border would be sliced off by the cut, so the block is
   defined by its fill alone. The button's 15px slant is invisible on a panel
   this wide, so the slant scales up (and back down on narrow screens, where a
   deep cut would eat the text). */

.ab-join {
    --ab-slant: 24px;
    /* inverted pairing, same idea as .fws-settings-panel: it flips itself
       instead of following the page tokens, which are light-on-dark */
    --ab-panel-bg:   var(--fws-white);
    --ab-panel-text: var(--fws-black);

    max-width: 720px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
    background: var(--ab-panel-bg);
    color: var(--ab-panel-text);
    clip-path: polygon(var(--ab-slant) 0, 100% 0, calc(100% - var(--ab-slant)) 100%, 0 100%);
}

@media (min-width: 640px) {
    .ab-join {
        --ab-slant: 56px;
        padding: 2.75rem 5rem;
    }
}

.ab-join .ab-section-title {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

.ab-join-text {
    margin: 1.5rem 0 0;
    line-height: 1.8;
    color: var(--ab-panel-text);
    opacity: .78;
}

/* Links inherit the panel's own ink, so one rule covers both the white and the
   dimmed (Sombre+) fill */
.ab-join .ab-link {
    color: inherit;
}

/* ---- Links ---- */

.ab-link {
    color: var(--ab-text);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .15s;
}

.ab-link:hover {
    color: var(--fws-green);
}