/*
 * site.v2.css — the shared site shell stylesheet (template T1).
 *
 * The landing page's inline style moved here so every generated page gets the
 * same fonts, tokens, surfaces, base, layout primitives, states, motion, and
 * shell components (header/nav/buttons/footer) as the homepage. Homepage-only
 * CSS (the helix tokens/stage and the landing sections) stays inline in
 * site/index.html; page templates add the components under section 10. The
 * font faces are additionally inlined at the top of the homepage's head
 * partial: WebKit defers font loads declared only in an external stylesheet,
 * and the inline degradation contract (e2e F-02) depends on the faces being
 * available to document.fonts immediately.
 *
 * Load order on every page: this file first, then any page-specific inline
 * style, so page rules can still override shared rules at equal specificity.
 */
/* ==== 1. Font faces ==== */

@font-face {
  font-family: Newsreader;
  src: url('/fonts/newsreader-latin.v1.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('/fonts/instrument-sans-latin.v1.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Newsreader Fallback';
  src: local('Times New Roman'), local('Liberation Serif'), local('Georgia');
  ascent-override: 69.6835%;
  descent-override: 25.124%;
  line-gap-override: 0%;
  size-adjust: 105.4769%;
}

@font-face {
  font-family: 'Instrument Sans Fallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica');
  ascent-override: 94.4163%;
  descent-override: 24.3341%;
  line-gap-override: 0%;
  size-adjust: 102.7365%;
}

/* ==== 2. Tokens ==== */
:root {
  --color-ink: #121a33;
  --color-ink-2: #3a4780;
  --color-muted: #4a5372;
  --color-rule: #d4dbe8;
  --color-rule-soft: #dde3ee;
  --color-surface: #fff;
  --color-surface-tint: #f3f6fb;
  --color-base-a: #12a26b;
  --color-base-t: #e5484d;
  --color-base-c: #2f55d4;
  --color-base-g: #f2a516;
  --color-dust: #9faccb;
  --color-navy: #121a33;
  --color-band: #2f55d4;
  --color-link: #2f55d4;
  --color-link-hover: #1b3aa6;
  --color-prose: #2a3252;
  --color-white: #fff;
  --color-navy-link: #8fa8ff;
  --color-navy-muted: #c4cbe0;
  --color-band-muted: #e4eaff;
  --color-tag-red: #e61010;
  --color-tag-red-hover: #c40d0d;
  --color-tag-yellow: #f5c842;
  --color-tag-yellow-hover: #dcb02f;
  --color-tag-green: #4eba47;
  --color-tag-green-hover: #3fa339;
  --color-tag-cyan: #19b0cf;
  --color-tag-cyan-hover: #1396b2;
  --font-serif: 'Newsreader', 'Newsreader Fallback', georgia, serif;
  --font-sans: 'Instrument Sans', 'Instrument Sans Fallback', arial, sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --radius-sm: 8px;
  --radius-lg: 28px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --focus-width: 3px;
  --focus-offset: 2px;
}

/* ==== 3. Surfaces ==== */
.surface--light,
.surface--tint {
  --surface-fg: var(--color-ink);
  --surface-muted: var(--color-muted);
  --surface-link: var(--color-link);
  --surface-link-hover: var(--color-link-hover);
  --focus-color: var(--color-link);

  color: var(--surface-fg);
  background: var(--surface-bg);
}

.surface--light {
  --surface-bg: var(--color-surface);
}

.surface--tint {
  --surface-bg: var(--color-surface-tint);
}

.surface--navy {
  --surface-bg: var(--color-navy);
  --surface-fg: var(--color-white);
  --surface-muted: var(--color-navy-muted);
  --surface-link: var(--color-navy-link);
  --surface-link-hover: var(--color-white);
  --focus-color: var(--color-navy-link);

  color: var(--surface-fg);
  background: var(--surface-bg);
}

.surface--band {
  --surface-bg: var(--color-band);
  --surface-fg: var(--color-white);
  --surface-muted: var(--color-band-muted);
  --surface-link: var(--color-white);
  --surface-link-hover: var(--color-band-muted);
  --focus-color: var(--color-white);

  color: var(--surface-fg);
  background: var(--surface-bg);
}

/* Backgrounds stay full-bleed above 1440 px (MQ2): each surface paints its colour sideways past the capped box. */
.surface--light,
.surface--tint,
.surface--navy,
.surface--band {
  position: relative;
  isolation: isolate;
}

.surface--light::before,
.surface--tint::before,
.surface--navy::before,
.surface--band::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline: -100vmax;
  z-index: -1;
  background: var(--surface-bg);
}

/* ==== 4. Base ==== */
html,
body {
  overflow-x: clip; /* the full-bleed surface backgrounds never add horizontal scroll */
}

body {
  margin: 0;
  background: var(--color-surface);
}

:where(a) {
  color: var(--surface-link, var(--color-link));
}

/* Media never outgrows its column (width/height attributes only reserve the ratio). */
:where(img) {
  max-width: 100%;
  height: auto;
}

/* Long bare URLs in link text wrap instead of running past the viewport edge. */
:where(main a) {
  overflow-wrap: anywhere;
}

:where(a):hover {
  color: var(--surface-link-hover, var(--color-link-hover));
}

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

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-navy);
  color: var(--color-white);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

:where(main):focus {
  outline: none;
}

/* ==== 5. Layout primitives ==== */
.container {
  box-sizing: border-box;
  max-width: 1440px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #121a33;
  font-family: 'Instrument Sans', 'Helvetica Neue', sans-serif;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-3));
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--space-3));
}

/* Target contract (§4.2): standalone links and controls get a 44 x 44 px target. */
.tap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start; /* a link stretched by a column flex parent keeps its text at the start edge */
  min-height: 44px;
  min-width: 44px;
}

/* Controls that draw their own box centre their label. */
.button,
.nav__toggle,
.skip-link,
.media__button,
.cta-band__button {
  justify-content: center;
}

/* In-sentence links (Q11): block padding grows the hit area without changing line boxes. */
.prose a {
  padding-block: 0.35em;
}

/* site-footer (T1 shell) */
.site-footer {
  flex-grow: 1;
  padding: 56px 80px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  font-size: 15px;
  color: var(--surface-muted);
}

.site-footer__id {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-footer__name {
  font-family: var(--font-serif);
  font-size: 26px;
  color: var(--color-white);
}

.site-footer__nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.site-footer a {
  color: var(--color-white);
}

.button {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  text-decoration: none;
}

.button--primary,
.button--nav {
  background: var(--color-link);
  color: var(--color-white);
}

.button--nav {
  height: 44px;
  padding: 0 20px;
}

.button--primary,
.button--outline {
  height: 52px;
  box-sizing: border-box;
  padding: 0 26px;
  font-size: 16px;
  font-weight: 600;
}

.button--primary:hover,
.button--nav:hover {
  color: var(--color-white);
}

.button--outline {
  border: 1.5px solid var(--color-ink);
  color: var(--color-ink);
}

.button--outline:hover {
  color: var(--color-ink);
}

.site-header {
  --delay: 0.1s;

  /* min-height rather than a fixed height: the 13-link nav wraps to a second row at
     mid widths, so the header grows with the wrapped content instead of clipping it. */
  min-height: 88px;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 0 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
}

.site-header__brand {
  font-family: var(--font-serif);
  font-size: 25px;
  color: var(--surface-fg);
  text-decoration: none;
}

.site-header__brand:hover {
  color: var(--surface-fg);
}

.nav {
  display: flex;
  align-items: center;
  margin-left: auto;
  font-size: 15px;
  font-weight: 500;
}

.nav__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__toggle {
  display: none;
}

.nav__link {
  color: var(--surface-fg);
  text-decoration: none;
}

.nav__link:hover {
  color: var(--surface-fg);
}

/* ==== 7. States ==== */
:focus-visible {
  outline: var(--focus-width) solid var(--focus-color, var(--color-link));
  outline-offset: var(--focus-offset);
}

/* ==== 8. Motion ==== */
@keyframes rise-a {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Base styles equal the final state; each element's --delay is ported from the reference. */
.rise {
  animation: rise-a 0.9s var(--ease-out) both;
  animation-delay: var(--delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .rise {
    animation: none !important; /* stylelint-disable-line declaration-no-important */
  }
}

@media (max-width: 1439.98px) {
  .site-header {
    padding: 0 clamp(32px, 5vw, 80px);
  }
  .nav {
    font-size: 14px;
    gap: clamp(20px, 2.4vw, 34px);
  }
  .nav__list {
    gap: clamp(8px, 0.8vw, 14px);
  }
}

@media (max-width: 1023.98px) {
  .site-header {
    position: relative;
    /* Stack above the page sections and the hero (some carry their own z-index so the
       helix canvas can layer); without this the open nav panel paints underneath them
       and its links cannot be tapped. */
    z-index: 20;
    padding: 0 16px;
    gap: var(--space-2);
  }
  .site-header__brand {
    font-size: 22px;
    line-height: 1.1;
  }
  .site-header__cta {
    padding: 0 14px;
    font-size: 14px;
    white-space: nowrap;
  }
  .js .nav__toggle {
    display: inline-flex;
    border: 1.5px solid var(--surface-fg);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--surface-fg);
    font: inherit;
    padding: 0 18px;
    cursor: pointer;
  }
  .js .nav__list:not(.is-open) {
    display: none;
  }
  .js .nav__list.is-open {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 16px 16px;
    background: var(--surface-bg);
    border-bottom: 1px solid var(--color-rule);
    box-shadow: 0 12px 24px -12px rgb(18 26 51 / 25%);
  }
  .site-footer {
    padding: var(--space-5) 16px;
    flex-direction: column;
    gap: var(--space-4);
  }
  .site-footer__nav {
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
  }
}

/* ==== 10. Template components (T2-T5) ==== */
/* Shared page scaffolding; scoped under .page so the homepage keeps its own layout. */
.page {
  --stack-gap: var(--space-5);

  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
  padding: var(--space-6) 80px var(--space-8);
}

.page__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 900px;
}

.page__eyebrow {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--surface-muted);
}

.page__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 52px;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.page__meta {
  margin: 0;
  font-size: 15px;
  color: var(--surface-muted);
}

.page__actions {
  --cluster-gap: var(--space-3);

  margin-top: var(--space-2);
  font-size: 16px;
  font-weight: 600;
}

.page__banner {
  margin: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface-tint);
  overflow: hidden;
}

.page__banner img {
  display: block;
  width: 100%;
  height: auto;
}

.section-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Prose body shared by T2 pages and the abstract blocks of T3. */
.prose-page {
  --stack-gap: var(--space-4);

  max-width: 660px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--color-prose);
}

.prose-page p {
  margin: 0;
}

.prose-page h2,
.prose-page h3 {
  margin: var(--space-5) 0 0;
  font-family: var(--font-serif);
  font-weight: 500;
}

.prose-page h2 {
  font-size: 30px;
  line-height: 1.15;
}

.prose-page h3 {
  font-size: 24px;
  line-height: 1.2;
}

.prose-page ul,
.prose-page ol {
  margin: 0;
  padding-left: 1.4em;
}

.prose-page img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.prose-page figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.prose-page figcaption {
  font-size: 14px;
  color: var(--surface-muted);
}

/* T3: publication page. */
.pub__authors,
.pub__venue {
  margin: 0;
  font-size: 17px;
}

.pub__authors {
  font-weight: 500;
}

.pub__venue {
  color: var(--surface-muted);
}

.pub__abstract {
  max-width: 660px;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface-tint);
}

.pub__figure {
  margin: 0;
  max-width: 660px;
}

.pub__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.pub__figcaption {
  padding-top: var(--space-2);
  font-size: 14px;
  color: var(--surface-muted);
}

.pub__links {
  --cluster-gap: var(--space-4);

  font-size: 16px;
  font-weight: 600;
}

.pub__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* T4: card-grid index.
   Grid ladder (sd-less-scroll): one column under 600 px, two from 600 px,
   three from 1000 px. The member-photo modifier (card-grid--two) keeps two
   columns down to the smallest width — portrait rosters at one phone column
   nearly doubled the team page's scroll length — and joins the three-column
   tier from 1000 px up. */
.card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

/* Card-grid ladder for wider screens (sd-less-scroll): two columns from 600 px,
   three from 1000 px. */
@media (min-width: 600px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.card-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1000px) {
  .card-grid,
  .card-grid--two {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Compact cards: the media crop is capped so wide cards do not push one image
   past two viewport lines; aspect-ratio 4 / 3 stays the preferred shape. */
.card {
  --card-pad: var(--space-4);

  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--card-pad);
  border-radius: var(--radius-lg);
  background: var(--color-surface-tint);
  text-decoration: none;
}

.card:hover,
.card:focus-visible {
  background: var(--color-rule-soft);
}

.card__media {
  margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 0;
  min-height: 44px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--color-rule-soft);
  overflow: hidden;
}

.card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: clamp(170px, 42vw, 240px);
  object-fit: cover;
}

.card__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
}

.card__date {
  font-size: 14px;
  color: var(--surface-muted);
}

.card__teaser {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-prose);
}

/* Chips: pill links for year navigation and per-card actions (publications
   index). Outline by default; --primary (Paper) is the filled main action.
   Per-link colors follow the live site: BibTeX red, Publication Details
   yellow, Video green, Poster cyan. Text is white on blue and red, ink on the
   lighter fills (white fails contrast there). */
.year-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1.5px solid var(--color-dust);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.chip:hover {
  border-color: var(--color-link);
  color: var(--color-link-hover);
}

.chip--primary,
.chip--primary:hover {
  border-color: var(--color-link);
  background: var(--color-link);
  color: var(--color-white);
}

.chip--primary:hover {
  border-color: var(--color-link-hover);
  background: var(--color-link-hover);
}

.chip--bibtex,
.chip--bibtex:hover {
  border-color: var(--color-tag-red);
  background: var(--color-tag-red);
  color: var(--color-white);
}

.chip--bibtex:hover {
  border-color: var(--color-tag-red-hover);
  background: var(--color-tag-red-hover);
}

.chip--details,
.chip--details:hover {
  border-color: var(--color-tag-yellow);
  background: var(--color-tag-yellow);
  color: var(--color-ink);
}

.chip--details:hover {
  border-color: var(--color-tag-yellow-hover);
  background: var(--color-tag-yellow-hover);
}

.chip--video,
.chip--video:hover {
  border-color: var(--color-tag-green);
  background: var(--color-tag-green);
  color: var(--color-ink);
}

.chip--video:hover {
  border-color: var(--color-tag-green-hover);
  background: var(--color-tag-green-hover);
}

.chip--poster,
.chip--poster:hover {
  border-color: var(--color-tag-cyan);
  background: var(--color-tag-cyan);
  color: var(--color-ink);
}

.chip--poster:hover {
  border-color: var(--color-tag-cyan-hover);
  background: var(--color-tag-cyan-hover);
}

/* "New" marker beside a date. */
.badge {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-base-g);
  color: var(--color-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Publications index cards: figures are shown whole (no crop, captions stay
   readable), card titles read as headings not link blocks, and the action row
   sits at the bottom so buttons line up across a grid row. */
.card-grid--pubs .card__media {
  background: var(--color-surface);
}

.card-grid--pubs .card__media img {
  box-sizing: border-box;
  max-height: clamp(190px, 46vw, 260px);
  padding: var(--space-2);
  object-fit: contain;
}

.card-grid--pubs .card__title a {
  color: var(--color-ink);
  text-decoration: none;
}

.card-grid--pubs .card__title a:hover,
.card-grid--pubs .card__title a:focus-visible {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.card-grid--pubs .page__actions {
  margin-top: auto;
  padding-top: var(--space-2);
}

/* T5: member page. */
.member {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.member__photo {
  margin: 0;
}

.member__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  background: var(--color-surface-tint);
}

.member__name {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.member__role {
  margin: var(--space-2) 0 0;
  font-size: 18px;
  color: var(--surface-muted);
}

.member__links {
  --cluster-gap: var(--space-4);

  margin-top: var(--space-3);
  font-size: 16px;
  font-weight: 600;
}

.member__bio {
  max-width: 660px;
}

/* BibTeX subpage block (kept as its own legacy-URL page per the migration plan). */
.bibtex {
  max-width: 760px;
  padding: var(--space-4);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}

.bibtex pre {
  margin: 0;
  font:
    14px ui-monospace,
    'SF Mono',
    'Cascadia Mono',
    monospace;
  line-height: 1.5;
  color: var(--color-prose);
}

/* Accessible disclosure (sd-less-scroll): long secondary text — publication
   teasers, posting details, course catalogs — collapses without moving its
   content out of the DOM or the accessibility tree. */
.disclosure {
  padding: 0 var(--space-4);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
}

.disclosure__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  color: var(--color-link);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

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

.disclosure__summary::after {
  content: '›';
  font-size: 20px;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform 0.2s var(--ease-out);
}

.disclosure[open] > .disclosure__summary::after {
  transform: rotate(-90deg);
}

.disclosure__body {
  padding-bottom: var(--space-3);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-prose);
}

/* Back-to-top control (sd-less-scroll): floating on very long pages; the shell
   script reveals it past the first viewport. Hidden until then. */
.to-top {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 15;
  width: 48px;
  height: 48px;
  box-sizing: border-box;
  border: 1.5px solid var(--color-navy);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s var(--ease-out),
    visibility 0s linear 0.2s;
}

.to-top[data-visible] {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s var(--ease-out);
}

/* 404 page. */
.error {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-8) 80px;
}

.error__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 52px;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.error__text {
  margin: 0;
  max-width: 620px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-prose);
}

.error__actions {
  --cluster-gap: var(--space-3);

  font-size: 16px;
  font-weight: 600;
}

/* Template breakpoints mirror the landing page's rhythm. Small screens tighten
   the vertical rhythm (sd-less-scroll): 32 / 48 page padding and 24 px stack gaps. */
@media (max-width: 1023.98px) {
  .page {
    --stack-gap: var(--space-4);

    padding: var(--space-5) 16px var(--space-6);
  }

  .error {
    padding: var(--space-6) 16px;
  }

  .page__title {
    font-size: clamp(34px, 7vw, 52px);
  }

  .member {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .to-top {
    right: 8px;
    bottom: 8px;
  }
}

@media (max-width: 767.98px) {
  .card {
    --card-pad: var(--space-3);
  }

  .card__title {
    font-size: 20px;
  }

  .page__title,
  .member__name,
  .error__title {
    font-size: clamp(28px, 8vw, 52px);
  }

  .to-top {
    width: 44px;
    height: 44px;
  }
}