/* Featherstall brand — featherstall.com
   Idea: measured, then drawn to scale. One signal colour marks every measured quantity. */

@font-face {
  font-family: "Archivo";
  src: url(/_p/archivo.woff2) format("woff2");
  font-weight: 300 800;
  font-stretch: 62% 100%;
  font-display: swap;
}
/* Metric-matched fallback so the swap does not move a line. */
@font-face {
  font-family: "Archivo fallback";
  src: local("Arial"), local("Liberation Sans"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 101.6%;
  ascent-override: 86.4%;
  descent-override: 20.7%;
  line-gap-override: 0%;
}

:root {
  /* colour */
  --paper: oklch(0.97 0.006 85);
  --ink: oklch(0.2 0.006 60);
  --signal: oklch(0.66 0.205 40);
  --ink-2: oklch(0.46 0.01 60);
  --rule: oklch(0.84 0.008 80);
  --paper-2: oklch(0.78 0.01 80);
  --well: oklch(0.995 0.003 85);

  /* type */
  --sans: "Archivo", "Archivo fallback", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --t-xs: 0.75rem;
  --t-s: 0.875rem;
  --t-m: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --t-l: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --t-xl: clamp(2rem, 1.4rem + 2.6vw, 3.75rem);
  --t-xxl: clamp(3rem, 1.8rem + 5.4vw, 7.5rem);
  --t-giant: clamp(11rem, 1rem + 33vw, 31rem);

  /* space: 4px base */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  --edge: clamp(1rem, 3.4vw, 3rem);
  --cols: 12;
  --gap: clamp(1rem, 1.6vw, 1.5rem);
  --hair: 1px;
  --control: 3.25rem;

  color-scheme: light;
  accent-color: var(--signal);
  caret-color: var(--signal);
  scrollbar-color: var(--ink) var(--paper);
}

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

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  hanging-punctuation: first allow-end last;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-m) / 1.5 var(--sans);
  font-variant-numeric: lining-nums proportional-nums;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ol, ul, figure, table { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
abbr[title] { text-decoration: none; }
b { font-weight: 600; }
h1, h2, h3 { text-wrap: balance; font-weight: 700; }
p, li, dd, summary { text-wrap: pretty; }

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

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

a { color: inherit; text-decoration-thickness: var(--hair); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--signal); text-decoration-thickness: 2px; }

.mono { font: 500 0.92em/1 var(--mono); letter-spacing: -0.01em; }

.label {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  font-stretch: 100%;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-variant-numeric: lining-nums tabular-nums;
}

.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; inset-block-start: var(--s-2); inset-inline-start: var(--s-2);
  z-index: 10; padding: var(--s-2) var(--s-4);
  background: var(--ink); color: var(--paper); font-weight: 600;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---------- wordmark ---------- */
.wordmark {
  font-size: 1.625rem;
  font-weight: 800;
  font-stretch: 62%;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.wordmark-stop { color: var(--signal); }
.wordmark:hover { text-decoration: none; }

/* ---------- top bar ---------- */
.top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-5) var(--edge);
  border-block-end: var(--hair) solid var(--ink);
}
.top-nav { display: flex; gap: var(--s-5); font-size: var(--t-s); font-weight: 500; }
.top-nav a { text-decoration: none; }
.top-nav a:hover { text-decoration: underline; text-decoration-color: var(--signal); }
.top-signin { font-weight: 700; }

/* ---------- shared section grid ---------- */
.hero, .proof, .steps, .themes, .pricing, .faq {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gap);
  padding: var(--s-9) var(--edge);
}
.hero > *, .proof > *, .steps > *, .themes > *, .pricing > *, .faq > * { grid-column: 1 / -1; }

.section-head { display: grid; gap: var(--s-4); align-self: start; align-content: start; margin-block-end: var(--s-8); }
.section-head .label { color: var(--ink-2); }
.section-title {
  font-size: var(--t-xl);
  font-stretch: 75%;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.015em;
  max-width: 18ch;
}
.section-lede { max-width: 46ch; font-size: var(--t-l); line-height: 1.35; }

/* ---------- hero ---------- */
.hero { padding-block: var(--s-7) var(--s-8); row-gap: var(--s-5); }
.hero-label { color: var(--ink-2); }
.hero-title { display: grid; font-weight: 700; }
.hero-lead {
  font-size: clamp(2.5rem, 1.2rem + 4.4vw, 5.5rem);
  font-stretch: 75%;
  line-height: 0.95;
  letter-spacing: -0.012em;
  word-spacing: 0.06em;
}
.hero-num {
  font-size: var(--t-giant);
  font-stretch: 62%;
  font-weight: 800;
  line-height: 0.78;
  letter-spacing: -0.035em;
  font-variant-numeric: lining-nums;
  color: var(--signal);
  margin-block-start: 0.06em;
  margin-inline-start: -0.04em;
}
.hero-unit {
  font-size: 0.34em;
  font-stretch: 75%;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-inline-start: 0.08em;
}

/* minmax(0, 1fr), here and in .start: the form may shrink below its natural width. */
.hero-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-content: end; }
.lede { font-size: var(--t-l); line-height: 1.35; max-width: 34ch; font-variant-numeric: lining-nums; }

.start { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.start-row { display: flex; }
.start-input {
  flex: 1;
  min-width: 0;
  height: var(--control);
  padding: 0 var(--s-4);
  font: inherit;
  color: var(--ink);
  background: var(--well);
  border: var(--hair) solid var(--ink);
  border-inline-end: 0;
  border-radius: 0;
}
.start-input::placeholder { color: var(--ink-2); }
.start-input:focus-visible { outline-offset: -3px; }
.start-note { font-size: var(--t-s); color: var(--ink-2); }
.start-welcome { font-weight: 600; padding-inline-start: var(--s-3); border-inline-start: 3px solid var(--signal); }
.live-link { font-weight: 600; text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.start-error { font-size: var(--t-s); font-weight: 600; padding-inline-start: var(--s-3); border-inline-start: 3px solid var(--signal); }

.button {
  height: var(--control);
  padding: 0 var(--s-5);
  font: 600 var(--t-m) / 1 var(--sans);
  color: var(--paper);
  background: var(--ink);
  border: var(--hair) solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
}
.button:hover { background: var(--signal); color: var(--ink); }
.button:active { transform: translateY(1px); }

/* The ruler: 1 ms edge to edge, 0.2 ms filled. */
.ruler { margin-block-start: var(--s-7); display: grid; gap: var(--s-2); }
.ruler-scale {
  position: relative;
  height: 3.5rem;
  border-block-start: var(--hair) solid var(--ink);
  border-inline: var(--hair) solid var(--ink);
  background:
    repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 0 10%) 0 0 / 100% 2.25rem no-repeat,
    repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 0 5%) 0 0 / 100% 1.25rem no-repeat,
    repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 0 1%) 0 0 / 100% 0.625rem no-repeat;
}
.ruler-scale::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: calc(20% + 1px);
  background: var(--signal);
  border-inline-end: 2px solid var(--ink);
  mix-blend-mode: multiply;
  transform-origin: left;
}
.ruler-marks {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  font-size: var(--t-s);
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
}
.ruler-marks li { justify-self: start; translate: -50% 0; }
.ruler-marks li:first-child { translate: none; }
.ruler-marks li:nth-child(3) { font-weight: 700; }
.ruler-marks li:nth-child(10) { grid-area: 1 / 10; }
.ruler-marks li:last-child { grid-area: 1 / 10; justify-self: end; translate: none; }
.ruler-caption {
  display: flex; gap: var(--s-4); align-items: baseline;
  margin-block-start: var(--s-3);
  font-size: var(--t-s);
  max-width: 60ch;
}

/* ---------- proof ---------- */
.proof { background: var(--ink); color: var(--paper); }
.proof .section-head .label { color: var(--paper-2); }
.proof ::selection { background: var(--signal); color: var(--ink); }

.specimens {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.specimen {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
}
.specimen > p { padding-inline-end: var(--gap); }
.draw {
  height: calc(400px + var(--s-6));
  display: flex;
  align-items: flex-end;
  gap: 2px;
  border-block-end: var(--hair) solid var(--paper-2);
  margin-block-end: var(--s-5);
}
.draw-core {
  width: 125px;
  height: 400px;
  background: var(--signal);
  padding: var(--s-2);
}
.draw-tag { color: var(--ink); }
.draw-tag { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; font-variant-numeric: lining-nums; }
.draw-size::before {
  content: "";
  width: 112px;
  height: 128px;
  background: var(--signal);
}
.draw-js { align-items: flex-end; gap: var(--s-2); }
.draw-js::before {
  content: "";
  width: 1px;
  height: var(--s-3);
  background: var(--paper-2);
}
.draw-js::after {
  content: "0 × 0 px";
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.09em;
  font-variant-numeric: lining-nums;
  color: var(--paper-2);
  padding-block-end: 2px;
}

.specimen-num {
  font-size: var(--t-xxl);
  font-stretch: 62%;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
}
.specimen-unit { font-size: 0.5em; font-stretch: 75%; font-weight: 700; margin-inline-start: 0.06em; }
.specimen-what { font-size: var(--t-l); line-height: 1.25; margin-block-start: var(--s-2); max-width: 20ch; }
.specimen-note { display: flex; gap: var(--s-4); align-items: baseline; font-size: var(--t-s); color: var(--paper-2); margin-block-start: var(--s-4); max-width: 40ch; }
.specimen-note .label, .ruler-caption .label { flex: none; }
.specimen-note .label { color: var(--paper); }
.proof-foot {
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-4);
  border-block-start: var(--hair) solid var(--paper-2);
  font-size: var(--t-l);
  max-width: 40ch;
}

/* ---------- steps ---------- */
.step-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gap);
  counter-reset: step;
}
.step {
  counter-increment: step;
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding-block-start: var(--s-4);
  border-block-start: var(--hair) solid var(--ink);
}
.step::before {
  content: counter(step);
  font-size: var(--t-xxl);
  font-stretch: 62%;
  font-weight: 300;
  line-height: 0.85;
  font-variant-numeric: lining-nums;
  margin-block-end: var(--s-5);
}
.step-title { font-size: var(--t-l); font-stretch: 85%; line-height: 1.15; }
.step p { max-width: 36ch; }

/* Fig. 5: the builder's one AI marker, shown where Claude enters the story. */
.drafted { display: grid; gap: var(--s-3); margin-block-start: var(--s-4); max-width: 22rem; }
.drafted-pair { display: grid; gap: var(--s-3); }
.drafted-field { display: grid; gap: var(--s-1); }
.drafted-tag {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: 0.6875rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2);
}
.drafted-value { padding: var(--s-2) var(--s-3); background: var(--well); border: var(--hair) solid var(--ink); font-size: var(--t-s); }
.drafted-field.is-draft .drafted-value, .drafted-field.is-draft .drafted-tag::before { border: var(--hair) dashed var(--ink); }
.drafted-field.is-draft .drafted-tag::before { content: ""; flex: none; width: 1.25rem; height: 0.625rem; }
.drafted-caption { display: flex; gap: var(--s-4); align-items: baseline; font-size: var(--t-s); }
.drafted-caption .label { flex: none; }

/* ---------- themes ---------- */
.theme-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}
.theme img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--rule);
}
.theme-name {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  padding-block: var(--s-3);
  border-block-end: var(--hair) solid var(--ink);
  font-weight: 600;
}
.theme-name .label { color: var(--ink-2); }
.theme { --swatch: var(--ink); }
.theme-folio { --swatch: #17624a; }
.theme-grid { --swatch: #ff4f1a; }
.theme-kiln { --swatch: #a44f2c; }
.theme-gallery { --swatch: #d0311d; }
.theme-accent {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-block-start: var(--s-3);
  font-size: var(--t-s);
  color: var(--ink-2);
}
.theme-accent::before {
  content: "";
  width: var(--s-4);
  height: var(--s-4);
  background: var(--swatch);
}

/* ---------- pricing ---------- */
.pricing { border-block-start: var(--hair) solid var(--ink); }
.pricing-title {
  display: grid;
  font-stretch: 75%;
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.pricing-free, .pricing-per { font-size: var(--t-xl); }
.pricing-rate {
  font-size: var(--t-giant);
  font-stretch: 62%;
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.035em;
  font-variant-numeric: lining-nums;
}
.pricing-body { display: grid; gap: var(--s-6); align-content: end; }
.pricing-copy { font-size: var(--t-l); line-height: 1.35; max-width: 32ch; }

.receipt {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: lining-nums tabular-nums;
}
.receipt caption { text-align: start; color: var(--ink-2); padding-block-end: var(--s-3); }
.receipt th, .receipt td {
  padding-block: var(--s-3);
  border-block-start: var(--hair) solid var(--rule);
  text-align: start;
  font-weight: 400;
}
.receipt td { text-align: end; }
.receipt tr:first-child > * { border-block-start-color: var(--ink); }
.receipt tr:last-child > * { border-block-end: var(--hair) solid var(--ink); }

/* ---------- faq ---------- */
.faq { border-block-start: var(--hair) solid var(--ink); }
.faq-list { border-block-start: var(--hair) solid var(--ink); }
.faq-item { border-block-end: var(--hair) solid var(--ink); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-5);
  padding-block: var(--s-5);
  font-size: var(--t-l);
  font-weight: 600;
  font-stretch: 85%;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: none;
  font-weight: 400;
  font-stretch: 100%;
  font-variant-numeric: lining-nums;
}
.faq-item[open] summary::after { content: "−"; color: var(--signal); }
.faq-item summary:hover { color: color-mix(in oklch, var(--ink) 80%, var(--signal)); }
.faq-item p { max-width: 58ch; padding-block-end: var(--s-6); }

/* ---------- footer ---------- */
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-4) var(--s-6);
  padding: var(--s-7) var(--edge) var(--s-8);
  background: var(--ink);
  color: var(--paper);
}
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); font-weight: 500; }
.foot-colophon { margin-inline-start: auto; font-size: var(--t-s); color: var(--paper-2); max-width: 44ch; }
.foot-fig { color: var(--paper); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- wide layout ---------- */
@media (min-width: 80rem) {
  .hero-title { grid-column: 1 / 9; grid-row: 2; }
  .hero-side { grid-column: 9 / -1; grid-row: 2; padding-block-end: var(--s-2); }
}
@media (min-width: 56rem) and (max-width: 79.99rem) {
  .hero-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap); align-items: end; }
}
/* Tablet: the rate drawing takes a full row; 14 KB and 0 KB share a baseline beneath it. */
@media (min-width: 48rem) and (max-width: 79.99rem) {
  .specimens { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; row-gap: var(--s-8); }
  .specimen-rate { grid-column: 1 / -1; }
  .specimen-size .draw, .specimen-js .draw { height: calc(128px + var(--s-5)); }
}
@media (min-width: 60rem) {

  .proof .section-head, .steps .section-head, .themes .section-head { grid-column: 1 / 9; }

  .pricing .section-head { grid-column: 1 / 8; margin: 0; }
  .pricing-body { grid-column: 8 / -1; }

  .faq .section-head { grid-column: 1 / 5; }
  .faq-list { grid-column: 5 / -1; }
}

/* ---------- narrow layout ---------- */
@media (max-width: 59.99rem) {
  .hero, .proof, .steps, .themes, .pricing, .faq { padding-block: var(--s-8); }
  .hero { padding-block-start: var(--s-6); }
  .specimens { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-8); }
  @media (min-width: 48rem) { .specimens { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  .draw { height: auto; min-height: var(--s-6); }
  .theme-name { flex-direction: column; gap: var(--s-1); }
  .pricing .section-head { margin-block-end: var(--s-4); }
  .step-list { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-7); }
  .theme-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-body { margin-block-start: var(--s-6); }
  .top-nav a:not(.top-signin) { display: none; }
}
@media (max-width: 30rem) {
  .start-row { flex-direction: column; gap: var(--s-2); }
  .start-input { flex: none; border-inline-end: var(--hair) solid var(--ink); }
  .ruler-marks li:not(:nth-child(1), :nth-child(3), :nth-child(6), :last-child) { visibility: hidden; }
  .ruler-scale {
    background:
      repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 0 10%) 0 0 / 100% 2.25rem no-repeat,
      repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 0 5%) 0 0 / 100% 1.25rem no-repeat,
      repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 0 2.5%) 0 0 / 100% 0.625rem no-repeat;
  }
  .foot-colophon { margin-inline-start: 0; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .ruler-scale::before { animation: measure 600ms cubic-bezier(0.2, 0.7, 0.1, 1) 100ms both; }
  @keyframes measure { from { transform: scaleX(0); } }

  .button { transition: background-color 120ms, transform 60ms; }
  .faq-item summary::after { transition: color 120ms; }
}