/* =========================================================================
   Jan Klas — kampaň do Senátu 2026
   Design system. Palette taken from cesko.cz; type is Archivo Black + Montserrat.
   ========================================================================= */

/* ---------------------------------------------------------------- fonts */
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/archivo-black-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/archivo-black-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../fonts/montserrat-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------------------------------------------------------------- tokens */
:root{
  /* taken directly from cesko.cz */
  --blue:#0054CF;
  --blue-hover:#5997F2;
  --blue-light:#A9CCFF;
  --red:#FD3307;
  --band:#F1F1F1;
  /* #FD3307 on white is only 3.71:1 — too low for text. Darkened for error copy. */
  --red-text:#C42400;
  /* hero band: matched to the portrait's backdrop right beside the subject */
  --hero-band:#F5F5F5;
  --footer-bg:#323132;
  --muted:#686868;
  /* extensions — see plan */
  --blue-deep:#003A8F;
  --blue-wash:#EAF2FF;
  --hair:#D8D8D8;
  --ink:#111111;
  --white:#fff;

  --display:'Archivo Black',Impact,'Arial Black',sans-serif;
  --body:'Montserrat',-apple-system,'Segoe UI',Roboto,sans-serif;

  --wrap:1360px;
  --pad:clamp(20px,5vw,64px);
  --sec-y:clamp(56px,8vw,112px);
  --head-h:64px;
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);
  font-family:var(--body);font-size:clamp(15.5px,1.05vw,17px);font-weight:400;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:var(--blue);text-underline-offset:.18em}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
button,input,textarea{font:inherit;color:inherit}

/* Plain selector list, not :where() — :where() has zero specificity, so any
   later rule touching outline would silently kill the focus ring. */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--blue);outline-offset:3px}
/* on blue surfaces the blue ring would vanish */
.band a:focus-visible,.volby a:focus-visible,.ftr a:focus-visible,
.btn:focus-visible{outline-color:#fff;box-shadow:0 0 0 6px rgba(0,0,0,.35)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--blue);color:#fff;
  padding:12px 20px;font-weight:600}
.skip:focus{left:8px;top:8px}
/* without this the skip link lands the top of <main> under the sticky header */
#obsah{scroll-margin-top:calc(var(--head-h) + 8px)}

/* ---------------------------------------------------------------- layout */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--sec-y);scroll-margin-top:calc(var(--head-h) + 8px)}
.section--tint{background:var(--blue-wash)}

/* --- section joins (must stay after .section so the longhands win) ---------
   A section following a full-bleed colour band needs no top air of its own:
   the colour change is already the separator. */
.section--after-band{padding-top:clamp(36px,4.8vw,64px)}
/* The tile rack hands off to the first content section across a single hairline
   rather than two stacked section paddings (which left ~215px of dead white). */
.section--handoff{padding-bottom:clamp(28px,3.6vw,48px)}
.section--arrival{padding-top:0;scroll-margin-top:calc(var(--head-h) + 18px)}
.section--arrival > .wrap > .eyebrow{
  border-top:1px solid var(--hair);padding-top:clamp(34px,4.4vw,56px)}

/* Two-column section: heading holds the left rail while the prose scrolls past.
   Same proportions as the Q&A blocks, so it reads as one system. */
.split{display:grid;gap:14px}
.split__body{max-width:64ch}
.split__body p + p{margin-top:1em}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(24px,4vw,56px)}
  .split__head{position:sticky;top:calc(var(--head-h) + 26px);align-self:start}
}

.eyebrow{font-family:var(--body);font-weight:600;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue);margin-bottom:14px;font-variant-numeric:tabular-nums}
.eyebrow--muted{color:var(--muted)}

.h-sec{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.65rem,4.4vw,3rem);line-height:1.02;letter-spacing:-.015em;color:#000;
  max-width:20ch}
.h-sub{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.05rem,2.1vw,1.45rem);line-height:1.12;letter-spacing:-.01em;color:var(--blue-deep)}
.lede{max-width:64ch;margin-top:20px}
.lede p + p{margin-top:1em}
.rule{height:1px;background:var(--hair);border:0;margin:0}

/* ---------------------------------------------------------------- header */
.hdr{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
.hdr__in{display:flex;align-items:center;gap:16px;min-height:var(--head-h);
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.hdr__logo{flex:0 0 auto;display:block;padding:6px 0}
.hdr__logo img{height:38px;width:auto}
.hdr__spacer{flex:1 1 auto}

.nav{display:none}
.nav__list{display:flex;gap:2px;align-items:center}
.nav__link{display:block;padding:8px 11px;font-size:.775rem;font-weight:600;letter-spacing:.01em;
  color:var(--ink);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap;
  transition:color .16s ease,border-color .16s ease}
.nav__link:hover{color:var(--blue)}
.nav__link.is-active{color:var(--blue);border-bottom-color:var(--blue)}

/* mobile disclosure — works with JS disabled */
.menu{position:relative}
.menu__btn{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  padding:9px 14px;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  border:1px solid var(--hair);border-radius:30px;background:#fff;user-select:none}
.menu__btn::-webkit-details-marker{display:none}
.menu__btn::after{content:"";width:13px;height:9px;flex:0 0 auto;background:currentColor;
  clip-path:polygon(0 0,100% 0,50% 100%);transition:transform .2s ease}
.menu[open] .menu__btn::after{transform:rotate(180deg)}
.menu__panel{position:absolute;right:0;top:calc(100% + 10px);min-width:250px;background:#fff;
  border:1px solid var(--hair);box-shadow:0 14px 34px rgba(0,0,0,.13);padding:6px}
.menu__panel a{display:block;padding:12px 14px;font-size:.9rem;font-weight:600;
  color:var(--ink);text-decoration:none;border-left:3px solid transparent}
.menu__panel a:hover{background:var(--blue-wash);border-left-color:var(--blue);color:var(--blue)}

@media (min-width:1000px){
  .nav{display:block}
  .menu{display:none}
}

/* ---------------------------------------------------------------- hero */
/* The hero is sized against viewport HEIGHT, not just width, so that the hero
   plus the election band clear a 13" laptop screen in one go, and the hero
   alone clears a small phone. svh = the viewport with mobile toolbars showing;
   the vh line above it is the fallback for browsers without svh. */
.hero{background:var(--hero-band);overflow:hidden}
.hero__in{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
  display:grid;gap:0;padding-block:clamp(14px,2vw,24px) clamp(24px,3.4vw,44px)}
.hero__media{margin-inline:calc(-1 * var(--pad));max-width:none;width:calc(100% + 2 * var(--pad));
  position:relative}
.hero__media img{width:100%;height:auto}
/* z-index: .hero__media is positioned, so without this it paints over the text
   that the negative margin tucks beneath it. */
.hero__body{margin-top:-4vw;position:relative;z-index:1}

.hero__name{font-family:var(--display);font-weight:400;color:#000;text-transform:uppercase;
  line-height:.82;letter-spacing:-.035em;margin-bottom:.2em;
  font-size:min(clamp(3rem,13vw,8.5rem),18vh);
  font-size:min(clamp(3rem,13vw,8.5rem),18svh)}
/* Quote and signature sit side by side — the signature fills the space the
   short quote leaves on the right, at both mobile and desktop widths. */
.hero__line{display:flex;align-items:flex-end;gap:clamp(14px,3vw,40px)}
.hero__quote{flex:1 1 auto;min-width:0;
  font-family:var(--display);font-weight:400;color:var(--blue);text-transform:uppercase;
  line-height:1.14;letter-spacing:-.01em;max-width:15ch;
  font-size:min(clamp(1rem,3.2vw,1.85rem),4.6vh);
  font-size:min(clamp(1rem,3.2vw,1.85rem),4.6svh)}
.hero__sig{flex:0 0 auto;margin:0}
.hero__sig img{width:auto;opacity:.9;
  height:min(clamp(70px,10vw,140px),16vh);
  height:min(clamp(70px,10vw,140px),16svh)}

/* --photo-h is the height budget. The image keeps its natural aspect — nothing
   is cropped in CSS — so the dissolve baked into the JPEG (shoulders fading into
   the band) is always fully visible. The source is cropped to a wider aspect so
   the portrait stays physically large even on a short laptop screen. */
.hero{--photo-h:min(45vh,350px)}
@supports (height:1svh){ .hero{--photo-h:min(45svh,350px)} }

.hero__media{display:flex;justify-content:center}
.hero__media img{height:var(--photo-h);width:auto;max-width:100%}

@media (min-width:900px){
  .hero{--photo-h:min(54vh,600px)}
  .hero__in{grid-template-columns:auto minmax(0,1fr);
    align-items:center;gap:clamp(16px,3vw,48px);
    padding-block:clamp(12px,1.6vw,22px) clamp(24px,3vw,44px)}
  .hero__media{margin-inline:0;justify-content:flex-start}
  .hero__body{margin-top:0}
}
@supports (height:1svh){
  @media (min-width:900px){ .hero{--photo-h:min(54svh,600px)} }
}

/* ---- name / quote / signature use the full column width ------------------
   The right third of the hero was empty at every size. Above a 720px text
   column the quote and signature form a hairline-separated rail beside the
   name; below it the name is set on one line and sized to the column.

   These are CONTAINER queries on .hero__body, not viewport media queries, on
   purpose: --photo-h ties the portrait's WIDTH to viewport HEIGHT, so a tall
   or half-screen-snapped window has a wide viewport but a narrow text column.
   Querying the column means each arrangement only appears where it fits, and
   the two ranges tile exactly at 720px so no width falls back to a layout with
   a hole in it. Browsers without container-query support ignore both blocks
   and get the plain stacked hero. */
.hero__body{
  display:flex;flex-wrap:wrap;align-items:stretch;
  row-gap:0;column-gap:clamp(26px,3vw,48px);
  container-type:inline-size;
}
.hero__body > .eyebrow{flex:0 0 100%}
.hero__name{flex:0 0 auto}
.hero__line{flex:1 1 100%;min-width:0}

/* ONE arrangement at every size: the name on a single line sized to fill the
   column, with the quote and signature side by side and centred beneath it.
   There used to be a second "rail" arrangement for wide columns, but which one
   you got depended on viewport HEIGHT (the portrait's width follows it), so a
   13" laptop landed on the rail while a large monitor and a phone did not.
   One arrangement is worth more than the rail was. */
.hero__name br{display:none}
.hero__name{white-space:nowrap;margin-bottom:.2em}

/* Fallback for browsers without container queries — cqw would be invalid there
   and the whole declaration would be dropped. */
.hero__name{font-size:min(clamp(3rem,13vw,8.5rem),18vh);
            font-size:min(clamp(3rem,13vw,8.5rem),18svh)}
/* "JAN KLAS" is 5.305em wide in Archivo Black at -.035em tracking, so 18.8cqw
   is exactly the column width and cannot overflow. The svh term guards short
   screens (landscape phones), where the column is wide but there is no height. */
@supports (font-size:1cqw){
  .hero__name{font-size:min(18.8cqw,10rem,22vh);
              font-size:min(18.8cqw,10rem,22svh)}
}

/* centre, not bottom-align: the signature is taller than the quote, so
   flex-end left it hanging above the text instead of reading alongside it */
.hero__line{align-items:center;justify-content:flex-start;
  gap:clamp(14px,1.6vw,28px)}
/* A flex box does not shrink to its WRAPPED line width — it keeps whatever
   width is available, so the quote's box sat ~130px past its longest line and
   that slack read as a gap before the signature. Capping the measure in `em`
   makes the box hug the text at any size.

   The slogan is now one short line, so the cap sits just above its own measure
   („ROZUM, SRDCE A VÁŠ HLAS“ = 16.29em in Archivo Black at -.01em tracking) and
   the arrangement the hero was built for — text left, signature filling the rest
   of the column — is restored by SIZE rather than by wrapping. */
.hero__quote{flex:0 1 auto;max-width:16.4em}
/* 4.7cqw is the largest coefficient that still leaves room for the gap and the
   signature on one line at every size from a 1512 laptop down to a 375 phone
   (375 is the tightest: 12px to spare). It also holds the slogan at ~1/4 of the
   name's size at every width, which is the proportion the old three-line slogan
   had. The svh term is the short-screen guard, as on the name. */
@supports (font-size:1cqw){
  .hero__quote{font-size:min(clamp(1rem,4.7cqw,2.75rem),7vh);
               font-size:min(clamp(1rem,4.7cqw,2.75rem),7svh)}
}
/* Below ~330px of column (a 360px phone, or a tall half-screen desktop window
   where the portrait eats the width) no size both fits on one line and stays
   readable, so fold to two lines — and cap the box to the longer line, 8.91em,
   so it keeps hugging its text instead of leaving a gap before the signature. */
@container (max-width:330px){
  .hero__quote{max-width:9.1em}
}
.hero__sig{margin-left:0}

/* ---------------------------------------------------------------- tiles */
.tiles{display:grid;gap:10px;margin-top:clamp(26px,4vw,40px)}
@media (min-width:620px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.tiles{grid-template-columns:repeat(3,1fr);gap:12px}}

.tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:26px;
  min-height:150px;padding:20px 22px;text-decoration:none;color:var(--ink);background:#fff;
  border:1px solid var(--hair);border-left:3px solid var(--blue);
  transition:transform .18s ease,border-left-width .18s ease,box-shadow .18s ease,background-color .18s ease}
.tile__k{font-size:.66rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}
.tile__n{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.05rem,1.75vw,1.3rem);line-height:1.08;letter-spacing:-.01em;
  padding-right:38px}   /* keep clear of the absolutely-positioned arrow */
.tile__arrow{position:absolute;right:20px;bottom:20px;width:22px;height:11px;color:var(--blue);
  transition:transform .18s ease}
.tile:hover,.tile:focus-visible{transform:translateX(4px);border-left-width:7px;
  box-shadow:0 8px 22px rgba(0,0,0,.07);background:var(--blue-wash)}
.tile:hover .tile__arrow,.tile:focus-visible .tile__arrow{transform:translateX(5px)}

/* ------------------------------------------------------- strip rack (CV) */
.rack{margin-top:clamp(24px,3.5vw,36px);border-top:1px solid var(--hair)}
.strip{display:grid;grid-template-columns:1fr;gap:4px 26px;padding:18px 0 18px 18px;
  border-bottom:1px solid var(--hair);border-left:3px solid var(--blue);
  transition:background-color .18s ease,border-left-width .18s ease,padding-left .18s ease}
.strip:hover{background:var(--blue-wash);border-left-width:7px;padding-left:22px}
.strip__yr{font-family:var(--display);font-weight:400;font-size:.92rem;letter-spacing:.005em;
  color:var(--blue);font-variant-numeric:tabular-nums;white-space:nowrap}
.strip__txt{max-width:58ch}
@media (min-width:720px){
  .strip{grid-template-columns:148px minmax(0,1fr);align-items:baseline}
  .strip__yr{font-size:1rem}
}

/* ------------------------------------------------------- statement bands */
.band{background:var(--blue);color:#fff;margin-block:clamp(20px,3vw,48px);overflow:hidden}
.band__in{max-width:var(--wrap);margin-inline:auto;padding:clamp(40px,7vw,88px) var(--pad)}
.band__t{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.32rem,3.5vw,2.7rem);line-height:1.1;letter-spacing:-.015em;max-width:26ch}
.band--deep{background:var(--blue-deep)}

/* ---------------------------------------------------------------- Q&A */
.qa{display:grid;gap:clamp(30px,4vw,44px);margin-top:clamp(26px,4vw,40px)}
.qa__item{display:grid;gap:14px;padding-top:26px;border-top:1px solid var(--hair)}
.qa__a{max-width:64ch}
.qa__a p + p{margin-top:1em}
@media (min-width:900px){
  .qa__item{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(24px,4vw,56px)}
  .qa__q{position:sticky;top:calc(var(--head-h) + 26px);align-self:start}
}

/* ---------------------------------------------------------------- priorities */
.prio{display:grid;gap:12px;margin-top:clamp(26px,4vw,40px)}
.prio__item{background:#fff;border:1px solid var(--hair);border-top:3px solid var(--blue);
  padding:24px 22px;transition:box-shadow .18s ease,transform .18s ease}
.prio__item:hover{box-shadow:0 10px 26px rgba(0,0,0,.075);transform:translateY(-3px)}
.prio__icon{width:34px;height:34px;color:var(--blue);margin-bottom:16px}
.prio__item p{max-width:60ch}
.prio__item strong{font-weight:700;color:var(--blue-deep)}
.prio__item--lead{border-top-color:var(--blue-deep);background:var(--blue-wash)}
@media (min-width:720px){.prio{grid-template-columns:repeat(2,1fr)}}
/* 3 columns with the lead card spanning 2 fills exactly 6 cells for 5 items —
   a 4-column grid leaves a dead column on the second row. */
@media (min-width:1080px){
  .prio{grid-template-columns:repeat(3,1fr)}
  .prio__item--lead{grid-column:span 2}
}

/* committees */
.comm{display:grid;gap:12px;margin-top:clamp(24px,3.5vw,34px)}
.comm__item{border:1px solid var(--hair);border-left:3px solid var(--blue);padding:20px 22px;
  font-family:var(--display);text-transform:uppercase;font-size:clamp(.92rem,1.5vw,1.08rem);
  line-height:1.15;color:var(--blue-deep)}
@media (min-width:720px){.comm{grid-template-columns:repeat(2,1fr)}}

/* ---------------------------------------------------------------- events */
.events{margin-top:clamp(24px,3.5vw,36px);border-top:1px solid var(--hair)}
.event{display:grid;grid-template-columns:1fr;gap:3px 26px;padding:16px 0 16px 18px;
  border-bottom:1px solid var(--hair);border-left:3px solid var(--blue-light);
  transition:background-color .18s ease,border-left-color .18s ease}
.event:hover{background:var(--blue-wash);border-left-color:var(--blue)}
.event__d{font-family:var(--display);font-size:.85rem;color:var(--blue);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.event__n{font-weight:500}
@media (min-width:720px){
  .event{grid-template-columns:170px minmax(0,1fr);align-items:baseline}
  .event__d{font-size:.94rem}
}

/* socials */
.socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(28px,4vw,40px)}
.social{display:grid;place-items:center;width:50px;height:50px;color:var(--blue);
  border:1px solid var(--hair);border-radius:30px;background:#fff;
  transition:background-color .18s ease,color .18s ease,transform .18s ease,border-color .18s ease}
.social svg{width:20px;height:20px}
.social:hover{background:var(--blue);color:#fff;border-color:var(--blue);transform:translateY(-3px)}

/* ---------------------------------------------------------------- obce */
.obce{margin-top:clamp(22px,3vw,32px);display:flex;flex-wrap:wrap;gap:2px 0}
.obce li{font-size:.86rem;font-weight:500;line-height:1.7}
.obce li:not(:last-child)::after{content:"·";color:var(--blue);margin-inline:9px;font-weight:700}

/* ---------------------------------------------------------------- volby */
.volby{background:var(--blue-deep);color:#fff}
.volby__in{max-width:var(--wrap);margin-inline:auto;padding:clamp(20px,2.4vw,32px) var(--pad);
  display:grid;gap:14px}
.volby__t{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.3rem,3vw,2.1rem);line-height:1.05;letter-spacing:-.01em}
.volby__rounds{display:grid;gap:12px}
.volby__r{border-left:3px solid var(--blue-light);padding:8px 0 8px 16px}
.volby__r b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:.76rem;letter-spacing:.14em;color:var(--blue-light);margin-bottom:3px}
.volby__r span{font-size:clamp(1.02rem,2vw,1.3rem);font-weight:600;font-variant-numeric:tabular-nums}
@media (min-width:820px){
  .volby__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:48px}
  .volby__rounds{grid-template-columns:repeat(2,1fr)}
}

/* ------------------------------------------------------------- write to me */
.mailto{margin-top:clamp(26px,4vw,40px);
  display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.mailto__link{display:inline-block;max-width:100%;
  padding:.62em 1.4em;border:2px solid var(--blue);border-radius:30px;
  background:var(--blue);color:#fff;text-decoration:none;
  font-family:var(--display);font-weight:400;letter-spacing:-.005em;
  font-size:clamp(1.05rem,3.4vw,1.9rem);line-height:1.25;
  /* a long address must wrap rather than overflow on a 320px phone */
  overflow-wrap:anywhere;
  transition:background-color .16s ease,border-color .16s ease,transform .16s ease}
.mailto__link:hover{background:var(--blue-hover);border-color:var(--blue-hover);
  transform:translateY(-2px)}

/* Copy button — a bare icon, no box of its own: the pill outline competed with
   the address button next to it for the same "press me" reading. Hidden unless
   JS is available, since without it the button could not do anything.
   The 11px padding is what makes it a 52px tap target around a 30px icon —
   the hit area is unchanged, only the box around it is gone. The icon's centre
   sits in the same place relative to the address as it did with the pill. */
.mailto__copy{display:none}
.js .mailto__copy{display:inline-flex;align-items:center;justify-content:center;
  width:auto;height:auto;flex:0 0 auto;padding:11px;
  border:0;border-radius:0;background:none;color:var(--blue);
  -webkit-appearance:none;appearance:none;
  cursor:pointer;
  transition:color .16s ease,transform .16s ease}
.mailto__copy svg{width:30px;height:30px}
.mailto__copy:hover{color:var(--blue-deep);transform:translateY(-2px)}
.mailto__copy.is-done{color:var(--blue-deep)}
/* The global focus ring is the only box this button ever draws. Stated again
   here so a later change to the bare-icon rules cannot quietly remove it. */
.mailto__copy:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.mailto__msg{font-size:.85rem;font-weight:600;color:var(--blue-deep);
  opacity:0;transition:opacity .18s ease}
.mailto__msg.is-on{opacity:1}

.btn{display:inline-flex;align-items:center;gap:11px;padding:.75em 2em;border:2px solid var(--blue);
  border-radius:30px;background:var(--blue);color:#fff;font-weight:700;font-size:.95rem;
  cursor:pointer;text-decoration:none;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease}
.btn:hover{background:var(--blue-hover);border-color:var(--blue-hover)}

/* volunteer / invitation panel */
.vol{margin-top:clamp(44px,6vw,72px);padding:clamp(28px,4vw,44px);background:var(--band);
  border-left:3px solid var(--blue)}
.vol p{max-width:62ch;margin-top:14px}
/* the panel is also used without a heading (the invitation under the calendar) */
.vol > p:first-child{margin-top:0}

/* ---------------------------------------------------------------- footer */
.ftr{background:var(--footer-bg);color:#fff;padding-block:clamp(44px,6vw,72px)}
.ftr__in{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);display:grid;gap:34px}
.ftr__logo img{height:56px;width:auto}
.ftr a{color:#fff}
.ftr a:hover{color:#dadada}
.ftr__meta{font-size:.85rem;line-height:1.7}
.ftr__legal{font-size:.8rem;line-height:1.75;color:#e4e4e4;
  border-top:1px solid rgba(255,255,255,.22);padding-top:22px}
.ftr__legal b{color:#fff;font-weight:700}
@media (min-width:820px){.ftr__in{grid-template-columns:auto 1fr;align-items:start;gap:22px 56px}
  .ftr__legal{grid-column:1/-1}}

/* ---------------------------------------------------------------- prose (privacy page) */
.prose{max-width:70ch;margin-inline:auto}
.prose h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.05rem,2.2vw,1.4rem);
  line-height:1.15;margin-top:2.1em;margin-bottom:.6em;color:var(--blue-deep)}
.prose h2:first-of-type{margin-top:1.2em}
.prose p{margin-bottom:1em}
.prose ul{list-style:none;margin-bottom:1em}
.prose ul li{position:relative;padding-left:22px;margin-bottom:.45em}
.prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;
  background:var(--blue)}
.prose ol{list-style:decimal;padding-left:24px;margin-bottom:1em}
.prose ol li{margin-bottom:.45em;padding-left:4px}
.prose strong{font-weight:700}
.prose code{background:#FFF1EE;color:#8a1c00;padding:1px 6px;font-size:.9em;font-family:var(--body);
  font-weight:600}

/* ---------------------------------------------------------------- motion */
.js .reveal{opacity:0;transform:translateY(16px)}
.js .reveal.is-in{opacity:1;transform:none;
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
.js .band__t{opacity:0;transform:translateY(18px)}
.js .band.is-in .band__t{opacity:1;transform:none;
  transition:opacity .6s .18s cubic-bezier(.22,.61,.36,1),transform .6s .18s cubic-bezier(.22,.61,.36,1)}
.js .band::before{content:"";position:absolute;inset:0;background:var(--white);
  transform-origin:left center;transform:scaleX(1)}
.js .band{position:relative}
.js .band.is-in::before{transform:scaleX(0);transition:transform .7s cubic-bezier(.65,0,.35,1)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .reveal,.js .band__t{opacity:1!important;transform:none!important}
  .js .band::before{display:none}
  .tile:hover,.tile:focus-visible,.strip:hover,.prio__item:hover,.social:hover{transform:none}
}