/* UMA India community portal. Theme: the Academy signature palette on the portfolio's layout (dark,
   cinematic motorsport): a Carbon ground, Cool Silver type, Motorsport Green as the one strong accent,
   Velocity Mint for live states, Signal Blue for data files and notices, Deep Forest for depth, and the
   Apex Flow gradient where something moves. Type: CS Balenda (Craft Supply Co), UMA's typeface, for the
   large headings only; Montserrat for every other piece of text, because a condensed headline face
   cannot be read small; JetBrains Mono only where a code is typed, so 0 and O or 8 and B are never
   confused. No grain or silver haze over the ground: the background is Carbon itself.
   The fonts and the logo are part of this site, so the page makes no third-party requests. */

@font-face {
  font-family: "CS Balenda";
  src: url("fonts/cs-balenda-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "CS Balenda";
  src: url("fonts/cs-balenda-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("fonts/jost-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Academy signature palette */
  --carbon: #151b16;          /* dark neutral: the ground everything sits on */
  --forest: #1a572a;          /* depth */
  --green: #14c752;           /* primary: Motorsport Green */
  --mint: #00c99a;            /* transition accent: live and good states */
  --blue: #087dce;            /* secondary accent: data files and notices */
  --silver: #c7ccd4;          /* light neutral */
  --apex: linear-gradient(90deg, #151b16 0%, #1a572a 31%, #14c752 60%, #00c99a 83%, #087dce 100%);

  /* Roles, all drawn from the palette */
  --ground: var(--carbon);
  --raised: #1a221c;          /* Carbon lifted, for panels */
  --text: #eef0f3;            /* Cool Silver lifted, for headings and what is typed */
  --text-dim: var(--silver);
  --text-faint: #a3a9b1;      /* Cool Silver lowered, 7.4:1 on Carbon: thin strokes need the extra light */
  --alert: #ff6a5a;           /* outside the palette on purpose: none of its colours reads as a warning */
  --line: rgba(199, 204, 212, 0.1);
  --line-strong: rgba(199, 204, 212, 0.24);
  --grid: rgba(26, 87, 42, 0.5);   /* Deep Forest: the grid adds depth, never a silver haze */
  /* The UMA-over-INDIA lockup, as a shape the page colours. Kept in here because the leak scan refuses
     every image file in the repository, logos included. */
  --logo: url("data:image/png;base64,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");

  --font-display: "CS Balenda", "Arial Narrow", "Montserrat", system-ui, sans-serif;   /* large headings */
  --font-text: "Montserrat", "Jost", "Century Gothic", system-ui, sans-serif;      /* everything else */
  --font-ui: var(--font-text);               /* labels, buttons and small capitals: the same face */
  --font-code: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* A condensed face needs a size up and a little air to read as easily */
  --text-ui-xs: 0.85rem;                     /* labels, eyebrows, file sizes */
  --text-ui-sm: 0.9rem;                      /* buttons */
  --text-base: clamp(1.05rem, 1rem + 0.25vw, 1.15rem);
  --text-lede: clamp(1.15rem, 1.05rem + 0.45vw, 1.35rem);
  --text-small: 0.95rem;                     /* help lines, status lines, table cells */
  /* A condensed face falls apart when its capitals are spread out: small labels keep their letters close */
  --track-wide2: 0.14em;
  --track-wide3: 0.2em;

  --shell: 1340px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(3rem, 2rem + 6vh, 6.5rem);
  --radius-panel: 1rem;
  --radius-field: 0.75rem;

  --duration-fast: 200ms;
  --duration-reveal: 1000ms;
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* overscroll: a hard scroll back to the top of a long document must not trigger pull-to-refresh */
html { -webkit-text-size-adjust: 100%; background: var(--ground); color-scheme: dark; overscroll-behavior-y: contain; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background-color: var(--ground);
  color: var(--text);
  font: 400 var(--text-base)/1.6 var(--font-text);
  font-synthesis: none;            /* CS Balenda has one weight: never fake a bold or a slant */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Deterrent only, as on the portfolio: it stops casual copying, not a determined reader. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

::selection { background: var(--green); color: var(--ground); }
input, button, textarea { font: inherit; color: inherit; }
input, textarea { -webkit-user-select: text; user-select: text; }
p, h1, h2 { margin: 0; }

.shell {
  width: 100%; max-width: var(--shell); margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

/* Engineering grid behind the content, fading out down the page */
main { position: relative; padding-block: var(--section); min-width: 0; }
main::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(60rem 32rem at 12% 0%, rgba(26, 87, 42, 0.3), transparent 70%),
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 100% 100%, 88px 88px, 88px 88px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 78%);
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

/* The "rev bar": a thin Apex Flow line on the top edge that fills while something is being decrypted */
.rev {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 75;
  transform-origin: left;
  transform: scaleX(var(--rev, 0));
  background: var(--apex);
  transition: transform 300ms var(--ease-expo), opacity 400ms linear;
}
.rev.is-idle { opacity: 0; }

.skip {
  position: absolute; left: -999px; top: 0; z-index: 80;
  background: var(--text); color: var(--ground); padding: 0.6rem 1rem;
  font: 500 var(--text-ui-sm) var(--font-ui); letter-spacing: var(--track-wide2); text-transform: uppercase;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
/* Headings take focus only when the page moves it there for screen readers; no ring is needed. */
[tabindex="-1"]:focus { outline: none; }

/* ---------- shared type ---------- */
.display {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.01em;
  font-weight: 400;
  text-wrap: balance;
}
.display-xl { font-size: clamp(3.2rem, 1.2rem + 9vw, 8.75rem); }
.display-lg { font-size: clamp(2.8rem, 1.2rem + 6.5vw, 6.25rem); }

.eyebrow {
  margin-bottom: 1.5rem;
  font: 500 var(--text-ui-xs) var(--font-ui);
  letter-spacing: var(--track-wide3);
  text-transform: uppercase;
  color: var(--text-dim);
}
.eyebrow-signal { color: var(--green); }

.lede { margin-top: 2rem; max-width: 36rem; font-size: var(--text-lede); line-height: 1.65; color: var(--text-dim); }

/* Masked line reveal: each line wipes up from behind its own baseline */
.line-mask { display: block; overflow: hidden; padding-bottom: 0.06em; }
.line-mask > span { display: block; }

/* ---------- masthead ---------- */
.masthead { position: relative; border-bottom: 1px solid var(--line); background: rgba(21, 27, 22, 0.78); backdrop-filter: blur(14px); }
/* The signature gradient along the foot of the header, over its hairline */
.masthead::after {
  content: ""; position: absolute; inset: auto 0 -1px 0; height: 1px; background: var(--apex); opacity: 0.75;
  pointer-events: none;
}
.masthead-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 5rem; }
.brand { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
/* The UMA India lockup: a shape cut from whatever colour the text is, so it follows the theme */
.brand-logo, .foot-logo {
  display: block; aspect-ratio: 412 / 203; background: var(--text);
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
}
.brand-logo { height: 2.4rem; }
.foot-logo { height: 2.1rem; }
@media (forced-colors: active) {
  .brand-logo, .foot-logo { background: CanvasText; forced-color-adjust: none; }
}
.brand-sub, .session, .foot-note {
  font: 500 var(--text-ui-xs) var(--font-ui); letter-spacing: var(--track-wide2); text-transform: uppercase;
}
.brand-sub { color: var(--text-dim); }
.session { display: flex; align-items: center; gap: 1rem; text-align: right; }
.session-who { color: var(--text); }
.session-who::before {
  content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  margin-right: 0.6rem; background: var(--mint); box-shadow: 0 0 0 4px rgba(0, 201, 154, 0.18);
}
.session-until { color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* ---------- pills (the portfolio's button shape) ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  border: 1px solid var(--line-strong); border-radius: 999px; background: transparent;
  padding: 0.65rem 1.25rem; cursor: pointer; white-space: nowrap;
  font: 600 var(--text-ui-sm) var(--font-ui); letter-spacing: var(--track-wide2); text-transform: uppercase;
  color: var(--text);
  transition: border-color var(--duration-fast) var(--ease-expo), background-color var(--duration-fast) var(--ease-expo),
    color var(--duration-fast) var(--ease-expo), transform var(--duration-fast) var(--ease-expo);
}
.pill:hover { border-color: rgba(20, 199, 82, 0.55); background: rgba(20, 199, 82, 0.1); color: var(--green); }
.pill:active { transform: translateY(1px); }
.pill:focus-visible { outline: 2px solid var(--green); }
.pill[aria-pressed="true"] { border-color: var(--mint); color: var(--mint); background: rgba(0, 201, 154, 0.1); }
.pill[disabled] { opacity: 0.55; cursor: progress; }
.pill .arrow { transition: transform var(--duration-fast) var(--ease-expo); }
.pill:hover .arrow { transform: translateX(3px); }
#back-btn:hover .arrow { transform: translateX(-3px); }
.pill-small { padding: 0.4rem 0.85rem; font-size: 0.72rem; }
.pill-primary {
  border-color: var(--green); background: var(--green); color: var(--ground); padding: 0.95rem 1.75rem;
  box-shadow: 0 20px 40px -18px rgba(20, 199, 82, 0.45);
}
/* Into Velocity Mint, the palette's transition accent */
.pill-primary:hover { background: var(--mint); border-color: var(--mint); color: var(--ground); transform: translateY(-2px); }
.pill-primary:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

/* ---------- the sign-in card ---------- */
.panel {
  border: 1px solid var(--line); border-radius: var(--radius-panel); overflow: hidden;
  background: rgba(26, 34, 28, 0.86); backdrop-filter: blur(24px);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.95rem 1.25rem; border-bottom: 1px solid var(--line);
}
.panel-title { font: 600 var(--text-ui-sm) var(--font-ui); letter-spacing: var(--track-wide2); text-transform: uppercase; color: var(--text); }
.panel-note { font: 500 var(--text-ui-xs) var(--font-ui); letter-spacing: var(--track-wide2); text-transform: uppercase; color: var(--green); }
.panel-body { display: grid; gap: 1.6rem; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

/* How it works: three numbered lines under the lede, in the same voice as the section numbers */
.how { list-style: none; margin: 2.25rem 0 0; padding: 0; max-width: 36rem; display: grid; gap: 1rem; }
.how li {
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: baseline;
  color: var(--text-dim); font-size: var(--text-base); line-height: 1.55;
}
.how-num { color: var(--green); font: 600 var(--text-ui-xs) var(--font-ui); letter-spacing: var(--track-wide3); }

/* ---------- gate ---------- */
.gate {
  display: grid; align-items: start; gap: clamp(2.5rem, 1rem + 5vw, 6rem);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}
.field { display: grid; gap: 0.6rem; }
label {
  font: 500 var(--text-ui-xs) var(--font-ui); letter-spacing: var(--track-wide2); text-transform: uppercase;
  color: var(--text-dim);
}
.field-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 1.9rem; }
input[type="text"], input[type="email"], textarea {
  width: 100%; padding: 0.9rem 1rem; border: 1px solid rgba(199, 204, 212, 0.45); border-radius: var(--radius-field);
  background: var(--ground); color: var(--text); caret-color: var(--green);
  font: 500 1.02rem var(--font-code); letter-spacing: 0.12em; text-transform: uppercase;
  transition: border-color var(--duration-fast) var(--ease-expo), box-shadow var(--duration-fast) var(--ease-expo);
}
input::placeholder { color: rgba(142, 149, 158, 0.9); }
input:hover, textarea:hover { border-color: rgba(199, 204, 212, 0.7); }
input:focus-visible, textarea:focus-visible { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(20, 199, 82, 0.22); }
textarea { display: block; resize: none; font-size: 0.9rem; letter-spacing: 0.06em; line-height: 1.7; color: var(--text-dim); }
/* An address is not a code: it is typed in the page's own face, as written */
input[type="email"] { font: 400 1.05rem var(--font-text); letter-spacing: 0; text-transform: none; }
input[aria-invalid="true"] { border-color: var(--alert); box-shadow: 0 0 0 3px rgba(255, 106, 90, 0.2); }
.help { font-size: var(--text-small); line-height: 1.5; color: var(--text-faint); }
.help.is-error { color: var(--alert); }
.notice { margin: 0 0 1.25rem; padding-left: 1rem; border-left: 2px solid var(--blue); color: var(--text); }
.gate-form .pill-primary { justify-self: start; }
.fresh { display: grid; gap: 1.6rem; }
/* The browser is signed in already: one press, and a way out for somebody else at the same keyboard */
.known { display: grid; gap: 1.4rem; }
.known-text { font-size: var(--text-lede); line-height: 1.5; color: var(--text-dim); }
.known-text strong { color: var(--text); font-weight: 600; }
.known-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; }

.status { min-height: 1.6em; font: 400 var(--text-small)/1.6 var(--font-text); color: var(--text-dim); }
.status.is-error { color: var(--alert); }

/* ---------- closed ---------- */
.closed { max-width: 52rem; padding-left: clamp(1.25rem, 0.5rem + 2vw, 2.5rem); border-left: 2px solid var(--green); }
#view-loading { border-left-color: var(--line-strong); }
#view-loading .eyebrow { margin-bottom: 0; }
#view-loading .lede { margin-top: 0.75rem; }

/* ---------- library ---------- */
.library-head { margin-bottom: clamp(3rem, 2rem + 4vw, 5rem); }
.module { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.module:first-child { margin-top: 0; }
.module-head { display: flex; align-items: baseline; gap: 1.25rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line-strong); }
.module-num { color: var(--green); font: 600 var(--text-ui-xs) var(--font-ui); letter-spacing: var(--track-wide3); white-space: nowrap; }
.module-title { font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.4rem); }
.items { list-style: none; margin: 0; padding: 0; }
.item { border-bottom: 1px solid var(--line); }
.item-btn {
  position: relative; width: 100%; display: grid; align-items: center; gap: 1.25rem;
  grid-template-columns: 6.25rem minmax(0, 1fr) auto 1.25rem;
  padding: 1.15rem 0.75rem 1.15rem 1rem; border: 0; background: transparent; text-align: left; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-expo);
}
.item-btn::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 2px;
  background: linear-gradient(to top, var(--forest), var(--green) 55%, var(--mint));
  transform: scaleY(0); transform-origin: bottom; transition: transform 300ms var(--ease-expo);
}
.item-btn:hover, .item-btn:focus-visible { background: rgba(26, 87, 42, 0.22); }
.item-btn:hover::before, .item-btn:focus-visible::before { transform: scaleY(1); }
.item-btn:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.item-btn[aria-busy="true"] { cursor: progress; }
.item-btn[aria-busy="true"] .item-meta { color: var(--mint); }
.item-meta.is-error { color: var(--alert); }
.item-kind {
  justify-self: start; padding: 0.25rem 0.65rem; border: 1px solid var(--line-strong); border-radius: 999px;
  font: 600 0.72rem var(--font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim);
  white-space: nowrap;
}
.item-btn[data-mode="save"] .item-kind { border-color: rgba(8, 125, 206, 0.75); background: rgba(8, 125, 206, 0.16); color: var(--text); }
.item-name { font-size: 1.05rem; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.item-meta { font: 500 var(--text-ui-xs) var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.item-go { color: var(--text-faint); transition: transform var(--duration-fast) var(--ease-expo), color var(--duration-fast) var(--ease-expo); }
.item-btn:hover .item-go, .item-btn:focus-visible .item-go { color: var(--green); transform: translate(2px, -2px); }
.item-btn[data-mode="save"]:hover .item-go, .item-btn[data-mode="save"]:focus-visible .item-go { transform: translateY(3px); }
.empty { padding: 1.25rem 0; color: var(--text-dim); }

/* ---------- activity (admins) ---------- */
.activity-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; margin-top: 2rem; }
.activity-tools label { margin-left: 0.6rem; }
select {
  padding: 0.6rem 2rem 0.6rem 0.9rem; border: 1px solid rgba(199, 204, 212, 0.45); border-radius: 999px;
  background: var(--ground); color: var(--text); font: 400 var(--text-small) var(--font-text);
}
.activity-table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: var(--text-small); }
.activity-table th {
  padding: 0 0.9rem 0.9rem 0; border-bottom: 1px solid var(--line-strong); text-align: left; color: var(--text-faint);
  font: 500 var(--text-ui-xs) var(--font-ui); letter-spacing: var(--track-wide2); text-transform: uppercase;
}
.activity-table td { padding: 0.8rem 0.9rem 0.8rem 0; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.activity-when, .activity-device { font: 400 var(--text-small) var(--font-text); color: var(--text-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.activity-table .is-signal td { color: var(--alert); }
#activity-list { overflow-x: auto; }

/* ---------- reader ---------- */
body.reading main { padding-top: 0; }
body.reading main::before { display: none; }
.reader-bar {
  position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.25rem;
  margin-inline: calc(var(--gutter) * -1); padding: 0.9rem var(--gutter);
  background: rgba(26, 34, 28, 0.86); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line);
}
.reader-bar h1 { font: 600 1.05rem/1.35 var(--font-text); letter-spacing: 0; overflow-wrap: anywhere; }
.reader-count { font: 500 var(--text-ui-xs) var(--font-ui); letter-spacing: var(--track-wide2); text-transform: uppercase; color: var(--text-faint); white-space: nowrap; }
.reader .status { padding-top: 1.25rem; }
.pages { padding: 0.5rem 0 3rem; }
.viewer { display: grid; gap: 1.25rem; justify-items: center; }
.page {
  display: block; width: 100%; max-width: 1100px; height: auto; background: var(--carbon);
  border-radius: 4px; box-shadow: 0 30px 60px -30px #000; pointer-events: none;
}
.media-wrap { position: relative; width: 100%; max-width: 1100px; }
.media { display: block; width: 100%; max-height: 80vh; background: #000; border-radius: 4px; }
.media-mark {
  position: absolute; left: 0.9rem; top: 0.8rem; pointer-events: none; color: rgba(199, 204, 212, 0.6);
  font: 500 var(--text-ui-xs) var(--font-ui); letter-spacing: var(--track-wide2); text-transform: uppercase;
  text-shadow: 0 0 8px #000;
}

/* ---------- capture shield ----------
   No transition on purpose: a fade would leave the material half visible while a screenshot is taken.
   The material is hidden as well as covered, so removing the cover alone reveals nothing. */
.shield {
  position: fixed; inset: 0; z-index: 90; display: grid; align-content: center;
  padding: var(--gutter); background: var(--ground);
}
.shield-body { max-width: 46rem; margin-inline: auto; padding-left: clamp(1.25rem, 0.5rem + 2vw, 2.5rem); border-left: 2px solid var(--blue); }
.shield .pill-primary { margin-top: 2rem; }
.shield .status { margin-top: 1.25rem; }
body.shielded #pages, body.shielded #library-list, body.shielded #activity-list,
body.shielded .reader-bar h1 { visibility: hidden; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); background: var(--ground); padding-block: 2.25rem calc(2.25rem + env(safe-area-inset-bottom)); }
.foot-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.foot-note { margin-top: 0.4rem; color: var(--text-faint); line-height: 1.9; }
.foot-right { text-align: right; }
.noscript { padding: 2rem var(--gutter); color: var(--alert); }
.print-block { display: none; }

/* ---------- motion ---------- */
@keyframes line-up { from { transform: translateY(120%); } to { transform: translateY(0); } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: no-preference) {
  .line-mask > span { animation: line-up var(--duration-reveal) var(--ease-expo) both; }
  .line-mask:nth-child(2) > span { animation-delay: 90ms; }
  .line-mask:nth-child(3) > span { animation-delay: 180ms; }
  section:not([hidden]) > .gate-lead .lede,
  section:not([hidden]) > .gate-lead .how,
  section:not([hidden]) > .panel,
  section:not([hidden]) > .display,
  section:not([hidden]) > .lede,
  .library-head > *,
  .module { animation: rise 900ms var(--ease-expo) both; }
  section:not([hidden]) > .panel { animation-delay: 160ms; }
  .module:nth-child(2) { animation-delay: 80ms; }
  .module:nth-child(n + 3) { animation-delay: 160ms; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* The cover must never animate in or out, whatever else on the page does. */
.shield, .shield * { animation: none !important; transition: none !important; }

/* ---------- small screens ---------- */
@media (max-width: 860px) {
  .gate { grid-template-columns: 1fr; align-items: start; }
  input[type="text"] { letter-spacing: 0.06em; padding-inline: 0.85rem; }
  .masthead-row { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.6rem; padding-block: 1rem; }
  .session { width: 100%; justify-content: space-between; text-align: left; flex-wrap: wrap; }
  .item-btn { grid-template-columns: minmax(0, 1fr) 1.25rem; row-gap: 0.5rem; padding-left: 0.85rem; }
  .item-kind { grid-row: 1; grid-column: 1; }
  .item-name { grid-row: 2; grid-column: 1; }
  .item-meta { grid-row: 3; grid-column: 1; }
  .item-go { grid-row: 2; grid-column: 2; }
  .reader-bar { grid-template-columns: auto 1fr; }
  .reader-bar h1 { grid-column: 1 / -1; grid-row: 2; }
  .reader-count { justify-self: end; }
  .foot-right { text-align: left; }
}

/* Printing is a deterrent only: the pages are replaced by a notice. */
@media print {
  body > *:not(.print-block) { display: none !important; }
  .print-block { display: block; padding: 3rem; font: 600 1.2rem var(--font-text); color: #000; background: #fff; }
}