/*
 * Solastone website -- organic modern. Sunlit plaster, linen, travertine, sand, and warm oak; smooth
 * continuous curves; the stone shown in two photographs (concept renders): one feathered into the
 * plaster of the hero, one set into the travertine slab.
 * Always light (no dark color-scheme swap). No inline styles anywhere: the CSP allows only this
 * file and Google Fonts, and every image (textures included) comes from /assets.
 */

:root {
  /* Grounds */
  --plaster: #f3ece3;
  --linen: #f8f4ee;
  --cream: #fbf8f3; /* fields, lifted cards */
  --limestone: #e7dccd;
  --sand: #ece0cf;
  --surface: var(--plaster); /* whatever a section is painted with; used for cut-out rings */

  /* Oak. --oak is for hairlines, outlines, markers (never text); --oak-ink is the text/link oak. */
  --oak: #b8895a;
  --oak-deep: #8f6a45;
  --oak-ink: #7e5b3a;
  --oak-press: #6f5238;
  --on-oak: #fbf8f3;

  /* Text */
  --ink: #5b4c40;
  --ink-strong: #3e332b;
  --ink-soft: #6e5d4f;

  --brass: #b08d42; /* the beta dot and the breath seed, nothing else */
  --error: #8c3a27;
  --field-line: #9f8062; /* 3:1 against the field, so the field edge is visible */

  --hairline: rgba(184, 137, 90, 0.42);
  --hairline-soft: rgba(184, 137, 90, 0.24);
  --shadow-soft: 0 1px 2px rgba(91, 76, 64, 0.04), 0 22px 48px -30px rgba(91, 76, 64, 0.32);
  --shadow-ground: 0 2px 4px rgba(91, 76, 64, 0.04), 0 40px 70px -42px rgba(91, 76, 64, 0.45);

  /* State colors only ever mean states. */
  --green: #6b8f71;
  --yellow: #c9a227;
  --red: #b4533a;
  --purple: #7a6b8f;

  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Work Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --wide: 70rem;
  --measure: 36rem;
  --radius: 2rem;
  --radius-lg: 2.5rem;
  --radius-field: 1rem;

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 1.5rem;
  /* No background here: body's plaster must propagate to the canvas, or it paints over the light below. */
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  position: relative;
  margin: 0;
  background-color: var(--plaster);
  background-image: url("/assets/grain.webp");
  background-size: 256px 256px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/*
 * Morning light through a paned window, falling diagonally across the plaster at the top of every
 * page. ::before is the warm glow and the soft vignette; ::after is the panes and their mullions.
 */
body::before,
body::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: -1;
  pointer-events: none;
}

body::before {
  left: 0;
  right: 0;
  height: min(70rem, 160vh);
  background:
    radial-gradient(ellipse 55% 48% at 70% 26%, rgba(255, 250, 240, 0.8), rgba(255, 250, 240, 0) 72%),
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(243, 236, 227, 0), rgba(226, 212, 195, 0.28) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
  mask-image: linear-gradient(180deg, #000 55%, transparent);
}

body::after {
  right: 0;
  width: min(62rem, 100%);
  height: min(50rem, 120vh);
  background:
    repeating-linear-gradient(112deg, rgba(150, 116, 80, 0) 0 170px, rgba(150, 116, 80, 0.075) 170px 186px),
    repeating-linear-gradient(22deg, rgba(150, 116, 80, 0) 0 150px, rgba(150, 116, 80, 0.06) 150px 164px),
    linear-gradient(112deg, rgba(255, 252, 245, 0) 12%, rgba(255, 252, 245, 0.75) 42%, rgba(255, 250, 240, 0.6) 70%, rgba(255, 250, 240, 0) 92%);
  -webkit-mask-image:
    linear-gradient(112deg, transparent 22%, #000 40%, #000 70%, transparent 86%),
    linear-gradient(22deg, transparent 26%, #000 44%, #000 66%, transparent 84%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(112deg, transparent 22%, #000 40%, #000 70%, transparent 86%),
    linear-gradient(22deg, transparent 26%, #000 44%, #000 66%, transparent 84%);
  mask-composite: intersect;
  filter: blur(7px);
  opacity: 0.9;
}

@media (prefers-reduced-motion: no-preference) {
  body::after {
    animation: sun-drift 70s ease-in-out infinite alternate;
  }
}

@keyframes sun-drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-28px, 14px, 0);
  }
}

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

img {
  height: auto;
}

h1,
h2,
h3 {
  margin: 0 0 0.6em;
  color: var(--ink-strong);
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0.002em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.6rem, 6.4vw, 4.2rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.012em;
  color: var(--ink);
}

h2 {
  font-size: clamp(2rem, 4.6vw, 2.8rem);
  font-weight: 400;
  letter-spacing: 0.008em;
  color: var(--ink);
}

h3 {
  font-size: clamp(1.5rem, 2.8vw, 1.8rem);
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--oak-ink);
  text-decoration-color: var(--hairline);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color 160ms ease, color 160ms ease;
}

a:hover {
  color: var(--oak-press);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--oak-deep);
  outline-offset: 3px;
  border-radius: 0.4rem;
}

::selection {
  background: rgba(184, 137, 90, 0.26);
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 10;
  padding: 0.6rem 1.1rem;
  background: var(--oak-ink);
  color: var(--on-oak);
  border-radius: 999px;
  text-decoration: none;
}

.skip:focus {
  top: 1rem;
}

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

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.measure {
  max-width: var(--measure);
}

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

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 1.35rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink-strong);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 2.15rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.brand:hover {
  color: var(--ink-strong);
}

.brand img {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  box-shadow: 0 6px 14px -8px rgba(91, 76, 64, 0.5);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-block;
  padding-block: 0.5rem;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.site-nav a:hover,
.site-nav a[aria-current] {
  color: var(--ink-strong);
  text-decoration: underline;
  text-decoration-color: var(--oak);
}

@media (max-width: 30rem) {
  .site-nav .nav-optional {
    display: none;
  }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.05rem;
  padding: 0.75rem 1.65rem;
  border: 1px solid var(--oak-ink);
  border-radius: 999px;
  background: var(--oak-ink);
  color: var(--on-oak);
  font: 600 0.98rem/1.2 var(--sans);
  letter-spacing: 0.015em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 12px 26px -16px rgba(111, 82, 56, 0.7);
  transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.btn:hover {
  background: var(--oak-press);
  border-color: var(--oak-press);
  color: var(--on-oak);
  box-shadow: 0 14px 30px -16px rgba(111, 82, 56, 0.8);
}

.btn:focus-visible {
  border-radius: 999px;
}

.btn[disabled] {
  opacity: 0.7;
  cursor: progress;
}

.btn-quiet {
  background: rgba(251, 248, 243, 0.7);
  color: var(--ink-strong);
  border-color: var(--oak);
  box-shadow: none;
}

.btn-quiet:hover {
  background: var(--cream);
  border-color: var(--oak-deep);
  color: var(--ink-strong);
  box-shadow: 0 10px 24px -18px rgba(111, 82, 56, 0.6);
}

/* ---------- sections ---------- */

main {
  display: block;
}

.section {
  position: relative;
  padding-block: clamp(4.5rem, 11vw, 8rem);
}

.kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  color: var(--oak-ink);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  letter-spacing: 0.01em;
}

.kicker::before {
  content: "";
  flex: none;
  width: 1.9rem;
  height: 1px;
  background: var(--oak);
}

.lede {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.4vw, 1.5rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-soft);
}

.soft {
  color: var(--ink-soft);
}

.small {
  font-size: 0.9rem;
}

/*
 * Surfaces, so the page reads as a sequence of rooms rather than one block:
 *   hero      plaster, in the window light, deepening on the right into the studio photo's own wall
 *   the why   a linen panel with an arched top, inset
 *   the app   a full-bleed sand band with a gently curved top edge
 *   the stone an inset travertine slab, stepping up over the end of the sand, the desk photo let into it
 *   waitlist  plaster again; footer a linen band with rounded shoulders
 */

.surface-arch {
  padding-block: clamp(0.5rem, 2vw, 1.5rem) clamp(5rem, 12vw, 8.5rem);
}

.surface-arch > .wrap {
  width: auto;
  max-width: 60rem;
  margin-inline: max(0.75rem, calc((100% - 60rem) / 2));
  padding: clamp(6rem, 12vw, 8.5rem) clamp(1.25rem, 6vw, 4rem) clamp(3.5rem, 8vw, 5.5rem);
  border-radius: 50% 50% var(--radius-lg) var(--radius-lg) / clamp(8rem, 26vw, 20rem) clamp(8rem, 26vw, 20rem) var(--radius-lg) var(--radius-lg);
  background:
    radial-gradient(ellipse 55% 26% at 50% 0%, rgba(255, 252, 246, 0.85), rgba(255, 252, 246, 0) 70%),
    var(--linen);
  box-shadow: inset 0 0 0 1px rgba(184, 137, 90, 0.12), var(--shadow-soft);
}

.surface-sand {
  --surface: var(--sand);
  /* Darker text tones on sand keep AA: soft text 5.3:1, links 5.2:1. */
  --ink-soft: #62534a;
  --oak-ink: #6f5238;
  padding-block: clamp(6rem, 13vw, 9.5rem) clamp(10rem, 22vw, 15rem);
  border-radius: 50% 50% 0 0 / clamp(2.5rem, 7vw, 6rem) clamp(2.5rem, 7vw, 6rem) 0 0;
  background:
    radial-gradient(ellipse 60% 18rem at 30% 0%, rgba(246, 238, 226, 0.7), rgba(246, 238, 226, 0) 80%),
    url("/assets/grain.webp") 0 0 / 256px 256px,
    var(--sand);
}

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

/*
 * The hero photograph (a concept render of the stone on its travertine base, against warm plaster)
 * is blended into the page rather than framed, so there is no visible rectangle:
 *   picture            the photo, feathered on all four sides by a mask (two eased linear gradients,
 *                      intersected). Everything the object occupies is left fully opaque, so the
 *                      walnut and the marble are never see-through and never tinted.
 *   .hero-art::before  the ground the feathered edge dissolves into: the photo's own wall and floor
 *                      tones (read off its edges by scripts/product-images.mjs --sample), laid as a
 *                      vertical gradient with the wall/floor line where the photo has it, carried on
 *                      to the viewport edge, and itself masked so it thins out into the page plaster
 *                      over a much longer distance than the photo's feather. Texture fades first,
 *                      tone fades second; that is what hides the edge.
 * No blend modes. The hero clips its own sideways overflow, so the bleed never causes horizontal
 * scroll. The ground's gradient and mask stops are percentages of its own box: a point p of the
 * photo's height (0 top, 1 bottom) sits at (p + U) / (1 + U + D) of a box grown U above and D below.
 * In the photo the piece spans 16-92% down and 18-85% across, and wall meets floor at 77.5%.
 */
.hero {
  /* Edge tones of product-studio (see product-images.mjs --sample). */
  --studio-wall-top: #a69480;
  --studio-wall: #9b8772;
  --studio-wall-low: #9e8a77;
  --studio-floor-far: #a58c74;
  --studio-floor: #b59b7f;
  --art-w: min(30rem, 100vw);
  position: relative;
  overflow: hidden;
  padding-block: 0 clamp(3.5rem, 9vw, 6rem);
}

.site-header {
  position: relative;
  z-index: 2; /* stays above the hero's ground, which reaches up behind it */
}

/* On the home page the header sits on the faint top of that ground: darker links keep AA (6:1 at worst). */
.home .site-nav a {
  color: var(--ink-strong);
}

.hero .wrap {
  position: relative;
  z-index: 1; /* the words stay above the ground too */
}

.hero-art {
  position: relative;
  width: var(--art-w);
  aspect-ratio: 912 / 1184;
  margin: 0 auto 1.75rem; /* the headline starts where the floor has mostly faded */
}

.hero-art picture,
.hero-art img {
  position: relative;
  width: 100%;
  height: 100%;
}

/* A repeating mask wraps its opaque end round onto a fractional first pixel: a hairline down the edge. */
.hero-art picture,
.hero-art::before {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.hero-art picture {
  -webkit-mask-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 3.5%, rgba(0, 0, 0, 0.5) 8%, rgba(0, 0, 0, 0.9) 12.5%, #000 15.5%, #000 86.5%, rgba(0, 0, 0, 0.9) 89%, rgba(0, 0, 0, 0.5) 93.5%, rgba(0, 0, 0, 0.1) 97.5%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 3.5%, rgba(0, 0, 0, 0.5) 8%, rgba(0, 0, 0, 0.9) 12.5%, #000 15.5%, #000 93.5%, rgba(0, 0, 0, 0.9) 95%, rgba(0, 0, 0, 0.5) 97.2%, rgba(0, 0, 0, 0.1) 99.1%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 3.5%, rgba(0, 0, 0, 0.5) 8%, rgba(0, 0, 0, 0.9) 12.5%, #000 15.5%, #000 86.5%, rgba(0, 0, 0, 0.9) 89%, rgba(0, 0, 0, 0.5) 93.5%, rgba(0, 0, 0, 0.1) 97.5%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 3.5%, rgba(0, 0, 0, 0.5) 8%, rgba(0, 0, 0, 0.9) 12.5%, #000 15.5%, #000 93.5%, rgba(0, 0, 0, 0.9) 95%, rgba(0, 0, 0, 0.5) 97.2%, rgba(0, 0, 0, 0.1) 99.1%, rgba(0, 0, 0, 0) 100%);
  mask-composite: intersect;
}

/*
 * The graded ground: the photo's box grown 10% upward and 22% downward and carried far past both
 * sides (the hero clips it). Stacked (narrow screens) it is a band the full width of the page,
 * fading out above and below.
 */
.hero-art::before {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -22%;
  left: -100vw;
  right: -100vw;
  background:
    url("/assets/grain.webp") 0 0 / 256px 256px,
    linear-gradient(180deg, var(--studio-wall-top) 0%, var(--studio-wall-top) 15.15%, var(--studio-wall) 39.39%, var(--studio-wall-low) 65.3%, var(--studio-floor-far) 67.42%, var(--studio-floor) 75.76%, var(--studio-floor) 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 4.55%, rgba(0, 0, 0, 0.1) 7.58%, rgba(0, 0, 0, 0.5) 11.74%, rgba(0, 0, 0, 0.9) 16.29%, #000 19.7%, #000 78.79%, rgba(0, 0, 0, 0.85) 82.2%, rgba(0, 0, 0, 0.5) 86.36%, rgba(0, 0, 0, 0.15) 91.67%, rgba(0, 0, 0, 0.03) 96.97%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 4.55%, rgba(0, 0, 0, 0.1) 7.58%, rgba(0, 0, 0, 0.5) 11.74%, rgba(0, 0, 0, 0.9) 16.29%, #000 19.7%, #000 78.79%, rgba(0, 0, 0, 0.85) 82.2%, rgba(0, 0, 0, 0.5) 86.36%, rgba(0, 0, 0, 0.15) 91.67%, rgba(0, 0, 0, 0.03) 96.97%, rgba(0, 0, 0, 0) 100%);
}

/*
 * Where the hero can clip sideways only, the ground climbs 36% instead, up behind the header, so
 * the plaster darkens to the photo's wall over a long, slow ramp rather than a band under the nav.
 */
@supports (overflow-x: clip) {
  .hero {
    overflow: visible;
    overflow-x: clip;
  }

  .hero-art::before {
    top: -36%;
    background:
      url("/assets/grain.webp") 0 0 / 256px 256px,
      linear-gradient(180deg, var(--studio-wall-top) 0%, var(--studio-wall-top) 29.11%, var(--studio-wall) 49.37%, var(--studio-wall-low) 71.01%, var(--studio-floor-far) 72.78%, var(--studio-floor) 79.75%, var(--studio-floor) 100%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.06) 5.7%, rgba(0, 0, 0, 0.2) 11.39%, rgba(0, 0, 0, 0.42) 17.09%, rgba(0, 0, 0, 0.64) 22.78%, rgba(0, 0, 0, 0.78) 26.58%, rgba(0, 0, 0, 0.9) 30.38%, #000 33.54%, #000 82.28%, rgba(0, 0, 0, 0.85) 85.13%, rgba(0, 0, 0, 0.5) 88.61%, rgba(0, 0, 0, 0.15) 93.04%, rgba(0, 0, 0, 0.03) 97.47%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.06) 5.7%, rgba(0, 0, 0, 0.2) 11.39%, rgba(0, 0, 0, 0.42) 17.09%, rgba(0, 0, 0, 0.64) 22.78%, rgba(0, 0, 0, 0.78) 26.58%, rgba(0, 0, 0, 0.9) 30.38%, #000 33.54%, #000 82.28%, rgba(0, 0, 0, 0.85) 85.13%, rgba(0, 0, 0, 0.5) 88.61%, rgba(0, 0, 0, 0.15) 93.04%, rgba(0, 0, 0, 0.03) 97.47%, rgba(0, 0, 0, 0) 100%);
  }
}

/*
 * Side by side: the hero slides up under the header, the photo stands right of center and runs off
 * the right edge on narrower windows, and the ground also thins out to the left before the words.
 */
@media (min-width: 44rem) {
  .hero {
    --art-w: clamp(21rem, 44vw, 42rem);
    --art-h: calc(var(--art-w) * 1184 / 912);
    display: grid;
    align-content: center;
    min-height: calc(5rem + var(--art-h) * 1.18);
    margin-top: -5.5rem;
    padding-block: 7rem calc(var(--art-h) * 0.14);
  }

  .hero-copy {
    max-width: min(34rem, 50% - 0.5rem);
  }

  .hero-art {
    position: absolute;
    /* level with the words when they run long, but never so low that the floor's fade leaves the hero */
    top: max(5rem, min(50% - var(--art-h) * 0.5, 100% - var(--art-h) * 1.22));
    left: calc(50% + clamp(1.5rem, 5vw, 4rem));
    margin: 0;
  }

  .hero-art::before {
    left: calc(var(--art-w) * -0.62);
    -webkit-mask-image:
      linear-gradient(90deg, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.08) calc(var(--art-w) * 0.17), rgba(0, 0, 0, 0.25) calc(var(--art-w) * 0.34), rgba(0, 0, 0, 0.45) calc(var(--art-w) * 0.5), rgba(0, 0, 0, 0.64) calc(var(--art-w) * 0.62), rgba(0, 0, 0, 0.8) calc(var(--art-w) * 0.69), rgba(0, 0, 0, 0.93) calc(var(--art-w) * 0.75), #000 calc(var(--art-w) * 0.79)),
      linear-gradient(180deg, rgba(0, 0, 0, 0) 4.55%, rgba(0, 0, 0, 0.1) 7.58%, rgba(0, 0, 0, 0.5) 11.74%, rgba(0, 0, 0, 0.9) 16.29%, #000 19.7%, #000 78.79%, rgba(0, 0, 0, 0.85) 82.2%, rgba(0, 0, 0, 0.5) 86.36%, rgba(0, 0, 0, 0.15) 91.67%, rgba(0, 0, 0, 0.03) 96.97%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(90deg, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.08) calc(var(--art-w) * 0.17), rgba(0, 0, 0, 0.25) calc(var(--art-w) * 0.34), rgba(0, 0, 0, 0.45) calc(var(--art-w) * 0.5), rgba(0, 0, 0, 0.64) calc(var(--art-w) * 0.62), rgba(0, 0, 0, 0.8) calc(var(--art-w) * 0.69), rgba(0, 0, 0, 0.93) calc(var(--art-w) * 0.75), #000 calc(var(--art-w) * 0.79)),
      linear-gradient(180deg, rgba(0, 0, 0, 0) 4.55%, rgba(0, 0, 0, 0.1) 7.58%, rgba(0, 0, 0, 0.5) 11.74%, rgba(0, 0, 0, 0.9) 16.29%, #000 19.7%, #000 78.79%, rgba(0, 0, 0, 0.85) 82.2%, rgba(0, 0, 0, 0.5) 86.36%, rgba(0, 0, 0, 0.15) 91.67%, rgba(0, 0, 0, 0.03) 96.97%, rgba(0, 0, 0, 0) 100%);
    mask-composite: intersect;
  }

  @supports (overflow-x: clip) {
    .hero-art::before {
      -webkit-mask-image:
        linear-gradient(90deg, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.08) calc(var(--art-w) * 0.17), rgba(0, 0, 0, 0.25) calc(var(--art-w) * 0.34), rgba(0, 0, 0, 0.45) calc(var(--art-w) * 0.5), rgba(0, 0, 0, 0.64) calc(var(--art-w) * 0.62), rgba(0, 0, 0, 0.8) calc(var(--art-w) * 0.69), rgba(0, 0, 0, 0.93) calc(var(--art-w) * 0.75), #000 calc(var(--art-w) * 0.79)),
        linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.06) 5.7%, rgba(0, 0, 0, 0.2) 11.39%, rgba(0, 0, 0, 0.42) 17.09%, rgba(0, 0, 0, 0.64) 22.78%, rgba(0, 0, 0, 0.78) 26.58%, rgba(0, 0, 0, 0.9) 30.38%, #000 33.54%, #000 82.28%, rgba(0, 0, 0, 0.85) 85.13%, rgba(0, 0, 0, 0.5) 88.61%, rgba(0, 0, 0, 0.15) 93.04%, rgba(0, 0, 0, 0.03) 97.47%, rgba(0, 0, 0, 0) 100%);
      -webkit-mask-composite: source-in;
      mask-image:
        linear-gradient(90deg, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.08) calc(var(--art-w) * 0.17), rgba(0, 0, 0, 0.25) calc(var(--art-w) * 0.34), rgba(0, 0, 0, 0.45) calc(var(--art-w) * 0.5), rgba(0, 0, 0, 0.64) calc(var(--art-w) * 0.62), rgba(0, 0, 0, 0.8) calc(var(--art-w) * 0.69), rgba(0, 0, 0, 0.93) calc(var(--art-w) * 0.75), #000 calc(var(--art-w) * 0.79)),
        linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.06) 5.7%, rgba(0, 0, 0, 0.2) 11.39%, rgba(0, 0, 0, 0.42) 17.09%, rgba(0, 0, 0, 0.64) 22.78%, rgba(0, 0, 0, 0.78) 26.58%, rgba(0, 0, 0, 0.9) 30.38%, #000 33.54%, #000 82.28%, rgba(0, 0, 0, 0.85) 85.13%, rgba(0, 0, 0, 0.5) 88.61%, rgba(0, 0, 0, 0.15) 93.04%, rgba(0, 0, 0, 0.03) 97.47%, rgba(0, 0, 0, 0) 100%);
      mask-composite: intersect;
    }
  }
}

.hero h1 {
  max-width: 13ch;
}

/* The far end of these lines sits on the first of the graded ground: one step darker keeps AA. */
.hero .lede,
.hero .beta-note {
  color: var(--ink);
}

.hero .lede {
  max-width: 30rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1rem;
  margin-top: 2rem;
}

.beta-note {
  margin-top: 1.4rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.beta-note .dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 4px rgba(176, 141, 66, 0.14);
  vertical-align: 0.1em;
}

/* ---------- the why ---------- */

.essay {
  max-width: var(--measure);
  margin-inline: auto;
}

.essay p {
  font-family: var(--serif);
  font-size: clamp(1.17rem, 2.1vw, 1.32rem);
  line-height: 1.75;
}

.essay .signoff {
  font-style: italic;
  color: var(--ink-soft);
}

.states {
  display: grid;
  gap: 1rem;
  margin: 2.5rem 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .states {
    grid-template-columns: 1fr 1fr;
  }
}

.states li {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0.25rem 0.9rem;
  align-items: start;
  padding: 1.15rem 1.35rem 1.2rem;
  border-radius: 1.75rem;
  background:
    url("/assets/grain.webp") 0 0 / 256px 256px,
    linear-gradient(180deg, #fcf9f4, #f4eee5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(184, 137, 90, 0.08),
    0 1px 2px rgba(91, 76, 64, 0.05),
    0 14px 26px -20px rgba(91, 76, 64, 0.45);
}

.states svg {
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.15rem;
}

/*
 * The gems are small polished cabochons: a radial paint (defined once in the page), a thin brass
 * bezel, and a shadow of their own. The flat color stays as the fallback paint.
 */
.gem-green {
  fill: url(#gem-green) var(--green);
}

.gem-yellow {
  fill: url(#gem-yellow) var(--yellow);
}

.gem-red {
  fill: url(#gem-red) var(--red);
}

.gem-purple {
  fill: url(#gem-purple) var(--purple);
}

.states svg,
.gems svg {
  filter: drop-shadow(0 1px 1.5px rgba(58, 44, 34, 0.38));
}

.states svg > *,
.gems svg > * {
  stroke: rgba(184, 137, 90, 0.5);
  stroke-width: 0.7;
}

.states strong {
  display: block;
  color: var(--ink-strong);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase; /* the four state names are the only all-caps */
}

.states span {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.4;
}

/* ---------- the app ---------- */

.section-head {
  max-width: 40rem;
  margin-bottom: clamp(3rem, 7vw, 4.5rem);
}

.vignettes {
  display: grid;
  gap: clamp(3.5rem, 8vw, 6rem);
}

.vignette {
  display: grid;
  gap: 1.75rem 4rem;
  align-items: center;
}

@media (min-width: 52rem) {
  .vignette {
    grid-template-columns: 1fr 1fr;
  }

  .vignette:nth-child(even) .vignette-art {
    order: 2;
  }
}

.vignette-art {
  justify-self: center;
  width: min(100%, 26rem);
}

.vignette-text {
  max-width: 30rem;
}

.vignette-text p {
  font-size: 1.05rem;
}

/* The turned stone on a round travertine table top. */
.vignette-art > picture {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  padding: 9%;
  background:
    radial-gradient(circle at 31% 25%, rgba(255, 253, 248, 0.8), rgba(255, 253, 248, 0) 52%),
    radial-gradient(circle at 50% 50%, rgba(255, 251, 244, 0) 52%, rgba(150, 124, 96, 0.12) 84%, rgba(112, 88, 66, 0.26) 100%),
    url("/assets/travertine.webp") center / 320px 320px,
    var(--limestone);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.75),
    inset 0 -20px 34px -20px rgba(112, 88, 66, 0.4),
    0 2px 4px rgba(91, 76, 64, 0.06),
    0 20px 30px -24px rgba(91, 76, 64, 0.45),
    0 50px 70px -42px rgba(91, 76, 64, 0.5);
}

/* The mandala in a smooth pebble: a shallow dish, lit from the upper left. */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: 47% 53% 49% 51% / 45% 47% 53% 55%;
  background: var(--linen);
  box-shadow:
    0 2px 4px rgba(91, 76, 64, 0.06),
    0 20px 30px -24px rgba(91, 76, 64, 0.45),
    0 54px 76px -44px rgba(91, 76, 64, 0.5);
}

.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 30% 24%, rgba(255, 253, 248, 0.55), rgba(255, 253, 248, 0) 46%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.8),
    inset 0 0 44px rgba(120, 96, 72, 0.16),
    inset 0 -26px 40px -26px rgba(112, 88, 66, 0.35);
}

figure {
  margin: 0;
}

figcaption {
  margin-top: 1.1rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
  text-align: center;
}

/* Breath: a circle that fills and empties. Still when motion is reduced. */
.breath {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  max-width: 100%;
  border-radius: 50%;
}

.breath-ring,
.breath-fill {
  position: absolute;
  border-radius: 50%;
}

/* The bead track: a shallow groove in the surface, lit from above. */
.breath-ring {
  inset: 8%;
  border: 0;
  box-shadow:
    inset 0 0 0 1px rgba(150, 120, 88, 0.3),
    inset 0 1px 2px rgba(91, 76, 64, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.7);
}

.breath-ring.inner {
  inset: 30%;
  border: 1px dashed rgba(184, 137, 90, 0.28);
  box-shadow: none;
}

/* The breath itself: a sphere -- specular highlight upper left, soft terminator, warm bounce below. */
.breath-fill {
  inset: 18%;
  background:
    radial-gradient(circle at 33% 26%, rgba(255, 255, 255, 0.95) 0 5%, rgba(255, 255, 255, 0) 24%),
    radial-gradient(circle at 70% 86%, rgba(255, 243, 224, 0.6), rgba(255, 243, 224, 0) 42%),
    radial-gradient(circle at 36% 30%, #fdfaf4 0%, #f5eee3 38%, #e9dccb 70%, #dbcab3 88%, #cdbba3 100%);
  box-shadow:
    inset -10px -12px 26px rgba(120, 96, 72, 0.2),
    inset 8px 9px 20px rgba(255, 255, 255, 0.5),
    0 10px 18px -12px rgba(91, 76, 64, 0.35),
    0 34px 46px -30px rgba(91, 76, 64, 0.5);
  transform: scale(0.72);
}

.breath-seed {
  position: absolute;
  top: calc(8% - 0.45rem);
  left: calc(50% - 0.45rem);
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #f0dcae 0 12%, #d8b777 45%, var(--brass) 78%, #8d6f30 100%);
  box-shadow:
    0 0 0 3px var(--surface),
    0 2px 3px rgba(58, 44, 34, 0.4),
    inset 0 -1px 2px rgba(96, 70, 24, 0.55);
}

.breath-word {
  position: relative;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  color: var(--ink-soft);
}

@media (prefers-reduced-motion: no-preference) {
  .breath-fill {
    animation: breathe 10s ease-in-out infinite;
  }

  .breath-orbit {
    position: absolute;
    inset: 0;
    animation: orbit 10s ease-in-out infinite;
  }

  .breath-word::after {
    content: "";
  }
}

@keyframes breathe {
  0%,
  100% {
    transform: scale(0.72);
  }
  40% {
    transform: scale(1);
  }
  48% {
    transform: scale(1);
  }
}

@keyframes orbit {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* A letter from your stone: a cream card. */
.letter {
  position: relative;
  padding: clamp(1.8rem, 5vw, 2.6rem);
  border-radius: var(--radius);
  background:
    url("/assets/grain.webp") 0 0 / 256px 256px,
    linear-gradient(170deg, #fdfbf7, #f6f0e6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(91, 76, 64, 0.05),
    0 18px 28px -22px rgba(91, 76, 64, 0.4),
    0 46px 66px -44px rgba(91, 76, 64, 0.5);
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.7;
}

.letter p:last-child {
  margin: 1.4rem 0 0;
  font-style: italic;
  color: var(--oak-ink);
}

/* Also in the app: a rounded linen pill on the sand. */
.also {
  display: grid;
  gap: 2rem 2.75rem;
  margin: clamp(4.5rem, 10vw, 7rem) 0 0;
  padding: clamp(2.25rem, 6vw, 4rem) clamp(1.75rem, 6vw, 4.5rem);
  border-radius: clamp(2.5rem, 7vw, 5.5rem);
  background: var(--linen);
  box-shadow: var(--shadow-soft);
  list-style: none;
}

@media (min-width: 40rem) {
  .also {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .also {
    grid-template-columns: repeat(3, 1fr);
  }
}

.also li {
  position: relative;
  padding-top: 1.2rem;
}

.also li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.25rem;
  height: 1px;
  background: var(--oak);
}

.also h3 {
  margin-bottom: 0.35rem;
  font-size: 1.32rem;
}

.also p {
  margin: 0;
  color: #6e5d4f; /* on linen, the standard soft text */
}

/* ---------- the stone is coming: a travertine slab ---------- */

.limestone {
  /* Darker text tones on travertine, so even its deepest mottle keeps AA (links 5.3:1, soft text 6:1). */
  --ink-soft: #5b4c40;
  --oak-ink: #6f5238;
  --surface: var(--limestone);
  z-index: 1;
  margin-top: calc(-1 * clamp(6.5rem, 15vw, 10.5rem));
  margin-inline: clamp(0.6rem, 2.5vw, 2rem);
  border-radius: clamp(2rem, 6vw, 4.5rem);
  background:
    radial-gradient(ellipse 60% 50% at 20% 10%, rgba(255, 251, 244, 0.5), rgba(255, 251, 244, 0) 70%),
    linear-gradient(180deg, rgba(248, 243, 236, 0.35), rgba(248, 243, 236, 0.1)),
    url("/assets/travertine.webp") center / 512px 512px,
    var(--limestone);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 40px 70px -50px rgba(91, 76, 64, 0.5);
}

.stone .wrap {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

@media (min-width: 56rem) {
  .stone .wrap {
    grid-template-columns: 1fr 1fr;
  }
}

/*
 * The desk scene: a large photograph set into the travertine, like a print let into the slab. Its
 * lower half is dark oak and leather, which would feather into the pale stone as a smudge, so it is
 * cropped instead: generous corners (one wide, like the waitlist card), the recess's upper lip
 * shading the top of the print, light catching the lower lip, and only a breath of ground shadow.
 */
.stone-art {
  justify-self: center;
  width: min(100%, 31rem);
}

.stone-art picture {
  position: relative;
  overflow: hidden;
  border-radius: clamp(1.75rem, 5vw, 2.75rem) clamp(4rem, 14vw, 7.5rem) clamp(1.75rem, 5vw, 2.75rem) clamp(1.75rem, 5vw, 2.75rem);
  background: #8a7560; /* the photo's mean tone, while it loads */
  box-shadow:
    0 1.5px 0 rgba(255, 253, 248, 0.85),
    0 0 0 1px rgba(112, 88, 66, 0.1),
    0 30px 50px -36px rgba(91, 76, 64, 0.45);
}

.stone-art picture::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 3px 8px -1px rgba(43, 32, 24, 0.45),
    inset 3px 0 8px -4px rgba(43, 32, 24, 0.3),
    inset 0 0 0 1px rgba(43, 32, 24, 0.14);
}

.stone-art img {
  width: 100%;
}

.stone-art figcaption {
  margin-top: 1.4rem;
}

.label-tag {
  display: inline-block;
  margin: 0 0 1.1rem;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--oak);
  border-radius: 999px;
  background: rgba(251, 248, 243, 0.6);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--oak-ink);
}

.details {
  display: grid;
  gap: 1.05rem;
  margin: 1.9rem 0;
  padding: 0;
  list-style: none;
}

.details li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.9rem;
  align-items: start;
}

.details svg {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.2rem;
}

/* The icons carry a lamplight amber as attributes; in daylight they are oak. */
.details svg [stroke] {
  stroke: var(--oak-deep);
}

.details svg [fill="#C9994A"] {
  fill: var(--oak-deep);
}

.details strong {
  font-weight: 700;
  color: var(--ink-strong);
}

.details span {
  color: var(--ink);
}

.gems {
  display: inline-flex;
  gap: 0.3rem;
  vertical-align: -0.15em;
}

.gems svg {
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
}

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

.form-card {
  padding: clamp(1.6rem, 5vw, 2.75rem);
  border-radius: var(--radius-lg);
  background: var(--linen);
  box-shadow: inset 0 0 0 1px rgba(184, 137, 90, 0.14), var(--shadow-ground);
}

.waitlist {
  padding-block: clamp(6rem, 14vw, 10rem) clamp(5rem, 12vw, 8rem);
}

.waitlist .wrap {
  display: grid;
  gap: 2.5rem 4.5rem;
  align-items: start;
}

@media (min-width: 56rem) {
  .waitlist .wrap {
    grid-template-columns: 1fr 1fr;
  }

  .waitlist .form-card {
    margin-top: 2.5rem;
  }
}

.waitlist .form-card {
  border-radius: var(--radius-lg) clamp(4rem, 12vw, 7rem) var(--radius-lg) var(--radius-lg);
}

.field {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 1.35rem;
}

.field label,
fieldset legend {
  color: var(--ink-strong);
  font-weight: 600;
  font-size: 0.97rem;
}

.field .hint {
  font-size: 0.86rem;
  color: var(--ink-soft);
}

input[type="email"],
input[type="text"],
select,
textarea {
  width: 100%;
  min-height: 3.1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-field);
  background-color: var(--cream);
  color: var(--ink-strong);
  font: 1rem/1.4 var(--sans);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

input[type="email"]:hover,
input[type="text"]:hover,
select:hover,
textarea:hover {
  border-color: var(--oak-deep);
}

textarea {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.6;
}

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--oak-deep) 50%), linear-gradient(135deg, var(--oak-deep) 50%, transparent 50%);
  background-position: calc(100% - 1.3rem) 55%, calc(100% - 0.95rem) 55%;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--oak-deep);
  outline-offset: 2px;
  border-color: var(--oak-deep);
  border-radius: var(--radius-field);
  box-shadow: 0 0 0 5px rgba(184, 137, 90, 0.16);
}

fieldset {
  margin: 0 0 1.35rem;
  padding: 0;
  border: 0;
}

fieldset legend {
  margin-bottom: 0.5rem;
  padding: 0;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-block: 0.4rem;
  cursor: pointer;
}

.check input {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0.2rem 0 0;
  accent-color: var(--oak-ink);
}

.check input:focus-visible {
  border-radius: 0.3rem;
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  min-height: 1.6em;
  margin: 1rem 0 0;
  font-size: 0.96rem;
}

.form-status[data-kind="error"] {
  color: var(--error);
}

.form-status[data-kind="ok"] {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink-strong);
}

.fine {
  margin: 1rem 0 0;
  font-size: 0.86rem;
  color: var(--ink-soft);
}

/* ---------- pages (support, terms, privacy, 404) ---------- */

.page-head {
  padding-block: clamp(2.5rem, 8vw, 5.5rem) clamp(1.5rem, 4vw, 2.5rem);
}

.page-head p {
  max-width: 38rem;
}

/* Support: a sand header panel with one soft, wide curve. */
.page-head:not(.prose) {
  --ink-soft: #62534a;
  --oak-ink: #6f5238;
  margin-top: clamp(0.5rem, 2vw, 1.5rem);
  padding: clamp(2.75rem, 8vw, 5rem) clamp(1.5rem, 5vw, 3.75rem) clamp(2rem, 5vw, 3.5rem);
  border-radius: var(--radius-lg) clamp(5rem, 18vw, 14rem) var(--radius-lg) var(--radius-lg);
  background:
    radial-gradient(ellipse 50% 90% at 85% 0%, rgba(246, 238, 226, 0.75), rgba(246, 238, 226, 0) 80%),
    url("/assets/grain.webp") 0 0 / 256px 256px,
    var(--sand);
}

.page-head:not(.prose) h1 {
  margin-bottom: 0.35em;
}

.page-head:not(.prose) .lede {
  margin-bottom: 0;
}

/* Terms, privacy, 404: the text on a linen sheet with an arched top. */
.prose {
  max-width: 44rem;
  padding-bottom: clamp(4rem, 9vw, 6rem);
}

.prose.page-head {
  max-width: 48rem;
  margin: clamp(0.5rem, 2vw, 1.5rem) auto clamp(4rem, 9vw, 6rem);
  padding: clamp(4rem, 10vw, 7rem) clamp(1.5rem, 6vw, 4rem) clamp(3rem, 7vw, 4.5rem);
  border-radius: 50% 50% var(--radius-lg) var(--radius-lg) / clamp(6rem, 18vw, 12rem) clamp(6rem, 18vw, 12rem) var(--radius-lg) var(--radius-lg);
  background:
    radial-gradient(ellipse 55% 14rem at 50% 0%, rgba(255, 252, 246, 0.85), rgba(255, 252, 246, 0) 80%),
    var(--linen);
  box-shadow: inset 0 0 0 1px rgba(184, 137, 90, 0.12), var(--shadow-soft);
}

.prose h2 {
  margin-top: 2.8rem;
  font-size: clamp(1.6rem, 3.4vw, 2.05rem);
  scroll-margin-top: 1.5rem;
}

.prose h3 {
  margin-top: 1.9rem;
  font-size: 1.32rem;
  scroll-margin-top: 1.5rem;
}

.prose p,
.prose li {
  font-size: 1.04rem;
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
  margin: 0 0 1.1em;
}

.prose li {
  margin-bottom: 0.55rem;
}

.prose li::marker {
  color: var(--oak);
}

.prose strong {
  color: var(--ink-strong);
  font-weight: 700;
}

.prose .placeholder {
  padding: 0 0.25em;
  border-bottom: 1px dashed var(--oak);
  background: rgba(184, 137, 90, 0.15);
  border-radius: 0.3em;
}

.toc {
  margin: 0 0 2.75rem;
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius);
  background: rgba(243, 236, 227, 0.85);
  box-shadow: inset 0 0 0 1px rgba(184, 137, 90, 0.1);
}

.toc h2 {
  margin: 0 0 0.6rem;
  font-size: 1.2rem;
  font-weight: 500;
}

.toc ol {
  columns: 2 14rem;
  column-gap: 2rem;
  margin: 0;
  padding-left: 1.2rem;
}

.toc li {
  margin-bottom: 0.3rem;
  font-size: 0.95rem;
  break-inside: avoid;
}

.draft-banner {
  margin: 0 0 2.25rem;
  padding: 1rem 1.35rem;
  border: 1px solid var(--hairline);
  border-radius: 1.5rem;
  background: rgba(243, 236, 227, 0.85);
  font-size: 0.95rem;
}

.support-grid {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(4.5rem, 10vw, 7rem);
}

@media (min-width: 60rem) {
  .support-grid {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
  }
}

.faq-group,
.faq-group + .faq-group {
  margin-top: 2.75rem;
}

.faq-group h2 {
  font-size: clamp(1.45rem, 3vw, 1.8rem);
  margin-bottom: 0.9rem;
}

details {
  border-top: 1px solid var(--hairline-soft);
}

details:last-of-type {
  border-bottom: 1px solid var(--hairline-soft);
}

summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 0;
  color: var(--ink-strong);
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  font-family: var(--sans);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--oak-ink);
  transition: background-color 160ms ease, border-color 160ms ease;
}

summary:hover::after {
  border-color: var(--oak);
  background: var(--cream);
}

details[open] summary::after {
  content: "\2212";
}

details .answer {
  padding: 0 0 1.2rem;
  color: var(--ink-soft);
}

details .answer p:last-child {
  margin-bottom: 0;
}

.crisis {
  margin-top: 0;
  padding: 1.6rem 1.75rem;
  border-radius: var(--radius) var(--radius) var(--radius) clamp(3rem, 9vw, 5rem);
  background: rgba(248, 244, 238, 0.9);
  box-shadow: inset 0 0 0 1px rgba(184, 137, 90, 0.16), var(--shadow-soft);
}

.crisis h2 {
  font-size: 1.45rem;
  margin-bottom: 0.7rem;
}

.crisis ul {
  margin: 0;
  padding-left: 1.2rem;
}

.crisis li {
  margin-bottom: 0.45rem;
}

.crisis li::marker {
  color: var(--oak);
}

.sticky {
  position: static;
}

@media (min-width: 60rem) {
  .sticky {
    position: sticky;
    top: 1.5rem;
  }
}

/* ---------- journal ---------- */

.page-head-aside {
  margin: 0.75rem 0 0;
}

.page-head:not(.prose) .page-head-aside {
  margin-bottom: 0;
}

/* The index: posts down one column, each a linen leaf with a soft, uneven corner. */
.journal-list {
  display: grid;
  gap: 1.25rem;
  max-width: 46rem;
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(4.5rem, 10vw, 7rem);
}

.journal-item {
  padding: clamp(1.6rem, 4vw, 2.4rem) clamp(1.5rem, 5vw, 2.75rem);
  border-radius: var(--radius) var(--radius) clamp(2.5rem, 7vw, 4.5rem) var(--radius);
  background:
    url("/assets/grain.webp") 0 0 / 256px 256px,
    var(--linen);
  box-shadow: inset 0 0 0 1px rgba(184, 137, 90, 0.12), var(--shadow-soft);
}

.journal-item h2 {
  margin-bottom: 0.45em;
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
}

.journal-item h2 a {
  color: var(--ink-strong);
  text-decoration: none;
}

.journal-item h2 a:hover {
  color: var(--oak-press);
  text-decoration: underline;
  text-decoration-color: var(--oak);
}

.journal-item > p {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--ink);
}

.journal-item-date,
.post-meta {
  margin: 0 0 0.6rem;
  font-family: var(--sans);
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

.journal-item .journal-item-date {
  font-family: var(--sans);
  font-size: 0.86rem;
}

.journal-empty {
  font-family: var(--serif);
  font-size: 1.15rem;
}

/* A post: one reading column on a linen sheet with an arched top, like the policy pages. */
.post {
  max-width: 48rem;
  margin: clamp(0.5rem, 2vw, 1.5rem) auto clamp(4rem, 9vw, 6rem);
  padding: clamp(4rem, 10vw, 6.5rem) clamp(1.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 4.5rem);
  border-radius: 50% 50% var(--radius-lg) var(--radius-lg) / clamp(6rem, 18vw, 12rem) clamp(6rem, 18vw, 12rem) var(--radius-lg) var(--radius-lg);
  background:
    radial-gradient(ellipse 55% 14rem at 50% 0%, rgba(255, 252, 246, 0.85), rgba(255, 252, 246, 0) 80%),
    var(--linen);
  box-shadow: inset 0 0 0 1px rgba(184, 137, 90, 0.12), var(--shadow-soft);
}

.post-head {
  max-width: 66ch;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.post-head .kicker {
  text-decoration: none;
}

.post-head .kicker:hover {
  text-decoration: underline;
  text-decoration-color: var(--oak);
}

.post-head h1 {
  font-size: clamp(2.3rem, 6vw, 3.6rem);
  margin-bottom: 0.45em;
}

.post-head .draft-banner {
  margin-bottom: 2rem;
  font-size: 0.9rem;
}

.post-head .draft-banner code {
  font-size: 0.9em;
}

.post-meta {
  margin-bottom: 0.25rem;
}

.post-author {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-soft);
}

.post-body {
  max-width: 66ch;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.2vw, 1.42rem);
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink-strong);
}

.post-body p {
  margin-bottom: 1.35em;
}

.post-body h2 {
  margin-top: 2.2em;
  font-size: clamp(1.5rem, 3.2vw, 1.9rem);
  scroll-margin-top: 1.5rem;
}

.post-body h3 {
  margin-top: 1.8em;
  font-size: 1.3rem;
  scroll-margin-top: 1.5rem;
}

.post-body ul {
  padding-left: 1.25rem;
  margin: 0 0 1.35em;
}

.post-body li {
  margin-bottom: 0.5em;
}

.post-body li::marker {
  color: var(--oak);
}

.post-body blockquote {
  margin: 0 0 1.35em;
  padding: 0.2rem 0 0.2rem 1.4rem;
  border-left: 1px solid var(--oak);
  font-style: italic;
  color: var(--ink-soft);
}

.post-body blockquote p:last-child {
  margin-bottom: 0;
}

.post-body strong {
  color: var(--ink-strong);
  font-weight: 500;
}

.post-body code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85em;
  padding: 0.05em 0.35em;
  border-radius: 0.4em;
  background: rgba(184, 137, 90, 0.12);
}

/* The quiet box at the end of a post. */
.post-end {
  max-width: 66ch;
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding: clamp(1.5rem, 4vw, 2rem) clamp(1.4rem, 4vw, 2rem);
  border-radius: 1.75rem 1.75rem 1.75rem clamp(2.5rem, 6vw, 3.5rem);
  background: rgba(243, 236, 227, 0.85);
  box-shadow: inset 0 0 0 1px rgba(184, 137, 90, 0.12);
}

.post-end-lede {
  margin-bottom: 1.1rem;
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.post-end-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin: 0;
}

.post-end-more {
  font-size: 0.98rem;
}

/* ---------- for therapists ---------- */

.therapists {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(3rem, 6vw, 4.5rem);
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(4.5rem, 10vw, 7rem);
}

@media (min-width: 60rem) {
  .therapists {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
  }
}

.therapists-main {
  min-width: 0;
  max-width: 44rem;
}

.therapists-main > section {
  scroll-margin-top: 1.5rem;
}

.therapists-main > section + section {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--hairline-soft);
}

.therapists-main h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.05rem);
  margin-bottom: 0.7em;
}

.therapists-main p,
.therapists-main li {
  font-size: 1.04rem;
}

.therapists-main .lede-plain {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.3rem);
  line-height: 1.65;
}

.therapists-main ul {
  padding-left: 1.25rem;
  margin: 0 0 1.1em;
}

.therapists-main li {
  margin-bottom: 0.6rem;
}

.therapists-main li::marker {
  color: var(--oak);
}

.therapists-main strong {
  color: var(--ink-strong);
  font-weight: 700;
}

.therapists-main .states {
  margin: 1.5rem 0 1.75rem;
}

/* The example summary: the plain-text output, on a cream sheet. */
.sample {
  margin: 1.5rem 0;
  padding: clamp(1.25rem, 4vw, 1.9rem) clamp(1.2rem, 4vw, 1.8rem);
  border-radius: 1.5rem;
  background:
    url("/assets/grain.webp") 0 0 / 256px 256px,
    linear-gradient(170deg, #fdfbf7, #f6f0e6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(91, 76, 64, 0.05),
    0 18px 28px -22px rgba(91, 76, 64, 0.4);
}

/* Long lines wrap, as they would in a message; the indent is kept by the leading spaces. */
.sample pre {
  margin: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ink-strong);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}

.sample figcaption {
  margin-top: 1rem;
  text-align: left;
}

.therapists-aside .form-card {
  border-radius: var(--radius-lg) clamp(4rem, 12vw, 7rem) var(--radius-lg) var(--radius-lg);
}

.therapists-aside .form-card h2 {
  font-size: clamp(1.45rem, 3vw, 1.8rem);
}

/* ---------- footer: a linen band with rounded shoulders ---------- */

.site-footer {
  position: relative;
  padding-block: clamp(3rem, 7vw, 4.5rem) 3.5rem;
  border-radius: clamp(2rem, 6vw, 4.5rem) clamp(2rem, 6vw, 4.5rem) 0 0;
  background:
    url("/assets/grain.webp") 0 0 / 256px 256px,
    var(--linen);
  box-shadow: inset 0 1px 0 rgba(184, 137, 90, 0.16);
  font-size: 0.94rem;
}

.site-footer .safety {
  max-width: 44rem;
  margin-bottom: 1.5rem;
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.6;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.6rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.site-footer ul a {
  display: inline-block;
  padding-block: 0.35rem;
  color: var(--ink);
}

.site-footer ul a:hover {
  color: var(--ink-strong);
}

.site-footer .copyright {
  margin: 0;
  color: var(--ink-soft);
}

/* ---------- gentle entrance ---------- */

@media (prefers-reduced-motion: no-preference) {
  .rise {
    animation: rise 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .rise.later {
    animation-delay: 180ms;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}