/* Critical Point Vision Site: evidence.css
 * The Evidence page: Art's feature (the Idekoba layout: ringed headshot,
 * solid chips in the side colours, a hero quote and supporting quotes), the
 * pull-quote mosaic under "What leaders are saying" (seven tiles on paper
 * with hairlines, since 2026-10-02 night), and the reading list. The side
 * colours are the pitch deck's. Loads on evidence.html only.
 */

/* ---------- side colours ---------- */
/* Full strength on the light ground, the deck's lightened versions on the
   dark one. Chip fills are chosen so white type on them clears 4.5:1. */

:root {
  --ev-emp-q: #2E6F40;
  --ev-emp-chip: #2E6F40;
  --ev-emp-tint: #E4EBE5;
  --ev-emp-line: #CEDBD0;

  --ev-stu-q: #004A75;
  --ev-stu-chip: #004A75;
  --ev-stu-tint: #DFE7EA;
  --ev-stu-line: #C4D3DC;

  --ev-uni-q: #B7410E;
  --ev-uni-chip: #B7410E;
  --ev-uni-tint: #F4E6DF;
  --ev-uni-line: #ECD1C5;
}

html[data-theme="dark"] {
  --ev-emp-q: #6FC48C;
  --ev-emp-chip: #2E6F40;
  --ev-emp-tint: rgb(111 196 140 / 0.09);
  --ev-emp-line: rgb(111 196 140 / 0.28);

  --ev-stu-q: #5F9FCB;
  --ev-stu-chip: #145C86;
  --ev-stu-tint: rgb(95 159 203 / 0.10);
  --ev-stu-line: rgb(95 159 203 / 0.28);

  --ev-uni-q: #E8683A;
  --ev-uni-chip: #B7410E;
  --ev-uni-tint: rgb(232 104 58 / 0.09);
  --ev-uni-line: rgb(232 104 58 / 0.28);
}

[data-side="employers"] {
  --ev-q: var(--ev-emp-q);
  --ev-chip-bg: var(--ev-emp-chip);
  --ev-tint: var(--ev-emp-tint);
  --ev-line: var(--ev-emp-line);
}

[data-side="students"] {
  --ev-q: var(--ev-stu-q);
  --ev-chip-bg: var(--ev-stu-chip);
  --ev-tint: var(--ev-stu-tint);
  --ev-line: var(--ev-stu-line);
}

[data-side="universities"] {
  --ev-q: var(--ev-uni-q);
  --ev-chip-bg: var(--ev-uni-chip);
  --ev-tint: var(--ev-uni-tint);
  --ev-line: var(--ev-uni-line);
}

/* ---------- tag chip ---------- */
/* The chip moved to sections.css as .chip[data-side]; .ev-chip is its alias.
   The side colour comes from the --side custom property set there. */

/* ---------- source line under every quote and every reading item ---------- */

.ev-source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-200);
  font-size: var(--text-ui);
  line-height: 1.45;
  color: var(--muted-foreground);
}

.ev-source__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  color: var(--link);
  font-weight: var(--body-bold-weight);
  text-decoration-thickness: 1px;
  white-space: nowrap;
}

.ev-source__link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ---------- the feature layout (Art's quotes) ---------- */

.ev-feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
}

.ev-profile {
  display: flex;
  align-items: center;
  gap: var(--space-400);
}

.ev-profile__pic {
  width: 7.75rem;
  height: 7.75rem;
  flex: none;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 0.25rem solid var(--ev-chip-bg);
}

.ev-profile__name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: var(--display-track);
}

.ev-profile__role {
  margin-top: var(--space-100);
  font-size: var(--text-lead);
  color: var(--muted-foreground);
}

.ev-hero-q {
  display: flex;
  gap: var(--space-200);
  margin: 0;
}

.ev-hero-q__mark {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(2.75rem, 6vw, 5rem);
  line-height: 0.82;
  color: var(--ev-q);
  flex: none;
}

.ev-hero-q p {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(1.75rem, 4.1vw, 3.25rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ev-q);
}

.ev-feature__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-600);
  align-items: start;
  margin-top: var(--space-400);
}

/* three supporting quotes set the same way (Art's card) */
.ev-feature__row--three {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.ev-feature__mid {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
}

.ev-mid-q {
  margin: 0;
}

.ev-mid-q p {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.3;
  color: var(--ev-q);
}

/* the featured profile with no headshot yet: dashed rust ring, tint fill */
.ev-profile__pic--placeholder {
  display: block;
  width: 7.75rem;
  height: 7.75rem;
  flex: none;
  box-sizing: border-box;
  border-radius: var(--radius-full);
  border: 0.25rem dashed var(--primary);
  background: #FBE9E1;
}

html[data-theme="dark"] .ev-profile__pic--placeholder { background: rgb(232 104 58 / 0.16); }

/* ---------- the pull-quote mosaic: "What leaders are saying" ---------- */
/* Seven tiles in a six-column grid, hairlines between them (the grid's gap
   shows the border colour through). The three features are the big tiles:
   a large pull quote in the side colour, the speaker under it, and the two
   supporting quotes in an overlay that shows on hover (pointer devices,
   wide layouts) or when the button opens it. The small tiles hold one
   quote each. Side colour lives in the chip, the quote mark and the
   pull-quote type; the tile itself stays on paper. */

.ev-mosaic {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-areas:
    "t t i i i i"
    "c c i i i i"
    "p p p p g g"
    "s s y y y y";
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

.ev-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-250);
  min-width: 0;
  padding: clamp(1.5rem, 2.6vw, 2.5rem);
  background: var(--background);
}

.ev-tile[data-tile="t"] { grid-area: t; }
.ev-tile[data-tile="i"] { grid-area: i; }
.ev-tile[data-tile="c"] { grid-area: c; }
.ev-tile[data-tile="p"] { grid-area: p; }
.ev-tile[data-tile="g"] { grid-area: g; }
.ev-tile[data-tile="s"] { grid-area: s; }
.ev-tile[data-tile="y"] { grid-area: y; }

.ev-tile--intro {
  justify-content: flex-end;
}

.ev-tile--intro h2 {
  font-size: clamp(1.75rem, 2.5vw, 2.375rem);
}

.ev-tile--intro .lead {
  margin-top: var(--space-200);
  font-size: var(--text-body);
}

.ev-tile__body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-250);
}

.ev-tile--big .ev-tile__body {
  gap: var(--space-300);
}

.ev-tile__mark {
  height: 0.5em;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(4.5rem, 7vw, 6.5rem);
  line-height: 0.7;
  color: var(--ev-q);
}

.ev-tile--small .ev-tile__mark {
  font-size: 3.5rem;
}

.ev-tile__q {
  margin: 0;
}

.ev-tile__q p {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ev-q);
}

.ev-tile--big .ev-tile__q p {
  font-size: clamp(1.625rem, 2.7vw, 2.5rem);
}

.ev-tile[data-tile="i"] .ev-tile__q p {
  font-size: clamp(1.75rem, 3.6vw, 3.375rem);
}

.ev-tile--small .ev-tile__q p {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.28;
}

/* the one word Eric asked to underline in Idekoba's quote */
.ev-tile__u {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.14em;
}

/* the speaker: a circular headshot and the name and role beside it */
.ev-tile__who {
  display: flex;
  align-items: center;
  gap: var(--space-200);
  margin-top: auto;
}

.ev-tile__pic {
  width: 3.75rem;
  height: 3.75rem;
  flex: none;
  border-radius: var(--radius-full);
  object-fit: cover;
  background: var(--secondary);
  border: 1px solid var(--border);
}

.ev-tile--small .ev-tile__pic {
  width: 3rem;
  height: 3rem;
}

.ev-tile__name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-body);
  line-height: 1.2;
}

.ev-tile--small .ev-tile__name {
  font-size: var(--text-ui);
}

.ev-tile__role {
  margin-top: 0.1rem;
  font-size: var(--text-caption);
  line-height: 1.4;
  color: var(--muted-foreground);
}

.ev-tile[data-tile="y"] .ev-tile__role {
  max-width: 52ch;
}

/* an organisation's quote: name and date, no headshot */
.ev-tile__attr {
  margin-top: auto;
  font-size: var(--text-ui);
  color: var(--muted-foreground);
}

.ev-tile__attr b {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  color: var(--foreground);
}

.ev-tile__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-200);
  padding-top: var(--space-150);
  border-top: 1px solid var(--border);
}

.ev-tile__foot .ev-source {
  flex: 1 1 16rem;
  font-size: var(--text-caption);
}

.ev-tile__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-150);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-weight: var(--body-bold-weight);
  font-size: var(--text-ui);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-enter);
}

.ev-tile__more .icon {
  width: 1rem;
  height: 1rem;
  color: var(--ev-q);
}

.ev-tile__more:hover {
  border-color: var(--ev-q);
}

.ev-tile__more:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* the two supporting quotes, over the tile body */
.ev-tile__over {
  position: absolute;
  inset: calc(-1 * var(--space-100));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-300);
  padding: var(--space-100);
  background: var(--muted);
  border-radius: var(--radius-lg);
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-fast) var(--ease-enter), visibility 0s linear var(--duration-fast);
}

.ev-tile__over-head {
  padding: var(--space-200) var(--space-200) 0;
  font-size: var(--text-caption);
  font-weight: var(--body-bold-weight);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.ev-tile__over-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-300);
  padding: var(--space-200);
}

.ev-sup {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
}

.ev-sup__q {
  margin: 0;
}

.ev-sup__q p {
  font-size: var(--text-body);
  line-height: 1.5;
}

.ev-sup__attr {
  font-size: var(--text-caption);
  color: var(--muted-foreground);
}

.ev-tile.is-open .ev-tile__over,
.ev-tile:has(.ev-tile__more:focus-visible) .ev-tile__over {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duration-fast) var(--ease-enter), visibility 0s;
}

@media (hover: hover) and (min-width: 901px) {
  .ev-tile--big:hover .ev-tile__over {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--duration-fast) var(--ease-enter) 0.25s, visibility 0s linear 0.25s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ev-tile__over,
  .ev-tile__more {
    transition: none;
  }
}

html[data-motion="none"] .ev-tile__over {
  transition: none;
}

/* ---------- the mosaic, narrower ---------- */

@media (max-width: 1100px) {
  .ev-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "t t"
      "i i"
      "c g"
      "p p"
      "s s"
      "y y";
  }
}

@media (max-width: 900px) {
  /* narrow: the overlay becomes an in-flow panel the button opens */
  .ev-tile__over {
    position: static;
    inset: auto;
    display: none;
    margin-top: var(--space-100);
    opacity: 1;
    visibility: visible;
  }

  .ev-tile.is-open .ev-tile__over {
    display: flex;
  }

  .ev-tile:has(.ev-tile__more:focus-visible) .ev-tile__over {
    display: none;
  }

  .ev-tile.is-open:has(.ev-tile__more:focus-visible) .ev-tile__over {
    display: flex;
  }
}

@media (max-width: 700px) {
  .ev-mosaic {
    grid-template-columns: 1fr;
    grid-template-areas: "t" "i" "c" "g" "p" "s" "y";
  }
}

/* ---------- the reading list: a featured article over a drifting rail ---------- */

#reading {
  padding-bottom: clamp(3rem, 7vw, 6rem);
}

.ev-reading-head {
  padding-bottom: 0;
}

.ev-reading-head .section-intro {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

/* the featured article: photograph left, copy right. The photograph is in
   full colour. */
.ev-feat {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4.5vw, 4.5rem);
  align-items: center;
  view-transition-name: ev-feat;
}

.ev-feat__ph {
  aspect-ratio: 5 / 4;
  border-radius: 12px;
  overflow: hidden;
  background: var(--muted);
}

.ev-feat__ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ev-feat__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.875rem;
}

.ev-feat__idx {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-ui);
  color: var(--side-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.ev-feat__bar {
  width: 1.5rem;
  height: 1px;
  background: var(--border);
}

.ev-feat__pub {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  line-height: 1.35;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ev-feat__date {
  font-size: var(--text-caption);
  color: var(--muted-foreground);
}

.ev-feat__h {
  margin-top: var(--space-250);
  max-width: 30ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3125rem, 1.95vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

.ev-feat__d {
  margin-top: var(--space-200);
  max-width: 48ch;
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--muted-foreground);
}

.ev-feat__src {
  margin-top: var(--space-300);
  padding-top: var(--space-200);
  border-top: 1px solid var(--border);
  max-width: 56ch;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 0.25rem;
}

.ev-feat__src .ev-source__link {
  gap: 0.45rem;
  text-decoration: none;
}

.ev-feat__src .ev-source__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.ev-feat__src .icon {
  width: 1rem;
  height: 1rem;
  transition: transform 0.25s cubic-bezier(.16, 1, .3, 1);
}

.ev-feat__src .ev-source__link:hover .icon {
  transform: translateX(3px);
}

@keyframes ev-feat-out {
  to { opacity: 0; transform: translateY(-6px); }
}

@keyframes ev-feat-in {
  from { opacity: 0; transform: translateY(8px); }
}

::view-transition-old(ev-feat) {
  animation: ev-feat-out .32s ease both;
}

::view-transition-new(ev-feat) {
  animation: ev-feat-in .5s cubic-bezier(.16, 1, .3, 1) both;
}

.ev-feat.is-fading {
  animation: ev-feat-in .5s cubic-bezier(.16, 1, .3, 1) both;
}

/* tools above the rail: side filters and the pause button */
.ev-rail__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-150);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-top: var(--space-300);
  border-top: 1px solid var(--border);
}

.ev-rail__tools[hidden] {
  display: none;
}

.ev-rail__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-100);
}

.ev-fbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0 var(--space-200);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: var(--text-ui);
  font-weight: 700;
  cursor: pointer;
}

.ev-fbtn:hover {
  border-color: var(--foreground);
}

.ev-fbtn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.ev-fbtn[aria-pressed="true"] {
  background: var(--foreground);
  color: var(--background);
  border-color: var(--foreground);
}

.ev-fbtn[data-side][aria-pressed="true"] {
  background: var(--side);
  border-color: var(--side);
  color: #fff;
}

.ev-fbtn .icon {
  width: 1rem;
  height: 1rem;
}

.ev-fbtn .dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--side-text);
  flex: none;
}

.ev-fbtn[data-side][aria-pressed="true"] .dot {
  background: #fff;
}

.ev-rail__pause[hidden] {
  display: none;
}

/* the rail. Without JavaScript, or under reduced motion, it is a plain
   scrollable row. evidence.js adds .is-live to make it drift and drag. */
.ev-rail {
  margin-top: var(--space-250);
  overflow-x: auto;
  padding-block: 0.375rem 0.75rem;
  scrollbar-width: thin;
}

.ev-rail.is-live {
  overflow: hidden;
  padding-bottom: 0.375rem;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%);
}

.ev-rail.is-drag,
.ev-rail.is-drag * {
  cursor: grabbing;
}

.ev-rail__track {
  display: flex;
  width: max-content;
  padding-left: max(var(--grid-gutter-desktop), calc((100% - var(--grid-max-width)) / 2 + var(--grid-gutter-desktop)));
}

.ev-rail.is-live .ev-rail__track {
  will-change: transform;
}

.ev-rail__list {
  display: flex;
  gap: var(--space-200);
  margin: 0;
  padding: 0 var(--space-200) 0 0;
  list-style: none;
}

.ev-rail__list[hidden],
.ev-rail__item[hidden] {
  display: none;
}

.ev-rail__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
  width: clamp(15rem, 19vw, 18rem);
}

/* each card's source line and link: on the page without JavaScript, hidden
   once the rail is live because the featured block shows the current one */
.ev-rcard__src {
  font-size: 0.75rem;
  line-height: 1.45;
  flex-direction: column;
  align-items: flex-start;
}

.ev-rail.is-live .ev-rcard__src {
  display: none;
}

.ev-rcard {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
  flex: 1;
  padding: 1rem 1.125rem 1.125rem;
  text-align: left;
  background: var(--card);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

html[data-theme="dark"] .ev-rcard {
  background: #1D1714;
}

.ev-rcard:hover {
  border-color: var(--foreground);
}

.ev-rcard:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* the chosen card is marked by its background alone */
.ev-rcard[aria-pressed="true"] {
  background: linear-gradient(var(--ev-tint, var(--muted)), var(--ev-tint, var(--muted))), var(--card);
}

html[data-theme="dark"] .ev-rcard[aria-pressed="true"] {
  background: linear-gradient(var(--ev-tint, var(--muted)), var(--ev-tint, var(--muted))), #1D1714;
}

.ev-rcard__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
}

.ev-rcard__pub {
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.625rem;
  line-height: 1.35;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ev-rcard__n {
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--side-text);
  font-variant-numeric: tabular-nums;
}

.ev-rcard__w {
  font-size: 0.875rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ev-rcard__dt {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin-top: auto;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--muted-foreground);
}

.ev-rcard__dt .dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--side-text);
  flex: none;
  transform: translateY(-0.05rem);
}

@media (prefers-reduced-motion: reduce) {
  .ev-feat.is-fading {
    animation: none;
  }
}

html[data-motion="none"] .ev-feat.is-fading {
  animation: none;
}

@media (max-width: 860px) {
  .ev-feat {
    grid-template-columns: 1fr;
    gap: var(--space-300);
  }

  .ev-feat__ph {
    aspect-ratio: 16 / 10;
  }

  .ev-rail__tools {
    gap: var(--space-200);
  }
}

/* ---------- narrower ---------- */

@media (max-width: 900px) {
  .ev-feature__row {
    grid-template-columns: 1fr;
    gap: var(--space-500);
  }
}

@media (max-width: 700px) {
  .ev-profile__pic--placeholder {
    width: 5.5rem;
    height: 5.5rem;
    border-width: 0.1875rem;
  }

  .ev-profile__pic {
    width: 5.5rem;
    height: 5.5rem;
    border-width: 0.1875rem;
  }
}

/* ---------- Art's card on the home page (2026-10-02) ---------- */

/* The home feature carries the main quote alone above the two supporting
   quotes, so it gets more size and its closing phrase in rust. The Evidence
   page keeps the standard feature sizes. */
html[data-page="home"] #art .ev-hero-q p {
  font-size: clamp(1.85rem, 4.2vw, 3.5rem);
  line-height: 1.1;
  max-width: 24ch;
}

html[data-page="home"] #art .ev-hero-q__mark {
  font-size: clamp(3rem, 6vw, 5.25rem);
}

html[data-page="home"] #art .ev-hero-q__key {
  color: var(--primary);
  font-weight: 700;
}

html[data-page="home"][data-theme="dark"] #art .ev-hero-q__key {
  color: #E8683A;
}

/* the featured headshot: the ring takes the side colour like the chips */
.ev-profile__pic {
  background: var(--secondary);
}