@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --paper:#FFFFFF;
  --ink:#0A0A0A;
  --gray:#565656;
  --hairline:#B8B4AA;
  --card:#F3F1EB;
  --stamp:#0A0A0A;
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  padding:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Source Serif 4', serif;
}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

a{color:var(--ink);}

.site-header{
  border-bottom:2px solid var(--ink);
  padding:22px 28px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}

.brand{
  font-family:'Special Elite', monospace;
  font-size:1.4rem;
  letter-spacing:1px;
  text-decoration:none;
  color:var(--ink);
}

.brand::before{
  content:"☰ ";
}

nav.tabs{
  display:flex;
  gap:22px;
  font-family:'JetBrains Mono', monospace;
  font-size:0.82rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
}

nav.tabs a{
  text-decoration:none;
  padding-bottom:4px;
  border-bottom:2px solid transparent;
  color:var(--gray);
}
nav.tabs a.active, nav.tabs a:hover{
  color:var(--ink);
  border-bottom-color:var(--ink);
}

.who{
  font-family:'JetBrains Mono', monospace;
  font-size:0.78rem;
  color:var(--gray);
}
.who button{
  background:none;
  border:1px solid var(--hairline);
  color:var(--gray);
  font-family:'JetBrains Mono', monospace;
  font-size:0.7rem;
  padding:3px 8px;
  margin-left:8px;
  cursor:pointer;
}
.who button:hover{border-color:var(--ink); color:var(--ink);}

main{
  flex:1;
  max-width:960px;
  width:100%;
  margin:0 auto;
  padding:48px 28px 80px;
}

.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:0.75rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gray);
  margin:0 0 6px;
}

h1{
  font-family:'Special Elite', monospace;
  font-weight:400;
  font-size:2.1rem;
  margin:0 0 8px;
  letter-spacing:0.5px;
}

.lede{
  color:var(--gray);
  font-size:1.02rem;
  max-width:56ch;
  margin:0 0 40px;
}

/* ---- Catalog card, the signature element ---- */
.card{
  position:relative;
  background:var(--card);
  border:1px solid var(--ink);
  padding:20px 22px 18px;
  font-family:'JetBrains Mono', monospace;
}

.card-row{display:flex; gap:22px; align-items:flex-start;}
.card-cover{
  width:64px; height:96px; object-fit:cover;
  border:1px solid var(--ink);
  flex-shrink:0;
  background:var(--paper);
}
.card-cover.placeholder{
  display:flex; align-items:center; justify-content:center;
  font-family:'Special Elite', monospace;
  font-size:0.65rem; color:var(--gray); text-align:center; padding:6px;
}
.card-title{
  font-family:'Source Serif 4', serif;
  font-weight:600;
  font-size:1.05rem;
  margin:0 0 2px;
}
.card-author{
  color:var(--gray);
  font-size:0.82rem;
  margin:0 0 10px;
}
.card-meta{
  font-size:0.72rem;
  color:var(--gray);
  letter-spacing:0.03em;
}
.card-meta span{display:block; margin-bottom:2px;}
.card-desc{
  font-size:0.85rem;
  color:var(--ink);
  line-height:1.45;
  margin:8px 0 10px;
}
.card-desc .more-toggle{
  background:none; border:none; padding:0; margin-left:4px;
  color:var(--gray); text-decoration:underline; cursor:pointer;
  font-size:0.82rem; font-family:inherit;
}

.stamp{
  position:absolute;
  top:14px; right:16px;
  border:2px solid var(--stamp);
  color:var(--stamp);
  border-radius:50%;
  width:56px; height:56px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transform:rotate(-8deg);
  font-family:'Special Elite', monospace;
  line-height:1;
}
.stamp .n{font-size:1.15rem;}
.stamp .lbl{font-size:0.5rem; letter-spacing:0.08em;}

/* form elements */
.field{margin-bottom:18px;}
label{
  display:block;
  font-family:'JetBrains Mono', monospace;
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--gray);
  margin-bottom:6px;
}
input[type=text], textarea{
  width:100%;
  padding:11px 12px;
  font-family:'JetBrains Mono', monospace;
  font-size:0.95rem;
  border:1px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  resize:vertical;
}
input[type=text]:focus, textarea:focus{outline:2px solid var(--ink); outline-offset:1px;}

button.btn, .btn{
  font-family:'JetBrains Mono', monospace;
  font-size:0.8rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  background:var(--ink);
  color:var(--paper);
  border:1px solid var(--ink);
  padding:11px 20px;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
}
button.btn:hover, .btn:hover{background:var(--paper); color:var(--ink);}
button.btn:disabled{opacity:0.4; cursor:not-allowed;}

.btn.outline{background:var(--paper); color:var(--ink);}
.btn.outline:hover{background:var(--ink); color:var(--paper);}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:20px;
  margin-top:10px;
}

.notice{
  border:1px dashed var(--hairline);
  padding:14px 16px;
  font-family:'JetBrains Mono', monospace;
  font-size:0.82rem;
  color:var(--gray);
  margin-bottom:24px;
}
.notice.error{border-color:var(--ink); color:var(--ink);}
.notice.win{
  border:2px solid var(--ink);
  color:var(--ink);
  font-family:'Special Elite', monospace;
  padding:20px;
  text-align:center;
  font-size:1rem;
}

.phase-header{
  background:var(--ink);
  border:2px solid var(--ink);
  padding:30px 26px 34px;
  margin-bottom:28px;
  text-align:center;
  box-shadow:0 4px 0 rgba(0,0,0,0.15);
}
.phase-header .phase-state{
  font-family:'Special Elite', monospace;
  font-size:2.1rem;
  letter-spacing:1.5px;
  margin:0 0 14px;
  text-transform:uppercase;
  color:var(--paper);
}
.phase-header .phase-timer{
  font-family:'JetBrains Mono', monospace;
  font-weight:500;
  font-size:2.1rem;
  letter-spacing:0.5px;
  color:var(--paper);
  margin:0;
  border:2px solid var(--paper);
  display:inline-block;
  padding:10px 22px;
  border-radius:4px;
}
.phase-header .phase-sub{
  font-family:'JetBrains Mono', monospace;
  font-size:0.85rem;
  color:#C9C9C9;
  margin:14px 0 0;
}

.roster{
  display:flex; flex-wrap:wrap; gap:10px;
  font-family:'JetBrains Mono', monospace;
  font-size:0.78rem;
}
.roster .who-tag{
  border:1px solid var(--hairline);
  padding:5px 10px;
}
.roster .who-tag.voted{border-color:var(--ink);}
.roster .who-tag.voted::before{content:"✓ ";}
.roster .who-tag.pending{color:var(--gray);}
.roster .who-tag.pending::before{content:"… ";}

.roster-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}
.roster-col-title{
  font-family:'JetBrains Mono', monospace;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--gray);
  margin:0 0 10px;
}
@media (max-width: 640px){
  .roster-columns{grid-template-columns:1fr;}
}

.section-title{
  font-family:'JetBrains Mono', monospace;
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--gray);
  border-bottom:1px solid var(--hairline);
  padding-bottom:8px;
  margin:38px 0 16px;
}

.badge-super{
  border:1px solid var(--ink);
  color:var(--ink);
  font-size:0.62rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:1px 6px;
  margin-left:2px;
}

.super-card{
  margin-bottom:28px;
  border-style:dashed;
}
.super-card .btn{margin-right:10px;}

.card-clickable{cursor:pointer;}
.card-clickable:hover{border-color:var(--ink); border-width:1.5px;}

.voter-panel{
  margin-top:14px;
  padding-top:12px;
  border-top:1px dashed var(--hairline);
  font-size:0.75rem;
  color:var(--gray);
  padding-left:56px;
}

.card-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 16px;
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid var(--hairline);
  font-family:'JetBrains Mono', monospace;
  font-size:0.95rem;
}
.card-footer-item strong{color:var(--ink);}

.detail-panel{
  margin-top:14px;
  padding-top:14px;
  padding-left:56px;
  border-top:1px dashed var(--hairline);
  cursor:default;
}
.detail-label{
  font-family:'JetBrains Mono', monospace;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--gray);
  margin:0 0 6px;
}
.detail-desc{
  font-size:0.88rem;
  line-height:1.5;
  color:var(--ink);
  margin:0;
}
.detail-desc.muted{color:var(--gray); font-style:italic;}
.detail-empty{
  font-size:0.78rem;
  color:var(--gray);
  font-style:italic;
}

.summary-block{
  margin-bottom:18px;
  padding-bottom:18px;
  border-bottom:1px dashed var(--hairline);
}
.summary-block:last-child{border-bottom:none; margin-bottom:0; padding-bottom:0;}
.summary-source{
  font-family:'JetBrains Mono', monospace;
  font-size:0.68rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--gray);
  border:1px solid var(--hairline);
  display:inline-block;
  padding:2px 8px;
  margin:0 0 8px;
}

footer{
  border-top:1px solid var(--hairline);
  text-align:center;
  padding:20px;
  font-family:'JetBrains Mono', monospace;
  font-size:0.72rem;
  color:var(--gray);
}

@media (max-width:520px){
  .site-header{flex-direction:column; align-items:flex-start;}
  main{padding:32px 18px 60px;}
}