/* =====================================================================
   ALTA TERRA HOMES - shared styles for every page.
   Tokens, base type, header (with the phone menu), footer, bands,
   grids, cards, buttons, forms, scroll reveals, and the DRAFT marker.
   Static site, no build step. Rules a single page needs stay in that
   page's own <style>. Link this file first, then /assets/site.js (defer).
   ===================================================================== */

/* ---- tokens ---- */
:root{
  --limestone:#EDE8DF;   /* page ground */
  --bone:#F6F2EA;        /* lifted panels */
  --slate:#2B2B2A;       /* primary text */
  --slate-soft:#52514C;  /* secondary text */
  --stone:#9A938A;       /* hairlines, captions on dark */
  --bronze:#7A5C3E;      /* single accent: weathered bronze */
  --bronze-deep:#5E4530;
  --strata:#D8D0C2;      /* earth-strata band */
  --strata-2:#E3DCCF;
  --field-edge:#7A746B;  /* form field and choice edges: 3:1 on limestone and bone */

  --maxw:1080px;
  --gutter:clamp(1.4rem,5vw,5rem);
  --serif:"Newsreader",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* ---- base ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:6rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--limestone);
  color:var(--slate);
  font-family:var(--sans);
  font-size:clamp(1rem,0.5vw + 0.95rem,1.12rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
[hidden]{display:none !important}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.band-dark :focus-visible,.inquiry :focus-visible,.hero :focus-visible,footer.site :focus-visible{outline-color:#e7d9c4}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* skip link: first element in <body>, visible only when focused */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--slate);color:var(--bone);
  padding:.7rem 1.1rem;font-size:.9rem;letter-spacing:.04em;text-decoration:none;border-radius:0 0 2px 0}
.skip:focus{left:0}

/* ---- type ---- */
/* Headings use Newsreader. Fraunces was dropped on 2026-10-30: its f hook runs into the next letter at heading sizes (fi, fir). */
h1,h2,h3{font-family:var(--serif);font-weight:420;line-height:1.08;letter-spacing:-0.01em;text-wrap:balance}
h1{font-size:clamp(2.6rem,6vw,4.7rem);font-weight:340}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:1.32rem;line-height:1.2}
.eyebrow{
  font-family:var(--sans);font-size:0.78rem;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--bronze);
  margin-bottom:1.4rem;display:block;
}
.lede{font-size:clamp(1.18rem,1.5vw,1.45rem);line-height:1.55;color:var(--slate-soft);font-family:var(--serif);font-weight:340}
h1 + .lede,h2 + .lede{margin-top:1.2rem}
p + p{margin-top:1.1rem}
.measure{max-width:60ch}
.body{color:var(--slate-soft);max-width:60ch;margin-top:1.4rem}
.note{font-size:0.9rem;color:var(--slate-soft);max-width:60ch}
.link{color:var(--bronze);text-decoration:none;border-bottom:1px solid var(--bronze);transition:border-color .2s,color .2s}
.link:hover{color:var(--bronze-deep);border-bottom-color:var(--bronze-deep)}

/* ---- nav ---- */
header.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--limestone) 88%,transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid transparent;transition:border-color .3s ease;
}
header.nav.scrolled,header.nav.menu-open{border-bottom-color:var(--strata)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:1.05rem var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.mark{display:flex;align-items:center;gap:.6rem;text-decoration:none;white-space:nowrap;flex:none}
.mark svg{display:block;height:44px;width:auto;flex:none}
.mark .mark-word{font-family:var(--sans);font-size:0.92rem;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--slate)}
.nav-links{display:flex;gap:2rem}
/* header links: .45rem of padding so the tap target reaches 24px; the underlines are text-decoration, so they stay tight to the text */
.nav-links a{font-size:0.82rem;letter-spacing:0.06em;color:var(--slate-soft);text-decoration:none;transition:color .2s;white-space:nowrap;padding:.45rem 0}
.nav-links a:hover{color:var(--bronze)}
.nav-links a[aria-current]{color:var(--slate);text-decoration:underline;text-decoration-color:var(--strata);text-underline-offset:.4em}
.nav-cta{font-size:0.82rem;letter-spacing:0.06em;color:var(--slate);white-space:nowrap;padding:.45rem 0;
  text-decoration:underline;text-decoration-color:var(--bronze);text-underline-offset:.4em}
.nav-right{display:flex;align-items:center;gap:1.4rem}
.nav-call{font-size:0.82rem;letter-spacing:0.06em;color:var(--slate-soft);text-decoration:none;white-space:nowrap;transition:color .2s;padding:.45rem 0}
.nav-call:hover{color:var(--bronze)}

/* hamburger: hidden on wide screens, shown under 961px (the full row needs about 945px) */
.nav-toggle{display:none;background:none;border:0;padding:0;width:40px;height:40px;margin:-8px -10px -8px -6px;
  cursor:pointer;align-items:center;justify-content:center;color:var(--slate);border-radius:2px;flex:none}
.nav-toggle .bars{position:relative;display:block;width:20px;height:2px;background:currentColor;transition:background .2s}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;transition:transform .25s ease}
.nav-toggle .bars::before{top:-6px}
.nav-toggle .bars::after{top:6px}
.nav-toggle[aria-expanded="true"] .bars{background:transparent}
.nav-toggle[aria-expanded="true"] .bars::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars::after{transform:translateY(-6px) rotate(-45deg)}

@media(max-width:960px){
  .nav-toggle{display:inline-flex}
  .nav-right{gap:1rem}
  .nav-call,.nav-cta{font-size:0.8rem}
  /* the menu drops below the header; header.nav is the positioned ancestor */
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:var(--limestone);border-top:1px solid var(--strata);border-bottom:1px solid var(--strata);
    padding:.4rem var(--gutter) .9rem;box-shadow:0 18px 28px -20px rgba(43,43,42,.45)}
  header.nav.menu-open .nav-links{display:flex}
  .nav-links a{font-size:1rem;letter-spacing:.03em;padding:.85rem 0;border-bottom:1px solid var(--strata-2);color:var(--slate)}
  .nav-links a:last-child{border-bottom:none}
  .nav-links a[aria-current]{color:var(--bronze);text-decoration:none;border-bottom:1px solid var(--strata-2);padding-bottom:.85rem}
}
/* no script, no menu button: show the links as a wrapped row under the logo row */
@media(max-width:960px) and (scripting:none){
  .nav-toggle{display:none}
  .nav-inner{flex-wrap:wrap}
  .nav-links{display:flex;position:static;flex:1 0 100%;order:3;flex-direction:row;flex-wrap:wrap;gap:0 1.4rem;
    background:none;border:0;box-shadow:none;padding:0}
  .nav-links a{font-size:0.82rem;letter-spacing:0.06em;padding:.45rem 0;border-bottom:none;color:var(--slate-soft)}
  .nav-links a[aria-current]{color:var(--slate);text-decoration:underline;text-decoration-color:var(--strata);text-underline-offset:.4em;border-bottom:none;padding-bottom:.45rem}
}
/* keep the wordmark on phones: shrink, don't drop */
@media(max-width:480px){.nav-inner{padding:.85rem var(--gutter);gap:.6rem}.mark{gap:.45rem}.mark svg{height:34px}.mark .mark-word{font-size:0.76rem;letter-spacing:0.12em}.nav-right{gap:.75rem}.nav-call,.nav-cta{font-size:0.8rem;letter-spacing:0.03em}}
@media(max-width:360px){.nav-inner{gap:.4rem}.mark .mark-word{font-size:0.7rem;letter-spacing:0.04em}.nav-call,.nav-cta{font-size:0.8rem;letter-spacing:0}.nav-right{gap:.4rem}}
/* the logo no longer shrinks, so on the very narrowest screens the call and Start row drops under it */
@media(max-width:300px){.nav-inner{flex-wrap:wrap;row-gap:.2rem}}

/* ---- strata divider (the house mark between sections) ---- */
.strata{height:7px;width:100%;border:none;
  background:
    linear-gradient(var(--strata),var(--strata)) 0 0/100% 2px no-repeat,
    linear-gradient(var(--strata-2),var(--strata-2)) 0 4px/100% 1px no-repeat;
}

/* ---- sections and bands ---- */
section{padding:clamp(4.5rem,9vw,8rem) 0}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
@media(scripting:none){.reveal{opacity:1;transform:none}}

.band-bone,.proof,.who{background:var(--bone)}
.band-dark,.inquiry{background:var(--slate);color:var(--bone)}
.band-dark .eyebrow,.inquiry .eyebrow{color:#e7d9c4}
.band-dark h1,.band-dark h2,.band-dark h3,.inquiry h2{color:var(--bone)}
.band-dark .lede,.band-dark p,.inquiry p.lede{color:#d8d2c6}
.band-dark a:not(.btn),.inquiry a:not(.btn){color:#e7d9c4}
.band-dark .link,.inquiry .link{border-bottom-color:currentColor}

/* ---- hero (home) ---- */
.hero{
  position:relative;min-height:88vh;min-height:88svh;display:flex;align-items:flex-end;
  /* [IMG SLOT: hero - quiet stone / Farmington Valley landscape, desaturated, ~2400px wide] */
  background:
    linear-gradient(to top,rgba(43,43,42,.62) 0%,rgba(43,43,42,.15) 45%,rgba(43,43,42,.05) 100%),
    linear-gradient(rgba(43,43,42,.60),rgba(43,43,42,.60)),
    linear-gradient(135deg,#6f685c,#9a938a 60%,#b6ad9f);
  background-size:cover;background-position:center;
  padding-bottom:clamp(3rem,7vw,6rem);
}
.hero .wrap{width:100%}
.hero h1{color:var(--bone);max-width:20ch}
.hero .eyebrow{color:#e7d9c4}
.hero p.lede{color:#efe9df;max-width:50ch;margin-top:1.5rem}
@media(max-width:360px){.hero h1{font-size:clamp(1.7rem,8.6vw,2.6rem)}}
.hero .btn-quiet{color:var(--bone);border-color:rgba(246,242,234,.6)}
.hero .btn-quiet:hover{border-color:var(--bone);background:rgba(246,242,234,.08)}

/* ---- page header (inner pages) ---- */
.page-hero{padding-top:clamp(4rem,8vw,7rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
.page-hero h1{font-size:clamp(2.4rem,5.5vw,4rem);max-width:18ch;margin-top:.4rem}
.page-hero .lede{max-width:58ch;margin-top:1.6rem}

/* ---- buttons ---- */
.btn,.submit{
  display:inline-block;background:var(--bronze);color:var(--bone);border:1px solid var(--bronze);
  font-family:var(--sans);font-size:0.9rem;letter-spacing:.08em;line-height:1.3;
  padding:.95rem 2.4rem;border-radius:2px;cursor:pointer;text-decoration:none;
  transition:background .2s,border-color .2s;
}
.btn:hover,.submit:hover{background:var(--bronze-deep);border-color:var(--bronze-deep)}
.submit:disabled{opacity:.7;cursor:default}
.btn-quiet{background:transparent;color:var(--slate);border-color:var(--stone)}
.btn-quiet:hover{background:transparent;color:var(--slate);border-color:var(--slate)}
.band-dark .btn-quiet{color:var(--bone);border-color:rgba(246,242,234,.6)}
.band-dark .btn-quiet:hover{color:var(--bone);border-color:var(--bone);background:rgba(246,242,234,.08)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:2.2rem}
.cta-row .aside{font-size:.95rem;color:var(--slate-soft)}
.band-dark .cta-row .aside{color:#d8d2c6}

/* ---- grids and items ---- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2.5rem 3rem;margin-top:3rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;margin-top:3rem}
@media(max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.grid,.grid-3{grid-template-columns:1fr;gap:2.4rem}}
.item,.endure-item{border-top:1px solid var(--strata);padding-top:1.3rem}
.item h3,.endure-item h3{margin-bottom:.5rem}
.item .num{display:block;font-family:var(--serif);font-size:.95rem;color:var(--bronze);letter-spacing:.04em;margin-bottom:.5rem}
.item .feel,.endure-item .feel{color:var(--slate);font-family:var(--serif);font-size:1.15rem;line-height:1.4}
.item .behind,.endure-item .behind{color:var(--slate-soft);font-size:0.95rem;margin-top:.55rem}
.band-dark .item{border-top-color:#4a4946}
.band-dark .item .feel{color:var(--bone)}

/* linked cards (the three doors, journal entries) */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.6rem}
@media(max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.cards{grid-template-columns:1fr}}
.card{display:block;background:var(--bone);border:1px solid var(--strata);border-radius:2px;
  padding:1.6rem 1.5rem 1.5rem;text-decoration:none;color:var(--slate);transition:border-color .2s}
.card:hover{border-color:var(--bronze)}
.band-bone .card{background:var(--limestone)}
.card .eyebrow{margin-bottom:.8rem}
.card h3{margin-bottom:.5rem}
.card p{color:var(--slate-soft);font-size:0.95rem}
.card .more{display:inline-block;margin-top:1rem;color:var(--bronze);font-size:0.85rem;letter-spacing:.04em}

/* numbered steps (process) */
.steps{list-style:none;counter-reset:step;margin-top:2.5rem}
.step{display:grid;grid-template-columns:3rem 1fr;gap:1rem 1.2rem;padding:1.6rem 0;border-top:1px solid var(--strata)}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:var(--serif);color:var(--bronze);font-size:1rem;letter-spacing:.04em;padding-top:.25rem;grid-column:1;grid-row:1}
.step>*{grid-column:2;min-width:0} /* the number keeps column 1; every heading, paragraph and list sits in column 2 */
.step h3{margin-bottom:.4rem}
.step p{color:var(--slate-soft)}
@media(max-width:480px){.step{grid-template-columns:1fr;gap:.2rem}.step>*{grid-column:1}}

/* FAQ */
.faq{border-top:1px solid var(--strata)}
.faq:last-of-type{border-bottom:1px solid var(--strata)}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 2rem 1.1rem 0;font-family:var(--serif);font-size:1.15rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:50%;transform:translateY(-50%);color:var(--bronze);font-size:1.3rem;line-height:1}
.faq[open] summary::after{content:"\2212"}
.faq p{color:var(--slate-soft);padding:0 0 1.2rem;max-width:62ch}

/* towns */
.towns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.towns span,.towns a{font-family:var(--serif);font-size:1.05rem;color:var(--slate);
  border:1px solid var(--strata);border-radius:999px;padding:.5rem 1.3rem;text-decoration:none}

/* figure placeholder for renders (mark it data-draft="render") */
.figure{margin-top:2.8rem}
.figure .panel{aspect-ratio:16/9;border-radius:2px;background:linear-gradient(135deg,#c9c1b3,#ddd5c7);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:1rem;
  color:var(--slate-soft);font-size:0.85rem;letter-spacing:.08em;text-transform:uppercase}
.figure figcaption{font-size:0.88rem;color:var(--slate-soft);margin-top:.7rem}

/* long-form text (journal posts) */
.prose{max-width:66ch}
.prose h2{font-size:clamp(1.5rem,2.4vw,1.9rem);margin:2.6rem 0 .8rem}
.prose h3{margin:2rem 0 .5rem}
.prose p,.prose li{color:var(--slate-soft)}
.prose ul,.prose ol{padding-left:1.3rem;margin:1rem 0}
.prose li + li{margin-top:.4rem}
.prose a{color:var(--bronze);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--slate);font-weight:500}

/* ---- forms ---- */
form{margin-top:3rem;max-width:560px}
.field{margin-bottom:1.6rem}
fieldset{border:none;margin:0;padding:0;min-width:0}
.field > label,.field legend{display:block;font-size:0.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-soft);margin-bottom:.55rem}
.field .optional{text-transform:none;letter-spacing:0}
input,select,textarea{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--field-edge);border-radius:0;
  color:var(--slate);font-family:var(--sans);font-size:1.05rem;padding:.55rem 0;transition:border-color .2s;
}
select{appearance:none;-webkit-appearance:none;padding-right:1.8rem;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%237A5C3E' stroke-width='1.6'/></svg>");
  background-repeat:no-repeat;background-position:right .2rem center}
select option{color:var(--slate);background:var(--bone)}
input:not([type=radio]):not([type=checkbox]):focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--bronze);outline-offset:2px;border-bottom-color:var(--bronze)}
input::placeholder,textarea::placeholder{color:var(--slate-soft);opacity:1}
textarea{resize:vertical;min-height:96px}
/* radio and checkbox choices as big tap targets */
.choices{display:flex;flex-wrap:wrap;gap:.6rem}
.choice{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;border:1px solid var(--field-edge);border-radius:999px;
  padding:.55rem 1.05rem .55rem .9rem;cursor:pointer;font-size:0.95rem;line-height:1.3;color:var(--slate);background:var(--bone);transition:border-color .2s,background .2s}
.choice input{width:auto;margin:0;padding:0;border:none;accent-color:var(--bronze);flex:none;width:1.05rem;height:1.05rem}
.choice:hover{border-color:var(--slate-soft)}
.choice:has(input:checked){border-color:var(--bronze);background:var(--limestone)}
.choice:has(input:focus-visible){outline:2px solid var(--bronze);outline-offset:2px}
.form-note{font-size:0.95rem;color:var(--slate-soft);background:var(--bone);border-left:2px solid var(--bronze);padding:.9rem 1.1rem;margin-top:.9rem;max-width:60ch}
.form-fine{font-size:0.8rem;color:var(--slate-soft);margin-top:1.5rem}
.form-fine a{color:inherit;text-decoration:underline}
.form-fine.err{color:var(--bronze-deep)}
.hp{position:absolute;left:-9999px}
/* the same form on a dark band (today's inquiry section) */
.band-dark .field > label,.band-dark .field legend,.inquiry label{color:#b6ad9f}
.band-dark input,.band-dark select,.band-dark textarea,.inquiry input,.inquiry textarea{color:var(--bone);border-bottom-color:#8a8478}
.band-dark input::placeholder,.band-dark textarea::placeholder,.inquiry input::placeholder,.inquiry textarea::placeholder{color:#b6ad9f}
.band-dark input:not([type=radio]):not([type=checkbox]):focus-visible,.band-dark select:focus-visible,.band-dark textarea:focus-visible,.inquiry input:not([type=radio]):not([type=checkbox]):focus-visible,.inquiry textarea:focus-visible{border-bottom-color:#e7d9c4}
.band-dark .choice{background:transparent;border-color:#8a8478;color:var(--bone)}
.band-dark .choice:has(input:focus-visible){outline-color:#e7d9c4}
.band-dark .choice:has(input:checked){background:rgba(246,242,234,.06);border-color:var(--bronze)}
.band-dark .form-note{background:rgba(246,242,234,.06);color:#d8d2c6}
.band-dark .form-fine{color:#b6ad9f}
.band-dark .form-fine.err{color:#e7d9c4}

/* ---- footer ---- */
footer.site{background:var(--slate);color:var(--stone);padding:2.5rem 0;border-top:1px solid #3a3a38}
.foot-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.4rem 2rem;align-items:flex-start}
.foot-inner a{color:#b6ad9f;text-decoration:underline;text-underline-offset:3px}
.foot-inner a:hover{color:var(--bone)}
.foot-mark{display:flex;align-items:center;gap:.55rem;font-family:var(--sans);font-size:0.92rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--bone)}
.foot-mark svg{height:38px;width:auto}
.foot-text{font-size:0.9rem;line-height:1.8;color:#b6ad9f}
.foot-text p{margin:0}
.foot-text .foot-towns{color:var(--stone)}
.foot-text .foot-legal{margin-top:.6rem;color:var(--stone)}

/* ---- DRAFT marker: anything Alex must approve or supply carries data-draft="<why>".
   This ONE rule renders the tag. Strip this rule before going live; nothing else changes.
   Note: ::before does not render on <select>, <input> or <textarea>, so put the attribute on
   the wrapping .field (or another block element) as well as, or instead of, the control. ---- */
[data-draft]::before{content:"DRAFT: " attr(data-draft);display:inline-block;font-family:var(--sans);font-size:0.62rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;line-height:1.4;color:#fff;background:#B5472B;padding:.2em .6em;border-radius:2px;
  margin:0 .5rem .45rem 0;vertical-align:middle}