/* ============================================================
   OTF — dark cyber-collage layer
   Built to gpt-output/otf-APPROVED-comp.png (Prince, 2026-09-26).
   Loaded AFTER style.css. Only adds the collage treatment: torn
   paper, marker, handwriting, glow and the dark-theme corrections
   the inverted palette alone cannot make.
   ============================================================ */

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

:root{
  --navy-deep:#040c18;
  --navy:#06101f;
  --panel:#0c1a30;
  --panel-2:#0a1628;
  --edge:#1b3358;
  --edge-lit:#2f6bb0;
  --blue:#4da3ff;
  --blue-glow:rgba(77,163,255,.35);
  --yellow:#ffd23f;
  --paper:#f4f1e8;
  --hand:"Caveat", "Segoe Script", cursive;
}

/* ---- page ground: navy with a faint technical grid ---- */
body{
  background-color:var(--navy);
  background-image:
    linear-gradient(rgba(77,163,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77,163,255,.045) 1px, transparent 1px);
  background-size:64px 64px, 64px 64px;
  background-attachment:fixed;
}

/* ---- header: transparent over the hero, glow on hover only ---- */
.site-header{background:transparent; border-bottom:1px solid rgba(77,163,255,.18);}
.site-header .nav a:hover{color:var(--blue); text-shadow:0 0 12px var(--blue-glow);}

/* ---- shared collage primitives ---- */
.torn{position:relative;}
.torn::before,.torn::after{
  content:""; position:absolute; left:0; right:0; height:22px; pointer-events:none;
  background-repeat:repeat-x; background-size:180px 22px;
}
/* a ripped-paper edge drawn as an SVG data URI — no image request, scales cleanly */
.torn--top::before{
  top:-1px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='22' viewBox='0 0 180 22'%3E%3Cpath d='M0 0h180v9l-9 2-8-4-10 5-9-3-11 4-8-5-10 3-9-2-11 5-8-4-10 2-9-3-11 4-8-3-10 3-9-4-10 3-9-2-11 4V0z' fill='%23f4f1e8'/%3E%3C/svg%3E");
}
.torn--bottom::after{
  bottom:-1px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='22' viewBox='0 0 180 22'%3E%3Cpath d='M0 22h180v-9l-9-2-8 4-10-5-9 3-11-4-8 5-10-3-9 2-11-5-8 4-10-2-9 3-11-4-8 3-10-3-9 4-10-3-9 2-11-4v11z' fill='%23f4f1e8'/%3E%3C/svg%3E");
}

/* yellow marker swipe behind a word (named .hl: .mark already belongs to project cards) */
.hl{
  background-image:linear-gradient(104deg, transparent .5%, var(--yellow) .5%, rgba(255,210,63,.85) 96%, transparent 96%);
  background-repeat:no-repeat; background-size:100% 62%; background-position:0 72%;
  color:#06101f; padding:0 .12em;
}
/* hand-drawn underline under a heading */
.underline-mark{position:relative; display:inline-block;}
.underline-mark::after{
  content:""; position:absolute; left:-2%; right:-2%; bottom:-.22em; height:.32em;
  background:var(--yellow); border-radius:60% 40% 55% 45%/100% 100% 60% 60%;
  opacity:.9; z-index:-1;
}
/* handwritten annotation */
.hand{
  font-family:var(--hand); font-weight:700; color:#fff;
  line-height:1.05; letter-spacing:.01em; text-transform:none;
}
.hand--blue{color:var(--blue);}
/* yellow taped note */
.tape{
  font-family:var(--hand); font-weight:700; color:#06101f; background:var(--yellow);
  padding:.45em .8em .55em; display:inline-block; line-height:1.08;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
}
/* stacked micro-caps used in the comp's margins */
.stack-caps{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--blue);
  line-height:1.9; font-weight:700;
}

/* ---- HERO ---- */
.hero{
  position:relative; overflow:hidden; padding-top:24px;
  background-color:var(--navy-deep);
}
.hero__map{
  position:absolute; inset:0 0 auto auto; width:68%; max-width:1100px; height:100%;
  object-fit:cover; object-position:center right; opacity:.55; z-index:0;
  mask-image:linear-gradient(90deg, transparent, #000 22%, #000 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 22%, #000 100%);
}
.hero .container{position:relative; z-index:2;}
.hero-inner{align-items:center; gap:40px;}

/* the headline sits on a torn off-white card, as in the comp */
.hero__card{
  position:relative; background:var(--paper); color:#0b0b0b;
  padding:34px 34px 30px; box-shadow:0 30px 70px rgba(0,0,0,.55);
  clip-path:polygon(0 8px,3% 2px,9% 9px,16% 1px,24% 8px,33% 2px,42% 9px,52% 2px,61% 8px,70% 1px,79% 8px,88% 2px,95% 9px,100% 3px,100% calc(100% - 7px),94% 100%,86% calc(100% - 8px),77% 100%,68% calc(100% - 7px),58% 100%,48% calc(100% - 8px),38% 100%,29% calc(100% - 6px),20% 100%,11% calc(100% - 8px),4% 100%,0 calc(100% - 4px));
}
.hero__card .eyebrow{color:#2560b1;}
.hero__card h1{
  font-size:clamp(34px,4.6vw,58px); line-height:1.02; letter-spacing:-.02em;
  text-transform:uppercase; font-weight:800; color:#0b0b0b; margin:.2em 0 .45em;
}
.hero__card .lede{color:#3a3a3a; font-size:17px;}
.hero__card .hero-note{color:#4a4a4a;}
.hero__card .hero-note a{color:#2560b1;}
.hero__rule{
  margin-top:20px; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:#6b6b6b; display:flex; align-items:center; gap:12px;
}
.hero__rule::after{content:""; flex:1; height:1px; background:#c9c5ba;}

.hero-art{position:relative;}
.hero-art picture{display:block;}
.hero__photo{
  width:100%; height:auto; display:block; filter:grayscale(1) contrast(1.12);
  box-shadow:0 30px 70px rgba(0,0,0,.6);
  clip-path:polygon(2% 1%,12% 6px,23% 0,35% 7px,47% 1px,60% 8px,72% 0,84% 6px,96% 1px,100% 4%,99% 96%,88% 100%,76% 96%,64% 100%,52% 97%,40% 100%,28% 96%,16% 100%,5% 97%,0 94%);
}
.hero__tape{position:absolute; top:-14px; left:-18px; transform:rotate(-7deg); font-size:19px; z-index:3; max-width:190px;}
.hero__hand{position:absolute; top:34px; right:-8px; transform:rotate(7deg); font-size:26px; text-align:right; z-index:3;}
.hero__caps{position:absolute; right:-4px; bottom:22px; text-align:right; z-index:3;}
.hero__mark{position:absolute; left:-26px; bottom:-10px; width:74px; height:22px; background:var(--yellow); transform:rotate(-8deg); z-index:1;}

/* ---- section headings get the marker underline ---- */
.section-title .underline-mark{z-index:1;}

/* ---- fund cards: dark panels with a lit edge ---- */
.grid.cols-4 > *{
  background:var(--panel); border:1px solid var(--edge); border-radius:4px;
  position:relative; overflow:hidden;
}
.grid.cols-4 > *::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, var(--blue), transparent 70%);
}
.grid.cols-4 > *:hover{
  border-color:var(--edge-lit);
  box-shadow:0 0 0 1px rgba(77,163,255,.25), 0 18px 40px rgba(0,0,0,.5);
  transform:translateY(-3px);
}
.card-icon{display:block; width:34px; height:34px; color:var(--blue); margin:14px 0 0; opacity:.9;}
.card-foot-caps{
  margin-top:14px; padding-top:12px; border-top:1px solid var(--edge);
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); line-height:1.7;
}

/* ---- filter bar on dark ---- */
.filters input, .filters select{
  background:var(--panel-2); color:var(--ink); border:1px solid var(--edge);
}
.filters input::placeholder{color:#6f86a8;}
.filters label{color:var(--muted);}

/* ---- process band ---- */
#process{position:relative; overflow:hidden;}
.process__photo{
  position:absolute; right:0; bottom:0; width:24%; max-width:300px; height:auto;
  filter:grayscale(1) contrast(1.1); opacity:.9; z-index:0;
  clip-path:polygon(6% 0,100% 2%,100% 100%,0 100%,2% 12%);
}
#process .container{position:relative; z-index:2;}
#process picture{position:absolute; right:0; bottom:0; width:24%; max-width:300px; line-height:0;}
#process picture .process__photo{position:static; width:100%;}
.process__hand{position:absolute; right:26%; top:34px; transform:rotate(-6deg); font-size:24px; text-align:right; z-index:3;}
.process__tape{position:absolute; right:20%; top:150px; transform:rotate(5deg); font-size:18px; z-index:3; max-width:150px;}

/* ---- impact: torn dark band with a giant number ---- */
#impact{
  background:linear-gradient(180deg, #04101f, #071627);
  margin:0; padding-top:74px; padding-bottom:74px;
}
.impact-lead{font-size:clamp(46px,7vw,86px); font-weight:800; line-height:.92; letter-spacing:-.03em; color:#fff;}

/* ---- transparency bar chart (pure CSS, no image) ---- */
.chart{display:flex; align-items:flex-end; gap:7px; height:150px; margin:8px 0 14px;}
.chart i{
  flex:1; display:block; border-radius:2px 2px 0 0;
  background:linear-gradient(180deg, var(--blue), rgba(77,163,255,.18));
  box-shadow:0 0 14px rgba(77,163,255,.35);
}
.chart-caps{font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--blue); line-height:1.9;}

/* ---- newsletter band on torn paper ---- */
.cta-band{position:relative; background:var(--panel); border-top:1px solid var(--edge);}
.cta-band .hand{font-size:30px;}

/* ---- footer ---- */
.site-footer{background:var(--navy-deep); border-top:1px solid var(--edge);}

/* ---- motion, honestly reduced when asked ---- */
@media (prefers-reduced-motion: reduce){
  .grid.cols-4 > *:hover{transform:none;}
}

/* ---- phones: collage decoration must never cost content ---- */
@media (max-width:900px){
  .hero__map{width:100%; opacity:.34;}
  .hero__hand,.hero__caps,.process__hand,.process__tape{display:none;}
  .process__photo{position:static; width:100%; max-width:none; margin-top:24px; clip-path:none;}
  .hero__tape{top:-10px; left:-6px; font-size:16px;}
}
@media (max-width:620px){
  .hero__card{padding:24px 20px 22px;}
  body{background-size:40px 40px, 40px 40px;}
}

/* ---- corrections after the first render ---- */
/* style.css paints .hero and .page-hero with a light radial gradient using the
   `background` shorthand, which beat our background-color. Repaint them. */
.hero, .page-hero{
  background:radial-gradient(120% 90% at 50% 0%, #0a1a30 0%, #061223 55%, #040c18 100%);
  border-bottom:1px solid var(--edge);
}
/* The OTF mark ships in mid-blue (#317795 avg) — invisible on navy. Render it white,
   which is how the approved comp shows it. The file itself is untouched. */
.site-header .brand img{filter:brightness(0) invert(1); opacity:.95;}
/* --accent is now a bright blue; white text on it fails AA. Put the band on the
   deep panel and keep the blue for the button only. */
.cta-band{background:var(--panel-2); color:var(--ink); border-top:1px solid var(--edge);}
.cta-band h2{color:#fff;}
.cta-band .btn-primary{background:var(--blue); color:#06101f; border-color:var(--blue);}
.cta-band .btn-primary:hover{background:#7cc0ff; border-color:#7cc0ff; color:#06101f;}
.newsletter input{background:var(--panel); border-color:var(--edge); color:var(--ink);}
.newsletter input::placeholder{color:#6f86a8;}
/* keep the stacked caps clear of the photograph */
.hero__caps{bottom:-34px; right:0; text-shadow:0 2px 10px #04101f;}
.hero__hand{text-shadow:0 2px 12px rgba(4,16,31,.9);}
/* primary buttons: blue is light now, so ink text reads better than white */
.btn-primary{color:#06101f;}
.btn-primary:hover{color:#06101f;}

/* impact: the number carries the section, the phrase supports it */
.impact-lead{margin-bottom:6px;}
.impact-lead .impact-sub{
  display:block; font-size:19px; font-weight:600; letter-spacing:.01em;
  color:var(--muted); margin-top:6px; text-transform:none;
}
/* impact stats: figures on the ground, not in heavy boxes */
#impact .grid > *{background:transparent; border:0; border-left:1px solid var(--edge); border-radius:0; padding-left:18px;}
#impact .grid > *::before{display:none;}

/* "New projects": the existing .project .mark block is painted with --accent,
   which is a light blue now — white on it fails AA. Make it a dark lit panel. */
.project .mark{
  background:linear-gradient(135deg, #123c66, #0d2444);
}

.project .mark{color:#eaf2ff; border:1px solid var(--edge); border-bottom:0;}
.project .mark span,.project .mark strong{color:#eaf2ff;}

/* --accent went from a dark blue to a light one, so anything that put WHITE on it
   now fails AA. Flip those to ink-on-blue, which passes comfortably. */
.skip-link{color:#06101f;}
.site-header .btn-primary,.site-header .btn-primary:hover{color:#06101f;}

/* ============================================================
   Interior pages — components used by the generated pages.
   ============================================================ */
.page-hero-inner{padding:64px 0 56px;}
.breadcrumb a{color:var(--blue);}
.breadcrumb span{color:#51678c;}

/* ticked capability lists */
.tick-list{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.tick-list li{position:relative; padding-left:30px; color:var(--ink);}
.tick-list li::before{
  content:""; position:absolute; left:0; top:.42em; width:15px; height:9px;
  border-left:2px solid var(--blue); border-bottom:2px solid var(--blue);
  transform:rotate(-45deg);
}

/* example chips */
.chip-list{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px;}
.chip-list .chip{
  background:var(--panel); border:1px solid var(--edge); color:var(--ink);
  padding:8px 14px; border-radius:2px; font-size:14px;
}

/* document / audit rows */
.doc-list{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.doc-row{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:var(--panel); border:1px solid var(--edge); border-left:2px solid var(--blue);
  padding:16px 20px; transition:border-color .2s, transform .2s;
}
.doc-row:hover{border-color:var(--edge-lit); transform:translateX(3px);}
.doc-row h3{margin:0; font-size:16px;}
.doc-row .rmeta{margin:4px 0 0; font-size:13px; color:var(--muted);}

/* news rows */
.record-list{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.record{
  display:grid; grid-template-columns:170px 1fr auto; gap:20px; align-items:center;
  background:var(--panel); border:1px solid var(--edge); padding:16px 20px;
  transition:border-color .2s, transform .2s;
}
.record:hover{border-color:var(--edge-lit); transform:translateX(3px);}
.record .rdate{font-size:12px; color:var(--muted); line-height:1.6;}
.record .rdate b{display:block; color:var(--blue); font-size:13px; letter-spacing:.04em;}
.record .rbody h3{margin:0; font-size:16px; line-height:1.4;}
.record .rbody h3 a{color:var(--ink); text-decoration:none;}
.record .rbody h3 a:hover{color:var(--blue);}
.btn-sm{padding:8px 14px; font-size:13px;}
.btn-outline{background:transparent; color:var(--blue); border:1px solid var(--edge-lit);}
.btn-outline:hover{background:var(--blue); color:#06101f; border-color:var(--blue);}

/* pull quotes on the about pages */
.big-quote{
  font-size:clamp(19px,2.2vw,25px); line-height:1.45; color:var(--ink); max-width:60ch;
  border-left:3px solid var(--yellow); padding-left:22px; margin:0;
}

/* statistic cards */
.card .stat{
  font-size:clamp(28px,3.2vw,40px); line-height:1; color:var(--blue);
  margin:0 0 10px; letter-spacing:-.02em;
}

/* status line under a fund */
.status-note{
  display:inline-block; background:var(--panel); border:1px solid var(--edge);
  border-left:3px solid var(--yellow); padding:12px 18px; margin:0 0 16px; color:var(--ink);
}

@media (max-width:760px){
  .record{grid-template-columns:1fr; gap:10px;}
  .record .ractions{justify-self:start;}
  .doc-row{flex-direction:column; align-items:flex-start; gap:12px;}
}

/* interior page photograph, alongside the heading */
.page-hero-inner{grid-template-columns:1.15fr .85fr; align-items:center;}
.page-hero-art{line-height:0;}
.page-hero-art img{
  width:100%; height:auto; display:block; filter:grayscale(1) contrast(1.08);
  box-shadow:0 24px 56px rgba(0,0,0,.55);
  clip-path:polygon(2% 1%,14% 5px,27% 0,40% 6px,54% 1px,68% 6px,82% 0,94% 5px,100% 3%,99% 97%,86% 100%,72% 96%,58% 100%,44% 97%,30% 100%,16% 96%,4% 100%,0 95%);
}
@media (max-width:900px){
  .page-hero-inner{grid-template-columns:1fr;}
  .page-hero-art{margin-top:22px;}
  .page-hero-art img{clip-path:none;}
}