/* ==========================================================================
   EVENTS
   The page's own stylesheet, ported with it, plus the rules it still uses
   from the prototype's shared base.css that nothing else here needed.
   Kept per page on purpose: these carry names like .thumb, .d and .m that
   would collide the moment they went global.
   ========================================================================== */
.phead .wrap{padding-top:38px;padding-bottom:30px}
@media(min-width:1024px){
.phead .wrap{padding-top:50px;padding-bottom:36px}
}
#upcoming .head{margin-bottom:4px}
.ev-filterbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:8px}
.ev-filterbar .pills{margin-top:0}
.ev-count{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--navy-900);white-space:nowrap}
.ev-grid{display:grid;gap:28px 24px;grid-template-columns:1fr;margin-top:30px}
@media(min-width:640px){
.ev-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1024px){
.ev-grid{grid-template-columns:repeat(3,1fr);gap:32px 28px}
}
.ev-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--slate-200);
    border-radius:var(--r-panel);box-shadow:var(--sh-rest);padding:20px 20px 22px;
    transition:transform .16s ease-out,box-shadow .16s ease-out,border-color .16s ease-out}
.ev-card:hover{transform:translateY(-3px);box-shadow:var(--sh-hover);border-color:var(--accent-500)}
.ev-card[hidden]{display:none}
.ev-title{font-family:'Inter Tight',sans-serif;font-weight:700;letter-spacing:-.01em;color:var(--navy-900);
    font-size:1.1875rem;line-height:1.26;margin:0 0 15px}
.ev-title a{color:inherit;text-decoration:none}
.ev-title a:hover{color:var(--accent-800)}
.ev-thumb{position:relative;margin-bottom:16px}
.ev-thumb .mc-thumb{border-radius:var(--r-card)}
/* Bottom right, not top left. These cards carry real artwork now - a title set
   over a photograph or a logo - and a badge in the top corner landed on the
   words. The bottom right corner is the one the designs keep clear. */
.ev-datebadge{position:absolute;z-index:2;right:10px;bottom:10px;background:var(--navy-900);color:var(--white);
    font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
    padding:5px 9px;border-radius:6px;display:inline-flex;align-items:baseline;gap:5px}
.ev-datebadge .d{font-size:14px;letter-spacing:.02em}
.ev-cattag{position:absolute;z-index:2;right:10px;top:10px;background:var(--white);color:var(--navy-900);
    font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
    padding:5px 9px;border-radius:6px}
.ev-hostline{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.ev-hostline .who{min-width:0}
.ev-hostline .nm{display:block;font-weight:600;color:var(--navy-900);font-size:.9375rem;line-height:1.3}
.ev-hostline .rl{display:block;font-size:.8125rem;color:var(--slate-600);line-height:1.3}
.ev-loc{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:11px;
    text-transform:uppercase;letter-spacing:.07em;color:var(--slate-600);margin-bottom:18px}
/* margin-top:auto pushes the button to the bottom of a short card and collapses
   to nothing on a tall one, which left the button touching the last line of
   the blurb. The padding is the floor the auto margin cannot take away. */
.ev-foot{margin-top:auto;padding-top:18px;display:flex;align-items:center;justify-content:flex-start;gap:12px}
.ev-past-grid{display:grid;gap:24px;grid-template-columns:1fr;margin-top:8px}
@media(min-width:640px){
.ev-past-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1024px){
.ev-past-grid{grid-template-columns:repeat(3,1fr)}
}
.ev-pcard{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--slate-200);
    border-radius:var(--r-panel);box-shadow:var(--sh-rest);overflow:hidden;text-decoration:none;
    transition:transform .16s ease-out,box-shadow .16s ease-out,border-color .16s ease-out}
.ev-pcard:hover{transform:translateY(-3px);box-shadow:var(--sh-hover);border-color:var(--accent-500)}
.ev-pcard .mc-thumb{border-radius:0;opacity:.86}
.ev-pcard .mc-motif{opacity:.12}
.ev-pbody{padding:18px 20px 22px;display:flex;flex-direction:column;gap:10px}
.ev-pcard h3{font-family:'Inter Tight',sans-serif;font-weight:700;letter-spacing:-.01em;color:var(--navy-900);
    font-size:1.0625rem;line-height:1.3;margin:0}
.ev-pcard:hover h3{color:var(--accent-800)}
.ev-pmeta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:11px;
    text-transform:uppercase;letter-spacing:.07em;color:var(--slate-600)}
.ev-pcard p{color:var(--slate-600);font-size:.9375rem;line-height:1.5;margin:0}
.ev-go{margin-top:6px;display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.9375rem;color:var(--accent-800)}
.ev-go svg{width:16px;height:16px;transition:transform .16s ease-out}
.ev-pcard:hover .ev-go svg{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){
.ev-card,.ev-pcard,.ev-go svg{transition:none}
.ev-card:hover,.ev-pcard:hover{transform:none}
.ev-pcard:hover .ev-go svg{transform:none}
}
.mc-thumb{position:relative;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;display:grid;place-items:center;isolation:isolate}
.mc-tone-0{background:linear-gradient(145deg,var(--navy-800) 0%,var(--navy-700) 60%,var(--navy-900) 100%)}
.mc-tone-1{background:linear-gradient(150deg,var(--brand-700) 0%,var(--navy-800) 62%,var(--navy-900) 100%)}
.mc-tone-2{background:linear-gradient(150deg,var(--accent-800) 0%,var(--navy-700) 58%,var(--navy-900) 100%)}
.mc-tone-3{background:linear-gradient(145deg,var(--navy-700) 0%,var(--brand-600) 100%)}
.mc-motif{position:absolute;inset:0;width:100%;height:100%;z-index:0;color:var(--white);opacity:.16;pointer-events:none}
.mc-motif .hi{color:var(--accent-500);opacity:.9}
.mc-play{position:relative;z-index:2;width:56px;height:56px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  border:1.5px solid rgba(255,255,255,.55);background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--white);
  transition:background .16s ease-out,color .16s ease-out,transform .16s ease-out,border-color .16s ease-out}
.mc-play svg{width:22px;height:22px;margin-left:3px;fill:currentColor;display:block}
.mc-play:hover,.mc-play:focus-visible,.mc-card:hover .mc-play,.mc-feature:hover .mc-play{background:var(--accent-500);border-color:var(--accent-500);color:var(--navy-900);transform:scale(1.08)}
.mc-avatar{flex-shrink:0;width:32px;height:32px;border-radius:var(--r-pill);display:grid;place-items:center;
  background:var(--brand-100);color:var(--brand-700);font-family:'IBM Plex Mono',monospace;font-size:11px;
  font-weight:500;letter-spacing:.04em}
.mc-feature .mc-avatar{width:44px;height:44px;font-size:13px}
.mc-pres .who{min-width:0}
.mc-pres .nm{display:block;font-weight:600;color:var(--navy-900);font-size:.9375rem;line-height:1.3}
.mc-pres .rl{display:block;font-size:.8125rem;color:var(--slate-600);line-height:1.3}
.mc-feature .mc-pres .nm{font-size:1rem}
.mc-feature .mc-pres .rl{font-size:.875rem}
.mc-dot{width:3px;height:3px;border-radius:var(--r-pill);background:var(--slate-500);display:inline-block}
.mc-card .mc-thumb{border-radius:0}
.mc-player .mc-thumb{border-radius:var(--r-panel) var(--r-panel) 0 0}
.mc-page-player .mc-thumb{border-radius:var(--r-panel)}
.mc-more-card .mc-thumb{border-radius:0}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.pill-btn{font-family:'Inter',sans-serif;font-size:.85rem;font-weight:500;color:var(--slate-600);background:var(--white);border:1px solid var(--slate-400);border-radius:var(--r-pill);padding:8px 16px;cursor:pointer;transition:all .16s ease-out}
.pill-btn:hover{border-color:var(--accent-800);color:var(--accent-800)}
.pill-btn[aria-pressed="true"]{color:var(--navy-900);border-color:var(--navy-800);background:var(--paper-100)}
.pill-btn:focus-visible{outline:2px solid var(--accent-500);outline-offset:2px}
.acred.center .acred-marks{justify-content:center}
.final .nodegrid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(circle at 0 0, rgba(140,138,229,.5) 1.6px, transparent 2px),
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:44px 44px,44px 44px,44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 40%,#000 0%,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 80% at 50% 40%,#000 0%,transparent 75%)}

/* ---------- real events ----------
   The card gained two things the invented data never had: who is running it
   when that is not us, and a sentence about what it is. */
.ev-org{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-700)}
.ev-blurb{font-size:.88rem;color:var(--slate-600);line-height:1.55;margin:10px 0 0}
.ev-empty{font-size:.95rem;color:var(--slate-600);padding:28px 0}

/* ---------- past events = the masterclass archive ----------
   The past grid is the library's content rendered with the library's helpers, so
   the card carries a real still and a working play button and opens the same
   lightbox. The shell stays .ev-pcard, which is what the rest of this page is
   built from; it is an <article> rather than an <a> now, so it needs the cursor
   and the focus ring an anchor gave it for free. */
.ev-pcard-play{cursor:pointer}
.ev-pcard-play:focus-visible,.ev-pcard-play:focus-within{outline:2px solid var(--accent-500);outline-offset:2px}
.ev-pcard-play .mc-thumb{opacity:1}
.ev-pcard-play .mc-pres{display:flex;align-items:center;gap:12px;margin-top:2px}
.ev-pcard-play .mc-pres .nm i{font-style:normal;color:var(--slate-500);font-weight:500}
.ev-pcard-play .ev-pmeta{margin-bottom:2px}

/* The real 16:9 still, and the scrim that keeps a white slide from swallowing
   the play button on top of it. Same treatment as the library. */
.mc-thumb.has-still{background-image:none}
.mc-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mc-thumb.has-still .mc-play{z-index:2}
.mc-thumb.has-still .mc-dur{z-index:2}
.mc-thumb.has-still::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(7,19,36,.06) 0%,rgba(7,19,36,.34) 100%)}
.mc-dur{position:absolute;z-index:2;right:10px;bottom:10px;background:var(--navy-900);color:var(--white);
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.04em;
  padding:3px 8px;border-radius:6px}

/* ---------- the lightbox ----------
   Lifted from masterclasses.css unchanged, because it is the same dialog: the
   events page loads that script for it and has to bring the rules with it. */
.mc-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-family:'IBM Plex Mono',monospace;
  font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--slate-600)}
.mc-title-lg{font-family:'Inter Tight',sans-serif;font-weight:700;letter-spacing:-.02em;color:var(--navy-900);
  font-size:1.75rem;line-height:1.18;margin:16px 0 0}
.mc-desc{color:var(--slate-600);font-size:1.0625rem;margin:16px 0 24px;max-width:56ch}
.mc-lightbox[hidden]{display:none}
.mc-lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.mc-scrim{position:absolute;inset:0;background:rgba(7,19,36,.72)}
.mc-dialog{position:relative;z-index:1;width:100%;max-width:780px;max-height:92vh;overflow:auto;
  background:var(--white);border-radius:var(--r-panel);box-shadow:var(--sh-hover)}
.mc-player{position:relative}
.mc-close{position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px;border-radius:var(--r-pill);
  display:grid;place-items:center;cursor:pointer;border:1px solid var(--slate-300);background:var(--white);color:var(--navy-800);
  transition:background .16s ease-out,color .16s ease-out,border-color .16s ease-out}
.mc-close:hover,.mc-close:focus-visible{background:var(--navy-900);color:var(--white);border-color:var(--navy-900)}
.mc-close svg{width:18px;height:18px}
.mc-dbody{padding:26px 28px 30px;display:flex;flex-direction:column;gap:16px}
.mc-dbody .mc-title-lg{margin-top:0;font-size:1.5rem}
.mc-dbody .mc-desc{margin:0}
.mc-dactions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.mc-frame{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000;
  border-radius:var(--r-card) var(--r-card) 0 0}

/* ---------- headline to standfirst ----------
   A 30px headline with 9px under it reads as one block with the sentence below
   rather than as a heading and its standfirst.

   !important, reluctantly, and only on these two declarations. Something in the
   plugin stack sets these margins with !important of its own: a plain rule loses
   here even at body.page-events .sec .head p, which is four levels more
   specific than it needs to be. Tested in the browser - only !important moves
   it. Scoped to this page, because .head is shared with every sectioned page. */
.page-events .head h2{margin-top:14px !important;margin-bottom:0 !important}
.page-events .head p{margin-top:18px !important}
.page-events .ev-pbody{padding:20px 20px 24px;gap:12px}
.page-events .ev-pcard h3{margin:0}
.page-events .ev-pcard p{margin:0;line-height:1.55}

/* ---------- nine, then the rest ----------
   Two years of monthly masterclasses and a conference circuit is a long scroll
   before the archive, and the archive is where somebody who has just missed
   something is heading. */
.ev-more{display:flex;justify-content:center;margin-top:36px}
.ev-more[hidden]{display:none}
.ev-more .btn{min-width:260px;justify-content:center}

/* ---------- the recording, for signed-out readers ----------
   The session's still, dimmed, with a way in on top. Same 16:9 box as the player. */
.mc-gate{position:relative;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;
  background:var(--navy-900);color:var(--white);text-align:center}
.mc-gate-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28;filter:blur(2px)}
.mc-gate-in{position:relative;z-index:1;padding:24px;max-width:440px;display:flex;flex-direction:column;align-items:center;gap:10px}
.mc-gate-ic{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28)}
.mc-gate-ic svg{width:21px;height:21px}
.mc-gate h3{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:1.25rem;letter-spacing:-.01em;color:var(--white);margin:4px 0 0;text-wrap:balance}
.mc-gate p{font-size:.9rem;color:rgba(255,255,255,.78);margin:0}
.mc-gate-go{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;margin-top:8px}
.mc-gate-alt{color:var(--white);font-weight:600;font-size:.9rem;text-decoration:underline;text-underline-offset:3px}
@media(max-width:560px){.mc-gate{aspect-ratio:auto;min-height:260px}.mc-gate-in{padding:28px 18px}}

/* ---------- subtitles ----------
   The language picker under the player (built by masterclasses.js). The
   API-built iframe arrives with a height attribute, so height:auto lets the
   16:9 aspect-ratio win. */
.mc-player .mc-frame{height:auto}
.mc-subs{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:12px 28px;
  border-bottom:1px solid var(--slate-200);background:var(--slate-50,#f8fafc)}
.mc-subs[hidden]{display:none}
.mc-subs label{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.875rem;color:var(--navy-900)}
.mc-subs label svg{width:18px;height:18px;color:var(--slate-600)}
.mc-subs select{font:inherit;font-size:.875rem;color:var(--navy-900);background:var(--white);
  border:1px solid var(--slate-300);border-radius:8px;padding:6px 30px 6px 10px;cursor:pointer}
.mc-subs select:focus-visible{outline:2px solid var(--accent-500);outline-offset:2px}
.mc-subs-note{font-size:.75rem;color:var(--slate-500)}
@media(max-width:560px){.mc-subs{padding:10px 18px}.mc-subs-note{flex-basis:100%}}