/* Seaborne Capital · subpages
   The manifesto article and the fourteen company pages. Same tokens and
   rhythm as the one pager; the film styles are never loaded here. */

body.subpage{background:var(--ink)}
body.subpage main{padding-top:clamp(96px,12vh,150px)}
.navlinks a.is-here{color:var(--lagoon)}

/* ---------- editorial article ---------- */
.article{max-width:calc(820px + 2*var(--gutter));margin:0 auto;
  padding:0 var(--gutter) var(--section-y)}
.article .h1{margin-top:var(--s-4)}
.article .lead{margin-top:var(--s-5)}
.article-body{margin-top:var(--s-7)}
.article-body .body{max-width:64ch;font-size:var(--fs-lead);line-height:1.72;color:var(--mist-72)}
.article-body .body + .body{margin-top:var(--s-5)}
.article-body .draft{color:var(--mist-38);font-style:italic}

.art-img{margin:var(--s-8) auto 0;display:flex;flex-direction:column;align-items:center;text-align:center}
.art-img img{width:min(440px,90%);height:auto;display:block;
  filter:grayscale(1) contrast(1.03);border-radius:2px}
.art-img.wide img{width:100%;filter:none}
.art-img figcaption{font:500 var(--fs-label)/1.6 var(--f-label);letter-spacing:var(--label-track);
  text-transform:uppercase;color:var(--mist-38);margin-top:var(--s-3)}

.pull{font:var(--display-weight) clamp(28px,3.6vw,52px)/1.16 var(--f-display);
  letter-spacing:var(--display-track);color:var(--mist);
  margin:var(--s-9) 0 0;max-width:19ch;
  border-left:1px solid var(--hair);padding-left:clamp(20px,4vw,48px)}
.pull + .article-body{margin-top:var(--s-7)}

.art-end{margin-top:var(--s-9);border-top:1px solid var(--hair);padding-top:var(--s-8)}
.art-end .btns{margin-top:var(--s-6)}

/* ---------- company detail ---------- */
.backline{margin:0 0 var(--s-6)}
.back{font:500 var(--fs-label)/1 var(--f-label);letter-spacing:var(--label-track);
  text-transform:uppercase;color:var(--mist-52);text-decoration:none}
.back:hover{color:var(--lagoon)}
.co-mark{height:40px;display:flex;align-items:center;margin:0 0 var(--s-5)}
.co-mark img{max-height:32px;max-width:200px;filter:brightness(0) invert(1);opacity:.92}

.copage .h1{margin-top:0}
.co-meta{margin-top:var(--s-6)}
.co-meta .ext{color:var(--lagoon);text-decoration:none}
.co-meta .ext:hover{color:var(--mist)}
.co-hero{margin:var(--s-7) 0 0}
.co-hero img{width:100%;height:auto;display:block;border-radius:2px}
.co-hero figcaption{font:500 var(--fs-label)/1.6 var(--f-label);letter-spacing:var(--label-track);
  text-transform:uppercase;color:var(--mist-38);margin-top:var(--s-3)}
.article .backline:last-child{margin:var(--s-8) 0 0}

@media(max-width:640px){
  .pull{padding-left:var(--s-5);max-width:none}
  .art-img img{width:100%}
}

/* company pages: one heading size below the site h1, one body size, done */
.co-title{font-size:var(--fs-h2)}
.sig{font-style:italic;color:var(--mist-52)}

/* company pages: title and lead sit together, the meta row keeps distance */
.co-lead{margin-top:var(--s-3)}
.co-meta{margin-top:var(--s-8)}
/* editorial reveal · real lines, not blocks.
   pages.js measures where the browser actually broke each paragraph and wraps
   every line in its own element, so a line lights up exactly when it scrolls
   in. Only transform, opacity and a short blur animate, and only for the few
   lines currently crossing the fold. */
.flow .ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.flow .lni{display:block;opacity:0;transform:translateY(.85em);filter:blur(5px);
  transition:opacity .55s cubic-bezier(.22,.7,.2,1),
             transform .68s cubic-bezier(.22,.7,.2,1),
             filter .5s ease}
.flow .ln.is-in .lni{opacity:1;transform:none;filter:none}
@media(prefers-reduced-motion:reduce){
  .flow .lni{transition:none;opacity:1;transform:none;filter:none}
}
/* the meta row wraps naturally instead of forcing grid rows */
.co-meta{display:flex;flex-wrap:wrap;gap:var(--s-5) clamp(40px,5vw,72px)}


/* ---------- legal pages ----------
   Plain reading pages. One column, a real measure, and a visible marker on
   every item Seaborne still has to confirm, so nothing unreviewed can go live
   by looking finished. */
/* .page dims everything to the 38% ink and lets each block bring its own
   colour back; a reading page wants the full ink at the root instead */
/* main carries class "legal" too, which the FOOTER's .legal rule styles as a
   letterspaced mono strip - undo the inherited traits, but leave the subpage
   top padding alone or the headline slides under the fixed nav */
.page.legal{color:var(--mist);font-family:var(--f-body);font-size:var(--fs-body);
  letter-spacing:normal;max-width:none;margin:0;display:block;border-top:none}
.page.legal .inner{max-width:72ch}
/* main already carries the top offset, so the first block does not add its own */
.page.legal .block{padding-top:0}
.page.legal .h1{margin-bottom:var(--s-4)}
/* the date line is a note, not an opening claim */
.page.legal .lead{font-size:13px;color:var(--mist-52);letter-spacing:.02em;margin-bottom:var(--s-8)}
/* long numbered documents need real subheads, not micro-labels */
.page.legal h3{font-family:var(--f-body);font-size:18px;font-weight:700;letter-spacing:0;
  text-transform:none;color:var(--mist);margin:var(--s-8) 0 var(--s-3);line-height:1.3}
.page.legal p{margin:0 0 var(--s-4);color:rgba(234,240,245,.85);font-size:16px;line-height:1.7}
.page.legal p strong{color:var(--mist);font-weight:600}
.page.legal ul{list-style:disc;margin:0 0 var(--s-4);padding-left:1.2em;color:rgba(234,240,245,.85);font-size:16px;line-height:1.7}
.page.legal li{list-style:disc;margin-bottom:6px;padding-left:.2em}
.page.legal li::marker{color:var(--mist-52)}
.page.legal .cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7)}
.page.legal .cols h3{margin-top:0}
.page.legal a{color:var(--lagoon)}
/* a button is not body copy: it keeps the colour its own class gives it,
   or it ends up teal on teal */
.page.legal a.btn.primary{color:var(--ink)}
.page.legal a.btn.ghost{color:var(--mist)}
.review{display:inline-block;font-family:var(--f-label);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:#E0A252;border:1px solid rgba(224,162,82,.5);border-radius:3px;padding:2px 6px;margin-left:8px;vertical-align:middle}
@media(max-width:720px){.page.legal .cols{grid-template-columns:1fr}}


/* ---------- v14 · about ----------
   One reading column, four chapters, each opened by a hairline. */
.about .article > .manilink{margin-top:var(--s-6)}
.ab-sec{margin-top:var(--s-10);padding-top:var(--s-8);border-top:1px solid var(--hair);
  scroll-margin-top:72px}
.ab-sec .h2{margin:0}
.ab-sec .art-img{margin-top:var(--s-7)}
.ab-sec .pull{margin-top:var(--s-8)}
/* paragraphs read as paragraphs: a full line of air between them */
.article-body .body + .body{margin-top:1.15em}
.article-body .sig{margin-top:var(--s-6)}
.ab-principles{grid-template-columns:repeat(2,1fr);gap:var(--s-8) clamp(32px,4vw,60px)}
.ab-principles .body{color:var(--mist-72);line-height:1.66}
@media(max-width:820px){.ab-principles{grid-template-columns:1fr;gap:var(--s-7)}}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-8) clamp(24px,3vw,44px);
  margin-top:var(--s-8)}
@media(max-width:860px){.tgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tgrid{grid-template-columns:1fr;gap:var(--s-7)}}
.tface{width:76px;height:76px;border-radius:50%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.03);opacity:.92;margin-bottom:var(--s-5)}
.tname{font-size:17px;font-weight:600;color:var(--mist)}
.trole{font-family:var(--f-label);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lagoon);margin-top:6px}
.tbio{margin-top:var(--s-4);font-size:15px;line-height:1.62;color:var(--mist-72)}
.tbio.is-pending{color:var(--mist-38);font-style:italic}
.tbio .review{font-style:normal}
@media(max-width:560px){
  .tcard{display:grid;grid-template-columns:64px 1fr;column-gap:var(--s-5)}
  .tface{width:64px;height:64px;margin:0;grid-row:1 / span 3}
  .tbio{grid-column:1 / -1}
}

/* ---------- v14 · portfolio ----------
   Two entities, one grid. The entity is written on the card in plain words
   and the tabs filter by it: no colour key to learn. */
.pfpage{max-width:calc(var(--maxw) + 2*var(--gutter));margin:0 auto;
  padding:0 var(--gutter) var(--section-y)}
.pf-intro .h1{margin-top:var(--s-4)}
.pf-intro .lead{margin-top:var(--s-5)}
.pf-intro .lead b{color:var(--mist);font-weight:600}
.pf-ways{display:grid;grid-template-columns:1fr 1fr;margin-top:var(--s-9);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.way{padding:var(--s-7) var(--s-7) var(--s-7) 0}
.way + .way{border-left:1px solid var(--hair);padding-left:var(--s-7)}
.way .label{margin:0}
.way-t{font-family:var(--f-display);font-weight:var(--display-weight);letter-spacing:var(--display-track);
  font-size:calc(clamp(22px,2.4vw,32px) * var(--display-scale));line-height:1.15;margin-top:var(--s-3)}
.way .manilink{margin-top:var(--s-6)}
@media(max-width:720px){
  .pf-ways{grid-template-columns:1fr}
  .way{padding:var(--s-6) 0}
  .way + .way{border-left:none;border-top:1px solid var(--hair);padding-left:0}
}
.pf-list{margin-top:var(--s-10);scroll-margin-top:72px}
.pf-bar{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-5) var(--s-6);flex-wrap:wrap}
.pf-tabs{display:flex;gap:8px;flex-wrap:wrap}
.pf-tab{-webkit-appearance:none;appearance:none;background:none;cursor:pointer;
  font-family:var(--f-label);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mist-72);border:1px solid rgba(234,240,245,.18);padding:11px 16px;
  transition:color .25s ease,border-color .25s ease,background .25s ease}
.pf-tab:hover{color:var(--mist);border-color:rgba(234,240,245,.4)}
.pf-tab.is-on{color:var(--ink);background:var(--lagoon);border-color:var(--lagoon)}
.pf-tab .n{opacity:.6;margin-left:6px}
@media(max-width:720px){
  .pf-tab{padding:10px 12px;font-size:9.5px}
}
.pf-funds{margin-top:var(--s-10)}
.pf-funds .lead{margin-top:0}
.fundgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);
  border:1px solid var(--hair);margin-top:var(--s-7)}
@media(max-width:900px){.fundgrid{grid-template-columns:repeat(2,1fr)}}
.fund{background:var(--ink);display:flex;justify-content:space-between;align-items:center;
  padding:clamp(24px,3.4vh,36px) clamp(18px,2vw,28px);color:var(--mist);text-decoration:none;
  transition:background .3s ease}
.fund .fn{font-family:var(--f-display);font-weight:var(--display-weight);letter-spacing:var(--display-track);
  font-size:calc(clamp(18px,1.8vw,24px) * var(--display-scale))}
.fund .fa{color:var(--lagoon);transition:transform .3s ease}
.fund:hover{background:#010206}
.fund:hover .fa{transform:translate(3px,-3px)}
.ab-sec .article-body{margin-top:var(--s-6)}
@media(max-width:720px){
  .ab-sec{margin-top:var(--s-8);padding-top:var(--s-7)}
  .pf-list,.pf-funds{margin-top:var(--s-9)}
  .about .art-end .btns{flex-wrap:wrap}
  .about .art-end .btns .btn{flex:1 1 100%}
}
.way .btns{margin-top:var(--s-6)}
.about .article > .btns{margin-top:var(--s-6)}



/* ---------- v14.4 · calmer subpages ----------
   No rules around blocks: space does the separating. */
.pf-ways{border:none;gap:var(--s-7) clamp(40px,6vw,96px);margin-top:var(--s-8)}
.way,.way + .way{padding:0;border:none}
@media(max-width:720px){.way + .way{border:none;padding:0}}

/* segmented control in the button grammar: square, one hairline, the
   active segment filled lagoon and the marker slides between them */
.seg{position:relative;display:inline-flex;padding:4px;border:1px solid rgba(234,240,245,.16);
  background:rgba(5,7,11,.5)}
.seg-ind{position:absolute;top:4px;bottom:4px;left:0;width:0;background:var(--lagoon);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),width .45s cubic-bezier(.2,.7,.2,1)}
.seg-b{position:relative;z-index:1;-webkit-appearance:none;appearance:none;background:none;border:0;
  cursor:pointer;font-family:var(--f-body);font-weight:700;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mist-72);padding:0 18px;height:40px;white-space:nowrap;
  transition:color .3s ease}
.seg-b:hover{color:var(--mist)}
.seg-b.is-on{color:var(--ink)}
.seg-b .n{opacity:.55;margin-left:4px;font-weight:500}
.seg-b .sh{display:none}
@media(max-width:720px){
  .pf-bar{flex-direction:column;align-items:stretch}
  .seg{display:flex}
  .seg-b{flex:1 1 0;padding:0 6px;font-size:10.5px;letter-spacing:.06em}
  .seg-b .lg{display:none}.seg-b .sh{display:inline}
}


/* closing block on the subpages: full width, the home's line field behind it */
.pfpage,.article{padding-bottom:0}
.endcta{margin-top:var(--s-9)}
.endcta .inner{max-width:var(--maxw)}
.endcta .h1{max-width:18ch}
.endcta .btns{margin-top:var(--s-7)}

/* about: no rules between chapters, no rule beside the quote */
.ab-sec{border-top:none;padding-top:0}
.pull{border-left:none;padding-left:0;max-width:22ch}
.art-img.wide-crop{align-items:stretch;text-align:left}
.art-img.wide-crop img{width:100%;aspect-ratio:21/9;height:auto;object-fit:cover;object-position:50% 28%}
.art-img.wide-crop figcaption{text-align:left}
/* team without bios: face, name, role */
.tgrid{row-gap:var(--s-7)}
@media(max-width:720px){
  .endcta .btns{flex-wrap:wrap;gap:12px}
  .endcta .btns .btn{flex:1 1 100%;justify-content:center}
}
/* funds: the same tiles as the companies, shorter, logo only */
.fundgrid2{margin-top:var(--s-7)}
.fundgrid2 .lgc{aspect-ratio:2.2/1}
@media(max-width:720px){.fundgrid2 .lgc{aspect-ratio:1.6/1}}


/* portfolio head: one ink for the lead, the two entities as quiet columns
   side by side, each with a text link instead of a button */
.pf-intro .lead b{color:inherit;font-weight:600}
html body .pf-ways{display:grid;grid-template-columns:repeat(2,minmax(0,380px));gap:var(--s-7) clamp(48px,6vw,96px)}
.way .way-t{margin-top:var(--s-3)}
.tlink{display:inline-flex;align-items:center;gap:10px;margin-top:var(--s-5);
  font-family:var(--f-body);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mist-72);transition:color .25s ease}
.tlink .ta{color:var(--lagoon);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.tlink:hover{color:var(--mist)}
.tlink:hover .ta{transform:translateX(4px)}
.tlink[target] .ta{transform:none}
.tlink[target]:hover .ta{transform:translate(3px,-3px)}
@media(max-width:720px){html body .pf-ways{grid-template-columns:1fr}}

/* about team: each partner links to LinkedIn */
a.tcard{display:block;color:inherit;text-decoration:none}
a.tcard .tface{transition:filter .4s ease,opacity .4s ease}
a.tcard .tname{transition:color .25s ease}
.tli{display:inline-block;margin-top:10px;font-family:var(--f-label);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lagoon);opacity:0;transform:translateY(4px);
  transition:opacity .3s ease,transform .3s ease}
a.tcard:hover .tname{color:var(--lagoon)}
a.tcard:hover .tface{filter:grayscale(0);opacity:1}
a.tcard:hover .tli{opacity:1;transform:none}
@media(hover:none){.tli{opacity:.8;transform:none}}
.art-img.wide-crop img{aspect-ratio:2/1;object-position:50% 30%;filter:grayscale(1)}
/* about team on a phone: two columns, face above the name, like the home teaser */
@media(max-width:720px){
  .tgrid{grid-template-columns:1fr 1fr;gap:var(--s-7) var(--s-5)}
  a.tcard,.tcard{display:block}
  .tface{width:64px;height:64px;margin:0 0 var(--s-4)}
  .tname{font-size:16px;white-space:nowrap}
}

/* v14.19 · lines arrive like every other block (see style.css, --in-*) */
.flow .ln{overflow:visible;padding-bottom:0;margin-bottom:0}
.flow .lni{opacity:0;transform:translate3d(0,var(--in-y),0);filter:none;
  transition:opacity var(--in-dur) var(--in-fade),transform var(--in-dur) var(--in-ease)}
.flow .ln.is-in .lni{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.flow .lni{opacity:1;transform:none;transition:none}}
/* About, How we invest (V1 copy): principles read as rows in the article
   column, title left and text right; "How we help" carries its three cases */
html body.about .ab-principles{grid-template-columns:1fr;gap:var(--s-8)}
html body.about .ab-principles .pillar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:clamp(32px,4vw,60px);align-items:start}
html body.about .ab-principles .pillar > *{grid-column:2}
html body.about .ab-principles .pillar > .h3{grid-column:1;grid-row:1 / span 2;margin:0}
.ab-cases{margin-top:var(--s-6);display:grid;gap:var(--s-5)}
.ab-case{padding-left:var(--s-5);border-left:1px solid var(--hair)}
.ab-case-t{font:600 var(--fs-body)/1.4 var(--f-display);color:var(--mist);margin:0 0 .35em}
.ab-case .body{font-size:var(--fs-body)}
@media(max-width:820px){
  html body.about .ab-principles .pillar{grid-template-columns:1fr}
  html body.about .ab-principles .pillar > *,html body.about .ab-principles .pillar > .h3{grid-column:1;grid-row:auto}
  html body.about .ab-principles .pillar > .h3{margin-bottom:var(--s-3)}
}
/* About: the closing sits in the same 820px reading column as the article */
html body.about .endcta .inner{max-width:820px}