/* ============================================================
   EXTINCT DISPLAYS — shared styles
   Pages: index.html · displays.html · about.html
   ============================================================ */

:root{
  --obsidian:#0e0d0b;
  --charcoal:#1a1815;
  --bone:#e9e2d2;
  --bone-dim:#b0a791;
  --sand:#8f8268;
  --amber:#d99b3f;
  --amber-deep:#a86c1f;
  --line:rgba(233,226,210,.14);
  --display:'Cinzel',serif;          /* carved-in-stone display face */
  --body:'Inter',sans-serif;
  --mono:'IBM Plex Mono',monospace;  /* museum specimen labels */
  --maxw:1140px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
}

body{
  background:var(--obsidian);
  color:var(--bone);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* ---- scattered bones background, very subtle ---- */
body::before{
  content:"";
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='%23e9e2d2'%3E%3Cg transform='translate(90,70) rotate(35)'%3E%3Ccircle cx='-7' cy='0' r='9'/%3E%3Ccircle cx='7' cy='0' r='9'/%3E%3Crect x='-5' y='2' width='10' height='72'/%3E%3Ccircle cx='-7' cy='76' r='9'/%3E%3Ccircle cx='7' cy='76' r='9'/%3E%3C/g%3E%3Cg transform='translate(300,180) rotate(-50)'%3E%3Ccircle cx='-6' cy='0' r='8'/%3E%3Ccircle cx='6' cy='0' r='8'/%3E%3Crect x='-4' y='2' width='8' height='58'/%3E%3Ccircle cx='-6' cy='62' r='8'/%3E%3Ccircle cx='6' cy='62' r='8'/%3E%3C/g%3E%3Cg transform='translate(150,310) rotate(80)'%3E%3Ccircle cx='-6' cy='0' r='8'/%3E%3Ccircle cx='6' cy='0' r='8'/%3E%3Crect x='-4' y='2' width='8' height='64'/%3E%3Ccircle cx='-6' cy='68' r='8'/%3E%3Ccircle cx='6' cy='68' r='8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
header,main,footer{position:relative;z-index:1}

a{color:inherit}
::selection{background:var(--amber);color:var(--obsidian)}

h1,h2,h3{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  line-height:1.1;
}
h2{font-size:clamp(1.8rem,4.5vw,2.8rem);margin-bottom:.6rem}

.eyebrow{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--amber);display:block;margin-bottom:1rem;
}
.kicker{color:var(--bone-dim);max-width:52ch;margin-bottom:2.5rem}
.section{padding:clamp(3.5rem,8vw,6rem) 1.25rem}
.wrap{max-width:var(--maxw);margin:0 auto}
.divider{border:0;border-top:1px solid var(--line);max-width:var(--maxw);margin:0 auto}

/* ---- buttons ---- */
.btn{
  display:inline-block;padding:.9rem 1.8rem;
  font-family:var(--display);font-weight:700;font-size:.95rem;
  letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  border:1px solid var(--amber);background:var(--amber);color:var(--obsidian);
  transition:background .2s,color .2s;
}
.btn:hover{background:var(--amber-deep);border-color:var(--amber-deep)}
.btn.ghost{background:transparent;color:var(--bone);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--amber);color:var(--amber)}
.btn:focus-visible,a:focus-visible,button:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--amber);outline-offset:3px;
}

/* ---- nav ---- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(14,13,11,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:.9rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{font-family:var(--display);font-weight:700;font-size:1.05rem;text-transform:uppercase;letter-spacing:.1em;text-decoration:none}
.logo span{color:var(--amber)}
.nav-links{display:flex;gap:1.8rem;list-style:none;align-items:center}
.nav-links a{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--bone-dim);transition:color .2s;
}
.nav-links a:hover,.nav-links a.active{color:var(--amber)}

/* ---- hero (home) ---- */
.hero{
  min-height:88vh;display:flex;align-items:center;
  padding:5rem 1.25rem;text-align:center;position:relative;
  background:
    radial-gradient(ellipse 65% 50% at 50% 18%, rgba(217,155,63,.15), transparent 65%),
    var(--obsidian);
}
.hero-wrap{max-width:860px;margin:0 auto;width:100%}
.hero h1{
  font-size:clamp(2.6rem,8.5vw,5.6rem);
  text-shadow:0 25px 60px rgba(0,0,0,.7);
}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero p{margin:1.5rem auto 2.4rem;color:var(--bone-dim);max-width:46ch;font-size:1.05rem}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.hero-tags{
  margin-top:4rem;padding-top:1.2rem;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);
  display:flex;gap:1.2rem 2.4rem;flex-wrap:wrap;justify-content:center;
}

/* ---- page header (interior pages) ---- */
.page-head{
  padding:clamp(3.5rem,8vw,5.5rem) 1.25rem 0;
  background:radial-gradient(ellipse 65% 60% at 50% 0%, rgba(217,155,63,.12), transparent 70%);
}

/* ---- full-width banner image (about) ---- */
.banner-img{
  display:block;width:100%;aspect-ratio:21/9;object-fit:cover;
  border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
@media (max-width:640px){.banner-img{aspect-ratio:16/10}}

/* ---- hero raptor skeleton photo ---- */
.hero{overflow:hidden}
.hero-fossil{
  position:absolute;inset:0;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
}
.hero-fossil img{
  width:min(1200px,105%);height:auto;
  /* screen blend drops the photo's dark backdrop into the page */
  mix-blend-mode:screen;
  opacity:0;
  /* soft-fade the edges so it melts into the background */
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, #000 45%, transparent 78%);
  mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, #000 45%, transparent 78%);
  animation:
    fossilIn 2.4s ease .3s forwards,
    fossilDrift 14s ease-in-out 2.7s infinite;
}
@keyframes fossilIn{to{opacity:.5}}
@keyframes fossilDrift{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-14px) scale(1.04)}
}
@media (prefers-reduced-motion:reduce){
  .hero-fossil img{animation:none;opacity:.5}
}

/* ---- image/video placeholders ---- */
.ph{
  position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(217,155,63,.10), transparent 70%),
    linear-gradient(165deg,#22201b,var(--charcoal) 55%,#13110d);
  border:1px solid var(--line);overflow:hidden;
}
.ph-label{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sand);padding:1rem;line-height:2;
}
.ph-label strong{display:block;color:var(--bone);font-weight:500}

/* ---- product cards ---- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid{grid-template-columns:1fr}}
.card{background:var(--charcoal);border:1px solid var(--line);display:flex;flex-direction:column;transition:border-color .25s}
.card:hover{border-color:rgba(217,155,63,.5)}
.card .ph{aspect-ratio:4/5}
.card-body{padding:1.4rem;border-top:1px solid var(--line);display:flex;flex-direction:column;flex:1}
.spec-no{font-family:var(--mono);font-size:.64rem;letter-spacing:.22em;color:var(--amber);text-transform:uppercase}
.card h3{font-size:1.25rem;margin:.5rem 0 .2rem}
.card .latin{font-family:var(--mono);font-size:.7rem;color:var(--sand);font-style:italic;margin-bottom:.85rem}
.card p{font-size:.9rem;color:var(--bone-dim);margin-bottom:1.1rem}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:auto}
.price-tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
.card-foot a{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--amber)}
.card-foot a:hover{text-decoration:underline}

/* ---- process steps ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step{border:1px solid var(--line);padding:1.5rem;background:var(--charcoal)}
.step .spec-no{display:block;margin-bottom:.7rem}
.step h3{font-size:1.1rem;margin-bottom:.45rem}
.step p{font-size:.88rem;color:var(--bone-dim)}

/* ---- watch the build ---- */
.videos{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
@media (max-width:1020px){.videos{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.videos{grid-template-columns:repeat(2,1fr)}}
.vid{aspect-ratio:9/16;text-decoration:none}
.vid .play{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--amber);
  display:flex;align-items:center;justify-content:center;margin:0 auto .8rem;
  color:var(--amber);font-size:.75rem;
}

/* ---- vote ---- */
.vote-list{display:grid;grid-template-columns:repeat(2,1fr);gap:.85rem;max-width:880px}
@media (max-width:700px){.vote-list{grid-template-columns:1fr}}
.vote-btn{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:100%;padding:1rem 1.25rem;background:var(--charcoal);border:1px solid var(--line);
  color:var(--bone);font-family:var(--body);font-size:.95rem;font-weight:500;cursor:pointer;
  overflow:hidden;text-align:left;transition:border-color .2s;
}
.vote-btn:hover{border-color:var(--amber)}
.vote-btn .bar{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(217,155,63,.16);transition:width .5s ease}
.vote-btn .pct{position:relative;font-family:var(--mono);font-size:.7rem;color:var(--amber)}
.vote-btn span{position:relative}
.vote-btn.voted{border-color:var(--amber)}
.vote-note{margin-top:1.1rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:var(--sand);text-transform:uppercase}

/* ---- forms ---- */
form{max-width:660px}
.field{margin-bottom:1.05rem}
label{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sand);margin-bottom:.4rem}
input,select,textarea{
  width:100%;padding:.8rem 1rem;background:var(--charcoal);border:1px solid var(--line);
  color:var(--bone);font-family:var(--body);font-size:.95rem;
}
input::placeholder,textarea::placeholder{color:#6f6857}
textarea{min-height:120px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}
.form-msg{margin-top:1rem;font-family:var(--mono);font-size:.76rem;color:var(--amber)}

/* ---- FAQ ---- */
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%;background:none;border:0;color:var(--bone);cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.2rem 0;font-family:var(--body);font-weight:600;font-size:1rem;text-align:left;
}
.faq-q .ico{font-family:var(--mono);color:var(--amber);font-size:1.1rem;transition:transform .25s}
.faq-item.open .ico{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{padding:0 0 1.2rem;color:var(--bone-dim);font-size:.92rem;max-width:62ch}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);padding:3.2rem 1.25rem 2.2rem;background:var(--obsidian)}
.foot-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1.4fr;gap:2.5rem}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);margin-bottom:1rem;font-weight:500}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:.5rem}
.foot-grid a{font-size:.88rem;color:var(--bone-dim);text-decoration:none}
.foot-grid a:hover{color:var(--amber)}
.foot-signup{display:flex;gap:.7rem}
.foot-signup input{flex:1}
.foot-signup .btn{padding:.8rem 1.2rem;font-size:.8rem;white-space:nowrap}
@media (max-width:480px){.foot-signup{flex-direction:column}}
.disclaimer{
  max-width:var(--maxw);margin:2.6rem auto 0;padding-top:1.5rem;border-top:1px solid var(--line);
  font-size:.78rem;color:#7d7563;line-height:1.7;
}
.disclaimer p+p{margin-top:.35rem}