/* ==========================================================================
   Princeton IEEE — site stylesheet
   Layer 1 is the brand kit's design-tokens.css, unchanged.
   Layer 2 down is this site: an engineering-drawing take on the kit.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Brand kit tokens (from design-tokens.css — do not edit, extend below)
   -------------------------------------------------------------------------- */
:root {
  --pi-logo-orange: #FD7301;
  --pi-orange-light: #E77500;
  --pi-orange-dark: #F58025;
  --pi-black: #000000;
  --pi-charcoal: #121212;
  --pi-paper: #FFFFFF;
  --pi-warm-paper: #FAF8F4;
  --pi-circuit-gray: #D9D9D6;
  --pi-muted: #666666;
  --pi-ieee-blue-reserved: #00629B;

  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Source Serif 4", Georgia, serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-card: 0 10px 30px rgba(0, 0, 0, .08);
  --max-content: 1180px;
}

/* --------------------------------------------------------------------------
   2. Site extensions
   -------------------------------------------------------------------------- */
:root {
  /* text */
  --ink: #101010;
  --ink-2: #4a4a48;
  --ink-3: #6b6b67;      /* 5.4:1 on white — #7c7c78 measured 4.2 and failed AA */
  --ink-dark: #f2f0ec;
  --ink-dark-2: #a8a6a1;
  --ink-dark-3: #8b8983; /* 5.4:1 on charcoal */

  /* Princeton orange only reaches 3.0:1 on white, and the kit is explicit that
     orange is not for normal-size text on light. Small mono labels that want to
     read as orange use this darkened value instead: 4.9:1 on white, 4.6:1 on
     warm paper. Fills, rules and dots keep the real #E77500 / #F58025. */
  --orange-ink: #B4560A;

  /* structure. hairlines are near-black at low alpha so they sit *under* type */
  --rule: rgba(16, 16, 16, .14);
  --rule-strong: rgba(16, 16, 16, .30);
  --rule-dark: rgba(255, 255, 255, .16);

  /* type scale — kit's 14/16/18/24/32/48/72-120, tuned to real line lengths */
  --t-meta: .8125rem;
  --t-sm: 1rem;
  --t-body: 1.125rem;
  --t-lede: 1.3125rem;
  --t-h4: 1.5rem;
  --t-h3: clamp(1.5rem, 1.15rem + 1.5vw, 2rem);
  --t-h2: clamp(2.125rem, 1.5rem + 2.6vw, 3rem);
  --t-h1: clamp(2.75rem, 1.1rem + 6.2vw, 5.75rem);

  /* rhythm */
  --gut: clamp(1.25rem, 4vw, 2rem);
  --sec-y: clamp(4rem, 8vw, 7.5rem);
  --rail: 172px; /* gutter that carries section designators on wide screens */

  --dur: 170ms;
  --ease: cubic-bezier(.2, .8, .3, 1);
}

/* --------------------------------------------------------------------------
   3. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* site.js hides any slot whose field is empty; this has to beat .btn, .flex etc. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 77px; /* sticky masthead height, so a section starts right under it */
}

body {
  margin: 0;
  background: var(--pi-paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 760;
  line-height: 1.04;
  letter-spacing: -.032em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); letter-spacing: -.045em; line-height: .92; }
h2 { font-size: var(--t-h2); letter-spacing: -.038em; }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); letter-spacing: -.022em; }

p, ul, ol, dl { margin: 0; }

a { color: inherit; }

::selection { background: var(--pi-orange-dark); color: #000; }

:focus-visible {
  outline: 3px solid var(--pi-orange-dark);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--pi-black); color: #fff;
  padding: .8rem 1.1rem; font: 600 var(--t-sm)/1 var(--font-sans);
}
.skip:focus { left: .5rem; top: .5rem; }

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. Typographic utilities
   -------------------------------------------------------------------------- */
.eyebrow,
.desig {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.eyebrow {
  font-size: var(--t-meta);
  color: var(--ink-2);
  margin-bottom: 1.1rem;
}
.dark .eyebrow { color: var(--pi-orange-dark); }

.lede {
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 34em;
}
.dark .lede { color: var(--ink-dark-2); }

/* text typed in the editor: a blank line between paragraphs shows as one */
.text { white-space: pre-line; max-width: 36em; }

.tag {
  font: 500 .6875rem/1 var(--font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* "a · b · c" where any part may be empty: the dot only goes between parts
   that are actually showing */
.dots > :not([hidden]) ~ :not([hidden])::before { content: "·"; margin-inline: .55em; }

.note {
  font: 400 var(--t-sm)/1.5 var(--font-mono);
  color: var(--ink-2);
  border-left: 2px solid var(--pi-orange-light);
  padding-left: .75rem;
}

.fine { font: 400 var(--t-meta)/1.55 var(--font-mono); color: var(--ink-3); max-width: 60ch; }
.dark .fine { color: var(--ink-dark-3); }

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.sec { padding-block: var(--sec-y); }

.paper { background: var(--pi-warm-paper); }
.dark { background: var(--pi-charcoal); color: var(--ink-dark); }
.dark h1, .dark h2, .dark h3, .dark h4 { color: #fff; }

/* vertical rhythm for a column of blocks */
.flow > * + * { margin-top: 1.25rem; }
.flow > .btnrow { margin-top: 1.75rem; }
.flow > .gap-lg { margin-top: clamp(2rem, 4vw, 2.75rem); }

/* the sheet: designator hangs in the left rail, content runs in the main column */
.sheet { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 62rem) {
  .sheet { grid-template-columns: var(--rail) minmax(0, 1fr); gap: 0 clamp(2rem, 4vw, 3.5rem); }
  .sheet__rail { grid-column: 1; }
  .sheet__body { grid-column: 2; }
}

/* asymmetric split — deliberately not 50/50. If one side is empty (no photo,
   no details) the other takes the full width. */
.split { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 56rem) {
  .split--7-5 { grid-template-columns: 7fr 5fr; align-items: start; }
  .split:has(> [hidden]) { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   6. Section designator — the site's spine
   Terminal ring + trace running down the rail, borrowed from the shield mark.
   -------------------------------------------------------------------------- */
.desig {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-size: var(--t-meta);
  color: var(--ink-2);
  position: relative;
}
.desig__n {
  position: relative;
  padding-left: 1.4rem;
  color: var(--ink);
  font-weight: 600;
}
.desig__n::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 9px; height: 9px;
  margin-top: -4.5px;
  border: 2px solid var(--pi-orange-light);
  border-radius: 50%;
  background: var(--pi-paper);
  transition: background var(--dur) var(--ease);
}
.desig[data-lit="1"] .desig__n::before { background: var(--pi-orange-light); }
.dark .desig { color: var(--ink-dark-2); }
.dark .desig__n { color: #fff; }
.dark .desig__n::before { border-color: var(--pi-orange-dark); background: var(--pi-charcoal); }
.dark .desig[data-lit="1"] .desig__n::before { background: var(--pi-orange-dark); }
.paper .desig__n::before { background: var(--pi-warm-paper); }
.paper .desig[data-lit="1"] .desig__n::before { background: var(--pi-orange-light); }

/* on wide screens the trace continues down the rail */
@media (min-width: 62rem) {
  .sheet__rail { position: relative; }
  .sheet__rail::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1.9rem;
    bottom: 1.25rem;
    width: 2px;
    background: var(--pi-orange-light);
    opacity: .32;
  }
  .dark .sheet__rail::after { background: var(--pi-orange-dark); opacity: .38; }
  .sheet__rail .desig { display: block; }
  .sheet__rail .desig__n { display: block; margin-bottom: .5rem; }
  .sheet__rail .desig__t { display: block; padding-left: 1.4rem; }
}
@media (min-width: 86rem) { :root { --rail: 208px; } }

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 46px;
  padding: .7rem 1.15rem;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font: 700 var(--t-sm)/1 var(--font-sans);
  letter-spacing: -.008em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--pi-black); color: #fff; }
.btn--primary:hover { background: #2b2b2b; }

.btn--accent { background: var(--pi-orange-dark); color: var(--pi-black); }
.btn--accent:hover { background: var(--pi-logo-orange); }

.btn--ghost { border-color: currentColor; }
.btn--ghost:hover { background: var(--pi-black); color: #fff; border-color: var(--pi-black); }
.dark .btn--ghost:hover { background: #fff; color: var(--pi-black); border-color: #fff; }

.btn--sm { min-height: 38px; padding: .45rem .8rem; font-size: .875rem; }

.btnrow { display: flex; flex-wrap: wrap; gap: .6rem; }

/* text link that behaves like a control */
.tlink {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: var(--rule-strong);
  transition: text-decoration-color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.tlink:hover { text-decoration-color: var(--pi-orange-light); gap: .7rem; }
.dark .tlink { text-decoration-color: rgba(255,255,255,.4); }
.dark .tlink:hover { text-decoration-color: var(--pi-orange-dark); }

/* --------------------------------------------------------------------------
   8. Ticker bar + masthead
   -------------------------------------------------------------------------- */
.ticker {
  background: var(--pi-black);
  color: #fff;
  font: 500 var(--t-meta)/1 var(--font-mono);
  letter-spacing: .06em;
}
.ticker__in { display: flex; align-items: center; min-height: 40px; padding-block: .5rem; }
.ticker__next { display: flex; align-items: center; gap: .55rem; min-width: 0; text-decoration: none; }
.ticker__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticker__t b { font-weight: 500; color: var(--pi-orange-dark); }
.ticker__next:hover .ticker__t { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--pi-orange-dark); }
.pip {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pi-orange-dark);
  flex: none;
}

.masthead {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.masthead__in {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.25rem);
  min-height: 76px;
}
.masthead__brand { display: block; flex: none; }
.masthead__brand img { height: 46px; width: auto; }

.mainnav { margin-left: auto; }
/* The Join button lives in the nav list for the mobile panel and outside it on
   desktop, so exactly one of the two is ever visible. */
.mainnav li:last-child { display: none; }
@media (max-width: 60rem) { .mainnav li:last-child { display: block; } }
.mainnav ul { display: flex; align-items: center; gap: clamp(.9rem, 2.2vw, 1.75rem); list-style: none; padding: 0; }
.mainnav a {
  display: block;
  padding: .35rem 0;
  font-size: .9375rem;
  font-weight: 620;
  letter-spacing: -.008em;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mainnav a:hover { border-bottom-color: var(--pi-orange-light); }
.mainnav a[aria-current] { border-bottom-color: var(--pi-black); }

.masthead .btn { flex: none; }

.navtoggle {
  display: none;
  margin-left: auto;
  width: 46px; height: 46px;
  padding: 0;
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: inherit;
}
.navtoggle span, .navtoggle span::before, .navtoggle span::after {
  display: block; width: 18px; height: 2px; background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.navtoggle span { margin: 0 auto; position: relative; }
.navtoggle span::before, .navtoggle span::after { content: ""; position: absolute; left: 0; }
.navtoggle span::before { top: -6px; }
.navtoggle span::after { top: 6px; }
.navtoggle[aria-expanded="true"] span { background: transparent; }
.navtoggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 60rem) {
  .navtoggle { display: block; }
  .masthead__in > .btn { display: none; }
  .mainnav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--pi-paper);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow-card);
  }
  .mainnav[data-open="1"] { display: block; }
  .mainnav ul { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--gut) 1.25rem; }
  .mainnav li { border-bottom: 1px solid var(--rule); }
  .mainnav li:last-child { border-bottom: 0; padding-top: 1rem; }
  .mainnav a { padding: .9rem 0; font-size: 1.125rem; border-bottom: 0; }
  .mainnav a[aria-current] { color: var(--orange-ink); }
  .mainnav .btn { display: flex; width: 100%; }
}

/* content failed to load (see site.js) */
.loaderr {
  margin: 0;
  padding: 1rem var(--gut);
  background: var(--pi-warm-paper);
  border-bottom: 3px solid var(--pi-orange-dark);
  font: 400 var(--t-sm)/1.5 var(--font-mono);
}

/* --------------------------------------------------------------------------
   9. Introduction (hero)
   -------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero__field {
  position: absolute; inset: 0; z-index: -1;
  background: url("../img/trace-field.svg") center / cover no-repeat;
}
.hero__field::after {
  /* keep the left two-thirds calm so type never sits on a trace */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(101deg, var(--pi-charcoal) 26%, rgba(18, 18, 18, .9) 54%, rgba(18, 18, 18, .5) 100%);
}
.hero__in { padding-block: clamp(3rem, 7vw, 5.5rem); }
.hero h1 { max-width: 15ch; }
.hero__lower {
  display: grid;
  gap: clamp(2.25rem, 4vw, 3.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  align-items: end;
}
@media (min-width: 62rem) {
  .hero__lower { grid-template-columns: minmax(0, 1fr) 330px; }
}
.hero .lede { max-width: 32em; }
.hero .btnrow { margin-top: 1.75rem; }

/* instrument-panel box of quick facts */
.board {
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, .42);
  backdrop-filter: blur(2px);
}
.board__hd {
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--rule-dark);
  font: 500 .6875rem/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pi-orange-dark);
}
.board dl { margin: 0; padding: .35rem 1.1rem .85rem; }
.board__row {
  display: flex; align-items: baseline; gap: .75rem;
  padding: .55rem 0;
  border-bottom: 1px dotted rgba(255, 255, 255, .14);
}
.board__row:last-child { border-bottom: 0; }
.board dt {
  font: 400 var(--t-meta)/1.3 var(--font-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #918f8a;
}
.board dd {
  margin: 0 0 0 auto;
  font: 600 1rem/1.2 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-align: right;
}

/* --------------------------------------------------------------------------
   10. About — photo and team
   -------------------------------------------------------------------------- */
.photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--pi-warm-paper);
}

.team { margin-top: clamp(3rem, 6vw, 4.5rem); }
.team__h { font-size: var(--t-h4); margin-bottom: 1.5rem; }

.roster {
  list-style: none; padding: 0;
  display: grid; gap: 2rem clamp(1.25rem, 3vw, 2rem);
}
@media (min-width: 36rem) { .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .roster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.roster__photo,
.monogram {
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 1rem;
  border-radius: var(--radius-md);
}
.roster__photo { object-fit: cover; background: var(--pi-warm-paper); }
/* no headshot yet: initials on a charcoal tile */
.monogram {
  display: grid; place-items: center;
  background: var(--pi-charcoal);
  color: var(--pi-orange-dark);
  font: 600 clamp(2.25rem, 5vw, 3.25rem)/1 var(--font-mono);
  letter-spacing: .06em;
}
.roster h4 { font-size: 1.125rem; letter-spacing: -.018em; }
.roster__role {
  margin-top: .3rem;
  font: 500 var(--t-meta)/1.4 var(--font-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--orange-ink);
}
.roster__bio { margin-top: .6rem; font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   11. Events — featured next event, then a ledger set like a lab schedule
   -------------------------------------------------------------------------- */
.feature {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--pi-circuit-gray);
  border-bottom: 6px solid var(--pi-orange-dark);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.feature__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--pi-charcoal); }
.feature__body {
  display: flex; flex-direction: column; align-items: flex-start; gap: .8rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
@media (min-width: 56rem) {
  .feature { flex-direction: row; }
  .feature__img { width: 48%; flex: none; aspect-ratio: auto; min-height: 21rem; }
  .feature__body { flex: 1; justify-content: center; }
}
.feature__kick {
  display: flex; align-items: center; gap: .55rem;
  font: 600 var(--t-meta)/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange-ink);
}
.feature__meta {
  font: 400 var(--t-meta)/1.5 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.feature h3 { font-size: var(--t-h3); }
.feature__blurb { color: var(--ink-2); font-size: var(--t-sm); max-width: 40ch; }
.feature .btn { margin-top: .5rem; }

.ledger { list-style: none; padding: 0; border-top: 1px solid var(--rule); }
.ledger > li { border-bottom: 1px solid var(--rule); }

.lrow {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 1rem 1.35rem;
  padding: 1.6rem 0;
  align-items: start;
  transition: background-color var(--dur) var(--ease);
}
@media (min-width: 56rem) {
  .lrow { grid-template-columns: 82px minmax(0, 1fr) auto; gap: 2rem; align-items: center; }
  .lrow:hover { background: #fff; box-shadow: 0 0 0 var(--gut) #fff; }
}

.ldate {
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  padding: .5rem .25rem .45rem;
  text-align: center;
  font-family: var(--font-mono);
  line-height: 1;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ldate b { display: block; font-size: 1.625rem; font-weight: 600; letter-spacing: -.02em; }
.ldate span { display: block; margin-top: .3rem; font-size: .6875rem; letter-spacing: .12em; color: var(--ink-2); }
.lrow:hover .ldate { background: var(--pi-orange-dark); border-color: var(--pi-orange-dark); color: var(--pi-black); }
.lrow:hover .ldate span { color: rgba(0, 0, 0, .72); }

.lrow .tag { margin-bottom: .5rem; }
.lrow h3 { font-size: 1.375rem; letter-spacing: -.024em; }
.lrow__where {
  margin-top: .5rem;
  font: 400 var(--t-meta)/1.55 var(--font-mono);
  color: var(--ink-2);
}
.lrow__act { grid-column: 2; }
@media (min-width: 56rem) { .lrow__act { grid-column: 3; justify-self: end; } }

.ledger--past .lrow { padding: 1.15rem 0; }
.ledger--past .ldate { border-style: dashed; opacity: .72; }
.ledger--past h3 { font-size: 1.125rem; }

.past summary {
  cursor: pointer;
  padding: .5rem 0;
  font: 500 var(--t-meta)/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  list-style: none;
}
.past summary::-webkit-details-marker { display: none; }
.past summary::before { content: "+ "; color: var(--orange-ink); }
.past[open] summary::before { content: "− "; }
.past summary:hover { color: var(--ink); }
.past .ledger { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   12. Contact — definition rows
   -------------------------------------------------------------------------- */
.deflist { border-top: 1px solid var(--rule); }
.deflist > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.deflist dt { font: 500 var(--t-meta)/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.deflist dd { margin: 0; font-size: var(--t-sm); overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   13. Footer, drawing title block
   -------------------------------------------------------------------------- */
.foot { background: var(--pi-charcoal); color: var(--ink-dark-2); font-size: var(--t-sm); }
.foot a { text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--pi-orange-dark); text-decoration-thickness: 2px; }

.foot__top { display: grid; gap: 2.5rem; padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem; }
@media (min-width: 56rem) { .foot__top { grid-template-columns: 300px repeat(2, minmax(0, 1fr)); gap: 3rem; } }
.foot__brand img { height: 46px; width: auto; margin-bottom: 1.25rem; }
.foot__brand p { max-width: 34ch; line-height: 1.6; }
.foot h2 {
  font: 500 var(--t-meta)/1 var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dark-3);
  margin-bottom: 1rem;
}
.foot ul { list-style: none; padding: 0; }
.foot li + li { margin-top: .6rem; }

/* the title block, borrowed from a drawing sheet */
.titleblock {
  display: grid;
  border: 1px solid var(--rule-dark);
  border-radius: 4px;
  margin-bottom: 1.75rem;
  overflow: hidden;
}
@media (min-width: 44rem) { .titleblock { grid-template-columns: 2fr 1fr 1fr; } }
.titleblock > div { padding: .7rem .9rem .75rem; border-top: 1px solid var(--rule-dark); }
.titleblock > div:first-child { border-top: 0; }
@media (min-width: 44rem) {
  .titleblock > div { border-top: 0; border-left: 1px solid var(--rule-dark); }
  .titleblock > div:first-child { border-left: 0; }
}
.titleblock dt { font: 400 .625rem/1.4 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-dark-3); }
.titleblock dd { margin: .3rem 0 0; font: 500 var(--t-meta)/1.4 var(--font-mono); color: var(--ink-dark); }

.foot__legal {
  border-top: 1px solid var(--rule-dark);
  padding-block: 1.5rem 2.5rem;
  font: 400 .8125rem/1.65 var(--font-sans);
  color: var(--ink-dark-3);
}
.foot__legal p { max-width: 78ch; }
.foot__legal p + p { margin-top: .8rem; }

/* --------------------------------------------------------------------------
   14. Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   15. Print
   -------------------------------------------------------------------------- */
@media print {
  .ticker, .masthead, .foot__top, .hero__field { display: none !important; }
  body { font-size: 11pt; color: #000; }
  .dark { background: #fff !important; color: #000 !important; }
  .dark h1, .dark h2, .dark h3, .dark h4 { color: #000 !important; }
  a { text-decoration: underline; }
}