/* ==========================================================================
   MILA INNOVATIONS: the one stylesheet for every page (ML-D26)
   --------------------------------------------------------------------------
   Every colour, size and duration is a token in tokens.css. The structure is
   GrowOne Africa's (a photograph, what is offered, the steps, the questions);
   the grammar is Mila's: flat grounds, hairlines, corners of 2px at most, no
   shadow, no gradient, no icon.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--quiet-on-paper) transparent;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
html:has(dialog[open]) { overflow: hidden; background: var(--ink); }
body {
  margin: 0; background: var(--limewash); color: var(--ink);
  font-family: var(--text); font-weight: var(--w-body); font-size: var(--size-body); line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ol, ul, figure { margin: 0; padding: 0; font: inherit; }
ol, ul { list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
::selection { background: var(--soil); color: var(--limewash); }
:focus-visible { outline: var(--bar) solid currentColor; outline-offset: var(--nudge); }
[tabindex="-1"]:focus { outline: none; }
[id] { scroll-margin-top: var(--header-h); }
[hidden] { display: none !important; }
.sr { position: absolute; width: var(--hair); height: var(--hair); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lbl {
  font-family: var(--display); font-stretch: var(--wide); font-weight: var(--w-label);
  font-size: var(--size-label); letter-spacing: var(--track-label); line-height: 1.5; text-transform: uppercase;
}
.skip {
  position: absolute; z-index: 30; left: var(--edge); top: var(--space-2);
  padding: var(--space-1) var(--space-2); background: var(--ink); color: var(--limewash);
  text-decoration: none; transform: translateY(-300%);
}
.skip:focus { transform: none; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--edge); }
.go { display: inline-block; transition: transform var(--dur-quick) var(--ease-out); }
a:hover > .go, a:hover .go { transform: translateX(var(--nudge)); }

/* The header: the name and the menu, on every page */
.top { position: sticky; top: 0; z-index: 10; background: var(--hemp); color: var(--limewash); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--header-h); }
.brand { display: inline-flex; align-items: baseline; gap: var(--space-1); text-decoration: none; }
/* The family's own lockup (ADR-0094): set by height alone, never re-set in type. The header and
   menu wear the bent-paper mark the Founder approved (ML-D97). */
.brand-mark { display: block; height: var(--brand-h); width: auto; }
.top-nav { display: none; }
.top-nav a { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; }
/* The pages' words in the family's face, as the board draws them: sentence
   case at the medium weight, a hairline between each. The hairline is drawn
   apart from the link, so every door keeps its full 48 px height. */
.top-nav.lbl { font-stretch: normal; font-size: var(--size-small); letter-spacing: 0; text-transform: none; }
.top-nav > * { position: relative; }
.top-nav > * + * { padding-left: var(--space-3); }
.top-nav > * + *::before {
  content: ""; position: absolute; left: 0; top: calc(50% - var(--space-3) / 2);
  height: var(--space-3); border-left: var(--hair) solid var(--rule-on-hemp);
}
.nav-pair { display: inline-flex; align-items: center; }
/* The product beside the word for its people is its own door: the word opens
   the page about it, the mark signs in to it. Limewash laid at the quiet
   strength of the hemp ground, so the word leads and the mark follows; on
   hover the mark comes up to full strength and takes the words' underline. */
.nav-app { position: relative; padding-left: var(--space-1); }
.nav-mark { height: var(--nav-mark-h); width: auto; opacity: var(--mark-quiet); transition: opacity var(--dur-quick) var(--ease-out); }
.nav-app::after, .foot-app::after {
  content: ""; position: absolute; right: 0; top: calc(50% + var(--nav-mark-h) / 2 + var(--nudge));
  border-top: var(--hair) solid currentColor; opacity: 0;
}
.nav-app::after { left: var(--space-1); }
.nav-app:hover .nav-mark, .nav-app:focus-visible .nav-mark { opacity: 1; }
.nav-app:hover::after { opacity: 1; }
/* A product's mark stands where its label stood. The label beside it takes the
   mark's height, so the headings under them stay on one line. */
.role-mark, .role > .lbl { display: flex; align-items: flex-end; min-height: var(--role-mark-h); }
.role-mark img { display: block; height: var(--role-mark-h); width: auto; }
/* THE TWO NAMES ON ONE LINE. Wherever kushOS's and Rootstock's wide lockups
   stand side by side, their names share a baseline: set at one height, the
   name of kushOS stood a --graft-drop higher than Rootstock's and the two read
   as two heights. kushOS is let down by that much, its stem reaching below the
   line as Rootstock's symbol reaches above it; Rootstock's name already sits
   on the line the mark stands on. The mark files are not touched. */
.role-mark img[src*="kushos/wide-"] { position: relative; top: calc(var(--role-mark-h) * var(--graft-drop)); }
.cell-mark { display: flex; align-items: center; min-height: calc(var(--size-label) * 1.5); }
.cell-mark img { display: block; height: var(--cell-mark-h); width: auto; }
.top-nav a:hover, .top-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: .5em; }
.menu-btn, .menu-close {
  width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: var(--corner);
  display: grid; place-items: center; cursor: pointer;
}
.menu-btn { margin-right: calc(var(--space-1) * -1); background: transparent; color: var(--limewash); }
.menu-btn:hover { background: var(--rule-on-hemp); }
html:not(.js) .menu-btn { display: none; }
.menu-btn:focus-visible, .menu-close:focus-visible { outline-offset: calc(var(--nudge) * -1); }
.bars { position: relative; width: var(--bar-w); height: var(--bar-gap); }
.bars::before, .bars::after {
  content: ""; position: absolute; left: 0; height: var(--bar); background: currentColor;
  transition: width var(--dur-quick) var(--ease-out);
}
.bars::before { top: 0; width: 100%; }
.bars::after { bottom: 0; width: 60%; }
.menu-btn:hover .bars::after { width: 100%; }

/* The menu */
.menu {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; border: 0;
  padding: 0 0 calc(var(--space-4) + env(safe-area-inset-bottom));
  flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  background: var(--ink); color: var(--limewash);
  opacity: 0;
  transition: opacity var(--dur-menu) var(--ease-out), overlay var(--dur-menu) allow-discrete, display var(--dur-menu) allow-discrete;
}
.menu[open] { display: flex; opacity: 1; }
@starting-style { .menu[open] { opacity: 0; } }
.menu::backdrop { background: transparent; }
.menu > .wrap { display: flex; flex-direction: column; flex: 1 0 auto; }
.menu-top { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); }
.menu-close { margin-right: calc(var(--space-1) * -1); background: var(--limewash); color: var(--ink); }
.x { position: relative; width: var(--bar-w); height: var(--bar-w); }
.x::before, .x::after {
  content: ""; position: absolute; left: 0; top: calc(50% - var(--bar) / 2);
  width: 100%; height: var(--bar); background: currentColor;
}
.x::before { transform: rotate(45deg); }
.x::after { transform: rotate(-45deg); }
.menu-nav { display: grid; justify-items: start; margin-top: var(--space-5); }
.menu-nav a {
  padding-block: var(--space-1); text-decoration: none;
  font-family: var(--display); font-weight: var(--w-name); font-size: var(--size-menu);
  line-height: 1.08; letter-spacing: var(--track-name);
}
.menu-nav a:hover, .menu-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: .12em; }
.menu-staff { width: 100%; max-width: var(--measure); margin-top: auto; padding-top: var(--space-5); }
.menu-staff .lbl { margin-bottom: var(--space-2); color: var(--quiet-on-ink); }
/* Staff sign-in is the products' lockups at a quiet size, each with what it
   is for beside it, on one baseline: never a name re-set as large type. */
.menu-staff .door {
  grid-template-columns: auto 1fr auto; grid-template-areas: "name note go";
  align-items: baseline; column-gap: var(--space-2);
  padding-block: var(--space-2) calc(var(--space-2) + var(--door-mark-h) * var(--graft-drop) * .5);
}
.menu-staff .door-go { font-size: var(--size-h3); }
.door {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name go" "note go";
  align-items: center; min-height: var(--tap); padding: var(--space-2) 0;
  border-top: var(--hair) solid var(--rule-on-ink); text-decoration: none;
}
.door:last-child { border-bottom: var(--hair) solid var(--rule-on-ink); }
.door-name { grid-area: name; font-family: var(--display); font-weight: var(--w-door); font-size: var(--size-door); line-height: 1.1; }
/* kushOS's and Rootstock's doors carry the products' wide lockups, drawn at
   600, never the names re-set at the door's weight. */
.door-mark { display: block; height: var(--door-mark-h); width: auto; }
.door-mark[src*="kushos/wide-"] { position: relative; top: calc(var(--door-mark-h) * var(--graft-drop)); }
.door-note { grid-area: note; font-style: italic; color: var(--quiet-on-ink); }
.door-go { grid-area: go; font-family: var(--display); font-weight: var(--w-door); font-size: var(--size-door); transition: transform var(--dur-quick) var(--ease-out); }
.door:hover .door-go { transform: translateX(var(--nudge)); }
.door:hover .door-name { text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: .12em; }
/* On a phone the three staff doors stay above the fold: under 900 px of
   height the page list steps down a size, so all seven pages and all three
   doors fit a 390 x 844 screen without scrolling. */
@media (max-height: 900px) {
  .menu-nav { margin-top: var(--space-2); }
  .menu-nav a { display: flex; align-items: center; min-height: var(--tap); padding-block: 0; font-size: var(--size-menu-short); }
  .menu-staff { padding-top: var(--space-3); }
  .menu-staff .lbl { margin-bottom: var(--space-1); }
  .menu-staff .door { padding-block: var(--space-1) calc(var(--space-1) + var(--door-mark-h) * var(--graft-drop) * .5); }
}
.menu-nav a, .door { transition: opacity var(--dur-menu) var(--ease-out), translate var(--dur-menu) var(--ease-out); }
.menu-nav a:nth-child(2), .door:nth-of-type(2) { transition-delay: var(--stagger); }
.menu-nav a:nth-child(3) { transition-delay: calc(var(--stagger) * 2); }
.menu-nav a:nth-child(4) { transition-delay: calc(var(--stagger) * 3); }
.menu-nav a:nth-child(5) { transition-delay: calc(var(--stagger) * 4); }
.menu-nav a:nth-child(6) { transition-delay: calc(var(--stagger) * 5); }
.menu-nav a:nth-child(7) { transition-delay: calc(var(--stagger) * 6); }
@starting-style {
  .menu[open] .menu-nav a, .menu[open] .door { opacity: 0; translate: 0 var(--lift-small); }
}

/* A page's photograph, with its words laid on a flat veil */
.hero-photo {
  position: relative; display: grid; align-items: end;
  min-height: max(var(--hero-min), var(--hero-photo-h));
  background: var(--hemp); color: var(--limewash); overflow: hidden;
}
.hero-photo > picture { position: absolute; inset: 0; }
.hero-photo > picture > img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: var(--veil); }
.hero-photo.strong::after { background: var(--veil-strong); }
.hero-photo > .wrap { position: relative; z-index: 1; padding-block: var(--space-6) var(--space-5); }
.hero-photo .lbl { margin-bottom: var(--space-2); }
.hero-photo h1 {
  max-width: 13em;
  font-family: var(--display); font-weight: var(--w-heading); font-size: var(--size-hero);
  line-height: 1.02; letter-spacing: var(--track-name); text-wrap: balance;
}
.lede { max-width: 36rem; margin-top: var(--space-3); font-size: var(--size-lead); line-height: 1.5; text-wrap: pretty; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: var(--tap); padding: 0 var(--space-3);
  border: var(--hair) solid currentColor; border-radius: var(--corner); text-decoration: none;
  font-family: var(--display); font-stretch: var(--wide); font-weight: var(--w-label);
  font-size: var(--size-label); letter-spacing: var(--track-label); text-transform: uppercase;
  background: transparent; color: inherit; cursor: pointer;
  transition: background-color var(--dur-quick) var(--ease-out);
}
/* A product's small lockup inside a button's capitals, never its name re-set
   in them (ADR-0081 D5). */
.btn-mark { display: block; height: var(--btn-mark-h); width: auto; }
.btn-solid { background: var(--soil); border-color: var(--soil); color: var(--limewash); }
.btn-solid:hover { background: color-mix(in srgb, var(--soil) 84%, var(--ink)); }
.btn-line:hover { background: color-mix(in srgb, currentColor 12%, transparent); }

/* Where you are */
.crumbs { border-bottom: var(--hair) solid var(--rule-on-paper); color: var(--quiet-on-paper); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-1); padding-block: var(--space-2); }
.crumbs li + li::before { content: "/"; margin-right: var(--space-1); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* Sections */
.sec { padding-block: var(--section-pad); }
.on-paper { background: var(--limewash); color: var(--ink); }
.on-hemp { background: var(--hemp); color: var(--limewash); }
.sec-head { display: grid; gap: var(--space-2); max-width: 46rem; margin-bottom: var(--space-5); }
.sec-head .lbl, .head { color: var(--quiet-on-paper); }
.on-hemp .sec-head .lbl, .on-hemp .head { color: var(--quiet-on-hemp); }
.h2 {
  font-family: var(--display); font-weight: var(--w-heading); font-size: var(--size-h2);
  line-height: 1.06; letter-spacing: var(--track-name); text-wrap: balance;
}
.intro { max-width: var(--measure); font-size: var(--size-lead); line-height: 1.5; text-wrap: pretty; }
.link {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap);
  font-family: var(--display); font-stretch: var(--wide); font-weight: var(--w-label);
  font-size: var(--size-label); letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none;
}
.link:hover .link-text { text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: .3em; }

/* A photograph beside its words */
.duo { display: grid; gap: var(--space-4); align-items: center; }
.duo img, .door-card img { width: 100%; aspect-ratio: var(--ratio-photo); object-fit: cover; border-radius: var(--corner); }
.duo-text { display: grid; gap: var(--space-2); justify-items: start; }
.duo-text .lbl { color: var(--quiet-on-paper); }
.on-hemp .duo-text .lbl { color: var(--quiet-on-hemp); }

/* The products themselves: true screens at 2x, flat, a hairline round each,
   2 px corners, no device drawn round them and no shadow. The computer and
   the phone stand at one height, so their widths keep the screens' ratios
   (1280 x 800 beside 390 x 844: 3.46 to 1). */
.frames { display: grid; gap: var(--space-5); align-items: start; }
.frame { display: grid; gap: var(--space-2); align-content: start; }
.frame img { width: 100%; height: auto; border: var(--hair) solid var(--rule-on-paper); border-radius: var(--corner); background: var(--limewash); }
.on-hemp .frame img { border-color: var(--rule-on-hemp); }
.frame figcaption { max-width: var(--measure); font-size: var(--size-small); line-height: 1.5; color: var(--quiet-on-paper); text-wrap: pretty; }
.on-hemp .frame figcaption { color: var(--quiet-on-hemp); }
/* On a phone the phone's screen comes first: it is the one read at its own
   size there. From 900 px the computer leads, as on the board. */
.frame-phone { order: -1; max-width: var(--frame-phone-max); }
.frame-wide { margin-top: var(--space-6); }

/* The two doors on the home page */
.doors { display: grid; gap: var(--space-5); }
.door-card { display: grid; gap: var(--space-2); align-content: start; justify-items: start; }
.door-card img { margin-bottom: var(--space-1); }
.door-card .lbl { color: var(--quiet-on-paper); }
.door-card h3 { font-family: var(--display); font-weight: var(--w-heading); font-size: var(--size-h2); line-height: 1; letter-spacing: var(--track-name); }
.door-card p { max-width: var(--measure); }

/* A line of plain fact between sections */
.strip { padding: var(--space-3) var(--edge); background: var(--hemp); color: var(--quiet-on-hemp); text-align: center; }

/* Role cards: clubs, growers, members */
.roles { display: grid; gap: var(--space-5); }
.role { display: grid; gap: var(--space-2); align-content: start; justify-items: start; padding-top: var(--space-3); border-top: var(--bar) solid var(--ink); }
.role .lbl { color: var(--quiet-on-paper); }
.role h3 { font-family: var(--display); font-weight: var(--w-heading); font-size: var(--size-h2); line-height: 1; letter-spacing: var(--track-name); }
.role ul { width: 100%; margin-top: var(--space-1); border-top: var(--hair) solid var(--rule-on-paper); }
.role li { padding-block: var(--space-1); border-bottom: var(--hair) solid var(--rule-on-paper); }
.cells.stack { grid-template-columns: 1fr; }

/* Cells: what a platform does, who may apply, what the standard asks */
.cells { display: grid; border-top: var(--hair) solid var(--rule-on-paper); }
.cell {
  display: grid; gap: var(--space-1); align-content: start;
  padding: var(--space-3) 0 var(--space-4); border-bottom: var(--hair) solid var(--rule-on-paper);
}
.cell .lbl { color: var(--quiet-on-paper); }
.cell h3 { font-family: var(--display); font-weight: var(--w-h3); font-size: var(--size-h3); line-height: 1.2; }
.cell p { max-width: var(--measure); text-wrap: pretty; }
.cell .mark { font-family: var(--display); font-weight: var(--w-name); font-size: var(--size-step); line-height: .9; }
.linkcells a { display: grid; gap: var(--space-1); align-content: start; height: 100%; text-decoration: none; }
.linkcells a:hover h3 { text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: .15em; }
/* A track is a door: its line says where it goes, and the choice carries into
   Rootstock's application. */
.linkcells .link { margin-top: var(--space-1); }
.linkcells a:hover .link-text { text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: .3em; }
.linkcells a:hover .go { transform: translateX(var(--nudge)); }
.on-hemp .cells, .on-hemp .cell { border-color: var(--rule-on-hemp); }
.on-hemp .cell .lbl { color: var(--quiet-on-hemp); }

/* Steps: the way in, in order */
.steps { display: grid; border-top: var(--hair) solid var(--rule-on-paper); }
.steps li {
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-3); row-gap: var(--space-1);
  padding-block: var(--space-3); border-bottom: var(--hair) solid var(--rule-on-paper);
}
.steps .n {
  grid-row: span 2; min-width: 1.1em;
  font-family: var(--display); font-weight: var(--w-name); font-size: var(--size-step); line-height: .85;
}
.steps h3 { font-family: var(--display); font-weight: var(--w-h3); font-size: var(--size-h3); line-height: 1.2; }
.steps p { max-width: var(--measure); text-wrap: pretty; }
.on-hemp .steps, .on-hemp .steps li { border-color: var(--rule-on-hemp); }

/* The ladder: what a supplier may supply, rung by rung */
.ladder { display: grid; }
.ladder li {
  --r: 0;
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-3); row-gap: var(--space-1);
  margin-left: calc(var(--r) * var(--rung-step));
  padding-block: var(--space-3); border-top: var(--hair) solid var(--rule-on-paper);
}
.on-hemp .ladder li { border-color: var(--rule-on-hemp); }
.ladder li:nth-child(2) { --r: 1; }
.ladder li:nth-child(3) { --r: 2; }
.ladder li:nth-child(4) { --r: 3; }
.ladder .n { grid-row: span 2; font-family: var(--display); font-weight: var(--w-name); font-size: var(--size-step); line-height: .85; }
.ladder h3 { font-family: var(--display); font-weight: var(--w-h3); font-size: var(--size-h3); line-height: 1.2; }
.ladder p { max-width: var(--measure); color: var(--quiet-on-paper); }
.on-hemp .ladder p { color: var(--quiet-on-hemp); }

/* Questions, answered in place */
.faq { border-top: var(--hair) solid var(--rule-on-paper); max-width: 60rem; }
.faq details { border-bottom: var(--hair) solid var(--rule-on-paper); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: var(--tap); padding-block: var(--space-3); cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: var(--w-h3); font-size: var(--size-h3); line-height: 1.25;
}
.faq summary::-webkit-details-marker { display: none; }
.pm { position: relative; flex: none; width: var(--pm); height: var(--pm); transition: transform var(--dur-quick) var(--ease-out); }
.pm::before, .pm::after {
  content: ""; position: absolute; left: 0; top: calc(50% - var(--bar) / 2);
  width: 100%; height: var(--bar); background: currentColor;
}
.pm::after { transform: rotate(90deg); }
.faq details[open] .pm { transform: rotate(45deg); }
.on-hemp .faq, .on-hemp .faq details { border-color: var(--rule-on-hemp); }
.answer { display: grid; gap: var(--space-2); max-width: var(--measure); padding-bottom: var(--space-4); text-wrap: pretty; }

/* A hero of words alone, for the pages whose picture is still to be made */
.on-ink { background: var(--ink); color: var(--limewash); }
.on-ink .head, .on-ink .sec-head .lbl { color: var(--quiet-on-ink); }
.type-hero { display: grid; align-items: end; min-height: var(--type-hero-h); padding-block: var(--space-6) var(--space-5); }
.type-hero-h {
  max-width: 12em;
  font-family: var(--display); font-weight: var(--w-name); font-size: var(--size-type-hero);
  line-height: .98; letter-spacing: var(--track-name); text-wrap: balance;
}
.type-hero-h .amp { font-family: var(--text); font-style: italic; font-weight: var(--w-statement); }
/* The two products' own lockups, never their names re-set in type (ADR-0081
   D5; the marks README §7): kushOS and Rootstock at 600 as the Atelier drew
   them, joined by Newsreader's "and". Set by height alone. */
.type-hero-marks {
  /* On one baseline: the names and Newsreader's "and" (see "The two names on
     one line"); kushOS's stem hangs below it, so the row keeps room for it. */
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .3em;
  row-gap: calc(.2em + .72em * var(--name-foot)); padding-bottom: calc(.72em * var(--name-foot));
  margin-top: var(--space-2); font-size: var(--size-type-hero); line-height: 1;
}
.type-hero-marks img { display: block; height: .72em; width: auto; }
/* An image's baseline is its foot; each name stands --name-foot above it, so both drop by that much */
.type-hero-marks img[src*="/wide-"] { position: relative; top: calc(.72em * var(--name-foot)); }
.type-hero-marks .amp { font-family: var(--text); font-style: italic; font-weight: var(--w-statement); font-size: .46em; }

/* The clubs a member can join: a name, its town, and its own application */
.clubs { border-top: var(--hair) solid var(--rule-on-hemp); }
.club {
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-1);
  padding-block: var(--space-3); border-bottom: var(--hair) solid var(--rule-on-hemp);
}
.club-name { font-family: var(--display); font-weight: var(--w-h3); font-size: var(--size-h3); line-height: 1.2; }
.club-town { color: var(--quiet-on-hemp); }
.clubs-else { max-width: var(--measure); margin-top: var(--space-4); font-size: var(--size-lead); line-height: 1.5; text-wrap: pretty; }
.clubs-else a { text-decoration-thickness: var(--hair); text-underline-offset: .2em; }
@media (min-width: 700px) {
  .club { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--gutter); align-items: center; }
  .club-go { grid-column: 2; grid-row: 1 / span 2; }
}

/* Contact: one question, one address */
.contact-hero { padding-block: var(--space-6); }
.contact-h { max-width: 14em; font-size: var(--size-hero); }
.contact-hero .intro { margin-top: var(--space-3); }
.contact-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-5); }
.copy { min-width: var(--copy-w); }   /* "Copy address" and "Copied" at one width */
.contact-mail {
  display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1);
  font-family: var(--display); font-weight: var(--w-heading); font-size: var(--size-mail);
  line-height: 1.15; letter-spacing: var(--track-name); overflow-wrap: anywhere;
  text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: .18em;
}

/* The last word on a page: hemp, so its one soil element is the next step
   (ADR-0081: one soil element per screen, and it is always the next step).
   After a hemp section a hairline marks where the band begins. */
.band { padding-block: var(--space-6); background: var(--hemp); color: var(--limewash); }
.on-hemp + .band { border-top: var(--hair) solid var(--rule-on-hemp); }
.band .h2 { max-width: 15em; }

/* The footer */
.foot {
  padding-block: var(--space-6) calc(var(--space-5) + env(safe-area-inset-bottom));
  background: var(--ink); color: var(--quiet-on-ink); font-size: var(--size-small); line-height: 1.6;
}
.foot .wrap { display: grid; gap: var(--space-5); }
.foot-cols { display: grid; gap: var(--space-4); }
.foot h2 { margin-bottom: var(--space-1); color: var(--quiet-on-ink); }
.foot a { color: var(--limewash); text-decoration-thickness: var(--hair); text-underline-offset: .25em; }
.foot li a { display: inline-block; padding-block: var(--space-1); }
.foot li .foot-app { position: relative; display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap); padding-block: 0; text-decoration: none; }
.foot-app img { display: block; height: var(--cell-mark-h); width: auto; }
/* Underlined at rest, as every link in the footer is. */
.foot-app::after { left: 0; opacity: 1; }
.foot-name { color: var(--limewash); font-size: var(--size-lead); }
.foot-fine { display: grid; gap: var(--space-1); padding-top: var(--space-3); border-top: var(--hair) solid var(--rule-on-ink); }

/* ABOUT: the planted name, hemp above the line, soil below it */
.hero {
  position: relative; display: flex; flex-direction: column;
  min-height: max(var(--hero-min), calc(100svh - var(--header-h)));
  background: var(--hemp); color: var(--limewash);
}
.sky {
  position: relative; z-index: 2; flex: 1 0 auto;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-5) var(--edge) 0;
}
.name {
  margin-left: var(--name-indent);
  font-family: var(--display); font-weight: var(--w-name); font-size: var(--size-name);
  line-height: .8; letter-spacing: var(--track-name); white-space: nowrap;
  text-box: trim-both cap alphabetic;
  clip-path: inset(-50% -10% -.03em -10%);
}
.ch { display: inline-block; }
html.js .ch { transform: translateY(110%); }
html.ready .ch {
  transform: none;
  animation: rise var(--dur-rise) var(--ease-out) both;
  animation-delay: calc(var(--i) * var(--stagger));
}
@keyframes rise { from { transform: translateY(110%); } }
.probe { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.soil {
  position: relative; flex: 0 0 var(--soil-h);
  display: flex; align-items: flex-end;
  padding: 0 var(--edge) calc(var(--space-4) + env(safe-area-inset-bottom));
  background: var(--soil);
}
.roots { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; color: var(--root-tone); }
.meaning { position: relative; z-index: 2; }
.meaning .lbl { margin-bottom: var(--space-1); color: var(--quiet-on-soil); }
.meaning-text { font-weight: var(--w-statement); font-size: var(--size-meaning); line-height: 1.2; }
/* A statement is display type, in the family's one grotesk like every other
   heading (ADR-0081 D5). Its emphasis is Newsreader's italic, the pairing's
   own, as the platform hero's "and" is. */
.statement {
  max-width: var(--statement-max);
  font-family: var(--display); font-weight: var(--w-heading); font-size: var(--size-statement);
  line-height: 1.04; letter-spacing: var(--track-name); text-wrap: balance;
}
.statement i { font-family: var(--text); font-weight: var(--w-statement); letter-spacing: var(--track-statement); }
.split { display: grid; row-gap: var(--space-2); }
.split > .prose { margin-top: calc(var(--space-5) - var(--space-2)); }
.prose {
  display: grid; gap: var(--space-3); max-width: var(--measure); margin-top: var(--space-5);
  font-size: var(--size-lead); line-height: 1.5; text-wrap: pretty;
}
.parts { margin-top: var(--space-5); border-top: var(--hair) solid var(--rule-on-hemp); }
.parts li {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  column-gap: var(--space-3); row-gap: var(--space-1);
  padding: var(--space-2) 0 var(--space-3); border-bottom: var(--hair) solid var(--rule-on-hemp);
}
.part {
  font-family: var(--display); font-weight: var(--w-name); font-size: var(--size-part);
  line-height: .9; letter-spacing: var(--track-name);
}
.use { font-style: italic; font-size: var(--size-lead); color: var(--quiet-on-hemp); }
.coda { max-width: var(--measure); margin-top: var(--space-5); font-size: var(--size-lead); }
.place {
  display: grid; row-gap: var(--space-2);
  padding: var(--space-3) 0 var(--space-5); border-top: var(--hair) solid var(--rule-on-paper);
}
.place-head { display: flex; justify-content: space-between; gap: var(--space-2); color: var(--quiet-on-paper); }
.place-head .now { color: var(--ink); }
.place h3 { font-family: var(--display); font-weight: var(--w-name); line-height: .92; letter-spacing: var(--track-name); }
.p1 h3 { font-size: var(--place-1); }
.p2 h3 { font-size: var(--place-2); }
.p3 h3 { font-size: var(--place-3); }
.p4 h3 { font-size: var(--place-4); }
.place-text { max-width: var(--measure); text-wrap: pretty; }

/* Words settle in as they come into view: tied to the scroll, never to a clock */
@keyframes settle { from { opacity: 0; translate: 0 var(--lift); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal] { animation: settle linear both; animation-timeline: view(); animation-range: entry 5% entry 55%; }
  }
}

/* The story, the home page (2026-10-16), in the Cinematic mode ruled for it
   (ADR-0091, proposed; ML-D93): glass over the scene. The scene is fixed
   behind the words. Each chapter's card holds while the camera rests on its
   place; the gap between chapters is open scene, where the camera travels.
   On a phone the card holds at the foot of the screen, the scene above it. */
.story { background: var(--ink); color: var(--limewash); }
.stage { position: fixed; inset: 0; display: block; width: 100%; height: 100%; }
.no-gl .stage { display: none; }
.no-gl .story { background: var(--hemp); }
.story .top { position: fixed; inset: 0 0 auto; }
/* The footer sits above the fixed scene (a positioned canvas would paint over a static footer) and closes the page on solid ink */
.story .foot { position: relative; z-index: 1; border-top: var(--hair) solid var(--rule-on-ink); }
.story main { position: relative; }
.chapter { padding-block: var(--story-gap); }
.chapter:first-child { padding-top: 0; }
.hold { display: flex; flex-direction: column; min-height: var(--story-hold); padding-inline: var(--space-2); }
.card {
  position: sticky; bottom: var(--space-2); margin-top: auto;
  max-width: var(--story-card-w); padding: var(--space-3);
}
.card > .lbl { margin-bottom: var(--space-2); color: var(--quiet-on-ink); }
.card .h2 + p, .card p + p { margin-top: var(--space-2); }
.card p { text-wrap: pretty; }
.card-hero { max-width: none; padding-inline: 0; background: none; }
.card-hero h1 {
  max-width: 9em;
  font-family: var(--display); font-weight: var(--w-heading); font-size: var(--size-statement);
  line-height: 1; letter-spacing: var(--track-name); text-wrap: balance;
}
.cue { margin-top: var(--space-4); color: var(--quiet-on-ink); }
.ways { display: grid; margin-top: var(--space-3); border-top: var(--hair) solid var(--rule-on-ink); }
.ways a {
  display: flex; align-items: center; justify-content: space-between; min-height: var(--tap);
  border-bottom: var(--hair) solid var(--rule-on-ink); text-decoration: none;
  font-family: var(--display); font-weight: var(--w-h3);
}
.rail { display: none; }
.story .top, .card:not(.card-hero), .rail {
  background: var(--story-glass);
  -webkit-backdrop-filter: blur(var(--story-blur)); backdrop-filter: blur(var(--story-blur));
  box-shadow: var(--story-shadow);
}
.card:not(.card-hero), .rail { border: var(--hair) solid var(--rule-on-ink); border-radius: var(--story-round); }
/* The OnlyGramz room's words (ML-D94), set as its own room landing sets
   them: no panel, straight on the void; an act label, the act's name in
   brass, the large line, the whisper, the attribution. */
.card.card-og {
  background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  max-width: var(--story-card-w); color: var(--og-paper); font-family: var(--og-face); font-weight: 300;
}
.og-act, .og-society, .og-attrib { font-size: var(--og-size-chrome); font-weight: 400; letter-spacing: var(--og-track-chrome); text-transform: uppercase; }
.og-act { margin-bottom: var(--space-1); color: var(--quiet-on-void); }
.og-society { margin-bottom: var(--space-4); color: var(--og-brass); }
.og-large { max-width: 14ch; font-size: var(--og-size-large); font-weight: 200; line-height: var(--og-lead-large); letter-spacing: var(--og-track-large); text-wrap: balance; }
.og-stop { color: var(--og-brass); }
.og-whisper { max-width: 42ch; margin-top: var(--space-4); font-size: var(--og-size-whisper); line-height: var(--og-lead-whisper); letter-spacing: var(--og-track-body); color: var(--og-prose); }
.og-attrib { margin-top: var(--space-3); letter-spacing: var(--og-track-label); line-height: 1.9; color: var(--quiet-on-void); }
@media (max-width: 899px) {
  .card.card-og { background: var(--og-veil); }
  /* The last card is taller than a phone: pinned, it would hide the lanes it
     speaks of. It waits at the foot of its chapter, so the lanes show first. */
  .chapter:last-child .card { position: relative; bottom: auto; }
}
@media (min-width: 900px) {
  .hold { padding-inline: var(--edge); }
  .card { top: var(--story-card-top); bottom: auto; margin-top: 0; padding: var(--space-4); }
  .chapter:first-child .hold { padding-top: var(--story-card-top); }
  .card-hero { padding-inline: 0; }
  .rail {
    position: fixed; z-index: 5; right: var(--edge); top: 50%; translate: 0 -50%;
    display: grid; gap: var(--rail-gap); justify-items: end; padding: var(--space-2);
  }
  .rail a { display: flex; align-items: center; gap: var(--space-1); min-height: var(--space-3); color: var(--quiet-on-ink); text-decoration: none; }
  .rail a::after { content: ""; width: var(--rail-tick); height: var(--hair); background: currentColor; transition: width var(--dur-quick) var(--ease-out); }
  .rail a:hover, .rail a[aria-current="step"] { color: var(--limewash); }
  .rail a[aria-current="step"]::after { width: calc(var(--rail-tick) * 2); }
}
@media (prefers-reduced-motion: no-preference) {
  html:has(.story) { scroll-behavior: smooth; }
}
@media print {
  .stage, .rail { display: none; }
  .story { background: var(--limewash); color: var(--ink); }
}

@media (min-width: 700px) {
  .cells { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .frames { grid-template-columns: minmax(0, 3.46fr) minmax(0, 1fr); gap: var(--gutter); }
  .frame-phone { order: 0; max-width: none; }
  .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
  .duo.flip > :first-child { order: 2; }
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
  .roles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
  .meaning { margin-left: auto; text-align: right; }
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .split > * { grid-column: 1 / -1; }
  .split > .prose { grid-column: 7 / span 5; }
  .place { grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure)); column-gap: var(--gutter); align-items: end; }
  .place-head { grid-column: 1 / -1; }
  .foot-cols { grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  /* Board C-1 put the four doors (Members | Clubs | Growers | Drivers) in the
     top bar on a computer. The Founder, 2026-11-10: the top bar is the Mila
     mark, bigger, and the menu button, nothing else; the doors live in the
     menu and the footer. */
  .cells.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps.five { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gutter); border-top: 0; }
  .steps.four { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); border-top: 0; }
  .steps.five li, .steps.four li { grid-template-columns: 1fr; align-content: start; border-top: var(--hair) solid var(--rule-on-paper); border-bottom: 0; }
  .steps.five .n, .steps.four .n { grid-row: auto; margin-bottom: var(--space-2); }
  .on-hemp .steps li { border-color: var(--rule-on-hemp); }
}
@media (prefers-reduced-motion: reduce) {
  html.js .ch, html.ready .ch { transform: none; animation: none; }
  .menu, .menu-nav a, .door, .door-go, .bars::after, .go, .btn, .pm { transition: none; }
}
@media print {
  .top, .menu, .roots, .skip, .band .actions { display: none; }
  .hero, .hero-photo { min-height: 0; }
  html.js .ch { transform: none; animation: none; }
}

/* The other pages in the Cinematic mode (ADR-0091, proposed; ML-D99): the
   story's look carried to every page. Dark ground, each section a glass card,
   the seed's thread running down the left edge (seed.js). Switched on by
   class="cine" on the body; the quiet tones and rules flip to their dark
   forms here so no component is restyled one by one. */
.cine {
  --quiet-on-paper: var(--quiet-on-ink); --rule-on-paper: var(--rule-on-ink);
  --quiet-on-hemp:  var(--quiet-on-ink); --rule-on-hemp:  var(--rule-on-ink);
  background: var(--ink); color: var(--limewash);
}
.cine .seed-stage { position: fixed; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.cine .top, .cine main, .cine .foot { position: relative; z-index: 1; }
.cine .top { position: sticky; z-index: 10; }
.cine .top, .cine .sec > .wrap, .cine .band > .wrap, .cine .foot > .wrap, .cine .crumbs {
  background: var(--story-glass);
  -webkit-backdrop-filter: blur(var(--story-blur)); backdrop-filter: blur(var(--story-blur));
}
.cine .top { box-shadow: var(--story-shadow); }
.cine .on-paper, .cine .on-hemp, .cine .on-ink, .cine .on-soil, .cine .band, .cine .hero, .cine .foot,
.cine .hero-photo, .cine .crumbs { background: none; color: var(--limewash); }
.cine .crumbs { border: 0; }
.cine .crumbs > .wrap { padding-block: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.cine .sec, .cine .band { padding-block: var(--space-4); }
.cine .sec > .wrap, .cine .band > .wrap, .cine .foot > .wrap {
  width: calc(100% - 2 * var(--edge)); padding: var(--space-4) var(--space-3);
  border: var(--hair) solid var(--rule-on-ink); border-radius: var(--story-round); box-shadow: var(--story-shadow);
}
.cine .band > .wrap { border-color: color-mix(in srgb, var(--soil) 70%, var(--limewash)); }
.cine .foot { padding-block: var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom)); }
.cine .foot .wrap { gap: var(--space-4); }
.cine .role { border-top-color: var(--rule-on-ink); }
.cine .cell .mark, .cine .place-head .now, .cine .steps .n { color: var(--tailings); }
.cine .btn-line { color: var(--limewash); }
.cine .btn-solid, .cine .band .btn-solid, .cine .on-soil .btn-solid { background: var(--soil); border-color: var(--soil); }
.cine .hero-photo { min-height: 0; overflow: visible; }
.cine .hero-photo > img, .cine .hero-photo::after { display: none; }
.cine .hero-photo > .wrap { padding-block: var(--space-5) var(--space-4); }
.cine .duo img, .cine .door-card img {
  border-radius: var(--story-round); box-shadow: var(--story-shadow);
  filter: saturate(.75) brightness(.82);
}
/* About: the planted name stays; the soil below it becomes a lit glass strip */
.cine .soil {
  background: color-mix(in srgb, var(--soil) 34%, transparent);
  -webkit-backdrop-filter: blur(var(--story-blur)); backdrop-filter: blur(var(--story-blur));
  border-top: var(--hair) solid color-mix(in srgb, var(--soil) 70%, var(--limewash));
}
@media (min-width: 900px) {
  .cine .sec > .wrap, .cine .band > .wrap, .cine .foot > .wrap { padding: var(--space-5) var(--space-5); }
}
@media (prefers-reduced-motion: reduce) { .cine .seed-stage { display: none; } }
@media print { .cine .seed-stage { display: none; } .cine { background: var(--limewash); color: var(--ink); } }

/* The opening (2026-10-22): the scene's own seed opens the page (opening.js).
   Until the scene has drawn its first frame this plain ink cover hides the
   words; then it lets go, and from there the scene's own veil (a hole that
   grows from the seed) shows the world in and the seed's light the words. Without script, or
   with reduced motion, none of it runs. */
html.opening { overflow-y: scroll; }   /* scroll, not hidden: the scrollbar keeps its place, so nothing moves when the opening ends (opening.js stops the wheel and keys) */
html.opening .top { z-index: 101; }   /* the menu is there from the first moment, over the opening */
.veil { display: none; }
html.opening .veil { display: block; position: fixed; inset: 0; z-index: 100; pointer-events: none; background: var(--ink); transition: opacity .5s ease-out; }
html.opening .veil.gone { opacity: 0; }
/* the words are lit by the seed's light (opening.js sets --p, how far lit, and --f, how bright the flare, per letter) */
.word { white-space: nowrap; }
html.opening .glyph {
  opacity: var(--p, 0);
  text-shadow: 0 0 calc(var(--f, 0) * 1.6rem) color-mix(in srgb, var(--tailings) calc(var(--f, 0) * 100%), transparent);
}
html.opening h1 .glyph { color: color-mix(in srgb, #fff calc(var(--f, 0) * 90%), var(--limewash)); }


/* Liquid motion (Mila ML-D115, 2026-11-09). The Founder ruled glass and
   liquid motion for Rootstock and kushOS and, the same hour, "even the mila
   landing page": the six Cinematic pages keep their look (ML-D93, ML-D99) and
   move like the apps. Springs are written as linear() curves; only transform
   and opacity move; with reduced motion none of it runs (site.js adds .rise
   only when motion is allowed). */
:root {
  --spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
    0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1);
  --bouncy: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017,
    1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%,
    1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
}
/* Each glass card rises into place as it scrolls into view. */
.cine .rise { opacity: 0; transform: translateY(28px) scale(.98); }
.cine .rise.in {
  opacity: 1; transform: none;
  transition: opacity .5s ease-out, transform .8s var(--spring);
}
/* Buttons squish under the finger and spring back. */
.btn, .door-go { transition: transform .42s var(--bouncy), background-color .2s ease, color .2s ease; }
.btn:active, .door-go:active { transform: scale(.95); transition-duration: .12s; }
/* The menu is smoked glass over the scene, and its links spring in. */
.cine .menu {
  background: color-mix(in srgb, var(--ink) 80%, transparent);
  -webkit-backdrop-filter: blur(var(--story-blur)); backdrop-filter: blur(var(--story-blur));
}
.cine .menu-nav a, .cine .door { transition-duration: .6s; transition-timing-function: var(--spring); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cine .menu { background: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .cine .rise { opacity: 1; transform: none; }
  .btn, .door-go { transition: none; }
  .btn:active, .door-go:active { transform: none; }
}
@media print { .cine .rise { opacity: 1; transform: none; } }