/* article.css — layout for the recognition and placement article pages.
   Skins entirely from the token files; no hardcoded colors. Reuses the maison
   masthead/footer; this file only shapes the article column and the closing ask. */

.article-page main {
  padding-top: var(--s-10);
}

/* ------------------------------------------------------------- ARTICLE */
.article {
  max-width: 72ch;
  margin-inline: auto;
  padding: var(--s-9) var(--gutter) var(--s-8);
  display: grid;
  gap: var(--s-7);
}

.article__head { display: grid; gap: var(--s-5); }
.article__head h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
}
.article__intro {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--stone-dim);
  max-width: 52ch;
}

.article__figure { display: grid; gap: var(--s-3); }
.article__figure img {
  width: 100%;
  height: auto;
  filter: var(--art-grade);
}
.article__caption {
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--stone-dim);
}

.article__body { display: grid; gap: var(--s-5); }
.article__body p {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  max-width: 62ch;
}

.article__quote {
  border-left: 1px solid var(--hairline-2);
  padding-left: var(--s-6);
  display: grid;
  gap: var(--s-3);
}
.article__quote p {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-tight);
}
.article__quote cite {
  font-style: normal;
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--stone-dim);
}

.article__source { padding-top: var(--s-2); }

/* ------------------------------------------------------------- THE FILM
   A video slot in the article column. With a real src it is a plain <video>;
   as a placeholder it shows the poster under a soft scrim with play chrome,
   and pressing play surfaces the "being prepared" note. */
.article__film { display: grid; gap: var(--s-3); }
.film__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--stone);
}
.film__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--art-grade);
}
.is-placeholder .film__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--vignette), transparent 55%);
  pointer-events: none;
}
.film__play {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 1;
  width: 88px;
  height: 88px;
  border: 1px solid var(--on-film);
  border-radius: 50%;
  background: var(--scrim);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform var(--dur-fast) var(--ease);
}
.film__play:hover { transform: scale(1.06); }
.film__play:focus-visible { outline: 2px solid var(--on-film); outline-offset: 4px; }
.film__tri {
  width: 0;
  height: 0;
  border-block: 11px solid transparent;
  border-left: 18px solid var(--on-film);
  margin-left: 4px; /* optically centers the triangle in the ring */
}
.film__note {
  position: absolute;
  /* Anchored by both insets (not left:50%) so it uses the frame width and wraps
     centered inside it. The nowrap version was clipped at 360px. */
  left: var(--s-6);
  right: var(--s-6);
  bottom: var(--s-6);
  z-index: 1;
  text-align: center;
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--on-film);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.is-noted .film__note { opacity: 1; }

/* ------------------------------------------------- PLACEMENTS INDEX LIST
   Rows on /placements: venue, city/since, a one-line teaser, and the
   arrow into the venue's own page. Venues without a page render plain. */
.plist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.plist li { border-top: 1px solid var(--hairline-2); }
.plist li:last-child { border-bottom: 1px solid var(--hairline-2); }
.plist__go,
.plist__row {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--s-6);
  row-gap: var(--s-2);
  align-items: center;
  padding-block: var(--s-6);
  text-decoration: none;
  color: inherit;
}
.plist__where {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  letter-spacing: var(--track-tight);
  line-height: var(--leading-snug);
}
.plist__meta {
  grid-row: 2;
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--stone-dim);
}
.plist__teaser {
  grid-row: 3;
  grid-column: 1;
  color: var(--stone-mute);
  line-height: var(--leading-body);
  max-width: 56ch;
}
.plist__arrow {
  grid-row: 1 / span 3;
  grid-column: 2;
  color: var(--stone-dim);
  transition: transform var(--dur-fast) var(--ease);
}
.plist__go:hover .plist__arrow { transform: translateX(6px); color: var(--stone); }

/* ------------------------------------------------------------- WORK GALLERY
   /work: the full catalogue. The header still reads in a narrow column,
   but the plates get a wider frame than the 72ch article measure. Pieces vary
   a lot in aspect ratio, so they pack in balanced columns (no forced row
   heights, no gaps under the shorter ones). Skins entirely from tokens. */
.article--wide {
  max-width: var(--maxw);
}
.article--wide .article__head {
  max-width: var(--maxw-text);
}
.works {
  list-style: none;
  margin: 0;
  padding: 0;
  column-count: 2;
  column-gap: var(--s-7);
}
.work {
  break-inside: avoid;
  margin-bottom: var(--s-8);
}
.work__figure {
  margin: 0;
  display: grid;
  gap: var(--s-4);
}
.work__figure img {
  width: 100%;
  height: auto;
  filter: var(--art-grade);
}
.work__caption {
  display: grid;
  gap: var(--s-2);
}
.work__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  letter-spacing: var(--track-tight);
  line-height: var(--leading-snug);
}
.work__meta {
  display: grid;
  gap: var(--s-1);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--stone-dim);
}

/* ------------------------------------------------------------- THE ASK */
.article-ask {
  border-top: 1px solid var(--hairline-2);
  margin-top: var(--s-8);
}
.article-ask__inner {
  max-width: 72ch;
  margin-inline: auto;
  padding: var(--s-9) var(--gutter) var(--s-10);
  display: grid;
  gap: var(--s-5);
  justify-items: start;
}
.article-ask__inner h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  letter-spacing: var(--track-tight);
}
.article-ask__inner p {
  color: var(--stone-dim);
  max-width: 48ch;
  line-height: var(--leading-body);
}

/* ------------------------------------------------------------ ABOUT PAGE
   Story sections on /about share the article column; each section gets
   its own kicker + H2, and the milestones render as a plain dated timeline. */
.about__section {
  display: grid;
  gap: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--hairline-2);
}
.about__head { display: grid; gap: var(--s-3); }
.about__head h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  letter-spacing: var(--track-tight);
  line-height: var(--leading-snug);
}

.about-tl {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.about-tl li {
  display: grid;
  grid-template-columns: 5ch 1fr;
  gap: var(--s-6);
  align-items: baseline;
  padding-block: var(--s-4);
}
.about-tl li + li { border-top: 1px solid var(--hairline-2); }
.about-tl__year {
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  color: var(--stone-dim);
}
.about-tl__label { line-height: var(--leading-body); }

/* --------------------------------------------------------- LEGAL DOCUMENTS
   /privacy, /terms, /accessibility. Same paper and column as the articles,
   but set quieter and denser: these are meant to be read, not admired.
   Sections are static HTML in the pages themselves. */
.legal { gap: var(--s-8); }
.legal__updated {
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--stone-dim);
}
.legal__section { display: grid; gap: var(--s-4); }
.legal__section h2 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  letter-spacing: var(--track-tight);
  line-height: var(--leading-snug);
}
.legal p {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--stone-mute);
  max-width: 66ch;
}
.legal strong { color: var(--stone); font-weight: 500; }
.legal a {
  color: var(--stone);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.legal__list {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding-left: var(--s-6);
  max-width: 66ch;
}
.legal__list li {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--stone-mute);
}
.legal__list li::marker { color: var(--stone-dim); }
/* No hero on a legal page, so the fixed masthead needs the clearance itself. */
.legal-page main { padding-top: var(--s-9); }

/* --------------------------------------------------------- WORK CATEGORIES
   The Work overview is a stack of these: everything first, then one section per
   category. A category page renders the same head + grid on its own. */
.workcat {
  padding-block: var(--s-9);
  border-top: 1px solid var(--hairline-2);
}
.workcat:first-of-type { border-top: 0; }
.workcat__head { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); }
.workcat__head h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
}
.workcat__intro {
  max-width: 46ch;
  color: var(--stone-mute);
  line-height: var(--leading-body);
}
/* The honest empty state: a written line and the one next step, never a grid
   of nothing. Set apart by a rule so it reads as a note, not a missing image. */
.workcat__empty {
  display: grid;
  justify-items: start;
  gap: var(--s-5);
  /* Held to the reading measure. Stretched to the full 1320px plate width it
     reads as a missing image rather than a written note. */
  max-width: var(--maxw-text);
  padding: var(--s-7);
  border: 1px solid var(--hairline);
  background: var(--hairline-2);
}
.workcat__empty p {
  max-width: 44ch;
  color: var(--stone-mute);
  line-height: var(--leading-body);
}
.workcat__more { margin-top: var(--s-6); }
.link--go .arrow { display: inline-block; transition: transform var(--dur) var(--ease); }
.link--go:hover .arrow { transform: translateX(4px); }

/* --------------------------------------------------------- RESPONSIVE
   The masthead is now the shared marketing chrome on every non-legal page
   (scripts/chrome.js), so the article pages collapse behind the same hamburger
   the finals use — no per-page nav overrides here any more. */
@media (max-width: 900px) {
  /* Gallery stacks to a single column of full-width plates. */
  .works { column-count: 1; }
  .work { margin-bottom: var(--s-7); }
  .workcat { padding-block: var(--s-8); }
}
@media (max-width: 560px) {
  /* Long CTA label: full-width and centered so it never orphans the arrow. */
  .article-ask__inner .btn { width: 100%; justify-content: center; text-align: center; }
  .workcat__empty { padding: var(--s-5); justify-items: stretch; }
  .workcat__empty .btn { width: 100%; justify-content: center; text-align: center; }
}