/*
 * Grove: a calm, warm, outdoor theme for countryside homesteads and holiday cottages, rural tourism, wedding and event
 * venues in nature, gardens and landscaping, plant nurseries, tree and lawn care, farms and farm shops, beekeepers,
 * campsites and eco products. The page sits on warm paper with a faint grain. Coloured bands rise and settle in soft
 * hill lines, a hand-drawn sprig marks headings and dividers, photographs are wide with an arched, leaf-like corner,
 * buttons have leaf corners (one pair round, the other nearly square) that turn over slowly on hover, and the footer
 * opens with a horizon of hills, trees and a little homestead. Large headings take the calm, light weight of a serif.
 *
 * This file draws Grove's own frame (header, phone menu, footer, breadcrumbs, the 404 page, the split hero, the article
 * body and the divider) and the drawn shapes it adds to the Theme Kit's blocks (the sprig under section headings, the
 * leaf before small labels, the hill edges of coloured bands), which kit-theme.css may not load. Every other kit look
 * is in kit-theme.css. Colours come from the palette (palettes/*.css): --background, --surface, --surface-alt,
 * --primary, --primary-alt, --accent, --accent-ink, --on-accent, --on-primary, --text-primary, --text-secondary and
 * --border. The deep --primary is the colour of the land (bands, the footer, the announcement); the warm --accent is
 * the colour of what to press. Plain CSS, no build step. Starts at 320px wide.
 */

/* ------------------------------------------------------------------ Tokens */

:root {
  --grove-gutter: clamp(1.25rem, 4vw, 3rem);
  --grove-width: 72rem;
  /* The frame (header, footer) spans the width the Theme Kit gives its widest sections, so it lines up with a hero. */
  --grove-width-wide: 90rem;
  --grove-header-height: 4.75rem;
  --grove-radius: 1.25rem;
  --grove-radius-large: clamp(1.5rem, 3.5vw, 2.5rem);
  /* A leaf: two opposite corners round, the other two nearly square. */
  --grove-leaf-radius: 1.25rem 0.35rem;
  --grove-leaf-radius-turned: 0.35rem 1.25rem;
  /* The colour of drawn plants: the palette's green (or its deep colour) softened towards the quiet text colour, so it
     reads on light and dark paper alike. */
  --grove-leaf: color-mix(in srgb, var(--primary-alt, #435c49) 55%, var(--text-secondary, #565f55));
  --grove-line: var(--border, #dcd8c6);
  --grove-line-strong: color-mix(in srgb, var(--text-primary, #25302a) 24%, transparent);
  /* Shadows are a deep shade of the land colour, never the text colour (which is light in a dark palette). */
  --grove-shade: color-mix(in srgb, var(--primary, #34493a) 45%, #000);
  --grove-shadow: 0 1px 2px color-mix(in srgb, var(--grove-shade) 10%, transparent), 0 24px 48px -30px color-mix(in srgb, var(--grove-shade) 55%, transparent);
  --grove-ease: cubic-bezier(0.25, 0.8, 0.25, 1);
  --grove-speed: 380ms;
  /* Drawn shapes, used as masks so they take the colour around them: a sprig, a branch, a single leaf, hill edges for
     the tops and bottoms of bands, the horizon over the footer and the grain of the paper. */
  --grove-sprig-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cpath d='M4 12.8L20 11.9L40 11.1L60 10.8L80 11.1L100 11.9L110 12.4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 11.7Q33.7 12.4 36.2 3Q26.5 2.3 24 11.7ZM30 11.4Q32.2 19.9 41 19.3Q38.7 10.8 30 11.4ZM42 11Q51.1 11.7 53.5 2.8Q44.4 2.2 42 11ZM48 10.9Q50.1 18.9 58.3 18.3Q56.2 10.3 48 10.9ZM60 10.8Q68.5 11.4 70.7 3.1Q62.2 2.5 60 10.8ZM66 10.8Q68 18.3 75.7 17.7Q73.7 10.3 66 10.8ZM78 11Q86 11.6 88 3.9Q80.1 3.3 78 11ZM84 11.2Q85.8 18.2 93 17.7Q91.2 10.7 84 11.2ZM96 11.7Q103.4 12.2 105.3 5.1Q97.9 4.6 96 11.7ZM102 12Q103.7 18.4 110.4 18Q108.6 11.5 102 12ZM108 12.3Q113.6 16.9 117.9 11.1Q112.3 6.6 108 12.3Z'/%3E%3C/svg%3E");
  --grove-branch-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 120'%3E%3Cpath d='M14 118L18 96L26 74L36 55L47 39L58 26L68 16' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 96Q17.6 79.6 1.7 75.8Q2.1 92.2 18 96ZM20 92Q34.8 95.1 41.6 81.6Q26.8 78.5 20 92ZM26 74Q24.9 58.8 9.9 56Q11 71.2 26 74ZM28 70Q41.6 73.4 48.5 61.1Q34.8 57.7 28 70ZM36 55Q34.3 41 20.3 39.1Q22 53.1 36 55ZM38 51Q50.5 54.6 57.2 43.5Q44.8 39.9 38 51ZM47 39Q44.8 26.2 31.9 25.1Q34.1 37.9 47 39ZM49 35Q60.3 38.8 66.9 28.9Q55.6 25.1 49 35ZM58 26Q55.4 14.5 43.6 14.1Q46.2 25.6 58 26ZM60 22Q70.2 25.9 76.6 17.1Q66.4 13.2 60 22ZM68 16Q77.1 14.9 76.1 5.8Q67 6.9 68 16Z'/%3E%3C/svg%3E");
  --grove-leaf-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3.5 20.5C3 11 9 4 21 3.2 21.3 14.6 13.6 21 3.5 20.5ZM7.6 16.9 16.4 7.9 17 8.5 8.2 17.5Z'/%3E%3C/svg%3E");
  --grove-hill-top-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 36C160 10 320 2 490 16S780 48 1000 30 1310 0 1440 14V48H0Z'/%3E%3C/svg%3E");
  --grove-hill-top-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 18C200 0 390 6 570 28S910 48 1120 22 1340 6 1440 32V48H0Z'/%3E%3C/svg%3E");
  --grove-hill-bottom-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 32' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V14C1210 28 980 24 720 14S230 4 0 18Z'/%3E%3C/svg%3E");
  --grove-hill-bottom-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 32' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V20C1180 6 900 8 660 20S220 30 0 12Z'/%3E%3C/svg%3E");
  --grove-horizon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 120' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M0 79.9L20 78.8L40 78.5L60 79.2L80 80.8L100 83L120 85.4L140 87.4L160 88.7L180 89.1L200 88.7L220 87.8L240 86.6L260 85.5L280 84.9L300 84.8L320 85.1L340 85.4L360 85.6L380 85.2L400 84.2L420 82.7L440 80.9L460 79.2L480 78.2L500 78.1L520 79.1L540 81.1L560 83.8L580 86.8L600 89.7L620 92.1L640 93.9L660 95L680 95.7L700 96.4L720 97.4L740 98.7L760 100.4L780 102.3L800 104.1L820 105.2L840 105.5L860 104.8L880 103.2L900 101L920 98.6L940 96.6L960 95.3L980 94.9L1000 95.3L1020 96.2L1040 97.4L1060 98.5L1080 99.1L1100 99.2L1120 98.9L1140 98.6L1160 98.4L1180 98.8L1200 99.8L1220 101.3L1240 103.1L1260 104.8L1280 105.8L1300 105.9L1320 104.9L1340 102.9L1360 100.2L1380 97.2L1400 94.3L1420 91.9L1440 90.1L1460 89L1480 88.3L1500 87.6L1520 86.6L1540 85.3L1560 83.6L1580 81.7L1600 79.9V120H0ZM68.6 82.9h2.8v-16.2h-2.8ZM56.8 60.1a13.2 13.2 0 1 0 26.4 0a13.2 13.2 0 1 0 -26.4 0ZM52.2 65.6a10.6 10.6 0 1 0 21.1 0a10.6 10.6 0 1 0 -21.1 0ZM67 66.7a10.3 10.3 0 1 0 20.6 0a10.3 10.3 0 1 0 -20.6 0ZM96 38.5L101.4 57.7L99.1 57.7L104.3 73.1L101.4 73.1L106.4 86.5L85.7 86.5L90.6 73.1L87.7 73.1L92.9 57.7L90.6 57.7ZM116.6 88.1h2.8v-13h-2.8ZM107.2 70.1a10.8 10.8 0 1 0 21.6 0a10.8 10.8 0 1 0 -21.6 0ZM103.4 74.3a8.6 8.6 0 1 0 17.3 0a8.6 8.6 0 1 0 -17.3 0ZM115.5 75.2a8.4 8.4 0 1 0 16.8 0a8.4 8.4 0 1 0 -16.8 0ZM330 34L336 56.1L333.5 56.1L339.2 73.8L336 73.8L341.5 89.2L318.5 89.2L324 73.8L320.8 73.8L326.6 56.1L324 56.1ZM352 48.7L356.8 65.1L354.8 65.1L359.4 78.1L356.8 78.1L361.2 89.5L342.8 89.5L347.2 78.1L344.6 78.1L349.2 65.1L347.2 65.1ZM372.6 88.4h2.8v-15.1h-2.8ZM360.8 68a13.2 13.2 0 1 0 26.4 0a13.2 13.2 0 1 0 -26.4 0ZM356.2 72.2a10.6 10.6 0 1 0 21.1 0a10.6 10.6 0 1 0 -21.1 0ZM371 73.2a10.3 10.3 0 1 0 20.6 0a10.3 10.3 0 1 0 -20.6 0ZM608.6 94h2.8v-18.4h-2.8ZM594.4 68.8a15.6 15.6 0 1 0 31.2 0a15.6 15.6 0 1 0 -31.2 0ZM588.9 74.4a12.5 12.5 0 1 0 25 0a12.5 12.5 0 1 0 -25 0ZM606.4 75.6a12.2 12.2 0 1 0 24.3 0a12.2 12.2 0 1 0 -24.3 0ZM638.6 96.9h2.8v-14h-2.8ZM628 77.7a12 12 0 1 0 24 0a12 12 0 1 0 -24 0ZM623.8 81.9a9.6 9.6 0 1 0 19.2 0a9.6 9.6 0 1 0 -19.2 0ZM637.2 82.8a9.4 9.4 0 1 0 18.7 0a9.4 9.4 0 1 0 -18.7 0ZM685 99.4V84.4L700 70.4L715 84.4V99.4ZM706 79.4V71.4h4v4ZM740.6 101.9h2.8v-16.2h-2.8ZM728.8 79.1a13.2 13.2 0 1 0 26.4 0a13.2 13.2 0 1 0 -26.4 0ZM724.2 84.6a10.6 10.6 0 1 0 21.1 0a10.6 10.6 0 1 0 -21.1 0ZM739 85.7a10.3 10.3 0 1 0 20.6 0a10.3 10.3 0 1 0 -20.6 0ZM520 44.7L524.5 60L522.6 60L526.9 72.3L524.5 72.3L528.6 83.1L511.4 83.1L515.5 72.3L513.1 72.3L517.4 60L515.5 60ZM540 56.3L543.6 67.8L542.1 67.8L545.5 77L543.6 77L546.9 85.1L533.1 85.1L536.4 77L534.5 77L537.9 67.8L536.4 67.8ZM905 68.4L909.5 82.8L907.6 82.8L911.9 94.3L909.5 94.3L913.6 104.4L896.4 104.4L900.5 94.3L898.1 94.3L902.4 82.8L900.5 82.8ZM925 49.3L930.7 70.4L928.3 70.4L933.7 87.3L930.7 87.3L935.9 102.1L914.1 102.1L919.3 87.3L916.3 87.3L921.7 70.4L919.3 70.4ZM948 56.8L953.1 74.1L950.9 74.1L955.8 87.9L953.1 87.9L957.8 100L938.2 100L942.9 87.9L940.2 87.9L945.1 74.1L942.9 74.1ZM968.6 98h2.8v-14h-2.8ZM958 78.8a12 12 0 1 0 24 0a12 12 0 1 0 -24 0ZM953.8 83a9.6 9.6 0 1 0 19.2 0a9.6 9.6 0 1 0 -19.2 0ZM967.2 83.9a9.4 9.4 0 1 0 18.7 0a9.4 9.4 0 1 0 -18.7 0ZM1178.6 101.8h2.8v-17.3h-2.8ZM1165.6 77.8a14.4 14.4 0 1 0 28.8 0a14.4 14.4 0 1 0 -28.8 0ZM1160.6 83.4a11.5 11.5 0 1 0 23 0a11.5 11.5 0 1 0 -23 0ZM1176.7 84.5a11.2 11.2 0 1 0 22.5 0a11.2 11.2 0 1 0 -22.5 0ZM1210 58.9L1215.1 77.2L1212.9 77.2L1217.8 91.8L1215.1 91.8L1219.8 104.5L1200.2 104.5L1204.9 91.8L1202.2 91.8L1207.1 77.2L1204.9 77.2ZM1420 45.5L1425.4 65.6L1423.1 65.6L1428.3 81.8L1425.4 81.8L1430.4 95.9L1409.7 95.9L1414.6 81.8L1411.7 81.8L1416.9 65.6L1414.6 65.6ZM1442.6 92.9h2.8v-16.2h-2.8ZM1429.6 71.3a14.4 14.4 0 1 0 28.8 0a14.4 14.4 0 1 0 -28.8 0ZM1424.6 75.6a11.5 11.5 0 1 0 23 0a11.5 11.5 0 1 0 -23 0ZM1440.7 76.7a11.2 11.2 0 1 0 22.5 0a11.2 11.2 0 1 0 -22.5 0ZM1470 56.6L1474.5 71L1472.6 71L1476.9 82.5L1474.5 82.5L1478.6 92.6L1461.4 92.6L1465.5 82.5L1463.1 82.5L1467.4 71L1465.5 71Z'/%3E%3C/svg%3E");
  --grove-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .26 0 0 0 0 .16 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ Base */

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

/* Whatever is scrolled into view (an anchor, a field reached with the keyboard) stops clear of the sticky header and of
   the bottom edge instead of sitting under or against them. */
html {
  scroll-padding-top: calc(var(--grove-header-height) + 1.5rem);
  scroll-padding-bottom: 1.5rem;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Warm paper with a faint grain. */
body {
  margin: 0;
  background: var(--background, #f6f2e7) var(--grove-paper);
  color: var(--text-primary, #25302a);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

::selection {
  background: color-mix(in srgb, var(--accent, #b2582f) 30%, var(--background, #f6f2e7));
  color: var(--text-primary, #25302a);
}

:focus-visible {
  outline: 2px solid var(--accent-ink, currentColor);
  outline-offset: 3px;
}

.grove-main {
  display: block;
  min-height: 40vh;
}

.grove-main > :where(h1, h2, h3) {
  font-family: var(--font-heading, serif);
  font-weight: var(--grove-heading-weight, 400);
}

/* A word of a heading set in the leaf-ink colour. */
.grove-mark {
  color: var(--accent-ink, #96441f);
}

/* The sprig and the single leaf: drawn plants in the colour around them (the leaf colour unless set). Decorative. */
.grove-sprig {
  display: block;
  flex: none;
  width: 6rem;
  height: 1.2rem;
  background: var(--grove-leaf);
  -webkit-mask: var(--grove-sprig-shape) center / contain no-repeat;
  mask: var(--grove-sprig-shape) center / contain no-repeat;
}

.grove-leaf {
  display: inline-block;
  flex: none;
  width: 0.9em;
  height: 0.9em;
  background: currentColor;
  -webkit-mask: var(--grove-leaf-shape) center / contain no-repeat;
  mask: var(--grove-leaf-shape) center / contain no-repeat;
}

.grove-skip-link {
  position: absolute;
  top: -5rem;
  left: 1rem;
  z-index: 100;
  padding: 0.7rem 1.3rem;
  border-radius: var(--grove-leaf-radius);
  background: var(--accent, #b2582f);
  color: var(--on-accent, #fff9f0);
  font-size: 0.95rem;
  font-weight: var(--grove-body-strong, 600);
  text-decoration: none;
  transition: top 300ms var(--grove-ease);
}

.grove-skip-link:focus {
  top: 1rem;
}

/* ------------------------------------------------------------------ Theme Kit: drawn touches */

/* A section's heading (drawn by the Theme Kit) gets a little sprig under it, centred when the heading is. Kept here
   rather than in kit-theme.css, which may load no pictures. */
.kit-heading-group > .kit-heading--2::after {
  content: "";
  display: block;
  width: 6.75rem;
  height: 1.35rem;
  margin-top: 0.85rem;
  background: var(--grove-leaf);
  -webkit-mask: var(--grove-sprig-shape) center / contain no-repeat;
  mask: var(--grove-sprig-shape) center / contain no-repeat;
}

.kit-heading-group.kit-text--center > .kit-heading--2::after {
  margin-inline: auto;
}

.kit-heading-group.kit-text--end > .kit-heading--2::after {
  margin-inline-start: auto;
}

/* Small labels open with a leaf. */
.kit-eyebrow::before {
  content: "";
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  margin-inline-end: 0.45em;
  vertical-align: -0.12em;
  background: currentColor;
  -webkit-mask: var(--grove-leaf-shape) center / contain no-repeat;
  mask: var(--grove-leaf-shape) center / contain no-repeat;
}

/* On a coloured band, drawn plants take the band's own text colour. */
:is(.kit-section--inverse, .kit-section--accent, .kit-section--image, .kit-slide) .kit-heading-group > .kit-heading--2::after {
  background: color-mix(in srgb, var(--kit-section-fg) 72%, transparent);
}

/* Coloured bands are fields: their top rises in soft hills and their bottom settles in a shallow wave, so the paper
   shows round them. Every other band has the other pair of lines, so the landscape never repeats itself exactly. */
.kit-section--muted,
.kit-section--inverse,
.kit-section--accent,
.kit-section--image {
  --grove-edge-top: clamp(1.5rem, 3.4vw, 3.25rem);
  --grove-edge-bottom: clamp(0.9rem, 1.9vw, 1.75rem);
  --grove-hill-top: var(--grove-hill-top-a);
  --grove-hill-bottom: var(--grove-hill-bottom-a);
  -webkit-mask:
    var(--grove-hill-top) 0 0 / 100% var(--grove-edge-top) no-repeat,
    linear-gradient(#000 0 0) 0 calc(var(--grove-edge-top) - 1px) / 100% calc(100% - var(--grove-edge-top) - var(--grove-edge-bottom) + 2px) no-repeat,
    var(--grove-hill-bottom) 0 100% / 100% var(--grove-edge-bottom) no-repeat;
  mask:
    var(--grove-hill-top) 0 0 / 100% var(--grove-edge-top) no-repeat,
    linear-gradient(#000 0 0) 0 calc(var(--grove-edge-top) - 1px) / 100% calc(100% - var(--grove-edge-top) - var(--grove-edge-bottom) + 2px) no-repeat,
    var(--grove-hill-bottom) 0 100% / 100% var(--grove-edge-bottom) no-repeat;
}

.kit-root:nth-child(4n + 2) > :is(.kit-section--muted, .kit-section--inverse, .kit-section--accent, .kit-section--image),
.kit-root:nth-child(4n + 3) > :is(.kit-section--muted, .kit-section--inverse, .kit-section--accent, .kit-section--image) {
  --grove-hill-top: var(--grove-hill-top-b);
  --grove-hill-bottom: var(--grove-hill-bottom-b);
}

/* A slideshow at the top of a page settles into the paper in a shallow wave, like the bands. */
.kit-root > .kit-slideshow {
  --grove-edge-bottom: clamp(0.75rem, 1.4vw, 1.25rem);
  -webkit-mask:
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--grove-edge-bottom) + 1px) no-repeat,
    var(--grove-hill-bottom-a) 0 100% / 100% var(--grove-edge-bottom) no-repeat;
  mask:
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--grove-edge-bottom) + 1px) no-repeat,
    var(--grove-hill-bottom-a) 0 100% / 100% var(--grove-edge-bottom) no-repeat;
}

/* The paper's grain continues over the plain colour bands. */
.kit-section--muted,
.kit-section--inverse,
.kit-section--accent {
  background-image: var(--grove-paper);
}

/* A rule inside a text is a sprig. */
.kit-rich-text hr {
  width: 5.5rem;
  height: 1.1rem;
  margin-inline: auto;
  border: 0;
  background: var(--grove-leaf);
  -webkit-mask: var(--grove-sprig-shape) center / contain no-repeat;
  mask: var(--grove-sprig-shape) center / contain no-repeat;
}

/* ------------------------------------------------------------------ Buttons */

/* A leaf: the warm accent colour with two round corners; on hover the leaf turns over (the round corners swap) and
   the colour deepens a little, slowly. */
.grove-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  max-width: 100%;
  padding: 0.75rem 1.55rem;
  border: 1.5px solid var(--accent, #b2582f);
  border-radius: var(--grove-leaf-radius);
  background: var(--accent, #b2582f);
  color: var(--on-accent, #fff9f0);
  font-family: var(--font-body, sans-serif);
  font-size: 1rem;
  font-weight: var(--grove-body-strong, 600);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  transition: background-color var(--grove-speed) ease, border-color var(--grove-speed) ease, color var(--grove-speed) ease, border-radius var(--grove-speed) var(--grove-ease), box-shadow var(--grove-speed) ease;
}

.grove-button:hover {
  border-color: color-mix(in srgb, var(--accent, #b2582f) 86%, #000);
  border-radius: var(--grove-leaf-radius-turned);
  background: color-mix(in srgb, var(--accent, #b2582f) 86%, #000);
  box-shadow: 0 14px 26px -18px var(--grove-shade);
}

/* The quiet one: an outline in the text colour that fills with the soft band colour on hover. */
.grove-button--outline {
  border-color: var(--grove-line-strong);
  background: transparent;
  color: var(--text-primary, #25302a);
}

.grove-button--outline:hover {
  border-color: var(--text-primary, #25302a);
  background: var(--surface-alt, #e7ead8);
  color: var(--text-primary, #25302a);
}

.grove-button--small {
  min-height: 2.6rem;
  padding: 0.45rem 1.15rem;
  font-size: 0.94rem;
}

.grove-button--block {
  width: 100%;
}

/* ------------------------------------------------------------------ Announcement and contact line */

.grove-announcement {
  background: var(--primary, #34493a) var(--grove-paper);
  color: var(--on-primary, #f6f2e7);
  font-size: 0.9rem;
}

.grove-announcement[hidden] {
  display: none;
}

.grove-announcement__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 1.1rem;
  max-width: calc(var(--grove-width-wide) + 2 * var(--grove-gutter));
  margin-inline: auto;
  padding: 0.55rem var(--grove-gutter);
  text-align: center;
}

.grove-announcement p {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
}

.grove-announcement .grove-leaf {
  color: color-mix(in srgb, var(--on-primary, #f6f2e7) 70%, transparent);
}

@media (max-width: 639.98px) {
  .grove-announcement .grove-leaf {
    display: none;
  }
}

.grove-announcement a {
  font-weight: var(--grove-body-strong, 600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.grove-announcement a:hover {
  text-decoration-thickness: 2px;
}

.grove-announcement .announcement-dismiss {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}

.grove-announcement svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

/* topbar: the phone, the email and social links on a soft band above the header. */
.grove-topbar {
  background: var(--surface-alt, #e7ead8);
  color: var(--text-secondary, #565f55);
  font-size: 0.86rem;
}

.grove-topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  max-width: calc(var(--grove-width-wide) + 2 * var(--grove-gutter));
  margin-inline: auto;
  padding: 0.45rem var(--grove-gutter);
}

.grove-topbar__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
}

.grove-topbar a {
  color: var(--text-primary, #25302a);
  text-decoration: none;
  transition: color var(--grove-speed) ease;
}

.grove-topbar a:hover {
  color: var(--accent-ink, #96441f);
}

.grove-topbar__social,
.grove-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.grove-topbar__social svg {
  display: block;
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

/* ------------------------------------------------------------------ Header */

/* simple and topbar: the name, the menu at the right and the button, on the page's paper. centered: a masthead, the
   name in the middle (the phone at its left) over a centred menu, with a leaf in the line between them. The header
   stays at the top; once the page scrolls, a hairline and a soft shadow lift it off the page. */
.grove-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--background, #f6f2e7) var(--grove-paper);
  transition: box-shadow var(--grove-speed) ease;
}

.grove-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--grove-line);
  opacity: 0;
  transition: opacity var(--grove-speed) ease;
}

.grove-header.is-scrolled {
  box-shadow: 0 18px 30px -28px var(--grove-shade);
}

.grove-header.is-scrolled::after {
  opacity: 1;
}

.grove-header__bar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.25rem);
  min-height: var(--grove-header-height);
  max-width: calc(var(--grove-width-wide) + 2 * var(--grove-gutter));
  margin-inline: auto;
  padding: 0.5rem var(--grove-gutter);
}

.grove-header__bar--centered {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  min-height: 5.5rem;
}

.grove-header__aside {
  justify-self: start;
  min-width: 0;
}

.grove-header__brand {
  display: inline-flex;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.grove-header__bar--centered .grove-header__brand {
  justify-self: center;
}

.grove-header__bar--centered .grove-brand__name {
  font-size: clamp(1.6rem, 1.2rem + 1.1vw, 2.15rem);
}

/* The rail under the masthead: a hairline with a leaf in its middle, then the menu. */
.grove-header__rail {
  position: relative;
  max-width: calc(var(--grove-width-wide) + 2 * var(--grove-gutter));
  margin-inline: auto;
  padding: 0 var(--grove-gutter);
}

.grove-header__rail::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--grove-line) 12%, var(--grove-line) calc(50% - 1.25rem), transparent calc(50% - 1.25rem), transparent calc(50% + 1.25rem), var(--grove-line) calc(50% + 1.25rem), var(--grove-line) 88%, transparent);
}

.grove-header__rail .grove-leaf {
  position: absolute;
  z-index: 1;
  top: -0.5rem;
  left: 50%;
  width: 1rem;
  height: 1rem;
  transform: translateX(-50%) rotate(-8deg);
  color: var(--grove-leaf);
}

.grove-header__rail .grove-nav--desktop {
  justify-content: center;
  padding: 0.45rem 0 0.55rem;
}

.grove-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.85rem;
  min-width: 0;
}

.grove-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-primary, #25302a);
  font-size: 0.94rem;
  font-weight: var(--grove-body-strong, 600);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--grove-speed) ease;
}

.grove-header__phone .grove-leaf {
  color: var(--grove-leaf);
}

.grove-header__phone:hover {
  color: var(--accent-ink, #96441f);
}

.grove-header__slot {
  display: flex;
  align-items: center;
}

/* The wordmark: the website's name in the heading face, as it is written. */
.grove-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  color: var(--text-primary, #25302a);
}

.grove-brand__name {
  display: block;
  min-width: 0;
  max-width: min(20rem, 56vw);
  overflow: hidden;
  font-family: var(--font-heading, serif);
  font-size: 1.5rem;
  font-weight: var(--grove-heading-weight, 400);
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grove-brand--light {
  color: var(--on-primary, #f6f2e7);
}

/* ------------------------------------------------------------------ Navigation */

.grove-nav--desktop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.15rem 0.35rem;
  min-width: 0;
}

.grove-nav__item {
  position: relative;
}

/* Each link gets a short line in the leaf-ink colour that grows out from its left on hover. */
.grove-nav--desktop .grove-nav__item > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.8rem;
  color: var(--text-primary, #25302a);
  font-size: 0.98rem;
  font-weight: var(--grove-body-strong, 600);
  line-height: 1.3;
  text-decoration: none;
  transition: color var(--grove-speed) ease;
}

.grove-nav--desktop .grove-nav__item > a::after {
  content: "";
  position: absolute;
  right: 0.8rem;
  bottom: 0.3rem;
  left: 0.8rem;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-ink, #96441f);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--grove-speed) var(--grove-ease);
}

.grove-nav--desktop .grove-nav__item > a:is(:hover, :focus-visible),
.grove-nav__item--parent:is(:hover, :focus-within) > a {
  color: var(--accent-ink, #96441f);
}

.grove-nav--desktop .grove-nav__item > a:is(:hover, :focus-visible)::after,
.grove-nav__item--parent:is(:hover, :focus-within) > a::after {
  transform: scaleX(1);
}

.grove-nav__caret {
  width: 0.6rem;
  height: 0.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--grove-speed) var(--grove-ease);
}

.grove-nav__item--parent:is(:hover, :focus-within) .grove-nav__caret {
  transform: rotate(180deg);
}

/* A parent's pages hang under it on a paper card. The padding on top belongs to the list, so the pointer never
   crosses a gap. */
.grove-nav__children {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 60;
  padding-top: 0.6rem;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 0.5rem);
  transition: opacity var(--grove-speed) ease, transform var(--grove-speed) var(--grove-ease), visibility var(--grove-speed);
}

.grove-nav__item--parent:is(:hover, :focus-within) > .grove-nav__children {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.grove-nav__panel {
  display: grid;
  min-width: 15rem;
  max-width: calc(100vw - 2rem);
  padding: 0.55rem;
  border: 1px solid var(--grove-line);
  border-radius: var(--grove-leaf-radius);
  background: var(--surface, #fcfaf3);
  box-shadow: var(--grove-shadow);
}

.grove-nav__panel a {
  display: block;
  padding: 0.55rem 0.95rem;
  border-radius: 0.8rem 0.25rem;
  color: var(--text-primary, #25302a);
  font-size: 0.96rem;
  line-height: 1.45;
  text-decoration: none;
  transition: background-color var(--grove-speed) ease, color var(--grove-speed) ease;
}

.grove-nav__panel a:is(:hover, :focus-visible) {
  background: var(--surface-alt, #e7ead8);
  color: var(--text-primary, #25302a);
}

/* The menu button: a small leaf-shaped tile with two blades of grass (one shorter) that cross when the menu is open. */
.grove-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 1px solid var(--grove-line);
  border-radius: 1.05rem 0.3rem;
  background: var(--surface, #fcfaf3);
  color: var(--text-primary, #25302a);
  cursor: pointer;
  transition: background-color var(--grove-speed) ease, border-radius var(--grove-speed) var(--grove-ease), border-color var(--grove-speed) ease;
}

/* Only where a pointer really hovers: a phone keeps the hover look after a tap. */
@media (hover: hover) {
  .grove-menu-button:hover {
    border-color: var(--grove-line-strong);
    border-radius: 0.3rem 1.05rem;
    background: var(--surface-alt, #e7ead8);
  }
}

.grove-menu-button[aria-expanded="true"] {
  background: var(--surface-alt, #e7ead8);
}

.grove-menu-button__lines {
  position: relative;
  display: block;
  width: 1.2rem;
  height: 0.55rem;
}

.grove-menu-button__lines i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--grove-speed) var(--grove-ease), top var(--grove-speed) var(--grove-ease), width var(--grove-speed) var(--grove-ease);
}

.grove-menu-button__lines i:first-child {
  top: 0;
}

.grove-menu-button__lines i:last-child {
  top: 100%;
  width: 65%;
}

.grove-menu-button[aria-expanded="true"] .grove-menu-button__lines i:first-child {
  top: 50%;
  transform: rotate(45deg);
}

.grove-menu-button[aria-expanded="true"] .grove-menu-button__lines i:last-child {
  top: 50%;
  width: 100%;
  transform: rotate(-45deg);
}

/* ------------------------------------------------------------------ Phone menu */

/* A sheet of paper that settles under the header bar, across the phone or at the right on a tablet, with the pages
   in the heading face, their own pages under them, then the contact details and the button on a soft band. */
.grove-drawer {
  position: fixed;
  top: var(--grove-drawer-top, var(--grove-header-height));
  right: 0;
  left: 0;
  z-index: 49;
  max-height: calc(100dvh - var(--grove-drawer-top, var(--grove-header-height)));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--grove-line);
  border-radius: 0 0 var(--grove-radius-large) var(--grove-radius-large);
  background: var(--background, #f6f2e7) var(--grove-paper);
  box-shadow: 0 30px 50px -30px var(--grove-shade);
  opacity: 1;
  transform: none;
  transition: opacity var(--grove-speed) ease, transform var(--grove-speed) var(--grove-ease);
}

.grove-drawer[hidden] {
  display: none;
}

@starting-style {
  .grove-drawer:not([hidden]) {
    opacity: 0;
    transform: translateY(-0.75rem);
  }
}

@media (min-width: 640px) {
  .grove-drawer {
    left: auto;
    width: min(27rem, 100vw);
    border-left: 1px solid var(--grove-line);
    border-radius: 0 0 0 var(--grove-radius-large);
  }
}

.grove-drawer__inner {
  display: flex;
  flex-direction: column;
  padding: 0.75rem var(--grove-gutter) 1.75rem;
}

.grove-drawer__slot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.5rem 0 1rem;
}

.grove-nav--drawer {
  display: block;
}

.grove-drawer__item + .grove-drawer__item {
  border-top: 1px solid var(--grove-line);
}

.grove-drawer__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 0;
  color: var(--text-primary, #25302a);
  font-family: var(--font-heading, serif);
  font-size: clamp(1.4rem, 5.6vw, 1.75rem);
  font-weight: var(--grove-heading-weight, 400);
  line-height: 1.2;
  text-decoration: none;
  transition: color var(--grove-speed) ease, transform var(--grove-speed) var(--grove-ease);
}

.grove-drawer__link:hover {
  color: var(--accent-ink, #96441f);
  transform: translateX(4px);
}

.grove-drawer__children {
  display: grid;
  gap: 0.1rem;
  padding: 0 0 0.9rem 0.1rem;
}

.grove-drawer__children a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0;
  color: var(--text-secondary, #565f55);
  font-size: 1rem;
  text-decoration: none;
}

.grove-drawer__children a::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  flex: none;
  background: var(--grove-leaf);
  -webkit-mask: var(--grove-leaf-shape) center / contain no-repeat;
  mask: var(--grove-leaf-shape) center / contain no-repeat;
}

.grove-drawer__footer {
  display: grid;
  gap: 0.45rem;
  margin-top: 1rem;
  padding: 1.25rem;
  border-radius: var(--grove-leaf-radius);
  background: var(--surface-alt, #e7ead8);
}

.grove-drawer__contact {
  color: var(--text-primary, #25302a);
  font-size: 1rem;
  font-weight: var(--grove-body-strong, 600);
  text-decoration: none;
}

.grove-drawer__footer .grove-button {
  margin-top: 0.7rem;
}

html.grove-menu-open {
  overflow: hidden;
}

/* Below the desktop width the menu moves into the phone menu. */
@media (max-width: 1023.98px) {
  :root {
    --grove-header-height: 4.25rem;
  }

  .grove-nav--desktop,
  .grove-header__rail,
  .grove-header__cta,
  .grove-header__phone,
  .grove-header__slot {
    display: none;
  }

  .grove-menu-button {
    display: inline-flex;
  }

  .grove-header__bar {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: var(--grove-header-height);
    gap: 1rem;
  }

  .grove-header__bar--centered {
    grid-template-columns: 2.9rem minmax(0, 1fr) 2.9rem;
    min-height: 4.5rem;
  }

  .grove-header__bar--centered .grove-header__actions {
    gap: 0;
  }

  .grove-header__bar--centered .grove-brand__name {
    font-size: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .grove-drawer:not(#site-header.theme-nav-compact .grove-drawer) {
    display: none;
  }
}

@media (max-width: 1279.98px) {
  .grove-header--simple .grove-header__phone {
    display: none;
  }
}

/* A crowded desktop menu moves into the phone menu (the shared resilience script marks the header). */
#site-header.theme-nav-compact .grove-header__rail,
#site-header.theme-nav-compact .grove-header__cta,
#site-header.theme-nav-compact .grove-header__phone {
  display: none;
}

#site-header.theme-nav-compact .grove-header__bar:not(.grove-header__bar--centered) {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* ------------------------------------------------------------------ Breadcrumbs */

.grove-breadcrumbs {
  max-width: calc(var(--grove-width) + 2 * var(--grove-gutter));
  margin-inline: auto;
  padding: 1.5rem var(--grove-gutter) 0;
}

.grove-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  margin: 0;
  padding: 0;
  color: var(--text-secondary, #565f55);
  font-size: 0.9rem;
  list-style: none;
}

.grove-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

/* A small leaf between the steps. */
.grove-breadcrumbs li + li::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  background: var(--grove-leaf);
  -webkit-mask: var(--grove-leaf-shape) center / contain no-repeat;
  mask: var(--grove-leaf-shape) center / contain no-repeat;
}

.grove-breadcrumbs a {
  text-decoration: none;
  transition: color var(--grove-speed) ease;
}

.grove-breadcrumbs a:hover {
  color: var(--accent-ink, #96441f);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.grove-breadcrumbs [aria-current="page"] {
  color: var(--text-primary, #25302a);
  font-weight: var(--grove-body-strong, 600);
}

/* ------------------------------------------------------------------ Footer */

/* The land at the end of the page: a horizon of rolling hills, copses and a little homestead rises out of the paper,
   and below it the footer in the deep land colour. The one-line footer has a plain hill line instead. Standard and
   large footers close with the name, large and quiet, half sunk into the ground. */
.grove-footer {
  --grove-horizon: clamp(4.5rem, 7.5vw, 7rem);
  position: relative;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  padding-top: var(--grove-horizon);
  overflow: hidden;
  background:
    linear-gradient(var(--primary, #34493a), var(--primary, #34493a)) 0 calc(var(--grove-horizon) - 1px) / 100% 100% no-repeat;
  color: var(--on-primary, #f6f2e7);
}

.grove-footer::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: var(--grove-horizon);
  background: var(--primary, #34493a);
  -webkit-mask: var(--grove-horizon-shape) 50% 100% / auto 100% repeat-x;
  mask: var(--grove-horizon-shape) 50% 100% / auto 100% repeat-x;
}

.grove-footer--minimal {
  --grove-horizon: clamp(1.25rem, 2.6vw, 2.25rem);
}

.grove-footer--minimal::before {
  -webkit-mask: var(--grove-hill-top-a) 0 100% / 100% 100% no-repeat;
  mask: var(--grove-hill-top-a) 0 100% / 100% 100% no-repeat;
}

.grove-footer__inner {
  position: relative;
  max-width: calc(var(--grove-width-wide) + 2 * var(--grove-gutter));
  margin-inline: auto;
  padding: clamp(2rem, 4.5vw, 3.5rem) var(--grove-gutter) 1.5rem;
}

.grove-footer--minimal .grove-footer__inner {
  padding-block: 1.75rem;
}

.grove-footer .grove-brand {
  color: inherit;
}

/* A logo the website lets the theme colour takes the footer's light text colour. */
.grove-footer .logo-mask {
  background-color: var(--on-primary, #f6f2e7) !important;
}

.grove-footer__brand {
  display: inline-flex;
  color: inherit;
  text-decoration: none;
}

.grove-footer__closing {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-bottom: clamp(2.25rem, 4.5vw, 3.25rem);
  padding-bottom: clamp(2.25rem, 4.5vw, 3.25rem);
  border-bottom: 1px solid color-mix(in srgb, var(--on-primary, #f6f2e7) 22%, transparent);
}

.grove-footer__closing h2 {
  max-width: 18ch;
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: var(--grove-heading-weight, 400);
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-wrap: balance;
}

/* On the deep land colour the button stays the warm accent; the outline one turns light. */
.grove-footer .grove-button--outline {
  border-color: color-mix(in srgb, var(--on-primary, #f6f2e7) 55%, transparent);
  color: var(--on-primary, #f6f2e7);
}

.grove-footer .grove-button--outline:hover {
  border-color: var(--on-primary, #f6f2e7);
  background: color-mix(in srgb, var(--on-primary, #f6f2e7) 12%, transparent);
  color: var(--on-primary, #f6f2e7);
}

.grove-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 2.25rem 3rem;
}

.grove-footer__about {
  display: grid;
  align-content: start;
  gap: 1rem;
}

.grove-footer__about p {
  max-width: 24rem;
  margin: 0;
  color: color-mix(in srgb, var(--on-primary, #f6f2e7) 84%, transparent);
  font-size: 0.97rem;
}

.grove-footer__social a {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid color-mix(in srgb, var(--on-primary, #f6f2e7) 40%, transparent);
  border-radius: 0.95rem 0.3rem;
  color: var(--on-primary, #f6f2e7);
  transition: background-color var(--grove-speed) ease, color var(--grove-speed) ease, border-radius var(--grove-speed) var(--grove-ease);
}

.grove-footer__social a:hover {
  border-radius: 0.3rem 0.95rem;
  background: var(--on-primary, #f6f2e7);
  color: var(--primary, #34493a);
}

.grove-footer__social svg {
  display: block;
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.grove-footer__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
  font-family: var(--font-heading, serif);
  font-size: 1.15rem;
  font-weight: var(--grove-heading-strong, 600);
  line-height: 1.25;
}

.grove-footer__links {
  display: grid;
  gap: 0.5rem;
}

.grove-footer__links a,
.grove-footer__contact a {
  width: fit-content;
  color: color-mix(in srgb, var(--on-primary, #f6f2e7) 86%, transparent);
  font-size: 0.97rem;
  text-decoration: none;
  text-underline-offset: 0.3em;
  transition: color var(--grove-speed) ease;
}

.grove-footer__links a:hover,
.grove-footer__contact a:hover {
  color: var(--on-primary, #f6f2e7);
  text-decoration: underline;
}

.grove-footer__contact {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  font-style: normal;
}

.grove-footer__contact p:not(.grove-footer__title) {
  margin: 0 0 0.35rem;
  color: color-mix(in srgb, var(--on-primary, #f6f2e7) 86%, transparent);
  font-size: 0.97rem;
}

.grove-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--on-primary, #f6f2e7) 22%, transparent);
}

.grove-footer__copyright {
  margin: 0;
  color: color-mix(in srgb, var(--on-primary, #f6f2e7) 84%, transparent);
  font-size: 0.88rem;
}

.grove-footer__legal,
.grove-footer__inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.grove-footer__legal a {
  color: color-mix(in srgb, var(--on-primary, #f6f2e7) 84%, transparent);
  font-size: 0.88rem;
  text-decoration: none;
}

.grove-footer__legal a:hover,
.grove-footer__inline a:hover {
  color: var(--on-primary, #f6f2e7);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.grove-footer__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
}

.grove-footer__inline a {
  font-size: 0.97rem;
  text-decoration: none;
}

.grove-footer--minimal .grove-footer__legal {
  margin-top: 1rem;
}

/* The name, very large in the heading face and only a shade lighter than the ground, half sunk into the bottom edge.
   Its size follows its length (the layout puts it in one of five classes), so it fills the width on one line and
   never breaks a word. */
.grove-footer__wordmark {
  margin: clamp(1.75rem, 4vw, 3rem) 0 -0.28em;
  overflow: hidden;
  color: color-mix(in srgb, var(--on-primary, #f6f2e7) 16%, var(--primary, #34493a));
  font-family: var(--font-heading, serif);
  font-size: min(13rem, 19vw);
  font-weight: var(--grove-heading-weight, 400);
  letter-spacing: -0.02em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.grove-footer__wordmark--m { font-size: min(11rem, 13.5vw); }
.grove-footer__wordmark--l { font-size: min(8.5rem, 9vw); }
.grove-footer__wordmark--xl { font-size: min(6rem, 6.2vw); }
.grove-footer__wordmark--xxl { font-size: min(4.4rem, 4.6vw); }

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

/* A lost path in the countryside: the number in the heading face over a sprig, the words, the way home, and low hills
   along the bottom. */
.grove-not-found {
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 10vw, 7rem) var(--grove-gutter) clamp(7rem, 14vw, 10rem);
  text-align: center;
}

.grove-not-found__inner {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  margin-inline: auto;
}

.grove-not-found__number {
  margin: 0;
  color: var(--grove-leaf);
  font-family: var(--font-heading, serif);
  font-size: clamp(6rem, 22vw, 11rem);
  font-weight: var(--grove-heading-weight, 400);
  letter-spacing: -0.02em;
  line-height: 1;
}

.grove-not-found .grove-sprig {
  width: 7rem;
  height: 1.4rem;
  margin: 1.25rem auto 1.75rem;
}

.grove-not-found h1 {
  margin: 0 0 1rem;
  font-family: var(--font-heading, serif);
  font-size: clamp(1.9rem, 4.2vw, 2.75rem);
  font-weight: var(--grove-heading-weight, 400);
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-wrap: balance;
}

.grove-not-found p:not(.grove-not-found__number) {
  max-width: 32rem;
  margin: 0 auto 2.25rem;
  color: var(--text-secondary, #565f55);
}

/* Low hills along the bottom of a section: a far hill in a paler tone behind a near one, fading into the paper at
   their foot. Decorative. */
.grove-hills {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(3.5rem, 8vw, 6.5rem);
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 45%, transparent);
  mask: linear-gradient(#000 45%, transparent);
}

.grove-hills::before,
.grove-hills::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask: var(--grove-hill-top-b) 0 0 / 100% 100% no-repeat;
  mask: var(--grove-hill-top-b) 0 0 / 100% 100% no-repeat;
}

.grove-hills::before {
  background: color-mix(in srgb, var(--surface-alt, #e7ead8) 55%, transparent);
}

.grove-hills::after {
  top: 45%;
  background: var(--surface-alt, #e7ead8);
  -webkit-mask-image: var(--grove-hill-top-a);
  mask-image: var(--grove-hill-top-a);
}

/* ------------------------------------------------------------------ Divider block */

.grove-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  max-width: calc(var(--grove-width) + 2 * var(--grove-gutter));
  min-height: clamp(3.5rem, 8vw, 6rem);
  margin-inline: auto;
  padding-inline: var(--grove-gutter);
  color: var(--grove-leaf);
}

/* line: a hairline that fades in from each side towards a sprig. */
.grove-divider__rule {
  display: block;
  flex: 1 1 0;
  max-width: 18rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--grove-line-strong));
}

.grove-divider__rule:last-child {
  background: linear-gradient(90deg, var(--grove-line-strong), transparent);
}

.grove-divider .grove-sprig {
  width: 6.5rem;
  height: 1.3rem;
}

/* dashed: a field path, short rounded dashes across the width. */
.grove-divider__path {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: radial-gradient(closest-side, var(--grove-line-strong) 98%, transparent) 0 50% / 1.1rem 3px repeat-x;
  -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

/* dotted: three leaves, each turned its own way. */
.grove-divider--dotted {
  gap: 0.9rem;
}

.grove-divider--dotted .grove-leaf {
  width: 1.1rem;
  height: 1.1rem;
}

.grove-divider--dotted .grove-leaf:nth-child(1) {
  transform: rotate(-35deg);
}

.grove-divider--dotted .grove-leaf:nth-child(2) {
  color: var(--accent-ink, #96441f);
}

.grove-divider--dotted .grove-leaf:nth-child(3) {
  transform: rotate(35deg) scaleX(-1);
}

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

/* The heading beside a wide photograph that runs to the window's right edge, with an arched, leaf-like corner at its
   top left, a low sun peeping out behind it and a branch growing up beside it. The photo drifts closer very slowly.
   On a phone the photo comes first, edge to edge, its bottom settling in a hill line. Without a photo, words alone,
   centred under a sprig, over low hills. */
.grove-hero {
  position: relative;
  overflow-x: clip;
  padding: clamp(1.5rem, 4vw, 3.5rem) 0 clamp(3rem, 6vw, 5.5rem);
}

.grove-hero__inner {
  --grove-hero-gap: clamp(2.5rem, 5.5vw, 5.5rem);
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: var(--grove-hero-gap);
  max-width: calc(var(--grove-width-wide) + 2 * var(--grove-gutter));
  margin-inline: auto;
  padding-inline: var(--grove-gutter) 0;
}

.grove-hero--words {
  padding-bottom: clamp(6rem, 12vw, 9rem);
}

.grove-hero--words .grove-hero__inner {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1fr);
  max-width: calc(52rem + 2 * var(--grove-gutter));
  padding-inline: var(--grove-gutter);
  text-align: center;
}

.grove-hero__copy {
  display: grid;
  justify-items: start;
  gap: 1.4rem;
  min-width: 0;
  padding-block: 1rem;
}

.grove-hero--words .grove-hero__copy {
  justify-items: center;
}

.grove-hero__copy > .grove-sprig {
  width: 7rem;
  height: 1.4rem;
}

.grove-hero__title {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(2.5rem, 1.35rem + 3.9vw, 5rem);
  font-weight: var(--grove-heading-weight, 400);
  letter-spacing: -0.015em;
  line-height: 1.06;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.grove-hero__lead {
  max-width: 34rem;
  margin: 0;
  color: var(--text-secondary, #565f55);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.22rem);
  line-height: 1.7;
}

/* Selling points are facts on soft, rounded chips: guests, rooms, hectares. */
.grove-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.grove-hero--words .grove-hero__facts {
  justify-content: center;
}

.grove-hero__facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  padding: 0.42rem 1rem 0.42rem 0.75rem;
  border-radius: 1.4rem;
  background: var(--surface-alt, #e7ead8);
  color: var(--text-primary, #25302a);
  font-size: 0.94rem;
  font-weight: var(--grove-body-strong, 600);
  line-height: 1.4;
  text-align: left;
  overflow-wrap: anywhere;
}

.grove-hero__facts .grove-icon {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--accent-ink, #96441f);
  stroke-width: 2;
}

.grove-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.4rem;
}

.grove-hero--words .grove-hero__actions {
  justify-content: center;
}

.grove-hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  color: var(--text-secondary, #565f55);
  font-size: 0.93rem;
}

.grove-hero--words .grove-hero__badges {
  justify-content: center;
}

.grove-hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.grove-stars {
  display: inline-flex;
  gap: 0.1rem;
}

.grove-stars svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: color-mix(in srgb, var(--text-primary, #25302a) 16%, transparent);
}

.grove-stars svg.is-full {
  fill: var(--accent, #b2582f);
}

.grove-hero__trustpilot {
  color: var(--text-primary, #25302a);
  font-weight: var(--grove-body-strong, 600);
  text-decoration: underline;
  text-decoration-color: var(--accent-ink, #96441f);
  text-underline-offset: 0.3em;
}

.grove-hero__media {
  position: relative;
  isolation: isolate;
  min-width: 0;
  margin: 0;
  /* Out to the window's right edge, however wide the window. */
  margin-inline-end: min(0px, calc((var(--grove-width-wide) + 2 * var(--grove-gutter) - 100vw) / 2));
}

.grove-hero__frame {
  display: block;
  overflow: hidden;
  border-radius: clamp(5rem, 11vw, 10rem) 0 0 var(--grove-radius-large);
  background: var(--surface-alt, #e7ead8);
}

.grove-hero__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  max-height: min(78vh, 44rem);
  object-fit: cover;
}

/* The low sun behind the photo's arched corner. */
.grove-hero__media::before {
  content: "";
  position: absolute;
  top: clamp(-2.25rem, -2.5vw, -1rem);
  left: clamp(-2.25rem, -2.5vw, -1rem);
  z-index: -1;
  width: clamp(6rem, 11vw, 10rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent, #b2582f) 55%, var(--background, #f6f2e7));
}

/* The branch growing up beside the photo, its leaves in the leaf colour. It stands in the gap beside the words, never
   over them. */
.grove-hero__branch {
  position: absolute;
  bottom: clamp(1rem, 3vw, 2.5rem);
  left: calc(var(--grove-hero-gap) * -0.85);
  z-index: 1;
  width: clamp(4rem, 6vw, 5.5rem);
  aspect-ratio: 2 / 3;
  background: var(--grove-leaf);
  -webkit-mask: var(--grove-branch-shape) center / contain no-repeat;
  mask: var(--grove-branch-shape) center / contain no-repeat;
  transform-origin: 20% 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .grove-hero__image {
    animation: grove-drift 24s ease-in-out infinite alternate;
  }

  .grove-hero__branch {
    animation: grove-sway 7s ease-in-out infinite alternate;
  }
}

@keyframes grove-drift {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.05);
  }
}

@keyframes grove-sway {
  from {
    transform: rotate(-2deg);
  }

  to {
    transform: rotate(3deg);
  }
}

@media (max-width: 860px) {
  .grove-hero {
    padding-top: 0;
  }

  .grove-hero--words {
    padding-top: clamp(2.5rem, 8vw, 4rem);
  }

  .grove-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    padding-inline: var(--grove-gutter);
  }

  .grove-hero--split .grove-hero__media {
    order: -1;
    margin-inline: calc(-1 * var(--grove-gutter));
  }

  .grove-hero__frame {
    border-radius: 0;
    -webkit-mask:
      linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 1.4rem + 1px) no-repeat,
      var(--grove-hill-bottom-a) 0 100% / 100% 1.4rem no-repeat;
    mask:
      linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 1.4rem + 1px) no-repeat,
      var(--grove-hill-bottom-a) 0 100% / 100% 1.4rem no-repeat;
  }

  .grove-hero__image {
    aspect-ratio: 4 / 3;
    max-height: 62vh;
  }

  .grove-hero__media::before,
  .grove-hero__branch {
    display: none;
  }

  .grove-hero__copy {
    padding-block: 0;
  }
}

/* ------------------------------------------------------------------ Article body */

.grove-article {
  padding: clamp(3.5rem, 7vw, 6rem) var(--grove-gutter);
}

.grove-article--post {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
}

.grove-article__inner {
  max-width: 42rem;
  margin-inline: auto;
}

.grove-article__header {
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}

/* The date and author: small, spaced capitals with a leaf, like a label on a jar. */
.grove-article__byline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.3rem 0.6rem;
  margin: 0 0 1.1rem;
  color: var(--accent-ink, #96441f);
  font-size: 0.8rem;
  font-weight: var(--grove-body-strong, 600);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.grove-article__header h1 {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem);
  font-weight: var(--grove-heading-weight, 400);
  letter-spacing: -0.015em;
  line-height: 1.1;
  text-wrap: balance;
}

.grove-article__header .grove-sprig {
  width: 6.5rem;
  height: 1.3rem;
  margin: 1.6rem auto 0;
}

.grove-prose {
  color: var(--text-primary, #25302a);
  font-size: 1.0625rem;
  line-height: 1.85;
}

.grove-prose > :first-child {
  margin-top: 0;
}

.grove-prose > :last-child {
  margin-bottom: 0;
}

.grove-prose :where(p, ul, ol, figure, table, blockquote, pre) {
  margin: 0 0 1.5em;
}

.grove-prose :where(h2, h3, h4) {
  margin: 2em 0 0.6em;
  font-family: var(--font-heading, serif);
  font-weight: var(--grove-heading-weight, 400);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.grove-prose h2 {
  font-size: clamp(1.7rem, 1.4rem + 1.1vw, 2.2rem);
}

.grove-prose h3 {
  font-size: clamp(1.3rem, 1.2rem + 0.5vw, 1.55rem);
  font-weight: var(--grove-heading-strong, 600);
}

.grove-prose h4 {
  font-size: 1.15rem;
  font-weight: var(--grove-heading-strong, 600);
}

.grove-prose a {
  color: var(--accent-ink, #96441f);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.grove-prose a:hover {
  text-decoration-thickness: 2px;
}

.grove-prose :where(ul, ol) {
  padding-left: 1.25em;
}

.grove-prose li + li {
  margin-top: 0.4em;
}

.grove-prose li::marker {
  color: var(--grove-leaf);
}

/* A quote in the heading face, opened by a large quotation mark in the leaf colour. */
.grove-prose blockquote {
  position: relative;
  margin-inline: 0;
  padding: 0.25rem 0 0 3rem;
  font-family: var(--font-heading, serif);
  font-size: 1.3em;
  line-height: 1.5;
}

.grove-prose blockquote::before {
  content: "\201C";
  position: absolute;
  top: -0.15em;
  left: 0;
  color: var(--grove-leaf);
  font-size: 3.4em;
  line-height: 1;
}

.grove-prose blockquote > :last-child {
  margin-bottom: 0;
}

.grove-prose img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--grove-radius);
}

.grove-prose figcaption {
  margin-top: 0.75rem;
  color: var(--text-secondary, #565f55);
  font-size: 0.9rem;
  text-align: center;
}

/* A rule is a sprig. */
.grove-prose hr {
  width: 6rem;
  height: 1.2rem;
  margin: 3em auto;
  border: 0;
  background: var(--grove-leaf);
  -webkit-mask: var(--grove-sprig-shape) center / contain no-repeat;
  mask: var(--grove-sprig-shape) center / contain no-repeat;
}

.grove-prose table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.grove-prose :where(th, td) {
  padding: 0.75rem 1rem 0.75rem 0;
  border-bottom: 1px solid var(--grove-line);
  text-align: left;
  vertical-align: top;
}

.grove-prose th {
  color: var(--text-secondary, #565f55);
  font-size: 0.88rem;
  font-weight: var(--grove-body-strong, 600);
}

.grove-prose :where(code, pre) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

.grove-prose pre {
  overflow-x: auto;
  padding: 1.25rem;
  border-radius: var(--grove-radius);
  background: var(--surface-alt, #e7ead8);
}

/* ------------------------------------------------------------------ Form thanks */

.grove-form-success {
  display: grid;
  justify-items: start;
  gap: 0.75rem;
  padding: 2rem 0;
}

.grove-form-success h3 {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: 1.85rem;
  font-weight: var(--grove-heading-weight, 400);
  line-height: 1.15;
}

.grove-form-success p {
  margin: 0;
  color: var(--text-secondary, #565f55);
}

.grove-form-success .grove-sprig {
  margin: 0 0 0.5rem;
}

/* ------------------------------------------------------------------ Without JavaScript, and calm motion */

@media (scripting: none) {
  .grove-menu-button {
    display: none !important;
  }

  .grove-drawer[hidden] {
    display: block;
    position: static;
    width: auto;
    max-height: none;
    border: 0;
    border-top: 1px solid var(--grove-line);
    border-radius: 0;
    box-shadow: none;
  }
}

@media (scripting: none) and (min-width: 1024px) {
  .grove-drawer[hidden] {
    display: none;
  }
}

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

  .grove-hero__image,
  .grove-hero__branch {
    animation: none !important;
  }

  .grove-drawer__link:hover {
    transform: none;
  }
}