/* The public pages' shared stylesheet: index, training, about.
   Extracted from index.html on 2026-09-03 so the three pages share one
   design. The agent room keeps its own sheet (agent.css); the section
   figures keep theirs (figures.css). */

:root {
  --paper: #f3f0e8;
  --ink: #141412;
  --quiet: #66635c;
  --ember: #f4581f;
  --line: rgba(20, 20, 18, 0.24);
  --pad: clamp(1.25rem, 4vw, 4.5rem);
  --frame: 92rem;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  /* The rubber band ground: paper past the top, the flame room's dark
     past the bottom, so neither overscroll flashes the wrong world. The
     gradient is painted against the document, not the viewport: a fixed
     attachment makes the browser repaint a screen sized gradient on every
     scrolled frame, which on a phone is most of a frame's budget. The
     seam lands mid document, under opaque content either way, so only the
     two ends of the gradient are ever seen and they are unchanged. */
  background: linear-gradient(to bottom, var(--paper) 50%, #0e0c0a 50%);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
}

::selection {
  background: var(--ember);
  color: #fff;
}

.skip-link {
  position: fixed;
  z-index: 20;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.65rem 0.8rem;
  transform: translateY(-180%);
  background: var(--ink);
  color: #fff;
  font-size: 0.8rem;
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

.frame {
  width: min(100%, var(--frame));
  margin: 0 auto;
  padding-inline: var(--pad);
}

.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 2rem;
  align-items: start;
  padding-top: clamp(1.2rem, 2.4vw, 2.3rem);
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--ink);
}

.masthead-name {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: clamp(0.45rem, 1.2vw, 0.85rem);
  min-width: 0;
  white-space: nowrap;
}

.mark {
  flex: none;
  display: block;
}

.masthead-name .mark {
  width: clamp(1.5rem, 2.4vw, 2.2rem);
  height: clamp(1.5rem, 2.4vw, 2.2rem);
  align-self: center;
}

.outcome .mark {
  width: clamp(2.4rem, 4vw, 3.4rem);
  height: clamp(2.4rem, 4vw, 3.4rem);
  margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}

.footer-inner .mark {
  width: 0.95rem;
  height: 0.95rem;
  display: inline-block;
  vertical-align: -0.14em;
  margin-right: 0.45rem;
}

.wordmark {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 2.05rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}

.wordmark-translation {
  margin: 0;
  color: var(--quiet);
  font-size: clamp(0.62rem, 1vw, 0.72rem);
  letter-spacing: 0.015em;
  line-height: 1.25;
}

.masthead-notes {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: clamp(1.3rem, 3vw, 3.4rem);
  color: var(--quiet);
  font-size: 0.75rem;
  line-height: 1.35;
}

.masthead-notes p {
  margin: 0;
}

.masthead-notes strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

/* The way into the Hearth, the members' room. A word with an ember, top
   right, on every viewport: on phones it holds that corner while the
   masthead stacks beneath it. */
.members-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: start;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease;
}

.members-link::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 8px var(--ember);
}

.members-link:hover,
.members-link:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

.hero {
  /* The room is the page's second panel, so the hero stops short of the
     fold: its dark top edge should show on the first screen. Height is
     capped by width too: the headline scales with vw, so a rem/svh-only
     floor opens a dead band on tall narrow viewports. */
  min-height: min(36rem, calc(100svh - 19rem), calc(22vw + 14rem));
  display: grid;
  grid-template-rows: 1fr auto auto;
  padding-top: clamp(2.2rem, 5vh, 4rem);
  padding-bottom: clamp(1.2rem, 2vw, 1.6rem);
}

/* The seam into the room: a small label sitting on the paper's last line. */
.start-label {
  margin: clamp(1.8rem, 3vw, 2.4rem) 0 0;
  color: var(--ember);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.start-label::after {
  content: " \2193";
}

.hero h1 {
  align-self: center;
  margin: 0;
  max-width: 12ch;
  font-size: clamp(3.3rem, 8.2vw, 7.6rem);
  font-weight: 500;
  letter-spacing: -0.075em;
  line-height: 0.86;
  text-wrap: balance;
}

.hero h1 span {
  display: block;
}

.hero h1 .line-two {
  margin-left: clamp(0.8rem, 7vw, 7rem);
}

.hero h1 .line-three {
  margin-left: clamp(2.6rem, 20vw, 20rem);
  color: var(--ember);
}

.hero-bottom {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(17rem, 36rem);
  gap: clamp(2rem, 8vw, 9rem);
  align-items: start;
  margin-top: clamp(2.2rem, 5vh, 4rem);
}

.ember-line {
  position: relative;
  height: 1px;
  margin-top: 0.85rem;
  background: var(--line);
}

.ember-line::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: min(38%, 9rem);
  background: var(--ember);
}

.hero-deck {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.15;
  text-wrap: pretty;
}


.content-section {
  display: grid;
  grid-template-columns: minmax(9rem, 0.8fr) minmax(0, 2.6fr);
  gap: clamp(2rem, 8vw, 10rem);
  padding-top: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(4rem, 7vw, 7rem);
  border-top: 1px solid var(--ink);
}

.section-label {
  margin: 0;
  padding-top: 0.42rem;
  color: var(--quiet);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.section-copy {
  max-width: 65rem;
}

.section-copy h2 {
  margin: 0 0 clamp(2.2rem, 4vw, 4rem);
  font-size: clamp(2.8rem, 6.4vw, 6.2rem);
  font-weight: 500;
  letter-spacing: -0.065em;
  line-height: 0.94;
}

.ember-accent {
  color: var(--ember);
}

.section-copy p {
  max-width: 38ch;
  margin: 0 0 1.4rem;
  font-size: clamp(1.35rem, 2.25vw, 2rem);
  letter-spacing: -0.03em;
  line-height: 1.22;
  text-wrap: pretty;
}

.section-copy p:last-child {
  margin-bottom: 0;
}

.founder .section-copy p {
  font-size: clamp(1.2rem, 1.75vw, 1.6rem);
  line-height: 1.3;
}

.shape .section-copy {
  max-width: 68rem;
}

.shape .shape-lead {
  max-width: 22ch;
  margin: 0;
  font-size: clamp(2.7rem, 5.2vw, 5.2rem);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 0.98;
  text-wrap: balance;
}

.shape-details {
  /* max-width, not width: a full-width block with a left margin runs
     past its column, which is what pushed the figure off a tablet. */
  max-width: 38rem;
  margin-top: clamp(2.8rem, 5vw, 5.4rem);
  margin-left: clamp(0rem, 7vw, 7rem);
}

.shape .shape-details p {
  max-width: 40ch;
  margin-bottom: 1.55rem;
  font-size: clamp(1.25rem, 1.8vw, 1.65rem);
  letter-spacing: -0.02em;
  line-height: 1.34;
}

.founder-role {
  margin: 0.55rem 0 0;
  color: var(--quiet);
  font-size: 0.9rem;
  line-height: 1.35;
}

.founder-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.05rem;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  transition: border-color 140ms ease, color 140ms ease;
}

.social-link svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: currentColor;
  display: block;
}

.social-link:hover,
.social-link:focus-visible {
  border-color: var(--ember);
  color: var(--ember);
}

.footer-social {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.footer-social .social-link {
  padding: 0.6rem;
  color: var(--quiet);
}

.footer-social .social-link:hover,
.footer-social .social-link:focus-visible {
  color: var(--ember);
}

.founder-photo {
  display: block;
  width: min(100%, 15rem);
  height: auto;
  margin-top: 1.7rem;
  border-radius: 12px;
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(13rem, 21rem);
  gap: clamp(2.4rem, 5vw, 5rem);
  align-items: start;
}

.about-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.about-copy p {
  max-width: 44ch;
  font-size: clamp(1.2rem, 1.55vw, 1.5rem);
  line-height: 1.4;
}

/* The page goes dark twice: here, and again in the flame room. Both use
   the same ground, so the dark reads as one material the page returns
   to rather than as two nearly matching blacks. */
.outcome {
  background: #0e0c0a;
  color: var(--paper);
}

.outcome-inner {
  min-height: min(44rem, 76svh);
  display: grid;
  align-content: center;
  padding-top: clamp(5rem, 11vw, 11rem);
  padding-bottom: clamp(5rem, 11vw, 11rem);
}

.outcome p {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(3.15rem, 7.6vw, 7.5rem);
  font-weight: 500;
  letter-spacing: -0.07em;
  line-height: 0.93;
  text-wrap: balance;
}

.outcome .equation {
  max-width: 22ch;
}

.outcome .eq-line {
  display: block;
}

.outcome .eq-op {
  opacity: 0.45;
  font-weight: 400;
}

.outcome .outcome-badge {
  max-width: none;
  margin-bottom: 1.6rem;
  color: var(--ember);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.outcome em {
  color: var(--ember);
  font-style: normal;
}

.footer-inner a {
  color: inherit;
  text-underline-offset: 0.18em;
}

/* The agent, embedded. The room is full bleed and its ground is the
   agent's own ground colour, so the app has no visible box: the page
   simply goes dark for the height of the conversation.

   The lead-in stands on that same ground rather than on paper, so the
   page makes one cut into the dark instead of two, and the headline is
   the ceiling of the room instead of an orphan title card above it.
   The cut itself is the move the outcome block already makes, so the
   room arrives in the page's own language. */
.flame-room {
  width: 100%;
  height: max(36rem, min(100svh, 58rem));
  background: #0e0c0a;
  overflow: hidden;
}

/* The seat, on a phone.

   A wheel can be clamped in the middle of a gesture, which is how the
   room seats itself on a laptop (agent.js routes the wheel by hand). A
   flick cannot: stopping one would mean preventing touchmove across the
   whole room, and that takes the page's own scrolling away from it. So
   the seat is handed to the browser instead. The document carries a
   single proximity snap point at the room's bottom edge, so a flick
   toward the room comes to rest with the room resting on the bottom of
   the screen, and only then does the transcript inside it open. One
   snap area, and proximity rather than mandatory, so everything above
   and below the room still scrolls exactly as it always did.

   Touch pointers only: a laptop keeps the hand routed wheel, untouched.

   agent.js takes the snap off the document (.room-unsnapped) for the
   three moments where a pull is deliberately away from the seat and a
   snap back would fight it: the keyboard pin, the chaining out of the
   transcript, and the Back to page button. */

@media (hover: none) and (pointer: coarse) {
  html {
    scroll-snap-type: y proximity;
  }

  .flame-room {
    scroll-snap-align: end;
  }

  html.room-unsnapped {
    scroll-snap-type: none;
  }
}

/* The mounted room sizes itself (agent.css owns .chama-agent-mode-embed),
   and it has to be able to leave that size behind when a phone keyboard
   pins it to the visual viewport. An id rule here would outrank every
   class rule in agent.css and hold it at the room's height. */

.flame-noscript {
  margin: 0;
  padding: clamp(2rem, 6vw, 4rem);
  color: #ece7dc;
  font-size: 1.05rem;
  line-height: 1.5;
}

footer {
  padding-bottom: 2rem;
}

/* The footer that follows the flame room stands on the room's own
   ground and needs no rule above it: the page ends inside the dark
   rather than cutting back to paper for four lines of small print.
   The About section still gets the borderless treatment for free
   where it meets the outcome block, because an ink border on an ink
   ground is invisible. */
.footer-quiet .footer-inner {
  padding-top: 0;
  border-top: 0;
}

.footer-quiet {
  padding-top: clamp(2.6rem, 5vw, 4.4rem);
  background: #0e0c0a;
  color: #8d867c;
}

.footer-quiet .footer-inner {
  color: #8d867c;
}

.footer-quiet .footer-social .social-link {
  color: #8d867c;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--ink);
  color: var(--quiet);
  font-size: 0.75rem;
  line-height: 1.4;
}

.footer-inner p {
  margin: 0;
}

/* The About photo sits beside its copy only when the copy column is
   wide enough to keep a readable measure next to a 21rem picture. On a
   tablet the two columns of the section already take most of the width,
   so the photo steps under the words instead of squeezing them. */
@media (max-width: 1100px) {
  .about-grid {
    grid-template-columns: 1fr;
  }

  .about-photo {
    max-width: 24rem;
  }
}

@media (max-width: 760px) {
  /* Phones: the lockup and the Members pill share the first row as
     real grid neighbours, so neither can ever sit on the other. The
     lockup stacks its translation under the wordmark, with the mark
     centred on the pair, and the wordmark scales with the viewport so
     it always stops short of the pill. The notes take the row below. */
  .masthead {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(0.9rem, 3vw, 1.5rem);
    row-gap: 1.15rem;
    align-items: center;
  }

  .masthead-name {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(0.45rem, 1.8vw, 0.85rem);
    row-gap: 0.15rem;
    align-items: baseline;
    white-space: normal;
  }

  .masthead-name .mark {
    grid-row: 1 / 3;
    align-self: center;
  }

  .wordmark {
    font-size: clamp(1.05rem, 5.3vw, 1.35rem);
  }

  .wordmark-translation {
    grid-column: 2;
  }

  .members-link {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    padding: 0.36rem 0.68rem;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
  }

  .masthead-notes {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
  }

  .hero {
    min-height: min(calc(100svh - 24rem), calc(50vw + 12rem));
    padding-top: clamp(2.4rem, 6vh, 3.6rem);
  }

  .hero h1 {
    font-size: clamp(2.5rem, 12.4vw, 6.4rem);
  }

  .hero h1 .line-two {
    margin-left: 0.55rem;
  }

  .hero h1 .line-three {
    margin-left: 2rem;
  }

  .hero-bottom,
  .content-section {
    grid-template-columns: 1fr;
  }

  .hero-bottom {
    gap: 1.8rem;
  }

  .content-section {
    gap: 2.4rem;
  }

  .section-copy p {
    max-width: none;
  }

  .shape .shape-lead {
    max-width: 16ch;
    font-size: clamp(2.55rem, 12vw, 3.25rem);
    line-height: 0.98;
  }

  .shape-details {
    width: auto;
    margin-top: 2.6rem;
    margin-left: clamp(0rem, 6vw, 1.5rem);
  }

  .shape .shape-details p {
    max-width: 30ch;
    font-size: clamp(1.2rem, 5.2vw, 1.38rem);
    line-height: 1.4;
  }

  .outcome-inner {
    min-height: 70svh;
  }

  .about-photo {
    margin-inline: auto;
  }

  .founder-photo {
    margin-inline: auto;
  }

  .flame-room {
    height: 100svh;
  }

  .footer-inner {
    display: grid;
    gap: 0.3rem;
  }
}

@media (max-width: 380px) {
  .masthead-notes {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .hero {
    min-height: auto;
  }
}

/* The four questions of the first conversations. */
.steps {
  margin: 0 0 1.55rem;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  position: relative;
  padding-left: 2.6rem;
  margin-bottom: 0.9rem;
  font-size: clamp(1.25rem, 1.8vw, 1.65rem);
  letter-spacing: -0.02em;
  line-height: 1.34;
  counter-increment: step;
}

.steps li::before {
  content: "0" counter(step);
  position: absolute;
  left: 0;
  top: 0.32em;
  color: var(--ember);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* The quiet links to the other pages. */
.also-links {
  display: grid;
  gap: 1.1rem;
}

.also-links a {
  display: inline-block;
  max-width: 34ch;
  color: var(--ink);
  font-size: clamp(1.2rem, 1.75vw, 1.6rem);
  letter-spacing: -0.02em;
  line-height: 1.3;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color 160ms ease, color 160ms ease;
}

.also-links a::after {
  content: " \2197";
  color: var(--ember);
}

.also-links a:hover,
.also-links a:focus-visible {
  color: var(--ember);
  border-color: var(--ember);
}

/* Sub pages: the wordmark is the way home, and the page ends on paper
   with a dark footer band rather than inside the flame room. */
.masthead-name a {
  display: contents;
  color: inherit;
  text-decoration: none;
}

.masthead-name a:focus-visible .wordmark {
  outline: 2px solid var(--ember);
  outline-offset: 4px;
}

.section-copy a,
.shape-details a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ember);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
}

.section-copy a:hover,
.shape-details a:hover {
  color: var(--ember);
}

.page-end {
  padding-top: clamp(2.6rem, 5vw, 4.4rem);
  padding-bottom: 2rem;
  background: #0e0c0a;
  color: #8d867c;
}

.page-end .footer-inner {
  padding-top: 0;
  border-top: 0;
  color: #8d867c;
}

.page-end .footer-social .social-link {
  color: #8d867c;
}

/* The subpages' way in to the conversation: a dark band with one link. */
.talk-band {
  background: #0e0c0a;
  color: #ece7dc;
}

.talk-band .content-section {
  border-top: 0;
  padding-top: clamp(4rem, 8vw, 8rem);
  padding-bottom: clamp(3rem, 6vw, 6rem);
}

.talk-band .section-label {
  color: #8d867c;
}

.talk-band .section-copy h2 {
  margin-bottom: clamp(1.4rem, 2.6vw, 2.4rem);
}

.talk-band .section-copy p {
  color: #b9b2a6;
}

.talk-band .also-links a {
  color: #ece7dc;
  border-color: rgba(236, 231, 220, 0.3);
}