/* THEME — PAPER
   Light, editorial, printed. The chosen headshot is black and white on a pale
   grey ground, so on bone it reads as if it were printed there rather than
   placed on top: no border, no shadow, no treatment. A serif carries the
   display and a monospace carries the furniture, which is how a printed
   document distinguishes what is said from what is filed. */

:root{
  --bone:#EAE6DC; --paper:#F7F4EC; --ink:#15171A; --soft:#4C5357;
  --dim:#7E858A; --hair:rgba(21,23,26,.15); --rule:rgba(21,23,26,.5);
  --accent:#7A4A16;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",ui-sans-serif,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --t-name: clamp(2.75rem, 7vw, 6rem);
  --t-h2:   clamp(1.5rem, 2.6vw, 2.25rem);
  --t-h3:   clamp(1.1875rem, 1.6vw, 1.4375rem);
  --t-lead: clamp(1.125rem, 1rem + .55vw, 1.4375rem);
  --t-body: .9375rem;
  --t-mono: .6875rem;
  --t-sm:   .8125rem;

  --safe: clamp(1.1rem, 4vw, 3.5rem);
  --col:  76rem;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bone); color:var(--ink);
  font:400 var(--t-body)/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
h1,h2,h3{ margin:0; font-family:var(--serif); font-weight:400;
          font-optical-sizing:auto; letter-spacing:-.014em; }
a{ color:var(--ink); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.mono{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.16em;
       text-transform:uppercase; color:var(--dim); }
.wrap{ max-width:var(--col); margin:0 auto; padding-inline:var(--safe); }

/* --- bar ----------------------------------------------------------------- */
.bar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem var(--safe);
  background:color-mix(in srgb, var(--bone) 92%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--hair);
}
.bar__name{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.22em;
            text-transform:uppercase; color:var(--ink); text-decoration:none; }
.bar nav{ display:flex; flex-wrap:wrap; gap:clamp(.8rem,2.2vw,1.9rem); }
.bar nav a{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.14em;
            text-transform:uppercase; color:var(--soft); text-decoration:none; padding:.35rem 0; }
.bar nav a:hover{ color:var(--ink); }

/* --- masthead ------------------------------------------------------------ */
.mast{ padding:clamp(2.4rem,6vh,4.5rem) 0 0; }
.mast .mono{ display:block; margin-bottom:1rem; color:var(--accent); }
.mast h1{ font-size:var(--t-name); line-height:.95; max-width:12ch; }
/* A thick rule under the name and a hairline everywhere else: the masthead is
   the only place on the page that is allowed to shout, and it shouts in a
   rule rather than in type. */
.mast__rule{ height:2px; background:var(--ink); margin:clamp(1.5rem,4vh,2.4rem) 0 0; }

.intro{ display:grid; gap:clamp(1.4rem,4vw,3rem); grid-template-columns:1fr;
        padding:clamp(1.6rem,4vh,2.6rem) 0 clamp(2rem,6vh,3.6rem); }
@media(min-width:56rem){ .intro{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:start; } }
.intro figure{ margin:0; }
.intro figure img{ width:100%; aspect-ratio:3/4; object-fit:cover; object-position:50% 28%; }
.intro figcaption{ margin-top:.55rem; font-family:var(--mono); font-size:var(--t-mono);
                   letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.lead{ margin:0 0 1.4rem; font-family:var(--serif); font-size:var(--t-lead);
       line-height:1.42; max-width:38ch; }
.meta{ margin:0 0 1.6rem; display:grid; gap:.1rem .9rem; grid-template-columns:auto 1fr;
       max-width:34rem; }
.meta dt{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.14em;
          text-transform:uppercase; color:var(--dim); padding-top:.28rem; }
.meta dd{ margin:0 0 .5rem; font-size:var(--t-sm); color:var(--soft); }
.meta dd a{ color:var(--accent); text-decoration-color:var(--hair); text-underline-offset:.25em; }

.acts{ display:flex; flex-wrap:wrap; gap:.6rem; }
.btn{ display:inline-block; padding:.75rem 1.3rem; font-family:var(--mono);
      font-size:var(--t-mono); letter-spacing:.18em; text-transform:uppercase;
      text-decoration:none; border:1px solid var(--ink); background:var(--ink);
      color:var(--paper); transition:.18s; }
.btn:hover{ background:transparent; color:var(--ink); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--hair); }
.btn--ghost:hover{ background:transparent; border-color:var(--ink); }

/* --- coverage ------------------------------------------------------------ */
.strip{ padding:0 0 clamp(2rem,5vh,3rem); }
.strip .mono{ display:block; margin-bottom:1rem; }
.logos{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
        align-items:center; gap:clamp(1.3rem,4vw,3rem); }
.logos a{ display:block; line-height:0; }
.logos img{ height:24px; width:auto; max-width:120px; object-fit:contain;
            filter:grayscale(1) opacity(.5); transition:filter .18s; }
.logos a:hover img{ filter:grayscale(1) opacity(1); }

/* --- sections ------------------------------------------------------------ */
.sec{ padding:clamp(2.6rem,7vh,4.5rem) 0; border-top:1px solid var(--hair); }
.sec__head{ display:flex; align-items:baseline; justify-content:space-between;
            gap:1rem; margin-bottom:clamp(1.5rem,4vh,2.4rem); }
.sec__head h2{ font-size:var(--t-h2); }

/* The movements are the densest reading on the page, roughly 130 words each.
   Set in three narrow columns they were a wall: a long paragraph in a short
   measure is the one shape a reader abandons. They are rows now, label beside
   prose, with the prose held to a real measure so the section can be READ to
   the end rather than scanned and skipped. */
.arc{ display:grid; grid-template-columns:1fr; }
.arc > div{ display:grid; gap:.35rem 0; grid-template-columns:1fr;
            padding:clamp(1.3rem,3vh,2rem) 0; border-top:1px solid var(--hair); }
.arc > div:first-child{ border-top:2px solid var(--ink); }
@media(min-width:56rem){
  /* Row 1 auto, row 2 takes the slack, so the title sits directly under its
     date instead of floating to the middle of a cell stretched by the prose
     beside it. */
  .arc > div{ grid-template-columns:minmax(0,4fr) minmax(0,8fr);
              grid-template-rows:auto 1fr; column-gap:clamp(2rem,5vw,4rem); }
  .arc dt{ grid-column:1; grid-row:1; }
  .arc h3{ grid-column:1; grid-row:2; align-self:start; }
  .arc p{ grid-column:2; grid-row:1 / span 2; }
}
.arc dt{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.14em;
         text-transform:uppercase; color:var(--dim); }
.arc h3{ font-size:var(--t-h3); margin-bottom:.4rem; }
.arc p{ margin:0; color:var(--soft); font-size:var(--t-body); line-height:1.75;
        max-width:66ch; }

.vent{ list-style:none; margin:0; padding:0; }
.vent > li{ display:grid; gap:.3rem 2rem; grid-template-columns:1fr;
            padding:1.3rem 0; border-top:1px solid var(--hair); }
@media(min-width:56rem){
  .vent > li{ grid-template-columns:minmax(0,3fr) minmax(0,7fr) minmax(0,3fr); align-items:baseline; }
}
.vent > li:last-child{ border-bottom:1px solid var(--hair); }
.vent h3{ font-size:var(--t-h3); }
.vent p{ margin:0; color:var(--soft); font-size:var(--t-sm); line-height:1.75; max-width:62ch; }
.vent p a{ color:var(--accent); text-decoration-color:var(--hair); text-underline-offset:.25em; }
.vent .role{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.12em;
             text-transform:uppercase; color:var(--dim); }

.facts{ list-style:none; margin:0; padding:0; }
.facts > li{ position:relative; padding:0 0 .9em 1.2em; max-width:66ch;
             color:var(--soft); font-size:var(--t-sm); line-height:1.75; }
.facts > li::before{ content:""; position:absolute; left:0; top:.8em;
                     width:8px; height:1px; background:var(--accent); }
.facts > li:last-child{ padding-bottom:0; }
.facts--two{ display:grid; gap:0 clamp(1.5rem,4vw,3.5rem); grid-template-columns:1fr; }
@media(min-width:54rem){ .facts--two{ grid-template-columns:1fr 1fr; } }

.press{ list-style:none; margin:0; padding:0; }
.press > li{ display:grid; gap:.3rem 1.6rem; grid-template-columns:1fr;
             padding:1rem 0; border-top:1px solid var(--hair); }
@media(min-width:56rem){
  .press > li{ grid-template-columns:minmax(0,1fr) 7rem 5.5rem; align-items:center; }
}
.press > li:last-child{ border-bottom:1px solid var(--hair); }
.press a{ font-family:var(--serif); font-size:1.125rem; color:var(--ink);
          text-decoration:none; }
.press a:hover{ color:var(--accent); text-decoration:underline; text-underline-offset:.28em; }
.press .src img{ height:24px; width:88px; object-fit:contain; object-position:left center;
                 filter:grayscale(1) opacity(.5); }
.press .kind{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.12em;
              text-transform:uppercase; color:var(--dim); }

/* --- foot ---------------------------------------------------------------- */
.foot{ border-top:2px solid var(--ink); padding:2.2rem 0 3.4rem; }
.foot__row{ display:flex; flex-wrap:wrap; justify-content:space-between;
            gap:1.2rem; align-items:baseline; }
.mailto{ font-family:var(--serif); font-size:clamp(1.5rem,3.2vw,2.5rem);
         color:var(--ink); text-decoration:none; }
.mailto:hover{ color:var(--accent); }
.social{ list-style:none; margin:1.2rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:1.4rem; }
.social a{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.14em;
           text-transform:uppercase; color:var(--dim); text-decoration:none; }
.social a:hover{ color:var(--ink); }

/* The page should END, not run out. A rule, a last line, and the contact. */
.close{ padding:clamp(2.4rem,6vh,3.6rem) 0 0; border-top:1px solid var(--hair); }
.close p{ margin:0 auto; max-width:46ch; text-align:center; font-family:var(--serif);
          font-size:clamp(1.1875rem,1.6vw,1.5rem); line-height:1.45; color:var(--ink); }
.close .mono{ display:block; text-align:center; margin-bottom:1rem; }

/* --- parallax bands ------------------------------------------------------
   Two full-bleed frames break the page up: one after the coverage strip, one
   after the ventures list, which is where the reading gets heaviest. They sit
   OUTSIDE .wrap rather than using a 100vw break-out, because 100vw includes
   the scrollbar and buys a horizontal scroll on every desktop that shows one.

   The parallax is a fixed background, and it is switched on only where a
   fixed background actually works. iOS Safari does not honour
   background-attachment:fixed; pointer:coarse is the closest honest proxy for
   that, so touch gets a clean static band instead of a broken one.
   ------------------------------------------------------------------------ */
.band{
  min-height:clamp(16rem, 44vh, 28rem);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center 32%;
  border-block:1px solid var(--hair);
}
.band--denim{
  background-image:url("/assets/band_denim.jpg");
  background-image:image-set(url("/assets/band_denim.jpg") 1x,
                             url("/assets/band_denim@2x.jpg") 2x);
}
.band--warm{
  background-image:url("/assets/band_warm.jpg");
  background-image:image-set(url("/assets/band_warm.jpg") 1x,
                             url("/assets/band_warm@2x.jpg") 2x);
}

@media (hover:hover) and (pointer:fine){
  .band{ background-attachment:fixed; }
}
@media (prefers-reduced-motion:reduce){
  .band{ background-attachment:scroll; }
}

.copy{ margin:1.2rem 0 0; font-family:var(--mono); font-size:var(--t-mono);
       letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }

/* --- at a glance ---------------------------------------------------------
   The four things a senior investment committee actually reads for: capital
   formation, institutional relationships, regulatory exposure and
   portfolio-level influence. Set as furniture, not as a pitch: the page still
   OPENS on the sentence, never on the data.
   ------------------------------------------------------------------------ */
.figures{ padding:0 0 clamp(2rem,5vh,3rem); }
.figures dl{ margin:0; display:grid; gap:1px; background:var(--hair);
             grid-template-columns:repeat(2,1fr); border:1px solid var(--hair); }
@media(min-width:56rem){ .figures dl{ grid-template-columns:repeat(4,1fr); } }
.figures dl > div{ background:var(--bone); padding:1rem 1.1rem 1.15rem; }
.figures dt{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.16em;
             text-transform:uppercase; color:var(--dim); margin-bottom:.45rem; }
.figures dd{ margin:0; font-family:var(--serif); font-size:clamp(1.5rem,2.6vw,2rem);
             line-height:1; color:var(--ink); }
.figures .figures__sub{ margin-top:.45rem; font-family:var(--sans);
                        font-size:var(--t-sm); line-height:1.5; color:var(--soft); }

/* --- origin, prose beside a short aside ---------------------------------- */
.two{ display:grid; gap:clamp(1.4rem,4vw,3.5rem); grid-template-columns:1fr; }
@media(min-width:56rem){ .two{ grid-template-columns:minmax(0,8fr) minmax(0,4fr); } }
.two__prose p{ margin:0 0 1.1em; max-width:66ch; color:var(--soft);
               font-size:var(--t-body); line-height:1.75; }
.two__prose p:first-child{ color:var(--ink); }
.two__aside{ padding-top:.4rem; }
.two__aside .mono{ display:block; margin-bottom:.8rem; }
.facts--tight > li{ font-size:var(--t-sm); }
.facts b{ font-weight:500; color:var(--ink); }

/* The skip link came across with the markup but not with a rule, so it was
   rendering as visible text above the masthead. Off-screen until focused. */
.skip{ position:absolute; left:-9999px; top:0; z-index:50;
       background:var(--ink); color:var(--paper); padding:10px 16px;
       font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.14em;
       text-transform:uppercase; text-decoration:none; }
.skip:focus{ left:8px; top:8px; }