/* ==========================================================================
   Eclipse Build — site styles
   No literal colour, type size, or spacing value lives here. Everything
   resolves through tokens.css. The page runs dark (ink) at the top for the
   studio buyer and hinges to light (bone) at the client portal.
   ========================================================================== */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:var(--fs-17);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--space-32)}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.eyebrow{
  font-family:"IBM Plex Mono",monospace;
  font-size:var(--fs-11);letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);
}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.05;letter-spacing:-.015em}

/* ---------- nav ---------- */
nav{
  position:sticky;top:0;z-index:20;
  background:var(--nav-bg);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule-dark);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:var(--space-70)}
.brand{display:flex;align-items:center;gap:var(--space-11);font-weight:600;letter-spacing:.04em;font-size:var(--fs-15);text-transform:uppercase}
.mark{width:var(--space-22);height:var(--space-22);flex:none}
.nav-links{display:flex;gap:var(--space-30);align-items:center}
.nav-links a{color:var(--dim);text-decoration:none;font-size:var(--fs-14-5)}
.nav-links a:hover{color:var(--bone)}
.nav-cta{
  border:1px solid var(--rule-dark);padding:var(--space-8) var(--space-16);border-radius:var(--radius-2);
  color:var(--bone)!important;font-size:var(--fs-14)
}
.nav-cta:hover{border-color:var(--corona);color:var(--corona)!important}

/* ---------- hero ---------- */
.hero{padding:var(--space-96) 0 var(--space-56)}
.hero h1{font-size:var(--fs-hero);max-width:14ch;margin-top:var(--space-18)}
.hero h1 em{font-style:normal;color:var(--corona)}
.hero-sub{
  margin-top:var(--space-26);max-width:52ch;color:var(--fog);font-size:var(--fs-19);
}
.hero-actions{margin-top:var(--space-34);display:flex;gap:var(--space-14);flex-wrap:wrap;align-items:center}
.btn{
  display:inline-block;background:var(--corona);color:var(--on-gold);
  font-weight:600;font-size:var(--fs-15);padding:var(--space-13) var(--space-24);border-radius:var(--radius-2);
  text-decoration:none;border:1px solid var(--corona);
}
.btn:hover{background:var(--corona-bright);border-color:var(--corona-bright)}
.btn-ghost{background:transparent;color:var(--bone);border-color:var(--rule-dark)}
.btn-ghost:hover{background:transparent;border-color:var(--bone);color:var(--bone)}

/* ---------- figure ---------- */
figure.wall{margin-top:var(--space-64);border-top:1px solid var(--rule);padding-top:var(--space-22)}
.wall svg{width:100%;height:auto;display:block}
figcaption{
  margin-top:var(--space-16);display:flex;gap:var(--space-14);align-items:baseline;
  font-family:"IBM Plex Mono",monospace;font-size:var(--fs-12);color:var(--muted);
  border-top:1px solid var(--rule);padding-top:var(--space-14);
}
figcaption b{color:var(--fg);font-weight:500;letter-spacing:.1em}
@keyframes travel{to{stroke-dashoffset:-1680}}
.wavepath{
  stroke-dasharray:6 5;
  animation:travel 9s linear infinite;
}
@media (prefers-reduced-motion:reduce){.wavepath{animation:none;stroke-dasharray:none}}

/* ---------- thesis ---------- */
.thesis{padding:var(--space-110) 0 var(--space-100);border-top:1px solid var(--rule-dark);margin-top:var(--space-96)}
.thesis .eyebrow{padding-top:var(--space-10)}
.thesis-grid{display:grid;grid-template-columns:var(--space-180) 1fr;gap:var(--space-48)}
.thesis p{
  font-family:"Fraunces",Georgia,serif;font-size:var(--fs-thesis);
  line-height:1.42;color:var(--bone);max-width:32ch;
}
.thesis p + p{margin-top:var(--space-22)}
.thesis .last{color:var(--corona)}

/* ---------- process ---------- */
.process{padding:0 0 var(--space-110)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-dark);border:1px solid var(--rule-dark);margin-top:var(--space-24)}
.step{background:var(--ink);padding:var(--space-34) var(--space-28) var(--space-38)}
.step .n{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-12);color:var(--corona);letter-spacing:.1em}
.step h3{font-size:var(--fs-23);margin:var(--space-16) 0 var(--space-12)}
.step p{color:var(--dim);font-size:var(--fs-15-5)}
.step p b{color:var(--bone);font-weight:500}

/* ---------- portal (the hinge: dark -> light via data-theme) ---------- */
.portal{
  background:var(--bg);color:var(--fg);
  padding:var(--space-110) 0 var(--space-120);
}
.portal .eyebrow{color:var(--muted)}
.portal h2{font-size:var(--fs-portal-h2);max-width:16ch;margin-top:var(--space-14)}
.portal-lede{margin-top:var(--space-20);max-width:50ch;color:var(--slate-text);font-size:var(--fs-17-5)}
.portal-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-56);align-items:start;margin-top:var(--space-56)}
.screen{
  background:var(--white);border:1px solid var(--rule);border-radius:var(--radius-3);
  box-shadow:var(--shadow-screen);
}
.screen-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-12) var(--space-16);border-bottom:1px solid var(--rule);
  font-family:"IBM Plex Mono",monospace;font-size:var(--fs-11);color:var(--steel);
}
.screen-bar .dot{width:var(--space-7);height:var(--space-7);border-radius:var(--radius-round);background:var(--dot);display:inline-block;margin-right:var(--space-5)}
.mile{display:flex;align-items:center;gap:var(--space-14);padding:var(--space-15) var(--space-18);border-bottom:1px solid var(--mile-rule)}
.mile:last-child{border-bottom:0}
.mile .tick{
  width:var(--space-16);height:var(--space-16);border-radius:var(--radius-round);flex:none;border:1.5px solid var(--tick-line);
  display:flex;align-items:center;justify-content:center;
}
.mile.done .tick{background:var(--ink);border-color:var(--ink)}
.mile.done .tick:after{content:"";width:var(--space-5);height:var(--space-9);border:solid var(--white);border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.mile.now .tick{border-color:var(--corona);box-shadow:inset 0 0 0 var(--space-3) var(--corona)}
.mile .label{flex:1;font-size:var(--fs-15)}
.mile.todo .label{color:var(--mute-light)}
.mile .val{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-12-5);color:var(--steel);white-space:nowrap}
.mile.now .val{color:var(--on-gold);background:var(--corona);padding:var(--space-2) var(--space-7);border-radius:var(--radius-2)}
.portal-list{list-style:none}
.portal-list li{padding:var(--space-18) 0;border-top:1px solid var(--rule);font-size:var(--fs-16);color:var(--slate-text)}
.portal-list li b{display:block;color:var(--ink);font-weight:600;font-size:var(--fs-16-5);margin-bottom:var(--space-3)}

/* ---------- work ---------- */
.work{background:var(--bg);color:var(--fg);padding:0 0 var(--space-120)}
.work h2{font-size:var(--fs-work-h2);margin-top:var(--space-14)}
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-28);margin-top:var(--space-48)}
.proj-img{
  aspect-ratio:4/3;background:linear-gradient(150deg,var(--proj-img-a),var(--proj-img-b));
  border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;
  font-family:"IBM Plex Mono",monospace;font-size:var(--fs-11);color:var(--proj-img-text);letter-spacing:.1em;
}
.proj h3{font-size:var(--fs-20);margin:var(--space-18) 0 var(--space-8)}
.proj .result{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-13);color:var(--on-gold);background:var(--corona);display:inline-block;padding:var(--space-3) var(--space-8);border-radius:var(--radius-2)}
.proj p{margin-top:var(--space-10);color:var(--proj-text);font-size:var(--fs-15)}

/* ---------- companies ---------- */
.companies{background:var(--bone-2);color:var(--ink);padding:var(--space-100) 0}
.companies h2{font-size:var(--fs-companies-h2);margin-top:var(--space-14);max-width:20ch}
.co-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-24);margin-top:var(--space-44)}
.co{background:var(--bone);border:1px solid var(--rule-light);padding:var(--space-34) var(--space-30)}
.co h3{font-size:var(--fs-22)}
.co .role{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-11);letter-spacing:.14em;text-transform:uppercase;color:var(--dim-dark);margin-bottom:var(--space-12)}
.co p{margin-top:var(--space-12);color:var(--co-text);font-size:var(--fs-15-5)}
.co .placeholder{background:transparent;border-style:dashed}

/* ---------- cta ---------- */
.cta{padding:var(--space-120) 0;text-align:center;border-top:1px solid var(--rule-dark)}
.cta h2{font-size:var(--fs-cta-h2);max-width:18ch;margin:var(--space-14) auto 0}
.cta p{margin:var(--space-22) auto 0;max-width:46ch;color:var(--dim)}
.cta .btn{margin-top:var(--space-32)}

footer{border-top:1px solid var(--rule-dark);padding:var(--space-36) 0;color:var(--dim);font-size:var(--fs-13-5)}
.foot-in{display:flex;justify-content:space-between;gap:var(--space-20);flex-wrap:wrap}

@media(max-width:900px){
  .thesis-grid{grid-template-columns:1fr;gap:var(--space-22)}
  .steps{grid-template-columns:1fr}
  .portal-grid{grid-template-columns:1fr;gap:var(--space-40)}
  .projects{grid-template-columns:1fr}
  .co-grid{grid-template-columns:1fr}
  .nav-links a:not(.nav-cta){display:none}
  .wrap{padding:0 var(--space-20)}
  .hero{padding:var(--space-64) 0 var(--space-40)}
}
a:focus-visible,button:focus-visible{outline:2px solid var(--corona);outline-offset:var(--space-3)}

/* ---------- accountability diagram (residential hero) ---------- */
.accountability svg{margin-top:var(--space-8)}

/* ---------- before/after work card (residential) ---------- */
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.ba-img{
  aspect-ratio:4/3;background:linear-gradient(150deg,var(--proj-img-a),var(--proj-img-b));
  border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.ba-img img{width:100%;height:100%;object-fit:cover;display:block}
.ba-tag{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-11);color:var(--proj-img-text);letter-spacing:.1em}
.ba-card h3{font-size:var(--fs-20);margin:var(--space-18) 0 var(--space-8)}
.ba-card .result{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-13);color:var(--on-gold);background:var(--corona);display:inline-block;padding:var(--space-3) var(--space-8);border-radius:var(--radius-2)}
.ba-loc{margin-top:var(--space-10);color:var(--muted);font-size:var(--fs-13)}
.ba-card p:not(.ba-loc){margin-top:var(--space-8);color:var(--proj-text);font-size:var(--fs-15)}