/*
TAG page layer. Layout for editorial WordPress pages: About and Contact now,
the legal pages next.

Loaded only on a WP page that is neither the front page nor one of the four
WooCommerce page surfaces (inc/enqueue.php), so no request ever carries this
file and woocommerce.css together and the LCP-critical front page never pays
for it. DESIGN.md 8.1 accounting: 14 critical + 45 components + 30 woocommerce
+ 8 here = 97K against the 100K budget.

Everything these pages render is a DESIGN.md Section 5 component used
unchanged: .story / .story__badge / .story__facts, .section-head, .eyebrow,
.u-mono-label, .spec-readout--full, .why-grid / .why-item, .brand-grid /
.brand-tile, .badge, .notice, .prose, .tag-btn, .breadcrumbs, the 5.12 fields.
The rules below place those components into bands and nothing else. No token
is redefined, no component is restyled, no magic numbers: every value is a
--sp-* step, a concept value already in the system, or a clamp() traceable to
Section 2.

New rules are mobile-first (DESIGN.md 0.2): the two-column states live in
min-width:1001px queries, which is also what keeps components.css's own
max-width:1000px collapse for .story .container reachable.
Budget 8K.
*/

/* ---------------------------------------------------------------------------
   Band 1: .about-story, the page opener.
   --------------------------------------------------------------------------- */

/* The header is fixed and 77px tall (76px bar + hairline) while .section's top
   padding bottoms out at 56px (D4), so the first line of an inner page sits
   under the brand mark at narrow widths. The opener clears it outright. This
   is a band value, not a fix to .section: the same collision exists on every
   inner page and belongs to the QA task, which owns the shared rule. */
.about-story,.contact-head{padding-top:clamp(108px,9vw,124px)}

/* Full width above the two-column grid, so it cannot become a grid item.
   Deliberately not .container: .about-story's .container is display:grid. */
.about-crumbs{max-width:var(--maxw);margin:0 auto var(--sp-6);padding:0 24px}

/* Copy leads on a page opener; the front page's story band leads with the
   badge. Below 1001px components.css collapses .story .container to one
   column, and the DOM order stacks copy above badge. */
@media(min-width:1001px){
  .about-story .container{grid-template-columns:1.1fr .9fr}
}

/* Section 2.3: a page h1 outside the hero reuses .story h2's measured clamp.
   The em rule is .story h2 em, restated because that selector cannot reach an
   h1. The 16px top margin is .hero h1's own value, the system's measured gap
   between an eyebrow and the h1 under it; .story h2's 6px bottom is kept.
   Without it the 1.02 line-height puts the h1's caps ~4px under the eyebrow at
   the narrow end, where the clamp bottoms out at 30px. */
.about-story h1,.contact-head h1{font-size:clamp(30px,4.4vw,50px);text-transform:uppercase;margin:16px 0 6px}
.about-story h1 em{font-style:normal;color:var(--lime-ink)}

/* Standfirst under the h1: .hero__lede's 18px and 46ch measure, in page ink.
   Two classes so it beats .story p (one class, one element) on colour. */
.about-story .about-story__lede,.contact-head__lede{color:var(--ink);font-size:18px;max-width:46ch;margin-top:20px}

/* ---------------------------------------------------------------------------
   Band 2: .about-data, the "Plants don't lie" band.
   Recessed on --bg2 between hairlines, the same treatment as .breeders-band,
   so the page alternates --bg / --bg2 / --bg / --bg2 / --bg down its length.
   --------------------------------------------------------------------------- */
.about-data,.contact-band{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* The grid is a child of .container, never .container itself: combining them
   is what silently drops the 24px side gutter (D10). Two equal columns is the
   Section 3.2 [ADD] two-column value, with its 48px gap. */
.about-data__grid,.contact-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-7);align-items:start}
@media(min-width:1001px){
  .about-data__grid{grid-template-columns:1fr 1fr}
}

/* .section-head carries the eyebrow and the h2 only. Its 34px bottom margin is
   sized for a head that sits above a card grid, not above its own paragraphs. */
.about-data .section-head{margin-bottom:20px}
.about-data__copy p{color:var(--muted);font-size:16px;margin:0 0 16px}
.about-data__copy p:last-child{margin-bottom:0}

/* The readout is a raised element on the recessed band, as it is on the PDP:
   odd rows take --surface, even rows keep the component's own --surface2. */
.about-data .spec-readout--full{background:var(--surface)}

/* Legend for the readout. .u-mono-label supplies the mono/uppercase/.08em/11px
   idiom; weight has to be stated because the global h1,h2,h3 rule sets 800 and
   Space Mono ships 400 and 700 only. Matches the Section 2.3 table header. */
.about-panel__title{font-weight:700;margin:0 0 12px}

/* ---------------------------------------------------------------------------
   Bands 3 and 4 need no rules: .why-grid is already 3-up above 1000px and
   1-up below it, and .breeders-band / .brand-grid / .brand-tile are used
   exactly as the front page uses them.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Band 5: .about-close, the catalogue link, the CTA and the legal note.
   --------------------------------------------------------------------------- */
.about-close{display:flex;flex-direction:column;align-items:center;gap:var(--sp-5);text-align:center}
.about-close__lede{color:var(--muted);font-size:18px;max-width:46ch;margin:0}
/* .prose a cannot reach this paragraph, so the prose link treatment is
   restated for the one inline link the band carries. */
.about-close__lede a{color:var(--lime-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.about-close__lede a:hover{text-decoration-thickness:2px}
/* Fine print reads left-aligned at a comfortable measure even though the band
   is centred. --sp-2 of extra air separates it from the button. */
.about-close .notice{width:100%;max-width:72ch;margin-top:var(--sp-2);text-align:left}

/* --- Contact: the same three bands as About, --bg / --bg2 / --bg. Its opener,
   band surface, h1 clamp, lede and grid base are the rules above with one
   selector added to each, not copies. The close is .about-close as-is; it
   keeps that name only because page-about.php is outside this file set. */

/* The form is the page's job, so it leads: .about-data__grid's split, the
   other way round. */
@media(min-width:1001px){
  .contact-grid{grid-template-columns:1.1fr .9fr}
}

/* Raised card so the fields, which are --surface2, read as fields against it.
   Border, radius and padding are .why-item's, the concept's own card, padding
   fluid so 390px keeps its measure. h2 is 2.3's 28px sub-heading. CF7's sheet
   loads first: the response box needs form[class] because CF7's own
   form.sent etc. rules outrank plain .wpcf7 on specificity. The tip alone
   still wins outright. */
.contact-form{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:clamp(20px,4vw,32px)}
.contact-form h2{font-size:28px;text-transform:uppercase;margin:0 0 20px}
.contact-form .wpcf7 form[class] .wpcf7-response-output{margin:20px 0 0;padding:12px 14px;
  border:1px solid var(--line2);border-radius:var(--radius-sm);font-size:14px;color:var(--ink)}
.contact-form .wpcf7 .wpcf7-not-valid-tip{margin-top:6px;font-size:13px;color:var(--danger)}

/* Aside: mono-label blocks on the bare band, no second surface competing with
   the card. Copy is .prose, so list and links need no rules here. */
.contact-aside__block + .contact-aside__block{margin-top:var(--sp-6)}
.contact-aside .prose{font-size:16px;color:var(--muted)}
.contact-aside .prose > :last-child{margin-bottom:0}

/* Two links, so the buttons are a centred row inside .about-close's column. */
.contact-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}