/* shared by about.html and articles.html: same tokens and type as the home page */
:root {
  --night: #0a121b; --paper: #f2f3f3; --paper2: #e6e8e8; --ink: #0e1822; --ink2: #4b5761; --on: #eef1f3; --on2: #a9b4bd;
  --line: rgba(14,24,34,.16); --line-on: rgba(238,241,243,.18);
  --wide: "Martian Mono", ui-monospace, monospace; --sans: "Instrument Sans", system-ui, sans-serif;
  --gut: clamp(16px, 4vw, 56px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--sans); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid #5f93bb; outline-offset: 3px; }
svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wide { font-family: var(--wide); font-stretch: 112.5%; text-transform: uppercase; }
.lbl { font-family: var(--wide); font-size: 12px; text-transform: uppercase; }
.rr { display: inline-block; transform: scaleX(-1); }
.dark { background: var(--night); color: var(--on); }

header { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; justify-content: space-between; align-items: center; padding: 18px var(--gut); color: #fff; mix-blend-mode: difference; }
header .mark { font-family: var(--wide); font-stretch: 112.5%; font-weight: 600; font-size: 15px; text-decoration: none; }
header nav { display: flex; gap: 22px; }
header nav a { font-family: var(--wide); font-size: 12px; text-transform: uppercase; text-decoration: none; text-underline-offset: 4px; }
header nav a:hover, header nav a[aria-current] { text-decoration: underline; }

.cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--ink); color: var(--on); font-family: var(--wide); font-size: 12px; text-transform: uppercase; text-decoration: none; }
.cta:hover { background: #1b2a38; }
.dark .cta { background: var(--on); color: var(--ink); }
.dark .cta:hover { background: #fff; }
.cta.ghost, .dark .cta.ghost { background: none; color: inherit; border: 1px solid currentColor; }
.cta.ghost:hover { background: rgba(127,140,150,.14); }

/* the dotted line from her captions: label, dots, value */
.dotrow { display: flex; align-items: baseline; gap: .6em; }
.dotrow .fill { flex: 1; min-width: 24px; height: 1em; background-image: radial-gradient(circle, currentColor 1px, transparent 1.2px); background-size: 8px 4px; background-repeat: repeat-x; background-position: 0 75%; opacity: .45; }

footer { padding: 12vh var(--gut) 40px; }
footer .big { font-size: clamp(30px, 5.4vw, 88px); line-height: .98; font-weight: 500; letter-spacing: -.02em; max-width: 15ch; }
footer .cols { display: grid; grid-template-columns: repeat(4, 1fr) 1.25fr; gap: 32px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line-on); font-size: 15px; color: var(--on2); }
footer .cols b { display: block; margin-bottom: 6px; font-family: var(--wide); font-size: 11px; font-weight: 400; text-transform: uppercase; color: var(--on); }
footer .cols a { color: var(--on); overflow-wrap: anywhere; }
footer .cols .k { grid-column: 1 / -1; font-family: var(--wide); font-size: 11px; text-transform: uppercase; color: var(--on2); }
footer .cta { margin-top: 28px; }
footer .fine { margin-top: 48px; font-size: 13px; color: var(--on2); }

@media (max-width: 760px) {
  header { padding: 13px var(--gut); background: var(--night); mix-blend-mode: normal; }
  header .mark { font-size: 12px; white-space: nowrap; }
  header nav { gap: 11px; }
  header nav a { font-size: 10px; }
  header nav .hide-s { display: none; }
  footer .cols { grid-template-columns: 1fr 1fr; }
  footer .cols > div:last-child { grid-column: 1 / -1; }
}

/* phone menu: a dropdown behind the Menu button (menu.js) */
.menu-btn { display: none; }
.skip { position: fixed; left: 8px; top: 8px; z-index: 60; padding: 12px 16px; background: var(--ink); color: var(--on); font-family: var(--wide); font-size: 12px; text-transform: uppercase; text-decoration: none; transform: translateY(-160%); }
.skip:focus { transform: none; }
@media (max-width: 760px) {
  .menu-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: -10px -10px -10px 0; padding: 0 10px; font-family: var(--wide); font-size: 12px; text-transform: uppercase; color: inherit; pointer-events: auto; }
  header.open { mix-blend-mode: normal; background: var(--night); color: var(--on); }
  header nav, header nav .hide-s { display: none; }
  header.open nav { display: flex; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; right: 0; padding: 4px var(--gut) 18px; background: var(--night); border-bottom: 1px solid rgba(238,241,243,.18); box-shadow: 0 18px 30px rgba(0,0,0,.25); }
  :root header.open nav a, :root header.open nav button { display: flex; align-items: center; min-height: 52px; font-size: 15px; text-align: left; border-top: 1px solid rgba(238,241,243,.12); }
  :root header.open nav a[aria-current] { text-decoration: underline; text-underline-offset: 5px; }
  .lite header.open nav .only-full, .nogl header.open nav .only-full { display: none; }
}

/* glass top bar: dark tinted frosted glass, so the links read the same over night and paper sections */
header { mix-blend-mode: normal; color: var(--on); background: rgba(10,18,27,.6); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border-bottom: 1px solid rgba(238,241,243,.1); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { header { background: rgba(10,18,27,.92); } }
@media (max-width: 760px) {
  header { background: rgba(10,18,27,.6); }
  header.open, header.open nav { background: var(--night); }
}