/* ==========================================================================
   nowara design system
   Brand navy and cream only, navy-tinted neutrals, no extra accent. Light is
   navy on cream; dark is the brand reverse, cream on navy.
   ========================================================================== */

:root {
  --ground: #F5F2EC;
  --raised: #EDE9E1;
  --ink: #1B2A41;
  --body: #4A566A;
  --muted: #7A8394;
  --rule: #DCD6CB;
  --rule-strong: #C3BCAF;
  --focus: #1B2A41;
  --sans: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --max: 1080px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #1B2A41;
    --raised: #213250;
    --ink: #F5F2EC;
    --body: #BCC2CC;
    --muted: #8A94A6;
    --rule: #32435F;
    --rule-strong: #48597A;
    --focus: #F5F2EC;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #1B2A41;
  --raised: #213250;
  --ink: #F5F2EC;
  --body: #BCC2CC;
  --muted: #8A94A6;
  --rule: #32435F;
  --rule-strong: #48597A;
  --focus: #F5F2EC;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-inline: clamp(16px, 5vw, 48px);
}
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { color: var(--ink); font-weight: 600; margin: 0; text-wrap: balance; letter-spacing: -0.02em; }
p { margin: 0; }

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

/* Label: lowercase mono, the brand speaks in lowercase like its wordmark */
.label {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ---------- Header ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding-block: 1.5rem;
}
.logo { display: block; color: var(--ink); line-height: 0; }
.logo svg { height: 40px; width: auto; }
.site-nav { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.site-nav a { font-size: 0.94rem; text-decoration: none; color: var(--body); }
.site-nav a:hover { color: var(--ink); }

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: 2rem 4rem;
  padding-block: clamp(3rem, 8vw, 6.5rem) clamp(3rem, 7vw, 5.5rem);
}
.hero h1 {
  font-size: clamp(2.4rem, 5.6vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  max-width: 13ch;
}
.h1-turn { display: block; margin-top: 0.12em; }
.hero-lede {
  margin-top: 1.5rem;
  font-size: 1.15rem;
  max-width: 44ch;
}
.mark-frame { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1; justify-self: end; }
.mark-frame canvas { width: 100%; height: 100%; display: block; }

/* ---------- Sections ---------- */
.section { padding-block: clamp(3rem, 7vw, 5.5rem); border-top: 1px solid var(--rule); }
.section-head {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 0.75rem 2rem;
  margin-bottom: 2.5rem;
}
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.15; max-width: 22ch; }
/* A label used as a section's only heading keeps the label's look. */
h2.label { font-size: 0.75rem; font-weight: 400; line-height: inherit; letter-spacing: 0.04em; margin: 0; }
.section-head p.intro { margin-top: 0.9rem; max-width: 60ch; }
.section-body { margin-left: calc(180px + 2rem); }

/* A section with no headline: the label sits in the left column beside the
   content, level with the first row's title. */
.section-split { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 0.75rem 2rem; }
.section-split > .label { padding-top: 0.45rem; }

/* ---------- Products ---------- */
.products { list-style: none; margin: 0; padding: 0; display: grid; }
.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem 2rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--rule);
}
/* Rules only between products. The section's own rules frame the list, and
   the outer rows lose their outer padding so the list starts and ends where
   any other section's content would. */
.product:first-child { border-top: 0; padding-top: 0; }
.product:last-child { padding-bottom: 0; }
.product h3 { font-size: 1.4rem; letter-spacing: -0.02em; }
.product h3 a { text-decoration: none; }
.product h3 a:hover { text-decoration: underline; }
.product p { margin-top: 0.4rem; max-width: 58ch; }
.product .meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; padding-top: 0.35rem; }
.product--next h3, .product--next p { color: var(--muted); }

/* Sub-parts of a product, such as AICAP's four pillars: name and stage on the
   left, what it does on the right. */
.points { margin: 1.25rem 0 0; display: grid; gap: 0.6rem; max-width: 58ch; }
.points > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0.25rem 1rem; }
.points dt { color: var(--ink); font-weight: 500; }
.points dt .label { margin-left: 0.35rem; }
.points dd { margin: 0; font-size: 0.95rem; }

/* ---------- Registry preview ---------- */
.lineage {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--body);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  margin-bottom: 1.75rem;
}
.lineage span { color: var(--ink); }
.lineage i { font-style: normal; color: var(--rule-strong); }
.lineage b { font-weight: 400; color: var(--muted); }

.table-scroll { overflow-x: auto; border-top: 1px solid var(--ink); }
table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 0.7rem 1.25rem 0.7rem 0; white-space: nowrap; border-bottom: 1px solid var(--rule); }
th { font-weight: 400; color: var(--muted); font-size: 0.74rem; letter-spacing: 0.04em; }
td { color: var(--body); }
td:first-child { color: var(--ink); font-family: var(--sans); font-size: 0.92rem; font-weight: 500; }
td.num, th.num { text-align: right; }
td:last-child, th:last-child { padding-right: 0; }
.fmt { display: inline-block; padding: 0.05rem 0.4rem; border: 1px solid var(--rule-strong); border-radius: 3px; color: var(--ink); font-size: 0.74rem; }
.table-note { margin-top: 1rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.facts {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem 2.5rem;
}
.facts dt { color: var(--ink); font-weight: 600; margin-bottom: 0.35rem; }
.facts dd { margin: 0; font-size: 0.95rem; }

/* ---------- About ---------- */
.about p { max-width: 60ch; }
.about p + p { margin-top: 1rem; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: 2rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem 3rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
}
.site-footer .foot-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.site-footer .foot-links a { color: var(--body); text-decoration: none; }
.site-footer .foot-links a:hover { color: var(--ink); }
.foot-mark { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1.25rem; color: var(--ink); }
.foot-logo { line-height: 0; }
.foot-logo svg { height: 28px; width: auto; }

@media (max-width: 820px) {
  /* Stacked, the mark sits above the headline and the hero centres on it. */
  .hero { grid-template-columns: 1fr; text-align: center; }
  .hero h1, .hero-lede { margin-inline: auto; }
  .mark-frame { justify-self: center; max-width: 220px; order: -1; }
  .section-head { grid-template-columns: 1fr; }
  .section-body { margin-left: 0; }
  .section-split { grid-template-columns: 1fr; }
  .section-split > .label { padding-top: 0; }
  .points > div { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .product { grid-template-columns: 1fr; }
  .product .meta { align-items: flex-start; flex-direction: row; gap: 1rem; }
  .logo svg { height: 34px; }
}

/* ---------- Error pages ---------- */
.error-page { padding-block: clamp(3rem, 10vw, 7rem); display: grid; gap: 1rem; max-width: 40rem; }
.error-page h1 { font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.1; }

.foot-version { align-self: center; }