/* ---------------------------------------------------------------------------
   Mobile breakpoints are paired with (max-device-width) on purpose.
   See css/app.css header for the full story (Gmail Android WebView spoofs a
   desktop viewport; max-device-width reads the physical screen instead).
   --------------------------------------------------------------------------- */

/* ============================================================
   Make Capitalism Behave — Post page "Assembly" skin
   ------------------------------------------------------------
   Continuity from the home poster wall onto the reading page:
   the post is one big cream flyer wheat-pasted to the wall, the
   comments are note cards pinned beneath it.

   Scope: .mcb-postpage (the PostDetail root). Site chrome (wall
   background, stencil header, footer band) rides on the same
   body.mcb-assembly class the home page uses — added by
   js/assembly-wall.js when it sees .mcb-postpage, and by
   PostDetail's OnAfterRenderAsync. Everything here is
   presentation only: no anti-bot markup or behavior is touched,
   and .mcb-hp-field (the honeypot) keeps its app.css rule.

   Loaded AFTER css/app.css and css/home-assembly.css (App.razor)
   so these rules win. Fonts come from home-assembly.css's
   @import, which is linked site-wide.
   ============================================================ */

/* tokens + base: a mirror of home-assembly.css's block so the page reads
   correctly even before assembly-wall.js lands the body class */
.mcb-postpage {
    --as-ink: #221c14;
    --as-ink-soft: rgba(34, 28, 20, 0.72);
    /* deliberately darker than home-assembly.css's 0.5: this page sets real
       content (post meta, stat badges, comment bylines) in faint ink at
       0.74-0.76rem, and 0.5 composites to ~3.2:1 on the cream flyer - below
       WCAG AA. 0.64 clears 4.5:1 on every paper tint used here. Placeholders
       keep the lighter 0.5 ink (see the ::placeholder rule below). */
    --as-ink-faint: rgba(34, 28, 20, 0.64);
    --as-red: #a92c33;
    --as-red-deep: #8a1f27;
    --as-wall: #d2cabb;
    --as-wall-deep: #b9ae99;
    --as-cream: #f6eeda;
    --as-kraft: #d8b98d;
    --as-pale-red: #eed3c8;
    --as-pale-blue: #d5dfe4;
    --as-band: #201b14;
    --as-band-ink: #f1e8d4;
    --as-f-display: 'Archivo Black', 'Arial Black', 'Franklin Gothic Medium', sans-serif;
    --as-f-cond: 'Oswald', 'Arial Narrow', 'Helvetica Neue', sans-serif;
    --as-f-type: 'Courier Prime', 'Courier New', Courier, monospace;
    --as-f-marker: 'Permanent Marker', 'Segoe Print', cursive;
    --as-f-sten: 'Saira Stencil One', 'Arial Black', 'Franklin Gothic Medium', sans-serif;
    --as-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");

    max-width: 880px;
    margin: 0 auto;
    font-family: var(--as-f-cond);
    color: var(--as-ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    /* decorative tape corners overhang the flyer edges */
    overflow-x: clip;
}

/* No-JS / pre-JS fallback: paint the wall behind the page on a fixed
   negative-z layer (same trick as .mcb-home::before). Once the body class
   lands, this layer and body.mcb-assembly's background are identical. */
.mcb-postpage::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: #d2cabb;
    background-image:
        radial-gradient(130% 90% at 50% 0%, rgba(255, 250, 236, 0.5) 0%, rgba(255, 250, 236, 0) 46%),
        radial-gradient(120% 100% at 50% 108%, rgba(90, 76, 55, 0.28) 0%, rgba(90, 76, 55, 0) 44%),
        radial-gradient(42% 30% at 12% 38%, rgba(120, 100, 70, 0.10) 0%, rgba(120, 100, 70, 0) 100%),
        radial-gradient(36% 26% at 88% 64%, rgba(120, 100, 70, 0.09) 0%, rgba(120, 100, 70, 0) 100%),
        linear-gradient(180deg, #d6cec0 0%, #d2cabb 30%, #cdc4b3 100%);
}

/* concrete grain over the whole wall (click-through) */
.mcb-postpage .mcb-grain {
    position: fixed;
    inset: 0;
    background-image: var(--as-noise);
    opacity: 0.09;
    pointer-events: none;
    z-index: 110;
}

/* accessible helpers */
.mcb-postpage .mcb-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mcb-postpage a:focus-visible,
.mcb-postpage button:focus-visible {
    outline: 3px solid var(--as-red);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ============ THE POST: one big flyer ============ */
.mcb-postpage .mcb-post-full {
    position: relative;
    display: flex;
    gap: 18px;
    background: var(--as-cream);
    border: none;
    border-radius: 2px;
    padding: 42px 34px 26px;
    margin: 26px 0 40px;
    /* No tilt on the reading sheet: rotate() turns about the centre, so on a long
       post (the voter guide is ~64,000px tall) even 0.4deg swings the top ~220px
       left and the bottom right, and .mcb-postpage's overflow clips both. The
       tape and the back tag keep the poster angle. */
    transform: none;
    box-shadow:
        0 1px 2px rgba(34, 28, 20, 0.28),
        0 12px 26px rgba(34, 28, 20, 0.22);
}
/* wheatpaste wrinkle + paper grain */
.mcb-postpage .mcb-post-full::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image:
        var(--as-noise),
        linear-gradient(112deg, rgba(34, 28, 20, 0.06) 0%, rgba(34, 28, 20, 0) 22%, rgba(255, 255, 255, 0.08) 46%, rgba(34, 28, 20, 0) 64%, rgba(34, 28, 20, 0.07) 100%);
    opacity: 0.5;
    pointer-events: none;
}

/* tape strips across the flyer's top corners */
.mcb-postpage .mcb-tape {
    position: absolute;
    width: 78px;
    height: 25px;
    background: linear-gradient(178deg, rgba(236, 226, 197, 0.68), rgba(219, 206, 172, 0.6));
    box-shadow: 0 1px 2px rgba(34, 28, 20, 0.18), inset 0 0 6px rgba(255, 252, 238, 0.4);
    clip-path: polygon(1.5% 0%, 98% 5%, 100% 34%, 97.5% 100%, 2% 95%, 0% 58%);
    z-index: 4;
    pointer-events: none;
}
.mcb-postpage .mcb-tape-l { top: -9px; left: -24px; transform: rotate(-38deg); }
.mcb-postpage .mcb-tape-r { top: -9px; right: -24px; transform: rotate(38deg); }

/* ── vote column: stamp-outline buttons ── */
.mcb-postpage .mcb-post-vote-col { gap: 6px; padding-top: 4px; }
.mcb-postpage .mcb-vote-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    background: transparent;
    border: 2px solid rgba(34, 28, 20, 0.5);
    border-radius: 4px 3px 5px 3px;
    color: var(--as-ink-soft);
    cursor: pointer;
    mix-blend-mode: multiply;
    transition: color 0.13s ease, border-color 0.13s ease, background 0.13s ease, transform 0.13s ease;
}
.mcb-postpage .mcb-vote-btn .mcb-ico { width: 16px; height: 16px; }
.mcb-postpage .mcb-vote-btn:hover {
    color: var(--as-red);
    border-color: var(--as-red);
    background: rgba(169, 44, 51, 0.07);
    transform: none;
}
.mcb-postpage .mcb-vote-btn.voted-up {
    color: var(--as-red);
    border-color: var(--as-red);
    background: rgba(169, 44, 51, 0.1);
    filter: none;
}
.mcb-postpage .mcb-vote-btn.voted-down {
    color: #3f5a6e;
    border-color: #3f5a6e;
    background: rgba(63, 90, 110, 0.08);
}
.mcb-postpage .mcb-score {
    font-family: var(--as-f-type);
    font-size: 0.95rem;
    color: var(--as-ink);
}
.mcb-postpage .mcb-score.positive { color: var(--as-red); text-shadow: none; }
.mcb-postpage .mcb-score.negative { color: #3f5a6e; }

/* ── meta line: category chip + Courier small print ── */
.mcb-postpage .mcb-post-meta {
    font-family: var(--as-f-type);
    font-size: 0.76rem;
    color: var(--as-ink-faint);
    align-items: center;
    gap: 8px 12px;
}
.mcb-postpage .mcb-post-meta a { color: inherit; }
.mcb-postpage .mcb-post-meta strong { color: var(--as-ink); }
.mcb-postpage .mcb-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--as-f-cond);
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--as-red);
    text-decoration: none;
    border: 1.5px solid rgba(169, 44, 51, 0.75);
    border-radius: 2px;
    padding: 3px 8px 2px;
    transform: rotate(-1deg);
    mix-blend-mode: multiply;
}
.mcb-postpage .mcb-tag:hover { color: var(--as-red-deep); border-color: var(--as-red-deep); }
.mcb-postpage .mcb-tag .mcb-ico { width: 12px; height: 12px; }
.mcb-postpage .mcb-author-occupation,
.mcb-postpage .mcb-author-location {
    font-family: var(--as-f-type);
    color: var(--as-ink-faint);
}
.mcb-postpage .mcb-author-location { display: inline-flex; align-items: center; gap: 4px; }
.mcb-postpage .mcb-author-location .mcb-ico { width: 11px; height: 11px; }
.mcb-postpage .mcb-edited { color: var(--as-ink-faint); font-family: var(--as-f-type); }
.mcb-postpage .mcb-poster-badge-bot { color: var(--as-red); }
.mcb-postpage .mcb-poster-badge-human { color: var(--as-ink-faint); }

/* ── condensed display headline ── */
.mcb-postpage .mcb-post-title {
    margin: 12px 0 4px;
    font-family: var(--as-f-cond);
    font-weight: 600;
    font-size: clamp(1.7rem, 3.6vw, 2.4rem);
    line-height: 1.1;
    letter-spacing: 0.015em;
    text-transform: uppercase;
    color: var(--as-ink);
    overflow-wrap: anywhere;
}

/* ── body copy: typewriter text in a comfortable measure ON the paper ── */
.mcb-postpage .mcb-post-body-text {
    margin-top: 16px;
    font-family: var(--as-f-type);
    font-size: 0.95rem;
    line-height: 1.75;
    color: rgba(34, 28, 20, 0.88);
    max-width: 68ch;
}
.mcb-postpage .mcb-rich-content h1,
.mcb-postpage .mcb-rich-content h2,
.mcb-postpage .mcb-rich-content h3,
.mcb-postpage .mcb-rich-content h4 {
    font-family: var(--as-f-cond);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--as-ink);
}
.mcb-postpage .mcb-rich-content a { color: var(--as-red); text-decoration: underline; }
.mcb-postpage .mcb-rich-content a:hover { color: var(--as-red-deep); }
.mcb-postpage .mcb-rich-content blockquote {
    border-left: 3px solid var(--as-red);
    background: rgba(34, 28, 20, 0.05);
    color: var(--as-ink-soft);
}
.mcb-postpage .mcb-rich-content pre,
.mcb-postpage .mcb-rich-content code {
    background: rgba(34, 28, 20, 0.06);
    border: 1px solid rgba(34, 28, 20, 0.18);
    font-family: var(--as-f-type);
}
.mcb-postpage .mcb-rich-content hr { border-top: 1px dashed rgba(34, 28, 20, 0.3); }
.mcb-postpage .mcb-rich-content .mcb-superseded { color: var(--as-red-deep); }
.mcb-postpage .mcb-rich-content .mcb-jumpnav a {
    border: 1px solid rgba(34, 28, 20, 0.3);
    text-decoration: none;
    font-family: var(--as-f-type);
}
.mcb-postpage .mcb-rich-content .mcb-jumpnav a:hover { border-color: var(--as-red); }

/* ── link preview: a clipping taped onto the flyer ── */
.mcb-postpage .mcb-link-preview {
    background: rgba(255, 255, 255, 0.5);
    border: 1.5px solid rgba(34, 28, 20, 0.65);
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(34, 28, 20, 0.22), 0 5px 12px rgba(34, 28, 20, 0.14);
    transform: rotate(0.45deg);
    max-width: 720px;
}
.mcb-postpage .mcb-link-preview:hover { border-color: var(--as-red); }
.mcb-postpage .mcb-link-preview-title { color: var(--as-ink); font-family: var(--as-f-cond); }
.mcb-postpage .mcb-link-preview-domain { color: var(--as-ink-faint); font-family: var(--as-f-type); }

/* ── media: taped prints (the wall's photo-frame treatment, uncropped) ── */
.mcb-postpage .mcb-photo-link { display: block; width: 100%; max-width: 720px; text-decoration: none; }
.mcb-postpage .mcb-photo {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: 4px 0 12px;
    transform: rotate(var(--pt, 0.6deg));
}
.mcb-postpage .mcb-photo-frame { position: relative; display: block; }
/* typed caption strip under a captioned print (the alt text, shown) */
.mcb-postpage .mcb-photo-caption {
    margin-top: 6px;
    font-family: var(--as-f-type);
    font-size: 0.86rem;
    line-height: 1.4;
    color: var(--as-ink-faint);
}
/* xerox noise-grain over still prints (never over videos - controls stay clean) */
.mcb-postpage .mcb-photo-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--as-noise);
    opacity: 0.14;
    mix-blend-mode: multiply;
    pointer-events: none;
}
.mcb-postpage .mcb-photo-img {
    display: block;
    width: 100%;
    height: auto;
    border: 1.5px solid rgba(34, 28, 20, 0.78);
    border-radius: 0;
    background: #ece3cd;
    box-shadow: 0 1px 2px rgba(34, 28, 20, 0.22), 0 5px 12px rgba(34, 28, 20, 0.16);
}
.mcb-postpage img.mcb-photo-img { filter: saturate(0.9) contrast(0.98); }
.mcb-postpage img.mcb-photo-img:hover { border-color: rgba(34, 28, 20, 0.78); box-shadow: 0 1px 2px rgba(34, 28, 20, 0.22), 0 5px 12px rgba(34, 28, 20, 0.16); }
/* writer-bot press cut on the flyer: same taped-print frame as photos.
   viewBox is validated to exactly 400x250, so pin the aspect ratio. */
.mcb-postpage .mcb-illust { max-width: 560px; margin: 8px 0 18px; }
.mcb-postpage .mcb-illust svg {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 400 / 250;
    border: 1.5px solid rgba(34, 28, 20, 0.78);
    background: #f2eee3;
    box-shadow: 0 1px 2px rgba(34, 28, 20, 0.22), 0 5px 12px rgba(34, 28, 20, 0.16);
}
/* the press cut is already two-ink art - exempt it from the clipping's
   grayscale treatment and give it the clipping's flush hairline instead */
.mcb-postpage .mcb-clipping .mcb-illust svg {
    filter: none;
    border: 1px solid rgba(34, 28, 20, 0.55);
    box-shadow: none;
}

/* lift the whole video figure (and so its controls) above the flyer's
   wrinkle/grain pseudo (.mcb-post-full::after). Lifting the <video> itself
   can't work: .mcb-photo is position:relative + transformed, so the figure is
   the video's stacking context and the flyer's ::after still painted on top.
   The figure is already position:relative, so z-index applies directly. */
.mcb-postpage .mcb-photo-video { z-index: 1; }
/* a video takes its own shape instead of the column's width: a 9:16 phone
   video at 720px wide stood ~1280px tall, taller than the screen. Cap it to
   the viewport height, let the width follow the video's aspect ratio, and
   shrink the taped print to fit it. Wide videos still stop at 720px. */
.mcb-postpage .mcb-photo-video { width: fit-content; max-width: min(720px, 100%); }
.mcb-postpage video.mcb-photo-img {
    width: auto;
    max-width: 100%;
    max-height: 80vh;
    max-height: 80svh;
}
/* small strip of tape across one corner of each print */
.mcb-postpage .mcb-photo .mcb-tape { width: 60px; height: 20px; z-index: 2; }
.mcb-postpage .mcb-tape-pl { top: -9px; left: -14px; transform: rotate(-42deg); }
.mcb-postpage .mcb-tape-pr { top: -9px; right: -14px; transform: rotate(42deg); }

/* ── action bar: rubber-stamp buttons ── */
.mcb-postpage .mcb-post-action-bar {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px dashed rgba(34, 28, 20, 0.3);
    gap: 8px 10px;
}
.mcb-postpage .mcb-stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--as-f-type);
    font-size: 0.74rem;
    letter-spacing: 0.05em;
    color: var(--as-ink-faint);
}
.mcb-postpage .mcb-stat-badge .mcb-ico { width: 13px; height: 13px; }
.mcb-postpage .mcb-card-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--as-f-type);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--as-ink-soft);
    background: transparent;
    border: 2px solid rgba(34, 28, 20, 0.5);
    border-radius: 4px 3px 5px 3px;
    padding: 4px 9px 3px;
    cursor: pointer;
    mix-blend-mode: multiply;
    transform: rotate(-0.6deg);
    transition: color 0.13s ease, border-color 0.13s ease, background 0.13s ease, transform 0.13s ease;
}
.mcb-postpage .mcb-card-action:nth-of-type(even) { transform: rotate(0.7deg); }
.mcb-postpage .mcb-card-action .mcb-ico { width: 13px; height: 13px; }
.mcb-postpage .mcb-card-action:hover {
    color: var(--as-red);
    border-color: var(--as-red);
    background: rgba(169, 44, 51, 0.07);
    transform: rotate(0deg);
}
.mcb-postpage .mcb-card-action:active { transform: scale(0.94); }
.mcb-postpage .mcb-card-action:disabled { opacity: 0.55; cursor: default; }
.mcb-postpage .mcb-vote-up:hover,
.mcb-postpage .mcb-vote-up.voted { color: var(--as-red); border-color: var(--as-red); background: rgba(169, 44, 51, 0.1); }
.mcb-postpage .mcb-vote-down:hover,
.mcb-postpage .mcb-vote-down.voted { color: #3f5a6e; border-color: #3f5a6e; background: rgba(63, 90, 110, 0.08); }
.mcb-postpage .mcb-snap-btn:hover { color: #8a5a12; border-color: #8a5a12; background: rgba(138, 90, 18, 0.07); }
.mcb-postpage .mcb-share-btn:hover { color: var(--as-ink); border-color: var(--as-ink); background: rgba(34, 28, 20, 0.05); }
/* the admin/author utility buttons pick up the same stamp look */
.mcb-postpage .mcb-btn-sm {
    font-family: var(--as-f-type);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--as-ink-soft);
    background: transparent;
    border: 2px solid rgba(34, 28, 20, 0.5);
    border-radius: 3px 5px 3px 4px;
    padding: 4px 10px 3px;
    mix-blend-mode: multiply;
}
.mcb-postpage .mcb-btn-sm:hover { color: var(--as-red); border-color: var(--as-red); }
.mcb-postpage .mcb-btn-danger {
    font-family: var(--as-f-type);
    color: var(--as-red);
    border-color: rgba(169, 44, 51, 0.75);
    background: transparent;
}
.mcb-postpage .mcb-btn-danger:hover { background: var(--as-red); color: #fdf3e0; border-color: var(--as-red); }

/* ── edit form on the paper ── */
.mcb-postpage .mcb-post-edit-form {
    background: rgba(255, 255, 255, 0.5);
    border: 1.5px dashed rgba(34, 28, 20, 0.4);
    border-radius: 2px;
}
.mcb-postpage .mcb-field label {
    font-family: var(--as-f-type);
    color: var(--as-ink-soft);
    letter-spacing: 0.08em;
}
.mcb-postpage .mcb-field input,
.mcb-postpage .mcb-post-edit-form textarea {
    background: #fffdf4;
    border: 1.5px solid rgba(34, 28, 20, 0.4);
    border-radius: 2px;
    color: var(--as-ink);
    font-family: var(--as-f-type);
    padding: 8px 10px;
}
.mcb-postpage .mcb-field input:focus,
.mcb-postpage .mcb-post-edit-form textarea:focus {
    outline: none;
    border-color: var(--as-red);
    box-shadow: 0 0 0 3px rgba(169, 44, 51, 0.12);
    background: #fffdf4;
}
.mcb-postpage .mcb-post-edit-form small { color: var(--as-ink-faint) !important; font-family: var(--as-f-type); }

/* ── alerts and buttons retinted for paper ── */
.mcb-postpage .mcb-alert { font-family: var(--as-f-type); border-radius: 2px; }
.mcb-postpage .mcb-alert-error {
    background: rgba(169, 44, 51, 0.09);
    border: 1.5px solid rgba(169, 44, 51, 0.5);
    color: var(--as-red-deep);
}
.mcb-postpage .mcb-btn-submit {
    background: var(--as-red);
    color: #fdf3e0;
    border: 2px solid rgba(0, 0, 0, 0.25);
    border-radius: 3px 5px 3px 4px;
    font-family: var(--as-f-cond);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 8px 20px 7px;
    cursor: pointer;
    box-shadow: 0 2px 0 var(--as-red-deep), 0 4px 8px rgba(34, 28, 20, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.mcb-postpage .mcb-btn-submit:hover:not(:disabled) {
    background: #b93540;
    transform: translateY(-1px);
    box-shadow: 0 3px 0 var(--as-red-deep), 0 6px 12px rgba(34, 28, 20, 0.34);
}
.mcb-postpage .mcb-btn-submit:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.mcb-postpage .mcb-btn-secondary {
    background: transparent;
    color: var(--as-ink-soft);
    border: 2px solid rgba(34, 28, 20, 0.5);
    border-radius: 4px 3px 5px 3px;
    font-family: var(--as-f-type);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 7px 14px 6px;
    mix-blend-mode: multiply;
}
.mcb-postpage .mcb-btn-secondary:hover { color: var(--as-red); border-color: var(--as-red); background: rgba(169, 44, 51, 0.07); }

/* ============ COMMENT FORM: a blank note card, "pin up a reply" ============ */
.mcb-postpage .mcb-comment-form-section { margin: 0 0 34px; }
.mcb-postpage .mcb-comment-form-section h3 {
    display: inline-block;
    font-family: var(--as-f-sten);
    font-weight: 400;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--as-red);
    border: 2px solid var(--as-red);
    border-radius: 3px 6px 4px 5px;
    padding: 4px 12px 2px;
    transform: rotate(-1deg);
    mix-blend-mode: multiply;
    margin-bottom: 16px;
}
.mcb-postpage .mcb-comment-form {
    position: relative;
    background: #fbf4e1;
    border-radius: 2px;
    padding: 26px 20px 14px;
    transform: rotate(0.35deg);
    box-shadow: 0 1px 2px rgba(34, 28, 20, 0.25), 0 7px 16px rgba(34, 28, 20, 0.18);
}
/* tape strip holding the blank card up */
.mcb-postpage .mcb-comment-form::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    width: 84px;
    height: 24px;
    transform: translateX(-50%) rotate(-2deg);
    background: linear-gradient(178deg, rgba(236, 226, 197, 0.68), rgba(219, 206, 172, 0.6));
    box-shadow: 0 1px 2px rgba(34, 28, 20, 0.18), inset 0 0 6px rgba(255, 252, 238, 0.4);
    clip-path: polygon(1.5% 0%, 98% 5%, 100% 34%, 97.5% 100%, 2% 95%, 0% 58%);
    pointer-events: none;
}
/* paper grain on the card */
.mcb-postpage .mcb-comment-form::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: var(--as-noise);
    opacity: 0.3;
    pointer-events: none;
}
/* ruled notepaper writing surface (shared with reply slips on comment cards) */
.mcb-postpage .mcb-comment-form textarea,
.mcb-postpage .mcb-reply-form textarea {
    width: 100%;
    background-color: transparent;
    background-image: repeating-linear-gradient(to bottom,
        transparent 0, transparent 27px,
        rgba(34, 28, 20, 0.14) 27px, rgba(34, 28, 20, 0.14) 28px);
    background-attachment: local;
    border: none;
    border-radius: 0;
    padding: 2px 2px 8px;
    font-family: var(--as-f-type);
    font-size: 0.92rem;
    line-height: 28px;
    color: var(--as-ink);
    resize: vertical;
    box-shadow: none;
}
/* placeholders are hints, not content: keep the original lighter ink here
   rather than the AA-bumped --as-ink-faint token */
.mcb-postpage .mcb-comment-form textarea::placeholder,
.mcb-postpage .mcb-reply-form textarea::placeholder { color: rgba(34, 28, 20, 0.5); }
.mcb-postpage .mcb-comment-form textarea:focus,
.mcb-postpage .mcb-reply-form textarea:focus {
    outline: none;
    border: none;
    box-shadow: 0 2px 0 var(--as-red);
}
.mcb-postpage .mcb-comment-form-footer { margin-top: 10px; }
.mcb-postpage .mcb-comment-form-footer button {
    background: var(--as-red);
    color: #fdf3e0;
    border: 2px solid rgba(0, 0, 0, 0.25);
    border-radius: 3px 5px 3px 4px;
    font-family: var(--as-f-cond);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 7px 18px 6px;
    transform: rotate(-1deg);
    box-shadow: 0 2px 0 var(--as-red-deep), 0 4px 8px rgba(34, 28, 20, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.mcb-postpage .mcb-comment-form-footer button:hover {
    background: #b93540;
    transform: rotate(0deg) translateY(-1px);
    box-shadow: 0 3px 0 var(--as-red-deep), 0 6px 12px rgba(34, 28, 20, 0.34);
}
.mcb-postpage .mcb-comment-form-footer button:disabled { opacity: 0.5; transform: none; box-shadow: none; }
.mcb-postpage .mcb-char-count { font-family: var(--as-f-type); color: var(--as-ink-faint); }
.mcb-postpage .mcb-login-prompt { font-family: var(--as-f-type); color: var(--as-ink-soft); }
.mcb-postpage .mcb-login-prompt a { color: var(--as-red); text-decoration: underline; }

/* ============ COMMENTS: note cards pinned beneath the flyer ============ */
.mcb-postpage .mcb-comments {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-bottom: 60px;
}
.mcb-postpage .mcb-comment { border-top: none; }
/* top-level comments become pinned note cards; nested replies stay attached
   slips on the same card (they render inside the parent's body column) */
.mcb-postpage .mcb-comments > .mcb-comment {
    position: relative;
    background: #f8f1df;
    border-radius: 2px;
    padding: 20px 18px 14px;
    transform: rotate(-0.3deg);
    box-shadow: 0 1px 2px rgba(34, 28, 20, 0.25), 0 6px 14px rgba(34, 28, 20, 0.16);
}
.mcb-postpage .mcb-comments > .mcb-comment:nth-child(even) {
    background: #f3ecdc;
    transform: rotate(0.35deg);
}
.mcb-postpage .mcb-comments > .mcb-comment:nth-child(3n) { background: #f1ecdf; }
/* a pushpin at the top edge of each card, alternating red and ink */
.mcb-postpage .mcb-comments > .mcb-comment::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 26px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #e0605c, #a92c33 55%, #6d171f);
    box-shadow: 0 2px 3px rgba(34, 28, 20, 0.4), inset -1px -2px 3px rgba(0, 0, 0, 0.28);
    z-index: 2;
}
.mcb-postpage .mcb-comments > .mcb-comment:nth-child(even)::before {
    left: auto;
    right: 30px;
    background: radial-gradient(circle at 35% 30%, #6b6156, #38312a 55%, #17130e);
}
/* faint paper grain on each card */
.mcb-postpage .mcb-comments > .mcb-comment::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: var(--as-noise);
    opacity: 0.28;
    pointer-events: none;
}
/* nested replies: attached slips along a dashed fold line */
.mcb-postpage .mcb-comment-reply {
    border-left: 2px dashed rgba(34, 28, 20, 0.28);
    padding: 10px 0 4px 12px;
}

.mcb-postpage .mcb-comment-meta { font-family: var(--as-f-type); color: var(--as-ink-faint); align-items: center; flex-wrap: wrap; }
.mcb-postpage .mcb-comment-meta strong { color: var(--as-ink); }
.mcb-postpage .mcb-comment-body {
    font-family: var(--as-f-type);
    font-size: 0.9rem;
    line-height: 1.65;
    color: rgba(34, 28, 20, 0.88);
    max-width: 68ch;
}
.mcb-postpage .mcb-comment-deleted,
.mcb-postpage .mcb-deleted-author { color: var(--as-ink-faint); }
.mcb-postpage .mcb-comment-score { font-family: var(--as-f-type); color: var(--as-ink-soft); }
.mcb-postpage .mcb-vote-btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 3px;
    color: rgba(34, 28, 20, 0.45);
    transition: color 0.12s ease;
}
.mcb-postpage .mcb-vote-btn-sm .mcb-ico { width: 14px; height: 14px; }
.mcb-postpage .mcb-vote-btn-sm:hover { color: var(--as-red); }
.mcb-postpage .mcb-vote-btn-sm.voted-up { color: var(--as-red); }
.mcb-postpage .mcb-vote-btn-sm.voted-down { color: #3f5a6e; }
.mcb-postpage .mcb-comment-actions button {
    font-family: var(--as-f-type);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--as-ink-faint);
}
.mcb-postpage .mcb-comment-actions button:hover { color: var(--as-red); }
.mcb-postpage .mcb-link-btn { color: var(--as-ink-faint); }
.mcb-postpage .mcb-link-btn:hover { color: var(--as-red); }
.mcb-postpage .mcb-link-btn-danger:hover { color: var(--as-red-deep); }

/* empty-state note reads as a typewriter scrap */
.mcb-postpage .mcb-empty {
    font-family: var(--as-f-type);
    color: var(--as-ink-soft);
    background: transparent;
    border: none;
}

/* ============ small screens ============ */
@media (max-width: 768px), (max-device-width: 768px) {
    /* keep app.css's 16px input floor so iOS doesn't zoom on focus */
    .mcb-postpage .mcb-comment-form textarea,
    .mcb-postpage .mcb-reply-form textarea,
    .mcb-postpage .mcb-field input,
    .mcb-postpage .mcb-post-edit-form textarea { font-size: 16px; }
    .mcb-postpage .mcb-post-body-text { font-size: 1rem; }
    .mcb-postpage .mcb-comment-body { font-size: 0.95rem; }
}
@media (max-width: 640px), (max-device-width: 640px) {
    .mcb-postpage .mcb-post-full {
        padding: 32px 16px 18px;
        transform: none;
        gap: 12px;
    }
    .mcb-postpage .mcb-comments > .mcb-comment { transform: none; padding: 18px 14px 12px; }
    /* reply slips: the 12px desktop indent stacks on the structural ~42px/level
       (vote col + flex gap, app.css) and starves deep threads of measure on a
       375px screen - depth 6 was left ~15px of text. Shrink the slip, and stop
       indenting entirely past depth 3 (the fold line alone marks nesting). */
    .mcb-postpage .mcb-comment-reply { border-left-width: 1px; padding-left: 5px; }
    .mcb-postpage .mcb-comment-reply .mcb-comment-reply .mcb-comment-reply .mcb-comment-reply {
        border-left: none;
        padding-left: 0;
    }
    .mcb-postpage .mcb-comment-form { transform: none; padding: 24px 14px 12px; }
    .mcb-postpage .mcb-tape-l { left: -14px; }
    .mcb-postpage .mcb-tape-r { right: -14px; }
}

/* ============ variant: the clipping opens as a clipping ============
   Same id-hash rule as the home wall. The big reading sheet becomes aged
   newsprint: torn top/bottom, source masthead, serif headline and body. */
.mcb-postpage .mcb-post-full.mcb-clipping {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding-top: 76px;
    filter: drop-shadow(0 1px 2px rgba(34, 28, 20, 0.3)) drop-shadow(0 10px 22px rgba(34, 28, 20, 0.2));
}
.mcb-postpage .mcb-post-full.mcb-clipping::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(158deg, #ece7d8 0%, #e7e1cd 55%, #dfd8bf 100%);
    clip-path: polygon(0% 0.9%, 3% 0.2%, 7% 1.1%, 12% 0.1%, 18% 0.9%, 25% 0.3%, 31% 1%, 38% 0.2%, 46% 0.9%, 54% 0.3%, 61% 1.1%, 68% 0.1%, 75% 0.8%, 82% 0.3%, 89% 1%, 95% 0.2%, 100% 0.9%, 100% 99.1%, 96% 99.8%, 90% 99%, 83% 99.8%, 76% 99.1%, 68% 99.9%, 60% 99%, 52% 99.7%, 45% 99%, 37% 99.8%, 29% 99.1%, 22% 99.9%, 15% 99%, 8% 99.8%, 3% 99.1%, 0% 99.7%);
}
.mcb-postpage .mcb-clipping .mcb-tape { display: none; }
.mcb-postpage .mcb-clipping .mcb-clip-mast {
    position: absolute;
    top: 18px;
    left: 34px;
    right: 34px;
    font-family: 'Old Standard TT', Georgia, 'Times New Roman', serif;
    font-variant: small-caps;
    letter-spacing: 0.2em;
    font-size: 0.92rem;
    color: var(--as-ink);
    text-align: center;
    border-top: 1px solid rgba(34, 28, 20, 0.65);
    border-bottom: 3px double rgba(34, 28, 20, 0.65);
    padding: 4px 0 5px;
}
.mcb-postpage .mcb-clipping .mcb-post-title {
    font-family: 'Old Standard TT', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.14;
}
.mcb-postpage .mcb-clipping .mcb-post-body-text {
    font-family: 'Old Standard TT', Georgia, 'Times New Roman', serif;
    font-size: 1.02rem;
    line-height: 1.58;
    text-align: justify;
    hyphens: auto;
}
.mcb-postpage .mcb-clipping .mcb-photo-img,
.mcb-postpage .mcb-clipping .mcb-link-preview img {
    filter: grayscale(1) sepia(0.14) contrast(1.05);
    border: 1px solid rgba(34, 28, 20, 0.55);
    box-shadow: none;
}
@media (max-width: 640px) {
    .mcb-postpage .mcb-post-full.mcb-clipping { padding-top: 66px; }
    .mcb-postpage .mcb-clipping .mcb-clip-mast { left: 16px; right: 16px; }
}

/* ============ BACK TO THE WALL: a kraft tag taped above the flyer ============
   post-actions.js retargets and relabels it from the wall snapshot ("Back to
   Labor") and handles the click; with no JS it is a plain link home. */
.mcb-postpage .mcb-back {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 24px 0 -2px 6px;
    padding: 9px 18px 8px 13px;
    font-family: var(--as-f-cond);
    font-weight: 600;
    font-size: 0.86rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--as-ink);
    text-decoration: none;
    background-color: var(--as-kraft);
    background-image: var(--as-noise);
    border-radius: 2px;
    transform: rotate(-1.2deg);
    box-shadow: 0 1px 2px rgba(34, 28, 20, 0.28), 0 5px 12px rgba(34, 28, 20, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.mcb-postpage .mcb-back .mcb-ico { width: 18px; height: 18px; flex: none; color: var(--as-red); }
/* the strip of tape holding the tag to the wall */
.mcb-postpage .mcb-back::before {
    content: "";
    position: absolute;
    top: -9px;
    left: 50%;
    width: 58px;
    height: 18px;
    transform: translateX(-50%) rotate(-3deg);
    background: linear-gradient(178deg, rgba(236, 226, 197, 0.68), rgba(219, 206, 172, 0.6));
    box-shadow: 0 1px 2px rgba(34, 28, 20, 0.18), inset 0 0 6px rgba(255, 252, 238, 0.4);
    clip-path: polygon(1.5% 0%, 98% 5%, 100% 34%, 97.5% 100%, 2% 95%, 0% 58%);
    pointer-events: none;
}
.mcb-postpage .mcb-back:hover {
    color: var(--as-red-deep);
    transform: rotate(0deg) translateY(-1px);
    box-shadow: 0 2px 3px rgba(34, 28, 20, 0.3), 0 8px 16px rgba(34, 28, 20, 0.24);
}
.mcb-postpage .mcb-back:active { transform: scale(0.97); }
@media (max-width: 640px), (max-device-width: 640px) {
    .mcb-postpage .mcb-back { margin: 18px 0 2px 2px; transform: rotate(-0.8deg); }
}

/* the same chit again at the foot of the page, under the comments */
.mcb-postpage .mcb-back.mcb-back-end { margin: 0 0 10px 6px; }

/* ============ LEAD VIDEO: a video post's first video, up under the title ============ */
.mcb-postpage .mcb-lead-video { max-width: 720px; margin: 14px 0 4px; }
.mcb-postpage .mcb-lead-video .mcb-yt-embed,
.mcb-postpage .mcb-lead-video .mcb-photo { margin: 0; }
/* a tall video is narrower than the column: center it like the media list does */
.mcb-postpage .mcb-lead-video .mcb-photo-video { margin: 0 auto; }

/* ============ MORE FROM THE WALL: three posters under the post ============
   The section is .mcb-home, so the posters wear the wall's own styles (it sits
   outside .mcb-postpage, whose rules would restyle them). Its row is not
   .mcb-wall, so assembly-wall.js never adopts it. */
.mcb-home.mcb-more { padding-bottom: 8px; }
.mcb-more .mcb-wallhead { max-width: 960px; margin-top: 8px; }
.mcb-more .mcb-more-row {
    max-width: 960px;
    margin: 0 auto;
    padding: 30px 8px 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px 28px;
    align-items: start;
}
/* nothing arms the wall's slap-up reveal here: never wait on it */
body.mcb-motion .mcb-home.mcb-more .mcb-poster:not(.mcb-done) .mcb-paper { opacity: 1; animation: none; }
@media (max-width: 980px), (max-device-width: 980px) {
    .mcb-more .mcb-more-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* two columns: the third poster would sit alone on its own row */
    .mcb-more .mcb-poster:nth-child(n+3) { display: none; }
}
@media (max-width: 640px), (max-device-width: 640px) {
    .mcb-more .mcb-more-row { grid-template-columns: 1fr; gap: 30px; }
    .mcb-more .mcb-poster:nth-child(n+3) { display: block; }
}