/* GovRoute: the engraving behind the /ga header (T1536, on the T1449 banknote layer). Boss 10-24 14:52 D4B54FDF, to the two mockups
   (gr-engrave-bg-1024): the laptop shot (BG-A) and the phone shot (BG-B), "that shit looks fire hell yeah". So:
   - >= 1024 px (the hero's own two-column split, and the plates' split): BG-A, full field. The whole Atlanta plate behind the header
     in a pale wash of the ink, faded into the paper at the edges and toward the bottom by one radial mask. The wash is light enough
     that the smallest grey text on the hero keeps 4.5:1. The dome is the one accent (light --gold-5, dark --gold). The plate lies
     under the words here.
   - < 1024 px: BG-B, anchored. The phone plate at full ink, top right beside "478 open", faded into plain paper toward the headline
     on the left and toward the buttons below by two intersected masks.
   - No draw-in at any width: --eng-print:static, read by engrave.js. The brief keeps the draw-in only if it never crosses text; at
     <= 390 px the phone plate's fade reaches the headline (measured 1-641 px of overlap at 320-390), so the plate is shown still.
   Rules of this file:
   - Loaded by d_states/state_home.html for /ga and /tn (gr-art-fix-1024: Boss 10-24 A659D549 "put the tn one on there as well"). Every rule hangs off the art box (.eng-bg) or the caption (.eng-cap), which only
     /ga's hero carries, so <html> keeps T1449's class="note" and nothing here reaches another page. The canvas reads its colours from
     custom properties set on the art box.
   - The art box is absolutely placed inside .sthero (inset 0, behind everything, overflow hidden): the hero keeps the restyle's
     exact height and every word, button and the map sit where the restyle puts them. Nothing moves when the plate draws.
   - No mask support, no art: the box is display:none unless the browser has what its variant needs (BG-A: mask; BG-B: mask-composite;
     both: :has, which isolates the hero so the art stays behind it), and engrave.js then fetches nothing.
   - Colours: D tokens, plus three literals that system.css cannot hold (it is generated, and its generator is not in this repo):
     the dark-mode line ink (warm white, as the plates were drawn) and the two washes, each a fixed mix of two tokens (ink 13% over
     paper). The canvas reads --eng-ink / --eng-gold / --eng-pol / --eng-v / --eng-print (engrave.js).
   - The caption, word for word as approved: desk, one small line in the hero's empty bottom-left (no height added); phone, the line
     right under the hero. One of the two is display:none at any width. */

html.note .eng-bg{
  --eng-ink-dark:#F4F1E8;          /* the dark-mode line ink (warm white) */
  --eng-wash:#D8DAD8;              /* = --ink #10212F at 13% over --paper #F6F5F1 */
  --eng-wash-dark:#2B343A;         /* = --eng-ink-dark #F4F1E8 at 13% over the dark --paper #0D1720 */
  --eng-ink:var(--ink);
  --eng-gold:var(--gold);
  --eng-pol:light;
  --eng-v:phone;
  --eng-print:static;
}
:root.note[data-theme=dark] .eng-bg{--eng-pol:dark;--eng-ink:var(--eng-ink-dark)}
@media (prefers-color-scheme:dark){:root.note:not([data-theme=light]) .eng-bg{--eng-pol:dark;--eng-ink:var(--eng-ink-dark)}}
@media (min-width:1024px){
  html.note .eng-bg{--eng-v:desk;--eng-ink:var(--eng-wash);--eng-gold:var(--gold-5)}
  :root.note[data-theme=dark] .eng-bg{--eng-ink:var(--eng-wash-dark);--eng-gold:var(--gold)}
}
@media (min-width:1024px) and (prefers-color-scheme:dark){:root.note:not([data-theme=light]) .eng-bg{--eng-ink:var(--eng-wash-dark);--eng-gold:var(--gold)}}
/* the one frame between a theme flip and the redraw: a plate inked for the other theme is shown inverted */
:root.note[data-theme=dark] .eng-cv[data-ink=light],:root.note[data-theme=light] .eng-cv[data-ink=dark]{filter:invert(1) hue-rotate(180deg)}
@media (prefers-color-scheme:dark){:root.note:not([data-theme]) .eng-cv[data-ink=light]{filter:invert(1) hue-rotate(180deg)}}
@media not (prefers-color-scheme:dark){:root.note:not([data-theme]) .eng-cv[data-ink=dark]{filter:invert(1) hue-rotate(180deg)}}

html.note .eng-bg{display:none;position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
html.note .eng-bg .eng-cv,html.note .eng-bg img{position:absolute;display:block;max-width:none;top:10px;right:-16px;width:520px;height:260px}
@supports selector(:has(*)){
  html.note .sthero:has(>.eng-bg){position:relative;isolation:isolate}
}

/* ---------- < 1024 px: BG-B, anchored beside the count ---------- */
@supports selector(:has(*)) and ((mask-composite:intersect) or (-webkit-mask-composite:source-in)){
  @media (max-width:1023px){
    html.note .eng-bg{display:block;
      -webkit-mask:linear-gradient(90deg,transparent calc(100% - 196px),#000 calc(100% - 140px)),linear-gradient(180deg,#000 112px,transparent 160px);-webkit-mask-composite:source-in;
      mask:linear-gradient(90deg,transparent calc(100% - 196px),#000 calc(100% - 140px)),linear-gradient(180deg,#000 112px,transparent 160px);mask-composite:intersect}
  }
}

/* ---------- >= 1024 px: BG-A, full field ---------- */
@supports selector(:has(*)) and ((mask-image:none) or (-webkit-mask-image:none)){
  @media (min-width:1024px){
    html.note .eng-bg{display:block;
      -webkit-mask:radial-gradient(ellipse 58% 88% at calc(50% - 62px) 26%,#000 34%,transparent 100%);
      mask:radial-gradient(ellipse 58% 88% at calc(50% - 62px) 26%,#000 34%,transparent 100%)}
    html.note .eng-bg .eng-cv,html.note .eng-bg img{top:auto;right:auto;bottom:-24px;left:calc(50% - 880px);width:1600px;height:600px}
    /* Tennessee (gr-art-fix-1024): the Nashville plate is 1600x440 and hangs from the hero's top; its foot fades out above the
       caption band, since the Capitol's body sits low-left in the plate where Georgia's has sky. Georgia's rules above are untouched. */
    html.note .eng-bg.eng-tn .eng-cv,html.note .eng-bg.eng-tn img{top:0;bottom:auto;height:440px}
    html.note .eng-bg.eng-tn{
      -webkit-mask:radial-gradient(ellipse 58% 88% at calc(50% - 62px) 26%,#000 34%,transparent 100%),linear-gradient(180deg,#000 calc(100% - 130px),transparent calc(100% - 50px));-webkit-mask-composite:source-in;
      mask:radial-gradient(ellipse 58% 88% at calc(50% - 62px) 26%,#000 34%,transparent 100%),linear-gradient(180deg,#000 calc(100% - 130px),transparent calc(100% - 50px));mask-composite:intersect}
    /* no script or no plate: the static SVG carries full-strength ink, so the wash shows it faint (the gold fades with it) */
    html.note .eng-bg img{opacity:.2}
  }
}

/* ---------- the caption ---------- */
/* the phone caption sits between the hero and the next section: keep note.css's seam (the hero's guilloche border, no double rule) */
@supports (mask-composite:intersect) and (mask-image:none){html.note .sthero+.eng-cap-out+.section{border-top:0}}
html.note .eng-cap{margin:0;font-family:var(--note-face);font-size:13px;line-height:18px;letter-spacing:.06em;color:var(--ink-3);
  font-variant-caps:small-caps;font-synthesis:small-caps}
html.note .eng-cap b{font-weight:600;color:var(--ink-2)}
html.note .eng-cap-in{display:none}
html.note .eng-cap-out{padding:14px 20px 0}
@media (min-width:1024px){
  html.note .eng-cap-out{display:none}
  html.note .sthero{position:relative}   /* note.css sets it only inside its @supports; the caption needs it here */
  html.note .eng-cap-in{display:block;position:absolute;left:max(48px,calc(50% - 592px));bottom:18px;max-width:46ch}
  html.note .eng-bg.eng-tn~.stgrid{padding-bottom:40px}   /* Tennessee's two columns end level (Georgia's map column runs longer), so the caption gets its own band under them (gr-art-fix-1024) */
}