/* SIMARC landing — colour field, glass, and very few words.
   The base layer for every page: institute.css and program.css load on top of
   it, so the palette, the type, the header and the footer are defined once.
   It replaced site.css, which the interior pages used before they were ported
   and which no longer exists. */

:root {
  /* The field. Swap these five and the whole page changes colour. */
  --field-deep:  #4C1D95;
  --field-mid:   #7B2FE0;
  --field-lift:  #A742E8;
  --field-glow:  #E879F9;
  --field-ink:   #2E0B6E;

  --paper:   #FFFFFF;
  --surface: #F5F7FB;
  --ink:     #0C1330;
  --ink-2:   #3A4560;
  --muted:   #6B7691;
  --line:    #E4E8F2;
  --signal:  #7B2FE0;

  --font-text: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --shell: 1280px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 40px; }

/* ---------- header: a dark bar riding over the field ---------- */
header.top {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  background: #08090F;
}
header.top .bar {
  max-width: var(--shell); margin: 0 auto; padding: 0 40px;
  height: 72px; display: flex; align-items: center; gap: 40px;
}
header.top .word {
  display: flex; align-items: center; gap: 11px;
  color: #fff; text-decoration: none;
}
header.top .word img, header.top .word canvas.glyph { width: 28px; height: 28px; }
/* the canvas replaces the PNG in place, so it has to sit on the same baseline */
.word canvas.glyph { display: block; flex: 0 0 auto; }
header.top .word .lock { display: flex; flex-direction: column; line-height: 1; }
header.top .word .name { font-weight: 700; font-size: 19px; letter-spacing: 0.14em; }
header.top .word .full {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.17em;
  text-transform: uppercase; color: rgba(255,255,255,0.52);
  margin-top: 6px; white-space: nowrap;
  /* the full name is 288px of tracked mono — nearly four times the wordmark.
     If it is ever the widest thing in the bar it must give way rather than
     push "For agents" off the edge, so it is allowed to shrink and clip. */
  overflow: hidden; text-overflow: ellipsis;
}
header.top .word, header.top .word .lock { min-width: 0; }
header.top .word .name { white-space: nowrap; }
header.top nav { display: flex; gap: 30px; align-items: center; }
header.top nav a {
  color: rgba(255,255,255,0.82); text-decoration: none;
  font-size: 15px; font-weight: 400;
}
header.top nav a:hover { color: #fff; }
header.top .enter {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  color: #fff; text-decoration: none;
  border: 1px solid rgba(255,255,255,0.35);
  padding: 9px 16px; border-radius: 4px;
}
header.top .enter:hover { background: rgba(255,255,255,0.12); }

/* ---------- which page you are on ----------
   These live here, not in institute.css: they style header.top, which is on
   every page, but institute.css is loaded by only five of eleven. index.html
   and the five program pages had no rule for .here at all, so the current
   page rendered identically to every other link. */
header.top nav a.here { color: #fff; }
header.top nav a.here::after {
  content: ""; display: block; height: 1px; margin-top: 5px;
  background: rgba(255,255,255,0.55);
}
header.top .enter.here { background: rgba(255,255,255,0.14); border-color: #fff; }

/* ---------- the field ---------- */
.field {
  position: relative; overflow: hidden;
  min-height: 100vh; display: flex; align-items: center;
  padding: 132px 0 80px;
  background:
    radial-gradient(1000px 700px at 78% 8%, var(--field-glow) 0%, transparent 56%),
    radial-gradient(760px 620px at 99% 72%, #2BC8E8 0%, transparent 58%),
    radial-gradient(900px 700px at 62% 96%, var(--field-lift) 0%, transparent 60%),
    linear-gradient(118deg, var(--field-ink) 0%, var(--field-deep) 26%, var(--field-mid) 64%, var(--field-lift) 100%);
}
/* faint vertical survey lines, as on a plate */
#dimensions {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none; z-index: 1;
}
/* the figure is grabbable, but the column holding the type and the buttons
   is not — the canvas itself never takes pointer events, so nothing under it
   stops being clickable */
.field:has(#dimensions) { cursor: grab; }
.field.grabbing { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.field .shell, .field .figcap { cursor: auto; }
/* the mast sits in a pool of shade so the type stays legible over the lattice */
.field::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(96deg,
    rgba(28,8,74,0.80) 0%, rgba(28,8,74,0.55) 30%,
    rgba(28,8,74,0.10) 55%, transparent 74%);
}
.figcap {
  position: absolute; right: 40px; bottom: 26px; z-index: 3;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; color: rgba(255,255,255,0.42);
}
.field .shell { position: relative; z-index: 2; width: 100%; }

.mast { max-width: 620px; }
.mast h1 {
  margin: 0 0 26px;
  font-size: clamp(42px, 5.9vw, 76px);
  font-weight: 500; line-height: 1.0; letter-spacing: -0.015em;
  color: #fff; text-wrap: balance;
}
.mast p.sub {
  margin: 0; max-width: 430px;
  color: rgba(255,255,255,0.86); font-size: 17px; line-height: 1.5;
}
.mast .cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 14px; font-weight: 500;
  text-decoration: none; padding: 13px 22px; border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.55); color: #fff;
  transition: background .18s ease, border-color .18s ease;
}
.btn:hover { background: rgba(255,255,255,0.14); border-color: #fff; }
.btn.solid { background: #fff; color: var(--field-deep); border-color: #fff; }
.btn.solid:hover { background: rgba(255,255,255,0.88); }

/* ---------- light sections ---------- */
section.band { padding: 104px 0; }
.eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 18px;
}
h2.big {
  margin: 0 0 18px; color: var(--ink);
  font-size: clamp(30px, 3.6vw, 46px); font-weight: 500;
  line-height: 1.08; letter-spacing: -0.015em; max-width: 700px;
}
p.lede { margin: 0; max-width: 560px; color: var(--muted); font-size: 17px; }

/* named for what it holds, not for how many: auto-fit means the count is the
   grid's business rather than the markup's */
/* ---------- the doctrine band ---------- */
.doctrine {
  position: relative; overflow: hidden; padding: 112px 0;
  background:
    radial-gradient(800px 500px at 20% 20%, var(--field-lift) 0%, transparent 60%),
    linear-gradient(112deg, var(--field-ink) 0%, var(--field-deep) 46%, var(--field-mid) 100%);
}
.doctrine blockquote {
  margin: 0; max-width: 900px; color: #fff;
  font-size: clamp(24px, 3.1vw, 40px); font-weight: 500;
  line-height: 1.18; letter-spacing: -0.015em;
}
.doctrine .attrib {
  margin-top: 26px; font-family: var(--font-mono); font-size: 12.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.62);
}

/* ---------- footer ---------- */
footer.base { background: #08090F; color: rgba(255,255,255,0.62); padding: 58px 0 40px; }
footer.base .row { display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start; }
footer.base .word {
  display: flex; align-items: center; gap: 10px; color: #fff;
  font-weight: 700; letter-spacing: 0.14em; font-size: 17px; text-decoration: none;
}
footer.base .word img, footer.base .word canvas.glyph { width: 24px; height: 24px; }
footer.base nav { margin-left: auto; display: flex; gap: 28px; flex-wrap: wrap; }
footer.base nav a { color: rgba(255,255,255,0.62); text-decoration: none; font-size: 14.5px; }
footer.base nav a:hover { color: #fff; }
footer.base .fine {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; gap: 20px; justify-content: space-between; flex-wrap: wrap;
  font-size: 13px; color: rgba(255,255,255,0.44);
}
footer.base .fine .mono { font-family: var(--font-mono); }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  /* headline first on a phone; the glass follows and still runs off the edge */
  .field { min-height: 88vh; padding: 116px 0 190px; }
  header.top nav { display: none; }
}
@media (max-width: 640px) {
  .shell, header.top .bar { padding-left: 22px; padding-right: 22px; }
  /* two buttons of different widths stacked read as ragged; full width is
     also a much larger target for a thumb */
  .mast .cta { flex-direction: column; align-items: stretch; }
  .mast .cta .btn { justify-content: center; padding: 15px 22px; }
  /* below this the bar cannot hold the lockup and the button at once: the
     lockup alone is 327px of a 375px phone. The mark and the wordmark say
     enough; the full name is on every page below the fold anyway. */
  header.top .word .full { display: none; }
  section.band, .doctrine { padding: 72px 0; }
  .figcap { left: 22px; right: 22px; bottom: 20px; text-align: right;
            font-size: 9px; letter-spacing: 0.11em; line-height: 1.7; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- areas of work ----------
   Cards, not links: the per-programme pages are gone, so nothing here
   navigates. Every icon animates transform/opacity only, and all motion stops
   under prefers-reduced-motion. */
.areas {
  /* 260 puts four on a row at the shell's 1200px content width, so eight cards
     land as two even rows of four. Five 260s plus gaps would be 1364 and wrap. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 16px; margin-top: 52px;
}
.area {
  padding: 26px 26px 26px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.area:hover { border-color: var(--signal); box-shadow: 0 14px 34px rgba(123,47,224,0.12); }
.area .ico { color: var(--signal); height: 56px; margin-bottom: 20px; }
.area .ic { width: 56px; height: 56px; display: block; overflow: visible; }
.area .code {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--signal); margin-bottom: 12px;
}
.area h3 {
  margin: 0 0 10px; color: var(--ink);
  font-size: 21px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.15;
}
.area .desc { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }

/* P-01 — interference fringes: the bars breathe out of phase */
.fringe line { animation: fringe 2.6s ease-in-out infinite; transform-origin: center; }
.fringe line:nth-child(1), .fringe line:nth-child(8) { animation-delay: 0s }
.fringe line:nth-child(2), .fringe line:nth-child(7) { animation-delay: .16s }
.fringe line:nth-child(3), .fringe line:nth-child(6) { animation-delay: .32s }
.fringe line:nth-child(4), .fringe line:nth-child(5) { animation-delay: .48s }
@keyframes fringe { 0%,100% { opacity:.28; transform:scaleY(.72) } 50% { opacity:1; transform:scaleY(1) } }

/* P-02 — two orbital planes turning against each other */
.orbit .ring { transform-origin: 28px 28px; animation: spin 6s linear infinite; }
.orbit .ring.b { animation-duration: 9s; animation-direction: reverse; opacity: .55; }
.orbit .core { animation: pulse 2.4s ease-in-out infinite; transform-origin: 28px 28px; }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes pulse { 0%,100% { transform:scale(1); opacity:1 } 50% { transform:scale(1.35); opacity:.6 } }

/* P-03 — one cell pulling apart into two, and back */
.divide .cell { transform-origin: 28px 28px; }
.divide .l { animation: split-l 3.4s ease-in-out infinite }
.divide .r { animation: split-r 3.4s ease-in-out infinite }
.divide .nuc { animation: pulse 3.4s ease-in-out infinite; transform-origin: 28px 28px; }
@keyframes split-l { 0%,100% { transform:translateX(0) scale(1) } 50% { transform:translateX(-7px) scale(.82) } }
@keyframes split-r { 0%,100% { transform:translateX(0) scale(1) } 50% { transform:translateX(7px)  scale(.82) } }

/* P-04 — a network losing its connections one at a time */
.decay .edges line { animation: drop 4.2s ease-in-out infinite }
.decay .edges line:nth-child(1) { animation-delay: 0s }
.decay .edges line:nth-child(2) { animation-delay: .5s }
.decay .edges line:nth-child(3) { animation-delay: 1s }
.decay .edges line:nth-child(4) { animation-delay: 1.5s }
.decay .edges line:nth-child(5) { animation-delay: 2s }
.decay .edges line:nth-child(6) { animation-delay: 2.5s }
.decay .nodes circle { animation: dim 4.2s ease-in-out infinite }
@keyframes drop { 0%,55% { opacity:.9 } 75%,100% { opacity:.12 } }
@keyframes dim  { 0%,55% { opacity:1 } 80%,100% { opacity:.45 } }

/* P-05 — bonds drawing themselves in, atoms arriving after */
.assemble .bonds path {
  stroke-dasharray: 30; stroke-dashoffset: 30;
  animation: draw 4s ease-in-out infinite;
}
.assemble .bonds path:nth-child(2) { animation-delay: .35s }
.assemble .bonds path:nth-child(3) { animation-delay: .7s }
.assemble .bonds path:nth-child(4) { animation-delay: 1.05s }
.assemble .atoms circle { animation: arrive 4s ease-in-out infinite; transform-origin: center }
.assemble .atoms circle:nth-child(2) { animation-delay: .35s }
.assemble .atoms circle:nth-child(3) { animation-delay: .7s }
.assemble .atoms circle:nth-child(4) { animation-delay: 1.05s }
@keyframes draw   { 0% { stroke-dashoffset:30 } 40%,85% { stroke-dashoffset:0 } 100% { stroke-dashoffset:30 } }
@keyframes arrive { 0% { opacity:0; transform:scale(.4) } 35%,85% { opacity:1; transform:scale(1) } 100% { opacity:0; transform:scale(.4) } }

@media (prefers-reduced-motion: reduce) {
  .area .ic *, .area .ic { animation: none !important; }
  .assemble .bonds path { stroke-dashoffset: 0; }
  .fringe line { opacity: .75; }
}

/* M-01 — a descending sequence of certified bounds settling onto the true value */
.bound .steps line { animation: settle 3.6s ease-in-out infinite; transform-origin: left center; }
.bound .steps line:nth-child(1) { animation-delay: 0s }
.bound .steps line:nth-child(2) { animation-delay: .18s }
.bound .steps line:nth-child(3) { animation-delay: .36s }
.bound .steps line:nth-child(4) { animation-delay: .54s }
.bound .steps line:nth-child(5) { animation-delay: .72s }
@keyframes settle { 0%,100% { opacity:.32; transform:translateX(-3px) } 45% { opacity:1; transform:translateX(0) } }

/* M-02 — a search tree opening, its leaves resolving one after another */
.search .branch path { stroke-dasharray: 26; stroke-dashoffset: 26; animation: draw 4.4s ease-in-out infinite }
.search .branch path:nth-child(2), .search .branch path:nth-child(3) { animation-delay: .3s }
.search .branch path:nth-child(4), .search .branch path:nth-child(5) { animation-delay: .6s }
.search .branch path:nth-child(6), .search .branch path:nth-child(7) { animation-delay: .6s }
.search .tips circle { animation: arrive 4.4s ease-in-out infinite; transform-origin: center }
.search .tips circle:nth-child(1) { animation-delay: .95s }
.search .tips circle:nth-child(2) { animation-delay: 1.1s }
.search .tips circle:nth-child(3) { animation-delay: 1.25s }
.search .tips circle:nth-child(4) { animation-delay: 1.4s }

/* M-03 — a filled six-square block with one cell that refuses to fill */
.order6 .cells rect { animation: dim 3.8s ease-in-out infinite }
.order6 .cells rect:nth-child(even) { animation-delay: .4s }
.order6 .defect { animation: refuse 3.8s ease-in-out infinite; transform-origin: 36.5px 36.5px }
@keyframes refuse { 0%,100% { opacity:.45; transform:scale(.86) } 50% { opacity:1; transform:scale(1.1) } }

@media (prefers-reduced-motion: reduce) {
  .search .branch path { stroke-dashoffset: 0; }
}