/* ==========================================================================
   Design G, The Poll: the site's pages shown on the console's screens.
   Loaded after base.css, the page's own stylesheet and the console shell. It
   re-points the live tokens to phosphor and amber, sets the type in Archivo and
   Courier Prime, and frames each page as a CRT set into the grey-green panel.
   The live pages themselves are untouched; only their twins under /designg/
   load this.
   ========================================================================== */

body.designg-site {
  /* the sea becomes the screen */
  --abyss: #030805;
  --night: #07100b;
  --deep: #0b1a12;
  --tide: #1c3a2a;
  --sea: #3e7a58;
  --spray: #86c9a1;
  --foam: #cdf3da;

  /* phosphor on the glass */
  --salt: #e2f6e8;
  --mist: #a6d3b8;
  --haze: #86b89b;

  /* the lamps */
  --signal: #ffb02e;
  --signal-dim: #d08f1f;
  --sun: #ffe3a3;

  /* typed paper on the screen */
  --paper: #f1f3ec;
  --paper-2: #e2e7dc;
  --ink: #1d2024;
  --ink-2: #3c4147;
  --ink-3: #54595f;
  --stamp: #c3321f;

  /* Archivo names things, Courier Prime says them */
  --f-display: var(--f-set);
  --f-text: var(--f-type);
  --f-mono: var(--f-set);

  --t-mega: clamp(3.2rem, 10vw, 9rem);
  --t-xxl: clamp(2.8rem, 7.5vw, 7rem);
  --t-xl: clamp(2.3rem, 5vw, 4.6rem);
  --t-l: clamp(1.8rem, 3.2vw, 3rem);

  /* the console's strip sits in the flow above the screen, so nothing needs to clear a fixed masthead */
  --head: 0.5rem;

  background: var(--paint);
  font-variant-numeric: tabular-nums;
}
body.designg-site ::selection { background: var(--amber); color: #151914; }

/* the page is a screen: black bezel, curved corners, scan lines over everything shown on it */
.designg-site .screen {
  position: relative;
  margin: clamp(0.6rem, 1.6vw, 1.4rem) clamp(0.5rem, 1.6vw, 1.4rem);
  border: clamp(0.45rem, 1vw, 0.85rem) solid var(--bezel);
  border-radius: 1.3rem;
  background: var(--night);
  overflow: clip;
  box-shadow: 0 1px 0 var(--hi), 0 14px 26px -16px rgba(0, 0, 0, 0.55);
}
.designg-site .screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 4rem 0.5rem rgba(0, 0, 0, 0.6);
}

/* set type: condensed, heavy, upper case, as the console's engraving */
.designg-site .display {
  font-family: var(--f-set);
  font-stretch: 70%;
  font-weight: 740;
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.designg-site .label {
  font-stretch: 80%;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.designg-site .num, .designg-site .arr { font-stretch: 85%; }

/* the colophon on About shows the live site's faces in their own letters */
.designg-site .face--imbue .face-sample { font-family: "Imbue", Georgia, serif; font-stretch: normal; text-transform: none; }
.designg-site .face--news .face-sample { font-family: "Newsreader", Georgia, serif; font-stretch: normal; text-transform: none; }
.designg-site .face--plex .face-sample { font-family: "IBM Plex Mono", ui-monospace, monospace; font-stretch: normal; text-transform: none; }