/* ==========================================================================
   STUDIO L308
   --------------------------------------------------------------------------
   One stylesheet for the whole site. No inherited rules, no parent
   theme, no competing palettes.

   Broadcast control room: dark ground, dense tiling, six acTV colours
   as signal not decoration. Each stage owns a colour, readable at a
   glance.

   IMPORTANT: WordPress auto-adds body classes (archive, page, home,
   single, search, blog). Never reuse one, or rules hit the whole
   document. Everything here's prefixed enough not to collide.

   Contents
     1.  Tokens
     2.  Reset and base
     3.  Typography
     4.  Buttons
     5.  Masthead
     6.  Hero
     7.  Production grid
     8.  Stage badges
     9.  Strand lanes
     10. Stats
     11. Interior pages
     12. Single production
     13. Reviews
     14. Team
     15. Forms
     16. Footer
     17. Motion
     18. Watch diaries
     19. Team groups
     20. Step cards
     21. Carried over markup
     22. Student area
     23. Story generator
     24. The wordmark
     25. Showcase filter
     26. Play marker
     27. Cards without an image
     28. Hairlines without a background
     29. Install instructions
     30. Compatibility aliases
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* type */
  --l308-display:'Archivo',system-ui,-apple-system,sans-serif;
  --l308-ui:'Inter',system-ui,-apple-system,sans-serif;

  /* rhythm */
  --l308-edge:clamp(16px,3.4vw,52px);
  --l308-measure:1400px;
  --l308-gutter:2px;

  /* surfaces, the control room */
  --l308-ink:#0B0D10;
  --l308-panel:#14181F;
  --l308-panel-2:#1B212A;
  --l308-line:rgba(255,255,255,.10);
  --l308-line-strong:rgba(255,255,255,.20);

  /* text */
  --l308-fg:#C9D1DB;
  --l308-fg-strong:#FFFFFF;
  --l308-fg-mute:#8A94A3;
  --l308-fg-faint:#6B7482;

  /* the six acTV colours */
  --l308-cyan:#28AADC;
  --l308-red:#DC1E28;
  --l308-yellow:#FAE61E;
  --l308-green:#1EAA50;
  --l308-blue:#285AB4;
  /*
   * Magenta: site's accent colour. Not in the mark - that's four
   * colours at the compass points (red, yellow, green, blue) for the
   * four production stages. Magenta's the website's, not the logo's -
   * used for reveiws and watch diaries.
   */
  --l308-magenta:#E61E8C;

  /* the working accent */
  --l308-accent:#28AADC;
  --l308-accent-ink:#04121A;
}


/* --------------------------------------------------------------------------
   2. RESET AND BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--l308-ink);
  color:var(--l308-fg);
  font-family:var(--l308-ui);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}

.l308-skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--l308-accent);color:var(--l308-accent-ink);
  padding:12px 20px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
}
.l308-skip:focus{left:0}
.l308-sr{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}

/* the shared measure - every section lines up */
.l308-wrap{
  max-width:var(--l308-measure);
  margin-inline:auto;
  padding-inline:var(--l308-edge);
}


/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--l308-display);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:.98;
  color:var(--l308-fg-strong);
}

.l308-kicker{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--l308-accent);
  margin-bottom:20px;
}
.l308-kicker__live{
  width:7px;height:7px;border-radius:50%;background:var(--l308-red);
  animation:l308-pulse 1.8s ease-out infinite;
}
@keyframes l308-pulse{
  0%{box-shadow:0 0 0 0 rgba(220,30,40,.7)}
  70%{box-shadow:0 0 0 9px rgba(220,30,40,0)}
  100%{box-shadow:0 0 0 0 rgba(220,30,40,0)}
}

.l308-lede{
  font-size:clamp(15px,1.3vw,18px);
  color:var(--l308-fg);
  max-width:72ch;
}


/* --------------------------------------------------------------------------
   4. BUTTONS
   Colours are literal, so nothing upstream can make a label unreadable.
   -------------------------------------------------------------------------- */
.l308-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--l308-ui);
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:15px 28px;
  border:2px solid transparent;
  border-radius:0;
  cursor:pointer;
  text-decoration:none;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.l308-btn--fill{background:#28AADC !important;border-color:#28AADC;color:#04121A !important}
.l308-btn--fill:hover,.l308-btn--fill:focus-visible{background:#4FBDE6 !important;border-color:#4FBDE6;color:#04121A !important}
.l308-btn--line{background:transparent;border-color:rgba(255,255,255,.34);color:#FFFFFF}
.l308-btn--line:hover,.l308-btn--line:focus-visible{background:#FFFFFF;border-color:#FFFFFF;color:#0B0D10}
.l308-btn--dark{background:transparent;border-color:#6B7482;color:#FFFFFF}
.l308-btn--dark:hover,.l308-btn--dark:focus-visible{background:#FFFFFF;border-color:#FFFFFF;color:#0B0D10}
.l308-btn:focus-visible{outline:2px solid #28AADC;outline-offset:3px}


/* --------------------------------------------------------------------------
   5. MASTHEAD
   -------------------------------------------------------------------------- */
.l308-mast{
  position:sticky;top:0;z-index:80;
  background:rgba(11,13,16,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--l308-line);
}
.l308-mast__in{
  display:flex;align-items:center;gap:30px;
  max-width:var(--l308-measure);margin-inline:auto;
  padding:0 var(--l308-edge);
  height:68px;
}
.l308-brand{display:flex;align-items:center;flex:none}
.l308-brand__logo{height:34px;width:auto;display:block}
@media(max-width:560px){.l308-brand__logo{height:28px}}
.l308-brand__text{
  font-family:var(--l308-display);
  font-weight:900;font-size:17px;letter-spacing:-.02em;
  color:#FFFFFF;white-space:nowrap;
}
.l308-brand__text em{font-style:normal;color:var(--l308-cyan)}

.l308-nav{display:flex;gap:26px;align-items:center;margin-left:auto}
.l308-nav::-webkit-scrollbar{display:none}
.l308-nav a{
  font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--l308-fg-mute);white-space:nowrap;
  padding:6px 0;border-bottom:2px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.l308-nav a:hover,.l308-nav a[aria-current]{
  color:#FFFFFF;border-bottom-color:var(--l308-cyan);
}
/* Small lock beside Students, faded L308 blue - signals password
   protected before you click. */
.l308-nav__lock-link{display:inline-flex;align-items:center;gap:5px}
.l308-nav__lock{color:var(--l308-blue);opacity:.65;margin-top:-1px;flex:0 0 auto}
.l308-nav__lock-link:hover .l308-nav__lock{opacity:.85}
/* Students dropdown group */
.l308-nav__group{position:relative;display:flex;align-items:center}
.l308-nav__menu{
  position:absolute;top:100%;left:0;min-width:170px;z-index:60;
  display:none;flex-direction:column;
  background:var(--l308-ink);border:1px solid var(--l308-line);
  box-shadow:0 14px 34px rgba(0,0,0,.45);padding:6px;
}
.l308-nav__group:hover .l308-nav__menu,
.l308-nav__group:focus-within .l308-nav__menu{display:flex}
.l308-nav__menu a{padding:9px 12px;white-space:nowrap}
.l308-nav__menu a:hover{background:var(--l308-panel)}
.screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.l308-mast__cta{
  flex:none;
  background:#28AADC;color:#04121A;
  padding:11px 20px;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  transition:background .2s ease;
}
.l308-mast__cta:hover{background:#4FBDE6}
.l308-mast__social{display:flex;align-items:center;gap:14px}
.l308-mast__social a{display:inline-flex;color:var(--l308-fg-mute);transition:color .2s ease,transform .2s ease}
.l308-mast__social a:hover{color:var(--l308-cyan);transform:translateY(-1px)}
.l308-mast__social svg{display:block}

.l308-mast__toggle{
  display:none;margin-left:auto;
  background:none;border:1px solid var(--l308-line-strong);color:#FFFFFF;
  padding:9px 15px;cursor:pointer;
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
@media(max-width:900px){
  .l308-nav{
    display:none;
    position:absolute;top:68px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--l308-ink);
    border-bottom:1px solid var(--l308-line);
    padding:6px var(--l308-edge) 18px;
  }
  .l308-nav.is-open{display:flex}
  .l308-nav a{padding:14px 0;border-bottom:1px solid var(--l308-line)}
  .l308-nav__group{flex-direction:column;align-items:stretch}
  .l308-nav__menu{position:static;display:flex;border:none;box-shadow:none;padding:0 0 0 16px;background:transparent}
  .l308-nav__menu a{padding:12px 0;border-bottom:1px solid var(--l308-line)}
  .l308-mast__toggle{display:block}
  .l308-mast__cta{display:none}
  .l308-mast__social{display:none}
}


/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.l308-hero{
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--l308-line);
  padding-block:clamp(56px,9vw,124px) clamp(40px,6vw,76px);
}
.l308-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 50% at 78% 10%, rgba(40,170,220,.20), transparent 70%),
    radial-gradient(48% 42% at 10% 92%, rgba(230,30,140,.14), transparent 70%);
}
.l308-hero__in{position:relative;max-width:var(--l308-measure);margin-inline:auto;padding-inline:var(--l308-edge)}
.l308-hero h1{font-size:clamp(42px,8vw,112px);max-width:15ch}
.l308-hero h1 span{color:var(--l308-cyan)}
.l308-hero__foot{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(22px,4vw,60px);align-items:end;
  margin-top:clamp(26px,4vw,40px);padding-top:clamp(22px,3vw,34px);
  border-top:1px solid var(--l308-line);
}
.l308-hero__ctas{display:flex;gap:11px;flex-wrap:wrap}
@media(max-width:820px){.l308-hero__foot{grid-template-columns:1fr}}

/* the six colour rail, the studio's signature */
.l308-rail{display:flex;height:6px}
.l308-review__watched{margin-top:24px;padding-top:18px;border-top:1px solid var(--l308-line)}
.l308-review__byline{margin-top:16px;font-size:14px;color:var(--l308-fg-mute);display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.l308-review__byline span{padding-left:14px;border-left:1px solid var(--l308-line)}
.l308-review-still{margin:clamp(20px,3vw,36px) 0 0;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:var(--l308-panel)}
.l308-review-still img{width:100%;height:100%;object-fit:cover;display:block}
.l308-credits{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px 28px;
  margin-top:clamp(24px,3.4vw,38px);padding:clamp(20px,2.6vw,30px);
  background:var(--l308-panel);border-radius:12px;border:1px solid var(--l308-line);
}
.l308-credits--rich{display:block}
.l308-credits__top{
  display:grid;grid-template-columns:1fr 1fr;gap:28px 32px;align-items:start;
}
.l308-credits__crew{
  display:grid;grid-template-columns:auto 1fr;gap:20px 24px;align-content:start;
}
.l308-credits__writing{
  display:grid;grid-template-columns:repeat(2,1fr);gap:18px 24px;align-content:start;
}
.l308-credits__cell{display:flex;flex-direction:column;gap:4px}
.l308-credits__label{font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--l308-fg-mute)}
.l308-credits__val{font-size:15px;color:var(--l308-fg-strong);line-height:1.4}
.l308-credits__cell--director .l308-credits__val{font-size:18px;font-weight:600}
.l308-credits__cell--cast .l308-credits__val{display:block;margin-top:4px}
.l308-credits__dphoto{width:160px;height:213px;border-radius:14px;overflow:hidden;background:var(--l308-ink);margin-top:12px}
.l308-credits__dphoto.is-empty{display:flex;align-items:center;justify-content:center;color:var(--l308-fg-mute);font-size:40px;font-weight:700}
.l308-credits__dphoto-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.l308-credits__dphoto-row .l308-credits__dphoto{margin-top:0}
.l308-credits__dphoto img{width:100%;height:100%;object-fit:cover;object-position:center 14%;display:block}
.l308-credits__dphoto-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;width:160px}
.l308-credits__dphoto-name{font-size:17px;font-weight:600;color:var(--l308-fg-strong);line-height:1.3;margin-top:6px;width:160px}
.l308-credits__dknown-wrap{grid-column:1/-1;margin-top:16px}
.l308-credits__dknown-label{display:block;margin-bottom:10px}
.l308-credits__dknown{display:flex;justify-content:space-between;gap:12px}
.l308-credits__dknown img{width:72px;height:108px;object-fit:cover;border-radius:6px;background:var(--l308-ink);display:block;transition:opacity .15s ease}
.l308-credits__dknown a:hover img{opacity:.8}
.l308-credits__overview{margin-top:24px;padding-top:22px;border-top:1px solid var(--l308-line)}
.l308-credits__overview .l308-credits__label{display:block;margin-bottom:8px}
.l308-review .l308-credits__synopsis{font-size:14.5px;line-height:1.65;color:var(--l308-fg-strong);margin:0;display:block;-webkit-line-clamp:none;-webkit-box-orient:initial;overflow:visible}
/* Main cast mini grid: 4 columns, wraps for 5+. Sits in the right
   cell of the credits two-column layout. */
.l308-castmini{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 12px;margin-top:8px}
.l308-castmini__item{display:flex;flex-direction:column;align-items:center;text-align:center}
.l308-castmini__item--extra{display:none}
.l308-castmini.is-expanded .l308-castmini__item--extra{display:flex}
.l308-castmini__photo{width:130px;height:173px;border-radius:14px;overflow:hidden;background:var(--l308-ink);margin-bottom:9px}
.l308-castmini__photo img{width:100%;height:100%;object-fit:cover;object-position:center 12%;display:block}
.l308-castmini__photo.is-empty{display:flex;align-items:center;justify-content:center;color:var(--l308-fg-mute);font-size:30px;font-weight:700}
.l308-castmini__name{font-size:13.5px;font-weight:600;color:var(--l308-fg-strong);line-height:1.3}
.l308-castmini__role{font-size:12px;color:var(--l308-fg-mute);margin-top:2px}
/* Full/guest cast grids: auto-fill distributes any number evenly, no
   orphaned rows. Min column width keeps photos readable. */
.l308-credits__more-cast-wrap{margin-top:20px;padding:20px;background:var(--l308-panel);border:1px solid var(--l308-line);border-radius:12px}
.l308-credits__more-cast-wrap[hidden]{display:none}
.l308-castfull{display:flex;flex-wrap:wrap;row-gap:28px;column-gap:24px;margin-bottom:16px}
.l308-castfull:last-child{margin-bottom:0}
.l308-castfull--even{justify-content:space-evenly}
.l308-castfull__item{display:flex;flex-direction:column;align-items:center;text-align:center;width:74px}
.l308-castfull__photo{width:88px;height:117px;border-radius:14px;overflow:hidden;background:var(--l308-ink);margin-bottom:9px}
.l308-castfull__photo img{width:100%;height:100%;object-fit:cover;object-position:center 12%;display:block}
.l308-castfull__photo.is-empty{display:flex;align-items:center;justify-content:center;color:var(--l308-fg-mute);font-size:30px;font-weight:700}
.l308-castfull__name{font-size:13.5px;font-weight:600;color:var(--l308-fg-strong);line-height:1.3}
.l308-castfull__role{font-size:12px;color:var(--l308-fg-mute);margin-top:2px}
.l308-cast-showmore{display:block;margin:12px auto 0;padding:0;border:0;background:none;cursor:pointer;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--l308-cyan);text-decoration:underline;text-underline-offset:3px;text-align:center}
.l308-cast-showmore:hover{color:var(--l308-fg-strong)}
/* Guest Stars panel - appears between cast and overview */
.l308-credits__more-cast-wrap{margin-top:20px;padding:20px;background:var(--l308-panel);border:1px solid var(--l308-line);border-radius:12px}
.l308-credits__more-cast-wrap[hidden]{display:none}
.l308-credits__castheading{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--l308-fg-mute)}
/* Each cast group (Starring/Contestants, Guest Stars) is its own
   boxed panel, not just a divider - never reads as one continuous list. */
.l308-credits__castsection{
  margin-top:20px;padding:20px;
  background:var(--l308-panel);border:1px solid var(--l308-line);border-radius:12px;
}
.l308-credits__castheading{margin:0 0 14px;font-size:15px;font-weight:700;color:var(--l308-fg-strong)}
.l308-cast-more{
  display:inline-block;margin-top:12px;padding:0;border:0;background:none;cursor:pointer;
  font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--l308-cyan);
  text-decoration:underline;text-underline-offset:3px;
}
.l308-cast-more:hover{color:var(--l308-fg-strong)}
.l308-credits__foot{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:20px;margin-top:24px;padding-top:20px;border-top:1px solid var(--l308-line);text-align:center}
.l308-credits__foot .l308-credits__cell{align-items:center}
.l308-cert{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:10px;background:var(--l308-cert-bg,#5a6472);margin-top:2px}
.l308-cert__age{color:#fff;font-weight:800;font-size:16px;letter-spacing:.02em;line-height:1}
.l308-upcast{
  margin-top:clamp(20px,3vw,32px);padding:clamp(20px,2.6vw,30px);
  background:var(--l308-panel);border-radius:12px;border:1px solid var(--l308-line);
}
.l308-upcast__heading{font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--l308-fg-mute);margin:0 0 18px}
.l308-upcast__row{display:grid;grid-template-columns:repeat(8,1fr);gap:18px 12px}
@media(max-width:820px){.l308-upcast__row{grid-template-columns:repeat(4,1fr)}}
@media(max-width:480px){.l308-upcast__row{grid-template-columns:repeat(3,1fr)}}
.l308-upcast__item{display:flex;flex-direction:column;align-items:center;text-align:center}
.l308-upcast__item--extra{display:none}
.l308-upcast__row.is-expanded .l308-upcast__item--extra{display:flex}
.l308-upcast .l308-cast-more{margin-top:20px}
.l308-upcast__photo{width:88px;height:88px;border-radius:14px;overflow:hidden;background:var(--l308-ink);margin-bottom:9px}
.l308-upcast__photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}
.l308-upcast__photo.is-empty{display:flex;align-items:center;justify-content:center;color:var(--l308-fg-mute);font-size:30px;font-weight:700}
.l308-upcast__name{font-size:13.5px;font-weight:600;color:var(--l308-fg-strong);line-height:1.3}
.l308-upcast__role{font-size:12px;color:var(--l308-fg-mute);margin-top:2px}
.l308-upoverview{margin-top:20px;padding-top:18px;border-top:1px solid var(--l308-line)}
.l308-upoverview .l308-credits__label{display:block;margin-bottom:8px}
.l308-review .l308-upoverview p,.l308-upcoming .l308-upoverview p{font-size:14.5px;line-height:1.65;color:var(--l308-fg-strong);margin:0;display:block;-webkit-line-clamp:none;-webkit-box-orient:initial;overflow:visible}
@media(max-width:760px){
  .l308-credits__top{grid-template-columns:1fr;gap:24px}
  .l308-credits__crew{grid-template-columns:auto 1fr}
  .l308-credits__writing{grid-template-columns:repeat(2,1fr)}
  .l308-castmini{grid-template-columns:repeat(4,1fr)}
  .l308-castmini__photo{width:100px;height:133px}
  .l308-credits__foot{grid-template-columns:repeat(2,1fr);gap:20px}
}
@media(max-width:460px){
  .l308-credits__crew{grid-template-columns:1fr}
  .l308-credits__writing{grid-template-columns:1fr}
  .l308-castmini{grid-template-columns:repeat(3,1fr)}
  .l308-castmini__photo{width:88px;height:117px}
  .l308-credits__dphoto{width:120px;height:160px}
  .l308-credits__dphoto-wrap,.l308-credits__dphoto-name{width:120px}
}
.l308-credits__item{display:flex;flex-direction:column;gap:4px}
.l308-credits__label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--l308-fg-mute)}
.l308-credits__val{font-size:15px;color:var(--l308-fg-strong);line-height:1.4}
.l308-review__trailer{margin-top:clamp(30px,4vw,48px)}
.l308-review__trailer-frame{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;margin-top:14px}
.l308-review__trailer-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.l308-bios{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;
  margin-top:clamp(32px,4.5vw,52px);padding-top:clamp(24px,3vw,34px);
  border-top:1px solid var(--l308-line);
}
.l308-bio{display:flex;gap:16px;align-items:flex-start}
.l308-bio__photo{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--l308-panel)}
.l308-bio__text{display:flex;flex-direction:column;gap:2px}
.l308-bio__role{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--l308-fg-mute)}
.l308-bio__name{font-size:17px;font-weight:600;color:var(--l308-fg-strong)}
.l308-bio__occ{font-size:13px;color:var(--l308-fg-mute)}
.l308-bio__blurb{margin:6px 0 0;font-size:14px;line-height:1.6;color:var(--l308-fg-mute)}
.l308-bio__socials{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.l308-bio__socials a{font-size:13px;color:var(--l308-cyan);text-decoration:none}
.l308-bio__socials a:hover{text-decoration:underline}
.l308-review-share2{margin-top:clamp(28px,4vw,44px);padding-top:22px;border-top:1px solid var(--l308-line);display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.l308-review-share2__lbl{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--l308-fg-mute)}
.l308-review-share2__links{display:flex;gap:12px;flex-wrap:wrap}
.l308-review-share2__links a,.l308-review-share2__copy{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;
  background:var(--l308-panel);border:1px solid var(--l308-line);border-radius:999px;
  color:var(--l308-fg-mute);font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;
  font-family:inherit;transition:color .2s,border-color .2s}
.l308-review-share2__links a:hover,.l308-review-share2__copy:hover{color:var(--l308-cyan);border-color:var(--l308-cyan)}
.l308-rss-line{margin-top:14px}
.l308-rss-link{display:inline-flex;align-items:center;gap:7px;color:var(--l308-fg-mute);text-decoration:none;font-size:13px;font-weight:600}
.l308-rss-link:hover{color:#F79A3E}
.l308-review__trailer--top{margin-top:clamp(20px,3vw,32px)}
.l308-stills-carousel{
  display:flex;align-items:center;gap:10px;
  margin:clamp(20px,3vw,32px) 0;
}
.l308-stills-carousel__track{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;flex:1;min-width:0;
}
.l308-stills-carousel__track::-webkit-scrollbar{display:none}
.l308-stills-carousel__item{
  flex:0 0 240px;scroll-snap-align:start;border:0;padding:0;background:var(--l308-panel-2);cursor:pointer;
  border-radius:10px;overflow:hidden;aspect-ratio:16/9;
}
.l308-stills-carousel__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.l308-stills-carousel__item:hover img{transform:scale(1.05)}
.l308-stills-carousel__nav{
  flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:1px solid var(--l308-line);
  background:var(--l308-panel);color:var(--l308-fg);cursor:pointer;font-size:20px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .15s ease;
}
.l308-stills-carousel__nav:hover{background:var(--l308-panel-2)}
.l308-stills-carousel__nav:disabled{opacity:.3;cursor:default;pointer-events:none}
@media(max-width:520px){
  .l308-stills-carousel__item{flex-basis:180px}
}
.l308-up-hero{margin:clamp(24px,4vw,40px) 0;border-radius:14px;overflow:hidden;aspect-ratio:21/9}
.l308-up-hero img{width:100%;height:100%;object-fit:cover;display:block}
.l308-finder{margin-bottom:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:16px}
.l308-finder__search{position:relative;display:flex;align-items:center;max-width:440px}
.l308-finder__search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--l308-fg-mute);pointer-events:none;z-index:1}
.l308-finder__search input{
  width:100%;box-sizing:border-box;background:var(--l308-ink);border:1px solid var(--l308-line-strong);
  color:var(--l308-fg);padding:13px 16px 13px 42px !important;font-size:15px;line-height:1.2;font-family:inherit;border-radius:999px;
}
.l308-finder__search input:focus{outline:none;border-color:var(--l308-cyan)}
.l308-finder__group{display:flex;flex-wrap:wrap;gap:8px}
.l308-finder__chip{
  padding:7px 15px;border-radius:999px;border:1px solid var(--l308-line-strong);
  background:transparent;color:var(--l308-fg-mute);font-size:13px;font-weight:600;
  font-family:inherit;cursor:pointer;transition:all .18s ease;
}
.l308-finder__chip:hover{border-color:var(--l308-cyan);color:var(--l308-fg)}
.l308-finder__chip.is-active{background:var(--l308-cyan);border-color:var(--l308-cyan);color:#04121A}
.l308-finder__none{color:var(--l308-fg-mute);font-size:15px;margin:4px 0 0}
p.l308-review__director{
  margin:2px 0 8px;font-size:13px;color:var(--l308-fg-mute);font-weight:500;
  line-height:1.4;height:40px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.l308-reviews .l308-review-card .l308-stars{min-height:19px;display:block}
.l308-cast{margin:clamp(28px,4vw,44px) 0}
.l308-cast__heading{margin:0 0 18px;font-size:clamp(20px,2.4vw,26px)}
.l308-cast__row{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:18px}
.l308-cast__item{display:flex;flex-direction:column;align-items:center;text-align:center}
.l308-cast__photo{width:96px;height:96px;border-radius:50%;overflow:hidden;background:var(--l308-panel);margin-bottom:10px}
.l308-cast__photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.l308-cast__photo.is-empty{display:flex;align-items:center;justify-content:center;color:var(--l308-fg-mute);font-size:34px;font-weight:700}
.l308-cast__name{font-size:14px;font-weight:600;color:var(--l308-fg-strong);line-height:1.3}
.l308-cast__role{font-size:12.5px;color:var(--l308-fg-mute);line-height:1.3;margin-top:2px}
.l308-credits__item--director{display:flex;flex-direction:column;gap:4px}
.l308-credits__photo{width:64px;height:64px;border-radius:50%;object-fit:cover;margin-bottom:6px}
.l308-credits__photo-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.l308-credits__photo-row .l308-credits__photo{margin-bottom:0}
.l308-trial-form{display:flex;flex-direction:column;gap:18px}
.l308-trial-field{display:flex;flex-direction:column;gap:7px}
.l308-trial-field label{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--l308-fg-mute)}
.l308-trial-field input,.l308-trial-field textarea{
  width:100%;background:var(--l308-ink);border:1px solid var(--l308-line-strong);
  color:var(--l308-fg);padding:13px 14px;font-size:15px;font-family:inherit;border-radius:2px;
}
.l308-trial-field input:focus,.l308-trial-field textarea:focus{outline:none;border-color:var(--l308-cyan)}
.l308-trial-field textarea{min-height:200px;resize:vertical}
.l308-trial-note{font-size:13px;color:var(--l308-fg-mute);margin:0}
.l308-trial-done{padding:24px;background:var(--l308-panel);border:1px solid var(--l308-line);border-radius:12px}
.l308-trial-done h3{margin:0 0 8px}
.l308-foot__attr{margin:0;font-size:9.5px;color:var(--l308-fg-faint);opacity:.5;letter-spacing:.04em;text-transform:none;flex:1 1 auto;text-align:center;min-width:200px}
.l308-gallery{margin-top:clamp(24px,3vw,40px)}
.l308-gallery__mosaic{
  display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:12px;
}
.l308-gallery__cell{
  padding:0;border:0;cursor:pointer;overflow:hidden;border-radius:10px;background:var(--l308-panel);
  position:relative;
}
.l308-gallery__cell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.l308-gallery__cell:hover img{transform:scale(1.05)}
.l308-gallery__cell--wide{grid-column:span 2;grid-row:span 2}
@media(max-width:700px){
  .l308-gallery__mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px}
  .l308-gallery__cell--wide{grid-column:span 2;grid-row:span 1}
}
.l308-gallery__more{margin-top:20px;text-align:center}
.l308-lightbox{
  position:fixed;inset:0;z-index:9999;background:rgba(4,8,12,.94);
  display:flex;align-items:center;justify-content:center;
}
.l308-lightbox[hidden]{display:none}
.l308-lightbox__stage{margin:0;max-width:88vw;max-height:82vh}
.l308-lightbox__stage img{max-width:88vw;max-height:82vh;object-fit:contain;border-radius:6px;display:block}
.l308-lightbox__close{
  position:absolute;top:18px;right:24px;width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;font-size:26px;cursor:pointer;line-height:1;
}
.l308-lightbox__close:hover{background:rgba(255,255,255,.2)}
.l308-lightbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:0;border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;font-size:30px;cursor:pointer;line-height:1;
}
.l308-lightbox__nav:hover{background:rgba(255,255,255,.2)}
.l308-lightbox__prev{left:20px}
.l308-lightbox__next{right:20px}
.l308-lightbox__count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.75);font-size:13px;letter-spacing:.1em}
@media(max-width:700px){
  .l308-lightbox__nav{width:42px;height:42px;font-size:24px}
  .l308-lightbox__prev{left:8px}
  .l308-lightbox__next{right:8px}
}

/* "This week" scrollable poster strip + lightbox, on the Reviews page. */
.l308-cal-strip{
  display:flex;gap:12px;overflow-x:auto;padding:4px 4px 12px;margin:0 -4px;
  scrollbar-width:thin;
}
.l308-cal-strip__card{
  flex:0 0 auto;width:120px;display:flex;flex-direction:column;gap:6px;
  color:var(--l308-fg);border-radius:8px;text-decoration:none;
}
.l308-cal-strip__img-wrap{position:relative;display:block}
.l308-cal-strip__card img{
  width:120px;height:180px;object-fit:cover;border-radius:8px;
  border:2px solid transparent;display:block;
}
.l308-cal-strip__card--tv img{border-color:#28AADC}
.l308-cal-strip__card--movie img{border-color:#E0A72E}
.l308-cal-strip__card--streaming img{border-color:#A855F7}
.l308-cal-strip__badge{
  position:absolute;bottom:6px;left:6px;
  display:inline-flex;align-items:center;gap:3px;
  font-size:10px;font-weight:700;padding:3px 6px;border-radius:4px;
  line-height:1;letter-spacing:.03em;
}
.l308-cal-strip__badge--tv{background:#28AADC;color:#000}
.l308-cal-strip__badge--movie{background:#E0A72E;color:#000}
.l308-cal-strip__badge--streaming{background:#A855F7;color:#fff}
.l308-cal-strip__platform{
  position:absolute;top:6px;right:6px;
  background:rgba(11,13,16,.82);border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  padding:3px;line-height:1;
}
.l308-cal-strip__platform-text{
  font-size:9px;font-weight:700;letter-spacing:.03em;color:var(--l308-fg-strong);
  padding:0 3px;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.l308-cal-strip__title{font-size:13px;font-weight:600;color:var(--l308-fg-strong);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:33px}
.l308-cal-strip__date{font-size:12px;color:var(--l308-fg-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.l308-cal-strip__more{
  flex:0 0 auto;width:120px;height:180px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;border-radius:8px;cursor:pointer;
  background:linear-gradient(135deg,rgba(40,170,220,.16),rgba(40,170,220,.04));
  border:2px dashed var(--l308-accent);color:var(--l308-accent);font-weight:600;font-size:13px;
  text-align:center;padding:10px;
}
.l308-cal-strip__more:hover{background:rgba(40,170,220,.22)}
@media(max-width:600px){
  .l308-cal-strip__card,.l308-cal-strip__card img,.l308-cal-strip__more{width:96px}
  .l308-cal-strip__card img,.l308-cal-strip__more{height:144px}
}

.l308-cal-lightbox{align-items:flex-start;padding:4vh 16px;overflow-y:auto}
.l308-cal-lightbox .l308-lightbox__close{position:fixed}
.l308-cal-panel{
  width:100%;max-width:900px;margin:0 auto;background:var(--l308-panel);
  border:1px solid var(--l308-line);border-radius:16px;padding:clamp(18px,3vw,32px);
}
.l308-cal-panel__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.l308-cal-panel__head h2{margin:0 0 4px}
.l308-cal-panel__head p{margin:0 0 20px;color:var(--l308-fg-mute);font-size:14px;max-width:46ch}
.l308-cal-tabs{display:flex;gap:6px;flex:0 0 auto}
.l308-cal-tab{
  padding:8px 14px;border-radius:20px;border:1px solid var(--l308-line);background:transparent;
  color:var(--l308-fg-mute);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;
}
.l308-cal-tab.is-active{background:var(--l308-accent);border-color:var(--l308-accent);color:var(--l308-accent-ink)}
.l308-cal-view[hidden]{display:none}
.l308-cal-month[hidden]{display:none}
.l308-cal-month-nav{display:flex;justify-content:flex-end;gap:8px;margin-bottom:6px}
.l308-cal-month-nav__btn{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--l308-line-strong);
  background:transparent;color:var(--l308-fg-strong);font-size:18px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s ease,border-color .15s ease;
}
.l308-cal-month-nav__btn:hover:not(:disabled){background:var(--l308-panel-2);border-color:var(--l308-accent)}
.l308-cal-month-nav__btn:disabled{opacity:.3;cursor:not-allowed}
.l308-cal-month__label{margin:4px 0 10px;font-size:15px;color:var(--l308-fg-strong)}
/* Calendar grid - Mon to Sun on desktop, same on mobile */
.l308-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;border:1px solid var(--l308-line);border-radius:10px;overflow:hidden}
.l308-cal-grid__wd{text-align:center;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--l308-fg-mute);padding:8px 4px;background:var(--l308-ink);font-weight:600}
.l308-cal-day{
  min-height:110px;padding:6px;background:var(--l308-panel-2);
  border:0;display:flex;flex-direction:column;gap:0;
}
.l308-cal-day.is-blank{background:var(--l308-ink);opacity:.4}
.l308-cal-day.is-today{background:rgba(40,170,220,.07)}
.l308-cal-day.is-today .l308-cal-day__num{color:var(--l308-accent);font-weight:700;background:var(--l308-accent);color:#000;border-radius:50%;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:11px}
.l308-cal-day__num{font-size:12px;color:var(--l308-fg-mute);margin-bottom:5px;display:block}
.l308-cal-day__items{display:flex;flex-direction:column;gap:4px}
.l308-cal-day__entry{display:flex;align-items:flex-start;gap:4px}
.l308-cal-day__pill{display:block;width:22px;height:34px;border-radius:3px;overflow:hidden;border:1.5px solid transparent;flex-shrink:0}
.l308-cal-day__pill--tv{border-color:#28AADC}
.l308-cal-day__pill--movie{border-color:#E0A72E}
.l308-cal-day__pill--streaming{border-color:#A855F7}
.l308-cal-day__pill img{width:100%;height:100%;object-fit:cover;display:block}
.l308-cal-day__entry-label{font-size:10px;line-height:1.25;overflow:hidden;display:flex;flex-direction:column;gap:1px}
.l308-cal-day__entry-title{color:var(--l308-fg-strong);overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;font-weight:600}
.l308-cal-day__entry-ep{font-size:9px;color:var(--l308-fg-mute)}
.l308-cal-day__entry--tv .l308-cal-day__entry-ep{color:#28AADC}
.l308-cal-day__entry--movie .l308-cal-day__entry-ep{color:#E0A72E}
.l308-cal-day__entry--streaming .l308-cal-day__entry-ep{color:#A855F7}
.l308-cal-day__more{font-size:10px;color:var(--l308-fg-mute);margin-top:2px;font-style:italic}
.l308-cal-day[data-date]{cursor:pointer}
.l308-cal-day[data-date]:hover{background:var(--l308-panel)}
@media(max-width:640px){
  .l308-cal-grid{gap:1px}
  .l308-cal-day{min-height:80px;padding:4px}
  .l308-cal-day__entry-label{display:none}
  .l308-cal-day__pill{width:16px;height:22px}
}
.l308-cal-nextweek{display:flex;flex-direction:column;gap:8px}
.l308-cal-nwday{border-radius:10px;border:1px solid var(--l308-line);background:var(--l308-panel-2);overflow:hidden}
.l308-cal-nwday.is-today{border-color:var(--l308-accent)}
.l308-cal-nwday.is-empty{opacity:.5}
.l308-cal-nwday[data-date]{cursor:pointer}
.l308-cal-nwday[data-date]:hover{background:var(--l308-panel)}
.l308-cal-nwday__head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--l308-line)}
.l308-cal-nwday.is-empty .l308-cal-nwday__head{border-bottom:none}
.l308-cal-nwday__dow{font-size:12px;font-weight:700;color:var(--l308-fg-mute);text-transform:uppercase;letter-spacing:.08em;min-width:32px}
.l308-cal-nwday.is-today .l308-cal-nwday__dow{color:var(--l308-accent)}
.l308-cal-nwday__num{font-size:13px;font-weight:600;color:var(--l308-fg-strong)}
.l308-cal-nwday__empty{font-size:12px;color:var(--l308-fg-faint);margin:0;padding:8px 14px}
.l308-cal-nwday__items{display:flex;flex-direction:column;gap:0}
.l308-cal-nwitem{display:flex;align-items:center;gap:10px;padding:8px 14px;border-top:1px solid var(--l308-line)}
.l308-cal-nwitem:first-child{border-top:none}
.l308-cal-nwitem img{width:28px;height:42px;object-fit:cover;border-radius:4px;flex-shrink:0}
.l308-cal-nwitem__info{display:flex;flex-direction:column;gap:3px;min-width:0}
.l308-cal-nwitem__badge{font-size:10px;font-weight:700;padding:2px 5px;border-radius:3px;align-self:flex-start}
.l308-cal-nwitem--tv .l308-cal-nwitem__badge{background:#28AADC;color:#000}
.l308-cal-nwitem--movie .l308-cal-nwitem__badge{background:#E0A72E;color:#000}
.l308-cal-nwitem--streaming .l308-cal-nwitem__badge{background:#A855F7;color:#fff}
.l308-cal-nwitem__platform-text{font-size:10px;font-weight:600;color:var(--l308-fg-mute);align-self:flex-start}
.l308-cal-nwitem__title{font-size:13px;font-weight:600;color:var(--l308-fg-strong);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.l308-cal-nwitem__ep{font-size:11px;color:var(--l308-fg-mute)}
/* Day detail popup */
.l308-cal-day-popup{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
.l308-cal-day-popup[hidden]{display:none}
.l308-cal-day-popup__inner{background:var(--l308-panel);border:1px solid var(--l308-line);border-radius:14px;max-width:520px;width:100%;max-height:80vh;overflow-y:auto;padding:20px}
.l308-cal-day-popup__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.l308-cal-day-popup__head strong{font-size:15px;color:var(--l308-fg-strong)}
.l308-cal-day-popup__head button{background:none;border:0;color:var(--l308-fg-mute);font-size:22px;cursor:pointer;line-height:1;padding:0 4px}
.l308-cal-day-popup__head button:hover{color:var(--l308-fg-strong)}
.l308-cal-day-popup__items{display:flex;flex-direction:column;gap:6px}
.l308-cal-popup-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;background:var(--l308-ink);text-decoration:none;color:var(--l308-fg-strong)}
.l308-cal-popup-item:hover{background:var(--l308-line)}
.l308-cal-popup-item img{width:36px;height:54px;object-fit:cover;border-radius:4px;flex-shrink:0}
.l308-cal-popup-item__info{display:flex;flex-direction:column;gap:4px;min-width:0}
.l308-cal-popup-item__title{font-size:13px;font-weight:600;line-height:1.35}
.l308-cal-popup-badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 6px;border-radius:3px;letter-spacing:.04em}
.l308-cal-popup-badge--tv{background:#28AADC;color:#000}
.l308-cal-popup-badge--movie{background:#E0A72E;color:#000}
.l308-cal-popup-badge--streaming{background:#A855F7;color:#fff}
.l308-cal-popup-platform-text{font-size:10.5px;font-weight:600;color:var(--l308-fg-mute)}
@media(max-width:640px){
  .l308-cal-grid{gap:4px}
  .l308-cal-day{min-height:56px;padding:4px}
  .l308-cal-day__pill{width:16px;height:22px}
  .l308-cal-grid__wd{font-size:9.5px}
  .l308-cal-panel__head{flex-direction:column}
}

.l308-review__watched-where{margin:0;font-size:14px;color:var(--l308-fg)}
.l308-review__watched-where span{color:var(--l308-fg-mute);text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:600;margin-right:8px}
.l308-review__watched-note{margin:8px 0 0;font-size:14.5px;line-height:1.6;color:var(--l308-fg-mute);font-style:italic}
.l308-studio-gallery{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:clamp(10px,1.4vw,18px);margin-top:clamp(24px,3.5vw,40px);
}
.l308-studio-gallery__item{margin:0;border-radius:12px;overflow:hidden;background:var(--l308-panel);aspect-ratio:4/3}
.l308-studio-gallery__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.l308-studio-gallery__item:hover .l308-studio-gallery__img{transform:scale(1.04)}
.l308-rail i{flex:1}
/*
 * The rail: five identity colours plus magenta. Magenta's not in the
 * mark, not a logo colour - it's the site's accent, used for editorial
 * work and wherever a sixth is needed. Rail belongs to the website,
 * not the logo - six bars sit better than five.
 */
.l308-rail i:nth-child(1){background:var(--l308-cyan)}
.l308-rail i:nth-child(2){background:var(--l308-magenta)}
.l308-rail i:nth-child(3){background:var(--l308-yellow)}
.l308-rail i:nth-child(4){background:var(--l308-green)}
.l308-rail i:nth-child(5){background:var(--l308-blue)}
.l308-rail i:nth-child(6){background:var(--l308-red)}


/* --------------------------------------------------------------------------
   7. PRODUCTION GRID
   Named l308-slate, not anything WordPress uses for a body class.
   -------------------------------------------------------------------------- */
.l308-section{padding-block:clamp(46px,7vw,88px)}
.l308-section--tight-top{padding-top:clamp(24px,3.5vw,40px)}
.l308-press-contact{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.l308-press-email{font-size:18px;font-weight:600;color:var(--l308-cyan);text-decoration:none;width:fit-content}
.l308-press-email:hover{text-decoration:underline}
.l308-press-editor{color:var(--l308-fg-mute);font-size:15px}
.l308-press-editorcard{
  display:flex;gap:20px;align-items:flex-start;
  margin:20px 0 8px;padding:22px;
  background:var(--l308-panel);border:1px solid var(--l308-line);border-radius:12px;
}
.l308-press-editorcard__photo{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--l308-ink)}
.l308-press-editorcard__text{display:flex;flex-direction:column;gap:3px}
.l308-press-editorcard__role{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--l308-fg-mute)}
.l308-press-editorcard__name{font-size:19px;font-weight:600;color:var(--l308-fg-strong)}
.l308-press-editorcard__occ{font-size:13px;color:var(--l308-fg-mute)}
.l308-press-editorcard__bio{margin:8px 0 0;font-size:14.5px;line-height:1.6;color:var(--l308-fg-mute)}
.l308-section--flush-top{padding-top:0;padding-bottom:clamp(18px,2.4vw,30px)}
.l308-section--panel{background:var(--l308-panel);border-block:1px solid var(--l308-line)}
.l308-section--author-head{padding-block:clamp(32px,5vw,60px)}
.l308-authorhead{display:flex;gap:clamp(24px,4vw,48px);align-items:flex-start}
.l308-authorhead__photo{flex-shrink:0;width:clamp(100px,15vw,160px);height:clamp(100px,15vw,160px);border-radius:50%;overflow:hidden;background:var(--l308-panel)}
.l308-authorhead__photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}
.l308-authorhead__info{flex:1;min-width:0}
.l308-authorhead__occ{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--l308-cyan);margin:0 0 6px}
.l308-authorhead__name{font-size:clamp(28px,5vw,48px);font-weight:800;margin:0 0 14px;line-height:1.1}
.l308-authorhead__bio{font-size:16px;line-height:1.7;color:var(--l308-fg);margin:0 0 16px;max-width:65ch}
.l308-authorhead__socials{display:flex;gap:14px;margin-bottom:12px}
.l308-authorhead__social-link{color:var(--l308-fg-mute);display:flex;align-items:center;transition:color .18s ease}
.l308-authorhead__social-link:hover{color:var(--l308-cyan)}
.l308-authorhead__count{font-size:13px;color:var(--l308-fg-mute);margin:0}
.l308-byline-link{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .18s ease}
.l308-byline-link:hover{border-bottom-color:currentColor}
.l308-crosslink{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 14px;border-radius:8px;margin-bottom:14px;font-size:13px}
.l308-crosslink--review{background:color-mix(in srgb,var(--l308-cyan) 10%,transparent);border:1px solid color-mix(in srgb,var(--l308-cyan) 30%,transparent)}
.l308-crosslink--next{background:color-mix(in srgb,var(--l308-magenta) 10%,transparent);border:1px solid color-mix(in srgb,var(--l308-magenta) 30%,transparent)}
.l308-crosslink--next a{color:var(--l308-magenta)}
.l308-crosslink span{color:var(--l308-fg-mute)}
.l308-crosslink a{color:var(--l308-cyan);font-weight:600;text-decoration:none}
.l308-crosslink a:hover{text-decoration:underline}
.l308-author-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:28px;border-bottom:1px solid var(--l308-line);padding-bottom:0}
.l308-author-tab{background:none;border:0;border-bottom:3px solid transparent;padding:10px 16px;font-size:14px;font-weight:600;color:var(--l308-fg-mute);cursor:pointer;margin-bottom:-1px;transition:color .15s,border-color .15s;font-family:inherit}
.l308-author-tab:hover{color:var(--l308-fg)}
.l308-author-tab.is-active{color:var(--l308-cyan);border-bottom-color:var(--l308-cyan)}
.l308-log-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:16px}
.l308-log-card{position:relative;border-radius:10px;overflow:hidden;background:var(--l308-panel)}
.l308-log-card img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block}
.l308-log-card__placeholder{width:100%;aspect-ratio:2/3;display:flex;align-items:center;justify-content:center;font-size:40px;background:var(--l308-ink)}
.l308-log-card__reaction{position:absolute;top:8px;left:8px;font-size:20px;line-height:1;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.l308-log-card__body{padding:8px}
.l308-log-card__title{font-size:13px;font-weight:600;margin:0 0 2px;line-height:1.3;color:var(--l308-fg-strong)}
.l308-log-card__year{font-size:12px;color:var(--l308-fg-mute);margin:0}
.l308-log-card__watched{font-size:11px;color:var(--l308-fg-mute);margin:2px 0 0}
.l308-log-card__comment{font-size:11px;color:var(--l308-fg-mute);margin:4px 0 0;font-style:italic;line-height:1.4;border-top:1px solid var(--l308-line);padding-top:4px}
@media(max-width:560px){
  .l308-authorhead{flex-direction:column;align-items:center;text-align:center}
  .l308-authorhead__bio{max-width:100%}
  .l308-authorhead__socials{justify-content:center}
}

.l308-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
  margin-bottom:clamp(24px,4vw,40px);
}
.l308-head h2{font-size:clamp(26px,3.8vw,48px)}
.l308-head p{color:var(--l308-fg-mute);max-width:70ch;font-size:14.5px;margin-top:12px;line-height:1.6}
.l308-head__more{
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--l308-fg-mute);
  border-bottom:2px solid var(--l308-cyan);padding-bottom:3px;
}
.l308-head__more:hover{color:#FFFFFF}

/* Showcase year groups: each academic year under its own heading. */
.l308-yeargroup{margin-bottom:clamp(30px,5vw,56px)}
.l308-yeargroup:last-of-type{margin-bottom:0}
.l308-yearhead{
  font-family:var(--l308-display);
  font-size:clamp(19px,2.4vw,27px);
  color:var(--l308-cyan);
  letter-spacing:.04em;
  margin-bottom:16px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.l308-stats__archive{
  margin-top:18px;
  color:rgba(255,255,255,.55);
  font-size:14px;
}

.l308-slate{
  display:flex;
  flex-wrap:wrap;
  gap:var(--l308-gutter);
  /*
   * No background on the grid - a background paints the empty part of
   * a half-filled row as a missing tile, not space. Hairline between
   * cards comes from an outline on each card instead - one production
   * reads as deliberate, not incomplete.
   */
}
.l308-slate > *{
  flex:1 1 320px;
  max-width:520px;
  min-width:0;
  outline:1px solid var(--l308-line);
  outline-offset:0;
}
@media(min-width:1800px){.l308-slate > *{flex-basis:300px}}
@media(max-width:640px){.l308-slate > *{flex-basis:100%;max-width:none}}

.l308-card{
  position:relative;display:block;overflow:hidden;
  background:var(--l308-panel);
  aspect-ratio:16/10;
  transition:transform .3s ease;
}
.l308-card:hover{transform:translateY(-3px)}
.l308-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.l308-card__wash{position:absolute;inset:0;z-index:2}
.l308-card--cyan .l308-card__wash{background:linear-gradient(140deg,#0E2A38,rgba(40,170,220,.22) 60%,#0B0D10)}
.l308-card--magenta .l308-card__wash{background:linear-gradient(140deg,#2E0E22,rgba(230,30,140,.22) 60%,#0B0D10)}
.l308-card--yellow .l308-card__wash{background:linear-gradient(140deg,#302B0B,rgba(250,230,30,.20) 60%,#0B0D10)}
.l308-card--green .l308-card__wash{background:linear-gradient(140deg,#0C2A18,rgba(30,170,80,.22) 60%,#0B0D10)}
.l308-card--blue .l308-card__wash{background:linear-gradient(140deg,#0D1B36,rgba(40,90,180,.24) 60%,#0B0D10)}
.l308-card--red .l308-card__wash{background:linear-gradient(140deg,#2E0E10,rgba(220,30,40,.22) 60%,#0B0D10)}
.l308-card__scrim{
  position:absolute;inset:0;z-index:3;
  background:linear-gradient(transparent 34%,rgba(11,13,16,.94));
}
.l308-card__body{position:absolute;inset:auto 0 0 0;z-index:4;padding:20px}
.l308-card h3{font-size:clamp(17px,1.5vw,22px);margin-bottom:9px;color:#FFFFFF}
.l308-card__meta{
  display:flex;gap:14px;flex-wrap:wrap;
  font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--l308-fg-mute);
}
.l308-card__bar{
  position:absolute;left:0;bottom:0;height:3px;width:0;z-index:5;
  background:var(--l308-cyan);
  transition:width .6s cubic-bezier(.2,.7,.3,1);
}
.l308-card:hover .l308-card__bar{width:100%}


/* --------------------------------------------------------------------------
   8. STAGE BADGES
   Plugin prints its own, prefixed l308-stage. These position them.
   -------------------------------------------------------------------------- */
.l308-card .l308-stage{position:absolute;top:14px;left:14px;z-index:5}
.l308-stagerow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}


/* --------------------------------------------------------------------------
   9. STRAND LANES
   -------------------------------------------------------------------------- */
.l308-lanes{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;
}
@media(max-width:1000px){.l308-lanes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.l308-lanes{grid-template-columns:1fr}}
.l308-lane{
  background:var(--l308-panel);
  padding:32px 26px;
  border-top:4px solid transparent;
}
.l308-lane--1{border-top-color:var(--l308-cyan)}
.l308-lane--2{border-top-color:var(--l308-magenta)}
.l308-lane--3{border-top-color:var(--l308-yellow)}
.l308-lane--4{border-top-color:var(--l308-green)}
.l308-lane__n{
  display:block;margin-bottom:14px;
  font-family:var(--l308-display);font-weight:900;font-size:34px;line-height:1;
  color:rgba(255,255,255,.22);
}
.l308-lane h3{font-size:20px;margin-bottom:11px}
.l308-lane p{color:var(--l308-fg-mute);font-size:13.5px;line-height:1.65}


/* --------------------------------------------------------------------------
   10. STATS
   -------------------------------------------------------------------------- */
.l308-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--l308-gutter);
}
@media(max-width:800px){.l308-stats{grid-template-columns:repeat(2,1fr)}}
.l308-stat{background:var(--l308-panel);padding:30px 26px}
.l308-stat b{
  display:block;
  font-family:var(--l308-display);font-weight:900;font-size:clamp(34px,3.6vw,48px);
  line-height:1;color:#FFFFFF;
}
.l308-stat span{
  display:block;margin-top:9px;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--l308-fg-mute);
}
.l308-stat:nth-child(1) b{color:var(--l308-cyan)}
.l308-stat:nth-child(2) b{color:var(--l308-cyan)}
.l308-stat:nth-child(3) b{color:var(--l308-yellow)}
.l308-stat:nth-child(4) b{color:var(--l308-green)}


/* --------------------------------------------------------------------------
   11. INTERIOR PAGES
   -------------------------------------------------------------------------- */
.l308-pagehead{
  padding-block:clamp(46px,7vw,96px) clamp(24px,3.5vw,44px);
  border-bottom:1px solid var(--l308-line);
}
.l308-pagehead h1{font-size:clamp(32px,5.6vw,72px);max-width:18ch}
.l308-pagehead p{margin-top:18px;color:var(--l308-fg-mute);font-size:16px;max-width:72ch;line-height:1.7}

.l308-body{padding-block:clamp(34px,5vw,66px)}
.l308-prose{max-width:74ch}
/* Review/upcoming main body: full container width, matches the
   credits box above, not capped to a narrow reading column. */
.l308-body--full{max-width:none}
.l308-prose p{margin-bottom:1.2em;font-size:16px;line-height:1.75}
.l308-prose h2{font-size:clamp(22px,2.8vw,34px);margin:1.9em 0 .6em}
.l308-prose h3{font-size:clamp(18px,2vw,24px);margin:1.7em 0 .5em}
.l308-prose a{color:var(--l308-cyan);text-decoration:underline;text-underline-offset:3px}
.l308-prose ul,.l308-prose ol{margin:0 0 1.2em 1.3em}
.l308-prose ul{list-style:disc}
.l308-prose ol{list-style:decimal}
.l308-prose li{margin-bottom:.5em}
.l308-prose blockquote{
  margin:1.6em 0;padding-left:20px;
  border-left:3px solid var(--l308-cyan);
  font-family:var(--l308-display);font-size:20px;font-weight:600;
  color:#FFFFFF;
}
/* Uploaded EPK image inline in the write-up, between paragraphs.
   Original scale, not stretched to fill the column - click opens the
   shared lightbox at full size. */
.l308-inline-still{
  display:block;width:auto;max-width:100%;border:0;padding:0;margin:1.8em auto;background:none;cursor:pointer;
  border-radius:10px;overflow:hidden;
}
.l308-inline-still img{width:auto;height:auto;max-width:100%;max-height:520px;display:block;transition:transform .35s ease}
.l308-inline-still:hover img{transform:scale(1.03)}

.l308-empty{
  padding:30px;border:1px dashed var(--l308-line-strong);
  color:var(--l308-fg-mute);font-size:14px;text-align:center;
}


/* --------------------------------------------------------------------------
   12. SINGLE PRODUCTION
   -------------------------------------------------------------------------- */
.l308-player{position:relative;width:100%;max-width:960px;margin:clamp(24px,4vw,48px) auto 0;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden}
.l308-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.l308-plate{position:relative;width:100%;max-width:960px;margin:clamp(24px,4vw,48px) auto 0;aspect-ratio:16/9;background:var(--l308-panel);overflow:hidden;border-radius:10px}
.l308-plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The production page content needs room to breathe above the footer. */
.single-production .l308-wrap{padding-bottom:clamp(48px,7vw,88px)}

.l308-prodhead{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:26px;flex-wrap:wrap;
  padding-block:clamp(26px,4vw,44px) 0;
}
.l308-prodhead h1{font-size:clamp(28px,4.6vw,58px);max-width:20ch;margin-top:12px}
.l308-tags{
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--l308-fg-mute);
}
.l308-tags .l308-tags__lead{color:var(--l308-cyan)}
.l308-review__subtags{
  display:flex;flex-direction:column;gap:4px;margin-top:10px;
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--l308-fg-mute);
}

.l308-crew{
  display:flex;flex-wrap:wrap;
  gap:1px;
  margin-top:clamp(28px,4vw,44px);
}
.l308-crew > *{flex:1 1 190px;max-width:300px;min-width:0}
.l308-crew__item{background:var(--l308-panel);padding:18px 20px}
.l308-crew__role{
  display:block;margin-bottom:5px;
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--l308-cyan);
}
.l308-crew__name{color:#FFFFFF;font-size:15px;font-weight:600}


/* --------------------------------------------------------------------------
   13. REVIEWS
   -------------------------------------------------------------------------- */
.l308-reviews{
  display:flex;flex-wrap:wrap;
  gap:var(--l308-gutter);
}
.l308-reviews-seeall{text-align:center;margin-top:28px}
.l308-reviews > *{flex:1 1 300px;max-width:460px;min-width:0}
/* Homepage "Latest reviews and teasers" only - equal-width cards, not the
   grow-to-fit sizing the Reviews page grid uses. */
.l308-reviews--home{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:stretch}
.l308-reviews--home > *{max-width:none}
.l308-review{
  background:var(--l308-panel);padding:26px 24px;
  border-left:4px solid var(--l308-magenta);
  transition:background .2s ease;
}
.l308-review:hover{background:var(--l308-panel-2)}
.l308-review h3{
  font-size:19px;margin-bottom:8px;line-height:1.25;
  min-height:47.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.l308-review__meta{
  display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px;
  font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--l308-fg-mute);
}
.l308-review p{
  color:var(--l308-fg-mute);font-size:14px;line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
}
.l308-stars{color:var(--l308-yellow);font-size:14px;letter-spacing:.1em}
p.l308-review__format{
  margin:8px 0 0;font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--l308-fg-mute);min-height:14px;display:block;-webkit-line-clamp:none;-webkit-box-orient:initial;overflow:visible;
}
p.l308-review__genre{
  margin:4px 0 0;font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--l308-fg-mute);line-height:1.5;height:31px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
p.l308-review__coverage{
  margin:6px 0 0;font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--l308-cyan);line-height:1.5;height:31px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
p.l308-review__collection{
  margin:6px 0 0;font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--l308-cyan);line-height:1.5;height:31px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.l308-teaser-badge{
  display:inline-block;margin:2px 0 10px;padding:4px 10px;
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  border-radius:2px;line-height:1.4;min-height:2.8em;box-sizing:border-box;
}
.l308-teaser-badge--season{background:var(--l308-cyan);color:#04121A}
.l308-teaser-badge--collection{background:var(--l308-cyan);color:#04121A}
.l308-teaser-badge--empty{background:none;visibility:hidden}
.l308-teaser-meta{margin-top:0;margin-bottom:10px;row-gap:6px}
.l308-pagehead--upcoming h1{margin-bottom:18px}
.l308-pagehead--upcoming .l308-review__meta{margin-top:6px;gap:16px}

/*
 * Review pagehead with a hero backdrop - still image fills the
 * section itself (moved up from below the colour rail), title/tags/
 * watch panel float over it in a translucent card, image stays visible through it.
 */
.l308-pagehead--hero{
  position:relative;
  isolation:isolate;
  min-height:clamp(420px,52vw,640px);
  display:flex;
  align-items:flex-end;
  background-size:cover;
  background-position:center;
  background-color:var(--l308-panel);
  padding-block:0;
}
.l308-pagehead--hero::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,9,12,.1) 0%,rgba(8,9,12,.28) 45%,rgba(8,9,12,.92) 100%);
  z-index:0;
}
.l308-pagehead--hero > .l308-wrap{
  position:relative;z-index:1;width:100%;
  padding-block:clamp(28px,4.5vw,52px);
}
.l308-pagehead--hero .l308-watch-hide-when-open,
.l308-pagehead--hero .l308-watch-compact--standalone{
  background:rgba(14,17,22,.68);
  border:1px solid var(--l308-line);
  border-radius:14px;
  padding:clamp(18px,2.6vw,30px);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  display:inline-block;
  max-width:100%;
}

@media(max-width:700px){
  .l308-pagehead--hero{min-height:0}
  .l308-pagehead--hero .l308-watch-hide-when-open,
  .l308-pagehead--hero .l308-watch-compact--standalone{display:block}
}

/* Every review card uses the same poster-left layout. No poster yet?
   Branded placeholder keeps the row visually consistent. */
.l308-review.has-poster{display:flex;gap:18px;padding:18px}
.l308-review__poster{flex:0 0 92px;position:relative}
.l308-review__poster img{width:92px;aspect-ratio:2/3;object-fit:cover;display:block;border-radius:6px;background:var(--l308-panel-2)}
.l308-review__poster-ph{
  display:flex;align-items:center;justify-content:center;
  width:92px;aspect-ratio:2/3;border-radius:6px;
  background:linear-gradient(150deg,var(--l308-panel-2),#0B0D10);
  border:1px solid var(--l308-line);
  color:var(--l308-fg-mute);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.l308-review__title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.l308-review__title-row h3{flex:1;min-width:0}
.l308-review__season-pill{
  flex:0 0 auto;margin-top:2px;
  background:var(--l308-cyan);color:#04121A;
  font-size:11px;font-weight:700;letter-spacing:.05em;
  padding:3px 8px;border-radius:10px;line-height:1.4;
}
.l308-review__text{min-width:0;flex:1}
@media(max-width:520px){
  .l308-review.has-poster{flex-direction:column;align-items:center}
  .l308-review__poster{flex:none}
  .l308-review__poster img,.l308-review__poster-ph{width:120px}
  .l308-reviews--home > *:nth-child(3){display:none}
  .l308-reviews--main > *:nth-child(n+7){display:none}
}

/* Single review hero with a poster. */
.l308-review-hero{display:flex;gap:clamp(20px,4vw,44px);align-items:flex-start;flex-wrap:wrap}
.l308-review-hero__poster{flex:0 0 clamp(210px,33vw,300px);display:flex;flex-direction:column;gap:10px}
.l308-review-hero__poster img{
  width:100%;aspect-ratio:2/3;object-fit:cover;display:block;border-radius:10px;
  box-shadow:0 18px 44px rgba(0,0,0,.5);background:var(--l308-panel-2);
}
.l308-review-hero__text{flex:1;min-width:260px}

/*
 * Where to watch: compact "Now Streaming/Watch Now" badge under the
 * poster (or byline, no poster), links to .../watch/. That URL opens
 * the full panel, hides the badge and surrounding title/body -
 * .l308-watch-scope is the shared ancestor PHP marks .is-watch-open
 * (server-rendered, works without JS too). watch.js makes the swap instant.
 */
.l308-watch-scope.is-watch-open .l308-watch-hide-when-open{display:none}
.l308-watch-scope.is-watch-open .l308-watch-compact{display:none}
.l308-watch-scope:not(.is-watch-open) .l308-watch--full{display:none}

.l308-watch-compact{
  display:flex;align-items:center;gap:12px;
  background:var(--l308-panel);border:1px solid var(--l308-line);
  padding:10px 14px;border-radius:10px;text-decoration:none;
  transition:border-color .15s ease,background .15s ease;
}
.l308-watch-compact:hover,.l308-watch-compact:focus-visible{
  border-color:var(--l308-cyan);background:var(--l308-panel-2);
}
.l308-watch-compact__logo{
  flex:0 0 auto;width:34px;height:34px;border-radius:8px;overflow:hidden;background:var(--l308-panel-2);
}
.l308-watch-compact__logo img{width:100%;height:100%;display:block;object-fit:cover}
.l308-watch-compact__logo-ph{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  font-size:14px;font-weight:700;color:var(--l308-fg-mute);
}
.l308-watch-compact__copy{display:flex;flex-direction:column;gap:1px;min-width:0}
.l308-watch-compact__label{font-size:13px;font-weight:700;color:#FFFFFF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l308-watch-compact__cta{font-size:12px;font-weight:600;color:var(--l308-cyan)}
/* Standalone layouts (no poster) stack the badge under the byline instead. */
.l308-watch-compact--standalone{margin-top:16px;max-width:280px}
/* Poster layouts: badge sits below the title card, matches poster width. */
.l308-watch-compact--below-title{margin-top:16px;width:100%;max-width:clamp(210px,33vw,300px)}

/*
 * Full panel: JustWatch-style card - header, "available to..."
 * sentence, then Stream/Rent/Buy, all at once.
 */
.l308-watch--full{
  background:rgba(20,24,31,.72);border:1px solid var(--l308-line);
  padding:clamp(20px,2.6vw,28px);border-radius:12px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.l308-watch__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.l308-watch__jw{
  display:inline-flex;align-items:center;gap:8px;
  font-size:15px;font-weight:800;color:#FFFFFF;text-decoration:none;
}
.l308-watch__jw:hover{color:var(--l308-cyan)}
.l308-watch__jw-logo{height:20px;width:auto;display:block}
.l308-watch__close{
  display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
  color:var(--l308-fg-mute);font-size:20px;line-height:1;text-decoration:none;
  transition:background .15s ease,color .15s ease;
}
.l308-watch__close:hover,.l308-watch__close:focus-visible{background:var(--l308-panel-2);color:#FFFFFF}
.l308-watch__intro{margin:0 0 18px;font-size:13.5px;line-height:1.6;color:var(--l308-fg-mute)}
.l308-watch__groups{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 20px}
.l308-watch__group{margin-bottom:0}
.l308-watch__group-label{
  display:block;margin-bottom:10px;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--l308-fg-mute);
}
.l308-watch__row{display:flex;flex-wrap:wrap;gap:10px}
.l308-watch__provider{
  display:block;width:52px;height:52px;flex:0 0 auto;
  border-radius:11px;overflow:hidden;background:var(--l308-panel-2);
  transition:transform .15s ease;
}
@media(max-width:700px){
  .l308-watch__groups{grid-template-columns:1fr}
}
a.l308-watch__provider:hover,a.l308-watch__provider:focus-visible{transform:translateY(-2px)}
.l308-watch__provider img{width:100%;height:100%;display:block;object-fit:cover}
.l308-watch__provider-ph{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  font-size:13px;font-weight:700;color:var(--l308-fg-mute);
}
.l308-watch__credit{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--l308-line);font-size:10.5px;line-height:1.5;color:var(--l308-fg-faint)}
/* Compact teaser - "Where to watch" button with JustWatch logo */
.l308-watch--compact{margin-top:12px}
.l308-watch__teaser{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:var(--l308-panel);border:1px solid var(--l308-line);border-radius:8px;text-decoration:none;color:var(--l308-fg);transition:border-color .15s ease}
.l308-watch__teaser:hover,.l308-watch__teaser:focus-visible{border-color:var(--l308-cyan)}
.l308-watch__teaser .l308-watch__jw-logo{height:16px;width:auto;display:block}
.l308-watch__teaser-label{font-size:13px;font-weight:600;color:var(--l308-fg-strong)}
.l308-watch__teaser-arrow{font-size:16px;color:var(--l308-cyan);line-height:1}
/* JustWatch widget container - let it fill the panel width */
.l308-watch__widget-wrap{margin:0 0 16px;min-height:80px}
.l308-watch__widget-wrap [data-jw-widget]{width:100%}

/* TMDB attribution credit, shown wherever TMDB posters appear. */
.l308-api-credits{
  display:flex;align-items:flex-start;gap:32px;flex-wrap:wrap;
  margin:clamp(28px,4vw,44px) 0 0;padding:22px 0 4px;
  border-top:1px solid var(--l308-line);
}
/* Section with only a credit at the foot needs little bottom room. */
.l308-section--credit-foot{padding-bottom:clamp(20px,3vw,32px)}
.l308-api-credit{display:flex;align-items:center;gap:14px;flex:1;min-width:260px}
.l308-api-credit img{display:block;flex:0 0 auto;opacity:.85}
.l308-api-credit p{margin:0;font-size:12px;line-height:1.5;color:var(--l308-fg-mute)}
/* Keep the old class working for any legacy templates still using it */
.l308-tmdb-credit{display:flex;align-items:center;gap:14px;margin:clamp(28px,4vw,44px) 0 0;padding:22px 0 clamp(20px,3vw,32px);border-top:1px solid var(--l308-line)}
.l308-tmdb-credit img{display:block;flex:0 0 auto;opacity:.9}
.l308-tmdb-credit p{margin:0;font-size:12px;line-height:1.5;color:var(--l308-fg-mute)}


/* --------------------------------------------------------------------------
   14. TEAM
   -------------------------------------------------------------------------- */
.l308-team{
  display:flex;
  flex-wrap:wrap;
  gap:var(--l308-gutter);
  
}
/* Flex not grid - row only holds as many cards as there are members.
   Grid reserves its full column count regardless, leaving an empty
   slot for a missing fifth lecturer. Each card grows to fill the row. */
.l308-team > *{
  flex:1 1 230px;
  max-width:340px;
  min-width:0;
}
.l308-member{background:var(--l308-panel);overflow:hidden}
.l308-member__img{aspect-ratio:1;background:var(--l308-panel-2);position:relative;overflow:hidden}
.l308-member__img img{width:100%;height:100%;object-fit:cover}
.l308-member__body{padding:18px 20px}
.l308-member h3{font-size:17px;margin-bottom:5px}
.l308-member__role{
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--l308-cyan);
}
.l308-member__bio{margin-top:10px;color:var(--l308-fg-mute);font-size:13.5px;line-height:1.6}


/* --------------------------------------------------------------------------
   15. FORMS
   -------------------------------------------------------------------------- */
.l308-field{margin-bottom:20px}
label{
  display:block;margin-bottom:8px;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--l308-fg-mute);
}
input[type=text],input[type=email],input[type=url],input[type=search],textarea,select{
  width:100%;
  background:var(--l308-panel);
  border:1px solid var(--l308-line-strong);
  border-radius:0;
  color:var(--l308-fg);
  padding:14px 16px;
  font-size:15px;
  transition:border-color .2s ease;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--l308-cyan)}
textarea{resize:vertical;min-height:140px}
::placeholder{color:var(--l308-fg-faint)}

button[type=submit],input[type=submit]{
  background:#28AADC;border:2px solid #28AADC;color:#04121A;
  border-radius:0;padding:15px 30px;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;transition:background .2s ease,border-color .2s ease;
}
button[type=submit]:hover,input[type=submit]:hover{background:#4FBDE6;border-color:#4FBDE6}

.l308-notice{
  padding:15px 18px;margin-bottom:22px;
  border:1px solid var(--l308-cyan);color:var(--l308-cyan);
  font-size:14px;line-height:1.6;
}


/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */
.l308-foot{
  border-top:1px solid var(--l308-line);
  padding-block:clamp(40px,5.5vw,68px) 26px;
}
.l308-foot__grid{
  display:grid;grid-template-columns:1.6fr repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,44px);
  padding-bottom:34px;border-bottom:1px solid var(--l308-line);
}
@media(max-width:800px){.l308-foot__grid{grid-template-columns:1fr 1fr}}
/*
 * The footer brand. Landscape lockup not stacked - sits above a
 * paragraph, a near-square mark looks stranded beside body text.
 * Larger than the masthead - footer has room, logo's the last thing
 * anyone sees.
 */
.l308-foot__brand{margin-bottom:18px}
.l308-foot__brand img{height:52px;width:auto;display:block}
.l308-foot__note{color:var(--l308-fg-faint);font-size:12.5px;line-height:1.65;max-width:38ch}
@media(max-width:800px){
  /* Narrow screen: footer stacks, centre the brand with the text */
  .l308-foot__brand{display:flex;justify-content:center}
  .l308-foot__note{max-width:none;text-align:center}
}
.l308-foot h5{
  margin-bottom:14px;
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#FFFFFF;
}
.l308-foot a{display:block;margin-bottom:10px;color:var(--l308-fg-mute);font-size:13.5px}
.l308-foot a:hover{color:var(--l308-cyan)}
.l308-foot__base{
  display:flex;justify-content:flex-start;gap:16px;flex-wrap:wrap;
  padding-top:22px;margin-top:24px;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--l308-fg-faint);
}
.l308-foot__social{display:flex;gap:20px}
.l308-foot__social a{display:inline;margin:0}
.l308-foot__legal{
  display:flex;justify-content:space-between;align-items:center;gap:14px 24px;flex-wrap:wrap;
  padding-top:16px;margin-top:16px;border-top:1px solid var(--l308-line);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--l308-fg-faint);
}
.l308-foot__policies{display:flex;gap:20px;flex-wrap:wrap}
.l308-foot__policies a{display:inline;margin:0;color:var(--l308-fg-faint)}
.l308-foot__policies a:hover{color:var(--l308-cyan)}


/* --------------------------------------------------------------------------
   17. MOTION
   -------------------------------------------------------------------------- */
.l308-reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.l308-reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .l308-reveal{opacity:1;transform:none}
}


/* --------------------------------------------------------------------------
   18. WATCH DIARIES
   Letterboxd and Serializd cards on the reviews page. Lead off site -
   given weight, not buried as text links.
   -------------------------------------------------------------------------- */
.l308-diaries{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--l308-gutter);
}
@media(max-width:760px){.l308-diaries{grid-template-columns:1fr}}

.l308-diary{
  position:relative;
  /*
   * Column layout - pushes the link to the bottom of the card.
   * Without it, the two cards' links sit at different heights
   * whenever paragraphs run to different lengths.
   */
  display:flex;
  flex-direction:column;
  background:var(--l308-panel);
  padding:34px 28px 30px;
  transition:background .2s ease,transform .25s ease;
}
.l308-diary:hover{background:var(--l308-panel-2);transform:translateY(-3px)}
.l308-diary__bar{position:absolute;inset:0 0 auto 0;height:4px}
.l308-diary--letterboxd .l308-diary__bar{background:var(--l308-green)}
.l308-diary--serializd .l308-diary__bar{background:var(--l308-blue)}
.l308-diary__ico{display:block;font-size:32px;line-height:1;margin-bottom:16px}
.l308-diary__logo{
  /* Pre-normalised - each logo centred on a common-height transparent
     canvas, one height aligns them on a shared baseline. */
  height:34px;width:auto;max-width:100%;
  object-fit:contain;object-position:left center;display:block;
}
.l308-diary__logoslot{
  display:flex;align-items:center;justify-content:flex-start;
  height:40px;width:100%;margin-bottom:18px;
}
.l308-diary h3{font-size:23px;margin-bottom:11px}
.l308-diary p{color:var(--l308-fg-mute);font-size:14.5px;line-height:1.65;max-width:44ch}
.l308-diary__go{
  display:inline-block;
  /* auto margin takes the slack - link sits on the taller card's
     baseline, both line up whatever the paragraphs do */
  margin-top:auto;
  padding-top:18px;
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.l308-diary--letterboxd .l308-diary__go{color:var(--l308-green)}
.l308-diary--serializd .l308-diary__go{color:var(--l308-cyan)}
.l308-diary--tmdb .l308-diary__bar{background:#01b4e4}
.l308-diary--tmdb .l308-diary__go{color:#01b4e4}

/* Cross-platform share row under a review. */
.l308-review-share{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:clamp(26px,4vw,40px);padding-top:18px;
  border-top:1px solid var(--l308-line);
}
.l308-review-share__lbl{
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--l308-fg-mute);
}
.l308-review-share a{
  font-size:13px;font-weight:600;color:var(--l308-fg);
  padding:6px 14px;border:1px solid var(--l308-line-strong);border-radius:999px;
  transition:border-color .15s ease,color .15s ease;
}
.l308-review-share a:hover{border-color:var(--l308-cyan);color:#FFFFFF}


/* --------------------------------------------------------------------------
   19. TEAM GROUPS
   Staff, then HNC A and HNC B, each headed - teams read as teams, not
   one long list of faces.
   -------------------------------------------------------------------------- */
.l308-teamgroup{margin-bottom:clamp(34px,5vw,58px)}
.l308-teamgroup:last-child{margin-bottom:0}
.l308-teamgroup__head{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-bottom:22px;padding-bottom:16px;
  border-bottom:1px solid var(--l308-line);
}
.l308-teamgroup__head h3{font-size:clamp(20px,2.6vw,30px);margin:0}
.l308-teamgroup__head .l308-head__more{margin-left:auto}
.l308-pill{
  display:inline-block;padding:6px 13px;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border-radius:2px;
}


/* --------------------------------------------------------------------------
   20. STEP CARDS
   Used for the three production stages and for what students gain.
   -------------------------------------------------------------------------- */
.l308-steps{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--l308-gutter);
}
@media(max-width:900px){.l308-steps{grid-template-columns:1fr}}
.l308-step{background:var(--l308-panel);padding:30px 26px}
.l308-step__n{
  display:block;margin-bottom:14px;
  font-family:var(--l308-display);font-weight:900;font-size:30px;line-height:1;
  color:var(--l308-cyan);
}
.l308-step h3{font-size:20px;margin-bottom:10px}
.l308-step p{color:var(--l308-fg-mute);font-size:14px;line-height:1.65}


/* --------------------------------------------------------------------------
   21. CARRIED OVER MARKUP
   inc-team-data.php renders member cards with its own class names,
   kept unchanged - dashboard and credits modal keep working. These
   style that markup. None collide with a WordPress body class.
   -------------------------------------------------------------------------- */
.member{background:var(--l308-panel);overflow:hidden}
.member__ph{
  aspect-ratio:1;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--l308-display);font-weight:900;font-size:34px;color:#FFFFFF;
}
.member__ph--photo{padding:0}
.member__ph img{width:100%;height:100%;object-fit:cover}
.member h3{margin:16px 20px 0;font-size:18px;line-height:1.2}
.member .role{margin:3px 20px 0;color:var(--l308-fg-mute);font-size:13px}
.member__bio{padding:18px 20px;color:var(--l308-fg-mute);font-size:13.5px;line-height:1.6}
.member__creditsbtn{
  display:inline-flex;align-items:center;gap:7px;
  margin:0 20px 18px;padding:9px 14px;
  background:transparent;border:1px solid var(--l308-line-strong);color:#FFFFFF;
  font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;transition:background .2s ease,color .2s ease;
}
.member__creditsbtn:hover{background:#FFFFFF;color:var(--l308-ink)}
.member__creditscount{color:var(--l308-cyan)}

.team-group{margin-bottom:clamp(34px,5vw,58px)}
.team-group__title{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--l308-line);
}
.team-group__title h2{font-size:clamp(20px,2.6vw,30px);margin:0}
.pill{
  display:inline-block;padding:6px 13px;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border-radius:2px;color:#04121A;
}
.ink-soft{color:var(--l308-fg-mute)}

.rev-filter{display:flex;gap:8px;flex-wrap:wrap}
.tk-chip{
  display:inline-block;
  /* Buttons need background/font set explicitly, or the browser
     supplies its own grey and system font */
  background:transparent;
  font-family:var(--l308-ui);
  padding:9px 15px;
  border:1px solid var(--l308-line-strong);
  border-radius:0;
  font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--l308-fg-mute);
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.tk-chip:hover{color:#FFFFFF;border-color:var(--l308-fg-faint);background:var(--l308-panel)}
.tk-chip.is-on{background:var(--l308-cyan);border-color:var(--l308-cyan);color:#04121A}
.tk-chip:focus-visible{outline:2px solid var(--l308-cyan);outline-offset:2px}

.stars-rate{position:relative;display:inline-block}
.stars-rate__bg{color:var(--l308-line-strong)}
.stars-rate__fill{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:var(--l308-yellow)}

.credits-modal{
  position:fixed;inset:0;z-index:200;
  display:none;align-items:center;justify-content:center;padding:24px;
}
.credits-modal.is-on{display:flex}
.credits-modal__backdrop{position:absolute;inset:0;background:rgba(4,6,9,.86)}
.credits-modal__panel{
  position:relative;z-index:1;
  background:var(--l308-panel);border:1px solid var(--l308-line-strong);
  max-width:520px;width:100%;max-height:80vh;overflow:auto;padding:28px;
}
.credits-modal__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px}
.credits-modal__title{font-family:var(--l308-display);font-weight:800;font-size:22px;color:#FFFFFF}
.credits-modal__sub{color:var(--l308-cyan);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.credits-modal__x{
  margin-left:auto;background:none;border:none;color:var(--l308-fg-mute);
  font-size:24px;line-height:1;cursor:pointer;padding:0 4px;
}
.credits-modal__x:hover{color:#FFFFFF}
.credits-modal__bio{color:var(--l308-fg-mute);font-size:14px;line-height:1.7;margin-bottom:18px}
.credits-modal__divider{height:1px;background:var(--l308-line);margin:18px 0}
.credits-modal__list{display:flex;flex-direction:column;gap:12px}
.credits-modal__item{display:flex;gap:14px;align-items:baseline}
.credits-modal__role{color:var(--l308-cyan);font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;flex:none;min-width:130px}
.credits-modal__name{color:#FFFFFF;font-size:14.5px}


/* --------------------------------------------------------------------------
   22. STUDENT AREA
   The templates, the analysis framework and the interactive tools, carried
   over from the previous site with their class names and ids unchanged so
   toolkit.js and story.js keep working. These give that markup the current
   design. None of these names collide with a WordPress body class.
   -------------------------------------------------------------------------- */

/* the card blocks used for templates and guides */
.card{
  position:relative;display:block;
  background:var(--l308-panel);
  padding:26px 24px;
  color:inherit;
  transition:background .2s ease,transform .25s ease;
}
.card:hover{background:var(--l308-panel-2);transform:translateY(-3px)}
.card__bar{position:absolute;inset:0 0 auto 0;height:4px;background:var(--l308-cyan)}
.c-cyan .card__bar,.c-cyan.card .card__bar{background:var(--l308-cyan)}
.c-magenta .card__bar,.c-magenta.card .card__bar{background:var(--l308-magenta)}
.c-yellow .card__bar,.c-yellow.card .card__bar{background:var(--l308-yellow)}
.c-green .card__bar,.c-green.card .card__bar{background:var(--l308-green)}
.c-blue .card__bar,.c-blue.card .card__bar{background:var(--l308-blue)}
.c-red .card__bar,.c-red.card .card__bar{background:var(--l308-red)}
.card__ico{display:block;font-size:28px;line-height:1;margin-bottom:14px}
.card h3{font-size:19px;margin-bottom:10px}
.card p{color:var(--l308-fg-mute);font-size:14px;line-height:1.65}
.card .more{
  display:inline-block;margin-top:14px;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--l308-cyan);
}

/* the grids the old markup uses */
.grid{display:flex;flex-wrap:wrap;gap:var(--l308-gutter);}
/* Contact page: classes from the carried-over markup, styled here for
   two columns and proper form fields. */
.page-template-page-contact .wrap,.wrap{max-width:var(--l308-measure);margin-inline:auto;padding-inline:var(--l308-edge)}
.grid-2{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:54px;align-items:start}
@media (max-width:820px){.grid-2{grid-template-columns:1fr}}
.form .field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.form .field label{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--l308-fg-mute)}
.form .field input,.form .field select,.form .field textarea{
  width:100%;background:var(--l308-ink);border:1px solid var(--l308-line-strong);
  color:var(--l308-fg);padding:13px 14px;font-size:15px;font-family:inherit;border-radius:2px;
}
.form .field input:focus,.form .field select:focus,.form .field textarea:focus{outline:none;border-color:var(--l308-cyan)}
.form .field textarea{min-height:150px;resize:vertical}
.info-row{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px}
.info-row .ico{flex:0 0 auto;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:9px;font-size:18px}
.info-row strong{color:var(--l308-fg-strong)}
.ink-soft{color:var(--l308-fg-mute)}
.grid > *{flex:1 1 260px;min-width:0}
.grid-2 > *{flex:1 1 340px;max-width:640px}
.grid-3 > *{flex:1 1 260px;max-width:460px}
/* Card with the example graphic needs extra width - text column
   still reads similar width to the other two after the graphic. */
.grid-3 > .card--witheg{flex-grow:2.1;max-width:640px}
.grid.tint > *{background:var(--l308-panel)}

/* the numbered cards */
.numcard{background:var(--l308-panel);padding:28px 24px}
.numcard .n{
  display:block;margin-bottom:12px;
  font-family:var(--l308-display);font-weight:900;font-size:30px;line-height:1;
  color:var(--l308-cyan);
}
.numcard h3{font-size:19px;margin-bottom:9px}
.numcard p{color:var(--l308-fg-mute);font-size:14px;line-height:1.65}

/* the page head the old markup uses, mapped onto the current one */
.phead{padding-block:clamp(46px,7vw,96px) clamp(24px,3.5vw,44px)}
.phead__eyebrow{
  display:inline-block;margin-bottom:18px;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--l308-cyan);
}
.phead h1{font-size:clamp(32px,5.6vw,64px);line-height:1.05;margin:0}
.phead p{margin-top:16px;max-width:72ch;color:var(--l308-fg-mute);font-size:16px;line-height:1.7}
.phead__blobs,.blob{display:none}

/* buttons in the carried over markup */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border:2px solid transparent;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.btn--primary,.btn--cyan{background:#28AADC;border-color:#28AADC;color:#04121A}
.btn--primary:hover,.btn--cyan:hover{background:#4FBDE6;border-color:#4FBDE6}
.btn--ghost{background:transparent;border-color:rgba(255,255,255,.34);color:#FFFFFF}
.btn--ghost:hover{background:#FFFFFF;color:#0B0D10}
.btn--big{padding:17px 32px;font-size:13px}
.cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px}

/* ---- the interactive tools ---- */
.tk{display:flex;flex-direction:column;gap:var(--l308-gutter);}

.tk-tool{background:var(--l308-panel);border-left:4px solid var(--l308-cyan)}
.tk-tool[open]{background:var(--l308-panel-2)}
.tk-tool__head{
  display:flex;align-items:center;gap:16px;
  padding:20px 24px;cursor:pointer;list-style:none;
}
.tk-tool__head::-webkit-details-marker{display:none}
.tk-tool__head h3{font-size:18px;margin:0}
.tk-tool__head > div:nth-child(2){flex:1;min-width:0}
.tk-tool__ico{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;flex:none;font-size:19px;
}
.tk-tool__chev{
  color:var(--l308-fg-mute);font-size:11px;
  transition:transform .25s ease;
}
.tk-tool[open] .tk-tool__chev{transform:rotate(180deg)}

/* How-to-review guide body */
.l308-guide{border-left-color:var(--l308-magenta)}
.l308-guide__body{padding:8px 26px 26px}
.l308-guide__sec{margin-bottom:26px}
.l308-guide__sec:last-child{margin-bottom:0}
.l308-guide__sec h3{
  font-family:var(--l308-display);font-size:19px;color:var(--l308-fg-strong);
  margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--l308-line);
}
.l308-guide__body p{color:var(--l308-fg);line-height:1.7;margin:0 0 12px}
.l308-guide__body ul{margin:0 0 12px;padding-left:22px;list-style:disc}
.l308-guide__body ol{margin:0 0 12px;padding-left:22px;list-style:decimal}
.l308-guide__body li{color:var(--l308-fg-mute);line-height:1.6;margin-bottom:7px}
.l308-guide__body li::marker{color:var(--l308-blue)}
.l308-guide__steps li{color:var(--l308-fg)}
.l308-guide__steps li strong{color:var(--l308-cyan)}
.tk-tool > *:not(.tk-tool__head){padding:0 24px 24px}

.tk-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
.tk-row > *{flex:1 1 150px;min-width:0}
.tk-input{
  width:100%;
  background:var(--l308-ink);
  border:1px solid var(--l308-line-strong);
  color:var(--l308-fg);
  padding:12px 14px;font-size:14px;
}
.tk-input:focus{outline:none;border-color:var(--l308-cyan)}

.tk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;flex:none;
  font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  border:2px solid transparent;cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
}
.tk-btn--cyan{background:#28AADC;border-color:#28AADC;color:#04121A}
.tk-btn--cyan:hover{background:#4FBDE6;border-color:#4FBDE6}
.tk-btn--magenta{background:#E61E8C;border-color:#E61E8C;color:#FFFFFF}
.tk-btn--magenta:hover{background:#F04A9F;border-color:#F04A9F}
.tk-btn--ghost{background:transparent;border-color:var(--l308-line-strong);color:#FFFFFF}
.tk-btn--ghost:hover{background:#FFFFFF;color:var(--l308-ink)}

.tk-out{
  background:var(--l308-ink);
  border:1px solid var(--l308-line);
  padding:16px 18px;margin-top:14px;
  font-size:14px;line-height:1.7;color:var(--l308-fg);
}
.tk-out:empty{display:none}

/* ---- Interactive tool outputs (generated by toolkit.js) ---------------------
   Render inside the Student Area tools. Without styling they collapse
   into unreadable inline text - each output type gets a dark-theme
   layout here. */

/* Running-order builder: one row per segment, in aligned columns. */
.tk-seg{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;margin-bottom:8px;
  background:var(--l308-panel);border:1px solid var(--l308-line);border-radius:6px;
}
.tk-seg__grip{color:var(--l308-fg-faint);cursor:move;flex:0 0 auto}
.tk-seg__name{flex:1 1 auto;color:var(--l308-fg);min-width:0}
.tk-seg__time{flex:0 0 auto;color:var(--l308-fg-strong);font-variant-numeric:tabular-nums;font-weight:600}
.tk-seg__del{
  flex:0 0 auto;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--l308-line-strong);border-radius:5px;
  color:var(--l308-fg-mute);cursor:pointer;font-size:14px;line-height:1;
}
.tk-seg__del:hover{border-color:var(--l308-cyan);color:#FFFFFF}

/* Role-rotation tracker: a readable table with spaced cells. */
.tk-rot{overflow-x:auto;margin-top:6px}
.tk-rottable{width:100%;border-collapse:collapse;font-size:13px}
.tk-rottable th,.tk-rottable td{
  padding:9px 8px;text-align:center;
  border-bottom:1px solid var(--l308-line);white-space:nowrap;
}
.tk-rottable th{
  color:var(--l308-fg-mute);font-weight:600;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;
}
.tk-rotname{text-align:left !important;color:var(--l308-fg-strong);font-weight:600}
.tk-rotcount{color:var(--l308-fg-strong);font-weight:700;font-variant-numeric:tabular-nums}
.tk-tick{
  width:26px;height:26px;border-radius:5px;cursor:pointer;
  background:var(--l308-ink);border:1px solid var(--l308-line-strong);
  color:#04121A;font-size:14px;line-height:1;
}
.tk-tick.is-on{background:var(--l308-cyan);border-color:var(--l308-cyan);color:#04121A;font-weight:700}
.tk-tick:hover{border-color:var(--l308-cyan)}

/* Shot-type reference: clean written cards, name only, details on hover. */
.tk-shotcard{
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:16px 14px;cursor:pointer;min-height:56px;
  background:var(--l308-panel);border:1px solid var(--l308-line);border-radius:8px;
  color:var(--l308-fg);transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.tk-shotcard:hover,.tk-shotcard.is-on{border-color:var(--l308-cyan);background:var(--l308-panel-2);color:#FFFFFF}
.tk-shotcard__k{font-size:14px;font-weight:600;line-height:1.3}
.tk-shotcard__eg{display:block;margin-top:10px;color:var(--l308-fg-mute);font-size:13.5px;line-height:1.6}
.tk-shotcard__eg strong{color:var(--l308-fg)}

/* Stage picker badges (producible check / planning). */
.tk-stage{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;margin:0 8px 8px 0;cursor:pointer;
  background:var(--l308-panel);border:1px solid var(--l308-line-strong);border-radius:20px;
  color:var(--l308-fg);font-size:13px;
}
.tk-stage.is-on{background:var(--l308-cyan);border-color:var(--l308-cyan);color:#04121A}
.tk-stage__ic{font-weight:700}

/* Tags and pull-quote helpers. */
.tk-tag{
  display:inline-block;padding:4px 10px;margin:0 6px 6px 0;
  background:var(--l308-panel-2);border:1px solid var(--l308-line);border-radius:14px;
  font-size:12px;color:var(--l308-fg-mute);
}
.tk-note{color:var(--l308-fg-mute);font-size:13px;margin-top:8px}
.tk-total{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--l308-line);
}
.tk-total > span:first-child{color:var(--l308-fg-mute);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.tk-total__val{color:var(--l308-fg-strong);font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.tk-pq{margin-top:12px;padding-left:14px;border-left:3px solid var(--l308-cyan)}
.tk-pq__q{color:var(--l308-fg);font-style:italic}

.tk-meter{
  height:8px;background:var(--l308-ink);
  border:1px solid var(--l308-line);overflow:hidden;margin:12px 0;
}
.tk-meter__fill{height:100%;background:var(--l308-cyan);transition:width .3s ease}

.tk-spinner{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.tk-spin__row{
  display:flex;align-items:center;gap:14px;
  padding:12px 16px;background:var(--l308-ink);border:1px solid var(--l308-line);
}
.tk-spin__lab{
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--l308-fg-mute);flex:none;min-width:96px;
}
.tk-spin__val{color:#FFFFFF;font-size:15px;font-weight:600}

.tk-shotgrid{display:flex;flex-wrap:wrap;gap:var(--l308-gutter);}
.tk-shotgrid > *{flex:1 1 180px;max-width:300px;background:var(--l308-panel);padding:18px 20px}
.tk-shotgrid h4{font-size:15px;margin-bottom:6px;color:#FFFFFF}
.tk-shotgrid p{color:var(--l308-fg-mute);font-size:13px;line-height:1.6}

/* the five analysis questions */
.bg-soft{background:var(--l308-panel)}


/* --------------------------------------------------------------------------
   23. STORY GENERATOR
   Preview canvas IS the export, scaled down by CSS - one drawing
   routine in story.js renders both, preview and download can't drift apart.
   -------------------------------------------------------------------------- */
.sg-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,400px);gap:38px;align-items:start}
@media(max-width:860px){.sg-wrap{grid-template-columns:1fr}}

.sg-panel{background:var(--l308-panel);border:1px solid var(--l308-line);padding:24px}
.sg-panel h3{
  font-family:var(--l308-display);font-weight:800;
  font-size:21px;color:var(--l308-fg-strong);margin:0 0 18px;
}
.sg-panel label{
  display:block;margin:18px 0 7px;
  font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--l308-fg-mute);
}
.sg-panel label:first-of-type{margin-top:0}
.sg-panel input[type=text],
.sg-panel input[type=file]{
  width:100%;padding:11px 12px;
  background:var(--l308-panel-2);border:1px solid var(--l308-line);
  color:var(--l308-fg-strong);font-family:var(--l308-ui);font-size:14px;
}
.sg-panel input:focus{outline:none;border-color:var(--l308-cyan)}

.sg-seg{display:flex;margin-bottom:6px;border:1px solid var(--l308-line-strong)}
.sg-seg button{
  flex:1;padding:11px 8px;background:transparent;border:none;
  color:var(--l308-fg-mute);cursor:pointer;
  font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  transition:background .2s ease,color .2s ease;
}
.sg-seg button:hover{color:#FFFFFF}
.sg-seg button.is-on,.sg-seg button[aria-pressed="true"]{background:var(--l308-cyan);color:var(--l308-accent-ink)}

.sg-status{font-size:12px;color:var(--l308-fg-mute);margin-top:10px}
.sg-status.is-ok{color:var(--l308-green)}
.sg-hint,.sg-note{color:var(--l308-fg-faint);font-size:12.5px;line-height:1.6;margin-top:8px}

/* poster search */
.sg-searchrow{display:flex;gap:8px}
.sg-searchrow input{flex:1}
.sg-searchbtn{
  padding:0 18px;border:none;cursor:pointer;
  background:var(--l308-cyan);color:var(--l308-accent-ink);
  font-family:var(--l308-ui);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.sg-searchbtn:hover{filter:brightness(1.12)}
.sg-results{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;
  max-height:320px;overflow-y:auto;
}
.sg-result{
  display:flex;flex-direction:column;gap:5px;padding:0;cursor:pointer;
  background:var(--l308-panel-2);border:1px solid var(--l308-line);
  color:var(--l308-fg);text-align:left;
  transition:border-color .15s ease,transform .1s ease;
}
.sg-result:hover{border-color:var(--l308-cyan)}
.sg-result.is-picked{border-color:var(--l308-cyan);box-shadow:0 0 0 2px rgba(40,170,220,.4)}
.sg-result img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;background:#0B0D10}
.sg-result span{
  font-size:10.5px;line-height:1.3;padding:5px 6px 7px;color:var(--l308-fg-mute);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sg-more{margin-top:14px}
.sg-more summary{
  cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--l308-fg-mute);padding:6px 0;
}
.sg-more summary:hover{color:#FFFFFF}
.sg-more input[type=text]{margin-top:8px}

/* the rating: a live star readout above an unmissable slider */
.sg-ratingbox{padding:14px;background:var(--l308-panel-2);border:1px solid var(--l308-line)}
.sg-ratingstars{display:flex;align-items:center;gap:5px;margin-bottom:12px}
.sg-ratingstars .st{
  font-size:26px;line-height:1;color:transparent;
  background:linear-gradient(90deg, var(--sc,#00E054) var(--p,100%), rgba(255,255,255,.22) var(--p,100%));
  -webkit-background-clip:text;background-clip:text;
}
.sg-ratingstars b{margin-left:10px;color:var(--l308-yellow);font-size:18px}
.sg-ratingbox input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:34px;background:transparent;cursor:grab;
}
.sg-ratingbox input[type=range]:active{cursor:grabbing}
.sg-ratingbox input[type=range]::-webkit-slider-runnable-track{
  height:8px;border-radius:4px;background:rgba(255,255,255,.18);
}
.sg-ratingbox input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:28px;height:28px;margin-top:-10px;border-radius:50%;
  background:var(--l308-cyan);border:3px solid #FFFFFF;
  box-shadow:0 0 0 4px rgba(40,170,220,.28),0 3px 8px rgba(0,0,0,.5);
}
.sg-ratingbox input[type=range]::-moz-range-track{
  height:8px;border-radius:4px;background:rgba(255,255,255,.18);
}
.sg-ratingbox input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:var(--l308-cyan);border:3px solid #FFFFFF;
  box-shadow:0 0 0 4px rgba(40,170,220,.28),0 3px 8px rgba(0,0,0,.5);
}
.sg-ratingbox input[type=range]:focus-visible{outline:2px solid var(--l308-cyan);outline-offset:4px}
.sg-rangehints{
  display:flex;justify-content:space-between;margin-top:2px;
  font-size:10px;color:var(--l308-fg-mute);letter-spacing:.08em;text-transform:uppercase;
}

.sg-go{
  margin-top:24px;width:100%;padding:15px;border:none;cursor:pointer;
  background:var(--l308-cyan);color:var(--l308-accent-ink);
  font-family:var(--l308-ui);
  font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  transition:filter .2s ease;
}
.sg-go:hover{filter:brightness(1.12)}
.sg-seg--modes{flex-wrap:wrap}
.sg-seg--modes button{flex:1 1 30%;min-width:96px}
.sg-go--alt{
  margin-top:10px;background:transparent;
  border:1px solid var(--l308-line-strong);color:var(--l308-fg);
}
.sg-go--alt:hover{filter:none;border-color:var(--l308-cyan);color:#FFFFFF}
/* Film and TV export buttons sit side by side. */
.sg-export-row{display:flex;gap:10px}
.sg-editorial__rule{border:none;border-top:1px solid var(--l308-line);margin:22px 0 16px}
.sg-editorial__label{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--l308-fg-mute);margin-bottom:8px}
.sg-editorial__select{
  width:100%;background:var(--l308-ink);border:1px solid var(--l308-line-strong);
  color:var(--l308-fg);padding:12px 14px;font-size:14px;font-family:inherit;margin-bottom:10px;
}
.sg-editorial__select:focus{outline:none;border-color:var(--l308-cyan)}
.sg-export-row .sg-go{flex:1 1 0;min-width:0}

/* the preview: the export canvas, scaled down */
.sg-stagewrap{position:sticky;top:88px}
#sg-stage{
  width:100%;max-width:400px;display:block;margin:0 auto;
  border:1px solid var(--l308-line);
}


/* --------------------------------------------------------------------------
   24. THE WORDMARK
   --------------------------------------------------------------------------
   STUDIO white above L308 brand cyan, Archivo 900 (already loaded).
   Live text not an image - sharp at any size, scales with layout,
   recolours for a light background with no re-export.

   Two lines optically matched - STUDIO's smaller but tracked out to
   span the same width as L308 beneath it.
   -------------------------------------------------------------------------- */
.l308-wordmark{
  display:inline-flex;flex-direction:column;
  font-family:var(--l308-display);
  font-weight:900;
  line-height:.86;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.l308-wordmark__top{
  font-size:.42em;
  letter-spacing:.34em;
  /* Tracking pushes the last letter past the edge - pull it back */
  margin-right:-.34em;
  color:#FFFFFF;
}
.l308-wordmark__bottom{
  font-size:1em;
  color:var(--l308-cyan);
}

/* on a light background */
.l308-wordmark--dark .l308-wordmark__top{color:#0B0D10}

/* the masthead lockup, sized to the bar */
.l308-brand .l308-wordmark{font-size:26px}

/* the footer can afford to be larger */
.l308-foot__brand .l308-wordmark{font-size:34px}


/* --------------------------------------------------------------------------
   25. SHOWCASE FILTER
   -------------------------------------------------------------------------- */
.l308-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:clamp(20px,3vw,30px)}
.l308-card[hidden]{display:none}


/* --------------------------------------------------------------------------
   26. PLAY MARKER
   Shown on any production with a video - card reads as watchable at
   a glance, not a tiny icon to hunt for.
   -------------------------------------------------------------------------- */
.l308-card__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:5;
  display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;
  border-radius:50%;
  background:rgba(11,13,16,.55);
  border:2px solid rgba(255,255,255,.9);
  color:#FFFFFF;
  backdrop-filter:blur(3px);
  transition:background .25s ease,transform .25s ease,border-color .25s ease;
}
.l308-card__play svg{width:22px;height:22px;margin-left:3px}
.l308-card:hover .l308-card__play{
  background:var(--l308-cyan);
  border-color:var(--l308-cyan);
  color:#04121A;
  transform:translate(-50%,-50%) scale(1.08);
}
@media(max-width:640px){
  .l308-card__play{width:52px;height:52px}
  .l308-card__play svg{width:18px;height:18px}
}


/* --------------------------------------------------------------------------
   27. CARDS WITHOUT AN IMAGE
   No still, no video? Still needs to look intentional - colour wash
   carries it, strand name sits in the empty space.
   -------------------------------------------------------------------------- */
/* Class set by the template, not :not(:has(...)) - some CSS
   minifiers don't understand :has() and silently drop every rule
   after it, leaving most of the site unstyled. Template already
   knows if there's an image, says so directly. */
.l308-card--noimage .l308-card__wash{opacity:1}
.l308-card--noimage::before{
  content:'';
  position:absolute;inset:0;z-index:2;
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.028) 0 2px,
      transparent 2px 9px
    );
  pointer-events:none;
}

/* Wash is what colours an empty card - let it show fully */
.l308-card__wash{opacity:.9}
.l308-card__img + .l308-card__wash{opacity:.55}


/* --------------------------------------------------------------------------
   28. HAIRLINES WITHOUT A BACKGROUND
   --------------------------------------------------------------------------
   These containers used to paint a background so gaps read as a
   hairline. Only worked when a row was full - one item on a row of
   three showed the rest as a grey block, looked like missing content.

   Each child carries its own hairline instead - a lone item sits on
   the page background, nothing beside it.
   -------------------------------------------------------------------------- */
.l308-lanes > *,
.l308-stats > *,
.l308-crew > *,
.l308-reviews > *,
.l308-team > *,
.l308-diaries > *,
.l308-steps > *,
.grid > *,
.tk > *,
.tk-shotgrid > *{
  outline:1px solid var(--l308-line);
  outline-offset:0;
}


/* --------------------------------------------------------------------------
   29. INSTALL INSTRUCTIONS
   Two panels for adding the Production Companion to a phone. Centred
   as a pair - wide screen, they sit together in the middle, not
   stretched to the edges.
   -------------------------------------------------------------------------- */
.l308-pan{
  background:var(--l308-panel);
  overflow:hidden;
  outline:1px solid var(--l308-line);
}
.l308-pan__top{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
  padding:18px 24px;
  color:#FFFFFF;
}
.l308-pan__top h3{margin:0;font-size:19px;color:inherit}
.l308-pan__top span{
  font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  opacity:.85;
}
.l308-pan__body{padding:24px}

.l308-inst{
  counter-reset:step;
  display:flex;flex-direction:column;gap:16px;
  margin:0;padding:0;list-style:none;
}
.l308-inst li{
  position:relative;
  padding-left:42px;
  color:var(--l308-fg);
  font-size:14.5px;line-height:1.65;
}
.l308-inst li::before{
  counter-increment:step;
  content:counter(step);
  position:absolute;left:0;top:0;
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  border:1px solid var(--l308-line-strong);
  font-size:12px;font-weight:700;
  color:var(--l308-cyan);
}
.l308-inst--android li::before{color:var(--l308-green)}
.l308-inst strong{color:#FFFFFF;font-weight:600}
.l308-inst a{color:var(--l308-cyan);text-decoration:underline;text-underline-offset:3px}
.l308-open{display:inline}

/* Centre the pair, stop them stretching on a wide monitor */
.l308-installs{
  justify-content:center;
  max-width:1000px;
  margin-inline:auto;
}
.l308-installs > .l308-pan{flex:1 1 380px;max-width:480px}


/* --------------------------------------------------------------------------
   30. COMPATIBILITY ALIASES
   --------------------------------------------------------------------------
   Templates carried over from the old theme use its variable names.
   Rather than rewrite every reference, old names are aliased to the
   current palette here - markup keeps working, one place to check if
   a colour ever looks wrong.
   -------------------------------------------------------------------------- */
:root{
  --cyan:var(--l308-cyan);
  --red:var(--l308-red);
  --yellow:var(--l308-yellow);
  --green:var(--l308-green);
  --blue:var(--l308-blue);
  --magenta:var(--l308-magenta);

  --ink:var(--l308-fg-strong);
  --ink-soft:var(--l308-fg-mute);
  --paper:var(--l308-ink);
  --line:var(--l308-line);
  --paper-2:var(--l308-panel);

  --shadow:0 18px 44px rgba(0,0,0,.45);
  --shadow-sm:0 8px 20px rgba(0,0,0,.35);
}