/* Costa Pop Choir — site styles.
   Colours, type and spacing all come from the tokens in :root.
   Type: Fraunces for display, Manrope for everything else.

   The two do different jobs. Headings are set at Fraunces' display optical
   size, heavy and very tight, so a heading reads as a headline rather than as
   large body text. Everything a person actually reads stays at Manrope Regular and
   generous line height. The page gets its punch from that contrast, not from
   making the whole thing louder. */

/* --------------------------------------------------------------- the type */
/* Both families are served from this site rather than from Google. Three
   reasons: the stylesheet Google hands back is render-blocking and sits on a
   third-party origin, so every visit paid for an extra DNS lookup and TLS
   handshake before a single word could be drawn; the request was pulling five
   weights of Fraunces and an italic when the design uses a range; and a choir
   in Spain should not be handing every visitor's address to a third party to
   render its own headings.

   The files are the official variable fonts with the axes this site does not
   use taken out — see assets/fonts/OFL.txt. Latin Extended is a separate file
   and is only fetched if a page actually contains one of its characters. */
@font-face{
  font-family:Fraunces;
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url(../fonts/fraunces-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:Fraunces;
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url(../fonts/fraunces-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:Fraunces;
  font-style:italic;
  font-weight:300 700;
  font-display:swap;
  src:url(../fonts/fraunces-italic-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:Fraunces;
  font-style:italic;
  font-weight:300 700;
  font-display:swap;
  src:url(../fonts/fraunces-italic-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:Manrope;
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url(../fonts/manrope-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:Manrope;
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url(../fonts/manrope-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;
}

:root{
  /* brand */
  --cream:#FBF7F0;
  --navy:#0B2559;
  --blue:#1145B8;
  --yellow:#F5C400;
  --orange:#E8811C;
  /* Orange is a decorative accent. As text on cream or peach it is 2.5:1, so
     anything a person has to read gets the darker cut instead. */
  --orange-ink:#9A4E00;
  --sky:#D9EBFC;
  --sky-deep:#BFDFFA;
  --peach:#FDF0DC;
  --peach-deep:#F8DFC1;

  /* derived ink */
  --ink-80:rgba(11,37,89,.80);
  --ink-70:rgba(11,37,89,.68);
  /* Was .52 — 3.3:1 on cream, which is below the readable minimum and was
     carrying nearly all the small print on the site. The choir's audience is
     largely over 50 and often reading on a phone in bright sun. */
  --ink-55:rgba(11,37,89,.68);
  --ink-faint:rgba(11,37,89,.52);
  --line:rgba(11,37,89,.12);
  --line-soft:rgba(11,37,89,.08);

  /* spacing scale */
  --s1:6px; --s2:10px; --s3:16px; --s4:22px; --s5:30px;
  --s6:40px; --s7:56px; --s8:72px; --s9:96px; --s10:128px;
  --pad:clamp(22px,4vw,40px);
  --section:clamp(76px,9.5vw,132px);
  --max:1180px;

  /* shape */
  --r-sm:12px; --r:18px; --r-lg:26px;
  --shadow-card:0 18px 40px -34px rgba(11,37,89,.5);
  --shadow-lift:0 30px 70px -40px rgba(11,37,89,.55);

  /* type */
  --display:Fraunces,"Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --label:var(--sans);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{
  margin:0;background:var(--cream);color:var(--navy);
  font-family:var(--sans);
  font-size:17.5px;font-weight:400;line-height:1.7;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none;transition:color .15s ease}
a:hover{color:var(--navy)}

h1,h2,h3,h4{
  margin:0;font-family:var(--display);font-weight:600;
  /* Let Fraunces pick its own optical size from the size it is set at. Forcing
     the display cut on a 19px card title packs the letters until they touch;
     forcing the reading cut on a 90px headline leaves it loose and weak. */
  font-optical-sizing:auto;
  font-variation-settings:"SOFT" 0,"WONK" 1;
  letter-spacing:-.028em;line-height:1.03;text-transform:none;text-wrap:balance;
  /* Tight tracking closes the word spaces as well as the letter spaces, and
     "Howa choir night" is not what was wanted. This puts the gaps back. */
  word-spacing:.05em;
}
/* Small headings need the tracking back: the tighter fit only reads well once
   the letters are big. */
h3,h4{font-weight:600;letter-spacing:-.012em;line-height:1.22}
p{margin:0 0 var(--s4)}
strong,b{font-weight:600}
/* A two-tone ring, because a single colour cannot pass against both a yellow
   button and a navy panel. Orange on yellow was 1.7:1 — effectively invisible
   to anybody tabbing through the booking form. */
:focus-visible{outline:3px solid var(--navy);outline-offset:2px;box-shadow:0 0 0 6px rgba(245,196,0,.55);border-radius:4px}
.panel-blue :focus-visible,.products--navy :focus-visible,.quote :focus-visible,.newsletter--navy :focus-visible,.banner :focus-visible{outline-color:var(--yellow);box-shadow:0 0 0 6px rgba(11,37,89,.6)}
[hidden]{display:none !important}
::selection{background:var(--yellow);color:var(--navy)}

.wrap{max-width:var(--max);margin:0 auto}
.section{padding:var(--section) var(--pad)}
/* Two plain bands in a row were paying the full gap twice over, which left a
   screen of nothing between them on a short page. */
.section + .section{padding-top:calc(var(--section) * .55)}
.section--tight{padding:0 var(--pad) var(--section)}
.section--tight + .section{padding-top:calc(var(--section) * .55)}
.eyebrow{
  font-family:var(--label);font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--navy);margin:0 0 var(--s4);
}
/* A short rule, then the label. Drawn inline rather than with flex, so an
   eyebrow that contains a link and some text stays one run of words. */
.eyebrow::before{
  content:"";display:inline-block;vertical-align:middle;position:relative;top:-1px;
  width:34px;height:2px;margin-right:13px;background:var(--yellow);border-radius:2px;
}
.lede{font-size:20px;font-weight:400;line-height:1.65;color:var(--ink-70);max-width:36em}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:100;background:var(--yellow);color:var(--navy);padding:14px 20px;border-radius:999px;font-weight:600}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-block;padding:16px 30px;border-radius:999px;
  font-family:var(--sans);font-size:15.5px;font-weight:600;letter-spacing:.005em;
  border:1px solid transparent;cursor:pointer;line-height:1.2;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn--solid{background:var(--blue);color:var(--cream)}
.btn--solid:hover{background:var(--navy);color:var(--cream)}
.btn--yellow{background:var(--yellow);border-color:var(--yellow);color:var(--navy)}
.btn--yellow:hover{background:var(--navy);border-color:var(--navy);color:var(--cream)}
.btn--outline{border-color:rgba(11,37,89,.5);color:var(--navy);background:transparent}
.btn--outline:hover{border-color:var(--navy);background:var(--navy);color:var(--cream)}
.btn--navy{background:var(--navy);color:var(--cream)}
.btn--navy:hover{background:var(--cream);color:var(--navy)}
.btn--sm{padding:12px 22px;font-size:14.5px}
.btn--full{width:100%;text-align:center}

/* ------------------------------------------------- announcement + header */
.announce{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--s2) var(--s4);padding:14px var(--pad);background:var(--yellow);color:var(--navy);text-align:center;
}
.announce strong{font-family:var(--label);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.announce span{font-size:15px;font-weight:400;color:rgba(11,37,89,.72)}

.site-header{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);padding:18px var(--pad);
  background:rgba(251,247,240,.94);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.brand{display:flex;align-items:center;gap:13px;color:var(--navy)}
.brand img{width:44px;height:44px;border-radius:999px}
.brand b{font-family:var(--label);font-weight:600;letter-spacing:.14em;font-size:14px;text-transform:uppercase}
.brand small{font-family:var(--label);font-size:10.5px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55)}
.nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px)}
.nav a{font-size:14.5px;font-weight:500;color:var(--navy);padding:6px 0;position:relative}
.nav a:not(.is-button)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--navy);transition:right .22s ease}
.nav a:not(.is-button):hover::after{right:0}
.nav a.is-button{padding:11px 22px;border-radius:999px;background:var(--blue);color:var(--cream);font-weight:600}
.nav a.is-button:hover{background:var(--navy)}
.nav a[aria-current="page"]{color:var(--blue)}
.nav a[aria-current="page"]:not(.is-button)::after{right:0;background:var(--blue)}
.nav a.is-button[aria-current="page"]{background:var(--navy)}
.nav-toggle{display:none;background:none;border:0;padding:10px;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:1.5px;background:var(--navy);margin:6px 0;transition:transform .2s,opacity .2s}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ------------------------------------------------------------------- hero */
/* Transform only. Fading in from opacity 0 meant the browser did not count the
   headline as painted until the animation finished, which pushed the site's
   Largest Contentful Paint out by more than half a second for decoration. */
@keyframes cpc-rise{from{transform:translateY(14px)}to{transform:none}}
.hero{position:relative;padding:clamp(68px,8.5vw,116px) var(--pad) clamp(68px,8.5vw,100px);background:linear-gradient(180deg,var(--sky) 0%,var(--cream) 100%)}
.hero__copy{animation:cpc-rise .6s ease both}
.hero__grid{
  /* The gap belongs between the columns, not between the words and the
     buttons underneath them: with one value the row gap added a further
     72px on a wide screen on top of the paragraph's own margin, and the
     buttons drifted away from what they were answering. */
  display:grid;grid-template-columns:1.05fr .95fr;
  column-gap:clamp(36px,5vw,72px);row-gap:0;
  grid-template-areas:"copy figure" "cta figure";
  grid-template-rows:auto auto;align-content:center;
  max-width:var(--max);margin:0 auto;
}
.hero__copy{grid-area:copy;align-self:end}
.hero__cta{grid-area:cta;align-self:start}
.hero__figure{grid-area:figure;align-self:center}
.hero__pill{
  display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;background:var(--yellow);color:var(--navy);
  font-family:var(--label);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;margin-bottom:var(--s5);
}
/* The headline is the site's one big design move, so it is allowed to be
   big: up from 38–98px to 44–132px, and a steeper slope in between so a
   phone gets a headline rather than a large paragraph. break-word is the
   safety net for a longer word than "already". */
.hero h1{font-size:clamp(44px,13.4vw,132px);overflow-wrap:break-word;font-weight:700;line-height:.88;margin:0 0 var(--s5);letter-spacing:-.05em;word-spacing:.09em;font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 1}
.hero h1 .accent{color:var(--orange);font-style:italic;font-weight:600}
.hero__body{margin:0 0 var(--s6);max-width:30em;font-size:19.5px;font-weight:400;line-height:1.7;color:var(--ink-80)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
/* A grid rather than a wrapping flex row: three short numbers used to break
   2-then-1 on a phone, which left "€7 per session" sitting alone on a line
   of its own looking like an afterthought. */
.stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:var(--s7);margin-top:var(--s7)}
.stats b{display:block;font-family:var(--display);font-size:42px;font-weight:600;letter-spacing:-.035em;line-height:1;margin-bottom:10px;font-variant-numeric:tabular-nums}
.stats span{font-family:var(--label);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55)}
.hero__figure{position:relative;border-radius:var(--r-lg);background:var(--sky-deep);aspect-ratio:4/5;box-shadow:var(--shadow-lift)}
.hero__figure::before{content:"";position:absolute;top:-28px;left:-28px;width:128px;height:128px;border-radius:999px;background:var(--yellow);z-index:0}
.hero__figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 45%;border-radius:var(--r-lg);z-index:1}
.hero__figure--video{aspect-ratio:16/10;background:var(--navy)}
.hero__figure--video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:var(--r-lg);z-index:1}

/* ----------------------------------------------------------------- ticker */
.ticker{background:var(--blue);color:var(--cream);padding:22px var(--pad)}
/* Centred, so a sixth fact that will not fit on the line sits under the
   middle of the row rather than orphaned hard against the left margin
   looking like something went wrong. */
.ticker__inner{
  max-width:var(--max);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;
  gap:12px clamp(24px,4vw,56px);text-align:center;
  font-family:var(--label);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
}

/* ----------------------------------------------------------- section head */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s6);flex-wrap:wrap;margin-bottom:var(--s7)}
.head h2{font-size:clamp(34px,4.6vw,54px);max-width:15em}
.head p{margin:0;max-width:26em;font-size:17px;font-weight:400;line-height:1.7;color:var(--ink-70)}

/* ------------------------------------------------------------------ cards */
.grid{display:grid;gap:var(--s4)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.card{padding:var(--s5);border-radius:var(--r);background:var(--peach);border:1px solid var(--line-soft);transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.card:hover{background:var(--peach-deep);transform:translateY(-2px);box-shadow:var(--shadow-card)}
.card__time{font-family:var(--label);font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--orange-ink);margin-bottom:var(--s4)}
.card h3{font-size:23px;font-weight:400;line-height:1.15;margin:0 0 var(--s2)}
.card p{margin:0;font-size:15.5px;font-weight:400;line-height:1.7;color:var(--ink-70)}

/* ------------------------------------------------------------ quote panel */
.quote-row{margin-top:var(--s5);display:grid;grid-template-columns:2fr 1fr;gap:var(--s4);align-items:stretch}
.quote{padding:var(--s6);border-radius:var(--r);background:var(--navy);color:var(--cream)}
.quote .eyebrow{color:var(--yellow)}
.quote blockquote{margin:0 0 var(--s4);font-family:var(--display);font-size:clamp(21px,2.3vw,29px);font-weight:500;line-height:1.24;letter-spacing:-.028em;text-wrap:pretty}
.quote cite{font-family:var(--label);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(251,247,240,.62);font-style:normal}
/* Centred rather than spread. Pushed apart, a two-line invitation beside a
   tall quote left a hole in the middle of the card that read as a picture
   that had failed to load. */
.invite{padding:var(--s6);border-radius:var(--r);background:var(--sky);display:flex;flex-direction:column;justify-content:center;gap:var(--s5)}
.invite p{margin:0;font-family:var(--display);font-size:20px;font-weight:500;line-height:1.4;letter-spacing:-.02em}
.invite .btn{align-self:flex-start}

/* ---------------------------------------------------------- lessons panel */
.panel-blue{padding:var(--section) var(--pad);background:var(--blue);color:var(--cream)}
.panel-blue .eyebrow{color:var(--yellow)}
.panel-blue h2{font-size:clamp(38px,5.2vw,62px);font-weight:300;line-height:1.02;margin:0 0 var(--s4)}
/* Top-aligned, not centred. The right-hand stack — a callout, two price
   cards, a quote and a note — is twice the height of the writing beside it,
   and centring pushed the heading 500px down the panel, so the section
   opened with a large empty blue rectangle where its title should be. Every
   other two-column block on the site already starts at the top. */
.panel-blue__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:start;max-width:var(--max);margin:0 auto}
.panel-blue__lead{margin:0 0 var(--s5);max-width:28em;font-family:var(--display);font-size:23px;font-weight:400;line-height:1.45;letter-spacing:-.018em;color:var(--yellow)}
.panel-blue__body{max-width:30em;font-size:17.5px;font-weight:400;line-height:1.75;color:rgba(251,247,240,.86)}
.panel-blue__body p{margin:0 0 var(--s4)}
.panel-blue a:not(.btn){color:var(--yellow)}
.figure-inline{margin:0 0 var(--s5);display:flex;align-items:center;gap:var(--s4);padding:var(--s4);border-radius:var(--r);background:rgba(251,247,240,.1);max-width:30em}
.figure-inline img{flex:none;width:84px;height:84px;border-radius:999px;object-fit:cover;object-position:50% 35%}
.figure-inline figcaption{font-size:15.5px;font-weight:400;line-height:1.6;color:rgba(251,247,240,.9)}
.figure-inline strong{color:var(--yellow);font-weight:500}
.ticks{margin:0 0 var(--s6);padding:0;list-style:none;display:grid;gap:var(--s3)}
.ticks li{display:flex;gap:14px;align-items:flex-start;font-size:16px;font-weight:400;line-height:1.6;color:rgba(251,247,240,.9)}
.ticks li::before{content:"";flex:none;width:6px;height:6px;border-radius:999px;background:var(--yellow);margin-top:10px}
.stack{display:grid;gap:var(--s4)}
.callout{padding:var(--s5) var(--s6);border-radius:var(--r);background:var(--yellow);color:var(--navy)}
.callout p{margin:0 0 var(--s4);font-family:var(--display);font-size:19px;font-weight:400;line-height:1.5;letter-spacing:-.018em}
.testimonial{padding:var(--s5) var(--s6);border-radius:var(--r);border:1px solid rgba(251,247,240,.35)}
.testimonial p{margin:0 0 var(--s3);font-family:var(--display);font-size:21px;font-weight:500;line-height:1.35;letter-spacing:-.025em}
.testimonial cite{font-size:14px;font-weight:300;color:rgba(251,247,240,.8);font-style:normal}
.note{margin:0;font-family:var(--label);font-size:13px;font-weight:400;line-height:1.8;letter-spacing:.06em;text-transform:uppercase;color:rgba(251,247,240,.8)}
/* The line that reassures a cautious 65-year-old that it is safe to type a card
   number in. It was the least legible thing on the card. */
.note--pay{font-size:14px;letter-spacing:.01em;text-transform:none;color:var(--ink-70)}

/* ------------------------------------------------------------------ about */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,5vw,72px);align-items:start;max-width:var(--max);margin:0 auto}
.about__portrait{position:sticky;top:110px;display:grid;gap:var(--s4)}
.about__portrait > div{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--peach-deep);aspect-ratio:3/4;box-shadow:var(--shadow-card)}
.about__portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 25%}
.about h2{font-size:clamp(34px,4.6vw,54px);margin:0 0 var(--s5)}
.about__body{font-size:18px;font-weight:400;line-height:1.8;color:var(--ink-80)}
.about__body p{margin:0 0 var(--s4);max-width:36em;text-wrap:pretty}
.about__figure{float:right;width:46%;margin:6px 0 var(--s4) var(--s6);border-radius:var(--r);overflow:hidden;background:var(--navy);box-shadow:var(--shadow-card)}
.about__figure img{width:100%;aspect-ratio:5/4;object-fit:cover;object-position:45% 35%}
.about__figure figcaption{padding:14px 18px;font-family:var(--label);font-size:10.5px;font-weight:400;line-height:1.7;letter-spacing:.18em;text-transform:uppercase;color:rgba(251,247,240,.75)}
.pills{clear:both;margin:var(--s5) 0 var(--s6);padding:var(--s5) var(--s6);border-radius:var(--r);background:var(--peach);border:1px solid var(--line-soft)}
.pills__list{display:flex;flex-wrap:wrap;gap:var(--s2)}
.pill{padding:9px 17px;border-radius:999px;background:var(--cream);border:1px solid rgba(11,37,89,.14);font-size:13.5px;font-weight:500;color:var(--navy)}
.pills p{margin:var(--s4) 0 0;font-size:13.5px;font-weight:300;line-height:1.7;color:var(--ink-55)}
.button-row{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}

/* ------------------------------------------------------------------ prose */
.prose{font-size:18px;font-weight:400;line-height:1.8;color:var(--ink-80);max-width:38em}
/* A page that is nothing but writing centres one column, and the heading sits
   on the same measure as the text under it — so the white space falls evenly
   either side rather than all down the right. */
/* A page that is nothing but writing centres its column; a page with real
   bands on it keeps the writing on the same left edge as everything else. */
.prose-page{margin-inline:auto;max-width:var(--max)}
.prose-page--narrow > *{max-width:42rem}
.prose-page--narrow.is-centred{max-width:42rem}
.prose-page--narrow.is-centred > *{max-width:none}
.prose-page--wide{max-width:var(--max)}
.prose-page .prose{max-width:none}
/* Pictures in the writing are shown whole. Georgette's flyers are portrait and
   her price cards are square; forcing a landscape box slices the top off. */
.prose img{margin:var(--s5) 0;border-radius:var(--r-sm)}
.prose > *:first-child{margin-top:0}
.prose p{margin:0 0 var(--s4);text-wrap:pretty}
.prose h2{font-size:clamp(26px,3vw,36px);margin:var(--s7) 0 var(--s3)}
.prose h3{font-size:23px;font-weight:400;margin:var(--s6) 0 var(--s2)}
.prose h4{font-family:var(--label);font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--orange-ink);margin:var(--s5) 0 var(--s2)}
.prose ul,.prose ol{margin:0 0 var(--s4);padding-left:1.35em}
.prose li{margin-bottom:var(--s2)}
.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:.5px}
.prose strong{font-weight:600}
.prose blockquote{margin:var(--s5) 0;padding:var(--s4) var(--s5);border-left:2px solid var(--yellow);background:var(--peach);border-radius:0 var(--r-sm) var(--r-sm) 0}
.prose blockquote p:last-child{margin-bottom:0}
.panel-blue .prose{color:rgba(251,247,240,.88)}
.panel-blue .prose h3{color:var(--cream)}

/* ------------------------------------------------------------------ press */
.press{max-width:var(--max);margin:0 auto;padding:var(--s5) var(--s6);border-radius:var(--r);border:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s8)}
.press__label{font-family:var(--label);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-55)}
.press__logos{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s7)}
.press__logos a{opacity:.8;transition:opacity .15s ease}
.press__logos a:hover{opacity:1}

/* -------------------------------------------------------------------- faq */
.faq h2{font-size:clamp(34px,4.6vw,54px);margin:0 0 var(--s7)}
.faq__item{padding:var(--s5);border-radius:var(--r);background:var(--peach);border:1px solid var(--line-soft)}
.faq__item h3{font-size:19px;font-weight:500;font-family:var(--sans);letter-spacing:-.01em;line-height:1.4;margin:0}
.faq__item p{margin:var(--s3) 0 0;font-size:16px;font-weight:400;line-height:1.7;color:var(--ink-70);text-wrap:pretty}
/* The question is the button. 44px of row, a chevron that turns, and the
   whole thing reachable from the keyboard because it is a <summary>. */
.faq__item > summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);
  list-style:none;cursor:pointer;min-height:28px;
}
.faq__item > summary::-webkit-details-marker{display:none}
.faq__item > summary::after{
  content:"";flex:none;width:11px;height:11px;margin-top:6px;
  border-right:2px solid var(--ink-70);border-bottom:2px solid var(--ink-70);
  transform:rotate(45deg);transform-origin:60% 60%;transition:transform .18s ease;
}
.faq__item[open] > summary::after{transform:rotate(-135deg)}
.faq__item > summary:hover h3{color:var(--blue)}
.faq__item > summary:focus-visible{outline:2px solid var(--navy);outline-offset:4px;border-radius:4px}

/* ----------------------------------------------------------------- banner */
.banner{position:relative;height:min(64vh,620px);min-height:420px;overflow:hidden}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.banner__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,37,89,.05) 0%,rgba(11,37,89,.42) 45%,rgba(11,37,89,.92) 100%)}
.banner__text{position:absolute;inset:auto 0 0 0;padding:var(--s7) var(--pad)}
.banner__text,.banner__text h2{color:var(--cream)}
.banner__text .eyebrow{color:var(--yellow)}
.banner__text h2{max-width:20em;font-size:clamp(28px,3.6vw,42px);font-weight:300;line-height:1.15}
.banner__text p{margin:var(--s3) 0 0;max-width:36em;font-size:17px;font-weight:400;line-height:1.7;color:rgba(251,247,240,.85)}

/* -------------------------------------------------------------------- cta */
.cta{max-width:var(--max);margin:0 auto;padding:clamp(52px,7vw,92px) clamp(24px,5vw,64px);border-radius:var(--r-lg);background:linear-gradient(160deg,var(--sky) 0%,var(--peach) 60%,var(--peach-deep) 100%);text-align:center}
.cta h2{margin:0 auto var(--s5);max-width:18em;font-size:clamp(38px,5.4vw,64px);font-weight:300;line-height:1.04}
.cta__lead{margin:0 auto var(--s3);max-width:32em;font-size:19px;font-weight:500}
.cta p.cta__body{margin:0 auto var(--s6);max-width:32em;font-size:17.5px;font-weight:400;line-height:1.75;color:var(--ink-70)}
.cta .button-row{justify-content:center;margin-top:0}

/* --------------------------------------------------------------- products */
.products{display:grid;gap:var(--s4)}
.product{
  padding:var(--s6);border-radius:var(--r);background:var(--cream);color:var(--navy);
  border:1px solid var(--line);display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease;
}
.product:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.panel-blue .product,.products--navy .product{border-color:transparent}
.product__top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s2)}
.product h3{font-size:25px;font-weight:600;letter-spacing:-.024em;margin:0}
.product__price{font-family:var(--display);font-size:36px;font-weight:600;letter-spacing:-.035em;color:var(--blue);white-space:nowrap;font-variant-numeric:tabular-nums}
.product__desc{margin:0 0 var(--s5);font-size:15.5px;font-weight:400;line-height:1.7;color:var(--ink-70)}
.product__badge{
  display:inline-block;align-self:flex-start;margin-bottom:var(--s3);padding:6px 14px;border-radius:999px;background:var(--yellow);
  font-family:var(--label);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
}
.product form,.product__form{margin-top:auto;display:grid;gap:var(--s2);padding-top:var(--s3)}
/* Once JavaScript collapses the form, this button is the last thing in the
   card — and it was not the thing being pushed to the bottom, so a short
   card sat with its action floating in the middle and 170px of nothing
   underneath while the card beside it ended level with its own button. */
.product__toggle{margin-top:auto}
.product form[hidden],.product__form[hidden]{display:none}
/* 16px is not a taste decision: anything smaller and Safari on iOS zooms the
   whole page the moment a field is tapped, leaving somebody mid-booking on a
   magnified page that will not zoom back. The border was 1.5:1 — the field was
   all but invisible on a white card. */
.product input,.product textarea,.product select{width:100%;padding:14px 16px;border-radius:var(--r-sm);border:1px solid rgba(11,37,89,.45);font:inherit;font-size:16px;font-weight:400;background:#fff;color:var(--navy)}
.product textarea{min-height:78px;resize:vertical}
.product input:focus,.product textarea:focus,.product select:focus{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.product .field-label{display:block;font-size:14px;font-weight:600;letter-spacing:.02em;margin-bottom:-2px}
.field-label__soft{font-weight:400;color:var(--ink-70)}
.products--navy{background:var(--navy)}
.includes{margin:0 0 var(--s5);padding:0;list-style:none;display:grid;gap:11px}
.includes li{position:relative;padding-left:26px;font-size:15px;font-weight:400;line-height:1.6;color:var(--ink-80)}
.includes li::before{content:"";position:absolute;left:0;top:6px;width:15px;height:15px;border-radius:999px;background:var(--yellow)}
.includes li::after{content:"";position:absolute;left:4.5px;top:9.5px;width:5px;height:8px;border:solid var(--navy);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}

/* ------------------------------------------------------------ photo strip */
.shot{margin:0;border-radius:var(--r);overflow:hidden;background:var(--peach-deep);position:relative;box-shadow:var(--shadow-card)}
.shot img{width:100%;aspect-ratio:var(--shot-ratio,3/4);object-fit:cover;display:block}
.shot figcaption{padding:14px 18px;font-family:var(--label);font-size:10.5px;font-weight:400;line-height:1.7;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-55);background:var(--peach)}

/* ------------------------------------------------------------------ forms */
.form{display:grid;gap:var(--s4);max-width:580px}
.form label{display:grid;gap:8px;font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-70)}
.form input,.form textarea,.form select{padding:15px 18px;border-radius:var(--r-sm);border:1px solid rgba(11,37,89,.45);font-family:var(--sans);font-size:16px;font-weight:400;background:#fff;color:var(--navy)}
.form input:focus,.form textarea:focus{border-color:var(--blue)}
.form textarea{min-height:160px;resize:vertical}
.form .hp{position:absolute;left:-9999px}
.form-note{font-size:13.5px;font-weight:300;color:var(--ink-55);margin:0}
.panel-form{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:start}

/* ------------------------------------------------------------------ flash */
.flash{position:sticky;top:0;z-index:60;max-width:var(--max);margin:var(--s5) auto 0;padding:18px 22px;border-radius:var(--r-sm);font-size:16px;font-weight:500;box-shadow:var(--shadow-card)}
.flash:focus{outline:3px solid var(--navy);outline-offset:2px}
.flash--success{background:var(--sky);color:var(--navy)}
.flash--error{background:#FDE2DE;color:#8A1C10}

/* ------------------------------------------------------------ member area */
.member-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:var(--s4)}
.lesson-card{padding:var(--s5);border-radius:var(--r);background:var(--peach);border:1px solid var(--line-soft)}
.lesson-card--locked{background:#F2EEE5;color:var(--ink-70)}
/* The lesson title's tag changes with where the list is dropped in, so
   the look is pinned to the card rather than to one heading level. */
.lesson-card h2,.lesson-card h3,.lesson-card h4{font-size:19px;font-weight:400;margin:0 0 var(--s2)}
.badge{display:inline-block;padding:6px 13px;border-radius:999px;font-family:var(--label);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;background:var(--navy);color:var(--cream)}
.badge--done{background:var(--yellow);color:var(--navy);margin-left:8px}
.video{position:relative;padding-top:56.25%;border-radius:var(--r);overflow:hidden;background:var(--navy)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.course-heading{margin:var(--s7) 0 var(--s4);font-size:24px;font-weight:400}
.progress{margin:0 0 var(--s6);max-width:520px}
.progress__bar{height:6px;border-radius:999px;background:var(--peach-deep);overflow:hidden}
.progress__bar span{display:block;height:100%;background:var(--blue);border-radius:999px}
.progress__label{margin:12px 0 0;font-family:var(--label);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55)}

/* ----------------------------------------------------------------- footer */
.site-footer{padding:var(--s7) var(--pad) var(--s6);border-top:1px solid var(--line);margin-top:var(--s5)}
.site-footer__inner{max-width:var(--max);margin:0 auto;display:flex;flex-wrap:wrap;gap:var(--s4) var(--s8);justify-content:space-between;align-items:center;font-size:14px;font-weight:300;color:var(--ink-70)}
.site-footer__brand{display:flex;align-items:center;gap:12px;font-family:var(--label);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:var(--navy)}
.site-footer__brand img{width:38px;height:38px;border-radius:999px}
.site-footer__nav{
  display:grid;gap:var(--s5) var(--s6);flex:1 1 auto;max-width:56rem;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.site-footer__col{display:flex;flex-direction:column;gap:2px;min-width:0}
.site-footer__head{
  margin:0 0 var(--s2);font-family:var(--label);font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-55);
}
.site-footer__nav a{padding:5px 0;font-weight:400;overflow-wrap:break-word}
@media (max-width:640px){
  .site-footer__nav{grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s4)}
}
.version{width:100%;text-align:center;font-family:var(--label);font-size:12px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-55);margin-top:var(--s5)}

/* ------------------------------------------------------------ responsive */
@media (max-width:1000px){
  .hero__grid,.panel-blue__grid,.about,.panel-form{grid-template-columns:1fr}
  /* The photo moves up between the words and the buttons. */
  .hero__grid{grid-template-areas:"copy" "figure" "cta";grid-template-rows:auto auto auto;row-gap:var(--s6)}
  .hero__copy,.hero__cta,.hero__figure{align-self:auto}
  .hero__cta{margin-top:0}
  .about__portrait{position:static}
  .about__portrait > div{max-width:420px}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .quote-row{grid-template-columns:1fr}
  .nav-toggle{display:block}
  .site-header{flex-wrap:wrap}
  .nav{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:var(--s3);padding:var(--s3) 0 var(--s2)}
  .nav-open .nav{display:flex}
  .nav a.is-button{width:100%;text-align:center}
  .head{margin-bottom:var(--s6)}
}
@media (max-width:640px){
  body{font-size:17px}
  .grid--4,.grid--3,.grid--2{grid-template-columns:1fr}
  .about__figure{float:none;width:100%;margin:0 0 var(--s4)}
  .press{padding:var(--s5)}
  .banner{height:min(58vh,520px)}
  /* Three numbers stay three across, and the buttons are the same width as
     each other so the pair reads as one block rather than a ragged edge. */
  .stats{gap:var(--s4);grid-template-columns:repeat(3,1fr);justify-content:stretch}
  .stats b{font-size:34px}
  .stats span{font-size:9px;letter-spacing:.1em;line-height:1.4}
  .btn{padding:15px 26px}
  .hero__actions{display:grid;grid-template-columns:1fr;gap:var(--s3)}
  .hero__actions .btn{width:100%;text-align:center}
  .quote,.invite,.callout,.testimonial,.product{padding:var(--s5)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ------------------------------------------------------------- newsletter */
/* The sign-up card, the archive, and one issue read on the site. */

.newsletter{scroll-margin-top:90px}
.newsletter__card{
  max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,72px);align-items:center;
  padding:clamp(34px,4.4vw,60px);border-radius:var(--r-lg);
}
.newsletter--panel .newsletter__card{background:var(--peach);border:1px solid var(--peach-deep)}
.newsletter--navy .newsletter__card{background:var(--navy);color:var(--cream)}
.newsletter--plain .newsletter__card{padding:0}
.newsletter__words h2{font-size:clamp(30px,3.6vw,44px);font-weight:600;letter-spacing:-.036em;line-height:.98;margin:0 0 var(--s3)}
.newsletter__words .lede{margin:0;max-width:32em}
.newsletter--navy .newsletter__words .lede{color:rgba(251,247,240,.78)}
.newsletter--navy .eyebrow{color:var(--yellow)}
.newsletter__points{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:10px;font-size:15.5px;font-weight:300}
.newsletter__points li{display:flex;gap:11px;align-items:baseline;color:var(--ink-70)}
.newsletter--navy .newsletter__points li{color:rgba(251,247,240,.8)}
.newsletter__points li::before{content:"";flex:none;width:7px;height:7px;border-radius:999px;background:var(--yellow)}
.newsletter__proof{margin:var(--s4) 0 0;font-family:var(--label);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-55)}
.newsletter--navy .newsletter__proof{color:var(--yellow)}
.newsletter__form{background:#fff;border-radius:var(--r);padding:clamp(24px,2.6vw,34px);box-shadow:var(--shadow-card)}
.newsletter--plain .newsletter__form{border:1px solid var(--line)}
.newsletter__form .form{max-width:none;gap:var(--s3)}
.newsletter__latest{margin:var(--s3) 0 0;font-size:14px;font-weight:300;color:var(--ink-55);text-align:center}

/* ---------------------------------------------------------- the archive */

.issue-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s5)}
.issue-card{
  display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:#fff;color:inherit;text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.issue-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);border-color:var(--line-soft);text-decoration:none}
.issue-card__shot{display:block;background:var(--peach)}
.issue-card__shot img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.issue-card__body{display:flex;flex-direction:column;gap:10px;padding:var(--s5)}
.issue-card__when{font-family:var(--label);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-ink)}
.issue-card__title{font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-.026em;line-height:1.15;color:var(--navy)}
.issue-card__summary{font-size:15px;font-weight:400;line-height:1.65;color:var(--ink-70)}
.issue-card__more{margin-top:auto;padding-top:6px;font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--blue)}

/* ------------------------------------------------------------- one issue */

.issue-title{font-size:clamp(34px,4.6vw,54px);font-weight:600;letter-spacing:-.038em;line-height:1;margin:0 0 var(--s4)}
.issue-intro{margin:0 0 var(--s7)}
.issue-hero{margin:var(--s7) auto;max-width:var(--max);padding:0 var(--pad)}
.issue-hero img{width:100%;border-radius:var(--r-lg);aspect-ratio:16/9;object-fit:cover}
.issue-back{margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--line);font-size:15px;font-weight:300}
.issue-body figure{margin:var(--s6) 0}
.issue-body figure img{border-radius:var(--r-sm)}
.issue-body figcaption{margin-top:10px;font-size:14px;font-weight:300;color:var(--ink-55)}
.issue-body hr{border:0;border-top:1px solid var(--line);margin:var(--s7) 0}
.issue-dates,.issue-list{list-style:none;margin:0 0 var(--s5);padding:0;display:grid;gap:var(--s3)}
.issue-dates li{padding:16px 20px;background:var(--peach);border-radius:var(--r-sm);font-weight:300}
.issue-list li{padding-left:18px;border-left:3px solid var(--yellow);font-weight:300}
/* Written as .prose … so it beats the ordinary blockquote rule, which is a
   pale panel and would leave this one's cream type invisible on peach. */
.prose blockquote.issue-quote{margin:var(--s6) 0;padding:var(--s5);background:var(--navy);color:var(--cream);border-radius:var(--r);border:0}
.prose blockquote.issue-quote p{font-family:var(--display);font-size:22px;font-weight:500;line-height:1.35;letter-spacing:-.025em;margin:0;color:var(--cream)}
.prose blockquote.issue-quote cite{display:block;margin-top:var(--s3);font-family:var(--label);font-size:11px;font-style:normal;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--yellow)}
/* A button inside the writing is a button, not an underlined sentence. */
.prose a.btn{text-decoration:none}
.issue-cta{margin:var(--s5) 0 8px}
.issue-cta__note{margin:0 0 var(--s5);font-size:14px;font-weight:300;color:var(--ink-55)}

.preview-bar{
  background:var(--navy);color:var(--cream);text-align:center;
  padding:12px var(--pad);font-size:13.5px;font-weight:300;letter-spacing:.02em;
}

/* --------------------------------------------------------- preferences */

.prefs{display:grid;gap:var(--s4);max-width:34rem;margin:var(--s6) 0 0;justify-items:start}
.prefs label{display:grid;gap:8px;width:100%;font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-70)}
.prefs input,.prefs select{width:100%;padding:14px 16px;border-radius:var(--r-sm);border:1px solid rgba(11,37,89,.45);font:inherit;font-size:16px;font-weight:400;background:#fff;color:var(--navy)}
.prefs-stop{margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--line)}
.prefs-stop h2{font-size:24px;font-weight:300;margin:0 0 var(--s2)}
.prefs-stop p{font-weight:300;color:var(--ink-70);margin:0 0 var(--s4)}
.prefs-stop form{display:grid;gap:var(--s4);max-width:34rem;justify-items:start}
.prefs-stop label{display:grid;gap:8px;width:100%;font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-70)}
.prefs-stop select{width:100%;padding:14px 16px;border-radius:var(--r-sm);border:1px solid rgba(11,37,89,.2);font:inherit;font-size:16px;background:#fff;color:var(--navy)}

@media (max-width:900px){
  .newsletter__card{grid-template-columns:1fr;gap:var(--s6)}
}

/* ------------------------------------------------------------------- blog */

/* A row of posts sits a little wider apart than the newsletter cards. */
.post-grid{gap:var(--s5) var(--s5)}

.tagrow{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 var(--s6)}
.tagrow--foot{margin:var(--s7) 0 0;padding-top:var(--s5);border-top:1px solid var(--line)}
.tagchip{
  /* 44px tall so a thumb can land on one. They sit in a close row, and at
     37px the chip next door was catching as many taps as the chip itself. */
  display:inline-flex;align-items:center;gap:8px;padding:10px 18px;min-height:44px;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--navy);text-decoration:none;
  font-size:13.5px;font-weight:400;transition:border-color .15s ease,background .15s ease;
}
.tagchip:hover{border-color:var(--navy);background:var(--peach);text-decoration:none}
.tagchip span{font-family:var(--label);font-size:11px;font-weight:600;color:var(--ink-55)}
.tagchip--on{background:var(--navy);color:var(--cream);border-color:var(--navy)}
.tagchip--on:hover{background:var(--blue);color:var(--cream)}

/* The one at the top, given the room it deserves. */
.lead-post{
  display:grid;grid-template-columns:1.15fr 1fr;gap:0;align-items:stretch;
  max-width:var(--max);margin:0 auto var(--s6);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;background:#fff;color:inherit;text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease;
}
.lead-post:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);text-decoration:none}
.lead-post__shot{display:block;background:var(--peach)}
.lead-post__shot img{width:100%;height:100%;min-height:280px;object-fit:cover;display:block}
.lead-post__body{display:flex;flex-direction:column;gap:14px;padding:clamp(30px,3.4vw,52px);justify-content:center}
.lead-post__when{font-family:var(--label);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-ink)}
.lead-post__title{font-family:var(--display);font-size:clamp(28px,3.2vw,40px);font-weight:600;letter-spacing:-.032em;line-height:1.06;color:var(--navy)}
.lead-post__summary{font-size:16.5px;font-weight:400;line-height:1.7;color:var(--ink-70)}
.lead-post__more{font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--blue)}

.post-all{max-width:var(--max);margin:var(--s6) auto 0}
.pager{max-width:var(--max);margin:var(--s7) auto 0;display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.pager__where{font-family:var(--label);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-55)}

.post-standfirst{margin:0 0 var(--s4)}
.post-byline{margin:0;font-family:var(--label);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-55)}

/* Photos and pull-quotes inside a post. */
.post-figure{margin:var(--s6) 0}
.post-figure img{width:100%;border-radius:var(--r-sm);display:block}
.post-figure figcaption{margin-top:10px;font-size:14px;font-weight:300;color:var(--ink-55)}
.post-body > :first-child{margin-top:0}

.post-nav{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s4);
  margin:var(--s7) 0 0;padding-top:var(--s6);border-top:1px solid var(--line);
}
.post-nav a{
  display:flex;flex-direction:column;gap:6px;padding:var(--s4) var(--s5);
  border:1px solid var(--line);border-radius:var(--r);color:inherit;text-decoration:none;
  transition:border-color .15s ease;
}
.post-nav a:hover{border-color:var(--navy);text-decoration:none}
.post-nav__next{text-align:right}
.post-nav span{font-family:var(--label);font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-55)}
.post-nav strong{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.022em;line-height:1.2;color:var(--navy)}

@media (max-width:860px){
  .lead-post{grid-template-columns:1fr}
  .lead-post__shot img{min-height:0;aspect-ratio:16/9}
}

/* A product whose payment is paused: the price and the list stay, the button goes. */
.product__paused{
  margin:auto 0 var(--s3);padding:14px 16px;border-radius:var(--r-sm);
  background:var(--peach);border:1px solid var(--peach-deep);
  font-size:15px;font-weight:300;line-height:1.6;color:var(--ink-80);
}

/* ------------------------------------------------------- errors on a form */
/* An error used to appear above the header while the page scrolled past it to
   the form, so somebody who mistyped an email address saw a blank form and no
   reason. Now it sits in the form, next to the field, and what they typed is
   still there. */
.form-error{
  margin:0 0 var(--s3);padding:12px 16px;border-radius:var(--r-sm);
  background:#FCE9E4;border:1px solid #E8B4AA;color:#8C2C1A;
  font-size:15.5px;line-height:1.55;font-weight:500;
}
.form-error:focus{outline:3px solid var(--navy);outline-offset:2px}
.field-error{margin:-4px 0 0;font-size:14px;font-weight:500;color:#8C2C1A}
input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"]{
  border-color:#C8402C !important;box-shadow:inset 0 0 0 1px #C8402C;
}

/* -------------------------------------------------- small screens, honestly */
/* Long words, long email addresses and long URLs should wrap rather than push
   the page sideways. overflow-x:hidden on the body hides that, it does not
   fix it. */
body{overflow-wrap:break-word}
.prose,.lede,.issue-card__summary,.post-body{overflow-wrap:anywhere}

/* Stop photos in a post shoving the text down as they load. */
.post-figure img,.prose img{aspect-ratio:3/2;object-fit:cover}
.lead-post__shot img{aspect-ratio:16/9;min-height:0}

@media (max-width:640px){
  /* Three nested clamps left about 160px of usable width inside the newsletter
     card at 320px — roughly ten characters of an email address at a time. */
  .newsletter__card{padding:var(--s4)}
  .newsletter__form{padding:var(--s4)}
}
@media (max-width:1000px){
  /* Finger-sized, not mouse-sized. */
  .nav a{padding:12px 0;font-size:16px}
  .site-footer nav{gap:var(--s3) var(--s5)}
  .site-footer nav a{padding:10px 0}
}

/* The skip link has to move focus, not just the scroll position, or the next
   Tab goes straight back into the menu. */
#main:focus{outline:none}

/* Says out loud what a small icon or a new tab only implies. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Seen only by somebody logged in, on a page the public cannot reach yet. */
.draftbar{
  position:sticky;top:0;z-index:60;max-width:var(--max);margin:var(--s4) auto 0;
  padding:12px 20px;border-radius:var(--r-sm);
  background:var(--yellow);color:var(--navy);font-size:15px;font-weight:500;
}
.draftbar a{color:var(--navy);text-decoration:underline;margin-left:8px}

/* ------------------------------------------------------------- ways in
   The row near the top that names the three things somebody can join or
   buy. Every card is a link, the price is the second thing the eye lands
   on after the name, and the arrow line is pinned to the bottom so three
   cards of different lengths still end level. */
.paths__head{max-width:var(--max);margin:0 auto var(--s6)}
.paths__title{font-size:clamp(30px,3.6vw,44px);margin:0 0 var(--s3)}
.paths__grid{
  display:grid;gap:var(--s4);max-width:var(--max);margin:0 auto;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  align-items:stretch;
}
.path{
  display:flex;flex-direction:column;gap:var(--s2);position:relative;
  padding:var(--s5) var(--s5) var(--s4);background:#fff;color:inherit;
  border:1px solid var(--line);border-radius:var(--r);text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.path:hover,.path:focus-visible{
  transform:translateY(-3px);box-shadow:var(--shadow-lift);
  border-color:var(--navy);text-decoration:none;
}
.path__badge{
  position:absolute;top:calc(var(--s3) * -1);left:var(--s5);
  font-family:var(--label);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy);background:var(--yellow);
  padding:6px 12px;border-radius:999px;
}
.path__title{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.1;color:var(--navy)}
.path__price{font-family:var(--display);font-size:22px;font-weight:400;color:var(--blue)}
.path__body{font-size:15.5px;line-height:1.55;color:var(--ink-70)}
/* Pinned to the bottom, so a card with one line of text and a card with
   three still finish on the same line. */
.path__go{
  margin-top:auto;padding-top:var(--s3);
  font-family:var(--label);font-size:14px;font-weight:600;color:var(--blue);
}
.path:hover .path__go span{margin-left:4px}
.path__go span{display:inline-block;transition:margin .18s ease}
@media (max-width:560px){
  .path{padding:var(--s4)}
  .path__badge{left:var(--s4)}
}

/* ------------------------------------------------- sticky booking button
   Phones only. The choir's traffic is mostly phones, the home page is long,
   and the thing that takes money was a thumb-scroll away from wherever a
   visitor happened to be reading. */
.stickycta{
  display:none;position:fixed;left:16px;right:16px;bottom:16px;z-index:60;
  padding:16px 20px;border-radius:999px;text-align:center;text-decoration:none;
  background:var(--blue);color:#fff;border:1px solid var(--blue);
  font-family:var(--label);font-size:16px;font-weight:600;
  box-shadow:0 18px 40px -18px rgba(11,37,89,.7);
  opacity:0;transform:translateY(12px);transition:opacity .2s ease,transform .2s ease;
}
.stickycta:hover,.stickycta:focus-visible{background:var(--navy);border-color:var(--navy);color:#fff;text-decoration:none}
.stickycta.is-in{opacity:1;transform:none}
@media (max-width:860px){
  .stickycta:not([hidden]){display:block}
  /* So the footer's last line is never hidden under the bar. */
  .site-footer{padding-bottom:92px}
}
@media (prefers-reduced-motion:reduce){
  .stickycta{transition:none;transform:none}
}