/* Emily Library CSS — light theme with paper background */
:root{
  --bg:#faf9f7; --ink:#1f1e1c; --muted:#6f6a64; --rule:#e9e4dc; --gold:#d7c7a1;
  --card:#ffffff; --pill:#f0e6d8; --accent:#b69770;
  --max: 820px; --radius: 16px;
  --step-0: clamp(1rem, .95rem + .3vw, 1.125rem);
  --step-2: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
}

*,*::before,*::after{box-sizing:border-box}

/* Unified body rule with paper background */
body{
  margin:0;
  color:var(--ink);
  font:16px/1.7 ui-serif, Georgia, Cambria, "Times New Roman", serif;

  /* paper texture + solid fallback */
  background-color:#f3efe7;
  background-image:
    url("/images/paper-grain.png"),
    linear-gradient(var(--bg), var(--bg));
  background-size:520px auto;
  background-repeat:repeat;
  background-attachment:fixed;
}

.wrap{max-width:var(--max);margin:auto;padding:28px 20px 64px}
header{padding:12px 0 18px;border-bottom:1px solid var(--rule);margin-bottom:20px}
.kicker{letter-spacing:.12em;text-transform:uppercase;font:12px/1 ui-sans-serif,system-ui;color:var(--muted)}
h1{font-size:var(--step-2);line-height:1.15;margin:.25em 0 .15em;font-weight:600}
.sub{color:var(--muted);font-style:italic;margin-bottom:6px}
.rule{height:1px;background:var(--rule);margin:22px 0}
article{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);padding:20px;box-shadow:0 6px 28px rgba(0,0,0,.04)}
h2{font-size:1.1rem;margin:22px 0 8px;letter-spacing:.01em}
.section{margin:12px 0 26px}
figure{margin:14px 0 6px}
.img{border-radius:14px;border:1px solid var(--rule);overflow:hidden}
.img>img{display:block;width:100%;height:auto}
figcaption{color:var(--muted);font-size:.95rem;margin-top:8px;border-left:3px solid var(--gold);padding-left:10px}
.footer{margin-top:28px;color:var(--muted);font-size:.9rem}
a{color:inherit;text-decoration:none}
.back{display:inline-block;margin-top:10px;color:var(--muted);border:1px solid var(--rule);border-radius:999px;padding:.4rem .8rem;text-decoration:none}
.back:focus-visible{outline:3px solid #a7c8ff;outline-offset:2px}

/* === Library index cards === */
.grid.cards{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.card{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.04);opacity:0;transform:translateY(6px);animation:fadeIn .5s ease forwards}
.card:nth-child(2){animation-delay:.06s}
.card:nth-child(3){animation-delay:.12s}
.media{aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--rule)}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.body{padding:1rem 1.2rem}
.title{font-family:Cormorant, ui-serif, Georgia, Cambria, "Times New Roman", serif;font-weight:600;font-size:1.45rem;letter-spacing:.01em;line-height:1.25;margin:.4rem 0 .25rem;color:var(--ink)}
.muted{color:var(--muted)}
.eyebrow{font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.card:hover{box-shadow:0 10px 30px rgba(0,0,0,.08)}
@keyframes fadeIn{to{opacity:1;transform:none}}

/* === Tiles (contents) === */
.grid.tiles{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:1.25rem}
.tile{display:block;background:var(--card);border:3px solid var(--card);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.12);overflow:hidden;color:inherit;transition:transform .25s ease, box-shadow .25s ease}
.tile:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(0,0,0,.16)}
.tile .media{aspect-ratio: 4/3; overflow:hidden; border-bottom:2px solid var(--card)}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.tile .t{padding:1rem 1.1rem;font-weight:600;text-align:center}
.actions{margin:1rem 0 0;text-align:center}
.btn{display:inline-block;padding:.65rem 1.1rem;border-radius:9999px;border:1px solid var(--rule)}
.btn:focus-visible{outline:3px solid #a7c8ff;outline-offset:2px}

/* === Gallery + Words folio === */
.folio{display:grid;gap:2rem}
.entry{display:grid;gap:1.2rem;align-items:start;grid-template-columns: 1.3fr 1fr}
.entry:nth-child(even){grid-template-columns:1fr 1.3fr}
.entry .media{aspect-ratio:3/2;overflow:hidden;border:1px solid var(--rule);border-radius:12px}
.entry img{width:100%;height:100%;object-fit:cover;display:block}
.entry .text{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:1rem 1.2rem;box-shadow:0 4px 20px rgba(0,0,0,.04)}
.entry h3{margin:.2rem 0 .4rem;font-size:1.15rem}
.meta{color:var(--muted);font-size:.92rem;margin-bottom:.2rem}
@media (max-width:900px){ .entry{grid-template-columns:1fr} }

/* === Graceful fallback when images are missing/404 === */
a.card .media img{background:linear-gradient(145deg,#eae7e2,#dcd7cf);color:transparent}
a.card .t{color:var(--ink)}

@media print{body{background:none!important}}