/* LT UK, direction C: the persimmon cord. One stylesheet for every page. */

@font-face { font-family: "Zen Maru Gothic"; src: url("/2026-10-21-round-3-d-fix/_assets/previews/c/round2/_assets/fonts/zen-500.2c5953da61.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Zen Maru Gothic"; src: url("/2026-10-21-round-3-d-fix/_assets/previews/c/round2/_assets/fonts/zen-700.9d65f92a3e.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; src: url("/2026-10-21-round-3-d-fix/_assets/previews/c/round2/_assets/fonts/hanken-var.e9201eddf1.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; src: url("/2026-10-21-round-3-d-fix/_assets/previews/c/round2/_assets/fonts/cormorant-var.d80df8ff5a.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- tokens (contrast worked out in the README) ---------- */
:root {
  color-scheme: light;
  --ground: #fbfaf8;
  --ground-2: #f2f0ec;
  --ink: #1f1c1a;
  --ink-2: #5a5652;
  --hair: #dcd6ce;
  --edge: #8e8780;
  --cord: #d4561a;
  --btn: #b3410f;
  --btn-hover: #983609;
  --btn-ink: #ffffff;
  --indigo: #2c3a63;
  --focus: #2c3a63;
  --panel: rgba(251, 250, 248, 0.95);
  /* the pills are solid paper: whatever passes under them never shows through their words or controls */
  --pill: #fcf4ee;
  --pill-edge: rgba(179, 65, 15, 0.22);
  --hover: rgba(212, 86, 26, 0.1);
  --current: rgba(44, 58, 99, 0.1);
  --disc: #ffffff;
  --shade: rgba(251, 250, 248, 0.9);
  --seal-rim: #2c3a63;
  --shadow: 0 18px 40px -22px rgba(31, 28, 26, 0.35);
  --photo-filter: none;
  --gut: 20px;
  --nav-top: 0px;
  --ease: cubic-bezier(0.22, 0.7, 0.2, 1);
  --pull: cubic-bezier(0.65, 0, 0.25, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #131a2c;
    --ground-2: #1f2944;
    --ink: #f2ece2;
    --ink-2: #bdb5aa;
    --hair: #2e3856;
    --edge: #7a8199;
    --cord: #ff914d;
    --btn: #ff914d;
    --btn-hover: #ffa86f;
    --btn-ink: #131a2c;
    --indigo: #aeb9dc;
    --focus: #ffd1ad;
    --panel: rgba(19, 26, 44, 0.93);
    --pill: #1e2030;
    --pill-edge: rgba(255, 145, 77, 0.3);
    --hover: rgba(255, 145, 77, 0.14);
    --current: rgba(174, 185, 220, 0.16);
    --shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.7);
    --photo-filter: brightness(0.86) saturate(0.95);
    --seal-rim: #0b101d;
    --disc: transparent;
    --shade: rgba(19, 26, 44, 0.9);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #131a2c;
  --ground-2: #1f2944;
  --ink: #f2ece2;
  --ink-2: #bdb5aa;
  --hair: #2e3856;
  --edge: #7a8199;
  --cord: #ff914d;
  --btn: #ff914d;
  --btn-hover: #ffa86f;
  --btn-ink: #131a2c;
  --indigo: #aeb9dc;
  --focus: #ffd1ad;
  --panel: rgba(19, 26, 44, 0.93);
  --pill: #1e2030;
  --pill-edge: rgba(255, 145, 77, 0.3);
  --hover: rgba(255, 145, 77, 0.14);
  --current: rgba(174, 185, 220, 0.16);
  --shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.7);
  --photo-filter: brightness(0.86) saturate(0.95);
  --seal-rim: #0b101d;
  --disc: transparent;
    --shade: rgba(19, 26, 44, 0.9);
}
@media (min-width: 768px) { :root { --gut: 32px; --nav-top: 84px; } }
/* on phones the pill sits at the bottom: keep focused and scrolled-to things above it */
@media (max-width: 767px) { html { scroll-padding-bottom: 96px; } }
@media (min-width: 1280px) { :root { --gut: 48px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-padding-top: var(--nav-top);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--ground);
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
  overflow-x: clip;
}
@media (min-width: 768px) { body { font-size: 1.125rem; } }
img, svg { display: block; max-width: 100%; }
picture { display: contents; }
h1, h2, h3 {
  font-family: "Zen Maru Gothic", "Hanken Grotesk", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.005em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h2 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }
p { margin: 0 0 1em; max-width: 64ch; text-wrap: pretty; }
a { color: var(--ink); text-decoration-color: var(--cord); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
ul, ol { margin: 0; padding: 0; }
[role="list"], .plain { list-style: none; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: min(100% - 2 * var(--gut), 1240px); margin-inline: auto; }
.section { position: relative; padding-block: clamp(72px, 10vh, 140px); }
.section--alt { background: var(--ground-2); }

.label {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--indigo);
  margin: 0 0 1rem;
}
.lede { font-size: 1.125rem; color: var(--ink); }
@media (min-width: 768px) { .lede { font-size: 1.25rem; } }
.muted, .small { color: var(--ink-2); }
.small { font-size: 0.9375rem; }
.num, .her, .her-line, .her-name, .label, .ex-for, .months b, .foot-tag, .step-n {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
.num {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  line-height: 1;
  letter-spacing: 0.01em;
}
.her { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; letter-spacing: 0.04em; white-space: pre-wrap; }

/* ---------- skip link ---------- */
.skip {
  position: fixed; z-index: 100; left: 12px; top: -120px;
  padding: 12px 18px; border-radius: 999px;
  background: var(--btn); color: var(--btn-ink); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 52px; padding: 0 1.4em; border-radius: 999px;
  font: 600 1.0625rem/1.2 "Hanken Grotesk", system-ui, sans-serif;
  text-decoration: none; text-align: center;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.btn-fill { background: var(--btn); color: var(--btn-ink); box-shadow: 0 10px 24px -14px rgba(179, 65, 15, 0.9); }
.btn-fill:hover { background: var(--btn-hover); }
.btn-fill:active { box-shadow: none; filter: brightness(0.95); }
.btn-quiet { color: var(--ink); border: 1.5px solid var(--edge); background: transparent; }
.btn-quiet:hover { background: var(--hover); border-color: var(--ink-2); }
.btn-quiet:active { background: var(--current); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6rem; }
.go {
  display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px;
  font-weight: 600; text-decoration-line: underline;
}
.go::after { content: ""; width: 1.4em; height: 2px; background: var(--cord); border-radius: 2px; transition: width 0.25s var(--ease); }
.go:hover::after { width: 2em; }
/* a quick scroll: whatever arrives while the page is moving fast settles sooner */
[data-reveal].is-in.quick { transition-duration: 0.35s, 0.4s; }
.leaves { display: block; font-size: 0.9375rem; color: var(--ink-2); margin-top: 0.6rem; }

/* ---------- the seal ---------- */
.seal-disc {
  display: grid; place-items: center; border-radius: 50%;
  background: var(--disc); aspect-ratio: 1;
}
.seal-disc { box-shadow: 0 0 0 1px var(--hair); }
/* the whole square seal sits inside the circle (side = diameter / root 2): nothing is cropped */
.seal-disc img { width: 70.71%; height: auto; }
/* the picture that chooses her seal's file by theme takes no box of its own, so the image keeps its place in the disc */
.seal-disc picture { display: contents; }

/* ---------- navigation pill ---------- */
.nav-pill {
  position: fixed; z-index: 60;
  left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px;
  padding: 4px; border-radius: 999px;
  background: var(--pill);
  border: 1px solid var(--pill-edge);
  box-shadow: var(--shadow);
  max-width: calc(100vw - 16px);
}
.nav-pill a, .nav-pill button, .pill-call {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding: 0 12px;
  border: 0; border-radius: 999px; background: transparent;
  font: 500 0.9375rem/1 "Hanken Grotesk", system-ui, sans-serif;
  color: var(--ink); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.2s;
}
.nav-pill a:hover, .nav-pill button:hover { background: var(--hover); }
.nav-pill a:active, .nav-pill button:active { background: var(--current); }
.nav-pill a[aria-current="page"] { background: var(--current); font-weight: 600; }
.nav-pill .pill-home { padding: 0 4px; gap: 8px; }
/* the navigation's mark is the simple LT (brand/lt-monogram.svg, LT-20261020-02), shown as a mask so it takes the text colour */
.pill-mark { display: block; width: 30px; height: 36px; margin: 0 4px 0 8px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjE0NS4yIDEyOS4wIDEyNC4wIDE0OC4zIiByb2xlPSJpbWciIGFyaWEtbGFiZWw9IkxUIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTE1OC4zNSAyNzMuMjRDMTU4Ljg0IDI3My4wNiAxNjAuMTMgMjcyLjkzIDE2Mi4yOSAyNzIuODNDMTY0LjA2IDI3Mi43NCAxNjUuOTIgMjcyLjU3IDE2Ni40NSAyNzIuNDNDMTY2Ljk4IDI3Mi4yOSAxNjguMDggMjcyLjEwIDE2OC45MCAyNzIuMDBDMTY5LjcxIDI3MS45MCAxNzAuODAgMjcxLjY0IDE3MS4zMSAyNzEuNDNDMTcxLjgzIDI3MS4yMSAxNzIuNTEgMjcwLjk4IDE3Mi44MyAyNzAuOTJDMTczLjE1IDI3MC44NSAxNzMuNzEgMjcwLjY1IDE3NC4wNiAyNzAuNDZDMTc0LjQyIDI3MC4yOCAxNzUuMTIgMjcwLjAzIDE3NS42MSAyNjkuOTBDMTc2LjEwIDI2OS43NyAxNzYuNjkgMjY5LjU1IDE3Ni45MCAyNjkuNDFDMTc3LjEyIDI2OS4yNyAxNzcuODEgMjY5LjA3IDE3OC40NCAyNjguOThDMTc5LjA3IDI2OC44OSAxNzkuOTYgMjY4LjY5IDE4MC40MiAyNjguNTNDMTgxLjQ2IDI2OC4xOCAxODYuNDIgMjY4LjE0IDE4OC44MyAyNjguNDZDMTg5LjcwIDI2OC41OCAxOTIuMTQgMjY4LjcyIDE5NC4yNSAyNjguNzdDMTk3Ljg3IDI2OC44NyAxOTguMTcgMjY4Ljg1IDE5OS41OCAyNjguNTBDMjAwLjg5IDI2OC4xNyAyMDEuNzAgMjY4LjEwIDIwNi4wMCAyNjcuOTlDMjA4LjcwIDI2Ny45MyAyMTAuOTQgMjY3Ljg2IDIxMC45NyAyNjcuODVDMjEwLjk5IDI2Ny44NCAyMTEuMzggMjY3LjQ5IDIxMS44MyAyNjcuMDdDMjEyLjc1IDI2Ni4yMSAyMTMuMzIgMjY0LjkyIDIxMy4wMiAyNjQuMzhDMjEyLjg3IDI2NC4xMCAyMTEuOTggMjY0LjA4IDE5NS40NyAyNjQuMDhDMTc2LjI1IDI2NC4wOCAxNzcuODQgMjY0LjE3IDE3Ni41NiAyNjMuMDVDMTc1LjM4IDI2Mi4wMiAxNzUuMTMgMjU5LjM1IDE3NS41MSAyNTIuMTdDMTc1LjU5IDI1MC41NiAxNzUuNzQgMjQyLjAxIDE3NS44MiAyMzMuMTdDMTc1Ljk4IDIxNy4yOSAxNzYuMDkgMjE0LjI3IDE3Ni42MiAyMTEuMTdDMTc2LjgzIDIwOS44OCAxNzYuOTAgMjA3Ljc4IDE3Ni45NSAyMDAuMDBDMTc3LjAzIDE4OS42NyAxNzYuODYgMTgzLjg1IDE3Ni4zNSAxNzkuMDdDMTc2LjE3IDE3Ny40MyAxNzUuOTUgMTc0LjgxIDE3NS44NSAxNzMuMjVDMTc1Ljc1IDE3MS42OSAxNzUuNTYgMTY5LjkzIDE3NS40MiAxNjkuMzNDMTc1LjI5IDE2OC43NCAxNzUuMTAgMTY3LjI4IDE3NS4wMCAxNjYuMDhDMTc0Ljg5IDE2NC44OSAxNzQuNjcgMTYzLjM1IDE3NC40OSAxNjIuNjVDMTc0LjMxIDE2MS45NSAxNzQuMDkgMTYwLjQ1IDE3NC4wMCAxNTkuMzFDMTczLjkwIDE1OC4xOCAxNzMuNjggMTU2LjM5IDE3My41MCAxNTUuMzNDMTczLjMyIDE1NC4yOCAxNzMuMTAgMTUyLjU1IDE3My4wMCAxNTEuNTBDMTcyLjg3IDE1MC4xNCAxNzIuNzEgMTQ5LjM0IDE3Mi40MyAxNDguNzNDMTcyLjIxIDE0OC4yNiAxNzEuOTggMTQ3LjU2IDE3MS45MiAxNDcuMTlDMTcxLjg2IDE0Ni44MSAxNzEuNjIgMTQ2LjI0IDE3MS40MCAxNDUuOTFDMTcxLjE4IDE0NS41OSAxNzEuMDAgMTQ1LjI2IDE3MS4wMCAxNDUuMTlDMTcxLjAwIDE0NC42NyAxNjguNzkgMTQyLjAwIDE2Ny4yOSAxNDAuNzBDMTY2LjY5IDE0MC4xOCAxNjQuOTUgMTM5LjAwIDE2NC43OCAxMzkuMDBDMTY0LjcxIDEzOS4wMCAxNjQuNDEgMTM4LjgyIDE2NC4xMSAxMzguNjBDMTYzLjgyIDEzOC4zOCAxNjMuNDAgMTM4LjE1IDE2My4xNyAxMzguMDlDMTYyLjk0IDEzOC4wMiAxNjIuNDkgMTM3Ljc5IDE2Mi4xNyAxMzcuNThDMTYxLjg1IDEzNy4zNyAxNjEuMzIgMTM3LjE0IDE2MS4wMCAxMzcuMDhDMTYwLjY4IDEzNy4wMiAxNjAuMDQgMTM2Ljc5IDE1OS41OCAxMzYuNTdDMTU3LjY0IDEzNS42NyAxNTEuNDIgMTM1LjU5IDE1MC40NiAxMzYuNDZDMTQ5LjY2IDEzNy4xOCAxNDkuNjEgMTM3LjUxIDE0OS44MyAxNDAuNTdDMTUwLjEzIDE0NC41NyAxNDkuOTcgMTY2Ljc5IDE0OS42MSAxNzIuMDBDMTQ5LjA5IDE3OS43MSAxNDkuMDkgMTg0LjI2IDE0OS42NyAyMTIuNTBDMTQ5Ljc2IDIxNy4xMyAxNDkuOTEgMjI0Ljk3IDE1MC4wMSAyMjkuOTJDMTUwLjEzIDIzNi44MCAxNTAuMjUgMjM5LjYyIDE1MC41MCAyNDEuOTJDMTUwLjY4IDI0My41NyAxNTAuOTEgMjQ2LjQ5IDE1MS4wMCAyNDguNDJDMTUxLjEwIDI1MC4zNCAxNTEuMzIgMjUyLjc4IDE1MS41MCAyNTMuODRDMTUxLjY4IDI1NC45MCAxNTEuOTEgMjU2Ljg3IDE1Mi4wMCAyNTguMjRDMTUyLjEwIDI1OS42MCAxNTIuMzMgMjYxLjM0IDE1Mi41MCAyNjIuMTBDMTUyLjY4IDI2Mi44NiAxNTIuOTEgMjY0LjM3IDE1My4wMSAyNjUuNDVDMTUzLjEwIDI2Ni41MyAxNTMuMzcgMjY4LjEzIDE1My42MSAyNjkuMDBDMTUzLjg0IDI2OS44NyAxNTQuMTAgMjcwLjg2IDE1NC4xOSAyNzEuMjBDMTU0LjQ5IDI3Mi40MSAxNTUuODEgMjczLjQ4IDE1Ny4wMiAyNzMuNDlDMTU3LjM1IDI3My41MCAxNTcuOTUgMjczLjM4IDE1OC4zNSAyNzMuMjRaIE0yMjYuODIgMjcyLjA3QzIyNy42MCAyNzEuOTIgMjI4LjYwIDI3MS42MiAyMjkuMDMgMjcxLjQwQzIyOS40NyAyNzEuMTggMjI5Ljk0IDI3MS4wMCAyMzAuMDggMjcxLjAwQzIzMC4yMiAyNzEuMDAgMjMwLjc3IDI3MC44NCAyMzEuMzAgMjcwLjY1QzIzMS44MiAyNzAuNDYgMjMyLjczIDI3MC4yMCAyMzMuMzEgMjcwLjA3QzIzNC4xMSAyNjkuODkgMjM0LjU4IDI2OS42NiAyMzUuMTkgMjY5LjE1QzIzNS42MyAyNjguNzggMjM2LjAwIDI2OC4zNyAyMzYuMDAgMjY4LjI2QzIzNi4wMCAyNjguMTQgMjM2LjE2IDI2Ny44NCAyMzYuMzUgMjY3LjYwQzIzNi41NSAyNjcuMzUgMjM2LjgwIDI2Ni44MyAyMzYuOTIgMjY2LjQ0QzIzNy4wMyAyNjYuMDUgMjM3LjMzIDI2NS40NSAyMzcuNTcgMjY1LjA5QzIzNy44MCAyNjQuNzQgMjM4LjAwIDI2NC4zOSAyMzguMDAgMjY0LjMxQzIzOC4wMCAyNjQuMTcgMjM4LjcwIDI2My4wNyAyMzkuNDUgMjYyLjAwQzI0MC4wOSAyNjEuMTAgMjQwLjg0IDI1OS43NiAyNDAuOTQgMjU5LjM1QzI0MS4wMCAyNTkuMTEgMjQxLjIyIDI1OC40OSAyNDEuNDQgMjU3Ljk2QzI0MS42OSAyNTcuMzUgMjQxLjkwIDI1Ni4zOCAyNDIuMDAgMjU1LjI5QzI0Mi4xMCAyNTQuMzUgMjQyLjMyIDI1Mi44NyAyNDIuNTAgMjUyLjAwQzI0Mi42OCAyNTEuMTMgMjQyLjkxIDI0OS4yOSAyNDMuMDAgMjQ3LjkyQzI0My4wOSAyNDYuNTUgMjQzLjMzIDI0NC42MCAyNDMuNTIgMjQzLjU5QzI0My44NSAyNDEuODcgMjQzLjg3IDI0MS4zOSAyNDMuNzggMjM2LjE3QzI0My43MiAyMzIuNzEgMjQzLjU5IDIyOS44MiAyNDMuNDMgMjI4LjU4QzI0My4yOSAyMjcuNDggMjQzLjEwIDIyNS4yMyAyNDMuMDAgMjIzLjU4QzI0Mi45MSAyMjEuOTMgMjQyLjc1IDIxOS45MSAyNDIuNjUgMjE5LjA4QzI0Mi40OSAyMTcuNjQgMjQyLjM4IDIxNS44NyAyNDIuMDAgMjA4LjYxQzI0MS44OSAyMDYuNDcgMjQxLjcxIDIwNC43NyAyNDEuNDkgMjAzLjc4QzI0MS4zMCAyMDIuOTQgMjQxLjA0IDIwMS4wNSAyNDAuOTEgMTk5LjU4QzI0MC43OCAxOTguMTIgMjQwLjU2IDE5NS42MSAyNDAuNDIgMTk0LjAwQzI0MC4yOCAxOTIuNDAgMjQwLjA5IDE4OC4xMiAyNDAuMDAgMTg0LjUwQzIzOS45MiAxODAuODcgMjM5LjczIDE3Ni43NSAyMzkuNjAgMTc1LjMzQzIzOS40NiAxNzMuOTEgMjM5LjI3IDE3MS4wNiAyMzkuMTcgMTY4Ljk5QzIzOC45OCAxNjUuMDAgMjM4LjkzIDE2NC42OCAyMzguMzIgMTYzLjUxTDIzNy45MyAxNjIuNzdMMjM3LjkxIDE1NC42N0MyMzcuOTAgMTQ3LjU4IDIzNy44NiAxNDYuNDcgMjM3LjYxIDE0NS42N0MyMzcuNDYgMTQ1LjE2IDIzNy4yOCAxNDQuMTEgMjM3LjIzIDE0My4zM0MyMzcuMTMgMTQxLjk3IDIzNy4xNCAxNDEuODggMjM3LjU0IDE0MS40MkMyMzcuOTYgMTQwLjkzIDIzNy45NyAxNDAuOTMgMjQwLjM2IDE0MC44MUMyNDEuNjcgMTQwLjc1IDI0My42NSAxNDAuNTUgMjQ0Ljc1IDE0MC4zNkMyNDUuODUgMTQwLjE4IDI0Ny4yMyAxMzkuOTggMjQ3LjgxIDEzOS45MkMyNDguNDAgMTM5Ljg2IDI0OS4yNCAxMzkuNjcgMjQ5LjY5IDEzOS40OUMyNTAuMTQgMTM5LjMxIDI1MS4wNSAxMzkuMDkgMjUxLjcxIDEzOC45OUMyNTIuMzcgMTM4Ljg5IDI1My40MCAxMzguNjUgMjU0LjAwIDEzOC40N0MyNTQuODkgMTM4LjE5IDI1NS43OCAxMzguMTAgMjU5LjAwIDEzNy45OUMyNjEuMTUgMTM3LjkyIDI2My4yMSAxMzcuNzcgMjYzLjU4IDEzNy42NkMyNjQuNDAgMTM3LjQyIDI2NS4zMyAxMzYuNTEgMjY1LjMzIDEzNS45NkMyNjUuMzMgMTM1LjU1IDI2NC44NSAxMzQuNzggMjY0LjM0IDEzNC4zOEMyNjQuMjAgMTM0LjI3IDI2My43NSAxMzQuMTMgMjYzLjMzIDEzNC4wN0MyNjIuOTIgMTM0LjAwIDI2Mi4xNyAxMzMuODEgMjYxLjY4IDEzMy42NEMyNTkuODQgMTMzLjAxIDI1OC4yNCAxMzIuOTYgMjQyLjg4IDEzMy4wNEMyMjguODYgMTMzLjEyIDIyNy45OSAxMzMuMTQgMjI2LjMzIDEzMy40NkMyMjUuMzcgMTMzLjY1IDIyMy42MSAxMzMuODkgMjIyLjQzIDEzNC4wMEMyMjEuMjQgMTM0LjExIDIxOS45NyAxMzQuMzEgMjE5LjU5IDEzNC40NEMyMTkuMjIgMTM0LjU3IDIxOC4wOCAxMzQuODIgMjE3LjA1IDEzNS4wMEMyMTYuMDMgMTM1LjE3IDIxNC45NyAxMzUuNDMgMjE0LjY5IDEzNS41N0MyMTQuNDEgMTM1LjcxIDIxMy42NCAxMzUuOTEgMjEyLjk3IDEzNi4wMEMyMTIuMzAgMTM2LjEwIDIxMS4yMiAxMzYuMzUgMjEwLjU4IDEzNi41N0MyMDkuOTQgMTM2Ljc5IDIwOC44NSAxMzcuMDEgMjA4LjE3IDEzNy4wOEMyMDcuNDggMTM3LjE0IDIwNi4zNSAxMzcuMzMgMjA1LjY1IDEzNy41MUMyMDQuOTYgMTM3LjY4IDIwMy42NSAxMzcuOTEgMjAyLjc0IDEzOC4wMUMyMDEuODMgMTM4LjExIDIwMC43NSAxMzguMzQgMjAwLjM0IDEzOC41MkMxOTkuOTMgMTM4LjcwIDE5OS4wMyAxMzguOTIgMTk4LjM1IDEzOS4wMkMxOTcuNjYgMTM5LjEyIDE5Ni43MiAxMzkuMzQgMTk2LjI2IDEzOS41MUMxOTUuODAgMTM5LjY5IDE5NC43OCAxMzkuOTEgMTk0LjAwIDE0MC4wMUMxOTMuMjIgMTQwLjExIDE5Mi4wMiAxNDAuMzcgMTkxLjMzIDE0MC41OEMxOTAuNjUgMTQwLjc5IDE4OS40OCAxNDEuMDEgMTg4Ljc1IDE0MS4wOEMxODcuNDAgMTQxLjIwIDE4NC44NSAxNDEuNzAgMTg0LjUyIDE0MS45MUMxODQuMTcgMTQyLjEyIDE4NC4zMiAxNDIuNjcgMTg0Ljc2IDE0Mi44NEMxODUuNDEgMTQzLjA4IDE5Mi43MSAxNDMuMDMgMTk1LjkyIDE0Mi43NUMxOTcuNTEgMTQyLjYxIDIwMC43MyAxNDIuNTEgMjAzLjI3IDE0Mi41MEMyMDYuNTQgMTQyLjUwIDIwOC42OCAxNDIuNDEgMjExLjA3IDE0Mi4xN0MyMTMuOTQgMTQxLjg4IDIxNC40MiAxNDEuODcgMjE0LjkxIDE0Mi4wN0MyMTUuODkgMTQyLjQ4IDIxNS45MCAxNDIuNTEgMjE2LjAyIDE0OS4yNUMyMTYuMDkgMTUyLjY0IDIxNi4yMiAxNTYuMDUgMjE2LjMzIDE1Ni44M0MyMTYuNDQgMTU3LjYxIDIxNi41NiAxNjAuMzEgMjE2LjU5IDE2Mi44M0MyMTYuNjMgMTY1LjM1IDIxNi43NCAxNjkuMjUgMjE2LjgzIDE3MS41MEMyMTcuMzIgMTgzLjA3IDIxNy4xNSAyMTguNjIgMjE2LjU4IDIyNC44M0MyMTYuMzQgMjI3LjQyIDIxNi4zMyAyMjkuMjAgMjE2LjQ5IDI0MC42N0MyMTYuNjcgMjUzLjc1IDIxNi45NCAyNTkuOTIgMjE3LjM5IDI2MS41NUMyMTcuNzIgMjYyLjczIDIxNy44MCAyNjMuMjYgMjE4LjAwIDI2NS41NUMyMTguMTIgMjY2LjkzIDIxOC4yOSAyNjcuODAgMjE4LjU2IDI2OC40N0MyMTguNzggMjY4Ljk5IDIxOS4wMSAyNjkuNzAgMjE5LjA3IDI3MC4wNEMyMTkuMjIgMjcwLjkwIDIyMC40MiAyNzEuODMgMjIxLjQwIDI3MS44NEMyMjEuNzggMjcxLjg1IDIyMi42OCAyNzEuOTUgMjIzLjQyIDI3Mi4wN0MyMjUuMjQgMjcyLjM3IDIyNS4yMSAyNzIuMzcgMjI2LjgyIDI3Mi4wN1oiLz48L3N2Zz4K") center / contain no-repeat; mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjE0NS4yIDEyOS4wIDEyNC4wIDE0OC4zIiByb2xlPSJpbWciIGFyaWEtbGFiZWw9IkxUIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTE1OC4zNSAyNzMuMjRDMTU4Ljg0IDI3My4wNiAxNjAuMTMgMjcyLjkzIDE2Mi4yOSAyNzIuODNDMTY0LjA2IDI3Mi43NCAxNjUuOTIgMjcyLjU3IDE2Ni40NSAyNzIuNDNDMTY2Ljk4IDI3Mi4yOSAxNjguMDggMjcyLjEwIDE2OC45MCAyNzIuMDBDMTY5LjcxIDI3MS45MCAxNzAuODAgMjcxLjY0IDE3MS4zMSAyNzEuNDNDMTcxLjgzIDI3MS4yMSAxNzIuNTEgMjcwLjk4IDE3Mi44MyAyNzAuOTJDMTczLjE1IDI3MC44NSAxNzMuNzEgMjcwLjY1IDE3NC4wNiAyNzAuNDZDMTc0LjQyIDI3MC4yOCAxNzUuMTIgMjcwLjAzIDE3NS42MSAyNjkuOTBDMTc2LjEwIDI2OS43NyAxNzYuNjkgMjY5LjU1IDE3Ni45MCAyNjkuNDFDMTc3LjEyIDI2OS4yNyAxNzcuODEgMjY5LjA3IDE3OC40NCAyNjguOThDMTc5LjA3IDI2OC44OSAxNzkuOTYgMjY4LjY5IDE4MC40MiAyNjguNTNDMTgxLjQ2IDI2OC4xOCAxODYuNDIgMjY4LjE0IDE4OC44MyAyNjguNDZDMTg5LjcwIDI2OC41OCAxOTIuMTQgMjY4LjcyIDE5NC4yNSAyNjguNzdDMTk3Ljg3IDI2OC44NyAxOTguMTcgMjY4Ljg1IDE5OS41OCAyNjguNTBDMjAwLjg5IDI2OC4xNyAyMDEuNzAgMjY4LjEwIDIwNi4wMCAyNjcuOTlDMjA4LjcwIDI2Ny45MyAyMTAuOTQgMjY3Ljg2IDIxMC45NyAyNjcuODVDMjEwLjk5IDI2Ny44NCAyMTEuMzggMjY3LjQ5IDIxMS44MyAyNjcuMDdDMjEyLjc1IDI2Ni4yMSAyMTMuMzIgMjY0LjkyIDIxMy4wMiAyNjQuMzhDMjEyLjg3IDI2NC4xMCAyMTEuOTggMjY0LjA4IDE5NS40NyAyNjQuMDhDMTc2LjI1IDI2NC4wOCAxNzcuODQgMjY0LjE3IDE3Ni41NiAyNjMuMDVDMTc1LjM4IDI2Mi4wMiAxNzUuMTMgMjU5LjM1IDE3NS41MSAyNTIuMTdDMTc1LjU5IDI1MC41NiAxNzUuNzQgMjQyLjAxIDE3NS44MiAyMzMuMTdDMTc1Ljk4IDIxNy4yOSAxNzYuMDkgMjE0LjI3IDE3Ni42MiAyMTEuMTdDMTc2LjgzIDIwOS44OCAxNzYuOTAgMjA3Ljc4IDE3Ni45NSAyMDAuMDBDMTc3LjAzIDE4OS42NyAxNzYuODYgMTgzLjg1IDE3Ni4zNSAxNzkuMDdDMTc2LjE3IDE3Ny40MyAxNzUuOTUgMTc0LjgxIDE3NS44NSAxNzMuMjVDMTc1Ljc1IDE3MS42OSAxNzUuNTYgMTY5LjkzIDE3NS40MiAxNjkuMzNDMTc1LjI5IDE2OC43NCAxNzUuMTAgMTY3LjI4IDE3NS4wMCAxNjYuMDhDMTc0Ljg5IDE2NC44OSAxNzQuNjcgMTYzLjM1IDE3NC40OSAxNjIuNjVDMTc0LjMxIDE2MS45NSAxNzQuMDkgMTYwLjQ1IDE3NC4wMCAxNTkuMzFDMTczLjkwIDE1OC4xOCAxNzMuNjggMTU2LjM5IDE3My41MCAxNTUuMzNDMTczLjMyIDE1NC4yOCAxNzMuMTAgMTUyLjU1IDE3My4wMCAxNTEuNTBDMTcyLjg3IDE1MC4xNCAxNzIuNzEgMTQ5LjM0IDE3Mi40MyAxNDguNzNDMTcyLjIxIDE0OC4yNiAxNzEuOTggMTQ3LjU2IDE3MS45MiAxNDcuMTlDMTcxLjg2IDE0Ni44MSAxNzEuNjIgMTQ2LjI0IDE3MS40MCAxNDUuOTFDMTcxLjE4IDE0NS41OSAxNzEuMDAgMTQ1LjI2IDE3MS4wMCAxNDUuMTlDMTcxLjAwIDE0NC42NyAxNjguNzkgMTQyLjAwIDE2Ny4yOSAxNDAuNzBDMTY2LjY5IDE0MC4xOCAxNjQuOTUgMTM5LjAwIDE2NC43OCAxMzkuMDBDMTY0LjcxIDEzOS4wMCAxNjQuNDEgMTM4LjgyIDE2NC4xMSAxMzguNjBDMTYzLjgyIDEzOC4zOCAxNjMuNDAgMTM4LjE1IDE2My4xNyAxMzguMDlDMTYyLjk0IDEzOC4wMiAxNjIuNDkgMTM3Ljc5IDE2Mi4xNyAxMzcuNThDMTYxLjg1IDEzNy4zNyAxNjEuMzIgMTM3LjE0IDE2MS4wMCAxMzcuMDhDMTYwLjY4IDEzNy4wMiAxNjAuMDQgMTM2Ljc5IDE1OS41OCAxMzYuNTdDMTU3LjY0IDEzNS42NyAxNTEuNDIgMTM1LjU5IDE1MC40NiAxMzYuNDZDMTQ5LjY2IDEzNy4xOCAxNDkuNjEgMTM3LjUxIDE0OS44MyAxNDAuNTdDMTUwLjEzIDE0NC41NyAxNDkuOTcgMTY2Ljc5IDE0OS42MSAxNzIuMDBDMTQ5LjA5IDE3OS43MSAxNDkuMDkgMTg0LjI2IDE0OS42NyAyMTIuNTBDMTQ5Ljc2IDIxNy4xMyAxNDkuOTEgMjI0Ljk3IDE1MC4wMSAyMjkuOTJDMTUwLjEzIDIzNi44MCAxNTAuMjUgMjM5LjYyIDE1MC41MCAyNDEuOTJDMTUwLjY4IDI0My41NyAxNTAuOTEgMjQ2LjQ5IDE1MS4wMCAyNDguNDJDMTUxLjEwIDI1MC4zNCAxNTEuMzIgMjUyLjc4IDE1MS41MCAyNTMuODRDMTUxLjY4IDI1NC45MCAxNTEuOTEgMjU2Ljg3IDE1Mi4wMCAyNTguMjRDMTUyLjEwIDI1OS42MCAxNTIuMzMgMjYxLjM0IDE1Mi41MCAyNjIuMTBDMTUyLjY4IDI2Mi44NiAxNTIuOTEgMjY0LjM3IDE1My4wMSAyNjUuNDVDMTUzLjEwIDI2Ni41MyAxNTMuMzcgMjY4LjEzIDE1My42MSAyNjkuMDBDMTUzLjg0IDI2OS44NyAxNTQuMTAgMjcwLjg2IDE1NC4xOSAyNzEuMjBDMTU0LjQ5IDI3Mi40MSAxNTUuODEgMjczLjQ4IDE1Ny4wMiAyNzMuNDlDMTU3LjM1IDI3My41MCAxNTcuOTUgMjczLjM4IDE1OC4zNSAyNzMuMjRaIE0yMjYuODIgMjcyLjA3QzIyNy42MCAyNzEuOTIgMjI4LjYwIDI3MS42MiAyMjkuMDMgMjcxLjQwQzIyOS40NyAyNzEuMTggMjI5Ljk0IDI3MS4wMCAyMzAuMDggMjcxLjAwQzIzMC4yMiAyNzEuMDAgMjMwLjc3IDI3MC44NCAyMzEuMzAgMjcwLjY1QzIzMS44MiAyNzAuNDYgMjMyLjczIDI3MC4yMCAyMzMuMzEgMjcwLjA3QzIzNC4xMSAyNjkuODkgMjM0LjU4IDI2OS42NiAyMzUuMTkgMjY5LjE1QzIzNS42MyAyNjguNzggMjM2LjAwIDI2OC4zNyAyMzYuMDAgMjY4LjI2QzIzNi4wMCAyNjguMTQgMjM2LjE2IDI2Ny44NCAyMzYuMzUgMjY3LjYwQzIzNi41NSAyNjcuMzUgMjM2LjgwIDI2Ni44MyAyMzYuOTIgMjY2LjQ0QzIzNy4wMyAyNjYuMDUgMjM3LjMzIDI2NS40NSAyMzcuNTcgMjY1LjA5QzIzNy44MCAyNjQuNzQgMjM4LjAwIDI2NC4zOSAyMzguMDAgMjY0LjMxQzIzOC4wMCAyNjQuMTcgMjM4LjcwIDI2My4wNyAyMzkuNDUgMjYyLjAwQzI0MC4wOSAyNjEuMTAgMjQwLjg0IDI1OS43NiAyNDAuOTQgMjU5LjM1QzI0MS4wMCAyNTkuMTEgMjQxLjIyIDI1OC40OSAyNDEuNDQgMjU3Ljk2QzI0MS42OSAyNTcuMzUgMjQxLjkwIDI1Ni4zOCAyNDIuMDAgMjU1LjI5QzI0Mi4xMCAyNTQuMzUgMjQyLjMyIDI1Mi44NyAyNDIuNTAgMjUyLjAwQzI0Mi42OCAyNTEuMTMgMjQyLjkxIDI0OS4yOSAyNDMuMDAgMjQ3LjkyQzI0My4wOSAyNDYuNTUgMjQzLjMzIDI0NC42MCAyNDMuNTIgMjQzLjU5QzI0My44NSAyNDEuODcgMjQzLjg3IDI0MS4zOSAyNDMuNzggMjM2LjE3QzI0My43MiAyMzIuNzEgMjQzLjU5IDIyOS44MiAyNDMuNDMgMjI4LjU4QzI0My4yOSAyMjcuNDggMjQzLjEwIDIyNS4yMyAyNDMuMDAgMjIzLjU4QzI0Mi45MSAyMjEuOTMgMjQyLjc1IDIxOS45MSAyNDIuNjUgMjE5LjA4QzI0Mi40OSAyMTcuNjQgMjQyLjM4IDIxNS44NyAyNDIuMDAgMjA4LjYxQzI0MS44OSAyMDYuNDcgMjQxLjcxIDIwNC43NyAyNDEuNDkgMjAzLjc4QzI0MS4zMCAyMDIuOTQgMjQxLjA0IDIwMS4wNSAyNDAuOTEgMTk5LjU4QzI0MC43OCAxOTguMTIgMjQwLjU2IDE5NS42MSAyNDAuNDIgMTk0LjAwQzI0MC4yOCAxOTIuNDAgMjQwLjA5IDE4OC4xMiAyNDAuMDAgMTg0LjUwQzIzOS45MiAxODAuODcgMjM5LjczIDE3Ni43NSAyMzkuNjAgMTc1LjMzQzIzOS40NiAxNzMuOTEgMjM5LjI3IDE3MS4wNiAyMzkuMTcgMTY4Ljk5QzIzOC45OCAxNjUuMDAgMjM4LjkzIDE2NC42OCAyMzguMzIgMTYzLjUxTDIzNy45MyAxNjIuNzdMMjM3LjkxIDE1NC42N0MyMzcuOTAgMTQ3LjU4IDIzNy44NiAxNDYuNDcgMjM3LjYxIDE0NS42N0MyMzcuNDYgMTQ1LjE2IDIzNy4yOCAxNDQuMTEgMjM3LjIzIDE0My4zM0MyMzcuMTMgMTQxLjk3IDIzNy4xNCAxNDEuODggMjM3LjU0IDE0MS40MkMyMzcuOTYgMTQwLjkzIDIzNy45NyAxNDAuOTMgMjQwLjM2IDE0MC44MUMyNDEuNjcgMTQwLjc1IDI0My42NSAxNDAuNTUgMjQ0Ljc1IDE0MC4zNkMyNDUuODUgMTQwLjE4IDI0Ny4yMyAxMzkuOTggMjQ3LjgxIDEzOS45MkMyNDguNDAgMTM5Ljg2IDI0OS4yNCAxMzkuNjcgMjQ5LjY5IDEzOS40OUMyNTAuMTQgMTM5LjMxIDI1MS4wNSAxMzkuMDkgMjUxLjcxIDEzOC45OUMyNTIuMzcgMTM4Ljg5IDI1My40MCAxMzguNjUgMjU0LjAwIDEzOC40N0MyNTQuODkgMTM4LjE5IDI1NS43OCAxMzguMTAgMjU5LjAwIDEzNy45OUMyNjEuMTUgMTM3LjkyIDI2My4yMSAxMzcuNzcgMjYzLjU4IDEzNy42NkMyNjQuNDAgMTM3LjQyIDI2NS4zMyAxMzYuNTEgMjY1LjMzIDEzNS45NkMyNjUuMzMgMTM1LjU1IDI2NC44NSAxMzQuNzggMjY0LjM0IDEzNC4zOEMyNjQuMjAgMTM0LjI3IDI2My43NSAxMzQuMTMgMjYzLjMzIDEzNC4wN0MyNjIuOTIgMTM0LjAwIDI2Mi4xNyAxMzMuODEgMjYxLjY4IDEzMy42NEMyNTkuODQgMTMzLjAxIDI1OC4yNCAxMzIuOTYgMjQyLjg4IDEzMy4wNEMyMjguODYgMTMzLjEyIDIyNy45OSAxMzMuMTQgMjI2LjMzIDEzMy40NkMyMjUuMzcgMTMzLjY1IDIyMy42MSAxMzMuODkgMjIyLjQzIDEzNC4wMEMyMjEuMjQgMTM0LjExIDIxOS45NyAxMzQuMzEgMjE5LjU5IDEzNC40NEMyMTkuMjIgMTM0LjU3IDIxOC4wOCAxMzQuODIgMjE3LjA1IDEzNS4wMEMyMTYuMDMgMTM1LjE3IDIxNC45NyAxMzUuNDMgMjE0LjY5IDEzNS41N0MyMTQuNDEgMTM1LjcxIDIxMy42NCAxMzUuOTEgMjEyLjk3IDEzNi4wMEMyMTIuMzAgMTM2LjEwIDIxMS4yMiAxMzYuMzUgMjEwLjU4IDEzNi41N0MyMDkuOTQgMTM2Ljc5IDIwOC44NSAxMzcuMDEgMjA4LjE3IDEzNy4wOEMyMDcuNDggMTM3LjE0IDIwNi4zNSAxMzcuMzMgMjA1LjY1IDEzNy41MUMyMDQuOTYgMTM3LjY4IDIwMy42NSAxMzcuOTEgMjAyLjc0IDEzOC4wMUMyMDEuODMgMTM4LjExIDIwMC43NSAxMzguMzQgMjAwLjM0IDEzOC41MkMxOTkuOTMgMTM4LjcwIDE5OS4wMyAxMzguOTIgMTk4LjM1IDEzOS4wMkMxOTcuNjYgMTM5LjEyIDE5Ni43MiAxMzkuMzQgMTk2LjI2IDEzOS41MUMxOTUuODAgMTM5LjY5IDE5NC43OCAxMzkuOTEgMTk0LjAwIDE0MC4wMUMxOTMuMjIgMTQwLjExIDE5Mi4wMiAxNDAuMzcgMTkxLjMzIDE0MC41OEMxOTAuNjUgMTQwLjc5IDE4OS40OCAxNDEuMDEgMTg4Ljc1IDE0MS4wOEMxODcuNDAgMTQxLjIwIDE4NC44NSAxNDEuNzAgMTg0LjUyIDE0MS45MUMxODQuMTcgMTQyLjEyIDE4NC4zMiAxNDIuNjcgMTg0Ljc2IDE0Mi44NEMxODUuNDEgMTQzLjA4IDE5Mi43MSAxNDMuMDMgMTk1LjkyIDE0Mi43NUMxOTcuNTEgMTQyLjYxIDIwMC43MyAxNDIuNTEgMjAzLjI3IDE0Mi41MEMyMDYuNTQgMTQyLjUwIDIwOC42OCAxNDIuNDEgMjExLjA3IDE0Mi4xN0MyMTMuOTQgMTQxLjg4IDIxNC40MiAxNDEuODcgMjE0LjkxIDE0Mi4wN0MyMTUuODkgMTQyLjQ4IDIxNS45MCAxNDIuNTEgMjE2LjAyIDE0OS4yNUMyMTYuMDkgMTUyLjY0IDIxNi4yMiAxNTYuMDUgMjE2LjMzIDE1Ni44M0MyMTYuNDQgMTU3LjYxIDIxNi41NiAxNjAuMzEgMjE2LjU5IDE2Mi44M0MyMTYuNjMgMTY1LjM1IDIxNi43NCAxNjkuMjUgMjE2LjgzIDE3MS41MEMyMTcuMzIgMTgzLjA3IDIxNy4xNSAyMTguNjIgMjE2LjU4IDIyNC44M0MyMTYuMzQgMjI3LjQyIDIxNi4zMyAyMjkuMjAgMjE2LjQ5IDI0MC42N0MyMTYuNjcgMjUzLjc1IDIxNi45NCAyNTkuOTIgMjE3LjM5IDI2MS41NUMyMTcuNzIgMjYyLjczIDIxNy44MCAyNjMuMjYgMjE4LjAwIDI2NS41NUMyMTguMTIgMjY2LjkzIDIxOC4yOSAyNjcuODAgMjE4LjU2IDI2OC40N0MyMTguNzggMjY4Ljk5IDIxOS4wMSAyNjkuNzAgMjE5LjA3IDI3MC4wNEMyMTkuMjIgMjcwLjkwIDIyMC40MiAyNzEuODMgMjIxLjQwIDI3MS44NEMyMjEuNzggMjcxLjg1IDIyMi42OCAyNzEuOTUgMjIzLjQyIDI3Mi4wN0MyMjUuMjQgMjcyLjM3IDIyNS4yMSAyNzIuMzcgMjI2LjgyIDI3Mi4wN1oiLz48L3N2Zz4K") center / contain no-repeat; }
.nav-pill .pill-home { min-height: 44px; }
/* light and dark, one tap from the pill (Device stays in the menu and the footer) */
/* an icon-only control, so it is a small indigo disc (well over 3:1 against the pill), its 44 px target kept by a clear border */
.nav-pill .pill-theme { padding: 0; width: 44px; border: 4px solid transparent; background: var(--indigo) padding-box; color: var(--ground); }
.nav-pill .pill-theme:hover { background: var(--ink) padding-box; }
.nav-pill .pill-theme:active { background: var(--ink-2) padding-box; }
/* a solid half-moon on the disc: light on one side, dark on the other; it turns when dark is on */
.pill-theme svg { width: 22px; height: 22px; }
.pill-theme .th-half { fill: var(--ground); transform-origin: 10px 10px; transition: transform 0.45s var(--ease); }
.pill-theme[aria-pressed="true"] .th-half { transform: rotate(180deg); }
html:not(.js) .pill-theme { display: none; }
.pill-name { font-family: "Zen Maru Gothic", sans-serif; font-weight: 700; letter-spacing: 0.02em; }
.nav-pill .pill-call-inline { background: var(--btn); color: var(--btn-ink); font-weight: 600; }
.nav-pill .pill-call-inline:hover { background: var(--btn-hover); }
.nav-pill .pill-call-inline[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--btn-ink); background: var(--btn); }
.pill-call { display: none; }
@media (max-width: 767px) {
  .pill-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* on a phone every item keeps its own width (nothing squeezed); the spacing tightens to fit */
@media (max-width: 767px) {
  /* with wider letter or word spacing the pill takes a second row rather than cutting a word */
  .nav-pill { flex-wrap: wrap; justify-content: center; border-radius: 28px; width: max-content; }
  .nav-pill > * { flex: none; }
  .nav-pill a, .nav-pill button { padding: 0 9px; }
  .nav-pill .pill-home { padding: 0; }
  .pill-mark { margin: 0 4px; }
}
@media (max-width: 380px) {
  .nav-pill a, .nav-pill button { padding: 0 7px; font-size: 0.875rem; }
  .nav-pill .pill-theme { width: 40px; min-width: 40px; border-width: 2px; }
}
@media (max-width: 340px) {
  .nav-pill { gap: 0; }
  .nav-pill a, .nav-pill button { padding: 0 5px; font-size: 0.8125rem; }
  .nav-pill .pill-home, .nav-pill .pill-theme { min-width: 40px; }
  .pill-mark { width: 26px; margin: 0 7px; }
}
@media (min-width: 768px) {
  .nav-pill { left: 20px; top: 16px; bottom: auto; transform: none; }
  .nav-pill .pill-call-inline { display: none; }
  .pill-call {
    display: inline-flex; position: fixed; z-index: 60; right: 20px; top: 16px;
    padding: 4px; background: var(--pill); border: 1px solid var(--pill-edge);    box-shadow: var(--shadow);
  }
  .pill-call span {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
    background: var(--btn); color: var(--btn-ink); font-weight: 600; transition: background-color 0.2s;
  }
  .pill-call:hover span { background: var(--btn-hover); }
  .pill-call[aria-current="page"] span { box-shadow: inset 0 0 0 2px var(--btn-ink); }
}

/* ---------- the menu sheet ---------- */
.sheet { display: none; z-index: 80; }
.sheet:popover-open { display: block; }
.sheet.open { display: block; }
.sheet {
  position: fixed; margin: 0; padding: 22px 22px 18px;
  inset: calc(10px + env(safe-area-inset-top, 0px)) 10px auto 10px;
  width: auto; max-width: none; max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow: auto;
  border: 1px solid var(--pill-edge); border-radius: 26px;
  background: var(--ground); color: var(--ink); box-shadow: var(--shadow);
}
.sheet::backdrop { background: transparent; }
@media (min-width: 768px) { .sheet { inset: 76px auto auto 20px; width: 360px; max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); } }
.sheet-close {
  min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--edge); background: transparent; color: var(--ink); font: 500 0.9375rem/1 "Hanken Grotesk", sans-serif;
}
.sheet-close:hover { background: var(--hover); }
.sheet-links a {
  display: flex; align-items: center; min-height: 48px; padding: 0 12px; margin: 0 -12px;
  border-radius: 14px; text-decoration: none; font-weight: 500; font-size: 1.0625rem;
}
.sheet-links a:hover { background: var(--hover); }
.sheet-links a[aria-current="page"] { background: var(--current); font-weight: 600; }
.sheet-links .sub a { padding-left: 28px; font-weight: 400; }
.sheet-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hair); }
.sheet-foot .theme legend { font-size: 0.875rem; margin-bottom: 4px; }
@media (max-width: 767px) {
  /* on phones the sheet opens from the bottom, just above the pill that opened it */
  .sheet { padding: 12px 14px 14px; inset: auto 10px calc(76px + env(safe-area-inset-bottom, 0px)) 10px; }
  .sheet-links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; }
  .sheet-links a { min-height: 44px; margin: 0; padding: 0 10px; font-size: 1rem; }
  .sheet .theme label span { padding: 0 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .sheet:popover-open { animation: sheet-in 0.32s var(--ease); }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(-10px); } }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  .sheet:popover-open { animation-name: sheet-up; }
  @keyframes sheet-up { from { opacity: 0; transform: translateY(10px); } }
}

/* ---------- theme choice ---------- */
.theme { border: 0; margin: 0; padding: 0; min-width: 0; }
.theme legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: 0.9375rem; }
.theme-opts { display: inline-flex; padding: 3px; border-radius: 999px; border: 1.5px solid var(--edge); }
.theme label { position: relative; display: inline-flex; }
.theme input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.theme label span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  font-size: 0.9375rem; font-weight: 500;
}
.theme label:hover span { background: var(--hover); }
.theme input:checked + span { background: var(--ink); color: var(--ground); }
.theme input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- cords (shared) ---------- */
.cord { fill: none; stroke: var(--cord); stroke-linecap: round; stroke-linejoin: round; }
.knot-dot { fill: var(--ground); stroke: var(--cord); }
.draw { stroke-dasharray: 1 1.2; stroke-dashoffset: 0; }
html.js [data-reveal]:not(.is-in) .draw, html.js .scene:not(.is-in) .draw, html.js .draw-wrap:not(.is-in) .draw { stroke-dashoffset: 1.05; }
.is-in .draw { transition: stroke-dashoffset var(--dur, 1.1s) var(--pull) var(--delay, 0s); }
html.js [data-tie]:not(.tied) { opacity: 0; }
[data-tie] { transition: opacity 0.25s; }

/* reveal: words fade, pictures float up; each plays once */
/* a section arrives by its own content (the page position is never moved): words rise and fade in, pictures float up */
html.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(22px); }
html.js [data-reveal="float"]:not(.is-in) { transform: translateY(48px); }
[data-reveal].is-in { transition: opacity 0.7s var(--ease) var(--d, 0s), transform 0.85s var(--ease) var(--d, 0s); }
html.reveal-all [data-reveal] { opacity: 1 !important; transform: none !important; }
/* an element that went past the top before it arrived is shown settled, with no play */
.settled, .settled *, .settled::before, .settled *::before, .settled::after { transition: none !important; animation: none !important; }

/* ---------- picture frames ---------- */
.frame { position: relative; overflow: hidden; background: var(--ground-2); }
.frame img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); }
/* a true half-circle top on a 2:3 frame: vertical radius = half the width = a third of the height */
.arch { border-radius: 50% 50% 24px 24px / 33.333% 33.333% 24px 24px; }
.circle { border-radius: 50%; aspect-ratio: 1; }
.tall { border-radius: 40px; }
.wide { border-radius: 28px; }

/* ---------- hero (front door) ---------- */
.hero { position: relative; overflow: hidden; overflow: clip; padding-top: 28px; padding-bottom: 48px; }
.page-hero, .hero { scroll-margin-top: 0; }
@media (min-width: 768px) { .hero, .page-hero { padding-top: calc(var(--nav-top) + 20px); } }
.hero-grid { position: relative; z-index: 1; display: grid; gap: 28px; }
.hero-words, .hero-more { position: relative; z-index: 2; }
/* her seal leads the first screen, beside her name */
.hero-mark { display: flex; align-items: center; gap: 14px; margin-bottom: 1.2rem; }
.hero-mark .label { margin: 0; }
.hero-seal { width: 56px; flex: none; }
@media (min-width: 768px) { .hero-seal { width: 72px; } }
/* on a phone the arch comes up between the heading and the lede, so the cord meets it on the first screen */
@media (max-width: 639px) {
  .hero-grid { row-gap: 22px; }
  .hero-words h1 { margin-bottom: 0; }
  .hero-media { order: 1; width: min(56%, 250px); justify-self: end; }
  .hero-more { order: 2; }
  html:not(.js) .hero-media::before { width: 100vw; }
}
@media (min-width: 640px) {
  .hero-grid { row-gap: 0; }
  .hero-words { grid-column: 1; grid-row: 1; align-self: end; }
  .hero-more { grid-column: 1; grid-row: 2; align-self: start; }
  .hero-media { grid-column: 2; grid-row: 1 / span 2; }
}
.hook {
  font-family: "Zen Maru Gothic", sans-serif; font-weight: 700;
  font-size: clamp(2.3rem, 1.5rem + 4.2vw, 4.6rem); line-height: 1.04; letter-spacing: -0.015em;
  margin: 0 0 1.4rem; max-width: 12ch; color: var(--ink);
}
.hero h1 { font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.95rem); font-weight: 500; line-height: 1.32; max-width: 34ch; margin-bottom: 0.9rem; }
.hero .lede { color: var(--ink-2); max-width: 46ch; }
.hero-media { position: relative; z-index: 1; }
.hero-frame { aspect-ratio: 2 / 3; width: 100%; margin-left: 0; }
.hero-frame img { object-position: left center; filter: none; }
.cord-hero { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: hidden; }
/* the hero's measured seam (entry height, thickness, colour): build.mjs fills these from the photograph */
.hero { --seam-y: 0.5433; --seam-w: 0.0046; --seam-c: #d7784a; }
.cord-hero .cord { stroke: url(#seam-grad); stroke-width: var(--sw, 4px); }
.cord-hero .seam-from { stop-color: var(--cord); }
.cord-hero .seam-to { stop-color: var(--seam-c); }
.cord-hero .knot-end { fill: var(--cord); }
/* with no script the cord still meets the picture, straight, at the measured seam */
.hero-frame::before { content: none; }
html:not(.js) .hero-media::before {
  content: ""; position: absolute; z-index: 0; right: 100%; width: var(--gut);
  top: calc(var(--seam-y) * 100%); height: 4px; margin-top: -2px; border-radius: 4px;
  background: linear-gradient(90deg, transparent, var(--cord) 50%, var(--seam-c));
}
@media (min-width: 640px) and (max-width: 1023px) {
  .hero { padding-bottom: 72px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: center; }
  .hero-frame { height: min(58vh, 520px); height: min(58svh, 520px); width: auto; }
  .hook { font-size: clamp(2.3rem, 1.2rem + 3vw, 3.2rem); }
  html:not(.js) .hero-media::before { width: 40px; }
}
@media (min-width: 1024px) {
  .hero { min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding-bottom: 56px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(56px, 7vw, 128px); align-items: center; }
  .hero-frame { height: min(78vh, 840px); height: min(78svh, 840px); width: auto; margin: 0; }
  html:not(.js) .hero-media::before { right: 100%; width: clamp(56px, 7vw, 128px); }
}

/* ---------- meet Laura ---------- */
.meet-grid { display: grid; gap: 40px; align-items: center; }
.meet-seal { position: relative; width: min(78vw, 360px); margin-inline: auto; }
@media (min-width: 768px) and (max-width: 899px) { .meet-grid { grid-template-columns: 2fr 3fr; gap: 40px; } .meet-seal { width: 100%; } }
.meet-seal .seal-disc { box-shadow: 0 0 0 1px var(--hair), var(--shadow); }
.meet-seal svg { position: absolute; inset: -7%; width: 114%; height: 114%; max-width: none; }
.meet-seal .cord { stroke-width: 1.4; }
.quote { margin: 0 0 1.6rem; }
.quote blockquote { margin: 0; }
.quote blockquote p {
  font-family: "Zen Maru Gothic", sans-serif; font-weight: 500;
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem); line-height: 1.4; margin: 0 0 0.4rem; max-width: 30ch;
}
.quote figcaption { color: var(--ink-2); font-size: 0.9375rem; }
.quote figcaption::before { content: ""; display: inline-block; vertical-align: middle; width: 22px; height: 2px; margin-right: 10px; background: var(--cord); border-radius: 2px; }
.always { font-weight: 600; font-size: 1.125rem; }
@media (min-width: 900px) {
  .meet-grid { grid-template-columns: 5fr 7fr; gap: clamp(48px, 7vw, 120px); }
  .meet-seal { width: min(100%, 440px); }
}

/* ---------- how she works: one hold, one step at a time ---------- */
/* the pin (the drawing and its step's words) holds while three steps pass; a scene and its words arrive together,
   its cord ties once and plays through, and the next scene waits for it: chosen by the scroll, never scrubbed by it */
.how-head { margin-bottom: 8px; }
/* custom properties take any token, so the small-viewport values sit behind @supports, with vh as the fallback */
.how-hold { position: relative; --pin-h: calc(100vh - 96px); --stage-h: clamp(200px, 30vh, 280px); --step-h: 65vh; }
@supports (height: 1svh) { .how-hold { --pin-h: calc(100svh - 96px); --stage-h: clamp(200px, 30svh, 280px); --step-h: 65svh; } }
.how-stage { position: relative; }
.scene { width: 100%; height: auto; }
.scene text { font-family: "Hanken Grotesk", sans-serif; fill: var(--ink); font-size: 19px; font-weight: 500; }
.scene .t-quiet { fill: var(--ink); font-size: 18px; font-weight: 500; }
.scene .t-big { font-family: "Zen Maru Gothic", sans-serif; font-size: 26px; font-weight: 700; fill: var(--ink); }
.scene .cord { stroke-width: 5; }
html:not(.js) .how-stage { display: grid; gap: 8px; margin-bottom: 24px; }
html:not(.js) .how-stage .scene { max-width: 420px; }
html:not(.js) .how-step { padding-block: 20px; }
html:not(.js) .how-run, html:not(.js) .how-ticks { display: none; }
/* phones: the heading scrolls on, and the drawing with its step's words holds, centred above the pill */
html.js .how-pin { display: contents; }
html.js .how-held {
  position: relative; top: 0; z-index: 2; min-height: var(--pin-h);
  display: flex; flex-direction: column; justify-content: center; gap: 18px; background: var(--ground);
}
/* it becomes sticky just before it reaches its place (the script adds .is-held; sticky does nothing until then, so the
   switch never moves it), and on its way up it is plain content like any other */
html.js .how-hold.is-held .how-held { position: sticky; }
html.js .how-stage { height: var(--stage-h); }
/* the hand-over between steps is one sweep, like a page laid over the last: the next scene and its words are uncovered
   from one edge as the last are covered from the same edge, in step, so the two never sit on top of each other
   (forward the sweep runs left to right, back up it runs right to left); every letter showing is at full contrast */
html.js .how-stage .scene { position: absolute; inset: 0; height: 100%; clip-path: inset(0 0 0 0); }
html.js .how-stage .scene, html.js .how-step { visibility: visible; transition: clip-path 0.7s var(--ease), visibility 0s; }
/* a step still to come waits covered from its right; a step gone by is covered from its left */
html.js .how-stage[data-step="1"] .scene-2, html.js .how-stage[data-step="1"] .scene-3, html.js .how-stage[data-step="2"] .scene-3,
html.js .how-hold[data-step="1"] .how-step[data-step="2"], html.js .how-hold[data-step="1"] .how-step[data-step="3"], html.js .how-hold[data-step="2"] .how-step[data-step="3"] { clip-path: inset(0 100% 0 0); }
html.js .how-stage[data-step="2"] .scene-1, html.js .how-stage[data-step="3"] .scene-1, html.js .how-stage[data-step="3"] .scene-2,
html.js .how-hold[data-step="2"] .how-step[data-step="1"], html.js .how-hold[data-step="3"] .how-step[data-step="1"], html.js .how-hold[data-step="3"] .how-step[data-step="2"] { clip-path: inset(0 0 0 100%); }
/* once covered, a step is hidden outright (screen readers have all three in the list the script adds) */
html.js .how-stage[data-step="1"] .scene-2, html.js .how-stage[data-step="1"] .scene-3, html.js .how-stage[data-step="2"] .scene-3,
html.js .how-hold[data-step="1"] .how-step[data-step="2"], html.js .how-hold[data-step="1"] .how-step[data-step="3"], html.js .how-hold[data-step="2"] .how-step[data-step="3"],
html.js .how-stage[data-step="2"] .scene-1, html.js .how-stage[data-step="3"] .scene-1, html.js .how-stage[data-step="3"] .scene-2,
html.js .how-hold[data-step="2"] .how-step[data-step="1"], html.js .how-hold[data-step="3"] .how-step[data-step="1"], html.js .how-hold[data-step="3"] .how-step[data-step="2"] { visibility: hidden; transition: clip-path 0.7s var(--ease), visibility 0s linear 0.7s; }
.how-steps { list-style: none; counter-reset: step; }
/* the three steps share one place, so nothing slides under the drawing */
html.js .how-steps { display: grid; }
html.js .how-step { grid-area: 1 / 1; }
html.js .how-run { height: calc(var(--step-h) * 2.4); }
.step-n { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 1rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--indigo); margin-bottom: 0.4rem; }
.how-step h3 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem); margin-bottom: 0.5rem; }
.how-step p { color: var(--ink); }
.how-step .step-text p:last-child { margin-bottom: 0; }
/* three short cords under the words: the step you are on, and how many are left */
.how-ticks { display: block; width: 96px; height: 10px; margin-top: 18px; overflow: visible; }
.how-ticks .tk { fill: none; stroke: var(--edge); stroke-width: 3; stroke-linecap: round; transition: stroke 0.45s var(--ease), stroke-width 0.45s var(--ease); }
.how-hold[data-step="1"] .tk-1, .how-hold[data-step="2"] .tk-1, .how-hold[data-step="2"] .tk-2, .how-hold[data-step="3"] .tk { stroke: var(--cord); stroke-width: 4; }
@media (max-width: 767px) {
  .scene .wk { font-size: 20px; }
}
@media (min-width: 768px) {
  .how-hold { --pin-h: calc(100vh - var(--nav-top)); --stage-h: min(48vh, 520px, calc(100vh - var(--nav-top) - 230px)); --step-h: 55vh; }
  @supports (height: 1svh) { .how-hold { --pin-h: calc(100svh - var(--nav-top)); --stage-h: min(48svh, 520px, calc(100svh - var(--nav-top) - 230px)); --step-h: 55svh; } }
  .how-held { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; }
  /* from the tablet up the whole section holds as one screen: its heading, the drawing and the step beside it */
  html.js .how-pin {
    position: relative; top: 0; z-index: 2; min-height: var(--pin-h);
    display: flex; flex-direction: column; justify-content: center; background: var(--ground);
  }
  html.js .how-hold.is-held .how-pin { position: sticky; top: var(--nav-top); }
  html.js .how-held, html.js .how-hold.is-held .how-held { position: static; min-height: 0; display: grid; background: none; }
  html.js .how-head { margin-bottom: clamp(16px, 3vh, 40px); }
  /* the words sized to the drawing beside them */
  .how-step h3 { font-size: clamp(2rem, 1.2rem + 1.9vw, 3.1rem); }
  html.js .how-step p { font-size: clamp(1.15rem, 0.95rem + 0.5vw, 1.4rem); line-height: 1.55; max-width: 32ch; }
}
.app-line { margin-top: clamp(40px, 6vh, 72px); padding-top: 28px; border-top: 1px solid var(--hair); }
.app-line > p { font-weight: 500; }
.doors { display: grid; gap: 24px; margin-top: 20px; }
.door { padding-top: 14px; position: relative; }
.door::before { content: ""; position: absolute; left: 0; top: 0; width: 28px; height: 3px; border-radius: 3px; background: var(--cord); }
.door h3 { font-size: 1.125rem; margin-bottom: 0.3rem; }
.door p { margin: 0; color: var(--ink-2); }
@media (min-width: 768px) { .doors { grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 80px); } }

/* ---------- the four examples ---------- */
/* each picture holds its few words on a soft shade inside the frame; the frame is sized to hold them */
.ex-intro { display: grid; gap: 8px; }
.ex-intro > :last-child { margin-bottom: 0; }
.ex-grid { display: grid; gap: 48px; }
.ex { position: relative; }
.ex-link { display: block; color: var(--ink); text-decoration: none; border-radius: 30px; }
.ex-link:focus-visible { outline-offset: 6px; border-radius: 30px; }
.ex-pic { width: 100%; outline: 1px solid var(--hair); outline-offset: 7px; transition: outline-color 0.3s var(--ease), outline-offset 0.3s var(--ease); }
/* each picture reads as a door: a hairline frame that answers on hover and focus */
.ex-link:hover .ex-pic, .ex-link:focus-visible .ex-pic { outline-color: var(--cord); outline-offset: 4px; }
.ex-pic img { transition: transform 1.2s var(--ease), opacity 0.35s var(--ease), filter 0.35s var(--ease); }
.ex-words {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0;
  padding: 72px 24px 22px;
  background: linear-gradient(to top, var(--shade) 0%, var(--shade) 68%, transparent 100%);
}
.ex-for { font-family: "Cormorant Garamond", serif; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.9375rem; color: var(--indigo); margin: 0 0 0.2rem; }
.ex-words h3 { font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); margin-bottom: 0.3rem; }
.ex-line { margin: 0 0 0.2rem; font-size: 1rem; }
.ex-line .num { font-size: 1.9rem; margin-right: 0.15em; }
.ex-more { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-weight: 600; margin-top: 4px; }
.ex-go { text-decoration: underline; text-decoration-color: var(--cord); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
@media not ((hover: hover) and (pointer: fine)) { .ex-more .tie { display: none; } }
.ex-more .tie { width: 42px; height: 12px; flex: none; overflow: visible; }
.ex-more .tie .cord { stroke-width: 2.2; stroke-dasharray: 1 1.2; stroke-dashoffset: 0; }
/* over a picture link, its small cord loosens and ties again, once per hover */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ex-link:hover .tie .cord { animation: retie 0.75s var(--pull); }
}
@keyframes retie { 0% { stroke-dashoffset: 0; } 42%, 50% { stroke-dashoffset: 1.05; } 100% { stroke-dashoffset: 0; } }
.ex--arch .ex-pic { aspect-ratio: 2 / 3; }
.ex--tall .ex-pic { aspect-ratio: 3 / 4.4; }
.ex--wide .ex-pic { aspect-ratio: 4 / 5; }
.ex--wide .ex-pic img { object-position: 70% 50%; }
/* the circle holds its words in its middle, on a round soft shade */
.ex--circle .ex-words {
  top: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 16% 17%;
  background: radial-gradient(circle closest-side at 50% 50%, var(--shade) 0%, var(--shade) 66%, transparent 100%);
}
@media (min-width: 640px) and (max-width: 1023px) {
  .ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; row-gap: 56px; align-items: start; }
  .ex-intro { grid-column: 1 / -1; }
  .ex--circle { margin-top: 96px; }
  .ex--wide { margin-top: -40px; }
  .ex--tall .ex-pic { aspect-ratio: 2 / 3; }
}
@media (min-width: 1024px) {
  /* the first picture rises beside the intro; the circle sits under the intro's words */
  .ex-grid { grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 56px; align-items: start; }
  .ex-intro { grid-column: 7 / 13; grid-row: 1; align-self: end; padding-top: clamp(24px, 6vh, 72px); }
  .ex--arch { grid-column: 1 / 6; grid-row: 1 / span 2; }
  .ex--circle { grid-column: 7 / 13; grid-row: 2; }
  .ex--circle .ex-pic { width: 88%; margin-inline: auto; }
  .ex--tall { grid-column: 2 / 6; grid-row: 3; margin-top: 24px; }
  .ex--wide { grid-column: 6 / 13; grid-row: 3; margin-top: 140px; }
  .ex--wide .ex-pic { aspect-ratio: 3 / 2; }
  .ex--wide .ex-pic img { object-position: 85% 50%; }
  .ex--wide .ex-words {
    top: 0; right: auto; width: 56%; display: flex; flex-direction: column; justify-content: flex-end;
    padding: 28px 12% 28px 32px;
    background: linear-gradient(to right, var(--shade) 0%, var(--shade) 70%, transparent 100%);
  }
  .ex-words { padding: 96px 32px 28px; }
}
/* over one picture link, the other photographs dim; their words keep full contrast */
@media (hover: hover) and (pointer: fine) {
  .ex-grid:has(.ex-link:hover) .ex-link:not(:hover) .ex-pic img { opacity: 0.45; filter: saturate(0.55); }
  .ex-link:hover .ex-pic img { transform: scale(1.025); }
}
.ex-grid:has(.ex-link:focus-visible) .ex-link:not(:focus-visible) .ex-pic img { opacity: 0.45; filter: saturate(0.55); }
.cursor-tag {
  position: fixed; z-index: 70; left: 0; top: 0; pointer-events: none;
  padding: 7px 13px; border-radius: 999px; background: var(--btn); color: var(--btn-ink);
  font: 600 0.8125rem/1 "Hanken Grotesk", sans-serif; letter-spacing: 0.02em;
  opacity: 0; transition: opacity 0.2s; will-change: transform;
}
.cursor-tag.on { opacity: 1; }
@media not ((hover: hover) and (pointer: fine)) { .cursor-tag { display: none; } }
.consumer { font-size: 0.875rem; color: var(--ink-2); margin: 0.4rem 0 0.2rem; }

/* ---------- in full ---------- */
.full-grid { display: grid; gap: 24px; }
.full-card { position: relative; scroll-margin-top: calc(var(--nav-top) + 16px); }
.full-card .rule { width: 120px; height: 18px; margin-bottom: 12px; }
.full-card .cord { stroke-width: 4; }
.price-list { list-style: none; margin: 1rem 0; }
.price-list li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--hair); }
.price-list .her-name { font-family: "Cormorant Garamond", serif; font-weight: 600; letter-spacing: 0.14em; font-size: 1rem; color: var(--indigo); }
.price-list .her-line { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 1.6rem; line-height: 1.2; white-space: pre-wrap; }
.price-list .draft { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.price-list .draft .num { font-size: 2.4rem; }
.price-list .note { color: var(--ink-2); font-size: 0.9375rem; margin: 0; }
.her-quote { margin: 0.4rem 0 1rem; padding-left: 16px; border-left: 2px solid var(--cord); }
.her-quote blockquote { margin: 0; }
.her-quote p { margin: 0 0 0.3rem; font-style: normal; }
.her-quote figcaption { font-size: 0.875rem; color: var(--ink-2); }
@media (min-width: 900px) { .full-grid { grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 120px); } }
.full-grid { gap: 64px; }
@media (max-width: 767px) { .price-list .her-line, .cross-list .her-line { font-size: 1.2rem; letter-spacing: 0; } .price-list .her-name, .cross-list .her-name { letter-spacing: 0.1em; } }

/* ---------- where: a knot tied in place, its free end running on out of the frame ---------- */
.stone { aspect-ratio: 3 / 2; border-radius: 28px; margin-bottom: clamp(32px, 5vh, 56px); }
.stone img { object-position: 50% 75%; }
@media (min-width: 768px) { .stone { aspect-ratio: 16 / 5; } }
.place { margin-top: 24px; }
.place-cord { width: min(100%, 760px); height: auto; overflow: visible; }
.place-cord .cord { stroke-width: 4.5; }
.place-facts { display: grid; gap: 18px; margin: 12px 0 0; }
.place-facts dt { font-weight: 600; margin-bottom: 4px; }
.place-facts dd { margin: 0; color: var(--ink-2); max-width: 44ch; }
@media (min-width: 768px) {
  .place-facts { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px; }
  .place-away { padding-left: 8%; }
}

/* ---------- the thread: a cord through knots, ending at a button ---------- */
.thread { position: relative; list-style: none; padding-left: 60px; margin: 0; }
.thread-wrap { position: relative; }
.thread-wrap::before {
  content: ""; position: absolute; left: 20px; top: 20px; bottom: 26px; width: 4px; border-radius: 4px;
  background: var(--cord); transform-origin: top center;
}
.thread-wrap.no-end::before { bottom: 30px; }
html.js .thread-wrap:not(.is-in)::before { transform: scaleY(0); }
.thread-wrap.is-in::before { transition: transform 1.2s var(--pull) 0.1s; }
.thread > li { position: relative; padding: 8px 0 28px; }
.thread .knot { position: absolute; left: -60px; top: 0; width: 44px; height: 44px; }
.thread .knot circle { fill: var(--ground); }
.thread .knot .cord { stroke-width: 4; }
.section--alt .thread .knot circle { fill: var(--ground-2); }
.thread h3 { font-size: 1.25rem; margin: 0.35rem 0 0.25rem; }
.thread p { margin: 0; color: var(--ink-2); }
.thread .step-title { font-weight: 600; color: var(--ink); margin: 0.5rem 0 0.15rem; font-size: 1.125rem; }
.thread .her-quote { margin-top: 0.8rem; }
.thread-end { position: relative; padding-left: 60px; }
.thread-end::before { content: ""; position: absolute; left: 20px; top: 50%; width: 40px; height: 4px; margin-top: -2px; border-radius: 4px; background: var(--cord); }
html.js .thread-wrap:not(.is-in) .thread-end::before { transform: scaleX(0); transform-origin: left; }
.thread-wrap.is-in .thread-end::before { transition: transform 0.4s var(--pull) 1.35s; transform-origin: left; }

/* ---------- call section on the front door ---------- */
.call-grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .call-grid { grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 120px); align-items: start; } }

/* ---------- package and inner pages ---------- */
.page-hero { position: relative; padding-top: 32px; padding-bottom: clamp(56px, 8vh, 96px); }
.page-hero-grid { display: grid; gap: 32px; align-items: center; }
.page-hero h1 { font-size: clamp(2.4rem, 1.6rem + 4vw, 4.4rem); line-height: 1.04; margin-bottom: 0.4em; }
.page-hero .sub { font-family: "Zen Maru Gothic", sans-serif; font-weight: 500; font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.7rem); line-height: 1.35; max-width: 40ch; margin-bottom: 1.4rem; }
.page-pic { aspect-ratio: 2 / 3; width: min(100%, 420px); }
.page-pic.circle { aspect-ratio: 1; width: 100%; max-width: 460px; }
.page-pic.wide { aspect-ratio: 4 / 3; width: 100%; }
@media (min-width: 768px) {
  .page-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 6vw, 120px); }
  .page-pic { width: 100%; max-width: 480px; margin-left: auto; }
  .page-pic.wide { max-width: 560px; }
}
@media (min-width: 1024px) {
  .page-hero { min-height: 92vh; min-height: 92svh; display: grid; align-items: center; }
}
/* the household opening: the year ring tied round its photograph */
.ring-hero { position: relative; width: 100%; max-width: 540px; aspect-ratio: 1; }
.ring-hero .ring-pic { position: absolute; inset: 12.5%; width: auto; }
.ring-hero .ring { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
@media (min-width: 768px) { .ring-hero { margin-left: auto; } }
.home-hero .right14 { font-size: 1rem; color: var(--ink); max-width: 56ch; }
/* the about opening: the seal and her line, centred */
.about-hero { text-align: center; }
.about-hero .wrap { display: grid; justify-items: center; }
.about-hero .about-seal { width: min(64vw, 300px); margin: 0.4rem auto 1.6rem; }
.about-hero .about-seal svg { position: absolute; inset: -7%; width: 114%; height: 114%; max-width: none; }
.about-hero .about-seal .cord { stroke-width: 1.4; }
.about-hero h1 { margin-bottom: 0.2em; }
.about-hero .sub { max-width: none; font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.6rem); color: var(--ink); }
.about-hero .lede { max-width: 52ch; margin-inline: auto; }
.about-hero .actions { justify-content: center; }
@media (min-width: 1024px) { .about-hero { display: block; min-height: 0; } .about-hero .about-seal { width: min(30vh, 300px); width: min(30svh, 300px); } }
/* the call opening: its words and picture, then what the call covers as four knots on one line */
.call-hero { display: block; }
@media (min-width: 1024px) { .call-hero { min-height: 0; } }
.call-hero .page-hero-grid { align-items: center; }
.covers-wrap { margin-top: clamp(40px, 6vh, 72px); }
.covers-h { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 1rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--indigo); margin: 0; }
.covers-line { --band-bg: var(--ground); }
.covers-line p { margin: 0; padding-top: 8px; font-weight: 500; }

.tied { position: relative; display: inline-block; font-size: clamp(4.2rem, 3rem + 5vw, 6.6rem); margin: 0.22em 0 0.32em 0.42em; }
.tied .num { font-size: 1em; display: block; padding: 0.06em 0.12em 0; }
.tied svg { position: absolute; left: -0.42em; top: -0.26em; width: calc(100% + 0.84em); height: calc(100% + 0.5em); max-width: none; overflow: visible; }
.tied .cord { stroke-width: 3; }
.price-pair { display: flex; flex-wrap: wrap; gap: 8px 40px; margin: 0.4rem 0 0.6rem; }
.price-pair div { display: grid; }
.price-pair .num { font-size: clamp(3rem, 2.4rem + 3vw, 4.8rem); }
.price-pair span:last-child { color: var(--ink-2); font-size: 1rem; }
.vat { font-weight: 600; margin-bottom: 0.6rem; }
.right14 { font-size: 0.9375rem; color: var(--ink-2); max-width: 60ch; }

.two-col { display: grid; gap: 40px; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 120px); align-items: start; } }
.keeps { display: grid; gap: 32px; margin-top: 8px; }
.keep { padding-top: 20px; border-top: 1px solid var(--hair); }
.keep h3 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.keep ul { list-style: none; }
.keep li { position: relative; padding: 6px 0 6px 22px; }
.keep li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 12px; height: 2px; border-radius: 2px; background: var(--cord); }
.keep--never li::before { background: var(--edge); }
@media (min-width: 768px) { .keeps { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); column-gap: clamp(32px, 5vw, 80px); } }
.mtd { margin-top: 20px; color: var(--ink-2); font-size: 0.9375rem; }

.pic-band { aspect-ratio: 3 / 2; border-radius: 28px; }
@media (min-width: 900px) { .pic-band { aspect-ratio: 16 / 7; } }

.whole { display: grid; gap: 24px; }
.whole .num-big { font-size: clamp(3.6rem, 2.8rem + 4vw, 6rem); }
details.inc { border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); padding: 0; max-width: 640px; }
details.inc summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 0 6px; cursor: pointer; font-weight: 600; list-style: none;
}
details.inc summary::-webkit-details-marker { display: none; }
details.inc summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform 0.25s; }
details.inc[open] summary::after { transform: translateY(3px) rotate(-135deg); }
details.inc summary:hover { background: var(--hover); }
.inc-body { padding: 4px 6px 20px; }
.inc-body h3 { font-size: 1.05rem; margin: 0.8rem 0 0.4rem; }
.inc-body ul { list-style: none; }
.inc-body li { position: relative; padding: 4px 0 4px 22px; }
.inc-body li::before { content: ""; position: absolute; left: 0; top: 0.9em; width: 12px; height: 2px; background: var(--cord); border-radius: 2px; }

/* the household year */
.year { display: grid; gap: 32px; align-items: center; }
.ring { width: min(100%, 420px); margin-inline: auto; }
.ring .cord { stroke-width: 4; }
.ring .k { fill: var(--ground); stroke: var(--cord); stroke-width: 3; }
.ring .k.on { fill: var(--cord); }
.ring text { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 19px; fill: var(--ink); text-anchor: middle; dominant-baseline: middle; }
html.js .ring:not(.is-in) .k, html.js .ring:not(.is-in) text { opacity: 0; }
.ring.is-in .k, .ring.is-in text { transition: opacity 0.35s var(--ease); transition-delay: calc(1.05s + var(--i) * 0.05s); }
.months { list-style: none; margin: 8px 0 12px; }
.months li { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hair); }
.months b { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 1.2rem; letter-spacing: 0.04em; }
@media (min-width: 900px) { .year { grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 120px); align-items: start; } }
.holds { display: grid; gap: 28px; align-content: center; }
@media (min-width: 640px) { .holds { grid-template-columns: 1fr 1fr; } }
.hold { padding-top: 16px; border-top: 1px solid var(--hair); }
.hold h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.hold p { margin: 0; color: var(--ink-2); font-size: 0.975rem; }

/* about: her words, one at a time */
.about-seal { width: min(76vw, 380px); margin-inline: auto; position: relative; }
.about-seal .seal-disc { box-shadow: 0 0 0 1px var(--hair), var(--shadow); }
.words-one { margin: 0; display: grid; align-content: center; padding-block: clamp(20px, 4vh, 44px); }
.words-one blockquote { margin: 0; }
.words-one blockquote p {
  font-family: "Zen Maru Gothic", sans-serif; font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.9rem); line-height: 1.28; max-width: 32ch; margin: 0;
}
.words-one .stroke { width: min(320px, 70%); height: 30px; margin: 22px 0 14px; }
.words-one .cord { stroke-width: 4; }
.words-one figcaption { color: var(--ink-2); }
@media (min-width: 768px) { .words-one:nth-child(even) { justify-items: end; text-align: right; } .words-one:nth-child(even) .stroke { margin-left: auto; } }
.moves { display: grid; gap: 32px; }
.move { padding-top: 20px; border-top: 1px solid var(--hair); }
.move h3 { margin-bottom: 0.3rem; }
.move .asks { margin: 0.6rem 0 0; color: var(--ink-2); }
.move .asks b { color: var(--ink); }
@media (min-width: 900px) { .moves { grid-template-columns: repeat(3, 1fr); column-gap: clamp(32px, 4vw, 64px); } }

/* call page */
.covers { list-style: none; margin: 0.4rem 0 1.2rem; }
.covers li { position: relative; padding: 6px 0 6px 24px; }
.covers li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 13px; height: 2px; background: var(--cord); border-radius: 2px; }

/* ---------- footer ---------- */
.foot { background: var(--ground-2); padding-top: 64px; padding-bottom: 32px; border-top: 1px solid var(--hair); }
.foot-grid { display: grid; gap: 36px; }
.foot-brand .seal-disc { width: 76px; box-shadow: 0 0 0 1px var(--hair); margin-bottom: 14px; }
.foot-name { font-family: "Zen Maru Gothic", sans-serif; font-weight: 700; font-size: 1.125rem; margin-bottom: 0.2rem; }
.foot-tag { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 1.3rem; margin-bottom: 0.8rem; }
.foot h2 { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 1rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--indigo); margin-bottom: 0.6rem; }
.foot ul { list-style: none; }
.foot li a { display: inline-flex; align-items: center; min-height: 44px; }
.foot .small { margin-top: 0.4rem; }
.foot-base { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--hair); display: grid; gap: 4px; }
.foot-base p { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }
/* on phones the footer itself makes room for the pill, so no band shows below it */
@media (max-width: 767px) { .foot { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); } }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 40px; } }

/* ---------- reduced motion: everything settled at once ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  html.js [data-reveal], html.js [data-reveal]:not(.is-in) { opacity: 1 !important; transform: none !important; }
  html.js .draw, html.js [data-reveal] .draw { stroke-dashoffset: 0 !important; }
  html.js [data-tie] { opacity: 1 !important; }
  html.js .scene .lbl, html.js .ring .k, html.js .ring text { opacity: 1 !important; }
  html.js .thread-wrap::before, html.js .thread-end::before { transform: none !important; }
}

/* ---------- forced colours ---------- */
@media (forced-colors: active) {
  .cord { stroke: CanvasText; }
  .thread-wrap::before, .thread-end::before, .go::after, .door::before { background: CanvasText; }
  .btn, .nav-pill a, .nav-pill button, .pill-call span, details.inc { border: 2px solid ButtonText; }
  .nav-pill, .pill-call, .sheet { border: 1px solid CanvasText; }
  .theme input:checked + span { border: 2px solid Highlight; }
}

.obj-right img { object-position: 78% 50%; }
@media (max-width: 767px) {
  .scene text { font-size: 25px; }
  .scene .t-quiet { font-size: 22px; }
  .scene .t-big { font-size: 30px; }
  .scene .wk { font-size: 20px; }
}

/* inner first screens clear the floating pills (kept last so it wins) */
@media (min-width: 768px) { .hero, .page-hero { padding-top: calc(var(--nav-top) + 24px); } }

/* ---------- compositions beyond the two-column default ---------- */
.section { --band-bg: var(--ground); }
.section--alt { --band-bg: var(--ground-2); }

/* a centred statement on open space */
.statement { text-align: center; }
.statement header, .statement .whole, .statement > .wrap > div, .statement > .wrap > p { margin-inline: auto; }
.statement p, .statement h2 { margin-inline: auto; }
.statement h2 { max-width: 22ch; }
.statement .lede { max-width: 52ch; }
.statement .whole { display: block; max-width: 640px; }
.statement .num-big { margin: 0.1em 0 0.2em; }
.statement details.inc { margin: 20px auto 0; text-align: left; }
.statement .mind-h { font-size: 1.1rem; margin: 28px 0 0.4rem; }
.statement .price-pair { justify-content: center; }
.statement .price-pair div { justify-items: center; }
.statement .small { max-width: 60ch; margin-top: 8px; }

/* a picture with its words beside it on open space */
.band-pic { display: grid; gap: 28px; }
.band-frame { aspect-ratio: 4 / 3; border-radius: 30px; }
.band-frame img { object-position: 78% 50%; }
.band-words > :last-child { margin-bottom: 0; }
@media (min-width: 768px) {
  .band-pic { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
  .band-frame { aspect-ratio: 4 / 3; }
}
@media (min-width: 1024px) { .band-pic { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
@media (min-width: 1280px) { .band-frame { aspect-ratio: 3 / 2; } }

/* a cord crossing the full width, the call sitting on it */
.cross { position: relative; display: flex; justify-content: center; padding: 26px 0; margin-top: 18px; }
.cross::before { content: ""; position: absolute; top: 50%; left: 50%; width: 100vw; margin-left: -50vw; height: 4px; margin-top: -2px; border-radius: 4px; background: var(--cord); transform-origin: left center; }
html.js .cross:not(.is-in)::before { transform: scaleX(0); }
.cross.is-in::before { transition: transform 1.2s var(--pull) 0.15s; }
.cross .btn, .cross-btns { position: relative; box-shadow: 0 0 0 12px var(--band-bg); }
.cross-btns { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 12px; border-radius: 999px; background: var(--band-bg); }
.cross-btns .btn { box-shadow: none; }
@media (max-width: 599px) {
  .cross { padding: 0 0 30px; }
  .cross::before { top: auto; bottom: 6px; margin-top: 0; }
  .cross .btn, .cross-btns { box-shadow: none; }
}
.statement.close .whole { margin-top: 8px; }
.statement.close .right14 { margin-top: 20px; }
.close-ask { margin-top: 24px; font-weight: 500; }
.hit { display: inline-flex; align-items: center; min-height: 44px; }

/* her monthly hours as knots along one cord */
.cross-list { list-style: none; position: relative; display: grid; gap: 24px; margin: 28px 0 0; padding: 0 0 0 60px; }
.cross-list::before { content: ""; position: absolute; left: 20px; top: 20px; bottom: 10px; width: 4px; border-radius: 4px; background: var(--cord); transform-origin: top center; }
html.js .cross-list[data-reveal]:not(.is-in)::before, html.js .cross-group:not(.is-in) .cross-list::before { transform: scaleY(0); }
.cross-list.is-in::before, .cross-group.is-in .cross-list::before { transition: transform 1.1s var(--pull) 0.1s; }
.cross-list li { position: relative; display: grid; gap: 2px; min-height: 44px; }
.cross-list .knot { position: absolute; left: -60px; top: 0; width: 44px; height: 44px; }
.cross-list .knot circle { fill: var(--band-bg); }
.cross-list .knot .cord { stroke-width: 4; }
.cross-list .her-name { font-family: "Cormorant Garamond", serif; font-weight: 600; letter-spacing: 0.14em; font-size: 1rem; color: var(--indigo); }
.cross-list .her-line { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 1.6rem; line-height: 1.2; white-space: pre-wrap; }
@media (min-width: 768px) {
  .cross-list { grid-template-columns: repeat(3, 1fr); padding: 70px 0 0; gap: 32px; }
  .cross-list::before { left: 50%; width: 100vw; margin-left: -50vw; top: 20px; bottom: auto; height: 4px; transform-origin: left center; }
  html.js .cross-list[data-reveal]:not(.is-in)::before, html.js .cross-group:not(.is-in) .cross-list::before { transform: scaleX(0); }
  .cross-list .knot { left: 0; top: -70px; transform: rotate(-90deg); }
}

/* a two-up: the words beside the picture on open space */
.overlap { display: grid; gap: 28px; margin-bottom: clamp(40px, 6vh, 72px); }
.overlap-pic { aspect-ratio: 4 / 3; border-radius: 30px; }
.overlap-words > :last-child { margin-bottom: 0; }
@media (min-width: 768px) {
  .overlap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
  .overlap-pic { grid-column: 2; grid-row: 1; }
  .overlap-words { grid-column: 1; grid-row: 1; }
}
@media (min-width: 1280px) { .overlap-pic { aspect-ratio: 16 / 10; } }

@media (prefers-reduced-motion: reduce) {
  html.js .cross::before, html.js .cross-list::before { transform: none !important; }
}
@media (forced-colors: active) {
  .cross::before, .cross-list::before { background: CanvasText; }
}

/* the first screen's quiet cue to read on */
.read-on { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 14px; color: var(--ink-2); font-weight: 500; text-decoration: underline; text-decoration-color: var(--cord); text-underline-offset: 0.22em; }
.read-on:hover { color: var(--ink); }

/* Foundations: the four parts gathered into one knot, beside the list that names them */
.parts-knot { display: none; }
@media (min-width: 900px) { .parts-knot { display: block; width: min(100%, 440px); height: auto; margin-top: clamp(28px, 5vh, 56px); overflow: visible; } }
.parts-knot text { font-family: "Hanken Grotesk", sans-serif; font-size: 19px; font-weight: 500; fill: var(--ink); dominant-baseline: middle; }
.parts-knot .cord { stroke-width: 4; }
.parts-knot .knot-dot { fill: var(--band-bg); stroke-width: 3; }

/* the call's opening line: four knots in a row from the tablet up (kept last so it wins over the three-knot list) */
@media (min-width: 768px) { .cross-list.covers-line { grid-template-columns: repeat(4, 1fr); } .covers-line p { padding-top: 0; } }

/* In full holds three: three columns on wide screens; between 900 and 1199 the home prices take the full row */
@media (min-width: 900px) and (max-width: 1199px) { .full-card--home { grid-column: 1 / -1; } }
@media (min-width: 1200px) { .full-grid { grid-template-columns: repeat(3, 1fr); gap: clamp(40px, 4vw, 80px); } }

/* Foundations' monthly hours: the gaps above the VAT line and her words (kept last so they win, as the attributes they replace did) */
.cross-group > .mt-20 { margin-top: 20px; }
.cross-group > .mt-24 { margin-top: 24px; }