/* Grove Spelling Dictionary
   Colour carries meaning here, so it is not decoration and must not be
   reassigned: rind orange is always the spelling somebody heard, citron is
   always the spelling that is written. Everything else is leaf, bark and bloom.
   Three type registers: condensed caps for signage, Georgia for reading,
   monospace for letters under inspection. */

:root {
  --bark:    #131a0c;
  --canopy:  #1b2411;
  --loam:    #212c15;
  --furrow:  #33421f;
  --bloom:   #e6ebd6;
  --husk:    #98a37e;
  --husk-dim:#869271;
  --citron:  #d7e34d;
  --citron-d:#aab53a;
  --rind:    #f4691f;
  --rind-d:  #c8531580;

  --font-sign: "Arial Narrow", "Helvetica Neue", "Liberation Sans Narrow", Arial, sans-serif;
  --font-text: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --font-data: "Cascadia Mono", Consolas, "SF Mono", "SFMono-Regular", Menlo, "DejaVu Sans Mono", monospace;

  --s1: 4px;  --s2: 8px;  --s3: 14px; --s4: 20px;
  --s5: 32px; --s6: 48px; --s7: 72px; --s8: 108px;

  --measure: 35rem;
  --frame: 1180px;
  --rule: 1px solid var(--furrow);
}

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

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

body {
  margin: 0;
  background: var(--bark);
  color: var(--bloom);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.68;
  letter-spacing: .002em;
}

/* ---- signage register ------------------------------------------------ */

.sign, .masthead a, .eyebrow, .tag, .crumbs, .rowmeta, .cardnote {
  font-family: var(--font-sign);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: .16em;
}

.eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--citron);
  margin: 0 0 var(--s3);
}
.eyebrow--quiet { color: var(--husk); }

.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--husk);
  border: 1px solid var(--furrow);
  border-radius: 2px;
  padding: 3px 8px 2px;
  white-space: nowrap;
}

/* ---- shell ------------------------------------------------------------ */

.wrap { width: 100%; max-width: var(--frame); margin: 0 auto; padding: 0 var(--s4); }
.measure { max-width: var(--measure); }

.masthead {
  border-bottom: var(--rule);
  background:
    repeating-linear-gradient(90deg, transparent 0 63px, rgba(51,66,31,.55) 63px 64px),
    var(--canopy);
}
.masthead .wrap {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  align-items: baseline; justify-content: space-between;
  padding-top: var(--s3); padding-bottom: var(--s3);
}
.brand {
  font-family: var(--font-sign);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-weight: 700;
  font-size: 15px;
  color: var(--bloom);
  text-decoration: none;
}
.brand span { color: var(--citron); }
.brand:hover { color: var(--citron); }

.nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.nav a { font-size: 12px; font-weight: 700; color: var(--husk); text-decoration: none; }
.nav a:hover { color: var(--citron); }

main { display: block; padding-bottom: var(--s8); }

.crumbs {
  font-size: 11px; color: var(--husk-dim);
  padding-top: var(--s4);
}
.crumbs a { color: var(--husk); text-decoration: none; }
.crumbs a:hover { color: var(--citron); }
.crumbs .sep { color: var(--furrow); padding: 0 var(--s2); }

/* ---- headings --------------------------------------------------------- */

h1, h2, h3 { font-weight: 400; margin: 0; }

.h-page {
  font-size: clamp(30px, 5.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: var(--s3) 0 var(--s4);
  max-width: 22ch;
}
.h-page--wide { max-width: 30ch; }
.h-sec {
  font-size: 15px;
  font-family: var(--font-sign);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 700;
  color: var(--citron);
  padding-bottom: var(--s2);
  border-bottom: var(--rule);
  margin: var(--s7) 0 var(--s4);
}
.h-sec a { color: inherit; text-decoration: none; }
.h-sec a:hover { color: var(--bloom); }

.standfirst {
  font-size: clamp(18px, 2.4vw, 21px);
  line-height: 1.5;
  color: var(--husk);
  max-width: 44ch;
  margin: 0 0 var(--s5);
}

p { margin: 0 0 var(--s4); }
.prose { max-width: var(--measure); }
.prose p:last-child { margin-bottom: 0; }

a { color: var(--citron); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--bloom); }
:focus-visible { outline: 2px solid var(--citron); outline-offset: 3px; }

/* ---- the graft -------------------------------------------------------- */
/* Two spellings set letter against letter, joined by a seam that thickens
   where they stop agreeing. */

.graft { margin: 0 0 var(--s5); }

.gline { display: flex; align-items: stretch; gap: var(--s3); }
.glabel {
  flex: 0 0 5.4rem;
  font-family: var(--font-sign);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 11px;
  font-weight: 700;
  color: var(--husk-dim);
  text-align: right;
  padding-top: .85em;
}
.gline--seam .glabel { padding: 0; }
.gcells {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
}

.cell {
  font-family: var(--font-data);
  font-size: clamp(15px, 3.6vw, 30px);
  line-height: 1;
  font-weight: 400;
  text-align: center;
  padding: .42em 0;
  color: var(--husk-dim);
}
.cell--gap { color: var(--furrow); }

.gline--heard .cell--diff {
  color: var(--rind);
  background: rgba(244, 105, 31, .12);
}
.gline--written .cell--diff {
  color: var(--citron);
  background: rgba(215, 227, 77, .12);
}

.seam { height: 14px; border-top: 1px solid var(--furrow); }
.seam--graft { border-top: 3px solid var(--citron); }

.gcap {
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--husk-dim);
  letter-spacing: .02em;
  margin: var(--s3) 0 0 6.6rem;
}
.gcap b { color: var(--husk); font-weight: 400; }

@media (prefers-reduced-motion: no-preference) {
  .cell { animation: sprout .5s cubic-bezier(.2,.7,.3,1) backwards; animation-delay: calc(var(--i) * 38ms); }
  .seam { animation: seamin .5s ease-out backwards; animation-delay: calc(var(--i) * 38ms + 120ms); }
  @keyframes sprout { from { opacity: 0; transform: translateY(6px); } }
  @keyframes seamin { from { opacity: 0; } }
}

@media (max-width: 560px) {
  .gline { flex-direction: column; gap: 2px; }
  .glabel { flex: none; text-align: left; padding: 0 0 2px; }
  .gline--seam .glabel { display: none; }
  .gcap { margin-left: 0; }
}

/* ---- the answer plate ------------------------------------------------- */

.plate {
  border: var(--rule);
  border-left: 3px solid var(--citron);
  background: var(--canopy);
  padding: var(--s4) var(--s5);
  margin: 0 0 var(--s6);
  max-width: var(--measure);
}
.plate .tag { margin-bottom: var(--s3); }
.plate-word {
  font-family: var(--font-data);
  font-size: clamp(24px, 5vw, 38px);
  line-height: 1.1;
  color: var(--citron);
  display: block;
  word-break: break-word;
}
.plate-say {
  font-family: var(--font-data);
  font-size: 14px;
  color: var(--husk);
  margin: var(--s3) 0 0;
  letter-spacing: .04em;
}

/* ---- rows: the planted line ------------------------------------------ */

.rows { border-top: var(--rule); margin: 0 0 var(--s6); }
.row {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  align-items: baseline; justify-content: space-between;
  border-bottom: var(--rule);
  border-left: 3px solid transparent;
  padding: var(--s3) var(--s3) var(--s3) var(--s4);
  transition: border-color .16s ease, background-color .16s ease;
}
.row:hover, .row:focus-within { border-left-color: var(--citron); background: var(--loam); }
.row-word {
  font-family: var(--font-data);
  font-size: 20px;
  text-decoration: none;
  color: var(--bloom);
}
.row-word:hover { color: var(--bloom); }
.row-word--name { font-family: var(--font-text); font-size: 25px; letter-spacing: -.01em; }
.row-word .m { color: var(--rind); }
.rowmeta { font-size: 11px; color: var(--husk-dim); }

/* ---- cards: one tree -------------------------------------------------- */

.trees { display: grid; gap: var(--s5); margin: 0 0 var(--s6); }
@media (min-width: 900px) { .trees--3 { grid-template-columns: repeat(3, 1fr); } }

.tree {
  border-top: 3px solid var(--furrow);
  padding-top: var(--s3);
  transition: border-color .16s ease;
}
.tree:hover { border-top-color: var(--citron); }
.tree h3 { margin: 0 0 var(--s1); font-size: 27px; letter-spacing: -.01em; }
.tree h3 a { color: var(--bloom); text-decoration: none; }
.tree h3 a:hover { color: var(--citron); }
.tree .latin { font-style: italic; color: var(--husk); font-size: 15px; margin: 0 0 var(--s2); }
.tree .say { font-family: var(--font-data); font-size: 13px; color: var(--citron-d); letter-spacing: .04em; margin: 0 0 var(--s3); }
.tree p { font-size: 16px; color: var(--husk); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0 0; padding: 0; list-style: none; }
.chip {
  font-family: var(--font-data);
  font-size: 13px;
  color: var(--husk);
  text-decoration: none;
  border: 1px solid var(--furrow);
  border-radius: 2px;
  padding: 4px 9px 3px;
  display: inline-block;
}
.chip:hover { color: var(--bark); background: var(--citron); border-color: var(--citron); }
.chip .m { color: var(--rind); }
.chip:hover .m { color: var(--bark); }

.cardnote { font-size: 11px; font-weight: 700; }
.cardnote a { color: var(--citron); text-decoration: none; border-bottom: 1px solid var(--furrow); padding-bottom: 3px; }
.cardnote a:hover { color: var(--bloom); border-bottom-color: var(--citron); }

/* ---- hero ------------------------------------------------------------- */

.hero {
  border-bottom: var(--rule);
  background:
    repeating-linear-gradient(90deg, transparent 0 63px, rgba(51,66,31,.4) 63px 64px),
    linear-gradient(180deg, var(--canopy), var(--bark));
  padding: var(--s7) 0 var(--s7);
}
.hero-grid { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 940px) { .hero-grid { grid-template-columns: 1.05fr .95fr; gap: var(--s7); } }
.hero .h-page { font-size: clamp(32px, 5.6vw, 58px); max-width: 17ch; }
.hero-graft { border: var(--rule); background: rgba(19,26,12,.6); padding: var(--s5) var(--s4) var(--s4); }
.hero-graft .cardnote { margin: var(--s4) 0 0 6.6rem; }
@media (max-width: 560px) { .hero-graft .cardnote { margin-left: 0; } }

/* ---- lists ------------------------------------------------------------ */

.stack { list-style: none; margin: 0 0 var(--s5); padding: 0; }
.stack li { border-bottom: var(--rule); padding: var(--s2) 0; }
.stack a { text-decoration: none; color: var(--bloom); }
.stack a:hover { color: var(--citron); }

.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.steps li {
  position: relative;
  padding: 0 0 var(--s3) var(--s5);
  color: var(--husk);
  font-size: 16px;
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 0; top: .18em;
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--citron-d);
}

.sitemap-grove { margin: 0 0 var(--s6); }
.sitemap-tree { margin: 0 0 var(--s4); }
.sitemap-tree h3 { font-size: 20px; margin: 0 0 var(--s2); }
.sitemap-tree h3 a { color: var(--bloom); text-decoration: none; }
.sitemap-tree h3 a:hover { color: var(--citron); }

/* ---- footer ----------------------------------------------------------- */

.foot {
  border-top: var(--rule);
  background: var(--canopy);
  padding: var(--s5) 0;
  color: var(--husk-dim);
  font-size: 14px;
}
.foot .wrap { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); justify-content: space-between; align-items: baseline; }
.foot p { margin: 0; max-width: 46ch; }
.foot .nav a { font-size: 11px; }

/* ---- 404 -------------------------------------------------------------- */

.gone { padding: var(--s8) 0; }
.gone-code {
  font-family: var(--font-data);
  font-size: clamp(56px, 14vw, 132px);
  line-height: .9;
  color: var(--furrow);
  margin: 0 0 var(--s3);
}