/* By the Letters — site styles. Display: Rye (echoes the signs' western lettering). Body: Bitter. */
@font-face{font-family:"Rye";src:url(/assets/fonts/rye-latin.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Bitter";src:url(/assets/fonts/bitter-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --leaf:#1d4a2c;      /* deep garden green: header, hero */
  --leaf-2:#163a22;
  --grass:#4f9a3a;
  --marigold:#f2b632;  /* the one warm accent, from the sign's sunflowers */
  --ink:#1b2a1f;
  --ink-2:#4a5a4e;
  --paper:#ffffff;
  --rule:#d9e2da;
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 "Bitter",Georgia,serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--leaf)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.site-head :focus-visible,.hero :focus-visible,.site-foot :focus-visible{outline-color:var(--marigold)} /* marigold only on dark green; on white it is 1.8:1 */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
@media (min-width:768px){.wrap{padding:0 32px}}
.skip{position:absolute;left:-999px;top:8px;background:var(--marigold);color:var(--ink);padding:8px 14px;z-index:10}
.skip:focus{left:8px}
h1,h2,.brand,.tile-letter,.sign-placeholder span,.foot-brand{font-family:"Rye",Georgia,serif;font-weight:400;letter-spacing:.01em}
h1,h2,h3{line-height:1.15;text-wrap:balance}

/* header */
.site-head{background:var(--leaf);color:#fff}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;flex-wrap:wrap}
.brand{color:#fff;text-decoration:none;font-size:1.6rem}
.site-head nav{display:flex;gap:22px}
.site-head nav a{color:#fff;text-decoration:none;font-weight:600;padding:6px 0;border-bottom:2px solid transparent}
.site-head nav a:hover,.site-head nav a[aria-current]{border-bottom-color:var(--marigold)}

/* buttons */
.btn{display:inline-block;background:var(--marigold);color:var(--ink);font:700 1rem/1 "Bitter",Georgia,serif;padding:15px 24px;border-radius:6px;border:0;text-decoration:none;cursor:pointer}
.btn:hover{background:#ffc94d}
.btn:disabled{background:#e6e9e6;color:#59655c;cursor:not-allowed}

/* hero: the sign itself, standing on its stakes */
.hero{background:linear-gradient(var(--leaf) 0 78%,var(--grass) 78% 100%);color:#fff;padding:56px 0 0}
.hero-grid{display:grid;gap:40px;align-items:end}
@media (min-width:900px){.hero-grid{grid-template-columns:5fr 7fr}}
.hero h1{font-size:clamp(2.3rem,5.5vw,4rem);margin:0 0 18px}
.hero p{font-size:1.15rem;max-width:34ch;margin:0 0 28px;color:#e3eee5}
.hero-copy{padding-bottom:64px}
.staked{margin:0;position:relative;padding-bottom:56px}
.staked img{border:6px solid #fff;border-radius:4px;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.staked::before,.staked::after{content:"";position:absolute;bottom:0;width:10px;height:62px;background:#c9ccc6;border-radius:0 0 3px 3px}
.staked::before{left:22%}.staked::after{right:22%}

/* the alphabet: a rainbow from A to Z */
.alphabet{padding:72px 0 40px}
.alphabet h2{font-size:clamp(1.9rem,4vw,2.8rem);margin:0 0 8px}
.lede{color:var(--ink-2);margin:0 0 32px;max-width:60ch}
.tiles{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:600px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:900px){.tiles{grid-template-columns:repeat(6,minmax(0,1fr))}}
.tile{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);height:100%}
.tile-face{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;background:hsl(var(--h) 78% 66%);display:grid;place-items:center;transition:transform .15s}
.tile:hover .tile-face{transform:translateY(-3px)}
.tile-letter{font-size:clamp(2.6rem,7vw,4.2rem);color:var(--ink);line-height:1}
.tile.is-live .tile-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile.is-live .tile-letter{position:absolute;top:8px;left:8px;font-size:1.5rem;background:#fff;border-radius:4px;padding:4px 9px 2px}
.tile-name{font-weight:600;line-height:1.3;margin-top:9px;font-size:.95rem}
.tile-state{font-size:.85rem;color:var(--ink-2)}
.tile.is-live .tile-state{color:var(--leaf);font-weight:700}
.tiles li:has(.is-live){grid-column:span 2}

/* facts */
.facts{padding:24px 0 80px}
.facts-grid{display:grid;gap:28px;border-top:1px solid var(--rule);padding-top:36px}
@media (min-width:768px){.facts-grid{grid-template-columns:repeat(3,1fr)}}
.facts h3{margin:0 0 6px;font-size:1.25rem}
.facts p{margin:0;color:var(--ink-2)}

/* sign page */
.sign{padding:28px 16px 72px}
.crumbs{font-size:.9rem;color:var(--ink-2);margin-bottom:24px}
.sign-grid{display:grid;gap:40px;align-items:start}
@media (min-width:900px){.sign-grid{grid-template-columns:7fr 5fr}}
.sign .staked::before,.sign .staked::after{background:#b9bdb6}
.sign-placeholder{aspect-ratio:4/3;border-radius:6px;background:hsl(var(--h) 78% 66%);display:grid;place-items:center}
.sign-placeholder span{font-size:clamp(7rem,22vw,14rem);color:var(--ink);line-height:1}
.sign-letter{margin:0 0 6px;color:var(--ink-2);font-weight:600}
.sign h1{font-size:clamp(2.1rem,4.5vw,3.2rem);margin:0 0 18px}
.price{font-size:1.6rem;font-weight:700;margin:0 0 18px}
.price span{font-size:1rem;font-weight:400;color:var(--ink-2)}
.specs{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0 0 26px}
.specs dt{font-weight:700}.specs dd{margin:0;color:var(--ink-2)}
.note{color:var(--ink-2);font-size:.95rem;max-width:42ch}
.pager{display:flex;justify-content:space-between;gap:16px;margin-top:56px;padding-top:20px;border-top:1px solid var(--rule);flex-wrap:wrap}
.pager a{font-weight:600;text-decoration:none}
.pager a:hover{text-decoration:underline}

/* yard photos */
.in-yard{margin-top:56px}
.in-yard h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 16px}
.in-yard-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.in-yard-grid img,.yard-photo img{border-radius:6px}
.yard-photo{margin:28px 0}
.yard-photo figcaption{font-size:.9rem;color:var(--ink-2);margin-top:8px}

/* prose pages */
.prose{max-width:720px;padding-top:48px;padding-bottom:80px}
.prose h1{font-size:clamp(2.2rem,5vw,3.2rem);margin:0 0 20px}
.prose h2{font-size:1.5rem;margin:36px 0 8px}
.prose p{margin:0 0 16px}

/* footer */
.site-foot{background:var(--leaf-2);color:#cfdcd2;padding:40px 0;font-size:.95rem}
.site-foot p{margin:0 0 6px}
.foot-brand{color:#fff;font-size:1.3rem}