/* The project index (/work/) and each business's page (/work/<slug>/),
 * written by project-pages.ts. They stand in the home page's world: the
 * tokens, the void, the bar and the foot are pages.css; this file arranges
 * the index's cards and the long read of a project. A project page carries
 * its brand's first swatch as --project-accent, the line over its preview,
 * as each station on the home page carries its brand's ink.
 *
 * Image rule (CLAUDE.md): every image fixes its width only and its height
 * follows its own width and height attributes; a logo is never drawn past
 * its own pixels (--fit). Nothing is cropped or stretched. */

.project-page main {
  max-width: calc(1180px + 2 * var(--pad));
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) var(--pad) 0;
}

.project-page [id] {
  scroll-margin-top: 6rem;
}

.project-page p,
.project-page li,
.project-page dd {
  overflow-wrap: anywhere;
}

.project-page h1,
.project-page h2,
.project-page h3,
.project-reading h2,
.project-reading h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

.project-page h1 {
  font-size: clamp(3rem, 9vw, 7.5rem);
  line-height: 0.92;
}

.project-page h2,
.project-reading h2 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 0.98;
}

.project-page h3,
.project-reading h3 {
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.project-page p {
  margin: 0;
}

/* A space's name, as the chapter map names "your space" and "my space". */
.project-eyebrow {
  margin: 0;
  color: var(--paint-grey);
  font: 400 0.75rem/1.4 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* A way on: an outlined label, as on the home page's stations. */
.project-action,
.project-actions a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--vellum-line);
  background: rgba(12, 14, 18, 0.5);
  color: var(--vellum);
  font: 400 0.75rem/1.2 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .project-action:hover,
  .project-actions a:hover {
    border-color: var(--vellum);
    background: rgba(236, 230, 218, 0.06);
  }
}

/* --- The index ------------------------------------------------------------- */

.project-page main > h1 {
  padding-bottom: 1.1rem;
  background: var(--ruler);
}

.project-reading > header {
  display: grid;
  gap: 0.9rem;
  justify-items: start;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(2rem, 4vw, 3rem);
}

.project-reading > header > h2 {
  color: var(--vellum-soft);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}

.project-reading > header > p:not([class]) {
  max-width: var(--measure);
  color: var(--vellum-soft);
  font-size: 1.05rem;
}

/* The owner's line into the work, over the home page's project list (owner round 2026-10-16), set like the line that crosses before the rooms. */
.project-reading .project-taste {
  margin: 0.4rem 0 1rem;
  font: 600 clamp(2.1rem, 10vw, 4.5rem)/1.02 var(--display);
  text-transform: uppercase;
  overflow-wrap: normal;
}

/* The case studies by name, under the cards' intro (project-pages.ts): their own pages, /projects/<slug>/. */
.project-cases {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.75rem;
  margin-top: 0.4rem;
  color: var(--paint-grey);
  font: 400 0.75rem/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.project-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: 1.5rem;
  counter-reset: project;
}

/* A card is a sheet in the void: its number over a measuring rule, the
   brand's logo on white, the name, the role and the line, then the way in.
   Pointing at it sets registration marks at its corners. */
.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-width: 0;
  padding: 0.9rem 1.1rem 0;
  border: 1px solid var(--vellum-faint);
  background: var(--sheet);
  counter-increment: project;
  transition: border-color 240ms var(--ease-out);
}

.project-card::before {
  padding-bottom: 0.75rem;
  background: var(--ruler);
  color: var(--vellum-mute);
  content: counter(project, decimal-leading-zero);
  content: counter(project, decimal-leading-zero) / "";
  font: 400 0.75rem/1 var(--mono);
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
}

.project-card::after {
  --mark: var(--paint-grey);
  --arm: 14px;
  position: absolute;
  inset: -7px;
  background:
    linear-gradient(var(--mark), var(--mark)) left top / var(--arm) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) left top / 1px var(--arm) no-repeat,
    linear-gradient(var(--mark), var(--mark)) right top / var(--arm) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) right top / 1px var(--arm) no-repeat,
    linear-gradient(var(--mark), var(--mark)) left bottom / var(--arm) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) left bottom / 1px var(--arm) no-repeat,
    linear-gradient(var(--mark), var(--mark)) right bottom / var(--arm) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) right bottom / 1px var(--arm) no-repeat;
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease-out);
}

.project-card:focus-visible::after {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .project-card:hover {
    border-color: var(--vellum-line);
  }

  .project-card:hover::after {
    opacity: 1;
  }

  .project-card:hover .project-action {
    color: var(--paint-grey);
  }
}

.project-card h3 {
  margin-top: 0.35rem;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.02;
}

/* The role, when the card has one: a label line, as the stations set it. */
.project-card > p:nth-last-of-type(2) {
  color: var(--vellum-soft);
  font: 400 0.75rem/1.55 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.project-card > p:last-of-type {
  color: var(--vellum-soft);
  font-size: 1rem;
  line-height: 1.6;
}

.project-card .project-action {
  justify-content: space-between;
  margin: auto -1.1rem 0;
  padding: 0 1.1rem;
  min-height: 3.25rem;
  border: 0;
  border-top: 1px solid var(--vellum-faint);
  background: none;
}

.project-preview {
  height: 240px;
  overflow: hidden;
  background: var(--graphite-1);
}

.project-preview img {
  display: block;
  width: 100%;
  height: auto;
}

/* The index pictures each project by its logo (owner round 2026-10-16): on white, centered, one dimension fixed, never past its own pixels (--fit). */
.project-preview--logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  height: 200px;
  padding: 1.5rem;
  background: #fff;
}

.project-preview--logos img {
  flex: 0 1 auto;
  width: min(calc((100% - (var(--count) - 1) * 1.25rem) / var(--count)), var(--fit));
  height: auto;
  min-width: 0;
}

/* --- A project page ---------------------------------------------------------- */

/* Previous, All projects, Next: a rule with ticks, the three labels on it. */
.project-navigation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0 0 0.6rem;
  background: var(--ruler);
}

.project-navigation a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--vellum-soft);
  font: 400 0.75rem/1.35 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 200ms var(--ease-out);
}

.project-navigation a:nth-child(2) {
  justify-content: center;
  text-align: center;
}

.project-navigation a:last-child {
  justify-content: flex-end;
  text-align: right;
}

@media (hover: hover) and (pointer: fine) {
  .project-navigation a:hover {
    color: var(--paint-grey);
  }
}

/* The second one closes the page, over the foot. */
.project-story + .project-navigation {
  margin-top: clamp(3.5rem, 8vw, 6rem);
  padding: 0.6rem 0 0;
  background:
    linear-gradient(var(--vellum-faint), var(--vellum-faint)) left top / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--vellum-faint) 0 1px, transparent 1px 8px) left top / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, var(--vellum-line) 0 1px, transparent 1px 64px) left top / 100% 11px no-repeat;
}

.project-intro {
  display: grid;
  gap: 1.1rem;
  justify-items: start;
  margin: clamp(2rem, 5vw, 3.5rem) 0 0;
}

.project-intro > h1 {
  margin-bottom: 0.4rem;
}

/* Wide screens: the words on the left, the preview beside them at its own
   width, as a case study opens. The preview spans every row down to a
   flexible last one, so its height never pushes the words apart. */
@media (min-width: 1100px) {
  .project-intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 640px);
    grid-template-rows: repeat(7, auto) 1fr;
    column-gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }

  .project-intro > * {
    grid-column: 1;
  }

  .project-intro > .project-hero {
    grid-column: 2;
    grid-row: 1 / -1;
    max-width: none;
  }

  .project-intro > h1 {
    font-size: clamp(3rem, 5.4vw, 5.4rem);
  }
}

/* The preview: the brand's line over it, a hairline round it, scrolled
   inside. Its tile is 640px wide, so it is never drawn much past that. */
.project-hero {
  justify-self: stretch;
  max-width: 850px;
  max-height: 650px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--vellum-faint);
  border-top: 2px solid var(--project-accent, var(--paint-grey));
  background: var(--graphite-1);
  scrollbar-color: var(--vellum-line) transparent;
  scrollbar-width: thin;
}

.project-hero img,
.project-artifact img,
.project-pair img {
  display: block;
  width: 100%;
  height: auto;
}

/* A branding project's opening (owner, 2026-10-21: "LOGO SIZE" at the upper
   left over "WEBSITE SIZE" at the lower right): its logo on white, half the
   width, overlapping its website, three quarters of the width and lower.
   Both keep their ratio; the logo is never drawn past its own pixels. */
.project-hero--duo {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  max-height: none;
  overflow: visible;
  border: 0;
  background: none;
}

.project-duo__logo,
.project-duo__piece {
  position: relative;
  grid-row: 1;
  align-self: start;
}

.project-duo__piece {
  grid-column: 4 / -1;
  margin-top: clamp(4.5rem, 14vw, 9rem);
  border: 1px solid var(--vellum-faint);
  border-top: 2px solid var(--project-accent, var(--paint-grey));
  background: var(--graphite-1);
}

.project-duo__logo {
  z-index: 1;
  grid-column: 1 / 7;
  display: grid;
  place-items: center;
  margin-top: clamp(0.5rem, 2vw, 1.5rem);
}

.project-duo__logo img {
  margin: auto;
}

/* A logo on the dark page is its own shape on a transparent ground (owner,
   2026-10-21: "logos must be files with transparency ... not a whiter square
   wiith a logo in the middle"): a hairline of light follows its edge so a dark
   mark reads, and in the opening it casts a soft shadow onto the website. */
.project-duo__logo img,
.project-artifact--logo img {
  filter:
    drop-shadow(0 0 0.6px rgba(244, 244, 241, 0.9))
    drop-shadow(0 0 0.6px rgba(244, 244, 241, 0.9));
}

.project-duo__logo img {
  filter:
    drop-shadow(0 0 0.6px rgba(244, 244, 241, 0.9))
    drop-shadow(0 0 0.6px rgba(244, 244, 241, 0.9))
    drop-shadow(0 1rem 1.4rem rgba(0, 0, 0, 0.55));
}

.project-artifact--logo > a {
  background: transparent;
}

.project-duo__logo:focus-visible,
.project-duo__piece:focus-visible {
  outline: 2px solid var(--vellum);
  outline-offset: 3px;
}

/* The role: a label line under the preview. */
.project-hero + p:not(.project-description) {
  margin-top: 0.6rem;
  color: var(--vellum-soft);
  font: 400 0.78rem/1.6 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.project-description {
  max-width: 62ch;
  font-size: clamp(1.1rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.6;
}

/* A showcase identity, on its own sheet. No colored bar at its side (owner,
   2026-10-20 night: "Remove and never used those color contrasting
   sidebrackets"). */
.project-description + p {
  max-width: 62ch;
  padding: 0.85rem 1.1rem;
  background: var(--sheet);
  color: var(--vellum-soft);
}

.project-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.8rem 0 0;
}

/* The first way in is the main one, filled in vellum. */
.project-actions a:first-child {
  border-color: var(--vellum);
  background: var(--vellum);
  color: var(--graphite-0);
}

@media (hover: hover) and (pointer: fine) {
  .project-actions a:first-child:hover {
    background: var(--paint-grey);
    border-color: var(--paint-grey);
  }
}

.project-story > section {
  max-width: 85ch;
  margin: clamp(3.5rem, 8vw, 6rem) 0 0;
}

.project-story > #artifacts,
.project-story > #comparison {
  max-width: none;
}

.project-story > section > h2 {
  margin-bottom: 1.6rem;
  padding-bottom: 1rem;
  background: var(--ruler);
}

.project-story > section h3 {
  margin: 2.2rem 0 0.7rem;
}

.project-story > section > h2 + h3 {
  margin-top: 0;
}

.project-story section p,
.project-story section li {
  max-width: var(--measure);
  color: var(--vellum-soft);
  font-size: 1.05rem;
  line-height: 1.7;
}

.project-story section p + p {
  margin-top: 0.9rem;
}

/* A story part's own picture floats beside its words: AI Comply HQ's Blake
   window (owner, 2026-10-23: "Put a screen shot of blake's chatbot window
   here"). Its width is set, its height follows at its own ratio. */
.project-story .story-figure {
  float: right;
  width: min(15rem, 36%);
  margin: 0.3rem 0 1rem 1.5rem;
}

.project-story .story-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.project-story .story-figure ~ h3 {
  clear: both;
}

@media (max-width: 760px) {
  .project-story .story-figure {
    float: none;
    width: min(15rem, 72%);
    margin: 1rem auto;
  }
}

.project-story strong {
  color: var(--vellum);
  font-weight: 600;
}

/* The redesign's span and score: a measurement. */
#redesign > h2 + p {
  color: var(--paint-grey);
  font: 400 0.78rem/1.6 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* The redesign document's twelve parts (owner, 2026-10-16), the room's blueprint wall in reading form: a ruled index, each part numbered. */
.project-parts {
  columns: 2 17rem;
  column-gap: 2.5rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: part;
}

.project-parts li {
  break-inside: avoid;
  counter-increment: part;
}

.project-story .project-parts li {
  font-size: 1rem;
}

.project-parts a {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 44px;
  border-bottom: 1px solid var(--vellum-faint);
  color: var(--vellum);
  font: 400 0.75rem/1.35 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 200ms var(--ease-out);
}

.project-parts a::before {
  flex: none;
  min-width: 1.6rem;
  color: var(--paint-grey);
  content: counter(part, decimal-leading-zero);
  content: counter(part, decimal-leading-zero) / "";
}

@media (hover: hover) and (pointer: fine) {
  .project-parts a:hover {
    color: var(--paint-grey);
  }
}

.project-chapters {
  margin: 2.2rem 0 0;
  padding: 0;
  list-style: none;
}

.project-chapters > li {
  padding: 1.8rem 0 2.2rem;
  border-top: 1px solid var(--vellum-faint);
}

.project-chapters > li > article > h3 {
  margin: 0 0 0.6rem;
  color: var(--vellum);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
}

.project-chapters > li > article > h3 a {
  transition: color 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .project-chapters > li > article > h3 a:hover {
    color: var(--paint-grey);
  }
}

.project-feature {
  margin: 1.1rem 0;
  padding: 1rem 1.2rem 0.9rem;
  border: 1px solid var(--vellum-faint);
  background: var(--sheet);
}

.project-feature dl {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) 1fr;
  gap: 0.45rem 1.25rem;
  margin: 0;
}

.project-feature dt {
  padding-top: 0.3rem;
  color: var(--vellum-mute);
  font: 400 0.72rem/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.project-feature dd {
  margin: 0;
  color: var(--vellum-soft);
  font-size: 1rem;
  line-height: 1.6;
}

.project-story .project-feature-date {
  margin: 0.7rem 0 0;
  color: var(--vellum-mute);
  font: 400 0.75rem/1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.project-scores {
  margin: 1.8rem 0 0.8rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.project-scores caption {
  padding-bottom: 0.75rem;
  color: var(--paint-grey);
  font: 400 0.75rem/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-align: left;
  text-transform: uppercase;
}

.project-scores th,
.project-scores td {
  padding: 0.6rem 1.5rem 0.6rem 0;
  border-bottom: 1px solid var(--vellum-faint);
  text-align: left;
}

.project-scores thead th {
  color: var(--vellum-mute);
  font: 400 0.72rem/1.3 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.project-scores tbody th {
  color: var(--vellum-soft);
  font-weight: 400;
}

.project-scores td {
  font-family: var(--mono);
}

.project-scores tbody tr:last-child > * {
  border-bottom-color: var(--vellum-line);
  color: var(--vellum);
  font-weight: 600;
}

/* Folded parts: a ruled bar, its sign in sand. */
.project-page details {
  margin: 1rem 0;
  border: 1px solid var(--vellum-faint);
  background: var(--sheet);
}

.project-page summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 52px;
  padding: 0.7rem 1.1rem;
  cursor: pointer;
  font: 500 1.15rem/1.2 var(--display);
  letter-spacing: 0.01em;
  list-style: none;
  text-transform: uppercase;
}

.project-page summary::-webkit-details-marker {
  display: none;
}

.project-page summary::after {
  flex: none;
  color: var(--paint-grey);
  content: "+";
  content: "+" / "";
  font: 400 1.2rem/1 var(--mono);
}

.project-page details[open] > summary {
  border-bottom: 1px solid var(--vellum-faint);
}

.project-page details[open] > summary::after {
  content: "\2212";
  content: "\2212" / "";
}

.project-page details > :not(summary) {
  margin-inline: 1.1rem;
}

.project-page details > p {
  margin-block: 1rem;
}

.project-page select {
  display: block;
  width: min(100%, 30rem);
  min-height: 44px;
  margin: 0.5rem 0;
  padding: 0.5rem;
  border: 1px solid var(--vellum-line);
  border-radius: 0;
  background: var(--graphite-1);
  color: inherit;
  font: inherit;
}

/* Before and after, side by side. */
.project-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-block: 1rem 1.2rem;
}

.project-pair figure {
  min-width: 0;
  margin: 0;
}

.project-pair figcaption {
  margin: 0 0 0.6rem;
  color: var(--vellum-mute);
  font: 400 0.75rem/1.4 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.project-pair a {
  display: block;
  border: 1px solid var(--vellum-faint);
}

/* The work: each picture in a hairline frame with registration marks at its
   corners, as the home page hangs its media. */
.project-artifact {
  margin: 2.2rem 0 3.2rem;
}

.project-artifact > a {
  position: relative;
  display: block;
  border: 1px solid var(--vellum-faint);
  background: var(--graphite-1);
}

.project-artifact > a::after {
  --mark: var(--vellum-line);
  --arm: 14px;
  position: absolute;
  inset: -8px;
  background:
    linear-gradient(var(--mark), var(--mark)) left top / var(--arm) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) left top / 1px var(--arm) no-repeat,
    linear-gradient(var(--mark), var(--mark)) right top / var(--arm) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) right top / 1px var(--arm) no-repeat,
    linear-gradient(var(--mark), var(--mark)) left bottom / var(--arm) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) left bottom / 1px var(--arm) no-repeat,
    linear-gradient(var(--mark), var(--mark)) right bottom / var(--arm) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) right bottom / 1px var(--arm) no-repeat;
  content: "";
  pointer-events: none;
  transition: opacity 240ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .project-artifact > a:hover::after {
    --mark: var(--paint-grey);
  }
}

.project-artifact figcaption {
  display: grid;
  gap: 0.4rem;
  padding: 1rem 0 1.1rem;
  border-bottom: 1px solid var(--vellum-faint);
  color: var(--vellum);
  font-weight: 600;
}

.project-story .project-artifact figcaption p {
  font-weight: 400;
}

.project-artifact small {
  display: block;
  color: var(--vellum-mute);
  font: 400 0.75rem/1.5 var(--mono);
  letter-spacing: 0.04em;
}

#artifacts > section {
  margin-top: 2.5rem;
}

/* The work two to a row, each picture at most 300px wide at its own ratio,
   as the business panel shows it (owner, 2026-10-21: "300px width max"). */
.project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 300px));
  align-items: start;
  gap: 2.2rem clamp(1.2rem, 3vw, 2.2rem);
  margin: 2rem 0 0;
}

.project-grid .project-artifact {
  margin: 0;
}

#artifacts details > .project-grid {
  margin: 1.2rem 0 2.2rem;
}

#artifacts > section > h3 + p {
  margin-bottom: 1rem;
}

.project-media-error {
  padding: 1rem 1.2rem;
  border: 1px dashed var(--vellum-line);
  color: var(--vellum-soft);
}

.project-footer {
  justify-content: flex-start;
  gap: 0.25rem 2rem;
}

/* The home page's reading view of the projects (an earlier home page): kept for when it returns. */
.project-index-link {
  position: fixed;
  left: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 90;
  padding: 0.7rem 1rem;
  border: 1px solid var(--vellum-line, #777);
  background: var(--graphite-0, #101010);
  color: var(--vellum, #efede7);
  font: 400 0.75rem/1.2 var(--mono, monospace);
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}

/* With JavaScript the index is in the Designer row of the menu, and this pill covered the rooms' name at the bottom left (owner round 2026-10-16); without it, the page stays loading and the pill stays. */
body:not(.is-loading) .project-index-link {
  display: none;
}

.featured.is-reading {
  height: auto;
  min-height: 0;
  background: var(--graphite-0, #101010);
  color: var(--vellum, #efede7);
}

.featured.is-reading .project-reading {
  max-width: 1180px;
  margin: auto;
  padding: calc(var(--header-h, 80px) + 2rem) 1rem 4rem;
}

@media (max-width: 520px) {
  .project-feature dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }

  .project-feature dt {
    padding-top: 0.6rem;
  }
}

@media (max-width: 760px) {
  .project-header nav {
    gap: 0 1.1rem;
  }

  .project-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The closing Previous and Next carry the projects' names: one per line. */
  .project-story + .project-navigation {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-story + .project-navigation a {
    justify-content: flex-start;
    text-align: left;
  }

  .project-preview--logos {
    height: 180px;
  }

  .project-scores th,
  .project-scores td {
    padding-right: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-page *,
  .project-page *::before,
  .project-page *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}