/* ─────────────────────────────────────────────────────────────
   Stillwater Man — stillwaterman.com
   Static site, no build step. Tokens mirror the app design
   master (stone/paper ground, ink text, single ember accent,
   nocturnal ground for listening).
   ───────────────────────────────────────────────────────────── */

:root {
  /* accent + ink */
  --ember: #C8662E;
  --ember-deep: #8A4A1E;
  --ink: #211D18;
  --ink-soft: #4A453D;
  --mute: #8A8175;
  --sigil: #6E6452;
  --faint: #B3A99A;

  /* stone — light ground */
  --paper: #F5F2EC;
  --raised: #FBF9F4;
  --sand: #EBE3D4;
  --line: #E4DDCE;
  --ember-tint: #F7EEE2;
  --ember-line: #E0C3A8;

  /* nocturnal — listening ground */
  --night: #16140F;
  --night-surf: #1E1B15;
  --night-raise: #2A261E;
  --night-line: #322D24;
  --night-text: #EDE7DA;
  --night-mute: #9A9080;

  /* type */
  --serif: 'Spectral', 'Iowan Old Style', Georgia, serif;
  --sans: 'Instrument Sans', 'Avenir Next', 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --measure: 42rem;
}

/* ── reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--sans);
  font-feature-settings: 'ss01' on;
  min-height: 100dvh;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--ember); color: var(--paper); }

/* ── a11y utilities ── */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ── skip link ── */
.skip {
  position: absolute; left: -100vw; top: 0;
  background: var(--ink); color: var(--paper);
  padding: .6rem 1rem; z-index: 99; font-family: var(--sans);
}
.skip:focus { left: 0; }

/* ── shells ── */
.shell { max-width: 68rem; margin-inline: auto; padding-inline: var(--gutter); }
.prose-shell { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }

/* ── site header ── */
.site-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 1.35rem;
}
.wordmark {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none;
  font: 500 1.0625rem/1 var(--serif);
  letter-spacing: .015em;
}
.wordmark svg { width: 26px; height: 26px; }
.site-head nav { display: flex; gap: 1.4rem; }
.site-head nav a {
  font: 500 .8125rem/1 var(--sans);
  color: var(--ink-soft); text-decoration: none;
}
.site-head nav a:hover { color: var(--ember); }
.site-head nav a[aria-current="page"] { color: var(--faint); pointer-events: none; }

/* ── eyebrow ── */
.eyebrow {
  display: inline-flex; align-items: center; gap: .75rem;
  font: 600 .6875rem/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--mute);
}
.eyebrow::before {
  content: ""; width: 1.5rem; height: 1px;
  background: var(--faint); flex: none;
}

/* ── headings ── */
h1, h2, h3 { font-weight: 300; font-family: var(--serif); }
.display {
  font-size: clamp(2.5rem, 7.5vw, 4.375rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.section-title {
  font-size: clamp(1.75rem, 4.2vw, 2.5rem);
  line-height: 1.15;
  margin-top: 1.1rem;
  text-wrap: balance;
}
.lede { color: var(--ink-soft); max-width: 36rem; text-wrap: pretty; }

/* ── pill button ── */
.pill {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .8rem 1.5rem;
  border-radius: 100px;
  background: var(--ink); color: var(--paper);
  font: 600 .875rem/1 var(--sans);
  letter-spacing: .02em;
  text-decoration: none;
  border: 1px solid var(--ink);
  transition: background .2s ease, border-color .2s ease;
}
.pill:hover { background: var(--ember); border-color: var(--ember); }
.pill--ghost {
  background: transparent; color: var(--ink);
  border-color: var(--faint);
}
.pill--ghost:hover { background: transparent; color: var(--ember); border-color: var(--ember); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ember); flex: none; }
.pill:hover .dot { background: var(--paper); }

/* ─────────────────────────────────────────────
   HERO — the still surface. Ripple in pure CSS
   borders, off-centre right, text floats over.
   ───────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: clip;
  padding-block: clamp(4.5rem, 12vw, 9rem) clamp(5rem, 13vw, 10rem);
}
.hero .shell { position: relative; }
.hero-inner { position: relative; z-index: 2; max-width: 40rem; }
.hero h1 { margin-top: 1.4rem; }
.hero h1 em { font-style: italic; font-family: var(--serif); }
.hero .lede { margin-top: 1.6rem; font-size: 1.0625rem; }
.hero .cta-row {
  margin-top: 2.6rem;
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}
.hero .cta-note { font: 400 .8125rem/1.5 var(--sans); color: var(--mute); }

/* concentric rings — a stone dropped in still water */
.ripple {
  position: absolute;
  top: 50%; right: max(-14rem, -22vw);
  translate: 0 -50%;
  width: min(620px, 92vw);
  aspect-ratio: 1;
  z-index: 1;
  pointer-events: none;
}
.ripple i {
  position: absolute; inset: 0;
  border: 1px solid var(--sigil);
  border-radius: 50%;
}
.ripple i:nth-child(1) { inset: 41%;  opacity: .85; }
.ripple i:nth-child(2) { inset: 33.5%; opacity: .62; }
.ripple i:nth-child(3) { inset: 26%;  opacity: .46; }
.ripple i:nth-child(4) { inset: 18%;  opacity: .33; }
.ripple i:nth-child(5) { inset: 9.5%; opacity: .22; }
.ripple i:nth-child(6) { inset: 0;    opacity: .13; }
.ripple .drop {
  position: absolute; inset: 0; margin: auto;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ember);
}
/* one slow pulse — barely there, calm on purpose */
.ripple .pulse {
  position: absolute; inset: 0;
  border: 1px solid var(--sigil);
  border-radius: 50%;
  opacity: 0;
  animation: ripple-out 9s cubic-bezier(.2,.6,.4,1) infinite;
}
@keyframes ripple-out {
  0%   { transform: scale(.16); opacity: 0; }
  8%   { opacity: .5; }
  100% { transform: scale(1); opacity: 0; }
}

/* page-load settle */
.rise { animation: rise .9s cubic-bezier(.2,.7,.3,1) both; }
.rise-2 { animation-delay: .12s; }
.rise-3 { animation-delay: .24s; }
.rise-4 { animation-delay: .36s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ripple .pulse { display: none; }
  .rise, .rise-2, .rise-3, .rise-4 { animation: none; }
}

/* ─────────────────────────────────────────────
   SECTIONS
   ───────────────────────────────────────────── */
.band { padding-block: clamp(4.5rem, 11vw, 8rem); }
.band + .band { border-top: 1px solid var(--line); }

/* ── the shape of a day: sample reading + anatomy ── */
.day-grid {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: grid; gap: clamp(2.5rem, 5vw, 4.5rem);
}
@media (min-width: 56rem) {
  .day-grid { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); align-items: start; }
}

.reading-card {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  box-shadow: 0 1px 0 rgba(33, 29, 24, .03), 0 18px 40px -30px rgba(33, 29, 24, .28);
}
.reading-card .eyebrow { color: var(--sigil); }
.reading-card .eyebrow::before { display: none; }
.reading-quote {
  margin-top: 1.35rem;
  font: 300 1.375rem/1.42 var(--serif);
  text-wrap: pretty;
}
.reading-attrib {
  margin-top: .85rem;
  font: italic 400 .9375rem/1.4 var(--serif);
  color: var(--mute);
}
.reading-rule { border: 0; border-top: 1px solid var(--line); margin-block: 1.4rem; }
.reading-part + .reading-part { margin-top: 1.15rem; }
.reading-part b {
  display: block;
  font: 600 .6875rem/1 var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--mute); margin-bottom: .4rem;
}
.reading-part p { font-size: .9375rem; line-height: 1.6; color: var(--ink-soft); }
.reading-part .serif-line { font: italic 400 1.0625rem/1.5 var(--serif); color: var(--ink); }

.anatomy { list-style: none; counter-reset: part; }
.anatomy li {
  counter-increment: part;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 3rem 1fr; gap: .5rem 1rem;
}
.anatomy li:first-child { border-top: 0; padding-top: .25rem; }
.anatomy li::before {
  content: "0" counter(part);
  font: 400 .75rem/1.9 var(--mono);
  color: var(--faint);
}
.anatomy h3 { font: 400 1.25rem/1.3 var(--serif); }
.anatomy p { grid-column: 2; color: var(--ink-soft); font-size: .9375rem; max-width: 30rem; }

/* ── thinkers grid ── */
.thinkers {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 40rem) { .thinkers { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 58rem) { .thinkers { grid-template-columns: repeat(4, 1fr); } }
.thinkers li {
  list-style: none;
  background: var(--paper);
  padding: 1.35rem 1.25rem 1.25rem;
  transition: background .25s ease;
}
.thinkers li:hover { background: var(--raised); }
/* Per-thinker ripple sigil — same deterministic mark the app renders (rest state:
   sigil ink on paper). Authored in a 40×40 viewBox, shown at 40px so strokes are 1:1. */
.thinkers svg {
  display: block; width: 40px; height: 40px;
  margin-bottom: .85rem;
  color: var(--sigil);
}
.thinkers b { display: block; font: 400 1.125rem/1.3 var(--serif); }
.thinkers span {
  display: block; margin-top: .3rem;
  font: 400 .6875rem/1 var(--mono);
  color: var(--mute); letter-spacing: .04em;
}
.thinkers-note { margin-top: 1.4rem; font-size: .875rem; color: var(--mute); }

/* ── listen — nocturnal ground ── */
.band--night {
  background: var(--night);
  color: var(--night-text);
  border-top: 0 !important;
}
.band--night .eyebrow { color: var(--night-mute); }
.band--night .eyebrow::before { background: var(--night-line); }
.band--night .lede { color: var(--night-mute); }
.listen-grid {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: grid; gap: 1px;
  background: var(--night-line);
  border-block: 1px solid var(--night-line);
}
@media (min-width: 48rem) { .listen-grid { grid-template-columns: repeat(3, 1fr); } }
.listen-grid article { background: var(--night); padding: 1.9rem 1.6rem 2rem; }
@media (min-width: 48rem) {
  .listen-grid article { padding: 2.2rem 1.9rem 2.4rem; }
  .listen-grid article:first-child { padding-left: 0; }
}
.listen-grid .num { font: 400 .75rem/1 var(--mono); color: var(--ember); }
.listen-grid h3 { margin-top: 1rem; font: 400 1.375rem/1.25 var(--serif); color: var(--night-text); }
.listen-grid p { margin-top: .75rem; font-size: .9375rem; color: var(--night-mute); }
.voice-note {
  margin-top: 2.25rem;
  max-width: 38rem;
  font: italic 400 1rem/1.6 var(--serif);
  color: var(--night-mute);
}
.voice-note strong { color: var(--night-text); font-weight: 500; }

/* ── calm on purpose ── */
.band--calm { padding-block: clamp(6rem, 15vw, 11rem); }
.calm-lines { margin-top: clamp(2rem, 5vw, 3rem); }
.calm-lines p {
  font: 300 clamp(2.4rem, 8vw, 4.5rem)/1.12 var(--serif);
  letter-spacing: -.01em;
}
.calm-lines p span { color: var(--faint); }
.calm-body {
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  display: grid; gap: 1.5rem;
  max-width: var(--measure);
}
@media (min-width: 52rem) { .calm-body { grid-template-columns: 1fr 1fr; max-width: none; } }
.calm-body p { color: var(--ink-soft); text-wrap: pretty; }
.calm-free {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  font: italic 300 clamp(1.25rem, 3vw, 1.625rem)/1.45 var(--serif);
  max-width: 34rem;
  border-left: 2px solid var(--ember);
  padding-left: 1.25rem;
  text-wrap: pretty;
}

/* ── premium ── */
.premium-card {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: grid;
}
@media (min-width: 48rem) { .premium-card { grid-template-columns: 1fr 1fr; } }
.price {
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 48rem) {
  .price { border-bottom: 0; }
  .price + .price { border-left: 1px solid var(--line); }
}
.price .tag { font: 600 .6875rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.price .amount { margin-top: .9rem; font: 300 clamp(2.4rem, 5vw, 3.25rem)/1 var(--serif); }
.price .amount sub {
  font: 400 .8rem/1 var(--mono); vertical-align: baseline;
  color: var(--mute); margin-left: .35rem; letter-spacing: .03em;
}
.price .per-note { margin-top: .7rem; font-size: .875rem; color: var(--mute); }
.price--year .tag { color: var(--ember); }
.premium-includes {
  margin-top: 1.75rem;
  display: flex; flex-wrap: wrap; gap: .5rem .6rem;
  padding: 0; list-style: none;
}
.premium-includes li {
  font: 500 .8125rem/1 var(--sans);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 100px;
  padding: .45rem .85rem;
}
.premium-free-line {
  margin-top: 1.75rem;
  font: italic 400 1.0625rem/1.5 var(--serif);
  color: var(--ink);
}

/* ── the shelf grows ── */
.band--shelf { text-align: center; }
.band--shelf .eyebrow { justify-content: center; }
.band--shelf .eyebrow::after {
  content: ""; width: 1.5rem; height: 1px; background: var(--faint); flex: none;
}
.shelf-line {
  margin: 1.5rem auto 0;
  max-width: 34rem;
  font: 300 clamp(1.5rem, 4vw, 2.125rem)/1.35 var(--serif);
  text-wrap: balance;
}
.shelf-sub { margin: 1.25rem auto 0; max-width: 30rem; color: var(--mute); font-size: .9375rem; }

/* ── footer ── */
.site-foot {
  border-top: 1px solid var(--line);
  padding-block: 2.5rem 3.25rem;
}
.site-foot .shell, .site-foot .prose-shell {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
}
.site-foot small { font: 400 .8125rem/1.5 var(--sans); color: var(--mute); }
.site-foot nav { display: flex; gap: 1.4rem; }
.site-foot nav a {
  font: 500 .8125rem/1 var(--sans);
  color: var(--ink-soft); text-decoration: none;
}
.site-foot nav a:hover { color: var(--ember); }

/* ─────────────────────────────────────────────
   UTILITY PAGES (privacy / terms / support)
   ───────────────────────────────────────────── */
.page-head { padding-block: clamp(3.5rem, 8vw, 5.5rem) clamp(2rem, 5vw, 3rem); }
.page-head h1 {
  font-size: clamp(2.1rem, 6vw, 3rem);
  line-height: 1.12; margin-top: 1.2rem;
}
.page-head .updated {
  margin-top: 1.1rem;
  font: 400 .75rem/1.6 var(--mono);
  color: var(--mute);
}

.prose { padding-bottom: clamp(4rem, 9vw, 6rem); counter-reset: sec; }
.prose > h2 {
  counter-increment: sec;
  font: 400 1.5rem/1.25 var(--serif);
  margin-top: clamp(2.75rem, 6vw, 3.75rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
  display: flex; gap: 1rem; align-items: baseline;
}
.prose > h2::before {
  content: counter(sec, decimal-leading-zero);
  font: 400 .75rem/1 var(--mono);
  color: var(--faint); flex: none;
}
.prose h3 { font: 500 1.0625rem/1.4 var(--serif); margin-top: 1.75rem; }
.prose p, .prose ul, .prose ol { margin-top: 1rem; color: var(--ink-soft); font-size: .9688rem; }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li { margin-top: .45rem; }
.prose li::marker { color: var(--faint); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--ember-deep); text-decoration-color: var(--ember-line); text-underline-offset: 3px; }
.prose a:hover { color: var(--ember); }
.prose .lead { font-size: 1.0625rem; color: var(--ink); }

.summary-card {
  margin-top: 1.75rem;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.5rem 1.6rem;
}
.summary-card p { margin-top: 0; }
.summary-card ul { margin-top: .75rem; }

.ph {
  display: inline-block;
  font: 500 .6875rem/1.5 var(--mono);
  letter-spacing: .02em;
  color: var(--ember-deep);
  background: var(--ember-tint);
  border: 1px solid var(--ember-line);
  border-radius: 4px;
  padding: .1rem .5rem;
  vertical-align: baseline;
}

/* ── support FAQ ── */
.faq { margin-top: .5rem; }
.faq dt {
  font: 400 1.25rem/1.35 var(--serif);
  margin-top: clamp(2.25rem, 5vw, 3rem);
  padding-top: clamp(1.4rem, 3vw, 1.9rem);
  border-top: 1px solid var(--line);
}
.faq dd { margin-top: .7rem; color: var(--ink-soft); font-size: .9688rem; max-width: 38rem; }
.contact-card {
  margin-top: 2rem;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.75rem 1.6rem;
}
.contact-card .eyebrow { color: var(--sigil); }
.contact-card .email {
  display: inline-block;
  margin-top: .9rem;
  font: 300 clamp(1.3rem, 4vw, 1.75rem)/1.2 var(--serif);
  color: var(--ink);
  text-decoration-color: var(--ember-line);
  text-underline-offset: 5px;
}
.contact-card .email:hover { color: var(--ember); }
.contact-card p { margin-top: .8rem; font-size: .875rem; color: var(--mute); }