/* In-Sessions.
   Written whole rather than patched: repeated string-replacement on this file
   silently deleted the hero rules once, and the sweeps did not notice because
   they check structure, not styling. */

:root{
  --se-bg:#262C31; --se-inner:#2E343A; --se-frame:#31373E; --se-deep:#1A1E22;
  --se-primary:#C5E86C; --se-nexus:#3DA5D9;
  --se-text:#F9F9F9; --se-text-white:#fff;
  --se-text-secondary:rgba(255,255,255,.75); --se-text-dim:rgba(255,255,255,.6);
  --se-text-caption:rgba(255,255,255,.5);
  --font-primary:'Open Sans',sans-serif; --font-secondary:'Roboto',sans-serif;
  --r-md:6px; --r-lg:10px; --r-xl:14px; --r-pill:999px;
  --accent:var(--se-primary); --rule:rgba(126,164,176,.16);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--se-bg);font-family:var(--font-primary);color:var(--se-text);line-height:1.6}

/* ONE gutter for the whole page: 5% of the viewport, capped at the site's
   1440px container. The hero band and the article below it share it, so the
   headline starts on the same vertical as the artwork above it. */
.wrap{width:90%;max-width:1440px;margin:0 auto}

/* ── THE HERO ───────────────────────────────────────────────
   One band, one layout, on every page — measured off the live Elementor
   pages at a 1425px viewport rather than inferred from the CSS:

     band     full-bleed: radial-gradient(accent → #262b31), with the
              BANNER texture over it at opacity .48 (Elementor's
              --overlay-opacity), cover, centred
     inner    the shared 5% gutter, 2% above
     row      artwork 32.45% | gap 3% | IN SESSIONS overlay 64.55%
              (416.19 : 38.48 : 827.84 of a 1282.5px row)
     title    with: / name / headline, in the SAME gutter — 1.2vw / 3.5vw /
              2.7vw at weights 100 / 700 / 500, measures 70% and 85%

   Participant count changes only what fills the artwork slot: one composite
   picture, or N portraits sharing it evenly. The band never changes shape. */
.sess-hero{position:relative;background-repeat:no-repeat;
  background-position:center center;background-size:cover}
.sess-hero::before{content:"";position:absolute;inset:0;opacity:.48;
  background-image:var(--hero-texture);background-position:center center;
  background-repeat:no-repeat;background-size:cover;pointer-events:none}
.sess-hero>*{position:relative;z-index:1}
.hero-inner{padding:2% 0 0}

.hero-row{display:flex;flex-direction:row;align-items:stretch;column-gap:3%}
.hero-art{flex:0 0 32.45%;width:32.45%;min-width:0;
  background-position:center center;background-repeat:no-repeat;background-size:contain}
/* N portraits share the artwork slot, bottom-aligned, exactly as the panel
   page composes them — same slot, same gutter, whatever the count. */
.hero-art.faces{display:flex;align-items:stretch;gap:6px}
.hero-art.faces img{flex:1 1 0;min-width:0;width:100%;height:100%;
  object-fit:cover;object-position:top center;display:block}
.hero-over{flex:0 0 64.55%;width:64.55%;display:block;height:auto}

/* ── Title block: with: / name / headline, continuing the band ── */
.titleband{background:var(--se-bg);padding-bottom:2.4%}
.withline{font-family:var(--font-primary);font-weight:100;color:var(--se-text-white);
  font-size:clamp(13px,1.2vw,19px);line-height:1.5;margin:2% 0 0;max-width:78%}
h1{font-family:var(--font-primary);font-weight:700;color:var(--se-text-white);
  font-size:clamp(28px,3.5vw,56px);line-height:1.3;letter-spacing:-.005em;
  margin:0;max-width:78%}
.headline{font-family:var(--font-primary);font-weight:500;color:var(--se-text-white);
  font-size:clamp(19px,2.7vw,43px);line-height:1.3;margin:0;max-width:94%}
.kicker{display:flex;align-items:center;gap:10px;font-family:var(--font-secondary);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  margin:0 0 18px}
.kicker .dot{width:4px;height:4px;border-radius:50%;background:currentColor}
.kicker .who{color:var(--se-text-caption)}
.sess-head{padding:26px 0 0}
.standfirst{font-size:17.5px;line-height:1.6;color:var(--se-text-secondary);margin:0;max-width:60ch}

/* ── The recording ────────────────────────────────────────── */
h2.seclabel{font-family:var(--font-secondary);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--se-text-caption);margin:34px 0 12px;font-weight:600}
.players{margin:0;display:grid;gap:18px;max-width:960px}
.players.multi{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));max-width:none}
.player{position:relative;aspect-ratio:16/9;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--rule);background:var(--se-deep)}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.sess-body{padding:30px 0 0;max-width:68ch}
.sess-body p{font-size:16.5px;color:var(--se-text-secondary);margin:0 0 20px}
.sess-body p:first-of-type{font-size:18px;color:var(--se-text)}
.sess-body a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(197,232,108,.32)}
.sess-body a:hover{border-bottom-color:var(--accent)}

/* ── In session with ──────────────────────────────────────── */
.guests{margin:44px 0 80px;padding-top:28px;border-top:1px solid var(--rule)}
.guests h2{font-family:var(--font-secondary);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--se-text-caption);margin:0 0 22px;font-weight:600}
.guest-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:34px}

/* Guests are separated by the source's own 1px divider, not boxed in cards. */
.guest{padding:0 0 30px;border-bottom:1px solid #FFFFFF59}
.guest:last-child{border-bottom:0}

/* THE CARD, taken verbatim from the source's video-widget rule: a 5px frame in
   #31373E, an 8px radius and a wide soft glow. Against the darker page the
   frame reads as a second border. The work sample keeps its OWN aspect — the
   source images run 185x474 and 800x450, and a fixed ratio mangles them. */
.guest .sample,
.guest .player{margin:0 0 16px;border:5px solid #31373E;border-radius:8px;
  box-shadow:0 0 58px 0 rgba(160,160,160,.28);background:var(--se-deep);overflow:hidden}
.guest .sample{padding:0}
.guest .sample img{width:100%;height:auto;display:block}
/* A guest whose work-sample video is dead (sessgen.DEAD_VIDEOS) shows their
   portrait in the same 16:9 frame the players use, so the row keeps one
   rhythm. The portrait is whole and full-height (contain, never cover); the
   blurred copy of it behind is only the frame's fill. */
.guest .headshot{position:relative;aspect-ratio:16/9;margin:0 0 16px;
  border:5px solid #31373E;border-radius:8px;box-shadow:0 0 58px 0 rgba(160,160,160,.28);
  background:var(--se-deep);overflow:hidden;display:flex;justify-content:center}
.guest .headshot::before{content:"";position:absolute;inset:-24px;
  background:var(--face) center/cover no-repeat;filter:blur(22px) brightness(.42) saturate(1.1)}
.guest .headshot img{position:relative;display:block;height:100%;width:auto;max-width:100%}

.guest .name{font-family:var(--font-secondary);font-weight:700;font-size:17px;
  color:var(--se-text-white);display:block}
.guest .role{display:block;font-size:12.5px;color:var(--accent);margin-top:3px;
  font-family:var(--font-secondary);letter-spacing:.04em}
.guest p{font-size:14.5px;color:var(--se-text-secondary);margin:12px 0 0;line-height:1.55}
.glinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.glinks a{font-family:var(--font-secondary);font-size:11.5px;letter-spacing:.04em;
  text-decoration:none;color:var(--accent);border:1px solid rgba(197,232,108,.28);
  border-radius:var(--r-pill);padding:4px 11px;transition:.15s}
.glinks a:hover{background:rgba(197,232,108,.12);border-color:var(--accent)}

/* the article's own photographs, at their natural aspect */
.gallery{margin:34px 0 0}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.gal-grid figure{margin:0}
.gal-grid img{width:100%;height:auto;display:block;border-radius:var(--r-lg);
  border:1px solid var(--rule);background:var(--se-inner)}

/* ── Index ────────────────────────────────────────────────── */
.ix{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.c{text-decoration:none;border:1px solid var(--rule);border-radius:var(--r-xl);overflow:hidden;
  min-width:0;background:linear-gradient(180deg,var(--se-frame),var(--se-inner));
  display:flex;flex-direction:column;transition:.2s}
.c:hover{border-color:rgba(197,232,108,.4);transform:translateY(-3px)}
.c .thumb{aspect-ratio:16/9;width:100%;position:relative;background:var(--se-deep);overflow:hidden}
.c .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.c .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;
  border-radius:50%;background:rgba(38,44,49,.72);border:1px solid rgba(197,232,108,.5);
  display:grid;place-items:center;backdrop-filter:blur(6px)}
.c .play::after{content:"";border-left:15px solid var(--accent);border-top:9px solid transparent;
  border-bottom:9px solid transparent;margin-left:4px}
.cb{padding:14px 16px 18px}
.cb b{display:block;color:var(--se-text-white);font-size:15px;line-height:1.35}
.cb span{display:block;margin-top:7px;font-family:var(--font-secondary);font-size:11.5px;color:var(--accent)}

/* The Elementor original stacks the band below its tablet breakpoint and
   drops the artwork under the graphic; the type steps up in vw as it goes. */
@media(max-width:767px){
  .hero-row{flex-direction:column-reverse;row-gap:16px}
  .hero-art,.hero-over{flex:1 1 auto;width:100%}
  .hero-art{min-height:174px}
  .guest-grid{grid-template-columns:1fr}
}

/* An archived article states the prices that were true when it was published.
   Nothing in the copy is rewritten — a dated note carries the caveat instead. */
.archive-prices{margin:34px 0 0;padding:16px 18px;border-radius:var(--r-lg);
  background:rgba(126,164,176,.06);border:1px solid var(--rule)}
.archive-prices p{margin:0;font-size:14px;line-height:1.6;color:var(--se-text-dim)}
.archive-prices b{color:var(--se-text-secondary)}
.archive-prices a{color:var(--accent)}