/* Claude Consultants — claudeconsultants.dev
   The Practice: editorial-institutional. Ivory is load-bearing. */

/* Self-hosted, subsetted faces (latin-basic glyphs, axes trimmed to used ranges).
   No third-party CSS on the critical path. */
@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader-var.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-var.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/plex-mono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* metric-matched Georgia stand-in so the Newsreader swap doesn't reflow the H1
   (size-adjust/overrides computed from the two fonts' real metrics) */
@font-face {
  font-family: "Newsreader Fallback";
  src: local("Georgia");
  size-adjust: 91.52%;
  ascent-override: 80.31%;
  descent-override: 28.95%;
  line-gap-override: 0%;
}

:root {
  --paper: #FAF9F5;
  --oat: #F0EEE6;
  --raised: #ECE9E0;
  --wash: #F6E7DE;
  --ink: #141413;
  --ink-soft: #3D3C38;
  --muted: #63625E; /* clears 4.5:1 on --paper at small sizes */
  --faint: #8A8884;
  --hairline: #DAD6CB;
  --terracotta: #D97757;
  --crail: #CC785C;
  --crail-deep: #B05730;
  /* terracotta for TEXT: #D97757 is a graphics color (2.6–3.0:1) and never sets type.
     #A04E2A clears 4.5:1 on paper, oat, and wash; hover steps darker, never lighter. */
  --terracotta-text: #A04E2A;
  --terracotta-press: #8A4123;
  /* gauntlet decay steps: terracotta → faint over the week, hard steps only */
  --decay-1: #CE8E74;
  --decay-2: #C9A28F;
  --chamfer: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
  --serif-display: "Newsreader", "Newsreader Fallback", Georgia, serif;
  --serif-body: "Source Serif 4", Georgia, serif;
  --sans: "Inter", -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

::selection { background: var(--wash); color: var(--ink); }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif-body);
  font-size: 1.125rem;
  line-height: 1.72;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 1104px; /* 8px grid: 138 units */
  margin-inline: auto;
  padding-inline: 24px;
}

h1, h2 {
  font-family: var(--serif-display);
  font-weight: 500;
  font-optical-sizing: auto;
  color: var(--ink);
  text-wrap: balance;
}
h1 {
  /* rem-mixed fluid value: scales continuously 390→1440 and respects user font-size */
  font-size: clamp(2.75rem, 2rem + 3.05vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
}
h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.5rem);
  line-height: 1.15;
}

p { max-width: 65ch; }

a { color: var(--terracotta-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* text-color hovers get the page's one soft grace note; pixel work stays hard-step */
a, .masthead-nav a {
  transition: color 120ms cubic-bezier(0, 0, 0.2, 1), border-bottom-color 120ms cubic-bezier(0, 0, 0.2, 1);
}
a:hover { color: var(--terracotta-press); }
a:active { color: var(--ink); }

/* removes iOS double-tap-to-zoom on the two-tap seat claim, plus residual tap delay */
.cell.seat, .btn-primary, .masthead-nav a, .seat-clear, .copy-app { touch-action: manipulation; }

:focus-visible {
  outline: 2px solid var(--crail-deep);
  outline-offset: 2px;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 24px;
}

.band-oat { background: var(--oat); }

section { padding-block: 96px; }

/* ---------- 1 · Masthead ---------- */

.masthead { border-bottom: 1px solid var(--hairline); }
.masthead-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 32px;
  padding-block: 16px;
}
.masthead-brand {
  font-family: var(--serif-display);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
}
.masthead-nav { display: flex; gap: 24px; }
.masthead-nav a {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 1px;
  position: relative;
}
/* 44px hit area without moving the visual baseline or the underline */
.masthead-nav a::after {
  content: "";
  position: absolute;
  inset: -14px -8px;
}
.masthead-nav a:hover { color: var(--terracotta-press); border-bottom-color: var(--terracotta-press); }
.masthead-meta {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  margin-left: auto;
}

/* ---------- 2 · Hero ---------- */

.hero { padding-top: 14vh; padding-bottom: 112px; }
.hero h1 { max-width: 14.6em; }
.lead {
  font-size: 1.3125rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 32em; /* ~64ch at this size; inside the 45–75ch envelope */
  margin-top: 32px;
}

.hero-rule {
  position: relative;
  width: 70%;
  height: 1px;
  background: var(--hairline);
  margin-top: 96px;
  margin-bottom: 48px;
}
#clawd-hero {
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  shape-rendering: crispEdges;
}
@keyframes walk {
  from { transform: translateX(var(--wd, -400px)); }
  to   { transform: translateX(0); }
}
/* two-frame leg gait during the walk: alternate pairs lift one whole sprite unit, hard cut */
@keyframes gait {
  0%, 49.9% { transform: translateY(0); }
  50%, 100% { transform: translateY(-1px); } /* 1px = 1 sprite unit in SVG user space */
}
#clawd-hero.walking .leg-a { animation: gait 132ms steps(1, end) infinite; }
#clawd-hero.walking .leg-b { animation: gait 132ms steps(1, end) infinite reverse; }
#clawd-hero.blink .eye { fill: #D97757; }

.cta-row { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }

.bwrap { display: inline-block; }
.bwrap:focus-within { outline: 2px solid var(--crail-deep); outline-offset: 2px; }
.btn-primary {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 0;
  padding: 14px 28px;
  clip-path: var(--chamfer);
  cursor: pointer;
}
.btn-primary:hover { color: var(--wash); background: var(--ink-soft); } /* hard swap by design: pixel grammar */
.btn-primary:active { color: var(--wash); background: var(--ink); }
.btn-primary:focus-visible { outline: none; }

.link-charter {
  font-family: var(--serif-body);
  font-size: 1rem;
  color: var(--terracotta-text);
}
/* the arrow glyph lives in Inter's subset, not the serif's */
.glyph-arrow { font-family: var(--sans); }

/* ---------- 3 · Preamble ---------- */

.preamble-wrap { position: relative; max-width: 46rem; }
.preamble-body p { font-size: 1.125rem; }
.preamble-body p + p { margin-top: 24px; }

.dropcap::first-letter {
  font-family: var(--serif-display);
  font-weight: 500;
  color: var(--terracotta-text);
  float: left;
  font-size: 4.6em;
  line-height: 0.78;
  padding: 0.04em 0.1em 0 0;
}
/* initial-letter computes the cap box consistently where supported (Safari needs this) */
@supports (initial-letter: 3) {
  .dropcap::first-letter {
    initial-letter: 3;
    float: none;
    font-size: unset;
    line-height: unset;
    padding: 0 0.1em 0 0;
  }
}

.marginalia {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--terracotta-text);
  border-left: 1px solid var(--hairline);
  padding-left: 16px;
  width: 13rem;
}
@media (min-width: 1180px) {
  .marginalia {
    position: absolute;
    left: calc(100% + 48px);
    top: 4px;
  }
}
@media (max-width: 1179px) {
  .marginalia { margin-top: 32px; }
}

.footnote {
  margin-top: 56px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  width: fit-content;
  font-size: 0.875rem;
  color: var(--muted);
}
/* eyebrow register, not mono — Plex Mono's permitted-use list doesn't include copy moments */
.fn-mark {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
}

/* ---------- 4 · Weekly practice ---------- */

.weekly h2 { margin-bottom: 24px; max-width: 18em; }
.weekly-intro {
  color: var(--ink-soft);
  max-width: 65ch;
  margin-bottom: 48px;
}

.index { border-top: 1px solid var(--hairline); }
.index-row {
  display: grid;
  grid-template-columns: 232px 1fr 96px;
  gap: 24px;
  align-items: baseline;
  padding: 20px 8px;
  border-bottom: 1px solid var(--hairline);
}
.index-row.current { background: var(--wash); }
.index-theme {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 1.3125rem;
  line-height: 1.3;
}
.index-desc {
  font-family: var(--serif-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.index-wk {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--terracotta-text);
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .index-row { grid-template-columns: 1fr auto; }
  .index-theme { grid-row: 1; grid-column: 1; }
  .index-wk { grid-row: 1; grid-column: 2; }
  .index-desc { grid-row: 2; grid-column: 1 / -1; }
}

/* ---------- 5 · The gauntlet ---------- */

.bylaws {
  background: var(--raised);
  border: 1px solid var(--hairline);
  padding: 56px 64px;
  max-width: 800px;
}
.nb { white-space: nowrap; }
.charter-frame {
  font-family: var(--serif-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 58ch;
  margin-bottom: 40px;
}
.clauses { list-style: none; counter-reset: clause; }
.clauses li {
  counter-increment: clause;
  position: relative;
  padding-left: 40px;
  max-width: 58ch;
}
.clauses li + li { margin-top: 24px; }
.clauses li::before {
  content: counter(clause) ".";
  position: absolute;
  left: 0;
  font-family: var(--serif-body);
  font-weight: 600;
  color: var(--ink-soft);
}
.fine-print {
  margin-top: 40px;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
@media (max-width: 720px) {
  .bylaws { padding: 40px 24px; }
}

/* ---------- 6 · The roster ---------- */

.roster-sec { padding-block: 112px; }
.roster-wrap { position: relative; margin-top: 56px; }

.roster-grid {
  /* 32px floor on tablet/desktop (BRAND.md cell minimum / tap target);
     the phone override below lowers the floor so the WHOLE creature fits a 390px viewport —
     a complete Clawd beats a 32px-but-cropped one on the highest-traffic device */
  --cell: clamp(32px, calc((100vw - 32px) / 14), 44px);
  display: grid;
  grid-template-columns: repeat(14, var(--cell));
  grid-auto-rows: var(--cell);
  width: fit-content;
  margin-inline: auto;
  /* reserve the creature's height so slow/failed JS never collapses the section */
  min-height: calc(var(--cell) * 11);
}
.cell { border: 0; padding: 0; appearance: none; background: transparent; display: block; }
.cell.gap { visibility: hidden; }
.cell.eyec { background: var(--ink); }
.cell.seat { cursor: pointer; }
.cell.seat.open {
  background: var(--oat);
  /* --faint clears the 3:1 non-text bar on paper, so open seats read as claimable */
  box-shadow: inset 0 0 0 1px var(--faint);
}
.cell.seat.filled { background: var(--terracotta); box-shadow: none; }
/* gauntlet decay: three hard steps down to --faint, driven by data-decay */
.cell.seat.decayed { background: var(--decay-1); box-shadow: none; }
.cell.seat.decayed[data-decay="2"] { background: var(--decay-2); }
.cell.seat.decayed[data-decay="3"] { background: var(--faint); }
/* hover/focus emphasis — hard step, no fade, matching the pixel grammar */
.cell.seat.open:hover,
.cell.seat.open:focus-visible {
  background: var(--wash);
  box-shadow: inset 0 0 0 1px var(--terracotta);
}
.cell.seat.filled:hover,
.cell.seat.filled:focus-visible,
.cell.seat.decayed:hover,
.cell.seat.decayed:focus-visible {
  box-shadow: inset 0 0 0 1px var(--crail-deep);
}
/* the coordinate you asked for stays marked on the creature */
.cell.seat.requested,
.cell.seat.requested:hover,
.cell.seat.requested:focus-visible {
  background: var(--wash);
  box-shadow: inset 0 0 0 2px var(--terracotta);
}
.cell.seat:focus-visible {
  outline: 2px solid var(--crail-deep);
  outline-offset: 2px;
  position: relative;
  z-index: 2;
}

.tooltip {
  position: absolute;
  z-index: 3;
  background: var(--paper);
  border: 1px solid var(--hairline);
  box-shadow: 0 2px 12px rgba(20, 20, 19, 0.06);
  padding: 10px 14px;
  font-family: var(--serif-body);
  font-size: 0.9375rem;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  /* the one permitted soft motion: decelerate-only fade; visibility delays the hide */
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms cubic-bezier(0, 0, 0.2, 1), visibility 0s 150ms;
}
.tooltip.show {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s, 0s;
}
.tooltip em { font-style: italic; }
.tooltip .tt-m {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.75rem;
  color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
  .tooltip { transition: none; }
}
@media (max-width: 720px) {
  .tooltip { white-space: normal; max-width: calc(100vw - 48px); }
}

.roster-caption {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.3125rem;
  color: var(--ink-soft);
  margin-top: 56px;
}
.roster-note {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 12px;
}

/* ---------- 7 · The convener ---------- */

.convener-name {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.2;
  margin-bottom: 16px;
}
.convener-body { color: var(--ink-soft); max-width: 65ch; }

/* ---------- 8 · Request consideration ---------- */

.apply-sec { padding-top: 144px; padding-bottom: 128px; }
.apply-intro { margin-top: 24px; color: var(--ink-soft); }

.seat-line {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--terracotta-text);
  margin-top: 24px;
}
.seat-clear {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--muted);
  background: none;
  border: 0;
  /* expands the hit area to ~44px without shifting the inline layout */
  padding: 12px 8px;
  margin: -12px -8px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.seat-clear:hover { color: var(--terracotta-press); }

#apply-form { margin-top: 56px; max-width: 40rem; }
.field + .field { margin-top: 40px; }

.field label {
  display: block;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin-bottom: 10px;
}
/* the field's one warm interactive moment: a terracotta left edge on focus.
   the chamfer is brand geometry but reads as ~0 at field width, so the accent
   carries the cue instead. wrapper gets the focus ring; the bar sits inside it. */
.fwrap { position: relative; }
.fwrap:focus-within { outline: 2px solid var(--crail-deep); outline-offset: 2px; }
.fwrap:focus-within::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--terracotta);
  z-index: 1;
  pointer-events: none;
}
.field input,
.field textarea {
  width: 100%;
  background: var(--raised);
  border: 1px solid var(--hairline);
  clip-path: var(--chamfer);
  font-family: var(--serif-body);
  font-size: 1rem;
  color: var(--ink);
  padding: 12px 16px;
  resize: vertical;
}
.field input:focus,
.field textarea:focus { outline: none; }
.field input::placeholder,
.field textarea::placeholder { color: var(--faint); }
.hint {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 8px;
}
#apply-form .bwrap { margin-top: 48px; }

.success {
  margin-top: 56px;
  background: var(--wash);
  padding: 40px 48px;
  max-width: 40rem;
}
.success:focus { outline: none; }
.success p {
  font-family: var(--serif-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
}
.success-fallback {
  margin-top: 12px;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
/* the composed application, rendered on-page so a truncated mailto is recoverable */
.app-copy { margin-top: 24px; }
.app-copy pre {
  background: var(--paper);
  border: 1px solid var(--hairline);
  padding: 16px 20px;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--ink-soft);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-height: 16rem;
  overflow-y: auto;
}
.copy-app {
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 12px 8px;
  margin-left: -8px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.copy-app:hover { color: var(--terracotta-press); }
.noscript-note {
  margin-top: 32px;
  font-size: 1rem;
  color: var(--ink-soft);
}

/* ---------- 9 · Colophon ---------- */

.colophon {
  border-top: 1px solid var(--hairline);
  padding: 96px 24px 80px;
  text-align: center; /* the only centered element on the page */
}
.seal { display: inline-flex; flex-direction: column; align-items: center; }
.seal svg { shape-rendering: crispEdges; margin-bottom: 16px; }
.seal-text {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ink);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 8px 24px;
}
.colophon-credits {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  margin: 32px auto 0;
}
.colophon-disclaimer {
  font-size: 0.9375rem;
  color: var(--muted);
  margin: 16px auto 0;
}

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  section { padding-block: 64px; }
  .hero { padding-top: 12vh; padding-bottom: 72px; }
  .hero h1 { max-width: 100%; }
  .hero-rule { width: 86%; margin-top: 64px; }
  .masthead-meta { margin-left: 0; width: 100%; order: 3; }
  .apply-sec { padding-top: 96px; padding-bottom: 96px; }
  .roster-sec { padding-block: 80px; }
  .roster-sec .container { padding-inline: 16px; }
  .success { padding: 32px 24px; }
}
/* below 480px the 32px floor would force 14×32 = 448px > viewport, cropping the creature.
   Lower the floor to 26px so the full Clawd fits a 390px phone (14×26 = 364px). 26px cells
   stay tappable; a whole visible mascot is the signature moment, a cropped one defeats it.
   The pan stays only as a safety net for sub-364px viewports. */
@media (max-width: 480px) {
  .roster-grid { --cell: clamp(26px, calc((100vw - 26px) / 14), 32px); }
  .roster-wrap { overflow-x: auto; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  #clawd-hero { animation: none !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}