@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --paper:#e8e4db;
  --mat:#f5f2ec;
  --mat-edge:#d8d2c6;
  --ink:#1c1a17;
  --muted:#6f685c;
  --accent:#7a3b2e;
  --shadow:rgba(40,34,26,.22);
}

body{
  font-family:'Newsreader',Georgia,serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  min-height:100vh;
}

/* SVG noise overlay */
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.035;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Header */
.site-header{
  text-align:center;padding:3rem 1rem 2rem;
}
.site-header h1{
  font-family:'Fraunces',serif;font-weight:500;font-size:2.4rem;
  color:var(--ink);letter-spacing:-.02em;
}
.site-header p{
  color:var(--muted);font-style:italic;margin-top:.3rem;
}

/* Controls */
.controls{
  max-width:1200px;margin:0 auto 2rem;padding:0 1rem;
  display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;
}
.controls select, .controls input{
  font-family:'Newsreader',Georgia,serif;
  font-size:.95rem;padding:.45rem .75rem;
  border:1px solid var(--mat-edge);background:var(--mat);
  color:var(--ink);border-radius:4px;
}
.controls input[type="search"]{flex:1;min-width:200px;}
.controls select{cursor:pointer;}

/* Gallery grid */
.gallery{
  max-width:1200px;margin:0 auto;padding:0 1rem 4rem;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:2rem;
}
.gallery-empty{
  grid-column:1/-1;text-align:center;padding:3rem;
  color:var(--muted);font-style:italic;
}

/* Frame (from spec §7) */
.frame{
  background:var(--mat);
  padding:26px 26px 22px;
  border:1px solid var(--mat-edge);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 18px 34px -18px var(--shadow),
    0 4px 10px -6px var(--shadow);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;
  text-decoration:none;color:inherit;display:block;
}
.frame:hover{transform:translateY(-6px) rotate(-.4deg);}
.frame:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}
@media(prefers-reduced-motion:reduce){
  .frame{transition:none;}
  .frame:hover{transform:none;}
}

.plate{
  position:relative;
  border:1px solid var(--mat-edge);
  box-shadow:0 0 0 1px rgba(255,255,255,.6),0 6px 14px -6px var(--shadow) inset;
  background:#cbc6bb;aspect-ratio:2/3;overflow:hidden;
}
.plate img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.96) contrast(1.02);
}
/* Seated vignette */
.plate::after{
  content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 30px rgba(30,24,18,.28);pointer-events:none;
}

/* Status pip */
.status-pip{
  position:absolute;top:8px;left:8px;z-index:2;
  width:10px;height:10px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.6);
}

/* Placeholder for missing covers */
.plate-placeholder{
  width:100%;height:100%;
  background:linear-gradient(135deg,#cbc6bb 0%,#b8b3a8 50%,#a9a498 100%);
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-size:2rem;color:var(--mat-edge);
  user-select:none;
}

/* Caption under frame */
.caption{
  margin-top:10px;padding:0 2px;
}
.caption .book-title{
  font-family:'Fraunces',serif;font-weight:500;font-size:.95rem;
  line-height:1.25;display:block;
}
.caption .book-author{
  font-style:italic;font-size:.85rem;color:var(--muted);
  display:block;margin-top:2px;
}
.stars{margin-top:4px;}
.star{font-size:.85rem;}
.star.filled{color:var(--accent);}
.star.empty{color:var(--mat-edge);}

/* Detail page */
.detail{
  max-width:800px;margin:0 auto;padding:2rem 1rem 4rem;
}
.detail-header{
  display:flex;gap:2.5rem;margin-bottom:2.5rem;
}
.detail-cover{
  flex-shrink:0;width:250px;
}
.detail-cover .frame{padding:20px 20px 18px;}
.detail-info{flex:1;min-width:0;}
.detail-info h1{
  font-family:'Fraunces',serif;font-weight:500;font-size:2rem;
  line-height:1.2;margin-bottom:.5rem;
}
.detail-info .book-author{
  font-style:italic;font-size:1.1rem;color:var(--muted);
  margin-bottom:1rem;
}
.detail-meta{
  display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1rem;
  font-size:.9rem;color:var(--muted);
}
.detail-meta .status-badge{
  padding:.2rem .6rem;border-radius:3px;color:#fff;
  font-size:.8rem;font-style:normal;
}
.detail-synopsis{
  margin-bottom:2rem;font-size:1.05rem;
  border-left:3px solid var(--mat-edge);padding-left:1rem;
  color:var(--muted);font-style:italic;
}
.detail-notes{line-height:1.7;}
.detail-notes h1,.detail-notes h2,.detail-notes h3{
  font-family:'Fraunces',serif;font-weight:500;margin:1.5rem 0 .5rem;
}
.detail-notes p{margin-bottom:1rem;}
.detail-notes blockquote{
  border-left:3px solid var(--accent);padding-left:1rem;
  margin:1rem 0;color:var(--muted);font-style:italic;
}
.detail-notes pre{
  background:var(--mat);padding:1rem;border-radius:4px;
  overflow-x:auto;margin:1rem 0;font-size:.9rem;
}
.detail-notes ul,.detail-notes ol{margin:1rem 0;padding-left:1.5rem;}
.detail-notes li{margin-bottom:.25rem;}

.back-link{
  display:inline-block;margin-bottom:1.5rem;
  color:var(--accent);text-decoration:none;font-size:.95rem;
}
.back-link:hover{text-decoration:underline;}

@media(max-width:600px){
  .site-header h1{font-size:1.6rem;}
  .gallery{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1.25rem;}
  .frame{padding:16px 16px 14px;}
  .detail-header{flex-direction:column;align-items:center;text-align:center;}
  .detail-cover{width:200px;}
  .controls{flex-direction:column;}
  .controls input[type="search"]{width:100%;}
}