/* Escalation Lab: shared stylesheet for the parent-brand pages (about, research, 404, redirects).
   Design tokens and the header, footer and plotting-sheet rules are taken unchanged from the brand
   kit's front page (index.html), which keeps its own inline styles and scope animation. */
:root {
  /* the room: a plotting sheet */
  --sheet: #E6E9E1;
  --grid: #D3DAD0;
  --grid-major: #BCC6B9;
  --ink: #15191B;
  --ink-2: #4A5557;
  --amber: #A86A12;      /* the scope on light ground */
  --red: #CF2F25;        /* chinagraph: escalation and contacts only */
  /* a screen in the room: FLASHPOINT */
  --screen: #0A0E12; --screen-rule: #24313A; --paper: #ECE6D8; --screen-amber: #F0B463; --screen-red: #EB5B55; --screen-muted: #9AA3A8;
  /* sealed */
  --sealed: #0C0E0F; --bone: #D9D4C7; --sealed-rule: #2A2D2E;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --text: "Newsreader", Georgia, serif;
  --data: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --gutter: clamp(1rem, 4vw, 3rem);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sheet); color: var(--ink); font: 400 1.125rem/1.6 var(--text); }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 78rem; margin: 0 auto; padding: 0 var(--gutter); }


.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; padding-block: 1.1rem; }
.lockup { height: 2.5rem; width: auto; display: block; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(1rem, 2.4vw, 2rem); flex-wrap: wrap; }
.site-nav a { font: 600 .95rem/1 var(--display); text-decoration: none; }
.site-nav a:hover { color: var(--red); }


/* the plotting sheet */
.table {
  background-color: var(--sheet);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
  border-block: 1px solid var(--grid-major);
}

.btn { display: inline-flex; align-items: center; min-height: 3rem; padding: 0 1.4rem; background: var(--ink); color: var(--sheet); font: 700 1rem/1 var(--display); font-stretch: 110%; text-decoration: none; border: 0; cursor: pointer;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.btn:hover { background: var(--red); }
.link-quiet { font: 600 1rem/1 var(--display); text-decoration: none; border-bottom: 2px solid var(--red); padding-bottom: .2rem; background: var(--sheet); }


h2 { font: 750 clamp(1.6rem, 2.8vw, 2.2rem)/1.05 var(--display); font-stretch: 115%; margin: 0 0 1.75rem; letter-spacing: -.01em; }
h3 { margin: 0; }


.site-foot { padding-block: clamp(2.5rem, 6vw, 4rem); border-top: 1px solid var(--grid-major); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 2.5rem clamp(2rem, 5vw, 4rem); align-items: end; }
.legend h2, .tb-label { font: 700 .85rem/1.2 var(--display); font-stretch: 105%; color: var(--ink-2); margin: 0; letter-spacing: 0; }
.legend ul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .85rem; }
.legend li { display: grid; grid-template-columns: 2.25rem 1fr; gap: .75rem; align-items: center; font-size: 1.02rem; line-height: 1.35; background: var(--sheet); }
.legend svg { width: 2.25rem; height: 1.5rem; }
.legend b { font: 700 1rem/1.2 var(--display); font-stretch: 108%; display: block; }
.legend span { color: var(--ink-2); }
/* drawing title block, bottom-right of the sheet */
.titleblock { background: var(--sheet); border: 2px solid var(--ink); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.titleblock > div { padding: .8rem 1rem; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.titleblock .tb-title { grid-column: 1 / -1; border-top: 0; border-left: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; padding: 1.1rem 1rem; }
.titleblock .tb-title .lockup { height: 2.1rem; }
.titleblock .tb-title p { margin: 0; color: var(--ink-2); font-size: 1rem; }
.titleblock .tb-cell { border-left: 0; }
.titleblock .tb-r { border-left: 1px solid var(--ink); }
.titleblock .tb-wide { grid-column: 1 / -1; border-left: 0; }
.tb-value { margin: .3rem 0 0; font: 600 1rem/1.35 var(--display); }
.tb-value a { text-decoration: none; border-bottom: 1px solid var(--red); }
.tb-value a:hover { color: var(--red); }
.tb-links { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.tb-rights { font: 400 .95rem/1.4 var(--text); color: var(--ink-2); margin: .3rem 0 0; }
/* Small and secondary by design: the owner wants it present, not prominent. */
.tb-support { margin-left: .5rem; font-size: .85rem; color: var(--ink-2); text-decoration-thickness: 1px; text-underline-offset: .18em; white-space: nowrap; }
.tb-support:hover { color: var(--ink); }
@media (max-width: 56rem) { .foot-grid { grid-template-columns: 1fr; } }
@media (max-width: 30rem) { .titleblock { grid-template-columns: 1fr; } .titleblock .tb-r { border-left: 0; } }


@media (max-width: 30rem) { .lockup { height: 2rem; } }

/* inner pages: plain reading column on the sheet */
.page { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.page .col { max-width: 44rem; }
.page h1 { font: 800 clamp(2rem, 4.5vw, 3rem)/1.05 var(--display); font-stretch: 115%; letter-spacing: -.015em; margin: 0 0 1.5rem; }
.page h2 { margin-top: 2.75rem; }
.page h3 { font: 700 1.05rem/1.3 var(--display); font-stretch: 108%; margin: 1.5rem 0 .4rem; }
.page p, .page li { max-width: 44rem; }
.page ul { padding-left: 1.2rem; }
.page li + li { margin-top: .5rem; }
.page .lede { font-size: 1.25rem; line-height: 1.55; margin-top: 0; }
.page a:hover { color: var(--red); }
.page .cite p { margin: 0; font-size: 1.05rem; }

/* Front page fix (not in the kit): at narrow widths the FLASHPOINT panel's grid items took the
   series wordmark's 34rem width as their minimum and pushed the page wider than the screen
   (584px at 375px). Letting the items shrink keeps every width the same and changes no SVG or colour. */
.screen > * { min-width: 0; }
/* Phones: the four nav items on one line where they fit, otherwise a tidy two-by-two grid
   (never "About" on its own line). */
@media (max-width: 30rem) { .site-nav ul { gap: .85rem; } .site-nav a { font-size: .86rem; } }
@media (max-width: 22.99rem) { .site-nav ul { display: grid; grid-template-columns: auto auto; justify-content: start; gap: .7rem 1.6rem; } }