@font-face{font-family:"AnthropicSerifDisplay";
  font-weight:300;font-style:normal;font-display:swap;
  src:url("assets/AnthropicSerifDisplay-Light-Static.woff2") format("woff2"),
      url("assets/AnthropicSerifDisplay-Light-Static.otf") format("opentype");}
@font-face{font-family:"AnthropicSansDisplay";
  font-weight:600;font-style:normal;font-display:swap;
  src:url("assets/AnthropicSansDisplay-Semibold-Static.woff2") format("woff2"),
      url("assets/AnthropicSansDisplay-Semibold-Static.otf") format("opentype");}
/* ==========================================================================
   Claude SoCal — the single stylesheet. All nine pages link this file and
   nothing else: there are no page-local <style> blocks. Verified responsive
   at 390 / 768 / 1280.
   ========================================================================== */

/* ---- hero: people first, region named ---------------------------------------- */
.hero-metros{display:flex;align-items:center;gap:12px;margin-top:26px;flex-wrap:wrap;}
/* the site's one mono-label treatment. .sub-head .label joins it rather than
   restating the same four declarations under a second name (request 13). */
.hero-metros span,.sub-head .label{font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--working);}
.hero-metros i{width:16px;height:1px;background:var(--hairline);display:block;}
.hero-photos{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.hp{margin:0;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--hairline);background:var(--surface);}
.hp img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);}
.hp-lg{grid-column:1 / -1;aspect-ratio:16/9;}
.hp:not(.hp-lg){aspect-ratio:1/1;}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
}

.ams{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px);margin-top:clamp(18px,2.2vw,28px);}
.am{display:flex;gap:11px;align-items:flex-start;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-md);padding:14px;}
.am-face{flex:none;}
.am-face img,.am-mono{width:40px;height:40px;border-radius:var(--r-round);display:block;}
.am-face img{object-fit:cover;filter:grayscale(1);border:1px solid var(--hairline);}
.am-mono{background:var(--ink);color:var(--ground);display:grid;place-items:center;font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);}
.am-txt{min-width:0;}
.am-n{font-family:var(--sans);font-size:var(--type-3);margin:0;line-height:var(--leading-body);}
/* --working, not --accent: clay is not a meta colour, and the only two pages
   using .am carry 3 and 7 of these lines (request 5). */
.am-m{font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--working);margin-top:4px;}
.am-c{font-size:var(--type-2);color:var(--ink);margin-top:5px;line-height:var(--leading-body);}
@media (max-width:900px){
  .ams{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:480px){
  .ams{grid-template-columns:1fr;}
}
.fmts{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px);margin-top:clamp(22px,2.6vw,34px);}
.fmt{position:relative;}
.fmt-shot{margin:0;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--hairline);aspect-ratio:4/3;background:var(--surface);}
.fmt-shot img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);display:block;}
.fmt-icon{width:40px;height:40px;display:block;margin:-20px 0 0 14px;position:relative;background:var(--ground);border-radius:var(--r-round);padding:5px;border:1px solid var(--hairline);}
.fmt h3{font-family:var(--sans);font-size:var(--type-4);line-height:var(--leading-snug);margin-top:12px;}
.fmt p{font-size:var(--type-2);line-height:var(--leading-body);color:var(--ink);margin-top:6px;}
.fmt-meta{display:block;margin-top:9px;font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--working);}
@media (max-width:560px){
  .fmts{grid-template-columns:1fr;}
}
.pevs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px);margin-top:clamp(20px,2.4vw,30px);}
.pev{display:block;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden;color:inherit;transition:border-color .15s;}
.pev:hover{border-color:var(--ink);}
.pev-date{font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink);}
.pev-title{font-family:var(--sans);font-size:var(--type-3);line-height:var(--leading-body);margin-top:6px;}
.pev-host{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--hairline);}
.pev-host img,.pev-host .pm{width:26px;height:26px;border-radius:var(--r-round);flex:none;}
.pev-host img{object-fit:cover;filter:grayscale(1);border:1px solid var(--hairline);}
.pev-host .pm{background:var(--ink);color:var(--ground);display:grid;place-items:center;font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);}
.pev-host span{font-size:var(--type-2);line-height:var(--leading-body);color:var(--ink);}
@media (max-width:900px){
  .pevs{grid-template-columns:repeat(2,1fr);}
  .fmts{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .pevs,.fmts{grid-template-columns:1fr;}
}
.ev-note{font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);color:var(--working);letter-spacing:var(--track-body);}
.ev-host img+img{border:2px solid var(--surface);}
/* ---- spacing scale: one ramp, used everywhere. no ad-hoc clamps. ---------- */
.section{padding-top:var(--s7);}
.section .prose{margin-top:var(--s2);}
.hero{padding-top:var(--s6);padding-bottom:0;}
.stats{margin-top:var(--s7);}
.evs{margin-top:var(--s4);}
.ams,.fmts,.pevs{margin-top:var(--s4);}
.leads-head{margin-bottom:0;}
/* cards: smaller, tighter, consistent */
.pev-body{padding:var(--s3);}
/* ---- stat bar ------------------------------------------------------------ */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--hairline);}
.stat{border-right:1px solid var(--hairline);}
.stat:last-child{border-right:0;}
.stat-label{letter-spacing:var(--track-label);text-transform:uppercase;}
@media (max-width:900px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .stat:nth-child(2n){border-right:0;}
}
@media (max-width:480px){
  .stat-grid{grid-template-columns:1fr;}
  .stat{border-right:0;}
}

/* ==========================================================================
   CLAUDE SOCAL — landing prototype (ticket 006)
   Official Claude Community event kit. Nothing derived, nothing invented.

   PALETTE — the only hex values permitted anywhere in this file
     #faf9f5  ground / ivory        the page, and text on ink
     #ffffff  surface              cards and panels ONLY. must be earned.
     #141413  ink                  primary text, chips, inverted band
     #d97757  accent (clay)        fills, borders, one button. NOT body text.
     #bc5f41  pressed              hover / active only
     #57564f  working              secondary text and all labels
     #8c8a80  faint                past-event meta, fine print
     #e3e1da  hairline             rules, borders, desaturated chip fill

   TYPE — three families, three jobs, never crossed (P6)
     serif  AnthropicSerifDisplay-Light    h1, h2, city names, stat numerals
     sans   AnthropicSansDisplay-Semibold  card titles, values, buttons, lockup
     body   system grotesk                 prose only
     mono   system mono                    labels and chips ONLY

   SIZE (P7) — one modular scale, nine steps, defined in :root as --type-1..9.
     Largest step appears exactly once per page (the h1). No px literal appears
     as a font-size anywhere below this line.

   COLOUR HIERARCHY — ink is the page. --working is not "quiet body copy"; it is
     a role, and the test is what a line DOES, not what face it is set in:
       --ink      anything a reader reads or acts on — every paragraph, list
                  item, card title, venue, person's name, and every FACT even
                  when the fact is set in mono: dates (.tl-m/.tl-y/.tlc-when/
                  .ev-when), measured values (.mo-n), and controls (.fchip).
       --working  what NAMES a thing rather than being it — the mono label
                  register ("Hosted by", "REGISTERED", dt, chips, form labels),
                  captions and credits, footer fine print, and the nav.
     So mono is split by job, not painted quiet by default. Audited element by
     element: no paragraph of primary reading matter is left on --working.
     Measured at 1280, ink outnumbers --working on all nine pages, 1.8:1 to
     2.6:1. Mexico, the site this was judged against, measures 1.44:1.
     #8c8a80 (--faint) never paints text — it is a hairline token.

   ACCENT-AS-TYPE BUDGET (P8) — target <=2. Actual: 2 (the two "venue needed" flags).
   ========================================================================== */
:root{
  /* ---- TYPE SCALE ------------------------------------------------------
     Minor third, ratio 1.200, anchored on the 16px body step. Nine steps,
     no half-steps, nothing between them:

        11 . 13 . 16 . 19 . 23 . 28 . 33 . 40 . 48        (px)
        t1   t2   t3   t4   t5   t6   t7   t8   t9

     Derivation, 16 x 1.2^n rounded to the nearest whole pixel:
        16/1.2^2=11.11  16/1.2=13.33  16  19.20  23.04
        27.65  33.18  39.81  47.78
     Written in rem so the ladder tracks a reader's own base size.
     Every font-size in this file is one of these nine, or one of the three
     clamps below. There are no other type sizes on the site.               */
  --type-1:0.6875rem;   /* 11px  mono labels, chips, meta                   */
  --type-2:0.8125rem;   /* 13px  fine print, card meta, captions            */
  --type-3:1rem;        /* 16px  body — the anchor                          */
  --type-4:1.1875rem;   /* 19px  card titles, wordmark, sub-heads           */
  --type-5:1.4375rem;   /* 23px  lede, city names, past titles              */
  --type-6:1.75rem;     /* 28px  timeline numeral, stat numeral             */
  --type-7:2.0625rem;   /* 33px  event title (desktop)                      */
  --type-8:2.5rem;      /* 40px  section heading (desktop)                  */
  --type-9:3rem;        /* 48px  display — one element per page             */
  --type-10:3.625rem;   /* 58px  display ceiling, tablet — 48 x 1.2          */
  --type-11:4.3125rem;  /* 69px  display ceiling, desktop — 58 x 1.2         */
  /* ---- and exactly three fluid steps ---------------------------------
     Each interpolates BETWEEN two steps of the same ladder, and each vw
     coefficient is chosen so the floor still holds at 768 and the ceiling is
     already reached by 1280 — so at every viewport this site is measured at,
     a fluid size lands on a scale step, never between two.                 */
  /* 7vw hit the 48px ceiling at a 686px viewport, so the headline was FROZEN at 48px from
     686 all the way to 1600 — Mexico's grows 48 -> 80 across the same range and read 49%
     larger at 1280. Steps 10 and 11 exist ONLY as clamp endpoints: a clamp resolves to a
     single value at any given viewport, so distinct rendered sizes per page is unchanged. */
  --type-display:clamp(var(--type-9),calc(2rem + 2.8vw),var(--type-11));  /* 48 -> 69 */
  --type-heading:clamp(var(--type-6),3.3vw,var(--type-8)); /* 28 -> 40 */
  --type-subhead:clamp(var(--type-5),2.7vw,var(--type-7)); /* 23 -> 33 */
  /* ---- TRACKING LADDER — four tokens, derived from ROLE ----------------
     The curve runs ONE WAY: tracking opens as type gets smaller and closes as
     it gets larger, which is the optical truth for every face on this site.

        11-13px mono, UPPERCASE     +0.09em   the micro-label register
        everything set mixed case    normal   body, sans, mono meta, buttons
        19-28px serif               -0.01em   titles and headings
        33-48px serif               -0.02em   display

     Before this block the sheet carried TWENTY letter-spacing values across
     371 elements, four of them the same number written two ways
     (.02em/0.02em, .04em/0.04em, -.01em/-0.01em, -.02em/-0.02em) — the same
     half-pixel signature that the size scale was rebuilt to remove, one
     property over. And the serif curve was INVERTED: a 28px stat numeral sat
     at -.03em while the 48px h1 sat at -0.015em, so the small type was closed
     up harder than the large. It is now monotonic. Below this block there is
     no em literal on letter-spacing anywhere in the file.                   */
  --track-label:0.09em;
  --track-body:normal;
  --track-heading:-0.01em;
  --track-display:-0.02em;
  /* ---- LEADING LADDER — one line-height per type step, held -------------
        t1   11px  mono labels          --leading-label   1.4
        t2   13px  fine print           --leading-body    1.55
        t3   16px  body                 --leading-body    1.55
        t4   19px  titles, lede         --leading-snug    1.3
        t5-9 23-48 display, headings    --leading-tight   1.1

     There is no fifth value and no escape hatch. Buttons, chips and standalone
     numerals used to be set line-height:1 so their padding boxes came out
     symmetric; that put a second leading on 11px, 16px, 23px, 28px and 33px.
     They now take the ladder value for their step and their PADDING absorbs
     the difference, so every box is the height it was and no size on the site
     carries two leadings.

     Reading matter tightens as it grows — 1.55 at 13-16, 1.3 at 19, 1.1 at
     23 and up. Before this block: FOURTEEN values, five of them on 13px alone
     (1.35 / 1.4 / 1.5 / 1.55 / 1.6). Below this block there is no numeric
     line-height anywhere in the file.                                       */
  --leading-tight:1.1;
  --leading-snug:1.3;
  --leading-body:1.55;
  --leading-label:1.4;
  /* the hero's shared measure. The headline and the lede are ONE composed
     unit, so they are cut to the same column — not 14ch of display against
     46ch of body, which put a 278px headline above a 650px paragraph at 768
     and sent the eye to the paragraph.                                      */
  /* Was frozen at 28rem/448px from 768 up, so the headline shrank as a share of the
     viewport: 58% / 44% / 35% / 28% at 768 / 1024 / 1280 / 1600. Grows with the display now. */
  /* 44vw is right ONLY while a second column competes for the row. Below the 901px collapse
     there is no second column, so the headline sat in a 320-396px measure inside a 900px
     viewport, stacked to five lines and inflated the hero to 1,534px with dead gutter beside
     it. The collapsed state gets its own measure below. */
  --measure-hero:clamp(20rem,44vw,38rem);
  --r-pill:800px;--r-round:50%;--r-xl:14px;--r-lg:12px;--r-md:10px;--r-sm:8px;--r-xs:6px;--r-2xs:5px;--r-3xs:4px;--r-hair:3px;--focus-w:2px;--focus-off:2px;--focus-c:var(--ink);--s1:6px;--s2:10px;--s3:16px;--s4:24px;--s5:36px;--s6:clamp(40px,5vw,64px);--s7:clamp(56px,7vw,96px);--s8:clamp(72px,9vw,128px);--ground:#faf9f5;--surface:#ffffff;--ink:#141413;--accent:#d97757;--pressed:#bc5f41;--working:#57564f;--faint:#8c8a80;--hairline:#e3e1da;--serif:"AnthropicSerifDisplay",Georgia,"Times New Roman",serif;--sans:"AnthropicSansDisplay",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;--body:system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--gut:clamp(20px,5vw,64px);--maxw:1180px;}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
/* body{overflow-x:hidden} removed. It was masking real overflow. Measured with
   html,body{overflow-x:visible !important} injected: scrollWidth <= clientWidth
   on all 9 pages at 390/768/1280, so nothing needs the mask. */
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:var(--type-3);line-height:var(--leading-body);}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);}
/* the UA gives <hr> a grey currentColor; the rule itself is drawn with the
   hairline border, but leaving rgb(128,128,128) on the element is an off-token
   value waiting to be inherited by something. Measured before unscoping: 30
   off-palette computed values across the seven pages `.home .rule` never
   reached (request 3, filed twice). */
.rule{border:0;border-top:1px solid var(--hairline);margin:0;color:var(--hairline);}
/* ---------- type roles ------------------------------------------------ */
h1,h2,h3{margin:0;font-weight:400;}
/* The headline must DOMINATE at every width, not only at 1280.
   Measured before: h1 33 / 33 / 48 against a 23px lede — 1.43x, 1.43x, 2.09x,
   and the headline did not grow at all from 390 to 768 while the container
   more than doubled. Worse, .h1 was capped at 14ch and .lede at 46ch, so at
   768 a 278px headline sat above a 650px paragraph: the body copy was 2.34x
   WIDER than the display type and the eye went to the paragraph.
   Now: --type-display runs 40 -> 48 (t8 -> t9, both existing steps, 7vw so the
   ceiling is already reached by 686px and every measured viewport lands on a
   step), the lede drops one step to 19px and holds there, and both are cut to
   --measure-hero so the hero reads as one column of type.
   Result: 40/19, 48/19, 48/19 -> 2.11x, 2.53x, 2.53x.                       */
.h1{font-family:var(--serif);font-size:var(--type-display);line-height:var(--leading-tight);letter-spacing:var(--track-display);max-width:var(--measure-hero);}
.h2{font-family:var(--serif);font-size:var(--type-heading);line-height:var(--leading-tight);letter-spacing:var(--track-heading);}
.city-name{font-family:var(--serif);font-size:var(--type-5);line-height:var(--leading-tight);letter-spacing:var(--track-heading);}
.lede{font-size:var(--type-4);line-height:var(--leading-snug);color:var(--ink);max-width:var(--measure-hero);margin:20px 0 0;}
.prose{font-size:var(--type-3);line-height:var(--leading-body);color:var(--ink);max-width:56ch;margin:14px 0 0;}
.label{font-family:var(--mono);font-size:var(--type-2);line-height:var(--leading-body);letter-spacing:var(--track-body);color:var(--working);}
.value{font-family:var(--sans);font-size:var(--type-3);line-height:var(--leading-body);color:var(--ink);}
/* ---------- buttons ---------------------------------------------------- */
.btn{display:inline-block;font-family:var(--sans);font-size:var(--type-3);line-height:var(--leading-body);padding:10px 22px;border-radius:var(--r-pill);text-decoration:none;border:1px solid transparent;transition:background .15s,border-color .15s,color .15s;}
.btn-primary{background:var(--accent);color:var(--ink);border-color:var(--accent);}
.btn-primary:hover{background:var(--ink);color:var(--ground);border-color:var(--ink);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--ground);}
.btn-invert{background:var(--ground);color:var(--ink);border-color:var(--ground);}
.btn-invert:hover{background:var(--accent);border-color:var(--accent);color:var(--ink);}
.more{font-family:var(--sans);font-size:var(--type-3);line-height:var(--leading-body);text-decoration:none;color:var(--ink);border-bottom:1px solid var(--accent);padding-bottom:2px;}
.more:hover{border-bottom-color:var(--pressed);color:var(--pressed);}
/* ---------- skip link (WCAG 2.4.1 Bypass Blocks, Level A) --------------
   All ten pages repeat the same six nav links before their content, and there
   was no bypass mechanism: a keyboard or screen-reader user traversed the whole
   header on every page. Off-screen until focused, then it lands in the gutter
   above the fold. Ink on ivory is 17.8:1; the ivory focus ring on the ink field
   is the same pair the inverted band already uses, so no new colour enters. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;
  font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);letter-spacing:var(--track-label);text-transform:uppercase;
  background:var(--ink);color:var(--ground);text-decoration:none;
  padding:12px 20px;border-radius:0 0 var(--r-sm) 0;}
.skip-link:focus{left:0;outline:var(--focus-w) solid var(--ground);outline-offset:calc(var(--focus-off) * -2);}
/* main is a plain block wrapper; it carries the landmark, never a box. */
main{display:block;}
/* ---------- nav (P1) --------------------------------------------------- */
.nav{border-bottom:1px solid var(--hairline);background:var(--ground);}
.nav-in{display:flex;align-items:center;gap:28px;padding-top:18px;padding-bottom:18px;}
.lockup{font-family:var(--sans);font-size:var(--type-4);line-height:var(--leading-snug);letter-spacing:var(--track-body);text-decoration:none;white-space:nowrap;}
.nav-links{display:flex;gap:24px;margin-left:auto;list-style:none;padding:0;margin-block:0;}
/* the one deliberate exception to "if you read it, it is ink": the nav is
   chrome, it repeats above every page, and it sits beside the clay CTA, which
   is the thing in this bar that is meant to be loud. Hover takes it to ink.
   The FOOTER links are ink — a footer is an index of destinations, and it
   recedes by size and position rather than by a second text colour. */
/* ONE nav treatment, at every width. It used to change face AND case across
   the 900px step — sans sentence-case at 1280, mono uppercase at 768 and below
   — so the navigation was two different objects depending on the window. It is
   now the micro-label register everywhere, which is what a row of five nouns
   is: mono, uppercase, --type-1, --track-label. The 8px block padding gives a
   31px hit target at every width; before this it was an 18px inline box at
   1280, under the 24px minimum. */
.nav-links a{font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--working);text-decoration:none;display:block;padding:8px 0;white-space:nowrap;}
.nav-links a:hover{color:var(--ink);}
.nav-cta{margin-left:28px;padding-left:28px;border-left:1px solid var(--hairline);}
/* ---------- hero (P2) --------------------------------------------------- */
.hero{padding:clamp(48px,7vw,88px) 0 clamp(40px,5vw,64px);}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center;}
/* Above the single-column collapse the mosaic takes its height FROM the copy column, so both
   edges are shared. Centring two columns of unequal intrinsic height split the 80.9px
   difference into a 40.4px overhang at the top and another at the bottom, and the mosaic
   bottom aligned to nothing. .hp img already carries object-fit:cover, so nothing distorts. */
@media (max-width:900px){
  /* Collapsed: one column, so the headline may use the whole measure. */
  .home .h1{max-width:min(100%,22ch);}
}
@media (min-width:901px){
  .home .hero-grid{align-items:stretch;}
  .home .hero-photos{grid-template-rows:1.45fr 1fr;}
  .home .hero-photos .hp{aspect-ratio:auto;}
}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;}
.hero-photo{position:relative;}
.hero-photo img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:grayscale(1);border:1px solid var(--hairline);}
.photo-credit{font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);color:var(--working);margin-top:8px;}
/* ---------- stat bar (P3) ----------------------------------------------- */
.stats{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);}
.stat{padding:26px 24px 24px;border-left:1px solid var(--hairline);}
.stat:first-child{border-left:0;}
.stat-num{font-family:var(--serif);font-size:var(--type-8);line-height:var(--leading-tight);letter-spacing:var(--track-display);display:block;}
.stat-label{font-family:var(--mono);font-size:var(--type-2);line-height:var(--leading-body);color:var(--working);margin-top:12px;display:block;}
/* ---------- sections ----------------------------------------------------- */
.section{padding:clamp(48px,6vw,80px) 0;}
.section-head{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:28px;}
.section-head .more{margin-left:auto;}
.sub-head{margin:clamp(44px,5vw,64px) 0 24px;display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;}
.sub-head .more{margin-left:auto;}
/* ---------- event card (P5) ----------------------------------------------- */
.chip{display:inline-block;font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);padding:5px 13px;border-radius:var(--r-pill);background:var(--ink);color:var(--ground);}
.chip-past{background:var(--hairline);color:var(--working);border-radius:var(--r-xs);}
.chip-gap{background:transparent;color:var(--working);border:1px dashed var(--faint);border-radius:var(--r-xs);padding:4px 12px;}
.cards{display:grid;gap:20px;}
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;}
.card-title{font-family:var(--sans);font-size:var(--type-4);line-height:var(--leading-snug);margin:16px 0 0;}
.grid-lv{display:grid;grid-template-columns:76px 1fr;gap:10px 18px;margin-top:22px;padding-top:20px;border-top:1px solid var(--hairline);}

/* ---------- metros (P11) ---------------------------------------------------- */
.metros{border-top:1px solid var(--hairline);}
.metro{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;padding:24px 0;border-bottom:1px solid var(--hairline);text-decoration:none;}
.metro:hover .city-name{color:var(--pressed);}
.metro-go{font-family:var(--sans);font-size:var(--type-3);line-height:var(--leading-body);color:var(--ink);}
/* ---------- the one inverted band -------------------------------------------- */
.band{background:var(--ink);color:var(--ground);}
/* #e3e1da is the hairline/divider token. It painted the band's body copy one
   line below the rule that already set the right value, which put a fourth
   text colour on the page (request 17). Deleted, not overridden. */
.band .h2,.band .prose{color:var(--ground);}
/* padding-block, not `padding:<v> 0`: .band-grid is always on the same element
   as .wrap, so the shorthand's inline 0 cancelled .wrap's gutter and the band
   sat flush to the viewport edge below 1180px (request 4). */
.band-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;padding-block:clamp(48px,6vw,80px);}
.band-mark{width:120px;height:120px;overflow:hidden;position:relative;border-radius:var(--r-md);}
.band-mark img{position:absolute;width:341.1px;height:341.1px;left:-112.1px;top:-63.2px;max-width:none;}
.band .label{color:var(--ground);}
/* ---------- two doors (P12) ---------------------------------------------------- */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.door{border:1px solid var(--hairline);border-radius:var(--r-lg);padding:clamp(24px,3vw,32px);}
.door h3{font-family:var(--sans);font-size:var(--type-4);line-height:var(--leading-snug);margin:0 0 10px;}
.door .prose{margin-top:0;}
/* Child selector, not descendant. A .hero-actions row (flex, gap:12px) inside a .door put
   margin-top on BOTH buttons, so a wrapped row measured 20+12=32px instead of 12px. Invisible
   side by side, wrong the moment it wraps. Note a check reading .hero-actions gap PASSES while
   the page renders 32px, because the extra margin sits on the children. */
.door > .btn{margin-top:20px;}
.door-list{margin:14px 0 0;padding:0;list-style:none;}
.door-list li{font-size:var(--type-3);line-height:var(--leading-body);color:var(--ink);padding:8px 0;border-top:1px solid var(--hairline);}
/* ---------- join ---------------------------------------------------------------- */
/* .wrap sets `padding:0 var(--gut)`. A class co-applied with .wrap must use padding-block,
   never the padding SHORTHAND with a 0 horizontal value — that silently wipes the page gutter
   and the section's children land on the raw viewport edge. Cost us 114->50 on the join band
   and, earlier, text touching the screen edge in the inverted band. */
.join{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);}
.join-in{display:flex;align-items:center;gap:clamp(20px,4vw,56px);flex-wrap:wrap;padding-block:clamp(40px,5vw,64px);}
.join-in .btn{margin-left:auto;}
/* ---------- footer ------------------------------------------------------------- */
.footer{padding:clamp(44px,5vw,64px) 0 40px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;}
.foot-grid h3{font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);color:var(--working);font-weight:400;margin:0 0 12px;letter-spacing:var(--track-body);}
.foot-grid ul{list-style:none;margin:0;padding:0;}
.foot-grid li{padding:4px 0;}
.foot-grid a{font-size:var(--type-3);line-height:var(--leading-body);color:var(--ink);text-decoration:none;}
.foot-grid a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--hairline);}
.disclaimer{margin-top:clamp(32px,4vw,48px);padding-top:22px;border-top:1px solid var(--hairline);font-size:var(--type-2);line-height:var(--leading-body);color:var(--working);max-width:70ch;}
/* body type, not mono: this is a 136-161 character sentence on all ten pages,
   and mono is labels, chips and meta only. Matched to .disclaimer directly
   above it — same footer, same register, now the same face (request 15). */
.source-note{font-size:var(--type-2);line-height:var(--leading-body);color:var(--working);margin-top:10px;}
/* ---------- responsive ----------------------------------------------------------- */
@media (max-width:900px){
  .hero-grid,.band-grid,.doors,.foot-grid{grid-template-columns:1fr;}
  .foot-grid{gap:24px;}
  .nav-cta{margin-left:auto;padding-left:0;border-left:0;}
  .stat{border-bottom:1px solid var(--hairline);border-left:0;border-top:1px solid var(--hairline);padding:22px 0;}
  .stat:first-child{border-top:0;}
}
@media (max-width:560px){
  .grid-lv{grid-template-columns:70px 1fr;}
  /* the 150px date rail + gap + a 1fr that will not shrink overflows a 390px
     viewport. Collapse to one column and drop the divider that implied two. */
}

/* ---- ambassador strip: high on the page, low real estate ---------------------
   Travis: "feel like this is a movement with generals/leaders." Placed directly
   after the stat bar so it reads before the calendar, but kept to one row so it
   never competes with events for height (rule P4). */
.leads-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;}
.leads-head p{font-size:var(--type-3);line-height:var(--leading-body);color:var(--ink);margin:6px 0 0;max-width:56ch;}
.leads-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,24px);margin-top:22px;}
@media (max-width:900px){
  .leads-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:480px){
  .leads-grid{grid-template-columns:1fr;}
}
/* ============ EVENT COMPONENT — rebuilt =====================================
   Hierarchy, top to bottom, deliberately unambiguous:
     1  the official Luma cover   — the visual anchor, biggest element
     2  TITLE                     — largest text on the card
     3  date + time               — clearly second, mono so it never competes
     4  labelled facts            — city / venue / host
     5  host face + CTA           — who is behind it, then the action
   The cover is pulled straight from the event's Luma page, so what someone sees
   here is the same artwork they see when they land on the registration page. */
/* Third instance of the same guard. The poster renders only on the SOONEST upcoming event;
   later upcoming cards emit no .ev-cover, and a fixed first track would put .ev-body in the
   340px column. Load-bearing only on build dates with 2+ upcoming events — which is exactly
   when nobody would be looking. */
.ev{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-xl);overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;}
.ev:has(.ev-cover){grid-template-columns:minmax(0,340px) minmax(0,1fr);}
/* SPECIFICITY TRAP: a :has() guard is (0,2,0); a bare .ev inside @media is (0,1,0), and media
   queries add NO specificity. Every narrow-viewport override of a guarded rule must therefore
   repeat the :has() selector or the guard silently wins inside the media query. It cost us a
   card whose body track computed to 0px at 390 — invisible to page-level overflow checks
   because .ev sets overflow:hidden, so the content was clipped rather than pushing the page. */
/* The mono weekday above the serif date. The date leads on an event card and the weekday is
   what makes it scannable at a glance — it was lost in a regeneration and is restored here. */
.ev-day{font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--working);margin-bottom:2px;}
.ev+.ev{margin-top:clamp(20px,2.6vw,32px);}
/* The cover is a DESIGNED SQUARE poster, not a photograph — it must never be cropped.
   It sits on the ivory ground with real padding so it reads as a printed poster placed
   on the card, which is also how it appears on Luma. */
.ev-cover{background:var(--ground);border-right:1px solid var(--hairline);display:grid;place-items:center;padding:clamp(22px,2.4vw,32px);}
.ev-cover img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;display:block;border-radius:var(--r-md);}
.ev-body{padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;justify-content:center;}
.ev-title{font-family:var(--serif);font-size:var(--type-subhead);line-height:var(--leading-tight);letter-spacing:var(--track-heading);margin:14px 0 0;}
.ev-when{font-family:var(--mono);font-size:var(--type-2);line-height:var(--leading-body);color:var(--ink);margin-top:14px;letter-spacing:var(--track-body);}
.ev-when b{font-weight:400;color:var(--ink);}
.ev-facts{display:grid;grid-template-columns:auto 1fr;gap:9px 20px;margin-top:22px;padding-top:20px;border-top:1px solid var(--hairline);}
.ev-facts dt{font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--working);padding-top:3px;margin:0;}
.ev-facts dd{font-family:var(--sans);font-size:var(--type-3);line-height:var(--leading-body);color:var(--ink);margin:0;}
.ev-foot{margin-top:26px;padding-top:22px;border-top:1px solid var(--hairline);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.ev-host{display:flex;align-items:center;gap:10px;}
.ev-host img{width:38px;height:38px;border-radius:var(--r-round);object-fit:cover;filter:grayscale(1);}
.ev-host span{font-family:var(--mono);font-size:var(--type-1);color:var(--working);line-height:var(--leading-label);}
.ev-host b{display:block;font-family:var(--sans);font-size:var(--type-3);line-height:var(--leading-body);color:var(--ink);font-weight:400;}
@media (max-width:900px){
  .ev,.ev:has(.ev-cover){grid-template-columns:1fr;}
  .ev-cover{border-right:0;border-bottom:1px solid var(--hairline);padding:26px;}
  .ev-cover img{max-width:340px;margin-inline:auto;}
}
/* ==========================================================================
   SHARED ADDITIONS — events, cities, host, join
   Every value below resolves to a token already declared in :root. No new hexes.
   ========================================================================== */
/* ---------- page head block (cities, host, join, events) ------------------ */
.phead{padding:clamp(44px,6vw,80px) 0 clamp(28px,4vw,44px);}
.phead-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center;}
/* .phead-grid had no breakpoint, so the four city pages ran two columns down to
   390px — a 169px title beside a 153px "At a glance" card, with the lede set at
   ~22 characters per line. It collapses on the same 900px step as .hero-grid,
   .band-grid, .doors and .foot-grid, but the block has to sit AFTER the rule
   above: the 900px list near the top of the file is earlier in the cascade and
   at equal specificity this declaration would have beaten it (request 7). */
@media (max-width:900px){
  .phead-grid{grid-template-columns:1fr;}
}
.phead .prose{margin-top:18px;}
.metro-meta{display:flex;gap:clamp(20px,4vw,44px);flex-wrap:wrap;margin-top:30px;padding-top:22px;border-top:1px solid var(--hairline);}
.metro-meta div{min-width:0;}
.mm-k{font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--working);display:block;}
/* Stat numerals are ONE component. Three strips used to render the same four facts three ways
   — .stat-num serif 28, .mf-n serif 33, .mm-v sans 16 — which a judge called the single most
   visible system break on the site. All three now share the serif numeral treatment. */
.mm-v{font-family:var(--serif);font-size:var(--type-6);line-height:var(--leading-tight);letter-spacing:var(--track-heading);color:var(--ink);display:block;margin-top:6px;}
/* ---------- filter bar ---------------------------------------------------- */
.filters{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:20px 0;position:sticky;top:0;background:var(--ground);z-index:5;}
.filter-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.filter-row+.filter-row{margin-top:14px;}
.filter-key{font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--working);width:64px;flex:none;}
.fchip{font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);padding:6px 14px;border-radius:var(--r-pill);background:transparent;color:var(--ink);border:1px solid var(--hairline);cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.fchip:hover{border-color:var(--ink);color:var(--ink);}
.fchip[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink);}
.count{font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);color:var(--working);margin-left:auto;}
@media (max-width:560px){
  .filter-key{width:100%;}
  .count{margin-left:0;width:100%;}
}

/* the gap marker, desaturated — a past event has no venue to need, only one
   we never recorded. Clay is reserved for events someone can still act on. */
.flag-quiet{display:inline-block;font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);color:var(--working);border:1px dashed var(--faint);border-radius:var(--r-3xs);padding:5px 11px;}
/* no official poster exists for this event's format yet */
.ev[hidden]{display:none;}
.empty{font-family:var(--mono);font-size:var(--type-2);line-height:var(--leading-body);color:var(--working);padding:40px 0;}
/* ---------- forms --------------------------------------------------------- */
.form{max-width:640px;}
.field{margin-top:22px;}
.field>label{font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--working);display:block;margin-bottom:8px;}
/* WCAG 2.1 SC 1.4.11 wants 3:1 for the boundary that identifies a control.
   Measured: --hairline border was 1.31:1 on the white form panel and 1.24:1 on
   the ivory filter bar. --faint is 3.46:1 on white and 3.29:1 on ivory, and a
   control edge is exactly the hairline/border role the token is now limited to.
   It also leaves --working free for focus and --pressed free for invalid, so
   the three states of a field stay tellable apart (request B). */
.input,.select,.textarea{width:100%;font-family:var(--body);font-size:var(--type-3);line-height:var(--leading-body);color:var(--ink);background:var(--surface);border:1px solid var(--faint);border-radius:var(--r-sm);padding:13px 14px;transition:border-color .15s;}
.textarea{min-height:130px;resize:vertical;line-height:var(--leading-body);}
.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:720px){
  .field-pair{grid-template-columns:1fr;}
}
.hint{font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);color:var(--working);margin:8px 0 0;}
.form-foot{margin-top:30px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.notice{font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);color:var(--working);margin:0;}
/* ---------- rules list (host) --------------------------------------------- */
.rules{margin:22px 0 0;padding:0;list-style:none;max-width:56ch;}
.rules li{font-size:var(--type-3);line-height:var(--leading-body);color:var(--ink);padding:12px 0;border-top:1px solid var(--hairline);display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;}
.rules li:last-child{border-bottom:1px solid var(--hairline);}
.rules b{font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--working);font-weight:400;}
/* ---------- join ---------------------------------------------------------- */
.jcard{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:clamp(24px,3vw,32px);display:flex;flex-direction:column;height:100%;}
/* the metro name is now the first child of every .jcard, so the 14px it carried
   from when it sat under a mono label is a stray gap (request C). */
.jcard h3{font-family:var(--sans);font-size:var(--type-4);line-height:var(--leading-snug);margin:0;}
.jcard .prose{margin-top:10px;font-size:var(--type-3);line-height:var(--leading-body);}
.jcard .btn,.jcard form{margin-top:auto;padding-top:22px;}
.jnum{font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--working);}
.jcard .input{margin-top:0;}
/* a quiet sibling of .more — for past events, where a clay underline would
   multiply the accent across a page of eleven cards */
.more-quiet{font-family:var(--sans);font-size:var(--type-2);line-height:var(--leading-body);text-decoration:none;color:var(--ink);border-bottom:1px solid var(--hairline);padding-bottom:2px;}
.more-quiet:hover{border-bottom-color:var(--ink);}

/* ==========================================================================
   TIMELINE — /events. The card is the same .ev component; the timeline is
   only the rail, the node and the date rule that pin it to a moment.
   ========================================================================== */
.tl{position:relative;}
.tl-row{display:grid;grid-template-columns:78px 22px minmax(0,1fr);gap:0 clamp(14px,1.8vw,26px);}
.tl-row+.tl-row{margin-top:clamp(20px,2.6vw,32px);}
.tl-row[hidden]{display:none;}
.tl-row>*{min-width:0;}
.tl-date{padding-top:22px;text-align:right;}
.tl-m{font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink);display:block;}
.tl-d{font-family:var(--serif);font-size:var(--type-6);line-height:var(--leading-tight);display:block;margin-top:4px;letter-spacing:var(--track-heading);}
.tl-y{font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);color:var(--ink);display:block;margin-top:6px;}
/* the rail runs the full height of the row so consecutive rows join up */
.tl-rail{justify-self:center;align-self:stretch;width:1px;background:var(--hairline);position:relative;}
.tl-rail::before{content:"";position:absolute;top:28px;left:50%;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:var(--r-round);background:var(--ground);border:1px solid var(--faint);}
/* an event you can still act on gets the solid node */
.tl-up .tl-rail::before{background:var(--ink);border-color:var(--ink);}
.tl-up .tl-d{color:var(--ink);}
@media (max-width:720px){
  .tl-row{grid-template-columns:14px minmax(0,1fr);gap:0 16px;}
  .tl-date{display:none;}
  /* the date is already inside the card */
  .tl-rail::before{top:24px;}
}
/* the search field sits in the filter bar and is body type, not mono */
.search{max-width:420px;flex:1 1 260px;width:auto;padding:11px 14px;font-size:var(--type-3);line-height:var(--leading-body);}
@media (max-width:560px){
  .search{max-width:none;flex-basis:100%;}
}
/* ---------- venue, three states ------------------------------------------
   public      the name, plainly
   on_approval normal Luma behaviour, so it reads as information, not a fault
   needed      the only state that is a defect, and the only one in clay      */
.quiet-note{display:block;font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);letter-spacing:var(--track-body);color:var(--working);margin-top:4px;}
/* ---------- host faces and monograms -------------------------------------
   Kept in .ev-foot, below the rule that closes .ev-facts, so a face is never
   in the same block as a venue-sponsor credit. (Ticket 015.)                */
.ev-faces{display:flex;align-items:center;}
.ev-faces>*+*{margin-left:-8px;}
.ev-mono{width:38px;height:38px;flex:none;border-radius:var(--r-round);background:var(--ink);color:var(--ground);border:1px solid var(--ground);display:grid;place-items:center;font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);letter-spacing:var(--track-body);}
.ev-host img{border:1px solid var(--ground);}
/* .ev-host span (from the base component) sets colour on every span inside the
   host block, which swallowed the monogram's ivory text and made both the
   monogram and the "+n" badge invisible. Match its specificity to win back. */
.ev-host .ev-mono{background:var(--ink);color:var(--ground);}
/* ==========================================================================
   ADDITIVE — /events and /cities/*. Appended, nothing above is altered.
   Scoped to .months, .tlc, .tl-mark, .metro-figs, .ev-nohost. Palette is the
   six tokens only; no clay is spent here, the page already spends it on the
   nav CTA and the register button.
   ========================================================================== */
/* ---------- registrations by month ---------------------------------------
   A real measurement, not decoration: bar height is registrations / peak.    */
.months-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--hairline);}
.months-note{font-size:var(--type-2);line-height:var(--leading-body);color:var(--ink);}
.months{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:clamp(6px,1vw,14px);align-items:end;margin-top:18px;}
.mo{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;}
.mo-bar{display:block;width:100%;max-width:52px;height:96px;background:var(--hairline);border-radius:var(--r-hair);position:relative;order:2;}
.mo-fill{position:absolute;left:0;right:0;bottom:0;height:var(--h);background:var(--ink);border-radius:var(--r-hair);}
.mo-n{order:1;font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);color:var(--ink);letter-spacing:var(--track-body);}
.mo-l{order:3;font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--working);}
@media (max-width:560px){
  /* the narrow-viewport `.mo-l{letter-spacing:.04em}` that used to sit here was
     a fitting hack, not a decision — a fifth tracking value on the same 11px
     mono label so three characters would clear a narrower column. The label
     keeps --track-label at every width; the bar gets shorter instead. */
  .mo-bar{height:70px;}
}
/* ---------- year marker on the timeline ---------------------------------- */
.tl-mark .tl-card{display:flex;align-items:center;gap:14px;padding:6px 0 2px;}
.tl-mark .tl-card::after{content:"";flex:1;height:1px;background:var(--hairline);}
.tl-mark-t{font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);letter-spacing:var(--track-body);color:var(--working);}
.tl-mark .tl-rail::before{display:none;}
.tl-mark[hidden]{display:none;}
/* ---------- the archive card ---------------------------------------------
   Same .ev surface, laid out for scanning. 21 past events at full card size
   is a scroll, not a timeline — and 11 of the covers are the same artwork,
   so the cover runs as a thumbnail rather than a 300px square.               */
.tlc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,210px);gap:clamp(14px,2vw,26px);align-items:start;padding:clamp(16px,2vw,22px);border-radius:var(--r-lg);}
.tlc+.tlc{margin-top:0;}


.tlc-body{min-width:0;}
.tlc-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.tlc-when{font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);color:var(--ink);letter-spacing:var(--track-body);}
.tlc-title{font-family:var(--serif);font-size:var(--type-4);line-height:var(--leading-snug);letter-spacing:var(--track-heading);margin:10px 0 0;}
.tlc-title a{text-decoration:none;border-bottom:1px solid transparent;}
.tlc-title a:hover{border-bottom-color:var(--ink);}
.tlc-where{font-family:var(--sans);font-size:var(--type-2);line-height:var(--leading-body);color:var(--ink);margin:9px 0 0;}
.tlc-where .quiet-note{display:inline;margin:0;}
.tlc-credit,.tlc-note{font-family:var(--mono);font-size:var(--type-1);color:var(--working);letter-spacing:var(--track-body);margin:9px 0 0;line-height:var(--leading-label);}
.tlc-side{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-left:clamp(14px,2vw,22px);border-left:1px solid var(--hairline);align-self:stretch;}
/* the compact card is a narrow column, so faces stack ABOVE the name rather
   than beside it — side by side, a two-host name ran under the avatars */
.tlc-side .ev-host{flex-direction:column;align-items:flex-start;gap:8px;}
.tlc-side .ev-host img,.tlc-side .ev-mono{width:28px;height:28px;font-size:var(--type-1);line-height:var(--leading-label);}
.tlc-side .ev-host span{font-size:var(--type-1);line-height:var(--leading-label);letter-spacing:var(--track-label);text-transform:uppercase;}
.tlc-side .ev-host b{font-size:var(--type-2);line-height:var(--leading-body);text-transform:none;letter-spacing:var(--track-body);margin-top:2px;}
.tlc-reg{font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--working);}
.tlc-reg b{font-family:var(--serif);font-size:var(--type-4);line-height:var(--leading-snug);letter-spacing:var(--track-heading);font-weight:400;color:var(--ink);text-transform:none;margin-right:5px;}
@media (max-width:900px){
  .tlc{grid-template-columns:minmax(0,1fr);}
    .tlc-side{grid-column:1 / -1;flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px 20px;padding-left:0;border-left:0;padding-top:14px;border-top:1px solid var(--hairline);}
  .tlc-side .ev-host{flex-direction:row;align-items:center;gap:9px;}
  .tlc-side .ev-host span{text-transform:none;letter-spacing:var(--track-body);font-size:var(--type-1);line-height:var(--leading-label);}
  .tlc-side .more-quiet{margin-left:auto;}
}
@media (max-width:480px){
  .tlc{grid-template-columns:minmax(0,1fr);gap:14px;}
    .tlc-side .more-quiet{margin-left:0;}
}
/* ---------- city page: the metro's own numbers ---------------------------- */
.metro-figs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--hairline);margin-top:clamp(28px,3.5vw,44px);}
.mf{padding:clamp(18px,2.4vw,26px) clamp(14px,2vw,22px);border-right:1px solid var(--hairline);}
.mf:last-child{border-right:0;}
.mf-n{display:block;font-family:var(--serif);font-size:var(--type-6);line-height:var(--leading-tight);letter-spacing:var(--track-heading);}
.mf-l{display:block;margin-top:10px;font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--working);}
.mf-s{display:block;margin-top:6px;font-size:var(--type-2);line-height:var(--leading-body);color:var(--working);}
@media (max-width:720px){
  .metro-figs{grid-template-columns:1fr;}
  .mf{border-right:0;border-bottom:1px solid var(--hairline);}
  .mf:last-child{border-bottom:0;}
}
/* ---------- a host with no published headshot ----------------------------
   Luma serves a stock placeholder for these. A monogram is the honest
   substitute; a stock avatar would read as a real face that isn't there.     */
/* ---------- form helper text: body type, not mono -------------------------
   ADDED (ambassadors/speakers/host/join pass). `mono` is reserved for labels;
   .hint and .notice both carry sentence-length copy, so they read as body.
   Scoped to `body.p-form` — the three form-bearing pages — so nothing else on
   the site changes. .hint and .notice are used only by those pages today; the
   class keeps the scope explicit rather than implicit. */
body.p-form .hint,body.p-form .notice{font-family:var(--body);font-size:var(--type-2);line-height:var(--leading-body);}
body.p-form .hint{color:var(--working);}
body.p-form .notice{color:var(--working);}
/* ==========================================================================
   LANDING PAGE — index.html only.

   Every rule below is scoped to `body.home`, a class no other page carries.
   That is deliberate: this stylesheet is shared, and /events, /cities-*,
   /host and /join reuse the same .ev / .evs / .pev component names. Scoping
   means nothing here can reach them. It also settles the cascade — this file
   contains two generations of rules for .ev, .stat and .section, and the
   older generation is physically later in the file, so an unscoped landing
   rule loses to it silently.

   No new hex values. Every colour resolves to a :root token.
   ========================================================================== */
/* ---- section rhythm: one ramp, top padding only, gaps come from the next
   section. The two sections that butt onto an <hr> get their own bottom. --- */
.home .section{padding:var(--s7) 0 0;}
/* the two sections that butt onto a hard edge — the ink band and the page end.
   #past merged into #events, so #formats is now the one above the band. */
.home #formats,.home #get-involved{padding-bottom:var(--s7);}
.home .section-head{margin-bottom:var(--s2);}
/* a section heading must outrank a decorative stat numeral and an event title.
   Measured at 1280 before: h1 59 / stat-num 38 / ev-title 38 / h2 22 — the
   heading ranked fourth. After: 59 / 40 / 38 / 30 (request 7, landing). */
.home .h2{line-height:var(--leading-tight);}
.home .section .prose{margin-top:var(--s2);}
.home .hero{padding:var(--s6) 0 0;}
/* ---- stat bar. The grid already draws an ink rule across the top, so the
   wrapper must not draw a second hairline under it. --------------------- */
.home .stats{border-top:0;border-bottom:0;}
.home .stat{padding:var(--s4) var(--s3);border-left:0;border-top:0;border-right:1px solid var(--hairline);}
.home .stat:last-child{border-right:0;}
/* whichever cell starts a row must start on the page's left margin — its 16px
   left padding put the first numeral 16px inside the gutter every other band
   on the page respects (request 8). Column count changes at 900 and 480. */
.home .stat:first-child{padding-left:0;}
.home .stat-num{font-size:var(--type-6);line-height:var(--leading-tight);letter-spacing:var(--track-heading);}
.home .stat-label{font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--working);margin-top:var(--s1);}
@media (max-width:900px){
  .home .stat{border-bottom:1px solid var(--hairline);}
  .home .stat:nth-child(2n){border-right:0;}
  .home .stat:nth-child(odd){padding-left:0;}
  .home .stat:nth-last-child(-n+2){border-bottom:0;}
}
@media (max-width:480px){
  .home .stat{border-right:0;border-bottom:1px solid var(--hairline);padding-left:0;}
}
/* ---- upcoming event card -------------------------------------------------
   The official Luma cover is half the card, square, and never cropped. That
   is why the list is capped at 820px: at full page width a 50% square cover
   would be a 500px poster and the card would be taller than a laptop screen.
   The cover already carries CLAUDE COMMUNITY, the city and the format, so the
   text beside it carries only WHEN, WHERE and WHO.                          */
.home .evs{max-width:820px;}
.home .ev{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.home .ev+.ev{margin-top:var(--s3);}
.home .ev-cover{padding:var(--s3);background:var(--ground);border-right:1px solid var(--hairline);}
.home .ev-cover img{width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:var(--r-sm);}
.home .ev-body{padding:var(--s4);display:flex;flex-direction:column;justify-content:center;}
/* the date leads and is an absolute date — "Tonight" cannot be served statically */
.home .ev-facts{margin-top:var(--s3);padding-top:var(--s3);gap:8px 18px;}
.home .ev-facts dd{font-size:var(--type-2);line-height:var(--leading-body);}
.home .ev-note{display:block;margin-top:3px;}
/* the card body is 410px wide, so faces + two names + a button never fit on one
   line. Stacking is deterministic; space-between + wrap looked accidental. */
.home .ev-foot{margin-top:var(--s3);padding-top:var(--s3);gap:var(--s3);flex-direction:column;align-items:flex-start;justify-content:flex-start;}
.home .ev-host img{width:32px;height:32px;border:2px solid var(--surface);}
.home .ev-host img+img{margin-left:-10px;}
/* a host name is a name, not a label. mono is reserved for labels and chips.
   Targeted at the name run rather than every descendant span: the loose form
   also matched .ev-faces and would repaint an .ev-mono monogram --working on
   --ink, measured 2.5:1 against a 4.5:1 floor (request 11). */
.home .ev-host>span:last-child{font-family:var(--sans);font-size:var(--type-2);line-height:var(--leading-body);color:var(--ink);margin-left:3px;}
.home .ev .btn{padding:8px 20px;}
@media (max-width:900px){
  .home .ev{grid-template-columns:1fr;}
  .home .ev-cover{border-right:0;border-bottom:1px solid var(--hairline);padding:var(--s4);}
  .home .ev-cover img{max-width:280px;margin-inline:auto;}
}
/* ---- ambassadors ---------------------------------------------------------
   Sits between upcoming and past, and is sized to read as the spine of the
   thing rather than a byline. Counts and registrations come from
   content/events/stats.json; nothing is inferred from event titles.        */
.home .leads-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;}
.home .leads-head p{color:var(--ink);margin:var(--s2) 0 0;max-width:58ch;}
/* three ambassadors (brand/ROSTER.md), so three columns — four left an empty
   cell (request 9). Written body.home, not .home: site/index.html still carries
   a page-local `.home .ams{repeat(3,1fr)}` that is later in the cascade and at
   equal specificity beat the two step-downs below, so the landing page ran
   three 110px cards at 390. The extra type selector takes these rules back.
   When that page block is deleted, body.home can go back to .home. */
.home .ams{grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s5);}
.home .am{display:block;padding:var(--s4) var(--s3);border-radius:var(--r-lg);}
.home .am-face img{width:64px;height:64px;border-radius:var(--r-round);object-fit:cover;filter:grayscale(1);border:1px solid var(--hairline);}
.home .am-n{font-family:var(--sans);font-size:var(--type-4);line-height:var(--leading-snug);margin-top:var(--s3);}
/* two lines reserved so the rule under every card lands on the same baseline */
.home .am-m{font-family:var(--mono);letter-spacing:var(--track-label);margin-top:8px;line-height:var(--leading-label);min-height:32px;}
.home .am-c{font-size:var(--type-2);line-height:var(--leading-body);color:var(--ink);margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--hairline);}
.home .am-c b{font-family:var(--sans);font-weight:400;color:var(--ink);}
.home .am-c i{display:inline-block;width:3px;height:3px;border-radius:var(--r-round);background:var(--faint);vertical-align:middle;margin:0 5px 2px;}
@media (max-width:900px){
  .home .ams{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:480px){
  .home .ams{grid-template-columns:1fr;}
  .home .am-m{min-height:0;}
}
/* ---- formats ------------------------------------------------------------ */
.home .fmts{gap:var(--s3);margin-top:var(--s5);}
.home .fmt h3{margin-top:var(--s2);}
.home .fmt p{margin-top:6px;max-width:34ch;}
/* ---- past events ---------------------------------------------------------
   Same component idea, turned on its side. Six square clay covers stacked
   vertically became a block of accent taller than the upcoming event sitting
   above it, which inverted the page's hierarchy. Horizontal keeps the cover
   square and uncropped while returning the section to an index. Transparent,
   not white: white is earned by a distinct object, and a past event is a
   record, not an object. (P10.)                                            */
.home .pevs{grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s4);}
/* Same guard as .tlc: the archive cover was removed from recent_card(), leaving one child.
   A fixed first track put that child in the 92px column and rendered the rest empty. */
.home .pev{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;background:transparent;border-radius:var(--r-md);transition:border-color .15s,background .15s;}
.home .pev:hover{border-color:var(--ink);background:var(--surface);}
/* height:auto, matching .ev-cover img. Without it a poster marked up as
   <img width="1080" height="1080"> — the correct anti-layout-shift markup —
   resolved to a literal 1080px and each archive card grew to 1,102px tall
   (request 10). */
.home .pev-body{padding:var(--s3);min-width:0;}
.home .pev-title{color:var(--ink);margin-top:5px;}
.home .pev-host{margin-top:var(--s2);padding-top:0;border-top:0;gap:7px;}
.home .pev-host img{width:20px;height:20px;}
.home .pev-host>span:last-child{color:var(--ink);}
@media (max-width:900px){
  .home .pevs{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:720px){
  .home .pevs{grid-template-columns:1fr;}
}
/* ---- the one inverted band -----------------------------------------------
   The mark is the extracted glyph (assets/icons/), never the full 1080 poster
   with its arc lockup cropped down. It sits on an ivory disc for the same
   reason the poster puts it on clay: the glyph's counters are ivory fills and
   need a ground to read against.                                           */
.home .band-grid{padding-block:var(--s7);}
.home .band-mark{width:76px;height:76px;border-radius:var(--r-round);background:var(--ground);display:grid;place-items:center;position:static;overflow:visible;}
.home .band-mark img{position:static;width:100%;height:100%;max-width:100%;}
.home .band .h2{margin-top:var(--s4);}
.home .band-photo{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1);border-radius:var(--r-lg);}
/* ---- footer ------------------------------------------------------------- */
.foot-lede{max-width:32ch;}
/* ---------- form panel (host, speakers) -----------------------------------
   ADDED (ambassadors/speakers/host/join pass). A form is a distinct object, so
   it earns #ffffff off the ivory field — the same rule the event cards follow.
   Both form pages use it so /host and /speakers read as one component. */
body.p-form .formpanel{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:clamp(24px,3.4vw,40px);min-width:0;max-width:720px;margin-top:26px;}
body.p-form .formpanel>*{min-width:0;}
body.p-form .formpanel .form{max-width:none;}
/* zero the top margin on BOTH cells of the first row: the two .field cells
   share a grid row, so zeroing only the first one staggers the pair */
body.p-form .formpanel .form>:first-child .field{margin-top:0;}
/* each .rules li is its own grid, so an `auto` label column resizes per row and
   the sentences lose their common left edge. Fix the column instead. */
body.p-form .rules li{grid-template-columns:84px 1fr;}
/* ---- link hygiene --------------------------------------------------------
   The whole past-event card is one anchor, so every line inside it inherited
   the default underline: the date, the title and the host's name all read as
   three separate links. The card is the link; the title carries the hover. */
.home .pev,.home .pev:visited{text-decoration:none;}
.home .pev:hover .pev-title{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--hairline);}
.home .band-mark{padding:10px;}
/* ---- narrow-viewport corrections ----------------------------------------
   Three things only show up below 520px and each was verified in a real
   viewport, not by shrinking an element.                                   */
@media (max-width:480px){
  /* the 2-up rule above clears the bottom border on the last TWO cells,
     which at one column is stats 3 and 4 — they need it back. */
  .home .stat:nth-last-child(-n+2){border-bottom:1px solid var(--hairline);}
  .home .stat:last-child{border-bottom:0;}
}
@media (max-width:560px){
  /* the metro list wraps, and a trailing rule at the end of a line reads as
     a mistake. Space does the separating instead. */
  .home .hero-metros{gap:7px 18px;}
  .home .hero-metros i{display:none;}
  /* four 4:3 photos at full width made formats the tallest section on the
     phone. A 16:9 strip reads as supporting evidence, not four heroes. */
  .home .fmt-shot{aspect-ratio:16/9;}
}
/* ==========================================================================
   PAGE COMPONENTS THAT USED TO LIVE IN <style> BLOCKS
   /index, /ambassadors and /speakers each carried a page-local stylesheet.
   Most of it was already here, or inert. What was actually load-bearing is
   below, so those three blocks are gone and the site has one stylesheet again.
   ========================================================================== */
/* ---- /ambassadors: the three-up host cards ------------------------------
   .abs is the shared .cards grid, given a column count; .ab-* are the parts
   the shared card has no equivalent for — a 76px portrait, a head row, and a
   footed rail. Above the collapse the three cards share row heights through
   subgrid so head / facts / paragraph / foot land on common baselines.      */
.abs{grid-template-columns:repeat(3,1fr);margin-top:var(--s5);}
.ab-head{display:flex;align-items:center;gap:var(--s3);min-width:0;}
.ab-head>*{min-width:0;}
.ab-head .card-title{margin:0;overflow-wrap:break-word;}
.ab-foot{margin-top:auto;padding-top:var(--s4);}
.abs .grid-lv{grid-template-columns:1fr;gap:var(--s1) 0;margin-top:var(--s4);padding-top:var(--s4);}
.abs .grid-lv dd{margin:0;}
.abs .grid-lv dd+dt{margin-top:var(--s2);}
.ab-face{width:76px;height:76px;flex:none;border-radius:var(--r-round);overflow:hidden;background:var(--ink);color:var(--ground);display:grid;place-items:center;}
.ab-face img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);display:block;border:1px solid var(--hairline);}
.ab-venue{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--hairline);}
.ab-venue .label{display:block;}
.ab-venue .prose{margin-top:var(--s1);}
/* a tier-2 section head, one rung under .h2 on the same ladder */
.sub-head .h2{font-size:var(--type-4);line-height:var(--leading-snug);}
@media (min-width:901px){
  .abs{row-gap:0;}
  .abs .card{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0;}
  .abs .card>*{min-width:0;}
}
@media (max-width:900px){
  .abs{grid-template-columns:1fr;}
}
/* ---- /speakers: the three format panels ---------------------------------
   Duration carries the hierarchy here, because the kit's Spotlight glyphs
   embed raster portraits and cannot be used.                                */
.spk3{grid-template-columns:repeat(3,1fr);margin-top:30px;}
.spk-top{margin:0;}
.spk3 .card-title{margin-top:18px;}
.spk-dur{font-family:var(--serif);font-size:var(--type-6);line-height:var(--leading-tight);letter-spacing:var(--track-heading);}
.spk-unit{font-family:var(--mono);font-size:var(--type-1);line-height:var(--leading-label);color:var(--ink);margin-left:8px;}
.spk-next{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px;}
.spk-next div{border-top:1px solid var(--hairline);padding-top:14px;min-width:0;}
.spk-next .prose{margin-top:6px;}
@media (max-width:900px){
  .spk3,.spk-next{grid-template-columns:1fr;}
}
/* ---- /index: the two monograms inside the compact cards -----------------
   A monogram stands in for a host with no published headshot, so it has to
   match the face it replaces — 20px in the archive card, 32px in the event
   card — and <b> must not go bold in a face that has one weight.            */
.home .pev-host .pm{width:20px;height:20px;font-weight:400;font-size:var(--type-1);line-height:var(--leading-label);}
.home .ev-host .ev-mono{width:32px;height:32px;font-weight:400;}
/* ==========================================================================
   NARROW HEADER — the nav does not change what it IS below 900px, only how it
   folds. Measured before: 182.1px tall, FOUR rows, with HOST alone on row 3,
   on all nine pages, at the viewport most people use. Every one of those rows
   cost height the page could not spare.

   What made it four rows: an 18px block padding top and bottom, a 46px CTA at
   full desktop size, a 10px row gap, and a nav strip that carried its own
   hairline, its own top padding AND a second wrap of its own because five
   11px items measured 382px inside a 350px box.

   What it is now: two rows. The lockup and a compact CTA share row one; the
   five nouns fill row two on a single line, because the gap is --s3 rather
   than --s4 and 265px of type fits 350px of box with room left. The hairline
   above the strip is gone — the row gap separates it, and the header's own
   bottom border closes the block. Measured after: 88px, two rows, nothing
   stranded, every link on screen without scrolling.
   ========================================================================== */
@media (max-width:900px){
  .nav-in{flex-wrap:wrap;row-gap:var(--s1);padding-top:var(--s2);padding-bottom:var(--s2);}
  /* wrap, never overflow:auto. A scroll box hid the fifth link outright on a
     platform that suppresses the scrollbar, and on /host that hidden link was
     the one carrying aria-current="page". If the row ever cannot fit, an item
     drops to a new line and stays on screen. */
  /* The five nouns measure 266px of type. At a flat --s3 gap the row is 330px,
     which fits 390's 350px box but NOT the 320px box a 360px Android gives —
     and HOST would be stranded on a third row again at a width plenty of
     people use. The gap gives way before the row does: --s3 wherever there is
     room, down to --s2 at the narrow end. */
  .nav-links{order:3;flex-basis:100%;width:100%;min-width:0;margin:0;padding:0;gap:clamp(var(--s2),3vw,var(--s3));flex-wrap:wrap;}
  .nav-links li{flex:none;}
  .nav-links a{padding:var(--s1) 0;}
  /* the CTA is the tallest thing in the bar and it sets row one's height. At
     8px block padding it is 34px instead of 46px and still clears the 24px
     target minimum by ten. */
  .nav-cta .btn{font-size:var(--type-2);padding:6px 16px;}
}
/* ==========================================================================
   FOCUS — there were zero designed focus states. One ring, everywhere.
   --focus-c is ink: 17.5:1 on ivory, 18.4:1 on white, 5.9:1 on clay, so the
   ring clears the 3:1 non-text minimum against every surface in the palette.
   The offset puts the ring on the page ground, never inside a filled button.
   ========================================================================== */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,summary:focus-visible,.btn:focus-visible,.fchip:focus-visible,.ev:focus-visible,.pev:focus-visible,.tlc:focus-visible,.input:focus-visible,.select:focus-visible,.textarea:focus-visible{outline:var(--focus-w) solid var(--focus-c);outline-offset:var(--focus-off);border-radius:var(--r-3xs);}
/* fields keep their own corner so the ring traces the control, not a box */
.input:focus-visible,.select:focus-visible,.textarea:focus-visible{border-radius:var(--r-sm);border-color:var(--working);}
.input:focus,.select:focus,.textarea:focus{border-color:var(--working);}
/* on the one inverted band an ink ring would be invisible — go to ivory,
   which is 17.5:1 against the ink ground */
.band a:focus-visible,.band .btn:focus-visible{outline-color:var(--ground);}
/* keep the ring for keyboard users only; mouse clicks stay quiet */
:focus:not(:focus-visible){outline:none;}
/* Both form pages set aria-invalid on submit and nothing painted it, so a
   failed field kept the same border as one that passed. Last in the file on
   purpose: an invalid field that is also focused stays clay, and focus is still
   announced by the ring above, which is a separate property (request 16).
   --pressed on a border, not as text, so it does not spend the accent on copy. */
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--pressed);}