/* ==========================================================================
   speaker.css — Styles unique to speaker.php
   --------------------------------------------------------------------------
   Requires: tokens.css, base.css (in that order, before this file).

   The standalone speaking page carried its own copy of the palette, its own
   nav and footer, and its own button/eyebrow styles. All of that is now
   shared. What's left here is the material that exists nowhere else: the
   engrossed-clause list, the section label rule, the topic chips, the book
   cover frame and the booking band.

   Contents:
     1. Eyebrow / seal
     2. Section labels
     3. Hero
     4. Abstract
     5. Clauses  (the signature element)
     6. Audience & formats
     7. Topic chips
     8. Bio & cover
     9. Booking band
    10. Reveal
    11. Responsive
   ========================================================================== */


/* ==========================================================================
   1–2. Eyebrow, seal and section labels — MOVED TO base.css
   --------------------------------------------------------------------------
   advisor.php defined the same components with slightly different values
   (.24em vs .22em tracking). Two near-identical definitions of one component
   is how a design system rots. They live in base.css now and both pages use
   them. Nothing to see here — kept as a signpost so nobody redefines them.
   ========================================================================== */


/* ==========================================================================
   3. Hero
   ========================================================================== */
.spk-hero {
    position: relative;
    background: var(--gradient-brand-hero);
    color: var(--color-text-inverse);
    overflow: hidden;
}

.spk-hero .arcs {
    position: absolute;
    top: -14%;
    right: -8%;
    width: 640px;
    height: 640px;
    opacity: 0.5;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   THE GUTTER BUG — fixed 2026-07-15

   This was:

       .spk-hero__in { padding: 74px 0 64px; }

   on an element whose markup is <div class="container spk-hero__in">. The
   `container` class in base.css supplies the horizontal gutter:

       .container { padding: 0 var(--container-padding-x); }

   Both selectors are one class — identical specificity (0,1,0) — so the
   later stylesheet wins, and speaker.css loads after base.css. The shorthand
   `padding: 74px 0 64px` doesn't leave the sides alone; it sets them to 0.
   The gutter was destroyed and the headline sat flush against the viewport
   edge, with the § seal half off-screen.

   Longhands only below. They set what they name and touch nothing else, so
   .container keeps its gutter regardless of load order. This is the same
   trap as the style.css ordering earlier: a shorthand is a statement about
   every property it covers, including the ones you didn't think about.

   ---------------------------------------------------------------------------
   AND THEN I BROKE IT AGAIN, WORSE — 2026-07-15

   The first version of this comment annotated the .container line with an
   inline "(base.css)" note written as a comment. CSS comments DO NOT NEST, so
   that inner terminator closed THIS block ten lines early. Everything after it
   became garbage the parser tried to read as CSS, and it error-recovered by
   swallowing the very next block — .spk-hero__in — which is the rule this
   comment exists to explain.

   Result: the gutter fix and the centring silently did nothing, while every
   neighbouring rule worked. A jsdom probe reported exactly that (padding-top:0,
   text-align empty) and I dismissed it as an unreliable tool, because it
   disagreed with code I had just written and was sure about.

   The lesson is not "avoid nested comments". It is: when a test contradicts
   me, that is the most valuable moment available, and the cost of assuming the
   test is broken is another round on the person waiting.
   -------------------------------------------------------------------------- */
.spk-hero__in {
    position: relative;
    padding-top: 66px;
    padding-bottom: 58px;
    text-align: center;
}

/* Centred: each block is width-limited, so it needs auto side margins as well
   as text-align — text-align centres the lines inside the box, not the box. */
.spk-hero__in .eyebrow {
    justify-content: center;
}

.spk-hero h1 {
    /* Was max-width:16ch + clamp(38px, 6.4vw, 74px).

       At your viewport that resolved to the 74px cap, and 16ch of 74px serif
       is a very tall, very narrow column — it broke to three lines and ate the
       fold. Centred text also reads worse the longer the line, so the measure
       widens as the type shrinks: 20ch at ~54px lands this on two lines. */
    max-width: 20ch;
    margin: var(--space-5) auto 0;
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: clamp(32px, 4.6vw, 54px);
    line-height: 1.06;
    letter-spacing: -0.015em;
    color: var(--color-text-inverse);
    text-wrap: balance;   /* evens the ragged lines; ignored where unsupported */
}

.spk-hero h1 em {
    font-style: italic;
    color: var(--color-accent-soft);
}

.spk-hero__frame {
    max-width: 46ch;
    margin-top: var(--space-4);
    margin-inline: auto;
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(15px, 1.6vw, 18px);
    color: #cdd6e6;
}

.spk-hero__cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-8);
}

/* Credential ribbon under the fold line.
   justify-content:center added with the hero centring — a left-packed flex row
   under centred text reads as a mistake. The rule above it is width-limited so
   it relates to the text rather than spanning the full container. */
.ribbon {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-6);
    max-width: 68ch;
    margin-top: 46px;
    margin-inline: auto;
    padding-top: var(--space-5);
    border-top: 1px solid rgba(176, 141, 79, 0.28);
}

.ribbon .item {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    color: #c4cfe2;
}

.ribbon .item b {
    color: var(--color-text-inverse);
    font-weight: var(--weight-bold);
}

.ribbon .dot { color: var(--color-accent); }

.ribbon a {
    color: var(--color-text-inverse);
    text-decoration: underline;
    text-decoration-color: rgba(205, 177, 130, 0.55);
    text-underline-offset: 3px;
}


/* ==========================================================================
   4. Abstract
   ========================================================================== */
.spk-section { padding: var(--section-padding-y) 0; }

.abstract { background: var(--color-bg-raised); }

.abstract .grid {
    display: grid;
    grid-template-columns: 1.1fr 1.3fr;
    gap: 52px;
    align-items: start;
}

.abstract .lead {
    max-width: 20ch;
    font-family: var(--font-display);
    font-size: clamp(20px, 3vw, 29px);
    font-weight: var(--weight-medium);
    line-height: 1.32;
    color: var(--color-brand);
}

.abstract p {
    font-size: 16px;
    line-height: 1.72;
    color: #2b3340;
}

.abstract p + p { margin-top: var(--space-4); }


/* ==========================================================================
   5. Clauses — the signature element
   ========================================================================== */
.clauses {
    background: linear-gradient(180deg, #0c1830 0%, var(--navy-800) 100%);
    color: var(--color-text-inverse);
}

.statute {
    margin-top: var(--space-2);
    border-left: 2px solid rgba(176, 141, 79, 0.4);
}

.clause {
    position: relative;
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: var(--space-2) var(--space-7);
    padding: var(--space-7) 0 var(--space-7) var(--space-8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.clause:last-child { border-bottom: none; }

.clause .mark {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: var(--weight-medium);
    line-height: 1;
    color: var(--color-accent-soft);
}

.clause h3 {
    margin-bottom: var(--space-3);
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: clamp(21px, 2.6vw, 27px);
    line-height: 1.14;
    letter-spacing: -0.01em;
    color: var(--color-text-inverse);
}

.clause p {
    max-width: 58ch;
    font-size: 15.5px;
    line-height: 1.68;
    color: #c8d2e4;
}

.clause .stress {
    color: var(--color-accent-soft);
    font-style: italic;
}


/* ==========================================================================
   6. Audience & formats
   ========================================================================== */
.details .grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 56px;
}

.aud { list-style: none; padding: 0; margin: 0; }

.aud li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 16px;
    font-weight: var(--weight-semibold);
    color: var(--color-brand);
}

.aud li:last-child { border-bottom: none; }

.aud li::before {
    content: "\00A7";
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--color-action);
}

.fmt .row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-5);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
    align-items: baseline;
}

.fmt .row:last-child { border-bottom: none; }

.fmt .k {
    font-weight: var(--weight-black);
    font-size: 15px;
    color: var(--color-brand);
}

.fmt .v {
    font-size: 15px;
    color: #4a5262;
}

.fmt .avail {
    margin-top: var(--space-4);
    font-size: 13.5px;
    font-style: italic;
    color: var(--color-text-muted);
}


/* ==========================================================================
   7. Topic chips
   ========================================================================== */
.topics { background: var(--color-bg); }

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.chip {
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-action);
    border-radius: 2px;
    font-size: 14.5px;
    font-weight: var(--weight-semibold);
    color: var(--color-brand);
}


/* ==========================================================================
   8. Bio & cover
   ========================================================================== */
.bio .grid {
    display: grid;
    grid-template-columns: 1.4fr 0.9fr;
    gap: 52px;
    align-items: center;
}

.bio p {
    font-size: 16px;
    line-height: 1.74;
    color: #2b3340;
}

.bio p b {
    color: var(--color-brand);
    font-weight: var(--weight-bold);
}

.bio p + p { margin-top: var(--space-3); }

.cover {
    display: block;
    width: 230px;
    aspect-ratio: 410 / 600;
    justify-self: center;
    border-radius: var(--radius-xs);
    overflow: hidden;
    box-shadow: 0 22px 44px rgba(14, 27, 51, 0.32), 0 0 0 1px rgba(14, 27, 51, 0.06);
}

.cover svg { display: block; width: 100%; height: 100%; }


/* ==========================================================================
   9. Booking band
   ========================================================================== */
.book {
    position: relative;
    background: linear-gradient(180deg, var(--garnet-600) 0%, #6a1924 100%);
    color: var(--color-text-inverse);
    text-align: center;
}

.book::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-soft) 55%, transparent 100%);
}

.book .seal-lg {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto var(--space-5);
    border: 1.6px solid var(--color-accent-soft);
    border-radius: var(--radius-round);
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--color-accent-soft);
}

.book h2 {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: clamp(26px, 4vw, 40px);
    line-height: 1.1;
    color: var(--color-text-inverse);
}

.book p {
    max-width: 52ch;
    margin: var(--space-3) auto 0;
    font-size: 16px;
    color: #f3dcdf;
}

.book .contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3) var(--space-8);
    margin-top: var(--space-7);
    font-size: 15px;
}

.book .contact a {
    padding-bottom: 2px;
    color: var(--color-text-inverse);
    font-weight: var(--weight-bold);
    text-decoration: none;
    border-bottom: 1px solid rgba(205, 177, 130, 0.6);
    transition: border-color var(--duration-fast) var(--ease);
}

.book .contact a:hover,
.book .contact a:focus { border-color: var(--color-text-inverse); }

.book .office {
    margin-top: var(--space-5);
    font-size: 11px;
    font-weight: var(--weight-bold);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent-soft);
}


/* ==========================================================================
   10. Reveal
   JS adds .in. The [data-reveal] attribute is what hides the element, and the
   script removes it wholesale if IntersectionObserver is unavailable — so a
   JS failure can't leave the page blank. The original hid .reveal in CSS with
   no such escape hatch.
   ========================================================================== */
.reveal[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.7s var(--ease),
        transform 0.7s var(--ease);
}

.reveal[data-reveal].in {
    opacity: 1;
    transform: none;
}


/* ==========================================================================
   11. Responsive
   ========================================================================== */
@media (max-width: 820px) {
    .abstract .grid,
    .details .grid,
    .bio .grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    .bio .grid { gap: var(--space-8); }
}

@media (max-width: 640px) {
    .clause {
        grid-template-columns: 1fr;
        gap: 6px;
        padding-left: var(--space-5);
    }
    .clause .mark { font-size: 26px; }

    .fmt .row {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
}