/* open-partners.css: the partners page as one open page rather than a stack
   of panels.

   Asked for by the owner on 2026-09-16, after the homepage (open.css). The
   rounded light panel painted behind each section, the chalk corners and
   the touchline between them read as boxes stacked on boxes. So the panels
   go, and the words stand on the night ground in cream. A box is kept only
   round a piece of content:

     who        the list of readers is one box, and the plate it opens is
                another
     platform   each of the five features is a cream card
     feeds      the one input is a card, and the five feeds it comes out as
                are a list of lines divided by guide lines
     output     the three ways to take the commentary are open columns
                divided by guide lines
     pilot      the three steps stand on the ground

   The headings come from open-sub.css and need nothing here. Loaded last,
   and it only overrides. Every selector starts at #main, so it beats
   partners.css and pitch-partners.css on weight rather than on load order. */

/* No panel means no inset for one either, so the words line up with the
   heading's guide lines at the same edge as on the other pages. */
main#main { --inset: max(var(--gutter), calc(50vw - var(--maxw) / 2 + var(--gutter))); }

/* ---- Sections: no panel, cream ink straight on the ground ---- */

#main .sec {
  padding-block: var(--sec-gap) 0;
  background: transparent;
  color: var(--cream);
  --band: var(--night);
  --ink: var(--cream);
  --ink-2: var(--pale);
  --rule: var(--guide);
  --focus: var(--cream);
  --accent-ink: var(--orange);
}
#main .sec::before,
#main .sec::after { content: none; }
#main .sec > .sec__in { margin-top: 0; }

/* The head keeps its look, but the room under it is the section gap alone,
   so the first heading sits as far below it as each heading sits below the
   section before. */
#main .desk { padding-bottom: 0; }

#main .sec.closing { padding-block: var(--sec-gap) calc(var(--sec-gap) * 0.8); }

/* The foot's line runs the width of the content, like the guide lines. */
body .foot::before { left: var(--inset, var(--gutter)); right: var(--inset, var(--gutter)); height: 1px; background: var(--guide); }

/* ---- Who it is for: the list is one box, the plate beside it another ---- */

/* The list box ends at its last reader rather than stretching to the
   height of the plate beside it. */
#main .who__options {
  align-self: start;
  gap: 1px;
  overflow: hidden;
  border-radius: var(--box-r);
  background: color-mix(in oklab, var(--deep), var(--pale) 78%);
  --band: var(--pale);
  --focus: var(--deep);
}
#main .who__options .option { background: var(--pale); color: var(--deep); }
#main .who__options .option:hover { background: var(--pale-2); }
#main .who__options .option small { color: var(--moss); }
#main .who__options .option[aria-pressed="true"] { background: var(--night-raised); color: var(--cream); }
#main .who__options .option[aria-pressed="true"] small { color: var(--pale); }
/* The box clips anything outside it, so the focus ring is drawn inside. */
#main .who__options .option:focus-visible { outline-offset: -5px; }
#main .who__options .option[aria-pressed="true"]:focus-visible { outline-color: var(--cream); }

#main .who__panel {
  border-radius: var(--box-r);
  background: var(--night-raised);
  box-shadow: inset 0 0 0 1px var(--guide);
  --rule: var(--guide);
}

/* ---- The platform: four cream cards ---- */

#main .plat { gap: clamp(14px, 1.8vw, 24px); }
#main .feat {
  border-radius: var(--box-r);
  background: var(--cream);
  color: var(--deep);
  --ink: var(--deep);
  --ink-2: var(--moss);
  --rule: var(--rule-light);
  --focus: var(--deep);
  --accent-ink: var(--orange-deep);
}
/* The highlight builder inside the first card is night, and keeps its own
   light ink and rules. */
#main .feat .cut {
  border-radius: 10px;
  color: var(--cream);
  --ink: var(--cream);
  --ink-2: var(--pale);
  --rule: var(--night-rule);
  --focus: var(--cream);
  --accent-ink: var(--orange);
}
#main .feat .well { border-radius: 10px; }
#main .feat .ads__player { border-radius: 10px; }

/* ---- Parallel feeds: the input is a card, the feeds are lines ---- */

#main .fan__in {
  padding: 18px 20px 20px;
  border-radius: var(--box-r);
}
#main .fan__list {
  gap: 0;
  border-top: 1px solid var(--guide);
}
#main .fan__list li { border-bottom: 1px solid var(--guide); }
#main .fan__feed {
  min-height: 48px;
  padding: 10px 0 10px 24px;
  background: transparent;
  color: var(--cream);
}
#main .fan__feed::before { width: 10px; height: 10px; margin-top: -5px; }

/* ---- How we output: three open columns ---- */

#main .outs {
  gap: 0;
  border-top: 1px solid var(--guide);
}
#main .out {
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2.4vw, 36px) 4px;
  background: transparent;
  border-top: 0;
}
#main .out:first-child { padding-left: 0; }
#main .out:last-child { padding-right: 0; }
#main .out + .out { border-left: 1px solid var(--guide); }
#main .out__facts div { border-top: 1px solid var(--guide); }
#main .out__facts dt { color: var(--gold); }
#main .out__facts dd { color: var(--cream); }

/* ---- How a pilot works: the steps on the ground ---- */

#main .step__num {
  background: var(--cream);
  color: var(--deep);
  border-color: var(--cream);
}

/* ---- Narrower ---- */

@media (max-width: 899.98px) {
  #main .out,
  #main .out:first-child,
  #main .out:last-child { padding: 18px 0; }
  #main .out + .out { border-left: 0; border-top: 1px solid var(--guide); }

  /* Once the numbers stand down the left, the words beside them read from
     the left too, rather than centred in the space that is left. */
  #main .step { text-align: left; }
  #main .step p { margin-left: 0; }
}