:root{--bg:#F7EEDC;--ink:#0E2A30;--acc:#F9785B;--gut:clamp(20px,4vw,64px);--f:'EB Garamond',Georgia,'Times New Roman',serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f);font-size:clamp(18px,1.3vw,21px);line-height:1.5;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid currentColor;outline-offset:4px}
::selection{background:var(--ink);color:var(--bg)}
.wrap{padding-inline:var(--gut);position:relative}

/* nav */
nav{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:26px var(--gut)}
.logo{display:flex;align-items:center;gap:14px;text-decoration:none;font-size:clamp(26px,2.4vw,36px);line-height:1}
.logo svg{width:38px;height:38px;fill:currentColor}
nav ul{display:flex;gap:clamp(18px,3vw,44px);list-style:none}
nav ul a{text-decoration:none;font-size:1.02rem}
nav ul a:hover{text-decoration:underline;text-underline-offset:6px}
.btn{display:inline-block;background:var(--ink);color:var(--bg);padding:.8em 1.5em;text-decoration:none;font-size:1.05rem;font-style:italic;transition:transform .25s}
.btn:hover{transform:translateY(-3px)}
.arrow{display:inline-block;transition:transform .25s}
a:hover .arrow{transform:translateX(6px)}

/* type */
h1,h2,h3{font-weight:400}
.display{font-size:clamp(46px,6.6vw,118px);line-height:.95;letter-spacing:-.035em}
.lead{font-style:italic;font-size:clamp(22px,2vw,32px);line-height:1.22}
.body p{margin-bottom:.8em;max-width:30em}

/* hero */
.hero{min-height:100svh;display:flex;flex-direction:column;padding-top:140px;position:relative;overflow:hidden}
.hero h1{font-size:clamp(54px,8.1vw,170px);line-height:.92;letter-spacing:-.035em;padding-inline:var(--gut);position:relative;z-index:1}
.hero .sub{display:flex;flex-wrap:wrap;gap:24px 56px;align-items:center;justify-content:space-between;padding:clamp(24px,3vw,44px) var(--gut);position:relative;z-index:1}
.hero .sub p{font-style:italic;font-size:clamp(20px,1.8vw,28px);max-width:30ch;line-height:1.3}
.hero .pic{position:absolute;left:0;bottom:0;width:100%;height:auto;-webkit-mask-image:linear-gradient(to bottom,#000 86%,transparent);mask-image:linear-gradient(to bottom,#000 86%,transparent)}

/* scene: headline + copy in the sky, picture flush underneath */
.scene{padding-top:clamp(90px,11vw,180px)}
.scene .top{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(24px,5vw,90px);align-items:end;margin-bottom:clamp(30px,4vw,70px)}
.scene.flip .top{grid-template-columns:1fr 1.35fr}
.scene.flip .top>:first-child{order:2}
.scene .tag{font-style:italic;font-size:clamp(22px,2vw,32px);line-height:1.2;margin-top:.5em}
.scene .body .btn{margin-top:.6em}
.scene figure img{width:100%;height:auto;display:block}
.scene.crop figure img{aspect-ratio:2/1;object-fit:cover;object-position:var(--pos,50% 50%)}
.fade-b{-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent);mask-image:linear-gradient(to bottom,#000 80%,transparent)}


/* statement */
.state{font-style:italic;font-size:clamp(26px,2.9vw,46px);line-height:1.08;letter-spacing:-.02em;margin-top:.9em}

/* footer */
footer{padding-top:clamp(70px,8vw,120px);overflow:hidden}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(24px,3vw,56px);padding-bottom:clamp(60px,7vw,110px)}
footer h4{font-weight:400;font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;padding-bottom:14px;margin-bottom:22px;position:relative}
footer h4::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:2px;background:var(--ink)}
footer ul{list-style:none}
footer li{margin-bottom:.55em}
footer a{text-decoration:none}
footer ul a:hover{text-decoration:underline;text-underline-offset:5px}
.f-brand p{font-style:italic;max-width:21ch;margin:22px 0 28px;line-height:1.35}
form{display:flex;margin-top:18px}
form input{flex:1;min-width:0;background:transparent;border:1.5px solid var(--ink);color:var(--ink);font:italic 1.05rem var(--f);padding:.8em 1em}
form input::placeholder{color:var(--ink);opacity:.7}
form button{background:var(--ink);color:var(--bg);border:0;width:56px;font-size:1.4rem;cursor:pointer;font-family:var(--f)}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 30px;padding-bottom:30px;font-style:italic;font-size:.95rem}
.legal .s a{margin-inline:10px}
footer .pic{width:100%;height:auto;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%);mask-image:linear-gradient(to bottom,transparent,#000 22%)}


/* headline sits on the picture */
.overlay{padding-top:clamp(56px,6vw,100px)}
.overlay figure{position:relative}
.overlay figure img{aspect-ratio:16/9;object-fit:cover}
.overlay .over{position:absolute;left:0;bottom:clamp(18px,3.2vw,56px);max-width:42%;color:var(--bg);z-index:1}
.overlay .over.right{left:auto;right:0;max-width:44%}
.overlay figure::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(to top,rgba(6,24,28,.62),transparent);pointer-events:none}
.overlay .over h2{font-size:clamp(30px,4.1vw,72px)}
.overlay .over .tag{margin-top:.4em}
.scene .top.solo{display:block;margin-bottom:clamp(22px,2.6vw,40px)}
.scene .top.solo .body{display:flex;align-items:center;justify-content:space-between;gap:12px 40px;flex-wrap:wrap}
.scene .top.solo .body p{margin:0;max-width:46em}
.scene .top.solo .body .btn{margin:0}
@media (max-width:900px){
 .overlay figure::after{display:none}
 .overlay .over,.overlay .over.right{position:static;max-width:none;color:var(--ink);padding-top:24px;padding-bottom:10px}
}
/* three collections in one row */
.cards{padding-top:clamp(24px,3vw,48px);padding-bottom:clamp(50px,6vw,100px)}
.cards .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1vw,16px);padding-inline:clamp(8px,1vw,16px)}
.card figure{position:relative;overflow:hidden}
.card figure img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:var(--pos,50% 50%);display:block}
.card figure::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(to top,rgba(6,24,28,.72),transparent);pointer-events:none}
.card .over{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:clamp(16px,1.8vw,30px);color:var(--bg)}
.card .over h2{font-size:clamp(28px,3.1vw,56px);line-height:.98;letter-spacing:-.03em}
.card .over .tag{font-style:italic;font-size:clamp(17px,1.4vw,22px);line-height:1.2;margin-top:.5em}
.card .cbody{padding:20px clamp(6px,.6vw,10px) 0}
.card .cbody p{max-width:30em;margin-bottom:1em}
@media (max-width:900px){
 .cards .grid{grid-template-columns:1fr;row-gap:34px}
 .card figure img{aspect-ratio:4/3}
}

/* entrance: slow, layered reveals */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1.3s ease var(--d,0s),transform 1.5s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.rv.in{opacity:1;transform:none}
.scene figure{overflow:hidden}
.reveal-img img{opacity:0;transform:scale(1.09);transition:opacity 1.9s ease,transform 3.2s cubic-bezier(.2,.7,.2,1);will-change:transform,opacity}
.reveal-img.in img{opacity:1;transform:none}
.reveal-img .rv{transition-delay:var(--d,0s)}
.reveal-img.in .rv{opacity:1;transform:none}
.card:nth-child(2) .reveal-img img{transition-delay:.2s}
.card:nth-child(3) .reveal-img img{transition-delay:.4s}
.reveal-img .over h2.rv{--d:.7s}
.reveal-img .over .tag.rv{--d:1.05s}
.rv-pic{opacity:0;transform:translateY(40px);transition:opacity 2.2s ease .35s,transform 2.6s cubic-bezier(.2,.7,.2,1) .35s}
.rv-pic.in{opacity:1;transform:none}
.no-js .rv,.no-js .rv-pic,.no-js .reveal-img img{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv,.rv-pic,.reveal-img img,.reveal-img .rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.btn{transition:none}}

@media (max-width:900px){
 nav ul{display:none}
 .scene .top,.scene.flip .top{grid-template-columns:1fr}
 .scene.flip .top>:first-child{order:0}
 .f-grid{grid-template-columns:1fr 1fr}
 .f-brand{grid-column:1/-1}
}
@media (max-width:520px){.legal{flex-direction:column}}

/* ===== collection page: 100 Greatest Comics ===== */

.chapter{padding-top:clamp(80px,10vw,160px)}
.chapter .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,5vw,90px);align-items:start}
.chapter.flip .wrap{grid-template-columns:1.1fr 1fr}
.chapter.flip .chead{order:2}
.chead h2{font-size:clamp(40px,5.2vw,88px);line-height:.95;letter-spacing:-.035em}
.chead .tag{font-style:italic;font-size:clamp(22px,2vw,32px);line-height:1.2;margin-top:.55em}
.cbody2 p{margin-bottom:.9em;max-width:34em}
.cbody2 .lead{font-style:italic;font-size:clamp(22px,2vw,32px);line-height:1.22;margin-bottom:.7em}
.cbody2 strong{font-weight:500}
.stmt{font-style:italic;font-size:clamp(24px,2.6vw,38px);line-height:1.1;letter-spacing:-.02em;margin-top:1em;max-width:22em}
.chapter.wide .wrap{display:block}
.chapter.wide .chead{margin-bottom:clamp(24px,3vw,48px)}
.chapter.wide .cbody2{columns:2;column-gap:clamp(30px,6vw,110px)}
.chapter.wide .cbody2 p{break-inside:avoid;max-width:none}
.chapter.wide .cbody2 .lead{column-span:all;max-width:30em}
.chapter.wide .cbody2.after{margin-top:clamp(30px,4vw,60px)}

.genres{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(30px,3vw,56px) clamp(20px,2.4vw,44px);margin-top:clamp(40px,5vw,80px)}
.genre h3{font-size:clamp(24px,2vw,32px);line-height:1.05;letter-spacing:-.02em;margin-bottom:.6em}
.genre p{font-size:1rem;line-height:1.5;margin-bottom:.7em}
.chapter.wide .stmt{margin-top:clamp(36px,4vw,64px)}

.crits{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3vw,50px) clamp(20px,2.4vw,44px);margin-top:clamp(36px,4vw,64px)}
.crit dt{font-size:clamp(22px,1.8vw,28px);line-height:1.1;letter-spacing:-.015em;font-style:italic;margin-bottom:.35em}
.crit dd{font-size:1rem;line-height:1.5}

.explore{padding-top:clamp(90px,11vw,180px);padding-bottom:clamp(30px,4vw,60px)}
.explore h2{font-size:clamp(44px,6.4vw,110px);line-height:.95;letter-spacing:-.035em;margin-bottom:clamp(24px,3vw,48px);font-weight:400;max-width:16ch}
.ebody{max-width:44em}
.ebody p{margin-bottom:.9em}
.ebody .lead{font-style:italic;font-size:clamp(22px,2vw,32px);line-height:1.22}
.ebody .btn{margin-top:.6em}

.indexsec{padding-block:clamp(70px,8vw,130px) clamp(50px,6vw,90px)}
.ihead h2{font-size:clamp(44px,6.4vw,110px);line-height:.95;letter-spacing:-.035em}
.ihead .tag{font-style:italic;font-size:clamp(22px,2vw,32px);margin-top:.4em}
.isearch{margin:clamp(24px,3vw,44px) 0 clamp(18px,2vw,30px)}
.isearch label{display:block;font-style:italic;margin-bottom:.5em}
.isearch input{width:min(620px,100%);background:transparent;border:1.5px solid var(--ink);color:var(--ink);font:italic clamp(20px,1.6vw,26px) var(--f);padding:.6em .9em;border-radius:0}
.isearch input::placeholder{color:var(--ink);opacity:.55}
.isearch .count{margin-top:.6em;font-size:.95rem;font-style:italic}
.tablewrap{overflow-x:auto}
.itable{width:100%;border-collapse:collapse;text-align:left}
.itable thead th{font-weight:400;font-style:italic;font-size:.95rem;padding:.7em .8em;border-bottom:2px solid var(--ink);white-space:nowrap}
.itable td,.itable tbody th{padding:.85em .8em;vertical-align:baseline;border-bottom:1px solid rgba(14,42,48,.2);font-size:1rem;line-height:1.35}
.itable tbody th{font-weight:500;font-size:clamp(18px,1.4vw,23px);letter-spacing:-.01em;min-width:12em}
.itable .rk{font-size:clamp(20px,1.6vw,26px);font-style:italic;width:3.4em;color:var(--ink)}
.itable .yr{white-space:nowrap}
.itable .amp{font-style:italic;opacity:.6}
.itable tbody tr{transition:background .2s}
.itable tbody tr:hover{background:rgba(14,42,48,.05)}
.itable tbody tr[hidden]{display:none}
.none{padding:1.5em .8em;font-style:italic}
.fine{margin-top:clamp(30px,4vw,60px);font-style:italic;font-size:.95rem;max-width:60em;line-height:1.45}

@media (max-width:1100px){
 .itable thead th:nth-child(5),.itable td.og{display:none}
 .genres{grid-template-columns:repeat(2,1fr)}
 .crits{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
 .chapter .wrap,.chapter.flip .wrap{grid-template-columns:1fr}
 .chapter.flip .chead{order:0}
 .chapter.wide .cbody2{columns:1}
}
@media (max-width:760px){
 .genres,.crits{grid-template-columns:1fr}
 .itable thead{display:none}
 .itable tbody tr{display:grid;grid-template-columns:2.6em 1fr;column-gap:8px;padding:.8em 0;border-bottom:1px solid rgba(14,42,48,.2)}
 .itable td,.itable tbody th{border:0;padding:.1em 0}
 .itable .rk{grid-row:1/4;width:auto}
 .itable tbody th{grid-column:2;min-width:0}
 .itable .by,.itable .yr,.itable .og,.itable .gn{grid-column:2;font-size:.95rem}
 .itable .og{display:none}
}

/* ===== index: links + hover preview ===== */
.itable tbody th a{text-decoration:none}
.itable tbody tr:hover th a,.itable tbody th a:focus-visible{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
/* ===== single comic page: compact, two columns, no motion ===== */
.cnav .bar{display:flex;align-items:center;justify-content:space-between;padding:22px var(--gut)}
.cnav .bar ul{display:flex;gap:clamp(18px,3vw,40px);list-style:none}
.cnav .bar ul a{text-decoration:none;font-size:1rem}
.cnav .bar ul a:hover{text-decoration:underline;text-underline-offset:6px}
.cpage{max-width:1100px;margin:0 auto;padding:clamp(14px,2vw,30px) var(--gut) clamp(50px,6vw,90px);display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:clamp(28px,4vw,56px);align-items:start}
.ccover{position:sticky;top:20px}
.ccover img{width:100%;height:auto;display:block}
.cmain{max-width:42em}
.cmain h1{font-size:clamp(30px,3vw,44px);line-height:1.08;letter-spacing:-.02em;font-weight:500;margin-bottom:.3em}
.cmain .by{font-size:1.1rem;line-height:1.35}
.cmain .meta{font-style:italic;font-size:.98rem;margin-top:.15em}
.cmain .quote{font-style:italic;font-size:1.2rem;line-height:1.4;margin:1.1em 0 .4em}
.csec{margin-top:1.5em}
.csec h2{font-size:1.15rem;font-weight:500;margin-bottom:.35em}
.cs-body p{font-size:1.05rem;line-height:1.6;margin-bottom:.8em}
.cs-body ul{list-style:none;display:flex;flex-wrap:wrap;gap:.3em 1.4em}
.cs-body li{font-size:1.05rem}
.cs-body li::before{content:"· ";}
.pager{display:flex;justify-content:space-between;gap:16px;margin-top:2.4em;padding-top:1em;font-size:1rem}
.pager a{text-decoration:none}
.pager a:hover{text-decoration:underline;text-underline-offset:5px}
@media (max-width:760px){
 .cnav .bar ul{display:none}
 .cpage{grid-template-columns:1fr}
 .ccover{position:static;max-width:200px}
 .pager{flex-direction:column}
}

/* collection hero: picture is the header, text sits on it */
.phero{position:relative;height:100svh;min-height:560px;overflow:hidden;color:var(--bg)}
.phero .pbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 68%}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,24,28,.7),transparent 55%),linear-gradient(to bottom,rgba(6,24,28,.55),transparent 22%);pointer-events:none}
.phero nav{z-index:3;color:var(--bg)}
.phero nav .btn{background:var(--bg);color:var(--ink)}
.phero .pover{position:absolute;left:0;right:0;bottom:clamp(24px,4vw,64px);z-index:2;max-width:none}
.phero .pover h1{font-weight:400;font-size:clamp(40px,5.4vw,96px);line-height:.95;letter-spacing:-.035em;max-width:44%}
.phero .pover p{font-style:italic;font-size:clamp(18px,1.5vw,24px);line-height:1.3;max-width:42%;margin-top:.9em}
@media (max-width:900px){
 .phero{height:auto;min-height:0;overflow:visible;color:var(--ink)}
 .phero .pbg{position:static;height:72svh}
 .phero::after{inset:0 0 auto 0;height:72svh;background:linear-gradient(to bottom,rgba(6,24,28,.55),transparent 28%)}
 .phero .pover{position:static;padding-block:26px 40px}
 .phero .pover h1,.phero .pover p{max-width:none}
}

/* footer: all text sits on the picture */
footer.pf{position:relative;overflow:hidden;min-height:clamp(620px,56vw,860px);display:flex;flex-direction:column;justify-content:flex-end;padding-top:0;color:var(--bg);background:var(--bg)}
footer.pf .pfbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 16%);mask-image:linear-gradient(to bottom,transparent,#000 16%)}
footer.pf::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,24,28,.9),rgba(6,24,28,.55) 42%,transparent 72%);pointer-events:none}
footer.pf .pfc{position:relative;z-index:2}
footer.pf .f-grid{padding-bottom:clamp(30px,4vw,60px)}
footer.pf h4::after{background:var(--bg)}
footer.pf form input{border-color:var(--bg);color:var(--bg)}
footer.pf .legal{padding-bottom:clamp(22px,2.4vw,36px)}

/* images show immediately: no fade, no zoom */
.rv-pic,.reveal-img img{opacity:1!important;transform:none!important;transition:none!important}

/* ===== comic page: one full-screen picture behind everything ===== */
.cbg{position:fixed;inset:0;z-index:-3;background:#cdbf9f url(img/comic-bg.webp) center/cover no-repeat}
.cnav{background:rgba(247,238,220,.9);position:relative;z-index:2}
.cpage{max-width:1180px}
.cmain{background:rgba(247,238,220,.9);padding:clamp(22px,3vw,44px);max-width:46em}
footer.fplain{padding-top:clamp(40px,5vw,70px);background:rgba(247,238,220,.94)}

/* cover wears a sepia tint to sit in the page's palette; it lifts on hover/focus */
.ccover{position:relative;isolation:isolate;cursor:pointer}
.ccover img{filter:saturate(.5) sepia(.28) contrast(.96) brightness(.97);transition:filter .5s ease}
.ccover::after{content:"";position:absolute;inset:0;background:#9b8458;mix-blend-mode:color;opacity:.75;transition:opacity .5s ease;pointer-events:none}
.ccover:hover img,.ccover:focus-within img,.ccover.lift img{filter:none}
.ccover:hover::after,.ccover:focus-within::after,.ccover.lift::after{opacity:0}
@media (prefers-reduced-motion:reduce){.ccover img,.ccover::after{transition:none}}

/* cover moved inside the white box, centred at the top */
.cpage{display:block;max-width:820px;padding-top:clamp(14px,2vw,30px)}
.cmain{max-width:none}
.cmain .ccover{position:relative;top:auto;width:min(260px,62%);margin:0 auto clamp(20px,2.4vw,32px)}
.cmain h1,.cmain .by,.cmain .meta{text-align:center}
.cmain .quote{text-align:center;margin-inline:auto;max-width:34em}
.cmain .csec{margin-top:1.6em}

.cmain .ccover{width:min(380px,76%)}

/* comic page footer: only the small rights line, left */
footer.fplain{padding:18px var(--gut) 22px;background:rgba(247,238,220,.94)}
footer.fplain p{font-style:italic;font-size:.9rem;line-height:1.4;text-align:left;margin:0;max-width:none}

/* comic background round 2: neutral tone, bottom fades into the page */
.cbg{background:var(--bg) url(img/comic-bg.webp) center top/cover no-repeat;-webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 96%);mask-image:linear-gradient(to bottom,#000 62%,transparent 96%)}
.cmain{background:rgba(247,238,220,.92)}

/* cover tint follows the neutral background */
.ccover img{filter:saturate(.45) contrast(.97) brightness(.98)}
.ccover::after{background:#2f6470;opacity:.6}
.ccover:hover img,.ccover:focus-within img,.ccover.lift img{filter:none}
.ccover:hover::after,.ccover:focus-within::after,.ccover.lift::after{opacity:0}

/* ===== cover wall (default index view) ===== */
.icontrols{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:flex-end;justify-content:space-between;margin:clamp(24px,3vw,44px) 0 clamp(22px,2.4vw,36px)}
.icontrols .isearch{margin:0;flex:1 1 380px}
.vtoggle{display:flex}
.vtoggle button{font:italic 1.05rem var(--f);background:transparent;color:var(--ink);border:1.5px solid var(--ink);padding:.6em 1.3em;cursor:pointer;border-radius:0}
.vtoggle button+button{margin-left:-1.5px}
.vtoggle button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(22px,2.4vw,40px) clamp(10px,1.2vw,20px)}
.tile{display:block;text-decoration:none;position:relative;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.tile[hidden]{display:none}
.tile.pre{opacity:0;transform:translateY(22px)}
.tcover{position:relative;isolation:isolate;overflow:hidden;background:#d9ceb8}
.tcover img{width:100%;aspect-ratio:7/10;object-fit:cover;display:block;filter:saturate(.45) contrast(.97) brightness(.98);transition:filter .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.tcover::after{content:"";position:absolute;inset:0;background:#2f6470;mix-blend-mode:color;opacity:.6;transition:opacity .5s ease;pointer-events:none}
.tile:hover .tcover img,.tile:focus-visible .tcover img{filter:none;transform:scale(1.03)}
.tile:hover .tcover::after,.tile:focus-visible .tcover::after{opacity:0}
.trk{position:absolute;left:0;top:0;z-index:2;font-style:italic;font-size:1.05rem;line-height:1;background:var(--ink);color:var(--bg);padding:.4em .6em}
.tt{display:block;font-size:clamp(17px,1.25vw,20px);line-height:1.15;margin-top:.6em;font-weight:500}
.tby{display:block;font-style:italic;font-size:.95rem;line-height:1.25;margin-top:.15em;opacity:.8}
.tile:hover .tt{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.none{margin-top:1em}
@media (max-width:1100px){.tiles{grid-template-columns:repeat(4,1fr)}}
@media (max-width:760px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){.tile,.tcover img,.tcover::after{transition:none}.tile.pre{opacity:1;transform:none}}

.tiles[hidden],.tablewrap[hidden]{display:none}

/* ===== review fixes ===== */
/* cards: wider crop that keeps the subject, stronger fade for the taglines */
.card figure img{aspect-ratio:5/4}
.card figure::after{height:62%;background:linear-gradient(to top,rgba(6,24,28,.86),rgba(6,24,28,.4) 55%,transparent)}
.card .over .tag{font-size:clamp(18px,1.5vw,23px);opacity:1}
@media (max-width:900px){.cards .grid{row-gap:30px}.card figure img{aspect-ratio:4/3}}
/* home: close the gap under the hero */
#where.scene{padding-top:clamp(56px,6vw,96px)}
#where .top{margin-bottom:clamp(8px,1.5vw,24px)}
.cards{padding-top:clamp(16px,2vw,32px)}
/* nav button never wraps */
nav .btn,.cnav .btn{white-space:nowrap}
/* comic page: no resting shadow, no rule, cover small enough to keep the quote on the first screen */
.cpage .ccover img{box-shadow:none}
.pager{border-top:0;padding-top:1.2em;margin-top:2.6em}
.cmain .ccover{width:min(300px,64%)}
/* phone */
@media (max-width:640px){
 .hero{min-height:0;padding-top:110px;display:block}
 .hero .sub{padding-bottom:12px}
 .hero .pic{position:relative;left:auto;bottom:auto;width:160%;max-width:none;margin-left:-6%;margin-top:6px;-webkit-mask-image:none;mask-image:none}
 nav{padding:18px var(--gut)}
 nav .btn,.cnav .btn{padding:.6em 1em;font-size:.95rem}
 .logo{font-size:22px;gap:10px}
 .logo svg{width:28px;height:28px}
 footer.pf{min-height:0;padding-top:clamp(260px,70vw,340px)}
 footer.pf .pfbg{height:auto;min-height:100%;object-position:50% 0}
 footer.pf::after{background:linear-gradient(to top,rgba(6,24,28,.94),rgba(6,24,28,.78) 55%,rgba(6,24,28,.5))}
}
.card figure img,.tcover img{height:auto}

/* cards: title sits on a dark strip that the picture fades into, so it never covers the traveler */
.card figure{background:#0A2328;padding-bottom:clamp(112px,9.6vw,150px)}
.card figure img{-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent);mask-image:linear-gradient(to bottom,#000 80%,transparent)}
.card figure::after{display:none}
.card .over{padding-top:0}
@media (max-width:900px){.card figure{padding-bottom:clamp(104px,22vw,140px)}}

.cmain h1.long{font-size:clamp(21px,2.3vw,32px)}

/* tablet */
@media (min-width:641px) and (max-width:900px){
 .hero{min-height:0;padding-top:120px;display:block}
 .hero .sub{padding-bottom:16px}
 .hero .pic{position:relative;left:auto;bottom:auto;width:112%;max-width:none;margin-left:-3%;margin-top:8px;-webkit-mask-image:none;mask-image:none}
}
@media (min-width:520px) and (max-width:900px){.card figure{padding-bottom:104px}}
@media (max-width:900px){
 footer.pf::after{background:linear-gradient(to top,rgba(6,24,28,.92),rgba(6,24,28,.74) 55%,rgba(6,24,28,.48))}
}

/* long collection titles */
.phero.long .pover h1{font-size:clamp(34px,4.3vw,78px);max-width:62%}
.phero.long .pover p{max-width:46%}
@media (max-width:900px){.phero.long .pover h1,.phero.long .pover p{max-width:none}.phero.long .pover h1{font-size:clamp(30px,8vw,48px)}}
.explore h2.long{font-size:clamp(34px,4.6vw,82px);max-width:none}
@media (max-width:640px){.explore h2.long{font-size:clamp(26px,7.2vw,34px)}}
.phero::after{background:linear-gradient(to top,rgba(6,24,28,.7),transparent 55%),linear-gradient(to bottom,rgba(6,24,28,.78),rgba(6,24,28,.35) 16%,transparent 32%)}
@media (max-width:900px){.phero::after{background:linear-gradient(to bottom,rgba(6,24,28,.78),rgba(6,24,28,.3) 14%,transparent 28%)}}

@media (min-width:901px){
 .phero.rside .pover h1,.phero.rside .pover p{margin-left:auto;max-width:44%}
 .phero.rside.long .pover h1{max-width:44%}
 .phero.rside.long .pover p{max-width:40%}
}
@media (min-width:901px){
 .phero.rside.long .pover h1{font-size:clamp(30px,3.7vw,68px);max-width:52%}
 .phero.rside.long .pover p{max-width:52%}
 .phero.rside .pover h1,.phero.rside .pover p{width:52%}
}

.f-grid{grid-template-columns:1.6fr 1fr}

/* ===== colour scheme: cream + teal-navy ink + coral accent ===== */
::selection{background:var(--acc);color:var(--ink)}
.btn{background:var(--acc);color:var(--ink)}
.btn.dark{background:var(--acc);color:var(--ink)}
.phero nav .btn,.cnav .btn,.cnav .bar a.btn{background:var(--acc);color:var(--ink)}
form button{background:var(--acc);color:var(--ink)}
.vtoggle button[aria-pressed="true"]{background:var(--acc);color:var(--ink);border-color:var(--ink)}
.trk{background:var(--acc);color:var(--ink)}
footer h4::after,footer.pf h4::after{background:var(--acc)}
.ccover::after,.tcover::after{background:var(--tint,#2f6470);opacity:.55}
.ccover:hover::after,.ccover:focus-within::after,.ccover.lift::after,.tile:hover .tcover::after,.tile:focus-visible .tcover::after{opacity:0}
.tile:hover .tt{text-decoration-color:var(--acc);text-decoration-thickness:2px}
a:hover .arrow{color:inherit}
/* pictures are full-colour risograph prints now */
.hero .pic{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24%);mask-image:linear-gradient(to bottom,transparent 0,#000 24%)}
@media (max-width:640px){.hero .pic{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%);mask-image:linear-gradient(to bottom,transparent 0,#000 18%)}}
@media (min-width:641px) and (max-width:900px){.hero .pic{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 20%);mask-image:linear-gradient(to bottom,transparent 0,#000 20%)}}
.card figure img{-webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent);mask-image:linear-gradient(to bottom,#000 88%,transparent)}
/* comic pages: one background per collection */
.cbg{background-image:url(img/comic-bg.webp)}
body.t-scifi .cbg{background-image:url(img/comic-bg-scifi.webp)}
body.t-adventure .cbg{background-image:url(img/comic-bg-adventure.webp)}
.card figure{padding-bottom:clamp(58px,4.9vw,78px)}
@media (max-width:900px){.card figure{padding-bottom:clamp(60px,14vw,84px)}}
.cmain{background:rgba(247,238,220,.95)}

.tby{font-size:1rem}
.fine{font-size:1rem}

/* per-collection colour */
body.t-scifi{--acc:#6FA2D8;--tint:#34577f}
body.t-adventure{--acc:#E8A23C;--tint:#6b4a1c}
#canon.card figure{background:#0A2328}
#scifi.card figure{background:#1B2A33}
#adventure.card figure{background:#141F26}
#scifi.card .btn{background:#6FA2D8}
#adventure.card .btn{background:#E8A23C}
.card figure{padding-bottom:clamp(118px,9.4vw,150px)}
@media (max-width:900px){.card figure{padding-bottom:clamp(110px,24vw,150px)}}
.card figure img{-webkit-mask-image:linear-gradient(to bottom,#000 82%,transparent);mask-image:linear-gradient(to bottom,#000 82%,transparent)}

.fcontact{margin:.9em 0 0;max-width:none;font-style:italic}
.fcontact a{text-decoration:underline;text-underline-offset:4px}
.fplain a{text-decoration:underline;text-underline-offset:3px}