:root {
    --ink:   #15100c;
    --ink-2: #1e1813;
    --bone:  #f4efe7;
    --dim:   rgba(244,239,231,.80);
    --faint: rgba(244,239,231,.62);
    --line:  rgba(244,239,231,.14);
    --brass: #d2a969;

    --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --sans:  'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--ink); color: var(--bone); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
::selection { background: var(--brass); color: var(--ink); }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 90; background: var(--bone); color: var(--ink); padding: 12px 20px; font-size: 14px; }
.skip-link:focus { left: 0; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 3.4vw, 48px); width: 100%; }

/* ── Bar: wordmark and two plain links. No tracking, no small caps. ── */
.bar { position: relative; z-index: 4; }
.bar .inner { display: flex; align-items: center; justify-content: flex-end; gap: 24px; padding-block: clamp(18px, 2.2vw, 26px); }
.bar nav { display: flex; gap: clamp(20px, 2.4vw, 32px); font-size: 16px; font-weight: 500; }
.bar nav a { color: var(--faint); position: relative; }
.bar nav a.on, .bar nav a:hover { color: var(--bone); }
.bar nav a::after { content: ''; position: absolute; left: -10px; right: -10px; top: 50%; transform: translateY(-50%); height: 44px; }

/* ── Hero: the figure dissolves into the ground on its left and bottom,
   so there is no photo-in-a-box and no crisp matte to get wrong. ── */
.hero { position: relative; overflow: hidden; isolation: isolate; }
/* ── The backdrop plate ───────────────────────────────────────────────
   A defocused photograph of a warm, lamp-lit textured wall, standing in
   for the panelled room in his own portrait. The figure in front of it is
   a separate transparent element rather than baked in, so it stays crisp,
   reflows on its own at narrow widths, and the scrim over the plate can be
   tuned and measured without rebuilding the image ladder.

   The plate is cropped low in the source frame on purpose: that is where
   the wall light falls, and it is what lets a navy suit read against it
   (6.6:1 where the top of the frame gave 1.7:1). */
.backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* out of flow: with the image in normal flow, height:100% has no definite
   parent height to resolve against and it reverts to its own aspect ratio */
.backdrop img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    /* 78% rather than centred: the source has a crisp vertical where the
       stone wall meets the window mullion, and centred it fell in open
       space and read as a straight seam between the flat colour and the
       photograph. At 78% it tucks in behind his shoulder and the left two
       thirds becomes one continuous wall. */
    object-fit: cover; object-position: 78% 62%; display: block;
    /* Dissolve the photograph into the ground instead of letting it meet
       the flat colour on a straight edge. One off-centre radial mask fades
       it out on every side at once -- left, top and bottom -- so it reads
       as emerging from the dark rather than being a panel laid over it.
       Centred on the figure, which is the part that should stay solid. */
    -webkit-mask-image: radial-gradient(125% 150% at 78% 40%,
        #000 26%, rgba(0,0,0,.72) 52%, rgba(0,0,0,.28) 74%, transparent 92%);
            mask-image: radial-gradient(125% 150% at 78% 40%,
        #000 26%, rgba(0,0,0,.72) 52%, rgba(0,0,0,.28) 74%, transparent 92%);
}
/* The scrim. Heavy over the copy, opening up towards the figure so the
   lamp still reads. Measured against every line of hero type. */
.hero::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background:
      /* A darkening across the very top. The bar sits at z-index 4, above
         this scrim, so its near-white nav was landing straight on the
         window glass at 4.15:1. This shades behind the bar without dimming
         the type itself, and fades out by a fifth of the way down so it
         does not read as a band. */
      linear-gradient(180deg,
        rgba(21,16,12,.80) 0%, rgba(21,16,12,.38) 11%, transparent 21%),
      /* A soft lift behind the figure, not a darkening. Measured, the edge
         that reads as cut out is his LIT shoulder and arm (luminance 0.158)
         against backdrop that had fallen to 0.014 beside it. Darkening the
         surround made that worse; raising it towards his own tone is what
         closes the gap, and it reads as light spilling from the window
         behind him. */
      radial-gradient(34% 46% at 80% 52%,
        rgba(214,186,150,.30) 0%, rgba(214,186,150,.16) 55%, transparent 100%),
      radial-gradient(70% 80% at 76% 40%, rgba(210,169,105,.13) 0%, transparent 68%),
      linear-gradient(97deg,
        rgba(21,16,12,.90) 0%,  rgba(21,16,12,.86) 26%,
        rgba(21,16,12,.78) 42%, rgba(21,16,12,.62) 56%,
        rgba(21,16,12,.46) 70%, rgba(21,16,12,.34) 84%,
        rgba(21,16,12,.26) 100%);
}
/* Narrow widths stack the hero, so the copy sits over the lit half of the
   plate rather than the dark half. Measured at 390 the brass role line came
   to 4.14:1 against it, under the 4.5 it needs at 20px, so the scrim gets
   heavier rather than the type getting bigger. */
@media (max-width: 860px) {
    .hero::before {
        background:
          radial-gradient(70% 60% at 76% 30%, rgba(210,169,105,.10) 0%, transparent 70%),
          linear-gradient(180deg,
            rgba(21,16,12,.93) 0%, rgba(21,16,12,.90) 55%,
            rgba(21,16,12,.80) 80%, rgba(21,16,12,.62) 100%);
    }
}
.hero .wrap { position: relative; z-index: 2; }
.lead { max-width: 62ch; padding-block: clamp(26px, 3.6vw, 52px) clamp(48px, 8vw, 104px); }
/* Sized to hold his name on one line on desktop. The 16ch cap was what
   forced the break, so it is gone; the hero column bounds it instead. */
.lead h1 {
    font-family: var(--serif); font-weight: 600;
    font-size: clamp(33px, 4.3vw, 62px); line-height: 1.04; letter-spacing: -.022em;
    font-variation-settings: 'opsz' 96;
    max-width: 24ch;
}
/* The role sits in roman with one phrase in italic, rather than the whole
   line italic: the emphasis lands on what he actually is. */
.lead .role em { font-style: italic; }
.lead .role {
    margin-top: clamp(12px, 1.5vw, 18px);
    font-family: var(--serif); font-style: normal; font-weight: 400;
    font-size: clamp(20px, 2.3vw, 32px); line-height: 1.24; letter-spacing: -.01em;
    color: var(--brass); max-width: 26ch;
}
.lead .intro {
    margin-top: clamp(20px, 2.4vw, 30px);
    font-size: clamp(16.5px, 1.5vw, 18.5px); line-height: 1.66; color: var(--dim);
    max-width: 52ch;
}
.lead .intro b { color: var(--bone); font-weight: 600; }
.cta {
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: clamp(22px, 2.6vw, 32px);
    font-size: 15px; font-weight: 600; color: var(--brass);
    padding-bottom: 8px; border-bottom: 2px solid rgba(210,169,105,.4);
}
.cta:hover { border-bottom-color: var(--brass); }

.figure { position: absolute; right: 0; bottom: 0; z-index: 2;
          width: min(44vw, 560px); margin: 0; }
.figure img {
    filter: drop-shadow(18px 22px 44px rgba(0, 0, 0, .34));
    /* The hero clips its own overflow, so his torso was being cut by a
       dead-straight horizontal line at the bottom edge -- shirt and tie
       stopping mid-stroke. This fades him into the ground over the lower
       fifth instead, so the figure and the background meet rather than one
       being sliced by the other. The mask applies after the filter, so the
       drop shadow fades with him. */
    -webkit-mask-image: linear-gradient(to bottom,
        #000 58%, rgba(0,0,0,.92) 72%, rgba(0,0,0,.55) 87%, transparent 100%);
            mask-image: linear-gradient(to bottom,
        #000 58%, rgba(0,0,0,.92) 72%, rgba(0,0,0,.55) 87%, transparent 100%);
}
.figure img { width: 100%; }

/* ── Body ─────────────────────────────────────────────────────────── */
.body { padding-block: clamp(44px, 6vw, 88px) clamp(30px, 4vw, 52px); border-top: 1px solid var(--line); }
.body h2 {
    font-family: var(--serif); font-weight: 600;
    font-size: clamp(27px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -.018em;
    font-variation-settings: 'opsz' 48;
    max-width: 22ch;
}
.body h3 {
    font-family: var(--serif); font-weight: 600;
    font-size: clamp(19px, 1.9vw, 24px); line-height: 1.22; letter-spacing: -.012em;
    margin-bottom: 10px;
}
.body p { font-size: 17px; line-height: 1.72; color: var(--dim); }
.opening p { max-width: min(100%, 620px); }
.opening p {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(21px, 2.5vw, 31px); line-height: 1.34; letter-spacing: -.012em; color: var(--bone);
}
.top-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.areas { padding-top: clamp(14px, 1.8vw, 20px); border-top: 1px solid var(--line); }
.areas h2 { font-size: clamp(19px, 1.8vw, 23px); max-width: none; margin-bottom: clamp(14px, 1.6vw, 20px); }
.areas ul { list-style: none; display: grid; gap: 0; }
.areas li { font-family: var(--serif); font-weight: 600; font-size: clamp(20px, 2vw, 27px); letter-spacing: -.014em; padding-block: 11px; border-bottom: 1px solid var(--line); }
.areas li:last-child { border-bottom: 0; }


/* ── His words, set as type on the ground. No darkened photograph. ── */
.said { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: clamp(44px, 6vw, 86px); }
.said blockquote { max-width: min(100%, 940px); }
.said blockquote p {
    font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: clamp(25px, 3.8vw, 52px); line-height: 1.16; letter-spacing: -.02em; color: var(--bone);
}
.said cite {
    display: block; margin-top: clamp(18px, 2vw, 26px);
    font-family: var(--sans); font-style: normal; font-size: 15px; font-weight: 600; color: var(--brass);
}

.now h2 { font-size: clamp(24px, 2.6vw, 34px); }
.now p { max-width: 62ch; }

footer { border-top: 1px solid var(--line); padding-block: 26px 44px; color: var(--faint); font-size: 15px; }
footer .inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 28px; }
footer ul { list-style: none; display: flex; flex-wrap: wrap; column-gap: 22px; }
footer ul a { display: inline-block; padding-block: 12px; }
footer ul a:hover { color: var(--bone); }

.to-top {
    position: fixed; right: clamp(16px, 2.4vw, 30px); bottom: clamp(16px, 2.4vw, 30px);
    width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(244,239,231,.26);
    background: var(--bone); color: var(--ink); cursor: pointer;
    display: grid; place-items: center; z-index: 80;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { opacity: .86; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

@media (max-width: 1080px) {
    .figure { width: min(50vw, 520px); }
    .lead { max-width: 54ch; }
}
@media (max-width: 860px) {
    /* the figure moves out from behind the copy and sits under it, still
       dissolving into the ground rather than sitting in a box */
    .hero .wrap { display: flex; flex-direction: column; }
    .lead { max-width: none; padding-bottom: clamp(20px, 4vw, 30px); }
    .figure { position: relative; width: 78vw; max-width: 460px; margin-left: auto; margin-right: calc(-1 * clamp(20px, 3.4vw, 48px)); }
    .top-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
    footer .inner { justify-content: center; text-align: center; }
    footer ul { justify-content: center; }
}

/* ── About: a heading and a standfirst where the homepage has a figure ── */
.page-head { border-bottom: 1px solid var(--line); }
.page-head .wrap {
    padding-block: clamp(34px, 5vw, 78px) clamp(28px, 4vw, 54px);
    /* the heading had the full width and the right half sat empty */
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    gap: clamp(24px, 4vw, 64px); align-items: end;
}
.head-figure { margin: 0; align-self: end; }
.head-figure img { width: 100%; border: 1px solid var(--line); }
.page-head h1 {
    font-family: var(--serif); font-weight: 600;
    font-size: clamp(34px, 5vw, 70px); line-height: 1.02; letter-spacing: -.024em;
    font-variation-settings: 'opsz' 72;
    max-width: 16ch;
}
.page-head .lede {
    margin-top: clamp(16px, 2vw, 24px);
    font-size: clamp(16.5px, 1.6vw, 20px); line-height: 1.56; color: var(--dim);
    max-width: 58ch;
}

/* each section is a heading opposite its content, as on the homepage */
.sec { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
       column-gap: clamp(22px, 3.6vw, 62px); row-gap: 16px;
       padding-top: clamp(20px, 2.6vw, 34px); border-top: 1px solid var(--line); }
.sec + .sec { margin-top: clamp(30px, 4vw, 56px); }
.sec h2 {
    font-family: var(--serif); font-weight: 600;
    font-size: clamp(22px, 2.4vw, 31px); line-height: 1.12; letter-spacing: -.018em;
}
.sec .prose { max-width: 62ch; display: grid; gap: 14px; }
.sec .prose p { font-size: 17px; line-height: 1.72; color: var(--dim); }

/* credentials, with the in-progress ones marked. One class attribute, not
   two: a second is silently dropped and the marking is the point. */
.creds { list-style: none; display: grid; }
.creds li { display: grid; grid-template-columns: minmax(0, 1fr) auto;
            gap: 8px 24px; align-items: baseline;
            padding-block: 13px; border-top: 1px solid var(--line); }
.creds li:first-child { border-top: 0; padding-top: 0; }
.creds .what { font-family: var(--serif); font-weight: 600;
               font-size: clamp(16px, 1.5vw, 19px); letter-spacing: -.012em; }
.creds .who { display: block; margin-top: 3px; font-family: var(--sans);
              font-weight: 400; font-size: 13.5px; color: var(--faint); letter-spacing: 0; }
.creds .state { font-size: 14px; font-weight: 600; color: var(--faint); white-space: nowrap; }
.creds .state.live { color: var(--brass); }

.closing .prose p {
    font-family: var(--serif); font-size: clamp(17px, 1.8vw, 22px);
    line-height: 1.5; color: var(--bone); max-width: 54ch;
}

@media (max-width: 860px) {
    .sec { grid-template-columns: minmax(0, 1fr); }
    .page-head .wrap { grid-template-columns: minmax(0, 1fr); }
    .head-figure { width: 62vw; max-width: 300px; }
    .creds li { grid-template-columns: minmax(0, 1fr); }
    .creds .state { margin-top: 3px; }
}

/* ── Motion. Gated behind .js-anim so with JS off the page is complete. ── */
.js-anim .anim-reveal,
.js-anim .anim-stagger > * {
    opacity: 0; transform: translateY(14px);
    transition: opacity .55s cubic-bezier(.22,.61,.36,1),
                transform .55s cubic-bezier(.22,.61,.36,1);
}
.js-anim .anim-stagger > * { transition-delay: calc(var(--anim-i, 0) * .06s); }
.js-anim .anim-reveal.in-view,
.js-anim .anim-stagger.in-view > * { opacity: 1; transform: none; }

.js-anim [data-anim-words] .word {
    display: inline-block;
    opacity: 0; transform: translateY(.28em);
    transition: opacity .5s cubic-bezier(.22,.61,.36,1),
                transform .6s cubic-bezier(.22,.61,.36,1);
    transition-delay: calc(var(--word-i, 0) * .07s + .05s);
}
.js-anim [data-anim-words].in-view .word { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .js-anim .anim-reveal,
    .js-anim .anim-stagger > *,
    .js-anim [data-anim-words] .word {
        opacity: 1; transform: none; transition: none;
    }
}

/* ════════════════════════════════════════════════════════════════════
   Density pass. Measured at 1440: main was 1,160px tall with 33% of it
   carrying content and a hole around 330 by 660px where the 2x2 grid's
   fourth cell ran short, and the Live work band was 271px at 22%.
   ════════════════════════════════════════════════════════════════════ */

.sub-head { margin-top: clamp(44px, 5.6vw, 80px); }

/* ── The four points as a register, not a grid that leaves a hole ──── */
.reg-rows { margin-top: clamp(28px, 3.4vw, 46px); }
.reg-row {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
    gap: 8px clamp(24px, 3.4vw, 56px); align-items: start;
    padding-block: clamp(20px, 2.5vw, 32px); border-top: 1px solid var(--line);
}
.reg-row:first-child { border-top: 1px solid rgba(244, 239, 231, .30); }
.reg-row:last-child { border-bottom: 1px solid var(--line); }
.reg-row h3 { margin-bottom: 0; max-width: 24ch; }
.reg-row p { font-size: 16.5px; line-height: 1.7; }

/* ── A full-bleed interval. 3,000px of one flat dark ground needed a
      tonal event, and on this ground a light photograph is the strongest
      one available. No text over it. ────────────────────────────────── */
.interval { margin: 0; position: relative; height: clamp(170px, 20vw, 300px); overflow: hidden; }
/* out of flow: with the image in normal flow, height:100% has no definite
   parent height to resolve against and it reverts to its own aspect ratio */
.interval img { position: absolute; inset: 0; width: 100%; height: 100%;
                object-fit: cover; display: block; }

/* ── Live work: copy and a plate, so the band is not four fifths empty ── */
.now { border-top: 1px solid var(--line); }
.now .wrap {
    padding-block: clamp(34px, 4.4vw, 64px);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
    gap: clamp(24px, 4vw, 64px); align-items: stretch;
}
.now-copy p:not(.qual) { max-width: 58ch; }
.now-plate { margin: 0; position: relative; overflow: hidden;
             min-height: clamp(220px, 24vw, 330px); }
.now-plate img { position: absolute; inset: 0; width: 100%; height: 100%;
                 object-fit: cover; display: block; }

@media (max-width: 860px) {
    .reg-row { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
    /* This has to sit AFTER the base .now .wrap rule, not before it. Declared
       earlier in the file it lost on source order at equal specificity, and
       the Current work copy stayed in a 193px column on a phone. */
    .now .wrap { grid-template-columns: minmax(0, 1fr); }
    .now-plate { min-height: clamp(200px, 48vw, 290px); }
}

/* ── LinkedIn mark in the footer ──────────────────────────────────────
   Inline SVG, so nothing is fetched and it inherits the footer's own
   link colour through currentColor. The link carries an aria-label
   because it now has no text, and keeps a 44px target: the glyph is
   19px, so the rest comes from padding. */
.social { display: inline-flex; align-items: center; justify-content: center;
          width: 44px; height: 44px; padding-block: 0;
          /* a logo in the faint secondary tone reads as a grey smudge, so it
             takes the stronger text colour and the accent on hover */
          color: var(--dim); }
.social:hover { color: var(--brass); }
/* ── The footer icon row ───────────────────────────────────
   One li holds every social mark, so the footer list's own column-gap
   separates the row from the text links while the marks themselves sit
   closer together, as an icon cluster should. The -11px pulls the first
   glyph out to the text edge: each mark is centred in a 44px tap
   target, so its ink starts about 11px in. */
.socials { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-left: -11px; }

.social svg { display: block; }

/* ── Print ────────────────────────────────────────────────────────────
   This site is bone type on a near-black ground. Browsers drop background
   colours when printing but keep the text colour, so without this the page
   printed as pale cream on white: invisible. Whitening `body` alone is not
   enough either, because every descendant reads its colour from the tokens,
   so the tokens themselves are redefined here. */

/* Print comes last on purpose: these overrides are the same
   specificity as the rules they replace, so source order is the
   only thing that makes them win. */
@media print {
    :root {
        --ink: #ffffff; --ink-2: #ffffff; --bone: #111111;
        --dim: #222222; --faint: #444444;
        --line: #bbbbbb; --brass: #000000;
    }
    body { background: #fff; color: #111; }
    .skip-link, .to-top, .interval, .now-plate, .backdrop { display: none; }
    .hero, .said, .now, main, footer { background: #fff; color: #111; }
    .said blockquote p, .said cite, .lead .role { color: #111; }
    .figure img, .head-figure img { filter: none; max-height: 90mm; width: auto; }
    a { text-decoration: underline; }
    /* the footer link is a logo now, so a printed page would show a mark
       with no address against it */
    .social svg { display: none; }
    .social { width: auto; height: auto; margin-left: 0; }
    .socials { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-left: 0; }
    .social.social--li::after { content: "linkedin.com/in/anton-alexander-p-61447026a"; }
    .social.social--yt::after { content: "youtube.com/@AntonAlexanderPalmer"; }
    .social.social--cb::after { content: "crunchbase.com/person/anton-palmer-d904"; }
    .social.social--pin::after { content: "pinterest.com/antonalexanderpalmer"; }
    .social.social--fl::after { content: "flickr.com/people/antonalexanderpalmer"; }
    .social.social--md::after { content: "medium.com/@antonalexanderpalmer"; }
    .social.social--sd::after { content: "scribd.com/AntonAlexanderPalmer"; }
    .social.social--wp::after { content: "antonalexanderpalmer.wordpress.com"; }
    .social.social--bl::after { content: "antonalexanderpalmer.blogspot.com"; }
    .social.social--tb::after { content: "tumblr.com/antonalexanderpalmer"; }
    .social.social--wf::after { content: "anton-alexander-palmer.webflow.io"; }
    .social.social--lt::after { content: "linktr.ee/AntonAlexanderPalmer"; }
    .social.social--x::after { content: "x.com/Anton__Palmer"; }
    .social.social--fb::after { content: "facebook.com/AntonAlexanderPalmer"; }
    .social.social--ig::after { content: "instagram.com/antonalexanderpalmer"; }
}

/* ── Standing strip, directly under the hero ──────────────────────────
   Adapted from the awards strip the reference sites run in this position.
   Theirs carry press and award logos; his equivalent is four academic and
   professional credentials, two of which are in progress rather than held.
   Institution logos would imply endorsement and would misstate that, so
   this is typographic and each item carries its own state. The label is
   sentence case, not a tracked uppercase micro-label. */
.standing-strip { background: var(--ink-2); border-block: 1px solid var(--line); }
.standing-strip .wrap { padding-block: clamp(20px, 2.4vw, 30px); }
.standing-strip h2 {
    font-family: var(--sans); font-size: 13px; font-weight: 600;
    color: var(--faint); margin-bottom: clamp(12px, 1.4vw, 18px);
}
.standing-strip ul {
    list-style: none; display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 32px);
}
.standing-strip li { border-top: 1px solid rgba(244, 239, 231, .20); padding-top: 12px; }
.standing-strip .what {
    display: block; font-family: var(--serif); font-weight: 600;
    font-size: clamp(14.5px, 1.35vw, 16.5px); line-height: 1.25;
    letter-spacing: -.012em; color: var(--bone);
}
.standing-strip .who {
    display: block; margin-top: 5px; font-size: 13px; line-height: 1.4;
    color: var(--faint);
}
.standing-strip .state {
    display: block; margin-top: 7px; font-size: 13px; font-weight: 600;
    color: var(--faint);
}
/* held and in-progress must never read the same */
.standing-strip .state.live { color: var(--brass); }

@media (max-width: 860px) {
    .standing-strip ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .standing-strip ul { grid-template-columns: minmax(0, 1fr); }
}