/* =========================================================================
 * Elysium — Wireframe shell
 * Low-fidelity but brand-aware. Every block is a labeled "intent box" so
 * the structure is reviewable before any visual treatment is applied.
 * ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  background: var(--bg);
  background-attachment: fixed;
}

/* ── Headings / text ──────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; letter-spacing: var(--tracking-tight); margin: 0; }
h1 { font-size: clamp(var(--fs-40), 6vw, var(--fs-72)); line-height: var(--lh-tight); }
h2 { font-size: clamp(var(--fs-32), 4vw, var(--fs-56)); line-height: var(--lh-snug); }
h3 { font-size: var(--fs-24); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-18); line-height: var(--lh-snug); }
p  { margin: 0; color: var(--fg-2); }

.eyebrow {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--fs-12);
  color: var(--fg-muted);
}

a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--dur-2) var(--ease-soft); }
a:hover { border-color: var(--accent); }

/* ── Layout primitives ────────────────────────────────────────────── */
.container { width: var(--container); margin-inline: auto; }
.section   { padding: var(--s-9) 0; position: relative; }
.section--tight { padding: var(--s-7) 0; }
.grid-12   { display: grid; grid-template-columns: var(--grid-12); gap: var(--gutter); }
.grid-6    { display: grid; grid-template-columns: var(--grid-6);  gap: var(--gutter); }
.grid-3    { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.grid-2    { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }
.row { display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap; }
.spacer { flex: 1 1 auto; }

/* ── Wireframe primitives: labeled boxes ──────────────────────────── */
.wf {
  position: relative;
  border: 1px dashed var(--wf-line);
  background: var(--wf-fill);
  border-radius: var(--r-2);
  padding: var(--s-5);
  min-height: 80px;
}
.wf--solid { border-style: solid; border-color: var(--wf-line-strong); }
.wf--filled { background: var(--wf-fill-2); }
.wf--ink    { background: var(--ink); color: var(--paper-2); border-color: rgba(255,253,248,0.18); }

.wf::after {
  content: attr(data-label);
  position: absolute;
  top: -10px;
  left: 12px;
  padding: 2px 8px;
  background: var(--bg);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--wf-label);
  border: 1px solid var(--wf-line);
  border-radius: var(--r-pill);
}

.wf__row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.wf__title  { font-family: var(--serif); font-size: var(--fs-20); color: var(--fg); margin: 0 0 var(--s-2); }
.wf__note   { font-family: var(--mono); font-size: var(--fs-12); color: var(--fg-muted); }

/* Placeholder atoms */
.ph {
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, var(--wf-fill-2) 14px 15px);
  border: 1px solid var(--wf-line);
  border-radius: var(--r-2);
}
.ph--img    { aspect-ratio: 16 / 10; }
.ph--avatar { width: 44px; height: 44px; border-radius: 50%; }
.ph--icon   { width: 28px; height: 28px; border-radius: var(--r-1); }
.ph--line   { height: 10px; border-radius: var(--r-pill); }
.ph--line.w-90 { width: 90%; } .ph--line.w-70 { width: 70%; } .ph--line.w-50 { width: 50%; } .ph--line.w-30 { width: 30%; }
.ph--btn    { display: inline-block; padding: 10px 18px; border-radius: var(--r-pill); border: 1px solid var(--wf-line-strong); font-family: var(--mono); font-size: var(--fs-12); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.ph--btn.primary { background: var(--fg); color: var(--bg-solid); border-color: var(--fg); }
.ph--btn.accent  { background: var(--accent); color: var(--bg-solid); border-color: var(--accent); }

/* Tag / chip */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--wf-tag-bg); color: var(--wf-tag-fg);
  font-family: var(--mono); font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase;
}

/* ── Header / Nav ─────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--bg-solid) 72%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--s-4);
  height: 72px;
}
.brand { display: flex; align-items: center; gap: var(--s-3); font-family: var(--serif-display); font-size: var(--fs-20); white-space: nowrap; flex: 0 0 auto; }
.brand .brand-wordmark { white-space: nowrap; }
.brand .brand-wordmark em { white-space: nowrap; }
@media (max-width: 1180px) { .brand .brand-wordmark em { display: none; } }
.brand__mark {
  position: relative;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand-grad);
  box-shadow: 0 0 0 1px var(--border), inset 0 0 8px rgba(255,255,255,0.45);
  flex: 0 0 auto;
}
.brand__mark::after {
  /* classical medallion glyph — an Elysium "E" / column motif */
  content: ""; position: absolute; inset: 7px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,0.9), transparent 55%),
    var(--ink);
  mask: radial-gradient(circle at 50% 38%, #000 30%, transparent 32%) ,
        linear-gradient(#000, #000);
  -webkit-mask: radial-gradient(circle at 50% 38%, #000 30%, transparent 32%),
        linear-gradient(#000, #000);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}
.nav { display: flex; gap: var(--s-4); margin-left: var(--s-4); flex-wrap: nowrap; }
.nav a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--fg); }

.site-header__inner .ph--btn { flex: 0 0 auto; white-space: nowrap; }

/* ── Footer ───────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border);
  padding: var(--s-8) 0;
  margin-top: var(--s-9);
  font-size: var(--fs-14);
  color: var(--fg-muted);
}
.site-footer .grid-12 > * { grid-column: span 3; }
.site-footer h4 { font-family: var(--mono); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-bottom: var(--s-3); color: var(--fg); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li + li { margin-top: var(--s-2); }

/* ── Page banner ──────────────────────────────────────────────────── */
.page-banner {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  margin-top: var(--s-5);
  font-family: var(--mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.page-banner strong { color: var(--fg); }
.page-banner .tag { margin-left: auto; }

/* ── Span helpers ─────────────────────────────────────────────────── */
.col-3  { grid-column: span 3;  } .col-4  { grid-column: span 4;  }
.col-5  { grid-column: span 5;  } .col-6  { grid-column: span 6;  }
.col-7  { grid-column: span 7;  } .col-8  { grid-column: span 8;  }
.col-9  { grid-column: span 9;  } .col-12 { grid-column: span 12; }

@media (max-width: 900px) {
  .grid-12, .grid-6, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-12 { grid-column: span 1; }
  .site-footer .grid-12 > * { grid-column: span 1; }
  .nav { display: none; }
}