/* Ported from the prototype's media.css — kept in the 'legacy' cascade layer so Tailwind utilities can override it. */
@layer legacy {
/* =========================================================
   الأترجة — المكتبة · details for a video (video.html) and a
   podcast episode (podcast.html)
   Loads after library.css, which carries the library's own video
   and audio cards used for the related items.
   ---------------------------------------------------------
   A calm editorial page, not a streaming app: an ivory hero with
   the facts and no actions; the player as the one big object (a
   rounded 16:9 frame with a cream rim and a soft glow, or a cream
   audio panel with a waveform); short notes beside a compact
   person card; related items in the library's cards; one way back.
   ========================================================= */

.md-page{
  --md-ink:   #123C35;
  --md-sub:   #5F6E67;
  --md-muted: #8A968F;
  --md-gold:  #B08F3E;
  --md-gold-2:#D4AF5A;
  --md-line:  rgba(18,60,53,.09);
  --md-out:   cubic-bezier(.16,1,.3,1);
  background:#FFFFFF;
  color:var(--md-ink);
}

.md-wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }
.md-ivory{ background:#F8F5ED; }
.md-white{ background:#FFFFFF; }
.md-warm { background:#FCFBF7; }
.md-sage { background:#EDF3EC; }
.md-cream{ background:#F5EFE3; }


/* =========================================================
   HERO
   ========================================================= */
.md-hero{ padding:140px 0 72px; }
.md-hero-in{ max-width:880px; }
.md-crumbs{ display:flex; align-items:center; gap:8px; margin:0 0 26px; font-size:14px; color:var(--md-muted); }
.md-crumbs a{ color:var(--md-sub); border-bottom:1px solid transparent; transition:border-color .3s var(--md-out); }
.md-crumbs a:hover{ border-color:var(--md-gold-2); }
.md-label{ display:inline-flex; align-items:center; gap:9px; margin:0; padding:6px 14px; border-radius:999px; font-size:14px; font-weight:600; color:var(--md-gold); background:rgba(212,175,90,.12); border:1px solid rgba(176,143,62,.22); }
.md-label span{ width:6px; height:6px; border-radius:50%; background:var(--md-gold-2); }
.md-title{
  margin:20px 0 0;
  font-size:clamp(34px, 4.4vw, 58px);
  line-height:1.25;
  font-weight:700;
  letter-spacing:0;
  color:var(--md-ink);
  text-wrap:balance;
}
.md-lead{ max-width:640px; margin:18px 0 0; font-size:clamp(16.5px, 1.3vw, 19px); line-height:1.95; color:var(--md-sub); }
.md-meta{ display:flex; flex-wrap:wrap; gap:14px 34px; margin:34px 0 0; padding:24px 0 0; list-style:none; border-top:1px solid rgba(18,60,53,.1); }
.md-meta li{ display:flex; align-items:center; gap:12px; font-size:16px; font-weight:600; }
.md-meta li > svg{ width:22px; height:22px; color:var(--md-gold); }
.md-meta li > img{ width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid #FFFDF8; box-shadow:0 0 0 1px rgba(176,143,62,.3); }
.md-meta small{ display:block; font-size:12.5px; font-weight:500; color:var(--md-muted); }


/* =========================================================
   VIDEO PLAYER
   ========================================================= */
.md-stage{ padding:56px 0 100px; }
.vp{
  position:relative;
  isolation:isolate;
  aspect-ratio:16 / 9;
  border-radius:30px;
  overflow:hidden;
  background:#0E2721;
  border:6px solid #FFFDF8;
  box-shadow:
    0 0 0 1px rgba(176,143,62,.22),
    0 40px 90px -40px rgba(18,60,53,.55),
    0 0 120px -30px rgba(212,175,90,.35);                         /* a soft ambient glow */
}
.vp video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#0E2721; }
.vp-shade{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(14,39,33,.15) 0%, rgba(14,39,33,0) 40%, rgba(14,39,33,.7) 100%);
  transition:opacity .5s var(--md-out);
}
.vp-big{
  position:absolute; left:50%; top:50%; z-index:2;
  translate:-50% -50%;
  display:grid; place-items:center;
  width:96px; height:96px;
  border:0; border-radius:50%;
  color:var(--md-ink);
  background:rgba(255,253,248,.94);
  cursor:pointer;
  box-shadow:0 20px 40px -14px rgba(0,0,0,.45);
  transition:transform .4s var(--md-out), opacity .4s var(--md-out);
}
.vp-big svg{ width:36px; height:36px; }
.vp-big::before{                                                  /* a very gentle pulse */
  content:""; position:absolute; inset:-1px;
  border-radius:50%;
  border:2px solid rgba(255,253,248,.7);
  animation:md-pulse 3s ease-out infinite;
}
@keyframes md-pulse{ from{ transform:scale(1); opacity:.8; } to{ transform:scale(1.45); opacity:0; } }
.vp-big:hover{ transform:scale(1.05); }
.vp-big:focus-visible{ outline:3px solid var(--md-gold-2); outline-offset:4px; }

.vp-bar{
  position:absolute; z-index:3;
  inset-inline:18px; bottom:18px;
  display:flex; align-items:center; gap:12px;
  padding:10px 14px;
  border-radius:20px;
  color:#F5F0E6;
  background:rgba(14,39,33,.62);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(245,240,230,.12);
  transition:opacity .4s var(--md-out), transform .4s var(--md-out);
}
.vp-btn{
  display:grid; place-items:center;
  min-width:38px; height:38px;
  padding:0 6px;
  border:0; border-radius:12px;
  font:inherit; font-size:14px; font-weight:600;
  color:inherit; background:none;
  cursor:pointer;
  transition:background-color .3s var(--md-out);
}
.vp-btn:hover{ background:rgba(245,240,230,.1); }
.vp-btn:focus-visible{ outline:2px solid var(--md-gold-2); }
.vp-btn svg{ width:22px; height:22px; }
.vp-speed{ min-width:46px; }
.vp-time{ font-size:13.5px; font-variant-numeric:tabular-nums; color:rgba(245,240,230,.85); white-space:nowrap; }
.vp-vol{ display:flex; align-items:center; gap:4px; }
.vp-vol input{ width:80px; }
.vp-prog{ flex:1; min-width:60px; }

/* ranges: a thin track, gold up to the value (--p set by media.js) */
.vp input[type=range], .ap input[type=range]{
  --p:0%;
  -webkit-appearance:none; appearance:none;
  height:4px;
  border-radius:99px;
  background:linear-gradient(to right, var(--md-gold-2) var(--p), rgba(245,240,230,.25) var(--p));
  cursor:pointer;
}
.vp input[type=range]::-webkit-slider-thumb, .ap input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:#FFFDF8; box-shadow:0 0 0 3px rgba(212,175,90,.45);
}
.vp input[type=range]::-moz-range-thumb, .ap input[type=range]::-moz-range-thumb{ width:14px; height:14px; border:0; border-radius:50%; background:#FFFDF8; }
.vp input[type=range]:focus-visible, .ap input[type=range]:focus-visible{ outline:2px solid var(--md-gold-2); outline-offset:4px; }

.i-off{ display:none; }
.is-playing [data-vp-toggle] .i-on, .ap.is-playing .ap-play .i-on, .is-muted .i-on{ display:none; }
.is-playing [data-vp-toggle] .i-off, .ap.is-playing .ap-play .i-off, .is-muted .i-off{ display:block; }

/* playing: the big button and shade step back; the bar rests until the pointer moves */
.vp.is-started .vp-big{ opacity:0; pointer-events:none; transform:scale(.9); }
.vp.is-started .vp-shade{ opacity:.4; }
.vp.is-playing.is-idle .vp-bar{ opacity:0; transform:translateY(8px); }
.vp.is-playing.is-idle{ cursor:none; }

.vp-note{
  position:absolute; z-index:4;
  left:50%; top:calc(50% + 74px);
  translate:-50% 0;
  margin:0; padding:8px 16px;
  border-radius:999px;
  font-size:14px;
  color:var(--md-ink);
  background:rgba(255,253,248,.94);
}
.vp-note[hidden]{ display:none; }

.vp:fullscreen{ border:0; border-radius:0; }


/* =========================================================
   AUDIO PLAYER
   ========================================================= */
.ap{
  display:grid;
  grid-template-columns:200px minmax(0, 1fr);
  gap:32px;
  align-items:center;
  padding:28px;
  border-radius:32px;
  background:linear-gradient(165deg, #FBF6EA 0%, #F4ECDA 100%);
  border:1px solid rgba(176,143,62,.2);
  box-shadow:0 40px 80px -50px rgba(18,60,53,.45);
}
.ap-art{ width:200px; aspect-ratio:1; border-radius:24px; object-fit:cover; box-shadow:0 18px 36px -20px rgba(18,60,53,.5); }
.ap-main{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.ap-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.ap-title small{ display:block; font-size:13px; font-weight:600; color:var(--md-gold); }
.ap-title b{ display:block; margin-top:4px; font-size:20px; line-height:1.5; }
.ap-speed{ display:flex; flex:none; padding:4px; border-radius:999px; background:rgba(18,60,53,.06); }
.ap-speed button{ min-width:44px; padding:6px 10px; border:0; border-radius:999px; font:inherit; font-size:13.5px; font-weight:600; color:var(--md-sub); background:none; cursor:pointer; transition:background-color .3s var(--md-out), color .3s var(--md-out); }
.ap-speed button[aria-pressed="true"]{ color:#F5F0E6; background:var(--md-ink); }
.ap-speed button:focus-visible{ outline:2px solid var(--md-gold-2); }

/* waveform: bars built by media.js; played bars turn gold, the bars at the head breathe while playing */
.ap-wave{ display:flex; align-items:center; gap:3px; height:72px; cursor:pointer; touch-action:none; }
.ap-wave:focus-visible{ outline:2px solid var(--md-gold-2); outline-offset:6px; border-radius:8px; }
.ap-wave i{
  flex:1; min-width:2px;
  height:var(--h);
  border-radius:3px;
  background:rgba(18,60,53,.18);
  transform-origin:50% 50%;
  transition:background-color .25s linear;
}
.ap-wave i.is-played{ background:var(--md-gold-2); }
.ap.is-playing .ap-wave i.is-head{ background:var(--md-gold); animation:md-breathe .9s ease-in-out infinite alternate; }
.ap.is-playing .ap-wave i.is-head:nth-child(odd){ animation-delay:-.45s; }
@keyframes md-breathe{ from{ transform:scaleY(.75); } to{ transform:scaleY(1.15); } }

.ap-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.ap-time{ min-width:52px; font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--md-sub); }
.ap-ctrls{ display:flex; align-items:center; gap:14px; }
.ap-play{
  display:grid; place-items:center;
  width:64px; height:64px;
  border:0; border-radius:50%;
  color:#F5F0E6;
  background:var(--md-ink);
  cursor:pointer;
  box-shadow:0 14px 30px -12px rgba(18,60,53,.6);
  transition:transform .35s var(--md-out), background-color .3s var(--md-out);
}
.ap-play svg{ width:28px; height:28px; }
.ap-play:hover{ transform:scale(1.05); background:#174A41; }
.ap-skip{ position:relative; display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:50%; color:var(--md-ink); background:rgba(18,60,53,.06); cursor:pointer; transition:background-color .3s var(--md-out); }
.ap-skip svg{ width:24px; height:24px; }
.ap-skip i{ position:absolute; font-style:normal; font-size:8.5px; font-weight:700; top:16px; }
.ap-skip:hover{ background:rgba(18,60,53,.12); }
.ap-play:focus-visible, .ap-skip:focus-visible{ outline:2px solid var(--md-gold-2); outline-offset:3px; }
.ap-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.ap-vol{ display:flex; align-items:center; gap:8px; color:var(--md-sub); }
.ap-vol svg{ width:20px; height:20px; }
.ap-vol input{ width:110px; background:linear-gradient(to right, var(--md-gold-2) var(--p), rgba(18,60,53,.15) var(--p)) !important; }
.ap-note{ margin:0; font-size:13px; color:var(--md-muted); }
.ap-note[hidden]{ display:none; }

/* podcast hero: words right, artwork left */
.pd-hero{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(260px, 400px); gap:64px; align-items:center; }
.pd-art{
  position:relative;
  margin:0;
  aspect-ratio:4 / 5;
  border-radius:32px;
  overflow:hidden;
  border:6px solid #FFFDF8;
  box-shadow:0 0 0 1px rgba(176,143,62,.22), 0 40px 80px -40px rgba(18,60,53,.5);
  rotate:-2deg;
}
.pd-art img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.pd-art figcaption{
  position:absolute; inset-inline:16px; bottom:16px;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  border-radius:18px;
  color:#F5F0E6;
  background:rgba(14,39,33,.7);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-size:13.5px;
}
.pd-art figcaption b{ color:#E3CF8D; }


/* =========================================================
   NOTES · TOPICS · PERSON
   ========================================================= */
.md-sec{ padding:110px 0; }
.md-cols{ display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:72px; align-items:start; }
.md-read{ display:flex; flex-direction:column; gap:56px; max-width:720px; }
.md-h{ margin:0 0 18px; font-size:clamp(24px, 2.2vw, 32px); font-weight:700; color:var(--md-ink); }
.md-block p{ margin:0 0 14px; font-size:17px; line-height:2; color:var(--md-sub); }

.md-topics{ counter-reset:t; display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none; }
.md-topics li{
  counter-increment:t;
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px 10px 14px;
  border-radius:999px;
  font-size:15.5px; font-weight:600;
  background:#EEF4F0;
  border:1px solid rgba(168,199,181,.6);
}
.md-topics li::before{ content:counter(t); display:grid; place-items:center; width:24px; height:24px; border-radius:50%; font-size:12px; font-weight:700; color:#FFFDF8; background:var(--md-ink); }

.md-points{ display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.md-points li{ position:relative; padding:14px 18px; padding-inline-start:44px; border-radius:16px; font-size:16px; font-weight:600; background:#FFFFFF; border:1px solid var(--md-line); }
.md-points li::before{ content:""; position:absolute; inset-inline-start:20px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:2px; background:var(--md-gold-2); transform:rotate(45deg); }

.md-person{
  position:sticky; top:110px;
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  padding:26px;
  border-radius:28px;
  background:#FFFFFF;
  border:1px solid var(--md-line);
  box-shadow:0 24px 50px -40px rgba(18,60,53,.45);
}
.md-person img{ width:76px; height:76px; margin-bottom:10px; border-radius:50%; object-fit:cover; border:3px solid #FFFDF8; box-shadow:0 0 0 1px rgba(176,143,62,.35); }
.md-person-k{ margin:0; font-size:12.5px; font-weight:600; color:var(--md-gold); }
.md-person b{ font-size:19px; }
.md-person > span{ font-size:14.5px; font-weight:500; color:var(--md-sub); }
.md-person > p{ margin:8px 0 0; font-size:14.5px; line-height:1.85; color:var(--md-muted); }
.md-link{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding-bottom:3px; font-size:15px; font-weight:600; color:var(--md-ink); border-bottom:1px solid rgba(176,143,62,.5); transition:gap .35s var(--md-out), border-color .35s var(--md-out); }
.md-link svg{ width:16px; height:16px; color:var(--md-gold); }
.md-link:hover{ gap:12px; border-color:var(--md-gold); }

/* chapters: each seeks the player */
.pd-chapters{ display:grid; margin:0; padding:0; list-style:none; border-top:1px solid rgba(18,60,53,.1); }
.pd-chapters li{ border-bottom:1px solid rgba(18,60,53,.1); }
.pd-chapters button{
  display:flex; align-items:center; gap:18px;
  width:100%;
  padding:15px 12px;
  border:0; border-radius:12px;
  font:inherit; font-size:16px; font-weight:600; text-align:start;
  color:var(--md-ink); background:none;
  cursor:pointer;
  transition:background-color .3s var(--md-out), padding .35s var(--md-out);
}
.pd-chapters span{ min-width:54px; font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--md-gold); }
.pd-chapters button:hover{ background:rgba(168,199,181,.18); padding-inline-start:18px; }
.pd-chapters button:focus-visible{ outline:2px solid var(--md-gold-2); }
.pd-chapters button.is-on{ background:rgba(212,175,90,.14); }
.pd-chapters button.is-on::after{ content:"يُعرض الآن"; margin-inline-start:auto; font-size:12.5px; font-weight:600; color:var(--md-gold); }

/* transcript: closed by default, opens with a smooth height */
.pd-trans{ border-radius:24px; background:#FFFFFF; border:1px solid var(--md-line); overflow:hidden; }
.pd-trans-btn{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%;
  padding:22px 24px;
  border:0;
  font:inherit; text-align:start;
  color:var(--md-ink); background:none;
  cursor:pointer;
}
.pd-trans-btn b{ display:block; font-size:20px; }
.pd-trans-btn small{ display:block; margin-top:4px; font-size:14px; color:var(--md-muted); }
.pd-trans-btn svg{ width:22px; height:22px; flex:none; color:var(--md-gold); transition:transform .45s var(--md-out); }
.pd-trans-btn:focus-visible{ outline:2px solid var(--md-gold-2); outline-offset:-4px; }
.pd-trans-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--md-out); }
.pd-trans-body > div{ overflow:hidden; padding:0 24px; }
.pd-trans.is-open .pd-trans-body{ grid-template-rows:1fr; }
.pd-trans.is-open .pd-trans-btn svg{ transform:rotate(180deg); }
.pd-trans-body p{ margin:0 0 14px; font-size:16px; line-height:2; color:var(--md-sub); }
.pd-trans-body p:last-child{ margin-bottom:24px; }
.pd-trans-body p b{ margin-inline-end:10px; font-size:13px; color:var(--md-gold); }


/* =========================================================
   RELATED · CLOSING
   ========================================================= */
.md-rel{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:22px; align-items:start; margin-top:30px; }
.md-sec--end{ padding:90px 0 110px; }
.md-end{ max-width:640px; margin:0 auto; text-align:center; }
.md-end h2{ margin:0; font-size:clamp(28px, 3vw, 42px); font-weight:700; }
.md-end p{ margin:14px 0 28px; font-size:17px; line-height:1.9; color:var(--md-sub); }
.md-cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 28px;
  border-radius:999px;
  font-size:16px; font-weight:600;
  color:#F8F5ED;
  background:var(--md-ink);
  box-shadow:0 14px 30px -14px rgba(18,60,53,.6);
  transition:transform .35s var(--md-out), background-color .35s var(--md-out);
}
.md-cta svg{ width:18px; height:18px; color:var(--md-gold-2); transition:transform .35s var(--md-out); }
.md-cta:hover{ transform:translateY(-2px); background:#174A41; }
.md-cta:hover svg{ transform:translateX(-4px); }
.md-cta:focus-visible{ outline:2px solid var(--md-gold-2); outline-offset:4px; }


/* =========================================================
   MOTION (media.js adds .md-js, then .is-in as things enter)
   ========================================================= */
.md-js .md-up{ opacity:0; translate:0 22px; }
.md-js .md-up.is-in{ opacity:1; translate:0 0; transition:opacity .85s var(--md-out) var(--d, 0s), translate .85s var(--md-out) var(--d, 0s); }
.md-js .md-reveal{ opacity:0; scale:.96; }
.md-js .md-reveal.is-in{ opacity:1; scale:1; transition:opacity 1.1s var(--md-out) .15s, scale 1.1s var(--md-out) .15s; }


/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .md-cols{ grid-template-columns:1fr; gap:48px; }
  .md-person{ position:static; max-width:520px; }
  .md-rel{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .pd-hero{ grid-template-columns:minmax(0, 1fr) 280px; gap:40px; }
}
@media (max-width:720px){
  .md-wrap{ padding:0 16px; }
  .md-hero{ padding:112px 0 48px; }
  .md-meta{ gap:16px 24px; }
  .md-stage{ padding:32px 0 64px; }
  .vp{ border-radius:20px; border-width:4px; }
  .vp-big{ width:72px; height:72px; }
  .vp-big svg{ width:28px; height:28px; }
  .vp-bar{ inset-inline:8px; bottom:8px; gap:4px; padding:6px 8px; border-radius:14px; }
  .vp-vol input, .vp-speed{ display:none; }
  .vp-time{ font-size:12px; }
  .md-sec{ padding:72px 0; }
  .md-rel{ grid-template-columns:1fr; }
  .pd-hero{ grid-template-columns:1fr; gap:32px; }
  .pd-art{ max-width:300px; rotate:0deg; }
  .ap{ grid-template-columns:1fr; gap:20px; padding:20px; border-radius:24px; }
  .ap-art{ width:96px; }
  .ap-top{ flex-direction:column; }
  .ap-wave{ height:56px; gap:2px; }
  .md-cta{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .md-js .md-up, .md-js .md-reveal{ opacity:1; translate:none; scale:none; }
  .vp-big::before, .ap.is-playing .ap-wave i.is-head{ animation:none; }
  .pd-trans-body{ transition:none; }
}


/* =========================================================
   STANDALONE AUDIO (audio.html) — the same player, a deeper
   panel so it reads as its own thing: forest ground, ivory type,
   gold waveform; the cover leans in a little and moves 2–3px
   when the pointer finds it
   ========================================================= */
.md-sec--last{ padding-bottom:130px; }
.au-art{ aspect-ratio:1; }
.au-art img{ object-position:50% 50%; }

.ap--deep{
  color:#F5F0E6;
  background:
    radial-gradient(60% 90% at 85% 0%, rgba(227,207,141,.16), transparent 70%),
    linear-gradient(160deg, #1E5045 0%, #123C35 100%);
  border-color:rgba(227,207,141,.22);
  box-shadow:0 40px 80px -40px rgba(18,60,53,.7);
}
.ap-cover{ display:block; transition:transform .5s var(--md-out); }
.ap-cover .ap-art{ display:block; box-shadow:0 22px 40px -20px rgba(0,0,0,.6), 0 0 0 4px rgba(245,240,230,.12); }
.ap:hover .ap-cover{ transform:translate(-3px, -3px) rotate(-1deg); }
.ap--deep .ap-title small{ color:#E3CF8D; }
.ap--deep .ap-speed{ background:rgba(245,240,230,.08); }
.ap--deep .ap-speed button{ color:rgba(245,240,230,.75); }
.ap--deep .ap-speed button[aria-pressed="true"]{ color:#123C35; background:#E3CF8D; }
.ap--deep .ap-wave i{ background:rgba(245,240,230,.2); }
.ap--deep .ap-wave i.is-played{ background:#E3CF8D; }
.ap--deep.is-playing .ap-wave i.is-head{ background:#F5F0E6; }
.ap--deep .ap-time{ color:rgba(245,240,230,.8); }
.ap--deep .ap-play{ color:#123C35; background:#E3CF8D; box-shadow:0 14px 30px -12px rgba(0,0,0,.5); }
.ap--deep .ap-play:hover{ background:#EAD9A2; }
.ap--deep .ap-skip{ color:#F5F0E6; background:rgba(245,240,230,.08); }
.ap--deep .ap-skip:hover{ background:rgba(245,240,230,.16); }
.ap--deep .ap-vol{ color:rgba(245,240,230,.75); }
.ap--deep .ap-vol input{ background:linear-gradient(to right, #E3CF8D var(--p), rgba(245,240,230,.2) var(--p)) !important; }
.ap--deep .ap-note{ color:rgba(245,240,230,.6); }
/* a slow idle ripple across the waveform, so it never feels dead */
.ap--deep:not(.is-playing) .ap-wave i{ animation:md-idle 3.6s ease-in-out infinite; animation-delay:calc(var(--k, 0) * -40ms); }
@keyframes md-idle{ 0%, 100%{ transform:scaleY(1); } 50%{ transform:scaleY(.86); } }
/* the play button eases between its two icons */
.ap-play svg{ transition:transform .35s var(--md-out), opacity .35s var(--md-out); }
.ap-play:active svg{ transform:scale(.88); }


/* =========================================================
   ARTICLE (article.html) — the article is the hero
   ========================================================= */
.ar-progress{ position:fixed; z-index:200; inset-inline:0; top:0; height:3px; pointer-events:none; }
.ar-progress i{ display:block; height:100%; width:100%; background:linear-gradient(to left, #B08F3E, #D4AF5A); transform-origin:100% 50%; transform:scaleX(0); }

.ar-col{ max-width:780px; margin:0 auto; padding:0 28px; }
.ar-head{ padding:140px 0 56px; }
.ar-title{
  margin:20px 0 0;
  font-size:clamp(34px, 4.6vw, 60px);
  line-height:1.3;
  font-weight:700;
  letter-spacing:0;
  color:var(--md-ink);
  text-wrap:balance;
}
.ar-intro{ margin:20px 0 0; font-size:clamp(18px, 1.6vw, 22px); line-height:1.85; color:var(--md-sub); }
.ar-meta{ margin-top:30px; }

.ar-cover{
  margin:0;
  padding:0 max(28px, calc((100% - 1124px) / 2));      /* full-width ground, 1124px picture */
  background:linear-gradient(180deg, #F8F5ED 50%, #FFFFFF 50%);
}
.ar-cover img{
  display:block;
  width:100%; aspect-ratio:2 / 1;
  object-fit:cover;
  border-radius:32px;
  box-shadow:0 40px 80px -50px rgba(18,60,53,.5);
}

/* the reading column */
.ar-body{ padding-top:64px; padding-bottom:100px; font-size:19px; line-height:2.1; color:#3E4D47; }
.ar-body > p{ margin:0 0 22px; }
.ar-lede{ font-size:21px; line-height:2; color:var(--md-ink); }
.ar-body h2{ margin:56px 0 16px; font-size:clamp(25px, 2.4vw, 31px); line-height:1.5; font-weight:700; color:var(--md-ink); }
.ar-body > h2:first-child{ margin-top:0; }
.ar-body h3{ margin:32px 0 10px; font-size:21px; line-height:1.6; font-weight:700; color:var(--md-ink); }
.ar-body h3::before{ content:""; display:inline-block; width:8px; height:8px; margin-inline-end:12px; border-radius:2px; background:var(--md-gold-2); transform:rotate(45deg) translateY(-3px); }
.ar-body ul{ display:grid; gap:12px; margin:0 0 26px; padding:0; list-style:none; }
.ar-body ul li{ position:relative; padding-inline-start:26px; }
.ar-body ul li::before{ content:""; position:absolute; inset-inline-start:4px; top:.95em; width:8px; height:8px; border-radius:50%; background:#A8C7B5; }
.ar-body b{ color:var(--md-ink); }
.ar-body p a{ color:var(--md-ink); font-weight:600; text-decoration:underline; text-decoration-color:var(--md-gold-2); text-underline-offset:5px; }
.ar-body p a:hover{ color:var(--md-gold-2); }

.ar-quote{
  position:relative;
  margin:52px 0;
  padding:8px 0;
  padding-inline-start:34px;
  border-inline-start:3px solid var(--md-gold-2);
}
.ar-quote p{ margin:0; font-size:clamp(24px, 2.6vw, 32px); line-height:1.65; font-weight:600; color:var(--md-ink); }
.ar-quote::before{ content:"”"; position:absolute; inset-inline-start:30px; top:-46px; font-size:96px; line-height:1; color:rgba(212,175,90,.35); font-family:Georgia, serif; }

.ar-note{
  margin:36px 0;
  padding:22px 26px;
  border-radius:22px;
  background:#EEF4F0;
  border:1px solid rgba(168,199,181,.6);
}
.ar-note p{ margin:0; font-size:17.5px; line-height:2; color:var(--md-ink); }
.ar-note .ar-note-k{ margin-bottom:6px; font-size:13.5px; font-weight:700; color:#4F7B63; }

.ar-inline{ margin:44px 0; }
.ar-inline img{ display:block; width:100%; aspect-ratio:7 / 4; object-fit:cover; border-radius:24px; }
.ar-inline figcaption{ margin-top:12px; font-size:14.5px; line-height:1.8; text-align:center; color:var(--md-muted); }

.ar-take{
  margin:56px 0 0;
  padding:30px 32px;
  border-radius:26px;
  background:#FBF5E6;
  border:1px solid rgba(176,143,62,.25);
}
.ar-take h2{ margin:0 0 14px; font-size:22px; }
.ar-take ol{ counter-reset:k; display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.ar-take li{ counter-increment:k; display:flex; align-items:baseline; gap:14px; font-size:17.5px; line-height:1.8; color:var(--md-ink); }
.ar-take li::before{ content:counter(k); flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; font-size:13px; font-weight:700; color:#FFFDF8; background:var(--md-ink); transform:translateY(5px); }

.ar-author{
  display:flex; align-items:flex-start; gap:20px;
  margin-top:64px;
  padding:28px;
  border-radius:28px;
  background:#FCFBF7;
  border:1px solid var(--md-line);
  font-size:16px; line-height:1.9;
}
.ar-author img{ width:84px; height:84px; flex:none; border-radius:50%; object-fit:cover; border:3px solid #FFFDF8; box-shadow:0 0 0 1px rgba(176,143,62,.35); }
.ar-author b{ display:block; font-size:20px; color:var(--md-ink); }
.ar-author > div > span{ display:block; font-size:15px; font-weight:500; color:var(--md-sub); }
.ar-author > div > p:not(.md-person-k){ margin:8px 0 0; font-size:15.5px; color:var(--md-muted); }
.ar-author .md-link{ margin-top:12px; }

@media (max-width:720px){
  .ar-col{ padding:0 16px; }
  .ar-head{ padding:112px 0 40px; }
  .ar-cover{ padding:0 16px; }
  .ar-cover img{ aspect-ratio:4 / 3; border-radius:22px; }
  .ar-body{ padding-top:44px; padding-bottom:72px; font-size:17.5px; }
  .ar-lede{ font-size:19px; }
  .ar-quote{ padding-inline-start:22px; }
  .ar-take{ padding:24px 20px; }
  .ar-author{ flex-direction:column; }
}
@media (prefers-reduced-motion:reduce){
  .ap--deep:not(.is-playing) .ap-wave i{ animation:none; }
  .ap-cover{ transition:none; }
}


/* =========================================================
   BOOK (book.html) — a quiet scholarly page, no store
   The cover is a calm book: a little turned (8°), page edges at its
   side, a soft floor shadow, floating 6px on a slow loop.
   ========================================================= */
.bk-hero{ padding-bottom:90px; background:radial-gradient(50% 70% at 20% 50%, #F4EAD5 0%, rgba(244,234,213,0) 70%), #F8F5ED; }
.bk-by{ margin:10px 0 0; font-size:20px; font-weight:600; color:var(--md-gold); }
.bk-facts{ display:grid; grid-template-columns:repeat(5, auto); justify-content:start; gap:12px 30px; margin:30px 0 0; padding:22px 0 0; border-top:1px solid rgba(18,60,53,.1); }
.bk-facts dt{ font-size:12.5px; font-weight:500; color:var(--md-muted); }
.bk-facts dd{ margin:4px 0 0; font-size:16px; font-weight:600; }
.bk-act{ margin-top:32px; }
.bk-act [hidden]{ display:none; }
.bk-soon{ display:inline-flex; align-items:center; gap:10px; margin:0; padding:10px 18px; border-radius:999px; font-size:14.5px; color:var(--md-sub); background:rgba(18,60,53,.05); border:1px dashed rgba(18,60,53,.18); }

.bk-stage{ position:relative; display:grid; place-items:center; perspective:1400px; padding:20px 0 40px; }
.bk-book{
  position:relative;
  width:min(100%, 330px);
  aspect-ratio:5 / 7;
  transform-style:preserve-3d;
  transform:rotateY(-14deg) rotateX(2deg);
}
.bk-float .bk-book.is-in{ animation:bk-float 6s ease-in-out 1.2s infinite alternate; }
@keyframes bk-float{ to{ translate:0 -6px; } }
.bk-cover{
  position:absolute; inset:0;
  overflow:hidden;
  border-radius:6px 16px 16px 6px;
  box-shadow:inset 6px 0 10px -4px rgba(0,0,0,.45), 0 30px 50px -24px rgba(18,60,53,.55);
  background:#123C35;
}
.bk-cover img{ width:100%; height:100%; object-fit:cover; filter:saturate(.85) brightness(.9); }
.bk-cover::after{               /* a spine crease and a soft sheen */
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 88%, rgba(0,0,0,.28) 92%, rgba(255,255,255,.12) 95%, rgba(0,0,0,.2) 100%),
    linear-gradient(120deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 40%);
}
.bk-band{
  position:absolute; inset-inline:18px; bottom:24px; z-index:1;
  display:flex; flex-direction:column; gap:4px;
  padding:14px 16px;
  border-radius:10px;
  text-align:center;
  color:#F5F0E6;
  background:rgba(14,39,33,.78);
  border:1px solid rgba(227,207,141,.45);
}
.bk-band b{ font-size:21px; color:#E3CF8D; }
.bk-band small{ font-size:13px; }
.bk-pages{              /* the page block, seen past the cover's edge */
  position:absolute; top:6px; bottom:6px; left:-12px; width:14px;
  border-radius:3px 0 0 3px;
  background:repeating-linear-gradient(90deg, #F8F2E2 0 2px, #E9DFC8 2px 3px);
  transform:rotateY(-70deg); transform-origin:100% 50%;
}
.bk-shadow{ position:absolute; bottom:12px; width:62%; height:22px; border-radius:50%; background:radial-gradient(closest-side, rgba(18,60,53,.28), transparent); filter:blur(4px); }

.bk-cols{ display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:72px; align-items:start; }
.bk-toc{ display:grid; gap:12px; }
.bk-part{ border-radius:22px; background:#FFFFFF; border:1px solid var(--md-line); overflow:hidden; }
.bk-part > button{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; padding:18px 22px; border:0; font:inherit; text-align:start; color:var(--md-ink); background:none; cursor:pointer; }
.bk-part > button b{ display:block; font-size:18px; }
.bk-part > button small{ display:block; margin-top:2px; font-size:13.5px; color:var(--md-muted); }
.bk-part > button svg{ width:20px; height:20px; flex:none; color:var(--md-gold); transition:transform .45s var(--md-out); }
.bk-part > button:focus-visible{ outline:2px solid var(--md-gold-2); outline-offset:-4px; }
.bk-part-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--md-out); }
.bk-part-body > ol{ overflow:hidden; margin:0; padding:0 22px; list-style:none; counter-reset:b; }
.bk-part.is-open .bk-part-body{ grid-template-rows:1fr; }
.bk-part.is-open > button svg{ transform:rotate(180deg); }
.bk-part li{ counter-increment:b; display:flex; align-items:baseline; gap:14px; padding:11px 0; border-top:1px solid var(--md-line); font-size:16px; }
.bk-part li:last-child{ margin-bottom:10px; }
.bk-part li::before{ content:counter(b, arabic-indic); min-width:22px; font-size:13.5px; font-weight:600; color:var(--md-gold); }

.bk-author{ position:sticky; top:110px; padding:28px; border-radius:28px; background:#FBF5E6; border:1px solid rgba(176,143,62,.22); }
.bk-author h2{ margin:4px 0 2px; font-size:24px; font-weight:700; }
.bk-author > span{ font-size:14px; color:var(--md-gold); font-weight:600; }
.bk-author > p:last-child{ margin:14px 0 0; font-size:15.5px; line-height:2; color:var(--md-sub); }


/* =========================================================
   KNOWLEDGE CARD (card.html) — the card is the page
   ========================================================= */
.kc-hero{ padding:130px 0 80px; text-align:center; }
.kc-crumbs{ justify-content:center; }
.kc-stage{ position:relative; max-width:760px; margin:10px auto 0; perspective:1200px; }

.kc{
  --kc-bg:#F5EFE3; --kc-ink:#123C35; --kc-acc:#B08F3E; --kc-line:rgba(176,143,62,.3);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  color:var(--kc-ink);
  background:var(--kc-bg);
  border:1px solid var(--kc-line);
}
.kc::before{                    /* the eight-point star, faint, in a corner */
  content:""; position:absolute; z-index:-1;
  width:260px; height:260px; top:-80px; inset-inline-end:-80px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23B08F3E' stroke-width='.9'%3E%3Crect x='14' y='14' width='36' height='36'/%3E%3Crect x='14' y='14' width='36' height='36' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='9'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  opacity:.16;
}
.kc--quote     { --kc-bg:#F5EFE3; }
.kc--definition{ --kc-bg:#E7F0EA; --kc-acc:#4F7B63; --kc-line:rgba(79,123,99,.25); }
.kc--lesson    { --kc-bg:#F3E6C4; --kc-acc:#8F6F22; }
.kc--reflection{ --kc-bg:#E6ECDD; --kc-acc:#5E7246; --kc-line:rgba(94,114,70,.25); }
.kc--summary   { --kc-bg:#FBF8F0; --kc-acc:#B08F3E; }
.kc--rule      { --kc-bg:#EDE7DA; --kc-acc:#7A6A3F; }
.kc--reminder  { --kc-bg:#EEF4F0; --kc-acc:#4F7B63; --kc-line:rgba(79,123,99,.25); }

.kc--big{
  --tx:0deg; --ty:0deg;
  min-height:440px;
  padding:64px 56px 48px;
  border-radius:40px;
  box-shadow:0 50px 90px -50px rgba(18,60,53,.5), 0 2px 0 rgba(255,255,255,.7) inset;
  transform:rotateX(var(--tx)) rotateY(var(--ty));
  transition:transform .6s var(--md-out);
}
.kc-label{ padding:6px 16px; border-radius:999px; font-size:14px; font-weight:700; color:var(--kc-acc); background:rgba(255,255,255,.65); border:1px solid var(--kc-line); }
.kc-text{ max-width:560px; margin:0; font-size:clamp(26px, 3.2vw, 38px); line-height:1.75; font-weight:600; text-wrap:balance; }
.kc-foot{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px 18px; font-size:15px; }
.kc-src{ color:rgba(18,60,53,.7); }
.kc-src::before{ content:"— "; }
.kc-topic{ padding:4px 12px; border-radius:999px; font-size:13.5px; font-weight:600; color:var(--kc-ink); background:rgba(18,60,53,.06); }
.kc-mark{ position:absolute; bottom:18px; inset-inline-start:26px; font-size:12px; font-weight:600; letter-spacing:.02em; color:rgba(18,60,53,.3); }

/* gold sparks */
.kc-spark{ position:absolute; z-index:2; fill:#D4AF5A; opacity:0; pointer-events:none; }
.kc-spark--a{ width:22px; height:22px; top:-12px; inset-inline-end:12%; }
.kc-spark--b{ width:14px; height:14px; top:22%; inset-inline-start:-18px; }
.kc-spark--c{ width:18px; height:18px; bottom:-10px; inset-inline-start:22%; }
.kc-go .kc-spark{ animation:kc-twinkle 3.2s ease-in-out infinite; }
.kc-go .kc-spark--a{ animation-delay:1.1s; }
.kc-go .kc-spark--b{ animation-delay:1.9s; }
.kc-go .kc-spark--c{ animation-delay:2.6s; }
@keyframes kc-twinkle{ 0%, 100%{ opacity:0; transform:scale(.5) rotate(0deg); } 45%{ opacity:1; transform:scale(1) rotate(45deg); } 70%{ opacity:.6; transform:scale(.85) rotate(60deg); } }

/* the card turns into place */
.kc-go .kc--big{ animation:kc-in 1s var(--md-out) both; }
@keyframes kc-in{ from{ opacity:0; translate:0 24px; rotate:-3deg; scale:.96; } to{ opacity:1; translate:0 0; rotate:0deg; scale:1; } }

/* small icon actions */
.kc-actions{ display:flex; justify-content:center; gap:10px; margin-top:28px; }
.kc-act{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px;
  border:1px solid rgba(18,60,53,.12); border-radius:999px;
  font:inherit; font-size:14.5px; font-weight:600;
  color:var(--md-ink); background:#FFFFFF;
  cursor:pointer;
  transition:border-color .3s var(--md-out), background-color .3s var(--md-out), transform .3s var(--md-out);
}
.kc-act svg{ width:18px; height:18px; color:var(--md-gold); }
.kc-act:hover{ border-color:rgba(176,143,62,.5); transform:translateY(-2px); }
.kc-act:focus-visible{ outline:2px solid var(--md-gold-2); outline-offset:3px; }
.kc-act[aria-pressed="true"]{ color:#F5F0E6; background:var(--md-ink); border-color:var(--md-ink); }
.kc-act[aria-pressed="true"] svg{ color:#E3CF8D; fill:#E3CF8D; }
.kc-toast{ height:20px; margin:14px 0 0; font-size:14px; color:var(--md-gold); opacity:0; transition:opacity .4s var(--md-out); }
.kc-toast.is-on{ opacity:1; }

.kc-about{ padding:72px 0; }
.kc-about-in{ max-width:620px; margin:0 auto; text-align:center; }
.kc-about-in p{ margin:0; font-size:17px; line-height:2; color:var(--md-sub); }

/* similar cards */
.kc-rel{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; margin-top:30px; }
.kc--mini{
  min-height:250px;
  padding:30px 26px;
  border-radius:30px;
  text-align:center;
  gap:16px;
  box-shadow:0 20px 40px -32px rgba(18,60,53,.45);
  transition:transform .45s var(--md-out), box-shadow .45s var(--md-out);
}
.kc--mini::before{ width:160px; height:160px; top:-50px; inset-inline-end:-50px; }
.kc--mini .kc-text{ font-size:19px; line-height:1.85; }
.kc--mini .kc-label{ font-size:12.5px; padding:4px 12px; }
.kc--mini:nth-child(odd):hover{ transform:translateY(-4px) rotate(-1.2deg); }
.kc--mini:nth-child(even):hover{ transform:translateY(-4px) rotate(1.2deg); }
.kc--mini:hover{ box-shadow:0 28px 46px -30px rgba(18,60,53,.5); }
.kc--mini:focus-visible{ outline:2px solid var(--md-gold-2); outline-offset:4px; }

@media (max-width:1024px){
  .bk-cols{ grid-template-columns:1fr; gap:48px; }
  .bk-author{ position:static; max-width:560px; }
  .bk-facts{ grid-template-columns:repeat(3, auto); }
}
@media (max-width:720px){
  .bk-facts{ grid-template-columns:repeat(2, auto); }
  .bk-book{ width:min(70%, 250px); }
  .kc-hero{ padding:108px 0 56px; }
  .kc-stage{ margin-inline:-4px; }
  .kc--big{ min-height:380px; padding:48px 24px 44px; border-radius:32px; }
  .kc-text{ font-size:24px; }
  .kc-actions{ flex-wrap:wrap; }
  /* similar cards: a horizontal swipe */
  .kc-rel{ display:flex; gap:14px; margin-inline:-16px; padding:4px 16px 12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .kc-rel::-webkit-scrollbar{ display:none; }
  .kc--mini{ flex:0 0 78%; scroll-snap-align:center; }
}
@media (prefers-reduced-motion:reduce){
  .bk-float .bk-book.is-in{ animation:none; }
  .kc-go .kc--big, .kc-go .kc-spark{ animation:none; }
  .kc--big{ transition:none; }
  .bk-part-body{ transition:none; }
}

}