@font-face{font-family:Bitter;src:url(font/bitter.woff2) format('woff2-variations');font-weight:300 800;font-display:swap;}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0}
img{max-width:100%;display:block}

:root{
  --cream:#F7F3EA;
  --cream-2:#EDE6D7;
  --walnut:#2E2119;
  --walnut-2:#3E2E22;
  --ink:#231B14;
  --dim:#5E5044;
  --rule:#CFC3AC;
  --green:#2F5D3A;
  --b0:14px; --b1:17px; --b2:20px; --b3:27px; --b4:40px; --b5:58px;
}

body{
  font-family:Bitter,Georgia,serif;font-size:var(--b1);line-height:1.58;
  color:var(--ink);background:var(--cream);
}
a{color:inherit}
a:focus-visible{
  outline:3px solid var(--ink);outline-offset:2px;
  box-shadow:0 0 0 5px var(--cream);scroll-margin:5rem 0;
}
.nav a:focus-visible,.hero a:focus-visible,.shopend a:focus-visible{
  outline-color:#F7F3EA;box-shadow:0 0 0 5px rgba(46,33,25,.95);
}

.mock{background:var(--walnut);color:#EFE6D6;font-size:var(--b0);line-height:1.45;padding:.6rem 1.25rem;text-align:center}

.wrap{max-width:1120px;margin:0 auto;padding:0 1.5rem}

/* ---- top nav ---- */
.nav{
  background:var(--walnut);color:#EFE6D6;
}
.nav .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.6rem;padding-top:.9rem;padding-bottom:.9rem}
.nav .brand{font-weight:800;letter-spacing:.02em;font-size:var(--b2);margin-right:auto}
.nav a{padding:.4rem 0;font-size:var(--b1);text-underline-offset:5px}
.nav a.call{font-weight:700}

/* ---- full-bleed photo hero ---- */
.hero{
  position:relative;background:var(--walnut-2);
  min-height:clamp(360px,52vh,470px);
  display:grid;align-items:end;
  border-bottom:6px solid var(--green);
}
.hero .plate{
  position:absolute;top:0;bottom:0;right:0;width:42%;
  border-left:2px dashed #7A6349;
  display:flex;align-items:flex-end;justify-content:flex-start;
  padding:1.1rem 1.3rem;pointer-events:none;
  background:repeating-linear-gradient(135deg,#372820 0 14px,#3E2E22 14px 28px);
}
.hero .plate span{
  max-width:24rem;color:#C6B393;font-size:12.5px;line-height:1.4;
}
.hero .plate b{display:block;letter-spacing:.12em;font-size:11px;margin-bottom:.25rem}
.hero .say{position:relative;padding:2.6rem 0 2.4rem;color:#F2E9D9;max-width:54%}
.hero h1{
  font-size:var(--b4);font-weight:800;line-height:1.08;letter-spacing:-.015em;
  margin:0 0 .7rem;max-width:17ch;
}
.hero p{margin:0 0 1.4rem;max-width:46ch;font-size:var(--b2);color:#DACAB0}
.btn{
  display:inline-block;background:var(--green);color:#F5FBF4;
  font-weight:700;font-size:var(--b2);padding:.75rem 1.5rem;
  text-decoration:none;border-bottom:3px solid #1E4227;
}
.btn:hover{background:#25492E}
.btn:active{border-bottom-width:1px;margin-top:2px}

/* ---- the species board ---- */
.board{padding:3.2rem 0 1rem}
.board h2{font-size:var(--b3);font-weight:800;margin:0 0 .4rem;letter-spacing:-.01em}
.board .lede{max-width:60ch;margin:0 0 1.8rem;color:#3E3529}
.scroller{overflow-x:auto}
table.sp{border-collapse:collapse;width:100%;min-width:41rem;font-size:var(--b1)}
table.sp caption{text-align:left;color:var(--dim);font-size:var(--b0);padding-bottom:.7rem}
table.sp th,table.sp td{text-align:left;vertical-align:top;padding:.95rem .9rem .95rem 0;border-bottom:1px solid var(--rule)}
table.sp thead th{
  border-bottom:2.5px solid var(--ink);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:800;
}
table.sp tbody th{font-weight:800;font-size:var(--b2);width:11rem}
table.sp tbody th small{display:block;font-weight:400;font-size:13px;color:var(--dim);font-style:italic}
table.sp .yrs{font-weight:800;font-size:var(--b2);white-space:nowrap}
table.sp .bf{white-space:nowrap;font-weight:700}
table.sp tr.pick th{border-left:5px solid var(--green);padding-left:.7rem}

/* ---- three builds ---- */
.builds{padding:3rem 0 1rem;border-top:1px solid var(--rule);margin-top:2.6rem}
.builds h2{font-size:var(--b3);font-weight:800;margin:0 0 1.6rem;letter-spacing:-.01em}
.blist{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin:0;padding:0;list-style:none}
.blist .plate{
  background:var(--cream-2);border:1px dashed #9C8C71;aspect-ratio:4/3;
  display:flex;flex-direction:column;justify-content:flex-end;padding:.7rem;
  font-size:12.5px;line-height:1.35;color:#5B4F3E;
}
.blist .plate b{display:block;letter-spacing:.11em;font-size:11px;margin-bottom:.25rem}
.blist h3{font-size:var(--b2);font-weight:800;margin:.7rem 0 .25rem}
.blist p{margin:0 0 .4rem;font-size:var(--b1)}
.blist .p{font-weight:800}
.blist .p small{display:block;font-weight:400;font-size:13px;color:var(--dim)}

/* ---- ending ---- */
.shopend{background:var(--walnut);color:#F2E9D9;margin-top:3.4rem;padding:3rem 0 3.4rem}
.shopend h2{font-size:var(--b4);font-weight:800;line-height:1.08;letter-spacing:-.015em;margin:0 0 1rem;max-width:20ch}
.shopend .cols{display:grid;grid-template-columns:1.1fr 1fr;gap:2.4rem}
.shopend p{max-width:44ch;color:#DACAB0}
.shopend .tel{display:inline-block;font-size:var(--b5);font-weight:800;line-height:1;letter-spacing:-.03em;color:#fff;padding:.2rem 0;text-underline-offset:8px}
.shopend dt{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:#B49A78;font-weight:800;margin-top:1.1rem}
.shopend dd{margin:.12rem 0 0;font-size:var(--b2)}
.shopend dl{margin:0}

footer{padding:1.8rem 0 3rem;font-size:var(--b0);color:var(--dim)}
footer nav a{margin-right:1.3rem;display:inline-block;padding:.35rem 0;font-size:var(--b1);color:var(--ink)}
footer p{max-width:60ch}

/* ---- interior ---- */
.ihead{background:var(--cream-2);border-bottom:1px solid var(--rule);padding:2.4rem 0 2rem}
.ihead h1{font-size:var(--b4);font-weight:800;line-height:1.08;letter-spacing:-.015em;margin:0 0 .5rem;max-width:20ch}
.ihead p{margin:0;max-width:56ch;font-size:var(--b2)}
.prose{padding:2.4rem 0 1rem;max-width:62rem}
.prose p{max-width:62ch;margin:0 0 1rem}
.prose h2{font-size:var(--b3);font-weight:800;letter-spacing:-.01em;margin:2.4rem 0 .5rem}
.prose h2:first-child{margin-top:0}
.prose ul{margin:0 0 1.2rem;padding-left:1.2rem;max-width:62ch}
.prose li{margin-bottom:.55rem}
.pull{border-left:5px solid var(--green);padding:.3rem 0 .3rem 1.1rem;margin:1.7rem 0;font-size:var(--b2);line-height:1.45;max-width:52ch}

@media (max-width:880px){
  :root{--b3:23px;--b4:31px;--b5:40px}
  .blist{grid-template-columns:1fr}
  .shopend .cols{grid-template-columns:1fr}
  .hero .plate{position:static;width:auto;border-left:0;border-top:2px dashed #7A6349;padding:.9rem 1.3rem}
  .hero .plate span{max-width:none}
  .hero .say{max-width:none}
  .hero{display:block}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}