/* ═══════════════════════════════════════════════════════════════════════════
   LOOM — the public page, cut from the same membrane as the product.

   The physical model, held everywhere:
   · The page IS the material — warm bone vellum, finely grained, never boxed.
   · What is PRINTED on it is ink. What is UNDER it deforms it.
   · No blend modes. No glass. No photographs. Alpha light and alpha shadow
     only, from one raking light, upper-left.
   · One easing curve. Warmth only where something is alive.

   Tokens, relief recipes, radii and motion are lifted unchanged from the
   product's `app/src/index.css` so the two surfaces are one surface.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* the material */
  --m-base: #e9e4da;
  --m-hi: #f3efe7;
  --m-lo: #ddd6c9;

  /* ink — faint is quiet, not illegible: just above 4:1 on the membrane */
  --m-ink: #211e19;
  --m-ink-soft: #6c665c;
  --m-ink-faint: #7e766a;

  /* light + shadow of the emboss (alpha only, never blended) */
  --m-light: 255 255 255;
  --m-shade: 96 84 66;

  /* transmitted warmth, and the rare violet of synthesis */
  --m-amber: 185 127 61;
  --m-violet: 122 96 168;

  --danger: #9c3a2e;
  --ok: #4c7050;
  --bronze: #8a6d3b;
  --hairline: color-mix(in srgb, var(--m-ink) 11%, transparent);

  --serif: 'Iowan Old Style', 'Palatino Nova', Palatino, Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* one coherent physics */
  --spring: cubic-bezier(0.3, 0.9, 0.32, 1);
  --slow: 620ms;
  --quick: 200ms;

  /* the signature: containers are never stamped */
  --radius: 30px 34px 31px 35px / 34px 30px 35px 31px;

  color-scheme: light;
}

/* night: not an inversion — the same membrane, unlit. Neutral near-black,
   no blue cast, no brown. Clay is the single warm accent. */
:root[data-theme='dark'] {
  --m-base: #1a1a1a;
  --m-hi: #242424;
  --m-lo: #141414;
  --m-ink: #e8e6e3;
  --m-ink-soft: #a3a09b;
  --m-ink-faint: #8a8680;
  --m-light: 255 255 255;
  --m-shade: 0 0 0;
  --m-amber: 217 119 87;
  --m-violet: 154 130 200;
  --danger: #e0806c;
  --ok: #7fa88a;
  --bronze: #d97757;
  color-scheme: dark;
}

/* relief recipes — light above, shade below, both soft and generous */
:root {
  --raise:
    -8px -10px 22px rgb(var(--m-light) / 0.6),
    10px 14px 28px rgb(var(--m-shade) / 0.16);
  --raise-strong:
    -10px -12px 26px rgb(var(--m-light) / 0.75),
    14px 18px 34px rgb(var(--m-shade) / 0.22);
  --sink:
    inset 6px 8px 16px rgb(var(--m-shade) / 0.14),
    inset -6px -8px 16px rgb(var(--m-light) / 0.55);
  --sink-soft:
    inset 3px 4px 9px rgb(var(--m-shade) / 0.11),
    inset -3px -4px 9px rgb(var(--m-light) / 0.5);
}
:root[data-theme='dark'] {
  --raise:
    -6px -8px 18px rgb(var(--m-light) / 0.045),
    10px 14px 30px rgb(var(--m-shade) / 0.6);
  --raise-strong:
    -8px -10px 22px rgb(var(--m-light) / 0.06),
    14px 18px 38px rgb(var(--m-shade) / 0.72);
  --sink:
    inset 6px 8px 16px rgb(var(--m-shade) / 0.55),
    inset -4px -6px 14px rgb(var(--m-light) / 0.04);
  --sink-soft:
    inset 3px 4px 9px rgb(var(--m-shade) / 0.45),
    inset -2px -3px 8px rgb(var(--m-light) / 0.035);
}

/* ---------- the substrate ---------- */

* { box-sizing: border-box; margin: 0; }
html { background: var(--m-base); scroll-behavior: smooth; }
html, body { min-height: 100%; }

body {
  background: var(--m-base);
  color: var(--m-ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* the grain of grown material — barely there, normal compositing */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55 0.85' numOctaves='3' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.35 0 0 0 0 0.32 0 0 0 0 0.27 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
}
:root[data-theme='dark'] body::before { opacity: 0.07; }

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; color: inherit; background: none; border: none; }
::selection { background: rgb(var(--m-amber) / 0.22); }

:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1.5px rgb(var(--m-amber) / 0.5),
    0 0 18px rgb(var(--m-amber) / 0.22);
  border-radius: 8px;
}

/* warmth follows the hand — light through the weave, nothing more */
.m-cursor-glow {
  position: fixed; left: 0; top: 0; z-index: 0;
  width: 700px; height: 700px; margin: -350px 0 0 -350px;
  pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgb(var(--m-amber) / 0.09), rgb(var(--m-amber) / 0.03) 45%, transparent 70%);
  transition: opacity 900ms var(--spring);
  will-change: transform;
}

/* ---------- shell ---------- */

.shell {
  position: relative; z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));
}

.topbar {
  display: flex; align-items: baseline; gap: 28px; flex-wrap: wrap;
  padding: calc(26px + env(safe-area-inset-top)) 0 18px;
}

/* the wordmark is not printed — it is struck into the vellum. A blind deboss
   takes no ink: the letters are the surface itself, a hair below the plane. */
.wordmark {
  font-family: var(--serif); font-size: 21px; letter-spacing: 0.3em;
  color: color-mix(in srgb, var(--m-base) 93%, rgb(var(--m-shade)));
  text-shadow:
    -1px -1px 1px rgb(var(--m-shade) / 0.3),
    1px 1px 0 rgb(var(--m-light) / 0.7);
}
:root[data-theme='dark'] .wordmark {
  color: color-mix(in srgb, var(--m-base) 84%, rgb(var(--m-shade)));
  text-shadow:
    -1px -1px 1px rgb(var(--m-shade) / 0.8),
    1px 1px 0 rgb(var(--m-light) / 0.095);
}

.topnav { display: flex; gap: 22px; flex-wrap: wrap; }
.topnav a {
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--m-ink-faint);
  transition: color 300ms var(--spring), text-shadow 300ms var(--spring);
}
.topnav a:hover { color: var(--m-ink); text-shadow: 0 1px 0 rgb(var(--m-light) / 0.85); }
:root[data-theme='dark'] .topnav a:hover { text-shadow: 0 -1px 0 rgb(0 0 0 / 0.7); }

.topbar .who { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.theme-toggle {
  position: relative; width: 58px; height: 28px;
  border-radius: 999px;
  background: var(--m-base);
  box-shadow: var(--sink-soft);
  display: inline-flex; align-items: center; justify-content: space-between;
  padding: 0 8px; font-size: 11px; color: var(--m-ink-faint);
}
.tt-knob {
  position: absolute; left: 3px; top: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--m-base);
  box-shadow: var(--raise);
  display: grid; place-items: center; font-size: 11px; color: var(--m-ink);
  transition: transform 320ms var(--spring);
}
.theme-toggle.is-dark .tt-knob { transform: translateX(30px); }
.theme-toggle:hover .tt-knob { color: rgb(var(--m-amber)); }

/* ---------- typography ---------- */

h1, h2, h3 { font-weight: 400; font-family: var(--serif); letter-spacing: -0.01em; }
.label {
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--m-ink-faint); margin-bottom: 14px;
}
.lede { font-size: 17px; color: var(--m-ink-soft); max-width: 58ch; }
p { max-width: 64ch; }
p + p { margin-top: 14px; }
.faint { color: var(--m-ink-faint); }
.soft { color: var(--m-ink-soft); }
em { font-style: italic; }

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

.hero {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 54px; align-items: center;
  padding: 58px 0 96px;
}
.hero .mark {
  font-family: var(--serif);
  font-size: clamp(56px, 11vw, 104px);
  line-height: 1;
  letter-spacing: 0.22em;
  margin-bottom: 26px;
  color: color-mix(in srgb, var(--m-base) 91%, rgb(var(--m-shade)));
  text-shadow:
    -2px -2px 2px rgb(var(--m-shade) / 0.32),
    2px 2px 0 rgb(var(--m-light) / 0.72);
}
:root[data-theme='dark'] .hero .mark {
  color: color-mix(in srgb, var(--m-base) 82%, rgb(var(--m-shade)));
  text-shadow:
    -2px -2px 2px rgb(var(--m-shade) / 0.85),
    2px 2px 0 rgb(var(--m-light) / 0.1);
}
.hero h1 {
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.22;
  margin-bottom: 18px;
  max-width: 18ch;
}
.hero .lede { margin-bottom: 26px; }
.byline {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--m-ink-faint);
}
.byline strong { color: var(--m-ink-soft); font-weight: 400; letter-spacing: 0.14em; }

.instrument-pad { display: grid; place-items: center; }
.m-cymatic { display: block; width: 100%; max-width: 340px; height: auto; }

/* ---------- movements ---------- */

.movement { padding: 46px 0 56px; position: relative; }
.movement + .movement { border-top: none; }
.movement > .head { margin-bottom: 34px; display: flex; gap: 18px; align-items: flex-start; }
.movement h2 { font-size: clamp(24px, 3vw, 31px); margin-bottom: 10px; }
.movement .head p { color: var(--m-ink-soft); }

/* the section mark: a still of the instrument, never an invented shape */
.m-cymatic-still {
  width: 52px; height: 52px; flex: none;
  margin-top: 2px;
}

/* ---------- the raised pad ---------- */

.card {
  background: var(--m-base);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--raise);
  padding: 24px 26px;
  transition: box-shadow var(--slow) var(--spring), transform var(--slow) var(--spring);
}
.card .title {
  font-family: var(--serif); font-size: 18px; margin-bottom: 6px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.card p { font-size: 14.5px; color: var(--m-ink-soft); }
.card .meta { font-size: 12px; color: var(--m-ink-faint); margin-top: 12px; }

.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* a well: a long thing held, sunk into the page rather than lying on it */
.well {
  background: var(--m-base);
  border-radius: var(--radius);
  box-shadow: var(--sink-soft);
  padding: 26px 28px;
}
.well .row { padding: 15px 0; }
.well .row + .row { border-top: 1px solid var(--hairline); }
.well .row .k {
  font-family: var(--serif); font-size: 16px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.well .row .v { font-size: 14px; color: var(--m-ink-soft); margin-top: 4px; }

/* ---------- pills: colour says what, relief says whether ---------- */

.tag {
  display: inline-block;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px;
  background: var(--m-base); box-shadow: var(--sink-soft);
  color: var(--m-ink-faint);
  white-space: nowrap;
}
.tag.live { color: var(--ok); }
.tag.next { color: rgb(var(--m-amber)); }
.tag.later { color: var(--m-ink-faint); }
.tag.never { color: var(--danger); }

.btn {
  display: inline-block;
  padding: 11px 24px; border-radius: 999px;
  background: var(--m-base); box-shadow: var(--raise);
  font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--m-ink);
  transition: box-shadow var(--quick) var(--spring), transform var(--quick) var(--spring);
}
.btn:hover { box-shadow: var(--raise-strong); transform: translateY(-1px); }
.btn:active { box-shadow: var(--sink); transform: translateY(1px); }

/* ---------- the refusals: stated, not decorated ---------- */

.refusal { display: grid; gap: 6px; padding: 20px 0; }
.refusal + .refusal { border-top: 1px solid var(--hairline); }
.refusal .r-head { font-family: var(--serif); font-size: 17px; }
.refusal .r-why { color: var(--m-ink-soft); font-size: 14.5px; max-width: 70ch; }

/* ---------- the maker ---------- */

.maker { padding: 56px 0 30px; }
.maker .plate {
  background: var(--m-base);
  border-radius: var(--radius);
  box-shadow: var(--raise);
  padding: 40px 44px;
  display: grid; gap: 22px;
}
.maker h2 { font-size: clamp(24px, 3vw, 31px); }
.maker .sig {
  font-family: var(--serif); font-size: 19px; letter-spacing: 0.06em;
  color: var(--m-ink);
}

footer {
  padding: 40px 0 calc(54px + env(safe-area-inset-bottom));
  margin-top: 30px;
  border-top: 1px solid var(--hairline);
  display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline;
  font-size: 12px; color: var(--m-ink-faint);
}
footer .spacer { margin-left: auto; }
footer a:hover { color: var(--m-ink); }

/* ---------- arrival: things settle, they do not fly in ---------- */

.rise { opacity: 0; transform: translateY(14px); }
.rise.in {
  opacity: 1; transform: none;
  transition: opacity var(--slow) var(--spring), transform var(--slow) var(--spring);
}

/* ---------- narrow ---------- */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 34px; padding: 34px 0 66px; }
  .instrument-pad { order: -1; }
  .m-cymatic { max-width: 208px; }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .shell { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .g2, .g3 { grid-template-columns: 1fr; }
  /* the mark sits above the head rather than stealing a third of the measure */
  .movement > .head { flex-direction: column; gap: 12px; }
  .m-cymatic-still { width: 44px; height: 44px; }
  .topnav { display: none; }
  .maker .plate { padding: 28px 24px; }
  .well { padding: 20px 20px; }
}

/* ---------- motion stops; the material stays ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * , *::before, *::after {
    transition-duration: 120ms !important;
    animation: none !important;
  }
  .rise { opacity: 1; transform: none; }
  .m-cursor-glow { display: none; }
}