@import url("fonts.css");

@layer reset, base, layout, components, utilities;

/*
 * Two palettes, one set of tokens.
 *
 * The dark palette is the brand: the logo is gold on black. The light palette
 * is warm paper rather than clinical white, so the gold still belongs.
 *
 * `color-scheme` decides which one `light-dark()` picks. A visitor with no
 * stated preference follows their system; the toggle in the header writes
 * data-theme and overrides it. Browsers without `light-dark()` keep the dark
 * palette, which is the plain value assigned first.
 */

:root {
  /* -------------------------------------------------- dark palette (brand) */
  --d-ink-900: #080807;      /* header, footer, deepest ground */
  --d-ink-800: #0E0D0C;      /* page */
  --d-ink-700: #131110;      /* alternate band */
  --d-ink-600: #1A1614;      /* card */
  --d-ink-500: #221D19;      /* card, raised */
  --d-line:      #2E2721;
  --d-line-soft: #201B17;

  --d-cream:   #F4EFE7;
  --d-cream-2: #C6BCAF;
  --d-cream-3: #8E857B;

  --d-linen:      #F7F3EC;   /* the light island inside the dark site */
  --d-linen-2:    #EDE5D8;
  --d-linen-ink:  #17130F;
  --d-linen-ink-2:#5C5348;
  --d-linen-line: #DED4C4;

  --d-gold:      #C9A227;
  --d-gold-lit:  #F0D98A;
  --d-gold-deep: #7E5C0B;

  --d-good: #5FA97B;
  --d-warn: #D9A521;
  --d-bad:  #D2604F;

  --d-scrim:      8 8 7;     /* the wash over hero photographs */
  --d-logo-plate: transparent;
  --d-shadow:       0 1px 2px rgb(0 0 0 / .55), 0 14px 34px -14px rgb(0 0 0 / .8);
  --d-shadow-lift:  0 2px 6px rgb(0 0 0 / .5), 0 34px 70px -22px rgb(0 0 0 / .9);
  --d-shadow-side:  20px 0 60px -20px rgb(0 0 0 / .9);
  --d-shadow-sheet: 0 -20px 50px -20px rgb(0 0 0 / .9);

  /* ------------------------------------------------- light palette (paper) */
  --l-ink-900: #FFFFFF;      /* header and footer float above the page */
  --l-ink-800: #FAF7F2;      /* page */
  --l-ink-700: #F2ECE1;      /* alternate band */
  --l-ink-600: #FFFFFF;      /* card */
  --l-ink-500: #F7F2E9;      /* card, raised */
  --l-line:      #E4DACA;
  --l-line-soft: #EFE8DB;

  --l-cream:   #191510;      /* "cream" keeps its role: the primary text */
  --l-cream-2: #514840;
  --l-cream-3: #6F665A;      /* still muted, but 5:1 on paper rather than 3.7 */

  --l-linen:      #F2ECE1;
  --l-linen-2:    #E9E0D0;
  --l-linen-ink:  #191510;
  --l-linen-ink-2:#574E43;
  --l-linen-line: #DDD2BE;

  /* Gold must darken on paper to stay legible. "lit" and "deep" both mean
     more emphasis, which on a light ground is deeper, never brighter — and
     `--gold-deep` is what the linen band uses, so it has to clear 4.5:1
     against that slightly darker ground too. */
  --l-gold:      #836009;
  --l-gold-lit:  #7E5C0B;
  --l-gold-deep: #7E5C0B;

  --l-good: #35694A;
  --l-warn: #8A6309;
  --l-bad:  #A83626;

  --l-scrim:      250 247 242;
  --l-logo-plate: #151210;   /* the gold mark needs its black ground back */
  --l-shadow:       0 1px 2px rgb(25 21 16 / .05), 0 12px 30px -14px rgb(25 21 16 / .2);
  --l-shadow-lift:  0 2px 6px rgb(25 21 16 / .07), 0 30px 60px -22px rgb(25 21 16 / .26);
  --l-shadow-side:  20px 0 60px -22px rgb(25 21 16 / .3);
  --l-shadow-sheet: 0 -20px 50px -24px rgb(25 21 16 / .28);

  /* ------------------------------------------------------------- in effect */
  color-scheme: dark;

  --ink-900:   var(--d-ink-900);
  --ink-800:   var(--d-ink-800);
  --ink-700:   var(--d-ink-700);
  --ink-600:   var(--d-ink-600);
  --ink-500:   var(--d-ink-500);
  --line:      var(--d-line);
  --line-soft: var(--d-line-soft);

  --cream:   var(--d-cream);
  --cream-2: var(--d-cream-2);
  --cream-3: var(--d-cream-3);

  --linen:       var(--d-linen);
  --linen-2:     var(--d-linen-2);
  --linen-ink:   var(--d-linen-ink);
  --linen-ink-2: var(--d-linen-ink-2);
  --linen-line:  var(--d-linen-line);

  --gold:      var(--d-gold);
  --gold-lit:  var(--d-gold-lit);
  --gold-deep: var(--d-gold-deep);

  --good: var(--d-good);
  --warn: var(--d-warn);
  --bad:  var(--d-bad);

  --scrim:      var(--d-scrim);
  --logo-plate: var(--d-logo-plate);
  --shadow:       var(--d-shadow);
  --shadow-lift:  var(--d-shadow-lift);
  --shadow-side:  var(--d-shadow-side);
  --shadow-sheet: var(--d-shadow-sheet);
  --lift: 1.18;          /* hover emphasis: brighten on ink, deepen on paper */

  /* Gold is the reward colour — hairlines, actions, active states, never a wash. */
  --gold-face: linear-gradient(100deg, #A9800F 0%, #F0D98A 46%, #C9A227 100%);
  --gold-line: linear-gradient(90deg, transparent, var(--gold) 22%,
                               var(--gold-lit) 50%, var(--gold) 78%, transparent);
  --on-gold: #17110A;        /* text on a gold fill, in either scheme */

  --r-xs: 6px;
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 26px;
  --r-pill: 999px;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Fluid type. One scale for the whole site. */
  --t--1: clamp(0.76rem, 0.74rem + 0.10vw, 0.82rem);
  --t-0:  clamp(0.94rem, 0.91rem + 0.15vw, 1.02rem);
  --t-1:  clamp(1.08rem, 1.02rem + 0.30vw, 1.25rem);
  --t-2:  clamp(1.35rem, 1.20rem + 0.75vw, 1.85rem);
  --t-3:  clamp(1.75rem, 1.45rem + 1.50vw, 2.75rem);
  --t-4:  clamp(2.30rem, 1.70rem + 3.00vw, 4.20rem);
  --t-5:  clamp(2.90rem, 1.90rem + 5.00vw, 6.00rem);

  --gutter: clamp(1.15rem, 4vw, 3rem);
  --shell:  1240px;
  --band:   clamp(4rem, 9vw, 8.5rem);

  --ease: cubic-bezier(.22, .61, .36, 1);

  accent-color: var(--gold);
  scrollbar-color: var(--line) transparent;
}

/* Which palette is in effect. The explicit choice is last, so it wins. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { color-scheme: light; }
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* Where light-dark() is understood, every token becomes scheme-aware.
   Where it is not, the dark assignments above simply stand. */
@supports (color: light-dark(#000, #fff)) {
  :root {
    --ink-900:   light-dark(var(--l-ink-900),   var(--d-ink-900));
    --ink-800:   light-dark(var(--l-ink-800),   var(--d-ink-800));
    --ink-700:   light-dark(var(--l-ink-700),   var(--d-ink-700));
    --ink-600:   light-dark(var(--l-ink-600),   var(--d-ink-600));
    --ink-500:   light-dark(var(--l-ink-500),   var(--d-ink-500));
    --line:      light-dark(var(--l-line),      var(--d-line));
    --line-soft: light-dark(var(--l-line-soft), var(--d-line-soft));

    --cream:   light-dark(var(--l-cream),   var(--d-cream));
    --cream-2: light-dark(var(--l-cream-2), var(--d-cream-2));
    --cream-3: light-dark(var(--l-cream-3), var(--d-cream-3));

    --linen:       light-dark(var(--l-linen),       var(--d-linen));
    --linen-2:     light-dark(var(--l-linen-2),     var(--d-linen-2));
    --linen-ink:   light-dark(var(--l-linen-ink),   var(--d-linen-ink));
    --linen-ink-2: light-dark(var(--l-linen-ink-2), var(--d-linen-ink-2));
    --linen-line:  light-dark(var(--l-linen-line),  var(--d-linen-line));

    --gold:      light-dark(var(--l-gold),      var(--d-gold));
    --gold-lit:  light-dark(var(--l-gold-lit),  var(--d-gold-lit));
    --gold-deep: light-dark(var(--l-gold-deep), var(--d-gold-deep));

    --good: light-dark(var(--l-good), var(--d-good));
    --warn: light-dark(var(--l-warn), var(--d-warn));
    --bad:  light-dark(var(--l-bad),  var(--d-bad));

    --logo-plate: light-dark(var(--l-logo-plate), var(--d-logo-plate));
  }
}

/* `--scrim` and the shadows hold lists, not colours, so light-dark() cannot
   carry them. Two small blocks do instead. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --scrim: var(--l-scrim);
    --shadow: var(--l-shadow);
    --shadow-lift: var(--l-shadow-lift);
    --shadow-side: var(--l-shadow-side);
    --shadow-sheet: var(--l-shadow-sheet);
    --lift: .94;
  }
}
:root[data-theme="light"] {
  --scrim: var(--l-scrim);
  --shadow: var(--l-shadow);
  --shadow-lift: var(--l-shadow-lift);
  --shadow-side: var(--l-shadow-side);
  --shadow-sheet: var(--l-shadow-sheet);
  --lift: .94;
}
:root[data-theme="dark"] {
  --scrim: var(--d-scrim);
  --shadow: var(--d-shadow);
  --shadow-lift: var(--d-shadow-lift);
  --shadow-side: var(--d-shadow-side);
  --shadow-sheet: var(--d-shadow-sheet);
  --lift: 1.18;
}

/* ============================================================ reset */

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

  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

  body {
    margin: 0;
    background: var(--ink-800);
    color: var(--cream);
    font: 400 var(--t-0)/1.65 var(--sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  :where(h1, h2, h3, h4, p, figure, blockquote) { margin: 0; }
  :where(ul, ol):where(.plain) { margin: 0; padding: 0; list-style: none; }

  /* Any class that sets `display` would otherwise beat the UA's [hidden]. */
  [hidden] { display: none !important; }

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

  /* Icons carry a viewBox but no layout size of their own. Without a default
     they take the replaced-element fallback — 300px — wherever the container
     is wide enough to allow it. Sizing in em makes an icon match the text it
     sits beside; :where() keeps specificity at zero so any component that
     wants a specific size still wins. */
  :where(svg) {
    width: 1.2em;
    height: 1.2em;
    flex: none;
  }

  :where(button, input, select, textarea) { font: inherit; color: inherit; }
  button { cursor: pointer; }

  a { color: inherit; }

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

  ::selection { background: var(--gold); color: #14100A; }

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

/* ============================================================ base type */

@layer base {
  .display {
    font-family: var(--serif);
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }
  .display--xl { font-size: var(--t-5); }
  .display--lg { font-size: var(--t-4); }
  .display--md { font-size: var(--t-3); }
  .display--sm { font-size: var(--t-2); font-weight: 400; line-height: 1.15; }

  .lede {
    font-size: var(--t-1);
    line-height: 1.7;
    color: var(--cream-2);
    text-wrap: pretty;
  }

  .prose p { margin-block: 0 1em; color: var(--cream-2); text-wrap: pretty; }
  .prose p:last-child { margin-block-end: 0; }

  /* Small caps label. Used above every section heading. */
  .eyebrow {
    display: flex;
    align-items: center;
    gap: .7em;
    margin: 0 0 1.1rem;
    font-size: var(--t--1);
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .eyebrow::before {
    content: "";
    width: 2.2rem;
    height: 1px;
    background: var(--gold);
    opacity: .65;
  }
  .eyebrow--centred { justify-content: center; }
  .eyebrow--centred::after {
    content: "";
    width: 2.2rem;
    height: 1px;
    background: var(--gold);
    opacity: .65;
  }

  /* Prices and durations read better in the serif. */
  .numeral { font-family: var(--serif); font-weight: 500; letter-spacing: .01em; }
}

/* ============================================================ layout */

@layer layout {
  .shell {
    width: min(var(--shell), 100% - var(--gutter) * 2);
    margin-inline: auto;
  }
  .shell--narrow { width: min(760px, 100% - var(--gutter) * 2); }
  .shell--wide   { width: min(1500px, 100% - var(--gutter) * 2); }

  .band { padding-block: var(--band); }
  .band--tight { padding-block: calc(var(--band) * .6); }
  .band--alt   { background: var(--ink-700); }

  /* The light section. Everything inside flips to ink-on-linen. */
  .band--linen {
    background: var(--linen);
    color: var(--linen-ink);
  }
  .band--linen .lede,
  .band--linen .prose p { color: var(--linen-ink-2); }
  .band--linen .eyebrow { color: var(--gold-deep); }
  .band--linen .eyebrow::before,
  .band--linen .eyebrow::after { background: var(--gold-deep); }

  .stack > * + * { margin-block-start: var(--gap, 1rem); }

  .section-head { max-width: 62ch; margin-block-end: clamp(2rem, 5vw, 3.5rem); }
  .section-head--centred { margin-inline: auto; text-align: center; }

  .grid { display: grid; gap: var(--gap, clamp(1rem, 2.5vw, 1.8rem)); }
  .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
  .grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
  .grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }

  .split {
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  }
}

/* ============================================================ components */

@layer components {

  /* ---------------------------------------------------- gold hairline */

  .rule {
    height: 1px;
    border: 0;
    margin: 0;
    background: var(--gold-line);
    opacity: .5;
  }

  /* A lotus glyph sitting on a hairline — the section separator. */
  .flourish {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    color: var(--gold);
  }
  .flourish::before,
  .flourish::after {
    content: "";
    flex: 1 1 0;
    max-width: 7rem;
    height: 1px;
    background: currentColor;
    opacity: .45;
  }
  .flourish svg { width: 1.6rem; height: 1.6rem; opacity: .9; }

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

  .btn {
    --btn-bg: transparent;
    --btn-fg: var(--cream);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    min-height: 3rem;
    padding: .8em 1.6em;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: var(--t-0);
    font-weight: 500;
    letter-spacing: .015em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .25s var(--ease), border-color .25s var(--ease),
                transform .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease);
  }
  .btn svg { width: 1.15em; height: 1.15em; }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }

  .btn--gold {
    border-color: transparent;
    background: var(--gold-face);
    color: #17110A;
    font-weight: 600;
    box-shadow: 0 10px 26px -14px rgb(201 162 39 / .8);
  }
  .btn--gold:hover { box-shadow: 0 16px 34px -14px rgb(201 162 39 / .95); }

  .btn--outline { border-color: color-mix(in srgb, var(--gold) 55%, transparent); color: var(--gold-lit); }
  .btn--outline:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); border-color: var(--gold); }

  .btn--quiet { border-color: var(--line); color: var(--cream-2); }
  .btn--quiet:hover { border-color: var(--cream-3); color: var(--cream); }

  .btn--lg { min-height: 3.5rem; padding-inline: 2.1em; font-size: var(--t-1); }
  .btn--block { width: 100%; }
  .btn[disabled], .btn[aria-disabled="true"] {
    opacity: .4; pointer-events: none; transform: none;
  }

  .band--linen .btn--quiet { border-color: var(--linen-line); color: var(--linen-ink-2); }
  .band--linen .btn--quiet:hover { border-color: var(--linen-ink-2); color: var(--linen-ink); }
  .band--linen .btn--outline { color: var(--gold-deep); border-color: color-mix(in srgb, var(--gold-deep) 45%, transparent); }

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

  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--ink-900);
    isolation: isolate;
    border-block-end: 1px solid var(--line-soft);
    transition: background-color .3s var(--ease), border-color .3s var(--ease);
  }
  .site-header.is-stuck {
    border-block-end-color: var(--line);
    box-shadow: var(--shadow);
  }
  .site-header__inner {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    min-height: 4.6rem;
  }

  /* The logo is gold artwork on black. Screen blending erases that black on a
     dark ground; on paper there is nothing to erase, so the mark is given its
     own small black plate — which is how a gold foil logo is printed anyway. */
  .brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding: .4rem .65rem;
    border-radius: var(--r-sm);
    background: var(--logo-plate);
    text-decoration: none;
  }
  .brand img {
    height: clamp(2.6rem, 3.6vw, 3.3rem);
    width: auto;
    mix-blend-mode: screen;
  }

  .nav { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.9rem); margin-inline-start: auto; }
  .nav__links a {
    position: relative;
    padding-block: .4rem;
    font-size: var(--t--1);
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cream-2);
    text-decoration: none;
    transition: color .2s var(--ease);
  }
  .nav__links a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--ease);
  }
  .nav__links a:hover { color: var(--cream); }
  .nav__links a:hover::after,
  .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
  .nav__links a[aria-current="page"] { color: var(--gold-lit); }

  .nav__cta { margin-inline-start: .6rem; }

  /* ---------------------------------------------------- theme toggle */

  /* Hidden until the inline head script confirms JS — it cannot work without. */
  .theme-toggle { display: none; }
  .js .theme-toggle {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: none;
    color: var(--cream-2);
    cursor: pointer;
    transition: color .25s var(--ease), border-color .25s var(--ease),
                background-color .25s var(--ease), transform .3s var(--ease);
  }
  .theme-toggle:hover {
    color: var(--gold-lit);
    border-color: color-mix(in srgb, var(--gold) 55%, transparent);
    background: color-mix(in srgb, var(--gold) 10%, transparent);
    transform: rotate(-18deg);
  }
  .theme-toggle svg { width: 1.15rem; height: 1.15rem; }

  /* Show the scheme you would switch TO. Dark is the default, so a sun. */
  .theme-toggle .icon-moon { display: none; }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .theme-toggle .icon-sun  { display: none; }
    :root:not([data-theme="dark"]) .theme-toggle .icon-moon { display: block; }
  }
  :root[data-theme="light"] .theme-toggle .icon-sun  { display: none; }
  :root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
  :root[data-theme="dark"]  .theme-toggle .icon-sun  { display: block; }
  :root[data-theme="dark"]  .theme-toggle .icon-moon { display: none; }

  /* Below the nav breakpoint the links collapse into a details disclosure. */
  .nav-toggle { display: none; }

  @media (max-width: 62rem) {
    .nav__links {
      display: none;
      position: absolute;
      inset-inline: 0;
      top: 100%;
      flex-direction: column;
      gap: 0;
      padding: .5rem var(--gutter) 1.5rem;
      background: var(--ink-900);
      border-block-end: 1px solid var(--line);
    }
    .nav__links a { padding-block: .95rem; font-size: var(--t-0); border-block-end: 1px solid var(--line-soft); }
    .nav__links a::after { display: none; }
    .site-header:has(.nav-toggle:checked) .nav__links { display: flex; }

    .nav-toggle-label {
      display: grid;
      place-items: center;
      width: 2.75rem; height: 2.75rem;
      margin-inline-start: auto;
      border: 1px solid var(--line);
      border-radius: var(--r-sm);
      cursor: pointer;
    }
    .nav-toggle-label span,
    .nav-toggle-label span::before,
    .nav-toggle-label span::after {
      content: "";
      display: block;
      width: 17px; height: 1.5px;
      background: var(--cream);
      transition: transform .3s var(--ease), opacity .2s var(--ease);
    }
    .nav-toggle-label span::before { transform: translateY(-5.5px); }
    .nav-toggle-label span::after  { transform: translateY(4px); }
    .site-header:has(.nav-toggle:checked) .nav-toggle-label span { background: transparent; }
    .site-header:has(.nav-toggle:checked) .nav-toggle-label span::before { transform: rotate(45deg); }
    .site-header:has(.nav-toggle:checked) .nav-toggle-label span::after  { transform: rotate(-45deg); }
  }
  @media (min-width: 62.001rem) {
    .nav-toggle-label { display: none; }
    .nav__links { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.9rem); }
  }

  /* ---------------------------------------------------- hero */

  .hero {
    position: relative;
    display: grid;
    align-items: end;
    min-height: min(92svh, 60rem);
    padding-block: clamp(5rem, 14vh, 9rem) clamp(2rem, 5vh, 4rem);
    isolation: isolate;
    overflow: hidden;
  }
  .hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
  }
  .hero__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    /* No brightness here — the scrim below does all the work, so the same
       treatment reads correctly whichever palette is in effect. */
    filter: saturate(.8) contrast(1.03);
  }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      /* keeps the headline column readable whatever the photograph does */
      linear-gradient(105deg,
        rgb(var(--scrim) / .96) 0%, rgb(var(--scrim) / .9) 34%,
        rgb(var(--scrim) / .5) 68%, rgb(var(--scrim) / .72) 100%),
      linear-gradient(to top, var(--ink-800) 1%, rgb(var(--scrim) / .6) 26%, transparent 62%),
      radial-gradient(140% 120% at 55% 45%, transparent 52%, rgb(var(--scrim) / .55) 100%);
  }

  .hero__ornament {
    width: clamp(2.6rem, 5vw, 3.6rem);
    height: auto;
    margin-block-end: clamp(1.4rem, 3vw, 2.2rem);
    color: var(--gold);
  }
  .hero__eyebrow {
    margin-block-end: 1.2rem;
    font-size: var(--t--1);
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .hero__title { max-width: 15ch; }
  .hero__title em {
    display: block;
    font-style: italic;
    color: var(--gold-lit);
  }
  .hero__lede { max-width: 46ch; margin-block-start: 1.4rem; }
  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-block-start: clamp(1.8rem, 4vw, 2.6rem);
  }

  /* The plaque along the bottom of the hero: hours, address, phone. */
  .plaque {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 1px;
    margin-block-start: clamp(2.5rem, 6vw, 4.5rem);
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
  }
  .plaque > * {
    padding: 1.15rem 1.35rem;
    background: color-mix(in srgb, var(--ink-900) 95%, transparent);
    backdrop-filter: blur(10px);
  }
  .plaque dt {
    font-size: var(--t--1);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .plaque dd { margin: .4rem 0 0; font-size: var(--t-0); color: var(--cream); }
  .plaque a { text-decoration: none; }
  .plaque a:hover { color: var(--gold-lit); }

  .open-dot {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    font-size: var(--t--1);
    color: var(--good);
  }
  .open-dot::before {
    content: "";
    width: .5em; height: .5em;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
  }
  .open-dot[data-open="0"] { color: var(--cream-3); }

  /* ---------------------------------------------------- service card */

  .card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--ink-600);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  }
  .card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--accent, var(--gold)) 45%, var(--line));
    box-shadow: var(--shadow-lift);
  }

  /* The colour the client assigned this treatment, as a top edge. */
  .card::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    height: 3px;
    z-index: 2;
    background: linear-gradient(90deg, var(--accent, var(--gold)), transparent 85%);
  }

  .card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }
  .card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease), filter .5s var(--ease);
  }
  .card:hover .card__media img { transform: scale(1.05); }
  .card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to top, var(--ink-600), transparent 55%),
      linear-gradient(to top right, color-mix(in srgb, var(--accent, var(--gold)) 30%, transparent), transparent 65%);
    opacity: .9;
    transition: opacity .4s var(--ease);
  }
  .card:hover .card__media::after { opacity: .7; }

  .card__body { display: flex; flex-direction: column; flex: 1; padding: 1.35rem 1.4rem 1.5rem; }
  .card__title { font-family: var(--serif); font-size: var(--t-2); font-weight: 500; line-height: 1.15; }
  .card__tagline { margin-block-start: .45rem; font-size: var(--t--1); color: var(--cream-3); text-wrap: pretty; }
  .card__text { margin-block-start: .8rem; font-size: var(--t-0); color: var(--cream-2); text-wrap: pretty; }

  .card__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-block-start: auto;
    padding-block-start: 1.15rem;
  }
  .card__price { font-family: var(--serif); font-size: var(--t-2); color: var(--cream); }
  .card__price small { font-family: var(--sans); font-size: var(--t--1); color: var(--cream-3); }
  .card__more {
    font-size: var(--t--1);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    white-space: nowrap;
  }
  .card__more::after { content: " \2192"; transition: margin-inline-start .25s var(--ease); display: inline-block; }
  .card:hover .card__more::after { margin-inline-start: .25em; }

  /* Whole card is the link target without nesting interactive elements. */
  .card__link::after { content: ""; position: absolute; inset: 0; z-index: 3; }

  /* Duration chips */
  .durations { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-start: 1rem; }
  .duration-chip {
    display: inline-flex;
    align-items: baseline;
    gap: .4em;
    padding: .35em .8em;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-size: var(--t--1);
    color: var(--cream-2);
    white-space: nowrap;
  }
  .duration-chip b { font-family: var(--serif); font-size: var(--t-0); font-weight: 500; color: var(--cream); }

  .band--linen .card { background: #fff; border-color: var(--linen-line); }
  .band--linen .card__title { color: var(--linen-ink); }
  .band--linen .card__text  { color: var(--linen-ink-2); }
  .band--linen .card__tagline { color: var(--linen-ink-2); }
  .band--linen .card__price { color: var(--linen-ink); }
  .band--linen .card__price small { color: var(--linen-ink-2); }
  .band--linen .card__media::after {
    background:
      linear-gradient(to top, #fff, transparent 42%),
      linear-gradient(to top right, color-mix(in srgb, var(--accent, var(--gold)) 22%, transparent), transparent 65%);
  }
  .band--linen .duration-chip { border-color: var(--linen-line); color: var(--linen-ink-2); }
  /* On the linen island the foreground inverts, so the chip must blend
     toward ink rather than toward cream. */
  .band--linen .pill { color: color-mix(in srgb, var(--accent, var(--gold)) 35%, var(--linen-ink)); }
  .band--linen .duration-chip b { color: var(--linen-ink); }
  .band--linen .card__more { color: var(--gold-deep); }

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

  .gallery {
    display: grid;
    gap: clamp(.6rem, 1.4vw, 1rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    grid-auto-rows: clamp(9rem, 17vw, 14rem);
  }
  .gallery figure {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-sm);
    background: var(--ink-600);
  }
  .gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
  .gallery figure:hover img { transform: scale(1.06); }
  /* A caption sits on a photograph, not on the page. Light text over a dark
     wash is legible whatever the photograph does, so this one component keeps
     its treatment in both schemes rather than following the palette. */
  .gallery figcaption {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    padding: 1.8rem .9rem .75rem;
    font-size: var(--t--1);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #F6F2EA;
    text-shadow: 0 1px 3px rgb(0 0 0 / .5);
    background: linear-gradient(to top, rgb(8 8 7 / .88) 0%, rgb(8 8 7 / .6) 45%, transparent 100%);
  }
  .gallery .tall { grid-row: span 2; }
  .gallery .wide { grid-column: span 2; }
  @media (max-width: 40rem) { .gallery .wide { grid-column: span 1; } }

  /* ---------------------------------------------------- therapist */

  .person { text-align: center; }
  .person__photo {
    position: relative;
    width: clamp(7rem, 14vw, 9.5rem);
    aspect-ratio: 1;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ink-500);
    border: 1px solid var(--line);
  }
  .person__photo img { width: 100%; height: 100%; object-fit: cover; }
  /* Falls back to a gold monogram when there is no photograph yet. */
  .person__initial {
    display: grid;
    place-items: center;
    width: 100%; height: 100%;
    font-family: var(--serif);
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    background: var(--gold-face);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
  .person__name { font-family: var(--serif); font-size: var(--t-2); font-weight: 500; }
  .person__role {
    margin-block-start: .2rem;
    font-size: var(--t--1);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .person__hours { margin-block-start: .55rem; font-size: var(--t--1); color: var(--cream-3); }
  .person__bio  { margin-block-start: .8rem; font-size: var(--t-0); color: var(--cream-2); text-wrap: pretty; }
  .band--linen .person__bio { color: var(--linen-ink-2); }
  .band--linen .person__role { color: var(--gold-deep); }
  .band--linen .person__photo { background: var(--linen-2); border-color: var(--linen-line); }

  /* ---------------------------------------------------- reviews */

  .quote {
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 3vw, 2.2rem);
    background: var(--ink-600);
    border: 1px solid var(--line);
    border-radius: var(--r);
  }
  .quote__stars { display: flex; gap: .18rem; color: var(--gold); margin-block-end: .9rem; }
  .quote__stars svg { width: 1rem; height: 1rem; }
  .quote__body {
    font-family: var(--serif);
    font-size: var(--t-1);
    font-style: italic;
    line-height: 1.55;
    color: var(--cream);
    text-wrap: pretty;
  }
  .quote__by { margin-block-start: auto; padding-block-start: 1.2rem; font-size: var(--t--1); color: var(--cream-3); }
  .quote__by b { display: block; font-weight: 500; color: var(--cream-2); letter-spacing: .05em; }

  /* Shown until the owner has added real reviews. Never fake ones. */
  .quote--empty {
    align-items: center;
    justify-content: center;
    text-align: center;
    border-style: dashed;
    color: var(--cream-3);
  }

  /* ---------------------------------------------------- forms */

  .field { display: block; margin-block-end: 1.1rem; }
  .field > label,
  .field-label {
    display: block;
    margin-block-end: .45rem;
    font-size: var(--t--1);
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cream-3);
  }
  .field .hint { display: block; margin-block-end: .45rem; font-size: var(--t--1); color: var(--cream-3); }

  .input {
    width: 100%;
    min-height: 3.1rem;
    padding: .75rem 1rem;
    background: var(--ink-800);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--cream);
    transition: border-color .2s var(--ease), background-color .2s var(--ease);
  }
  .input::placeholder { color: color-mix(in srgb, var(--cream-3) 70%, transparent); }
  .input:hover { border-color: var(--cream-3); }
  .input:focus { border-color: var(--gold); background: var(--ink-700); }
  textarea.input { min-height: 6.5rem; resize: vertical; }

  /* Only flag a field once the visitor has actually left it. */
  .input:user-invalid { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, var(--ink-800)); }
  .input:user-valid   { border-color: color-mix(in srgb, var(--good) 55%, var(--line)); }

  .field-error { display: none; margin-block-start: .4rem; font-size: var(--t--1); color: var(--bad); }
  .input:user-invalid ~ .field-error { display: flex; align-items: center; gap: .4em; }

  .checkbox { display: flex; align-items: flex-start; gap: .7rem; cursor: pointer; }
  .checkbox input {
    flex: 0 0 auto;
    width: 1.2rem; height: 1.2rem;
    margin-block-start: .18rem;
    accent-color: var(--gold);
  }

  /* ---------------------------------------------------- notices */

  .notice {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .95rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: var(--t-0);
    background: var(--ink-600);
  }
  .notice > svg { width: 1.25rem; height: 1.25rem; margin-block-start: .1rem; }
  .notice--ok  { border-color: color-mix(in srgb, var(--good) 45%, transparent); background: color-mix(in srgb, var(--good) 12%, var(--ink-700)); }
  .notice--bad { border-color: color-mix(in srgb, var(--bad) 45%, transparent);  background: color-mix(in srgb, var(--bad) 12%, var(--ink-700)); }
  .notice--warn{ border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 10%, var(--ink-700)); }

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

  .site-footer {
    background: var(--ink-900);
    border-block-start: 1px solid var(--line-soft);
    padding-block: clamp(3rem, 7vw, 5rem) 2rem;
  }
  .site-footer__grid {
    display: grid;
    gap: clamp(2rem, 5vw, 3.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  }
  .site-footer h3 {
    margin-block-end: 1rem;
    font-size: var(--t--1);
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .site-footer a { color: var(--cream-2); text-decoration: none; transition: color .2s var(--ease); }
  .site-footer a:hover { color: var(--gold-lit); }
  .site-footer li + li { margin-block-start: .55rem; }
  /* The plate goes on the wrapper: an element cannot screen against its own
     background, only against what is painted behind it. */
  .logo-plate {
    display: inline-block;
    padding: .4rem .65rem;
    border-radius: var(--r-sm);
    background: var(--logo-plate);
  }
  .site-footer__mark { height: 3.4rem; width: auto; mix-blend-mode: screen; }
  .site-footer .logo-plate { margin-block-end: 1.2rem; }

  .hours-list { font-size: var(--t-0); color: var(--cream-2); }
  .hours-list div { display: flex; justify-content: space-between; gap: 1.5rem; padding-block: .3rem; }
  .hours-list div + div { border-block-start: 1px solid var(--line-soft); }
  .hours-list [data-today] { color: var(--gold-lit); }

  .colophon {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin-block-start: clamp(2.5rem, 6vw, 4rem);
    padding-block-start: 1.6rem;
    border-block-start: 1px solid var(--line-soft);
    font-size: var(--t--1);
    color: var(--cream-3);
  }

  /* ---------------------------------------------------- quick actions */

  /* The row of round actions the client sketched, lifted from a Google
     Business listing. On a phone it sticks to the bottom of the screen. */
  .quickbar {
    position: sticky;
    inset-block-end: 0;
    z-index: 40;
    display: none;
    background: color-mix(in srgb, var(--ink-900) 94%, transparent);
    backdrop-filter: blur(16px);
    border-block-start: 1px solid var(--line);
    padding: .5rem var(--gutter) max(.5rem, env(safe-area-inset-bottom));
  }
  .quickbar ul { display: flex; justify-content: space-around; gap: .3rem; }
  .quickbar a {
    display: grid;
    justify-items: center;
    gap: .25rem;
    min-width: 3.6rem;
    padding: .45rem .3rem;
    border-radius: var(--r-sm);
    font-size: .68rem;
    letter-spacing: .05em;
    color: var(--cream-2);
    text-decoration: none;
  }
  .quickbar a svg { width: 1.35rem; height: 1.35rem; }
  .quickbar a:hover, .quickbar a:focus-visible { color: var(--gold-lit); }
  .quickbar .is-primary { color: var(--gold); }

  @media (max-width: 52rem) { .quickbar { display: block; } }

  /* Round action buttons, the desktop form of the same idea. */
  .actions-row { display: flex; flex-wrap: wrap; gap: clamp(1rem, 3vw, 2.2rem); }
  .action {
    display: grid;
    justify-items: center;
    gap: .6rem;
    padding: 0;
    border: 0;
    background: none;          /* it is a <button> half the time */
    font: inherit;
    text-decoration: none;
    color: var(--cream-2);
    font-size: var(--t--1);
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: color .25s var(--ease);
  }
  .action i {
    display: grid;
    place-items: center;
    width: 3.4rem; height: 3.4rem;
    border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
    border-radius: 50%;
    color: var(--gold);
    transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
  }
  .action i svg { width: 1.35rem; height: 1.35rem; }
  .action:hover { color: var(--cream); }
  .action:hover i {
    background: color-mix(in srgb, var(--gold) 14%, transparent);
    border-color: var(--gold);
    transform: translateY(-3px);
  }
  .band--linen .action { color: var(--linen-ink-2); }
  .band--linen .action i { color: var(--gold-deep); border-color: color-mix(in srgb, var(--gold-deep) 35%, transparent); }
  .band--linen .action:hover { color: var(--linen-ink); }

  /* ---------------------------------------------------- misc */

  .map-frame {
    aspect-ratio: 16 / 10;
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    background: var(--ink-600);
  }
  .map-frame iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.28) contrast(1.03); }

  .pill {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .3em .8em;
    border-radius: var(--r-pill);
    font-size: var(--t--1);
    font-weight: 500;
    letter-spacing: .06em;
    background: color-mix(in srgb, var(--accent, var(--gold)) 16%, transparent);
    color: color-mix(in srgb, var(--accent, var(--gold)) 35%, var(--cream));
    border: 1px solid color-mix(in srgb, var(--accent, var(--gold)) 40%, transparent);
  }
}

/* ============================================================ utilities */

@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .centre { text-align: center; }
  .muted  { color: var(--cream-3); }
  /* Inside the linen island the foreground is inverted, so the generic muted
     tone has to come from the linen scale or it lands at 3.6:1 on white. */
  .band--linen .muted { color: var(--linen-ink-2); }
  .gold   { color: var(--gold-lit); }
  .gold-text {
    background: var(--gold-face);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
  .mt-0 { margin-block-start: 0; }
  .mt-1 { margin-block-start: .6rem; }
  .mt-2 { margin-block-start: 1.2rem; }
  .mt-3 { margin-block-start: 2rem; }
  .mt-4 { margin-block-start: 3rem; }
  .flow > * + * { margin-block-start: 1.1rem; }
  .nowrap { white-space: nowrap; }

  /* Entrance on scroll. The hidden state is applied only once the inline
     head script has confirmed JS runs — if a script fails to load, the page
     is simply visible rather than blank. */
  .js .reveal { opacity: 0; transform: translateY(18px); }
  .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity .8s var(--ease), transform .8s var(--ease);
    transition-delay: var(--delay, 0ms);
  }
  @media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; }
  }
}

/* ============================================================ price list */

@layer components {
  .pricelist {
    border: 1px solid var(--linen-line);
    border-radius: var(--r);
    overflow: hidden;
    background: #fff;
  }
  .pricelist__row {
    display: grid;
    grid-template-columns: minmax(11rem, 1fr) auto auto;
    align-items: center;
    gap: clamp(.8rem, 2vw, 2rem);
    padding: 1rem 1.2rem 1rem 1.5rem;
    border-inline-start: 3px solid var(--accent, var(--gold));
    transition: background-color .2s var(--ease);
  }
  .pricelist__row + .pricelist__row { border-block-start: 1px solid var(--linen-line); }
  .pricelist__row:hover { background: var(--linen); }

  .pricelist__name {
    font-family: var(--serif);
    font-size: var(--t-1);
    font-weight: 500;
    color: var(--linen-ink);
    text-decoration: none;
  }
  .pricelist__name:hover { color: var(--gold-deep); }

  .pricelist__prices { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; justify-content: flex-end; }
  .pricelist__price {
    display: inline-flex;
    align-items: baseline;
    gap: .4em;
    font-size: var(--t--1);
    color: var(--linen-ink-2);
    white-space: nowrap;
  }
  .pricelist__price b { font-size: var(--t-1); color: var(--linen-ink); }
  .pricelist__price em { font-style: normal; font-size: .75em; opacity: .75; }
  .pricelist__book { min-height: 2.5rem; padding-inline: 1.2em; font-size: var(--t--1); }

  @media (max-width: 46rem) {
    .pricelist__row { grid-template-columns: 1fr auto; row-gap: .6rem; }
    .pricelist__prices { grid-column: 1 / -1; justify-content: flex-start; }
    .pricelist__book { grid-row: 1; grid-column: 2; }
  }

  /* ------------------------------------------------ service detail */

  .service-hero {
    position: relative;
    display: grid;
    align-items: end;
    min-height: min(58svh, 34rem);
    padding-block: 6rem 3rem;
    isolation: isolate;
    overflow: hidden;
  }
  .service-hero__media { position: absolute; inset: 0; z-index: -2; }
  .service-hero__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: saturate(.8) contrast(1.03);
  }
  .service-hero::after {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background:
      linear-gradient(100deg,
        rgb(var(--scrim) / .95) 0%, rgb(var(--scrim) / .85) 40%, rgb(var(--scrim) / .4) 100%),
      linear-gradient(to top, var(--ink-800), transparent 58%),
      linear-gradient(to top right, color-mix(in srgb, var(--accent, var(--gold)) 22%, transparent), transparent 60%);
  }

  .price-table { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
  .price-table__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.3rem;
    background: var(--ink-600);
  }
  .price-table__row + .price-table__row { border-block-start: 1px solid var(--line); }
  .price-table__row b { font-family: var(--serif); font-size: var(--t-2); font-weight: 500; }
  .price-table__row span { color: var(--cream-2); }
  .price-table__row em { font-style: normal; font-size: var(--t--1); color: var(--gold); margin-inline-start: .5em; }

  .benefits { display: grid; gap: .85rem; }
  .benefits li { display: flex; gap: .8rem; align-items: flex-start; color: var(--cream-2); }
  .benefits svg { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-block-start: .3rem; color: var(--accent, var(--gold)); }
  .band--linen .benefits li { color: var(--linen-ink-2); }
}

/* ============================================================ dialog */

@layer components {
  .sheet {
    width: min(30rem, calc(100vw - 2rem));
    padding: 1.6rem 1.7rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--ink-600);
    color: var(--cream);
  }
  .sheet::backdrop {
    /* A dimmed backdrop reads as "behind" in both schemes. */
    background: rgb(10 9 8 / .6);
    backdrop-filter: blur(6px);
  }
  .sheet__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    justify-content: flex-end;
    margin-block-start: 1.6rem;
  }

  /* Both the dialog and its backdrop animate in and out of the top layer. */
  .sheet, .sheet::backdrop { transition: opacity .25s var(--ease), display .25s allow-discrete, overlay .25s allow-discrete; opacity: 0; }
  .sheet[open], .sheet[open]::backdrop { opacity: 1; }
  @starting-style {
    .sheet[open], .sheet[open]::backdrop { opacity: 0; }
  }
  .sheet[open] { animation: sheet-in .3s var(--ease); }
  @keyframes sheet-in { from { transform: translateY(14px) scale(.985); } to { transform: none; } }

  @media (prefers-reduced-motion: reduce) {
    .sheet, .sheet::backdrop { transition: none; }
    .sheet[open] { animation: none; }
  }
}