@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --bg: #1c2320;
  --surface: #232b27;
  --card: #29332e;
  --card-hover: #303c35;
  --border: #3a4640;
  --text: #ece7dc;
  --text-dim: #9aa79f;
  --accent: #c9a227;
  --accent-soft: rgba(201,162,39,0.14);
  --sage: #7f9a88;
  --danger: #b3654a;
  --radius: 3px;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(201,162,39,0.05), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:var(--sans);
  min-height:100vh;
}

.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:48px 24px 80px;
}

/* ---------- Header / ledger stamp ---------- */
header.masthead{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  border-bottom:1px solid var(--border);
  padding-bottom:24px;
  margin-bottom:28px;
  flex-wrap:wrap;
}

.masthead h1{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(2rem, 4vw, 2.7rem);
  letter-spacing:0.01em;
  margin:0 0 6px;
  color:var(--text);
}

.masthead .sub{
  font-family:var(--mono);
  font-size:0.78rem;
  color:var(--text-dim);
  letter-spacing:0.04em;
}

.stamp{
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--accent);
  border:1px solid var(--accent);
  border-radius:999px;
  padding:6px 14px;
  white-space:nowrap;
  letter-spacing:0.03em;
  transform:rotate(-2deg);
}

/* ---------- Controls ---------- */
.controls{
  display:flex;
  gap:12px;
  margin-bottom:32px;
  align-items:center;
}

.search-box{
  flex:1;
  position:relative;
}

.search-box input{
  width:100%;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text);
  font-family:var(--sans);
  font-size:0.92rem;
  padding:11px 14px 11px 38px;
  border-radius:var(--radius);
  outline:none;
  transition:border-color 0.15s;
}
.search-box input:focus{ border-color:var(--accent); }
.search-box::before{
  content:"⌕";
  position:absolute;
  left:13px; top:50%;
  transform:translateY(-50%);
  color:var(--text-dim);
  font-size:1rem;
}

.view-toggle{
  display:flex;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}
.view-toggle button{
  background:var(--surface);
  border:none;
  color:var(--text-dim);
  font-family:var(--mono);
  font-size:0.75rem;
  padding:10px 14px;
  cursor:pointer;
  transition:background 0.15s,color 0.15s;
}
.view-toggle button.active{
  background:var(--accent-soft);
  color:var(--accent);
}
.view-toggle button:not(.active):hover{ color:var(--text); }

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:2px;
  margin:-12px 0 22px;
  font-family:var(--mono);
  font-size:0.78rem;
}
.breadcrumb button{
  background:none;
  border:none;
  color:var(--text-dim);
  font-family:inherit;
  font-size:inherit;
  cursor:pointer;
  padding:4px 6px;
  border-radius:3px;
}
.breadcrumb button:last-child{ color:var(--accent); }
.breadcrumb button:hover{ color:var(--text); background:var(--surface); }
.breadcrumb .sep{ color:var(--border); margin:0 2px; }

/* ---------- Grid of index cards ---------- */
#grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px,1fr));
  gap:18px;
}

#grid.list-mode{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.card{
  position:relative;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px 16px 16px;
  cursor:pointer;
  transition:transform 0.15s, background 0.15s, border-color 0.15s;
}
.card:hover{
  background:var(--card-hover);
  border-color:var(--accent);
  transform:translateY(-2px);
}
.card:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.card.is-folder .icon{ color:var(--accent); }
.card.is-folder .tab{ background:var(--sage); }

/* card-catalog tab */
.tab{
  position:absolute;
  top:-1px; left:16px;
  background:var(--accent);
  color:#20261f;
  font-family:var(--mono);
  font-weight:500;
  font-size:0.62rem;
  letter-spacing:0.03em;
  padding:3px 9px 4px;
  border-radius:0 0 3px 3px;
}

.card .icon{
  font-size:1.6rem;
  margin:10px 0 12px;
  color:var(--sage);
}

.card .name{
  font-family:var(--sans);
  font-weight:600;
  font-size:0.92rem;
  color:var(--text);
  word-break:break-word;
  margin-bottom:6px;
  line-height:1.3;
}

.card .meta{
  font-family:var(--mono);
  font-size:0.7rem;
  color:var(--text-dim);
}

.card .desc{
  font-family:var(--sans);
  font-size:0.78rem;
  color:var(--text-dim);
  margin-top:6px;
  line-height:1.4;
}

.card .actions{
  display:flex;
  gap:8px;
  margin-top:14px;
}
.card .actions button{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text-dim);
  font-family:var(--mono);
  font-size:0.68rem;
  padding:6px 10px;
  border-radius:var(--radius);
  cursor:pointer;
  transition:border-color 0.15s, color 0.15s;
}
.card .actions button:hover{
  border-color:var(--accent);
  color:var(--accent);
}

/* list mode overrides */
#grid.list-mode .card{
  display:flex;
  align-items:center;
  gap:16px;
  padding:12px 16px;
}
#grid.list-mode .tab{ position:static; margin-right:4px; border-radius:3px; }
#grid.list-mode .icon{ margin:0; font-size:1.2rem; }
#grid.list-mode .name{ flex:1; margin:0; }
#grid.list-mode .meta{ white-space:nowrap; }
#grid.list-mode .desc{ display:none; }
#grid.list-mode .actions{ margin:0; }

/* ---------- Empty state ---------- */
.empty{
  text-align:center;
  padding:80px 20px;
  color:var(--text-dim);
  border:1px dashed var(--border);
  border-radius:var(--radius);
  font-family:var(--sans);
}
.empty .icon{ font-size:2.2rem; margin-bottom:12px; color:var(--sage); }
.empty code{
  font-family:var(--mono);
  background:var(--surface);
  padding:2px 6px;
  border-radius:3px;
  color:var(--accent);
}

/* ---------- Modal preview ---------- */
.overlay{
  position:fixed; inset:0;
  background:rgba(10,13,11,0.82);
  backdrop-filter:blur(2px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:100;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.2s;
}
.overlay.open{ opacity:1; pointer-events:auto; }

.modal{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  max-width:860px;
  width:100%;
  max-height:86vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transform:translateY(8px);
  transition:transform 0.2s;
}
.overlay.open .modal{ transform:translateY(0); }

.modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  gap:12px;
}
.modal-head .title{
  font-family:var(--serif);
  font-size:1.1rem;
  font-weight:600;
  word-break:break-word;
}
.modal-head .sub{
  font-family:var(--mono);
  font-size:0.7rem;
  color:var(--text-dim);
}
.modal-head button.close{
  background:none; border:none;
  color:var(--text-dim);
  font-size:1.3rem;
  cursor:pointer;
  line-height:1;
  padding:4px;
}
.modal-head button.close:hover{ color:var(--danger); }

.modal-body{
  padding:0;
  overflow:auto;
  background:#141815;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:200px;
}
.modal-body img, .modal-body video{
  max-width:100%;
  max-height:70vh;
  display:block;
}
.modal-body audio{ width:100%; margin:40px; }
.modal-body iframe{
  width:100%; height:70vh; border:none;
}
.modal-body pre{
  width:100%;
  margin:0;
  padding:20px 24px;
  font-family:var(--mono);
  font-size:0.82rem;
  color:var(--text);
  white-space:pre-wrap;
  word-break:break-word;
  max-height:70vh;
  overflow:auto;
}
.modal-body .no-preview{
  padding:60px 20px;
  text-align:center;
  color:var(--text-dim);
  font-family:var(--sans);
}
.modal-body .no-preview .icon{ font-size:2.4rem; display:block; margin-bottom:14px; color:var(--sage); }

.modal-foot{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:14px 20px;
  border-top:1px solid var(--border);
}
.modal-foot a{
  font-family:var(--mono);
  font-size:0.78rem;
  text-decoration:none;
  color:#1c2320;
  background:var(--accent);
  padding:9px 18px;
  border-radius:var(--radius);
  font-weight:500;
  letter-spacing:0.02em;
  transition:opacity 0.15s;
}
.modal-foot a:hover{ opacity:0.85; }

footer.foot{
  margin-top:60px;
  text-align:center;
  font-family:var(--mono);
  font-size:0.7rem;
  color:var(--text-dim);
  letter-spacing:0.03em;
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
}

@media (max-width:560px){
  .wrap{ padding:32px 16px 60px; }
  .masthead{ flex-direction:column; align-items:flex-start; }
  #grid{ grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); }
}