/* ─────────────────────────────────────────
       RESET & TOKENS
    ───────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --ink:      #0a0a0a;
      --red:      #e8001c;
      --yellow:   #ffe600;
      --blue:     #0033cc;
      --muted:    #888;
      --bg:       #ffffff;
      --font-ui:  'Boogaloo', sans-serif;
      --font-body:'Source Serif 4', serif;
      --border:   3px solid var(--ink);
      --shadow:   6px 6px 0 var(--ink);
      --shadow-sm:3px 3px 0 var(--ink);
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-ui);
      background: var(--bg)
        radial-gradient(circle, #ddd 1px, transparent 1px);
      background-size: 18px 18px;
      color: var(--ink);
      min-height: 100vh;
    }

    /* ─────────────────────────────────────────
       UTILITIES
    ───────────────────────────────────────── */
    .hidden { display: none !important; }

    .btn {
      font-family: var(--font-ui);
      font-size: 0.95rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 0.45rem 1.2rem;
      border: 2px solid var(--ink);
      background: var(--bg);
      color: var(--ink);
      cursor: pointer;
      transition: transform 0.1s, box-shadow 0.1s;
      box-shadow: var(--shadow-sm);
    }
    .btn:hover { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }
    .btn--primary { background: var(--ink); color: white; box-shadow: 2px 2px 0 var(--red); }
    .btn--primary:hover { box-shadow: 1px 1px 0 var(--red); }

    .field { margin-bottom: 1.1rem; }
    .field label {
      display: block;
      font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
      margin-bottom: 0.4rem;
    }
    .field input,
    .field textarea {
      width: 100%;
      border: 2px solid var(--ink);
      background: white; color: var(--ink);
      font-family: var(--font-ui); font-size: 16px;
      padding: 0.55rem 0.8rem;
      outline: none;
    }
    .field input:focus,
    .field textarea:focus { outline: 3px solid var(--yellow); outline-offset: 1px; }
    .field textarea {
      resize: none; min-height: 80px;
      font-family: var(--font-body); font-size: 0.95rem; line-height: 1.5;
    }

    /* ─────────────────────────────────────────
       AUTH
    ───────────────────────────────────────── */
    #invite-screen {
      display: none; align-items: center; justify-content: center;
      min-height: 100vh; background: var(--bg); padding: 1rem;
    }
    #invite-screen.visible { display: flex; }
    .invite-teaser {
      padding: 1.2rem 1.4rem;
      border-bottom: var(--border);
      margin-bottom: 1rem;
    }
    .invite-teaser__label {
      font-family: var(--font-ui); font-size: 0.75rem;
      text-transform: uppercase; letter-spacing: 0.1em;
      color: var(--muted); margin-bottom: 0.8rem;
    }
    .invite-teaser__blur {
      position: relative; height: 120px;
      background: #ddd; border: var(--border); overflow: hidden;
      margin-bottom: 0.9rem;
    }
    .invite-teaser__photo {
      width: 100%; height: 100%;
      background: repeating-linear-gradient(
        45deg, #ccc, #ccc 10px, #d8d8d8 10px, #d8d8d8 20px
      );
      filter: blur(6px); transform: scale(1.1);
    }
    .invite-teaser__overlay {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 0.4rem;
      background: rgba(0,0,0,0.35); color: white;
      font-family: var(--font-ui); font-size: 0.8rem;
      letter-spacing: 0.08em; text-transform: uppercase;
    }
    .invite-teaser__copy {
      font-family: var(--font-body); font-size: 0.9rem;
      color: #555; line-height: 1.5; margin: 0;
    }

    #auth-screen {
      display: none; min-height: 100vh;
      align-items: center; justify-content: center; padding: 2rem;
    }
    #auth-screen.visible { display: flex; }

    .auth-box {
      width: 400px; max-width: 100%;
      background: white;
      border: var(--border);
      box-shadow: 8px 8px 0 var(--ink);
      overflow: hidden;
    }

    .auth-hero {
      position: relative; min-height: 180px; overflow: hidden;
    }
    .auth-hero__bg {
      position: absolute; inset: 0;
      background: linear-gradient(
        180deg,
        #87CEEB 0%, #87CEEB 55%,
        #e8d5a3 55%, #e8d5a3 70%,
        #4a90d9 70%, #4a90d9 80%,
        #e8d5a3 80%
      );
    }
    .auth-hero__sun {
      position: absolute; top: 12px; right: 30px;
      width: 36px; height: 36px;
      background: var(--yellow); border-radius: 50%;
      border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
    }
    .auth-hero__sand {
      position: absolute; bottom: 0; left: 0; right: 0;
      height: 40px; background: #e8d5a3; border-top: 2px solid var(--ink);
    }
    .auth-hero__logo {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .auth-hero__badge {
      background: white; border: 3px solid var(--ink);
      padding: 0.4rem 1.2rem;
      box-shadow: 4px 4px 0 var(--ink);
      transform: rotate(-1.5deg);
      font-size: 2.2rem; line-height: 1;
    }
    .auth-hero__badge span { color: var(--red); }

    .fig {
      position: absolute; bottom: 40px;
      border: 2px solid var(--ink); border-radius: 2px 2px 0 0;
    }
    .fig__head {
      position: absolute; border: 2px solid var(--ink);
      border-radius: 50%; background: #f4c17a;
    }
    .towel {
      position: absolute; bottom: 40px;
      height: 8px; border: 2px solid var(--ink);
    }

    .auth-body { padding: 2rem; }

    .auth-tabs {
      display: flex; border: 2px solid var(--ink);
      overflow: hidden; margin-bottom: 1.8rem;
    }
    .auth-tab {
      flex: 1; background: white; border: none;
      border-right: 2px solid var(--ink);
      font-family: var(--font-ui); font-size: 1rem;
      letter-spacing: 0.05em; text-transform: uppercase;
      padding: 0.6rem; cursor: pointer; color: var(--muted);
    }
    .auth-tab:last-child { border-right: none; }
    .auth-tab.active { background: var(--yellow); color: var(--ink); }

    .auth-submit {
      width: 100%;
      background: var(--ink); color: white;
      border: 2px solid var(--ink);
      font-family: var(--font-ui); font-size: 1.1rem;
      letter-spacing: 0.08em; text-transform: uppercase;
      padding: 0.8rem; cursor: pointer; margin-top: 0.5rem;
      box-shadow: 3px 3px 0 var(--red);
      transition: transform 0.1s, box-shadow 0.1s;
    }
    .auth-submit:hover { transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--red); }

    .auth-msg {
      font-size: 0.85rem; margin-top: 1rem;
      text-align: center; min-height: 1.2rem;
    }
    .auth-msg--err { color: var(--red); font-weight: bold; }
    .auth-msg--ok  { color: #007a2f; }

    /* ─────────────────────────────────────────
       APP SHELL
    ───────────────────────────────────────── */
    #app { display: none; }
    #post-view {
      display: none; min-height: 100vh; background: var(--bg);
    }
    #post-view.visible { display: block; }
    .site-header__center {
      position: absolute; left: 50%; transform: translateX(-50%);
    }
    #app.visible { display: block; }

    .site-header {
      position: sticky; top: 0; z-index: 200;
      background: white;
      border-bottom: var(--border);
      box-shadow: 0 3px 0 var(--ink);
      padding: 0.9rem 2rem;
      display: flex; align-items: center; justify-content: space-between;
    }
    .site-header::before {
      content: '';
      position: absolute; left: 0; top: 0; bottom: 0;
      width: 6px; background: var(--red);
    }
    .site-header__left { display: flex; align-items: center; gap: 1.2rem; padding-left: 0.8rem; }

    .user-chip {
      font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--muted); border: 2px solid #ddd; padding: 0.25rem 0.7rem;
    }

    .site-header__actions { display: flex; gap: 0.6rem; align-items: center; }

    .hdr-btn {
      background: white; border: 2px solid var(--ink); color: var(--ink);
      font-family: var(--font-ui); font-size: 0.9rem;
      letter-spacing: 0.06em; text-transform: uppercase;
      padding: 0.3rem 0.9rem; cursor: pointer;
      box-shadow: var(--shadow-sm);
      transition: transform 0.1s, box-shadow 0.1s;
    }
    .hdr-btn:hover { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }
    .hdr-btn--accent { background: var(--red); color: white; }
    .hdr-btn--refresh { display: none; font-size: 1.2rem; padding: 0.3rem 0.7rem; }

    @media (max-width: 600px) {
      .hdr-btn--accent { display: none; }
      .site-header { padding: 0.8rem 1rem; }
    }

    .quote-bar {
      font-family: var(--font-body); font-style: italic;
      font-size: 0.78rem; color: var(--muted);
      padding: 0.45rem 2rem;
      border-bottom: 1px solid #e8e8e8;
      background: white; text-align: center;
    }

    /* ─────────────────────────────────────────
       FEED
    ───────────────────────────────────────── */
    #feed { max-width: 900px; margin: 0 auto; padding: 3rem 1.5rem 8rem; }

    @media (max-width: 600px) { #feed { padding: 1.5rem 0.8rem 6rem; } }

    .loading-state,
    .empty-state { text-align: center; padding: 7rem 2rem; }

    .spinner {
      width: 28px; height: 28px;
      border: 3px solid #ddd; border-top-color: var(--red);
      border-radius: 50%; animation: spin 0.6s linear infinite;
      margin: 0 auto 1.5rem;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    .state-label {
      font-size: 1.1rem; letter-spacing: 0.1em;
      text-transform: uppercase; color: #aaa;
    }

    /* ─────────────────────────────────────────
       POST
    ───────────────────────────────────────── */
    .post {
      background: white;
      border: var(--border);
      box-shadow: var(--shadow);
      margin-bottom: 3rem; overflow: hidden;
      animation: slap 0.3s cubic-bezier(.2,1.4,.5,1) both;
    }
    @keyframes slap {
      from { opacity: 0; transform: scale(0.97) translateY(10px); }
      to   { opacity: 1; transform: none; }
    }

    .post__header {
      background: var(--ink); padding: 0.7rem 1.2rem;
      display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    }
    .post__title {
      font-size: clamp(1.3rem, 3vw, 2rem);
      color: white; letter-spacing: -0.01em; line-height: 1;
    }
    .post__actions { position: relative; }
    .post__dots-btn {
      background: none; border: 1.5px solid rgba(255,255,255,0.3);
      color: rgba(255,255,255,0.7);
      width: 30px; height: 30px; cursor: pointer; font-size: 1rem;
      display: flex; align-items: center; justify-content: center;
      transition: border-color 0.1s, color 0.1s; letter-spacing: 0.05em;
      line-height: 1;
    }
    .post__dots-btn:hover { border-color: var(--yellow); color: var(--yellow); }
    .post__dot-menu {
      display: none;
      position: absolute; top: calc(100% + 6px); right: 0;
      background: white; border: var(--border);
      box-shadow: 4px 4px 0 var(--ink);
      min-width: 120px; z-index: 400;
    }
    .post__dot-menu.open { display: block; }
    .post__dot-menu button {
      display: block; width: 100%;
      background: none; border: none; border-bottom: 1.5px solid #eee;
      font-family: var(--font-ui); font-size: 0.85rem;
      letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--ink); padding: 0.65rem 1rem;
      text-align: left; cursor: pointer;
    }
    .post__dot-menu button:last-child { border-bottom: none; }
    .post__dot-menu button:hover { background: var(--yellow); }
    .post__dot-menu button.danger:hover { background: var(--red); color: white; }
    .post__share-btn {
      display: flex; align-items: center; gap: 0.35rem;
      font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.08em;
      text-transform: uppercase; cursor: pointer;
      background: var(--yellow); color: var(--ink);
      border: 2px solid var(--ink); padding: 0.25rem 0.6rem;
      box-shadow: 2px 2px 0 var(--ink); transition: box-shadow 0.1s, transform 0.1s;
      white-space: nowrap;
    }
    .post__share-btn:active { box-shadow: 1px 1px 0 var(--ink); transform: translate(1px,1px); }
    .post__share-btn.copied { background: var(--ink); color: var(--yellow); }

    .post__meta {
      background: var(--yellow); border-bottom: 2px solid var(--ink);
      padding: 0.35rem 1.2rem;
      display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
    }
    .tag { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
    .tag--date   { color: #444; }
    .tag--author { color: #666; }
    .tag--sep    { color: #aaa; }
    .tag--loc    { color: var(--red); font-size: 0.85rem; }
    .tag--loc::before { content: '⊕ '; }

    .post__description {
      font-family: var(--font-body);
      font-size: 0.95rem; line-height: 1.6; color: #333;
      padding: 0.9rem 1.2rem 0;
    }

    /* ─────────────────────────────────────────
       PHOTOS
    ───────────────────────────────────────── */
    .photo-grid {
      display: flex; flex-direction: column;
      gap: 2px; padding: 1rem 1rem 0;
    }
    /* Gray → color animation — triggers on image load via JS */
    @keyframes decolor {
      from { opacity: 1; }
      to   { opacity: 0; }
    }

    .photo-item {
      position: relative; overflow: hidden;
      background: #eee; cursor: pointer;
      border: 2px solid var(--ink); width: 100%;
    }

    /* Grayscale copy sits on top and fades out on load */
    .photo-item__gray {
      position: absolute; inset: 0;
      width: 100%; height: 100%; object-fit: cover; display: block;
      filter: grayscale(1);
      pointer-events: none;
      z-index: 2;
    }
    .photo-item.loaded .photo-item__gray {
      animation: decolor 1s ease-out forwards;
    }

    .photo-item img {
      width: 100%; height: 100%; object-fit: cover; display: block;
      transition: transform 0.3s ease;
    }
    .photo-item:hover img { transform: scale(1.04); }
    .photo-item__overlay {
      position: absolute; inset: 0; opacity: 0; transition: opacity 0.2s;
      display: flex; flex-direction: column; justify-content: flex-end;
    }
    .photo-item:hover .photo-item__overlay { opacity: 1; }
    .photo-item__caption {
      background: var(--yellow); color: var(--ink);
      font-size: 0.85rem; padding: 0.3rem 0.6rem;
      letter-spacing: 0.02em; border-top: 2px solid var(--ink);
    }

    /* ─────────────────────────────────────────
       COMMENTS
    ───────────────────────────────────────── */
    .comments { border-top: 2px solid var(--ink); background: #fafafa; }

    .comments__toggle {
      width: 100%; background: #f0f0f0; border: none;
      border-top: 2px solid var(--ink);
      font-family: var(--font-ui); font-size: 0.85rem;
      letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--muted); padding: 0.6rem 1rem; cursor: pointer;
      display: flex; align-items: center; justify-content: space-between;
      transition: background 0.1s;
    }
    .comments__toggle:hover { background: var(--yellow); color: var(--ink); }

    .comments__body { display: none; }
    .comments__body.open { display: block; }

    .comment {
      display: flex; gap: 0.8rem; padding: 0.8rem 1rem;
      border-bottom: 1.5px solid #e8e8e8; align-items: flex-start;
    }
    .comment:last-child { border-bottom: none; }
    .comment__avatar {
      width: 28px; height: 28px; flex-shrink: 0;
      background: var(--yellow); border: 2px solid var(--ink);
      display: flex; align-items: center; justify-content: center;
      font-size: 0.85rem; text-transform: uppercase;
    }
    .comment__body { flex: 1; min-width: 0; }
    .comment__meta {
      font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
      color: var(--muted); margin-bottom: 0.2rem;
      display: flex; gap: 0.5rem; align-items: baseline;
    }
    .comment__author { color: var(--ink); font-size: 0.85rem; }
    .comment__text {
      font-family: var(--font-body); font-size: 0.9rem;
      line-height: 1.45; color: #222; word-break: break-word;
    }
    .comment__del {
      background: none; border: none; color: #ccc;
      font-size: 0.7rem; cursor: pointer; flex-shrink: 0; margin-top: 2px;
    }
    .comment__del:hover { color: var(--red); }

    .comments__form { display: flex; border-top: 2px solid var(--ink); }
    .comments__input {
      flex: 1; border: none; outline: none;
      font-family: var(--font-body); font-size: 16px;
      padding: 0.65rem 1rem; background: white; color: var(--ink);
      border-right: 2px solid var(--ink);
    }
    .comments__input::placeholder { color: #bbb; font-style: italic; }
    .comments__submit {
      background: var(--ink); color: white; border: none;
      font-family: var(--font-ui); font-size: 0.85rem;
      letter-spacing: 0.06em; text-transform: uppercase;
      padding: 0 1.1rem; cursor: pointer; transition: background 0.1s;
    }
    .comments__submit:hover { background: var(--red); }

    /* ─────────────────────────────────────────
       MODALS
    ───────────────────────────────────────── */
    .modal-bg {
      position: fixed; inset: 0;
      background: rgba(10,10,10,0.7);
      z-index: 400; display: none;
      align-items: center; justify-content: center; padding: 1rem;
    }
    .modal-bg.open { display: flex; }

    .modal {
      background: white; border: var(--border);
      box-shadow: 8px 8px 0 var(--ink);
      width: 520px; max-width: 100%; max-height: 90vh; overflow-y: auto;
    }
    .modal__head {
      background: var(--ink); padding: 1rem 1.5rem;
      font-size: 1.4rem; color: white; letter-spacing: -0.01em;
    }
    .modal__body { padding: 1.5rem; }
    .modal__actions {
      display: flex; gap: 0.8rem; justify-content: flex-end; margin-top: 1.5rem;
    }

    @media (max-width: 600px) { .modal__body { padding: 1rem; } }

    /* ─────────────────────────────────────────
       CROP MODAL
    ───────────────────────────────────────── */
    .crop-ratios {
      display: flex; border: 2px solid var(--ink);
      overflow: hidden; margin-bottom: 1rem;
    }
    .crop-ratio-btn {
      flex: 1; background: white; border: none;
      border-right: 2px solid var(--ink);
      font-family: var(--font-ui); font-size: 0.85rem;
      letter-spacing: 0.05em; text-transform: uppercase;
      padding: 0.5rem; cursor: pointer; color: #999;
    }
    .crop-ratio-btn:last-child { border-right: none; }
    .crop-ratio-btn.active { background: var(--yellow); color: var(--ink); }

    #crop-wrapper {
      position: relative; width: 100%; background: #111;
      overflow: hidden; touch-action: none; cursor: grab;
      border: 2px solid var(--ink); margin-bottom: 1rem;
    }
    #crop-wrapper:active { cursor: grabbing; }
    #crop-canvas { display: block; width: 100%; }
    #crop-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

    .crop-zoom-row { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.5rem; }
    .crop-zoom-label {
      font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em;
      color: #888; flex-shrink: 0;
    }
    #crop-zoom { flex: 1; accent-color: var(--red); cursor: pointer; }

    /* ─────────────────────────────────────────
       PARR UPLOAD ANIMATION
    ───────────────────────────────────────── */
    #parr-modal {
      flex-direction: column; gap: 2rem;
      background: rgba(8,8,8,0.93); padding: 2rem;
    }

    /* Flash */
    #parr-flash-el {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
      background: white; opacity: 0; pointer-events: none; z-index: 10;
    }
    #parr-flash-el.bang { animation: parrFlash 0.45s ease-out forwards; }
    @keyframes parrFlash {
      0%   { opacity: 0; }
      8%   { opacity: 1; }
      100% { opacity: 0; }
    }

    /* Polaroid */
    .parr-polaroid {
      width: min(300px, 85vw);
      background: white; border: 3px solid #111;
      box-shadow: 10px 10px 0 #111;
      padding: 14px 14px 52px;
      transform: rotate(-4deg) translateY(80px) scale(0.92);
      opacity: 0;
      transition: transform 0.6s cubic-bezier(.15,1.4,.4,1), opacity 0.4s ease;
      position: relative;
    }
    .parr-polaroid.landed {
      transform: rotate(-2deg) translateY(0) scale(1); opacity: 1;
    }
    .parr-polaroid.shake { animation: polaroidShake 0.35s ease 0.65s both; }
    @keyframes polaroidShake {
      0%   { transform: rotate(-2deg) scale(1); }
      25%  { transform: rotate(1.5deg) scale(1.01); }
      50%  { transform: rotate(-1deg) scale(1); }
      75%  { transform: rotate(0.5deg) scale(1.005); }
      100% { transform: rotate(-2deg) scale(1); }
    }
    .parr-hotspot {
      position: absolute; top: -10px; left: -10px;
      width: 80px; height: 80px;
      background: radial-gradient(circle at 25% 25%, rgba(255,255,255,0.75) 0%, transparent 65%);
      pointer-events: none; opacity: 0; transition: opacity 0.3s ease 0.1s;
    }
    .parr-polaroid.landed .parr-hotspot { opacity: 1; }
    .parr-sticker {
      position: absolute; top: -12px; right: -8px;
      background: #e8001c; color: white;
      font-family: var(--font-ui); font-size: 0.65rem;
      letter-spacing: 0.12em; text-transform: uppercase;
      padding: 3px 8px; border: 2px solid #111;
      transform: rotate(3deg); box-shadow: 2px 2px 0 #111;
    }
    .parr-filmholes { display: flex; gap: 6px; margin-bottom: 10px; }
    .parr-filmhole { width: 7px; height: 5px; background: #111; border-radius: 1px; opacity: 0.18; }
    .parr-photo-wrap {
      width: 100%; aspect-ratio: 1;
      background: #1a1a1a; overflow: hidden;
      border: 2px solid #111; position: relative;
    }
    .parr-photo-img {
      width: 100%; height: 100%; object-fit: cover; display: block;
      filter: saturate(0) brightness(0.7) contrast(0.8);
      transition: filter 2.2s cubic-bezier(.4,0,.2,1);
    }
    .parr-photo-img.developed {
      filter: saturate(1) contrast(1) brightness(1);
    }
    .parr-develop-sweep {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
      background: linear-gradient(180deg, rgba(255,220,100,0.55) 0%, rgba(200,80,20,0.3) 35%, rgba(20,20,60,0.2) 70%, transparent 100%);
      transform: translateY(-100%);
      transition: transform 1.6s cubic-bezier(.4,0,.1,1);
      pointer-events: none;
    }
    .parr-develop-sweep.swept { transform: translateY(100%); }
    .parr-grain {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
      background-size: 120px 120px; opacity: 0.45; mix-blend-mode: multiply; pointer-events: none;
    }
    .parr-caption-strip {
      position: absolute; bottom: 0; left: 0; right: 0; height: 52px;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-ui); font-size: 1rem; letter-spacing: 0.04em;
      color: #111; padding: 0 12px; text-align: center;
    }
    .parr-quip {
      font-family: var(--font-body); font-style: italic;
      font-size: clamp(0.9rem, 2.5vw, 1.05rem);
      color: rgba(255,255,255,0.82); text-align: center;
      max-width: min(300px, 85vw); line-height: 1.55;
      opacity: 0; transform: translateY(12px);
      transition: opacity 0.55s ease 1s, transform 0.55s ease 1s;
    }
    .parr-quip.visible { opacity: 1; transform: translateY(0); }
    .parr-dots { display: flex; gap: 8px; align-items: center; opacity: 0; transition: opacity 0.3s ease 0.5s; }
    .parr-dots.visible { opacity: 1; }
    .parr-dot {
      width: 8px; height: 8px;
      border: 2px solid rgba(255,255,255,0.35); border-radius: 50%;
      transition: background 0.3s ease, border-color 0.3s ease;
    }
    .parr-dot.done { background: #ffe600; border-color: #ffe600; }
    #pm-save-btn.posting { opacity: 0.55; pointer-events: none; cursor: default; }

    /* ─────────────────────────────────────────
       LIGHTBOX
    ───────────────────────────────────────── */
    .lightbox {
      position: fixed; inset: 0; background: var(--ink);
      z-index: 600; display: none;
      align-items: center; justify-content: center;
    }
    .lightbox.open { display: flex; }
    .lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; display: block; }

    .lb-close {
      position: absolute; top: 1rem; left: 1.5rem;
      background: var(--yellow); border: 2px solid white; color: var(--ink);
      font-family: var(--font-ui); font-size: 0.9rem;
      letter-spacing: 0.1em; text-transform: uppercase;
      cursor: pointer; padding: 0.25rem 0.8rem;
    }

    .lb-info {
      position: absolute; bottom: 1.5rem;
      left: 50%; transform: translateX(-50%);
      text-align: center; white-space: nowrap;
    }
    .lb-caption {
      display: block; background: var(--yellow); color: var(--ink);
      font-size: 1rem; padding: 0.2rem 0.8rem; border: 2px solid var(--ink);
    }


    /* ─────────────────────────────────────────
       BURGER MENU
    ───────────────────────────────────────── */
    .burger-wrap { position: relative; }

    .burger-btn { font-size: 1.1rem; padding: 0.3rem 0.7rem; }

    .burger-menu {
      display: none;
      position: absolute; top: calc(100% + 8px); right: 0;
      background: white;
      border: var(--border);
      box-shadow: 4px 4px 0 var(--ink);
      min-width: 140px;
      z-index: 500;
    }
    .burger-menu.open { display: block; }
    .burger-menu button {
      display: block; width: 100%;
      background: none; border: none;
      font-family: var(--font-ui); font-size: 0.9rem;
      letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--ink); padding: 0.7rem 1rem;
      text-align: left; cursor: pointer;
      border-bottom: 1.5px solid #eee;
    }
    .burger-menu button:last-child { border-bottom: none; }
    .burger-menu button:hover { background: var(--yellow); }

    /* ─────────────────────────────────────────
       FAB
    ───────────────────────────────────────── */
    .fab {
      position: fixed; bottom: 1.8rem; right: 1.8rem; z-index: 300;
      width: 62px; height: 62px;
      background: var(--red); color: white;
      border: var(--border); box-shadow: 4px 4px 0 var(--ink);
      cursor: pointer; font-size: 2rem; line-height: 1;
      display: flex; align-items: center; justify-content: center;
      transition: transform 0.1s, box-shadow 0.1s;
      -webkit-tap-highlight-color: transparent;
    }
    .fab:hover  { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
    .fab:active { transform: translate(4px,4px); box-shadow: none; }

    .file-input { position: fixed; top: -9999px; left: -9999px; opacity: 0; width: 1px; height: 1px; }

    /* ── POST VIEW ── */
    #post-view {
      display: none; flex-direction: column; min-height: 100vh;
      background: var(--bg);
    }
    #post-view.visible { display: flex; }
    .pv-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0.6rem 1rem; border-bottom: var(--border);
      background: white; position: sticky; top: 0; z-index: 100;
    }
    .pv-back {
      font-family: var(--font-ui); font-size: 0.85rem;
      letter-spacing: 0.06em; text-transform: uppercase;
      background: none; border: var(--border); padding: 0.3rem 0.8rem;
      cursor: pointer; box-shadow: 2px 2px 0 var(--ink); color: var(--ink);
    }
    .pv-back:hover { background: var(--yellow); }
    #pv-content { max-width: 680px; margin: 0 auto; width: 100%; padding: 1.5rem 1rem; }
    .pv-loading { display: flex; justify-content: center; padding: 4rem; }
    .pv-error { text-align: center; padding: 4rem 2rem; font-family: var(--font-body); }
    .pv-error p { margin-bottom: 1.5rem; color: #666; }