:root {
    /* Marès: the pale golden limestone Palma is built from — Can Vivot, the
       Palau March, the courtyards she sings in. Deliberately stone, not cream. */
    --stone:      #EFE8DC;
    --stone-deep: #E4D9C7;
    --field:      #F7F2E9;
    --edge:       #D6C9B4;
    --edge-firm:  #BFB09A;
    /* Warm ink: a brown-black, never a blue one. */
    --ink:        #2B2119;
    --ink-soft:   #66574A;
    --ink-faint:  #948472;
    /* Ochre: saffron and the lamp, as an earth pigment. Fill and text weights. */
    --lamp:       #C48A16;
    --lamp-text:  #8F6510;
    --lamp-hot:   #D69C24;
    /* The overtone: the one cool note on a warm page. */
    --partial:    #5E948B;

    /* Aliases kept from the night version so the cascade needs no rewiring:
       what was light-on-dark is now ink-on-stone. */
    --void:       var(--stone);
    --night:      var(--stone);
    --night-rise: var(--stone);
    --night-edge: var(--edge);
    --limewash:   var(--ink);
    --limewash-2: var(--edge);
    --night-text: var(--ink-soft);
    --night-faint:var(--ink-faint);

    --measure: 34rem;
    --edge-pad: clamp(1.25rem, 5vw, 5.5rem);
    --shell: 78rem;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    margin: 0;
    background: var(--void);
    color: var(--night-text);
    font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 {
    font-family: "Bodoni Moda", ui-serif, Georgia, "Times New Roman", serif;
    font-weight: 400;
    font-optical-sizing: auto;
    text-wrap: balance;
    margin: 0;
    letter-spacing: -0.012em;
  }
  p { margin: 0; }
  a { color: inherit; }
  :focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; border-radius: 1px; }

  .band { padding-inline: var(--edge-pad); }
  .band > .inner { max-width: var(--shell); margin-inline: auto; }
  .band-void  { background: transparent;                 color: var(--ink-soft); }
  .band-light { background: rgba(247, 242, 233, 0.55);   color: var(--ink); }
  .band-night { background: rgba(214, 201, 180, 0.44);   color: var(--ink-soft); }
  .band-rise  { background: rgba(191, 176, 154, 0.40);   color: var(--ink-soft); }

  .rhythm-1 { padding-block: clamp(4.25rem, 10vw, 8rem); }
  .rhythm-2 { padding-block: clamp(3.25rem, 7vw, 5.5rem); }

  h2 {
    font-size: clamp(1.95rem, 1.2rem + 2.9vw, 3.4rem);
    line-height: 1.03;
  }
  .band-light h2 { color: var(--ink); }
  .band-void h2, .band-night h2, .band-rise h2 { color: var(--ink); }

  .lede {
    max-width: var(--measure);
    margin-top: 1.5rem;
    font-size: clamp(1.03rem, 1rem + 0.3vw, 1.15rem);
    line-height: 1.68;
  }
  .lede { color: var(--ink-soft); }
  .prose { max-width: var(--measure); display: grid; gap: 1.15rem; }
  .band-light .prose { color: var(--ink-soft); }

  .btn {
    display: inline-block;
    background: var(--lamp);
    color: #1F1608;
    font: 600 0.9375rem/1.2 "Instrument Sans", system-ui, sans-serif;
    text-decoration: none;
    padding: 0.9rem 1.65rem;
    border: 0; border-radius: 2px;
    cursor: pointer;
    transition: background 160ms ease, transform 160ms ease;
  }
  .btn:hover { background: var(--lamp-hot); }
  .btn:active { transform: translateY(1px); }

  .btn-quiet {
    display: inline-block;
    color: var(--limewash);
    font-size: 0.9375rem;
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--night-edge);
    transition: border-color 160ms ease;
  }
  .btn-quiet:hover { border-bottom-color: var(--lamp); }
  .btn-quiet { color: var(--ink); border-bottom-color: var(--edge-firm); }

  /* ================= the field =================
     Three very large, very soft warm ellipses drifting on long, unequal
     periods behind everything. The colour delta from the stone is small and
     the motion is slow enough that the page seems to breathe rather than move. */

  .field {
    position: fixed; inset: -25vmax; z-index: -1;
    pointer-events: none; overflow: hidden;
  }
  .field i {
    position: absolute; display: block; border-radius: 50%;
    opacity: 0.75; will-change: transform;
  }
  .field i:nth-child(1) {
    width: 130vmax; height: 95vmax; left: -35vmax; top: -25vmax;
    background: radial-gradient(closest-side, #F5D8B9 0%, rgba(245,216,185,0) 100%);
    animation: drift-a 96s ease-in-out infinite alternate;
  }
  .field i:nth-child(2) {
    width: 110vmax; height: 110vmax; right: -45vmax; top: 5vmax;
    background: radial-gradient(closest-side, #ECD3C4 0%, rgba(236,211,196,0) 100%);
    animation: drift-b 128s ease-in-out infinite alternate;
  }
  .field i:nth-child(3) {
    width: 120vmax; height: 85vmax; left: 5vmax; bottom: -45vmax;
    background: radial-gradient(closest-side, #F2E3BE 0%, rgba(242,227,190,0) 100%);
    animation: drift-c 112s ease-in-out infinite alternate;
  }
  @keyframes drift-a { to { transform: translate3d(16vmax, 11vmax, 0) scale(1.08); } }
  @keyframes drift-b { to { transform: translate3d(-18vmax, -9vmax, 0) scale(0.93); } }
  @keyframes drift-c { to { transform: translate3d(9vmax, -15vmax, 0) scale(1.06); } }
  @media (prefers-reduced-motion: reduce) { .field i { animation: none; } }

  /* ================= the plate ================= */

  .stage {
    position: relative;
    isolation: isolate;
    min-height: min(46rem, 92svh);
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: transparent;
  }

  #plate {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* The feather is written from JS in layout() so it always sits centred on
       the plate; otherwise the plate's square edge cuts across the headline. */
  }

  .masthead {
    position: relative; z-index: 3;
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1.5rem;
    padding: 1.6rem var(--edge-pad) 0;
    max-width: calc(var(--shell) + var(--edge-pad) * 2);
    margin-inline: auto; width: 100%;
  }
  .wordmark {
    font-family: "Bodoni Moda", ui-serif, Georgia, serif;
    font-size: 1.5rem; letter-spacing: 0.17em; line-height: 1;
    color: var(--limewash); text-decoration: none;
  }
  .masthead nav { display: flex; gap: clamp(0.9rem, 2.4vw, 2.25rem); font-size: 0.875rem; }
  .masthead nav a {
    color: var(--night-text); text-decoration: none;
    padding-bottom: 2px; border-bottom: 1px solid transparent;
    transition: border-color 160ms ease, color 160ms ease;
  }
  .masthead nav a:hover { color: var(--limewash); border-bottom-color: var(--lamp); }
  @media (max-width: 46rem) { .masthead nav a.hide-sm { display: none; } }

  .stage-body {
    position: relative; z-index: 2;
    flex: 1;
    display: flex; align-items: center;
    padding: clamp(2.5rem, 7vw, 5rem) var(--edge-pad) clamp(1.5rem, 3vw, 2.5rem);
    max-width: calc(var(--shell) + var(--edge-pad) * 2);
    margin-inline: auto; width: 100%;
  }
  .stage-copy { max-width: 44rem; }
  @media (max-width: 62rem) {
    /* Copy rides high so the plate has the lower third to itself. */
    .stage { min-height: min(54rem, 96svh); }
    .stage-body { align-items: flex-start; padding-bottom: min(46vw, 20rem); }
  }

  .stage h1 {
    font-size: clamp(2.45rem, 1rem + 4.5vw, 4.6rem);
    line-height: 0.98;
    letter-spacing: -0.024em;
    max-width: 15ch;
    color: var(--limewash);
    text-shadow: 0 0 28px rgba(239, 232, 220, 0.95), 0 0 60px rgba(239, 232, 220, 0.8);
  }
  .stage h1 em { font-style: italic; }

  .stage-lede {
    max-width: 31rem;
    margin-top: 1.75rem;
    font-size: clamp(1.05rem, 1rem + 0.35vw, 1.18rem);
    line-height: 1.58;
    color: var(--night-text);
    text-shadow: 0 0 22px rgba(239, 232, 220, 0.95);
  }
  .stage-actions {
    margin-top: 2.25rem;
    display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.9rem;
  }

  /* the console: drives tone and figure together */
  .console {
    position: relative; z-index: 3;
    border-top: 1px solid var(--night-edge);
    background: linear-gradient(to top, rgba(239,232,220,0.92), rgba(239,232,220,0.35));
  }
  .console-in {
    max-width: calc(var(--shell) + var(--edge-pad) * 2);
    margin-inline: auto;
    padding: 1rem var(--edge-pad) 1.15rem;
    display: grid;
    gap: 0.85rem 1.75rem;
    grid-template-columns: 1fr;
    align-items: center;
  }
  @media (min-width: 54rem) {
    .console-in { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr) auto; }
  }

  .console-label {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--night-faint);
    max-width: 24rem;
  }
  .console-label b { color: var(--ink); font-weight: 500; }

  .scrub { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
  .scrub input[type="range"] {
    flex: 1; min-width: 0;
    -webkit-appearance: none; appearance: none;
    height: 22px; background: transparent; cursor: pointer;
  }
  .scrub input[type="range"]::-webkit-slider-runnable-track {
    height: 2px; background: var(--night-edge); border-radius: 2px;
  }
  .scrub input[type="range"]::-moz-range-track {
    height: 2px; background: var(--night-edge); border-radius: 2px;
  }
  .scrub input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 15px; height: 15px; margin-top: -6.5px;
    border-radius: 50%; background: var(--lamp);
    box-shadow: 0 0 0 5px rgba(196, 138, 22, 0.18);
  }
  .scrub input[type="range"]::-moz-range-thumb {
    width: 15px; height: 15px; border: 0;
    border-radius: 50%; background: var(--lamp);
  }
  .readout {
    flex: none;
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    color: var(--limewash);
    min-width: 8.5rem;
    text-align: right;
  }
  .readout span { color: var(--night-faint); }

  .sound {
    flex: none;
    display: inline-flex; align-items: center; gap: 0.6rem;
    background: transparent; color: var(--limewash);
    font: 500 0.875rem/1.2 "Instrument Sans", system-ui, sans-serif;
    border: 1px solid var(--night-edge); border-radius: 2px;
    padding: 0.6rem 1.05rem; cursor: pointer;
    transition: border-color 160ms ease;
    white-space: nowrap;
  }
  .sound:hover { border-color: var(--lamp); }
  .sound .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--night-edge);
    transition: background 200ms ease, box-shadow 200ms ease;
  }
  .sound[aria-pressed="true"] .dot {
    background: var(--lamp);
    box-shadow: 0 0 0 4px rgba(196, 138, 22, 0.22);
  }

  /* ================= concert ================= */

  .concert {
    display: grid; gap: 1.5rem 3rem;
    grid-template-columns: 1fr;
    align-items: center;
  }
  @media (min-width: 56rem) {
    .concert { grid-template-columns: minmax(0, 1fr) auto; }
  }
  .concert .kicker {
    font-size: 0.8125rem; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--lamp-text);
  }
  .concert h2 { margin-top: 0.6rem; font-size: clamp(1.8rem, 1.1rem + 2.4vw, 2.9rem); }
  .concert .where { margin-top: 0.9rem; color: var(--night-text); max-width: 34rem; }
  .concert .soul {
    font-family: "Bodoni Moda", ui-serif, Georgia, serif;
    font-style: italic;
    font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
    line-height: 1.25;
    color: var(--lamp-text);
    margin-top: 0.5rem;
  }
  .concert .where { margin-top: 1.1rem; }

  .when-where { margin: 0; display: grid; gap: 0.9rem; align-content: start; }
  .when-where div { display: grid; gap: 0.1rem; }
  .when-where dt {
    font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--night-faint);
  }
  .when-where dd { margin: 0; color: var(--limewash); font-size: 1.02rem; line-height: 1.45; }

  .tiers {
    list-style: none; margin: clamp(2rem, 4vw, 2.75rem) 0 0; padding: 0;
    border-top: 1px solid var(--night-edge);
    max-width: 46rem;
  }
  .tiers li {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.3rem 1.5rem; align-items: baseline;
    padding: 0.85rem 0; border-bottom: 1px solid var(--night-edge);
  }
  .tiers strong { font-weight: 600; color: var(--limewash); font-size: 1rem; }
  .tiers span { display: block; font-size: 0.85rem; color: var(--night-faint); margin-top: 0.1rem; }
  .tiers .price {
    font-family: "Bodoni Moda", ui-serif, Georgia, serif;
    font-size: 1.35rem; color: var(--limewash);
    font-variant-numeric: tabular-nums; white-space: nowrap; margin: 0;
  }
  .tiers .price s { color: var(--night-faint); font-size: 0.95rem; margin-right: 0.3rem; }

  .concert-cta {
    margin-top: 1.75rem;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem;
  }
  .concert .tbc, .concert-cta .tbc {
    color: var(--night-faint); font-size: 0.85rem; margin: 0; max-width: 26rem;
  }

  /* ================= video ================= */

  .films {
    margin-top: clamp(2.25rem, 5vw, 3.25rem);
    display: grid; gap: clamp(1.25rem, 3vw, 2rem);
    grid-template-columns: 1fr;
  }
  @media (min-width: 50rem) {
    .films { grid-template-columns: 1.55fr 1fr; }
    .films .film:first-child { grid-row: span 2; }
  }

  .film {
    position: relative; display: block;
    text-decoration: none; color: inherit;
    border-radius: 2px; overflow: hidden;
    background: #2B2119;
    aspect-ratio: 16 / 9;
  }
  .film img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    filter: saturate(0.82) contrast(1.06) brightness(0.78);
    transition: transform 500ms ease, filter 400ms ease;
  }
  .film:hover img, .film:focus-visible img {
    transform: scale(1.035); filter: saturate(0.95) contrast(1.06) brightness(0.92);
  }
  .film::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(28,20,14,0.92) 0%, rgba(28,20,14,0.22) 54%, rgba(28,20,14,0.06) 100%);
  }
  .film-text {
    position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
    padding: clamp(1rem, 2.4vw, 1.6rem);
    display: flex; align-items: flex-end; gap: 1rem;
  }
  .film-text h3 {
    font-size: clamp(1.15rem, 0.9rem + 0.8vw, 1.55rem);
    line-height: 1.18; color: #F3EEE4;
  }
  .film-text p { margin-top: 0.3rem; font-size: 0.8125rem; color: #CFC6B8; }
  .film .cue {
    flex: none; width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid rgba(243,238,228,0.55);
    display: grid; place-items: center;
    transition: background 200ms ease, border-color 200ms ease;
  }
  .film .cue::before {
    content: ""; width: 9px; height: 11px; margin-left: 2px;
    background: #F3EEE4;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transition: background 200ms ease;
  }
  .film:hover .cue { background: var(--lamp); border-color: var(--lamp); }
  .film:hover .cue::before { background: #1F1608; }

  /* ================= two-up ================= */

  .two-up { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); grid-template-columns: 1fr; align-items: start; }
  @media (min-width: 58rem) {
    .two-up { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .two-up.weighted { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  }
  figure { margin: 0; }
  figure img { display: block; width: 100%; height: auto; border-radius: 2px; }
  figcaption { margin-top: 0.7rem; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-faint); }

  /* Photographs from Cumie's own folder (12 Sept). Each is cropped by the box it
     sits in, never by hand, so the October pictures can replace them one for one. */
  .venue { margin-top: clamp(2rem, 4vw, 3rem); }
  .venue img { aspect-ratio: 4 / 3; object-fit: cover; }
  @media (min-width: 56rem) { .venue img { aspect-ratio: 2 / 1; object-position: 50% 48%; } }
  .two-up.flip figure { order: 2; }
  .two-up.flip img { aspect-ratio: 5 / 6; object-fit: cover; object-position: 58% 50%; }
  @media (min-width: 58rem) {
    .two-up.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
    .two-up.flip figure { order: 0; }
  }
  figure.wide { margin-bottom: clamp(2rem, 4vw, 3rem); }
  figure.wide img { aspect-ratio: 16 / 9; object-fit: cover; }
  @media (min-width: 56rem) { figure.wide img { aspect-ratio: 21 / 9; object-position: 50% 42%; } }

  /* ================= offer ================= */

  .offer {
    display: grid; gap: clamp(1.75rem, 4vw, 2.75rem);
    grid-template-columns: 1fr;
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
  }
  @media (min-width: 52rem) { .offer { grid-template-columns: 1fr 1fr; } }
  .offer article {
    border-top: 2px solid var(--ink);
    padding-top: 1.25rem;
    display: grid; gap: 0.8rem; align-content: start;
  }
  .offer article.forthcoming { border-top-color: var(--edge-firm); }
  .offer h3 { font-size: 1.6rem; line-height: 1.15; color: var(--ink); }
  .offer p { color: var(--ink-soft); max-width: 30rem; }
  .offer .when { font-size: 0.8125rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-soft); }

  /* ================= what people said ================= */

  .said {
    margin-top: clamp(2rem, 4.5vw, 3rem);
    columns: 2; column-gap: clamp(1.75rem, 5vw, 4rem);
    max-width: 66rem;
  }
  @media (max-width: 50rem) { .said { columns: 1; } }
  .said blockquote {
    break-inside: avoid;
    margin: 0 0 1.6rem;
    padding: 0 0 0 1.1rem;
    border-left: 2px solid var(--lamp);
  }
  .said blockquote p {
    font-family: "Bodoni Moda", ui-serif, Georgia, serif;
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
    line-height: 1.35;
    color: var(--ink);
  }
  .said blockquote footer {
    margin-top: 0.5rem; padding: 0; border: 0; max-width: none;
    display: block; font-size: 0.85rem; color: var(--ink-faint);
  }

  /* ================= the free lesson ================= */

  ol.lesson {
    list-style: none; counter-reset: breath;
    margin: 0; padding: 0;
    border-top: 1px solid var(--night-edge);
  }
  ol.lesson li {
    counter-increment: breath;
    position: relative;
    padding: 0.9rem 0 0.9rem 2.6rem;
    border-bottom: 1px solid var(--night-edge);
    color: var(--limewash);
    line-height: 1.55;
  }
  ol.lesson li::before {
    content: counter(breath);
    position: absolute; left: 0; top: 0.85rem;
    font-family: "Bodoni Moda", ui-serif, Georgia, serif;
    font-size: 1.35rem; line-height: 1;
    color: var(--lamp-text);
    font-variant-numeric: tabular-nums;
  }
  .lesson-note { margin-top: 2rem; color: var(--night-faint); }

  /* ================= tour ================= */

  .tour { margin-top: clamp(2.25rem, 5vw, 3.25rem); }
  .tour ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--night-edge); }
  .tour li {
    display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 1.5rem;
    align-items: baseline; padding: 1.05rem 0;
    border-bottom: 1px solid var(--night-edge);
  }
  .tour .city {
    font-family: "Bodoni Moda", ui-serif, Georgia, serif;
    font-size: clamp(1.5rem, 1rem + 1.8vw, 2.3rem);
    line-height: 1.1; color: var(--limewash);
  }
  .tour .status { font-size: 0.875rem; color: var(--night-faint); text-align: right; }
  .tour .status.open { color: var(--partial); }

  /* ================= contents ================= */

  .contents {
    margin-top: clamp(2.25rem, 5vw, 3.25rem);
    columns: 2; column-gap: clamp(1.75rem, 5vw, 4rem);
    max-width: 62rem;
  }
  @media (max-width: 44rem) { .contents { columns: 1; } }
  .contents ul { list-style: none; margin: 0; padding: 0; }
  .contents li {
    break-inside: avoid; padding: 0.62rem 0;
    border-bottom: 1px solid var(--limewash-2);
    color: var(--ink);
  }
  .contents li span {
    display: block; font-size: 0.8125rem; line-height: 1.45;
    color: var(--ink-soft); margin-top: 0.15rem;
  }

  /* ================= record ================= */

  .record { margin-top: clamp(2.25rem, 5vw, 3.25rem); max-width: 62rem; }
  .record dl { margin: 0; border-top: 1px solid var(--night-edge); }
  .record .row {
    display: grid; grid-template-columns: 1fr; gap: 0.15rem 2rem;
    padding: 0.95rem 0; border-bottom: 1px solid var(--night-edge);
  }
  @media (min-width: 46rem) {
    .record .row { grid-template-columns: 13.5rem minmax(0, 1fr); align-items: baseline; }
  }
  .record dt { font-size: 0.8125rem; color: var(--night-faint); font-variant-numeric: tabular-nums; }
  .record dd { margin: 0; color: var(--limewash); font-size: 1.03rem; line-height: 1.5; }
  .record dd small { display: block; font-size: 0.8125rem; color: var(--night-faint); margin-top: 0.15rem; }

  .repertoire {
    margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem;
    max-width: 52rem; font-size: 1.05rem; line-height: 1.4; color: var(--night-text);
  }
  .repertoire span {
    padding: 0.3rem 0.75rem; border: 1px solid var(--night-edge); border-radius: 999px;
    font-family: "Noto Sans", "Noto Sans Devanagari", "Noto Sans Armenian", "Instrument Sans", sans-serif;
  }

  /* ================= booking ================= */

  .booking { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; }
  @media (min-width: 56rem) { .booking { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); } }
  .signup { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.9rem; max-width: 30rem; }
  .signup input {
    flex: 1 1 14rem; min-width: 0;
    font: 400 1rem/1.4 "Instrument Sans", system-ui, sans-serif;
    color: var(--ink); background: var(--field);
    border: 1px solid var(--edge-firm); border-radius: 2px;
    padding: 0.8rem 0.95rem;
  }
  .signup input::placeholder { color: var(--ink-faint); }
  .signup input:focus-visible { border-color: var(--lamp); }
  .signup .lang {
    flex: 1 1 100%;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.2rem;
    margin: 0.35rem 0 0; padding: 0; border: 0;
    font-size: 0.875rem; color: var(--night-text);
  }
  .signup .lang legend { float: left; padding: 0; margin-right: 0.4rem; color: var(--night-faint); }
  .signup .lang label { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
  .signup .lang input { accent-color: var(--lamp); margin: 0; }
  .signup-note { margin-top: 0.85rem; font-size: 0.8125rem; color: var(--night-faint); }
  .direct { display: grid; gap: 0.5rem; align-content: start; }
  .direct a {
    font-family: "Bodoni Moda", ui-serif, Georgia, serif;
    font-size: clamp(1.35rem, 1rem + 1.3vw, 1.85rem);
    color: var(--limewash); text-decoration: none;
    border-bottom: 1px solid var(--night-edge);
    padding-bottom: 0.35rem; overflow-wrap: anywhere;
    transition: border-color 160ms ease;
  }
  .direct a:hover { border-bottom-color: var(--lamp); }

  footer {
    padding: 2.5rem var(--edge-pad) 3rem;
    max-width: calc(var(--shell) + var(--edge-pad) * 2);
    margin-inline: auto;
    border-top: 1px solid var(--night-edge);
    display: flex; flex-wrap: wrap; justify-content: space-between;
    gap: 1rem 2rem; font-size: 0.8125rem; color: var(--night-faint);
  }

/* ---- added for launch: language switch, honeypot, form states ---- */
.masthead nav .lang-switch { border: 1px solid var(--edge-firm); border-radius: 3px; padding: 0.1rem 0.45rem; font-size: 0.78rem; letter-spacing: 0.06em; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.signup-note[data-kind="ok"] { color: var(--partial); }
.signup-note[data-kind="err"] { color: var(--lamp-text); }
a.plain { color: inherit; text-decoration: none; }
a.plain:hover { color: var(--lamp-text); }

/* ---- the Circle page ---- */
.masthead-static { padding-bottom: 0.5rem; }
.circle-top { padding-top: clamp(2.5rem, 6vw, 5rem); }
.circle-hero { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: center; }
.circle-hero h1 { font-family: "Bodoni Moda", ui-serif, Georgia, serif; font-weight: 400; font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4rem); line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 1rem; max-width: 12ch; text-wrap: balance; }
.circle-hero .lede { max-width: var(--measure); }
.figure-35 { margin: 0; max-width: 22rem; justify-self: center; }
.figure-35 img { width: 100%; height: auto; opacity: 0.85; }
@media (min-width: 58rem) {
  .circle-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .figure-35 { max-width: 26rem; justify-self: end; }
}
.circle-form { display: grid; gap: 0.9rem; align-content: start; max-width: 28rem; }
.circle-form > label { display: grid; gap: 0.35rem; font-size: 0.8125rem; color: var(--night-faint); }
.circle-form input[type="text"], .circle-form input[type="email"] {
  font: inherit; font-size: 1rem; color: var(--ink);
  background: rgba(255,255,255,0.55); border: 1px solid var(--edge-firm); border-radius: 3px;
  padding: 0.7rem 0.85rem; width: 100%;
}
.circle-form input:focus-visible { outline: none; border-color: var(--lamp); box-shadow: 0 0 0 3px rgba(196,138,22,0.18); }
.circle-form input[name="code"] { letter-spacing: 0.08em; text-transform: uppercase; }
.circle-form .lang { border: 0; padding: 0; margin: 0.2rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; font-size: 0.875rem; color: var(--night-text); }
.circle-form .lang legend { float: left; padding: 0; margin-right: 0.4rem; color: var(--night-faint); }
.circle-form .lang label { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.circle-form .lang input { accent-color: var(--lamp); margin: 0; }
.circle-form .btn { justify-self: start; margin-top: 0.3rem; }
.circle-form input:disabled, .circle-form button:disabled { opacity: 0.55; }
.circle-form .phone { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0.7rem; }
.circle-form select { font: inherit; font-size: 1rem; color: var(--ink); background: rgba(255,255,255,0.55); border: 1px solid var(--edge-firm); border-radius: 3px; padding: 0.7rem 0.85rem; width: 100%; }
.circle-form select:focus-visible { outline: none; border-color: var(--lamp); box-shadow: 0 0 0 3px rgba(196,138,22,0.18); }
.circle-form .opt { color: var(--ink-faint); font-weight: 400; margin-left: 0.3rem; }