/* 90210 — PURE BLACK/WHITE ONLY (no gray, no color) */

:root{
  --bg:#000;
  --fg:#fff;
  --max:980px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

a{
  color:var(--fg);
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:2px;
}
a:hover{
  background:var(--fg);
  color:var(--bg);
}

img{max-width:100%; display:block}

/* TOP BAR */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--bg);
  border-bottom:2px solid var(--fg);
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.logo{
  color:var(--fg);
  text-decoration:none;
  font-family: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.03em;
  font-size:18px;
}

.nav{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
}
.nav a{
  font-family: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.02em;
  font-size:12px;
  padding:6px 8px;
  border:2px solid var(--fg);
  background:var(--bg);
  color:var(--fg);
  text-decoration:none;
}
.nav a:hover{
  background:var(--fg);
  color:var(--bg);
}
.nav a.active{
  background:var(--fg);
  color:var(--bg);
}

.menu{
  display:none;
  border:2px solid var(--fg);
  background:var(--bg);
  color:var(--fg);
  padding:7px 9px;
  font-weight:900;
  text-transform:uppercase;
}

/* LAYOUT */
main{
  max-width:var(--max);
  margin:0 auto;
  padding:18px 12px 70px;
}

.section{margin-top:28px}

.section-head{
  margin-bottom:10px;
  border-top:3px solid var(--fg);
  border-bottom:1px solid var(--fg);
  padding:10px 0;
}
.section-head h1,.section-head h2{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight:900;
  letter-spacing:-.03em;
  text-transform:uppercase;
}
.section-head p{
  margin:6px 0 0;
  font-size:12px;
}

/* HERO */
.hero{
  border:3px solid var(--fg);
  background:var(--bg);
  padding:12px;
}

.hero-inner{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:12px;
  align-items:start;
}

.kicker{
  margin:0 0 8px;
  font-size:11px;
  text-transform:uppercase;
}

.title{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight:900;
  font-size: clamp(48px, 7vw, 92px);
  line-height:.9;
  letter-spacing:-.05em;
  text-transform:uppercase;
}

.subtitle{
  margin:12px 0 0;
  font-size:13px;
  max-width:70ch;
}

/* BUTTONS */
.cta{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}

.btn{
  font-family: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.02em;
  font-size:12px;
  padding:8px 10px;
  border:3px solid var(--fg);
  background:var(--bg);
  color:var(--fg);
  text-decoration:none;
}
.btn:hover{background:var(--fg); color:var(--bg)}
.btn.ghost{border-style:dashed}

/* CHIPS */
.chips{margin-top:12px; display:flex; flex-wrap:wrap; gap:8px}
.chip{
  border:1px solid var(--fg);
  padding:6px 8px;
  font-size:11px;
  text-transform:uppercase;
  background:var(--bg);
  color:var(--fg);
}

/* LOG */
.log{
  margin-top:12px;
  border-top:2px solid var(--fg);
  padding-top:10px;
  font-size:12px;
  line-height:1.55;
}
.log .row{
  display:flex;
  gap:10px;
  padding:4px 0;
  border-bottom:1px solid var(--fg);
}
.log .id{min-width:70px}
.log .msg{margin-left:auto; text-align:right}
.log .msg strong{
  background:var(--fg);
  color:var(--bg);
  padding:1px 3px;
}

/* HERO MEDIA */
.hero-media{
  border:2px dashed var(--fg);
  padding:8px;
  background:var(--bg);
}
.hero-media img{
  width:100%;
  filter: grayscale(1) contrast(1.4) brightness(1);
}

/* GRIDS / CARDS */
.grid{display:grid; gap:12px}
.grid.two{grid-template-columns:1fr 1fr}
.grid.three{grid-template-columns:repeat(3, 1fr)}

.card{
  border:2px solid var(--fg);
  background:var(--bg);
  padding:12px;
}
.card.clickable{text-decoration:none; display:block}
.card.clickable:hover{background:var(--fg); color:var(--bg)}
.card.clickable:hover .muted{color:var(--bg)}

.muted{opacity:1}
.small{font-size:12px}

/* EMBED */
.embed{
  margin-top:10px;
  border:3px solid var(--fg);
  background:var(--bg);
  overflow:hidden;
}
.embed.tall{height:320px}
.embed iframe{display:block; background:var(--bg)}

/* TABLE */
.table{display:grid}
.trow{
  display:grid;
  grid-template-columns: 120px 1fr 1.2fr 120px;
  gap:10px;
  padding:8px 0;
  border-top:1px solid var(--fg);
}
.trow.thead{
  border-top:0;
  font-size:11px;
  text-transform:uppercase;
  font-weight:900;
  font-family: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* STACK ROWS */
.stack{display:grid; gap:10px; margin-top:10px}
.row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px;
  border:2px solid var(--fg);
  background:var(--bg);
  text-decoration:none;
}
.row:hover{background:var(--fg); color:var(--bg)}

/* CONTACT */
.contact{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:10px;
}

/* FOOTER */
.footer{
  margin-top:30px;
  padding-top:14px;
  border-top:3px solid var(--fg);
  text-align:left;
}

/* MOBILE */
@media (max-width: 920px){
  .hero-inner{grid-template-columns:1fr}
  .grid.two{grid-template-columns:1fr}
  .grid.three{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .trow{grid-template-columns: 110px 1fr; grid-auto-rows:auto}
  .trow > div:nth-child(3), .trow > div:nth-child(4){grid-column: 2 / 3}
}

@media (max-width: 720px){
  .nav{display:none}
  .menu{display:inline-flex}
  .nav.open{
    display:flex;
    position:absolute;
    right:12px;
    top:54px;
    flex-direction:column;
    gap:6px;
    padding:10px;
    border:3px solid var(--fg);
    background: var(--bg);
    width: 240px;
  }
}