/*
 * SUBSTRATA / SIGNAL EDITION
 * A pirated field broadsheet, not another crypto dashboard.
 * Loaded after the original styling; changes are visual/navigation only.
 */
:root{
  --sub-ink:#14100f;
  --sub-paper:#ebe4d5;
  --sub-blood:#e94b39;
  --sub-yellow:#e9da55;
  --sub-ash:#bfb3a8;
}
html{scroll-padding-top:116px;scrollbar-color:#986155 #18120f}
body{overflow-x:clip}
.site-shell{max-width:1920px;border-color:#30211b}
.header{
  position:sticky;top:0;z-index:70;
  background:#110e0d;
  box-shadow:0 4px 0 #170b08;
}
.header::after{height:4px;bottom:-4px;opacity:1;background:var(--sub-blood)}
.brand-wordmark{max-width:100%}
.top-nav{flex-wrap:wrap;justify-content:center}
.top-nav a{color:#e8ddd0;text-decoration-thickness:2px;text-underline-offset:6px}
.top-nav a:focus-visible{color:var(--sub-yellow)}
.top-nav-console,.mobile-nav-toggle{display:none}
.pirate-tape{
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  min-height:27px;padding:5px clamp(20px,4vw,68px);background:var(--sub-yellow);
  color:#160f0b;font:900 9px/1.3 var(--mono);
  letter-spacing:.07em;overflow:hidden;white-space:nowrap;
  border-bottom:2px solid #0c0907;
}
.pirate-tape span:nth-child(even){font-size:14px;color:#97291e}
.hero{
  grid-template-columns:minmax(0,1.58fr) minmax(0,.82fr);
  min-height:680px;
  isolation:isolate;
  background-color:#18120f;
  background-image:
    linear-gradient(102deg,transparent 0 62%,rgba(233,75,57,.055) 62% 74%,transparent 74%),
    repeating-linear-gradient(0deg,rgba(229,214,185,.04) 0 1px,transparent 1px 27px);
  border-bottom:12px solid var(--sub-blood);
}
.hero::after{
  content:"TRANSMISSION 001 / YOU ARE NOT THE PRODUCT";
  position:absolute;bottom:12px;right:13px;
  font:800 8px var(--mono);letter-spacing:.07em;color:#ad9083;
  pointer-events:none;
}
.hero-copy{
  padding:clamp(66px,7vw,112px) 20px 75px clamp(23px,5.4vw,91px);
  min-width:0;z-index:2;
}
.hero h1{
  font-size:clamp(60px,7.3vw,142px);
  line-height:.88;letter-spacing:-.053em;
  margin:53px 0 39px;
  max-width:950px;
}
.hero h1 em{
  background:var(--sub-blood);
  box-shadow:8px 7px 0 #050403;
  transform:rotate(-2.3deg) skewX(-5deg);
  padding:.04em .09em .07em .01em;
}
.hero-text{
  max-width:575px;
  font-size:clamp(17px,1.42vw,22px);
  border-left:0;
  text-wrap:pretty;
}
.hero-actions .button{min-height:58px}
.honest-caption{color:#c2b4a7;max-width:535px}
.hero-visual{
  margin:36px 20px 43px -20px;
  padding:20px 17px 17px;
  border:4px solid var(--sub-paper);
  box-shadow:12px 12px 0 #060403;
  background:#4a1f1a;
  transform:rotate(2deg);
  min-width:0;
}
.hero-visual::before{
  background:
    repeating-linear-gradient(95deg,transparent 0 47px,rgba(0,0,0,.13) 48px 52px,transparent 53px 86px),
    linear-gradient(135deg,#201411 0 52%,#4a1c16 52%);
  inset:0;transform:none;
}
.instrument-label{flex-wrap:wrap;font-size:8px}
.instrument-label span:first-child{color:#18100d;background:var(--sub-yellow)}
.substrata-mark-field{min-height:400px}
.substrata-mark-field>img{width:min(114%,610px);filter:drop-shadow(10px 12px 0 #130805)}
.symbol-stamp{
  top:17%;right:-1%;border-color:var(--sub-yellow);
  background:#1c0d09;color:var(--sub-paper);
}
.visual-bottom{flex-wrap:wrap}
.hero-index{display:none}
.console-teaser{
  grid-template-columns:minmax(220px,.32fr) minmax(0,1fr);
  background:#eae1d3;
  border-bottom:13px solid #17100d;
  min-height:510px;
}
.teaser-marker{
  background:
    repeating-linear-gradient(3deg,transparent 0 22px,rgba(244,213,179,.12) 23px 24px),
    #2e1915;
  border-color:var(--sub-blood);
  overflow:hidden;min-height:450px;
}
.teaser-marker::before{
  content:"INDEPENDENT\A FREQUENCY";white-space:pre;
  position:absolute;bottom:15px;left:15px;
  color:#cc887b;font:800 9px/1.8 var(--mono);
  letter-spacing:.09em;
}
.teaser-copy{padding:clamp(58px,6vw,92px) clamp(30px,6vw,110px)}
.teaser-copy h2{font-size:clamp(58px,7vw,118px);line-height:.88}
.teaser-capabilities{
  grid-template-columns:repeat(4,minmax(0,1fr));
  max-width:900px;
  border-top:2px solid #191310;
  border-bottom:2px solid #191310;
  gap:0;
}
.teaser-capabilities span{
  background:none;border-left:0;
  border-right:1px dashed #bb9a8a;
  color:#573a31;padding:14px 10px;
  font:800 10px/1.4 var(--mono);
}
.teaser-capabilities span:last-child{border-right:0}
.statement-band{border-top:6px solid #ba4d3e}
.statement-band h2{font-size:clamp(40px,4.4vw,72px);max-width:900px}
.pillars{background:#150f0d}
.pillars .section-head{margin-bottom:65px}
.pillar-list{gap:0;align-items:start;grid-template-columns:1.14fr .94fr 1.02fr}
.pillar,.pillar:not(:first-child){
  min-height:405px;padding:30px 29px 28px;
  border:0;border-top:6px solid var(--sub-blood);
  box-shadow:none;transform:none;
  clip-path:polygon(0 0,100% 0,100% 98%,94% 100%,87% 98%,72% 100%,58% 98%,40% 100%,22% 98%,0 100%);
}
.pillar:nth-child(1){background:#29201b;transform:rotate(-1.3deg)}
.pillar:nth-child(2){background:#e8ddcf;transform:rotate(1.8deg) translateY(41px);border-color:#e9da55}
.pillar:nth-child(3){background:#6d2921;transform:rotate(-1.3deg) translateY(13px);border-color:#e5c7b0}
.pillar::before{border-color:rgba(244,230,208,.23)}
.pillar h3{font-size:clamp(29px,2.65vw,43px)}
.pillar-icon{margin-top:16px;height:99px}
.pillar-state{border-top:1px dashed currentColor;padding-top:9px}
.architecture{
  background:
    repeating-linear-gradient(0deg,rgba(255,244,216,.025) 0 1px,transparent 1px 25px),
    #201813;
}
.architecture-intro h2{letter-spacing:-.022em}
.stack-diagram{box-shadow:11px 11px 0 #0f0a08}
.stack-line{grid-template-columns:42px minmax(0,1fr) auto}
.lab{border-top:18px solid var(--sub-blood)}
.lab-interface{box-shadow:9px 10px 0 #060403}
.peer-drop{
  margin-top:31px;padding:21px 18px 24px;
  background:repeating-linear-gradient(0deg,rgba(241,221,188,.024) 0 1px,transparent 1px 17px),#34211b;
  border:2px dashed #9a6855;border-top:9px solid var(--sub-yellow);
  box-shadow:6px 7px 0 #100905;min-width:0;
}
.peer-drop-heading{display:flex;align-items:flex-start;gap:15px;border-bottom:1px dashed #946e5a;padding-bottom:18px}
.peer-drop .section-index{font:900 9px var(--mono);color:var(--sub-yellow)}
.peer-drop h3{font:900 clamp(33px,3.2vw,48px)/.88 Impact,'Arial Black',Outfit,sans-serif;letter-spacing:-.03em;margin:8px 0 0;color:var(--sub-paper)}
.peer-drop-stamp{flex:none;transform:rotate(-7deg);padding:9px;border:2px solid var(--sub-blood);color:var(--sub-blood);font:900 13px/.9 Impact,'Arial Black',Outfit,sans-serif}
.peer-drop>p:not(.peer-drop-status){font-size:13px;line-height:1.6;color:#d9c9b6}
.peer-drop>label{display:block;font:900 10px var(--mono);color:var(--sub-yellow);margin:17px 0 9px}
.peer-drop .code-field{min-height:110px;height:120px;resize:vertical;font-size:10px;max-width:100%;word-break:break-word}
.peer-drop-actions{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:15px}
.peer-drop-actions .button{min-height:43px;padding:11px 13px;font:900 10px var(--mono);min-width:0;text-align:center;white-space:normal}
.peer-file-label{font:900 10px var(--mono);color:#ffb09b}
.peer-drop-actions input[type=file]{max-width:100%;color:#dccbc0;font:700 9px var(--mono)}
.peer-drop-actions input::file-selector-button{background:#e8dece;border:0;padding:10px;margin-right:8px;color:#21140f;cursor:pointer}
.peer-drop-status{background:#21140f;color:var(--sub-yellow);padding:12px;margin:17px 0 0;font:900 10px/1.5 var(--mono);overflow-wrap:anywhere}
.peer-drop-incoming{margin-top:15px;padding:15px;background:#e6dac9;color:#241712;border-left:6px solid var(--sub-blood)}
.peer-drop-incoming strong{font:900 11px/1.5 var(--mono)}
.peer-drop-incoming p{font:700 11px/1.6 var(--mono);overflow-wrap:anywhere}
.peer-drop-incoming .button-secondary{color:#241712;background:#f6e8d5;border:2px solid #5d4134}
.peer-drop button:focus-visible,.peer-drop input:focus-visible,.peer-drop textarea:focus-visible{outline-color:var(--sub-yellow)!important}
.closing-section{background:#e7decb}
.footer{border-top:8px solid #311e1a}

@media(max-width:1150px){
  .hero{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}
  .hero h1{font-size:clamp(55px,7vw,95px)}
  .hero-visual{margin-left:-12px}
  .teaser-capabilities{grid-template-columns:repeat(2,minmax(0,1fr))}
  .teaser-capabilities span:nth-child(2){border-right:0}
  .teaser-capabilities span:nth-child(-n+2){border-bottom:1px dashed #bb9a8a}
}
@media(max-width:960px){
  html{scroll-padding-top:110px}
  .header{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    align-items:center;gap:0 10px;height:auto;min-height:77px;
    padding:9px 19px;
  }
  .brand-wordmark{width:clamp(160px,28vw,230px)}
  .nav-cta{display:none}
  .mobile-nav-toggle{
    display:flex;align-items:center;gap:15px;justify-content:space-between;
    background:#321c17;color:#f0dfd0;border:2px solid var(--sub-blood);
    padding:10px 12px;min-width:103px;min-height:44px;
    font:900 11px var(--mono);letter-spacing:.02em;cursor:pointer;
  }
  .toggle-bars{display:grid;gap:5px}
  .toggle-bars i{display:block;width:18px;height:2px;background:var(--sub-yellow)}
  .header .top-nav{display:none}
  .header.menu-open .top-nav{
    display:grid;grid-column:1/-1;gap:0;
    width:100%;margin-top:12px;padding:10px 0 6px;
    background:#1b1310;border-top:2px dashed #8b5347;
  }
  .top-nav a{
    display:flex;justify-content:space-between;align-items:center;
    min-height:50px;padding:14px 12px;
    border-bottom:1px solid #584036;font:800 12px var(--mono);
  }
  .top-nav a:hover,.top-nav a:focus-visible{background:#3a211b}
  .header .top-nav-console{display:flex;color:#1b0f0b;background:var(--sub-yellow);margin-top:10px}
  .pirate-tape span:last-child{display:none}
  .hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .hero-copy{padding:74px 28px 47px}
  .hero h1{font-size:clamp(55px,10.8vw,105px);max-width:none;white-space:normal;overflow-wrap:normal}
  .hero-visual{
    transform:none;min-height:360px;
    margin:0 26px 43px;padding:19px;
    border:3px solid var(--sub-paper);
  }
  .substrata-mark-field{min-height:310px}
  .substrata-mark-field>img{width:min(80%,430px)}
  .console-teaser{grid-template-columns:1fr}
  .teaser-marker{min-height:0;height:230px;border:0;border-bottom:7px solid var(--sub-blood)}
  .teaser-marker img{max-width:250px}
  .teaser-copy{padding:56px 36px 63px}
  .pillar-list{grid-template-columns:1fr;gap:22px}
  .pillar,.pillar:not(:first-child){
    min-height:245px;transform:none;border-top:5px solid var(--sub-blood);
    padding:25px 27px 26px;clip-path:none;
  }
  .pillar:nth-child(2),.pillar:nth-child(3){transform:none}
  .pillar-icon{height:78px;margin:6px 0 0;font-size:79px}
  .pillars .section-head{margin-bottom:30px}
}
@media(max-width:600px){
  html{scroll-padding-top:96px}
  .header{padding:8px 13px;min-height:67px}
  .brand-wordmark{width:clamp(137px,41vw,190px)}
  .mobile-nav-toggle{min-width:91px;padding:9px 9px;gap:8px;font-size:10px}
  .pirate-tape{min-height:24px;padding:5px 11px;font-size:7px;gap:8px}
  .pirate-tape span:nth-child(3){display:none}
  .hero-copy{padding:48px 20px 28px}
  .overline{font-size:8px;letter-spacing:0;padding:7px;max-width:100%}
  .hero h1{
    font-size:clamp(44px,12.2vw,73px);
    letter-spacing:-.056em;
    line-height:.89;margin:31px 0 26px;
    white-space:normal;max-width:100%;
    text-shadow:2px 2px 0 #000;
  }
  .hero h1 em{display:inline-block;max-width:100%;padding:0 .045em .055em;box-shadow:4px 4px 0 #000}
  .hero-text{font-size:16px;line-height:1.5;margin:0 0 27px 9px}
  .hero-text::before{left:-12px}
  .hero-actions{gap:11px}
  .hero-actions .button{width:100%;max-width:100%;min-width:0;padding:14px 13px;gap:10px;font-size:11px}
  .honest-caption{font-size:9px;line-height:1.65;margin:24px 0 0}
  .hero-visual{margin:0 15px 34px;min-height:0;padding:12px;box-shadow:7px 7px 0 #070403}
  .instrument-label,.visual-bottom{font-size:7px;gap:7px}
  .instrument-label span:nth-child(2){display:none}
  .substrata-mark-field{min-height:205px}
  .substrata-mark-field>img{width:min(75%,290px);max-height:270px}
  .symbol-stamp{font-size:9px;top:10%;right:3%;padding:5px}
  .hero::after{font-size:7px;bottom:8px}
  .teaser-marker{height:145px;min-height:0}
  .teaser-marker img{max-width:140px}
  .teaser-marker>span{font-size:8px;top:10px}
  .teaser-marker::before{font-size:7px;bottom:6px}
  .teaser-copy{padding:39px 18px 45px}
  .teaser-copy h2{font-size:clamp(43px,11.2vw,70px);letter-spacing:-.055em;line-height:.93}
  .teaser-copy>p:not(.section-index){font-size:16px}
  .teaser-capabilities{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .teaser-capabilities span{font-size:8px;min-width:0;padding:11px 7px}
  .teaser-copy>.button{font-size:11px;min-width:0;width:100%;padding:12px}
  .statement-band{padding:48px 18px 53px}
  .statement-band h2{font-size:clamp(33px,8.9vw,51px);overflow-wrap:normal}
  .content-section{padding:61px 18px}
  .section-head h2{font-size:clamp(34px,9vw,50px)}
  .pillar,.pillar:not(:first-child){min-height:0;padding:22px 20px}
  .pillar h3{font-size:32px}
  .architecture-intro h2{font-size:clamp(43px,11vw,60px);letter-spacing:-.04em}
  .stack-line{grid-template-columns:27px minmax(0,1fr);gap:9px;padding:14px 10px}
  .stack-line strong{font-size:20px}
  .stack-line div span{font-size:11px;overflow-wrap:anywhere}
  .stack-status{grid-column:2;text-align:left;font-size:8px}
  .stack-baseline{flex-wrap:wrap;gap:10px;padding-top:16px}
  .stack-baseline span{white-space:normal}
  .lab-intro h2{font-size:clamp(45px,11vw,61px)}
  .lab-topline{flex-wrap:wrap}
  .lab-experiment-badge{white-space:normal}
  .lab-interface{box-shadow:5px 5px 0 #000}
  .lab-status-line,.chat-header,.chat-foot{flex-wrap:wrap;row-gap:7px}
  .lab-tabs{gap:0}
  .lab-tab{font-size:10px;padding:12px 5px;min-height:46px}
  .lab-left,.lab-right{padding:20px 13px}
  .lab-button{font-size:11px;padding:12px 9px}
  .peer-drop{padding:17px 12px 20px;margin-top:26px;box-shadow:4px 5px 0 #100905}
  .peer-drop-stamp{font-size:10px;padding:6px}
  .peer-drop h3{font-size:clamp(31px,9vw,42px)}
  .peer-drop-actions{flex-direction:column;align-items:stretch}
  .peer-drop-actions .button{width:100%}
  .peer-drop-actions input[type=file]{width:100%}
  .code-field{font-size:10px}
  .chat-compose input{font-size:16px}
  .lab-note{padding-left:15px}
  .closing-section h2{font-size:clamp(42px,11.8vw,70px)}
  .closing-links .button{font-size:11px;gap:8px;padding:12px}
  .footer{padding:28px 17px}
}
@media(max-width:360px){
  .hero h1{font-size:clamp(39px,11.4vw,44px)}
  .hero-actions .button{font-size:10px}
  .teaser-copy h2{font-size:41px}
  .teaser-capabilities span{font-size:7px}
}
@media(prefers-reduced-motion:reduce){
  .hero-visual,.pillar,.pillar:nth-child(2),.pillar:nth-child(3){transform:none}
}