/* Green Line Lawn & Landscape
   The category is a green gradient, a photograph of a mower, three service cards
   with circular icons, and a quote form at the very bottom where it converts
   nothing. This is a county extension pamphlet instead: flat printed inks, ruled
   tables, and a calendar of the kind that gets stapled inside a seed catalog.

   Type: Zilla Slab, whose flat-sided slabs read as printed rather than rendered,
   against Cabin for anything long.
   Palette: the paper, one green, and a clay that carries every seasonal mark so
   the page is not a monochrome. Straw fills the calendar bands. The neutral is
   pushed green rather than left gray. */

:root{
  --paper:#f3f1e7;
  --card:#ffffff;
  --ink:#1f2a1c;
  --ink-soft:#5c6553;
  --line:#d9d6c6;
  --line-soft:#e6e3d6;
  --green:#2f6b34;
  --green-deep:#224f27;
  /* 4.41:1 on the paper at #b3541e, and the paper is exactly where the month
     marker and the almanac's current row sit. 5.57 here. */
  --clay:#9c4718;
  --straw:#d9cfa8;
  --display:"Zilla Slab",Georgia,"Times New Roman",serif;
  --body:"Cabin","Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hold{max-width:1140px;margin:0 auto;padding:0 clamp(18px,4vw,48px)}

h1,h2,h3,.wordmark,.m-label{font-family:var(--display);font-weight:600;letter-spacing:-.005em}
h1{font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.04;margin:0 0 .5em;text-wrap:balance}
h2{font-size:clamp(1.55rem,3.2vw,2.3rem);line-height:1.12;margin:0 0 .5em;text-wrap:balance}
h3{font-size:1.15rem;line-height:1.3;margin:0 0 .3em}
p{margin:0 0 1em;max-width:62ch}
.lede{font-size:1.1rem;color:var(--ink-soft)}

/* ---------- masthead ----------
   padding-block, not the shorthand: .hold sits on the same element and a
   `padding: x 0` here would cancel its gutter. */
.mast{background:var(--ink);color:var(--paper)}
.mast .hold{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0 32px;padding-block:4px}
.wordmark{font-size:1.2rem;text-decoration:none;letter-spacing:.01em;display:inline-flex;align-items:center;min-height:44px}
.mast nav{display:flex;flex-wrap:wrap;gap:2px 24px}
.mast nav a{font-size:.95rem;color:#c3c9ba;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.mast nav a:hover{color:var(--paper)}
.mast nav a[aria-current="page"]{color:var(--paper);box-shadow:inset 0 -1px 0 var(--straw)}

/* ---------- the top band ----------
   Photograph with the name lying on it, then the headline and the quote form
   side by side. The caption on the studio page promises the form sits beside the
   headline rather than at the bottom, and that promise is the layout. */
.band{position:relative}
.band img{width:100%;height:clamp(150px,22vw,260px);object-fit:cover}
.band .tag{position:absolute;left:0;bottom:0;background:var(--green);color:var(--paper);font-family:var(--display);font-weight:600;font-size:clamp(.95rem,2vw,1.3rem);padding:10px clamp(18px,4vw,34px)}

.top{padding-block:clamp(28px,4vw,52px) clamp(32px,5vw,64px)}
.top-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:start}
.top-copy .lede{max-width:44ch}
.top-facts{list-style:none;margin:1.6em 0 0;padding:0;border-top:1px solid var(--line)}
.top-facts li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:1rem}
.top-facts b{font-weight:600}
.top-facts span{color:var(--ink-soft);text-align:right}

/* the quote form, in a box like a form on a counter */
.quote-box{background:var(--card);border:1px solid var(--line);padding:clamp(20px,3vw,28px)}
.quote-box h2{font-size:1.35rem;margin-bottom:.25em}
.quote-box .why{color:var(--ink-soft);font-size:.95rem;margin-bottom:1.4em}
.form{display:grid;gap:14px}
.f{margin:0}
.form label{display:block;font-family:var(--display);font-weight:600;font-size:.86rem;margin-bottom:6px}
.form input,.form textarea,.form select{width:100%;font:400 1rem/1.5 var(--body);color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:0;padding:12px 13px}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--clay);outline-offset:1px;border-color:var(--clay)}
.form-status{margin:0;color:var(--clay);font-size:.96rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;background:var(--green);color:#fff;border:1px solid var(--green);font:600 1rem var(--display);letter-spacing:.01em;text-decoration:none;padding:12px 26px;cursor:pointer;border-radius:0}
.btn:hover{background:var(--green-deep);border-color:var(--green-deep)}
.btn-wide{width:100%}

/* ---------- the year strip ----------
   The signature, and the reason the form is at the top. A lawn is not a job, it
   is a season, and the strip says which part of it you are standing in. The bar
   is visits per month on one scale, 0 to 4, so a glance shows where the work
   actually lives. This month is marked in clay. */
.year{padding-block:clamp(36px,6vw,80px);border-top:1px solid var(--line)}
.year-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 32px;margin-bottom:1.6em}
.year-head h2{margin:0}
.year-head p{margin:0;color:var(--ink-soft);font-size:.97rem;max-width:40ch}
.months{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2px}
/* Twelve columns on a 1140px measure gives each month about 85px. The first
   version put a whole sentence in that, which ran to seven lines in the worst
   month and forced every cell to 195px of mostly white space: exactly the fine
   print Ben had already had to fix on his own seven-day ledger. The strip now
   carries a two-word label and the sentence lives on the year page, where there
   is a measure to read it in. */
.month{display:flex;flex-direction:column;gap:6px;padding:10px 8px 12px;background:var(--card);border:1px solid var(--line-soft);border-top:3px solid transparent}
.m-label{font-size:.9rem;line-height:1}
.m-bar{display:block;background:var(--straw);height:6px;width:100%}
.m-bar i{display:block;background:var(--green);height:100%}
.m-visits{font-size:.72rem;color:var(--ink-soft);font-variant-numeric:tabular-nums;line-height:1.2}
.m-job{font-size:.82rem;line-height:1.25;color:var(--ink);text-wrap:balance}
.month.is-now{border-top-color:var(--clay);background:#fff;box-shadow:inset 0 0 0 1px var(--clay)}
.month.is-now .m-label{color:var(--clay)}
.month.is-now .m-bar i{background:var(--clay)}
.now-note{margin:1.4em 0 0;padding-left:14px;border-left:3px solid var(--clay);max-width:58ch}
.now-note b{font-family:var(--display)}

/* ---------- service rows ---------- */
.rows{padding-block:clamp(36px,6vw,80px);border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,2fr);gap:8px clamp(20px,4vw,56px);padding:clamp(18px,2.6vw,26px) 0;border-bottom:1px solid var(--line-soft);align-items:baseline}
.rows .row:first-of-type{border-top:1px solid var(--line)}
.row h3{margin:0}
.row p{margin:0;color:var(--ink-soft);font-size:1rem;max-width:56ch}
.row .price{font-family:var(--display);font-weight:600;font-size:1.15rem;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.row .price small{display:block;font-family:var(--body);font-weight:400;font-size:.76rem;color:var(--ink-soft);margin-top:3px}

/* ---------- prose ---------- */
.page-head{padding-block:clamp(32px,5vw,72px) clamp(16px,2vw,28px)}
.page-body{padding-bottom:clamp(40px,7vw,96px)}
.page-body h2{margin-top:1.7em}
.page-body h2:first-child{margin-top:0}
.rule{border:0;border-top:1px solid var(--line);margin:clamp(28px,4vw,48px) 0}
.narrow{max-width:64ch}

/* ---------- the year, expanded ---------- */
.almanac{list-style:none;margin:0;padding:0}
.almanac li{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,7fr);gap:6px clamp(18px,3vw,44px);padding:16px 0;border-bottom:1px solid var(--line-soft);align-items:baseline}
.almanac li:first-child{border-top:1px solid var(--line)}
.almanac .mo{font-family:var(--display);font-weight:600;font-size:1.15rem}
.almanac .vis{font-size:.9rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.almanac p{margin:0;font-size:1rem;color:var(--ink-soft);max-width:60ch}
.almanac li.is-now{background:#fff;box-shadow:inset 3px 0 0 var(--clay);padding-left:14px}
.almanac li.is-now .mo{color:var(--clay)}

/* ---------- foot ---------- */
.foot{background:var(--ink);color:#c3c9ba;padding-block:clamp(32px,5vw,56px)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px clamp(24px,5vw,64px)}
.foot b{display:block;font-family:var(--display);color:var(--paper);font-size:.98rem;margin-bottom:8px}
.foot p{margin:0 0 .35em;font-size:.95rem;max-width:none}
.foot a{color:var(--straw)}

@media (max-width:900px){
  .top-grid{grid-template-columns:1fr}
  .months{grid-template-columns:repeat(6,minmax(0,1fr))}
  .row{grid-template-columns:minmax(0,1fr) auto;gap:4px 20px}
  .row p{grid-column:1/-1}
  .almanac li{grid-template-columns:minmax(0,1fr) auto}
  .almanac p{grid-column:1/-1}
}
@media (max-width:520px){
  .months{grid-template-columns:repeat(3,minmax(0,1fr))}
  .top-copy .lede{max-width:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}