/* Story Portal — "lamplight library", lightened.
   Warmer, airier dark surface; vellum text; single ember accent.
   System serif stacks only: no external font requests, ever. */

:root{
  --ink:#1c1f29;        /* page (lifted from #12141c) */
  --ink-2:#222634;      /* raised panels */
  --well:#272b39;       /* cards / fields */
  --well-hi:#2f3445;    /* hover */
  --vellum:#efe9dd;     /* body text (brighter) */
  --quiet:#a6a298;      /* secondary (lifted) */
  --faint:#76737c;      /* tertiary */
  --ember:#e0aa63;      /* the one accent */
  --ember-deep:#bb8338;
  --rule:#343a49;       /* hairlines (lighter) */
  --rule-soft:#2b3040;
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --utility:ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --measure:40rem;
  --wide:74rem;
  --radius:10px;
}

*{box-sizing:border-box}
/* The HTML `hidden` attribute must win over author display rules (e.g.
   .lightbox{display:flex}), otherwise hidden=flex elements render on load.
   Author rules normally beat the UA's [hidden]{display:none}, so force it. */
[hidden]{display:none !important}
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;
}
/* Marbled endpaper over the ink base, dimmed lighter than before so the page
   reads brighter while keeping atmosphere. Solid --ink stands alone if the
   asset is missing. */
body.has-art{
  background-color:var(--ink);
  background-image:linear-gradient(rgba(28,31,41,.80),rgba(28,31,41,.88)),
                   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.25rem 1.4rem 7rem}
.wrap-wide{max-width:var(--wide);padding-left:1.8rem;padding-right:1.8rem}

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

/* ---------- login ---------- */
.gate{ min-height:100vh;display:grid;place-items:center;padding:1.5rem; }
.has-art .gate{
  background:linear-gradient(rgba(28,31,41,.68),rgba(28,31,41,.86)),
             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;
}
.monogram b{color:var(--ember);font-weight:400}
.gate-sub{margin:0 0 2.2rem}
.gate input[type=password],
.gate .login-id{
  width:100%;padding:.85rem 1rem;border-radius:8px;
  border:1px solid var(--rule);background:var(--well);color:var(--vellum);
  font:16px var(--utility);outline:none;
}
.gate input[type=password]{letter-spacing:.3em;text-align:center}
.gate .login-id{text-align:left;margin-bottom:.6rem}
.gate input[type=password]:focus,
.gate .login-id: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:#ecbd7c}
.gate .err{color:#d98a78;font:500 .8rem var(--utility);margin-top:.9rem;min-height:1.2em}

/* invite-only notice + request-access form on the login card */
.invite{margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--rule-soft);text-align:center}
.invite-note{font:500 .8rem/1.5 var(--utility);letter-spacing:.04em;color:var(--quiet);margin:0 0 .9rem}
.invite-thanks{font:500 .82rem/1.55 var(--utility);color:var(--ember);margin:.2rem 0 0}
.invite-details{text-align:left}
.invite-summary{
  list-style:none;cursor:pointer;display:block;text-align:center;
  padding:.7rem 1rem;border-radius:8px;border:1px solid var(--rule);background:transparent;
  color:var(--vellum);font:600 .78rem var(--utility);letter-spacing:.12em;text-transform:uppercase;
  transition:border-color .15s,color .15s;
}
.invite-summary::-webkit-details-marker{display:none}
.invite-summary::marker{content:""}
.invite-summary:hover{border-color:var(--ember-deep);color:var(--ember)}
.invite-details[open] .invite-summary{margin-bottom:.85rem;border-color:var(--ember-deep);color:var(--ember)}
.invite-form{display:flex;flex-direction:column;gap:.6rem}
.invite-form input[type=text],
.invite-form input[type=email],
.invite-form input[type=number],
.invite-form textarea{
  width:100%;padding:.7rem .85rem;border-radius:8px;
  border:1px solid var(--rule);background:var(--well);color:var(--vellum);
  font:15px var(--utility);outline:none;
}
.invite-form input:focus,.invite-form textarea:focus{border-color:var(--ember-deep)}
.invite-form textarea{resize:vertical;min-height:3.4rem;line-height:1.5}
.invite-form button{margin-top:.2rem}
.invite-err{margin-top:.3rem;min-height:0;text-align:left}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* ---------- library ---------- */
.masthead{display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:.6rem 1rem;
  border-bottom:1px solid var(--rule);padding-bottom:1.1rem;margin-bottom:1.5rem}

/* masthead left cluster: eyebrow + category filter dropdown */
.mast-left{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;min-width:0}
.shelf-filter{display:inline-flex}
.catsel{
  font:600 .78rem/1 var(--utility);letter-spacing:.04em;
  color:var(--vellum);background-color:var(--well);
  border:1px solid var(--rule);border-radius:999px;
  padding:.42rem 2rem .42rem .9rem;cursor:pointer;max-width:14rem;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e0aa63' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:.7rem;
  text-overflow:ellipsis;transition:border-color .15s,background-color .15s,color .15s;
}
.catsel:hover{border-color:var(--ember-deep);background-color:var(--well-hi);color:var(--ember)}
.catsel:focus-visible{border-color:var(--ember)}
/* Native option list: dark text on vellum so it stays legible cross-browser. */
.catsel option{color:#1c1f29;background:#efe9dd}

/* visually-hidden (accessible label for the select) */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* library pager */
.pager{display:flex;align-items:center;justify-content:center;gap:1.4rem;
  margin:2.6rem 0 0;padding-top:1.6rem;border-top:1px solid var(--rule-soft)}
.pg{font:600 .76rem var(--utility);letter-spacing:.07em;text-transform:uppercase;
  text-decoration:none;color:var(--vellum);background:var(--well);
  border:1px solid var(--rule);border-radius:8px;padding:.5rem .95rem;
  transition:border-color .15s,background .15s,color .15s}
.pg:hover{border-color:var(--ember-deep);background:var(--well-hi);color:var(--ember)}
.pg.is-off{opacity:.32;pointer-events:none}
.pg-pos{font:500 .8rem var(--utility);letter-spacing:.08em;color:var(--faint);
  font-variant-numeric:tabular-nums}
.shelf{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,26rem),1fr));
  gap:1.1rem}
.card {
  display:flex;gap:1.15rem;align-items:flex-start;cursor:pointer;
  background:linear-gradient(180deg,var(--ink-2),var(--well));
  border:1px solid var(--rule-soft);border-radius:var(--radius);
  padding:1.15rem 1.25rem;transition:border-color .2s ease,transform .2s ease,background .2s ease;
}
.card:hover{border-color:var(--ember-deep);background:linear-gradient(180deg,var(--well),var(--well-hi))}
.card-cover{
  flex:0 0 84px;width:84px;height:118px;border-radius:6px;overflow:hidden;
  display:block;background:#1a1d27;border:1px solid var(--rule);
  box-shadow:0 6px 16px rgba(0,0,0,.35);transition:transform .2s ease;
}
.card:hover .card-cover{transform:translateY(-2px)}
.card-cover img{width:100%;height:100%;object-fit:cover;display:block}
/* No-photo fallback: a textured "spine" cover, or a quiet gradient. */
.card-cover.no-cover{background:linear-gradient(150deg,#2a2f3e,#1d2029);
  background-size:cover;background-position:35% center}
.has-art .card-cover.no-cover.spine-1{background-image:url("art/spine1.jpg")}
.has-art .card-cover.no-cover.spine-2{background-image:url("art/spine2.jpg")}
.has-art .card-cover.no-cover.spine-3{background-image:url("art/spine3.jpg")}

.card-main{min-width:0;flex:1}
.card-title{
  display:block;font-size:1.4rem;line-height:1.25;letter-spacing:.004em;
  color:var(--vellum);transition:color .2s ease;
}
.card:hover .card-title{color:var(--ember)}
.card-premise{
  margin:.4rem 0 0;color:var(--quiet);font-size:.92rem;line-height:1.45;
  font-family:var(--serif);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card-chapter{
  margin:.5rem 0 0;color:var(--quiet);font-size:.9rem;line-height:1.45;
  font-family:var(--serif);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.card-chapter-view .card-premise{-webkit-line-clamp:1}
.card-chapter .ch-num{color:var(--ember);font-family:var(--utility);font-size:.78rem;
  text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.card-meta,.card-meta *{cursor:auto}
.card-meta>summary{cursor:pointer}
.card-sub{margin:.45rem 0 0}
.resume-dot{color:var(--ember)}
.empty{color:var(--quiet);font-style:italic;padding:3rem 0;text-align:center;grid-column:1/-1}

/* expandable summary & outline on a card */
.card-meta{margin-top:.9rem;border-top:1px solid var(--rule-soft);padding-top:.5rem}
.card-meta>summary{
  font:600 .72rem/1 var(--utility);letter-spacing:.14em;text-transform:uppercase;
  color:var(--quiet);cursor:pointer;list-style:none;padding:.3rem 0;
}
.card-meta>summary::-webkit-details-marker{display:none}
.card-meta>summary::before{content:"▸ ";color:var(--ember-deep)}
.card-meta[open]>summary::before{content:"▾ "}
.card-meta>summary:hover{color:var(--ember)}
.card-meta-body{padding:.4rem 0 .3rem}
.meta-block{margin:.9rem 0}
.meta-block h3{
  font:600 .7rem/1 var(--utility);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ember);margin:0 0 .5rem;
}
.meta-block .prose{font-size:.96rem;color:var(--vellum)}
.cast{list-style:none;margin:0;padding:0;font-size:.95rem}
.cast li{padding:.18rem 0;color:var(--vellum)}
.cast-name{font-weight:600;color:var(--ember)}
.outline{margin:0;padding:0 0 0 1.4rem;font-size:.95rem}
.outline li{padding:.3rem 0;color:var(--vellum)}
.outline-title{font-weight:600}
.outline-sum{display:block;color:var(--quiet);font-size:.9rem;margin-top:.1rem}

/* ---------- reader ---------- */
.filament{
  position:fixed;inset:0 auto auto 0;height:2px;width:0;
  background:linear-gradient(90deg,var(--ember-deep),var(--ember));
  z-index:80;transition:width .15s linear;
}
.reader-shell{
  max-width:var(--wide);margin:0 auto;padding:2.5rem 1.8rem 7rem;
  display:grid;grid-template-columns:16rem minmax(0,1fr);gap:2.8rem;
  align-items:start;
}
.chapter-rail{position:sticky;top:2.5rem;align-self:start}
.back{font:500 .76rem var(--utility);letter-spacing:.1em;color:var(--quiet);
  text-decoration:none;text-transform:uppercase}
.back:hover{color:var(--ember)}
.rail-signout{display:inline-block;margin-top:1.3rem}
.rail-title{
  font:400 1.05rem/1.35 var(--serif);color:var(--vellum);
  margin:.9rem 0 1.1rem;padding-bottom:1.1rem;border-bottom:1px solid var(--rule);
}
.chapter-list{display:flex;flex-direction:column;gap:.1rem;max-height:72vh;overflow:auto}
.chapter-link{
  display:flex;gap:.7rem;align-items:baseline;text-align:left;width:100%;
  background:transparent;border:0;border-radius:7px;cursor:pointer;
  padding:.5rem .6rem;color:var(--quiet);font:inherit;transition:background .15s,color .15s;
}
.chapter-link:hover{background:var(--well);color:var(--vellum)}
.chapter-link.active{background:var(--well-hi);color:var(--vellum)}
.chapter-link.active .ch-num{color:var(--ember)}
.ch-num{font:600 .8rem var(--utility);color:var(--faint);min-width:1.4em;text-align:right}
.ch-name{font:400 .98rem/1.3 var(--serif)}

.reader-main{min-width:0;max-width:var(--measure);margin:0 auto}
.reader-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:2.4rem}
.rail-toggle{display:none;align-items:center;gap:.5rem;background:transparent;border:1px solid var(--rule);
  border-radius:8px;color:var(--quiet);font:600 .74rem var(--utility);
  letter-spacing:.08em;padding:.45rem .8rem;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.rail-toggle:hover{color:var(--ember);border-color:var(--ember-deep)}
/* CSS hamburger that morphs to an X while the drawer is open */
.hamburger{display:inline-block;width:18px;height:12px;position:relative;flex:none}
.hamburger span{position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px;
  transition:transform .22s ease,opacity .15s ease,top .22s ease}
.hamburger span:nth-child(1){top:0}
.hamburger span:nth-child(2){top:5px}
.hamburger span:nth-child(3){top:10px}
.rail-toggle.open .hamburger span:nth-child(1){top:5px;transform:rotate(45deg)}
.rail-toggle.open .hamburger span:nth-child(2){opacity:0}
.rail-toggle.open .hamburger span:nth-child(3){top:5px;transform:rotate(-45deg)}

/* Full-screen toggle (JS unhides it only where the API exists) */
.fs-toggle{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;
  border-radius:6px;border:1px solid var(--rule);background:transparent;color:var(--quiet);cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.fs-toggle:hover{color:var(--ember);border-color:var(--ember-deep)}
.fs-toggle .fs-i-compress{display:none}
.fs-toggle.on .fs-i-expand{display:none}
.fs-toggle.on .fs-i-compress{display:block}

/* Drawer close button + scrim — mobile only (revealed in the media query) */
.rail-close{display:none;position:absolute;top:.55rem;right:.7rem;width:2.1rem;height:2.1rem;padding:0;
  border:0;border-radius:50%;background:var(--well);color:var(--quiet);font-size:1.5rem;line-height:1;
  cursor:pointer;align-items:center;justify-content:center;touch-action:manipulation}
.rail-close:hover{color:var(--ember)}
.rail-backdrop{position:fixed;inset:0;z-index:55;background:rgba(10,11,16,.55);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
body.rail-on{overflow:hidden}
.type-controls{display:flex;gap:.4rem;margin-left:auto}
.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)}

.ch-eyebrow{font:600 .7rem/1 var(--utility);letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin:0 0 .8rem}
.chapter-title{font-size:2rem;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.2rem}
.has-art .title-rule{
  width:min(15rem,70%);height:38px;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 2rem;
}

/* rendered markdown prose */
.prose{font-size:var(--reader-size,1em)}
.reader-stage{font-size:1em}
.prose p{margin:0 0 1.2rem}
.prose h1,.prose h2,.prose h3,.prose h4{
  font-weight:400;line-height:1.3;letter-spacing:.004em;margin:2.2rem 0 .9rem;color:var(--vellum)}
.prose h1{font-size:1.6rem}
.prose h2{font-size:1.38rem}
.prose h3{font-size:1.18rem}
.prose h4{font-size:1.04rem;color:var(--quiet);text-transform:uppercase;letter-spacing:.1em;font-family:var(--utility)}
.prose ul,.prose ol{margin:0 0 1.2rem;padding-left:1.5rem}
.prose li{margin:.25rem 0}
.prose blockquote{margin:1.4rem 0;padding:.3rem 0 .3rem 1.2rem;border-left:2px solid var(--ember-deep);color:var(--quiet);font-style:italic}
.prose code{font:.9em ui-monospace,monospace;background:var(--well);padding:.08em .35em;border-radius:4px}
.prose hr{border:0;border-top:1px solid var(--rule);margin:2rem 0}
.prose strong{font-weight:600}
.prose em{font-style:italic}
/* gentle drop cap on the first paragraph of a chapter */
.chapter .prose>p:first-of-type::first-letter{
  font-size:3em;line-height:.8;float:left;padding:.05em .12em 0 0;color:var(--ember);
}
.story-fig{margin:2.4rem 0;text-align:center}
.story-img{display:block;max-width:100%;height:auto;margin:0 auto;
  border-radius:5px;border:1px solid var(--rule)}

.chapter-nav{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--rule);
}
.chnav{
  background:var(--well);border:1px solid var(--rule);border-radius:8px;
  color:var(--vellum);font:600 .78rem var(--utility);letter-spacing:.06em;
  padding:.6rem 1.05rem;cursor:pointer;transition:background .15s,border-color .15s,opacity .15s;
}
.chnav:hover:not(:disabled){border-color:var(--ember-deep);background:var(--well-hi)}
.chnav:disabled{opacity:.32;cursor:default}
.chnav-pos{font:500 .8rem var(--utility);color:var(--faint);letter-spacing:.08em}
.fin{display:block;text-align:center;color:var(--ember);margin-top:3rem;
  font-size:1.05rem;letter-spacing:.4em;padding-left:.4em}

/* ---------- overview (title tab) + gallery ---------- */
.story-title-big{font-size:2.3rem;line-height:1.2;font-weight:400;letter-spacing:.004em;margin:0 0 .8rem}
.overview-premise{margin:0 0 1.8rem;font-size:1.05em;line-height:1.6;color:var(--vellum)}
.overview-premise p{margin:0 0 1rem}
.overview-premise>p:first-of-type::first-letter{font-size:inherit;float:none;color:inherit;padding:0;line-height:inherit}
.overview-meta{margin:0 0 2rem}
.gallery{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:.7rem;margin:0 0 2.4rem;
}
.gallery-cell{
  position:relative;
  padding:0;border:1px solid var(--rule);border-radius:7px;overflow:hidden;
  background:#1a1d27;cursor:pointer;aspect-ratio:1/1;transition:border-color .15s,transform .15s;
}
.gallery-cell:hover{border-color:var(--ember);transform:translateY(-2px)}
.gallery-cell img{width:100%;height:100%;object-fit:cover;display:block}
.cell-del{
  position:absolute;top:.35rem;right:.35rem;width:1.7rem;height:1.7rem;padding:0;
  border:none;border-radius:50%;background:rgba(10,11,16,.72);color:#fff;
  font-size:1.15rem;line-height:1;cursor:pointer;display:none;
  align-items:center;justify-content:center;
}
.gallery-cell:hover .cell-del,.cell-del:focus{display:flex}
.cell-del:hover{background:var(--ember-deep)}
.start-reading{margin-top:.5rem}

/* ---------- lightbox ---------- */
body.lb-on{overflow:hidden}
.lightbox{
  position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  background:rgba(10,11,16,.94);padding:3.5rem 4.5rem;
}
.lb-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;
  box-shadow:0 10px 40px rgba(0,0,0,.6)}
.lb-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:3rem;height:3rem;border-radius:50%;border:1px solid var(--rule);
  background:rgba(28,31,41,.7);color:var(--vellum);font-size:1.7rem;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.lb-arrow:hover{color:var(--ember);border-color:var(--ember-deep);background:var(--well)}
.lb-prev{left:1rem}
.lb-next{right:1rem}
.lb-close{
  position:absolute;top:1rem;right:1.2rem;width:2.4rem;height:2.4rem;border-radius:50%;
  border:1px solid var(--rule);background:rgba(28,31,41,.7);color:var(--vellum);
  font-size:1.5rem;line-height:1;cursor:pointer;
}
.lb-close:hover{color:var(--ember);border-color:var(--ember-deep)}
.lb-count{position:absolute;bottom:1.1rem;left:50%;transform:translateX(-50%);
  font:500 .8rem var(--utility);letter-spacing:.08em;color:var(--quiet)}
@media (max-width:480px){
  .lightbox{padding:1rem .5rem}
  .lb-arrow{width:2.4rem;height:2.4rem;font-size:1.3rem}
  .lb-close{top:calc(.6rem + env(safe-area-inset-top));right:.8rem;width:2.6rem;height:2.6rem}
  .lb-count{bottom:calc(.9rem + env(safe-area-inset-bottom))}
  .gallery{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
}

/* ---------- 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} }

/* ---------- responsive ---------- */
@media (max-width:860px){
  .reader-shell{display:block;max-width:none;padding:0 0 5rem}
  .reader-main{max-width:none;padding:1rem 1.1rem 0;margin:0}

  /* Off-canvas contents drawer */
  .chapter-rail{
    position:fixed;top:0;left:0;bottom:0;z-index:60;width:min(84vw,20rem);margin:0;
    background:var(--ink-2);border-right:1px solid var(--rule);box-shadow:6px 0 30px rgba(0,0,0,.45);
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding:calc(1.2rem + env(safe-area-inset-top)) 1.2rem
            calc(1.2rem + env(safe-area-inset-bottom))
            calc(1.2rem + env(safe-area-inset-left));
    transform:translateX(-100%);transition:transform .26s ease;visibility:hidden;
  }
  .chapter-rail.open{transform:translateX(0);visibility:visible}
  .rail-title{display:block;margin:1.6rem 0 1.1rem}
  .chapter-list{display:flex;max-height:none;background:none;border:0;padding:0;margin:0}
  .chapter-link{padding:.7rem .55rem}
  .ch-name{font-size:1.02rem}
  .rail-close{display:flex}

  /* Sticky, safe-area-aware control bar */
  .reader-bar{
    position:sticky;top:0;z-index:40;margin:0 -1.1rem 1.4rem;
    padding:.5rem 1.1rem;padding-top:calc(.5rem + env(safe-area-inset-top));
    background:rgba(28,31,41,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--rule-soft);
  }
  .rail-toggle{display:inline-flex;min-height:2.4rem}
  .type-controls{gap:.5rem}
  .type-controls button,.fs-toggle{width:2.4rem;height:2.4rem}
  .chnav{padding:.7rem 1.05rem}
}
@media (min-width:861px){ .rail-backdrop{display:none !important} }
@media (hover:none){ .gallery-cell .cell-del{display:flex} }
@media (max-width:480px){
  body{font-size:17px}
  .wrap{padding:2.2rem 1.1rem 5rem}
  .wrap-wide{padding-left:1.1rem;padding-right:1.1rem}
  .chapter-title{font-size:1.6rem}
  .card{padding:1rem}
  .card-cover{flex-basis:68px;width:68px;height:96px}
}