/* TITANIUM STANDARD - prototype stylesheet
   Tokens per brand panel 12. No token shared with any other project.
   Serif wordmark, mono for every number, sans for UI. */

:root {
  --carbon:        #0A0A0B;
  --titanium:      #8C9096;
  --titanium-lt:   #D3D5D8;
  --gold:          #A68B57;
  --paper:         #F7F7F5;
  --rule:          #1E1F22;
  --rule-lt:       #E2E3E0;

  --serif: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Public Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:  "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --gutter: 48px;
  --max:    1160px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--carbon);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--titanium-lt); }
a:hover { border-bottom-color: var(--gold); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- header ---------- */

header.site {
  background: var(--carbon);
  color: var(--paper);
  border-bottom: 1px solid var(--rule);
}
header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 26px;
  padding-bottom: 26px;
}
.brand { display: flex; align-items: center; gap: 16px; border: 0; }
.brand:hover { border: 0; }

.tile {
  width: 34px; height: 34px;
  border: 1px solid var(--titanium);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  flex: 0 0 34px;
}
.tile .num { font-family: var(--mono); font-size: 7px; color: var(--titanium); line-height: 1; }
.tile .sym { font-family: var(--serif); font-size: 15px; color: var(--paper); line-height: 1.1; }

.wordmark { line-height: 1.15; }
.wordmark .wm {
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
  display: block;
}
.wordmark .sub {
  font-family: var(--sans);
  font-size: 8.5px;
  letter-spacing: 0.30em;
  color: var(--titanium);
  text-transform: uppercase;
  display: block;
  margin-top: 4px;
}

nav.site a {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--titanium-lt);
  margin-left: 30px;
  border: 0;
  padding-bottom: 3px;
}
nav.site a:hover, nav.site a.on { color: var(--gold); border-bottom: 1px solid var(--gold); }

/* ---------- hero ---------- */

.hero {
  background: var(--carbon);
  color: var(--paper);
  padding: 120px 0 128px;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 46px;
  line-height: 1.22;
  letter-spacing: 0.005em;
  margin: 0 0 34px;
  max-width: 19em;
}
.hero p {
  color: var(--titanium-lt);
  max-width: 44em;
  font-size: 16px;
  margin: 0 0 20px;
}
.hero .rule {
  width: 52px; height: 1px;
  background: var(--gold);
  margin: 0 0 34px;
}
.hero .ruo {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--titanium);
  text-transform: uppercase;
  margin-top: 46px;
  line-height: 1.9;
}
.hero .cta { margin-top: 44px; display: flex; gap: 14px; flex-wrap: wrap; }

/* hero with the branded vial image */
.hero.has-img { padding: 0; overflow: hidden; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: 56px;
  align-items: center;
  min-height: 620px;
}
.hero-copy { padding: 96px 0 104px; }
.hero-img { margin: 0; align-self: stretch; position: relative; }
.hero-img img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 620px;
  object-fit: cover;
  /* the vial sits near the horizontal centre of the 2000px composite;
     this crop keeps the vial and drops the baked-in lockup on the left */
  object-position: 52% center;
}
.hero-img::before {
  /* soft seam so the photograph meets the carbon panel without a hard edge */
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: 140px;
  background: linear-gradient(to right, var(--carbon), rgba(10,10,11,0));
  z-index: 1;
}
.hero-img figcaption {
  position: absolute;
  left: 0; bottom: 22px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--titanium);
  padding-left: 152px;
}

.btn {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 15px 30px;
  border: 1px solid var(--gold);
  color: var(--gold);
  background: transparent;
  font-family: var(--sans);
  cursor: pointer;
}
.btn:hover { background: var(--gold); color: var(--carbon); border-color: var(--gold); }
.btn.solid { background: var(--gold); color: var(--carbon); }
.btn.solid:hover { background: transparent; color: var(--gold); }
.btn.dark { border-color: var(--carbon); color: var(--carbon); }
.btn.dark:hover { background: var(--carbon); color: var(--paper); }
.btn:disabled,
.btn[disabled] {
  border-color: var(--titanium-lt);
  color: var(--titanium);
  background: transparent;
  cursor: not-allowed;
}

/* ---------- tiles ---------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule-lt);
  border-bottom: 1px solid var(--rule-lt);
}
.tiles .t { padding: 54px 40px 58px; border-right: 1px solid var(--rule-lt); }
.tiles .t:last-child { border-right: 0; }
.tiles .t h3 {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
  font-weight: 600;
}
.tiles .t p { margin: 0; color: #3A3C40; font-size: 14.5px; }

/* ---------- sections ---------- */

section { padding: 84px 0; }
section.tight { padding: 56px 0; }

h2.sec {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--titanium);
  font-weight: 600;
  margin: 0 0 30px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-lt);
}
h1.page {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 40px;
  margin: 0 0 12px;
  letter-spacing: 0.01em;
}
h3.sub {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  margin: 46px 0 14px;
}
p.lede { font-size: 17px; max-width: 42em; color: #2C2E31; }
p { max-width: 42em; }
ol, ul { max-width: 40em; }
li { margin-bottom: 8px; }

.kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 16px;
}

.quiet { color: var(--titanium); }
.mono  { font-family: var(--mono); }

/* ---------- data tables ---------- */

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
table.data th {
  text-align: left;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--titanium);
  font-weight: 600;
  border-bottom: 1px solid var(--carbon);
  padding: 0 18px 12px 0;
  white-space: nowrap;
}
table.data td {
  padding: 15px 18px 15px 0;
  border-bottom: 1px solid var(--rule-lt);
  vertical-align: top;
}
table.data td.num, table.data th.num { font-family: var(--mono); text-align: right; padding-right: 0; }
table.data tr:hover td { background: #EFEFEC; }
table.data td .cname { font-family: var(--serif); font-size: 18px; }
table.data td .syn { display: block; color: var(--titanium); font-size: 12px; margin-top: 3px; }

/* spec list on the product page */
dl.spec { margin: 0; display: grid; grid-template-columns: 220px 1fr; }
dl.spec dt {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--titanium);
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-lt);
  font-weight: 600;
}
dl.spec dd {
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-lt);
  font-family: var(--mono);
  font-size: 13px;
  word-break: break-word;
}
dl.spec dd.prose { font-family: var(--sans); font-size: 14px; }
.tv { color: #8A6A1F; background: #F3ECDB; padding: 1px 7px; font-size: 11px; letter-spacing: 0.08em; }

/* ---------- ruo blocks ---------- */

.ruo-block {
  border-top: 1px solid var(--carbon);
  border-bottom: 1px solid var(--carbon);
  padding: 22px 0;
  margin: 54px 0;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.85;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  max-width: 44em;
}

.note {
  background: #EDEDEA;
  border-left: 2px solid var(--gold);
  padding: 18px 22px;
  font-size: 13.5px;
  max-width: 42em;
  margin: 28px 0;
}

/* ---------- checkout ---------- */

.checkout-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: start; }

.panel {
  border: 1px solid var(--carbon);
  padding: 34px 34px 38px;
  background: #fff;
}
.panel h3 {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 22px;
  font-weight: 600;
}

.field { display: flex; gap: 12px; align-items: center; margin-bottom: 26px; }
.field input[type=text] {
  font-family: var(--mono);
  font-size: 13px;
  padding: 11px 13px;
  border: 1px solid var(--titanium-lt);
  background: var(--paper);
  width: 190px;
}
.field input[type=text]:focus { outline: none; border-color: var(--gold); }

.attest { margin: 30px 0 0; }
.attest .row { display: flex; gap: 14px; align-items: flex-start; }
.attest input[type=checkbox] {
  width: 17px; height: 17px; margin: 2px 0 0; flex: 0 0 17px; accent-color: var(--gold);
}
.attest .stmt { font-size: 14.5px; line-height: 1.6; max-width: 40em; }
.attest .initials { margin: 26px 0 0 31px; display: flex; align-items: center; gap: 14px; }
.attest .initials label {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--titanium);
}
.attest .initials input {
  font-family: var(--mono);
  font-size: 18px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  width: 130px;
  padding: 9px 12px;
  border: 1px solid var(--titanium-lt);
  background: var(--paper);
}
.attest .initials input:focus { outline: none; border-color: var(--gold); }
.attest .consent {
  margin: 34px 0 0 31px;
  font-size: 12.5px;
  color: #4A4C50;
  max-width: 38em;
}
.attest .err { margin: 16px 0 0 31px; font-size: 12.5px; color: #8A2B1F; min-height: 1.2em; }

.sep { height: 1px; background: var(--rule-lt); margin: 34px 0; }

.summary-line { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--rule-lt); font-size: 13.5px; }
.summary-line .mono { font-family: var(--mono); }
.summary-line.total { border-bottom: 0; border-top: 1px solid var(--carbon); font-weight: 600; margin-top: 8px; }

/* ---------- footer ---------- */

footer.site {
  background: var(--carbon);
  color: var(--titanium);
  margin-top: 0;
  padding: 62px 0 72px;
  font-size: 12.5px;
}
footer.site .wm2 {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 26px;
}
footer.site .legal { font-family: var(--mono); font-size: 10.5px; line-height: 2; letter-spacing: 0.04em; text-transform: uppercase; max-width: 52em; }
footer.site nav { margin-top: 32px; }
footer.site nav a {
  color: var(--titanium-lt);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-right: 30px;
  border: 0;
}
footer.site nav a:hover { color: var(--gold); }

/* ---------- build-only flag banner (never ships) ---------- */
.devbar {
  background: #2A2013;
  color: #C9A961;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  padding: 7px var(--gutter);
  text-align: center;
}

@media (max-width: 900px) {
  :root { --gutter: 24px; }
  .tiles { grid-template-columns: 1fr; }
  .tiles .t { border-right: 0; border-bottom: 1px solid var(--rule-lt); }
  .checkout-grid { grid-template-columns: 1fr; gap: 40px; }
  dl.spec { grid-template-columns: 1fr; }
  dl.spec dt { border-bottom: 0; padding-bottom: 0; }
  .hero h1 { font-size: 32px; }
  .hero-grid { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .hero-copy { padding: 56px 0 40px; }
  .hero-img img { min-height: 300px; height: 300px; }
  .hero-img::before { display: none; }
  .hero-img figcaption { padding-left: 24px; }
  header.site .wrap { flex-direction: column; gap: 20px; align-items: flex-start; }
  nav.site a { margin: 0 24px 0 0; }
}

/* live overrides 2026-09-19: larger, quieter, more air */
html{font-size:18px}
header.site .wrap{padding-top:26px;padding-bottom:26px}
header.site .wm{font-size:30px;letter-spacing:.2em}
header.site .sub{font-size:11px;letter-spacing:.42em}
header.site .tile{transform:scale(1.35);transform-origin:left center;margin-right:22px}
nav.site a{font-size:12.5px;letter-spacing:.24em}
.hero h1{font-size:clamp(44px,5.4vw,76px);line-height:1.05}
.hero p{font-size:19px;line-height:1.7;max-width:34em}
.wrap{max-width:1320px;padding-left:48px;padding-right:48px}
section{padding-top:96px;padding-bottom:96px}
h2.sec{font-size:40px}.lede{font-size:22px;line-height:1.6}
.tiles .t h3{font-size:26px}.tiles .t p{font-size:16.5px}
.btn{padding:18px 34px;font-size:12.5px;letter-spacing:.3em}
@media(max-width:820px){.wrap{padding-left:22px;padding-right:22px}header.site .wm{font-size:20px}}

:root{--paper:#efe9dc;--carbon:#0a0a0b;--gold:#cdb47c;--rule:#2c2d31;--rule-lt:#2c2d31;--titanium-lt:#3a3425;--sans:Inter,-apple-system,"Segoe UI",Arial,sans-serif}
html,body{background:#0a0a0b;color:#efe9dc}
header.site{background:#0a0a0b;border-bottom:1px solid #2c2d31}
.tsm{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:34px;color:#cdb47c;letter-spacing:.06em;margin-right:6px}
header.site .wm{color:#efe9dc}header.site .sub{color:#a9a599}
h1,h2,h3,h2.sec{font-family:"Cormorant Garamond",serif;font-weight:500;color:#efe9dc}
.hero h1{color:#efe9dc}h3{color:#cdb47c}
p,li,dd,td{color:#d5d0c3}.quiet,dt,th,.lede{color:#a9a599}.lede{font-family:"Cormorant Garamond",serif;color:#d8d3c6}
section,.tiles,.tiles .t,footer.site,table,tr,td,th,dl,dt,dd{background:transparent;border-color:#2c2d31}
.tiles .t{background:#0f1012;border:1px solid #2c2d31}
table{border-collapse:collapse}tr:hover td{background:#111214}
a{border-bottom-color:#3a3425}a:hover{border-bottom-color:#cdb47c;color:#cdb47c}
.btn,.btn.dark{border:1px solid #cdb47c;color:#cdb47c;background:none}
.btn.solid,.btn.dark:hover,.btn:hover{background:linear-gradient(90deg,#6f5a16,#f3dc8a 50%,#6f5a16);color:#22190a;border-color:#cdb47c}
input,select,textarea{background:#08090a;border:1px solid #3a3425;color:#efe9dc}
.note,.ruo{color:#a9a599;border-color:#2c2d31;background:transparent}
.tv{background:#1a1608;color:#e2c983}
footer.site{border-top:1px solid #2c2d31;color:#8a8373}footer.site .wm2{color:#cdb47c;font-family:"Cormorant Garamond",serif}
.hero p,.tiles .t p,section p,p.lede,.lede,li,dd{color:#d5d0c3 !important}
.quiet,.quiet *{color:#8f8a7d !important}
nav.site{display:flex;flex-wrap:nowrap;gap:26px}nav.site a{color:#a9a599 !important;font-size:11.5px;letter-spacing:.2em;white-space:nowrap}
nav.site a.active,nav.site a:hover,nav.site a[data-nav="founding"]{color:#cdb47c !important}
header.site .wm{font-size:24px;white-space:nowrap}header.site .sub{white-space:nowrap}
nav.site{gap:22px;align-items:center}nav.site a[data-nav="cart"]{color:#efe9dc !important}
.tiles .t h3{font-family:"Cormorant Garamond",serif;text-transform:none;letter-spacing:.02em;font-size:30px;font-weight:500}
/* discreet legal: present once, small, easy to scroll past */
.hero .ruo{font-size:10px;letter-spacing:.2em;color:#6f6b61 !important;border:0;padding:0;margin-top:26px}
footer.site .legal{font-size:10.5px;line-height:1.7;color:#6f6b61;max-width:760px}
footer.site nav a{color:#a9a599 !important;margin-right:26px;font-size:11.5px;letter-spacing:.2em}footer.site nav a:hover{color:#cdb47c !important}
textarea{font:inherit}
/* shop look */
.pv-w{position:relative;overflow:hidden;border-radius:4px;margin:0 auto}
.pv{position:absolute;left:0;top:0;width:370px;height:790px;background:url(../img/vial-blank.jpg) center/370px 790px no-repeat}
.pv-band{position:absolute;left:23px;top:348px;width:324px;height:9px;background:linear-gradient(90deg,#6f5a16,#f3dc8a 50%,#6f5a16)}
.pv-lab{position:absolute;left:31px;top:362px;width:308px;height:290px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.pv-mono{width:50px;height:50px;border-radius:50%;border:1.5px solid #b8975a;color:#cdb47c;display:flex;align-items:center;justify-content:center;font:600 23px "Cormorant Garamond",serif;margin-bottom:10px}
.pv-brand{font:600 34px/1.04 "Cormorant Garamond",serif;letter-spacing:.15em;text-transform:uppercase}
.pv-sub{font:400 10px Inter,sans-serif;letter-spacing:.42em;color:#8C9096;margin-top:9px;text-transform:uppercase}
.pv-rule{width:56px;height:1px;background:#b8975a;margin:12px 0 8px}
.pv-cmp{font-family:"Cormorant Garamond",serif;color:#f1ece0;white-space:nowrap}
.pv-mg{font:400 9px Inter,sans-serif;letter-spacing:.3em;color:#bdb6a6;margin-top:3px}
.pv-shade{position:absolute;left:23px;top:340px;width:324px;height:320px;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,0) 22%,rgba(255,255,255,.04) 50%,rgba(0,0,0,0) 78%,rgba(0,0,0,.6))}
.pv-cake{position:absolute;left:34px;top:664px;width:302px;height:96px;border-radius:0 0 26px 26px;background:#2f6fd0;opacity:.5}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:34px}
.pcard{border:1px solid #2c2d31;background:#0f1012;padding:22px 18px 20px;text-align:center}.pcard:hover{border-color:#cdb47c}
.pimg{display:block;background:radial-gradient(ellipse at 50% 30%,#1d1e21,#08090a);padding:14px 0;margin-bottom:14px}
.pname{font:500 27px "Cormorant Garamond",serif;color:#efe9dc}.pprice{margin:6px 0 14px;font-size:15px;color:#d5d0c3}.pprice b,.pfrom b{color:#cdb47c;font-weight:500;font-size:1.25em}
.pbtns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.btn.sm{padding:10px 14px;font-size:10.5px;letter-spacing:.2em}
.ptop{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start}.pimgbox{background:radial-gradient(ellipse at 50% 30%,#1d1e21,#08090a);border:1px solid #2c2d31;padding:26px 0;position:sticky;top:20px}
.pfrom{font-size:20px;margin:14px 0 0}
@media(max-width:1100px){.pgrid{grid-template-columns:repeat(2,1fr)}.ptop{grid-template-columns:1fr}.pimgbox{position:static}}
/* mobile */
@media(max-width:820px){
html{font-size:16px}
header.site .wrap{flex-direction:column;align-items:flex-start;gap:14px;padding-top:16px;padding-bottom:14px}
nav.site{flex-wrap:wrap !important;gap:10px 18px !important}nav.site a{font-size:11px !important}
.hero-grid{display:block !important}.hero-img{margin-top:26px}.hero h1{font-size:40px !important}.hero p{font-size:17px !important}
.tiles{display:block !important}.tiles .t{margin-bottom:12px}
section{padding-top:54px !important;padding-bottom:54px !important}h2.sec{font-size:30px !important;letter-spacing:.12em}
.pgrid{grid-template-columns:1fr 1fr !important;gap:12px}.pcard{padding:14px 10px}.pname{font-size:21px}.btn.sm{padding:9px 10px;font-size:9.5px}
.lib{grid-template-columns:1fr !important}.calls{grid-template-columns:1fr 1fr}
table.data,#cartbox table{display:block;overflow-x:auto;white-space:nowrap}
dl.spec{display:block}dl.spec dt{margin-top:14px}
.modal .box{margin:0 14px;padding:26px 20px}.toast{left:14px;right:14px;bottom:14px}
.btn{padding:15px 22px}
}
@media(max-width:820px){
html,body{overflow-x:hidden}img,table{max-width:100%}
.wrap{padding-left:18px !important;padding-right:18px !important}
header.site .wm{font-size:17px !important;letter-spacing:.14em !important}header.site .sub{font-size:9px !important;letter-spacing:.3em !important}.tsm{font-size:26px}
.modal{padding:12px;align-items:flex-start;overflow:auto}.modal .box{width:100%;max-width:none !important;margin:6vh 0 0 !important;padding:22px 18px !important;max-height:86vh;overflow:auto}
.modal h3{font-size:24px !important}.modal .btn{display:block;width:100%;text-align:center;margin:8px 0 0}
.ptop{display:block !important}.pimgbox{position:static !important;margin-bottom:22px}
.pfrom{font-size:18px}
}
@media(max-width:480px){.pgrid{grid-template-columns:1fr !important}.pv-w{transform:scale(1.15);margin:18px auto}}
/* library */
.lib{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
.doc{border:1px solid #2c2d31;background:#0f1012;padding:26px;cursor:pointer;display:block;border-bottom:1px solid #2c2d31}
.doc:hover{border-color:#cdb47c}.doc small{font-family:var(--mono);color:#cdb47c;letter-spacing:.2em;font-size:11px}
.doc h3{font-size:25px;margin:10px 0 8px;color:#efe9dc}.doc p{font-size:15px;color:#a9a599;margin:0}.doc .lock{margin-top:16px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:#cdb47c}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.82);display:none;align-items:center;justify-content:center;z-index:50}.modal.on{display:flex}
.modal .box{background:#0f1012;border:1px solid #cdb47c;max-width:520px;padding:40px;text-align:center}.modal h3{font-size:30px;color:#efe9dc;margin:0 0 12px}
.report{max-width:760px}.report h3{margin-top:34px;font-size:26px}.report p{font-size:18px;line-height:1.75}
@media(max-width:900px){.lib{grid-template-columns:1fr}}

.toast{position:fixed;right:28px;bottom:28px;background:#0f1012;border:1px solid #cdb47c;color:#efe9dc;padding:16px 22px;font-size:15px;opacity:0;transform:translateY(10px);transition:.25s;pointer-events:none;z-index:60}
.addp{color:#cdb47c;border:1px solid #cdb47c;padding:2px 9px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-left:6px}.addp:hover{background:#cdb47c;color:#22190a}
.toast.on{opacity:1;transform:none;pointer-events:auto}.toast a{color:#cdb47c;margin-left:10px}