/* Wheeler Landscape - Atascadero - spec build #60 - TYPE-LED
   ---------------------------------------------------------------------------
   ⚠⚠ THE PALETTE WAS CHOSEN, NOT SAMPLED. No logo, truck, sign or photo of
   his own work exists anywhere on the listing, so the locked client-material
   rule cannot be followed and this comment says so (the Paul Cuce #29 /
   Cota's #52 precedent). Chosen: North County golden-hills ochre and oak green.

   Structure: a huge "26" set in the hero (the license tenure is the
   strongest thing he has), one short review printed very large on the
   golden band, the license record, the letter. Serif display. No photos,
   no eyebrows.

   ⚠ EVERY RATIO BELOW WAS COMPUTED, NOT ESTIMATED.
     #8C5F0E ochre on paper 5.22 | white on it 5.59
     #1F1B12 ink on paper 16.03 | on hill 10.41
     #5E5746 muted on paper 6.70
     #F1DFA8 hillL on oak 9.07 | paper on oak 11.22 | hill on oak 7.28
   --------------------------------------------------------------------------- */

:root {
  --paper: #FBF7EC;
  --hill:  #E3C77E;
  --hillL: #F1DFA8;   /* on oak only */
  --ochre: #8C5F0E;
  --oak:   #2F3A22;
  --ink:   #1F1B12;
  --white: #FFFFFF;
  --muted: #5E5746;
  --rule:  #E7DCC4;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --wide: 1120px;
  --sect: clamp(64px, 9vw, 112px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased;
}

/* Browser surfaces. The parts you did not draw still carry the design, and
   this is the cheapest signal that a page was built rather than assembled. */
::selection      { background: var(--hill); color: var(--ink); }
:root            { caret-color: var(--ochre); accent-color: var(--ochre); }
:focus-visible   { outline: 2px solid var(--ochre); outline-offset: 3px; }
a                { color: var(--ochre); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tabular, time, dd, .years { font-variant-numeric: tabular-nums; }
@supports (scrollbar-color: auto) {
  html { scrollbar-color: var(--ochre) var(--paper); scrollbar-width: thin; }
}

.wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: 24px; }
.muted { color: var(--muted); }
h1, h2 { font-family: var(--serif); font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; }
h2 { font-size: clamp(28px, 3.6vw, 40px); margin: 0 0 12px; }
.intro { color: var(--muted); max-width: 60ch; margin: 0 0 30px; }

.btn { display: inline-block; background: var(--ochre); color: var(--white); font-weight: 700;
  text-decoration: none; padding: 15px 26px; border-radius: 3px; white-space: nowrap; }
.btn:hover { background: var(--oak); }

.mast { background: var(--oak); color: var(--paper); }
.mast .wrap { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center;
  justify-content: space-between; padding-block: 16px; }
.mark { margin: 0; font-family: var(--serif); font-size: 24px; font-weight: 700; line-height: 1.15; }
.mark span { display: block; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 500; color: var(--hillL); }
.mast .tel { color: var(--hillL); font-weight: 700; text-decoration: none; white-space: nowrap; }

.hero { padding-block: clamp(56px, 8vw, 110px); border-bottom: 1px solid var(--rule); }
.hero .wrap { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.years { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(140px, 22vw, 300px);
  line-height: .8; color: var(--hill); letter-spacing: -0.04em; }
.hero h1 { font-size: clamp(34px, 4.6vw, 56px); margin: 0 0 20px; }
.lede { font-size: 19px; max-width: 44ch; margin: 0 0 28px; }

.quote { background: var(--hill); padding-block: var(--sect); }
.review { margin: 0; }
.review blockquote { margin: 0; }
.review p { font-family: var(--serif); font-size: clamp(34px, 5vw, 64px); line-height: 1.12; margin: 0; max-width: 18ch; letter-spacing: -0.015em; }
.review figcaption { margin-top: 20px; font-size: 16px; }
.rating { margin: 28px 0 0; font-size: 16px; }

.license { padding-block: var(--sect); }
.license .wrap { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(28px, 5vw, 72px); }
.record { margin: 0; border-top: 2px solid var(--ink); }
.record div { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.record dt { color: var(--muted); font-size: 15px; }
.record dd { margin: 0; }
.record .hi dd { font-family: var(--serif); font-weight: 700; font-size: 22px; color: var(--ochre); }

.reach { background: var(--oak); color: var(--paper); padding-block: clamp(48px, 7vw, 80px); }
.reach .wrap { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.reach h2 { margin-bottom: 6px; }
.reach .muted { color: var(--hillL); margin: 0; }
.big { margin: 0; font-family: var(--serif); font-size: clamp(30px, 4vw, 46px); font-weight: 700; }
.big a { color: var(--paper); text-decoration: none; }

.letter { padding-block: var(--sect); }
.letter .wrap { max-width: 700px; }
.letter p { font-family: var(--serif); font-size: 19px; line-height: 1.7; margin: 0 0 18px; }
.sign { margin-top: 26px !important; font-weight: 700; }

footer { background: var(--ink); color: var(--paper); padding-block: 56px 96px; }
footer .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
footer h4 { margin: 0 0 8px; font-family: var(--serif); font-size: 18px; }
footer p { margin: 0 0 4px; color: var(--hillL); font-size: 15px; }
footer a { color: var(--hillL); }
footer .legal { grid-column: 1 / -1; margin-top: 18px; padding-top: 18px; border-top: 1px solid #3A3426; font-size: 13px; line-height: 1.6; color: #D9CFB8; }

.callbar { display: none; }

@media (max-width: 760px) {
  .hero .wrap, .license .wrap { grid-template-columns: 1fr; }
  .years { font-size: 150px; }
}
@media (max-width: 600px) {
  footer .wrap { grid-template-columns: 1fr; }
  .record div { grid-template-columns: 1fr; gap: 2px; }
  .mast .tel { display: none; }
  .callbar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--oak);
  }
  .callbar a { display: block; text-align: center; background: var(--ochre); color: var(--white);
    font-weight: 700; text-decoration: none; border-radius: 3px; padding: 14px; }
}