/* ================================================================
   ETHOS BIO — v2 Design System Foundation
   Premium scientific product aesthetic (Apple × Leica × Aesop).
   Loaded alongside page markup. Tokens + reusable component classes.
   URLs, schema, and commerce logic are unaffected by this file.
   ================================================================ */

/* ---- Fonts (all free / Google-hosted) ----
   Display serif: Newsreader (editorial, Canela-adjacent)
   UI / body:     Inter
   Data / labels: IBM Plex Mono                                   */

:root{
  /* Palette (per v2 handoff §4.1) */
  --ethos-canvas:#F6F3EE;
  --ethos-paper:#EFE9E1;
  --ethos-stone:#DDD6CB;
  --ethos-border:#D4CCC0;
  --ethos-black:#171717;
  --ethos-graphite:#2A2A2A;
  --ethos-charcoal:#111111;
  --ethos-muted:#77736D;
  --ethos-gold:#B89667;
  --ethos-bronze:#94734B;
  --ethos-sage:#72846A;
  --ethos-error:#9D5B5B;
  --ethos-white:#FFFFFF;

  /* Type families */
  --ff-display:'Newsreader',Georgia,'Times New Roman',serif;
  --ff-ui:'Inter',system-ui,-apple-system,sans-serif;
  --ff-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* Rhythm (8px system) */
  --sp-1:8px;--sp-2:16px;--sp-3:24px;--sp-4:32px;--sp-5:48px;
  --sp-6:64px;--sp-7:80px;--sp-8:128px;--sp-9:160px;

  --maxw:1200px;--maxw-wide:1520px;--maxw-text:720px;
  --radius:8px;
  --line:1px solid var(--ethos-border);
  --ease:cubic-bezier(0.22,1,0.36,1);
}

/* ---- Reset / base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  background:var(--ethos-canvas);
  color:var(--ethos-black);
  font-family:var(--ff-ui);
  font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,a,label,select,input,textarea{-webkit-tap-highlight-color:rgba(23,23,23,.06)}

/* ---- Typography scale ---- */
.e-display{font-family:var(--ff-display);font-weight:400;line-height:1.02;letter-spacing:-0.005em}
.e-h1{font-family:var(--ff-display);font-weight:400;font-size:clamp(40px,6vw,64px);line-height:1.04;letter-spacing:-0.01em;margin:0}
.e-h2{font-family:var(--ff-display);font-weight:400;font-size:clamp(32px,4.4vw,48px);line-height:1.06;letter-spacing:-0.008em;margin:0}
.e-h3{font-family:var(--ff-display);font-weight:400;font-size:clamp(24px,3vw,32px);line-height:1.12;margin:0}
.e-kicker{font-family:var(--ff-mono);font-weight:500;font-size:11px;letter-spacing:0.28em;text-transform:uppercase;color:var(--ethos-bronze)}
.e-label{font-family:var(--ff-mono);font-weight:500;font-size:10.5px;letter-spacing:0.24em;text-transform:uppercase;color:var(--ethos-muted)}
.e-data{font-family:var(--ff-mono);font-weight:500;font-size:13px;letter-spacing:0.02em;color:var(--ethos-graphite)}
.e-lede{font-size:18px;line-height:1.66;color:var(--ethos-graphite);max-width:var(--maxw-text)}
.e-muted{color:var(--ethos-muted)}

/* ---- Layout helpers ---- */
.e-wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.e-wrap-wide{max-width:var(--maxw-wide);margin:0 auto;padding:0 32px}
.e-section{padding:clamp(32px,4vw,56px) 0}
.e-rule{height:1px;background:var(--ethos-border);border:0;margin:0}
.e-goldrule{height:1px;background:linear-gradient(90deg,var(--ethos-gold),transparent);border:0}

/* ---- Buttons ---- */
.e-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-ui);font-weight:500;
  font-size:12px;letter-spacing:0.18em;text-transform:uppercase;cursor:pointer;
  padding:16px 26px;min-height:52px;border:1px solid transparent;transition:all .3s var(--ease);
  border-radius:2px}
.e-btn .e-arrow{transition:transform .3s var(--ease)}
.e-btn:hover .e-arrow{transform:translateX(5px)}
.e-btn-primary{background:var(--ethos-charcoal);color:var(--ethos-canvas)}
.e-btn-primary:hover{background:var(--ethos-black)}
.e-btn-secondary{background:transparent;color:var(--ethos-black);border-color:var(--ethos-graphite)}
.e-btn-secondary:hover{background:var(--ethos-black);color:var(--ethos-canvas)}
.e-btn-ghost{background:transparent;color:var(--ethos-black);padding:12px 0;min-height:auto;border:0;border-bottom:1px solid var(--ethos-graphite);border-radius:0}
.e-btn-gold{background:var(--ethos-gold);color:var(--ethos-charcoal)}
.e-btn-gold:hover{background:var(--ethos-bronze);color:var(--ethos-canvas)}

/* ---- Badges & pills ---- */
.e-badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--ff-mono);font-weight:500;
  font-size:9.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ethos-sage);
  padding:6px 12px;border:1px solid var(--ethos-border);border-radius:2px;background:var(--ethos-white)}
.e-badge svg{width:12px;height:12px}
.e-pill{display:inline-flex;align-items:center;font-family:var(--ff-mono);font-weight:500;font-size:10px;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--ethos-graphite);
  padding:9px 14px;border:1px solid var(--ethos-border);border-radius:2px;background:var(--ethos-paper)}

/* ---- Cards ---- */
.e-card{background:var(--ethos-white);border:1px solid var(--ethos-border);border-radius:var(--radius);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.e-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(23,23,23,.08)}

/* Editorial product card — DARK studio card (vial photo melts into dark card, no box) */
.e-prod{display:flex;flex-direction:column;background:#16150F;border:1px solid rgba(246,243,238,.10);
  border-radius:var(--radius);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.e-prod:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(0,0,0,.35)}
.e-prod .e-prod-img{position:relative;aspect-ratio:5/6;overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(125% 95% at 50% 30%, #2c2a26 0%, #1a1814 58%, #100f0c 100%)}
.e-prod .e-prod-img .pimg-fg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 46%;transition:transform .5s var(--ease)}
.e-prod:hover .e-prod-img .pimg-fg{transform:scale(1.04)}
.e-prod .e-prod-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1;background:#16150F}
.e-prod .e-prod-cat{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--ethos-gold)}
.e-prod .e-prod-name{font-family:var(--ff-display);font-size:26px;line-height:1;color:var(--ethos-canvas)}
.e-prod .e-prod-meta{display:flex;flex-direction:column;gap:3px;font-family:var(--ff-mono);font-size:11px;color:rgba(246,243,238,.55);letter-spacing:0.02em}
.e-prod .e-prod-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;padding-top:14px;border-top:1px solid rgba(246,243,238,.12)}
.e-prod .e-prod-price{font-family:var(--ff-display);font-size:22px;color:var(--ethos-canvas)}
.e-prod .e-prod-price small{font-family:var(--ff-mono);font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(246,243,238,.5);display:block;margin-bottom:2px}
.e-prod .e-prod-go{display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-ui);font-weight:500;font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ethos-canvas)}
.e-prod .e-prod-go .e-arrow{transition:transform .3s var(--ease)}
.e-prod:hover .e-prod-go .e-arrow{transform:translateX(4px)}
.e-prod .e-prod-ruo{font-family:var(--ff-mono);font-size:8px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(246,243,238,.4);padding:0 22px 16px;background:#16150F}

/* ---- Quality Scorecard (signature component) ---- */
.e-scorecard{background:var(--ethos-paper);border:1px solid var(--ethos-border);border-radius:var(--radius);overflow:hidden}
.e-scorecard .e-sc-head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--ethos-border);background:var(--ethos-white)}
.e-scorecard .e-sc-title{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:0.24em;text-transform:uppercase;color:var(--ethos-graphite)}
.e-scorecard .e-sc-seal{font-family:var(--ff-mono);font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ethos-bronze);display:flex;align-items:center;gap:6px}
.e-scorecard .e-sc-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 22px;border-bottom:1px solid var(--ethos-border)}
.e-scorecard .e-sc-row:last-child{border-bottom:0}
.e-scorecard .e-sc-k{font-family:var(--ff-ui);font-size:13.5px;color:var(--ethos-graphite)}
.e-scorecard .e-sc-v{display:flex;align-items:center;gap:9px;font-family:var(--ff-mono);font-size:12px;letter-spacing:0.02em;color:var(--ethos-black)}
.e-scorecard .e-sc-check{width:16px;height:16px;color:var(--ethos-sage);flex:none}

/* ---- COA / Certificate preview card ---- */
.e-coa{background:var(--ethos-white);border:1px solid var(--ethos-border);border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(23,23,23,.06);overflow:hidden;max-width:460px}
.e-coa .e-coa-top{display:flex;align-items:flex-start;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--ethos-border)}
.e-coa .e-coa-brand{font-family:var(--ff-display);font-size:19px;letter-spacing:.02em}
.e-coa .e-coa-status{font-family:var(--ff-mono);font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ethos-sage);border:1px solid var(--ethos-sage);border-radius:2px;padding:5px 9px}
.e-coa .e-coa-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.e-coa .e-coa-cell{padding:14px 24px;border-bottom:1px solid var(--ethos-border)}
.e-coa .e-coa-cell:nth-child(odd){border-right:1px solid var(--ethos-border)}
.e-coa .e-coa-k{font-family:var(--ff-mono);font-size:9px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ethos-muted);margin-bottom:5px}
.e-coa .e-coa-v{font-family:var(--ff-mono);font-size:14px;color:var(--ethos-black)}
.e-coa .e-coa-actions{display:flex;gap:10px;padding:18px 24px}

/* ---- Verification timeline ---- */
.e-timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 28px}
.e-timeline .e-tl-step{padding:0 10px;text-align:center}
.e-timeline .e-tl-num{width:40px;height:40px;border-radius:50%;border:1px solid var(--ethos-gold);
  background:var(--ethos-canvas);display:grid;place-items:center;font-family:var(--ff-mono);font-size:12px;color:var(--ethos-bronze);margin:0 auto 16px}
.e-timeline .e-tl-title{font-family:var(--ff-ui);font-weight:600;font-size:12px;letter-spacing:0.06em;text-transform:uppercase;text-align:center;color:var(--ethos-black);margin:0 0 6px}
.e-timeline .e-tl-desc{font-size:12.5px;line-height:1.5;color:var(--ethos-muted);text-align:center}

/* ---- Trust row ---- */
.e-trust{display:grid;grid-template-columns:repeat(4,1fr)}
.e-trust .e-trust-cell{display:flex;align-items:flex-start;gap:13px;padding:26px 28px;border-right:1px solid var(--ethos-border)}
.e-trust .e-trust-cell:last-child{border-right:0}
.e-trust .e-trust-ico{width:26px;height:26px;color:var(--ethos-graphite);flex:none;stroke-width:1.4}
.e-trust .e-trust-t{font-family:var(--ff-ui);font-weight:600;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ethos-black)}
.e-trust .e-trust-s{font-family:var(--ff-mono);font-size:10.5px;color:var(--ethos-muted);margin-top:4px;letter-spacing:0.02em}

/* ---- Thin-line icon defaults ---- */
.e-ico{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

/* ---- Motion (visible by default; only hide once JS confirms support) ---- */
@media (prefers-reduced-motion: no-preference){
  html.e-js .e-reveal{opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  html.e-js .e-reveal.in{opacity:1;transform:none}
}
@media print{ .e-reveal{opacity:1 !important;transform:none !important} }

/* ---- Responsive ---- */
@media(max-width:900px){
  .e-wrap,.e-wrap-wide{padding:0 22px}
  .e-trust{grid-template-columns:1fr 1fr}
  .e-trust .e-trust-cell{border-right:0;border-bottom:1px solid var(--ethos-border)}
  .e-trust .e-trust-cell:nth-child(2n){border-right:0}
  .e-timeline{grid-template-columns:1fr;gap:0}
  .e-timeline .e-tl-step{display:grid;grid-template-columns:38px 1fr;gap:16px;padding:14px 0;text-align:left}
  .e-timeline .e-tl-step::before{display:none}
  .e-timeline .e-tl-num{margin:0}
  .e-timeline .e-tl-title,.e-timeline .e-tl-desc{text-align:left}
  .e-coa .e-coa-grid{grid-template-columns:1fr}
  .e-coa .e-coa-cell:nth-child(odd){border-right:0}
}
@media(max-width:600px){
  body{font-size:16px}
  input,select,textarea{font-size:16px}
}