/* =============================================================================
   Prins & Prins - Museum Audio Guide  (v4, cinematic + legible)
   ============================================================================= */
:root { --ag-gold: #E8C16A; --ag-gold-bright: #FFE9A8; --ag-sage: rgb(188,201,183); }
@property --ag-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

body.page-audio-guide { background: #0b0f0c; color: var(--cream, #f3ede5); overflow-x: hidden; }
body.page-audio-guide main { min-height: 72vh; position: relative; z-index: 2; }
#agApp { display: block; position: relative; z-index: 2; }
body.ag-has-player { padding-bottom: calc(184px + var(--pp-cookie-h, 0px)); }

#agBg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-color: #090d0a; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity .9s ease, background-image 0s; transform: scale(1.03); }
#agBg.is-on { opacity: 1; }
#agBg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,11,8,.62) 0%, rgba(7,11,8,.18) 20%, rgba(7,11,8,.10) 52%, rgba(7,11,8,.42) 78%, rgba(7,11,8,.88) 100%), radial-gradient(130% 100% at 50% 0%, rgba(7,11,8,0) 34%, rgba(7,11,8,.52) 100%); }
/* Phones get a purpose-built portrait cut of the artwork. Covering the wide
   original into a 9:19 viewport threw away everything but the empty green
   middle, so the mobile file is the whole scene feathered top and bottom and
   laid over the cave gradient. Nothing of the composition is cropped away. */
#agBg.ag-bg--portal,
#agBg.ag-bg--cave,
#agBg.ag-bg--cosmos {
  background-image:
    url('../assets/images/museum/museum_2_background_portrait.webp'),
    radial-gradient(128% 72% at 50% 40%, #12301f 0%, #0a1a13 55%, #050d0a 100%);
  background-size: 108% auto, cover;
  background-position: center 38%, center;
  background-repeat: no-repeat, no-repeat;
}
@media (min-width: 760px) {
  #agBg.ag-bg--portal,
  #agBg.ag-bg--cave,
  #agBg.ag-bg--cosmos {
    background-image: url('../assets/images/museum/museum_2_background_full.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
  }
}
.ag-ambient { position: fixed; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: .9; }

@keyframes agFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes agGlow { 0%,100% { text-shadow: 0 0 24px rgba(232,193,106,.0); } 50% { text-shadow: 0 0 30px rgba(232,193,106,.28); } }
@keyframes agFrameSpin { to { --ag-ang: 360deg; } }
.ag-fade { animation: agFadeUp .7s cubic-bezier(.2,.7,.2,1) both; }
.ag-fade-1 { animation-delay: .06s; } .ag-fade-2 { animation-delay: .13s; }
.ag-fade-3 { animation-delay: .2s; } .ag-fade-4 { animation-delay: .28s; }

.ag-landing, .ag-chapters, .ag-list { max-width: 1080px; margin: 0 auto; padding: 30px 20px 60px; }

.ag-landing { max-width: 860px; min-height: calc(100svh - 96px); display: flex; align-items: center; justify-content: center; text-align: center; }
.ag-landing-inner { width: 100%; }
.ag-landing-crest { width: 70px; height: 70px; object-fit: contain; margin: 0 auto 20px; display: block; filter: drop-shadow(0 4px 18px rgba(0,0,0,.6)); }
.ag-landing-eyebrow { font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--ag-gold-bright); margin: 0 0 16px; text-shadow: 0 1px 16px rgba(232,193,106,.4), 0 1px 3px rgba(0,0,0,.85); }
.ag-landing-h { font-family: var(--serif); font-weight: 400; font-size: clamp(2.3rem, 8vw, 4rem); line-height: 1.04; margin: 0 0 16px; color: #fff; letter-spacing: .01em; text-shadow: 0 2px 30px rgba(0,0,0,.65); }
.ag-landing-h em { font-style: italic; color: var(--ag-gold); animation: agGlow 5s ease-in-out infinite; }
.ag-landing-sub { font-family: var(--sans); font-size: 1rem; line-height: 1.65; color: rgba(255,255,255,.9); max-width: 40ch; margin: 0 auto 26px; text-shadow: 0 1px 12px rgba(0,0,0,.7); }

.ag-trust { display: inline-flex; align-items: stretch; gap: 0; margin: 0 auto 34px; padding: 12px 8px; border-radius: 16px; background: rgba(10,16,12,.58); border: 1px solid rgba(232,193,106,.28); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); box-shadow: 0 14px 44px rgba(0,0,0,.45); }
.ag-trust-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 18px; min-width: 96px; }
.ag-trust-score { font-family: var(--serif); font-size: 1.5rem; line-height: 1; color: #fff; font-weight: 500; }
.ag-trust-score.is-pla { color: var(--ag-gold); font-size: 1.18rem; letter-spacing: .01em; }
.ag-trust-stars { color: var(--ag-gold); font-size: .62rem; letter-spacing: 2px; line-height: 1; }
.ag-trust-label { font-family: var(--sans); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.66); margin-top: 3px; }
.ag-trust-sep { width: 1px; align-self: center; height: 38px; background: linear-gradient(180deg, transparent, rgba(232,193,106,.34), transparent); }
/* The three badges ran off the right edge of a 390px phone. Tighten the
   gutters rather than wrap, so the row still reads as one bar. */
@media (max-width: 440px) {
  .ag-trust { display: flex; width: 100%; padding: 11px 2px; }
  .ag-trust-item { flex: 1 1 0; min-width: 0; padding: 4px 6px; }
  .ag-trust-score { font-size: 1.32rem; }
  .ag-trust-score.is-pla { font-size: .95rem; }
  .ag-trust-label { font-size: .5rem; letter-spacing: .08em; }
  .ag-trust-stars { font-size: .55rem; letter-spacing: 1px; }
}

/* Primary entry CTA. Replaced the six-flag language grid on 16 Aug 2026,
   the guide is English only for now. The .ag-lang-* and .ag-flag rules below
   are kept so restoring the grid is a markup-only change. */
.ag-begin { display: inline-flex; align-items: center; gap: 10px; margin: 0 auto; padding: 17px 40px; cursor: pointer; border: 0; border-radius: 999px; background: linear-gradient(135deg, #FFF1C4 0%, #F3D58A 34%, #E8C16A 100%); color: #0c1f17; font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; box-shadow: 0 14px 38px -10px rgba(232,193,106,.66), 0 1px 0 rgba(255,255,255,.5) inset; transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s; }
.ag-begin:hover, .ag-begin:focus-visible { transform: translateY(-2px); box-shadow: 0 18px 46px -10px rgba(232,193,106,.85), 0 1px 0 rgba(255,255,255,.6) inset; outline: none; }

.ag-lang-label { font-family: var(--sans); font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.62); margin: 0 0 14px; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.ag-lang-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; max-width: 460px; margin: 0 auto; }
.ag-flag { display: flex; align-items: center; gap: 12px; padding: 13px 16px; min-height: 58px; cursor: pointer; text-align: left; background: rgba(16,22,17,.6); border: 1px solid rgba(255,255,255,.12); border-radius: 13px; color: var(--cream); font-family: var(--sans); font-size: .95rem; transition: border-color .22s, transform .16s, background .22s, box-shadow .22s; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ag-flag:hover, .ag-flag:focus-visible { border-color: var(--ag-gold); background: rgba(30,28,20,.66); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.4); outline: none; }
.ag-flag-img { width: 34px; flex: 0 0 34px; line-height: 0; }
.ag-flag-img svg { width: 34px; height: auto; border-radius: 3px; display: block; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.ag-flag-name { font-weight: 500; }
.ag-resume { margin: 24px auto 0; display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; cursor: pointer; background: linear-gradient(180deg, rgba(232,193,106,.16), rgba(232,193,106,.06)); border: 1px solid var(--ag-gold); color: var(--ag-gold-bright); border-radius: 999px; font-family: var(--sans); font-size: .82rem; letter-spacing: .04em; }
.ag-resume:hover { background: rgba(232,193,106,.2); }

.ag-chapters-head { position: relative; text-align: center; margin: 14px 0 38px; z-index: 0; }
.ag-chapters-head::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(130%, 720px); height: 230%; z-index: -1; pointer-events: none; background: radial-gradient(58% 56% at 50% 50%, rgba(8,11,8,.62) 0%, rgba(8,11,8,.28) 55%, transparent 78%); }
.ag-chapters-eyebrow { font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--ag-gold-bright); margin: 0 0 16px; text-shadow: 0 1px 18px rgba(232,193,106,.5), 0 1px 4px rgba(0,0,0,.85); }
.ag-chapters-h { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 6.8vw, 3.3rem); margin: 0; color: #fff; letter-spacing: .01em; text-shadow: 0 2px 32px rgba(0,0,0,.7); }
.ag-chapters-h::after { content: ""; display: block; width: 92px; height: 2px; margin: 18px auto 0; background: linear-gradient(90deg, transparent, var(--ag-gold), transparent); box-shadow: 0 0 16px rgba(232,193,106,.6); }
.ag-chapters-sub { font-family: var(--sans); font-size: 1rem; line-height: 1.6; color: #fff; opacity: .92; max-width: 46ch; margin: 18px auto 0; text-shadow: 0 1px 14px rgba(0,0,0,.8); }
.ag-chap-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ag-chap-card { position: relative; display: block; overflow: hidden; cursor: pointer; text-align: left; color: var(--cream); border: 1px solid rgba(232,193,106,.3); border-radius: 18px; min-height: 188px; isolation: isolate; background: #11160f; box-shadow: 0 16px 40px rgba(0,0,0,.4); transition: border-color .26s, transform .22s, box-shadow .26s; }
.ag-chap-card:hover, .ag-chap-card:focus-visible { transform: translateY(-4px); box-shadow: 0 26px 56px rgba(0,0,0,.55); outline: none; }
.ag-chap-cover { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transform: scale(1.02); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.ag-chap-card:hover .ag-chap-cover { transform: scale(1.1); }
.ag-chap-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,12,9,.18) 0%, rgba(8,12,9,.5) 50%, rgba(8,12,9,.9) 100%); }
.ag-chap-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.7px; z-index: 3; pointer-events: none; background: conic-gradient(from var(--ag-ang), rgba(232,193,106,0) 0deg, rgba(232,193,106,0) 225deg, rgba(255,233,168,.55) 288deg, var(--ag-gold-bright) 318deg, rgba(232,193,106,.55) 344deg, rgba(232,193,106,0) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: agFrameSpin 5.5s linear infinite; filter: drop-shadow(0 0 5px rgba(232,193,106,.55)); }
.ag-chap-card:hover::before { animation-duration: 3s; }
.ag-chap-body { position: relative; z-index: 1; padding: 20px 22px; display: flex; flex-direction: column; gap: 4px; min-height: 188px; justify-content: flex-end; }
.ag-chap-letter { position: absolute; top: 14px; right: 20px; font-family: var(--serif); font-size: 3.4rem; line-height: 1; background-image: linear-gradient(100deg, #B8893C 0%, #E8C16A 22%, #FFF3CC 50%, #E8C16A 78%, #B8893C 100%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; -webkit-text-stroke: .5px rgba(232,193,106,.55); animation: agLetterShimmer 5s linear infinite, agLetterGlow 3.2s ease-in-out infinite; will-change: filter, background-position; }
.ag-chap-space { font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--ag-gold-bright); text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.ag-chap-title { font-family: var(--serif); font-size: 1.5rem; line-height: 1.12; margin: 2px 0; color: #fff; padding-right: 40px; text-shadow: 0 2px 14px rgba(0,0,0,.7); }
.ag-chap-blurb { font-family: var(--sans); font-size: .87rem; line-height: 1.5; color: #fff; opacity: .9; max-width: 42ch; text-shadow: 0 1px 10px rgba(0,0,0,.8); }
.ag-chap-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.ag-chap-count { font-family: var(--sans); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.ag-chap-begin { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ag-gold-bright); padding: 7px 16px; border: 1px solid rgba(232,193,106,.55); border-radius: 999px; background: rgba(232,193,106,.06); transition: background .22s, gap .22s; }
.ag-chap-card:hover .ag-chap-begin { background: rgba(232,193,106,.18); gap: 11px; }

.ag-list { max-width: 820px; }
.ag-list-back { display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 18px; cursor: pointer; background: rgba(16,22,17,.62); border: 1px solid rgba(232,193,106,.3); color: var(--cream); border-radius: 999px; padding: 9px 16px; font-family: var(--sans); font-size: .78rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ag-list-back:hover { border-color: var(--ag-gold); color: var(--ag-gold); }
.ag-list-hero { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid rgba(232,193,106,.4); padding: 30px 26px; margin: 0 0 24px; min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.ag-list-hero-cover { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.ag-list-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,12,9,.28), rgba(8,12,9,.78)); }
.ag-list-hero-letter { position: absolute; top: 16px; right: 24px; font-family: var(--serif); font-size: 4rem; line-height: 1; background-image: linear-gradient(100deg, #B8893C 0%, #E8C16A 22%, #FFF3CC 50%, #E8C16A 78%, #B8893C 100%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; -webkit-text-stroke: .5px rgba(232,193,106,.55); animation: agLetterShimmer 5.6s linear infinite, agLetterGlow 3.6s ease-in-out infinite; will-change: filter, background-position; }
/* A-E letters: shimmering molten-gold glow */
@keyframes agLetterShimmer { 0% { background-position: 0% 50%; } 100% { background-position: 220% 50%; } }
@keyframes agLetterGlow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(232,193,106,.40)) drop-shadow(0 0 14px rgba(232,193,106,.20)) brightness(1); }
  50%      { filter: drop-shadow(0 0 14px rgba(232,193,106,.85)) drop-shadow(0 0 30px rgba(199,158,80,.50)) brightness(1.16); }
}
@media (prefers-reduced-motion: reduce) {
  .ag-chap-letter, .ag-list-hero-letter { animation: none; filter: drop-shadow(0 0 10px rgba(232,193,106,.5)); }
}
.ag-list-hero-space { font-family: var(--sans); font-size: .64rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--ag-gold-bright); text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.ag-list-hero-title { font-family: var(--serif); font-size: clamp(1.6rem, 5vw, 2.3rem); line-height: 1.08; color: #fff; margin: 4px 0 6px; text-shadow: 0 2px 16px rgba(0,0,0,.7); }
.ag-list-hero-blurb { font-family: var(--sans); font-size: .92rem; line-height: 1.55; color: #fff; opacity: .9; max-width: 46ch; text-shadow: 0 1px 10px rgba(0,0,0,.8); }

.ag-disp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ag-disp { position: relative; isolation: isolate; border-radius: 14px; overflow: hidden; transition: border-color .22s, box-shadow .22s, background .22s; background: rgba(13,18,13,.84); border: 1px solid rgba(232,193,106,.24); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.ag-disp::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.7px; z-index: -1; pointer-events: none; background: conic-gradient(from var(--ag-ang), rgba(232,193,106,0) 0deg, rgba(232,193,106,0) 225deg, rgba(255,233,168,.55) 288deg, var(--ag-gold-bright) 318deg, rgba(232,193,106,.55) 344deg, rgba(232,193,106,0) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: agFrameSpin 5.5s linear infinite; filter: drop-shadow(0 0 5px rgba(232,193,106,.55)); }
.ag-disp:hover { border-color: rgba(232,193,106,.55); }
.ag-disp.is-active { border-color: var(--ag-gold); background: rgba(30,27,18,.88); box-shadow: 0 0 0 1.5px rgba(232,193,106,.4), 0 16px 40px rgba(0,0,0,.5); }
.ag-disp-btn { width: 100%; display: flex; align-items: center; gap: 14px; padding: 13px 15px; background: transparent; border: 0; cursor: pointer; color: var(--cream); text-align: left; min-height: 68px; }
.ag-disp-num { flex: 0 0 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: linear-gradient(155deg, var(--ag-gold-bright), var(--ag-gold)); color: #221a06; font-family: var(--sans); font-weight: 700; font-size: 1.18rem; box-shadow: 0 3px 14px rgba(232,193,106,.32); }
.ag-disp-thumb { flex: 0 0 52px; height: 52px; border-radius: 10px; overflow: hidden; background: #1a1f17; border: 1px solid rgba(232,193,106,.2); }
.ag-disp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ag-disp-thumb--none { background: linear-gradient(135deg, #1f2419, #14180f); position: relative; }
.ag-disp-thumb--none::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; transform: translate(-50%,-50%) rotate(45deg); border: 1px solid rgba(232,193,106,.5); }
.ag-disp-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ag-disp-title { font-family: var(--serif); font-size: 1.14rem; line-height: 1.18; color: #fff; }
.ag-disp-cue { font-family: var(--sans); font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ag-gold-bright); }
.ag-disp-badge { font-family: var(--sans); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.ag-disp-play { flex: 0 0 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--ag-gold); position: relative; transition: background .2s; }
.ag-disp-btn:hover .ag-disp-play { background: rgba(232,193,106,.16); }
.ag-disp-play::after { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%,-50%); border-left: 8px solid var(--ag-gold); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.ag-disp--silent .ag-disp-num { background: linear-gradient(155deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); color: rgba(255,255,255,.55); box-shadow: none; }
.ag-disp--silent .ag-disp-play { border-color: rgba(255,255,255,.28); }
.ag-disp--silent .ag-disp-play::after { border-left-color: rgba(255,255,255,.35); }
.ag-disp-transcript { margin: 0; padding: 0 16px 15px 73px; font-family: var(--sans); font-size: .86rem; line-height: 1.65; color: rgba(255,255,255,.82); display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.ag-list-foot { text-align: center; margin-top: 34px; }
.ag-list-shop { font-family: var(--sans); font-size: .82rem; letter-spacing: .05em; color: var(--ag-gold-bright); text-decoration: none; border-bottom: 1px solid rgba(232,193,106,.5); padding-bottom: 3px; }
.ag-list-shop:hover { color: #fff; }

.ag-player { position: fixed; left: 0; right: 0; bottom: var(--pp-cookie-h, 0px); z-index: 1200; transition: bottom .45s cubic-bezier(.25,.1,.25,1); background: linear-gradient(180deg, rgba(14,21,16,.95) 0%, rgba(6,10,7,.985) 100%); backdrop-filter: blur(26px) saturate(1.25); -webkit-backdrop-filter: blur(26px) saturate(1.25); border-top: 1px solid rgba(232,193,106,.4); box-shadow: 0 -14px 50px rgba(0,0,0,.68); }
.ag-player[hidden] { display: none; }
.ag-player-inner { max-width: 760px; margin: 0 auto; padding: 14px 18px calc(15px + env(safe-area-inset-bottom)); }
.ag-np { display: flex; align-items: center; gap: 13px; }
.ag-np-art { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 11px; background-size: cover; background-position: center; background-color: #1a1f17; box-shadow: 0 4px 14px rgba(0,0,0,.5); position: relative; overflow: hidden; }
.ag-np-art::after { content: ""; position: absolute; inset: 0; border: 1.5px solid rgba(232,193,106,.45); border-radius: 11px; }
.ag-np-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ag-np-num { font-family: var(--sans); font-size: .6rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ag-gold-bright); }
.ag-np-title { font-family: var(--serif); font-size: 1.24rem; line-height: 1.14; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.ag-tr-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; color: rgba(255,255,255,.62); font-family: var(--sans); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; padding: 6px 2px; }
.ag-tr-toggle:hover { color: var(--ag-gold); }
.ag-tr-chev { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-135deg); transition: transform .25s; }
.ag-player.is-expanded .ag-tr-chev { transform: rotate(45deg); }
.ag-transcript { max-height: 32vh; overflow-y: auto; margin: 12px 0 2px; padding: 16px 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(232,193,106,.18); border-radius: 13px; }
.ag-transcript-text { margin: 0; font-family: var(--sans); font-size: .93rem; line-height: 1.68; color: #fff; opacity: .95; }
/* Karaoke transcript: words light up as the audio reaches them */
.ag-tr-word { color: rgba(255,255,255,.40); transition: color .28s ease, text-shadow .28s ease; }
.ag-tr-word.is-read { color: rgba(255,255,255,.92); }
.ag-tr-word.is-active { color: #F6E2A6; text-shadow: 0 0 16px rgba(232,193,106,.6); }
/* Close the player */
.ag-close { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(232,193,106,.32); background: rgba(10,16,12,.5); color: rgba(255,255,255,.72); font-size: 1.2rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.ag-close:hover { color: var(--ag-gold); border-color: var(--ag-gold); background: rgba(232,193,106,.12); }
.ag-pending { text-align: center; font-family: var(--sans); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); padding: 9px 0 2px; }
.ag-wave { position: relative; height: 46px; margin: 14px 0 5px; cursor: pointer; touch-action: none; outline: none; }
.ag-wave:focus-visible { box-shadow: 0 0 0 2px rgba(232,193,106,.5); border-radius: 6px; }
.ag-wave-bars { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; }
.ag-bar { flex: 1 1 0; min-width: 2px; border-radius: 2px; background: rgba(255,255,255,.26); transition: background .18s, box-shadow .18s; }
.ag-bar.is-played { background: linear-gradient(180deg, var(--ag-gold-bright), var(--ag-gold)); box-shadow: 0 0 8px rgba(232,193,106,.55); }
.ag-wave-head { position: absolute; top: 50%; width: 2.5px; height: 34px; border-radius: 3px; background: #FFF6DC; box-shadow: 0 0 14px rgba(232,193,106,.95); transform: translate(-50%,-50%); pointer-events: none; transition: left .08s linear; }
.ag-player.is-silent .ag-wave { opacity: .35; }
.ag-player.is-playing .ag-bar.is-played { animation: agBarPulse 1.2s ease-in-out infinite; }
@keyframes agBarPulse { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.14); } }
.ag-times { display: flex; justify-content: space-between; font-family: var(--sans); font-size: .68rem; color: rgba(255,255,255,.62); font-variant-numeric: tabular-nums; }
.ag-transport { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 11px 0 2px; position: relative; }
.ag-skip { position: relative; width: 44px; height: 44px; border-radius: 50%; background: transparent; border: 0; color: rgba(255,255,255,.82); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color .15s, background .15s; }
.ag-skip:hover { color: var(--ag-gold); background: rgba(232,193,106,.08); }
.ag-skip svg { width: 27px; height: 27px; fill: currentColor; }
.ag-skip i { position: absolute; font-style: normal; font-family: var(--sans); font-size: .5rem; font-weight: 600; top: 57%; left: 50%; transform: translate(-50%,-50%); }
.ag-skip:disabled { opacity: .35; cursor: default; }
.ag-play { flex: 0 0 62px; width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--ag-gold-bright), var(--ag-gold) 70%); border: 0; color: #1a1407; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 24px rgba(232,193,106,.42); transition: transform .12s, box-shadow .2s; }
.ag-play:hover { box-shadow: 0 8px 32px rgba(232,193,106,.58); }
.ag-play:active { transform: scale(.93); }
.ag-play:disabled { opacity: .4; cursor: default; box-shadow: none; }
.ag-play svg { width: 29px; height: 29px; fill: currentColor; }
.ag-player.is-playing .ag-play { box-shadow: 0 0 0 7px rgba(232,193,106,.14), 0 6px 24px rgba(232,193,106,.42); }
.ag-speed-wrap { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.ag-speed { min-width: 46px; height: 35px; padding: 0 11px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: var(--cream); font-family: var(--sans); font-size: .78rem; font-weight: 500; cursor: pointer; transition: border-color .15s, color .15s; }
.ag-speed:hover { border-color: var(--ag-gold); color: var(--ag-gold); }
.ag-speed:disabled { opacity: .4; cursor: default; }
.ag-speed-menu { position: absolute; right: 0; bottom: calc(100% + 10px); background: rgba(13,20,15,.98); border: 1px solid rgba(232,193,106,.26); border-radius: 13px; padding: 6px; box-shadow: 0 12px 34px rgba(0,0,0,.55); display: flex; flex-direction: column; gap: 2px; min-width: 120px; z-index: 5; }
.ag-speed-menu[hidden] { display: none; }
.ag-speed-opt { text-align: left; padding: 9px 14px; border-radius: 9px; background: transparent; border: 0; color: rgba(255,255,255,.8); font-family: var(--sans); font-size: .82rem; cursor: pointer; transition: background .12s, color .12s; }
.ag-speed-opt:hover { background: rgba(232,193,106,.1); color: #fff; }
.ag-speed-opt.is-active { color: var(--ag-gold); font-weight: 600; background: rgba(232,193,106,.08); }
.ag-nav { display: flex; gap: 9px; margin-top: 13px; }
.ag-navbtn { flex: 1; padding: 10px 6px; min-height: 42px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; color: rgba(255,255,255,.8); font-family: var(--sans); font-size: .74rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 5px; transition: border-color .15s, color .15s, background .15s; }
.ag-navbtn:hover { border-color: var(--ag-gold); color: var(--ag-gold); background: rgba(232,193,106,.05); }
.ag-navbtn--mid { flex: 1.3; letter-spacing: .02em; }

@media (min-width: 560px) { .ag-lang-grid { grid-template-columns: repeat(3, 1fr); max-width: 580px; } }
@media (min-width: 760px) { .ag-chap-grid { grid-template-columns: 1fr 1fr; gap: 20px; } .ag-chap-card { min-height: 210px; } .ag-chap-body { min-height: 210px; } }
@media (min-width: 1080px) { .ag-chap-grid { gap: 22px; } }
@media (prefers-reduced-motion: reduce) {
  #agBg { transition: opacity .3s; background-attachment: scroll; transform: none; }
  .ag-fade { animation: none; } .ag-landing-h em { animation: none; }
  .ag-chap-card::before { animation: none; background: linear-gradient(135deg, transparent, var(--ag-gold), transparent); }
  .ag-flag, .ag-chap-card, .ag-chap-cover, .ag-disp, .ag-tr-chev, .ag-bar, .ag-play { transition: none; }
  .ag-tr-word { transition: none; }
  .ag-player.is-playing .ag-bar.is-played { animation: none; }
}
/* ===== TEASER -> FULL continue popup ===== */
.ag-cont { position:fixed; left:0; right:0; bottom:calc(190px + var(--pp-cookie-h, 0px)); z-index:1300; display:flex; justify-content:center; padding:0 16px; pointer-events:none; }
.ag-cont[hidden] { display:none; }
.ag-cont-card { pointer-events:auto; position:relative; width:min(430px,100%); text-align:center; padding:22px 24px 18px; border-radius:20px; border:1px solid rgba(232,193,106,.45); background:linear-gradient(180deg, rgba(22,42,30,.97), rgba(8,16,11,.98)); box-shadow:0 28px 70px rgba(0,0,0,.62), 0 0 0 1px rgba(232,193,106,.1), 0 0 60px -20px rgba(232,193,106,.4); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); animation:agContIn .38s cubic-bezier(.2,.7,.2,1); }
@keyframes agContIn { from { opacity:0; transform:translateY(16px) scale(.97); } to { opacity:1; transform:none; } }
.ag-cont-eyebrow { display:block; font:600 .6rem/1 var(--ag-sans,'Inter',sans-serif); letter-spacing:.26em; text-transform:uppercase; color:#E8C16A; margin-bottom:9px; text-shadow:0 0 14px rgba(232,193,106,.4); }
.ag-cont-h { font:500 1.34rem/1.2 var(--ag-serif,'Cormorant Garamond',serif); color:#fff; margin:0 0 17px; }
.ag-cont-actions { display:flex; gap:11px; }
.ag-cont-btn { flex:1; cursor:pointer; border-radius:999px; padding:14px 14px; font:700 .72rem/1 var(--ag-sans,'Inter',sans-serif); letter-spacing:.1em; text-transform:uppercase; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:transform .2s, box-shadow .2s, background .2s, color .2s; }
.ag-cont-full { color:#0c1f17; background:linear-gradient(135deg,#F6E0A0,#E8C16A); border:0; box-shadow:0 8px 24px -8px rgba(232,193,106,.75); }
.ag-cont-full:hover { transform:translateY(-2px); box-shadow:0 12px 30px -8px rgba(232,193,106,.95); }
.ag-cont-full[hidden] { display:none; }
.ag-cont-next { color:#F6E2A6; background:rgba(232,193,106,.08); border:1px solid rgba(232,193,106,.5); }
.ag-cont-next:hover { background:rgba(232,193,106,.18); }
.ag-cont-replay { margin-top:13px; background:none; border:0; cursor:pointer; color:rgba(255,255,255,.6); font:600 .64rem/1 var(--ag-sans,'Inter',sans-serif); letter-spacing:.14em; text-transform:uppercase; }
.ag-cont-replay:hover { color:#E8C16A; }
.ag-cont-x { position:absolute; top:8px; right:11px; background:none; border:0; color:rgba(255,255,255,.5); font-size:1.35rem; line-height:1; cursor:pointer; }
.ag-cont-x:hover { color:#E8C16A; }
@media (max-width:600px) { .ag-cont { bottom:calc(204px + var(--pp-cookie-h, 0px)); } }
@media (prefers-reduced-motion:reduce) { .ag-cont-card { animation:none; } }

/* ===== Play the Introduction button (chapters view) ===== */
.ag-intro-btn { display:inline-flex; align-items:center; gap:9px; margin:10px auto 2px; cursor:pointer; border-radius:999px; padding:13px 26px; font:700 .68rem/1 'Inter',sans-serif; letter-spacing:.16em; text-transform:uppercase; color:#0c1f17; background:linear-gradient(135deg,#F6E0A0,#E8C16A); border:0; box-shadow:0 8px 26px -10px rgba(232,193,106,.7); transition:transform .25s, box-shadow .25s; }
.ag-intro-btn:hover { transform:translateY(-2px); box-shadow:0 12px 32px -10px rgba(232,193,106,.9); }