/* ============================================================
   togetherwithbecky.ca
   Barlow Condensed + Mulish, both SIL OFL, self-hosted.
   No third-party requests anywhere on this site.
   ============================================================ */
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Mulish";src:url("../fonts/mulish-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Mulish";src:url("../fonts/mulish-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --red:#D71920;
  --deep-red:#940701;
  --aqua:#8CE0E4;
  --aqua-dark:#7BD6DB;
  --azure:#18535B;
  --cream:#F6F1E7;
  --grey:#676667;
  --black:#111111;
  --white:#FFFFFF;

  --fs-accent:14px;
  --fs-body:16px;
  --fs-lede:20px;
  --fs-h3:24px;
  --fs-h2:32px;
  --fs-h1:48px;
  --fs-hero:clamp(44px,5.5vw,80px);

  --title:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Mulish",-apple-system,system-ui,sans-serif;

  --r-lg:32px;
  --r-md:20px;
  --r-sm:12px;
  --r-pill:999px;

  --edge:clamp(12px,2vw,28px);
  --max:82rem;
  --gap:clamp(16px,1.8vw,24px);
  --pad:clamp(28px,3.2vw,48px);
  --pad-in:clamp(22px,2.4vw,32px);
  --prose:34rem;

  /* Photography ratios. Two values, used everywhere. Do not introduce a third. */
  --ar-portrait:2/3;    /* 4:6 */
  --ar-landscape:3/2;   /* 6:4 */
  --hair:rgba(17,17,17,.10);

  /* The two spacing relationships that repeat everywhere. Change here only. */
  --space-eyebrow:18px;   /* eyebrow  -> headline */
  --space-heading:20px;   /* heading  -> body copy */
  --motif-max:.14;      /* peak opacity in the bottom-left corner — tune here */
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--cream);color:var(--black);
  font-family:var(--body);font-size:var(--fs-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;height:auto}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p,figure,blockquote{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.canvas{max-width:var(--max);margin-inline:auto;padding:var(--gap) var(--edge) 0}
.stack{display:grid;gap:var(--gap)}

/* ---------- card ---------- */
.card{
  background:var(--white);border-radius:var(--r-lg);padding:var(--pad);
  position:relative;overflow:hidden;isolation:isolate;
}
.card--flush{padding:0}
.card--azure{background:var(--azure);color:var(--white)}
.card--aqua{background:var(--aqua)}

/* nested card — the encapsulation inside the encapsulation */
.icard{background:var(--cream);border-radius:var(--r-md);padding:var(--pad-in)}


/* ---------- the motif ----------
   Quarter circle anchored to the bottom-left corner, mayflowers tiled and
   faded out radially. Renewal advancing from the left flank.
   Used TWICE on the whole site: the hero, and the footer. */
.motif::before{
  content:"";position:absolute;z-index:-1;left:0;bottom:0;
  width:min(58%,560px);aspect-ratio:1/1;pointer-events:none;
  background-image:url("../img/mayflower-scatter.svg");
  background-repeat:no-repeat;background-size:contain;background-position:left bottom;
  -webkit-mask-image:radial-gradient(circle at 0% 100%,rgba(0,0,0,.9) 0%,rgba(0,0,0,.55) 26%,rgba(0,0,0,.22) 52%,transparent 76%);
  mask-image:radial-gradient(circle at 0% 100%,rgba(0,0,0,.9) 0%,rgba(0,0,0,.55) 26%,rgba(0,0,0,.22) 52%,transparent 76%);
  opacity:var(--motif-max);
}

@media(max-width:700px){.motif::before{width:86%}}

/* ---------- type ---------- */
.t{font-family:var(--title);font-weight:700;line-height:1;text-transform:uppercase;letter-spacing:.01em}
.t--hero{font-size:var(--fs-hero);letter-spacing:-.015em;line-height:.94}
.t--h1{font-size:var(--fs-h1)}
.t--h2{font-size:var(--fs-h2)}
.t--h3{font-size:var(--fs-h3);font-weight:600}
.eyebrow{
  font-family:var(--title);font-weight:600;font-size:var(--fs-accent);
  text-transform:uppercase;letter-spacing:.2em;color:var(--grey);
  display:flex;align-items:center;gap:10px}
.card--azure .eyebrow{color:rgba(255,255,255,.75)}
.eyebrow .mf{width:18px;height:18px;flex:none}
.lede{font-size:var(--fs-lede);line-height:1.5}
.small{font-size:var(--fs-accent);color:var(--grey)}
.prose{max-width:var(--prose)}
.prose p{line-height:1.5}
.prose p + p{margin-top:1.25em}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--title);font-weight:600;font-size:var(--fs-body);
  text-transform:uppercase;letter-spacing:.09em;
  min-height:48px;padding:12px 26px;border:2px solid transparent;border-radius:var(--r-pill);
  text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.btn--red{background:var(--red);color:var(--white);border-color:var(--red)}
.btn--red:hover{background:var(--deep-red);border-color:var(--deep-red)}
.btn--line{background:transparent;color:var(--black);border-color:var(--black)}
.btn--line:hover{background:var(--azure);border-color:var(--azure);color:var(--white)}
.btn--sm{min-height:44px;padding:9px 20px;font-size:var(--fs-accent);letter-spacing:.1em}

/* small text CTA — aqua underscore. Reserved for in-card, secondary asks. */
.cta{
  align-self:flex-start;display:inline-block;
  font-family:var(--title);font-weight:600;font-size:var(--fs-body);
  text-transform:uppercase;letter-spacing:.11em;
  color:var(--black);text-decoration:none;padding:6px 4px 4px;
  background-image:linear-gradient(var(--aqua),var(--aqua));
  background-repeat:no-repeat;background-position:0 100%;background-size:100% 6px;
  transition:background-size .18s ease}
.cta:hover,.cta:focus-visible{background-size:100% 100%}

/* ---------- header ---------- */
.masthead{position:sticky;top:0;z-index:60;background:var(--white);
  border-radius:0 0 var(--r-lg) var(--r-lg)}
.masthead__in{position:relative;max-width:var(--max);margin-inline:auto;
  padding:12px var(--edge);
  display:flex;align-items:center;gap:36px;min-height:106px}
.logo img{height:77px;width:auto}
.logo--foot img{height:26px;width:auto}
.nav{margin-left:auto}
.nav ul{display:flex;gap:30px}
.nav a{font-family:var(--title);font-weight:600;font-size:var(--fs-body);
  text-transform:uppercase;letter-spacing:.12em;text-decoration:none;
  padding:6px 0;border-bottom:4px solid transparent;display:block}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--aqua)}
.masthead__cta{display:flex;gap:10px}
@media(max-width:640px){.logo img{height:42px}}

/* ---------- hero (locked) ---------- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center;
  min-height:clamp(400px,54vh,560px)}
.hero__text{display:flex;flex-direction:column;justify-content:center}
.hero h1{margin:var(--space-eyebrow) 0 var(--space-heading);max-width:16ch}
.hero__sub{max-width:36ch;color:var(--grey)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.cluster{position:relative;padding-bottom:14%}
.cluster__main{border-radius:var(--r-md);overflow:hidden;aspect-ratio:var(--ar-landscape)}
.cluster__main img{width:100%;height:100%;object-fit:cover;object-position:45% 50%}
.cluster__inset{position:absolute;right:-4%;bottom:0;width:42%;
  border-radius:var(--r-md);overflow:hidden;aspect-ratio:var(--ar-portrait);box-shadow:0 0 0 8px var(--white)}
.cluster__inset img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
@media(max-width:900px){
  .hero{grid-template-columns:1fr}
  .cluster{order:-1;padding-bottom:18%}
  .cluster__inset{width:38%}
}
@media(max-width:520px){.cluster__inset{display:none}.cluster{padding-bottom:0}}

/* ---------- dates strip — permanent extension of the hero ---------- */
.datestrip{
  margin-top:var(--pad);padding-top:var(--pad-in);border-top:1px solid var(--hair);
  display:grid;grid-template-columns:minmax(300px,auto) 1fr 1fr;gap:var(--pad-in);align-items:center}

/* the urgency block — red, ticking */
.countdown{
  background:var(--red);color:var(--white);
  border-radius:var(--r-md);padding:14px 20px 12px}
.countdown__label{
  font-family:var(--title);font-weight:600;font-size:var(--fs-accent);
  text-transform:uppercase;letter-spacing:.14em;margin-bottom:8px}
.countdown__clock{display:flex;align-items:flex-start;gap:14px}
.cseg{display:flex;flex-direction:column;align-items:center;min-width:44px}
.cseg b{
  font-family:var(--title);font-weight:700;font-size:var(--fs-h2);line-height:1;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.cseg i{
  font-style:normal;font-family:var(--title);font-weight:600;font-size:var(--fs-accent);
  text-transform:uppercase;letter-spacing:.1em;margin-top:4px}
.cseg + .cseg{position:relative}
.cseg + .cseg::before{
  content:":";position:absolute;left:-10px;top:0;
  font-family:var(--title);font-weight:700;font-size:var(--fs-h2);line-height:1;opacity:.5}

.datestrip__cell{display:flex;flex-direction:column;gap:4px}
.datestrip__when{font-family:var(--title);font-weight:700;font-size:var(--fs-body);
  text-transform:uppercase;letter-spacing:.06em}
.datestrip__what{font-size:var(--fs-accent);color:var(--grey)}
@media(max-width:900px){.datestrip{grid-template-columns:1fr;gap:18px}}

/* ---------- quote card — azure, tight, no dead space ---------- */
.quotecard blockquote{max-width:none}
.quotecard p{font-family:var(--title);font-weight:600;
  font-size:clamp(30px,4.1vw,54px);line-height:1.12;text-transform:none;max-width:58rem}
.quotecard cite{display:flex;align-items:center;gap:12px;margin-top:26px;font-style:normal;
  font-family:var(--title);font-weight:600;font-size:var(--fs-accent);
  text-transform:uppercase;letter-spacing:.16em;color:var(--aqua)}
.quotecard cite .mf{width:22px;height:22px}

/* ---------- wrapper sections: heading + nested cards ---------- */
.wrap__head{margin-bottom:var(--pad-in)}
.wrap__head h2{margin-top:var(--space-eyebrow)}
.wrap__head .lede{margin-top:var(--space-heading);max-width:46ch;color:var(--grey)}
.wrap__foot{margin-top:var(--pad-in);display:flex;justify-content:flex-start}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media(max-width:900px){.row3{grid-template-columns:1fr}}

.actioncard{display:flex;flex-direction:column;text-decoration:none;transition:background-color .16s}
.actioncard:hover{background:var(--white)}
.actioncard h3{margin:var(--space-eyebrow) 0 var(--space-heading)}
.actioncard p{color:var(--grey);flex:1}
.actioncard .cta{margin-top:22px}
.actioncard__no{font-family:var(--title);font-weight:700;font-size:var(--fs-accent);
  letter-spacing:.16em;color:var(--deep-red)}

/* ---------- meet becky split ---------- */
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:stretch}
.split__photo{overflow:hidden}
.split__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;min-height:360px}
@media(max-width:820px){.split__photo img{height:auto;min-height:0;aspect-ratio:var(--ar-portrait)}}
.split__body{padding:var(--pad);display:flex;flex-direction:column;justify-content:center}
.split__body h2{margin:var(--space-eyebrow) 0 var(--space-heading);max-width:26ch}
.split__body p{color:var(--grey);max-width:56ch;line-height:1.75}
.split__body .btn{margin-top:28px;align-self:flex-start}
@media(max-width:820px){.split{grid-template-columns:1fr}}

/* ---------- updates ---------- */
.postcard{display:flex;flex-direction:column;text-decoration:none;transition:background-color .16s}
.postcard:hover{background:var(--white)}
.postcard__meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.postcard h3{margin:var(--space-eyebrow) 0 0;line-height:1.18}
.postcard__note{margin-top:10px;color:var(--grey);font-size:var(--fs-accent)}
.postcard__date{font-family:var(--title);font-weight:600;font-size:var(--fs-accent);
  text-transform:uppercase;letter-spacing:.12em;color:var(--grey)}

/* ---------- TAXONOMY PILL ----------
   One component, used for every taxonomy term on the site.

   Post kinds (Release / Event / Announcement) are deliberately NEUTRAL.
   Colour is held in reserve for the policy taxonomy, which will need
   distinct hues plus icons. Two colour systems on one card would fight,
   and there are only so many legible hues in this palette.

   To extend later, add a modifier and an optional icon slot:
     .pill--housing{background:var(--azure)}
     .pill svg{width:14px;height:14px;margin-inline-end:2px}
   Any fill must clear 4.5:1 against white pill text. */
.pill--event{background:var(--red)}
.pill--news{background:var(--azure)}
.pill--guide{background:var(--aqua);color:var(--azure)}
/* Not-yet state: a destination that does not exist yet is never a link. */
.pill--soon{background:transparent;color:var(--grey);box-shadow:inset 0 0 0 1px var(--grey)}
.actioncard--soon{cursor:default}
.actioncard--soon .pill--soon{margin-top:22px;align-self:flex-start}
.pill__sep{opacity:.65;font-weight:600}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--black);color:var(--white);
  font-family:var(--title);font-weight:600;font-size:var(--fs-accent);
  text-transform:uppercase;letter-spacing:.13em;
  padding:5px 13px 4px;border-radius:var(--r-pill);
  white-space:nowrap;
}

/* Events are delineated by the azure pill, which now carries the date. */

/* ---------- footer — azure, not black ---------- */
.footer{background:var(--azure);color:var(--white);margin-top:var(--gap);
  border-radius:var(--r-lg) var(--r-lg) 0 0;position:relative;overflow:hidden;isolation:isolate}
.footer__in{max-width:var(--max);margin-inline:auto;padding:clamp(48px,6vw,80px) var(--pad) 28px}
.footer__grid{display:grid;grid-template-columns:30% 20% 20% 30%;gap:var(--gap) var(--pad)}
.footer__blurb{color:rgba(255,255,255,.72);margin-top:22px;max-width:30ch;font-size:var(--fs-accent)}
.footer h2{font-family:var(--title);font-weight:600;font-size:var(--fs-accent);text-transform:uppercase;
  letter-spacing:.16em;color:var(--aqua);margin-bottom:18px}
.footer li{margin-bottom:13px}
.footer li a{text-decoration:none;color:var(--white)}
.footer li a:hover{color:var(--aqua)}
.footer__legal{margin-top:52px;padding-top:24px;border-top:1px solid rgba(255,255,255,.22);
  display:flex;flex-wrap:wrap;gap:10px 40px;justify-content:space-between;
  color:rgba(255,255,255,.72);font-size:var(--fs-accent)}
@media(max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer__grid{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}


/* ---------- utilities (replacing inline styles — CSP forbids them) ---------- */
.u-flush-top{padding-top:0}
.u-mb-lg{margin-bottom:clamp(22px,2.4vw,32px)}
.u-self-start{justify-self:start;align-self:flex-start}

/* ---------- skip link ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--azure);color:var(--white);padding:14px 22px;border-radius:0 0 var(--r-sm) 0;
  font-family:var(--title);font-weight:600;text-transform:uppercase;letter-spacing:.1em}
.skip:focus{left:0}

/* ---------- mobile nav ---------- */
.burger{display:none;margin-left:auto;background:none;border:0;padding:12px;cursor:pointer;
  min-height:48px;min-width:48px}
.burger span{display:block;width:24px;height:2px;background:var(--black);margin:5px 0;
  transition:transform .2s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1140px){
  .burger{display:block;order:3}
  /* Donate stays visible on mobile — it is the hardest ask and the smallest
     screen is where most traffic is. Get involved lives in the menu instead. */
  .masthead__cta{order:2;gap:8px}
  .masthead__cta .btn--line{display:none}
  .nav{position:absolute;left:0;right:0;top:100%;background:var(--white);
    display:none;padding:4px var(--edge) 22px;margin:0;z-index:1}
  .nav[data-open]{display:block}
  .nav ul{flex-direction:column;gap:0}
  .nav a{padding:14px 0;border-bottom:1px solid var(--hair);border-width:0 0 1px}
  .nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--aqua);border-bottom-width:3px}
  /* NOTE: never set position:relative on .masthead — it cancels position:sticky.
     The dropdown anchors to .masthead__in, which is the white card. */
  .masthead__in{gap:16px}
  .masthead[data-menu-open]{border-radius:0}
}
@media(max-width:420px){
  .logo img{height:50px}
  .masthead__cta .btn{padding:9px 13px}
}

/* ---------- forms ---------- */
.form{display:grid;gap:26px;max-width:none}
.form--wide{max-width:none}
.field{display:grid;gap:8px;border:0;padding:0;margin:0;min-width:0}
.field label,.field legend{font-family:var(--title);font-weight:600;font-size:var(--fs-body);
  text-transform:uppercase;letter-spacing:.1em;padding:0}
.field__opt{font-family:var(--body);font-weight:400;font-size:var(--fs-accent);
  text-transform:none;letter-spacing:0;color:var(--grey)}
.field__hint{font-size:var(--fs-accent);color:var(--grey)}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:var(--fs-body);
  width:100%;min-height:52px;padding:14px 16px;
  background:var(--white);color:var(--black);
  border:1px solid var(--grey);border-radius:var(--r-sm)}
.field textarea{min-height:170px;resize:vertical;line-height:1.6}
.field select{appearance:none;
  background-image:url("../img/chevron.svg");
  background-repeat:no-repeat;background-position:right 18px center;padding-right:48px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--black);border-width:2px;box-shadow:0 0 0 4px var(--aqua)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:560px){.field-row{grid-template-columns:1fr}}
.field--bad input,.field--bad select,.field--bad textarea{border-color:var(--deep-red);border-width:2px}
.field__error{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-body);
  font-weight:700;color:var(--deep-red)}
.field__error::before{content:"!";flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--deep-red);color:var(--white);font-family:var(--title);
  font-size:var(--fs-accent);display:grid;place-items:center;margin-top:1px}
.checks{display:grid;gap:12px;margin-top:4px}
.checks li{display:flex;align-items:flex-start;gap:12px}
.checks input{width:22px;height:22px;min-height:0;accent-color:var(--red);margin-top:3px;flex:none;padding:0}
.checks label{font-family:var(--body);font-weight:400;text-transform:none;letter-spacing:0;
  font-size:var(--fs-body)}
.banner{padding:16px 18px;border-radius:var(--r-sm);background:rgba(148,7,1,.07);
  border-left:4px solid var(--deep-red);font-weight:700;color:var(--deep-red)}
.field-notice{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;
  margin-top:10px;padding:14px 16px;border-radius:var(--r-sm);
  background:rgba(140,224,228,.18);border-left:4px solid var(--aqua-dark)}
.field-notice p{margin:0;font-size:var(--fs-accent);color:var(--black)}
.field-notice a{color:var(--azure);font-weight:700}
.field-notice__dismiss{flex:none;background:none;border:0;cursor:pointer;
  font-size:20px;line-height:1;color:var(--grey);padding:0 2px}
.field-notice__dismiss:hover{color:var(--black)}
.trap{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ---------- long-form ---------- */
.leadfigure{border-radius:var(--r-lg);overflow:hidden}
.leadfigure img{width:100%;max-height:560px;object-fit:cover}
figcaption{font-size:var(--fs-accent);color:var(--grey);padding:14px 0 0}
.pullquote{border-left:4px solid var(--aqua);padding:8px 0 8px 26px;margin-block:clamp(36px,4vw,52px)}
.pullquote p{font-family:var(--title);font-weight:600;font-size:var(--fs-h3);line-height:1.28;max-width:40ch}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:var(--ar-landscape);object-fit:cover;border-radius:var(--r-md)}
@media(max-width:860px){.gallery{grid-template-columns:1fr}}

/* ---------- updates list + filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:var(--pad-in)}
.filter{display:inline-flex;align-items:center;min-height:44px;padding:9px 18px;
  border-radius:var(--r-pill);text-decoration:none;
  font-family:var(--title);font-weight:600;font-size:var(--fs-accent);
  text-transform:uppercase;letter-spacing:.12em;
  background:var(--cream);color:var(--black);border:1px solid var(--hair)}
.filter:hover{background:var(--white);border-color:var(--black)}
.filter[aria-current="page"]{background:var(--black);color:var(--white);border-color:var(--black)}

/* A list, not floating cards. One item reads correctly and so does forty. */
.postlist{border-top:1px solid var(--hair)}
.postrow{display:grid;grid-template-columns:minmax(0,168px) minmax(0,1fr);
  gap:clamp(16px,2.5vw,40px);align-items:start;
  padding:var(--pad-in) 0;border-bottom:1px solid var(--hair);
  text-decoration:none;transition:padding-inline-start .16s ease,background-color .16s ease}
.postrow:hover,.postrow:focus-visible{background:var(--cream)}
.postrow__meta{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.postrow__date{font-family:var(--title);font-weight:600;font-size:var(--fs-accent);
  text-transform:uppercase;letter-spacing:.12em;color:var(--grey)}
.postrow h2,.postrow h3{margin:0;line-height:1.18}
.postrow__lede{display:block;margin-top:10px;color:var(--grey);max-width:60ch}
.postrow__note{display:block;margin-top:10px;color:var(--grey);font-size:var(--fs-accent)}
@media(max-width:640px){
  .postrow{grid-template-columns:1fr;gap:12px}
  .postrow__meta{flex-direction:row;align-items:center}
}
.empty{color:var(--grey);font-size:var(--fs-lede);padding:var(--pad-in) 0}

/* ---------- article ---------- */
.article__meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.article h1{margin-bottom:var(--space-heading)}
.article__lede{font-size:var(--fs-lede);line-height:1.5;color:var(--grey);max-width:44ch;margin-bottom:8px}
.eventpanel{display:grid;gap:16px;margin-block:var(--pad-in)}
.eventpanel dt{font-family:var(--title);font-weight:600;font-size:var(--fs-accent);
  text-transform:uppercase;letter-spacing:.14em;color:var(--grey)}
.eventpanel dd{margin:4px 0 0;font-family:var(--title);font-weight:700;font-size:var(--fs-h3)}

/* ---------- centred confirmation pages ---------- */
.centred{text-align:center}
.centred .prose,.centred p{margin-inline:auto}
.centred .btn{margin-top:28px}

/* ---------- Meet Becky: biography beside a portrait ----------
   The prose measure (34rem) was always correct for reading. The problem was an
   empty 60% beside it, so the fix is a second column, not a wider measure. */
.bio{display:grid;grid-template-columns:minmax(0,var(--prose)) minmax(0,1fr);
  gap:var(--gap) clamp(32px,4vw,64px);align-items:start}
/* top-aligned: the first frame's top edge sits level with the first line of copy */
.bio__figures{display:grid;gap:var(--gap);margin:0}
.bio__figures figure{margin:0}
.bio__figures img{width:100%;border-radius:var(--r-md);aspect-ratio:var(--ar-landscape);object-fit:cover;display:block}
@media(max-width:900px){
  .bio{grid-template-columns:1fr}
  .bio__figures{order:-1;grid-template-columns:1fr 1fr}
}
@media(max-width:560px){.bio__figures{grid-template-columns:1fr}}

/* ---------- Contact: form leads, direct block sits beside it ---------- */
.contactgrid--formfirst{grid-template-columns:1.5fr 1fr}
@media(max-width:900px){.contactgrid--formfirst{grid-template-columns:1fr}}

/* ---------- content with a top-aligned aside ---------- */
.withaside{display:grid;grid-template-columns:minmax(0,40rem) minmax(0,1fr);
  gap:var(--gap) clamp(32px,4vw,64px);align-items:start}
.withaside__main{min-width:0}
.withaside__figure{margin:0}
.withaside__figure img{width:100%;border-radius:var(--r-md);aspect-ratio:var(--ar-portrait);object-fit:cover;display:block}
.withaside__box{align-self:start;min-width:0}
@media(max-width:900px){
  .withaside{grid-template-columns:1fr}
  .withaside__figure{max-width:420px}
}
.asidehead{font-family:var(--title);font-weight:600;font-size:var(--fs-accent);
  text-transform:uppercase;letter-spacing:.16em;color:var(--grey);
  margin-top:var(--space-heading);margin-bottom:8px}
.asidelinks{display:grid;gap:10px;justify-items:start}

/* ---------- article: title and body share one measure ----------
   A full-width headline over a 45% column reads as a mistake. Centring the
   whole column makes the white space symmetrical and deliberate. */
.article--centred{max-width:46rem;margin-inline:auto}
.article--centred .article__lede{max-width:none}
.article--centred .prose{max-width:none}

/* ---------- sticky footer: short pages must not pull the footer up ---------- */
html,body{height:100%}
body{display:flex;flex-direction:column;min-height:100vh}
main{flex:1 0 auto}
.footer{flex-shrink:0}

/* ---------- updates list spacing ---------- */
.postlist{gap:var(--gap)}
.postrow{padding:var(--pad-in)}
.postrow h3{margin:var(--space-eyebrow) 0 0}
.postrow__lede{margin-top:10px}

/* ---------- social icons ---------- */
.sprite{display:none}
.social{display:flex;flex-wrap:wrap;gap:18px;margin-top:12px;align-items:center}
/* No ring. A 44px circle around a 20px glyph is mostly empty space, and there
   were up to four of them in a column a third of the page wide. The tap target
   is preserved with padding instead. */
.social a{display:inline-flex;align-items:center;justify-content:center;
  padding:6px;margin:-6px;color:currentColor;text-decoration:none;
  transition:color .15s}
.social svg{width:24px;height:24px;fill:currentColor}
.footer .social a{color:var(--white)}
.footer .social a:hover{color:var(--aqua)}
.withaside__box .social a{color:var(--black)}
.withaside__box .social a:hover{color:var(--red)}

/* ---------- legal pages ---------- */
.legal{max-width:46rem}
.legal h2{margin-top:clamp(32px,4vw,44px)}
.legal h2:first-child{margin-top:0}
.legal .prose{max-width:none;margin-top:var(--space-heading)}
.legal a{color:var(--deep-red);text-decoration:underline;
  text-decoration-thickness:2px;text-underline-offset:3px}
.u-mt-sm{margin-top:10px}
.footer__legal a{color:rgba(255,255,255,.72);text-decoration:underline}
.footer__legal a:hover{color:var(--aqua)}

/* ---------- long strings must not push a column past the viewport ---------- */
.withaside__box a,
.footer li a,
.directbox a{overflow-wrap:anywhere}
.asidehead + p{min-width:0}
.social{max-width:100%}

/* the email is set in condensed caps and is the longest string on the site */
.withaside__box .cta{max-width:100%;white-space:normal;line-height:1.35}

/* ---------- prose written in the editor ----------
   The body of a post is Markdown, so .prose now has to carry headings, lists,
   quotes, and links, not only paragraphs. */
.prose h2{font-family:var(--title);font-weight:700;font-size:var(--fs-h2);
  line-height:1.15;margin:clamp(30px,3.4vw,44px) 0 var(--space-heading)}
.prose h3{font-family:var(--title);font-weight:700;font-size:var(--fs-h3);
  line-height:1.2;margin:clamp(26px,3vw,36px) 0 12px}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{margin:1.25em 0;padding-inline-start:1.3em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{line-height:1.5;margin-bottom:.4em}
.prose li::marker{color:var(--red)}
.prose blockquote{margin:clamp(26px,3vw,36px) 0;padding-inline-start:22px;
  border-inline-start:3px solid var(--aqua)}
.prose blockquote p{font-size:var(--fs-lede);line-height:1.5;color:var(--azure)}
.prose a{color:var(--deep-red);text-decoration:underline;
  text-decoration-thickness:2px;text-underline-offset:3px}
.prose a:hover{color:var(--red)}
.prose code{background:var(--cream);border-radius:4px;padding:1px 6px;font-size:.92em}
.prose strong{font-weight:700}

/* ---------- featured images ---------- */
.postrow--img{grid-template-columns:minmax(0,168px) minmax(0,180px) minmax(0,1fr)}
.postrow__thumb{display:block;border-radius:var(--r-sm);overflow:hidden;background:var(--cream)}
.postrow__thumb img{width:100%;aspect-ratio:var(--ar-landscape);object-fit:cover}
@media(max-width:900px){
  .postrow--img{grid-template-columns:minmax(0,168px) minmax(0,1fr)}
  .postrow__thumb{grid-column:1 / -1;order:-1;max-width:320px}
}
@media(max-width:640px){
  .postrow--img{grid-template-columns:1fr}
  .postrow__thumb{max-width:none}
}
.article__figure{margin:clamp(26px,3vw,36px) 0}
.article__figure img{width:100%;border-radius:var(--r-md)}
.article__figure figcaption{margin-top:10px;color:var(--grey);font-size:var(--fs-accent);line-height:1.5}

/* ---------- event state ---------- */
.postlist__break{margin:clamp(30px,3.4vw,44px) 0 0;padding-top:var(--pad-in);
  border-top:1px solid var(--hair);color:var(--grey)}
.postrow__flag{display:inline-block;margin-top:10px;
  font-family:var(--title);font-weight:600;font-size:var(--fs-accent);
  text-transform:uppercase;letter-spacing:.1em;color:var(--deep-red)}
.banner--event{margin:var(--space-heading) 0;background:var(--red);color:var(--white);
  border-radius:var(--r-sm);padding:12px 18px;
  font-family:var(--title);font-weight:600;font-size:var(--fs-body);
  text-transform:uppercase;letter-spacing:.09em}

/* Inline topic notice: same treatment as the host-an-event notice, without the
   dismiss control, since selecting another topic already clears it. */
.field-notice--inline{margin-top:12px;padding-inline-end:var(--pad-in)}
.field-notice--inline[hidden]{display:none}

/* Radio variant of the checkbox list. Same rhythm; only the control differs,
   and a radio group is a single answer rather than several. */
.checks--radio input{border-radius:50%}

/* Community listing: not our event, and the page has to say so before anyone
   turns up expecting to meet her. Softer than the cancellation banner, which
   is red, because this is context rather than a warning. */
.banner--community{background:rgba(140,224,228,.22);border-left-color:var(--azure);
  color:var(--azure);font-weight:400}
.eventpanel__district{color:var(--grey);font-size:var(--fs-accent)}
.article__byline{margin-top:6px;color:var(--grey);font-size:var(--fs-accent);
  font-family:var(--title);font-weight:600;letter-spacing:.06em;text-transform:uppercase}

/* ---------- page head ----------
   One card, one shape, every interior page. The minimum height is what stops a
   four-word standfirst sitting in a box the size of a fifteen-word one; content
   is centred so the short version does not float at the top. */
.pagehead{display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(160px,17vw,220px)}
.pagehead__standfirst{margin-top:12px;max-width:44rem;
  font-size:var(--fs-lede);line-height:1.45;color:var(--grey)}

/* ---------- aside column ----------
   The photo is a fixed 4:6 crop, so on a long form the column ends before the
   fields do. That gap is the lesser evil: the header is sticky, so a sticky
   photo detaches and slides out of alignment the moment anyone scrolls, which
   reads as broken rather than as a feature. Flush at the top, every time. */
.withaside__figure{align-self:start}
@media(max-width:900px){
  /* A 4:6 photo is a full phone screen before anyone reaches the form. The
     centred square keeps the middle two thirds, which is why subjects are
     art-directed to sit inside that band. */
  .withaside__figure img{aspect-ratio:1/1}
}

/* Registration sits after the description, not before it: nobody should be
   asked to register for something they have not read yet. */
.eventpanel__action{margin-top:clamp(28px,3.2vw,40px)}
.eventpanel__map{display:inline-block;margin-top:8px;font-size:var(--fs-accent);
  color:var(--azure);font-weight:700}

/* ---------- closing row ----------
   Statement and action side by side. The statement's prose is capped at a
   readable measure, so on its own it left half a card empty; pairing it with
   the ask fills the row honestly rather than padding it out. */
.closer{display:grid;grid-template-columns:2fr 1fr;gap:var(--gap);align-items:stretch}
.closer__statement .prose{max-width:none}
.closer__action{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:18px}
@media(max-width:820px){.closer{grid-template-columns:1fr}}
.closer--solo{grid-template-columns:1fr}

/* ---------- post page with action rail ----------
   Posts are where people land from a shared link, so they carry the ask that
   static pages do not need. Below 980px the rail moves under the article,
   which is the right order once it stops being a sidebar. */
.postgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,19rem);
  gap:var(--gap);align-items:start}
@media(max-width:980px){.postgrid{grid-template-columns:1fr}}

.rail__inner{display:grid;gap:4px}
.rail__title{margin-bottom:10px}
.rail__item{display:grid;gap:2px;padding:14px 0;text-decoration:none;
  border-top:1px solid var(--hair);color:var(--black)}
.rail__item:first-of-type{border-top:0;padding-top:0}
.rail__item > span:first-child{font-family:var(--title);font-weight:700;
  font-size:var(--fs-h3);line-height:1.1}
.rail__item:hover > span:first-child{color:var(--red)}
.rail__item--primary > span:first-child{color:var(--red)}
.rail__item--primary:hover > span:first-child{color:var(--deep-red)}
.rail__note{color:var(--grey);font-size:var(--fs-accent);line-height:1.4}
.rail__social{border-top:1px solid var(--hair);padding-top:16px;margin-top:10px;
  display:grid;gap:10px;justify-items:start}

/* ---------- post body width ----------
   The rail already narrows this column, so the prose measure cap is doing the
   job twice and leaving the text stranded at about 60% of the card. The column
   is the measure now. */
.postgrid .prose,
.postgrid .article__lede{max-width:none}

/* ---------- homepage action cards ----------
   These are calls to action, not content, and sitting above the news cards in
   the same cream they were indistinguishable from them. Colour is what says
   "do something" rather than "read something". */
.waycard{color:var(--white);text-decoration:none;display:flex;flex-direction:column;
  padding:clamp(22px,2.4vw,30px);border-radius:var(--r-md);min-height:100%}
.waycard--1{background:var(--red)}
.waycard--2{background:var(--azure)}
.waycard--3{background:var(--aqua);color:var(--azure)}
.waycard__no{font-family:var(--title);font-weight:700;font-size:var(--fs-accent);
  letter-spacing:.14em;margin-bottom:10px}
/* Full opacity, not 75%. Dimmed, the number fell to 3.4:1 on red and 2.4:1 on
   aqua, both under the 4.5:1 WCAG AA needs at this size. */
.waycard h3{margin:0 0 10px;line-height:1.12}
.waycard p{line-height:1.5;flex:1}
.waycard .cta{margin-top:18px;font-family:var(--title);font-weight:700;
  font-size:var(--fs-accent);text-transform:uppercase;letter-spacing:.12em;
  border-bottom:2px solid currentColor;align-self:flex-start;padding:0 0 3px;
  /* .cta hard-sets black, which is 3.6:1 on red and 2.2:1 on azure. Inherit
     the card's own colour instead, which is already contrast-checked. The
     aqua sweep is dropped for the same reason: it is a light wash designed
     for white cards and it disappears on these. */
  color:inherit;background-image:none}
.waycard:hover .cta{opacity:.75}
.waycard--1:hover{background:var(--deep-red)}
.waycard--2:hover{background:#124148}
.waycard--3:hover{background:#7ad4d9}

/* ---------- homepage teaser photo ----------
   Square rather than portrait. A 2:3 beside a short bio made the row taller
   than anything in it needed to be, and pushed the rest of the page down. */
.split__photo img{height:auto;min-height:0;aspect-ratio:1/1}
.field__opt{font-family:var(--body);font-weight:400;text-transform:none;
  letter-spacing:0;font-size:var(--fs-accent);color:var(--grey)}

/* ---------- district map ----------
   Three states, no gradient. Shading by visit count or recency would make
   Halifax dominate for reasons that are about her job, not the campaign. */
.map{display:grid;gap:18px}
.map__svg{width:100%;height:auto;display:block}
.map__d{stroke:var(--white);stroke-width:1.2;transition:fill .15s}
.map__d--upcoming{fill:var(--red)}
.map__d--visited{fill:var(--azure)}
.map__d--open{fill:#DCD5C6}
.map a:hover .map__d{fill:var(--deep-red)}
.map a:focus-visible .map__d{outline:2px solid var(--black)}
.map__legend{display:flex;flex-wrap:wrap;gap:8px 22px}
.map__key{display:inline-flex;align-items:center;gap:9px;font-size:var(--fs-accent);
  color:var(--grey);font-family:var(--title);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase}
.map__key::before{content:"";width:14px;height:14px;border-radius:4px;flex:none}
.map__key--upcoming::before{background:var(--red)}
.map__key--visited::before{background:var(--azure)}
.map__key--open::before{background:#DCD5C6}
.map__source{font-size:var(--fs-accent);color:var(--grey);line-height:1.4}

/* ---------- district list ----------
   The map is a picture; this is the same information as text, which is what
   screen readers and anyone scanning for their own district actually use. */
.dlist{display:grid;grid-template-columns:1fr;gap:0 28px}
.dlist__row{display:flex;justify-content:space-between;gap:12px;
  padding:9px 12px;text-decoration:none;color:var(--black);font-size:var(--fs-accent)}
.dlist__row:hover{color:var(--red)}

/* Zebra rather than hairlines: 56 rows of rules is a lot of ink, and stripes
   are easier to track across to the date. The column count is fixed rather
   than auto-filled, because with auto-fill the stripe pattern runs diagonally
   across columns instead of along rows. */
.dlist__row:nth-child(odd){background:rgba(17,17,17,.035)}
@media(min-width:720px){
  .dlist{grid-template-columns:1fr 1fr}
  .dlist__row:nth-child(odd){background:none}
  .dlist__row:nth-child(4n+1),
  .dlist__row:nth-child(4n+2){background:rgba(17,17,17,.035)}
}
.dlist__when{color:var(--grey);white-space:nowrap}
.dlist__row--open .dlist__when{color:#A9A296}

/* Preview gate: an unfinished page shown to the team, not to the public. */
.gate{max-width:26rem}
.gate .btn{margin-top:8px}
.previewbar{background:var(--black);color:var(--white);text-align:center;
  padding:9px 16px;font-family:var(--title);font-weight:600;font-size:var(--fs-accent);
  letter-spacing:.1em;text-transform:uppercase}
.postrow__flag--community{color:var(--azure)}

/* Images inside a post body. Full measure width, caption from the alt text so
   a described image is never also an undescribed one. */
.prose__figure{margin:clamp(28px,3.2vw,40px) 0}
.prose__figure img{width:100%;border-radius:var(--r-md);display:block;
  aspect-ratio:var(--ar-landscape);object-fit:cover}
.prose__figure figcaption{margin-top:10px;color:var(--grey);font-size:var(--fs-accent);line-height:1.4}

/* ---------- callout ----------
   The email's callout device, brought into post bodies. This is the one place
   it belongs on the site: static pages are already the ask, but a long post
   needs a way to lift the practical part out of the argument.
   Aqua with a deep azure spine. One per post; more and it stops landing. */
.callout{display:grid;grid-template-columns:auto minmax(0,1fr);
  margin:clamp(30px,3.4vw,44px) 0;border-radius:var(--r-md);overflow:hidden;
  background:rgba(140,224,228,.34)}
.callout__mark{width:12px;background:var(--azure)}
.callout__body{padding:clamp(20px,2.4vw,30px)}
.callout__label{font-family:var(--title);font-weight:600;font-size:var(--fs-accent);
  text-transform:uppercase;letter-spacing:.12em;color:var(--azure);margin:0 0 10px}
.callout__body > :first-child{margin-top:0}
.callout__body > :last-child{margin-bottom:0}
.callout__body h2,.callout__body h3{margin-top:0;color:var(--azure)}
.callout__body p{line-height:1.5}
.callout__body p + p,.callout__body ul,.callout__body ol{margin-top:1.1em}
.callout__body li::marker{color:var(--azure)}
.callout__body a{color:var(--deep-red)}
@media(max-width:560px){.callout__mark{width:8px}}

/* Recent stops. Past only: a public list of where she will be next is a
   schedule disclosure, and anything genuinely public is an event post. */
.recent{list-style:none;margin:0;padding:0;display:grid}
.recent__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 18px;
  padding:12px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.recent__row:last-child{border-bottom:0}
.recent__where{font-family:var(--title);font-weight:700;font-size:var(--fs-h3);line-height:1.15}
.recent__note{grid-column:1;color:var(--grey);font-size:var(--fs-accent);line-height:1.4}
.recent__when{grid-column:2;grid-row:1;color:var(--grey);font-size:var(--fs-accent);white-space:nowrap}

/* ---------- end of post ----------
   Reaching the bottom of a long post is the strongest signal of interest the
   site gets, and until now it was answered with a link back to the listing.
   Azure rather than aqua: aqua is the callout inside a body, and using it here
   too would make the two read as the same thing. */
.endnote{margin:clamp(34px,4vw,52px) 0 0;padding:clamp(24px,2.8vw,34px);
  border-radius:var(--r-md);background:var(--azure);color:var(--white);
  display:grid;gap:18px;justify-items:start}
.endnote__body h2{margin:0 0 8px;color:var(--white)}
.endnote__body p{margin:0;line-height:1.5;max-width:42ch}
@media(min-width:720px){
  .endnote{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:28px}
}
/* Red on azure is 1.67:1, so the button would all but vanish. White carries
   8.65:1 against it both for the fill and for the label. */
.btn--white{background:var(--white);border-color:var(--white);color:var(--azure)}
.btn--white:hover{background:var(--aqua);border-color:var(--aqua);color:var(--azure)}

/* ---------- coming up ----------
   A bounded block above the feed, in event-date order. Separate from the feed
   because the two cannot share a sort: by event date the events clump at the
   top and bury the news, by publication date they read out of order. */
.coming{margin-bottom:clamp(28px,3.2vw,40px);padding-bottom:clamp(24px,2.8vw,32px);
  border-bottom:2px solid var(--hair)}
.coming__head{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:6px}
.coming__more{font-family:var(--title);font-weight:600;font-size:var(--fs-accent);
  text-transform:uppercase;letter-spacing:.1em;color:var(--azure);white-space:nowrap}
.postlist--coming .postrow:first-child{border-top:0}

/* ---------- key dates ----------
   Two windows side by side. Stacked as a three-row list this ran deep with the
   date column half empty on every row, spending a lot of vertical space on
   four numbers. */
.keydates{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);
  margin-bottom:clamp(28px,3.2vw,40px)}
@media(max-width:760px){.keydates{grid-template-columns:1fr}}

.keycard{display:grid;grid-template-columns:auto minmax(0,1fr);
  border-radius:var(--r-md);overflow:hidden;background:rgba(140,224,228,.34)}
.keycard__mark{width:12px;background:var(--azure)}
.keycard__body{padding:clamp(18px,2.1vw,24px)}
.keycard__label{font-family:var(--title);font-weight:600;font-size:var(--fs-accent);
  text-transform:uppercase;letter-spacing:.12em;color:var(--azure);margin:0 0 8px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.keycard__when{font-family:var(--title);font-weight:700;line-height:1.15;
  font-size:var(--fs-h3);margin:0 0 8px;color:var(--black)}
.keycard__to{color:var(--grey);font-weight:600}
.keycard__note{margin:0;color:var(--grey);font-size:var(--fs-accent);line-height:1.45}
.keycard__flag{background:var(--azure);color:var(--white);border-radius:var(--r-pill);
  padding:2px 11px;letter-spacing:.1em;font-size:var(--fs-accent)}
/* A window that has closed stays on the page: it still explains the timeline. */
.keycard--past{opacity:.5}
.keycard--past .keycard__when{text-decoration:line-through}
@media(max-width:640px){.keycard__mark{width:8px}}

/* ---------- standing notice ----------
   Four columns. The icon and the button size to their content rather than
   taking a fixed share: at 15% the icon column was 165px of empty space
   around a glyph. The date drops under the label so neither is cramped. */
.notice{display:grid;
  grid-template-columns:auto minmax(0,15rem) minmax(0,1fr) auto;
  gap:14px clamp(20px,2.4vw,34px);align-items:center;
  background:rgba(140,224,228,.34);border-radius:var(--r-md);
  border-left:12px solid var(--azure);
  padding:18px clamp(20px,2.2vw,28px);margin-bottom:var(--pad-in)}
.notice__icon{display:grid;place-items:center;color:var(--azure)}
.notice__head{display:grid;gap:2px;min-width:0}
.notice__label{font-family:var(--title);font-weight:700;font-size:var(--fs-h3);
  line-height:1.1;color:var(--azure)}
.notice__dates{font-family:var(--title);font-weight:600;font-size:var(--fs-body);
  letter-spacing:.02em;line-height:1.2}
.notice__body{color:var(--grey);font-size:var(--fs-accent);line-height:1.5;min-width:0}
.notice__cta{white-space:nowrap;justify-self:end}
@media(max-width:1000px){
  .notice{grid-template-columns:auto minmax(0,1fr);border-left-width:8px}
  .notice__body{grid-column:2}
  .notice__cta{grid-column:2;justify-self:start}
}
/* Azure fill: red is reserved for action, and this is a "read more" rather
   than a "do it now". On this aqua it also carries far better contrast. */
.btn--azure{background:var(--azure);border-color:var(--azure);color:var(--white)}
.btn--azure:hover{background:#124148;border-color:#124148;color:var(--white)}

.countdown--closed{display:grid;align-items:center}

/* ---------- homepage news and next event ----------
   Split rather than mixed. Sorted together by date, whichever happened to be
   nearest took the whole row, so the news half of the campaign could vanish
   from the homepage for a fortnight whenever the calendar was busy. */
.newsplit{display:grid;grid-template-columns:2fr 1fr;gap:var(--gap);align-items:start}
.newsplit__news{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.newsplit__next{display:grid;gap:10px}
.newsplit__label{font-family:var(--title);font-weight:600;font-size:var(--fs-accent);
  text-transform:uppercase;letter-spacing:.12em;color:var(--grey);margin:0}
.postcard--next{height:100%}
@media(max-width:900px){
  .newsplit{grid-template-columns:1fr}
  .newsplit__news{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){.newsplit__news{grid-template-columns:1fr}}

/* ---------- events: upcoming and past ----------
   Past events sit in a sidebar rather than a full-width section below. They
   still need to exist, since a past event has no home in the news feed either,
   but they should not compete with what is still to come. */
.eventsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,17rem);
  gap:clamp(28px,3.4vw,48px);align-items:start}
@media(max-width:900px){.eventsplit{grid-template-columns:1fr}}
.eventsplit__past{padding-top:4px}
.eventsplit__past h2{margin-bottom:14px;color:var(--grey)}
.pastlist{list-style:none;margin:0;padding:0;display:grid}
.pastlist li{border-top:1px solid var(--hair)}
.pastlist li:first-child{border-top:0}
.pastlist a{display:grid;gap:2px;padding:11px 0;text-decoration:none;color:var(--black)}
.pastlist a:hover .pastlist__title{color:var(--red)}
.pastlist__title{font-family:var(--title);font-weight:700;font-size:var(--fs-body);line-height:1.2}
.pastlist__when{color:var(--grey);font-size:var(--fs-accent);line-height:1.35}

/* ---------- sidebar card ----------
   The nested cream card from Contact, reused wherever the right third holds a
   list rather than a photo. One treatment, so the asides read as siblings. */
.sidecard{display:grid;gap:14px;align-content:start}
.sidecard__empty{color:var(--grey);font-size:var(--fs-accent);line-height:1.45;margin:0}
.sidecard__cta{justify-self:start}
.sidelist{list-style:none;margin:0;padding:0;display:grid}
.sidelist li{border-top:1px solid rgba(17,17,17,.12)}
.sidelist li:first-child{border-top:0}
.sidelist a{display:grid;gap:2px;padding:11px 0;text-decoration:none;color:var(--black)}
.sidelist li:first-child a{padding-top:0}
.sidelist a:hover .sidelist__title{color:var(--red)}
.sidelist__title{font-family:var(--title);font-weight:700;font-size:var(--fs-body);line-height:1.2}
.sidelist__when{color:var(--grey);font-size:var(--fs-accent);line-height:1.35}

/* The right third can hold more than one card; they stack with the page gap. */
.withaside__box{display:grid;gap:var(--gap);align-content:start}
.sidecard--latest .sidelist__latest{display:grid;gap:6px;justify-items:start;
  text-decoration:none;color:var(--black)}
.sidecard--latest .sidelist__latest:hover .sidelist__title{color:var(--red)}
/* The action rail was built for post pages; inside a standard aside it should
   sit flush like any other card rather than carrying its own outer padding. */

/* ---------- news row ----------
   Two columns inside the 2/3, not three. Media, category, and date stack on
   the left; title, excerpt, and the affordance stack on the right. At three
   columns inside a two-thirds width the text column was down to about 25ch
   and every headline broke across four lines. */
.newsrow{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:clamp(20px,2.4vw,32px);align-items:start;
  padding:clamp(20px,2.4vw,28px) 0;border-top:1px solid var(--hair);
  text-decoration:none;color:var(--black)}
.newsrow:first-child{border-top:0;padding-top:0}
.newsrow:hover .t--h3{color:var(--red)}
.newsrow__media{display:grid;gap:10px;justify-items:start}
.newsrow__thumb{display:block;width:100%;border-radius:var(--r-sm);overflow:hidden;
  background:var(--cream)}
.newsrow__thumb img{width:100%;aspect-ratio:var(--ar-landscape);object-fit:cover;display:block}
.newsrow__date{color:var(--grey);font-family:var(--title);font-weight:600;
  font-size:var(--fs-accent);letter-spacing:.06em;text-transform:uppercase}
.newsrow__body{display:grid;gap:10px;justify-items:start;min-width:0}
.newsrow__body .t--h3{margin:0;transition:color .15s}
.newsrow__lede{color:var(--grey);line-height:1.5}
.newsrow__cta{font-family:var(--title);font-weight:700;font-size:var(--fs-accent);
  text-transform:uppercase;letter-spacing:.11em;color:var(--azure);
  border-bottom:2px solid currentColor;padding-bottom:2px;margin-top:2px}
.newsrow:hover .newsrow__cta{color:var(--red)}
@media(max-width:620px){
  .newsrow{grid-template-columns:1fr;gap:14px}
  .newsrow__thumb{max-width:min(100%,20rem)}
}

/* ---------- build 16 ---------- */

/* Was 46ch, about half a section, which read as a stranded column. A character
   cap is right for body copy at full page width; under a heading inside a card
   the card is already doing that job. */
.wrap__head .lede{max-width:min(100%,75ch)}

/* News row: image left, everything else stacked right. */
.newsrow{grid-template-columns:minmax(0,12rem) minmax(0,1fr);
  gap:clamp(18px,2.2vw,28px);padding:clamp(18px,2vw,24px) 0}
.newsrow__body{display:grid;gap:8px;justify-items:stretch;min-width:0}
.newsrow__meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.newsrow__date{color:var(--grey);font-family:var(--title);font-weight:600;
  font-size:var(--fs-accent);letter-spacing:.05em;text-transform:uppercase}
/* An empty cell rather than no cell, so a post without a photo does not pull
   its neighbours out of alignment. */
.newsrow__thumb--none{aspect-ratio:var(--ar-landscape);background:rgba(17,17,17,.035);
  border-radius:var(--r-sm)}
@media(max-width:620px){
  .newsrow{grid-template-columns:1fr;gap:12px}
  .newsrow__thumb--none{display:none}
}

/* Compact pill for listings: same colours, less weight, so it labels the row
   rather than competing with the headline beside it. */
.pill--sm{font-size:11px;padding:2px 9px;letter-spacing:.09em}

/* ---------- pagination ---------- */
.pager{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:clamp(24px,2.8vw,34px);padding-top:clamp(18px,2vw,24px);
  border-top:1px solid var(--hair)}
.pager__step{font-family:var(--title);font-weight:700;font-size:var(--fs-accent);
  text-transform:uppercase;letter-spacing:.1em;color:var(--azure);text-decoration:none}
.pager__step:hover{color:var(--red)}
.pager__step--off{color:#B8B2A6}
.pager__count{color:var(--grey);font-size:var(--fs-accent)}

/* ---------- consistency pass ----------
   Two rules, applied everywhere: a cream card only ever sits on white, and an
   aside is never a card detached from the column it belongs to. */

/* Homepage news: plain rows on white, so the cream aside beside them reads as
   an aside. Both sides cream made the split look like three cards in a row. */
.newsline{display:grid;gap:7px;padding:16px 0;border-top:1px solid var(--hair);
  text-decoration:none;color:var(--black)}
.newsline:first-child{border-top:0;padding-top:0}
.newsline:hover .t--h3{color:var(--red)}
.newsline__meta{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.newsline__date{color:var(--grey);font-family:var(--title);font-weight:600;
  font-size:var(--fs-accent);letter-spacing:.05em;text-transform:uppercase}
.newsline .t--h3{margin:0;transition:color .15s}
.newsline__lede{color:var(--grey);line-height:1.5;font-size:var(--fs-accent)}
.newsplit__news{display:grid;grid-template-columns:1fr;gap:0;align-content:start}
.newsplit__next{display:grid;align-content:start}

/* The action rail is the same component wherever it appears, so it takes the
   cream treatment every other aside module uses. Fill, radius, and padding all
   come from .icard; nothing here may set a background. */
.rail{margin:0}
/* --hair is tuned for white; on cream it disappears. */
.rail__item{border-top-color:rgba(17,17,17,.12)}
.rail__social{border-top-color:rgba(17,17,17,.12)}

/* Homepage news and events: two peer cards, not a card with an aside. They are
   two subjects rather than a subject and its footnote, so neither belongs
   nested inside the other. */
.closer__action--events{align-items:stretch;justify-content:flex-start;gap:16px}
.closer__action--events .wrap__head{margin-bottom:0}
.closer__action--events .sidelist li{border-top-color:var(--hair)}
.closer__action--events .btn{align-self:flex-start;margin-top:auto}

/* The delegate cards are numbered steps to read through, not three controls to
   choose between. The cream-to-white hover made them look like a picker. The
   link inside each card still carries its own hover, so the affordance is not
   lost. */
.actioncard:hover{background:var(--cream)}

/* ---------- feature card ----------
   One item, so it can afford to be a card rather than a list row. The previous
   version led with a full-size pill above a small title, which put the most
   weight on the least important thing in it. */
.feacard{display:grid;gap:9px;text-decoration:none;color:var(--black)}
.feacard__thumb{display:block;border-radius:var(--r-sm);overflow:hidden;background:var(--white)}
.feacard__thumb img{width:100%;aspect-ratio:var(--ar-landscape);object-fit:cover;display:block}
.feacard__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.feacard__date{color:var(--grey);font-family:var(--title);font-weight:600;
  font-size:var(--fs-accent);letter-spacing:.05em;text-transform:uppercase}
.feacard__title{font-family:var(--title);font-weight:700;font-size:var(--fs-lede);
  line-height:1.2;transition:color .15s}
.feacard:hover .feacard__title{color:var(--red)}
.feacard__lede{color:var(--grey);font-size:var(--fs-accent);line-height:1.45}

/* Two feature cards side by side in the news column. Cards, not list rows:
   at two items this is a feature moment, and lists are for compact runs. */
.feagrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start}
@media(max-width:640px){.feagrid{grid-template-columns:1fr}}
.feacard__note{color:var(--grey);font-size:var(--fs-accent);line-height:1.45}
.newsrow__note{color:var(--grey);font-size:var(--fs-accent);line-height:1.45}
.newsrow__flag{font-family:var(--title);font-weight:600;font-size:var(--fs-accent);
  text-transform:uppercase;letter-spacing:.08em;color:var(--azure)}

/* Card titles sat at 24px, the same size as the section heading above them, so
   nothing outranked anything. Section head 32, card title 20. */
.feacard__title{font-size:var(--fs-lede)}
.sidecard .t--h3{font-size:var(--fs-h3)}

/* ---------- no horizontal rules ----------
   Rules are a cheap way to say "these are separate things". Space says it
   better and does not stack up into a ledger. Every list separator below is
   replaced with room to breathe; the nav's mobile rules stay, since a stacked
   menu genuinely needs them as hit-target boundaries. */

.postlist{border-top:0}
.newsrow{border-top:0;padding:0}
.newsrow:first-child{padding-top:0}
.postlist,
.postlist--coming{display:grid;gap:clamp(28px,3.2vw,44px)}

.sidelist{gap:20px}
.sidelist li{border-top:0}
.sidelist a{padding:0}
.sidelist li:first-child a{padding-top:0}

.pastlist{gap:18px}
.pastlist li{border-top:0}
.pastlist a{padding:0}

.rail__inner{gap:20px}
.rail__item{border-top:0;padding:0}
.rail__item:first-of-type{padding-top:0}
.rail__social{border-top:0;padding-top:0;margin-top:4px}

.newsline{border-top:0;padding:0}
.newsplit__news,
.feagrid{gap:clamp(24px,2.8vw,36px)}

.pager{border-top:0;padding-top:0;margin-top:clamp(32px,3.6vw,48px)}
.coming{border-bottom:0;padding-bottom:0}
.recent__row{border-bottom:0;padding:0}
.recent{gap:18px}
.postrow{border-bottom:0}
.eventpanel{border-top:0}

/* The column is the measure inside a 2/3 layout, so a second cap on the prose
   left the text narrower than the images directly beneath it. */
.withaside__main .prose,
.withaside__main .article__lede{max-width:none}

/* Full width beneath the field row, not inside it. In the two-column grid the
   notice inflated its own cell, which pushed the phone input out of line with
   its own label. */
.field-notice--inline{margin:0 0 var(--pad-in)}