/* Indigo Gazette — Option 2 "polished gensec" for the Scaling Trust community site.
   Jost for brand/nav/headings, et-book serif body, single centered column. */

:root {
  --paper: rgb(249, 249, 249);
  --ink: rgb(59, 59, 59);
  --link: rgb(0, 153, 255);
  --rule: #ccc;        /* sober hairlines */
  --teal: #00b2a1;     /* ARIA teal, sparingly */
  --muted: #777;
  --sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Shrink tufte's 15px base so default reading size matches a one-step
   browser zoom-out. */
html { background-color: var(--paper); font-size: 13px; }

/* Single centered column instead of tufte's left-margin layout. */
body {
  background-color: var(--paper);
  color: var(--ink);
  width: auto;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4, h5, h6 { color: var(--ink); }

/* Headings: Jost, tight, semibold. */
h1, h2, h3, h4,
article h1, article h2, article h3 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-style: normal;
}
article > h1 { font-size: 2.5rem; line-height: 1.2; margin-top: 2.6rem; margin-bottom: 0.4rem; }
article h2 { font-size: 1.7rem; margin-top: 2.4rem; margin-bottom: 0.8rem; }
article h3 { font-size: 1.4rem; }

/* Kill tufte's 55%-width column — full width within the 760px page,
   capped for comfortable measure. */
article { padding: 0 0 4rem; position: relative; }
article > section > p,
article > section > footer,
article > section > table,
article > section > dl,
article > section > ol,
article > section > ul,
article > section > blockquote p,
article > p, article > ul, article > ol {
  width: 100%;
  max-width: 640px;
}
article > section > figure, figure.fullwidth { max-width: 100%; }
section { padding-top: 0.6rem; padding-bottom: 0.6rem; }

/* ---- Masthead: compact brand + community tag + nav, indigo rule. ---- */
header.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  padding: 2.2rem 0 0.9rem;
  border-bottom: 1px solid var(--rule);
}
.masthead .site-title {
  font-family: var(--sans);
  text-transform: lowercase;
  font-size: 1.65rem;
  letter-spacing: -0.01em;
  font-weight: 600;
  margin: 0;
  line-height: 1;
}
.masthead .site-title a { color: var(--ink); text-decoration: none; background: none; }
.masthead .site-title .site-tag {
  font-weight: 500;
  font-size: 1.05rem;
  color: #555;
  border-left: 2px solid var(--rule);
  padding-left: 0.7rem;
  margin-left: 0.5rem;
}
.masthead nav {
  font-family: var(--sans);
  text-transform: lowercase;
  font-size: 1.25rem;
  font-weight: 500;
  display: flex;
  gap: 1.5rem;
}
.masthead nav a {
  color: var(--ink);
  text-decoration: none;
  opacity: 0.7;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, opacity .15s ease, border-color .15s ease;
}
.masthead nav a:hover { opacity: 1; color: var(--link); border-bottom-color: var(--link); }
.masthead nav a.active {
  opacity: 1;
  border-bottom-color: var(--ink);
  font-weight: 600;
}

/* Sidenote numbers indigo. */


/* Links. */
a:link, a:visited { color: var(--link); }

/* Links inside the post body: blue + dotted underline; tint on hover only. */
article > section:not(.site-footer) a:link,
article > section:not(.site-footer) a:visited {
  color: #0099FF;
  padding: 0 1px;
  border-bottom: 1px dotted #0099FF;
  text-decoration: none;
}
article > section:not(.site-footer) a:hover {
  background-color: rgba(102, 204, 255, 0.15);
  border-bottom-style: solid;
}

/* Home intro: slightly larger lede. */
.home-intro p { font-size: 1.55rem; line-height: 1.6; }

/* Post listing — dotted rows, aligned old-style dates. */
ul.post-list { list-style: none; padding: 0; margin-top: 0.4rem; }
ul.post-list li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px dotted #ddd;
  line-height: 1.5;
}
article > section ul.post-list li a:link,
article > section ul.post-list li a:visited,
ul.post-list li a {
  flex: 1;
  color: var(--link);
  text-decoration: none;
  background: none;
  background-color: transparent;
  border-bottom: 1px dotted var(--link);
  padding: 0;
  align-self: baseline;
}
article > section ul.post-list li a:hover,
ul.post-list li a:hover { background-color: rgba(102, 204, 255, 0.15); border-bottom-style: solid; }
article > section ul.post-list a.post-cat:link,
article > section ul.post-list a.post-cat:visited,
ul.post-list .post-cat {
  flex: none;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  background: none;
  border-bottom: none;
  padding: 0;
  white-space: nowrap;
}
article > section ul.post-list a.post-cat:hover,
ul.post-list .post-cat:hover { color: var(--link); background: none; }
ul.post-list .post-date {
  color: var(--muted);
  font-size: 1.1rem;
  white-space: nowrap;
  font-feature-settings: "onum";
  font-family: et-book-roman-old-style, var(--sans);
}

/* Footer navigation — small, italic, unobtrusive. */
.site-footer {
  margin-top: 4rem;
  padding: 1.2rem 0 2rem;
  border-top: 1px solid #ddd;
  font-size: 1.1rem;
  font-style: italic;
}
.site-footer p { width: auto; max-width: none; color: #555; margin: 0; }
.site-footer a { color: inherit; }

/* ---- Search (PaperMod fastsearch.js contract). ---- */
#searchbox input {
  font-family: et-book, Palatino, Georgia, serif;
  font-size: 1.4rem;
  width: 100%;
  max-width: 640px;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--rule);
  background: #fff;
  color: var(--ink);
  outline: none;
}
#searchResults { list-style: none; padding: 0; max-width: 640px; margin-top: 1rem; }
#searchResults li {
  position: relative;
  padding: 0.5rem 0.4rem;
  line-height: 1.6;
  border-bottom: 1px dotted #ccc;
}
#searchResults li:active,
#searchResults li.focus { background: rgba(102, 204, 255, 0.12); }
article > section #searchResults a.entry-link {
  position: absolute;
  inset: 0;
  color: transparent;
  background: none;
  border-bottom: none;
}
#searchResults svg { display: none; }

/* ---- Events. ---- */
ul.event-list { list-style: none; padding: 0; max-width: 640px; }
ul.event-list li { margin-top: 1rem; line-height: 1.55; }
ul.event-list .event-when {
  color: var(--muted);
  font-size: 1.1rem;
  font-feature-settings: "onum";
  font-family: et-book-roman-old-style, var(--sans);
}
details.past-events { max-width: 640px; margin-top: 1rem; }
details.past-events summary {
  font-style: italic;
  color: #555;
  cursor: pointer;
  font-size: 1.2rem;
}
details.past-events ul.event-list { opacity: 0.75; }

/* ---- Projects. ---- */
.project-meta {
  font-family: var(--sans);
  font-size: 1.05rem;
  color: var(--muted);
  margin-top: 0.2rem;
  max-width: 640px;
}

/* ---- Post CTA button (funding-call posts). ---- */
.post-cta-button {
  font-family: var(--sans);
  background: var(--ink);
  color: var(--paper) !important;
  display: inline-block;
  font-weight: 600;
  margin-top: 1rem;
  padding: 0.7rem 1.1rem;
  text-decoration: none !important;
  border-bottom: none !important;
}
.post-cta-button:hover { opacity: 0.85; }

/* ---- Footnotes as quiet endnotes. ---- */
a.footnote-ref { color: var(--ink); text-decoration: none; background: none; border-bottom: none; }
section.footnotes {
  margin-top: 3rem;
  border-top: 1px solid #ddd;
  font-size: 1.2rem;
}
section.footnotes hr { display: none; }

/* ---- Misc. ---- */
.subtitle a { color: inherit; }
figure img { max-width: 100%; }
blockquote { border-left: 2px solid var(--rule); margin-left: 0; padding-left: 1.4rem; }
blockquote p { font-style: italic; color: #555; }
.page-nav { font-family: var(--sans); font-size: 1.1rem; margin-top: 2rem; }

@media (max-width: 760px) {
  body { padding: 0 18px; }
  header.masthead { padding-top: 1.6rem; }
  .masthead nav { gap: 1rem; flex-wrap: wrap; }
}

/* Post byline — small, quiet, sans. */
article > .byline {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--muted);
  margin: 0.2rem 0 1.6rem;
}
article > .byline a:link, article > .byline a:visited {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--muted);
}
article > .byline a:hover { color: var(--link); border-bottom-color: var(--link); }

/* Project tracks. */
.track-tag {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: 0.5rem;
}
.track-former {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--muted);
  margin-left: 0.15rem;
}
.track-desc {
  font-family: var(--sans);
  font-size: 1.05rem;
  color: var(--muted);
  margin-top: 0;
  max-width: 640px;
}
.contrib-open { color: var(--teal); }

/* ================= The agent commons (landing page) ================= */
/* ================= the agent commons ================= */
/* 48s master loop · three beats:
   1) 17–33%  drone × robot   — contract pipeline (bottom right)
   2) 48–58%  robot × rover   — hardware attestation (bottom left)
   3) 64–86%  all three       — multi-party computation (centre)
   + a pigeon (34–50%) that no protocol applies to. */
.agents { position:fixed; inset:0; pointer-events:none; z-index:4; overflow:hidden; }

/* ---- drone ---- */
.a-drone { position:absolute; width:64px; animation: drone-roam 48s ease-in-out infinite; will-change:transform; }
@keyframes drone-roam {
  0%      { transform: translate(-8vw, 10vh); }
  8%      { transform: translate(40vw, 7vh); }
  13%     { transform: translate(76vw, 28vh); }
  17%,33% { transform: translate(80vw, 62vh); }   /* beat 1 */
  41%     { transform: translate(58vw, 14vh); }
  55%     { transform: translate(30vw, 22vh); }
  64%,86% { transform: translate(41vw, 50vh); }   /* beat 3 */
  95%     { transform: translate(8vw, 12vh); }
  100%    { transform: translate(-8vw, 10vh); }
}
.a-drone .bob { animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-3px);} }
.rotor { animation: rotor .14s linear infinite; transform-origin:center; transform-box:fill-box; }
@keyframes rotor { 0%{transform:scaleX(1);opacity:.9;} 50%{transform:scaleX(.2);opacity:.5;} 100%{transform:scaleX(1);opacity:.9;} }

/* ---- ground robot ---- */
.a-robot { position:absolute; width:58px; bottom:4vh; animation: robot-roam 48s ease-in-out infinite; will-change:transform; }
@keyframes robot-roam {
  0%      { transform: translateX(108vw); }
  11%     { transform: translateX(84vw); }
  14%,34% { transform: translateX(81.5vw); }      /* beat 1 */
  44%     { transform: translateX(34vw); }
  47%,58% { transform: translateX(30vw); }        /* beat 2 */
  64%,86% { transform: translateX(45vw); }        /* beat 3 */
  100%    { transform: translateX(-15vw); }
}
.wheel { animation: wheel 1.1s linear infinite; transform-origin:center; transform-box:fill-box; }
@keyframes wheel { to { transform: rotate(360deg); } }
.a-robot .blink { animation: blink 3s linear infinite; }
@keyframes blink { 0%,92%,100%{opacity:1;} 95%{opacity:.2;} }

/* ---- field rover (mast + dish) ---- */
.a-rover { position:absolute; width:54px; bottom:4.5vh; animation: rover-roam 48s ease-in-out infinite; will-change:transform; }
@keyframes rover-roam {
  0%      { transform: translateX(-12vw); }
  18%     { transform: translateX(8vw); }
  40%     { transform: translateX(20vw); }
  47%,58% { transform: translateX(22.5vw); }      /* beat 2 */
  64%,86% { transform: translateX(36vw); }        /* beat 3 */
  100%    { transform: translateX(112vw); }
}
.dish { animation: dish 4s ease-in-out infinite; transform-origin: 27px 9px; }
@keyframes dish { 0%,100%{transform:rotate(-18deg);} 50%{transform:rotate(18deg);} }

/* ---- self-driving car: one early commute, lidar spinning ---- */
.a-car { position:absolute; width:74px; bottom:3.2vh; animation: car-run 48s ease-in-out infinite; will-change:transform; }
@keyframes car-run {
  0%    { transform: translateX(-16vw); }
  2.5%,4% { transform: translateX(8vw); }
  13%   { transform: translateX(112vw); }
  100%  { transform: translateX(112vw); }
}
.lidar { animation: lidar .7s linear infinite; transform-origin: 37px 7px; }
@keyframes lidar { to { transform: rotate(360deg); } }

/* the camera: physical watermarking checkpoint */
.a-camera { position:absolute; left:8vw; bottom:3.5vh; width:30px; }
.cam-head { animation: camtrack 48s ease-in-out infinite; transform-origin: 15px 10px; }
@keyframes camtrack { 0%,2%{transform:rotate(0);} 2.5%,4.5%{transform:rotate(12deg);} 7%,93%{transform:rotate(0);} 94%,96%{transform:rotate(12deg);} 98%,100%{transform:rotate(0);} }
.cam-cone { position:absolute; left:6.2vw; bottom:5vh; width:0; height:0;
  border-left:2.6vw solid transparent; border-right:2.6vw solid transparent;
  border-top:9vh solid rgba(0,178,161,.13); opacity:0; animation: cone 48s linear infinite; }
@keyframes cone { 0%,2.2%{opacity:0;} 2.7%,4.5%{opacity:1;} 6%,93.5%{opacity:0;} 94%,96.5%{opacity:1;} 98%,100%{opacity:0;} }

/* ---- the pigeon: no identity, no keys, no idea ---- */
.a-pigeon { position:absolute; width:34px; top:34vh; animation: pigeon 48s linear infinite; will-change:transform; }
@keyframes pigeon {
  0%,34% { transform: translateX(108vw) translateY(0); }
  38%    { transform: translateX(80vw) translateY(-2vh); }
  42%    { transform: translateX(52vw) translateY(1vh); }
  46%    { transform: translateX(24vw) translateY(-1.5vh); }
  50%,100% { transform: translateX(-12vw) translateY(0); }
}
.wing-up, .wing-dn { animation: flap .4s steps(1) infinite; }
.wing-dn { animation-delay: .2s; }
@keyframes flap { 0%,49%{opacity:1;} 50%,100%{opacity:0;} }
.pigeon-tag { font-family:"SF Mono",ui-monospace,monospace; font-size:9.5px; color:#aaa; font-style:normal; opacity:0; animation: ptag 48s linear infinite; white-space:nowrap; }
@keyframes ptag { 0%,36%{opacity:0;} 38%,46%{opacity:1;} 48%,100%{opacity:0;} }

/* ---- channels ---- */
.channel { position:absolute; opacity:0;
  background: repeating-linear-gradient(to bottom, var(--blue) 0 4px, transparent 4px 9px);
  background-size: 100% 18px; }
.ch-1 { left:81.3vw; top:67vh; width:2px; height:21vh; animation: ch1 48s linear infinite, march 1.2s linear infinite; }
@keyframes ch1 { 0%,17%{opacity:0;} 18%,32%{opacity:.8;} 34%,100%{opacity:0;} }
.ch-2 { left:25.5vw; bottom:8vh; height:2px; width:5.5vw; animation: ch2 48s linear infinite, march 1.2s linear infinite;
  background: repeating-linear-gradient(to right, var(--blue) 0 4px, transparent 4px 9px); background-size: 18px 100%; }
@keyframes ch2 { 0%,48%{opacity:0;} 49%,57%{opacity:.8;} 59%,100%{opacity:0;} }
@keyframes march { to { background-position: 0 18px; } }

/* MPC triangle */
.mpc-net { position:absolute; left:35vw; bottom:5vh; width:13vw; height:46vh; opacity:0; animation: mpc 48s linear infinite; }
@keyframes mpc { 0%,64%{opacity:0;} 66%,84%{opacity:.85;} 87%,100%{opacity:0;} }
.mpc-net line { stroke:var(--blue); stroke-width:1.2; stroke-dasharray:4 6; animation: ants 1.4s linear infinite; }
@keyframes ants { to { stroke-dashoffset: -20; } }

/* ---- speech bubbles ---- */
.scene { position:absolute; font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:11.5px; }
.scene-1 { right:5vw; bottom:15vh; text-align:right; }
.scene-2 { left:5vw; bottom:15vh; text-align:left; }
.scene-3 { left:50vw; transform:translateX(-50%); bottom:48vh; text-align:center; width:300px; }
.hs { display:inline-block; border:1.2px solid var(--ink); border-radius:8px; background:#fff; padding:3px 9px; margin-top:6px; opacity:0; }
.hs.blue { border-color:var(--blue); color:var(--blue); }
.hs.teal { border-color:var(--teal); color:var(--teal); }
.mb1 { animation: mb1 48s linear infinite; } @keyframes mb1 { 0%,9.8%{opacity:0;transform:scale(.7);} 10.8%,12.3%{opacity:1;transform:scale(1);} 13.8%,100%{opacity:0;} }
.mb2 { animation: mb2 48s linear infinite; } @keyframes mb2 { 0%,2.7%{opacity:0;transform:scale(.7);} 3.7%,5.2%{opacity:1;transform:scale(1);} 6.7%,93.8%{opacity:0;transform:scale(.7);} 94.8%,96.8%{opacity:1;transform:scale(1);} 98%,100%{opacity:0;} }
.b11 { animation: b11 48s linear infinite; } @keyframes b11 { 0%,18%{opacity:0;transform:translateY(4px);} 19%,32%{opacity:1;transform:none;} 34%,100%{opacity:0;} }
.b12 { animation: b12 48s linear infinite; } @keyframes b12 { 0%,21.5%{opacity:0;transform:translateY(4px);} 22.5%,32%{opacity:1;transform:none;} 34%,100%{opacity:0;} }
.b13 { animation: b13 48s linear infinite; } @keyframes b13 { 0%,25%{opacity:0;transform:translateY(4px);} 26%,32%{opacity:1;transform:none;} 34%,100%{opacity:0;} }
.b14 { animation: b14 48s linear infinite; } @keyframes b14 { 0%,28.5%{opacity:0;transform:scale(.7);} 29.5%,33%{opacity:1;transform:scale(1);} 35%,100%{opacity:0;} }
.b21 { animation: b21 48s linear infinite; } @keyframes b21 { 0%,49.5%{opacity:0;transform:translateY(4px);} 50.5%,57%{opacity:1;transform:none;} 59%,100%{opacity:0;} }
.b22 { animation: b22 48s linear infinite; } @keyframes b22 { 0%,53%{opacity:0;transform:scale(.7);} 54%,58%{opacity:1;transform:scale(1);} 60%,100%{opacity:0;} }
.b31 { animation: b31 48s linear infinite; } @keyframes b31 { 0%,67%{opacity:0;transform:translateY(4px);} 68%,84%{opacity:1;transform:none;} 86%,100%{opacity:0;} }
.b32 { animation: b32 48s linear infinite; } @keyframes b32 { 0%,74%{opacity:0;transform:scale(.7);} 75%,85%{opacity:1;transform:scale(1);} 87%,100%{opacity:0;} }

.vring { position:absolute; border:1.5px solid var(--teal); border-radius:50%; opacity:0; }
.vr-1 { right:8vw; bottom:11vh; width:44px; height:44px; animation: vr1 48s ease-out infinite; }
@keyframes vr1 { 0%,28.5%{opacity:0;transform:scale(.3);} 30%{opacity:.8;transform:scale(1);} 33.5%{opacity:0;transform:scale(2);} 34%,100%{opacity:0;} }
.vr-2 { left:24vw; bottom:6vh; width:36px; height:36px; animation: vr2 48s ease-out infinite; }
@keyframes vr2 { 0%,53%{opacity:0;transform:scale(.3);} 54.5%{opacity:.8;transform:scale(1);} 58%{opacity:0;transform:scale(2);} 59%,100%{opacity:0;} }
.vr-3 { left:41vw; bottom:16vh; width:60px; height:60px; animation: vr3 48s ease-out infinite; }
@keyframes vr3 { 0%,74%{opacity:0;transform:scale(.3);} 76%{opacity:.7;transform:scale(1);} 81%{opacity:0;transform:scale(2.4);} 82%,100%{opacity:0;} }

@media (max-width: 900px) { .agents { display:none; } }
@media (prefers-reduced-motion: reduce) { .agents { display:none; } }

/* ---- Floating table of contents (pages with toc: true). ---- */
.page-toc {
  position: fixed;
  top: 9.5rem;
  left: calc(50% + 392px);
  width: 180px;
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.45;
}
.page-toc-title {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--muted);
  margin: 0 0 0.4rem;
}
.page-toc ul { list-style: none; margin: 0; padding: 0; }
.page-toc li { margin: 0.25rem 0; }
.page-toc a {
  color: var(--ink);
  opacity: 0.65;
  text-decoration: none;
}
.page-toc a:hover { opacity: 1; color: var(--link); }
@media (max-width: 1150px) { .page-toc { display: none; } }

.page-toc a.active { opacity: 1; color: var(--link); }

/* Quiet section divider. */
hr.section-divider {
  border: 0;
  border-top: 1px solid #ddd;
  max-width: 640px;
  margin: 2.2rem 0 1.6rem;
}

/* Superscripts (footnote refs) must not inflate line height. */
sup, sub {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  font-size: 0.72em;
}
sup { top: -0.45em; }
sub { top: 0.3em; }

/* ---- Pre-programme discovery showcase. ---- */
.discovery { max-width: 660px; margin-top: 1.6rem; }
.disc-item { margin: 0 0 1.6rem; }

.disc-name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
}
.disc-tag {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 0.6rem;
  vertical-align: 0.12em;
  white-space: nowrap;
}
.disc-tag--multi-agent   { background: #c7e9fb; color: #1a4a63; }
.disc-tag--foundations   { background: #ccbbed; color: #3a2b5c; }
.disc-tag--cyber-physical{ background: #99e0d9; color: #114b45; }
.disc-tag--community     { background: #ffcd9b; color: #6b3d12; }

.disc-desc { margin: 0.25rem 0 0.2rem; max-width: 600px; }

.disc-meta { margin: 0; line-height: 1.5; }
.disc-team { font-family: var(--sans); font-size: 0.9rem; color: var(--muted); }
.disc-links { font-family: var(--sans); font-size: 0.9rem; }
.disc-links a {
  color: var(--link);
  text-decoration: none;
  background: none;
  border-bottom: none;
  margin-left: 0.7rem;
}
.disc-links a:hover { text-decoration: underline; }
.disc-links a:first-child { margin-left: 0.7rem; }