/* ==========================================================================
   GOLDEN JUBILEE — Messages library (messages/…)
   Pages are generated by _tools/build_messages.py from Ark Media.
   Gold leads; off-white cards and red for actions. Flat colour only.
   Player, search and filtering: jubilee/messages/library.js
   ========================================================================== */
.gjml{
  --ml-ink:var(--jb-red-deep,#4E0B17);
  --ml-line:rgba(78,11,23,.2);
  --ml-soft:rgba(78,11,23,.62);
  position:relative;isolation:isolate;
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  color:var(--ml-ink);font-family:var(--jb-sans);-webkit-font-smoothing:antialiased;
}
.gjml *,.gjml *::before,.gjml *::after{box-sizing:border-box}
.gjml p,.gjml h1,.gjml h2,.gjml dl,.gjml dd,.gjml dt{margin:0;padding:0}
.gjml a{text-decoration:none !important;color:inherit}
.gjml img{max-width:none !important}
.gjml-wrap{max-width:1320px;margin:0 auto;padding:clamp(40px,6vw,88px) clamp(16px,5vw,64px)}
.gjml-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

body:has(.gjml) .container-wrap{padding-top:0 !important;padding-bottom:0 !important}
body:has(.gjml) .container-wrap .main-content > .row{padding-bottom:0 !important}

/* ---- type ----------------------------------------------------------------- */
.gjml .gjml-eyebrow{display:flex;align-items:center;gap:12px;font:700 11px/1.5 var(--jb-sans) !important;letter-spacing:.3em !important;text-transform:uppercase;color:var(--jb-red,#8A1A2C) !important}
.gjml .gjml-eyebrow::after{content:"";width:40px;height:1px;background:currentColor;opacity:.55;flex:none}
.gjml .gjml-display{font:300 clamp(64px,11vw,168px)/.9 var(--jb-serif) !important;letter-spacing:-.02em !important;color:var(--ml-ink) !important;text-transform:none;margin-top:.12em !important}
.gjml .gjml-title{margin-top:.3em !important;max-width:22ch;font:300 clamp(36px,4.8vw,74px)/1.02 var(--jb-serif) !important;letter-spacing:-.01em !important;color:var(--ml-ink) !important;text-transform:none;text-wrap:balance}
.gjml .gjml-h2{font:300 clamp(30px,3.4vw,50px)/1.05 var(--jb-serif) !important;color:var(--ml-ink) !important;text-transform:none;letter-spacing:0 !important}
.gjml .gjml-lede{margin-top:18px !important;max-width:40ch;font:400 clamp(20px,1.8vw,26px)/1.35 var(--jb-serif) !important;color:var(--ml-soft) !important}

.gjml-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:26px;font:600 12px/1.4 var(--jb-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ml-soft)}
.gjml-crumbs a{border-bottom:1px solid transparent;transition:border-color .3s ease,color .3s ease}
.gjml-crumbs a:hover{color:var(--jb-red,#8A1A2C);border-color:currentColor}
.gjml-crumbs span[aria-hidden]{opacity:.5}

/* ---- buttons and links ---------------------------------------------------- */
.gjml-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:26px}
.gjml .gjml-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:999px;border:1px solid var(--ml-ink);
  font:700 12px/1 var(--jb-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ml-ink) !important;background:transparent;
  transition:background .3s ease,color .3s ease,gap .3s ease,transform .3s ease}
.gjml .gjml-btn:hover{background:var(--ml-ink);color:var(--jb-cream,#FFFAF1) !important;gap:14px}
.gjml .gjml-btn--solid{background:var(--jb-red,#8A1A2C);border-color:var(--jb-red,#8A1A2C);color:var(--jb-cream,#FFFAF1) !important}
.gjml .gjml-btn--solid:hover{background:var(--jb-red-deep,#4E0B17);border-color:var(--jb-red-deep,#4E0B17);transform:translateY(-2px)}
.gjml-btn svg,.gjml-link svg{width:15px;height:15px;flex:none}
.gjml .gjml-link{display:inline-flex;align-items:center;gap:8px;font:700 12px/1.4 var(--jb-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--jb-red,#8A1A2C) !important;
  border-bottom:1px solid currentColor;padding-bottom:3px;transition:gap .3s ease}
.gjml .gjml-link:hover{gap:13px}

/* ---- the player (a poster until pressed, then the YouTube player) --------- */
.gjml-player{position:relative;margin-top:clamp(28px,3.5vw,44px);aspect-ratio:16/9;background:var(--ml-ink);
  box-shadow:0 0 0 1px var(--ml-line),0 30px 60px -30px rgba(78,58,14,.55)}
.gjml-player__poster{all:unset;position:absolute;inset:0;cursor:pointer;display:block}
.gjml-player__poster img,.gjml-latest__img img{position:absolute;inset:0;width:100% !important;height:100% !important;object-fit:cover;display:block;
  transition:transform 1.2s cubic-bezier(.16,1,.3,1),filter .6s ease}
.gjml-player__poster:hover img{transform:scale(1.02)}
.gjml-player__btn{position:absolute;left:50%;top:50%;width:clamp(64px,7vw,96px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;background:var(--jb-red,#8A1A2C);color:var(--jb-cream,#FFFAF1);
  box-shadow:0 0 0 6px rgba(255,250,241,.85),0 14px 34px rgba(0,0,0,.35);transition:transform .4s cubic-bezier(.16,1,.3,1),background .3s ease}
.gjml-player__btn svg{width:38%;height:38%;margin-left:6%;fill:currentColor}
.gjml-player__poster:hover .gjml-player__btn,.gjml-latest:hover .gjml-player__btn{transform:translate(-50%,-50%) scale(1.08);background:var(--jb-red-deep,#4E0B17)}
.gjml-player__poster:focus-visible{outline:3px solid var(--jb-red,#8A1A2C);outline-offset:4px}
.gjml-player iframe,.gjml-player__stage{position:absolute;inset:0;width:100%;height:100%;border:0}
.gjml-player__tag{position:absolute;left:18px;top:18px;padding:8px 14px;border-radius:999px;background:rgba(255,250,241,.92);
  font:700 11px/1 var(--jb-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ml-ink)}

/* end of the preview: continue on Ark Media */
.gjml-player__end{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:24px;
  background:rgba(78,11,23,.9);animation:gjmlFade .5s ease both}
@keyframes gjmlFade{from{opacity:0}to{opacity:1}}
.gjml-player__end-inner{max-width:560px;text-align:center;color:var(--jb-cream,#FFFAF1)}
.gjml .gjml-player__end-kicker{font:700 11px/1.4 var(--jb-sans);letter-spacing:.3em;text-transform:uppercase;color:var(--jb-gold-300,#E6C67C)}
.gjml .gjml-player__end-title{margin-top:14px;font:300 clamp(28px,3.4vw,46px)/1.06 var(--jb-serif);color:var(--jb-cream,#FFFAF1);text-wrap:balance}
.gjml .gjml-player__end-text{margin-top:12px;font:400 16px/1.5 var(--jb-sans);color:rgba(255,250,241,.78)}
.gjml-player__end-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}
.gjml .gjml-player__end .gjml-btn--solid{background:var(--jb-gold,#D4A84A);border-color:var(--jb-gold,#D4A84A);color:var(--jb-red-deep,#4E0B17) !important}
.gjml .gjml-player__end .gjml-btn--solid:hover{background:var(--jb-cream,#FFFAF1);border-color:var(--jb-cream,#FFFAF1)}
.gjml .gjml-player__again{border-color:rgba(255,250,241,.6);color:var(--jb-cream,#FFFAF1) !important;cursor:pointer}
.gjml .gjml-player__again:hover{background:var(--jb-cream,#FFFAF1);color:var(--jb-red-deep,#4E0B17) !important}
@media (max-width:560px){
  .gjml-player__end{padding:14px}
  .gjml .gjml-player__end-title{font-size:24px;margin-top:8px}
  .gjml .gjml-player__end-text{display:none}
  .gjml-player__end-actions{margin-top:14px;gap:8px}
  .gjml-player__end .gjml-btn{padding:11px 16px;font-size:11px}
  .gjml-player__tag{left:10px;top:10px;padding:6px 10px;font-size:9px}
}

/* ---- watch page ---------------------------------------------------------- */
.gjml-watch{background:var(--jb-gold-100,#F3E3B8)}
.gjml .gjml-watch__when{display:block}
.gjml .gjml-watch__when::after{display:none}
.gjml-watch .gjml-wrap{padding-bottom:clamp(56px,7vw,100px)}
.gjml-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:clamp(28px,5vw,88px);margin-top:clamp(32px,4vw,56px)}
.gjml .gjml-desc p{font:400 clamp(21px,1.9vw,27px)/1.45 var(--jb-serif);color:var(--ml-ink);max-width:36em}
.gjml .gjml-desc p + p{margin-top:.8em}
.gjml-desc__tag{display:block;margin-top:.6em;font-style:italic;color:var(--ml-soft)}
/* in this message (the timestamps from the video description) */
.gjml-chapters{margin-top:clamp(28px,3vw,40px);padding-top:22px;border-top:1px solid var(--ml-line)}
.gjml-chapters__title small{display:block;margin-top:6px;font:500 12px/1.4 var(--jb-sans);letter-spacing:0;text-transform:none;color:var(--ml-soft)}
.gjml .gjml-chapters__title{margin-bottom:12px !important;font:700 11px/1.5 var(--jb-sans) !important;letter-spacing:.3em !important;text-transform:uppercase;color:var(--jb-red,#8A1A2C) !important}
.gjml-chapters ol{margin:0 !important;padding:0 !important;list-style:none !important;columns:2 300px;column-gap:36px}
.gjml-chapters li{break-inside:avoid;margin:0 !important;padding:0 !important;list-style:none !important}
.gjml-chapters li::marker{content:none}
.gjml-chapters a{display:grid;grid-template-columns:72px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid rgba(78,11,23,.1);color:var(--ml-ink);transition:color .25s ease}
.gjml-chapters a:hover{color:var(--jb-red,#8A1A2C)}
.gjml-chapters time{font:600 13px/1.5 var(--jb-sans);font-variant-numeric:tabular-nums;color:var(--jb-gold-700,#8F6B1D)}
.gjml-chapters span{font:500 15px/1.45 var(--jb-sans)}
.gjml-facts{border-top:1px solid var(--ml-line)}
.gjml-facts > div{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:13px 0;border-bottom:1px solid var(--ml-line)}
.gjml .gjml-facts dt{font:700 11px/1.7 var(--jb-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ml-soft)}
.gjml .gjml-facts dd{font:500 16px/1.5 var(--jb-sans);color:var(--ml-ink)}
.gjml-facts dd a{border-bottom:1px solid var(--ml-line);transition:border-color .3s ease,color .3s ease}
.gjml-facts dd a:hover{color:var(--jb-red,#8A1A2C);border-color:currentColor}
.gjml-side .gjml-actions{flex-direction:column;align-items:stretch}
.gjml-side .gjml-btn{justify-content:center}
.gjml-side .gjml-link{align-self:flex-start;margin-top:6px}

/* more from this programme */
.gjml-more{background:var(--jb-gold,#D4A84A)}
.gjml-more__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px;margin-bottom:clamp(26px,3vw,40px)}
.gjml-more .gjml-link{color:var(--ml-ink) !important}
.gjml-pager{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--ml-line);padding-top:24px}
.gjml-pager a{display:block;font:400 clamp(19px,1.7vw,24px)/1.25 var(--jb-serif);color:var(--ml-ink);transition:color .3s ease}
.gjml-pager a:hover{color:var(--jb-red,#8A1A2C)}
.gjml-pager small{display:block;margin-bottom:8px;font:700 11px/1 var(--jb-sans);letter-spacing:.24em;text-transform:uppercase;color:var(--jb-red,#8A1A2C)}
.gjml-pager__older small::before{content:"← "}
.gjml-pager__newer{text-align:right}
.gjml-pager__newer small::after{content:" →"}

/* ---- cards ---------------------------------------------------------------- */
.gjml-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(18px,2vw,28px)}
.gjml-card{display:flex;flex-direction:column;background:var(--jb-cream,#FFFAF1);box-shadow:0 0 0 1px var(--ml-line);
  transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s ease}
.gjml-card:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--jb-red,#8A1A2C),0 22px 40px -24px rgba(78,58,14,.6)}
.gjml-card__img{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--jb-gold-300,#E6C67C)}
.gjml-card__img img{position:absolute;inset:0;width:100% !important;height:100% !important;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.gjml-card:hover .gjml-card__img img{transform:scale(1.05)}
.gjml-card__cat{margin:16px 18px 0;font:700 10px/1.4 var(--jb-sans);letter-spacing:.24em;text-transform:uppercase;color:var(--jb-red,#8A1A2C)}
.gjml-card__title{margin:8px 18px 0;font:500 21px/1.18 var(--jb-serif);color:var(--ml-ink);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gjml-card__date{margin:auto 18px 0;padding:14px 0 16px;font:500 12px/1 var(--jb-sans);letter-spacing:.06em;color:var(--ml-soft)}
.gjml-card.is-hidden,.gjml-year.is-hidden{display:none}

/* ---- library + programme pages ------------------------------------------- */
.gjml-head{background:var(--jb-gold,#D4A84A)}
.gjml-head .gjml-wrap{padding-bottom:clamp(48px,6vw,88px)}
.gjml-latest{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);margin-top:clamp(36px,5vw,64px);background:var(--jb-cream,#FFFAF1);
  box-shadow:0 0 0 1px var(--ml-line),0 30px 60px -34px rgba(78,58,14,.7)}
.gjml-latest__img{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ml-ink)}
.gjml-latest:hover .gjml-latest__img img{transform:scale(1.03)}
.gjml-latest__text{display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,3.5vw,52px)}
.gjml-latest__title{display:block;margin-top:16px;font:300 clamp(28px,2.8vw,44px)/1.08 var(--jb-serif);color:var(--ml-ink);text-wrap:balance}
.gjml-latest__meta{display:block;margin-top:18px;font:500 14px/1.4 var(--jb-sans);color:var(--ml-soft)}
.gjml-head--cat .gjml-actions{margin-top:30px}

.gjml-lib{background:var(--jb-gold-50,#FBF4E3)}
.gjml-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px;padding-bottom:26px;border-bottom:1px solid var(--ml-line)}
.gjml-chips{display:flex;flex-wrap:wrap;gap:8px}
.gjml-chip{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;border:1px solid var(--ml-line);
  font:600 13px/1 var(--jb-sans);color:var(--ml-ink);background:transparent;transition:border-color .3s ease,background .3s ease,color .3s ease}
.gjml-chip small{font-size:11px;opacity:.6}
.gjml-chip:hover{border-color:var(--ml-ink)}
.gjml-chip.is-on{background:var(--jb-red,#8A1A2C);border-color:var(--jb-red,#8A1A2C);color:var(--jb-cream,#FFFAF1)}
.gjml-search{position:relative;display:flex;align-items:center;min-width:min(100%,300px);border-bottom:1px solid var(--ml-ink)}
.gjml-search svg{width:18px;height:18px;flex:none;color:var(--ml-soft)}
.gjml .gjml-search input{all:unset;flex:1;min-width:0;padding:12px 10px !important;font:500 16px/1.2 var(--jb-sans) !important;color:var(--ml-ink) !important}
.gjml-search input::placeholder{color:var(--ml-soft)}
.gjml-count{flex-basis:100%;font:500 13px/1 var(--jb-sans);color:var(--ml-soft);min-height:13px}
.gjml-count:empty{display:none}
.gjml-year{padding-top:clamp(36px,4.5vw,60px)}
.gjml .gjml-year__label{display:flex;align-items:center;gap:22px;margin-bottom:clamp(20px,2.4vw,30px);
  font:300 clamp(44px,5vw,76px)/1 var(--jb-serif) !important;color:var(--jb-gold-700,#8F6B1D) !important;letter-spacing:-.01em !important}
.gjml-year__label::after{content:"";flex:1;height:1px;background:var(--ml-line)}
.gjml .gjml-empty{padding:60px 0;font:400 24px/1.3 var(--jb-serif);color:var(--ml-soft)}

/* ---- small screens --------------------------------------------------------- */
@media (max-width:900px){
  .gjml-body,.gjml-latest{grid-template-columns:1fr}
  .gjml-facts > div{grid-template-columns:96px 1fr}
}
@media (max-width:560px){
  .gjml-grid{grid-template-columns:1fr 1fr;gap:12px}
  .gjml-card__cat{margin:12px 12px 0;font-size:9px;letter-spacing:.18em}
  .gjml-card__title{margin:6px 12px 0;font-size:17px}
  .gjml-card__date{margin:auto 12px 0;padding:10px 0 12px;font-size:11px}
  .gjml-pager{grid-template-columns:1fr}
  .gjml-pager__newer{text-align:left}
  .gjml-search{min-width:100%}
}
@media (prefers-reduced-motion:reduce){
  .gjml *,.gjml *::before,.gjml *::after{transition:none !important}
}
