/* Authored: Fable 5 (claude-fable-5) | Last edited: Fable 5 (claude-fable-5) 2026-07-25 */

/* ---------- Design tokens (design/handoff/project/tokens/) ---------- */
:root {
  /* Base */
  --paper: #faf9f6;        /* page background */
  --ink: #161614;          /* primary text, ticks, rules */
  --ink-2: #55514a;        /* body text, hover */
  --ink-3: #8d887e;        /* tagline, captions */
  --line: #e5e2da;         /* hairline borders */
  --mono-muted: #a3a39c;   /* muted mono (email) */
  --line-soft: #dddcd6;    /* underlines */
  --wave-ink: rgba(30, 27, 23, .34); /* interference wave stroke */

  /* Night (secondary, dark surfaces only) */
  --night: #0a0c10;
  --night-fg: #eef4f7;
  --glow: #6ee7ff;

  /* Semantic aliases */
  --surface-page: var(--paper);
  --text-primary: var(--ink);
  --text-body: var(--ink-2);
  --text-caption: var(--ink-3);
  --border-hairline: var(--line);

  /* Type. Helvetica Neue is system-provided; Arial is the fallback. */
  --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --display-size: clamp(27px, 6vw, 42px);
  --display-weight-strong: 500;
  --display-weight-light: 300;
  --display-tracking: -0.01em;
  --display-leading: 1.12;
  --wordmark-size: 13px;
  --wordmark-weight-strong: 600;
  --wordmark-weight-light: 300;
  --tagline-tracking: .24em;

  /* Spacing / lockup */
  --tick-size: 8px;
  --tick-weight: 1.5px;
  --lockup-pad-y: 6px;
  --lockup-pad-x: 8px;

  /* Motion: entrance = rise-and-fade, staggered; ambient = waves. */
  --ease-brand: cubic-bezier(.2, .7, .2, 1);
  --dur-reveal: .9s;
  --dur-fade: 1.2s;

  /* Hairlines only; no shadows, no rounded corners anywhere. */
  --radius: 0;
}

/* ---------- Base ---------- */
body {
  margin: 0;
  background: var(--paper);
  font-family: var(--font-sans);
}
a { color: var(--ink); }
a:hover { color: var(--ink-2); }

/* ---------- Layout shell ---------- */
.site {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--surface-page);
}

/* ---------- Header ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(12px, 2.2vh, 16px) clamp(16px, 4vw, 28px);
  border-bottom: 1px solid var(--border-hairline);
  flex: none;
}

/* Wordmark lockup: grotesque weight pair + corner ticks (no image logo). */
.wordmark {
  position: relative;
  padding: var(--lockup-pad-y) var(--lockup-pad-x);
  display: flex;
  align-items: center;
  gap: 5px;
}
.wordmark::before,
.wordmark::after {
  content: '';
  position: absolute;
  width: var(--tick-size);
  height: var(--tick-size);
}
.wordmark::before {
  top: 0;
  left: 0;
  border-top: var(--tick-weight) solid var(--ink);
  border-left: var(--tick-weight) solid var(--ink);
}
.wordmark::after {
  bottom: 0;
  right: 0;
  border-bottom: var(--tick-weight) solid var(--ink);
  border-right: var(--tick-weight) solid var(--ink);
}
.wordmark-strong {
  font: var(--wordmark-weight-strong) var(--wordmark-size)/1 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.wordmark-light {
  font: var(--wordmark-weight-light) var(--wordmark-size)/1 var(--font-sans);
  color: var(--ink);
}

.contact {
  display: inline-block;
  padding: 12px 0 12px 12px;
  font: 500 clamp(10px, 2.4vw, 11px)/1.4 var(--font-mono);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.contact:hover { color: var(--ink-2); }
.contact span {
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}

/* ---------- Stage ---------- */
.stage {
  position: relative;
  flex: 1;
  overflow: hidden;
}

/* Height-capped hero variant so the first section peeks above the fold. */
.stage--hero {
  flex: none;
  height: min(78vh, 760px);
  height: min(78svh, 760px);
  min-height: 420px;
  border-bottom: 1px solid var(--border-hairline);
}
.waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Soft radial paper fade lifting the lockup above the waves. */
.paper-fade {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.paper-fade > div {
  width: min(88vw, 540px);
  height: min(58vh, 320px);
  background: radial-gradient(closest-side, rgba(250, 249, 246, .98) 42%, rgba(250, 249, 246, 0));
}

.hero {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.4vh, 16px);
  padding: 0 24px;
  text-align: center;
  pointer-events: none;
}
.display {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: .32em;
  row-gap: 2px;
  font: var(--display-weight-strong) var(--display-size)/var(--display-leading) var(--font-sans);
  letter-spacing: var(--display-tracking);
  color: var(--ink);
}
.display-strong {
  display: inline-block;
  animation: fadeUp var(--dur-reveal) var(--ease-brand) .1s both;
}
.display-light {
  display: inline-block;
  font-weight: var(--display-weight-light);
  animation: fadeUp var(--dur-reveal) var(--ease-brand) .35s both;
}
.tagline {
  margin: 0;
  font: 400 clamp(9.5px, 2.4vw, 11px)/1.4 var(--font-sans);
  letter-spacing: var(--tagline-tracking);
  text-transform: uppercase;
  color: var(--ink-3);
  animation: fadeIn var(--dur-fade) ease .9s both;
}

/* ---------- Motion ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01s !important;
    animation-delay: 0s !important;
  }
}

/* ---------- Sections ---------- */
.section {
  width: min(100% - 48px, 680px);
  margin: 0 auto;
  padding: clamp(56px, 9vh, 88px) 0;
  text-align: center;
}
.section + .section { border-top: 1px solid var(--border-hairline); }
.section--practice { width: min(100% - 48px, 880px); }

.section-label {
  margin: 0 0 clamp(20px, 3.5vh, 28px);
  font: 400 clamp(9.5px, 2.4vw, 11px)/1.4 var(--font-sans);
  letter-spacing: var(--tagline-tracking);
  text-transform: uppercase;
  color: var(--ink-3);
}
.section-copy {
  margin: 0 auto;
  max-width: 54ch;
  font: 300 clamp(15px, 2.2vw, 17px)/1.7 var(--font-sans);
  color: var(--ink-2);
}
/* Email addresses are always mono in this system. */
.section-copy a {
  font: 500 .82em/1.4 var(--font-mono);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 1px;
  white-space: nowrap;
}
.section-copy a:hover { color: var(--ink-2); }

.practice {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.practice-item { padding: 8px clamp(16px, 3vw, 28px); }
.practice-item + .practice-item { border-left: 1px solid var(--border-hairline); }
.practice-index {
  margin: 0 0 14px;
  font: 400 10.5px/1 var(--font-mono);
  letter-spacing: var(--tagline-tracking);
  color: var(--mono-muted);
}
.practice-title {
  margin: 0 0 10px;
  font: var(--wordmark-weight-strong) 13px/1.3 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.practice-copy {
  margin: 0 auto;
  max-width: 30ch;
  font: 300 13.5px/1.65 var(--font-sans);
  color: var(--ink-2);
}
@media (max-width: 720px) {
  .practice { grid-template-columns: 1fr; }
  .practice-item { padding: 0; }
  .practice-item + .practice-item {
    border-left: 0;
    border-top: 1px solid var(--border-hairline);
    margin-top: 28px;
    padding-top: 28px;
  }
}

/* ---------- Footer ---------- */
.site-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(14px, 2.4vh, 18px) clamp(16px, 4vw, 28px);
  border-top: 1px solid var(--border-hairline);
}
.footer-name {
  margin: 0;
  font: 400 10.5px/1.4 var(--font-mono);
  color: var(--mono-muted);
}
.footer-mail {
  font: 500 10.5px/1.4 var(--font-mono);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 2px;
  white-space: nowrap;
}
.footer-mail:hover { color: var(--ink-2); }
@media (max-width: 560px) {
  .site-footer { flex-direction: column; }
}

/* ---------- 404 ---------- */
.notfound {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 24px;
  text-align: center;
}
.notfound-code {
  margin: 0;
  font: 400 10.5px/1 var(--font-mono);
  letter-spacing: var(--tagline-tracking);
  color: var(--mono-muted);
}
.notfound-note {
  margin: 0;
  font: 300 15px/1.6 var(--font-sans);
  color: var(--text-body);
}
.notfound a {
  font: 500 10.5px/1.4 var(--font-mono);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 2px;
}