/* SFF 2026 - Festival Week: the homepage Week at a Glance in a detailed
   variant (festival overview redesign v2). Scoped to .sff26-fweek; rules
   are written as ".sff26-fweek .sff26-fweek__x" so they outrank the theme's
   element rules. The only !important is phone typography (see the phone
   block). The tiles, bars, gradients, tags and go-circle are the homepage
   module's own. */

.sff26-fweek {
  --sff26-muted: #cfcfcf;
  --sff26-amber: #FCB316;
  --sff26-ease: cubic-bezier(.22, .8, .24, 1);
  --sff26-gut: 20px;
  --sff26-max: var(--forum-content-max, 1416px);
  --sff26-r: 16px;
  box-sizing: border-box;
  position: relative;
  padding: 120px 0 0;
  color: #fff;
  font-family: var(--forum-font, "Open Sans", Arial, sans-serif);
}

/* From tablets up the content lines up with the site header and footer: the
   forum skin's --forum-content-max and --forum-gutter (these fallbacks without it) */
@media (min-width: 768px) {
  .sff26-fweek { --sff26-gut: var(--forum-gutter, 40px); }
}
/* Straight after the page hero, as in the mockup */
.sff26-fweek.sff26-fweek--tight { padding-top: 8px; }
.sff26-fweek *,
.sff26-fweek *::before,
.sff26-fweek *::after { box-sizing: border-box; }

.sff26-fweek .sff26-fweek__w {
  max-width: calc(var(--sff26-max) + 2 * var(--sff26-gut));
  margin: 0 auto;
  padding: 0 var(--sff26-gut);
}
.sff26-fweek .sff26-fweek__hd { margin: 0 0 56px; }
.sff26-fweek .sff26-fweek__bd { min-width: 0; }
.sff26-fweek .sff26-fweek__h2 {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.018em;
  color: #fff;
  text-transform: none;
  text-wrap: balance;
}
/* Kept for screen readers only when the heading is switched off */
.sff26-fweek .sff26-fweek__h2--vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Letter spans added by module.js; the legacy SFF CSS paints "h2 span" amber */
.sff26-fweek .sff26-fweek__h2 .sff26-fweek__wd,
.sff26-fweek .sff26-fweek__h2 .sff26-fweek__ch { color: inherit; }
.sff26-fweek .sff26-fweek__wd { white-space: nowrap; }
.sff26-fweek .sff26-fweek__ch { display: inline-block; }
.sff26-fweek .sff26-fweek__lead {
  max-width: 56ch;
  margin: 18px 0 0;
  padding: 0;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--sff26-muted);
  text-wrap: pretty;
}

/* Text link: amber, the primary CTA's arrow; the underline runs under the
   text and the arrow and stretches with it (same as the other v2 modules) */
.sff26-fweek .sff26-fweek__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--forum-highlight, var(--sff26-amber));
  text-decoration: none;
}
.sff26-fweek .sff26-fweek__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: calc(24px * -0.3);
  bottom: 8px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .3s ease;
}
.sff26-fweek .sff26-fweek__link:hover,
.sff26-fweek .sff26-fweek__link:focus-visible { color: var(--forum-highlight, var(--sff26-amber)); text-decoration: none; }
.sff26-fweek .sff26-fweek__link:hover::after,
.sff26-fweek .sff26-fweek__link:focus-visible::after { transform: scaleX(1); }
.sff26-fweek .sff26-fweek__link-ic { flex: none; display: block; width: 24px; height: 12px; transform-origin: left center; transition: transform .3s ease; }
.sff26-fweek .sff26-fweek__link:hover .sff26-fweek__link-ic,
.sff26-fweek .sff26-fweek__link:focus-visible .sff26-fweek__link-ic { transform: scaleX(1.3); }
.sff26-fweek a:focus-visible,
.sff26-fweek button:focus-visible { outline: 2px solid var(--sff26-amber); outline-offset: 3px; }

/* The grid: five day columns (ten tracks), the bars, then the tiles.
   Desktop placement is in the min-width: 1200px block below. */
.sff26-fweek .sff26-fweek__grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: auto auto 250px auto;
  grid-auto-rows: 230px;
  gap: 14px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sff26-fweek .sff26-fweek__grid > li,
.sff26-fweek .sff26-fweek__st > li { margin: 0; list-style: none; }
.sff26-fweek .sff26-fweek__grid li::before,
.sff26-fweek .sff26-fweek__grid li::marker { content: none; }

.sff26-fweek .sff26-fweek__day {
  grid-row: 1;
  grid-column: span 2;
  padding: 0 4px;
  font-size: 26px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
}
.sff26-fweek .sff26-fweek__day span { margin-right: 4px; font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--sff26-muted); }
.sff26-fweek .sff26-fweek__day span.sff26-fweek__mo { margin: 0 0 0 2px; }

.sff26-fweek .sff26-fweek__bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 64px;
  padding: 14px 22px;
  border-radius: 14px;
  background: var(--sff26-c);
  color: var(--sff26-on, #141414);
  transform-origin: 0 50%;
  transition: transform 1s var(--sff26-ease);
}
.sff26-fweek .sff26-fweek__bar b { font-size: 18px; line-height: 1.25; font-weight: 600; color: inherit; }
.sff26-fweek .sff26-fweek__v { margin-top: 2px; font-size: 15px; line-height: 1.35; color: inherit; }
/* A bar with a headline (bar "summary"; user 6 Oct, as on the homepage Week at a Glance): the
   headline, then the house's slash and the name "at" the venue */
.sff26-fweek .sff26-fweek__bar--rich { padding: 20px 26px 22px; }
.sff26-fweek .sff26-fweek__bs { font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; color: inherit; text-wrap: balance; }
.sff26-fweek .sff26-fweek__bl { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; font-size: 16px; line-height: 1.4; color: inherit; }
.sff26-fweek .sff26-fweek__bar .sff26-fweek__bl b { font-size: 16px; line-height: 1.4; font-weight: 600; }
.sff26-fweek .sff26-fweek__at { font-weight: 400; }
.sff26-fweek .sff26-fweek__bk { flex: none; width: 8px; height: 16px; margin-top: 3px; background: currentColor; opacity: .6; clip-path: polygon(45% 0, 100% 0, 55% 100%, 0 100%); }
/* The dates repeat the day columns, so on desktop they are for screen
   readers only; where the day columns are hidden they show */
.sff26-fweek .sff26-fweek__ph {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Tiles */
.sff26-fweek .sff26-fweek__tile { display: flex; min-width: 0; }
.sff26-fweek .sff26-fweek__a {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  padding: 24px 24px 22px;
  overflow: hidden;
  border-radius: var(--sff26-r);
  background: #1b1b1b;
  color: #fff;
  text-decoration: none;
  transition: transform .35s var(--sff26-ease), box-shadow .35s var(--sff26-ease);
}
.sff26-fweek .sff26-fweek__a img {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  transition: transform .8s var(--sff26-ease);
}
.sff26-fweek .sff26-fweek__tile--f-left img { object-position: 32% 50%; }
.sff26-fweek .sff26-fweek__tile--f-top img { object-position: 50% 22%; }
/* A dark fade up from the bottom so the text reads on any photo */
.sff26-fweek .sff26-fweek__a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(20, 20, 20, .9) 0%, rgba(20, 20, 20, .45) 38%, rgba(20, 20, 20, 0) 70%);
}
/* Stage tiles with a touch of brand colour (stage_style "brand"; user 5 Oct, after the Speaker Rail look
   proved too loud): the original black fade, natural photo and white text, plus a soft glow of the tile's
   brand colour (--sff26-sc: amber, red, blue, pink, green in rotation) rising from the foot - full colour
   only at the very bottom edge, easing out over the lowest third. */
.sff26-fweek.sff26-fweek--stages-brand .sff26-fweek__tile--stage .sff26-fweek__a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to top,
    var(--sff26-sc, #FCB316) 0%,
    color-mix(in srgb, var(--sff26-sc, #FCB316) 70%, transparent) 5%,
    color-mix(in srgb, var(--sff26-sc, #FCB316) 38%, transparent) 14%,
    color-mix(in srgb, var(--sff26-sc, #FCB316) 14%, transparent) 24%,
    transparent 34%);
}
/* A deeper fade for the small stage tiles and for busy photos */
.sff26-fweek .sff26-fweek__tile--stage .sff26-fweek__a::before,
.sff26-fweek .sff26-fweek__tile--shade .sff26-fweek__a::before {
  background: linear-gradient(0deg, rgba(20, 20, 20, .96) 0%, rgba(20, 20, 20, .78) 42%, rgba(20, 20, 20, .2) 78%, rgba(20, 20, 20, .05) 100%);
}
.sff26-fweek a.sff26-fweek__a:focus-visible {
  transform: translateY(-6px);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .75);
}
.sff26-fweek a.sff26-fweek__a:focus-visible img { transform: scale(1.06); }

/* A small tag in the top corner (4px corners, not a pill) */
.sff26-fweek .sff26-fweek__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 4px;
  background: rgba(20, 20, 20, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
}

.sff26-fweek .sff26-fweek__t {
  margin: 0;
  padding: 0 56px 0 0;
  font-family: inherit;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.01em;
  color: inherit;
  text-transform: none;
  text-wrap: balance;
}
.sff26-fweek .sff26-fweek__tile--lead .sff26-fweek__t,
.sff26-fweek .sff26-fweek__tile--wide .sff26-fweek__t,
.sff26-fweek .sff26-fweek__tile--head .sff26-fweek__t,
.sff26-fweek .sff26-fweek__tile--both .sff26-fweek__t,
.sff26-fweek .sff26-fweek__tile--across .sff26-fweek__t { font-size: 30px; }
.sff26-fweek .sff26-fweek__p { margin: 6px 0 0; padding: 0 56px 0 0; font-size: 15px; line-height: 1.5; font-weight: 400; color: #dcdcdc; }

/* The tile across the whole week (e.g. the Executive Pass), under the day grid */
.sff26-fweek .sff26-fweek__across { display: grid; margin: 14px 0 0; padding: 0; list-style: none; }
.sff26-fweek .sff26-fweek__across > li { margin: 0; list-style: none; }
.sff26-fweek .sff26-fweek__across li::before,
.sff26-fweek .sff26-fweek__across li::marker { content: none; }
.sff26-fweek .sff26-fweek__tile--across { height: 300px; }
.sff26-fweek .sff26-fweek__tile--across .sff26-fweek__p { max-width: 62ch; font-size: 17px; }

/* The arrow (a page) or the plus (a popup) in a circle, bottom right */
.sff26-fweek .sff26-fweek__go {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 50%;
  color: inherit;
  transition: transform .35s var(--sff26-ease), background-color .3s ease, border-color .3s ease, color .3s ease;
}
.sff26-fweek .sff26-fweek__go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sff26-fweek a.sff26-fweek__a:focus-visible .sff26-fweek__go { transform: translateX(6px); border-color: #fff; background: #fff; color: #141414; }
/* The plus turns rather than slides: this tile opens a popup, not a page */
.sff26-fweek a.sff26-fweek__a:focus-visible .sff26-fweek__go.sff26-fweek__go--plus { transform: rotate(90deg); }

/* The solid amber tile (no photo) */
.sff26-fweek .sff26-fweek__tile--solid .sff26-fweek__a { background: var(--sff26-amber); color: #141414; }
.sff26-fweek .sff26-fweek__tile--solid .sff26-fweek__a::before { display: none; }
.sff26-fweek .sff26-fweek__tile--solid a.sff26-fweek__a:focus-visible { color: #141414; }
.sff26-fweek .sff26-fweek__tile--solid .sff26-fweek__p { color: #141414; opacity: .85; }
.sff26-fweek .sff26-fweek__tile--solid .sff26-fweek__tag { background: rgba(20, 20, 20, .12); color: #141414; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sff26-fweek .sff26-fweek__tile--solid .sff26-fweek__go { border-color: rgba(20, 20, 20, .4); }
.sff26-fweek .sff26-fweek__tile--solid a.sff26-fweek__a:focus-visible .sff26-fweek__go { border-color: #141414; background: #141414; color: #fff; }

/* Hover only where there is a real pointer: on touch screens a tapped tile
   would otherwise stay lifted after its popup closes */
@media (hover: hover) {
  .sff26-fweek a.sff26-fweek__a:hover {
    transform: translateY(-6px);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .75);
  }
  .sff26-fweek a.sff26-fweek__a:hover img { transform: scale(1.06); }
  .sff26-fweek a.sff26-fweek__a:hover .sff26-fweek__go { transform: translateX(6px); border-color: #fff; background: #fff; color: #141414; }
  .sff26-fweek a.sff26-fweek__a:hover .sff26-fweek__go.sff26-fweek__go--plus { transform: rotate(90deg); }
  .sff26-fweek .sff26-fweek__tile--solid a.sff26-fweek__a:hover { color: #141414; }
  .sff26-fweek .sff26-fweek__tile--solid a.sff26-fweek__a:hover .sff26-fweek__go { border-color: #141414; background: #141414; color: #fff; }
}

/* The stages: a grid of their own under the wide tile, three across then
   four on desktop, so no stage sits under a single day (every stage runs
   all three days) */
.sff26-fweek .sff26-fweek__stages { min-width: 0; }
.sff26-fweek .sff26-fweek__st {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 180px;
  gap: 14px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sff26-fweek .sff26-fweek__tile--w1 { grid-column: span 12; }
.sff26-fweek .sff26-fweek__tile--w2 { grid-column: span 6; }
.sff26-fweek .sff26-fweek__tile--w3 { grid-column: span 4; }
.sff26-fweek .sff26-fweek__tile--w4 { grid-column: span 3; }
.sff26-fweek .sff26-fweek__tile--stage .sff26-fweek__a { padding: 18px; }
.sff26-fweek .sff26-fweek__tile--stage .sff26-fweek__t { font-size: 19px; padding-right: 0; }
.sff26-fweek .sff26-fweek__tile--stage .sff26-fweek__p { margin-top: 4px; font-size: 14px; padding-right: 0; }
.sff26-fweek .sff26-fweek__tile--stage .sff26-fweek__go { top: 14px; right: 14px; bottom: auto; width: 36px; height: 36px; }
.sff26-fweek .sff26-fweek__tile--stage .sff26-fweek__go svg { width: 16px; height: 16px; }

/* The programme panel: a solid tile in the first bar's blue. The formats sit in a two-column grid of
   small panels (8px corners, the GFTN scale; the odd last one spans the row), the "Also on" events in a
   list under a hairline (user 5 Oct: present the panel better; it was a plain list and a dotted line). */
.sff26-fweek .sff26-fweek__prog { display: flex; min-width: 0; }
.sff26-fweek .sff26-fweek__prog-in {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 28px 26px 24px;
  border-radius: var(--sff26-r);
  background: var(--sff26-c, #3399FF);
  color: var(--sff26-on, #141414);
}
.sff26-fweek .sff26-fweek__prog-h {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.01em;
  color: inherit;
  text-transform: none;
}
.sff26-fweek .sff26-fweek__fmt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.sff26-fweek .sff26-fweek__fmt > li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--sff26-on, #141414) 14%, transparent);
  font-size: 15px;
  line-height: 1.3;
  font-weight: 600;
  color: inherit;
}
.sff26-fweek .sff26-fweek__fmt > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* A single format (the merchant pages' one line): a plain line on the tile, as before */
.sff26-fweek .sff26-fweek__fmt--one { grid-template-columns: minmax(0, 1fr); }
.sff26-fweek .sff26-fweek__fmt--one > li { align-items: center; gap: 12px; padding: 0; border-radius: 0; background: none; font-size: 18px; line-height: 1.35; font-weight: 400; }
.sff26-fweek .sff26-fweek__fmt--one .sff26-fweek__stk { width: 8px; height: 18px; margin-top: 0; }
/* The slanted stroke of the homepage system */
.sff26-fweek .sff26-fweek__stk { flex: none; width: 7px; height: 15px; margin-top: 2px; background: currentColor; clip-path: polygon(45% 0, 100% 0, 55% 100%, 0 100%); }
.sff26-fweek .sff26-fweek__also-w { margin-top: auto; padding-top: 22px; }
.sff26-fweek .sff26-fweek__prog-h--also { padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--sff26-on, #141414) 40%, transparent); font-size: 16px; }
.sff26-fweek .sff26-fweek__also { margin: 8px 0 0; padding: 0; list-style: none; color: inherit; }
.sff26-fweek .sff26-fweek__also > li { margin: 0; padding: 7px 0; font-size: 15px; line-height: 1.35; color: inherit; border-bottom: 1px solid color-mix(in srgb, var(--sff26-on, #141414) 22%, transparent); }
.sff26-fweek .sff26-fweek__also > li:last-child { padding-bottom: 0; border-bottom: 0; }

/* The note under the week */
.sff26-fweek .sff26-fweek__note { margin: 28px 0 0; padding: 0; font-size: 15px; line-height: 1.5; color: var(--sff26-muted); }
.sff26-fweek .sff26-fweek__note-a {
  font-weight: inherit;
  color: var(--forum-highlight, var(--sff26-amber));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .25s ease;
}
.sff26-fweek .sff26-fweek__note-a:hover,
.sff26-fweek .sff26-fweek__note-a:focus-visible { color: #fff; }

/* Desktop: every item under its own days */
@media (min-width: 1200px) {
  /* A hairline between Tue 17 and Wed 18, the two forums (user 5 Oct, as on the homepage Week at a
     Glance): down the middle of the 16px gap before track 5 (Mon-Tue take tracks 1-4 of 10). Placed
     by the tracks' own maths, not grid rows, because the tiles run on into implicit rows. Fades in
     at the top and out at the bottom; not shown below 1200px, where the days stack. */
  .sff26-fweek .sff26-fweek__grid { position: relative; }
  .sff26-fweek .sff26-fweek__grid::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(4 * (100% - 9 * 16px) / 10 + 4 * 16px - 8.5px);
    width: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .22) 20px, rgba(255, 255, 255, .22) calc(100% - 64px), rgba(255, 255, 255, 0));
    pointer-events: none;
  }
  .sff26-fweek .sff26-fweek__bar { grid-row: 2; }
  .sff26-fweek .sff26-fweek__bar--1 { grid-column: 1 / 5; }
  .sff26-fweek .sff26-fweek__bar--2 { grid-column: 5 / 11; }
  .sff26-fweek .sff26-fweek__tile--lead { grid-column: 1 / 5; grid-row: 3 / 5; }
  .sff26-fweek .sff26-fweek__prog { grid-column: 1 / 5; grid-row: 5 / span var(--sff26-span, 2); }
  .sff26-fweek .sff26-fweek__tile--low { grid-column: 1 / 5; grid-row: var(--sff26-row, 7) / span var(--sff26-span, 1); }
  .sff26-fweek .sff26-fweek__tile--wide { grid-column: 5 / 11; grid-row: 3; }
  .sff26-fweek .sff26-fweek__stages { grid-column: 5 / 11; grid-row: 4; }
  .sff26-fweek .sff26-fweek__tile--c1 { grid-column: 5 / 8; grid-row: var(--sff26-row, auto); }
  .sff26-fweek .sff26-fweek__tile--c2 { grid-column: 8 / 11; grid-row: var(--sff26-row, auto); }
  .sff26-fweek .sff26-fweek__tile--both { grid-column: 5 / 11; grid-row: var(--sff26-row, auto); }
  /* The homepage order: the tile on top, the wide tile and the stages a row lower; the large tile
     beside all three, so the programme panel and tile 2 keep their rows beside the small tiles */
  .sff26-fweek.sff26-fweek--home .sff26-fweek__grid { grid-template-rows: auto auto 250px 250px auto; }
  .sff26-fweek.sff26-fweek--home .sff26-fweek__tile--head { grid-column: 5 / 11; grid-row: 3; }
  .sff26-fweek.sff26-fweek--home .sff26-fweek__tile--wide { grid-row: 4; }
  .sff26-fweek.sff26-fweek--home .sff26-fweek__stages { grid-row: 5; }
  .sff26-fweek.sff26-fweek--home .sff26-fweek__tile--lead { grid-row: 3 / 6; }
  .sff26-fweek.sff26-fweek--home .sff26-fweek__prog { grid-row: 6 / span var(--sff26-span, 2); }
}

/* Laptops and tablets: the day columns get too narrow for this many tiles,
   so each bar runs full width above its own tiles, with its dates */
@media (max-width: 1199px) {
  .sff26-fweek .sff26-fweek__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: auto; gap: 12px 14px; }
  .sff26-fweek .sff26-fweek__day { display: none; }
  .sff26-fweek .sff26-fweek__grid > li { grid-column: 1 / -1; }
  .sff26-fweek .sff26-fweek__grid > .sff26-fweek__bar { margin-top: 14px; }
  .sff26-fweek .sff26-fweek__ph { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; margin-top: 2px; font-size: 15px; line-height: 1.35; }
  .sff26-fweek .sff26-fweek__grid > .sff26-fweek__tile--lead { grid-column: 1 / 4; height: 400px; }
  .sff26-fweek .sff26-fweek__grid--noprog > .sff26-fweek__tile--lead { grid-column: 1 / -1; }
  .sff26-fweek .sff26-fweek__grid > .sff26-fweek__prog { grid-column: 4 / 7; }
  .sff26-fweek .sff26-fweek__grid > .sff26-fweek__tile--low { height: 220px; }
  .sff26-fweek .sff26-fweek__grid > .sff26-fweek__tile--wide { height: 260px; }
  .sff26-fweek .sff26-fweek__grid > .sff26-fweek__tile--small { grid-column: span 2; height: 230px; }
  .sff26-fweek .sff26-fweek__grid > .sff26-fweek__tile--head { height: 260px; }
  .sff26-fweek .sff26-fweek__grid > .sff26-fweek__tile--both { height: 230px; }
  /* The homepage order: the small tiles two to a row, so the rhythm two, one across, two leaves no gaps */
  .sff26-fweek.sff26-fweek--home .sff26-fweek__grid > .sff26-fweek__tile--small { grid-column: span 3; }
  .sff26-fweek .sff26-fweek__across { margin-top: 12px; }
  .sff26-fweek .sff26-fweek__tile--across { height: 260px; }
  .sff26-fweek .sff26-fweek__tile--lead .sff26-fweek__t,
  .sff26-fweek .sff26-fweek__tile--wide .sff26-fweek__t,
  .sff26-fweek .sff26-fweek__tile--head .sff26-fweek__t,
  .sff26-fweek .sff26-fweek__tile--both .sff26-fweek__t,
  .sff26-fweek .sff26-fweek__tile--across .sff26-fweek__t { font-size: 26px; }
}
@media (max-width: 991px) {
  .sff26-fweek { padding-top: 96px; }
  .sff26-fweek .sff26-fweek__grid > .sff26-fweek__tile--small { grid-column: span 3; }
}

/* The popup: the photo beside the details on desktop, a sheet from the
   bottom on phones. Closed dialogs stay hidden even where <dialog> is not
   supported (the tiles then just link to their pages). */
.sff26-fweek .sff26-fweek__dlg:not([open]) { display: none; }
.sff26-fweek .sff26-fweek__dlg {
  width: min(880px, calc(100vw - 48px));
  max-width: none;
  max-height: min(86vh, 680px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #1b1b1b;
  color: #fff;
  overflow: hidden;
  overscroll-behavior: contain;
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .7);
  font-family: var(--forum-font, "Open Sans", Arial, sans-serif);
}
.sff26-fweek .sff26-fweek__dlg--nophoto { width: min(540px, calc(100vw - 48px)); }
.sff26-fweek .sff26-fweek__dlg::backdrop { background: rgba(0, 0, 0, .65); }
.sff26-fweek .sff26-fweek__dlg-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.sff26-fweek .sff26-fweek__dlg--nophoto .sff26-fweek__dlg-in { grid-template-columns: minmax(0, 1fr); }
.sff26-fweek .sff26-fweek__x {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(20, 20, 20, .8);
  color: #fff;
  cursor: pointer;
  transition: background-color .25s ease;
}
.sff26-fweek .sff26-fweek__x:hover,
.sff26-fweek .sff26-fweek__x:focus,
.sff26-fweek .sff26-fweek__x:active { border: 0; background: #333; color: #fff; }
.sff26-fweek .sff26-fweek__x svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sff26-fweek .sff26-fweek__pic { position: relative; min-height: 380px; margin: 0; background: #141414; }
.sff26-fweek .sff26-fweek__pic img { position: absolute; inset: 0; display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; }
.sff26-fweek .sff26-fweek__det { max-height: min(86vh, 680px); overflow: auto; overscroll-behavior: contain; padding: 34px 34px 36px; }
.sff26-fweek .sff26-fweek__dh {
  margin: 0;
  padding: 0 48px 0 0;
  font-family: inherit;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0;
  color: #fff;
  text-transform: none;
}
.sff26-fweek .sff26-fweek__facts { display: grid; gap: 10px; margin: 20px 0 0; padding: 0 0 20px; border-bottom: 1px solid #333; }
.sff26-fweek .sff26-fweek__fact { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; }
.sff26-fweek .sff26-fweek__fact dt { margin: 0; font-size: 14px; line-height: 1.4; font-weight: 400; color: var(--sff26-muted); }
.sff26-fweek .sff26-fweek__fact dd { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 400; color: #fff; }
.sff26-fweek .sff26-fweek__desc { margin: 18px 0 0; padding: 0; font-size: 16px; line-height: 1.6; color: #dcdcdc; }
.sff26-fweek .sff26-fweek__acc-h {
  margin: 24px 0 10px;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--sff26-muted);
  text-transform: none;
}
.sff26-fweek .sff26-fweek__acc-p { margin: 0; padding: 0; font-size: 15px; line-height: 1.5; color: #fff; }
.sff26-fweek .sff26-fweek__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sff26-fweek .sff26-fweek__tags > li { margin: 0; padding: 6px 10px; border-radius: 4px; background: #2c2b2b; font-size: 13px; line-height: 1.2; color: #fff; list-style: none; }
.sff26-fweek .sff26-fweek__tags > li::before,
.sff26-fweek .sff26-fweek__tags > li::marker { content: none; }
.sff26-fweek .sff26-fweek__more { margin: 20px 0 0; padding: 0; }
@media (prefers-reduced-motion: no-preference) {
  .sff26-fweek .sff26-fweek__dlg[open] { animation: sff26-fweek-pop .4s var(--sff26-ease) both; }
  .sff26-fweek .sff26-fweek__dlg[open]::backdrop { animation: sff26-fweek-veil .3s ease both; }
}
@keyframes sff26-fweek-pop { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes sff26-fweek-veil { from { opacity: 0; } to { opacity: 1; } }
@keyframes sff26-fweek-sheet { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

/* Phones: one column, each bar above its own tiles; only the stages stay
   two across, and an odd last stage runs full width */
@media (max-width: 767px) {
  .sff26-fweek { padding-top: 72px; }
  .sff26-fweek .sff26-fweek__hd { margin-bottom: 30px; }
  .sff26-fweek .sff26-fweek__h2 { font-size: 32px; line-height: 1.12; }
  .sff26-fweek .sff26-fweek__lead { margin-top: 12px; font-size: 16px; }
  .sff26-fweek .sff26-fweek__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sff26-fweek .sff26-fweek__grid > li,
  .sff26-fweek .sff26-fweek__grid > .sff26-fweek__tile--lead,
  .sff26-fweek .sff26-fweek__grid > .sff26-fweek__prog,
  .sff26-fweek .sff26-fweek__grid > .sff26-fweek__tile--small { grid-column: 1 / -1; }
  .sff26-fweek .sff26-fweek__grid > .sff26-fweek__bar { min-height: 0; margin-top: 12px; padding: 14px 18px; }
  .sff26-fweek .sff26-fweek__grid > .sff26-fweek__tile--lead { height: 260px; }
  .sff26-fweek .sff26-fweek__grid > .sff26-fweek__tile--low { height: 200px; }
  .sff26-fweek .sff26-fweek__grid > .sff26-fweek__tile--wide { height: 220px; }
  .sff26-fweek .sff26-fweek__grid > .sff26-fweek__tile--small { height: 190px; }
  .sff26-fweek .sff26-fweek__grid > .sff26-fweek__tile--head { height: 220px; }
  .sff26-fweek.sff26-fweek--home .sff26-fweek__grid > .sff26-fweek__tile--small { grid-column: 1 / -1; }
  .sff26-fweek .sff26-fweek__grid > .sff26-fweek__tile--both { height: 200px; }
  .sff26-fweek .sff26-fweek__across { margin-top: 10px; }
  .sff26-fweek .sff26-fweek__tile--across { height: 320px; }
  .sff26-fweek .sff26-fweek__bar--rich { padding: 16px 18px 18px; }
  .sff26-fweek .sff26-fweek__bl { margin-top: 8px; }
  .sff26-fweek .sff26-fweek__st { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 10px; }
  .sff26-fweek .sff26-fweek__st > .sff26-fweek__tile { grid-column: auto; height: 170px; }
  .sff26-fweek .sff26-fweek__st > .sff26-fweek__tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .sff26-fweek .sff26-fweek__st > .sff26-fweek__tile--solid:last-child:nth-child(odd) { height: 104px; }
  .sff26-fweek .sff26-fweek__a { padding: 16px; }
  .sff26-fweek .sff26-fweek__t,
  .sff26-fweek .sff26-fweek__p { padding-right: 40px; }
  .sff26-fweek .sff26-fweek__go { right: 12px; bottom: 12px; width: 36px; height: 36px; }
  .sff26-fweek .sff26-fweek__tag { top: 12px; left: 12px; height: 26px; padding: 0 10px; font-size: 12px; }
  .sff26-fweek .sff26-fweek__tile--stage .sff26-fweek__a { padding: 14px; }
  .sff26-fweek .sff26-fweek__tile--stage .sff26-fweek__t,
  .sff26-fweek .sff26-fweek__tile--stage .sff26-fweek__p { padding-right: 0; }
  .sff26-fweek .sff26-fweek__tile--stage .sff26-fweek__go { top: 10px; right: 10px; width: 32px; height: 32px; }
  .sff26-fweek .sff26-fweek__prog-in { padding: 22px 20px; }
  .sff26-fweek .sff26-fweek__also-w { padding-top: 20px; }
  .sff26-fweek .sff26-fweek__dlg,
  .sff26-fweek .sff26-fweek__dlg--nophoto { inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: 88vh; margin: 0; border-radius: 12px 12px 0 0; overflow: auto; }
  .sff26-fweek .sff26-fweek__dlg-in { display: block; }
  .sff26-fweek .sff26-fweek__x { position: sticky; top: 12px; float: right; margin: 12px 12px -56px 0; }
  .sff26-fweek .sff26-fweek__pic { min-height: 0; }
  .sff26-fweek .sff26-fweek__pic img { position: static; height: auto; aspect-ratio: 16 / 9; }
  .sff26-fweek .sff26-fweek__det { max-height: none; overflow: visible; padding: 22px 20px 32px; }
  .sff26-fweek .sff26-fweek__dlg--nophoto .sff26-fweek__det { padding-top: 24px; }

  /* Phone type. The theme's main.css and the page's own head styles set
     h2 / h3 / p sizes and weights on phones with !important, so these must
     be !important too (phone typography only). */
  .sff26-fweek .sff26-fweek__h2 { font-size: 32px !important; line-height: 1.12 !important; font-weight: 600 !important; }
  .sff26-fweek .sff26-fweek__lead { font-size: 16px !important; line-height: 1.5 !important; }
  .sff26-fweek .sff26-fweek__t { font-size: 18px !important; line-height: 1.2 !important; font-weight: 600 !important; }
  .sff26-fweek .sff26-fweek__tile--lead .sff26-fweek__t,
  .sff26-fweek .sff26-fweek__tile--wide .sff26-fweek__t,
  .sff26-fweek .sff26-fweek__tile--head .sff26-fweek__t,
  .sff26-fweek .sff26-fweek__tile--both .sff26-fweek__t,
  .sff26-fweek .sff26-fweek__tile--across .sff26-fweek__t { font-size: 24px !important; }
  .sff26-fweek .sff26-fweek__tile--across .sff26-fweek__p { font-size: 15px !important; line-height: 1.45 !important; }
  .sff26-fweek .sff26-fweek__bs { font-size: 22px !important; line-height: 1.2 !important; font-weight: 600 !important; }
  .sff26-fweek .sff26-fweek__bl,
  .sff26-fweek .sff26-fweek__bar .sff26-fweek__bl b { font-size: 15px !important; line-height: 1.4 !important; }
  /* 17px, easing down on the narrowest phones so "FutureMatters" fits its half-width tile without breaking */
  .sff26-fweek .sff26-fweek__tile--stage .sff26-fweek__t { font-size: clamp(14px, calc(7.14vw - 8px), 17px) !important; }
  .sff26-fweek .sff26-fweek__p { font-size: 14px !important; line-height: 1.4 !important; font-weight: 400 !important; }
  .sff26-fweek .sff26-fweek__tile--stage .sff26-fweek__p { font-size: 13px !important; }
  .sff26-fweek .sff26-fweek__prog-h { font-size: 17px !important; line-height: 1.3 !important; font-weight: 600 !important; }
  .sff26-fweek .sff26-fweek__fmt > li,
  .sff26-fweek .sff26-fweek__also { font-size: 15px !important; line-height: 1.4 !important; }
  .sff26-fweek .sff26-fweek__note { font-size: 15px !important; line-height: 1.5 !important; }
  .sff26-fweek .sff26-fweek__dh { font-size: 22px !important; line-height: 1.25 !important; font-weight: 600 !important; }
  .sff26-fweek .sff26-fweek__fact dd { font-size: 15px !important; }
  .sff26-fweek .sff26-fweek__desc { font-size: 15px !important; line-height: 1.6 !important; font-weight: 400 !important; }
  .sff26-fweek .sff26-fweek__acc-h { font-size: 14px !important; line-height: 1.3 !important; font-weight: 600 !important; }
  .sff26-fweek .sff26-fweek__acc-p { font-size: 15px !important; line-height: 1.5 !important; font-weight: 400 !important; }
  .sff26-fweek .sff26-fweek__tags > li { font-size: 13px !important; line-height: 1.2 !important; }
  .sff26-fweek .sff26-fweek__more { font-size: 16px !important; line-height: 24px !important; }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .sff26-fweek .sff26-fweek__dlg[open] { animation-name: sff26-fweek-sheet; }
}

/* Entrances, once each, as each item comes into view. module.js adds
   --armed only when it can also reveal, so without JavaScript or with
   reduced motion nothing is hidden: heading letters rise in (when the
   heading shows), the bars wipe across, the tiles rise in a stagger. */
.sff26-fweek.sff26-fweek--armed .sff26-fweek__ch {
  transition: opacity .45s ease, transform .6s var(--sff26-ease);
  transition-delay: calc(var(--sff26-ci, 0) * 16ms);
}
.sff26-fweek.sff26-fweek--armed .sff26-fweek__h2:not(.sff26-fweek__h2--in) .sff26-fweek__ch { opacity: 0; transform: translateY(.4em); }
.sff26-fweek.sff26-fweek--armed .sff26-fweek__bar { transition-delay: var(--sff26-d, 0ms); }
.sff26-fweek.sff26-fweek--armed .sff26-fweek__bar:not(.sff26-fweek__rv--in) { transform: scaleX(0); }
.sff26-fweek.sff26-fweek--armed .sff26-fweek__tile,
.sff26-fweek.sff26-fweek--armed .sff26-fweek__prog {
  transition: opacity .6s ease, transform .85s cubic-bezier(.2, .9, .25, 1.1);
  transition-delay: var(--sff26-d, 0ms);
}
.sff26-fweek.sff26-fweek--armed .sff26-fweek__tile:not(.sff26-fweek__rv--in),
.sff26-fweek.sff26-fweek--armed .sff26-fweek__prog:not(.sff26-fweek__rv--in) { opacity: 0; transform: translateY(28px) scale(.97); }
.sff26-fweek.sff26-fweek--armed .sff26-fweek__rv.sff26-fweek__rv--done { transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .sff26-fweek .sff26-fweek__a,
  .sff26-fweek .sff26-fweek__a img,
  .sff26-fweek .sff26-fweek__go,
  .sff26-fweek .sff26-fweek__link::after,
  .sff26-fweek .sff26-fweek__link-ic,
  .sff26-fweek .sff26-fweek__note-a,
  .sff26-fweek .sff26-fweek__x,
  .sff26-fweek .sff26-fweek__bar,
  .sff26-fweek.sff26-fweek--armed .sff26-fweek__tile,
  .sff26-fweek.sff26-fweek--armed .sff26-fweek__prog,
  .sff26-fweek.sff26-fweek--armed .sff26-fweek__ch { transition: none; }
  .sff26-fweek.sff26-fweek--armed .sff26-fweek__bar:not(.sff26-fweek__rv--in),
  .sff26-fweek.sff26-fweek--armed .sff26-fweek__tile:not(.sff26-fweek__rv--in),
  .sff26-fweek.sff26-fweek--armed .sff26-fweek__prog:not(.sff26-fweek__rv--in),
  .sff26-fweek.sff26-fweek--armed .sff26-fweek__h2:not(.sff26-fweek__h2--in) .sff26-fweek__ch { opacity: 1; transform: none; }
}

/* The Insights2040 tile and the programme panel as one card (programme_style "joined"; user 5 Oct,
   from their mockup): the photo fades into a deep SFF blue and the panel carries on below it, with no
   seam. A short light-blue rule over "On the Programme", plain formats with a hairline between rows,
   and "Also on" under a hairline with a short light-blue segment a quarter of the way along. The two stay separate list items
   (the tile is a link; the panel is not), squared off where they meet and drawn over the grid gap.
   A light-blue glow sits on the right edge, centred exactly on the join, so it runs across it (written out
   in each half: a custom property holding the gradient would resolve its position once, on the section). */
.sff26-fweek.sff26-fweek--prog-joined {
  --sff26-deep: #0B2B8F;
  --sff26-deep-2: #1446CC;
  --sff26-glint: #4FC3F7;
}
.sff26-fweek.sff26-fweek--prog-joined .sff26-fweek__tile--lead .sff26-fweek__a { border-radius: var(--sff26-r) var(--sff26-r) 0 0; background: var(--sff26-deep); }
.sff26-fweek.sff26-fweek--prog-joined .sff26-fweek__tile--lead .sff26-fweek__a::before {
  background:
    radial-gradient(300px 220px at 100% 100%, rgba(51, 153, 255, .42), rgba(51, 153, 255, 0) 70%),
    linear-gradient(0deg, var(--sff26-deep) 0%, color-mix(in srgb, var(--sff26-deep) 92%, transparent) 18%, color-mix(in srgb, var(--sff26-deep) 55%, transparent) 42%, color-mix(in srgb, var(--sff26-deep) 12%, transparent) 70%, transparent 88%);
}
.sff26-fweek.sff26-fweek--prog-joined .sff26-fweek__tile--lead .sff26-fweek__p { color: rgba(255, 255, 255, .88); }
/* The card does not lift on hover (half a card would come apart); the photo still zooms */
.sff26-fweek.sff26-fweek--prog-joined .sff26-fweek__tile--lead a.sff26-fweek__a:hover,
.sff26-fweek.sff26-fweek--prog-joined .sff26-fweek__tile--lead a.sff26-fweek__a:focus-visible { transform: none; box-shadow: none; }
/* The panel is drawn over the grid gap and 1px into the tile, and above it (the tile is positioned, so it
   would otherwise paint on top), so no hairline shows at the join on any screen density */
.sff26-fweek.sff26-fweek--prog-joined .sff26-fweek__prog { position: relative; z-index: 1; margin-top: -15px; }
.sff26-fweek.sff26-fweek--prog-joined .sff26-fweek__prog-in {
  padding: 26px 26px 26px;
  border-radius: 0 0 var(--sff26-r) var(--sff26-r);
  background: radial-gradient(300px 220px at 100% 0%, rgba(51, 153, 255, .42), rgba(51, 153, 255, 0) 70%), linear-gradient(180deg, var(--sff26-deep) 0%, var(--sff26-deep-2) 100%);
  color: #fff;
}
.sff26-fweek.sff26-fweek--prog-joined .sff26-fweek__prog-h { font-size: 30px; font-weight: 700; }
.sff26-fweek.sff26-fweek--prog-joined .sff26-fweek__prog-h:not(.sff26-fweek__prog-h--also)::before {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin: 0 0 22px;
  border-radius: 2px;
  background: var(--sff26-glint);
}
.sff26-fweek.sff26-fweek--prog-joined .sff26-fweek__fmt { gap: 0 28px; margin-top: 14px; }
.sff26-fweek.sff26-fweek--prog-joined .sff26-fweek__fmt > li {
  padding: 13px 0;
  border-radius: 0;
  background: none;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 500;
}
.sff26-fweek.sff26-fweek--prog-joined .sff26-fweek__fmt > li:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .2); }
.sff26-fweek.sff26-fweek--prog-joined .sff26-fweek__fmt > li:last-child:nth-child(odd) { grid-column: auto; }
.sff26-fweek.sff26-fweek--prog-joined .sff26-fweek__stk { display: none; }
.sff26-fweek.sff26-fweek--prog-joined .sff26-fweek__prog-h--also {
  position: relative;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .26);
  font-size: 17px;
  font-style: italic;
  font-weight: 700;
}
.sff26-fweek.sff26-fweek--prog-joined .sff26-fweek__prog-h--also::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 25%;
  width: 52px;
  height: 3px;
  border-radius: 2px;
  background: var(--sff26-glint);
}
.sff26-fweek.sff26-fweek--prog-joined .sff26-fweek__also > li { padding: 5px 0; border-bottom: 0; color: rgba(255, 255, 255, .88); }
/* The two halves come in together: a fade, with no rise that would open the join */
.sff26-fweek.sff26-fweek--armed.sff26-fweek--prog-joined .sff26-fweek__tile--lead:not(.sff26-fweek__rv--in),
.sff26-fweek.sff26-fweek--armed.sff26-fweek--prog-joined .sff26-fweek__prog:not(.sff26-fweek__rv--in) { transform: none; }
/* Laptops and tablets: the two stack, full width, instead of standing side by side */
@media (max-width: 1199px) {
  .sff26-fweek.sff26-fweek--prog-joined .sff26-fweek__grid > .sff26-fweek__tile--lead,
  .sff26-fweek.sff26-fweek--prog-joined .sff26-fweek__grid > .sff26-fweek__prog { grid-column: 1 / -1; }
  .sff26-fweek.sff26-fweek--prog-joined .sff26-fweek__grid > .sff26-fweek__tile--lead { height: 340px; }
  .sff26-fweek.sff26-fweek--prog-joined .sff26-fweek__prog { margin-top: -13px; }
}
@media (max-width: 767px) {
  .sff26-fweek.sff26-fweek--prog-joined .sff26-fweek__grid > .sff26-fweek__tile--lead { height: 260px; }
  .sff26-fweek.sff26-fweek--prog-joined .sff26-fweek__prog { margin-top: -11px; }
  .sff26-fweek.sff26-fweek--prog-joined .sff26-fweek__prog-in { padding: 22px 20px 24px; }
  .sff26-fweek.sff26-fweek--prog-joined .sff26-fweek__prog-h { font-size: 24px !important; font-weight: 700 !important; }
  .sff26-fweek.sff26-fweek--prog-joined .sff26-fweek__prog-h:not(.sff26-fweek__prog-h--also)::before { margin-bottom: 18px; }
  .sff26-fweek.sff26-fweek--prog-joined .sff26-fweek__prog-h--also { font-size: 16px !important; }
  .sff26-fweek.sff26-fweek--prog-joined .sff26-fweek__fmt { gap: 0 18px; }
  .sff26-fweek.sff26-fweek--prog-joined .sff26-fweek__fmt > li { padding: 11px 0; font-size: 15px !important; font-weight: 500; }
}

/* The programme as blocks (programme_style "blocks"; user 7 Oct, /festival-overview): the large tile on its own
   (no joined card, no long column), the deep blue of the joined card fading up from its foot; under it each
   format is a rounded deep-blue block carrying the event's name (programme.block_label), so the blocks read as
   part of it; the second heading's items are outlined rows of their own, so they do not. Not links: no lift,
   no arrow. Desktop rows come from module.html (--sff26-row / --sff26-span). */
.sff26-fweek.sff26-fweek--prog-blocks {
  --sff26-deep: #0B2B8F;
  --sff26-deep-2: #1446CC;
  --sff26-glint: #4FC3F7;
}
.sff26-fweek.sff26-fweek--prog-blocks .sff26-fweek__tile--lead .sff26-fweek__a { background: var(--sff26-deep); }
.sff26-fweek.sff26-fweek--prog-blocks .sff26-fweek__tile--lead .sff26-fweek__a::before {
  background:
    radial-gradient(300px 220px at 100% 100%, rgba(51, 153, 255, .42), rgba(51, 153, 255, 0) 70%),
    linear-gradient(0deg, var(--sff26-deep) 0%, color-mix(in srgb, var(--sff26-deep) 88%, transparent) 20%, color-mix(in srgb, var(--sff26-deep) 45%, transparent) 46%, transparent 78%);
}
.sff26-fweek.sff26-fweek--prog-blocks .sff26-fweek__tile--lead .sff26-fweek__p { color: rgba(255, 255, 255, .88); }
.sff26-fweek.sff26-fweek--prog-blocks .sff26-fweek__prog-in { padding: 0; border-radius: 0; background: none; color: #fff; }
.sff26-fweek.sff26-fweek--prog-blocks .sff26-fweek__prog-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
  color: #fff;
}
/* the house slash before each heading: light blue for the event's own, neutral for the rest */
.sff26-fweek.sff26-fweek--prog-blocks .sff26-fweek__prog-h::before { content: ""; flex: none; width: 8px; height: 18px; background: var(--sff26-glint); clip-path: polygon(45% 0, 100% 0, 55% 100%, 0 100%); }
.sff26-fweek.sff26-fweek--prog-blocks .sff26-fweek__prog-h--also { margin-bottom: 12px; font-size: 16px; color: var(--sff26-muted); }
.sff26-fweek.sff26-fweek--prog-blocks .sff26-fweek__prog-h--also::before { background: rgba(255, 255, 252, .45); }
.sff26-fweek.sff26-fweek--prog-blocks .sff26-fweek__blk { display: grid; flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px 14px; margin: 0; padding: 0; list-style: none; }
.sff26-fweek.sff26-fweek--prog-blocks .sff26-fweek__blk > li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 13px 16px 14px;
  overflow: hidden;
  border-radius: var(--sff26-r);
  background: radial-gradient(220px 160px at 100% 0%, rgba(79, 195, 247, .3), rgba(79, 195, 247, 0) 70%), linear-gradient(160deg, var(--sff26-deep-2) 0%, var(--sff26-deep) 100%);
  list-style: none;
}
.sff26-fweek.sff26-fweek--prog-blocks .sff26-fweek__blk > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sff26-fweek.sff26-fweek--prog-blocks .sff26-fweek__blk-k { font-size: 12px; line-height: 1.25; font-weight: 600; color: #9ED8FF; }
.sff26-fweek.sff26-fweek--prog-blocks .sff26-fweek__blk-t { font-size: 18px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.sff26-fweek.sff26-fweek--prog-blocks .sff26-fweek__also-li { display: flex; flex-direction: column; min-width: 0; margin: 0; list-style: none; }
.sff26-fweek.sff26-fweek--prog-blocks .sff26-fweek__also-li .sff26-fweek__also { display: grid; flex: 1; grid-auto-rows: 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sff26-fweek.sff26-fweek--prog-blocks .sff26-fweek__also-li .sff26-fweek__also > li {
  display: flex;
  align-items: center;
  min-height: 48px;
  margin: 0;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 252, .16);
  font-size: 15px;
  line-height: 1.3;
  font-weight: 600;
  color: #fff;
  list-style: none;
}
.sff26-fweek.sff26-fweek--armed .sff26-fweek__also-li { transition: opacity .6s ease, transform .85s cubic-bezier(.2, .9, .25, 1.1); transition-delay: var(--sff26-d, 0ms); }
.sff26-fweek.sff26-fweek--armed .sff26-fweek__also-li:not(.sff26-fweek__rv--in) { opacity: 0; transform: translateY(28px) scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .sff26-fweek.sff26-fweek--armed .sff26-fweek__also-li { transition: none; }
  .sff26-fweek.sff26-fweek--armed .sff26-fweek__also-li:not(.sff26-fweek__rv--in) { opacity: 1; transform: none; }
}
@media (min-width: 1200px) {
  .sff26-fweek.sff26-fweek--prog-blocks .sff26-fweek__grid > .sff26-fweek__tile--lead { grid-row: 3 / 5; }
  .sff26-fweek.sff26-fweek--prog-blocks .sff26-fweek__grid > .sff26-fweek__prog { grid-row: var(--sff26-row, 5) / span var(--sff26-span, 2); }
  .sff26-fweek.sff26-fweek--prog-blocks .sff26-fweek__grid > .sff26-fweek__also-li { grid-column: 1 / 5; grid-row: var(--sff26-row, 7); }
  /* The Conference and its stages last (wide_last): the rows come from module.html (--sff26-gtr) */
  .sff26-fweek.sff26-fweek--home.sff26-fweek--wl .sff26-fweek__grid { grid-template-rows: var(--sff26-gtr, auto auto 250px 250px auto); }
  .sff26-fweek.sff26-fweek--wl .sff26-fweek__grid > .sff26-fweek__tile--wide,
  .sff26-fweek.sff26-fweek--wl .sff26-fweek__grid > .sff26-fweek__stages { grid-row: var(--sff26-row, auto); }
}
/* Laptops and tablets: the large tile beside the blocks (as beside the panel); the outlined rows three across */
@media (max-width: 1199px) {
  .sff26-fweek.sff26-fweek--prog-blocks .sff26-fweek__blk > li { min-height: 80px; }
  .sff26-fweek.sff26-fweek--prog-blocks .sff26-fweek__also-li .sff26-fweek__also { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Phones: one block per row, so the event's name stays on one line; the outlined rows stack */
@media (max-width: 767px) {
  .sff26-fweek.sff26-fweek--prog-blocks .sff26-fweek__grid > .sff26-fweek__prog { margin-top: 4px; }
  .sff26-fweek.sff26-fweek--prog-blocks .sff26-fweek__blk { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 8px; }
  .sff26-fweek.sff26-fweek--prog-blocks .sff26-fweek__blk > li { min-height: 0; gap: 4px; padding: 12px 16px 13px; border-radius: 14px; }
  .sff26-fweek.sff26-fweek--prog-blocks .sff26-fweek__also-li .sff26-fweek__also { grid-template-columns: minmax(0, 1fr); }
  .sff26-fweek.sff26-fweek--prog-blocks .sff26-fweek__prog-h { font-size: 18px !important; line-height: 1.25 !important; font-weight: 600 !important; }
  .sff26-fweek.sff26-fweek--prog-blocks .sff26-fweek__prog-h--also { font-size: 15px !important; }
  .sff26-fweek.sff26-fweek--prog-blocks .sff26-fweek__blk-k { font-size: 12px !important; line-height: 1.25 !important; }
  .sff26-fweek.sff26-fweek--prog-blocks .sff26-fweek__blk-t { font-size: 16px !important; line-height: 1.25 !important; font-weight: 600 !important; }
  .sff26-fweek.sff26-fweek--prog-blocks .sff26-fweek__also-li .sff26-fweek__also > li { font-size: 15px !important; line-height: 1.3 !important; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Other forums (12 Oct, user: "globalise the new modules to be used on other forums"). Everything below applies only
   OFF SFF (".sff26-fweek:not(.skin-sff *)"), so SFF keeps exactly the values above. The module reads the forum skin's tokens
   (the bss.css contract: --forum-text, --forum-text-body, --forum-text-muted, --forum-text-faint, --forum-surface,
   --forum-surface-raised, --forum-line, --forum-highlight, --forum-dark, the brand palette --forum-gold / -accent /
   -orchid / -teal) and the BSS layout (--bss-max, --bss-gutter), each falling back to SFF's value. A light edition
   (BSS Cambodia) sets --forum-highlight-text to its text colour: brand colours never as small text on a light page.
   BSS forces p / li to var(--forum-text-body) !important, so each text role sets that token to its own colour.
   The photo tiles keep their dark fade and white words on every forum (they read on the photo, not the page); the
   bars, the programme panel and the solid tile take their colour's ink; the popup takes the forum's card. The deep
   blue of the joined card and the blocks is SFF's: elsewhere it is the forum's dark colour lit by its blue, still a
   dark card with light words.
   --------------------------------------------------------------------------------------------------------------- */
.sff26-fweek:not(.skin-sff *) {
  --sff26-gut: 15px; /* BSS's phone gutter (from 768px: --bss-gutter, below) */
  --sff26-max: var(--forum-content-max, var(--bss-max, 1416px));
  --sff26-amber: var(--forum-highlight, #FCB316);
  --sff26-hl-text: var(--forum-highlight-text, var(--forum-highlight, #FCB316));
  --sff26-hl-ink: var(--forum-dark, #141414); /* the words on the highlight (the solid tile); relative colours below */
  --sff26-fg: var(--forum-text, #fff);
  --sff26-pal-amber: var(--forum-gold, var(--forum-highlight, #FCB316));
  --sff26-pal-red: var(--forum-highlight, #E53935);
  --sff26-pal-blue: var(--forum-accent, #3399FF);
  --sff26-pal-pink: var(--forum-orchid, #FF88A2);
  --sff26-pal-green: var(--forum-teal, #76C893);
  --sff26-pal-amber-ink: var(--forum-dark, #141414); /* fallback for browsers without relative colours */
  --sff26-pal-red-ink: var(--forum-dark, #141414);
  --sff26-pal-blue-ink: var(--forum-dark, #141414);
  --sff26-pal-pink-ink: var(--forum-dark, #141414);
  --sff26-pal-green-ink: var(--forum-dark, #141414);
  --sff26-muted: var(--forum-text-muted, #cfcfcf);
  --forum-text-body: var(--sff26-muted);
  color: var(--sff26-fg);
}
@supports (color: oklch(from red l c h)) {
  .sff26-fweek:not(.skin-sff *) {
    /* ink on a fill: white on a dark fill, a near-black on a light one (River Stone's oklch) */
    --sff26-hl-ink: oklch(from var(--sff26-amber) clamp(0.245, (0.62 - l) * 1000, 1) clamp(0, (l - 0.62) * 1000, 0.017) 248);
    --sff26-pal-amber-ink: oklch(from var(--sff26-pal-amber) clamp(0.245, (0.62 - l) * 1000, 1) clamp(0, (l - 0.62) * 1000, 0.017) 248);
    --sff26-pal-red-ink: oklch(from var(--sff26-pal-red) clamp(0.245, (0.62 - l) * 1000, 1) clamp(0, (l - 0.62) * 1000, 0.017) 248);
    --sff26-pal-blue-ink: oklch(from var(--sff26-pal-blue) clamp(0.245, (0.62 - l) * 1000, 1) clamp(0, (l - 0.62) * 1000, 0.017) 248);
    --sff26-pal-pink-ink: oklch(from var(--sff26-pal-pink) clamp(0.245, (0.62 - l) * 1000, 1) clamp(0, (l - 0.62) * 1000, 0.017) 248);
    --sff26-pal-green-ink: oklch(from var(--sff26-pal-green) clamp(0.245, (0.62 - l) * 1000, 1) clamp(0, (l - 0.62) * 1000, 0.017) 248);
  }
}
@media (min-width: 768px) {
  .sff26-fweek:not(.skin-sff *) { --sff26-gut: var(--forum-gutter, var(--bss-gutter, 40px)); }
}

/* Heading, links, the note */
.sff26-fweek:not(.skin-sff *) .sff26-fweek__h2 { color: var(--sff26-fg); }
.sff26-fweek:not(.skin-sff *) .sff26-fweek__link,
.sff26-fweek:not(.skin-sff *) .sff26-fweek__link:hover,
.sff26-fweek:not(.skin-sff *) .sff26-fweek__link:focus-visible,
.sff26-fweek:not(.skin-sff *) .sff26-fweek__note-a { color: var(--sff26-hl-text); }
.sff26-fweek:not(.skin-sff *) .sff26-fweek__note-a:hover,
.sff26-fweek:not(.skin-sff *) .sff26-fweek__note-a:focus-visible { color: var(--sff26-fg); }

/* The days and the bars (list items: BSS would paint them in its body colour) */
.sff26-fweek:not(.skin-sff *) .sff26-fweek__day { --forum-text-body: var(--sff26-fg); color: var(--sff26-fg); }
.sff26-fweek:not(.skin-sff *) .sff26-fweek__bar { --forum-text-body: var(--sff26-on, var(--forum-dark, #141414)); }
@media (min-width: 1200px) {
  .sff26-fweek:not(.skin-sff *) .sff26-fweek__grid::after { background: linear-gradient(180deg, transparent, var(--forum-line, rgba(255, 255, 255, .22)) 20px, var(--forum-line, rgba(255, 255, 255, .22)) calc(100% - 64px), transparent); }
}

/* Photo tiles: the light grey line, as on SFF */
.sff26-fweek:not(.skin-sff *) .sff26-fweek__p { --forum-text-body: #dcdcdc; }

/* The solid tile: the highlight, its words in the highlight's ink; the arrow on hover in the ink */
.sff26-fweek:not(.skin-sff *) .sff26-fweek__tile--solid .sff26-fweek__a,
.sff26-fweek:not(.skin-sff *) .sff26-fweek__tile--solid a.sff26-fweek__a:focus-visible,
.sff26-fweek:not(.skin-sff *) .sff26-fweek__tile--solid .sff26-fweek__tag { color: var(--sff26-hl-ink); }
/* ...as a hairline pill in that ink, not SFF's 12% dark wash, which pulls the ink below 4.5:1 on a mid-tone fill */
.sff26-fweek:not(.skin-sff *) .sff26-fweek__tile--solid .sff26-fweek__tag { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 40%, transparent); }
.sff26-fweek:not(.skin-sff *) .sff26-fweek__tile--solid .sff26-fweek__p { --forum-text-body: var(--sff26-hl-ink); color: var(--sff26-hl-ink); }
.sff26-fweek:not(.skin-sff *) .sff26-fweek__tile--solid .sff26-fweek__go { border-color: color-mix(in srgb, var(--sff26-hl-ink) 40%, transparent); }
.sff26-fweek:not(.skin-sff *) .sff26-fweek__tile--solid a.sff26-fweek__a:focus-visible .sff26-fweek__go { border-color: var(--sff26-hl-ink); background: var(--sff26-hl-ink); color: var(--sff26-amber); }
@media (hover: hover) {
  .sff26-fweek:not(.skin-sff *) .sff26-fweek__tile--solid a.sff26-fweek__a:hover { color: var(--sff26-hl-ink); }
  .sff26-fweek:not(.skin-sff *) .sff26-fweek__tile--solid a.sff26-fweek__a:hover .sff26-fweek__go { border-color: var(--sff26-hl-ink); background: var(--sff26-hl-ink); color: var(--sff26-amber); }
}

/* The programme panel: its colour's ink on the formats and the "Also on" list */
.sff26-fweek:not(.skin-sff *) .sff26-fweek__fmt > li,
.sff26-fweek:not(.skin-sff *) .sff26-fweek__also > li { --forum-text-body: var(--sff26-on, var(--forum-dark, #141414)); }

/* The popup: the forum's card and its words (the close button stays a dark chip: it can sit on the photo) */
.sff26-fweek:not(.skin-sff *) .sff26-fweek__dlg { background: var(--forum-surface, #1b1b1b); color: var(--sff26-fg); }
.sff26-fweek:not(.skin-sff *) .sff26-fweek__pic { background: var(--forum-surface-raised, #141414); }
.sff26-fweek:not(.skin-sff *) .sff26-fweek__dh,
.sff26-fweek:not(.skin-sff *) .sff26-fweek__fact dd { color: var(--sff26-fg); }
.sff26-fweek:not(.skin-sff *) .sff26-fweek__facts { border-bottom-color: var(--forum-line, #333); }
.sff26-fweek:not(.skin-sff *) .sff26-fweek__desc { --forum-text-body: var(--forum-text-muted, #dcdcdc); color: var(--forum-text-muted, #dcdcdc); }
.sff26-fweek:not(.skin-sff *) .sff26-fweek__acc-p { --forum-text-body: var(--sff26-fg); color: var(--sff26-fg); }
.sff26-fweek:not(.skin-sff *) .sff26-fweek__tags > li { --forum-text-body: var(--sff26-fg); background: var(--forum-surface-raised, #2c2b2b); color: var(--sff26-fg); }

/* The joined card and the blocks: SFF's deep blue becomes the forum's dark colour, lit by its blue */
.sff26-fweek:not(.skin-sff *).sff26-fweek--prog-joined,
.sff26-fweek:not(.skin-sff *).sff26-fweek--prog-blocks {
  --sff26-deep: var(--forum-dark, #0B2B8F);
  --sff26-deep-2: color-mix(in srgb, var(--sff26-pal-blue) 22%, var(--sff26-deep));
  --sff26-glint: var(--sff26-pal-blue);
}
.sff26-fweek:not(.skin-sff *).sff26-fweek--prog-joined .sff26-fweek__tile--lead .sff26-fweek__a::before {
  background:
    radial-gradient(300px 220px at 100% 100%, color-mix(in srgb, var(--sff26-pal-blue) 42%, transparent), transparent 70%),
    linear-gradient(0deg, var(--sff26-deep) 0%, color-mix(in srgb, var(--sff26-deep) 92%, transparent) 18%, color-mix(in srgb, var(--sff26-deep) 55%, transparent) 42%, color-mix(in srgb, var(--sff26-deep) 12%, transparent) 70%, transparent 88%);
}
.sff26-fweek:not(.skin-sff *).sff26-fweek--prog-blocks .sff26-fweek__tile--lead .sff26-fweek__a::before {
  background:
    radial-gradient(300px 220px at 100% 100%, color-mix(in srgb, var(--sff26-pal-blue) 42%, transparent), transparent 70%),
    linear-gradient(0deg, var(--sff26-deep) 0%, color-mix(in srgb, var(--sff26-deep) 88%, transparent) 20%, color-mix(in srgb, var(--sff26-deep) 45%, transparent) 46%, transparent 78%);
}
.sff26-fweek:not(.skin-sff *).sff26-fweek--prog-joined .sff26-fweek__tile--lead .sff26-fweek__p,
.sff26-fweek:not(.skin-sff *).sff26-fweek--prog-blocks .sff26-fweek__tile--lead .sff26-fweek__p { --forum-text-body: rgba(255, 255, 255, .88); }
/* joined: the panel continues the card, light words on the dark */
.sff26-fweek:not(.skin-sff *).sff26-fweek--prog-joined .sff26-fweek__prog-in { background: radial-gradient(300px 220px at 100% 0%, color-mix(in srgb, var(--sff26-pal-blue) 42%, transparent), transparent 70%), linear-gradient(180deg, var(--sff26-deep) 0%, var(--sff26-deep-2) 100%); }
.sff26-fweek:not(.skin-sff *).sff26-fweek--prog-joined .sff26-fweek__fmt > li { --forum-text-body: #fff; }
.sff26-fweek:not(.skin-sff *).sff26-fweek--prog-joined .sff26-fweek__also > li { --forum-text-body: rgba(255, 255, 255, .88); }
/* blocks: the headings and the outlined rows sit on the page; the blocks stay dark cards */
.sff26-fweek:not(.skin-sff *).sff26-fweek--prog-blocks .sff26-fweek__prog-in,
.sff26-fweek:not(.skin-sff *).sff26-fweek--prog-blocks .sff26-fweek__prog-h { color: var(--sff26-fg); }
.sff26-fweek:not(.skin-sff *).sff26-fweek--prog-blocks .sff26-fweek__prog-h--also { color: var(--sff26-muted); }
.sff26-fweek:not(.skin-sff *).sff26-fweek--prog-blocks .sff26-fweek__prog-h--also::before { background: var(--forum-text-faint, rgba(255, 255, 252, .45)); }
.sff26-fweek:not(.skin-sff *).sff26-fweek--prog-blocks .sff26-fweek__blk > li { background: radial-gradient(220px 160px at 100% 0%, color-mix(in srgb, var(--sff26-glint) 30%, transparent), transparent 70%), linear-gradient(160deg, var(--sff26-deep-2) 0%, var(--sff26-deep) 100%); }
.sff26-fweek:not(.skin-sff *).sff26-fweek--prog-blocks .sff26-fweek__blk-k { color: color-mix(in srgb, var(--sff26-glint) 45%, #fff); }
.sff26-fweek:not(.skin-sff *).sff26-fweek--prog-blocks .sff26-fweek__also-li .sff26-fweek__also > li { --forum-text-body: var(--sff26-fg); box-shadow: inset 0 0 0 1px var(--forum-line, rgba(255, 255, 252, .16)); color: var(--sff26-fg); }