/* The five chapters, in page order. */

/* =============================================================== */
/* 01 · Hero: Fourier series                                        */
/* =============================================================== */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-eyebrow { position: absolute; top: calc(var(--topbar) + 28px); left: var(--pad); }

.hero-name {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  top: 30%;
  font: 400 clamp(64px, 14vw, 220px) / 0.95 var(--serif);
  letter-spacing: -0.01em;
}
/* With the canvas, the monogram JPT is drawn above and the full name is set
   beneath it, at the spot the Fourier layout reports (--name-top). */
.js .hero-name { opacity: 0; }
.js .hero.has-canvas .hero-name {
  top: calc(var(--name-top, 60vh) + clamp(10px, 1.6vh, 22px));
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  font: 400 clamp(24px, 3.1vw, 46px) / 1.05 var(--serif);
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.6s var(--ease-io) 0.2s;
}
.js .hero.has-canvas .hero-name::before,
.js .hero.has-canvas .hero-name::after {
  content: '';
  display: inline-block;
  width: 0.9em;
  height: 1px;
  margin: 0 0.35em;
  vertical-align: 0.3em;
  background: var(--accent);
}
.js .hero.no-canvas .hero-name { opacity: 1; }

.hero-foot {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: clamp(28px, 6vh, 64px);
  display: grid;
  align-items: end;
}
.hero-intro {
  max-width: 34ch;
  font: 400 clamp(17px, 1.45vw, 21px) / 1.45 var(--sans);
  color: var(--ink-2);
  text-wrap: pretty;
}
.hero-intro em { font-family: var(--serif); font-size: 1.12em; color: var(--ink); }

/* With the monogram drawn, the intro sits centred right under the name, wide enough
   for three or four lines. */
.js .hero.has-canvas .hero-foot {
  top: calc(var(--name-top, 60vh) + clamp(92px, 12.5vh, 128px));
  bottom: auto;
  justify-items: center;
  text-align: center;
}
.js .hero.has-canvas .hero-intro { max-width: min(760px, 100%); text-wrap: balance; }

.hero-harmonics {
  position: absolute;
  top: calc(var(--topbar) + 54px);
  left: var(--pad);
  display: grid;
  gap: 4px;
  width: clamp(150px, 16vw, 220px);
  z-index: 2;
}
.hero-harmonics .label { font: 400 10.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }


@media (max-width: 760px) {
  .hero-foot { bottom: 56px; }
  .js .hero.has-canvas .hero-foot { top: auto; bottom: 56px; justify-items: start; text-align: left; }
  .js .hero.has-canvas .hero-intro { max-width: 34ch; text-wrap: pretty; }
}

/* =============================================================== */
/* About                                                            */
/* =============================================================== */
.about {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(24px, 4vh, 48px) var(--pad) clamp(64px, 10vh, 120px);
}
.about-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;

}
.about-cols > div { display: grid; gap: 12px; align-content: start; color: var(--ink-2); max-width: 36ch; }
.about-cols > div:nth-child(2) { transition-delay: 0.08s; }
.about-cols > div:nth-child(3) { transition-delay: 0.16s; }
.about-cols strong { color: var(--ink); font-weight: 500; }
.about-cols .lead { color: var(--accent); font-weight: 500; }
@media (max-width: 760px) { .about-cols { grid-template-columns: 1fr; gap: 28px; } }

/* =============================================================== */
/* 02 · Monte Carlo paths                                           */
/* =============================================================== */
.paths { position: relative; height: 150vh; } /* plays itself; a short pinned dwell */
.paths-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(16px, 3vh, 32px);
  padding: calc(var(--topbar) + 20px) var(--pad) clamp(20px, 4vh, 40px);
  max-width: 1840px;
  margin: 0 auto;
}
.paths-head { display: grid; gap: 14px; }
.paths-head .title { font-size: clamp(28px, 3.2vw, 50px); }

.paths-stage {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 6px;
  min-height: 0;
}
.paths-plot { position: relative; min-height: 0; }
.paths-plot canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.paths-hud {
  position: absolute;
  top: 0;
  left: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font: 400 11.5px/1.4 var(--mono);
  color: var(--ink-3);
  pointer-events: none;
}
.paths-hud span:first-child { color: var(--ink); font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.1; }
[data-hud-sample] { color: var(--accent); }
.paths-hud { align-items: center; }
.paths-replay { pointer-events: auto; }

/* Milestones: cards that pop out of the life line and land here, in rows,
   each tied to its year by a leader. Crowded rows fan out like a deck. */
.paths-timeline { display: grid; gap: 4px; min-width: 0; }
.ms-caption {
  font: 400 12px/1.5 var(--mono);
  color: var(--ink-2);
  min-height: 1.5em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-band { position: relative; height: 150px; }
.ms-leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ms-leaders line { stroke: var(--accent); stroke-width: 1; opacity: 0; transition: opacity 0.25s; }
.ms-leaders line.on { opacity: 0.4; transition: opacity 0.5s 0.7s; }
.ms-cards { list-style: none; padding: 0; margin: 0; }
.ms-card {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 11px 13px 12px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 8px 18px -14px rgba(18, 18, 18, 0.5);
  opacity: 0;
  transform-origin: 15px 0;
  will-change: transform, opacity;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.ms-card::before {
  content: '';
  position: absolute;
  left: 13px;
  top: -3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.ms-card.is-active { border-color: var(--accent); box-shadow: 0 10px 22px -14px rgba(255, 77, 31, 0.6); }
.ms-card:hover { border-color: var(--ink-3); z-index: 99 !important; }
.ms-head { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.ms-when { font: 500 11px/1 var(--mono); color: var(--accent); letter-spacing: 0.04em; white-space: nowrap; }
.ms-logo { height: 20px; width: auto; max-width: 64px; object-fit: contain; border-radius: 4px; flex: none; }
.ms-card.is-on { cursor: pointer; }
.ms-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ms-card.is-lifted { visibility: hidden; }
.ms-more {
  position: absolute;
  right: 9px;
  bottom: 6px;
  font: 400 14px/1 var(--mono);
  color: var(--ink-3);
  opacity: 0.55;
  transition: opacity 0.2s, color 0.2s, transform 0.2s;
}
.ms-card:hover .ms-more, .ms-card:focus-visible .ms-more { opacity: 1; color: var(--accent); transform: scale(1.25); }

/* A card, opened: it grows from its own box into this panel. */
.ms-scrim {
  position: absolute;
  inset: 0;
  z-index: 200;
  background: color-mix(in srgb, var(--paper) 60%, transparent);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-io);
}
.ms-scrim.is-on { opacity: 1; pointer-events: auto; }
.ms-detail {
  position: absolute;
  z-index: 201;
  display: none;
  transform-origin: 0 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  border: 1px solid var(--accent);
  border-radius: 16px;
  box-shadow: 0 30px 70px -34px rgba(18, 18, 18, 0.5);
  outline: none;
}
.ms-detail.is-open { display: block; }
.ms-d-inner { position: relative; display: grid; gap: 10px; padding: 22px 26px 24px; opacity: 0; transition: opacity 0.25s; }
.ms-detail.is-ready .ms-d-inner { opacity: 1; }
.ms-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-2);
  font: 400 20px/1 var(--sans);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.ms-close:hover, .ms-close:focus-visible { border-color: var(--accent); color: var(--accent); }
.ms-d-head { display: flex; align-items: center; gap: 14px; min-height: 34px; padding-right: 44px; }
.ms-d-head .ms-when { font-size: 12px; }
.ms-d-org { display: inline-flex; }
.ms-d-logo { height: 34px; width: auto; max-width: 240px; object-fit: contain; border-radius: 6px; }
.ms-d-title { font: 400 clamp(26px, 2.6vw, 34px) / 1.05 var(--serif); letter-spacing: -0.01em; text-wrap: balance; }
.ms-d-where { font: 400 12px/1.4 var(--mono); color: var(--ink-3); }
.ms-d-body { display: grid; gap: 20px; margin-top: 6px; }
.ms-d-body.has-image { grid-template-columns: minmax(0, 1fr) 210px; align-items: start; }
.ms-d-text { display: grid; gap: 12px; }
.ms-d-summary { font: 400 15.5px/1.55 var(--sans); color: var(--ink); text-wrap: pretty; }
.ms-d-label { margin: 6px 0 -2px; font: 500 10.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.ms-d-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ms-d-points li { position: relative; padding-left: 18px; font: 400 14px/1.5 var(--sans); color: var(--ink-2); text-wrap: pretty; }
.ms-d-points li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 9px; height: 1px; background: var(--accent); }
.ms-d-figure { margin: 0; }
.ms-d-figure img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid var(--rule); }
.ms-d-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ms-where {
  font: 400 11.5px/1.3 var(--sans);
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-title {
  font: 450 13.5px/1.32 var(--sans);
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: balance;
}

@media (max-width: 640px) {
  .ms-card { padding: 8px 9px 9px; gap: 4px; }
  .ms-title { font-size: 12px; line-height: 1.28; }
  .ms-where { font-size: 10.5px; }
  .ms-logo { height: 16px; max-width: 52px; }
  .ms-d-inner { padding: 18px 18px 20px; }
  .ms-d-body.has-image { grid-template-columns: 1fr; }
  .ms-d-figure { order: -1; }
  .ms-d-logo { height: 28px; max-width: 190px; }
  .ms-caption { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 3em; font-size: 11px; }
}

/* Interlude between the Monte Carlo and model chapters. */
.descent {
  height: 40vh;
  display: grid;
  place-items: center;
  background: var(--paper);
  font: 400 12px/1 var(--mono);
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

/* =============================================================== */
/* 03 · Inside the model                                            */
/* =============================================================== */
.model { --focus: 0; --side: 0px; position: relative; height: 1000vh; /* six layers; 70vh of it is the arrival hold (MODEL_HOLD in main.js) */ background: var(--paper); color: var(--ink); --intro: 1; --outro: 0; }
.model-sticky { position: sticky; top: 0; z-index: 31; height: 100vh; height: 100svh; overflow: hidden; }
/* z-index 31: above §02's falling futures (.bridge-canvas, 30), so they pour in
   behind the network and its text rather than over them. */
.model-sticky canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.model .eyebrow, .card .eyebrow, .next .eyebrow, .model .label, .card .label, .next .label { color: var(--ink-3); }

.model-labels { position: absolute; inset: 0; pointer-events: none; isolation: isolate; }
/* A soft wash of paper behind the layer being read, so its content sits in
   front of the network rather than inside its wiring. */
.model-labels::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 62% 52% at calc(var(--side) + (100% - var(--side)) / 2) 50%, color-mix(in srgb, var(--paper) 82%, transparent) 0%, color-mix(in srgb, var(--paper) 55%, transparent) 55%, transparent 80%);
  opacity: calc(var(--focus) * 0.7);
}
.neuron {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
  opacity: 0;
  text-align: left;
  will-change: transform, opacity;
}
.neuron.is-vis { visibility: visible; }
.neuron.is-live { pointer-events: auto; }
.neuron-inner {
  display: grid;
  gap: 4px;
  max-width: min(270px, 58vw);
  padding: 12px 15px 13px;
  transform: translate(16px, -50%);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 14px 30px -20px rgba(18, 18, 18, 0.45), 0 1px 0 rgba(18, 18, 18, 0.04);
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s, transform 0.35s var(--ease);
}
.neuron--left .neuron-inner { transform: translate(calc(-100% - 16px), -50%); text-align: right; }
.neuron-id { font: 400 10px/1 var(--mono); color: var(--ink-3); letter-spacing: 0.04em; }
.neuron-title { font: 400 21px/1.06 var(--serif); color: var(--ink); }
.neuron-sum {
  font: 400 12.5px/1.4 var(--sans);
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}
.neuron-tag { display: flex; justify-content: space-between; gap: 10px; margin-top: 2px; font: 400 11px/1.3 var(--mono); color: var(--accent); }
.neuron-open { color: var(--ink-3); transition: color 0.2s, transform 0.2s; }
.neuron:hover .neuron-inner, .neuron:focus-visible .neuron-inner {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--paper) 94%, var(--accent));
  box-shadow: 0 18px 36px -20px rgba(255, 77, 31, 0.45);
  transform: translate(20px, -50%);
}
.neuron:hover .neuron-open, .neuron:focus-visible .neuron-open { color: var(--accent); transform: translateX(3px); }
.neuron:focus-visible { outline: none; }

.neuron--token .neuron-inner { padding: 6px 11px; border-radius: 999px; transform: translate(12px, -50%); }
.neuron--token:hover .neuron-inner, .neuron--token:focus-visible .neuron-inner { transform: translate(15px, -50%); }
.neuron--token .neuron-title { font: 400 13px/1 var(--mono); white-space: nowrap; }
.neuron--token[data-group='genai'] .neuron-inner { border-color: rgba(255, 77, 31, 0.35); }
.neuron--token[data-group='opt'] .neuron-inner { border-color: rgba(59, 91, 219, 0.35); }
.neuron--token[data-group='eng'] .neuron-inner { border-color: rgba(43, 138, 78, 0.35); }

/* As the last layer passes, the network dissolves into paper so the résumé follows without a cut. */
.model-sticky::after { content: ''; position: absolute; inset: 0; z-index: 3; background: var(--paper); opacity: calc(var(--outro) * 0.92); transition: none; pointer-events: none; }
.model-outro {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-items: center;
  font: 400 13px/1 var(--mono);
  letter-spacing: 0.06em;
  color: var(--ink-2);
  opacity: var(--outro);
  pointer-events: none;
  left: var(--side);
}

/* The layer menu: a column on the left with the chapter title and the four
   layers; the one in view is expanded. Portrait: a strip of tabs on top. */
.model-side {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: var(--side);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 3vh, 30px);
  padding: calc(var(--topbar) + clamp(12px, 3vh, 32px)) 24px 28px var(--pad);
  background: var(--paper);
  border-right: 1px solid var(--rule);
  overflow-y: auto;
  scrollbar-width: none;
}
.model-head { display: grid; gap: 12px; }
.model-head .title { font-size: clamp(30px, 2.5vw, 42px); }
.model-head .note { font: 400 12px/1.5 var(--mono); color: var(--ink-3); max-width: 32ch; }
.model-menu { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.model-item {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  display: grid;
  gap: 6px;
  padding: 10px 16px 11px;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.model-item:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.model-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.model-item.on {
  border-color: var(--rule);
  background: color-mix(in srgb, var(--paper) 55%, #fff);
  box-shadow: 0 16px 32px -26px rgba(18, 18, 18, 0.5);
}
.model-op { font: 500 11px/1 var(--mono); color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.3s; }
.model-item.on .model-op { color: var(--accent); }
.model-title { font: 400 21px/1.05 var(--serif); letter-spacing: -0.005em; color: var(--ink-2); transition: color 0.3s; }
.model-item.on .model-title { color: var(--ink); }
.model-span { font: 400 11.5px/1 var(--mono); color: var(--ink-3); }
.model-item:not(.on) .model-span { display: none; } /* dates only for the layer in view */
.model-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
.model-item.on .model-more { grid-template-rows: 1fr; }
.model-blurb { overflow: hidden; min-height: 0; font: 400 14px/1.5 var(--sans); color: var(--ink); text-wrap: pretty; }
.model-item.on .model-blurb { padding-top: 4px; }
.model-detail { display: none; }

.model.is-portrait .model-side {
  right: 0;
  bottom: auto;
  width: auto;
  gap: 10px;
  padding: calc(var(--topbar) + 6px) 12px 12px;
  border-right: 0;
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: visible;
}
.model.is-portrait .model-head { gap: 6px; }
.model.is-portrait .model-head .title { font-size: 24px; }
.model.is-portrait .model-head .note { display: none; }
.model.is-portrait .model-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.model.is-portrait .model-item { padding: 8px 4px; justify-items: center; border-color: var(--rule); }
.model.is-portrait .model-item .model-title,
.model.is-portrait .model-item .model-span,
.model.is-portrait .model-item .model-more { display: none; }
.model.is-portrait .model-op { font-size: 10px; letter-spacing: 0.02em; }
.model.is-portrait .model-detail { display: grid; gap: 4px; }
.model.is-portrait .model-detail .model-title { font-size: 22px; color: var(--ink); }
.model.is-portrait .model-detail .model-blurb {
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.model-detail.swap > * { animation: hud-in 0.6s var(--ease) both; }
.model-detail.swap > :nth-child(2) { animation-delay: 0.06s; }
@keyframes hud-in { from { opacity: 0; transform: translateY(8px); } }
.model.is-portrait .neuron-sum { display: none; }


/* =============================================================== */
/* 04 · Model card                                                  */
/* =============================================================== */
.card, .next { background: var(--paper); color: var(--ink); }
/* The résumé slides up over the end of the pinned Catalogue instead of waiting for it to
   finish, so there is no empty stretch between the two. */
.card { position: relative; z-index: 32; margin-top: -52vh; padding: clamp(72px, 11vh, 130px) var(--pad) clamp(64px, 10vh, 120px); }
.card > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.card .title { margin-top: 20px; }

.mc { margin-top: clamp(40px, 7vh, 72px); border: 1px solid var(--rule); border-radius: 18px; overflow: hidden; background: var(--paper-2); }
/* The card rises out of the page as it scrolls in (ui/rise.js sets --rise from 0 to 1). */
.js .mc[data-rise] {
  transform-origin: 50% 0;
  transform: translateY(calc((1 - var(--rise, 1)) * 90px)) scale(calc(0.93 + 0.07 * var(--rise, 1)));
  opacity: calc(0.15 + 0.85 * var(--rise, 1));
  box-shadow: 0 calc(10px + 36px * var(--rise, 1)) calc(20px + 50px * var(--rise, 1)) calc(-24px) rgba(18, 18, 18, calc(0.5 * var(--rise, 1)));
  will-change: transform, opacity;
  transition: none;
}
.mc-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px 24px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-3);
}
.mc-id { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; font: 400 14px/1.3 var(--mono); }
.mc-owner { color: var(--ink-3); }
.mc-ver { margin-left: 10px; padding: 3px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: 11.5px; }
/* A quiet download link in the card's top-right corner. */
.mc-head { position: relative; padding-right: 190px; }
.mc-download { position: absolute; top: 20px; right: 24px; font: 400 12.5px/1.3 var(--mono); letter-spacing: 0.02em; color: color-mix(in srgb, var(--accent) 62%, transparent); transition: color 0.2s; }
.mc-download:hover, .mc-download:focus-visible { color: var(--accent); }
@media (max-width: 600px) {
  .mc-head { padding-right: 18px; }
  .mc-download { position: static; }
}
.mc-badges { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mc-badges li { padding: 4px 10px; border: 1px solid var(--rule); border-radius: 999px; font: 400 11px/1.2 var(--mono); color: var(--ink-2); }

.mc-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.mc-rows { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-content: start; padding: 8px 24px 24px; }
.mc-rows dt, .mc-rows dd { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.mc-rows dt { font: 500 11px/1.6 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding-right: 16px; }
.mc-rows dd { color: var(--ink); font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.mc-rows dt:nth-last-of-type(1), .mc-rows dd:last-of-type { border-bottom: 0; }
.mc-caps { list-style: none; padding: 0; display: grid; gap: 12px; }
.mc-caps li { display: grid; gap: 2px; }
.mc-caps strong { font-weight: 500; }
.mc-caps span { color: var(--ink-2); font-size: 14.5px; }

.mc-side { display: grid; align-content: start; border-left: 1px solid var(--rule); }
.mc-side section { display: grid; gap: 14px; padding: 24px; border-bottom: 1px solid var(--rule); }
.mc-side section:last-child { border-bottom: 0; }
.mc-evals { width: 100%; border-collapse: collapse; font-size: 14px; }
.mc-evals th { text-align: left; font: 400 10.5px/1 var(--mono); color: var(--ink-3); padding-bottom: 8px; border-bottom: 1px solid var(--rule); letter-spacing: 0.06em; text-transform: uppercase; }
.mc-evals th:last-child, .mc-evals td:last-child { text-align: right; }
.mc-evals td { padding: 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.mc-evals tr:last-child td { border-bottom: 0; }
.mc-evals small { display: block; color: var(--ink-3); font: 400 11px/1.4 var(--mono); margin-top: 3px; }
.mc-score { font: 400 26px/1 var(--serif); color: var(--accent); white-space: nowrap; padding-left: 16px !important; }
.mc-list { list-style: none; padding: 0; display: grid; gap: 8px; color: var(--ink-2); font-size: 14px; }
.mc-list li { padding-left: 16px; position: relative; }
.mc-list li::before { content: '›'; position: absolute; left: 0; color: var(--ink-3); font-family: var(--mono); }
.mc-list a:hover { color: var(--accent); }
.mc-group { display: grid; gap: 8px; }
.mc-group + .mc-group { margin-top: 6px; }
.mc-sub { margin: 0; font: 500 14px/1.3 var(--sans); color: var(--ink); }
.mc-cite { font: 400 12px/1.6 var(--mono); color: var(--ink-2); white-space: pre; overflow-x: auto; padding: 14px; background: var(--paper); border-radius: 10px; border: 1px solid var(--rule); }

@media (max-width: 980px) {
  .mc-grid { grid-template-columns: 1fr; }
  .mc-side { border-left: 0; border-top: 1px solid var(--rule); }
}
@media (max-width: 600px) {
  .mc-rows { grid-template-columns: 1fr; padding: 4px 18px 18px; }
  .mc-rows dt { padding: 18px 0 4px; border-bottom: 0; }
  .mc-rows dd { padding-top: 0; }
  .mc-head, .mc-side section { padding: 18px; }
}

/* =============================================================== */
/* 05 · Contact                                                  */
/* =============================================================== */
.next { padding: clamp(96px, 16vh, 180px) var(--pad) clamp(80px, 14vh, 160px); }
.next > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.next .title { margin-top: 16px; }

.contact-list { list-style: none; padding: 0; margin: clamp(40px, 8vh, 80px) auto 0; border-top: 1px solid var(--rule); }
.contact-list li { border-bottom: 1px solid var(--rule); }
.contact-list a {
  display: grid;
  grid-template-columns: minmax(120px, 280px) minmax(0, 1fr) 24px;
  align-items: baseline;
  gap: 20px;
  padding: 22px 8px;
  transition: background 0.2s;
}
.c-name { font: 400 clamp(26px, 3vw, 40px) / 1 var(--serif); letter-spacing: -0.01em; }
.c-detail { font: 400 clamp(13px, 1.1vw, 15px) / 1.3 var(--mono); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-go { color: var(--ink-3); transition: transform 0.25s var(--ease), color 0.25s; }
.contact-list a:hover { background: rgba(18, 18, 18, 0.04); }
.contact-list a:hover .c-go { color: var(--accent); transform: translate(2px, -2px); }
.contact-list a:hover .c-name { color: var(--accent); }

/* The last option: the personal side, with a strip of photographs. */
.contact-more {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin: clamp(32px, 6vh, 56px) auto 0;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: color-mix(in srgb, var(--paper) 55%, #fff);
  transition: border-color 0.25s, transform 0.3s var(--ease);
}
.contact-more:hover { border-color: var(--accent); }
.cm-text { display: grid; gap: 14px; justify-items: start; }
.cm-title { font: 400 clamp(30px, 3.4vw, 52px) / 1 var(--serif); letter-spacing: -0.015em; }
.cm-note { max-width: 40ch; color: var(--ink-2); text-wrap: pretty; }
.cm-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cm-photos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; transition: transform 0.6s var(--ease); }
.cm-photos img:nth-child(2) { transform: translateY(14px); }
.contact-more:hover .cm-photos img { transform: scale(1.03); }
.contact-more:hover .cm-photos img:nth-child(2) { transform: translateY(14px) scale(1.03); }
.links-plain { display: grid; gap: 8px; font: 400 18px var(--mono); }

@media (max-width: 760px) {
  .contact-list a { grid-template-columns: minmax(0, 1fr) 20px; padding: 18px 4px; }
  .c-detail { grid-column: 1; grid-row: 2; }
  .c-go { grid-column: 2; grid-row: 1; }
  .contact-more { grid-template-columns: 1fr; }
}