/* loupfreres.com — one stylesheet.
   Every color, gradient and text effect here is lifted from the app
   (lib/appearance.dart, lib/widgets.dart, library_chrome.dart) so the page
   reads as the same object as the software. Light Academia skin; the dark
   marble band is the app's Dark Academia used as an accent. */

@font-face {
  font-family: 'IM Fell English';
  src: url('fonts/IMFellEnglish-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IM Fell English';
  src: url('fonts/IMFellEnglish-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --parchment: #F4F1EA;
  --sand: #E2D9C8;
  --cream: #E8E0CE;
  --sepia: #3E362E;
  --faded: #8B7E70;
  --ivy: #6B7A65;
  --aged-gold: #B89972;
  --swamp: #252E23;
  --gold-ink: #7A5A1E;
  --gold: #C9A24B;
  --terracotta: #B5623F;
  --ground-light: #F3ECDD;
  --ground-paper: #D3B57F;
  --field: #FBF7EE;
  --ground-dark: #141210;
  --ink-light: #F2F0EA;
  --ink-dark: #1A1712;

  --bevel: linear-gradient(to bottom, #C49A52 0%, #FDE49C 48%, #543815 52%, #A67C46 100%);
  --bevel-diag: linear-gradient(to bottom left, #FDE49C 0%, #C49A52 48%, #543815 52%, #A67C46 100%);
  --metal: linear-gradient(135deg, #FFFBE6 0%, #FFD571 35%, #C49A40 70%, #8B6B28 100%);
  --halo-dark: 0 1px 2px rgba(0, 0, 0, .55), 0 0 4px rgba(0, 0, 0, .25);
  --halo-light: 0 1px 2px rgba(255, 255, 255, .6);

  --wood-tile: 2048px;
  --wood-img: url('img/wood-2048.webp');
}

@media (max-width: 768px) {
  :root { --wood-tile: 1024px; --wood-img: url('img/wood-1024.webp'); }
}

/* Scale with the window the way the Kitchen's LibraryZoom does: 1x at 1440,
   about 1.3x on a 2560 px window, never below 16 px on phones. */
html {
  font-size: clamp(17px, calc(11px + .42vw), 25px);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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

body {
  margin: 0;
  font-family: 'IM Fell English', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--sepia);
  background: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, picture { max-width: 100%; }
img { height: auto; }
a { color: var(--gold-ink); text-underline-offset: .15em; }
a:hover { color: var(--terracotta); }
p { margin: 0 0 1em; }
h1, h2, h3 { line-height: 1.1; margin: 0; }
[hidden] { display: none !important; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--field); color: var(--sepia); padding: .5em 1em;
}
.skip:focus { left: 1rem; top: 1rem; }

.wrap {
  max-width: 88rem;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 56px);
}

/* ---------------------------------------------------------------- metalwork */

.rule {
  height: 5px;
  background: var(--bevel);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  position: relative;
  z-index: 2;
}
.rule--thin { height: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }

/* AgedBrassText: stroke + contact shadow underneath, the metal face on top.
   The face is a pseudo-element copy of the text (data-text), clipped to the
   glyphs, so it needs the same font and width as the element under it. */
.brass {
  position: relative;
  display: inline-block;
  font-style: italic;
  font-weight: 800;
  letter-spacing: .5px;
  color: transparent;
  -webkit-text-stroke: .12em rgba(36, 24, 14, .5);
  text-shadow: .025em .075em .075em rgba(0, 0, 0, .7);
  padding-right: .15em;
  text-decoration: none;
}
.brass::after {
  content: attr(data-text);
  position: absolute;
  /* Extend past the box so descenders and italic overhangs get the face too. */
  inset: -.3em 0 -.35em -.1em;
  padding: .3em .15em 0 .1em;
  color: transparent;
  -webkit-text-stroke: 0;
  text-shadow: none;
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .brass { color: #E1C16E; -webkit-text-stroke: 0; }
  .brass::after { content: none; }
}

/* GoldPill: a 2 px bevel ring around a near-black pill with a brass label. */
.pill {
  display: inline-block;
  padding: 2px;
  border-radius: 30px;
  background: var(--bevel);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .45);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.pill:hover { transform: translateY(-1px); box-shadow: 0 4px 9px rgba(0, 0, 0, .45); }
.pill:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.pill__in {
  display: flex;
  align-items: center;
  gap: .45em;
  border-radius: 28px;
  background: rgba(26, 23, 18, .94);
  padding: .5em 1.15em .55em 1em;
  font-size: 1.05rem;
  line-height: 1.2;
  white-space: nowrap;
}
.pill--big .pill__in { font-size: 1.3rem; padding: .55em 1.4em .6em 1.2em; }
.pill .brass { font-size: 1em; }
.ico {
  width: 1.2em;
  height: 1.2em;
  flex: 0 0 auto;
  fill: none;
  stroke: url(#goldFill);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--fill { fill: url(#goldFill); stroke: none; }

/* GoldBeveledIcon: a 2.5 px bevel ring, transparent center, gold glyph. */
.ring {
  position: relative;
  width: 2.625rem;
  height: 2.625rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  filter: drop-shadow(1.5px 2.5px 3px rgba(0, 0, 0, .65));
}
.ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 2.5px;
  background: var(--bevel-diag);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.ring svg {
  width: 1.45rem;
  height: 1.45rem;
  fill: none;
  stroke: url(#goldFill);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Stamped (debossed) text, the app's "pressed into paper" look. */
.stamped {
  color: rgba(25, 23, 20, .5);
  text-shadow: 0 .7px 1px rgba(255, 255, 255, .35), 0 -.9px 1px rgba(0, 0, 0, .3);
}

/* ---------------------------------------------------------------- strips */

/* The app bar and rail: dark wood, tinted to the app's mahogany. One 2048 px
   tile (1024 on phones) is wider than any strip it paints, so it never repeats
   on screen. */
.strip {
  position: relative;
  color: var(--ink-light);
  background-color: #3A1F10;
  background-image: linear-gradient(rgba(140, 52, 18, .55), rgba(140, 52, 18, .55)), var(--wood-img);
  background-size: auto, var(--wood-tile) auto;
  background-position: center, center top;
  background-blend-mode: multiply, normal;
}
.strip--top { box-shadow: inset 0 -12px 18px -14px rgba(0, 0, 0, .7); }
.strip--bottom { box-shadow: inset 0 12px 18px -14px rgba(0, 0, 0, .7); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1.5rem;
  flex-wrap: wrap;
  min-height: 4.4rem;
  padding-block: .7rem;
}
.wordmark { font-size: 1.5rem; }
.nav nav { display: flex; gap: .2rem 1.5rem; flex-wrap: wrap; }
.nav nav a, .foot a {
  color: var(--ink-light);
  text-decoration: none;
  font-style: italic;
  opacity: .88;
  text-shadow: var(--halo-dark);
}
.nav nav a:hover, .foot a:hover { opacity: 1; color: #FDE49C; text-decoration: underline; }

.foot {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.6rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.1rem;
  font-size: .95rem;
}
.foot__brand { margin: 0; opacity: .8; text-shadow: var(--halo-dark); }
.foot nav { display: flex; gap: .2rem 1.2rem; flex-wrap: wrap; }

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #EBD9A9;
}
.hero__sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
}
.hero__sky img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hero__body {
  display: grid;
  gap: 1.3rem;
  justify-items: center;
  text-align: center;
  padding-block: clamp(2.4rem, 5vw, 4.5rem) clamp(2.2rem, 5vw, 4rem);
}
.eyebrow {
  margin: 0;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(62, 54, 46, .78);
  text-shadow: var(--halo-light);
}
.hero h1 {
  font-size: clamp(2.3rem, 5.6vw, 4.8rem);
  line-height: 1.05;
  max-width: 14ch;
}
.lede {
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  font-style: italic;
  line-height: 1.35;
  max-width: 36ch;
  margin: 0;
  text-shadow: var(--halo-light);
}
.fine {
  margin: 0;
  font-size: .95rem;
  letter-spacing: .05em;
  color: rgba(62, 54, 46, .75);
  text-shadow: var(--halo-light);
}
.cta { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.cta--left { justify-content: flex-start; }

/* TLFI_BIG_Frame as a border-image: the four gold corners are sliced from the
   1200 px frame and drawn at a size relative to the painting, so they never
   stretch unevenly and never exceed their native pixels. */
.painting {
  width: min(100%, 68rem);
  container-type: inline-size;
  margin-block: .6rem;
}
.painting--side { width: min(100%, 30rem); margin-inline: auto; }
.framed {
  position: relative;
  margin: 5.5cqw;
}
.framed img {
  display: block;
  width: 100%;
  border-radius: 2px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .55);
}
.framed::after {
  content: '';
  position: absolute;
  inset: -5.5cqw;
  border: 13cqw solid transparent;
  border-image: url('img/frame.webp') 40% stretch;
  pointer-events: none;
}
.painting--side .framed { margin: 7cqw; }
.painting--side .framed::after { inset: -7cqw; border-width: 17cqw; }

/* ---------------------------------------------------------------- sections */

.section {
  position: relative;
  padding-block: clamp(2.6rem, 6vw, 5rem);
  isolation: isolate;
}
.section-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.6rem;
}
.section-head h1, .section-head h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.section-head .rule--thin { flex: 1; min-width: 3rem; }

/* Parchment. The paper scan is one sheet behind every paper section, never
   tiled. Desktop: fixed to the viewport, so consecutive sections share it with
   no seam. Elsewhere: at its native 2400 px, softened with alpha and faded at
   the top and bottom into a ground of the same tone. */
.paper { background: var(--ground-paper); }
.paper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url(img/paper-2400.webp) center top / cover no-repeat;
}
@media (min-width: 900px) and (hover: hover) {
  .paper::before {
    background: url(img/paper-2400.webp) center / cover no-repeat fixed;
    max-height: none;
    opacity: 1;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Dark Academia band: the app's black marble as one image. On desktop it is
   fixed to the viewport (so it is sized to the window, well inside its native
   3264×1962), elsewhere it is a native-size band fading into the ground. */
.dark {
  background: var(--ground-dark);
  color: var(--ink-light);
}
.dark::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url(img/marble-3264.webp) center top / cover no-repeat;
}
@media (min-width: 900px) and (hover: hover) {
  .dark::before {
    background: url('img/marble-3264.webp') center / cover no-repeat fixed;
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
}
.dark a { color: #E1C16E; }
.dark a:hover { color: #FDE49C; }

.lede-sub {
  font-size: 1.1rem;
  font-style: italic;
  max-width: 60ch;
  margin-bottom: 1.8rem;
  color: rgba(62, 54, 46, .8);
}

/* ---------------------------------------------------------------- about */

.about {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
@media (max-width: 860px) { .about { grid-template-columns: minmax(0, 1fr); } }
.prose p { font-size: 1.06rem; line-height: 1.62; }
.prose--lg p { font-size: 1.14rem; }
.prose h2, .prose h3, .prose h4 { margin: 1.4em 0 .5em; line-height: 1.2; color: var(--sepia); }
.prose h3 { font-size: 1.3rem; font-style: italic; }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 1em; }
.prose li { margin: .25em 0; }
.prose strong { color: var(--ink-dark); }
.prose hr { border: 0; height: 3px; background: var(--bevel); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); margin: 1.6em 0; }
.prose blockquote { margin: 1em 0; padding: .2em 1em; border-left: 3px solid var(--aged-gold); color: rgba(62, 54, 46, .85); }
.prose code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; background: rgba(0, 0, 0, .06); padding: .05em .3em; border-radius: 3px; }
.prose pre { overflow-x: auto; background: rgba(0, 0, 0, .06); padding: .8em 1em; border-radius: 6px; }
.prose table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; }
.prose th, .prose td { border: 1px solid rgba(62, 54, 46, .25); padding: .3em .6em; text-align: left; }
.prose img { border-radius: 4px; }

.dropcap {
  float: left;
  height: 3.9em;
  width: auto;
  margin: .1em .45em 0 0;
}

.ivy {
  position: absolute;
  left: clamp(8px, 1.5vw, 28px);
  bottom: 0;
  width: clamp(110px, 11vw, 240px);
  opacity: .95;
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 860px) { .ivy { width: 96px; left: 6px; } }

/* ---------------------------------------------------------------- chapters */

.chapters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr));
  gap: 1.1rem;
}
.chapter {
  display: grid;
  align-content: start;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .55rem 1rem;
  align-items: start;
  padding: 1.15rem 1.25rem 1.2rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
.chapter .ring { grid-row: 1 / span 2; margin-top: .15rem; }
.chapter__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3em .6em; }
.chapter h3 { font-size: 1.32rem; }
.chapter p {
  grid-column: 2;
  margin: 0;
  line-height: 1.55;
  color: rgba(242, 240, 234, .86);
}
.chip {
  display: inline-block;
  font-size: .68rem;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  font-weight: 600;
  font-style: normal;
  padding: .12em .6em .1em;
  border: 1px solid rgba(201, 162, 75, .55);
  border-radius: 999px;
  color: var(--gold);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- download */

.dl-meta { font-style: italic; color: rgba(62, 54, 46, .78); margin-bottom: 1.1rem; }
.dl-grid { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.dl-note { margin-top: 1rem; font-size: .95rem; color: rgba(62, 54, 46, .75); font-style: italic; }

/* The recessed paper panel with a gold ring: the app's input-bar recipe. */
.recessed {
  margin-top: 1.8rem;
  padding: 2px;
  border-radius: 24px;
  background: var(--bevel);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
}
.recessed__in {
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), var(--field) url('img/paper-2400.webp') center top / cover no-repeat;
  padding: 1.4rem 1.7rem 1.1rem;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .18);
}
.recessed h3 { font-size: 1.4rem; margin-bottom: .8rem; }
.plain {
  list-style: none;
  padding: 0;
  margin: 0 0 1.1rem;
  display: grid;
  gap: .6rem;
}
.plain li { position: relative; padding-left: 1.5em; line-height: 1.5; }
.plain li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .5em;
  width: .7em;
  height: .7em;
  border-radius: 50%;
  background: var(--bevel-diag);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.plain strong { color: var(--ink-dark); }

/* ---------------------------------------------------------------- support */

.support {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .support { grid-template-columns: minmax(0, 1fr); } }

.tracker {
  padding: 1.2rem 1.4rem 1rem;
  border-radius: 12px;
  background: rgba(62, 42, 16, .07);
  border: 1px solid rgba(62, 42, 16, .12);
}
.tracker h3 { font-size: 1.3rem; }
.tracker__caption { margin: .4rem 0 0; font-style: italic; color: rgba(62, 54, 46, .85); }
.track {
  position: relative;
  height: 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .16);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
  margin: 1.5rem .5rem 1.4rem;
}
.track__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 3px;
  background: var(--bevel);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  transition: width .9s ease;
}
.pin {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--sand);
  border: 2px solid rgba(62, 54, 46, .35);
}
.pin.is-hit {
  background: var(--bevel-diag);
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.milestones {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .35rem;
}
.milestones li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .3rem 0;
  border-bottom: 1px solid rgba(62, 54, 46, .12);
  color: rgba(25, 23, 20, .55);
}
.milestones li.is-hit { color: var(--sepia); }
.milestones li.is-hit .milestone__amount { color: var(--gold-ink); font-weight: 600; }
.milestone__amount { white-space: nowrap; font-style: italic; }
.tracker__foot { margin: .8rem 0 0; font-size: .85rem; font-style: italic; color: rgba(62, 54, 46, .65); }

/* ---------------------------------------------------------------- straight talk */

/* The pale paper of the app's message box in Dark Academia
   (paper_darkacademia.webp, 3553×2500 emitted at 2560, one sheet, never tiled), between the
   thin gold rule above and the footer's rule below. */
.talk {
  padding-block: 2.2rem;
  text-align: center;
  background: #CDCBC6 url(img/paper-pale-2560.webp) center / cover no-repeat;
  box-shadow: inset 0 8px 14px -12px rgba(0, 0, 0, .35), inset 0 -8px 14px -12px rgba(0, 0, 0, .35);
}
/* The app's stamped ink keeps its pressed-in shadows, in a walnut dark enough to read on the paper. */
.talk p.stamped { color: rgba(43, 30, 16, .9); text-shadow: 0 1px 1px rgba(255, 255, 255, .4), 0 -.6px .8px rgba(0, 0, 0, .25); }
.talk p {
  max-width: 72ch;
  margin: 0 auto;
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.6;
}

/* ---------------------------------------------------------------- sub pages */

.page { max-width: 56rem; }
.entry {
  margin-bottom: 2.2rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid rgba(62, 54, 46, .18);
}
.entry h2 { font-size: 1.8rem; }
.entry .date { margin: .15em 0 .9em; font-style: italic; color: rgba(62, 54, 46, .7); }
.legal h3 { margin-top: 1.6em; }

/* ---------------------------------------------------------------- memory */

.memory {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 960px) { .memory { grid-template-columns: minmax(0, 1fr); } }
.sky-plate {
  margin: 0;
  width: 100%;
  container-type: inline-size;
  position: sticky;
  top: 1.5rem;
}
@media (max-width: 960px) { .sky-plate { position: static; } }
.framed--sky { margin: 6cqw; }
.framed--sky::after { inset: -6cqw; border-width: 15cqw; }
.framed--sky canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 3px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .55);
  background: #0B0E14;
}
.sky-plate figcaption {
  margin: .3rem 0 0;
  font-size: .9rem;
  font-style: italic;
  text-align: center;
  color: rgba(62, 54, 46, .7);
}

/* ---------------------------------------------------------------- hero card */

/* On wide screens the title card carries the name and its own painted frame;
   the text heading stays for screen readers. Phones get the tall banner in
   the CSS frame and the brass heading above it. */
.painting--hero { width: min(100%, 72rem); }
.painting--hero .framed { margin: 0; }
.painting--hero .framed::after { display: none; }
.painting--hero .framed img { border-radius: 4px; box-shadow: 0 10px 26px rgba(0, 0, 0, .45); }
@media (max-width: 700px) {
  .painting--hero .framed { margin: 5.5cqw; }
  .painting--hero .framed::after { display: block; }
}
@media (min-width: 701px) {
  .hero__title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}


/* ---------------------------------------------------------------- donation tracker */

.support { grid-template-columns: minmax(0, 1fr); max-width: 78ch; }

.page--ledger { max-width: 64rem; }
.ledger__month { margin-bottom: 2.2rem; }
.ledger__month h2 { font-size: 1.5rem; }
.ledger__total { margin: .5rem 0 0; font-size: 1.55rem; font-style: italic; color: var(--ink-dark); }
.ledger__month .tracker__foot { margin-top: .35rem; }
.ledger__month .cta { margin-top: 1rem; }
.ledger__note { margin-top: 2.2rem; font-style: italic; color: rgba(62, 54, 46, .75); max-width: 70ch; }

/* The ladder: a recessed channel with a bright gold vein that rises to this
   month's total. Each goal is a grid row that sizes itself to its own text,
   and the empty row between two goals is `--u` per unit of currency between
   them, so the distance is the money and the cards can never overlap. */
.ladder {
  position: relative;
  margin: .5rem 0 0;
  --vein-x: 4.2rem;
  --u: 1px;
}
@media (max-width: 700px) { .ladder { --vein-x: 4rem; --u: .55px; } }
@media (max-width: 420px) { .ladder { --vein-x: 3.8rem; --u: .4px; } }
.ladder__vein {
  position: absolute;
  left: var(--vein-x);
  top: 0;
  bottom: 0;
  width: 16px;
  transform: translateX(-50%);
  border-radius: 8px;
  background: rgba(20, 14, 8, .55);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .2);
}
.ladder__fill {
  position: absolute;
  left: 3px;
  right: 3px;
  top: 3px;
  height: 0;
  border-radius: 6px;
  background: linear-gradient(to bottom, #C49A40 0%, #FFD571 45%, #FFF3CF 100%);
  box-shadow: 0 0 14px rgba(255, 213, 113, .85), 0 0 3px rgba(255, 255, 255, .7);
  transition: height 1.2s ease;
}
.ladder__now {
  position: absolute;
  left: 0;
  right: calc(100% - var(--vein-x) + .5rem);
  top: 0;
  transform: translateY(-50%);
  text-align: right;
  line-height: 1.1;
}
.ladder__now::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  width: .6rem;
  height: 2px;
  background: #FFD571;
  box-shadow: 0 0 5px rgba(255, 213, 113, .9);
}
.ladder__now-tag { font-size: clamp(.85rem, 3.2vw, 1.1rem); }

.goals { list-style: none; margin: 0; padding: 0; display: grid; }
.goal { position: relative; }
.goal__mark {
  position: absolute;
  left: var(--vein-x);
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: #2A2118;
  box-shadow: 0 0 0 2.5px #A67C46, 0 2px 6px rgba(0, 0, 0, .5);
  display: grid;
  place-items: center;
  z-index: 1;
}
.goal__glyph {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: #2A2118;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}
.goal.is-hit .goal__mark {
  background: linear-gradient(135deg, #FFF3CF, #FFD571 55%, #C49A40);
  box-shadow: 0 0 0 2.5px #FFF1C8, 0 0 16px rgba(255, 213, 113, .85), 0 2px 6px rgba(0, 0, 0, .5);
}
.goal.is-hit .goal__glyph { opacity: 1; }
.goal__body {
  margin-left: calc(var(--vein-x) + 2rem);
  padding: .65rem .95rem .7rem;
  border-radius: 10px;
  background: rgba(251, 247, 238, .8);
  border: 1px solid rgba(62, 42, 16, .2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.goal__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .7rem; }
.goal__amount { font-size: 1.4rem; }
.goal__label { margin: 0; font-size: 1.15rem; font-style: italic; font-weight: 400; line-height: 1.3; color: var(--ink-dark); }
.goal__body p { margin: .25rem 0 0; font-size: .98rem; line-height: 1.45; color: rgba(62, 54, 46, .9); }
.goal__state {
  display: block;
  margin-top: .35rem;
  font-size: .76rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(62, 54, 46, .6);
}
.goal__state:empty { display: none; }
.goal.is-hit .goal__state { color: var(--gold-ink); }

/* Major milestone: a seal on the vein and a dark plate ringed in gold. */
.goal--major .goal__mark {
  width: 3.3rem;
  height: 3.3rem;
  box-shadow: 0 0 0 3px #FDE49C, 0 0 0 6px #543815, 0 3px 10px rgba(0, 0, 0, .6);
}
.goal--major .goal__glyph { width: 1.7rem; height: 1.7rem; opacity: 1; stroke: #FDE49C; }
.goal--major.is-hit .goal__glyph { stroke: #2A2118; fill: #2A2118; }
.goal--major.is-hit .goal__mark { box-shadow: 0 0 0 3px #FFF1C8, 0 0 0 6px #A67C46, 0 0 22px rgba(255, 213, 113, .9), 0 3px 10px rgba(0, 0, 0, .6); }
.goal--major .goal__body {
  background: rgba(26, 23, 18, .93);
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 0 2px #C49A52, 0 0 0 4px #543815, 0 6px 18px rgba(0, 0, 0, .45);
  color: var(--ink-light);
  padding: .95rem 1.15rem 1rem;
}
.goal--major .goal__label { color: var(--ink-light); font-size: 1.3rem; }
.goal--major .goal__body p { color: rgba(242, 240, 234, .88); }
.goal--major .goal__amount { font-size: 1.85rem; }
.goal--major .goal__state { color: rgba(242, 240, 234, .7); }
.goal--major.is-hit .goal__state { color: #FDE49C; }
.chip--major { color: #FDE49C; border-color: rgba(253, 228, 156, .6); background: rgba(253, 228, 156, .08); }


/* ---------------------------------------------------------------- reflection */

.pills { display: grid; gap: 1.2rem; align-content: start; }
.pill-clip { margin: 0; }
.pill-clip video, .pill-clip img {
  display: block;
  width: 100%;
  max-width: 424px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
  background: #15161B;
}
.pill-clip figcaption { margin: .4rem 0 0; font-size: .92rem; font-style: italic; color: rgba(62, 54, 46, .75); }
.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 860px) { .two-col { grid-template-columns: minmax(0, 1fr); } }
.two-col--flip > :first-child { order: 2; }
.aside-note {
  padding: 1rem 1.2rem;
  border-radius: 10px;
  background: rgba(26, 23, 18, .93);
  color: var(--ink-light);
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 0 2px #C49A52, 0 0 0 4px #543815, 0 6px 18px rgba(0, 0, 0, .35);
}
.aside-note h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.aside-note p { margin: 0 0 .8em; line-height: 1.55; color: rgba(242, 240, 234, .9); font-size: 1rem; }
.aside-note p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- clouds */

/* The artist's cloud painting as the ground for the reading sections: one
   sheet fixed to the viewport on desktop, the tall phone painting covering
   each section elsewhere. Paper stays only inside the recessed panels. */
.sky { background: #EBD9A9; }
.sky::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url(art/cloud-mobile.webp) center top / cover no-repeat;
}
@media (min-width: 900px) and (hover: hover) {
  .sky::before { background: url(art/cloud-desktop.webp) center / cover no-repeat fixed; }
}

/* Reading comfort on the clouds: a warm walnut ink, a touch heavier. */
body { color: #3B2A17; }
.prose p, .lede-sub, .dl-meta, .dl-note, .plain li, .ledger__note, .goal__body p, .pill-clip figcaption, .sky-plate figcaption {
  font-weight: 600;
}
.prose p { color: #3B2A17; }
.lede-sub { color: rgba(59, 42, 23, .88); }
.prose strong, .plain strong { color: #2A1B0C; }
.talk p { font-weight: 600; }

/* ---------------------------------------------------------------- video card */

.chapter--wide {
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.1fr);
  gap: .55rem 1.4rem;
  align-items: center;
}
.chapter--wide .ring { grid-row: 1 / span 2; }
.chapter--wide .chapter__head { grid-column: 2; }
.chapter--wide p { grid-column: 2; }
.chapter--wide .yt { grid-column: 3; grid-row: 1 / span 2; }
@media (max-width: 960px) {
  .chapter--wide { grid-template-columns: auto minmax(0, 1fr); }
  .chapter--wide .yt { grid-column: 1 / -1; grid-row: auto; margin-top: .6rem; }
}

/* Click-to-play: a poster and a gold play seal; YouTube loads only on press. */
.yt { margin: 0; }
.yt__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #0B0E14;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .55);
}
.yt__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.yt__play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 45%);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--ink-light);
  font: inherit;
}
.yt__play:focus-visible { outline: 3px solid #FDE49C; outline-offset: -3px; }
.yt__seal {
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  background: rgba(26, 23, 18, .82);
  box-shadow: 0 0 0 3px #FDE49C, 0 0 0 6px #543815, 0 6px 18px rgba(0, 0, 0, .6);
  display: grid;
  place-items: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.yt__play:hover .yt__seal { transform: scale(1.06); box-shadow: 0 0 0 3px #FFF1C8, 0 0 0 6px #A67C46, 0 0 24px rgba(255, 213, 113, .8), 0 6px 18px rgba(0, 0, 0, .6); }
.yt__seal svg { width: 2rem; height: 2rem; margin-left: .25rem; fill: url(#goldFill); }
.yt__label {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: .8rem;
  text-align: left;
  font-style: italic;
  text-shadow: var(--halo-dark);
}
.yt__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt figcaption { margin: .45rem 0 0; font-size: .88rem; font-style: italic; color: rgba(242, 240, 234, .7); }
.chapter--wide { grid-template-rows: auto; }
.chapter--wide .ring { grid-row: auto; align-self: start; margin-top: .3rem; }
.chapter--wide .chapter__text { grid-column: 2; display: grid; gap: .55rem; align-content: center; }
.chapter--wide .chapter__text p { grid-column: auto; }
.chapter--wide .yt { grid-column: 3; grid-row: auto; }
@media (max-width: 960px) {
  .chapter--wide .yt { grid-column: 1 / -1; }
}
.chapter--wide .chapter__text > * { grid-column: auto; }
.chapter--wide { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); }
.yt__play--link { text-decoration: none; color: var(--ink-light); }
.yt__play--link:hover { color: #FDE49C; }

/* ---------------------------------------------------------------- gallery */

/* Phone screens in a thin dark bezel, in a row you can drag or swipe. */
.gallery {
  display: flex;
  gap: clamp(.8rem, 1.6vw, 1.4rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: .4rem .2rem 1rem;
  margin-top: 1.4rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(84, 56, 21, .55) transparent;
  -webkit-overflow-scrolling: touch;
}
.gallery::-webkit-scrollbar { height: 8px; }
.gallery::-webkit-scrollbar-thumb { background: var(--bevel); border-radius: 4px; }
.shot {
  flex: 0 0 auto;
  width: clamp(200px, 17vw, 300px);
  margin: 0;
  scroll-snap-align: start;
}
.shot--wide { width: clamp(260px, 24vw, 420px); align-self: center; }
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 5px solid #15161B;
  background: #15161B;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06);
}
.shot--wide img { border-radius: 14px; }
.shot figcaption {
  margin: .5rem .1rem 0;
  font-size: .92rem;
  line-height: 1.4;
  font-style: italic;
  color: rgba(59, 42, 23, .85);
}
.about--stack { display: block; }
.about--stack .prose { max-width: 72ch; }
.gallery-note { margin: .2rem 0 0; font-size: .9rem; font-style: italic; color: rgba(59, 42, 23, .7); }

/* The memory meter cameo under the pills. */
.pill-clip--meter img { max-width: 424px; }
/* The ivy hangs from the section's top-right corner, clear of the gallery captions. */
.ivy { left: auto; right: clamp(8px, 1.5vw, 28px); bottom: auto; top: 0; transform: scale(-1, -1); }

/* ---------------------------------------------------------------- carousel */

/* One screen in the gold frame; arrows, keys and a swipe cycle the rest. */
.carousel { width: min(100%, 26rem); margin-inline: auto; container-type: inline-size; }
.framed--phone { margin: 7cqw; }
.framed--phone::after { inset: -7cqw; border-width: 17cqw; }
.carousel__stage {
  position: relative;
  aspect-ratio: 1272 / 2800;
  background: #15161B;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .55);
}
.carousel__stage .slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 0;
  box-shadow: none;
  opacity: 0;
  transition: opacity .35s ease;
}
.carousel__stage .slide--contain { object-fit: contain; object-position: center; }
.carousel__stage .slide.is-current { opacity: 1; }
/* Sideways swipes belong to the carousel; up and down still scroll the page. */
.carousel__stage { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
@media (prefers-reduced-motion: reduce) { .carousel__stage .slide { transition: none; } }
.carousel__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  margin-top: .3rem;
}
.ring--btn { border: 0; background: none; cursor: pointer; padding: 0; color: inherit; transition: transform .15s ease; }
.ring--btn:hover { transform: scale(1.06); }
.ring--btn:focus-visible { outline: 2px solid #7A5A1E; outline-offset: 4px; border-radius: 50%; }
.carousel__caption { margin: 0; text-align: center; font-style: italic; font-size: .95rem; line-height: 1.35; color: rgba(59, 42, 23, .88); font-weight: 600; }
.carousel__count { display: block; margin-bottom: .15rem; font-size: .72rem; letter-spacing: 1.3px; text-transform: uppercase; font-style: normal; color: rgba(59, 42, 23, .6); }
.carousel:focus-visible { outline: none; }
.ring--btn { background: rgba(26, 23, 18, .86); border-radius: 50%; }

/* ---------------------------------------------------------------- memory panel */

/* "The memory behind each reply": the pieces that make up a reply's memory, on
   the recessed paper panel, marked with gold beads (they are not a sequence). */
.memory-panel { margin-top: 0; align-self: start; }
.memory-panel h3 { font-size: 1.35rem; margin-bottom: .9rem; }
.reads { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.reads__item { position: relative; padding-left: 1.6em; }
.reads__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: .42em;
  width: .75em;
  height: .75em;
  border-radius: 50%;
  background: var(--bevel-diag);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.reads__title { margin: 0; font-size: 1.12rem; font-style: italic; font-weight: 700; line-height: 1.3; color: var(--ink-dark); }
.reads__item p { margin: .2rem 0 0; font-size: 1rem; line-height: 1.45; font-weight: 600; color: #3B2A17; }

/* ---------------------------------------------------------------- overseer */

/* The Overseer on the dark marble: text beside a wide gold frame on desktop,
   stacked on narrower screens. The app's own screens are dark, so the band
   is too. */
.overseer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: start;
}
@media (min-width: 1101px) {
  .overseer { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
}
.dark .prose p { color: rgba(242, 240, 234, .9); }
.dark .prose strong { color: #FDF6E3; }

/* The wide carousel: desktop captures of mixed shapes (War Room dialogs, a
   console window, a chat pane), each shown whole on a 4:3 stage, in thinner
   frame corners (the phone frame's proportions would be far too heavy). */
.carousel--wide { width: min(100%, 60rem); }
.framed--wide { margin: 3.4cqw; }
.framed--wide::after { inset: -3.4cqw; border-width: 8cqw; }
.carousel--wide .carousel__stage { aspect-ratio: 4 / 3; background: #111214; }
.carousel--wide .carousel__stage .slide { object-fit: contain; object-position: center; }
.carousel--wide .carousel__stage .slide[data-zoom] { cursor: zoom-in; }
.dark .carousel__caption { color: rgba(242, 240, 234, .9); }
.dark .carousel__count { color: rgba(242, 240, 234, .6); }
.carousel__more { margin: .35rem 0 0; text-align: center; }
.carousel__zoom {
  border: 0;
  background: none;
  padding: .2rem .4rem;
  font: inherit;
  font-size: .78rem;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  font-weight: 600;
  color: #7A5A1E;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(122, 90, 30, .45);
  text-underline-offset: 3px;
}
.carousel__zoom:hover { color: #543815; }
.carousel__zoom:focus-visible { outline: 2px solid #7A5A1E; outline-offset: 3px; border-radius: 3px; }
.dark .carousel__zoom { color: #E1C16E; text-decoration-color: rgba(225, 193, 110, .45); }
.dark .carousel__zoom:hover { color: #FDE49C; }
.dark .carousel__zoom:focus-visible { outline-color: #E1C16E; }

/* The Windows gallery: full-window captures (2560×1353), one shape, so the
   stage takes it exactly; wider than the Overseer frame, under a short intro. */
.carousel--window { width: min(100%, 64rem); }
/* On your phone and your PC: the phone frame beside the wide Windows frame,
   the same app on two screens; stacked on narrow screens. */
.screens {
  display: grid;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: center;
}
.screens .carousel { width: 100%; }
@media (max-width: 1100px) {
  .screens { grid-template-columns: minmax(0, 1fr); }
  .screens #shots { width: min(100%, 22rem); }
}
.carousel--window .carousel__stage { aspect-ratio: 2560 / 1353; }
.windows__intro { max-width: 72ch; margin: 0 auto 1.2rem; text-align: center; }

/* ---------------------------------------------------------------- full size */

/* A screen at full size. It opens fitted to the window; a click on the
   picture switches to its real pixels, and the viewer scrolls. */
.zoom {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: auto;
  overscroll-behavior: contain;
}
.zoom::backdrop { background: rgba(12, 10, 8, .92); }
.zoom__frame {
  min-width: 100%;
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 3.2rem 1rem 1rem;
  box-sizing: border-box;
}
.zoom__img {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 4.2rem);
  width: auto;
  height: auto;
  cursor: zoom-in;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
}
.zoom.is-actual .zoom__frame { place-items: start; }
.zoom.is-actual .zoom__img { max-width: none; max-height: none; cursor: zoom-out; }
.zoom__close {
  position: fixed;
  top: .7rem;
  right: .9rem;
  z-index: 1;
  padding: .35rem .9rem;
  border-radius: 30px;
  border: 2px solid #C49A52;
  background: rgba(26, 23, 18, .94);
  color: #F2F0EA;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.zoom__close:focus-visible { outline: 2px solid #FDE49C; outline-offset: 3px; }
.zoom__hint {
  position: fixed;
  top: 1rem;
  left: 1rem;
  right: 7rem;
  margin: 0;
  font-size: .8rem;
  font-style: italic;
  color: rgba(242, 240, 234, .7);
}

/* ---------------------------------------------------------------- mascot parts */

/* The part titles the page is divided by: centered, larger than a section's
   own heading, over a short gold rule. */
.part-head { text-align: center; margin: 0 auto clamp(1.2rem, 2.6vw, 2rem); }
.part-head__title { font-size: clamp(2.1rem, 4.4vw, 3.5rem); line-height: 1.12; text-wrap: balance; }
.part-head__rule {
  width: min(16rem, 60%);
  height: 3px;
  margin: .8rem auto 0;
  background: var(--bevel);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
/* A title on its own, heading the section that follows it. */
.part-band { padding-block: clamp(2.2rem, 5vw, 4rem) 0; }
.part-band .part-head { margin-bottom: 0; }
.part-band .part__lead { margin-top: 1rem; }
.part-band .part__lead p:last-child { margin-bottom: 0; }

/* A part with the mascot: text beside her, and she stands on the gold rule
   under the section, so the section has no bottom padding. */
.part { padding-bottom: 0; }
.part__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 3.5rem);
  align-items: end;
}
.part__wrap--flip { grid-template-columns: auto minmax(0, 1fr); }
.part__body { align-self: center; padding-bottom: clamp(2.6rem, 6vw, 5rem); min-width: 0; }
.part__lead { max-width: 64ch; margin-inline: auto; text-align: center; }
.mascot {
  display: block;
  width: auto;
  height: var(--mascot-h, 26rem);
  /* If a column ever forces one narrower than its drawing, it shrinks inside
     its box instead of being squeezed out of shape. */
  object-fit: contain;
  object-position: bottom;
  align-self: end;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 8px 12px rgba(59, 42, 23, .28));
}
.mascot--devices { --mascot-h: 27rem; }
.mascot--point-right { --mascot-h: 36rem; }
.mascot--point-left { --mascot-h: 34rem; }

/* Availability: three short lines on gold beads, then the button. */
.avail { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: .7rem; width: fit-content; max-width: 100%; }
.avail li { position: relative; padding-left: 1.7em; font-size: 1.22rem; font-weight: 600; line-height: 1.4; color: #3B2A17; }
.avail li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .38em;
  width: .8em;
  height: .8em;
  border-radius: 50%;
  background: var(--bevel-diag);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
#availability .cta { margin-top: 1.6rem; justify-content: center; }

/* Who is this for: her words on the recessed paper, like a letter. */
.speech { margin-top: 0; max-width: 62rem; }
.speech .recessed__in { padding: clamp(1.1rem, 2.4vw, 1.8rem) clamp(1.2rem, 3vw, 2.4rem); }
.speech p { font-style: italic; font-size: 1.1rem; line-height: 1.66; }
.speech p:last-child { margin-bottom: 0; }
/* The features in her own words: a second grid of wider cards under a line
   of hers, in italic so her voice reads apart from the cards above. An odd
   last card takes the whole row. */
.voice-lede {
  max-width: 62ch;
  margin: clamp(2rem, 4vw, 3rem) auto 1.2rem;
  text-align: center;
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.6;
  color: rgba(242, 240, 234, .9);
}
.chapters--voice { grid-template-columns: repeat(auto-fit, minmax(min(100%, 34rem), 1fr)); }
.chapter--voice p { font-style: italic; line-height: 1.62; }
.chapters--voice > .chapter:last-child:nth-child(odd) { grid-column: 1 / -1; }
.chapters--voice > .chapter:last-child:nth-child(odd) p { max-width: 78ch; }
.part__lead--voice p { font-style: italic; }
.chapter--row { grid-column: 1 / -1; }
.chapter--row p { max-width: 78ch; }

/* The coffee pose in the corner of "Keep it independent". Her shoe and tail
   are cut in the drawing, so she is flush with the section's bottom (the gold
   rule under it is drawn over her feet) and with the right edge of the page. */
.has-coffee { overflow: hidden; min-height: 25rem; }
.mascot--coffee {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2; /* in front of the section heading's gold rule, which runs under her ear */
  --mascot-h: 23rem;
  filter: none;
}
.has-coffee > .wrap { position: relative; z-index: 1; }

@media (max-width: 1200px) {
  .has-coffee { min-height: 0; padding-bottom: 15rem; }
  .mascot--coffee { --mascot-h: 14rem; }
}
@media (max-width: 860px) {
  .part__wrap, .part__wrap--flip { grid-template-columns: minmax(0, 1fr); }
  .part__body { padding-bottom: 1.2rem; }
  .part__wrap > .mascot { order: 2; justify-self: center; }
  .mascot--devices { --mascot-h: 17rem; }
  .mascot--point-right { --mascot-h: 17rem; }
  .mascot--point-left { --mascot-h: 17rem; }
}

/* ---------------------------------------------------------------- speakers */

/* A character who speaks a section is placed against what she talks about,
   never in leftover space, and she sits or stands on the gold rule under the
   section (so the section has no bottom padding). */
.has-speaker { padding-bottom: 0; }
.speaker { filter: drop-shadow(0 8px 12px rgba(59, 42, 23, .25)); }

/* What is this? Mireille sits on the gold rule at the right of her words,
   about as tall as they are. Her column is
   sized from her own proportions (the drawing is 0.734 as wide as it is tall)
   so she can never be squeezed. */
.about--speaker {
  --mireille-h: clamp(34rem, 56vw, 49rem);
  /* She and her words are one group, centered in the section, so the reading
     width of the text never leaves a gap beside it. */
  grid-template-columns: minmax(0, 68ch) calc(var(--mireille-h) * .734);
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: end;
}
.speaker--mireille {
  --mascot-h: var(--mireille-h);
  width: calc(var(--mireille-h) * .734);
  max-width: none;
}
.about--speaker .about__text {
  align-self: center;
  max-width: 68ch;
  padding-bottom: clamp(2.6rem, 6vw, 5rem);
}
@media (max-width: 1100px) {
  .about--speaker { --mireille-h: 26rem; }
}
/* Phone: her words, then Mireille on the rule. */
@media (max-width: 860px) {
  .about--speaker { grid-template-columns: minmax(0, 1fr); }
  .about--speaker .about__text { order: 1; padding-bottom: 1rem; }
  .speaker--mireille { order: 2; justify-self: center; --mireille-h: 19rem; }
}

/* How a character remembers. Wide: Vyeria stands the full height of the
   column at its right edge, on the rule, in front of the right edge of her
   panel, which sits at the height of her hand on her hip. */
#remembering .two-col { align-items: stretch; }
#remembering .speaker-text { padding-bottom: clamp(2.6rem, 6vw, 5rem); }
.speaker-stage { position: relative; min-width: 0; }
@media (min-width: 1100px) {
  /* Her drawing is 0.35 as wide as it is tall. The panel stops 2.2rem inside
     her left edge, so only its padding tucks behind her arm, never its words. */
  .speaker-stage {
    --vy-h: clamp(32rem, 40vw, 44rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(var(--vy-h) + 1rem);
    padding-bottom: 4rem;
  }
  .speaker-stage .memory-panel { position: relative; z-index: 1; margin-right: calc(var(--vy-h) * .35 - 2.2rem); }
  .speaker--vyeria {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    --mascot-h: var(--vy-h);
  }
}
@media (max-width: 1099px) {
  /* Narrower: she stands at the right, her head in front of the panel's lower
     right corner; the panel keeps room at its bottom so no words sit under her. */
  .speaker-stage { display: flex; flex-direction: column; }
  .speaker-stage .memory-panel .recessed__in { padding-bottom: 7rem; }
  .speaker--vyeria { align-self: flex-end; position: relative; z-index: 2; margin: -7.5rem .6rem 0 0; --mascot-h: 22rem; }
}
@media (max-width: 860px) {
  #remembering .speaker-text { padding-bottom: 1rem; }
  .speaker-stage .memory-panel .recessed__in { padding-bottom: 6rem; }
  .speaker--vyeria { margin-top: -6.5rem; --mascot-h: 19rem; }
}

/* They stop to think. Nicole stands like Vyeria, full height at the right of
   the column on the rule, looking back over her shoulder across her own status
   pills, which sit at her side. Her drawing is 0.381 as wide as it is tall; the
   pills stop at her elbow: the meter strip has words right up to its edge. */
#reflection .two-col { align-items: stretch; }
#reflection .speaker-text { padding-bottom: clamp(2.6rem, 6vw, 5rem); }
@media (min-width: 1100px) {
  .speaker-stage--nicole .pills { position: relative; z-index: 1; margin-right: calc(var(--vy-h) * .381 - .4rem); }
  .speaker--nicole {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    --mascot-h: var(--vy-h);
  }
}
@media (max-width: 1099px) {
  .speaker-stage--nicole .pills { padding-bottom: 7rem; }
  .speaker--nicole { align-self: flex-end; position: relative; z-index: 2; margin: -7.5rem .6rem 0 0; --mascot-h: 22rem; }
}
@media (max-width: 860px) {
  #reflection .speaker-text { padding-bottom: 1rem; }
  .speaker-stage--nicole .pills { padding-bottom: 6rem; }
  .speaker--nicole { margin-top: -6.5rem; --mascot-h: 19rem; }
}

/* A memory built like a map. Mabel stands on the gold rule under the drawn
   constellation, at the right, pointing her marker back at her words. The
   constellation no longer follows the reader down (she stands under it). */
#memory .memory { align-items: stretch; }
#memory .memory > .prose { padding-bottom: clamp(2.6rem, 6vw, 5rem); }
.kg-stage { display: flex; flex-direction: column; min-width: 0; }
.kg-stage .sky-plate { position: static; }
/* She takes all the height left under the drawing, as large as it lets her,
   feet on the rule at the right; object-fit keeps her proportions. */
.kg-stage .mascot--point-left {
  flex: 1 1 0;
  min-height: 24rem;
  height: auto;
  width: 100%;
  max-width: none;
  margin-top: 1.5rem;
  object-position: right bottom;
}
@media (max-width: 960px) {
  #memory .memory > .prose { padding-bottom: 1rem; }
  .kg-stage .mascot--point-left { flex: none; min-height: 0; height: 19rem; object-position: center bottom; }
}

/* Download. The list, version, buttons and the Open Beta box on the left;
   Mabel with her laptop and phone on the gold rule at the right. */
.download { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.5rem, 4vw, 4rem); align-items: end; }
.download__body { min-width: 0; padding-bottom: clamp(2.6rem, 6vw, 5rem); }
#download .avail { margin: 0 0 1.3rem; }
#download .mascot--devices { --mascot-h: clamp(30rem, 42vw, 46rem); }
@media (max-width: 860px) {
  .download { grid-template-columns: minmax(0, 1fr); }
  .download__body { padding-bottom: 1rem; }
  #download .mascot--devices { justify-self: center; --mascot-h: 19rem; }
}

/* ---------------------------------------------------------------- static sky on phones and tablets */

/* On a PC the painting is fixed with background-attachment, so the words move
   over a still sky. Phones ignore that (iOS) or scroll it badly (Android), so
   below the PC query one copy of the painting is pinned to the screen instead,
   one screen tall, and the cloud sections are see-through over it. The dark
   bands do the same with the marble: their own pinned sheet, seen only
   through the band (clip-path clips the fixed layer to the section). 100lvh is
   the tallest the screen gets with the address bar hidden, so the painting
   never jumps when the bar slides away. */
@media not all and (min-width: 900px) and (hover: hover) {
  body { background: #EBD9A9; }
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    height: 100lvh;
    z-index: -1;
    pointer-events: none;
    background: #EBD9A9 url(art/cloud-mobile.webp) center / cover no-repeat;
  }
  @media (orientation: landscape) {
    body::before { background-image: url(art/cloud-desktop.webp); }
  }
  .sky, .hero { background: transparent; }
  .sky::before, .hero__sky { display: none; }
  .dark { clip-path: inset(0); }
  .dark::before {
    position: fixed;
    top: 0;
    bottom: auto;
    height: 100vh;
    height: 100lvh;
    background-position: center;
  }
}

/* ---------------------------------------------------------------- speakers in the text on phones */

/* On a phone Vyeria and Nicole stand inside their own words instead of under
   the panel: floated to the right a little way down the column (the empty top
   margin lets the first lines run full width), with shape-outside reading the
   drawing's transparency so every line stops at her outline, not at a box.
   Both look to the left, so on the right they face the text. The copy standing
   on the rule is hidden there. The float files are the half-width drawings,
   same origin, so the browser may read their alpha for the shape. */
.speaker-float { display: none; }
@media (max-width: 860px) {
  .speaker-float {
    display: block;
    float: right;
    width: auto;
    max-width: none;
    height: min(var(--float-h, 24rem), 110vw);
    margin: var(--float-top, 7rem) 0 .6rem .9rem;
    shape-margin: .35rem;
    shape-image-threshold: .3;
    filter: drop-shadow(0 6px 10px rgba(59, 42, 23, .25));
    pointer-events: none;
    user-select: none;
  }
  .speaker-float--vyeria { --float-h: 27rem; --float-top: 6.5rem; shape-outside: url(img/speaker-vyeria-306.webp); }
  .speaker-float--nicole { --float-h: 26rem; --float-top: 8rem; shape-outside: url(img/speaker-nicole-338.webp); }
  .speaker-text { display: flow-root; }
  #remembering .speaker--vyeria, #reflection .speaker--nicole { display: none; }
  .speaker-stage .memory-panel .recessed__in, .speaker-stage--nicole .pills { padding-bottom: 0; }
  #remembering, #reflection { padding-bottom: clamp(2.6rem, 6vw, 5rem); }
}