/* ===========================================================================
   L. Zane Shuck, PhD, PE
   Site stylesheet. Loaded after the MegaOne architect-studio sheet so it wins.

   Three accent tokens, not one. The base rust is used only for rules and for
   figures at 24px and above; a darker rust carries small text on light grounds
   and a lifted amber carries small text on dark. Measured ratios beside each.
   =========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;600;700&family=Source+Sans+3:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root{
  --zs-ink:#15191C;        /* 17.68 on white, 15.66 on paper */
  --zs-ink-2:#232A2F;      /* 14.55 on white, 12.89 on paper */
  --zs-muted:#4E575C;      /*  7.39 on white,  6.55 on paper */
  --zs-acc:#A84A1E;        /*  5.73 on white. rules and 24px+ figures */
  --zs-acc-ink:#8A3D18;    /*  7.60 on white,  6.74 on paper */
  --zs-acc-lift:#EC9A5E;   /*  7.87 on ink,    6.48 on ink-2 */
  --zs-paper:#F3F1EC;
  --zs-line:rgba(21,25,28,.15);
  --zs-line-dark:rgba(255,255,255,.18);
  --zs-cond:"Roboto Condensed",Impact,"Arial Narrow",sans-serif;
  --zs-sans:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --zs-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}

html,body{ background:#fff; }
body{ font-family:var(--zs-sans) !important; color:var(--zs-ink-2) !important;
      font-size:16.5px; line-height:1.74; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5,h6{ font-family:var(--zs-cond) !important; color:var(--zs-ink) !important;
      text-transform:none; letter-spacing:0; }
a{ color:var(--zs-acc-ink); }
a:hover,a:focus{ color:var(--zs-ink); }
:focus-visible{ outline:3px solid var(--zs-acc-ink); outline-offset:3px; }
img{ max-width:100%; height:auto; display:block; }
section{ padding:0; }
p{ color:var(--zs-ink-2); }
.d-none{ display:none !important; }

/* loader */
.zs-loader{ position:fixed; inset:0; background:var(--zs-ink); z-index:4000; display:flex; align-items:center; justify-content:center; }
.zs-spin{ width:34px; height:34px; border:3px solid rgba(255,255,255,.25); border-top-color:var(--zs-acc-lift); border-radius:50%; animation:zsspin 1s linear infinite; }
@keyframes zsspin{ to{ transform:rotate(360deg) } }

/* --- nav ---------------------------------------------------------------- */
.zs-nav{ position:fixed; top:0; left:0; right:0; z-index:1030; background:rgba(21,25,28,.96); box-shadow:0 8px 28px rgba(21,25,28,.22); }
.zs-nav-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:20px; }
.zs-logo{ display:flex; align-items:baseline; gap:9px; text-decoration:none; }
.zs-logo-name{ font-family:var(--zs-cond); font-size:23px; font-weight:700; color:#fff !important; letter-spacing:.4px; }
.zs-logo-post{ font-family:var(--zs-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--zs-acc-lift) !important; }
.zs-menu{ display:flex; gap:4px; list-style:none; margin:0; padding:0; }
.zs-menu a{ display:block; padding:8px 12px; color:#fff !important; font-size:12.5px; font-weight:600;
            letter-spacing:.1em; text-transform:uppercase; text-decoration:none; }
.zs-menu a:hover,.zs-menu a:focus{ color:var(--zs-acc-lift) !important; }
.zs-burger{ display:none; background:none; border:0; padding:8px; cursor:pointer; }
.zs-burger span{ display:block; width:24px; height:2px; background:#fff; margin:5px 0; }
.zs-side{ position:fixed; inset:0 0 0 auto; width:min(380px,86vw); background:var(--zs-ink);
          z-index:1040; transform:translateX(105%); transition:transform .3s ease; padding:84px 34px 34px; overflow-y:auto; }
.zs-side.open{ transform:translateX(0); }
.zs-side nav{ display:flex; flex-direction:column; }
.zs-side nav a{ color:#fff !important; font-family:var(--zs-cond); font-size:26px; font-weight:600; padding:11px 0; text-decoration:none; border-bottom:1px solid var(--zs-line-dark); }
.zs-side nav a:hover{ color:var(--zs-acc-lift) !important; }
.zs-side-close{ position:absolute; top:26px; right:30px; background:none; border:1px solid var(--zs-line-dark);
                color:#fff; font-family:var(--zs-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; padding:8px 14px; cursor:pointer; }
.zs-side-note{ margin-top:28px; font-family:var(--zs-mono); font-size:12px; color:rgba(255,255,255,.84) !important; }

/* --- hero --------------------------------------------------------------- */
.zs-hero{ display:block; }
.zs-hero-bg{
  /* He stands in the right third of a high bay lab. The gradient darkens the
     left two thirds for the type and stops short of him so he stays lit. */
  min-height:86vh; display:flex; align-items:center; width:100%;
  background:
    linear-gradient(96deg, rgba(14,17,19,.97) 0%, rgba(14,17,19,.95) 38%, rgba(18,22,25,.86) 56%, rgba(22,27,31,.55) 75%, rgba(26,31,35,.28) 100%),
    url("../img/hero.jpg");
  background-size:cover, cover; background-position:center, 58% 45%;
}
.zs-hero-inner{ width:100%; padding:150px 0 110px; }
.zs-eyebrow{ font-family:var(--zs-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--zs-acc-lift) !important; margin:0 0 18px; }
.zs-h1{ font-family:var(--zs-cond) !important; color:#fff !important; font-size:clamp(44px,6.8vw,88px);
        font-weight:700; line-height:1.02; letter-spacing:-.4px; margin:0 0 22px; text-wrap:balance; }
.zs-h1 span{ font-weight:400; color:#fff !important; }
.zs-lede{ color:rgba(255,255,255,.94) !important; font-size:18px; line-height:1.76; max-width:58ch; margin:0 0 32px; }
.zs-btn{ display:inline-block; font-family:var(--zs-sans); font-size:13px; font-weight:600; letter-spacing:.11em;
         text-transform:uppercase; text-decoration:none; padding:15px 30px; border:1px solid var(--zs-acc-lift);
         color:var(--zs-acc-lift) !important; background:transparent; cursor:pointer; transition:background .2s,color .2s; }
.zs-btn:hover,.zs-btn:focus{ background:var(--zs-acc-lift); color:var(--zs-ink) !important; }
.zs-btn-solid{ border-color:var(--zs-acc-ink); background:var(--zs-acc-ink); color:#fff !important; }
.zs-btn-solid:hover,.zs-btn-solid:focus{ background:var(--zs-ink); border-color:var(--zs-ink); color:#fff !important; }

/* --- section shell ------------------------------------------------------ */
.zs-sec{ padding:104px 0; background:#fff; }
.zs-title{ margin-bottom:38px; }
.zs-title h5{ font-family:var(--zs-mono) !important; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--zs-acc-ink) !important; margin:0 0 14px; }
.zs-title h2{ font-size:clamp(30px,4.2vw,52px); font-weight:700; line-height:1.08; margin:0 0 18px; max-width:22ch; text-wrap:balance; }
.zs-title p{ font-size:17.5px; max-width:62ch; margin:0; color:var(--zs-ink-2) !important; }
.zs-body{ font-size:17px; max-width:62ch; margin:0 0 20px; color:var(--zs-ink-2) !important; }
.zs-small{ font-size:14.5px; color:var(--zs-muted) !important; margin:14px 0 0; }
.zs-attrib{ font-size:15.5px; color:var(--zs-muted) !important; border-left:3px solid var(--zs-acc); padding-left:20px; margin:26px 0 0; max-width:58ch; }
.zs-figure{ border:1px solid var(--zs-line); overflow:hidden; }
.zs-figure-tall img{ aspect-ratio:4/5; object-fit:cover; }

/* --- stats -------------------------------------------------------------- */
.zs-stats{ background:var(--zs-ink); padding:78px 0; }
.zs-stat{ text-align:center; padding:18px 12px; }
.zs-stat-n{ font-family:var(--zs-cond); font-size:50px; line-height:1; font-weight:700; color:var(--zs-acc-lift) !important; margin:0 0 12px; font-variant-numeric:tabular-nums; }
.zs-stat h6{ font-family:var(--zs-sans) !important; font-size:13.5px; font-weight:400; line-height:1.6; margin:0 auto; max-width:24ch; color:rgba(255,255,255,.93) !important; }
.zs-stats-note{ margin:32px auto 0; max-width:64ch; text-align:center; font-family:var(--zs-mono); font-size:12px; line-height:1.7;
                color:rgba(255,255,255,.80) !important; border-top:1px solid var(--zs-line-dark); padding-top:20px; }

/* --- patents ------------------------------------------------------------ */
.zs-patents{ background:var(--zs-paper); }
.zs-pat{ list-style:none; margin:0; padding:0; }
.zs-pat li{ display:flex; gap:24px; padding:20px 0; border-bottom:1px solid var(--zs-line); align-items:baseline; }
.zs-pat li:first-child{ border-top:1px solid var(--zs-line); }
.zs-pat-n{ font-family:var(--zs-mono); font-size:13px; font-weight:500; color:var(--zs-acc-ink) !important; flex:0 0 150px; }
.zs-pat h6{ font-size:19px; font-weight:600; margin:0 0 4px; line-height:1.3; }
.zs-pat p{ margin:0; font-size:15px; color:var(--zs-muted) !important; }

/* --- gut half section --------------------------------------------------- */
.zs-half{ background:var(--zs-ink); }
.zs-half .row{ align-items:stretch; }
.zs-half-img{ display:flex; }
.zs-half-img img{ width:100%; height:auto; min-height:100%; object-fit:cover; }
.zs-half-panel{ background:var(--zs-ink-2); display:flex; }
.zs-half-body{ padding:84px 8%; align-self:center; }
.zs-half-body .zs-title h5{ color:var(--zs-acc-lift) !important; }
.zs-half-body .zs-title h2{ color:#fff !important; }
.zs-body-light{ font-size:17px; line-height:1.78; color:rgba(255,255,255,.93) !important; margin:0 0 20px; max-width:58ch; }
.zs-hypo{ font-size:15.5px; line-height:1.74; color:rgba(255,255,255,.90) !important; border-top:1px solid var(--zs-line-dark);
          padding-top:22px; margin:26px 0 0; max-width:58ch; }
.zs-hypo b{ color:var(--zs-acc-lift); font-weight:600; }

/* --- energy ------------------------------------------------------------- */
.zs-claim{ margin-top:30px; background:var(--zs-paper); border-left:3px solid var(--zs-acc); padding:28px 30px; }
.zs-claim h4{ font-size:18px; font-weight:600; margin:0 0 12px; }
.zs-claim p{ margin:0 0 12px; font-size:16px; color:var(--zs-ink-2) !important; }
.zs-claim-note{ font-family:var(--zs-mono); font-size:12.5px; line-height:1.7; color:var(--zs-muted) !important; margin:0 !important; }

/* --- career ------------------------------------------------------------- */
.zs-career{ background:var(--zs-paper); }
.zs-time{ list-style:none; margin:0 0 54px; padding:0; }
.zs-time li{ display:flex; gap:28px; padding:20px 0; border-bottom:1px solid var(--zs-line); align-items:baseline; }
.zs-time li:first-child{ border-top:1px solid var(--zs-line); }
.zs-yr{ font-family:var(--zs-mono); font-size:13px; color:var(--zs-acc-ink) !important; flex:0 0 130px; }
.zs-time h6{ font-size:19px; font-weight:600; margin:0 0 4px; line-height:1.32; }
.zs-time p{ margin:0; font-size:15.5px; color:var(--zs-muted) !important; }
.zs-two{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:40px; border-top:1px solid var(--zs-line); padding-top:38px; }
.zs-col h4{ font-size:19px; font-weight:600; margin:0 0 16px; }
.zs-col ul{ list-style:none; margin:0; padding:0; }
.zs-col li{ padding:10px 0; border-bottom:1px solid var(--zs-line); font-size:16px; color:var(--zs-ink-2); }
.zs-col li:last-child{ border-bottom:0; }
.zs-col .zs-yr{ display:inline-block; flex:none; }

/* --- gallery ------------------------------------------------------------ */
.zs-gallery{ margin-left:-10px; margin-right:-10px; }
.zs-plate{ padding:10px; position:relative; }
.zs-plate img{ width:100%; aspect-ratio:1/1; object-fit:cover; border:1px solid var(--zs-line); }
.zs-plate-cap{ position:absolute; left:10px; right:10px; bottom:10px; padding:38px 16px 14px;
  background:linear-gradient(to top, rgba(14,17,19,.95) 0%, rgba(14,17,19,.80) 55%, rgba(14,17,19,0) 100%);
  color:#fff; font-family:var(--zs-mono); font-size:11.5px; letter-spacing:.05em; }
.zs-plate-note{ margin:34px 0 0; font-size:13.5px; line-height:1.72; color:var(--zs-muted) !important; max-width:78ch;
  border-top:1px solid var(--zs-line); padding-top:18px; }

/* --- recognition -------------------------------------------------------- */
.zs-recog{ background:var(--zs-paper); }
.zs-rcol{ margin-bottom:24px; display:flex; }
.zs-rcard{ background:#fff; border:1px solid var(--zs-line); border-top:3px solid var(--zs-acc); padding:28px 26px; width:100%; }
.zs-ryear{ display:block; font-family:var(--zs-mono); font-size:12.5px; letter-spacing:.12em; color:var(--zs-acc-ink) !important; margin-bottom:12px; }
.zs-rcard h4{ font-size:18px; font-weight:600; line-height:1.32; margin:0 0 9px; }
.zs-rcard p{ margin:0; font-size:14.5px; color:var(--zs-muted) !important; }
.zs-fellow{ margin-top:28px; border-top:1px solid var(--zs-line); padding-top:32px; }
.zs-fellow h4{ font-size:19px; font-weight:600; margin:0 0 10px; }
.zs-fellow p{ margin:0; font-size:16.5px; color:var(--zs-ink-2) !important; max-width:80ch; }

/* --- contact ------------------------------------------------------------ */
.zs-contact-card{ background:var(--zs-paper); padding:36px 32px; border-left:3px solid var(--zs-acc); }
.zs-ci{ padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--zs-line); }
.zs-ci:last-child{ padding-bottom:0; margin-bottom:0; border-bottom:0; }
.zs-ci-label{ display:block; font-family:var(--zs-mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--zs-acc-ink) !important; margin-bottom:8px; }
.zs-ci p{ margin:0; font-size:16px; line-height:1.7; color:var(--zs-ink-2) !important; }
.zs-ci a{ color:var(--zs-acc-ink) !important; text-decoration:underline; text-underline-offset:3px; }
.zs-ci a:hover{ color:var(--zs-ink) !important; }
.zs-form label{ display:block; font-family:var(--zs-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--zs-muted) !important; margin:0 0 8px; }
.zs-form input,.zs-form textarea{ width:100%; margin-bottom:24px; padding:14px 16px; font-family:var(--zs-sans);
  font-size:16px; color:var(--zs-ink) !important; background:#fff; border:1px solid var(--zs-line); border-radius:0; }
.zs-form input:focus,.zs-form textarea:focus{ border-color:var(--zs-acc-ink); outline:none; box-shadow:0 0 0 3px rgba(138,61,24,.14); }
.zs-form textarea{ resize:vertical; }

/* --- footer ------------------------------------------------------------- */
.zs-footer{ background:var(--zs-ink); padding:52px 0; }
.zs-foot-name{ font-family:var(--zs-cond); font-size:24px; font-weight:700; color:#fff !important; margin:0 0 6px; }
.zs-foot-note{ font-size:14px; color:rgba(255,255,255,.88) !important; margin:0; line-height:1.7; }

/* --- responsive --------------------------------------------------------- */
@media (max-width:1199px){ .zs-menu a{ padding:8px 8px; font-size:11.5px; } }
@media (max-width:991px){
  .zs-menu{ display:none; } .zs-burger{ display:block; }
  .zs-sec{ padding:74px 0; }
  .zs-hero-inner{ padding:130px 0 80px; }
  .zs-half-body{ padding:62px 8%; }
  .zs-stat{ padding:22px 10px; }
}
@media (max-width:767px){
  body{ font-size:16px; }
  .zs-hero-bg{ background-position:center, 60% 32%; min-height:auto; }
  .zs-pat li,.zs-time li{ flex-direction:column; gap:6px; }
  .zs-pat-n,.zs-yr{ flex:none; }
  .zs-contact-card{ padding:30px 24px; }
}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation:none !important; transition:none !important } }
