/* ==========================================================================
   Americas Book Service — Audio Book page
   Loads after abs-design-system.css + home.css (shared nav, footer, CTA
   form, FAQ, modal, reveal). Everything here is prefixed .au- and belongs
   to this page only. Palette adds two warm darks to the brand set:
   espresso and walnut, used for the studio moments.
   ========================================================================== */
.page-audio { --espresso: #1d1712; --walnut: #2c2119; --amber: #d9a664; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.au-h2 {
  margin: 0; font-family: var(--font-display); font-weight: 340; letter-spacing: -0.032em; line-height: 1.02;
  font-size: clamp(2.3rem, 1.4rem + 2.6vw, 3.9rem); color: var(--ink);
}
.au-h2 em { font-style: italic; font-weight: 300; color: #5a4d3b; }
.on-dark .au-h2, .au-studio .au-h2 { color: var(--ivory); }
.on-dark .au-h2 em { color: var(--bronze-2); }

/* ==========================================================================
   1. HERO — full-bleed studio still, copy in the shadow, a take in progress
   ========================================================================== */
.au-hero {
  position: relative; isolation: isolate; overflow: hidden; min-height: min(100svh, 920px);
  display: flex; align-items: flex-end; padding: 120px 0 clamp(40px, 5vw, 64px);
  background: var(--espresso); color: var(--on-dark-1);
}
.au-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.au-hero__img {
  position: absolute; inset: -6% -20px; filter: blur(2px) saturate(0.88) contrast(1.02);
  background: var(--walnut) url("../images/photos/1627667050069-43757d48d6eb-2200.webp") 70% 40% / cover no-repeat;
  animation: auDrift 40s ease-in-out infinite alternate;
}
.au-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 15, 11, 0.94) 0%, rgba(20, 15, 11, 0.78) 34%, rgba(20, 15, 11, 0.25) 64%, rgba(20, 15, 11, 0.1) 100%),
    linear-gradient(180deg, rgba(20, 15, 11, 0.55) 0%, transparent 26%, transparent 60%, rgba(20, 15, 11, 0.92) 100%);
}
.au-hero__light {
  position: absolute; right: 8%; top: 12%; width: 46vw; height: 46vw; max-width: 720px; max-height: 720px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 176, 104, 0.16), transparent 62%); z-index: 1;
  animation: auGlow 14s ease-in-out infinite alternate;
}
@keyframes auDrift { from { transform: scale(1.03); } to { transform: scale(1.07) translateX(-0.8%); } }
@keyframes auGlow { from { opacity: 0.6; transform: translate(0, 0); } to { opacity: 1; transform: translate(-2%, 2%); } }

.au-hero__inner { position: relative; width: 100%; display: grid; gap: clamp(40px, 6vw, 80px); }
.au-crumbs { position: absolute; top: -40px; left: var(--gutter); }
.au-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 0.76rem; letter-spacing: 0.04em; }
.au-crumbs li { display: inline-flex; align-items: center; gap: 6px; color: rgba(250, 247, 241, 0.55); }
.au-crumbs li + li::before { content: ""; width: 14px; height: 1px; background: rgba(250, 247, 241, 0.3); }
.au-crumbs a { color: rgba(250, 247, 241, 0.7); text-decoration: none; }
.au-crumbs a:hover { color: var(--ivory); }
.au-crumbs [aria-current] { color: var(--bronze-2); }

.au-hero__copy { display: grid; gap: 22px; max-width: 640px; }
.au-hero .eyebrow { color: var(--bronze-2); }
.au-hero__title {
  margin: 0; font-family: var(--font-display); font-weight: 320; letter-spacing: -0.04em; line-height: 0.96;
  font-size: clamp(3.2rem, 1.6rem + 5vw, 6.6rem); color: var(--ivory);
}
.au-hero__title em { display: block; font-style: italic; font-weight: 300; color: var(--bronze-2); }
.au-hero__lead { margin: 0; max-width: 50ch; font-size: clamp(1.02rem, 0.96rem + 0.25vw, 1.14rem); line-height: 1.7; color: rgba(250, 247, 241, 0.78); }
.au-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.au-hero__ctas .btn, .au-cta__btns .btn { border-radius: 14px; }

/* "Take" strip: a quiet recording indicator + waveform */
.au-take {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 22px;
  padding: 16px 22px; border-radius: 18px; max-width: 980px;
  background: linear-gradient(160deg, rgba(44, 33, 25, 0.62), rgba(20, 15, 11, 0.6));
  border: 1px solid rgba(250, 247, 241, 0.1);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}
.au-take__rec { display: inline-flex; align-items: center; gap: 8px; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze-2); }
.au-take__rec i { width: 8px; height: 8px; border-radius: 50%; background: #c8744a; box-shadow: 0 0 0 4px rgba(200, 116, 74, 0.18); animation: auRec 2.4s ease-in-out infinite; }
@keyframes auRec { 50% { opacity: 0.35; } }
.au-take__meta { display: grid; line-height: 1.3; padding-right: 22px; border-right: 1px solid rgba(250, 247, 241, 0.12); }
.au-take__meta b { font-family: var(--font-display); font-weight: 400; font-size: 1.02rem; color: var(--ivory); }
.au-take__meta span { font-size: 0.74rem; color: rgba(250, 247, 241, 0.55); }
.au-take__time { font-variant-numeric: tabular-nums; font-size: 0.8rem; letter-spacing: 0.08em; color: rgba(250, 247, 241, 0.6); }
.au-wave { display: flex; align-items: center; gap: 3px; height: 38px; overflow: hidden; }
.au-wave i {
  flex: 1 1 0; min-width: 2px; height: calc(var(--h) * 100%); border-radius: 2px;
  background: linear-gradient(180deg, rgba(205, 177, 132, 0.9), rgba(205, 177, 132, 0.45));
  transform-origin: center; transform: scaleY(0.9);
}
.au-wave i:nth-child(n+40) { background: rgba(250, 247, 241, 0.2); }
.au-wave.is-live i { animation: auSway 3.2s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.11s); }
@keyframes auSway { from { transform: scaleY(0.72); } to { transform: scaleY(1); } }

.au-hero__scroll { position: absolute; left: 50%; bottom: 18px; width: 1px; height: 38px; transform: translateX(-50%); overflow: hidden; }
.au-hero__scroll i { position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(205, 177, 132, 0.8)); animation: auLine 2.6s ease-in-out infinite; }
@keyframes auLine { from { transform: translateY(-100%); } to { transform: translateY(100%); } }

/* ==========================================================================
   2. INTRODUCTION — tall still-life + statement
   ========================================================================== */
.au-intro__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 40px clamp(48px, 8vw, 140px); align-items: center; }
.au-intro__figure { position: relative; margin: 0; border-radius: 6px 6px 120px 6px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 50px 90px -50px rgba(40, 26, 10, 0.6); background: var(--walnut); }
.au-intro__figure img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; filter: saturate(0.88); transform: scale(1.02); transition: transform 1.6s var(--ease-out); }
.au-intro__figure:hover img { transform: scale(1.06); }
.au-intro__figure figcaption { position: absolute; left: 22px; bottom: 20px; }
.au-intro__figure .label { padding: 7px 12px; border-radius: 999px; color: var(--ivory); background: rgba(20, 15, 11, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.au-intro__copy { position: relative; isolation: isolate; display: grid; gap: 18px; }
.au-intro__copy .au-h2 em { display: block; }
.au-intro__lede { margin: 6px 0 0; font-family: var(--font-display); font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem); line-height: 1.45; color: var(--on-light-1); letter-spacing: -0.01em; }
.au-intro__copy > p:not(.eyebrow):not(.au-intro__lede) { margin: 0; color: var(--on-light-2); line-height: 1.75; max-width: 52ch; }
.au-intro__facets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(21, 23, 28, 0.14); position: relative; }
.au-intro__facets::before { content: ""; position: absolute; left: 0; top: -1px; width: 64px; height: 1px; background: var(--bronze); }
.au-intro__facets li { padding: 18px 16px 0 0; font-size: 0.86rem; color: var(--on-light-2); line-height: 1.5; }
.au-intro__facets span { display: block; font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--ink); margin-bottom: 2px; }

/* ==========================================================================
   3. SERVICES — a production track list
   ========================================================================== */
.au-tracks { padding-top: clamp(40px, 5vw, 72px); }
.au-tracks__grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 40px clamp(48px, 7vw, 120px); align-items: start; }
.au-tracks__head { position: sticky; top: 118px; display: grid; gap: 18px; isolation: isolate; }
.au-tracks__head .au-h2 { max-width: 12ch; }
.au-tracks__head .au-h2 em { display: block; }
.au-tracks__still { margin: 16px 0 0; border-radius: 22px; overflow: hidden; aspect-ratio: 3 / 2; background: var(--walnut); box-shadow: 0 30px 60px -36px rgba(40, 26, 10, 0.6); }
.au-tracks__still img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8) brightness(0.92); transition: transform 1.4s var(--ease-out); }
.au-tracks__still:hover img { transform: scale(1.05); }

.au-tracklist { margin: 0; padding: 0; list-style: none; }
.au-phase { padding: 30px 0 12px; }
.au-phase:first-child { padding-top: 0; }
.au-phase .label { color: var(--bronze-ink); display: inline-flex; align-items: center; gap: 12px; }
.au-phase .label::after { content: ""; width: 40px; height: 1px; background: rgba(176, 141, 87, 0.6); }
.au-track {
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) 120px; gap: 20px; align-items: center;
  padding: 24px 0; border-top: 1px solid rgba(21, 23, 28, 0.12);
}
.au-phase + .au-track { border-top-color: rgba(21, 23, 28, 0.2); }
.au-track:last-child { border-bottom: 1px solid rgba(21, 23, 28, 0.12); }
.au-track__n { font-family: var(--font-display); font-weight: 300; font-size: 2rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(126, 98, 54, 0.6); transition: color 0.5s, -webkit-text-stroke-color 0.5s; }
.au-track h3 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 380; font-size: clamp(1.45rem, 1.15rem + 0.7vw, 1.85rem); letter-spacing: -0.02em; transition: transform 0.6s var(--ease-out); }
.au-track p { margin: 0; color: var(--on-light-2); line-height: 1.65; font-size: 0.95rem; max-width: 50ch; }
.au-track__bar { position: relative; height: 2px; border-radius: 2px; background: rgba(21, 23, 28, 0.1); overflow: hidden; }
.au-track__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--w) * 100%); background: var(--bronze); transform: scaleX(0.28); transform-origin: left; transition: transform 1s var(--ease-out); }
.au-track:hover .au-track__n { color: var(--bronze-ink); -webkit-text-stroke-color: transparent; }
.au-track:hover h3 { transform: translateX(4px); }
.au-track:hover .au-track__bar i { transform: scaleX(1); }

/* ==========================================================================
   4. STUDIO — full-bleed room, the signal chain across it
   ========================================================================== */
.au-studio { position: relative; isolation: isolate; overflow: hidden; background: var(--espresso); padding: clamp(110px, 12vw, 180px) 0 clamp(64px, 7vw, 100px); min-height: 88vh; display: flex; align-items: flex-end; }
.au-studio__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.au-studio__media img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; object-position: 50% 50%; filter: blur(1.5px) saturate(0.85) brightness(0.62); }
.au-studio__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ivory) 0%, rgba(246, 242, 234, 0) 5%, rgba(20, 15, 11, 0.1) 30%, rgba(20, 15, 11, 0.86) 72%, var(--espresso) 100%), linear-gradient(90deg, rgba(20, 15, 11, 0.6), transparent 60%); }
.au-studio__inner { width: 100%; display: grid; gap: clamp(40px, 5vw, 64px); }
.au-studio__copy { position: relative; isolation: isolate; max-width: 620px; display: grid; gap: 16px; }
.au-studio .ghost-num { -webkit-text-stroke-color: rgba(205, 177, 132, 0.2); }
.au-studio .eyebrow { color: var(--bronze-2); }
.au-studio__copy .au-h2 em { display: block; }
.au-studio__copy p:not(.eyebrow) { margin: 0; color: rgba(250, 247, 241, 0.72); line-height: 1.7; max-width: 48ch; }
.au-chain { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.au-chain::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: linear-gradient(90deg, var(--bronze-2), rgba(205, 177, 132, 0.25)); }
.au-chain li { position: relative; display: grid; gap: 4px; padding: 30px 18px 0 0; }
.au-chain__dot { position: absolute; left: 0; top: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--espresso); border: 1px solid var(--bronze-2); transition: background 0.5s, box-shadow 0.5s; }
.au-chain li:first-child .au-chain__dot, .au-chain li:last-child .au-chain__dot { background: var(--bronze-2); }
.au-chain li:hover .au-chain__dot { background: var(--bronze-2); box-shadow: 0 0 0 6px rgba(205, 177, 132, 0.15); }
.au-chain b { font-family: var(--font-display); font-weight: 400; font-size: 1.22rem; color: var(--ivory); letter-spacing: -0.01em; }
.au-chain span:not(.au-chain__dot) { font-size: 0.82rem; color: rgba(250, 247, 241, 0.55); }

/* ==========================================================================
   5. NARRATION — portrait + voice score
   ========================================================================== */
.au-voice__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px clamp(48px, 7vw, 120px); align-items: center; }
.au-voice__portrait { margin: 0; position: relative; aspect-ratio: 10 / 13; border-radius: 200px 200px 8px 8px; overflow: hidden; background: #111; box-shadow: 0 60px 100px -60px rgba(20, 15, 11, 0.8); }
.au-voice__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 35% 40%; filter: saturate(0.9); transition: transform 1.6s var(--ease-out); }
.au-voice__portrait:hover img { transform: scale(1.05); }
.au-voice__copy { position: relative; isolation: isolate; display: grid; gap: 18px; }
.au-voice__copy .au-h2 em { display: block; }
.au-voice__lede { margin: 4px 0 0; font-family: var(--font-display); font-size: clamp(1.2rem, 1.02rem + 0.55vw, 1.5rem); line-height: 1.5; color: var(--on-light-1); letter-spacing: -0.01em; max-width: 40ch; }
.au-voice__copy > p:not(.eyebrow):not(.au-voice__lede) { margin: 0; color: var(--on-light-2); line-height: 1.75; max-width: 54ch; }
.au-score { position: relative; height: 92px; margin: 14px 0 4px; }
.au-score__wave {
  position: absolute; left: 0; right: 0; top: 18px; height: 44px;
  background:
    repeating-linear-gradient(90deg, rgba(126, 98, 54, 0.55) 0 2px, transparent 2px 6px);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 44' preserveAspectRatio='none'%3E%3Cpath d='M0 22 C40 4 60 40 100 20 S160 2 200 22 S250 42 280 22 S300 21 330 22 S380 0 420 20 S470 44 510 18 S560 6 600 22 L600 44 L0 44 Z M0 22 C40 40 60 4 100 24 S160 42 200 22 S250 2 280 22 S300 23 330 22 S380 44 420 24 S470 0 510 26 S560 38 600 22 L600 0 L0 0 Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 44' preserveAspectRatio='none'%3E%3Cpath d='M0 22 C40 4 60 40 100 20 S160 2 200 22 S250 42 280 22 S300 21 330 22 S380 0 420 20 S470 44 510 18 S560 6 600 22 L600 44 L0 44 Z M0 22 C40 40 60 4 100 24 S160 42 200 22 S250 2 280 22 S300 23 330 22 S380 44 420 24 S470 0 510 26 S560 38 600 22 L600 0 L0 0 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.au-score::after { content: ""; position: absolute; left: 0; right: 0; top: 40px; height: 1px; background: rgba(21, 23, 28, 0.12); }
.au-score__marks { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.au-score__marks li { position: absolute; left: var(--x); top: 0; bottom: 0; border-left: 1px dashed rgba(176, 141, 87, 0.7); }
.au-score__marks b { position: absolute; left: 8px; bottom: 0; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 0.92rem; color: var(--bronze-ink); white-space: nowrap; }
.au-voice__terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; margin: 10px 0 0; }
.au-voice__terms > div { padding-top: 16px; border-top: 1px solid rgba(21, 23, 28, 0.14); }
.au-voice__terms dt { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); margin-bottom: 6px; }
.au-voice__terms dd { margin: 0; font-size: 0.9rem; color: var(--on-light-2); line-height: 1.55; }

/* ==========================================================================
   6. PROCESS — six stages set like a book's contents page
   ========================================================================== */
.au-process__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.au-process__head > div { position: relative; isolation: isolate; }
.au-process__head .au-h2 em { display: block; }
.au-process__head > p { margin: 0; color: var(--on-light-2); line-height: 1.7; max-width: 44ch; justify-self: end; }

/* ==========================================================================
   7. WHAT YOU RECEIVE — the master file panel
   ========================================================================== */
.au-files { padding-top: 0; }
.au-files__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px clamp(48px, 7vw, 120px); align-items: center; }
.au-files__head { position: relative; isolation: isolate; display: grid; gap: 16px; }
.au-files__head .au-h2 em { display: block; }
.au-files__head > p { margin: 0; color: var(--on-light-2); line-height: 1.7; max-width: 40ch; }
.au-files__panel {
  border-radius: 24px; overflow: hidden; color: var(--on-dark-1);
  background: linear-gradient(170deg, var(--walnut), var(--espresso));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 50px 90px -50px rgba(20, 15, 11, 0.85);
}
.au-files__bar { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid rgba(250, 247, 241, 0.08); }
.au-files__bar .label { color: var(--bronze-2); }
.au-files__dots { display: inline-flex; gap: 6px; }
.au-files__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(250, 247, 241, 0.2); }
.au-files__dots i:first-child { background: var(--bronze-2); }
.au-files__list { margin: 0; padding: 6px 0; list-style: none; }
.au-files__list li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 20px 24px; border-bottom: 1px solid rgba(250, 247, 241, 0.07); transition: background 0.5s; }
.au-files__list li:last-child { border-bottom: 0; }
.au-files__list li:hover { background: rgba(250, 247, 241, 0.04); }
.au-files__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(205, 177, 132, 0.4); font-family: var(--font-display); font-style: italic; color: var(--bronze-2); }
.au-files__list h3 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; color: var(--ivory); }
.au-files__list p { margin: 0; font-size: 0.88rem; color: rgba(250, 247, 241, 0.62); line-height: 1.55; }
.au-files__meta { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(250, 247, 241, 0.42); white-space: nowrap; }

/* ==========================================================================
   8. CINEMATIC STILL
   ========================================================================== */
.au-still { position: relative; isolation: isolate; overflow: hidden; min-height: 86vh; display: flex; align-items: flex-end; padding: 0 0 clamp(48px, 6vw, 88px); background: var(--espresso); }
.au-still__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.au-still__media img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; object-position: 50% 55%; filter: saturate(0.8) contrast(1.05); }
.au-still__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ivory) 0%, rgba(20, 15, 11, 0) 5%, rgba(20, 15, 11, 0) 50%, rgba(20, 15, 11, 0.85) 100%), radial-gradient(120% 100% at 50% 40%, transparent 50%, rgba(10, 7, 5, 0.55) 100%); }
.au-still__inner { width: 100%; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.au-still__line { margin: 0; font-family: var(--font-display); font-weight: 320; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem); line-height: 1.04; letter-spacing: -0.03em; color: var(--ivory); max-width: 14ch; }
.au-still__line em { display: block; font-style: italic; color: var(--bronze-2); }
.au-still__credit { color: rgba(250, 247, 241, 0.5); }

/* ---------- CTA ---------- */
.au-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.au-cta .cta__media img { filter: saturate(0.6) brightness(0.45) sepia(0.2); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .au-intro__grid, .au-tracks__grid, .au-voice__grid, .au-files__grid { grid-template-columns: minmax(0, 1fr); }
  .au-tracks__head { position: static; }
  .au-tracks__still { max-width: 560px; }
  .au-intro__figure { max-width: 560px; aspect-ratio: 5 / 4; }
  .au-voice__portrait { max-width: 460px; aspect-ratio: 1 / 1; border-radius: 160px 160px 8px 8px; }
  .au-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .au-chain::before { display: none; }
  .au-chain li { border-top: 1px solid rgba(205, 177, 132, 0.35); padding-top: 26px; }
  .au-chain__dot { top: -7px; }
  .au-process__head { grid-template-columns: minmax(0, 1fr); }
  .au-process__head > p { justify-self: start; }
}
@media (max-width: 760px) {
  .au-hero { min-height: 0; padding-top: 150px; }
  .au-hero__img { background-position: 78% 40%; }
  .au-hero__media::after { background: linear-gradient(180deg, rgba(20, 15, 11, 0.5) 0%, rgba(20, 15, 11, 0.55) 30%, rgba(20, 15, 11, 0.9) 70%, rgba(20, 15, 11, 0.96) 100%); }
  .au-crumbs { top: -54px; }
  .au-hero__title { font-size: 3.1rem; }
  .au-hero__ctas .btn { flex: 1 1 auto; justify-content: center; }
  .au-take { grid-template-columns: auto minmax(0, 1fr); gap: 12px 16px; padding: 14px 16px; }
  .au-take__meta { border-right: 0; padding-right: 0; }
  .au-take .au-wave { grid-column: 1 / -1; height: 30px; }
  .au-take__time { display: none; }
  .au-intro__figure { aspect-ratio: 4 / 3; border-radius: 6px 6px 70px 6px; }
  .au-intro__facets { grid-template-columns: minmax(0, 1fr); }
  .au-intro__facets li { padding: 14px 0; border-bottom: 1px solid rgba(21, 23, 28, 0.08); }
  .au-track { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
  .au-track__bar { grid-column: 2; }
  .au-track__n { font-size: 1.6rem; }
  .au-studio { min-height: 0; padding-top: 140px; }
  .au-chain { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .au-chain li { border-top: 0; border-left: 1px solid rgba(205, 177, 132, 0.4); padding: 0 0 22px 24px; }
  .au-chain__dot { left: -7px; top: 3px; }
  .au-voice__portrait { aspect-ratio: 4 / 3; border-radius: 120px 120px 8px 8px; }
  .au-voice__terms { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .au-voice__terms > div { padding: 14px 0; }
  .au-files__list li { grid-template-columns: 40px minmax(0, 1fr); padding: 18px; }
  .au-files__meta { grid-column: 2; }
  .au-still { min-height: 70vh; }
  .au-still__media img { object-position: 30% 55%; }
  .au-cta__btns .btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .au-hero__img, .au-hero__light, .au-take__rec i, .au-hero__scroll i, .au-wave.is-live i { animation: none; }
  .au-intro__figure img, .au-tracks__still img, .au-voice__portrait img, .au-track__bar i { transition: none; }
}

/* ==========================================================================
   Process as an audio production timeline (replaces the contents grid)
   ========================================================================== */
.au-timeline { position: relative; padding-top: 34px; }
.au-ruler {
  position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background:
    repeating-linear-gradient(90deg, rgba(21, 23, 28, 0.35) 0 1px, transparent 1px 100px),
    repeating-linear-gradient(90deg, rgba(21, 23, 28, 0.16) 0 1px, transparent 1px 20px);
  background-size: 100% 14px, 100% 7px; background-repeat: repeat-x; background-position: 0 0, 0 7px;
  border-bottom: 1px solid rgba(21, 23, 28, 0.16);
}
.au-clips { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.au-clip { flex: var(--g) 1 0; min-width: 0; display: grid; align-content: start; gap: 8px; padding-right: 10px; }
.au-clip__bar {
  position: relative; display: block; height: 46px; margin-bottom: 14px; border-radius: 6px; overflow: hidden;
  background: linear-gradient(180deg, rgba(58, 42, 32, 0.9), rgba(36, 29, 25, 0.95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s;
}
.au-clip__bar i {
  position: absolute; left: 8px; right: 8px; top: 9px; bottom: 9px;
  background: repeating-linear-gradient(90deg, rgba(205, 177, 132, 0.8) 0 2px, transparent 2px 5px);
  -webkit-mask-image: linear-gradient(90deg, #000, #000), radial-gradient(60% 100% at 50% 50%, #000, transparent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 14 L6 9 L12 18 L18 6 L24 20 L30 10 L36 16 L42 4 L48 22 L54 8 L60 17 L66 11 L72 19 L78 5 L84 21 L90 9 L96 15 L102 7 L108 20 L114 12 L120 18 L126 3 L132 24 L138 10 L144 17 L150 6 L156 21 L162 11 L168 16 L174 8 L180 19 L186 12 L192 16 L200 14 L200 28 L0 28 Z M0 14 L6 19 L12 10 L18 22 L24 8 L30 18 L36 12 L42 24 L48 6 L54 20 L60 11 L66 17 L72 9 L78 23 L84 7 L90 19 L96 13 L102 21 L108 8 L114 16 L120 10 L126 25 L132 4 L138 18 L144 11 L150 22 L156 7 L162 17 L168 12 L174 20 L180 9 L186 16 L192 12 L200 14 L200 0 L0 0 Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 14 L6 9 L12 18 L18 6 L24 20 L30 10 L36 16 L42 4 L48 22 L54 8 L60 17 L66 11 L72 19 L78 5 L84 21 L90 9 L96 15 L102 7 L108 20 L114 12 L120 18 L126 3 L132 24 L138 10 L144 17 L150 6 L156 21 L162 11 L168 16 L174 8 L180 19 L186 12 L192 16 L200 14 L200 28 L0 28 Z M0 14 L6 19 L12 10 L18 22 L24 8 L30 18 L36 12 L42 24 L48 6 L54 20 L60 11 L66 17 L72 9 L78 23 L84 7 L90 19 L96 13 L102 21 L108 8 L114 16 L120 10 L126 25 L132 4 L138 18 L144 11 L150 22 L156 7 L162 17 L168 12 L174 20 L180 9 L186 16 L192 12 L200 14 L200 0 L0 0 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; opacity: 0.8;
}
.au-clip:nth-child(3) .au-clip__bar { background: linear-gradient(180deg, #4a3526, #2e231c); }
.au-clip:last-child .au-clip__bar { background: linear-gradient(180deg, #b08d57, #8f7045); }
.au-clip:last-child .au-clip__bar i { background: repeating-linear-gradient(90deg, rgba(246, 242, 234, 0.85) 0 2px, transparent 2px 5px); }
.au-clip:hover .au-clip__bar { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 14px 24px -14px rgba(36, 29, 25, 0.7); }
.au-clip__n { font-family: var(--font-display); font-style: italic; font-size: 1rem; color: var(--bronze-ink); }
.au-clip h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; letter-spacing: -0.015em; line-height: 1.15; }
.au-clip p { margin: 0; color: var(--on-light-2); font-size: 0.88rem; line-height: 1.6; }
.au-playhead { position: absolute; top: 0; left: 0; width: 1px; height: 94px; background: #b0543a; pointer-events: none; }
.au-playhead::before { content: ""; position: absolute; top: -2px; left: -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid #b0543a; }
.au-timeline.is-in .au-playhead { animation: auPlay 18s linear infinite; }
@keyframes auPlay { from { left: 0; } to { left: 100%; } }
@media (max-width: 1100px) {
  .au-clips { flex-wrap: wrap; row-gap: 30px; }
  .au-clip { flex: 1 1 30%; }
  .au-playhead { display: none; }
}
@media (max-width: 760px) {
  .au-timeline { padding-top: 0; padding-left: 26px; }
  .au-ruler { left: 0; right: auto; top: 0; bottom: 0; width: 12px; height: auto; border-bottom: 0; border-right: 1px solid rgba(21, 23, 28, 0.16);
    background: repeating-linear-gradient(180deg, rgba(21, 23, 28, 0.3) 0 1px, transparent 1px 60px), repeating-linear-gradient(180deg, rgba(21, 23, 28, 0.14) 0 1px, transparent 1px 12px);
    background-size: 12px 100%, 6px 100%; background-repeat: repeat-y; background-position: 0 0, 6px 0; }
  .au-clips { flex-direction: column; gap: 26px; }
  .au-clip { flex: none; padding-right: 0; }
  .au-clip__bar { height: 34px; margin-bottom: 6px; width: calc(var(--g) * 55%); min-width: 40%; }
}
@media (prefers-reduced-motion: reduce) { .au-timeline.is-in .au-playhead { animation: none; } }

/* ==========================================================================
   Hero photograph — professional recording studio (refined treatment)
   Condenser microphone with pop filter, further microphones receding into a
   warm dark studio. Photo: Jonathan Velasquez / Unsplash (c1ZN57GfDB0).
   5px blur on the photo layer only, with overscan so no soft edge shows;
   headline sits in the darker left field, the microphone to the right.
   ========================================================================== */
.au-hero__img {
  inset: -32px;
  filter: blur(5px) saturate(0.9) sepia(0.12) contrast(1.02);
  background: var(--walnut) url("../images/photos/1478737270239-2f02b77fc618-2400.webp") 60% 45% / cover no-repeat;
  background-image: image-set(
    url("../images/photos/1478737270239-2f02b77fc618-2400.webp") 1x,
    url("../images/photos/1478737270239-2f02b77fc618-3200.webp") 2x);
  animation: auDrift 60s ease-in-out infinite alternate;
}
@keyframes auDrift { from { transform: scale(1.02); } to { transform: scale(1.05) translateX(-0.5%); } }
.au-hero__media::after {
  background:
    radial-gradient(38% 52% at 70% 40%, rgba(226, 170, 102, 0.12), transparent 70%),
    linear-gradient(90deg, rgba(20, 15, 11, 0.88) 0%, rgba(20, 15, 11, 0.66) 32%, rgba(20, 15, 11, 0.12) 62%, rgba(20, 15, 11, 0.02) 100%),
    linear-gradient(180deg, rgba(20, 15, 11, 0.5) 0%, transparent 24%, transparent 62%, rgba(20, 15, 11, 0.9) 100%),
    radial-gradient(130% 110% at 60% 45%, transparent 58%, rgba(8, 6, 4, 0.5) 100%);
}
.au-hero__light { right: 12%; top: 10%; width: 38vw; height: 38vw; background: radial-gradient(circle, rgba(232, 176, 104, 0.12), transparent 62%); }
@media (max-width: 1100px) {
  .au-hero__img { background-position: 66% 42%; }
}
@media (max-width: 760px) {
  .au-hero__img {
    filter: blur(3.5px) saturate(0.9) sepia(0.12);
    background-image: url("../images/photos/1478737270239-2f02b77fc618-1200.webp");
    background-image: image-set(
      url("../images/photos/1478737270239-2f02b77fc618-1200.webp") 1x,
      url("../images/photos/1478737270239-2f02b77fc618-2000.webp") 2x);
    background-position: 72% 34%;
  }
  .au-hero__media::after {
    background:
      radial-gradient(60% 34% at 72% 26%, rgba(226, 170, 102, 0.12), transparent 70%),
      linear-gradient(180deg, rgba(20, 15, 11, 0.45) 0%, rgba(20, 15, 11, 0.32) 30%, rgba(20, 15, 11, 0.82) 58%, rgba(20, 15, 11, 0.95) 100%);
  }
  .au-hero__light { right: -10%; top: 8%; width: 90vw; height: 90vw; }
}
@media (prefers-reduced-motion: reduce) { .au-hero__img, .au-hero__light { animation: none; } }