/* ============================================================
   AUDIOLTRA — Base design tokens
   Palette: warm ink + amber dial + muted teal (cassette/radio mood)
   Type: Fraunces (display serif) + Work Sans (UI/body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600;700&display=swap');

:root{
  --ink-900:#15191d;
  --ink-800:#1d2227;
  --ink-700:#262c33;
  --ink-600:#333b43;
  --line:#3a424a;

  --paper:#f4efe4;
  --paper-dim:#c9c2b2;

  --amber:#e2a13c;
  --amber-dim:#a9793080;
  --teal:#4fa79c;
  --teal-dim:#3a7d75;
  --red:#c8624f;

  --text-hi:#f4efe4;
  --text-mid:#c7c0b3;
  --text-low:#8b8d8a;

  --radius-s:6px;
  --radius-m:10px;
  --shadow-1:0 2px 10px rgba(0,0,0,.35);

  --font-display:'Fraunces', serif;
  --font-body:'Work Sans', sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--ink-900);
  color:var(--text-hi);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.15;
  margin:0 0 .5em;
  color:var(--text-hi);
}
p{color:var(--text-mid);}
a{color:var(--amber);text-decoration:none;}
a:hover{text-decoration:underline;}
button{font-family:var(--font-body);cursor:pointer;}
img{max-width:100%;display:block;}

:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:2px;
}

.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 20px;
}

/* ---------- Site header (marketing pages) ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(21,25,29,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:700; font-size:1.25rem;
  color:var(--text-hi);
}
.brand:hover{text-decoration:none;}
.brand .dot{color:var(--amber);}
.brand svg{width:28px;height:28px;}

.site-nav{display:flex; gap:26px; align-items:center;}
.site-nav a{color:var(--text-mid); font-size:.95rem;}
.site-nav a:hover{color:var(--amber);}
.site-nav a.active{color:var(--amber);}
.nav-cta{
  background:var(--amber); color:var(--ink-900) !important;
  padding:9px 18px; border-radius:var(--radius-s); font-weight:600;
}
.nav-cta:hover{text-decoration:none; filter:brightness(1.08);}

.nav-toggle{
  display:none; background:none; border:1px solid var(--line);
  border-radius:var(--radius-s); color:var(--text-hi); width:40px; height:40px;
}

@media (max-width:820px){
  .nav-toggle{display:block;}
  .site-nav{
    position:absolute; top:64px; left:0; right:0;
    background:var(--ink-800); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start; padding:16px 20px; gap:16px;
    display:none;
  }
  .site-nav.open{display:flex;}
  .nav-cta{width:100%; text-align:center;}
}

/* ---------- Marketing page content ---------- */
.page-hero{
  padding:64px 0 40px; border-bottom:1px solid var(--line);
}
.page-hero .eyebrow{color:var(--teal); font-weight:600; font-size:.85rem;}
.page-hero h1{font-size:clamp(2rem,4vw,2.8rem); max-width:14ch;}
.page-hero p.lead{max-width:60ch; font-size:1.05rem;}

.prose{max-width:700px; margin:0 auto; padding:48px 0 80px;}
.prose h2{margin-top:1.6em; font-size:1.5rem;}
.prose h3{margin-top:1.3em; font-size:1.15rem; color:var(--amber);}
.prose p, .prose li{color:var(--text-mid); font-size:1.02rem;}
.prose ul,.prose ol{padding-left:1.3em;}
.prose a{border-bottom:1px solid var(--amber-dim);}
.prose blockquote{
  border-left:3px solid var(--amber); margin:1.4em 0; padding:.2em 1.2em;
  color:var(--text-hi); font-family:var(--font-display); font-size:1.15rem;
}
.meta-line{color:var(--text-low); font-size:.85rem; margin-bottom:1.6em;}

.card-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px; margin:28px 0;
}
.info-card{
  background:var(--ink-800); border:1px solid var(--line);
  border-radius:var(--radius-m); padding:22px;
}
.info-card h3{margin-top:0; font-size:1.05rem; color:var(--text-hi);}
.info-card p{margin-bottom:0; font-size:.95rem;}

/* ---------- Blog list ---------- */
.blog-list{display:flex; flex-direction:column; gap:0; margin:32px 0 80px;}
.blog-item{
  display:grid; grid-template-columns:120px 1fr; gap:22px;
  padding:26px 0; border-bottom:1px solid var(--line);
}
.blog-item .b-date{color:var(--text-low); font-size:.85rem; padding-top:4px;}
.blog-item h2{font-size:1.3rem; margin-bottom:.3em;}
.blog-item p{margin:0 0 .6em; font-size:.95rem;}
.blog-item a.read-more{font-size:.88rem; font-weight:600;}
@media (max-width:560px){
  .blog-item{grid-template-columns:1fr;}
}

/* ---------- Contact ---------- */
.contact-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px; margin:36px 0;
}
.contact-card{
  background:var(--ink-800); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:24px; text-align:center;
}
.contact-card svg{width:30px;height:30px; margin:0 auto 12px; color:var(--amber);}
.contact-card h3{margin:0 0 4px; font-size:1rem;}
.contact-card a{color:var(--text-mid);}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--line); padding:44px 0 30px; margin-top:40px;
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px;
}
.footer-grid h4{font-size:.85rem; color:var(--text-low); letter-spacing:.02em; margin-bottom:14px;}
.footer-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.footer-grid a{color:var(--text-mid); font-size:.92rem;}
.footer-grid a:hover{color:var(--amber);}
.footer-bottom{
  margin-top:34px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  color:var(--text-low); font-size:.85rem;
}
@media (max-width:760px){
  .footer-grid{grid-template-columns:1fr 1fr;}
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--radius-s); border:1px solid var(--line);
  background:var(--ink-700); color:var(--text-hi); padding:10px 18px;
  font-size:.95rem; font-weight:500;
}
.btn:hover{border-color:var(--amber); text-decoration:none;}
.btn-primary{background:var(--amber); border-color:var(--amber); color:var(--ink-900); font-weight:600;}
.btn-primary:hover{filter:brightness(1.08);}