/* ---- Dark Theme Variables ---- */

:root {
  --bg: #0d1117;
  --text: #e6edf3;
  --text-muted: #8b949e;
  --accent: #58a6ff;
  --accent-hover: #79c0ff;
  --border: #21262d;
  --surface: #161b22;
  --code-bg: #1c2128;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
}

/* ---- Reset & Base ---- */

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

html {
  font-size: 100%;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  font-family: var(--font-sans);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Guards against the full-bleed journey track nudging the page sideways
     on systems where the scrollbar takes up width. */
  overflow-x: hidden;
}

a {
  color: var(--accent);
}

a:hover {
  color: var(--accent-hover);
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

img {
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-mono);
  color: var(--text);
}

time {
  font-family: var(--font-mono);
}

/* ---- Container ---- */

.container {
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem 1rem;
  flex: 1;
}

/* ---- Navigation ---- */

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  max-width: 44rem;
  margin: 0 auto;
  width: 100%;
}

.site-nav__brand {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  color: var(--text);
}

.site-nav__links {
  list-style: none;
  display: flex;
  gap: 1.25rem;
}

.site-nav__links a {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--text-muted);
}

.site-nav__links a:hover,
.site-nav__links a[aria-current="page"] {
  color: var(--accent);
}

.site-nav__links a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.site-nav__menu {
  margin-left: auto;
}

/* Hamburger icon: three bars drawn with CSS, no image or font needed. */
.site-nav__menu > summary {
  cursor: pointer;
  list-style: none;
  width: 1.4rem;
  height: 1rem;
  color: var(--text-muted);
  background:
    linear-gradient(currentColor, currentColor) top / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) bottom / 100% 2px no-repeat;
}

.site-nav__menu > summary::-webkit-details-marker {
  display: none;
}

.site-nav__menu > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (min-width: 600px) {
  .site-nav__menu > summary {
    display: none;
  }

  /* The list lives inside a closed <details>. Browsers now wrap that content in
     ::details-content with `content-visibility: hidden`, which `display: flex`
     below does NOT override — the list computes as flex, reports a zero-size
     box, and never paints. Revealing it takes this rule.

     Without it there is no visible navigation at all between 600px and 999px,
     where the hamburger is hidden and the side nav has not appeared yet. */
  .site-nav__menu::details-content {
    content-visibility: visible;
    display: contents;
  }

  .site-nav__menu .site-nav__links {
    display: flex;
  }
}

@media (max-width: 599px) {
  .site-nav__menu:not([open]) .site-nav__links {
    display: none;
  }

  .site-nav__menu[open] .site-nav__links {
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
    padding-top: 0.5rem;
  }
}

/* ---- Home: What's New ---- */

.updates {
  max-width: 34rem;
  margin: 0 auto 3rem;
  padding: 0 1rem;
  text-align: left;
}

.updates__heading {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
}

.updates__list {
  list-style: none;
}

.updates__item {
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.updates__item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

/* The type string is its own label. Known types get a colour below; anything
   else falls back to these base pill styles rather than failing. */
.updates__type {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  margin-bottom: 0.4rem;
}

.updates__type--publication {
  color: #58a6ff;
  border-color: #58a6ff;
}

.updates__type--story {
  color: #3fb950;
  border-color: #3fb950;
}

.updates__type--bookmark {
  color: #d29922;
  border-color: #d29922;
}

.updates__title {
  font-size: 0.85rem;
  line-height: 1.4;
  margin-bottom: 0.2rem;
}

.updates__title a {
  text-decoration: none;
}

.updates__title a:hover {
  text-decoration: underline;
}

.updates__title a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.updates__blurb {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}

.updates__date {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-muted);
}

/* Seat feature 007's compact callout inside the widget. Spacing only — its
   internal styling belongs to that feature. */
.updates .study-callout--compact {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

.updates__list + .study-callout--compact {
  margin-top: 1.5rem;
}

/* ---- Call for Participants ---- */

/* Reads as an invitation, not another list item: its own surface, a left
   accent edge, and a button-like action. */
.study-callout {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0.5rem;
  background: var(--surface);
  padding: 1.25rem 1.35rem;
  margin: 2rem 0;
}

.study-callout__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.35rem;
}

.study-callout__title {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.study-callout__body {
  color: var(--text-muted);
  margin-bottom: 0.85rem;
}

.study-callout__facts {
  margin-bottom: 0.85rem;
}

.study-callout__facts dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.6rem;
}

.study-callout__facts dd {
  color: var(--text);
  font-size: 0.9rem;
}

.study-callout__deadline {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.85rem;
}

.study-callout__action {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0.4rem 1.1rem;
}

.study-callout__action:hover {
  color: var(--bg);
  background: var(--accent);
}

.study-callout__action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Compact variant for the home page (feature 006): a tighter block that sits
   under the hero without competing with it. */
.study-callout--compact {
  padding: 1rem 1.15rem;
  margin: 1.5rem auto 0;
  max-width: 32rem;
  text-align: left;
}

.study-callout--compact .study-callout__title {
  font-size: 1rem;
}

.study-callout--compact .study-callout__body {
  font-size: 0.9rem;
  margin-bottom: 0.7rem;
}

/* ---- Journey Timeline ---- */

.journey__tagline {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.journey__throughline {
  color: var(--text-muted);
  max-width: 38rem;
  margin-bottom: 0.35rem;
}

.journey__geography {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.timeline-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Legend swatches mirror the badge rings: colour AND line style, so the two
   categories stay distinguishable without relying on colour. */
.timeline-legend__item::before {
  content: "";
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 2px solid var(--cat-color);
  margin-right: 0.5rem;
  vertical-align: -0.15rem;
}

.timeline-legend__item--academia,
.journey__stop--academia {
  --cat-color: #58a6ff;
  --cat-ring: solid;
}

.timeline-legend__item--industry,
.journey__stop--industry {
  --cat-color: #3fb950;
  --cat-ring: dashed;
}

.timeline-legend__item::before {
  border-style: var(--cat-ring, solid);
}

.timeline-legend__scroll {
  margin-left: auto;
  opacity: 0.7;
}

/* Scroll container. Full-bleed so the track can run past the text column.
   The four background layers are CSS scroll shadows: the two "cover" layers
   scroll with the content (local), the two shadow layers stay pinned to the
   container (scroll). A cover sits over its shadow only at that end of the
   scroll, so each shadow shows exactly while content remains that way. */
.journey {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  padding-bottom: 1rem;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 1rem;
  padding-right: 1rem;
  background:
    linear-gradient(to right, var(--bg) 30%, rgba(13, 17, 23, 0)) left center,
    linear-gradient(to left, var(--bg) 30%, rgba(13, 17, 23, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(88, 166, 255, 0.35), rgba(88, 166, 255, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(88, 166, 255, 0.35), rgba(88, 166, 255, 0)) right center;
  background-repeat: no-repeat;
  background-size: 3rem 100%, 3rem 100%, 0.9rem 100%, 0.9rem 100%;
  background-attachment: local, local, scroll, scroll;
}

.journey:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.journey__track {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 0;
  position: relative;
  width: max-content;
  margin: 0 auto;
}

/* The rail, drawn behind the badges and brightening as the story goes on. */
.journey__track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 1.3rem;
  height: 2px;
  background: linear-gradient(to right, var(--border), var(--accent));
}

.journey__item {
  position: relative;
  flex: 0 0 auto;
}

/* Each stop is a <details>. Closed stops stay narrow; the open one widens to
   a readable measure. Only one can be open at a time, so the track's width
   stays predictable. */
.journey__stop {
  width: 6.8rem;
  scroll-snap-align: center;
  transition: width 0.15s ease;
}

.journey__stop[open] {
  width: 22rem;
}

.journey__summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  list-style: none;
}

.journey__summary::-webkit-details-marker {
  display: none;
}

.journey__summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 0.5rem;
}

.journey__badge-row {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.6rem;
}

/* One size for every badge. Position in the story is carried by the rail,
   not by size, so early roles are not visually diminished. */
.journey__badge {
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface);
  border: 3px var(--cat-ring, solid) var(--cat-color);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text);
  overflow: hidden;
  transition: transform 0.15s ease;
}

/* Most brand logos are dark ink meant for white paper, so a logo badge gets
   a light face instead of the dark surface used behind plain initials. */
.journey__badge--logo {
  background: #f5f5f5;
}

/* A faint tint of the category colour behind each badge, so the two groups
   read as groups even before the labels are noticed. */
.journey__stop--academia .journey__badge {
  box-shadow: 0 0 0 5px rgba(88, 166, 255, 0.12);
}

.journey__stop--industry .journey__badge {
  box-shadow: 0 0 0 5px rgba(63, 185, 80, 0.12);
}

.journey__summary:hover .journey__badge {
  transform: scale(1.08);
}

.journey__badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.3rem;
}

/* The badge doubles as a link to the organisation's own site. It sits inside a
   <summary>, so it must not look or behave like the rest of the toggle. */
.journey__badge--link {
  cursor: pointer;
  text-decoration: none;
}

/* The flag is the one glance-level cue for where a milestone happened, so it is
   deliberately larger than the label beneath it. */
.journey__flag {
  display: block;
  font-size: 1.5rem;
  line-height: 1.25;
  margin-top: 0.15rem;
}

.journey__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--text);
  padding: 0 0.25rem;
}

/* The track shows the period here; the organisation moved into the detail. */
.journey__org {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-muted);
  padding: 0 0.25rem;
}

/* ---- Journey detail (revealed on opening a stop) ---- */

.journey__detail {
  text-align: left;
  margin-top: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
}

.journey__detail-title {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--text);
  margin-bottom: 0.35rem;
}

.journey__detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

/* The organisation links out to its own site when a `url` is set. */
a.journey__detail-org {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

a.journey__detail-org:hover {
  color: var(--cat-color);
}

.journey__detail-note {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ---- Journey on small screens: a vertical list that scrolls with the page ---- */

@media (max-width: 599px) {
  .journey {
    overflow: visible;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    scroll-snap-type: none;
    background: none;
  }

  .journey__track {
    flex-direction: column;
    align-items: stretch;
    width: auto;
    gap: 1.5rem;
  }

  .journey__track::before {
    left: 1.7rem;
    right: auto;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    height: auto;
    background: linear-gradient(to bottom, var(--border), var(--accent));
  }

  /* Width rules from the horizontal track do not apply here — an open stop
     expands downward in normal flow instead of widening. */
  .journey__stop,
  .journey__stop[open] {
    width: auto;
  }

  .journey__summary {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 0.85rem;
    flex-wrap: wrap;
  }

  .journey__badge-row {
    height: auto;
  }

  .journey__label,
  .journey__org {
    padding: 0;
  }

  .journey__label {
    flex: 1 1 auto;
  }

  .journey__org {
    flex: 1 1 100%;
    padding-left: 4.25rem;
  }

  .journey__detail {
    margin-left: 4.25rem;
  }

  /* The sideways-scroll hint is untrue in this layout. */
  .timeline-legend__scroll {
    display: none;
  }
}

/* ---- Side navigation (every page except home) ---- */

/* Pinned to the right edge, vertically centred. Hidden below 1000px, where
   there is no room beside the 44rem content column — the top nav covers it. */
.side-nav {
  position: fixed;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}

.side-nav__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: right;
}

.side-nav__links a {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-decoration: none;
  color: var(--text-muted);
  border-right: 2px solid transparent;
  padding-right: 0.6rem;
}

.side-nav__links a:hover {
  color: var(--accent);
}

.side-nav__links a[aria-current="page"] {
  color: var(--accent);
  border-right-color: var(--accent);
}

.side-nav__links a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 999px) {
  .side-nav {
    display: none;
  }
}

/* Exactly one section menu is visible at a time. Above 1000px the side nav is
   the navigation, so the top nav keeps only the "main" link and drops its list
   — otherwise both render the same five links at once.

   Home is not involved: it has no top nav at all. Its hero links are its
   navigation, so it needs neither of these menus. */
@media (min-width: 1000px) {
  .site-nav__menu .site-nav__links {
    display: none;
  }
}

/* ---- Home page: no rules above or below the content ---- */

/* Home has no top nav to remove a border from — it is not rendered at all. */
.is-home .site-footer {
  border-top: none;
}

/* ---- Site mark ---- */

/* Centred above the content on every page. Sits between the nav and the
   content column, so it needs its own centring rather than the container's. */
.site-logo {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  margin: 1.5rem auto 0;
}

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

.site-footer {
  border-top: 1px solid var(--border);
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  max-width: 44rem;
  margin: 0 auto;
  width: 100%;
}

.site-footer__links {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1.25rem;
}

.site-footer__links a {
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
}

.site-footer__links a:hover {
  color: var(--accent);
}

/* ---- Hero (Home) ---- */

.hero {
  text-align: center;
  padding: 4rem 0 2rem;
}

.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: lowercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.hero__headline {
  font-family: var(--font-mono);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.75rem;
}

.hero__subheadline {
  font-size: 1.15rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}

.hero__ctas {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.hero__ctas a {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--accent);
  border: 1px solid var(--border);
  padding: 0.4rem 1rem;
  border-radius: 999px;
}

.hero__ctas a:hover {
  color: var(--accent-hover);
  border-color: var(--accent);
}

/* ---- Page ---- */

.page h1 {
  margin-bottom: 1.5rem;
}

/* Photo on the left, intro text on the right. Stacks on narrow screens. */
.profile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2rem;
  margin-bottom: 2rem;
}

.profile-intro {
  flex: 1 1 16rem;
  font-size: 1.1rem;
  color: var(--text-muted);
  margin: 0;
}

/* Pulls key phrases out of a muted paragraph. */
.highlight {
  color: var(--accent);
  font-weight: 700;
}

/* Round portrait. The photo file is a full-length portrait; object-fit crops
   it to a circle and object-position pulls the framing up onto the face. */
.profile-photo {
  width: 8rem;
  height: 8rem;
  object-fit: cover;
  object-position: 50% 12%;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: block;
  flex: 0 0 auto;
}

.page h2 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.page p,
.page ul,
.page ol {
  margin-bottom: 1rem;
}

/* ---- Filter Pills ---- */

/* Row holding the filter pills (left) and the search box (right). */
.list-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 2rem;
}

.list-controls .filter-pills {
  margin-bottom: 0;
}

.search__input {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  width: 12rem;
  max-width: 100%;
}

.search__input::placeholder {
  color: var(--text-muted);
}

.search__input:focus {
  outline: none;
  border-color: var(--accent);
}

.search__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Screen-reader-only label: present for assistive tech, invisible on screen. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

[hidden] {
  display: none !important;
}

.filter-pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.filter-pills a {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-decoration: none;
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
}

.filter-pills a:hover {
  color: var(--accent-hover);
  border-color: var(--accent);
}

.filter-pills a[aria-current="page"] {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(88, 166, 255, 0.1);
}

/* ---- Story List ---- */

.story-list {
  list-style: none;
}

.story-item {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}

.story-item:last-child {
  border-bottom: none;
}

.story-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.25rem;
}

.story-item__date {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.story-item__category {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
}

.story-item h2 {
  font-size: 1.25rem;
  margin: 0.25rem 0 0.5rem;
}

.story-item h2 a {
  text-decoration: none;
  color: var(--text);
}

.story-item h2 a:hover {
  color: var(--accent);
}

.story-item__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.story-item__tags li {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.story-item__tags li::before {
  content: "#";
}

.story-item__tldr {
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* ---- Story Detail ---- */

.story__header {
  margin-bottom: 2rem;
}

.story__header h1 {
  margin-bottom: 0.5rem;
}

.story__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.story__date {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.story__category {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
}

.story__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.story__tags li {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.story__tags li::before {
  content: "#";
}

.story__tldr {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 2rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.story__tldr strong {
  color: var(--text);
}

.story p,
.story ul,
.story ol,
.story blockquote,
.story pre {
  margin-bottom: 1rem;
}

.story h2 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

/* ---- Story figures ----

   Screenshots come in whatever background their source had — some light, some
   dark. Rather than tint them, each sits on its own bordered card, so a light
   screenshot reads as a deliberate panel instead of a hole in the page. */

.story-figure {
  margin: 1.75rem 0;
  text-align: center;
}

.story-figure img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}

/* For artwork drawn on white, so it does not read as a bright rectangle. */
.story-figure--light img {
  background: #fff;
  padding: 1rem;
  max-width: 17rem;
}

.story-figure figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-muted);
  padding: 0 1rem;
}

/* ---- The #tbh asides ----

   A recurring device in the author's writing: an honest aside stepping out of
   the walkthrough. Given its own voice on the page so it reads as a turn to
   the reader rather than another paragraph. */

.tbh {
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 0.9rem 1.1rem;
  margin: 1.5rem 0;
}

.tbh p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-muted);
}

.tbh strong {
  font-family: var(--font-mono);
  color: var(--accent);
}

/* ---- The four-phase process ----

   An ordered list, not a table: it is a sequence, and a screen reader should
   read it as one.

   The column counts are explicit rather than auto-fit. Four steps in a 44rem
   column, left to fit themselves, land on three-across with a single orphan
   underneath — which reads as a mistake. Going 1 -> 2 -> 4 keeps every row
   whole at every width. */

.process {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 1.5rem 0 2rem;
  padding: 0;
}

@media (min-width: 30rem) {
  .process {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 48rem) {
  .process {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
  }
}

.process__step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  border-radius: 0.5rem;
  padding: 1rem 0.9rem 1.1rem;
}

.process__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  margin-bottom: 0.55rem;
}

.process__name {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 0.3rem;
}

.process__desc {
  display: block;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-muted);
}

/* The Spec Kit command that each step of the walkthrough is about. */
.story-command {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--accent);
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  display: inline-block;
  margin: 1.75rem 0 0.75rem;
}

.story__citation {
  border-top: 1px solid var(--border);
  margin-top: 2rem;
  padding-top: 1rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.story__exploring {
  border-top: 1px solid var(--border);
  margin-top: 2rem;
  padding-top: 1rem;
}

.story__exploring h2 {
  font-size: 1rem;
  color: var(--text-muted);
  margin-top: 0;
}

/* ---- Bookmark List ---- */

.bookmark-list {
  list-style: none;
}

.bookmark-item {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.bookmark-item:last-child {
  border-bottom: none;
}

.bookmark-item__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.bookmark-item h3 {
  font-size: 1.1rem;
  margin: 0;
}

.bookmark-item h3 a {
  text-decoration: none;
  color: var(--text);
}

.bookmark-item h3 a:hover {
  color: var(--accent);
}

.bookmark-item__type {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
}

.bookmark-item__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.bookmark-item__tags li {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.bookmark-item__tags li::before {
  content: "#";
}

.bookmark-item__why {
  margin-bottom: 0.5rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.bookmark-item__takeaway {
  font-size: 0.9rem;
  color: var(--text);
  font-style: italic;
}

/* ---- Research Page ---- */

.research-section {
  margin-bottom: 2.5rem;
}

.research-section h2 {
  font-size: 1.15rem;
  margin-bottom: 1rem;
  color: var(--text);
}

.research-section ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

.research-section li {
  margin-bottom: 0.5rem;
  color: var(--text-muted);
}

.publication-group {
  margin-bottom: 1.5rem;
}

.publication-group h3 {
  font-size: 0.95rem;
  color: var(--text-muted);
  text-transform: lowercase;
  margin-bottom: 0.75rem;
}

.publication {
  margin-bottom: 1rem;
  padding-left: 1rem;
  border-left: 2px solid var(--border);
}

.publication__title {
  font-weight: 600;
  color: var(--text);
}

.publication__title a {
  text-decoration: none;
}

.publication__authors {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.publication__venue {
  font-size: 0.85rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

/* ---- Empty State ---- */

.empty-state {
  color: var(--text-muted);
  font-style: italic;
  padding: 2rem 0;
}

/* ---- Code blocks ---- */

pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 1rem;
}

pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

code {
  font-family: var(--font-mono);
  background: var(--code-bg);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.88em;
}

/* ---- Blockquote ---- */

blockquote {
  border-left: 3px solid var(--border);
  padding-left: 1rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 1rem;
}