/* Learning hub (members). */

/* Drawing kit: page-only sizes on top of the shared kit ------------------- */
.tile__sym--sm { font-size: 18px; }

/* Signed-in header ----------------------------------------------------------- */
.member { display: flex; align-items: center; gap: 0.6rem; }
.member__avatar {
  width: 2.3rem; height: 2.3rem; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: var(--sap-2); border: 2px solid var(--ink); font-family: var(--f-display); font-weight: 650; font-size: 1.1rem;
}
.member__who { display: grid; line-height: 1.15; }
.member__name { font-weight: 750; font-size: 0.95rem; }
.member__tag { font-size: 0.64rem; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.member .btn { margin: 0; }
/* the avatar and name are the way to Your details (account.html), marked as the hub's menu
   marks its page, not with the main menu's underline */
.nav a.member__me {
  display: flex; align-items: center; gap: 0.6rem; margin-block: -0.25rem; padding: 0.25rem 0.75rem 0.25rem 0.25rem;
  border: 1.5px solid transparent; border-radius: 999px; background: none; color: inherit; text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.nav a.member__me:hover { background: var(--paper-2); }
.nav a.member__me[aria-current] { background: var(--card); border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
@media (max-width: 1260px) {
  .member { border-top: 1px solid var(--rule); padding: 1rem 0 0; margin-top: 0.4rem; }
  .member .btn { margin-left: auto; }
}
/* The hub's menu (tools/chrome.py): on a wider screen, only who's signed in, since the strip under the
   header has the hub's pages; on a phone, its pages, each with the strip's mark, then who's signed in */
.nav a.nav__hub { display: none; }
@media (max-width: 1260px) {
  .nav a.nav__hub { display: flex; align-items: center; gap: 0.75rem; font-size: 1.4rem; padding-block: 0.5rem; }
  .nav a.nav__hub svg { width: 1.3rem; height: 1.3rem; color: var(--ink-3); }
  .nav a.nav__hub[aria-current] svg { color: var(--ink); }
  .nav a.nav__hub[aria-current] span { background: linear-gradient(var(--wattle), var(--wattle)) no-repeat 0 100% / 100% 3px; }
  /* a tab's own pages, under it, lined up with its name */
  .nav a.nav__hub--sub { font-size: 1.1rem; padding: 0.15rem 0 0.15rem 2.05rem; }
  .nav a.nav__hub:has(+ .nav__hub--sub) { border-bottom-color: transparent; }
}

.hub { --hub-h2: clamp(2.1rem, 1.5rem + 2.4vw, 3.5rem); }
.hub .section { padding-block: clamp(3.5rem, 2.4rem + 4.5vw, 6.5rem); }

/* A new member's first fortnight (pages/week.js): four things, ticking off as they go ------------ */
.first { margin-top: clamp(1.4rem, 3vw, 2rem); padding: clamp(1.2rem, 3vw, 1.9rem); border: 2px solid var(--ink); }
.first__kick { margin: 0; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--earth); }
.first__kick svg { width: 1rem; height: 1rem; margin-right: 0.35rem; vertical-align: -0.15em; }
.first__head h2 { margin-top: 0.35rem; font-size: clamp(1.7rem, 1.35rem + 1.3vw, 2.3rem); }
.first__lede { margin: 0.45rem 0 0; color: var(--ink-2); max-width: 36rem; }
.first__steps { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.first__step { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: 0.9rem; padding-block: 1rem; border-top: 1px solid var(--rule); }
.first__tick {
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%;
  background: var(--card); font-family: var(--f-display); font-weight: 650; font-size: 1.05rem;
}
.first__tick svg { width: 1.1rem; height: 1.1rem; }
.first__step.is-next .first__tick { background: var(--wattle); }
.first__step.is-done .first__tick { background: var(--canopy); border-color: var(--canopy); color: #fbf3e1; }
.first__body { min-width: 0; }
.first__body h3 { font-size: 1.2rem; }
.first__body p { margin: 0.25rem 0 0; color: var(--ink-2); max-width: 38rem; }
.first__step.is-done .first__body p { color: var(--canopy-2); font-weight: 650; }
.first__go { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem; margin-top: 0.75rem; }
.first__form { display: grid; gap: 0.9rem; margin-top: 0.85rem; }
.first__away { margin: 0.6rem 0 0; }
/* a farm audit on this phone, to bring in (audit-in.js) */
.first__audit { margin-top: 0.85rem; padding: 0.9rem 1rem; border: 1.5px dashed var(--canopy); border-radius: 0.7rem; background: rgba(63, 125, 58, 0.06); }
.first__steps + .first__audit { margin-top: 0.4rem; }
.first__audit p { margin: 0; color: var(--ink); }
.first__audit .first__month { margin-top: 0.45rem; font-size: 0.92rem; font-weight: 650; color: var(--canopy-2); }
.first__month svg { width: 1rem; height: 1rem; margin-right: 0.35rem; vertical-align: -0.15em; }
.first__or { margin: 0.9rem 0 0; font-weight: 700; font-size: 0.92rem; color: var(--ink-2); }

/* Welcome back ------------------------------------------------------------- */
.hub-hero { position: relative; padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem); overflow: hidden; }
.hub-hero__wash { position: absolute; left: 0; top: 0; pointer-events: none; }
.hub-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.hub-hero h1 { margin-top: 0.8rem; font-size: min(var(--step-5), 5.4rem); }
.hub-hero .lede { margin-top: 1rem; max-width: 34rem; }
.hub-hero__new { margin-top: 1rem; max-width: 34rem; color: var(--ink-2); }
.hub-hero__new strong { color: var(--ink); }

.resume { margin-top: 2rem; padding: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
.resume__poster { position: relative; min-height: 13rem; background: linear-gradient(#fbe6a8, #f8ecd0 70%, #f6efe0); border-right: 1px solid var(--rule); }
.resume__art { position: absolute; inset: 0; width: 100%; height: 100%; }
/* episode 3's poster: the bean's first leaves lit from behind, the engine at work (hub/engine-leaf) */
.resume__poster--plate { overflow: hidden; background: #efe2bf; }
.resume__plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.resume__play {
  position: absolute; left: 50%; top: 46%; translate: -50% -50%; width: 3.8rem; height: 3.8rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--wattle); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink);
}
.resume__play svg { width: 1.7rem; height: 1.7rem; margin-left: 0.2rem; }
.resume__left { position: absolute; left: 0.6rem; top: 0.6rem; padding: 0.2rem 0.5rem; border-radius: 4px; background: rgba(30, 43, 34, 0.86); color: var(--paper); font-size: 0.78rem; font-weight: 750; }
.resume__body { display: grid; gap: 0.55rem; align-content: center; padding: 1.3rem 1.4rem 1.4rem; }
.resume__kicker { font-size: 0.72rem; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; color: var(--earth); }
.resume__title { font-size: var(--step-2); }
.resume__title span { display: block; margin-bottom: 0.15rem; font-family: var(--f-hand); font-weight: 600; font-size: 1.35rem; letter-spacing: 0; color: var(--earth); }
.resume__seg { font-size: 0.95rem; color: var(--ink-2); }
.resume__seg span { white-space: nowrap; }
.resume .btn { justify-self: start; margin-top: 0.35rem; }
/* a new member's first episode: the seed in its clump of soil, where the course starts */
.resume__poster--seed { overflow: hidden; background: linear-gradient(#f8efd9, #f6efe0 80%); }
.resume__seed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 74%; mix-blend-mode: multiply; }

.segments { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.segments i { height: 9px; border-radius: 3px; background: linear-gradient(90deg, var(--leaf) calc(var(--p, 0) * 100%), rgba(30, 43, 34, 0.1) 0); box-shadow: inset 0 0 0 1px rgba(30, 43, 34, 0.35); }
.segments i.is-done { --p: 1; }

/* a least height, not a set one: with a reader's own text spacing the card grows to its words, rather than
   clipping its note */
.specimen-card { min-height: clamp(28rem, 66vh, 38rem); rotate: 1deg; }
.specimen-card__name { letter-spacing: 0.02em; font-size: 0.85rem; }
.specimen-card__name i { font-size: 0.98rem; }
.specimen-card__stage span { color: var(--earth); margin-right: 0.2rem; }
.specimen-card__note { font-size: 1.4rem; }
.specimen-card__go { margin-top: 0.4rem; }

@media (max-width: 1100px) {
  .hub-hero__grid { grid-template-columns: 1fr; gap: 2rem; }
  .specimen-card {
    min-height: clamp(16rem, 36svh, 20rem); rotate: 0.5deg; padding: 0.8rem 0.9rem; column-gap: 0.9rem;
    grid-template-areas: "plant head" "plant foot"; grid-template-columns: minmax(8.5rem, 42%) 1fr; grid-template-rows: auto 1fr;
  }
  .specimen-card__head { flex-direction: column; gap: 0.15rem; font-size: 0.64rem; }
  .specimen-card__foot { align-content: start; border-top: 0; padding-top: 0.3rem; }
  .specimen-card__note { font-size: 1.2rem; }
  /* the Course's coming-soon card, while it's held, waits small after the farm's week, so the week comes
     first (pages/learn.js courseLater): never in the welcome, even before the script has run */
  .specimen-card[data-no-course] { min-height: 11rem; grid-template-columns: minmax(6.5rem, 30%) 1fr; }
  .hub-hero .specimen-card[data-no-course] { display: none; }
  html:not([data-course]) .hub-hero { padding-bottom: 0.5rem; }
  .hub-later { padding-block: 0 clamp(3rem, 6vw, 5rem); }
  .week[hidden] + .hub-later { padding-top: 2rem; }
}
.hub-later:empty { display: none; }
@media (max-width: 600px) {
  .resume { grid-template-columns: 1fr; }
  .resume__poster { min-height: 0; aspect-ratio: 16 / 10; border-right: 0; border-bottom: 1px solid var(--rule); }
  .specimen-card { grid-template-columns: 42% 1fr; }
  .specimen-card__stage { font-size: 1.05rem; }
  .strip--lg.specimen-card__strip i { width: 0.95rem; height: 0.95rem; }
}

/* What a later build kept on this phone, left as it was (crop-now.js plansLeft, walk.js leftWords) */
.later-kept { margin: 0 0 1rem; padding: 0.75rem 0.9rem; border-radius: 10px; background: var(--paper-2); font-weight: 600; max-width: 48rem; }
[data-walk] > .later-kept { margin: 0; max-width: none; }

/* A look around: a visitor touring the hub (site.js, data-tour) --------------------- */
.tour { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.4rem; padding: 0.8rem var(--gutter); background: #fbf2d6; border-bottom: 1px solid var(--rule); }
.tour p { margin: 0; max-width: 48rem; }
.tour__go { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* The hub's own menu: one page per item ----------------------------------------- */
/* Sits right under the fixed header on every hub page, and sticks there. */
.hub-nav {
  position: sticky; top: var(--head-h, 3.6rem); z-index: 40; margin-top: var(--head-h, 3.6rem);
  background: rgba(246, 239, 224, 0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-block: 1px solid var(--rule);
}
/* A phone on its side hasn't the height for both: the tab bar goes up with the page, the header stays */
@media (max-height: 500px) { .hub-nav { position: relative; top: auto; } }
/* When the tabs don't fit they scroll, and snap with a whole tab at the left, the one before peeking in under
   the fade. learn.js marks the ends with more (data-more) and only those fade, wide enough to say so; it pads
   the end (--end-pad) so the last resting place starts on a whole tab too (qag-2hkow: 'lder' and a lone 'C'
   rested cut at 360 px). Where the tabs fit, nothing fades. */
.hub-nav__inner {
  position: relative; display: flex; gap: 0.35rem; padding-block: 0.5rem; padding-inline-end: var(--end-pad, 0px);
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-inline-start: 1.5rem;
}
.hub-nav__inner::-webkit-scrollbar { display: none; }
/* On a phone the tabs sit closer, so the next tab always peeks in at the edge: at 360 px the old fade hid
   Crop and nothing said the strip scrolls to Wiki, Ask Steve and QuorumAI. Its short fades hold until
   learn.js has measured the strip. */
@media (max-width: 760px) {
  .hub-nav__inner { -webkit-mask-image: linear-gradient(90deg, transparent, #000 0.5rem, #000 calc(100% - 1.4rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 0.5rem, #000 calc(100% - 1.4rem), transparent); padding-inline: 0.4rem calc(1.4rem + var(--end-pad, 0px)); }
}
/* They sit closer on a small tablet too, where all six then fit: spaced as on a desktop they'd overflow
   from 761 to 833 px. */
@media (max-width: 840px) { .hub-nav__inner { gap: 0.2rem; } }
.hub-nav__inner[data-more] { --fade-start: 0rem; --fade-end: 0rem; -webkit-mask-image: none; mask-image: none; }
.hub-nav__inner[data-more~="start"] { --fade-start: 1.5rem; }
.hub-nav__inner[data-more~="end"] { --fade-end: 2rem; }
.hub-nav__inner:is([data-more~="start"], [data-more~="end"]) {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
}
.hub-nav a {
  flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.9rem; border-radius: 999px;
  border: 1.5px solid transparent; font-weight: 700; font-size: 0.92rem; text-decoration: none; color: var(--ink-2);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.hub-nav a svg { width: 1.15rem; height: 1.15rem; }
@media (max-width: 840px) { .hub-nav a { padding-inline: 0.6rem; gap: 0.3rem; } }
.hub-nav a:hover { background: var(--paper-2); }
.hub-nav a[aria-current] { background: var(--card); border-color: var(--ink); color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
/* A tab's own pages (HUB_SUB in tools/chrome.py), in a quieter row under the strip on each of them:
   the Crop tab's walk, season and tests. It scrolls away with the page; the strip stays. */
.hub-sub { border-bottom: 1px solid var(--rule); background: rgba(246, 239, 224, 0.6); }
.hub-sub__inner { display: flex; gap: 0.2rem 1.6rem; overflow-x: auto; scrollbar-width: none; }
.hub-sub__inner::-webkit-scrollbar { display: none; }
.hub-sub a {
  flex: none; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.7rem 0.1rem 0.5rem;
  border-bottom: 3px solid transparent; font-weight: 700; font-size: 0.9rem; text-decoration: none; color: var(--ink-3);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.hub-sub a svg { width: 1.05rem; height: 1.05rem; }
.hub-sub a:hover { color: var(--ink); border-bottom-color: var(--paper-2); }
.hub-sub a[aria-current] { color: var(--ink); border-bottom-color: var(--wattle); }
/* Where the full names won't fit on a line, the shorter ones (the full name is the link's label); on a
   phone, the row wraps, so every one of the tab's pages shows, none hidden off the edge */
.hub-sub__short { display: none; }
@media (max-width: 900px) {
  .hub-sub__long { display: none; }
  .hub-sub__short { display: inline; }
}
@media (max-width: 640px) {
  .hub-sub__inner { flex-wrap: wrap; gap: 0 1.3rem; }
}

/* Section heads -------------------------------------------------------------- */
.hub-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.hub-head h2 { margin-top: 0.85rem; font-size: var(--hub-h2); }
.hub-head__aside { rotate: -3deg; text-align: right; }

/* Episodes: one bean plant at eight stages along a potting bench -------------------------------- */
.hub--bench { --sky: #ebf4fa; }
.bench { position: relative; background: var(--sky); }
.bench__text {
  position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1.5rem 3rem;
  padding-top: clamp(2.2rem, 6vh, 4.2rem);
}
.bench__intro h1 { margin-top: 0.85rem; font-size: clamp(2.5rem, min(5.2vw, 8.6vh), 5.4rem); }
.bench__intro .lede { margin-top: 1rem; max-width: 33rem; color: var(--ink); }
.bench__progress {
  width: min(19rem, 100%); margin-bottom: clamp(0.5rem, 3vw, 2.6rem); padding: 1rem 1.2rem 1.1rem; rotate: 1.2deg;
  background: rgba(251, 247, 238, 0.86); border: 1.5px solid rgba(30, 43, 34, 0.2); border-radius: 14px 11px 15px 10px;
  box-shadow: 0 10px 24px -18px rgba(30, 43, 34, 0.5);
}
.bench__kicker { font-size: 0.72rem; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; color: var(--earth); }
.bench__big { margin-top: 0.3rem; font-family: var(--f-display); font-size: var(--step-3); font-weight: 600; line-height: 1; }
.bench__big small { font-family: var(--f-body); font-size: 0.42em; font-weight: 650; color: var(--ink-3); }
.bench__progress .strip { margin-top: 0.7rem; }
.bench__next { margin-top: 0.6rem; font-size: 0.88rem; line-height: 1.4; color: var(--ink-2); }

/* the painting slides up under the title, its sky fading into the page's */
.bench__frame { position: relative; margin-top: clamp(-8rem, -8.5vw, -3rem); }
/* (the scene is the painting's own shape and its tags sit in the scene's percentages, so no overscan) */
.scene.bench__scene { --over: 1; }
.bench__scene {
  width: 100%; aspect-ratio: 3200 / 1358;
  -webkit-mask-image: linear-gradient(transparent, #000 22%); mask-image: linear-gradient(transparent, #000 22%);
}
.bench__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; }
/* nursery tags stuck in the soil, numbered for the episodes */
.pot-tags { list-style: none; margin: 0; padding: 0; }
.pot-tag {
  position: absolute; z-index: 1; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%);
  width: max(1.4rem, 1.7%); aspect-ratio: 24 / 40; translate: -50% -100%; rotate: var(--r); transform-origin: 50% 100%;
  display: grid; justify-items: center; align-content: start; padding-top: 0.34em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'%3E%3Cpath d='M3.5 1.2 H20.5 Q22.8 1.2 22.8 3.5 V25 L12 38.8 L1.2 25 V3.5 Q1.2 1.2 3.5 1.2 Z' fill='%23fdfaf2' stroke='%231e2b22' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  font-family: var(--f-display); font-weight: 650; font-size: max(0.78rem, 0.95vw); line-height: 1; color: var(--ink);
  filter: drop-shadow(1px 2px 1px rgba(60, 40, 20, 0.28));
}
.pot-tag.is-now {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40'%3E%3Cpath d='M3.5 1.2 H20.5 Q22.8 1.2 22.8 3.5 V25 L12 38.8 L1.2 25 V3.5 Q1.2 1.2 3.5 1.2 Z' fill='%23f7d26a' stroke='%231e2b22' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pot-tag.is-done::after, .pot-tag.is-new::after {
  content: ""; position: absolute; right: -30%; top: -12%; width: 62%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--ink);
}
.pot-tag.is-done::after {
  background: var(--sap) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5 L8.6 14 L15 6.5' fill='none' stroke='%231e2b22' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 84% no-repeat;
}
.pot-tag.is-new::after { width: 44%; right: -22%; top: -8%; background: var(--earth); }
.bench__notes { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bench__hand { font-family: var(--f-hand); font-weight: 600; font-size: 46px; fill: var(--ink); paint-order: stroke; stroke: rgba(246, 249, 250, 0.9); stroke-width: 9px; stroke-linejoin: round; }
.bench__ink { fill: none; stroke: var(--ink); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.bench__swipe { display: none; }

/* The library ---------------------------------------------------------------------------------- */
.library { background-color: var(--paper); }
.library h2 { margin-top: 0.85rem; font-size: var(--hub-h2); }
.eps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(0.9rem, 1.8vw, 1.3rem); }
.ep {
  position: relative; display: grid; grid-template-columns: clamp(8rem, 13vw, 11.5rem) minmax(0, 1fr) minmax(11.5rem, 14rem); overflow: hidden;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-paper);
  transition: translate 0.3s var(--ease-grow), box-shadow 0.3s ease;
}
.ep:hover { translate: 0 -3px; }
.ep.is-current { box-shadow: var(--shadow-paper), 0 0 0 2px var(--c); }
.ep:has(.ep__go:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.ep__plate {
  position: relative; min-height: 11rem; overflow: hidden; border-right: 1px solid var(--rule);
  background-color: #fcf9f1; background-size: 18px 18px;
  background-image: linear-gradient(rgba(91, 127, 160, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(91, 127, 160, 0.1) 1px, transparent 1px);
}
.ep__plate > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the bean at the episode's stage, standing on the foot of the plate (the empty paper above the
   early stages runs off the top, so the seed isn't lost at the bottom of the plate) */
.ep__plate > picture { position: absolute; left: 0.4rem; right: 0.4rem; bottom: 0.2rem; height: calc((100% - 0.7rem) / (1 - var(--lift, 0))); }
.ep__plant { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; mix-blend-mode: multiply; }
.ep__num {
  position: absolute; left: 0.7rem; top: 0.7rem; z-index: 2; width: 2.3rem; height: 2.3rem; display: grid; place-items: center;
  background: var(--c); color: var(--on, #fff8ea); border-radius: 6px; box-shadow: inset 0 0 0 2px rgba(30, 43, 34, 0.9); rotate: -4deg;
  font-family: var(--f-display); font-weight: 650; font-size: 0.95rem;
}
.ep__body { display: grid; gap: 0.35rem; align-content: start; padding: 1.15rem 1.4rem 1.3rem; }
.ep__stage { font-family: var(--f-hand); font-weight: 600; font-size: 1.35rem; line-height: 1; color: var(--earth); }
.ep__title { font-size: var(--step-2); font-weight: 620; line-height: 1.12; }
.ep__take { max-width: 42rem; font-size: 0.98rem; line-height: 1.45; color: var(--ink-2); }
.ep__take span { margin-right: 0.45rem; font-family: var(--f-hand); font-weight: 600; font-size: 1.28rem; line-height: 1; color: var(--earth); }
/* the four segments, each with how much of it you've watched */
.segs { list-style: none; margin: 0.55rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem 0.7rem; }
.segs li { position: relative; padding-top: 0.75rem; font-size: 0.8rem; font-weight: 650; line-height: 1.25; color: var(--ink-3); }
.segs li::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--leaf) calc(var(--p, 0) * 100%), rgba(30, 43, 34, 0.1) 0); box-shadow: inset 0 0 0 1px rgba(30, 43, 34, 0.3);
}
.segs li.is-done { --p: 1; color: var(--ink-2); }
.segs li.is-now { color: var(--ink); }
.ep__side { display: grid; align-content: space-between; justify-items: start; gap: 0.9rem; padding: 1.15rem 1.3rem 1.2rem; border-left: 1px dashed rgba(30, 43, 34, 0.2); }
.ep__status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; }
.ep__status .chip svg { width: 0.95rem; height: 0.95rem; }
.ep__len { font-size: 0.82rem; font-weight: 650; color: var(--ink-3); }
.ep__go { padding: 0.15rem 0; background: none; border: 0; font: inherit; font-weight: 750; color: var(--canopy); cursor: pointer; }
.ep__go::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.ep__go:focus-visible { outline: none; }
.ep:hover .ep__go { text-decoration: underline; text-decoration-color: var(--wattle); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.ep.is-coming { background: #f7f1e3; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 2px 6px -3px rgba(74, 46, 16, 0.2); }
.ep.is-coming .ep__plant { filter: grayscale(1); opacity: 0.4; }
.ep.is-coming .ep__plate > canvas { filter: grayscale(0.8); opacity: 0.45; }
/* the pad pales, as a later post does, and its number stays solid */
.ep.is-coming .ep__num { background: color-mix(in srgb, var(--c) 32%, #f7f1e3); color: var(--ink-2); box-shadow: inset 0 0 0 2px rgba(30, 43, 34, 0.45); }
.ep.is-coming .ep__title, .ep.is-coming .ep__take { color: var(--ink-3); }
.ep.is-coming .segs li { color: var(--ink-3); }

@media (max-width: 1000px) {
  .bench__text { grid-template-columns: 1fr; }
  .bench__progress { display: none; }
  .ep { grid-template-columns: clamp(7rem, 16vw, 9rem) minmax(0, 1fr); }
  .ep__plate { grid-row: 1 / span 2; }
  .ep__side { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-top: 0; border-left: 0; }
}
@media (max-width: 600px) {
  .bench__text { padding-top: 1.9rem; }
  .bench__frame { margin-top: -2rem; }
  /* on a phone the bench is a shelf you swipe along */
  .bench__shelf { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .bench__shelf::-webkit-scrollbar { display: none; }
  .bench__shelf:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
  .bench__scene { width: auto; height: clamp(18rem, 84vw, 22rem); }
  .pot-tag { width: 1.15rem; font-size: 0.78rem; }
  .bench__hand { font-size: 56px; }
  /* just below the words above it: the frame is pulled 2rem up under them */
  .bench__swipe { display: block; position: absolute; right: 1rem; top: 2.3rem; z-index: 3; font-size: 1.25rem; rotate: -3deg; color: var(--ink-2); }
  .bench__swipe::after { content: " →"; font-family: var(--f-body); }
  .ep { grid-template-columns: 5.6rem minmax(0, 1fr); }
  .ep__plate { min-height: 8rem; }
  .ep__num { left: 0.45rem; top: 0.45rem; width: 1.9rem; height: 1.9rem; font-size: 0.8rem; }
  .ep__body { padding: 0.9rem 0.95rem 0.8rem; }
  .ep__title { font-size: var(--step-1); }
  .ep__take { font-size: 0.92rem; }
  .segs { grid-template-columns: 1fr 1fr; }
  .ep__side { padding: 0 0.95rem 0.95rem; }
}

/* Hub openers: a painting across the top of a hub page, under the hub's own menu --------- */
.hub .opener { min-height: clamp(32rem, calc(100svh - var(--hub-top, 7.4rem)), 56rem); }
.hub .opener__content { padding-block: clamp(2.4rem, 6.5vh, 4.8rem) clamp(4.2rem, 10vh, 6.4rem); }
.hub .opener__content h1 { font-size: clamp(2.5rem, min(5.2vw, 8.6vh), 5.4rem); }
/* things placed on the painting itself, in the painting's own coordinates (--mx, --my) */
.plate-pin {
  --pw: max(100cqw * var(--over, 1), 100cqh * var(--ar)); --ph: calc(var(--pw) / var(--ar));
  position: absolute; translate: -50% -50%;
  left: calc((100cqw - var(--pw)) * var(--fx) + var(--pw) * var(--mx));
  top: calc((100cqh - var(--ph)) * var(--fy) + var(--ph) * var(--my));
}

/* Live Q&A: a Thursday night on the farm ---------------------------------------------------- */
.opener--night { background: #0e174b; color: #f4ecd8; }
.opener--night .opener__scene { background-color: #0e174b; container-type: size; --ar: 2.357; }
.opener--night .opener__scene::after { opacity: 0.18; }
.opener--night .eyebrow { color: #cdd7f3; }
.opener--night .opener__content .eyebrow, .opener--night .opener__content .lede { text-shadow: 0 0 18px rgba(9, 15, 52, 0.95), 0 0 4px rgba(9, 15, 52, 0.85); }
.opener--night h1 { color: #fbf3e1; max-width: 12ch; text-shadow: 0 0 30px rgba(9, 15, 52, 0.7); }
.opener--night h1 em { color: var(--wattle); }
.opener--night .lede { color: #e4e7f1; max-width: 31rem; }
.opener--night .session { margin-top: clamp(1.4rem, 4vh, 2.4rem); max-width: 35rem; }

/* the moon hangs in the painted sky; a star falls now and then while the scene is alive */
.night__moon {
  --mx: 0.535; --my: 0.11; z-index: 2; width: clamp(34px, calc(var(--pw) * 0.028), 68px);
  fill: #f7e7b0; filter: drop-shadow(0 0 12px rgba(247, 231, 176, 0.6)) drop-shadow(0 0 42px rgba(247, 231, 176, 0.28));
}
.night__meteor {
  position: absolute; z-index: 2; left: 34%; top: 9%; width: clamp(70px, 10vw, 170px); height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 246, 220, 0), rgba(255, 248, 228, 0.95));
  rotate: 14deg; opacity: 0; pointer-events: none; animation: meteor 17s linear 6s infinite paused;
}
.night.is-gl .night__meteor { animation-play-state: running; }
.night.is-away .night__meteor, .night:has(.scene__pause.is-paused) .night__meteor { animation-play-state: paused; }
@keyframes meteor {
  0%, 94% { opacity: 0; transform: translateX(0) scaleX(0.2); }
  94.6% { opacity: 1; transform: translateX(0) scaleX(1); }
  97.4% { opacity: 0.85; transform: translateX(min(24vw, 360px)) scaleX(1); }
  98.6%, 100% { opacity: 0; transform: translateX(min(30vw, 440px)) scaleX(0.3); }
}
.no-motion .night__meteor { display: none; }

.session { margin-top: 2.2rem; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.3rem; align-items: center; color: var(--ink); rotate: -0.6deg; }
.calpage {
  position: relative; width: 6.6rem; display: grid; justify-items: center; padding-bottom: 0.55rem; overflow: hidden;
  background: #fffdf8; border: 2px solid var(--ink); border-radius: 10px; box-shadow: 3px 3px 0 var(--ink); rotate: -3deg;
}
.calpage::before, .calpage::after { content: ""; position: absolute; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: #fffdf8; box-shadow: inset 0 0 0 2px var(--ink); }
.calpage::before { left: 22%; }
.calpage::after { right: 22%; }
.calpage__month { width: 100%; padding: 0.95rem 0 0.35rem; text-align: center; background: var(--earth); color: #fff4e4; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; }
.calpage__day { margin-top: 0.3rem; font-family: var(--f-display); font-weight: 620; font-size: 2.9rem; line-height: 1; }
.calpage__dow { font-size: 0.68rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.session__kicker { font-size: 0.74rem; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; color: var(--earth); }
.session__title { margin-top: 0.25rem; font-size: var(--step-2); }
.session__topic { margin-top: 0.45rem; color: var(--ink-2); }
.session .cluster { --gap: 0.55rem; margin-top: 0.9rem; }

/* Below the painting: how it runs, the question form, the recordings */
.live { background-color: #172241; background-image: linear-gradient(#1a2748, #16203c 45%, #121a33); color: #ece6d4; }
.live__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.live .eyebrow { color: #bcc8e6; }
.live h2 { margin-top: 0.85rem; font-size: var(--hub-h2); color: #fbf3e1; }
.live h2 em { color: var(--wattle); }
.live .lede { margin-top: 1.1rem; color: #d5dbe8; }

.how { list-style: none; margin: clamp(1.4rem, 3vw, 2rem) 0 0; padding: 0; display: grid; gap: 1.2rem; counter-reset: how; }
.how__step { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 0.9rem; align-items: start; }
.how__no {
  width: 2.8rem; height: 2.8rem; display: grid; place-items: center; border-radius: 50%; rotate: -6deg;
  border: 2px solid rgba(247, 210, 106, 0.8); color: var(--wattle-2); font-family: var(--f-hand); font-weight: 700; font-size: 1.7rem; line-height: 1;
}
.how__step h3 { font-size: var(--step-1); color: #fbf3e1; }
.how__step p { margin-top: 0.2rem; color: #c9d1e2; font-size: 0.98rem; }

.queue { margin-top: clamp(1.8rem, 4vw, 2.6rem); padding: 1.1rem 1.2rem 1rem; border: 1.5px dashed rgba(236, 230, 212, 0.28); border-radius: 14px 11px 15px 10px; }
.queue__title { font-family: var(--f-hand); font-weight: 600; font-size: 1.55rem; line-height: 1; color: var(--wattle-2); }
.queue__list { list-style: none; margin: 0.7rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.queue__list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem; color: #e8e4d6; font-size: 0.95rem; }
.queue__list .chip { font-size: 0.78rem; padding-block: 0.1rem; }
/* a member's own: each question as they sent it, and where it's up to */
.queue__q { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; white-space: pre-line; }
.queue__when { flex-basis: 100%; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 650; color: #a9b5cf; }
.queue__when svg { width: 0.95rem; height: 0.95rem; color: var(--sap); }
.queue--yours .queue__list { gap: 0.9rem; }
.queue__list li.is-answered .queue__q { color: #c3c9d6; }
.queue--yours .queue__list:empty { display: none; }
.queue__none { margin-top: 0.6rem; color: #c9d1e2; font-size: 0.95rem; }
/* where they're live, what's said about a member's questions waits until they're in */
html[data-live] .queue--yours:not(.is-loaded) .queue__none { visibility: hidden; }

.live__side { display: grid; gap: 1.6rem; }
.ask-steve { display: grid; gap: 0.9rem; color: var(--ink); rotate: 0.5deg; }
.ask-steve h3 { font-size: var(--step-2); }
.ask-steve__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: end; }
.ask-steve .btn { justify-self: start; }
.ask-steve__promise { margin: 0; font-size: 0.95rem; line-height: 1.45; color: var(--ink); }
.check { display: flex; align-items: flex-start; gap: 0.55rem; padding-bottom: 0.6rem; font-size: 0.88rem; font-weight: 600; line-height: 1.35; }
.check input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0.1rem 0 0; accent-color: var(--canopy); }
select.input {
  appearance: none; padding-right: 2.4rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8 L10 13.2 L15 7.6' fill='none' stroke='%231e2b22' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 1.1rem;
}

.past { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(2rem, 4vw, 2.8rem); border-top: 1px solid rgba(236, 230, 212, 0.14); }
.past__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.4rem 1.5rem; }
.live .past__title { margin: 0; font-size: var(--step-3); }
.past__note { font-size: 0.78rem; color: #93a0bb; }
.past__list { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.9rem, 2vw, 1.4rem); }
.rec {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; gap: 0.35rem 0.8rem;
  padding: 1.1rem 1.2rem 1rem; border-radius: var(--radius); background: rgba(8, 14, 36, 0.4); border: 1px solid rgba(236, 230, 212, 0.14);
  transition: border-color 0.2s ease, translate 0.3s var(--ease-grow);
}
.rec:hover { border-color: rgba(247, 210, 106, 0.55); translate: 0 -3px; }
.rec__when { font-size: 0.8rem; font-weight: 650; color: #a9b5cf; }
.rec__what { grid-column: 1; font-family: var(--f-display); font-weight: 600; font-size: var(--step-1); line-height: 1.2; letter-spacing: 0; color: #f6f0df; }
.rec__tags { grid-column: 2; grid-row: 1 / 3; align-self: start; }
.rec__tags .el { width: 2.5rem; font-size: 1rem; color: var(--ink); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45); border-width: 1.5px; rotate: 4deg; }
.rec__tags .el small { font-size: 0.45rem; top: 0.18rem; left: 0.25rem; }
.rec__ico { width: 2rem; height: 2rem; color: var(--sap); }
.rec__go {
  grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; padding: 0.35rem 0.85rem;
  border: 1.5px solid rgba(236, 230, 212, 0.4); border-radius: 999px; background: none; color: #f3eedf; font: inherit; font-weight: 700; font-size: 0.85rem; cursor: pointer;
}
.rec__go svg { width: 0.9rem; height: 0.9rem; }
.rec__go::after { content: ""; position: absolute; inset: 0; }
.rec:hover .rec__go { border-color: var(--wattle); color: var(--wattle-2); }
.past__more { margin-top: 1.3rem; }
.past__none { margin-top: 1.3rem; max-width: 42rem; padding: 1.1rem 1.2rem; border: 1.5px dashed rgba(236, 230, 212, 0.22); border-radius: var(--radius); color: #c9d1e2; }
.past__more a { color: var(--wattle-2); }

@media (max-width: 900px) {
  .live__grid { grid-template-columns: 1fr; }
  .past__list { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  /* openers on phones: the title in open sky above, the painting settling below it */
  .hub .opener { display: flex; flex-direction: column; min-height: 0; }
  .hub .opener__content { order: 0; padding-block: 2.2rem 0; }
  .hub .opener__scene {
    position: relative; inset: auto; order: 1; height: clamp(19rem, 78vw, 27rem); margin-top: -2.2rem;
    -webkit-mask-image: linear-gradient(transparent, #000 26%); mask-image: linear-gradient(transparent, #000 26%);
  }
  .hub .opener__content .eyebrow, .hub .opener__content .lede { text-shadow: none; }
  .night__moon { --mx: 0.47; --my: 0.24; }
  .session { grid-template-columns: 1fr; }
  .ask-steve__row { grid-template-columns: 1fr; }
}

/* The wiki: a field notebook, then the index beside the page ------------------------------------- */
.wiki-open { position: relative; background: var(--paper); padding-block: clamp(2rem, 5vh, 3.6rem) clamp(2.4rem, 5vw, 4rem); overflow: hidden; }
.wiki-open__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.wiki-open h1 { margin-top: 0.85rem; max-width: 11ch; font-size: clamp(2.5rem, min(5.2vw, 8.6vh), 5.4rem); }
.wiki-open .lede { margin-top: 1rem; max-width: 31rem; }
.wiki-open__try { margin-top: 1.7rem; font-size: 1.5rem; rotate: -2deg; }
.wiki-open__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.55rem; }
.topic-chip {
  display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.95rem 0.4rem 0.45rem;
  background: var(--card); border: 1.5px solid var(--ink); border-radius: 999px; box-shadow: 0 2px 0 var(--ink);
  color: var(--ink); font: inherit; font-weight: 700; font-size: 0.95rem; cursor: pointer;
  transition: translate 0.2s var(--ease-grow), box-shadow 0.2s ease;
}
.topic-chip:hover { translate: 0 -2px; box-shadow: 0 4px 0 var(--ink); }
.topic-chip .el { width: 2.05rem; font-size: 0.86rem; border-width: 1.5px; box-shadow: 1.5px 1.5px 0 var(--ink); }
.topic-chip .el small { top: 0.12rem; left: 0.18rem; font-size: 0.38rem; }
.topic-chip > svg { width: 1.35rem; height: 1.35rem; margin-left: 0.35rem; color: var(--canopy-2); }
.topic-chip__new { padding: 0.08rem 0.45rem; border-radius: 999px; background: var(--earth); color: #fff4e4; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.wiki-open__count { margin-top: 1.1rem; font-size: 0.8rem; color: var(--ink-3); }
.wiki-open__art { margin: 0; }
.nb__hand { font-family: var(--f-hand); font-weight: 600; font-size: 12px; fill: #3b3428; }
.nb__hand--big { font-size: 18px; }
.nb__ink { stroke: #3b3428; stroke-width: 1.5; }
.nb__ink--thin { stroke-width: 1; }
.nb__dots circle { fill: #d9a93a; stroke: #3b3428; stroke-width: 0.5; }
.art__over .wiki-open__note { font-size: 13px; stroke-width: 3.5px; stroke: var(--paper); }

.wiki { background-color: var(--paper-2); }
.wiki__grid { display: grid; grid-template-columns: minmax(15rem, 0.32fr) minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start; }
/* the index scrolls with the page: it's always shorter than the page beside it, so a scroll of its own
   only got in the way (Adam, 6 October 2026) */
.wiki__index { position: relative; display: grid; gap: 0.7rem; padding: 1.1rem; rotate: -0.4deg; }
.wiki__search { position: relative; }
.wiki__search svg { position: absolute; left: 0.8rem; top: 50%; translate: 0 -50%; width: 1.2rem; height: 1.2rem; color: var(--ink-3); pointer-events: none; }
.wiki__search .input { padding-left: 2.5rem; }
.wiki__label { margin-top: 0.3rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.wiki__tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.wiki__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.topic { width: 100%; background: none; border: 1.5px solid transparent; border-radius: 10px; color: var(--ink); text-align: left; cursor: pointer; transition: background-color 0.2s ease; }
.topic:hover { background: var(--paper-2); }
.topic.is-found { background: rgba(247, 210, 106, 0.5); border-color: var(--ink); }
.topic[aria-current] { background: var(--card); border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
/* the tile gives an element's name its whole width. Where that's still too narrow (the index beside a page,
   1024 to 1180 wide, or a reader's own letter spacing), the name breaks at its soft hyphen (Potas-sium), and
   stays centred under the tile */
.topic--el { display: grid; justify-items: center; gap: 0.3rem; padding: 0.5rem 0 0.45rem; font-size: 0.78rem; font-weight: 700; text-align: center; }
.topic--el .el { width: 2.7rem; font-size: 1.1rem; border-width: 1.5px; box-shadow: 2px 2px 0 var(--ink); }
.topic--el .el small { top: 0.18rem; left: 0.25rem; font-size: 0.48rem; }
.wiki__list .topic { padding: 0.45rem 0.65rem; font-weight: 650; font-size: 0.92rem; }
/* on a touch screen each is 44 px high, the size for a thumb (components.css, "On a touch screen") */
@media (pointer: coarse) { .wiki__list .topic { display: inline-flex; align-items: center; min-height: 44px; } }
/* the ideas and the crops in groups, each a dropdown: shut on the front page, its own open on a page
   (Adam, 1 Nov 2026, qag-2eguu) */
.wiki__groups { display: grid; gap: 0.15rem; }
.wiki__group > summary {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.65rem; border: 1.5px solid transparent; border-radius: 10px;
  font-weight: 700; font-size: 0.95rem; cursor: pointer; list-style: none; transition: background-color 0.2s ease;
}
.wiki__group > summary::-webkit-details-marker { display: none; }
.wiki__group > summary:hover { background: var(--paper-2); }
.wiki__group > summary small { margin-left: auto; font-size: 0.8rem; font-weight: 600; color: var(--ink-3); }
.wiki__group > summary::after {
  content: ''; flex: none; width: 0.5rem; height: 0.5rem; margin: 0 0.2rem 0.2rem 0.1rem;
  border: solid var(--ink-2); border-width: 0 2px 2px 0; rotate: 45deg; transition: rotate 0.2s ease;
}
.wiki__group[open] > summary::after { rotate: 225deg; margin-bottom: -0.2rem; }
.wiki__group > .wiki__list { margin: 0.1rem 0 0.5rem 0.65rem; padding-left: 0.4rem; border-left: 2px solid var(--rule); }
@media (pointer: coarse) { .wiki__group > summary { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .wiki__group > summary::after { transition: none; } }
/* beside the front page's painting there's room for the minerals four across */
.wiki__index--front .wiki__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wiki__none { font-family: var(--f-hand); font-weight: 600; font-size: 1.25rem; line-height: 1.1; color: var(--earth); }
.wiki__none a { color: var(--canopy); text-decoration: underline; text-decoration-color: var(--wattle); text-decoration-thickness: 2px; text-underline-offset: 3px; }

.wiki__article { padding: clamp(1.4rem, 3.5vw, 2.8rem); }
.article__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.2rem; align-items: start; }
.article__el { width: 4.6rem; font-size: 1.9rem; }
.article__kicker { font-size: 0.72rem; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; color: var(--earth); }
.article__title { margin-top: 0.15rem; font-size: var(--step-4); }
.article__chips { --gap: 0.4rem; margin-top: 0.7rem; }
.article__short { position: relative; margin-top: 1.7rem; padding: 1.1rem 1.3rem 1.2rem; background: #fdf3d3; border: 1.5px solid rgba(30, 43, 34, 0.2); border-radius: 12px 10px 14px 9px; }
.article__short-label { margin-bottom: 0.35rem; font-family: var(--f-hand); font-weight: 600; font-size: 1.45rem; line-height: 1; color: var(--earth); }
.article__short p + p { margin-top: 0; font-size: var(--step-1); line-height: 1.45; }
.article__body { max-width: 44rem; margin-top: 1.2rem; }
/* On a wide screen the wiki takes more of it (Adam, 24 Oct 2026: "the wiki needs to occupy a little bit more
   space"; at 100% the notes on the drawings read too small). The index keeps a set width, the page's words
   keep their 44rem line, centred in the page, and its drawings take the page's whole width, so the notes on
   them grow with them. Mulder's chart lays itself out (mulder.css). Below 1180 px nothing changes. */
@media (min-width: 1180px) {
  .hub--wiki :is(.page-open, .wiki) > .wrap { width: min(100% - 2 * var(--gutter), 92rem); }
  .wiki__grid { grid-template-columns: 17.5rem minmax(0, 1fr); }
  .wiki__article .article__body:not(:has([data-mulder])) { max-width: none; }
  .wiki__article .article__body:not(:has([data-mulder])) > :not(.plates) { max-width: 44rem; margin-inline: auto; }
  .wiki__article .article__body:not(:has([data-mulder])) .plates__foot { max-width: 52rem; margin-inline: auto; }
}
.article__body h2, .article__body h3 { margin: 2rem 0 0.6rem; font-size: var(--step-2); }
/* a heading's address (#in-the-tank) lands it below the sticky header and tabs, not under them */
.article__body h2[id] { scroll-margin-top: 8.5rem; }
.article__body p { color: var(--ink-2); }
.article__list { display: grid; gap: 0.45rem; margin: 0.4rem 0 0; padding-left: 1.2rem; color: var(--ink-2); }
.article__list li::marker { color: var(--earth); }
/* a paragraph after a list is spaced as one after a paragraph */
.article__list + p { margin-top: 1em; }
/* and one after a pull quote is given room, as the quote is above it */
.article__body .pull + p { margin-top: 1.6rem; }
.diagram { margin: 1.6rem 0 1.4rem; }
.diagram figcaption { margin-top: 0.4rem; font-size: 0.88rem; color: var(--ink-3); }
/* Your own sums, on the Recoveries page (sums.js): the drawing's sum with the grower's numbers, on a
   sheet of graph paper laid in the article */
.sums {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; margin: 1.8rem 0 1.4rem; padding: clamp(1rem, 2.6vw, 1.6rem);
  border: 2px solid var(--ink); border-radius: 14px 11px 15px 10px; 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;
}
.article__body .sums h2 { margin: 0; }
.sums > p { margin: 0; }
.sums__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: 0.8rem 1rem; }
.sums__field { display: grid; gap: 0.3rem; align-content: end; min-width: 0; font-weight: 700; font-size: 0.9rem; color: var(--ink); }
.sums__field small { font-weight: 500; color: var(--ink-3); }
.sums__in {
  display: flex; align-items: center; gap: 0.4rem; min-height: 2.9rem; padding: 0 0.75rem;
  border: 2px solid rgba(30, 43, 34, 0.7); border-radius: 11px 9px 12px 8px; background: #fffdf8;
}
.sums__in:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px var(--focus); }
.sums__in input {
  flex: 1 1 auto; width: 100%; min-width: 0; padding: 0.55rem 0; border: 0; background: none;
  font: inherit; font-weight: 650; font-size: 1.05rem; color: var(--ink); font-variant-numeric: tabular-nums;
}
.sums__in input:focus { outline: none; }
.sums__in i { flex: none; font-style: normal; font-weight: 700; color: var(--ink-3); }
.sums__if { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; padding-top: 0.2rem; font-weight: 700; }
.sums__if input { flex: 1 1 11rem; min-width: 0; min-height: 2.75rem; accent-color: var(--canopy-2); }
.sums__if output { min-width: 3.6rem; font: 650 var(--step-1)/1 var(--f-display); color: var(--canopy); font-variant-numeric: tabular-nums; }
.sums__eg { font: 600 1.35rem/1.1 var(--f-hand); color: var(--earth); rotate: -1deg; justify-self: start; }
.sums__out { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.65rem; }
.article__body .sums__out p { margin: 0; }
.sums__out strong { color: var(--ink); }
.sums__fig { margin: 0.2rem 0 0; justify-self: center; width: min(100%, 24rem); }
.sums__art { display: block; width: 100%; height: auto; }
.sums__fig figcaption { margin-top: 0.3rem; font-size: 0.84rem; color: var(--ink-3); text-align: center; }
/* drawn smaller on a phone, so its words are drawn bigger */
@media (max-width: 560px) {
  .sums__art .art__hand { font-size: 23px; }
  .sums__art .dg__bar-label { font-size: 17px; }
}
.sums__note { font-size: 0.88rem; color: var(--ink-3); }
.article__body .sums__ask { font-weight: 700; color: var(--ink); }
.sums__next { margin-top: 0.2rem; }

.article__foot { display: grid; justify-items: start; gap: 0.8rem; margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px dashed rgba(30, 43, 34, 0.3); }
.article__label { font-family: var(--f-hand); font-weight: 600; font-size: 1.35rem; line-height: 1; color: var(--earth); }
.article__foot .chip svg { width: 1rem; height: 1rem; }
button.chip { font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; }
a.chip:hover, button.chip:hover { border-color: var(--ink); }
/* a wiki page's Print button, beside its reading time: a thing to do among labels, so it's drawn open */
.chip--print { background: none; border: 1.5px solid rgba(30, 43, 34, 0.34); color: var(--ink); }
.chip--print svg { width: 1rem; height: 1rem; color: var(--canopy); }
/* and the line its printout is headed with, where it came from (learn.js fills in the address and the day) */
.page-open__printed { display: none; }

/* The wiki's front: its newest page, painted, beside the whole index */
.wiki-front { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start; margin-top: clamp(2rem, 4vw, 3rem); }
.wiki-feature {
  display: grid; gap: 0.35rem; align-content: start; padding: 0.8rem 0.8rem 1.5rem; color: inherit; text-decoration: none; rotate: 0.5deg;
  transition: translate 0.3s var(--ease-grow), box-shadow 0.3s ease;
}
.wiki-feature:hover { translate: 0 -4px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 28px 48px -28px rgba(74, 46, 16, 0.55), 0 2px 6px -2px rgba(74, 46, 16, 0.18); }
.wiki-feature__art { display: block; margin-bottom: 0.7rem; }
.wiki-feature__art img, .page-open__art .art--painted img { mix-blend-mode: multiply; }
.wiki-feature__kick, .wiki-feature__title, .wiki-feature__desc, .wiki-feature__meta { padding-inline: 0.7rem; }
.wiki-feature__kick { display: flex; align-items: center; gap: 0.55rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--earth); }
.wiki-feature__title { margin-top: 0.1rem; font-family: var(--f-display); font-size: var(--step-4); font-weight: 600; line-height: 1; }
.wiki-feature__desc { max-width: 30rem; font-size: var(--step-1); line-height: 1.45; color: var(--ink-2); }
.wiki-feature__meta { margin-top: 0.3rem; font-size: 0.8rem; color: var(--ink-3); }
.wiki-feature:hover .wiki-feature__title { text-decoration: underline; text-decoration-color: var(--wattle); text-decoration-thickness: 3px; }
/* an idea's mark, where a mineral has its element tile */
.wiki-ico {
  display: inline-grid; place-items: center; width: 2.3rem; aspect-ratio: 1;
  background: var(--sap-2); border: 1.5px solid var(--ink); border-radius: 8px 6px 9px 7px; box-shadow: 1.5px 1.5px 0 var(--ink);
}
.wiki-ico svg { width: 1.3rem; height: 1.3rem; color: var(--canopy); }
.topic-chip .wiki-ico { width: 2.05rem; }
.topic-chip .wiki-ico svg { width: 1.15rem; height: 1.15rem; }

/* The whole wiki, shelf by shelf, in the order Steve builds a program */
.wiki-shelves { background-color: var(--paper); }
.shelves { display: grid; gap: clamp(1.8rem, 4vw, 2.8rem); margin-top: clamp(1.8rem, 3.5vw, 2.6rem); }
.shelf {
  display: grid; grid-template-columns: minmax(11rem, 0.28fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0.5rem clamp(1.2rem, 3vw, 2.6rem);
  align-items: start; padding-top: 1.3rem; border-top: 1px dashed rgba(30, 43, 34, 0.3);
}
.shelf__title { display: flex; align-items: baseline; gap: 0.6rem; font-size: var(--step-2); text-wrap: balance; }
.shelf__n {
  flex: none; display: inline-grid; place-items: center; width: 1.8rem; aspect-ratio: 1; translate: 0 -0.12rem;
  background: var(--wattle); border: 1.5px solid var(--ink); border-radius: 50%; font: 800 0.9rem/1 var(--f-body);
}
.shelf__lede { font-family: var(--f-hand); font-weight: 600; font-size: 1.3rem; line-height: 1.1; color: var(--earth); }
.shelf__cards {
  grid-column: 2; grid-row: 1 / span 2; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: 0.9rem;
}
.wcard {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.35rem; align-content: start; height: 100%; padding: 1rem 1.1rem 1.15rem;
  background: var(--card); border: 1.5px solid rgba(30, 43, 34, 0.18); border-radius: 12px; color: inherit; text-decoration: none;
  transition: translate 0.25s var(--ease-grow), border-color 0.2s ease, box-shadow 0.25s ease;
}
.wcard:hover { translate: 0 -3px; border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.wcard__top { display: flex; align-items: center; gap: 0.65rem; }
.wcard__top .el { width: 2.3rem; font-size: 0.95rem; border-width: 1.5px; box-shadow: 1.5px 1.5px 0 var(--ink); }
.wcard__top .el small { top: 0.14rem; left: 0.2rem; font-size: 0.4rem; }
.wcard__kick { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.wcard__title { margin-top: 0.25rem; font-family: var(--f-display); font-size: var(--step-2); font-weight: 600; line-height: 1.05; }
.wcard__desc { font-size: 0.92rem; line-height: 1.45; color: var(--ink-2); }
.wcard:hover .wcard__title { text-decoration: underline; text-decoration-color: var(--wattle); text-decoration-thickness: 3px; }
/* beside the shelf's name, three to a row; a shelf of four goes two by two, since four across
   leaves each card too narrow for a name like Molybdenum */
@media (min-width: 901px) {
  .shelf__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shelf__cards:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .shelf { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .shelf__cards { grid-column: 1; grid-row: auto; margin-top: 0.4rem; }
}
/* on the house-frame painting: calcium's block lit, its two partners quieter */
.art__over .art__hand--tile:not(.art__hand--lit) { fill-opacity: 0.55; stroke-opacity: 0.55; }
.art__over .art__hand--lit { fill: var(--earth-2); font-size: 17px; }

/* A wiki page's own opener: the mineral, the short version, and the painting it hangs off */
.page-open { background: var(--paper); padding-block: clamp(1.6rem, 4vh, 2.8rem) clamp(2.6rem, 5vw, 4rem); }
.page-open__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; margin-top: clamp(1.2rem, 3vw, 2rem); }
.page-open__id { display: flex; align-items: center; gap: 1.1rem; }
.page-open__id > div { min-width: 0; }
.page-open__el { width: 5.4rem; font-size: 2.2rem; }
.page-open__title { margin-top: 0.1rem; font-size: var(--step-5); line-height: 0.95; }
/* on the narrowest phones the tile goes above the title, so a long word ("influence") has the width */
@media (max-width: 359px) {
  .page-open__id { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
}
.page-open .article__chips { margin-top: 1.2rem; }
.page-open__short { max-width: 36rem; margin-top: 1.5rem; }
.page-open__art { margin: 0; }
.page-open__art figcaption { margin-top: 0.4rem; font-size: 0.8rem; color: var(--ink-3); }
/* an idea's page: its icon on a tile, where a mineral has its element */
.page-open__ico {
  flex: none; display: grid; place-items: center; width: 5.4rem; aspect-ratio: 1; rotate: -2deg;
  background: var(--sap-2); border: 2px solid var(--ink); border-radius: 9px 7px 10px 8px; box-shadow: 3px 3px 0 var(--ink);
}
.page-open__ico svg { width: 2.6rem; height: 2.6rem; color: var(--canopy); }
/* a page with no painting: the short version runs wider under the heading */
.page-open__grid--solo { grid-template-columns: minmax(0, 1fr); }
.page-open__grid--solo .page-open__short { max-width: 46rem; }
/* a tall painting (the roots) stands narrower beside the words */
.page-open__art--tall { justify-self: center; width: min(100%, 22rem); }
.hub-page--article .wiki__article .article__body { margin-top: 0; }
/* where a page isn't from Steve's teaching, it says so first */
.article__note {
  display: flex; gap: 0.7rem; align-items: flex-start; margin: 0 0 1.4rem; padding: 0.85rem 1rem;
  background: var(--paper-2); border: 1.5px dashed rgba(30, 43, 34, 0.35); border-radius: 10px;
  font-size: 0.92rem; color: var(--ink-2);
}
.article__note svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; color: var(--earth); }
.hub-page--article .wiki__article .article__body > h2:first-child { margin-top: 0; }

/* Diagrams */
.dg__leaf { fill: #9bc53d; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.dg__fruit { fill: #3f7d3a; stroke: var(--ink); stroke-width: 2; }
.dg__flow { fill: none; stroke: #5b7fa0; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 10; opacity: 0.7; animation: flow 1.4s linear infinite; }
.dg__flow--big { stroke-width: 7; }
.dg__flow--thin { stroke-width: 2.6; }
@keyframes flow { to { stroke-dashoffset: -24; } }
.dg__vapour { fill: none; stroke: #5b7fa0; stroke-width: 1.6; stroke-linecap: round; opacity: 0.6; }
.dg__ca circle, .dg__dots circle { fill: #f4e6c4; stroke: var(--ink); stroke-width: 1.3; }
.dg__window { fill: #f7d26a; fill-opacity: 0.35; stroke: #c9a23a; stroke-width: 1.4; stroke-dasharray: 5 4; }
.art .dg__growth { stroke: var(--leaf); stroke-width: 3.4; }
.dg__label { font: 800 10px var(--f-body); letter-spacing: 0.14em; fill: var(--ink-3); }
.dg__axis { font: 600 11px var(--f-body); fill: var(--ink-3); }
/* a mineral as a dot, in its tile's colour: <g class="dg__el el--b"> */
.dg__el circle, circle.dg__el { fill: var(--c); stroke: var(--ink); stroke-width: 1.3; }
/* flowers, seeds and pollen (boron) */
.dg__pistil { fill: #dcebb0; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.dg__stigma { fill: #f7d26a; stroke: var(--ink); stroke-width: 2; }
.dg__pollen { fill: var(--wattle); stroke: var(--ink); stroke-width: 1.4; }
.dg__ovule { fill: var(--card); stroke: var(--ink); stroke-width: 1.5; }
.dg__ovule--set { fill: var(--wattle); }
.dg__ovule--empty { fill: none; stroke: var(--ink-3); stroke-dasharray: 3 3; }
.art .dg__tube { stroke: var(--earth); stroke-width: 3; }
.art .dg__burst { stroke: var(--earth); }
/* a mineral as a lettered dot (the root's doors, the leaf's engine) or a tile (a station on the line) */
.dg__ion circle { fill: var(--c); stroke: var(--ink); stroke-width: 1.3; }
.dg__ion text { font: 700 9.5px var(--f-body); text-anchor: middle; fill: var(--ink); }
.dg__tile rect { fill: var(--c, var(--card)); stroke: var(--ink); stroke-width: 1.6; }
.dg__tile text { font-family: var(--f-display); font-weight: 680; font-size: 14px; text-anchor: middle; fill: var(--ink); font-variation-settings: "SOFT" 100, "WONK" 1; }
.dg__bead { stroke: var(--ink); stroke-width: 1.3; }
.dg__missing { fill: none; stroke: var(--earth); stroke-width: 1.6; stroke-dasharray: 3 3; }
/* things that flow: sugar, light, a belt; and a move the plant makes (dashed, still) */
.dg__sugar { fill: none; stroke: #d9a93a; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 1 8; animation: flow 1.4s linear infinite; }
.dg__ray { fill: none; stroke: #e0a526; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 8; animation: flow 1.4s linear infinite; }
.dg__air { fill: none; stroke: #8fa3a8; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 8; animation: flow 1.4s linear infinite; }
.dg__belt { fill: #d9d2c3; stroke: var(--ink); stroke-width: 2; }
/* the foundation: a bag of concrete, and the slab it's poured as */
.dg__bag { fill: #efe6d2; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.dg__slab { fill: #ddd6c8; stroke: var(--ink); stroke-width: 2; }
.dg__belt-run { fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-dasharray: 6 8; animation: flow 1.4s linear infinite; }
.dg__station { fill: var(--paper-2); stroke: var(--ink); stroke-width: 2; }
.dg__move { fill: none; stroke: var(--earth); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 5; }
.dg__sun { fill: var(--wattle); stroke: var(--ink); stroke-width: 1.8; }
.dg__drop { fill: #9fbcd4; stroke: var(--ink); stroke-width: 1.8; }
.dg__bubbles circle { fill: var(--card); stroke: #5b7fa0; stroke-width: 1.3; }
.dg__spark { fill: none; stroke: #c95f5f; stroke-width: 2; }
.dg__aphid ellipse, .dg__aphid circle { fill: #9bc53d; stroke: var(--ink); stroke-width: 1.4; }
/* leaves short of something: yellow between green veins, or pale and speckled */
.dg__leaf--short { fill: #ecd67a; }
.dg__leaf--pale { fill: #dfe9a8; }
.dg__vein { fill: none; stroke: #3f7d3a; stroke-width: 2.4; stroke-linecap: round; }
.dg__speck circle { fill: #f7f1d8; }
/* inside a leaf, and inside a fruit */
.dg__cells rect, .dg__cells circle { fill: #dcebb0; stroke: var(--ink); stroke-width: 1.6; }
.dg__cells--in circle { fill: #b9d77a; }
.dg__silica { fill: #d6e6ec; stroke: #5b7fa0; stroke-width: 1.4; }
.dg__glint { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; opacity: 0.9; }
.dg__spore { fill: #c9a27a; stroke: var(--ink); stroke-width: 1.5; }
.art .dg__hypha { stroke: #7a5a3a; }
.dg__flesh { fill: #f6e3b0; }
.dg__skin { fill: none; stroke: var(--ink); stroke-width: 2.4; }
.dg__cell circle { fill: #fbf1d2; stroke: #c9a23a; stroke-width: 1.1; }
/* at the root: its wall and doors, the zone around it, and the life there */
.dg__rootwall rect { fill: #d9b98f; stroke: var(--ink); stroke-width: 1.6; }
.dg__inside { fill: #f4ead2; }
.dg__soil circle { fill: #8a3a22; opacity: 0.35; }
.dg__halo { fill: none; stroke: #f2b632; stroke-opacity: 0.28; stroke-width: 70; stroke-linecap: round; }
.dg__fungus { fill: none; stroke: #9c7a4f; stroke-width: 1.5; stroke-linecap: round; }
.dg__root-edge { fill: none; stroke: var(--ink); stroke-width: 19; stroke-linecap: round; }
.dg__root { fill: none; stroke: #efe2c2; stroke-width: 14.5; stroke-linecap: round; }
.dg__microbes ellipse { fill: #e08a4e; stroke: var(--ink); stroke-width: 0.9; }
.dg__sugar-dots circle { fill: var(--wattle); stroke: var(--ink); stroke-width: 1; }
.dg__nodule ellipse, .dg__nodule-cut { fill: #e3cfae; stroke: var(--ink); stroke-width: 1.3; }
.dg__nodule-cut { stroke-width: 2; }
.dg__nodule-in { fill: #e6ecd0; stroke: var(--ink); stroke-width: 1.2; }
.dg__nodule-in--fixing { fill: #d9667a; }
.dg__zoom { fill: none; stroke: var(--ink-3); stroke-width: 1.2; stroke-dasharray: 4 4; }
/* the crops: a potato and its seed piece, a poppy's capsule, a bean's flower, a carrot */
.dg__tuber { fill: #f1e2bf; stroke: var(--ink); stroke-width: 1.6; }
.dg__tuber--seed { fill: #d9c29a; }
.dg__capsule { fill: #c5d6c0; stroke: var(--ink); stroke-width: 2; }
.dg__petal { fill: #fbf6ef; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.dg__carrot { fill: #f2a25c; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
/* charts: bars of a harvest, spans of time, steps up, sap tests on a season */
.dg__bar { fill: var(--sap-2); stroke: var(--ink); stroke-width: 2; }
.dg__bar--out { fill: #f1c9b3; }
.dg__bar-label { font: 800 14px var(--f-body); text-anchor: middle; fill: var(--ink); }
.art .dg__ring { stroke: var(--earth); }
.dg__span { fill: #f7d26a; stroke: #c9a23a; stroke-width: 1.4; }
.dg__span--edge { fill: #fcefc6; stroke-dasharray: 4 3; }
/* a crop's last fortnight, in bands: too small, in spec, past it (the wiki's Maturity page) */
.dg__pod--small { fill: #dcebb0; }
.dg__pod--spec { fill: #f7d26a; }
.dg__pod--past { fill: #f1c9b3; }
.dg__pod + .dg__pod { stroke: var(--card); stroke-width: 2; }
.dg__pod-edge { fill: none; stroke: var(--ink); stroke-width: 2; }
.dg__pod-word { font: 700 12px var(--f-body); fill: var(--ink); }
/* a season in stages, a hot week over one of them, and the fruit it ends with (the wiki's Stress and
   salt page) */
.dg__stage { fill: #e6efcf; }
.dg__stage + .dg__stage { stroke: var(--card); stroke-width: 2; }
.dg__heat { fill: #e8663f; fill-opacity: 0.42; }
.dg__sun { fill: #f2b33d; stroke: var(--ink); stroke-width: 1.5; }
.dg__fruit { fill: #9dbb4f; stroke: var(--ink); stroke-width: 1.5; }
.dg__fruit--lost { fill: none; stroke: var(--ink-3); stroke-dasharray: 3 2.5; }
/* four ways in: one plant above and below the ground, with a spray, granules, a drip line's wet bulb
   and a band beside the seed (the wiki's Foliar or soil page) */
.dg__ground { fill: #ead9b8; }
.dg__wet { fill: #9fbcd4; fill-opacity: 0.5; }
.dg__pipe { fill: #2f3a33; }
.dg__rootlet { fill: none; stroke: #8a6a4a; stroke-width: 1.8; stroke-linecap: round; }
.dg__stem { fill: none; stroke: #4f7a3a; stroke-width: 3; stroke-linecap: round; }
.dg__granule { fill: #fbf7ec; stroke: var(--ink); stroke-width: 1; }
.dg__nozzle { fill: #c9cbc2; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.dg__mist { fill: #5b7fa0; }
.dg__stairs { fill: var(--sap-2); fill-opacity: 0.55; }
.dg__test circle { fill: var(--wattle); stroke: var(--ink); stroke-width: 1.6; }
/* the orchard and the bulbs: an avocado's wood and its flush, an apple branch thinned or left, and an
   onion from its leaves to tops over (the wiki's Avocados, Apples and Onions pages). The leaf ones go
   with .dg__leaf. */
.dg__wood { fill: #e0c9a0; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.dg__wood--cut { fill: #efdcb8; stroke-width: 1.5; }
.dg__leaf--flush { fill: #cdb35c; }
.dg__apple { fill: #d8574a; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.dg__bud { fill: #f3b4bd; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
@media (max-width: 560px) { .diagram .dg__label--row { font-size: 13.5px; } }
.dg__onion { fill: #dcab60; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.dg__leaf--onion { fill: #86bfa6; stroke-width: 1.7; }
.dg__leaf--dry { fill: #e8d99f; stroke-width: 1.7; }
/* wheat: a head forming, a full head and an empty one (the wiki's Copper page) */
.dg__young { fill: var(--sap-2); stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.dg__grain { fill: #e9c46a; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.dg__grain--pinched { fill: #d6bd80; }
.dg__empty { fill: #f3ecd9; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
/* cotton: the flower on its first day, a lock of lint, and the dry brown of a boll's husk and its seed (the wiki's Cotton page) */
.dg__bloom { fill: #f6ebc4; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.dg__lint { fill: #fff; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.dg__husk { fill: #cfab78; stroke: var(--ink); stroke-width: 1.7; stroke-linejoin: round; }
/* A crop's season, stage by stage (tools/wiki.py writes it from the program builder's data): when
   each stage falls in the season, what it's for, and the nutrients that matter most in it. */
.season { margin: 1rem 0 1.8rem; }
.season__lede { color: var(--ink-2); }
/* read inside the program builder, it's already there */
.pb-learn__article .season__build { display: none; }
.season__stages { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1.5px solid rgba(30, 43, 34, 0.14); }
.season__stage { display: grid; gap: 0.45rem; padding: 0.85rem 0 0.95rem; border-bottom: 1.5px solid rgba(30, 43, 34, 0.14); }
.article__body .season__stage p { margin: 0; }
.season__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.65rem; }
.season__name { font-weight: 700; color: var(--ink); }
.season__days { font-size: 0.85rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.season__flag {
  align-self: center; padding: 0.12rem 0.5rem; border: 1.5px solid var(--earth); border-radius: 999px;
  font: 800 0.64rem/1.3 var(--f-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--earth);
}
/* where the stage falls in the season: the whole season as a track, the stage in its colour */
.season__bar { position: relative; height: 0.5rem; border-radius: 999px; background: rgba(30, 43, 34, 0.08); }
.season__bar::after {
  content: ""; position: absolute; inset-block: 0; left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%);
  border-radius: 999px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(30, 43, 34, 0.25);
}
.season__goal { color: var(--ink-2); }
/* how the stage shows on the plant, under what it's for */
.season__sign { font-size: 0.92rem; color: var(--ink-3); }
.season__sign span { margin-right: 0.3rem; font-weight: 800; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.season__keys { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; }
.article__body .season__key { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; font-weight: 650; color: var(--canopy); text-decoration: none; }
/* the name is underlined, not the link: a flex link's underline runs through its tile's letters too */
.article__body :is(.season__key, .saying__page) > span:last-child { text-decoration: underline; text-decoration-color: var(--wattle); text-decoration-thickness: 2px; }
.article__body :is(.season__key, .saying__page):hover > span:last-child { text-decoration-color: var(--canopy); }
.season__key .el { width: 1.7rem; font-size: 0.82rem; border-width: 1.5px; border-radius: 5px 4px 6px 5px; box-shadow: 2px 2px 0 var(--ink); }
.season__key .el small { display: none; }

/* A mineral's crop by crop (tools/wiki.py): each crop a bar of its whole season, split into its stages,
   with the stages where the mineral matters most filled in, and their names under it. A critical stage
   has the builder's pennant. */
.when { display: grid; gap: 0.75rem; margin-top: 0.4rem; }
.when__lede { color: var(--ink-2); }
.pb-learn__article .when__build { display: none; }
.when__crops { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid rgba(30, 43, 34, 0.14); }
.when__crop {
  display: grid; grid-template-columns: minmax(7rem, 0.3fr) minmax(0, 1fr); gap: 0.35rem 1.1rem; align-items: center;
  padding: 0.75rem 0 0.8rem; border-bottom: 1.5px solid rgba(30, 43, 34, 0.14);
}
.article__body .when__crop p { margin: 0; }
.when__name { grid-row: span 2; align-self: start; font-weight: 700; line-height: 1.3; color: var(--ink); }
.when__span { display: block; font-size: 0.8rem; font-weight: 600; color: var(--ink-3); }
.when__bar { position: relative; height: 0.8rem; border-radius: 999px; overflow: hidden; background: rgba(30, 43, 34, 0.08); }
.when__seg { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); }
.when__seg + .when__seg { border-left: 2px solid var(--card); }
.when__seg.is-on { background: var(--leaf); }
.when__stages { font-size: 0.88rem; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 560px) {
  .when__crop { grid-template-columns: minmax(0, 1fr); }
  .when__name { grid-row: auto; }
  .when__span { display: inline; margin-left: 0.3rem; }
}

/* Steve's sayings (tools/wiki.py): each one in his words, a longer line of his where there is one, what
   he means, and the pages that go further, linked as a season's nutrients are. */
.sayings { margin: 0.6rem 0 0; border-top: 1.5px solid rgba(30, 43, 34, 0.14); }
.saying { display: grid; gap: 0.4rem; padding: 1rem 0 1.1rem; border-bottom: 1.5px solid rgba(30, 43, 34, 0.14); }
.saying dd { margin: 0; }
.saying__q {
  font-family: var(--f-display); font-size: var(--step-1); font-style: italic; line-height: 1.25; text-wrap: balance;
  font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--canopy);
}
.saying__said { font-size: 0.92rem; font-style: italic; color: var(--ink-3); }
.saying__means { color: var(--ink); }
.saying__pages { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin-top: 0.15rem; }
.article__body .saying__page { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; font-weight: 650; color: var(--canopy); text-decoration: none; }
.saying__page :is(.el, .wiki-ico) { width: 1.7rem; border-width: 1.5px; border-radius: 5px 4px 6px 5px; box-shadow: 2px 2px 0 var(--ink); }
.saying__page .el { font-size: 0.82rem; }
.saying__page .el small { display: none; }
.saying__page .wiki-ico svg { width: 1rem; height: 1rem; }

/* A wiki page on paper, for the shed wall or the farm manager: the page from its title to Steve's line,
   with its drawings and its season. The site's header, tabs and footer, the index, "Keep going" and the
   painting stay on the screen: the drawings carry the page, and ink is dear. */
@media print {
  @page wiki { margin: 12mm 14mm 14mm; }
  body.hub-page--article { page: wiki; padding: 0; background: #fff; font-size: 10.5pt; line-height: 1.45; }
  .hub-page--article :is(.skip, .site-header, .hub-nav, .crumbs, .page-open__art, .wiki__index, .article__foot, .site-footer, .chip--print) { display: none !important; }
  .hub-page--article :is(main, .page-open, .wiki, .wrap) { width: auto; margin: 0; padding: 0; max-width: none; background: none; }
  .hub-page--article .torn-top::before { display: none; }
  .hub-page--article .wiki { margin-top: 7mm; }
  .hub-page--article :is(.page-open__grid, .wiki__grid) { display: block; margin: 0; }
  .hub-page--article .wiki__article { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; rotate: none; }
  /* the printout's masthead, with where it came from, then the page's name */
  .hub-page--article .page-open__printed {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1mm 6mm; margin-bottom: 6mm; padding-bottom: 2mm; border-bottom: 0.75pt solid var(--ink);
    font: 700 7.5pt/1.2 var(--f-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
  }
  .hub-page--article .page-open__printed span { font-weight: 500; letter-spacing: 0; text-transform: none; }
  .hub-page--article :is(.page-open__el, .page-open__ico) { width: 17mm; font-size: 20pt; box-shadow: 2px 2px 0 var(--ink); rotate: none; }
  .hub-page--article .page-open__ico svg { width: 9mm; height: 9mm; }
  .hub-page--article .article__kicker { font-size: 7.5pt; }
  .hub-page--article .page-open__title { font-size: 30pt; }
  .hub-page--article .page-open .article__chips { margin-top: 3.5mm; }
  .hub-page--article .chip { padding: 0.8mm 2.6mm; font-size: 8pt; }
  .hub-page--article .page-open__short { max-width: none; margin-top: 4mm; padding: 3mm 4.5mm 3.5mm; }
  .hub-page--article .article__short-label { font-size: 13pt; }
  .hub-page--article .article__short p + p { font-size: 11.5pt; }
  .hub-page--article .article__body { max-width: none; }
  .hub-page--article .article__body :is(h2, h3) { margin: 5mm 0 2mm; font-size: 15pt; break-after: avoid; }
  .hub-page--article .article__body :is(p, li) { orphans: 3; widows: 3; color: var(--ink); }
  .hub-page--article .article__note { margin-bottom: 5mm; font-size: 9pt; }
  .hub-page--article .article__body a { color: inherit; }
  .hub-page--article :is(.diagram, .pull, .article__note, .season__stage, .when__crop, .saying, .sums) { break-inside: avoid; }
  /* a mineral's crop by crop: each crop on one line, its season's length beside its name */
  .hub-page--article .when { gap: 0.35rem; }
  .hub-page--article .when__crop { grid-template-columns: 10.5rem minmax(0, 1fr); padding: 0.22rem 0 0.28rem; row-gap: 0.15rem; }
  .hub-page--article .when__span { display: inline; margin-left: 0.3rem; white-space: nowrap; }
  .hub-page--article .when__bar { height: 0.5rem; }
  .hub-page--article .when__stages { font-size: 9pt; }
  /* Steve's sayings: smaller tiles and a little less room keep them to four sheets */
  .hub-page--article .saying { padding: 1.8mm 0 2.2mm; gap: 0.8mm; }
  .hub-page--article .saying__q { font-size: 12.5pt; }
  .hub-page--article :is(.saying__said, .saying__page) { font-size: 9pt; }
  .hub-page--article .saying__pages { gap: 1mm 4mm; margin-top: 0; }
  .hub-page--article .saying__page :is(.el, .wiki-ico) { width: 5mm; border-radius: 3px; box-shadow: 1.5px 1.5px 0 var(--ink); }
  .hub-page--article .saying__page .el { font-size: 7.5pt; }
  .hub-page--article .saying__page .wiki-ico svg { width: 3.2mm; height: 3.2mm; }
  .hub-page--article .diagram { margin: 5mm auto 4mm; max-width: 130mm; }
  .hub-page--article .diagram figcaption { font-size: 8.5pt; }
  .hub-page--article .article__body h2:has(+ .season) { break-after: avoid; }
  .hub-page--article .season__days, .hub-page--article .season__key { font-size: 9pt; }
  .hub-page--article .pull { margin-top: 5mm; }
  .hub-page--article .article__body .pull + p { margin-top: 4mm; }
  .hub-page--article .pull p { font-size: 15pt; }
  .hub-page--article .pull footer { font-size: 8pt; }
  .hub-page--article .sums { background-image: none; }
  .hub-page--article .sums__next { display: none; }
  /* what carries meaning in colour prints in colour, even with the browser's backgrounds off */
  .hub-page--article :is(.el, .page-open__ico, .season__bar, .season__flag, .when__bar) { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* a link inside a page's words */
.article__body p a, .article__list a { color: var(--canopy); text-decoration-color: var(--wattle); text-decoration-thickness: 2px; }
.article__body p a:hover, .article__list a:hover { text-decoration-color: var(--canopy); }

@media (max-width: 900px) {
  .wiki-front, .page-open__grid { grid-template-columns: minmax(0, 1fr); }
  .wiki-feature { max-width: 36rem; }
  /* a page first, then the index to the rest */
  .hub-page--article .wiki__index { order: 2; }
  .page-open__art { max-width: 36rem; }
  .wiki-open__grid { grid-template-columns: 1fr; }
  .wiki-open__art { max-width: 40rem; }
  .wiki__grid { grid-template-columns: 1fr; }
  .wiki__index { rotate: 0deg; }
  /* A shelf of tiles you can swipe, and the ideas as pills. The tiles share the row's width, so --n of
     them sit whole and a third of the next peeks in under the fade, never a readable part of its name
     (qag-2hkow: 'Potas' at 360 px). Snapped, the row rests with a whole tile at either end. */
  .wiki__index { container: wiki-index / inline-size; }
  .wiki__tiles {
    --n: 3; --tile: calc((100cqi + 1rem - var(--n) * 0.3rem) / (var(--n) + 0.33)); --peek: calc(var(--tile) * 0.33);
    display: flex; gap: 0.3rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory;
    margin-inline: -0.5rem; padding: 0.2rem calc(var(--peek) + 0.3rem) 0.4rem 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 0.5rem, #000 calc(100% - var(--peek) - 0.3rem), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 0.5rem, #000 calc(100% - var(--peek) - 0.3rem), transparent);
  }
  @container wiki-index (min-width: 338px) { .wiki__tiles { --n: 4; } }
  @container wiki-index (min-width: 420px) { .wiki__tiles { --n: 5; } }
  @container wiki-index (min-width: 500px) { .wiki__tiles { --n: 6; } }
  @container wiki-index (min-width: 580px) { .wiki__tiles { --n: 7; } }
  @container wiki-index (min-width: 660px) { .wiki__tiles { --n: 8; } }
  @container wiki-index (min-width: 740px) { .wiki__tiles { --n: 9; } }
  .wiki__tiles::-webkit-scrollbar { display: none; }
  .wiki__tiles li { flex: none; width: var(--tile); scroll-snap-align: start; }
  .wiki__list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .wiki__list .topic { width: auto; padding: 0.4rem 0.8rem; border-color: rgba(30, 43, 34, 0.18); border-radius: 999px; font-size: 0.86rem; }
}
@media (max-width: 560px) {
  .diagram .art__hand { font-size: 21px; }
  .diagram .art__hand--sm { font-size: 17px; }
  /* on a phone a page's drawings run out to the card's edges, so their notes stay readable */
  .wiki__article .diagram { margin-inline: calc(0.4rem - clamp(1.4rem, 3.5vw, 2.8rem)); }
  .wiki__article .diagram figcaption { padding-inline: calc(clamp(1.4rem, 3.5vw, 2.8rem) - 0.4rem); }
  .article__head { grid-template-columns: auto minmax(0, 1fr); }
  .article__stamp { grid-column: 1 / -1; justify-self: start; }
  .article__el { width: 3.6rem; font-size: 1.5rem; }
}

/* Ask QuorumAI: the shed radio, with the chat beside it ------------------------------------------ */
.ask-open { position: relative; background: var(--paper); padding-block: clamp(1.8rem, 4.5vh, 3.2rem) clamp(2.8rem, 5vw, 4.6rem); overflow: hidden; }
.ask-open__grid {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-rows: auto minmax(0, 1fr);
  column-gap: clamp(1.8rem, 4vw, 4rem); align-items: start;
}
.ask-open__text { grid-column: 1; grid-row: 1; }
.ask-open h1 { margin-top: 0.85rem; max-width: 12ch; font-size: clamp(2.4rem, min(4.4vw, 7.4vh), 4.4rem); }
.ask-open .lede { margin-top: 1rem; max-width: 31rem; }
/* the way into the full chat (chat.html) */
.ask-open__go { margin-top: 1.4rem; }
.ask-open__keeps { margin-top: 0.65rem; max-width: 27rem; font-size: 0.88rem; color: var(--ink-3); }

/* the radio: its ground is the page's paper, so it sits straight on the page */
.ask-radio { grid-column: 1; grid-row: 2; align-self: end; width: min(100%, 34rem); margin: clamp(0.6rem, 2.5vh, 1.8rem) 0 0 clamp(-1.8rem, -2.2vw, -0.4rem); }
.ask-radio__glow {
  position: absolute; left: 49.9%; top: 45.9%; width: 22%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 222, 140, 0.95), rgba(255, 196, 96, 0.5) 52%, rgba(255, 176, 80, 0) 100%);
  mix-blend-mode: soft-light; opacity: 0.75;
}
.radio__wave { fill: none; stroke: var(--earth-2); stroke-width: 1.7; stroke-linecap: round; opacity: 0.55; }
.radio__steam path { fill: none; stroke: #fffdf6; stroke-width: 2.4; stroke-linecap: round; opacity: 0; filter: blur(0.45px) drop-shadow(0 0 0.6px rgba(98, 86, 70, 0.4)); }
.art__over .ask-radio__note { font-size: 13.5px; stroke: var(--paper); stroke-width: 3.5px; }
.ask-radio__arrow { stroke: var(--earth); paint-order: stroke; }
@media (prefers-reduced-motion: no-preference) {
  .ask-radio__glow { animation: dial 4.6s ease-in-out infinite; }
  .radio__wave { opacity: 0; animation: wave 3s ease-out calc(var(--i, 0) * 0.42s) infinite; }
  .radio__steam path { stroke-dasharray: 16 64; animation: steam 4.2s linear calc(var(--i, 0) * -2.1s) infinite; }
  /* while QuorumAI is looking something up, the set warms and the signal quickens */
  .ask-open:has(.chat.is-busy) .ask-radio__glow { animation-duration: 0.95s; }
  .ask-open:has(.chat.is-busy) .radio__wave { animation-duration: 1.1s; animation-delay: calc(var(--i, 0) * 0.16s); }
}
@keyframes dial { 50% { opacity: 1; } 0%, 100% { opacity: 0.55; } }
@keyframes wave { 0% { opacity: 0; translate: 0 2px; } 25% { opacity: 0.75; } 70%, 100% { opacity: 0; translate: 0 -2px; } }
@keyframes steam { from { stroke-dashoffset: 16; opacity: 0; } 22% { opacity: 0.75; } 70% { opacity: 0.45; } to { stroke-dashoffset: -50; opacity: 0; } }

/* the chat: the set's own dark-green face, as tall as the window lets it be (its foot in view as the page
   opens), so a conversation has room. It sits square: it's a tool, and its words stay sharp. */
.chat--hub {
  grid-column: 2; grid-row: 1 / span 2; align-self: start; display: flex; flex-direction: column; gap: 0.7rem;
  height: clamp(32rem, calc(100svh - var(--hub-top, 7.4rem) - 4.5rem), 54rem);
  padding: 1.1rem 1.25rem 1rem; rotate: none; color: #efe9d6;
  background-color: #163a24; background-image: radial-gradient(rgba(207, 224, 168, 0.13) 1.2px, transparent 1.7px), var(--grain); background-size: 24px 24px, 260px 260px;
  border: 2px solid var(--ink); border-radius: 22px 18px 24px 17px; box-shadow: 5px 6px 0 var(--ink), 0 40px 70px -40px rgba(30, 43, 34, 0.6);
}
.chat--hub .chat__head { flex-wrap: nowrap; border-bottom-color: rgba(239, 233, 214, 0.16); }
.chat--hub .chat__avatar { flex: none; width: 2.6rem; height: 2.6rem; background: #0f2a1a; box-shadow: 0 0 0 1.5px rgba(242, 182, 50, 0.55); }
.chat__who { display: grid; min-width: 0; line-height: 1.2; }
.chat__who strong { font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; color: #fbf3e1; }
.chat__status { display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; font-weight: 650; color: #cfe0a8; }
.chat__status::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--sap); box-shadow: 0 0 0 3px rgba(155, 197, 61, 0.22); }
.chat__busy { display: none; color: var(--wattle-2); }
.chat--hub.is-busy .chat__idle { display: none; }
.chat--hub.is-busy .chat__busy { display: inline; }
.chat--hub.is-busy .chat__status::before { background: var(--wattle); box-shadow: 0 0 0 3px rgba(242, 182, 50, 0.3); }
.chat__flag { flex: none; background: var(--wattle-2); color: var(--ink); border: 1.5px solid var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .chat--hub.is-busy .chat__avatar { animation: onair 1s ease-in-out infinite; }
}
@keyframes onair { 50% { box-shadow: 0 0 0 1.5px rgba(242, 182, 50, 0.9), 0 0 0 7px rgba(242, 182, 50, 0.16); } }

.chat--hub .chat__log {
  flex: 1 1 0; min-height: 17rem; display: flex; flex-direction: column; gap: 0.8rem; overflow-y: auto; overscroll-behavior: contain;
  padding: 1.2rem 0.4rem 0.3rem 0; scrollbar-color: rgba(239, 233, 214, 0.28) transparent; scrollbar-width: thin;
  /* earlier messages fade out under the head as the conversation scrolls; at its start, the first line
     sits below the fade */
  -webkit-mask-image: linear-gradient(transparent, #000 1.2rem); mask-image: linear-gradient(transparent, #000 1.2rem);
}
@media (prefers-reduced-motion: no-preference) { .chat--hub .chat__log { scroll-behavior: smooth; } }
.chat--hub .chat__log:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
.chat__day { flex: none; align-self: center; margin: 0.1rem 0 -0.2rem; font-size: 0.7rem; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(239, 233, 214, 0.72); }
.chat__msg { flex: none; animation: pop 0.5s var(--ease-grow) both; }
.chat__msg--me { align-self: flex-end; }
.chat__msg--ai { align-self: flex-start; }
.chat--hub .chat__msg { color: var(--ink); max-width: 88%; }
/* a question typed on two lines shows on two lines */
.chat--hub .chat__msg--me p { white-space: pre-line; }
.chat--hub .chat__msg--ai { background: #f6efe0; }
/* QuorumAI's short lists (ai-text.js) */
.chat__msg .ai-list { margin: 0.5em 0 0; padding-left: 1.2em; list-style: disc; }
.chat__msg .ai-list:first-child { margin-top: 0; }
.chat__msg .ai-list li + li { margin-top: 0.2em; }
.chat__msg .ai-list + p { margin-top: 0.5em; }
.chat__typing { flex: none; align-self: flex-start; animation: pop 0.3s var(--ease-grow) both; }
/* a live answer that belongs with Steve hands the question on to the live Q&A */
.chat__steve { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.8rem; padding-top: 0.65rem; border-top: 1.5px dashed rgba(30, 43, 34, 0.24); font-size: 0.9rem; font-weight: 650; }
.chat__steve svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.1rem; color: var(--earth); }
.chat__steve a { color: var(--canopy-2); font-weight: 750; }

/* the questions to try: one row beside their label, that scrolls, so the conversation keeps the room */
.chat__try { flex: none; display: flex; align-items: center; gap: 0.3rem 0.6rem; min-width: 0; }
.chat__try-label { flex: none; font-family: var(--f-hand); font-weight: 600; font-size: 1.4rem; line-height: 1; color: var(--wattle-2); rotate: -1.5deg; }
.chat__chips {
  flex: 1; min-width: 0; display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none;
  margin-block: -0.4rem; padding: 0.4rem; mask-image: linear-gradient(90deg, #000 calc(100% - 2.4rem), transparent);
}
.chat__chips::-webkit-scrollbar { display: none; }
.chat__chips::after { content: ""; flex: none; width: 1.6rem; }
.chat__chips .chip--ask { flex: none; white-space: nowrap; }
.chip--ask { padding: 0.45rem 0.85rem; text-align: left; font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer; background: rgba(246, 239, 224, 0.08); color: #f5efdf; border: 1.5px solid rgba(246, 239, 224, 0.3); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.chip--ask:hover, .chip--ask:focus-visible { background: var(--wattle); border-color: var(--wattle); color: var(--ink); }
.chip--ask.is-asked { border-color: var(--wattle); }
.chat--hub .chat__form { flex: none; align-items: flex-end; }
.chat--hub .chat__form .input { border-color: var(--ink); background: #fffdf8; color: var(--ink); }
/* the question box grows with a long question (learn.js), up to a few lines */
.chat__q { resize: none; min-height: 2.9rem; max-height: 10rem; line-height: 1.4; overflow-y: auto; }
/* margin 0: the carry line before it, hidden or not, mustn't space it as a second paragraph */
.chat--hub .chat__note { margin: 0; font-size: 0.78rem; color: #c5cfb9; }
/* after an answer: the conversation so far, carried on in the full chat */
.chat__carry { flex: none; margin: -0.2rem 0 0; font-size: 0.88rem; font-weight: 750; }
.chat__carry[hidden] { display: none; }
.chat__carry a { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--wattle-2); text-underline-offset: 3px; }
.chat__carry svg { width: 1rem; height: 1rem; }

/* How it answers: one answer, taken apart */
.working { background-color: var(--paper-2); background-image: var(--grain); background-size: 260px; }
.working__grid { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.working h2 { margin-top: 0.85rem; font-size: var(--hub-h2); text-wrap: balance; }
.working .lede { margin-top: 1rem; }
.working__label { margin-top: 1.8rem; font-size: 1.5rem; rotate: -2deg; }
.knows { list-style: none; display: grid; gap: 0.7rem; margin: 0.8rem 0 0; padding: 0; }
.knows li { display: flex; align-items: center; gap: 0.8rem; color: var(--ink-2); }
.knows strong { color: var(--ink); }
.knows__ico { flex: none; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; }
.knows__ico svg { width: 1.45rem; height: 1.45rem; }
.knows a { font-weight: 700; color: var(--canopy-2); }

.apart { position: relative; margin: 0; padding-left: clamp(9rem, 15vw, 12.5rem); }
.apart__cap { margin: 0 0 0.7rem 0.4rem; font-size: 1.55rem; rotate: -2deg; transform-origin: 0 50%; }
.apart__card {
  display: grid; gap: 0.8rem; padding: clamp(1.1rem, 2.2vw, 1.6rem); rotate: 0.6deg;
  background: var(--card); border: 1.5px solid rgba(30, 43, 34, 0.22); border-radius: 18px 15px 20px 14px; box-shadow: var(--shadow-paper);
}
.apart__card .chat__msg { max-width: 100%; animation: none; }
.apart__card .chat__msg--me { justify-self: end; }
.apart__card .chat__sources .chip { background: #fbf7ee; }
.apart__part { position: relative; }
.apart__note {
  position: absolute; right: calc(100% + 2.2rem); top: 50%; translate: 0 -50%; width: clamp(7.6rem, 12vw, 10rem);
  display: grid; justify-items: end; gap: 0.1rem; text-align: right;
  font-family: var(--f-hand); font-weight: 600; font-size: 1.35rem; line-height: 1; color: var(--earth);
}
.apart__note svg { width: 3.4rem; height: auto; margin-right: -2.4rem; overflow: visible; }
.apart__note path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Still stuck: the next place to take it */
.ask-next { background-color: var(--paper); }
.ask-next__head { max-width: 40rem; }
.ask-next h2 { margin-top: 0.85rem; font-size: var(--hub-h2); text-wrap: balance; }
.ask-next .lede { margin-top: 1rem; }
.ask-next__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1rem, 2.4vw, 2rem); margin-top: clamp(2rem, 4vw, 3rem); }

/* A painted card that opens one of the hub's pages (the dashboard uses these too).
   The title carries the link, stretched over the whole card. */
.go {
  position: relative; display: flex; flex-direction: column; overflow: hidden; color: var(--ink);
  background: var(--card); border: 2px solid var(--ink); border-radius: 18px 15px 20px 14px; box-shadow: 4px 5px 0 var(--ink);
  transition: translate 0.25s var(--ease-grow), box-shadow 0.25s ease;
}
.go:hover { translate: 0 -3px; box-shadow: 5px 8px 0 var(--ink); }
.go:has(.go__title a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.go__title a { color: inherit; text-decoration: none; outline: none; }
.go__title a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.go__art { position: relative; flex: none; aspect-ratio: 3 / 2; overflow: hidden; border-bottom: 1.5px solid rgba(30, 43, 34, 0.2); }
.go__art picture { display: block; height: 100%; }
.go__art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 0.8s var(--ease-grow); }
.go:hover .go__art > picture img { scale: 1.03; }
.go__body { position: relative; display: grid; gap: 0.4rem; align-content: start; padding: 1.1rem 1.3rem 1.3rem; }
.go__kicker { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; color: var(--earth); }
.go__kicker svg { width: 1.05rem; height: 1.05rem; }
.go__title { font-family: var(--f-display); font-weight: 600; font-size: var(--step-2); line-height: 1.1; }
.go__title em { color: var(--canopy-2); }
.go__meta { font-size: 0.95rem; color: var(--ink-2); }
.go__cta { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem; font-weight: 750; color: var(--canopy-2); }
.go__cta::after { content: "→"; content: "→" / ""; transition: translate 0.2s ease; }
.go:hover .go__cta::after { translate: 4px 0; }
/* the night card: the painting fills it, the words sit in its sky */
.go--night { min-height: 24rem; background: #182046; color: #f6efe0; }
.go--night .go__art { position: absolute; inset: 0; aspect-ratio: auto; border: 0; }
.go--night .go__art img { object-position: 72% 60%; }
.go--night .go__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(14, 20, 50, 0.84) 0%, rgba(14, 20, 50, 0.5) 40%, rgba(14, 20, 50, 0) 66%); }
.go--night .go__body { max-width: 23rem; padding: clamp(1.3rem, 3vw, 2rem); }
.go--night .go__kicker { color: #f7d26a; }
.go--night .go__title { font-size: var(--step-3); color: #fbf3e1; }
.go--night .go__title em { color: var(--wattle-2); }
.go--night .go__meta { color: #dfe2f0; }
.go--night .go__meta strong { color: #fff; }
/* a night halo, as the night opener has, for where a narrow phone runs the words onto the painting */
.go--night :is(.go__kicker, .go__title, .go__meta) { text-shadow: 0 0 12px rgba(14, 20, 50, 0.9), 0 0 3px rgba(14, 20, 50, 0.8); }
.go--night .go__cta { color: var(--wattle-2); }

/* The dashboard's month: live and episodes, then the wiki and QuorumAI, then the gate --------------- */
.month { background-color: var(--paper-2); background-image: var(--grain); background-size: 260px; }
.month__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 2.2vw, 1.8rem); align-items: stretch; }
.month__live { grid-column: span 7; }
.month__eps { grid-column: span 5; rotate: 0.4deg; }
.month__wiki { grid-column: span 5; rotate: -0.4deg; }
.month__ask { grid-column: span 7; }
.month__walk { grid-column: 1 / -1; }
.month__adv { grid-column: 1 / -1; }

.month__live .go__body { max-width: 26rem; }
.go__when { display: flex; align-items: center; gap: 1rem; margin: 0.5rem 0 0.2rem; }
.calpage--sm { flex: none; width: 4.9rem; padding-bottom: 0.4rem; color: var(--ink); box-shadow: 3px 3px 0 rgba(8, 12, 32, 0.7); }
.calpage--sm .calpage__month { padding: 0.8rem 0 0.25rem; font-size: 0.66rem; }
.calpage--sm .calpage__day { margin-top: 0.2rem; font-size: 2.1rem; }
.calpage--sm .calpage__dow { font-size: 0.64rem; }
.go__when .go__meta { line-height: 1.45; }
.go__topic { font-size: 0.92rem; color: #dfe2f0; }
.go__topic span { color: #aab0cc; }

.month__eps .pot-tag { width: 1.3rem; font-size: 0.78rem; }
.go__progress { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem; margin-top: 0.3rem; font-size: 0.85rem; color: var(--ink-3); }
.go__title--el { display: flex; align-items: center; gap: 0.7rem; }
.go__title--el .el { width: 2.9rem; font-size: 1.2rem; border-width: 1.5px; box-shadow: 2px 2px 0 var(--ink); }
.go__title--el .el small { top: 0.14rem; left: 0.22rem; font-size: 0.46rem; }

/* QuorumAI's card: ask from here, and the answer opens on its own page */
.askcard {
  position: relative; display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.6rem); align-items: center;
  padding: clamp(1rem, 2vw, 1.4rem); color: #efe9d6; rotate: 0.3deg;
  background-color: #163a24; background-image: radial-gradient(rgba(207, 224, 168, 0.13) 1.2px, transparent 1.7px), var(--grain); background-size: 24px 24px, 260px 260px;
  border: 2px solid var(--ink); border-radius: 18px 15px 20px 14px; box-shadow: 4px 5px 0 var(--ink);
}
.askcard__art { position: relative; margin: 0; padding: 0.45rem; background: #fbf7ee; border-radius: 6px; rotate: -2deg; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.7); }
.askcard__art::before, .askcard__art::after { content: ""; position: absolute; top: -0.55rem; width: 3.6rem; height: 1.1rem; background: rgba(247, 210, 106, 0.72); rotate: -6deg; }
.askcard__art::before { left: 12%; }
.askcard__art::after { right: 10%; rotate: 5deg; }
.askcard__art img { display: block; width: 100%; height: auto; }
.askcard__body { display: grid; gap: 0.5rem; align-content: center; }
.askcard .go__kicker { color: #cfe0a8; }
.askcard .go__kicker svg { color: var(--wattle); }
.askcard .go__title { color: #fbf3e1; }
.askcard .go__title a { color: inherit; text-decoration: none; }
.askcard .go__title a::after { content: none; } /* this card holds a form, so its title is an ordinary link */
/* on a touch screen tapped by an area 44 px high, over none of the card's other links (qag-1hsf7) */
@media (pointer: coarse) {
  .askcard .go__title a { position: relative; }
  .askcard .go__title a::after { content: ""; inset: -8px -4px; }
}
.askcard .go__title a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.askcard .go__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.askcard .go__title em { color: var(--wattle); }
.askcard__form { display: flex; gap: 0.5rem; margin-top: 0.4rem; }
.askcard__form .input { flex: 1 1 auto; min-width: 0; padding-block: 0.6rem; border-color: var(--ink); color: var(--ink); }
.askcard__try { margin-top: 0.3rem; font-size: 1.35rem; color: var(--wattle-2); rotate: -1.5deg; justify-self: start; }
.askcard__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.askcard__chips .chip--ask { text-decoration: none; }
.askcard__note { margin-top: 0.3rem; font-size: 0.76rem; color: #c5cfb9; }

/* the crop walk: the words, then the spade in the paddock, its paper multiplied onto the card's */
.month__walk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); rotate: 0.2deg; }
.month__walk .go__body { align-content: center; padding: clamp(1.3rem, 3.4vw, 2.6rem); }
.month__walk .go__title { font-size: var(--step-3); }
.month__walk .go__meta { max-width: 34rem; }
.month__walk .go__art { aspect-ratio: 960 / 686; border-bottom: 0; border-left: 1.5px solid rgba(30, 43, 34, 0.2); }
.month__walk .go__art img { mix-blend-mode: multiply; }

/* This week on your farm: after the course, the grower's own crop (pages/week.js). Its stage and the
   season at a glance on graph paper, this week's walk, and the plan's next fortnight on a ruled page. */
.week { padding-block: 0 clamp(3rem, 6vw, 5rem); }
.week .hub-head { margin-bottom: clamp(1.2rem, 3vw, 2rem); }
.week__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 2.2vw, 1.8rem); align-items: start; }
.week__grid > .card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.65rem; align-content: start; }
.week__crop { rotate: -0.25deg; }
.week__now, .week__then { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.65rem; align-content: start; }
.week__plan { rotate: 0.3deg; }
/* Your reminders (pages/week.js, qag-anb): QuorumAI's list, the fortnight and what's past due, under the week */
.week__rems-box { margin-top: clamp(1rem, 2.2vw, 1.8rem); }
.week__rems { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.65rem; max-width: 46rem; }
.week__rems-list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.week__rem { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.15rem 1rem; padding-bottom: 0.5rem; border-bottom: 1px dashed var(--rule); }
.week__rem-done { display: flex; align-items: flex-start; gap: 0.6rem; flex: 1 1 14rem; min-width: 0; font-weight: 700; cursor: pointer; overflow-wrap: anywhere; }
.week__rem-done input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--leaf); }
.week__rem.is-done .week__rem-what { color: var(--ink-3); text-decoration: line-through; }
.week__rem-due { font-size: 0.86rem; font-weight: 700; color: var(--ink-2); }
.week__rem.is-past .week__rem-due { color: var(--earth); }
.week__rems-more { font-size: 0.86rem; color: var(--ink-3); }
.week h3 { font-family: var(--f-display); font-weight: 600; font-size: var(--step-2); line-height: 1.12; text-wrap: balance; }
/* the stage's square stays beside its name, level with the first line, when the name wraps on a phone (qag-30g3y) */
.week__stage { display: flex; align-items: flex-start; gap: 0.55rem; }
.week__stage .walk-pad { flex: none; margin-top: calc((1.12em - 0.9rem) / 2); }
.week__stage:focus { outline: none; }
.week__day { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; margin: 0; font-weight: 700; color: var(--ink-2); }
.week__lead, .week__next, .week__move, .week__sap { display: flex; align-items: flex-start; gap: 0.45rem; margin: 0; font-weight: 700; font-size: 0.92rem; }
.week__lead svg, .week__next svg, .week__move svg, .week__sap svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.12rem; color: var(--earth); }
.week__sap { font-weight: 600; color: var(--ink-2); }
.week__next { color: var(--canopy); }
/* the crop's season so far and its sap tests, side by side under its stages */
.week__links { display: flex; flex-wrap: wrap; gap: 0.45rem 1.2rem; margin: 0.15rem 0 0; font-weight: 700; font-size: 0.95rem; }
/* Your blocks in season, above the week: the one pressed is the week shown (week.js blocksHtml) */
.week__blocks { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin: 0 0 clamp(1rem, 2vw, 1.4rem); }
.week__blocks-label { margin: 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--earth); }
.week__blocks ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.week__block { display: grid; gap: 0.05rem; min-height: 2.75rem; padding: 0.4rem 0.95rem; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); font: inherit; font-weight: 700; font-size: 0.92rem; text-align: left; color: var(--ink); cursor: pointer; }
.week__block small { font-size: 0.78rem; font-weight: 600; color: var(--ink-2); }
.week__block:hover { background: var(--paper-2); }
.week__block[aria-pressed="true"] { background: var(--canopy); border-color: var(--canopy); color: #fff; }
.week__block[aria-pressed="true"] small { color: #eef3e4; }
@media (max-width: 560px) { .week__blocks ul { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; } .week__block { width: 100%; } }
.week__links .walk-link { display: inline-flex; align-items: center; gap: 0.4rem; }
.week__links .walk-link svg { flex: none; width: 1.1rem; height: 1.1rem; color: var(--earth); }
/* the season to scale: the stage the crop is in in full colour, today a post driven in */
.week__strip { position: relative; display: flex; gap: 2px; height: 1.1rem; margin: 0.7rem 0 0.1rem; }
.week__strip span { flex: 1 1 0; min-width: 4px; background: var(--c); border: 1.5px solid var(--ink); border-radius: 3px 2px 4px 2px; opacity: 0.42; }
.week__strip span.is-now { opacity: 1; }
.week__today { position: absolute; top: -0.55rem; bottom: -0.35rem; width: 0; border-left: 3px solid var(--ink); translate: -1.5px 0; }
.week__today::before { content: ""; position: absolute; top: -0.2rem; left: -0.45rem; border: 0.4rem solid transparent; border-top-color: var(--ink); translate: -1.5px 0; }
.week__stages { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; font-size: 0.82rem; font-weight: 650; color: var(--ink-3); }
.week__stages li { display: inline-flex; align-items: center; gap: 0.3rem; }
.week__stages .walk-pad { width: 0.62rem; height: 0.62rem; border-width: 1px; }
.week__stages [aria-current] { color: var(--ink); font-weight: 800; }
.week__stakes { display: grid; gap: 0.55rem; margin: 0.25rem 0 0; }
.week__stakes dt { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.week__stakes dd { margin: 0.1rem 0 0; }
.week__read { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.9rem; margin: 0; font-weight: 700; font-size: 0.9rem; }
.week__read svg { width: 1.1rem; height: 1.1rem; color: var(--earth); }
/* this week's walk: what the last one had an eye on, marked as the walk marks it */
.week__again p { margin: 0; font-weight: 700; }
.week__again ul { list-style: none; margin: 0.45rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.week__again li { position: relative; padding-left: 1.4rem; }
.week__again li::before { content: ""; position: absolute; left: 0; top: 0.28em; width: 0.8rem; height: 0.8rem; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--wattle); }
.week__again li.is-bad::before { background: var(--earth); }
.week__for { display: flex; align-items: flex-start; gap: 0.4rem; margin-top: 0.3rem; font-size: 0.88rem; color: var(--ink-2); }
.week__for svg { flex: none; width: 1rem; height: 1rem; margin-top: 0.12rem; color: var(--earth); }
.week__for a { font-weight: 700; }
.week__fine { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-weight: 700; color: var(--canopy); }
.week__fine svg { flex: none; width: 1.1rem; height: 1.1rem; }
.week__asks { margin: 0; color: var(--ink-2); }
.week__go { justify-self: start; margin-top: 0.25rem; }
/* the plan's next fortnight, a line down the margin for each: green for a pass, blue for a sap test */
.week__dates { list-style: none; margin: 0.1rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.week__date { display: grid; gap: 0.15rem; padding-left: 0.8rem; border-left: 3px solid var(--leaf); }
.week__date.is-test { border-left-color: var(--range); }
.week__when { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.45rem; margin: 0; }
.week__when svg { flex: none; width: 1.05rem; height: 1.05rem; color: var(--earth); }
.week__when span { font-weight: 700; font-size: 0.86rem; color: var(--earth-2); }
.week__what { margin: 0; font-weight: 650; }
.week__why { margin: 0; font-size: 0.88rem; color: var(--ink-3); }
.week__why a { font-weight: 700; }
.week__move { padding: 0.6rem 0.75rem; border-radius: 10px; background: var(--paper-2); font-weight: 600; color: var(--ink-2); }
/* a season behind them: the year's facts, and where to look back */
.year__facts { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem; }
.year__facts li { color: var(--ink-2); font-weight: 600; }
.year__facts strong { font-family: var(--f-display); font-size: 1.45rem; color: var(--ink); margin-right: 0.15rem; font-variant-numeric: tabular-nums; }
.year__go { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem; margin: 0.8rem 0 0; }
.year__go .walk-link, .week__end .walk-link { display: inline-flex; align-items: center; gap: 0.4rem; }
.year__go .walk-link svg, .week__end .walk-link svg { flex: none; width: 1.05rem; height: 1.05rem; color: var(--earth); }
.week__keep { color: var(--ink-2); font-size: 0.95rem; max-width: 40rem; }
.week__keep a { color: inherit; }
/* the season's end, in the week's place */
.week__end { display: grid; gap: 0.7rem; max-width: 48rem; }
.week__end > * { margin: 0; }
.week__end-go { display: flex; flex-wrap: wrap; gap: 0.6rem; }
/* last season's line for the stage the crop's in (pages/season.js) */
.week__was { display: flex; align-items: flex-start; gap: 0.45rem; margin: 0; padding: 0.55rem 0.7rem; border-radius: 10px; background: var(--paper-2); font-weight: 600; color: var(--ink-2); }
.week__was svg { flex: none; width: 1.05rem; height: 1.05rem; margin-top: 0.15rem; color: var(--earth); }
/* getting ready for the next critical stage: an inset in the crop's card, washed in the stage's colour */
.week__ready { display: grid; gap: 0.5rem; padding: 0.85rem 0.95rem 0.95rem; border: 1.5px solid var(--ink); border-left-width: 6px; border-left-color: var(--c, var(--wattle)); border-radius: 12px; background: color-mix(in srgb, var(--c, var(--wattle)) 12%, var(--card)); }
.week__ready .go__kicker { margin: 0; }
.week__ready h4 { margin: 0; font-family: var(--f-display); font-size: 1.12rem; line-height: 1.25; text-wrap: balance; }
.week__ready-goal { margin: 0; font-weight: 650; }
.week__ready-list { list-style: none; margin: 0.1rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.week__ready-list li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.93rem; }
.week__ready-list svg { flex: none; width: 1.05rem; height: 1.05rem; margin-top: 0.15rem; color: var(--earth); }
.week__ready-list li.is-ok svg { color: var(--leaf); }
.week__ready-list li.is-todo { font-weight: 650; }
.week__ready-list a { font-weight: 700; }
.week__ready .walk-ai { justify-self: start; }
/* what's past due, and what the walks ticked off, each under its own small heading */
.week__group { margin: 0.4rem 0 0; padding-top: 0.6rem; border-top: 1px dashed var(--rule); font-family: var(--f-body); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--earth-2); }
.week__date.is-late { border-left-color: var(--wattle); }
.week__date.is-done { border-left-color: var(--sap); }
.week__date.is-done .week__when svg { color: var(--leaf); }
.week__date.is-done .week__what { font-weight: 500; color: var(--ink-2); }
.week__said { display: flex; align-items: flex-start; gap: 0.45rem; margin: 0; font-size: 0.9rem; color: var(--ink-2); }
.week__said svg { flex: none; width: 1.05rem; height: 1.05rem; margin-top: 0.12rem; color: var(--earth); }
.week__said a { font-weight: 700; }
.week__links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem 1.3rem; margin: 0.15rem 0 0; }
.week__ask { margin: clamp(1rem, 2.4vw, 1.5rem) 0 0; }
.week__note { display: grid; gap: 0.5rem; max-width: 46rem; }
.week__note p { margin: 0; }
.week__start { max-width: 62rem; }
@media (max-width: 1100px) {
  .week__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* the crop across the top: the stage and the season beside what's at stake */
  .week__grid > .week__crop { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(1.4rem, 3.5vw, 2.6rem); }
}
@media (max-width: 700px) {
  .week__grid { grid-template-columns: minmax(0, 1fr); }
  .week__grid > .week__crop { grid-template-columns: minmax(0, 1fr); }
  .week__crop, .week__plan { rotate: 0deg; }
}

/* The Crop Walk's links, fields and stage pads, and the quick start that makes a plan from a crop and
   the day it went in: the walk's page and the hub's home both use them */
.walk-link {
  padding: 0; border: 0; background: none; font: inherit; font-weight: 750; font-size: 0.9rem; color: var(--earth-2); cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em;
}
.walk-link:hover { color: var(--ink); }
.walk-ai {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.6rem; padding: 0.45rem 0.95rem; font: inherit; font-weight: 750; font-size: 0.9rem;
  color: var(--canopy); background: #fffdf8; border: 2px solid var(--canopy-2); border-radius: 999px; cursor: pointer;
}
.walk-ai svg { width: 1.1rem; height: 1.1rem; color: var(--canopy-2); }
.walk-ai:hover { background: var(--sap-2); }
/* on a touch screen: 44 px high, the size for a thumb (components.css, "On a touch screen"). A .walk-link
   in a sentence stays a link in the sentence; one that stands on its own grows. */
@media (pointer: coarse) {
  .hub-nav a, .walk-ai, .week__links .walk-link, .year__go .walk-link, .week__end .walk-link { min-height: 44px; }
  /* and the tab bar no taller for its bigger tabs */
  .hub-nav__inner { padding-block: 0.3rem; }
  .week__read a, .when__name a { position: relative; }
  .week__read a::after, .when__name a::after { content: ""; position: absolute; inset: -12px -4px; }
  /* a crop's season keys sit closer than a thumb: each tapped by all the room halfway to the next,
     33 px high, so no two overlap (qag-3kjmx) */
  .article__body .season__key { position: relative; }
  .article__body .season__key::after { content: ""; position: absolute; inset: -3px -7px; }
  /* every other .walk-link a few pixels taller to hit than it shows, past the 24 px WCAG asks */
  .walk-link { position: relative; }
  .walk-link::after { content: ""; position: absolute; inset: -4px 0; }
}
.walk-field { display: grid; gap: 0.35rem; font-weight: 700; font-size: 0.92rem; min-width: 0; }
.walk-field small { font-weight: 500; color: var(--ink-3); }
.walk-field :is(input, select, textarea) {
  width: 100%; min-height: 2.9rem; padding: 0.6rem 0.8rem; border: 2px solid rgba(30, 43, 34, 0.7); border-radius: 11px 9px 12px 8px;
  background: #fffdf8; color: var(--ink); font: inherit; font-weight: 500; font-size: 1rem;
}
.walk-field textarea { resize: vertical; line-height: 1.45; }
.walk-pad { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 3px 2px 4px 2px; background: var(--c); border: 1.5px solid var(--ink); vertical-align: -0.05em; }

.walk-start { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; padding: clamp(1.1rem, 3vw, 1.8rem); border: 2px solid var(--ink); }
.walk-start p { margin: 0; max-width: 40rem; }
.walk-start__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.9rem; }
.walk-start__go { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; }
/* a walk from another day, not saved: finish it, save it, or let it go after asking (walk.js, lateHtml) */
.walk-late { display: grid; gap: 0.8rem; padding: clamp(1.1rem, 3vw, 1.8rem); border: 2px solid var(--ink); }
.walk-late h2 { font-size: var(--step-2); }
.walk-late h2:focus { outline: none; }
.walk-late p { margin: 0; max-width: 40rem; }
.walk-late__go { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; }


/* the gate, shut: hover and it swings just enough to see through */
.month__adv { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
.month__adv .go__art { aspect-ratio: 2400 / 1792; border-bottom: 0; border-right: 1.5px solid rgba(30, 43, 34, 0.2); perspective: 60rem; perspective-origin: 50% 30.5%; }
.gate-card__leaf { position: absolute; left: 19.4167%; top: 44.9777%; width: 59.4167%; transform-origin: 2.3843% 50%; transition: transform 1.1s var(--ease-grow); }
.gate-card__leaf img { display: block; width: 100%; height: auto; }
.month__adv:hover .gate-card__leaf, .month__adv:has(a:focus-visible) .gate-card__leaf { transform: rotateY(24deg); }
.no-motion .gate-card__leaf { transition: none; }
.gate-card__notes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.gate-card__hand { font-family: var(--f-hand); font-weight: 600; font-size: 150px; fill: var(--ink); paint-order: stroke; stroke: rgba(247, 246, 232, 0.9); stroke-width: 26px; stroke-linejoin: round; }
.gate-card__ink { fill: none; stroke: var(--ink); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.month__adv .go__body { align-content: center; padding: clamp(1.3rem, 3.4vw, 2.6rem); }
.month__adv .go__title { font-size: var(--step-3); }
.month__adv .go__meta { max-width: 34rem; }
.gate-card__track { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin-top: 0.5rem; }
.gate-card__track svg { width: 1.3rem; height: 1.3rem; color: var(--earth-2); }
.gate-card__track .hand { font-size: 1.35rem; rotate: -2deg; }

/* While the Course is held (COURSE in tools/chrome.py), the episodes' card is the builder's, and the
   farm's tools lead: the plan beside QuorumAI, the walk, then the wiki beside Steve's questions */
html:not([data-course]) .month__eps { order: 1; }
html:not([data-course]) .month__ask { order: 2; }
html:not([data-course]) .month__walk { order: 3; }
html:not([data-course]) .month__wiki { order: 4; }
html:not([data-course]) .month__live { order: 5; }

@media (max-width: 1000px) {
  .month__live, .month__ask, .month__adv { grid-column: 1 / -1; }
  .month__eps, .month__wiki { grid-column: span 6; }
  /* the plan and the wiki side by side, then QuorumAI and the walk across */
  html:not([data-course]) .month__wiki { order: 1; }
}
@media (max-width: 760px) {
  .askcard { grid-template-columns: 1fr; }
  .askcard__art { width: min(100%, 22rem); margin: 0.4rem auto 0.2rem; }
  .month__adv, .month__walk { grid-template-columns: 1fr; }
  .month__adv .go__art { border-right: 0; border-bottom: 1.5px solid rgba(30, 43, 34, 0.2); }
  .month__walk .go__art { order: -1; border-left: 0; border-bottom: 1.5px solid rgba(30, 43, 34, 0.2); }
}
@media (max-width: 640px) {
  .month__eps, .month__wiki { grid-column: 1 / -1; }
  .month__eps, .month__wiki, .month__walk, .askcard { rotate: 0deg; }
  .go__when { gap: 0.8rem; }
  /* the dashboard's night card has more to say than a phone's sky can hold: painting above, words below */
  .month__live { min-height: 0; }
  .month__live .go__art { position: relative; inset: auto; aspect-ratio: 16 / 9; border-bottom: 1.5px solid rgba(0, 0, 0, 0.4); }
  .month__live .go__art::after { background: linear-gradient(transparent 55%, rgba(24, 32, 70, 0.55)); }
  .month__live .go__art img { object-position: 64% 62%; }
  .month__live .go__body { max-width: none; padding: 1.1rem 1.2rem 1.3rem; }
}

@media (max-width: 1100px) {
  .working__grid { grid-template-columns: 1fr; }
  .working__text { max-width: 40rem; }
  .apart { max-width: 46rem; }
}
@media (max-width: 900px) {
  .ask-open__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .ask-open__text, .ask-radio, .chat--hub { grid-column: 1; grid-row: auto; }
  /* the chat straight after the heading, nearly the height of the screen; the radio after it */
  .chat--hub { order: 1; margin-top: 1.4rem; height: clamp(28rem, calc(100svh - 6rem), 44rem); }
  .ask-radio { order: 2; width: min(100%, 30rem); margin: 1.8rem 0 0 -0.6rem; }
  /* at either end of the conversation, a swipe carries on down the page */
  .chat--hub .chat__log { overscroll-behavior: auto; }
  .ask-next__grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .apart { padding-left: 0; }
  .apart__note { position: static; translate: none; width: auto; display: flex; justify-items: start; align-items: center; gap: 0.3rem; margin-bottom: 0.3rem; text-align: left; font-size: 1.25rem; }
  .apart__note svg { order: -1; width: 1.5rem; margin: 0.15rem 0 0; rotate: 80deg; }
  .apart__card { rotate: 0deg; }
}
@media (max-width: 520px) {
  .chat--hub { padding: 0.9rem 0.9rem 0.85rem; }
  .chat__who strong { font-size: 1.1rem; }
  .chat__status { font-size: 0.78rem; }
  .chip--ask { font-size: 0.84rem; }
  .chat__try { flex-direction: column; align-items: stretch; }
  .chat__try-label { align-self: flex-start; }
  .go--night { min-height: 22rem; }
  .go--night .go__art img { object-position: 76% 60%; }
}

/* The advanced track: a gate into the next paddock, swinging open as you scroll ------------------ */
.hub--gate { --sky: #f4f5ea; }
.gate-run { position: relative; background: var(--sky); }
.gate-run__stick { position: relative; display: flex; flex-direction: column; overflow: clip; }
.gate-run.is-live .gate-run__stick { position: sticky; top: var(--stick-top, 0px); }
.gate-run.is-live .gate-run__room { height: 90svh; }
.gate-run__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.gate-run__text { position: relative; z-index: 4; padding-top: clamp(2.2rem, 6.5vh, 4.4rem); }
.gate-run__text h1 { margin-top: 0.85rem; font-size: clamp(2.5rem, min(5.2vw, 8.6vh), 5.4rem); }
.gate-run__text .lede { margin-top: 1rem; max-width: 37rem; color: var(--ink); }
.gate-run__text .eyebrow, .gate-run__text .lede { text-shadow: 0 0 14px var(--sky), 0 0 3px var(--sky); }
.gate-run__cue { display: none; }
.gate-run.is-live .gate-run__cue {
  display: inline-flex; align-items: flex-end; gap: 0.25rem; margin-top: 0.8rem; font-size: 1.5rem; rotate: -2deg;
  opacity: calc(1 - var(--open, 0) * 5);
}
.gate-run__cue svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) { .gate-run__cue svg { animation: nudge 2.2s ease-in-out infinite; } }
@keyframes nudge { 50% { translate: 0 5px; } }

/* the painting: its sky fades up into the page, its foot sits on the bottom of the window
   (on tall screens the script grows it, --scene-h, so it fills the window below the title) */
.gate-scene {
  --ar: 1.3393; container-type: size; flex: none;
  height: var(--scene-h, min(calc(100vw / var(--ar)), calc((100svh - var(--hub-top, 7.4rem)) * 1.2)));
  margin-top: clamp(-9rem, -11vh, -4rem); background-color: var(--sky);
  -webkit-mask-image: linear-gradient(transparent, #000 22%); mask-image: linear-gradient(transparent, #000 22%);
}
.gate-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; }
/* the gate itself, laid over the painting in the painting's own proportions, and hung on its hinge post
   (this painting reaches its edges, so the scene doesn't run it past the sides) */
.scene.gate-scene { --over: 1; }
.gate {
  --pw: max(100cqw, 100cqh * var(--ar)); --ph: calc(var(--pw) / var(--ar));
  position: absolute; z-index: 1; pointer-events: none;
  left: calc((100cqw - var(--pw)) * var(--fx)); top: calc((100cqh - var(--ph)) * var(--fy));
  width: var(--pw); height: var(--ph);
  perspective: calc(var(--pw) * 1.05); perspective-origin: 50% 30.5%;
}
.gate__leaf {
  position: absolute; left: 19.4167%; top: 44.9777%; width: 59.4167%;
  transform-origin: 2.3843% 50%; transform: rotateY(calc(var(--open, 0) * 76deg));
}
.gate-run.is-live .gate__leaf { will-change: transform; }
.gate__leaf img { display: block; width: 100%; height: auto; filter: brightness(calc(1 - var(--open, 0) * 0.18)); }
.gate-scene.is-gl .gate__leaf img { filter: url(#gate-warm) brightness(calc(1 - var(--open, 0) * 0.18)); }
.gate__notes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gate__hand { font-family: var(--f-hand); font-weight: 600; font-size: 66px; fill: var(--ink); paint-order: stroke; stroke: rgba(247, 246, 232, 0.88); stroke-width: 13px; stroke-linejoin: round; }
.gate__ink { fill: none; stroke: var(--ink); stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; }
.gate__shut { opacity: calc(1 - var(--open, 0) * 6); }
.gate__peek { opacity: 0; }
.gate-run.is-live .gate__peek { opacity: clamp(0, calc((var(--open, 0) - 0.86) * 8), 1); }

/* What's through the gate */
.through { background-color: var(--paper); }
.through h2, .track h2 { margin-top: 0.85rem; font-size: var(--hub-h2); }
.adv__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
.adv { position: relative; display: grid; align-content: start; gap: 0.65rem; padding: 1.6rem 1.5rem 1.5rem; }
.adv:nth-child(1) { rotate: -0.6deg; }
.adv:nth-child(2) { rotate: 0.5deg; translate: 0 0.8rem; }
.adv:nth-child(3) { rotate: -0.3deg; }
.adv__no { position: absolute; right: 1.1rem; top: 0.7rem; font-size: 2.6rem; color: rgba(160, 63, 36, 0.72); }
.adv__ico { width: 3.8rem; height: 3.8rem; display: grid; place-items: center; }
.adv__ico svg { width: 2.2rem; height: 2.2rem; }
.adv h3 { font-size: var(--step-2); }
.adv p { color: var(--ink-2); }
.adv .chip { justify-self: start; margin-top: 0.2rem; }
.adv .chip svg { width: 0.95rem; height: 0.95rem; }

/* The way there: the core episodes as posts along the track in */
.track { background-color: var(--paper-2); background-image: var(--grain); background-size: 260px; }
.track__head { max-width: 42rem; }
.track__head .lede { margin-top: 1rem; }
.posts {
  --peg: 3.1rem;
  position: relative; list-style: none; margin: clamp(2.4rem, 5vw, 3.6rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 0.4rem;
}
/* the wheel ruts running through the posts to the gate */
.posts::before, .posts::after {
  content: ""; position: absolute; left: 1%; right: 3%; height: 0; border-top: 3px dashed rgba(138, 58, 34, 0.42); border-radius: 50%;
}
.posts::before { top: calc(var(--peg) * 0.5 - 0.35rem); rotate: -0.4deg; }
.posts::after { top: calc(var(--peg) * 0.5 + 0.45rem); rotate: 0.3deg; }
.post { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; gap: 0.2rem; text-align: center; }
.post__peg {
  width: var(--peg); height: var(--peg); display: grid; place-items: center; margin-bottom: 0.45rem;
  background: var(--c); color: var(--on, #fff8ea); 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: 650; font-size: 1.25rem; rotate: -3deg;
}
.post:nth-child(even) .post__peg { rotate: 2.5deg; }
.post__stage { font-family: var(--f-hand); font-weight: 600; font-size: 1.3rem; line-height: 1; color: var(--earth); }
.post__what { font-family: var(--f-body); font-size: 0.84rem; font-weight: 650; font-variation-settings: normal; letter-spacing: 0; line-height: 1.25; color: var(--ink-2); }
.post__when { font-size: 0.72rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.post.is-done .post__peg::after {
  content: ""; position: absolute; right: -0.45rem; top: -0.45rem; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--sap) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5 L8.6 14 L15 6.5' fill='none' stroke='%231e2b22' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
  border: 1.5px solid var(--ink);
}
.post__peg { position: relative; }
.post.is-now .post__peg { outline: 3px solid var(--wattle); outline-offset: 3px; }
.post__here { position: absolute; top: calc(var(--peg) * -1 + 0.2rem); left: 50%; translate: -30% 0; white-space: nowrap; font-size: 1.35rem; rotate: -5deg; }
.post__here::after { content: ""; position: absolute; left: 28%; top: 100%; width: 0.9rem; height: 1rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; border-radius: 0 0 0 80%; rotate: -12deg; }
.post.is-later .post__peg { background: color-mix(in srgb, var(--c) 32%, #f7f1e3); color: var(--ink-2); box-shadow: 2px 2px 0 rgba(30, 43, 34, 0.45); border-color: rgba(30, 43, 34, 0.6); }
.post.is-later .post__what { color: var(--ink-3); }
.post--gate .post__gate { width: 4.4rem; height: auto; margin-top: -0.9rem; margin-bottom: 0.1rem; overflow: visible; }
.post__timber { fill: #cdbb9a; }
.post__lock { fill: var(--wattle); stroke: var(--ink); stroke-width: 1.6; }
.post--gate .post__stage { color: var(--canopy-2); }
.track__go { --gap: 0.7rem; margin-top: 1.6rem; }

@media (max-width: 900px) {
  .adv__grid { grid-template-columns: 1fr; max-width: 34rem; }
  .adv:nth-child(2) { translate: none; }
  /* the track runs down the page instead */
  .posts { grid-template-columns: 1fr; gap: 1.1rem; max-width: 30rem; }
  .posts::before, .posts::after { left: calc(var(--peg) * 0.5 - 0.35rem); right: auto; top: 1rem; bottom: 1rem; height: auto; width: 0; border-top: 0; border-left: 3px dashed rgba(138, 58, 34, 0.42); rotate: none; }
  .posts::after { left: calc(var(--peg) * 0.5 + 0.45rem); }
  .post { grid-template-columns: var(--peg) minmax(0, 1fr); column-gap: 1rem; justify-items: start; align-items: center; text-align: left; }
  .post__peg { grid-row: 1 / span 3; margin: 0; }
  .post__stage, .post__what, .post__when { grid-column: 2; }
  .post__here { position: static; grid-column: 2; translate: none; order: -1; font-size: 1.25rem; }
  .post__here::after { display: none; }
  .post--gate .post__gate { grid-row: 1 / span 2; width: var(--peg); margin: 0; }
}
@media (max-width: 600px) {
  .gate-run__text { padding-top: 1.9rem; }
  .gate-scene { margin-top: -2.4rem; height: var(--scene-h, clamp(20rem, 100vw, 28rem)); -webkit-mask-image: linear-gradient(transparent, #000 18%); mask-image: linear-gradient(transparent, #000 18%); }
  .gate__notes { display: none; }
}

/* Your details: the member's own, beside their boots and clipboard ---------------------------------- */
/* the painting beside the heading, and what this browser keeps under the clipboard its note points at */
.account { padding-block: clamp(2.6rem, 5vw, 4.6rem) var(--section); }
.account__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); grid-template-areas: "head art" "form device" "credit credit" "small small";
  gap: clamp(1.4rem, 3vw, 2.4rem) clamp(2rem, 5vw, 4.5rem); align-items: start;
}
/* a member's QuorumAI credit shows only where it's switched on (credit.js) */
html[data-member-view] .account__grid:not(.has-credit) { grid-template-areas: "head art" "form device" "small device"; }
.account__head { grid-area: head; }
.account__head h1 { margin-top: 0.85rem; max-width: 12ch; font-size: min(var(--step-5), 5.4rem); }
.account__head .lede { margin-top: 1rem; max-width: 32rem; }
.account__card { grid-area: form; display: grid; gap: 1.1rem; padding: clamp(1.4rem, 3vw, 2.2rem); rotate: -0.3deg; }
.account__email { color: var(--ink-2); overflow-wrap: anywhere; }
.account__email strong { color: var(--ink); }
.account__email a, .account__small a { color: inherit; }
.account__card .check { padding-bottom: 0; font-size: 0.95rem; }
/* a member's, while their details come in */
.account__card.is-loading :is(.input, .check) { opacity: 0.5; }
.account__device { grid-area: device; display: grid; gap: 0.9rem; rotate: 0.35deg; }
/* QuorumAI credit, a ledger on graph paper the width of the page: what's left and today's free
   answers (a row of tally dots) on one side, and more to buy on the other */
.account__credit { grid-area: credit; display: grid; gap: 1.3rem clamp(2rem, 5vw, 4.5rem); padding: clamp(1.4rem, 3vw, 2.2rem); rotate: -0.15deg; }
.credit__have, .credit__buy { display: grid; gap: 0.9rem; align-content: start; }
.credit__left { color: var(--ink-2); }
.credit__left strong { margin-right: 0.1em; font-family: var(--f-display); font-size: var(--step-5); font-weight: 560; line-height: 0.95; letter-spacing: -0.015em; color: var(--canopy); font-variant-numeric: lining-nums; }
.credit__worth { display: inline-block; margin-left: 0.35em; font-family: var(--f-hand); font-size: 1.4rem; font-weight: 600; line-height: 1; color: var(--earth); rotate: -3deg; translate: 0 -0.35em; }
.credit__worth:empty { display: none; }
[data-credit-said]:focus { outline: none; }
.credit__free { display: grid; gap: 0.5rem; font-family: var(--f-hand); font-size: 1.35rem; font-weight: 600; line-height: 1.1; color: var(--earth); }
.credit__tally { display: flex; flex-wrap: wrap; gap: 0.32rem; max-width: 22rem; }
.credit__tally:empty { display: none; }
.credit__tally i { width: 0.78rem; height: 0.78rem; border-radius: 52% 46% 55% 45%; background: var(--sap); box-shadow: inset 0 0 0 1.5px rgba(31, 77, 46, 0.3); rotate: calc(var(--r, 0) * 1deg); }
.credit__tally i:nth-child(3n + 1) { --r: 14; }
.credit__tally i:nth-child(4n + 2) { --r: -11; }
.credit__tally i.is-used { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(30, 43, 34, 0.24); }
.credit__packs .btn:disabled { opacity: 0.6; cursor: default; }
.credit__bought { list-style: none; margin: 0; padding: 0; font-size: 0.92rem; color: var(--ink-2); }
.credit__bought li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2rem 1rem; padding: 0.45rem 0; border-top: 1px dashed rgba(30, 43, 34, 0.2); }
.credit__bought time { color: var(--ink-3); }
.account__h2 { font-size: var(--step-2); }
.account__kept { font-weight: 650; }
.account__leaving { margin: 0; padding: 0.7rem 0.9rem; background: #fbf2d6; border-radius: 8px; }
.account__kept:empty { display: none; }
.account__kept:focus { outline: none; }
.account__sure { display: grid; gap: 0.8rem; }
.account__sure p:focus { outline: none; }
/* keeping them safe: a file to save, and one to bring back */
.account__keep { display: grid; gap: 0.8rem; padding-top: 1rem; border-top: 1px dashed rgba(30, 43, 34, 0.24); }
.account__keep > * { margin: 0; }
.account__h3 { font-size: var(--step-1); }
.account__saved { font-weight: 650; color: var(--ink-2); }
.account__saved:empty { display: none; }
.account__small { grid-area: small; }
.account__side { grid-area: art; align-self: end; }
/* painted straight onto the page: the paper of the painting is the paper of the page */
.account__art { aspect-ratio: 2345 / 1513; margin: 0; }
.account__art img { mix-blend-mode: multiply; }
.account__art .art__over .art__hand { stroke: var(--paper); }
/* the clipboard's note answers once this browser's notes are cleared */
.clip-says text { transition: opacity 0.4s ease; }
.clip-says__done { opacity: 0; }
.is-cleared .clip-says__hi { opacity: 0; }
.is-cleared .clip-says__done { opacity: 1; transition-delay: 0.2s; }
@media (max-width: 900px) {
  .account__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "form" "credit" "device" "small" "art"; }
  html[data-member-view] .account__grid:not(.has-credit) { grid-template-areas: "head" "form" "device" "small" "art"; }
  .account__art { width: min(100%, 30rem); margin: 0 auto; }
}
@media (min-width: 901px) {
  .account__credit { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
}

/* A little status line for pretend buttons ------------------------------------------ */
/* as wide as its words, to its max-width: set from left 50% it would stop at half the screen, six lines on a phone */
.toast {
  position: fixed; left: 50%; bottom: calc(3.8rem + env(safe-area-inset-bottom, 0px)); z-index: 80;
  width: max-content; max-width: min(92vw, 30rem); padding: 0.75rem 1.1rem; border-radius: 14px; text-align: center;
  background: var(--ink); color: var(--paper); font-weight: 650; font-size: 0.92rem; box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.6);
  opacity: 0; translate: -50% 12px; pointer-events: none; transition: opacity 0.3s ease, translate 0.3s var(--ease-grow);
}
.toast:empty { padding: 0; }
.toast.is-on { opacity: 1; translate: -50% 0; }