:root {
      --ink: #151515;
      --paper: #f8f4ea;
      --paper-2: #eee7d7;
      --white: #fffdf7;
      --accent: #f7cf3d;
      --accent-2: #e7643f;
      --muted: #6f6a60;
      --line: 2px solid var(--ink);
      --shadow: 7px 7px 0 var(--ink);
      --radius: 18px;
      --max: 1180px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(circle at 10% 10%, rgba(0,0,0,.025) 0 1px, transparent 1.4px) 0 0 / 18px 18px,
        var(--paper);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.5;
    }

    body.modal-open { overflow: hidden; }
    img { display: block; max-width: 100%; }
    button, input, textarea { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    a { color: inherit; }

    .skip-link {
      position: fixed;
      left: 16px;
      top: -60px;
      z-index: 999;
      padding: 10px 14px;
      background: var(--ink);
      color: white;
      border-radius: 8px;
      transition: top .2s ease;
    }
    .skip-link:focus { top: 16px; }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      border-bottom: 2px solid var(--ink);
      background: rgba(248,244,234,.93);
      backdrop-filter: blur(12px);
    }

    .nav-wrap {
      width: min(var(--max), calc(100% - 36px));
      min-height: 72px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      text-decoration: none;
      font-weight: 950;
      letter-spacing: -.035em;
      font-size: 1.33rem;
    }

    .brand-mark {
      width: 39px;
      height: 39px;
      overflow: hidden;
      border: 2px solid var(--ink);
      border-radius: 50%;
      background: var(--white);
      transform: rotate(-7deg);
    }
    .brand-mark img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.65);
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 26px;
      font-size: .94rem;
      font-weight: 750;
    }
    .nav-links a {
      text-decoration: none;
      border-bottom: 2px solid transparent;
    }
    .nav-links a:hover,
    .nav-links a:focus-visible { border-color: var(--ink); }

    .header-actions { display: flex; align-items: center; gap: 10px; }
    .icon-button.menu-button { display: none; }

    .button,
    .icon-button,
    .filter-button {
      border: 2px solid var(--ink);
      background: var(--white);
      color: var(--ink);
      cursor: pointer;
      font-weight: 850;
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    }
    .button {
      min-height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 0 18px;
      border-radius: 999px;
      text-decoration: none;
      box-shadow: 4px 4px 0 var(--ink);
    }
    .button:hover,
    .button:focus-visible,
    .icon-button:hover,
    .icon-button:focus-visible,
    .filter-button:hover,
    .filter-button:focus-visible {
      transform: translate(-2px,-2px);
      box-shadow: 6px 6px 0 var(--ink);
    }
    .button:active,
    .icon-button:active,
    .filter-button:active { transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--ink); }
    .button.primary { background: var(--accent); }
    .button.dark { background: var(--ink); color: var(--white); box-shadow: 4px 4px 0 var(--accent); }
    .button.dark:hover,
    .button.dark:focus-visible { box-shadow: 6px 6px 0 var(--accent); }

    .icon-button {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      box-shadow: 3px 3px 0 var(--ink);
    }

    .container { width: min(var(--max), calc(100% - 36px)); margin: 0 auto; }

    .hero {
      min-height: 740px;
      display: grid;
      grid-template-columns: minmax(0, .96fr) minmax(360px, .82fr);
      align-items: center;
      gap: clamp(42px, 8vw, 105px);
      padding: 74px 0 86px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 20px;
      font-size: .75rem;
      font-weight: 950;
      letter-spacing: .13em;
      text-transform: uppercase;
    }
    .eyebrow::before {
      content: "";
      width: 34px;
      height: 9px;
      border-top: 3px solid var(--ink);
      border-bottom: 3px solid var(--ink);
      transform: rotate(-4deg);
    }

    .hero h1 {
      max-width: 760px;
      margin: 0;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(4rem, 8vw, 7.4rem);
      line-height: .89;
      letter-spacing: -.07em;
      font-weight: 900;
    }
    .hero h1 span {
      position: relative;
      display: inline-block;
      z-index: 1;
    }
    .hero h1 span::after {
      content: "";
      position: absolute;
      left: -2%;
      right: -4%;
      bottom: .07em;
      height: .21em;
      z-index: -1;
      background: var(--accent);
      transform: rotate(-1.6deg);
    }

    .hero-copy {
      max-width: 620px;
      margin: 27px 0 31px;
      font-size: clamp(1.08rem, 2vw, 1.28rem);
      color: #3e3a34;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 13px; }
    .microcopy {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-top: 27px;
      color: var(--muted);
      font-size: .83rem;
      font-weight: 700;
    }
    .microcopy span::before { content: "✓"; color: var(--ink); margin-right: 7px; }

    .featured-stage { position: relative; min-height: 610px; }
    .scribble {
      position: absolute;
      width: 160px;
      height: 90px;
      border: 4px solid var(--ink);
      border-color: transparent transparent var(--ink) transparent;
      border-radius: 50%;
      opacity: .15;
      pointer-events: none;
    }
    .scribble.one { left: -55px; top: 42px; transform: rotate(25deg); }
    .scribble.two { right: -20px; bottom: 15px; transform: rotate(-32deg); }

    .feature-card {
      position: relative;
      max-width: 455px;
      margin: 0 auto;
      padding: 16px 16px 19px;
      background: var(--white);
      border: 3px solid var(--ink);
      border-radius: 8px;
      box-shadow: 13px 15px 0 var(--ink);
      transform: rotate(2.2deg);
      transition: transform .35s ease;
    }
    .feature-card:hover { transform: rotate(.4deg) translateY(-5px); }
    body.extra-tilt .feature-card { transform: rotate(5.5deg); }
    body.extra-tilt .comic-card:nth-child(odd) { transform: rotate(-2.2deg); }
    body.extra-tilt .comic-card:nth-child(even) { transform: rotate(2.2deg); }

    .tape {
      position: absolute;
      width: 88px;
      height: 27px;
      top: -15px;
      left: 50%;
      background: rgba(247,207,61,.87);
      border-left: 1px solid rgba(0,0,0,.15);
      border-right: 1px solid rgba(0,0,0,.15);
      transform: translateX(-50%) rotate(-2deg);
      z-index: 2;
    }
    .feature-art {
      width: 100%;
      height: 490px;
      object-fit: contain;
      background: #fbf8f0;
      border: 2px solid var(--ink);
    }
    .feature-meta {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: flex-end;
      padding: 14px 5px 1px;
    }
    .feature-label {
      margin: 0 0 3px;
      color: var(--muted);
      font-size: .7rem;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .feature-title { margin: 0; font-family: Georgia, serif; font-size: 1.55rem; line-height: 1; }
    .feature-number { font-weight: 950; font-size: .83rem; }

    .side-note {
      position: absolute;
      right: -42px;
      top: 92px;
      padding: 11px 13px;
      background: var(--accent-2);
      color: white;
      border: 2px solid var(--ink);
      box-shadow: 4px 4px 0 var(--ink);
      font-size: .73rem;
      font-weight: 950;
      letter-spacing: .05em;
      text-transform: uppercase;
      transform: rotate(6deg);
    }

    .ticker {
      overflow: hidden;
      border-top: 3px solid var(--ink);
      border-bottom: 3px solid var(--ink);
      background: var(--accent);
      transform: rotate(-.45deg) scale(1.01);
    }
    .ticker-track {
      width: max-content;
      display: flex;
      gap: 24px;
      padding: 14px 0;
      animation: ticker 24s linear infinite;
      font-weight: 950;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .ticker-track span::after { content: "✦"; margin-left: 24px; }
    @keyframes ticker { to { transform: translateX(-50%); } }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .ticker-track { animation: none; }
      * { transition-duration: 0.001ms !important; }
    }

    .section { padding: 105px 0; }
    .section-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 30px;
      margin-bottom: 34px;
    }
    .section-head h2,
    .about h2,
    .contact h2 {
      margin: 0;
      max-width: 760px;
      font-family: Georgia, serif;
      font-size: clamp(2.7rem, 5vw, 5rem);
      line-height: .96;
      letter-spacing: -.055em;
    }
    .section-intro { max-width: 490px; margin: 14px 0 0; color: var(--muted); font-size: 1.05rem; }

    .filters { display: flex; flex-wrap: wrap; gap: 9px; }
    .filter-button {
      min-height: 39px;
      padding: 0 14px;
      border-radius: 999px;
      box-shadow: 2px 2px 0 var(--ink);
      font-size: .82rem;
    }
    .filter-button.active { background: var(--ink); color: white; }

    .comic-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 24px;
      align-items: start;
    }
    .comic-card {
      grid-column: span 4;
      position: relative;
      overflow: hidden;
      padding: 12px;
      border: 2px solid var(--ink);
      border-radius: var(--radius);
      background: var(--white);
      box-shadow: 6px 6px 0 var(--ink);
      cursor: zoom-in;
      transition: transform .18s ease, box-shadow .18s ease, opacity .2s ease;
    }
    .comic-card:nth-child(3n+2) { margin-top: 34px; }
    .comic-card:hover,
    .comic-card:focus-visible {
      outline: none;
      transform: translate(-3px,-4px) rotate(-.4deg);
      box-shadow: 10px 11px 0 var(--ink);
    }
    .comic-card.hidden { display: none; }
    .comic-image-wrap {
      position: relative;
      overflow: hidden;
      border: 2px solid var(--ink);
      border-radius: 10px;
      background: #faf8f1;
      aspect-ratio: 1 / 1;
    }
    .comic-card.portrait .comic-image-wrap { aspect-ratio: .78 / 1; }
    .comic-card.landscape .comic-image-wrap { aspect-ratio: 1.28 / 1; }
    .comic-card img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      transition: transform .28s ease;
    }
    .comic-card:hover img { transform: scale(1.022); }
    .comic-info {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: center;
      padding: 14px 4px 3px;
    }
    .comic-info h3 { margin: 0; font-family: Georgia, serif; font-size: 1.14rem; line-height: 1.1; }
    .comic-tag {
      flex: none;
      padding: 5px 8px;
      border: 1.5px solid var(--ink);
      border-radius: 999px;
      background: var(--paper-2);
      font-size: .65rem;
      font-weight: 900;
      text-transform: uppercase;
    }
    .zoom-mark {
      position: absolute;
      right: 23px;
      top: 23px;
      width: 37px;
      height: 37px;
      display: grid;
      place-items: center;
      border: 2px solid var(--ink);
      border-radius: 50%;
      background: var(--accent);
      font-size: 1.1rem;
      font-weight: 900;
      transform: rotate(8deg);
    }

    .random-strip {
      margin-top: 50px;
      padding: 31px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 28px;
      border: 3px solid var(--ink);
      border-radius: 20px;
      background: var(--accent);
      box-shadow: 9px 9px 0 var(--ink);
      transform: rotate(.5deg);
    }
    .random-strip h3 { margin: 0 0 5px; font-family: Georgia, serif; font-size: 1.65rem; }
    .random-strip p { margin: 0; color: #4c452e; }

    .about-section {
      position: relative;
      overflow: hidden;
      padding: 110px 0;
      border-top: 3px solid var(--ink);
      border-bottom: 3px solid var(--ink);
      background: var(--ink);
      color: var(--white);
    }
    .about {
      display: grid;
      grid-template-columns: .74fr 1.26fr;
      gap: clamp(45px, 8vw, 110px);
      align-items: center;
    }
    .creator-card {
      position: relative;
      max-width: 420px;
      padding: 17px;
      border: 3px solid var(--white);
      background: var(--paper);
      color: var(--ink);
      box-shadow: 12px 12px 0 var(--accent);
      transform: rotate(-2.5deg);
    }
    .creator-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border: 2px solid var(--ink); }
    .creator-card figcaption { padding: 14px 5px 2px; font-weight: 900; }
    .about .eyebrow { color: var(--accent); }
    .about .eyebrow::before { border-color: var(--accent); }
    .about-copy > p { max-width: 650px; color: #d8d3ca; font-size: 1.08rem; }
    .about-quote {
      max-width: 670px;
      margin: 31px 0;
      padding-left: 22px;
      border-left: 7px solid var(--accent);
      font-family: Georgia, serif;
      font-size: clamp(1.55rem, 3vw, 2.5rem);
      line-height: 1.08;
    }
    .about-stats { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 35px; }
    .stat strong { display: block; color: var(--accent); font-size: 1.8rem; line-height: 1; }
    .stat span { color: #bbb5aa; font-size: .78rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }

    .contact-section { padding: 105px 0 120px; }
    .contact {
      position: relative;
      display: grid;
      grid-template-columns: .86fr 1.14fr;
      gap: clamp(40px, 8vw, 100px);
      align-items: start;
      padding: clamp(32px, 6vw, 70px);
      border: 3px solid var(--ink);
      border-radius: 28px;
      background: var(--white);
      box-shadow: 12px 12px 0 var(--ink);
    }
    .contact::before {
      content: "HELLO?";
      position: absolute;
      right: 35px;
      top: -22px;
      padding: 9px 14px;
      border: 2px solid var(--ink);
      background: var(--accent-2);
      color: white;
      font-size: .8rem;
      font-weight: 950;
      transform: rotate(4deg);
    }
    .contact-copy p { max-width: 440px; color: var(--muted); }
    .contact-links { display: grid; gap: 8px; margin-top: 25px; font-weight: 850; }
    .contact-links a { width: fit-content; text-underline-offset: 4px; }

    .contact-form { display: grid; gap: 15px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
    label { display: grid; gap: 7px; font-size: .78rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
    input, textarea {
      width: 100%;
      border: 2px solid var(--ink);
      border-radius: 12px;
      background: var(--paper);
      color: var(--ink);
      padding: 13px 14px;
      outline: none;
    }
    textarea { min-height: 145px; resize: vertical; }
    input:focus, textarea:focus { box-shadow: 4px 4px 0 var(--accent); }
    .form-note { margin: 0; color: var(--muted); font-size: .74rem; }
    .contact-terms { color: var(--muted); font-size: .73rem; }
    .contact-terms summary { width: fit-content; cursor: pointer; color: var(--ink); font-weight: 850; }
    .contact-terms p { max-width: 640px; margin: 8px 0 0; }

    footer { border-top: 3px solid var(--ink); background: var(--paper-2); }
    .footer-wrap {
      width: min(var(--max), calc(100% - 36px));
      margin: 0 auto;
      min-height: 110px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      font-size: .82rem;
    }
    .footer-wrap p { margin: 0; }
    .footer-mini { font-weight: 950; }

    .modal {
      position: fixed;
      inset: 0;
      z-index: 300;
      display: grid;
      place-items: center;
      padding: 22px;
      background: rgba(18,18,18,.86);
      opacity: 0;
      visibility: hidden;
      transition: opacity .18s ease, visibility .18s ease;
    }
    .modal.open { opacity: 1; visibility: visible; }
    .modal-card {
      position: relative;
      width: min(900px, 96vw);
      max-height: 92vh;
      overflow: auto;
      padding: 15px;
      border: 3px solid var(--ink);
      border-radius: 16px;
      background: var(--white);
      box-shadow: 10px 10px 0 var(--accent);
    }
    .modal-card img {
      width: 100%;
      max-height: 76vh;
      object-fit: contain;
      border: 2px solid var(--ink);
      background: #faf7ef;
    }
    .modal-caption { display: flex; justify-content: space-between; gap: 15px; padding: 13px 5px 2px; }
    .modal-caption strong { font-family: Georgia, serif; font-size: 1.25rem; }
    .modal-close {
      position: fixed;
      right: max(28px, calc((100vw - 900px)/2));
      top: 25px;
      z-index: 2;
      background: var(--accent);
    }

    .toast {
      position: fixed;
      left: 50%;
      bottom: 24px;
      z-index: 500;
      max-width: calc(100% - 32px);
      padding: 13px 17px;
      border: 2px solid var(--ink);
      border-radius: 999px;
      background: var(--accent);
      box-shadow: 5px 5px 0 var(--ink);
      font-weight: 850;
      transform: translate(-50%, 120px);
      transition: transform .25s ease;
    }
    .toast.show { transform: translate(-50%, 0); }

    @media (max-width: 940px) {
      .hero { grid-template-columns: 1fr; padding-top: 60px; }
      .hero-copy { max-width: 720px; }
      .featured-stage { min-height: auto; }
      .feature-card { max-width: 520px; }
      .side-note { right: -15px; }
      .comic-card { grid-column: span 6; }
      .comic-card:nth-child(3n+2) { margin-top: 0; }
      .comic-card:nth-child(even) { margin-top: 25px; }
      .about { grid-template-columns: 1fr; }
      .creator-card { max-width: 360px; }
      .contact { grid-template-columns: 1fr; }
    }

    @media (max-width: 720px) {
      .nav-wrap { min-height: 64px; }
      .header-actions .button { display: none; }
      .icon-button.menu-button { display: grid; }
      .nav-links {
        position: absolute;
        left: 0;
        right: 0;
        top: 64px;
        display: none;
        padding: 22px 18px 25px;
        border-bottom: 2px solid var(--ink);
        background: var(--paper);
        flex-direction: column;
        align-items: flex-start;
      }
      .nav-links.open { display: flex; }
      .hero { min-height: auto; padding: 53px 0 72px; gap: 60px; }
      .hero h1 { font-size: clamp(3.5rem, 17vw, 5.7rem); }
      .feature-card { box-shadow: 9px 10px 0 var(--ink); }
      .feature-art { height: min(115vw, 500px); }
      .side-note { right: -5px; top: 75px; }
      .section { padding: 80px 0; }
      .section-head { align-items: flex-start; flex-direction: column; }
      .comic-grid { gap: 22px; }
      .comic-card { grid-column: 1 / -1; margin-top: 0 !important; }
      .random-strip { flex-direction: column; align-items: flex-start; padding: 24px; }
      .about-section { padding: 85px 0; }
      .contact-section { padding: 80px 0 95px; }
      .contact { padding: 31px 22px; box-shadow: 8px 8px 0 var(--ink); }
      .form-row { grid-template-columns: 1fr; }
      .footer-wrap { padding: 27px 0; align-items: flex-start; flex-direction: column; }
      .modal-close { right: 26px; top: 22px; }
    }

    @media (max-width: 450px) {
      .container, .nav-wrap, .footer-wrap { width: min(100% - 24px, var(--max)); }
      .hero-actions .button { width: 100%; }
      .side-note { display: none; }
      .filters { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
      .filter-button { width: 100%; }
      .feature-card { padding: 10px 10px 15px; }
      .feature-art { height: 121vw; }
      .feature-meta { align-items: flex-start; }
    }

    .hidden-field {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 18px;
      font-size: .82rem;
      font-weight: 800;
    }

    .footer-links a { text-underline-offset: 4px; }