/* ============================================================
   BRAND THEME for the convention page - the 2026 People's Powerhouse
   style guide (see CLAUDE.md "## PP Brand Guidelines").

   Same contract as convention-warm.css: a THEME LAYER, not a replacement.
   It is loaded after the page's own <style> and only re-points colours,
   type and surface treatment, so every data-subtitle-key, list editor,
   live speaker/workshop fetch, countdown, 360 tour and map keeps working.
   Scoped under [data-theme="brand"] - switch the attribute on <html> to
   "warm" (or remove it) and the page reverts untouched.

   THE RULE THIS FILE IS BUILT AROUND (guide p.8, ratios verified):
   most accent pairings are titles-only, so accent colour blocks carry
   DISPLAY TYPE ONLY at 24px+, and all body copy sits on Heritage Cream,
   Midnight Blue, Dark Scarlet or Warm Red. Igniting Gold is the one
   accent safe for small text (Dark Scarlet on Gold = 8.2:1).
   ============================================================ */

/* Self-hosted so no CSP change is needed (font-src 'self') and no
   third-party request blocks first paint. Karla ExtraBold stands in for
   Highgate XBold, which is licensed to PP through their Adobe Fonts kit
   (use.typekit.net/dfh2rvo.css) - swap it in there when the kit's domain
   list includes peoplespowerhouse.app. */
@font-face{font-family:PPAnton;src:url("../fonts/Anton-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:PPKarla;src:url("../fonts/Karla-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:PPKarla;src:url("../fonts/Karla-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:PPKarla;src:url("../fonts/Karla-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
/* A REAL italic, not the browser's synthesised slant. Without this face a
   font-style:italic is faked by shearing the upright, which at the GREAT
   heading's 22px is visibly crude - a steeper, mechanical slant with distorted
   G and R and uneven strokes. Compared side by side before adding it; the
   24.5KB buys the difference. It is Karla's variable italic (one file covers
   the weight range), which is why the range is declared rather than a weight. */
@font-face{font-family:PPKarla;src:url("../fonts/Karla-Italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}

[data-theme="brand"]{
  /* the page's own tokens, re-pointed to the guide palette */
  --green:#0D9C62;         /* Park Green - the logo colour   */
  --green-bright:#0D9C62;
  --green-deep:#2F2259;    /* Midnight Blue: headings, footer, dark panels */
  --ink:#2F2259;
  --sun:#E74515;           /* Flame Orange */
  --gold:#D6C001;          /* Igniting Gold */
  --magenta:#ED6E95;       /* Fiery Pink */
  --teal:#0D9C62;          /* the neon teal has no place in this palette */
  --paper:#FAF2E2;         /* Heritage Cream */
  --mist:#F3E7CF;          /* tinted band on cream */
  --line:#E6D6B8;
  --shadow:none;           /* the brand is flat - no soft drop shadows */
  --radius:0px;            /* and square - no rounded corners */

  /* new tokens this theme introduces */
  --midnight:#2F2259;
  --cream:#FAF2E2;
  --scarlet:#4B1213;
  --red:#A12A24;
  --card:#ffffff;
  --body-ink:#3A3450;      /* 10.6:1 on cream */
  --muted-on-dark:#DED6EE; /* 8.7:1 on midnight */
  --display:PPAnton,Impact,Haettenschweiler,sans-serif;
  --face:PPKarla,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  /* ?v= IS LOAD-BEARING, NOT DECORATION. firebase.json caches every image
     (svg included) for 30 days, so changing this file's CONTENT at the same URL
     leaves returning visitors on the old tile for up to a month - which is
     exactly what happened when the boats were added and nobody who had already
     visited could see them. CSS is served must-revalidate, so bumping the token
     here propagates immediately. BUMP IT WHENEVER pp-sea.svg CHANGES.
     v2 = the 1080-wide tile with the red and gold boats. */
  --sea:url("/pp-sea.svg?v=2");
  /* pp-tapestry.svg is OFFICIAL toolkit artwork (IconTapestry-Landscape_2,
     2026-08-13). It REPLACED pp-tapestry.png, a 360x59 strip lifted from the
     .org.uk theme - and it is deliberately a NEW FILENAME rather than new
     content at the old URL, so the 30-day image cache cannot leave a returning
     visitor on the old strip (the trap documented above for --sea). The old PNG
     is deleted. Same rule applies here: if this file's CONTENT ever changes,
     add a ?v= token or change the name. */
  --tapestry:url("/pp-tapestry.svg");
}

/* ---------- ground + type ---------- */
[data-theme="brand"] body{background:var(--paper);color:var(--body-ink);font-family:var(--face)}
[data-theme="brand"] h1,[data-theme="brand"] h2,[data-theme="brand"] h3,[data-theme="brand"] h4{
  font-family:var(--face);font-weight:800;letter-spacing:-.015em;color:var(--ink);text-wrap:balance;
}
/* Anton is display only - the hero wordmark, the banner and the eyebrows,
   exactly as the guide's web note describes. */
[data-theme="brand"] .display,
[data-theme="brand"] .hero-title,
[data-theme="brand"] .ns-title{
  font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.94;
}
[data-theme="brand"] .eyebrow{
  font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.13em;
  font-size:.8rem;color:var(--red);
}
[data-theme="brand"] .sec-head h2{color:var(--ink);font-weight:800}
[data-theme="brand"] .sec-head p{color:var(--body-ink)}
[data-theme="brand"] .sec-head .eyebrow{color:var(--red)}

/* ---------- header ---------- */
[data-theme="brand"] header.site{background:var(--midnight);border-bottom:0;backdrop-filter:none}
[data-theme="brand"] .supported{color:rgba(250,242,226,.78)}
[data-theme="brand"] nav.tabs a{color:var(--cream);border-radius:0;font-weight:700}
[data-theme="brand"] nav.tabs a:hover{background:rgba(250,242,226,.14);color:var(--gold)}
/* the active tab was white on Park Green (3.5:1) at 13.8px - Dark Scarlet on
   Igniting Gold is 8.2:1 and still unmistakably an accent */
[data-theme="brand"] nav.tabs a.active{background:var(--gold);color:var(--scarlet)}

/* ---------- top banner: STOOD DOWN under the brand theme ---------- */
/* The maroon plate stacked a third device in front of the ticker and the
   panorama - a lot of banding before the hero even starts - so the whole strip
   is HIDDEN, not removed: the markup (and the editable conv_badge key with it)
   stays in the DOM, so deleting this one rule brings the banner straight back,
   and switching the theme off restores it untouched. The ticker beneath now
   leads the page. The colour rules are kept for that reason. */
[data-theme="brand"] .northstrip{display:none;background:var(--scarlet)}
[data-theme="brand"] .ns-band{display:none}
[data-theme="brand"] .ns-mid{background:var(--scarlet);padding:16px 18px}
[data-theme="brand"] .ns-title{color:var(--cream);letter-spacing:.06em;line-height:1.1}

/* ---------- ticker tape ---------- */
/* Decoration (aria-hidden in the markup), so the repeated wording is not an
   editable key. Park Green band, Midnight Anton - the device used on the live
   .org.uk convention page. */
.pp-ticker{display:none}
[data-theme="brand"] .pp-ticker{
  display:block;background:var(--green);overflow:hidden;padding:8px 0;
  border-top:3px solid var(--midnight);border-bottom:3px solid var(--midnight);
}
[data-theme="brand"] .pp-ticker-track{display:flex;width:max-content;animation:ppTick 36s linear infinite}
[data-theme="brand"] .pp-ticker-track span{
  font-family:var(--display);text-transform:uppercase;color:var(--midnight);
  font-size:clamp(1.2rem,3vw,2.1rem);letter-spacing:.02em;padding:0 20px;white-space:nowrap;
}
@keyframes ppTick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Scarborough panorama ---------- */
/* The South Bay in the brand's own idiom: flat geometry, palette colours only.
   A separate element from .hero-pano (the warm theme's naturalistic version),
   so switching themes swaps the artwork rather than editing it. */
.pp-pano{display:none}
[data-theme="brand"] .pp-pano{display:block;line-height:0;background:var(--paper)}
[data-theme="brand"] .pp-pano svg{display:block;width:100%;height:clamp(92px,13.2vw,190px)}
[data-theme="brand"] .hero-pano{display:none}   /* the warm panorama stands down */
/* The PP logo on the hillside is cropped away with the castle by the panorama's
   own xMidYMid slice, which is fine - but between roughly 436px and 552px the
   crop lands THROUGH the lockup rather than past it, and a logo sliced in half
   reads as a broken image rather than as a detail off the edge of a picture.
   So it is all-or-nothing: hidden until the whole lockup fits. The 552px is
   derived - the logo's right edge is viewBox x1290, and the slice only reaches
   x1290 once the viewport is 552px wide. Re-derive it if the logo moves. */
@media (max-width:551px){ [data-theme="brand"] .pp-pano image{display:none} }

/* ---------- sea divider + tapestry ---------- */
/* The section divider was PP's repeated gold icon thread (pp-thread.svg). It is
   now the SEA STRIP from the Scarborough panorama at the top of the page, so the
   divider echoes the page's own establishing image instead of introducing a
   second decorative motif. pp-sea.svg carries the panorama's exact sea values.
   `background-size:auto 100%` scales the tile with the band, so the waves keep
   their proportions at every width rather than stretching.
   NOTE pp-thread.svg is KEPT in public/ though nothing references it now. Since
   2026-08-13 it holds the OFFICIAL stitching artwork (Icon-Stitching-1) rather
   than the redraw it used to be, so a real thread is to hand if a thread divider
   is ever wanted again. */
.pp-sea,.pp-tapestry{display:none}
[data-theme="brand"] .pp-sea{
  display:block;
  /* DERIVED from the panorama, not chosen: the panorama is
     height:clamp(92px,13.2vw,190px) on a 1440x190 viewBox, and its sea band is
     the bottom 40 of those 190 units - so the divider is 40/190 (21.05%) of it,
     term by term. Keep the two in step: if the panorama's clamp changes, scale
     each of these three values by 0.2105 again. A flat 26px floor was tried
     first and made the divider 26px against the panorama's 19px on a phone -
     the same sea rendered two different thicknesses on one page. */
  height:clamp(19.4px,2.78vw,40px);
  /* The green is set as a background COLOUR as well as being in the tile. The
     tile scales with the band height, so its width is almost always fractional
     (at a 29px band it is 391.5px) - tiles then land on sub-pixel boundaries and
     the page's cream shows through the seam as a hairline. Painting the same
     green underneath means a sub-pixel gap reveals more sea, not the page. */
  background:var(--green) var(--sea) repeat-x center;background-size:auto 100%;
}
/* The footer divider is the real icon tapestry (Landscape 2), tiled. Same
   sub-pixel-seam guard as .pp-sea above: the tile is scaled to the band height
   so its width is almost always fractional, and a gap on a tile boundary would
   otherwise show the page's cream through a hard-edged colour block. The
   tapestry's own left edge is Flame Orange and its right edge is Midnight
   (sampled from the artwork), so Midnight underneath makes any seam read as one
   more pixel of the block that is already there. */
[data-theme="brand"] .pp-tapestry{
  display:block;height:59px;
  background:var(--midnight) var(--tapestry) repeat-x center;background-size:auto 100%;
}

/* ---------- hero ---------- */
[data-theme="brand"] .hero{
  background:var(--paper);color:var(--ink);padding:60px 0 64px;
}
[data-theme="brand"] .hero .glow{display:none}
[data-theme="brand"] .hero .waves{display:none}   /* nothing to transition from */
[data-theme="brand"] .hero-title{color:var(--ink);font-size:clamp(2.6rem,7vw,5.4rem);margin:14px 0 12px}
/* the title is one editable span carrying .grad, which paints with
   background-clip:text - reset that or the text stays transparent */
[data-theme="brand"] .hero .grad{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--ink);-webkit-text-fill-color:var(--ink);
}
[data-theme="brand"] .hero-title .pop{color:var(--sun);-webkit-text-fill-color:var(--sun)}
/* The year stands out in Warm Red - the same treatment the print pack gives 2026,
   so poster and page agree. 6.57:1 on cream, so it passes at any size (Flame
   Orange is 3.59 and Gold 1.65, i.e. large-text-only and fail respectively).
   text-fill-color must be reset too: .grad sets it, and it would otherwise win. */
[data-theme="brand"] .hero-title .yr{color:var(--red);-webkit-text-fill-color:var(--red)}
[data-theme="brand"] .hero .tag{color:var(--body-ink);font-weight:400;font-size:1.18rem;max-width:34em}
[data-theme="brand"] .hero .tag em{font-style:normal;font-weight:800;color:var(--ink)}
[data-theme="brand"] .meta-row .m{
  background:var(--card);border:2px solid var(--ink);color:var(--ink);padding:7px 13px;font-size:.94rem;
}
[data-theme="brand"] .meta-row .m b{color:var(--ink);font-family:var(--face);font-weight:700}
[data-theme="brand"] .ico{display:none}          /* the emoji fight the flat geometry */
[data-theme="brand"] .cost-note{color:var(--body-ink)}
[data-theme="brand"] .cost-note a{color:var(--ink);font-weight:800}
/* The warm neon poster stands down (board decision, 2026-08-11) and the hero
   tapestry takes the column. The poster is HIDDEN rather than removed, so
   conv_hero_image stays editable and returns by deleting this one rule. */
[data-theme="brand"] .hero-poster{display:none}
[data-theme="brand"] .hero .wrap{width:100%}
[data-theme="brand"] .hero-title{font-size:clamp(2.4rem,5vw,4.2rem)}

/* ---------- hero tapestry ---------- */
/* PP's colour-block grammar: two photographs from the 2025 convention, two brand
   icon tiles, and two figures from the day. Both fact pairings are guide
   combinations that carry SMALL text - Dark Scarlet on Igniting Gold is 8.2:1 and
   Heritage Cream on Midnight 12.6:1 - so the label under each figure is legible,
   not just the number. */
.pp-tap{display:none}
[data-theme="brand"] .pp-tap{
  display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:92px;gap:8px;
  justify-self:end;max-width:520px;width:100%;
}
[data-theme="brand"] .pp-tap-wide{grid-column:span 2;grid-row:span 2}
[data-theme="brand"] .pp-tap-ph{margin:0;overflow:hidden;background:var(--midnight)}
[data-theme="brand"] .pp-tap-ph img{width:100%;height:100%;object-fit:cover;display:block}
/* The motif sits CENTRED on a solid field rather than filling the tile: the
   guide's icons are motifs on colour, and a square viewBox pushed into a
   landscape tile either letterboxes or distorts. */
/* The icon is INSET BY PADDING and then fills that box with object-fit:contain -
   the same treatment .pp-tap-ph img already uses, and deliberately NOT the
   `width:auto;height:74%;max-width:84%` it used to carry. That older rule was
   written against a landscape motif and silently broke on a PORTRAIT one: when
   the official Unifying icon (viewBox 313x341) replaced the hand-drawn square
   redraw, Chrome stopped resolving the percentage height against the 92px tile
   and sized the image from its own intrinsic height instead - 111px in a 92px
   tile, clipped by the overflow:hidden above. Padding + contain has no
   percentage-height to resolve, so it holds for any aspect ratio. Keep the
   padding in step with grid-auto-rows: 92 - 24 = 68 tall (what the landscape
   icon rendered at before), 76 - 20 = 56 at the small breakpoint. */
[data-theme="brand"] .pp-tap-ic{overflow:hidden;padding:12px 13px}
[data-theme="brand"] .pp-tap-ic img{width:100%;height:100%;object-fit:contain;display:block}
[data-theme="brand"] .pp-tap-fact{display:flex;flex-direction:column;justify-content:center;padding:8px 14px}
[data-theme="brand"] .pp-tap-fact b{
  font-family:var(--display);font-weight:400;font-size:2.15rem;line-height:1;font-variant-numeric:tabular-nums;
}
[data-theme="brand"] .pp-tap-fact span{
  font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;margin-top:3px;
}
[data-theme="brand"] .pp-tap-gold{background:var(--gold);color:var(--scarlet)}
[data-theme="brand"] .pp-tap-navy{background:var(--midnight);color:var(--cream)}
[data-theme="brand"] .pp-tap-ic-navy{background:var(--scarlet)}
[data-theme="brand"] .pp-tap-ic-green{background:var(--green)}

/* ---------- sticker buttons ---------- */
[data-theme="brand"] .btn{
  border-radius:0;font-family:var(--display);font-weight:400;text-transform:uppercase;
  letter-spacing:.05em;font-size:.92rem;padding:14px 22px;border:0;
  transition:transform .12s ease,box-shadow .12s ease;
}
[data-theme="brand"] .btn-primary{
  background:var(--magenta);color:var(--scarlet);box-shadow:6px 6px 0 var(--midnight);
}
[data-theme="brand"] .btn-primary:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--midnight)}
[data-theme="brand"] .btn-ghost{
  background:var(--midnight);color:var(--cream);border:0;box-shadow:6px 6px 0 var(--magenta);
}
[data-theme="brand"] .btn-ghost:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--magenta)}
/* on the Midnight culture band and the closing block a light sticker reads better */
[data-theme="brand"] .culture .btn-primary,
[data-theme="brand"] .finalcta .btn-primary{
  background:var(--cream);color:var(--scarlet);box-shadow:6px 6px 0 var(--green);
}
[data-theme="brand"] .culture .btn-primary:hover,
[data-theme="brand"] .finalcta .btn-primary:hover{box-shadow:3px 3px 0 var(--green)}

/* ---------- countdown ---------- */
[data-theme="brand"] .cd{
  background:var(--midnight);border:0;border-radius:0;padding:14px 10px;min-width:92px;backdrop-filter:none;
}
[data-theme="brand"] .cd .n{color:var(--gold);font-family:var(--display);font-weight:400}
[data-theme="brand"] .cd .l{color:rgba(250,242,226,.8)}

/* ---------- bands ---------- */
[data-theme="brand"] .mist{background:var(--mist)}
/* No hairline borders: the band is bracketed by the sea strip above and below,
   so a border would sit directly against those strips. */
[data-theme="brand"] .funders{background:var(--card);border-top:0;border-bottom:0}
/* The credit line reads as a SENTENCE, so it is set in the body face, not the
   display face. Anton is condensed and caps-only in feel; at 11.84px with .16em
   tracking a 153-character acknowledgement was hard work. Dark Scarlet on the
   white card is 15:1, so the colour stays - only the type changes. */
[data-theme="brand"] .funders-label{color:var(--scarlet);font-family:var(--face);text-transform:none;letter-spacing:normal;font-weight:600}
[data-theme="brand"] .culture{background:var(--midnight)}
[data-theme="brand"] .culture h2,[data-theme="brand"] .culture h3,[data-theme="brand"] .culture h4{color:var(--cream)}
/* the page's own `.culture .sec-head p` sits at the same specificity as a bare
   themed rule, so it must be beaten explicitly - see the warm theme's note */
[data-theme="brand"] .culture .sec-head p{color:var(--muted-on-dark)}
[data-theme="brand"] .culture .eyebrow{color:var(--gold)}
[data-theme="brand"] .zone{border-left:4px solid var(--gold);border-radius:0;background:transparent}
[data-theme="brand"] .zone h4{color:var(--cream)}
[data-theme="brand"] .zone p{color:var(--muted-on-dark)}
[data-theme="brand"] .role{
  background:rgba(250,242,226,.07);border:1.5px solid rgba(250,242,226,.22);border-radius:0;box-shadow:none;
}
[data-theme="brand"] .role h4{color:var(--cream)}
[data-theme="brand"] .role p{color:var(--muted-on-dark)}

/* ---------- flat cards ---------- */
[data-theme="brand"] .xcard,
[data-theme="brand"] .act,
[data-theme="brand"] .spk-card,
[data-theme="brand"] .tli-card,
[data-theme="brand"] .wcard,
[data-theme="brand"] .venue-card{
  background:var(--card);border:2px solid var(--ink);border-radius:0;box-shadow:none;
}
[data-theme="brand"] .act:hover{transform:none}
/* the gradient rules on the cards' top bars become solid palette blocks */
[data-theme="brand"] .xcard::before{background:var(--green)}
[data-theme="brand"] .xcard:nth-child(2)::before{background:var(--sun)}
[data-theme="brand"] .xcard:nth-child(3)::before{background:var(--magenta)}
[data-theme="brand"] .xcard h3{color:var(--ink)}
[data-theme="brand"] .xcard p{color:var(--body-ink)}
/* THE ACRONYM IS THE POINT OF THIS CARD: "GREAT for everyone" is Good lives /
   Real opportunity / Equity / Agency / Togetherness, and nothing was saying so.
   Each promise's initial is an ITALIC WARM RED key letter and the promises are
   STACKED ONE PER LINE, so every letter starts at the left edge and they
   form a true vertical column: G-R-E-A-T reads down the card, and the word
   GREAT in the heading is italicised to match so the two read as one device.
   The initials were first set as solid cream-on-scarlet blocks, which worked
   but read as black and heavy. Once the promises are a COLUMN the alignment
   already carries the acronym, so the letters no longer have to shout: italic
   is a SHAPE signal rather than a weight one, and it lets the whole thing
   lighten to a 600 weight in body ink with the accent doing the work.
   Stacking is not decoration, it is the whole point. As a wrapped ROW the
   acronym never read in sequence at any width - 4+1 at 613px (an orphaned "T")
   and 2+3 in the 372px desktop column.
   The gold chip background goes with it, DELIBERATELY: five gold bars of ragged
   length stack into a heap rather than a list, and this card already sets the
   height of its three-card row, so the taller gold version dragged both
   siblings up with it.
   THE HEIGHT IS THEN PAID BACK by the split below: the promises sit BESIDE the
   heading rather than under it, so the card's height is the TALLER of the two
   columns instead of their sum. Measured at the real 357px desktop column, the
   three-card row goes 323px -> 254px (-21%), which also shrinks the dead space
   the other two cards inherit by stretching to this one.
   Done with ::first-letter DELIBERATELY, not by wrapping the letter in a span
   at render time: these promises are EDITABLE data (/siteContent conv_expect,
   one per line), so a hardcoded letter would go stale the moment somebody
   reworded one - this follows whatever text is stored. It also leaves the
   accessible name untouched, so a screen reader still reads "Good lives".
   Warm Red is 7.3:1 on the card and the promise text 11.8:1, both AAA. */
[data-theme="brand"] .great{
  flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:7px;
}
[data-theme="brand"] .great span{
  background:none;color:var(--body-ink);border-radius:0;font-weight:600;
  padding:2px 0;
}
[data-theme="brand"] .great span::first-letter{
  background:none;color:var(--red);font-style:italic;font-size:1.15em;
  padding:0;margin-right:.06em;
}
/* The heading's own acronym. Only ever emitted when the card's first word
   genuinely matches the initials of its promises - see acronymTitleHtml in
   convention-edit.js - so renaming either one stops the heading pretending. */
[data-theme="brand"] .xcard h3 .acr{font-style:italic}
/* The promises sit BESIDE the heading, not under it, so the card's height is
   the taller of the two columns rather than their sum (see above).
   Targeted with :has(.great) rather than :nth-child(3) so it follows the
   CONTENT - whichever card carries promises gets the split - instead of a
   position that a reordered card would silently break. Browsers without :has()
   simply keep the stacked layout, which is a graceful fall back rather than a
   broken one.
   The right-hand track is `auto`, so it takes the promises' natural width and
   gives the rest to the heading; that is what stops a narrow card overflowing.
   Verified with no overflow at 500/420/357/331px, the last being the card on a
   375px phone. Deliberately NO white-space:nowrap on the promises: it would
   keep each on one line but a long promise typed into the editor would then be
   CLIPPED by the card's overflow:hidden, and wrapping is the safer failure. */
[data-theme="brand"] .xcard:has(.great){
  display:grid;grid-template-columns:1fr auto;column-gap:20px;align-content:start;
}
[data-theme="brand"] .xcard:has(.great) .k,
[data-theme="brand"] .xcard:has(.great) h3,
[data-theme="brand"] .xcard:has(.great) p{grid-column:1;align-self:start}
[data-theme="brand"] .xcard:has(.great) .great{
  grid-column:2;grid-row:1/span 3;align-self:start;margin-top:4px;
}

/* ---------- Acts ---------- */
/* The number column becomes a solid colour block - the guide's flat
   colour-block language, and the only text on it is 3.2rem display type. */
[data-theme="brand"] .act .num,
[data-theme="brand"] .act.a1 .num,
[data-theme="brand"] .act.a2 .num,
[data-theme="brand"] .act.a3 .num{
  font-family:var(--display);font-weight:400;
  background-clip:border-box;-webkit-background-clip:border-box;
  display:flex;align-items:flex-start;justify-content:center;
  padding:14px 0;
}
[data-theme="brand"] .act.a1 .num{background:var(--green);color:var(--cream);-webkit-text-fill-color:var(--cream)}
[data-theme="brand"] .act.a2 .num{background:var(--sun);color:var(--scarlet);-webkit-text-fill-color:var(--scarlet)}
[data-theme="brand"] .act.a3 .num{background:var(--magenta);color:var(--scarlet);-webkit-text-fill-color:var(--scarlet)}
[data-theme="brand"] .act h3{color:var(--ink)}
[data-theme="brand"] .act .sub{color:var(--ink);font-weight:800}
[data-theme="brand"] .act .q{color:var(--ink);border-left:4px solid var(--gold);padding-left:13px;font-weight:400}
[data-theme="brand"] .act p.d{color:var(--body-ink)}
[data-theme="brand"] .act .chips span{
  background:var(--mist);border:1.5px solid var(--line);color:var(--ink);border-radius:0;
}
[data-theme="brand"] .act-people,[data-theme="brand"] .act-workshops{border-top:2px solid var(--line)}
[data-theme="brand"] .ap-lbl,[data-theme="brand"] .act-ws-lbl{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;color:var(--red);font-weight:400;
}
[data-theme="brand"] .ap-name{
  background:var(--card);border:1.5px solid var(--line);border-radius:0;color:var(--ink);
}
[data-theme="brand"] .ap-ini{background:var(--midnight);color:var(--cream);font-family:var(--face);font-weight:800}
[data-theme="brand"] .act-ws{background:var(--mist);border:1.5px solid var(--line);border-radius:0}
[data-theme="brand"] .act-ws[open]{background:var(--card)}
/* Workshop code pills ("1a", "2h"). Anton is a CONDENSED display face, so at the
   base 11.52px a digit-plus-lowercase pair sets tight and mushy - it is the one
   place on the page where the display face is doing small-label work. Rather
   than swap the face (which would break the brand look), it is sized up, given
   the tracking a condensed face needs at small sizes, and padded. min-width +
   centring makes every pill the same width: the codes are all two characters
   but their glyph widths differ, so a row of them was visibly ragged. */
[data-theme="brand"] .act-ws-code{
  background:var(--midnight);color:var(--cream);border-radius:0;font-family:var(--display);font-weight:400;
  font-size:.875rem;letter-spacing:.05em;padding:3px 9px;
  min-width:38px;text-align:center;display:inline-block;
}
/* The per-Act badges were bright gradients. They do NOT become per-Act colour
   blocks: at 11.5px cream-on-Park-Green is 3.17:1 and scarlet-on-Flame-Orange
   3.77:1, both under AA. Midnight carries small text at 12.6:1, and the Act is
   already signalled by the number column and by the code itself ("1a" v "2a"). */
[data-theme="brand"] .act-ws-code-a1,
[data-theme="brand"] .act-ws-code-a2,
[data-theme="brand"] .act-ws-code-a3{background:var(--midnight);color:var(--cream)}
[data-theme="brand"] .act-ws-caret{color:var(--ink)}
[data-theme="brand"] .act-ws-h{color:var(--ink)}
[data-theme="brand"] .act-ws-syn,[data-theme="brand"] .act-ws-fac{color:var(--body-ink)}
[data-theme="brand"] .act-ws-rep{background:var(--gold);color:var(--scarlet);border-radius:0}

/* ---------- running order ---------- */
[data-theme="brand"] .tl-day span,[data-theme="brand"] .tl-eve span{
  font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.07em;
  border-radius:0;background:var(--midnight);color:var(--cream);
}
[data-theme="brand"] .tl-eve span{background:var(--gold);color:var(--scarlet)}
[data-theme="brand"] .tl-caret,
[data-theme="brand"] .tl-eve.tl-sum .tl-caret,
[data-theme="brand"] .tl-day.tl-sum .tl-caret{color:var(--ink);opacity:.6}
[data-theme="brand"] .tli .time{font-family:var(--display);font-weight:400;color:var(--ink)}
[data-theme="brand"] .tli .time .til{color:var(--body-ink);font-family:var(--face);font-weight:700}
[data-theme="brand"] .tli h4{color:var(--ink)}
[data-theme="brand"] .tli p{color:var(--body-ink)}
[data-theme="brand"] .pill{
  background:var(--gold);color:var(--scarlet);border-radius:0;
  font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.08em;
}
[data-theme="brand"] .tli.cel .pill{background:var(--magenta);color:var(--scarlet)}
[data-theme="brand"] .tli.vip .pill{background:var(--midnight);color:var(--cream)}
[data-theme="brand"] .tli-card--a1{border-color:var(--green)}
[data-theme="brand"] .tli-card--a2{border-color:var(--sun)}
[data-theme="brand"] .tli-card--a3{border-color:var(--magenta)}
[data-theme="brand"] .tli-sess{background:var(--mist);border-left:4px solid var(--magenta);border-radius:0}
[data-theme="brand"] .tli-sess-t,[data-theme="brand"] .tli-syn{color:var(--ink)}
/* Same pill, in the running order's repeat block. It was BROKEN here: the base
   rule styles .tlw-code as bare coloured TEXT (no padding, opacity .72,
   font-weight 800), so bolting a Midnight background onto it painted a dark
   block hugging the glyphs with zero padding, washed out to 72%, and faux-bolded
   because Anton has no 800 weight. All four are corrected so it matches the
   pill in the Act cards exactly - one component, one look. */
[data-theme="brand"] .tlw-code{
  background:var(--midnight);color:var(--cream);border-radius:0;font-family:var(--display);
  font-weight:400;opacity:1;
  font-size:.875rem;letter-spacing:.05em;padding:3px 9px;
  min-width:38px;text-align:center;display:inline-block;margin-right:6px;
}
[data-theme="brand"] .tlp-lbl{font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;color:var(--red)}
[data-theme="brand"] .tli-repeats-h{color:var(--red)}
[data-theme="brand"] .tl-split-pill{
  background:var(--midnight);color:var(--cream);border-radius:0;
  font-family:var(--display);font-weight:400;text-transform:uppercase;
}
[data-theme="brand"] .tl-track--a{border-color:var(--sun)}
[data-theme="brand"] .tl-track--b{border-color:var(--magenta)}

/* ---------- speakers ---------- */
/* Square, full-bleed portraits - the mockup's treatment. The card's own padding
   is moved onto its text children, since the photo and the copy are siblings
   and cannot be wrapped without changing the markup the live fetch writes. */
[data-theme="brand"] .spk-card{padding:0;text-align:left;overflow:hidden}
[data-theme="brand"] .spk-photo,[data-theme="brand"] .spk-initials{
  width:100%;height:auto;aspect-ratio:1/1;border-radius:0;margin:0;
}
[data-theme="brand"] .spk-initials{
  background:var(--midnight);color:var(--cream);font-family:var(--face);font-weight:800;font-size:2.6rem;
}
[data-theme="brand"] .spk-card > *:not(.spk-photo):not(.spk-initials){
  padding-left:16px;padding-right:16px;
}
[data-theme="brand"] .spk-card > h3{padding-top:15px;color:var(--ink)}
[data-theme="brand"] .spk-card > :last-child{padding-bottom:16px}
[data-theme="brand"] .spk-role{color:var(--red);font-family:var(--display);font-weight:400}
[data-theme="brand"] .spk-session{justify-content:flex-start}
[data-theme="brand"] .spk-sess{background:var(--mist);border:1px solid var(--line);color:var(--ink);border-radius:0}
/* pale green ground with Midnight type: still unmistakably the green flag,
   but 11.4:1 rather than cream-on-green's 3.2:1 */
[data-theme="brand"] .spk-sess-ll{background:#D8F0E2;color:var(--ink);border-color:var(--green)}
[data-theme="brand"] .spk-blurb{color:var(--body-ink)}
[data-theme="brand"] .spk-more{color:var(--ink);font-weight:800}
[data-theme="brand"] .spk-card.spk-jump{animation:none;outline:3px solid var(--gold);outline-offset:-3px}

/* ---------- venue + tour ---------- */
[data-theme="brand"] .venue-card h3{color:var(--ink)}
[data-theme="brand"] .addr{color:var(--red);font-weight:800}
[data-theme="brand"] .factrow span{background:var(--mist);border:1.5px solid var(--line);color:var(--ink);border-radius:0}
[data-theme="brand"] .tour-wrap{background:var(--midnight);border-radius:0;border:0}
[data-theme="brand"] .tour-wrap h2,
[data-theme="brand"] .tour-wrap h3,
[data-theme="brand"] .tour-wrap h4,
[data-theme="brand"] .tour-head,
[data-theme="brand"] .tour-cta{color:var(--cream)}
[data-theme="brand"] .tour-wrap p,
[data-theme="brand"] .tour-sub,
[data-theme="brand"] .tour-credit{color:var(--muted-on-dark)}
[data-theme="brand"] .tour-wrap a{color:var(--gold)}
[data-theme="brand"] .mapwrap{border:2px solid var(--ink);border-radius:0}

/* ---------- webinars ---------- */
[data-theme="brand"] .wcard h4,[data-theme="brand"] .wcard h3{color:var(--ink)}
[data-theme="brand"] .wcard .date{color:var(--red);font-family:var(--display);text-transform:uppercase;letter-spacing:.1em}
[data-theme="brand"] .wcard p{color:var(--body-ink)}
[data-theme="brand"] .play{background:rgba(47,34,89,.76);border-radius:50%;color:var(--cream)}

/* ---------- closing block ---------- */
/* Warm Red rather than Flame Orange: its BODY copy has to pass, and cream on
   Warm Red is 6.6:1 where Dark Scarlet on Flame Orange is only 3.8:1. */
/* the block carried a 28px radius, and the webinar thumbs 11px - both fight the
   flat geometry. The circular play badge is left alone: a play control reads as
   round by convention. */
[data-theme="brand"] .finalcta{background:var(--red);color:var(--cream);border-radius:0}
[data-theme="brand"] .wthumb{border-radius:0}
[data-theme="brand"] .finalcta h2{
  color:var(--cream);font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;
}
[data-theme="brand"] .finalcta p{color:var(--cream)}
[data-theme="brand"] .finalcta .cost-note,[data-theme="brand"] .finalcta .cost-note a{color:var(--cream)}

/* ---------- footer ---------- */
[data-theme="brand"] footer.site{background:var(--midnight)}
[data-theme="brand"] footer.site a{color:var(--cream)}
[data-theme="brand"] footer.site a:hover{color:var(--gold)}

/* ---------- focus ---------- */
[data-theme="brand"] :focus-visible{outline:3px solid var(--midnight);outline-offset:3px}
[data-theme="brand"] header.site :focus-visible,
[data-theme="brand"] .culture :focus-visible,
[data-theme="brand"] .finalcta :focus-visible,
[data-theme="brand"] footer.site :focus-visible{outline-color:var(--gold)}

/* ---------- two inline styles on the page carry colour ---------- */
[data-theme="brand"] .venue-card p[style]{color:var(--body-ink)!important}
[data-theme="brand"] a.btn[style*="var(--mist)"]{
  background:var(--midnight)!important;color:var(--cream)!important;
  box-shadow:6px 6px 0 var(--magenta);
}
/* the webinars CTA carries an inline green gradient */
[data-theme="brand"] a.btn[style*="linear-gradient"]{
  background:var(--midnight)!important;color:var(--cream)!important;
  box-shadow:6px 6px 0 var(--magenta);
}

/* The page stacks the hero at 920px, but these themed rules are attribute-scoped
   and a media query adds NO specificity - so without restating the breakpoint the
   hero would stay two-column on a phone. */

/* ---------- "This is the North" official lockup ---------- */
/* Sized as a MARK, not a statement. The headline directly beneath says the same
   words (board decision, 2026-08-13), so at 130px+ the two read as a stutter;
   at 100px it reads as an identity mark above a title, which is the normal
   masthead convention. Ratio is the artwork's true 311:440 (0.7068) - Outlook
   is not in play here but a wrong ratio would still distort brand artwork, and
   the guide forbids altering it. */
.titn-mark{display:none}
[data-theme="brand"] .titn-mark{display:block;width:132px;height:187px;flex:0 0 auto}
/* Mark and headline sit SIDE BY SIDE - a masthead lockup beside the title rather
   than stacked above it, which also shortens the hero. align-items:center keeps
   the mark optically centred against a headline that wraps to 2-3 lines. */
[data-theme="brand"] .titn-head{display:flex;align-items:center;gap:24px;margin:0 0 6px}
[data-theme="brand"] .titn-head .hero-title{margin:0}
/* Ticker separator: the official lockup in place of the diamond. */
[data-theme="brand"] .pp-ticker-track span.tk-mark{padding:0 18px;display:flex;align-items:center}
[data-theme="brand"] .pp-ticker-track span.tk-mark img{height:1.55em;width:auto;display:block}


/* ---------- 2025 film in the hero (third column) ---------- */
/* HEIGHT IS MATCHED TO THE TAPESTRY so the two columns line up: the tapestry is
   4 rows of grid-auto-rows(92px) + 3 gaps(8px) = 392px. If either value changes
   above, change this with it. Width follows the film's true 9:16, so 392 * 9/16
   = 221px - the video is never distorted or cropped to fit. */
.hero-vid{display:none}
[data-theme="brand"] .hero-vid{
  display:block;position:relative;width:221px;height:392px;justify-self:end;align-self:center;
  border:3px solid var(--midnight);overflow:hidden;line-height:0;text-decoration:none;
}
[data-theme="brand"] .hero-vid video{width:100%;height:100%;object-fit:cover;display:block}
[data-theme="brand"] .hero-vid-cta{
  position:absolute;left:0;right:0;bottom:0;padding:9px 10px;font-family:var(--face);
  font-weight:800;font-size:.78rem;letter-spacing:.02em;line-height:1.2;
  color:var(--cream);background:rgba(47,34,89,.88);text-align:center;
}
[data-theme="brand"] .hero-vid:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
/* Three columns: copy | tapestry | film. The copy column keeps the most room -
   the headline and the two CTAs are what the hero is for. */
[data-theme="brand"] .hero-grid{grid-template-columns:1fr 380px 221px;gap:28px}
[data-theme="brand"] .titn-mark{width:104px;height:147px}
[data-theme="brand"] .titn-head{gap:18px}

@media (max-width:920px){
  [data-theme="brand"] .pp-tap{justify-self:center;max-width:460px}
  [data-theme="brand"] .hero-grid{grid-template-columns:1fr;gap:34px}
  [data-theme="brand"] .hero-vid{justify-self:center}
}
@media (max-width:860px){
  [data-theme="brand"] .hero-title{font-size:clamp(2.1rem,10vw,3rem)}
  [data-theme="brand"] .act .num{padding:10px 0}
}
@media (max-width:520px){
  [data-theme="brand"] .titn-mark{width:74px;height:105px}
  [data-theme="brand"] .hero-vid{width:181px;height:322px}
  [data-theme="brand"] .titn-head{gap:14px}
  [data-theme="brand"] .pp-tap{grid-auto-rows:76px;gap:6px}
  [data-theme="brand"] .pp-tap-ic{padding:10px 11px}   /* 76 - 20 = 56 tall */
  [data-theme="brand"] .pp-tap-fact b{font-size:1.7rem}
  [data-theme="brand"] .pp-tap-fact span{font-size:.66rem}
}
@media (prefers-reduced-motion:reduce){
  [data-theme="brand"] .pp-ticker-track{animation:none}
  [data-theme="brand"] .btn{transition:none}
}
