/* Payung Kelabu Ventures
   House palette inherited from Maven (kelabu.css), inverted to a light ground
   because this page is also handed over as an A4 printout. */

:root{
  --ink:#0C0A0A;
  --ink-2:#3A3431;
  /* Maven's own muted grey is #6E6763, but it measures 4.34:1 on --bone-2, which
     fails WCAG AA for normal text in the .band-alt sections. Darkened until it
     passes on every ground actually used here: 5.99:1 on bone, 5.37:1 on bone-2,
     4.57:1 on bone-3. */
  --ink-3:#605954;
  --bone:#F2EFE9;
  --bone-2:#E7E3DB;
  --bone-3:#D8D2C8;
  --volt:#5B5BF0;         /* 4.36:1 on bone. Decoration only, never text. */
  --volt-ink:#3F3FCC;     /* 6.55:1 on bone, 5.87:1 on bone-2: safe for links */

  --font-display:'Newsreader',Georgia,'Times New Roman',serif;
  --font-text:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --gutter:clamp(20px,5vw,48px);
  --measure:1080px;
  --rule:1px solid var(--bone-3);
  color-scheme:light;
}

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

html{
  -webkit-text-size-adjust:100%;
  /* The header is sticky, so every fragment jump and every scroll-into-view on
     focus must reserve its height or the target lands underneath it
     (WCAG 2.2 SC 2.4.11). Taller allowance for phone width, where the nav wraps. */
  scroll-padding-top:clamp(84px,24vw,160px);
}

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--font-text);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--bone);padding:12px 18px;
  font-size:14px;text-decoration:none;
}
.skip:focus{left:8px;top:8px}

a{color:var(--volt-ink)}
a:focus-visible,.brand:focus-visible{
  outline:2px solid var(--volt-ink);outline-offset:3px;border-radius:2px;
}

a.ext{
  color:var(--volt-ink);text-decoration:none;
  border-bottom:1px solid rgba(63,63,204,.32);
  font-weight:500;word-break:break-word;
}
a.ext:hover{border-bottom-color:var(--volt-ink)}

.dim{color:var(--ink-3);font-weight:400}

/* ---------- header ---------- */

.site-head{
  border-bottom:var(--rule);
  background:var(--bone);
  position:sticky;top:0;z-index:20;
}
.head-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;min-height:68px;flex-wrap:wrap;
}
.brand{
  display:flex;align-items:center;gap:12px;
  color:var(--ink);text-decoration:none;
}
.brand-mark{width:30px;height:30px;flex:none;line-height:0}
.brand-mark svg{width:100%;height:100%;display:block}
.brand-text{
  font-family:var(--font-display);
  font-size:19px;font-weight:600;letter-spacing:.005em;line-height:1.15;
}
.brand-sub{
  display:block;font-family:var(--font-text);
  font-size:10px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);
}

.site-nav{display:flex;gap:26px;flex-wrap:wrap}
.site-nav a{
  color:var(--ink-2);text-decoration:none;
  font-size:14px;font-weight:500;letter-spacing:.01em;
  padding:4px 0;border-bottom:1px solid transparent;
}
.site-nav a:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* On a phone the header wraps to two rows and eats ~144px, over a fifth of the
   viewport, for a three-item nav on a page this short. Give the space back. */
@media (max-width:700px){
  .site-head{position:static}
}

/* ---------- hero ---------- */

.hero{padding-block:clamp(60px,10vw,120px) clamp(48px,7vw,84px)}

h1{
  font-family:var(--font-display);
  font-size:clamp(38px,7vw,68px);
  font-weight:500;line-height:1.04;letter-spacing:-.018em;
  margin:0 0 26px;max-width:15ch;
}

.lede{
  font-size:clamp(18px,2.1vw,22px);
  line-height:1.5;max-width:46ch;margin:0 0 34px;color:var(--ink-2);
}

.hero-links{
  margin:0;font-size:15px;display:flex;flex-wrap:wrap;
  align-items:baseline;gap:8px 12px;
}
.hero-links .sep{color:var(--bone-3)}

/* ---------- bands ---------- */

.band{padding-block:clamp(48px,7vw,84px);border-top:var(--rule)}
.band-alt{background:var(--bone-2)}

h2{
  font-family:var(--font-display);
  font-size:clamp(26px,3.4vw,34px);
  font-weight:500;line-height:1.15;letter-spacing:-.012em;margin:0 0 32px;
}

.cols{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 56px}
@media (min-width:860px){
  .cols{grid-template-columns:minmax(200px,1fr) minmax(0,2.3fr)}
  .col-side h2{margin-top:6px;position:sticky;top:96px}
}

.prose p{margin:0 0 20px;max-width:64ch;color:var(--ink-2)}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink);font-weight:600}

/* ---------- what we do ---------- */

/* Four cards. A 2x2 grid divides evenly; auto-fit would strand the fourth
   card beside an empty cell at three columns. */
.grid{
  display:grid;gap:1px;background:var(--bone-3);
  border:var(--rule);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:760px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.card{background:var(--bone);padding:26px 26px 24px}
.card h3{
  font-family:var(--font-display);
  font-size:21px;font-weight:600;line-height:1.2;margin:0 0 12px;
}
.card p{margin:0 0 14px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.card p:last-child{margin-bottom:0}
.card strong{color:var(--ink);font-weight:600}

.shot{margin:34px 0 0;max-width:860px}
.shot img{
  display:block;width:100%;height:auto;
  border:var(--rule);background:var(--ink);
}
.shot figcaption{
  margin-top:10px;font-size:13.5px;line-height:1.55;color:var(--ink-3);
  max-width:62ch;
}

/* ---------- contact ---------- */

.contact{margin:0;display:grid;gap:22px}
.contact dt{
  font-size:11px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:5px;
}
.contact dd{margin:0;font-size:16px}
.contact dd .dim{display:block;font-size:14px;margin-top:5px;max-width:52ch;line-height:1.55}

/* ---------- footer ---------- */

.site-foot{
  border-top:var(--rule);background:var(--bone);
  padding-block:36px 44px;
}
.foot-legal{
  margin:0 0 10px;font-size:13.5px;line-height:1.7;color:var(--ink-2);
}
.foot-legal strong{color:var(--ink);font-weight:600;letter-spacing:.02em}
.foot-note{margin:0;font-size:13px;color:var(--ink-3)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* =======================================================================
   PRINT — A4, 15mm margins, pt sizing, no viewport units, no orphans.
   ======================================================================= */

@page{
  size:A4;
  margin:15mm;
}
@page :first{
  margin-top:12mm;
}

@media print{

  html,body{
    background:#fff!important;
    color:#000!important;
    font-size:10pt;
    line-height:1.45;
  }

  /* Viewport units are undefined in paged media and produce blank sheets. */
  .hero,.band{padding-block:0!important;min-height:0!important}

  .wrap{max-width:none;padding-inline:0}

  .skip,.site-nav{display:none!important}

  .site-head,.site-foot{background:#fff!important}
  .site-head{
    position:static!important;
    border-bottom:1pt solid #000;
    padding-bottom:6pt;margin-bottom:14pt;
  }
  .head-inner{min-height:0}
  .brand-mark{width:13mm;height:13mm}
  .brand-text{font-size:16pt}
  .brand-sub{font-size:7pt;color:#000}

  /* Inline SVG on currentColor would otherwise print as light grey. */
  .brand-mark svg{color:#000!important;fill:#000!important}

  .hero{padding-top:0!important}
  h1{font-size:24pt;margin-bottom:8pt;max-width:none}
  .lede{font-size:11.5pt;margin-bottom:10pt;max-width:none;color:#000}
  .hero-links{font-size:9.5pt}

  h2{font-size:14pt;margin-bottom:6pt}

  /* The whole .card subtree keeps its screen px scale in print unless it is
     restated at matching specificity. A bare `h3` rule loses to `.card h3`
     (0,0,1 vs 0,1,1) and printed the card titles at 15.75pt, larger than the
     14pt section heading above them. Scale the block, not just the heading:
     patching h3 alone would leave it a quarter-point above its own body text. */
  .card h3{font-size:12pt;margin-bottom:4pt}
  .card p{font-size:9.5pt;margin-bottom:5pt}

  .band{border-top:0;margin-top:14pt}
  .band-alt{background:#fff!important}

  .prose p{color:#000;max-width:none}
  .dim,.foot-note,.contact dd .dim{color:#000}

  /* Keep small blocks whole across sheets. Sections are deliberately NOT in
     this list: they are taller than a sheet, and forbidding them to split
     pushes each one onto a fresh page and inflates the page count. */
  .card,.contact > div,.shot,.site-foot{break-inside:avoid;page-break-inside:avoid}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}
  p{orphans:3;widows:3}

  /* Pin the grid for paper. A4 at these 15mm margins gives a 180mm (~680px)
     page box, which sits BELOW the 760px screen breakpoint, so the 2x2 layout
     could never fire in print and the four cards stacked one per row, costing
     an entire extra sheet. Never let a screen breakpoint decide a print
     layout: a page box width is not a viewport width. */
  .grid{
    gap:0;border:1pt solid #000;background:#fff!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .card{background:#fff!important;border-right:.5pt solid #000;border-bottom:.5pt solid #000}
  /* Two columns on paper, so every even card ends a row and the last two end
     the grid. Drop those hairlines so they stop doubling the container border. */
  .card:nth-child(2n){border-right:0}
  .card:nth-last-child(-n+2){border-bottom:0}

  /* No a[href]::after on purpose. Every external link already uses the bare
     address as its own anchor text, so appending attr(href) would only re-print
     the https:// prefix, and it broke mid-word inside the narrow cards. */
  a{color:#000!important;text-decoration:none;border-bottom:0!important}
  a.ext{font-weight:600;overflow-wrap:anywhere}

  /* The Maven screenshot is a dark image. Keep it as evidence, but small, so a
     mono laser does not lay down a full-width block of toner. */
  .shot{margin-top:10pt;max-width:95mm}
  .shot img{border:.5pt solid #000}
  .shot figcaption{font-size:8.5pt;color:#000;margin-top:4pt}

  .site-foot{border-top:1pt solid #000;padding-block:8pt 0;margin-top:14pt}
  .foot-legal{font-size:9pt;color:#000}

  .cols{display:block}
  .col-side h2{position:static!important}
}