/* Earl Gold Art — Grumpy Mono. Colors live in :root below. */
/* IBM Plex Mono, self-hosted (SIL Open Font License) */
@font-face{font-family:'IBM Plex Mono';font-style:italic;font-weight:700;font-display:swap;src:url(../fonts/ibm-plex-mono-700-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:italic;font-weight:700;font-display:swap;src:url(../fonts/ibm-plex-mono-700-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-mono-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-mono-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/ibm-plex-mono-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/ibm-plex-mono-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0}
img{max-width:100%;display:block}
[hidden]{display:none!important}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:100}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}
*{transition:none!important;animation:none!important}
}
.c-preview{white-space:pre-wrap;margin:0;overflow-wrap:anywhere}
.c-fields label{min-width:0}
.c-fields select,.c-fields input,.c-fields textarea{width:100%;min-width:0;max-width:100%}

:root{color-scheme:light;--bone:#FFFDF4;--w:#fff;--k:#000;--y:#FFD400;--g:#4D4D4D}
body{background:var(--bone);color:var(--k);font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:15px;line-height:1.55}
a{color:inherit}
::selection{background:var(--y)}
.top{position:sticky;top:0;z-index:20;background:var(--bone);border-bottom:2px solid var(--k);display:flex;align-items:stretch;justify-content:space-between}
.brand{display:flex;align-items:center;padding:0 24px;font-weight:700;font-size:16px;text-decoration:none;min-height:60px;border-right:2px solid var(--k)}
.brand:hover{background:var(--y)}
#site-nav{display:flex}
#site-nav a{display:flex;align-items:center;padding:0 22px;border-left:2px solid var(--k);text-decoration:none;font-weight:600;font-size:13px;text-transform:uppercase}
#site-nav a:hover{background:var(--k);color:var(--y)}
#site-nav a.active{background:var(--y)}
.menu{display:none;border:0;border-left:2px solid var(--k);background:none;color:var(--k);font:700 13px 'IBM Plex Mono';padding:0 20px;cursor:pointer;min-height:60px}
.hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));border-bottom:2px solid var(--k)}
.hero .main{grid-column:span 8;padding:clamp(32px,5vw,72px);border-right:2px solid var(--k);display:flex;flex-direction:column;gap:32px}
.hero h1{margin:0;font-weight:700;font-size:clamp(60px,8.6vw,128px);line-height:.94;letter-spacing:-.045em;position:relative;z-index:0;isolation:isolate}
.hero h1 mark{background:none;color:var(--k);padding:0 .12em;position:relative;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero h1 mark::before{content:"";position:absolute;inset:0;background:var(--y);z-index:-1}
.hero .side{grid-column:span 4;display:flex;flex-direction:column}
.hero .side>*{padding:28px;border-bottom:2px solid var(--k)}
.hero .side>*:last-child{border-bottom:0}
.hero .side a{display:flex;justify-content:space-between;align-items:center;text-decoration:none;font-weight:700;font-size:22px}
.hero .side a:hover{background:var(--k);color:var(--y)}
.hero .side a.hl{background:var(--y)}
.hero .side a.hl:hover{background:var(--k)}
.sec{border-bottom:2px solid var(--k)}
.sechead{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));border-bottom:2px solid var(--k)}
.sechead h2{grid-column:span 8;margin:0;padding:28px clamp(20px,4vw,56px);font-size:clamp(32px,4.6vw,64px);font-weight:700;letter-spacing:-.03em;line-height:1;border-right:2px solid var(--k);overflow-wrap:normal}
.sechead p{grid-column:span 4;margin:0;padding:28px;font-size:14px;line-height:1.65;align-self:center}
.bar{display:flex;flex-wrap:wrap;align-items:stretch;border-bottom:2px solid var(--k);background:var(--w)}
.bar>*{border-right:2px solid var(--k)}
.bar .stat{padding:0 18px;display:flex;align-items:center;font-size:13px;font-weight:600;min-height:48px}
.tg{min-height:48px;padding:0 18px;border:0;border-right:2px solid var(--k);background:none;color:var(--k);font:600 13px 'IBM Plex Mono';cursor:pointer;text-transform:uppercase}
.tg[aria-pressed="true"]{background:var(--k);color:var(--y)}
.tg:hover{background:var(--y);color:var(--k)}
/* Grid / Index view toggle: the one not selected rests in yellow; hovering it underlines its word only */
.tg[data-view][aria-pressed="false"],.tg[data-view][aria-pressed="false"]:hover{background:var(--y);color:var(--k)}
.tg[data-view][aria-pressed="false"]:hover .w,.tg[data-view][aria-pressed="false"]:focus-visible .w{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.tg[data-view][aria-pressed="true"],.tg[data-view][aria-pressed="true"]:hover{background:var(--k);color:var(--y)}
.spacer{flex:1;border-right:0!important}
.body{padding:clamp(20px,4vw,56px)}
.grid-comic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.grid-line{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.card{border:2px solid var(--k);background:var(--w);display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.card:hover{transform:translate(-4px,-4px);box-shadow:6px 6px 0 var(--k)}
.card .pic{display:block;border:0;border-bottom:2px solid var(--k);padding:0;background:#eee;cursor:zoom-in;width:100%}
.card .pic img{width:100%;aspect-ratio:9/16;object-fit:cover}
.card .meta{padding:12px;display:flex;flex-direction:column;gap:10px}
.card .nm{font-weight:700;text-transform:uppercase;font-size:14px;display:flex;justify-content:space-between;gap:8px}
.card .nm span{color:var(--g);font-weight:400}
.buyrow{display:flex;flex-wrap:wrap;gap:6px}
.buy,.print,.sold{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:2px solid var(--k);background:var(--w);font:600 12px 'IBM Plex Mono';text-transform:uppercase;cursor:pointer;color:var(--k)}
.buy{background:var(--k);color:var(--y)}
.buy:hover,.print:hover{background:var(--y);color:var(--k)}
.sold{border-style:dashed;color:var(--g);cursor:default;font-weight:400}
/* list view */
.listview .grid-line,.listview .grid-comic{display:block;border:2px solid var(--k);background:var(--w)}
.listview .card{flex-direction:row;align-items:center;border:0;border-bottom:2px solid var(--k);gap:16px;padding:8px 12px}
.listview .card:last-child{border-bottom:0}
.listview .card:hover{transform:none;box-shadow:none;background:var(--bone)}
.listview .card .pic{width:44px;border:2px solid var(--k);flex:none}
.listview .card .meta{flex:1;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:0}
.more{margin-top:24px;min-height:52px;padding:0 22px;border:2px solid var(--k);background:var(--k);color:var(--y);font:700 14px 'IBM Plex Mono';cursor:pointer}
.more:hover{background:var(--y);color:var(--k)}
.films{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.film{border:2px solid var(--k);background:var(--w);display:flex;flex-direction:column}
.film .scr{position:relative;display:block;aspect-ratio:16/9;border-bottom:2px solid var(--k);overflow:hidden;background:var(--k)}
.film .scr img{width:100%;height:100%;object-fit:cover;filter:none;transition:filter .3s}
.film .scr:hover img,.film .scr:focus-visible img,.film .scr:active img{filter:grayscale(1) contrast(1.1)}
.film .scr .run{position:absolute;left:16px;bottom:16px;background:var(--y);border:2px solid var(--k);font-weight:700;padding:8px 12px;font-size:13px}
.film .tx{padding:20px;display:flex;flex-direction:column;gap:12px}
.film h3{margin:0;font-size:24px;font-weight:700}
.film p{margin:0;font-size:14px}
.flinks{display:flex;flex-wrap:wrap;gap:6px}
.flinks a{border:2px solid var(--k);padding:8px 10px;text-decoration:none;font-size:12px;font-weight:600;text-transform:uppercase;min-height:44px;display:inline-flex;align-items:center}
.flinks a:hover{background:var(--k);color:var(--y)}
.contact{background:var(--y);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));border-bottom:2px solid var(--k)}
.contact .l{grid-column:span 5;padding:clamp(24px,4vw,56px);border-right:2px solid var(--k);display:flex;flex-direction:column;gap:24px}
.contact h2{margin:0;font-size:clamp(34px,4vw,56px);font-weight:700;letter-spacing:-.03em;line-height:1.02}
.mailbox{display:flex;flex-wrap:wrap;border:2px solid var(--k);background:var(--w)}
.mailbox a{flex:1;padding:14px;font-weight:700;text-decoration:none;min-height:48px;border-right:2px solid var(--k);overflow-wrap:anywhere}
.mailbox button{border:0;background:var(--k);color:var(--y);font:700 13px 'IBM Plex Mono';padding:0 16px;cursor:pointer;min-height:48px}
.composer{grid-column:span 7;padding:clamp(24px,4vw,56px);display:flex;flex-direction:column;gap:16px}
.composer h3{margin:0;font-size:20px;font-weight:700}
.c-intro{margin:0;font-size:14px}
.c-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.c-fields label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;text-transform:uppercase}
.c-fields label::before{content:"> "}
.c-wide{grid-column:1/-1}
.c-fields select,.c-fields input,.c-fields textarea{min-height:44px;border:2px solid var(--k);background:var(--w);padding:10px;font:400 14px 'IBM Plex Mono';border-radius:0;color:var(--k)}
.c-fields :focus{outline:3px solid var(--k);outline-offset:2px}
.c-preview{background:var(--k);color:#E9E9E9;padding:18px;font:400 14px/1.65 'IBM Plex Mono';border:2px solid var(--k)}
.c-preview::before{content:"$ cat letter.txt\A\A";white-space:pre;color:var(--y)}
.c-actions{display:flex;gap:8px;flex-wrap:wrap}
.c-send,.c-copy{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border:2px solid var(--k);font:700 14px 'IBM Plex Mono';text-decoration:none;cursor:pointer;text-transform:uppercase}
.c-send{background:var(--k);color:var(--y)}
.c-copy{background:var(--w);color:var(--k)}
.c-send:hover,.c-copy:hover{background:var(--w);color:var(--k);box-shadow:4px 4px 0 var(--k)}
.c-status{margin:0;font-size:13px}
footer{display:flex;justify-content:space-between;flex-wrap:wrap}
footer>*{padding:18px 24px;font-size:13px;font-weight:600}
footer a{text-decoration:none;border-left:2px solid var(--k)}
footer a:hover{background:var(--y)}
#lightbox{position:fixed;inset:0;z-index:50;background:rgba(255,253,244,.97);display:flex;align-items:center;justify-content:center;padding:24px}
.lb-inner{position:relative;display:grid;grid-template-columns:56px minmax(0,auto) 56px;gap:16px;align-items:center;width:min(100%,880px)}
#lb-img{grid-column:2;max-height:calc(100vh - 200px);width:auto;margin:0 auto;border:2px solid var(--k);box-shadow:8px 8px 0 var(--k);background:#fff}
.lb-btn{min-width:48px;min-height:48px;border:2px solid var(--k);background:var(--w);color:var(--k);font:700 18px 'IBM Plex Mono';cursor:pointer}
.lb-btn:hover{background:var(--y)}
.lb-close{position:absolute;right:0;top:-8px;transform:translateY(-100%)}
.lb-prev{grid-column:1}
.lb-next{grid-column:3}
.lb-cap{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border:2px solid var(--k);background:var(--w);padding:12px}
#lb-name{font-weight:700;font-size:20px;text-transform:uppercase}
#lb-meta{font-size:12px;color:var(--g)}
@media (max-width:1100px){.grid-line{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1024px){
 .hero .main,.hero .side{grid-column:1/-1;border-right:0}
.hero .main{border-bottom:2px solid var(--k)}
 .sechead h2,.sechead p{grid-column:1/-1;border-right:0}
.sechead p{border-top:2px solid var(--k)}
 .contact .l,.composer{grid-column:1/-1;border-right:0}
.contact .l{border-bottom:2px solid var(--k)}
 .grid-comic{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
 .menu{display:block}
 #site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bone);flex-direction:column;border-bottom:2px solid var(--k)}
 #site-nav.open{display:flex}
#site-nav a{border-left:0;border-top:2px solid var(--k);min-height:52px}
 .grid-line{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .films,.c-fields{grid-template-columns:1fr}
 .lb-inner{grid-template-columns:48px minmax(0,1fr) 48px}
}

/* Section header background images: image fills the headline box, text on top */
.sechead h2{position:relative;isolation:isolate;color:var(--bone);background-color:var(--k);background-size:cover;background-repeat:no-repeat;background-position:center}
.sechead h2::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.25) 100%)}
#comic .sechead h2{background-image:url(../img/head-comic.jpg);background-position:center 55%}
#linework .sechead h2{background-image:url(../img/head-linework.jpg);background-position:center 45%}
#motion .sechead h2{background-image:url(../img/head-motion.jpg);background-position:55% 50%}

/* All / Originals left filter is desktop-only; count and Grid/Index show everywhere */
@media (max-width:1024px){.bar [data-filter]{display:none}}