/* ============================================================================
   FROST STRING QUARTET — Design 04 "Bloom"
   A bento-grid site of soft clay surfaces, hand-drawn ornament and spring physics.
   Light only. Warm, generous, tactile — never childish.
   ========================================================================== */

@layer tokens, base, ornament, layout, components, responsive, utilities;

/* ---------------------------------------------------------------- 1. TOKENS */
@layer tokens {
  :root {
    /* ground + surfaces */
    --cream: #FFFBF4;
    --cream-2: #FFF4E6;
    --cream-3: #FFEFDD;
    --card: #FFFFFF;

    /* accent */
    --apricot: #E8712F;        /* non-text use: strokes, dots, fills, washes */
    --apricot-ink: #B84A0D;    /* text-safe apricot — 5.06:1 on cream         */
    --apricot-soft: #FFD9BE;
    --apricot-wash: #FFEEE2;

    /* the four voices of a string quartet */
    --butter: #F2B705;
    --butter-tint: #FDF0C8;
    --butter-ink: #7A5A00;
    --sky: #3E92C4;
    --sky-tint: #DCEDF7;
    --sky-ink: #1E5F85;
    --sage: #6E9B6B;
    --sage-tint: #E1EDE0;
    --sage-ink: #3D6139;
    --rose: #E4677A;
    --rose-tint: #FBE0E4;
    --rose-ink: #A62E42;

    /* ink */
    --plum: #3D2438;           /* 13.5:1 on cream */
    --plum-60: #6A5566;        /* 5.9:1  on cream */
    --plum-40: #978895;        /* decorative only — never body text */
    --hair: rgb(61 36 56 / .09);
    --hair-soft: rgb(61 36 56 / .055);

    /* radius scale */
    --r-sm: 12px;
    --r-md: 20px;
    --r-lg: 32px;
    --r-xl: 44px;
    --r-pill: 999px;

    /* elevation — soft, warm, layered clay */
    --hi: inset 0 2px 0 rgb(255 255 255 / .85);
    --ring: inset 0 0 0 1px rgb(61 36 56 / .055);
    --e1: 0 1px 2px rgb(61 36 56 / .04), 0 5px 12px rgb(61 36 56 / .05);
    --e2: 0 2px 4px rgb(61 36 56 / .04), 0 12px 28px rgb(61 36 56 / .07);
    --e3: 0 6px 14px rgb(61 36 56 / .06), 0 26px 56px rgb(61 36 56 / .10);

    /* type */
    --serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --hand: 'Caveat', 'Segoe Script', cursive;

    --fs-display: clamp(2.5rem, 1.5rem + 4.3vw, 5rem);
    --fs-h1: clamp(2.125rem, 1.45rem + 2.9vw, 3.75rem);
    --fs-h2: clamp(1.6875rem, 1.3rem + 1.7vw, 2.625rem);
    --fs-h3: clamp(1.3125rem, 1.16rem + .66vw, 1.75rem);
    --fs-h4: clamp(1.125rem, 1.06rem + .28vw, 1.3125rem);
    --fs-lead: clamp(1.0625rem, 1rem + .42vw, 1.3125rem);
    --fs-body: clamp(1rem, .98rem + .1vw, 1.0625rem);
    --fs-sm: .9375rem;
    --fs-xs: .875rem;
    --fs-2xs: .8125rem;

    /* spacing rhythm — 4px base */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
    --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px; --s10: 64px;
    --s11: 80px; --s12: 96px; --s13: 128px;
    --sec: clamp(56px, 5.6vw, 104px);
    --gap: clamp(12px, 1.3vw, 20px);

    /* layout */
    --maxw: 1240px;
    --gut: clamp(16px, 3.6vw, 34px);

    /* z scale */
    --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-nav: 200; --z-over: 300;

    /* motion */
    --dur-1: 140ms;
    --dur-2: 220ms;
    --dur-3: 320ms;
    --ease-out: cubic-bezier(.22, .8, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.4, .5, 1);

    color-scheme: light;
    accent-color: var(--apricot-ink);
  }

  /* the four voices, as a colour system */
  [data-voice="butter"] { --v: var(--butter); --v-tint: var(--butter-tint); --v-ink: var(--butter-ink); }
  [data-voice="sky"]    { --v: var(--sky);    --v-tint: var(--sky-tint);    --v-ink: var(--sky-ink); }
  [data-voice="sage"]   { --v: var(--sage);   --v-tint: var(--sage-tint);   --v-ink: var(--sage-ink); }
  [data-voice="rose"]   { --v: var(--rose);   --v-tint: var(--rose-tint);   --v-ink: var(--rose-ink); }
  [data-voice="apricot"]{ --v: var(--apricot);--v-tint: var(--apricot-wash);--v-ink: var(--apricot-ink); }
}

.mission-pillars{list-style:none;margin:clamp(2rem,4vw,3.5rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.mission-pillars li{padding:clamp(1.25rem,3vw,2rem)}.mission-pillars li>span{font:600 .72rem/1 var(--mono);color:var(--muted)}.mission-pillars h3{margin-top:1.5rem;font:600 var(--fs-h4)/1.15 var(--serif)}.mission-pillars p{margin-top:.75rem;color:var(--muted)}
@media(max-width:760px){.mission-pillars{grid-template-columns:1fr}}

/* PERFORMANCE-MOBILE-PASS
   Defer below-the-fold painting without changing layout, and keep narrow
   viewports resilient to long labels, translated copy, and form controls. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

@supports (content-visibility: auto) {
  main > section:not(:first-child),
  footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
  }
}

@media (max-width: 767px) {
  main,
  main > * {
    min-width: 0;
  }

  input,
  select,
  textarea {
    font-size: max(16px, 1em);
  }

  a,
  button,
  input,
  select,
  textarea {
    touch-action: manipulation;
  }
}

@media print {
  main > section,
  footer {
    content-visibility: visible;
    contain: none;
  }
}

/* ------------------------------------------------------------------ 2. BASE */
@layer base {
  @view-transition { navigation: auto; }

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

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
  }

  body {
    margin: 0;
    background-color: var(--cream);
    background-image:
      radial-gradient(1200px 620px at 82% -8%, rgb(232 113 47 / .09), transparent 62%),
      radial-gradient(900px 520px at 4% 2%, rgb(242 183 5 / .07), transparent 60%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat, repeat;
    background-attachment: scroll, scroll, fixed;
    color: var(--plum);
    font-family: var(--sans);
    font-size: var(--fs-body);
    line-height: 1.62;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -.012em;
    margin: 0;
    text-wrap: balance;
    font-variation-settings: 'SOFT' 34, 'WONK' 0;
  }
  h1 { font-size: var(--fs-h1); font-weight: 900; letter-spacing: -.024em; }
  h2 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -.018em; }
  h3 { font-size: var(--fs-h3); }
  h4 { font-size: var(--fs-h4); line-height: 1.2; }

  p, blockquote, figure { margin: 0; }
  p, blockquote { text-wrap: pretty; }
  ul, ol { margin: 0; padding: 0; list-style: none; }

  a { color: var(--apricot-ink); text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
  a:hover { color: var(--plum); }

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

  strong { font-weight: 700; }
  em { font-style: italic; }

  :focus-visible {
    outline: 3px solid var(--apricot);
    outline-offset: 3px;
    border-radius: 6px;
  }
  .clay:focus-visible, .btn:focus-visible, .chip:focus-visible { border-radius: inherit; }

  ::selection { background: var(--apricot-soft); color: var(--plum); }

  .skip {
    position: absolute; left: 50%; top: 8px; translate: -50% 0;
    z-index: var(--z-over);
    padding: 12px 20px; border-radius: var(--r-pill);
    background: var(--plum); color: var(--cream);
    font: 500 var(--fs-xs)/1 var(--sans);
    transform: translateY(-160%);
    transition: transform var(--dur-2) var(--ease-out);
  }
  .skip:focus { transform: translateY(0); color: var(--cream); }

  .vh {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

/* -------------------------------------------------------------- 3. ORNAMENT */
@layer ornament {
  .orn { color: var(--apricot); flex: none; display: inline-block; vertical-align: middle; }
  .orn path, .orn line, .orn polyline, .orn circle:not([data-fill]), .orn ellipse:not([data-fill]) {
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .orn [data-fill] { fill: currentColor; stroke: none; }
  .orn--ink { color: var(--plum); }
  .orn--soft { color: var(--plum-40); }
  .orn--voice { color: var(--v-ink, var(--apricot-ink)); }

  .stave { width: 100%; height: auto; color: var(--apricot); opacity: .4; }
  .stave path { stroke-width: 1.4; }
  .stave--inline { max-width: 300px; opacity: .3; }

  .hand {
    font-family: var(--hand);
    font-size: clamp(1.125rem, 1rem + .7vw, 1.5rem);
    font-weight: 500;
    line-height: 1.15;
    color: var(--apricot-ink);
    letter-spacing: .01em;
  }

  /* hand-drawn underline beneath an attribution */
  .squiggle { display: block; width: min(240px, 100%); height: 12px; margin-top: 6px; color: var(--apricot); }
  .squiggle path { stroke-width: 2.2; }

  /* section index numeral */
  .index {
    font: 700 var(--fs-2xs)/1 var(--sans);
    font-variant-numeric: tabular-nums;
    letter-spacing: .16em;
    color: var(--apricot-ink);
  }
}

/* ---------------------------------------------------------------- 4. LAYOUT */
@layer layout {
  .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
  .wrap--narrow { max-width: 860px; }

  .section { padding-block: var(--sec); position: relative; }
  .section--tight { padding-block: calc(var(--sec) * .62); }
  .band {
    background: linear-gradient(180deg, var(--cream-2), color-mix(in srgb, var(--cream-2) 55%, var(--cream)));
    border-block: 1px solid var(--hair-soft);
  }

  .head { display: flex; flex-direction: column; gap: var(--s4); margin-bottom: var(--s8); max-width: 72ch; }
  .head__eyebrow { display: flex; align-items: center; gap: 10px; }
  .head__kicker {
    font: 700 var(--fs-xs)/1.2 var(--sans);
    letter-spacing: .12em; text-transform: uppercase; color: var(--apricot-ink);
  }
  .head p { color: var(--plum-60); font-size: var(--fs-lead); line-height: 1.55; max-width: 62ch; }

  .stack { display: flex; flex-direction: column; }
  .row { display: flex; flex-wrap: wrap; align-items: center; }
  .gap2 { gap: var(--s2); } .gap3 { gap: var(--s3); } .gap4 { gap: var(--s4); }
  .gap6 { gap: var(--s6); } .gap7 { gap: var(--s7); }
}

/* ------------------------------------------------------------ 5. COMPONENTS */
@layer components {

  /* ---- clay surface -------------------------------------------------- */
  .clay {
    position: relative;
    background: var(--card);
    border-radius: var(--r-lg);
    box-shadow: var(--hi), var(--ring), var(--e2);
  }
  .clay--sm { border-radius: var(--r-md); box-shadow: var(--hi), var(--ring), var(--e1); }
  .clay--xl { border-radius: var(--r-xl); }
  .clay--tint { background: var(--cream-2); }
  .clay--wash { background: linear-gradient(165deg, var(--apricot-wash), var(--card) 68%); }
  .clay--voice {
    background: linear-gradient(170deg, var(--v-tint), var(--card) 55%);
    box-shadow: var(--hi), inset 0 0 0 1px color-mix(in srgb, var(--v) 30%, transparent), var(--e2);
  }

  /* press + lift, spring-flavoured (motion.dev takes over when available) */
  .lift { transition: transform var(--dur-3) var(--ease-spring), box-shadow var(--dur-3) var(--ease-out); }
  /* shadow bloom that pairs with the spring lift driven by motion.dev */
  [data-bloom] { transition: box-shadow var(--dur-3) var(--ease-out); }
  [data-bloom].is-bloom, [data-bloom]:hover { box-shadow: var(--hi), var(--ring), var(--e3); }
  .clay--voice[data-bloom].is-bloom, .clay--voice[data-bloom]:hover {
    box-shadow: var(--hi), inset 0 0 0 1px color-mix(in srgb, var(--v) 38%, transparent), var(--e3);
  }
  .lift:hover { transform: translateY(-4px); box-shadow: var(--hi), var(--ring), var(--e3); }
  .lift:active { transform: translateY(-1px) scale(.985); }

  /* ---- buttons ------------------------------------------------------- */
  .btn {
    --btn-bg: var(--plum);
    --btn-fg: var(--cream);
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 12px 24px;
    border: 0; border-radius: var(--r-pill);
    background: var(--btn-bg); color: var(--btn-fg);
    font: 500 var(--fs-sm)/1.1 var(--sans);
    letter-spacing: .002em;
    cursor: pointer; text-decoration: none;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), var(--e1);
    transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease-out),
                background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
  }
  .btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), var(--e2); color: var(--btn-fg); }
  .btn:active { transform: translateY(0) scale(.97); }
  .btn .orn { color: currentColor; }
  .btn--ghost {
    --btn-bg: transparent; --btn-fg: var(--plum);
    box-shadow: inset 0 0 0 1.5px rgb(61 36 56 / .16);
  }
  .btn--ghost:hover { --btn-bg: var(--card); box-shadow: inset 0 0 0 1.5px rgb(61 36 56 / .22), var(--e1); }
  .btn--apricot { --btn-bg: var(--apricot-ink); --btn-fg: #FFF8F2; }
  .btn--apricot:hover { --btn-bg: #A34009; }
  .btn--wide { width: 100%; }
  .btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

  .arrowlink {
    display: inline-flex; align-items: center; gap: 8px;
    font: 500 var(--fs-sm)/1.2 var(--sans);
    color: var(--apricot-ink); text-decoration: none;
    min-height: 44px;
  }
  .arrowlink .orn { transition: transform var(--dur-2) var(--ease-out); }
  .arrowlink:hover { color: var(--plum); }
  .arrowlink:hover .orn { transform: translateX(4px); }

  /* ---- chips + pills ------------------------------------------------- */
  .chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; min-height: 36px;
    border-radius: var(--r-pill);
    background: var(--v-tint, var(--cream-2));
    color: var(--v-ink, var(--plum));
    font: 500 var(--fs-xs)/1.2 var(--sans);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .6);
  }
  .chip--outline {
    background: transparent; color: var(--plum-60);
    box-shadow: inset 0 0 0 1.5px var(--hair);
  }
  .chip--solid { background: var(--v, var(--apricot)); color: var(--plum); }
  .chip__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--v, var(--apricot)); flex: none; }
  .chip--lg { padding: 10px 18px; min-height: 44px; font-size: var(--fs-sm); }

  .pill-list { display: flex; flex-direction: column; gap: var(--s2); }
  .pill-list li {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 16px;
    border-radius: var(--r-pill);
    background: var(--cream-2);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .7);
    font-size: var(--fs-xs); line-height: 1.45; color: var(--plum);
  }
  .pill-list .orn { margin-top: 3px; color: var(--v-ink, var(--apricot-ink)); }
  .pill-list li > span { min-width: 0; overflow-wrap: break-word; }

  .datechip {
    display: inline-flex; align-items: center; align-self: flex-start; gap: 8px;
    padding: 7px 14px; border-radius: var(--r-sm);
    background: var(--cream-2); color: var(--plum);
    font: 500 var(--fs-xs)/1.2 var(--sans);
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em; white-space: nowrap;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), inset 0 0 0 1px var(--hair-soft);
  }

  /* ---- header -------------------------------------------------------- */
  .site-head {
    position: sticky; top: 0; z-index: var(--z-nav);
    background: rgb(255 251 244 / .84);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid var(--hair-soft);
  }
  .site-head__in {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
    min-height: 76px;
  }
  .brand {
    display: inline-flex; align-items: center; gap: 12px;
    text-decoration: none; color: var(--plum);
    padding: 6px 4px; border-radius: var(--r-sm);
  }
  .brand__mark {
    width: 42px; height: 42px; flex: none;
    border-radius: 14px;
    background: linear-gradient(160deg, var(--apricot-soft), var(--cream-2));
    box-shadow: inset 0 1.5px 0 rgb(255 255 255 / .9), inset 0 0 0 1px rgb(232 113 47 / .22);
    display: grid; place-items: center;
  }
  .brand__name {
    font: 600 1.0625rem/1.05 var(--serif);
    font-variation-settings: 'SOFT' 40;
    letter-spacing: -.01em;
    display: block;
  }
  .brand__sub {
    font: 500 var(--fs-2xs)/1.2 var(--sans);
    letter-spacing: .1em; text-transform: uppercase; color: var(--plum-60);
    display: block; margin-top: 3px;
  }

  .nav { display: flex; align-items: center; gap: var(--s2); }
  .nav__list {
    display: flex; align-items: center; gap: 4px;
    padding: 5px; border-radius: var(--r-pill);
    background: rgb(255 255 255 / .7);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .8), inset 0 0 0 1px var(--hair-soft);
  }
  .nav__link {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
    border-radius: var(--r-pill);
    font: 500 var(--fs-xs)/1 var(--sans);
    color: var(--plum-60); text-decoration: none;
    transition: color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
  }
  .nav__link:hover { color: var(--plum); background: var(--cream-2); }
  .nav__link[aria-current="page"] {
    color: var(--plum); background: var(--apricot-soft);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .6);
  }
  .nav__cta { margin-left: var(--s2); }

  .burger {
    display: none;
    width: 48px; height: 48px; padding: 0;
    align-items: center; justify-content: center;
    border: 0; border-radius: 16px; cursor: pointer;
    background: var(--card); color: var(--plum);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), var(--ring), var(--e1);
  }
  .mobnav { display: none; }
  .burger .i-close { display: none; }
  .burger[aria-expanded="true"] .i-menu { display: none; }
  .burger[aria-expanded="true"] .i-close { display: inline-block; }

  /* ---- footer -------------------------------------------------------- */
  .site-foot {
    margin-top: var(--sec);
    background: linear-gradient(180deg, var(--cream-2), var(--cream-3));
    border-top: 1px solid var(--hair-soft);
    position: relative; overflow: hidden;
  }
  .site-foot__stave { padding-top: var(--s7); opacity: .8; }
  .site-foot__grid {
    display: grid; gap: var(--s8);
    grid-template-columns: 1.4fr 1fr 1fr;
    padding-block: var(--s8) var(--s7);
  }
  .site-foot h2, .site-foot h3 {
    font-size: var(--fs-h4); font-weight: 600; margin-bottom: var(--s4);
  }
  .site-foot p, .site-foot li { color: var(--plum-60); font-size: var(--fs-xs); line-height: 1.6; }
  .site-foot__links li + li { margin-top: 6px; }
  .site-foot__links a {
    color: var(--plum); text-decoration: none;
    display: inline-flex; align-items: center; min-height: 32px;
  }
  .site-foot__links a:hover { color: var(--apricot-ink); text-decoration: underline; }
  .site-foot__base {
    display: flex; flex-wrap: wrap; gap: var(--s4) var(--s7);
    justify-content: space-between; align-items: center;
    padding-block: var(--s5) var(--s8);
    border-top: 1px solid var(--hair-soft);
    font-size: var(--fs-2xs); color: var(--plum-60);
  }
  .credit { max-width: 56ch; }

  /* ---- bento --------------------------------------------------------- */
  .bento {
    display: grid; gap: var(--gap);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "ph ph ph ph ph ph ph ph mi mi mi mi"
      "ph ph ph ph ph ph ph ph mi mi mi mi"
      "ph ph ph ph ph ph ph ph vo vo vo vo"
      "st st st st st st st st st st st st"
      "qu qu qu qu qu la la la ve ve ve ve";
  }
  .tile { padding: clamp(20px, 2vw, 30px); min-width: 0; display: flex; flex-direction: column; }
  .tile__label {
    display: flex; align-items: center; gap: 8px;
    font: 700 var(--fs-2xs)/1 var(--sans);
    letter-spacing: .13em; text-transform: uppercase; color: var(--apricot-ink);
    margin-bottom: var(--s4);
  }
  .t-ph { grid-area: ph; padding: 0; overflow: hidden; }
  .t-mi { grid-area: mi; }
  .t-vo { grid-area: vo; }
  .t-st { grid-area: st; display: grid; gap: var(--gap); grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .t-qu { grid-area: qu; }
  .t-la { grid-area: la; }
  .t-ve { grid-area: ve; }

  /* the contact page uses its own two-area bento */
  .bento--form { grid-template-areas: "fm fm fm fm fm fm fm si si si si si"; }
  .t-fm { grid-area: fm; padding: clamp(22px, 2.6vw, 44px); }
  .t-si { grid-area: si; }

  .stat { padding: clamp(18px, 1.7vw, 26px); display: flex; flex-direction: column; gap: 4px; }
  .stat__v {
    font: 900 clamp(2.375rem, 1.5rem + 2.8vw, 3.5rem)/.94 var(--serif);
    font-variation-settings: 'SOFT' 20;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.03em;
    color: var(--apricot-ink);
  }
  .stat__l { font: 500 var(--fs-xs)/1.3 var(--sans); color: var(--plum); }
  .stat__n { font-size: var(--fs-2xs); color: var(--plum-60); line-height: 1.4; }

  /* photo tile — the bento's one photograph. No voice tint here, ever: on a
     photo tile the photograph IS the colour. */
  .photo { position: relative; min-height: 300px; background: var(--cream-2); margin: 0; }
  .photo .tilt__in { position: relative; height: 100%; border-radius: inherit; }
  .photo .ptile__btn { height: 100%; }
  .photo img { width: 100%; height: 100%; object-fit: cover; display: block;
               object-position: 50% 72%; }
  .photo::after {
    content: ''; position: absolute; inset: auto 0 0 0; height: 46%;
    background: linear-gradient(180deg, rgb(61 36 56 / 0), rgb(61 36 56 / .30));
    pointer-events: none; border-radius: inherit;
  }
  .photo__cap {
    position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1;
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  }
  .photo__pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 15px; border-radius: var(--r-pill);
    background: rgb(255 251 244 / .93);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--plum);
    font: 500 var(--fs-2xs)/1.2 var(--sans);
    box-shadow: 0 3px 10px rgb(61 36 56 / .18);
  }

  /* 3D tilt */
  .tilt { perspective: 1000px; }
  .tilt__in {
    height: 100%;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transform-style: preserve-3d;
    transition: transform 420ms var(--ease-out);
    will-change: transform;
  }
  .tilt__spec {
    position: absolute; inset: 0; pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(220px 220px at var(--mx, 50%) var(--my, 0%),
                rgb(255 255 255 / .42), rgb(255 255 255 / 0) 62%);
    opacity: var(--spec, 0);
    transition: opacity var(--dur-3) var(--ease-out);
    mix-blend-mode: screen;
  }

  /* quote tile */
  .qmark { color: var(--apricot-soft); }
  .quote-sm {
    font: 400 clamp(1.1875rem, 1rem + 1vw, 1.75rem)/1.3 var(--serif);
    font-style: italic;
    font-variation-settings: 'SOFT' 60, 'WONK' 1;
    letter-spacing: -.012em;
    color: var(--plum);
    margin-block: var(--s3) auto;
  }
  .attrib { font: 500 var(--fs-xs)/1.35 var(--sans); color: var(--plum-60); }
  .attrib strong { color: var(--plum); font-weight: 700; }

  /* venue tile with visit dots */
  .venue-mini { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
  .venue-mini li {
    display: grid; grid-template-columns: 1fr auto; gap: var(--s3); align-items: baseline;
    padding-bottom: 9px; border-bottom: 1px dashed var(--hair);
    font-size: var(--fs-xs); line-height: 1.35;
  }
  .venue-mini li:last-child { border-bottom: 0; padding-bottom: 0; }
  .venue-mini b { font-weight: 500; color: var(--plum); }
  .dots { display: inline-flex; gap: 4px; align-items: center; }
  .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--apricot); display: block; }
  .dots i[data-off] { background: rgb(61 36 56 / .13); }

  /* ---- story path ---------------------------------------------------- */
  .story { position: relative; display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 34px); }
  .story__svg {
    position: absolute; left: 0; top: 26px; width: 52px; height: calc(100% - 52px);
    overflow: visible; pointer-events: none; color: var(--apricot);
  }
  .story__svg path {
    fill: none; stroke: currentColor; stroke-width: 2.4;
    stroke-linecap: round; stroke-dasharray: 3 11; opacity: .62;
  }
  .beat { display: grid; grid-template-columns: 66px 1fr; gap: var(--s5); align-items: start; }
  .beat__node {
    width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center; flex: none;
    background: var(--card);
    box-shadow: inset 0 1.5px 0 rgb(255 255 255 / .9), inset 0 0 0 1.5px rgb(232 113 47 / .3), var(--e1);
    font: 700 var(--fs-2xs)/1 var(--sans);
    font-variant-numeric: tabular-nums;
    color: var(--apricot-ink);
    position: relative; z-index: 1;
  }
  .beat__card { padding: clamp(18px, 1.8vw, 28px); }
  .beat__year {
    font: 700 var(--fs-2xs)/1 var(--sans); letter-spacing: .14em;
    color: var(--apricot-ink); font-variant-numeric: tabular-nums;
  }
  .beat h3 { margin-block: 10px 8px; }
  .beat p { color: var(--plum-60); font-size: var(--fs-sm); max-width: 68ch; }
  .note {
    display: flex; align-items: flex-start; gap: 10px;
    margin-top: var(--s4); padding-left: 2px;
  }
  .note .orn { margin-top: 2px; }

  /* ---- musician cards ------------------------------------------------ */
  .people { display: grid; gap: clamp(16px, 1.8vw, 26px); align-items: start; }
  .people--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .person { padding: clamp(16px, 1.5vw, 22px); display: flex; flex-direction: column; height: 100%; }
  .person__figure {
    position: relative; margin: 0 0 var(--s6);
    border-radius: var(--r-md); overflow: hidden;
    background: var(--cream-2);
    box-shadow: inset 0 0 0 1px rgb(61 36 56 / .06);
  }
  .person__figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
  /* the voice survives as a keyline, a pill and the subheadings — but never as
     a wash behind a photograph */
  .person--voice {
    box-shadow: var(--hi), inset 0 0 0 1.5px color-mix(in srgb, var(--v) 34%, transparent), var(--e2);
  }
  .person--voice:hover {
    box-shadow: var(--hi), inset 0 0 0 1.5px color-mix(in srgb, var(--v) 46%, transparent), var(--e3);
  }
  .person__figure .ptile__btn { border-radius: var(--r-md); }
  .person__voice {
    position: absolute; left: 12px; top: 12px;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border-radius: var(--r-pill);
    background: rgb(255 255 255 / .94);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    color: var(--v-ink); font: 600 var(--fs-2xs)/1.1 var(--sans);
    box-shadow: 0 3px 10px rgb(61 36 56 / .16);
  }
  .person__name { font-size: var(--fs-h3); font-weight: 600; }
  .person__meta {
    font-size: var(--fs-2xs); color: var(--plum-60); margin-top: 6px;
    display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center;
  }
  .person__meta span { display: inline-flex; align-items: center; gap: 6px; }
  .person__bio { font-size: var(--fs-sm); color: var(--plum-60); margin-top: var(--s4); }
  .person__sub {
    font: 700 var(--fs-2xs)/1 var(--sans); letter-spacing: .13em; text-transform: uppercase;
    color: var(--v-ink); margin: var(--s6) 0 var(--s3);
    display: flex; align-items: center; gap: 8px;
  }
  .person__off { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: var(--s4); }
  .person__rule { height: 1px; background: var(--hair-soft); margin-top: var(--s5); }

  .voicelegend { display: flex; flex-wrap: wrap; gap: var(--s3); }

  /* teacher tile */
  .mentor { display: grid; grid-template-columns: auto 1fr; gap: var(--s6); align-items: center; padding: clamp(20px, 2vw, 32px); }
  .mono-mark {
    width: 82px; height: 82px; border-radius: 26px; flex: none;
    display: grid; place-items: center;
    background: linear-gradient(160deg, var(--apricot-soft), var(--cream-2));
    box-shadow: inset 0 2px 0 rgb(255 255 255 / .9), inset 0 0 0 1px rgb(232 113 47 / .24);
    font: 600 1.6rem/1 var(--serif); color: var(--apricot-ink);
    letter-spacing: -.02em;
  }

  /* ---- concerts ------------------------------------------------------ */
  .season { margin-bottom: var(--s9); }
  .season__head {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s4);
    margin-bottom: var(--s6);
  }
  .season__head h2 { font-size: var(--fs-h2); font-weight: 900; letter-spacing: -.022em; }
  .season__count { font: 500 var(--fs-xs)/1 var(--sans); color: var(--plum-60); font-variant-numeric: tabular-nums; }

  .path { position: relative; display: flex; flex-direction: column; gap: var(--s4); }
  .path__svg {
    position: absolute; left: 0; top: 22px; width: 44px; height: calc(100% - 44px);
    overflow: visible; pointer-events: none; color: var(--apricot);
  }
  .path__svg path {
    fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round;
    stroke-dasharray: 3 11; opacity: .6;
  }
  .gig { display: grid; grid-template-columns: 46px 1fr; gap: var(--s5); align-items: start; }
  .gig__node {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    background: var(--card); position: relative; z-index: 1;
    box-shadow: inset 0 1.5px 0 rgb(255 255 255 / .9), inset 0 0 0 1.5px rgb(232 113 47 / .28), var(--e1);
  }
  .gig__card {
    display: grid; grid-template-columns: 196px 1fr auto; gap: var(--s5) var(--s6);
    align-items: center; padding: clamp(16px, 1.6vw, 24px);
  }
  .gig__body { min-width: 0; }
  .gig__venue { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.014em; }
  .gig__meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin-top: var(--s3); align-items: center; }
  .gig__when { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }
  .gig__city { font-size: var(--fs-xs); color: var(--plum-60); display: inline-flex; gap: 6px; align-items: center; }
  .gig__thumb {
    width: 132px; flex: none; border-radius: var(--r-sm); overflow: hidden;
    box-shadow: inset 0 0 0 1px rgb(61 36 56 / .07);
  }
  .gig__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--cream-2); }
  .gig__plate {
    width: 132px; flex: none; aspect-ratio: 4 / 3;
    border-radius: var(--r-sm); display: grid; place-items: center;
    background: linear-gradient(160deg, var(--cream-2), var(--card));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .8), inset 0 0 0 1px var(--hair-soft);
  }

  .venues { display: grid; gap: var(--gap); grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .venue { padding: clamp(18px, 1.8vw, 26px); display: flex; flex-direction: column; gap: var(--s3); }
  .venue__name { font-size: var(--fs-h4); font-weight: 600; }
  .venue__kind { font-size: var(--fs-2xs); color: var(--plum-60); }
  .venue__visits {
    margin-top: auto; padding-top: var(--s4);
    display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
    font: 500 var(--fs-2xs)/1 var(--sans); color: var(--plum-60);
    font-variant-numeric: tabular-nums;
  }

  /* ---- speech bubble (testimonials) ---------------------------------- */
  .bubble {
    position: relative;
    padding: clamp(28px, 4vw, 64px) clamp(24px, 4vw, 68px) clamp(34px, 4vw, 60px);
    border-radius: var(--r-xl);
    background: linear-gradient(202deg, var(--apricot-wash), var(--card) 46%);
    max-width: 980px; margin-inline: auto;
  }
  .bubble__q {
    font: 400 clamp(1.625rem, 1.05rem + 3vw, 3.5rem)/1.2 var(--serif);
    font-style: italic;
    font-variation-settings: 'SOFT' 70, 'WONK' 1;
    letter-spacing: -.018em;
    color: var(--plum);
  }
  .bubble__tail { position: absolute; left: clamp(30px, 5vw, 84px); bottom: -29px; width: 58px; height: 32px; }
  .bubble__tail path { fill: var(--card); stroke: none; }
  .bubble__tail .edge { fill: none; stroke: rgb(61 36 56 / .06); stroke-width: 1; }
  .bubble__foot { margin-top: clamp(22px, 2.6vw, 38px); display: flex; flex-wrap: wrap; gap: var(--s5) var(--s7); align-items: flex-end; justify-content: space-between; }
  .verified {
    display: inline-flex; align-items: center; gap: 8px;
    font: 500 var(--fs-2xs)/1 var(--sans); color: var(--sage-ink);
    padding: 8px 14px; border-radius: var(--r-pill); background: var(--sage-tint);
  }
  .who { font: 600 var(--fs-h4)/1.2 var(--serif); color: var(--plum); }
  .who + .attrib { margin-top: 4px; }

  .three { display: grid; gap: var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mini { padding: clamp(20px, 2vw, 30px); display: flex; flex-direction: column; gap: var(--s3); }
  .mini h3 { font-size: var(--fs-h4); }
  .mini p { font-size: var(--fs-sm); color: var(--plum-60); }
  .mini__orn { margin-bottom: var(--s2); }

  /* ---- form ---------------------------------------------------------- */
  .form { display: flex; flex-direction: column; gap: var(--s5); }
  .field { position: relative; }
  .field__ctl {
    width: 100%;
    min-height: 62px;
    padding: 26px 18px 10px;
    border: 0; border-radius: var(--r-md);
    background: var(--card);
    box-shadow: inset 0 0 0 1.5px var(--hair), inset 0 1px 0 rgb(255 255 255 / .9);
    color: var(--plum);
    font: 400 var(--fs-body)/1.45 var(--sans);
    transition: box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
    appearance: none;
  }
  textarea.field__ctl { min-height: 148px; resize: vertical; padding-top: 30px; }
  select.field__ctl {
    padding-right: 52px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%233D2438' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
  }
  .field__ctl:hover { box-shadow: inset 0 0 0 1.5px rgb(61 36 56 / .16), inset 0 1px 0 rgb(255 255 255 / .9); }
  .field__ctl:focus-visible {
    outline: 3px solid var(--apricot); outline-offset: 2px;
    box-shadow: inset 0 0 0 1.5px var(--apricot);
  }
  .field__label {
    position: absolute; left: 19px; top: 20px;
    font: 400 var(--fs-body)/1.2 var(--sans);
    color: var(--plum-60);
    pointer-events: none;
    transform-origin: left top;
    transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
  }
  .field__ctl:focus + .field__label,
  .field__ctl:not(:placeholder-shown) + .field__label,
  .field--float .field__label {
    transform: translateY(-11px) scale(.76);
    color: var(--apricot-ink);
  }
  .field__req { color: var(--apricot-ink); }
  .field__help { display: block; margin-top: 8px; padding-left: 19px; font-size: var(--fs-2xs); color: var(--plum-60); }
  .field__err {
    display: none; margin-top: 8px; padding-left: 19px;
    font: 500 var(--fs-2xs)/1.4 var(--sans); color: var(--rose-ink);
    align-items: flex-start; gap: 7px;
  }
  .field__err .orn { margin-top: 2px; color: var(--rose-ink); }
  .field.is-invalid .field__ctl { box-shadow: inset 0 0 0 1.5px var(--rose-ink), inset 0 1px 0 rgb(255 255 255 / .9); }
  .field.is-invalid .field__err { display: flex; }
  .field.is-valid .field__ctl { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sage) 70%, transparent), inset 0 1px 0 rgb(255 255 255 / .9); }

  .submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5); }
  .btn__spin { display: none; width: 18px; height: 18px; }
  .btn.is-loading { pointer-events: none; }
  .btn.is-loading .btn__spin { display: block; animation: spin 900ms linear infinite; }
  .btn.is-loading .btn__label { opacity: .8; }
  .btn.is-loading .btn__arrow { display: none; }
  @keyframes spin { to { transform: rotate(360deg); } }

  .form-note { font-size: var(--fs-2xs); color: var(--plum-60); max-width: 46ch; }
  .success {
    display: none;
    padding: clamp(24px, 3vw, 40px);
    background: linear-gradient(165deg, var(--sage-tint), var(--card) 70%);
  }
  .success.is-on { display: block; }
  .success h2 { font-size: var(--fs-h3); margin-bottom: var(--s3); }
  .success .head__kicker { color: var(--sage-ink); }
  .success .head__kicker .orn { color: var(--sage-ink); }
  .success p { color: var(--plum-60); font-size: var(--fs-sm); }
  .form.is-done { display: none; }

  /* ---- CTA band ------------------------------------------------------ */
  .invite { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 3vw, 56px); align-items: center; padding: clamp(26px, 3.4vw, 56px); }
  .invite h2 { font-size: var(--fs-h2); font-weight: 900; letter-spacing: -.022em; }
  .invite p { color: var(--plum-60); font-size: var(--fs-lead); margin-top: var(--s4); }
  .audiences { display: flex; flex-wrap: wrap; gap: var(--s2); }

  /* ---- people strip (home) ------------------------------------------- */
  .strip { display: flex; flex-wrap: wrap; gap: var(--s4); }
  .facecard {
    display: flex; align-items: center; gap: var(--s3);
    padding: 8px 16px 8px 8px; border-radius: var(--r-pill);
    text-decoration: none; color: var(--plum);
    background: var(--card);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), var(--ring), var(--e1);
    transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease-out);
  }
  .facecard:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), var(--ring), var(--e2); color: var(--plum); }
  .facecard .facecard__mark {
    width: 46px; height: 46px; flex: none; border-radius: 50%;
    margin-top: 0;
    display: grid; place-items: center;
    background: var(--v-tint);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--v) 55%, transparent);
    font: 700 1.0625rem/1 var(--sans); color: var(--v-ink);
    letter-spacing: .01em;
  }
  .facecard b { font: 500 var(--fs-xs)/1.1 var(--sans); display: block; }
  .facecard span { font: 400 var(--fs-2xs)/1.2 var(--sans); color: var(--v-ink); display: flex; align-items: center; gap: 5px; margin-top: 3px; }

  /* ---- pull quote band ----------------------------------------------- */
  .pull { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s5); }
  .pull blockquote {
    margin: 0;
    font: 400 clamp(1.4375rem, 1.05rem + 2.1vw, 2.5rem)/1.26 var(--serif);
    font-style: italic;
    font-variation-settings: 'SOFT' 70, 'WONK' 1;
    letter-spacing: -.018em;
    max-width: 26ch; color: var(--plum);
  }

  /* ---- wide photo ---------------------------------------------------- */
  .showcase { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--cream-2); }
  .showcase img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
  .showcase--tall img { aspect-ratio: 4 / 5; object-position: center 22%; }
  .duo { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--gap); align-items: stretch; }
  .duo > .mentor { height: 100%; }
  .duo--intro { grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 3.2vw, 56px); align-items: center; }
  .mentor--wide { grid-template-columns: auto 1fr 1fr; gap: clamp(20px, 2.4vw, 40px); align-items: start; }
  .mentor--wide > div { align-self: center; }
  .mentor__note { border-left: 1px dashed var(--hair); padding-left: clamp(18px, 2vw, 32px); }
  .showcase__cap {
    position: absolute; inset: auto 0 0 0; padding: clamp(16px, 2vw, 26px);
    display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between;
    background: linear-gradient(180deg, rgb(61 36 56 / 0), rgb(61 36 56 / .62));
  }
  .showcase__cap p { color: #FFF7EE; font-size: var(--fs-xs); max-width: 54ch; text-shadow: 0 1px 4px rgb(61 36 56 / .5); }

  /* ==========================================================================
     PHOTOGRAPH TILES + THE MASONRY WALL
     ------------------------------------------------------------------------
     Every photograph sits in a clay tile. The tile carries the shadow; the
     picture is corner-clipped to the tile radius and never gets a shadow of
     its own. Cream gutters stay visible between tiles — a flush grid turns
     this into a stock-photo wall.

     The wall is CSS Grid with `grid-row: span N`, where N is computed in
     build.mjs from each photograph's known ratio. Never CSS `columns`: those
     reflow as pictures load, which breaks both tab order and CLS.

     The row unit and the gutter are `cqw` — a share of the wall's own width —
     so one build-time integer stays correct at every breakpoint:
        3-up   column 32.134cqw   gutter 1.7995cqw   row 0.1cqw
        2-up   column 48.638cqw   gutter 2.7237cqw   row 0.15136cqw
     (printed by build.mjs; keep the two in step.)
     ====================================================================== */
  .masonry { display: grid; gap: var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .ptile {
    position: relative; margin: 0; min-width: 0;
    background: var(--card); border-radius: var(--r-lg); overflow: hidden;
    box-shadow: var(--hi), var(--ring), var(--e2);
    transition: box-shadow var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-spring);
  }
  .ptile--wide { grid-column: span 2; }
  .ptile:has(.ptile__btn:hover), .ptile:has(.ptile__btn:focus-visible) {
    box-shadow: var(--hi), var(--ring), var(--e3);
  }
  .ptile__btn {
    display: block; width: 100%; padding: 0; margin: 0; border: 0;
    background: none; color: inherit; cursor: pointer; position: relative;
    border-radius: inherit; overflow: hidden; -webkit-appearance: none; appearance: none;
    text-align: inherit; font: inherit;
  }
  .ptile__btn:focus-visible { outline-offset: -4px; border-radius: inherit; }
  .ptile__btn > img { display: block; width: 100%; height: auto; border-radius: inherit; }
  .ptile__cap {
    position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2;
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center; pointer-events: none;
  }
  .ptile__cap .chip__dot { background: var(--v, var(--apricot)); }
  /* The affordance rests visible rather than waiting for a hover: on a touch
     screen there is no hover at all, and a picture that opens should say so. */
  .ptile__zoom {
    position: absolute; top: 12px; right: 12px; width: 40px; height: 40px;
    border-radius: 50%; display: none; place-items: center;
    background: rgb(255 251 244 / .92); color: var(--plum);
    box-shadow: 0 3px 10px rgb(61 36 56 / .22);
    transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring);
  }
  .lb-ready .ptile__zoom { display: grid; }
  .ptile__btn:hover .ptile__zoom, .ptile__btn:focus-visible .ptile__zoom {
    background: var(--apricot-soft); transform: scale(1.1);
  }

  /* one large photograph on its own — the caption sits BELOW the picture on
     cream, so no body type is ever set over a photograph */
  .pwide { border-radius: var(--r-xl); }
  .pwide__cap {
    display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6);
    align-items: baseline; justify-content: space-between;
    padding: clamp(14px, 1.5vw, 20px) clamp(16px, 1.8vw, 26px) clamp(16px, 1.7vw, 22px);
  }
  .pwide__cap p { color: var(--plum-60); font-size: var(--fs-xs); max-width: 62ch; }
  .pwide__cap .photo__pill { background: var(--cream-2); box-shadow: none; backdrop-filter: none; }
  .pwide--tall { height: 100%; display: flex; flex-direction: column; }
  .pwide--tall .ptile__btn { flex: 1 1 auto; }

  /* ---- the lightbox --------------------------------------------------- */
  .lbx {
    width: 100%; max-width: 100vw; height: 100%; max-height: 100dvh;
    margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden;
  }
  .lbx::backdrop { background: rgb(43 25 39 / .93); }
  .lbx__stage {
    position: absolute; inset: 0; display: grid; place-items: center;
    padding: clamp(64px, 9vh, 92px) clamp(12px, 4vw, 72px) clamp(96px, 13vh, 128px);
  }
  .lbx__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--s4); max-height: 100%; }
  .lbx__img {
    display: block; width: auto; height: auto;
    max-width: 100%; max-height: calc(100dvh - 250px);
    border-radius: var(--r-lg); background: var(--cream-2);
  }
  .lbx__cap {
    background: var(--cream); color: var(--plum);
    border-radius: var(--r-pill); padding: 11px 22px;
    font: 500 var(--fs-xs)/1.35 var(--sans); text-align: center; max-width: 68ch;
    box-shadow: 0 4px 14px rgb(0 0 0 / .22);
  }
  .lbx__bar {
    position: absolute; left: 50%; bottom: clamp(16px, 3.4vh, 30px); translate: -50% 0;
    display: flex; align-items: center; gap: 10px; padding: 6px;
    background: var(--cream); border-radius: var(--r-pill);
    box-shadow: 0 6px 22px rgb(0 0 0 / .3);
  }
  .lbx__btn, .lbx__close {
    width: 48px; height: 48px; flex: none; border: 0; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    background: var(--cream-2); color: var(--plum);
  }
  .lbx__btn:hover, .lbx__close:hover { background: var(--apricot-soft); transform: scale(1.06); }
  .lbx__btn[hidden], .lbx__count[hidden] { display: none; }
  .lbx__close {
    position: absolute; top: clamp(12px, 2.4vh, 24px); right: clamp(12px, 3vw, 28px);
    background: var(--cream); box-shadow: 0 6px 22px rgb(0 0 0 / .3);
  }
  .lbx__count {
    font: 600 var(--fs-xs)/1 var(--sans); font-variant-numeric: tabular-nums;
    color: var(--plum); min-width: 58px; text-align: center;
  }

  /* No entrance animation on the viewer itself, deliberately. An @keyframes
     `from { opacity: 0 }` on a dialog is a bet that a frame will arrive; if the
     compositor is asleep the picture never appears at all. The resting state is
     the finished state here as everywhere else. The only motion is the
     crossfade between pictures, and app.js clears it on load, on error and on a
     timer, so a stalled decode can never leave a blank frame. */
  @media (prefers-reduced-motion: no-preference) {
    .lbx__img { transition: opacity 170ms var(--ease-out); }
    .lbx.is-swap .lbx__img { opacity: 0; }
    .lbx__btn, .lbx__close { transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring); }
  }
}

/* the wall's exact geometry — only where container query units exist */
@layer components {
  @supports (container-type: inline-size) {
    .masonry-wrap { container-type: inline-size; }
    .masonry {
      column-gap: 1.7995cqw; row-gap: 0;
      grid-auto-rows: .1cqw; grid-auto-flow: row;
    }
    .masonry > .ptile {
      grid-row: span var(--span, 232);
      margin-bottom: 1.7995cqw;
    }
    .masonry > .ptile > .ptile__btn { height: 100%; }
    .masonry > .ptile > .ptile__btn > img { height: 100%; object-fit: cover; }
  }
}

/* ------------------------------------------------------------ 6. RESPONSIVE */
@layer responsive {
  @media (max-width: 1080px) {
    .bento {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      grid-template-areas:
        "ph ph ph ph ph ph"
        "mi mi mi vo vo vo"
        "st st st st st st"
        "qu qu qu la la la"
        "ve ve ve ve ve ve";
    }
    .t-st { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .bento--form {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      grid-template-areas: "fm fm fm fm fm fm" "si si si si si si";
    }
    .people--2, .people--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .venues { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gig__card { grid-template-columns: 190px 1fr auto; gap: var(--s4) var(--s5); }
    .invite { grid-template-columns: 1fr; }
    .duo, .duo--intro { grid-template-columns: 1fr; }
    .mentor--wide { grid-template-columns: auto 1fr; }
    .mentor__note { grid-column: 1 / -1; border-left: 0; border-top: 1px dashed var(--hair);
                    padding-left: 0; padding-top: var(--s5); }
    .site-foot__grid { grid-template-columns: 1fr 1fr; }

    /* the wall drops to two columns; the build-time spans stay correct because
       the row unit and the gutter are both a share of the wall's own width */
    .masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    @supports (container-type: inline-size) {
      .masonry { column-gap: 2.7237cqw; grid-auto-rows: .15136cqw; }
      .masonry > .ptile { margin-bottom: 2.7237cqw; }
    }
  }

  @media (max-width: 900px) {
    .nav__list { display: none; }
    .nav__cta { display: none; }
    .burger { display: inline-flex; }
    .mobnav { display: block; }
    .mobnav[hidden] { display: none; }
    .mobnav__in { padding: var(--s4); margin-bottom: var(--s4); display: flex; flex-direction: column; gap: 4px; }
    .mobnav a:not(.btn) {
      display: flex; align-items: center; justify-content: space-between;
      min-height: 52px; padding: 0 18px; border-radius: var(--r-md);
      text-decoration: none; color: var(--plum);
      font: 500 var(--fs-body)/1 var(--sans);
    }
    .mobnav a:not(.btn)[aria-current="page"] { background: var(--apricot-soft); }
    .mobnav a:not(.btn):hover { background: var(--cream-2); }
    .mobnav .btn { margin-top: var(--s3); }
    .three { grid-template-columns: 1fr; }
  }

  @media (max-width: 700px) {
    .bento {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "ph" "mi" "vo" "st" "qu" "la" "ve";
    }
    .t-st { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bento--form {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "fm" "si";
    }
    .people--2, .people--3 { grid-template-columns: minmax(0, 1fr); }
    .venues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gig__card { grid-template-columns: 1fr; }
    .gig__when { flex-direction: row; align-items: center; }
    .gig__thumb, .gig__plate { width: 100%; max-width: 220px; }
    .beat { grid-template-columns: 44px 1fr; gap: var(--s4); }
    .beat__node { width: 40px; height: 40px; }
    .story__svg { left: 0; width: 40px; top: 20px; height: calc(100% - 40px); }
    .gig { grid-template-columns: 38px 1fr; gap: var(--s4); }
    .gig__node { width: 36px; height: 36px; }
    .path__svg { left: 0; width: 36px; top: 18px; height: calc(100% - 36px); }
    .site-foot__grid { grid-template-columns: 1fr; gap: var(--s7); }
    .mentor { grid-template-columns: 1fr; gap: var(--s4); }
    .photo { min-height: 300px; }
    .photo__cap, .ptile__cap { left: 10px; right: 10px; bottom: 10px; gap: 6px; }
    .photo__pill { padding: 7px 12px; font-size: 12px; }
    .ptile__cap .photo__pill { padding: 6px 10px; font-size: 11.5px; gap: 6px; }
    .ptile__zoom { width: 34px; height: 34px; top: 8px; right: 8px; }
    .pwide__cap { flex-direction: column; align-items: flex-start; }
    .lbx__stage { padding: 60px 10px 108px; }
    .lbx__img { max-height: calc(100dvh - 226px); }
    .lbx__cap { font-size: 12.5px; padding: 9px 16px; }
  }

  @media (max-width: 420px) {
    .venues { grid-template-columns: minmax(0, 1fr); }
    .brand__sub { display: none; }
  }

  /* desktop-only masonry stagger — a warm, slightly loose arrangement */
  @media (min-width: 1081px) {
    .people--2 > :nth-child(even) { margin-top: 34px; }
    .people--3 > :nth-child(2) { margin-top: 22px; }
    .people--3 > :nth-child(3) { margin-top: 46px; }
  }
}

/* ------------------------------------------------------------- 7. UTILITIES */
@layer utilities {
  .mt2 { margin-top: var(--s2); } .mt3 { margin-top: var(--s3); }
  .mt4 { margin-top: var(--s4); } .mt5 { margin-top: var(--s5); }
  .mt6 { margin-top: var(--s6); } .mt7 { margin-top: var(--s7); }
  .mt8 { margin-top: var(--s8); } .mt9 { margin-top: var(--s9); }
  .mb4 { margin-bottom: var(--s4); } .mb6 { margin-bottom: var(--s6); }
  .mb7 { margin-bottom: var(--s7); } .mb8 { margin-bottom: var(--s8); }
  .auto-t { margin-top: auto; }
  .lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--plum-60); }
  .muted { color: var(--plum-60); }
  .small { font-size: var(--fs-xs); }
  .serif { font-family: var(--serif); }
  .center { text-align: center; }
  .nums { font-variant-numeric: tabular-nums; }
  .measure { max-width: 66ch; }
  /* Scroll lock while the viewer is open. `clip` rather than `hidden`: clip
     does not turn the root into a scroll container, so the browser never
     clamps the scroll position and the exact scrollTop survives. `hidden` is
     the fallback for anything that does not know `clip`; app.js restores the
     position explicitly in either case. */
  .lb-lock { overflow: hidden; overflow: clip; }
}

/* ------------------------------------------- 7b. SCROLL-DRAWN HAND ORNAMENT */
@property --rev {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}
/* dotted paths draw themselves top-to-bottom by unmasking */
.anim [data-mask] { --rev: 0%; }
[data-mask] {
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--rev), transparent calc(var(--rev) + 3%));
  mask-image: linear-gradient(to bottom, #000 var(--rev), transparent calc(var(--rev) + 3%));
  transition: --rev 1500ms var(--ease-out);
}
[data-mask].is-in { --rev: 100%; }

/* solid strokes draw with stroke-dashoffset (set inline by app.js) */
[data-draw] { transition: stroke-dashoffset 1100ms var(--ease-out); }

.tilt__in.is-tilting { transition: none; }

/* ------------------------------- 8. MOTION: entrance + reduced-motion gates */
/* Elements start hidden ONLY when the .anim class is present on <html>,
   which is added by an inline head script and removed on load / failure.
   If JS or a CDN fails, everything is visible with zero flash of blank. */
.anim [data-tile] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-tile], [data-reveal] { opacity: 1 !important; transform: none !important; }
  .tilt__in { transform: none !important; }
  .tilt__spec { display: none; }
  @view-transition { navigation: none; }
}

@media print {
  .site-head, .site-foot__stave, .burger, .mobnav { display: none; }
  body { background: #fff; }
}

/* MOBILE-CASCADE-GUARD — keep form controls usable after design-specific rules. */
@media (max-width: 767px) {
  main, main > * { min-width: 0; }
  input, select, textarea { font-size: max(16px, 1em); }
}