/* ==========================================================================
   Flatland — design system
   --------------------------------------------------------------------------
   Palette: paper and ink, warm neutrals from one grey family. Colour is kept for
   meaning: the four audience colours (the interference colours thicker flakes show
   on a SiO₂ wafer) and, in figures, a dusty violet for the wafer itself.
   Type: IBM Plex Sans for headlines, labels, navigation and data; STIX Two Text, made
   for scientific publishing, for reading, so formulas and Greek look as they do in
   papers; IBM Plex Mono only for code.
   Figures: a drawing or chart sits on a raised plate with its caption underneath, and its labels are set in
   IBM Plex Sans like the rest of the data.
   ========================================================================== */

:root {
  --bg: #F4F2EE;
  --bg-raised: #FBFAF8;
  --bg-sunken: #EAE7E1;
  --line: #DBD7CF;
  --line-strong: #B7B1A6;
  --ink: #1C1B19;
  --ink-muted: #56524B;
  --ink-faint: #6B665E;
  --accent: #5E4D96;
  --accent-strong: #4A3C7A;
  --accent-quiet: #E8E4F0;

  --general: #8C5A00;      --general-quiet: #F6EAD2;
  --theory: #2355C0;       --theory-quiet: #E1E8F6;
  --experiment: #066F5F;   --experiment-quiet: #DAEFEA;
  --engineering: #B03458;  --engineering-quiet: #F5E0E5;
  --caution: var(--ink-muted); --caution-quiet: transparent;

  /* The darker paper of every second section on a long page, with the sunken tone and hairline that go with it.
     Each follows the theme, because it is worked out from that theme's own tokens. */
  --band: var(--bg-sunken);
  --band-sunken: color-mix(in srgb, var(--bg-sunken), var(--ink) 5%);
  --band-line: color-mix(in srgb, var(--line), var(--ink) 8%);

  --lattice-bottom: var(--ink);
  --lattice-top: var(--lens);

  --lens: var(--general);
  --lens-quiet: var(--general-quiet);

  --font-display: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: "STIX Two Text", Cambria, Georgia, serif;
  --font-ui: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --step--2: 0.75rem;
  --step--1: 0.875rem;
  --step-0: 1.125rem;
  --step-1: 1.25rem;
  --step-2: 1.5625rem;
  --step-3: 2rem;
  --step-4: clamp(1.875rem, 1.35rem + 2.2vw, 2.75rem);
  --step-5: clamp(2.5rem, 1.4rem + 4.2vw, 4.5rem);

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;

  /* Room the sticky header takes above anything scrolled or pinned to the top of the window. */
  --head-room: 5.25rem;
  --measure: 38rem;
  --wrap: 76rem;
  --r-1: 3px;
  --r-2: 6px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 160ms;

  color-scheme: light;
}

/* The dark palette is for screens only: printing always uses the light one, so dark text never lands on white paper. */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161614;
    --bg-raised: #1F1E1B;
    --bg-sunken: #10100E;
    --line: #312F2B;
    --line-strong: #4B4842;
    --ink: #EDEAE3;
    --ink-muted: #B4AFA5;
    --ink-faint: #8E897F;
    --accent: #A99BD6;
    --accent-strong: #C4B9E8;
    --accent-quiet: #2A2638;
    --general: #E6B458;      --general-quiet: #33280F;
    --theory: #8FB0F0;       --theory-quiet: #172238;
    --experiment: #5CC3B2;   --experiment-quiet: #112E2A;
    --engineering: #EE93A8;  --engineering-quiet: #36191F;
    --lattice-bottom: var(--ink);
    --lattice-top: var(--lens);
    color-scheme: dark;
  }
}

@media screen {
  :root[data-theme="dark"] {
    --bg: #161614;
    --bg-raised: #1F1E1B;
    --bg-sunken: #10100E;
    --line: #312F2B;
    --line-strong: #4B4842;
    --ink: #EDEAE3;
    --ink-muted: #B4AFA5;
    --ink-faint: #8E897F;
    --accent: #A99BD6;
    --accent-strong: #C4B9E8;
    --accent-quiet: #2A2638;
    --general: #E6B458;      --general-quiet: #33280F;
    --theory: #8FB0F0;       --theory-quiet: #172238;
    --experiment: #5CC3B2;   --experiment-quiet: #112E2A;
    --engineering: #EE93A8;  --engineering-quiet: #36191F;
    --lattice-bottom: var(--ink);
    --lattice-top: var(--lens);
    color-scheme: dark;
  }
}

/* The reading lens recolours links, focus rings and highlights site-wide. */
:root[data-lens="general"]     { --lens: var(--general);     --lens-quiet: var(--general-quiet); }
:root[data-lens="theory"]      { --lens: var(--theory);      --lens-quiet: var(--theory-quiet); }
:root[data-lens="experiment"]  { --lens: var(--experiment);  --lens-quiet: var(--experiment-quiet); }
:root[data-lens="engineering"] { --lens: var(--engineering); --lens-quiet: var(--engineering-quiet); }

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
/* Every size on the site is in rem, so on a very wide screen one step up in the root size enlarges the type, the
   spacing and the page's column together, instead of leaving a narrow column in a wide empty window. The reader's
   own browser font size still applies on top. */
@media (min-width: 1800px) { html { font-size: 112.5%; } }
@media (min-width: 2300px) { html { font-size: 125%; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

/* A faint paper grain over the whole page, so flat colour does not read as a screen default.
   Generated grey noise, no image file and no blend mode (cheap to scroll): it darkens paper and
   lightens charcoal by the same faint amount. It ignores the pointer and is left out of print. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.04;
}
@media print { body::after { display: none; } }

/* Going from one page to the next cross-fades instead of flashing, for readers who have not asked for less
   motion. Browsers without view transitions load pages as before. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }

img, svg { display: block; max-width: 100%; }

a {
  color: var(--ink);
  text-decoration-color: var(--lens);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-thickness: 2px; }
/* Links that leave the site end in a small ↗. It is drawn in the link's padding, so it stays with the
   last word and outside the underline; the one grey holds 3:1 on the light and the dark background. */
a[href^="http"] {
  padding-right: 0.8em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 7.5 7.5 2.5M3.5 2.5h4v4' fill='none' stroke='%238E897F' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.05em center / 0.62em;
}

:focus-visible {
  outline: 2px solid var(--lens);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Every heading is set in the sans; reading text stays in the serif. */
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); line-height: 1.15; font-weight: 600; }
p { margin: 0 0 var(--s-4); }

/* Components set their own display; the hidden attribute must still win. */
[hidden] { display: none !important; }

/* The link ui.js adds to a heading that names a section: a quiet # after the heading, seen when the heading is
   pointed at or the link has the keyboard focus. A click copies the address and says so. Touch screens, which
   cannot point, do without it. */
.heading-link { margin-left: 0.35em; font-family: var(--font-ui); font-weight: 400; color: var(--ink-faint); text-decoration: none; opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.heading-link::before { content: "#"; }
:is(h2, h3):hover > .heading-link, .heading-link:focus-visible { opacity: 1; }
.heading-link:hover { color: var(--lens); }
.heading-link[data-copied]::after { content: "Link copied"; margin-left: 0.5em; font-size: var(--step--1); font-weight: 500; letter-spacing: 0; color: var(--ink-muted); }
.heading-link[data-copied] { opacity: 1; }
@media (hover: none) { .heading-link { display: none; } }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.04;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: var(--step-4);
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
}

.label {
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-faint);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: var(--measure);
}

.mono { font-family: var(--font-ui); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Buttons and chips
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: 500 var(--step--1)/1 var(--font-ui);
  padding: 0.85rem 1.15rem;
  border-radius: var(--r-2);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn:hover { background: var(--lens); border-color: var(--lens); color: var(--bg); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
.text-cta { align-self: center; padding-inline: var(--s-2); font: 500 var(--step--1)/1.4 var(--font-ui); }

.link-btn {
  font: 500 var(--step--1)/1.4 var(--font-ui);
  color: var(--lens);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.chip {
  font: 500 var(--step--1)/1 var(--font-ui);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.chip:hover { color: var(--ink); border-color: var(--ink-muted); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* --------------------------------------------------------------------------
   Header, navigation, reading lens
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  min-height: 3.75rem;
  padding-block: var(--s-2);
}

/* The underline is one layer: a single ruled line under the name. */
.wordmark {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--font-display);
  font-weight: 560;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
/* The logo, a stack of curved sheets: assets/logo.svg used as a mask, so it takes the text colour in either theme. */
.wordmark::before {
  content: "";
  flex: none;
  width: 1.35em;
  aspect-ratio: 769 / 716;
  background: currentColor;
  -webkit-mask: url(../logo.svg) no-repeat center / contain;
  mask: url(../logo.svg) no-repeat center / contain;
}
.wordmark::after {
  content: "";
  position: absolute;
  left: 1.7em;
  right: 0;
  bottom: -0.12em;
  height: 1px;
  background: var(--lens);
}

.site-nav { display: flex; gap: var(--s-2); }
.site-nav a {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--ink-muted);
  text-decoration: none;
  padding-block: 0.4rem;
}
.site-nav a:hover, .site-nav a[aria-current] { color: var(--ink); }
/* Search is a magnifier in the header; ui.js opens the search box from it, and its title names the shortcut. */
.site-nav .nav-icon { display: inline-flex; align-items: center; margin-inline: -0.35rem; padding-inline: 0.55rem; } /* a target of about 40 px, with no change to the row */
.nav-icon svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.site-nav a[aria-current] { box-shadow: inset 0 -1px 0 var(--ink); }

.lens { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
/* The nav links and the lens no longer share one row with a visible label, so the label is kept
   for screen readers only; the four named buttons explain themselves. */
.lens .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lens-options {
  display: flex;
  padding: 2px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
}
.lens-options button {
  font: 500 var(--step--1)/1 var(--font-ui);
  padding: 0.5rem 0.4rem;
  border: 0;
  border-radius: var(--r-1);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
}
.lens-options button:hover { color: var(--ink); }
.lens-options button[aria-pressed="true"] { background: var(--lens-quiet); color: var(--lens); }
.lens-select { display: none; }
/* The colour theme: system (half-filled), light (ring) or dark (disc), one step per click. */
.theme-btn { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: var(--r-1); background: transparent; color: var(--ink-muted); cursor: pointer; }
.theme-btn:hover { color: var(--ink); background: var(--bg-sunken); }
.theme-ring { fill: none; stroke: currentColor; stroke-width: 1.75; }
.theme-half { fill: currentColor; }
:root[data-theme="light"] .theme-half { display: none; }
:root[data-theme="dark"] .theme-ring { fill: currentColor; }

@media (max-width: 1220px) {
  /* The logo, ten links (Search as a magnifier) and the lens need about 1,205 px. Narrower than that, give the links their own row
     under the name and the lens, rather than letting the lens wrap onto a row by itself. */
  .site-nav { order: 3; width: 100%; }
  :root { --head-room: 7.25rem; }
}

@media (max-width: 900px) {
  /* Nav and lens wrap onto extra rows here; a header that tall should scroll away. */
  .site-header { position: relative; }
  .site-nav { order: 3; width: 100%; overflow-x: auto; gap: var(--s-4); }
  .lens { margin-left: auto; }
  .lens .label { display: none; }
}

@media (max-width: 620px) {
  /* The links no longer fit one row, and a scrolling strip hides the last one with no hint: wrap instead. */
  .site-nav { flex-wrap: wrap; overflow-x: visible; row-gap: 0; }
  /* Four long labels overflow a single row on a phone, and a 2 x 2 grid of them made the header a quarter
     of the screen: the lens becomes a menu on the name's row. */
  .lens { order: 2; }
  .lens-options, .theme-btn { display: none; }
  .lens-select { display: block; width: auto; padding: 0.45rem 0.6rem; font: 500 var(--step--1)/1.2 var(--font-ui); color: var(--lens); background: var(--lens-quiet); border: 1px solid var(--line-strong); border-radius: var(--r-2); }
}
@media (max-width: 350px) {
  /* On the narrowest phones a slightly smaller name keeps the logo, the name and the lens menu on one row. */
  .site-header .wrap { column-gap: var(--s-3); }
  .site-header .wordmark { font-size: 1.15rem; }
  .lens-select { padding-inline: 0.4rem; }
}

/* --------------------------------------------------------------------------
   Hero with the twisted-bilayer moiré
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(88vh, 46rem);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.hero-field { position: absolute; inset: 0 0 0 52%; }
.hero-field svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-field::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right, var(--bg) 0%, color-mix(in srgb, var(--bg) 0%, transparent) 32%);
}
/* Colour goes on the atoms inside each pattern. Setting `fill` on the <rect> itself
   would override its fill="url(#…)" attribute and paint a solid block instead. */
[data-layer="bottom"] circle { fill: var(--lattice-bottom); }
[data-layer="top"] circle { fill: var(--lattice-top); }
.lattice-bottom { opacity: 0.45; }
.lattice-top { opacity: 0.8; }
/* Light dots on a dark ground read much brighter than dark dots on paper. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lattice-bottom { opacity: 0.3; } :root:not([data-theme="light"]) .lattice-top { opacity: 0.6; } }
:root[data-theme="dark"] .lattice-bottom { opacity: 0.3; }
:root[data-theme="dark"] .lattice-top { opacity: 0.6; }

.hero-text {
  position: relative;
  z-index: 2;
  max-width: 31rem;
  padding-block: var(--s-8);
}
.hero-kicker { margin-bottom: var(--s-5); }
.hero h1 { font-size: clamp(2.2rem, 1.3rem + 3.3vw, 3.75rem); }
.hero h1 em { font-style: normal; font-weight: 400; color: var(--lens); white-space: nowrap; }
.hero .lede { margin-top: var(--s-5); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

.moire-panel {
  position: absolute;
  z-index: 2;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2.5rem);
  width: min(22rem, calc(100% - 2rem));
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  background: color-mix(in srgb, var(--bg-raised) 90%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.pair-row { display: flex; align-items: center; gap: var(--s-3); }
.pair-row .select { flex: 1; min-width: 0; max-width: none; padding-block: 0.4rem; }
.readout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.readout output {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--step-2);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--ink);
}
.moire-panel input[type="range"] { width: 100%; min-height: 24px; accent-color: var(--lens); margin: 0; }
.panel-foot { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); min-height: 1.4em; }
.panel-note { font-family: var(--font-ui); font-size: var(--step--2); color: var(--lens); }
.panel-caption { font-size: var(--step--1); color: var(--ink-muted); margin: 0; line-height: 1.45; }

/* Stacked, the headline comes first and the twist demo follows it, fading in from the text above. */
@media (max-width: 860px) {
  .hero { flex-direction: column; align-items: stretch; min-height: 0; }
  .hero-field { order: 1; position: relative; inset: auto; padding: min(50vw, 16rem) 1rem 1rem; }
  .hero-field::before { background: linear-gradient(to bottom, var(--bg) 0, color-mix(in srgb, var(--bg) 0%, transparent) 4rem); }
  .hero-text { padding-block: var(--s-6) var(--s-5); }
  /* In the flow below a strip of pattern, so a longer caption grows the field instead of covering it. */
  .moire-panel { position: relative; right: auto; bottom: auto; width: auto; }
}

/* --------------------------------------------------------------------------
   Bands
   -------------------------------------------------------------------------- */

.band { padding-block: var(--s-8); border-bottom: 1px solid var(--line); }
.band--sunken { background: var(--bg-sunken); }
.band-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  margin-bottom: var(--s-6);
}
.band-head p { margin: 0; max-width: var(--measure); color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   Ways in (audience entry points)
   -------------------------------------------------------------------------- */

/* A contents list, one row per reader, rather than four matching tiles. */
.ways { border-top: 1px solid var(--line-strong); }
.way {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--s-2) var(--s-6);
  align-items: baseline;
  padding: var(--s-5) 0 var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--line);
}
.way-body, .way-ask { display: grid; gap: var(--s-2); }
.way[data-aud="general"]     { --aud: var(--general); }
.way[data-aud="theory"]      { --aud: var(--theory); }
.way[data-aud="experiment"]  { --aud: var(--experiment); }
.way[data-aud="engineering"] { --aud: var(--engineering); }
.way .label { color: var(--aud); }
.way h3 { font-family: var(--font-display); font-weight: 560; font-size: var(--step-2); }
.way p { margin: 0; color: var(--ink-muted); }
.way .question { font-style: italic; font-size: var(--step--1); color: var(--ink-faint); }
.way a { justify-self: start; font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink); text-decoration-color: var(--aud); }

@media (max-width: 860px) { .way { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   News items
   -------------------------------------------------------------------------- */

.news-list { border-top: 1px solid var(--line); }

.news-item {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: var(--s-5);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.news-meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--ink-muted);
}
.src {
  width: max-content;
  max-width: 100%;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  font-size: var(--step--2);
  color: var(--ink-muted);
}
/* A preprint is not yet solid: dashed outline, neutral colour, so it never reads as an audience tag. */
.src--preprint { border-style: dashed; border-color: var(--caution); color: var(--ink); }
.src--new { border-color: var(--lens); color: var(--lens); }
.news-since { margin: 0 0 var(--s-4); font-size: var(--step--1); color: var(--ink-muted); }
.src-note { font-size: var(--step--2); color: var(--caution); }

.news-item h3 { font-size: var(--step-1); line-height: 1.3; font-weight: 600; }
.news-item h3 a { color: var(--ink); text-decoration: none; }
.news-item h3 a:hover { text-decoration: underline; text-decoration-color: var(--lens); }
/* A paper or story already opened is set in a quieter ink, so new ones stand out in a long list. */
.news-item h3 a:visited { color: var(--ink-faint); }
.news-sum {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: var(--s-2) 0 var(--s-3);
  max-width: 46rem;
  color: var(--ink-muted);
}

.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.aud {
  font-family: var(--font-ui);
  font-size: var(--step--2);
  padding: 0.18rem 0.55rem;
  border-radius: var(--r-1);
  background: var(--aud-quiet);
  color: var(--aud);
}
.aud--general     { --aud: var(--general);     --aud-quiet: var(--general-quiet); }
.aud--theory      { --aud: var(--theory);      --aud-quiet: var(--theory-quiet); }
.aud--experiment  { --aud: var(--experiment);  --aud-quiet: var(--experiment-quiet); }
.aud--engineering { --aud: var(--engineering); --aud-quiet: var(--engineering-quiet); }

.mat-link {
  font-family: var(--font-ui);
  font-size: var(--step--2);
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  color: var(--ink);
  text-decoration: none;
}
.mat-link:hover { border-color: var(--ink-muted); }

@media (max-width: 640px) {
  .news-item { grid-template-columns: 1fr; gap: var(--s-2); }
  .news-meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
}

/* --------------------------------------------------------------------------
   Material cards — one corner cut at 60°, like the edge of a hexagonal
   CVD-grown domain. The cut lives on a pseudo-element so focus rings survive.
   -------------------------------------------------------------------------- */

.mat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15.5rem, 100%), 1fr)); gap: var(--s-2) var(--s-5); }

.mat-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-3);
  border-top: 1px solid var(--line-strong);
  color: inherit;
  text-decoration: none;
}
.mat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Entries sit on the page like an index; the cleaved-corner fill appears on hover. */
  background: transparent;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 28px, 100% 100%, 0 100%);
  transition: background var(--t-fast) var(--ease);
}
.mat-card:hover::before { background: var(--lens-quiet); }

.mat-card .formula {
  font-family: var(--font-ui);
  font-size: var(--step-3);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.mat-card .name { font-weight: 600; line-height: 1.3; }
/* A family with a crystal model carries its lattice, seen from above, in the corner of its card. */
.mat-thumb { position: absolute; top: var(--s-3); right: var(--s-3); width: 4rem; height: 4rem; color: var(--ink-faint); }
.mat-card:has(.mat-thumb) > :is(.label, .formula, .name) { padding-right: 4.5rem; }
/* On the home page each group carries the lattice of one of its families. */
.group:has(.mat-thumb) > :is(.label, h3) { padding-right: 4.5rem; }
.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.75rem;
  margin: var(--s-2) 0 0;
  font-size: var(--step--1);
}
.facts dt { font-family: var(--font-ui); color: var(--ink-faint); }
.facts dd { margin: 0; }

/* What kind of 2D: a tiny cross-section glyph drawn in CSS */
.kind {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: max-content;
  font-family: var(--font-ui);
  font-size: var(--step--2);
  color: var(--ink-muted);
}
.kind::before { content: ""; width: 16px; height: 9px; flex: none; }
.kind--yes::before { background: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 4px); }
.kind--nanosheet::before { border-top: 1.5px dashed currentColor; height: 0; }
.kind--substrate::before { background: linear-gradient(to bottom, currentColor 0 1px, transparent 1px 4px, currentColor 4px 9px); opacity: 0.8; }
.kind--interface::before { background: linear-gradient(to right, currentColor 0 7px, transparent 7px 9px, var(--ink-faint) 9px 16px); height: 7px; }

/* --------------------------------------------------------------------------
   Readiness: TRL meter (grouped research · development · deployment) and
   application maturity pips
   -------------------------------------------------------------------------- */

.trl { display: grid; gap: 0.4rem; }
.trl-bar { display: flex; gap: 6px; }
.trl-group { display: grid; gap: 0.25rem; }
.trl-segs { display: flex; gap: 2px; }
.trl-seg { width: 30px; height: 8px; background: var(--line); border-radius: 1px; }
.trl-seg.on { background: var(--lens); }
/* The captions under every bar are set at the size of the site's other small labels, not 10 px. */
.trl-group .label { font-size: var(--step--2); }
.trl-value { font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink); }

.maturity {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-ui);
  font-size: var(--step--2);
  color: var(--ink-muted);
}
.maturity i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.maturity span { margin-left: 0.35rem; }
.maturity[data-level="1"] i:nth-child(-n+1),
.maturity[data-level="2"] i:nth-child(-n+2),
.maturity[data-level="3"] i:nth-child(-n+3),
.maturity[data-level="4"] i:nth-child(-n+4) { background: var(--ink); }

/* --------------------------------------------------------------------------
   Glossary terms and caveats
   -------------------------------------------------------------------------- */

.term {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  border-bottom: 1px dotted var(--ink-faint);
  cursor: help;
}
.term:hover { border-bottom-color: var(--lens); }
/* The word itself stays small; its tap area reaches a little past it, to about 24 px tall. */
.term { position: relative; }
.term::after { content: ""; position: absolute; inset: -0.3em -0.2em; }

.term-pop {
  position: fixed;
  inset: auto;
  margin: 0;
  max-width: 21rem;
  padding: var(--s-4);
  background: var(--bg-raised);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  box-shadow: 0 16px 40px -18px rgb(0 0 0 / 0.35);
  font-size: var(--step--1);
  line-height: 1.5;
}
.term-pop strong { display: block; margin-bottom: 0.25rem; font-size: var(--step-0); }
/* The card a pointed-at material link shows (ui.js), drawn like a glossary card with the lattice in its corner. */
.mat-preview { position: absolute; z-index: 40; display: grid; gap: var(--s-1); width: 19rem; padding: var(--s-4); background: var(--bg-raised); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-2); box-shadow: 0 16px 40px -18px rgb(0 0 0 / 0.35); font-size: var(--step--1); line-height: 1.45; pointer-events: none; }
.mat-preview .mat-thumb { top: var(--s-3); right: var(--s-3); width: 3.5rem; height: 3.5rem; }
.mat-preview p { margin: 0; }
.mat-preview-title { padding-right: 4rem; font: 600 var(--step-1)/1.2 var(--font-ui); }
.mat-preview-name { padding-right: 4rem; color: var(--ink-muted); }
.mat-preview .kind { margin-top: var(--s-1); }
.mat-preview .facts { margin-top: var(--s-2); }
.mat-preview-use { color: var(--ink-muted); }
.mat-preview-lead { margin-top: var(--s-2) !important; padding-top: var(--s-2); border-top: 1px solid var(--line); }
.term-pop p { margin: 0; color: var(--ink-muted); }
/* A card grows to hold the term's drawing at its own size (it scrolls sideways where the screen is narrower). */
.term-pop { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow: auto; }
.term-pop:has(.gfig) { max-width: min(39rem, calc(100vw - 16px)); }
.term-pop .gfig { margin: var(--s-3) 0 0; }
/* Theory: drawings and charts inside a method note (a grid item, so they may shrink and scroll in their frame). */
.method-note > figure { min-width: 0; }
.method-note > .gfig { margin-top: var(--s-2); }
/* One material, three band gaps: the bulk gap in grey, the two monolayer gaps in colour. */
.gapkinds-chart { margin: var(--s-3) 0 0; }
.gapkinds-chart > .label { margin: 0 0 var(--s-2); }
.gapkinds-chart .rchart-row { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr) 6rem; }
.gapkinds-chart .is-bulk .rchart-range { background: var(--ink-faint); }

/* Engineering: growth temperatures against the back-end budget, which runs down every row as one hatched band. */
.temp-chart .rchart-row { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) 7.5rem; }
.temp-chart .rchart-name a { color: var(--ink); }
.temp-chart .rchart-track::before {
  content: ""; position: absolute; top: -0.35rem; bottom: -0.35rem; left: var(--band-from); width: calc(var(--band-to) - var(--band-from));
  background: repeating-linear-gradient(135deg, var(--line-strong) 0 1px, transparent 1px 5px);
}
.temp-chart .rchart-ticks span:last-child { transform: translateX(-50%); } /* 1,000 °C is not the end of the scale */
.temp-chart .rchart-range { min-width: 10px; background: var(--ink-faint); }
.temp-chart .rchart-range.is-cool { background: var(--lens); }
.temp-key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin: 0 0 var(--s-3); font: 500 var(--step--2)/1.2 var(--font-ui); color: var(--ink-muted); }
.temp-swatch { display: inline-block; width: 18px; height: 10px; margin-left: var(--s-3); border-radius: 5px; background: var(--ink-faint); }
.temp-swatch:first-child { margin-left: 0; }
.temp-swatch--budget { border-radius: 0; background: repeating-linear-gradient(135deg, var(--line-strong) 0 1px, transparent 1px 5px); box-shadow: inset 0 0 0 1px var(--line-strong); }
.temp-swatch--cool { background: var(--lens); }

/* Experiment: which technique answers which question. Rotated heads keep twelve questions within the text column;
   narrower than the grid, it scrolls inside its frame. */
.measure-filters { margin: var(--s-4) 0 0; }
/* On phones the questions fold behind a summary that already asks it. */
@media (max-width: 760px) { .measure-filters .filter-row > .label { display: none; } }
.measure-grid { margin: var(--s-4) 0 var(--s-6); }
.measure-frame { overflow-x: auto; }
.measure-grid table { border-collapse: collapse; font-family: var(--font-ui); font-size: var(--step--1); }
.measure-grid thead th { padding: 0 0 var(--s-2); vertical-align: bottom; font-weight: 500; text-align: left; color: var(--ink-muted); }
.measure-grid thead th span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.measure-grid tbody tr { border-top: 1px solid var(--line); }
.measure-grid tbody tr:last-child { border-bottom: 1px solid var(--line); }
.measure-grid tbody th { padding: 0.3rem var(--s-3) 0.3rem 0; font-weight: 500; text-align: left; white-space: nowrap; }
.measure-grid tbody th a { color: var(--ink); }
.measure-grid td { width: 1.9rem; min-width: 1.9rem; padding: 0; text-align: center; border-left: 1px solid var(--line); }
.measure-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--ink-muted); vertical-align: middle; }
.measure-grid .is-asked { background: var(--lens-quiet); }
.measure-grid .is-asked .measure-dot { background: var(--lens); }
.measure-grid tr.is-out { opacity: 0.35; }
.measure-grid figcaption { max-width: var(--measure); margin-top: var(--s-3); font-size: var(--step--1); line-height: 1.5; color: var(--ink-muted); }
/* Theory: the moiré supercell chart and the slider that walks it (supercell.js). */
.supercell-fig { min-width: 0; margin: var(--s-4) 0 0; } /* a grid item: let the drawing scroll in its frame */
.supercell-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin-bottom: var(--s-3); }
.supercell-panel input[type="range"] { width: 100%; max-width: 32rem; min-height: 24px; margin: 0; accent-color: var(--lens); }
.supercell-panel .readout { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); max-width: 36rem; }
.supercell-panel .readout output { font-size: var(--step-1); }
.supercell-fig [data-current] { stroke: var(--bg); stroke-width: 2; }
/* Basics: thicken a crystal and watch the share of atoms at a surface fall (layers.js). The outer layers carry
   the lens colour; the drawing shows up to twelve layers and elides the rest. */
.layers-demo { display: grid; grid-template-columns: 8rem minmax(0, 1fr); align-items: center; gap: var(--s-3) var(--s-5); margin: var(--s-4) 0 0; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-raised); }
.layers-stack { display: grid; align-content: center; gap: 3px; min-height: 8.5rem; }
.layer { display: block; height: 6px; border-radius: 1px; background: var(--ink-faint); }
.layer.is-outer { background: var(--lens); }
.layers-more { padding-block: 0.15rem; font: 500 var(--step--2)/1.2 var(--font-ui); color: var(--ink-faint); text-align: center; }
.layers-panel { display: grid; gap: var(--s-3); }
.layers-panel input[type="range"] { width: 100%; min-height: 24px; margin: 0; accent-color: var(--lens); }
.layers-demo .readout { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
.layers-demo .readout output { font-size: var(--step-1); }
.layers-demo figcaption { grid-column: 1 / -1; font-size: var(--step--1); line-height: 1.5; color: var(--ink-muted); }
.knobs-demo { display: grid; gap: var(--s-5); margin: var(--s-4) 0 0; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-raised); }
.knob { display: grid; gap: var(--s-2); }
/* A mark under the track at a fraction of the slider's range, allowing for the thumb's width at either end. */
.knob-track { position: relative; }
.knob-track:has(.knob-mark) { padding-bottom: 1.3rem; }
.knob-track input[type="range"] { width: 100%; min-height: 24px; margin: 0; accent-color: var(--lens); }
.knob-mark { position: absolute; top: 24px; left: calc(8px + (100% - 16px) * var(--at)); padding: 0.25rem 0 0 0.3rem; border-left: 1px solid var(--ink-faint); font-family: var(--font-ui); font-size: var(--step--2); line-height: 1; color: var(--ink-faint); white-space: nowrap; }
.knob-read { margin: 0; font-size: var(--step--1); color: var(--ink-muted); }
.knob-read output { margin-right: 0.35rem; font-family: var(--font-ui); font-size: var(--step-1); font-variant-numeric: tabular-nums; color: var(--ink); }
.knobs-demo figcaption { font-size: var(--step--1); line-height: 1.5; color: var(--ink-muted); }
@media (max-width: 640px) {
  .layers-demo { grid-template-columns: minmax(0, 1fr); }
  .layers-stack { min-height: 0; }
}
/* Growth methods by what they yield: an outline of the product, then the methods with their own sentence on scale. */
.yield-board { display: grid; gap: var(--s-4); margin: var(--s-5) 0; }
.yield-row { display: grid; grid-template-columns: 2.75rem 13rem minmax(0, 1fr); align-items: start; gap: var(--s-2) var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.yield-icon { width: 40px; height: 28px; fill: none; stroke: var(--ink-muted); stroke-width: 1.25; stroke-linejoin: round; }
.yield-title { margin: 0; font: 600 var(--step-0)/1.25 var(--font-ui); }
.yield-note { margin: 0.2rem 0 0; font: 400 var(--step--2)/1.35 var(--font-ui); color: var(--ink-faint); }
.yield-row ul { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.yield-row li a { font-family: var(--font-ui); font-weight: 500; }
.yield-row li p { max-width: var(--measure); margin: 0.15rem 0 0; font-size: var(--step--1); line-height: 1.45; color: var(--ink-muted); }
.yield-board figcaption { max-width: var(--measure); font-size: var(--step--1); line-height: 1.5; color: var(--ink-muted); }
@media (max-width: 640px) {
  .yield-row { grid-template-columns: 2.75rem minmax(0, 1fr); }
  .yield-row ul { grid-column: 1 / -1; }
}
/* Procedure drawings on the experiment track; the device drawing's legend links each number to its entry. */
.gfig.procedure-fig { margin: var(--s-5) 0; }
.procedure-key { columns: 15rem; margin: var(--s-3) 0 0; padding-left: 1.5rem; font-family: var(--font-ui); }
.procedure-key li { padding-block: 0.15rem; }
.method-note[id] { scroll-margin-top: var(--head-room); }
.term-pop .gfig figcaption { font-size: var(--step--2); }
.term-pop > a { display: inline-block; margin-top: var(--s-3); padding-block: 0.2rem; font-family: var(--font-ui); }

.caveat {
  margin: 0;
  padding: 0.2rem 0 0.2rem var(--s-4);
  border-left: 2px dashed var(--caution);
  max-width: var(--measure);
}
.caveat .label { display: block; color: var(--caution); margin-bottom: 0.2rem; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  padding-block: var(--s-7);
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.6fr) minmax(0, 0.6fr) minmax(0, 1.3fr);
  gap: var(--s-6);
}
.footer-grid p { margin: var(--s-3) 0; max-width: 26rem; }
.footer-grid ul { display: grid; gap: var(--s-2); margin: var(--s-3) 0 0; padding: 0; list-style: none; }
.footer-grid a { color: var(--ink-muted); }
.footer-grid a:hover { color: var(--ink); }
.footer-grid .wordmark { color: var(--ink); }

@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Pages
   ========================================================================== */

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -4rem;
  z-index: 50;
  padding: var(--s-2) var(--s-3);
  background: var(--ink);
  color: var(--bg);
  font: 500 var(--step--1)/1 var(--font-ui);
  border-radius: var(--r-1);
  text-decoration: none;
}
.skip-link:focus { top: var(--s-3); }

/* Content meant for one reading lens. Done in CSS rather than JS so nothing flashes on load. */
:root[data-lens="general"] [data-lens-panel]:not([data-lens-panel~="general"]),
:root[data-lens="theory"] [data-lens-panel]:not([data-lens-panel~="theory"]),
:root[data-lens="experiment"] [data-lens-panel]:not([data-lens-panel~="experiment"]),
:root[data-lens="engineering"] [data-lens-panel]:not([data-lens-panel~="engineering"]) { display: none; }

/* The row for the current lens carries its colour down the left edge. */
:root[data-lens="general"] .way[data-aud="general"],
:root[data-lens="theory"] .way[data-aud="theory"],
:root[data-lens="experiment"] .way[data-aud="experiment"],
:root[data-lens="engineering"] .way[data-aud="engineering"] { box-shadow: inset 3px 0 0 var(--aud); }

.freshness { margin: var(--s-2) 0 0; font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-faint); }
.band-foot { margin: var(--s-5) 0 0; font-family: var(--font-ui); font-size: var(--step--1); }

/* Home: why thin ---------------------------------------------------------- */

.why-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.why-list { margin: 0; padding: 0; list-style: none; counter-reset: why; border-top: 1px solid var(--line); }
.why-list li { counter-increment: why; border-bottom: 1px solid var(--line); }
.why-list a {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--s-3);
  padding-block: var(--s-3);
  color: var(--ink);
  font-size: var(--step-1);
  line-height: 1.35;
  text-decoration: none;
}
.why-list a::before { content: counter(why, decimal-leading-zero); padding-top: 0.3em; font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-faint); }
.why-list a:hover { color: var(--lens); }

.numbers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
}
.number { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-5); background: var(--bg-raised); }
.number-value { font-family: var(--font-display); font-weight: 500; font-size: var(--step-2); line-height: 1.1; overflow-wrap: anywhere; }
.number-label { margin: 0; font-size: var(--step--1); font-weight: 600; line-height: 1.45; }
.number-context { margin: 0; font-size: var(--step--1); line-height: 1.55; color: var(--ink-muted); }
/* The small picture under each number (Basics, "Numbers that stick"). */
.number-pic { width: 100%; max-width: 20rem; height: auto; margin-block: var(--s-1); overflow: visible; }
.number-pic .np-text { font: 500 11px var(--font-ui); fill: var(--ink-muted); }
.number-pic .np-dot { fill: var(--ink-muted); }
.number-pic .np-line, .number-pic .np-hair { fill: none; stroke: var(--ink-muted); stroke-width: 1.25; stroke-linecap: round; }
.number-pic .np-hair { stroke: var(--ink); stroke-width: 0.75; }
.number-pic .np-box { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.number-pic .np-fill { fill: var(--lens); }
.number-pic .np-quiet { fill: var(--lens-quiet); }
.number-pic .np-ink { fill: var(--ink); }

@media (max-width: 860px) { .why-grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .numbers { grid-template-columns: 1fr; } }

/* Home: families ---------------------------------------------------------- */

.kind-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: var(--s-3) var(--s-5); margin: 0 0 var(--s-6); padding: 0; list-style: none; }
.kind-legend li { display: grid; gap: 0.15rem; }
/* The count is tied to the last word in the build; this keeps a short word from ending a line on its own. */
.kind-legend li > span:last-child { text-wrap: pretty; }
.kind-legend .kind { color: var(--ink); }
.kind-legend li > span:last-child { font-size: var(--step--1); color: var(--ink-muted); }

.groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: var(--s-2) var(--s-5); }

/* Groups and next-step links are ruled entries like the catalogue; links show the cut-corner fill on hover. */
.group, .next-card { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4) var(--s-3); border-top: 1px solid var(--line-strong); }
.group::before, .next-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 28px, 100% 100%, 0 100%);
  transition: background var(--t-fast) var(--ease);
}
.group h3, .next-card strong { font-family: var(--font-display); font-weight: 560; font-size: var(--step-1); line-height: 1.2; }
.group > p { margin: 0 0 var(--s-2); font-size: var(--step--1); line-height: 1.55; color: var(--ink-muted); }
.group-members { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: var(--s-2) 0 0; padding: 0; list-style: none; }
.fam-chip { padding: 0.25rem 0.5rem; border: 1px solid var(--line); border-radius: var(--r-1); color: var(--ink); text-decoration: none; }
.fam-chip:hover { border-color: var(--ink-muted); background: var(--lens-quiet); }
@media (max-width: 640px) {
  /* On a phone the home page's family index keeps names and chips only, two groups to a row; each group's
     description is on the catalogue page, one tap away. */
  .groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-4); }
  .group { padding-inline: 0; }
  .group > p, .group > .mat-thumb { display: none; }
  .group:has(.mat-thumb) > :is(.label, h3) { padding-right: 0; }
  .group h3 { font-size: var(--step-0); }
  /* A long chip ("PtSe₂, PdSe₂, ditellurides") wraps inside its column instead of sticking out. */
  .group-members li { max-width: 100%; }
  .group .fam-chip { width: auto; max-width: 100%; }
}

/* Home: applications by horizon ------------------------------------------ */

.horizons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); }
.horizon-head { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--ink); }
.horizon-head h3 { font-family: var(--font-display); font-weight: 560; font-size: var(--step-1); }
.horizon ul { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.horizon li a { font-weight: 600; color: var(--ink); text-decoration-color: var(--line-strong); }
.horizon li a:hover { text-decoration-color: var(--lens); }
.horizon li p { margin: 0.2rem 0 0; font-size: var(--step--1); line-height: 1.5; color: var(--ink-muted); }

@media (max-width: 960px) { .horizons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .horizons { grid-template-columns: 1fr; } }

/* Home: verdict ------------------------------------------------------------ */

.verdict { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-5) var(--s-7); }
.verdict .label { display: block; margin-bottom: var(--s-3); }
.verdict-text p { max-width: 42rem; font-size: var(--step-1); line-height: 1.55; }
.verdict-text .name-source { margin-top: var(--s-5); font-size: var(--step--1); color: var(--ink-muted); }

@media (max-width: 860px) { .verdict { grid-template-columns: 1fr; } }

/* Explainer pages: heading, contents, sections ------------------------------ */

.page-head { padding-block: var(--s-8) var(--s-7); border-bottom: 1px solid var(--line); }
/* A title shrinks only as far as its own widest word needs to fit the column: the build sets --word to
   that word's width in em ("monochalcogenides" is 9.2), and the 16ch measure widens to hold it. Desktop
   keeps the full size; overflow-wrap is the last resort for a title the build did not measure. */
.page-head .wrap { container-type: inline-size; }
.page-head h1 { --word: 10; max-width: max(16ch, var(--word) * 1em); margin-top: var(--s-4); font-size: min(var(--step-5), 100cqi / var(--word)); overflow-wrap: break-word; }
.page-head .lede { max-width: 48rem; margin: var(--s-5) 0 0; }
.page-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: var(--s-5) 0 0; font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-faint); }
.lens-note { max-width: 48rem; margin: var(--s-5) 0 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-2); background: var(--lens-quiet); font-size: var(--step--1); }
.lens-note a { color: var(--lens); font-weight: 600; }

.doc { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: var(--s-7); padding-block: var(--s-7) var(--s-8); }
.toc { position: sticky; top: var(--head-room); align-self: start; max-height: calc(100vh - var(--head-room) - 0.75rem); overflow-y: auto; }
/* Above the list, the control that opens every "Read more" on the page at once (ui.js). */
.toc .toc-unfold { display: block; margin-top: var(--s-2); padding: 0.45rem 0; font-size: var(--step--2); text-align: left; }
.toc ol { margin: var(--s-3) 0 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
.toc a {
  display: block;
  margin-left: -1px;
  padding: 0.35rem 0 0.35rem var(--s-3);
  border-left: 1px solid transparent;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  line-height: 1.35;
  color: var(--ink-muted);
  text-decoration: none;
}
.toc a:hover { color: var(--ink); }
.toc a[aria-current] { color: var(--ink); border-left-color: var(--lens); }

.doc-body { min-width: 0; max-width: 54rem; }
/* A long page alternates two paper tones from one section to the next, edge to edge, so its sections can be told
   apart at a glance. Inside a darker section the surface tokens shift with it, so whatever is "sunken" or ruled
   there still shows. The tone is painted behind the section, under the contents list beside it. */
main { overflow-x: clip; }
.doc-section { position: relative; padding-block: var(--s-7); }
.doc-section:first-of-type { padding-top: 0; }
.doc-section:nth-of-type(even) { --bg: var(--band); --bg-sunken: var(--band-sunken); --line: var(--band-line); }
.doc-section:nth-of-type(even)::before { content: ""; position: absolute; inset: 0 -100vmax; z-index: -1; background: var(--bg); }
.doc-section > h2 { margin-bottom: var(--s-5); }
.section-intro { max-width: var(--measure); margin: calc(-1 * var(--s-2)) 0 var(--s-6); font-size: var(--step-1); line-height: 1.5; color: var(--ink-muted); }
.prose p { max-width: var(--measure); }
.prose strong { font-weight: 650; }
.doc-section > p { max-width: var(--measure); }

/* Running text at body size is justified where its column holds about 70 characters, with hyphenation
   (where the browser has it) to keep the word gaps even. Phones, larger lead text, cards, captions, notes,
   lists and news summaries keep a ragged right edge: their lines are too short to justify evenly. */
@media (min-width: 48rem) {
  .prose > p, .explainer-body > p, .method > p, .doc-section > p:not([class]), :not(.driver, .hard) > .fold > .fold-body > p,
  .answer > p, .app-body > p:not(.app-enables), .brief-body > p, .term-level--deeper > p, .side-note > p, .deeper-card > p,
  .myth-reality > p, .method-note > p:not([class]), .conf-how p {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 7 3 3;
  }
}
.doc-section, .explainer, .method, .faq details, .mat-section, #related, #toc-title { scroll-margin-top: var(--head-room); }

@media (max-width: 960px) {
  .doc { grid-template-columns: 1fr; gap: var(--s-6); }
  .toc { position: static; max-height: none; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-raised); }
  .toc ol { columns: 2 12rem; column-gap: var(--s-5); border-left: 0; }
  .toc a { margin-left: 0; padding-left: 0; border-left: 0; }
}
/* ui.js adds this link. It shows only where the contents list scrolls away with the page, once it has. */
.to-contents { display: none; }
@media screen and (max-width: 960px) {
  .to-contents:not([hidden]) { position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: 15; display: block; padding: 0.6rem 0.85rem; font: 500 var(--step--1)/1 var(--font-ui); color: var(--ink); text-decoration: none; background: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: var(--r-2); box-shadow: 0 16px 40px -18px rgb(0 0 0 / 0.35); }
}
@media (max-width: 900px) {
  .doc-section, .explainer, .method, .faq details, .mat-section, #related, #toc-title { scroll-margin-top: var(--s-4); }
}

/* Figure: layers held by strong bonds within and weak attraction between */

.figure { margin: var(--s-6) 0 0; }
.layers { width: 100%; max-width: 44rem; height: auto; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-raised); }
.layers .atom { fill: var(--ink); }
.layers .bond { stroke: var(--ink); stroke-width: 2; }
.layers .top .atom { fill: var(--accent); }
.layers .top .bond { stroke: var(--accent); }
.layers .vdw { stroke: var(--ink-faint); stroke-width: 1.5; stroke-dasharray: 3 4; }
.layers .lift { stroke: var(--ink-muted); stroke-width: 1.25; stroke-dasharray: 4 4; }
.layers .arrowhead { fill: var(--ink-muted); }
.layers .dim line { stroke: var(--ink-muted); stroke-width: 1; }
.layers text { font-family: var(--font-ui); font-size: 13px; fill: var(--ink-muted); }
.figure figcaption, .rchart figcaption { max-width: var(--measure); margin-top: var(--s-3); font-size: var(--step--1); line-height: 1.5; color: var(--ink-muted); }

/* Row charts: one ruled row per item, a name and a track. Bars (readiness) or dots (sizes) sit on a scale
   drawn as faint column lines, one column per step. Marks carry the colour; text stays in text colours. */
.rchart { margin: var(--s-6) 0; }
.rchart ol { margin: 0; padding: 0; list-style: none; }
.rchart li { border-top: 1px solid var(--line); }
.rchart li:last-child { border-bottom: 1px solid var(--line); }
.rchart-row { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: var(--s-1) var(--s-4); align-items: center; padding-block: 0.35rem; }
.trl-chart .rchart-row { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr) 3.25rem; }
a.rchart-row { color: var(--ink); text-decoration: none; }
a.rchart-row:hover, a.rchart-row:focus-visible { background: color-mix(in srgb, var(--ink) 5%, transparent); }
a.rchart-row:hover .rchart-name { text-decoration: underline; text-decoration-color: var(--lens); }
.rchart-name { font-family: var(--font-ui); font-size: var(--step--1); line-height: 1.3; color: var(--ink); }
.rchart-note { color: var(--ink-faint); white-space: nowrap; }
.rchart-track { position: relative; display: flex; align-items: center; height: 1.4rem; background: linear-gradient(to right, var(--line) 1px, transparent 1px) 0 0 / calc(100% / var(--cols)) 100%; border-right: 1px solid var(--line); }
/* A thin bar grows from the scale's start, square there and rounded at its end. */
.rchart-bar { display: block; width: var(--x); height: 12px; background: var(--lens); border-radius: 0 4px 4px 0; }
.rchart-value { font: 500 var(--step--2)/1 var(--font-ui); color: var(--ink-muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Context in grey, the 2D layers in colour; a ring in the page colour keeps a dot clear of the grid lines. */
.rchart-dot { position: absolute; top: 50%; left: var(--x); width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--ink-muted); box-shadow: 0 0 0 2px var(--bg); transform: translate(-50%, -50%); }
.is-flat .rchart-dot { background: var(--lens); }
.is-flat .rchart-name { font-weight: 600; }
.rchart-axis { padding-block: var(--s-2) 0; font: 500 var(--step--2)/1.2 var(--font-ui); color: var(--ink-faint); }
.trl-bands, .trl-levels { display: grid; }
.trl-bands { grid-template-columns: repeat(3, 1fr); }
.trl-bands span { padding-left: 0.35rem; border-left: 1px solid var(--line-strong); }
.trl-levels { grid-template-columns: repeat(9, 1fr); text-align: center; }
.rchart-ticks { position: relative; display: block; height: 1.2em; }
.rchart-ticks span { position: absolute; left: var(--x); transform: translateX(-50%); white-space: nowrap; }
.rchart-ticks span:first-child { transform: none; }
.rchart-ticks span:last-child { transform: translateX(-100%); }
@media (max-width: 640px) {
  .rchart-row { grid-template-columns: minmax(0, 1fr); }
  .trl-chart .rchart-row { grid-template-columns: minmax(0, 1fr) 3.25rem; }
  .trl-chart .rchart-name, .gap-chart .rchart-name { grid-column: 1 / -1; }
  .rchart-axis > span:first-child { display: none; }
  /* Eight size labels do not fit a phone's width: keep 1 mm, 1 µm and 1 nm. */
  .ladder .rchart-ticks span:not(:nth-child(3n + 1)) { display: none; }
  .when-chart .rchart-ticks span:is(:nth-child(2), :nth-child(5)) { display: none; }
}

/* Milestone timeline: one dot per milestone, stacked by decade on a hairline baseline. The whole cell is
   the hover target; the tooltip repeats the event, which the list below also gives in full. */
.tl { --n: 18; margin: var(--s-4) 0 var(--s-6); }
.tl-key { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); font: 500 var(--step--2)/1.2 var(--font-ui); color: var(--ink-muted); }
.tl-swatch { width: 10px; height: 10px; border-radius: 50%; background: var(--lens); }
.tl-plot { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-items: end; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line-strong); }
.tl-col { display: flex; flex-direction: column-reverse; padding-bottom: 3px; }
.tl-dot { position: relative; display: flex; justify-content: center; align-items: center; height: 24px; }
.tl-dot::before { content: ""; width: min(12px, 90%); aspect-ratio: 1; border-radius: 50%; background: var(--ink-muted); box-shadow: 0 0 0 2px var(--bg); }
.tl-dot.is-key::before { background: var(--lens); }
/* Each dot gets a 24 px row, the smallest target a pointer or a finger should have to hit. */
.tl-dot:hover::before, .tl-dot:focus-visible::before { background: var(--ink); }
.tl-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; z-index: 5; width: max-content; max-width: min(18rem, 60vw); padding: 0.5rem 0.65rem; font: 400 var(--step--2)/1.45 var(--font-ui); color: var(--ink-muted); background: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: var(--r-2); box-shadow: 0 12px 30px -16px rgb(0 0 0 / 0.35); transform: translateX(-50%); pointer-events: none; }
/* Removed, not just invisible, while closed: a hidden tooltip near the edge would still widen a phone's page. */
.tl-tip { display: none; }
.tl-tip strong { display: block; margin-bottom: 0.15rem; font-weight: 600; color: var(--ink); }
.tl-left .tl-tip { left: 0; transform: none; }
.tl-right .tl-tip { left: auto; right: 0; transform: none; }
.tl-dot:hover .tl-tip, .tl-dot:focus-visible .tl-tip { display: block; }
.tl-axis { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding-top: var(--s-2); font: 500 var(--step--2)/1.2 var(--font-ui); color: var(--ink-faint); }
.tl-axis span { justify-self: center; white-space: nowrap; }
.tl-axis span:last-child { justify-self: end; }
.tl figcaption { max-width: var(--measure); margin-top: var(--s-3); font-size: var(--step--1); line-height: 1.5; color: var(--ink-muted); }
.timeline li { scroll-margin-top: var(--head-room); }

/* "When" chart on the applications page: rows grouped by horizon, a dot at "now" or a bar over the expected
   window; grey and running to the edge where no date can be given. */
.when-chart { max-width: 60rem; margin-top: var(--s-6); }
.rchart li.rchart-group { padding: var(--s-4) 0 var(--s-1); border-top: 0; font: 500 var(--step--2)/1.2 var(--font-ui); color: var(--ink-faint); }
.rchart li.rchart-group:first-child { padding-top: 0; }
.rchart-group a { color: var(--ink-muted); }
.rchart-range { position: absolute; top: 50%; left: var(--from); width: calc(var(--to) - var(--from)); height: 10px; border-radius: 5px; background: var(--lens); transform: translateY(-50%); }
.rchart-range.is-open { background: var(--ink-faint); border-radius: 5px 0 0 5px; }
.rchart-dot.is-now { background: var(--lens); transform: translate(0, -50%); }

/* Band-gap chart on the catalogue: a range per family on 0-8 eV, with the band of visible light marked above
   in its own colours (a reference strip, not data) between infrared and ultraviolet. */
.gap-chart .rchart-row { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) 5.5rem; }
.rchart-dot.is-gap { background: var(--lens); }
.gap-spectrum { display: grid; grid-template-columns: var(--vis-from) calc(var(--vis-to) - var(--vis-from)) minmax(0, 1fr); row-gap: 0.3rem; }
.gap-spectrum::before { content: ""; grid-column: 1 / -1; height: 8px; border-radius: 2px; background: linear-gradient(to right, var(--line) 0 var(--vis-from), #c8453b var(--vis-from), #e0913a, #e3c53e, #5aa45a, #3f7fc4, #7b4fb0 var(--vis-to), var(--line) var(--vis-to)); }
.gap-spectrum span { text-align: center; white-space: nowrap; }
/* Readiness compared: one row per stage, a bar for its share of the catalogue, then its families as chips.
   Fixed head columns give every bar the same start and length. */
.ready-chart { display: grid; gap: var(--s-5); margin: var(--s-5) 0 0; }
.ready-row { display: grid; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.ready-head { display: grid; grid-template-columns: 2.5rem 11rem 4.5rem minmax(6rem, 1fr); align-items: center; gap: var(--s-1) var(--s-3); }
.ready-head h3 { margin: 0; font: 600 var(--step-0)/1.2 var(--font-ui); }
.ready-count { font: 500 var(--step--1)/1 var(--font-ui); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ready-bar { height: 10px; border-radius: 5px; background: linear-gradient(var(--lens), var(--lens)) no-repeat 0 0 / var(--x) 100%, var(--line); }
.ready-note { grid-column: 2 / -1; font: 400 var(--step--2)/1.3 var(--font-ui); color: var(--ink-faint); }
.ready-chart figcaption { max-width: var(--measure); font-size: var(--step--1); line-height: 1.5; color: var(--ink-muted); }
@media (max-width: 640px) {
  .ready-head { grid-template-columns: auto 1fr auto; }
  .ready-bar { grid-column: 1 / -1; grid-row: 2; }
  .ready-note { grid-column: 1 / -1; }
}
/* The same scale in a material's data sheet: its own range in colour over the other families in grey. */
.gap-strip { margin: var(--s-3) 0 0; }
.gap-strip-track { position: relative; height: 1.1rem; background: linear-gradient(to right, var(--line) 1px, transparent 1px) 0 0 / 25% 100%; border-right: 1px solid var(--line); }
.gap-other { position: absolute; top: 50%; left: var(--x); width: 5px; height: 5px; border-radius: 50%; background: var(--ink-faint); transform: translate(-50%, -50%); }
.gap-strip .rchart-ticks { margin-top: 0.3rem; font: 500 var(--step--2)/1.2 var(--font-ui); color: var(--ink-faint); }
.gap-strip figcaption { margin-top: var(--s-2); font: 400 var(--step--2)/1.45 var(--font-ui); color: var(--ink-muted); }
.gap-none { max-width: 60rem; margin: var(--s-5) 0 0; font-family: var(--font-ui); font-size: var(--step--1); line-height: 1.9; color: var(--ink-muted); }
.gap-none .label { display: block; }
.group-jump-extra { font-weight: 500; }
@media (max-width: 640px) {
  /* Charts marked rchart--stack (doubled class so it beats their own column rules): the value moves up beside
     the name, so the bar and the axis get the full width of a phone. */
  .rchart.rchart--stack .rchart-row { grid-template-columns: minmax(0, 1fr) auto; }
  .rchart.rchart--stack .rchart-name { grid-column: 1; }
  .rchart.rchart--stack .rchart-value { grid-column: 2; grid-row: 1; }
  .rchart.rchart--stack .rchart-track, .rchart.rchart--stack .rchart-axis > span:nth-child(2) { grid-column: 1 / -1; }
  .rchart.rchart--stack .rchart-axis > span:last-child { display: none; }
}

/* Crystal structures: a turnable ball-and-stick model (assets/js/structure.js) */
.xtal { display: grid; gap: var(--s-4); margin: 0; }
.xtal-stage { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-2); background: radial-gradient(ellipse at 50% 45%, var(--bg-raised) 20%, var(--bg) 100%); }
.xtal-stage:focus-visible { outline: 2px solid var(--lens); outline-offset: 2px; }
.xtal-svg { display: block; width: 100%; height: auto; max-height: 30rem; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.xtal-svg.is-turning { cursor: grabbing; }
.xtal-bond { stroke: var(--line-strong); stroke-width: var(--bond, 3px); stroke-linecap: round; }
.xtal-atom { stroke: color-mix(in srgb, var(--ink) 35%, transparent); stroke-width: 0.75px; }
.xtal-cell { fill: none; stroke: var(--ink-faint); stroke-width: 1px; stroke-dasharray: 5 4; }
.xtal-cell--box { stroke: var(--lens); stroke-width: 1.6px; stroke-dasharray: none; }
/* Neutral, so the cell's outline (in the accent colour) stays distinct from the polyhedra. */
.xtal-poly { fill: var(--ink); fill-opacity: 0.14; stroke: var(--ink); stroke-opacity: 0.45; stroke-width: 1px; stroke-linejoin: round; }
.xtal-poly--dim { fill-opacity: 0.05; stroke-opacity: 0.18; }
.xtal-poly-note { max-width: 44rem; margin: var(--s-3) 0 0; font-size: var(--step--1); color: var(--ink-muted); }
.xtal-axes line { stroke: var(--ink-muted); stroke-width: 1.25px; }
.xtal-axes path { fill: var(--ink-muted); }
.xtal-axes text { font-family: var(--font-body); font-style: italic; font-size: 16px; fill: var(--ink-muted); }
.xtal-scale line { stroke: var(--ink-muted); stroke-width: 1.5px; }
.xtal-scale text { font-family: var(--font-ui); font-size: 12px; fill: var(--ink-muted); }
/* The buttons sit in a row above the model, not over it, so a large or turned model is never hidden behind them. */
.xtal-stage:has(.xtal-controls) { display: flex; flex-direction: column; }
.xtal-controls { order: -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-3) 0; }
.xtal-controls .xtal-hint { margin-left: auto; }
.xtal-views { display: flex; gap: 0.3rem; }
.xtal-views .chip { padding: 0.4rem 0.65rem; }
.xtal-views .chip:not([aria-pressed="true"]) { background: var(--bg-raised); }
.xtal-hint { font-family: var(--font-ui); font-size: var(--step--2); color: var(--ink-faint); }
.xtal-key { display: flex; flex-wrap: wrap; align-items: start; gap: var(--s-4) var(--s-6); }
.xtal-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: 0; padding: 0; list-style: none; font-family: var(--font-ui); font-size: var(--step--1); }
.xtal-legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.xtal-swatch { width: 0.9rem; height: 0.9rem; border-radius: 50%; background: radial-gradient(circle at 38% 34%, color-mix(in srgb, var(--atom) 45%, white), var(--atom) 55%, color-mix(in srgb, var(--atom) 65%, black)); box-shadow: 0 0 0 0.75px color-mix(in srgb, var(--ink) 35%, transparent); }
.xtal-facts { flex: 1 1 24rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: var(--s-3) var(--s-5); margin: 0; }
/* Not .label: its capitals would turn element symbols like Mo into MO. */
.xtal-facts dt { margin-bottom: 0.15rem; font-family: var(--font-ui); font-size: var(--step--2); letter-spacing: 0.02em; color: var(--ink-faint); }
.xtal-facts dd { margin: 0; font-size: var(--step--1); line-height: 1.45; }
.xtal figcaption, .xtal-stack-note { max-width: var(--measure); font-size: var(--step--1); line-height: 1.55; color: var(--ink-muted); }
.xtal-stack-note { margin: 0; }
.xtal-source { color: var(--ink-faint); }

/* What is not 2D */

.not-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.not-card { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-raised); }
.not-card h3 { margin-bottom: var(--s-3); font-size: var(--step-0); line-height: 1.35; }
.not-card p { margin: 0; font-size: var(--step--1); line-height: 1.55; color: var(--ink-muted); }

@media (max-width: 1100px) { .not-grid { grid-template-columns: 1fr; } }

/* Milestones */

.timeline-title { margin: var(--s-6) 0 var(--s-4); }
.timeline { margin: 0; padding: 0; list-style: none; }
.timeline li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--s-4); }
.timeline-year { padding-top: 0.2em; font-family: var(--font-ui); font-size: var(--step--1); text-align: right; }
.timeline li > div { position: relative; padding: 0 0 var(--s-4) var(--s-5); border-left: 1px solid var(--line-strong); }
.timeline li > div::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--ink);
}
.timeline li > div > p { margin: 0; }
/* Prize entries carry several paragraphs per item, unlike the one-line milestones. */
.timeline li > div > p + p,
.timeline li > div > details + p:not(.card-note) { margin-top: var(--s-3); }
/* Basics: on a wide screen each milestone's "why it mattered" stands open beside it, in the margin the text
   leaves free. ui.js opens them there; one that is not open (no scripts, or a script from before this rule) stays
   folded under its milestone, with its summary to open it. */
@media (min-width: 1101px) {
  .timeline--notes:has(.margin-note[open])::before { content: "Why it mattered"; display: block; margin: 0 0 var(--s-3) calc(100% - 17rem); font: 500 var(--step--2)/1.2 var(--font-ui); letter-spacing: 0.02em; color: var(--ink-muted); }
  .timeline--notes li > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); column-gap: var(--s-6); align-items: start; }
  .timeline--notes li > div > * { grid-column: 1; }
  .timeline--notes .margin-note[open] { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .timeline--notes .margin-note[open] > summary { display: none; }
  .timeline--notes .margin-note[open] > p { font-size: var(--step--1); line-height: 1.5; color: var(--ink-muted); }
}
.prize-photo, .photo { max-width: var(--measure); margin: var(--s-4) 0; }
/* A photograph is a link to its own file, which ui.js shows over the page. */
.photo-zoom { display: block; cursor: zoom-in; }
/* The footer's three controls stand one below the other, with room between them. */
.site-footer .chip { display: block; margin-top: var(--s-3); }
.whats-day { max-width: 46rem; }
.whats-list strong { display: block; }
.whats-day { padding-block: var(--s-5); border-top: 1px solid var(--line); }
.whats-day:first-child { border-top: 0; }
.whats-day .section-title { margin: 0 0 var(--s-3); font-size: var(--step-1); }
.whats-list { display: grid; gap: var(--s-3); margin: 0; padding-left: 1.2rem; line-height: 1.55; }
.whats-list li::marker { color: var(--ink-faint); }
.help-dialog { width: min(92vw, 26rem); padding: var(--s-5); border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--bg-raised); color: var(--ink); }
.help-dialog::backdrop { background: rgb(20 18 14 / 0.7); }
.help-dialog h2 { margin: 0 0 var(--s-3); }
.cite-dialog { width: min(92vw, 36rem); }
.cite-label { display: flex; justify-content: space-between; align-items: baseline; margin: var(--s-3) 0 var(--s-1); font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-muted); }
.cite-text { margin: 0 0 var(--s-3); padding: var(--s-3); overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-1); background: var(--bg-sunken); font-family: var(--font-mono); font-size: var(--step--2); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.help-dialog dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-4); margin: 0 0 var(--s-4); font-size: var(--step--1); }
.help-dialog dt { white-space: nowrap; }
.help-dialog dd { margin: 0; color: var(--ink-muted); }
.help-dialog kbd { padding: 0.1rem 0.4rem; border: 1px solid var(--line-strong); border-radius: var(--r-1); background: var(--bg-sunken); font-family: var(--font-ui); font-size: var(--step--2); color: var(--ink); }
.photo-dialog { width: fit-content; max-width: min(94vw, 76rem); max-height: 94vh; padding: var(--s-4); overflow: auto; border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--bg-raised); color: var(--ink); cursor: zoom-out; }
.photo-dialog::backdrop { background: rgb(20 18 14 / 0.7); }
.photo-dialog img { width: auto; max-width: 100%; max-height: calc(94vh - 9rem); margin-inline: auto; border-radius: var(--r-1); }
.photo-dialog-close { display: block; margin: 0 0 var(--s-2) auto; }
.photo-dialog-caption { max-width: 60rem; margin: var(--s-3) 0 0; font-size: var(--step--1); line-height: 1.5; color: var(--ink-muted); cursor: auto; }
:is(.prize-photo, .photo) img { width: 100%; height: auto; border-radius: var(--r-2); }
:is(.prize-photo, .photo) figcaption { margin-top: var(--s-3); font-size: var(--step--1); line-height: 1.5; color: var(--ink-muted); }
/* Photographs from outside the site carry their author and licence after the caption; on a material's page two
   stand side by side, one alone keeps to the text's width. */
.photo-credit { color: var(--ink-faint); }
.photo-credit a { color: inherit; }
.photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: var(--s-5); align-items: start; }
.photos .photo { max-width: none; margin: 0; }
.photos .photo:only-child { max-width: var(--measure); }
.more { margin-top: var(--s-1); }
.more summary { width: max-content; cursor: pointer; font-family: var(--font-ui); font-size: var(--step--2); color: var(--ink-muted); }
.more summary:hover { color: var(--ink); }
.more p { margin: var(--s-2) 0 0; font-size: var(--step--1); line-height: 1.55; color: var(--ink-muted); }

/* "Read more" folds on long entries: the first sentence stays in view, the rest opens in place. */
.fold { margin-top: var(--s-2); }
/* Touch targets: toggles and standalone links reach the 24 px minimum (WCAG 2.2) without looking any bigger. */
.fold > summary, .more summary, .more-filters > summary { padding-block: 0.2rem; }
.way-ask a, .text-cta, .link-btn, .term-all, .app-readiness a, .code-card :is(h3, h4) a { display: inline-block; padding-block: 0.2rem; }
.fold > summary { width: fit-content; cursor: pointer; font-family: var(--font-ui); font-size: var(--step--1); font-weight: 500; color: var(--ink-muted); }
.fold > summary:hover { color: var(--ink); }
.fold[open] > summary { margin-bottom: var(--s-3); }
.fold .fold-less, .fold[open] .fold-more { display: none; }
.fold[open] .fold-less { display: inline; }
.fold-body > :last-child { margin-bottom: 0; }
.fold-body > .side-note, .fold-body > .method-two, .fold-body > .method-facts { margin-top: var(--s-4); }

/* Why thin changes everything */

.explainers { display: grid; gap: var(--s-7); }
.explainer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: var(--s-3) var(--s-6); }
.explainer-head { grid-column: 1 / -1; display: grid; gap: var(--s-2); }
.explainer-head h3, .method-head h3 { max-width: 32ch; font-family: var(--font-display); font-weight: 560; font-size: var(--step-2); line-height: 1.2; }
.explainer-body p:last-child { margin-bottom: 0; }
/* Drawings run across the whole explainer, under its everyday picture, so their text reads at full size. */
.explainer > .explainer-fig { grid-column: 1 / -1; }
.analogy { align-self: start; padding: var(--s-4); border-radius: var(--r-2); background: var(--bg-sunken); font-size: var(--step--1); line-height: 1.55; }
.analogy .label { display: block; margin-bottom: var(--s-2); }
.analogy p { margin: 0; }

@media (max-width: 1100px) {
  .explainer { grid-template-columns: minmax(0, 1fr); }
  .analogy { max-width: var(--measure); }
}

/* How they are made */

/* On a wide screen a method's everyday picture stands in the margin, as the explainers' do. */
@media (min-width: 1101px) {
  /* The last row takes up whatever the picture is taller than the lead, so "Read more" stays under the text. */
  .method { grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); grid-template-rows: auto auto 1fr; column-gap: var(--s-6); }
  .method > * { grid-column: 1; }
  .method > .method-analogy { grid-column: 2; grid-row: 2 / span 2; align-self: start; padding: var(--s-4); border-radius: var(--r-2); background: var(--bg-sunken); font-size: var(--step--1); line-height: 1.55; color: var(--ink); text-align: start; hyphens: manual; }
  .method > .method-analogy .label { margin-bottom: var(--s-2); }
}

.methods { display: grid; gap: var(--s-7); }
.method { display: grid; gap: var(--s-3); }
.method-head { display: grid; gap: var(--s-1); }
.method p { margin: 0; }
.method .method-detail { font-style: italic; color: var(--ink-muted); }
.method-analogy { color: var(--ink-muted); }
.method-analogy .label { display: block; margin-bottom: var(--s-1); }
.method-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); max-width: 48rem; margin: var(--s-2) 0 0; }
.method-facts dt { margin-bottom: var(--s-2); }
.method-facts dd { margin: 0; font-size: var(--step--1); line-height: 1.55; }
.method-facts .limit { padding-left: var(--s-4); border-left: 2px dashed var(--caution); }

@media (max-width: 760px) { .method-facts { grid-template-columns: 1fr; } }

/* Myths */

.myths { display: grid; gap: var(--s-6); }
.myth { display: grid; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.myth:first-child { padding-top: 0; border-top: 0; }
.myth-claim { max-width: 30ch; font-family: var(--font-display); font-weight: 480; font-size: var(--step-2); line-height: 1.2; }
.myth-claim .label { display: block; margin-bottom: var(--s-2); }
.myth-reality p:last-child { margin-bottom: 0; }
.myth-reality:focus { outline: none; }
.myth-controls { margin: 0 0 var(--s-5); font: 400 var(--step--1)/1.5 var(--font-ui); color: var(--ink-muted); }
.myth-ask { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.myth-answered { margin: 0; font: 500 var(--step--2)/1.3 var(--font-ui); color: var(--ink-faint); }

/* Basics: the ways of making a 2D material, split by direction. */
.made-map { margin: 0 0 var(--s-6); }
.made-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
@media (max-width: 640px) { .made-routes { grid-template-columns: minmax(0, 1fr); } }
.made-route { display: grid; align-content: start; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.made-icon { width: 120px; height: 64px; fill: none; stroke: var(--ink-muted); stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; }
.made-icon .is-lifted { stroke: var(--lens); stroke-width: 1.75; }
.made-icon .made-atom { fill: var(--lens); stroke: none; }
.made-title { margin: 0; font: 600 var(--step-0)/1.25 var(--font-ui); }
.made-text { max-width: 40ch; margin: 0; font-size: var(--step--1); line-height: 1.45; color: var(--ink-muted); }
.made-route ul { display: grid; gap: var(--s-2); margin: var(--s-2) 0 0; padding: 0; list-style: none; }
.made-route li a { font-family: var(--font-ui); font-weight: 500; }
.made-detail { display: block; font: 400 var(--step--2)/1.35 var(--font-ui); color: var(--ink-faint); }
.made-source { margin: var(--s-2) 0 0; font-size: var(--step--1); line-height: 1.45; color: var(--ink-muted); }
.made-source .label { display: block; margin-bottom: var(--s-1); }
.made-map figcaption { max-width: var(--measure); margin-top: var(--s-4); font-size: var(--step--1); line-height: 1.5; color: var(--ink-muted); }

/* Numbers that stick: separate cards, so a short last row leaves no grey gap */

.numbers--all { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); background: none; border: 0; border-radius: 0; overflow: visible; }
.numbers--all .number { border: 1px solid var(--line); border-radius: var(--r-2); }

@media (max-width: 640px) { .numbers--all { grid-template-columns: 1fr; } }

/* Questions */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  padding-block: var(--s-4);
  cursor: pointer;
  list-style: none;
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--font-ui); font-weight: 400; color: var(--ink-muted); }
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--lens); }
.faq .answer { padding-bottom: var(--s-5); }
.faq .answer p:last-child { margin-bottom: 0; }

/* Where next */

.next-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: var(--s-2) var(--s-5); }
.next-card { color: var(--ink); text-decoration: none; }
.next-card:hover::before { background: var(--lens-quiet); }
.next-card > span:last-child { font-size: var(--step--1); line-height: 1.5; color: var(--ink-muted); }

/* Catalogue index ------------------------------------------------------------ */

.filters {
  display: grid;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--bg-raised);
}
.filter-row { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--s-3); align-items: center; }
/* On a wide screen the catalogue's filters stand beside the cards and stay in view while the cards scroll; the
   layout waits for catalogue.js to show the panel, so without scripts the cards keep the full width. */
@media (min-width: 1100px) {
  .cat-layout:has(> .filters:not([hidden])) { display: grid; grid-template-columns: 17.5rem minmax(0, 1fr); gap: var(--s-6); align-items: start; }
  .cat-layout > .filters { position: sticky; top: var(--head-room); max-height: calc(100vh - var(--head-room) - var(--s-4)); overflow-y: auto; margin-bottom: 0; padding: var(--s-4); }
  .cat-layout .filter-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  /* Set small, so the whole panel fits a laptop screen without scrolling inside itself. */
  .cat-layout > .filters, .cat-layout .more-filters-body { gap: var(--s-3); }
  .cat-layout .filters .chips { gap: 0.3rem; }
  .cat-layout .filters .chip { padding: 0.35rem 0.45rem; font-size: var(--step--2); }
  .cat-layout .filters :is(.search, .select) { padding-block: 0.4rem; font-size: var(--step--1); }
  /* Where the panel still has to scroll, the count of matches and "Clear filters" stay at its foot. */
  .cat-layout .filter-status { position: sticky; bottom: calc(-1 * var(--s-4)); margin: 0 calc(-1 * var(--s-4)) calc(-1 * var(--s-4)); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); background: var(--bg-raised); }
  .cat-layout .cat-group:first-of-type { padding-top: var(--s-4); }
}
/* The element picker: a periodic table, folded until it is wanted; its summary names the elements picked. */
.element-filter { margin-bottom: var(--s-5); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-raised); }
.element-filter > summary { display: flex; align-items: baseline; gap: var(--s-3); cursor: pointer; font-family: var(--font-ui); font-size: var(--step--1); }
.element-filter > summary::after { content: "Show the periodic table"; margin-left: auto; color: var(--ink-muted); text-decoration: underline; text-underline-offset: 0.2em; }
.element-filter[open] > summary::after { content: "Hide"; }
.element-filter[open] > summary { margin-bottom: var(--s-4); }
/* Everything but the search sits in a fold that ui.js opens on wide screens and closes on phones. */
.more-filters-body { display: grid; gap: var(--s-4); }
.more-filters > summary { width: fit-content; font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-muted); cursor: pointer; }
.more-filters > summary:hover { color: var(--ink); }
.more-filters[open] > summary { margin-bottom: var(--s-4); }
@media (min-width: 761px) { .more-filters > summary { display: none; } }
.search {
  width: 100%;
  max-width: 28rem;
  padding: 0.6rem 0.8rem;
  font: 400 var(--step-0)/1.2 var(--font-body);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
}
/* Flex keeps the count on the text baseline even beside the zero-height nanosheet glyph. */
.chip[data-facet] { display: inline-flex; align-items: center; }
.chip .count { margin-left: 0.35em; color: var(--ink-faint); }
.chip[aria-pressed="true"] .count, .chip[aria-pressed="true"] .kind { color: inherit; }
.filter-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin: 0; font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-muted); }

.group-jump { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: 0 0 var(--s-5); padding: 0; list-style: none; font-family: var(--font-ui); font-size: var(--step--1); }
.group-jump a { color: var(--ink-muted); }
.group-jump a:hover { color: var(--ink); }

.cat-group { padding-block: var(--s-6); border-top: 1px solid var(--line-strong); scroll-margin-top: var(--head-room); }
.cat-group-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--s-3) var(--s-6); align-items: end; margin-bottom: var(--s-5); }
.cat-group-head h2 { font-size: var(--step-3); }
.cat-group-head p { max-width: var(--measure); margin: 0; color: var(--ink-muted); }
.filter-empty { padding-block: var(--s-6); color: var(--ink-muted); }
/* Element filter: a periodic table whose elements found in some family are toggle chips; the rest is a faint
   outline. Row 7 stays empty as the gap above the lanthanides. On phones only the chips remain, in order. */
.filter-row--top { align-items: start; }
.ptable { display: grid; grid-template-columns: repeat(18, minmax(0, 2.25rem)); grid-template-rows: repeat(6, auto) 0.4rem auto; gap: 3px; }
.pt-el { grid-row: var(--r); grid-column: var(--c); display: grid; place-items: center; aspect-ratio: 1; min-width: 0; min-height: 24px; border-radius: var(--r-1); }
.ptable .chip { justify-content: center; padding: 0; }
.ptable .chip[aria-pressed="false"] { color: var(--ink); }
.pt-el.is-absent, .pt-mark { font: 400 var(--step--2)/1 var(--font-ui); color: var(--ink-faint); }
.pt-el.is-absent { border: 1px dashed var(--line); }
.ptable-note { margin: var(--s-2) 0 0; font: 400 var(--step--2)/1.4 var(--font-ui); color: var(--ink-faint); }
@media (max-width: 640px) {
  .ptable { display: flex; flex-wrap: wrap; }
  .pt-el.is-absent, .pt-mark { display: none; }
  .ptable .pt-el { width: 2.25rem; }
}
/* The catalogue as a table (catalogue.js sets data-view): the same cards, each laid out as one row under a row of
   column names that stays in view, so filtering and sorting work as they do for cards. The use each card names is
   left out; its readiness stays. A table needs the width: it is offered from 1280 px, takes more of the window than
   the cards do, and shows the thickness column from 1440 px. Narrower screens keep the cards. */
.cat-table-head, .filter-row--view { display: none; }
@media (min-width: 1280px) {
  .filter-row--view { display: grid; }
  [data-view="table"] .cat-layout { max-width: 96rem; }
  [data-view="table"] { --cat-cols: 2.25rem minmax(0, 1fr) 10.5rem 7rem 5.25rem 7.25rem; }
  [data-view="table"] :is(.cat-table-head, .mat-card) { display: grid; grid-template-columns: var(--cat-cols); column-gap: var(--s-4); }
  [data-view="table"] .cat-table-head { position: sticky; top: calc(var(--head-room) - 1.4rem); z-index: 2; align-items: end; padding: var(--s-2); border-bottom: 1px solid var(--line-strong); background: var(--bg-sunken); font: 500 var(--step--2)/1.2 var(--font-ui); color: var(--ink-muted); }
  /* Column names that sort: plain text until pointed at; the one sorted by is set in ink with an arrow. */
  [data-view="table"] .cat-table-head > span { padding: 0.2rem 0; }
  [data-view="table"] .cat-table-head button { justify-self: start; padding: 0.2rem 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
  [data-view="table"] .cat-table-head button:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lens); text-underline-offset: 0.2em; }
  [data-view="table"] .cat-table-head button[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
  [data-view="table"] .cat-table-head button[aria-pressed="true"]::after { content: " ↓"; }
  [data-view="table"] .mat-grid { display: block; }
  [data-view="table"] .mat-card { align-items: center; row-gap: 0; padding: var(--s-2); border-top: 1px solid var(--line); font-size: var(--step--1); line-height: 1.35; }
  [data-view="table"] .mat-card::before { clip-path: none; }
  [data-view="table"] .mat-card > *, [data-view="table"] .facts > dd { grid-row: 1 / span 2; min-width: 0; }
  [data-view="table"] .mat-thumb { position: static; grid-column: 1; width: 2.25rem; height: 2.25rem; }
  [data-view="table"] .mat-card > :is(.formula, .name) { grid-column: 2; padding-right: 0; }
  [data-view="table"] .mat-card > .formula { grid-row: 1; align-self: end; font-size: var(--step-0); font-weight: 600; letter-spacing: 0; }
  [data-view="table"] .mat-card > .formula:last-of-type { grid-row: 1 / span 2; align-self: center; }
  [data-view="table"] .mat-card > .name { grid-row: 2; align-self: start; font-weight: 400; color: var(--ink-muted); }
  [data-view="table"] .mat-card > .kind { grid-column: 3; }
  [data-view="table"] .facts { display: contents; }
  [data-view="table"] .facts > dt, [data-view="table"] .mat-card > .use { display: none; }
  [data-view="table"] .fact-type { grid-column: 4; }
  [data-view="table"] :is(.fact-thickness, .cat-table-head > :nth-child(5)) { display: none; }
  [data-view="table"] dd.gap-fact { grid-column: 5; display: block; }
  [data-view="table"] .fact-ready { grid-column: 6; }
  /* Grouped, a table needs only the group's name between its rows. */
  [data-view="table"] .cat-group { padding-block: var(--s-4) var(--s-3); border-top: 0; }
  [data-view="table"] .cat-group-head { display: block; margin-bottom: var(--s-2); }
  [data-view="table"] .cat-group-head :is(p, .label) { display: none; }
  [data-view="table"] .cat-group-head h2 { font-size: var(--step-0); }
}
@media (min-width: 1440px) {
  [data-view="table"] { --cat-cols: 2.25rem minmax(0, 1fr) 10.5rem 7rem 9.5rem 5.25rem 7.25rem; }
  [data-view="table"] :is(.fact-thickness, .cat-table-head > :nth-child(5)) { display: block; }
  [data-view="table"] .fact-thickness { grid-column: 5; }
  [data-view="table"] dd.gap-fact { grid-column: 6; }
  [data-view="table"] .fact-ready { grid-column: 7; }
}
/* Links to the compare page: under a material's data sheet, and in the catalogue's filter column. */
.sheet-compare, .compare-link { margin: var(--s-3) 0 0; font-family: var(--font-ui); font-size: var(--step--1); }
.compare-link { margin: 0; }

/* The compare page (compare.js): a column of row names, then one column per family, its head (lattice, name and
   the menu to change it) staying in view while the rows scroll. On a narrow screen the row names run across the
   columns instead. */
.compare-grid { display: grid; grid-template-columns: 11rem repeat(var(--cols, 2), minmax(0, 1fr)); column-gap: var(--s-5); }
/* Pinned right under the site header (head-room also leaves space above section titles, which this would show through). */
.compare-corner, .compare-head { position: sticky; top: calc(var(--head-room) - 1.4rem); z-index: 1; background: var(--bg-sunken); }
.compare-head { position: sticky; display: grid; align-content: start; gap: var(--s-2); padding: var(--s-3) 4.25rem var(--s-4) 0; border-bottom: 1px solid var(--line-strong); }
.compare-head .mat-thumb { top: var(--s-3); right: 0; width: 3.5rem; height: 3.5rem; }
.compare-head .select { max-width: 100%; }
.compare-head--empty { padding-right: 0; }
.compare-title { font: 600 var(--step-1)/1.2 var(--font-ui); color: var(--ink); text-decoration: none; }
.compare-title:hover { text-decoration: underline; text-decoration-color: var(--lens); }
.compare-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-4); font-size: var(--step--1); }
.compare-tools label { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.compare-note { color: var(--ink-muted); }
.compare-copy { margin-left: auto; }
.compare-grid--start { display: block; }
.compare-start { display: grid; gap: var(--s-3); max-width: 40rem; }
.compare-start .compare-head { position: static; padding: 0; border: 0; background: none; }
.compare-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.compare-presets a { display: grid; gap: 0.2rem; height: 100%; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-raised); color: var(--ink); text-decoration: none; }
.compare-presets a:hover { border-color: var(--lens); }
.compare-presets span { font-size: var(--step--1); color: var(--ink-muted); }
.compare-name, .compare-hint { margin: 0; font-size: var(--step--1); line-height: 1.4; color: var(--ink-muted); }
.compare-label, .compare-cell { padding-block: var(--s-3); border-bottom: 1px solid var(--line); }
.compare-label { margin: 0; }
.compare-cell { min-width: 0; font-size: var(--step--1); line-height: 1.5; overflow-wrap: break-word; }
.compare-cell .gap-strip { margin: var(--s-2) 0 0; }
.compare-none { color: var(--ink-faint); }
@media (max-width: 760px) {
  .compare-grid { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); column-gap: var(--s-3); }
  .compare-corner { display: none; }
  .compare-head { position: static; padding-right: 0; }
  .compare-head .mat-thumb { display: none; }
  .compare-label { grid-column: 1 / -1; padding-bottom: 0; border-bottom: 0; }
}

/* Sorted by anything but group (catalogue.js): one flat grid, no group links, and the band gap on each card when sorted by it. */
.cat-sorted { padding-bottom: var(--s-6); }
[data-sort]:not([data-sort="group"]) .group-jump > li:not(.group-jump-extra) { display: none; }
.gap-fact { display: none; }
[data-sort="gap"] .gap-fact { display: block; }

.mat-card .formula--word { font-family: var(--font-display); font-weight: 560; font-size: var(--step-2); letter-spacing: 0; }
.mat-card .use { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--step--1); line-height: 1.45; color: var(--ink-muted); }

@media (max-width: 760px) {
  .filter-row, .cat-group-head { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) { .cat-group { scroll-margin-top: var(--s-4); } }
/* Phones: the catalogue becomes a two-column index; each family's page has the details. A card keeps its
   name, kind of sheet and readiness, plus the band gap when sorted by it. */
@media (max-width: 640px) {
  [data-catalogue] .mat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-3); }
  [data-catalogue] .mat-card { padding: var(--s-3) var(--s-2); overflow-wrap: anywhere; }
  [data-catalogue] .mat-card .formula, [data-catalogue] .mat-card .formula--word { font-size: var(--step-1); }
  [data-catalogue] .mat-card .name { font-size: var(--step--1); }
  [data-catalogue] .mat-card .kind { width: auto; }
  [data-catalogue] .mat-thumb { display: none; }
  [data-catalogue] .mat-card:has(.mat-thumb) > :is(.label, .formula, .name) { padding-right: 0; }
  [data-catalogue] .mat-card .use,
  [data-catalogue] .facts > :not(.gap-fact):not(:nth-last-child(-n+2)) { display: none; }
  [data-catalogue] .facts { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 0; }
  [data-catalogue] .facts dd + dt { margin-top: var(--s-1); }
}

/* Material page --------------------------------------------------------------- */

.crumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-4); padding: 0; list-style: none; font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-muted); }
.crumbs li + li::before { content: "/"; margin-right: var(--s-2); color: var(--ink-faint); }
.crumbs a { color: var(--ink-muted); }
/* A material page names its neighbours in the catalogue beside the breadcrumb, so the next one is a click away
   without scrolling to the foot of the page. */
.crumb-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-5); margin-bottom: var(--s-4); }
.crumb-row .crumbs { margin: 0; }
.crumb-pager { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-family: var(--font-ui); font-size: var(--step--1); }
.crumb-pager a { padding-block: 0.2rem; color: var(--ink-muted); text-decoration: none; }
.crumb-pager a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lens); }

.mat-head h1 { max-width: 22ch; }
/* A page head with a picture (a material's crystal model, a track's drawing) shows it beside the title on a wide
   screen; on a narrow one the picture follows the introduction. The title sizes itself to its own column. */
.head-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6) var(--s-7); }
.head-text { container-type: inline-size; }
.head-fig { scroll-margin-top: var(--head-room); }
.head-fig .gfig { margin: 0; }
.head-xtal .xtal-svg { cursor: default; }
@media (min-width: 1000px) {
  .page-head--fig .head-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
}
/* A glossary drawing needs 36rem to be read, so a track's head shows it only where its column has that; the
   drawing is on its glossary page either way. */
@media (min-width: 1200px) {
  :is(.page-head--drawing, .page-head--chart) .head-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  /* A chart in the head's column gives its names less room, and the conference calendar leaves each meeting's
     dates to the list below. Narrower than this the chart runs under the introduction at full width. */
  .page-head--chart .head-fig .rchart { max-width: none; margin: 0; }
  .page-head--chart .head-fig .rchart-row { grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr); }
  .page-head--chart .head-fig .cal-chart .rchart-row { grid-template-columns: minmax(0, 11.5rem) minmax(0, 1fr); }
  .page-head--chart .head-fig .cal-chart :is(.rchart-value, .rchart-axis > span:last-child) { display: none; }
}
.head-fig .prize-photo { max-width: none; margin: 0; }
/* The catalogue's head: every lattice the site draws, each a link to its family. A second way to the cards
   below, so it is left out where the head is a single column. */
.lattice-field { margin: 0; }
.lattice-field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr)); gap: var(--s-2); }
.lattice-field a { display: block; padding: 0.2rem; border-radius: var(--r-2); }
.lattice-field a:hover { background: var(--lens-quiet); }
.lattice-field .mat-thumb { position: static; display: block; width: 100%; height: auto; }
.lattice-field figcaption { margin-top: var(--s-3); font-size: var(--step--1); line-height: 1.5; color: var(--ink-muted); }
@media (max-width: 999px) { .lattice-field { display: none; } }
/* The catalogue's cards start a little sooner under its taller head. */
.band[data-catalogue] { padding-top: var(--s-6); }
@media (max-width: 1199px) {
  .page-head--drawing .head-fig { display: none; }
}
.formula-big { display: block; margin-top: var(--s-4); font-family: var(--font-ui); font-size: var(--step-3); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.formula-big--long { font-size: var(--step-1); letter-spacing: 0; }
.aka { margin: var(--s-3) 0 0; font-size: var(--step--1); color: var(--ink-muted); }
.mat-badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-4); }
.badge { padding: 0.2rem 0.6rem; border: 1px solid var(--line-strong); border-radius: var(--r-1); font-family: var(--font-ui); font-size: var(--step--2); color: var(--ink-muted); }

.mat-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); gap: var(--s-7); align-items: start; padding-block: var(--s-7) var(--s-8); }
.mat-main { grid-column: 1; grid-row: 1; min-width: 0; max-width: 48rem; }
/* The side column runs the full height of the page and holds only the contents list, so the list is in view from
   the first screen on. The data sheet opens the main column, its entries in two columns where there is room. */
.mat-side { grid-column: 2; grid-row: 1; align-self: stretch; display: grid; align-content: start; gap: var(--s-6); }
.datasheet { margin-bottom: var(--s-6); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-raised); scroll-margin-top: var(--head-room); }
.datasheet dl { columns: 2 16rem; column-gap: var(--s-6); margin: var(--s-4) 0 0; }
.datasheet dl > div { break-inside: avoid; padding-bottom: var(--s-4); }
/* Folded where the page is one column (ui.js); beside the text it is simply open. */
.sheet-fold { margin-top: 0; }
.sheet-fold > summary { margin-top: var(--s-2); }
@media (min-width: 961px) and (scripting: enabled) { .narrow-fold > summary { display: none; } }
.datasheet dt { margin-bottom: 0.2rem; }
.datasheet dd { margin: 0; font-size: var(--step--1); line-height: 1.5; }
.sheet-note { font-family: var(--font-ui); font-size: var(--step--2); color: var(--ink-faint); }
.sg { white-space: nowrap; }
.sg-bar { text-decoration: overline; }

.mat-section { margin-bottom: var(--s-6); padding-bottom: var(--s-6); border-bottom: 1px solid var(--line); }
.mat-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.mat-section > h2 { margin-bottom: var(--s-4); font-family: var(--font-display); font-weight: 560; font-size: var(--step-2); }
.plain-list { display: grid; gap: var(--s-2); max-width: var(--measure); margin: 0; padding-left: 1.2rem; }
.plain-list li::marker { color: var(--ink-faint); }

.uses { display: grid; max-width: 44rem; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.uses li { display: grid; grid-template-columns: minmax(0, 1fr) 8.5rem; gap: var(--s-4); align-items: baseline; padding-block: var(--s-3); border-bottom: 1px solid var(--line); }

.deeper { display: grid; gap: var(--s-3); }
.deeper-card { display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-left: 3px solid var(--aud); border-radius: var(--r-2); background: var(--bg-raised); }
.deeper-card[data-aud="theory"]      { --aud: var(--theory); }
.deeper-card[data-aud="experiment"]  { --aud: var(--experiment); }
.deeper-card[data-aud="engineering"] { --aud: var(--engineering); }
.deeper-card .label { color: var(--aud); }
.deeper-card p { max-width: var(--measure); margin: 0; }
.deeper-card .your-lens { display: none; }
/* The reader's own lens comes first. Order changes only the visual sequence; each card stands alone. */
:root[data-lens="theory"] .deeper-card[data-aud="theory"],
:root[data-lens="experiment"] .deeper-card[data-aud="experiment"],
:root[data-lens="engineering"] .deeper-card[data-aud="engineering"] { order: -1; box-shadow: 0 0 0 1px var(--aud); }
:root[data-lens="theory"] .deeper-card[data-aud="theory"] .your-lens,
:root[data-lens="experiment"] .deeper-card[data-aud="experiment"] .your-lens,
:root[data-lens="engineering"] .deeper-card[data-aud="engineering"] .your-lens { display: inline; }

.track-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: var(--s-5); }
.track-group { display: grid; align-content: start; gap: var(--s-3); }
.track-group h3 { justify-self: start; font-weight: 500; line-height: 1.4; }
.track-group ul { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; font-size: var(--step--1); line-height: 1.45; }

.refs { display: grid; gap: var(--s-3); max-width: 44rem; margin: 0; padding-left: 1.4rem; font-size: var(--step--1); line-height: 1.5; }
.refs li::marker { font-family: var(--font-ui); color: var(--ink-faint); }
.refs .ref-meta { display: block; color: var(--ink-muted); }
.refs .ref-cited { display: block; font-family: var(--font-ui); font-size: var(--step--2); color: var(--ink-faint); }
/* "Copy citation" (ui.js): quiet, and with a mouse shown only on the reference pointed at or focused. */
.refs .ref-copy { justify-self: start; padding: 0.15rem 0; font-size: var(--step--2); color: var(--ink-faint); }
.refs .ref-copy:hover { color: var(--lens); }
@media (hover: hover) { .refs li .ref-copy { opacity: 0; } .refs li:hover .ref-copy, .refs .ref-copy:focus-visible { opacity: 1; } }
.refs a { font-family: var(--font-mono); font-size: var(--step--2); }

.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-6); }
.pager a { display: grid; gap: 0.2rem; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-raised); color: var(--ink); text-decoration: none; }
.pager a:hover { border-color: var(--ink-muted); }
.pager .pager-next { grid-column: 2; text-align: right; }

.page-head .kind-legend { margin: var(--s-6) 0 0; }
.section-note { max-width: var(--measure); margin: calc(-1 * var(--s-2)) 0 var(--s-4); font-size: var(--step--1); color: var(--ink-muted); }
.uses-scale { margin: var(--s-3) 0 0; font-family: var(--font-ui); font-size: var(--step--2); color: var(--ink-muted); }

/* Applications page ------------------------------------------------------------ */


/* Nested contents: areas sit under their horizon; on narrow screens only the horizons show. */
.toc ol ol { margin: 0 0 var(--s-2); border-left: 0; }
.toc ol ol a { padding-left: var(--s-5); font-size: var(--step--2); }

.horizon-count { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); }

.apps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
.app { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding-top: var(--s-6); border-top: 1px solid var(--line); scroll-margin-top: var(--head-room); }
.apps .app:first-child { padding-top: 0; border-top: 0; }
.app-head h3 { font-family: var(--font-display); font-weight: 560; font-size: var(--step-3); line-height: 1.15; overflow-wrap: break-word; }
.app-headline { max-width: var(--measure); margin: var(--s-2) 0 0; font-size: var(--step-1); font-style: italic; line-height: 1.4; color: var(--ink-muted); }
.app-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 16rem); gap: var(--s-4) var(--s-6); align-items: start; }
.app-body p { max-width: var(--measure); }
.app-body p:last-child { margin-bottom: 0; }
.app-enables { font-size: var(--step-1); line-height: 1.5; }
.app-body h4 { margin: var(--s-5) 0 var(--s-2); }
.app-side { display: grid; gap: var(--s-4); padding: var(--s-4); border-radius: var(--r-2); background: var(--bg-sunken); font-size: var(--step--1); line-height: 1.5; }
.app-side h4 { margin: 0 0 var(--s-1); }
.app-side p { margin: 0; }
.app-side .caveat { max-width: none; }
.app-side .trl-seg { width: 20px; }
.app-readiness { display: grid; gap: var(--s-3); }
.app-readiness > div { display: grid; gap: 0.3rem; }
.app-readiness a { color: var(--ink); }
.chip-list { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.plain-chip { padding: 0.15rem 0.45rem; border: 1px dashed var(--line-strong); border-radius: var(--r-1); font-family: var(--font-ui); font-size: var(--step--2); color: var(--ink-muted); }

.drivers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.driver { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-raised); }
.driver h3 { font-size: var(--step-1); line-height: 1.3; }
.driver p { margin: 0; font-size: var(--step--1); line-height: 1.6; color: var(--ink-muted); }

/* Applications: which areas each pressure pulls forward. Pointing at a driver lights its lines. Below ~36rem the
   drawing scrolls sideways, as the glossary drawings do. */
.pull-fig { margin: var(--s-4) 0 var(--s-6); }
.pull-fig svg { display: block; width: 100%; min-width: 36rem; height: auto; }
.pull-fig text { font: 500 13px var(--font-ui); fill: var(--ink); }
.pull-fig .pull-app { fill: var(--ink-muted); }
.pull-fig path { fill: none; stroke: var(--line-strong); stroke-width: 1.5; transition: stroke 120ms; }
.pull-driver:hover path { stroke: var(--lens); stroke-width: 2.25; }
.pull-fig figcaption { max-width: var(--measure); margin-top: var(--s-3); font-size: var(--step--1); line-height: 1.5; color: var(--ink-muted); }
.driver-pulls { font-family: var(--font-ui); }
.driver-pulls .label { display: block; margin-bottom: 0.15rem; }
.driver-pulls a { color: var(--ink); }

/* Applications: the materials behind the uses, one segment per application, one hue from shipping (darkest) to
   speculative (lightest). */
.use-chart .rchart-row { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) 2rem; }
.use-chart .rchart-name a { color: var(--ink); }
.use-chart .rchart-track { gap: 2px; height: 24px; background: none; border-right: 0; }
/* The bar is drawn 12 px tall, but the link is the 24 px row around it, which a finger can hit. */
.use-seg { position: relative; display: block; flex: none; width: calc(var(--w) - 2px); height: 24px; }
.use-seg::before { content: ""; position: absolute; inset: 6px 0; border-radius: 2px; }
.use-seg:focus-visible { outline: none; }
.use-seg:hover::before, .use-seg:focus-visible::before { outline: 2px solid var(--ink); outline-offset: 1px; }
.use-seg[data-level="4"]::before, .use-swatch[data-level="4"] { background: var(--lens); }
.use-seg[data-level="3"]::before, .use-swatch[data-level="3"] { background: color-mix(in srgb, var(--lens) 70%, var(--bg)); }
.use-seg[data-level="2"]::before, .use-swatch[data-level="2"] { background: color-mix(in srgb, var(--lens) 45%, var(--bg)); }
.use-seg[data-level="1"]::before, .use-swatch[data-level="1"] { background: color-mix(in srgb, var(--lens) 22%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lens) 45%, var(--bg)); }
.use-key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin: 0 0 var(--s-3); font: 500 var(--step--2)/1.2 var(--font-ui); color: var(--ink-muted); }
.use-swatch { display: inline-block; width: 14px; height: 10px; margin-left: var(--s-3); border-radius: 2px; }
.use-swatch:first-child { margin-left: 0; }

/* Applications: where each hurdle bites, from a laboratory result to a product, as stops on one line. */
.hurdle-line { margin: var(--s-5) 0 var(--s-7); }
.hurdle-line > ol { margin: 0; padding: 0; list-style: none; }
.hurdle-stage { position: relative; display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: var(--s-1) var(--s-5); padding: 0 0 var(--s-5) var(--s-5); border-left: 1px solid var(--line-strong); }
.hurdle-stage:last-child { padding-bottom: 0; border-left-color: transparent; }
.hurdle-stage::before { content: ""; position: absolute; top: 0.3em; left: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--lens); }
.hurdle-stage-title { grid-column: 1; margin: 0; font: 600 var(--step-0)/1.25 var(--font-ui); }
.hurdle-stage-text { grid-column: 1; margin: 0; font-size: var(--step--1); line-height: 1.45; color: var(--ink-muted); }
.hurdle-stage ul { grid-column: 2; grid-row: 1 / span 2; display: grid; align-content: start; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.hurdle-stage ul a { font-family: var(--font-ui); font-weight: 500; }
@media (max-width: 640px) {
  .hurdle-stage { grid-template-columns: minmax(0, 1fr); }
  .hurdle-stage ul { grid-column: 1; grid-row: auto; margin-top: var(--s-2); }
}
.hurdle-line figcaption { max-width: var(--measure); margin-top: var(--s-4); font-size: var(--step--1); line-height: 1.5; color: var(--ink-muted); }

.hard-list { display: grid; gap: var(--s-6); }
.hard { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.hard:first-child { padding-top: 0; border-top: 0; }
.hard h3 { grid-column: 1 / -1; font-family: var(--font-display); font-weight: 560; font-size: var(--step-2); line-height: 1.2; }
.hard p { margin: 0; font-size: var(--step--1); line-height: 1.6; }
.hard .label { display: block; margin-bottom: var(--s-2); }
.hard-why { padding-left: var(--s-4); border-left: 2px dashed var(--caution); }
/* Folded: the lead runs full width; the rest of the explanation and why it is unsolved sit side by side inside. */
.hard > p, .hard > .fold { grid-column: 1 / -1; }
.hard > p { max-width: var(--measure); }
.hard .fold-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-6); align-items: start; }
.app-body .caveat { margin-top: var(--s-4); }

@media (max-width: 1100px) {
  .app-grid { grid-template-columns: minmax(0, 1fr); }
  .app-side { max-width: var(--measure); }
}
@media (max-width: 960px) {
  .toc ol ol { display: none; }
}
@media (max-width: 900px) {
  .app { scroll-margin-top: var(--s-4); }
}
@media (max-width: 860px) {
  .drivers { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .hard, .hard .fold-body { grid-template-columns: minmax(0, 1fr); }
}

/* News page --------------------------------------------------------------------- */

.select {
  width: 100%;
  max-width: 22rem;
  padding: 0.55rem 0.7rem;
  font: 500 var(--step--1)/1.2 var(--font-ui);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
}

/* A chart beside a page's introduction (news coverage, glossary terms); stacked, it folds away (ui.js). */
@media (min-width: 961px) {
  .head-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); column-gap: var(--s-7); }
  .head-split > * { grid-column: 1; }
  .head-split > .head-aside { grid-column: 2; grid-row: 1 / span 8; align-self: center; margin: 0; }
}
.head-aside { margin-top: var(--s-4); }
.aside-chart { margin: 0; }
.aside-chart > .label { margin: 0 0 var(--s-3); }
.aside-chart .rchart-row { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr) 2.25rem; padding-block: 0.15rem; }
.aside-chart .rchart-axis > span:first-child { display: block; }
.aside-chart li.rchart-group { padding-top: var(--s-3); }
.aside-chart li.rchart-group:first-child { padding-top: 0; }
.aside-chart figcaption { margin-top: var(--s-3); font: 400 var(--step--2)/1.45 var(--font-ui); color: var(--ink-faint); }
.filters { scroll-margin-top: var(--head-room); }

.news-month { margin-top: var(--s-6); }
.news-month-title { margin: 0 0 var(--s-3); font-family: var(--font-ui); font-size: var(--step--1); font-weight: 500; color: var(--ink-muted); }
.news-month .news-list { padding: 0 var(--s-5); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-raised); }
.news-month .news-item:last-child { border-bottom: 0; }
.more-row { display: flex; justify-content: center; margin-top: var(--s-6); }

.about-feed { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.about-feed > div > p { max-width: var(--measure); }
.about-feed h3 { margin: var(--s-5) 0 var(--s-2); }
.source-list { margin: 0; padding: 0; list-style: none; font-size: var(--step--1); columns: 2 13rem; column-gap: var(--s-5); }
.source-list li { display: flex; justify-content: space-between; gap: var(--s-3); padding: 0.3rem 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.source-list .count { font-family: var(--font-ui); font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.source-list .is-empty { color: var(--ink-faint); }
.releases { margin: 0 0 var(--s-6); }
.release-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: var(--s-1) var(--s-5); margin: var(--s-2) 0 var(--s-2); padding: 0; list-style: none; font-family: var(--font-ui); font-size: var(--step--1); }
.release-list a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 0 0.6rem; padding: 0.3rem 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.release-list a:hover strong { text-decoration: underline; text-decoration-color: var(--lens); }
.release-tag { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-muted); }
.release-list time { color: var(--ink-faint); white-space: nowrap; }
.not-covered { display: grid; gap: var(--s-2); margin: 0 0 var(--s-4); padding: 0; list-style: none; font-size: var(--step--1); line-height: 1.5; }
.not-covered span { color: var(--ink-muted); }

@media (max-width: 860px) {
  .about-feed { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .news-month .news-list { padding: 0 var(--s-4); }
}

@media (max-width: 960px) {
  .mat-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .mat-main, .mat-side { grid-column: 1; grid-row: auto; }
  .mat-side .toc ol { column-width: 8rem; }
}
@media (max-width: 560px) {
  .uses li { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager .pager-next { grid-column: 1; }
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Formulas: a subscript that sits on the baseline reads as a letter, so set them properly. */
sub, sup { font-size: 0.72em; line-height: 0; }
sub { vertical-align: -0.22em; }
sup { vertical-align: 0.42em; }

/* Conferences ------------------------------------------------------------------ */

.conf-section { padding-block: var(--s-7); border-bottom: 1px solid var(--line); }
.conf-section:last-child { border-bottom: 0; }
/* The shared intro style pulls itself up under a heading; give it room here. */
.conf-section > .section-title { margin-bottom: var(--s-4); }
.conf-month { margin-top: var(--s-6); }

.conf-list { padding: 0 var(--s-5); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-raised); }
.conf { position: relative; display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--s-5); padding-block: var(--s-5); border-bottom: 1px solid var(--line); }
.conf:last-child { border-bottom: 0; }
.conf-when { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-muted); }
.conf-when time { font-weight: 500; color: var(--ink); }
.conf-now { padding: 0.1rem 0.55rem; border-radius: var(--r-1); background: var(--lens-quiet); font-size: var(--step--2); color: var(--ink); }
.conf-body { display: grid; align-content: start; gap: var(--s-2); }
.conf-body h3, .conf-body h4 { font-size: var(--step-1); line-height: 1.3; font-weight: 600; }
.conf-body h3 a, .conf-body h4 a { color: var(--ink); text-decoration: none; }
.conf-body h3 a:hover, .conf-body h4 a:hover { text-decoration: underline; text-decoration-color: var(--lens); }
.conf-body p { max-width: var(--measure); margin: 0; font-size: var(--step--1); line-height: 1.55; color: var(--ink-muted); }
.conf-body .conf-deadline { font-family: var(--font-ui); font-size: var(--step--2); }
.conf-body .conf-deadline--open { color: var(--ink); }
.conf-deadline--open strong { font-weight: 500; }

/* Paper-to-prize chart: the prizes the field stands on in grey, the prize for a 2D material in colour. */
.prize-chart .rchart-row { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) 4.5rem; }
.prize-chart .rchart-range { background: var(--ink-faint); }
.prize-chart .is-direct .rchart-range { background: var(--lens); }
.prize-chart .is-direct .rchart-name { font-weight: 600; }

/* Conference calendar: twelve months as columns, meetings as bars, the next deadline as a ring, today as a line. */
.cal-chart .rchart-row { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 7.5rem; }
.cal-chart .rchart-range { min-width: 6px; }
.cal-chart .rchart-track::before { content: ""; position: absolute; top: -0.35rem; bottom: -0.35rem; left: var(--today); width: 2px; background: var(--ink-muted); transform: translateX(-50%); }
.cal-deadline { position: absolute; top: 50%; left: var(--x); width: 10px; height: 10px; border: 2px solid var(--lens); border-radius: 50%; background: var(--bg); transform: translate(-50%, -50%); }
.cal-chart .rchart-ticks span, .cal-chart .rchart-ticks span:is(:first-child, :last-child) { transform: translateX(-50%); }
.cal-key { display: inline-block; vertical-align: middle; margin: 0 0.35rem 0 0.9rem; }
.cal-key:first-child { margin-left: 0; }
.cal-key--meeting { width: 18px; height: 10px; border-radius: 5px; background: var(--lens); }
.cal-key--deadline { width: 10px; height: 10px; border: 2px solid var(--lens); border-radius: 50%; }
.cal-key--today { width: 2px; height: 14px; background: var(--ink-muted); }
@media (max-width: 640px) { .cal-chart .rchart-ticks span:nth-child(even) { display: none; } }

/* The reading lens marks the meetings closest to the reader's work; nothing is hidden. */
.conf::before, .conf-deadlines li::before, .conf-waiting li::before {
  content: none; position: absolute; top: var(--s-4); bottom: var(--s-4); width: 3px; border-radius: 2px; background: var(--lens);
}
.conf::before { left: calc(-1 * var(--s-5)); }
:root[data-lens="theory"] .conf[data-aud~="theory"]::before,
:root[data-lens="experiment"] .conf[data-aud~="experiment"]::before,
:root[data-lens="engineering"] .conf[data-aud~="engineering"]::before,
:root[data-lens="theory"] .conf-deadlines li[data-aud~="theory"]::before,
:root[data-lens="experiment"] .conf-deadlines li[data-aud~="experiment"]::before,
:root[data-lens="engineering"] .conf-deadlines li[data-aud~="engineering"]::before,
:root[data-lens="theory"] .conf-waiting li[data-aud~="theory"]::before,
:root[data-lens="experiment"] .conf-waiting li[data-aud~="experiment"]::before,
:root[data-lens="engineering"] .conf-waiting li[data-aud~="engineering"]::before { content: ""; }

.conf-deadlines { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.conf-deadlines li { position: relative; display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0.2rem var(--s-5); padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
.conf-deadlines li::before { left: calc(-1 * var(--s-4)); }
.conf-due { grid-row: span 2; font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink); }
.conf-due em { display: block; font-style: normal; color: var(--ink-muted); }
.conf-deadlines a { font-weight: 600; }
.conf-due-what { font-size: var(--step--1); color: var(--ink-muted); }

.conf-waiting { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.conf-waiting li { position: relative; display: grid; align-content: start; gap: var(--s-2); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-raised); }
.conf-waiting li::before { left: -1px; top: var(--s-3); bottom: var(--s-3); }
.conf-waiting a { font-weight: 600; }
.conf-waiting p { margin: 0; font-size: var(--step--1); line-height: 1.5; color: var(--ink-muted); }
.conf-waiting .card-note { padding-top: var(--s-2); }

.conf-how { display: grid; gap: var(--s-4); }
.conf-how p { max-width: var(--measure); margin: 0; }

@media (max-width: 700px) {
  .conf, .conf-deadlines li { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .conf-due { grid-row: auto; }
  .conf-due em { display: inline; }
  .conf-list { padding: 0 var(--s-4); }
  .conf::before { left: calc(-1 * var(--s-4)); }
}

/* Glossary ---------------------------------------------------------------------- */

.gloss-page { padding-block: var(--s-7); }
.gloss-page .filters { margin-bottom: var(--s-5); }
.gloss-jump ul { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 var(--s-5); padding: 0; list-style: none; }
.gloss-jump a { display: inline-grid; place-items: center; min-width: 2.25rem; height: 2.25rem; border: 1px solid var(--line); border-radius: var(--r-1); font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink); text-decoration: none; }
.gloss-jump a:hover { border-color: var(--ink-muted); background: var(--lens-quiet); }
.gloss-letter { padding-top: var(--s-5); scroll-margin-top: var(--head-room); }
/* On a wide screen the letters stay under the header, so a long list can be jumped through from anywhere. */
@media (min-width: 900px) {
  .gloss-jump { position: sticky; top: calc(var(--head-room) - 1.4rem); z-index: 5; margin-bottom: var(--s-3); padding-block: 0.6rem 0.1rem; background: var(--bg); }
  .gloss-jump ul { margin-bottom: 0.5rem; }
  .gloss-jump a { min-width: 1.9rem; height: 1.9rem; }
  .gloss-letter { scroll-margin-top: calc(var(--head-room) + 2.6rem); }
}
.gloss-letter-title { margin: 0 0 var(--s-3); font-family: var(--font-display); font-weight: 560; font-size: var(--step-3); line-height: 1; color: var(--lens); }
.gloss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); gap: var(--s-3); }
.gloss-card { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-raised); scroll-margin-top: var(--head-room); }
.gloss-card:target { border-color: var(--lens); box-shadow: 0 0 0 3px var(--lens-quiet); }
.gloss-card h3 { font-size: var(--step-0); line-height: 1.3; font-weight: 600; }
.gloss-card h3 a { color: var(--ink); text-decoration: none; }
.gloss-card h3 a:hover { text-decoration: underline; text-decoration-color: var(--lens); }
.gloss-card p { margin: 0; font-size: var(--step--1); line-height: 1.55; color: var(--ink-muted); }
.gloss-card .gloss-aka { font-family: var(--font-ui); font-size: var(--step--2); color: var(--ink-faint); }
.gloss-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; }
a.aud { text-decoration: none; }

.term-aka { margin: var(--s-3) 0 0; font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-muted); }
.term-head .gloss-tags { margin-top: var(--s-4); }
.term-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); gap: var(--s-7); align-items: start; padding-block: var(--s-7); }
.term-levels { display: flex; flex-direction: column; gap: var(--s-5); }
.term-level { padding: var(--s-5) var(--s-6); border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--r-2); background: var(--bg-raised); }
.term-level .label { display: block; margin: 0 0 var(--s-3); }
.term-level p { max-width: var(--measure); font-size: var(--step-1); line-height: 1.6; }
.term-level p:last-child { margin-bottom: 0; }

/* Going deeper: a figure and short headed sections between the plain words and the specialists' definition. */
.term-level--deeper { border-left-color: var(--line-strong); }
.term-level--deeper p { font-size: var(--step-0); line-height: 1.65; }
.deeper-heading { margin: var(--s-6) 0 var(--s-2); font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; letter-spacing: -0.01em; }
.gfig { margin: var(--s-2) 0 0; }
/* Labels stay legible on a phone: below ~36rem the drawing scrolls sideways instead of shrinking. Where the
   build found its panels, ui.js adds them as drawings of their own, and a frame narrower than 30rem – a phone's
   column, or a card on one – shows those one below another instead. A frame is its own container, so each
   drawing decides by the room it has. */
.gfig-frame { overflow-x: auto; container-type: inline-size; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-raised); }
.gfig svg { display: block; width: 100%; min-width: 36rem; height: auto; }
.gfig-panels { display: none; }
@container (max-width: 29.99rem) {
  .gfig-frame.has-panels > svg { display: none; }
  .gfig-frame.has-panels > .gfig-panels { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-4) var(--s-5); }
}
/* A frame just short of 36rem shrinks the drawing a little rather than scroll it by a few pixels. */
@container (min-width: 34rem) { .gfig svg { min-width: 0; } }
.gfig .gfig-panels svg { flex-grow: 1; flex-shrink: 1; min-width: 0; }
/* Hinted text is rounded to whole pixels, so a shrunk label can grow by a fifth and run past its panel's edge;
   exact widths keep each label where the build measured it. */
.gfig-panels text { text-rendering: geometricPrecision; }
.gfig-frame.is-scrolling:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gfig-frame.is-scrolling + figcaption::before { content: 'Scroll sideways to see the whole drawing.'; display: block; margin-bottom: var(--s-2); font: 500 var(--step--2)/1.4 var(--font-ui); color: var(--ink-muted); }
.gfig figcaption { max-width: var(--measure); margin-top: var(--s-3); font-size: var(--step--1); line-height: 1.5; color: var(--ink-muted); }
/* Figure vocabulary. Every colour is a token, so each drawing follows the light and dark themes by itself.
   Stroke classes set only the stroke; give an outline-only shape fill="none". */
.gfig text { font-family: var(--font-ui); font-size: 13px; fill: var(--ink-muted); }
.gfig .t-ink { fill: var(--ink); }
.gfig .t-accent { fill: var(--accent); }
.gfig .t-electron { fill: var(--theory); }
.gfig .t-hole { fill: var(--engineering); }
.gfig .s-ink { stroke: var(--ink); }
.gfig .s-muted { stroke: var(--ink-muted); }
.gfig .s-faint { stroke: var(--ink-faint); }
.gfig .s-line { stroke: var(--line-strong); }
.gfig .s-accent { stroke: var(--accent); }
.gfig .s-electron { stroke: var(--theory); }
.gfig .s-hole { stroke: var(--engineering); }
.gfig .f-ink { fill: var(--ink); }
.gfig .f-muted { fill: var(--ink-muted); }
.gfig .f-accent { fill: var(--accent); }
.gfig .f-quiet { fill: var(--accent-quiet); }
.gfig .f-sunken { fill: var(--bg-sunken); }
.gfig .f-raised { fill: var(--bg-raised); }
.gfig .f-electron { fill: var(--theory); }
.gfig .f-hole { fill: var(--engineering); }
.gfig .f-electron-quiet { fill: var(--theory-quiet); }
.gfig .f-hole-quiet { fill: var(--engineering-quiet); }
.gfig .f-experiment-quiet { fill: var(--experiment-quiet); }
.gfig .f-general-quiet { fill: var(--general-quiet); }
.gfig .dash { stroke-dasharray: 4 4; }

/* The explanation that suits the reader's lens comes first and carries the lens colour. Both stay visible. The page
   is written easiest first; a research lens reads it hardest first – specialists, going deeper, plain words. */
:root[data-lens="theory"] .term-level--expert,
:root[data-lens="experiment"] .term-level--expert,
:root[data-lens="engineering"] .term-level--expert { order: -2; }
:root[data-lens="theory"] .term-level--deeper,
:root[data-lens="experiment"] .term-level--deeper,
:root[data-lens="engineering"] .term-level--deeper { order: -1; }
:root[data-lens="general"] .term-level--plain,
:root[data-lens="theory"] .term-level--expert,
:root[data-lens="experiment"] .term-level--expert,
:root[data-lens="engineering"] .term-level--expert { border-left-color: var(--lens); }

.term-side { position: sticky; top: var(--head-room); display: grid; gap: var(--s-5); font-size: var(--step--1); line-height: 1.5; }
.term-side h2 { margin: 0 0 var(--s-2); }
.term-side .plain-list { font-size: var(--step--1); }
.term-side .card-note { margin-top: var(--s-2); padding-top: 0; border-top: 0; }
.term-side .mentions-more { margin-top: var(--s-2); }
.term-side .mentions-more .plain-list { margin-top: var(--s-2); }
/* An opened list can outgrow the screen, and a sticky column taller than the screen hides its end. */
.term-side:has(.mentions-more[open]) { position: static; }

.term-pager { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s-4); padding-block: var(--s-5) var(--s-7); border-top: 1px solid var(--line); }
.term-pager a { display: grid; gap: 0.2rem; color: var(--ink); text-decoration: none; }
.term-pager strong { font-weight: 600; overflow-wrap: anywhere; }
.term-pager a:hover strong, .term-all:hover { text-decoration: underline; text-decoration-color: var(--lens); }
.term-next { justify-items: end; text-align: right; }
.term-all { font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-muted); }

@media (max-width: 900px) {
  .term-body { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .term-side { position: static; }
  .gloss-letter, .gloss-card { scroll-margin-top: var(--s-4); }
}
@media (max-width: 640px) {
  /* On a phone each explanation shows three lines; the term's own page, one tap away, has it in full.
     A card reached by a link to it opens in full. */
  .gloss-card p[data-lens-panel] { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .gloss-card:target p[data-lens-panel] { display: block; }
  /* The track tags join the title's row (they wrap below a long title), and the padding tightens. */
  .gloss-card { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; padding: var(--s-3); }
  .gloss-card h3 { flex: 1 1 auto; }
  .gloss-card .gloss-tags { order: 1; }
  .gloss-card .gloss-aka, .gloss-card p[data-lens-panel] { order: 2; flex-basis: 100%; }
}
@media (max-width: 560px) {
  .gloss-grid { grid-template-columns: minmax(0, 1fr); }
  .term-level { padding: var(--s-4); }
  .term-pager { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .term-all { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}

/* Research tracks ---------------------------------------------------------------- */

.briefs { display: grid; gap: var(--s-7); }
.brief { display: grid; gap: var(--s-3); padding-top: var(--s-6); border-top: 1px solid var(--line); scroll-margin-top: var(--head-room); }
.briefs .brief:first-child { padding-top: 0; border-top: 0; }
.brief > h3 { max-width: 32ch; font-family: var(--font-display); font-weight: 560; font-size: var(--step-2); line-height: 1.2; }
.brief-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 16rem); gap: var(--s-4) var(--s-6); align-items: start; }
.brief-body h4 { margin: var(--s-4) 0 var(--s-2); }
.brief-body h4:first-child { margin-top: 0; }
.brief-body p { max-width: var(--measure); }
.brief-body p:last-child { margin-bottom: 0; }
.brief-side { display: grid; gap: var(--s-4); font-size: var(--step--1); line-height: 1.5; }
.brief-side h4 { margin: 0 0 var(--s-1); }
.side-note { padding: var(--s-4); border-radius: var(--r-2); background: var(--lens-quiet); }
.side-note .label { color: var(--lens); }
.side-note p { margin: 0; }

.method-notes { display: grid; gap: var(--s-6); }
.method-note { display: grid; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--line); }

/* Experiment: the reproducibility traps as a checklist, kept in the reader's browser. */
.trap-tally { max-width: var(--measure); margin: 0 0 var(--s-5); font: 400 var(--step--1)/1.5 var(--font-ui); color: var(--ink-muted); }
.trap-count { font-weight: 600; color: var(--ink); }
.trap-check { display: inline-flex; align-items: center; gap: var(--s-2); justify-self: start; font: 500 var(--step--1)/1.3 var(--font-ui); cursor: pointer; }
.trap-check input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--lens); }
.method-note:has(.trap-check input:checked) h3 { color: var(--ink-muted); }

/* Engineering: the manufacturing problems as one table, to read down "best so far" and "what it would take". On
   phones each row becomes a block, its cells labelled. */
.make-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); line-height: 1.5; }
.make-table thead th { padding: 0 var(--s-4) var(--s-2) 0; border-bottom: 1px solid var(--line-strong); font: 500 var(--step--2)/1.2 var(--font-ui); text-align: left; color: var(--ink-muted); }
.make-table tbody tr { border-bottom: 1px solid var(--line); scroll-margin-top: var(--head-room); }
.make-table tbody th, .make-table td { width: 33%; padding: var(--s-4) var(--s-4) var(--s-4) 0; vertical-align: top; text-align: left; font-weight: 400; }
.make-table tbody th strong { display: block; margin-bottom: var(--s-1); font: 600 var(--step-0)/1.3 var(--font-ui); color: var(--ink); }
.make-why { color: var(--ink-muted); }
.make-table td:last-child { padding-right: 0; }
@media (max-width: 760px) {
  .make-table thead { display: none; }
  .make-table, .make-table tbody, .make-table tr, .make-table tbody th, .make-table td { display: block; width: auto; }
  .make-table tbody tr { padding-block: var(--s-4); }
  .make-table tbody th, .make-table td { padding: 0 0 var(--s-3); }
  .make-table td:last-child { padding-bottom: 0; }
  .make-table td::before { content: attr(data-label); display: block; margin-bottom: 0.15rem; font: 500 var(--step--2)/1.2 var(--font-ui); color: var(--ink-muted); }
}

/* Engineering: the organisations listed, by country, with their names under each bar. */
.org-chart .rchart-row { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) 2rem; }
.org-names { margin: 0 0 0.45rem; padding-left: calc(10rem + var(--s-4)); font: 400 var(--step--2)/1.45 var(--font-ui); color: var(--ink-muted); }
.org-names a { color: var(--ink); }
@media (max-width: 640px) { .org-names { padding-left: 0; } }

/* Engineering: the supply inputs against the exposures their text names, a dot for each one named. */
.supply-matrix { margin: var(--s-4) 0 var(--s-7); }
.supply-matrix table { width: 100%; border-collapse: collapse; font: 400 var(--step--1)/1.35 var(--font-ui); }
.supply-matrix thead th { padding: 0 var(--s-2) var(--s-2); border-bottom: 1px solid var(--line-strong); font: 500 var(--step--2)/1.2 var(--font-ui); text-align: center; vertical-align: bottom; color: var(--ink-muted); }
.supply-matrix tbody tr { border-bottom: 1px solid var(--line); }
.supply-matrix tbody th { padding: var(--s-3) var(--s-3) var(--s-3) 0; text-align: left; font-weight: 400; }
.supply-matrix tbody th a { color: var(--ink); }
.supply-matrix td { width: 15%; padding: var(--s-3) var(--s-1); text-align: center; }
.supply-dot { display: block; width: 10px; height: 10px; margin: 0 auto; border-radius: 50%; background: var(--lens); }
.supply-only { display: block; margin-top: 0.3rem; font-size: var(--step--2); color: var(--ink-muted); }
.supply-matrix figcaption { max-width: var(--measure); margin-top: var(--s-4); font-size: var(--step--1); line-height: 1.5; color: var(--ink-muted); }
/* Four columns do not fit a phone: each input becomes a block listing only its marks, each labelled. */
@media (max-width: 560px) {
  .supply-matrix thead { display: none; }
  .supply-matrix table, .supply-matrix tbody, .supply-matrix tr, .supply-matrix tbody th { display: block; }
  .supply-matrix tr { padding-block: var(--s-3); }
  .supply-matrix tbody th { padding: 0 0 var(--s-2); }
  .supply-matrix td { display: flex; align-items: baseline; gap: 0.4rem; width: auto; padding: 0 0 var(--s-1); text-align: left; }
  .supply-matrix td:empty { display: none; }
  .supply-matrix td::before { content: attr(data-label); color: var(--ink-muted); }
  .supply-dot { order: -1; flex: none; width: 8px; height: 8px; margin: 0; }
  .supply-only { margin: 0; }
  .supply-only::before { content: '('; }
  .supply-only::after { content: ')'; }
}
.method-notes .method-note:first-child { padding-top: 0; border-top: 0; }
.method-note h3 { font-size: var(--step-1); line-height: 1.3; }
.method-note > p { max-width: var(--measure); }
.method-for { margin: 0; font-size: var(--step--1); color: var(--ink-muted); }
.method-for .label { margin-right: var(--s-2); }
.method-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); align-items: start; }
.method-two p { margin: 0; font-size: var(--step--1); line-height: 1.6; }
.method-two .label { display: block; margin-bottom: var(--s-2); }
.pitfall { max-width: var(--measure); padding-left: var(--s-4); border-left: 2px dashed var(--caution); }

.codes-kind { margin: var(--s-6) 0 var(--s-3); }
.codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: var(--s-3); }
.code-card { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-raised); }
.code-card :is(h3, h4) { font-family: var(--font-mono); font-size: var(--step-0); font-weight: 500; }
.code-card a { color: var(--ink); }
.code-card p { margin: 0; font-size: var(--step--1); line-height: 1.5; color: var(--ink-muted); }
.code-card .badge { justify-self: start; }

/* Reading page: journals on the same cards, named in the UI face rather than as code, and marked by the
   reader's lens like the conferences (nothing is hidden). */
.lit-kind-text { margin: calc(-1 * var(--s-2)) 0 var(--s-3); font-size: var(--step--1); color: var(--ink-muted); }
.lit-card :is(h3, h4) { font-family: var(--font-ui); font-weight: 600; }
/* Inline, so the external-link mark follows the last word of a name that wraps. */
.lit-card :is(h3, h4) a { display: inline; }
.lit-card .lit-subtitle { margin-top: calc(-1 * var(--s-1)); font-family: var(--font-ui); color: var(--ink); }
.lit-start { display: grid; gap: var(--s-1); font-size: var(--step--1); }
.lit-start ul { margin: 0; padding-left: 1.1em; }
.lit-start li { margin: 0; }
.lit-meta { display: grid; justify-items: start; gap: var(--s-2); font-family: var(--font-ui); }
.lit-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
:root[data-lens="theory"] .lit-card[data-aud~="theory"],
:root[data-lens="experiment"] .lit-card[data-aud~="experiment"],
:root[data-lens="engineering"] .lit-card[data-aud~="engineering"] { box-shadow: inset 3px 0 0 var(--lens); }

.queries { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); gap: var(--s-4); }
.query { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-raised); }
.query h3 { font-size: var(--step-1); line-height: 1.3; }
.query p { margin: 0; font-size: var(--step--1); line-height: 1.5; }
.query-string code { display: block; padding: var(--s-3); border-radius: var(--r-1); background: var(--bg-sunken); font-family: var(--font-mono); font-size: var(--step--2); line-height: 1.5; color: var(--ink-muted); overflow-wrap: anywhere; }

.reading-list li { display: grid; gap: 0.15rem; }
.ref-why { color: var(--ink-muted); }


/* A trap note that stands on its own, outside the two-column grid. */
.method-note > .pitfall { margin: 0; font-size: var(--step--1); line-height: 1.6; }
.method-note > .pitfall .label { display: block; margin-bottom: var(--s-2); }
.method-two .plain-list { max-width: none; font-size: var(--step--1); line-height: 1.6; }

/* Failure modes and tips are lists, so they run under both columns rather than beside the aside. */
.brief-grid > .method-two { grid-column: 1 / -1; }
/* A theory frontier's drawing spans the entry, below its first paragraph and the materials beside it: in the text
   column alone its labels came out at 9 px. */
.brief-grid > .brief-fig { grid-column: 1 / -1; }
.brief-fig .gfig { margin: 0; }
.brief-grid > .method-two h4 { margin: 0 0 var(--s-2); }

/* Organisations and instruments are named in words, not in code. */
.cards-prose { grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); }
.cards-prose .code-card :is(h3, h4) { font-family: var(--font-body); font-weight: 600; }
/* A readiness band heading, and the note under it. */
.readiness-band { margin: var(--s-7) 0 var(--s-2); font-family: var(--font-display); font-weight: 560; font-size: var(--step-1); }
.readiness-note { max-width: var(--measure); margin: 0 0 var(--s-5); font-size: var(--step--1); color: var(--ink-muted); }
.trl-line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3) var(--s-5); }

/* The same box as an aside note, used on its own under a heading. */
.side-note.standalone { max-width: var(--measure); margin: var(--s-5) 0; font-size: var(--step--1); line-height: 1.6; }
.side-note.standalone .label { display: block; margin-bottom: var(--s-2); }

.card-note { margin: var(--s-1) 0 0; padding-top: var(--s-3); border-top: 1px solid var(--line); font-size: var(--step--2); line-height: 1.5; color: var(--ink-faint); }

.rule-list { padding-left: 0; list-style: none; }
.rule-list li { display: grid; gap: 0.2rem; }
.rule-list .rule { font-size: var(--step-0); font-weight: 600; }

@media (max-width: 1100px) {
  .brief-grid { grid-template-columns: minmax(0, 1fr); }
  /* One column: the materials and references follow the whole entry, as before. */
  .brief-side { order: 1; max-width: var(--measure); }
}
@media (max-width: 900px) {
  .brief { scroll-margin-top: var(--s-4); }
}
@media (max-width: 760px) {
  .method-two { grid-template-columns: minmax(0, 1fr); }
}

/* In a reading list the title itself is the link; only bare DOI links stay monospaced. */
.refs .ref-title a { font-family: inherit; font-size: inherit; }

/* --------------------------------------------------------------------------
   Ruled entries
   Cards that only group text sit on the page between hairlines, like the
   entries of an index, instead of in bordered white boxes. Lists that were
   boxed lose the box and keep their row rules. Boxes remain where they mean
   something: the data sheet, the pop-ups, the moiré panel and code blocks.
   -------------------------------------------------------------------------- */

.number, .numbers--all .number, .not-card, .driver, .conf-waiting li, .gloss-card, .code-card, .query {
  padding: var(--s-4) var(--s-3);
  border: 0;
  border-top: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
}
.numbers { gap: 0 var(--s-5); background: none; border: 0; border-radius: 0; overflow: visible; }
.gloss-card:target { box-shadow: none; background: var(--lens-quiet); }

.news-month .news-list, .conf-list { padding: 0; border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; background: transparent; }
/* The lens marker hangs just left of the text now that the list has no inner padding. */
.conf::before { left: calc(-1 * var(--s-3)); }

/* Legal notice and privacy pages: one plain column. The footer carries links to both. */
.legal { padding-block: var(--s-7) var(--s-8); }
.footer-grid .footer-legal { grid-column: 1 / -1; max-width: none; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: var(--s-2) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--line); font-family: var(--font-ui); font-size: var(--step--1); }

/* Site search: a ruled list of results under the page title. */
.site-search { max-width: 36rem; margin-top: var(--s-5); }
.site-search .search { max-width: none; }
.search-status { margin-top: var(--s-3); }
.search-body { padding-block: var(--s-6) var(--s-8); }
.search-idle > * + * { margin-top: var(--s-3); }
.search-tip { margin-bottom: 0; font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-muted); }
.search-tip kbd { padding: 0.1em 0.4em; font: 500 var(--step--2)/1 var(--font-mono); border: 1px solid var(--line-strong); border-radius: var(--r-1); }
@media (hover: none) { .search-tip { display: none; } } /* no keyboard to press / on */
/* The search box that opens over a page (search.js): the field, the best few results, a link to the rest. */
.search-dialog { width: min(40rem, calc(100vw - 2rem)); max-height: min(80vh, 46rem); margin: 9vh auto auto; padding: 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--bg-raised); color: var(--ink); box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 0.25); }
.search-dialog::backdrop { background: rgb(20 18 14 / 0.45); }
.search-dialog-body { max-height: min(80vh, 46rem); padding: var(--s-4) var(--s-5) var(--s-5); overflow-y: auto; }
.search-dialog .site-search { display: flex; align-items: center; gap: var(--s-4); }
.search-dialog .search { max-width: none; background: var(--bg); }
.search-dialog .search-status { margin-top: var(--s-3); }
.search-dialog .results { margin-top: var(--s-3); }
.search-dialog .result { padding-block: var(--s-3); }
.search-dialog .result a { font-size: var(--step-0); }
.search-dialog .result p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-dialog .result:first-child a::after { content: "Enter ↵"; margin-left: var(--s-3); font: 400 var(--step--2)/1 var(--font-ui); color: var(--ink-faint); }
.search-all { margin: 0; padding-top: var(--s-3); border-top: 1px solid var(--line); font-family: var(--font-ui); font-size: var(--step--1); }
.results { max-width: 48rem; margin: 0; padding: 0; list-style: none; }
.result { padding-block: var(--s-4); border-top: 1px solid var(--line); }
.result .label { display: block; margin-bottom: var(--s-1); }
.result a { font-family: var(--font-display); font-weight: 560; font-size: var(--step-1); line-height: 1.3; text-decoration: none; }
.result a:hover { text-decoration: underline; text-decoration-color: var(--lens); }
.result p { max-width: var(--measure); margin: var(--s-1) 0 0; font-size: var(--step--1); line-height: 1.5; color: var(--ink-muted); }
.search-news { max-width: 48rem; margin: 0; padding-top: var(--s-4); border-top: 1px solid var(--line); font-family: var(--font-ui); font-size: var(--step--1); }

/* --------------------------------------------------------------------------
   Course: the level map, the steps and their questions
   -------------------------------------------------------------------------- */

/* What a level leaves you able to do, in the head and at the end of a level, and on each card of the map. */
.head-cta { margin: var(--s-4) 0 0; font: 500 var(--step--1)/1.4 var(--font-ui); }
.course-goal { max-width: var(--measure); margin: var(--s-4) 0 0; font-size: var(--step-0); line-height: 1.5; }
.course-goal .label { display: block; margin-bottom: var(--s-1); }
.course-tally { color: var(--lens); font-weight: 600; }

.course-step-num { margin: 0 0 var(--s-2); }
.course-step .prose .gfig, .course-step .prose .figure { max-width: 48rem; }
.course-more { max-width: var(--measure); margin: var(--s-6) 0 0; }
.course-more ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: var(--s-2) 0 0; padding: 0; list-style: none; font: 500 var(--step--1)/1.4 var(--font-ui); }
.course-more-kind { margin-left: var(--s-2); font-weight: 400; font-size: var(--step--2); color: var(--ink-faint); }

/* Questions. Without JavaScript the options read as a list and each answer opens under "Show the answer"; course.js
   enables the options and keeps the answer closed until one is chosen. Right and wrong are said in words and marked
   with a sign as well as a colour. */
.quiz { max-width: 44rem; margin: var(--s-6) 0 0; padding: var(--s-5); border: 1px solid var(--line); border-left: 3px solid var(--lens); border-radius: var(--r-2); background: var(--bg-raised); }
.quiz-title { display: block; margin: 0 0 var(--s-4); }
.quiz-list { display: grid; gap: var(--s-6); margin: 0; padding: 0; list-style: none; counter-reset: quiz; }
.quiz-q { counter-increment: quiz; }
.quiz-ask { margin: 0 0 var(--s-3); font-weight: 600; line-height: 1.45; }
.quiz-ask::before { content: counter(quiz) ". "; color: var(--ink-faint); }
.quiz-options { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.quiz-option {
  display: flex; align-items: baseline; gap: var(--s-3); width: 100%;
  padding: 0.6rem 0.75rem; border: 1px solid var(--line-strong); border-radius: var(--r-1);
  background: var(--bg); color: var(--ink); font: 400 var(--step--1)/1.45 var(--font-ui); text-align: left;
}
.quiz-option:disabled { cursor: default; }
.quiz.is-live .quiz-option:not(:disabled) { cursor: pointer; }
.quiz.is-live .quiz-option:not(:disabled):hover { border-color: var(--lens); background: var(--lens-quiet); }
.quiz-letter { flex: none; font-weight: 600; color: var(--ink-faint); }
.quiz-option.is-right { border-color: var(--experiment); background: var(--experiment-quiet); }
.quiz-option.is-right .quiz-letter::after { content: " ✓"; color: var(--experiment); }
.quiz-option.is-wrong { border-color: var(--engineering); background: var(--engineering-quiet); }
.quiz-option.is-wrong .quiz-letter::after { content: " ✗"; color: var(--engineering); }
.quiz-verdict { margin: var(--s-3) 0 0; font: 600 var(--step--1)/1.4 var(--font-ui); color: var(--experiment); }
.quiz-verdict.is-wrong { color: var(--engineering); }
.quiz-answer { margin: var(--s-3) 0 0; font-size: var(--step--1); line-height: 1.55; }
.quiz-answer summary { cursor: pointer; font: 500 var(--step--1)/1.4 var(--font-ui); color: var(--lens); }
.quiz-answer p { margin: var(--s-2) 0 0; color: var(--ink-muted); }
.quiz-answer[open] summary { margin-bottom: 0; }
.quiz.is-live .quiz-answer summary { display: none; }
.quiz.is-live .quiz-q:not(.is-answered) .quiz-answer { display: none; }
.quiz.is-live .quiz-answer p { margin-top: var(--s-1); }
.quiz-tally { margin: var(--s-5) 0 0; padding-top: var(--s-3); border-top: 1px solid var(--line); font: 500 var(--step--1)/1.5 var(--font-ui); }
.quiz-tally .link-btn { margin-left: var(--s-2); }

/* A step whose questions are all answered is ticked off in the contents and on the course page. */
.toc a.is-done::after, .course-steps a.is-done::after { content: " ✓"; color: var(--experiment); }
.course-end-status { font: 600 var(--step-0)/1.5 var(--font-ui); color: var(--lens); }

/* The course page: one card per level, numbered down the side. */
.course-wrap .doc-section:first-of-type { padding-top: var(--s-7); }
.course-map { display: grid; gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
.course-level { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.course-level:first-child { padding-top: 0; border-top: 0; }
.course-num { font: 480 var(--step-4)/1 var(--font-display); color: var(--lens); text-align: right; }
.course-level.is-planned .course-num, .course-level.is-planned h3 { color: var(--ink-faint); }
.course-level h3 { margin: var(--s-1) 0 0; font: 560 var(--step-2)/1.2 var(--font-display); }
.course-level h3 a { text-decoration: none; }
.course-level h3 a:hover { text-decoration: underline; text-decoration-color: var(--lens); }
.course-level .course-goal { margin-top: var(--s-2); color: var(--ink-muted); }
.course-steps { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); max-width: 48rem; margin: var(--s-3) 0 0; padding: 0; list-style: none; font: 400 var(--step--1)/1.5 var(--font-ui); color: var(--ink-muted); }
.course-level.is-planned .course-steps li + li::before { content: "· "; margin-left: calc(-1 * var(--s-3)); color: var(--ink-faint); }
.course-level-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-4); }
.course-progress { display: inline-flex; align-items: center; gap: var(--s-3); font: 500 var(--step--1)/1.3 var(--font-ui); color: var(--ink-muted); }
.course-bar { position: relative; width: 8rem; height: 0.4rem; border-radius: 1rem; background: var(--bg-sunken); overflow: hidden; }
.course-bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--experiment); }
.course-reset { margin: var(--s-6) 0 0; font: 400 var(--step--1)/1.5 var(--font-ui); color: var(--ink-faint); }
@media (max-width: 520px) {
  .course-level { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .course-num { text-align: left; font-size: var(--step-3); }
  .quiz { padding: var(--s-4); }
}

/* --------------------------------------------------------------------------
   Print: the content only
   -------------------------------------------------------------------------- */

@media print {
  :root { --bg: #fff; --bg-raised: #fff; --bg-sunken: #fff; }
  /* Navigation, controls, and what dates fast: a material page's recent news and related-material cards. */
  .skip-link, .site-header, .site-footer, .filters, .toc, .to-contents, .group-jump, .gloss-jump, .pager, .crumb-pager, .heading-link, .ref-copy,
  nav[aria-label="Neighbouring terms"], .xtal-controls, .xtal-hint, [data-show-more], .hero-field, .moire-panel, .hero-actions,
  .mat-section#news, #related, .compare-tools, .compare-head .select, .compare-link, .sheet-compare { display: none !important; }
  /* The compared columns stay side by side; their heads need not follow the page. */
  .compare-corner, .compare-head { position: static; }
  .compare-grid { font-size: 0.85em; }
  /* A smaller model fits under its heading instead of leaving most of a page blank. */
  .xtal-svg { max-height: 16rem; }
  .band, .mat-layout { padding-block: var(--s-5); }
  .doc-section { padding-block: var(--s-5); }
  .doc-section::before { display: none; }
  h2, h3 { break-after: avoid; }
  .rchart, .tl { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .tl-tip { display: none; }
  figure, .xtal, .datasheet dl > div, .refs li, .uses li, .mat-card, .news-item, .gloss-card { break-inside: avoid; }
}