/* public sans is what fbi.gov and justice.gov serve for interface text.
   vendored, not from a cdn. SIL OFL 1.1, licence alongside the file */
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/PublicSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* one number per breakpoint drives the whole cue. sizes are uswds type scale
   steps, breakpoints are uswds breakpoints. everything else derives from
   --cue-font, so there is nothing else to keep in sync */
:root {
  --ground: #fff;
  --ink: #1c1817;
  --font: "Public Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pad: 20px;

  /* 808/1600: the gif renders at its native 808px when the notice is at full
     size, so it is never upscaled */
  --domain-w: 50.5%;

  --cue-font: 16px;          /* scale step 5 */
  --cue-leading: 1.2;
  --cue-gap-ratio: 1.6;      /* notice-to-label distance, in cue-font units */
  --cue-lift: 16px;          /* how far the group rides above true centre */
}

@media (min-width: 480px)  { :root { --cue-font: 17px; } }  /* mobile-lg, step 6 */
@media (min-width: 640px)  { :root { --cue-font: 18px; } }  /* tablet, step 7 */
@media (min-width: 880px)  { :root { --cue-font: 20px; } }  /* tablet-lg, step 8 */
@media (min-width: 1200px) { :root { --cue-font: 22px; } }  /* desktop-lg, step 9 */
@media (min-width: 1400px) { :root { --cue-font: 24px; } }  /* widescreen, step 10 */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
}

/* splash: one viewport. notice and label are two content-sized rows centred as
   one block, so the distance between them never changes with window height */
.stage {
  height: 100svh;
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  gap: calc(var(--cue-font) * var(--cue-gap-ratio));
  padding: var(--pad) var(--pad) calc(var(--pad) + var(--cue-lift) * 2);
}

@media (max-width: 640px) {
  .stage {
    padding: var(--pad) 0 calc(var(--pad) + var(--cue-lift) * 2);
  }
}

/* one width drives both dimensions. deriving it from the height cap is what
   keeps the ratio: max-height on an aspect-ratio box clamps height only.
   the cue block is subtracted here or the group would not fit the viewport.
   1.6 is 1600/1000, the notice's own ratio */
.notice {
  position: relative;
  width: min(
    1600px,
    100%,
    (100svh - var(--pad) * 2 - var(--cue-lift) * 2
      - var(--cue-font) * (var(--cue-gap-ratio) + var(--cue-leading))) * 1.6
  );
  aspect-ratio: 1600 / 1000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
}

.sheet {
  display: block;
  width: 100%;
  height: 100%;
}

/* pinned to the centre of the blank slot in the source image, so it scales with
   the background. 22.55% is that slot's midpoint, y 159-292 of 1000 */
.domain {
  position: absolute;
  left: 50%;
  top: 22.55%;
  width: var(--domain-w);
  /* without this the height attribute wins as a presentational hint and the
     domain stays 101px tall while its width scales, squashing it into the text */
  height: auto;
  transform: translate(-50%, -50%);
}

/* uswds link, from designsystem.digital.gov. no transition: browsers hide the
   :visited colour from the animation system, and uswds declares none either */
.cue {
  font-size: var(--cue-font);
  line-height: var(--cue-leading);
  color: #005ea2;
  text-decoration: underline;
}

/* no :visited. uswds colours it violet-70v, but "you have read this" says
   nothing on a jump link to the same page.
   :hover before :active, same specificity, last one wins */
.cue:hover {
  color: #1a4480;
}

.cue:active {
  color: #162e51;
}

.cue:focus-visible {
  outline: 0.25rem solid #2491ff;
  outline-offset: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.why {
  min-height: 100svh;
}