/* Hallmark · shape: Index-First · genre: modern-minimal · theme: Blueprint (by request) · job: visit · draw: d2r3d-00
 * hero: left statement closed by a measured span · nav: keyed top bar · footer: colophon line · imagery: none · signature: dimension string measuring the project span · blueprint: cyanotype
 * axes: mid/geometric-sans/neutral · posture: drenched · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, a record can only report; the argument lives in the measured span and the register voice, not in claims */
@import url("./tokens.css");
@import url("./base.css");

/* ==========================================================================
   Page styles — Blueprint sheet. Lines, dimensions and registers;
   the white line is the only signal. Labels are the body face, sentence
   case; mono is reserved for measurements, numbers and code.
   ========================================================================== */

/* ---------- sheet frame ---------- */

.wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.mono, code { font-family: var(--font-outlier); font-size: 0.92em; }

/* ---------- top bar ---------- */

.topbar {
  border-bottom: var(--rule-heavy) solid var(--color-ink);
  background: var(--color-paper-2);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-nav);
}

.topbar-inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 60px;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  text-decoration: none;
  white-space: nowrap;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
  letter-spacing: 0.04em;
}

.brand-sub {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.nav { display: flex; align-items: stretch; flex-wrap: wrap; }

.nav a {
  display: flex;
  align-items: center;
  padding: 0 var(--space-md);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  border-left: var(--rule-hair) solid var(--color-rule-2);
  color: var(--color-ink-2);
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}

.nav a:hover { background: var(--color-paper-3); color: var(--color-ink); }
.nav a:active { background: var(--color-paper-3); }
.nav a[aria-current="page"] { background: var(--color-ink); color: var(--color-paper); }

/* ---------- sheet grain ---------- */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--color-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid) 1px, transparent 1px),
    linear-gradient(var(--color-grid-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid-2) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
  background-position: var(--sheet-inset) var(--sheet-inset);
  opacity: 0.5;
}

.topbar, main, .footer { position: relative; z-index: var(--z-base); }

/* ---------- hero ---------- */

.hero {
  padding-block: var(--space-2xl) var(--space-xl);
  border-bottom: var(--rule-heavy) solid var(--color-ink);
}

.page-hero {
  padding-block: var(--space-xl) var(--space-lg);
  border-bottom: var(--rule-heavy) solid var(--color-ink);
}

.page-hero h1 { font-size: var(--text-display); }

.hero-sheetno {
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  color: var(--color-muted);
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.hero h1 {
  font-size: clamp(2.75rem, 6.4vw, 5.5rem);
  text-transform: uppercase;
  max-width: 14ch;
}

.hero-lede {
  margin-top: var(--space-lg);
  font-size: var(--text-lead);
  color: var(--color-ink-2);
  max-width: 56ch;
}

.hero-cta {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 46px;
  padding: 0 var(--space-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  border: var(--rule-hair) solid var(--color-ink);
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}

.btn-primary { background: var(--color-ink); color: var(--color-paper); }
.btn-primary:hover { background: var(--color-ink-2); color: var(--color-paper); }
.btn-primary:active { background: var(--color-ink-2); }

.btn-ghost { background: transparent; color: var(--color-ink); }
.btn-ghost:hover { background: var(--color-paper-3); }
.btn-ghost:active { background: var(--color-paper-3); }

/* dimension string — the hero's measured span */
.dim {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
}

.dim-line {
  position: relative;
  height: var(--rule-hair);
  background: var(--color-rule);
}

.dim-line::before,
.dim-line::after {
  content: "";
  position: absolute;
  top: -6px;
  width: 1px;
  height: var(--tick);
  background: var(--color-ink);
  transform: rotate(45deg);
}

.dim-line::before { left: -1px; }
.dim-line::after { right: -1px; }

.dim-value {
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  white-space: nowrap;
}

.dim-end {
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  color: var(--color-muted);
  white-space: nowrap;
}

.dim-end:last-child { text-align: right; }

/* ---------- section chrome ---------- */

.section {
  padding-block: var(--space-xl);
  border-bottom: var(--rule-hair) solid var(--color-rule-2);
}

.section:last-of-type { border-bottom: 0; }

.sec-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-lg);
  align-items: end;
  margin-bottom: var(--space-xl);
}

.sec-no {
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  color: var(--color-muted);
  border: var(--rule-hair) solid var(--color-rule-2);
  padding: var(--space-xs) var(--space-sm);
  white-space: nowrap;
}

.sec-title {
  font-size: var(--text-section);
  text-transform: uppercase;
}

.sec-note {
  grid-column: 1 / -1;
  color: var(--color-muted);
  font-size: var(--text-sm);
  max-width: 70ch;
}

/* ---------- drawing index (the four views) ---------- */

.index-list { border-top: var(--rule-heavy) solid var(--color-ink); }

.index-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-lg) var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--color-rule-2);
  text-decoration: none;
  color: var(--color-ink);
  transition: background-color var(--dur-micro) var(--ease-out);
}

.index-row:hover { background: var(--color-paper-2); }
.index-row:active { background: var(--color-paper-3); }

.index-no {
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.index-name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-title);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.index-desc {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-top: var(--space-2xs);
}

.index-open {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-2);
  white-space: nowrap;
}

.index-row:hover .index-open { color: var(--color-ink); }

/* ---------- register table (spec data) ---------- */

.register {
  width: 100%;
  border-collapse: collapse;
  border-top: var(--rule-heavy) solid var(--color-ink);
  font-size: var(--text-md);
}

.register th {
  font-size: var(--text-xs);
  font-weight: 500;
  text-align: left;
  padding: var(--space-sm) var(--space-sm) var(--space-sm) 0;
  border-bottom: var(--rule-heavy) solid var(--color-ink);
  color: var(--color-muted);
}

.register td {
  padding: var(--space-sm) var(--space-sm) var(--space-sm) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule-2);
  vertical-align: top;
}

.register tr:last-child td { border-bottom: 0; }

.register td.mono { font-family: var(--font-outlier); font-size: var(--text-sm); }

/* status marks — line weight carries state, not color */
.st {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
}

.st::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: var(--space-xs);
  background: var(--color-ink);
}

.st-progress::before { background: transparent; border: var(--rule-hair) solid var(--color-ink); }
.st-invest::before   { border: var(--rule-hair) solid var(--color-ink); border-top-width: 3px; background: transparent; }
.st-shelved::before  { background: var(--color-rule-2); }
.st-fixed::before    { clip-path: polygon(0 0, 100% 0, 100% 60%, 60% 100%, 0 100%); }

/* ---------- roadmap columns ---------- */

.cols-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: var(--rule-heavy) solid var(--color-ink);
}

.col {
  padding: var(--space-lg) var(--space-lg) var(--space-lg) 0;
  border-right: var(--rule-hair) solid var(--color-rule-2);
}

.col + .col { padding-left: var(--space-lg); }
.col:last-child { border-right: 0; padding-right: 0; }

.col h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-md);
  margin-bottom: var(--space-sm);
}

.col ul { margin: 0; padding: 0; list-style: none; }
.col li {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  padding-block: var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--color-rule-2);
}
.col li:last-child { border-bottom: 0; }
.col li b { color: var(--color-ink); font-weight: 500; }

/* ---------- callout ---------- */

.note {
  border: var(--rule-hair) solid var(--color-rule-2);
  border-left: var(--rule-heavy) solid var(--color-ink);
  background: var(--color-paper-2);
  padding: var(--space-md) var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

.note b { color: var(--color-ink); font-weight: 500; }

/* ---------- footer ---------- */

.footer {
  padding-block: var(--space-lg);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.footer-line {
  display: flex;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

/* ---------- responsive ---------- */

@media (max-width: 60rem) {
  .cols-3 { grid-template-columns: 1fr; }
  .col { border-right: 0; border-bottom: var(--rule-hair) solid var(--color-rule-2); padding: var(--space-md) 0; }
  .col + .col { padding-left: 0; }
  .col:last-child { border-bottom: 0; }
  .index-row { grid-template-columns: 48px 1fr; }
  .index-open { grid-column: 2; }
  .sec-head { grid-template-columns: 1fr; gap: var(--space-sm); }
}

@media (max-width: 40rem) {
  .topbar-inner { flex-direction: column; min-height: 0; }
  .nav a { padding: var(--space-xs) var(--space-sm); border-left: 0; }
  .register thead { display: none; }
  .register, .register tbody, .register tr, .register td { display: block; width: 100%; }
  .register tr { border-bottom: var(--rule-hair) solid var(--color-rule-2); padding-block: var(--space-xs); }
  .register td { border-bottom: 0; padding: var(--space-2xs) 0; }
  .register td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-xs);
    color: var(--color-muted);
    margin-bottom: var(--space-3xs);
  }
  .dim { grid-template-columns: 1fr; gap: var(--space-sm); }
  .dim-line { display: none; }
}