:root{
    --cream:     #f7ecd0;
    --paper:     #fff8e3;
    --ink:       #14110e;
    --orange:    #e8763a;
    --red:       #c93a31;
    --red-dylan: #d61f1f;
    --green:     #6fbf73;
    --title:  'Bagel Fat One', cursive;
    --hand:   'Caveat', cursive;
    --print:  'Architects Daughter', cursive;
    --bowlby: 'Bowlby One', cursive;
    --serif:  'Bevan', serif;
    --body:   'Inter', system-ui, sans-serif;
    --ui-ink: #f2dca8;
    --ui-dark: #06292f;
    --ui-panel: #082d35;
    --ui-panel-2: #0b3941;
    --ui-accent: #8b4f66;
    --ui-accent-2: #6e3e55;
    --ui-table: #0b2525;
    --ui-row: #fdf5e6;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;color:var(--ink);font-family:var(--print);height:100%;overflow:hidden}
  body{
    height:100vh;background:#1c1814;
    display:flex;align-items:center;justify-content:center;padding:20px;
  }

  .svgdefs{position:absolute;width:0;height:0;overflow:hidden}

  /* ============================================================
     POSTER FRAME
     ============================================================ */
  .poster-frame{
    background:var(--cream);
    padding:14px;
    box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 8px 20px rgba(0,0,0,.4);
    position:relative;border-radius:4px;
    display:inline-flex;flex-direction:column;
    height:calc(100vh - 40px);
    width:auto;
    transform-origin:center center;
    transition:transform .28s cubic-bezier(.22,1,.36,1);
    cursor:zoom-in;
  }
  body.page-enlarged .poster-frame{
    transform:scale(1.12);
    cursor:zoom-out;
  }
  .poster{
    position:relative;
    aspect-ratio:5/7;
    flex:1;min-height:0;min-width:0;
    overflow:hidden;border-radius:2px;isolation:isolate;
    background:
      radial-gradient(ellipse 80% 60% at 50% 70%, #6b6862 0%, #2a2826 60%, #0e0c0a 100%);
    border:2px solid #000;
  }
  .poster::before{
    content:"";position:absolute;inset:0;z-index:9;pointer-events:none;
    background-image: radial-gradient(rgba(0,0,0,.10) 1px, transparent 1.4px);
    background-size:3px 3px;mix-blend-mode:multiply;opacity:.55;
  }
  .poster::after{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      radial-gradient(ellipse 70% 45% at 50% 52%, rgba(214,31,31,.18), transparent 62%),
      linear-gradient(180deg, rgba(255,255,255,.02) 0%, transparent 36%, rgba(0,0,0,.42) 100%);
    mix-blend-mode:screen;opacity:.8;
  }

  /* ============================================================
     DYLAN DOG OVERLAY — red strip, eye, moon, city, bats
     ============================================================ */
  /* top red banner */
  .dylan-strip{
    position:absolute;top:0;left:0;right:0;height:80px;z-index:7;
    background: var(--red-dylan);
    border-bottom:3px solid #000;
    display:flex;align-items:center;gap:14px;padding:0 18px;
    box-shadow: 0 6px 16px rgba(0,0,0,.35);
  }
  .dylan-strip .cat-badge{
    width:60px;height:60px;border-radius:50%;background:var(--cream);
    border:3px solid #000;display:grid;place-items:center;flex-shrink:0;
    box-shadow:3px 3px 0 #000;overflow:hidden;transform:rotate(-4deg);
  }
  .dylan-strip .cat-badge img{width:88%;height:88%;object-fit:contain}
  .dylan-strip .logo{
    font-family:var(--bowlby);font-weight:400;font-size:42px;color:#fff;
    letter-spacing:1.5px;line-height:.9;text-transform:uppercase;
    text-shadow: 3px 3px 0 #000;
    transform: skewX(-7deg);padding:0 4px;
  }
  .dylan-strip .eye{
    width:32px;height:32px;border-radius:50%;background:#fff;
    border:3px solid #000;display:grid;place-items:center;flex-shrink:0;
    box-shadow:2px 2px 0 #000;
  }
  .dylan-strip .eye::after{content:"";width:14px;height:14px;border-radius:50%;background:var(--red-dylan);border:2px solid #000}
  .dylan-strip .main-issue{
    flex-shrink:0;margin-left:2px;padding-left:14px;border-left:3px solid #000;
    font-family:var(--serif);font-size:11px;line-height:1.05;letter-spacing:1.5px;
    color:#fff;text-transform:uppercase;text-shadow:2px 2px 0 #000;
  }
  .dylan-strip .main-issue b{
    display:block;margin-top:2px;font-family:var(--bowlby);font-size:20px;letter-spacing:1px;
  }
  .dylan-strip .ttl{
    margin-left:auto;color:#fff;font-family:var(--body);font-weight:800;
    font-size:11.5px;line-height:1.35;letter-spacing:.2px;text-align:right;
  }
  .dylan-strip .about-title{
    display:none;font-family:var(--bowlby);font-size:30px;line-height:.95;
    letter-spacing:1.5px;text-transform:uppercase;color:#fff;
    text-shadow:3px 3px 0 #000;transform:skewX(-6deg);
  }
  .dylan-strip .contact-title{
    display:none;font-family:var(--bowlby);font-size:30px;line-height:.95;
    letter-spacing:1.5px;text-transform:uppercase;color:#fff;
    text-shadow:3px 3px 0 #000;transform:skewX(-6deg);
  }
  .poster.show-about .dylan-strip .about-title{display:block}
  .poster.show-contact .dylan-strip .contact-title{display:block}
  /* ===== "THIS ISSUE" retro comic badge ===== */
  .issue-badge{
    position:absolute;top:10px;right:12px;z-index:8;
    background:var(--cream);border:3px solid #000;border-radius:3px;
    box-shadow:3px 3px 0 #000;min-width:108px;
    transform:rotate(1.2deg);overflow:hidden;
  }
  .poster.show-about .issue-badge,
  .poster.show-contact .issue-badge{display:none}
  .issue-badge-label{
    background:#f5b800;color:#000;font-family:var(--bowlby);
    font-size:11px;letter-spacing:2px;text-transform:uppercase;
    padding:4px 8px 3px;border-bottom:2.5px solid #000;text-align:center;
  }
  .issue-badge-items{
    list-style:none;margin:0;padding:5px 11px 7px;
    display:flex;flex-direction:column;gap:3px;
  }
  .issue-badge-items li{
    font-family:var(--body);font-weight:800;font-size:11px;
    color:var(--ink);padding-left:13px;position:relative;line-height:1.3;
  }
  .issue-badge-items li::before{
    content:"•";position:absolute;left:0;color:var(--red-dylan);
    font-size:15px;line-height:1;
  }

  /* moon */
  .moon{
    position:absolute;top:254px;right:108px;left:auto;transform:none;z-index:2;
    width:238px;height:238px;border-radius:50%;
    background: radial-gradient(circle at 35% 30%, #f0e6c4 0%, #c9bd92 60%, #8a7e58 100%);
    box-shadow:
      0 0 110px rgba(240,230,196,.38),
      inset -18px -22px 0 rgba(0,0,0,.18);
    filter:drop-shadow(0 0 28px rgba(255,240,180,.32));
    opacity:1;
  }
  .moon::after{
    content:"";position:absolute;inset:0;border-radius:50%;
    background:
      radial-gradient(circle 12px at 30% 38%, rgba(0,0,0,.15), transparent),
      radial-gradient(circle 18px at 55% 60%, rgba(0,0,0,.18), transparent),
      radial-gradient(circle 8px at 70% 30%, rgba(0,0,0,.12), transparent),
      radial-gradient(circle 10px at 45% 75%, rgba(0,0,0,.14), transparent);
  }

  /* gothic city silhouette at the bottom */
  .city{
    position:absolute;left:0;right:0;bottom:0;height:36%;z-index:3;pointer-events:none;
    background:
      linear-gradient(180deg, transparent 0%, transparent 30%, rgba(0,0,0,.3) 60%, rgba(0,0,0,.65) 100%),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 300' preserveAspectRatio='xMidYEnd slice'><g fill='%23000'><rect x='0' y='240' width='600' height='60'/><polygon points='30,240 30,120 50,90 70,120 70,240'/><rect x='80' y='160' width='40' height='80'/><rect x='86' y='170' width='8' height='10' fill='%23f5b800'/><polygon points='130,240 130,140 150,110 170,140 170,240'/><rect x='180' y='180' width='30' height='60'/><rect x='220' y='100' width='50' height='140'/><rect x='228' y='120' width='8' height='10' fill='%23f5b800'/><rect x='248' y='120' width='8' height='10' fill='%23f5b800'/><polygon points='280,240 280,80 295,50 310,80 310,240'/><rect x='320' y='150' width='44' height='90'/><polygon points='364,150 364,110 386,90 408,110 408,150 408,240 364,240'/><rect x='382' y='126' width='8' height='10' fill='%23f5b800'/><rect x='420' y='130' width='40' height='110'/><polygon points='460,130 480,100 500,130 500,240 460,240'/><rect x='510' y='170' width='40' height='70'/><polygon points='550,170 570,140 600,170 600,240 550,240'/></g></svg>") repeat-x bottom;
    background-size: auto, 100% 100%;
  }

  /* bats */
  .bat{position:absolute;z-index:4;color:#140804;pointer-events:none}
  .b1{top:15%; left:10%; transform: rotate(-8deg); filter: drop-shadow(0 2px 0 rgba(0,0,0,.4))}
  .b2{top:22%; right:9%; transform: rotate(6deg); filter: drop-shadow(0 2px 0 rgba(0,0,0,.4))}
  .b3{top:34%; left:14%; transform: rotate(18deg); filter: drop-shadow(0 2px 0 rgba(0,0,0,.4))}
  .b4{top:30%; right:20%; transform: rotate(-12deg); filter: drop-shadow(0 2px 0 rgba(0,0,0,.4))}

  /* ===== CENTER COVER TEXT ===== */
  .title-lockup{
    position:absolute;left:14%;right:14%;top:46%;transform:rotate(-3deg);z-index:6;
    width:auto;text-align:center;
  }
  .cover-yell{
    font-family:var(--hand);font-weight:700;font-size:58px;color:#fff;
    text-shadow:6px 6px 0 var(--red-dylan), 8px 8px 0 #000;
    letter-spacing:.8px;line-height:1.02;
  }


  /* ===== Dylan-style red bottom banner with episode/credit ===== */
  .ep-banner{
    position:absolute;left:0;right:0;bottom:0;z-index:7;
    background: var(--red-dylan);border-top:3px solid #000;
    padding:12px 28px;min-height:102px;
    display:grid;grid-template-columns:minmax(160px, .42fr) 3px minmax(0, 1fr);align-items:center;gap:22px;
  }
  .ep-banner .l{font-family:var(--serif);font-size:13px;letter-spacing:1.5px;color:#fff;text-transform:uppercase;line-height:1.05}
  .ep-banner .l b{display:block;font-family:var(--bowlby);font-weight:400;font-size:31px;letter-spacing:1px;text-shadow:3px 3px 0 #000;margin-top:6px}
  .ep-divider{width:3px;height:58px;background:#000;box-shadow:2px 0 0 rgba(255,255,255,.18)}
  .footer-actions{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:14px;align-items:center}
  /* Hand-drawn footer chips (sketch + #rough — matches app ComicHandDrawnButton) */
  .footer-btn{
    position:relative;isolation:isolate;
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    min-height:48px;padding:9px 14px;
    border:none;border-radius:14px;background:transparent;
    font-family:var(--title);font-size:15px;line-height:1;text-transform:uppercase;text-decoration:none;
    white-space:nowrap;cursor:pointer;
    transition:transform .12s;
    --sk-fill:var(--paper);
    color:var(--ink);
    text-shadow:none;
  }
  .footer-btn::before{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:var(--sk-fill);
    border:2.8px solid var(--ink);border-radius:14px;
    filter:url(#rough);
    box-shadow:4px 4px 0 #000;
  }
  .footer-btn:hover{transform:rotate(-.6deg) translate(-1px,-2px)}
  .footer-btn.orange{--sk-fill:var(--orange);color:#fff;text-shadow:1.5px 1.5px 0 rgba(0,0,0,.28)}
  .footer-btn.purple{--sk-fill:#6f49d8;color:#fff;text-shadow:1.5px 1.5px 0 rgba(0,0,0,.28)}
  .footer-btn.green{--sk-fill:#18b978;color:#fff;text-shadow:1.5px 1.5px 0 rgba(0,0,0,.28)}
  .footer-btn.white{--sk-fill:var(--paper);color:var(--ink);text-shadow:none}
  .footer-btn .ico{
    width:28px;height:28px;display:inline-grid;place-items:center;flex-shrink:0;
    border:2px solid currentColor;border-radius:50%;background:rgba(0,0,0,.08);
  }
  .footer-btn .ico svg{width:18px;height:18px;display:block}

  /* ===== ABOUT POSTER PAGE ===== */
  .about-page,
  .contact-page{
    position:absolute;top:80px;left:0;right:0;bottom:129px;z-index:20;display:none;
    background:
      radial-gradient(ellipse 80% 50% at 50% 22%, rgba(74,69,64,.74) 0%, rgba(27,24,22,.82) 60%, rgba(10,9,8,.88) 100%),
      rgba(10,9,8,.72);
    color:var(--cream);overflow:hidden;
    -webkit-backdrop-filter:blur(1.5px) saturate(.9);
    backdrop-filter:blur(1.5px) saturate(.9);
    box-shadow:inset 0 10px 24px rgba(0,0,0,.45), inset 0 -10px 24px rgba(0,0,0,.45);
  }
  .poster.show-about .about-page{display:block}
  .poster.show-contact .contact-page{display:block}
  .about-page::before,
  .contact-page::before{
    content:"";position:absolute;top:118px;right:-84px;z-index:0;
    width:360px;height:360px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #f0d68c 0%, #b88f3a 60%, transparent 90%);
    opacity:.35;filter:blur(2px);pointer-events:none;
  }
  .about-page::after,
  .contact-page::after{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background-image:radial-gradient(rgba(0,0,0,.18) 1px, transparent 1.4px);
    background-size:3px 3px;mix-blend-mode:multiply;opacity:.48;
  }
  .about-page > *,
  .contact-page > *{position:relative;z-index:2}
  .about-back,
  .contact-back{
    position:absolute;top:16px;right:18px;z-index:4;min-height:40px;padding:9px 16px;
    display:inline-flex;align-items:center;justify-content:center;
    font-family:var(--bowlby);font-size:17px;letter-spacing:1px;text-transform:uppercase;text-decoration:none;
    color:var(--ink);background:var(--paper);border:3px solid #000;border-radius:10px;
    box-shadow:3px 3px 0 #000;transform:rotate(.6deg);
  }
  .about-scroll{
    height:100%;overflow:auto;padding:62px 28px 30px;
    scrollbar-color:var(--red-dylan) rgba(241,229,196,.22);
  }
  .contact-scroll{
    height:100%;overflow:auto;padding:62px 28px 30px;
    scrollbar-color:var(--red-dylan) rgba(241,229,196,.22);
    display:grid;place-items:start center;
  }
  .about-pitch{position:relative;max-width:780px;margin:0 auto 24px;text-align:center}
  .about-scare{
    display:inline-block;margin-bottom:8px;font-family:var(--bowlby);font-weight:400;font-size:24px;
    color:#f0d68c;text-shadow:2px 2px 0 #000;letter-spacing:1.5px;transform:skewX(-6deg);
    text-transform:uppercase;
  }
  .about-pitch p{
    margin:0 auto;max-width:620px;font-family:var(--body);font-weight:700;font-size:17px;
    line-height:1.55;color:#e0d5b3;
  }
  .about-pitch p b{color:#fff}
  .about-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
  .about-panel{
    background:#f1e5c4;border:3px solid #000;border-radius:10px;padding:22px 24px;
    box-shadow:6px 6px 0 #000;color:var(--ink);position:relative;
  }
  .about-panel.dark{background:#2a2826;color:#e8dcb8}
  .about-panel .chip{
    display:inline-block;margin-bottom:14px;background:#000;color:#f0d68c;border-radius:4px;
    font-family:var(--serif);font-size:12px;letter-spacing:2px;padding:5px 11px 4px;text-transform:uppercase;
  }
  .about-panel h3{
    margin:0 0 14px;font-family:'Bangers', cursive;font-size:34px;line-height:1;
    letter-spacing:1.5px;text-transform:uppercase;color:var(--red-dylan);text-shadow:2px 2px 0 #000;
  }
  .about-panel.dark h3{color:#fff;text-shadow:3px 3px 0 var(--red-dylan)}
  .about-panel p{
    margin:0 0 9px;font-family:var(--body);font-weight:700;font-size:15px;line-height:1.52;
  }
  .about-panel p:last-child{margin-bottom:0}
  .about-panel p b{color:var(--red-dylan)}
  .about-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
  .about-panel li{
    display:flex;align-items:flex-start;gap:12px;font-family:var(--body);
    font-weight:800;font-size:15px;line-height:1.4;
  }
  .about-panel li::before{
    content:"";width:14px;height:14px;border-radius:50%;background:#f0d68c;
    border:2px solid #000;box-shadow:1.5px 1.5px 0 #000;flex-shrink:0;margin-top:2px;
  }
  .new-arrivals{
    margin:0 auto 24px;
    max-width:920px;
    background:#f1e5c4;
    border:3px solid #000;
    border-radius:10px;
    box-shadow:6px 6px 0 #000;
    color:var(--ink);
    padding:18px;
  }
  .new-arrivals-head{
    margin-bottom:14px;
  }
  .new-arrivals-head h3{
    margin:8px 0 6px;
    font-family:'Bangers', cursive;
    font-size:34px;
    letter-spacing:1.4px;
    line-height:1;
    text-transform:uppercase;
    color:var(--red-dylan);
    text-shadow:2px 2px 0 #000;
  }
  .new-arrivals-head p{
    margin:0;
    font-family:var(--body);
    font-size:14px;
    font-weight:800;
    line-height:1.4;
    color:#3d3328;
  }
  .new-arrivals-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
  }
  .arrival-issue{
    display:flex;
    flex-direction:column;
    gap:9px;
    align-items:stretch;
  }
  .arrival-cover{
    width:100%;
    aspect-ratio:16/10;
    background:#111;
    border:2.5px solid #000;
    box-shadow:3px 3px 0 #000;
    overflow:hidden;
  }
  .arrival-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    filter:contrast(1.06) saturate(1.04);
  }
  .about-page .enlargeable{
    cursor:zoom-in;
    transition:filter .15s ease, transform .15s ease;
  }
  .about-page .enlargeable:hover{
    filter:contrast(1.08) saturate(1.08) brightness(1.04);
  }
  .arrival-meta{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .arrival-label{
    font-family:var(--bowlby);
    font-size:12px;
    letter-spacing:.8px;
    text-transform:uppercase;
    color:#2c2018;
  }
  .arrival-meta h4{
    margin:0;
    font-family:var(--body);
    font-size:15px;
    font-weight:900;
    letter-spacing:.2px;
    color:#241910;
  }
  .arrival-blurb{
    margin:0;
    font-family:var(--body);
    font-size:13px;
    font-weight:700;
    line-height:1.45;
    color:#4a3f34;
  }
  .arrival-blurb b{color:var(--red-dylan)}
  .new-arrivals.whats-new .new-arrivals-grid.whats-new-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .arrival-cover.duo{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3px;
    background:#111;
  }
  .arrival-cover.duo img,
  .arrival-cover.trio img{
    width:100%;
    height:100%;
    min-height:0;
    object-fit:cover;
    object-position:top center;
  }
  .arrival-cover.trio{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:3px;
    background:#111;
  }
  .about-cta{
    margin:22px auto 6px;max-width:720px;
    grid-template-columns:repeat(3, minmax(0, 1fr));gap:12px;
  }
  .about-modules{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:18px;margin-bottom:28px}
  .about-module{
    background:var(--ui-panel);border:3px solid var(--ui-ink);border-radius:0;overflow:hidden;
    display:flex;flex-direction:column;box-shadow:6px 6px 0 #000;color:#fff;
  }
  .module-titlebar{
    background:var(--ui-accent);border-bottom:3px solid var(--ui-ink);
    min-height:58px;padding:11px 14px;display:flex;align-items:center;gap:12px;
  }
  .module-index{
    min-width:32px;height:32px;padding:0 8px;display:inline-grid;place-items:center;
    background:#fff;color:#111;border:2.5px solid var(--ui-ink);
    font-family:var(--bowlby);font-size:16px;line-height:1;box-shadow:2px 2px 0 #000;
  }
  .about-module .well{
    background:var(--ui-table);border-bottom:3px solid var(--ui-ink);padding:12px;position:relative;
    overflow:hidden;display:grid;place-items:center;
  }
  .about-module .well > img,
  .about-module .well .well-img{
    display:block;width:100%;height:150px;object-fit:cover;object-position:top left;
    border:2.5px solid var(--ui-ink);border-radius:0;filter:contrast(1.08) brightness(.94);
    box-shadow:3px 3px 0 #000;background:#000;
    transform:rotate(-1.5deg) scale(1.02);
  }
  .about-module:nth-child(even) .well > img,
  .about-module:nth-child(even) .well .well-img{transform:rotate(1.5deg) scale(1.02)}
  .about-module .well.well-duo{
    grid-template-columns:1fr 1fr;gap:8px;align-items:stretch;
  }
  .about-module .well.well-duo .well-img{
    height:150px;transform:none;
  }
  .about-module .well.well-duo .well-img:nth-child(2){transform:rotate(-1.2deg) scale(1.01)}
  .about-module .well.well-duo .well-img:nth-child(3){transform:rotate(1.2deg) scale(1.01)}
  .about-module .corner{
    position:absolute;top:10px;left:10px;z-index:2;width:32px;height:32px;border-radius:0;
    background:#fff;border:2.5px solid var(--ui-ink);display:grid;place-items:center;
    box-shadow:2px 2px 0 #000;overflow:hidden;
  }
  .about-module .corner img{width:90%;height:90%;object-fit:contain}
  .about-module .body{padding:14px;color:#fdf5e6;display:flex;flex-direction:column;gap:12px;flex:1}
  .about-module h4{
    margin:0;font-family:var(--bowlby);font-size:25px;letter-spacing:1px;text-transform:uppercase;
    line-height:1;color:#fff;text-shadow:3px 3px 0 #000;
  }
  .about-module p{
    margin:0;font-family:var(--body);font-weight:800;font-size:14px;line-height:1.45;color:#fdf5e6;
  }
  .about-detail-table{
    border:2.5px solid var(--ui-ink);background:var(--ui-table);
    display:grid;box-shadow:3px 3px 0 #000;
  }
  .about-detail-table div{
    display:grid;grid-template-columns:96px minmax(0, 1fr);gap:10px;align-items:start;
    padding:10px 12px;border-bottom:2px solid #1a3d3d;
    font-family:var(--body);font-weight:800;font-size:12px;line-height:1.35;
  }
  .about-detail-table div:nth-child(odd){background:var(--ui-row);color:#0b2525}
  .about-detail-table div:nth-child(even){background:var(--ui-table);color:#fdf5e6}
  .about-detail-table div:last-child{border-bottom:0}
  .about-detail-table b{
    font-family:var(--bowlby);font-weight:400;font-size:12px;letter-spacing:.8px;text-transform:uppercase;
    color:inherit;
  }
  .about-detail-table span{
    min-width:0;color:inherit;
  }
  /* Sketchy buttons */
  .sketch{position:relative;isolation:isolate}
  .sketch::before{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background: var(--sk-fill, var(--paper));
    border: 2.8px solid var(--ink);border-radius: 14px;
    filter: url(#rough);
  }
  .btn{
    --sk-fill: var(--paper);
    display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;
    padding:9px 9px;
    font-family:var(--title);font-weight:400;letter-spacing:0;
    font-size:13px;color:var(--ink);text-decoration:none;cursor:pointer;
    min-height:40px;text-transform:uppercase;transition:transform .12s;
    white-space:nowrap;
  }
  .btn:hover{transform: rotate(-.6deg) translate(-1px,-2px)}
  .btn.orange { --sk-fill: var(--orange); color: #fff; text-shadow: 1.5px 1.5px 0 rgba(0,0,0,.28) }
  .btn .arr{width:15px;height:11px;display:inline-block}
  .btn .arr svg{width:100%;height:100%}

  /* ============================================================
     CONTACT POSTER PAGE
     ============================================================ */
  .contact-card{
    width:min(620px, 100%);
    background:var(--ui-panel);border:3px solid var(--ui-ink);border-radius:0;overflow:hidden;
    box-shadow:6px 6px 0 #000;color:#fff;
  }
  .contact-card-body{padding:22px 24px 24px}
  .speech-bubble{
    background:var(--cream);border:3px solid #000;
    border-radius:12px;padding:12px 16px;
    font-family:var(--hand);font-size:18px;color:#000;
    position:relative;margin-bottom:24px;
    box-shadow:4px 4px 0 #000;transform:rotate(-.5deg);
  }
  .speech-bubble::after{
    content:"";position:absolute;bottom:-14px;left:28px;
    border:7px solid transparent;border-top-color:#000;
  }
  .speech-bubble::before{
    content:"";position:absolute;bottom:-10px;left:30px;z-index:1;
    border:5px solid transparent;border-top-color:var(--cream);
  }
  .form-group{margin-bottom:14px}
  .form-group label{
    display:block;font-family:var(--bowlby);font-weight:400;
    font-size:14px;color:#fdf5e6;margin-bottom:7px;letter-spacing:1px;text-transform:uppercase;
  }
  .form-group input,.form-group textarea{
    width:100%;background:var(--ui-table);color:#fdf5e6;
    border:2.5px solid var(--ui-ink);border-radius:0;
    padding:10px 14px;font-family:var(--print);font-size:15px;
    outline:none;resize:none;transition:border-color .15s;
  }
  .form-group input:focus,.form-group textarea:focus{border-color:var(--orange)}
  .form-group textarea{height:110px}
.form-submit{margin-top:4px;width:100%;justify-content:center;font-size:20px}
  .form-status{
    font-family:var(--hand);font-size:17px;
    text-align:center;margin-top:14px;min-height:24px;
    color:var(--green);
  }
  .form-status.err{color:var(--red)}
  .field-err{display:block;font-family:var(--hand);font-size:14px;color:var(--red);margin-top:4px;min-height:18px}
  .form-group input.invalid{border-color:var(--red)}
  @media (max-width: 720px){
    body{padding:6px}
    .poster-frame{height:auto}

    /* HEADER — ~28% taller */
    .dylan-strip{height:102px;gap:10px;padding:0 14px}
    .dylan-strip .cat-badge{width:76px;height:76px}
    .dylan-strip .logo{font-size:54px}
    .dylan-strip .eye{width:40px;height:40px}
    .dylan-strip .eye::after{width:18px;height:18px}
    .dylan-strip .main-issue{font-size:10px;letter-spacing:1.2px;padding-left:11px;margin-left:0}
    .dylan-strip .main-issue b{font-size:18px;margin-top:4px}
    .dylan-strip .about-title,
    .dylan-strip .contact-title{font-size:26px;letter-spacing:1px}

    /* ISSUE BADGE — significantly larger */
    .issue-badge{top:10px;right:12px;min-width:148px;border-width:3px}
    .issue-badge-label{font-size:16px;padding:6px 12px 5px;letter-spacing:2.5px}
    .issue-badge-items{padding:7px 14px 10px;gap:5px}
    .issue-badge-items li{font-size:15px;padding-left:18px}
    .issue-badge-items li::before{font-size:19px}

    /* COVER SLOGAN — slightly larger */
    .title-lockup{top:46%;left:10%;right:10%;transform:rotate(-3deg)}
    .cover-yell{font-size:65px}

    /* FOOTER — ~18% taller */
    .ep-banner{min-height:210px;padding:18px 16px;grid-template-columns:160px 3px minmax(0, 1fr);gap:14px}
    .ep-banner .l{font-size:15px;letter-spacing:1px}
    .ep-banner .l b{font-size:33px;text-shadow:3px 3px 0 #000;margin-top:6px}
    .ep-divider{width:3px;height:122px}
    .footer-actions{grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px}
    .footer-btn{min-height:60px;padding:11px 12px;gap:9px;font-size:19px}
    .footer-btn::before{box-shadow:3px 3px 0 #000}
    .footer-btn .ico{width:30px;height:30px;border-width:2px}
    .footer-btn .ico svg{width:19px;height:19px}

    /* ABOUT PAGE — offset for new header/footer heights */
    .about-page,.contact-page{top:102px;bottom:250px}
    .about-back,.contact-back{top:12px;right:14px;font-size:15px;padding:8px 12px}
    .about-scroll{height:100%;padding:58px 20px 26px}
    .contact-scroll{height:100%;padding:58px 20px 26px}
    .about-pitch{margin-bottom:18px}
    .about-scare{font-size:28px}
    .about-pitch p{font-size:17px;line-height:1.45}
    .about-row{grid-template-columns:1fr;gap:12px;margin-bottom:18px}
    .about-panel h3{font-size:34px}
    .about-panel p,.about-panel li{font-size:15px}
    .new-arrivals{
      margin-bottom:18px;
      padding:14px;
    }
    .new-arrivals-head h3{font-size:30px}
    .new-arrivals-grid{grid-template-columns:1fr;gap:12px}
    .new-arrivals.whats-new .new-arrivals-grid.whats-new-grid{grid-template-columns:1fr}
    .about-cta{grid-template-columns:1fr;gap:10px;margin-top:18px}
    .about-modules{grid-template-columns:1fr;gap:14px}
    .about-module .well{padding:10px}
    .about-module .well > img{height:135px;width:100%}
    .about-module h4{font-size:22px}
    .about-module p{font-size:13px}
    .about-detail-table div{grid-template-columns:82px minmax(0, 1fr);font-size:11.5px;padding:9px 10px}
    .about-detail-table b{font-size:11px}
    .contact-card-body{padding:18px}
  }
  @media (max-width: 360px){
    .dylan-strip{gap:8px;padding:0 10px}
    .dylan-strip .cat-badge{width:66px;height:66px}
    .dylan-strip .logo{font-size:46px}
    .dylan-strip .eye{width:34px;height:34px}
    .dylan-strip .eye::after{width:15px;height:15px}
    .dylan-strip .main-issue b{font-size:16px}
    .issue-badge{min-width:132px}
    .issue-badge-label{font-size:14px}
    .issue-badge-items li{font-size:13.5px}
    .cover-yell{font-size:56px}
    .ep-banner{grid-template-columns:136px 3px minmax(0, 1fr);gap:10px;padding-left:12px;padding-right:12px}
    .ep-banner .l{font-size:13px}
    .ep-banner .l b{font-size:27px}
    .ep-divider{height:108px}
    .footer-actions{gap:8px}
    .footer-btn{min-height:56px;font-size:16px;padding-left:6px;padding-right:6px}
    .footer-btn .ico{display:none}
    .btn{font-size:7.2px;padding-left:2px;padding-right:2px}
    .btn .arr{display:none}
  }

/* ============================================================
     CONTACT DRAWER
     ============================================================ */
  #contact-overlay{
    position:fixed;inset:0;z-index:9999;
    background:rgba(20,17,14,.78);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    display:none;align-items:stretch;justify-content:flex-end;
  }
  #contact-overlay.open{display:flex}
  #contact-drawer{
    width:min(500px,100%);background:#1c1814;
    border-left:4px solid #000;
    display:flex;flex-direction:column;
    transform:translateX(100%);
    transition:transform .32s cubic-bezier(.22,1,.36,1);
    overflow-y:auto;
  }
  #contact-overlay.open #contact-drawer{transform:translateX(0)}
  .modal-strip{
    background:var(--red-dylan);border-bottom:3px solid #000;
    display:flex;align-items:center;gap:12px;
    padding:12px 18px;flex-shrink:0;
  }
  .modal-strip .mbadge{
    width:48px;height:48px;border-radius:50%;background:var(--cream);
    border:3px solid #000;display:grid;place-items:center;
    box-shadow:3px 3px 0 #000;overflow:hidden;
    transform:rotate(-4deg);flex-shrink:0;
  }
  .modal-strip .mbadge img{width:85%;object-fit:contain}
  .modal-title{
    font-family:var(--bowlby);font-size:26px;color:#fff;
    letter-spacing:1px;text-shadow:2px 2px 0 #000;
    transform:skewX(-6deg);flex:1;
  }
  .modal-close{
    background:none;border:2.5px solid #fff;color:#fff;
    width:34px;height:34px;border-radius:50%;
    font-size:18px;cursor:pointer;display:grid;place-items:center;
    font-family:var(--body);box-shadow:2px 2px 0 #000;
    transition:transform .15s;line-height:1;
  }
  .modal-close:hover{transform:rotate(90deg)}
  .modal-body{padding:24px 22px;flex:1;display:flex;flex-direction:column;gap:0}
  .speech-bubble{
    background:var(--cream);border:3px solid #000;
    border-radius:12px;padding:12px 16px;
    font-family:var(--hand);font-size:18px;color:#000;
    position:relative;margin-bottom:24px;
    box-shadow:4px 4px 0 #000;transform:rotate(-.5deg);
  }
  .speech-bubble::after{
    content:"";position:absolute;bottom:-14px;left:28px;
    border:7px solid transparent;border-top-color:#000;
  }
  .speech-bubble::before{
    content:"";position:absolute;bottom:-10px;left:30px;z-index:1;
    border:5px solid transparent;border-top-color:var(--cream);
  }
  .form-group{margin-bottom:14px}
  .form-group label{
    display:block;font-family:var(--hand);font-weight:700;
    font-size:16px;color:var(--cream);margin-bottom:5px;letter-spacing:.4px;
  }
  .form-group input,.form-group textarea{
    width:100%;background:#2a2118;color:var(--cream);
    border:2.5px solid #5a4a2a;border-radius:6px;
    padding:10px 14px;font-family:var(--print);font-size:15px;
    outline:none;resize:none;transition:border-color .15s;
  }
  .form-group input:focus,.form-group textarea:focus{border-color:var(--orange)}
  .form-group textarea{height:110px}
.form-submit{margin-top:4px;width:100%;justify-content:center;font-size:20px}
  .form-status{
    font-family:var(--hand);font-size:17px;
    text-align:center;margin-top:14px;min-height:24px;
    color:var(--green);
  }
  .form-status.err{color:var(--red)}
  .field-err{display:block;font-family:var(--hand);font-size:14px;color:var(--red);margin-top:4px;min-height:18px}
  .form-group input.invalid{border-color:var(--red)}
  .modal-panel-note{
    font-family:var(--serif);font-size:10px;letter-spacing:1.5px;
    color:#5a4a2a;text-transform:uppercase;text-align:center;
    padding:14px 22px 18px;border-top:2px solid #2a2118;flex-shrink:0;
  }
/* ============================================================
     IMAGE LIGHTBOX (About screenshots)
     ============================================================ */
  .image-lightbox{
    position:fixed;inset:0;z-index:10000;
    display:none;align-items:center;justify-content:center;
    padding:24px 18px;
    background:rgba(10,9,8,.88);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    cursor:zoom-out;
  }
  .image-lightbox.open{display:flex}
  .image-lightbox-figure{
    margin:0;max-width:min(1100px, 96vw);max-height:92vh;
    display:flex;flex-direction:column;align-items:center;gap:10px;
    cursor:default;
  }
  .image-lightbox-img{
    display:block;max-width:100%;max-height:calc(92vh - 48px);
    width:auto;height:auto;object-fit:contain;
    border:4px solid #000;border-radius:4px;
    box-shadow:8px 8px 0 #000, 0 24px 60px rgba(0,0,0,.55);
    background:#111;
  }
  .image-lightbox-caption{
    margin:0;padding:6px 14px;
    font-family:var(--bowlby);font-size:13px;letter-spacing:.8px;
    text-transform:uppercase;color:#FCD200;
    text-shadow:2px 2px 0 #000;
    text-align:center;
  }
  .image-lightbox-close{
    position:absolute;top:16px;right:16px;
    background:var(--red-dylan);border:3px solid #000;color:#fff;
    width:40px;height:40px;border-radius:50%;
    font-size:20px;cursor:pointer;display:grid;place-items:center;
    font-family:var(--body);box-shadow:3px 3px 0 #000;
    transition:transform .15s;line-height:1;z-index:1;
  }
  .image-lightbox-close:hover{transform:rotate(90deg)}
  body.image-lightbox-open{overflow:hidden}

  @media(max-width:500px){
    #contact-drawer{width:100%;border-left:none;border-top:4px solid #000}
    #contact-overlay{align-items:flex-end}
    #contact-drawer{transform:translateY(100%)}
    #contact-overlay.open #contact-drawer{transform:translateY(0)}
  }