/* SFF 2026 - Programme Bento. Scoped to .sff26-bento; rules are written as
   ".sff26-bento .sff26-bento__x" so they outrank the theme's element rules.
   The photo tiles are the Week at a Glance tiles; the pass tile is the
   homepage Pass Cards badge. The only !important is phone typography (see
   the phone block). --sff26-c / --sff26-on: the force colour and the text on
   it; --sff26-pc / --sff26-pon: a pass tile's colour and its text. */

.sff26-bento {
  --sff26-ink: #141414;
  --sff26-panel: #1e1d1d;
  --sff26-amber: #FCB316;
  --sff26-ease: cubic-bezier(.22, .8, .24, 1);
  --sff26-gut: 20px;
  --sff26-max: var(--forum-content-max, 1416px);
  overflow-x: clip; /* the pass tiles swing in rotated; never a sideways scroll while they do (as Pass Cards) */
  --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-bento { --sff26-gut: var(--forum-gutter, 40px); }
}
.sff26-bento *,
.sff26-bento *::before,
.sff26-bento *::after { box-sizing: border-box; }

.sff26-bento .sff26-bento__w {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 56px;
  max-width: calc(var(--sff26-max) + 2 * var(--sff26-gut));
  margin: 0 auto;
  padding: 0 var(--sff26-gut);
}
.sff26-bento .sff26-bento__bd { min-width: 0; }
.sff26-bento .sff26-bento__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;
}
/* Letter spans added by module.js; the legacy SFF CSS paints "h2 span" amber */
.sff26-bento .sff26-bento__h2 .sff26-bento__wd,
.sff26-bento .sff26-bento__h2 .sff26-bento__ch { color: inherit; }
.sff26-bento .sff26-bento__wd { white-space: nowrap; }
.sff26-bento .sff26-bento__ch { display: inline-block; }

/* The bento: four columns, 280px rows (they grow if a tile's words need it).
   The first tile is the 2x2 feature; 4 tiles = the second goes wide; 3 tiles =
   two wide tiles stacked beside the feature; a full-width tile takes a row. */
.sff26-bento .sff26-bento__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(280px, auto);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sff26-bento .sff26-bento__tile { display: flex; min-width: 0; margin: 0; padding: 0; list-style: none; }
.sff26-bento .sff26-bento__tile::before,
.sff26-bento .sff26-bento__tile::marker { content: none; }
.sff26-bento .sff26-bento__tile--feature { grid-column: span 2; grid-row: span 2; }
.sff26-bento .sff26-bento__grid--n1 .sff26-bento__tile--feature { grid-column: 1 / -1; }
.sff26-bento .sff26-bento__grid--n2 .sff26-bento__tile:nth-child(2) { grid-column: span 2; grid-row: span 2; }
.sff26-bento .sff26-bento__grid--n3 .sff26-bento__tile:not(.sff26-bento__tile--feature):not(.sff26-bento__tile--wide) { grid-column: span 2; }
.sff26-bento .sff26-bento__grid--n4 .sff26-bento__tile:nth-child(2) { grid-column: span 2; }
.sff26-bento .sff26-bento__tile--wide { grid-column: 1 / -1; }

.sff26-bento .sff26-bento__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), color .3s ease;
}
.sff26-bento .sff26-bento__a img {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: var(--sff26-pos, 50% 50%);
  -webkit-user-drag: none;
  transition: transform .8s var(--sff26-ease);
}
/* A dark fade up from the bottom so the words read on any photo */
.sff26-bento .sff26-bento__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%);
}
.sff26-bento a.sff26-bento__a:hover,
.sff26-bento a.sff26-bento__a:focus-visible {
  transform: translateY(-6px);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .75);
}
.sff26-bento a.sff26-bento__a:hover img,
.sff26-bento a.sff26-bento__a:focus-visible img { transform: scale(1.06); }
.sff26-bento a:focus-visible { outline: 2px solid var(--sff26-amber); outline-offset: 3px; }

/* A small tag in the top corner (4px corners, not a pill) */
.sff26-bento .sff26-bento__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 92px);
  height: 30px;
  padding: 0 12px;
  overflow: hidden;
  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;
  text-overflow: ellipsis;
  color: #fff;
  transition: background-color .3s ease, color .3s ease;
}
.sff26-bento .sff26-bento__t {
  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;
  text-wrap: balance;
}
.sff26-bento .sff26-bento__p { margin: 6px 0 0; padding: 0; font-size: 15px; line-height: 1.45; font-weight: 400; color: #dcdcdc; transition: color .3s ease; }
.sff26-bento .sff26-bento__tile--feature .sff26-bento__t { padding-right: 56px; font-size: 36px; }
.sff26-bento .sff26-bento__tile--feature .sff26-bento__p { padding-right: 56px; font-size: 17px; }
.sff26-bento .sff26-bento__tile--wide .sff26-bento__t { font-size: 30px; }
.sff26-bento .sff26-bento__tile--wide .sff26-bento__p { font-size: 17px; }

/* hyphenated words ("build-or-buy", "15-minute") keep together, as in the mockup */
.sff26-bento .sff26-bento__nw { white-space: nowrap; color: inherit; }
/* The arrow in a circle: bottom right on the feature; top right on the
   others, so their words use the full width */
.sff26-bento .sff26-bento__go {
  position: absolute;
  top: 16px;
  right: 16px;
  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-bento .sff26-bento__tile--feature .sff26-bento__go { top: auto; bottom: 20px; right: 20px; }
.sff26-bento .sff26-bento__tile--photo .sff26-bento__go { background: rgba(20, 20, 20, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sff26-bento .sff26-bento__go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sff26-bento a.sff26-bento__a:hover .sff26-bento__go,
.sff26-bento a.sff26-bento__a:focus-visible .sff26-bento__go { transform: translateX(6px); border-color: #fff; background: #fff; color: #141414; }

/* Text tile: dark, floods with the force colour on hover, like the homepage cards */
.sff26-bento .sff26-bento__tile--text .sff26-bento__a { background: var(--sff26-panel); }
.sff26-bento .sff26-bento__tile--text .sff26-bento__a::before { background: var(--sff26-c); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .45s var(--sff26-ease); }
.sff26-bento .sff26-bento__tile--text a.sff26-bento__a:hover::before,
.sff26-bento .sff26-bento__tile--text a.sff26-bento__a:focus-visible::before { transform: scaleY(1); }
.sff26-bento .sff26-bento__tile--text a.sff26-bento__a:hover,
.sff26-bento .sff26-bento__tile--text a.sff26-bento__a:focus-visible { color: var(--sff26-on); }
.sff26-bento .sff26-bento__tile--text a.sff26-bento__a:hover .sff26-bento__p,
.sff26-bento .sff26-bento__tile--text a.sff26-bento__a:focus-visible .sff26-bento__p { color: var(--sff26-on); }
.sff26-bento .sff26-bento__tile--text a.sff26-bento__a:hover .sff26-bento__tag,
.sff26-bento .sff26-bento__tile--text a.sff26-bento__a:focus-visible .sff26-bento__tag { background: rgba(20, 20, 20, .14); color: var(--sff26-on); }
.sff26-bento .sff26-bento__tile--text a.sff26-bento__a:hover .sff26-bento__go,
.sff26-bento .sff26-bento__tile--text a.sff26-bento__a:focus-visible .sff26-bento__go { border-color: #141414; background: #141414; color: #fff; }

/* Pass tile: the homepage pass badge (Pass Cards) in its pass colour */
.sff26-bento .sff26-bento__tile--pass .sff26-bento__a {
  justify-content: flex-start;
  padding: 0;
  background: var(--sff26-pc);
  color: var(--sff26-pon);
}
/* on hover a light shade drops from the top */
.sff26-bento .sff26-bento__tile--pass .sff26-bento__a::before {
  background: rgba(0, 0, 0, .1);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .45s var(--sff26-ease);
}
.sff26-bento .sff26-bento__tile--pass a.sff26-bento__a:hover,
.sff26-bento .sff26-bento__tile--pass a.sff26-bento__a:focus-visible { transform: translateY(-6px) rotate(-.6deg); color: var(--sff26-pon); }
.sff26-bento .sff26-bento__tile--pass a.sff26-bento__a:hover::before,
.sff26-bento .sff26-bento__tile--pass a.sff26-bento__a:focus-visible::before { transform: scaleY(1); }
/* the lanyard slot: a hole in the page colour */
.sff26-bento .sff26-bento__band { position: relative; display: block; flex: none; height: 52px; }
.sff26-bento .sff26-bento__band::after {
  content: "";
  position: absolute;
  top: 18px;
  left: 50%;
  width: 54px;
  height: 10px;
  margin-left: -27px;
  border-radius: 6px;
  background: var(--sff26-ink);
}
.sff26-bento .sff26-bento__in { display: flex; flex-direction: column; flex: 1; padding: 14px 26px 24px; container-type: inline-size; }
.sff26-bento .sff26-bento__tile--pass .sff26-bento__t { font-size: 26px; letter-spacing: -.012em; }
.sff26-bento .sff26-bento__tile--pass .sff26-bento__p { max-width: 40ch; margin-top: 10px; color: inherit; opacity: .9; text-wrap: pretty; }
.sff26-bento .sff26-bento__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 22px; }
.sff26-bento .sff26-bento__price { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* the price stays on one line: it steps down only as far as the longest price
   word ("Complimentary", 7.62em wide) needs beside the arrow (as Pass Cards does on phones) */
.sff26-bento .sff26-bento__price b { font-size: min(22px, calc((100cqw - 60px) / 7.62)); line-height: 1.2; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; color: inherit; }
.sff26-bento .sff26-bento__price small { display: block; font-size: 14px; line-height: 1.4; font-weight: 400; color: inherit; opacity: .9; }
.sff26-bento .sff26-bento__tile--pass .sff26-bento__go { position: static; flex: none; border-color: currentColor; background: none; }
.sff26-bento .sff26-bento__tile--pass a.sff26-bento__a:hover .sff26-bento__go,
.sff26-bento .sff26-bento__tile--pass a.sff26-bento__a:focus-visible .sff26-bento__go { border-color: var(--sff26-ink); background: var(--sff26-ink); color: #fff; }

/* Tablets: the feature full width, then pairs */
@media (max-width: 991px) {
  .sff26-bento { padding-top: 96px; }
  .sff26-bento .sff26-bento__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(340px, auto); grid-auto-rows: minmax(250px, auto); }
  .sff26-bento .sff26-bento__tile--feature { grid-column: 1 / -1; grid-row: auto; }
  .sff26-bento .sff26-bento__grid--n2 .sff26-bento__tile:nth-child(2) { grid-column: 1 / -1; grid-row: auto; }
  .sff26-bento .sff26-bento__grid--n3 .sff26-bento__tile:not(.sff26-bento__tile--feature):not(.sff26-bento__tile--wide) { grid-column: auto; }
  .sff26-bento .sff26-bento__grid--n4 .sff26-bento__tile:nth-child(2) { grid-column: auto; }
  .sff26-bento .sff26-bento__grid--n4 .sff26-bento__tile:nth-child(4):last-child { grid-column: 1 / -1; }
  /* with four programme tiles, the full-width tile pairs with the fourth */
  .sff26-bento .sff26-bento__grid--n4 .sff26-bento__tile--wide { grid-column: auto; }
  .sff26-bento .sff26-bento__tile--feature .sff26-bento__t { font-size: 30px; }
}

/* Phones: one column */
@media (max-width: 767px) {
  .sff26-bento { padding-top: 72px; --sff26-r: 14px; }
  .sff26-bento .sff26-bento__w { row-gap: 30px; }
  .sff26-bento .sff26-bento__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: 320px; grid-auto-rows: auto; gap: 10px; }
  .sff26-bento .sff26-bento__tile,
  .sff26-bento .sff26-bento__tile--feature,
  .sff26-bento .sff26-bento__tile--wide,
  .sff26-bento .sff26-bento__grid--n2 .sff26-bento__tile:nth-child(2),
  .sff26-bento .sff26-bento__grid--n3 .sff26-bento__tile:not(.sff26-bento__tile--feature):not(.sff26-bento__tile--wide),
  .sff26-bento .sff26-bento__grid--n4 .sff26-bento__tile:nth-child(2),
  .sff26-bento .sff26-bento__grid--n4 .sff26-bento__tile:nth-child(4):last-child,
  .sff26-bento .sff26-bento__grid--n4 .sff26-bento__tile--wide { grid-column: 1 / -1; grid-row: auto; }
  .sff26-bento .sff26-bento__tile--photo:not(.sff26-bento__tile--feature),
  .sff26-bento .sff26-bento__tile--text:not(.sff26-bento__tile--feature) { min-height: 220px; }
  .sff26-bento .sff26-bento__a { padding: 16px; }
  .sff26-bento .sff26-bento__tile--feature .sff26-bento__go { top: 12px; right: 12px; bottom: auto; }
  .sff26-bento .sff26-bento__go { top: 12px; right: 12px; width: 36px; height: 36px; }
  .sff26-bento .sff26-bento__go svg { width: 15px; height: 15px; }
  .sff26-bento .sff26-bento__tile--feature .sff26-bento__t,
  .sff26-bento .sff26-bento__tile--feature .sff26-bento__p { padding-right: 0; }
  .sff26-bento .sff26-bento__tag { top: 12px; left: 12px; max-width: calc(100% - 72px); height: 26px; padding: 0 10px; font-size: 12px; }
  .sff26-bento .sff26-bento__band { height: 44px; }
  .sff26-bento .sff26-bento__band::after { top: 14px; width: 40px; height: 8px; margin-left: -20px; }
  .sff26-bento .sff26-bento__in { padding: 8px 16px 16px; }
  .sff26-bento .sff26-bento__tile--pass .sff26-bento__p { margin: 6px 0 28px; }
  .sff26-bento .sff26-bento__foot { padding-top: 0; }
  .sff26-bento .sff26-bento__tile--pass .sff26-bento__go { width: 36px; height: 36px; }

  /* Phone type. The theme's main.css and the page's head styles set h2 /
     h3 / p sizes and weights on phones with !important, so these must be
     !important too (phone typography only). */
  .sff26-bento .sff26-bento__h2 { font-size: 32px !important; line-height: 1.12 !important; font-weight: 600 !important; }
  .sff26-bento .sff26-bento__t { font-size: 22px !important; line-height: 1.2 !important; font-weight: 600 !important; }
  .sff26-bento .sff26-bento__tile--feature .sff26-bento__t { font-size: 28px !important; }
  .sff26-bento .sff26-bento__p { font-size: 14px !important; line-height: 1.45 !important; }
  .sff26-bento .sff26-bento__tile--feature .sff26-bento__p,
  .sff26-bento .sff26-bento__tile--wide .sff26-bento__p { font-size: 15px !important; }
  .sff26-bento .sff26-bento__price b { font-size: min(18px, calc((100cqw - 52px) / 7.62)) !important; }
  .sff26-bento .sff26-bento__price small { font-size: 13px !important; line-height: 1.4 !important; }
}

/* Entrances, once each. module.js adds --armed only when it can also reveal,
   so without JavaScript or with reduced motion nothing is hidden: heading
   letters rise in, the tiles rise in turn, a pass badge swings down on its
   lanyard. */
.sff26-bento.sff26-bento--armed .sff26-bento__ch {
  transition: opacity .45s ease, transform .6s var(--sff26-ease);
  transition-delay: calc(var(--sff26-ci, 0) * 16ms);
}
.sff26-bento.sff26-bento--armed .sff26-bento__h2:not(.sff26-bento--in) .sff26-bento__ch { opacity: 0; transform: translateY(.4em); }
.sff26-bento.sff26-bento--armed .sff26-bento__tile {
  transition: opacity .6s ease, transform .85s cubic-bezier(.2, .9, .25, 1.1);
  transition-delay: calc(var(--sff26-i, 0) * 80ms);
}
.sff26-bento.sff26-bento--armed .sff26-bento__grid--settled .sff26-bento__tile { transition-delay: 0s; }
.sff26-bento.sff26-bento--armed .sff26-bento__grid:not(.sff26-bento--in) .sff26-bento__tile { opacity: 0; transform: translateY(28px) scale(.97); }
.sff26-bento.sff26-bento--armed .sff26-bento__tile--pass { transition: none; transform-origin: 50% 0; }
.sff26-bento.sff26-bento--armed .sff26-bento__grid:not(.sff26-bento--in) .sff26-bento__tile--pass { transform: none; }
.sff26-bento.sff26-bento--armed .sff26-bento__grid.sff26-bento--in .sff26-bento__tile--pass { animation: sff26-bento-swing 1s var(--sff26-ease) both; animation-delay: calc(var(--sff26-i, 0) * 90ms); }
@keyframes sff26-bento-swing {
  0% { opacity: 0; transform: translateY(-34px) rotate(-7deg); }
  45% { opacity: 1; transform: translateY(0) rotate(3deg); }
  72% { transform: rotate(-1.2deg); }
  100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sff26-bento .sff26-bento__a,
  .sff26-bento .sff26-bento__a img,
  .sff26-bento .sff26-bento__a::before,
  .sff26-bento .sff26-bento__go,
  .sff26-bento .sff26-bento__tag,
  .sff26-bento .sff26-bento__p,
  .sff26-bento .sff26-bento__tile--text .sff26-bento__a::before,
  .sff26-bento .sff26-bento__tile--pass .sff26-bento__a::before { transition: none; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Other forums (12 Oct, user: "globalise the new modules to be used on other forums"). Everything below applies only
   OFF SFF (".sff26-bento: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 text tiles take the forum's card; the pass tiles their colour and its ink.
   --------------------------------------------------------------------------------------------------------------- */
.sff26-bento: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-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-panel: var(--forum-surface, #1e1d1d);
  --sff26-ink: var(--forum-page, var(--forum-dark, #141414)); /* the lanyard slot: a hole in the page colour */
  --forum-text-body: #dcdcdc;
  color: var(--sff26-fg);
}
@supports (color: oklch(from red l c h)) {
  .sff26-bento:not(.skin-sff *) {
    /* ink on a palette fill: white on a dark fill, a near-black on a light one (River Stone's oklch) */
    --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-bento:not(.skin-sff *) { --sff26-gut: var(--forum-gutter, var(--bss-gutter, 40px)); }
}
.sff26-bento:not(.skin-sff *) .sff26-bento__h2 { color: var(--sff26-fg); }
/* Text tile: the forum's card and its words; it still floods with the force colour on hover */
.sff26-bento:not(.skin-sff *) .sff26-bento__tile--text .sff26-bento__a { box-shadow: inset 0 0 0 1px var(--forum-line, transparent); color: var(--sff26-fg); }
.sff26-bento:not(.skin-sff *) .sff26-bento__tile--text .sff26-bento__p { --forum-text-body: var(--forum-text-muted, #dcdcdc); color: var(--forum-text-muted, #dcdcdc); }
.sff26-bento:not(.skin-sff *) .sff26-bento__tile--text .sff26-bento__tag { background: var(--forum-surface-raised, rgba(20, 20, 20, .72)); color: var(--sff26-fg); }
.sff26-bento:not(.skin-sff *) .sff26-bento__tile--text .sff26-bento__go { border-color: var(--forum-line, rgba(255, 255, 255, .4)); }
.sff26-bento:not(.skin-sff *) .sff26-bento__tile--text a.sff26-bento__a:hover,
.sff26-bento:not(.skin-sff *) .sff26-bento__tile--text a.sff26-bento__a:focus-visible { box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .75); }
.sff26-bento:not(.skin-sff *) .sff26-bento__tile--text a.sff26-bento__a:hover .sff26-bento__p,
.sff26-bento:not(.skin-sff *) .sff26-bento__tile--text a.sff26-bento__a:focus-visible .sff26-bento__p { --forum-text-body: var(--sff26-on); }
.sff26-bento:not(.skin-sff *) .sff26-bento__tile--text a.sff26-bento__a:hover .sff26-bento__go,
.sff26-bento:not(.skin-sff *) .sff26-bento__tile--text a.sff26-bento__a:focus-visible .sff26-bento__go { border-color: var(--forum-dark, #141414); background: var(--forum-dark, #141414); }
/* Pass tile: the words in its colour's ink; the arrow on hover in that ink, so it shows on any colour */
.sff26-bento:not(.skin-sff *) .sff26-bento__tile--pass .sff26-bento__p { --forum-text-body: var(--sff26-pon); }
.sff26-bento:not(.skin-sff *) .sff26-bento__tile--pass a.sff26-bento__a:hover .sff26-bento__go,
.sff26-bento:not(.skin-sff *) .sff26-bento__tile--pass a.sff26-bento__a:focus-visible .sff26-bento__go { border-color: var(--sff26-pon); background: var(--sff26-pon); color: var(--sff26-pc); }
/* a white pass on a light page needs an edge (the markup writes its colour, as for every pass) */
.sff26-bento:not(.skin-sff *) .sff26-bento__tile--pass[style*="--sff26-pc: #FFFFFF"] .sff26-bento__a,
.sff26-bento:not(.skin-sff *) .sff26-bento__tile--pass[style*="--sff26-pc: #FFFFFF"] .sff26-bento__band::after { box-shadow: inset 0 0 0 1px var(--forum-line, transparent); }