:root{
  --paper:#fdfcf7;
  --ink:#111216;
  --grid:#dcd7c9;
  --accent:#ff5400;
  --accent-2:#2d00f7;
  --acid:#c6ff00;
  --rose:#ff006e;
  --shadow: 0 10px 0 var(--ink);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(60rem 40rem at 10% -10%, rgba(45,0,247,.08), transparent 60%),
    radial-gradient(50rem 30rem at 110% 0%, rgba(255,84,0,.08), transparent 60%),
    var(--paper);
  color:var(--ink);
  font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial;
  line-height:1.7;
}
.shell{display:grid; grid-template-columns: 260px 1fr; min-height:100vh}
@media (max-width: 980px){ .shell{grid-template-columns: 1fr} }

.rail{position:sticky; top:0; height:100vh; border-right:4px solid var(--ink);
  padding:1rem; background: repeating-linear-gradient(0deg, #fff, #fff 18px, #f6f4ee 18px, #f6f4ee 36px) }
@media (max-width:980px){ .rail{height:auto; border-right:0; border-bottom:4px solid var(--ink)} }
.brand{display:flex; align-items:center; gap:.8rem; color:var(--ink); text-decoration:none; margin-bottom:1rem}
.brand .logo{filter: drop-shadow(2px 2px 0 #000)}
.brand-name{font-family: "Bebas Neue", Impact, system-ui; font-size:1.9rem; letter-spacing:.8px}
.brand-name span{color:var(--accent)}
.rail-nav{display:grid; gap:.45rem}
.nav-item{display:block; text-decoration:none; color:var(--ink); font-weight:700; padding:.6rem .75rem; border:3px solid var(--ink); border-radius:8px; background:#fff; box-shadow: 4px 4px 0 #000}
.nav-item:hover{transform: translate(-2px, -2px); box-shadow:6px 6px 0 #000}
.nav-item.btn{background:linear-gradient(135deg, var(--acid), var(--rose)); color:#061501}
.rail-toggle{display:none}
@media (max-width:980px){
  .rail-nav{grid-template-columns: repeat(3, 1fr)}
  .rail-toggle{display:block; grid-column: 1 / -1; padding:.6rem .75rem; font-weight:800; border:3px solid var(--ink); background:#fff; border-radius:8px}
}

.stage{padding:2rem; background-image: radial-gradient(circle at 20px 20px, var(--grid) 1px, transparent 1px); background-size: 22px 22px}
@media (max-width:720px){ .stage{padding:1.2rem} }

.poster{border:4px solid var(--ink); border-radius:12px; background:#fff; padding:1.2rem; box-shadow: var(--shadow)}
.kicker{display:inline-block; font-family: "IBM Plex Mono", monospace; font-weight:600; background:var(--ink); color:#fff; padding:.22rem .5rem; letter-spacing:.4px; border-radius:6px}
.title{font-family: "Bebas Neue", Impact, system-ui; margin:.35rem 0; font-size:3rem; line-height:1.05; letter-spacing:1px}
.subtitle{font-family: "IBM Plex Mono", monospace; color:#333; margin-top:.2rem}

.grid{display:grid; gap:1rem}
.cols-2{grid-template-columns: repeat(2, 1fr)}
.cols-3{grid-template-columns: repeat(3, 1fr)}
.cols-4{grid-template-columns: repeat(4, 1fr)}
@media (max-width:1060px){ .cols-4{grid-template-columns: repeat(2, 1fr)} }
@media (max-width:760px){ .cols-3, .cols-2{grid-template-columns: 1fr} }

.card{background:#fff; border:3px solid var(--ink); border-radius:10px; padding:1rem; box-shadow: 6px 6px 0 #000}
.card .eyebrow{font-family:"IBM Plex Mono", monospace; font-size:.8rem; color:#111; background:var(--acid); display:inline-block; padding:.1rem .4rem; border-radius:6px; border:2px solid var(--ink)}
.card h3{font-family:"Bebas Neue"; font-size:1.6rem; margin:.3rem 0}
.card p{margin:.25rem 0 .6rem}
.card .btn{display:inline-block; padding:.5rem .7rem; border:3px solid var(--ink); border-radius:8px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; font-weight:800; text-decoration:none}
.card .meta{font-family:"IBM Plex Mono", monospace; font-size:.82rem; color:#222}

.marquee{ margin:1.2rem 0; overflow:hidden; border:3px solid var(--ink); background:#fff; border-radius:10px }
.marquee-track{ display:flex; gap:2rem; padding:.6rem 1rem; animation: scroll 22s linear infinite; font-family:"Bebas Neue"; font-size:1.4rem; letter-spacing:.6px }
.marquee i{font-family:"IBM Plex Mono", monospace; font-size:.9rem; padding:.2rem .45rem; border:2px solid var(--ink); border-radius:6px; background:var(--acid)}
@keyframes scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

.section{margin:1.4rem 0}
.section h2{font-family:"Bebas Neue"; font-size:2rem; margin:.2rem 0 .6rem}
.hr{height:4px; background: repeating-linear-gradient(90deg, var(--ink), var(--ink) 10px, transparent 10px, transparent 18px); margin:1rem 0}

.site-footer{margin-top:2rem}
.site-footer .inner{background:#fff; border:3px solid var(--ink); border-radius:10px; padding:1rem; box-shadow: 6px 6px 0 #000}
.site-footer .tiny{font-family:"IBM Plex Mono", monospace; color:#555}

.article{background:#fff; border:3px solid var(--ink); border-radius:12px; padding:1rem; box-shadow: 6px 6px 0 #000}
.article h2{font-family:"Bebas Neue"; font-size:2rem; margin:.2rem 0 .6rem}
.article h3{font-family:"Bebas Neue"; font-size:1.6rem; margin:.4rem 0 .3rem}
.article p{margin:.5rem 0}
.article ul{margin:.4rem 0 .8rem; padding-left:1.2rem}
.article li{margin:.25rem 0}
.article blockquote{border-left:4px solid var(--accent-2); margin:1rem 0; padding:.5rem .8rem; background:#fafafa}

form.formy{display:grid; gap:.8rem; max-width:720px}
form.formy input, form.formy textarea{width:100%; padding:.9rem 1rem; border:3px solid var(--ink); border-radius:10px; background:#fff; font-family:"Space Grotesk", system-ui}
form.formy textarea{min-height:180px; resize:vertical}
form.formy button{justify-self:start; padding:.7rem 1rem; border:3px solid var(--ink); border-radius:10px; background:linear-gradient(135deg, var(--rose), var(--acid)); color:#061501; font-weight:900; box-shadow: 4px 4px 0 #000}
form.formy input:focus-visible, form.formy textarea:focus-visible{outline:none; box-shadow:0 0 0 4px rgba(45,0,247,.2)}

/* Make the PressTech Media link look like plain text */
.article a[href^="https://presstechmedia.blogspot.com"]{
  color: inherit;           /* same color as surrounding text */
  text-decoration: none;    /* no underline */
}

/* Keep it plain on hover/focus too (neutralize global hover styles) */
.article a[href^="https://presstechmedia.blogspot.com"]:hover,
.article a[href^="https://presstechmedia.blogspot.com"]:focus{
  color: inherit;
  text-decoration: none;
  opacity: 1;               /* remove any global link dimming */
}

.footer-network a {
  color: inherit;         /* Match the surrounding text color */
  text-decoration: none;  /* Remove underline */
}

.footer-network a:hover {
  text-decoration: underline; /* Optional: underline only on hover */
}