@immediately-run/grove 0.1.1 → 0.1.3

package/src/GroveApp.css

@@ -6,6 +6,30 @@
   overflow-x: hidden;
 }
 
+/* R3-316 — the escape hatch, pinned where content cannot reach: for !important
+   declarations EARLIER layers win, so grove.reset (the first layer, ordered in
+   index.css) beats grove.content no matter what a ui/stylesheet tries. A reader
+   can always reach a shipped theme without clearing storage — the one guarantee
+   the content layer must not be able to revoke. Proven by test (the hiding
+   vectors are enumerated), not by reading this comment. */
+@layer grove.reset {
+  .grove-root .grove-theme-control,
+  .grove-root .grove-theme-menu {
+    display: revert !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+    pointer-events: auto !important;
+    clip-path: none !important;
+    transform: none !important;
+    position: revert !important;
+    z-index: auto !important;
+    width: revert !important;
+    height: revert !important;
+    overflow: revert !important;
+    filter: none !important;
+  }
+}
+
 /* ============ GROVE THEME TOKENS (the contract) ============ */
 .grove-root {
   --bg: #0a0b11;
@@ -36,6 +60,7 @@
   --wash: radial-gradient(60% 50% at 82% -2%, rgba(178, 133, 242, .12), transparent 60%), radial-gradient(48% 38% at 6% 4%, rgba(244, 154, 212, .06), transparent 60%);
   --disp-weight: 800;
   --prose-measure: 70ch;
+  --prose-leading: 1.6;
   --radius-shape: var(--r-lg);
   background: var(--bg);
   color: var(--ink);
@@ -66,69 +91,209 @@
   --accent-violet: #9a45e6;
 }
 
-/* —— alternate themes: identical DOM, CSS-only re-skin —— */
-.grove-root[data-grove-theme="pixies"] {
-  --bg: #0c0410;
-  --panel: #1a0a1e;
-  --panel-2: #260f2c;
-  --line: rgba(255, 120, 200, .16);
-  --line-2: rgba(255, 120, 200, .3);
-  --ink: #fce9f6;
-  --ink-2: #d79bc9;
-  --ink-3: #9c6a8e;
-  --accent: #ff2d8e;
-  --accent-2: #7b2ff7;
-  --accent-3: #ffd23f;
-  --grad: linear-gradient(96deg, #ffe14d 0%, #ff2d8e 50%, #9d29ff 100%);
-  --glow: 0 0 0 1px rgba(255, 45, 142, .6), 0 0 30px rgba(255, 45, 142, .4);
-  --accent-pink: #ff2d8e;
-  --accent-violet: #9d29ff;
-  --disp-weight: 900;
-  --prose-measure: 66ch;
-  --radius-shape: 8px;
-  --wash: radial-gradient(70% 55% at 85% -5%, rgba(255, 45, 142, .2), transparent 60%), radial-gradient(55% 45% at 4% 2%, rgba(157, 41, 255, .16), transparent 60%);
-}
-.grove-root[data-grove-theme="family"] {
-  --bg: #faf6f1;
-  --panel: #fffdfa;
-  --panel-2: #f4ece2;
+/* —— catalogue themes (R3-310): identical DOM, CSS-only re-skin, token-only —
+   every block declares custom properties and NOTHING else (02-theme-contract §1;
+   scripts/check-theme-token-only.mjs gates it). Per R3-308 the bare
+   [data-grove-theme] block is the theme's PREFERRED polarity and the paired
+   [data-theme] block is the other; GroveWiki always emits data-theme.
+
+   `--sans` is the body-face ROLE: archive puts a serif in it (the contract's
+   documented decision — the faces themselves arrive as declared assets, never a
+   url()). */
+
+/* — archive: encyclopedic reference — dense, quiet, contents-forward — */
+.grove-root[data-grove-theme="archive"] {
+  --bg: #f7f5f1;
+  --panel: #fffefb;
+  --panel-2: #efede7;
+  --line: rgba(52, 60, 65, .16);
+  --line-2: rgba(52, 60, 65, .3);
+  --ink: #23282c;
+  --ink-2: #515a60;
+  --ink-3: #6d777d;
+  --accent: #7a5c20;
+  --accent-2: #3f5a63;
+  --accent-3: #8a6a2c;
+  --grad: linear-gradient(96deg, #b89a56 0%, #7a5c20 55%, #3f5a63 100%);
+  --glow: 0 0 0 1px rgba(122, 92, 32, .4), 0 8px 20px rgba(122, 92, 32, .16);
+  --accent-pink: #7a5c20;
+  --accent-violet: #3f5a63;
+  --sans: "Source Serif 4", Georgia, serif;
+  --disp-weight: 600;
+  --prose-measure: 76ch;
+  --prose-leading: 1.55;
+  --radius-shape: 2px;
+  --wash: radial-gradient(70% 60% at 50% -5%, rgba(122, 92, 32, .07), transparent 65%);
+}
+.grove-root[data-grove-theme="archive"][data-theme="dark"] {
+  --bg: #131517;
+  --panel: #1a1d20;
+  --panel-2: #21252a;
+  --line: rgba(196, 205, 210, .15);
+  --line-2: rgba(196, 205, 210, .26);
+  --ink: #e6e9e7;
+  --ink-2: #aeb6b6;
+  --ink-3: #8b9494;
+  --accent: #c9a35c;
+  --accent-2: #7fa7b3;
+  --accent-3: #b08b45;
+  --grad: linear-gradient(96deg, #c9a35c 0%, #8a6a2c 55%, #7fa7b3 100%);
+  --glow: 0 0 0 1px rgba(201, 163, 92, .45), 0 8px 22px rgba(201, 163, 92, .14);
+  --accent-pink: #c9a35c;
+  --accent-violet: #7fa7b3;
+  --wash: radial-gradient(70% 60% at 50% -5%, rgba(201, 163, 92, .07), transparent 65%);
+}
+
+/* — journal: a personal notebook — warm, short measure, soft frame — */
+.grove-root[data-grove-theme="journal"] {
+  --bg: #faf5ec;
+  --panel: #fffdf8;
+  --panel-2: #f3ebdd;
   --line: rgba(120, 90, 60, .16);
   --line-2: rgba(120, 90, 60, .28);
-  --ink: #3b342c;
-  --ink-2: #7c7062;
-  --ink-3: #a89c8c;
-  --accent: #c8744f;
-  --accent-2: #9a8f5e;
-  --accent-3: #d9a06a;
-  --grad: linear-gradient(96deg, #f3cf9a 0%, #e09a6a 50%, #c8744f 100%);
-  --glow: 0 0 0 1px rgba(200, 116, 79, .4), 0 10px 26px rgba(200, 116, 79, .2);
-  --accent-pink: #c8744f;
-  --accent-violet: #9a8f5e;
-  --disp-weight: 700;
-  --prose-measure: 64ch;
-  --radius-shape: 20px;
-  --wash: radial-gradient(60% 50% at 82% -2%, rgba(224, 154, 106, .14), transparent 60%);
-}
-.grove-root[data-grove-theme="lotr"] {
-  --bg: #ece2cc;
-  --panel: #f4ebd6;
-  --panel-2: #e4d8ba;
-  --line: rgba(90, 70, 40, .22);
-  --line-2: rgba(90, 70, 40, .36);
-  --ink: #322712;
-  --ink-2: #6a5c40;
-  --ink-3: #998a68;
-  --accent: #7a5a2a;
-  --accent-2: #4a5a38;
-  --accent-3: #9a7a3a;
-  --grad: linear-gradient(96deg, #b89a56 0%, #8a6a36 50%, #4a5a38 100%);
-  --glow: 0 0 0 1px rgba(122, 90, 42, .4), 0 8px 20px rgba(122, 90, 42, .22);
-  --accent-pink: #7a5a2a;
-  --accent-violet: #4a5a38;
+  --ink: #3a322a;
+  --ink-2: #6f6355;
+  --ink-3: #93866f;
+  --accent: #a25a3c;
+  --accent-2: #7d6b3f;
+  --accent-3: #c08552;
+  --grad: linear-gradient(96deg, #e8c9a0 0%, #c08552 50%, #a25a3c 100%);
+  --glow: 0 0 0 1px rgba(162, 90, 60, .38), 0 10px 26px rgba(162, 90, 60, .16);
+  --accent-pink: #a25a3c;
+  --accent-violet: #7d6b3f;
+  --sans: "Lora", Georgia, serif;
   --disp-weight: 700;
-  --prose-measure: 72ch;
-  --radius-shape: 4px;
-  --wash: radial-gradient(70% 60% at 50% -5%, rgba(122, 90, 42, .1), transparent 65%);
+  --prose-measure: 60ch;
+  --prose-leading: 1.72;
+  --radius-shape: 18px;
+  --wash: radial-gradient(60% 50% at 82% -2%, rgba(192, 133, 82, .13), transparent 60%);
+}
+.grove-root[data-grove-theme="journal"][data-theme="dark"] {
+  --bg: #191410;
+  --panel: #201a15;
+  --panel-2: #2a221b;
+  --line: rgba(226, 200, 170, .14);
+  --line-2: rgba(226, 200, 170, .25);
+  --ink: #ede4d6;
+  --ink-2: #bdaa94;
+  --ink-3: #97876f;
+  --accent: #d2956b;
+  --accent-2: #a8935c;
+  --accent-3: #c08552;
+  --grad: linear-gradient(96deg, #d9b285 0%, #d2956b 50%, #a8935c 100%);
+  --glow: 0 0 0 1px rgba(210, 149, 107, .4), 0 10px 26px rgba(210, 149, 107, .13);
+  --accent-pink: #d2956b;
+  --accent-violet: #a8935c;
+  --wash: radial-gradient(60% 50% at 82% -2%, rgba(210, 149, 107, .1), transparent 60%);
+}
+
+/* — editorial: loud on purpose — a zine, a gig listing, a release archive — */
+.grove-root[data-grove-theme="editorial"] {
+  --bg: #0d0d0f;
+  --panel: #141417;
+  --panel-2: #1b1b20;
+  --line: rgba(255, 214, 79, .18);
+  --line-2: rgba(255, 214, 79, .34);
+  --ink: #f4f1e6;
+  --ink-2: #c9c4b2;
+  --ink-3: #948f7d;
+  --accent: #ffd64f;
+  --accent-2: #ff4d2e;
+  --accent-3: #37d4a8;
+  --grad: linear-gradient(96deg, #ffd64f 0%, #ff4d2e 55%, #37d4a8 100%);
+  --glow: 0 0 0 1px rgba(255, 214, 79, .7), 0 0 34px rgba(255, 77, 46, .35);
+  --accent-pink: #ff4d2e;
+  --accent-violet: #37d4a8;
+  --disp-weight: 900;
+  --prose-measure: 68ch;
+  --prose-leading: 1.58;
+  --radius-shape: 0px;
+  --wash: radial-gradient(75% 55% at 88% -5%, rgba(255, 77, 46, .16), transparent 60%), radial-gradient(50% 40% at 2% 0%, rgba(55, 212, 168, .12), transparent 55%);
+}
+.grove-root[data-grove-theme="editorial"][data-theme="light"] {
+  --bg: #fbfaf6;
+  --panel: #ffffff;
+  --panel-2: #f1efe6;
+  --line: rgba(20, 20, 25, .2);
+  --line-2: rgba(20, 20, 25, .38);
+  --ink: #17171b;
+  --ink-2: #4c4c55;
+  --ink-3: #71717b;
+  --accent: #c23500;
+  --accent-2: #0f7a5f;
+  --accent-3: #8a6d00;
+  --grad: linear-gradient(96deg, #8a6d00 0%, #c23500 55%, #0f7a5f 100%);
+  --glow: 0 0 0 1px rgba(194, 53, 0, .55), 0 10px 24px rgba(194, 53, 0, .18);
+  --accent-pink: #c23500;
+  --accent-violet: #0f7a5f;
+  --wash: radial-gradient(75% 55% at 88% -5%, rgba(194, 53, 0, .08), transparent 60%);
+}
+
+/* — the catalogue galleries (R3-311): rows enumerated from the manifest — */
+.gg-gallery {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.gg-section {
+  margin-top: 18px;
+}
+.gg-section h3 {
+  font-family: var(--disp);
+  font-weight: var(--disp-weight, 700);
+  font-size: 19px;
+  margin: 0 0 2px;
+}
+.gg-note {
+  color: var(--ink-2);
+  font-size: 13px;
+  margin: 0 0 10px;
+}
+.gg-row {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  padding: 12px 14px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-shape, 10px);
+  background: var(--panel);
+}
+.gg-swatch {
+  flex: 0 0 auto;
+  width: 58px;
+  height: 38px;
+  border-radius: calc(var(--radius-shape, 10px) * 0.7);
+  border: 1px solid var(--line-2);
+}
+.gg-body {
+  min-width: 0;
+}
+.gg-title {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: baseline;
+  font-weight: 600;
+  color: var(--ink);
+}
+.gg-title code {
+  font-family: var(--mono);
+  font-size: 12.5px;
+  background: var(--panel-2);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  padding: 1px 6px;
+}
+.gg-meta {
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--ink-3);
+}
+.gg-summary {
+  color: var(--ink-2);
+  font-size: 13.5px;
+  line-height: 1.5;
+  margin-top: 3px;
 }
 
 /* ============ SHELL ============ */
@@ -238,6 +403,9 @@
   color: var(--ink);
   border-color: var(--accent-2);
 }
+.icbtn:disabled {
+  opacity: .6;
+}
 .icbtn svg {
   width: 17px;
   height: 17px;
@@ -413,6 +581,13 @@
   transition: .12s;
   cursor: pointer;
 }
+button.gs-tree__row {
+  width: 100%;
+  background: transparent;
+  border: 0;
+  font: inherit;
+  text-align: left;
+}
 .gs-tree__row:hover {
   background: var(--panel-2);
   color: var(--ink);
@@ -613,7 +788,9 @@
 /* prose */
 .grove-prose {
   max-width: var(--prose-measure);
-  font: var(--body, 400 16px/1.5 var(--sans));
+  /* R3-310: the leading is a THEME token (the contract's gap-3 addition) — a dense
+     reference look and a roomy notebook differ here without selector changes. */
+  font: 400 16px/var(--prose-leading, 1.6) var(--sans);
   color: var(--ink);
   font-size: 16.5px;
   line-height: 1.62;
@@ -1300,6 +1477,37 @@ a.gdl-row {
   display: flex;
   flex-direction: column;
 }
+/* —— the windowed feed's sentinel + end (R3-314) ——
+   The sentinel is a BUTTON (keyboard-reachable, keyboard-actionable) styled as
+   the skeleton rows it precedes, so the batch arriving below it reads as the
+   same surface continuing. The skeleton bars occupy real height via .sk-line,
+   which is what keeps the boundary shift-free: the box exists before the rows
+   do, and prefers-reduced-motion already stills the shimmer (§.sk rule). */
+.gdl-sentinel {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  width: 100%;
+  padding: 18px 4px;
+  border: 0;
+  border-bottom: 1px solid var(--line);
+  background: none;
+  text-align: left;
+  cursor: pointer;
+}
+.gdl-sentinel:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+.gdl-end {
+  margin: 0;
+  padding: 18px 4px;
+  color: var(--ink-3);
+  font-family: var(--mono);
+  font-size: 12px;
+  letter-spacing: 0.06em;
+}
 .gdl-row {
   display: grid;
   grid-template-columns: 1fr auto;
@@ -1324,6 +1532,33 @@ a.gdl-row {
   letter-spacing: -.01em;
   color: var(--ink);
 }
+
+/* R3-531 — code spans inside frontmatter prose fields (titles, rows, cards,
+   search hits, entry header). No bare `code` rule reaches these surfaces, so
+   one grouped rule carries the prose-code treatment; the font-size is em-
+   relative so the host's size (an 18px row title, a 52px h1) sets the scale
+   and no line height breaks. */
+.grove-entry-header h1 code,
+.gdl-row__t code,
+.gdl-row__d code,
+.gdl-card__t code,
+.gdl-card__d code,
+.gtl-title code,
+.gtl-desc code,
+.grove-bl__t code,
+.grove-search__row .t code,
+.gs-tree__row code,
+.rm-card__t code,
+.rm-project__t code,
+.rm-project__d code {
+  font-family: var(--mono);
+  font-size: 0.86em;
+  color: var(--accent-3);
+  background: var(--panel-2);
+  border: 1px solid var(--line);
+  border-radius: var(--r-xs);
+  padding: 1px 6px;
+}
 .gdl-row__d {
   font-size: 14px;
   color: var(--ink-2);
@@ -1381,6 +1616,25 @@ a.gdl-row {
   inset: 0;
   background: radial-gradient(70% 70% at 75% 15%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
 }
+/* R3-313 — the entry's `cover:` fills the lattice box when present; the lattice
+   stays as the degrade (the box's own background shows through when the image is
+   absent, so nothing shifts layout). */
+.gdl-card__cover {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.gtl-cover {
+  width: 100%;
+  max-height: 96px;
+  object-fit: cover;
+  border-radius: var(--r-sm);
+  margin-bottom: 6px;
+  display: block;
+}
 .gdl-card__foot {
   padding: 14px 15px;
   border-top: 1px solid var(--line);
@@ -1511,6 +1765,9 @@ a.gdl-row {
 .btn-primary:hover {
   box-shadow: var(--glow);
 }
+.btn-primary:disabled {
+  opacity: .6;
+}
 .btn-ghost {
   display: inline-flex;
   align-items: center;
@@ -1620,6 +1877,14 @@ a.gdl-row {
   border-radius: var(--r-md);
   cursor: pointer;
 }
+button.grove-search__row {
+  width: 100%;
+  background: transparent;
+  border: 0;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+}
 .grove-search__row:hover,
 .grove-search__row[data-sel="1"] {
   background: var(--panel-2);
@@ -2287,6 +2552,45 @@ a.gdl-row {
   width: 17px;
   height: 17px;
 }
+/* The composer's stop control (R3-608): visible while a run streams; the
+   38px round shape matches the send control and clears the 24px CSS px
+   target floor (2.5.8). */
+.ga-foot .stop {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  background: var(--panel-2, var(--bg));
+  border: 1px solid var(--line-2);
+  color: var(--ink);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  cursor: pointer;
+}
+.ga-foot .stop svg {
+  width: 15px;
+  height: 15px;
+}
+/* The edit-refusal notice (R3-608, 3.3.1): the sentence rendered where the
+   affordance was offered — nav, entry header, 404, agent panel. */
+.grove-edit-refused,
+.ga-edit-refused {
+  font: 400 11.5px/1.5 var(--mono);
+  color: var(--ink-2);
+  border: 1px solid var(--line-2);
+  border-radius: var(--r-pill, 999px);
+  padding: 3px 9px;
+  white-space: nowrap;
+}
+/* In the sticky nav the sentence must reflow, not push the cluster wide
+   (1.4.10): it ellipsizes against the viewport's width and carries the full
+   text in its title. */
+.grove-nav .grove-edit-refused {
+  max-width: 40vw;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .ga-foot__hand {
   display: flex;
   align-items: center;
@@ -2294,53 +2598,107 @@ a.gdl-row {
   font-size: 11.5px;
   color: var(--ink-3);
 }
-.ga-foot__hand a {
+.ga-foot__hand a,
+.ga-foot__hand button {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   color: var(--ink-2);
+  background: transparent;
+  border: 0;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
 }
-.ga-foot__hand a:hover {
+.ga-foot__hand a:hover,
+.ga-foot__hand button:hover {
   color: var(--accent);
 }
-.ga-foot__hand a svg {
+.ga-foot__hand a svg,
+.ga-foot__hand button svg {
   width: 12px;
   height: 12px;
 }
 
 /* agent banner states (no-key / forbidden / read-only) */
-.ga-banner {
-  margin: 0;
-  border-radius: 0;
-  border: 0;
+/* The reach card (GROVE_AGENT_SPEC §6) — the session envelope, one row per
+   capability, cause attached to every ✗. */
+.ga-reach {
   border-bottom: 1px solid var(--line);
   background: var(--panel-2);
-  padding: 14px 16px;
+  padding: 10px 16px;
   display: flex;
-  gap: 11px;
-  align-items: flex-start;
+  flex-direction: column;
+  gap: 6px;
 }
-.ga-banner svg {
-  width: 18px;
-  height: 18px;
-  color: var(--accent-3);
+.ga-reach__row {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  font-size: 12.5px;
+  line-height: 1.45;
+}
+.ga-reach__mark {
   flex: 0 0 auto;
-  margin-top: 1px;
+  width: 14px;
+  text-align: center;
+  font-family: var(--mono);
+  font-size: 11px;
 }
-.ga-banner__t {
-  font-weight: 600;
-  font-size: 13.5px;
+.ga-reach__row--ok .ga-reach__mark {
+  color: var(--accent);
+}
+.ga-reach__row--blocked .ga-reach__mark {
+  color: var(--ink-3);
+}
+.ga-reach__row--neutral .ga-reach__mark {
+  color: var(--ink-3);
+}
+.ga-reach__label {
   color: var(--ink);
-  margin-bottom: 3px;
+  font-weight: 500;
 }
-.ga-banner__d {
-  font-size: 12.5px;
+.ga-reach__row--blocked .ga-reach__label {
+  color: var(--ink-2);
+  font-weight: 400;
+}
+.ga-reach__row--neutral .ga-reach__label {
+  color: var(--ink-3);
+  font-weight: 400;
+}
+.ga-reach__cause {
   color: var(--ink-2);
+}
+.ga-egress {
+  margin: 0;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--line);
+  font-size: 12px;
   line-height: 1.5;
+  color: var(--ink-2);
 }
-.ga-banner__d a {
-  color: var(--accent);
-  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
+.ga-toast {
+  margin: 10px 16px 0;
+  border: 1px solid color-mix(in srgb, var(--accent-3) 45%, var(--line));
+  border-radius: var(--r-md);
+  background: color-mix(in srgb, var(--accent-3) 8%, var(--panel));
+  padding: 9px 12px;
+  font-size: 12.5px;
+  color: var(--ink-2);
+}
+.ga-activity {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--ink-3);
+  padding: 2px 2px;
+}
+.ga-activity svg {
+  width: 12px;
+  height: 12px;
+  flex: 0 0 auto;
 }
 
 /* ============ EXTENSIBILITY VIEWS ============ */
@@ -2554,6 +2912,48 @@ a.gdl-row {
   margin: 0;
   max-width: 100%;
 }
+/* —— the hero root starter's landing band (R3-309 bucket A) ——
+   Full-bleed over TOP navigation: the band sits under .grove-nav (the base,
+   top arrangement of .grove-shell) and spans the viewport, with the prose
+   centred on the measure. No image element — the picture slot is the
+   link-graph lattice / gradient until `cover:` lands (R3-313), so the band
+   composes from tokens only, exactly like every other starter surface. */
+.grove-hero {
+  grid-column: 1 / -1;
+  min-height: clamp(300px, 52vh, 480px);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: 14px;
+  padding: 48px clamp(20px, 6vw, 96px) 56px;
+  background-image: var(--grad), var(--wash);
+  background-blend-mode: soft-light;
+  background-size: cover;
+  background-position: center;
+  border-bottom: 1px solid var(--line-2);
+}
+.grove-hero__eyebrow {
+  margin: 0;
+  font-family: var(--mono);
+  font-size: 12px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--ink-2);
+}
+.grove-hero h1 {
+  margin: 0;
+  max-width: 18ch;
+  font-family: var(--disp);
+  font-weight: var(--disp-weight);
+  font-size: clamp(34px, 6vw, 64px);
+  line-height: 1.05;
+}
+.grove-hero__lede {
+  margin: 0;
+  max-width: 52ch;
+  color: var(--ink-2);
+  font-size: 17px;
+}
 .grove-section__hero {
   margin-bottom: 30px;
   padding-bottom: 22px;