/* MotionManga shelves (nav, featured and "more" rows, categories) and the catalogue story pages + chapter reader.
   Built pages come from work/catalogue/build_site.py; site.css stays the base. */

/* ---------------------------------------------------------------- header nav */
.site-head{justify-content:space-between;gap:16px;top:env(safe-area-inset-top,0px)}
.site-nav{display:flex;gap:4px}
.site-nav a{padding:8px 10px;border-radius:6px;font-weight:700;font-size:14px;color:var(--muted)}
.site-nav a:hover{color:var(--ink);background:#f1ece6}
.site-nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--green)}

/* ---------------------------------------------------------------- shelves */
.home .shelf+.shelf{margin-top:40px}
.shelf-head h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-.01em}
.shelf-head h1,.shelf-head h2{white-space:nowrap}
@media (max-width:520px){.shelf .shelf-head p{display:none}}
.shelf-more{margin-left:auto;align-self:center;font-size:13px;font-weight:700;color:var(--green);white-space:nowrap}
.shelf-more:hover{text-decoration:underline}
.card-art{container-type:inline-size}
.card-logo{font-size:11cqi}
.card-logo--cm{font-size:8.6cqi}
.card-logo--vc{font-size:11.6cqi}

/* Featured originals: each cover's title set as if by a different designer (user, 29 Oct 2026) */
/* Till Death Do Us Play: thriller title card, black condensed caps low-left on the white dress, PLAY in cobalt */
.card-art--td{background:#000}
.card-art--td:after{background:linear-gradient(0deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.25) 18%,rgba(255,255,255,0) 32%)}
.card-logo--td{top:auto;bottom:10%;left:8%;right:auto;padding:0;text-align:left;font:400 6.6cqi/1 Anton,Impact,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#0b0b0e;text-shadow:0 0 .35em rgba(255,255,255,.95)}
.card-logo--td span+span{font-size:4.6em;line-height:.88;letter-spacing:.01em;margin-left:-.04em}
.card-logo--td em{font-style:normal;color:#1d3bd1}
/* Open the Eyes: shonen logo, a red brush-cut tag over a heavy block EYES, centred at the bottom */
.card-art--oe{background:#0b0d14}
.card-art--oe:after{background:linear-gradient(0deg,rgba(6,8,14,.9) 0%,rgba(6,8,14,.5) 20%,rgba(6,8,14,0) 38%)}
.card-logo--oe{top:auto;bottom:10.5%;padding:0 6%;text-align:center;font:400 19cqi/.9 'Dela Gothic One',Impact,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#f4efe4;text-shadow:0 .05em 0 #000,0 0 .3em rgba(0,0,0,.7)}
.card-logo--oe span:first-child{display:table;margin:0 auto .14em;padding:.4em .7em .32em;font-size:.26em;line-height:1;letter-spacing:.34em;background:#c41f25;color:#fff;text-shadow:none;transform:skewX(-10deg)}
/* Sleeper Car No. 13: romance script, tilted top-left over the carriage roof, with a gold ticket stamp */
.card-art--sc{background:#1b2230}
.card-art--sc:after{background:radial-gradient(130% 55% at 0% 0%,rgba(14,18,28,.78) 0%,rgba(14,18,28,.38) 40%,rgba(14,18,28,0) 70%)}
.card-logo--sc{top:10.5%;left:6%;right:auto;padding:0;text-align:left;font:400 14.5cqi/1 'Pinyon Script',cursive;letter-spacing:0;color:#f7ecd6;transform:rotate(-6deg);transform-origin:0 0;text-shadow:0 1px .25em rgba(0,0,0,.55)}
.card-logo--sc em{display:inline-block;margin:.3em 0 0 2.6em;padding:.5em .9em .42em;font:700 4.6cqi/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.36em;text-transform:uppercase;font-style:normal;color:#f0cd78;background:rgba(14,18,28,.72);border:1px solid currentColor;border-radius:2px;outline:1px solid rgba(230,194,108,.45);outline-offset:2px;transform:rotate(4deg);text-shadow:none}

/* Popular & trending: the biggest cards on the page (about 20% larger than the old five-across), one row */
.cards--feature{display:grid;grid-auto-flow:column;grid-auto-columns:52%;grid-template-columns:none;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;margin:0 -16px;padding:0 16px 6px;scrollbar-width:none}
.cards--feature::-webkit-scrollbar{display:none}
.cards--feature>li{scroll-snap-align:start}
@media (min-width:640px){.cards--feature{grid-auto-columns:33%;gap:20px}}
@media (min-width:900px){.cards--feature{grid-auto-columns:calc((100% - 84px) / 4);gap:28px;margin:0;padding:0 0 6px;scroll-padding-inline:0}}
.cards--feature .card-title{font-size:16px}

/* rails: a scrolling row with round arrows on the art's edges (rail.js shows them only when there is more to see) */
.rail{position:relative}
.rail .cards.cards--more{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:30%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;margin:0 -16px;padding:0 16px 6px;scrollbar-width:none}
.rail .cards--more::-webkit-scrollbar{display:none}
.rail .cards--more>li{scroll-snap-align:start}
@media (min-width:640px){.rail .cards.cards--more{grid-auto-columns:calc((100% - 32px - 80px) / 6)}}
@media (min-width:900px){.rail .cards.cards--more{grid-auto-columns:calc((100% - 80px) / 6);margin:0;padding:0 0 6px;scroll-padding-inline:0}}
.rail .cards{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){.rail .cards{scroll-behavior:auto}}
.rail-btn{position:absolute;z-index:3;top:var(--rail-mid,38%);translate:0 -50%;display:grid;place-items:center;width:40px;height:40px;padding:0 0 3px;border:0;border-radius:50%;
  background:#fff;color:var(--ink);font:400 28px/1 system-ui,sans-serif;box-shadow:0 0 0 1px var(--line),0 2px 10px rgba(30,20,15,.18);cursor:pointer}
.rail-btn[hidden]{display:none}
.rail-btn:hover{color:var(--green)}
.rail-btn:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.rail-prev{left:-20px}.rail-next{right:-20px}
@media (max-width:1180px){.rail-prev{left:-6px}.rail-next{right:-6px}}
@media (hover:none) and (max-width:899px){.rail-btn{display:none}}
.cards--feature.cards--grid{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;margin:0;padding:0}
@media (min-width:900px){.cards--feature.cards--grid{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* More stories: smaller, three across on phones, six across on desktop */
.cards.cards--more{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 10px}
@media (min-width:640px){.cards.cards--more{grid-template-columns:repeat(6,minmax(0,1fr));gap:26px 16px}}
.cards--more .card-title{font-size:13px;margin-top:8px}
.cards--more .card-genre{font-size:11.5px}
.cards--more .card-art{border-radius:6px}
.card-by{display:block;margin-top:1px;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* catalogue story covers: the title set in the story's own face over a wash of its paper colour */
.st-art:after{background:linear-gradient(180deg,rgba(var(--wash),.9) 0%,rgba(var(--wash),.45) 25%,rgba(var(--wash),0) 42%)}
.st-logo{position:absolute;z-index:1;left:0;right:0;top:7%;padding:0 7%;text-align:center;font-family:var(--logo-f);font-weight:700;font-size:10cqi;line-height:.98;color:var(--logo-c);text-wrap:balance;overflow-wrap:anywhere}
.st-logo--long{font-size:8.4cqi}
.st-logo--xlong{font-size:7.2cqi}
.st-dark .st-logo{text-shadow:0 1px 6px rgba(0,0,0,.6)}

/* category chips */
.cat-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cat-chips a{display:block;padding:8px 14px;border-radius:99px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;font-weight:650}
.cat-chips a:hover{box-shadow:inset 0 0 0 1.5px var(--green);color:var(--green)}
.cat-tabs{margin-bottom:8px}
.cat-tabs a[aria-current="true"]{background:var(--ink);color:#fff;box-shadow:none}
.cat-sub{margin:28px 0 12px;font-size:15px;font-weight:800}
.cat-empty{color:var(--muted)}

/* ---------------------------------------------------------------- story series page */
.st-title{font-family:var(--logo-f);font-style:normal;font-weight:700;font-size:clamp(28px,8vw,40px);line-height:1.02;color:#fff}
@media (min-width:900px){.st-title{font-size:48px}}
.st-tags a{display:block}
.st-tags li:hover{background:#ece4dc}
.home.shelf{padding-top:8px}

/* ---------------------------------------------------------------- chapter reader */
.rd-body{background:var(--bg);color:var(--ink)}
.rd-top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;align-items:center;gap:10px;height:52px;padding:0 max(12px,env(safe-area-inset-right,0px)) 0 max(6px,env(safe-area-inset-left,0px));background:var(--bg);box-shadow:0 1px 0 rgba(127,127,127,.25)}
.rd-body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:21;background:var(--bg)}
.rd-back{display:grid;place-items:center;width:40px;height:40px;font-size:28px;line-height:1;border-radius:8px}
.rd-back:hover{background:rgba(127,127,127,.15)}
.rd-name{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.2}
.rd-name b,.rd-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-name b{font-size:14px}
.rd-name span{font-size:12px;opacity:.7}
.rd-home{font:900 16px/1 Arial,Helvetica,sans-serif;letter-spacing:-.5px}
.rd-home span{color:var(--green)}
.rd{max-width:720px;margin:0 auto;padding-bottom:40px}
.rd-open{padding:56px 24px 40px;text-align:center}
.rd-open-n{margin:0;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--acc)}
.rd-open h1{margin:10px 0 12px;font-family:var(--logo-f);font-weight:700;font-size:clamp(32px,9vw,46px);line-height:1;color:var(--logo-c);text-wrap:balance}
.rd-dark .rd-open h1{color:var(--ink)}
.rd-open-by{margin:0;font-size:13px;opacity:.7}
.pn{margin:0;overflow:hidden;background:rgba(127,127,127,.12)}
.pn img{width:100%;height:auto}
.gut{display:flex;flex-direction:column;gap:12px;padding:20px 18px 34px}
.gut--quiet{padding:0 0 22px}
.ln{margin:0;max-width:86%}
.cap{align-self:flex-start;padding:8px 13px;background:var(--ink);color:var(--bg);font-family:var(--cap-f);font-size:17px;line-height:1.35}
.sp,.th,.tx{position:relative;display:flex;flex-direction:column;gap:2px;padding:10px 15px 11px;font-family:'Patrick Hand','Comic Neue',system-ui,sans-serif;font-size:18px;line-height:1.3}
.sp b,.th b,.tx b{font:800 10.5px/1.2 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.sp{background:#fff;color:#141414;border:2px solid #141414;border-radius:20px}
.sp:before{content:"";position:absolute;top:-9px;width:14px;height:14px;background:#fff;border-left:2px solid #141414;border-top:2px solid #141414}
.sp-l{align-self:flex-start}.sp-l:before{left:22px;transform:skewY(-28deg) rotate(18deg)}
.sp-r{align-self:flex-end}.sp-r:before{right:22px;transform:skewY(28deg) rotate(72deg)}
.th{background:rgba(255,255,255,.88);color:#222;border:2px dashed #555;border-radius:28px;font-style:italic}
.th.sp-l{align-self:flex-start}.th.sp-r{align-self:flex-end}
.tx{border-radius:16px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15.5px;box-shadow:0 4px 18px rgba(0,0,0,.18)}
.tx-l{align-self:flex-start;background:#e9e9ee;color:#111;border-bottom-left-radius:4px}
.tx-r{align-self:flex-end;background:#2b7cf6;color:#fff;border-bottom-right-radius:4px}
.tx-r b{color:rgba(255,255,255,.8)}
.fx{align-self:center;font:400 40px/1 Bangers,Impact,sans-serif;letter-spacing:.04em;color:var(--acc);transform:rotate(-4deg);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill}
.rd-end{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 18px 20px;text-align:center}
.rd-next{display:flex;flex-direction:column;align-items:center;gap:2px;width:min(100%,420px);padding:16px 22px;border-radius:14px;background:var(--acc);color:#111;font-weight:800;font-size:17px}
.rd-next small{font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.75}
.rd-tbc{margin:0;font-family:var(--logo-f);font-weight:700;font-size:30px;color:var(--acc)}
.rd-series{font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px;opacity:.85}
.rd-like{width:100%;text-align:left}
.rd-like h2{margin:10px 0 14px;font-size:16px;font-weight:800}
.rd-like .cards.cards--more{grid-template-columns:repeat(3,minmax(0,1fr))}
.rd-dark .card-by,.rd-dark .card-genre{color:inherit;opacity:.75}

/* motion: panels settle and lines pop in as they scroll into view (only with JS, never for reduced motion) */
@media (prefers-reduced-motion:no-preference){
  .js .pn img{transform:scale(1.07);transition:transform 2.2s cubic-bezier(.2,.7,.2,1)}
  .js .pn.in img{transform:scale(1)}
  .js .ln{opacity:0;translate:0 10px;transition:opacity .45s ease,translate .45s cubic-bezier(.2,.8,.2,1.2)}
  .js .gut.in .ln{opacity:1;translate:0 0}
  .js .gut.in .ln:nth-child(2){transition-delay:.35s}
  .js .gut.in .ln:nth-child(3){transition-delay:.7s}
  .js .fx{transition-duration:.25s}
}

/* home: category chips right under the header, one swipeable row on phones */
.cat-strip{margin:0 0 26px}
.shelf+.cat-strip{margin-top:30px}
.cat-strip .cat-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 4px;scroll-padding-inline:16px}
.cat-strip .cat-chips::-webkit-scrollbar{display:none}
.cat-strip .cat-chips a{white-space:nowrap}
.cat-strip .cat-all{background:transparent;box-shadow:none;color:var(--green)}
@media (min-width:900px){.cat-strip .cat-chips{flex-wrap:wrap;overflow:visible;margin:0;padding:0}}

/* per-series cover titles (docs/catalogue/covers.json): placed and lettered differently by each "author" */
.st-art.st-custom:after{background:none}
.st-art.wash-bottom:after,.st-art.wash-lower:after{background:linear-gradient(0deg,color-mix(in srgb,var(--tw) 55%,transparent) 0%,transparent 42%)}
.st-art.wash-top:after,.st-art.wash-upper:after{background:linear-gradient(180deg,color-mix(in srgb,var(--tw) 50%,transparent) 0%,transparent 40%)}
.st-art.wash-middle:after{background:linear-gradient(180deg,transparent 28%,color-mix(in srgb,var(--tw) 35%,transparent) 50%,transparent 72%)}
.st-logo--custom{position:absolute;z-index:1;left:6%;right:6%;display:flex;flex-direction:column;gap:.04em;font-family:var(--tf);font-weight:400;color:var(--tc);
  line-height:.9;letter-spacing:0;transform:rotate(var(--tr));text-wrap:balance;overflow-wrap:anywhere;padding:0;font-size:10cqi}
.st-logo--custom .tl{display:block;font-size:calc(max(var(--k), .66) * 1em)}
.st-logo--custom[style*="text-align:left"]{align-items:flex-start}.st-logo--custom[style*="text-align:right"]{align-items:flex-end}
.st-logo--custom[style*="text-align:center"]{align-items:center}
.st-logo--custom.it{font-style:italic}
.st-logo--custom.pos-top{top:6%}.st-logo--custom.pos-upper{top:20%}
.st-logo--custom.pos-middle{top:50%;transform:translateY(-50%) rotate(var(--tr))}
.st-logo--custom.pos-lower{top:auto;bottom:18%}.st-logo--custom.pos-bottom{top:auto;bottom:6%}
.st-logo--custom.fx-outline{-webkit-text-stroke:.07em var(--ts);paint-order:stroke fill;text-shadow:0 .05em .12em rgba(0,0,0,.35)}
.st-logo--custom.fx-shadow{text-shadow:.06em .07em 0 var(--ts),0 0 .3em rgba(0,0,0,.45)}
.st-logo--custom.fx-glow{-webkit-text-stroke:.03em var(--ts);paint-order:stroke fill;text-shadow:0 0 .18em var(--tc),0 0 .45em var(--tc),0 .05em .1em rgba(0,0,0,.6)}
.st-logo--custom.fx-band .tl{display:inline-block;width:auto;background:var(--ts);padding:.06em .25em .02em;margin:.02em 0}
.st-logo--custom.fx-plain{text-shadow:0 .04em .12em rgba(0,0,0,.35)}

/* Popular & trending stats from reader data (worker.js popularShelf) */
.card-stats{display:block;margin-top:2px;font-size:12px;font-weight:650;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}