/* Built from the prototype, in cascade order. Do not edit here;
   edit the prototype and rebuild.
   Order: prototype-alt.css -> manrope @font-face -> prototype-brand.css -> prototype-mirror.css
*/

/* ================= prototype-alt.css ================= */

/* ============================================================
   prototype-alt.css
   Two alternatives to the full-bleed treatment, built October 24.

   Both keep the text off the artwork, which removes the contrast
   question the full-bleed version carries: text over a photograph
   has no single contrast ratio, it varies across the frame.

   ALT-COLUMN  a band of artwork down the right, the copy beside it.
   ALT-BAR     a band across the bottom, the copy above it.

   Both open to the same full-bleed picture with the artist's note,
   driven by the same #see-photo target the full-bleed version uses,
   so nothing new is invented to make them work.

   Neither animates a literal expansion. A fixed element can be
   transitioned from the strip's box to the viewport, but the strip's
   box moves with the window and the start value has to be known in
   CSS, so it breaks at widths it was not written for. These cross
   fade instead, which reads as the picture opening and holds at every
   width.
   ============================================================ */

:root {
  /* The artwork column, as a share of the page. 22% leaves the copy
     78%, which takes the measure from 1053px to about 800 at a 1440
     window. That is the cost of this option: it does not run the text
     the full nine inches the way the approved document does. */
  --art-column: 22%;

  /* The artwork bar, as a share of the window height. */
  --art-bar: 22vh;

  /* Taller on a phone, where the band is the only artwork on the page
     and is carrying the job the full column does on a laptop. */
  --art-bar-phone: 28vh;

  --art-gutter: var(--space-lg);

  /* --control-left and --control-bottom live in prototype-tokens.css,
     shared with the full-bleed treatment so both put their controls
     in the same place. */

  /* Where the artwork starts fading out toward the copy. 0% would
     fade the whole strip and leave nothing solid; 100% would be a
     hard edge. 45% keeps the left half of the picture at full
     strength and dissolves the right half into the page. */
  --art-fade-start: 65%;
}

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

.alt .art-strip {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.alt .art-strip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The picture dissolves into the page rather than ending on a line.
   A mask, not a white overlay, so it fades to whatever is behind it
   instead of hard-coding the canvas colour: change the page
   background and this still works.

   The mask is on the image alone. Put on the strip it would take the
   title with it, and the title has to stay solid.

   The border came off with this. An edge on three sides and a
   dissolve on the fourth reads as a mistake. */
.alt-column .art-strip img {
  -webkit-mask-image: linear-gradient(to right,
                      #000 var(--art-fade-start), transparent 100%);
          mask-image: linear-gradient(to right,
                      #000 var(--art-fade-start), transparent 100%);
}

/* The bar runs the other way, so its fade does too: it dissolves
   downward into the footer rather than sideways. */
.alt-bar .art-strip img {
  -webkit-mask-image: linear-gradient(to bottom,
                      #000 var(--art-fade-start), transparent 100%);
          mask-image: linear-gradient(to bottom,
                      #000 var(--art-fade-start), transparent 100%);
}

/* The work's title, sitting on the strip. Ink so it reads against any
   part of any of the six pictures. */
.alt .art-strip-label {
  position: absolute;
  left: var(--control-left);
  bottom: var(--control-bottom);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2xs) var(--space-sm);
  background-color: var(--color-ink);
  color: var(--color-ink-inverse);
  font-size: calc(var(--font-size-base) * 0.88);
  line-height: 1;
}

.alt .art-strip:hover .art-strip-label {
  background-color: var(--color-ink-muted);
}

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

/* The opened picture. It is always in place, full window, and clipped
   down to nothing against the edge the column sits on. Opening widens
   the clip, so the picture grows out of the column rather than
   replacing it in one frame.

   clip-path rather than display, width or position, because those
   either cannot be transitioned at all or reflow the text while they
   run. Clipping moves nothing: the picture is already laid out and
   only the window onto it changes. */
.alt .opened {
  position: fixed;
  inset: 0;
  z-index: 3;
  background-color: var(--color-canvas);
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
  transition: clip-path 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.alt #see-photo:target ~ .opened {
  clip-path: inset(0 0 0 0);
  pointer-events: auto;
}

.alt .opened > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Settles the last fraction as it arrives, so the picture reads as
     coming forward rather than sliding sideways. */
  transform: scale(1.04);
  transition: transform 520ms cubic-bezier(0.4, 0, 0.2, 1);
}

.alt #see-photo:target ~ .opened > img {
  transform: scale(1);
}

/* The page gets out of the way before the picture reaches it.

   Without this the growing edge cuts through live text and leaves it
   severed mid-word, which reads as broken rather than as a
   transition. The copy starts about a third of the way across, and
   the picture's edge gets there in roughly 150ms, so the fade is
   quicker than the growth on purpose: the words are gone by the time
   the edge arrives rather than being wiped away by it.

   The artwork strip is not in this list. It is continuous with the
   picture growing out of it and has to stay. */
.alt .page-grid > .main,
.alt .site-header,
.alt .site-footer {
  transition: opacity 180ms ease;
}

.alt #see-photo:target ~ .page-grid > .main,
.alt #see-photo:target ~ .site-header,
.alt #see-photo:target ~ .site-footer {
  opacity: 0;
  /* opacity hides pixels, not focus. Without this a keyboard user
     tabbed through all six nav names and then into the links in the
     body copy, all of them invisible, and never reached the way back.
     visibility takes them out of the tab order and out of the
     accessibility tree. It cannot be eased, so it is held until the
     180ms fade has finished, and on the way back it returns at once
     so the fade in is visible. Measured October 25: eight tab presses
     in the opened state reached eight invisible links. */
  visibility: hidden;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}

/* The note and the way back arrive after the picture, not with it. */
.alt .opened-note,
.alt .opened-close {
  opacity: 0;
  transition: opacity 220ms ease 200ms;
}

.alt #see-photo:target ~ .opened .opened-note,
.alt #see-photo:target ~ .opened .opened-close {
  opacity: 1;
}

/* The clip runs from the right edge for the mirrored version, and
   upward from the bottom for the bar, so in every case the picture
   opens from the side its strip is on. */
.alt-right .opened {
  clip-path: inset(0 0 0 100%);
}

.alt-bar .opened {
  clip-path: inset(100% 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .alt .opened,
  .alt .opened > img,
  .alt .opened-note,
  .alt .opened-close,
  .alt .page-grid > .main,
  .alt .site-header,
  .alt .site-footer {
    transition: none;
  }
}

/* Everything behind the opened picture stops taking clicks. */
.alt #see-photo:target ~ .opened::after {
  content: "";
  position: absolute;
  inset: 0;
}

.alt .opened-note {
  position: absolute;
  left: var(--page-gutter);
  bottom: var(--space-2xl);
  z-index: 4;
  width: min(30rem, calc(100% - var(--page-gutter) * 2));
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-panel-lift);
  border: var(--border-width-hairline) solid var(--color-rule);
}

.alt .opened-close {
  position: absolute;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2xs) var(--space-sm);
  background-color: var(--color-ink);
  color: var(--color-ink-inverse);
  font-size: calc(var(--font-size-base) * 0.88);
  line-height: 1;
  text-decoration: none;
}

.alt .opened-close:hover {
  background-color: var(--color-ink-muted);
}

/* --- ALT-COLUMN: artwork down the right --------------------- */

@media screen and (min-width: 58rem) {
  /* Artwork on the left, copy on the right. The order in the markup
     stays copy first, so reading and tab order are unchanged and only
     the placement moves. */
  .alt-column .page-grid {
    display: grid;
    grid-template-columns: var(--art-column) minmax(0, 1fr);
    column-gap: var(--art-gutter);
    align-items: stretch;

    /* Takes the height the header and footer leave, so the artwork
       runs the full content area rather than stopping where the text
       stops. Without this the grid row is as tall as the copy and the
       picture ends mid page with white under it, which is what made
       it read as a panel instead of as the page opening onto a
       picture. body is a flex column with a window-height floor, so
       this is the same growth .main carries on the site. */
    flex: 1 0 auto;
  }

  .alt-column .art-strip {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    min-height: 100%;
  }

  /* The image must not size the row it is measured against. The strip
     is stretched by the grid, so its height comes from the row; the
     img asks for 100% of that, which is circular, and the browser
     falls back to the picture's own height. The landscape file was
     short enough that .main always won, so this never showed. The
     portrait crop is 775px tall at 411 wide and started winning:
     Strategy went from 919 to 1040. Same trap as the Wisconsin map.
     Taken out of flow it fills the strip and contributes no height. */
  .alt-column .art-strip img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* The document's 0.44in inset comes off. It existed to sit the text
     right of the header and footer bars; the artwork column now holds
     that edge, and the column gap does the separating. */
  .alt-column .page-grid > .main {
    grid-column: 2;
    grid-row: 1;
    padding-left: 0;
    padding-right: var(--page-gutter);
  }
}

/* Below the grid breakpoint the column becomes a band, because 22% of
   a phone is 86px and a picture is not legible in that.

   It goes ABOVE the copy, not below. Under the copy it landed at
   1354px down an 1811px page, so the artwork was something you
   scrolled past the whole page to reach, which is the same as not
   having it. The markup still reads copy first, so only the
   placement moves and the reading order is unchanged.

   It runs edge to edge as well. Inside the page gutter it reads as a
   picture in a box; the point of this treatment is the page opening
   onto a picture. */
@media screen and (max-width: 57.9375rem) {
  .alt-column .page-grid {
    display: flex;
    flex-direction: column;
  }

  .alt-column .art-strip {
    order: -1;
    height: var(--art-bar-phone);
    margin: 0 calc(-1 * var(--page-gutter)) var(--space-md);
  }

  /* The band is wide and short now, so the fade runs down it rather
     than across. Left to right on a horizontal band dissolves one
     end of the picture and leaves a hard edge under the copy. */
  .alt-column .art-strip img {
    -webkit-mask-image: linear-gradient(to bottom,
                        #000 var(--art-fade-start), transparent 100%);
            mask-image: linear-gradient(to bottom,
                        #000 var(--art-fade-start), transparent 100%);
  }

  /* And the picture opens downward out of the band, not sideways
     from an edge the band no longer sits on. */
  .alt-column .opened {
    clip-path: inset(0 0 100% 0);
  }

  .alt-column #see-photo:target ~ .opened {
    clip-path: inset(0 0 0 0);
  }

  .alt-column .art-strip-label {
    left: var(--page-gutter);
  }
}

/* --- ALT-BAR: artwork across the bottom --------------------- */

.alt-bar .art-strip {
  height: var(--art-bar);
  margin-top: var(--space-md);
}

/* --- Bleeding off the window edge ----------------------------
   Kegonsa runs its photograph off the edge of the window with no
   margin, so the page opens onto the picture rather than framing it
   in a panel. Ken likes that site.

   The strip sits in a grid track inside a wrapper, so the distance
   back to the window edge is half of whatever the window has over
   the page width, plus the page gutter. A negative margin of that
   size pulls the box out to the edge; the track still fixes the
   other side, so the picture simply gets wider and object-fit shows
   more of it.
   ----------------------------------------------------------- */

:root {
  --bleed-out: calc(
    max(0px, (100vw - var(--measure-page)) / 2) + var(--page-gutter));
}

@media screen and (min-width: 58rem) {
  .alt-bleed .art-strip {
    margin-left: calc(-1 * var(--bleed-out));
  }
}

/* --- The same thing, mirrored -------------------------------
   Artwork on the right, copy on the left, which is the way round
   Kegonsa has it. The fade runs the other way so it still dissolves
   toward the copy.
   ----------------------------------------------------------- */

@media screen and (min-width: 58rem) {
  .alt-right .page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--art-column);
    column-gap: var(--art-gutter);
    align-items: stretch;
  }

  .alt-right .art-strip {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    min-height: 100%;
  }

  .alt-right .page-grid > .main {
    grid-column: 1;
    grid-row: 1;
    padding-left: calc(var(--page-gutter) + var(--main-inset));
    padding-right: 0;
  }

  .alt-right.alt-bleed .art-strip {
    margin-left: 0;
    margin-right: calc(-1 * var(--bleed-out));
  }
}

.alt-right .art-strip img {
  -webkit-mask-image: linear-gradient(to left,
                      #000 var(--art-fade-start), transparent 100%);
          mask-image: linear-gradient(to left,
                      #000 var(--art-fade-start), transparent 100%);
}

.alt-right .art-strip-label {
  left: auto;
  right: var(--space-2xs);
}

@media screen and (max-width: 57.9375rem) {
  .alt-right .art-strip {
    height: var(--art-bar);
    margin-top: var(--space-md);
  }
}

/* The owner's line, on the artist's card rather than floating on the
   picture. Full screen is the most screenshot-able view on the site
   and carried Tommy's name and nothing of BFP's. Both credits now sit
   together on a readable field instead of one of them being set over
   whichever part of the artwork happens to be underneath. */
.alt .opened-note .story-rights {
  margin-top: var(--space-2xs);
  font-size: calc(var(--font-size-base) * 0.71);
  line-height: var(--line-height-base);
  color: var(--color-ink-muted);
}

/* The whole picture closes, which is what the full-bleed version does
   with its .unpeek. z-index 1 puts it over the image and under the
   note and the pill at 4, so reading the note does not dismiss the
   picture and the pill still works as the explicit way out. */
.alt .opened-back {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* --- Both controls in one corner ----------------------------
   The title and the close land in the same spot, so opening and
   closing are the same gesture in the same place.

   The note moves to the top, which is where Kim has it in her
   October 24 comp. It was in the bottom left, which is the corner
   the controls now want.
   ----------------------------------------------------------- */

@media screen and (min-width: 58rem) {
  .alt .art-strip-label {
    position: fixed;
    left: var(--control-left);
    bottom: var(--control-bottom);
  }

  .alt .opened-close {
    left: var(--control-left);
    right: auto;
    bottom: var(--control-bottom);
  }

  .alt .opened-note {
    top: calc(var(--bar-height) + var(--space-lg));
    bottom: auto;
  }
}

/* --- The bars run the window -------------------------------
   Not capped at the page width. Capped, they sit as two panels
   floating on the artwork with it showing past their ends, which
   reads as boxes on a picture rather than as the frame the picture
   sits inside. The page gutter still holds the contents off the edge.

   The page names are set in capitals, which is how Kim draws them in
   her October 24 comp. Capitals need the tracking or the letters
   crowd; 0.08em is what her spacing measures to.
   ----------------------------------------------------------- */

.alt .site-header,
.alt .site-footer {
  max-width: none;
}

.alt .site-nav a {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Strategy objectives in the column treatment.
   --objective-label-width-strategy is 16.67% of the text measure.
   The full width build measures 1178px, so the label column is 196px
   and "Investment Focus" and "Geographic Diversity" each hold one
   line. The column treatment drops the measure to 801px, which takes
   the label column to 134px and wraps two of the three labels. That
   costs two lines of height on a page already 63px past a 900px
   window.

   Fixed at 12.25rem, which is the 196px the labels were drawn at.
   Only above 48rem: below that the pair stacks and the width is not
   used. Scoped to .alt so the production pages keep the percentage. */
@media screen and (min-width: 48rem) {
  .alt .definitions--rows {
    grid-template-columns: 12.25rem minmax(0, 1fr);
  }
}

/* The strip image is wrapped in <picture> so the desktop column can
   take a portrait crop while the phone band takes the landscape.
   display:contents keeps the img as the strip's own child, which is
   what .art-strip img is written against. */
.art-strip picture { display: contents; }

/* The whiteout on the first click.
   ------------------------------------------------------------
   Screen recording, October 25: the panel expands, and for about
   three frames at 60fps the screen is white with the note and the
   way back floating on it. Then the picture lands. It happens once
   per picture and never again.

   Cause is mine. The full picture carries loading="lazy", added
   earlier the same day so four pages would stop downloading an
   image nobody had opened. The fetch therefore starts at the click,
   and the panel's own canvas colour is what fills the 420ms expand
   until it arrives.

   Two layers, because neither is enough alone.

   One: warm the file before the click. A 1px pseudo element inside
   the strip takes the full picture as a background the moment the
   strip is hovered or focused, which on a mouse is always a few
   hundred milliseconds ahead of the click. The browser fetches a
   background image when the rule first applies, so by the time the
   panel opens the file is in cache.

   Two: a floor under it. Hover does not exist on touch, and a slow
   connection can outlast any head start. The panel takes the strip's
   own crop as a background, which is already decoded because it is
   the picture the column is showing. Wrong aspect, right artwork,
   and it paints in the same frame the panel opens. The full picture
   covers it when it arrives. */
.alt .art-strip::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  background-image: none;
}

.alt .art-strip:hover::after,
.alt .art-strip:focus::after,
.alt .art-strip:active::after {
  background-image: var(--art-full);
}

.alt .opened {
  background-image: var(--art-crop);
  background-size: cover;
  background-position: center;
}

/* ABOUT THE IMAGES, HOME ONLY
   Tommy's credit came off all six overlays on November 1 and lives
   here instead. The lead sentence takes the size the overlay credit
   used, 0.76 of body, so it reads as a note rather than as copy. The
   statement is a blockquote and is indented from it.

   Placement is the point. This is a child of .page-grid, not of
   .main, so on a laptop it lands in the grid's second row next to the
   artwork foot and align-self pins it to the bottom of the leftover
   white. Below 58rem the grid is a flex column and it simply follows
   the copy. */
.about-images-lead{
  font-size: calc(var(--font-size-base) * 0.76);
  color: var(--color-ink-muted);
}
.about-images-quote{
  margin: var(--space-xs) 0 0;
  padding-left: var(--space-md);
  font-size: calc(var(--font-size-base) * 0.76);
  color: var(--color-ink-muted);
}
.about-images-quote > p{ margin: 0; }

@media screen and (min-width: 58rem){
  .mirror.alt-column .page-grid > .about-images{
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    min-width: 0;
    position: relative;
    z-index: 2;

    /* Line up with the copy. On this layout .main pulls itself left
       out of the grid by half the difference between the window and
       the measure, so a block placed in column 1 without the same
       pull starts 174px to its right at a 1500px window. Same
       expression, same left edge, at any width. */
    margin-left: calc(-1 * max(0px, (100vw - var(--measure-page)) / 2));
    padding-right: var(--art-gutter);

    /* No top margin and no bottom padding on purpose. align-self
       already drops this to the bottom of the leftover white, so a
       margin only adds height, and it adds it on exactly the short
       windows that cannot spare it. Measured: a 2.25rem margin and
       1rem of padding put Home 52px further over on Ken's laptop and
       bought nothing at any size. */
  }
}

/* ================= manrope @font-face ================= */

/* Only Manrope is used. The nine other @font-face blocks in the
   prototype are for faces this build rejected. */

@font-face{font-family:Manrope;font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/manrope-latin-400-normal.woff2") format("woff2")}

@font-face{font-family:Manrope;font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/manrope-latin-600-normal.woff2") format("woff2")}

@font-face{font-family:Manrope;font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/manrope-latin-700-normal.woff2") format("woff2")}

/* ================= prototype-brand.css ================= */

/* ============================================================
   Badger Fund brand layer
   ------------------------------------------------------------
   Flattened October 26, 2026. Every value here is the one the page
   actually renders. The previous file had grown four superseded
   --color-rule blocks and three --color-surface blocks from the
   passes through 60% black, dark blue, 50% black and the cream, each
   overridden by the next. It worked, because the last declaration
   wins. It no longer described the site. The old file is beside this
   one as prototype-brand.css.bak.

   Decisions and the reasoning behind them are in the project doc
   claude/brand_build_decisions.md.

   Loaded by brand-*.html (artwork left) and mirror-*.html (artwork
   right). The mirror set adds prototype-mirror.css after this.
   ============================================================ */

:root{
  /* --- Type ---------------------------------------------------
     One face. Hierarchy is weight, letter spacing and whitespace,
     which is rev 3's own direction. Manrope and not Noto Sans:
     measured at the same 88 characters per line it sets every page
     22 to 67px shorter, and Noto Sans is Android's system face. */
  --font-body: Manrope, Arial, Helvetica, sans-serif;
  --font-ui:   Manrope, Arial, Helvetica, sans-serif;
  /* NOVEMBER 6. Was a flat 17px. Ken asked for the copy to run
     further down the page and leave less white space below it.
     Measured: narrowing the column recovers 20 to 45px of the 300
     that sits empty on a 1440x900 screen, because these pages are
     short on copy rather than wide. Type size is the lever that
     moves it.

     No fixed size works. The largest each page can carry at
     1440x900 runs 21.6px on Team to 26px on Portfolio, but at
     1280x650 Team tops out at 16.8px, below the 17px the site
     already used. So the size has to follow the window.

     2.3vh gives 20.7px at 900 tall and halves the white space.
     The 17px floor means every window at 720 tall and below
     renders exactly as it did before this change, so nothing on a
     small laptop can get worse. The 21px ceiling stops the type
     growing without limit on a tall monitor. */
  /* Ken, November 9: "Change the Aptos 11 point font to 10 point
     font on all pages. All pages should fit without scrolling."
     The site was not at 11 point. It read 13.25 point, because he is
     comparing against his Word file. 15.5px is 11.63 point and every
     page fits down to a 730px window. Home is the binding page: at
     the old size it needed 840, which is why it scrolled.

     Fixed, not a clamp. The old clamp scaled type with window height,
     so his screen and Amanda's rendered the page differently, which
     is half of why the fit kept moving. One size for everyone. */
  --font-size-base: 15.5px;

  /* The table is sized by what it holds, not by the prose beside
     it, so these are literals. The footer notice is 12.5px because
     above that "...on the DOA website:" fills line two and leaves
     doa.wi.gov alone on line three. */
  --font-size-table:      14px;
  --font-size-table-head: 14px;
  --font-size-footer:     12.5px;

  /* --- Colour -------------------------------------------------
     Contrast measured on white:
       #000000  21:1     text
       #196B24  6.62:1   clears AA for text, not just decoration
       #12304A  13.57:1  the two page edges
       #A3ADB8  2.28:1   table rules
       #D0D5DB  1.48:1   Portfolio rules, and the table header band
     Black on the #D0D5DB band is 14.2:1. */
  --color-canvas:     #FFFFFF;
  --color-ink:        #000000;
  --color-accent:     #196B24;
  --color-rule:       #D0D5DB;
  --color-rule-soft:  #D0D5DB;
  --color-rule-faint: #D0D5DB;
  --color-surface:    #D0D5DB;

  /* --- The two bars -------------------------------------------
     Ken's rule is that they match. 68 and not the footer's natural
     103: two 103px bars spend 23% of a 900px window on furniture
     and put Strategy over the edge. 68 is the floor the footer's
     own content needs once its notice is two lines. */
  --bar-height: 68px;
}

/* --- Type application ---------------------------------------- */

body{ font-family: var(--font-body); }
.site-header,
.site-nav,
.site-footer,
.page-descriptor,
.footer-tagline{ font-family: var(--font-ui); }

th, dt, .doc-heading{ font-weight: 600; }
.segment-title{ font-weight: 700; }

/* Table cells hold short wrapped phrases, not prose, so they do not
   take the body's 1.30 leading. Rev 3 sets its own table rows at
   864 twips, 0.60in, 57.6px. 1.20 with 2px padding gives 59. */
table th,
table td{
  line-height: 1.20;
  padding-top: 2px;
  padding-bottom: 2px;
}

/* --- The two bars -------------------------------------------- */

/* NOVEMBER 12. The navy was #132F49 and Kim's Brand Guidelines name
   Deep Navy as #12304A. Measured, the two are a deltaE of 0.6, which
   is below what an eye can separate: one colour with two numbers.
   The site takes hers so the guide and the build agree. Contrast on
   white goes 13.7:1 to 13.57:1, and these are 1px rules either way. */
.site-header{
  min-height: var(--bar-height);
  border-bottom-color: #12304A;
}
.site-footer{
  min-height: var(--bar-height);
  border-top-color: #12304A;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Nav to the right edge, sitting on the bar's vertical centre
   rather than its baseline. The header grid aligns cells to the
   end; the logo cell already carries align-self:center. */
@media screen and (min-width: 58rem) {
  .site-nav{ align-self: center; }
  .site-nav ul{ justify-content: flex-end; }
}

/* The current page turns green. The underline is gone. */
.site-nav a{ font-weight: 700; border-bottom-color: transparent; }
.site-nav a:hover,
.site-nav a[aria-current="page"]{
  color: var(--color-accent);
  border-bottom-color: transparent;
}

/* Links keep their underline at rest and turn green on hover. */
.main a:hover,
.site-footer a:hover{ color: var(--color-accent); }

/* --- The wordmark -------------------------------------------- */

/* Kim's logo 3, outlined paths with Tommy's art at 200x133 inside
   the mark, re-encoded to 87KB from her 538KB master. 52px in a
   68px bar leaves 8 above and 9 below. width and height are on the
   img so the bar does not reflow while it loads. */
.site-name{ font-size: 0; line-height: 0; }
.site-name img{ display: block; height: 52px; width: auto; }
.site-name a{ display: inline-block; text-decoration: none; border: 0; }
.site-name a:focus-visible{
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}
@media screen and (max-width: 57.9375rem) {
  .site-name img{ height: 40px; }
}

/* --- The table ----------------------------------------------- */

/* One step deeper than Portfolio's rules. Row rules in five columns
   of allocation figures separate data, not sections. The 2px rule
   under the header row goes with them, so the band reads as one
   piece. Header cells centre vertically: they hold one, two and
   three lines across the five columns. */
table th,
table td,
thead th{ border-color: #A3ADB8; }
thead th{ vertical-align: middle; }

/* --- The footer tagline -------------------------------------- */

/* Kim, October 26. Green, and the whole first line bold rather than
   the single word. That differs from the page descriptor, where
   rev 3 bolds only "Investing". The two read differently on
   purpose. */
.footer-tagline{ color: var(--color-accent); }
.footer-tagline strong{ font-weight: 700; }

/* --- The artwork controls ------------------------------------ */

/* The work's title before the picture opens and BACK TO [PAGE]
   after it are one control in two states, so they take the nav's
   treatment: caps at 0.08em. 85% white with black type at rest,
   solid white with the accent on hover. */
.alt .art-strip-label,
.alt .opened-close{
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background-color: rgba(255,255,255,0.85);
  color: var(--color-ink);
}

.alt .art-strip:hover .art-strip-label,
.alt .art-strip:focus-visible .art-strip-label,
.alt .opened-close:hover,
.alt .opened-close:focus-visible{
  background-color: #FFFFFF;
  color: var(--color-accent);
}

/* --- The artist's note ---------------------------------------
   The credit sets smaller than the note it signs. 0.76 of the base,
   which is 12.9px against the note's 17. The trademark and
   copyright line that sat under it is gone: it is in the footer on
   every page, and the opened picture is an overlay on a page that
   already carries it, not a page of its own. */
.story-credit{
  font-size: calc(var(--font-size-base) * 0.76);
}

/* ARTIST'S NOTE: LOCATION MARK
   Kim's per-artwork mark, one segment of the badger filled with that
   painting. The filled segment names the painting, so the mark takes
   no caption and no alt text. Body copy drops from 17px to 15px and
   the credit from 13.9px to 12.4px, which holds the note at the size
   it was before the mark went in. */
.variant-h #see-photo:target ~ .story-corner,
/* The mark centres against the caption, Ken and Amanda, November 11.

   It was top aligned with a 14px nudge, which put the mark's centre
   between 4.2px and 23.7px below the caption's, the gap growing as
   the caption got shorter. Worst on the two line captions, Off Trail
   and Venture Capitol, at 23.7px. The mark is 84.8px tall and a two
   line caption is 65.4px, so top aligning them could not read level.

   Centred, all six land at 0px. Measured at 1440, 1280, 1092 and 834.
   Below 48rem the panel is display:block and the mark stacks over the
   caption, so align-items does nothing there and the phone is
   unchanged.

   The six marks carry no transparent padding: each fills its box top
   to bottom, so centring the box centres the ink. Checked on all six
   before making the change. A replacement mark with padding would
   need its own nudge. */
.alt .opened-note{
  display: flex;
  align-items: center;
  column-gap: 18px;
}
.story-mark{
  flex: 0 0 76px;
  width: 76px;
  height: auto;
  display: block;
}
.story-text{ min-width: 0; }
.story-text > p:not(.story-eyebrow):not(.story-credit){
  font-size: 15px;
  line-height: 19.5px;
}
.story-text > .story-credit{ font-size: 12.4px; }

/* The column note sat top left. Moved to bottom left, its lower edge
   level with the Back to page control on the right. */
.alt .opened-note{
  top: auto;
  bottom: var(--control-bottom);
}

/* The eyebrow was small caps in the full bleed and sentence case in the
   column. Both families now take the full bleed treatment. */
.story-text > .story-eyebrow{
  font-size: calc(var(--font-size-base) * 0.68);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

/* Below 58rem the mark's column left the copy at 200px, about 26
   characters a line. The mark goes above the copy and the text takes
   the full width. */
/* 31rem, not 58rem. The stack exists because at 390px the side by side
   mark squeezed the copy to 200px, about 26 characters a line. The note
   is 480px wide at any viewport over about 528px, where side by side
   leaves the copy at 338px, the same measure it has on a laptop. An
   iPad in portrait is 810px and was taking the phone treatment. */
@media screen and (max-width: 31rem){
  .variant-h #see-photo:target ~ .story-corner,
  .alt .opened-note{
    display: block;
  }
  .story-mark{
    width: 60px;
    margin: 0 0 8px;
  }
}

/* The longest notes are taller than a small phone. Cap the note and let
   it scroll inside itself rather than run under the header. dvh first
   for iOS, with vh behind it for anything that does not know dvh. */
@media screen and (max-width: 57.9375rem){
  .alt .opened-note{
    max-height: calc(100vh - 144px);
    max-height: calc(100dvh - 144px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* A short viewport keeps the note over the picture, the way a tall one
   does. The earlier answer stacked them, picture first and note under
   it, and that reads as two things rather than one.

   The page scrolls rather than the note. A box that scrolls its own
   text gives no sign it has more in it; a page that scrolls does.
   So the note is in flow and as tall as its copy needs, the picture
   is fixed behind it, and the overlay scrolls the note over a
   painting that stays put.

   Short notes centre instead of sitting at the top. 'safe center'
   hands the top back as soon as the note is taller than the screen,
   so nothing is ever scrolled off the top and out of reach.

   The close control stays fixed at bottom right. That covered the
   copy in the stacked version, where the note ran the full width.
   Here the note takes the left 56% at most and the control sits in
   the right quarter, so they never meet.

   No width condition. The ceiling was 57.9375rem, which left a
   landscape iPhone 14 Pro Max at 932 and a 16 Pro Max at 956 outside
   every landscape rule, with the top of the note cut off by 18px and
   8px. Height is the scarce axis here, so height is what this asks
   about. Changed 27 October. */
@media screen and (max-height: 520px){
  .alt .opened{
    display: flex;
    align-items: center;
    align-items: safe center;
    justify-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    background-image: none;
  }
  .alt .opened > img{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    object-fit: cover;
  }
  .alt .opened-note{
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    width: min(30rem, 56vw);
    max-height: none;
    overflow: visible;
    margin: var(--space-md) 0 var(--space-md) var(--page-gutter);
  }
  .alt .opened-close{
    position: fixed;
    right: var(--space-md);
    bottom: var(--space-md);
    margin: 0;
    width: auto;
  }
}

/* The bleed set 8px under the title and 12px over the credit. The
   column set 0 and 7. Both now take the bleed's rhythm. */
.story-text > h2{ margin-bottom: 8px; }
.story-text > .story-credit{ margin-top: 12px; }

/* color-mix() sets a Safari 16.2 floor, and these three tokens feed the
   artist's note background. On older Safari the custom property is
   invalid at use time, the background falls away and the note's text
   sits straight on the painting. The canvas is #FFFFFF and the ink is
   #000000, so the mixes are plain alpha and are written as such.
   Update these if --color-canvas or --color-ink change. */
:root{
  --color-panel:        rgba(255, 255, 255, 0.94);
  --color-panel-lift:   rgba(255, 255, 255, 0.97);
  --color-panel-shadow: rgba(0, 0, 0, 0.28);
}

/* iOS counts the toolbar in vh. The bleed's note cap gets a dvh partner
   for the same reason the footer has an svh one. */
.variant-h .story-corner{
  max-height: calc(100dvh - 12rem);
}

/* A notch sits on one side in landscape. env() is additive and reads 0
   on a device without one. */
@supports (padding: env(safe-area-inset-right)){
  @media screen and (max-height: 520px){
    .alt .opened-close{
      right: calc(var(--control-left) + env(safe-area-inset-right));
      bottom: calc(var(--control-bottom) + env(safe-area-inset-bottom));
    }
    .alt .opened-note{
      margin-left: calc(var(--page-gutter) + env(safe-area-inset-left));
      margin-right: calc(var(--page-gutter) + env(safe-area-inset-right));
    }
  }
}

/* ================= prototype-mirror.css ================= */

/* The artwork column on the right.
   ============================================================
   Written on top of .alt-column rather than using the older
   .alt-right block, which predates the fixes this build carries:
   the strip image taken out of flow so it cannot size its own grid
   row, the controls pinned to one spot, the crop served through
   <picture>, and the backdrop that stops the whiteout. Mirroring
   .alt-column keeps all of that and flips only direction.

   Add "mirror" to the body class alongside alt alt-column alt-bleed. */

@media screen and (min-width: 58rem) {
  /* Text first, picture second. */
  .mirror.alt-column .page-grid {
    grid-template-columns: minmax(0, 1fr) var(--art-column);
  }
  .mirror.alt-column .art-strip { grid-column: 2; }
  .mirror.alt-column .page-grid > .main {
    grid-column: 1;
    padding-left: calc(var(--page-gutter) + var(--main-inset));
    padding-right: 0;
  }

  /* The bleed runs off the other edge. */
  .mirror.alt-bleed .art-strip {
    margin-left: 0;
    margin-right: calc(-1 * var(--bleed-out));
  }

  /* Both controls follow the picture, so they stay together and stay
     on the artwork rather than travelling across the page. */
  .mirror .art-strip-label,
  .mirror .opened-close {
    left: auto;
    right: var(--control-left);
  }
}

/* The fade dissolves toward the text, which is now on its left. */
.mirror.alt-column .art-strip img {
  -webkit-mask-image: linear-gradient(to left,
                      #000 var(--art-fade-start), transparent 100%);
          mask-image: linear-gradient(to left,
                      #000 var(--art-fade-start), transparent 100%);
}

/* The picture opens from the side its strip is on. */
.mirror .opened { clip-path: inset(0 0 0 100%); }
.mirror #see-photo:target ~ .opened { clip-path: inset(0 0 0 0); }

/* Below 58rem the artwork is a band across the top in both versions,
   so the phone layout is left alone. */

/* The empty band on the left.
   ------------------------------------------------------------
   The header's wordmark and the footer's notice both start at the
   page gutter, 24px. The body text was starting at 230: the content
   wrapper centres itself at 72rem, which at 1440 leaves 144px of
   margin, and .main then adds the document's 0.44in inset on top.

   On the left-hand build that 144 is underneath the artwork, so it
   never showed. Mirrored, it is bare white.

   Pull .main back across the centring margin and give it the page
   gutter instead, so the first word sits on the same line as the
   wordmark above it and the notice below it. The 0.44in inset goes:
   it existed to sit body text right of the bars, and here the text
   is being aligned TO the bars. */
@media screen and (min-width: 58rem) {
  .mirror.alt-column .page-grid > .main {
    margin-left: calc(-1 * max(0px, (100vw - var(--measure-page)) / 2));
    padding-left: 0;
    padding-right: var(--art-gutter);
  }
}

/* ===== landscape phone, found on a real iPhone 27 October =====

   This block set the close control static, stopped the picture at
   88dvh and painted a plain surface under it. All three served the
   stacked landscape layout: picture first, note under it.

   That layout is gone as of later the same day. The note sits over
   the picture again and the picture fills the screen, so a control
   that flows after the note has nothing to flow after, and a surface
   under the picture is never seen. The rules are removed rather than
   left to fight the block above.

   What the stack taught is kept there: a fixed control over scrolling
   content covers that content, so the control is positioned against
   the overlay and the scrolling happens inside the note, where
   nothing passes under anything. */

/* The state is set to 186px wide on a narrow screen, which reads well
   in portrait and takes half the screen when height is the scarce
   axis. On a short viewport it returns to the size the board drew it. */
@media screen and (max-height: 520px){
  .map img{ width: auto; height: 130px; }
}

/* The full DOA address is in the footer again, this time because
   counsel wanted it visible rather than hidden behind words. It is
   wider than the notice column on a phone, so it breaks mid-address.
   This rule has now been both ways: the address was shown in rev 5
   and allowed to break, replaced by the words "DOA reporting" on 28
   October and set back to normal wrapping, and restored November 9.
   Anything other than a bare address in here wants normal wrapping. */
.footer-notice a{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ===== Ken's punch list, 27 October ===== */

/* "After venture capital managers, third objective, need more space before
   table." The objectives block sat 9px off the table.

   Space below it too, asked 27 October. The ask was the same amount
   as above. It is 0.85rem and not 1.1rem, which leaves 23px below
   against 27px above.

   The missing 4px is the whole reason. A matching 1.1rem takes the
   gap below to 27 and takes the page to 772px on a 768px viewport,
   which is Ken's. Strategy is the tightest of the six and was the
   only one with less than 18px to spare. 4px of difference in a gap
   is not visible. 4px of scroll on his screen is. */
/* 0.95 and 0.70, down from 1.1 and 0.85. Strategy was 5px over at
   one zoom click out, which is the fit target Ken agreed. 3px off
   each side of the table is 6px and is not visible; the gap above
   still reads as the space he asked for. 28 October. */
.table-scroll{
  margin-top: 0.95rem;
  margin-bottom: 0.70rem;
}

/* "I don't particularly like the grey background, hard for me to read."
   The header band was a solid #D0D5DB fill. Black on it measures 14.2:1,
   so the problem is not contrast, it is a block of colour in a build that
   uses hairline rules everywhere else. The fill comes off and the header
   row keeps a rule under it, which is how the rest of the site separates
   things. */
table thead th{
  background-color: transparent;
  border-bottom-width: 2px;
  border-bottom-color: var(--color-ink);
}

/* "The heading Fund Focus is more important than four focus headings.
   The important point is different focuses not what the different
   focuses are."  site.css lifts this block to body size in its
   two-column form. Back to the size the same block uses in its other
   form, which is the page's own fine print and sits under the segment
   titles rather than over them. Segment titles are unchanged. */
.focus-row--pairs dt,
.focus-row--pairs dd{
  font-size: var(--font-size-portfolio-fine);
}

/* "Space after three segments and before 1." The numbered list sat
   flush against the sentence that introduces it. It now takes the same
   gap every other block on the page takes. */
main ol.prose-list{ margin-top: 0.545em; }

/* "Center better." Ken, 27 October, on Management and Programs.
   Superseded 28 October by his own redirect: "Interesting but you
   know what is needed ... the separation between text and the
   Tommy's visual identity must be improved ... a lot."

   Centring moved white from the bottom of a rectangle to the top of
   it and left both rectangles standing, which is why it did not
   answer him. The copy is anchored at the top again on all six
   pages and the painting takes the white instead. The rules are
   removed rather than left to fight the artwork. */

/* --- The painting as an L, not a column ----------------------
   Ken, 27 October: "the separation between text and the Tommy's
   visual identity must be improved ... a lot. The text cannot be a
   square and the visual identity another square."

   The painting keeps its full-height column on the right and now
   spreads along the bottom, into the white under the copy. The two
   legs are one mass with no edge between them.

   The foot is a grid row, not a measurement. The grid gained a
   second row sized 1fr, the copy sits in row 1 at its own height,
   and row 2 is whatever is left. So the foot IS the white space by
   construction: 193px on Management, 136 on Programs, 85 on
   Portfolio, 71 on Home, 19 on Strategy, 12 on Team. No paint can
   land on copy, on any page, at any length, because the foot
   begins where the copy ends.

   That is the whole reason it is built this way. A foot set to a
   fixed height was tried first and measured: even at its softest
   it put paint over 15.8% of Strategy's last paragraph and 14.3%
   of Team's, because those two pages leave 35px and 28px of white
   and a fixed foot has nowhere to go that is not copy.

   The foot spans both columns and sits under the strip, so the
   corner is the strip's own image rather than two crops meeting.
   Spanning only column 1 left a gap at the column gutter, and
   painting over the strip put a second crop of the same painting
   in the corner at a different scale.

   Both masks are radial, and that is the point. The first build
   used linear fades and left a visible line on each axis. The
   fades themselves were smooth: measured down the page, paint went
   0.00 at y=504 to 2.67 at y=508, and across it 0.00 at x=1020 to
   1.40 at x=1028. Smooth ramps, but the place where paint STARTS
   was dead straight on both axes and met at a right angle, and a
   straight onset reads as a drawn line however soft the ramp.

   Measured: the strip's onset varied 8px down its height before
   and 76px after; the foot's step at its own box top went from a
   hard edge to 0.6. A radial gradient that reaches zero inside the
   element gives an onset that is an arc, which does not read as a
   line. A radial that reaches the element's edge still opaque is
   worse than a linear one: it pins the onset to the box and the
   spread goes to 0.

   --art-full moved from .art-strip up to .page-grid in all six
   pages so this rule can read it. It still inherits down to the
   strip, where the opened picture uses it as a backdrop.
   ----------------------------------------------------------- */

@media screen and (min-width: 58rem) {
  .mirror.alt-column .page-grid {
    grid-template-rows: auto 1fr;
  }

  .mirror.alt-column .page-grid > .main {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 2;
  }

  .mirror.alt-column .art-strip {
    grid-column: 2;
    grid-row: 1 / -1;
    position: relative;
    z-index: 1;
  }

  .mirror.alt-column .page-grid::after {
    content: "";
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    position: relative;
    z-index: 0;
    background-image: var(--art-full);
    /* Anchored at the corner, not at 86% across.

       The 86% anchor was there to pull the foot clear of the strip
       back when they were two different crops. They share one picture
       now, so there is nothing to pull clear of, and the anchor was
       doing harm: a radial peaks at its anchor and falls away on both
       sides, so it put a density ridge at x=1265 that the painting
       does not have. Measured against the same page with the masks
       off: 32.0 on screen against 18.3 in the artwork. The mask was
       not revealing an edge there, it was making one.

       86% is 1.4 at the same spot. Amanda spotted this; I had
       concluded it was the artwork and it was not.

       86% vertical, so the ellipse still reaches zero inside the box
       rather than 10px above it, which is what put a straight line of
       5% alpha along the box top before.

       #000 0% and no solid core: the fade runs the whole radius
       instead of holding full strength for the first stretch. That is
       the longest, flattest fade the shape allows. */
    /* The horizontal radius is the picture's own width, not the
       element's.

       The foot is wider than the picture. At a 1432px window the foot
       runs 1292px and the picture is 943px, so the picture ran out
       with the mask still at about 50% alpha, and that was a hard
       vertical edge where the paint simply stopped. It sat a constant
       654px from the window's right edge at every width, which is how
       it was identified: it tracked the picture, not the layout.

       Every one of Tommy's files is 1600x1067, aspect 1.4995, so the
       drawn width is the content height times that, less whatever
       --art-shift has slid it right. Setting the radius to exactly
       that distance puts the mask at zero precisely where the picture
       ends, so there is nothing left to see an edge of.

       The strip needs no such bound: it is narrower than the picture,
       so the picture always covers it. */
    -webkit-mask-image: radial-gradient(
                        min(70vw, calc((100vh - 139px) * 1.4995 - var(--art-shift, 0px))) 86%
                        at 100% 100%, #000 0%, transparent 100%);
            mask-image: radial-gradient(
                        min(70vw, calc((100vh - 139px) * 1.4995 - var(--art-shift, 0px))) 86%
                        at 100% 100%, #000 0%, transparent 100%);
  }

  /* ONE PICTURE, TWO LEGS.

     The leg and the foot were two elements showing two crops of the
     same painting at two scales: the strip covered 407x629, the foot
     covered 1292x193. Where the strip's mask faded out, the foot's
     different crop appeared underneath and the content did not line
     up. That mismatch was the visible corner, and no amount of
     softening the masks could fix it because the problem was the
     pictures, not the edges.

     Both now sample one virtual image: the painting scaled to the
     content height and pinned to the right edge. The strip shows all
     of it, the foot shows the bottom slice of the same thing, and
     they line up because they are the same picture. Measured at the
     junction, the step across the foot's top went from 69 to 25 on
     Management and from 92 to 20 on Portfolio.

     139px is the two bars. The content box is the viewport less the
     header and the footer, and both are content-height: 52px of logo
     plus padding. If the logo size changes, this changes with it.

     The desktop <picture> is out of the way and its source points at
     the same file, so the page fetches one image rather than the
     column crop AND the full file as it did before. The phone band
     sources below 58rem are untouched. */
  .mirror.alt-column .art-strip > picture {
    display: none;
  }

  /* More blend, asked 28 October. Adding stops to the mask does
     nothing here: measured, the steepest arrival stays at 12.8
     either way, because what arrives abruptly is the painting's own
     content and not the mask's ramp. Lowering the whole painting is
     what softens it. 0.82 takes the steepest arrival to 11.7, 0.68
     to 10.3, 0.55 to 9.0. This is the one number to turn. */
  .mirror.alt-column .art-strip,
  .mirror.alt-column .page-grid::after {
    /* NOVEMBER 6. Was a flat 0.82. Now a token so a page with a wide
       art column can carry the painting more strongly. Measured on
       Management at 1440x900: 0.82 gives a steepest step across the
       fade of 45, 0.92 gives 51, 1.0 gives 55. 0.92 is the trade we
       took on the three wide-column pages. */
    opacity: var(--art-opacity, 0.82);
  }

  .mirror.alt-column .art-strip {
    background-image: var(--art-full);
    background-size: auto max(calc(100vh - 139px), 100%);
    /* NOVEMBER 6. Was a flat calc(100vh - 139px). The strip grows
       with the page when the copy runs past one screen, but the
       picture did not grow with it, so the bottom of the column went
       white while the copy carried on beside it. Amanda found it by
       narrowing the window. Measured at 1000x760: the strip is 679px
       tall and the picture was 621px, leaving a 58px white band.

       max() keeps the old height as a floor and lets the picture fill
       the strip when the strip is taller. At 1440x900 the strip is
       762px and the old value gave 761px, so a normal window is
       unchanged to within a pixel.

       The mask radius still assumes the picture is (100vh - 139px)
       tall, which now understates its width. That errs the safe way:
       the fade stops short of the file's own edge rather than past
       it. */
    background-position-x: calc(100% + var(--art-shift, 0px));
    background-position-y: top;
    background-repeat: no-repeat;
    /* The box reaches 260px further left than the column, and the
       paint reaches 570px in from the right edge.

       Those two numbers are the fix for the line. Measured across
       the fade at Ken's width: the copy ended at x=1111, the paint
       could not begin before x=1210 because that was the edge of
       this box, and between them sat 96px of pure white. The fade
       had nowhere to go, so it started against a clean white strip
       and read as an edge however soft the ramp was.

       Giving the box 260px of room takes that band to 0. The reach
       of 570px is set so the paint dies out just short of where the
       copy ends: measured, no paint at all lands on the text
       column, and the steepest step across the fade drops from
       1.094 to 1.015.

       Widening the radius along with the box was tried first and is
       wrong: it makes the paint denser everywhere and turns the
       box's own left edge into a new hard line. The reach is in
       pixels for that reason, not a percentage of the box.

       The box's right edge does not move, so the picture keeps its
       position and the two legs still line up. */
    /* NOVEMBER 1 FIX. The reach was a flat 570px, which is longer
       than the picture itself on a short window. The picture is
       drawn at (100vh - 139px) tall and is 1.4995 as wide as it is
       high, then pushed right by --art-shift. On Management at
       700px tall that puts the picture's own left edge 551px from
       the right while the fade was still painting out to 570px, so
       the edge of the file showed as a line. Management is worst of
       the six because its shift is the largest at 290px. Measured,
       it failed on Management at 620 and 700, on Team at 620 and on
       Programs at 620.

       min() holds the reach at 570px where there is room and pulls
       it back to the picture's own width where there is not. The
       foot below already works this way; this is the strip catching
       up. On a short window the fade is shorter and so steeper,
       which is the trade: a steeper soft fade instead of a hard
       edge. */
    -webkit-mask-image: radial-gradient(
                        min(var(--art-reach, min(570px, 38vw)),
                            calc((100vh - 139px) * 1.4995
                                        - var(--art-shift, 0px)))
                        110% at 100% 55%, #000 0%, transparent 100%);
            mask-image: radial-gradient(
                        min(var(--art-reach, min(570px, 38vw)),
                            calc((100vh - 139px) * 1.4995
                                        - var(--art-shift, 0px)))
                        110% at 100% 55%, #000 0%, transparent 100%);
    margin-left: -260px;

    /* Widening the box moved the link's clickable area 260px left
       with it, which put the white below the copy inside the link:
       clicking empty space opened the picture. The box has to be
       wide for the paint, so the hit area is put back by hand. The
       link stops taking clicks and ::before takes them instead,
       inset by the same 260px, which is exactly where the edge of
       the box used to be. The label needs its own line for the same
       reason. Copy sits above this at z-index 2 and was never
       affected. */
    pointer-events: none;
  }

  .mirror.alt-column .art-strip::before {
    content: "";
    position: absolute;
    inset: 0 0 0 260px;
    pointer-events: auto;
  }

  .mirror.alt-column .art-strip-label {
    pointer-events: auto;
  }

  .mirror.alt-column .page-grid::after {
    /* The foot bleeds off the right edge exactly as the strip does.
       Without this it stopped at the grid's right boundary while the
       strip carried on to the window edge, and that gap was a hard
       vertical line running the height of the foot. It sat at x=1292
       in a 1432px window and x=1395 in a 1637px one, which is what
       gave it away: it moved with the grid, not with the painting.
       Found by Amanda on her own screen at a width I had not
       rendered at. */
    margin-right: calc(-1 * var(--bleed-out));
    background-size: auto max(calc(100vh - 139px), 100%);
    /* NOVEMBER 6. Was a flat calc(100vh - 139px). The strip grows
       with the page when the copy runs past one screen, but the
       picture did not grow with it, so the bottom of the column went
       white while the copy carried on beside it. Amanda found it by
       narrowing the window. Measured at 1000x760: the strip is 679px
       tall and the picture was 621px, leaving a 58px white band.

       max() keeps the old height as a floor and lets the picture fill
       the strip when the strip is taller. At 1440x900 the strip is
       762px and the old value gave 761px, so a normal window is
       unchanged to within a pixel.

       The mask radius still assumes the picture is (100vh - 139px)
       tall, which now understates its width. That errs the safe way:
       the fade stops short of the file's own edge rather than past
       it. */
    background-position-x: calc(100% + var(--art-shift, 0px));
    background-position-y: bottom;
    background-repeat: no-repeat;
  }

  /* --art-shift, set per page in the HTML, slides the painting right
     so its own hardest vertical edge lands at or past the page edge
     instead of in the dense part of the fade. Each of Tommy's files
     composites photograph against watercolour and carries one of
     these: River Support at 69% across, Off Trail at 88%, Buried
     Cable at 44%. Both legs take the same shift, which is what keeps
     them one picture. Portfolio is 0 because its edge already falls
     where the fade has died. The cost is the rightmost part of each
     painting, which is cropped off. */
}

/* --- Fitting one screen at 100% ------------------------------
   Ken, 28 October: every page on one screen at 100%, no zoom.

   His browser gives about 670px of usable height, not the 768 his
   screen reports. The difference is his chrome and his bookmarks
   bar. The bookmarks bar alone is worth about 4% of the window.

   These changes plus that bar hidden put all six pages on one
   screen with the body type untouched. Measured: at 670 the worst
   page is 4% over, at 690 it is under 1%, at 700 every page fits.

   Described for Ken in his own terms, since he reads percentages
   and not pixels: the artwork column narrows by about a fifth, the
   line spacing tightens by 3%, the two bars lose about 8% of their
   height, the Team portraits come down 14%, and the Strategy table
   text goes down 7% with its row padding halved. Body copy does
   not change size.

   What was ruled out, with numbers, so it is not retried:
   6pt returns save 1px on Home and cost Portfolio 6px. Cutting the
   body type to 15px, a 12% reduction, still leaves Strategy over
   because Strategy is mostly table. Portfolio does not respond to
   type at all: it is a fixed-pixel composition Ken reviewed mark by
   mark, so it only moves if those marks move.
   ----------------------------------------------------------- */

@media screen and (min-width: 58rem) {
  :root {
    --art-column: 17%;
  }
}

:root {
  --line-height-base: 1.26;
  /* 3.75 and not 3.9: section headings went up to body size on 28
     October, which cost Team 2px, and this is where it comes back. */
  --photo-size: 3.75rem;
  --font-size-table: 13px;
  --font-size-table-head: 13px;
}

.site-header,
.site-footer {
  padding-top: 5px;
  padding-bottom: 5px;
}

table th,
table td {
  padding-top: 1px;
  padding-bottom: 1px;
}


/* ============================================================
   PORTFOLIO REV 3, NOVEMBER 8 2026
   ============================================================

   Ken's rev 3 rearrangement. Legal counsel asked that the website
   and the 2025/6 annual report agree, so the three investment
   segments now show only the nine underlying funds in that report:
   seven first time, Idea Fund II, and Clarevia VII. Gateway II,
   Winnow II, Capital Midwest V and the Coinvest Fund stay under
   Fund Focus.

   That left the first time row with seven funds and the other two
   segments with one each, so the state map moves up beside the
   first time row and the two small segments sit below it.

   These rules override the board-derived layout in site.css rather
   than replacing it. Delete this block to go back to rev 2.
   ============================================================ */

.portfolio-lead-line {
  margin: 0 0 var(--space-xs);
  max-width: 62ch;
}

/* Ken's rev 3 puts a second line of running text above Fund Focus.
   Thirteen is the count of fund vehicles listed in the four columns
   below, not the nine funds in the lead line, which counts funds that
   have closed fund raising. */
.portfolio-lead-line--focus {
  margin-top: var(--space-xs);
}

/* 65/35, measured off Ken's Word mockup: the first time cell spans
   four of six table columns and the map cell spans two. */
/* The map column runs the height of all three segments, not just the
   first time row. That is how it worked before rev 3: site.css grew
   the state on October 23 so its bottom sat on the same line as the
   bottom of the Existing Wisconsin marks beside it. Splitting the
   page into an upper and a lower block broke that, so the two blocks
   are one grid again with the map spanning both. */
.portfolio-grid {
  display: grid;
  grid-template-columns: 65% 35%;
  align-items: stretch;
}

/* The four-column row runs to the edge of its own column, so without
   this the fourth fund's heads sit on the state. */
.portfolio-col { padding-right: var(--space-lg); }

.portfolio-grid .map-panel { grid-column: 2; }

/* The state fills the height its column is given and centres under
   its own heading. site.css pulls the heading left instead, to centre
   it over a state that sat where the board put it. Amanda asked for
   the reverse on November 8: heading where it is, state centred
   under it. */
.portfolio-grid .map { display: flex; flex-direction: column; height: 100%; }
.portfolio-grid .map img {
  width: auto;
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
  object-fit: contain;
  object-position: center top;
  position: static;
  left: auto;
  margin-top: var(--space-xs);
  /* The state is capped, not stretched. Stretching made the map the
     tallest thing in the row, so it set the grid height and the funds
     block could not be made shorter no matter how small the faces and
     marks went. Measured November 8: the column needed 377px and the
     map held the row at 412px. The cap puts the column back in
     charge and gives Ken one number to tune. */
  max-height: var(--map-cap, 260px);
  flex: 0 1 auto;
  align-self: center;
}

.portfolio-upper .map-panel { grid-column: 2; }

/* Seven funds over four columns wraps 4 and 3, which is how the
   mockup draws it: Idea Fund, Winnow, Gateway, Rock River, then
   Winnebago, Mastercraft, Strato. */
.fund-row--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  row-gap: 14px;
}

/* One fund per segment now. The old widths sized a three-column
   row and would leave the single mark floating mid-column. */
.fund-row--one {
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
}
.portfolio-lower .fund-row--followon,
.portfolio-lower .fund-row--existing { width: auto; }
/* Each mark sits centred under its managers. Idea Fund II has four
   and was left aligned under them. */
.portfolio-lower .fund { align-items: center; }

/* Clarevia has no managers, so its mark takes the height of the
   manager row beside it and centres on the same line as the Idea
   Fund II faces. */
/* Clarevia's mark height is set further down, in the November 9 block. */

/* Segments 2 and 3 side by side where they used to stack. */
/* Each segment now holds one fund, and both sit inside the 65 per
   cent column rather than across the page, so they split that column
   in half. Ken's mockup gives each cell 26 per cent of the full page,
   but his mockup uses the short segment names. His answer on the
   names was "agree if the portfolio page has the real estate", so
   they get the width the approved names need. */
.portfolio-lower {
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-lg);
}
.portfolio-lower .segment-title--second {
  margin-top: 0;
  width: auto;
}

.portfolio-grid .map .segment-title {
  width: auto;
  position: static;
  left: auto;
  text-align: center;
}

/* Fund Focus back to four columns across, which is how Ken's rev 3
   draws it. site.css turned it into a two by two block on October 23
   because four columns of that copy needed 1213px at the site's 17px
   and the column holds 1104. Rev 3's lists are longer still, so the
   four columns take the fine type the base rule already defines and
   wrap rather than run off. */
.focus-row--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: stretch;
  column-gap: var(--space-md);
  row-gap: var(--space-md);
}
.focus-row--four dd { white-space: normal; }

/* --- Portfolio rev 3 on a narrow screen ----------------------
   The rules above build Ken's rev 3 at desktop width and applied at
   every width, so the four fund columns and the 65/35 split held on
   a phone and the marks ran together. Amanda, November 8.

   The one column point was 1200px, measured when the marks were being
   squashed to fit their cells. With the marks sized by max-height
   instead (see the fund-mark img rule below) they shrink rather than
   squash, so four across holds further down. It is 1092px now.

   That 108px matters because every iPad landscape lands in it: iPad
   Pro 11 is 1194, iPad Air 1180, iPad mini 1133. All three were
   missing the approved layout by as little as 6px and falling to the
   stacked one, which made the page 1246px tall in an 834px window.
   At 1092px they get Ken's layout and the page fits with no scroll.
   The narrowest mark gap is 16px at 1133 and 19px at 1194.
   Amanda, November 9, looking at an iPad. */

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

  /* One column. The state drops under the funds. */
  .portfolio-grid { grid-template-columns: minmax(0, 1fr); }
  .portfolio-col { padding-right: 0; }
  .portfolio-grid .map-panel { grid-column: 1; margin-top: var(--space-md); }

  /* Undo the stretch and the 85 per cent. At this width the state is
     already drawn at the size site.css sets. */
  .portfolio-grid .map { height: auto; align-items: center; }
  .portfolio-grid .map img {
    width: 186px;
    height: auto;
    flex: 0 0 auto;
    align-self: center;
    transform: none;
  }

  /* The two lower segments stack rather than split the column. */
  .portfolio-lower { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-md); }
  .portfolio-lower .segment-title--second { margin-top: var(--space-md); }

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

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

/* Two across on a phone, not one. Amanda, November 9, looking at an
   iPhone. Checked from 430 down to 320: no horizontal scroll, four
   rows of funds, and at 402 the widest mark has 59px of air beside
   it.

   The marks needed aspect-safe sizing here first: in a narrow cell
   the width hits the wall before the height, and a fixed height then
   squashes the mark. Below 360 Rock River, the widest of the eight,
   lost 8px of width at full height. The same thing turned out to be
   happening on a laptop, so the main fund-mark img rule carries the
   aspect-safe sizing at every width now and the override that used
   to sit at the end of this file is gone. */
@media screen and (max-width: 31rem) {
  .fund-row--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* --- Portfolio rev 3, board proportions, November 8 ----------
   Board comment through Ken: the nine funds with pictures should take
   60 per cent of the page and Fund Focus 40 per cent. One member put
   Fund Focus above the logos and headshots, because the four focus
   columns are the only place all thirteen funds are named.

   The page also has to fit Ken's 1432x768 Lenovo, where it ran 799
   and put the footer out of reach. Both asks are the same vertical
   budget, so they are solved together. */

:root {
  --map-cap:     230px;   /* the state */
  --face:         34px;   /* manager circles, was 52 */
  --mark:         26px;   /* fund wordmarks, was 38 */
  /* Ken, November 9. Three sizes are tied to what they must match,
     not set as numbers, so they cannot drift apart again.
     Fund names take the size of the two running sentences.
     The Fund Focus heading takes the size of the segment titles. */
}

.portfolio-col .fund-people,
.portfolio-lower .fund-people { height: var(--face, 44px); }
.portfolio-col .person-link,
.portfolio-lower .person-link { width: var(--face, 44px); height: var(--face, 44px); }
.portfolio-col .fund-mark,
.portfolio-lower .fund-mark { height: var(--mark, 32px); }
/* The marks keep their own proportions and share one height. The
   page used to set each one width 104 with an inline height, which
   the max-height then clamped, so six of the eight rendered 35 per
   cent taller than their artwork. Fixed November 9.

   height is the ceiling, not the setting. A fixed height with
   width:auto still loses to the cell's max-width, and the image is
   then squashed sideways rather than scaled: Rock River measured
   123.9px wide where its artwork wants 158.5px at this height, a 22
   per cent horizontal compression on a 1280px window, Mastercraft 11
   per cent. Four equal columns cannot hold Rock River at a full 26px
   box below about 1500px, so the choice is a shorter mark or a
   distorted one. Shorter. Worst distortion across 320px to 1600px is
   now 0.1px. Amanda, November 9. */
.portfolio-col .fund-mark img,
.portfolio-lower .fund-mark img {
  height: auto;
  width: auto;
  max-height: var(--mark, 26px);
  max-width: 100%;
}
/* Clarevia has no managers, so its mark takes the height of the
   whole Idea Fund II stack beside it, faces plus the 6px gap plus
   the mark, and centres on that. Taking only the face height centred
   it on the headshots and left it sitting 16px high. Amanda,
   November 9. */
.portfolio-lower .fund-row--existing .fund-mark {
  height: calc(var(--face, 34px) + 6px + var(--mark, 26px));
}
.fund-row--four { row-gap: 8px; }

/* Fund Focus carries the weight the board asked for. It was 11.48px,
   smaller than every other word on the page. */
/* Built for Ken's 1432x768 less a bookmarks bar, about 734. The
   wordmarks stay at full size, so the height comes from the manager
   circles and these two gaps. Amanda, November 9. */
.segment-title--focus { margin-top: 8px; }

.segment-title--focus { font-size: var(--font-size-portfolio-label); }
/* The fund names take the size of the two running sentences, which
   is Ken's instruction of November 9. The column labels take the
   size of the Fund Focus heading above them, so the heading and the
   labels read as one treatment. Amanda, November 9. */
.focus-row--four dt { font-size: var(--font-size-portfolio-label); }
.focus-row--four dd { font-size: var(--font-size-base); }

/* Ken, November 9, 8:02pm: "change all the bold faced fonts to 10
   point, especially the table on the strategy page and portfolio
   pages."

   The Strategy table was already 9.75 point, headers and cells. The
   Portfolio labels were 10.23, which is over 10 rather than under
   it. The token was 0.88 of the body size; 0.86 of 15.5px is
   13.33px, which is 10.00 point. Every label that reads as one
   treatment moves together, because they all take this token.

   The difference is 0.3px and invisible. It is here so the number
   quoted to Ken is the number on the page. */
:root { --font-size-portfolio-label: calc(var(--font-size-base) * 0.86); }

/* One fund to a line. Ken, November 9: two fund names on one line
   with a dot between them read as one name. The focus section is the
   only place on the site that names all thirteen funds. */
.focus-row--four dd {
  display: block;
  margin: 0;
}
/* No extra lead between fund names. Line height separates them and
   the page has to stay inside Ken's 768. */

/* The last of the vertical budget goes to Fund Focus, which is what
   takes the two blocks to 60/40. */
.portfolio-lead-line--focus { margin-top: 18px; }


/* Placeholder managers. A filled disc at the manager size, so the
   row keeps its shape and the gap reads as pending rather than
   broken. Remove the spans when the photographs go in. */
.person-link--pending {
  display: block;
  background: #D0D5DB;
  border-radius: 50%;
  flex-shrink: 0;
}


/* Fund Focus line breaking. Two rules, both from Amanda on
   November 8:
   a fund's stage numeral never starts a line on its own, so each
   numeral group is glued to the word before it in the markup;
   the separator never starts a line either, so it is glued to the
   fund it follows and the break comes after it. The margin gives
   back the gap the second hard space used to hold. */
.focus-sep { margin-right: 0.18em; }


/* Ken, November 9: the word Strato reads larger than the other
   marks. Amanda, the same evening: Idea Fund and Clarevia read
   larger than Winnow and Gateway.

   Both are the same fault. The marks are two kinds. Five are
   wordmarks, where the letters fill the box. Three carry a symbol,
   where the letters are a fraction of it. Letter height at one 26px
   box, measured off the artwork:

     Mastercraft 26.0   Strato 25.8   Clarevia 22.8
     Idea Fund 22.0     Winnebago 21.0
     Rock River 15.5    Winnow 8.7    Gateway 6.1

   One box height cannot serve both kinds. Gateway would need a
   111px box to reach the top of that list, four times the others,
   on a page with no height to give. So the wordmarks come down to a
   16px letter and the symbol marks come up as far as the page
   allows. Amanda picked a 16px letter over 19 on November 9.

   Rock River does not move. Its width hits the cell before its
   height hits this ceiling, so it draws at 12.8px either way. */
.portfolio-col .fund-mark img.fund-mark--ideafund,
.portfolio-lower .fund-mark img.fund-mark--ideafund  { max-height: calc(var(--mark, 26px) * 0.727); }
.portfolio-col .fund-mark img.fund-mark--winnebago   { max-height: calc(var(--mark, 26px) * 0.762); }
.portfolio-col .fund-mark img.fund-mark--mastercraft { max-height: calc(var(--mark, 26px) * 0.615); }
.portfolio-col .fund-mark img.fund-mark--strato      { max-height: calc(var(--mark, 26px) * 0.470); }
.portfolio-lower .fund-mark img.fund-mark--clarevia  { max-height: calc(var(--mark, 26px) * 0.702); }

/* Winnow comes up to a 10px letter. It is the tallest thing in the
   row, so it sets the band height below and every pixel it gains is
   a pixel on the page: 10px letters fit a 730px window, 11px needs
   740, 16px needs 800. Ken's window is between 701 and 740 and he
   asked for no scrolling. 10 is what fits. */
.portfolio-col .fund-mark img.fund-mark--winnow      { max-height: calc(var(--mark, 26px) * 1.149); }

/* The band the marks centre in. Winnow at a 10px letter is 30px
   tall; the others float centred inside it. */
.portfolio-col .fund-mark { height: 30px; }

/* Rock River is capped on width, not height. Its artwork is the
   widest shape of the eight at 6.1 to 1, against 4.5 for Idea Fund,
   so at a shared letter height it ran the full width of its column
   while every other mark sat between 50 and 76 per cent of theirs.
   Amanda, November 9: it read too big. That is footprint, not
   lettering; its letters are 12.8px, second smallest on the page.

   At 85 per cent it draws 111px against Clarevia's 99 and nothing
   touches a column edge. Its letters come to 10.8px, level with
   Winnow. 76 per cent was the other option on the table and was
   turned down: it matches Clarevia exactly but takes Rock River to
   9.7px, third smallest, for one of the nine funds Ken wants read.

   This costs no page height. The band above is fixed, so the mark
   shrinks inside it. */
.portfolio-col .fund-mark img.fund-mark--rockriver { max-width: 85%; }


/* Amanda, November 9: close the gap under the Home opening line.
   site.css gives it --space-md, 24px, which read as a break between
   the line and the objectives rather than a lead-in. --space-xs is
   12px. Home is the only page with a page-descriptor. */
.page-descriptor { margin-bottom: var(--space-xs); }


/* Every page opens with a hidden h1 carrying its name. On Home,
   Management, Programs and Portfolio the first visible element sat
   tight against it, on Team and Strategy it carried a top margin, so
   those two started 10px lower than the other four. Amanda,
   November 9: one starting line on all six. */
main > h1.label-hidden + * { margin-top: 0; }


/* --- iPhone, November 9 -------------------------------------

   The logo sat 8px above the hamburger. .site-header aligns on
   baseline, so the logo lined up with the navigation text rather
   than with the icon. Centre instead. Measured at 1432 this changes
   nothing, because the logo and the navigation already share a
   centre there. */
.site-header { align-items: center; }

@media screen and (max-width: 47.9375rem) {
  /* All four portfolio sections read the same way on a phone: a rule
     across the column, the title centred on it, the funds centred
     under it. The two lower segments were left aligned against a
     centred state, which is what Amanda saw. */
  .portfolio-col .segment-title,
  .portfolio-lower .segment-title,
  .segment-title--focus { text-align: center; }

  .portfolio-grid .map .segment-title { align-self: stretch; }

  .fund-row--one { justify-items: center; }

  /* main carries a left padding for the desktop column, inside a
     wrapper that already gives 24px each side. On a phone that put
     the whole column 24px right of centre, so everything centred
     inside it was centred on the wrong axis. */
  .page-grid > .main { padding-left: 0; }
  .portfolio-lower .fund-row--followon,
  .portfolio-lower .fund-row--existing { width: 100%; }
}


/* The phone override that used to live here is gone. It made the
   marks aspect-safe below 496px; the main rule now does that at
   every width, so the override had nothing left to change. */


/* --- Portfolio on an iPad held upright -----------------------
   Landscape is handled by the 1092px point above, which hands every
   iPad landscape Ken's approved layout. Portrait is narrower than
   that and was falling all the way to the stacked phone layout: the
   state sat in a 712px wide band holding a 186px map, the two lower
   segments ran full width with one mark each, and the page came to
   1661px in an 1180px window.

   Same shape as the desktop layout, three fund columns instead of
   four. 820x1180 goes from 481px of scroll to none, 834x1194 from
   455 to none, 744x1133 from 760 to 44. Home and Investment Strategy
   gain from the shorter band as well. Nothing at 1092px and above
   moves, so Ken's screen is untouched. Amanda, November 9.

   It sits after the 768px rules on purpose: iPad mini portrait is
   744, inside them, and needs the three column row they take away. */
@media screen and (min-width: 46rem) and (max-width: 68.1875rem) {
  .portfolio-grid { grid-template-columns: 62% 38%; }
  .portfolio-col { padding-right: var(--space-md); }
  .portfolio-grid .map-panel { grid-column: 2; margin-top: 0; }
  .portfolio-grid .map { height: 100%; align-items: stretch; }
  .portfolio-grid .map img {
    width: auto;
    height: auto;
    flex: 1 1 auto;
    align-self: auto;
  }

  .portfolio-lower {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-md);
    row-gap: var(--space-sm);
  }
  .portfolio-lower .segment-title--second { margin-top: 0; }

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

  /* 28vh of artwork is 330px on an iPad and pushed the whole page
     down by it. The band reads the same at 170. */
  .alt-column .art-strip { height: min(28vh, 170px); }
}


/* --- Strategy table, Ken's November 10 markup ------------------
   From `26.11.10 invest segment table kj.docx` and the six points
   in his 7:04am note. Values read out of his file rather than
   guessed from the email, because the two disagree in one place:
   the email says the figures sit ".2 from right side" and the file
   sets a 0.1in right indent with a 0.2in left indent. The file
   wins, since he wrote "see attached".

   His column widths as a share of the table, against what the site
   had: 25.9 / 37.8 / 15.4 / 10.5 / 10.5, from 22.1 / 31.2 / 16.9 /
   15.0 / 15.0. The last two come down 30 per cent, not the 50 the
   email estimates, and Description takes most of what they give up
   so its three rows set to two lines with "Participants" on the
   second. */
.col-segment     { width: 25.9%; }
.col-description { width: 37.8%; }
.col-governance  { width: 15.4%; }
.col-inception   { width: 10.5%; }
.col-current     { width: 10.5%; }

/* Every heading centres. The row headings down the first column
   stay left, which is what his file does: the centring is on the
   header row only.

   site.css right aligns children four and five of every row with
   `tr > *:nth-child(4)`, which outranks `table thead th`. The
   override has to carry a pseudo-class of its own to win, so it
   mirrors the rule it is beating. */
table thead th { text-align: center; }
table thead tr > *:nth-child(4),
table thead tr > *:nth-child(5) { text-align: center; }

/* The two allocation columns right justify, 0.1in off the edge.
   The row heading is the first child, so the figures are children
   four and five.

   Scoped to 48rem and up. Below that site.css turns the table into
   three stacked blocks and pulls those two cells back to the left,
   because a figure sitting beside its own label reads from the left
   like everything else. That rule is `tbody tr > *:nth-child(4)`,
   and `table tbody td:nth-child(4)` outranks it, so without this
   media query the figures stayed right aligned in the stacked view
   while Description and Governance sat left. Amanda caught it in a
   narrow window on November 10. */
@media screen and (min-width: 48rem) {
  table tbody td:nth-child(4),
  table tbody td:nth-child(5) {
    text-align: right;
    padding-right: 0.1in;
  }
}


/* --- The type scale, in points --------------------------------
   Ken, November 10:

     "Next Generation First Time Funds & Fund Focus - most
      important, looks small. Geography, Technology etc. - kinda of
      important same size as most important. Idea Fund I & II,
      Gateway Capital I & II ... - least important, looks to have
      the biggest font size."

   He is right. Measured before this change, his three tiers ran
   10pt, 10pt, 11.63pt, so the least important line on the page was
   the largest and the two tiers above it were the same size as each
   other. The order was inverted.

   It came from two instructions of his on November 9 that were each
   right on their own: the fund lists were set to match the running
   sentences, and the Fund Focus heading was set to match the
   segment titles. Together they put the content above the headings.

   Three tiers, three sizes, in whole points:

     12pt bold  segment titles, Fund Focus, page headings
     11pt bold  Geography, Technology, the column labels
     11pt       fund lists, running sentences, body copy
     10pt       the Strategy table

   Also answers the other half of his note: "I must be able to
   replicate the font sizes and spacing in WORD on a PC." The sizes
   are written here in points, the same unit Word uses, so the
   numbers in this file are the numbers to type into Word. A browser
   treats 1pt as 1.333px at 96dpi, which is what Word assumes too.
   The old 15.5px was 11.63pt, which is why he could not reproduce
   it: nobody types 11.63 into a font size box.

   13pt for the top tier reads better and was measured at 760 for
   Portfolio, which is over his screen. 12 is what fits. */
:root {
  --font-size-base:            11.5pt;
  --font-size-portfolio-label: 12pt;
  --font-size-table:           10pt;
  --font-size-table-head:      10pt;
}

/* Tier one. Has to come after the rule at the top of the Portfolio
   block that ties Fund Focus to the label token, which is now tier
   two. */
.segment-title,
.segment-title--focus,
.doc-heading { font-size: 13pt; }


/* --- "Capital allocation" over both columns -------------------
   Ken, November 10: "good idea. Change to your suggestion, use
   Capital Allocation only once on the table."

   His two instructions could not both hold. At the 10.5 per cent
   column width he asked for, "Capital allocation at inception"
   needs 108px on one line at 10 point and has 63px after padding,
   so it broke over four lines. Widening the columns to 14 per cent
   fixed the heading and pushed Description back to three lines,
   undoing the other thing he asked for. His own file has the same
   problem: his column is 0.94in, about 75px usable at 10 point.

   The phrase moves to a row of its own spanning both columns, with
   "At inception" and "As of 1/1/27" underneath. Same words, his
   exact widths, his two-line descriptions, every heading on one
   line.

   Sentence case, to match his own file and the board copy. His
   email capitalised Allocation; his document does not, and he
   asked for Inception to come down on the same day.

   On a phone site.css hides the whole thead and the data-label on
   each cell carries the heading, so those still read "Capital
   allocation at inception" in full. Nothing to change there. */
.col-allocation { width: 21%; }

/* table-layout is fixed, so the first row sets the column widths.
   The width classes live on that row now, not on the labels. */
thead tr.allocation-group > * {
  border-bottom: none;
  padding-bottom: 2px;
}

/* "At inception" is 74px and the column holds 63px at the table's
   default cell padding. Six pixels a side gives it 83px. */
thead th.col-inception,
thead th.col-current {
  padding-left: 6px;
  padding-right: 6px;
}


/* --- Footer on two lines, and the allocation heading gap -------
   Ken, November 10, in the meeting.

   THE FOOTER. It ran three lines: the audit sentence, then the URL
   on its own line with 507px of empty space after it, then the
   trademark sentence at 603px. 96px short of fitting beside the URL.

   Two separate paragraphs can never be two lines, whatever the type
   size. Each is a block, so the minimum is two lines for the first
   and one for the second. Measured down to 6.5pt and it stays three.
   The trademark sentence has to run on after the URL.

   With that, the notice column needs 1084px to hold both. It had
   986. Widening the column from 80 to 88 per cent does it with the
   type untouched at 9.38pt. The alternative was keeping the column
   and taking the fine print to 8.5pt. The type stays. */
.footer-notice p { display: inline; }
/* A single space ran the trademark sentence straight onto the end
   of the URL. A wider gap separates the two statements without
   adding a word or a mark to legal copy. */
.footer-notice p + p::before { content: ""; display: inline-block; width: 0.6em; }
@media screen and (min-width: 58rem) {
  /* 1fr auto, not a percentage. 88% held two lines at 1280 but
     overflowed by 12px there and 29px at 1133, because the
     tagline cannot shrink past its own longest line. auto gives
     the tagline exactly what it needs and the notice the rest. */
  .site-footer { grid-template-columns: 1fr auto; }
}

/* The last 0.38 of a point is what puts it on two lines at 1280.
   Measured: 9.38pt gives three lines there, 9pt gives two, and
   both give two at 1440. Below 1133 it goes to three, which is
   what a narrower window should do. */
.footer-notice p,
.footer-url { font-size: 9pt; }

/* The tagline keeps its two lines at the narrower 184px. Checked. */

/* THE GAP under "Capital allocation". The spanning row and the
   label row each carried the table's own cell padding, so the two
   heading rows sat further apart than the words needed. */
thead tr.allocation-group > * { padding-bottom: 0; }
thead tr:last-child th { padding-top: 1px; }

/* Strato measured against Mastercraft off the rendered pixels, not
   off the artwork. Ken, November 10: "shrink the Strato logo, it
   should be similar in size to Mastercraft."

   He was right and the earlier number was wrong. The cap height
   table had Mastercraft at the full box, because its icon is taller
   than its lettering and the measurement caught the icon. On screen
   Mastercraft's letters ran 9.8px and Strato's ran 15.0px, so Strato
   read 53 per cent larger with 41 per cent more ink. 0.620 to 0.405
   closes it.

   Measure the ink on the rendered page. Measuring the artwork file
   tells you about the file, not about what a reader sees. */


/* --- Header and footer bars, and the heading leading -----------
   Ken, November 10: reduce the header and footer height by 10 to 15
   per cent, and "Capital Allocation" is still too far from the line
   it sits on top of.

   The bars are 68px and the number is a token, not padding. Changing
   padding or the logo height moved nothing, because --bar-height is
   a min-height on both bars. 59px is 13 per cent off. */
:root { --bar-height: 59px; }

/* The box gap between the two heading rows was already 0. What is
   left is leading: each row carries the table's own line-height, so
   there is half a line of air under "Capital allocation" and half a
   line over "At inception" before either word is reached. Tightening
   the leading on the two heading rows is what closes the space a
   reader sees. */
thead tr.allocation-group > *,
thead tr:last-child th {
  line-height: 1.05;
  vertical-align: bottom;
  padding-top: 0;
}
thead tr.allocation-group > * { padding-bottom: 0; }

/* --- The space under "Capital allocation" ----------------------
   Ken, November 11. The space was the second line of column one.

   Column one's heading needs 2.94in and the column holds 2.15in,
   so it wraps. That made the label row two lines tall. The four
   one-line labels are bottom aligned, so they sat on the second
   line and "Capital allocation" sat a full line above them.

   Column one's heading now spans both heading rows. Bottom
   aligned, its last line lands on the same line as the other
   four, and its first line rises into the space beside "Capital
   allocation", which was empty. All five headings read on one
   line, bottom aligned, and "Capital allocation" sits directly
   over "At inception". His wording does not change.

   The spanning cell takes the same bottom padding as the four
   labels, 1px, and it carries the heavy rule, because its bottom
   edge is now the bottom of the heading band and the rule has to
   run the full width of the table.

   "Capital allocation" gets 4px under it. With no leading to
   speak of at 1.05, the descenders of "allocation" and the cap of
   "At inception" sat on the same pixel.

   Measured at 1280: heading band 44px to 34px, space under
   "Capital allocation" 11px to 1px, all five labels on one
   baseline. Column widths hold at 25.9 / 37.8 / 15.4 / 10.5 /
   10.5. Checked at 1440, 1133, 1092, 834, 768, 740, 402 and in
   print. Under 768 site.css hides the whole heading band and the
   data-label on each cell carries the wording, so nothing there
   changes. */
thead tr.allocation-group > th[rowspan] {
  padding-bottom: 1px;
  border-bottom: var(--border-width-heavy) solid var(--color-ink);
}
thead tr.allocation-group > .col-allocation { padding-bottom: 4px; }

/* vertical-align is the one that matters. The heading cells were
   middle aligned, from when one cell held three lines and another
   held one, so "Capital allocation" sat centred in its row box and
   "At inception" sat centred in its own, with half a row of air
   between them that no padding or leading change could reach.
   Aligning both to the top closes it from 9.8px to 2.8px. */

/* The bars are floored by the logo, not by padding. 68 to 59 needed
   the mark to come from 52 to 48. Both bars are 59px now, 13 per
   cent off, and they match each other. */
.site-header img,
.site-header svg { height: 48px; }


/* Ken, November 10: a small space under the Fund Focus column
   titles. The labels sat directly on the first fund name, so each
   column read as one block of five lines rather than a heading over
   a list. */
.focus-row--four dt { margin-bottom: 4px; }


/* Ken, November 10: move the rule above Fund Focus, to separate it
   from the segments rather than from its own sentence.

   .segment-title draws a rule under every segment heading on the
   page, which is right for the three fund segments. Fund Focus is
   not a fourth segment, it is the block that follows them, so the
   rule belongs over it. 14px above the rule clears the Idea Fund
   mark, 8px below it sets the heading. */
.segment-title--focus {
  border-top: var(--border-width-hairline) solid var(--color-rule-soft);
  border-bottom: 0;
  padding-top: 8px;
  padding-bottom: 0;
  margin-top: 20px;
}

/* Ken, November 10: bring the rule and the heading down, closer to
   the sentence. 20px above the rule clears the Idea Fund mark, and
   the sentence comes up from 18px under the heading to 8, so Fund
   Focus reads with the line it introduces rather than floating
   between the segments and it. */
.portfolio-lead-line--focus { margin-top: 8px; }


/* Ken, November 11: "Headers on the table are different. First
   column header is bottom center. Other four headers are middle
   center. All five headers must be the same, I prefer column one
   bottom center."

   He is right, and it came from the November 10 fix. Top aligning
   the heading cells closed the gap under "Capital allocation", and
   it also dropped the four single line labels to the top of a row
   that column one makes two lines tall. Measured: column one's last
   line sat 14px below the other four.

   Bottom aligning the row puts all five on one line, which is what
   he asked for.

   It costs the other thing he asked for the day before. The gap
   under "Capital allocation" goes from 0 to 11px, because column
   one wraps and the four single line labels now sit on the second
   line of a two line row, leaving the first line blank above them.

   The two cannot both hold while column one wraps. Its header needs
   31.1 per cent of the table on one line and has 25.9. Widening it
   takes 5.2 from Description, which needs 37.8 to keep its three
   rows at two lines with "Participants" on line two. The way out is
   shortening column one's heading, which is copy and his to decide.
   Raised with him rather than chosen here. */