/*
  Stone & Ink — site pages (home and brand-site pages; DESIGN.md §3–§7).
  Requires /assets/css/fonts.css and /assets/css/tokens.css. Tokens only: no raw values here.
*/

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--stone-0);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--weight-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-color: var(--taupe-500); text-underline-offset: 0.15em; }
a:hover { text-decoration-color: var(--ink-900); }
button { font: inherit; }
::selection { background: var(--stone-200); color: var(--ink-900); }

:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 2px; border-radius: var(--radius-sm); }

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

/* ---------- Type roles (§4) ---------- */
.display { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-display); line-height: var(--lh-display); max-inline-size: 14ch; text-wrap: balance; }
.h1 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-h1); line-height: var(--lh-h1); text-wrap: balance; }
.h2 { font-family: var(--font-display); font-weight: var(--weight-heading); font-size: var(--text-h2); line-height: var(--lh-h2); text-wrap: balance; }
.h3 { font-family: var(--font-display); font-weight: var(--weight-heading); font-size: var(--text-h3); line-height: var(--lh-h3); }
.lead { font-weight: var(--weight-lead); font-size: var(--text-lead); line-height: var(--lh-lead); max-inline-size: var(--max-prose); }
.body { font-size: var(--text-body); line-height: var(--lh-body); max-inline-size: var(--max-prose); }
.small { font-size: var(--text-small); line-height: var(--lh-small); }
.muted { color: var(--ink-500); }
.eyebrow {
  display: inline-block;
  font-weight: var(--weight-body);
  font-size: var(--text-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--tracking-label);
  color: var(--taupe-700);
  padding-block-end: var(--space-2);
  border-block-end: var(--hairline);
}
.latin { font-weight: var(--weight-body); letter-spacing: var(--tracking-label); }
bdi, .num { font-variant-numeric: tabular-nums; }

/* ---------- Layout (§5) ---------- */
.container { inline-size: 100%; max-inline-size: var(--max-site); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-inline-size: var(--max-lp); }
.section { padding-block: var(--section-y); }
.section--alt { background: var(--stone-50); }
.section--dark { background: var(--ink-900); color: var(--stone-100); }
.stack > * + * { margin-block-start: var(--space-4); }
.stack--lg > * + * { margin-block-start: var(--space-8); }
.hairline { border: 0; border-block-start: var(--hairline); margin: 0; }
.section--dark .hairline { border-block-start: var(--hairline-on-dark); }

/* Textured surface: limestone at low opacity over stone (§3). The texture never sits under text at full strength. */
.textured { position: relative; isolation: isolate; }
.textured::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-image: image-set(url('/assets/brand/texture-1.avif') type('image/avif'), url('/assets/brand/texture-1.webp') type('image/webp'));
  background-size: cover; background-position: center;
  opacity: var(--texture-opacity);
  pointer-events: none;
}

/* ---------- Buttons (§7) ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-block-size: var(--control-h); min-inline-size: var(--tap-min);
  padding-inline: var(--space-6);
  border-radius: var(--radius-sm);
  border: 1px solid var(--ink-900);
  background: var(--ink-900); color: var(--stone-0);
  font-weight: var(--weight-strong); font-size: var(--text-body); line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn::after {
  content: ''; position: absolute; inset-inline-start: var(--space-6); inset-block-end: var(--space-2);
  block-size: 2px; inline-size: 0; background: var(--gold-500);
  transition: inline-size var(--dur) var(--ease);
}
.btn:hover::after, .btn:focus-visible::after { inline-size: calc(100% - 2 * var(--space-6)); }
.btn--hero { min-block-size: var(--control-h-hero); padding-inline: var(--space-8); }
.btn--block { inline-size: 100%; }
.btn--secondary { background: transparent; color: var(--ink-900); border-color: var(--taupe-600); }
.btn--secondary:hover { border-color: var(--ink-900); }
.btn--secondary::after { display: none; }
.btn--accent { background: var(--gold-500); border-color: var(--gold-500); color: var(--ink-900); }
.btn--accent:hover { background: var(--gold-600); border-color: var(--gold-600); }
.btn--accent::after { background: var(--ink-900); }
.section--dark .btn--secondary { color: var(--stone-100); border-color: var(--stone-200); }
.btn__icon { inline-size: 20px; block-size: 20px; flex: none; }

/* ---------- Header / footer (§7) ---------- */
.site-header { position: sticky; inset-block-start: 0; z-index: 10; background: var(--stone-0); border-block-end: var(--hairline); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-block-size: 64px; }
.site-header__logo { display: inline-flex; align-items: center; color: var(--ink-900); }
.site-header__logo img, .site-header__logo svg { block-size: 36px; inline-size: auto; }
.site-nav { display: none; gap: var(--space-6); font-weight: var(--weight-strong); }
.site-nav a { text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }
@media (min-width: 768px) { .site-nav { display: flex; } }

.site-footer { margin-block-start: auto; background: var(--ink-900); color: var(--stone-100); padding-block: var(--space-12); }
.site-footer__inner { display: grid; gap: var(--space-6); }
.site-footer__logo img { inline-size: 160px; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); font-size: var(--text-small); }
.site-footer__links a { color: var(--stone-100); }
.site-footer__legal { font-size: var(--text-small); color: var(--stone-200); }
@media (min-width: 768px) {
  .site-footer__inner { grid-template-columns: 1fr auto; align-items: end; }
}

/* ---------- Hero (§7) ---------- */
.hero { padding-block: var(--space-12) var(--space-16); }
.hero__inner { display: grid; gap: var(--space-6); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.hero__trust { font-size: var(--text-small); color: var(--ink-500); }
@media (min-width: 768px) {
  .hero { min-block-size: 85svh; display: flex; align-items: center; }
  .hero__inner { grid-template-columns: 7fr 5fr; gap: var(--space-12); align-items: center; }
}

/* ---------- Credentials row (replaces testimonials until real clients exist; DESIGN.md §7) ---------- */
.credentials { display: grid; }
.credentials > li { padding-block: var(--space-3); border-block-start: var(--hairline); display: flex; gap: var(--space-3); align-items: baseline; }
.credentials > li:last-child { border-block-end: var(--hairline); }
.credentials__mark { color: var(--taupe-600); flex: none; inline-size: 14px; block-size: 14px; translate: 0 1px; }

/* ---------- Coming-soon (home until Plan 006) ---------- */
.coming { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: var(--space-12) var(--space-16); }
.coming__logo { inline-size: 168px; margin-block-end: var(--space-6); }
.coming__logo img { inline-size: 100%; }
.coming__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-block-start: var(--space-2); }
.coming__note { font-size: var(--text-small); color: var(--ink-500); }
.coming__list-title { margin-block: var(--space-12) var(--space-3); }

/* ---------- About: personal story (DESIGN.md §7 "About") ---------- */
.about__title { margin-block-end: var(--space-6); }
.about__text { max-inline-size: var(--max-prose); color: var(--ink-700); }
.about__text p + p { margin-block-start: var(--space-4); }
.about__pivot {
  margin-block: var(--space-8) !important;
  font-family: var(--font-display); font-weight: var(--weight-heading);
  font-size: var(--text-h3); line-height: var(--lh-h3); color: var(--ink-900);
}
.about__sign { margin-block-start: var(--space-8); font-family: var(--font-display); font-weight: var(--weight-heading); font-size: var(--text-h3); line-height: var(--lh-h3); }
.about__cta { margin-block-start: var(--space-8); }
@media (min-width: 768px) {
  .coming { padding-block: var(--space-24); }
  .coming__logo { inline-size: 240px; margin-block-end: var(--space-8); }
}

/* ---------- Prose (privacy, terms) ---------- */
.prose { max-inline-size: var(--max-prose); }
.prose h2 { font-family: var(--font-display); font-weight: var(--weight-heading); font-size: var(--text-h3); line-height: var(--lh-h3); margin-block: var(--space-8) var(--space-3); }
.prose p + p, .prose ul { margin-block-start: var(--space-3); }
.prose li { position: relative; padding-inline-start: var(--space-4); margin-block-start: var(--space-1); }
.prose li::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: 0.7em; inline-size: 6px; block-size: 1px; background: var(--taupe-500); }

/* ---------- Motion (§6) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}