:root {
    --red: red;
    --bs-nav-link-font-size: 1.5rem;
    /*--bs-body-font-size: 24px*/
}

/*src: url(asset-url("/fonts/Montserrat-Regular.ttf")) format('truetype');*/

@font-face {
    font-family: "playfairdisplay";
    src: url("/fonts/PlayfairDisplay-Regular.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
    size-adjust: 110%;
}

@font-face {
    font-family: "playfairdisplay";
    src: url("/fonts/PlayfairDisplay-Italic.ttf") format('truetype');
    font-weight: normal;
    font-style: italic;
    size-adjust: 110%;
}

@font-face {
    font-family: "merriweather";
    src: url("/fonts/Merriweather_24pt-Regular.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "merriweather";
    src: url("/fonts/Merriweather_24pt-Italic.ttf") format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "ebgaramond";
    src: url("/fonts/EBGaramond-Regular.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
    size-adjust: 110%;
}

@font-face {
    font-family: "ebgaramond";
    src: url("/fonts/EBGaramond-Italic.ttf") format('truetype');
    font-weight: normal;
    font-style: italic;
    size-adjust: 110%;
}

@font-face {
    font-family: "gloock";
    src: url("/fonts/Gloock-Regular.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "ptserif";
    src: url("/fonts/PTSerif-Regular.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "ptserif";
    src: url("/fonts/PTSerif-Italic.ttf") format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "ptserif";
    src: url("/fonts/PTSerif-Bold.ttf") format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "ptserif";
    src: url("/fonts/PTSerif-BoldItalic.ttf") format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "crimsontext";
    src: url("/fonts/CrimsonText-Regular.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "crimsontext";
    src: url("/fonts/CrimsonText-Italic.ttf") format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "crimsontext";
    src: url("/fonts/CrimsonText-Bold.ttf") format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "crimsontext";
    src: url("/fonts/CrimsonText-BoldItalic.ttf") format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "poppins";
    src: url("/fonts/Poppins-Regular.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "poppins";
    src: url("/fonts/Poppins-Bold.ttf") format('truetype');
    font-style: normal;
    font-weight: bold;
}

@font-face {
    font-family: "poppins";
    src: url("/fonts/Poppins-RegularItalic.ttf") format('truetype');
    font-style: italic;
    font-weight: normal;
}

@font-face {
    font-family: "poppins";
    src: url("/fonts/Poppins-MediumItalic.ttf") format('truetype');
    font-style: italic;
    font-weight: bold;
}

@font-face {
    font-family: "montserrat";
    src: url("/fonts/Montserrat-Regular.ttf") format('truetype');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "montserrat";
    src: url("/fonts/Montserrat-Italic.ttf") format('truetype');
    font-style: italic;
    font-weight: normal;
}

@font-face {
    font-family: "montserrat";
    src: url("/fonts/Montserrat-MediumItalic.ttf") format('truetype');
    font-style: italic;
    font-weight: bold;
}

@font-face {
    font-family: "montserrat";
    src: url("/fonts/Montserrat-Bold.ttf") format('truetype');
    font-style: normal;
    font-weight: bold;
}

*, .image-container > * {
    font-family: "montserrat", "Open Sans", "lato", sans-serif, serif;
}

html, body {
}

body {
    height: 100%;
    background-color: var(--color2);
}

header, footer {
    background-color: var(--color2);
    box-shadow: 0 50vh 0 50vh var(--color2);
}

main {
    background-color: var(--color1);
}

.btn-purple {
    --bs-btn-font-weight: 600;
    --bs-btn-color: black;
    --bs-btn-bg: white;
    --bs-btn-border-color: var(--color1);
    --bs-btn-border-width: 2px;
    --bs-btn-border-radius: .5rem;
    --bs-btn-padding-x: .56rem;
    --bs-btn-padding-y: .34rem;
    --bs-btn-hover-color: black;
    --bs-btn-hover-bg: var(--color1lighter);
    --bs-btn-hover-border-color: var(--color1darker);
    /*--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);*/
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: #{lighten(var(--color1), 0%)};
    --bs-btn-active-border-color: #{shade-color(var(--color1), 20%)};
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 1);
    font-family: "montserrat", "Open Sans", "lato", sans-serif, serif;
}

.icon_purple {
    color: var(--color1);
}

/* ============================================================
   "Con Energy" redesign (flannel.ninja only)
   ============================================================
   Scoped via .con-energy (on <body>) and .con-energy-page (on
   specific pages' <main> -- currently the homepage and the article
   show page), both applied conditionally in
   app/views/layouts/public.html.erb. flannel.media never gets
   either class (GetDomain::BRAND_COLORS has no flannel.media entry),
   so none of this ever matches there, regardless of it living in
   this shared stylesheet.

   Where a rule above already exists for the thing being themed
   (headings, .subtitle, .nav_font, .text_container, .pull_quote,
   header/footer/body backgrounds, .btn-purple), this redefines that
   rule's own custom properties instead of writing a second, separate
   override elsewhere -- redefining --color2 itself covers
   header/footer/body in one line, since that variable is only ever
   used for their background. --color1 is NOT redefined the same
   way: it's shared by main's background, .btn-purple's border, AND
   .icon_purple's color, three things that want different treatments
   here, so those keep their own explicit overrides below instead. */
.con-energy {
    --con-bg: oklch(18% 0.025 300);
    --con-bg-raised: oklch(23% 0.026 300);
    --con-text: oklch(95% 0.01 90);
    --con-text-soft: oklch(78% 0.012 90);
    --con-line: oklch(32% 0.03 300);
    --con-accent-a: oklch(78% 0.19 350);
    --con-accent-b: oklch(70% 0.19 290);
    --con-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
    --con-body: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;

    --color2: var(--con-bg);

    --nav-font: var(--con-body);
    --nav-weight: 600;
    --nav-color: var(--con-text);
    --nav-hover-color: var(--con-accent-a);
}
.con-energy header, .con-energy footer {
    color: var(--con-text);
}

/* Nav: pieces with no pre-existing rule to fold into. */
.con-energy .logo_text { filter: brightness(0) invert(1); }
.con-energy .navbar-toggler-icon { filter: invert(1); }
.con-energy #searchInput {
    background-color: var(--con-bg-raised);
    border-color: var(--con-line);
    color: var(--con-text);
    font-family: var(--con-body);
}
.con-energy #searchInput::placeholder { color: var(--con-text-soft); }
/* Chrome/Safari paint an autofilled/history-selected input with their own
   UA background, ignoring background-color entirely -- this inset
   box-shadow trick is the standard workaround (it paints over the UA
   background because box-shadow isn't part of what :-webkit-autofill
   locks down), plus -webkit-text-fill-color since color alone is
   similarly ignored once :-webkit-autofill applies. */
.con-energy #searchInput:-webkit-autofill,
.con-energy #searchInput:-webkit-autofill:hover,
.con-energy #searchInput:-webkit-autofill:focus,
.con-energy #searchInput:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--con-bg-raised) inset;
    -webkit-text-fill-color: var(--con-text);
    caret-color: var(--con-text);
    transition: background-color 0s 600000s, color 0s 600000s;
}
.con-energy #searchSpinner { color: var(--con-text-soft); }
.con-energy #clearSearchButton { filter: invert(1); }
.con-energy .con-subscribe-pill {
    display: inline-flex;
    align-items: center;
    font-family: var(--con-display);
    font-weight: 800;
    font-size: 13px;
    color: oklch(15% 0 0) !important;
    background: var(--con-accent-a);
    padding: 8px 20px;
    border-radius: 999px;
    box-shadow: 0 0 20px oklch(78% 0.19 350 / 0.55);
    text-decoration: none;
    margin-left: 8px;
}
.con-energy .con-subscribe-pill:hover { background: var(--con-accent-b); color: oklch(15% 0 0) !important; }
/* The "members" dropdown menu (My Account/Offers/Sign Out) itself is
   still the default light Bootstrap style -- not reskinned dark here,
   that's a separate task -- but its items should still match the nav's
   Space Grotesk now that the "members" trigger above them does. */
.con-energy .dropdown-item { font-family: var(--con-body); }

/* Footer: link color has no pre-existing rule to fold into --
   .footer_links itself sets no color, its anchors do (explicitly),
   so this has to target the anchors directly rather than the
   container. */
.con-energy footer a { color: var(--con-text-soft) !important; }
.con-energy footer a:hover { color: var(--con-accent-a) !important; }

/* Header: search results dropdown, styled like the sidebar cards below. */
.con-energy #top_search_results {
    background: var(--con-bg-raised);
    border: 1px solid var(--con-line);
    border-radius: 16px;
    overflow: hidden;
}
.con-energy #top_search_results .list-group-item {
    background: transparent;
    border-color: var(--con-line);
    color: var(--con-text);
}
.con-energy #top_search_results .list-group-item-action:hover,
.con-energy #top_search_results .list-group-item-action:focus {
    background: var(--con-bg);
    color: var(--con-text);
}
.con-energy #top_search_results h3,
.con-energy #top_search_results h4 { color: var(--con-text); }
.con-energy #top_search_results .text-secondary { color: var(--con-text-soft) !important; }
.con-energy #top_search_results .btn-close { filter: invert(1); }
.con-energy #top_search_results .red { color: var(--con-accent-a) !important; }

/* The "subscribe to be notified" offcanvas that slides up from the
   bottom on every page (until dismissed/cookied) -- site-wide chrome
   like the header/footer above, not scoped to .con-energy-page. */
.con-energy #subscribe-thing {
    background-color: var(--con-bg-raised);
    color: var(--con-text);
    border-top: 1px solid var(--con-line);
}
/* The bare `*` rule up top (every element, incl. this popup's unclassed
   <p>/<a>/<button> children) directly matches every descendant, so it
   always wins over a font-family merely inherited from #subscribe-thing
   itself -- inheritance never gets a chance to apply. Matching the
   descendants explicitly here is what actually overrides it. */
.con-energy #subscribe-thing, .con-energy #subscribe-thing * {
    font-family: var(--con-body);
}
.con-energy #subscribe-thing .btn-close { filter: invert(1); }
.con-energy #subscribe-thing a.commonAnchor { color: var(--con-text-soft); }
.con-energy #subscribe-thing a.commonAnchor:hover { color: var(--con-accent-a); }
/* .btn-purple's base rule (a white button, from the site's original
   look) is only reskinned filled/purple under .con-energy-page --
   this popup lives outside <main> entirely, so it needs its own copy
   of that same treatment rather than staying the old white button. */
.con-energy #subscribe-thing .btn-purple {
    --bs-btn-font-weight: 800;
    --bs-btn-color: oklch(15% 0 0);
    --bs-btn-bg: var(--con-accent-b);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: oklch(15% 0 0);
    --bs-btn-hover-bg: var(--con-accent-a);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: oklch(15% 0 0);
    --bs-btn-active-bg: var(--con-accent-a);
    --bs-btn-active-border-color: transparent;
}

/* Site-wide flash/status banners: the dismissible flash partial
   (layouts/_flashes.html.erb) and the two JS-driven banners
   (#common_message_container, #common_spinner in the layout) all
   render as plain Bootstrap .alert-warning outside <main> -- same
   "redefine the rule's own custom properties" approach as the pieces
   above, since Bootstrap's .alert-warning is itself just a set of
   --bs-alert-* custom properties. */
.con-energy .alert-warning {
    --bs-alert-color: var(--con-text);
    --bs-alert-bg: var(--con-bg-raised);
    --bs-alert-border-color: var(--con-line);
}
.con-energy .alert-warning .btn-close { filter: invert(1); }

/* .con-energy-page: opt-in dark content area (main's own background
   stays var(--color1) sitewide -- only pages that add this class get
   the dark ground; see the layout for which ones currently do). The
   custom properties here are what let the shared rules above (h1-h5,
   .subtitle, .text_container, .pull_quote) pick up the theme without
   needing their own con-energy-specific copy. */
.con-energy-page {
    background-color: var(--con-bg);
    color: var(--con-text);
    font-family: var(--con-body);

    --heading-font: var(--con-display);
    --heading-weight: 800;
    --heading-color: var(--con-text);
    --subtitle-font: var(--con-body);
    --subtitle-weight: 600;
    --subtitle-color: var(--con-text-soft);
    --body-copy-font: var(--con-body);
    --pull-quote-bg: var(--con-bg-raised);
    --pull-quote-border: var(--con-line);
    --pull-quote-shadow: none;
    --pagination-color: var(--con-text);
    --pagination-border: var(--con-line);
    --pagination-active-bg: var(--con-bg-raised);
}

/* Homepage: hero + grid article cards (bespoke to this redesign, no
   legacy equivalent to fold into). */
.con-display { font-family: var(--con-display); font-weight: 800; letter-spacing: -0.01em; }
.con-hero-card, .con-grid-card {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 16 / 9;
}
.con-grid-card { aspect-ratio: 4 / 3; }
.con-hero-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to top, oklch(10% 0.02 300 / 0.92), transparent 55%);
    pointer-events: none;
}
.con-hero-copy, .con-grid-copy {
    position: absolute; left: 20px; right: 20px; bottom: 18px; color: var(--con-text);
}
.con-hero-copy h3 { font-size: clamp(26px, 4vw, 42px); line-height: 1.05; text-transform: uppercase; }
.con-grid-copy h4 { font-size: 22px; line-height: 1.1; text-transform: uppercase; }
.con-hero-subtitle {
    font-family: var(--con-body); font-size: 14px; color: var(--con-text-soft); margin-top: 6px;
}
.con-chip {
    display: inline-flex; align-items: center;
    font-family: var(--con-display); font-size: 11px; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 5px 12px; border-radius: 999px;
    background: var(--con-accent-a); color: oklch(15% 0 0) !important;
}
.con-load-more {
    display: inline-block;
    font-family: var(--con-display); font-weight: 800; font-size: 13px;
    color: oklch(15% 0 0) !important; background: var(--con-accent-b);
    padding: 10px 26px; border-radius: 999px;
    box-shadow: 0 0 24px oklch(70% 0.19 290 / 0.5);
    text-decoration: none;
}
.con-load-more:hover { background: var(--con-accent-a); color: oklch(15% 0 0) !important; }
/* .con-text-link/.con-cosplayer-name below keep their own color regardless
   of whether they're plain text or (as of the cosplayer-of-the-day history
   links) an anchor -- .con-energy-page a's higher-specificity color would
   otherwise win over these plain class selectors. */
.con-text-link { color: var(--con-text-soft) !important; font-family: var(--con-body); text-decoration: none; font-size: 14px; }
.con-text-link:hover { color: var(--con-accent-a); }

/* Homepage: sidebar cards (Now Playing / Cosplayer of the Day). */
.con-side-card {
    background: var(--con-bg-raised);
    border: 1px solid var(--con-line);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 24px;
    text-align: left;
}
.con-cosplayer-card { display: flex; gap: 16px; align-items: center; }
.con-cosplayer-photo {
    width: 96px; height: 120px; object-fit: cover; border-radius: 10px; flex-shrink: 0;
    transform: rotate(-3deg);
    box-shadow: 0 8px 20px oklch(10% 0 0 / 0.5);
}
.con-cosplayer-name { font-family: var(--con-display); font-size: 16px; font-weight: 800; margin: 8px 0 4px; color: var(--con-text) !important; }
.con-cosplayer-caption { font-family: var(--con-body); font-size: 13px; color: var(--con-text-soft); }
.con-cosplayer-photo-wrap {
    flex-shrink: 0;
    transform: rotate(-3deg);
    box-shadow: 0 8px 20px oklch(10% 0 0 / 0.5);
    border-radius: 10px;
    overflow: hidden;
    width: 96px;
}
.con-cosplayer-photo-wrap img { width: 100%; height: 120px; object-fit: cover; display: block; }
.con-cosplayer-name a { color: var(--con-accent-a) !important; }

/* Article page: a generic reskin of the Bootstrap components this
   page (and the turbo-frames it loads -- related articles, comments)
   is built from, rather than bespoke markup per section like the
   homepage's hero/grid cards. New content sections keep working
   without needing their own overrides here. */
.con-energy-page .bg-white {
    background-color: var(--con-bg-raised) !important;
}
.con-energy-page .text-secondary { color: var(--con-text-soft) !important; }
.con-energy-page a { color: var(--con-accent-a); }
.con-energy-page a:hover { color: var(--con-accent-b); }
.con-energy-page .border-bottom { border-color: var(--con-line) !important; }
.con-energy-page .shadow { box-shadow: none !important; }
.con-energy-page .card {
    background-color: var(--con-bg);
    border-color: var(--con-line);
    color: var(--con-text);
}
.con-energy-page .badge.text-bg-secondary {
    background-color: var(--con-bg) !important;
    color: var(--con-text) !important;
    border: 1px solid var(--con-line);
}
.con-energy-page .form-control {
    background-color: var(--con-bg);
    border-color: var(--con-line);
    color: var(--con-text);
}
.con-energy-page .form-control::placeholder { color: var(--con-text-soft); }
.con-energy-page .form-control:focus {
    background-color: var(--con-bg);
    color: var(--con-text);
    border-color: var(--con-accent-a);
    box-shadow: 0 0 0 0.25rem oklch(78% 0.19 350 / 0.25);
}
.con-energy-page .input-group-text {
    background-color: var(--con-bg-raised);
    border-color: var(--con-line);
    color: var(--con-text);
}
.con-energy-page .form-check-input {
    /* Not --con-bg: that's the same (or darker than) the page/card
       behind it, so an unchecked switch would barely read as a control
       at all -- --con-line gives it a visible neutral "off" track. */
    background-color: var(--con-line);
    border-color: var(--con-line);
}
.con-energy-page .form-check-input:checked {
    background-color: var(--con-accent-b);
    border-color: var(--con-accent-b);
}
.con-energy-page .form-check-label { color: var(--con-text); }
.con-energy-page .btn-light {
    --bs-btn-color: var(--con-text);
    --bs-btn-bg: var(--con-bg);
    --bs-btn-border-color: var(--con-line);
    --bs-btn-hover-color: var(--con-text);
    --bs-btn-hover-bg: var(--con-bg-raised);
    --bs-btn-hover-border-color: var(--con-line);
}
.con-energy-page .btn-secondary {
    --bs-btn-bg: var(--con-bg);
    --bs-btn-border-color: var(--con-line);
    --bs-btn-color: var(--con-text);
    --bs-btn-hover-bg: var(--con-line);
    --bs-btn-hover-color: var(--con-text);
}
.con-energy-page .btn-purple {
    --bs-btn-font-weight: 800;
    --bs-btn-color: oklch(15% 0 0);
    --bs-btn-bg: var(--con-accent-b);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: oklch(15% 0 0);
    --bs-btn-hover-bg: var(--con-accent-a);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: oklch(15% 0 0);
    --bs-btn-active-bg: var(--con-accent-a);
    --bs-btn-active-border-color: transparent;
    /* Same fix as .con-chip/.con-load-more/.con-cosplayer-name: when
       btn-purple is applied to a real <a> (not a <button>/<input>),
       .con-energy-page a's higher-specificity color wins over
       Bootstrap's own `.btn { color: var(--bs-btn-color) }`, since
       --bs-btn-color is just a custom property value fed into that
       rule, not the actual color declaration itself. */
    color: oklch(15% 0 0) !important;
}
.con-energy-page .btn-purple:hover, .con-energy-page .btn-purple:active { color: oklch(15% 0 0) !important; }
.con-energy-page .modal-content {
    background-color: var(--con-bg-raised);
    color: var(--con-text);
    border-color: var(--con-line);
}
.con-energy-page .modal-header,
.con-energy-page .modal-footer { border-color: var(--con-line); }
.con-energy-page .btn-close { filter: invert(1); }
.con-energy-page #show_after_scroll { color: var(--con-text); }
/* .text-black is a Bootstrap color utility (!important), used
   throughout the app to keep a link reading as plain text instead of
   the default link blue -- e.g. the related-articles titles and the
   convention-info close button on this page. Plain specificity can't
   beat !important, so this has to match it. */
.con-energy-page .text-black { color: var(--con-text-soft) !important; }
/* Same brightness(0) invert(1) trick as .logo_text/.navbar-toggler-icon
   above -- collapses a black-on-transparent icon to a white silhouette,
   for social icons (About page's archived-links row) that ship as a
   plain black glyph with no dark-background variant. */
.con-energy-page .con-icon-invert { filter: brightness(0) invert(1); }

#cosplayer_of_the_day a {

    img {
        width: 100%;
        height: 100%;
    }
}

/*
Source - https://stackoverflow.com/a/75133529
Posted by Arpita Patel, modified by community. See post 'Timeline' for change history
Retrieved 2025-12-20, License - CC BY-SA 4.0
*/

.modal-open .modal-backdrop {
    backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 1 !important;
}

/* font-weight/color have no fallback in var() on purpose: an unset custom
   property makes the whole declaration a no-op (falls through to the
   normal inherited/initial value) rather than needing an explicit
   "normal"/"inherit" placeholder -- these three properties are the ones
   a theme (e.g. .con-energy-page below) actually wants to change. */
h1, h2, h1 a, h3, h3 a, h4, h4 a, h5, h5 a, .card-title,
.title_font, .title_font a {
    font-family: var(--heading-font, "merriweather", "Open Sans", "lato", sans-serif, serif);
    font-weight: var(--heading-weight);
    color: var(--heading-color);
}

.nav_font {
    font-family: var(--nav-font, "montserrat", "Open Sans", "lato", sans-serif, serif);
    font-weight: var(--nav-weight);
    color: var(--nav-color);
}

/* Bootstrap's own active/open-dropdown rule is
   .navbar-nav .nav-link.active, .navbar-nav .nav-link.show (three
   classes each) -- a plain .nav_font.active/.show would lose that
   specificity fight, so this matches its shape rather than reaching
   for !important. .show is what the "members" dropdown toggle gets
   while its menu is open; :focus is what it keeps afterward -- closing
   a Bootstrap dropdown returns focus to its toggle for accessibility,
   and Bootstrap's own .nav-link:focus rule (same shape, same var as
   :hover) was the only one left setting a color at that point. */
.nav_font:hover,
.nav_font:focus,
.navbar-nav .nav_font.active,
.navbar-nav .nav_font.show {
    color: var(--nav-hover-color);
}

.subtitle {
    font-family: var(--subtitle-font, "crimsontext", "Open Sans", "lato", sans-serif, serif);
    font-size: 1.5rem;
    font-weight: var(--subtitle-weight);
    color: var(--subtitle-color);
}

.btn.active {
    -webkit-box-shadow: 0 0.25em 0.1em 0 #999999;
    -moz-box-shadow: 0 0.25em 0.1em 0 #999999;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
}

.card-text {
    font-size: smaller;
}

.field_with_errors {
    background-color: lightcoral;

    & span, & input, & textarea {
        border: 1px solid red;
        display: inline-block;
        vertical-align: top;
    }

    & + input[type=" checkbox "] {
        outline: 1px solid red;
    }

    select {
        border: 2px solid lightcoral;
    }
}

/* Rails wraps an errored field's label/input each in their own
   .field_with_errors span, making them grandchildren instead of direct
   children of .input-group -- Bootstrap's corner-squaring rules are all
   direct-child (>) selectors, so they stop matching and both ends render
   fully rounded. Reach through the wrapper the same way Bootstrap's own
   rule does. */
.input-group > .field_with_errors:not(:last-child) .input-group-text,
.input-group > .field_with_errors:not(:last-child) .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .field_with_errors:not(:first-child) .input-group-text,
.input-group > .field_with_errors:not(:first-child) .form-control {
    margin-left: calc(-1 * var(--bs-border-width));
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.floating_button {
    position: fixed;
    bottom: .5em;
    right: 1em;
    z-index: 101;
}

/* Fixed-position wrapper for a page's floating action buttons (scroll-to-
   top, View/Edit), constrained to the same width as the page's Bootstrap
   container instead of the full viewport. These breakpoints intentionally
   duplicate Bootstrap's own .container max-widths rather than using the
   .container class directly: Bootstrap's grid CSS includes ".row > *
   { max-width: 100% }", which matches any direct child of a .row regardless
   of its own class, and since that rule has the same specificity as
   ".container"'s breakpoint rules, wherever this wrapper happens to land as
   a direct child of a .row in a template, that rule silently wins and the
   buttons end up unconstrained at the viewport edge. Defining our own class
   here (loaded after bootstrap.min.css, so it wins any specificity tie on
   source order) makes this robust regardless of surrounding DOM structure. */
.floating_button_group {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 100%;
    pointer-events: none;
    z-index: 101;
}

@media (min-width: 576px) {
    .floating_button_group {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .floating_button_group {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .floating_button_group {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .floating_button_group {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .floating_button_group {
        max-width: 1320px;
    }
}

.fluid-img img {
/ / This auto-resizes the image . / / max-width: 100 %;
    height: auto;
    width: 100%;
}

.footer_links {
    /*font-size: 1rem;*/

    a, a:visited, a:hover {
        color: black;
        text-decoration: none;
    }
}


.haze {
    opacity: .5;
}

.image-container {
    .card {
        margin: 0 auto;
    }

    img {
        height: auto;
        max-width: 100%;
    }
}

.image_above_text_center {
    clear: both;
    text-align: center;
    overflow: hidden;

    .text_container {
        flex-basis: 100%;
        text-align: center;
    }
}

.image_left_text_wrap {
    clear: both;
    overflow: hidden;

    .card {
        overflow: hidden;
    }

    &.edit {
        display: flex;
        align-items: flex-start;
    }

    .image-container {
        float: left;
        order: 1;
        overflow: hidden;
        padding-right: .35em;

        &:not(.edit) {
            max-width: 50%;
        }
    }

    .text_container {
        order: 2;
        text-align: left;
        width: 100%;

        textarea {
            flex-grow: 1;
            width: 100%;
        }
    }
}

.image_only, .image_only_edit {
    display: inline-block;
    margin: 0 auto;
    vertical-align: top;
/ / width: 100 %;

    .image-container img {
        max-width: 100%;
        height: auto;
    }

    .text_container {
        display: none;
        overflow: hidden;
    }
}

.image_right_text_wrap {
    overflow: hidden;

    .card {
        overflow: hidden;
    }

    &.edit {
        display: flex;
        align-items: flex-start;
    }

    .image-container {
        float: right;
        order: 2;

        &:not(.edit) {
            max-width: 50%;
        }
    }

    .text_container {
        order: 1;
        text-align: left;
        resize: vertical;
        width: 100%;

        textarea {
            flex-grow: 1;
            width: 100%;
        }
    }
}

.img-click-to-enlarge {
    display: none;
}

.icon_black {
    color: black;
}

.page-item.prev {
    display: none;
}

.paginationTop, .paginationBottom {
    list-style: none;
    padding: 0;
    display: inline;
    float: none;
    width: 70%;
    margin: 0 auto;

    li {
        a {
            color: var(--pagination-color, black);
            margin: .2em;
            padding: 0.2em 0.5em;
            text-decoration: none;
        }

        display: inline-block;
        border: 1px solid var(--pagination-border, black);
        border-radius: .2em;

    }

    li.active {
        background-color: var(--pagination-active-bg, lightgray);
    }

}

main a {
    text-decoration: none;
}

.pull_quote {
    border-radius: 5px;
    box-shadow: var(--pull-quote-shadow, 0 0 6px 1px rgba(201, 201, 201, 1));
    background-color: var(--pull-quote-bg, white);
    border: 1px solid var(--pull-quote-border, #c0c0c0);
    font-family: var(--body-copy-font, "ebgaramond", "Open Sans", "lato", sans-serif, serif);
    font-size: 1.2rem;
    padding: .9rem;
    margin: .5em auto;

    & * {
        font-family: inherit;
    }
}

/* Make the nav bar centered on collapsed view. */

.navbar .navbar-collapse {
    text-align: center;
}

.red {
    color: var(--red);
}

#scroll_to_top_button {
    position: fixed;
    top: .5em;
    right: 1em;
    z-index: 101
}

.social_media_icons {
    text-align: center;
    float: left;
    padding-bottom: .7rem;
    padding-top: .5rem;
    margin: 0 .7rem;
    border-radius: 6px;
    border: 1px solid rgb(222, 226, 230);

    legend {
        color: black;
        font-size: 1rem;
    }
}

.social-share-button {
    text-align: center;

    .ssb-icon {
        height: 1.5rem;
        width: 1.5rem;
        background-size: 1.5rem 1.5rem;
    }
}

.sort.asc, .sort.desc {
    /*background-color: yellow;*/
}

.sort.asc::after {
    content: "\002B06";
    padding-left: 3px;
}

.sort.desc::after {
    content: "\002B07";
    padding-left: 3px
}

.show_text_container {
    white-space: pre-wrap;
}

.text_container {
    font-family: var(--body-copy-font, "ebgaramond", "Open Sans", "lato", sans-serif, serif);
    font-size: 1.2rem;
    text-align: left;
    padding: 0 .5rem 0 .5rem;

    & * {
        font-family: inherit;
        text-align: inherit;
        font-size: inherit;
        text-justify: inherit;
        white-space: inherit;
    }

    legend {
        margin-bottom: .25em;
    }

    & > h2 {
        line-height: 1.4em;
    }

    /* More specific than the sitewide h1-h5 rule above (this is
       .text_container > h1 etc., not a bare h1), so it needs the same
       --heading-font/-weight/-color hooks repeated here -- a theme that
       only redefined the tokens on the generic rule would otherwise lose
       to this one for any heading actually inside article content. */
    & > h1, & > h2, & > h3, & > h4, & > h1 a, & > h2 a, & > h3 a, & > h4 a {
        font-family: var(--heading-font, "merriweather", "Open Sans", "lato", sans-serif, serif);
        font-weight: var(--heading-weight);
        color: var(--heading-color);
        font-size: revert;
        margin-bottom: 0;
    }

    textarea {
        white-space: pre-wrap;
    }

    ul, ul li, ul li a {
        white-space: normal;
        text-align: left;
    }

    .show-youtube {
        font-family: "montserrat", "Open Sans", "lato", sans-serif, serif;
        font-size: 0.6em;
    }
}

@media (min-width: 768px) {


    :root {
        --red: red;
        --bs-body-font-size: 16px;
        --bs-nav-link-font-size: 1.2rem;

    }

    .form-control {
        font-size: 1rem;
    }

    .image_left_text_wrap.image-container, .image_right_text_wrap.image-container {
        width: auto;
    }

    .img-click-to-enlarge {
        display: block;
    }

    .image_only {
        max-width: 49%;

        .image-container img {
            width: 100%;
        }
    }

    .page-item.prev {
        display: list-item;
    }

    .pull_quote {
        width: calc(100% - 2em);
    }

    .rounded-md-3 {
        border-radius: .5rem;
    }

    .text_container {
        font-size: 1.1rem;
    }

    ul {
        columns: 2;
        -webkit-columns: 2;
        -moz-columns: 2;
    }
}

.rotate-text {
    transform: rotate(-5deg);
    background-color: white;
    opacity: 50%;
    transform-origin: center left;
}

/* Dim the article/content-block editor row when its hidden checkbox is
   checked -- driven directly off :checked instead of JS reading/writing
   inline opacity (see the eye-icon <label> next to these checkboxes).
   Scoped to the hidden checkbox specifically by id prefix -- .more_parent
   and .visibility_container also contain other unrelated checkboxes
   (nsfw, enable_comments, add_watermark, hide_image, ...), and a bare
   input[type=checkbox]:checked would dim the whole row based on any of
   those instead of the one it's actually meant to reflect. */
.more_parent:has(input[id^="article_hidden_"]:checked),
.visibility_container:has(input[id^="content_hidden_"]:checked) {
    opacity: 0.5;
}

/* Image-preview toggle icons (click to enlarge, watermark, cosplayer, hide
   image) -- replaces the old clickyThings/toggleCheckboxColor JS entirely.
   Each icon is now a <label for="..."> around the hidden checkbox, so the
   click-to-toggle is native; this just drives the icon's color off the
   checkbox's :checked state. Scoped to each field's own image_preview_*
   root container by id, so multiple content blocks on the same page (each
   with their own per-instance checkbox ids) don't affect each other's icon
   color. Substring match (not a prefix) since the id looks like
   "content_click_to_enlarge_5" for content blocks but plain
   "article_click_to_enlarge" (no numeric suffix) for the single article
   image, which only ever has one instance per page. */
[id^="image_preview_"]:has([id*="click_to_enlarge"]:checked) .icon_click_to_enlarge,
[id^="image_preview_"]:has([id*="add_watermark"]:checked) .icon_add_watermark,
[id^="image_preview_"]:has([id*="is_cosplayer"]:checked) .icon_is_cosplayer {
    color: var(--color1);
}

/* hide_image is the one reversed case: purple/unchecked means visible
   (matches the eye icon), checked means hidden -- so this one goes purple
   -> black instead of black -> purple like the others. */
[id^="image_preview_"]:has([id*="hide_image"]:checked) .icon_hide_image {
    color: black;
}

/* Autosave "Saved" status indicators (e.g. #flannelcclink_status): fades
   out a couple seconds after appearing, rather than staying up
   permanently, so its *reappearance* is a clear signal that a new save
   just happened -- not just that one happened at some point. Relies on
   the element being a genuinely new DOM node each time (rendered via
   turbo_stream.replace, not .update) so the animation restarts on every
   real save. */
.autosave-status-flash {
    animation: autosave-status-fade 2.5s forwards;
}

@keyframes autosave-status-fade {
    0% { opacity: 1; }
    60% { opacity: 1; }
    100% { opacity: 0; }
}

/* .save_button (an invisible submit button on every autosave-style form,
   f.button ..., style: 'opacity: 0; position: absolute') exists purely so
   pressing Enter in a text field has a submit-type element to trigger --
   it's never meant to be clicked directly. Without an explicit top/left,
   `position: absolute` alone doesn't move it: it stays at the spot it
   would have occupied in normal flow, which on some forms (e.g. admin
   articles' views-count/hidden-switch row) lands exactly on top of a real
   interactive control and silently swallows every click meant for that
   control instead. pointer-events: none lets real clicks pass through to
   whatever's visually there; Enter-triggered implicit submission doesn't
   depend on pointer interaction at all, so this doesn't affect that. */
.save_button {
    pointer-events: none;
}