/* ============================================================
   STANDARD LABS — shared brand foundation (design DNA)
   The Reference Standard. White-minimalist "gold standard".
   Each advertorial links this, then layers its own design.
   ============================================================ */

/* ---- Fonts ---- */
@font-face{font-family:"Archivo";src:url("./fonts/Archivo-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("./fonts/Archivo-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("./fonts/Archivo-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"InterSL";src:url("./fonts/Inter.ttf") format("truetype");font-weight:300 800;font-style:normal;font-display:swap}
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root{
  /* palette */
  --ink:#181A1E; --graphite:#2A2E35; --slate:#3C4654; --steel:#6E7178;
  --gold:#A8812F; --gold-hi:#C9A961; --gold-deep:#8A6A22;
  --line:#ECEAE3; --mist:#F6F4ED; --bone:#FCFBF8; --white:#FFFFFF;
  --gold-grad:linear-gradient(135deg,#C9A961,#A8812F 55%,#8A6A22);
  --gold-soft:linear-gradient(135deg,#F3E9CF,#E4CF97);
  /* type */
  --display:"Archivo",-apple-system,system-ui,sans-serif;
  --body:"InterSL",-apple-system,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* rhythm */
  --wrap:1200px; --r:14px;
  --shadow-sm:0 1px 2px rgba(24,26,30,.05),0 4px 14px rgba(24,26,30,.05);
  --shadow:0 10px 40px -12px rgba(24,26,30,.18);
  --shadow-gold:0 18px 50px -18px rgba(168,129,47,.45);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--white);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.05;letter-spacing:-.015em;margin:0}

/* shared primitives ----------------------------------------- */
.sl-wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sl-mono{font-family:var(--mono)}
.sl-gold-text{color:var(--gold)}
.sl-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:600}
.sl-seal{display:inline-block;width:34px;height:34px;background:url("./logo/icon.png") center/contain no-repeat}

/* button */
.sl-btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--display);font-weight:700;
  letter-spacing:.01em;font-size:15px;padding:15px 26px;border-radius:999px;border:0;cursor:pointer;
  text-decoration:none;transition:transform .18s ease,box-shadow .25s ease,background .25s ease;line-height:1}
.sl-btn--gold{background:var(--gold-grad);color:#fff;box-shadow:var(--shadow-gold)}
.sl-btn--gold:hover{transform:translateY(-2px)}
.sl-btn--ink{background:var(--ink);color:#fff}
.sl-btn--ink:hover{transform:translateY(-2px)}
.sl-btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.sl-btn--ghost:hover{background:var(--ink);color:#fff}
.sl-btn:active{transform:scale(.98)}

/* the gold certification rule under headings */
.sl-rule{width:64px;height:3px;background:var(--gold-grad);border-radius:2px}

/* RUO compliance footer (shared, honest, identical wording on every page) */
.sl-ruo{background:var(--ink);color:#cfd0d3;font-size:13.5px;line-height:1.7}
.sl-ruo .sl-wrap{padding-top:56px;padding-bottom:56px}
.sl-ruo__seal{width:40px;height:40px;background:url("./logo/icon-white.png") center/contain no-repeat;opacity:.95}
.sl-ruo__brand{font-family:var(--display);color:#fff;font-size:20px;letter-spacing:.02em;font-weight:700}
.sl-ruo__tag{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi)}
.sl-ruo a{color:#e7e3d8;text-decoration:none;border-bottom:1px solid rgba(201,169,97,.3)}
.sl-ruo a:hover{color:#fff}
.sl-ruo__legal{color:#9a9ca1;max-width:880px;margin-top:18px;font-size:12.5px;line-height:1.75}

@media (max-width:760px){ body{font-size:16px} .sl-wrap{padding:0 18px} }

/* reduced motion */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}