@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&family=Space+Mono:wght@400;700&display=swap');

:root{
  --bg:#0a0a0a;
  --fg:#f2f2f2;
  --muted:#a0a0a0;
  --accent:#ff2a6d;
  --accent2:#00f7ff;
  --grid: rgba(255,255,255,0.05);
  --ring: 0 0 40px rgba(255,42,109,.45), 0 0 90px rgba(0,247,255,.2);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Space Mono', monospace;
  background: radial-gradient(1200px 800px at 20% 10%, #111 0%, var(--bg) 55%) fixed;
  color:var(--fg);
  line-height:1.65;
  letter-spacing:.2px;
}

/* Decorative overlays */
.noise{
  pointer-events:none; position:fixed; inset:0; z-index:1;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity=".06"/></svg>');
  mix-blend-mode:soft-light; opacity:.2;
}
.grid{
  position:fixed; inset:0; z-index:0;
  background:
    linear-gradient(to right, var(--grid) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px) 0 0/40px 40px;
  mask-image: radial-gradient(600px 400px at 50% 40%, black 40%, transparent 80%);
}

/* Suppress browser styling on anchor revisit */
:target,
:target h3,
:target a,
:target .card-head {
  outline: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

/* Header */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:10;
  backdrop-filter: blur(8px);
  background: linear-gradient(to bottom, rgba(10,10,10,.85), rgba(10,10,10,.2));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.wrap{ max-width:1180px; margin:0 auto; padding:0 20px }
.nav{ display:flex; align-items:center; justify-content:space-between; height:64px }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--fg) }
.logo{ width:26px; height:26px; border:2px solid var(--fg); transform: rotate(25deg); border-radius:4px; box-shadow: var(--ring) }
.brand-text{ font-weight:700; letter-spacing:1px; font-size:14px; }
.links a{ color:var(--muted); text-decoration:none; margin-left:16px; font-size:14px }
.links a:hover{ color:var(--fg) }

/* Sections */
section{ position:relative; z-index:2; padding:84px 0 }
@media (max-width:780px){ section{ padding:64px 0 } }

/* Hero */
.hero{ min-height:92vh; display:grid; place-items:center; text-align:center; padding-top:120px }
.glitch-title{
  font-family:'Rubik Mono One', sans-serif;
  font-size: clamp(38px, 6vw, 96px);
  line-height:1.05; margin:0;
  text-transform:uppercase;
  text-shadow: 2px 2px 0 var(--accent), -2px -2px 0 var(--accent2);
  animation: jitter 2.8s infinite steps(2);
}
.lead{ max-width:760px; margin:16px auto 0; color:var(--muted); font-size:clamp(14px,1.6vw,18px) }
.cta{ margin-top:28px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
.button{
  border:1px solid rgba(255,255,255,.2);
  padding:12px 18px; text-decoration:none; text-transform:uppercase; letter-spacing:1px; font-weight:700; cursor:pointer;
  display:inline-block;
}
.primary{ background:linear-gradient( to bottom right, var(--accent), #b10c47); color:#fff; box-shadow: var(--ring) }
.secondary{ background:transparent; color:#fff }
.button:hover{ transform: translateY(-2px) }
.scanline{ position:absolute; inset:auto 0 0 0; height:2px; background:linear-gradient(90deg, transparent, rgba(255,42,109,.8), transparent) }

/* Headings */
.h{
  font-family:'Rubik Mono One', sans-serif;
  text-transform:uppercase; margin:0 0 14px 0;
  font-size: clamp(22px, 3.4vw, 40px);
  text-shadow:1px 1px 0 var(--accent2);
}
.sub{ color:var(--muted); max-width:800px }

/* Cards */
.cards{ margin-top:22px; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px }
.card{
  background: linear-gradient(180deg, #141418, #0e0e10);
  border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:18px; position:relative; overflow:hidden;
}
.card:before{
  content:''; position:absolute; inset:-1px; pointer-events:none;
  background: radial-gradient(220px 70px at 10% -20%, rgba(255,42,109,.18), transparent 40%),
              radial-gradient(220px 70px at 110% 120%, rgba(0,247,255,.12), transparent 40%);
}
.card h3{ margin:6px 0 8px; font-size:18px }
.card p{ margin:0; color:var(--muted); font-size:14px }
.tag{ font-size:12px; color:var(--accent2); letter-spacing:1px }
.card-head {
  color: inherit;                /* inherit white text */
  text-decoration: none;         /* no underline */
  transition: color 0.2s ease;   /* smooth hover */
}

.card-head,
.card-head:link,
.card-head:visited,
.card-head:hover,
.card-head:active {
  text-decoration: none !important;
  color: inherit;
}

.card-head:hover {
  color: #00aaff;  /* hover effect only */
}




/* Gallery chaos */
.grid-chaos{ margin-top:24px; display:grid; grid-template-columns: repeat(12, 1fr); gap:10px }
.thumb{
  background:linear-gradient(135deg, #1a1a1d, #0e0e10);
  border:1px dashed rgba(255,255,255,.14); border-radius:10px; min-height:130px; position:relative; overflow:hidden;
}
.thumb .label{
  position:absolute; bottom:8px; left:8px; background:rgba(0,0,0,.5); padding:4px 8px; font-size:12px; border-radius:6px; border:1px solid rgba(255,255,255,.15);
}
.thumb.x2{ grid-column: span 6 } .thumb.x3{ grid-column: span 4 } .thumb.x1{ grid-column: span 3 }
@media(max-width:900px){ .thumb.x2,.thumb.x3,.thumb.x1{ grid-column: span 6 } }
@media(max-width:560px){ .thumb.x2,.thumb.x3,.thumb.x1{ grid-column: span 12 } }

.center{ text-align:center }

/* Footer */
.site-footer{ border-top:1px solid rgba(255,255,255,.08); padding:38px 0 90px; text-align:center; color:var(--muted); background:linear-gradient(180deg, transparent, rgba(255,255,255,.02)) }

/* Egg overlay */
.glitch-break{
  position:fixed; inset:0; background:#000; z-index:999; display:none; place-items:center;
  color:#fff; font-family:'Rubik Mono One', sans-serif; font-size: clamp(26px, 4.5vw, 56px);
}

.closer .sub {
  font-size: 1.6rem;     /* make it bigger */
  font-weight: 600;
  color: #fff;           /* bright white */
  text-shadow: 2px 2px 0 #00f7ff;  /* subtle glow like top heading */
  margin-top: 12px;
}


/* Animation */
@keyframes jitter{
  0%,100%{ transform:translate(0,0) skew(0deg) }
  10%{ transform:translate(1px,-1px) skew(-.2deg) }
  20%{ transform:translate(-1px,1px) skew(.2deg) }
  30%{ transform:translate(1px,1px) skew(-.1deg) }
  40%{ transform:translate(-1px,-1px) skew(.1deg) }
  50%{ transform:translate(0,0) }
}

/* Nuke all browser defaults for Manifesto card links */
#manifesto .cards .card h3 > a.card-head,
#manifesto .cards .card h3 > a.card-head:link,
#manifesto .cards .card h3 > a.card-head:visited,
#manifesto .cards .card h3 > a.card-head:hover,
#manifesto .cards .card h3 > a.card-head:active,
#manifesto .cards .card h3 > a.card-head:focus {
  all: unset;                     /* reset every property */
  cursor: pointer;                /* keep pointer */
  color: inherit !important;      /* use heading color */
  display: inline;                /* normal inline flow */
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
}

/* Hover state only: turn blue */
#manifesto .cards .card h3 > a.card-head:hover {
  color: #00aaff !important;
}

#failure .grid-chaos {
  margin-top:24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal wide containers like Psycho Diaries */
  gap: 18px; /* match spacing */
}

#failure .thumb {
  min-height: 140px; /* taller like the Diaries cards */
  width: 100%;
  justify-content: center;
}

#failure .thumb .label {
  font-size: 14px;
  text-align: center;
}
/* ===== Failure Hall — scoped override (ONLY affects #failure) ===== */
#failure .grid-chaos {
  margin-top: 24px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important; /* 3 equal columns */
  grid-auto-rows: 160px;     /* consistent row height */
  gap: 18px !important;
  align-items: start !important;
}

/* neutralize any earlier span/size helpers inside #failure only */
#failure .thumb.x3,
#failure .thumb.x2,
#failure .thumb.x1 {
  grid-column: auto !important;
}

/* thumb capsule styling (matches Psycho Diaries feel) */
#failure .thumb {
  min-height: 140px !important;            /* match Diaries card height */
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  padding: 14px 20px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg,#15151a,#0f0f12) !important;
  border:1px dashed rgba(255,255,255,0.06) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02) !important;
  cursor: pointer !important;
  transition: transform .18s ease, box-shadow .18s ease;
}

/* label inside capsule - centered */
#failure .thumb .label {
  display:block;
  font-size: 14px;
  font-weight:700;
  max-width:100%;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
  margin:0 auto;
  text-align:center;
  padding:6px 10px;
  border-radius:8px;
  background: rgba(0,0,0,0.45);
  border:1px solid rgba(255,255,255,0.06);
}

/* hover lift like Diaries */
#failure .thumb:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
}

/* responsive */
@media (max-width: 980px) {
  #failure .grid-chaos { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 140px; }
}
@media (max-width: 560px) {
  #failure .grid-chaos { grid-template-columns: 1fr !important; grid-auto-rows: auto; }
  #failure .thumb { min-height: 96px; padding:12px; }
}

/* ensure flip-card child fills the capsule if present */
#failure .thumb .flip-card,
#failure .thumb .flip-card .flip-inner {
  width:100%;
  height:100%;
}

/* ===== Improve comments section ===== */
#failure-popup .popup-right {
  background: rgba(255,255,255,0.02);
  border-radius: 10px;
  padding: 12px;
}

#failure-popup .comments-list .comment {
  background: linear-gradient(180deg, #1a1a1d, #0f0f12);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 8px 10px;
  color: #ddd;
  font-size: 13px;
}

#failure-popup .comments-list .muted {
  color: #aaa;
  text-align: center;
  font-style: italic;
  padding: 6px 0;
}

#failure-popup .comment-form input[type="text"] {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  background: #111;
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  font-size: 13px;
}

#failure-popup .comment-form button {
  background: linear-gradient(90deg,#00f7ff,#0077ff);
  color: #fff;
  font-weight: 700;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
#failure-popup .comment-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 247, 255, 0.4);
}

/* ===== Crack button upgrade ===== */
#failure-popup .btn.primary {
  background: linear-gradient(90deg, #ff512f, #f09819);
  color: #fff !important;
  font-weight: 700;
  border: none;
  box-shadow: 0 4px 18px rgba(255, 90, 0, 0.5);
  transition: all 0.2s ease-in-out;
}

#failure-popup .btn.primary:hover {
  background: linear-gradient(90deg, #ff752f, #ffb347);
  box-shadow: 0 6px 26px rgba(255, 120, 0, 0.7);
  transform: scale(1.05);
}