/* Quorum Ag — shared components. */

/* Header ----------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: calc(0.9rem + env(safe-area-inset-top, 0px)) var(--gutter) 0.9rem;
  transition: background-color 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
}
.site-header.is-scrolled, .site-header--solid {
  background: rgba(246, 239, 224, 0.94);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
  box-shadow: 0 1px 0 var(--rule), 0 10px 30px -24px rgba(60, 40, 10, 0.5);
  padding-block: calc(0.55rem + env(safe-area-inset-top, 0px)) 0.55rem;
}
.nav { display: flex; align-items: center; gap: clamp(1rem, 1.4vw, 2rem); }
.nav a:not(.btn) {
  text-decoration: none; font-weight: 650; font-size: 0.95rem; letter-spacing: 0.01em; white-space: nowrap;
  padding-block: 0.3rem; background: linear-gradient(var(--wattle), var(--wattle)) no-repeat 0 100% / 0 3px;
  transition: background-size 0.3s var(--ease-grow);
}
.nav a:not(.btn):hover, .nav a[aria-current] { background-size: 100% 3px; }
/* over a painting, the links carry the same soft paper halo as the opener's words */
.site-header:not(.is-scrolled):not(.site-header--solid) .nav a:not(.btn) { text-shadow: 0 0 2px rgba(250, 244, 226, 0.95), 0 0 5px rgba(250, 244, 226, 0.95), 0 0 12px rgba(250, 244, 226, 0.9); }
/* over a night painting: light words until the header turns to paper */
/* over a painting the tone behind a focus ring changes from place to place, so the focused link or button
   in the see-through header, or in a light opening, stands on a paper plate, with its ring on that */
.site-header:not(.is-scrolled):not(.site-header--solid):not(.site-header--on-dark) .nav a:not(.btn):focus-visible { box-shadow: 0 0 0 10px rgba(250, 244, 226, 0.95); }
.site-header:not(.is-scrolled):not(.site-header--solid):not(.site-header--on-dark) .btn:focus-visible,
.hero__content .btn:focus-visible, .opener:not(.opener--dark):not(.opener--night) .opener__content .btn:focus-visible { box-shadow: 0 3px 0 var(--btn-edge), 0 0 0 10px rgba(250, 244, 226, 0.95); }
.site-header--on-dark:not(.is-scrolled):not(.is-open) { --btn-edge: #fbf3e1; }
.site-header--on-dark:not(.is-scrolled):not(.is-open) .lockup,
.site-header--on-dark:not(.is-scrolled):not(.is-open) .nav a:not(.btn) { color: #fbf3e1; }
.site-header--on-dark:not(.is-scrolled):not(.is-open) .nav a:not(.btn) { text-shadow: 0 0 12px rgba(26, 30, 70, 0.9), 0 0 3px rgba(26, 30, 70, 0.8); }
.site-header--on-dark:not(.is-scrolled):not(.is-open) .nav .btn--ghost { --btn-bg: rgba(31, 38, 73, 0.35); --btn-fg: #fbf3e1; --btn-edge: #fbf3e1; }
.nav__toggle { display: none; }
/* eight items and the way in fit on one line from about 1240px; up to 1260px they fold into the Menu button
   (the hub's header in learn.css folds with it) */
@media (max-width: 1260px) {
  .nav__toggle {
    display: inline-flex; align-items: center; gap: 0.5rem; border: 2px solid var(--ink); border-radius: 999px;
    background: var(--card); padding: 0.45rem 0.9rem; font-weight: 700; font-size: 0.9rem; cursor: pointer;
  }
  .nav {
    position: fixed; inset: 0 0 auto 0; top: 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: calc(5rem + env(safe-area-inset-top, 0px)) var(--gutter) 1.6rem;
    background: var(--paper); box-shadow: 0 20px 40px -20px rgba(40, 25, 10, 0.4);
    /* taller than a phone held sideways, it scrolls rather than running off the bottom */
    max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
    transform: translateY(-105%); visibility: hidden; z-index: -1;
    transition: transform 0.45s var(--ease-grow), visibility 0s 0.45s;
  }
  .nav a:not(.btn) { font-family: var(--f-display); font-size: 1.6rem; font-weight: 520; padding: 0.55rem 0; border-bottom: 1px solid var(--rule); background: none; }
  .nav .btn { margin-top: 1.1rem; justify-content: center; }
  .site-header.is-open .nav { transform: none; visibility: visible; transition: transform 0.45s var(--ease-grow); }
  .site-header--on-dark:not(.is-scrolled):not(.is-open) .nav__toggle { color: #fbf3e1; border-color: #fbf3e1; background: rgba(31, 38, 73, 0.4); }
}

/* Lockup: QUORUM with AG sitting half-in between two rules, and close beneath, between two fine rules that run
   out to the wordmark's edges, the handshake drawn in one line (assets/img/brand/hands-line.svg), as a mask in the
   words' colour, so it goes light wherever they do (docs/decisions/2026-10-12-lockup-hands-below.md: no name under
   the words, no painting behind them). --lk is the wordmark's size, and everything else is sized from it. ------ */
.lockup { --lk: 1.42rem; display: inline-grid; justify-items: stretch; align-items: center; line-height: 1; text-decoration: none; color: var(--ink); }
.lockup__word { display: inline-flex; align-items: center; font-family: var(--f-mark); font-weight: 700; font-size: var(--lk); letter-spacing: 0.07em; }
.lockup__ag { font-size: 0.5em; letter-spacing: 0.08em; margin-left: 0.22em; padding: 0.18em 0.2em 0.12em; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
.lockup__mark { display: flex; align-items: center; gap: 0.5em; margin-top: calc(var(--lk) * 0.06); font-size: var(--lk); line-height: 0; }
.lockup__mark::before, .lockup__mark::after { content: ""; flex: 1 1 0; min-width: 0.8em; height: 1px; background: currentColor; opacity: 0.6; }
.lockup__handshake { flex: none; width: calc(var(--lk) * 2.4); aspect-ratio: 1238 / 471; background: currentColor;
  -webkit-mask: url(../img/brand/hands-line.svg) center / contain no-repeat; mask: url(../img/brand/hands-line.svg) center / contain no-repeat; }
.lockup--xl .lockup__mark::before, .lockup--xl .lockup__mark::after { height: 1.5px; }
.lockup--xl { --lk: clamp(2.6rem, 7vw, 5.4rem); }
.lockup--light { color: var(--paper); }

/* Buttons ---------------------------------------------------------------- */
.btn {
  --btn-bg: var(--card); --btn-fg: var(--ink); --btn-edge: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.8rem 1.35rem; font-weight: 750; font-size: 1rem; line-height: 1.1; letter-spacing: 0.01em;
  color: var(--btn-fg); background: var(--btn-bg); text-decoration: none; cursor: pointer;
  border: 2px solid var(--btn-edge); border-radius: 46px 40px 44px 38px / 40px 46px 38px 44px;
  box-shadow: 0 3px 0 var(--btn-edge);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--btn-edge); text-decoration: none; }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--btn-edge); }
.btn--gold { --btn-bg: var(--wattle); }
.btn--green { --btn-bg: var(--canopy); --btn-fg: var(--paper); --btn-edge: #0f2a18; }
.btn--ghost { --btn-bg: rgba(251, 247, 238, 0.72); }
.btn--small { padding: 0.55rem 1rem; font-size: 0.9rem; }
.btn svg { width: 1.1em; height: 1.1em; }

.link-arrow { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 750; text-decoration: none; }
.link-arrow::after { content: "→"; content: "→" / ""; transition: transform 0.2s ease; }
.link-arrow:hover::after { transform: translateX(4px); }

/* The reading strip: eight pads, from the soil to the sky ----------------- */
.strip { display: inline-flex; gap: 0.28rem; align-items: center; vertical-align: middle; }
.strip i {
  display: block; width: 0.85rem; height: 0.85rem; border-radius: 3px; background: var(--c);
  box-shadow: inset 0 0 0 1.5px rgba(30, 43, 34, 0.9); transform: rotate(var(--r, 0deg));
}
.strip i:nth-child(8n + 1) { --c: #8a3a22; --r: -4deg; }
.strip i:nth-child(8n + 2) { --c: #c0532f; --r: 3deg; }
.strip i:nth-child(8n + 3) { --c: #e08a4e; --r: -2deg; }
.strip i:nth-child(8n + 4) { --c: #f2b632; --r: 4deg; }
.strip i:nth-child(8n + 5) { --c: #b9d25a; --r: -3deg; }
.strip i:nth-child(8n + 6) { --c: #5f9a3c; --r: 2deg; }
.strip i:nth-child(8n + 7) { --c: #245a35; --r: -3deg; }
.strip i:nth-child(8n + 8) { --c: #5b7fa0; --r: 3deg; }
.strip--lg i { width: 1.4rem; height: 1.4rem; border-radius: 4px; }
.strip--band { display: flex; justify-content: center; gap: 0.5rem; padding: 0.9rem var(--gutter); overflow: hidden; }
.strip--band i { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 5px; }
.strip i.is-dim { opacity: 0.22; }
/* The number on an episode's pad, on the episode's colour: paper on the dark colours, white on the rust,
   ink on the pale ones and near-black on the green and the blue, so it reads at 4.5:1 or better. Keyed to
   the colour wherever it's set (a page, a list's item, the series' link, the waitlist's packet), so it
   holds whichever episode a list starts with. */
[style*="#8a3a22"], [style*="#245a35"] { --on: #fff8ea; }
[style*="#c0532f"] { --on: #fff; }
[style*="#e08a4e"], [style*="#f2b632"], [style*="#b9d25a"] { --on: var(--ink); }
[style*="#5f9a3c"], [style*="#5b7fa0"] { --on: #050806; }

/* Paper cards, pasted photos, hand notes, stamps -------------------------- */
.card {
  position: relative; background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow-paper); padding: clamp(1.2rem, 2.4vw, 2rem);
}
.card--ruled {
  background-image: repeating-linear-gradient(transparent 0 31px, rgba(91, 127, 160, 0.18) 31px 32px);
  background-color: var(--card);
}
.card--grid {
  background-color: #fcf9f1;
  background-image: linear-gradient(rgba(91, 127, 160, 0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(91, 127, 160, 0.13) 1px, transparent 1px);
  background-size: 22px 22px;
}

.pasted {
  --tilt: -2deg;
  position: relative; margin: 0; background: #fffdf8; padding: 0.7rem 0.7rem 3rem;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 22px 44px -26px rgba(60, 38, 14, 0.55);
  transform: rotate(var(--tilt));
}
.pasted img { width: 100%; aspect-ratio: var(--ratio, 4 / 5); object-fit: cover; filter: saturate(1.04) contrast(1.02); }
.pasted::before, .pasted::after {
  content: ""; position: absolute; width: 38%; height: 1.7rem; top: -0.8rem;
  background: rgba(236, 219, 168, 0.78); box-shadow: 0 1px 2px rgba(60, 40, 10, 0.12);
  clip-path: polygon(2% 10%, 8% 0, 16% 12%, 26% 2%, 38% 10%, 50% 0, 62% 9%, 74% 1%, 86% 11%, 94% 2%, 100% 12%, 98% 90%, 90% 100%, 80% 88%, 68% 98%, 56% 90%, 44% 100%, 32% 90%, 20% 99%, 10% 89%, 0 96%);
}
.pasted::before { left: 8%; transform: rotate(-7deg); }
.pasted::after { right: 6%; transform: rotate(6deg); }
/* the caption sits in the frame's bottom band, and the band grows when the caption runs to more lines (on a
   phone), so it never writes over the photo */
.pasted figcaption {
  display: flex; align-items: flex-end; min-height: 2.45rem; margin: 0 0.3rem -2.45rem; padding-top: 0.45rem;
  font-family: var(--f-hand); font-size: 1.4rem; line-height: 1.05; color: var(--ink-2);
}
.pasted .credit { position: absolute; right: 0.8rem; top: 1.2rem; font: 700 0.66rem/1 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; background: rgba(255, 253, 248, 0.9); padding: 0.3rem 0.45rem; border-radius: 3px; }

.note { font-family: var(--f-hand); font-weight: 600; font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1; color: var(--earth); display: inline-flex; align-items: flex-start; gap: 0.3rem; transform: rotate(var(--tilt, -3deg)); }
.note svg { width: 3.2rem; height: auto; flex: none; overflow: visible; }
.note path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.stamp {
  display: inline-block; font: 800 0.66rem/1.2 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--earth); border: 2px solid currentColor; border-radius: 4px; padding: 0.35rem 0.55rem;
  transform: rotate(var(--tilt, -3deg)); background: rgba(251, 247, 238, 0.6);
  -webkit-mask-image: var(--grain-mask); mask-image: var(--grain-mask);
}
:root { --grain-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.6 1.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.chip {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.32rem 0.72rem; border-radius: 999px;
  background: var(--paper-2); color: var(--ink-2); font-size: 0.82rem; font-weight: 700; line-height: 1.2; text-decoration: none;
  border: 1px solid rgba(30, 43, 34, 0.12);
}
.chip--gold { background: var(--wattle-2); color: var(--ink); }
.chip--sap { background: var(--sap-2); color: var(--ink); }
.chip--earth { background: #f1c9b3; color: #5e2414; }
.chip--dark { background: rgba(246, 239, 224, 0.12); color: var(--paper); border-color: rgba(246, 239, 224, 0.18); }
.chip .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }

/* Element tiles: the chemistry, drawn like crate stencils ---------------- */
.el {
  --c: var(--wattle-2);
  position: relative; display: inline-grid; place-items: center; width: 4.1rem; aspect-ratio: 1;
  background: var(--c); border: 2px solid var(--ink); border-radius: 9px 7px 10px 8px;
  box-shadow: 3px 3px 0 var(--ink); font-family: var(--f-display); font-weight: 680; font-size: 1.65rem; line-height: 1;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.el small { position: absolute; top: 0.28rem; left: 0.4rem; font: 700 0.6rem/1 var(--f-body); }
.el--n { --c: var(--min-n-pale); } .el--p { --c: var(--min-p-pale); } .el--k { --c: var(--min-k-pale); } .el--ca { --c: var(--min-ca-pale); }
.el--mg { --c: var(--min-mg-pale); } .el--s { --c: var(--min-s-pale); } .el--fe { --c: var(--min-fe-pale); } .el--mn { --c: var(--min-mn-pale); }
.el--zn { --c: var(--min-zn-pale); } .el--cu { --c: var(--min-cu-pale); } .el--b { --c: var(--min-b-pale); } .el--mo { --c: var(--min-mo-pale); }
.el--si { --c: var(--min-si-pale); } .el--co { --c: var(--min-co-pale); } .el--se { --c: var(--min-se-pale); } .el--i { --c: var(--min-i-pale); }
.el--ni { --c: var(--min-ni-pale); } .el--cl { --c: var(--min-cl-pale); } .el--na { --c: var(--min-na-pale); }
/* One colour per mineral, wherever the site draws one by name (qag-22cv; docs/decisions/2026-10-06-one-mineral-palette.md):
   a pale one for its tiles (the wiki's, the builder's) and a deep one for its discs (the wiki's drawings) and
   Mulder's chart. Each a hue a grower might know it by: nitrogen leafy teal, phosphorus the purple of its
   shortage, potassium apricot, calcium lime's cream, magnesium chlorophyll green, sulfur yellow, iron rust,
   manganese rose, zinc periwinkle, copper bluestone's blue, boron pink, molybdenum stone, silicon glass; and since
   18 October, cobalt blue, selenium's red, iodine's violet, nickel's silver, chlorine's yellow-green and the sodium
   lamp's orange. Every deep one carries ink but phosphorus, iron, cobalt, selenium and iodine, which carry paper
   (--min-on-<x>). Measured by
   tools/qa/palette.py: no two alike, side by side, nor for the commonest colour blindness. */
:root {
  --min-n: #53a28d; --min-p: #714d93; --min-k: #edb980; --min-ca: #f4e6c4; --min-mg: #82b668; --min-s: #e8d968;
  --min-fe: #aa5131; --min-mn: #e19ba5; --min-zn: #aeabdc; --min-cu: #64a2d5; --min-b: #d07cac; --min-mo: #a08c71;
  --min-si: #9cd6dd; --min-co: #235db4; --min-se: #b33845; --min-i: #801c6d; --min-ni: #b9baba; --min-cl: #aaa149;
  --min-na: #fb841a; --min-on-p: var(--card); --min-on-fe: var(--card); --min-on-co: var(--card); --min-on-se: var(--card);
  --min-on-i: var(--card);
  --min-n-pale: #c2eadd; --min-p-pale: #e2d3f7; --min-k-pale: #ffd8b9; --min-ca-pale: #f4e6c4; --min-mg-pale: #cdeabf;
  --min-s-pale: #f8f0ad; --min-fe-pale: #f2c6b8; --min-mn-pale: #fcdede; --min-zn-pale: #dce4fe; --min-cu-pale: #bbdaf5;
  --min-b-pale: #f2c9e3; --min-mo-pale: #dbd3c9; --min-si-pale: #d3f0f3; --min-co-pale: #c7d0ff; --min-se-pale: #ffc2c7;
  --min-i-pale: #feebfd; --min-ni-pale: #cbd4d5; --min-cl-pale: #d3d5ac; --min-na-pale: #fde8db;
}

/* Hand-drawn marks on words ---------------------------------------------- */
/* inline, not inline-block: a screen reader hears an inline-block as its own word, so "Sam." read as
   "Sam ." (qag-enqu). Its drawing takes the line an inline-block had: one line-height, centred. */
.mark { position: relative; }
.mark > svg { position: absolute; left: -6%; width: 112%; top: 0; height: 100%; top: calc(50% - 0.5lh); height: 1lh; overflow: visible; pointer-events: none; z-index: -1; }
.mark path { fill: none; stroke: var(--mark, var(--wattle)); stroke-width: var(--mark-w, 7); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600); transition: stroke-dashoffset 1.2s var(--ease-grow) 0.35s; }
.mark.is-in path, .no-motion .mark path { stroke-dashoffset: 0; }

/* Reveal on scroll ------------------------------------------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease-grow), transform 0.9s var(--ease-grow); transition-delay: var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.no-motion [data-reveal] { opacity: 1 !important; transform: none !important; }

/* Section heads ---------------------------------------------------------- */
.head { display: grid; gap: 1rem; max-width: 46rem; }
.head--center { margin-inline: auto; text-align: center; justify-items: center; }
.head--split { max-width: none; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); column-gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.head--split > :not(.lede) { grid-column: 1; }
.head--split > .lede { grid-column: 2; grid-row: 1 / span 2; align-self: end; padding-bottom: 0.4rem; }
@media (max-width: 860px) { .head--split { grid-template-columns: 1fr; } .head--split > .lede { grid-column: 1; grid-row: auto; padding-bottom: 0; } }
.head .eyebrow .strip i { width: 0.6rem; height: 0.6rem; }
.eyebrow__ico { width: 1.35rem; height: 1.35rem; }

/* Torn paper edges between sections that change colour -------------------- */
:root {
  --tear-a: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1000 40%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 40L0 16.5L12 21.7L24 22L37 22.1L43 22.7L47 22.1L56 19.5L67 16.1L74 19.3L80 16.3L88 19.5L100 19.6L112 22.2L118 20.1L125 18.5L136 15.3L145 12L149 13.2L161 11.6L170 8.3L180 10.2L191 9.5L201 6.8L210 7L219 5L233 7.5L238 5L245 6.4L256 6.5L270 5L276 8.3L280 5L290 5L304 9.3L315 10.2L320 10.1L331 9.6L341 8.3L351 5.8L361 5L369 5L374 5L379 5L389 5.4L398 5.5L405 5L414 5.1L427 5L434 5L442 5L450 6.4L455 6.9L461 5L469 5L476 5L490 5L501 5L508 5L520 8.1L531 12.7L541 12.4L551 8.9L557 11.7L570 9.4L578 6.1L592 8L600 11L612 17L625 16.9L637 14.6L641 15.3L645 18.3L650 15.7L658 16.4L668 17.9L674 17L686 18.1L694 19.9L703 23L709 23.7L719 25.2L723 21.8L731 21.3L741 21.8L747 18.6L757 17.9L768 18.8L776 19.6L781 20.5L793 22.8L800 20.5L807 18.4L818 15.9L825 17.8L829 14.9L841 14L853 15.6L865 15.7L877 14.9L890 12.5L899 15.3L912 18.4L926 19.2L935 20.9L945 23.2L954 22.3L968 20.8L980 19.5L987 20.8L992 21.5L1000 20L1000 20L1000 40Z%27/%3E%3C/svg%3E");
  --tear-b: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1000 40%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 40L0 16.5L14 18.6L28 21.6L40 20.4L47 17.4L53 18.9L60 20.4L65 18L71 19.4L82 25.1L90 23.3L103 21.1L117 17.7L130 15.1L141 17.8L154 20.5L160 23.3L170 25L181 27.3L193 25.8L198 27.1L203 26.7L216 28.3L221 28.5L228 28.2L233 24.9L242 28L253 26.1L265 23.9L279 23.4L288 18.9L299 21.7L304 14L315 12.7L324 15.5L337 15L348 16.7L358 16.9L369 15.5L380 13.8L394 11L403 13.4L407 12.4L413 15.5L426 9.5L436 7.3L448 5L460 7.2L467 5L473 5L485 5L494 8L503 11.2L509 14.5L521 16.9L529 15.6L539 18.5L547 18.8L558 17.6L563 15.5L576 18L582 16.6L594 17.4L608 26.8L612 28.9L624 28.8L637 25.6L643 28.9L656 25.7L667 24.6L680 24L688 24.1L698 20.6L712 18.4L721 18.3L732 18.1L745 16.6L750 9.4L754 12.7L768 11.3L775 10.9L787 8L801 10.8L808 7.8L820 6.8L832 8.6L840 16.6L854 13.4L864 15.8L871 16.3L880 18.9L884 19.6L891 20.6L905 20.4L914 20.9L928 17.6L938 17.9L947 21.2L956 22.6L968 20.9L979 18.2L991 20.7L1000 20.7L1000 40Z%27/%3E%3C/svg%3E");
  --tear-c: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1000 40%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 40L0 16.5L7 17.6L14 16.7L20 19.7L27 18.2L41 16.5L52 17.6L64 20.2L74 22.3L86 23.6L96 26.3L104 26L117 24.9L131 28.2L137 25.2L148 26.8L156 27.5L164 24.7L172 24.6L181 25L186 30.4L198 33L206 30.5L216 32.1L230 30.4L239 31.5L249 33L258 29.7L268 29.5L281 30.4L290 31.4L304 32.7L310 29.5L324 29.6L334 28.2L344 25.2L352 27.6L361 30L368 32.5L377 29.9L387 28.4L396 25L403 27.2L412 28.2L419 30.6L430 31.3L443 33L455 28.3L464 27.9L470 27.1L480 28.4L492 28.9L502 25.7L508 28.5L521 29.7L526 27.3L534 27.8L544 31.2L554 33L563 29.9L573 26.5L582 29.4L587 28.9L601 28.7L613 27.4L625 29.2L638 32.6L649 32.6L658 33L670 33L681 33L689 33L694 31.9L699 31.5L705 31.6L715 33L719 29.8L727 32.4L740 33L751 33L761 25.9L774 26.9L787 26.7L792 28.7L796 30.7L801 31.1L813 31.4L823 28.7L827 27.8L834 30.6L840 32.1L849 33L860 29.7L868 26.5L881 29.4L889 31.9L902 30.4L916 28.6L921 29.6L934 32.6L943 33L951 26.5L955 27.5L966 26.7L972 29.5L977 25.5L987 25.9L992 29.2L999 30L1000 30L1000 40Z%27/%3E%3C/svg%3E");
}
.torn-top { z-index: 1; }
.torn-top::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: clamp(14px, 2.2vw, 30px);
  background: inherit; pointer-events: none;
  -webkit-mask: var(--tear, var(--tear-a)) 0 0 / 100% 100% no-repeat;
  mask: var(--tear, var(--tear-a)) 0 0 / 100% 100% no-repeat;
}
.torn-top--b::before { --tear: var(--tear-b); }
.torn-top--c::before { --tear: var(--tear-c); transform: scaleX(-1); }
.torn-top.on-paper::before { background: var(--grain) var(--paper); background-size: 260px 260px; }
/* a torn-top section is its own sheet of paper, so painted art inside it can multiply onto it */
.torn-top.on-paper { background-color: var(--paper); background-image: var(--grain), var(--mottle); background-size: 260px 260px, 900px 900px; }

/* Watercolour swatches behind icons (painted by site.js) ------------------- */
[data-wash] { position: relative; isolation: isolate; }
/* max-width: none, or base.css's max-width: 100% squeezes the swatch into its icon's box and off to the left */
[data-wash] > .swatch { position: absolute; z-index: -1; pointer-events: none; max-width: none; }

/* Drawn diagrams: ink lines, element tiles, hand labels -------------------- */
.art { width: 100%; height: auto; overflow: visible; }
.art__ink { stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.art__ink:not([fill]) { fill: none; }
.art__ink--thin { stroke-width: 1.5; }
.art__hand { font-family: var(--f-hand); font-weight: 600; font-size: 19px; fill: var(--earth); }
.art__hand--sm { font-size: 15px; }
.tile { stroke: var(--ink); stroke-width: 2; }
.tile__shadow { fill: var(--ink); }
.tile__no { font: 700 8px var(--f-body); fill: var(--ink); }
.tile__sym { font-family: var(--f-display); font-weight: 680; font-size: 24px; text-anchor: middle; fill: var(--ink); font-variation-settings: "SOFT" 100, "WONK" 1; }
.beads circle { stroke: var(--ink); stroke-width: 1.6; }

/* Drawn-on strokes (site.js sets pathLength=1) */
.js [data-draw] .art__ink:not([fill]) { stroke-dasharray: 1 1.05; stroke-dashoffset: 1.02; opacity: 0; transition: stroke-dashoffset 1.6s var(--ease-grow), opacity 0.2s ease; }
.js [data-draw].is-in .art__ink:not([fill]) { stroke-dashoffset: 0; opacity: 1; }
.no-motion [data-draw] .art__ink:not([fill]) { stroke-dashoffset: 0 !important; opacity: 1 !important; }

/* Painted spot art with code-drawn notes on top: .art--painted > picture + svg.art__over (a 300 × 200 viewBox) */
.art--painted { position: relative; aspect-ratio: 3 / 2; }
.art--painted img { display: block; width: 100%; height: 100%; }
/* a spot painting set straight on the page, not on a card: its own paper fades out at the edges into
   the page's, so no flat rectangle shows against the grain */
.art--feather img {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(transparent, #000 4%, #000 96%, transparent);
  mask-composite: intersect;
}
.art__over { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.art__over .art__hand { font-size: 22px; paint-order: stroke; stroke: var(--card); stroke-width: 4.5px; stroke-linejoin: round; }
/* paintings are labelled where they appear */
.art-label { margin-top: clamp(1.4rem, 3vw, 2rem); font-size: 0.8rem; color: var(--ink-3); text-align: right; }
/* letters stencilled on something in the painting (the three blocks of the foundation) */
.art__over .art__hand--tile { font-family: var(--f-display); font-weight: 680; font-size: 15px; fill: var(--ink); stroke: rgba(251, 247, 238, 0.8); stroke-width: 3px; font-variation-settings: "SOFT" 100, "WONK" 1; }
.art__over .art__hand--night { fill: #fbefd2; stroke: #3a4178; stroke-width: 3px; }
.art__over .tile__sym { font-size: 22px; }
.art__over .tile__no { font-size: 7px; }
.art__ink--night { stroke: #fbefd2; }
.art__stars { fill: #fff6dc; }
.art__twinkle { transform-box: fill-box; transform-origin: center; animation: twinkle 3.6s ease-in-out calc(var(--i, 0) * -0.83s) infinite; }
.art__drip { fill: #eef4f2; stroke: var(--ink); stroke-width: 0.8; opacity: 0; transform-box: fill-box; transform-origin: 50% 0; animation: drip 6s ease-in 1s infinite; }
@keyframes twinkle { 0%, 100% { opacity: 0.25; transform: scale(0.55); } 50% { opacity: 1; transform: scale(1) rotate(20deg); } }
@keyframes drip {
  0%, 50% { opacity: 0; transform: translateY(0) scale(0.3); }
  64% { opacity: 1; transform: translateY(0) scale(1); }
  76% { opacity: 1; transform: translateY(1px) scale(1, 1.15); }
  92% { opacity: 1; transform: translateY(9px) scale(0.9, 1.2); }
  97%, 100% { opacity: 0; transform: translateY(10px) scale(1.5, 0.4); }
}
.js [data-draw] .art__pop { opacity: 0; transform: translateY(-5px); transition: opacity 0.45s ease, transform 0.8s var(--ease-grow); transition-delay: calc(0.35s + var(--i, 0) * 0.14s); }
.js [data-draw].is-in .art__pop { opacity: 1; transform: none; }
.no-motion .art__twinkle, .no-motion .art__drip { animation: none; }
.no-motion [data-draw] .art__pop { opacity: 1 !important; transform: none !important; }

/* Specimens: one painted stage of the bean, on white, multiplied onto the paper ------------------
   Two copies of the picture split at the soil line (--soil, a fraction of the height): the plant
   grows up out of the soil and the roots grow down into it, and above ground it leans in the breeze
   with a shear from the soil line, so the two halves never part. Its ancestors must not transform,
   fade or filter, or the multiply stops reaching the paper. */
@property --grow { syntax: "<number>"; inherits: true; initial-value: 1; }
.specimen { --soil: 0.6; position: relative; display: block; aspect-ratio: 1157 / 1555; }
.specimen__top, .specimen__roots { position: absolute; inset: 0; mix-blend-mode: multiply; }
.specimen__top img, .specimen__roots img { display: block; width: 100%; height: 100%; }
.specimen__top { clip-path: inset(0 0 calc((1 - var(--soil)) * 100%) 0); transform-origin: 50% calc(var(--soil) * 100%); }
.specimen__roots { clip-path: inset(calc(var(--soil) * 100% - 1px) 0 0 0); }
.js .specimen[data-grow] { --grow: 0; transition: --grow 2.6s var(--ease-grow) var(--d, 0s); }
.js .specimen[data-grow].is-in { --grow: 1; }
.js .specimen[data-grow]:not(.is-grown) .specimen__top {
  --up: calc((1 - var(--soil)) * 100% + var(--grow) * (var(--soil) * 100% + 10%));
  -webkit-mask: linear-gradient(to top, #000 calc(var(--up) - 8%), transparent var(--up));
  mask: linear-gradient(to top, #000 calc(var(--up) - 8%), transparent var(--up));
}
.js .specimen[data-grow]:not(.is-grown) .specimen__roots {
  --down: calc(var(--soil) * 100% + var(--grow) * ((1 - var(--soil)) * 100% + 10%));
  -webkit-mask: linear-gradient(to bottom, #000 calc(var(--down) - 8%), transparent var(--down));
  mask: linear-gradient(to bottom, #000 calc(var(--down) - 8%), transparent var(--down));
}
.no-motion .specimen[data-grow] { --grow: 1 !important; }
@keyframes sway { 0%, 100% { transform: skewX(var(--lean, 0.7deg)); } 50% { transform: skewX(calc(var(--lean, 0.7deg) * -1)); } }
.js .specimen--sway.is-grown .specimen__top { animation: sway var(--sway, 7s) ease-in-out var(--sway-d, 0s) infinite; }
.no-motion .specimen .specimen__top { animation: none !important; }
/* its notes: an svg in the picture's own units (1157 × 1555), inked in once the plant has grown */
.specimen__notes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.specimen__notes .art__ink { stroke-width: 4.2; }
.specimen__notes .art__hand { font-size: 54px; paint-order: stroke; stroke: var(--paper); stroke-width: 12px; stroke-linejoin: round; fill: var(--earth-2); }
.js .specimen__notes[data-draw] .art__ink:not([fill]) { transition-delay: calc(1.6s + var(--i, 0) * 0.3s); }
.js .specimen__notes[data-draw] .art__pop { transition-delay: calc(1.3s + var(--i, 0) * 0.3s); }

/* Something pinned to a spot in a painted scene, staying on it however the picture is cropped:
   style="--plate: 2.357" (the painting's width over height) on the scene, "--px: .6; --py: .4" on the pin */
.scene:has(> .scene__pin) { container-type: size; }
.scene__pin {
  --dw: max(100cqw * var(--over, 1), 100cqh * var(--plate, 1.7778)); --dh: calc(var(--dw) / var(--plate, 1.7778));
  position: absolute; z-index: 3;
  left: calc((100cqw - var(--dw)) * var(--fx) + var(--px) * var(--dw));
  top: calc((100cqh - var(--dh)) * var(--fy) + var(--py) * var(--dh));
}

/* QuorumAI is one word: set in capitals (an eyebrow), its AI takes the earth colour so the two halves still read.
   The darker earth, because an eyebrow can sit over a painting's pale sky (quorum-ai.html on a phone: 4.3 : 1 in --earth).
   The eyebrow is a flex row with a gap, so the whole word goes in one plain <span>, or the gap splits it */
.eyebrow .brand-ai { color: var(--earth-2); }

/* Breadcrumbs, on pages a level down (episodes, the waitlist) ----------------------- */
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.55rem; }
.crumbs li { font-size: 0.78rem; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.crumbs li + li::before { content: "/"; margin-right: 0.55rem; color: var(--earth); font-weight: 600; }
.crumbs a { color: var(--ink-2); text-decoration: none; background: linear-gradient(var(--wattle), var(--wattle)) no-repeat 0 100% / 100% 2px; padding-bottom: 1px; }
.crumbs a:hover { color: var(--ink); background-size: 100% 4px; }

/* Pull quotes and tick lists ----------------------------------------------- */
.pull { margin: 2rem 0 0; padding: 0.1rem 0 0.1rem 1.3rem; border-left: 4px solid var(--wattle); }
.pull p { font-family: var(--f-display); font-size: var(--step-2); line-height: 1.22; font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--canopy); }
.pull footer { margin-top: 0.55rem; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; color: var(--ink-3); }
.pull--light { border-color: var(--sap); }
.pull--light p { color: var(--wattle-2); }
.pull--light footer { color: #aebb9c; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.ticks li { display: flex; gap: 0.75rem; align-items: flex-start; font-weight: 650; }
.ticks svg { width: 1.45rem; height: 1.45rem; color: var(--leaf); flex: none; margin-top: 0.05rem; }

/* The specimen card: the bean that grows with the reader ------------------------------------------
   It clips what it holds: the empty paper above an early stage can run past its top, and a sticky
   parent (the home page's) would show that paper white rather than multiplied away. */
.specimen-card {
  margin: 0; padding: 1rem 1.2rem 1.1rem; display: grid; gap: 0.6rem; overflow: clip;
  grid-template-areas: "head" "plant" "foot"; grid-template-rows: auto minmax(0, 1fr) auto;
}
.specimen-card__head { grid-area: head; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule); font-size: 0.72rem; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.specimen-card__name { letter-spacing: 0.04em; text-transform: none; font-size: 0.9rem; font-weight: 600; }
.specimen-card__name i { font-family: var(--f-display); font-size: 1.02rem; font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--ink-2); }
.specimen-card__plant { grid-area: plant; position: relative; min-height: 0; container-type: size; }
/* the bean stands on the foot of the card, as big as the card allows: the empty paper above an early
   stage (--lift, a fraction of its height) runs off the top, under the card's head, and the paper either
   side of it (outside --span, the fraction of its width that's painted) may run past the column */
.specimen-card__plant .specimen {
  position: absolute; left: -50%; right: -50%; bottom: 0; margin-inline: auto;
  height: min(calc(100cqh / (1 - var(--lift, 0))), calc(100cqw / var(--span, 1) * 1555 / 1157)); width: auto;
}
.specimen-card__foot { grid-area: foot; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; padding-top: 0.75rem; border-top: 1px solid var(--rule); }
.specimen-card__stage { font-family: var(--f-display); font-size: var(--step-1); font-weight: 580; }
.specimen-card__note { flex-basis: 100%; font-size: 1.45rem; min-height: 1.1em; }
.specimen-card__strip i { transition: opacity 0.4s ease, transform 0.4s var(--ease-grow); }
.specimen-card__strip i.is-now { transform: translateY(-4px) rotate(var(--r)) scale(1.18); }

/* QuorumAI: the chat card (each page lays out its own conversation) ------- */
.chat {
  display: grid; gap: 0.9rem; padding: 1.1rem 1.2rem 1rem; color: var(--ink); background: #fbf7ee; rotate: 0.7deg;
  border-radius: 20px 17px 22px 16px; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.chat__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--rule); }
.chat__head .chip { margin-left: auto; }
.chat__avatar { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; background: var(--canopy); color: var(--wattle); }
.chat__avatar svg { width: 1.4rem; height: 1.4rem; }
.chat__msg { margin: 0; padding: 0.85rem 1.05rem; border-radius: 18px; max-width: 90%; }
.chat__msg--me { background: var(--wattle-2); border-bottom-right-radius: 5px; font-weight: 650; }
.chat__msg--ai { background: #f0e9d6; border-bottom-left-radius: 5px; }
.chat__msg p + p { margin-top: 0.6em; }
.chat__sources { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.9rem; }
.chat__sources .chip { background: #fbf7ee; }
.chat__sources svg { width: 1rem; height: 1rem; }
/* what a paid answer took from the member's QuorumAI credit */
.chat__cost { margin-top: 0.7rem; font-size: 0.8rem; color: var(--ink-3); }
.chat__typing { display: inline-flex; gap: 0.32rem; padding: 0.9rem 1rem; background: #f0e9d6; border-radius: 18px 18px 18px 5px; }
.chat__typing i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--leaf); animation: blink 0.9s ease-in-out infinite alternate; }
.chat__typing i:nth-child(2) { animation-delay: 0.2s; }
.chat__typing i:nth-child(3) { animation-delay: 0.4s; }
.chat__form { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chat__form .input { flex: 1 1 12rem; padding-block: 0.6rem; }
.chat__form .form-note { flex-basis: 100%; font-size: 1.2rem; }
.chat__note { font-size: 0.78rem; color: var(--ink-3); }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes blink { from { opacity: 0.25; transform: translateY(1px); } to { opacity: 1; transform: translateY(-2px); } }

/* Footer: deep soil, the strip across the top ------------------------------ */
.site-footer { position: relative; background: #2b1a11; color: #efe4cc; overflow: hidden; }
.site-footer .strip--band { background: #1c110b; }
.site-footer__inner { display: grid; grid-template-columns: 2fr repeat(2, 1fr); gap: 2.5rem; padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.site-footer h2 { font-family: var(--f-body); font-size: 0.78rem; line-height: 1.2; letter-spacing: 0.16em; text-transform: uppercase; color: #cdbb95; margin-bottom: 0.9rem; font-weight: 750; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--wattle); }
.site-footer__tag { font-family: var(--f-display); font-size: 1.5rem; line-height: 1.15; margin-top: 1.2rem; max-width: 18rem; color: #fbf3e1; }
.site-footer__base { border-top: 1px solid rgba(239, 228, 204, 0.14); padding-block: 1.5rem 2.2rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; font-size: 0.85rem; color: #bfae8c; }
.site-footer__country { max-width: 44rem; }
.site-footer .muted { color: #a39d88; }
@media (max-width: 900px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .site-footer__inner > :first-child { grid-column: 1 / -1; }
}

/* Forms ------------------------------------------------------------------ */
.field { display: grid; gap: 0.4rem; }
.field label { font-weight: 700; font-size: 0.9rem; }
.input {
  width: 100%; padding: 0.8rem 1rem; border: 2px solid rgba(30, 43, 34, 0.75); border-radius: 12px 10px 13px 9px;
  background: #fffdf8; color: var(--ink); font-size: 1rem; box-shadow: inset 0 2px 0 rgba(30, 43, 34, 0.06);
}
.input:focus { outline: 3px solid var(--focus); outline-offset: 1px; }

/* Prototype flag ---------------------------------------------------------- */
.proto {
  position: fixed; left: 50%; bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 70;
  display: inline-flex; gap: 0.5rem; align-items: center; padding: 0.42rem 0.85rem; border-radius: 999px;
  background: rgba(30, 43, 34, 0.9); color: #f6efe0; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.5); white-space: nowrap;
  /* on the narrowest phones it takes two lines rather than running off both sides */
  width: max-content; max-width: calc(100vw - 1rem); flex-wrap: wrap; justify-content: center; row-gap: 0.15rem;
}
.proto a { color: var(--wattle-2); }
.proto__notes, .proto__as {
  padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; color: var(--wattle-2); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.proto__notes[aria-pressed="true"] { color: #fffdf8; text-decoration-style: wavy; }
.proto__as { color: inherit; text-decoration-style: dotted; }

/* Notes: what's still to confirm before launch, marked and shown from the flag */
.show-checks [data-check] { outline: 2px dashed var(--earth); outline-offset: 4px; }
.show-checks [data-check]::after {
  content: "✎ " attr(data-check); display: block; width: fit-content; max-width: 100%; margin-top: 0.5rem; padding: 0.3rem 0.6rem;
  border-radius: 4px; background: #fbe7c6; color: #7a2f1b; text-align: left; text-transform: none;
  font: normal 700 0.78rem/1.35 var(--f-body); letter-spacing: 0;
}
@media print {
  .show-checks [data-check] { outline: none; }
  .show-checks [data-check]::after { content: none; }
  .proto { display: none; }
  /* On paper, whatever draws itself in as it's scrolled to is drawn already, as it is with less motion:
     a drawing further down the page than the reader went would otherwise print half drawn */
  .js [data-reveal], .js [data-draw] .art__pop { opacity: 1 !important; transform: none !important; }
  .js [data-draw] .art__ink:not([fill]) { stroke-dashoffset: 0 !important; opacity: 1 !important; }
  .mark path, .js .flight .flight__curve { stroke-dashoffset: 0 !important; }
  .js .specimen[data-grow] { --grow: 1 !important; }
  .js .moving .moving__dot { opacity: 1 !important; }
  * { transition: none !important; }
}
.proto { transition: transform 0.35s var(--ease-grow), opacity 0.35s ease; }
.proto.is-away { transform: translate(-50%, 180%); opacity: 0; }

/* The hub, as the sample member sees it or as a real member does (data-view="sample" / "member"):
   members.js shows a member who's signed in their own, and the prototype flag switches between them.
   A bare span[data-view] is only the switch. */
html:not([data-member-view]) [data-view="member"], html[data-member-view] [data-view="sample"] { display: none !important; }
span[data-view]:not([class]) { display: contents; }

/* The Course's own parts, shown once it opens (html[data-course]: COURSE in tools/chrome.py), and
   what stands in for them while it's held (data-no-course). */
html:not([data-course]) [data-course-only], html[data-course] [data-no-course] { display: none !important; }

.form-note { font-family: var(--f-hand); font-weight: 600; font-size: 1.3rem; line-height: 1.1; color: var(--earth); }

/* Painted scenes (scene.js): the painting as a picture first; a canvas brings it to life ------ */
/* Where a scene is wider than its painting, the picture runs a little past both sides (--over):
   the washes often stop just short of the paper's edge. Pins and scene.js follow the same rule. */
.scene {
  --fx: var(--at-x, 0.5); --fy: var(--at-y, 0.5); --over: 1.06;
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--paper-2) no-repeat calc(var(--fx) * 100%) calc(var(--fy) * 100%) / cover;
}
/* a scene can hold a different point of focus on phones: style="--at-x: .4; --at-x-sm: .7" */
@media (max-width: 600px) { .scene { --fx: var(--at-x-sm, var(--at-x, 0.5)); --fy: var(--at-y-sm, var(--at-y, 0.5)); } }
.scene > picture { display: contents; }
.scene__plate {
  position: absolute; top: 0; left: calc((1 - var(--over, 1)) * var(--fx, 0.5) * 100%); width: calc(var(--over, 1) * 100%); height: 100%; max-width: none;
  object-fit: cover; object-position: calc(var(--fx, 0.5) * 100%) calc(var(--fy, 0.5) * 100%);
}
.scene__gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.9s ease; }
.scene.is-gl .scene__gl { opacity: 1; }
.scene__pause { position: absolute; z-index: 3; bottom: 0.9rem; }
.scene__pause {
  right: 1rem; display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; padding: 0;
  border: 1px solid rgba(30, 43, 34, 0.28); border-radius: 50%; background: rgba(250, 244, 226, 0.84);
  color: var(--ink); cursor: pointer;
}
.scene__pause:hover { background: #faf4e2; }
.scene__pause svg { width: 0.9rem; height: 0.9rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.scene__pause .hero__pause-play { display: none; fill: currentColor; stroke-width: 1.4; }
.scene__pause.is-paused .hero__pause-bars { display: none; }
.scene__pause.is-paused .hero__pause-play { display: inline; }
.scene__pause span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The flight plan (a crop program across its critical stages) and the enquiry form ------------ */
.flight { margin: 0; padding: 1.2rem 1.3rem 1.1rem; rotate: -0.6deg; }
.flight__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.4rem; }
.flight__kicker { font-size: 0.72rem; font-weight: 750; letter-spacing: 0.16em; text-transform: uppercase; color: var(--earth); }
.flight__title { font-family: var(--f-display); font-size: var(--step-2); line-height: 1.1; margin-top: 0.2rem; }
.flight__svg { width: 100%; height: auto; overflow: visible; }
.flight__bands rect { opacity: 0.14; }
.flight__stages text { font: 700 11px var(--f-body); text-anchor: middle; fill: var(--ink-2); }
.flight__axis { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.flight__ticks text { font: 600 9.5px var(--f-body); fill: var(--ink-3); text-anchor: middle; }
.flight__curve { fill: none; stroke: var(--canopy-2); stroke-width: 3.4; stroke-linecap: round; }
.flight__flags path { fill: none; stroke: var(--earth); stroke-width: 1.4; stroke-dasharray: 3 4; }
.flight__flags .flag { fill: var(--earth); stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: none; }
.flight__inputs rect { stroke: var(--ink); stroke-width: 1.4; }
.flight__inputs text { font: 700 10.5px var(--f-body); text-anchor: middle; fill: var(--ink); }
.flight__pointer { fill: none; stroke: var(--earth); stroke-width: 1.6; stroke-linecap: round; }
/* on a phone it's drawn at a size its labels can be read at (10 to 12 px, not 5), and swiped along, as
   the builder's chart is; where it's wrapped to (.flight__scroll) */
.flight__swipe { display: none; margin: 0.1rem 0 0; font-size: 1.15rem; color: var(--earth); }
@media (max-width: 600px) {
  /* (its own width only, not the drawing's, so the card stays the screen's width) */
  .flight__scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; contain: inline-size; }
  .flight__scroll .flight__svg { min-width: 640px; }
  .flight__swipe { display: block; }
}
.flight__foot { font-family: var(--f-hand); font-weight: 600; font-size: 1.35rem; line-height: 1.1; color: var(--ink-2); margin-top: 0.4rem; }
.js .flight .flight__curve { stroke-dasharray: 1 1.05; stroke-dashoffset: 1.02; transition: stroke-dashoffset 2.2s var(--ease-grow) 0.3s; }
.js .flight.is-in .flight__curve, .no-motion .flight .flight__curve { stroke-dashoffset: 0; }

.enquiry { display: grid; gap: 1rem; padding: clamp(1.4rem, 3vw, 2.2rem); rotate: 0.4deg; }
.enquiry h3 { font-size: var(--step-2); }
.enquiry__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.enquiry__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 0.3rem; }
.enquiry__done { font-size: 1.4rem; }
@media (max-width: 560px) { .enquiry__row { grid-template-columns: 1fr; } }

/* Page openers: a painted scene across the top of a page, the title in its sky ---------------- */
.opener { position: relative; min-height: clamp(34rem, 84svh, 60rem); display: grid; align-content: start; overflow: hidden; isolation: isolate; background: var(--paper-2); }
.opener__scene { position: absolute; inset: 0; }
.opener__scene::after { content: ""; position: absolute; inset: 0; z-index: 2; background-image: var(--grain); background-size: 260px; mix-blend-mode: multiply; opacity: 0.3; pointer-events: none; }
.opener__content { position: relative; z-index: 4; padding-block: clamp(6.4rem, 15vh, 10rem) clamp(5rem, 10vh, 7rem); }
.opener__content h1 { font-size: clamp(2.4rem, min(5vw, 8.2vh), 5.2rem); max-width: 13ch; margin-top: 0.85rem; }
/* Under 768 px the title is 2.4rem, where Fraunces's 13ch is 8.4635em. In em the box is as wide before
   Fraunces arrives as after (a ch is the font's own 0), so the words wrap alike and nothing moves (qag-15zx) */
@media (max-width: 767.98px) { .opener__content h1 { max-width: 8.4635em; } }
.opener__content .eyebrow, .opener__content .lede { text-shadow: 0 0 16px rgba(250, 244, 226, 0.92), 0 0 3px rgba(250, 244, 226, 0.85); }
.opener__content .lede { margin-top: 1.05rem; max-width: 33rem; color: var(--ink); }
.opener__cta { margin-top: 1.6rem; }
/* where a busy part of the painting sits behind the words, the paper shows through like an unpainted patch */
.opener--wash .opener__scene::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse var(--wash-size, 46% 56%) at var(--wash-at, 22% 50%), rgba(var(--wash-rgb, 246, 239, 224), var(--wash, 0.88)), rgba(var(--wash-rgb, 246, 239, 224), calc(var(--wash, 0.88) * 0.75)) 40%, rgba(var(--wash-rgb, 246, 239, 224), 0) 74%); }
@media (max-width: 600px) { .opener--wash .opener__scene::before { --wash-size: 110% 44%; --wash-at: 30% 34%; } }
/* a night or dusk opener: light words with a dusky halo, and a light ghost button */
.opener--dark .opener__content { color: #fbf3e1; }
.opener--dark .opener__content h1 { color: #fbf3e1; }
.opener--dark .opener__content h1 em { color: var(--wattle-2); }
.opener--dark .opener__content .eyebrow { color: #d9dcf7; }
.opener--dark .opener__content .lede { color: #f1eff9; }
.opener--dark .opener__content .eyebrow, .opener--dark .opener__content .lede, .opener--dark .opener__content h1 { text-shadow: 0 0 18px rgba(30, 34, 78, 0.85), 0 0 3px rgba(30, 34, 78, 0.7); }
.opener--dark .btn--ghost { --btn-bg: rgba(31, 38, 73, 0.45); --btn-fg: #fbf3e1; --btn-edge: #fbf3e1; }
/* the painting's pause button sits clear of the torn edge of the next section */
.opener .scene__pause { bottom: calc(clamp(14px, 2.2vw, 30px) + 0.8rem); }
@media (max-width: 520px) {
  .opener__content .lede { font-size: 1.06rem; max-width: 22rem; }
}

/* Lesson content: what an episode is taught with, on its public page (episode-N.html) and in the
   hub's lesson (learn-episode-N.html): the episode's pad, the painted idea blocks with notes inked
   over them, the drawn charts, the crops and the take-home ------------------------------------ */
.ep-pad {
  flex: none; width: 3.9rem; height: 3.9rem; display: grid; place-items: center; background: var(--c); border-radius: 9px;
  box-shadow: inset 0 0 0 2px rgba(30, 43, 34, 0.9), 3px 3px 0 rgba(30, 43, 34, 0.9);
  font-family: var(--f-display); font-weight: 650; font-size: 1.6rem; color: var(--on, #fff8ea); rotate: -4deg;
}

.idea { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; }
.idea + .idea { margin-top: clamp(3rem, 7vw, 5.5rem); }
.idea--flip > .idea__art { order: 2; }
.idea__art { margin: 0; }
.idea__art .art--painted img { mix-blend-mode: multiply; }
.idea__art .art__over .art__hand { stroke: var(--paper); }
.idea__art .art__over .art__hand--sm { font-size: 18px; }
.idea__art .art__over .art__hand--night { stroke: #3a4178; }
.idea__art figcaption { margin-top: 0.3rem; font-size: 0.78rem; color: var(--ink-3); }
.idea__text { display: grid; gap: 1rem; justify-items: start; max-width: 34rem; }
.idea__text h3 { font-size: var(--step-3); }
.idea__text p { color: var(--ink-2); }
.idea__text .pull { margin-top: 0.4rem; }
@media (max-width: 860px) {
  .idea { grid-template-columns: 1fr; }
  .idea--flip > .idea__art { order: 0; }
}

/* notes drawn over the spots: stencilled on the blocks, in pen on the flight plan, beads of protein */
.art__over .art__hand--sheet { font-size: 15px; fill: #28386a; stroke: none; }
.art__over .art__hand--flag { font: 700 7.5px var(--f-body); fill: #28386a; stroke: none; }
.idea__art .bead { stroke: var(--ink); stroke-width: 1.2; }

/* a code-drawn chart beside the words: dots of sap tests, then the line through them */
.moving { width: 100%; max-width: 30rem; }
.moving__axis { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.moving__band { fill: var(--sap-2); opacity: 0.45; }
.moving__dot { fill: var(--card); stroke: var(--ink); stroke-width: 1.8; }
.moving__dot--one { fill: var(--wattle); }
.moving text { font: 700 11.5px var(--f-body); fill: var(--ink-3); }
.moving .art__hand { font: 600 17px var(--f-hand); fill: var(--earth); }
.js .moving .moving__dot:not(.moving__dot--one) { opacity: 0; transition: opacity 0.4s ease calc(0.9s + var(--i) * 0.12s); }
.js .moving.is-in .moving__dot { opacity: 1; }
.no-motion .moving .moving__dot { opacity: 1 !important; }

/* the crops of episode 8; a last card on its own row sits in the middle, at its column's width, and a card's
   heading stays level with its row's when another card's line wraps */
.crops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2rem); }
.crop { display: grid; align-content: start; justify-items: center; text-align: center; }
.crop:last-child:nth-child(3n+1) { grid-column: 2; }
.crop img { width: min(100%, 13rem); height: auto; mix-blend-mode: multiply; }
.crop h3 { margin-top: -0.4rem; font-family: var(--f-hand); font-weight: 700; font-size: 1.9rem; color: var(--earth); rotate: -2deg; }
.crop p { margin-top: 0.2rem; max-width: 15rem; font-size: 0.95rem; color: var(--ink-2); }
@media (max-width: 700px) {
  .crops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crop:last-child:nth-child(3n+1) { grid-column: auto; }
  .crop:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - clamp(1rem, 3vw, 2rem)) / 2); }
}

/* the take-home, a note taped to the page */
.take {
  position: relative; max-width: 30rem; margin: clamp(3rem, 6vw, 4.5rem) auto 0; padding: 1.7rem 1.6rem 1.5rem;
  background-color: #f8e6a0; background-image: var(--grain); rotate: -1.2deg; text-align: center;
  box-shadow: 0 20px 26px -20px rgba(70, 46, 12, 0.55), 0 2px 4px -1px rgba(70, 46, 12, 0.18);
}
.take::before { content: ""; position: absolute; left: 50%; top: -0.75rem; width: 6rem; height: 1.5rem; translate: -50% 0; rotate: 3deg; background: rgba(240, 232, 208, 0.85); box-shadow: 0 1px 2px rgba(60, 40, 10, 0.14); }
.take__kick { font-family: var(--f-hand); font-weight: 700; font-size: 1.7rem; line-height: 1; color: var(--earth); }
.take__line { margin-top: 0.5rem; font-family: var(--f-display); font-size: var(--step-2); line-height: 1.22; color: var(--ink); text-wrap: balance; }

/* the ink bug that walks the leaves in episode 7 */
.bug { transform-box: fill-box; transform-origin: center; }
.js .bug--walk { animation: bug-walk 16s ease-in-out 3.2s infinite; }
.bug__legs { animation: bug-legs 0.5s steps(2) infinite; }
@keyframes bug-walk {
  0%, 12% { translate: 0 0; } 30% { translate: -44px 22px; } 42%, 55% { translate: -44px 22px; rotate: 18deg; }
  75% { translate: 6px -4px; rotate: -8deg; } 88%, 100% { translate: 0 0; rotate: 0deg; }
}
@keyframes bug-legs { to { translate: 0 2px; } }
.no-motion .bug--walk, .no-motion .bug__legs { animation: none; }

/* Forms that send (forms.js): a problem said above the button, and a field only a bot fills in */
.form-problem { font-weight: 700; font-size: 0.95rem; color: var(--earth-2); }
.form-problem a { color: inherit; }
.is-sending [type="submit"] { opacity: 0.72; cursor: progress; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.enquiry__privacy a { color: inherit; }

/* The hub on the home screen (home-screen.js): on an iPhone, once a walk or plan's saved, under the
   saved walk and under the hub's week */
.home-card { display: grid; gap: 0.7rem; max-width: 40rem; margin-block: 1.2rem; border: 2px solid var(--ink); }
.card.home-card h3 { font-size: var(--step-1); }
.home-card p, .home-card ol { margin: 0; }
.home-card__steps { display: grid; gap: 0.3rem; padding-left: 1.3rem; font-weight: 600; }
.home-card__go { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.home-card__said:empty { display: none; }

/* The Course's three parts, on the course page and the home page (COURSE-4) ------------------- */
.parts__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.6rem); }
.parts__part { display: grid; align-content: start; gap: 0.4rem; }
.parts__no { font-size: 2.6rem; font-weight: 600; line-height: 1; color: var(--earth); }
.parts__part h3 { font-size: var(--step-1); }
.parts__part p { color: var(--ink-2); }
@media (max-width: 760px) { .parts__list { grid-template-columns: minmax(0, 1fr); } }

/* The Quorum Ag graph (sap-graph.js, qag-2p5x): a panel a mineral across the crop's stages ------- */
.sg { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.sg__tile { fill: var(--cp); stroke: color-mix(in srgb, var(--c) 60%, var(--ink)); stroke-width: 1; }
.sg__sym { font-size: 15px; font-weight: 700; fill: var(--ink); }
.sg__name { font-size: 15px; font-weight: 700; fill: var(--ink); }
.sg__unit, .sg__target, .sg__tick, .sg__stage { font-size: 13.5px; font-weight: 400; fill: var(--ink-3); }
.sg__target { font-style: italic; }
.sg__wash { opacity: 0.09; }
.sg__strip { opacity: 0.9; }
.sg__grid { stroke: var(--rule); stroke-width: 1; }
.sg__fine { stroke: var(--rule); stroke-width: 0.5; opacity: 0.7; }
.sg__axis { stroke: var(--ink-3); stroke-width: 1; }
.sg__band { fill: var(--cp); opacity: 0.85; }
.sg__hatch { stroke: color-mix(in srgb, var(--c) 60%, var(--ink)); stroke-width: 1.2; opacity: 0.3; }
.sg__edge { stroke: color-mix(in srgb, var(--c) 60%, var(--ink)); stroke-width: 1.5; }
.sg__line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sg__line--new { stroke: var(--ink); stroke-width: 2; }
.sg__line--old { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 4 3; }
.sg__dot circle { stroke-width: 2; }
.sg__dot--new circle, .sg-key__new { fill: var(--ink); stroke: var(--card); }
.sg__dot--old circle, .sg-key__old { fill: var(--card); stroke: var(--ink-3); stroke-width: 2; }
.sg__value { font-size: 14px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: var(--card); stroke-width: 3px; }
.sg-key { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; align-items: center; font-size: 0.85rem; color: var(--ink-2); }
.sg-key span { display: inline-flex; align-items: center; gap: 0.4rem; }
.sg-key svg { width: 28px; height: 10px; overflow: visible; }
.sg-key__band { display: inline-block; width: 22px; height: 10px; border: 1.5px solid var(--earth); background: repeating-linear-gradient(45deg, transparent 0 3px, rgba(160, 63, 36, 0.35) 3px 4px), var(--paper-2); }
.sg-key__stage { display: inline-block; width: 14px; height: 8px; border-radius: 2px; print-color-adjust: exact; -webkit-print-color-adjust: exact; }

/* On a touch screen ------------------------------------------------------------------------------ */
/* What's tapped most is 44 px high at least, the size for a thumb with a glove on (phone.cjs's notes,
   docs/research/phone-ready.md): the Menu button, buttons, arrow links, the footer's links (each a whole
   row), and the logo's link, grown by a margin it doesn't show. A mouse keeps the compact sizes. */
@media (pointer: coarse) {
  .nav__toggle, .btn, .link-arrow { min-height: 44px; }
  /* the pinned header no taller for its bigger Menu button */
  .site-header.is-scrolled, .site-header--solid { padding-block: calc(0.45rem + env(safe-area-inset-top, 0px)) 0.45rem; }
  .lockup { padding-block: 4px; margin-block: -4px; }
  .site-footer ul { gap: 0; }
  .site-footer li > a { display: flex; align-items: center; min-height: 44px; }
  /* in its line, so grown by padding that takes no room */
  .site-footer__base a { padding: 14px 4px; margin-inline: -4px; }
  /* a chip that's a link or a button keeps its size, and is tapped by an area a little bigger than it */
  :where(a.chip, button.chip) { position: relative; }
  :where(a.chip, button.chip)::after { content: ""; position: absolute; inset: -8px -2px; }
  /* and so is a small link standing on its own, as the crumbs' are */
  .crumbs a { position: relative; }
  .crumbs a::after { content: ""; position: absolute; inset: -14px -4px; }
}

/* Sign out's question on a computer others use (members.js leaveThem, qag-1n58): a card over the page, its
   two answers side by side where they fit and stacked on a narrow phone */
.ask-out { width: min(30rem, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; margin: auto; padding: 1.3rem 1.25rem 1.2rem; border: 1px solid var(--rule); border-radius: 12px; background: var(--card); color: var(--ink); box-shadow: 0 18px 40px rgba(30, 43, 34, 0.22); }
.ask-out::backdrop { background: rgba(30, 43, 34, 0.55); }
.ask-out h2 { margin: 0 0 0.6rem; font-size: var(--step-1); }
.ask-out p { margin: 0 0 0.7rem; }
.ask-out__go { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.ask-out__go .btn { flex: 1 1 auto; }