/*
 * Interleaf marketing site.
 *
 * An editorial "paper and ink" system built from the app itself: the leaf
 * greens of the icon, the reader's highlight colours, and a book serif for
 * display type. No web fonts are loaded; every face is a system stack.
 *
 * Motion is limited to transform and opacity, plays once, and is removed
 * entirely under prefers-reduced-motion. Scroll reveals only apply once the
 * script has marked the document with `.js-reveal`, so nothing is hidden when
 * JavaScript is unavailable.
 */

:root {
  --paper: #f6f1e7;
  --paper-2: #efe6d3;
  --paper-3: #e6dbc4;
  --card: #fffcf5;
  --ink: #17231c;
  --ink-2: #44544a;
  --ink-3: #5d6b62;
  --rule: #d8ccb2;
  --green: #1d7a3c;
  --green-deep: #0f4a25;
  --leaf: #4caf50;
  --hl-yellow: #fde68a;
  --hl-blue: #bfdbfe;
  --hl-green: #bbf7d0;
  --hl-pink: #fbcfe8;
  --hl-purple: #ddd6fe;
  --focus: #0b57d0;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --radius: 14px;
  --shadow-sm: 0 1px 2px rgb(23 35 28 / 0.08), 0 4px 12px rgb(23 35 28 / 0.06);
  --shadow-lg: 0 2px 6px rgb(23 35 28 / 0.08), 0 24px 60px -12px rgb(23 35 28 / 0.28);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --page: min(1240px, 100% - 2 * var(--gutter));
  --gutter: clamp(18px, 4vw, 48px);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 88px;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgb(76 175 80 / 0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgb(253 230 138 / 0.22), transparent 60%),
    var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--sans);
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--green-deep); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

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

code { font: 0.9em var(--mono); background: rgb(23 35 28 / 0.06); padding: 0.05em 0.35em; border-radius: 4px; }

kbd {
  display: inline-block;
  min-width: 1.7em;
  padding: 0.05em 0.45em;
  font: 600 0.82em/1.5 var(--sans);
  text-align: center;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 6px;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; margin: 0; }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); }
h3 { font-size: 1.3rem; }
p { margin: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 12px; top: 12px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 8px;
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

/* Header ------------------------------------------------------------------ */

/* The sticky header is solid paper rather than a frosted backdrop blur: a
   blur has to re-sample the screenshots beneath it on every scrolled frame,
   and it was the largest measured compositing cost while scrolling. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid rgb(216 204 178 / 0.7);
}

.site-header__inner {
  width: var(--page);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}
.brand__mark { width: 32px; height: 32px; border-radius: 8px; }
.brand__name { font: 600 1.28rem/1 var(--serif); letter-spacing: -0.01em; }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: block;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease;
}
.site-nav a:hover { color: var(--ink); background: rgb(23 35 28 / 0.06); }
.site-nav a[aria-current="true"] { color: var(--green-deep); background: rgb(29 122 60 / 0.10); }

.header-cta {
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  transition: transform 180ms var(--ease-out), background-color 180ms ease;
}
.header-cta:hover { background: var(--green-deep); transform: translateY(-1px); }

@media (max-width: 820px) {
  .site-header__inner { flex-wrap: wrap; gap: 4px 12px; padding-block: 8px; }
  .header-cta { margin-left: auto; }
  .site-nav { order: 3; margin-left: -12px; width: calc(100% + 12px); }
  .site-nav { overflow-x: auto; scrollbar-width: none; }
  .site-nav ul { gap: 0; }
  .site-nav a { padding: 6px 10px; font-size: 0.86rem; white-space: nowrap; }
}

/* Hero -------------------------------------------------------------------- */

.hero {
  width: var(--page);
  margin-inline: auto;
  padding-block: clamp(32px, 5vw, 72px) clamp(40px, 6vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 6vw, 64px);
  align-items: center;
}

@media (min-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgb(255 252 245 / 0.7);
  color: var(--ink-2);
  font-size: 0.88rem;
  font-weight: 500;
}
.eyebrow__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--leaf);
  box-shadow: 0 0 0 4px rgb(76 175 80 / 0.18);
}

.hero__title {
  margin-top: 22px;
  font-size: clamp(3.2rem, 1.6rem + 6vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.28em;
}

/* Each word gets a hand-laid highlighter stroke in one of the app's colours. */
.ink {
  position: relative;
  display: inline-block;
  z-index: 0;
}
.ink::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.06em; right: -0.08em;
  bottom: 0.06em;
  height: 0.42em;
  border-radius: 0.12em 0.2em 0.16em 0.1em;
  transform-origin: left center;
  transform: rotate(-1.2deg);
}
.ink--yellow::before { background: var(--hl-yellow); }
.ink--green::before { background: var(--hl-green); transform: rotate(0.8deg); }
.ink--pink::before { background: var(--hl-pink); transform: rotate(-0.6deg); }

.hero__lede {
  margin-top: 24px;
  max-width: 34em;
  font-size: clamp(1.08rem, 1rem + 0.35vw, 1.24rem);
  color: var(--ink-2);
}

.hero__actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}

.text-link { font-weight: 600; text-decoration: none; }
.text-link span { display: inline-block; transition: transform 200ms var(--ease-out); }
.text-link:hover span { transform: translateX(4px); }

/* The download control. Unwired it is a focusable button marked
   aria-disabled, which reads as unavailable and does nothing; the build
   turns it into a real link once a URL is configured. */
.cta {
  appearance: none;
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-areas: "icon label" "icon meta";
  align-items: center;
  column-gap: 12px;
  padding: 12px 22px 12px 18px;
  border: 1px solid var(--green-deep);
  border-radius: 14px;
  background: linear-gradient(180deg, #23864a, var(--green-deep));
  color: #fff;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.25) inset, 0 10px 24px -10px rgb(15 74 37 / 0.7);
  transition: transform 200ms var(--ease-out), box-shadow 200ms ease, filter 200ms ease;
}
.cta:not(:has(.cta__icon)) { grid-template-columns: auto; grid-template-areas: "label" "meta"; }
.cta__icon { grid-area: icon; width: 22px; height: 22px; }
.cta__label { grid-area: label; font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.cta__meta { grid-area: meta; font-size: 0.82rem; opacity: 0.85; line-height: 1.3; }
a.cta:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgb(255 255 255 / 0.25) inset, 0 16px 30px -12px rgb(15 74 37 / 0.75); }

.cta--quiet {
  background: var(--card);
  color: var(--ink);
  border-color: var(--rule);
  box-shadow: var(--shadow-sm);
}

.cta[aria-disabled="true"] {
  cursor: not-allowed;
  filter: saturate(0.55);
  opacity: 0.78;
  box-shadow: none;
}

.status-note {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  color: var(--ink-3);
  font-size: 0.92rem;
}
.status-note__pill {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--hl-yellow);
  color: #5b4300;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero__platforms {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-2);
  font-size: 0.95rem;
}
.hero__platforms strong { color: var(--ink); font-weight: 600; }
.hero__platforms-icon { flex: none; width: 18px; height: 18px; color: var(--green); }

.hero__stage {
  position: relative;
  padding: 0 0 12% 0;
  isolation: isolate;
}
.hero__shot { margin: 0; }
.hero__shot img {
  border-radius: 12px;
  border: 1px solid rgb(23 35 28 / 0.14);
  box-shadow: var(--shadow-lg);
  background: var(--card);
}
.hero__shot--back {
  width: 78%;
  margin-left: auto;
  transform: rotate(2deg);
  opacity: 0.95;
}
.hero__shot--front {
  position: relative;
  width: 92%;
  margin-top: -9%;
  z-index: 1;
  transform: rotate(-1.2deg);
}
.hero__caption {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  color: var(--ink-3);
  font-size: 0.85rem;
  text-align: center;
}

/* Formats strip ----------------------------------------------------------- */

.formats {
  border-block: 1px solid var(--rule);
  background: rgb(255 252 245 / 0.55);
}
.formats__list {
  width: var(--page);
  margin: 0 auto;
  padding: 18px 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px 24px;
}
.formats__list li { display: flex; flex-direction: column; }
.formats__list strong { font: 600 1.05rem/1.3 var(--serif); }
.formats__list span { color: var(--ink-3); font-size: 0.88rem; }

/* Chapters ---------------------------------------------------------------- */

.chapters { padding-block: clamp(40px, 6vw, 72px) 0; }

.chapter {
  width: var(--page);
  margin: 0 auto;
  padding-block: clamp(48px, 7vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  border-top: 1px solid var(--rule);
}
.chapter:first-child { border-top: 0; }

@media (min-width: 1100px) {
  .chapter { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .chapter--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .chapter--flip .chapter__text { order: 2; }
  .chapter--wide { grid-template-columns: minmax(0, 1fr); }
  .chapter--wide .chapter__text { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-items: end; }
  .chapter--wide .chapter__text > :is(.chapter__num, .chapter__kicker, h2) { grid-column: 1; }
  .chapter--wide .chapter__text > p:not(.chapter__num, .chapter__kicker) { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
  .chapter--wide .chapter__text > .swatches { grid-column: 2; }
}

.chapter__text { position: relative; }
.chapter__text > * + * { margin-top: 16px; }
.chapter__text > p:not(.chapter__num, .chapter__kicker, .fine) { color: var(--ink-2); max-width: 36em; }

.chapter__num {
  font: 600 clamp(3.6rem, 2rem + 5vw, 5.6rem)/0.8 var(--serif);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--rule);
  letter-spacing: -0.04em;
}
.chapter__kicker {
  display: inline-block;
  color: var(--green);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.chapter__text > .chapter__kicker { margin-top: 12px; }

.ticks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 28px; color: var(--ink-2); }
.ticks li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.5em;
  width: 14px; height: 8px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
.ticks--arrow li::before {
  top: 0.55em;
  width: 12px; height: 2px;
  border: 0;
  background: #9a6b00;
  transform: none;
}
.ticks--arrow li::after {
  content: "";
  position: absolute;
  left: 7px; top: calc(0.55em - 3px);
  width: 7px; height: 7px;
  border-top: 2px solid #9a6b00;
  border-right: 2px solid #9a6b00;
  transform: rotate(45deg);
}

.fine { color: var(--ink-3); font-size: 0.9rem; max-width: 40em; }
.fine.center { margin: 24px auto 0; text-align: center; width: var(--page); }

.shot-frame { margin: 0; position: relative; }
.shot-link {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgb(23 35 28 / 0.14);
  background: var(--card);
  box-shadow: var(--shadow-lg);
  transition: transform 320ms var(--ease-out), box-shadow 320ms ease;
}
.shot-link img { transition: transform 600ms var(--ease-out); }
.shot-link:hover,
.shot-link:focus-visible { transform: translateY(-4px); box-shadow: 0 2px 6px rgb(23 35 28 / 0.1), 0 36px 70px -16px rgb(23 35 28 / 0.38); }
.shot-link:hover img { transform: scale(1.012); }
.shot-link:focus-visible { outline-offset: 5px; border-radius: 12px; }
.shot-frame figcaption { margin-top: 12px; color: var(--ink-3); font-size: 0.88rem; }

.sample-badge {
  position: absolute;
  z-index: 2;
  top: -14px; right: 16px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.78rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.reading-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) {
  .reading-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reading-grid__main { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .reading-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto auto; }
  .reading-grid__main { grid-column: 1; grid-row: 1 / span 2; }
}

.swatches { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 0.9rem; color: var(--ink-2); }
.swatches li { display: inline-flex; align-items: center; gap: 8px; }
.swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgb(23 35 28 / 0.25); }
.swatch--paper { background: #faf8f3; }
.swatch--sepia { background: #f4ecd8; }
.swatch--moss { background: #e7eddf; }
.swatch--ocean { background: #e8eef3; }
.swatch--graphite { background: #2f3542; }
.swatch--midnight { background: #000; }

.highlight-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hl { padding: 2px 10px; border-radius: 4px; font: 500 0.95rem/1.6 var(--serif); color: var(--ink); }
.hl--yellow { background: var(--hl-yellow); }
.hl--blue { background: var(--hl-blue); }
.hl--green { background: var(--hl-green); }
.hl--pink { background: var(--hl-pink); }
.hl--purple { background: var(--hl-purple); }

/* Section heads and panels ------------------------------------------------ */

.section-head {
  width: var(--page);
  margin: 0 auto;
  text-align: center;
}
.section-head > * + * { margin-top: 14px; }
.section-head > p:not(.chapter__kicker) { color: var(--ink-2); max-width: 40em; margin-inline: auto; }

.local,
.providers,
.limits { padding-block: clamp(64px, 8vw, 112px); }

.local {
  background: linear-gradient(180deg, transparent, rgb(239 230 211 / 0.8) 18%, rgb(239 230 211 / 0.8) 82%, transparent);
}
.local__grid {
  width: var(--page);
  margin: 40px auto 0;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}
.panel {
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-sm);
}
.panel h3 { display: flex; align-items: center; gap: 12px; }
.panel h3::before {
  content: "";
  width: 12px; height: 12px;
  border-radius: 50%;
  flex: none;
}
.panel--local h3::before { background: var(--leaf); box-shadow: 0 0 0 4px rgb(76 175 80 / 0.2); }
.panel--network h3::before { background: #e0a100; box-shadow: 0 0 0 4px rgb(224 161 0 / 0.2); }

.table-wrap {
  width: var(--page);
  margin: 40px auto 0;
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.matrix { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
.matrix th, .matrix td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--paper-3); }
.matrix tbody tr:last-child > * { border-bottom: 0; }
.matrix thead th { font: 700 0.78rem/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); background: var(--paper); }
.matrix tbody th { font: 600 1.02rem/1.3 var(--serif); }
.matrix tbody tr { transition: background-color 160ms ease; }
.matrix tbody tr:hover { background: rgb(187 247 208 / 0.18); }
.yes, .no { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.yes::before, .no::before { content: ""; width: 10px; height: 10px; border-radius: 50%; }
.yes::before { background: var(--green); }
.no { color: var(--ink-3); }
.no::before { border: 1.5px solid var(--ink-3); width: 7px; height: 7px; }

@media (max-width: 640px) {
  .matrix th, .matrix td { padding: 12px; }
  .matrix thead th:nth-child(2), .matrix td:nth-child(2) { display: none; }
}

.limits__list {
  width: var(--page);
  margin: 40px auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.limits__list li { padding: 24px; border-radius: var(--radius); border: 1px dashed var(--ink-3); }
.limits__list h3 { font-size: 1.18rem; }
.limits__list p { margin-top: 8px; color: var(--ink-2); font-size: 0.95rem; }

/* Download ---------------------------------------------------------------- */

.download { padding-block: clamp(48px, 7vw, 96px); }
.download__card {
  position: relative;
  width: min(820px, 100% - 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px);
  border-radius: 24px;
  text-align: center;
  color: #f1f5ef;
  background:
    radial-gradient(600px 300px at 50% -10%, rgb(76 175 80 / 0.45), transparent 70%),
    linear-gradient(160deg, #173d27, #0c2416);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.download__card > * + * { margin-top: 16px; }
.download__card h2 { color: #fff; }
.download__card p { color: #d3ded6; max-width: 34em; margin-inline: auto; }
.download__icon { width: 96px; height: 96px; margin: 0 auto; filter: drop-shadow(0 12px 24px rgb(0 0 0 / 0.35)); }
.download__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 28px; }
.download .cta { background: #f6f1e7; color: var(--ink); border-color: #f6f1e7; }
.download .cta--quiet { background: transparent; color: #f1f5ef; border-color: rgb(241 245 239 / 0.5); }
.download .status-note { justify-content: center; color: #d3ded6; }
.download .fine { color: #b8c7bd; }
.download :focus-visible { outline-color: #fde68a; }

.linux-builds {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgb(241 245 239 / 0.18);
}
.linux-builds > * + * { margin-top: 12px; }
.linux-builds h3 { color: #fff; font-size: 1.3rem; }
.linux-builds__list {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.linux-builds__list li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  border: 1px solid rgb(241 245 239 / 0.22);
  border-radius: 14px;
  background: rgb(255 255 255 / 0.04);
}
.linux-builds__distros { color: #f1f5ef; font-weight: 600; }
.linux-builds__format {
  align-self: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgb(253 230 138 / 0.16);
  color: #fde68a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
}

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

.site-footer { border-top: 1px solid var(--rule); background: var(--paper-2); }
.site-footer__inner {
  width: var(--page);
  margin: 0 auto;
  padding-block: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  color: var(--ink-3);
  font-size: 0.88rem;
}
.site-footer .brand__mark { width: 28px; height: 28px; }

/* Book attribution: a native disclosure, so it works without the script. */
.credits { flex-basis: 100%; max-width: 60em; }
.credits summary {
  width: fit-content;
  color: var(--ink-2);
  font-weight: 600;
  cursor: pointer;
}
.credits summary:hover { color: var(--ink); }
.credits > * + * { margin-top: 10px; }
.credits__list { margin-block: 10px 0; padding-left: 1.2em; display: grid; gap: 6px; }
.credits cite { font-style: italic; color: var(--ink-2); }
.credits a { color: inherit; overflow-wrap: anywhere; }

/* Lightbox (created by the script) ---------------------------------------- */

.lightbox {
  width: min(1600px, 96vw);
  max-width: none;
  max-height: 94vh;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  overflow: visible;
}
.lightbox::backdrop { background: rgb(12 20 15 / 0.82); }
.lightbox img { width: 100%; max-height: 88vh; object-fit: contain; border-radius: 12px; }
.lightbox__close {
  position: absolute;
  top: -48px; right: 0;
  padding: 8px 14px;
  border: 1px solid rgb(255 255 255 / 0.4);
  border-radius: 999px;
  background: rgb(0 0 0 / 0.4);
  color: #fff;
  font: 600 0.9rem var(--sans);
  cursor: pointer;
}
.lightbox__close:focus-visible { outline-color: #fde68a; }
.lightbox__caption { margin-top: 10px; color: #e8efe9; font-size: 0.9rem; text-align: center; }

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

@media (prefers-reduced-motion: no-preference) {
  /* Entrance: the title words rise, then each gets its highlighter stroke. */
  .hero__title .ink { animation: rise 900ms var(--ease-out) both; }
  .hero__title .ink:nth-child(2) { animation-delay: 110ms; }
  .hero__title .ink:nth-child(3) { animation-delay: 220ms; }
  .hero__title .ink::before { animation: sweep 700ms var(--ease-out) both; animation-delay: 560ms; }
  .hero__title .ink:nth-child(2)::before { animation-delay: 700ms; }
  .hero__title .ink:nth-child(3)::before { animation-delay: 840ms; }
  .eyebrow, .hero__lede, .hero__actions, .hero__copy .status-note, .hero__platforms { animation: rise 800ms var(--ease-out) both; }
  .hero__lede { animation-delay: 260ms; }
  .hero__actions { animation-delay: 360ms; }
  .hero__copy .status-note { animation-delay: 420ms; }
  .hero__platforms { animation-delay: 480ms; }
  .hero__shot--back { animation: settle-back 1200ms var(--ease-out) 200ms both; }
  .hero__shot--front { animation: settle-front 1200ms var(--ease-out) 340ms both; }
  .hero__caption { animation: fade 800ms ease 1100ms both; }
  .eyebrow__dot { animation: pulse 2.8s ease-in-out 1.4s 3; }

  /* Scroll reveal, only once the script has confirmed it can undo it. Short
     and small, so content is settled by the time the reader looks at it and
     few frames of the scroll carry a running transition. */
  .js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 360ms ease, transform 480ms var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .js-reveal [data-reveal].is-revealed { opacity: 1; transform: none; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* scaleX composes with each stroke's own slight tilt. */
@keyframes sweep {
  from { transform: scaleX(0) rotate(-1deg); }
  to { transform: scaleX(1) rotate(-1deg); }
}
@keyframes settle-back {
  from { opacity: 0; transform: translate(6%, 8%) rotate(6deg); }
  to { opacity: 0.95; transform: rotate(2deg); }
}
@keyframes settle-front {
  from { opacity: 0; transform: translateY(14%) rotate(-5deg) scale(0.96); }
  to { opacity: 1; transform: rotate(-1.2deg); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.35); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .shot-link:hover,
  .shot-link:focus-visible,
  .shot-link:hover img,
  a.cta:hover,
  .header-cta:hover { transform: none; }
}

@media (forced-colors: active) {
  .cta, .header-cta, .panel, .shot-link { border: 1px solid CanvasText; }
  .ink::before, .hl { forced-color-adjust: none; }
}

@media print {
  .site-header, .hero__stage, .download__buttons { display: none; }
  body { background: #fff; }
}