/* ============================================================
   Semiosphere — landing page
   Design tokens transcribed from docs/brand/brand-book-v2.html.
   Revision 2.0: ten-step substrate ramp, harmonised pigment chroma,
   Prata / Literata / Chivo. Ratios in comments are measured against
   the ground each colour is used on; see brand book §04.
   ============================================================ */

:root {
  /* Substrate — one ramp, ten steps (brand book §04) */
  --paper-00: #FDFCF9;
  --paper-50: #F7F5F0;
  --paper-100: #F2EDE3;  /* parchment, kept from v1 */
  --paper-200: #E7E1D4;
  --paper-300: #D7D0C3;
  --paper-400: #ABA497;
  --ink-400: #7F7A6E;    /* 3.66:1 on paper — large text and rules only */
  --ink-600: #554F43;    /* 6.96:1 — the muted-text colour */
  --ink-800: #312D26;
  --ink-900: #1C1A17;    /* iron gall, kept from v1 */

  /* Pigments — tint / base / text / on-ink (brand book §04) */
  --sanguine-tint: #FFD9CF;  --sanguine: #A04D37;  --sanguine-text: #752F1C;  --sanguine-ink: #E68D74;
  --verdigris-tint: #C3EEE2; --verdigris: #0A7A67; --verdigris-text: #015446; --verdigris-ink: #5FBBA5;
  --lapis-tint: #D7E3FF;     --lapis: #40558D;     --lapis-text: #334576;     --lapis-ink: #8DA6E4;
  --ochre-tint: #F2E1C0;     --ochre: #A78743;     --ochre-text: #5C4300;     --ochre-ink: #C4A35F;

  /* Roles */
  --color-surface: var(--paper-00);
  --color-surface-raised: var(--paper-50);
  --color-surface-sunken: var(--paper-100);
  --color-ink: var(--ink-900);
  --color-ink-secondary: var(--ink-600);
  --color-ink-muted: var(--ink-600);   /* was #8a8172 at 3.4:1 — failed AA */
  --color-border: rgba(28, 26, 23, 0.16);
  --color-border-soft: rgba(28, 26, 23, 0.12);

  --color-accent: var(--sanguine);   /* links, emphasis */
  --color-accent-text: var(--sanguine-text);
  --color-focus: var(--lapis);

  /* Dark inset panel (Iron Gall inverse) */
  --dark-surface: var(--ink-900);
  --dark-text: var(--paper-100);
  --dark-text-secondary: var(--paper-400);
  --dark-border: rgba(242, 237, 227, 0.16);
  --dark-accent-muted: var(--ochre-ink);

  /* Type — Prata displays, Literata reads, Chivo operates */
  --font-serif: 'Prata', Georgia, serif;
  --font-read: 'Literata', Georgia, serif;
  --font-sans: 'Chivo', system-ui, -apple-system, sans-serif;
  --font-mono: 'Chivo', system-ui, sans-serif;   /* the LABEL register */
  /* Literal terminal text keeps a real monospace — the one sanctioned
     exception to the three families (brand book v2 §03). */
  --font-code: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — true 1.25 ladder anchored at 16 (brand book §03) */
  --t-label: 13px; --t-body: 16px; --t-lede: 20px;
  --t-sub: 25px; --t-section: 32px; --t-title: 50px; --t-display: 77px;

  /* Spacing (8px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 104px;

  /* Radius */
  --radius-sm: 2px;
  --radius: 3px;
  --radius-lg: 5px;

  /* Elevation — ink shadow, kept low & warm */
  --elev-1: 0 2px 8px -2px rgba(28, 26, 23, 0.18);

  /* Reading measure */
  --measure: 66ch;

  /* Motion */
  --ease: cubic-bezier(0.65, 0.05, 0.36, 1);
  --duration-base: 240ms;

  /* Layout */
  --container-max: 1280px;
  --section-pad-y: var(--space-7);
  --section-pad-x: clamp(24px, 8vw, 140px);
}

/* ============ Reset ============ */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;  /* v2 has no mono; figures still align */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Reading text is Literata; Chivo operates the interface. Anything a
   visitor reads at length opts in, rather than inheriting the UI face. */
p, .lede, blockquote, li {
  font-family: var(--font-read);
}

code, pre, kbd, samp {
  font-family: var(--font-code);
  font-size: 0.92em;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
p,
blockquote {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

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

/* ============ Layout primitives ============ */

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

.section {
  padding: var(--section-pad-y) var(--section-pad-x);
  border-top: 1px solid var(--color-border);
}

.section > .container {
  max-width: 920px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.section-heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  max-width: 20ch;
  margin-bottom: var(--space-4);
}

.body-text {
  font-size: 18px;
  line-height: 1.75;
  max-width: var(--measure);
  color: #3a352d;
  margin-bottom: var(--space-4);
}

.body-text:last-child {
  margin-bottom: 0;
}

/* ============ Skip link ============ */

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  background: var(--color-ink);
  color: var(--dark-text);
  padding: 12px 18px;
  border-radius: var(--radius);
  z-index: 100;
  font-family: var(--font-mono);
  font-size: 13px;
}

.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
}

/* ============ Top bar ============ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(253, 252, 249, 0.82);   /* paper-00, translucent */
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.topbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) clamp(24px, 8vw, 140px);
}

.brand {
  display: flex;
  align-items: center;
  /* 14, not 26. The mark's ink runs to the edge of its own box — the
     meridian spans 93% of the viewBox and the polar pins reach the rest —
     so the gap here is the whole optical gap, and a proportional one at
     78px would set the word adrift from the mark it belongs to. */
  gap: 14px;
  text-decoration: none;
  color: var(--color-ink);
}

.brand__mark {
  /* 78, and therefore the SMALL cut rather than the micro one: at 26 the
     three hoops were under a pixel apart and had to come off, which left
     the header carrying an eye in a circle and none of the instrument.
     78 is well inside the small cut's range (48 and up), so the hoops,
     the pins and the crossings all come back. */
  width: 78px;
  height: 78px;
  flex: none;
}

.brand__word {
  font-family: var(--font-serif);
  font-weight: 400;          /* Prata ships one weight — never ask for bold */
  font-size: 17px;
  letter-spacing: -0.012em;
}

.nav {
  display: flex;
  gap: var(--space-4);
}

.nav a {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink-secondary);
  transition: color var(--duration-base) var(--ease);
}

.nav a:hover {
  color: var(--color-accent);
}

@media (max-width: 599px) {
  .nav {
    gap: var(--space-3);
  }
}

/* ============ Hero ============ */

.hero {
  position: relative;
  padding: var(--space-7) clamp(24px, 8vw, 140px) var(--space-6);
  overflow: hidden;
}

.hero__rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  pointer-events: none;
}

.hero__content {
  position: relative;
  max-width: 780px;
}

.hero__lockup {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.hero__mark {
  /* 200, and the PLATE cut — the full engraving, with the hatching, the
     ticks and the tone the other two cuts have stripped out. The plate
     wants 96 and up to hold together, and it wants rather more than that
     to be worth having: at 176 the hoops and the globe's crescent were
     still closing on each other, and only past about 190 do the eye, the
     hatching and the three bands separate into the drawing they are. The
     header carries the small cut at 78; this is the one placement on the
     page that shows the instrument rather than referring to it. */
  width: 200px;
  height: 200px;
  flex: none;
}

.hero__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-ink-secondary);
  line-height: 1.7;
}

.hero h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1.02;         /* Prata needs more room than Spectral did */
  letter-spacing: -0.012em;
  margin-bottom: var(--space-4);
}

.hero__lede {
  font-family: var(--font-read);   /* Literata: the lede carries an <em> */
  font-weight: 300;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.55;
  max-width: 44ch;
  color: var(--ink-800);
  margin-bottom: var(--space-4);
}

.hero__lede em {
  font-style: italic;
}

.hero__body {
  max-width: 58ch;
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-ink-secondary);
  margin-bottom: var(--space-5);
}

/* ============ Buttons ============ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}

.btn--primary {
  background: var(--color-ink);
  color: var(--color-surface-raised);
}

.btn--primary:hover {
  background: #000;
  transform: translateY(-1px);
  box-shadow: var(--elev-1);
}

.btn--secondary {
  border-color: rgba(28, 26, 23, 0.28);
  color: var(--color-ink);
}

.btn--secondary:hover {
  background: var(--color-surface-raised);
}

/* ============ Two-column sections (Approach) ============ */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
  margin-top: var(--space-5);
}

@media (min-width: 1024px) {
  .split {
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-6);
  }
}

.panel-dark {
  background: var(--dark-surface);
  color: var(--dark-text);
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

.panel-dark__rings {
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 220px;
  height: 220px;
  opacity: 0.16;
}

.panel-dark__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dark-accent-muted);
  margin-bottom: var(--space-4);
  position: relative;
}

.panel-dark__quote {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.5;
  font-weight: 400;
  margin-bottom: var(--space-3);
  position: relative;
}

.panel-dark__gloss {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--dark-text-secondary);
  position: relative;
}

/* ============ Disciplines card grid ============ */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  margin-top: var(--space-5);
}

.card {
  background: var(--color-surface-raised);
  padding: var(--space-4);
}

.card__icon {
  width: 26px;
  height: 26px;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.card h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.008em;
  margin-bottom: 8px;
}

.card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-ink-secondary);
}

.card--quote {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Span the row's remaining width rather than sitting as a sixth equal
     card — a dramatic full-width close to the grid, not one more box. */
  grid-column: span 3;
  padding: var(--space-6) var(--space-5);
}

.card--quote__motif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.12;
  pointer-events: none;
}

.card--quote__label {
  position: relative;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.card--quote blockquote {
  position: relative;
  font-family: var(--font-read);   /* Prata has no italic; Literata does */
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.4;
  color: var(--color-ink);
  max-width: 34ch;
  margin-bottom: var(--space-3);
}

.card--quote cite {
  position: relative;
  display: block;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--color-ink-secondary);
}

@media (max-width: 767px) {
  .card--quote {
    grid-column: 1 / -1;
  }
}

/* ============ Contact ============ */

.contact .body-text {
  margin-bottom: var(--space-5);
}

/* ============ Footer ============ */

.site-footer {
  padding: var(--space-4) clamp(24px, 8vw, 140px);
  border-top: 1px solid var(--color-border);
  background: var(--paper-50);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.site-footer__mark {
  /* Matched to the header at 78 — the same cut at the same size top and
     bottom, so the page opens and closes on one mark rather than on two
     different reductions of it. Muted, because the footer is a colophon. */
  width: 78px;
  height: 78px;
  color: var(--color-ink-muted);
  flex: none;
}

.site-footer__word {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 14px;
  color: var(--color-ink-secondary);
}

.site-footer__tagline {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--color-ink-muted);
}

/* ============ Scroll reveal (progressive enhancement) ============ */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ============ Responsive ============ */

@media (max-width: 767px) {
  :root {
    --section-pad-y: var(--space-6);
  }

  .topbar__row {
    flex-wrap: wrap;
  }

  /* Where the bar wraps, the nav drops under the brand and a 78px mark
     would take the sticky header past 140 — a sixth of a phone screen held
     open permanently. It steps down to 56, which is still the small cut's
     own territory and still the instrument rather than the eye alone. */
  .brand__mark,
  .site-footer__mark {
    width: 56px;
    height: 56px;
  }

  /* The lockup stacks. Side by side there is no room for both: the mark is
     flex: none, so the kicker is squeezed to whatever is left and its
     longest line runs off the right edge — which it did at 132 as well,
     before the mark grew. Stacked, both keep their own measure. */
  .hero__lockup {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}