/* ----- ESTIC 2026 poster page --------------------------------------------
   Loaded by pages/estic-2026.html, the page the poster's QR code points to:
   one long article with tables, a code block and a reference list. Shared
   pieces (nav, .container, .btn, .site-footer) come from style.css.

   The article numbers its own sections ("1. Why statistics matters"), so
   these headings get no running "01 —" index; the number is set in accent.
   Most visitors arrive on a phone: nothing here may be wider than 320px
   except the code, which scrolls inside its own frame.
   ------------------------------------------------------------------------ */

.estic-page {
  background: var(--bg);
  color: var(--fg-muted);
}

/* ----- Hero ----- */
.estic-hero {
  padding: calc(64px + clamp(3.5rem, 8vw, 7rem)) 0 clamp(3rem, 6vw, 4.5rem);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.estic-title {
  max-width: 22ch;
  margin-bottom: .6em;
  font-size: clamp(2rem, 2.6vw + 1rem, 3.75rem);
  letter-spacing: -.05em;
  line-height: 1.05;
  overflow-wrap: break-word;
}

.estic-occasion {
  max-width: 58ch;
  margin-bottom: 1.5rem;
  font-size: clamp(1.0625rem, .5vw + .95rem, 1.25rem);
  line-height: 1.55;
}

.estic-authors {
  margin-bottom: .5rem;
  line-height: 1.6;
}

/* Affiliations, one per line; the marker hangs so a wrapped line starts under the text */
.estic-affiliations {
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--fg-muted);
}
.estic-affiliations li {
  padding-left: .65em;
  text-indent: -.65em;
}

/* Superscript markers that do not push the line apart */
.estic-authors sup,
.estic-affiliations sup {
  position: relative;
  top: -.45em;
  font-size: .7em;
  line-height: 0;
  vertical-align: baseline;
}

/* The hero: the copy, the poster (its download and a preview, both linked to the PDF) and the welcome line. One column
   on phones in that order, so the poster follows the authors; side by side from 960 px, the poster in the right column */
.estic-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.estic-poster { margin: 0 0 2rem; }
.estic-download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  margin-bottom: 2.25rem;
}
.estic-poster .estic-download { margin-bottom: 1rem; }
.estic-page .btn { max-width: 100%; }
.estic-poster__preview { display: block; max-width: 40rem; }
.estic-poster__preview img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}
.estic-poster__preview:hover { text-decoration: none; }
.estic-poster__preview:hover img { border-color: var(--line-strong); }
@media (min-width: 960px) {
  .estic-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "copy poster" "welcome poster";
    column-gap: clamp(2rem, 5vw, 3.5rem);
    align-items: start;
  }
  .estic-hero__copy { grid-area: copy; }
  .estic-poster { grid-area: poster; margin: 0; }
  .estic-welcome { grid-area: welcome; }
  .estic-poster__preview { max-width: none; }
}

.estic-welcome {
  max-width: 68ch;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--fg);
}

/* ----- Sections ----- */
.estic-section {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
  scroll-margin-top: 64px;           /* anchor jumps clear the fixed nav */
  overflow-wrap: break-word;
}
.estic-hero + .estic-section { border-top: 0; }

.estic-section h2 {
  max-width: 30ch;
  margin-bottom: 1.2em;
  font-size: clamp(1.625rem, 1.6vw + 1rem, 2.625rem);
}
.estic-num { color: var(--accent); }

.estic-section h3 {
  max-width: 48ch;                   /* about the width of the text column below it */
  margin: 3.25rem 0 1rem;
  font-size: var(--fs-md);
  line-height: 1.3;
}
.estic-section h2 + h3 { margin-top: 0; }

.estic-section p {
  max-width: 72ch;
  margin-bottom: 1.25rem;
  line-height: 1.7;
}

/* "In one paragraph": the whole story, so it reads a step larger */
.estic-section .estic-summary {
  max-width: 64ch;
  font-size: clamp(1.0625rem, .4vw + .95rem, 1.1875rem);
  color: var(--fg);
}

.estic-stat { font-family: var(--font-mono); font-size: .9375em; }

/* Take-home message: the poster's banner (a solid block of large type) in the site's colours: black on the
   accent green (about 12:1), square corners, the full width of the content. It ends two sections. */
.estic-section .estic-takehome {
  max-width: none;
  margin: 2.75rem 0 0;
  padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 3rem);
  background: var(--accent);
  color: #000;
  font-family: var(--font-mono);
  font-size: clamp(1.25rem, 1.2vw + .95rem, 2rem);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: -.02em;
}
.estic-takehome strong {
  display: block;
  margin-bottom: .9rem;
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #000;
}

/* ----- Lists ----- */
.estic-list,
.estic-steps {
  max-width: 72ch;
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
}
.estic-list { list-style: square; }
.estic-list li,
.estic-steps li {
  margin-bottom: .8rem;
  padding-left: .4rem;
  line-height: 1.7;
}
.estic-list li::marker { color: var(--fg-dim); }
.estic-steps li::marker {
  font-family: var(--font-mono);
  font-size: .875em;
  color: var(--accent);
}

/* ----- Tables: 1px rules, labels in mono, numbers in mono ----- */
.estic-table-wrap {
  max-width: 56rem;
  margin: 2rem 0 2.25rem;
  overflow-x: auto;                  /* a safety net only: every table fits a 320px screen */
}

.estic-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  line-height: 1.5;
}

.estic-table th,
.estic-table td {
  padding: .8rem 1.25rem .8rem 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-weight: var(--fw-regular);
}
.estic-table th:last-child,
.estic-table td:last-child { padding-right: 0; }

.estic-table thead th {
  padding-top: 0;
  border-bottom-color: var(--line-strong);
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .08em;
  line-height: 1.45;
  text-transform: uppercase;
  vertical-align: bottom;
  color: var(--fg);
}

.estic-table tbody th { color: var(--fg-muted); }

.estic-table td {
  font-family: var(--font-mono);
  font-size: .875rem;
  color: var(--fg);
}

.estic-table .estic-col-num { text-align: right; }   /* not .num: style.css gives that the stats strip's block numbers */
.estic-table .nobr { white-space: nowrap; }

/* ----- Code ----- */
.estic-code {
  max-width: 56rem;
  margin: 1.5rem 0 1rem;
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  background: var(--bg-raise);
  font-family: var(--font-mono);
  font-size: .8125rem;
  line-height: 1.65;
  color: var(--fg);
  tab-size: 4;
}
.estic-code code { font-family: inherit; }
.estic-code:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

/* ----- Figures: charts drawn on black for this page (assets/estic-2026/make_figs.py), 1600 x 1000, lazy-loaded,
   each with a one-line caption. A table after a chart stays: it is the accessible version of the data. ----- */
.estic-figure {
  max-width: 56rem;
  margin: 2rem 0 2.25rem;
}
.estic-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}
/* Clicking or tapping a figure opens its full-size file in a new tab */
.estic-figure__link { display: block; cursor: zoom-in; }
.estic-figure__link:hover { text-decoration: none; }
.estic-figure__link:hover img { border-color: var(--line-strong); }
.estic-figure figcaption,
.estic-anim figcaption {
  margin-top: .75rem;
  font-family: var(--font-mono);
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--fg-muted);
}
.estic-figure__credit {
  display: block;
  margin-top: .3rem;
  font-size: .75rem;
  color: var(--fg-dim);
}
.estic-figure__credit a { text-decoration: underline; text-underline-offset: 3px; }     /* the credit's links are not told apart by colour alone */
.estic-figure--illustration { max-width: 40rem; }   /* the Commons drawing, on its own white ground */
.estic-section .estic-figure-code {
  margin: -1.25rem 0 2.25rem;
  font-family: var(--font-mono);
  font-size: .8125rem;
}

/* ----- Animations (assets/estic-2026/estic-art.js): dots on black, as on the Research page. The script draws into
   the frame's size, so the frame's height is set here: taller on narrow screens, where the drawings stack. ----- */
.estic-anim {
  max-width: 56rem;
  margin: 2rem 0 2.25rem;
}
.estic-anim[hidden] { display: none; }
.estic-anim__frame {
  position: relative;
  height: 21rem;
  border: 1px solid var(--line);
  background: var(--bg);
}
.estic-anim__frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.estic-anim[data-anim="pubbias"] .estic-anim__frame { height: 20rem; }

.estic-anim__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  margin-top: .75rem;
}
.estic-anim__group { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.estic-anim__grouplabel {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.estic-anim__btn {
  min-width: 44px;
  min-height: 44px;
  padding: .3rem .9rem;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--bg);
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.estic-anim__btn[hidden] { display: none; }
.estic-anim__btn:hover,
.estic-anim__btn:focus-visible { border-color: var(--fg); color: var(--fg); }
.estic-anim__btn[aria-pressed="true"] { border-color: var(--accent); color: var(--fg); }

/* The key under the publication-bias drawing: its dots, as small squares */
.estic-anim__legend {
  display: grid;
  gap: .4rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--fg-muted);
}
.estic-anim__legend li { display: flex; align-items: center; gap: .75rem; }
.estic-key { flex: none; display: inline-block; width: 10px; height: 10px; margin: 0 3px; }
.estic-key--pos { background: var(--accent); }
.estic-key--neg { background: var(--cream); }
.estic-key--spin { background: var(--accent); outline: 1px solid var(--accent); outline-offset: 2px; }
.estic-key--none { box-sizing: border-box; border: 1px solid var(--fg-dim); }

/* The script sets each frame's height itself, for the layout it chooses (stacked below 780 px of frame for the
   simulation, 600 for the publication-bias drawing, 720 for the audit); these are the same heights before it runs,
   at the page widths where the frames are that narrow, so nothing below them moves when it starts. */
@media (max-width: 869px) { .estic-anim[data-anim="spreads"] .estic-anim__frame { height: 27rem; } }
@media (max-width: 669px) { .estic-anim[data-anim="pubbias"] .estic-anim__frame { height: 18rem; } }
@media (max-width: 801px) { .estic-anim[data-anim="audit"] .estic-anim__frame { height: 26rem; } }
@media (max-width: 699px) {
  .estic-anim__grouplabel { flex-basis: 100%; }                     /* the label on its own line, the buttons together below */
}

/* ----- How to cite ----- */
.estic-section .estic-cite {
  max-width: 56rem;
  margin: 0;
  padding: 1.25rem 1.5rem;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  box-shadow: inset 2px 0 0 var(--accent);
  color: var(--fg);
}

/* ----- References ----- */
.estic-refs {
  max-width: 62rem;
  margin: 0;
  padding-left: 2.25rem;
}
.estic-refs li {
  margin-bottom: .9rem;
  padding-left: .4rem;
  font-size: .9375rem;
  line-height: 1.6;
}
.estic-refs li::marker {
  font-family: var(--font-mono);
  font-size: .8125rem;
  color: var(--accent);
}
.estic-refs em { color: var(--fg-muted); }
.estic-refs a {
  color: var(--fg-muted);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  white-space: nowrap;               /* a DOI moves to the next line whole instead of breaking at a hyphen */
}
.estic-refs a:hover { color: var(--accent); text-decoration-color: var(--accent); }

.estic-section .estic-updated {
  margin: 2.5rem 0 0;
  font-size: .875rem;
}
.estic-updated em { color: var(--fg-muted); }

/* ----- Phones ----- */
@media (max-width: 768px) {
  .estic-hero { padding-top: calc(56px + 3.5rem); }
  .estic-section { scroll-margin-top: 56px; }

  .estic-table { font-size: .875rem; }
  .estic-table th,
  .estic-table td { padding-right: .625rem; }
  .estic-table thead th { font-size: .6875rem; letter-spacing: .04em; }
  .estic-table td { font-size: .75rem; }

  .estic-code { padding: 1rem; font-size: .75rem; }
  .estic-refs { padding-left: 1.75rem; }
}

/* The narrowest phones: a confidence interval may break inside its brackets */
@media (max-width: 359px) {
  .estic-table .nobr { white-space: normal; }
}
/* ...and the longest DOIs (256px on one line) may break */
@media (max-width: 339px) {
  .estic-refs a { white-space: normal; overflow-wrap: anywhere; }
}