:root{
  --ink:#11110f;
  --paper:#f0ead8;
  --paper-dim:#d8cfb9;
  --line:#b5a87f;
  --panel:#171714;
  --accent:#d0bb7c;
  --bg:#0b0b0a;
  --danger:#c46d61;
  --focus:#f6d98c;
  --max:1120px;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  background:radial-gradient(circle at top,#191915 0,#0b0b0a 45%);
  color:var(--paper);
  min-height:100vh;
}
button,input{font:inherit}
button{cursor:pointer}
.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--paper);color:var(--ink);padding:.75rem 1rem;z-index:999
}
.skip-link:focus{left:1rem;top:1rem}
.site-header,.site-footer,main{
  width:min(calc(100% - 2rem),var(--max));margin-inline:auto
}
.site-header{
  min-height:84px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #3d392d
}
.brand-wrap{display:flex;align-items:center;gap:.75rem}
.brand-mark{font-size:1.4rem;color:var(--accent)}
.brand-name{letter-spacing:.22em;font-weight:700}
.brand-sub{letter-spacing:.55em;font-size:.72rem;color:var(--paper-dim);margin-top:.18rem}
main{padding:2.2rem 0 4rem}
.hero{padding:2rem 0 1.25rem}
.eyebrow{letter-spacing:.2em;text-transform:uppercase;font-size:.76rem;color:var(--accent);margin:0 0 .7rem}
h1,h2,h3{font-weight:500;letter-spacing:.03em}
h1{font-size:clamp(2.1rem,7vw,4.6rem);margin:.15rem 0}
.lede{max-width:720px;color:var(--paper-dim);font-size:1.06rem;line-height:1.65}
.panel{
  background:rgba(23,23,20,.92);border:1px solid #3a372d;padding:clamp(1.25rem,5vw,2.4rem);border-radius:12px
}
.auth-panel{max-width:720px;margin:3rem auto}
.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.5rem}
label{display:block;color:var(--paper-dim);font-size:.93rem}
input{
  width:100%;margin-top:.4rem;padding:.9rem 1rem;border-radius:8px;border:1px solid #554f3f;background:#0f0f0d;color:var(--paper)
}
input:focus-visible,button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.button-row,.filter-row{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1rem}
.primary-button,.secondary-button,.filter-button,.text-button{
  border-radius:999px;padding:.72rem 1rem;border:1px solid #5b543f
}
.primary-button{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.secondary-button,.filter-button,.text-button{background:transparent;color:var(--paper)}
.filter-button.is-active{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.status{min-height:1.4rem;color:var(--paper-dim)}
.search-wrap{max-width:760px;margin-top:1.8rem}
.stats{display:flex;gap:.75rem;flex-wrap:wrap;margin:1.5rem 0}
.stat{
  border-top:1px solid #625a43;padding-top:.55rem;min-width:110px
}
.stat strong{font-size:1.35rem;display:block}
.stat span{color:var(--paper-dim);font-size:.86rem}
.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:2.1rem 0 1rem}
.muted{color:var(--paper-dim)}
.film-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.film-card{
  text-align:left;color:var(--paper);background:#11110f;border:1px solid #403b2f;border-radius:8px;padding:0;overflow:hidden
}
.film-card:hover{border-color:var(--accent)}
.card-frame{
  margin:.45rem;border:3px double #877b59;padding:1rem;min-height:180px;display:flex;flex-direction:column;justify-content:center;text-align:center;position:relative
}
.card-frame::before,.card-frame::after{
  content:"◆  ❦  ◆";position:absolute;left:50%;transform:translateX(-50%);background:#11110f;color:#aa9a6e;padding:0 .45rem;font-size:.72rem;letter-spacing:.2em
}
.card-frame::before{top:-.62rem}
.card-frame::after{bottom:-.62rem}
.film-title{font-size:1.23rem;margin:.5rem 0}
.film-meta{color:var(--paper-dim);font-size:.9rem;line-height:1.45}
.film-dialog{
  width:min(92vw,760px);max-height:88vh;border:1px solid #6c6248;background:#0e0e0c;color:var(--paper);padding:0;border-radius:10px
}
.film-dialog::backdrop{background:rgba(0,0,0,.82)}
.dialog-close{position:absolute;right:.8rem;top:.7rem;z-index:2;border:0;background:transparent;color:var(--paper);font-size:2rem}
.intertitle{background:#10100f;padding:.65rem}
.ornate-frame{
  border:4px double #b3a575;padding:clamp(1.8rem,7vw,3.6rem);text-align:center;position:relative
}
.ornate-frame::before,.ornate-frame::after{
  content:"◆  ❦  ◆";position:absolute;left:50%;transform:translateX(-50%);background:#10100f;color:#c0ae78;padding:0 .7rem;letter-spacing:.35em
}
.ornate-frame::before{top:-.7rem}
.ornate-frame::after{bottom:-.7rem}
.intertitle h2{font-size:clamp(2rem,8vw,3.6rem);margin:.5rem 0}
.detail-rule{border-top:1px solid #756b4e;max-width:420px;margin:1.5rem auto 0;padding-top:1.3rem}
.detail-rule p{margin:.65rem 0;line-height:1.5}
.compact .ornate-frame{padding:2rem 1rem}
.empty-state{margin-top:1rem}
.site-footer{
  border-top:1px solid #3d392d;padding:1.2rem 0 2rem;display:flex;gap:.6rem;justify-content:center;color:#9d9582;font-size:.86rem
}
.iris-enter{animation:iris .28s ease-out both}
@keyframes iris{
  0%{clip-path:circle(4% at 50% 50%);opacity:.35}
  100%{clip-path:circle(75% at 50% 50%);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}
@media (max-width:820px){.film-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .site-header{min-height:72px}
  .brand-name{letter-spacing:.14em}
  .brand-sub{letter-spacing:.38em}
  .auth-grid{grid-template-columns:1fr}
  .film-grid{grid-template-columns:1fr}
  main{padding-top:1rem}
}

.reset-panel{
  margin-top:1.5rem;
  padding-top:1.5rem;
  border-top:1px solid #3d392d;
}