/* Partnerships board styles for tablet and phone. Loaded only with this board. */
@media (max-width: 1000px) {
/* ---------- the page viewer (shared inspector, `pages` kind) ------------- */

.board-ix[data-kind="pages"] .ix-body { display: block; overflow: hidden; padding: 0; }
.ix-pages { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; }
/* A flex frame, not a grid one: a grid row sized by its content gives the page
   an indefinite height to measure against, and a taller page then runs past the
   bottom of the viewer instead of being contained by it. */
.ix-page { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 clamp(6px, 1.4vw, 14px); }
.ix-page img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; background: none; box-shadow: var(--art-edge), var(--art-lift); border-radius: 3px; }
.ix-pager {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.7rem, 2vw, 1.4rem);
  padding: 0.5rem 0.9rem;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.ix-step {
  min-height: 34px;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0 0 0.1rem;
  background: none;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 720;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.ix-step:hover, .ix-step:focus-visible { border-bottom-color: var(--ink); }
.ix-step[disabled] { color: var(--muted); cursor: default; border-bottom-color: transparent; }
.ix-count { margin: 0; font-size: 0.72rem; font-weight: 720; letter-spacing: 0.1em; color: var(--muted-ink); font-variant-numeric: tabular-nums; }


/* =========================================================================
   Evidence board: Partnerships / Revenue Development
   (site/work/partnerships.html)

   The rebrand board's own component (`.board`, `.board-bar`, `.board-head`,
   `.board-field`, `.art*`, `.board-ix`, `board.js`) with its own canvas: the
   packet is the largest artifact and holds the left of the field, the year's
   collected results sit over the title sponsor's photograph in the middle, and
   the two returns the same partnership system produced — public value, then the
   advertiser's own performance — hold the right. One header, one field, one
   reading path, and the whole argument inside the board's first desktop view.

   Scoped to `.board-partner`, which travels on the board element itself. The
   overlay imports that element whole, so the composition arrives with the
   markup and the homepage trigger declares no scope class; the child page's own
   board wears the same class, so both routes show the same canvas.
   ========================================================================= */

/* ---------- shared inside the board -------------------------------------- */

/* These captions are sentences, so each takes its own line under its label
   rather than running on beside it. The board's own wrapping caption rail does
   the work; `flex-basis: 100%` is the only thing added to it. */
.board-partner .art-foot p { flex: 1 0 100%; margin: 0; }
.board-partner .partner-note { font-size: 0.7rem; line-height: 1.35; color: var(--copy); }
/* The one figure in the field that is a result rather than a total: it is given
   the weight a result earns, and left well below the year's totals opposite. */
.board-partner .partner-result {
  font-size: 0.76rem;
  line-height: 1.3;
  font-weight: 720;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* The field reads as three vertical runs rather than as a row of cards: the
   offer, then the results and the sponsor behind them, then the two returns.
   Grouping them this way is also what keeps the phone sequence in one order —
   offer, results, sponsor, public value, partner value, then the role. */
.board-partner .partner-col { display: flex; flex-direction: column; gap: 2.2rem; min-width: 0; }

/* A plate or a column head carries its label above it, ruled the same way the
   year's plate is; a photograph carries its label in the rail under the picture.
   Two heads, two ruled labels, two labelled photographs: the board's own rhythm
   rather than four arrangements of the same thing. */
.board-partner .art-label-head {
  flex: 0 0 auto;
  margin: 0 0 0.62rem;
  padding-bottom: 0.34rem;
  border-bottom: 2px solid var(--ink);
}

/* ---------- 01 the offer: three of the packet's pages -------------------- */

/* Without scripting, and at every phone width, the pages keep their breadth in
   an overlapping rail — the only thing on this board allowed to scroll
   sideways, so nothing overflows the page and no page is reduced to a
   thumbnail. */
.board-partner .offer-stack {
  position: relative;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.board-partner .offer-stack::-webkit-scrollbar { display: none; }
/* Five of the packet's eight pages are carried in the markup and never drawn:
   they are what the packet's own control opens in the page viewer, in packet
   order, so the viewer's count is the packet's own pagination. */
.board-partner .offer-rest { display: none; }
/* The stack is layered, so the control that opens the packet has to sit above
   every sheet: otherwise the pages take the click and the viewer never opens. */
.board-partner .art-offer .art-open { z-index: 40; }
.board-partner .offer-page {
  position: relative;
  flex: 0 0 auto;
  width: min(66%, 250px);
  margin: 0 0 0 calc(min(66%, 250px) * -0.26);
  aspect-ratio: 791 / 1024;
  border-radius: 3px;
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--art-edge), 0 18px 32px -24px rgba(10, 18, 27, 0.6);
  scroll-snap-align: start;
}
.board-partner .offer-page img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* The unrendered pages sit between the three drawn ones, so the rail's overlap
   cannot ride on an adjacent-sibling selector: every sheet after the first
   carries it. */
.board-partner .offer-page:first-of-type { margin-left: 0; }
/* No page badge is drawn on the sheets. A numbered tab on each edge turns a
   stack of paper into a carousel indicator, and the stack is not a carousel: the
   sheets are named in the artifact's own label and caption instead, and the
   packet's other pages are one control away in the inspector. */

/* ---------- 02 the year's collected results ------------------------------ */

/* One plate, not three cards: a heading, one rule, and three figures under it,
   so the totals read as an annotation on the program rather than as a row of
   dashboard tiles. The plate is headed this way because a data plate needs its
   own heading; the photographs keep their labels in the caption rail under them
   instead, so no label is ever set over a picture. */
.board-partner .annual-plate { margin: 0; }

.board-partner .annual-label {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0 0 0.62rem;
  padding-bottom: 0.34rem;
  border-bottom: 2px solid var(--ink);
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink);
}

.board-partner .annual-rows { margin: 0; display: grid; gap: 0.72rem; }
.board-partner .annual-row { margin: 0; }
.board-partner .annual-row dt {
  margin: 0;
  font-size: clamp(1.1rem, 1.45vw, 1.4rem);
  line-height: 1.05;
  font-weight: 720;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.board-partner .annual-row:first-child dt { font-size: clamp(1.35rem, 1.95vw, 1.78rem); }
.board-partner .annual-row dd { margin: 0.1rem 0 0; max-width: 34ch; font-size: 0.73rem; line-height: 1.3; color: var(--copy); }
.board-partner .annual-source { margin: 0.62rem 0 0; max-width: 34ch; font-size: 0.7rem; line-height: 1.35; color: var(--muted-ink); }

/* ---------- 04 the public value group ------------------------------------ */

/* Label, figure, the basis the figure is made of, then the sentence the figure
   supports: the group's own hierarchy, in that order and at those four scales. */
.board-partner .value-note { flex: 1 1 auto; min-width: 0; }
.board-partner .value-label { margin: 0 0 0.5rem; }
.board-partner .value-figure {
  margin: 0;
  font-size: clamp(1.3rem, 1.8vw, 1.68rem);
  line-height: 1.06;
  font-weight: 720;
  letter-spacing: -0.038em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.board-partner .value-basis { margin: 0.34rem 0 0; max-width: 30ch; font-size: 0.74rem; line-height: 1.3; color: var(--copy); }
.board-partner .value-why { margin: 0.6rem 0 0; max-width: 34ch; font-size: 0.68rem; line-height: 1.38; color: var(--muted-ink); }

/* ---------- the packet's control ----------------------------------------- */

/* A quiet underlined control in the board's own caption type: the stretched
   overlay opens the packet from the picture itself, and this is the same control
   said out loud, so the affordance never depends on hovering. */
.board-partner .art-btn-strong {
  min-height: 30px;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 760;
  color: var(--ink);
}
.board-partner .art-btn-strong:hover,
.board-partner .art-btn-strong:focus-visible { border-color: var(--ink); }

/* ---------- 03 the title sponsor's photograph ---------------------------- */

/* The crop is the display crop and nothing else: the frame is shown through a
   window the height of the golfers and their sign, which is what takes the
   empty sky out of the composition. The supplied file is unmodified, and the
   inspector opens the complete frame. This is the smallest picture on the board
   and it keeps to 92% of its run, so the year's figures above it stay the larger
   statement on that side. */
.board-partner .art-media-invest { width: 92%; }
.board-partner .art-media-invest img { object-fit: cover; object-position: 50% 90%; }

/* ---------- the role, as a footer on the field --------------------------- */

.board-partner .partner-role {
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.76rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--muted-ink);
}


}
/* ---------- narrow: the same board, read down the page ------------------- */

@media (max-width: 1000px) {
  /* The field becomes a deliberate vertical evidence sequence in the order the
     markup already holds: the packet, the year's figures, the title sponsor's
     investment, public value, the advertiser's return, then the role. */
  .board-partner .annual-row dt { font-size: 1.5rem; }
  .board-partner .annual-row:first-child dt { font-size: 1.78rem; }
  .board-partner .annual-row dd { font-size: 0.79rem; max-width: 40ch; }
  .board-partner .partner-role { font-size: 0.76rem; }
  .board-partner .partner-col { gap: 2.4rem; }
  /* On a phone the group's parts simply follow one another: the figure, then the
     second frame. The overlap is a desktop composition, and a touch screen has no
     second chance at a picture something else is sitting on. */
  .board-partner .value-row { display: block; }
  .board-partner .art-item-presenting { width: 100%; margin: 1.2rem 0 0; }
  .board-partner .value-figure { font-size: 1.5rem; }

}