/* present.css — the slides of Introducing Community Recovery, in the app.
   Ported from the original presentation page (happyseaurchin-beach,
   community-recovery/presentation.html): its slide rules and its wider-screen
   layouts, each scoped under .pres so they touch nothing else in the app;
   the nested circles are .p-ring (the app's .ring is the heart). What
   follows the original's rules makes them stand in the app: the app's own
   dark palette, type sized for the width the slide really has, and every
   row of cards reflowing by that width (container queries on the stage,
   not the screen's width, so a slide in the app's column at 1920 wide lays
   out for the column). Presenting puts each slide on a fixed 16:9 stage,
   scaled whole to the screen. */
.pres { --bar-h: 0px; }
  /* ---- A slide, its fuller text and its room ----------------------------- */
  .pres .unit { scroll-margin-top: var(--bar-h); }
  .pres .slide {
    --s-head: var(--cr-head);
    --s-body: var(--cr-body);
    --s-quiet: var(--cr-quiet);
    --s-mark: var(--cr-purple);
    --s-card: var(--cr-card);
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - var(--bar-h));
    min-height: calc(100svh - var(--bar-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.6em 1.15em 3em;
    background: var(--cr-ground);
    color: var(--s-body);
    font-size: 1rem;
    line-height: 1.5;
  }
  /* brand 5.1: the soft lilac circle glowing in a corner of a light slide */
  .pres .slide.light::before {
    content: "";
    position: absolute;
    top: -14em;
    right: -14em;
    width: 32em;
    height: 32em;
    border-radius: 50%;
    background: radial-gradient(circle, var(--cr-glow) 0%, var(--cr-glow) 40%, rgba(234, 223, 247, 0) 70%);
    pointer-events: none;
  }
  .pres .slide.dark {
    --s-head: var(--cr-head-dark);
    --s-body: var(--cr-body-dark);
    --s-quiet: var(--cr-quiet-dark);
    --s-mark: var(--cr-lilac);
    --s-card: var(--cr-panel);
    background: var(--cr-night);
  }
  .pres .slide.cover { background: linear-gradient(135deg, #1B1424 0%, #241A33 40%, #4A2275 100%); }
  .pres .unit + .unit .slide { border-top: 1px solid var(--line); }
  .pres .slide-in {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 68em;
    margin: 0 auto;
  }
  .pres .slide-num {
    position: absolute;
    z-index: 1;
    right: 1.2em;
    bottom: 0.9em;
    margin: 0;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--s-quiet);
  }
  .pres .slide h2, .pres .slide h3 { color: var(--s-head); }
  .pres .slide p { margin: 0; }
  .pres .s-eyebrow {
    font-weight: 800;
    font-size: 0.85em;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--s-mark);
    margin: 0 0 0.4em;
  }
  .pres .s-title {
    font-family: var(--cr-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 2.1em;
    line-height: 1.08;
    letter-spacing: 0.01em;
    margin: 0 0 0.35em;
  }
  .pres .s-sub {
    font-weight: 800;
    font-size: 1.05em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--s-mark);
    margin: 0 0 1em !important;
  }
  .pres .s-lead {
    font-size: 1.3em;
    line-height: 1.35;
    font-weight: 700;
    color: var(--s-head);
    margin: 0 0 1em !important;
  }
  .pres .s-hand {
    font-family: var(--cr-hand);
    font-weight: 600;
    font-size: 1.9em;
    line-height: 1.15;
    color: var(--s-mark);
  }
  .pres .s-intro { margin: 0 0 0.8em !important; max-width: 52em; }
  .pres .s-foot { font-size: 0.92em; color: var(--s-quiet); margin-top: 1.1em !important; }
  .pres .s-foot strong, .pres .s-card strong, .pres .s-tick strong { color: var(--s-head); }
  .pres .grid { display: grid; gap: 0.9em; }
  .pres .s-card {
    background: var(--s-card);
    border-radius: 14px;
    border-top: 4px solid var(--cr-purple);
    padding: 1em 1.1em 1.1em;
    box-shadow: 0 1px 3px rgba(27, 20, 36, 0.08), 0 6px 18px rgba(74, 34, 117, 0.06);
  }
  .pres .s-card h3 {
    font-family: var(--cr-display);
    font-weight: 600;
    font-size: 1.25em;
    line-height: 1.2;
    margin: 0 0 0.3em;
  }
  .pres .s-card.is-dark, .pres .s-band {
    --s-head: var(--cr-head-dark);
    --s-body: var(--cr-body-dark);
    --s-quiet: var(--cr-quiet-dark);
    --s-mark: var(--cr-lilac);
    background: var(--cr-night);
    color: var(--cr-body-dark);
  }
  .pres .slide.dark .s-card.is-dark, .pres .slide.dark .s-band { background: var(--cr-panel); }
  .pres .s-band {
    border-radius: 14px;
    padding: 1.1em 1.2em;
    margin-top: 1em;
  }
  .pres .s-band h3 {
    font-family: var(--cr-display);
    font-weight: 600;
    font-size: 1.2em;
    margin: 0 0 0.25em;
  }
  .pres .s-chips, .pres .s-pills, .pres .s-ticks, .pres .s-lines, .pres .s-list { list-style: none; padding: 0; margin: 0; }
  .pres .s-chips { display: flex; flex-wrap: wrap; gap: 0.45em; }
  .pres .s-chips li {
    background: var(--cr-pale);
    color: var(--cr-deep);
    font-weight: 700;
    font-size: 0.92em;
    border-radius: 999px;
    padding: 0.3em 0.85em;
  }
  .pres .s-pills { display: flex; flex-wrap: wrap; gap: 0.55em; margin-top: 1.1em; }
  .pres .s-pills li {
    background: var(--cr-purple);
    color: #fff;
    font-weight: 800;
    border-radius: 999px;
    padding: 0.45em 1.1em;
  }
  .pres .ico { width: 1.6em; height: 1.6em; flex: none; color: var(--s-mark); }
  .pres .ico path, .pres .ico circle, .pres .ico rect, .pres .ico polyline { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .pres .s-ticks li, .pres .s-lines li, .pres .s-list li { display: flex; gap: 0.7em; align-items: flex-start; margin: 0 0 0.8em; }
  .pres .s-list li { margin: 0 0 0.45em; }
  .pres .s-list .ico { width: 1.25em; height: 1.25em; margin-top: 0.1em; }
  .pres .s-tick .ico { width: 1.7em; height: 1.7em; }
  .pres .s-tick .ico circle { fill: var(--cr-pale); stroke: none; }
  .pres .slide.dark .s-tick .ico circle, .pres .is-dark .s-tick .ico circle { fill: var(--cr-deep); }
  .pres .unreached-slide { color: var(--s-quiet); font-style: italic; }

  /* 1.1 cover */
  .pres .cover-grid { display: grid; gap: 1.6em; align-items: center; }
  .pres .cover-logo { width: min(100%, 16em); margin: 0 auto; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45); }
  .pres .cover-title { font-size: 2.7em; }
  .pres .cover-purpose { font-size: 1.15em; color: var(--s-head); margin: 0.9em 0 0 !important; max-width: 30em; }
  .pres .cover-foot { margin-top: 1em !important; font-weight: 700; letter-spacing: 0.06em; color: var(--s-quiet); }
  .pres .qr-box { display: flex; align-items: center; gap: 1em; margin-top: 1.6em; }
  .pres .qr-box svg { flex: none; width: 7.5em; height: 7.5em; border-radius: 8px; display: block; }
  .pres .qr-label { font-weight: 800; color: var(--s-head); }
  .pres .qr-addr { font-size: 0.8em; color: var(--s-quiet); overflow-wrap: anywhere; margin-top: 0.3em !important; }

  /* 1.3 lero */
  .pres .lero-statement {
    font-family: var(--cr-display);
    font-weight: 500;
    font-size: 1.8em;
    line-height: 1.2;
    color: var(--s-head);
    border-left: 0.18em solid var(--cr-purple);
    padding-left: 0.6em;
  }

  /* 1.4 partnership */
  .pres .logo-card { display: flex; flex-direction: column; gap: 0.5em; border-top-width: 4px; }
  .pres .logo-plate {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4.2em;
    padding: 0.5em 0.7em;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #ECE4F5;
  }
  .pres .logo-plate img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
  .pres .logo-plate.empty {
    border: 2px dashed var(--cr-lilac);
    color: var(--cr-deep);
    font-family: var(--cr-display);
    font-weight: 600;
    text-align: center;
    line-height: 1.15;
  }
  .pres .logo-name { font-weight: 800; color: var(--s-head); }
  .pres .logo-card p:last-child { font-size: 0.92em; }
  .pres .contact { display: flex; flex-wrap: wrap; gap: 0.4em 1.4em; margin-top: 0.7em !important; }
  .pres .contact a, .pres .know-contact a { color: var(--cr-lilac); font-weight: 800; overflow-wrap: anywhere; }
  .pres .contact span, .pres .know-contact span { display: inline-flex; align-items: center; gap: 0.45em; }

  /* 1.5 began */
  .pres .abcd { margin: 0 0 1.2em !important; max-width: 46em; }
  .pres .steps { display: grid; gap: 0.6em; align-items: stretch; }
  .pres .step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9em;
    height: 1.9em;
    border-radius: 50%;
    background: var(--cr-purple);
    color: #fff;
    font-family: var(--cr-display);
    font-weight: 700;
    margin-bottom: 0.45em;
  }
  .pres .is-dark .step-num { background: var(--cr-lilac); color: var(--cr-night); }
  .pres .arrow { display: flex; align-items: center; justify-content: center; color: var(--cr-purple); }
  .pres .arrow svg { width: 1.8em; height: 1.8em; transform: rotate(90deg); }
  .pres .arrow path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

  /* 2.1 meet */
  .pres .meet-purpose {
    font-family: var(--cr-display);
    font-weight: 500;
    font-size: 2em;
    line-height: 1.2;
    color: var(--s-head);
    margin: 0.2em 0 1.1em !important;
    max-width: 24em;
  }
  .pres .bordered { border: 2px solid var(--cr-bright); border-radius: 14px; padding: 1em 1.15em; }
  .pres .bordered h3 { font-family: var(--cr-display); font-weight: 600; font-size: 1.25em; margin: 0 0 0.3em; color: var(--cr-lilac); }

  /* 2.2 stands */
  .pres .chime-letter {
    display: block;
    font-family: var(--cr-display);
    font-weight: 700;
    font-size: 2.2em;
    line-height: 1;
    color: var(--cr-purple);
    margin-bottom: 0.15em;
  }

  /* 2.3 belong */
  .pres .belong-lines li strong { display: block; color: var(--s-head); }
  .pres .agreement ol { margin: 0.4em 0 0; padding-left: 1.3em; }
  .pres .agreement li { margin: 0 0 0.35em; }
  .pres .agreement li::marker { color: var(--cr-lilac); font-weight: 800; }

  /* 2.4 whatson */
  .pres .when { font-family: var(--cr-display); font-weight: 600; font-size: 1.3em; color: var(--s-head); }
  .pres .where-line { display: flex; gap: 0.45em; align-items: flex-start; margin: 0.45em 0 0.35em !important; font-weight: 700; color: var(--s-head); }
  .pres .where-line .ico { width: 1.2em; height: 1.2em; margin-top: 0.15em; }
  .pres .s-note { font-size: 0.92em; color: var(--s-quiet); }
  .pres .chips-head { font-family: var(--cr-display); font-weight: 600; font-size: 1.15em; margin: 1.1em 0 0.5em !important; color: var(--s-head); }

  /* 3.1 grow: nested circles */
  .pres .p-rings {
    container-type: inline-size;
    position: relative;
    width: min(100%, 24em);
    aspect-ratio: 1;
    margin: 0 auto;
  }
  .pres .p-ring { position: absolute; border-radius: 50%; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .pres .p-ring b { font-family: var(--cr-display); font-weight: 600; font-size: 5cqi; line-height: 1.1; color: var(--cr-head); }
  .pres .p-ring small { font-size: 3.6cqi; line-height: 1.2; color: var(--cr-body); }
  .pres .p-ring.members { inset: 0; background: var(--cr-pale); padding-top: 7%; }
  .pres .p-ring.volunteers { left: 11%; right: 11%; bottom: 3%; top: 19%; background: var(--cr-card); border: 2px solid var(--cr-purple); padding-top: 6%; }
  .pres .p-ring b, .pres .p-ring small { position: relative; z-index: 2; }
  .pres .p-ring.peer, .pres .p-ring.lived { top: 43%; width: 40%; height: 40%; justify-content: center; }
  .pres .p-ring.peer { left: 15%; padding: 0 9% 0 3%; background: rgba(123, 63, 191, 0.92); }
  .pres .p-ring.lived { right: 15%; padding: 0 3% 0 9%; background: rgba(74, 34, 117, 0.9); }
  .pres .p-ring.peer b, .pres .p-ring.lived b, .pres .p-ring.peer small, .pres .p-ring.lived small { color: #fff; }
  .pres .p-ring.peer b, .pres .p-ring.lived b { font-size: 4.4cqi; }
  .pres .p-ring.peer small, .pres .p-ring.lived small { font-size: 3.3cqi; }
  .pres .grow-text p { margin: 0 0 0.7em; }

  /* 3.2 organisation */
  .pres .big33 {
    font-family: var(--cr-display);
    font-weight: 700;
    font-size: 4.6em;
    line-height: 0.9;
    color: var(--cr-lilac);
    flex: none;
  }
  .pres .band-row { display: flex; gap: 1em; align-items: center; }

  /* 3.3 together */
  .pres .person { display: grid; grid-template-columns: auto 1fr; gap: 0.2em 0.9em; align-items: start; }
  .pres .initials {
    grid-row: span 3;
    width: 3.2em;
    height: 3.2em;
    border-radius: 50%;
    background: var(--cr-purple);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--cr-display);
    font-weight: 600;
    font-size: 1.05em;
  }
  .pres .person .role { font-weight: 800; font-size: 0.8em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cr-purple); }
  .pres .s-band p + p { margin-top: 0.55em; }

  /* 3.4 story */
  .pres .story-words { font-size: 1.12em; max-width: 46em; }
  .pres .story-hand { margin: 0.8em 0 1em !important; }
  .pres .chime-strip { display: grid; gap: 0.5em; }
  .pres .chime-tile { background: var(--cr-panel); border-radius: 12px; padding: 0.7em 0.85em; border-top: 3px solid var(--cr-bright); }
  .pres .chime-tile strong { display: block; color: var(--cr-lilac); font-family: var(--cr-display); font-weight: 600; font-size: 1.1em; }

  /* 4.1 vision */
  .pres .vision-card .ico { width: 2.2em; height: 2.2em; margin-bottom: 0.4em; }
  .pres .vision-card .s-note { margin-top: 0.6em; }

  /* 4.2 help */
  .pres .soon {
    display: flex;
    gap: 1em;
    align-items: center;
    background: var(--cr-pale);
    border-radius: 14px;
    padding: 0.9em 1.1em;
    margin-top: 1em;
    color: var(--cr-body);
  }
  .pres .soon strong { color: var(--cr-head); }
  .pres .soon .logo-on-black { width: 5em; flex: none; border-radius: 10px; overflow: hidden; }

  /* 4.3 know */
  .pres .tile { background: var(--cr-card); border-radius: 12px; border-top: 4px solid var(--cr-purple); padding: 0.8em 0.95em; box-shadow: 0 1px 3px rgba(27, 20, 36, 0.08); }
  .pres .tile strong { display: block; font-family: var(--cr-display); font-weight: 600; font-size: 1.1em; color: var(--cr-head); margin-bottom: 0.15em; }
  .pres .tile.logo-tile { padding: 0; overflow: hidden; border-top: 0; background: #000; display: flex; align-items: center; justify-content: center; }
  .pres .tile.logo-tile img { width: 100%; max-width: 12em; height: auto; display: block; }
  .pres .know-contact { display: flex; flex-wrap: wrap; gap: 0.5em 1.6em; }
  .pres .know-hand { margin-top: 0.8em !important; text-align: center; }

  /* What the room said: beneath the last slide, in Present and Follow. */
  .pres .said { display: none; margin-top: 1.4em; }
  .pres.live .said { display: block; }
  .pres .said h3 { font-family: var(--cr-display); font-weight: 600; font-size: 1.3em; margin: 0 0 0.5em; color: var(--s-head); }
  .pres .said-list { list-style: none; margin: 0; padding: 0; }
  .pres .said-list li { background: var(--cr-card); border-radius: 10px; padding: 0.55em 0.8em; margin: 0 0 0.45em; border-left: 4px solid var(--cr-purple); }
  .pres .said-where { font-size: 0.8em; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cr-purple); }
  .pres .said-text { white-space: pre-line; overflow-wrap: break-word; color: var(--cr-head); }
  .pres .said-meta { font-size: 0.82em; color: var(--cr-quiet); }
  .pres .said-list li.redacted { background: var(--cr-night); border-left-color: var(--cr-night); }
  .pres .said-list li.redacted .said-text { color: var(--cr-head-dark); }
  .pres .said-list li.redacted .said-where, .pres .said-list li.redacted .said-meta { color: var(--cr-quiet-dark); }
  .pres .said-empty { color: var(--s-quiet); font-style: italic; }

/* ---- The app's frame for the slides ---------------------------------------- */
.screen.pres-screen { max-width: 72rem; }
.pres { position: relative; width: 100%; margin-top: 14px; }
/* brand.css's .live (the footer's live dot row) is a flex row; the slides' .live is only 'the room is live' */
.pres.live { display: block; }
.pres .stage { position: relative; border-radius: 18px; overflow: hidden; touch-action: pan-y; container: pres / inline-size; }
.pres .pres-line, .pres .pres-code, .pres .pres-fuller, .pres .pres-notes { max-width: 40rem; }
.pres .slide.moving-next { animation: pres-in-next 0.45s ease-out both; }
.pres .slide.moving-back { animation: pres-in-back 0.45s ease-out both; }
@keyframes pres-in-next { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes pres-in-back { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.pres .pres-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.pres .pres-count { font-size: 14px; font-weight: 800; letter-spacing: 0.12em; color: var(--a-quiet); }
.pres .pres-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pres .pres-bar .chip[aria-checked="true"], .pres .pres-bar .chip[aria-pressed="true"] { background: var(--a-purple); border-color: var(--a-purple); color: #fff; }
.pres .pres-line { min-height: 1.4em; margin-top: 8px !important; font-size: 14px; color: var(--a-lantern); }
.pres .pres-fuller { margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: var(--a-panel); color: var(--a-body); font-size: 16px; line-height: 1.55; display: flex; flex-direction: column; gap: 10px; }
.pres .pres-code { margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: var(--a-panel); display: flex; flex-direction: column; gap: 10px; }
.pres .pres-code input { min-height: 48px; border-radius: 12px; border: 1.5px solid var(--a-deep); background: var(--a-night); color: var(--a-head); font: inherit; padding: 0 14px; }
.pres .pres-notes { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.pres .pres-notes .lab { margin-top: 6px !important; }

/* ---- The app's palette on every slide --------------------------------------
   The original's pale panel gives way to the app's dark ground: a slide is the
   panel's purple-dark, a card one step lighter, the dark slides (cover, meet,
   story) the night, and what the original set as a dark card on the pale
   panel is a deep-purple card here. Lilac marks, lantern gold for the
   hand-written lines. The partners' logos keep their white plates and the QR
   code its white ground: both are drawn for a light ground. */
.pres .slide {
  --p-ground: #241A33;
  --p-card: #30244A;
  --p-feature: var(--cr-deep, #4A2275);
  --s-head: var(--a-head);
  --s-body: var(--a-body);
  --s-quiet: var(--a-quiet);
  --s-mark: var(--a-lilac);
  --s-card: var(--p-card);
  background: var(--p-ground);
  color: var(--s-body);
}
/* the glow in the corner, drawn inside the slide (the original set a circle past its edge) */
.pres .slide.light::before { top: 0; right: 0; width: 100%; height: 100%; border-radius: 0; background: radial-gradient(circle 16em at calc(100% - 2em) 2em, rgba(123, 63, 191, 0.22) 0%, rgba(123, 63, 191, 0.12) 57%, rgba(123, 63, 191, 0) 100%); }
.pres .slide.dark { --s-card: var(--a-panel); background: var(--a-night); }
.pres .slide.cover { background: linear-gradient(135deg, #1B1424 0%, #241A33 40%, #4A2275 100%); }
.pres .s-card { box-shadow: none; border-top-color: var(--a-bright); }
.pres .s-card.is-dark, .pres .s-band,
.pres .slide.dark .s-card.is-dark, .pres .slide.dark .s-band {
  --s-head: var(--a-head); --s-body: #E6DCF2; --s-quiet: #CDBEE0; --s-mark: var(--a-lilac);
  background: var(--p-feature); color: #E6DCF2;
}
.pres .s-card.is-dark { border-top-color: var(--a-lilac); }
.pres .s-chips li { background: var(--p-feature); color: var(--a-head); }
.pres .s-hand { color: var(--a-lantern); }
.pres .s-tick .ico circle, .pres .slide.dark .s-tick .ico circle, .pres .is-dark .s-tick .ico circle { fill: var(--p-feature); }
.pres .arrow { color: var(--a-lilac); }
.pres .chime-letter { color: var(--a-lilac); }
.pres .person .role { color: var(--a-lilac); }
.pres .is-dark .step-num { background: var(--a-lilac); color: var(--a-night); }
.pres .p-ring b { color: var(--a-head); }
.pres .p-ring small { color: var(--a-body); }
.pres .p-ring.members { background: #3A2A55; }
.pres .p-ring.volunteers { background: var(--a-panel); border-color: var(--a-bright); }
.pres .soon { background: var(--p-card); color: var(--a-body); }
.pres .soon strong { color: var(--a-head); }
.pres .tile { background: var(--s-card); box-shadow: none; border-top-color: var(--a-bright); }
.pres .tile strong { color: var(--a-head); }
.pres .said-list li { background: var(--s-card); }
.pres .said-where { color: var(--a-lilac); }
.pres .said-text { color: var(--a-head); }
.pres .said-meta { color: var(--a-quiet); }

/* ---- Type for the width the slide has (reading) ----------------------------
   cqi is the stage's width: headings 28 to 40px, body 17 to 19px. */
.pres .slide {
  --fs-body: clamp(17px, 15px + 0.36cqi, 19px);
  --fs-title: clamp(28px, 19px + 2cqi, 40px);
  --fs-cover: clamp(30px, 20px + 2.4cqi, 40px);
  --fs-lead: clamp(20px, 16px + 0.9cqi, 26px);
  --fs-hand: clamp(24px, 18px + 1.3cqi, 32px);
  --fs-big: clamp(48px, 30px + 4cqi, 72px);
  min-height: 0;
  overflow: hidden;
  border-radius: 18px;
  font-size: var(--fs-body);
  padding: clamp(28px, 4.5cqi, 56px) clamp(20px, 4.5cqi, 56px) clamp(40px, 5cqi, 64px);
}
.pres .slide-in { max-width: none; }
.pres .s-title { font-size: var(--fs-title); }
.pres .cover-title { font-size: var(--fs-cover); }
.pres .s-lead { font-size: var(--fs-lead); }
.pres .lero-statement, .pres .meet-purpose { font-size: var(--fs-lead); max-width: none; }
.pres .s-hand { font-size: var(--fs-hand); }
.pres .big33 { font-size: var(--fs-big); }
.pres .s-intro, .pres .abcd, .pres .story-words { max-width: 46em; }
/* nothing wider than its column: long addresses break, grid cells may shrink */
.pres .grid > *, .pres .steps > *, .pres .chime-strip > *, .pres .band-row > * { min-width: 0; }
.pres .contact span, .pres .know-contact span, .pres .qr-addr, .pres .s-chips li, .pres .s-pills li { overflow-wrap: anywhere; min-width: 0; }
.pres .qr-box > div { min-width: 0; }
.pres img, .pres svg { max-width: 100%; }

/* ---- Rows of cards, by the stage's width ------------------------------------
   One column under 600px; two across from 600; three (or five) across where
   there is room for their words. */
.pres .grid-2, .pres .grid-3, .pres .grid-5, .pres .grid-6, .pres .know-grid, .pres .chime-strip,
.pres .cover-grid, .pres .lero-grid, .pres .grow-grid, .pres .belong-grid { grid-template-columns: 1fr; }
.pres .logo-card { display: grid; grid-template-columns: 7.5em 1fr; gap: 0.2em 0.8em; align-items: center; }
.pres .logo-card .logo-plate { grid-row: span 2; height: 3.6em; }
.pres .p-rings { width: min(100%, 22em); }
@container pres (min-width: 600px) {
  .pres .grid-2, .pres .grid-3, .pres .grid-5, .pres .grid-6, .pres .know-grid, .pres .chime-strip { grid-template-columns: 1fr 1fr; }
  .pres .grid-3 > :last-child:nth-child(odd), .pres .grid-5 > :last-child:nth-child(odd),
  .pres .chime-strip > :last-child:nth-child(odd), .pres .know-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pres .logo-card { display: flex; flex-direction: column; }
  .pres .logo-card .logo-plate { height: 4.2em; }
}
@container pres (min-width: 760px) {
  .pres .cover-grid { grid-template-columns: 1.25fr 1fr; }
  .pres .cover-logo { width: 100%; max-width: 24em; order: 2; }
  .pres .lero-grid { grid-template-columns: 1.1fr 1fr; gap: 2.4em; align-items: center; }
  .pres .grow-grid { grid-template-columns: 1fr 1fr; gap: 2em; align-items: center; }
  .pres .belong-grid { grid-template-columns: 1.1fr 1fr; gap: 1.6em; align-items: start; }
}
@container pres (min-width: 900px) {
  .pres .grid-3, .pres .grid-6, .pres .know-grid { grid-template-columns: repeat(3, 1fr); }
  .pres .grid-3 > :last-child:nth-child(odd), .pres .know-grid > :last-child:nth-child(odd) { grid-column: auto; }
  .pres .steps { grid-template-columns: 1fr auto 1fr auto 1fr; }
  .pres .arrow svg { transform: none; }
}
@container pres (min-width: 1000px) {
  .pres .grid-5, .pres .chime-strip { grid-template-columns: repeat(5, 1fr); }
  .pres .grid-5 > :last-child:nth-child(odd), .pres .chime-strip > :last-child:nth-child(odd) { grid-column: auto; }
}

/* ---- Presenting: a fixed 16:9 stage, scaled whole to the screen ------------
   The stage is laid out at 1600 by 900 and app.js scales it to fit the screen
   above the small bar (--k, --top), so a projector shows the whole slide; if a
   slide's words would run past the stage, app.js steps its type down until
   they fit (--fit). */
body.app.presenting { overflow: hidden; }
/* #app is its own stack (z-index 1), so the footer would paint over the stage: lift it while presenting */
body.app.presenting #app { z-index: 50; }
body.app.presenting .pres .stage {
  position: fixed; z-index: 40; left: 50%; top: var(--top, 50vh);
  width: 1600px; height: 900px; border-radius: 0;
  transform: translate(-50%, -50%) scale(var(--k, 0.5)); transform-origin: 50% 50%;
  box-shadow: 0 0 0 200vmax var(--a-night);
  background: var(--a-night);
}
body.app.presenting .pres .slide {
  --fs-title: 2.3em; --fs-cover: 3em; --fs-lead: 1.3em; --fs-hand: 1.6em; --fs-big: 3.8em;
  height: 100%; border-radius: 0; font-size: var(--fit, 28px);
  padding: 56px 88px 64px;
}
body.app.presenting .pres .hud { position: fixed; z-index: 41; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: rgba(27, 20, 36, 0.85); }
.pres .hud { display: none; }
.pres .hud button { min-width: 44px; min-height: 44px; border-radius: 22px; border: 0; background: none; color: var(--a-head); font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; padding: 0 12px; }
.pres .hud span { font-size: 14px; color: var(--a-body); }
@media (prefers-reduced-motion: reduce) { .pres .slide.moving-next, .pres .slide.moving-back { animation: none; } }
.pres .know-contact .know-moved { flex-basis: 100%; }