/* Marji Ventures — style B (clean white minimal), approved by Raed 2026-11-13. v1 styling backed up in styles.v1.css. Layout identical to v1. */
@font-face{font-family:"Inter";src:url(/assets/fonts/inter.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/jetbrains-mono.woff2) format("woff2");font-weight:400 600;font-display:swap}
:root{--paper:#ffffff;--ink:#0a0a0a;--forest:#0a0a0a;--acid:#0a0a0a;--muted:#6b6b6b;--line:#ebebeb;--soft:#6b6b6b;--tint:#fafafa;
--head:"Inter",system-ui,sans-serif;--body:"Inter",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;--side:48px}
/* layout (unchanged from v1) */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--body);-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--forest);outline-offset:3px}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,dl,dd,ul{margin:0}
ul{padding:0;list-style:none}
h1,h2,h3{font-family:var(--head);font-weight:500;text-wrap:balance}
em{font-style:normal}
.wrap{width:min(1240px,100%);margin:0 auto;padding-left:var(--side);padding-right:var(--side)}
.skip{position:absolute;left:-999px;top:8px;background:var(--forest);color:var(--paper);padding:8px 12px;z-index:9}
.skip:focus{left:8px}

/* label: mono uppercase, forest prefix */
.lab{font:500 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.065em;color:var(--muted)}
.lab b{font-weight:500;color:var(--forest);margin-right:10px}

/* header: compact, unboxed nav */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:22px;padding-bottom:22px}
.brand{display:flex;gap:10px;align-items:center;font:600 18px var(--head);letter-spacing:-.03em;text-decoration:none;min-height:44px}
.brand img{width:33px;height:33px}
.top nav{display:flex;gap:28px}
.top nav a{font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.065em;text-decoration:none;padding:16px 0}
.top nav a:hover{text-decoration:underline}

/* hero: big statement, lopsided first line */
.hero{padding-top:56px;padding-bottom:56px}
.hero .lab{margin-bottom:28px}
.hero h1{font-size:clamp(46px,7.4vw,104px);line-height:1;letter-spacing:-.065em;max-width:15ch}
.hero h1 .indent{display:inline-block;margin-left:25%}
.hero h1 em{white-space:nowrap}
.hero h1 em,.band h2 em{background:var(--acid);color:var(--ink);padding:0 .12em .04em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero-foot{display:grid;grid-template-columns:1.35fr .8fr;gap:72px;margin-top:56px;padding-top:20px;border-top:1px solid var(--ink)}
.lede{font-size:clamp(18px,1.6vw,21px);line-height:1.45;max-width:36em;text-wrap:pretty}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.facts div{border-left:1px solid var(--line);padding-left:14px}
.facts dt{font:500 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.065em;color:var(--muted)}
.facts dd{font:500 42px/1 var(--head);letter-spacing:-.05em;color:var(--forest);margin-top:8px}

/* chapters: full-width hairline rule, label + title + note */
.chapter,.subchapter{display:grid;grid-template-columns:150px 1fr;gap:12px 24px;align-items:baseline;border-top:1px solid var(--ink);padding-top:18px;margin-bottom:32px}
.chapter h2{font-size:clamp(30px,3.3vw,42px);line-height:1.14;letter-spacing:-.05em}
.chapter-note{grid-column:2;color:var(--muted);max-width:44em}
.subchapter{margin-top:88px}
.subchapter .chapter-note{grid-column:2;grid-row:1;color:var(--ink);font:500 20px/1.3 var(--head);letter-spacing:-.03em}

/* status keys: acid only marks Live */
.key{display:inline-flex;align-items:center;height:24px;padding:0 8px;font:500 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.065em;border:1px solid var(--ink);color:var(--ink);white-space:nowrap}
.key-live{background:var(--acid);border-color:var(--acid)}

/* grid of products: media plate, caption outside */
.work{padding-top:24px;padding-bottom:96px}
.grid{display:grid;gap:56px 32px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr);gap:40px 24px}
.card{display:flex;flex-direction:column;min-width:0}
.plate{display:block;border:1px solid var(--line);background:var(--tint);overflow:hidden;aspect-ratio:16/10}
.plate img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .35s ease}
.plate:hover img{transform:scale(1.015)}
.cap{padding-top:12px;display:grid;gap:8px}
.cap-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.num{font:500 11px/1 var(--mono);color:var(--forest);letter-spacing:.065em}
.cap h3{font-size:26px;line-height:1.1;letter-spacing:-.04em;margin-right:auto}
.cap p{max-width:38em;text-wrap:pretty}
.meta{font:500 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.065em;color:var(--muted)}
.links{display:flex;flex-wrap:wrap;gap:4px 20px;padding-top:2px}
.links a{font-weight:600;font-size:14.5px;text-decoration-color:var(--line);text-decoration-thickness:1px;padding:6px 0}
.links a:hover{text-decoration-color:var(--forest)}
.grid-4 .cap h3{font-size:21px}
.grid-4 .cap p:not(.meta):not(.links){font-size:15px}

/* featured first product: wide plate, caption beside */
.card-feature{grid-column:1/-1;display:grid;grid-template-columns:1.6fr 1fr;gap:32px;align-items:end;padding-bottom:8px}
.card-feature .cap{padding-top:0;align-content:end}
.card-feature .cap h3{font-size:clamp(34px,3.6vw,48px)}
.card-feature .cap p:not(.meta):not(.links){font-size:19px;line-height:1.45}

/* about: forest band, acid on forest */
.band{background:var(--forest);color:var(--paper);padding:72px 0}
.band-grid{display:grid;grid-template-columns:150px 1fr;gap:24px}
.lab-inv{color:var(--soft)}
.lab-inv b{color:var(--acid)}
.band h2{font-size:clamp(32px,4vw,52px);line-height:1.12;letter-spacing:-.055em;max-width:20ch}
.about-cols{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;margin-top:40px}
.about-cols>p{font-size:18px;line-height:1.55;color:var(--soft);text-wrap:pretty}
.proof li{border-top:1px solid rgba(208,221,206,.35);padding:12px 0;display:grid;grid-template-columns:92px 1fr;gap:12px;font-size:15px;color:var(--paper)}
.proof li:last-child{border-bottom:1px solid rgba(208,221,206,.35)}
.proof-k{font:500 11px/1.7 var(--mono);text-transform:uppercase;letter-spacing:.065em;color:var(--acid)}
.proof a{text-decoration-color:var(--acid)}

/* contact + monument ending */
.contact{padding-top:88px;padding-bottom:40px;display:grid;grid-template-columns:150px 1fr;gap:24px}
.contact-line{font-size:clamp(26px,3.2vw,40px);line-height:1.2;letter-spacing:-.045em;max-width:24ch}
.mail{display:inline-block;margin-top:14px;text-decoration:none;border-bottom:4px solid var(--acid);color:var(--forest)}
.mail:hover{border-bottom-color:var(--forest)}
.foot{border-top:1px solid var(--ink);margin-top:56px;overflow:hidden}
.monument{font:500 clamp(52px,15.4vw,212px)/.9 var(--head);letter-spacing:-.075em;color:var(--forest);white-space:nowrap;padding-top:28px;padding-bottom:12px}
.foot-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted);padding-top:12px;padding-bottom:28px}

@media (max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr);gap:48px 28px}}
@media (max-width:860px){
  :root{--side:24px}
  .hero-foot,.card-feature,.about-cols{grid-template-columns:1fr;gap:28px}
  .chapter,.subchapter,.band-grid,.contact{grid-template-columns:1fr}
  .chapter-note,.subchapter .chapter-note{grid-column:1;grid-row:auto}
  .grid-2{grid-template-columns:1fr;gap:48px}
  .card-feature{gap:12px}
  .card-feature .cap{padding-top:12px}
}
@media (max-width:560px){
  .top nav{gap:16px}
  .hero{padding-top:28px}
  .hero h1 .indent{margin-left:0}
  .facts dd{font-size:34px}
  .grid-4{grid-template-columns:1fr}
  .grid-4 .cap h3{font-size:24px}
  .proof li{grid-template-columns:1fr;gap:2px}
}

/* style B treatments */
body{font-size:15.5px;font-feature-settings:"cv11","ss01"}
h1,h2,h3{font-weight:600}
.lab{letter-spacing:.04em;font-size:11px}
.lab b,.num{color:#a1a1a1}
.top{box-shadow:0 1px 0 var(--line)}
.top nav a{color:var(--muted);text-transform:none;letter-spacing:0;font:500 14px var(--body)} .top nav a:hover{color:var(--ink);text-decoration:none}
.brand{font-weight:600;font-family:var(--body);letter-spacing:-.02em;font-size:16px}
.brand img{width:26px;height:26px}
.hero{padding-top:96px;padding-bottom:72px}
.hero h1{letter-spacing:-.05em;font-weight:600}
.hero h1 em{background:none;padding:0;color:#8a8a8a}
.hero-foot{border-top:1px solid var(--line)}
.lede{color:#3f3f3f}
.facts div{border-left-color:var(--line)}
.facts dd{font-weight:500;letter-spacing:-.04em;color:var(--ink)}
.chapter,.subchapter{border-top:1px solid var(--line)}
.chapter h2{letter-spacing:-.04em}
.subchapter .chapter-note{font-weight:500;color:var(--ink)}
.key{border:1px solid var(--line);border-radius:6px;color:#525252;background:#fafafa;height:22px;padding:0 8px;font-size:10.5px;text-transform:none;letter-spacing:0}
.key-live{background:#ecfdf3;border-color:#c6f0d8;color:#067647}
.grid-4 .key:not(.key-live){background:#fff8eb;border-color:#fde7c0;color:#b54708}
.plate{border:1px solid var(--line);border-radius:12px;background:#fafafa;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.plate:hover{border-color:#d4d4d4}
.cap h3{letter-spacing:-.03em;font-weight:600}
.meta{text-transform:none;letter-spacing:0;font-size:12px}
.links a{font-weight:500;text-decoration-color:#d4d4d4}
.band{background:#fafafa;color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lab-inv{color:var(--muted)} .lab-inv b{color:#a1a1a1}
.band h2 em{background:none;padding:0;color:#6b6b6b}
.about-cols>p{color:#3f3f3f}
.proof li{border-top-color:var(--line)!important;color:var(--ink)} .proof li:last-child{border-bottom-color:var(--line)}
.proof-k{color:#a1a1a1;text-transform:none;letter-spacing:0;font-size:12px}
.proof a{text-decoration-color:#d4d4d4}
.mail{color:var(--ink);border-bottom:1px solid var(--ink)}
.foot{border-top:1px solid var(--line)}
.monument{color:#f2f2f2;font-weight:600;letter-spacing:-.06em}
.skip{background:#0a0a0a;color:#fff}

.links .soon{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12.5px;letter-spacing:.02em;color:#737373;padding:6px 0}
div.plate:hover img{transform:none}