:root{color-scheme:light}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/archivo-latin-400-normal.woff2) format('woff2')}@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/archivo-latin-500-normal.woff2) format('woff2')}@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/archivo-latin-600-normal.woff2) format('woff2')}@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/archivo-latin-700-normal.woff2) format('woff2')}@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/newsreader-400-normal.woff2) format('woff2')}/* ============================================================
   EichlerMenloPark.com
   Direction: the arc. Fifty houses spanning Eichler's whole run,
   1950 to the early seventies. Distinct from EichlerPaloAlto
   (paper, mahogany, daylight) and EichlerLosAltos (ink, bone,
   orange): this one is oak shade, copper and bone — the Menlo
   oaks, and the copper of the radiant heat that started here.
   ============================================================ */
:root{
  --oak:#141A15;          /* oak shade — ground */
  --oak-2:#1C231D;
  --bone:#EDE9DF;         /* type on oak */
  --bone-dim:#AFB0A4;
  --copper:#A8522A;       /* radiant heat — fill under cream type, AA at 5.04 */
  --copper-hv:#B0562B;    /* hover, still AA at 4.67 */
  --ember:#E8A277;        /* accent type on oak */
  --church:#7D9070;       /* Thomas Church planting */
  --rule:rgba(237,233,223,.20);
  --rule-soft:rgba(237,233,223,.09);
  --gut:clamp(1.15rem,.7rem + 2.2vw,3.5rem);
  --maxw:1480px;
  --fs-h1:clamp(2.8rem,1.4rem + 6.2vw,7rem);
  --fs-h2:clamp(1.9rem,1.3rem + 2.6vw,3.5rem);
  --fs-lead:clamp(1.14rem,1rem + .7vw,1.58rem);
  --fs-body:clamp(1rem,.96rem + .22vw,1.12rem);
  --ff-d:Archivo,"Helvetica Neue",Arial,sans-serif;
  --ff-b:Newsreader,Georgia,serif;
  --ff-m:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--oak);color:var(--bone);
  font-family:var(--ff-b);font-size:var(--fs-body);line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--ff-d);font-weight:700;letter-spacing:-.02em;line-height:1.04;margin:0}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
p{margin:0 0 1.15em}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(3.4rem,8vw,7.5rem)}
.prose{max-width:64ch}
.prose p+p{margin-top:1.15em}
.lede{font-size:var(--fs-lead);line-height:1.55;max-width:52ch}
.rule{border:0;border-top:1px solid var(--rule);margin:0}

/* faint oak-grain grid */
.grid-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--rule-soft) 1px,transparent 1px),
                   linear-gradient(90deg,var(--rule-soft) 1px,transparent 1px);
  background-size:64px 64px}

/* ---- section labels ---- */
.sheet{font-family:var(--ff-m);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ember);display:flex;gap:.9rem;
  align-items:center;margin:0 0 1.1rem}
.sheet::after{content:"";flex:1;height:1px;background:var(--rule)}

/* ---- header ---- */
.bar{position:sticky;top:0;z-index:40;background:rgba(20,26,21,.93);
  backdrop-filter:blur(9px);border-bottom:1px solid var(--rule)}
.bar-in{max-width:var(--maxw);margin-inline:auto;padding:.85rem var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.mark{font-family:var(--ff-d);font-weight:700;font-size:.92rem;letter-spacing:.01em;
  text-decoration:none;color:var(--bone)}
.mark b{color:var(--ember);font-weight:600}
.bar-cta{font-family:var(--ff-d);font-size:.76rem;letter-spacing:.13em;
  text-transform:uppercase;font-weight:600;text-decoration:none;
  color:#FFF6EF;background:var(--copper);padding:.75rem 1.2rem;
  transition:background .18s,transform .18s;white-space:nowrap}
.bar-cta:hover{background:var(--copper-hv);transform:translateY(-1px)}

/* ---- buttons ---- */
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.btn{font-family:var(--ff-d);font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;text-decoration:none;padding:1rem 1.5rem;display:inline-block;
  transition:background .18s,transform .18s,box-shadow .18s;border:0;cursor:pointer}
.btn-fill{background:var(--copper);color:#FFF6EF}
.btn-fill:hover{background:var(--copper-hv);transform:translateY(-2px)}
.btn-line{color:var(--bone);box-shadow:inset 0 0 0 1px var(--rule);background:transparent}
.btn-line:hover{box-shadow:inset 0 0 0 1px var(--ember);color:var(--ember)}

/* ---- hero ---- */
.hero{position:relative;min-height:min(72vh,720px);display:flex;align-items:flex-end;
  overflow:hidden;border-bottom:1px solid var(--rule);
  background:
    radial-gradient(120% 90% at 12% 8%, rgba(196,105,58,.16) 0%, rgba(196,105,58,0) 58%),
    radial-gradient(90% 80% at 88% 92%, rgba(125,144,112,.16) 0%, rgba(125,144,112,0) 60%),
    var(--oak)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 62%}
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,26,21,.78) 0%,rgba(20,26,21,.20) 30%,
             rgba(20,26,21,.32) 50%,rgba(20,26,21,.88) 82%,rgba(20,26,21,.97) 100%)}
@media(min-width:900px){
  .hero-scrim{background:
    linear-gradient(180deg,rgba(20,26,21,.72) 0%,rgba(20,26,21,.14) 30%,
      rgba(20,26,21,.26) 52%,rgba(20,26,21,.88) 84%,rgba(20,26,21,.97) 100%),
    linear-gradient(100deg,rgba(20,26,21,.86) 0%,rgba(20,26,21,.70) 38%,
      rgba(20,26,21,.18) 62%,rgba(20,26,21,0) 78%)}
}
.hero-in{position:relative;z-index:2;padding-block:clamp(3rem,9vw,6rem);width:100%}
.hero h1{max-width:17ch}
.hero h1 em{font-style:normal;color:var(--ember)}
.hero-sub{font-family:var(--ff-b);font-size:var(--fs-lead);line-height:1.55;
  color:#F2EEE5;max-width:50ch;margin:1.4rem 0 0}
.hero-credit{position:absolute;right:var(--gut);bottom:1rem;z-index:2;
  font-family:var(--ff-m);font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(237,233,223,.62);margin:0}

/* ---- counts ---- */
.count{display:grid;gap:clamp(1.6rem,3vw,3rem);margin-top:2.6rem;
  grid-template-columns:1fr}
@media(min-width:700px){.count{grid-template-columns:repeat(3,1fr)}}
.count-c{border-top:2px solid var(--ember);padding-top:1rem}
.count-n{font-family:var(--ff-d);font-weight:700;font-size:clamp(2.6rem,1.6rem + 3vw,4.4rem);
  line-height:1;letter-spacing:-.03em;display:block;font-variant-numeric:tabular-nums}
.count-c:first-child .count-n{color:var(--ember)}
.count-l{font-family:var(--ff-m);font-size:.76rem;line-height:1.55;letter-spacing:.05em;
  color:var(--bone-dim);display:block;margin-top:.75rem}

/* ---- the timeline: the recurring device ---- */
.arc{margin-top:clamp(2.4rem,5vw,4rem);border-top:1px solid var(--rule)}
.arc-row{display:grid;grid-template-columns:1fr;gap:.4rem;
  padding:clamp(1.4rem,3vw,2.2rem) 0;border-bottom:1px solid var(--rule-soft);
  position:relative}
@media(min-width:820px){
  .arc-row{grid-template-columns:8.5rem 1fr 7rem;gap:clamp(1.4rem,3vw,2.6rem);align-items:start}
}
.arc-yr{font-family:var(--ff-m);font-size:.94rem;font-weight:500;color:var(--ember);
  letter-spacing:.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.arc-b h3{font-size:1.26rem;margin:0 0 .45rem}
.arc-b p{font-size:.95rem;color:var(--bone-dim);margin:0;max-width:58ch}
.arc-n{font-family:var(--ff-m);font-size:.82rem;color:var(--bone-dim);
  font-variant-numeric:tabular-nums}
@media(min-width:820px){.arc-n{text-align:right}}
.arc-row.first .arc-yr,.arc-row.last .arc-yr{font-weight:600}
.arc-tag{display:inline-block;font-family:var(--ff-m);font-size:.6rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--oak);background:var(--ember);
  padding:.24rem .5rem;margin-left:.55rem;vertical-align:.14em}

/* ---- data table ---- */
.analysis{margin-top:2rem;border:1px solid var(--rule);font-family:var(--ff-m);font-size:.86rem}
.analysis-h{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ember);padding:.9rem 1.2rem;border-bottom:1px solid var(--rule);
  background:var(--oak-2)}
.arow{display:flex;justify-content:space-between;gap:1rem;padding:.72rem 1.2rem;
  border-bottom:1px solid var(--rule-soft)}
.arow:last-child{border-bottom:0}
.arow span:last-child{font-variant-numeric:tabular-nums;color:var(--bone)}
.arow span:first-child{color:var(--bone-dim)}
.arow.total{color:var(--ember);border-top:1px solid var(--rule);font-weight:500}
.arow.total span:last-child{color:var(--ember)}

/* ---- figures ---- */
.wide-fig{margin:clamp(2.4rem,5vw,4rem) 0 0}
.wide-fig img{width:100%;height:auto;border:1px solid var(--rule);background:var(--oak-2)}
.wide-fig figcaption,.gal figcaption{font-family:var(--ff-m);font-size:.71rem;
  line-height:1.55;letter-spacing:.09em;text-transform:uppercase;
  color:var(--bone-dim);margin-top:.75rem;max-width:60ch}
.elev-fig{margin:clamp(2.4rem,6vw,4rem) 0 0}
.elev{display:block;width:100%;height:auto;border:1px solid var(--rule);background:var(--oak-2)}
.elev-fig figcaption{font-family:var(--ff-m);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--bone-dim);margin-top:.75rem}

/* ---- CTA band ---- */
.cta{background:var(--copper);color:#FFF6EF;border-block:1px solid var(--rule)}
.cta h2{max-width:18ch}
.cta .lede{color:#FFF6EF;max-width:46ch}
.cta .sheet{color:#FFF6EF}
.cta .sheet::after{background:rgba(255,246,239,.4)}
.cta .btn-line{color:#FFF6EF;box-shadow:inset 0 0 0 1px rgba(255,246,239,.62)}
.cta .btn-line:hover{background:#FFF6EF;color:var(--copper)}
.cta .btn-fill{background:#FFF6EF;color:var(--copper)}
.cta .btn-fill:hover{background:#fff}

/* ---- forms ---- */
.lf{max-width:40rem;margin-top:2rem}
.lf-grid{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media(min-width:620px){.lf-grid{grid-template-columns:1fr 1fr}}
.lf-f label{display:block;font-family:var(--ff-m);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone);margin-bottom:.42rem}
.cta .lf-f label{color:#FFF6EF}
.lf-f input,.lf-f select,.lf-f textarea{width:100%;font-family:var(--ff-b);
  font-size:1rem;padding:.8rem .9rem;background:rgba(237,233,223,.06);
  border:1px solid var(--rule);color:var(--bone);border-radius:0}
.cta .lf-f input,.cta .lf-f select,.cta .lf-f textarea{color:#FFF6EF;
  background:rgba(255,246,239,.13);border-color:rgba(255,246,239,.4)}
.lf-f input:focus,.lf-f select:focus,.lf-f textarea:focus{outline:2px solid var(--ember);
  outline-offset:1px}
.cta .lf-f input:focus,.cta .lf-f select:focus{outline-color:#FFF6EF}
.lf-f textarea{resize:vertical}
.lf-actions{margin-top:1.5rem}
.lf-err{font-family:var(--ff-m);font-size:.74rem;color:var(--ember);margin:.35rem 0 0;
  min-height:1em}
.cta .lf-err{color:#FFE2D8}
.lf-status{font-family:var(--ff-m);font-size:.82rem;margin-top:1rem;color:var(--ember)}
.cta .lf-status{color:#FFF6EF}
.lf-status[data-state=error]{color:var(--ember)}
.cta .lf-status[data-state=error]{color:#FFE2D8}
.req{color:#F0B08A}
.cta .req{color:#FFF6EF}
.lf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cta-split{display:grid;gap:clamp(1.8rem,4vw,3.4rem);grid-template-columns:1fr;align-items:start}
@media(min-width:1000px){.cta-split{grid-template-columns:minmax(0,40rem) minmax(0,1fr)}}

/* ---- footer ---- */
.foot{padding-block:clamp(2.6rem,6vw,4.5rem);font-family:var(--ff-m);font-size:.76rem;
  line-height:1.75;color:var(--bone-dim);border-top:1px solid var(--rule)}
.foot strong{color:var(--bone);font-weight:500}
.foot a{color:var(--bone-dim);text-decoration:none;border-bottom:1px solid var(--rule)}
.foot a:hover{color:var(--ember);border-bottom-color:var(--ember)}
.foot-links,.foot-social{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:.8rem}
.dre{display:block;margin-top:1.1rem;font-size:.7rem;letter-spacing:.05em}

/* ---- reveal ---- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.rv{opacity:1;transform:none;transition:none}}
:focus-visible{outline:2px solid var(--ember);outline-offset:2px}

/* ---- sub-pages ---- */
.t-link{color:inherit;text-decoration:none;border-bottom:1px solid rgba(237,233,223,.34)}
.t-link:hover{border-bottom-color:var(--ember);color:var(--ember)}
.crumbs{font-family:var(--ff-m);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-dim);display:flex;gap:.6rem;align-items:center;margin:0 0 1.6rem;flex-wrap:wrap}
.crumbs a{color:var(--bone-dim);text-decoration:none}
.crumbs a:hover{color:var(--ember)}
.hero-flat{padding-top:clamp(3rem,7vw,6rem)}
.h1-flat{font-size:clamp(2.3rem,1.3rem + 4.2vw,5rem);line-height:1.0;letter-spacing:-.02em;margin:.6rem 0 0}
.h1-flat em{font-style:normal;color:var(--ember)}
.pagenav{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
.pagenav a{font-family:var(--ff-m);font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--bone);text-decoration:none;border:1px solid var(--rule);padding:.78rem 1.1rem;
  transition:border-color .18s,color .18s}
.pagenav a:hover,.pagenav a[aria-current=page]{border-color:var(--ember);color:var(--ember)}

/* ---- gallery ---- */
.gal{margin-top:clamp(2rem,4vw,3rem);display:grid;gap:clamp(1.4rem,3vw,2.4rem);
  grid-template-columns:1fr}
@media(min-width:820px){.gal{grid-template-columns:1fr 1fr}}
.gal figure{margin:0}
.gal img{display:block;width:100%;height:auto;border:1px solid var(--rule);background:var(--oak-2)}
.gal figure:not(.g-w) img{aspect-ratio:3/2;object-fit:cover}
@media(min-width:820px){.gal .g-w{grid-column:1/-1}}
.gal .g-w figcaption{max-width:72ch}

/* ---- FAQ ---- */
.faq{max-width:46rem;margin-top:1.8rem}
.faq dt{font-family:var(--ff-a);font-weight:600;font-size:1.02rem;line-height:1.4;
  color:var(--bone);margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--rule)}
.faq dt:first-child{margin-top:0;padding-top:0;border-top:0}
.faq dd{margin:.85rem 0 0;font-family:var(--ff-b);font-size:1rem;line-height:1.65;color:var(--bone-dim)}
.faq dd + dd{margin-top:.7rem}
.faq dd a{color:var(--ember)}

/* ---- the site network ---- */
.netgrid{display:grid;gap:2rem 1.6rem;grid-template-columns:1fr;margin-top:2.4rem}
@media(min-width:700px){.netgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.netgrid{grid-template-columns:repeat(3,1fr)}}
.netcol h3{font-family:var(--ff-m);font-size:.72rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ember);margin:0 0 1rem;padding-bottom:.7rem;
  border-bottom:1px solid var(--rule)}
.netcol ul{list-style:none;margin:0;padding:0}
.netcol li{margin:0 0 .62rem;font-family:var(--ff-b);font-size:.97rem;line-height:1.45}
.netcol a{color:var(--bone);text-decoration:none;border-bottom:1px solid var(--rule)}
.netcol a:hover{color:var(--ember);border-bottom-color:var(--ember)}
.net-here{color:var(--bone-dim)}
.netfoot{margin-top:2.2rem;font-family:var(--ff-b);font-size:.97rem;line-height:1.6;
  color:var(--bone-dim);max-width:60ch}
.netfoot a{color:var(--ember);text-decoration:none;border-bottom:1px solid var(--rule)}
.netfoot a:hover{border-bottom-color:var(--ember)}

/* ---- schematic map ---- */
.mapfig{margin:2.6rem 0 0;padding:0}
.mapsvg{width:100%;height:auto;display:block;background:rgba(255,255,255,.014);
  border:1px solid var(--rule)}
.mapfig figcaption{margin-top:.9rem;font-family:var(--ff-m);font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--bone-dim);line-height:1.6}
.mblock{fill:rgba(168,82,42,.10);stroke:#A8522A;stroke-width:1.5}
.mblock-key{fill:rgba(168,82,42,.22);stroke:#E8A277;stroke-width:2}
.mname{font-family:'Archivo',system-ui,sans-serif;font-size:19px;font-weight:600;fill:#EDE9DF}
.mmeta{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;fill:#AFB0A4;
  letter-spacing:.04em}
.mfirst{fill:#E8A277}
.mroad{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;fill:#7F8A7C;
  letter-spacing:.09em;text-transform:uppercase}
.mnote{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;fill:#7D9070;
  letter-spacing:.04em}
.mapscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mapsvg{min-width:760px}
@media(min-width:820px){.mapsvg{min-width:0}}