/* Story Portal — "lamplight library"
   ink night surface, vellum text, single ember accent.
   System serif stacks only: no external font requests, ever. */

:root{
  --ink:#12141c;        /* page */
  --well:#181b25;       /* cards / fields */
  --vellum:#e8e2d6;     /* body text */
  --quiet:#8d8a80;      /* secondary */
  --ember:#d8a25a;      /* the one accent */
  --ember-deep:#a9742f;
  --rule:#262a36;
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --utility:ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --measure:40rem;
}

*{box-sizing:border-box}
html{height:100%}
body{
  margin:0;min-height:100%;
  background:var(--ink);color:var(--vellum);
  font:18px/1.75 var(--serif);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* Progressive enhancement: marbled endpaper over the ink base. If the asset
   is missing, the solid --ink above stands on its own. The texture is dimmed
   hard so it reads as atmosphere, never pattern. */
body.has-art{
  background-color:var(--ink);
  background-image:linear-gradient(rgba(18,20,28,.86),rgba(18,20,28,.92)),
                   url("art/endpaper.jpg");
  background-size:cover;background-attachment:fixed;
}
a{color:inherit}
::selection{background:var(--ember-deep);color:var(--ink)}

.wrap{max-width:var(--measure);margin:0 auto;padding:3.5rem 1.4rem 7rem}

/* ---------- utility voice (small caps) ---------- */
.eyebrow{
  font:600 .72rem/1 var(--utility);
  letter-spacing:.22em;text-transform:uppercase;color:var(--ember);
}
.meta{
  font:500 .78rem/1.5 var(--utility);
  letter-spacing:.06em;color:var(--quiet);
}

/* ---------- login ---------- */
.gate{
  min-height:100vh;display:grid;place-items:center;padding:1.5rem;
}
.has-art .gate{
  background:linear-gradient(rgba(18,20,28,.72),rgba(18,20,28,.9)),
             url("art/frontispiece.jpg") center/cover no-repeat fixed;
}
.gate-card{width:100%;max-width:21rem;text-align:center}
.monogram{
  font:400 2rem/1 var(--serif);letter-spacing:.35em;color:var(--vellum);
  margin:0 0 .4rem;padding-left:.35em; /* optically center the tracking */
}
.monogram b{color:var(--ember);font-weight:400}
.gate-sub{margin:0 0 2.2rem}
.gate input[type=password]{
  width:100%;padding:.85rem 1rem;border-radius:8px;
  border:1px solid var(--rule);background:var(--well);color:var(--vellum);
  font:16px var(--utility);letter-spacing:.3em;text-align:center;outline:none;
}
.gate input[type=password]:focus{border-color:var(--ember-deep)}
.gate button{
  margin-top:1rem;width:100%;padding:.85rem 1rem;border-radius:8px;border:0;
  background:var(--ember);color:#1a130a;font:600 .85rem var(--utility);
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
}
.gate button:hover{background:#e4b271}
.gate .err{color:#c97b6a;font:500 .8rem var(--utility);margin-top:.9rem;min-height:1.2em}

/* ---------- library ---------- */
.masthead{display:flex;align-items:baseline;justify-content:space-between;
  border-bottom:1px solid var(--rule);padding-bottom:1.1rem;margin-bottom:.4rem}
.shelf{list-style:none;margin:0;padding:0}
.shelf li{border-bottom:1px solid var(--rule)}
.shelf a{
  display:flex;gap:1.1rem;align-items:stretch;
  padding:1.5rem .2rem;text-decoration:none;
  transition:padding-left .25s ease;
}
.spine{flex:0 0 0;border-radius:3px;background-size:cover;background-position:35% center}
.has-art .spine{flex:0 0 18px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.has-art .spine-1{background-image:url("art/spine1.jpg")}
.has-art .spine-2{background-image:url("art/spine2.jpg")}
.has-art .spine-3{background-image:url("art/spine3.jpg")}
.entry{display:block;min-width:0}
.shelf a:hover{padding-left:.9rem}
.shelf a:hover .shelf-title{color:var(--ember)}
.shelf-title{
  font-size:1.45rem;line-height:1.3;letter-spacing:.005em;
  transition:color .25s ease;
}
.shelf .meta{display:block;margin-top:.45rem}
.shelf .resume-dot{color:var(--ember)}
.empty{color:var(--quiet);font-style:italic;padding:3rem 0;text-align:center}

/* ---------- reader ---------- */
.filament{
  position:fixed;inset:0 auto auto 0;height:2px;width:0;
  background:linear-gradient(90deg,var(--ember-deep),var(--ember));
  z-index:30;transition:width .15s linear;
}
.reader-bar{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:2.8rem;
}
.back{font:500 .78rem var(--utility);letter-spacing:.1em;color:var(--quiet);
  text-decoration:none;text-transform:uppercase}
.back:hover{color:var(--ember)}
.type-controls{display:flex;gap:.4rem}
.type-controls button{
  width:2rem;height:2rem;border-radius:6px;border:1px solid var(--rule);
  background:transparent;color:var(--quiet);font:600 .8rem var(--utility);
  cursor:pointer;
}
.type-controls button:hover{color:var(--ember);border-color:var(--ember-deep)}

.story-title{
  font-size:2.1rem;line-height:1.22;font-weight:400;letter-spacing:.004em;
  margin:0 0 .8rem;
}
.title-rule{width:3.2rem;height:1px;background:var(--ember);border:0;margin:0 0 2.6rem}
/* When the ornament asset exists, swap the hairline rule for it.
   The PNG is gold linework on black; screen-blend sinks the black into the
   page so only the filigree shows. */
.has-art .title-rule{
  width:min(17rem,70%);height:42px;background:transparent;
  background-image:url("art/ornament.png");
  background-size:contain;background-position:left center;background-repeat:no-repeat;
  mix-blend-mode:screen;margin:0 0 2.2rem;
}

.story-body{white-space:pre-wrap;font-size:var(--reader-size,1em)}
.story-body::first-letter{
  font-size:3.1em;line-height:.85;float:left;
  padding:.08em .12em 0 0;color:var(--ember);
}
.story-img{
  display:block;max-width:100%;height:auto;margin:2.6rem auto;
  border-radius:4px;border:1px solid var(--rule);
}
.fin{display:block;text-align:center;color:var(--ember);margin-top:3.5rem;
  font-size:1.1rem;letter-spacing:.4em;padding-left:.4em}

/* ---------- veil (Esc) ---------- */
.veil{
  position:fixed;inset:0;z-index:100;display:none;
  background:#f3f3f1;color:#444;font:15px/1.6 var(--utility);
  padding:3rem 1.5rem;
}
.veil.on{display:block}
.veil h1{font:600 1.1rem var(--utility);color:#222;margin:0 0 1rem}
.veil ul{margin:0;padding-left:1.2rem;color:#555}
.veil .hint{position:fixed;bottom:1rem;right:1.2rem;color:#bbb;font-size:12px}

/* ---------- a11y / quality floor ---------- */
:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}
@media (max-width:480px){
  body{font-size:17px}
  .wrap{padding:2.2rem 1.1rem 5rem}
  .story-title{font-size:1.7rem}
}