:root{--ink:#111;--paper:#fffdf4;--yellow:#ffd83d;--red:#ef3340;--blue:#35a7ff;--cream:#fff5d6;--shadow:7px 7px 0 var(--ink);--border:4px solid var(--ink)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:Inter,system-ui,sans-serif;background-image:radial-gradient(#1112 1px,transparent 1px);background-size:9px 9px}button,a,input,select,textarea{font:inherit}.hidden{display:none!important}.skip-link{position:fixed;left:1rem;top:-5rem;z-index:100;background:#fff;padding:.8rem;border:3px solid}.skip-link:focus{top:1rem}.site-header{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem clamp(1rem,4vw,4rem);border-bottom:var(--border);background:var(--yellow);position:relative;z-index:5}.brand{text-decoration:none;color:inherit;display:flex;flex-direction:column;transform:rotate(-1deg)}.brand-kicker{text-transform:uppercase;font-size:.7rem;font-weight:800;letter-spacing:.12em}.brand-name{font:clamp(1.7rem,4vw,2.6rem)/.9 Bangers,cursive;letter-spacing:.04em}.header-actions{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;justify-content:flex-end}.comic-button{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;border:3px solid var(--ink);background:var(--red);color:#fff;text-decoration:none;text-transform:uppercase;font-weight:900;letter-spacing:.04em;padding:.85rem 1.15rem;box-shadow:4px 4px 0 var(--ink);cursor:pointer;transition:.15s}.comic-button:hover,.comic-button:focus-visible{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}.comic-button.small{font-size:.8rem;padding:.65rem .85rem}.comic-button.full{width:100%}.text-button{border:0;background:transparent;text-decoration:underline;font-weight:800;cursor:pointer}.hero{min-height:calc(100vh - 88px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:clamp(1.5rem,5vw,6rem);padding:clamp(2rem,6vw,6rem);overflow:hidden;align-items:center;background:linear-gradient(115deg,#fffdf4 0 60%,#35a7ff 60%)}.hero-copy{position:relative;z-index:2}.issue-label,.section-heading p,.dialog-heading p{font-weight:900;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem}.hero h1{font:clamp(3.6rem,9vw,8.5rem)/.82 Bangers,cursive;letter-spacing:.02em;margin:.2rem 0 1.3rem;text-shadow:4px 4px 0 #fff,7px 7px 0 var(--ink)}.hero h1 span{color:var(--red)}.hero-intro{font-size:clamp(1rem,2vw,1.35rem);max-width:620px;line-height:1.6;font-weight:600;margin-bottom:2rem}.speech-bubble{position:absolute;right:-2rem;bottom:-5rem;background:#fff;border:var(--border);border-radius:50%;padding:1.3rem 2rem;font:2rem Bangers;transform:rotate(8deg);box-shadow:var(--shadow);text-align:center}.speech-bubble:after{content:"";position:absolute;width:30px;height:30px;background:#fff;border-right:4px solid;border-bottom:4px solid;left:10%;bottom:-17px;transform:rotate(45deg)}.speech-bubble small{font:700 .65rem Inter}.portrait-panel{position:relative;background:#fff;border:var(--border);box-shadow:var(--shadow);transform:rotate(2deg);height:min(74vh,750px);overflow:hidden}.portrait-panel object,.portrait-panel img{width:100%;height:100%;object-fit:contain}.portrait-caption{position:absolute;bottom:0;left:0;right:0;margin:0;padding:.7rem;background:var(--yellow);border-top:3px solid;font-weight:900;text-align:center;text-transform:uppercase;font-size:.75rem}.portfolio-section,.latest-section{padding:clamp(4rem,8vw,8rem) clamp(1rem,5vw,5rem)}.portfolio-section{background:var(--cream);border-top:var(--border);border-bottom:var(--border)}.section-heading{text-align:center;margin-bottom:2.5rem}.section-heading.left{text-align:left}.section-heading h2,.dialog-heading h2,.auth-card h2{font:clamp(2.8rem,6vw,5.5rem)/1 Bangers;margin:.2rem 0}.menu-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(190px,25vw);gap:1rem}.menu-card{position:relative;border:var(--border);box-shadow:var(--shadow);overflow:hidden;cursor:pointer;background:#fff;text-align:left;padding:0;grid-column:span 6}.menu-card:nth-child(3),.menu-card:nth-child(4){grid-column:span 4}.menu-card:nth-child(5){grid-column:span 4}.menu-card img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15) contrast(1.05);transition:.3s}.menu-card:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,#000c)}.menu-card-title{position:absolute;left:1rem;right:1rem;bottom:.8rem;color:#fff;font:clamp(2rem,4vw,4rem)/.9 Bangers;z-index:2;text-shadow:3px 3px 0 #000}.menu-card:hover img,.menu-card:focus-visible img{transform:scale(1.06)}.menu-card:nth-child(2){transform:rotate(1deg)}.menu-card:nth-child(3){transform:rotate(-1deg)}.panel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}.work-panel{background:#fff;border:var(--border);box-shadow:var(--shadow);overflow:hidden}.work-panel-media{aspect-ratio:4/3;background:#ddd;display:grid;place-items:center;overflow:hidden}.work-panel-media img,.work-panel-media video{width:100%;height:100%;object-fit:cover}.placeholder-art{font:4rem Bangers;background:var(--blue);width:100%;height:100%;display:grid;place-items:center}.work-panel-copy{padding:1rem;border-top:3px solid}.work-panel-copy h3{font:2rem/1 Bangers;margin:0 0 .4rem}.work-panel-copy p{margin:0;line-height:1.5}.work-type{display:inline-block;background:var(--yellow);border:2px solid;padding:.2rem .45rem;font-size:.7rem;font-weight:900;text-transform:uppercase;margin-bottom:.6rem}footer{border-top:var(--border);background:var(--ink);color:#fff;padding:2rem clamp(1rem,5vw,5rem);display:flex;justify-content:space-between;gap:1rem;align-items:center}.portfolio-dialog,.auth-dialog,.upload-dialog{border:0;background:transparent;padding:0;max-width:none;max-height:none;width:100%;height:100%}.portfolio-dialog::backdrop,.auth-dialog::backdrop,.upload-dialog::backdrop{background:#000b}.dialog-shell{position:relative;width:min(1180px,94vw);height:min(850px,92vh);margin:4vh auto;background:var(--paper);border:var(--border);box-shadow:10px 10px 0 var(--yellow);padding:clamp(1rem,3vw,2rem);overflow:hidden}.close-button{position:absolute;z-index:8;right:1rem;top:1rem;width:44px;height:44px;border:3px solid;background:#fff;font-size:2rem;font-weight:900;line-height:1;cursor:pointer}.dialog-heading{padding-right:4rem}.carousel{display:grid;grid-template-columns:60px minmax(0,1fr) 60px;align-items:center;height:calc(100% - 150px);gap:1rem}.carousel-track{height:100%;position:relative;overflow:hidden}.slide{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);background:#fff;border:var(--border);opacity:0;transform:translateX(40px);pointer-events:none;transition:.3s}.slide.active{opacity:1;transform:none;pointer-events:auto}.slide-media{display:grid;place-items:center;background:#eee;overflow:hidden}.slide-media img,.slide-media video,.slide-media iframe{width:100%;height:100%;object-fit:contain;border:0}.slide-copy{padding:clamp(1.2rem,3vw,2.5rem);border-left:3px solid;display:flex;flex-direction:column;justify-content:center}.slide-copy h3{font:clamp(2.2rem,5vw,4rem)/1 Bangers;margin:0 0 1rem}.slide-copy p{line-height:1.65}.carousel-arrow{border:3px solid;background:var(--yellow);font:3rem Bangers;height:70px;cursor:pointer;box-shadow:3px 3px 0}.carousel-footer{display:flex;justify-content:center;gap:1rem;align-items:center;margin-top:1rem;font-weight:900}.carousel-dots{display:flex;gap:.5rem}.carousel-dot{width:13px;height:13px;border:2px solid;border-radius:50%;padding:0;background:#fff;cursor:pointer}.carousel-dot.active{background:var(--red)}.auth-card{position:relative;width:min(500px,92vw);margin:8vh auto;background:var(--paper);border:var(--border);box-shadow:9px 9px 0 var(--yellow);padding:clamp(1.5rem,4vw,3rem)}.auth-card label{display:grid;gap:.4rem;font-weight:800;margin:1rem 0}.auth-card input,.auth-card select,.auth-card textarea{width:100%;border:3px solid;padding:.8rem;background:#fff}.form-message{min-height:1.4em;font-weight:700}.upload-card{margin:3vh auto;width:min(600px,94vw);max-height:94vh;overflow:auto}progress{width:100%;height:18px;margin-top:1rem}
@media(max-width:850px){.hero{grid-template-columns:1fr;background:linear-gradient(#fffdf4 0 62%,#35a7ff 62%);padding-bottom:5rem}.portrait-panel{height:60vh}.speech-bubble{display:none}.menu-grid{grid-auto-rows:240px}.menu-card,.menu-card:nth-child(n){grid-column:span 6}.menu-card:nth-child(5){grid-column:1/-1}.panel-grid{grid-template-columns:1fr 1fr}.slide{grid-template-columns:1fr;grid-template-rows:minmax(0,1.3fr) minmax(180px,.7fr)}.slide-copy{border-left:0;border-top:3px solid}.carousel{grid-template-columns:45px minmax(0,1fr) 45px;gap:.4rem}.carousel-arrow{height:55px}}
@media(max-width:560px){.site-header{align-items:flex-start}.brand-kicker{display:none}.header-actions{gap:.4rem}.comic-button.small{font-size:.68rem}.hero h1{text-shadow:2px 2px 0 #fff,4px 4px 0 #111}.portrait-panel{height:52vh}.menu-grid{display:flex;flex-direction:column}.menu-card,.menu-card:nth-child(n){height:220px;transform:none}.panel-grid{grid-template-columns:1fr}.dialog-shell{width:100vw;height:100vh;margin:0;border-width:0;padding:1rem}.carousel{height:calc(100% - 120px);grid-template-columns:36px minmax(0,1fr) 36px}.carousel-arrow{font-size:2rem;border-width:2px}.slide-copy{padding:1rem}.slide-copy p{font-size:.9rem}.dialog-heading h2{font-size:2.5rem}footer{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Rich placeholder comic covers and portfolio panels */
.menu-card{isolation:isolate;min-height:260px}.comic-cover-art{position:absolute;inset:0;overflow:hidden;background:var(--yellow)}.comic-cover-art:before{content:"";position:absolute;inset:0;background-image:radial-gradient(#111 1.4px,transparent 1.4px);background-size:8px 8px;opacity:.22}.cover-writing{background:#ffdb47}.cover-comedy{background:#ef3340}.cover-drone{background:#35a7ff}.cover-about{background:#f7b7d2}.cover-drawings{background:#84d778}.cover-burst{position:absolute;z-index:2;top:15%;right:8%;display:grid;place-items:center;width:clamp(90px,14vw,160px);aspect-ratio:1;clip-path:polygon(50% 0,61% 25%,85% 8%,78% 35%,100% 39%,78% 53%,96% 72%,68% 70%,70% 100%,52% 77%,35% 98%,36% 70%,6% 81%,27% 57%,0 47%,27% 39%,9% 15%,38% 29%);background:#fff;color:#111;font:clamp(1.6rem,4vw,3.2rem)/1 Bangers;transform:rotate(9deg);filter:drop-shadow(4px 4px 0 #111)}.cover-figure{position:absolute;z-index:1;left:8%;bottom:12%;font:clamp(7rem,18vw,15rem)/.7 Bangers;transform:rotate(-8deg);text-shadow:5px 5px 0 #fff}.cover-speed-lines{position:absolute;inset:-30%;background:repeating-conic-gradient(from 20deg,#fff0 0 7deg,#fff9 7deg 8deg);transform:rotate(7deg)}.menu-card:after{background:linear-gradient(transparent 20%,#000d 92%)}.menu-issue{position:absolute;z-index:3;top:.7rem;left:.7rem;background:#fff;border:2px solid #111;padding:.25rem .5rem;font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.menu-card-copy{position:absolute;z-index:3;left:1rem;right:1rem;bottom:.9rem;color:#fff}.menu-card-title{position:static;display:block;color:#fff;text-shadow:3px 3px 0 #000}.menu-tagline{display:block;margin-top:.45rem;font-weight:800;font-size:clamp(.72rem,1.5vw,.95rem);text-shadow:2px 2px 0 #000}.menu-card:hover .comic-cover-art,.menu-card:focus-visible .comic-cover-art{transform:scale(1.035)}.comic-cover-art{transition:transform .25s ease}.work-panel{cursor:pointer;transition:transform .15s,box-shadow .15s}.work-panel:hover,.work-panel:focus-visible{outline:none;transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink)}.placeholder-art{position:relative;isolation:isolate;overflow:hidden;min-height:100%;padding:1rem;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;border:0}.placeholder-art:before{content:"";position:absolute;z-index:-1;inset:0;background-image:radial-gradient(#111 1px,transparent 1px);background-size:7px 7px;opacity:.2}.placeholder-video{background:var(--red);color:#fff}.placeholder-text{background:var(--yellow)}.placeholder-about{background:#f7b7d2}.placeholder-image{background:var(--blue)}.placeholder-symbol{font:clamp(3rem,9vw,7rem)/1 Bangers;text-shadow:3px 3px 0 #fff}.placeholder-art strong{font:clamp(1.5rem,4vw,3rem)/.95 Bangers;max-width:90%;text-shadow:2px 2px 0 #fff}.placeholder-art small{margin-top:.6rem;padding:.2rem .4rem;border:2px solid;background:#fff;color:#111;font-size:.65rem;font-weight:900;text-transform:uppercase}.slide-meta{margin:-.5rem 0 .6rem!important;font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.detail-list{padding-left:1.2rem;line-height:1.7;font-weight:700}.slide-actions{margin-top:1rem}.disabled-demo{opacity:.65;cursor:not-allowed;box-shadow:3px 3px 0 var(--ink)}.disabled-demo:hover{transform:none;box-shadow:3px 3px 0 var(--ink)}
@media(max-width:560px){.menu-card{min-height:220px}.cover-burst{width:95px}.cover-figure{font-size:8rem}.menu-tagline{font-size:.72rem}}

.lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.94);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.lightbox.hidden{
    display:none;
}

.lightbox img,
.lightbox video{

    max-width:92vw;
    max-height:92vh;

    border-radius:12px;

    box-shadow:
        0 25px 70px rgba(0,0,0,.6);
}

.lightbox-close{

    position:absolute;

    top:20px;
    right:30px;

    font-size:50px;

    background:none;
    border:none;

    color:white;

    cursor:pointer;
}

.lightbox-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    background:none;

    border:none;

    color:white;

    font-size:60px;

    cursor:pointer;
}

.left{
    left:30px;
}

.right{
    right:30px;
}
/* Mobile carousel fixes */
@media (max-width: 850px) {
  .portfolio-dialog {
    width: 100vw;
    height: 100dvh;
  }

  .dialog-shell {
    display: flex;
    flex-direction: column;
    width: min(100vw, 760px);
    height: 100dvh;
    max-height: 100dvh;
    margin: 0 auto;
    padding: 1rem;
    overflow: hidden;
  }

  .dialog-heading {
    flex: 0 0 auto;
    padding-right: 3.5rem;
  }

  .dialog-heading h2 {
    margin-bottom: .2rem;
  }

  .carousel {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: .45rem;
  }

  .carousel-track {
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .slide {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(220px, 42dvh) minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  .slide-media {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  .slide-media img,
  .slide-media video,
  .slide-media iframe {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .slide-copy {
    min-width: 0;
    min-height: 0;
    padding: 1rem;
    border-left: 0;
    border-top: 3px solid;
    justify-content: flex-start;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .slide-copy h3 {
    margin: 0 0 .65rem;
    font-size: clamp(2rem, 8vw, 3rem);
    overflow-wrap: anywhere;
  }

  .slide-copy p,
  .detail-list {
    overflow-wrap: anywhere;
  }

  .slide-actions {
    padding-bottom: .35rem;
  }

  .slide-actions .comic-button,
  .slide-actions a.comic-button {
    width: 100%;
    text-align: center;
  }

  .carousel-arrow {
    width: 100%;
    min-width: 0;
    height: 56px;
    padding: 0;
    touch-action: manipulation;
  }

  .carousel-footer {
    flex: 0 0 auto;
    flex-wrap: wrap;
    row-gap: .45rem;
    margin-top: .65rem;
  }

  .carousel-dots {
    max-width: min(70vw, 360px);
    padding: .2rem .1rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .carousel-dot {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 560px) {
  .dialog-shell {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    box-shadow: none;
    padding: .75rem;
  }

  .close-button {
    top: .65rem;
    right: .65rem;
    width: 42px;
    height: 42px;
  }

  .dialog-heading {
    padding-right: 3rem;
  }

  .dialog-heading h2 {
    font-size: clamp(2rem, 11vw, 2.75rem);
  }

  .dialog-heading p {
    margin-top: 0;
    margin-bottom: .6rem;
    font-size: .68rem;
  }

  .carousel {
    min-height: 0;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    gap: .3rem;
  }

  .slide {
    grid-template-rows: minmax(180px, 36dvh) minmax(0, 1fr);
  }

  .slide-copy {
    padding: .9rem;
  }

  .slide-copy h3 {
    font-size: clamp(1.8rem, 9vw, 2.45rem);
  }

  .slide-copy p {
    margin-top: .45rem;
    margin-bottom: .45rem;
    font-size: .92rem;
    line-height: 1.5;
  }

  .slide-meta {
    margin: -.15rem 0 .45rem !important;
    font-size: .7rem;
  }

  .detail-list {
    margin: .45rem 0;
    padding-left: 1rem;
    font-size: .9rem;
    line-height: 1.5;
  }

  .carousel-arrow {
    height: 48px;
    font-size: 2rem;
    border-width: 2px;
    box-shadow: 2px 2px 0;
  }

  .carousel-footer {
    gap: .65rem;
    margin-top: .5rem;
    font-size: .85rem;
  }
}