/* Diothas Systems — design tokens transcribed from the hi-fi prototype.
   Aptos is not freely web-licensable; Inter is the substitute at 500/600/700.
   To restore Aptos: drop woff2 files in /uploads/fonts, add @font-face rules,
   and prepend 'Aptos' to --font-sans. Nothing else needs to change. */

:root {
  --bg: #18242f;
  --band: #20303c;
  --card-a: #25353f;
  --card-b: #1b2b36;
  --panel: #1e2e39;

  --brass: #c9a25a;
  --brass-bright: #e6c98a;
  --brass-dim: #8a6f3e;
  --cyan: #5bb8e0;
  --green: #7ee0b0;
  --on-brass: #0a1117;

  --t1: #f6f0e2;
  --t2: #f4eee0;
  --t3: #f2ecde;
  --t4: #ece6d8;
  --s1: #bcc6cd;
  --s2: #a9b4bb;
  --s3: #aeb8bf;
  --s4: #a4afb6;
  --prose: #c3cbd1;
  --muted: #65757f;
  --faint: #4f5e67;
  --dot: #3a4750;

  --hair-brass: rgba(201, 162, 90, 0.22);
  --hair-brass-soft: rgba(201, 162, 90, 0.12);
  --hair: rgba(255, 255, 255, 0.07);

  --font-sans: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --wide: 1180px;
  --doc: 820px;
  --pad: 32px;

  /* Ambient glow blobs ship off, matching the prototype default.
     Set to 1 to enable. */
  --glow-opacity: 0;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.75; transform: scale(1.06); }
}
@keyframes slowPan {
  0%   { background-position: right center; }
  100% { background-position: left center; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--t4);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(201, 162, 90, 0.3); color: #fff; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.shell { position: relative; min-height: 100vh; overflow: hidden; }
.wide { max-width: var(--wide); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); width: 100%; }

.glow {
  position: absolute; border-radius: 50%; filter: blur(20px);
  pointer-events: none; opacity: var(--glow-opacity);
}
.glow--cyan {
  top: -120px; right: -80px; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(91, 184, 224, 0.16), transparent 65%);
  animation: glowPulse 9s ease-in-out infinite;
}
.glow--brass {
  top: 760px; left: -160px; width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(201, 162, 90, 0.12), transparent 65%);
  animation: glowPulse 11s ease-in-out infinite;
}

/* ---------------- nav ---------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(24, 36, 47, 0.72);
  border-bottom: 1px solid rgba(201, 162, 90, 0.16);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 14px; padding-bottom: 14px; }
.nav__brand { display: flex; align-items: center; gap: 13px; }
.nav__logo { width: 40px; height: 40px; border-radius: 9px; box-shadow: 0 0 0 1px rgba(201,162,90,0.4), 0 6px 18px rgba(0,0,0,0.5); }
.nav__names { display: flex; flex-direction: column; line-height: 1.05; }
.nav__name { font-weight: 600; font-size: 18px; letter-spacing: 0.2px; color: var(--t3); }
.nav__tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 2.4px; color: var(--brass-dim); margin-top: 2px; }
.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__link { font-size: 14px; color: #b9c2c8; transition: color .2s; }
.nav__link:hover { color: var(--brass); }
.btn-brass {
  font-size: 13.5px; font-weight: 500; padding: 9px 18px; border-radius: 7px;
  background: var(--brass); color: var(--on-brass); transition: all .2s;
}
.btn-brass:hover { background: var(--brass-bright); transform: translateY(-1px); }

/* ---------------- hero ---------------- */
.hero { position: relative; display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid var(--hair-brass-soft); }
.hero__bg {
  position: absolute; inset: 0;
  background-size: auto 100%; background-repeat: no-repeat; background-position: right center;
  will-change: background-position;
  animation: slowPan 180s ease-in-out infinite alternate;
}
.hero__scrim-a { position: absolute; inset: 0; background: linear-gradient(95deg, #18242f 0%, #18242f 24%, rgba(24,36,47,0.74) 52%, rgba(24,36,47,0.30) 100%); }
.hero__scrim-b { position: absolute; inset: 0; background: linear-gradient(0deg, #18242f 4%, transparent 30%, transparent 72%, #18242f 98%); }
.hero__inner { position: relative; padding-top: 0; padding-bottom: 0; }
.hero__col { max-width: 680px; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 3px; color: var(--brass); margin-bottom: 26px; }
.hero__rule { width: 26px; height: 1px; background: var(--brass); display: inline-block; }
.hero__title { font-weight: 500; font-size: 58px; line-height: 1.08; letter-spacing: -0.5px; margin: 0 0 14px; color: var(--t1); }
.hero__subtitle { font-style: italic; font-weight: 400; font-size: 19px; line-height: 1.4; color: var(--brass); margin: 0 0 34px; }
.hero__p { font-size: 17px; line-height: 1.7; color: #dbe1e5; margin: 0 0 22px; text-shadow: 0 1px 8px rgba(24,36,47,0.9); }
.hero__closing { margin: 8px 0 34px; display: flex; flex-direction: column; gap: 8px; }
.hero__closing p { font-weight: 600; font-size: 21px; line-height: 1.3; color: var(--t1); margin: 0; text-shadow: 0 1px 8px rgba(24,36,47,0.9); }
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.btn-primary {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 500; padding: 14px 26px; border-radius: 8px;
  background: var(--brass); color: var(--on-brass); transition: all .2s;
}
.btn-primary:hover { background: var(--brass-bright); transform: translateY(-2px); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 500; padding: 14px 26px; border-radius: 8px;
  background: rgba(255,255,255,0.04); color: var(--t4);
  border: 1px solid rgba(201,162,90,0.32); transition: all .2s;
}
.btn-ghost:hover { border-color: var(--brass); background: rgba(201,162,90,0.08); }

/* ---------------- sections ---------------- */
.section { padding-top: 96px; padding-bottom: 96px; }
.band { background: var(--band); border-top: 1px solid var(--hair-brass-soft); border-bottom: 1px solid var(--hair-brass-soft); }
.kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 3px; color: var(--brass-dim); margin-bottom: 14px; }
.h2 { font-weight: 500; font-size: 38px; line-height: 1.1; margin: 0; color: var(--t3); }
.sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; flex-wrap: wrap; }
.viewall { font-size: 14px; color: var(--brass); white-space: nowrap; border-bottom: 1px solid rgba(201,162,90,0.4); padding-bottom: 3px; transition: all .2s; }
.viewall:hover { color: var(--brass-bright); }

/* perspectives */
.persp-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; }
.featured {
  position: relative; display: flex; flex-direction: column;
  border-radius: 14px; overflow: hidden;
  background: linear-gradient(165deg, var(--card-a), var(--card-b));
  border: 1px solid var(--hair-brass); transition: all .25s;
}
.featured:hover { border-color: rgba(201,162,90,0.5); transform: translateY(-3px); }
.featured__panel { position: relative; height: 260px; overflow: hidden; background: var(--panel); display: flex; align-items: center; justify-content: center; }
.featured__panel img { width: 200px; height: 200px; opacity: 0.92; filter: drop-shadow(0 0 30px rgba(91,184,224,0.25)); object-fit: contain; }
.featured__vignette { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, transparent 40%, rgba(24,36,47,0.7) 100%); }
.featured__badge { position: absolute; top: 18px; left: 18px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--on-brass); background: var(--brass); padding: 5px 11px; border-radius: 5px; }
.featured__body { padding: 28px 30px 32px; }
.cat { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 2px; color: var(--cyan); margin-bottom: 14px; }
.featured__title { font-weight: 600; font-size: 27px; line-height: 1.18; margin: 0 0 14px; color: var(--t2); }
.featured__excerpt { font-size: 15px; line-height: 1.6; color: var(--s2); margin: 0 0 22px; }
.meta { display: flex; align-items: center; gap: 16px; font-size: 12.5px; color: var(--muted); font-family: var(--font-mono); }
.meta__dot { color: var(--dot); }

.postlist { display: flex; flex-direction: column; gap: 2px; }
.postrow { display: flex; gap: 20px; padding: 22px 6px; border-bottom: 1px solid var(--hair); transition: all .2s; }
.postrow:hover { background: rgba(201,162,90,0.05); }
.postrow__num { font-family: var(--font-mono); font-size: 13px; color: var(--brass-dim); padding-top: 3px; }
.postrow__cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.6px; color: var(--cyan); margin-bottom: 8px; }
.postrow__title { font-weight: 500; font-size: 19px; line-height: 1.25; margin: 0 0 8px; color: var(--t4); }
.postrow__read { font-size: 12px; color: var(--muted); font-family: var(--font-mono); }

/* Perspectives as a horizontal snap-scroller: 3 across on desktop, 1 on mobile. */
.persp-scroller {
  display: flex; gap: 24px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 6px 0 16px;
  scrollbar-width: thin; scrollbar-color: var(--brass-dim) transparent;
}
.persp-scroller::-webkit-scrollbar { height: 8px; }
.persp-scroller::-webkit-scrollbar-thumb { background: var(--brass-dim); border-radius: 4px; }
.persp-scroller::-webkit-scrollbar-track { background: transparent; }
.pcard {
  flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start;
  display: flex; flex-direction: column;
  border-radius: 14px; overflow: hidden;
  background: linear-gradient(165deg, var(--card-a), var(--card-b));
  border: 1px solid var(--hair-brass); transition: all .25s;
}
.pcard:hover { border-color: rgba(201,162,90,0.5); transform: translateY(-3px); }
.pcard__panel { position: relative; height: 172px; overflow: hidden; background: var(--panel); display: flex; align-items: center; justify-content: center; }
.pcard__panel img { width: 118px; height: 118px; opacity: 0.92; filter: drop-shadow(0 0 30px rgba(91,184,224,0.25)); object-fit: contain; }
.pcard__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.pcard__title { font-weight: 600; font-size: 20px; line-height: 1.2; margin: 0 0 12px; color: var(--t2); }
.pcard__excerpt { font-size: 14px; line-height: 1.6; color: var(--s2); margin: 0 0 20px; }
.pcard .meta { margin-top: auto; }

/* Forthcoming placeholder card — dashed, muted, non-interactive. */
.pcard--soon { border-style: dashed; cursor: default; background: linear-gradient(165deg, rgba(255,255,255,0.025), rgba(255,255,255,0.008)); }
.pcard--soon:hover { transform: none; border-color: var(--hair-brass); }
.pcard__panel--soon { background: repeating-linear-gradient(135deg, var(--panel), var(--panel) 12px, rgba(255,255,255,0.02) 12px, rgba(255,255,255,0.02) 24px); }
.pcard__diamond { color: var(--brass-dim); font-size: 24px; opacity: 0.55; }
.pcard--soon .pcard__title { color: var(--s2); }
.pcard--soon .cat, .pcard--soon .meta { color: var(--brass-dim); }

/* Slider arrows — only rendered when there are more than three perspectives. */
.persp-scrollwrap { position: relative; }
.persp-arrow {
  position: absolute; top: 92px; transform: translateY(-50%); z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1; color: var(--brass);
  background: rgba(24,36,47,0.85); border: 1px solid var(--hair-brass);
  backdrop-filter: blur(6px); cursor: pointer; transition: background .2s, color .2s, opacity .2s;
}
.persp-arrow:hover { background: var(--brass); color: var(--on-brass); }
.persp-arrow:disabled { opacity: 0.25; cursor: default; }
.persp-arrow--prev { left: 6px; }
.persp-arrow--next { right: 6px; }

.themes { margin-top: 56px; padding-top: 34px; border-top: 1px solid rgba(201,162,90,0.14); }
.themes__row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { font-family: var(--font-mono); font-size: 12.5px; color: var(--s1); padding: 9px 15px; border: 1px solid var(--hair-brass); border-radius: 6px; transition: all .2s; }
.chip:hover { border-color: var(--brass); color: var(--brass-bright); }

/* workshop */
.work__intro { max-width: 560px; }
.work__intro p { font-size: 16px; line-height: 1.6; color: var(--s2); margin: 16px 0 0; }
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.card {
  display: flex; gap: 22px; padding: 30px; border-radius: 14px;
  background: linear-gradient(165deg, var(--card-a), var(--card-b));
  border: 1px solid rgba(201,162,90,0.2); transition: all .25s;
}
.card:hover { border-color: rgba(201,162,90,0.45); transform: translateY(-3px); }
.tile { flex-shrink: 0; width: 58px; height: 58px; border-radius: 13px; box-shadow: 0 0 0 1px rgba(201,162,90,0.3), 0 8px 22px rgba(0,0,0,0.4); object-fit: cover; }
.tile--mono { display: flex; align-items: center; justify-content: center; }
.tile--cyan { background: radial-gradient(circle at 35% 30%, #5bb8e0, #1d4d63); }
.tile--gold { background: radial-gradient(circle at 35% 30%, #e6c98a, #97743a); }
.tile__letter { font-weight: 700; font-size: 26px; color: var(--on-brass); }
.card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; flex-wrap: wrap; }
.card__name { font-weight: 600; font-size: 21px; margin: 0; color: var(--t2); }
.card__desc { font-size: 14px; line-height: 1.55; color: var(--s4); margin: 0 0 16px; }
.card__tags { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1px; color: var(--brass-dim); }

/* status pills — mapped explicitly, never by regex.
   SW-020 mandates "In Development", which the prototype's /beta|soon|wip/i
   test would have coloured green. */
.pill { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1.5px; padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
.pill--live { color: var(--green); border: 1px solid rgba(126,224,176,0.4); }
.pill--beta,
.pill--dev  { color: var(--brass-bright); border: 1px solid rgba(230,201,138,0.4); }
.pill--lg { font-size: 10px; padding: 4px 10px; }

/* about */
.about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 60px; align-items: center; }
.about__emblem-wrap { position: relative; display: flex; justify-content: center; }
.about__emblem { width: 280px; height: 280px; border-radius: 24px; box-shadow: 0 0 0 1px rgba(201,162,90,0.35), 0 24px 60px rgba(0,0,0,0.6); animation: glowPulse 12s ease-in-out infinite; }
.about__h2 { font-weight: 500; font-size: 34px; line-height: 1.15; margin: 0 0 22px; color: var(--t3); }
.about__p { font-size: 16px; line-height: 1.7; color: var(--s3); margin: 0 0 18px; }
.about__cta { margin-top: 32px; }

/* contact */
.contact { background: var(--band); border-top: 1px solid var(--hair-brass-soft); }
.contact__inner { max-width: 760px; margin: 0 auto; padding: 80px var(--pad); text-align: center; }
.contact__h2 { font-weight: 500; font-size: 34px; line-height: 1.15; margin: 0 0 28px; color: var(--t2); }
.contact__btn { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; padding: 15px 30px; border-radius: 8px; background: var(--brass); color: var(--on-brass); transition: all .2s; }
.contact__btn:hover { background: var(--brass-bright); transform: translateY(-2px); }

/* ---------------- document pages (article + app) ---------------- */
.dochead { border-bottom: 1px solid rgba(201,162,90,0.14); background: var(--band); }
.dochead__inner { max-width: var(--doc); margin: 0 auto; padding: 72px var(--pad) 56px; }
.dochead__nav { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
.backlink { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; color: var(--brass-dim); margin-bottom: 36px; transition: color .2s; }
.backlink:hover { color: var(--brass); }

.arthead__row { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 30px; }
.arthead__icon { width: 76px; height: 76px; border-radius: 16px; box-shadow: 0 0 0 1px rgba(201,162,90,0.35), 0 10px 28px rgba(0,0,0,0.5); flex-shrink: 0; object-fit: cover; }
.arthead__cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2.5px; color: var(--cyan); margin-bottom: 10px; }
.arthead__meta { display: flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.doc__title { font-weight: 600; font-size: 46px; line-height: 1.12; letter-spacing: -0.4px; margin: 0 0 18px; color: var(--t1); }
.doc__subtitle { font-style: italic; font-weight: 400; font-size: 21px; line-height: 1.45; color: var(--brass); margin: 0; }

.apphead__row { display: flex; align-items: flex-start; gap: 26px; flex-wrap: wrap; }
.apphead__icon { width: 96px; height: 96px; border-radius: 20px; box-shadow: 0 0 0 1px rgba(201,162,90,0.35), 0 12px 32px rgba(0,0,0,0.5); flex-shrink: 0; object-fit: cover; }
.apphead__tile { width: 96px; height: 96px; border-radius: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px rgba(201,162,90,0.35), 0 12px 32px rgba(0,0,0,0.5); }
.apphead__tile .tile__letter { font-size: 42px; }
.apphead__body { flex: 1; min-width: 280px; }
.apphead__namerow { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.apphead__name { font-weight: 600; font-size: 42px; line-height: 1.1; letter-spacing: -0.3px; margin: 0; color: var(--t1); }
.apphead__sub { font-style: italic; font-weight: 400; font-size: 20px; line-height: 1.45; color: var(--brass); margin: 0 0 16px; }
.apphead__tags { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px; color: var(--brass-dim); margin-bottom: 26px; }
.apphead__ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.doc { max-width: var(--doc); margin: 0 auto; padding: 56px var(--pad) 80px; }

/* prose — the design's block renderer, as CSS */
.prose p { font-size: 17.5px; line-height: 1.75; color: var(--prose); margin: 0 0 24px; }
.prose h2 { font-weight: 600; font-size: 28px; line-height: 1.2; color: var(--t3); margin: 44px 0 18px; }
.prose h3 { font-weight: 600; font-size: 21px; line-height: 1.3; color: var(--t3); margin: 34px 0 14px; }
.prose blockquote {
  margin: 38px 0; padding: 6px 0 6px 26px; border-left: 2px solid var(--brass);
  font-style: italic; font-size: 22px; line-height: 1.5; color: var(--brass-bright);
}
.prose blockquote p { font-size: inherit; line-height: inherit; color: inherit; margin: 0; }
.prose a { color: var(--brass); border-bottom: 1px solid rgba(201,162,90,0.4); }
.prose a:hover { color: var(--brass-bright); }
.prose strong { color: var(--t4); font-weight: 600; }
.prose ul, .prose ol { font-size: 17.5px; line-height: 1.75; color: var(--prose); margin: 0 0 24px; padding-left: 24px; }
.prose li { margin-bottom: 8px; }
.prose code { font-family: var(--font-mono); font-size: 0.88em; background: rgba(255,255,255,0.05); padding: 2px 6px; border-radius: 4px; color: var(--brass-bright); }
.prose pre { background: rgba(0,0,0,0.28); border: 1px solid var(--hair-brass-soft); border-radius: 10px; padding: 18px 20px; overflow-x: auto; margin: 0 0 24px; }
.prose pre code { background: none; padding: 0; color: var(--prose); }
.prose hr { border: 0; border-top: 1px solid var(--hair-brass-soft); margin: 40px 0; }

.prose figure { margin: 40px 0; }
.prose figure img { width: 100%; border-radius: 12px; border: 1px solid rgba(201,162,90,0.25); box-shadow: 0 12px 36px rgba(0,0,0,0.4); display: block; }
.prose figcaption { font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--muted); margin-top: 12px; letter-spacing: 0.5px; }
.prose .placeholder {
  width: 100%; min-height: 240px; border-radius: 12px;
  border: 1px dashed rgba(201,162,90,0.4); background: rgba(37,53,63,0.6);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.5px;
  color: var(--brass-dim); text-align: center; padding: 24px;
}

.endrule { display: flex; align-items: center; gap: 14px; margin-top: 56px; }
.endrule span:first-child, .endrule span:last-child { flex: 1; height: 1px; background: rgba(201,162,90,0.2); }
.endrule__mark { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; color: var(--brass-dim); }
.docnav { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 40px; flex-wrap: wrap; }
.docnav__btns { display: flex; gap: 14px; flex-wrap: wrap; }
.docnav .btn-ghost { padding: 13px 24px; }
.docnav__side { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 1px; color: var(--brass-dim); transition: color .2s; }
.docnav__side:hover { color: var(--brass); }
.docnav__side a { color: var(--brass); border-bottom: 1px solid rgba(201,162,90,0.4); }
.docnav__side a:hover { color: var(--brass-bright); }
.docnav__live { font-size: 14px; color: var(--brass); border-bottom: 1px solid rgba(201,162,90,0.4); padding-bottom: 3px; transition: color .2s; }
.docnav__live:hover { color: var(--brass-bright); }

/* ---------------- index pages ---------------- */
.indexhead { border-bottom: 1px solid rgba(201,162,90,0.14); background: var(--band); }
.indexhead__inner { max-width: var(--wide); margin: 0 auto; padding: 72px var(--pad) 56px; }
.indexhead h1 { font-weight: 500; font-size: 44px; line-height: 1.1; margin: 0 0 16px; color: var(--t1); }
.indexhead p { font-size: 16px; line-height: 1.6; color: var(--s2); margin: 0; max-width: 620px; }
.indexlist { display: flex; flex-direction: column; gap: 2px; padding-top: 24px; }
.indexrow { display: flex; gap: 24px; align-items: flex-start; padding: 28px 6px; border-bottom: 1px solid var(--hair); transition: all .2s; }
.indexrow:hover { background: rgba(201,162,90,0.05); }
.indexrow__icon { width: 56px; height: 56px; border-radius: 12px; flex-shrink: 0; object-fit: cover; box-shadow: 0 0 0 1px rgba(201,162,90,0.3); }
.indexrow__title { font-weight: 500; font-size: 22px; line-height: 1.25; margin: 0 0 8px; color: var(--t4); }
.indexrow__excerpt { font-size: 14.5px; line-height: 1.6; color: var(--s4); margin: 0 0 10px; max-width: 720px; }

/* ---------------- footer ---------------- */
.footer { border-top: 1px solid rgba(201,162,90,0.14); background: var(--bg); }
.footer__top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-top: 54px; padding-bottom: 40px; }
.footer__brandcol { max-width: 340px; }
.footer__brandrow { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer__logo { width: 36px; height: 36px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(201,162,90,0.35); }
.footer__name { font-weight: 600; font-size: 17px; color: var(--t3); }
.footer__blurb { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0; }
.footer__cols { display: flex; gap: 60px; flex-wrap: wrap; }
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__colhead { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 2px; color: var(--brass-dim); margin-bottom: 4px; }
.footer__link { font-size: 13.5px; color: var(--s3); transition: color .2s; }
.footer__link:hover { color: var(--brass); }
.footer__bar { max-width: var(--wide); margin: 0 auto; padding: 22px var(--pad); border-top: 1px solid rgba(255,255,255,0.05); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer__bar span { font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); }
.footer--slim .footer__bar { border-top: 0; padding-top: 22px; padding-bottom: 22px; }
.footer--slim a { font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); transition: color .2s; }
.footer--slim a:hover { color: var(--brass); }

/* ---------------- 404 ---------------- */
.notfound { max-width: 760px; margin: 0 auto; padding: 140px var(--pad); text-align: center; }
.notfound h1 { font-weight: 500; font-size: 44px; margin: 0 0 18px; color: var(--t1); }
.notfound p { font-size: 17px; line-height: 1.7; color: var(--s2); margin: 0 0 32px; }

/* ---------------- responsive ----------------
   The prototype never implemented these; the handoff says to apply the
   target system's breakpoints. 820px is where both two-column grids
   stop working. */
@media (max-width: 820px) {
  :root { --pad: 20px; }
  .nav__inner { flex-wrap: wrap; gap: 14px; }
  .nav__links { gap: 18px; flex-wrap: wrap; }
  .nav__tag { display: none; }

  .hero { min-height: 0; }
  .hero__title { font-size: clamp(34px, 8.5vw, 46px); }
  .hero__closing p { font-size: 18px; }

  .section { padding-top: 64px; padding-bottom: 64px; }
  .h2 { font-size: 30px; }

  .card-grid,
  .about-grid { grid-template-columns: 1fr; gap: 28px; }
  .pcard { flex-basis: 86%; }   /* mobile: ~1 card visible, swipe for the rest */
  .about-grid { gap: 40px; }
  .about__emblem { width: 200px; height: 200px; }

  .card { flex-direction: column; gap: 16px; }

  .doc__title { font-size: clamp(30px, 7.5vw, 38px); }
  .apphead__name { font-size: clamp(28px, 7vw, 36px); }
  .arthead__row { gap: 16px; }
  .arthead__icon { width: 56px; height: 56px; border-radius: 12px; }
  .dochead__inner { padding-top: 48px; padding-bottom: 40px; }
  .doc { padding-top: 40px; padding-bottom: 56px; }
  .prose p, .prose ul, .prose ol { font-size: 16.5px; }
  .prose h2 { font-size: 24px; }
  .prose blockquote { font-size: 19px; }

  .indexhead h1 { font-size: 32px; }
  .indexrow { gap: 16px; }
  .footer__top { gap: 32px; }
  .footer__cols { gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg, .about__emblem, .glow { animation: none !important; }
  html { scroll-behavior: auto; }
}