/* =====================================================
   mujun.dev — Industrial-Modern split-screen aesthetic
   Concrete Steel palette, Oswald + IBM Plex
   ===================================================== */

:root{
  --light-concrete:#D8D4D0;
  --dark-concrete:#2A2828;
  --steel-gray:#8A8888;
  --blueprint-blue:#3A5068;
  --blueprint-bg:#E0E4E8;
  --rebar-orange:#C07040;
  --light-text:#E0DCD8;
  --dark-text:#1A1818;
  --steel-faint:rgba(138,136,136,0.4);
}

*{box-sizing:border-box;margin:0;padding:0;}

html,body{
  background:var(--light-concrete);
  color:var(--dark-text);
  font-family:"IBM Plex Sans",sans-serif;
  font-size:clamp(13px,0.9vw,16px);
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;
}

/* concrete texture overlay */
.concrete-texture{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:1;opacity:1;
}

/* exposed structural labels (always-on) */
.struct-label{
  position:fixed;
  font-family:"IBM Plex Mono",monospace;
  font-size:9px;
  color:var(--steel-faint);
  text-transform:uppercase;
  letter-spacing:0.1em;
  z-index:50;
  pointer-events:none;
}
.label-section{top:14px;left:14px;}
.label-col-l{top:50%;left:14px;transform:translateY(-50%) rotate(-90deg);transform-origin:left center;}
.label-col-r{top:50%;right:14px;transform:translateY(-50%) rotate(90deg);transform-origin:right center;}
.label-grid{bottom:14px;right:14px;}

/* ============================================
   HERO
   ============================================ */
.hero{
  position:relative;
  min-height:100vh;
  background:var(--light-concrete);
  display:block;
  overflow:hidden;
  z-index:2;
}

.hero-inner{
  display:grid;
  grid-template-columns:1fr 2px 1fr;
  min-height:100vh;
  position:relative;
}

.hero-divider{
  position:absolute;
  left:50%;top:0;bottom:0;
  width:2px;
  background:var(--steel-gray);
  z-index:3;
}
.hero-marker{
  position:absolute;
  left:50%;
  width:8px;height:8px;
  background:var(--steel-gray);
  border-radius:50%;
  transform:translate(-50%,-50%);
  z-index:4;
}
.hero-marker-top{top:18%;}
.hero-marker-mid{top:50%;}
.hero-marker-bot{top:82%;}

.hero-left{
  grid-column:1;
  padding:96px 64px 64px 64px;
  position:relative;
  display:flex;flex-direction:column;justify-content:center;
}
.hero-right{
  grid-column:3;
  position:relative;
  padding:48px;
  display:flex;align-items:center;justify-content:center;
}

.hero-meta{
  display:flex;flex-direction:column;gap:6px;
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  color:var(--steel-gray);
  text-transform:uppercase;
  letter-spacing:0.12em;
  margin-bottom:24px;
}

.logotype{
  font-family:"Oswald",sans-serif;
  font-weight:700;
  font-size:clamp(56px,9vw,140px);
  line-height:0.9;
  text-transform:uppercase;
  letter-spacing:0.005em;
  color:var(--dark-text);
}
.logotype-dot{color:var(--rebar-orange);}

.hero-tagline{
  margin-top:28px;
  font-family:"Oswald",sans-serif;
  font-weight:500;
  font-size:clamp(16px,1.5vw,22px);
  letter-spacing:0.18em;
  line-height:1.45;
  text-transform:uppercase;
  color:var(--dark-text);
  max-width:34ch;
}

.hero-coords{
  margin-top:48px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px 24px;
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  color:var(--steel-gray);
  text-transform:uppercase;
  letter-spacing:0.1em;
  border-top:1px solid var(--steel-gray);
  padding-top:14px;
  max-width:380px;
}

/* blueprint */
.blueprint{
  width:100%;
  height:auto;
  max-height:80vh;
  background:var(--blueprint-bg);
  opacity:0;
  transition:opacity 800ms ease-out;
}
.blueprint.visible{opacity:0.92;}
.blueprint *{
  stroke:var(--blueprint-blue);
  fill:none;
  stroke-width:0.75;
  font-family:"IBM Plex Mono",monospace;
  font-size:9px;
}
.blueprint text{
  stroke:none;
  fill:var(--blueprint-blue);
  font-size:9px;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.blueprint .bp-tag{font-size:11px;font-weight:500;}
.blueprint pattern line{stroke:var(--blueprint-blue);stroke-width:0.5;}

.bp-stamp{
  position:absolute;
  bottom:64px;right:64px;
  font-family:"IBM Plex Mono",monospace;
  font-size:9px;
  color:var(--blueprint-blue);
  text-transform:uppercase;
  letter-spacing:0.12em;
  border:1px solid var(--blueprint-blue);
  padding:8px 14px;
  background:var(--blueprint-bg);
  line-height:1.6;
}

/* ============================================
   SPLIT SECTIONS
   ============================================ */
.split{
  position:relative;
  display:grid;
  grid-template-columns:1fr 2px 1fr;
  min-height:80vh;
  z-index:2;
}
.split::before{
  content:"";
  position:absolute;
  left:50%;top:0;bottom:0;
  width:2px;
  background:var(--steel-gray);
  z-index:3;
  pointer-events:none;
}
.split::after{
  content:"";
  position:absolute;
  left:calc(50% - 3px);
  top:50%;
  width:6px;height:6px;
  background:var(--steel-gray);
  border-radius:50%;
  z-index:4;
}
.split-zone{
  padding:88px 64px;
  position:relative;
  display:flex;flex-direction:column;
  justify-content:center;
}
.zone-dark{
  background:var(--dark-concrete);
  color:var(--light-text);
  grid-column:1;
}
.zone-light{
  background:var(--light-concrete);
  color:var(--dark-text);
  grid-column:3;
}
.split > .zone-dark.zone-light, .split > .zone-light.zone-dark{} /* noop */

/* alternate layouts via DOM order */
.split > :nth-child(1){grid-column:1;}
.split > :nth-child(2){grid-column:3;}

.zone-tag{
  position:absolute;
  top:18px;left:24px;
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--steel-gray);
}
.zone-dark .zone-tag{color:rgba(224,220,216,0.45);}

.zone-heading{
  font-family:"Oswald",sans-serif;
  font-weight:700;
  font-size:clamp(40px,5vw,72px);
  text-transform:uppercase;
  letter-spacing:0.04em;
  line-height:0.95;
  color:var(--light-text);
  margin-bottom:28px;
}
.zone-heading-light{
  font-family:"Oswald",sans-serif;
  font-weight:700;
  font-size:clamp(40px,5vw,72px);
  text-transform:uppercase;
  letter-spacing:0.04em;
  line-height:0.95;
  color:var(--dark-text);
  margin-bottom:28px;
}

/* slide-reveal */
.reveal-left{
  transform:translateX(-60px);
  opacity:0;
  transition:transform 0.4s ease-out,opacity 0.4s ease-out;
}
.reveal-right{
  transform:translateX(60px);
  opacity:0;
  transition:transform 0.4s ease-out,opacity 0.4s ease-out;
}
.reveal-left.in,.reveal-right.in{
  transform:translateX(0);
  opacity:1;
}

/* ============================================
   MANIFEST CONTENT
   ============================================ */
.code-block{
  font-family:"IBM Plex Mono",monospace;
  font-size:13px;
  line-height:1.7;
  color:var(--light-text);
  background:rgba(0,0,0,0.22);
  padding:20px 24px;
  border-left:3px solid var(--rebar-orange);
  margin-bottom:24px;
  white-space:pre;
  overflow-x:auto;
}
.code-block .cm{color:var(--steel-gray);}
.code-block .kw{color:var(--rebar-orange);}
.code-block .cls{color:#E0DCD8;}
.code-block .str{color:#B7C4D2;}
.code-block .num{color:#D89A60;}
.code-block .op{color:var(--steel-gray);}

.dark-list{list-style:none;display:flex;flex-direction:column;gap:10px;}
.dark-list li{font-size:14px;color:var(--light-text);}
.bullet{color:var(--rebar-orange);margin-right:10px;font-weight:700;}

.light-lead{
  font-family:"Oswald",sans-serif;
  font-weight:500;
  font-size:clamp(18px,1.6vw,24px);
  text-transform:uppercase;
  letter-spacing:0.14em;
  margin-bottom:18px;
}
.light-body{font-size:14px;line-height:1.7;margin-bottom:14px;max-width:46ch;}
.dark-lead{
  font-family:"Oswald",sans-serif;
  font-weight:500;
  font-size:clamp(18px,1.6vw,24px);
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--light-text);
  margin-bottom:24px;
}

.spec-row{
  margin-top:28px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--steel-gray);
  border-bottom:1px solid var(--steel-gray);
}
.spec-cell{
  padding:14px 8px;
  display:flex;flex-direction:column;gap:4px;
  border-right:1px solid var(--steel-gray);
}
.spec-cell:last-child{border-right:none;}
.spec-key{
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;
  color:var(--steel-gray);
  text-transform:uppercase;letter-spacing:0.14em;
}
.spec-val{
  font-family:"Oswald",sans-serif;
  font-weight:700;
  font-size:22px;
  color:var(--dark-text);
}

/* ============================================
   DIRECTORY MODULES
   ============================================ */
.modules{list-style:none;display:flex;flex-direction:column;gap:0;}
.module{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:18px;
  padding:18px 0;
  border-top:1px solid rgba(138,136,136,0.4);
  align-items:start;
}
.module:last-child{border-bottom:1px solid rgba(138,136,136,0.4);}
.mod-num{
  font-family:"Oswald",sans-serif;
  font-weight:700;
  font-size:36px;
  color:var(--rebar-orange);
  line-height:1;
  letter-spacing:0.02em;
}
.mod-name{
  font-family:"Oswald",sans-serif;
  font-weight:600;
  font-size:22px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--light-text);
  margin-bottom:6px;
}
.mod-ext{color:var(--steel-gray);font-weight:400;}
.mod-desc{font-size:13px;color:var(--light-text);opacity:0.8;margin-bottom:8px;max-width:54ch;}
.mod-meta{
  display:flex;gap:18px;
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;color:var(--steel-gray);
  text-transform:uppercase;letter-spacing:0.12em;
}

.rebar-rule{
  height:3px;
  background:repeating-linear-gradient(90deg,
    var(--rebar-orange) 0 14px,
    transparent 14px 22px);
  width:140px;margin:18px 0;
}
.light-meta{
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;color:var(--steel-gray);
  text-transform:uppercase;letter-spacing:0.14em;
}

/* ============================================
   ARCHITECTURE
   ============================================ */
.floor-list{list-style:none;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--steel-gray);}
.floor-list li{
  display:grid;grid-template-columns:80px 1fr;
  border-bottom:1px solid var(--steel-gray);
  padding:16px 0;
  align-items:center;
}
.floor-tag{
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;color:var(--rebar-orange);
  letter-spacing:0.14em;
}
.floor-name{
  font-family:"Oswald",sans-serif;
  font-weight:600;font-size:24px;
  text-transform:uppercase;letter-spacing:0.08em;
  color:var(--light-text);
}

.blueprint-arch{max-height:70vh;}

/* ============================================
   TELEMETRY
   ============================================ */
.gauge-row{
  display:flex;flex-direction:column;gap:18px;
  margin-top:18px;
}
.gauge{display:grid;grid-template-columns:80px 1fr 60px;align-items:center;gap:14px;}
.gauge-label{
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;color:var(--steel-gray);
  text-transform:uppercase;letter-spacing:0.14em;
}
.gauge-bar{
  position:relative;
  height:14px;
  background:rgba(138,136,136,0.18);
  border:1px solid var(--steel-gray);
}
.gauge-fill{
  position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--rebar-orange);
  transition:width 1.1s cubic-bezier(.2,.7,.2,1);
}
.gauge-val{
  font-family:"Oswald",sans-serif;font-weight:700;
  font-size:22px;color:var(--dark-text);
  text-align:right;letter-spacing:0.04em;
}

.log-block{
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;line-height:1.7;
  color:var(--light-text);
  background:rgba(0,0,0,0.22);
  padding:18px 22px;
  border-left:3px solid var(--rebar-orange);
  white-space:pre;overflow-x:auto;
  min-height:220px;
  margin-bottom:22px;
}

.rebar-btn{
  font-family:"Oswald",sans-serif;
  font-weight:700;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:0.18em;
  background:var(--rebar-orange);
  color:#1A1818;
  border:none;
  padding:14px 26px;
  cursor:pointer;
  align-self:flex-start;
  transition:background 200ms,transform 200ms;
}
.rebar-btn:hover{background:#D88858;transform:translateX(4px);}
.rebar-btn:active{transform:translateX(0);}

/* ============================================
   FOOTER
   ============================================ */
.footer{
  background:var(--dark-concrete);
  color:var(--light-text);
  padding:48px 64px;
  position:relative;
  z-index:2;
}
.footer-inner{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:24px;
  align-items:end;
}
.footer-col{display:flex;flex-direction:column;gap:6px;border-left:1px solid var(--steel-gray);padding-left:14px;}
.footer-col:first-child{border-left:none;padding-left:0;}
.footer-key{
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;color:var(--steel-gray);
  text-transform:uppercase;letter-spacing:0.14em;
}
.footer-val{
  font-family:"Oswald",sans-serif;font-weight:600;
  font-size:18px;color:var(--light-text);
  text-transform:uppercase;letter-spacing:0.06em;
}
.footer-stamp .footer-val{color:var(--rebar-orange);}
.footer-rule{
  margin:32px 0 14px;
  height:2px;
  background:repeating-linear-gradient(90deg,
    var(--steel-gray) 0 18px,
    transparent 18px 28px);
}
.footer-tag{
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;color:var(--steel-gray);
  text-transform:uppercase;letter-spacing:0.14em;
}

/* ============================================
   RESPONSIVE — collapse split-screen on mobile
   ============================================ */
@media (max-width:768px){
  .hero-inner,
  .split{
    grid-template-columns:1fr;
  }
  .hero-divider,
  .split::before,
  .split::after,
  .hero-marker{display:none;}
  .hero-left,
  .hero-right{grid-column:1;padding:64px 28px;}
  .split-zone{padding:64px 28px;grid-column:1 !important;}
  .label-col-l,.label-col-r{display:none;}
  .bp-stamp{position:static;display:inline-block;margin-top:18px;}
  .footer{padding:36px 28px;}
  .footer-inner{grid-template-columns:repeat(2,1fr);}
  .footer-col{border-left:none;padding-left:0;}
  .gauge{grid-template-columns:70px 1fr 50px;}
}