/* ─────────────────────────────────────────────────────────────────────────────
   Resonate Works — company site
   Palette is lifted from the Elumvia app tokens (app/web/src/index.css) so the
   two surfaces read as one brand: warm sand neutrals, a green accent, and the
   warm gold that carries the lamp/Psalm 119:105 idea.
   Layout follows the reference brief — full-bleed art direction, wide margins,
   one idea per screen, hairline rules, outlined controls, no fills.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* Sand — app tokens, light mode */
  --sand-50: #faf8f5;
  --sand-100: #f3efe9;
  --sand-200: #e8e1d7;
  --sand-300: #d8cdbe;
  --sand-600: #8a7f70;
  --sand-900: #2b2723;

  /* Dark warm — the app's dark surfaces, used here as art direction */
  --ink: #1c1a17;
  --ink-raised: #242019;
  --gold: #9c7a3c;
  --gold-light: #c9a768;
  --green: #3d6b63;

  /* Page-level roles, remapped under prefers-color-scheme: dark */
  --page: var(--sand-50);
  --page-alt: var(--sand-100);
  --text: var(--sand-900);
  --text-muted: var(--sand-600);
  --hairline: var(--sand-200);
  --accent: var(--green);
  --shadow-lift: 0 2rem 4rem -1.5rem rgb(43 39 35 / 0.3);

  --measure: 62ch;
  --gutter: clamp(1.5rem, 6vw, 8rem);
  /* Section padding. Two adjacent sections each contribute this, so the gap between
     them is double the value — at 16vh that put ~290px of nothing between the claim
     and the first product shot, which read as a dropout rather than as breathing room. */
  --section-y: clamp(4.5rem, 11vh, 8.5rem);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

/* Dark roles. Applied from the system preference unless the visitor has explicitly
   chosen light, and applied unconditionally when they've explicitly chosen dark.
   The two blocks are identical by necessity — a media query and an attribute
   selector can't share one rule. Keep them in sync. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #24201a;
    --page-alt: #1c1a17;
    --text: var(--sand-100);
    --text-muted: #a89e8e;
    --hairline: #322d25;
    --accent: #82beb3;
    --shadow-lift: 0 2rem 4rem -1.5rem rgb(0 0 0 / 0.55);
  }
}

:root[data-theme="dark"] {
  --page: #24201a;
  --page-alt: #1c1a17;
  --text: var(--sand-100);
  --text-muted: #a89e8e;
  --hairline: #322d25;
  --accent: #82beb3;
  --shadow-lift: 0 2rem 4rem -1.5rem rgb(0 0 0 / 0.55);
}

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

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

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

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Anchored sections must clear the fixed masthead. */
[id] {
  scroll-margin-top: 5.5rem;
}

a {
  color: inherit;
}

/* Available to screen readers and crawlers, absent from the layout. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--page);
  color: var(--text);
  border: 1px solid var(--text);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── Shared type ──────────────────────────────────────────────────────────── */

/* Labels take the voice of book marginalia — a serif italic aside — rather than the
   wide-tracked uppercase caps that read as consumer-electronics minimalism. */
.label {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-muted);
}

/* Display type is set as a title page would be: serif, normal weight, generous
   leading. The sans is kept for body and interface text only. */
.display {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2rem, 1.25rem + 3.6vw, 4rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.008em;
  max-width: 20ch;
  text-wrap: balance;
}

.display--sm {
  font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem);
}

.lede {
  max-width: var(--measure);
  color: var(--text-muted);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
  line-height: 1.6;
}

.fineprint {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.wordmark {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3.25rem, 1.5rem + 8vw, 8rem);
  line-height: 1;
  letter-spacing: 0.01em;
}

.wordmark--sm {
  font-size: 1.75rem;
}

/* A solid, square-shouldered block — deliberately not the outlined pill that reads
   as borrowed minimalism. Filled and warm, so the one action on the page is unambiguous. */
.button {
  display: inline-block;
  padding: 1.0625rem 2.5rem;
  border: 1px solid transparent;
  border-radius: 2px;
  background: var(--text);
  color: var(--page);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: opacity 200ms ease;
}
.button:hover,
.button:focus-visible {
  opacity: 0.85;
}

/* Hero variant: outlined, so the single solid button on the page stays the access
   CTA and the hero keeps its air. Square-shouldered — still not a pill. */
.button--quiet {
  background: none;
  border-color: rgba(201, 167, 104, 0.5);
  color: var(--gold-light);
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.button--quiet:hover,
.button--quiet:focus-visible {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: var(--ink);
  opacity: 1;
}

/* ── Masthead ─────────────────────────────────────────────────────────────── */

/* Three tracks: menu left, company centred, theme right. The outer tracks are equal
   width so the company name sits on the true centre of the page, not on the centre
   of whatever space the two controls happen to leave. */
.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.375rem var(--gutter);
  /* 96%, not 88%. This bar is fixed over a dark hero carrying a bright gold button;
     at 88% that button ghosted through the company name while scrolling. The blur
     keeps the frosted character — the opacity is what stops the bleed-through. */
  background: color-mix(in srgb, var(--page) 96%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
  transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease;
}

/* Fully transparent with light text — but ONLY at rest at the top of the page. The
   JS drops this attribute the moment anything scrolls, because nothing must ever be
   able to pass behind a see-through fixed bar. */
.masthead[data-over-hero] {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  color: var(--sand-100);
}

/* Sans, light, lightly tracked — deliberately NOT the wordmark's serif. The company
   and the product are different things and must not share a voice: serif is Elumvia's,
   and lending it to Resonate Works made the bar read as a second wordmark competing
   with the hero. Presence here comes from size and letter-spacing, not from the face. */
.masthead__company {
  grid-column: 2;
  justify-self: center;
  font-family: var(--sans);
  font-size: clamp(1.0625rem, 0.925rem + 0.55vw, 1.5rem);
  font-weight: 250;
  /* Open tracking is what gives a light sans presence at small sizes — without it
     the name just looks small rather than composed. */
  letter-spacing: 0.12em;
  /* The name is two words acting as one mark; the trailing letter-space would push
     it visually left of centre, so half of it is given back. */
  text-indent: 0.12em;
  text-decoration: none;
  white-space: nowrap;
}

/* Menu button — two bars, not three, with the word beside it. */
.masthead__menu {
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  opacity: 0.78;
  transition: opacity 160ms ease;
}
.masthead__menu:hover,
.masthead__menu:focus-visible {
  opacity: 1;
}

.bars {
  position: relative;
  display: block;
  width: 1.125rem;
  height: 0.5rem;
}
.bars::before,
.bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transition: transform 240ms ease, opacity 200ms ease;
}
.bars::before {
  top: 0;
}
.bars::after {
  bottom: 0;
}

/* Open state: the two bars cross. */
.masthead__menu[aria-expanded="true"] .bars::before {
  transform: translateY(3.5px) rotate(45deg);
}
.masthead__menu[aria-expanded="true"] .bars::after {
  transform: translateY(-3.5px) rotate(-45deg);
}

@media (max-width: 30rem) {
  .masthead__menu-label {
    display: none;
  }
}

/* ── Menu panel ───────────────────────────────────────────────────────────── */

/* Drops beneath the masthead rather than covering the page — three links don't
   warrant a full-screen takeover. Links are set large and serif, in keeping with
   the rest of the page's voice. */
.menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  gap: 0.25rem;
  padding: 7rem var(--gutter) 2.5rem;
  background: var(--page);
  border-bottom: 1px solid var(--hairline);
  box-shadow: var(--shadow-lift);
}

.menu[hidden] {
  display: none;
}

.menu a {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.5;
  text-decoration: none;
  color: var(--text);
  width: max-content;
  transition: opacity 160ms ease;
}
.menu a:hover,
.menu a:focus-visible {
  opacity: 0.6;
}

/* Half-filled disc — reads as a light/dark switch without adding a word or a
   chrome-heavy control to a page built on restraint. */
.masthead__theme {
  grid-column: 3;
  justify-self: end;
  display: grid;
  place-items: center;
  padding: 0;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 160ms ease, transform 300ms ease;
}
.masthead__theme:hover,
.masthead__theme:focus-visible {
  opacity: 1;
}
.masthead__theme[aria-pressed="true"] svg {
  transform: rotate(180deg);
}
.masthead__theme svg {
  transition: transform 300ms ease;
}

@media (max-width: 34rem) {
  .masthead__nav a:not(.masthead__cta) {
    display: none;
  }
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

/* The lockup is centred in the viewport, full stop. The imprint line is taken out
   of flow so it can't pull the centre downward the way a third flex item did. */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 7rem var(--gutter);
  text-align: center;
  color: var(--sand-100);
  background: var(--ink);
  /* With the copy cut back, the light has to carry the hero. Two sources: a pool
     behind the wordmark so the name reads as lit rather than placed on black, and
     the warm rise off the floor. This is the lamp — it's the only imagery we have,
     so it does the work a product photograph would. */
  background-image:
    radial-gradient(
      62% 44% at 50% 42%,
      rgba(201, 167, 104, 0.19) 0%,
      rgba(201, 167, 104, 0.06) 46%,
      transparent 78%
    ),
    radial-gradient(
      120% 85% at 50% 118%,
      rgba(201, 167, 104, 0.2) 0%,
      rgba(201, 167, 104, 0.06) 38%,
      transparent 72%
    );
}

/* Optical correction. The bounding box carries slack the eye doesn't see — leading
   above the wordmark's cap-height, descender space below the citation — so centring
   the box leaves the visible ink sitting low. This lifts it so the INK centres on
   the middle of the viewport. Value is measured, not guessed; see the hero notes in
   README before changing it. */
.hero__lockup {
  transform: translateY(var(--hero-optical-shift, -0.25rem));
}

/* "Introducing" — sans, so it reads as an announcement over the name rather than as
   part of the wordmark. Quiet enough not to compete with what it introduces. */
.hero__eyebrow {
  margin: 0 0 clamp(1rem, 2.5vh, 1.75rem);
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  color: rgba(216, 205, 190, 0.6);
}

.hero__action {
  margin: clamp(2.25rem, 5vh, 3.5rem) 0 0;
}

/* Scroll cue. The hero fills the viewport with nothing peeking below it, so without
   this there's no signal the page continues. Out of flow so it can't pull the lockup
   off centre — the same reason the old imprint line was taken out of flow. */
.hero__more {
  position: absolute;
  left: 50%;
  bottom: clamp(1.75rem, 4vh, 2.75rem);
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: rgba(216, 205, 190, 0.55);
  transition: color 200ms ease;
}

.hero__more:hover,
.hero__more:focus-visible {
  color: var(--gold-light);
}

/* A slow drift, not a bounce — 5px over 2.4s reads as an invitation rather than a
   nag. The global prefers-reduced-motion rule stops it outright. */
.hero__more svg {
  animation: hero-drift 2.4s ease-in-out infinite;
}

@keyframes hero-drift {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.75;
  }
  50% {
    transform: translateY(5px);
    opacity: 1;
  }
}

/* margin-inline:auto is load-bearing — the max-width makes this box narrower than the
   lockup, and text-align:center only centres the text *inside* it, not the box itself. */
.hero__verse {
  margin: clamp(1.5rem, 3.5vh, 2.5rem) auto 0;
  max-width: 34ch;
}

.hero__verse p {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.5rem);
  line-height: 1.55;
  color: var(--sand-300);
}

.hero__verse cite {
  display: block;
  margin-top: 1.125rem;
  font-family: var(--serif);
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--gold-light);
}

/* ── Claim ────────────────────────────────────────────────────────────────── */

.claim {
  padding: var(--section-y) var(--gutter);
  border-bottom: 1px solid var(--hairline);
}

.claim .label {
  margin-bottom: 2.5rem;
}

.claim .display {
  max-width: 22ch;
}

.claim .lede {
  margin: 2.5rem 0 0;
  padding-left: 1.25rem;
  border-left: 1px solid var(--accent);
  font-family: var(--serif);
  font-style: italic;
}

/* ── Showcase ─────────────────────────────────────────────────────────────── */

/* The screenshots are wide desktop captures, so each one gets its own band rather
   than a column beside its caption: caption first at reading width, then the shot
   run large underneath. Caption alignment alternates to give the two some rhythm. */
.showcase {
  padding: var(--section-y) var(--gutter);
  display: grid;
  gap: var(--section-y);
}

.shot {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

.shot__note {
  max-width: 46ch;
}

.shot--right .shot__note {
  justify-self: end;
  text-align: right;
}

@media (max-width: 48rem) {
  .shot--right .shot__note {
    justify-self: start;
    text-align: left;
  }
}

/* The hairline is load-bearing, not decoration. Both screenshot sets are near the
   page colour in their own theme — warm off-white on the light page, warm dark on
   the dark page — so without an explicit edge the product shot dissolves into the
   background and stops reading as an object. The shadow alone doesn't hold it. */
.shot__frame {
  position: relative;
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  background: var(--page-alt);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-lift);
}

.shot__frame img {
  width: 100%;
}

/* Theme-matched captures. The light pair is the default so a no-JS or
   no-preference visitor gets the light page's screenshots; the dark pair takes
   over under the same two conditions that switch the palette. Keep these
   selectors in step with the palette blocks at the top of the file. */
.shot__img--dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot__img--dark {
    display: block;
  }
  :root:not([data-theme="light"]) .shot__img--light {
    display: none;
  }
}

:root[data-theme="dark"] .shot__img--dark {
  display: block;
}
:root[data-theme="dark"] .shot__img--light {
  display: none;
}
.shot__frame[data-missing] img {
  display: none;
}

.shot__note h3 {
  margin: 0.875rem 0 1rem;
  font-family: var(--serif);
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.005em;
  max-width: 22ch;
  text-wrap: balance;
}

.shot__note p:last-child {
  margin: 0;
  max-width: 46ch;
  color: var(--text-muted);
}

/* ── Features ─────────────────────────────────────────────────────────────── */

/* A plain list, not a card grid — no boxes, no icons. Hairline per row is the only
   structure, which keeps ten items from reading as ten objects. */
.features {
  padding: var(--section-y) var(--gutter);
  border-top: 1px solid var(--hairline);
}

.features .label {
  margin-bottom: 1.5rem;
}

.features__grid {
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(2rem, 3.5vw, 3rem) clamp(2rem, 4vw, 4rem);
}

.features__grid > div {
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
}

.features__grid dt {
  margin-bottom: 0.5rem;
  font-family: var(--serif);
  font-size: 1.0625rem;
  color: var(--text);
}

.features__grid dd {
  margin: 0;
  max-width: 34ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ── Principles ───────────────────────────────────────────────────────────── */

.principles {
  padding: var(--section-y) var(--gutter);
  background: var(--page-alt);
  border-block: 1px solid var(--hairline);
}

.principles__lede {
  margin: 1.5rem 0 0;
  padding-left: 1.25rem;
  border-left: 1px solid var(--accent);
  font-family: var(--serif);
  font-style: italic;
}

.principles__grid {
  margin: 3.5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}

.principles__grid li {
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}

.principles__grid .label {
  margin-bottom: 1rem;
  color: var(--accent);
}

.principles__grid li p:last-child {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

/* ── Access ───────────────────────────────────────────────────────────────── */

.access {
  padding: var(--section-y) var(--gutter);
  color: var(--sand-100);
  background: var(--ink);
  background-image: radial-gradient(
    100% 120% at 8% 0%,
    rgba(201, 167, 104, 0.16) 0%,
    transparent 62%
  );
}

.access .label {
  color: var(--gold-light);
  margin-bottom: 2rem;
}

.access .lede {
  margin: 1.5rem 0 0;
  color: var(--sand-300);
}

.access__actions {
  margin: 3rem 0 0;
}

.access .button {
  background: var(--gold-light);
  color: var(--ink);
}

.access .fineprint {
  margin: 2.5rem 0 0;
  max-width: 42ch;
  color: rgba(216, 205, 190, 0.6);
}

/* ── Colophon ─────────────────────────────────────────────────────────────── */

.colophon {
  display: grid;
  gap: 2.5rem;
  padding: clamp(3.5rem, 8vw, 6rem) var(--gutter);
  border-top: 1px solid var(--hairline);
}

@media (min-width: 48rem) {
  .colophon {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
  .colophon__legal {
    grid-column: 1 / -1;
  }
}

.colophon__brand .fineprint {
  margin: 0.5rem 0 0;
}

.colophon__brand .fineprint em {
  font-family: var(--serif);
  color: var(--text);
}

.colophon__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-size: 0.8125rem;
}

.colophon__nav a {
  text-decoration: none;
  color: var(--text-muted);
  transition: color 160ms ease;
}
.colophon__nav a:hover,
.colophon__nav a:focus-visible {
  color: var(--text);
}

.colophon__legal {
  margin: 0;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
}