:root {
  --accent: #1F5450;
  --ink: #1B1613;
  --paper: #F4EFE4;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Instrument Sans', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ink); }

@keyframes barpulse { 0% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0.35); } }

header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(244,239,228,0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #DCD2BF;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 44px; height: 66px;
}
.brand { display: flex; align-items: baseline; gap: 12px; }
.brand .logo { font-family: Newsreader, Georgia, serif; font-size: 24px; font-weight: 500; letter-spacing: -0.01em; }
.brand .by { font-size: 11px; color: #7A6A58; letter-spacing: 0.14em; text-transform: uppercase; }
.brand .by:hover { color: var(--ink); }

nav { display: flex; align-items: center; gap: 30px; font-size: 14px; color: #4A3F35; }
nav a.nav-link { color: #4A3F35; }
nav a.nav-link.active { color: var(--ink); font-weight: 500; }
nav a.nav-cta {
  background: var(--ink); color: var(--paper); font-size: 13px;
  padding: 10px 18px; border-radius: 2px;
}
nav a.nav-cta:hover { background: var(--accent); color: #F6F2E9; }

section { border-bottom: 1px solid #DCD2BF; }

.hero { padding: 104px 44px 80px; max-width: 1440px; }
.hero .kicker { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #7A6A58; margin-bottom: 44px; }
.hero h1 {
  margin: 0; font-family: Newsreader, Georgia, serif;
  font-size: clamp(46px,6.6vw,112px); line-height: 0.96; font-weight: 400;
  letter-spacing: -0.025em; max-width: 17ch; text-wrap: balance;
}
.hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,400px); gap: 72px; margin-top: 60px; align-items: end; }
.hero-grid p { margin: 0; font-family: Newsreader, Georgia, serif; font-size: 23px; line-height: 1.5; max-width: 50ch; color: #33291F; text-wrap: pretty; }
.hero-ctas { display: flex; flex-direction: column; gap: 18px; }
.hero-ctas .btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-primary {
  flex: none; white-space: nowrap; background: var(--accent); color: #F6F2E9;
  font-size: 15px; padding: 15px 26px; border-radius: 2px; display: inline-block;
}
.btn-primary:hover { background: var(--ink); color: #F6F2E9; }
.btn-secondary {
  flex: none; white-space: nowrap; border: 1px solid var(--ink); color: var(--ink);
  font-size: 15px; padding: 15px 26px; border-radius: 2px; display: inline-block;
}
.btn-secondary:hover { background: var(--ink); color: var(--paper); }
.hero-note { font-size: 11px; color: #7A6A58; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.7; }

.page-hero { padding: 72px 44px 56px; max-width: 1440px; }
.page-hero .kicker { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #7A6A58; margin-bottom: 28px; }
.page-hero h1 {
  margin: 0 0 20px; font-family: Newsreader, Georgia, serif;
  font-size: clamp(38px,5vw,64px); line-height: 1.02; font-weight: 400;
  letter-spacing: -0.02em; max-width: 22ch; text-wrap: balance;
}
.page-hero p { margin: 0; font-family: Newsreader, Georgia, serif; font-size: 20px; line-height: 1.55; max-width: 62ch; color: #33291F; text-wrap: pretty; }
.page-hero .back-link { display: inline-block; font-size: 13px; margin-bottom: 24px; }

.section-inner { padding: 80px 44px 88px; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 32px;
  margin-bottom: 44px; flex-wrap: wrap;
}
h2 { margin: 0; font-family: Newsreader, Georgia, serif; font-size: 44px; font-weight: 400; letter-spacing: -0.02em; }
.section-tag { font-size: 11px; color: #7A6A58; letter-spacing: 0.14em; text-transform: uppercase; }

.voices-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(320px,1fr)); gap: 24px; }
.voice-card {
  background: #FBF8F1; border: 1px solid #DCD2BF; border-radius: 3px;
  padding: 26px 26px 20px; display: flex; flex-direction: column; gap: 20px; min-height: 190px;
}
.voice-card:hover { border-color: var(--accent); }
.voice-top { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.voice-name { font-family: Newsreader, Georgia, serif; font-size: 26px; font-weight: 400; letter-spacing: -0.015em; }
.voice-meta { font-size: 11px; color: #7A6A58; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 6px; }
.voice-play {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ink);
  background: transparent; color: var(--ink); cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.voice-play:hover { background: var(--ink); color: #F6F2E9; }
.voice-play.playing { background: var(--accent); color: #F6F2E9; border-color: var(--ink); }
.voice-wave { margin-top: auto; display: flex; align-items: flex-end; gap: 2px; height: 40px; }
.voice-wave span { flex: 1 1 0; background: #DCD2BF; transform-origin: bottom; transition: background 120ms linear; }
.voice-wave span.on { background: var(--accent); animation: barpulse 900ms ease-in-out infinite; }
.voice-sample {
  font-family: Newsreader, Georgia, serif; font-style: italic; font-size: 15px; color: #6B5C4B;
  display: flex; justify-content: space-between; gap: 12px;
}
.voice-sample .time { font-style: normal; font-family: 'Instrument Sans', sans-serif; font-size: 12px; letter-spacing: 0.06em; }
.voices-note { font-size: 13px; color: #7A6A58; margin: 20px 0 0; }

.process-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(270px,1fr)); gap: 56px; }
.process-item { border-top: 1px solid var(--ink); padding-top: 22px; }
.process-step { font-family: Newsreader, Georgia, serif; font-size: 15px; font-style: italic; color: #7A6A58; margin-bottom: 14px; }
.process-item h3 { margin: 0 0 12px; font-family: Newsreader, Georgia, serif; font-size: 27px; font-weight: 400; letter-spacing: -0.015em; }
.process-item p { margin: 0; font-size: 15px; line-height: 1.65; color: #3E3327; }

.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(290px,1fr)); gap: 48px; }
.benefits-grid h3 { margin: 0 0 14px; font-family: Newsreader, Georgia, serif; font-size: 30px; font-weight: 400; letter-spacing: -0.02em; }
.benefits-grid p { margin: 0; font-size: 16px; line-height: 1.65; color: #3E3327; text-wrap: pretty; }

.partners-tag { font-size: 11px; color: #7A6A58; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 34px; }
.partners-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 28px 36px; }
.partner { display: flex; flex-direction: column; gap: 5px; border-top: 1px solid #DCD2BF; padding-top: 14px; }
.partner .name { font-family: Newsreader, Georgia, serif; font-size: 22px; font-weight: 400; letter-spacing: -0.01em; }
.partner .place { font-size: 11px; color: #7A6A58; letter-spacing: 0.12em; text-transform: uppercase; }

.about-grid { display: grid; grid-template-columns: minmax(0,340px) minmax(0,1fr); gap: 72px; }
.about-body { max-width: 58ch; }
.about-body p.lede { margin: 0 0 22px; font-family: Newsreader, Georgia, serif; font-size: 22px; line-height: 1.5; color: #33291F; text-wrap: pretty; }
.about-body a { border-bottom: 1px solid rgba(31,84,80,0.4); }
.about-body a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.about-body p.sub { margin: 0; font-size: 16px; line-height: 1.7; color: #6B5C4B; text-wrap: pretty; }

#contact { background: var(--ink); color: var(--paper); padding: 104px 44px 92px; border-bottom: none; }
.contact-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,380px); gap: 72px; align-items: end; }
.contact-grid h2 { color: var(--paper); font-size: clamp(34px,4.6vw,64px); line-height: 1.04; letter-spacing: -0.025em; max-width: 22ch; margin: 0 0 22px; }
.contact-grid > div:first-child p { margin: 0; font-size: 17px; line-height: 1.6; color: #B0A392; max-width: 46ch; }
.contact-cta { display: flex; flex-direction: column; gap: 14px; }
.contact-email {
  background: var(--paper); color: var(--ink); font-family: Newsreader, Georgia, serif;
  font-size: 22px; padding: 18px 24px; text-align: center; border-radius: 2px; display: block;
}
.contact-email:hover { background: var(--accent); color: #F6F2E9; }

footer {
  background: var(--ink); color: #8C8172; border-top: 1px solid #2E2721; padding: 30px 44px;
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
}
footer a { color: #8C8172; border-bottom: 1px solid #3A322B; }
footer a:hover { color: var(--paper); border-bottom-color: var(--paper); }

/* Voice library page */
.library-group-head { margin: 0 0 28px; }
.library-group-head:not(:first-child) { margin-top: 56px; padding-top: 40px; border-top: 1px solid #DCD2BF; }
.library-group-head h3 { margin: 0 0 6px; font-family: Newsreader, Georgia, serif; font-size: 26px; font-weight: 400; letter-spacing: -0.015em; }
.library-group-head p { margin: 0; font-size: 13px; color: #7A6A58; }
.library-speaker {
  border-top: 1px solid #DCD2BF; padding: 40px 0;
}
.library-speaker:first-child { border-top: none; padding-top: 0; }
.library-speaker-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.library-speaker-head .voice-name { font-size: 32px; }
.library-samples { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 14px 28px; }
.library-sample { display: flex; flex-direction: column; gap: 8px; }
.library-sample .caption { font-family: Newsreader, Georgia, serif; font-style: italic; font-size: 14.5px; color: #4A3F35; line-height: 1.4; }
.library-sample audio { width: 100%; height: 34px; }
.library-sample audio::-webkit-media-controls-panel { background: #FBF8F1; }

@media (max-width: 760px) {
  header { padding: 0 20px; }
  .hero, .page-hero, .section-inner, #contact, footer { padding-left: 20px; padding-right: 20px; }
  .hero-grid, .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  nav { gap: 16px; }
}