/* Quorum Ag — base: tokens, reset, type, layout primitives. */

/* Fraunces's stand-ins while it loads (qag-15zx): a system serif sized to set the pages' headings about as
   wide as Fraunces does, with its ascent and descent, so a heading keeps its lines when Fraunces arrives
   and nothing below it moves. Times New Roman (iPhones, Macs, Windows; Liberation Serif has its metrics)
   or, on Android, Noto Serif. A face whose fonts a device hasn't got is passed over. The sizes are the
   width of every v1 heading's words in Fraunces (at 38 px, SOFT 60) over the system font's: 400 for the
   lighter face, 560 for the heavier. Only on a phone: a desktop's larger titles set Fraunces narrower,
   where these would wrap more than Fraunces does, not less. */
@font-face {
  font-family: 'Fraunces Times';
  font-style: normal;
  font-weight: 100 549;
  src: local('Times New Roman'), local('TimesNewRomanPSMT'), local('Liberation Serif'), local('LiberationSerif');
  size-adjust: 112%;
  ascent-override: 87.3%;
  descent-override: 22.8%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Fraunces Times';
  font-style: normal;
  font-weight: 550 900;
  src: local('Times New Roman Bold'), local('TimesNewRomanPS-BoldMT'), local('Liberation Serif Bold'), local('LiberationSerif-Bold');
  size-adjust: 108%;
  ascent-override: 90.6%;
  descent-override: 23.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Fraunces Times';
  font-style: italic;
  font-weight: 100 549;
  src: local('Times New Roman Italic'), local('TimesNewRomanPS-ItalicMT'), local('Liberation Serif Italic'), local('LiberationSerif-Italic');
  size-adjust: 107.5%;
  ascent-override: 91.0%;
  descent-override: 23.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Fraunces Times';
  font-style: italic;
  font-weight: 550 900;
  src: local('Times New Roman Bold Italic'), local('TimesNewRomanPS-BoldItalicMT'), local('Liberation Serif Bold Italic'), local('LiberationSerif-BoldItalic');
  size-adjust: 108.5%;
  ascent-override: 90.1%;
  descent-override: 23.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Fraunces Noto';
  font-style: normal;
  font-weight: 100 549;
  src: local('Noto Serif'), local('NotoSerif-Regular');
  size-adjust: 95.5%;
  ascent-override: 102.4%;
  descent-override: 26.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Fraunces Noto';
  font-style: normal;
  font-weight: 550 900;
  src: local('Noto Serif Bold'), local('NotoSerif-Bold');
  size-adjust: 92%;
  ascent-override: 106.3%;
  descent-override: 27.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Fraunces Noto';
  font-style: italic;
  font-weight: 100 549;
  src: local('Noto Serif Italic'), local('NotoSerif-Italic');
  size-adjust: 93.5%;
  ascent-override: 104.6%;
  descent-override: 27.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Fraunces Noto';
  font-style: italic;
  font-weight: 550 900;
  src: local('Noto Serif Bold Italic'), local('NotoSerif-BoldItalic');
  size-adjust: 88.5%;
  ascent-override: 110.5%;
  descent-override: 28.8%;
  line-gap-override: 0%;
}

:root {
  /* Paper and ink */
  --paper: #f6efe0;
  --paper-2: #efe4cc;
  --paper-3: #e4d3b1;
  --card: #fbf7ee;
  --ink: #1e2b22;
  --ink-2: #3b4a3f;
  --ink-3: #585c50; /* small words at 4.5 : 1 or better, on paper 2 as well */
  --rule: rgba(30, 43, 34, 0.16);

  /* Green and gold, grounded in red earth */
  --canopy: #1f4d2e;
  --canopy-2: #2c6138;
  --leaf: #3f7d3a;
  --sap: #9bc53d;
  --sap-2: #c6de7e;
  --wattle: #f2b632;
  --wattle-2: #f7d26a;
  --wattle-3: #8f6100; /* an old gold, 3 : 1 or better on the papers: the focus ring */
  --earth: #a03f24; /* dark enough for the hand notes and stamps on paper 2 (4.5 : 1) */
  --earth-2: #8a3a22;
  --clay: #d9774a;
  --range: #5b7fa0;
  --sky: #cfe3e8;
  --gum: #8fa79a;
  --galah: #e58aa0;
  --focus: var(--wattle-3); /* the focus ring's colour, which a dark panel sets to wattle */

  /* Type */
  --f-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-body: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  --f-mark: "Cinzel", "Trajan Pro", "Times New Roman", serif;

  --step--1: clamp(0.84rem, 0.8rem + 0.15vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1: clamp(1.18rem, 1.08rem + 0.45vw, 1.42rem);
  --step-2: clamp(1.45rem, 1.25rem + 0.9vw, 2rem);
  --step-3: clamp(1.85rem, 1.45rem + 1.8vw, 3rem);
  --step-4: clamp(2.35rem, 1.7rem + 3vw, 4.4rem);
  --step-5: clamp(2.9rem, 1.9rem + 4.6vw, 6.2rem);

  /* Space and shape */
  /* clear of the notch on a phone on its side: the page's colour runs under it (viewport-fit=cover), its words don't */
  --gutter: max(clamp(1.1rem, 0.6rem + 2.4vw, 3rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --section: clamp(4.5rem, 3rem + 7vw, 10rem);
  --wide: 76rem;
  --text: 40rem;
  --radius: 14px;
  --shadow-paper: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 18px 40px -26px rgba(74, 46, 16, 0.45), 0 2px 6px -2px rgba(74, 46, 16, 0.18);
  --ease-grow: cubic-bezier(0.2, 0.7, 0.1, 1);

  /* 'only': a phone that darkens pages itself (Samsung Internet's dark mode, Chrome's "darken websites")
     leaves the site as it's painted, since it has no dark theme of its own (qag-2lfyy) */
  color-scheme: only light;
}
@media (max-width: 767.98px) {
  :root { --f-display: "Fraunces", "Fraunces Times", "Fraunces Noto", "Iowan Old Style", "Palatino Linotype", Georgia, serif; }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* what the keyboard moves to, and what a link jumps to, is scrolled clear of what's pinned at the top:
     the header, and on the hub its tabs (--hub-top, from learn.js). Shift+Tab goes up the page, and
     would otherwise leave the focus under them */
  scroll-padding-top: calc(var(--hub-top, 3.7rem) + 0.75rem);
}

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--step-0);
  line-height: 1.6;
  /* a word too long for its line (on the narrowest phones, or with a reader's own spacing) breaks
     rather than running off the side */
  overflow-wrap: break-word;
  color: var(--ink);
  background-color: var(--paper);
  background-image: var(--grain), var(--mottle);
  background-size: 260px 260px, 900px 900px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

:root {
  /* Paper fibre and mottling, generated rather than downloaded. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .6 0 0 0 0 .45 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
/* On a touch screen a field's words are 16 px at least: under that, Safari on an iPhone zooms the page in
   when it's tapped, and leaves it zoomed (phone.cjs, input-zoom). A field that sets its own size sees to it. */
@media (pointer: coarse), (max-width: 760px) { input, textarea, select { font-size: max(16px, 1em); } }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--wattle); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
/* where a ring is drawn on a dark panel it's wattle, as the old gold is too dark there; on the sticky
   notes it's ink. (The night card and the live panel keep the old gold: the card's ring is drawn outside
   it, on the paper, and the panel's fields are on a paper card.) */
.site-footer, .site-header--on-dark:not(.is-scrolled):not(.is-open), .opener--dark, .opener--night, .ep-cta, .quorum, .inside, .profit,
.askcard, .chat--hub, .offer--member { --focus: var(--wattle); }
.opener--night .session { --focus: var(--wattle-3); } /* the paper card on the night opener */
.chat--hub .chat__msg--ai { --focus: var(--wattle-3); } /* the paper answers inside the dark chat */
.saying--sticky, .saying--kraft { --focus: var(--ink); }
::selection { background: var(--wattle-2); color: var(--ink); }
[hidden] { display: none !important; }
/* no Log in where sign-in is off on a live build (chrome.py's LOG_IN, members.js; qag-mgrpk), nor while a first
   visit there waits for the site's answer (.sign-in-wait, till site.js has it; qag-1nk1j). A browser without
   :has() (Safari before 15.4, Firefox before 121) drops a rule that uses it whole, so those have rules of their own */
.sign-in-off a[data-log-in], .sign-in-wait a[data-log-in] { display: none !important; }
.sign-in-off li:has(> a[data-log-in]), .sign-in-wait li:has(> a[data-log-in]) { display: none !important; }
/* and no look around the sample member's hub there: a link into it (?tour), a card that's only that link
   (not quorum-ai.html's, whose waitlist link shares its item), and the words marked data-look-around. Where
   sign-in is off, the way in is the hub's waitlist (Adam, 5 Nov; qag-12eni) */
.sign-in-off a[href*="?tour"], .sign-in-off [data-look-around], .sign-in-wait a[href*="?tour"], .sign-in-wait [data-look-around] { display: none !important; }
.sign-in-off li:has(> a[href*="?tour"]:only-child), .sign-in-wait li:has(> a[href*="?tour"]:only-child) { display: none !important; }
/* and no farm audit there, as sending one signs the grower in (Adam, 5 Nov: the menu has too many options, and
   the audit still feels like it's missing something; qag-2wqkk): a link to it, a list item or card that's only
   that link (the menu's, the footer's), the words marked data-with-audit and sign-in's line about it. The words
   marked data-without-audit stand in for them there, and only there. The audit's own page is kept out of sight
   while site.js sends it to Consulting, and while a first visit waits to hear (qag-1nk1j) */
.sign-in-off a[href*="farm-audit.html"], .sign-in-off [data-with-audit], .sign-in-off .signin__new--audit,
.sign-in-wait a[href*="farm-audit.html"], .sign-in-wait [data-with-audit], .sign-in-wait .signin__new--audit { display: none !important; }
.sign-in-off li:has(> a[href*="farm-audit.html"]:only-child), .sign-in-wait li:has(> a[href*="farm-audit.html"]:only-child) { display: none !important; }
html:not(.sign-in-off):not(.sign-in-wait) [data-without-audit] { display: none !important; }
.sign-in-off .audit-page main, .sign-in-wait .audit-page main { visibility: hidden; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 560;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 60, "WONK" 0;
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); line-height: 1.12; }
h4 { font-size: var(--step-1); line-height: 1.2; }
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: 1em; }

em, .ital { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
h1 em, h2 em, h3 em { color: var(--canopy-2); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--f-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); max-width: 36rem; }
.small { font-size: var(--step--1); }
.muted { color: var(--ink-3); }

.hand {
  font-family: var(--f-hand);
  font-weight: 600;
  font-size: 1.55rem;
  line-height: 1.05;
  color: var(--earth);
  letter-spacing: 0;
}

.wrap { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; }
.wrap--text { width: min(100% - 2 * var(--gutter), var(--text)); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; }
.stack > * + * { margin-top: var(--stack, 1.25rem); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--gap, 0.75rem); align-items: center; }

@media (max-width: 520px) { .hide-sm { display: none; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; border-radius: 8px;
}
.skip:focus { top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}