/* ==========================================================================
   SoMAI — CS1700 · Society of Minds: AI for Everyone
   Fall 2026 course site.

   Identity is documented in course/assets/brand/BRAND.md. Every value here
   matches the slide theme (course/theme/somai.css) so the deck and the site
   read as one system.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..800,0..100,0..1&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --ground:  #eff0e4;
  --paper:   #f7f8f0;
  --wash:    #e5e8d7;
  --ink:     #14212a;
  --slate:   #3e5761;
  --muted:   #75858c;
  --rule:    #cdd2c2;

  --teal:    #2b6f7d;
  --moss:    #5f9c41;
  --amber:   #c07a2c;
  --plum:    #8c474d;
  --indigo:  #4a5e86;
  --nu-red:  #c8102e;

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:  'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono:  'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;

  --measure: 34rem;
  --gut: clamp(1.5rem, 5vw, 5rem);
  --maxw: 76rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--teal); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

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

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: 0.7rem 1.1rem; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

/* --- The society rule: the brand signature -------------------------------
   A row of small coloured dots that reads as a line at a distance and
   resolves into individuals up close. Minsky's thesis as an ornament.      */

.society-rule {
  height: 7px;
  background-image:
    radial-gradient(circle at 3.5px 50%,  var(--teal)   0 3.5px, transparent 3.5px),
    radial-gradient(circle at 21.5px 50%, var(--moss)   0 3.5px, transparent 3.5px),
    radial-gradient(circle at 39.5px 50%, var(--amber)  0 3.5px, transparent 3.5px),
    radial-gradient(circle at 57.5px 50%, var(--plum)   0 3.5px, transparent 3.5px),
    radial-gradient(circle at 75.5px 50%, var(--indigo) 0 3.5px, transparent 3.5px);
  background-size: 90px 7px;
  background-repeat: repeat-x;
}

/* --- Nav ----------------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(239, 240, 228, 0.92);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav-in {
  max-width: var(--maxw); margin: 0 auto; padding: 0.6rem var(--gut);
  display: flex; align-items: center; gap: 1.4rem;
}
.nav-brand {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--mono); font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; margin-right: auto;
}
.nav-brand img { width: 30px; height: 30px; border-radius: 50%; }
.nav-links { display: flex; gap: 1.35rem; flex-wrap: wrap; }
.nav-links a {
  font-family: var(--mono); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--slate); text-decoration: none;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--ink); border-bottom-color: var(--teal); }
@media (max-width: 47rem) { .nav-links { display: none; } }

/* --- Hero ---------------------------------------------------------------- */

.hero {
  background: var(--ink);
  color: var(--paper);
  border-top: 8px solid var(--nu-red);
  padding-block: clamp(3rem, 8vw, 6rem);
  overflow: hidden;
}
.hero-in {
  max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut);
  display: grid; grid-template-columns: 1.25fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
@media (max-width: 56rem) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-art { order: -1; max-width: 300px; margin-inline: auto; }
}

.hero-eyebrow {
  font-family: var(--mono); font-size: 0.76rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: #8fb0b4; margin: 0 0 1.1rem;
}
.hero h1 {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 144, 'SOFT' 40, 'WONK' 1;
  font-size: clamp(2.5rem, 6.2vw, 4.4rem);
  font-weight: 600; line-height: 1.05; letter-spacing: -0.02em;
  margin: 0 0 1.1rem;
}
.hero-lede {
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  line-height: 1.5; color: #c2ced1; max-width: 32rem; margin: 0 0 2rem;
}
.hero-lede strong { color: var(--paper); font-weight: 600; }

.facts { display: flex; flex-wrap: wrap; gap: 0 2.2rem; margin: 0; }
.facts div { margin-bottom: 0.9rem; }
.facts dt {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: #7e8f96;
  margin-bottom: 0.2rem;
}
.facts dd { margin: 0; font-size: 0.95rem; color: var(--paper); }

.hero-art { position: relative; aspect-ratio: 1; }
.hero-art canvas { width: 100%; height: 100%; display: block; }
.hero-art img { /* no-JS / reduced-motion fallback */
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover;
}
.hero-art.js-on img { display: none; }

/* --- Sections ------------------------------------------------------------ */

.sec { padding-block: clamp(3.2rem, 7vw, 5.5rem); }
.sec-alt { background: var(--paper); }
.sec-dark { background: var(--ink); color: var(--paper); }

.sec-head { margin-bottom: 2.4rem; }
.eyebrow {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--teal); margin: 0 0 0.7rem;
}
.sec-dark .eyebrow { color: var(--moss); }

h2 {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 90, 'SOFT' 30, 'WONK' 1;
  font-size: clamp(1.85rem, 3.6vw, 2.7rem);
  font-weight: 600; line-height: 1.14; letter-spacing: -0.015em;
  margin: 0 0 0.55rem; display: inline-block; padding-right: 0.5em;
}
.sec-head .society-rule { max-width: 22rem; }

h3 {
  font-family: var(--sans); font-size: 1.13rem; font-weight: 600;
  color: var(--ink); margin: 0 0 0.4rem;
}
.sec-dark h3 { color: var(--paper); }

.lede { font-size: 1.16rem; line-height: 1.55; max-width: var(--measure); color: var(--slate); }
.sec-dark .lede { color: #c2ced1; }
p { max-width: var(--measure); }
.sec-dark p { color: #cfd8d8; }

/* --- Premise / bet ------------------------------------------------------- */

.bet {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.8rem; margin-top: 2.6rem;
}
.bet > div { border-top: 3px solid var(--teal); padding-top: 1rem; }
.bet > div:nth-child(2) { border-top-color: var(--amber); }
.bet > div:nth-child(3) { border-top-color: var(--indigo); }
.bet p { font-size: 0.99rem; color: var(--slate); margin: 0; max-width: none; }

.pull {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 144, 'SOFT' 40, 'WONK' 1;
  font-size: clamp(1.6rem, 3.4vw, 2.35rem); font-weight: 500;
  line-height: 1.28; color: var(--ink); max-width: 30rem;
  margin: 2.8rem 0 0; padding-left: 1.4rem; border-left: 4px solid var(--plum);
}
.sec-dark .pull { color: var(--paper); }

/* --- Schedule ------------------------------------------------------------ */

.unit {
  display: flex; align-items: center; gap: 1rem;
  margin: 2.4rem 0 0.6rem;
}
.unit:first-child { margin-top: 0; }
.unit-name {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal);
  white-space: nowrap;
}
.unit .society-rule { flex: 1; }

.row {
  border-bottom: 1px solid var(--rule);
}
.row summary {
  display: grid; grid-template-columns: 3rem 6.5rem 1fr auto;
  gap: 1rem; align-items: baseline;
  padding: 0.95rem 0; cursor: pointer; list-style: none;
}
.row summary::-webkit-details-marker { display: none; }
.row summary:hover .row-title { color: var(--teal); }
.row-n {
  font-family: var(--mono); font-size: 0.85rem; font-weight: 600;
  color: var(--muted);
}
.row-date {
  font-family: var(--mono); font-size: 0.8rem; color: var(--slate);
  white-space: nowrap;
}
.row-title {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 40, 'SOFT' 20, 'WONK' 0;
  font-size: 1.16rem; font-weight: 600; line-height: 1.3;
}
.row-flag {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--moss); border: 1px solid currentColor;
  padding: 0.15rem 0.45rem; border-radius: 2px; white-space: nowrap;
}
.row-body {
  padding: 0 0 1.1rem calc(3rem + 6.5rem + 2rem);
  max-width: 46rem; color: var(--slate); font-size: 0.99rem;
}
.row-body p { max-width: none; margin: 0; }
.row[open] .row-title { color: var(--teal); }
.row-break summary { cursor: default; opacity: 0.6; }
.row-break .row-title { font-style: italic; font-weight: 400; }

@media (max-width: 44rem) {
  .row summary { grid-template-columns: 2.2rem 1fr; row-gap: 0.2rem; }
  .row-date { grid-column: 2; }
  .row-title { grid-column: 2; }
  .row-flag { display: none; }
  .row-body { padding-left: 2.2rem; }
}

.sched-note {
  font-size: 0.92rem; color: var(--muted); margin-top: 1.6rem;
  max-width: 42rem;
}

/* --- Showcase ------------------------------------------------------------ */

.showcase-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.4rem; margin-top: 2.4rem;
}
.slot {
  border: 1.5px dashed #3c4e57; border-radius: 4px;
  padding: 1.5rem 1.3rem; min-height: 10.5rem;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.slot-n {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--moss); margin-bottom: auto;
}
.slot h3 { font-size: 1.02rem; margin-bottom: 0.3rem; }
.slot p { font-size: 0.9rem; color: #9fadad; margin: 0; max-width: none; }

/* --- Glossary teaser ----------------------------------------------------- */

.terms { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 2rem 0; }
.term-chip {
  font-family: var(--mono); font-size: 0.78rem;
  border: 1px solid var(--rule); background: var(--ground);
  padding: 0.35rem 0.7rem; border-radius: 2px; color: var(--slate);
  text-decoration: none;
}
.term-chip:hover { border-color: var(--teal); color: var(--teal); }

.btn {
  display: inline-block; font-family: var(--mono); font-size: 0.78rem;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); text-decoration: none;
  padding: 0.75rem 1.3rem; border-radius: 2px; border: 2px solid var(--ink);
}
.btn:hover { background: transparent; color: var(--ink); }
.sec-dark .btn { background: var(--moss); border-color: var(--moss); color: var(--ink); }
.sec-dark .btn:hover { background: transparent; color: var(--moss); }

/* --- Books --------------------------------------------------------------- */

.books { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.8rem; margin-top: 2.2rem; }
.book img { width: 74px; border: 1px solid var(--rule); margin-bottom: 0.7rem; }
.book h3 { font-size: 0.99rem; line-height: 1.35; }
.book p { font-size: 0.88rem; color: var(--slate); margin: 0.3rem 0 0; max-width: none; }
.book .req {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--plum); display: block; margin-bottom: 0.35rem;
}

/* Resources: books, then articles and videos as link lists. The subheads are
   mono so they read as labels rather than competing with the section h2. */

.res-head {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--teal);
  margin: 3rem 0 0; padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule);
}
.sec-head + .res-head { margin-top: 0; }

.res-list { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.res + .res { margin-top: 1.4rem; }
.res > a {
  font-family: var(--serif); font-size: 1.12rem; font-weight: 600;
  line-height: 1.3; text-decoration: none;
  border-bottom: 1px solid rgba(43,111,125,.35);
}
.res > a:hover { border-bottom-color: var(--ink); }
.res-meta {
  display: block; font-family: var(--mono); font-size: 0.74rem;
  letter-spacing: .04em; color: var(--muted); margin-top: 0.3rem;
}
.res p { font-size: 0.92rem; color: var(--slate); margin: 0.5rem 0 0; }
.res-vid > a::before {
  content: "\25B8"; color: var(--amber); margin-right: 0.45rem;
  border-bottom: none;
}

/* --- Info / instructor --------------------------------------------------- */

.info { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 2.4rem; margin-top: 2rem; }
.info dt {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 0.25rem;
}
.info dd { margin: 0 0 1rem; }

.who { display: flex; gap: 1.4rem; align-items: flex-start; }
.who img { width: 108px; border-radius: 3px; flex-shrink: 0; }

.grades { list-style: none; padding: 0; margin: 0.6rem 0 0; }
.grades li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--rule); max-width: 22rem;
}
.grades b { font-family: var(--mono); font-weight: 600; }

/* --- Footer -------------------------------------------------------------- */

.foot {
  background: var(--ink); color: #8fa0a4;
  padding-block: 2.6rem; font-size: 0.87rem;
}
.foot .wrap { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: center; }
.foot img { width: 34px; height: 34px; border-radius: 50%; }
.foot a { color: #b9c8c9; }
.foot .spacer { margin-left: auto; }
.foot p { max-width: 30rem; margin: 0; }

/* --- Glossary page ------------------------------------------------------- */

.gl-search {
  display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center;
  margin: 2rem 0 1rem; position: sticky; top: 3.4rem;
  background: var(--ground); padding: 0.9rem 0; z-index: 20;
  border-bottom: 1px solid var(--rule);
}
.gl-search input {
  flex: 1; min-width: 14rem;
  font-family: var(--sans); font-size: 1rem;
  padding: 0.7rem 0.9rem; border: 1.5px solid var(--rule);
  border-radius: 3px; background: var(--paper); color: var(--ink);
}
.gl-search input:focus { border-color: var(--teal); outline: none; }
.gl-count { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); }

.gl-letter {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.2em; color: var(--teal);
  margin: 2.4rem 0 0.8rem; padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
}
.gl-entry { margin: 0 0 1.7rem; max-width: 44rem; }
.gl-term {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 60, 'SOFT' 25, 'WONK' 1;
  font-size: 1.3rem; font-weight: 600; margin: 0 0 0.25rem;
}
.gl-def { margin: 0 0 .7rem; color: var(--slate); max-width: none; }
.gl-def:last-of-type { margin-bottom: 0; }
.gl-def em { color: var(--slate); }
.gl-src {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em;
  color: var(--muted); margin-top: 0.4rem; display: block;
}
.gl-empty { color: var(--muted); font-style: italic; padding: 2rem 0; }
[hidden] { display: none !important; }

/* --- Policies ------------------------------------------------------------ */

.pol h3 {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 50, 'SOFT' 25, 'WONK' 1;
  font-size: 1.42rem; font-weight: 600;
  margin: 2.6rem 0 .5rem;
}
.pol h3:first-child { margin-top: 0; }
.pol p, .pol ul { max-width: 42rem; }
.pol ul { padding-left: 1.15rem; }
.pol li { margin-bottom: .4rem; }
.pol li::marker { color: var(--teal); }

/* the three AI provenance badges — CS3200 format: plain grid, no rules */
.badges {
  list-style: none; padding: 0; margin: 1.35rem 0 1.75rem;
  display: grid; gap: 1.15rem; max-width: 68ch;
}
.badges li {
  display: grid; grid-template-columns: 2.25rem 1fr; gap: .9rem;
  align-items: start;
}
.badges img { width: 2.25rem; height: auto; }
.badges b {
  display: block; font-family: var(--sans);
  font-size: 1rem; font-weight: 700; line-height: 1.3; margin-bottom: .2rem;
}
.badges span { display: block; font-size: .94rem; line-height: 1.5; color: var(--slate); }
.badges .b-ai    { color: #c8102e; }
.badges .b-loop  { color: #b57400; }
.badges .b-human { color: #1e8449; }

.callout {
  border-left: 4px solid var(--teal);
  background: var(--wash);
  padding: 1rem 1.25rem; margin: 1.6rem 0; max-width: 42rem;
  border-radius: 0 3px 3px 0;
}
.callout p { margin: 0; max-width: none; }

/* --- Hero instructor card ------------------------------------------------ */

.whocard {
  display: grid; grid-template-columns: 6.6rem 1fr; gap: 1.1rem;
  align-items: stretch; padding: .85rem 1.1rem;
  background: rgba(247, 248, 240, .06);
  border: 1px solid rgba(199, 210, 194, .22);
  border-left: 3px solid var(--nu-red);
  border-radius: 4px; margin-bottom: 1.7rem; max-width: 27rem;
}
.whocard img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; border-radius: 3px; }
.whocard b {
  display: block; font-family: var(--serif);
  font-variation-settings: 'opsz' 40, 'SOFT' 25, 'WONK' 1;
  font-size: 1.05rem; font-weight: 600; color: var(--paper); line-height: 1.2;
}
.whocard .role {
  display: block; color: #9db0b4; font-size: .78rem; margin-bottom: .4rem;
}
.whocard a {
  display: block; font-family: var(--mono); font-size: .68rem; font-weight: 500;
  line-height: 1.65; color: #9fd0d6; overflow-wrap: anywhere;
}
.whocard a:hover { color: var(--paper); }
.whocard .oh {
  display: block; margin: .4rem 0 .28rem;
  font-size: .78rem; line-height: 1.4; color: #c2ced1;
}
@media (max-width: 30rem) { .whocard { grid-template-columns: 5rem 1fr; gap: .9rem; } }

/* grading split bar */
.split { display: flex; height: 9px; border-radius: 99px; overflow: hidden; margin: .2rem 0 .7rem; max-width: 22rem; }
.split i { display: block; }
.split .hw   { background: var(--teal); }
.split .proj { background: var(--amber); }
.split-key { display: flex; gap: 1.2rem; font-family: var(--mono); font-size: .78rem; font-weight: 500; }
.split-key span { display: inline-flex; align-items: center; gap: .4rem; color: var(--slate); }
.split-key span::before { content: ""; width: .62rem; height: .62rem; border-radius: 2px; }
.split-key .k-hw::before   { background: var(--teal); }
.split-key .k-proj::before { background: var(--amber); }

/* --- Hero link buttons --------------------------------------------------- */

.herolinks { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.7rem; }
.linkbtn {
  display: inline-flex; align-items: center;
  padding: .58rem 1.05rem;
  border: 1px solid rgba(199, 210, 194, .34);
  border-radius: 3px;
  color: var(--paper); text-decoration: none;
  font-family: var(--mono); font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  transition: background .15s, border-color .15s, color .15s;
}
.linkbtn:hover { background: var(--teal); border-color: var(--teal); color: #fff; }

/* three-rule list — prose wraps badly in a narrow column, so the AI rules
   get one line each instead */
.rules { list-style: none; padding: 0; margin: 0 0 .8rem; }
.rules li {
  font-size: .96rem; line-height: 1.45;
  padding-left: .9rem; margin-bottom: .55rem; position: relative;
}
.rules li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--teal);
}
.rules b { font-weight: 700; color: var(--teal); }

/* schedule: per-session bullets and a due marker in the summary row */
.row-points { list-style: none; padding: 0; margin: 0; }
.row-points li {
  position: relative; padding-left: .95rem; margin-bottom: .4rem;
  font-size: .97rem; line-height: 1.45; color: var(--slate);
}
.row-points li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--teal);
}

.row-due {
  text-align: right; white-space: nowrap; line-height: 1.3;
}
.row-due b {
  display: block; font-family: var(--mono); font-size: .66rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--amber);
}
.row-due i {
  display: block; font-family: var(--mono); font-size: .64rem; font-style: normal;
  color: var(--muted); margin-top: .1rem;
}
@media (max-width: 44rem) { .row-due { display: none; } }

/* grade scale — CS3200 format, SoMAI palette */
.gradebox { display: grid; grid-template-columns: 1fr minmax(14rem, 20rem); gap: 2.4rem; align-items: start; }
@media (max-width: 46rem) { .gradebox { grid-template-columns: 1fr; gap: 1.6rem; } }

.scale { border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: .84rem; font-weight: 500; line-height: 1.4; }
.scale caption {
  text-align: left; font-family: var(--mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--teal); padding-bottom: .7rem;
}
.scale th, .scale td { padding: .38rem .75rem .38rem 0; text-align: left; border-bottom: 1px solid var(--rule); }
.scale th {
  font-size: .66rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.scale tbody tr:hover { background: var(--wash); }

/* bullet lists inside a glossary definition */
.gl-list { margin: .2rem 0 .7rem; padding-left: 1.1rem; color: var(--slate); }
.gl-list li { margin-bottom: .3rem; }
.gl-list li::marker { color: var(--teal); }

/* ── AI in the Workplace ───────────────────────────────────────────────────
   Generated page (workplace.html). Accent use follows BRAND.md: teal is
   structural, and indigo marks "Where the evidence disagrees" because that
   block *is* the discussion register — argue about it. The other accents
   keep their own registers and stay out of here. */

.wp-intro { max-width: var(--measure); color: var(--slate); margin-top: 1rem; }

.wp-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 1rem 1.6rem; margin: 2.6rem 0 0; max-width: 42rem;
  border-top: 1px solid var(--rule); padding-top: 1.4rem;
}
.wp-stats div { display: flex; flex-direction: column; gap: 0.15rem; }
/* Counts are machine metadata, not human argument: sans, not Fraunces.
   BRAND.md's type split says so, and a serif hero figure is a known
   data-viz anti-pattern. */
.wp-stats b {
  font-family: var(--sans); font-size: 2rem; line-height: 1;
  font-weight: 600; letter-spacing: -0.02em; color: var(--teal);
  font-variant-numeric: tabular-nums;
}
.wp-stats span {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}


/* start-here rail */
.wp-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.3rem; margin-top: 2.4rem;
}
.wp-card {
  border: 1px solid #3c4e57; border-radius: 4px; padding: 1.3rem 1.2rem;
  text-decoration: none; display: flex; flex-direction: column;
  transition: border-color .15s, background .15s;
}
.wp-card:hover { border-color: var(--moss); background: #1b2b34; }
.wp-card-sec {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--moss); margin: 0 0 0.55rem;
}
.wp-card h3 { font-size: 1.04rem; margin: 0 0 0.5rem; line-height: 1.25; }
.wp-card-t { font-size: 0.86rem; color: #9fadad !important; margin: 0; max-width: none; }

/* search */
.wp-search {
  display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center;
  margin: 0 0 2.4rem; position: sticky; top: 3.4rem;
  background: var(--ground); padding: 0.9rem 0; z-index: 20;
  border-bottom: 1px solid var(--rule);
}
.wp-search input {
  flex: 1; min-width: 14rem; font-family: var(--sans); font-size: 1rem;
  padding: 0.7rem 0.9rem; border: 1.5px solid var(--rule);
  border-radius: 3px; background: var(--paper); color: var(--ink);
}
.wp-search input:focus { border-color: var(--teal); outline: none; }
.wp-count, .wp-empty {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}

/* sectors and entries */

.wp-entry {
  border-left: 2px solid var(--rule); padding: 0 0 0 1.5rem;
  margin: 0 0 2.6rem; max-width: 48rem; scroll-margin-top: 7rem;
}
.wp-entry:target, .wp-entry:hover { border-left-color: var(--teal); }
.wp-role {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 60, 'SOFT' 25, 'WONK' 1;
  font-size: 1.42rem; font-weight: 600; line-height: 1.2; margin: 0 0 0.45rem;
}
.wp-by {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--muted); margin: 0 0 0.3rem; max-width: none;
}
.wp-by b { color: var(--teal); font-weight: 500; }
.wp-emp {
  font-size: 0.82rem; color: var(--muted); margin: 0 0 1.2rem; max-width: none;
}
.wp-emp span {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin-right: 0.4rem;
}

.wp-block { margin: 0 0 1.1rem; }
.wp-block h4 {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal);
  margin: 0 0 0.35rem;
}
.wp-block p { margin: 0; color: var(--slate); max-width: none; line-height: 1.6; }

/* the discussion register */
.wp-blk-disagree {
  border-left: 2px solid var(--indigo); padding: 0.1rem 0 0.1rem 1rem;
  margin-top: 1.4rem; background: transparent;
}
.wp-blk-disagree h4 { color: var(--indigo); }

.wp-src { margin-top: 1.2rem; }
.wp-src summary {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); cursor: pointer;
  padding: 0.3rem 0;
}
.wp-src summary:hover { color: var(--teal); }
.wp-src ol {
  margin: 0.7rem 0 0; padding-left: 1.4rem;
  font-size: 0.84rem; color: var(--muted);
}
.wp-src li { margin-bottom: 0.5rem; line-height: 1.5; }
.wp-src a { color: var(--slate); text-decoration-color: var(--rule); }
.wp-src a:hover { color: var(--teal); }

/* contributor index */
.wp-index {
  list-style: none; margin: 2.2rem 0 0; padding: 0;
  columns: 2; column-gap: 2.4rem;
}
.wp-index li {
  break-inside: avoid; margin-bottom: 0.75rem; font-size: 0.88rem;
  color: var(--muted); line-height: 1.45;
}
.wp-index b { display: block; color: var(--ink); font-weight: 600; font-size: 0.95rem; }
.wp-index a { color: var(--slate); text-decoration-color: var(--rule); }
.wp-index a:hover { color: var(--teal); }
.wp-note {
  font-size: 0.82rem; color: var(--muted); max-width: var(--measure);
  margin-top: 2.4rem; border-top: 1px solid var(--rule); padding-top: 1.1rem;
}

@media (max-width: 40rem) {
  .wp-index { columns: 1; }
  .wp-entry { padding-left: 1rem; }
  /* let the role counter drop below the field instead of being clipped */
  .wp-search input { flex: 1 0 100%; min-width: 0; }
  .wp-stats b { font-size: 1.8rem; }
}

.slot-live {
  text-decoration: none; border-style: solid; border-color: var(--moss);
  transition: background .15s;
}
.slot-live:hover { background: #1b2b34; }

/* ── Workplace: figures, charts, pull-quotes ───────────────────────────────
   Chart colours are a chart-specific register, NOT the editorial accents.
   BRAND.md's five accents fail as a categorical chart palette on measurement,
   not taste: moss and amber collapse to ΔE 3.3 under deuteranopia, and teal,
   plum and indigo sit below the chroma floor. The steps used here are drawn
   from the same petrol and amber hues and validated against the sage ground.
   Every mark is direct-labelled, so no value is carried by colour alone. */

.wp-fig { margin: 1.4rem 0 1.5rem; }
.wp-fig-t {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
  margin: 0 0 0.9rem;
}
.wp-chart { width: 100%; height: auto; display: block; overflow: visible; }
.wp-chart .c-lab {
  font-family: var(--sans); font-size: 12.5px; fill: var(--slate);
  dominant-baseline: auto;
}
.wp-chart .c-val {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  fill: var(--ink); dominant-baseline: auto;
}
.wp-chart .c-zero {
  font-family: var(--mono); font-size: 10px; fill: var(--muted);
}
.wp-chart rect { transition: opacity .12s; }
.wp-chart:hover rect { opacity: 0.72; }
.wp-chart rect:hover { opacity: 1; }
.wp-fig-s {
  font-size: 0.74rem; line-height: 1.5; color: var(--muted);
  margin: 0.9rem 0 0; border-top: 1px solid var(--rule); padding-top: 0.55rem;
  max-width: 34rem;
}

/* quotations — plum, per BRAND.md's register for quoted material */
.wp-quote {
  margin: 1.5rem 0; padding: 0 0 0 1.2rem;
  border-left: 2px solid var(--plum);
}
.wp-quote p {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 40, 'SOFT' 30, 'WONK' 1;
  font-size: 1.22rem; line-height: 1.38; color: var(--plum);
  margin: 0 0 0.45rem; max-width: 30rem;
}
.wp-quote p::before { content: '\201C'; }
.wp-quote p::after  { content: '\201D'; }
/* Sentence case, not uppercase: the citation now carries the context a
   pull-quote needs to stand on its own, and all-caps cannot hold a sentence. */
.wp-quote cite {
  display: block; font-family: var(--mono); font-size: 0.74rem;
  line-height: 1.5; letter-spacing: 0.01em; color: var(--muted);
  font-style: normal; max-width: 30rem;
}

.wp-hero-chart { margin: 2.4rem 0 0; max-width: 42rem; }

@media (max-width: 40rem) {
  .wp-chart .c-lab { font-size: 15px; }
  .wp-chart .c-val { font-size: 14px; }
  .wp-quote p { font-size: 1.1rem; }
}


/* ── Workplace: hierarchy ──────────────────────────────────────────────────
   workplace.html is a chooser (intro + sector cards + searchable index);
   each sector gets its own page of full role write-ups. */

.wp-crumb {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; margin: 0 0 1.6rem; max-width: none;
}
.wp-crumb a { color: var(--muted); text-decoration: none; }
.wp-crumb a:hover { color: var(--teal); }
.wp-crumb a::before { content: '\2190\00a0'; }

.wp-sec-top { padding-bottom: 0; }
.wp-sec-body { padding-top: clamp(2rem, 4vw, 3rem); }

/* the sector card: count as eyebrow, name as the headline, roles as the tease */
.wp-card-sec { letter-spacing: 0.14em; }
.wp-card h3 { font-size: 1.14rem; margin-bottom: 0.55rem; }

/* flat searchable role index */
.wp-rows { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.wp-row {
  display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; align-items: baseline;
  justify-content: space-between;
  padding: 0.62rem 0; border-bottom: 1px solid var(--rule);
}
.wp-row:first-child { border-top: 1px solid var(--rule); }
.wp-row a {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 40, 'SOFT' 25, 'WONK' 1;
  font-size: 1.04rem; font-weight: 600; color: var(--ink);
  text-decoration: none;
}
.wp-row a:hover { color: var(--teal); text-decoration: underline;
  text-decoration-color: var(--teal); }
.wp-row-sec {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}

/* previous / all / next sector */
.wp-nextnav-in {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
}
.wp-np {
  display: flex; flex-direction: column; gap: 0.2rem;
  border: 1px solid var(--rule); border-radius: 4px;
  padding: 0.9rem 1rem; text-decoration: none; background: var(--ground);
}
.wp-np:hover { border-color: var(--teal); }
.wp-np span {
  font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.wp-np b { font-size: 0.95rem; color: var(--ink); font-weight: 600; }
.wp-np:hover b { color: var(--teal); }
.wp-np-next { text-align: right; }
.wp-np-all { text-align: center; }

@media (max-width: 40rem) {
  .wp-np, .wp-np-next, .wp-np-all { text-align: left; }
  .wp-row { justify-content: flex-start; }
}

/* single headline number — a stat figure, not a one-bar chart */
.wp-stat {
  margin: 1.5rem 0; padding: 0 0 0 1.2rem;
  border-left: 2px solid var(--teal);
}
.wp-stat b {
  display: block; font-family: var(--sans); font-size: 2.5rem; line-height: 1;
  font-weight: 600; letter-spacing: -0.02em; color: var(--teal);
  font-variant-numeric: tabular-nums;
}
.wp-stat figcaption {
  font-size: 0.98rem; color: var(--slate); margin-top: 0.5rem;
  max-width: 26rem; line-height: 1.45;
}
.wp-stat-s {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
  margin: 0.5rem 0 0; max-width: none;
}

/* our own distillation — no quote marks, because nobody said it */
.wp-take {
  margin: 1.5rem 0 !important; padding: 0.9rem 1.1rem;
  background: var(--wash); border-radius: 4px;
  font-size: 1.04rem; line-height: 1.5; color: var(--ink) !important;
  max-width: 34rem !important; font-weight: 500;
}

@media (max-width: 40rem) { .wp-stat b { font-size: 2.1rem; } }

/* the framework quotation that opens the workplace resource */
.wp-quote-lead { margin: 2rem 0 2.2rem; max-width: 40rem; }
.wp-quote-lead p { font-size: 1.42rem; line-height: 1.34; max-width: 34rem; }
.wp-quote-lead cite { font-size: 0.76rem; max-width: 32rem; }
.wp-quote-lead cite i { font-style: italic; }
@media (max-width: 40rem) { .wp-quote-lead p { font-size: 1.2rem; } }

/* one-line summary: what a student scanning 39 roles actually reads first */
.wp-short {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 40, 'SOFT' 25, 'WONK' 1;
  font-size: 1.1rem; line-height: 1.4; color: var(--teal);
  margin: 0.15rem 0 0.7rem; max-width: 32rem;
}
.wp-row-main { display: block; flex: 1 1 22rem; }
.wp-row-short {
  display: block; font-family: var(--sans); font-size: 0.86rem;
  color: var(--muted); line-height: 1.4; margin-top: 0.15rem;
  max-width: 40rem;
}

/* "What the job is" leads each entry: slightly larger than the blocks that
   follow it, because it is the part a student browsing careers reads first. */
.wp-blk-role p { font-size: 1.04rem; color: var(--ink); }

/* ── Workplace: embedded explainer + podcast ───────────────────────────────
   Two equal columns; the audio card gets a typographic panel so it holds the
   same height as the video rather than sitting as a lone 40px control. */

.wp-media-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1.6rem; margin-top: 2.4rem;
}
.wp-mediacard {
  margin: 0; display: flex; flex-direction: column;
  border: 1px solid var(--rule); border-radius: 5px;
  background: var(--ground); overflow: hidden;
}
.wp-mediacard video {
  width: 100%; aspect-ratio: 16 / 9; display: block;
  background: var(--ink); object-fit: cover;
}
.wp-mediacard figcaption {
  margin-top: auto; display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem;
  align-items: baseline; justify-content: space-between;
  padding: 0.85rem 1.1rem; border-top: 1px solid var(--rule);
}
.wp-mediacard figcaption b {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 40, 'SOFT' 25, 'WONK' 1;
  font-size: 1.05rem; font-weight: 600; color: var(--ink);
}
.wp-mediacard figcaption span {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}

/* audio card */
/* flex rather than a fixed ratio, so this card ends up the same height as the
   video card even though it also carries an audio control underneath */
.wp-audio-art {
  flex: 1; min-height: 11rem; background: var(--ink); color: var(--paper);
  padding: 1.5rem 1.4rem; display: flex; flex-direction: column;
  justify-content: center; gap: 0.5rem;
}
.wp-audio-kicker {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--moss); margin: 0; max-width: none;
}
.wp-audio-title {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 60, 'SOFT' 25, 'WONK' 1;
  font-size: 1.7rem; line-height: 1.1; font-weight: 600;
  color: var(--paper) !important; margin: 0; max-width: none;
}
.wp-audio-art .society-rule { max-width: 11rem; margin: 0.25rem 0 0.35rem; }
.wp-audio-sub {
  font-size: 0.85rem; line-height: 1.45; color: #9fadad !important;
  margin: 0; max-width: 24rem;
}
.wp-mediacard audio {
  width: calc(100% - 2.2rem); margin: 1.1rem 1.1rem 0; display: block;
}

/* centred above the two players, so it reads as the section's thesis rather
   than a footnote to them */
.wp-quote-media {
  margin: 2.4rem auto 2.8rem; max-width: 46rem;
  border-left: 0; padding: 0; text-align: center;
}
.wp-quote-media p {
  font-size: 1.58rem; line-height: 1.3; max-width: 42rem; margin: 0 auto 0.7rem;
}
.wp-quote-media cite { max-width: none; text-align: center; }

.wp-media-note {
  display: flex; gap: 0.9rem; align-items: flex-start;
  font-size: 0.82rem; line-height: 1.55; color: var(--muted);
  max-width: 44rem; margin-top: 2rem;
  border-top: 1px solid var(--rule); padding-top: 1.1rem;
}
.wp-badge { width: 42px; height: auto; flex: none; margin-top: 0.1rem; }

@media (max-width: 40rem) {
  .wp-quote-media p { font-size: 1.2rem; }
  .wp-audio-title { font-size: 1.4rem; }
}

/* contributor credit on each role row — "Researched by", so the name reads as
   a student who studied the field, not someone who works in it */
.wp-row-by {
  display: block; font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.02em; color: var(--muted); margin-top: 0.3rem;
}

@media (max-width: 40rem) { .wp-quote-media p { font-size: 1.24rem; } }

/* ── The Art of the Game ─────────────────────────────────────────────────
   The intro keeps the site's sage ground; the grid below it switches to a
   dark cabinet room, because that is what an arcade looks like. Scoped to
   .arcade-room so nothing else inherits it. */

.arcade-intro { padding-bottom: 2.2rem; }
.arcade-intro .lede { font-size: 1.22rem; line-height: 1.5; color: var(--ink); }
.arcade-intro .arcade-note {
  font-family: var(--mono); font-size: 0.86rem; line-height: 1.65;
  color: var(--slate); border-left: 2px solid var(--rule);
  padding-left: 0.95rem; margin-top: 1.6rem;
}

.arcade-room {
  background: #0b1020;
  background-image:
    radial-gradient(ellipse at 50% -10%, #17203c 0%, #0b1020 62%);
  padding-block: 2.6rem 3.4rem;
}
.arcade-kicker {
  font-family: var(--mono); font-weight: 600; letter-spacing: 0.42em;
  font-size: 1.15rem; color: #e8edff; text-align: center; margin: 0 0 0.2rem;
  text-shadow: 0 0 18px rgba(150,180,255,0.45);
}
.arcade-sub {
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: #7f8db5; text-align: center;
  margin: 0 0 1.9rem;
}

.arcade-grid {
  display: grid; gap: 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
}
.arcade-card {
  display: block; text-decoration: none; color: inherit;
  background: #121a33; border: 2px solid #2a3550; border-radius: 10px;
  padding: 0.55rem 0.55rem 0.7rem;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.arcade-card:hover, .arcade-card:focus-visible {
  border-color: #8fd0ff; transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(143,208,255,.25), 0 10px 26px rgba(0,0,0,.45);
  outline: none;
}
.arcade-screen {
  display: block; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 6px; background: #05060a;
  border: 1px solid #243150;
}
.arcade-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arcade-noart {
  display: grid; place-items: center; height: 100%;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: .15em;
  text-transform: uppercase; color: #4a5878;
}
.arcade-meta { display: block; padding: 0.6rem 0.2rem 0; }
.arcade-meta b {
  display: block; font-family: var(--mono); font-size: 0.95rem;
  font-weight: 600; color: #e8edff; line-height: 1.25;
}
.arcade-meta i {
  display: block; font-style: normal; font-family: var(--mono);
  font-size: 0.74rem; letter-spacing: .06em; color: #8c9ac4; margin-top: 0.28rem;
}
.arcade-card:hover .arcade-meta b { color: #8fd0ff; }

@media (prefers-reduced-motion: reduce) {
  .arcade-card { transition: none; }
  .arcade-card:hover { transform: none; }
}

/* ── a single game: big preview beside its artist's statement ──────────── */

.arcade-card { position: relative; }
.arcade-hit { display: block; color: inherit; text-decoration: none; }
.arcade-play {
  position: absolute; right: 0.95rem; top: 0.95rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center; text-decoration: none;
  font-size: 0.7rem; color: #0b1020; background: rgba(143,208,255,.88);
  opacity: 0; transition: opacity .15s;
}
.arcade-card:hover .arcade-play, .arcade-play:focus-visible { opacity: 1; }

.game-page .eyebrow a { color: var(--teal); text-decoration: none; }
.game-page h1 { margin-bottom: 0.1rem; }
.game-by {
  font-family: var(--mono); font-size: 0.86rem; letter-spacing: .06em;
  color: var(--slate); margin: 0 0 0.2rem;
}
.game-cols {
  display: grid; gap: 2.2rem; margin-top: 1.8rem;
  grid-template-columns: minmax(16rem, 23rem) minmax(0, 1fr);
}
@media (max-width: 54rem) { .game-cols { grid-template-columns: 1fr; } }

.game-side { position: sticky; top: 5rem; align-self: start; }
.game-shot {
  background: #0b1020; border: 2px solid #2a3550; border-radius: 10px;
  padding: 0.5rem; aspect-ratio: 16 / 10; overflow: hidden;
}
.game-shot img { width: 100%; height: 100%; object-fit: cover;
                 border-radius: 6px; display: block; }
.game-cta {
  display: block; text-align: center; margin-top: 0.9rem;
  background: var(--teal); color: #fff; text-decoration: none;
  font-family: var(--mono); font-size: 0.92rem; letter-spacing: .04em;
  padding: 0.7rem 1rem; border-radius: 7px;
}
.game-cta:hover { background: var(--ink); color: #fff; }
.game-hint {
  font-family: var(--mono); font-size: 0.74rem; color: var(--mute, #75858c);
  text-align: center; margin: 0.55rem 0 0;
}
.game-hint kbd {
  border: 1px solid var(--rule); border-radius: 3px; padding: 0 0.3rem;
  font-size: 0.72rem;
}

.game-stmt h2 { font-size: 1.22rem; margin: 0 0 0.9rem; }
.stmt-body p { margin: 0 0 0.9rem; }
.stmt-body h3 {
  font-family: var(--mono); font-size: 0.82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal);
  margin: 1.6rem 0 0.5rem;
}
.stmt-by {
  font-family: var(--mono); font-size: 0.8rem; color: var(--slate);
  border-left: 2px solid var(--rule); padding-left: 0.8rem;
}
.stmt-missing { color: var(--slate); font-style: italic; }
.stmt-body pre {
  font-family: var(--mono); font-size: 0.86rem; line-height: 1.5;
  background: var(--wash); border: 1px solid var(--rule); border-radius: 6px;
  padding: 0.85rem 1rem; margin: 0 0 1.1rem; overflow-x: auto;
}

.game-nav {
  display: flex; gap: 1rem; justify-content: space-between;
  margin-top: 2.6rem; padding-top: 1rem; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 0.82rem;
}
.game-nav a { text-decoration: none; }

/* ── Telling a Story with Data ───────────────────────────────────────────
   Deliberately not the arcade. A game is a cabinet in a dark room; a data
   story is a page in a reading room, so the shelf keeps the site's own
   ground and the cards are paper with a browser screenshot on top. */

.story-intro { padding-bottom: 1.8rem; }
.story-intro .lede { font-size: 1.22rem; line-height: 1.5; color: var(--ink); }

.story-shelf { padding-block: 2.4rem 3.4rem; }
.story-sub {
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 1.6rem;
}

.story-grid {
  display: grid; gap: 1.6rem;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}
.story-card {
  display: block; color: inherit; text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--rule); border-radius: 10px;
  padding: 0.6rem 0.6rem 0.2rem;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.story-card:hover, .story-card:focus-within {
  border-color: var(--teal); transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(20,33,42,.12);
}
.story-screen {
  display: block; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 6px; background: var(--wash); border: 1px solid var(--rule);
}
.story-screen img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  display: block;
}
.story-noart {
  display: grid; place-items: center; height: 100%;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted);
}
.story-meta { display: block; padding: 0.85rem 0.35rem 0.9rem; }
.story-meta b {
  display: block; font-family: var(--serif); font-size: 1.18rem;
  font-weight: 600; line-height: 1.2; color: var(--ink);
}
.story-meta i {
  display: block; font-style: normal; font-family: var(--mono);
  font-size: 0.74rem; letter-spacing: .06em; color: var(--muted);
  margin-top: 0.3rem;
}
.story-meta em {
  display: block; font-style: normal; font-size: 0.95rem; line-height: 1.45;
  color: var(--slate); margin-top: 0.6rem;
}
.story-card:hover .story-meta b { color: var(--teal); }


@media (prefers-reduced-motion: reduce) {
  .story-card { transition: none; }
  .story-card:hover { transform: none; }
}