/* ==========================================================================
   Audivox Field Notes - shared shell
   Brand tokens sampled from the Audivox logo. Typography: Raleway + Open Sans.
   Used by /field-notes and every piece beneath it.
   ========================================================================== */

:root{
  /* brand */
  --slate:#2f3a43;
  --slate-3:#252e35;
  --ink:#242424;
  --body:#374151;
  --muted:#6d6d6d;
  --muted-2:#8b9299;
  --line:#e5e7eb;
  --tint:#e8f2fe;
  --off:#f7f9fb;

  --blue:#178ff7;
  --blue-2:#3c93f7;
  --blue-deep:#0d6fc4;
  --green:#07ff9e;
  --green-deep:#00875a;
  --green-tint:#e6fff5;
  --purple:#a867f4;
  --purple-deep:#7c3fd1;
  --purple-tint:#f4ecfe;
  --yellow:#fbed53;
  --coral:#fb767d;
  --coral-deep:#d63d47;
  --coral-tint:#feeeef;

  --head:'Raleway',system-ui,sans-serif;
  --sans:'Open Sans',system-ui,-apple-system,sans-serif;
  --maxw:1180px;
  --gut:clamp(20px,4vw,48px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#fff;color:var(--body);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--head);color:var(--ink);font-weight:600;letter-spacing:-.01em}

/* ---------- brand stripe (icon motif) ---------- */
.stripe{display:flex;gap:8px;justify-content:center;margin:0 auto}
.stripe i{display:block;width:34px;height:9px;border-radius:99px;transform:skewX(-32deg)}
.stripe i:nth-child(1){background:var(--blue)}
.stripe i:nth-child(2){background:var(--green)}
.stripe i:nth-child(3){background:var(--purple)}
.stripe i:nth-child(4){background:var(--yellow)}
.stripe i:nth-child(5){background:var(--coral)}
.stripe.sm i{width:22px;height:6px}

/* ---------- dark band (hero + closer share this) ---------- */
.band{background:var(--slate);color:#fff;position:relative;overflow:hidden}
.band::before{content:'';position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(760px 420px at 12% -12%, rgba(23,143,247,.22), transparent 62%),
  radial-gradient(660px 400px at 92% 8%, rgba(168,103,244,.17), transparent 64%)}
.band > *{position:relative}

/* ---------- nav ---------- */
.nav{padding:22px var(--gut) 0}
.nav-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.nav-logo img{height:30px;width:auto}
.nav-links{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:9999px;padding:4px}
.nav-links a{padding:8px 18px;border-radius:9999px;font-size:14px;font-weight:600;color:#c3cdd5;text-decoration:none;transition:background .15s,color .15s}
.nav-links a:hover{color:#fff}
.nav-links a.active{background:rgba(255,255,255,.13);color:#fff}
.nav-cta{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;text-decoration:none;font-size:14px;font-weight:600;padding:10px 22px;border-radius:9999px;transition:background .15s,transform .15s}
.nav-cta:hover{background:var(--blue-2);transform:translateY(-1px)}
@media(max-width:720px){.nav-inner{justify-content:center}.nav-links a{padding:8px 13px;font-size:13px}}

/* ---------- breadcrumb ---------- */
.crumb{max-width:var(--maxw);margin:26px auto 0;padding:0 var(--gut);font-size:12.5px;font-weight:600;letter-spacing:.06em;color:#8b9ca9}
.crumb a{color:#8b9ca9;text-decoration:none}
.crumb a:hover{color:#fff}
.crumb span{color:#c3cdd5}

/* ---------- hero ---------- */
.hero{padding:8px var(--gut) 60px}
.hero-inner{max-width:900px;margin:0 auto;text-align:center}
.kicker{font-size:11.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:#9fb2c1;margin:44px 0 20px}
.hero h1{font-size:clamp(38px,6.6vw,68px);line-height:1.06;color:#fff;margin:0 auto 20px;text-wrap:balance;max-width:16ch}
.hero .deck{font-size:clamp(16.5px,2.2vw,20px);color:#c3cdd5;max-width:680px;margin:0 auto 28px;line-height:1.6}
.dateline{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#8b9ca9;margin:26px 0 0}

/* ---------- index: piece cards ---------- */
.collection{max-width:940px;margin:0 auto;padding:64px var(--gut) 20px}
.note-card{display:block;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px 36px;box-shadow:0 2px 4px rgba(36,36,36,.03),0 10px 28px rgba(36,36,36,.05);transition:box-shadow .2s,transform .2s;margin-bottom:24px}
.note-card:hover{box-shadow:0 3px 6px rgba(36,36,36,.05),0 18px 44px rgba(36,36,36,.1);transform:translateY(-3px)}
.note-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:5px 12px;border-radius:9999px;background:var(--tint);color:var(--blue-deep);margin-bottom:16px}
.note-card h2{font-size:clamp(24px,3.4vw,34px);line-height:1.18;margin-bottom:12px}
.note-card:hover h2{color:var(--blue-deep)}
.note-card p{font-size:16.5px;color:var(--body);line-height:1.62;margin-bottom:18px}
.note-meta{font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.note-meta b{color:var(--green-deep);font-weight:700}
.more{max-width:940px;margin:0 auto;padding:12px var(--gut) 0;text-align:center;font-size:15px;color:var(--muted)}

/* ---------- prose ---------- */
.prose{max-width:700px;margin:0 auto;padding:64px var(--gut) 8px;font-size:17.5px;line-height:1.72}
.prose p{margin-bottom:20px}
.prose .thesis{border-left:3px solid var(--blue);background:var(--tint);padding:18px 22px;border-radius:0 12px 12px 0;font-size:16.5px}

/* ---------- closer + cta ---------- */
.closer{padding:76px var(--gut) 84px}
.closer-inner{max-width:720px;margin:0 auto}
.closer h2{font-size:clamp(28px,4.6vw,44px);line-height:1.16;color:#fff;text-align:center;margin:26px 0 34px}
.closer h2 em{color:var(--green);font-style:normal}
.closer p{font-size:17px;line-height:1.75;color:#c3cdd5;margin-bottom:20px}
.closer p strong{color:#fff;font-weight:600}
.closer .king{font-family:var(--head);font-size:clamp(19px,2.9vw,24px);font-weight:500;font-style:italic;color:#fff;text-align:center;margin:38px auto 0;max-width:560px;line-height:1.5}
.cta-wrap{text-align:center;margin:40px auto 0}
.cta{display:inline-block;font-size:16px;font-weight:600;padding:16px 40px;background:var(--blue);color:#fff;text-decoration:none;border-radius:9999px;box-shadow:0 8px 26px rgba(23,143,247,.34);transition:background .18s,transform .18s,box-shadow .18s}
.cta:hover{background:var(--blue-2);transform:translateY(-2px);box-shadow:0 12px 32px rgba(23,143,247,.42)}

/* ---------- footer ---------- */
.foot{background:var(--tint);padding:56px var(--gut) 34px;border-top:1px solid #cfe3fb}
.foot-inner{max-width:var(--maxw);margin:0 auto}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px;margin-bottom:36px}
@media(max-width:720px){.foot-grid{grid-template-columns:1fr;gap:28px}}
.foot-logo img{height:30px;width:auto;margin-bottom:14px}
.foot .tagline{font-size:14.5px;color:var(--body);max-width:40ch;line-height:1.55}
.foot h5{font-family:var(--head);font-weight:700;font-size:15px;margin-bottom:14px;color:var(--ink)}
.foot ul{list-style:none}
.foot ul li{margin-bottom:9px}
.foot ul a{font-size:14.5px;color:var(--body);text-decoration:none}
.foot ul a:hover{color:var(--blue-deep)}
.foot .compliance{font-size:12px;color:var(--muted);line-height:1.7;border-top:1px solid #cfe3fb;padding-top:20px;margin-bottom:14px}
.foot .foot-rule{font-size:12.5px;color:var(--muted);text-align:center}
.foot .verified{font-size:12px;color:var(--muted);line-height:1.75;text-align:center;margin-bottom:18px}