/* site.css: the page frame shared by every page (home, about, and the three apps).
   Load order: tokens.css, components.css, site.css. */

@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/IBMPlexMono-Bold.woff2") format("woff2"); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); font: 400 14px/1.5 var(--font-sans); }
a { color: inherit; }

/* ---------- Text links ----------
   Every plain text link is underlined. Buttons, nav, the brand and the app logos are not.
   The line matches the weight of the type: about one stroke thick. Icons inside a link are
   inline-blocks, which an underline never reaches, so they stay clean. That only works when
   the link itself isn't flex (a flex container passes its underline to every item), so text
   links are inline or inline-block, with a margin standing in for gap. */
a {
  text-decoration-line: underline; text-decoration-skip-ink: auto; text-underline-offset: 0.22em;
  text-decoration-thickness: var(--underline, max(1px, 0.07em));
}
a:where(.underline-strong, .foot-mark, .pg-callout__link) { --underline: max(1.5px, 0.1em); }
a:where(.pr-btn, .pr-logo, .site-brand, .site-nav a, .skip-link) { text-decoration: none; }
a .pr-icon { display: inline-block; vertical-align: -0.22em; text-decoration: none; }
a .pr-icon:first-child { margin-right: 0.35em; }
a .pr-icon:not(:first-child) { margin-left: 0.3em; }
a .pr-icon--ext { margin-left: 0.25em; }
img, svg { display: block; }
[hidden] { display: none !important; }
.poly { image-rendering: pixelated; flex-shrink: 0; }
.tabnum { font-variant-numeric: tabular-nums; }

/* The design system's focus ring, extended to plain links and buttons on site pages. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--stroke-focus) solid var(--ink); outline-offset: 2px; box-shadow: var(--focus-halo);
}

.skip-link {
  position: absolute; left: var(--space-12); top: -100px; z-index: 20;
  padding: var(--space-10) var(--space-12); background: var(--ink); color: var(--paper);
  font: 500 13px/1 var(--font-sans);
}
.skip-link:focus { top: var(--space-12); }

/* Every control is at least 44 x 44 on touch screens. */
@media (pointer: coarse) {
  :where(.pr-btn, .pr-link, .pr-scene, .site-nav a, .site-card__link) { min-height: var(--size-target); }
  :where(.pr-btn--caret, .pr-scene) { min-width: var(--size-target); }
}

/* Large or decorative motion stops. The stepping playhead is not motion and stays. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ---------- App frame ---------- */
.pr-app { min-height: 100vh; display: flex; flex-direction: column; }
.pr-logo { color: var(--ink); }
.app-main { flex: 1; padding: var(--space-20); }
.app-footer {
  border-top: var(--stroke-hair) solid var(--ink); padding: var(--space-10) var(--space-20);
  font: 400 12px/1.5 var(--font-mono); color: var(--muted);
}

/* Placeholder content while an app is being built. */
.building { max-width: 34rem; padding: var(--space-48) 0; }
.building h1 { font: 700 28px/1.2 var(--font-sans); margin: 0 0 var(--space-12); }
.building p { margin: 0 0 var(--space-12); }

/* ---------- Site pages (home, about) ---------- */
.site-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12) var(--space-20);
  padding: var(--space-12) var(--space-20); border-bottom: var(--stroke-rule) solid var(--ink);
}
.site-brand { display: inline-flex; align-items: center; gap: var(--space-10); text-decoration: none; font: 700 17px/1 var(--font-mono); }
.site-nav { margin-left: auto; }
.site-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; padding: 0; }
.site-nav a {
  display: inline-flex; align-items: center; height: var(--size-control); padding: 0 10px;
  font: 500 13px/1 var(--font-sans); text-decoration: none; border: var(--stroke-hair) solid transparent;
}
.site-nav a:hover { border-color: var(--ink); }
.site-nav a[aria-current="page"] { background: var(--ink); color: var(--paper); }

.site-main { max-width: 72rem; margin: 0 auto; padding: 0 var(--space-20); }
.site-section { padding: var(--space-48) 0; border-bottom: var(--stroke-hair) solid var(--ink); }
.site-section:last-child { border-bottom: 0; }

.hero { display: grid; gap: var(--space-36); grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
.hero h1 { font: 700 clamp(30px, 4.4vw, 48px)/1.1 var(--font-sans); margin: var(--space-12) 0 var(--space-16); max-width: 16ch; }
.hero__lead { font: 600 18px/1.4 var(--font-sans); margin: 0 0 var(--space-12); }
.hero__body { max-width: 36rem; margin: 0; }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; } }

/* The 3 : 4 : 5 picture. Colors come from color.js at run time. */
.ratio-figure { margin: 0; }
.ratio-rows { display: grid; gap: var(--space-4); }
.ratio-row { display: grid; gap: var(--space-4); grid-template-columns: repeat(var(--count), 1fr); }
.ratio-cell { height: var(--size-cell); border: var(--stroke-hair) solid var(--ink); }
.ratio-figure figcaption { margin-top: var(--space-10); font: 400 12px/1.5 var(--font-mono); color: var(--muted); }

.cards { list-style: none; margin: var(--space-20) 0 0; padding: 0; display: grid; gap: var(--space-20); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.site-card { border: var(--stroke-hair) solid var(--ink); padding: var(--space-20); display: flex; flex-direction: column; gap: var(--space-10); }
.site-card h3 { font: 700 20px/1 var(--font-mono); margin: 0; }
.site-card p { margin: 0; flex: 1; }
.site-card__link { display: inline-block; align-self: flex-start; min-height: 24px; font: 500 13px/24px var(--font-sans); }
@media (pointer: coarse) { .site-card__link { line-height: var(--size-target); } }
.status { font: 600 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }

.section-title { font: 700 28px/1.2 var(--font-sans); margin: var(--space-6) 0 0; }

.site-footer { border-top: var(--stroke-rule) solid var(--ink); padding: var(--space-20); font: 400 12px/1.5 var(--font-mono); }

/* Poly hops when clicked (home page). Still under reduced motion. */
.poly-button { padding: 0; border: 0; background: none; cursor: pointer; }
.poly-button.is-hopping .poly { animation: poly-hop 420ms steps(6, end); }
@keyframes poly-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); } 70% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .poly-button.is-hopping .poly { animation: none; } }

/* ---------- Footer links (shared/footer.js) ---------- */
.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-20); margin-left: auto; font: 400 12px/1.5 var(--font-mono); }
.foot-links a, .foot-cols a { display: inline-block; min-height: 24px; line-height: 24px; }
.foot-links .pr-icon--ext, .foot-cols .pr-icon--ext { font-size: 14px; }
.foot-mark { font-weight: 700; }
.site-footer { display: flex; flex-direction: column; gap: var(--space-20); }
.foot-cols { display: flex; flex-wrap: wrap; gap: var(--space-20) var(--space-48); align-items: flex-start; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.foot-head { margin: 0 0 var(--space-6); font: 700 12px/1.5 var(--font-mono); }
.foot-privacy { margin: 0; max-width: 18rem; color: var(--muted); }
.foot-base { margin: 0; color: var(--muted); }
@media (pointer: coarse) { .foot-links a, .foot-cols a { min-height: var(--size-target); line-height: var(--size-target); } }
@media (max-width: 760px) { .foot-links { margin-left: 0; flex-direction: column; align-items: flex-start; } }

/* ---------- Phones: the shared frame (site-spec, Phones; shared/phone.js) ----------
   phone-mode.js sets html.is-phone on a touch screen whose shorter side is 500px or less.
   Landscape: a left rail, one top bar, the stage, and drawers from the rail. Upright: see the block below.
   Backgrounds may run under the safe-area insets; controls never do. */
:root:not(.is-phone) .pr-phone-only, .pr-phone-rail, .pr-drawer { display: none !important; }
.is-phone .pr-desk-only { display: none !important; }

.is-phone .pr-app {
  display: grid; grid-template-columns: var(--size-rail) minmax(0, 1fr); grid-template-rows: 58px minmax(0, 1fr);
  height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; touch-action: manipulation;
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.is-phone .pr-app > .pr-foot { display: none; }
.is-phone .pr-app > .pr-topbar {
  grid-column: 2; grid-row: 1; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: var(--space-8);
  height: 58px; min-width: 0; padding: 0 var(--space-16) 0 var(--space-10); overflow: hidden; /* right side doubled for curved screens; the safe-area inset is on .pr-app */
}
.is-phone .pr-app > .pr-topbar .pr-logo { display: none; }

.is-phone .pr-phone-rail {
  display: flex !important; grid-column: 1; grid-row: 1 / -1; flex-direction: column; align-items: center; gap: var(--space-6);
  min-height: 0; padding: var(--space-6) 0 var(--space-4); overflow-y: auto; scrollbar-width: none;
  border-right: var(--stroke-rule) solid var(--ink);
}
.pr-phone-rail::-webkit-scrollbar { display: none; }
.pr-phone-rail__spacer { flex: 1 0 0; }
.pr-railhome { display: flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; text-decoration: none; }
.pr-railhome .poly { width: 34px; height: 34px; }
.pr-railbtn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: none;
  width: 48px; height: 48px; padding: 0; border: 0; background: var(--paper); color: var(--ink); cursor: pointer;
  font: 600 9px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em;
}
.pr-railbtn .pr-icon { font-size: 22px; }
.pr-railbtn[aria-expanded="true"], .pr-railbtn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.pr-railbtn:disabled { opacity: 0.4; cursor: default; }
.pr-railbtn:focus-visible, .pr-railhome:focus-visible { outline-offset: -3px; }

/* Drawers slide over the stage from the rail, full height, with a 2px rule on the open side. */
.is-phone .pr-drawer:not([hidden]) {
  display: flex !important; flex-direction: column; position: fixed; z-index: 30; top: 0; bottom: 0;
  left: calc(env(safe-area-inset-left) + var(--size-rail)); width: 300px; max-width: calc(100vw - var(--size-rail) - env(safe-area-inset-left));
  background: var(--paper); border-right: var(--stroke-rule) solid var(--ink); box-shadow: 8px 0 0 rgba(0, 0, 0, 0.08);
}
.is-phone .pr-drawer--wide:not([hidden]) { width: 330px; }
.pr-drawer__head {
  display: flex; align-items: center; gap: var(--space-6); flex: none; min-height: 58px; box-sizing: border-box;
  padding-left: var(--space-16); border-bottom: var(--stroke-rule) solid var(--ink);
}
.pr-drawer__title { flex: 1; min-width: 0; margin: 0; font: 700 15px/1.2 var(--font-sans); }
.pr-drawer__close {
  display: flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 56px; padding: 0;
  border: 0; background: transparent; color: var(--ink); cursor: pointer;
}
.pr-drawer__close .pr-icon { font-size: 22px; }
.pr-drawer__close:focus-visible { outline-offset: -3px; }
.pr-drawer__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(env(safe-area-inset-bottom) + var(--space-12)); }

/* Menu rows: 48px, no rule between them; a light rule and an eyebrow start each group. */
.pr-mgroup {
  margin: var(--space-16) 0 0; padding: var(--space-20) var(--space-20) var(--space-6); border-top: var(--stroke-hair) solid var(--divider);
  font: 600 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
}
.pr-mgroup:first-child { margin-top: 0; border-top: 0; }
.pr-mi {
  display: flex; align-items: center; gap: var(--space-14); width: 100%; height: 48px; box-sizing: border-box; padding: 0 var(--space-20);
  border: 0; background: var(--paper); color: var(--ink); text-align: left; cursor: pointer; font: 500 14px/1 var(--font-sans);
}
.pr-mi .pr-icon { font-size: 22px; flex: none; }
.pr-mi__hint { margin-left: calc(-1 * var(--space-6)); font: 400 11px/1 var(--font-mono); color: var(--muted); white-space: nowrap; }
.pr-mi__chev { margin-left: auto; font-size: 18px !important; }
.pr-mi[aria-expanded="true"] .pr-mi__chev { transform: rotate(90deg); }
.pr-mi:disabled { color: var(--off); cursor: default; }
.pr-mi:focus-visible { outline-offset: -3px; }
.pr-mfoot {
  display: flex; flex-direction: column; align-items: flex-start; margin-top: var(--space-16); padding: var(--space-12) var(--space-20) var(--space-24);
  border-top: var(--stroke-hair) solid var(--divider); font: 400 12px/1 var(--font-mono);
}
.pr-mfoot > a { display: block; line-height: var(--size-target); }
.pr-mfoot .foot-base { padding-top: var(--space-8); line-height: 1.8; color: var(--muted); }
.pr-mfoot .pr-icon--ext { font-size: 14px; }

/* Short landscape screens (Safari's own bars can leave under 300px): the rail tightens so Menu stays in view. */
@media (max-height: 340px) {
  .is-phone .pr-phone-rail { gap: 0; padding: 2px 0; }
  .is-phone .pr-railhome { height: 44px; }
  .is-phone .pr-railbtn { height: var(--size-target); }
}

/* ---------- Home and the article on a narrow screen (site-spec, Phones) ----------
   Poly, the site name, and a menu button that opens the four site links. Portrait or landscape. */
.site-menu-btn { display: none; }
@media (max-width: 600px) {
  .site-header { position: relative; flex-wrap: nowrap; min-height: 60px; padding: 0 var(--space-4) 0 var(--space-16); }
  .site-brand { flex: 1; min-width: 0; min-height: var(--size-target); font-size: 15px; }
  .site-menu-btn {
    display: flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px; margin-left: auto; padding: 0;
    border: 0; background: var(--paper); color: var(--ink); cursor: pointer;
  }
  .site-menu-btn .pr-icon { font-size: 22px; }
  .site-header.is-open .site-menu-btn { background: var(--ink); color: var(--paper); }
  .site-header:not(.is-open) .site-nav { display: none; }
  .site-nav { position: absolute; z-index: 5; top: 100%; left: 0; right: 0; margin: var(--stroke-rule) 0 0; background: var(--paper); border-bottom: var(--stroke-rule) solid var(--ink); }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav li + li { border-top: var(--stroke-hair) solid var(--divider); }
  .site-nav a { display: flex; height: 52px; padding: 0 var(--space-16); border: 0; font: 700 16px/1 var(--font-mono); }
  .site-nav a[href$="about/"] { font-weight: 500; }
  .site-nav a:focus-visible { outline-offset: -3px; }
}

/* ---------- Phones, upright (site-spec, Phones: Upright frame) ----------
   A two-row header (Poly shows again), the stage, and the rail turned into a bottom bar.
   Each app fills the header's two rows; the rail's buttons keep their order, Poly leaves for the header. */
@media (orientation: portrait) {
  .is-phone .pr-app {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) calc(var(--size-bar, 56px) + 0px);
    padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  }
  .is-phone .pr-app > .pr-topbar { grid-column: 1; grid-row: 1; height: auto; flex-wrap: wrap; overflow: visible; padding: 0 var(--space-12); }
  .is-phone .pr-app > .pr-topbar .pr-logo { display: flex; }
  .is-phone .pr-app > .pr-topbar .pr-logo > :not(.poly) { display: none; } /* Poly alone; the wordmark waits for landscape and desktop */
  .is-phone .pr-app { overflow-x: hidden; }
  .is-phone .pr-app > main, .is-phone .pr-app > .pr-stage { grid-column: 1; grid-row: 2; }
  .is-phone .pr-phone-rail {
    grid-column: 1; grid-row: 3; flex-direction: row; align-items: stretch; gap: 0; padding: 0 0 env(safe-area-inset-bottom);
    height: calc(56px + env(safe-area-inset-bottom)); box-sizing: border-box; overflow: hidden;
    border-right: 0; border-top: var(--stroke-rule) solid var(--ink);
  }
  .is-phone .pr-railhome, .is-phone .pr-phone-rail__spacer { display: none; }
  .is-phone .pr-railbtn { flex: 1 1 0; width: auto; min-width: 44px; height: 56px; }
  .is-phone .pr-drawer:not([hidden]) {
    top: env(safe-area-inset-top); bottom: calc(56px + env(safe-area-inset-bottom)); left: 0; right: 0; width: auto; max-width: none;
    border-right: 0; border-bottom: var(--stroke-rule) solid var(--ink); box-shadow: none;
  }
  .is-phone .pr-drawer--wide:not([hidden]) { width: auto; }
}