/* ==========================================================================
   DRiPGATE · Team page V2 (local preview)
   Cinematic editorial redesign. Dark graphite base, warm off-white ink,
   restrained emerald + per-member accents. Calm hierarchy, generous space.
   Plain HTML/CSS only — no framework, no external fonts, no JS.
   ========================================================================== */

:root{
  /* surfaces */
  --bg:#05070a;
  --panel:#0a0f13;
  --panel-2:#0c1318;
  --line:#1a2429;
  --line-soft:rgba(150,164,158,.14);

  /* warm off-white ink on cool graphite */
  --text:#f3efe6;      /* headings / primary */
  --text-2:#cbc8be;    /* body copy */
  --muted:#9aa19a;     /* secondary */
  --faint:#7c847d;     /* labels / captions */

  /* brand + agent accents (restrained, used sparingly) */
  --green:#6fed65;
  --green-dim:#1d5b2c;
  --amber:#f5b95c;     /* Patrick */
  --cyan:#4fd8e8;      /* MisterDoors */
  --magenta:#ff5cb0;   /* DevGrrl */

  --max:1160px;
  --serif:Georgia,'Iowan Old Style','Palatino Linotype','Times New Roman',serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;

  --pad:clamp(72px,9vw,124px);   /* vertical section rhythm */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;color:var(--text-2);font-family:var(--sans);line-height:1.65;
  /* one restrained emerald glow, top-right of the hero region */
  background:
    radial-gradient(120% 60% at 100% -6%,rgba(111,237,101,.05),transparent 42%),
    var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3{color:var(--text)}

.wrap{width:min(calc(100% - 44px),var(--max));margin-inline:auto}

/* accessibility helpers ---------------------------------------------------- */
.skip{
  position:absolute;left:-999px;top:0;z-index:99;background:var(--green);
  color:#061007;padding:10px 16px;font:700 13px/1 var(--mono);text-decoration:none;
}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:3px}

/* header / nav ------------------------------------------------------------- */
.sitehead{border-bottom:1px solid var(--line-soft);position:relative;z-index:2}
.navrow{display:flex;align-items:center;justify-content:space-between;gap:16px;height:74px}
.brand{font:900 20px/1 var(--sans);letter-spacing:.16em;text-decoration:none;color:var(--text)}
.brand i{font-style:normal;color:var(--green)}
.navlinks{display:flex;gap:26px}
.navlinks a{
  font:650 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;padding:6px 0;transition:color .16s;
}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--green)}

/* buttons + text link ------------------------------------------------------ */
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid var(--green);background:var(--green);color:#061007;
  padding:15px 24px;border-radius:9px;text-decoration:none;
  font:800 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 0 24px rgba(111,237,101,.10);
  transition:transform .16s ease,background .16s ease,box-shadow .16s ease;
}
.button:hover{transform:translateY(-2px);background:#8af780;box-shadow:0 6px 30px rgba(111,237,101,.16)}
.button.small{padding:11px 17px}
.button .arrow{transition:transform .16s ease}
.button:hover .arrow{transform:translateX(3px)}

.text-link{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  color:var(--muted);font:650 12px/1 var(--mono);letter-spacing:.07em;
  text-transform:uppercase;padding:8px 2px;transition:color .16s;
}
.text-link:hover{color:var(--green)}
.text-link .arrow{transition:transform .16s ease}
.text-link:hover .arrow{transform:translateY(3px)}

/* shared type -------------------------------------------------------------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;color:var(--green);
  font:700 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;
}
.pulse{
  width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;
  box-shadow:0 0 0 4px rgba(111,237,101,.08),0 0 14px var(--green);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.section-label{
  color:var(--green);font:700 10px/1 var(--mono);letter-spacing:.18em;
  text-transform:uppercase;margin:0 0 16px;
}
h2{
  font-family:var(--serif);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(1.75rem,1.25rem+1.9vw,2.5rem);line-height:1.1;
  margin:0 0 18px;max-width:20ch;
}
.section-lead{color:var(--muted);font-size:clamp(1rem,.96rem+.35vw,1.125rem);line-height:1.65;max-width:60ch;margin:0}
.section{padding:var(--pad) 0;border-bottom:1px solid var(--line-soft)}

/* hero --------------------------------------------------------------------- */
.hero{
  display:grid;gap:clamp(32px,5vw,64px);align-items:center;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  padding:clamp(56px,8vw,104px) 0 clamp(52px,7vw,92px);
}
.hero-copy{max-width:34rem}
h1{
  font-family:var(--serif);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(2.4rem,1.7rem+2.9vw,3.5rem);   /* ~38px mobile → 56px desktop cap */
  line-height:1.06;margin:0 0 22px;
}
h1 em{font-style:normal;color:var(--text);
  background:linear-gradient(92deg,var(--green),#bff5b0 60%,var(--amber));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.lead{color:var(--text-2);font-size:clamp(1.0625rem,1rem+.4vw,1.1875rem);line-height:1.62;margin:0;max-width:38rem}
.hero-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:32px}

.hero-media{
  margin:0;position:relative;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);background:#080c10;
  /* deep drop shadow + one restrained emerald ambient behind the centerpiece */
  box-shadow:
    0 42px 110px -30px rgba(0,0,0,.8),
    0 12px 70px -34px rgba(111,237,101,.14),
    inset 0 0 0 1px rgba(255,255,255,.02);
}
.hero-media::after{ /* gentle floor gradient to seat the image into the page */
  content:"";position:absolute;left:0;right:0;bottom:0;height:26%;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(4,7,10,.55));pointer-events:none;
}
.hero-media img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center}

/* manifesto band ----------------------------------------------------------- */
.manifesto{border-bottom:1px solid var(--line-soft);background:rgba(10,14,17,.5)}
.manifesto-inner{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(20px,4vw,52px);
  align-items:baseline;padding:clamp(30px,4.5vw,48px) 0;
}
.manifesto-lead{
  font-family:var(--serif);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(1.4rem,1rem+1.7vw,2.05rem);line-height:1.12;color:var(--text);margin:0;
}
.manifesto-sub{color:var(--muted);font-size:clamp(1rem,.96rem+.35vw,1.125rem);line-height:1.6;margin:0}

/* producer ----------------------------------------------------------------- */
.producer-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(32px,6vw,92px);align-items:start}
.producer-head h2{margin-bottom:0}
.producer-body p{
  color:var(--text-2);font-size:clamp(1.0625rem,1rem+.5vw,1.25rem);line-height:1.72;margin:0 0 20px;
}
.producer-body p:last-child{margin-bottom:0}

/* team --------------------------------------------------------------------- */
.team-head{max-width:60ch}
.team-grid{
  list-style:none;margin:clamp(38px,5vw,56px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px);
}
.member--patrick{--accent:var(--amber);--accent-soft:rgba(245,185,92,.5)}
.member--devgrrl{--accent:var(--magenta);--accent-soft:rgba(255,92,176,.5)}
.member--misterdoors{--accent:var(--cyan);--accent-soft:rgba(79,216,232,.5)}
.member--jetboy{--accent:var(--green);--accent-soft:rgba(111,237,101,.5)}
.member article{
  height:100%;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  transition:transform .18s ease,border-color .18s ease;
}
.member article:hover{transform:translateY(-4px);border-color:var(--accent-soft)}
.member-photo{position:relative;aspect-ratio:4/5;overflow:hidden;background:#0a0f13}
.member-photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.member-photo::after{ /* thin accent seam under the portrait */
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--accent);opacity:.6;
}
.member-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.member-tag{
  margin:0;color:var(--accent);font:700 9.5px/1.4 var(--mono);
  letter-spacing:.13em;text-transform:uppercase;
}
.member-body h3{font-family:var(--serif);font-size:1.5rem;line-height:1.05;margin:9px 0 8px}
.member-role{color:var(--muted);font-size:13.5px;line-height:1.5;margin:0}
.member-duties{list-style:none;margin:16px 0 0;padding:0}
.member-duties li{
  position:relative;padding:9px 0 9px 20px;color:var(--text-2);
  font-size:12.5px;line-height:1.5;border-top:1px solid var(--line-soft);
}
.member-duties li::before{content:"\2192";position:absolute;left:0;color:var(--accent);font-weight:700}

/* installed leverage ------------------------------------------------------- */
.leverage-head{max-width:24ch}
.leverage-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:clamp(30px,4vw,44px);
}
.leverage-grid article{
  border:1px solid var(--line);border-radius:13px;padding:clamp(22px,3vw,30px);background:var(--panel);
}
.leverage-grid b{color:var(--green);font:800 10px/1 var(--mono);letter-spacing:.17em;text-transform:uppercase}
.leverage-grid h3{font-family:var(--serif);font-size:1.375rem;line-height:1.2;margin:14px 0 9px}
.leverage-grid p{color:var(--muted);line-height:1.62;margin:0}
.truth{
  margin:clamp(22px,3vw,30px) 0 0;padding:16px 20px;border:1px solid var(--line);
  border-radius:10px;background:rgba(10,17,21,.6);color:var(--muted);
  font:500 12.5px/1.7 var(--mono);letter-spacing:.02em;
}
.truth b{color:var(--green);letter-spacing:.06em}

/* human approval ----------------------------------------------------------- */
.approval-card{
  border:1px solid var(--line);border-radius:18px;padding:clamp(30px,5vw,60px);
  background:radial-gradient(120% 100% at 88% -20%,rgba(111,237,101,.06),transparent 46%),var(--panel);
}
.approval-card h2{max-width:24ch}
.approval-card>p:last-child{margin:0;max-width:66ch;color:var(--muted);font-size:clamp(1rem,.96rem+.35vw,1.125rem);line-height:1.72}

/* final -------------------------------------------------------------------- */
.final{
  padding:clamp(84px,11vw,136px) 0;text-align:center;
  background:radial-gradient(90% 70% at 50% 122%,rgba(111,237,101,.1),transparent 46%);
}
.final .section-label{color:var(--green)}
.final h2{margin-inline:auto;max-width:20ch}
.final p{color:var(--muted);font-size:clamp(1rem,.96rem+.4vw,1.1875rem);line-height:1.62;max-width:56ch;margin:0 auto 30px}

/* footer ------------------------------------------------------------------- */
.sitefoot{border-top:1px solid var(--line)}
.footrow{
  padding:30px 0 46px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  color:var(--faint);font:550 10px/1.7 var(--mono);letter-spacing:.06em;text-transform:uppercase;
}
.footrow a{text-decoration:none;color:var(--muted);transition:color .16s}
.footrow a:hover{color:var(--green)}

/* reduced motion ----------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pulse{animation:none}
  .button,.button .arrow,.text-link .arrow,.member article{transition:none}
  .button:hover,.member article:hover{transform:none}
}

/* responsive --------------------------------------------------------------- */
@media (max-width:1000px){
  .hero{grid-template-columns:1fr;gap:clamp(28px,5vw,40px)}
  .hero-copy{max-width:none}
  .manifesto-inner{grid-template-columns:1fr;gap:14px}
  .producer-grid{grid-template-columns:1fr;gap:20px}
  .team-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .navlinks{display:none}
}
@media (max-width:600px){
  .wrap{width:min(calc(100% - 30px),var(--max))}
  .navrow{height:64px}
  .hero{padding:44px 0 52px}
  .hero-actions{gap:14px}
  .leverage-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
  .member-photo{aspect-ratio:3/2}
  .member-photo img{object-position:center 20%}
  .footrow{flex-direction:column;gap:10px}
}