/* ============================================================
   andykrantz.com — site frame stylesheet
   Direction B "Index" — Swiss/Helvetica, cool paper, monochrome
   + one oxblood accent. Tokens verbatim from the design handoff.
   Single breakpoint: 719px. No JS anywhere on the frame.
   ============================================================ */
:root{
  --paper:#FBFBFC;
  --ink:#111114;
  --ink-2:#46464A;
  --ink-25:#2E2E32;
  --ink-3:#6E6E72;
  --ink-4:#8C8C90;
  --rule:#C9C9CC;
  --field:#F2F2F4;
  --accent:#7D2A2A;
  --mat:#FFFFFF;
}

/* Inter — © The Inter Project Authors (https://github.com/rsms/inter),
   SIL Open Font License 1.1 (https://openfontlicense.org). Self-hosted from
   the official v4.1 release (InterVariable.woff2), subset to latin. The single
   variable file carries every weight the frame uses (400/500/600). */
@font-face{
  font-family:'Inter';
  src:url('fonts/InterVariable-latin.woff2') format('woff2-variations');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',-apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
}

h1,h2{ text-wrap:pretty; }

/* ---------- layout ---------- */
.wrap{
  max-width:960px; /* 880 content + 2 × 40 gutter */
  margin:0 auto;
  padding:0 40px;
  display:flex;
  flex-direction:column;
}

/* ---------- nav (single row, every page) ---------- */
.site-nav{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:22px 0;
  border-bottom:1px solid var(--ink);
}
/* F3 (2026-06-12): the wordmark carries the weight; nav links carry the
   system's link affordance (persistent underline) — "you are here" is the
   only un-underlined item. */
.site-nav .brand{ font-size:14px; font-weight:600; letter-spacing:.01em; color:var(--ink); text-decoration:none; }
.site-nav .brand:hover{ text-decoration:underline; text-underline-offset:3px; }
.site-nav .links{ display:flex; gap:28px; font-size:13px; }
.site-nav .links a{
  color:var(--ink-2);
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--ink-4);
  transition:color 120ms ease, text-decoration-color 120ms ease;
}
.site-nav .links a:hover{ color:var(--ink); text-decoration-color:var(--ink); }
.site-nav .links a[aria-current="page"]{ color:var(--ink); text-decoration:none; font-weight:500; }

/* ---------- type ---------- */
.display{
  font-size:52px; font-weight:500; line-height:1.08; letter-spacing:-0.015em;
  margin:88px 0 0; max-width:19ch;
}
.page-title{
  font-size:40px; font-weight:500; line-height:1.15; letter-spacing:-0.01em;
  margin:0;
}
.lede{ font-size:16px; line-height:1.6; color:var(--ink-2); margin:28px 0 0; max-width:52ch; }
.body-copy{ font-size:16px; line-height:1.6; color:var(--ink-2); margin:0; max-width:56ch; }
.label{ font-size:12px; line-height:1.4; color:var(--ink-3); margin-bottom:14px; }
.label-row{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; margin-bottom:14px;
}
.label-row .label{ margin-bottom:0; }
a.inline{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }

/* ---------- title row (Paravel) ---------- */
.title-row{
  display:flex; justify-content:space-between; align-items:baseline;
  margin:64px 0 0;
}
.title-row .dates{ font-size:13px; color:var(--ink-3); }

/* ---------- sections ---------- */
.section{ margin-top:88px; display:flex; flex-direction:column; }
.section--tight{ margin-top:64px; }
.section--loose{ margin-top:96px; }
.stack-14{ display:flex; flex-direction:column; gap:14px; }
.stack-14 .label{ margin-bottom:0; }

/* ---------- header grid (D9, polish round 2026-06-12) ----------
   display + subline left, grayscale portrait top-right; the NOW note is the
   portrait's caption. Grayscale via filter — the source file stays untouched. */
.head-grid{ display:grid; grid-template-columns:1fr 218px; gap:24px 56px; align-items:start; }
.head-main{ min-width:0; }
.portrait{ margin:96px 0 0; display:flex; flex-direction:column; gap:10px; }
.portrait img{
  display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 18%;
  filter:grayscale(1); border:1px solid var(--rule); background:var(--field);
}
.portrait figcaption{ font-size:12px; line-height:1.55; color:var(--ink-3); }
.portrait figcaption::before{
  content:"NOW"; display:block; font-size:10px; font-weight:500;
  letter-spacing:.14em; color:var(--ink-4); margin-bottom:4px;
}

/* ---------- metrics grid — 2×2 (D2) ---------- */
.metrics{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 32px; }
.metric{
  border-top:1px solid var(--ink);
  padding:16px 0 8px;
  display:flex; flex-direction:column; gap:6px;
}
.metric .value{ font-size:44px; font-weight:500; line-height:1.05; letter-spacing:-0.01em; }
.metric .name{ font-size:13px; color:var(--ink-3); line-height:1.45; }

/* ---------- career / index rows ---------- */
.row{
  display:grid; grid-template-columns:130px 1fr; gap:16px;
  border-top:1px solid var(--rule);
  padding:20px 0;
}
.row--expanded{ padding:24px 0; }
.row .date{ font-size:13px; color:var(--ink-3); }
.row .cell{ display:flex; flex-direction:column; gap:4px; }
.row--expanded .cell{ gap:12px; }
.row .role{ font-size:18px; font-weight:500; line-height:1.35; }
.row .detail{ font-size:15px; line-height:1.5; color:var(--ink-2); }
.row .details{ display:flex; flex-direction:column; gap:6px; font-size:15px; line-height:1.5; color:var(--ink-2); }
.row-link{
  display:flex; justify-content:flex-end;
  border-top:1px solid var(--rule);
  padding:16px 0;
}
.row-link a{
  font-size:13px; font-weight:500; color:var(--ink);
  text-decoration:underline; text-underline-offset:3px; transition:color 120ms ease;
}
.rows > .row:last-of-type.row--rule-end,
.rule-end{ border-bottom:1px solid var(--rule); }

/* ---------- /paravel/ lead: intro + plate (F7, 2026-06-12) ----------
   ≥1024px: two columns — intro left, the plate beside it (substantially
   visible at 1280×800 / 1440×900 without scrolling).
   <1024px: stacked, the intro TRUNCATES after its first paragraph behind a
   "+ Read more" expander (checkbox, no JS) so the plate owns the first
   screenful. The collapse point is structural: ¶1 sits before the toggle,
   the rest inside .intro-rest — move paragraphs across that boundary to
   change where it folds. */
.paravel-lead{ display:flex; flex-direction:column; }
.paravel-lead > .lead-intro{ margin-top:24px; }
.intro-more-toggle{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.intro-more-label{ display:none; }
@media (min-width:1024px){
  .paravel-lead{
    display:grid; grid-template-columns:minmax(360px, 45fr) 55fr;
    gap:14px 48px; align-items:start; margin-top:28px;
  }
  .paravel-lead > .lead-intro{ margin-top:0; }
  .paravel-lead > .plate-figure{ margin-top:0; }
}
@media (max-width:1023px){
  .intro-rest{ display:none; }
  .intro-more-toggle:checked ~ .intro-rest{ display:flex; }
  .intro-more-toggle:checked ~ .intro-more-label{ display:none; }
  .intro-more-label{
    display:inline-block; align-self:flex-start; cursor:pointer;
    font-size:13px; font-weight:500; color:var(--accent);
    text-decoration:underline; text-underline-offset:3px;
  }
  .intro-more-toggle:focus-visible ~ .intro-more-label{ outline:2px solid var(--accent); outline-offset:2px; }
  .paravel-lead > .plate-figure{ margin-top:32px; }   /* plate inside the first screenful */
}

/* ---------- storefront plate ("lit exhibit") — the only shadow on the site ----------
   D6: header row above the plate — kicker (frame register) left, the
   "Enter the archive →" CTA leading from the top right. */
.plate-figure{ margin:64px 0 0; display:flex; flex-direction:column; }
.plate-link{ display:flex; flex-direction:column; gap:14px; text-decoration:none; color:inherit; }
.plate-head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; flex-wrap:wrap;
}
.plate-kicker{
  font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); white-space:nowrap;
}
.plate{
  background:var(--mat);
  padding:14px;
  border:1px solid var(--ink);
  box-shadow:0 1px 2px rgba(17,17,20,0.06), 0 24px 64px rgba(17,17,20,0.14);
  transition:box-shadow 160ms ease;
}
.plate-link:hover .plate{
  box-shadow:0 1px 2px rgba(17,17,20,0.08), 0 28px 72px rgba(17,17,20,0.18);
}
.plate img{
  display:block; width:100%; height:auto;
  aspect-ratio:16/10; object-fit:cover; object-position:top;
  background:var(--field);
}
.plate-caption{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; flex-wrap:wrap;
}
.plate-caption .note{ font-size:12px; color:var(--ink-3); }
.plate-caption .cta{
  font-size:13px; font-weight:500; color:var(--accent);
  text-decoration:underline; text-underline-offset:3px;
}

/* ---------- platform eras (text-only ruled index for launch) ----------
   When captures arrive: add a third cell <div class="era-media"> per row —
   the grid template + field treatment below are already prepared. */
.era-row .role{ font-size:16px; }
.era-row .era-media{
  width:100%; max-width:200px; aspect-ratio:4/3;
  border:1px solid var(--rule); background:var(--field);
}
.era-row.has-media{ grid-template-columns:130px 1fr 200px; }

/* ---------- partnerships — disclosure strip (logo-ready) ----------
   Logos: swap each summary's .name span for <img class="partner-logo">;
   uniform 26px height, grayscale per the monochrome system. */
.partners{
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:20px 0;
  display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center;
}
.partner{ margin:0; }
.partner summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:7px;
}
.partner summary::-webkit-details-marker{ display:none; }
.partner summary::marker{ content:""; }
/* F5 (2026-06-12): typed names as a letterspaced caps strip — reads designed
   while the logo files are pending (the 26px grayscale img treatment below
   stays ready for the swap). */
.partner .name{
  font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-25); white-space:nowrap; transition:color 120ms ease;
}
.partner summary::after{
  content:"+"; font-size:12px; color:var(--ink-4); line-height:1;
  transition:transform 140ms ease, color 120ms ease;
}
.partner[open] summary::after{ content:"–"; color:var(--ink-25); }
.partner--static .name{ color:var(--ink-4); }
.partner summary:hover .name{ color:var(--ink); }
.partner summary:hover::after{ color:var(--ink); }
.partner-logo{
  display:block; height:26px; width:auto;
  filter:grayscale(1);
}
.partner summary:hover .partner-logo{ filter:grayscale(1) brightness(0.6); }
/* deferred-blurb partner: name renders as plain text, no expand affordance */
.partner--static .name{ cursor:default; }
/* open: the partner takes its own full-width line; blurb reveals below */
.partner[open]{ flex-basis:100%; }
.partner .blurb{
  margin:8px 0 0; font-size:14px; line-height:1.6; color:var(--ink-2);
  max-width:60ch;
}

/* ---------- film & tv index ---------- */
.ftv{
  border-top:1px solid var(--rule); padding-top:20px;
  column-count:3; column-gap:32px;
}
.ftv .title{ font-size:14px; line-height:2.1; color:var(--ink-2); break-inside:avoid; }
.ftv .title span{ color:var(--ink-3); }
.ftv-more{
  border-bottom:1px solid var(--rule);
  padding:14px 0 18px;
  font-size:12px; color:var(--ink-3);
}
/* list shipped without the "+ N more" row: carry the bottom hairline itself */
.ftv--closed{ padding-bottom:20px; border-bottom:1px solid var(--rule); }

/* ---------- press table ---------- */
.press-row{
  display:grid; grid-template-columns:150px 1fr 56px; gap:16px;
  align-items:baseline;
  border-top:1px solid var(--rule);
  padding:16px 0;
}
.press-row .outlet{ font-size:13px; font-weight:500; grid-column:1; grid-row:1; }
.press-row .headline{ font-size:15px; line-height:1.5; color:var(--ink-25); grid-column:2; grid-row:1; }
.press-row .year{ font-size:12px; color:var(--ink-4); text-align:right; grid-column:3; grid-row:1; }
.press-row .outlet-line{ display:contents; }
/* F2 (2026-06-12): rows with verified URLs are real links — the ↗ marker is the
   standing affordance (visible on touch, where hover doesn't exist); hover adds
   the system underline + accent. Rows without a URL stay plain divs. */
a.press-row{ text-decoration:none; color:inherit; }
a.press-row .year::after{ content:" ↗"; font-size:11px; color:var(--ink-4); }
a.press-row:hover .headline,
a.press-row:focus-visible .headline{
  color:var(--ink); text-decoration:underline; text-underline-offset:3px;
}
a.press-row:hover .outlet{ color:var(--accent); }
a.press-row:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- recognition chips ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  border:1px solid var(--rule);
  padding:8px 14px;
  font-size:13px; color:var(--ink-25);
}
.chip .vmark, .vmark{ color:var(--accent); }
.footnote{ font-size:12px; color:var(--ink-3); margin-top:14px; }

/* ---------- selected work ---------- */
.case{
  border-top:1px solid var(--rule);
  padding:20px 0;
  display:flex; flex-direction:column; gap:6px;
}
.case .case-title{ font-size:15px; font-weight:500; }
.case p{ font-size:15px; line-height:1.6; color:var(--ink-2); margin:0; max-width:60ch; }

/* ---------- footer (the contact surface) ---------- */
.site-footer{
  margin-top:120px;
  border-top:1px solid var(--ink);
  padding:18px 0 26px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:12px; color:var(--ink-3);
}
.site-footer .group{ display:flex; gap:16px; flex-wrap:wrap; }
.site-footer a{
  color:var(--ink-3);
  text-decoration:underline; text-underline-offset:3px;
  transition:color 120ms ease;
}
.site-footer a:hover{ color:var(--ink); }

/* ============================================================
   Mobile — single breakpoint
   ============================================================ */
@media (max-width:719px){
  .wrap{ padding:0 20px; }

  .site-nav{ padding:18px 0; }
  .site-nav .brand{ font-size:12px; }
  .site-nav .links{ gap:16px; font-size:12px; }

  .display{ font-size:34px; line-height:1.12; margin-top:56px; }
  .lede{ font-size:15px; margin-top:20px; }
  .head-grid{ grid-template-columns:1fr; gap:0 0; }
  .portrait{ margin-top:28px; max-width:220px; }
  .body-copy{ font-size:15px; }
  .page-title{ font-size:30px; }
  .title-row{ margin-top:48px; }

  .section{ margin-top:48px; }
  .section--tight{ margin-top:40px; }
  .section--loose{ margin-top:56px; }

  .metrics{ grid-template-columns:1fr 1fr; gap:0 24px; }
  .metric{ padding:14px 0 18px; gap:4px; }
  .metric .value{ font-size:32px; }
  .metric .name{ font-size:12px; }

  .row, .row--expanded{
    display:flex; flex-direction:column; gap:4px;
    padding:16px 0;
  }
  .row--expanded{ gap:8px; padding:20px 0; }
  .row .role{ font-size:16px; }

  .plate-figure{ margin-top:40px; }
  .plate-link{ gap:12px; }
  .plate{ padding:8px; box-shadow:0 1px 2px rgba(17,17,20,0.06), 0 16px 40px rgba(17,17,20,0.14); }
  .plate img{ aspect-ratio:4/5; }
  .plate-caption{ flex-direction:column; align-items:flex-start; gap:6px; }

  .eras{ grid-template-columns:1fr 1fr; }

  .ftv{ column-count:1; }

  .press-row{
    display:flex; flex-direction:column; gap:3px;
    padding:14px 0;
  }
  .press-row .outlet-line{
    display:flex; justify-content:space-between; gap:12px; width:100%;
  }
  .press-row .headline{ font-size:14px; }
  .press-row .year{ text-align:left; }

  .site-footer{
    margin-top:72px;
    padding:16px 0 24px;
    flex-direction:column; align-items:flex-start; gap:8px;
  }
  .site-footer .group{ flex-direction:column; gap:8px; }
}

@media (min-width:480px) and (max-width:719px){
  .ftv{ column-count:2; }
}