/* Field. A pale paddock ground, one dahlia accent, and twelve month colours.

   The memorable thing is the growing year, and it is the page grid. Twelve
   equal columns run the width of the container. The top of the page paints
   them as twelve flat colour blocks, August to July; the headline stops on
   the seventh line and the lead and the button start on it; the crops and the
   opening times are drawn across the same columns as bars whose width is
   literally their season; and every split below the hero — the services, the
   steps, the two text-and-picture pairs, the closing pair and the footer —
   lands on a month line too, with the air put inside the children rather than
   in a gap that would push the edges off. A second chart draws the same
   grammar over fourteen days, and the year returns as one flat band above the
   footer.

   Everything else is quiet: flat fields, hairlines, no shadows, no gradients
   used as decoration, and nothing animated but the two states of a link. */

/* ---------- the display face ---------- */
/* Fraunces, by Phaedra Charles and Flavia Zimbardi at Undercase Type, under
   the SIL Open Font License 1.1: fraunces-OFL.txt sits beside it and stays
   with the font wherever it goes. Self-hosted and subset, so the page asks
   the internet for nothing. Variable on one axis (400 to 900), with opsz
   pinned to 144, SOFT to 20 and WONK to 1: the display cut, with the wonky
   leg on the g and the flat-topped a that give it the seed-catalogue look. */

@font-face {
  font-family: "Fraunces Subset";
  src: url("fraunces-subset.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour. --accent is the one meant to change. See README.md. */
  --bg: #f1f3e8;
  --ink: #1c2413;
  --muted: #4b5540;
  --accent: #a8123f;
  --accent-ink: #ffffff;
  --tint: #e3e7d4;
  --rule: #738449;
  --ink-pale: #c8d0b8;
  --rule-ink: #6e7d5b;

  /* The twelve months of the growing year, August (--m1) to July (--m12):
     grey-green shoots, spring greens, gold, the hot middle of summer, autumn
     plum, then winter. Warm means peak. The blocks carry no text, so no
     contrast floor applies to them; every block is outlined in --ink so the
     band reads as one object. --m4 is the only one that also carries type,
     as the step numerals on the dark field, where it measures 9.29:1. */
  --m1: #9caf7f;
  --m2: #86b845;
  --m3: #b5c63c;
  --m4: #e2c437;
  --m5: #ec9f3a;
  --m6: #e4703f;
  --m7: #d9445f;
  --m8: #b81f52;
  --m9: #8e2455;
  --m10: #63304f;
  --m11: #3e4a4a;
  --m12: #64794f;

  /* Type scale. Two scales, both chosen, with a fluid ramp between them
     rather than a ramp that decides for us.

     At 1440 the display runs to 124px over a 17px body, 7.29 to 1, which is
     deliberately outside the band every other design in the library sits in.

     At 390 and below every step is the floor of its own clamp, so the phone
     scale is set rather than interpolated: 44 / 28 / 23 / 20 / 16 / 16 / 14
     / 10, and the display sits at 2.75 to 1 over the body. That ratio is a
     decision too. A phone shows about 46px of the colour band at a time, so
     the band cannot be the loud object there the way it is at 1440, and the
     headline has to hold the fold instead. Six of the nine designs land
     between 2.00 and 2.53 at 390 because that is what their clamps produce;
     this one is outside that on purpose. The lead and the body are the same
     16px there, also on purpose: a 17px lead over a 16px body is a step
     nobody sees and two more lines of phone page, so the lead is told apart
     by where it sits and by the button under it instead.

     Nothing on the page is smaller than --t-small, and no heading is set
     below the body size. */
  --t-display: clamp(2.75rem, 8.7vw, 7.75rem);
  --t-statement: clamp(1.75rem, 4.2vw, 2.75rem);
  --t-h2: clamp(1.4375rem, 2.9vw, 2rem);
  --t-h: clamp(1.25rem, 2.6vw, 1.75rem);
  --t-lead: clamp(1rem, 0.86rem + 0.5vw, 1.3125rem);
  --t-body: clamp(1rem, 0.93rem + 0.24vw, 1.0625rem);
  --t-small: clamp(0.875rem, 0.82rem + 0.2vw, 0.9375rem);
  --t-tiny: clamp(0.625rem, 1.5vw, 0.8125rem);

  /* Spacing scale. */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: clamp(0.875rem, 2.4vw, 1rem);
  --s4: clamp(1.125rem, 3vw, 1.5rem);
  --s5: clamp(1.375rem, 3.4vw, 2.25rem);
  --s6: clamp(2rem, 5vw, 3.5rem);
  --pad: clamp(1rem, 4vw, 3.25rem);
  --band: clamp(1.125rem, 5.5vw, 5rem);

  --display: "Fraunces Subset", Rockwell, "Rockwell Nova", "Roboto Slab", Georgia, serif;
  --sans: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;

  --edge: 2px;
  --band-h: clamp(2rem, 7vw, 6rem);
}

/* ---------- base ---------- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.5;
  overflow-wrap: break-word;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  text-wrap: balance;
}

p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

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

a { color: inherit; }

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

/* One container for the whole page, and it is twelve months wide. Every
   section's left edge is the August edge of the strip and its right edge is
   the July one, so a bar in the hero and a heading four screens down start on
   the same line. */
.wrap {
  max-width: 82rem;
  margin: 0 auto;
  padding-inline: var(--pad);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--ink);
  color: var(--bg);
  padding: var(--s2) var(--s3);
  text-decoration: none;
}
.skip:focus { left: 0; }

/* ---------- top bar ---------- */

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2) var(--s3);
  max-width: 82rem;
  margin: 0 auto;
  padding: var(--s3) var(--pad);
}

.wordmark {
  margin: 0;
  min-width: 0;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.topbar__link {
  display: inline-block;
  padding-block: 0.25rem;
  white-space: nowrap;
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--accent);
}

/* The two underlined-link families on the page, and the one transition they
   share: the underline thickens under a pointer or a focus ring. */
.topbar__link,
.contact a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: text-decoration-thickness 120ms linear;
}
.topbar__link:hover,
.topbar__link:focus-visible,
.contact a:hover,
.contact a:focus-visible { text-decoration-thickness: 3px; }

/* ---------- the growing year: the memorable thing, and the page grid ---------- */
/* The band is painted first and read second. In the markup the promise, the
   lead and the button come before the twelve months, so a screen reader hears
   what the business does before it hears a list of month names; the grid rows
   below put the band back on top for anybody looking at it. The label above
   the band names both the band and the bars through aria-labelledby.

   The --from and --to numbers are inline on each <li>: August is 1, July is
   12, and the closing edge is one higher than the last month. */

.hero { padding-bottom: var(--band); }

.year { display: grid; }

.year__band { grid-row: 1; }
.year__words { grid-row: 2; margin-top: var(--s5); }
.spans { grid-row: 3; }
.season__note { grid-row: 4; }

.months {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.month {
  min-width: 0;
  font-size: var(--t-tiny);
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--muted);
}

.month::before {
  content: "";
  display: block;
  height: var(--band-h);
  margin-bottom: var(--s1);
  background: var(--c);
  border-top: var(--edge) solid var(--ink);
  border-bottom: var(--edge) solid var(--ink);
}

/* The blocks butt against each other, so only the two ends of the band are
   closed. Twelve separately boxed swatches would read as a legend, not a year. */
.month:first-child::before { border-left: var(--edge) solid var(--ink); }
.month:last-child::before { border-right: var(--edge) solid var(--ink); }

h1 {
  font-size: var(--t-display);
  line-height: 0.88;
  letter-spacing: -0.022em;
  margin-bottom: var(--s4);
  /* pretty, not balance: balance evens the lines and pulls the longest one
     53px back off the seventh month line, which is the line the whole hero is
     built on. */
  text-wrap: pretty;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.4;
  margin-bottom: var(--s4);
}

/* The one line of micro-copy on the page, under the button it qualifies. */
.act__note {
  margin: var(--s4) 0 0;
  font-size: var(--t-small);
  line-height: 1.4;
  color: var(--muted);
}

/* The chart label, used above the band and above the freshness chart. It is a
   paragraph, not a heading, because a heading set smaller than body text is a
   heading in name only; it labels its list through aria-labelledby instead. */
.chart-head {
  font-size: var(--t-body);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 var(--s2);
}

.spans {
  list-style: none;
  margin: var(--s5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s3);
}

/* --cols is the number of columns the chart is drawn on. Twelve for the year;
   the freshness chart in the body sets its own, fourteen days. */
.span {
  display: grid;
  grid-template-columns: repeat(var(--cols, 12), minmax(0, 1fr));
  row-gap: var(--s1);
}

/* The label starts where the season starts and is free to run to the right
   edge, so a long name wraps instead of squeezing a three-month bar. */
.span__name {
  grid-row: 1;
  grid-column: var(--from) / -1;
  margin: 0;
  min-width: 0;
  font-size: var(--t-small);
  font-weight: 700;
  line-height: 1.3;
}

.span__when {
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
}

.span__bar {
  grid-row: 2;
  grid-column: var(--from) / var(--to);
  height: 0.8125rem;
  background: var(--c);
  border: var(--edge) solid var(--ink);
}

.season__note {
  margin: var(--s4) 0 0;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- the same chart, small, in the body ---------- */
/* The strip is the design, so the freshness claim is drawn in the strip's own
   language over a different unit: fourteen days instead of twelve months. In a
   narrow column the label runs the full width instead of starting at the bar,
   or a two-column bar would squeeze its own name. */

.chart { min-width: 0; }
.chart .spans { margin-top: 0; }

.spans--tight { gap: var(--s3); }
.spans--tight .span__name { grid-column: 1 / -1; font-size: var(--t-small); }
.spans--tight .span__bar { height: 0.6875rem; }

/* The two ends of a scale, named. Without these the bars are a picture. */
.ends {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  margin: var(--s2) 0 0;
  font-size: var(--t-small);
  line-height: 1.4;
  color: var(--muted);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  border: 3px solid var(--accent);
  padding: 0.7em 1.3em;
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  transition: background-color 120ms linear, color 120ms linear;
}
.btn:hover,
.btn:focus-visible {
  background: var(--bg);
  color: var(--accent);
}
.btn:active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.btn--invert {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--bg);
}
.btn--invert:hover,
.btn--invert:focus-visible {
  background: transparent;
  color: var(--bg);
}
.btn--invert:active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

/* ---------- bands ---------- */
/* Paper, tint, paper, the dark field, tint, the accent, the dark footer. No
   two neighbours share a ground, and the dark field in the middle is the
   early Saturday the section describes. It lives inside an optional section:
   cut that section and the page goes back to an alternating stripe, which the
   README says out loud. */

.band { padding-block: var(--band); }
.band--tint { background: var(--tint); }

.band--dark {
  background: var(--ink);
  color: var(--bg);
}

.section-head {
  font-size: var(--t-h2);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin-bottom: var(--s4);
  max-width: 24ch;
}

.statement {
  font-size: var(--t-statement);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: var(--s4);
}

/* ---------- text, a second object under it, and a framed picture beside ---------- */
/* Two sections are built this way and both put the same three things on the
   grid: words on the first six months, a chart or a quote under them on the
   same six, and the frame on the last six (or the last four, where a square
   picture would otherwise outgrow the words beside it). */

.duo { display: grid; gap: var(--s4); }

/* ---------- the photo slots ---------- */
/* The frame is the constant, not the photograph. A 2px ink frame on the page
   ground, with a caption under a hairline inside it. Empty, the frame holds a
   small table of something true; drop an <img> in and remove is-empty, and
   the photograph takes the frame while the table goes. Neither state is a
   grey rectangle, neither leaves a hole, and nothing is display: none on a
   figure at any width — the stand-in hides, not the figure.

   On a phone the stand-in is as tall as its table, because there is no column
   beside it to strand. From 62em up it takes the slot's own aspect ratio, so
   the frame is the same box whether or not there is a photograph in it and
   the page a buyer ships is the page that was composed. */

.shot {
  margin: 0;
  min-width: 0;
  background: var(--bg);
  border: var(--edge) solid var(--ink);
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.shot--field img { aspect-ratio: 3 / 2; }
.shot--portrait img { aspect-ratio: 1 / 1; }

.shot__stand { display: none; padding: var(--s3) var(--s4); }
.shot.is-empty .shot__stand { display: grid; align-content: center; }

.shot__cap {
  border-top: 1px solid var(--rule);
  padding: var(--s2) var(--s4);
  font-size: var(--t-small);
  line-height: 1.4;
  color: var(--muted);
}

/* A small table of facts, in the page's one table style: a hairline under
   every row, the name on the left, the figure hard right. */

.facts,
.hours {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--t-small);
  line-height: 1.4;
}

.facts__cap,
.hours caption {
  text-align: left;
  font-weight: 700;
  padding-bottom: var(--s2);
}

.facts th,
.hours th {
  font-weight: 400;
  padding: var(--s2) var(--s3) var(--s2) 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.facts td,
.hours td {
  font-weight: 700;
  text-align: right;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.facts tr:last-child th,
.facts tr:last-child td,
.hours tr:last-child th,
.hours tr:last-child td { border-bottom: 0; }

/* ---------- what we sell ---------- */
/* A list, so it gets separators and nothing else: no numbers, no boxes. */

.offers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s4);
}

.offer {
  border-top: var(--edge) solid var(--rule);
  padding-top: var(--s2);
}

.offer__name {
  font-size: var(--t-h);
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin-bottom: var(--s2);
}

.offer__note { color: var(--muted); }

/* ---------- Saturday morning at the gate ---------- */
/* The only numbers on the page, because this is the only real sequence, and
   the only place the gold from November carries type. */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: var(--s3);
}

.step {
  counter-increment: step;
  display: grid;
  gap: var(--s1);
  border-top: var(--edge) solid var(--rule-ink);
  padding-top: var(--s2);
}

.step::before {
  content: counter(step);
  font-family: var(--display);
  font-size: var(--t-h);
  font-weight: 800;
  line-height: 1;
  color: var(--m4);
}

.step p { line-height: 1.45; margin: 0; }

/* ---------- one customer, in her own words ---------- */
/* Not a card and not a pair of cards: a rule across the text column, the way
   every other list on this page is separated, with the line set in the
   display face so it reads as speech and not as body copy. */

.said {
  margin: 0;
  border-top: var(--edge) solid var(--ink);
  padding-top: var(--s4);
}

.said blockquote { margin: 0 0 var(--s3); }

.said blockquote p {
  font-family: var(--display);
  font-size: var(--t-h);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.012em;
}

.said figcaption {
  font-size: var(--t-small);
  color: var(--muted);
}

/* ---------- final call to action ---------- */

.cta {
  background: var(--accent);
  color: var(--accent-ink);
}

.cta__in { padding-block: var(--band); }
.cta :focus-visible { outline-color: var(--bg); }

/* ---------- the year as a band ---------- */
/* The same twelve colours in the same order as the strip, painted as one
   object: full width and thin, as the only rule between the page and the
   footer. The third and last time the device appears. */
.yearband {
  border-top: var(--edge) solid var(--ink);
  border-bottom: var(--edge) solid var(--ink);
  background: linear-gradient(90deg,
    var(--m1) 0 8.3333%, var(--m2) 8.3333% 16.6667%, var(--m3) 16.6667% 25%,
    var(--m4) 25% 33.3333%, var(--m5) 33.3333% 41.6667%, var(--m6) 41.6667% 50%,
    var(--m7) 50% 58.3333%, var(--m8) 58.3333% 66.6667%, var(--m9) 66.6667% 75%,
    var(--m10) 75% 83.3333%, var(--m11) 83.3333% 91.6667%, var(--m12) 91.6667% 100%);
}

.yearline { height: clamp(0.625rem, 1.6vw, 1rem); }

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

.footer {
  background: var(--ink);
  color: var(--bg);
  padding-block: 0 var(--s5);
}

.footer__in { padding-top: var(--band); }

.foot { display: grid; gap: var(--s4); }

.contact {
  list-style: none;
  margin: 0 0 var(--s4);
  padding: 0;
  display: grid;
  gap: var(--s1);
  font-size: var(--t-body);
}

.contact li { min-width: 0; }

.contact a {
  display: inline-block;
  padding-block: 0.2rem;
  overflow-wrap: anywhere;
}

.foot__note {
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-pale);
  max-width: 32rem;
}

.footer .hours caption { color: var(--bg); }
.footer .hours th { color: var(--ink-pale); border-bottom-color: var(--rule-ink); }
.footer .hours td { border-bottom-color: var(--rule-ink); }

.footer__copy {
  margin-top: var(--s3);
  font-size: var(--t-small);
  color: var(--ink-pale);
}

.footer :focus-visible { outline-color: var(--bg); }

/* ---------- narrow phones ---------- */
/* Below 26em a filled slot is cropped shallower, because two photographs at
   their full aspect put the page over the kit's 4,500px ceiling at 320. */

@media (max-width: 26em) {
  .shot--field img { aspect-ratio: 2 / 1; }
  .shot--portrait img { aspect-ratio: 5 / 4; }
}

/* ---------- wider screens ---------- */

@media (min-width: 46em) {
  .spans { gap: var(--s4); }
  .span { row-gap: var(--s2); }
  .span__bar { height: 1.125rem; }
  .span__name { font-size: var(--t-body); }

  .section-head { margin-bottom: var(--s5); }
  .statement { max-width: 16ch; }
  .duo { gap: var(--s5); }
  .offers { gap: var(--s5); }
}

/* ---------- the page grid, from 62em ---------- */
/* One pattern, six times: twelve columns, no column gap, children placed on
   month lines, and the air put inside the child as padding or margin so the
   edge that a reader sees still sits on the line. */

@media (min-width: 62em) {
  .year__words,
  .duo,
  .offers,
  .steps,
  .cta__in,
  .foot {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 0;
  }

  /* The promise runs to the seventh month; the lead and the button start on
     it, with nothing between them and the line. */
  .year__words { align-items: start; margin-top: var(--s6); }
  .year__words h1 { grid-column: 1 / 8; margin-bottom: 0; }
  .year__act { grid-column: 8 / -1; }
  .chart-head { margin-bottom: var(--s3); }
  .season__note { width: calc(100% / 3); }

  /* Words on the first six months, the chart or the quote under them on the
     same six, the frame on the rest. The air between the columns is the text
     column's own right padding, so its left edge and the frame's left edge
     are both on lines. */
  .duo { row-gap: var(--s5); align-items: start; }
  .duo__text { grid-column: 1 / 7; grid-row: 1; padding-right: var(--s6); }
  .duo .chart,
  .duo .said { grid-column: 1 / 7; grid-row: 2; padding-right: var(--s6); }
  .duo .shot--field { grid-column: 7 / 13; grid-row: 1 / 3; }
  .duo .shot--portrait { grid-column: 9 / 13; grid-row: 1 / 3; }

  /* Five months, two months of paddock, five months. */
  .offers { row-gap: var(--s6); }
  .offer:nth-child(odd) { grid-column: 1 / 6; }
  .offer:nth-child(even) { grid-column: 8 / 13; }

  /* Four months each, and the gap between the rules is a margin so every
     rule still starts on a line. */
  .steps { column-gap: 0; }
  .step { padding-top: var(--s3); margin-right: var(--s4); }
  .step:nth-child(1) { grid-column: 1 / 5; }
  .step:nth-child(2) { grid-column: 5 / 9; }
  .step:nth-child(3) { grid-column: 9 / 13; margin-right: 0; }
  .step::before { font-size: var(--t-statement); line-height: 0.95; }

  .cta__in { align-items: start; }
  .statement--cta { grid-column: 1 / 7; margin-bottom: 0; padding-right: var(--s6); }
  .cta__act { grid-column: 7 / 13; }

  .foot__reach { grid-column: 1 / 7; padding-right: var(--s6); }
  .foot .hours { grid-column: 7 / 13; }

  .contact {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s5);
    font-size: var(--t-lead);
  }
}

@media (min-width: 62em) {
  /* The stand-in takes the slot's shape, so the empty frame and the filled
     one are the same box and the layout does not move when a photograph
     arrives. */
  .shot--field .shot__stand { aspect-ratio: 3 / 2; }
  .shot--portrait .shot__stand { aspect-ratio: 1 / 1; }
}

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