/*
 * pages.css — the pages around Cover Story (work, project, résumé, blog). They wear Cover Story's paper, ink, gold and
 * type (directions/cover-story.css is loaded first); this file adds only their own layouts. Small text, generous space
 * (owner rule): drama comes from the films, the figures and the white space, never from type size.
 */
.pg { padding-top: calc(var(--bar-h) + var(--s-4)); }
.pg-nav a[aria-current='page'] { color: var(--fg); box-shadow: inset 0 -1px 0 var(--red); }
.pg-h1 { max-width: 40ch; }
.pg-head { padding: var(--s-9) 0 var(--s-7); display: grid; gap: var(--s-6); }
.pg-head .cs-sechead { margin-bottom: 0; }
.pg-avail { color: var(--muted); }
.pg-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pg-section { padding: var(--s-9) 0; }
.pg-section.cs-dark { padding-inline: 0; }

/* ── Work: filters and the grid of projects ───────────────────────────────────────────────────────────── */
.pg-proof .sv-metrics { grid-template-columns: repeat(3, minmax(0, max-content)); gap: var(--s-6) var(--s-8); }
.pg-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s-7); }
.pg-filter { min-height: var(--tap); padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: none; color: var(--muted);
  font: 500 var(--fs-small) / 1 var(--font-ui); cursor: pointer; }
.pg-filter span { margin-left: 4px; color: var(--gold); font-family: var(--font-mono); }
.pg-filter[aria-pressed='true'] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.pg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-8) var(--s-5); padding-bottom: var(--s-9); }
.pg-card { display: grid; gap: 8px; align-content: start; text-decoration: none; color: inherit; }
.pg-card[hidden] { display: none; }
.pg-card__media .sv-media { border-radius: var(--media-radius); box-shadow: var(--shadow-paper); }
.pg-card__media img { transition: transform 1.2s var(--ease-lux); }
.pg-card:hover .pg-card__media img, .pg-card:focus-visible .pg-card__media img { transform: scale(1.04); }
.pg-card__meta { display: flex; justify-content: space-between; margin-top: var(--s-2); font: 500 var(--fs-meta) / 1 var(--font-mono); color: var(--muted); }
.pg-card__meta span:last-child { color: var(--red); letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-caps); }
.pg-card__name { font: 500 var(--fs-h3) / 1.3 var(--font-display); }
.pg-card__fig { font-size: var(--fs-small); color: var(--muted); }
.pg-card__fig b { display: block; font: 500 var(--fs-h2) / 1.1 var(--font-display); color: var(--fg); }
.pg-card__co { font-size: var(--fs-meta); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* ── Project: the hero film, the progress bar ─────────────────────────────────────────────────────────── */
.pg-hero { position: relative; min-height: min(86svh, 900px); display: grid; align-items: end; overflow: hidden; margin-top: calc(-1 * (var(--bar-h) + var(--s-4))); }
.pg-hero__film { position: absolute; inset: 0; }
.pg-hero__film .sv-media { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto !important; border-radius: 0; }
.pg-hero__film .sv-media .sv-label { top: calc(var(--bar-h) + 14px); bottom: auto; }
.pg-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgb(6 5 4 / 0.9) 0%, rgb(6 5 4 / 0.55) 38%, rgb(6 5 4 / 0) 70%); }
.pg-hero__copy { position: relative; z-index: 2; display: grid; gap: var(--s-3); padding: var(--s-9) 0 var(--s-7); max-width: 900px; margin-inline: var(--gutter); }
.pg-hero__name { font: 500 var(--fs-h1) / 1.15 var(--font-display); color: #fbf7ef; }
.pg-hero__changed { font: 400 var(--fs-lead) / 1.55 var(--font-body); color: rgb(246 241 232 / 0.86); max-width: 56ch; }
.pg-hero .cs-kicker { color: #e3c48a; }
.pg-progress { display: block; width: min(320px, 70%); height: 2px; margin-top: var(--s-3); background: rgb(246 241 232 / 0.2); }
.pg-progress i { display: block; height: 100%; width: 100%; background: var(--gold-grad); transform: scaleX(var(--done, 0)); transform-origin: 0 50%; }

/* ── Project: the figures ─────────────────────────────────────────────────────────────────────────────── */
.pg-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-6); }
.pg-num { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 4px 12px; padding-top: var(--s-4); border-top: 1px solid var(--gold-soft); }
.pg-num__before { font: 400 var(--fs-lead) / 1 var(--font-display); color: var(--muted); }
.pg-num__arrow { color: var(--red); }
.pg-num__after { font: 500 var(--fs-h1) / 1 var(--font-display); letter-spacing: -0.01em; }
.pg-num__label { grid-column: 1 / -1; font-size: var(--fs-meta); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* ── Project: the case ────────────────────────────────────────────────────────────────────────────────── */
.pg-story__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-8); align-items: start; }
.pg-cost { padding: var(--s-6); background: var(--paper); box-shadow: var(--shadow-paper); border-left: 2px solid var(--red); display: grid; gap: var(--s-3); }
.pg-cost__text { font: 400 var(--fs-h3) / 1.5 var(--font-display); }
.pg-dl { display: grid; gap: var(--s-5); margin: 0; }
.pg-dl div { display: grid; gap: 6px; padding-top: var(--s-3); border-top: 1px solid var(--line); }
.pg-dl dt { font-size: var(--fs-meta); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.pg-dl dd { margin: 0; line-height: 1.7; }
.pg-flow { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: var(--s-7); font: 500 var(--fs-small) / 1 var(--font-mono); }
.pg-flow li { position: relative; display: inline-flex; gap: 8px; align-items: center; padding: 9px 12px; background: var(--paper); box-shadow: var(--shadow-paper); }
.pg-flow li span { color: var(--red); }
.pg-flow li + li::before { content: '→'; position: absolute; left: -19px; color: var(--gold); }
.pg-stack { margin-top: var(--s-5); }

/* ── Project: why it works (black) ────────────────────────────────────────────────────────────────────── */
.pg-why__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.pg-why__art .sv-media { border-radius: var(--media-radius); }
.pg-why__copy { display: grid; gap: var(--s-4); }
.pg-why__text { color: var(--fg) !important; font-size: var(--fs-lead); }

/* ── Project: poster and role, then the next project ──────────────────────────────────────────────────── */
.pg-pair { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--s-8); align-items: center; }
.pg-pair__poster { margin: 0; max-width: 420px; }
.pg-pair__poster .sv-media { box-shadow: var(--shadow-paper); }
.pg-role { display: grid; gap: var(--s-3); }
.pg-role__co { font: 500 var(--fs-h2) / 1.2 var(--font-display); }
.pg-role__line { color: var(--muted); font-size: var(--fs-small); }
.pg-next { padding: 0; }
.pg-next__link { position: relative; display: grid; align-items: end; min-height: min(70svh, 640px); overflow: hidden; text-decoration: none; color: inherit; }
.pg-next__media { position: absolute; inset: 0; }
.pg-next__media .sv-media { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto !important; border-radius: 0; }
.pg-next__media img, .pg-next__media video { transition: transform 1.6s var(--ease-lux); }
.pg-next__link:hover .pg-next__media img, .pg-next__link:hover .pg-next__media video { transform: scale(1.04); }
.pg-next__link::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(6 5 4 / 0.88), rgb(6 5 4 / 0.1) 70%); }
.pg-next__copy { position: relative; z-index: 2; display: grid; gap: var(--s-2); padding: var(--s-8) var(--gutter); }
.pg-next__copy .cs-kicker { color: #e3c48a; }
.pg-next__name { font: 500 var(--fs-h1) / 1.15 var(--font-display); color: #fbf7ef; }
.pg-next__teaser { color: rgb(246 241 232 / 0.82); font-size: var(--fs-lead); }
.pg-next__teaser b { color: #e3c48a; font-weight: 500; }
.pg-pager { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) var(--gutter); }
.pg-pager a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--muted); text-decoration: none; font-size: var(--fs-small); }
.pg-pager a:hover { color: var(--fg); }

/* ── Résumé ───────────────────────────────────────────────────────────────────────────────────────────── */
.pg-res__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.pg-res__side { display: grid; gap: var(--s-4); position: sticky; top: calc(var(--bar-h) + var(--s-5)); }
.pg-res__side .cs-h3 { margin-top: var(--s-4); }
.pg-projects { display: grid; gap: 2px; }
.pg-projects a { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.pg-projects b { font-weight: 500; }
.pg-projects span { font-size: var(--fs-small); color: var(--muted); }
.pg-projects a:hover b { color: var(--red); }

/* ── Blog: post cards ─────────────────────────────────────────────────────────────────────────────────── */
.pg-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8) var(--s-6); padding-bottom: var(--s-8); }
.pg-post { display: grid; gap: 8px; align-content: start; text-decoration: none; color: inherit; }
.pg-post[hidden] { display: none; }
.pg-post__media .sv-media { border-radius: var(--media-radius); box-shadow: var(--shadow-paper); }
.pg-post__media img { transition: transform 1.2s var(--ease-lux); }
.pg-post:hover .pg-post__media img { transform: scale(1.04); }
.pg-post__meta { display: flex; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-2); font-size: var(--fs-meta); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pg-post__meta span:first-child { color: var(--red); }
.pg-post__title { font: 500 var(--fs-h3) / 1.35 var(--font-display); }
.pg-post:hover .pg-post__title { color: var(--red); }
.pg-post__desc { font-size: var(--fs-small); color: var(--muted); line-height: 1.6; }

/* ── Post: the article ────────────────────────────────────────────────────────────────────────────────── */
.pg-article { padding: var(--s-8) 0 var(--s-7); }
.pg-article__head { display: grid; gap: var(--s-3); max-width: 820px; }
.pg-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: var(--fs-meta); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pg-crumb a { color: var(--red); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap); }
.pg-article__title { font: 500 var(--fs-h1) / 1.2 var(--font-display); letter-spacing: -0.01em; text-wrap: balance; }
.pg-article__byline { font-size: var(--fs-small); color: var(--muted); }
.pg-article__cover { margin: var(--s-6) 0 var(--s-7); }
.pg-article__cover .sv-media { border-radius: var(--media-radius); box-shadow: var(--shadow-paper); max-height: 72svh; }
.pg-article__grid { display: grid; grid-template-columns: 220px minmax(0, 720px); gap: var(--s-8); align-items: start; }
.pg-article__side { position: sticky; top: calc(var(--bar-h) + var(--s-5)); }
.pg-toc ol { display: grid; gap: 2px; padding: 0; margin: var(--s-2) 0 0; list-style: none; counter-reset: toc; }
.pg-toc li a { display: flex; align-items: center; min-height: var(--tap); padding: 6px 0; font-size: var(--fs-small); line-height: 1.45; color: var(--muted); text-decoration: none; border-top: 1px solid var(--line); }
.pg-toc li a:hover { color: var(--fg); }
.pg-tldr { padding: var(--s-5) var(--s-6); background: var(--paper); box-shadow: var(--shadow-paper); border-left: 2px solid var(--gold); display: grid; gap: var(--s-3); margin-bottom: var(--s-7); }
.pg-tldr ul { display: grid; gap: 8px; padding-left: 1.1em; margin: 0; }
.pg-tldr li { line-height: 1.6; }
.pg-tldr li::marker, .pg-prose li::marker { color: var(--red); }
.pg-prose { display: grid; gap: var(--s-7); }
.pg-prose section { display: grid; gap: var(--s-3); scroll-margin-top: calc(var(--bar-h) + var(--s-4)); }
.pg-prose h2, .pg-article__faq h2 { font: 500 var(--fs-h2) / 1.3 var(--font-display); letter-spacing: -0.01em; }
.pg-prose p { line-height: 1.75; color: color-mix(in oklab, var(--fg) 88%, transparent); }
.pg-prose ul { display: grid; gap: 6px; padding-left: 1.2em; margin: 0; line-height: 1.7; }
.pg-table { overflow-x: auto; margin-top: var(--s-2); border: 1px solid var(--line); }
.pg-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.pg-table th, .pg-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.pg-table th { font-weight: 600; background: var(--paper); }
.pg-article__faq { margin-top: var(--s-8); display: grid; gap: var(--s-4); scroll-margin-top: calc(var(--bar-h) + var(--s-4)); }
.pg-faq { display: grid; }
.pg-faq__item { border-top: 1px solid var(--line); }
.pg-faq__item:last-child { border-bottom: 1px solid var(--line); }
.pg-faq__item summary { display: flex; justify-content: space-between; gap: var(--s-4); align-items: center; min-height: 52px; padding: 10px 0; cursor: pointer; list-style: none; font-weight: 500; }
.pg-faq__item summary::-webkit-details-marker { display: none; }
.pg-faq__item summary::after { content: '+'; color: var(--red); font-size: 18px; line-height: 1; transition: transform 0.3s var(--ease-lux); }
.pg-faq__item[open] summary::after { transform: rotate(45deg); }
.pg-faq__item p { padding: 0 0 var(--s-4); line-height: 1.7; color: var(--muted); max-width: 64ch; }
.pg-sources { margin-top: var(--s-7); }
.pg-sources ol { display: grid; gap: 6px; padding-left: 1.2em; margin: var(--s-2) 0 0; font-size: var(--fs-small); }
.pg-article__rel { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-6); margin-top: var(--s-8); align-items: start; }
.pg-article__rel .pg-card { max-width: 260px; margin-top: var(--s-3); }
.pg-article__rel .pg-tools__list { grid-template-columns: minmax(0, 1fr); align-content: start; }
.pg-article__next { margin-top: var(--s-8); }
.pg-article__next a { display: grid; gap: 4px; padding-top: var(--s-4); border-top: 1px solid var(--gold-soft); text-decoration: none; color: inherit; }
.pg-article__next b { font: 500 var(--fs-h3) / 1.35 var(--font-display); }

/* ── Tools: cards and the tool page ───────────────────────────────────────────────────────────────────── */
.pg-tools { display: grid; gap: var(--s-8); padding-bottom: var(--s-9); }
.pg-tools__group { display: grid; gap: var(--s-4); }
.pg-tools__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-4); }
.pg-tool { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--s-4); align-items: center; padding: var(--s-4); background: var(--paper); box-shadow: var(--shadow-paper);
  text-decoration: none; color: inherit; border: 1px solid transparent; transition: border-color 0.3s; }
.pg-tool:hover { border-color: var(--gold-soft); }
.pg-tool__icon .sv-media { aspect-ratio: 1 !important; background: #000; border-radius: 6px; }
.pg-tool__text { display: grid; gap: 4px; }
.pg-tool__name { font: 500 var(--fs-body) / 1.3 var(--font-display); }
.pg-tool__desc { font-size: var(--fs-small); color: var(--muted); line-height: 1.5; }
.pg-toolpage { padding: var(--s-8) 0 var(--s-7); display: grid; gap: var(--s-7); }
.pg-toolpage__head { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-5); align-items: center; max-width: 880px; }
.pg-toolpage__head > div { display: grid; gap: var(--s-2); }
.pg-toolpage__icon .sv-media { aspect-ratio: 1 !important; background: #000; border-radius: 10px; }
.pg-toolpage__tool { padding: var(--s-6); background: var(--paper); box-shadow: var(--shadow-paper); }
.pg-toolpage__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-8); align-items: start; }
.pg-howto ol { display: grid; gap: 8px; padding-left: 1.2em; margin: var(--s-2) 0 0; line-height: 1.6; }
.pg-others-h { margin: var(--s-6) 0 var(--s-4); }

/* ── Footer ───────────────────────────────────────────────────────────────────────────────────────────── */
.pg-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-6); padding: var(--s-6) 0 var(--s-8); font-size: var(--fs-small); color: var(--muted); border-top: 1px solid var(--line); }
.pg-foot a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--fg); text-decoration: none; }

/* ── Tablet and phone ─────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .pg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-article__grid { grid-template-columns: minmax(0, 1fr); }
  .pg-article__side { position: static; }
  .pg-res__grid { grid-template-columns: minmax(0, 1fr); }
  .pg-res__side { position: static; }
}
@media (max-width: 900px) {
  .pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-4); }
  .pg-story__grid, .pg-why__grid, .pg-pair { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .pg-pair__poster { max-width: 320px; }
  .pg-article__rel, .pg-toolpage__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .pg-head { padding: var(--s-7) 0 var(--s-5); }
  .pg-section { padding: var(--s-8) 0; }
  .pg-proof .sv-metrics { grid-template-columns: minmax(0, 1fr); }
  .pg-hero { min-height: 78svh; }
  .pg-num { grid-template-columns: auto auto 1fr; }
  .pg-flow { gap: 10px; }
  .pg-flow li + li::before { display: none; }
  .pg-pager { flex-direction: column; gap: 0; }
  .pg-posts { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .pg-tools__list { grid-template-columns: minmax(0, 1fr); }
  .pg-toolpage__head { grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-4); }
  .pg-toolpage__tool { padding: var(--s-4); margin-inline: calc(-1 * var(--s-2)); }
  .pg-tldr { padding: var(--s-4); }
}