/* Goldie Audio Books — the Saturday Serial, gathered into books you listen to.
 *
 * A deliberately single-look surface: a lamplit shelf, not the cream page the
 * rest of /articles uses. Colours are literal hex on purpose — inside
 * /articles the parent theme also defines --gold, and var() lookups from this
 * stylesheet resolve empty there (same trap the magazine hit in Aug 2026).
 */
.gc-ab {
  --ab-page:#FBF6EC; --ab-page2:#F3E9D7; --ab-ink:#33251A; --ab-soft:#6E5C49; --ab-rule:#E2D3B8;
  background:#2B1E15; color:#FBF6EC; border-radius:14px; padding:30px 0 40px;
  font-size:18px; line-height:1.6;
  background-image:
    radial-gradient(1100px 420px at 50% -8%, rgba(255,196,110,.16), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 2px, transparent 2px 7px),
    linear-gradient(180deg,#241a12,#2B1E15 40%);
}
.gc-ab-in{max-width:1000px;margin:0 auto;padding:0 20px}
.gc-ab-head{text-align:center;padding:8px 10px 20px}
.gc-ab-eyebrow{font-size:12px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:#F5A623;margin:0 0 8px}
.gc-ab-head h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(28px,5vw,42px);line-height:1.06;margin:0;color:#FFF3DE}
.gc-ab-head h2 em{font-style:italic;color:#F5A623}
.gc-ab-sub{color:#D8C5A8;margin:12px auto 0;max-width:56ch;font-size:17px}

/* shelf */
.gc-ab-shelf{padding:26px 16px 0}
.gc-ab-books{display:flex;gap:34px;justify-content:center;align-items:flex-end;flex-wrap:wrap}
.gc-ab-plank{height:24px;margin:0 6px;border-radius:4px;
  background:linear-gradient(180deg,#7A5636,#5A3F28 40%,#3E2A1A);
  box-shadow:0 14px 26px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,220,170,.25)}
.gc-ab-book{width:196px;border:0;padding:0;background:none;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;gap:11px;transition:transform .16s ease;font:inherit;color:inherit}
.gc-ab-book:hover,.gc-ab-book:focus-visible{transform:translateY(-8px);outline:none}
.gc-ab-book:focus-visible .gc-ab-cover{box-shadow:0 0 0 4px #F5A623,0 20px 34px rgba(0,0,0,.55)}
.gc-ab-cover{width:196px;height:274px;border-radius:5px 12px 12px 5px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;padding:20px 18px 16px;text-align:left;
  box-shadow:0 20px 34px rgba(0,0,0,.55), inset -14px 0 20px rgba(0,0,0,.28)}
.gc-ab-cover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:15px;
  background:linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,.06))}
.gc-ab-spring{background:linear-gradient(155deg,#3C7F5E,#245139 60%,#1C3F2C)}
.gc-ab-cardinal{background:linear-gradient(155deg,#B84630,#8C2617 60%,#6B1B10)}
.gc-ab-kick{display:block;font-size:10px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;color:rgba(255,240,215,.75)}
.gc-ab-name{display:block;font-family:Georgia,'Times New Roman',serif;font-size:28px;line-height:1.03;color:#FFF6E6;margin:9px 0 0}
.gc-ab-rule{display:block;width:40px;height:3px;background:#F5A623;border-radius:2px;margin:12px 0 0}
.gc-ab-by{display:block;font-size:12px;color:rgba(255,240,215,.82);line-height:1.35}
.gc-ab-meta b{display:block;font-size:16px;color:#FFF0D8}
.gc-ab-meta span{font-size:14px;color:#C6B195}
.gc-ab-pill{display:inline-block;margin-top:6px;font-size:11.5px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;border-radius:999px;padding:4px 11px}
.gc-ab-pill-done{background:rgba(47,107,79,.3);color:#8FE0B4;border:1px solid rgba(143,224,180,.4)}
.gc-ab-pill-live{background:rgba(245,166,35,.18);color:#FFCE84;border:1px solid rgba(255,206,132,.45)}

/* open book */
.gc-ab-panel{background:#FBF6EC;color:#33251A;border-radius:18px;margin:28px 0 0;overflow:hidden;
  box-shadow:0 26px 50px rgba(0,0,0,.5)}
.gc-ab-top{display:flex;gap:24px;padding:26px;background:linear-gradient(180deg,#FBF6EC,#F3E9D7);border-bottom:1px solid #E2D3B8}
.gc-ab-top h3{font-family:Georgia,'Times New Roman',serif;font-size:28px;line-height:1.1;margin:0 0 4px;color:#33251A}
.gc-ab-byline{font-size:14.5px;color:#6E5C49;margin:0 0 12px}
.gc-ab-byline b{color:#B87407}
.gc-ab-syn{font-size:17px;line-height:1.62;margin:0 0 14px;max-width:62ch}
.gc-ab-facts{display:flex;gap:20px;flex-wrap:wrap;font-size:14.5px;color:#6E5C49;margin:0;padding:0;list-style:none}
.gc-ab-facts b{color:#33251A;font-variant-numeric:tabular-nums}
.gc-ab-mini{flex:0 0 auto;width:140px;height:196px;border-radius:4px 9px 9px 4px;position:relative;overflow:hidden;
  padding:15px 13px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 10px 20px rgba(80,50,10,.32)}

/* language bar */
.gc-ab-langbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 26px;background:#FFF7E7;
  border-bottom:1px solid #E2D3B8;font-size:15px;color:#6E5C49}
.gc-ab-langbar select{font:inherit;font-size:16px;padding:10px 12px;border-radius:10px;border:1.5px solid #E2D3B8;background:#fff;color:#33251A;min-height:46px}
.gc-ab-locked{background:#FFF3E0;border:1px solid #F0C489;color:#8A4B10;border-radius:999px;padding:5px 12px;font-size:13.5px;font-weight:700}

/* chapters */
.gc-ab-chapters{padding:8px 12px 16px}
.gc-ab-chhead{display:flex;justify-content:space-between;padding:12px 14px 6px}
.gc-ab-chhead span{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#6E5C49}
.gc-ab-ch{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:13px;width:100%;background:none;
  border:0;border-radius:12px;padding:14px;cursor:pointer;text-align:left;font:inherit;color:#33251A}
.gc-ab-ch+.gc-ab-ch{border-top:1px solid #E2D3B8}
.gc-ab-ch:hover,.gc-ab-ch:focus-visible{background:#fff;outline:none;box-shadow:0 0 0 2px #F5A623}
.gc-ab-ch[disabled]{opacity:.55;cursor:default}
.gc-ab-n{font-family:Georgia,'Times New Roman',serif;font-size:20px;color:#B87407;text-align:center}
.gc-ab-t{font-family:Georgia,'Times New Roman',serif;font-size:19px;line-height:1.25}
.gc-ab-s{display:block;font-family:inherit;font-size:13.5px;color:#6E5C49;margin-top:3px}
.gc-ab-len{font-size:15px;color:#6E5C49;font-variant-numeric:tabular-nums;white-space:nowrap}
.gc-ab-ch[aria-current="true"]{background:#FFF7E7}
.gc-ab-ch[aria-current="true"] .gc-ab-t{font-weight:700}
.gc-ab-free{display:inline-block;margin-left:8px;font-size:11.5px;font-weight:800;background:#E7F5EC;color:#1F6B43;
  border:1px solid #A9D9BE;border-radius:999px;padding:2px 9px;vertical-align:middle}

.gc-ab-disclosure{margin:20px 26px 0;padding:14px 16px;border-left:4px solid #F5A623;background:rgba(245,166,35,.10);
  border-radius:0 12px 12px 0;color:#E4D2B7;font-size:14.5px;line-height:1.55}
.gc-ab-disclosure b{color:#FFD79A}
.gc-ab-copy{display:block;margin-top:10px;padding-top:9px;border-top:1px solid rgba(245,166,35,.28);font-size:13.5px;color:#C6B195}

/* player */
.gc-ab-player{position:fixed;left:0;right:0;bottom:0;z-index:9998;background:#1A120C;border-top:2px solid #B87407;
  box-shadow:0 -14px 34px rgba(0,0,0,.55);transform:translateY(105%);transition:transform .22s ease}
.gc-ab-player.up{transform:translateY(0)}
.gc-ab-pin{max-width:1000px;margin:0 auto;padding:12px 20px 16px}
.gc-ab-now{display:flex;align-items:center;gap:11px;font-size:14.5px;color:#D9C4A6;margin-bottom:8px}
.gc-ab-now b{color:#FFF0D8;font-family:Georgia,'Times New Roman',serif;font-size:17px;font-weight:400}
/* A way out — and it has to LOOK like one. In the first version it was a small
   dark square that matched every other control, so it read as decoration.
   Now it carries its own colour and the word "Close", because an older reader
   should never have to guess which button stops the story. */
.gc-ab-close{margin-left:auto;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  min-width:62px;min-height:52px;padding:5px 10px;border-radius:12px;cursor:pointer;font-family:inherit;
  border:2px solid #C4705E;background:#4A1F16;color:#FFE2DA}
.gc-ab-close .x{font-size:23px;line-height:1;font-weight:700}
.gc-ab-close .l{font-size:11px;letter-spacing:.4px;color:#F0BCB0}
.gc-ab-close:hover,.gc-ab-close:focus-visible{background:#67291C;border-color:#F09580;outline:none}
.gc-ab-close:active{transform:scale(.96)}
.gc-ab-bar{height:12px;border-radius:999px;background:#3A2A1C;cursor:pointer;overflow:hidden}
.gc-ab-fill{height:100%;width:0;background:linear-gradient(90deg,#B87407,#F5A623);border-radius:999px}
.gc-ab-times{display:flex;justify-content:space-between;font-size:13.5px;color:#B9A184;margin:6px 2px 10px;font-variant-numeric:tabular-nums}
.gc-ab-controls{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap}
.gc-ab-btn{background:#2E2018;border:1.5px solid #4A3524;color:#FFEBCB;border-radius:14px;min-width:62px;min-height:58px;
  padding:6px 10px;cursor:pointer;font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.gc-ab-btn:hover,.gc-ab-btn:focus-visible{background:#3B2A1E;border-color:#F5A623;outline:none}
.gc-ab-btn .i{font-size:20px;line-height:1}
.gc-ab-btn .l{font-size:11px;color:#C4AC8D}
.gc-ab-btn.main{min-width:86px;min-height:64px;background:#F5A623;border-color:#F5A623;color:#3A2600}
.gc-ab-btn.main .l{color:#5C3D00}
.gc-ab-btn[disabled]{opacity:.4;cursor:default}
.gc-ab-sw{display:flex;align-items:center;gap:9px;background:#2E2018;border:1.5px solid #4A3524;border-radius:14px;
  padding:10px 14px;min-height:58px;cursor:pointer;color:#FFEBCB;font-size:14px}
.gc-ab-sw[aria-pressed="true"]{border-color:#F5A623;background:#3B2A1E}
.gc-ab-track{width:42px;height:23px;border-radius:999px;background:#57402C;position:relative;flex:0 0 auto}
.gc-ab-knob{position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#C9B195;transition:.15s}
.gc-ab-sw[aria-pressed="true"] .gc-ab-track{background:#B87407}
.gc-ab-sw[aria-pressed="true"] .gc-ab-knob{left:22px;background:#FFF3DE}
.gc-ab-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:190px;z-index:9999;background:#2B2118;color:#fff;
  border-radius:12px;padding:12px 18px;font-size:15.5px;box-shadow:0 8px 24px rgba(0,0,0,.35);max-width:min(460px,88vw);text-align:center}

@media (max-width:640px){
  .gc-ab-top{flex-direction:column}
  .gc-ab-mini{width:112px;height:157px}
  .gc-ab-books{gap:20px}
  .gc-ab-book,.gc-ab-cover{width:158px}
  .gc-ab-cover{height:222px}
  .gc-ab-name{font-size:23px}

  /* The player has to clear the site's fixed bottom tab bar, exactly like the
     reading dock does. Measured on an iPhone 13: the controls wrapped onto three
     rows, 313px tall, and Music + Speed landed at y=590 with the tab bar
     starting at 587 — so the two buttons Max went looking for were behind the
     menu. Two tidy rows now, lifted by the tab bar's height PLUS the safe-area
     inset (that bar is ~78px + env on a notched phone). */
  /* Lifted off bottom:0 to clear the tab bar — so the hidden translate must
     cover BOTH the player's own height AND that lift, or a ~74px sliver stays
     stuck above the tab bar and blocks the nav when you press Close. */
  .gc-ab-player{bottom:calc(74px + env(safe-area-inset-bottom));z-index:10000;
    transform:translateY(calc(105% + 74px + env(safe-area-inset-bottom)))}
  .gc-ab-player.up{transform:translateY(0)}
  .gc-ab-pin{padding:10px 12px 12px}
  .gc-ab-now{margin-bottom:6px;font-size:13px}
  .gc-ab-now b{font-size:15.5px}
  .gc-ab-times{margin:5px 2px 8px;font-size:12.5px}
  /* Row 1: the five transport keys, evenly filling the width. */
  .gc-ab-controls{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
  .gc-ab-btn{min-width:0;min-height:54px;padding:5px 2px;border-radius:12px}
  .gc-ab-btn .i{font-size:19px}
  .gc-ab-btn .l{font-size:9.5px}
  .gc-ab-btn.main{min-width:0;min-height:54px}
  /* Row 2: the three switches, side by side and always visible. */
  .gc-ab-sw{grid-row:2;min-height:48px;padding:8px 6px;font-size:12.5px;gap:6px;justify-content:center}
  #gc-ab-auto{grid-column:1 / span 2}
  #gc-ab-music{grid-column:3 / span 2}
  #gc-ab-speed{grid-column:5;grid-row:2;min-height:48px}
  .gc-ab-track{width:34px;height:19px}
  .gc-ab-knob{width:13px;height:13px}
  .gc-ab-sw[aria-pressed="true"] .gc-ab-knob{left:18px}
  .gc-ab-toast{bottom:250px}
}
/* Give the shelf room so the last chapter is not stuck under the player. */
@media (max-width:640px){ .gc-ab{padding-bottom:170px} }