/* Public pages — consulting, about, speaking, contact, QuorumAI. */

/* Openers on phones: the painting settles to the bottom of the opener and the title sits in
   open sky above it, the sky colour carried up from the top of the painting (--sky). */
@media (max-width: 600px) {
  .opener {
    display: flex; flex-direction: column; min-height: 0;
    background: var(--grain), linear-gradient(var(--sky-top, var(--paper)), var(--sky, var(--paper-2)));
    background-size: 260px 260px, auto;
  }
  .opener__content { order: 0; padding-block: 6.2rem 0; }
  .opener__scene {
    position: relative; inset: auto; order: 1; height: clamp(19rem, 50svh, 27rem); margin-top: -3.2rem;
    -webkit-mask-image: linear-gradient(transparent, #000 28%); mask-image: linear-gradient(transparent, #000 28%);
  }
  .opener__content .eyebrow, .opener__content .lede { text-shadow: none; }
}

/* What Steve does: three painted jobs ------------------------------------------------------ */
.work__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 2.6vw, 2.2rem); margin-top: clamp(2.5rem, 5vw, 3.6rem); align-items: start; }
.job { display: grid; align-content: start; gap: 0.5rem; padding: 1.2rem 1.3rem 1.6rem; }
.job:nth-child(1) { rotate: -0.6deg; }
.job:nth-child(2) { rotate: 0.5deg; margin-top: 1.8rem; }
.job:nth-child(3) { rotate: -0.3deg; }
.job .art { margin-bottom: 0.2rem; }
.job__no { font-size: 2.6rem; line-height: 0.7; margin-top: 0.2rem; }
.job h3 { font-size: var(--step-2); }
.job p:not(.job__no) { color: var(--ink-2); }
@media (max-width: 900px) {
  .work__grid { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; }
  .job:nth-child(2) { margin-top: 0; }
}

/* the season plan drawn onto the paper in the shed-wall painting */
.mini-plan__title { font-family: var(--f-hand); font-weight: 600; font-size: 11.5px; fill: var(--ink-2); }
.mini-plan__bands rect { opacity: 0.24; }
.mini-plan__flags path { fill: none; stroke: var(--earth); stroke-width: 0.8; stroke-dasharray: 1.6 2; }
.mini-plan__flags .flag { fill: var(--earth); stroke: none; }
.mini-plan__curve { stroke: var(--canopy-2); stroke-width: 2.2; }
/* steam off the mug */
.art__steam { fill: none; stroke: var(--ink-3); stroke-width: 0.9; stroke-linecap: round; opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: steam 5.2s ease-in-out calc(var(--i, 0) * -2.6s) infinite; }
@keyframes steam {
  0% { opacity: 0; transform: translateY(4px) scaleY(0.7); }
  35% { opacity: 0.75; }
  100% { opacity: 0; transform: translateY(-10px) scaleY(1.15); }
}
.no-motion .art__steam { animation: none; opacity: 0.5; }

/* A season with Steve: a farm track that draws itself down the page (public.js) ------------- */
.season .head .stamp { margin-top: 0.3rem; }
.track { position: relative; margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.track__road {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
  mask-image: linear-gradient(transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
}
.track__stops { list-style: none; margin: 0; padding: 3.5rem 0 5rem; display: grid; }
.stop {
  --mx: 2.2rem;
  position: relative; width: min(34%, 24rem); padding: 1.3rem 1.4rem 1.4rem;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-paper);
}
.stop:nth-child(odd) { justify-self: start; rotate: -0.5deg; }
.stop:nth-child(even) { justify-self: end; rotate: 0.6deg; }
.stop + .stop { margin-top: -2.2rem; }
.stop__no {
  position: absolute; top: 1.1rem; width: 3.3rem; height: 3.3rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink), 0 6px 14px -8px rgba(60, 38, 14, 0.6);
  transition: background-color 0.4s ease, scale 0.6s var(--ease-grow), rotate 0.6s var(--ease-grow);
}
.stop__no svg { width: 1.7rem; height: 1.7rem; }
.stop:nth-child(odd) .stop__no { left: calc(100% + var(--mx)); }
.stop:nth-child(even) .stop__no { right: calc(100% + var(--mx)); }
.js .track.is-live .stop:not(.is-reached) .stop__no { scale: 0.7; rotate: -20deg; }
.stop.is-reached .stop__no { background: var(--wattle-2); }
.stop__when { font-family: var(--f-hand); font-weight: 600; font-size: 1.45rem; line-height: 1; color: var(--earth); }
.stop h3 { font-size: var(--step-2); margin-top: 0.35rem; }
.stop p:not(.stop__when) { margin-top: 0.5rem; color: var(--ink-2); }
/* the road's layers, drawn by public.js */
.road__wash { fill: rgba(217, 119, 74, 0.26); stroke: rgba(160, 63, 36, 0.3); stroke-width: 0.9; stroke-linejoin: round; }
.road__wash--core { fill: rgba(160, 63, 36, 0.1); stroke: none; }
.road__rut { fill: none; stroke: rgba(98, 60, 36, 0.55); stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 9 7; }
.road__tuft { fill: none; stroke: var(--leaf); stroke-width: 1.4; stroke-linecap: round; }
.road__tuft--dry { stroke: #b59a52; }
@media (max-width: 760px) {
  .track__stops { padding: 1.5rem 0 3rem 3.4rem; gap: 1.6rem; }
  .stop, .stop:nth-child(odd), .stop:nth-child(even) { width: auto; justify-self: stretch; rotate: 0deg; }
  .stop + .stop { margin-top: 0; }
  .stop:nth-child(odd) .stop__no, .stop:nth-child(even) .stop__no { left: -3.4rem; right: auto; width: 2.8rem; height: 2.8rem; top: 1.2rem; }
  .stop__no svg { width: 1.45rem; height: 1.45rem; }
}

/* The flight plan: one plan, three ways -------------------------------------------------- */
.plan { background-color: var(--paper-2); background-image: var(--grain); }
.plan__grid { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.plan__text h2 { margin-top: 1rem; }
.plan__text .lede { margin-top: 1.3rem; }
.ways { list-style: none; margin: 2.1rem 0 0; padding: 0; display: grid; gap: 1.3rem; }
.ways li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.ways__ico { width: 3rem; height: 3rem; display: grid; place-items: center; }
.ways__ico svg { width: 1.9rem; height: 1.9rem; }
.ways h3 { font-size: var(--step-1); font-weight: 620; }
.ways p { margin-top: 0.2rem; font-size: 0.98rem; color: var(--ink-2); }
@media (max-width: 980px) { .plan__grid { grid-template-columns: 1fr; } }

.flight--explore { rotate: 0.5deg; }
.flight--explore .flight__bands rect { transition: opacity 0.35s ease; cursor: pointer; }
.flight--explore.is-live .flight__bands rect { opacity: 0.09; }
.flight--explore.is-live .flight__bands rect.is-on { opacity: 0.4; }
.flight--explore .flight__stages text { transition: fill 0.3s ease; cursor: pointer; }
.flight--explore.is-live .flight__stages text:not(.is-on) { fill: var(--ink-3); }
.flight--explore.is-live .flight__stages text.is-on { fill: var(--ink); font-weight: 800; }
.flight--explore .flight__inputs g { transition: opacity 0.35s ease; }
.flight--explore.is-live .flight__inputs g:not(.is-on) { opacity: 0.3; }
/* on phones the stage buttons carry the names: the chart keeps only its days */
@media (max-width: 560px) {
  .flight--explore .flight__stages { display: none; }
  .flight--explore .flight__ticks text { font-size: 15px; }
  .flight--explore .flight__inputs text { font-size: 13px; }
}
.stages { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.stages__btn {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.38rem 0.75rem 0.38rem 0.55rem;
  border: 1px solid rgba(30, 43, 34, 0.2); border-radius: 999px; background: #fffaf0; color: var(--ink-2);
  font: 700 0.8rem/1.2 var(--f-body); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease;
}
.stages__btn::before { content: ""; width: 0.62rem; height: 0.62rem; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1.5px rgba(30, 43, 34, 0.55); }
.stages__btn:hover { background: #fff; color: var(--ink); }
.stages__btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* on a touch screen, 44 px high: the rows sit too close for a bigger area that doesn't show */
@media (pointer: coarse) { .stages__btn { min-height: 44px; } }
.stage-notes { list-style: none; margin: 0.8rem 0 0; padding: 0.9rem 1.1rem; border-radius: 10px; background: rgba(239, 228, 204, 0.55); border: 1px dashed rgba(30, 43, 34, 0.22); }
.stage-notes li + li { margin-top: 0.9rem; }
.flight--explore.is-live .stage-notes { min-height: 7.4rem; }
.flight--explore.is-live .stage-notes li:not(.is-on) { display: none; }
.flight--explore.is-live .stage-notes li.is-on { animation: note-in 0.45s var(--ease-grow); }
@keyframes note-in { from { opacity: 0; translate: 0 6px; } }
.stage-notes h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.7rem; font: 750 1.05rem/1.3 var(--f-body); letter-spacing: 0; }
.stage-notes h3 span { font-size: 0.72rem; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; color: var(--earth); }
.stage-notes p { margin-top: 0.3rem; font-size: 0.98rem; color: var(--ink-2); }

/* Crops, as seed packets ------------------------------------------------------------------ */
.packets { list-style: none; margin: clamp(2.5rem, 5vw, 3.6rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(0.9rem, 2vw, 1.6rem); }
.packet {
  position: relative; display: grid; padding: 1rem 0.7rem 0; background: var(--card); border-radius: 3px 3px 6px 6px;
  box-shadow: var(--shadow-paper); rotate: var(--tilt, 0deg); transition: rotate 0.35s var(--ease-grow), translate 0.35s var(--ease-grow);
}
/* the crimped top of the packet */
.packet::before { content: ""; position: absolute; inset: 0 0 auto; height: 0.55rem; border-bottom: 1px solid rgba(30, 43, 34, 0.14); background: repeating-linear-gradient(90deg, rgba(30, 43, 34, 0.12) 0 1.5px, transparent 1.5px 5px); }
/* and the colour band along its foot */
.packet::after { content: ""; height: 0.6rem; margin: 0 -0.7rem; border-radius: 0 0 6px 6px; background: var(--band, var(--earth)); }
.packet:hover { rotate: 0deg; translate: 0 -6px; }
.packet img { width: 100%; height: auto; }
.packet__name { margin-top: 0.3rem; padding-top: 0.55rem; border-top: 1.5px solid var(--ink); font: 700 clamp(0.86rem, 0.8rem + 0.25vw, 1.02rem)/1.1 var(--f-mark); letter-spacing: 0.12em; text-transform: uppercase; text-align: center; }
.packet__latin { margin: 0.25rem 0 0.7rem; font-family: var(--f-display); font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; font-size: 0.8rem; line-height: 1.2; text-align: center; color: var(--ink-3); }
@media (max-width: 1100px) { .packets { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 46rem; margin-inline: auto; } }
@media (max-width: 640px) { .packets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 0.9rem; } }

/* In Steve's words ------------------------------------------------------------------------ */
.words { background-color: #163a24; background-image: var(--grain), radial-gradient(ellipse at 80% 0%, rgba(155, 197, 61, 0.14), transparent 60%); color: #efe9d6; }
.words__eyebrow { color: #cfe0a8; }
.words__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.8fr); gap: clamp(1.8rem, 4vw, 3.8rem); margin-top: clamp(2rem, 4vw, 3rem); align-items: end; }
.word { margin: 0; }
.word blockquote { margin: 0; }
.word p {
  font-family: var(--f-display); font-style: italic; font-weight: 480; font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3.1rem); line-height: 1.08; letter-spacing: -0.01em; color: #fbf3e1; text-wrap: balance;
}
/* Steve speaking, not a review: each line opens and closes in his own marks (the opening one hung
   into the margin), and the caption under it names him */
.word p { text-indent: -0.42em; }
.word p * { text-indent: 0; } /* inherited, so an inline-block inside (the drawn mark) would take it too */
.word p::before { content: "\201C"; color: var(--wattle); }
.word p::after { content: "\201D"; color: var(--wattle); }
.word--b p { font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.4rem); }
.word--c p { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); color: var(--wattle-2); }
.word .mark { --mark: rgba(242, 182, 50, 0.55); --mark-w: 6; }
.word figcaption { margin-top: 0.9rem; font-family: var(--f-hand); font-weight: 600; font-size: 1.45rem; line-height: 1.1; color: #cfe0a8; }
@media (max-width: 900px) { .words__grid { grid-template-columns: 1fr; gap: 2.6rem; } .word--b { padding-left: 12%; } }

/* Get in touch ---------------------------------------------------------------------------- */
.ask__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.ask__text h2 { margin-top: 1rem; }
.ask__text .lede { margin-top: 1.3rem; }
.more { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 0.9rem; max-width: 30rem; }
.more__link {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; padding: 0.85rem 1rem;
  border: 1px dashed rgba(30, 43, 34, 0.24); border-radius: 12px; color: var(--ink-2); text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, translate 0.3s var(--ease-grow);
}
.more__link:hover { background: rgba(251, 247, 238, 0.75); border-color: var(--earth); translate: 4px 0; }
.more__link strong { display: block; font-family: var(--f-display); font-size: var(--step-1); font-weight: 600; line-height: 1.2; color: var(--ink); }
.more__ico { width: 2.8rem; height: 2.8rem; display: grid; place-items: center; color: var(--ink); }
.more__ico svg { width: 1.6rem; height: 1.6rem; }
@media (max-width: 900px) { .ask__grid { grid-template-columns: 1fr; } }

/* Get in touch: a letter to Steve ---------------------------------------------------------- */
.letter { padding-block: clamp(7rem, 17vh, 10.5rem) var(--section); }
.letter__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.letter__text h1 { margin-top: 0.9rem; max-width: 12ch; }
.letter__text .lede { margin-top: 1.2rem; }
.letter__form { margin-top: clamp(2rem, 4vw, 2.8rem); }
.letter__art { margin: clamp(3rem, 9vw, 7rem) 0 0; }
/* painted straight onto the page: the paper of the painting is the paper of the page */
.art--sheet { aspect-ratio: var(--ratio, 300 / 273); }
.art--sheet img { mix-blend-mode: multiply; }

/* what happens after you post it */
.next { margin-top: clamp(2.2rem, 4vw, 3rem); padding-left: clamp(0rem, 2vw, 1.6rem); }
.next__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.1rem; }
.next__title { font-size: var(--step-3); }
.next__steps { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.next__steps li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.9rem; align-items: start; }
.next__steps p { color: var(--ink-2); }
.next__steps strong { display: block; color: var(--ink); }
.next__no {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-top: -0.2rem;
  border: 2px solid var(--earth); border-radius: 48% 52% 45% 55% / 55% 45% 52% 48%;
  color: var(--earth); font-size: 1.7rem; rotate: -4deg;
}
.next__steps li:nth-child(2) .next__no { rotate: 5deg; border-radius: 55% 45% 50% 50% / 45% 55% 48% 52%; }
.next__steps li:nth-child(3) .next__no { rotate: -2deg; }
.next .more { margin-top: 1.8rem; }

@media (max-width: 900px) {
  .letter__grid { grid-template-columns: 1fr; }
  /* the painting goes above the heading and the notes below the form */
  .letter__side { display: contents; }
  .letter__art { order: -1; width: min(82%, 24rem); margin: 0 auto 0.4rem; }
  .next { margin-top: 1rem; padding-left: 0; }
}

.topics { min-width: 0; margin: 0; padding: 0; border: 0; }
.topics legend { margin-bottom: 0.55rem; padding: 0; font-weight: 700; font-size: 0.9rem; }
.topics__row { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.topics label { position: relative; cursor: pointer; }
.topics input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.topics span {
  display: inline-block; padding: 0.42rem 0.85rem; border: 1.5px solid rgba(30, 43, 34, 0.28); border-radius: 999px;
  background: #fffaf0; font-size: 0.88rem; font-weight: 700; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.topics label:hover span { border-color: var(--ink); }
.topics input:checked + span { background: var(--canopy); border-color: var(--canopy); color: var(--paper); }
.topics input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

/* the galah's greeting, and the envelope that goes in the slot when the form is posted */
.galah-says text { transition: opacity 0.4s ease; }
.galah-says__done { opacity: 0; }
.is-posted .galah-says__hi { opacity: 0; }
.is-posted .galah-says__done { opacity: 1; transition-delay: 1.5s; }
.js [data-draw] .galah-says { opacity: 0; transform: translateY(4px) rotate(-3deg); transform-box: fill-box; transition: opacity 0.5s ease 1s, transform 0.8s var(--ease-grow) 1s; }
.js [data-draw].is-in .galah-says { opacity: 1; transform: none; }
.envelope { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.envelope rect { fill: #fffaf0; stroke: var(--ink); stroke-width: 1.2; }
.envelope path { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.envelope .envelope__stamp { fill: var(--galah); stroke-width: 0.8; }
.is-posting .envelope { animation: post 1.8s var(--ease-grow) forwards; }
@keyframes post {
  0% { opacity: 0; transform: translate(26px, -46px) rotate(14deg); }
  18% { opacity: 1; }
  55% { opacity: 1; transform: translate(0, -2px) rotate(0deg); }
  70% { opacity: 1; transform: translate(0, -2px); }
  100% { opacity: 1; transform: translate(0, 26px); }
}
.no-motion .is-posting .envelope { animation: none; }

/* Sign in: an email, then a code that comes in the post ----------------------------------------- */
.signin__card { display: grid; gap: 1rem; max-width: 34rem; margin-top: clamp(2rem, 4vw, 2.8rem); padding: clamp(1.4rem, 3vw, 2.2rem); rotate: -0.3deg; }
.signin__title { font-size: var(--step-2); }
.signin__sent { color: var(--ink-2); }
.signin__sent strong { color: var(--ink); overflow-wrap: anywhere; }
.signin__code { max-width: 15ch; font-size: 1.7rem; font-weight: 750; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.signin__links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.7rem; color: var(--ink-3); }
.signin__again { padding: 0; border: 0; background: none; font: inherit; font-size: 0.95rem; font-weight: 700; color: var(--canopy-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.signin__again:disabled { color: var(--ink-3); text-decoration: none; cursor: default; }
.signin__small a, .signin__new a { color: inherit; }
.signin__new { max-width: 34rem; margin-top: 1.4rem; color: var(--ink-2); }
.signin__new--audit { margin-top: 0.6rem; }
/* Where sign-in is off on a build marked live (.sign-in-off: the head script's, before first paint, where this
   tab's last answer says so, or members.js's once the site answers), there's no form: its lede and "or join it"
   go with it, and "Signing in opens soon" shows, with no jump as sign-in.js takes over (qag-1gjs) */
.sign-in-off .signin [data-step="email"], .sign-in-off .signin .lede, .sign-in-off [data-signin-join] { display: none; }
.sign-in-off .signin [data-signin-off][hidden] { display: grid !important; }

/* Stopping the emails (unsubscribe.html): the sign-in card's shape, and the galah says righto as the
   answer comes back (there's no envelope to wait for) */
.unsub__card { display: grid; gap: 1rem; max-width: 34rem; margin-top: clamp(2rem, 4vw, 2.8rem); padding: clamp(1.4rem, 3vw, 2.2rem); rotate: -0.3deg; }
.unsub__said { color: var(--ink-2); }
.unsub__said strong { color: var(--ink); }
.unsub__said a, .unsub__small a { color: inherit; }
.unsub__said:focus { outline: none; }
.unsub__small { max-width: 34rem; margin-top: 1.4rem; }
.unsub .is-posted .galah-says__done { transition-delay: 0.2s; }
/* on a phone, a smaller galah and less paper above it, so the button is on the first screen */
@media (max-width: 900px) {
  .unsub { padding-top: 5.2rem; }
  .unsub .letter__art { width: min(44%, 13rem); }
}

/* A book's month (book.html): the sign-in card's shape, a box that fits XXXX-XXXX-XXXX, and the galah
   welcomes them in as the month starts */
.book__card { display: grid; gap: 1rem; max-width: 34rem; margin-top: clamp(2rem, 4vw, 2.8rem); padding: clamp(1.4rem, 3vw, 2.2rem); rotate: -0.3deg; }
.book__code { max-width: 19ch; font-size: 1.35rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.book__said { color: var(--ink-2); overflow-wrap: anywhere; }
.book__said a, .book__small a { color: inherit; }
.book__said:focus { outline: none; }
.book__small { max-width: 34rem; margin-top: 1.4rem; }
.book .is-posted .galah-says__done { transition-delay: 0.2s; }
@media (max-width: 900px) {
  .book { padding-top: 5.2rem; }
  .book .letter__art { width: min(44%, 13rem); }
}

/* Not found: a gateway onto an empty track, and the ways back ------------------------------------ */
.lost__ways { max-width: 34rem; margin-top: clamp(2rem, 4vw, 2.8rem); padding-block: clamp(1.1rem, 2.4vw, 1.6rem); rotate: -0.3deg; }
.lost__title { font-family: var(--f-hand); font-weight: 600; font-size: 1.7rem; line-height: 1; color: var(--earth); }
.lost__ways ul { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.lost__ways li + li { border-top: 1px dashed var(--rule); }
.lost__ways a { display: grid; gap: 0.1rem; padding: 0.7rem 0; color: var(--ink); text-decoration: none; }
.lost__ways strong { font-family: var(--f-display); font-size: var(--step-1); font-weight: 600; }
.lost__ways span { font-size: 0.95rem; color: var(--ink-2); }
.lost__ways a:hover strong { text-decoration: underline; text-decoration-color: var(--wattle); text-underline-offset: 4px; }
.lost__art { margin: clamp(2.5rem, 8vw, 6.5rem) 0 0; }
.lost__plate { aspect-ratio: 1280 / 956; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-paper), 0 30px 60px -34px rgba(40, 25, 10, 0.5); rotate: 0.8deg; }
.lost__plate img { object-fit: cover; }

/* Privacy, in plain words ------------------------------------------------------------------------ */
.policy { padding-block: clamp(7.5rem, 16vh, 10rem) var(--section); }
.policy__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 21rem); grid-template-areas: "head head" "body short"; gap: clamp(2rem, 4vw, 3rem) clamp(2rem, 6vw, 5.5rem); align-items: start; }
.policy__head { grid-area: head; max-width: 44rem; }
.policy__head h1 { margin-top: 0.9rem; }
.policy__head .lede { margin-top: 1.1rem; }
.policy__date { margin-top: 1.1rem; font-size: 0.78rem; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.policy__short { grid-area: short; position: sticky; top: 6.5rem; rotate: 0.6deg; background: #fdf3d3; }
.policy__short-label { font-family: var(--f-hand); font-weight: 600; font-size: 1.7rem; line-height: 1; color: var(--earth); }
.policy__short ul { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.policy__short li { position: relative; padding-left: 1.5rem; color: var(--ink-2); line-height: 1.45; }
.policy__short li::before { content: ""; position: absolute; left: 0.1rem; top: 0.45em; width: 0.7rem; height: 0.42rem; border-left: 2.5px solid var(--canopy-2); border-bottom: 2.5px solid var(--canopy-2); rotate: -48deg; border-radius: 0 0 0 2px; }
.policy__body { grid-area: body; max-width: 42rem; }
.policy__body h2 { margin-top: 2.4rem; font-size: var(--step-2); }
.policy__body h2:first-child { margin-top: 0; }
.policy__body h3 { margin-top: 1.5rem; font-size: var(--step-1); }
.policy__body p, .policy__body ul { margin-top: 0.6rem; color: var(--ink-2); }
.policy__body ul { padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.policy__body strong { color: var(--ink); }
@media (max-width: 860px) {
  .policy__grid { grid-template-columns: 1fr; grid-template-areas: "head" "short" "body"; }
  .policy__short { position: static; rotate: 0deg; }
}

/* About: who Steve is ---------------------------------------------------------------------- */
/* About: why he does it, beside the farm handed on */
.handed { padding-top: clamp(0.5rem, 2vw, 1.5rem); }
.handed__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.handed__text h2 { margin-top: 1rem; max-width: 12ch; }
.handed__text > p:not(.eyebrow) { margin-top: 1.1rem; max-width: 34rem; color: var(--ink-2); }
.handed__art { margin: 0; }
@media (max-width: 860px) { .handed__grid { grid-template-columns: 1fr; } .handed__art { max-width: 36rem; } }
.story__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 6vw, 6.5rem); align-items: start; }
.story__photo { position: relative; width: min(100%, 24rem); justify-self: center; margin-top: 1rem; }
/* hung from the photo's foot by its top, where it always sat (4.6rem down to its foot, less its two lines), so
   with a reader's own text spacing it grows down into the space below, not up over the caption */
.story__note { position: absolute; right: -1.2rem; top: calc(100% + 4.6rem - 2em); }
.story__note svg { transform: scale(-1, -1) translate(0, 0.4rem); }
.story__text h2 { margin-top: 1rem; max-width: 14ch; }
.story__text .lede { margin-top: 1.3rem; }
.story__text .stamp { margin-top: 1.1rem; }
.story__text > p:not(.lede):not(.eyebrow) { margin-top: 1.1rem; max-width: 38rem; color: var(--ink-2); }
@media (max-width: 860px) {
  .story__grid { grid-template-columns: 1fr; }
  .story__photo { width: min(74%, 20rem); margin-bottom: 4.5rem; }
  /* hung off the photo's right side, but never closer than 0.9rem to the window's edge */
  .story__note { right: calc(-1 * min(3.4rem, (100vw - 100%) / 2 - 0.9rem)); }
}

/* About: what he believes, painted straight onto the page ------------------------------------ */
.beliefs__list { list-style: none; margin: clamp(2.8rem, 6vw, 4.6rem) 0 0; padding: 0; display: grid; gap: clamp(3.4rem, 8vw, 6.5rem); }
.belief { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.belief:nth-child(even) .belief__art { order: 2; }
.belief__art { justify-self: center; width: 100%; max-width: 34rem; }
.belief:nth-child(1) .belief__art { max-width: 21rem; }
.belief:nth-child(3) .belief__art { max-width: 29rem; }
.belief .art__over .art__hand { stroke: var(--paper); }
.belief__text { max-width: 31rem; }
.belief__no { font-size: 3.2rem; line-height: 0.8; color: var(--earth); }
.belief__line { margin: 0.7rem 0 0; }
.belief__line p {
  font-family: var(--f-display); font-style: italic; font-weight: 480; font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.8rem); line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance;
}
.belief__line em { color: var(--canopy-2); }
.belief__text > p:not(.belief__no):not(.belief__also) { margin-top: 1.1rem; color: var(--ink-2); }
.belief__also { margin-top: 1.1rem; padding-left: 1rem; border-left: 3px solid var(--sap); font-family: var(--f-display); font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; font-size: var(--step-1); line-height: 1.3; color: var(--canopy); }
@media (max-width: 760px) {
  .belief { grid-template-columns: 1fr; gap: 1.4rem; }
  .belief:nth-child(even) .belief__art { order: 0; }
  .belief__art { max-width: 26rem; }
  .belief:nth-child(1) .belief__art { max-width: 15rem; }
}

/* About: Steve-isms, pinned up like notes ------------------------------------------------- */
.sayings { background-color: var(--paper-2); background-image: var(--grain); background-size: 260px 260px; }
.sayings__wall {
  list-style: none; margin: clamp(2.8rem, 5vw, 3.8rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.2rem, 4vw, 3.4rem) clamp(1.4rem, 3vw, 2.8rem); align-items: start;
}
.saying {
  position: relative; min-height: 11.5rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1.3rem;
  padding: 1.9rem 1.5rem 1.2rem; background-color: #fffdf6; rotate: var(--tilt, 0deg);
  box-shadow: 0 18px 30px -22px rgba(74, 46, 16, 0.6), 0 2px 5px -2px rgba(74, 46, 16, 0.22);
  transition: rotate 0.5s var(--ease-grow), translate 0.5s var(--ease-grow);
}
.saying:hover { rotate: 0deg; translate: 0 -5px; }
.saying:nth-child(3n + 2) { margin-top: 2.6rem; }
.saying::before {
  content: ""; position: absolute; top: -0.8rem; left: 50%; width: 42%; height: 1.6rem; translate: -50% 0; rotate: -3deg;
  background: rgba(236, 219, 168, 0.8); 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%);
}
.saying__line {
  font-family: var(--f-display); font-style: italic; font-weight: 480; font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: clamp(1.35rem, 1.05rem + 1vw, 1.85rem); line-height: 1.14; color: var(--ink); text-wrap: balance;
}
.saying__line em { color: var(--canopy-2); }
.saying__where { font: 800 0.7rem/1.3 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--earth); }
.saying__where a { text-decoration: none; }
.saying__where a:hover { text-decoration: underline; }
/* on a touch screen, tapped by an area 44 px high that shows no bigger (qag-3kjmx) */
@media (pointer: coarse) {
  .saying__where a { position: relative; }
  .saying__where a::after { content: ""; position: absolute; inset: -13px -4px; }
}
/* the papers: an index card, a sticky note, graph paper, an exercise book, a kraft tag, a torn scrap */
.saying--card {
  padding-top: 3.1rem;
  background-image: linear-gradient(transparent 2.2rem, rgba(214, 90, 70, 0.45) 2.2rem, rgba(214, 90, 70, 0.45) calc(2.2rem + 1px), transparent calc(2.2rem + 1px)),
    repeating-linear-gradient(transparent 0 1.75rem, rgba(91, 127, 160, 0.17) 1.75rem calc(1.75rem + 1px));
}
.saying--sticky { background-color: #f8e18a; background-image: linear-gradient(rgba(120, 90, 0, 0.06), transparent 2.4rem); box-shadow: 0 20px 26px -18px rgba(74, 46, 16, 0.55), 0 1px 3px rgba(74, 46, 16, 0.18); }
.saying--sticky::before { display: none; }
.saying--grid { background-color: #fcf9f1; background-image: linear-gradient(rgba(91, 127, 160, 0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(91, 127, 160, 0.15) 1px, transparent 1px); background-size: 18px 18px; }
.saying--lined {
  padding-left: 3rem;
  background-image: linear-gradient(90deg, transparent 2.1rem, rgba(214, 90, 70, 0.4) 2.1rem, rgba(214, 90, 70, 0.4) calc(2.1rem + 1px), transparent calc(2.1rem + 1px)),
    repeating-linear-gradient(transparent 0 1.6rem, rgba(91, 127, 160, 0.2) 1.6rem calc(1.6rem + 1px));
}
.saying--kraft { background-color: #d9ba8c; background-image: var(--grain); background-size: 260px 260px; border-radius: 6px; padding-top: 2.6rem; }
.saying--kraft::before { display: none; }
.saying--kraft::after {
  content: ""; position: absolute; top: 0.8rem; left: 50%; width: 0.9rem; height: 0.9rem; translate: -50% 0; border-radius: 50%;
  background: var(--paper-2); border: 3px solid #b99462; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
.saying--kraft .saying__line { color: #3a2a18; }
.saying--kraft .saying__line em { color: #6e2f1b; }
.saying--kraft .saying__where { color: #6e2f1b; }
.saying--torn { background: none; box-shadow: none; filter: drop-shadow(0 12px 12px rgba(74, 46, 16, 0.22)) drop-shadow(0 1px 2px rgba(74, 46, 16, 0.18)); }
.saying--torn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; background: #fffdf6;
  clip-path: polygon(0 5%, 5% 2%, 11% 5.5%, 17% 1.5%, 24% 4.5%, 31% 0.5%, 38% 4%, 46% 1%, 53% 5%, 61% 1.5%, 68% 4.5%, 75% 0.5%, 83% 4%, 90% 1%, 96% 4.5%, 100% 2%, 100% 100%, 0 100%);
}
@media (max-width: 980px) { .sayings__wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } .saying:nth-child(3n + 2) { margin-top: 0; } .saying:nth-child(even) { margin-top: 2rem; } }
@media (max-width: 600px) { .sayings__wall { grid-template-columns: 1fr; max-width: 24rem; margin-inline: auto; } .saying:nth-child(even) { margin-top: 0; } .saying { min-height: 0; } }

/* About: why Quorum, signals adding up in the night --------------------------------------- */
.quorum {
  background-color: #1f2649; color: #e7e5f4;
  background-image: var(--grain), radial-gradient(ellipse at 78% 38%, rgba(128, 146, 232, 0.3), transparent 58%), radial-gradient(ellipse at 8% 100%, rgba(242, 182, 50, 0.13), transparent 55%);
  background-size: 260px 260px, auto, auto;
}
.quorum__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.quorum__eyebrow { color: #c8cef6; }
.quorum h2 { margin-top: 0.9rem; color: #fbf3e1; }
.quorum h2 em { color: var(--wattle-2); }
.quorum .lede { margin-top: 1.2rem; color: #ecebf7; }
.quorum__text > p:not(.lede):not(.eyebrow) { margin-top: 1rem; color: rgba(231, 229, 244, 0.84); }
.quorum__cta { margin-top: 1.7rem; }
.quorum__fig { margin: 0; }
.signals { display: block; width: 100%; height: auto; overflow: visible; }
.signals__count { margin-top: 0.3rem; text-align: center; font-family: var(--f-hand); font-weight: 600; font-size: 1.55rem; color: #c8cef6; transition: color 0.4s ease; }
.signals__done { display: none; }
.quorum__fig.is-quorum .signals__count { color: var(--wattle-2); }
.quorum__fig.is-quorum .signals__tally { display: none; }
.quorum__fig.is-quorum .signals__done { display: inline; }
.signals .cell { cursor: pointer; }
.signals__lens { stroke: none; }
.signals__grains path { fill: rgba(170, 179, 234, 0.07); stroke: rgba(170, 179, 234, 0.2); stroke-width: 1; }
.signals__root { fill: #4d5898; stroke: #aab3ea; stroke-width: 1.4; stroke-opacity: 0.6; }
.signals__walls { fill: none; stroke: #aab3ea; stroke-width: 0.8; opacity: 0.28; }
.signals__hair { fill: none; stroke: #4d5898; stroke-width: 3.6; stroke-linecap: round; }
.signals__hair--edge { stroke: rgba(170, 179, 234, 0.6); stroke-width: 6; }
.signals__ring { fill: none; stroke: #c8cef6; stroke-width: 2; opacity: 0.45; }
.signals__ticks { fill: none; stroke: #c8cef6; stroke-width: 1.4; stroke-linecap: round; opacity: 0.5; }
.signals__label { font-family: var(--f-hand); font-weight: 600; font-size: 20px; fill: #c8cef6; }
.signals__arrow { fill: none; stroke: #c8cef6; stroke-width: 1.3; stroke-linecap: round; opacity: 0.8; }
.cell__body { fill: #7d88c9; stroke: #b9c1f2; stroke-width: 1.2; transition: fill 0.5s ease, stroke 0.5s ease; }
.cell__ring { fill: none; stroke: #f7d26a; stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.cell.is-signal .cell__body { fill: #d9c98a; }
.cell.is-signal .cell__ring { animation: signal 1.9s ease-out var(--lag, 0s) infinite; }
.signals.is-quorum .cell__body { fill: var(--wattle-2); stroke: #fff3c4; }
.signals .link { stroke: rgba(247, 210, 106, 0.55); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 1 1.05; stroke-dashoffset: 1.02; transition: stroke-dashoffset 1.1s var(--ease-grow) var(--d, 0s); }
.signals.is-quorum .link { stroke-dashoffset: 0; }
.signals .halo { opacity: 0; transition: opacity 1.2s ease; }
.signals.is-quorum .halo { opacity: 1; }
@keyframes signal { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } }
.no-motion .cell.is-signal .cell__ring { animation: none; opacity: 0.5; transform: scale(1.8); }
@media (max-width: 860px) { .quorum__grid { grid-template-columns: 1fr; } .quorum__fig { max-width: 30rem; margin-inline: auto; width: 100%; } }

/* About: three ways to work with Steve ---------------------------------------------------- */
.doorway { list-style: none; margin: clamp(2.4rem, 5vw, 3.4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 2.6vw, 2.2rem); }
.doorway__item { padding: 0; }
.doorway__item:nth-child(1) { rotate: -0.6deg; }
.doorway__item:nth-child(2) { rotate: 0.4deg; margin-top: 1.4rem; }
.doorway__item:nth-child(3) { rotate: -0.3deg; }
.doorway__link { display: grid; align-content: start; gap: 0.35rem; height: 100%; padding: 1rem 1.2rem 1.5rem; color: inherit; text-decoration: none; border-radius: inherit; }
.doorway__link picture { overflow: hidden; border-radius: 8px; }
.doorway__link img { display: block; width: 100%; height: auto; transition: scale 0.8s var(--ease-grow); }
.doorway__link:hover img { scale: 1.04; }
.doorway__kicker { margin-top: 0.7rem; font: 800 0.7rem/1.2 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--earth); }
.doorway__title { font-family: var(--f-display); font-size: var(--step-2); font-weight: 600; line-height: 1.1; }
.doorway__text { color: var(--ink-2); }
.doorway__go { margin-top: 0.6rem; display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 750; }
.doorway__go svg { width: 1.1rem; height: 1.1rem; transition: translate 0.3s var(--ease-grow); }
.doorway__link:hover .doorway__go svg { translate: 4px 0; }
.doorway__more { margin-top: clamp(2rem, 4vw, 2.8rem); text-align: center; font-family: var(--f-hand); font-weight: 600; font-size: 1.65rem; color: var(--ink-2); }
.doorway--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 54rem; margin-inline: auto; }
@media (max-width: 860px) { .doorway { grid-template-columns: 1fr; max-width: 28rem; margin-inline: auto; } .doorway__item:nth-child(2) { margin-top: 0; } }

/* Speaking: the talks on a flip chart ------------------------------------------------------ */
.talks__grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.easel { margin: 0; width: 100%; max-width: 30rem; justify-self: center; }
.easel__pad { pointer-events: none; }
.pad__paper { fill: #fdfcf9; stroke: rgba(44, 34, 24, 0.5); stroke-width: 0.7; }
.pad__shade { fill: #2c2419; opacity: 0; }
.pad__ink { fill: none; stroke: #2c3550; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pad__ink--red { stroke: #c4493a; }
.pad__ink--green { stroke: #3f7a3c; }
.pad__text { font-family: var(--f-hand); font-weight: 700; font-size: 15.5px; fill: #2c3550; text-anchor: middle; }
.pad__text--sm { font-size: 9.5px; }
.pad__text--big { font-size: 16px; }
.pad__text--red { fill: #c4493a; }
.pad__text--green { fill: #3f7a3c; }
.pad__text--end { text-anchor: end; }
.pad__write .pad__ink { stroke-dasharray: 1 1.02; stroke-dashoffset: 1.01; transition: stroke-dashoffset 0.55s cubic-bezier(0.4, 0, 0.2, 1) var(--d, 0s); }
.pad__write .pad__text { clip-path: inset(-30% 100% -30% 0); transition: clip-path 0.45s cubic-bezier(0.4, 0, 0.2, 1) var(--d, 0s); }
.pad__write.is-written .pad__ink { stroke-dashoffset: 0; }
.pad__write.is-written .pad__text { clip-path: inset(-30% -5% -30% 0); }
.pad__now, .pad__now * { transition: none !important; }
.pad__over { transform-box: fill-box; transform-origin: 50% 0; }
.pad__over.is-flipping { animation: pad-flip 0.8s cubic-bezier(0.55, 0, 0.35, 1) forwards; }
.pad__over.is-flipping .pad__words { animation: pad-hide 0.8s linear forwards; }
.pad__over.is-flipping .pad__shade { animation: pad-shade 0.8s linear forwards; }
@keyframes pad-flip { 0% { transform: scaleY(1); } 56% { transform: scaleY(0.02); } 100% { transform: scaleY(-0.26); opacity: 0; } }
@keyframes pad-hide { 0%, 52% { opacity: 1; } 57%, 100% { opacity: 0; } }
@keyframes pad-shade { 0% { opacity: 0; } 52% { opacity: 0.24; } 100% { opacity: 0.08; } }

.talks__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.talk { border-bottom: 1px solid var(--rule); }
.talk__head { margin: 0; font-size: inherit; line-height: inherit; }
.talk__btn {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer;
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 1.1rem; align-items: center; gap: 1rem; padding: 1.05rem 0.25rem;
  font-family: var(--f-display); font-size: var(--step-1); font-weight: 560; line-height: 1.2; color: var(--ink);
}
.talk__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.talk__no { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 2px solid currentColor; font: 700 1.4rem/1 var(--f-hand); color: var(--earth); transition: background-color 0.3s ease, color 0.3s ease; }
.talk.is-open .talk__no { background: var(--earth); border-color: var(--earth); color: var(--card); }
.talk__btn:hover .talk__title { text-decoration: underline 2px var(--wattle); text-underline-offset: 0.22em; }
.talk__chev { width: 1.1rem; height: 1.1rem; color: var(--ink-3); transition: rotate 0.35s var(--ease-grow), color 0.3s ease; }
.talk.is-open .talk__chev { rotate: 90deg; color: var(--earth); }
.talk__body { padding: 0 0.25rem 1.5rem calc(2.5rem + 1.25rem); }
.talk.is-open .talk__body { animation: talk-open 0.5s var(--ease-grow); }
@keyframes talk-open { from { opacity: 0; translate: 0 -6px; } }
.talk__body > p { color: var(--ink-2); }
.talk__facts { margin: 1.1rem 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.3rem; }
.talk__facts dt { font: 800 0.66rem/1.2 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--earth); }
.talk__facts dd { margin: 0.4rem 0 0; font-size: 0.95rem; color: var(--ink-2); }
.talk__facts .talk__home { font: 600 1.45rem/1.1 var(--f-hand); color: var(--ink); }
.talk__ep { margin-top: 1.1rem; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.92rem; font-weight: 700; }
.talk__ep svg { width: 1rem; height: 1rem; }
@media (pointer: coarse) {
  .talk__ep { position: relative; }
  .talk__ep::after { content: ""; position: absolute; inset: -11px -4px; }
}
@media (max-width: 860px) { .talks__grid { grid-template-columns: 1fr; } .easel { max-width: 20rem; } }
@media (max-width: 520px) { .talk__facts { grid-template-columns: 1fr; gap: 0.9rem; } .talk__body { padding-left: 0.25rem; } }

/* Speaking: paddock, shed or stage ----------------------------------------------------- */
.formats { background-color: var(--paper-2); background-image: var(--grain); background-size: 260px 260px; }

/* Speaking: for organisers: a clipboard and a run sheet --------------------------------- */
:root { --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 13.5 C 5.8 15.2, 7.6 17.4, 9 20.4 C 11.8 13.4, 15.8 7.8, 21 3.6' fill='none' stroke='black' stroke-width='3.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.organise__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2.2rem, 5vw, 4.5rem); align-items: start; margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.clipboard {
  position: relative; rotate: -1.2deg; padding: 2.2rem 1.1rem 1.1rem; border-radius: 14px;
  background-color: #b88a5a;
  background-image: var(--grain), linear-gradient(160deg, rgba(255, 255, 255, 0.16), transparent 42%), repeating-linear-gradient(96deg, rgba(90, 55, 25, 0.09) 0 3px, transparent 3px 11px);
  background-size: 260px 260px, auto, auto;
  box-shadow: inset 0 0 0 1px rgba(70, 40, 15, 0.35), 0 28px 44px -28px rgba(60, 38, 14, 0.75);
}
.clipboard__clip { position: absolute; z-index: 2; top: -0.8rem; left: 50%; translate: -50% 0; width: 7.5rem; height: 2.7rem; border-radius: 8px 8px 14px 14px; background: linear-gradient(#eef0f1, #a9adb0 55%, #d9dbdd); box-shadow: 0 4px 5px rgba(0, 0, 0, 0.28), inset 0 1px 0 #fff; }
.clipboard__clip::after { content: ""; position: absolute; left: 50%; top: 0.6rem; translate: -50% 0; width: 2.3rem; height: 0.72rem; border-radius: 999px; background: #7b8084; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5); }
.clipboard__sheet {
  position: relative; padding: 1.9rem 1.4rem 1.3rem; background-color: #fffdf6; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
}
.clipboard__title { font-size: var(--step-1); }
.ticks { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.ticks li { position: relative; padding-left: 2.3rem; line-height: 1.55; }
.ticks li::before {
  content: ""; position: absolute; left: 0.1rem; top: -0.05rem; width: 1.55rem; height: 1.55rem; background: var(--leaf);
  -webkit-mask: var(--tick) center / contain no-repeat; mask: var(--tick) center / contain no-repeat;
  clip-path: inset(0 100% 0 0); transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1) var(--td, 0.5s);
}
.ticks li:nth-child(2) { --td: 0.75s; }
.ticks li:nth-child(3) { --td: 1s; }
.ticks li:nth-child(4) { --td: 1.25s; }
.ticks li:nth-child(5) { --td: 1.5s; }
.clipboard.is-in .ticks li::before, .no-motion .ticks li::before { clip-path: inset(0 -10% 0 0); }
.clipboard__foot { margin-top: 1.2rem; padding-top: 0.9rem; border-top: 1px dashed rgba(30, 43, 34, 0.28); font-size: 0.95rem; color: var(--ink-2); }

.runsheet {
  --m: 6.6rem; position: relative; rotate: 0.8deg; padding: clamp(1.4rem, 3vw, 2rem) clamp(1.3rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2rem) 2.6rem;
  background-color: var(--card); box-shadow: var(--shadow-paper); border-radius: 3px;
  background-image: linear-gradient(90deg, transparent var(--m), rgba(214, 90, 70, 0.45) var(--m), rgba(214, 90, 70, 0.45) calc(var(--m) + 1px), transparent calc(var(--m) + 1px));
}
.runsheet::before { content: ""; position: absolute; left: 0.8rem; top: 12%; bottom: 12%; width: 0.85rem; background: radial-gradient(circle, var(--paper-2) 0 0.36rem, rgba(60, 38, 14, 0.22) 0.38rem 0.43rem, transparent 0.45rem) 0 0 / 0.85rem 33.3% repeat-y; }
.runsheet__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; margin-left: 4.6rem; }
.runsheet__title { font-size: var(--step-1); }
.runsheet__list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.runsheet__list li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 1.2rem; align-items: baseline; }
/* set against the right of its column, so a time made wider (a reader's own letter spacing) reaches back into
   the sheet's margin, not across the red line into the words */
.runsheet__time { justify-self: end; font-size: 1.65rem; line-height: 1; color: var(--earth); text-align: right; }
.runsheet__list div { color: var(--ink-2); }
.runsheet__list strong { color: var(--ink); }
@media (max-width: 860px) { .organise__grid { grid-template-columns: 1fr; max-width: 36rem; margin-inline: auto; } }
@media (max-width: 480px) { .runsheet { --m: 5.3rem; padding-left: 1.9rem; } .runsheet__head { margin-left: 3.7rem; } .runsheet__list li { grid-template-columns: 2.7rem minmax(0, 1fr); gap: 1rem; } .runsheet__time { font-size: 1.4rem; } .runsheet::before { left: 0.45rem; } }

/* Speaking: a flyer on the shed noticeboard -------------------------------------------- */
.pinup { background-color: var(--paper-2); background-image: var(--grain); background-size: 260px 260px; }
.pinup__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2.2rem, 6vw, 5rem); align-items: center; }
.pinup h2 { margin-top: 0.9rem; }
.pinup .lede { margin-top: 1.1rem; }
.pinup__cta { margin-top: 1.7rem; }
.board { margin: 0; }
.board .art-label { margin-top: 0.8rem; color: var(--ink-2); }
.board__cork {
  position: relative; padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1.2rem, 4vw, 3rem) clamp(2.4rem, 5vw, 3.4rem);
  border: 14px solid #8a6443; border-radius: 4px;
  background-color: #c69c6d;
  background-image: radial-gradient(rgba(92, 56, 24, 0.34) 0.8px, transparent 1.3px), radial-gradient(rgba(255, 238, 206, 0.3) 0.8px, transparent 1.3px), var(--grain);
  background-size: 6px 6px, 9px 9px, 260px 260px; background-position: 0 0, 2px 4px, 0 0;
  box-shadow: inset 0 0 0 1px rgba(40, 20, 5, 0.3), inset 0 10px 22px rgba(40, 20, 5, 0.35), 0 1px 0 #6d4c30, 0 30px 50px -30px rgba(50, 30, 10, 0.75);
}
.flyer { position: relative; z-index: 1; width: min(100%, 21rem); margin-inline: auto; rotate: -2deg; padding: 1.7rem 1.4rem 0; background: #fdf6d6; text-align: center; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.18), 0 20px 32px -20px rgba(40, 20, 5, 0.65); }
.flyer::before, .flyer::after { content: ""; position: absolute; top: 0.7rem; width: 0.95rem; height: 0.95rem; border-radius: 50%; box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.35); background: radial-gradient(circle at 35% 30%, #ff9a88, #c4382b 60%, #8e2219); }
.flyer::before { left: 0.8rem; }
.flyer::after { right: 0.8rem; background: radial-gradient(circle at 35% 30%, #fff3b0, #e2b52a 60%, #a37b12); }
.flyer__kicker { font: 800 0.72rem/1 var(--f-body); letter-spacing: 0.22em; text-transform: uppercase; color: var(--earth); }
.flyer__who { margin-top: 0.9rem; font-family: var(--f-display); font-size: clamp(1.8rem, 1.35rem + 1.5vw, 2.45rem); font-weight: 700; line-height: 1; color: var(--canopy); }
.flyer__who span { display: block; margin-bottom: 0.4rem; font: 700 0.78rem/1 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.flyer__topic { margin: 1rem auto 0; max-width: 17rem; font-family: var(--f-display); font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; font-size: 1.15rem; line-height: 1.25; color: var(--ink); }
.flyer__topic::before { content: "\201C"; }
.flyer__topic::after { content: "\201D"; }
.flyer__topic.is-new { animation: flyer-new 0.7s var(--ease-grow); }
@keyframes flyer-new { from { opacity: 0; filter: blur(3px); } }
.flyer__blanks { margin: 1.2rem 0 0; display: grid; gap: 0.4rem; text-align: left; }
.flyer__blanks div { display: grid; grid-template-columns: 4.3rem minmax(0, 1fr); align-items: end; }
.flyer__blanks dt { font: 800 0.66rem/1.7 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.flyer__blanks dd { margin: 0; padding-left: 0.3rem; border-bottom: 1.5px dotted rgba(30, 43, 34, 0.45); font: 600 1.4rem/1.15 var(--f-hand); color: #2a4f9a; }
.flyer__tear { margin: 1.3rem -1.4rem 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1.5px dashed rgba(30, 43, 34, 0.4); }
.flyer__tear span { display: grid; place-items: center; padding: 0.6rem 0; writing-mode: vertical-rl; rotate: 180deg; border-right: 1.5px dashed rgba(30, 43, 34, 0.4); font: 700 0.6rem/1 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); background: #fdf6d6; }
.flyer__tear span:first-child { border-right: 0; }
.flyer__tear span:nth-child(2) { visibility: hidden; }
.flyer__tear span:nth-child(4) { rotate: 186deg; translate: 2px 4px; }
.board__note { position: absolute; z-index: 2; right: 5%; bottom: 7%; rotate: 7deg; padding: 0.75rem 0.95rem 0.8rem; background: #f4df76; font-size: 1.4rem; line-height: 0.95; color: var(--ink); box-shadow: 0 12px 16px -10px rgba(40, 20, 5, 0.6); }
.board__note::before { content: ""; position: absolute; top: 0.3rem; left: 50%; width: 0.8rem; height: 0.8rem; margin-left: -0.4rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #a9c8ff, #2f63c4 60%, #1d3f86); box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.35); }
.board__card { position: absolute; z-index: 0; left: 4%; top: 12%; rotate: -9deg; display: grid; gap: 0.15rem; padding: 0.7rem 0.95rem; background: #fffdf6; font: 600 0.72rem/1.2 var(--f-body); color: var(--ink-2); box-shadow: 0 10px 14px -10px rgba(40, 20, 5, 0.6); }
.board__card b { font-family: var(--f-mark); font-size: 0.82rem; letter-spacing: 0.2em; color: var(--ink); }
@media (max-width: 860px) { .pinup__grid { grid-template-columns: 1fr; } .board { max-width: 32rem; width: 100%; margin-inline: auto; } }
@media (max-width: 520px) { .board__card { display: none; } .board__note { right: 3%; bottom: 3%; font-size: 1.2rem; } }

/* QuorumAI: the opener's questions, pinned where a grower would ask them ------------------------ */
/* Each pin's arrow tip sits on its spot (--px, --py in the painting). public.js hides any pin that
   would leave the picture or run into the words, then they come up one after another. */
.q-pin { display: flex; flex-direction: column; align-items: center; gap: 0.05rem; margin: 0; translate: -50% -100%; pointer-events: none; transition: opacity 0.6s ease; }
.q-pin .hand {
  font-size: clamp(1.25rem, 0.95rem + 0.65vw, 1.7rem); line-height: 1; color: var(--earth-2); text-align: center; rotate: -3deg; white-space: nowrap;
  text-shadow: 0 0 2px #faf4e2, 0 0 4px #faf4e2, 0 0 8px rgba(250, 244, 226, 0.95), 0 0 16px rgba(250, 244, 226, 0.9);
}
.q-pin--2 .hand, .q-pin--4 .hand { rotate: 2deg; }
.q-pin svg { flex: none; width: 2.1rem; height: auto; overflow: visible; filter: drop-shadow(0 0 1.5px rgba(250, 244, 226, 0.95)) drop-shadow(0 0 3px rgba(250, 244, 226, 0.8)); }
.q-pin path { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.q-pin.is-off { visibility: hidden; }
.js .q-pin:not(.is-up) { opacity: 0; }
.js .q-pin.is-up .hand { animation: q-pin-up 0.9s var(--ease-grow) both; }
@keyframes q-pin-up { from { opacity: 0; transform: translateY(0.6rem) scale(0.92); } }
.no-motion .q-pin { opacity: 1 !important; }
.no-motion .q-pin .hand { animation: none !important; }

/* QuorumAI: try a question ---------------------------------------------------------------- */
.ask__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.ask__hint { font-size: 1.6rem; color: var(--earth); rotate: -2deg; }
.ask__picks { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.8rem; }
.ask__pick {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; gap: 0.35rem;
  padding: 0.95rem 1.15rem; border-radius: 16px 16px 16px 5px; background: var(--card); box-shadow: var(--shadow-paper);
  font-weight: 650; line-height: 1.35; color: var(--ink); transition: background-color 0.3s ease, translate 0.3s var(--ease-grow), box-shadow 0.3s ease;
}
.ask__pick:hover { translate: 3px 0; }
.ask__pick:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.ask__pick[aria-pressed="true"] { background: var(--wattle-2); box-shadow: 0 3px 0 var(--ink), 0 0 0 2px var(--ink); translate: 6px 0; }
.ask__small { margin-top: 1.2rem; }
.ask__chat { rotate: 0.5deg; box-shadow: var(--shadow-paper), 0 30px 60px -40px rgba(60, 38, 14, 0.5); scroll-margin-top: 1rem; }
.ask__body { min-height: 21rem; display: grid; gap: 0.8rem; align-content: start; }
.ask__body .chat__msg--me { justify-self: end; }
.ask__body .chat__reply { position: relative; }
.ask__body .chat__typing { position: absolute; left: 0; top: 0; }
.ask__body .chat__msg, .ask__body .chat__typing { opacity: 0; }
.ask__chat.is-live .chat__msg--me { animation: pop 0.5s var(--ease-grow) 0.1s both; }
.ask__chat.is-live .chat__typing { animation: pop 0.35s var(--ease-grow) 0.6s both, ask-typed 0.3s ease 1.9s forwards; }
.ask__chat.is-live .chat__msg--ai { animation: pop 0.7s var(--ease-grow) 2s both; }
@keyframes ask-typed { to { opacity: 0; visibility: hidden; } }
.no-motion .ask__body .chat__msg { opacity: 1; animation: none; }
.no-motion .ask__body .chat__typing { display: none; }
.chat__from { font: 800 0.66rem/1 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-right: 0.2rem; }
@media (max-width: 860px) { .ask__grid { grid-template-columns: 1fr; } .ask__body { min-height: 0; } }

/* QuorumAI: four moments on a farm, each a question to try ------------------------------------------ */
.ask__grid--moments { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.moments { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.7rem, 1.6vw, 1.1rem); }
.moments > li { display: grid; }
.ask__pick.moment { align-content: start; gap: 0.25rem; padding: 0.55rem 0.7rem 0.9rem; border-radius: 14px; background: var(--card); }
.moment__art { display: block; margin: 0 -0.2rem 0.1rem; }
.moment__art img { display: block; width: 100%; height: auto; transition: scale 0.6s var(--ease-grow); }
.moment:hover .moment__art img { scale: 1.04; }
.moment__where { font-size: 1.45rem; line-height: 1; color: var(--earth); rotate: -1.5deg; justify-self: start; }
.moment .ask__pick-q { font-size: 0.95rem; line-height: 1.35; }
.moments > li:nth-child(odd) .moment { rotate: -0.6deg; }
.moments > li:nth-child(even) .moment { rotate: 0.5deg; }
/* the picked one: a pencilled ring and a gold underline, and the paper stays paper */
.ask__pick.moment[aria-pressed="true"] { background: var(--card); translate: 0 -3px; box-shadow: 0 0 0 2px var(--ink), 0 5px 0 var(--ink), var(--shadow-paper); }
.ask__pick.moment[aria-pressed="true"] .moment__where { background: linear-gradient(var(--wattle-2), var(--wattle-2)) no-repeat 0 88% / 100% 0.45em; color: var(--earth-2); }
.ask__pick.moment:hover { translate: 0 -2px; }
@media (max-width: 860px) { .ask__grid--moments { grid-template-columns: 1fr; } }
/* on a phone the pictures and the moment carry the card; the question itself shows in the chat */
@media (max-width: 520px) {
  .ask__pick.moment { padding: 0.45rem 0.5rem 0.65rem; }
  .moment .ask__pick-q { display: none; }
  .moment__where { font-size: 1.3rem; justify-self: center; text-align: center; }
}

/* QuorumAI: where the answers come from -------------------------------------------------- */
.sources { background-color: var(--paper-2); background-image: var(--grain); background-size: 260px 260px; }
.sources__grid { list-style: none; margin: clamp(2.4rem, 5vw, 3.4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.2vw, 1.8rem); align-items: start; }
.source { display: grid; align-content: start; gap: 0.5rem; padding: 1rem 1rem 1.3rem; }
.source:nth-child(odd) { rotate: -0.5deg; }
.source:nth-child(even) { rotate: 0.45deg; margin-top: 1.2rem; }
.source__art { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 8px; margin-bottom: 0.4rem; }
.source__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.source h3 { font-size: var(--step-1); display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.source p { color: var(--ink-2); font-size: 0.97rem; }
.source .chip { justify-self: start; margin-top: 0.4rem; }
.source .chip svg { width: 1rem; height: 1rem; }
@media (max-width: 800px) { .sources__grid { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; } .source:nth-child(even) { margin-top: 0; } }

/* QuorumAI: five rules, on a star chart --------------------------------------------------------- */
/* The Southern Cross has five stars to steer by. By day it's a navigator's chart: ink on blue-washed
   paper, a pale band of Milky Way, and gold stars that glow as they're inked in. */
.rules {
  background-color: #e8efee;
  background-image: var(--grain), radial-gradient(ellipse at 72% 38%, rgba(142, 178, 214, 0.38), transparent 62%), linear-gradient(#eef3ef, #e2ebea);
  background-size: 260px 260px, auto, auto;
}
.rules__eyebrow { color: #3d5a80; }
.rules h2 em { color: var(--earth); }
.rules__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; margin-top: clamp(2.2rem, 4.5vw, 3.2rem); }
.rules__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.rule { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.9rem; align-items: start; padding: 0.7rem 0.8rem; border-radius: 12px; transition: background-color 0.3s ease; }
.rule:hover { background: rgba(255, 255, 255, 0.55); }
.rule__no { font: 700 2.1rem/0.9 var(--f-hand); color: var(--earth); text-align: center; }
.rule strong { display: block; font-family: var(--f-display); font-size: var(--step-1); font-weight: 600; line-height: 1.2; color: var(--ink); }
.rule p { margin-top: 0.3rem; color: var(--ink-2); }
.sky { margin: 0; }
.sky__svg { display: block; width: 100%; height: auto; overflow: visible; }
.sky__grid path { fill: none; stroke: #3d5a80; stroke-width: 0.8; stroke-dasharray: 1 5; stroke-linecap: round; opacity: 0.45; }
.sky__milk ellipse { fill: rgba(95, 132, 186, 0.2); }
.sky__milk .sky__sack { fill: #f2f5f1; opacity: 0.8; }
.sky__dots circle { fill: #2c3f63; }
.sky__dots .is-twinkle { animation: sky-twinkle 3.4s ease-in-out var(--tw, 0s) infinite alternate; }
@keyframes sky-twinkle { from { opacity: 0.2; } to { opacity: 0.8; } }
.star__glow { fill: url(#star-glow); opacity: 0; transition: opacity 1.2s ease var(--sd, 0s); }
.star__spark { fill: var(--wattle); stroke: #7a5418; stroke-width: 0.9; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; scale: 0.25; opacity: 0.2; transition: scale 1.1s var(--ease-grow) var(--sd, 0s), opacity 0.9s ease var(--sd, 0s); }
.star__no { font: 700 17px var(--f-hand); fill: var(--earth); opacity: 0; transition: opacity 0.6s ease var(--sd, 0s); }
.sky.is-in .star__glow { opacity: 1; }
.sky.is-in .star__spark { scale: var(--s, 1); opacity: 1; }
.sky.is-in .star__no { opacity: 1; }
.star--pointer .star__spark { fill: var(--wattle-2); }
.sky .art__ink { stroke: rgba(44, 63, 99, 0.7); stroke-width: 1.3; }
.js .sky[data-draw] .art__ink:not([fill]) { transition-delay: 2.5s; }
.sky__pointer { fill: none; stroke: rgba(44, 63, 99, 0.5); stroke-width: 1.1; stroke-dasharray: 2 6; stroke-linecap: round; opacity: 0; transition: opacity 1s ease 3s; }
.sky.is-in .sky__pointer { opacity: 1; }
.sky__label { font: 600 19px var(--f-hand); fill: var(--earth-2); }
.sky__arrow { fill: none; stroke: var(--earth-2); stroke-width: 1.3; stroke-linecap: round; opacity: 0.85; }
/* point at a rule and its star brightens */
.rules__grid:has(.rule--1:hover) .star--1 .star__spark, .rules__grid:has(.rule--2:hover) .star--2 .star__spark,
.rules__grid:has(.rule--3:hover) .star--3 .star__spark, .rules__grid:has(.rule--4:hover) .star--4 .star__spark,
.rules__grid:has(.rule--5:hover) .star--5 .star__spark { scale: calc(var(--s, 1) * 1.7); transition-delay: 0s; }
.no-motion .sky .star__spark { scale: var(--s, 1); opacity: 1; }
.no-motion .sky .star__glow, .no-motion .sky .star__no, .no-motion .sky__pointer { opacity: 1; }
@media (max-width: 860px) { .rules__grid { grid-template-columns: 1fr; } .sky { max-width: 32rem; margin-inline: auto; width: 100%; } }

/* QuorumAI: where to find it ---------------------------------------------------------------- */
/* three doors, three pictures cut to one shape; the painted spot is on the card's own paper colour,
   so it keeps all of itself, centred */
.find .doorway__link > picture, .doorway__spot, .find .doorway__over { aspect-ratio: 3 / 2; }
.find .doorway__link > picture img { height: 100%; object-fit: cover; }
.doorway__spot { display: grid; place-items: center; }
.doorway__spot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.doorway__over { position: relative; display: block; overflow: hidden; border-radius: 8px; }
.doorway__over picture { border-radius: 0; }
.doorway__ask { font-size: 21px; }
.doorway__line { fill: none; stroke: var(--earth); stroke-width: 1.6; stroke-linecap: round; }
/* the words on a doorway's painting zoom with it */
.doorway__over .art__over { transition: scale 0.8s var(--ease-grow); }
.doorway__link:hover .doorway__over .art__over { scale: 1.04; }

/* Programs: one bean, sowing to harvest, every stage numbered ---------------------------------- */
/* The eight stages share one frame, soil line and all, so side by side the bean grows along the row.
   Each picture is on white and multiplied onto the paper, and comes up on its own: nothing around it
   may fade or move, or the multiply stops reaching the paper (as with the specimen card). */
.sweep { margin: clamp(2.4rem, 5vw, 3.6rem) 0 0; }
.sweep__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1.4rem clamp(0.25rem, 0.9vw, 0.8rem); align-items: start; }
.sweep__stage { position: relative; display: grid; justify-items: center; align-content: start; padding: 0.9rem 0.35rem; border-radius: 18px; text-align: center; }
.sweep__plant { display: block; width: 100%; }
.sweep__plant img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.js .sweep[data-draw] .sweep__plant img { opacity: 0; translate: 0 12px; transition: opacity 0.9s var(--ease-grow), translate 0.9s var(--ease-grow); transition-delay: calc(var(--i, 0) * 0.09s); }
.js .sweep.is-in .sweep__plant img { opacity: 1; translate: none; }
.no-motion .sweep .sweep__plant img { opacity: 1 !important; translate: none !important; }
.sweep__name { margin-top: 0.45rem; font: 750 0.74rem/1.25 var(--f-body); letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-2); overflow-wrap: anywhere; hyphens: manual; }
.sweep__no { display: block; margin-top: 0.3rem; font: 600 1.2rem/1 var(--f-hand); letter-spacing: 0; text-transform: none; color: var(--earth); rotate: -2deg; }
/* the season runs left to right under the row, sowing to harvest */
.sweep__cap { position: relative; margin-top: 1.1rem; padding-top: 1.2rem; text-align: center; font-size: 0.98rem; color: var(--ink-2); }
.sweep__line { position: absolute; top: 0; left: 3%; right: 3%; height: 1.5px; background: var(--ink-3); opacity: 0.7; }
.sweep__line::after { content: ""; position: absolute; right: -2px; top: 50%; width: 0.55rem; height: 0.55rem; border-top: 1.5px solid var(--ink-3); border-right: 1.5px solid var(--ink-3); translate: 0 -50%; rotate: 45deg; }
@media (max-width: 860px) {
  .sweep__row { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 36rem; margin-inline: auto; }
}

/* Programs: the sections between the sheets of paper are the darker paper, so the torn edges show */
.ways-sec, .prog-crops, .supporter { background-color: var(--paper-2); background-image: var(--grain); background-size: 260px 260px; }

/* Programs: Steve's marks in red pencil, on the plan on the clipboard */
.ways-sec .doorway__over img { mix-blend-mode: multiply; }
.mark-up__title { font: 600 7.5px var(--f-hand); fill: var(--ink-2); }
.mark-up__bands rect { opacity: 0.26; }
.mark-up__passes circle { fill: var(--card); stroke: var(--ink); stroke-width: 0.9; }
.art__red { stroke: #b8322a; stroke-width: 1.3; }
.art__over .art__hand--red { font-size: 10.5px; fill: #b8322a; stroke: none; }

/* Programs: what's in a program, and an example season on a sheet */
.inprog__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2.2rem, 5vw, 4.5rem); align-items: start; margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.inprog__parts { margin-top: 0; }
.inprog__sheet .runsheet__list { gap: 0.85rem; }
/* a pass that has to be on before a critical stage carries its flag */
.inprog__foot { margin: 1.3rem 0 0 4.6rem; padding-top: 0.9rem; border-top: 1px dashed rgba(30, 43, 34, 0.28); font-size: 0.93rem; color: var(--ink-2); }
@media (max-width: 860px) { .inprog__grid { grid-template-columns: 1fr; max-width: 36rem; margin-inline: auto; } }
@media (max-width: 480px) { .inprog__foot { margin-left: 3.7rem; } }

/* Programs: a packet for each of the builder's crops, saying whose its stages are, and one to build your
   own: ten, three to a row and two on a phone, and a last one on its own in the middle of its row */
.packets--csi { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 45rem; margin-inline: auto; }
.packets--csi > :last-child:nth-child(3n + 1) { grid-column: 2; }
@media (max-width: 640px) {
  .packets--csi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .packets--csi > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - clamp(0.9rem, 2vw, 1.6rem)) / 2); }
}
/* a painting on white (the onion's, from the wiki) multiplies onto the packet's paper, as the builder's crop cards do */
.packet--on-white img { mix-blend-mode: multiply; }
.packet__csi { margin: 0.3rem 0 0.75rem; font-size: 0.8rem; line-height: 1.3; text-align: center; color: var(--ink-2); }
.packet__csi span { display: block; margin-bottom: 0.1rem; font: 800 0.66rem/1.2 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--earth); }
/* Programs: two of Steve's programs as books, each to ask for (SITE-3; on by Devonport) */
.prog-books { max-width: 45rem; margin: clamp(2.6rem, 6vw, 3.6rem) auto 0; }
.prog-books__title { font-size: var(--step-2); text-align: center; }
.prog-books__lede { margin: 0.6rem auto 0; max-width: 36rem; text-align: center; color: var(--ink-2); }
.prog-books .ways h4 { font-size: var(--step-1); font-weight: 620; }
.prog-books .ways .btn { margin-top: 0.8rem; }

/* Programs: the way in */
.prog-end__inner { display: grid; justify-items: center; max-width: 44rem; text-align: center; }
.prog-end h2 { margin-top: 0.9rem; }
.prog-end .lede { margin-top: 1rem; }
.prog-end__cta { margin-top: 1.7rem; justify-content: center; }
.prog-end__audit { margin: 1.2rem auto 0; max-width: 34rem; color: var(--ink-2); }

/* Programs: the supporter's panel, with thanks, on the darker paper at the foot of the page (tools/chrome.py,
   SUPPORTER). The drawing is laid on the card's own colour, so it sits on the card like ink on paper. */
.supporter__card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center; max-width: 64rem; margin-inline: auto; }
/* the drawing's paper and the card's can differ by a shade once the picture is compressed, so its
   edges fade into the card */
.supporter__art img {
  display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(transparent, #000 6%, #000 94%, transparent);
  mask-composite: intersect;
}
.supporter__text h2 { margin-top: 0.8rem; font-size: var(--step-3); text-wrap: balance; }
.supporter__name { white-space: nowrap; }
.supporter__text > p:not(.eyebrow) { margin-top: 0.9rem; max-width: 34rem; }
.supporter__go { margin-top: 1.4rem; }
/* it leaves the site: the arrow points up and out */
.supporter__go svg { rotate: -45deg; }
.supporter__text .supporter__fine { margin-top: 1.3rem; padding-top: 0.9rem; border-top: 1px dashed rgba(30, 43, 34, 0.28); font-size: 0.88rem; color: var(--ink-2); }
@media (max-width: 760px) { .supporter__card { grid-template-columns: minmax(0, 1fr); max-width: 32rem; } }

/* Join the hub (join.html): what a member gets, the way in, and the two other ways: the audit's free
   month, and the Course's waitlist */
.join__head { margin-top: clamp(2rem, 4vw, 2.6rem); font-size: var(--step-1); font-weight: 620; }
.join__ways { margin-top: 1.1rem; gap: 1.05rem; }
.join__card { display: grid; justify-items: start; gap: 0.8rem; max-width: 34rem; margin-top: clamp(2rem, 4vw, 2.6rem); padding: clamp(1.4rem, 3vw, 2rem); rotate: -0.4deg; }
/* on a live build, what join.js decides (the title, the line from the builder, the card) waits for it, so no
   paid offer shows where joining isn't open. Where it never decides (join.js never comes, or api/hub never
   answers, as its fetch has no deadline), the title shows anyway after 8 s, but not the card, whose button
   only join.js makes work (qag-1nk1j) */
html[data-live]:not([data-preview]) .join:not([data-join-ready]) #page-title { visibility: hidden; animation: join-wait 0s 8s forwards; }
html[data-live]:not([data-preview]) .join:not([data-join-ready]) .join__from,
html[data-live]:not([data-preview]) .join:not([data-join-ready]) .join__card { visibility: hidden; }
@keyframes join-wait { to { visibility: visible; } }
.join__title { font-size: var(--step-2); }
.join__price { font-weight: 650; }
.join__small { font-size: 0.92rem; color: var(--ink-2); }
.join__or { max-width: 34rem; margin-top: 1.3rem; color: var(--ink-2); }
.join__or strong { color: var(--ink); }
.join__plate { aspect-ratio: 960 / 717; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-paper), 0 30px 60px -34px rgba(40, 25, 10, 0.5); rotate: 0.8deg; }
.join__plate img { object-fit: cover; }
/* the gate, laid on the gateway in the painting's own proportions and hung on its hinge post. join.js
   swings it open as the page is scrolled (qag-26ji); under reduced motion it stands open, still */
.join__plate { perspective: 60rem; perspective-origin: 50% 30.5%; --open: 1; }
@media (prefers-reduced-motion: no-preference) { .join__plate { --open: 0; } }
.join__gate { position: absolute; left: 19.4167%; top: 44.9777%; width: 59.4167%; transform-origin: 2.3843% 50%; transform: rotateY(calc(var(--open) * 76deg)); pointer-events: none; }
.join__gate img { height: auto; filter: brightness(calc(1 - var(--open) * 0.18)); }
.join__from { max-width: 34rem; margin-top: clamp(1.6rem, 3vw, 2.2rem); padding: 0.55rem 0.8rem; border-left: 3px solid var(--wattle); background: rgba(247, 210, 106, 0.18); font-weight: 650; }
.join__from + .join__card { margin-top: 1rem; }
.join__soon-go { margin-top: 1.1rem; }
/* on a short phone screen the painting gives up a little height, so the first screen still says when the
   hub opens and how to hear, a phone on its side included (qag-35quo) */
@media (max-width: 900px) and (max-height: 700px) { .join__art { width: min(82%, 24rem, 38svh); } }
/* on its side, the heading is sized to the screen's height and the painting sits beside the words, as on
   a wide screen */
@media (orientation: landscape) and (max-height: 500px) {
  .join { padding-top: 5.5rem; }
  .join .letter__text h1 { max-width: none; font-size: clamp(2.2rem, 12svh, 3.4rem); }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 900px) {
  .join .letter__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.45fr); }
  .join__art { order: 0; width: auto; margin: 0.4rem 0 0; }
}
/* on a wide screen the gate stays in view beside the list as it's read */
@media (min-width: 901px) {
  .join .letter__side { align-self: stretch; }
  .join__art { position: sticky; top: 7rem; }
}
.join__plans { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.join__me { display: grid; gap: 0.7rem; }
.join__me > p:first-child { font-weight: 650; }
.join__me-go { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* Steve's programs, to keep (shop.html): what's in one, how buying works, a buyer's orders, and a packet
   for each program with its ways to buy, from api/shop */
.shop__head { margin-top: clamp(2rem, 4vw, 2.6rem); font-size: var(--step-1); font-weight: 620; }
.shop__ways { margin-top: 1.1rem; gap: 1.05rem; }
.shop__title { font-size: var(--step-2); }
.shop__back { display: grid; justify-items: start; gap: 0.7rem; max-width: 34rem; margin-top: clamp(1.6rem, 3vw, 2.2rem); padding: clamp(1.2rem, 3vw, 1.7rem); }
.shop__back > p:first-of-type { font-weight: 650; }
.shop__how { display: grid; gap: 0.8rem; padding: clamp(1.4rem, 3vw, 2rem); rotate: 0.5deg; }
.shop__steps { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.55rem; }
.shop__small { font-size: 0.88rem; color: var(--ink-2); }
.shop__orders { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.9rem; max-width: 34rem; }
.shop__order { display: grid; justify-items: start; gap: 0.35rem; padding: 0.8rem 1rem; border-left: 3px solid var(--wattle); background: var(--card); border-radius: 0 var(--radius) var(--radius) 0; }
.shop__order-head { font-weight: 700; }
.shop__each { max-width: 45rem; margin-inline: auto; }
.shop__buy { display: grid; justify-items: center; gap: 0.45rem; margin: 0 0 0.9rem; text-align: center; }
.shop__buy:empty { display: none; }
.shop__buy .btn { width: 100%; justify-content: center; }
.shop__buy .shop__small { font-size: 0.78rem; line-height: 1.3; }
.shop__note { max-width: 34rem; margin: 1.4rem auto 0; text-align: center; }
@media (min-width: 901px) {
  .shop .letter__side { align-self: start; position: sticky; top: 7rem; }
}