/* SOLAN — 12-column bone-ground layout: sans headings, serif statements,
   a full-bleed dark panel, hairline index rows, clay cards, pill CTAs. */

:root {
  --bg: #FAF9F5;
  --text: #141413;
  --muted: #4A4842;
  --faint: #66635C;

  --clay: #E3DACC;              /* card ground */
  --clay-hover: #DCD1C0;
  --accent: #8A4B2E;            /* AA-safe accent for text */
  --accent-line: #CC785C;       /* accent as stroke / small marks */
  --rule: rgba(20, 20, 19, 0.14);
  --rule-strong: rgba(20, 20, 19, 0.24);

  --panel: #141413;             /* the dark card */
  --panel-text: #FAF9F5;
  --panel-muted: #B7B3A8;
  --panel-inset: rgba(250, 249, 245, 0.055);
  --panel-rule: rgba(250, 249, 245, 0.14);

  --pill-bg: #141413;
  --pill-text: #FAF9F5;
  --pill-hover: #2C2C29;

  --bar-bg: rgba(250, 249, 245, 0.88);

  --shell: 1280px;
  --gutter: 32px;
  --bar-h: 72px;
  --screen: calc(100svh - var(--bar-h));   /* one section, one screen */
  --ease: 180ms ease;
}

[data-theme="dark"] {
  --bg: #141413;
  --text: #FAF9F5;
  --muted: #B2AEA4;
  --faint: #98948B;

  --clay: #22221F;
  --clay-hover: #2A2A26;
  --accent: #E39C7E;
  --accent-line: #CC785C;
  --rule: rgba(250, 249, 245, 0.15);
  --rule-strong: rgba(250, 249, 245, 0.28);

  --panel: #1D1D1A;
  --panel-text: #FAF9F5;
  --panel-muted: #B2AEA4;
  --panel-inset: rgba(250, 249, 245, 0.05);
  --panel-rule: rgba(250, 249, 245, 0.14);

  --pill-bg: #FAF9F5;
  --pill-text: #141413;
  --pill-hover: #E6E4DC;

  --bar-bg: rgba(20, 20, 19, 0.88);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--bar-h);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-size: clamp(1.0625rem, 0.98rem + 0.34vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--ease), color var(--ease);
}

/* Sans carries headings, labels and every piece of UI chrome. */
.wordmark, .bar-nav, .pill, .btn, .section-h, .index-lead,
.card-title, .card-meta, .panel-note, .foot-col, .toggle {
  font-family: "DM Sans", "Segoe UI", Helvetica, Arial, sans-serif;
}

::selection { background: rgba(204, 120, 92, 0.24); }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent-line);
  outline-offset: 3px;
  border-radius: 3px;
}

code, pre {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---------- shell + 12-column grid ---------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 40px);
  padding-right: clamp(20px, 4vw, 40px);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: clamp(32px, 4vw, 56px);
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bar-bg);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  backdrop-filter: saturate(150%) blur(12px);
  transition: background-color var(--ease);
}

.bar {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  height: var(--bar-h);
}

.wordmark {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}

.bar-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 32px);
  margin-left: auto;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  letter-spacing: -0.005em;
}

.bar-nav a { color: var(--text); transition: color var(--ease); }
.bar-nav a:hover { color: var(--accent); }

.bar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Solid pill, the way the reference sets its primary action. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--pill-bg);
  color: var(--pill-text);
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--ease), color var(--ease);
}

.pill:hover { background: var(--pill-hover); color: var(--pill-text); }

/* Repository link: inverts with the theme — ink on bone, bone on ink.
   The mark inherits currentColor, so it flips with the label. */
.gh-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--pill-bg);
  color: var(--pill-text);
  white-space: nowrap;
  transition: background-color var(--ease), color var(--ease);
}

.gh-pill:hover { background: var(--pill-hover); }

.gh-pill svg { flex: 0 0 auto; }

.gh-label {
  font-family: "DM Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: clamp(0.8125rem, 0.78rem + 0.18vw, 0.9375rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}

.toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--ease), color var(--ease), background-color var(--ease);
}

.toggle:hover { border-color: var(--accent-line); color: var(--accent); }

.icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; }
[data-theme="dark"] .icon-moon { display: block; }

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

/* Each section fills the viewport so no neighbour creeps into it.
   min-height, not height: content taller than the screen still grows. */
.hero,
.section,
.panel-section {
  display: flex;
  align-items: center;
  padding-block: clamp(32px, 5vh, 72px);
}

/* The bar sits above the hero in flow, so the hero only needs what is left. */
.hero {
  min-height: calc(100vh - var(--bar-h));
  min-height: var(--screen);
}

/* Later sections scroll under the sticky bar, so they reserve its height
   at the top — asymmetric padding keeps the centred content clear of it. */
.section,
.panel-section {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--bar-h) + clamp(24px, 4vh, 56px));
  padding-bottom: clamp(24px, 4vh, 56px);
}

.hero > .shell,
.section > .shell,
.panel-section > .shell { width: 100%; }

/* Statement on the left six columns, mark and downloads on the right five. */
.hero-statement { grid-column: 1 / 7; }

.hero-mark {
  grid-column: 8 / -1;
  align-self: start;
  max-width: 400px;
}

/* The lockup holds the gap to the download buttons, so the mark and its
   expansion stay tight to each other and read as one unit. The top offset
   drops the whole object toward the buttons without moving them. */
.logo {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-top: clamp(20px, 4.5vh, 40px);
  margin-bottom: clamp(28px, 5vh, 44px);
}

/* Same construction as the header wordmark, set large. */
.mark {
  display: block;
  margin-bottom: 4px;
  font-family: "DM Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
}

/* Expansion of the acronym, locked to the underside of the mark. */
.mark-sub {
  display: block;
  font-family: "DM Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.06em;
  color: var(--muted);
  transition: color var(--ease);
}

.hero h1 {
  margin: 0 0 28px;
  font-size: clamp(2rem, 1.15rem + 3.4vw, 3rem);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

.lede {
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  line-height: 1.66;
  text-wrap: pretty;
  transition: color var(--ease);
}

/* Stacked under the mark so the pair reads as one download block. */
.cta-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: clamp(48px, 4.4vh, 56px);
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
  font-weight: 500;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}

.btn-solid {
  background: var(--pill-bg);
  color: var(--pill-text);
}
.btn-solid:hover { background: var(--pill-hover); }

.btn-outline {
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--text);
}
.btn-outline:hover { border-color: var(--text); background: rgba(204, 120, 92, 0.09); }

/* ---------- dark panel ---------- */



.panel {
  border-radius: 24px;
  background: var(--panel);
  color: var(--panel-text);
  padding: clamp(40px, 6vh, 88px) clamp(24px, 5vw, 72px);
  text-align: center;
  transition: background-color var(--ease), color var(--ease);
}

[data-theme="dark"] .panel { box-shadow: inset 0 0 0 1px var(--panel-rule); }

.panel-title {
  margin: 0 0 clamp(28px, 3.6vh, 48px);
  font-size: clamp(2.5rem, 1.4rem + 4.6vw, 4.25rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.018em;
}

.code {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 30px) clamp(18px, 3vw, 30px);
  border-radius: 12px;
  background: var(--panel-inset);
  color: var(--panel-text);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  text-align: left;
  font-size: clamp(0.8125rem, 0.72rem + 0.42vw, 0.9375rem);
  line-height: 1.95;
}

.code code { white-space: pre; }

.panel-note {
  max-width: 46ch;
  margin: clamp(24px, 3.2vh, 40px) auto 0;
  color: var(--panel-muted);
  font-size: clamp(0.9375rem, 0.89rem + 0.24vw, 1.0625rem);
  line-height: 1.6;
}

/* ---------- sections ---------- */

.section-h {
  grid-column: 1 / 4;
  margin: 0;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.section-h-wide {
  margin: 0 0 clamp(28px, 3.5vh, 44px);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
  font-weight: 600;
}

/* ---------- hairline index rows ---------- */

/* Two compact columns of hairline-topped entries: lead over description. */
.index {
  grid-column: 5 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

.index li {
  padding: clamp(14px, 1.7vh, 22px) 0;
  border-top: 1px solid var(--rule);
  transition: border-color var(--ease);
}

/* Top entry of each column carries no rule. */
.index li:nth-child(1),
.index li:nth-child(2) { border-top: 0; padding-top: 0; }

.index-lead {
  display: block;
  margin-bottom: 3px;
  font-size: clamp(1rem, 0.95rem + 0.24vw, 1.125rem);
  font-weight: 600;
  line-height: 1.38;
  letter-spacing: -0.006em;
  color: var(--text);
}

.index-desc {
  display: block;
  max-width: 44ch;
  color: var(--muted);
  font-size: clamp(0.9375rem, 0.9rem + 0.22vw, 1.0625rem);
  line-height: 1.55;
  text-wrap: pretty;
  transition: color var(--ease);
}

.index-desc code {
  font-size: 0.86em;
  color: var(--text);
  white-space: nowrap;
}

/* ---------- cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}

.card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: clamp(24px, 2.6vw, 32px);
  border-radius: 12px;
  background: var(--clay);
  color: var(--text);
  transition: background-color var(--ease), color var(--ease);
}

.card:hover { background: var(--clay-hover); }

.card-title {
  margin: 0 0 12px;
  font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.4375rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.card-body {
  margin: 0 0 28px;
  color: var(--muted);
  font-size: clamp(0.9375rem, 0.9rem + 0.24vw, 1.0625rem);
  line-height: 1.58;
  transition: color var(--ease);
}

/* Labelled metadata rows, hairline-separated, label left / value right. */
.card-meta {
  margin: auto 0 26px;
  padding: 0;
  font-size: clamp(0.8125rem, 0.78rem + 0.16vw, 0.9375rem);
}

.card-meta > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--rule);
}

.card-meta dt {
  /* --faint lands at 4.3:1 on the clay ground, so labels take --muted. */
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: color var(--ease);
}

.card-meta dd {
  margin: 0;
  text-align: right;
}

.pill-card {
  align-self: flex-start;
  height: 42px;
  font-size: clamp(0.875rem, 0.84rem + 0.2vw, 1rem);
}

.arrow { transition: transform var(--ease); }
.card:hover .arrow { transform: translateX(3px); }

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

.site-footer {
  padding: clamp(48px, 7vh, 72px) 0 clamp(56px, 9vh, 96px);
  border-top: 1px solid var(--rule);
  transition: border-color var(--ease);
}

.foot-brand { grid-column: 1 / 6; }

.foot-brand .wordmark { display: block; margin-bottom: 16px; }

.foot-brand p {
  margin: 0;
  max-width: 42ch;
  color: var(--faint);
  font-size: clamp(0.9375rem, 0.9rem + 0.24vw, 1.0625rem);
  line-height: 1.6;
  transition: color var(--ease);
}

.foot-col:nth-of-type(1) { grid-column: 8 / 10; }
.foot-col:nth-of-type(2) { grid-column: 10 / -1; }

.foot-col h2 {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
  transition: color var(--ease);
}

.foot-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(0.9375rem, 0.9rem + 0.24vw, 1.0625rem);
  line-height: 2.1;
}

.foot-col a { color: var(--text); transition: color var(--ease); }
.foot-col a:hover { color: var(--accent); }

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

@media (max-width: 1080px) {
  .hero-statement { grid-column: 1 / 8; }
  .hero-mark { grid-column: 9 / -1; }
  .section-h { grid-column: 1 / 5; }
  .index { grid-column: 6 / -1; }
}

@media (max-width: 900px) {
  /* Below this the sections are naturally taller than a screen, so they
     drop the full-height rule and the bar-height offset that went with it. */
  .hero, .section, .panel-section { min-height: 0; }
  .section, .panel-section { padding-block: clamp(56px, 9vh, 88px); }

  /* Drop to two tracks: twelve columns of gutter alone would overflow a phone. */
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }

  .bar-nav { display: none; }
  .bar-actions { margin-left: auto; }
  .gh-pill, .toggle { height: 40px; }
  .toggle { width: 40px; }

  .hero { padding-top: clamp(56px, 10vh, 96px); }
  .hero-statement { grid-column: 1 / -1; max-width: 46rem; }
  .hero-mark { grid-column: 1 / -1; max-width: 46rem; }

  .section-h { grid-column: 1 / -1; }
  .index { grid-column: 1 / -1; }

  .cards { grid-template-columns: minmax(0, 1fr); }
  .card { min-height: 0; }

  .foot-brand { grid-column: 1 / -1; }
  .foot-col:nth-of-type(1) { grid-column: 1 / 2; }
  .foot-col:nth-of-type(2) { grid-column: 2 / -1; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }

  .grid { row-gap: 32px; }

  .hero h1 { font-size: clamp(1.75rem, 1.2rem + 3.2vw, 2.25rem); line-height: 1.22; }

  .index { grid-template-columns: minmax(0, 1fr); }
  .index li:nth-child(2) {
    border-top: 1px solid var(--rule);
    padding-top: clamp(14px, 1.7vh, 22px);
  }
  .index-desc { max-width: none; }

  .panel { border-radius: 16px; text-align: left; }
  .panel-note { margin-left: 0; }
  .code { font-size: 13px; }
}

@media (max-width: 400px) {
  .shell { padding-left: 18px; padding-right: 18px; }
  .wordmark { font-size: 16px; }
  .pill { padding: 0 14px; font-size: 14px; }
}