/* =========================
   RESET / GLOBAL
========================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

:root{
  /* ===== AGGRESSIVE ARCHITECTURAL RED SHEET ===== */
  --bg: #c83328;        /* red field */
  --panel: #d63a2e;     /* panel red */
  --panel2: #b92e24;    /* header strip red */

  /* ink */
  --text: #0a0a0a;
  --muted: rgba(0,0,0,0.68);
  --muted2: rgba(0,0,0,0.50);

  /* linework */
  --stroke: rgba(0,0,0,0.28);
  --stroke2: rgba(0,0,0,0.58);

  /* accents (kept minimal + "ink") */
  --red: #0a0a0a;       /* treat as ink now */
  --gold: #0a0a0a;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial;

  --radius: 10px;
  --pad: clamp(16px, 2.6vw, 28px);
  --max: 1180px;
}

body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.55;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main{
  flex:1;
}

a{
  color: rgba(0,0,0,0.92);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.35);
  transition: border-color 0.15s, transform 0.15s, color 0.15s;
}
a:hover{
  color: #000;
  border-bottom-color: rgba(0,0,0,0.95);
}

/* =========================
   BACKDROP: blueprint grid + datums (NO gradients)
========================== */
.backdrop{
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: 0.80;
  background:
    /* major grid */
    linear-gradient(to right, rgba(0,0,0,0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.18) 1px, transparent 1px),
    /* minor grid */
    linear-gradient(to right, rgba(0,0,0,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.08) 1px, transparent 1px);
  background-size:
    240px 240px,
    240px 240px,
    48px 48px,
    48px 48px;
}

.datums{
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.85;
  background:
    linear-gradient(to right, transparent 0 14%, rgba(0,0,0,0.22) 14% 14.12%, transparent 14.12% 100%),
    linear-gradient(to right, transparent 0 78%, rgba(0,0,0,0.26) 78% 78.12%, transparent 78.12% 100%),
    linear-gradient(to bottom, transparent 0 18%, rgba(0,0,0,0.20) 18% 18.12%, transparent 18.12% 100%),
    linear-gradient(to bottom, transparent 0 68%, rgba(0,0,0,0.18) 68% 68.12%, transparent 68.12% 100%);
}

/* =========================
   FULL-WIDTH "STRUCTURE"
========================== */
.band{
  width: 100%;
  border-bottom: 2px solid var(--stroke2);
  background: var(--panel2);
}

.container{
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ticker becomes spec strip */
.ticker{
  border-bottom: 2px solid var(--stroke2);
  background: var(--panel2);
  overflow: hidden;
}
.ticker .row{
  display: flex;
  gap: 2.25rem;
  white-space: nowrap;
  padding: 0.65rem 0;
  font-family: var(--mono);
  font-size: 0.84rem;
  color: rgba(0,0,0,0.72);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  animation: marquee 30s linear infinite;
}
.ticker b{ color: rgba(0,0,0,0.96); font-weight: 950; }
.dot{ opacity: 0.55; }
@keyframes marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* nav = ink strip */
.nav{
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 2px solid var(--stroke2);
  background: var(--panel2);
}
.nav .inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 0;
}
.brand{
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
}
.brand .name{
  font-family: var(--mono);
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.90rem;
  color: rgba(0,0,0,0.95);
}
.brand .tag{
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.75);
  border: 2px solid rgba(0,0,0,0.55);
  padding: 0.20rem 0.55rem;
  border-radius: 999px;
  background: transparent;
}

/* =========================
   MAIN LAYOUT
========================== */
.section{
  padding: clamp(18px, 3vw, 34px) 0;
}

.grid{
  display: grid;
  grid-template-columns: 1.45fr 0.55fr;
  gap: 1rem;
  position: relative;
  isolation: isolate;
  align-items: start;
}

/* =========================
   ARCHITECTURAL PANELS
========================== */
.block, .tile, .strip{
  border: 2px solid var(--stroke2);
  background: var(--panel);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 0 rgba(0,0,0,0.35);
}

/* corner ticks */
.block .ticks, .tile .ticks{
  position: absolute;
  inset: 12px;
  pointer-events: none;
  opacity: 0.9;
}
.block .ticks::before, .tile .ticks::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(var(--stroke2) 0 0) left top / 18px 2px no-repeat,
    linear-gradient(var(--stroke2) 0 0) left top / 2px 18px no-repeat,
    linear-gradient(var(--stroke2) 0 0) right top / 18px 2px no-repeat,
    linear-gradient(var(--stroke2) 0 0) right top / 2px 18px no-repeat,
    linear-gradient(var(--stroke2) 0 0) left bottom / 18px 2px no-repeat,
    linear-gradient(var(--stroke2) 0 0) left bottom / 2px 18px no-repeat,
    linear-gradient(var(--stroke2) 0 0) right bottom / 18px 2px no-repeat,
    linear-gradient(var(--stroke2) 0 0) right bottom / 2px 18px no-repeat;
}

/* remove old rails */
.block::before, .block::after, .tile::before{ content: none !important; }

.blockhead{
  border-bottom: 2px solid var(--stroke2);
  background: var(--panel2);
  padding: 1.0rem 1.1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: end;
}

.kicker{
  font-family: var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 950;
  font-size: 0.78rem;
  color: rgba(0,0,0,0.78);
  display: inline-flex;
  gap: 0.65rem;
  align-items: center;
  padding: 0rem 0rem 0rem 1rem;
}
.kicker .id{
  border: 2px solid rgba(0,0,0,0.55);
  padding: 0.14rem 0.5rem;
  border-radius: 999px;
  background: transparent;
  color: rgba(0,0,0,0.72);
  letter-spacing: 0.10em;
  font-weight: 850;
  text-transform: none;
}

.bigtitle{
  padding:0rem 1rem 0rem 1rem;
  font-size: clamp(2.45rem, 5.2vw, 3.8rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 950;
  color: #000;
}

.blockbody{
  padding: 2rem;
  display: grid;
  gap: 1rem;
}

.lede{
  font-size: 1.08rem;
  color: rgba(0,0,0,0.88);
}

.callout{
  border: 2px solid rgba(0,0,0,0.55);
  background: transparent;
  padding: 0.95rem;
  border-radius: calc(var(--radius) - 2px);
  display: grid;
  gap: 0.75rem;
}
.callout p{
  color: rgba(0,0,0,0.86);
  font-size: 1.02rem;
}

.berkeley-highlight{
  color: #000;
  font-weight: 900;
  border-bottom: 1px dashed rgba(0,0,0,0.65);
}
.berkeley-highlight:hover{
  border-bottom-style: solid;
}

/* =========================
   RIGHT COLUMN: tiles (NO buttony links)
========================== */
.tiles{
  display: grid;
  gap: 0.95rem;
}

.tile .top{
  padding: 1.5rem 0rem 0.5rem 2rem;
  border-bottom: 2px solid var(--stroke2);
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  background: var(--panel2);
}
.tile .top span{
  font-family: var(--mono);
  font-size: 0.76rem;
  color: rgba(0,0,0,0.78);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 950;
}
.tile .top code{
  font-family: var(--mono);
  font-size: 0.74rem;
  color: rgba(0,0,0,0.72);
  border: 2px solid rgba(0,0,0,0.55);
  padding: 0.14rem 0.45rem;
  border-radius: 999px;
  background: transparent;
}

.tile .links{
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 2.0rem 1.0rem 2.0rem;
  font-size: 1.0rem;
}

/* plain rows, no tiles/buttons */
.tile .links a{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.52rem 0;
  border: none;
  background: transparent;
  transform: none;
  color: rgba(0,0,0,0.92);
}
.tile .links a::after{
  font-family: var(--mono);
  color: rgba(0,0,0,0.55);
  transition: transform 0.15s, color 0.15s;
}
.tile .links a:hover::after{
  color: rgba(0,0,0,0.95);
  transform: translateX(1px);
}
.tile .links a:hover{
  border-bottom: 1px solid rgba(0,0,0,0.85);
}

/* mail link stays tag-like, not button */
a[href^="mailto"]{
  border: 2px solid rgba(0,0,0,0.55);
  padding: 0.12rem 0.4rem;
  background: transparent;
  font-weight: 900;
  white-space: nowrap;
}
a[href^="mailto"]:hover{
  color: #000;
}

/* =========================
   INTERCONNECTS (ink lines)
========================== */
.interconnects{
  position: absolute;
  inset: -18px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.65;
}
.interconnects svg{
  width: 100%;
  height: 100%;
  display: block;
}
.block, .tile, .strip{
  position: relative;
  z-index: 2;
}

/* =========================
   FOOTER
========================== */
.footerband{
  border-top: 2px solid var(--stroke2);
  background: var(--panel2);
  padding: 1.25rem 0;
}
.footergrid{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
}
.footer-left{
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.footer-gif img{
  max-width: 165px;
  border-radius: calc(var(--radius) - 2px);
  border: 2px solid rgba(0,0,0,0.55);
  background: transparent;
  padding: 8px 10px;
  opacity: 0.92;
  transition: opacity 0.15s;
}
.footer-gif img:hover{ opacity: 1; }

/* keep CRT typing link as-is (your vibe), but remove gradients/glow-heavy hover shifts */
.typing-link{
  font-family: var(--mono);
  background: transparent;
  color: #000;
  border: 2px solid rgba(0,0,0,0.70);
  padding: 0.62rem 0.9rem;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  position: relative;
  overflow: hidden;
}
/* scanlines are not gradients (repeating lines); keep subtle */
.typing-link::after{
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.08) 0px,
    rgba(0,0,0,0.08) 2px,
    transparent 2px,
    transparent 4px
  );
  pointer-events: none;
  opacity: 0.55;
  animation: scan 0.45s linear infinite;
}
@keyframes scan {
  from { transform: translateY(0); }
  to   { transform: translateY(4px); }
}
.typing-link:hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,0.95);
  color: #000;
}

.copyright{
  font-family: var(--mono);
  color: rgba(0,0,0,0.70);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  margin-left: auto;
}

/* =========================
   RESPONSIVE
========================== */
@media (max-width: 980px){
  .grid{ grid-template-columns: 1fr; }
  .footergrid{ grid-template-columns: 1fr; }
  .nav .inner{ flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce){
  .ticker .row{ animation: none; }
  .typing-link::after{ animation: none; }
}