/* Reset-ish */
* {box-sizing: border-box; margin: 0; padding: 0}
html,body {height: 100%;}

/* Brutalist palette */
:root{
  --bg1:#f6f5f3; /* off-white */
  --bg2:#e6e4e1; /* slightly darker */
  --accent:#0b0b0b; /* almost black */
  --accent-2:#d62828; /* brutal red */
}

body{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
  color: var(--accent);
  background: repeating-linear-gradient(
    180deg,
    var(--bg1) 0 40px,
    var(--bg2) 40px 80px
  );
  line-height:1.2;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Make the page tall so background scrolls */
.panel{
  height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:40px;
  border-top:6px solid var(--accent);
  border-bottom:6px dashed var(--accent-2)
}
.panel .meta{
  max-width:900px;
  width:100%;
  font-size:14px;
  color:rgba(0,0,0,.6)
}

/* Fixed center brand */
.brand{
  position:fixed;
  left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:999;
  pointer-events:none; /* allows scrolling through */
  text-align:center;
}

.brand .box{
  display:inline-block;
  padding:18px 34px;
  border:8px solid var(--accent);
  box-shadow: 20px 20px 0 0 rgba(0,0,0,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.65));
  transform: rotate(-0.75deg);
}

.brand h1{
  font-size: clamp(40px, 12vw, 160px);
  line-height:0.85;
  margin:0;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing: .25em;
  -webkit-text-stroke: 1px rgba(0,0,0,0.02);
}

/* A thin red underline accent */
.brand .accent{
  height:8px;
  margin-top:16px;
  background:var(--accent-2);
  width:120%;
  margin-left:-10%;
  transform: rotate(-0.75deg);
  box-shadow: 6px 6px 0 rgba(0,0,0,0.05);
  pointer-events:auto;
}

/* Extra brutal touches when window is narrow */
@media (max-width:520px){
  .brand .box{padding:12px 16px; border-width:6px}
  .brand h1{font-size: clamp(32px, 18vw, 80px)}
}

/* Small decorative elements that scroll (creates movement behind the fixed word) */
.floating-grid{
  position:fixed; inset:0; pointer-events:none; z-index:1; opacity:0.06; mix-blend-mode:multiply;
  background-image: linear-gradient(90deg, transparent 0px, transparent 8px, rgba(0,0,0,0.06) 8px, rgba(0,0,0,0.06) 9px);
  background-size: 9px 9px;
}

/* make sure main content sits below the fixed brand visually */
main{position:relative; z-index:0}

/* tiny tactile brutal button if user clicks (optional) */
.cta{
  display:inline-block;
  margin-top:12px;
  padding:6px 10px;
  border:3px solid var(--accent);
  text-decoration:none;
  font-weight:700;
  background:transparent;
  color:var(--accent);
}

h2, h3 {
  font-size:18px;
  margin-bottom:12px;
}