/* ================================================================
   STC Singularities: single cartoon page
   Loads AFTER the gallery stylesheet (singularities.css) and reuses
   its colors, font stacks and classes, so a cartoon page looks the
   same as the gallery. No extra web fonts are loaded on purpose:
   the gallery doesn't load any either, so both render identically.
   Everything new is scoped under .stcx.
================================================================ */

.stcx {
    clear: both;          /* never sit beside a floated theme element */
    width: 100%;
    background: var(--stc-bg, #261c41);
    color: var(--stc-white, #fff);
    font-family: var(--stc-body);
    -webkit-font-smoothing: antialiased;
}
.stcx [hidden] { display: none !important; }
.stcx img { max-width: 100%; height: auto; }

/* ---- CARTOON AREA (gallery classes, adjusted for links) ---- */
.stcx-stage { min-height: 0; }
.stcx .stc-slides { touch-action: pan-y; transition: transform 0.18s ease, opacity 0.18s ease; }
.stcx .stc-slides.is-leaving-left  { transform: translateX(-40px); opacity: 0; }
.stcx .stc-slides.is-leaving-right { transform: translateX(40px);  opacity: 0; }

/* The gallery title is a div; here it is the page's h1, so neutralize theme h1 styles */
.stcx h1.stc-cap-title {
    margin: 0;
    padding: 0;
    font-family: var(--stc-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.35;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--stc-gold);
}

/* Prev/next and dots are real links here (buttons in the gallery) */
.stcx a.stc-nav-btn,
.stcx a.stc-nav-btn:hover,
.stcx a.stc-footer-btn,
.stcx a.stc-footer-btn:hover { color: #ffffff; text-decoration: none; }
.stcx a.stc-dot { display: block; text-decoration: none; }
.stcx .stc-embed-nav a.active { text-decoration: none; }

/* ---- DESKTOP / PHONE SWITCHES ---- */
.stcx .stcx-phone-only { display: none !important; }
@media (max-width: 640px) {
    .stcx .stcx-phone-only { display: inline-flex !important; }
    .stcx .stc-counter.stcx-phone-only { display: block !important; }
    .stcx .stcx-desk-only { display: none !important; }
}

/* ---- UP NEXT TEASER (a cropped peek, so the joke isn't spoiled) ---- */
.stcx a.stcx-upnext {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 8px 18px 8px 8px;
    border: 1px solid var(--stc-border-mid);
    background: rgba(255,255,255,0.03);
    text-decoration: none;
    transition: all 0.2s ease;
}
.stcx a.stcx-upnext:hover { border-color: var(--stc-gold-bright); background: rgba(201,162,39,0.1); }
.stcx-upnext-peek {
    flex: none;
    display: block;
    width: 64px;
    height: 48px;
    overflow: hidden;
    background: #fff;
}
.stcx .stcx-upnext-peek img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transform: scale(2.4);   /* zoom into the middle of the next drawing */
}
.stcx-upnext-text { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.stcx-upnext-label { font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--stc-gold); }
.stcx-upnext-title { font-family: var(--stc-serif); font-style: italic; font-size: 14px; line-height: 1.3; color: #fff; }

/* ---- SURPRISE ME + SHARE (one quiet line) ---- */
.stcx-actions {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 18px;
}
.stcx .stcx-actions .stc-footer-btn { font-size: 9px; }
.stcx-share-label {
    font-size: 9px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--stc-dim);
}
.stcx a.stcx-share-link {
    font-family: var(--stc-body);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--stc-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}
.stcx a.stcx-share-link:hover { color: var(--stc-gold-bright); }

/* ---- EMAIL SIGNUP (wraps your MailPoet form) ---- */
.stcx-signup {
    max-width: 760px;
    margin: 6px auto 56px;
    padding: 28px 34px;
    box-sizing: border-box;
    border: 1px solid var(--stc-border-mid);
    background: rgba(0,0,0,0.2);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 32px;
}
.stcx-signup-text { flex: 1 1 280px; display: flex; flex-direction: column; gap: 8px; }
.stcx h2.stcx-signup-title {
    margin: 0; padding: 0;
    font-family: var(--stc-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0;
    color: var(--stc-gold);
}
.stcx-signup-sub { margin: 0; font-size: 13px; font-style: italic; line-height: 1.55; color: var(--stc-muted); }
.stcx-signup-form { flex: 1 1 300px; min-width: 0; }

/* MailPoet ties its form styles to the form's own ID, often with !important.
   Every rule below starts with #stcx (this page's ID) so it outranks them.
   MailPoet prints its own form styles with high priority (and your form may use
   columns, spacers, images and its own background), so these rules use !important
   to flatten whatever layout the form has into one simple stack: email field,
   then the button. Applies on cartoon pages only; your Pluck pages are untouched. */
#stcx .stcx-signup-form,
#stcx .stcx-signup-form * { box-sizing: border-box !important; }

#stcx .stcx-signup-form .mailpoet_form,
#stcx .stcx-signup-form .mailpoet_form form,
#stcx .stcx-signup-form form,
#stcx .stcx-signup-form .mailpoet_form_columns_container,
#stcx .stcx-signup-form .mailpoet_form_columns,
#stcx .stcx-signup-form .mailpoet_form_column,
#stcx .stcx-signup-form .wp-block-columns,
#stcx .stcx-signup-form .wp-block-column {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* The headline beside the form already says it: hide the form's own heading,
   intro text, images, spacers and dividers here */
#stcx .stcx-signup-form h1,
#stcx .stcx-signup-form h2,
#stcx .stcx-signup-form h3,
#stcx .stcx-signup-form h4,
#stcx .stcx-signup-form .mailpoet-heading,
#stcx .stcx-signup-form .mailpoet_form_paragraph,
#stcx .stcx-signup-form .mailpoet_form_image,
#stcx .stcx-signup-form figure,
#stcx .stcx-signup-form img,
#stcx .stcx-signup-form .mailpoet_spacer,
#stcx .stcx-signup-form .mailpoet_divider { display: none !important; }

#stcx .stcx-signup-form .mailpoet_paragraph {
    display: block !important;
    width: 100% !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
}
#stcx .stcx-signup-form .mailpoet_paragraph:last-child { margin-bottom: 0 !important; }

#stcx .stcx-signup-form label,
#stcx .stcx-signup-form .mailpoet_text_label {
    display: block !important;
    margin: 0 0 6px !important;
    font-family: var(--stc-body) !important;
    font-size: 9px !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--stc-muted) !important;
}
#stcx .stcx-signup-form input[type="email"],
#stcx .stcx-signup-form input[type="text"],
#stcx .stcx-signup-form input.mailpoet_text {
    display: block !important;
    width: 100% !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid var(--stc-border-mid) !important;
    border-radius: 0 !important;
    background: rgba(255,255,255,0.06) !important;
    color: #fff !important;
    font-family: var(--stc-body) !important;
    font-size: 15px !important;
    line-height: normal !important;
}
#stcx .stcx-signup-form input::placeholder { color: rgba(255,255,255,0.5) !important; }
#stcx .stcx-signup-form input[type="submit"],
#stcx .stcx-signup-form button[type="submit"],
#stcx .stcx-signup-form input.mailpoet_submit,
#stcx .stcx-signup-form .mailpoet_submit {
    display: block !important;
    width: 100% !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border: 2px solid var(--stc-gold) !important;
    border-radius: 0 !important;
    background: var(--stc-gold) !important;
    color: #1b1430 !important;
    font-family: var(--stc-body) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    cursor: pointer;
}
#stcx .stcx-signup-form input[type="submit"]:hover,
#stcx .stcx-signup-form .mailpoet_submit:hover { background: var(--stc-gold-bright) !important; border-color: var(--stc-gold-bright) !important; }

/* Validation and success messages read across, small and calm */
#stcx .stcx-signup-form .parsley-errors-list,
#stcx .stcx-signup-form .mailpoet_error {
    list-style: none !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-style: italic;
    color: #ff9a9a !important;
    white-space: normal !important;
}
#stcx .stcx-signup-form .parsley-errors-list li { display: block !important; width: auto !important; margin: 0 !important; }
#stcx .stcx-signup-form .mailpoet_message { display: block !important; margin-top: 8px !important; font-size: 13px; font-style: italic; color: #fff !important; }

/* ---- THUMBNAIL STRIP ---- */
.stcx-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.stcx-strip-wrap {
    background: rgba(0,0,0,0.18);
    border-top: 0.5px solid var(--stc-border);
    border-bottom: 0.5px solid var(--stc-border);
    padding: 36px 0 30px;
}
.stcx-strip-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
}
.stcx .stcx-h2 {
    margin: 0;
    padding: 0;
    font-family: var(--stc-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 0.04em;
    color: var(--stc-gold);
    text-transform: none;
}
.stcx a.stcx-more {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--stc-muted);
    text-decoration: none;
}
.stcx a.stcx-more:hover { color: var(--stc-gold); }

.stcx-strip {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 4px 2px 14px;
    scrollbar-color: var(--stc-gold) transparent;
    scrollbar-width: thin;
}
.stcx a.stcx-thumb {
    flex: none;
    width: 180px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    border-radius: 2px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--stc-border);
    text-decoration: none;
    transition: all 0.2s ease;
}
.stcx-thumb img, .stcx-thumb-empty {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #fff;
}
.stcx-thumb-num { font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--stc-muted); margin-top: 6px; }
.stcx-thumb-title { font-family: var(--stc-serif); font-style: italic; font-size: 14px; line-height: 1.35; color: #fff; }
.stcx a.stcx-thumb:hover { border-color: var(--stc-gold-bright); transform: translateY(-2px); }
.stcx a.stcx-thumb.is-current { border-color: var(--stc-gold); background: rgba(201,162,39,0.12); }
.stcx a.stcx-thumb.is-current .stcx-thumb-title { color: var(--stc-gold); }

/* ---- ABOUT + PLUCK READS ---- */
.stcx-about { padding: 48px 0 60px; }
.stcx-about-grid { display: flex; flex-wrap: wrap; gap: 48px; }
.stcx-body-text { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.stcx-reads { flex: 1 1 280px; display: flex; flex-direction: column; gap: 16px; }
.stcx-label {
    font-size: 9px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--stc-muted);
}
.stcx-content { font-family: var(--stc-body); font-size: 19px; line-height: 1.7; color: rgba(255,255,255,0.85); }
.stcx-content p { margin: 0 0 1.1em; padding: 0; }
.stcx-content p:last-child { margin-bottom: 0; }
.stcx-content a { color: var(--stc-gold); text-decoration: underline; text-underline-offset: 3px; }
.stcx-content a:hover { color: var(--stc-gold-bright); }
.stcx-content h2, .stcx-content h3 { font-family: var(--stc-serif); font-style: italic; font-weight: 400; color: var(--stc-gold); margin: 1.4em 0 0.5em; line-height: 1.3; }
.stcx-byline { margin: 0; font-size: 13px; font-style: italic; color: var(--stc-dim); letter-spacing: 0.04em; }

.stcx a.stcx-read {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 2px;
    border: 1px solid var(--stc-border);
    background: rgba(255,255,255,0.04);
    text-decoration: none;
    transition: all 0.2s ease;
}
.stcx-read-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.stcx-read-title { font-family: var(--stc-serif); font-style: italic; font-size: 17px; line-height: 1.35; color: #fff; }
.stcx a.stcx-read:hover { border-color: var(--stc-gold-bright); }
.stcx a.stcx-read:hover .stcx-read-title { color: var(--stc-gold); }

/* ---- TOAST ---- */
.stcx-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%) translateY(12px);
    background: rgba(20,20,22,0.9);
    border: 0.5px solid rgba(201,162,39,0.4);
    color: #fff;
    font-family: 'Cinzel', 'IM Fell English', Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0.06em;
    padding: 11px 26px;
    border-radius: 30px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 100000;
    white-space: nowrap;
}
.stcx-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 640px) {
    .stcx-inner { padding: 0 16px; }
    .stcx a.stcx-thumb { width: 140px; }
    .stcx-content { font-size: 18px; }
    .stcx-signup { margin: 0 16px 36px; padding: 22px 18px; }
    .stcx h2.stcx-signup-title { font-size: 18px; }
    .stcx a.stcx-read { flex-direction: row; align-items: center; }
    .stcx-read-img { width: 96px; flex: none; aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
    .stcx .stc-slides, .stcx a { transition: none; }
}