/* eyelashglasses.com - shared components and layout */

*{box-sizing:border-box; margin:0; padding:0;}
html{background:#171021; scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important; transition:none !important;}
}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .35s ease, color .35s ease;
}
a{color:var(--accent2);}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--accent2); outline-offset:3px;
}
.wrap{max-width:1060px; margin:0 auto; padding:0 22px;}
.mono, .mm{font-family:var(--mono);}
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent2); margin-bottom:14px;
}

/* ---------- header ---------- */
header{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0; flex-wrap:wrap; gap:12px;
}
.wordmark{font-family:var(--disp); font-size:28px; color:var(--text); text-decoration:none; letter-spacing:.02em;}
.wordmark .dot{color:var(--accent);}
header nav a{
  font-family:var(--mono); font-size:13px; color:var(--dim);
  text-decoration:none; margin-left:20px; letter-spacing:.08em;
}
header nav a:hover{color:var(--text);}
@media (max-width:640px){ header nav a{margin-left:12px; font-size:12px;} }

/* ---------- buttons ---------- */
.btn{
  display:inline-block; font-family:var(--mono); font-size:14px;
  letter-spacing:.06em; text-decoration:none; cursor:pointer;
  padding:13px 22px; border-radius:4px; border:1px solid transparent;
}
.btn-accent{background:var(--accent); color:var(--bg);}
.btn-accent:hover{filter:brightness(1.12);}
.btn-ghost{border-color:var(--line); color:var(--text); background:transparent;}
.btn-ghost:hover{border-color:var(--accent2);}

/* ---------- hero (index) ---------- */
.hero{padding:72px 0 60px; border-bottom:1px solid var(--line);}
.hero h1{
  font-family:var(--disp); font-weight:400;
  font-size:clamp(44px, 7.5vw, 88px); line-height:1.02; letter-spacing:.01em;
}
.hero h1 em{font-style:normal; color:var(--accent);}
.hero p.lede{max-width:560px; margin-top:22px; font-size:19px; color:var(--dim);}
.hero p.lede strong{color:var(--text); font-weight:500;}
.hero .ctas{margin-top:34px; display:flex; gap:14px; flex-wrap:wrap;}
.factline{
  margin-top:46px; font-family:var(--mono); font-size:13px;
  color:var(--dim); display:flex; gap:26px; flex-wrap:wrap;
}
.factline span b{color:var(--text); font-weight:600;}

/* ---------- sections ---------- */
section{padding:64px 0; border-bottom:1px solid var(--line); scroll-margin-top:20px;}
h2{
  font-family:var(--body); font-weight:700; font-size:clamp(26px,3.4vw,34px);
  line-height:1.15; margin-bottom:14px; letter-spacing:-.01em;
}
.sub{color:var(--dim); max-width:640px;}
.cols{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; margin-top:34px;}
@media (max-width:820px){ .cols{grid-template-columns:1fr;} }
.science p{margin-bottom:16px; color:var(--dim);}
.science p b{color:var(--text); font-weight:500;}
.callout{border-left:3px solid var(--accent); padding:10px 0 10px 18px; color:var(--text); font-size:16px;}
.callout .mm{color:var(--accent); font-weight:600;}

/* ---------- panels + diagrams ---------- */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:26px;}
.diagram-panel{padding:18px;}
.diagram-panel figcaption{
  font-family:var(--mono); font-size:12px; color:var(--dim);
  letter-spacing:.1em; text-transform:uppercase; padding:10px 8px 4px;
}
svg text{font-family:'IBM Plex Mono', monospace;}

/* ---------- tier cards (index) ---------- */
.tiers{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:38px;}
@media (max-width:920px){ .tiers{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .tiers{grid-template-columns:1fr;} }
.tier{
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:22px 20px; position:relative; overflow:hidden;
}
.tier .band{position:absolute; top:0; left:0; right:0; height:4px;}
.tier h3{font-family:var(--disp); font-weight:400; font-size:30px; margin:10px 0 2px;}
.tier .range{font-family:var(--mono); font-size:13px; color:var(--dim);}
.tier p{font-size:14.5px; color:var(--dim); margin-top:12px;}
.tier .glyph{font-size:22px;}
.t1 .band{background:var(--tier-whisper);} .t1 h3{color:var(--tier-whisper);}
.t2 .band{background:var(--tier-flutter);} .t2 h3{color:var(--tier-flutter);}
.t3 .band{background:var(--tier-swoop);}   .t3 h3{color:var(--tier-swoop);}
.t4 .band{background:linear-gradient(90deg,#0a070f,var(--accent2),#0a070f);}
.t4 h3{color:var(--text);}
.rule-line{
  margin-top:30px; font-size:17px; color:var(--text);
  border:1px dashed var(--line); border-radius:8px; padding:16px 20px;
  background:rgba(157,123,216,.05);
}

/* ---------- checker (index) ---------- */
#checker{scroll-margin-top:20px;}
.checker-grid{
  display:grid; grid-template-columns:minmax(300px,1fr) minmax(320px,1.1fr);
  gap:36px; margin-top:36px; align-items:start;
}
@media (max-width:880px){ .checker-grid{grid-template-columns:1fr;} }
.field{margin-bottom:22px;}
.field label{
  display:block; font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim); margin-bottom:10px;
}
.field label output{color:var(--text); font-weight:600; letter-spacing:0; font-size:13px;}
input[type=range]{width:100%; accent-color:var(--accent); height:28px;}
.curl-row{display:flex; gap:8px; flex-wrap:wrap;}
.curl-btn{
  font-family:var(--mono); font-size:14px; padding:9px 0; flex:1 1 0; min-width:44px;
  background:var(--bg); color:var(--dim); border:1px solid var(--line);
  border-radius:5px; cursor:pointer;
}
.curl-btn[aria-pressed=true]{border-color:var(--accent2); color:var(--text); background:var(--line);}
select{
  width:100%; font-family:var(--mono); font-size:14px; padding:11px 12px;
  background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:5px;
}
.readout{border-top:1px solid var(--line); margin-top:6px; padding-top:20px;}
.readout .row{
  display:flex; justify-content:space-between; font-family:var(--mono);
  font-size:14px; padding:5px 0; color:var(--dim);
}
.readout .row b{color:var(--text); font-weight:600;}
.verdict{margin-top:16px; border-radius:8px; padding:16px 18px; font-size:16px; border:1px solid var(--line);}
.verdict.pass{border-color:var(--tier-whisper); color:var(--tier-whisper);}
.verdict.fail{border-color:var(--tier-swoop); color:var(--tier-swoop);}
.verdict small{display:block; color:var(--dim); font-size:13.5px; margin-top:4px;}
.tierbadge{
  display:inline-block; font-family:var(--disp); font-size:26px; line-height:1;
  padding:8px 16px 10px; border-radius:6px; border:1px solid var(--line); margin-top:4px;
}

/* ---------- world switcher (shop) ---------- */
.worlds{display:flex; gap:10px; padding:26px 0 8px; flex-wrap:wrap;}
.world-btn{
  font-family:var(--mono); font-size:14px; letter-spacing:.1em; text-transform:uppercase;
  padding:12px 26px; border-radius:99px; cursor:pointer;
  background:var(--panel); color:var(--dim); border:1px solid var(--line);
}
.world-btn[aria-pressed=true]{border-color:var(--accent); color:var(--text);}
.world-tag{
  font-family:var(--mono); font-size:12px; color:var(--dim);
  padding:14px 2px 0; letter-spacing:.06em; min-height:44px;
}
.collection{display:none; padding:26px 0 70px;}
.collection.active{display:block;}
.collection h1{font-family:var(--disp); font-weight:400; font-size:clamp(40px,6vw,64px); line-height:1.05;}
.collection h1 em{font-style:normal; color:var(--accent);}
.collection .lede{color:var(--dim); max-width:600px; margin-top:12px;}

/* ---------- product cards (shop) ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:18px; margin-top:36px;}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  overflow:hidden; display:flex; flex-direction:column;
}
.card .art{background:var(--bg); border-bottom:1px solid var(--line); padding:8px;}
.card .art svg, .card .art img{display:block; width:100%;}
.card .body{padding:18px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1;}
.card h3{font-size:19px; font-weight:700;}
.card .kind{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim);}
.card .spec{font-family:var(--mono); font-size:12.5px; color:var(--dim);}
.card .spec b{color:var(--text); font-weight:600;}
.badge{
  align-self:flex-start; font-family:var(--disp); font-size:20px; line-height:1;
  padding:6px 12px 8px; border-radius:5px; border:1px solid var(--line);
}
.badge.whisper{color:var(--tier-whisper); border-color:var(--tier-whisper);}
.badge.flutter{color:var(--tier-flutter); border-color:var(--tier-flutter);}
.badge.swoop{color:var(--tier-swoop); border-color:var(--tier-swoop);}
.badge.fullbat{color:var(--text); border-color:var(--text);}
.card .foot{display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:10px;}
.price{font-family:var(--mono); font-size:16px; font-weight:600;}
.want{
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; cursor:pointer;
  background:transparent; color:var(--accent); border:1px solid var(--accent);
  border-radius:5px; padding:8px 14px;
}
.want:hover{background:var(--accent); color:var(--bg);}
.want.done{background:var(--accent); color:var(--bg); cursor:default;}
.sysnote{
  margin-top:44px; border:1px dashed var(--line); border-radius:8px;
  padding:16px 20px; color:var(--dim); font-size:15px;
}
.sysnote b{color:var(--text);}

/* ---------- shop teaser cards (index) ---------- */
.shop-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px;}
@media (max-width:820px){ .shop-grid{grid-template-columns:1fr;} }
.shop-card{background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:24px 22px;}
.shop-card h3{font-size:19px; margin-bottom:8px;}
.shop-card p{font-size:14.5px; color:var(--dim);}
.shop-card .soon{
  display:inline-block; margin-top:16px; font-family:var(--mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  border:1px solid var(--line); border-radius:99px; padding:5px 12px; text-decoration:none;
}

/* ---------- notify ---------- */
.notify{display:flex; gap:10px; margin-top:26px; max-width:480px; flex-wrap:wrap;}
.notify input[type=email]{
  flex:1 1 220px; font-family:var(--mono); font-size:14px; padding:13px 14px;
  background:var(--panel); border:1px solid var(--line); border-radius:5px; color:var(--text);
}
.notify-msg{font-family:var(--mono); font-size:13px; margin-top:12px; color:var(--tier-whisper); min-height:20px;}

/* ---------- footer ---------- */
footer{padding:40px 0 60px; color:var(--dim); font-size:13.5px; border-top:1px solid var(--line);}
footer .fm{font-family:var(--mono); font-size:12px; margin-top:8px; letter-spacing:.06em;}