/* ============================================================
   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:none;
  transition:color 120ms ease;
}
.site-nav .links a:hover{ color:var(--ink); }
.site-nav .links a[aria-current="page"]{ color:var(--ink); font-weight:500; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--ink); }

/* ---------- 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 partway through ¶2's second sentence
   (after "…from how") behind a "+ Read more" expander (checkbox, no JS) — the fold
   visibly stops mid-thought as a hook, without the long sentence pushing the plate
   down. The collapse point is structural: ¶1 + the toggle + ¶2 up to "…from how"
   sit before the boundary; the rest of ¶2 is in .intro-rest-inline and ¶3–¶4 in
   .intro-rest — move content across that boundary to change where it folds. Once
   expanded the toggle reads "− Show less" so the plate can be brought back into view. */
.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-rest-inline{ display:none; }                                      /* ¶2 sentence 3, folded */
  .intro-more-toggle:checked ~ .intro-rest{ display:flex; }
  .intro-more-toggle:checked ~ p .intro-rest-inline{ display:inline; }     /* expand: ¶2 reads whole again */
  .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-label .lbl-less{ display:none; }                             /* collapsed: show "+ Read more" */
  .intro-more-toggle:checked ~ .intro-more-label .lbl-more{ display:none; }
  .intro-more-toggle:checked ~ .intro-more-label .lbl-less{ display:inline; } /* expanded: "− Show less" */
  .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); }
/* linked titles (external coverage / trailers) */
.ftv .title a{ color:inherit; text-decoration:none; transition:color 120ms ease; }
.ftv .title a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.ftv .title a .ext{ color:var(--ink-4); font-size:11px; }
.ftv .title a:hover .ext{ color:var(--ink); }

/* ---------- 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); }
a.chip{ text-decoration:none; transition:color 120ms ease, border-color 120ms ease; }
a.chip:hover{ color:var(--ink); border-color:var(--ink); }
a.chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.chip .ext{ color:var(--ink-4); font-size:11px; }
a.chip:hover .ext{ color:var(--ink); }
.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); }

/* ============================================================
   Paravel section — V3 left-margin index (sub-navigation)
   A sticky vertical index seated in the left margin beside the
   content column. Reusable across every page under /paravel/.
   Top nav + footer keep the full shell width; only the body
   content is offset right, leaving the index in the margin.
   Mobile (≤719px) collapses it to a scrollable chip row.
   ============================================================ */
.wrap.paravel-section{ max-width:1160px; }
.paravel-section .site-nav,
.paravel-section .site-footer{ /* span the full shell, above/below the index */ }

.paravel-body{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:0 48px;
  align-items:start;
}
.paravel-body > main{ min-width:0; }

.section-index{
  position:sticky; top:24px; align-self:start;
  display:flex; flex-direction:column; gap:11px;
  padding-top:8px;
}
.section-index-label{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-4); padding-bottom:6px;
}
.section-index a{
  width:max-content;
  font-size:14px; line-height:1.3; color:var(--ink-3);
  text-decoration:none; transition:color 120ms ease;
}
.section-index a:hover{ color:var(--ink); }
.section-index a[aria-current]{
  color:var(--ink); font-weight:500;
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--ink);
}
.section-index::-webkit-scrollbar{ height:0; }

/* ---------- Inside Paravel — in-flow doorways to the sub-sections ---------- */
.doorways{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  margin-top:24px;
}
.doorway{ display:flex; flex-direction:column; gap:12px; text-decoration:none; color:inherit; }
.doorway-frame{
  border:1px solid var(--rule); background:var(--field); overflow:hidden;
}
.doorway-frame img{
  display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  transition:filter 160ms ease, transform 220ms ease;
}
.doorway:hover .doorway-frame img{ filter:brightness(0.95); transform:scale(1.015); }
.doorway-cap{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.doorway-cap .t{ font-size:16px; font-weight:500; color:var(--ink); }
.doorway-cap .arr{ font-size:14px; font-weight:500; color:var(--accent); }

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

  /* sub-nav collapses to a scrollable chip row under the top nav */
  .paravel-body{ display:block; }
  .section-index{
    position:static; flex-direction:row; gap:8px;
    padding:12px 0; margin:0;
    border-bottom:1px solid var(--rule);
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  .section-index-label{ display:none; }
  .section-index a{
    flex:none; border:1px solid var(--rule); padding:6px 12px;
    font-size:12px; color:var(--ink-3); text-decoration:none;
  }
  .section-index a[aria-current]{
    border-color:var(--ink); color:var(--ink); font-weight:500; text-decoration:none;
  }

  .doorways{ grid-template-columns:1fr; gap: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; }
}

/* ---------- attribution note (frame pages only — never the replica) ----------
   Small, muted, below the page content; same restrained register as the footer. */
.legal-note{
  margin-top:64px;
  font-size:12px; line-height:1.55; color:var(--ink-3);
  max-width:66ch;
}
@media (max-width:719px){ .legal-note{ margin-top:48px; } }