:root{
  --bg:#000;
  --bg2:#050505;
  --panel: rgba(14,14,14,.74);
  --panel2: rgba(18,18,18,.62);
  --line: rgba(255,255,255,.10);
  --line2: rgba(255,255,255,.16);
  --text:#f2f2f2;
  --muted: rgba(242,242,242,.70);
  --dim: rgba(242,242,242,.42);
  --shadow: 0 18px 70px rgba(0,0,0,.65);
  --radius: 10px;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* SAFE DEFAULT: prevents whole page highlight if JS fails */
  --mask: radial-gradient(
    circle 140px at 50% 50%,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0) 72%
  );
}

*{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  color:var(--text);
  font-family:var(--mono);
  background: var(--bg);
  letter-spacing:.2px;
  line-height:1.55;
  overflow-x:hidden;
}

/* background layers */
.bg{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
}

.grid{
  position:absolute;
  inset:-2px;
  opacity:1;
}

/* base grid (dim) */
.grid::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity:.22;
}

/* highlight grid (bright), revealed only near cursor */
.grid::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity:.98;

  /* JS-built mask with safe fallback */
  -webkit-mask-image: var(
    --mask,
    radial-gradient(circle 140px at 50% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 72%)
  );
  mask-image: var(
    --mask,
    radial-gradient(circle 140px at 50% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 72%)
  );

  -webkit-mask-mode: alpha;
  mask-mode: alpha;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  will-change: -webkit-mask-image, mask-image;
}

.grain{
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  opacity:.10;
  mix-blend-mode:overlay;
}

.scan{
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.03),
    rgba(255,255,255,.03) 1px,
    transparent 1px,
    transparent 6px
  );
  opacity:.05;
}

.vignette{
  position:absolute;
  inset:-2px;
  background: radial-gradient(circle at 50% 15%, transparent 40%, rgba(0,0,0,.75) 90%);
  opacity:.7;
}

/* a11y */
.skip{
  position:absolute;
  left:-999px;
  top:0;
  background:#000;
  color:#fff;
  padding:.6rem .8rem;
}

.skip:focus{
  left:12px;
  top:12px;
  z-index:9999;
  border-radius:10px;
}

/* topbar */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:12px;
  padding: 12px 18px;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.left{
  display:flex;
  align-items:center;
  gap:10px;
}

.mark{
  width:10px;
  height:10px;
  border-radius:50%;
  background: rgba(255,255,255,.85);
  box-shadow: 0 0 18px rgba(255,255,255,.25);
}

.label{
  font-size:.86rem;
  letter-spacing:1.2px;
  opacity:.9;
}

.brand{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}

.version{
  font-size:.62rem;
  letter-spacing:1.4px;
  color:var(--dim);
  opacity:.85;
}


.center{
  font-size:.78rem;
  letter-spacing:1.8px;
  color:var(--muted);
  text-transform:uppercase;
  text-align:center;
}

.right{
  display:flex;
  justify-content:flex-end;
}

/* THEME TOGGLE */
.theme-toggle{
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.03);
  position: relative;
  padding: 0;
  line-height: 0;
}

.theme-toggle .icon{
  display: grid;
  place-items: center;
  line-height: 0;
}

.theme-toggle svg{ display:block; }

.theme-toggle:hover{ background: rgba(255,255,255,.06); }

.theme-input{ display: none; }

.theme-toggle .icon{
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  transition: transform 500ms;
  color: var(--text);
}

.icon--moon{ transition-delay: 200ms; }
.icon--sun{ transform: scale(0); }

#switch:checked + .icon--moon{
  transform: rotate(360deg) scale(0);
}

#switch:checked ~ .icon--sun{
  transition-delay: 200ms;
  transform: scale(1) rotate(360deg);
}

/* layout */
.wrap{
  max-width:1200px;
  margin:0 auto;
  padding: 20px 18px 60px;
}

.layout{
  display:grid;
  gap:14px;
  grid-template-columns: minmax(300px, 1.05fr) minmax(460px, 1.45fr) minmax(280px, 1fr);
  grid-template-rows: 260px 260px auto;
}

.tall{ grid-row: 1 / span 2; }
.wide{ grid-column: 2; grid-row: 1 / span 2; }
.stack:nth-of-type(3){ grid-column: 3; grid-row: 1; }
.stack:nth-of-type(4){ grid-column: 3; grid-row: 2; }

.grid2{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:14px;
  margin-top: 6px;
}

.tile{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 35%), var(--panel);
  box-shadow: var(--shadow);
  padding: 14px 14px 16px;
  position:relative;
  overflow:hidden;
}

.tile::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: var(--radius);
  background: radial-gradient(circle at 70% 0%, rgba(255,255,255,.10), transparent 45%);
  opacity:.35;
  pointer-events:none;
}

.tile:hover{ border-color: rgba(255,255,255,.18); }

/* Nav highlight: border fades bright then back over 3s */
@keyframes nav-highlight{
  0%, 100%{ border-color: var(--line); }
  50%{ border-color: rgba(255,255,255,.6); }
}

.tile.tile--highlight{
  animation: nav-highlight 3s ease;
}

.kicker{
  font-size:.72rem;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform:uppercase;
}

.title{
  margin-top:6px;
  font-size:1rem;
  opacity:.95;
}

.title.big{
  font-size:1.15rem;
  letter-spacing: .6px;
}

.muted{ color:var(--muted); }
.dim{ color:var(--dim); }

.divider{
  height:1px;
  background: var(--line);
  margin: 12px 0;
}

.tile-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}

.mono{
  margin-top:12px;
  display:grid;
  gap:8px;
}

.row{
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.k{
  color:var(--dim);
  letter-spacing:1px;
}

.v{ color:var(--text); }

.nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}

.nav a{
  color:var(--text);
  text-decoration:none;
  padding:.35rem .5rem;
  border:1px solid var(--line2);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  font-size:.86rem;
}

.nav a:hover{ background: rgba(255,255,255,.06); }

.headline{
  margin: 16px 0 0;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing:.2px;
}

.meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top: 18px;
  color: var(--dim);
  font-size: .78rem;
  letter-spacing: 1.2px;
  text-transform:uppercase;
}

.controls{
  display:flex;
  gap:10px;
  margin-top:12px;
}

.knob{
  width:34px;
  height:34px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.02);
  position:relative;
}

.knob::after{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid var(--line);
  top:7px;
  left:7px;
  opacity:.7;
}

.hint{
  margin-top:12px;
  color:var(--muted);
  font-size:.88rem;
}

.frame{
  margin-top: 14px;
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 10px;
  background: rgba(0,0,0,.35);
}

.frame-inner{
  height: 86px;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity:.55;
}

/* bottom tiles */
.list{
  margin-top:10px;
  display:grid;
  gap:8px;
  color:var(--muted);
}

.proj{ margin-top:10px; }

.pname{
  letter-spacing:.6px;
  font-size:.95rem;
}

.pline{
  color:var(--muted);
  font-size:.88rem;
  margin-top:6px;
}

.links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.links a{
  color:var(--text);
  text-decoration:none;
  border:1px solid var(--line2);
  border-radius: 999px;
  padding:.4rem .6rem;
  background: rgba(255,255,255,.03);
  font-size:.86rem;
}

.links a[aria-disabled="true"]{
  opacity:.5;
  pointer-events:none;
}

/* footer */
.footer{
  margin-top: 18px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:var(--dim);
  font-size:.82rem;
  letter-spacing: 1px;
  text-transform:uppercase;
}

/* responsive */
/* 3 → 2 columns: equal widths so left block isn't squeezed */
@media (max-width: 1200px){
  .layout{
    grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
    grid-template-rows: 260px 260px auto auto;
  }

  .tall{ grid-column: 1; grid-row: 1 / span 2; }
  .wide{ grid-column: 2; grid-row: 1 / span 2; }
  .layout > .tile.stack:nth-of-type(3){ grid-column: 1; grid-row: 3; }
  .layout > .tile.stack:nth-of-type(4){ grid-column: 2; grid-row: 3; }

  .grid2{
    grid-column: 1 / -1;
    grid-row: 4;
    grid-template-columns: 1fr 1fr;
  }
  #contact{ grid-column: 1 / -1; }

  .headline{ font-size: 1.35rem; }
}

/* 2 → 1 column: stack everything full-width (override 2-col placement) */
@media (max-width: 900px){
  .wrap{
    padding-left: 14px;
    padding-right: 14px;
    overflow-wrap: break-word;
  }

  .layout{
    min-width: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
  }

  .layout > *{
    min-width: 0;
    grid-column: 1;
    grid-row: auto;
  }

  /* Same specificity as 2-col rules so 1-col wins: force every block into column 1 */
  .layout > .tile.tall,
  .layout > .tile.wide,
  .layout > .tile.stack:nth-of-type(3),
  .layout > .tile.stack:nth-of-type(4),
  .layout > .grid2{
    grid-column: 1;
    grid-row: auto;
  }

  .grid2{
    grid-template-columns: 1fr;
  }

  .grid2 > *{
    min-width: 0;
  }

  .footer{
    flex-wrap: wrap;
  }

  .headline{ font-size: 1.25rem; }
}