/* Graphic Novels: one continuous background, invisible responsive composition grid.
   Scoped exclusively to this section; homepage grid and YouTube CSS untouched. */
.tw-novels{
 --tw-orange:#ef9b40;
 box-sizing:border-box;
 position:relative;
 
 scroll-margin-top:0;
 min-height:calc(100svh - 100px);
 padding:clamp(18px,2.2vh,28px) clamp(24px,4vw,84px);
 color:#f6f1e8;
 background:#0a1930 url('/assets/comic/background%20v3.jpg') center center / cover no-repeat;
 font-family:Arial,Helvetica,sans-serif;
}
/* Background painted only on the section, not on foreground elements. */
.tw-novels *{box-sizing:border-box}
.tw-novels__layout,.tw-novels__right,.tw-novels__intro,
.tw-novels__covers,.tw-novels__feature,.tw-novels__making,
.tw-novels__process,.tw-novels__step{background:transparent!important;}

.tw-novels__layout{
 width:100%;max-width:1740px;margin:0 auto;
 display:flex;
 gap:clamp(14px,1.4vw,28px);
 align-items:flex-start;
 min-height:calc(100svh - 145px);
}
.tw-novels__feature{display:flex;flex:0 1 40%;align-items:center;justify-content:center;min-width:0;min-height:0}
.tw-novels__feature img{
 display:block;width:auto;max-width:100%;
 height:auto;max-height:calc(100svh - 150px);
 object-fit:contain;filter:none;
}
.tw-novels__right{
 display:flex;flex:1 1 60%;min-width:0;flex-direction:column;
 gap:clamp(8px,1.3vh,16px);
 align-items:flex-start;
}
.tw-novels__intro{align-self:start}
.tw-novels__heading{
 margin:0;
 font:italic 900 clamp(44px,4.1vw,82px)/.98 Impact,'Arial Narrow',Arial,sans-serif;
 letter-spacing:.01em;text-transform:uppercase;
 
 white-space:nowrap;
}
.tw-novels__rule{height:2px;background:linear-gradient(90deg,var(--tw-orange),transparent);margin-top:14px}
.tw-novels__subtitle{
 font-size:clamp(11px,1.15vw,19px);letter-spacing:.15em;
 text-transform:uppercase;margin:12px 0 0;
}
.tw-novels__covers{
 display:flex;justify-content:flex-start;align-items:center;
 gap:clamp(8px,1vw,18px);
 width:min(100%,610px);min-width:0;
}
.tw-novels__cover{
 display:block;flex:0 1 46%;min-width:0;
 text-align:center;text-decoration:none;color:inherit;
 transform-origin:center center;
}
.tw-novels__cover:first-child{transform:rotate(-5deg) translateY(5px)}
.tw-novels__cover:nth-child(2){transform:rotate(5deg) translateY(5px)}
.tw-novels__cover img{
 display:block;width:100%;height:clamp(190px,31vh,330px);
 object-fit:contain;filter:none;
}
.tw-novels__cover span{
 display:block;margin-top:5px;font-size:clamp(11px,.8vw,14px);
 font-weight:800;letter-spacing:.11em;
}
 .tw-novels__making{
 display:flex;flex-wrap:wrap;width:min(100%,680px);
 gap:clamp(5px,.6vw,10px);
 align-items:center;background:transparent;padding:0;
}
.tw-novels__making > h3{
 font:italic 900 clamp(21px,2vw,35px)/.98 Impact,'Arial Narrow',Arial,sans-serif;
 text-transform:uppercase;margin:0;
}
.tw-novels__making p{
 font-size:clamp(10px,.7vw,12px);letter-spacing:.08em;
 line-height:1.3;text-transform:uppercase;margin:3px 0 0;
 
}
.tw-novels__process{
 display:flex;
 gap:clamp(6px,.7vw,12px);align-items:start;min-width:0;max-width:570px;
}
.tw-novels__step{
 display:block;flex:1 1 0;min-width:0;text-decoration:none;color:inherit;text-align:center;
}
.tw-novels__step img{
 display:block;width:100%;height:clamp(85px,12vh,118px);
 object-fit:contain;background:transparent;
 filter:none;
}
.tw-novels__role{
 display:block;color:var(--tw-orange);font-size:clamp(9px,.7vw,12px);
 font-weight:800;margin-top:4px;
}
.tw-novels__name{
 display:block;font-size:clamp(9px,.72vw,12px);font-weight:800;
 line-height:1.3;text-transform:uppercase;
}
.tw-novels a:focus-visible{outline:3px solid var(--tw-orange);outline-offset:4px}
/* Preserve a single background while rearranging the same markup vertically. */
@media(max-width:1100px){
 .tw-novels{
  min-height:0;padding:30px 16px 45px;
  background-position:65% center;
 }
 .tw-novels__layout{
  display:flex;flex-direction:column;align-items:stretch;
  gap:24px;min-height:0;
 }
 .tw-novels__right{display:contents}
 .tw-novels__intro{order:1}
 .tw-novels__covers{order:2;max-width:690px;margin:auto;justify-content:center}
 .tw-novels__feature{order:3;width:100%;max-width:780px;margin:auto}
 .tw-novels__feature img{width:100%;max-height:none;height:auto}
 .tw-novels__making{order:4;display:block;width:100%}
 .tw-novels__heading{font-size:clamp(38px,7vw,72px);white-space:normal}
 .tw-novels__cover{flex-basis:44%}
 .tw-novels__cover img{height:auto;max-height:360px}
 .tw-novels__making h3{font-size:clamp(28px,5vw,42px)}
 .tw-novels__making p{font-size:12px;margin-bottom:16px}
 .tw-novels__process{max-width:none}
 .tw-novels__step img{height:clamp(115px,22vw,180px)}
 .tw-novels__role,.tw-novels__name{font-size:11px}
}
@media(max-width:540px){
 .tw-novels__heading{font-size:clamp(36px,10vw,52px)}
 .tw-novels__subtitle{font-size:11px;line-height:1.5}
 .tw-novels__covers{gap:14px}
 .tw-novels__cover img{max-height:270px}
 .tw-novels__process{display:flex;flex-wrap:wrap;gap:22px 12px}.tw-novels__step{flex:0 0 calc(50% - 6px)}
 .tw-novels__step img{height:200px}
}
@media(max-height:750px) and (min-width:1101px){
 .tw-novels__layout{min-height:0}
 .tw-novels__feature img{max-height:calc(100svh - 140px)}
 .tw-novels__cover img{height:clamp(160px,29vh,260px)}
 .tw-novels__step img{height:clamp(65px,10vh,95px)}
 .tw-novels__right{row-gap:10px}
}

/* Desktop editorial grouping: fixed artwork widths avoid empty flex-cell space.
   Original cover proportions, tilt and the full-section background are preserved. */
@media(min-width:1101px){
 .tw-novels__covers{width:auto;max-width:100%;gap:clamp(12px,1.4vw,24px);justify-content:flex-start}
 .tw-novels__cover{flex:0 0 auto;width:clamp(155px,11vw,205px)}
 .tw-novels__cover img{width:100%;height:auto;max-height:clamp(220px,34vh,320px);object-fit:contain}
 .tw-novels__making{width:min(100%,540px)}
 .tw-novels__process{flex:0 0 auto!important;width:min(100%,460px);max-width:460px;gap:8px}
 .tw-novels__step{flex:0 0 calc((100% - 24px)/4)}
 .tw-novels__step img{height:clamp(80px,11vh,112px)}
 .tw-novels__role{font-size:10px}
 .tw-novels__name{font-size:10px;letter-spacing:-.015em}
}
/* Compact making-of row; no visible grid or background panels. */
.tw-novels__making > h3{flex:0 0 100%}
.tw-novels__making > p{flex:0 0 100%}
.tw-novels__making > .tw-novels__process{flex:1 1 100%}

/* Desktop correction: making-of heading ABOVE a tightly grouped thumbnail row. */
@media(min-width:1101px){
 .tw-novels{padding-top:12px;padding-bottom:12px}
 .tw-novels__layout{min-height:0}
 .tw-novels__right{gap:0}
 .tw-novels__covers{width:auto;max-width:100%;gap:clamp(12px,1.4vw,24px);justify-content:flex-start}
 .tw-novels__cover{flex:0 0 auto;width:clamp(145px,10.5vw,190px)}
 .tw-novels__cover img{width:100%;height:auto;max-height:clamp(190px,29vh,275px);object-fit:contain}
 .tw-novels__making{
  display:flex;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;
  width:min(100%,540px);gap:0;margin-top:clamp(16px,2.3vh,25px);
 }
 .tw-novels__making > h3{flex:none;width:auto;margin:0;font-size:clamp(22px,1.9vw,32px)}
 .tw-novels__making > p{flex:none;width:auto;margin:5px 0 10px;font-size:clamp(10px,.72vw,12px);line-height:1.3}
 .tw-novels__making > .tw-novels__process{
  display:flex;flex:none!important;width:auto;max-width:100%;gap:clamp(3px,.35vw,6px);
  align-items:flex-start;justify-content:flex-start;
 }
 .tw-novels__step{flex:0 0 clamp(78px,6.8vw,116px);min-width:0}
 .tw-novels__step img{display:block;width:100%;height:clamp(85px,12vh,115px);object-fit:contain}
 .tw-novels__role,.tw-novels__name{font-size:clamp(9px,.64vw,11px);white-space:normal}
}


/* Standalone page: section begins immediately below shared navigation. */
.tw-novels-page{min-height:100svh}
.tw-novels-page .tw-novels{min-height:calc(100svh - 100px);scroll-margin-top:0}
.tw-novels-page .tw-novels__layout{min-height:0}
@media(max-width:1100px){
 .tw-novels-page .tw-novels{padding-top:20px;min-height:calc(100svh - 65px)}
 .tw-novels-page .tw-novels__layout{gap:20px}
 .tw-novels-page .tw-novels__heading{margin:0}
 .tw-novels-page .tw-novels__intro{width:100%}
}