/* ============================================================
   Berlin Kvetch — Editorial Noir
   Monochrome, sharp, rule-separated. See design/DESIGN.md.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@600;700&family=Inter:wght@400;600&display=swap');

:root {
  --ink: #000000;
  --ink-soft: #1b1c1c;
  --ink-mute: #4c4546;
  --line-soft: #cfc4c5;
  --paper: #ffffff;
  --font-display: 'Epilogue', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --margin: 24px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 720px) { :root { --margin: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font: 16px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; border-radius: 0; cursor: pointer; }
button:disabled { cursor: default; opacity: .35; }
.hidden { display: none !important; }
.muted { color: var(--ink-mute); }

.label-caps {
  font: 600 12px/1.3 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  font-size: 24px;
  line-height: 1;
}

/* ----- Buttons ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  font: 600 12px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase;
}
.btn:hover, .btn:active { background: var(--ink); color: var(--paper); }
.btn--light { border-color: var(--paper); background: transparent; color: var(--paper); }
.btn--light:hover, .btn--light:active { background: var(--paper); color: var(--ink); }
.btn--small { min-height: 40px; padding: 0 16px; }

.icon-btn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink);
}
.icon-btn:hover, .icon-btn:active { background: var(--ink); color: var(--paper); }
.icon-btn--light { border-color: var(--paper); color: var(--paper); }
.icon-btn--light:hover, .icon-btn--light:active { background: var(--paper); color: var(--ink); }

/* ----- Masthead (player + collection) ----- */
.masthead {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(16px + var(--safe-top)) var(--margin) 16px;
  border-bottom: 1px solid var(--ink);
}
.masthead__brand {
  font: 700 20px/1 var(--font-display);
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ============ CAMERA ============ */
.view--camera {
  position: fixed; inset: 0;
  background: var(--ink); color: var(--paper);
  overflow: hidden;
}
.view--camera video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover;
}
.cam-overlay {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: contain;
  padding: 96px 24px 140px;
  pointer-events: none;
  opacity: .85;
  /* white halo keeps black line-art legible over dark parts of the scene */
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px #fff);
}
.cam-bar {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: calc(16px + var(--safe-top)) var(--margin) 16px;
  background: var(--ink);
  border-bottom: 1px solid var(--paper);
}
.cam-bar__title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cam-bar__name {
  font: 700 22px/1.1 var(--font-display);
  letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cam-foot {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px var(--margin) calc(16px + var(--safe-bottom));
  background: var(--ink);
  border-top: 1px solid var(--paper);
}
.cam-foot__hint { margin: 0 0 12px; font-size: 14px; }
.cam-foot__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cam-foot__actions { display: flex; gap: 8px; }
.cam-start {
  position: absolute; left: var(--margin); right: var(--margin); top: 50%;
  transform: translateY(-50%);
  padding: 24px;
  background: var(--ink);
  border: 2px solid var(--paper);
}
.cam-start p { margin: 0 0 16px; }

/* ============ PLAYER ============ */
.view--player { min-height: 100dvh; display: flex; flex-direction: column; }
.flash {
  background: var(--ink); color: var(--paper);
  padding: 12px var(--margin);
  animation: flash-in .25s ease-out;
}
@keyframes flash-in { from { transform: translateY(-100%); } to { transform: none; } }

.player-stage {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 32px var(--margin);
  min-height: 40vh;
}
.player-stage__img { width: 100%; max-width: 520px; max-height: 52vh; object-fit: contain; }

.player-meta {
  padding: 24px var(--margin) 0;
  border-top: 1px solid var(--ink);
}
.player-meta__title {
  margin: 0;
  font: 700 clamp(36px, 10vw, 64px)/1 var(--font-display);
  letter-spacing: -.03em;
  color: var(--ink);
}
.player-meta__sub { margin: 12px 0 0; color: var(--ink-mute); }

.player { padding: 24px var(--margin) calc(32px + var(--safe-bottom)); }
.player__progress { display: flex; align-items: center; gap: 12px; }
.player__time { font: 600 12px/1 var(--font-body); font-variant-numeric: tabular-nums; min-width: 34px; }
.player__time:last-child { text-align: right; }
.player__controls { display: flex; align-items: center; justify-content: center; gap: 32px; margin-top: 16px; }
.player__skip .material-symbols-outlined { font-size: 32px; }
.player__play .material-symbols-outlined { font-size: 72px; font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 48; }
#audio-missing { text-align: center; margin: 16px 0 0; }

.player__seek {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 16px; margin: 0; background: transparent;
  --progress: 0%;
}
.player__seek:focus { outline: none; }
.player__seek::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(to right, var(--ink) var(--progress), var(--line-soft) var(--progress));
}
.player__seek::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px;
  background: var(--ink); border: 0; border-radius: 0;
}
.player__seek::-moz-range-track { height: 2px; background: var(--line-soft); }
.player__seek::-moz-range-progress { height: 2px; background: var(--ink); }
.player__seek::-moz-range-thumb { width: 12px; height: 12px; background: var(--ink); border: 0; border-radius: 0; }

/* ============ COLLECTION ============ */
.coll-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 40px var(--margin) 16px;
  border-bottom: 1px solid var(--ink);
}
.coll-head__title {
  margin: 0;
  font: 700 clamp(40px, 12vw, 72px)/1 var(--font-display);
  letter-spacing: -.03em; color: var(--ink);
}
.coll-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) { .coll-grid { grid-template-columns: repeat(4, 1fr); } }
.coll-tile { border-bottom: 1px solid var(--ink); border-right: 1px solid var(--ink); }
.coll-tile__inner { display: flex; flex-direction: column; height: 100%; }
.coll-tile__img {
  aspect-ratio: 4 / 5;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.coll-tile__img img { width: 100%; height: 100%; object-fit: contain; }
.coll-tile__meta {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--ink);
}
.coll-tile__name { font: 700 18px/1.15 var(--font-display); letter-spacing: -.01em; color: var(--ink); }

/* locked: drawing as faint ghost, no interaction */
.coll-tile:not(.coll-tile--open) .coll-tile__img img { opacity: .12; filter: grayscale(1); }
.coll-tile:not(.coll-tile--open) .coll-tile__name { color: var(--ink-mute); }
/* unlocked: inverts on press */
.coll-tile--open a:hover, .coll-tile--open a:active { background: var(--ink); color: var(--paper); }
.coll-tile--open a:hover .coll-tile__name, .coll-tile--open a:active .coll-tile__name { color: var(--paper); }
.coll-tile--open a:hover img, .coll-tile--open a:active img { filter: invert(1); }
.coll-tile--open a:hover .coll-tile__meta { border-top-color: var(--paper); }

.coll-empty { padding: 24px var(--margin); }
.coll-foot { padding: 40px var(--margin) calc(40px + var(--safe-bottom)); margin: 0; color: var(--ink-mute); font-size: 14px; }