/* ==========================================================================
   C By Me — site styles
   Palette is drawn from the work itself: the deep petrol of a draped event
   table, the turquoise of the mark, champagne from a ballroom, and the blush
   pink of the linens that show up in half the party photos.
   ========================================================================== */

:root {
  /* Ground */
  --ink:        #0C2733;
  --ink-deep:   #071A23;
  --ink-soft:   #1B4254;
  --shell:      #FBF8F5;
  --shell-warm: #F5EDE6;
  --white:      #FFFFFF;

  /* Brand */
  --brand:      #00AFD7;  /* the mark — use on dark, or as a field */
  --brand-ink:  #046883;  /* accessible turquoise for text on light */
  --brand-pale: #D8F1F8;

  /* Celebration */
  --gold:       #C9A25C;
  --gold-light: #E8CE9A;
  --blush:      #F4D2DA;

  /* Type */
  --text:       #14303D;
  --text-muted: #4A6674;
  --rule:       #DFD5CC;

  --display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
  --body:    "Karla", "Karla Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Scale — a modular progression, not arbitrary steps */
  --step--1: clamp(0.84rem, 0.82rem + 0.10vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --step-1:  clamp(1.25rem, 1.18rem + 0.35vw, 1.50rem);
  --step-2:  clamp(1.55rem, 1.42rem + 0.65vw, 2.05rem);
  --step-3:  clamp(1.95rem, 1.70rem + 1.20vw, 2.90rem);
  --step-4:  clamp(2.40rem, 1.95rem + 2.20vw, 4.10rem);
  --step-5:  clamp(2.70rem, 2.05rem + 2.95vw, 4.70rem);

  --gutter: clamp(1.15rem, 4vw, 3.5rem);
  --measure: 66ch;
}



/* --------------------------------------------------------- webfonts -- */
/* Self-hosted. Loading these from Google meant two extra DNS+TLS round-trips
   and, worse, a swap partway through render: the fallback wrapped headings
   onto a different number of lines and the page jumped. font-display:block
   with a preload means the real font is there for first paint, so the text
   never reflows. Both families are variable fonts, one file each. */

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-var-latin.woff2") format("woff2-variations"),
       url("/assets/fonts/fraunces-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
  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: "Karla";
  src: url("/assets/fonts/karla-var-latin.woff2") format("woff2-variations"),
       url("/assets/fonts/karla-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
  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 fallback metrics -- */

@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia"), local("Times New Roman"), local("Times");
  size-adjust: 93.4%;
  ascent-override: 92%;
  descent-override: 23%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Karla Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 92.8%;
  ascent-override: 94%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The palette is light-only. Without this, a dark-mode OS makes the browser
     paint scrollbars and form controls in dark-mode colours -- a pale thumb on
     a near-white page, which reads as "no scrollbar at all". */
  color-scheme: light;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--shell);
  color: var(--text);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
picture { display: block; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  font-variation-settings: "SOFT" 28, "WONK" 1, "opsz" 48;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.005em; }
h4 { font-size: var(--step-0); font-weight: 700; }

p { margin: 0 0 1.1em; max-width: var(--measure); }
a { color: var(--brand-ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--white);
  padding: 0.8rem 1.2rem; font-weight: 700;
}
.skip:focus { left: 0; }

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

/* -------------------------------------------------------------- layout -- */

.wrap { width: min(100% - (var(--gutter) * 2), 1220px); margin-inline: auto; }
.wrap--narrow { width: min(100% - (var(--gutter) * 2), 760px); margin-inline: auto; }

.band { padding-block: clamp(3.5rem, 8vw, 7rem); }
.band--tight { padding-block: clamp(2.5rem, 5vw, 4.25rem); }
.band--tight + .band { padding-top: clamp(2.8rem, 6vw, 5rem); }
.band--shell { background: var(--shell); }
.band--warm  { background: var(--shell-warm); }
.band--white { background: var(--white); }
.band--ink   { background: var(--ink); color: #E4F0F4; }
.band--ink h1, .band--ink h2, .band--ink h3 { color: var(--white); }
.band--ink a:not(.btn) { color: var(--brand); }
.band--ink a:not(.btn):hover { color: var(--gold-light); }

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--text-muted); max-width: 54ch; }
.band--ink .lede { color: #B9D4DD; }

/* ----------------------------------------------------- rhinestone rule -- */
/* The signature device. C By Me's calling card is rhinestone setting —
   stones of graded size laid in a line. Used as a divider, sparingly. */

.stones {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  margin: 1.5rem 0;
}
.stones::before, .stones::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--rule) 45%, var(--rule) 55%, transparent);
}
.stones i {
  display: block;
  width: 7px; height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}
.stones i:nth-child(2) { width: 11px; height: 11px; background: var(--brand); }
.stones i:nth-child(1), .stones i:nth-child(3) { opacity: 0.85; }
.stones--left { justify-content: flex-start; }
.stones--left::before, .stones--left::after { display: none; }
.stones--left { gap: 0.4rem; margin-bottom: 1.25rem; }
.band--ink .stones::before, .band--ink .stones::after {
  background: linear-gradient(to right, transparent, rgba(255,255,255,.22) 45%, rgba(255,255,255,.22) 55%, transparent);
}

/* ------------------------------------------------------------ buttons -- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.95rem 1.7rem;
  font-family: var(--body);
  font-size: var(--step-0);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary { background: var(--brand-ink); color: var(--white); }
.btn--primary:hover { background: var(--ink); color: var(--white); }
.btn--gold { background: var(--gold); color: var(--ink-deep); }
.btn--gold:hover { background: var(--gold-light); color: var(--ink-deep); }
.btn--ghost { border-color: currentColor; color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.band--ink .btn--ghost { color: var(--white); }
.band--ink .btn--ghost:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.6rem; }

/* ------------------------------------------------------------- header -- */

.masthead {
  position: sticky; top: 0; z-index: 90;
  background: rgba(251, 248, 245, 0.94);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.masthead__inner {
  display: flex; align-items: center; gap: 1.1rem;
  padding-block: 11px;
  min-height: 66px;   /* the height once webfonts have loaded */
  align-content: center;
}
.brandmark { display: flex; align-items: center; gap: 0.7rem; text-decoration: none;
  flex: 0 1 auto; min-width: 0; }
.brandmark > span { min-width: 0; }
.brandmark svg { width: 44px; height: 44px; flex: none; }
.brandmark__name { line-height: 20px; }
.brandmark__name {
  display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--display);
  font-size: 1.32rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
  font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 36;
}
.brandmark__sub {
  display: block; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  font-family: var(--body);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin-top: 3px;
  line-height: 12px;
  font-weight: 600;
}

.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: 0.95rem; list-style: none; margin: 0; padding: 0; }
.nav a:not(.btn) {
  font-size: 0.9rem; font-weight: 600; color: var(--ink);
  text-decoration: none; padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav .btn { padding: 0.62rem 1.15rem; font-size: 0.88rem; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--brand); color: var(--brand-ink); }

.nav-toggle {
  display: none; margin-left: auto; flex: none; white-space: nowrap;
  min-width: 84px; text-align: center;
  background: none; border: 2px solid var(--ink); border-radius: 999px;
  /* Integer box: 10 + 20 + 10 + 2px border top and bottom = 44px exactly. */
  padding: 10px 16px; font: inherit; font-weight: 700;
  font-size: 14px; line-height: 20px;
  color: var(--ink); cursor: pointer;
}

@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  .nav {
    display: none; width: 100%; order: 3;
    border-top: 1px solid var(--rule); margin-top: 0.7rem; padding-top: 0.7rem;
  }
  .nav[data-open="true"] { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav li { border-bottom: 1px solid var(--rule); }
  .nav li:last-child { border-bottom: 0; }
  .nav a { display: block; padding: 0.85rem 0; border-bottom: 0; }

  /* The quote button is the primary action, not one more row in the list.
     Without this it sits flush on the divider above it and reads as a stripe.
     display:block above also kills the button's own flex centering, so the
     label needs re-centring here. */
  .nav li:last-child {
    margin-top: 1rem;
    padding-bottom: 0.35rem;
  }
  .nav .btn {
    display: flex;
    justify-content: center;
    padding: 0.95rem 1.2rem;
  }

  .masthead__inner { flex-wrap: wrap; }
}

/* --------------------------------------------------------------- hero -- */
/* The two halves are the point: C By Me is two businesses of equal weight,
   so the hero is literally split down the middle. */

.hero { background: var(--ink); color: var(--white); }
.hero__intro { text-align: center; padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2rem, 4vw, 3rem); }
.hero__intro h1 { color: var(--white); margin-bottom: 0.3em; }
.hero__intro p { margin-inline: auto; }
.hero__intro .lede { margin-inline: auto; color: #B9D4DD; }
.hero__where {
  font-size: 0.82rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--gold-light); font-weight: 700; margin-top: 1.4rem;
  max-width: none; margin-inline: auto;
}

.split { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.split__half { position: relative; display: flex; flex-direction: column; }
.split__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.split__media picture { width: 100%; height: 100%; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__body { padding: clamp(1.8rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem) clamp(2.4rem, 5vw, 3.5rem); flex: 1; }
.split__body h2 { font-size: var(--step-2); margin-bottom: 0.35em; }
.split__body p { font-size: var(--step-0); }

.split__half--dark { background: var(--ink-soft); color: #DCEBF0; }
.split__half--dark h2 { color: var(--white); }
.split__half--light { background: var(--shell); color: var(--text); }
.split__half--light h2 { color: var(--ink); }

/* --------------------------------------------------------- credentials -- */

.creds { background: var(--ink-deep); color: #C7DDE5; padding-block: 1.15rem; }
.creds ul {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.6rem clamp(1rem, 3vw, 2.4rem);
  list-style: none; margin: 0; padding: 0;
  font-size: 0.86rem; font-weight: 600; text-align: center;
}
.creds li { display: flex; align-items: center; gap: 0.5rem; }
.creds li::before {
  content: ""; width: 7px; height: 7px; flex: none;
  background: var(--gold); transform: rotate(45deg);
}
.creds a { color: var(--white); text-decoration-color: rgba(255,255,255,.45); }
.creds a:hover { color: var(--gold-light); text-decoration-color: currentColor; }

/* --------------------------------------------------------------- grids -- */

.grid { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr)); }

/* Editorial figure — image with text beneath, no card chrome. */
.feature picture,
.feature img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 38%;
}
.feature h3 { margin: 1rem 0 0.35em; }
.feature p { font-size: 0.96rem; color: var(--text-muted); margin-bottom: 0.6rem; }
.feature a.more { font-weight: 700; font-size: 0.95rem; }

/* Activity menu — a list that reads like a menu, not a card deck. */
.menu-group { border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.menu-group h3 { margin-bottom: 0.6rem; }
.menu-group ul { list-style: none; margin: 0; padding: 0; columns: 1; }
.menu-group li {
  padding: 0.42rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.97rem;
}
.band--ink .menu-group { border-top-color: var(--gold); }
.band--ink .menu-group li { border-bottom-color: rgba(255,255,255,.14); }

/* Serve blocks */
.serve { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.serve__item { border-left: 3px solid var(--brand); padding-left: 1.1rem; }
.serve__item h3 { font-size: var(--step-1); margin-bottom: 0.3em; }
.serve__item p { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 0.5rem; }
/* Muted grey is unreadable on the dark bands — lift it to the light tint. */
.band--ink .serve__item p,
.band--ink .feature p,
.band--ink .note,
.band--ink .steps__item p { color: #C2DAE3; }

/* Steps — a genuine sequence, so it is genuinely numbered. */
.steps { counter-reset: step; display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.steps__item { counter-increment: step; position: relative; padding-top: 2.9rem; }
.steps__item::before {
  content: counter(step);
  position: absolute; top: 0; left: 0;
  font-family: var(--display); font-size: 2.1rem; font-weight: 600;
  color: var(--gold); line-height: 1;
}
.steps__item h3 { font-size: var(--step-1); }
.steps__item p { font-size: 0.95rem; color: var(--text-muted); }
.band--ink .steps__item p { color: #B9D4DD; }

/* ------------------------------------------------------------- gallery -- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: 0.7rem;
}
.gallery figure { margin: 0; position: relative; overflow: hidden; background: var(--shell-warm); }
.gallery picture,
.gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.gallery-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.8rem; }
.gallery-filters button {
  font: inherit; font-size: 0.9rem; font-weight: 600;
  padding: 0.5rem 1.05rem; border-radius: 999px;
  border: 1.5px solid var(--rule); background: var(--white); color: var(--text);
  cursor: pointer;
}
.gallery-filters button[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* Strip of photos used as a section break.
   Fixed column counts rather than auto-fit: every strip holds six photos, and
   2, 3 and 6 all divide six exactly, so the last row is never short a tile.
   auto-fit chose whatever fitted (4 columns at tablet width, 2 at phone) and
   left a hole in the bottom-right. */
.strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
@media (min-width: 560px) { .strip { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .strip { grid-template-columns: repeat(6, 1fr); } }
.strip picture,
.strip img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* --------------------------------------------------------------- price -- */

.price-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.97rem; }
.price-table caption { text-align: left; font-weight: 700; margin-bottom: 0.7rem; color: var(--text-muted); }
.price-table th, .price-table td { text-align: left; padding: 0.85rem 0.9rem; border-bottom: 1px solid var(--rule); }
.price-table thead th { border-bottom: 2px solid var(--ink); font-size: 0.86rem; letter-spacing: 0.04em; }
.price-table td.num { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.table-scroll { overflow-x: auto; }

.note { font-size: 0.9rem; color: var(--text-muted); }

/* ----------------------------------------------------------------- faq -- */

.faq-item { border-bottom: 1px solid var(--rule); padding: 1.15rem 0; }
.faq-item h2,
.faq-item h3 { font-size: var(--step-1); margin-bottom: 0.4em; }
.faq-item p { margin-bottom: 0; }
.faq-item p + p { margin-top: 0.7em; }

/* ---------------------------------------------------------------- form -- */

.form { display: grid; gap: 1.1rem; max-width: 640px; }
.field { display: grid; gap: 0.35rem; }
.field label { font-weight: 700; font-size: 0.93rem; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem;
  padding: 0.75rem 0.85rem;
  border: 1.5px solid var(--rule); border-radius: 6px;
  background: var(--white); color: var(--text);
  width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); }
.field--row { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .field--row { grid-template-columns: 1fr; } }

fieldset { border: 1.5px solid var(--rule); border-radius: 6px; padding: 1rem 1.1rem; margin: 0; }
legend { font-weight: 700; font-size: 0.93rem; padding-inline: 0.35rem; }
.checks { display: grid; gap: 0.45rem; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.checks label { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; font-size: 0.95rem; }
.checks input { width: auto; }

/* -------------------------------------------------------------- footer -- */

.footer { background: var(--ink-deep); color: #A9C6D1; padding-block: clamp(2.8rem, 6vw, 4.5rem) 2rem; }
.footer h2 { color: var(--white); font-size: var(--step-2); }
.footer a:not(.btn) { color: #D6E8EE; }
.footer a:not(.btn):hover { color: var(--gold-light); }
.footer__grid { display: grid; gap: 2.2rem; grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 800px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h3 { color: var(--white); font-size: 1rem; font-family: var(--body); font-weight: 700; letter-spacing: 0.02em; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { padding: 0.3rem 0; font-size: 0.95rem; }
.footer__contact a { font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.footer__legal {
  margin-top: 2.6rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: 0.86rem; display: flex; flex-wrap: wrap; gap: 0.8rem 1.5rem; justify-content: space-between;
}

/* ------------------------------------------------------------- utility -- */

.eyebrow-num { font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.center p, .center .lede { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 1.1rem; }

.callout {
  background: var(--brand-pale);
  border-left: 4px solid var(--brand-ink);
  padding: 1.2rem 1.4rem;
  margin: 1.8rem 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout h3 { margin-top: 0; }

.pair { display: grid; gap: clamp(1.8rem, 4vw, 3.2rem); grid-template-columns: 1fr 1fr; align-items: center; }
@media (max-width: 800px) { .pair { grid-template-columns: 1fr; } }
.pair picture,
.pair img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pair--portrait picture,
.pair--portrait img { aspect-ratio: 3 / 4; }

/* Phone: keep the tagline, just scale it down and tuck it in under the name. */
@media (max-width: 1080px) {
  .brandmark { align-items: center; }
  .brandmark__name { font-size: 1.25rem; }
  .brandmark__sub { font-size: 0.55rem; letter-spacing: 0.10em; margin-top: 3px; line-height: 12px; }
}
@media (max-width: 430px) {
  .brandmark svg { width: 38px; height: 38px; }
  .brandmark { gap: 0.55rem; }
  .brandmark__name { font-size: 1.12rem; }
  .brandmark__sub { font-size: 0.5rem; letter-spacing: 0.06em; }
}
/* At 360px the brandmark plus the menu button overflowed the bar by about
   11px. Because the row is allowed to wrap, flexbox wrapped it instead of
   shrinking, doubling the header height. Trim the gaps and the tagline just
   enough to keep it on one line. */
@media (max-width: 385px) {
  .masthead__inner { gap: 0.6rem; }
  .brandmark { gap: 0.45rem; }
  .brandmark__sub { font-size: 0.46rem; letter-spacing: 0.02em; }
  .nav-toggle { padding: 10px 12px; font-size: 13px; min-width: 76px; }
}
@media (max-width: 340px) {
  .brandmark__sub { display: none; }
}

/* ---------------------------------------------------------------- video -- */

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink-deep);
  overflow: hidden;
  margin: 2rem 0;
}
.video-frame iframe,
.video-frame video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}

/* Click-to-play facade: the poster is ours, so no request reaches Google until
   the visitor actually asks to watch. */
.video-play {
  position: absolute; inset: 0;
  width: 100%; height: 100%; padding: 0;
  border: 0; background: var(--ink-deep);
  cursor: pointer; display: block; overflow: hidden;
}
.video-play picture, .video-play img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.video-play::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,26,35,.55), rgba(7,26,35,.05) 45%);
  transition: background .2s ease;
}
.video-play__btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 84px; z-index: 2;
  transition: transform .18s ease;
}
.video-play__btn svg { width: 100%; height: auto; display: block; }
.video-play__btn .yt-bg { fill: #1E1E1E; opacity: .82; transition: fill .18s ease, opacity .18s ease; }
.video-play:hover .video-play__btn { transform: translate(-50%, -50%) scale(1.06); }
.video-play:hover .video-play__btn .yt-bg { fill: #C8102E; opacity: 1; }
.video-play:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
.video-play__meta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 0.85rem 1rem;
  font-size: 0.85rem; font-weight: 700; letter-spacing: .04em;
  color: #fff; text-align: left;
}

/* Shown only if no video is configured. */
.video-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.9rem; text-align: center;
  padding: 2rem;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(0,175,215,.18), transparent 60%),
    var(--ink-deep);
  color: #B9D4DD;
}
.video-placeholder svg { width: 58px; height: 58px; opacity: .85; }
.video-placeholder strong { color: var(--white); font-size: 1.05rem; }
.video-placeholder p { max-width: 42ch; margin: 0; font-size: .93rem; }

.press-item {
  display: grid; gap: 1.5rem;
  grid-template-columns: 200px 1fr;
  align-items: start;
  padding: 1.6rem 0;
  border-top: 1px solid var(--rule);
}
@media (max-width: 660px) { .press-item { grid-template-columns: 1fr; } }
.press-item h3 { margin-bottom: .3em; }
.press-item .when {
  font-size: .86rem; font-weight: 700; color: var(--brand-ink);
  letter-spacing: .03em;
}

/* The brandmark tagline is decorative; it costs ~170px of bar width and was
   pushing the quote button past the viewport between 1240px and 1360px. */
/* Hide the tagline only in the band where the nav is still inline and needs
   the width. Below 1081px the nav collapses to a button, so there is room. */
@media (min-width: 1081px) and (max-width: 1420px) {
  .brandmark__sub { display: none; }
}
@media (min-width: 1081px) and (max-width: 1240px) {
  .nav ul { gap: 0.75rem; }
  .nav a:not(.btn) { font-size: 0.85rem; }
  .nav .btn { padding: 0.55rem 0.95rem; font-size: 0.84rem; }
}

/* ------------------------------------------------------------- 404 -- */
/* The numerals are filled with a grid of small stones, each with an
   off-centre highlight, so the type reads as rhinestone-set rather than
   merely gold -- the same technique that goes on the siddur covers. */

.err-404 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(5.5rem, 24vw, 12rem);
  line-height: 0.9;
  letter-spacing: 0.04em;
  /* Low optical size flattens Fraunces' stroke contrast. At display opsz the
     thin strokes are hairlines too fine to hold a stone, so the numerals read
     as broken rather than set. */
  font-variation-settings: "opsz" 9, "SOFT" 40, "WONK" 0;
  margin: 0 0 0.15em;
  max-width: none;
  color: var(--gold);                 /* fallback if background-clip is unsupported */
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .err-404 {
    background-color: var(--gold);
    background-image:
      radial-gradient(circle at 36% 33%, rgba(255,255,255,.98) 13%, transparent 14%),
      radial-gradient(circle at 50% 50%, var(--gold-light) 26%, var(--gold) 36%, rgba(120,80,20,.35) 43%, transparent 47%);
    background-size: 16px 16px;
    background-position: 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));
  }
}
@media (max-width: 480px) {
  .err-404 { background-size: 12px 12px; }
}