/* OSPAIC site.
   Porcelain paper, blue-black ink, one cobalt disc. Gloock for display, Hanken Grotesk for text.
   Display text is laid out with Pretext (assets/layout.js): the hero wraps line by line around
   the disc, the pull line fits the measure exactly, and the scope statement is balanced.
   Without JavaScript the same text renders with ordinary CSS wrapping. */

:root {
  color-scheme: light;
  --paper: #eceff2;
  --ink: #101826;
  --muted: #586273;
  --rule: #c8ced7;
  --disc: #1f3fd1;
  --display: "Gloock", Georgia, serif;
  --text: "Hanken Grotesk", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --measure: 36rem;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--disc); }
a:focus-visible { outline: 2px solid var(--disc); outline-offset: 3px; border-radius: 2px; }
cite { font-style: italic; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ---------- Top bar ---------- */

.top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem var(--gutter) 0;
}
.wordmark {
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.top nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.4rem; font-size: 0.95rem; }
.top nav a { text-decoration: none; }
.top nav a:hover { text-decoration: underline; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow-x: clip;
  min-height: min(56rem, 100svh);
  padding: clamp(2.5rem, 7vw, 5.5rem) var(--gutter) clamp(3rem, 8vw, 6rem);
}

/* Disc geometry is set from layout.js (--r, --cx, --cy in px, relative to .hero);
   the fallbacks below are only for the no-JS render. */
.disc {
  position: absolute;
  z-index: 0;
  width: calc(var(--r, 260px) * 2);
  height: calc(var(--r, 260px) * 2);
  left: calc(var(--cx, 80%) - var(--r, 260px));
  top: calc(var(--cy, 260px) - var(--r, 260px));
  border-radius: 50%;
  background: var(--disc);
  pointer-events: none;
}

.hero-text { position: relative; z-index: 1; }

#title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.75rem, 8vw, 7rem);
  line-height: 0.98;
  letter-spacing: 0;
  margin: 0;
  max-width: 11ch;
}

.editors-line {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  font-weight: 600;
  font-size: 1rem;
}

.lede {
  font-size: clamp(1.125rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  margin: clamp(1.75rem, 4vw, 3rem) 0 0;
  max-width: 30rem;
}

/* Lines produced by Pretext */
.pretext #title, .pretext .lede { max-width: none; }
.line { display: block; white-space: pre; }

/* ---------- Bands ---------- */

main { position: relative; z-index: 1; }

.band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure)) minmax(0, 0.35fr);
  gap: 1.5rem clamp(2rem, 5vw, 5rem);
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter);
  border-top: 1px solid var(--rule);
}
.band h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  line-height: 1.1;
}
.band > .prose, .band > .scope-body, .band > .editor-grid { grid-column: 2 / 4; }
.prose { max-width: var(--measure); }
.prose h3 {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.35rem;
}

/* ---------- Pull line ---------- */

.statement {
  padding: clamp(3rem, 8vw, 6rem) var(--gutter) clamp(3.5rem, 8vw, 6.5rem);
  background: var(--ink);
  color: var(--paper);
}
.fit-line {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.5rem, 8.5vw, 9rem);
  line-height: 1;
  white-space: nowrap;
}
.prose-after {
  margin: clamp(2rem, 4vw, 3rem) 0 0 auto;
  color: #cfd6e2;
}

/* ---------- Scope ---------- */

.scope-body { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.balanced {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.9rem, 4.2vw, 3.6rem);
  line-height: 1.12;
  color: var(--disc);
}

/* ---------- Editors ---------- */

.editors .editor-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: 1rem;
}
.editor-grid article { font-size: 0.95rem; line-height: 1.6; }
.editor-grid h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.2vw, 1.85rem);
  line-height: 1.15;
}
.role { color: var(--muted); margin: 0.2rem 0 1rem; }

/* ---------- Footer ---------- */

.foot {
  padding: 2rem var(--gutter) 2.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
  color: var(--muted);
}

/* ---------- Narrow screens ---------- */

@media (max-width: 900px) {
  .band { grid-template-columns: minmax(0, 1fr); }
  .band > .prose, .band > .scope-body, .band > .editor-grid { grid-column: 1; }
  .editors .editor-grid { grid-template-columns: minmax(0, 1fr); }
  .prose-after { margin-left: 0; }
}

@media (max-width: 560px) {
  .top { flex-direction: column; gap: 0.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}