/* Harvest landing (orchard.veraminds.com). One stylesheet, no build step, no script, no external request.
   Direction: an orchard's working colours. Canopy green for ink and structure, apple red for the one
   action, amber for "wait", leaf green for "clear", a dashed outline for "unknown". Light is the base;
   dark follows the reader's system setting. Type is a sturdy system serif for headings (it holds up
   in sun glare on a phone) over the system sans for reading. Mobile first. */

:root {
  color-scheme: light dark;

  --page: #FBFCFA;
  --band: #EEF3EF;
  --card: #FFFFFF;
  --line: #D5DED7;
  --line-strong: #6B7C70;
  --ink: #172A20;
  --ink-2: #45584C;

  --accent: #8C1F2B;
  --accent-ink: #FFFFFF;
  --link: #172A20;
  --focus: #8C1F2B;

  --hold: #7A4E00;
  --hold-tint: #FBF1DC;
  --hold-line: #B9852A;
  --clear: #23603B;
  --clear-tint: #E3F1E6;
  --clear-line: #4F9468;
  --none-tint: #EDF0EE;

  --bar: #2F6B45;
  --bar-track: #E1E8E3;

  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Iowan Old Style", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --gutter: 16px;
  --shell: 72rem;
  --band-pad: 56px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #13241C;
    --band: #182C22;
    --card: #1C3328;
    --line: #2C4537;
    --line-strong: #7F9A88;
    --ink: #EAF1EC;
    --ink-2: #B3C4B9;

    --accent: #F3B7BF;
    --accent-ink: #3B0F17;
    --link: #EAF1EC;
    --focus: #F3B7BF;

    --hold: #F2C46B;
    --hold-tint: #3A3020;
    --hold-line: #A8813A;
    --clear: #9AD8A9;
    --clear-tint: #1F3D2C;
    --clear-line: #5E9B70;
    --none-tint: #22362B;

    --bar: #8FD19E;
    --bar-track: #24392E;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-wrap: break-word;
}

@media (min-width: 768px) {
  body { font-size: 1.125rem; }
  :root { --gutter: 24px; --band-pad: 72px; }
}

@media (min-width: 1200px) {
  :root { --gutter: 32px; --band-pad: 88px; }
}

img, svg { display: block; max-width: 100%; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3 { margin: 0; color: var(--ink); }
p { margin: 0; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 10;
  background: var(--card); color: var(--ink); padding: 12px 16px;
  border: 2px solid var(--ink); border-radius: 6px; font-weight: 600;
}
.skip:focus { top: 12px; }

/* Header */

.site-head { border-bottom: 1px solid var(--line); }

.head-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px;
}

.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px;
  font-family: var(--serif); font-weight: 700; font-size: 1.375rem;
  color: var(--ink); text-decoration: none; letter-spacing: -0.005em;
}
.wordmark .mark { width: 28px; height: 28px; flex: none; }

.site-nav { display: flex; gap: 4px; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px;
  font-weight: 600; text-decoration: none; border-radius: 6px;
}
.site-nav a:hover { text-decoration: underline; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }

/* Hero */

.hero { padding-block: 40px var(--band-pad); }

.hero-grid { display: grid; gap: 40px; }

@media (min-width: 960px) {
  .hero { padding-top: 72px; }
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: start; }
}

.chip {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-size: 0.9375rem; font-weight: 600; color: var(--ink);
}

.display {
  margin-top: 20px;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(2.375rem, 1.55rem + 3.6vw, 3.75rem);
  line-height: 1.04; letter-spacing: -0.015em;
  max-width: 14ch;
}

.lede { margin-top: 20px; max-width: 34em; font-size: 1.125em; color: var(--ink); }
.lede + .lede { margin-top: 12px; }
.sub { color: var(--ink-2); }

.actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 22px;
  background: var(--accent); color: var(--accent-ink);
  border: 2px solid var(--accent); border-radius: 8px;
  font-weight: 700; text-decoration: none; line-height: 1.2; text-align: center;
}
.btn:hover { text-decoration: underline; }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--line-strong); }

/* The block board: four blocks, four answers */

.board {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.board-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.board-title { font-weight: 700; }
.board-sub { font-size: 0.9375rem; color: var(--ink-2); }

.board-list { list-style: none; margin: 0; padding: 0; }

.blk {
  display: grid; gap: 8px;
  padding: 16px 18px;
  border-top: 1px solid var(--line);
}
.blk:first-child { border-top: 0; }

@media (min-width: 520px) {
  .blk { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; }
}

.blk-name { font-weight: 700; font-size: 1.0625rem; }
.blk-meta { display: block; font-size: 0.9375rem; color: var(--ink-2); font-weight: 400; }

.status {
  justify-self: start;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  border: 2px solid transparent;
  font-weight: 700; font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 520px) { .status { justify-self: end; text-align: right; } }

.s-hold { background: var(--hold-tint); color: var(--hold); border-color: var(--hold-line); }
.s-clear { background: var(--clear-tint); color: var(--clear); border-color: var(--clear-line); }
.s-none { background: var(--none-tint); color: var(--ink); border-color: var(--line); }
.s-unknown { background: transparent; color: var(--ink); border-style: dashed; border-color: var(--line-strong); }

.caption { margin-top: 14px; font-size: 0.9375rem; color: var(--ink-2); max-width: 40em; }

/* Bands and parts */

.part { padding-block: var(--band-pad); border-top: 1px solid var(--line); }
.part-band { background: var(--band); border-top: 0; }

.part-head { max-width: 44em; }
.part-head h2, .h2 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.375rem);
  line-height: 1.12; letter-spacing: -0.01em;
}
.part-head p { margin-top: 14px; color: var(--ink-2); }
.part-head p.lede { color: var(--ink); }

/* Built so far: a list of rules, read like a field manual */

.rules { list-style: none; margin: 32px 0 0; padding: 0; }

.rule {
  display: grid; gap: 8px;
  padding-block: 22px;
  border-top: 1px solid var(--line-strong);
}
.rule:last-child { border-bottom: 1px solid var(--line-strong); }

@media (min-width: 900px) {
  .rule { grid-template-columns: 17rem minmax(0, 1fr); gap: 32px; }
}

.rule h3 { font-size: 1.1875rem; line-height: 1.3; font-weight: 700; }
.rule p { max-width: 40em; }
.rule p + p { margin-top: 10px; }
.rule q { quotes: "\201C" "\201D"; font-weight: 600; }

/* The Mills table: the one bold thing on the page */

.mills-wrap { margin-top: 32px; max-width: 52rem; }

.mills {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.mills caption {
  text-align: left; caption-side: top;
  padding-bottom: 12px; font-weight: 700;
}
.mills th, .mills td { padding: 7px 0; vertical-align: middle; text-align: left; }
.mills thead th {
  font-size: 0.9375rem; font-weight: 600; color: var(--ink-2);
  border-bottom: 2px solid var(--ink); padding-bottom: 10px;
}
.mills tbody tr { border-bottom: 1px solid var(--line); }
.mills .col-t { width: 8.5rem; }
.mills .col-h { width: auto; }
.mills tbody th { font-weight: 600; padding-right: 12px; }
.mills .f { display: block; font-size: 0.875rem; font-weight: 400; color: var(--ink-2); }

.hrs { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hrs-n { flex: none; width: 2.6em; text-align: right; font-weight: 700; font-size: 1.0625rem; }
.bar {
  flex: 1 1 auto; min-width: 0; height: 18px;
  background: var(--bar-track); border-radius: 3px; overflow: hidden;
}
.bar > span {
  display: block; height: 100%;
  width: calc(var(--h) / 30 * 100%);
  background: var(--bar);
}
/* Wet hours per row, as classes so the page needs no inline style. */
.bar > .h-30 { --h: 30; }
.bar > .h-25 { --h: 25; }
.bar > .h-22 { --h: 22; }
.bar > .h-20 { --h: 20; }
.bar > .h-19 { --h: 19; }
.bar > .h-17 { --h: 17; }
.bar > .h-15 { --h: 15; }
.bar > .h-14-5 { --h: 14.5; }
.bar > .h-14 { --h: 14; }
.bar > .h-13 { --h: 13; }
.bar > .h-12 { --h: 12; }
.bar > .h-11-5 { --h: 11.5; }
.bar > .h-11 { --h: 11; }
.bar > .h-10 { --h: 10; }
.bar > .h-9-5 { --h: 9.5; }
.bar > .h-9 { --h: 9; }

.mills .edge td { color: var(--ink-2); font-style: italic; }

@media (min-width: 768px) {
  .mills .col-t { width: 13rem; }
  .mills .f { display: inline; margin-left: 6px; }
  .bar { height: 22px; }
}

.mills-note { margin-top: 16px; font-size: 0.9375rem; color: var(--ink-2); max-width: 44em; }

/* Plain lists: will not do, still being built */

.plain { list-style: none; margin: 28px 0 0; padding: 0; max-width: 46em; }
.plain li { padding: 14px 0 14px 22px; border-top: 1px solid var(--line); position: relative; }
.plain li:last-child { border-bottom: 1px solid var(--line); }
.plain li::before {
  content: ""; position: absolute; left: 0; top: 1.35em;
  width: 10px; height: 2px; background: var(--ink);
}
.plain b { font-weight: 700; }
.plain-coming li::before { background: transparent; border-top: 2px dashed var(--line-strong); height: 0; }

.two { display: grid; gap: 48px; }
@media (min-width: 960px) { .two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }

/* Call to action */

.cta {
  max-width: 44em;
  padding: 28px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 6px solid var(--accent);
  border-radius: 10px;
}
@media (min-width: 768px) { .cta { padding: 40px 44px; } }
.cta .lede { font-size: 1.0625em; }
.aside { margin-top: 16px; font-size: 0.9375rem; color: var(--ink-2); }

/* Help page */

.doc-head { padding-block: 40px 8px; }
@media (min-width: 960px) { .doc-head { padding-top: 64px; } }
.doc-head .display { max-width: 18ch; }

.doc { padding-bottom: var(--band-pad); }
.doc-part { padding-block: 36px; border-top: 1px solid var(--line); max-width: 46em; }
.doc-part:first-child { border-top: 0; }
.doc-part h2 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem); line-height: 1.15;
}
.doc-part h3 { margin-top: 24px; font-size: 1.125rem; font-weight: 700; }
.doc-part p, .doc-part ul { margin-top: 12px; }
.doc-part ul { padding-left: 1.2em; }
.doc-part li + li { margin-top: 8px; }
.doc-part li::marker { color: var(--ink-2); }

.tag {
  display: inline-block; margin-left: 6px; padding: 1px 8px;
  border: 1px solid var(--line-strong); border-radius: 4px;
  font-size: 0.8125rem; font-weight: 600; vertical-align: 0.12em; color: var(--ink);
}
.tag-coming { border-style: dashed; }

.note {
  margin-top: 16px; padding: 14px 16px;
  background: var(--band); border-left: 4px solid var(--line-strong); border-radius: 4px;
}

/* Footer */

.site-foot { border-top: 1px solid var(--line); padding-block: 32px 40px; font-size: 0.9375rem; color: var(--ink-2); }
.site-foot p + p { margin-top: 8px; }
.site-foot a { color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.board-fig { margin: 0; min-width: 0; }