/* platopod.com — one stylesheet for every page.
 *
 * Warm and human: an off-white page, large friendly headlines with one word
 * picked out in the accent, real photographs and renders at generous size,
 * rounded corners, lots of air. Long pages (technical, teaching, military)
 * read as articles: a narrow text column with figures that break out wider.
 *
 * Colour is still signal. Blue and red are the two forces and appear only in
 * the arena; green only means a located hazard. The accent, a deep cobalt,
 * is for emphasis and actions -- darker and greyer than the force blue, so
 * the two do not read as one.
 */

:root {
  --paper:  #FAF6F1;
  --card:   #FFFFFF;
  --ink:    #17140F;
  --ink-2:  #57514A;
  --ink-3:  #716A61;        /* small labels only; 5.0:1 on paper */
  --rule:   #E7DFD4;
  --accent: #1F4FB8;        /* deep cobalt: calmer and darker than the blue force */
  --accent-soft: #DCE5F6;
  --accent-deep: #163C8E;   /* solid button hover */
  --accent-mist: #EEF2FA;   /* diagram: the server's panel */
  --accent-line: #C9D5EE;   /* diagram: the server's outlines */
  --code-bg:   #1C1915;     /* the one dark surface */
  --code-ink:  #F3EDE4;
  --code-comment: #9FB3D9;
  --blue:   #1D4ED8;
  --red:    #DC2626;
  --radius: 18px;
  --wide:   1180px;         /* page width */
  --read:   680px;          /* reading column */

  /* Three sizes, and only three, across the whole site. Hierarchy below the
     heading comes from weight and ink, not from more sizes. */
  --fs-head:  clamp(34px, 4.2vw, 48px);  /* every h1 and h2 */
  --fs-body:  18px;                      /* prose, ledes, h3 in semibold */
  --fs-small: 15px;                      /* cards, captions, labels, nav, footer */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--fs-body)/1.6 "Archivo", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
::selection { background: var(--accent-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.03em; line-height: 1.08; }
h1, h2 { font-size: var(--fs-head); }
h3 { font-size: var(--fs-body); letter-spacing: -.01em; line-height: 1.35; }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: var(--fs-small); }
.accent { color: var(--accent); }

.w { max-width: var(--wide); margin: 0 auto; padding: 0 28px; }
.read { max-width: var(--read); margin: 0 auto; padding: 0 28px; }
@media (max-width: 600px) { .w, .read { padding: 0 20px; } }

/* ---- header ---------------------------------------------------------- */
.mast { position: sticky; top: 0; z-index: 10; background: rgba(250, 246, 241, .92);
        backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: blur(10px); }
.mast .w { display: flex; align-items: center; gap: 28px; height: 72px; }
.brand { font-weight: 600; font-size: var(--fs-body); letter-spacing: -.02em; text-decoration: none;
         margin-right: auto; }
.brand span { color: var(--accent); }
.mast nav { display: flex; gap: 26px; font-size: var(--fs-small); }
.mast nav a { text-decoration: none; color: var(--ink-2); }
.mast nav a:hover, .mast nav a[aria-current="page"] { color: var(--ink); }
/* Under 900px the links drop to a second row rather than disappear, so every
   page stays one tap from every other without a menu script. */
@media (max-width: 900px) {
  .mast .w { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 10px; row-gap: 6px; }
  .mast nav { order: 3; width: 100%; gap: 20px; font-size: var(--fs-small);
              overflow-x: auto; scrollbar-width: none; }
  .mast nav a { white-space: nowrap; padding: 4px 0; }
}

/* ---- buttons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 var(--fs-small)/1 "Archivo", sans-serif; text-decoration: none; cursor: pointer;
  padding: 14px 22px; border-radius: 999px; border: 1.5px solid var(--ink);
  background: transparent; color: var(--ink);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.solid { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.solid:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn:disabled:hover { background: var(--accent); border-color: var(--accent); }
.btn:disabled .arrow { transform: none; }
.btn .arrow { display: inline-block; transition: transform .2s; }
.btn:hover .arrow { transform: translateX(3px); }
.mast .btn { padding: 10px 18px; font-size: var(--fs-small); }

/* ---- sections -------------------------------------------------------- */
section { padding: 110px 0 0; }
.h2 { font-size: var(--fs-head); }
.lede { font-size: var(--fs-body); color: var(--ink-2); margin-top: 22px;
        max-width: 38rem; line-height: 1.55; }
.centre { text-align: center; }
.centre .lede { margin-left: auto; margin-right: auto; }

/* ---- hero ------------------------------------------------------------ */
.hero { padding: 48px 0 0; }
.hero .w { max-width: 1360px; display: grid; grid-template-columns: 0.8fr 1.5fr; gap: 48px;
           align-items: center; }
.hero h1 { font-size: var(--fs-head); letter-spacing: -.04em; line-height: 1.04; }
.hero .actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.frame { background: var(--card); border-radius: var(--radius); overflow: hidden;
         box-shadow: 0 1px 0 var(--rule), 0 24px 60px -30px rgba(23, 20, 15, .25); }
.frame video, .frame img { width: 100%; height: auto; }
.hero figure { margin: 0; }
.hero figcaption { margin-top: 12px; font-size: var(--fs-small); color: var(--ink-2); text-align: right; }
@media (max-width: 900px) { .hero .w { grid-template-columns: 1fr; gap: 36px; } }

/* ---- numbered steps on a line ---------------------------------------- */
.steps { list-style: none; margin: 56px auto 0; padding: 0; max-width: 760px; position: relative; }
.steps-wrap { padding: 0 28px; }
@media (max-width: 600px) { .steps-wrap { padding: 0 20px; } }
.steps::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px;
                 width: 2px; background: var(--rule); }
.steps li { position: relative; padding: 0 0 44px 76px; }
.steps li:last-child { padding-bottom: 0; }
.steps .dot { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%;
              background: var(--accent); color: #fff; display: grid; place-items: center;
              font-weight: 600; }
.steps h3 { padding-top: 10px; }
.steps p { color: var(--ink-2); margin-top: 8px; }
/* Unordered variant: the items are parts, not a sequence, so a small dot on
   the spine instead of a number. */
.steps.plain li { padding-left: 52px; }
.steps.plain h3 { padding-top: 0; }
.steps.plain .dot { width: 14px; height: 14px; left: 15px; top: 5px;
                    box-shadow: 0 0 0 5px var(--paper); }

/* ---- doorways (links to the other pages) ------------------------------ */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 56px; }
.door { display: flex; flex-direction: column; text-decoration: none; background: var(--card);
        border-radius: var(--radius); overflow: hidden;
        box-shadow: 0 1px 0 var(--rule), 0 18px 40px -28px rgba(23, 20, 15, .25);
        transition: transform .2s, box-shadow .2s; }
.door:hover { transform: translateY(-3px);
              box-shadow: 0 1px 0 var(--rule), 0 26px 50px -26px rgba(23, 20, 15, .3); }
.door img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.door div { padding: 22px 24px 26px; }
.door p { color: var(--ink-2); margin-top: 8px; font-size: var(--fs-small); }
.door .go { margin-top: 16px; color: var(--accent); font-weight: 500; font-size: var(--fs-small); }
@media (max-width: 900px) { .doors { grid-template-columns: 1fr; } }

/* ---- contact --------------------------------------------------------- */
.contact .w { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.contact address { font-style: normal; color: var(--ink-2); margin-top: 22px; }
form { background: var(--card); border-radius: var(--radius); padding: 30px;
       box-shadow: 0 1px 0 var(--rule); }
.f { margin-bottom: 22px; }
.f label { display: block; margin-bottom: 8px; font-size: var(--fs-small); color: var(--ink-2); }
.f input, .f textarea { width: 100%; border: 1.5px solid var(--rule); border-radius: 12px;
                        background: var(--paper); color: var(--ink); font: inherit;
                        padding: 11px 14px; }
.f textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.f input:focus, .f textarea:focus { outline: none; border-color: var(--ink); }
#note { margin-top: 14px; color: var(--ink-2); min-height: 1px; }
#note.bad { color: var(--red); }
@media (max-width: 900px) { .contact .w { grid-template-columns: 1fr; gap: 36px; } }

/* ---- article pages --------------------------------------------------- */
.article h1 { letter-spacing: -.04em; }
.article .read > p { margin-top: 22px; }
.article h2 { margin-top: 72px; }
.article h3 { margin-top: 40px; }
.article ul { padding-left: 1.2em; }
.article li { margin-top: 8px; }
figure { margin: 48px 0 0; }
figure.wide { max-width: 980px; margin-left: auto; margin-right: auto; padding: 0 28px; }
figcaption { margin-top: 12px; font-size: var(--fs-small); color: var(--ink-2); }
pre { background: var(--code-bg); color: var(--code-ink); border-radius: 14px; padding: 22px 24px;
      overflow-x: auto; font: var(--fs-small)/1.6 "IBM Plex Mono", ui-monospace, monospace; margin: 28px 0 0; }
code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: inherit; }

/* ---- footer ---------------------------------------------------------- */
.foot { margin-top: 120px; border-top: 1px solid var(--rule); padding: 40px 0 56px; }
.foot .w { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; font-size: var(--fs-small);
           color: var(--ink-2); }
.foot a { text-decoration: none; color: var(--ink-2); display: block; margin-top: 6px; }
.foot a:hover { color: var(--ink); }
.foot b { color: var(--ink); font-weight: 600; display: block; margin-bottom: 6px; }
@media (max-width: 700px) { .foot .w { grid-template-columns: 1fr; } }

/* ---- article extras -------------------------------------------------- */
.article-head { padding-top: 64px; }
.article-head .lede { max-width: none; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.pair img, figure.wide img, figure.wide video, .read figure img { border-radius: 14px; width: 100%;
  height: auto; }
@media (max-width: 700px) { .pair { grid-template-columns: 1fr; } }
.diagram { background: var(--card); border-radius: var(--radius); padding: 24px;
           box-shadow: 0 1px 0 var(--rule); }
.diagram svg { width: 100%; height: auto; display: block; }
/* The architecture diagram: a wide drawing, and a stacked one for phones. Hardware
   is ink, the server is cobalt; blue, red and green stay out (they belong to the arena). */
.diagram .arch-tall { display: none; }
@media (max-width: 760px) { .diagram .arch-wide { display: none; } .diagram .arch-tall { display: block; }
  .diagram { padding: 12px; } }
.arch text { font-family: "Archivo", sans-serif; }
.arch .a-hw  { font-size: 15px; font-weight: 600; fill: var(--ink); }
.arch .a-s   { font-size: var(--fs-small); fill: var(--ink-2); }
.arch .a-h   { font: 400 12px "IBM Plex Mono", monospace; fill: var(--ink-3); letter-spacing: .06em; }
.arch .a-lb  { font: 400 12.5px "IBM Plex Mono", monospace; fill: var(--accent); }
.arch .a-lb-ink { fill: var(--ink-2); }
.arch .a-nt  { font-size: 15px; font-weight: 500; fill: var(--accent); }
.arch .a-et  { font-size: 15px; font-weight: 500; fill: #fff; }
.arch .a-ht  { font-size: 15px; font-weight: 500; fill: var(--ink); }
.arch .a-dev { fill: var(--ink-2); }
.arch .a-scr { fill: var(--card); }
.arch .a-fov { fill: var(--rule); opacity: .7; }
.arch .a-arena { fill: var(--paper); stroke: var(--rule); stroke-width: 1.5; }
.arch .a-tag { fill: var(--ink-3); }
.arch .a-pod { fill: var(--ink); }
.arch .a-lid { fill: var(--paper); }
.arch .a-virt { fill: var(--card); stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 4 4; }
.arch .a-srv { fill: var(--accent-mist); stroke: var(--accent-line); stroke-width: 1.5; }
.arch .a-node { fill: var(--card); stroke: var(--accent-line); stroke-width: 1.5; }
.arch .a-edge { fill: var(--accent); }
.arch .a-bus { stroke: var(--accent-line); stroke-width: 2; fill: none; }
.arch .a-podp { fill: var(--paper); stroke: var(--rule); stroke-width: 1.5; }
.arch .a-hwn { fill: var(--card); stroke: var(--rule); stroke-width: 1.5; }
.arch .a-ln  { stroke: var(--accent); stroke-width: 1.8; fill: none; }
.arch .a-ink { stroke: var(--ink-2); stroke-width: 1.5; fill: none; }
.arch .a-loop { stroke: var(--ink-2); stroke-width: 1.8; fill: none; stroke-dasharray: 6 5; }
.arch .a-head { fill: var(--accent); }
.arch .a-head-ink { fill: var(--ink-2); }
.facts { list-style: none; padding: 0 !important; margin: 26px 0 0; border-top: 1px solid var(--rule); }
.facts li { display: grid; grid-template-columns: 11rem 1fr; gap: 18px; padding: 12px 0;
            border-bottom: 1px solid var(--rule); margin: 0 !important; }
.facts b { font-weight: 600; }
.facts span { color: var(--ink-2); }
@media (max-width: 600px) { .facts li { grid-template-columns: 1fr; gap: 2px; } }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
.cards > div { background: var(--card); border-radius: 16px; padding: 22px 24px;
               box-shadow: 0 1px 0 var(--rule); }
.cards h3 { margin: 0 !important; }
.cards .tag { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: var(--fs-small);
              color: var(--accent); text-transform: uppercase; letter-spacing: .06em; }
.cards p { color: var(--ink-2); margin-top: 6px; font-size: var(--fs-small); }
.cards .span2 { grid-column: 1 / -1; background: var(--accent-soft); box-shadow: none; }
@media (max-width: 700px) { .cards { grid-template-columns: 1fr; } }
pre .c { color: var(--code-comment); }                      /* comments */
.note-line { margin-top: 18px; font-size: var(--fs-small); color: var(--ink-2); }

/* ---- about and history ----------------------------------------------- */
.banner { max-width: 1360px; margin: 48px auto 0; padding: 0 28px; }
.banner img { width: 100%; height: auto; border-radius: var(--radius); }
.banner figcaption { text-align: right; }
@media (max-width: 600px) { .banner { padding: 0 20px; }
  .banner img { aspect-ratio: 16 / 9; object-fit: cover; } }
.people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
.person { background: var(--card); border-radius: 16px; padding: 24px;
          box-shadow: 0 1px 0 var(--rule); }
.person .face { width: 84px; height: 84px; border-radius: 50%; background: var(--accent-soft);
                color: var(--accent); display: grid; place-items: center; font-weight: 600;
                font-size: var(--fs-body); letter-spacing: -.02em; object-fit: cover; }
.person h3 { margin-top: 18px !important; }
.person .role { color: var(--accent); font-size: var(--fs-small); margin-top: 4px; }
.person p { color: var(--ink-2); font-size: var(--fs-small); margin-top: 10px; }
@media (max-width: 800px) { .people { grid-template-columns: 1fr; } }
.stage { position: relative; padding-left: 76px; margin-top: 56px; }
.stage .dot { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%;
              background: var(--accent); color: #fff; display: grid; place-items: center;
              font-weight: 600; }
.stage h2 { margin-top: 0 !important; }
.stage .where { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: var(--fs-small);
                letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
                margin-top: 10px; }
.stage p { margin-top: 16px; }
.stage .names { color: var(--ink-2); }
@media (max-width: 600px) { .stage { padding-left: 0; padding-top: 60px; } }
.notfound { text-align: center; padding: 120px 0 40px; }
.notfound h1 { letter-spacing: -.04em; }
.notfound .lede { margin: 22px auto 34px; }
@media (min-width: 1060px) { .people { margin-left: -150px; margin-right: -150px; } }
.pair.even img, .pair.even video { aspect-ratio: 4 / 3; object-fit: cover; width: 100%;
                                   height: auto; border-radius: 14px; }