/* Wood Paneling Texture (photo) */
    body {
      background-color: #241408;
      /* First layer darkens the photo; raise/lower the 0.45 to taste */
      background-image:
        linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
        url("wood-panels-texture-1.jpg");
      background-repeat: repeat;
      background-size: auto, 600px auto; /* second value scales the grain */
    }

    /* Shelf Cubby Recessed Depth Effect */
    .cubby-depth {
      background-color: #1a0d05;
      box-shadow: 
        inset 0 12px 28px rgba(0, 0, 0, 0.95),
        inset 12px 0 20px rgba(0, 0, 0, 0.85),
        inset -12px 0 20px rgba(0, 0, 0, 0.85),
        inset 0 -8px 16px rgba(0, 0, 0, 0.7);
      border-top: 14px solid #140a04;
      border-bottom: 16px solid #382319;
      border-left: 12px solid #28150a;
      border-right: 12px solid #28150a;
    }

    /* Parchment Card Styling */
    .parchment-card {
      background-color: #f5eedf;
      background-image: radial-gradient(#e2d3be 1px, transparent 0);
      background-size: 24px 24px;
      box-shadow: 
        3px 4px 10px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(139, 90, 43, 0.2);
    }

    /* Brass Label Plate Styling */
    .brass-plate {
      background: linear-gradient(135deg, #ffe89e 0%, #c59b27 40%, #8a6810 70%, #eac252 100%);
      box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.7),
        inset 0 1px 1px rgba(255, 255, 255, 0.8),
        inset 0 -1px 2px rgba(0, 0, 0, 0.8);
      border: 1px solid #5a4209;
    }

    /* ============================================================
       ZINE SHELF
       ============================================================ */

    /* Row of spines: extra top padding so the hover "pull out" lift
       is never clipped by the scroll container. */
    .zine-rack {
      scrollbar-width: thin;
      scrollbar-color: #5c3a21 #1a0d05;
    }

    /* Wooden plank the zines stand on */
    .zine-plank {
      height: 14px;
      background: linear-gradient(180deg, #6b4423 0%, #4a2e1b 55%, #2a1608 100%);
      box-shadow: 0 6px 12px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.12);
      border-radius: 2px;
    }

    .zine-spine {
      position: relative;
      transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease;
      box-shadow: -3px 0 8px rgba(0, 0, 0, 0.6), inset 1px 0 2px rgba(255, 255, 255, 0.2), inset -1px 0 2px rgba(0,0,0,0.5);
      /* subtle paper-edge texture */
      background-image:
        linear-gradient(90deg, rgba(255,255,255,0.08) 0%, transparent 18%, transparent 82%, rgba(0,0,0,0.25) 100%);
    }
    .zine-spine:hover,
    .zine-spine:focus-visible {
      transform: translateY(-14px);
      box-shadow: -6px 16px 24px rgba(0, 0, 0, 0.95), inset 1px 0 3px rgba(255, 255, 255, 0.4);
      z-index: 30;
      outline: none;
    }
    .zine-spine:focus-visible {
      box-shadow: 0 0 0 3px #f5d77f, -6px 16px 24px rgba(0, 0, 0, 0.95);
    }

    /* Filter chips above the shelf */
    .zine-filter {
      padding: 3px 10px;
      border-radius: 999px;
      border: 1px solid rgba(245, 215, 127, 0.35);
      color: rgba(253, 230, 138, 0.75);
      background: rgba(0, 0, 0, 0.25);
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease;
    }
    .zine-filter:hover { background: rgba(245, 215, 127, 0.12); }
    .zine-filter[aria-pressed="true"] {
      background: #c59b27;
      border-color: #f5d77f;
      color: #241408;
    }
    .zine-filter:focus-visible { outline: 2px solid #f5d77f; outline-offset: 2px; }

    /* Vertical title: wraps onto a second column if it's long, so it
       never overflows the spine. Reads bottom-to-top like a real spine. */
    .vertical-title {
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      white-space: normal;
      text-align: center;
      line-height: 1.15;
      max-height: 100%;
      overflow: hidden;
    }

    /* Gold bands across the spine, like a bound magazine */
    .spine-band {
      width: 100%;
      height: 3px;
      border-top: 1px solid rgba(245, 215, 127, 0.55);
      border-bottom: 1px solid rgba(245, 215, 127, 0.25);
    }

    /* Bookmark ribbon on the newest issue (narrower on a thin post) */
    .zine-ribbon {
      position: absolute;
      top: -6px;
      right: 6px;
      width: 12px;
      height: 34px;
      background: #8b1a1a;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
      box-shadow: 0 2px 4px rgba(0,0,0,0.6);
    }
    .zine-ribbon-thin { right: 2px; width: 8px; height: 26px; }

    /* Zine reader modal */
    .zine-dropcap::first-letter {
      font-family: 'Cinzel', serif;
      font-weight: 800;
      font-size: 3.2rem;
      float: left;
      line-height: 0.85;
      padding: 0.3rem 0.5rem 0 0;
      color: #7a2e12;
    }
    /* ============================================================
       ZINE BOOK (PDF zines): pages are laid out at --zw x --zh (the
       PDF's size) and scaled with --s to fit the screen.
       ============================================================ */
    /* Blog-style zine reader: the page eases in when it opens */
    .zine-page-in {
      animation: zinePageIn 0.28s ease-out;
    }
    @keyframes zinePageIn {
      from { opacity: 0; transform: translateY(8px) rotate(-0.4deg); }
      to   { opacity: 1; transform: translateY(0) rotate(0); }
    }

    :root { --zflip: 900ms; --zpaper: #f7f1e3; }

    .zbook-stage { touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: pointer; }

    .zbook {
      position: relative;
      width: calc(var(--pw) * 2);
      height: var(--ph);
      perspective: 2400px;
      transition: transform var(--zflip) cubic-bezier(.45,.05,.25,1);
      filter: drop-shadow(0 18px 28px rgba(0,0,0,.65));
    }
    .zbook.is-single { width: var(--pw); }
    .zbook.is-spread[data-at="front"] { transform: translateX(calc(var(--pw) * -0.5)); }
    .zbook.is-spread[data-at="back"]  { transform: translateX(calc(var(--pw) *  0.5)); }
    .zbook.no-anim, .zbook.no-anim * { transition: none !important; animation: none !important; }

    .zleaf {
      position: absolute; top: 0; left: 50%;
      width: var(--pw); height: 100%;
      transform-origin: left center;
      transform-style: preserve-3d;
      transition: transform var(--zflip) cubic-bezier(.45,.05,.25,1);
    }
    .zbook.is-single .zleaf { left: 0; }
    .zleaf.flipped { transform: rotateY(-180deg); }
    .zbook.is-single .zleaf.flipped { visibility: hidden; transition: transform var(--zflip) cubic-bezier(.45,.05,.25,1), visibility 0s linear var(--zflip); }

    .zface {
      position: absolute; inset: 0; overflow: hidden;
      background: var(--zpaper);
      backface-visibility: hidden; -webkit-backface-visibility: hidden;
    }
    .zface.zback { transform: rotateY(180deg); }
    .zface.zblank { background: #e9e0cc; }
    /* paper edge / gutter shading, plus a darkening sweep while turning */
    .zface::after {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(to right, rgba(60,35,15,.28), rgba(60,35,15,.06) 7%, transparent 18%);
    }
    .zface.zback::after { background: linear-gradient(to left, rgba(60,35,15,.28), rgba(60,35,15,.06) 7%, transparent 18%); }
    .zface::before {
      content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
      background: #000; opacity: 0;
    }
    .zleaf.turning .zface::before { animation: zshade var(--zflip) ease-in-out; }
    @keyframes zshade { 0%, 100% { opacity: 0; } 50% { opacity: .32; } }

    .zface > .zp {
      width: var(--zw); height: var(--zh);
      transform: scale(var(--s)); transform-origin: 0 0;
    }
    .zp { position: relative; box-sizing: border-box; overflow: hidden; background: var(--zpaper); }
    .zp-blank { background: var(--zpaper); }
    .zp-pdf { padding: 0; background: #fff; }
    .zp-pdf img { display: block; width: 100%; height: 100%; object-fit: fill; }

    @media (prefers-reduced-motion: reduce) {
      :root { --zflip: 1ms; }
      .zine-spine, .zine-page-in { transition: none; animation: none; }
    }

    /* ============================================================
       PORTFOLIO SHELF
       ============================================================ */
    .portfolio-case {
      background-color: var(--leather, #4a2a1a);
      background-image:
        radial-gradient(rgba(255,255,255,0.05) 1px, transparent 0),
        linear-gradient(145deg, rgba(255,255,255,0.14) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.45) 100%);
      background-size: 6px 6px, 100% 100%;
      box-shadow: -4px 6px 14px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(0,0,0,0.5), inset 2px 0 3px rgba(255,255,255,0.12);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .portfolio-print {
      transform: rotate(var(--tilt, -3deg));
      transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      box-shadow: 0 4px 10px rgba(0,0,0,0.6);
    }
    .portfolio:hover .portfolio-print,
    .portfolio:focus-visible .portfolio-print {
      transform: translateY(-24px) rotate(calc(var(--tilt, -3deg) * 0.3));
    }
    .portfolio:hover .portfolio-case,
    .portfolio:focus-visible .portfolio-case {
      transform: translateY(-4px);
      box-shadow: -6px 14px 22px rgba(0,0,0,0.9), inset 0 0 0 1px rgba(0,0,0,0.5), inset 2px 0 3px rgba(255,255,255,0.12);
    }
    .portfolio:focus-visible { outline: none; }
    .portfolio:focus-visible .portfolio-case { box-shadow: 0 0 0 3px #f5d77f, -6px 14px 22px rgba(0,0,0,0.9); }
    .pc { position: absolute; width: 22px; height: 22px; background: linear-gradient(135deg, #ffe89e, #c59b27 60%, #8a6810); box-shadow: 0 1px 2px rgba(0,0,0,0.7); }
    .pc.tl { top: 0; left: 0; border-radius: 6px 0 14px 0; }
    .pc.tr { top: 0; right: 0; border-radius: 0 6px 0 14px; }
    .pc.bl { bottom: 0; left: 0; border-radius: 0 14px 0 6px; }
    .pc.br { bottom: 0; right: 0; border-radius: 14px 0 6px 0; }
    @media (prefers-reduced-motion: reduce) {
      .portfolio-case, .portfolio-print { transition: none; }
    }

    /* Leather Book Spine Nav */
    .book-spine {
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      box-shadow: -4px 4px 8px rgba(0,0,0,0.6);
    }
    .book-spine:hover {
      transform: translateY(-6px) scale(1.02);
      box-shadow: -6px 8px 14px rgba(0,0,0,0.8);
    }

    /* Photo Frame / Polaroid Effect */
    .photo-polaroid {
      transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease;
      box-shadow: 0 8px 16px rgba(0,0,0,0.6);
    }
    .photo-polaroid:hover {
      transform: translateY(-8px) rotate(0deg) scale(1.03) !important;
      box-shadow: 0 16px 28px rgba(0,0,0,0.8);
      z-index: 20;
    }

    /* Custom Scrollbar */
    ::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    ::-webkit-scrollbar-track {
      background: #1a0d05;
    }
    ::-webkit-scrollbar-thumb {
      background: #5c3a21;
      border: 2px solid #241408;
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #8B5A2B;
    }

/* Keep section tops clear of the sticky header when scrolled to */
main > section[id] { scroll-margin-top: 8rem; }

/* Little arrows on the homepage polaroid */
.hero-arrow {
  width: 1.5rem; height: 1.5rem; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem; line-height: 1; color: #78350f; cursor: pointer;
  transition: background-color 0.15s ease;
}
.hero-arrow:hover { background: rgba(120, 53, 15, 0.12); }
.hero-arrow:focus-visible { outline: 2px solid #b45309; outline-offset: 1px; }