/* ============================================================
   site.css
   Badger Fund of Funds

   Screen styles. Contains NO color values. Every color is a
   var() pointing at tokens.css. Do not add a color here.
   ============================================================ */

/* --- Reset -------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
p,
dl,
dt,
dd,
ul,
li,
figure,
table {
  margin: 0;
  padding: 0;
}


/* --- Page --------------------------------------------------- */

html {
  background-color: var(--color-canvas);
}

body {
  background-color: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;

  /* Holds the footer at the bottom of the window on a page whose
     content does not fill it. Without this the footer stops wherever
     the text stops, so Portfolio put it 286px higher up the screen
     than Investment Strategy did. Three parts do it: this flex
     column, the window height below it, and flex-grow on .main.

     svh is the small viewport height. On a phone it measures the
     window with the browser toolbars showing, so the footer does not
     jump when the toolbars hide. The plain vh above it is the
     fallback for a browser that does not know svh. Both are kept. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}


/* --- Focus --------------------------------------------------
   One visible focus style for everything. Never remove it.
   ----------------------------------------------------------- */

:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}


/* --- Skip link ----------------------------------------------
   Hidden until it receives keyboard focus.
   ----------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--space-2xs);
  top: var(--space-2xs);
  z-index: 10;
  padding: var(--space-2xs) var(--space-sm);
  background-color: var(--color-ink);
  color: var(--color-ink-inverse);
  text-decoration: underline;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}


/* --- Shared width ------------------------------------------- */

.wrapper {
  /* width:100% matters now that body is a flex column. An auto
     margin on the cross axis beats align-items:stretch, so without
     this the header sized itself to its own content and sat 108px
     narrower than the footer, which put the navigation bar inside
     the body text instead of 0.44in outside it. */
  width: 100%;
  max-width: var(--measure-page);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}


/* --- Site header and navigation ----------------------------- */

/* The fund name and the navigation share one row. flex-wrap means
   they drop onto separate rows by themselves on a narrow screen,
   so this needs no width query. */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-lg);
  border-bottom: var(--border-width-hairline) solid var(--color-rule);
  padding-top: var(--space-2xs);
  padding-bottom: var(--space-2xs);
}


.site-name {
  font-size: var(--font-size-site-name);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-h2);
  text-transform: uppercase;
  line-height: var(--line-height-tight);
}

.site-nav {
  margin-top: 0;
}

.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
}

.site-nav a {
  font-size: var(--font-size-nav);
  color: var(--color-ink);
  text-decoration: none;
  padding-bottom: var(--space-3xs);
  border-bottom: var(--border-width-heavy) solid transparent;
}

.site-nav a:hover {
  border-bottom-color: var(--color-rule);
}

.site-nav a[aria-current="page"] {
  font-weight: var(--font-weight-bold);
  border-bottom-color: var(--color-ink);
}


/* --- Navigation on a phone -----------------------------------
   Below 48rem the page list sits behind a control the reader
   opens. It is a native <details>, so it works with no
   JavaScript, is keyboard operable, and is announced as an
   expandable region.

   Above 48rem there is no control: the list is always open and
   the summary is not drawn. CSS cannot set the open attribute, so
   the hidden content is revealed the two ways browsers hide it,
   and the summary is only hidden inside the same @supports test
   that reveals the list. That ordering matters: if neither
   technique applied, hiding the summary would leave the
   navigation unreachable.
   ----------------------------------------------------------- */

@media screen and (max-width: 47.9375rem) {
  /* The control is the usual three-line symbol, drawn in the ink
     colour and swapped for a cross while the list is open. The
     word "Pages" is still there for a screen reader: a symbol on
     its own would leave the control with no name. */
  .nav-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
  }

  .nav-disclosure > summary::-webkit-details-marker {
    display: none;
  }

  .nav-icon {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
  }

  .nav-icon--close,
  .nav-disclosure[open] .nav-icon--menu {
    display: none;
  }

  .nav-disclosure[open] .nav-icon--close {
    display: block;
  }

  .nav-disclosure > summary:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus);
    outline-offset: var(--focus-ring-offset);
  }

  /* The list drops over the page rather than pushing it down, so
     opening the navigation does not move the reader's place. It
     is positioned against the header, sits above the content, and
     carries its own background and edge so the words behind it
     cannot show through. */
  .site-header {
    position: relative;
  }

  .site-nav ul {
    position: absolute;
    top: 100%;
    right: var(--page-gutter);
    z-index: 5;
    flex-direction: column;
    gap: 0;
    min-width: 12rem;
    padding: var(--space-2xs) var(--space-sm);
    background-color: var(--color-canvas);
    border: var(--border-width-hairline) solid var(--color-rule);
  }

  .site-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

@media screen and (min-width: 48rem) {
  @supports selector(::details-content) {
    .nav-disclosure::details-content {
      content-visibility: visible;
      block-size: auto;
    }

    .nav-disclosure > summary {
      display: none;
    }
  }

  @supports not selector(::details-content) {
    .nav-disclosure:not([open]) > ul {
      display: flex;
    }

    .nav-disclosure > summary {
      display: none;
    }
  }
}


/* --- The navigation bar as the document draws it --------------
   header2.xml is a seven cell table: a logo cell and six page
   cells of equal width, in a row 0.50in tall. The page names sit
   on the bottom of the row and the logo is centred in it, so the
   names sit on a grid rather than packed against the right edge.

   This block sits after the phone rules on purpose. The base
   .site-nav ul rule above sets display:flex at the same
   specificity, so the grid has to come later to win.

   WHY 58rem AND NOT 48rem. The bar needs 847px to hold the word
   mark, the six names and the five gaps between them, plus 48px of
   page gutter. At 48rem the grid switched on at 768px and every
   page scrolled sideways by 22px, which showed up on an iPad in
   portrait. Measured by sweeping the window from 760 to 1000: the
   overflow clears at 850 and the names come back onto one row at
   920. 58rem is 928px. Between 48rem and 58rem the base flex header
   above handles it and the names wrap under the word mark.

   Re-measure this number if a page is renamed or --nav-gap changes.

   The names are packed against the right edge with one space
   between each, which the client asked for on October 23. The
   document spreads them across six cells of equal width instead.
   The row height, the bottom alignment and the logo cell still
   come from the document.

   The logo cell is allowed to grow past 17.40% because the word
   mark is still set as text and breaks to three lines at that
   width. When Kim's lockup replaces the text, drop the minmax and
   the cell returns to the document's 17.40%.
   ----------------------------------------------------------- */

@media screen and (min-width: 58rem) {
  .site-header {
    display: grid;
    grid-template-columns: minmax(var(--nav-logo-column), max-content) minmax(0, 1fr);
    align-items: end;
    column-gap: var(--space-md);
    min-height: var(--bar-height);
  }

  .site-name {
    align-self: center;
  }

  .site-nav ul {
    display: flex;
    justify-content: flex-end;
    gap: var(--nav-gap);
  }
}


/* --- Main ---------------------------------------------------- */

.main {
  /* The body text sits 0.44in right of the header and footer bar
     and ends flush with it on the right. See --main-inset. The
     wrapper gutter is already on this element, so the inset adds
     to it rather than replacing it. */
  padding-left: calc(var(--page-gutter) + var(--main-inset));

  /* Takes the window height the header and footer do not use, which
     is what pushes the footer to the bottom. See the flex column on
     body. On a page taller than the window this grows to nothing and
     the footer sits below the text, as it did before. */
  flex: 1 0 auto;

  /* The document's top margin is 1.00in and its bottom is 0.70in, so
     the page does not carry the same space above and below. Matching
     that returns 8px to every page. Strategy sat 2px over an 800px
     window before this and now clears it by 6. */
  padding-top: var(--space-md);
  padding-bottom: var(--space-sm);
}

/* Prose is held to a readable measure. The table is not. */
.main h1,
.main h2,
.main p,
.main dl {
  max-width: var(--measure-text);
}


/* --- Headings -----------------------------------------------
   The type size is identical at every level. Weight, letter
   spacing and surrounding space carry the hierarchy. The tag
   is chosen for the document outline, never for appearance.
   ----------------------------------------------------------- */

h1,
h2,
h3 {
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
}

h1 {
  font-size: var(--font-size-h1);
  letter-spacing: var(--letter-spacing-h1);
  padding-bottom: var(--space-sm);
  border-bottom: var(--border-width-heavy) solid var(--color-ink);
}

/* Placeholder pages show their title without the rule beneath it.
   The class sits on the h1 inside <main>, so it is replaced along
   with the placeholder when approved copy arrives. */
.placeholder-title {
  border-bottom: 0;
}

h2 {
  font-size: var(--font-size-h2);
  letter-spacing: var(--letter-spacing-h2);
  text-transform: uppercase;
}

h3 {
  font-size: var(--font-size-h3);
  letter-spacing: var(--letter-spacing-base);
}


/* --- Sections ----------------------------------------------- */

/* The document has no sections, only paragraphs 6pt apart, so a
   section opens at the same distance as a paragraph. The <section>
   elements stay in the markup for the document outline. */
.section {
  margin-top: var(--space-paragraph);
}

.section > * + * {
  margin-top: var(--space-paragraph);
}


/* --- Paragraphs --------------------------------------------- */

/* 6pt, which is after=120 on every paragraph in the document.
   section is in the list because Strategy closes the table inside
   one and then carries on with a paragraph. */
p + p,
p + dl,
p + ol,
ol + p,
dl + p,
section + p,
p + section,
div + p {
  margin-top: var(--space-paragraph);
}


/* --- Review notice -------------------------------------------
   A temporary line at the top of a page whose copy the board has
   not yet approved. The dashed border marks it as a status note,
   not part of the page's copy. Delete the notice from the page
   when the board approves the copy. It prints, so a printed copy
   carries the same warning.
   ----------------------------------------------------------- */

.main .review-notice {
  max-width: none;
  margin-bottom: var(--space-sm);
  padding: var(--space-3xs) var(--space-xs);
  border: var(--border-width-hairline) dashed var(--color-rule);
  color: var(--color-ink);
}


/* The History entries on Team sit closer together than ordinary
   paragraphs. That space is what pays for the larger photographs
   above them. */
.main .copy-wide p + p {
  margin-top: var(--space-paragraph);
}


/* This photograph was taken from further back, so the same square
   leaves the head smaller than the rest. It comes in closer so every
   face reads at about the same size. The value belongs to this one
   photograph; a replacement photograph needs its own.
   ----------------------------------------------------------- */

.person-photo--fidel-jaramillo {
  --photo-zoom: 1.5;
  --photo-focus: 7%;
}


/* This photograph sits lower and further right in its frame than the
   rest, so the head reads out of line with the others beside it. The
   frame moves down the photograph and the photograph moves left.
   Measured against the other three: their heads centre at 0.513 of the
   frame and start at 0.117 down it. These values put this one at 0.511
   and 0.128, inside the spread the other three already have.
   ----------------------------------------------------------- */

.person-photo--sam-adams {
  --photo-focus: 22%;
  --photo-nudge-x: -7%;
}


/* --- People with photos --------------------------------------
   Each row of people is a real list, so a screen reader announces
   how many people it holds. Each person is a photo with the name
   beside it. The row wraps onto a second line on a narrow screen.

   Until photos arrive, each photo is a grey placeholder box with
   the class person-photo--placeholder. It is hidden from screen
   readers because it carries no information. See team.html for
   how to swap in a real photo.
   ----------------------------------------------------------- */

.people {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
}

.person {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* The photographs are full length and the box is square, so two
   things have to happen: the square is pulled up towards the head
   (--photo-focus), and the picture is enlarged inside it so the crop
   ends near the shoulders rather than the waist (--photo-zoom).

   The frame does the clipping; the photograph itself is never cut. */
.person-photo-frame {
  display: block;
  flex-shrink: 0;
  width: var(--photo-size);
  height: var(--photo-size);
  overflow: hidden;
  border-radius: 50%;
}

.person-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% var(--photo-focus);
  transform: translateX(var(--photo-nudge-x)) scale(var(--photo-zoom));
  transform-origin: 50% 0;
}

/* A person without a photograph is an empty circle, not a grey disc.
   The grey read as a missing image rather than as a person whose
   photograph has not been taken. The outline still holds the place
   so the row keeps its rhythm. Changed 27 October. */
.person-photo--placeholder {
  background-color: var(--color-canvas);
  border: var(--border-width-hairline) solid var(--color-rule);
}

.person-name {
  display: block;
}


/* --- A heading as the document sets one ----------------------
   Bold, at body size, with nothing else on it. Every heading on
   Team, Strategy and Programs is a bold paragraph in the document:
   no rule under it, no capitals, no letter spacing and no size of
   its own.

   .segment-title is the other heading on this site and stays as it
   is. It belongs to the Portfolio composition, where the board
   approved the rule and the small capitals.
   ----------------------------------------------------------- */

.doc-heading {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  text-transform: none;
  letter-spacing: var(--letter-spacing-base);
  line-height: var(--line-height-base);
  border: 0;
  padding: 0;
  margin: 0;
}

/* A heading opens at the same distance as a paragraph. */
* + .doc-heading,
.doc-heading + * {
  margin-top: var(--space-paragraph);
}


/* --- Term and detail lists ----------------------------------
   Used where the copy pairs a short label with a statement.
   A label is not a heading and does not take a heading tag.
   ----------------------------------------------------------- */

.definitions dt {
  font-size: var(--font-size-term);
  font-weight: var(--font-weight-bold);
}

.definitions dd {
  margin-top: var(--space-3xs);
}

/* Space between one item and the next label. Kept tight: the
   bold label already separates them, so a large gap here was
   mostly wasted height. */
.definitions dd + dt {
  margin-top: var(--space-xs);
}


/* --- Copy set to the width of the table ----------------------
   By default prose is held to --measure-text so lines stay short.
   This class opts a block out of that and runs it to the width of
   the table above it, at the client's request. Lines are longer as
   a result, so use it only where the client has asked for it.

   .definitions--wide goes on a term list. .copy-wide goes on a
   section and widens the paragraphs inside it to the same measure.
   Team uses it on History so History lines up with the process
   copy on Investment Strategy.
   ----------------------------------------------------------- */

.main .definitions--wide,
.main .copy-wide p {
  max-width: var(--measure-wide);
}


/* --- Objectives in three columns ----------------------------
   The three objectives sit side by side rather than stacked.
   The list stays a <dl>: each label is still a term and each
   statement is still its detail, so the markup is unchanged for
   a screen reader. Only the visual arrangement differs.

   grid-auto-flow: column with two rows fills each column with a
   term above its detail, which is why the HTML needs no wrappers.
   Below 48rem the columns stack again.
   ----------------------------------------------------------- */

@media (min-width: 48rem) {
  /* Home. Three rows, label then statement, on the hanging indent
     the document sets: ind left=3600 hanging=2880 puts the label
     at 0.50in and the statement at 2.50in. The first track is
     empty and carries the 0.50in. Rows are tight, with the 6pt
     falling after the whole block, which is how the document sets
     after=0 on the first two rows and after=120 on the third.

     This replaced a three-across arrangement on October 22.

     The list stays a <dl>: each label is still a term and each
     statement its detail, so nothing changes for a screen reader. */
  .main .definitions--columns {
    display: grid;
    grid-template-columns:
      var(--objective-indent)
      var(--objective-label-width)
      minmax(0, 1fr);
    row-gap: 0;
    column-gap: 0;
    max-width: none;
  }

  .definitions--columns dt { grid-column: 2; }
  .definitions--columns dd { grid-column: 3; }

  .definitions--columns dd,
  .definitions--columns dt,
  .definitions--columns dd + dt {
    margin-top: 0;
  }
}

/* The objective labels are not bold in the document. Scoped to the
   two objective lists so the Portfolio labels keep their weight. */
.definitions--columns dt,
.definitions--rows dt {
  font-weight: var(--font-weight-regular);
}


/* --- Programs in two columns ---------------------------------
   Portfolio Support lists six programs, each a name and a short
   description. They sit in two columns so each line stays a
   comfortable reading length, about 68 characters. A thin rule
   above each program echoes the row lines of the table on
   Investment Strategy.

   The list stays a <dl>. Each program's term and detail are
   wrapped in a <div>, which HTML allows, so the grid can place
   the pair as one item. Below 48rem the columns stack.
   ----------------------------------------------------------- */

.main .program-grid {
  max-width: none;
}

.program {
  border-top: var(--border-width-hairline) solid var(--color-rule);
  padding-top: var(--space-2xs);
}

.program + .program {
  margin-top: var(--space-md);
}

@media (min-width: 48rem) {
  .program-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md) var(--space-lg);
  }

  .program + .program {
    margin-top: 0;
  }
}


/* --- Labels kept for screen readers, hidden on screen --------
   The client requires this page to fit one screen, so the page
   title and the section labels are not drawn. They remain in the
   markup in correct heading order, so the document outline and
   screen reader navigation are unaffected.

   These come back on paper. See print.css. Do not use this class
   for anything that should be hidden everywhere: that is
   .visually-hidden.
   ----------------------------------------------------------- */

.label-hidden {
  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;
}


/* --- Table --------------------------------------------------
   The scroll container lets a narrow screen reach the far
   columns. It is focusable so a keyboard can scroll it too.
   ----------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 44rem;
  table-layout: fixed;
}

/* Column widths. The description column carries the longest text
   and gets the most room, which is what keeps each row to two
   lines instead of three. print.css sets its own widths for the
   narrower printable page. */
/* The grid the document sets: 3060, 4320, 2340, 2070 and 2070 of
   13860 twips. print.css sets its own widths for the narrower
   printable page. */
.col-segment     { width: 22.08%; }
.col-description { width: 31.17%; }
.col-governance  { width: 16.88%; }
.col-inception   { width: 14.94%; }
.col-current     { width: 14.94%; }

caption {
  text-align: left;
}

td {
  font-size: var(--font-size-table);
}

th {
  font-size: var(--font-size-table-head);
}

/* Horizontal rules only. No outer box and no vertical rules
   between columns: the column widths and the alignment carry the
   structure, and dropping the rules removes visual noise without
   removing meaning. */
th,
td {
  border: 0;
  border-bottom: var(--border-width-hairline) solid var(--color-rule);
  padding: var(--space-3xs) var(--space-sm);
  text-align: left;
  vertical-align: top;
  line-height: var(--line-height-base);
}

tr > *:first-child {
  padding-left: 0;
}

tr > *:last-child {
  padding-right: 0;
}

/* The two capital allocation columns hold numbers, so they are
   right aligned. Columns 4 and 5 counting the row header. */
tr > *:nth-child(4),
tr > *:nth-child(5) {
  text-align: right;
}

thead th {
  background-color: var(--color-surface);
  font-weight: var(--font-weight-bold);
  vertical-align: bottom;
  border-bottom: var(--border-width-heavy) solid var(--color-ink);
}

tbody th {
  font-weight: var(--font-weight-bold);
}


/* --- The table on a phone ------------------------------------
   The table holds five columns and cannot shrink below about
   704px without the words breaking up, so on a narrow screen it
   stops being a grid and becomes three labelled blocks, one per
   segment. Every value keeps the heading it belongs to, taken
   from the data-label on the cell, so nothing is lost and nothing
   scrolls sideways.

   Two things to know if this is ever edited. Changing a table to
   block layout strips its table meaning from a screen reader,
   which is why every row and cell carries an explicit role in the
   HTML. And this is scoped to screen on purpose: the printed page
   is 672px wide, narrower than the breakpoint, and on paper the
   table should stay a table.
   ----------------------------------------------------------- */

@media screen and (max-width: 47.9375rem) {
  .table-scroll {
    overflow-x: visible;
  }

  table {
    display: block;
    min-width: 0;
    table-layout: auto;
  }

  thead {
    display: none;
  }

  tbody,
  tbody tr,
  tbody th,
  tbody td {
    display: block;
    width: auto;
  }

  tbody tr {
    padding: var(--space-2xs) 0;
    border-bottom: var(--border-width-hairline) solid var(--color-rule);
  }

  /* Each block draws the line below it, so the first one needs a
     line above or the group opens with no edge. */
  tbody tr:first-child {
    border-top: var(--border-width-hairline) solid var(--color-rule);
  }

  tbody th {
    padding: 0 0 var(--space-3xs);
    border: 0;
  }

  tbody td {
    padding: 0 0 var(--space-3xs);
    border: 0;
  }

  /* Right alignment is for a column of figures. Stacked, each
     figure sits beside its label, so it reads from the left like
     everything else. Written to outrank the alignment rule above. */
  tbody tr > *:nth-child(4),
  tbody tr > *:nth-child(5) {
    text-align: left;
  }

  /* The column heading travels with the value it belongs to. */
  tbody td::before {
    content: attr(data-label) ": ";
    font-weight: var(--font-weight-bold);
  }
}


/* --- Links in running text ----------------------------------
   Links carry no color of their own. The underline is what
   marks them, so they stay legible when the identity lands
   and they do not depend on color alone.
   ----------------------------------------------------------- */

.main a,
.site-footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: from-font;
}

.main a:hover,
.site-footer a:hover {
  text-decoration-thickness: var(--border-width-heavy);
}


/* --- Footer ------------------------------------------------- */

/* The entity line and the reporting line share one row, the entity
   line left and the reporting line right. flex-wrap means they drop
   onto separate rows by themselves when the window is too narrow to
   hold both, so this needs no width query and degrades safely if a
   machine renders the text wider than expected. */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-lg);
  font-size: var(--font-size-footer);
  border-top: var(--border-width-hairline) solid var(--color-rule);
  padding-top: var(--space-sm);
  padding-bottom: var(--space-md);
  color: var(--color-ink-muted);
}

.site-footer p {
  max-width: none;
}

/* No stacking margin: the flex gap above handles the spacing, in
   both the one-row and the wrapped case. */
.site-footer p + p {
  margin-top: 0;
}


/* --- Artwork ------------------------------------------------
   Nothing on the site uses these rules yet, because no page
   contains an image. They are here so artwork can be added
   without a rebuild.

   ADDING THE IDENTITY MARK
   The mark is the Badger Fund wordmark and logo. It sits in the
   header ALONGSIDE the text, not in place of it. Put the file in
   public/assets/ and paste this into the header of every page,
   above the <p class="site-name"> line, which stays:

     <img class="site-logo" src="assets/NAME.svg" alt="Badger Fund">

   Because the text name stays on the page, the mark and the text
   would be announced one after the other. If that reads as a
   stutter, use alt="" so a screen reader skips the image and
   reads the text instead.

   Do not add a registered symbol to the alt text or to any
   heading. Where that symbol appears is the client's attorney's
   decision.

   ADDING A PHOTOGRAPH OR ILLUSTRATION
   Put the file in public/assets/. Inside <main>, use:

     <figure>
       <img src="assets/NAME.jpg" alt="DESCRIBE THE IMAGE">
       <figcaption>Caption text.</figcaption>
     </figure>

   Every image needs alt text. If an image is purely decorative
   and says nothing the copy does not already say, use alt=""
   so a screen reader skips it.
   ----------------------------------------------------------- */

img,
svg {
  max-width: 100%;
  height: auto;
}

.site-logo {
  display: block;
  width: auto;
  max-width: var(--logo-max-width);
}

figure {
  margin-top: var(--space-figure);
  margin-bottom: var(--space-figure);
  max-width: var(--figure-max-width);
}

figcaption {
  margin-top: var(--space-2xs);
  font-size: var(--font-size-caption);
  color: var(--color-ink-muted);
  max-width: var(--measure-text);
}


/* --- Accessibility helper ----------------------------------- */

.visually-hidden {
  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;
}


/* --- Reduced motion ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* --- Portfolio ----------------------------------------------
   One composition, approved by the client on a board dated
   October 2026 at a fixed 1020px. It is rebuilt here at the
   site's own width.

   HOW THE MEASUREMENTS SURVIVED THE MOVE
   Two kinds of number sit below and they behave differently on
   purpose.

   Container widths are percentages of the content column. The
   board's 848px lead inside a 1020px block is 83.14%, and it
   stays 83.14% at any width, so every element keeps its position
   relative to its neighbours.

   Asset sizes are pixels, scaled once by 1104/1020 = 1.082 and
   then fixed. The client reviewed a 48px headshot inside a 1020px
   page, which is 4.7 percent of the width. Holding 48px inside 1104
   would make it 4.3 percent, and the whole composition reads lighter
   than the board. 52px keeps the share the client approved.

   The faithful translation of an approved size onto a wider page is
   a scaled size, not the same number. Every asset below carries its
   board value and its scaled value:

     face circle     48 -> 52,  gap between faces 8 -> 9
     logo box        35 -> 38 tall, cell gap 6 unchanged
     row gap         10 -> 11
     Idea Fund       86x19  -> 93x21
     Capital Midwest 71x35  -> 77x38
     every other     96x35  -> 104x38
     the state       112x120 -> 121x130

   Vertical spacing is pixels for the same reason.

   If this page is ever rebuilt at a different width, change
   nothing below. The percentages carry it.
   ----------------------------------------------------------- */

/* Prose on other pages is held to a reading measure. This page is
   a composition, not prose, and every part of it is placed against
   the full column. */
.portfolio h2,
.portfolio p,
.portfolio dl {
  max-width: none;
}

/* Main sets 24px above and below on every other page. This page
   keeps the 14px the board put above the lead.

   Below, it takes more than the other pages rather than less. The
   last thing on the page is a row of 11px labels, and with no space
   beneath them they sit on the footer rule and the page reads as
   though it ran out of room. This was 0 while the page was fighting
   for height; once the assets were scaled the page came in at 802
   against the 900 rule, so the space went back.
   See One-screen layout in README.md. */
.portfolio {
  padding-top: 14px;
  padding-bottom: var(--space-lg);
}

.portfolio ul {
  list-style: none;
}

/* Marks and headshots are links. An underline across a photograph
   reads as damage, so these links are marked by being the image. */
.portfolio .fund-mark,
.portfolio .person-link {
  text-decoration: none;
  display: block;
}


/* --- Portfolio: lead ----------------------------------------- */

.portfolio-lead {
  width: 83.14%;        /* board: 848 of 1020 */
  font-size: var(--font-size-portfolio-body);
  margin-bottom: 10px;
}


/* --- Portfolio: segment headings -----------------------------
   h2 already carries the uppercase and the letter spacing. This
   sets the size the client approved and the rule beneath it.
   ----------------------------------------------------------- */

.segment-title {
  font-size: var(--font-size-portfolio-label);
  padding-bottom: 4px;
  border-bottom: var(--border-width-hairline) solid var(--color-rule-soft);
  margin-bottom: 8px;
}


/* --- Portfolio: fund rows ------------------------------------
   Six columns in the first segment, three in the others. The
   cells are equal width and each fund centres inside its own, so
   the row stays even however wide the page is.
   ----------------------------------------------------------- */

.fund-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 11px;
}

.fund-row--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fund {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* The managers of one fund stand side by side above their mark.
   The box is a fixed height so a fund with one manager and a fund
   with three put their marks on the same line. */
.fund-people {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 52px;
}

.person-link {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.person-link img {
  width: 100%;
  height: 100%;
  display: block;
}

/* One box height for every mark, so a row of nine different
   artworks reads as a row. The width is set on each image in the
   page, because the artwork proportions differ and a single width
   would stretch them. */
.fund-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
}

/* The marks are rendered in grey at the client's instruction, so
   nine competing brand colors do not sit on a page that has none.
   This is a deliberate exception to the rule in README.md that the
   marks keep their own colors. See Fund manager logos there. */
.fund-mark img {
  display: block;
  object-fit: contain;
  filter: grayscale(1) opacity(0.62);
}


/* --- Portfolio: the two lower segments beside the state ------ */

/* Three tracks: the two segments, empty space, the state. The board
   put 525 and 309 either side of 186 of air, and the three
   percentages below are those numbers over 1020. A percentage in
   CSS resolves against the parent, so every width further down is
   a percentage of the track it sits in, not of the page. The board
   number is on each line to check against. */
.portfolio-lower {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 51.47% 1fr 30.29%;   /* 525 | 186 | 309 */
  align-items: start;
}

.fund-row--followon { width: 94.48%; }   /* board: 496 of 525 */
.fund-row--existing { width: 99.05%; }   /* board: 520 of 525 */

.segment-title--second { margin-top: 12px; }

/* The rule under Existing Wisconsin Funds stops where its two logos
   stop, which is how Ken's page 6 image draws it: the Follow-on rule
   runs to 51.1 percent of the board and this one to 33.6 percent.
   33.6 of 51.1 is 65.75, measured off that image. The row keeps its
   three columns, so the two marks hold the position they have on the
   board. The third column stays empty by Amanda's answer of
   October 23. */
.segment-title--second { width: 65.75%; }

.map-panel {
  grid-column: 3;
}

/* The heading centres over the state, not over its own column,
   which is wider than the artwork. Shifting the heading leaves the
   state where the client placed it. Moving the column instead
   would drag the artwork with it. */
.map .segment-title {
  width: 62.78%;        /* board: 194 of 309 */
  position: relative;
  left: -13.27%;        /* board: -41 of 309 */
  text-align: center;
}

/* The state, grown on October 23 so its bottom sits on the same line
   as the bottom of the Existing Wisconsin Funds marks beside it.

   HOW 188 WAS ARRIVED AT. Measured at a 1440 window: the picture
   starts at y=225 and the Existing marks end at y=413. Width follows
   from the file's own proportions, 615 by 657, so 188 x 0.9361 = 176.
   The file is 615 wide, so it has the resolution to grow this far
   and further.

   It is a measured height and not a stretched one. Letting the map
   fill a stretched grid row was tried first and fails: the picture
   then sets the row height it is supposed to be measured against,
   and the map runs 153px past the marks. Re-measure these two
   numbers if a fund row above ever gains or loses a line.

   left: -13.27% is the offset the heading above it already carries,
   so the state and the rule over it start at the same place. */
.map img {
  width: 176px;
  height: 188px;
  display: block;
  position: relative;
  left: -13.27%;        /* board: -41 of 309, same as the heading */
}


/* --- Portfolio: periods -------------------------------------
   Four labels and their funds. Two pairs to a row, reading left
   to right, so the source order and the order on screen match.
   ----------------------------------------------------------- */

.periods {
  width: 100.49%;       /* board: 1025 of 1020 */
  display: grid;
  /* The right-hand column carries the Exit Period sentence, and it
     runs to one line or two on a margin of about two pixels. The
     board gave that cell 374 of its 1025 and let it hang 22px past
     its own grid track to get there. Here the track carries the
     width instead, as a floor rather than a fixed size, so the
     column still grows with the page.

     The floor is 40%, not the board's 36.49%. 36.49% holds two
     lines from 1152 up and breaks below it; 40% holds from 1069,
     which is every width this layout is used at. 42% holds too but
     starves the left column, whose own content needs 288px and
     would get 272.

     If the sentence is ever reworded, re-measure. The number is
     sized to that sentence, not to the design. */
  grid-template-columns: max-content minmax(0, 1fr) max-content minmax(40%, 1fr);
  align-items: start;
  column-gap: 24px;
  row-gap: 0;
  font-size: var(--font-size-portfolio-body);
  margin-top: 37px;
}

.periods dt {
  font-weight: var(--font-weight-bold);
}

.periods dd {
  margin: 0;
}

/* The board set the two right-hand entries to 367 and 374 so their
   fund lists wrapped where it wanted. The two 1fr tracks above come
   out at the same width on their own, so there is nothing to set
   here. Check the wrap if the labels ever change length.

   The line that says what a period means, above the funds in it. */
.period-note {
  display: block;
  color: var(--color-ink-muted);
}

.period-second-line {
  display: block;
}


/* --- Portfolio: Fund Focus ----------------------------------
   Four groups on one line, which the client asked for by name.
   Equal column widths would wrap the longest label, so the
   columns size to their content and the leftover room goes
   between them.

   The board set 38px above this heading and 6px under its rule.
   The client asked on October 7 to close the first and open the
   second, so Fund Focus sits nearer the periods above it and its
   labels sit further off their own rule. Settled at 18 and 12.
   ----------------------------------------------------------- */

.segment-title--focus { margin-top: 18px; }

.focus-row {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  justify-content: space-between;
  gap: 0;
}

.focus-row > div {
  border-top: var(--border-width-hairline) solid var(--color-rule-faint);
  padding-top: 12px;
}

.focus-row dt {
  font-size: var(--font-size-portfolio-fine);
  font-weight: var(--font-weight-bold);
}

.focus-row dd {
  margin: 0;
  font-size: var(--font-size-portfolio-fine);
  color: var(--color-ink-muted);
  white-space: nowrap;
}

/* --- Fund Focus in two columns -------------------------------
   Removing the period block on October 23 left the lower half of
   the board empty. Ken keeps the headshots and the marks at the
   size they are and gives Fund Focus the room instead, so this
   drops the four across row to two columns and two rows and sets
   the type at the site's base 17px rather than the board's 11px.

   11px was there because four columns of this copy need 1213px at
   17px and the content column holds 1104. Two columns halves the
   demand and the longest line, Geography at 440px, clears a 522px
   column with room left.
   ----------------------------------------------------------- */

.focus-row--pairs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
  column-gap: var(--space-lg);
  row-gap: var(--space-md);
}

.focus-row--pairs dt,
.focus-row--pairs dd {
  font-size: var(--font-size-base);
}

.focus-row--pairs dd {
  white-space: normal;
}


/* --- Portfolio: the as-of line -------------------------------
   The footer block is identical on every page. This page carries
   one line the others do not, because it is the only page that
   states fund status, and the client's copy rules require an
   as-of date wherever data appears.
   ----------------------------------------------------------- */

.footer-asof {
  font-variant-numeric: tabular-nums;
}


/* --- Portfolio: narrow screens -------------------------------
   The composition holds to the width where the six-column row
   stops being readable, then stacks. A 1020px composition scaled
   onto a phone is unreadable either way, so it reflows instead.
   ----------------------------------------------------------- */

@media screen and (max-width: 63.9375rem) {

  .portfolio-lead { width: auto; }

  .fund-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }

  .portfolio-lower { display: block; }
  .fund-row--followon,
  .fund-row--existing { width: auto; }

  .map-panel { margin-top: 18px; }
  .map .segment-title { width: auto; position: static; left: auto; text-align: left; }
  /* Standing alone in a full-width column the state reads as a
     thumbnail, so it takes the extra room. */
  /* The heading above drops its -13.27% pull here. The state did not,
     so between 768px and 1023px it kept a 93px pull with nothing left
     to line up against and hung off the left edge of the page. Found
     on an iPad in portrait, 810px, 27 October. */
  .map img { width: 186px; height: auto; position: static; left: auto; }

  .periods {
    width: auto;
    grid-template-columns: max-content minmax(0, 1fr);
    row-gap: 10px;
    margin-top: 24px;
  }

  .focus-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
  .focus-row dd { white-space: normal; }
}

@media screen and (max-width: 47.9375rem) {
  .fund-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* The state is sized and offset for the narrow column it sits in on
     a laptop. On a phone that column is the whole width, so the
     offset strands it against the left edge with half the screen
     empty beside it. Centred and larger here. */
  .map img {
    position: static;
    left: auto;
    width: 62%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  /* A 35px box is a small target for a thumb. The box grows, the
     artwork inside it does not. */
  .fund-mark { height: 44px; }

  .periods { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .periods dt { margin-top: 10px; }

  .focus-row { grid-template-columns: minmax(0, 1fr); }
}


/* --- Home ----------------------------------------------------
   Three classes this page needs and the others do not.

   .page-descriptor is the line under the masthead, approved by
   the board on October 18 as the opening of the Home page. It is
   a paragraph and not a heading: the document outline already has
   its h1, and this line is a descriptor rather than a section.

   .lead-emphasis carries the two dollar match sentence. It is no
   longer bold; see the rule below.

   .prose-list is the numbered list of the three investment
   segments. Scoped so the rule cannot reach the fund rows on
   Portfolio or the people on Team, both of which are lists in the
   markup and not lists to the reader.
   ----------------------------------------------------------- */

/* Regular weight, with the first word bold. That is how the approved
   document sets this line: its runs read "I" plain, "nvesting " bold,
   then the rest plain, which is Word splitting one word across a
   formatting boundary. The page bolds the whole word. A bold rule
   here would swallow the <strong> and flatten the line. */
.page-descriptor {
  margin-bottom: var(--space-md);
}

/* Regular weight. An earlier revision set this sentence in bold and
   this rule carried it. In rev 3 the runs are plain except a
   trailing " of Funds", which is Word splitting a phrase across a
   formatting boundary the same way it split "Investing" above. The
   class is kept so the paragraph can be found again. */
.lead-emphasis {
  font-weight: var(--font-weight-regular);
}

/* The three segments. The document numbers them: numbering.xml
   numId 2 is decimal with lvlText "%1.", the number at 0.50in and
   the text at 0.75in. The marker is drawn by hand rather than by
   list-style, because a list marker cannot be placed at a measured
   position. role="list" is on the <ol> in the markup so turning
   the marker off does not cost the list its announcement.

   Rows are tight, with the 6pt falling after the whole block. */
.prose-list {
  margin: 0 0 var(--space-paragraph);
  padding-left: 0;
  list-style: none;
  counter-reset: segment;
}

/* The two indents are percentages so they hold the document's
   measurements at the page width. On a phone 8.33% is 29px and 5.56%
   is 19px, which left no space at all between the number and its
   text: they touched. max() puts a floor under both without changing
   anything at the page width, where the percentages are larger. */
/* The text indent is the number's indent plus a gutter, never its own
   independent value. Set separately, the two floors do not move
   together: around a 600px window the number's floor was 16px while
   the text's was 40px, the percentage walked the number up into the
   text, and "1." touched "Next". The document's own gap is 8.33% minus
   5.56%, which is the 2.77% below. */
.prose-list li {
  position: relative;
  padding-left: calc(var(--list-number-indent) + max(1.75rem, 2.77%));
  counter-increment: segment;
}

.prose-list li::before {
  content: counter(segment) ".";
  position: absolute;
  left: var(--list-number-indent);
}


/* Strategy. The same three rows as Home, on the indent that page
   sets: ind left=2160 hanging=2160 puts the label at the margin and
   the statement at 1.50in.

   The document does not line these three up. Measured off the
   rendered page the statements start at 1.50in, 2.00in and 2.00in,
   because two of the rows tab past the 1.50in stop onto Word's
   default half inch grid. The site puts all three at 1.50in. See
   the note on --objective-label-width-strategy in tokens.css. */
.definitions--rows {
  display: grid;
  grid-template-columns:
    var(--objective-label-width-strategy)
    minmax(0, 1fr);
  column-gap: 0;
  row-gap: 0;
}

/* On a phone the label column is 16.67% of about 345px, which is 57px
   against a label that needs 110. The label ran under its own
   statement. Below 48rem the pair stacks, which is what the Home
   objectives already do at this width. */
/* .definitions dd + dt further up carries a 12pt top margin and is
   one selector more specific than .definitions--rows dt, so it wins
   wherever it is in the file. It has to be answered in kind, or the
   label column sits 12px below its statement on every row but the
   first. */
.definitions--rows dt,
.definitions--rows dd,
.definitions--rows dd + dt { margin: 0; }
.definitions--rows dd { max-width: none; }

/* On a phone the label column is 16.67% of about 345px, which is 57px
   against a label that needs 110, so the label ran under its own
   statement. The pair stacks below 48rem, which is what the Home
   objectives already do at this width.

   This sits AFTER the margin:0 above on purpose. At equal specificity
   that reset wins wherever it is, so the gap between pairs has to be
   set later or the three pairs read as six alternating lines. */
@media screen and (max-width: 47.9375rem) {
  .definitions--rows {
    grid-template-columns: minmax(0, 1fr);
  }

  .definitions--rows dd {
    margin-bottom: var(--space-sm);
  }
}


/* --- footer, October 21 approved text ------------------------
   The approved document sets this as a two cell table: the audit
   and trademark notice on the left, the tagline on the right.
   Here it is a two column grid that stacks on a phone. The tagline
   bolds its first word, as the document does.
   ----------------------------------------------------------- */

/* footer2.xml is a two cell table, 10255 and 3330 of 13585 twips,
   both cells centred in a row 0.50in tall. */
.site-footer {
  display: grid;
  grid-template-columns: var(--footer-notice-column) minmax(0, 1fr);
  column-gap: 0;
  align-items: center;
}

.footer-notice p { margin: 0; max-width: none; }
.footer-notice p + p { margin-top: var(--space-3xs, 2px); }

.footer-tagline {
  margin: 0;
  font-size: var(--font-size-footer-tagline);
  text-align: right;
  line-height: var(--line-height-tight, 1.25);
  white-space: nowrap;
}

/* The footer stacks at the same width the navigation bar does, not at
   48rem. The tagline is white-space:nowrap in a column of 24.51%, and
   "Next Gen VC Managers" at 20px needs more than that column holds
   until about 58rem. Below 58rem it pushed a zero width <br> 16px past
   the right edge of the window and every page scrolled sideways by
   22px. It showed on an iPad in portrait, which is 768 wide, exactly
   the old breakpoint.

   Header and footer now switch together. If --nav-gap or
   --font-size-footer-tagline changes, re-sweep the window from 360 to
   1600 and move both breakpoints together. */
@media screen and (max-width: 57.9375rem) {
  .site-footer { grid-template-columns: minmax(0, 1fr); }
  .footer-tagline { text-align: left; margin-top: var(--space-xs); white-space: normal; }
}

/* The registered mark.
   ------------------------------------------------------------
   Amanda asked on October 25 for every ® to sit superscript. It
   was setting full size on the baseline, which reads as part of
   the word rather than a mark on it.

   line-height:0 is what keeps the raised glyph from pushing the
   line box taller. Without it every line carrying a ® gains a few
   pixels and the paragraph above it shifts, which on Home moves
   the objectives block. The size is a ratio of the surrounding
   text so it follows whatever the identity sets later.

   Only ®. The © in the footer stays on the baseline, which is
   where a copyright notice belongs. */
sup.reg {
  font-size: 0.62em;
  vertical-align: super;
  line-height: 0;
}


/* --- The people rows on a phone -------------------------------
   The rows were a wrapping flex line with a 36px column gap, so
   whether two people sat side by side depended on how long their
   two names were. On a 402px phone that paired Sam with Fidel and
   Melissa with Jason, and pushed Ken and Brian onto lines of their
   own, because Johnson and Wiegand together run 10px wider than
   the line holds.

   Two equal columns instead, so every row holds two whoever is in
   it. The widest person is the 72px photograph, the gap, and
   Wiegand at 69px. At 390px wide each column is 153px, so the gap
   inside the person comes down to 10 to keep 2px in hand.

   Below 390px two columns do not fit at any gap: Wiegand cannot
   break. Those widths keep the single column they already had.

   The top of the range is 799px and not the navigation's 767px.
   Between 768 and 799 the four board members wrapped three and
   one, which is the same unevenness in a different place. At 800
   all four fit one line and the grid steps aside. An iPad in
   portrait is 810, so it keeps the single row.
   Asked 27 October.
   ----------------------------------------------------------- */

@media screen and (max-width: 49.9375rem) and (min-width: 24.375rem) {
  .people {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-sm);
  }

  .person {
    gap: 10px;
  }
}


/* --- The photographs link to LinkedIn ------------------------
   Ken, 28 October: asked whether the team and board images should
   link to LinkedIn profiles. Yes.

   The link wraps the photograph only, not the name, which is what
   he asked for. A link needs an accessible name and a photograph
   with alt="" gives it none, so the name rides in a visually-hidden
   span inside the link. The alt stays empty: the name is already
   beside the photograph in text and would otherwise be read twice.

   The ring on hover and focus is the only affordance, since a
   circular photograph does not look like a link on its own.
   ----------------------------------------------------------- */

.person-photo-link {
  display: block;
  flex-shrink: 0;
  border-radius: 50%;
  text-decoration: none;
}

.person-photo-link .person-photo-frame {
  box-shadow: 0 0 0 0 var(--color-accent);
  transition: box-shadow 140ms ease;
}

.person-photo-link:hover .person-photo-frame,
.person-photo-link:focus-visible .person-photo-frame {
  box-shadow: 0 0 0 2px var(--color-accent);
}

.person-photo-link:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

/* Jason Wudi's photograph is a 144px head-and-shoulders crop, not a
   full-length portrait like the other four. --photo-zoom exists to
   cut a full-length figure down to the shoulders, so at 1.35 it
   would crop into his face and upscale a small file by a third.
   The value belongs to this one photograph. */
.person-photo--jason-wudi {
  --photo-zoom: 1;
  --photo-focus: 0%;
}


/* --- Subheads, one size across the site ----------------------
   Asked 28 October: enlarge the Portfolio segment titles and Fund
   Focus, and make the subheads match site-wide.

   They were two families: .doc-heading at 17px on Strategy and
   Team, .segment-title at 12.07px on Portfolio. Portfolio comes up
   to 17px to meet the others rather than the others coming down,
   since the ask was larger.

   The cost is wrapping. At 17px three Portfolio titles run to two
   lines: Next Generation Follow-on Funds, Existing Wisconsin
   Funds, and WI Geographic Diversity. At 15.5px it is two, at 14px
   one. Going above 17px makes it worse, which is why Strategy's
   headings stay where they are rather than growing further. */

/* One subhead, 0.88 of body, sentence case everywhere.

   Why sentence case and not caps: caps run about 30% wider at the
   same size, and width is what was forcing the wraps. Measured on
   the longest Portfolio title, caps need 157% of the space it has
   at body size where sentence case needs 124%.

   Why 0.88 and not larger: "Investment Segment: Existing Wisconsin
   Funds" sits in a column 34% of the page wide and wraps at every
   size, including the one it has today, so that wrap is not new and
   not avoidable. "WI Geographic Diversity" is the one that moves:
   it wraps today in caps and stops wrapping in sentence case at
   this size. Going larger brings it back.

   Against what each page had before: Portfolio's titles go up 24%,
   Strategy's and Team's come down 12%. One treatment across the
   site, which was the ask. */
:root {
  --font-size-subhead: calc(var(--font-size-base) * 0.88);
  --font-size-portfolio-label: var(--font-size-subhead);
}

/* Section headings sit at body size, not under it.

   At 0.88 "Investment Process" rendered 12% smaller than the
   "Key Criterion:" and "Review:" run-ins directly beneath it, so
   the heading read as subordinate to the text it introduces.
   Equal to body, with weight carrying the hierarchy, which is the
   site's own rule.

   Portfolio's segment labels stay at 0.88. Taking them to body
   size too puts WI Geographic Diversity back onto two lines and
   the page 2% over, so the two are deliberately not the same
   number: one is a heading in prose, the other a label over a
   composition. Asked 28 October. */
.doc-heading {
  font-size: var(--font-size-base);
}

.segment-title {
  text-transform: none;
  letter-spacing: 0;
}

/* --- The chart's cells centre vertically ---------------------
   Asked 28 October. Rows are three lines tall in the first column
   and one in the last, so the short cells sat at the top of their
   row against tall neighbours. */
table td,
table th {
  vertical-align: middle;
}

/* --- The page name on a phone --------------------------------
   The menu collapses into a button below 48rem and takes the page
   name off the screen with it. Every page already carries its name
   as an h1, kept for screen readers and for printing, so showing it
   adds no new words. Caps to match the navigation it stands in for.

   Home is deliberately not tagged: its h1 reads "Badger Fund of
   Funds" with no ®, and showing it would put an unmarked first
   reference at the top of the page. The logo already says which
   page it is. */
@media screen and (max-width: 47.9375rem) {
  .label-hidden.page-title-phone {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 var(--space-sm);
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
}