/* The public teaser at www.apres-la-chute.org (#611). Values come from site/DESIGN.md through tokens.css: the white
   surface, grey panels separated by space, Roboto Serif for the title and the figures, the system sans for text. */
@font-face {
  font-family: "Roboto Serif";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-display: swap;
  src: url(/fonts/roboto-serif.woff2) format("woff2");
}
*, *::before, *::after { box-sizing: border-box; }
:root { --measure: 740px; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--c-surface); color: var(--c-ink);
  font-family: var(--f-body-md-family); font-size: var(--f-body-md-size); line-height: var(--f-body-md-lh);
}
a { color: var(--c-primary); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--c-primary-mid); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
.muted { color: var(--c-muted); }

.top, main, .foot { width: min(100% - 2 * var(--s-gutter), 1040px); margin-inline: auto; }
/* The header: glass over the page, as the site's functional layer (DESIGN.md → Navigation). */
.glass-bar { position: sticky; top: 0; z-index: 10; }
.glass-bar::before {
  content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: var(--c-glass-strong);
  border-bottom: 1px solid var(--c-line); box-shadow: inset 0 1px 0 var(--c-glass-edge);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
}
.top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-md); min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--c-ink); text-decoration: none; }
.brand-mark { width: auto; height: 36px; flex: none; }
.bm-road { fill: var(--c-surface); }
.bm-main { fill: var(--c-primary); }
.bm-mid { fill: var(--c-primary-mid); }
.brand-name {
  font-family: var(--f-brand-family); font-size: var(--f-brand-size); font-weight: var(--f-brand-weight);
  line-height: var(--f-brand-lh); letter-spacing: var(--f-brand-tracking); font-stretch: 85%; white-space: nowrap;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 20px;
  border-radius: var(--r-full); background: var(--c-surface); color: var(--c-ink); text-decoration: none;
  box-shadow: 0 1px 2px rgb(0 57 51 / .06), 0 0 0 1px var(--c-line); font-weight: 500; line-height: 1.2;
}
.btn:hover { background: var(--c-panel-raised); }
.btn-primary { background: var(--c-primary); color: var(--c-on-primary); box-shadow: none; }
.btn-primary:hover { background: color-mix(in srgb, var(--c-primary) 88%, var(--c-ink)); }
.btn-small { min-height: 40px; padding: 8px 16px; font-size: var(--f-label-size); }

main { display: grid; gap: calc(var(--s-3xl) * 1.75); padding: var(--s-3xl) 0 calc(var(--s-3xl) * 1.5); }
section { display: grid; gap: var(--s-lg); }
h2 {
  font-family: var(--f-h2-family); font-size: var(--f-h2-size); font-weight: var(--f-h2-weight);
  line-height: var(--f-h2-lh); letter-spacing: var(--f-h2-tracking); font-stretch: 90%;
}
.section-lead { max-width: 68ch; color: var(--c-muted); }
/* The lead and the method note share one measure. */
.lead, .method { max-width: var(--measure); }
.method { color: var(--c-muted); }

/* The opening: the thesis at the page-title size, as on the site's homepage. */
.opening { gap: var(--s-xl); max-width: 860px; padding-top: var(--s-xl); }
h1 {
  font-family: var(--f-thesis-family); font-size: var(--f-thesis-size); font-weight: var(--f-thesis-weight);
  line-height: var(--f-thesis-lh); letter-spacing: var(--f-thesis-tracking); font-stretch: 85%; text-wrap: balance;
}
.lead { font-size: 19px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-sm); margin-top: var(--s-sm); }

/* Glass: the homepage figure cards (site.css, "Homepage figures"), for the facts. The edge is the affordance; a light band crosses it on hover only. */
.glass {
  --fig-edge: color-mix(in srgb, var(--c-primary-mid) 18%, transparent);
  --fig-highlight: rgb(255 255 255 / .95);
  --fig-drop: 0 18px 38px -24px rgb(0 57 51 / .42);
  --fig-drop-hover: 0 24px 46px -22px rgb(0 57 51 / .5);
  position: relative;
  border: 0;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgb(255 255 255 / .94), color-mix(in srgb, var(--c-primary-soft) 30%, transparent) 56%, rgb(255 255 255 / .88));
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
          backdrop-filter: blur(22px) saturate(1.8);
  box-shadow: inset 0 0 0 1px var(--fig-edge), inset 0 1px 0 var(--fig-highlight), var(--fig-drop);
  transition: transform .16s ease-out, box-shadow .16s ease-out;
}
.glass::before,
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.glass::before { background: linear-gradient(135deg, var(--c-primary), var(--c-primary-mid) 42%, var(--c-primary-soft-strong) 66%, var(--c-primary-mid) 84%, var(--c-primary)); }
.glass::after {
  opacity: 0;
  background: linear-gradient(100deg, transparent 0 40%, #FFFFFF 47%, #F2FFFC 50%, #FFFFFF 53%, transparent 60% 100%);
  background-size: 240% 100%; background-position: 200% 50%;
}
@media (hover: hover) {
  .glass:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-primary-mid) 24%, transparent), inset 0 1px 0 rgb(255 255 255 / .98), var(--fig-drop-hover); }
  .glass:hover::after { opacity: 1; animation: glass-sweep 1.1s ease-out; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .glass {
    --fig-edge: color-mix(in srgb, var(--c-primary) 20%, transparent);
    --fig-highlight: rgb(255 255 255 / .08);
    --fig-drop: 0 18px 38px -24px rgb(0 0 0 / .75);
    --fig-drop-hover: 0 24px 46px -22px rgb(0 0 0 / .85);
    background: linear-gradient(135deg, rgb(255 255 255 / .07), color-mix(in srgb, var(--c-primary-soft) 70%, transparent) 56%, rgb(255 255 255 / .04)), var(--c-panel);
  }
}
:root[data-theme="dark"] .glass {
  --fig-edge: color-mix(in srgb, var(--c-primary) 20%, transparent);
  --fig-highlight: rgb(255 255 255 / .08);
  --fig-drop: 0 18px 38px -24px rgb(0 0 0 / .75);
  --fig-drop-hover: 0 24px 46px -22px rgb(0 0 0 / .85);
  background: linear-gradient(135deg, rgb(255 255 255 / .07), color-mix(in srgb, var(--c-primary-soft) 70%, transparent) 56%, rgb(255 255 255 / .04)), var(--c-panel);
}
@keyframes glass-sweep { from { background-position: 200% 50%; } to { background-position: -100% 50%; } }
/* Facts: a carousel of glass cards (DESIGN.md → Carousel): three on wide screens, two on tablets, one with the next
   peeking in on phones. The figure in Roboto Serif with tabular figures, the claim in ink, the counts in muted. */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-md); }
.carousel-nav { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-full); background: var(--c-panel-raised); }
.carousel-nav[hidden] { display: none; }
.carousel-nav .btn-icon {
  display: grid; place-items: center; min-width: 36px; min-height: 36px; padding: 0; border: 0; border-radius: var(--r-full);
  background: var(--c-control-selected); color: var(--c-ink); box-shadow: 0 1px 2px rgb(0 57 51 / .08); cursor: pointer;
}
.carousel-nav .btn-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.carousel-nav .btn-icon:disabled { opacity: .35; box-shadow: none; cursor: default; }
.carousel-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--s-lg)) / 3); gap: var(--s-lg);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  /* Room for the glass shadow and the hover lift, and lg below the cards for an overlay scrollbar. */
  margin: calc(-1 * var(--s-md)) calc(-1 * var(--s-md)) 0; padding: var(--s-md) var(--s-md) var(--s-xl); scroll-padding-inline: var(--s-md);
  scrollbar-width: thin;
}
.carousel-track:focus-visible { outline-offset: -2px; }
.carousel-track > * { scroll-snap-align: start; min-width: 0; }
.fact { display: grid; align-content: start; gap: var(--s-sm); padding: var(--s-xl); }
.fact-figure {
  color: var(--c-muted); font-family: var(--f-figure-lg-family); font-size: 22px; font-weight: 700;
  font-variant-numeric: tabular-nums; font-stretch: 90%; line-height: 1.1;
}
.mono-figure { color: var(--c-ink); font-size: var(--f-figure-lg-size); font-weight: var(--f-figure-lg-weight); }
.fact h3 { font-size: 17px; font-weight: 600; line-height: 1.4; }
.fact-detail { color: var(--c-muted); font-size: var(--f-body-sm-size); line-height: var(--f-body-sm-lh); font-variant-numeric: tabular-nums; }
.method { margin-top: var(--s-sm); }

.chain { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-lg); margin: 0; padding: 0; list-style: none; }
.chain li { display: grid; gap: var(--s-sm); align-content: start; padding: var(--s-lg); border-radius: var(--r-lg); background: var(--c-panel); }
.step {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-full);
  background: var(--c-primary-soft); color: var(--c-primary); font-weight: 700; font-variant-numeric: tabular-nums;
}

.help { gap: var(--s-lg); padding: var(--s-3xl) var(--s-2xl); border-radius: var(--r-xl); background: var(--c-panel); }
.asks { display: grid; gap: var(--s-sm); margin: 0; padding-left: 20px; max-width: 72ch; }
.mail { font-family: var(--f-h3-family); font-size: var(--f-h3-size); font-weight: var(--f-h3-weight); font-stretch: 95%; overflow-wrap: anywhere; }
.mail .muted { font-family: var(--f-body-md-family); font-size: var(--f-body-md-size); font-weight: 400; }

.foot { display: grid; gap: var(--s-xs); padding: var(--s-2xl) 0 var(--s-3xl); border-top: 1px solid var(--c-line-soft); color: var(--c-muted); font-size: var(--f-body-sm-size); }

@media (max-width: 899px) { .carousel-track { grid-auto-columns: calc((100% - var(--s-lg)) / 2); } }
@media (max-width: 599px) { .carousel-track { grid-auto-columns: 85%; } }
@media (max-width: 860px) {
  .chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .top, main, .foot { width: min(100% - 32px, 1040px); }
  main { gap: var(--s-3xl); padding-top: var(--s-xl); }
  h1 { font-size: 34px; }
  .lead { font-size: 17px; }
  .chain { grid-template-columns: minmax(0, 1fr); }
  .help { padding: var(--s-xl) var(--s-lg); }
  .brand-mark { height: 30px; }
  .brand-name { font-size: 20px; }
  .top .btn-small .muted { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } .glass:hover { transform: none; } }
.chain + .section-lead { margin-top: var(--s-sm); }