:root { --black:#0d0d0d; --white:#f4f0e8; --pink:#ff75ba; --teal:#22d7c7; --sky:#65b8ff; --yellow:#ffe248; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--black); color:var(--white); font-family:"DM Mono",monospace; } a { color:inherit; text-decoration:none; } img { display:block; width:100%; height:100%; object-fit:cover; }
.opening { height:100svh; min-height:580px; position:relative; overflow:hidden; }.opening>img { position:absolute; inset:0; }.shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.1) 70%),linear-gradient(0deg,rgba(0,0,0,.65),transparent 48%); }.topbar { position:absolute; z-index:2; inset:0 0 auto; display:flex; justify-content:space-between; align-items:center; padding:1.35rem clamp(1.25rem,4vw,4rem); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; }.mark { color:var(--pink); font:1.55rem/1 "Archivo Black",sans-serif; letter-spacing:-.08em; }.opening-title { position:absolute; z-index:1; left:clamp(1.25rem,6vw,6rem); bottom:clamp(2rem,7vw,6rem); }.opening-title p { margin:0 0 1.1rem; color:var(--yellow); font-size:.68rem; text-transform:uppercase; }.opening h1 { margin:0 0 2.25rem; color:var(--sky); font:clamp(5.5rem,13vw,13rem)/.69 "Archivo Black",sans-serif; letter-spacing:-.1em; text-transform:uppercase; }.opening h1 em { color:var(--pink); font-family:"Instrument Serif",serif; font-weight:400; text-transform:none; }.opening-title>a { color:var(--teal); font-size:.7rem; text-transform:uppercase; }.opening-title>a span { margin-left:.5rem; font-size:1.1rem; }
.works { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:minmax(180px,18vw); gap:0; }.work-panel { display:block; position:relative; min-height:280px; overflow:hidden; background:#222; }.work-panel img { transition:transform .65s cubic-bezier(.2,.75,.2,1),filter .4s ease; }.work-panel::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.72),transparent 56%); }.work-panel span { position:absolute; z-index:1; left:1.15rem; right:1.15rem; bottom:1.1rem; display:flex; justify-content:space-between; align-items:end; gap:1rem; font:clamp(1.5rem,3.5vw,4rem)/.9 "Archivo Black",sans-serif; letter-spacing:-.075em; text-transform:uppercase; }.work-panel i { font:500 .62rem/1.2 "DM Mono",monospace; letter-spacing:.04em; text-transform:uppercase; font-style:normal; text-align:right; }.blue-lady span,.paradise span { color:var(--sky); }.blue-lady i,.paradise i { color:var(--yellow); }.cobblestones span { color:var(--pink); }.cobblestones i { color:var(--teal); }.climbing span { color:var(--yellow); }.climbing i { color:var(--pink); }.loveful span { color:var(--teal); }.loveful i { color:var(--sky); }.work-panel:hover img { transform:scale(1.055); filter:saturate(1.12); }.blue-lady { grid-column:span 7; grid-row:span 2; }.cobblestones { grid-column:span 5; grid-row:span 2; }.climbing { grid-column:span 4; grid-row:span 2; }.loveful { grid-column:span 5; grid-row:span 2; }.paradise { grid-column:span 3; grid-row:span 2; }
footer { min-height:74px; display:flex; justify-content:space-between; align-items:center; padding:1rem clamp(1.25rem,4vw,4rem); font-size:.67rem; text-transform:uppercase; } footer>a:last-child { color:var(--teal); } a:focus-visible { outline:4px solid var(--yellow); outline-offset:-7px; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:700px) { .opening { min-height:670px; }.opening>img { object-position:58% center; }.opening-title { left:1.25rem; bottom:2.5rem; }.opening h1 { font-size:5.6rem; }.works { display:block; }.work-panel { height:82vw; min-height:310px; }.work-panel span { font-size:2.05rem; }.work-panel i { max-width:8ch; font-size:.56rem; }.blue-lady,.cobblestones,.climbing,.loveful,.paradise { grid-column:auto; grid-row:auto; } }

.comics { background:var(--white); color:var(--black); padding:clamp(2rem,5vw,5rem) clamp(1.25rem,4vw,4rem) clamp(2.5rem,5vw,5rem); }
.comics-heading { display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:clamp(1.5rem,3vw,3rem); border-bottom:2px solid var(--black); }
.comics-heading p { order:2; margin:0 0 1.2rem; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; }
.comics-heading h2 { margin:0 0 .4rem; font:clamp(3.4rem,8vw,9rem)/.85 "Archivo Black",sans-serif; letter-spacing:-.09em; text-transform:uppercase; }
.comics-heading em { color:#df3082; font:normal clamp(3.7rem,8vw,9rem)/.8 "Instrument Serif",serif; letter-spacing:-.045em; text-transform:none; }
.comic-grid { display:flex; flex-wrap:wrap; gap:clamp(.65rem,1.5vw,1.5rem); }
.comic-card { flex:1 1 200px; min-width:0; display:block; background:#fff; border:2px solid var(--black); transition:transform .2s ease,box-shadow .2s ease; }
.comic-card:hover { transform:translateY(-5px); box-shadow:8px 8px 0 var(--black); }
.comic-card img { width:100%; height:auto; aspect-ratio:11/17; object-fit:contain; background:#fff; }
.comic-card span { display:flex; align-items:baseline; justify-content:space-between; gap:.4rem; padding:.7rem .8rem .8rem; border-top:2px solid var(--black); background:var(--black); color:var(--pink); }
.comic-card strong { font:clamp(1rem,1.8vw,1.7rem)/1 "Archivo Black",sans-serif; letter-spacing:-.05em; text-transform:uppercase; }
.comic-card small { flex:none; font-size:.58rem; text-transform:uppercase; }
.comic-card:nth-child(2) span { color:var(--teal); }
.comic-card:nth-child(3) span { color:var(--sky); }
.comic-card:nth-child(4) span { color:var(--yellow); }
.comic-card:nth-child(5) span { color:var(--pink); }
@media (max-width:700px) {
  .comics-heading { display:block; }
  .comics-heading p { margin:0 0 .4rem; }
  .comics-heading h2 { font-size:clamp(3.2rem,11vw,5.5rem); }
  .comics-heading em { font-size:clamp(3.5rem,11vw,5.5rem); }
  .comic-card { flex-basis:calc(50% - .5rem); }
  .comic-card strong { font-size:clamp(.9rem,3.2vw,1.25rem); }
  .comic-card span { display:block; padding:.55rem .6rem; }
  .comic-card small { display:block; margin-top:.25rem; }
}