/* ---------- Contents (was What's inside): the quick-jump section after the hero (Mench Index, Checkpoint 2) ----------
   Six tall photo strips, one per main section, like a book's table of contents. Each has a coloured outline, a giant
   outlined name running up the strip and its number in the corner. On hover (or a tap) a striped fill in the strip's
   colour wipes in from the bottom-left corner (js/inside.js draws it) and the giant name turns solid white. */
/* What's inside is wider than the other sections on big screens (owner, 3 November 2026): the shared .wrap stops at
   1200px, which left wide empty margins beside the six strips. --ix-max is the one number to play with. */
.ix {
  --ix-max: 1680px;
}
.ix > .wrap {
  max-width: var(--ix-max);
}
.ix-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0 0 40px;
}
.ix-kicker {
  margin: 0 0 12px;
  color: var(--muted);
  font: 700 13px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* the big bold title, like Birthdays and Board games (.big-title, css/page/02-sections.css). It was outlined capitals
   that filled in letter by letter on hover; since 9 November 2026 it matches the rest of the page. */
#inside-h {
  --big: clamp(min(80px, 25vw), 22vw, 140px);
}
.ix-hint {
  max-width: 30ch;
  margin: 0;
  color: var(--muted);
  font: 400 16px/1.45 var(--font-body);
}
.ix-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
  gap: 22px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ix;
}
/* each strip's outline and fill colour (owner, 3 November 2026), and the stripe just above the fill, in the next
   strip's colour */
.ix-item {
  counter-increment: ix;
}
.ix-item:nth-child(6n + 1) {
  /* How it works */
  --c: var(--purple);
  --c2: var(--red);
}
.ix-item:nth-child(6n + 2) {
  /* Birthdays */
  --c: var(--red);
  --c2: var(--yellow);
}
.ix-item:nth-child(6n + 3) {
  /* Board games */
  --c: var(--yellow);
  --c2: var(--purple);
}
.ix-item:nth-child(6n + 4) {
  /* Video games */
  --c: var(--purple);
  --c2: var(--green);
}
.ix-item:nth-child(6n + 5) {
  /* Events */
  --c: var(--green);
  --c2: var(--red);
}
.ix-item:nth-child(6n + 6) {
  /* FAQ */
  --c: var(--red);
  --c2: var(--purple);
}
.ix-item:nth-child(even) {
  margin-top: 46px; /* every other strip sits lower and is shorter, so the row reads like book spines */
}
.ix-link {
  display: block;
  color: inherit;
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.ix-strip {
  position: relative;
  display: block; /* a span (a div can't sit inside the link), so it needs to be a block to take a height */
  /* 450px up to a 1280px screen, then taller as the strips get wider, so they stay tall book spines (the giant name is
     sized from the strip's width, so a wider strip needs the room); stops growing where --ix-max does */
  height: clamp(450px, 22.9vw + 157px, 560px);
  border: 3px solid var(--c);
  border-radius: 6px;
  container-type: inline-size; /* the giant name and number are sized from the strip's width (cqw) */
}
.ix-item:nth-child(even) .ix-strip {
  height: clamp(400px, 22.9vw + 107px, 510px);
}
.ix-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 3px;
  background: var(--surface);
}
.ix-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
}
/* FAQ's photo is a collage with the tournament cups along its top edge; when the strip is a different shape and has
   to crop it, keep the top (and zoom from there) so the cups stay whole (owner, 11 November 2026) */
.ix-link[href="#faq"] .ix-photo img {
  object-position: center top;
  transform-origin: center top;
}
/* the number, top right */
.ix-strip::after {
  content: counter(ix, decimal-leading-zero);
  position: absolute;
  z-index: 3;
  top: 8px;
  right: 10px;
  color: transparent;
  font: 900 24cqw/1 var(--font-letters);
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.95);
}
/* the giant name, running up the strip */
.ix-big {
  position: absolute;
  z-index: 2;
  bottom: 10px;
  left: calc(10px + 1em);
  pointer-events: none;
  color: transparent;
  font: 900 26cqw/0.82 var(--font-letters);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.95);
  text-shadow: 0 0 14px rgba(0, 0, 0, 0.35);
  transform: rotate(-90deg);
  transform-origin: left bottom;
}
.ix-link:is(:hover, :focus-visible, .show) .ix-big {
  color: #ffffff;
  -webkit-text-stroke: 2px var(--c); /* the strip's own colour (owner, 3 November 2026; it was black) */
  paint-order: stroke fill;
  text-shadow: none;
  transition: color 0s linear 60ms;
}
.ix-name {
  display: block;
  margin-top: 14px;
  font: 900 22px/1 var(--font-letters);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ix-sub {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font: 400 13px/1.3 var(--font-body);
}
.ix-link:focus-visible .ix-name {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* the fill: a solid corner in the strip's colour with a stripe above it, sliding in from the bottom left */
.ix-hatch {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 3px;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 140ms;
}
.ix-hatch .solid,
.ix-hatch .stripe {
  fill: var(--c);
}
.ix-hatch .wipe {
  transform: translate(var(--tx), var(--ty));
  transition: transform 130ms cubic-bezier(0.5, 0, 0.9, 0.4);
}
.ix-link:is(:hover, :focus-visible, .show) .ix-hatch {
  visibility: visible;
  transition: none;
}
.ix-link:is(:hover, :focus-visible, .show) .ix-hatch .wipe {
  transform: none;
  transition: transform 170ms cubic-bezier(0.15, 0.85, 0.25, 1);
}
.ix-link:is(:hover, :focus-visible, .show) .ix-hatch .wipe.late {
  transition-delay: 45ms;
}

/* the strips rise in, one after another, the first time the section scrolls into view */
.ix.armed .ix-item {
  opacity: 0;
  transform: translateY(40px);
}
.ix.in .ix-item {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s ease,
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(var(--i) * 55ms);
}

@media (max-width: 1100px) {
  .ix-strip {
    height: 360px;
  }
  .ix-item:nth-child(even) .ix-strip {
    height: 320px;
  }
}
@media (max-width: 820px) {
  .ix-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ix-item:nth-child(even) {
    margin-top: 0;
  }
  .ix-item:nth-child(3n + 2) {
    margin-top: 40px;
  }
}
@media (max-width: 640px) {
  .ix-head {
    gap: 10px;
    margin-bottom: 28px;
  }
  .ix-hint {
    font-size: 15px;
  }
  /* two strips per row on phones (owner, 9 November 2026; it was three), so the right-hand one of each pair sits
     lower and shorter, like the desktop row. The tablet rule above staggers the middle of three (3n + 2), so it is
     reset here first. */
  .ix-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
  }
  .ix-item:nth-child(3n + 2) {
    margin-top: 0;
  }
  .ix-item:nth-child(even) {
    margin-top: 36px;
  }
  .ix-item .ix-strip {
    height: 300px;
  }
  .ix-item:nth-child(even) .ix-strip {
    height: 264px;
  }
  /* the giant name and number grow with the strip's width (cqw); two columns make strips up to 290px wide on a
     640px screen, where HOW IT WORKS would run out of the top of the strip, so cap them. min() keeps the cqw
     sizing on narrow phones and only kicks in on the wide ones. */
  .ix-big {
    font-size: min(26cqw, 46px);
  }
  .ix-strip::after {
    font-size: min(24cqw, 46px);
  }
  .ix-name {
    margin-top: 12px;
    font-size: 19px;
  }
  .ix-sub {
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ix-hatch,
  .ix-hatch *,
  .ix-big {
    transition: none !important;
  }
  .ix.armed .ix-item {
    opacity: 1;
    transform: none;
  }
}