/* PHOTO concept. V2's structure and copy, with Max's own photographs as grounds.
   Loads after styles.css > concept-b.css > v2.css. See ../../design-notes.md

   THE FOUR RULES, and they are what keep this from being decoration:
   1. A photograph is never a rectangle in the layout. It is only ever a ground.
   2. Every image is pushed to a tonal extreme (crushed dark or blown light) so the
      page still reads as black and white and type stays legible.
   3. Blur means distance, not prettiness. The image sits behind a scrim, always.
   4. One image per section, never two competing.

   SLOTS: swap these four values for Max's real files and the whole concept updates.
*/
:root{
  --img-thesis:url("../assets/images/standin-crowd.jpg");    /* -> blurred Tokyo crossing */
  --img-founder:url("../assets/images/standin-highkey.jpg"); /* -> blown-out architecture */
  --img-network:url("../assets/images/standin-grain.jpg");   /* -> grain + night crane   */
  /* the 4th photo, the colour gradient, is reproduced in CSS at the inquiry close */
}

/* ---------- the ground mechanism ---------- */
.bg{position:relative;isolation:isolate;overflow:hidden}
.bg > .wrap{position:relative;z-index:2}
.bg::before{                       /* the photograph */
  content:"";position:absolute;inset:-6%;z-index:0;
  background-size:cover;background-position:center;
  will-change:transform;
}
.bg::after{                        /* the scrim that guarantees contrast */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
}

/* 01 thesis: the crowd, crushed. You cannot resolve a single person, which is the point. */
#top.bg::before{
  background-image:var(--img-thesis);
  filter:grayscale(1) contrast(1.22) brightness(.60) blur(2px);
}
/* directional, not flat: dense under the headline on the left, open on the right
   so the photograph is actually visible. A flat 82-94% scrim measured luma 1/255. */
#top.bg::after{
  background:
    linear-gradient(180deg,rgba(0,0,0,.50) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 72%,rgba(0,0,0,.72) 100%),
    linear-gradient(101deg,rgba(0,0,0,.90) 0%,rgba(0,0,0,.80) 34%,rgba(0,0,0,.40) 63%,rgba(0,0,0,.12) 100%);
}

/* 04 founder: SOLID WHITE. The architecture photograph was removed here on
   2026-09-03 at Mudit's request ("remove the dotted background and make it a
   solid white one") - its high-key speckle read as dots behind the copy. The
   --img-founder slot is intentionally left defined but unused, so the frame can
   come back if a different photograph suits it later. */
#founder.bg{background:#fff;color:#000}
#founder.bg::before{content:none}
#founder.bg::after{content:none}
#founder .h2,#founder .body{color:#000}
#founder .body.muted{color:#5A5A5A}
#founder .num,#founder .label{color:#6F6F6F}
#founder .plate{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.22)}
#founder .plate span{color:#5A5A5A}

/* 05 network: the crane. Its own wires already do what our drawn line does,
   so the photograph and the signature element are the same idea twice. */
#network.bg{background:#000}
#network.bg::before{
  background-image:var(--img-network);
  filter:grayscale(1) contrast(1.15) brightness(1.35);
  opacity:.95;
}
#network.bg::after{background:radial-gradient(135% 105% at 50% 42%,rgba(0,0,0,.05) 0%,rgba(0,0,0,.34) 55%,rgba(0,0,0,.74) 100%)}
#network .h2,#network .principle{color:#fff}
#network .field__sub{color:#B4B4B4}
#network #fieldSvg .cell{stroke:rgba(255,255,255,.34)}
#network #fieldSvg .cell.on{fill:#fff;stroke:#fff}
#network #fieldSvg .link,#network #fieldSvg .end{stroke:#fff}
#network .field__key{color:#9A9A9A}
#network .field__key i{border-color:rgba(255,255,255,.34)}
#network .field__key i.on{background:#fff;border-color:#fff}
#network .field__key i.ln{border-top-color:#fff}

/* 07 inquiry: the 4th photograph is a colour gradient. The brief says no colour,
   so it is reproduced here as a luminance ramp. Set --inq-colour:1 to restore it. */
#inquiry.bg::before{
  background-image:linear-gradient(180deg,#c9d3d6 0%,#b9bfa8 38%,#8a6a55 63%,#4a2b33 82%,#140d14 100%);
  filter:grayscale(1) brightness(.92) blur(24px);
  opacity:.9;
}
#inquiry.bg::after{background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.58) 55%,rgba(0,0,0,.86) 100%)}


@media (prefers-reduced-motion:no-preference){
  .bg::before{transition:none}
}

/* network sits on the dark photo, so its labels need lifting off concept-b's
   light-slab values (#6F6F6F would be ~3.1:1 on this ground) */
#network .label,#network .num{color:#9A9A9A}