/* ==========================================================================
   HOMEPAGE — the v3 design (site design v3 A7.2, gta-org
   openspec/changes/design-v3-home). Two verbatim blocks from design pin
   d40fdfc: home-v3.css below this header (the hero, the explainer, the figure
   cards, the close, the share row, the receipts head and foot), then
   shell-v3.css lines 113 and 149–262 (the Rap Sheet card rail), which A7.1
   left out of tracker-shell.css; the receipt-row block (shell-v3.css 114–148)
   lives in rows.css since A7.4 (design-v3-records), loaded before this file.
   Loaded only by index.html, after tokens/base/tracker-shell/rows.
   ========================================================================== */

:root {
  --mark-y: 58%;   /* where the wordmark sits on the facade — nudge this */
}

/* --- HERO ----------------------------------------------------------------
   Transparent facade artwork + the wordmark as live text, so it can be
   positioned, restyled and read by a screen reader. The baked-in PNG is
   still in the repo (gta-wordmark-facade-transparent.png) if we'd rather
   go back to it.
   ------------------------------------------------------------------------ */
/* The intaglio plate, regrounded (2026-09-11). It is opaque, but its paper was
   remapped from kraft #EDDBBB to #F4F0E8 against the page's #F4F1E9 — mean
   shifted, variance kept, so the tooth survives and there is no seam. It can
   therefore sit inline like the transparent art did: no panel, no border.
   The stage is capped by VIEWPORT HEIGHT as well as width — width = height cap
   x the plate's 2.07 ratio — so the black headline always clears the fold. */
.hero-v3 { padding: clamp(6px, 1.2vw, 18px) 0 clamp(14px, 2.5vw, 30px); }
.hero-v3__stage {
  position: relative;
  max-width: min(1240px, calc(var(--hero-cap, 56vh) * 2.07));
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* the wordmark sizes off THIS box, not the viewport — see .hero-v3__mark */
  container-type: inline-size;
}
.hero-v3__art { display: block; width: 100%; height: auto; }
.hero-v3__mark {
  position: absolute;
  left: 50%;
  top: var(--mark-y);
  transform: translate(-50%, -50%);
  width: 100%;
  margin: 0;
  font-family: var(--mark-face);
  font-weight: 400;
  /* cqw, not vw: 1cqw is 1% of the stage's own width, so the lettering keeps a
     fixed proportion of the building no matter how the height cap narrows the
     stage. In vw it overshot the facade badly on wide, short windows.
     "GRAND THEFT AMERICA" in Anton runs ~9.5x its font-size. The crop leaves
     ~2% padding each side, so the building spans ~96% of the plate — and
     96/9.5 = 10.1cqw puts the lettering across the facade edge to edge. */
  font-size: clamp(1.1rem, var(--mark-scale, 10.1cqw), 8.6rem);
  line-height: .9;
  letter-spacing: .004em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--paper-hi);
  -webkit-text-stroke: clamp(1.5px, .43cqw, 7px) var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 clamp(2px, .48cqw, 8px) 0 var(--ink);
}
/* (the tagline under the hero was cut 2026-09-11) */

/* --- THE EXPLAINER — all black ------------------------------------------- */
.explain {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(44px, 7vw, 86px);
  background-image: radial-gradient(rgba(244, 241, 233, .05) .7px, transparent .7px);
  background-size: var(--grain-size) var(--grain-size);
}
.explain__in { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.explain__label {
  font: 700 10px/1.2 var(--mono);
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(244, 241, 233, .45);
}
.explain__hed {          /* full width, per 09-11; the TL;DR eyebrow was cut */
  margin-top: 0;
  font: 600 clamp(2rem, 1.1rem + 3.6vw, 4.4rem)/1.02 var(--editorial);
  letter-spacing: -.035em;
  color: var(--paper);
  text-wrap: balance;
  text-align: center;
}

.grab {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(290px, .85fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding-block: clamp(28px, 4vw, 44px);
  border-top: 1px solid rgba(244, 241, 233, .22);
}
.grab:first-of-type { margin-top: clamp(26px, 4vw, 44px); }
.grab__kicker {
  font: 700 .8rem/1.2 var(--display);
  letter-spacing: .15em; text-transform: uppercase;
  color: rgba(244, 241, 233, .55);
}
.grab__body {
  font: 400 clamp(1.12rem, 1rem + .5vw, 1.42rem)/1.5 var(--editorial);
  color: rgba(244, 241, 233, .86);
}
.grab__kicker + .grab__body { margin-top: 12px; }

/* --- the figure card, carrying the desk wordmark ------------------------- */
.figcard {
  display: block;
  padding: clamp(18px, 2.4vw, 26px);
  border: 2px solid currentColor;
  background: rgba(244, 241, 233, .035);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.figcard--money { color: var(--gold-bright); }
.figcard--power { color: var(--red-onink); }
.figcard:hover, .figcard:focus-visible { transform: translateY(-3px); background: rgba(244, 241, 233, .085); }

/* the wm plaque is ink-on-paper by default; invert it for the black section */
.figcard .wm { --wm-size: clamp(1.35rem, 1rem + 1.4vw, 2rem); color: var(--paper); }
.figcard .wm__bot { background: var(--paper); color: var(--ink); }
.figcard .wm__mat { background: var(--paper); }

/* The floor label above the figure, matching the Money desk: the record is a floor, not a
   ceiling, so the same number must not read as exact here and qualified there. Takes the
   number's top margin and sits tight above it. */
.figcard__floor {
  display: block; margin-top: 18px;
  font: 700 .72rem/1.2 var(--display);
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(244, 241, 233, .6);
}
.figcard__floor + .figcard__num { margin-top: 4px; }
.figcard__num {
  display: block;
  margin-top: 18px;
  font: 700 clamp(3rem, 2rem + 5vw, 5.4rem)/.92 var(--display);
  letter-spacing: -.055em;
}
.figcard__what {
  display: block; margin-top: 12px;
  font: 400 1rem/1.4 var(--editorial);
  color: rgba(244, 241, 233, .78);
}
.figcard__go {
  display: block; width: 100%;
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid currentColor;
  font: 700 .72rem/1.2 var(--display);
  letter-spacing: .1em; text-transform: uppercase;
}
.figcard:hover .figcard__go { text-decoration: underline; text-underline-offset: 4px; }

/* the close — full width, per 09-11 */
.explain__close {
  padding-top: clamp(26px, 4vw, 40px);
  border-top: 1px solid rgba(244, 241, 233, .22);
}
.explain__close .grab__body {
  max-width: none;
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 2rem);
  line-height: 1.36;
  color: var(--paper);
}

/* --- share + embed, on the black ----------------------------------------- */
.explain__share {
  margin-top: clamp(26px, 4vw, 40px);
  padding-top: 20px;
  border-top: 1px solid rgba(244, 241, 233, .22);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.embed-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px;
  border: 1.5px solid var(--paper); border-radius: 999px;
  font: 700 12.5px/1 var(--display);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--paper); text-decoration: none;
}
.embed-btn:hover { background: var(--paper); color: var(--ink); }
.explain__share .gshare { margin-top: 0; padding-top: 0; border-top: 0; }
.explain__share .gshare-native { background: transparent; color: var(--paper); border-color: var(--paper); }
.explain__share .gshare-native:hover { background: var(--paper); color: var(--ink); }
.explain__share .gshare-native .dot { background: currentColor; }
.explain__share .gshare-ic { color: var(--paper); border-color: rgba(244, 241, 233, .4); }
.explain__share .gshare-ic:hover { color: var(--gold-bright); border-color: var(--gold-bright); }

/* the Rap Sheet card rail now lives in shell-v3.css — shared with the brief */

/* (the divider band above the receipts was cut 2026-09-11) */

/* --- RECEIPTS ------------------------------------------------------------ */
.receipts-v3 { padding-bottom: clamp(40px, 6vw, 76px); }
.receipts-v3__in { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.receipts-v3__head { padding-bottom: 14px; border-bottom: 3px solid var(--ink); }
.receipts-v3__head h2 {
  font: 700 clamp(1.4rem, 1.15rem + 1vw, 2.1rem)/1.1 var(--display);
  letter-spacing: -.04em;
}
/* the receipt row now lives in shell-v3.css — shared with the Rap Sheet */

.receipts-v3__foot { margin-top: 26px; text-align: center; }
.seeall {
  display: inline-block;
  padding: 14px 26px; border: 2px solid var(--ink);
  font: 700 .76rem/1 var(--display);
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
}
.seeall:hover { background: var(--ink); color: var(--paper); }

@media (max-width: 860px) {
  .grab { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 620px) {
  .hero-v3__mark { -webkit-text-stroke-width: 1.6px; text-shadow: 0 2px 0 var(--ink); }
}


/* --- THE RAP SHEET CARD RAIL — homepage foot and brief foot -------------
   Moved out of home-v3.css 2026-09-11. .rapsheet--archive is the leaner
   variant for the foot of a brief, where the column is 40rem not 1180px.
   ---------------------------------------------------------------------- */
/* --- WEEKLY RAP SHEET — a card rail ------------------------------------- */
.rapsheet { padding-block: clamp(40px, 6vw, 76px); }
.rapsheet__in { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.rapsheet__head {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding-bottom: 14px;
}
.rapsheet__head h2 {
  font: 700 clamp(1.4rem, 1.15rem + 1vw, 2.1rem)/1.1 var(--display);
  letter-spacing: -.04em;
}
.rapsheet__date { font: 500 .82rem/1.3 var(--mono); color: var(--ink-2); }
.rapsheet__arrows { margin-left: auto; display: flex; gap: 8px; }
.rsbtn {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 2px solid var(--ink); background: transparent;
  font: 700 17px/1 var(--display); color: var(--ink);
  cursor: pointer;
}
.rsbtn:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.rsbtn:disabled { opacity: .28; cursor: default; }

.rapsheet__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;   /* one card at a time — no peek of the next */
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.rapsheet__rail::-webkit-scrollbar { display: none; }

.rscard {
  scroll-snap-align: start;
  border: 3px solid var(--ink);
  background: var(--paper-hi);
  box-shadow: 10px 10px 0 rgba(17, 13, 8, .1);
  display: flex; flex-direction: column;
}
.rscard__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 12px clamp(18px, 2.4vw, 28px);
  background: var(--ink); color: var(--paper);
  font: 700 .74rem/1.2 var(--display);
  letter-spacing: .17em; text-transform: uppercase;
}
.rscard__bar em { font: 400 .72rem/1.2 var(--mono); font-style: normal; letter-spacing: .05em; color: rgba(244, 241, 233, .72); text-transform: none; }
.rscard__body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 0;
  padding: 0;
}
.rscard__body--nophoto { grid-template-columns: minmax(0, 1fr); }
.rscard__text { padding: clamp(22px, 3vw, 36px) clamp(18px, 2.4vw, 30px); }
.rscard__body h3 {
  max-width: 26ch;
  font: 600 clamp(1.45rem, 1.1rem + 1.6vw, 2.4rem)/1.08 var(--editorial);
  letter-spacing: -.03em;
}
.rscard__body h3 a { text-decoration: none; }
.rscard__body h3 a:hover { text-decoration: underline; text-underline-offset: 6px; }
.rscard__dek {
  margin-top: 14px; max-width: 56ch;
  font: 400 clamp(1rem, .95rem + .3vw, 1.12rem)/1.55 var(--editorial);
  color: var(--ink-2);
}
.rscard__dek + .rscard__dek { margin-top: 10px; }
.rscard__go {
  display: inline-block; margin-top: 22px;
  padding: 12px 18px; border: 2px solid var(--ink);
  font: 700 .74rem/1 var(--display);
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
}
.rscard__go:hover { background: var(--ink); color: var(--paper); }
/* the illustration fills its half of the card, edge to edge */
.rscard__photo {
  margin: 0;
  border-left: 3px solid var(--ink);
  overflow: hidden;
  min-height: 100%;
}
.rscard__photo img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }


/* archive variant — same boxes, smaller, no dek, whole card is the link */
.rapsheet--archive { padding-block: clamp(26px, 4vw, 40px) 0; }
.rapsheet--archive .rapsheet__head h2 { font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); }
.rapsheet--archive .rsbtn { width: 36px; height: 36px; font-size: 15px; }
.rapsheet--archive .rscard { box-shadow: 6px 6px 0 rgba(17, 13, 8, .1); }
.rapsheet--archive .rscard__bar { padding: 9px 16px; font-size: .68rem; }
.rapsheet--archive .rscard__text { padding: 18px 16px; }
.rapsheet--archive .rscard__body h3 { max-width: none; font-size: clamp(1.1rem, 1rem + .6vw, 1.45rem); }
.rapsheet--archive .rscard__dek { display: none; }
.rapsheet--archive .rscard__go { margin-top: 14px; padding: 9px 14px; font-size: .68rem; }
.rapsheet--archive .rscard__photo img { min-height: 150px; }

@media (max-width: 860px) {
  .rscard__body { grid-template-columns: 1fr; }
  .rscard__photo { order: -1; border-left: 0; border-bottom: 3px solid var(--ink); }
  .rscard__photo img { min-height: 0; max-height: 260px; }
}
@media (max-width: 620px) {
  .rapsheet__arrows { margin-left: 0; width: 100%; }
}