@font-face{font-family:Hanken;src:url(font/hanken.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{
  --sand:#F6F1E6;
  --sand-2:#EBE3D2;
  --moss:#22301F;
  --moss-2:#33452E;
  --ink:#1D2418;
  --dim:#54604B;
  --rule:#CDC4AE;
  --amber:#B4560A;
  --t0:14px; --t1:17px; --t2:20px; --t3:26px; --t4:38px; --t5:56px;
}

body{
  font-family:Hanken,'Helvetica Neue',Arial,sans-serif;
  font-size:var(--t1);line-height:1.55;color:var(--ink);background:var(--sand);
}
a{color:inherit}
a:focus-visible,button:focus-visible{
  outline:3px solid var(--ink);outline-offset:2px;
  box-shadow:0 0 0 5px var(--sand);scroll-margin:5rem 0;
}
.rail a:focus-visible,.end a:focus-visible{
  outline-color:#F6F1E6;box-shadow:0 0 0 5px rgba(34,48,31,.95);
}

.mock{background:var(--moss);color:#E7EDE2;font-size:var(--t0);line-height:1.4;padding:.6rem 1.25rem;text-align:center}

/* ---- gallery-led opener: four enclosure frames, no headline over them ---- */
.strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--rule);
}
.strip .cell{
  background:var(--sand-2);aspect-ratio:4/3;
  border:1px dashed #9A8F76;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:.7rem;font-size:12.5px;line-height:1.35;color:#5A5240;
}
.strip .cell b{display:block;font-weight:700;letter-spacing:.1em;font-size:11px;margin-bottom:.25rem}

/* ---- shell: sticky species rail + main run ---- */
.shell{display:grid;grid-template-columns:19rem minmax(0,1fr);gap:0;align-items:start}
.rail{
  background:var(--moss);color:#E7EDE2;
  position:sticky;top:0;align-self:start;max-height:100vh;overflow:auto;
  padding:1.9rem 1.5rem 2.2rem;
}
.rail .who{font-size:var(--t0);letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin:0 0 1.4rem;color:#A9BCA0}
.rail h2{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#A9BCA0;margin:0 0 .6rem}
.rail ol{list-style:none;margin:0 0 1.8rem;padding:0;counter-reset:sp}
.rail li{border-top:1px solid #3E5138}
.rail li:last-child{border-bottom:1px solid #3E5138}
.rail a{
  display:flex;justify-content:space-between;gap:.6rem;align-items:baseline;
  padding:.62rem 0;font-size:var(--t1);
  text-decoration:underline;text-decoration-color:#7C9273;text-underline-offset:4px;
}
.rail a:hover{text-decoration-color:#E7EDE2}
.rail a em{font-style:normal;color:#A9BCA0;font-size:var(--t0);white-space:nowrap}
.rail .tel{display:block;font-size:var(--t3);font-weight:700;line-height:1.15;color:#fff;padding:.3rem 0;text-underline-offset:5px}
.rail .hrs{font-size:var(--t0);color:#B9C9B1;margin:.4rem 0 0}
.rail nav a{display:block;padding:.5rem 0;font-size:var(--t1)}

.run{padding:2.6rem 2.6rem 0}
.lede h1{
  font-size:var(--t4);font-weight:800;line-height:1.08;letter-spacing:-.02em;
  margin:0 0 .7rem;max-width:19ch;
}
.lede p{margin:0 0 2.6rem;max-width:58ch;font-size:var(--t2);color:#3B4634}

/* ---- the spec run ---- */
.animal{border-top:2px solid var(--ink);padding:1.7rem 0 2rem}
.animal:last-of-type{border-bottom:2px solid var(--ink);margin-bottom:3rem}
.animal .head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;margin-bottom:.5rem}
.animal .an{font-size:var(--t3);font-weight:800;margin:0;letter-spacing:-.01em}
.animal .latin{font-size:var(--t0);color:var(--dim);font-style:italic}
.animal .price{margin-left:auto;font-size:var(--t2);font-weight:700}
.animal .say{margin:0 0 1.1rem;max-width:60ch;color:#3B4634}

.lifespan{
  display:flex;align-items:baseline;gap:.75rem;margin:0 0 1.1rem;
}
.lifespan .num{
  font-size:var(--t5);font-weight:800;line-height:.9;letter-spacing:-.04em;color:var(--amber);
}
.lifespan .lab{font-size:var(--t2);line-height:1.35;max-width:48ch;color:#3B4634}

.spec{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);
}
.spec li{background:var(--sand);padding:.7rem .8rem}
.spec dt,.spec .k{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);font-weight:700}
.spec .v{font-size:var(--t2);font-weight:700;line-height:1.2;margin-top:.2rem}
.spec .v small{display:block;font-size:13px;font-weight:400;color:var(--dim);letter-spacing:0;text-transform:none}

/* ---- interior ---- */
.ihero{padding:2.6rem 2.6rem 1.6rem}
.ihero h1{font-size:var(--t4);font-weight:800;line-height:1.08;letter-spacing:-.02em;margin:0 0 .6rem;max-width:20ch}
.ihero p{margin:0;max-width:58ch;font-size:var(--t2);color:#3B4634}
.body{padding:0 2.6rem 3rem}
.body p{max-width:62ch}
.body h2{font-size:var(--t3);font-weight:800;letter-spacing:-.01em;margin:2.4rem 0 .5rem}
.kit{list-style:none;margin:1.2rem 0 0;padding:0}
.kit li{border-top:1px solid var(--rule);padding:1.1rem 0;display:grid;grid-template-columns:1fr 8rem;gap:1rem}
.kit li:last-child{border-bottom:1px solid var(--rule)}
.kit b{display:block;font-size:var(--t2);font-weight:700;margin-bottom:.2rem}
.kit p{margin:0;max-width:52ch}
.kit .cost{text-align:right;font-weight:700;font-size:var(--t2);white-space:nowrap}
.warn{background:var(--moss-2);color:#E7EDE2;padding:1.4rem 1.5rem;margin:2rem 0 0;max-width:62ch}
.warn b{font-weight:800}

.end{background:var(--moss);color:#E7EDE2;padding:2.8rem 2.6rem 3rem;margin-top:2rem}
.end h2{font-size:var(--t4);font-weight:800;line-height:1.08;letter-spacing:-.02em;margin:0 0 1rem;max-width:22ch}
.end p{max-width:52ch;color:#CBD8C4}
.end .tel{display:inline-block;font-size:var(--t5);font-weight:800;letter-spacing:-.03em;line-height:1;color:#fff;padding:.2rem 0;text-underline-offset:8px}
.end dl{margin:1.6rem 0 0}
.end dt{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#A9BCA0;font-weight:700;margin-top:1rem}
.end dd{margin:.1rem 0 0;font-size:var(--t2)}

footer{padding:1.6rem 2.6rem 2.6rem;font-size:var(--t0);color:var(--dim)}
footer nav a{margin-right:1.3rem;display:inline-block;padding:.35rem 0}

@media (max-width:900px){
  :root{--t3:23px;--t4:30px;--t5:42px}
  .shell{grid-template-columns:1fr}
  .rail{position:static;max-height:none}
  .rail ol{display:grid;grid-template-columns:1fr 1fr;gap:0 1.4rem}
  .strip{grid-template-columns:1fr 1fr}
  .run,.ihero,.body,.end,footer{padding-left:1.4rem;padding-right:1.4rem}
  .animal .price{margin-left:0;width:100%}
  .kit li{grid-template-columns:1fr}
  .kit .cost{text-align:left}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}