@import url("./tokens.css");
@import url("./base.css");

/* Components. Values from spec/intent.md 4.5 to 4.8 and 9. */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap-columns);
}

/* ---------- Controls (4.5) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-lg);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-md);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:hover { background: var(--color-ink); border-color: var(--color-ink); }
.btn:active { transform: translateY(1px); }
.btn--quiet { background: transparent; color: var(--color-ink); border-color: var(--color-rule); }
.btn--quiet:hover { background: var(--color-paper-3); border-color: var(--color-muted); }

.status {
  display: inline-block;
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.3;
  white-space: nowrap;
}
.status--live { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }

.prose-links a,
.facts a,
.measures a,
.flow a {
  color: var(--color-ink);
  text-decoration-color: var(--color-muted);
  transition: text-decoration-color var(--dur-short) var(--ease-out);
}
.prose-links a:hover,
.facts a:hover,
.measures a:hover,
.flow a:hover { text-decoration-color: var(--color-accent); }

/* Small labels: "01 · Find", "F-01 · Personal" */
.label, .finding-id {
  color: var(--color-accent);
  font-size: var(--text-sm);
  line-height: 1.4;
}

/* "Two measures. No numbers yet.", "Graduated from the lab", "Experiments" */
h3.sub {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-muted);
  max-width: none;
}

.lead {
  font-size: var(--text-lead);
  line-height: 1.45;
  max-width: 52ch;
  color: var(--color-ink-2);
}

/* ---------- Skip link, banner, bar (4.6) ---------- */
.skip {
  position: absolute;
  left: var(--space-md);
  top: -96px;
  z-index: var(--z-tooltip);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-ink);
  color: var(--color-paper);
  text-decoration: none;
}
.skip:focus { top: var(--space-md); }

.banner {
  height: var(--banner-h);
  border-bottom: 1px solid var(--color-rule);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.banner .container { height: 100%; display: flex; align-items: center; white-space: nowrap; }
.banner b { color: var(--color-accent); font-weight: 500; }
.cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.1em;
  margin-left: 4px;
  vertical-align: -0.2em;
  background: var(--color-accent);
  animation: blink 1.1s steps(1) 5;
}
@keyframes blink { 50% { opacity: 0; } }

.bar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-nav);
  height: var(--bar-h);
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-rule);
}
.bar .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}
.mark svg { width: 22px; height: 22px; flex: none; }
.mark .bolt { fill: var(--color-accent); }
.mark-word > span { color: var(--color-accent); }
.links { display: flex; align-items: center; gap: var(--space-lg); font-size: var(--text-sm); }
.links a:not(.btn) {
  color: var(--color-ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out);
}
.links a:not(.btn):hover { color: var(--color-ink); }
.links a:not(.btn):active { color: var(--color-accent); }
.links .btn { min-height: 44px; font-size: var(--text-md); }

/* ---------- Sections ---------- */
.band { padding-block: var(--section-gap-s); }
.band--2 { background: var(--color-paper-2); }
.band > .container > h2 + .lead,
.band > .container > .lead + .lead { margin-top: var(--space-lg); }
.facts a[href^="#f-"] { white-space: nowrap; }

/* The two sections the page is about now: bigger heads than the rest. */
.band--lead > .container > h2 { font-size: var(--text-display-s); line-height: 1; max-width: 20ch; }

/* ---------- Hero ---------- */
.hero { padding-top: var(--space-3xl); padding-bottom: var(--space-2xl); }
.built { padding-top: var(--space-2xl); }
.hero-head { align-items: end; }
.hero h1 { grid-column: 1 / 8; max-width: 14ch; line-height: 0.98; }
.hero-side { grid-column: 9 / 13; display: flex; flex-direction: column; gap: var(--space-lg); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ---------- Index rows (4.8) ---------- */
.index { border-top: 1px solid var(--color-rule); }
.row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-columns);
  align-items: baseline;
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--color-rule);
  color: inherit;
  text-decoration: none;
}
.row h3 {
  grid-column: 1 / 4;
  font-size: var(--text-section);
  line-height: 1;
  transition: color var(--dur-short) var(--ease-out);
}
.row .addr { grid-column: 4 / 7; font-size: var(--text-sm); color: var(--color-muted); overflow-wrap: anywhere; }
.row .addr--live { color: var(--color-accent); }
.row > p { grid-column: 7 / 11; color: var(--color-ink-2); }
.row > .status { grid-column: 11 / 13; justify-self: end; }
a.row:hover h3 { color: var(--color-accent); }
a.row:active h3 { color: var(--color-ink-2); }
a.row:focus-visible { outline-offset: -2px; }
.row--dim h3, .row--dim .addr { color: var(--color-muted); }
.row--grad h3 { font-size: var(--text-2xl); overflow-wrap: normal; } /* scar 12 */

/* ---------- Built and in use (#built) ---------- */
.built-block + .built-block { margin-top: var(--space-4xl); }
.built-intro { margin-bottom: var(--space-2xl); }
.built-intro .lead { margin-top: var(--space-lg); }
.built-block > h3.sub { margin-bottom: var(--space-lg); }

/* pia case, nested in Built */
.pia-head { align-items: center; margin-bottom: var(--space-2xl); }
.pia-text { grid-column: 1 / 8; display: flex; flex-direction: column; gap: var(--space-2xl); }
.pia-text h3, .offer-text h3 { font-size: var(--text-3xl); line-height: 1.05; max-width: 20ch; }
.pia-phone { grid-column: 9 / 13; }
.shot { border-radius: var(--radius-card); outline: 1px solid var(--color-rule); outline-offset: -1px; }
.shot--phone { aspect-ratio: 780 / 1180; }
.shot--desktop { aspect-ratio: 2880 / 1300; }
.shot img { border-radius: var(--radius-card); }
.pia-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-md); }
.caption { color: var(--color-muted); font-size: var(--text-sm); max-width: 60ch; }
.caption a { color: var(--color-ink-2); text-decoration-color: var(--color-muted); }
.caption a:hover { text-decoration-color: var(--color-accent); }

/* Built to order: the one offer, a paper-2 panel inside the Built band. */
.offer {
  background: var(--color-paper-2);
  border-radius: var(--radius-card);
  padding: var(--space-3xl) var(--space-2xl);
}
.offer-grid { align-items: center; }
.offer-text { grid-column: 1 / 6; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-lg); }
.offer-text > p { color: var(--color-ink-2); }
.offer-text > a:not(.btn) { color: var(--color-ink-2); text-decoration-color: var(--color-muted); }
.offer-text > a:not(.btn):hover { text-decoration-color: var(--color-accent); }
.offer-tools { grid-column: 7 / 13; min-width: 0; }
.offer-tools pre {
  min-height: 360px;
  padding: var(--space-2xl) var(--space-xl);
  background: var(--color-paper-3);
  border-radius: var(--radius-card);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 2;
  color: var(--color-ink-2);
  overflow-x: auto;
}
.offer-tools pre b { color: var(--color-ink); font-weight: 500; }
.offer-tools pre i { color: var(--color-muted); font-style: normal; }
.offer-tools pre .prompt { color: var(--color-accent); }
.offer-tools .caption { margin-top: var(--space-sm); }

/* ---------- Facts lists ---------- */
.facts { display: flex; flex-direction: column; gap: var(--space-xs); }
.facts > div { display: grid; grid-template-columns: minmax(0, 11ch) minmax(0, 1fr); column-gap: var(--space-lg); }
.facts dt { color: var(--color-muted); }
.facts dd { color: var(--color-ink-2); min-width: 0; }
.facts--sm { font-size: var(--text-sm); }

/* ---------- Running now (#running) ---------- */
.run-area { margin-top: var(--space-2xl); }
.run-area > .label { margin-bottom: var(--space-md); }
.row--run { position: relative; padding-block: var(--space-xl); row-gap: var(--space-md); }
.row--run .run-id {
  grid-column: 1 / 4;
  grid-row: 1 / 3;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-section);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  font-synthesis: none;
}
.row--run h3 { grid-column: 4 / 11; font-size: var(--text-2xl); line-height: 1.1; max-width: 30ch; }
.row--run .facts { grid-column: 4 / 13; max-width: 88ch; }
.row--run .run-status {
  position: absolute;
  top: var(--space-xl);
  right: 0;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
}
.row--run .run-status dt { color: var(--color-muted); }
.row--run .facts > .run-status { display: flex; }

/* ---------- Logo strip (4.7 #2, 7) ---------- */
.logos { padding-block: var(--space-xl); border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }
.logos-title { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); margin-bottom: var(--space-md); }
.logos ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg) var(--space-xl); }
.logos img { width: auto; max-width: 150px; filter: brightness(0) invert(1); opacity: 0.62; transition: opacity 0.2s; }
.logos img:hover { opacity: 1; }

/* ---------- Knowledge ---------- */
.knowledge { scroll-margin-top: var(--bar-h); }
.knowledge .lead { max-width: 64ch; }
.knowledge h2 { max-width: 20ch; }
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); margin-top: var(--space-2xl); }
.step { border-top: 1px solid var(--color-ink); padding-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
.step:last-child { border-top-color: var(--color-accent); }
.step h3, .area h3 { font-size: var(--text-xl); }
.step > p:not(.label) { color: var(--color-ink-2); }
.knowledge > .container > h3.sub { margin-top: var(--space-2xl); margin-bottom: var(--space-md); }
.knowledge .closing { margin-top: var(--space-xl); color: var(--color-ink-2); }
.measures li { padding-left: 2ch; text-indent: -2ch; }
.measures li::before { content: "> "; color: var(--color-muted); }

/* ---------- Research areas ---------- */
.research { padding-top: var(--section-gap); }
.areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-2xl); }
.area { border-top: 1px solid var(--color-ink); padding-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }

/* ---------- Open models ---------- */
.sovereign { scroll-margin-top: var(--bar-h); }
.sovereign .lead { max-width: 64ch; }
.sovereign .facts { margin-top: var(--space-2xl); max-width: 80ch; }
.sovereign .closing { margin-top: var(--space-xl); color: var(--color-ink-2); }

/* ---------- Field notes: same records, quieter ---------- */
.finding {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-md) var(--gap-columns);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-rule);
  scroll-margin-top: calc(var(--bar-h) + var(--space-md));
}
.notes .lead + .finding { margin-top: var(--space-2xl); }
.finding .finding-id { grid-column: 1 / 4; }
.finding h3 { grid-column: 4 / 13; font-size: var(--text-title); }
.finding .facts { grid-column: 4 / 13; max-width: 72ch; }

/* ---------- From research to products ---------- */
.flow { padding-top: var(--section-gap); }
.flow-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-2xl); }
.flow-col { border-top: 1px solid var(--color-ink); padding-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
.flow-col:nth-child(4) { border-top-color: var(--color-accent); }
.flow-col h3 { font-size: var(--text-2xl); }
.flow-col > p:not(.label) { color: var(--color-ink-2); }

/* ---------- House rules ---------- */
.rules { padding-top: var(--section-gap-l); padding-bottom: var(--section-gap); }
.rules h2 { margin-bottom: var(--space-2xl); }
.rule-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.rule-list li { border-top: 1px solid var(--color-ink); padding-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
.rule-list h3 { font-size: var(--text-display-s); line-height: 1; }
.rule-list p { color: var(--color-ink-2); max-width: 32ch; }

/* ---------- Footer (9) ---------- */
.foot { border-top: 1px solid var(--color-rule); padding-top: var(--space-3xl); padding-bottom: var(--space-xl); }
.mast {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 10.5vw, 10rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--color-ink);
  margin-bottom: var(--space-xl);
  white-space: nowrap;
  font-synthesis: none;
}
.mast span { color: var(--color-accent); }
.family { border-top: 1px solid var(--color-rule); padding-top: var(--space-lg); }
.family-title { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-muted); margin-bottom: var(--space-lg); }
.family ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-lg) var(--gap-columns); }
.family li > a, .family li > span { position: relative; display: block; padding-top: var(--space-md); text-decoration: none; color: inherit; }
.family li > a::before, .family li > span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 2px;
  background: var(--color-accent);
  opacity: 0.35;
  transition: width var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}
.family-name { display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--text-md); line-height: 1.3; letter-spacing: var(--tracking-display); color: var(--color-ink); font-synthesis: none; }
.family-line { display: block; margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); }
.family li > a:hover::before, .family li > a:focus-visible::before { opacity: 1; width: 28px; }
.family li > a:hover .family-name, .family li > a:focus-visible .family-name { color: var(--color-accent); text-decoration: underline; text-underline-offset: 4px; }
.family .is-current > span::before { opacity: 1; width: 28px; }
.family-here {
  position: absolute;
  top: -0.45em;
  left: 40px;
  font-size: 0.6875rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
}
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-2xl); font-size: var(--text-sm); color: var(--color-muted); }
.foot-row ul { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.foot-row a { color: var(--color-ink-2); text-decoration: none; }
.foot-row a:hover { color: var(--color-ink); text-decoration: underline; }
.foot-row a:active { color: var(--color-accent); }

/* ---------- Breakpoints ---------- */
@media (max-width: 75rem) {
  .family ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 60rem) {
  .links li:not(:last-child) { display: none; } /* scar 9 */

  /* The 12-col heads collapse to one column; only the row gap stays. */
  .grid-12 { grid-template-columns: minmax(0, 1fr); }
  .hero-head { row-gap: var(--space-xl); }
  .hero h1, .hero-side { grid-column: 1 / -1; }

  .row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs) var(--space-md); }
  .row h3 { grid-column: 1; }
  .row > .status { grid-column: 2; grid-row: 1; align-self: center; }
  .row .addr, .row > p { grid-column: 1 / -1; }

  .row--run { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-md); }
  .row--run .run-id, .row--run h3, .row--run .facts { grid-column: 1 / -1; grid-row: auto; }
  .row--run .run-status { top: calc(var(--space-xl) + 0.4em); }

  .pia-text { grid-column: 1 / -1; }
  .pia-phone { display: none; }
  .offer { padding: var(--space-2xl) var(--space-lg); }
  .offer-text, .offer-tools { grid-column: 1 / -1; }

  .steps, .areas, .rule-list { grid-template-columns: minmax(0, 1fr); }
  .flow-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .finding .finding-id, .finding h3, .finding .facts { grid-column: 1 / -1; }
}

@media (max-width: 40rem) {
  .links { display: none; } /* scar 9 */
  .banner { font-size: var(--text-xs); }

  .offer { padding: var(--space-xl) var(--space-md); }
  .offer-tools pre { padding: var(--space-lg); font-size: var(--text-xs); }

  .flow-cols { grid-template-columns: minmax(0, 1fr); }

  .facts > div { grid-template-columns: minmax(0, 1fr); }
  .facts dd { margin-bottom: var(--space-sm); }
  .row--run .facts > .run-status dd { margin-bottom: 0; }

  .family ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
}