/* ==========================================================================
   Michigan Coin & Bullion — Design Tokens
   Palette: brand navy (sampled from the real logo) + brass gold + cream
   Type: Roboto Slab (slab-serif display, matches the logo's lettering) /
         Work Sans (body) / IBM Plex Mono (data, prices)
   ========================================================================== */

:root{
  --ink:        #032150; /* brand navy, sampled from logo */
  --ink-2:      #0a2f66;
  --ink-3:      #123a78;
  --parchment:  #f7f5ef;
  --parchment-2:#eceadf;
  --paper-line: rgba(3,33,80,0.14);
  --gold:       #b8912f;
  --gold-bright:#d9b24c;
  --gold-dim:   rgba(184,145,47,0.4);
  --oxblood:    #b8912f;   /* CTA fill now uses brand gold, not red */
  --oxblood-2:  #a67e26;
  --gold-text:  #8a6a1f;   /* darkened gold, accessible on cream backgrounds */
  --ink-text:   #16233d;
  --parch-text: #e7ecf5;
  --muted:      #7c8aa3;
  --font-display: "Roboto Slab", "Rockwell", Georgia, serif;
  --font-body: "Work Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --radius: 2px;
  --container: 1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--parchment);
  color:var(--ink-text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.08;
  margin:0 0 .5em;
  color:var(--ink);
}
p{margin:0 0 1em;}
.container{max-width:var(--container);margin:0 auto;padding:0 28px;}
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  display:flex;align-items:center;gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:22px;height:1px;background:var(--gold);display:inline-block;
}
:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

/* -------------------------------------------------- reeded edge divider */
.reeded{
  height:10px;
  background:repeating-linear-gradient(90deg, var(--gold-dim) 0 2px, transparent 2px 8px);
  opacity:.7;
}
.reeded.dark{
  background:repeating-linear-gradient(90deg, rgba(217,178,76,.35) 0 2px, transparent 2px 8px);
}

/* -------------------------------------------------- header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:#fffefb;
  border-bottom:1px solid var(--paper-line);
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  height:86px;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{height:46px;width:auto;flex-shrink:0;}
.brand-text{font-family:var(--font-display);color:var(--ink);line-height:1.1;}
.brand-text strong{display:block;font-size:1.05rem;letter-spacing:.02em;color:var(--ink);}
.brand-text span{display:block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);margin-top:2px;}

.main-nav{display:flex;align-items:center;gap:34px;}
.main-nav a{
  font-size:.9rem;letter-spacing:.02em;color:var(--ink);
  position:relative;padding:6px 0;
}
.main-nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--gold);transition:width .25s ease;
}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after{width:100%;}
.main-nav a[aria-current="page"]{color:var(--gold-text);}

.header-cta{display:flex;align-items:center;gap:18px;}
.phone-pill{
  font-family:var(--font-mono);
  color:var(--ink);
  border:1px solid var(--paper-line);
  padding:9px 16px;border-radius:var(--radius);
  font-size:.88rem;letter-spacing:.02em;
  display:flex;align-items:center;gap:8px;
  transition:border-color .2s ease, color .2s ease;
}
.phone-pill:hover{border-color:var(--gold);color:var(--gold-text);}
.nav-toggle{display:none;background:none;border:0;color:var(--ink);}

@media (max-width: 880px){
  .main-nav{
    position:absolute;top:86px;left:0;right:0;background:#fffefb;
    flex-direction:column;align-items:flex-start;gap:0;
    border-bottom:1px solid var(--paper-line);
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .main-nav.open{max-height:340px;}
  .main-nav a{width:100%;padding:16px 28px;border-top:1px solid var(--paper-line);}
  .nav-toggle{display:block;}
  .header-cta .phone-pill span.label{display:none;}
}

/* -------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;
  padding:14px 24px;border-radius:var(--radius);border:1px solid transparent;
  cursor:pointer;transition:transform .18s ease, box-shadow .18s ease, background .2s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--oxblood);color:var(--ink);font-weight:600;}
.btn-primary:hover{background:var(--oxblood-2);box-shadow:0 6px 18px rgba(184,145,47,.4);}
.btn-outline{border-color:var(--gold-dim);color:var(--ink);}
.btn-outline.on-dark{color:var(--parch-text);border-color:var(--gold-dim);}
.btn-outline:hover{border-color:var(--gold);}
.btn-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:28px;}

/* -------------------------------------------------- hero */
.hero{
  background:var(--ink);
  color:var(--parch-text);
  position:relative;
  overflow:hidden;
}
.hero .container{
  padding-top:88px;padding-bottom:72px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;
}
.hero h1{color:var(--parchment);font-size:clamp(2.4rem, 4vw, 3.6rem);}
.hero .lede{font-size:1.12rem;color:var(--muted);max-width:46ch;}
.medallion-wrap{display:flex;justify-content:center;}
.medallion{width:min(320px, 100%);}
.medallion .ring{animation:spin 42s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){.medallion .ring{animation:none;}}
@media (max-width: 880px){
  .hero .container{grid-template-columns:1fr;text-align:left;padding-top:56px;}
  .medallion-wrap{order:-1;max-width:220px;margin:0 auto 8px;}
}

/* -------------------------------------------------- ticker / spot rail */
.rail{
  background:var(--ink-2);
  border-top:1px solid rgba(184,145,47,.18);
  border-bottom:1px solid rgba(184,145,47,.18);
}
.rail .container{
  padding:22px 28px;
  display:grid;grid-template-columns:1fr 1fr;gap:22px;
}
.rail-card{background:var(--ink-3);border:1px solid rgba(184,145,47,.15);border-radius:var(--radius);overflow:hidden;}
.rail-card iframe{width:100%;height:170px;border:0;display:block;}
.rail-label{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);padding:10px 14px 0;
}
.rail-note{
  text-align:center;color:var(--muted);font-size:.82rem;margin-top:14px;font-family:var(--font-mono);
}
@media (max-width:700px){.rail .container{grid-template-columns:1fr;}}

/* -------------------------------------------------- sections generic */
section{padding:88px 0;}
.section-head{max-width:640px;margin-bottom:52px;}
.section-head p{color:var(--muted);font-size:1.05rem;}
.on-ink{background:var(--ink);color:var(--parch-text);}
.on-ink h2{color:var(--parchment);}
.on-ink .section-head p{color:#8fa0bd;}
.on-parch-2{background:var(--parchment-2);}

/* -------------------------------------------------- what we buy grid */
.buy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--paper-line);border:1px solid var(--paper-line);}
.buy-card{background:var(--parchment);padding:34px 28px;}
.buy-card .icon{width:38px;height:38px;color:var(--oxblood);margin-bottom:18px;}
.buy-card h3{font-size:1.15rem;margin-bottom:10px;}
.buy-card ul{margin:0;padding-left:0;list-style:none;color:#3c4a63;font-size:.92rem;}
.buy-card li{padding:5px 0;border-top:1px solid var(--paper-line);}
.buy-card li:first-child{border-top:0;}
@media (max-width:980px){.buy-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.buy-grid{grid-template-columns:1fr;}}

/* -------------------------------------------------- process steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;}
.step .num{
  font-family:var(--font-mono);color:var(--gold-bright);font-size:.85rem;
  border:1px solid var(--gold-dim);border-radius:50%;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.step h3{color:var(--parchment);font-size:1.2rem;}
.step p{color:#8fa0bd;}
@media (max-width:820px){.steps{grid-template-columns:1fr;gap:34px;}}

/* -------------------------------------------------- stats band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:center;}
.stat .num{font-family:var(--font-display);font-size:2.4rem;color:var(--ink);}
.stat .label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
@media (max-width:820px){.stats{grid-template-columns:repeat(2,1fr);}}

/* -------------------------------------------------- two-col content */
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start;}
@media (max-width:880px){.two-col{grid-template-columns:1fr;}}
.info-card{
  background:var(--parchment-2);border:1px solid var(--paper-line);padding:30px 30px;border-radius:var(--radius);
}
.info-card dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0;font-size:.95rem;}
.info-card dt{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);align-self:start;padding-top:3px;}
.info-card dd{margin:0;}
.hours-table{width:100%;border-collapse:collapse;font-size:.94rem;margin-top:8px;}
.hours-table td{padding:6px 0;border-top:1px solid var(--paper-line);}
.hours-table td:last-child{text-align:right;font-family:var(--font-mono);}

/* -------------------------------------------------- accordion (FAQ) */
.accordion{border-top:1px solid var(--paper-line);}
.acc-item{border-bottom:1px solid var(--paper-line);}
.acc-item summary{
  cursor:pointer;list-style:none;padding:22px 4px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--font-display);font-size:1.15rem;color:var(--ink);
}
.acc-item summary::-webkit-details-marker{display:none;}
.acc-item summary .plus{font-family:var(--font-mono);color:var(--gold);font-size:1.2rem;transition:transform .2s ease;}
.acc-item[open] summary .plus{transform:rotate(45deg);}
.acc-body{padding:0 4px 26px;color:#3c4a63;}
.acc-body ul{margin:0;padding-left:0;list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:6px 24px;}
.acc-body li{font-size:.94rem;padding:4px 0;}
.acc-body li::before{content:"—";color:var(--gold);margin-right:8px;}
@media (max-width:600px){.acc-body ul{grid-template-columns:1fr;}}

/* -------------------------------------------------- cta band */
.cta-band{
  background:var(--ink);color:var(--parch-text);text-align:center;
}
.cta-band h2{color:var(--parchment);}
.cta-band .btn-outline{border-color:rgba(242,236,220,.4);color:var(--parchment);}
.cta-band .btn-outline:hover{border-color:var(--parchment);}

/* -------------------------------------------------- contact cards */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--paper-line);border:1px solid var(--paper-line);}
.contact-card{background:var(--parchment);padding:30px 26px;}
.contact-card .eyebrow{margin-bottom:10px;}
.contact-card a{color:var(--gold-text);font-weight:600;}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr;}}
.map-frame{border:1px solid var(--paper-line);border-radius:var(--radius);overflow:hidden;margin-top:40px;}
.map-frame iframe{width:100%;height:360px;border:0;display:block;}

/* -------------------------------------------------- footer */
footer.site-footer{background:var(--ink);color:#8fa0bd;padding:56px 0 30px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;}
.footer-logo-chip{
  display:inline-block;background:#fffefb;padding:12px 18px;border-radius:var(--radius);margin-bottom:16px;
}
.footer-logo-chip img{height:34px;width:auto;display:block;}
.footer-grid h4{color:var(--parchment);font-size:1rem;margin-bottom:14px;}
.footer-grid a{display:block;padding:5px 0;font-size:.92rem;}
.footer-grid a:hover{color:var(--gold-bright);}
.footer-bottom{
  margin-top:44px;padding-top:22px;border-top:1px solid rgba(184,145,47,.18);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:.8rem;font-family:var(--font-mono);color:#5b6d8c;
}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr;}}

/* -------------------------------------------------- live price board */
.price-board{
  background:var(--ink-2);border:1px solid rgba(184,145,47,.2);border-radius:var(--radius);
  overflow:hidden;
}
.price-board .pb-head{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding:18px 22px;border-bottom:1px solid rgba(184,145,47,.18);
}
.price-board .pb-status{font-family:var(--font-mono);font-size:.74rem;color:var(--muted);display:flex;align-items:center;gap:8px;}
.price-board .pb-dot{width:7px;height:7px;border-radius:50%;background:var(--gold-bright);display:inline-block;flex-shrink:0;}
.price-board .pb-dot.stale{background:#5b6d8c;}
.pb-table{width:100%;border-collapse:collapse;}
.pb-table th{
  text-align:left;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:14px 22px 8px;font-weight:400;
}
.pb-table th:not(:first-child){text-align:right;}
.pb-table td{padding:10px 22px;border-top:1px solid rgba(184,145,47,.1);font-family:var(--font-mono);color:var(--parch-text);text-align:right;}
.pb-table td:first-child{text-align:left;}
.pb-table td.metal{font-family:var(--font-body);font-weight:600;color:var(--parchment);}
.pb-table td.hi{color:var(--gold-bright);font-size:1.02rem;}
.pb-table .pb-group-row td{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);background:rgba(184,145,47,.08);padding:9px 22px;border-top:1px solid rgba(184,145,47,.18);
}
.pb-item-note{font-family:var(--font-body);font-weight:400;font-size:.78rem;color:var(--muted);margin-top:3px;line-height:1.4;}
.pb-cell-input{
  width:100px;max-width:100%;background:var(--ink);border:1px solid var(--gold-dim);border-radius:var(--radius);
  color:var(--parchment);padding:6px 8px;font-family:var(--font-mono);font-size:.9rem;text-align:right;
}
.pb-table.editing .pb-val{display:none;}
.pb-table.editing .pb-cell-input{display:inline-block !important;}
.pb-note{padding:14px 22px 20px;font-size:.8rem;color:var(--muted);font-family:var(--font-mono);}
.pb-edit-toggle{
  background:none;border:1px solid var(--gold-dim);color:var(--parch-text);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  padding:8px 14px;border-radius:var(--radius);cursor:pointer;
}
.pb-edit-toggle:hover{border-color:var(--gold-bright);color:var(--gold-bright);}
.pb-editor{
  padding:0 22px;border-top:0;background:var(--ink-3);
  max-height:0;overflow:hidden;transition:max-height .2s ease;
}
.pb-editor.open{max-height:120px;padding:16px 22px;border-top:1px solid rgba(184,145,47,.18);}
.pb-editor p.pb-help{margin:0 0 14px;font-size:.82rem;color:var(--muted);}
.pb-editor .pb-save{
  background:var(--gold);color:var(--ink);border:0;padding:11px 20px;border-radius:var(--radius);
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
}
.pb-editor .pb-save:hover{background:var(--gold-bright);}
.pb-editor .pb-saved-msg{font-family:var(--font-mono);font-size:.76rem;color:var(--gold-bright);margin-left:12px;}
@media (max-width:640px){
  .pb-table{display:block;overflow-x:auto;}
  .pb-cell-input{width:78px;}
}

/* -------------------------------------------------- page hero (sub pages) */
.page-hero{background:var(--ink);color:var(--parch-text);padding:64px 0 54px;}
.page-hero h1{color:var(--parchment);font-size:clamp(2rem,3.4vw,2.8rem);}
.page-hero p{color:var(--muted);max-width:58ch;}

.prose h2{margin-top:1.6em;}
.prose ul{padding-left:1.2em;}
.prose li{margin-bottom:.4em;}

/* -------------------------------------------------- blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--paper-line);border:1px solid var(--paper-line);}
.blog-card{background:var(--parchment);padding:32px 28px;display:flex;flex-direction:column;}
.blog-card .blog-date{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-text);margin-bottom:12px;
}
.blog-card h2{font-size:1.25rem;margin-bottom:10px;}
.blog-card p{color:#3c4a63;font-size:.94rem;flex-grow:1;}
.blog-card .blog-read{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink);border-bottom:1px solid var(--gold-dim);padding-bottom:2px;margin-top:18px;display:inline-block;width:fit-content;
}
.blog-card .blog-read:hover{border-color:var(--gold);color:var(--gold-text);}
@media (max-width:980px){.blog-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.blog-grid{grid-template-columns:1fr;}}

.post-meta{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-bottom:4px;}
.post-back{
  display:inline-block;margin-bottom:28px;font-family:var(--font-mono);font-size:.82rem;
  color:var(--gold-text);border-bottom:1px solid var(--gold-dim);
}
.post-back:hover{border-color:var(--gold);}