/* ============================================================
   andykrantz.com — work-pages catalog stylesheet
   Extends assets/site.css (Direction B "Index"). Used only by
   /work-pages/transit-takeover/ and /work-pages/retail/.
   Register: exhibition catalog — flat mats (no shadow; the
   storefront plate on /paravel/ keeps the site's only shadow),
   hierarchy by scale alone, zero accent on these pages.
   ============================================================ */
html, body{ overflow-x:clip; }   /* guards the full-wrap breakout against scrollbar jitter */

/* "you are here" for sub-pages of /paravel/: mirror site.css's
   a[aria-current="page"] treatment for the section-parent link */
.site-nav .links a[aria-current]{ color:var(--ink); font-weight:500; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--ink); }

/* long titles/descriptors stress the sibling title-row pattern */
.title-row{ gap:16px; }
.title-row .dates{ white-space:nowrap; }

/* ---------- figures ---------- */
.fig{ margin:64px 0 0; display:flex; flex-direction:column; }
.figs-2up{ display:grid; grid-template-columns:1fr 1fr; gap:0 32px; margin-top:64px; align-items:start; }
.figs-2up .fig{ margin-top:0; }
.fig--half{ max-width:424px; }
.fig--right{ margin-left:auto; }
.fig--small{ max-width:320px; }
.fig--flush{ margin-top:0; }

/* ---------- flat mat (quieter than the storefront's lit plate) ---------- */
.plate--flat{ background:var(--mat); padding:12px; border:1px solid var(--rule); }
.plate--flat img, .plate--flat video{ display:block; width:100%; height:auto; background:var(--field); }

/* full-wrap breakout — takeover page only; figure + caption stay on the 880 grid */
.plate--wrap{ position:relative; left:50%; translate:-50% 0; width:min(100vw - 80px, 1200px); }

/* ---------- captions ---------- */
.plate-cap{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; flex-wrap:wrap; margin-top:14px;
}
.plate-cap .cap{ font-size:12px; line-height:1.4; color:var(--ink-3); }
.plate-cap .cap .no{ font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; }
.plate-cap .meta{
  font-size:12px; line-height:1.4; color:var(--ink-4);
  text-align:right; white-space:nowrap;
  margin-left:auto;   /* a wrapped meta stays right-aligned */
}

/* ---------- index rows (takeover placements): wider date rail so
   "Nov 2019 — Jan 2020" never wraps and the Q2 2021 outlier pops ---------- */
.rows .row{ grid-template-columns:170px 1fr; }

/* ---------- next-page cross-link ---------- */
.row-link--next{ margin-top:64px; }
.row-link a{ padding:16px 0; margin:-16px 0; }   /* fill the row as tap target; visually unchanged */

/* ---------- retail partner heads (index-entry weight) ---------- */
.partner-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  border-top:1px solid var(--rule); padding-top:20px; margin-top:88px;
}
.partner-head .name{ font-size:18px; font-weight:500; line-height:1.35; margin:0; }
.partner-head .city{ font-size:13px; color:var(--ink-3); }
.partner-head + .fig, .partner-head + .figs-2up{ margin-top:24px; }

/* ============================================================
   Mobile — single breakpoint, matching site.css
   ============================================================ */
@media (max-width:719px){
  .title-row{ flex-direction:column; align-items:flex-start; gap:6px; }

  .fig{ margin-top:40px; }
  .figs-2up{ grid-template-columns:1fr; gap:40px 0; margin-top:40px; }
  .fig--half{ max-width:none; }
  .fig--right{ margin-left:0; }
  .fig--small{ max-width:250px; }
  .fig--detail{ max-width:300px; }  /* portrait detail stays subordinate to its anchor plate */
  .plate--flat{ padding:8px; }
  /* exact edge-to-edge: the .wrap spans the viewport below the breakpoint,
     so margins beat the vw mechanic (no scrollbar-width error) */
  .plate--wrap{ position:static; left:auto; translate:none; width:auto; margin:0 -20px; }
  .plate-cap{ flex-direction:column; align-items:flex-start; gap:6px; }
  .plate-cap .meta{ text-align:left; white-space:normal; margin-left:0; }
  .row-link--next{ margin-top:48px; }
  .partner-head{ margin-top:56px; }
  .partner-head + .fig, .partner-head + .figs-2up{ margin-top:20px; }
}

/* ============================================================
   Work-pages II — press / partnerships / famous-faces / film-tv
   Same exhibition-catalog register; additive only.
   ============================================================ */

/* 3-up figure row (featured collabs) */
.figs-3up{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 24px; margin-top:24px; align-items:start; }
.figs-3up .fig{ margin-top:0; }
.collab-note{ font-size:14px; line-height:1.6; color:var(--ink-2); max-width:62ch; margin:20px 0 0; }

/* linked flat plate (press hero → live article; mirrors the storefront plate-link) */
a.plate-flat-link{ display:block; text-decoration:none; color:inherit; }
a.plate-flat-link .plate--flat{ transition:border-color 140ms ease; }
a.plate-flat-link:hover .plate--flat{ border-color:var(--ink); }
a.plate-flat-link:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* famous-faces wall — varied-height portraits, balanced in columns; the
   numbered plate-caps carry the canonical order regardless of column flow */
.faces{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:24px; align-items:start; }
.face{ margin:0; display:flex; flex-direction:column; }

/* logo wall — transparent grayscale marks on paper, divided by hairlines only
   (no fill, no tiles); outer rule via top+left, inner via each cell's right+bottom */
.logo-wall{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule); border-left:1px solid var(--rule);
  margin-top:24px;
}
.logo-tile{
  display:flex; align-items:center; justify-content:center;
  min-height:132px; padding:22px;
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.logo-tile img{
  max-height:44px; max-width:86%; width:auto; height:auto;
  filter:grayscale(1); opacity:.9; transition:opacity 140ms ease;
}
.logo-tile:hover img{ opacity:1; }
/* compact / portrait marks read small at the shared 44px height cap (they bind on
   height, not the 86% width); give them tailored headroom — still well under the
   132px tile height so every row stays uniform. */
.logo-tile img.logo--bwt{ max-height:72px; }
.logo-tile img.logo--park-hyatt{ max-height:60px; max-width:92%; }
.logo-tile img.logo--1h{ max-height:74px; }

/* press-cited row without a year column (famous-faces) collapses the year cell */
.press-row.no-year{ grid-template-columns:150px 1fr; }
a.press-row.no-year .headline::after{ content:" ↗"; font-size:11px; color:var(--ink-4); }

@media (min-width:480px) and (max-width:719px){
  .faces{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:719px){
  .figs-3up{ grid-template-columns:1fr; gap:40px 0; }
  .faces{ grid-template-columns:1fr; }
  .logo-wall{ grid-template-columns:repeat(2,1fr); }
  .logo-tile{ min-height:104px; padding:20px; }
  /* scale the boosted marks down to fit the shorter mobile tile (≈64px content) */
  .logo-tile img.logo--bwt,
  .logo-tile img.logo--park-hyatt{ max-height:54px; }
  .logo-tile img.logo--1h{ max-height:58px; }
}