/* Marquisha & Co. site theme: shared by every page (tokens, type, buttons, header, footer, closing band, dialog, motion).
   Page files add home.css or pages.css. */

/* Headlines: Editorial Today Thin (UICreative), Amber's pick on September 25; its weight matches IvyPresto Display
   Light on the old Squarespace site. Amber holds the license (confirmed September 25). The shared ZIP leaves the
   font files out so it can be passed along without them; the headlines fall back to Iowan Old Style, Palatino or
   Georgia there. The head partial preloads both files. */
@font-face {
  font-family: "Editorial Today";
  src: url("/theme/fonts/editorial-today/EditorialToday-Thin.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Editorial Today";
  src: url("/theme/fonts/editorial-today/EditorialToday-ThinItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Text: Montserrat, self-hosted since October 2, 2026 (the same variable files Google Fonts served before; OFL in the
   font folder). Latin is the file every page uses; Latin Extended loads only for letters beyond it. */
@font-face {
  font-family: "Montserrat";
  src: url("/theme/fonts/montserrat/Montserrat-wght-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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";
  src: url("/theme/fonts/montserrat/Montserrat-wght-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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";
  src: url("/theme/fonts/montserrat/Montserrat-Italic-wght-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
  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";
  src: url("/theme/fonts/montserrat/Montserrat-Italic-wght-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
  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 {
  --ivory: #FEFAF6;
  --cream: #F8EAD8;
  --blush: #F6E3D3;
  --charcoal: #39342D;
  --muted: #5B5349;
  --raspberry: #B81C5E;
  --raspberry-deep: #99164E;
  --hot-pink: #DC2878;
  --hot-pink-deep: #BF1D66;
  --pink: #F23A87;
  --pink-text: #D6246F; /* brightest pink that passes 4.5:1 as small text on ivory */
  --gold: #CAA502;
  --rule: rgba(57, 52, 45, .14);
  --rule-strong: rgba(57, 52, 45, .28);
  --on-dark-muted: rgba(254, 250, 246, .8);

  --font-text: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Editorial Today", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --display-weight: 400;
  --display-tracking: -.005em;
  --display-word-spacing: -.14em; /* its word spaces are drawn very wide */
  --display-settings: normal;

  --ease: cubic-bezier(.2, .7, .2, 1);

  /* ---- Site styles: the whole type system (shown on /style-guide/) ----
     Sizes grow smoothly from a 390px phone to a 1440px desktop, then hold.
     Headings: Editorial Today Thin. Paragraphs, buttons and labels: Montserrat. Base size 16px. */
  --h1: clamp(2.625rem, 1.929rem + 2.857vw, 4.5rem);   /* 42 → 72px */
  --h1-lh: 1.08;
  --h2: clamp(2.125rem, 1.8rem + 1.333vw, 3rem);       /* 34 → 48px */
  --h2-lh: 1.12;
  --h3: clamp(1.5625rem, 1.4rem + .667vw, 2rem);       /* 25 → 32px */
  --h3-lh: 1.2;
  --h4: clamp(1.25rem, 1.157rem + .381vw, 1.5rem);     /* 20 → 24px */
  --h4-lh: 1.3;
  --p1: clamp(1.1875rem, 1.118rem + .286vw, 1.375rem); /* 19 → 22px, intros */
  --p1-lh: 1.6;
  --p2: clamp(1.0625rem, 1.039rem + .095vw, 1.125rem); /* 17 → 18px, body */
  --p2-lh: 1.65;
  --p3: .9375rem;                                      /* 15px, notes and fine print */
  --p3-lh: 1.55;
  --label: .875rem;                                    /* 14px capitals, eyebrows and small headings */
  --label-tracking: .16em;
  --button: 1rem;                                      /* 16px, written in Title Case */
  --button-tracking: .01em;
  --button-radius: .75rem;                             /* 12px rounded corners on every button and field */
  --radius: 1.25rem;                                   /* 20px corners on photos, cards and panels (Amber, Round 9) */
  --radius-sm: .5rem;                                  /* 8px corners on tags; highlighted words stay square (Round 13) */

  /* ---- Spacing ---- */
  --gutter: clamp(1.25rem, 4.5vw, 4rem);                      /* page edges: 20 → 64px */
  --max: 82rem;                                               /* page width: 1312px */
  --header-h: 4.5rem;
  --header-condensed: 3.75rem;                                /* the header after 80px of scroll */
  --max-text: 44rem;                                         /* centered headings and intros */
  --measure: 40rem;                                           /* longest line for body paragraphs */
  --section-l: clamp(4rem, 2.7rem + 5.333vw, 7.5rem);         /* main sections: 64 → 120px top and bottom */
  --section-m: clamp(3rem, 2.071rem + 3.81vw, 5.5rem);        /* bands and quotes: 48 → 88px */
  --section-s: clamp(2rem, 1.721rem + 1.143vw, 2.75rem);      /* slim bands: 32 → 44px */
  --stack-label: 1rem;                                        /* label to heading: 16px */
  --stack-heading: clamp(1.25rem, 1.157rem + .381vw, 1.5rem); /* heading to text: 20 → 24px */
  --stack-action: clamp(2rem, 1.721rem + 1.143vw, 2.75rem);   /* text to buttons: 32 → 44px */
  --stack-head: clamp(3rem, 2.071rem + 3.81vw, 5.5rem);       /* section heading to its content: 48 → 88px */
  --gap: clamp(1.5rem, 1.221rem + 1.143vw, 2.25rem);          /* between columns and cards: 24 → 36px */
}

@media (min-width: 64rem) {
  :root { --header-h: 5rem; --header-condensed: 4rem; }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
/* Hidden stays hidden even where a rule sets display (the Events page swaps finished events with it) */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* Anchors and focused content land clear of the sticky header. The offset sits on the targets rather than on the
   page's scroll padding, so the header's own links never count as hidden under it (with scroll padding, tabbing into
   the header while scrolled down pulled the page up by half a screen at each step; fixed October 2026). */
main, main *, .site-footer * { scroll-margin-top: calc(var(--header-h) + 1rem); }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--charcoal);
  font-family: var(--font-text);
  font-size: var(--p2);
  font-weight: 400;
  line-height: var(--p2-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-open { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p, h1, h2, h3, h4, figure, blockquote { margin: 0; }
main:focus { outline: none; }

h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display {
  font-family: var(--font-display);
  word-spacing: var(--display-word-spacing, normal);
  font-weight: var(--display-weight);
  font-optical-sizing: auto;
  font-variation-settings: var(--display-settings);
  letter-spacing: var(--display-tracking);
  color: inherit;
  text-wrap: balance;
}
h1, .h1 { font-size: var(--h1); line-height: var(--h1-lh); }
h2, .h2 { font-size: var(--h2); line-height: var(--h2-lh); }
h3, .h3 { font-size: var(--h3); line-height: var(--h3-lh); }
h4, .h4 { font-size: var(--h4); line-height: var(--h4-lh); }
.p1 { font-size: var(--p1); line-height: var(--p1-lh); }
.p3 { font-size: var(--p3); line-height: var(--p3-lh); }

.eyebrow,
.label {
  font-family: var(--font-text);
  font-size: var(--label);
  font-weight: 700;
  font-variation-settings: normal;
  line-height: 1.35;
  letter-spacing: var(--label-tracking);
  word-spacing: normal;
  text-transform: uppercase;
}

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.nowrap { white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -5rem;
  left: 1rem;
  z-index: 100;
  padding: .8rem 1.1rem;
  background: var(--charcoal);
  color: var(--ivory);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 2px solid var(--raspberry); outline-offset: 3px; }
.closing :focus-visible,
.site-footer :focus-visible { outline-color: var(--ivory); }

/* Buttons and links */
/* Buttons: one rounded-rectangle system.
   Primary = filled pink. Secondary = soft pink outline. On color = ivory, for pink and charcoal bands.
   Tertiary = the text link below. Labels are written in Title Case; no capitals styling.
   Buttons carry no arrow (Amber, Round 14); text links keep their small arrow. */
.btn {
  --btn-bg: var(--hot-pink);
  --btn-fg: #FFFFFF;
  --btn-line: var(--btn-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 3.5rem;
  padding: .95rem 1.75rem;
  border: 1.5px solid var(--btn-line);
  border-radius: var(--button-radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 600 var(--button)/1.2 var(--font-text);
  letter-spacing: var(--button-tracking);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn-primary:hover { --btn-bg: var(--hot-pink-deep); }
.btn-outline { --btn-bg: transparent; --btn-fg: var(--pink-text); --btn-line: rgba(220, 40, 120, .55); }
.btn-outline:hover { --btn-bg: var(--hot-pink); --btn-fg: #FFFFFF; --btn-line: var(--hot-pink); }
.btn-light { --btn-bg: var(--ivory); --btn-fg: var(--charcoal); --btn-line: var(--ivory); }
.btn-light:hover { --btn-bg: var(--cream); --btn-line: var(--cream); }
.btn-compact { min-height: 2.875rem; padding: .7rem 1.2rem; font-size: .9375rem; }

.arrow { width: 1.05em; height: 1.05em; flex: none; transition: transform .3s var(--ease); }
a:hover > .arrow, a:focus-visible > .arrow { transform: translate(.14em, -.14em); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  color: var(--raspberry);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .32em;
}
.text-link:hover { color: var(--raspberry-deep); }

/* Member sign-in lines (October 1): Collective members and course buyers sign in on Ploy's member pages. */
.member-signin { margin-top: var(--stack-heading); color: var(--muted); font-size: var(--p2); }
.member-signin a { color: var(--raspberry); font-weight: 600; }
.member-signin a:hover { color: var(--raspberry-deep); }
.library-head .member-signin { grid-column: 2; justify-self: end; width: 100%; max-width: 26rem; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ivory);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), margin-bottom .35s var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--rule);
  box-shadow: 0 12px 30px -26px rgba(57, 52, 45, .5);
}
/* After 80px of scroll the bar condenses and takes a faint shadow (Amber's pick A, October 2026). Its margin grows by
   what the bar gives up, so nothing below it moves. */
.site-header.is-condensed {
  margin-bottom: calc(var(--header-h) - var(--header-condensed));
  box-shadow: 0 8px 22px -12px rgba(57, 52, 45, .22);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: min(100% - 2 * var(--gutter), 90rem);
  height: var(--header-h);
  margin-inline: auto;
  transition: height .35s var(--ease);
}
.site-header.is-condensed .header-inner { height: var(--header-condensed); }

.brand { flex: none; }
.brand img { --logo-w: clamp(10.5rem, 8rem + 5vw, 13.125rem); width: var(--logo-w); transition: width .35s var(--ease); }
.site-header.is-condensed .brand img { width: calc(var(--logo-w) * .86); }

.primary-nav { display: flex; align-items: center; gap: clamp(1.75rem, 3vw, 3rem); }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2vw, 2.1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links a,
.nav-login {
  position: relative;
  display: block;
  padding: .5rem 0;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
}
.nav-links a::after,
.nav-login::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: .2rem;
  left: 0;
  height: 1.5px;
  background: var(--hot-pink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after,
.nav-login:hover::after { transform: scaleX(1); }
/* Login is a quiet link at the far right, so Get in Touch is the one loud thing (October 2026) */
.nav-login { font-weight: 500; color: var(--muted); }
.nav-login:hover { color: var(--charcoal); }

.nav-actions { display: flex; align-items: center; gap: 1.5rem; }
.menu-toggle { display: none; }

@media (max-width: 73.99rem) {
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-right: -.65rem;
    border: 0;
    border-radius: var(--button-radius);
    background: transparent;
    color: var(--charcoal);
    cursor: pointer;
  }
  .menu-lines { display: grid; gap: 7px; width: 26px; }
  .menu-lines span { display: block; height: 1.5px; background: currentColor; transition: transform .3s var(--ease); }
  .menu-toggle[aria-expanded="true"] .menu-lines span:first-child { transform: translateY(4.25px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-lines span:last-child { transform: translateY(-4.25px) rotate(-45deg); }

  .primary-nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: 39;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2.25rem;
    padding: 1rem var(--gutter) 3rem;
    overflow-y: auto;
    background: var(--ivory);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.5rem);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
  }
  .primary-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s;
  }
  .site-header.is-condensed .primary-nav { top: var(--header-condensed); }

  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a {
    padding: 1rem 0;
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-display);
    word-spacing: var(--display-word-spacing, normal);
    font-size: var(--h3);
    font-weight: var(--display-weight);
    font-variation-settings: var(--display-settings);
    letter-spacing: var(--display-tracking);
    line-height: var(--h3-lh);
  }
  .nav-links a::after { display: none; }
  .nav-links a[aria-current="page"] { color: var(--raspberry); }
  .nav-actions { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .nav-login { font-size: var(--p2); }
}

@media (max-width: 24rem) {
  .nowrap { white-space: normal; }
  .btn { white-space: normal; line-height: 1.25; text-align: center; }
}

/* Section heading */
.section-head { max-width: var(--max-text); margin: 0 auto var(--stack-head); text-align: center; }
.section-head h2 { margin-top: var(--stack-label); }

/* Closing invitation */
.closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--section-l) var(--gutter);
  background:
    radial-gradient(38% 60% at 5% 8%, rgba(242, 58, 135, .6), rgba(242, 58, 135, 0) 70%),
    radial-gradient(34% 56% at 96% 94%, rgba(242, 58, 135, .55), rgba(242, 58, 135, 0) 70%),
    var(--hot-pink);
  color: #FFFFFF;
  text-align: center;
}
/* Slow-moving color behind the band, like the Squarespace gradient: brighter and deeper pinks drift
   (::before) under a still, slightly deeper center (::after) that keeps the white text above 4.5:1. */
.closing::before,
.closing::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.closing::before {
  z-index: -2;
  inset: -45% -25%;
  background:
    radial-gradient(22% 30% at 24% 28%, rgba(250, 96, 158, .9), rgba(250, 96, 158, 0) 72%),
    radial-gradient(20% 28% at 80% 70%, rgba(247, 80, 146, .85), rgba(247, 80, 146, 0) 72%),
    radial-gradient(24% 32% at 70% 24%, rgba(160, 18, 82, .55), rgba(160, 18, 82, 0) 72%),
    radial-gradient(22% 30% at 30% 78%, rgba(176, 22, 90, .5), rgba(176, 22, 90, 0) 72%);
}
.closing::after {
  z-index: -1;
  inset: 0;
  background: radial-gradient(42% 58% at 50% 50%, rgba(176, 22, 88, .36), rgba(176, 22, 88, 0) 78%);
}
.closing-mark {
  position: absolute;
  right: -5%;
  bottom: -24%;
  z-index: -1;
  width: clamp(18rem, 42vw, 38rem);
  opacity: .12;
  pointer-events: none;
}
/* On phones the ampersand sits whole inside the band, low on the right, instead of running off its lower edge */
@media (max-width: 37.49rem) {
  .closing-mark { right: .75rem; bottom: .75rem; width: 9rem; }
}
.closing-copy { position: relative; z-index: 1; }
/* Phones: the bands are narrow, so their words run close to the corners where the lighter pinks glow, and white text
   on the band's pink only just clears 4.5:1. Below 48rem the pink is a shade deeper, the glows keep to the outer
   corners and the drifting colors stay off, so every line keeps 4.5:1 (October 2 accessibility check: 3.3 to 4.4:1
   before, at the top of the Events, Courses and Collective bands and in About's quote). html raises these over the
   band-pink rule in character.css. */
@media (max-width: 47.99rem) {
  html .closing,
  html .band-pink,
  html .closing.band-pink {
    background:
      radial-gradient(60% 24% at 0% 0%, rgba(242, 58, 135, .55), rgba(242, 58, 135, 0) 70%),
      radial-gradient(60% 24% at 100% 100%, rgba(242, 58, 135, .5), rgba(242, 58, 135, 0) 70%),
      #D3256F;
  }
  .closing::before { display: none; }
}
/* 26ch keeps About's quoted line to two lines on desktop; the other closing titles break where Ploy breaks them.
   Paragraphs split into even lines here, so the homepage's does too (it doesn't load pages.css). */
.closing h2 { max-width: 26ch; margin: var(--stack-label) auto var(--stack-heading); }
.closing p:not(.eyebrow) { max-width: 34ch; margin: 0 auto var(--stack-action); font-size: var(--p1); line-height: var(--p1-lh); text-wrap: balance; }
/* A line break in the middle of a sentence (from Ploy's titles) holds only where both halves fit on one line each */
@media (max-width: 29.99rem) { br.br-wide { display: none; } }
.closing h2.eyebrow { margin: 0 auto var(--stack-label); font-size: var(--label); }

/* Footer */
.site-footer { padding-block: var(--section-m) 2rem; background: var(--charcoal); color: var(--ivory); }
/* Four columns from 1280px. Explore and Contact never get narrower than their longest line; the brand and newsletter
   columns give way instead (the email ran into the newsletter line on iPad landscape, Amber, October 2). */
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(max-content, .85fr) minmax(max-content, 1fr) minmax(0, 1.3fr);
  align-items: start;
  gap: 3rem 2.5rem;
}
/* Brand column: cream wordmark, the tagline, and where to follow her */
.footer-wordmark { display: inline-block; width: clamp(10rem, 14vw, 12.5rem); }
.footer-wordmark img { display: block; width: 100%; height: auto; }
.footer-tagline {
  margin-top: 1.1rem;
  color: var(--on-dark-muted);
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}
.footer-social { display: flex; gap: .6rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.footer-social a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1.5px solid rgba(254, 250, 246, .3);
  border-radius: 50%;
  color: var(--ivory);
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.footer-social a:hover { border-color: var(--ivory); background: var(--ivory); color: var(--charcoal); }
.footer-social svg { width: 1.2rem; height: 1.2rem; }
/* Small capitals head each column */
.footer-heading {
  margin: 0 0 .9rem;
  color: var(--on-dark-muted);
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}
.footer-nav ul { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.footer-nav a,
.footer-contact a {
  font-size: var(--p2);
  line-height: 1.8;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: .28em;
  transition: text-decoration-color .25s var(--ease);
}
.footer-nav a:hover,
.footer-contact a:hover { text-decoration-color: currentColor; }
.footer-contact address { display: grid; gap: .4rem; justify-items: start; font-size: var(--p2); font-style: normal; line-height: 1.6; }
.footer-contact span { color: var(--on-dark-muted); }
.newsletter { width: 100%; }
.newsletter-title { margin: -.2rem 0 1rem; font-size: var(--p2); line-height: 1.5; }
.newsletter-form { display: flex; gap: .5rem; }
.newsletter-form input {
  flex: 1;
  min-width: 0;
  min-height: 2.875rem;
  padding: .7rem 1rem;
  border: 1.5px solid var(--ivory);
  border-radius: var(--button-radius);
  background: var(--ivory);
  color: var(--charcoal);
  font: 500 1rem var(--font-text);
}
.newsletter-form input::placeholder { color: #6E665C; opacity: 1; }
.form-status { min-height: 1.5rem; margin-top: .75rem; font-size: var(--p3); }
/* A field only bots fill in (forms ignore anything that arrives with it) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 2rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(254, 250, 246, .16);
  color: var(--on-dark-muted);
  font-size: var(--p3);
}
/* The copyright line, then the policy links (underlined, so the privacy link stands out from the text around it) */
.footer-fine { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 2rem; }
.footer-legal { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.footer-legal a { display: inline-block; padding-block: .15rem; }
.footer-legal a,
.footer-credit a { color: inherit; text-decoration: underline; text-decoration-color: rgba(254, 250, 246, .35); text-underline-offset: .28em; }
.footer-legal a:hover,
.footer-credit a:hover { color: var(--ivory); text-decoration-color: currentColor; }

@media (min-width: 48rem) and (max-width: 79.99rem) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
}
@media (max-width: 47.99rem) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
}

/* Demo member login */
.login-dialog {
  width: min(100% - 2rem, 30rem);
  padding: 2.75rem 2.25rem 2.25rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--ivory);
  color: var(--charcoal);
  box-shadow: 0 30px 80px -30px rgba(57, 52, 45, .55);
}
.login-dialog::backdrop { background: rgba(57, 52, 45, .55); }
.login-dialog h2 { margin-bottom: 1rem; font-size: var(--h3); }
.login-dialog p { margin-bottom: 1.75rem; }
.dialog-close {
  position: absolute;
  top: .6rem;
  right: .6rem;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: var(--button-radius);
  background: transparent;
  color: var(--charcoal);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

/* A 4px soft pink frame, with a faint pink light that travels once around it as the photo comes into view (the Ploy
   site's portrait frame, brought back at Amber's request, October 1): About's portrait, the Services photos and the
   Collective group photo. With reduced motion the frame is still. */
.glint-frame { position: relative; isolation: isolate; overflow: hidden; padding: 4px; border-radius: calc(var(--radius) + 4px); background: #FADAE8; }
.glint-frame::before {
  content: "";
  position: absolute;
  inset: -65%;
  z-index: 0;
  pointer-events: none;
  background: conic-gradient(from 0deg, #FADAE8 0%, #FEFAF6 24%, #F5C7D9 42%, var(--hot-pink) 50%, #FEFAF6 67%, #FADAE8 100%);
  opacity: 0;
}
.glint-frame > img { position: relative; z-index: 1; border-radius: var(--radius); }
/* The Services photos round their own corners in character.css; framed, the frame takes the outer corner */
.svc-split .svc-media.glint-frame { border-radius: calc(var(--radius) + 4px); }

/* Motion: gentle, and off entirely for reduced-motion visitors */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-photo img { animation: photo-in 1.5s var(--ease) both; }
  .js .hero-copy > * { animation: rise 1s var(--ease) both; animation-delay: calc(.2s + var(--i, 0) * .11s); }

  .js [data-reveal] {
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
    transition-delay: var(--delay, 0s);
  }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }

  /* The band's colors drift once as it comes into view and settle in under five seconds, so nothing here keeps
     moving without a Pause (WCAG 2.2.2, the October 2 accessibility check; it used to drift for good) */
  .closing::before { animation: closing-drift 4.8s ease-in-out both; }
  .js .glint-frame.is-visible::before, .js .is-visible > .glint-frame::before { animation: glint-pass 4.5s ease-in-out .4s both; }
  .closing:not(.is-live)::before { animation-play-state: paused; }
}

/* Pause motion (site.js): the visitor's choice also stills the band's colors and the photo frames' light */
.motion-paused .closing::before,
.motion-paused .glint-frame::before { animation: none !important; }

/* The Pause motion button, beside anything that loops. Hidden when the device asks for reduced motion (nothing loops
   then) and without the script. The icon shows pause bars while things move and a play triangle once paused. */
.motion-toggle {
  display: none;
  align-items: center;
  gap: .6rem;
  min-height: 2.75rem;
  padding: .25rem .5rem .25rem .25rem;
  border: 0;
  border-radius: var(--button-radius);
  background: none;
  color: var(--muted);
  font: 600 var(--p3)/1.2 var(--font-text);
  cursor: pointer;
  transition: color .25s var(--ease);
}
.motion-toggle svg {
  flex: none;
  width: 2rem;
  height: 2rem;
  padding: .55rem;
  border: 1.5px solid var(--rule-strong);
  border-radius: 50%;
  fill: currentColor;
  transition: border-color .25s var(--ease);
}
.motion-toggle:hover { color: var(--charcoal); }
.motion-toggle:hover svg { border-color: currentColor; }
.motion-toggle .i-play,
.motion-paused .motion-toggle .i-pause { display: none; }
.motion-paused .motion-toggle .i-play { display: inline; }
@media (prefers-reduced-motion: no-preference) {
  .js .motion-toggle { display: inline-flex; }
}

@keyframes glint-pass {
  0% { transform: rotate(0deg); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: rotate(360deg); opacity: 0; }
}

/* Ends where the band rests with reduced motion or paused, at about the old drift's pace */
@keyframes closing-drift {
  from { transform: translate3d(-4%, -3%, 0) rotate(-3deg) scale(1.04); }
  to { transform: none; }
}

/* If the script never arrives, show everything. */
.motion-off [data-reveal],
.motion-off [data-stagger] > * { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@keyframes photo-in {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: none; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: none; }
}

/* Policy pages (Privacy Policy, Accessibility Statement): the blog post's reading column without its back link and
   cover photo, a short pink rule under the introduction, the address set plainly */
.page-legal .post-head .eyebrow { margin-top: 0; }
.page-legal .post-head .lede { margin-top: var(--stack-heading); }
.page-legal .post-head::after { content: ""; display: block; width: 3.5rem; margin-top: var(--stack-action); border-top: 2px solid var(--pink); }
.page-legal .post-body { margin-top: var(--stack-action); }
.legal-contact { font-style: normal; }