/*
Theme Name: FujoWire v80
Theme URI: https://fujowire.com
Author: FujoWire
Author URI: https://fujowire.com
Description: BL News & Fujoshi Culture
Version: 10.9
License: GNU General Public License v2 or later
Text Domain: fujowire
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --pink-hot:   #F06BA0;
  --pink-light: #F9A8C9;
  --plum-dark:  #5C3A4A;
  --plum-mid:   #7A4E62;
  --mint:       #8ECFC4;
  --white:      #FFFFFF;
  --off-white:  #FDF7FA;
  --sidebar-head: #82384A;
  --ep-red:       #A01346;
  --card-body:    #FFF4F7;
  --card-border:  #F0DEE7;
  --border:     #EDD5E2;
  --border-mid: #D4A8C0;
  --text-main:  #2E1A24;
  --text-muted: #8A6070;
  --text-faint: #B899A8;
  --body-font:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif-font: 'Newsreader', Georgia, 'Times New Roman', serif;
  --max-width:  1140px;
}

body {
  font-family: var(--body-font);
  font-size: 14px;
  color: var(--text-main);
  background: #FFE6EC;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--pink-hot); }
img { display: block; max-width: 100%; height: auto; }

/* ── KILL WP BLOCK EDITOR BACKGROUND INJECTIONS ── */
.wp-block-post-content,
.entry-content,
.entry-header,
.post-content,
.site-main,
article.post,
article.page,
.hentry,
body.single article {
  background: transparent !important;
  background-color: transparent !important;
}

.wp-block-group.has-background,
.wp-block-cover.has-background,
.wp-block-columns.has-background,
p.has-background,
div.has-background,
section.has-background,
.has-pink-background-color,
.has-rose-background-color,
.has-vivid-red-background-color,
.has-pale-pink-background-color,
.has-vivid-pink-background-color {
  background-color: transparent !important;
}

/* ── HEADER ── */
#site-header {
  background: var(--white);
  border-bottom: 3px solid var(--pink-hot);
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 1px 6px rgba(240,107,160,0.10);
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 80px;
  gap: 32px;
}

.site-branding {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.site-branding a,
.site-branding .custom-logo-link {
  display: flex;
  align-items: center;
  line-height: 1;
}

.site-branding img,
.site-branding .custom-logo {
  height: 64px !important;
  width: auto !important;
  max-width: none !important;
  display: block !important;
}

/* ── MAIN NAV ── */
#main-navigation {
  display: flex;
  align-items: center;
  height: 80px;
  flex: 1;
}

#main-navigation ul {
  display: flex;
  align-items: center;
  list-style: none;
  height: 80px;
  gap: 0;
}

#main-navigation ul li {
  height: 100%;
  position: relative;
}

#main-navigation ul li a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 700;
  color: var(--plum-dark);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
  transition: color 0.15s, border-color 0.15s;
}

#main-navigation ul li a:hover,
#main-navigation ul li:hover > a {
  color: var(--pink-hot);
  border-bottom-color: var(--pink-hot);
}

#main-navigation ul li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: 5px;
  opacity: 0.6;
}

#main-navigation ul li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 2px solid var(--pink-hot);
  min-width: 175px;
  z-index: 300;
  height: auto;
  box-shadow: 0 4px 12px rgba(92,58,74,0.10);
}

#main-navigation ul li:hover ul { display: block; }

#main-navigation ul li ul li {
  height: auto;
  border-bottom: 1px solid var(--border);
}

#main-navigation ul li ul li:last-child { border-bottom: none; }

#main-navigation ul li ul li a {
  height: auto;
  padding: 10px 16px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: none;
  margin-bottom: 0;
  display: block;
}

#main-navigation ul li ul li a:hover {
  color: var(--pink-hot);
  background: var(--off-white);
  border-bottom-color: transparent;
}

.nav-search-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 10px;
  font-size: 18px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  height: 80px;
  margin-left: auto;
  transition: color 0.15s;
  flex-shrink: 0;
}

.nav-search-btn:hover { color: var(--pink-hot); }

.nav-darkmode-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 8px;
  font-size: 18px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  height: 80px;
  margin-left: auto;
  transition: color 0.15s;
  flex-shrink: 0;
}

.nav-darkmode-btn:hover { color: var(--pink-hot); }

/* Rose effects toggle (petals + cursor) — sits left of the moon button.
   Uses the rose emoji, so styling is opacity/filter based rather than
   color based (emoji glyphs ignore CSS color). It carries margin-left:auto
   so the rose/moon/search trio groups at the right edge of the header. */
.nav-fx-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 8px;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  height: 80px;
  margin-left: auto;
  transition: opacity 0.15s, filter 0.15s, transform 0.15s;
  flex-shrink: 0;
}

.nav-fx-btn:hover { transform: scale(1.12); }

/* Off state: dim and desaturate the rose so it reads as inactive.
   No background, no recolor — emoji-safe. */
.nav-fx-btn.fx-off {
  opacity: 0.4;
  filter: grayscale(1);
}

.nav-fx-btn.fx-off:hover {
  opacity: 0.65;
  filter: grayscale(0.6);
}

/* Now that nav-fx-btn owns margin-left:auto, the moon button no longer should */
.nav-fx-btn + .nav-darkmode-btn { margin-left: 0; }

/* Hamburger toggle button — hidden on desktop, shown on mobile */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 24px;
  color: var(--plum-dark);
  align-items: center;
  height: 80px;
  padding: 0 10px;
  flex-shrink: 0;
}

.mobile-menu-toggle:hover { color: var(--pink-hot); }

/* When darkmode button present, search button shouldn't also push left */
.nav-darkmode-btn + .nav-search-btn { margin-left: 0; }

/* Ko-fi support icon — a little coffee cup sitting with the rose/moon/
   search toggles, linking to the Ko-fi page. Icon-only, styled like the
   other toggles (muted, hot-pink on hover). Its margin-left:auto floats the
   whole toggle group to the right edge; the adjacent-sibling rule stops the
   rose button adding a SECOND auto, which was splitting the group with a gap. */
.nav-kofi-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  height: 80px;
  padding: 0 9px;
  color: var(--text-muted);
  transition: color 0.15s;
  flex-shrink: 0;
}
.nav-kofi-btn:hover { color: var(--pink-hot); }
.nav-kofi-btn + .nav-fx-btn { margin-left: 0; }

/* ── PAGE WRAPPER ── */
.page-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 20px 16px;
}

/* ── HERO GRID ── */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-bottom: 24px;
  height: 420px;
}

.hero-main {
  position: relative;
  overflow: hidden;
  height: 420px;
}

.hero-main .hero-thumb {
  position: absolute;
  inset: 0;
}

.hero-main .hero-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.hero-main::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 30%,
    rgba(46,26,36,0.55) 60%,
    rgba(46,26,36,0.92) 100%
  );
  pointer-events: none;
}

.hero-main-meta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 16px 16px;
  z-index: 2;
}

.hero-main-meta h2 {
  font-family: var(--serif-font);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  color: var(--pink-light);
}

.hero-main-meta h2 a { color: var(--pink-light); }
.hero-main-meta h2 a:hover { color: #ffffff; }
.hero-main-meta .meta-line { color: rgba(255,255,255,0.75); }

.hero-side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 420px;
}

.hero-side-item {
  position: relative;
  overflow: hidden;
  flex: 1;
}

.hero-side-item .hero-thumb {
  position: absolute;
  inset: 0;
}

.hero-side-item .hero-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.hero-side-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(46,26,36,0.5) 50%,
    rgba(46,26,36,0.88) 100%
  );
  pointer-events: none;
}

.hero-side-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 10px;
  z-index: 2;
}

.hero-side-content h3 {
  font-family: var(--serif-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.18;
  color: var(--pink-light);
}

.hero-side-content h3 a { color: var(--pink-light); }
.hero-side-content h3 a:hover { color: #ffffff; }
.hero-side-content .tags { margin-bottom: 3px; }

/* ── CATEGORY TAGS ── */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 5px;
}

.tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 6px;
  border-radius: 2px;
  background: var(--pink-hot);
  color: var(--white);
}

/* Category tag colors — co-occurring tags get contrasting colors */
.tag-news     { background: #7D9CA8; color: var(--white); }   /* teal-blue */
.tag-manga    { background: #F06BA0; color: var(--white); }   /* hot pink */
.tag-anime    { background: #8ECFC4; color: #2E5048; }        /* mint */
.tag-novel    { background: #B584A8; color: var(--white); }   /* dusty pink */
.tag-drama    { background: #F9A8C9; color: #7A2E50; }        /* baby pink */
.tag-game     { background: #7D9CA8; color: var(--white); }   /* teal-blue */
.tag-goods    { background: #F4C0D1; color: #8A3556; }        /* pastel pink */
.tag-fanworks { background: #8E5A7A; color: var(--white); }   /* mauve */
.tag-live     { background: #7A3B52; color: var(--white); }   /* wine */

/* When these co-occur, they need to contrast: */
/* Goods family: Figures / Goods / Merch / Preorders */
.tag-figures   { background: #8ECFC4; color: #2E5048; }       /* mint */
.tag-merch     { background: #B584A8; color: var(--white); }  /* dusty pink */
.tag-preorders { background: #7D9CA8; color: var(--white); }  /* teal-blue */
/* Adaptations distinct from Anime/News */
.tag-adaptations { background: #F9A8C9; color: #7A2E50; }     /* baby pink */
.tag-events      { background: #B584A8; color: var(--white); } /* dusty pink */
.tag-licensing   { background: #8E5A7A; color: var(--white); } /* mauve */
.tag-releases    { background: #8ECFC4; color: #2E5048; }     /* mint */
.tag-doujinshi   { background: #F4C0D1; color: #8A3556; }     /* pastel pink */

.meta-line {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 3px;
}

/* ── SECTION HEADING ── */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--plum-dark);
  padding-bottom: 6px;
  margin-bottom: 14px;
}

.section-head h2 {
  font-size: 13.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--plum-dark);
}

.section-head h2::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  background: var(--pink-hot);
  margin-right: 8px;
  vertical-align: -2px;
}

.section-head a {
  font-size: 11px;
  color: var(--pink-hot);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.section-head a:hover { text-decoration: underline; }

/* ── CONTENT + SIDEBAR ── */
.content-sidebar {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 28px;
  align-items: start;
}

/* ── NEWS LIST ── */
.news-list { list-style: none; }

.news-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.news-item:first-child { padding-top: 0; }

.news-item .news-thumb {
  height: 68px;
  overflow: hidden;
}

.news-item .news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.news-content h3 {
  font-family: var(--serif-font);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin-top: 5px;
}

.news-content h3 a { color: var(--plum-dark); }
.news-content h3 a:hover { color: var(--pink-hot); }

.category-section { margin-top: 28px; }

/* ── SIDEBAR ── */
.sidebar { display: flex; flex-direction: column; gap: 22px; }

.sidebar-block {}

.sidebar-block-head {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #ffffff;
  background: var(--sidebar-head);
  padding: 8px 12px;
  margin-bottom: 0;
  display: block;
}

/* Wrap content under each filled header in a bordered box */
.sidebar-block {
  border: 1px solid var(--card-border);
}

.sidebar-block .event-list,
.sidebar-block .comment-list,
.sidebar-block .releases-list {
  padding: 4px 12px;
  background: var(--card-body);
}

/* Widget body content (custom HTML, text widgets) gets blush box */
.sidebar-block .textwidget,
.sidebar-block .widget_text,
.sidebar-block > *:not(.sidebar-block-head):not(.popular-head):not(.freetalk-head):not(.doujinshi-head) {
  background: var(--card-body);
}

.sidebar-block .textwidget {
  padding: 10px 12px;
}

/* ── POPULAR POSTS ── */
.popular-list { list-style: none; }

.popular-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
}

.popular-item:last-child { border-bottom: none; }

.popular-item .pop-thumb {
  height: 54px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--plum-dark);
}

.popular-item .pop-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.popular-item span {
  font-family: var(--body-font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-main);
}

.popular-item span a { color: var(--text-main); }
.popular-item span a:hover { color: var(--pink-hot); }

/* Popular Posts — pink header */
/* Fujo Free Talk sidebar module */
.freetalk-block { border: 1px solid var(--card-border); }

.freetalk-head {
  font-family: var(--body-font);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #ffffff;
  background: var(--sidebar-head);
  padding: 8px 12px;
  display: block;
}

.freetalk-card {
  display: block;
  background: var(--card-body);
}

.freetalk-thumb {
  width: 100%;
  overflow: hidden;
}

.freetalk-thumb img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.25s;
}

.freetalk-card:hover .freetalk-thumb img { transform: scale(1.04); }

.freetalk-info { padding: 10px 12px; }

.freetalk-title {
  font-family: var(--serif-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.18;
  color: var(--plum-dark);
  margin-bottom: 5px;
}

.freetalk-card:hover .freetalk-title { color: var(--pink-hot); }

.freetalk-meta {
  font-size: 11px;
  font-weight: 600;
  color: var(--pink-hot);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.popular-head {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #ffffff;
  background: var(--sidebar-head);
  padding: 8px 12px;
  margin-bottom: 0;
  display: block;
}

.popular-block {
  border: 1px solid var(--card-border);
  margin-bottom: 0;
}

.popular-block .popular-list {
  padding: 0 12px;
  background: var(--card-body);
}

/* ── EVENTS / COMMENTS / RELEASES ── */
.event-list { list-style: none; }

.event-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.event-item:last-child { border-bottom: none; }
.event-date { font-weight: 700; color: var(--pink-hot); font-size: 11px; margin-bottom: 2px; }
.event-title { color: var(--text-main); line-height: 1.3; display: block; }
.event-title:hover { color: var(--pink-hot); }

.comment-list { list-style: none; }

.comment-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.comment-item:last-child { border-bottom: none; }
.comment-user { font-weight: 700; color: var(--pink-hot); }
.comment-on { color: var(--text-muted); margin-top: 1px; line-height: 1.3; }
.comment-on a:hover { color: var(--pink-hot); }
.comment-age { color: var(--text-faint); font-size: 11px; margin-top: 1px; }

.releases-list { list-style: none; }

.release-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}

.release-item:last-child { border-bottom: none; }
.release-title { font-size: 12px; font-weight: 600; }
.release-date  { font-size: 11px; color: var(--text-faint); white-space: nowrap; }

/* ── SINGLE ARTICLE ── */
.article-wrap {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 28px;
  align-items: start;
}

.breadcrumb {
  font-size: 12px;
  color: var(--text-faint);
  margin-bottom: 12px;
}

.breadcrumb a { color: var(--pink-hot); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { margin: 0 5px; }

.article-platform-tags { margin-bottom: 10px; }

.article-title {
  font-family: var(--serif-font);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
  color: var(--plum-dark);
}

.article-byline {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.article-byline .author { font-weight: 700; color: var(--pink-hot); }

.article-featured-img {
  width: 100%;
  margin-bottom: 18px;
}

.article-featured-img img {
  width: 100%;
  height: auto;
  display: block;
}

.article-featured-caption {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 6px;
  text-align: center;
}
:root[data-theme="dark"] .article-featured-caption {
  color: var(--text-muted);
}

.article-body {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-main);
}

.article-body p { margin-bottom: 16px; }
.article-body em { font-style: italic; }
.article-body strong { font-weight: 700; }

.article-body ol,
.article-body ul,
.page-content ol,
.page-content ul,
.entry-content ol,
.entry-content ul {
  padding-left: 1.6em;
  margin-bottom: 16px;
}

.article-body ol { list-style: decimal; }
.article-body ul { list-style: disc; }
.page-content ol { list-style: decimal; }
.page-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content ul { list-style: disc; }

.article-body li,
.page-content li,
.entry-content li {
  margin-bottom: 6px;
  line-height: 1.65;
}

.article-body blockquote {
  border-left: 3px solid var(--pink-hot);
  padding-left: 18px;
  margin: 20px 0;
  color: var(--text-muted);
  font-family: var(--serif-font);
  font-style: italic;
  font-size: 19px;
  line-height: 1.4;
}

.article-body a { color: var(--mint); text-decoration: underline; }

/* ── EMBEDS (YouTube, etc) — responsive, centered, full column width ── */
/* negative-ish top margin to counter the preceding paragraph's bottom margin */
.article-body .wp-block-embed,
.article-body figure.wp-block-embed {
  margin-top: -8px;
  margin-bottom: 20px;
  width: 100%;
}

/* inner wrapper has NO margin to avoid stacking */
.article-body .wp-block-embed__wrapper {
  margin: 0;
  width: 100%;
  position: relative;
}

/* 16:9 responsive iframe */
.article-body .wp-block-embed-youtube .wp-block-embed__wrapper,
.article-body .wp-embed-responsive .wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.article-body .wp-block-embed iframe,
.article-body .wp-block-embed-youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Fallback: any bare iframe in article body goes full width, 16:9 */
.article-body iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 20px auto;
  border: 0;
}

/* Prevent margin stacking handled via embed top margin compensation above */

/* WordPress alignment classes */
.article-body .aligncenter,
.article-body figure.aligncenter {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.article-body .alignleft {
  float: left;
  margin: 6px 20px 12px 0;
  max-width: 50%;
}

.article-body .alignright {
  float: right;
  margin: 6px 0 12px 20px;
  max-width: 50%;
}

.article-body .alignwide { width: 100%; }

.article-body figure:not(.wp-block-embed) {
  margin: 20px 0;
  text-align: center;
}

.article-body figure img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.article-body figcaption {
  font-size: 13px;
  color: var(--text-faint);
  text-align: center;
  margin-top: 6px;
  font-style: italic;
}

/* Columns block: kill the oversized gap that stacks below a column row.
   WordPress core gives the columns block its own bottom margin, and each
   figure inside carries an extra 20px, so they compound into a big gap.
   Match a normal paragraph's spacing instead. */
.article-body .wp-block-columns {
  margin-top: 20px;
  margin-bottom: 4px;
}
.article-body .wp-block-columns figure:not(.wp-block-embed) {
  margin: 0;
}
.article-body .wp-block-columns .wp-block-image {
  margin-bottom: 0;
}
/* Columns vertical alignment: the theme dequeues wp-block-library, which is
   where these classes are normally styled, so the editor's "Align middle"
   toggle needs them re-provided here. Covers the whole-row setting on
   .wp-block-columns and the per-column setting on .wp-block-column. */
.article-body .wp-block-columns.are-vertically-aligned-top    { align-items: flex-start; }
.article-body .wp-block-columns.are-vertically-aligned-center { align-items: center; }
.article-body .wp-block-columns.are-vertically-aligned-bottom { align-items: flex-end; }
.article-body .wp-block-column.is-vertically-aligned-top      { align-self: flex-start; }
.article-body .wp-block-column.is-vertically-aligned-center   { align-self: center; }
.article-body .wp-block-column.is-vertically-aligned-bottom   { align-self: flex-end; }
.article-body a:hover { color: var(--pink-hot); }

.article-footer-tags {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.article-footer-tags .tag {
  background: var(--off-white);
  color: var(--plum-dark);
  border: 1px solid var(--border-mid);
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 3px;
}

.article-footer-tags .tag:hover { background: var(--border); }

/* ── COMMENTS ── */
.comments-area {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 2px solid var(--plum-dark);
}

.comments-title {
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--plum-dark);
  margin-bottom: 20px;
}

.comment-list-wp { list-style: none; }

.comment-list-wp .comment {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.comment-list-wp .comment:last-child { border-bottom: none; }

/* Avatar + body layout */
.comment-body-wrap {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: start;
}

.comment-avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: block;
  background: var(--border);
}

.comment-main { min-width: 0; }

.comment-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.comment-author-name { font-weight: 700; color: var(--pink-hot); font-size: 15px; }
.comment-meta-date { font-size: 12px; color: var(--text-faint); }
.comment-content p { font-size: 15px; line-height: 1.65; color: var(--text-main); margin-bottom: 8px; }

/* nested replies indent */
.comment-list-wp .children {
  list-style: none;
  margin-top: 14px;
  margin-left: 24px;
  padding-left: 16px;
  border-left: 2px solid var(--border);
}

.comment-list-wp .children .comment { padding: 12px 0; }

.comment-reply-wrap { margin-top: 4px; }

.comment-reply-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--pink-hot);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display: inline-block;
}

.comment-respond { margin-top: 28px; }

.comment-reply-title {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--plum-dark);
  margin-bottom: 16px;
}

.comment-form label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--plum-dark);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 9px 12px;
  font-size: 13px;
  font-family: var(--body-font);
  border: 1px solid var(--border-mid);
  background: var(--white);
  color: var(--text-main);
  border-radius: 3px;
  margin-bottom: 14px;
  transition: border-color 0.15s;
}

.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--pink-hot);
}

.comment-form textarea { height: 100px; resize: vertical; }

.comment-form input[type="submit"] {
  background: var(--pink-hot);
  color: var(--white);
  border: none;
  padding: 10px 24px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s;
}

.comment-form input[type="submit"]:hover { background: var(--plum-mid); }

/* ── ARCHIVE ── */
.archive-header { margin-bottom: 20px; }

.archive-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--plum-dark);
  border-bottom: 2px solid var(--plum-dark);
  padding-bottom: 8px;
}

.archive-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 20px;
  background: var(--pink-hot);
  margin-right: 10px;
  vertical-align: -3px;
}

/* ── PAGINATION ── */
.pagination {
  margin-top: 24px;
  display: flex;
  gap: 6px;
  align-items: center;
}

.pagination a,
.pagination span {
  display: inline-block;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--border-mid);
  border-radius: 3px;
  color: var(--plum-dark);
  background: var(--white);
  transition: background 0.15s, color 0.15s;
}

.pagination a:hover { background: var(--pink-hot); color: var(--white); border-color: var(--pink-hot); }
.pagination .current { background: var(--pink-hot); color: var(--white); border-color: var(--pink-hot); }

/* ── SEARCH ── */
.search-form { display: flex; gap: 0; margin-bottom: 20px; }

.search-form input[type="search"] {
  flex: 1;
  padding: 9px 12px;
  font-size: 13px;
  border: 1px solid var(--border-mid);
  border-right: none;
  background: var(--white);
  color: var(--text-main);
  border-radius: 3px 0 0 3px;
}

.search-form input[type="search"]:focus {
  outline: none;
  border-color: var(--pink-hot);
}

.search-form button {
  padding: 9px 16px;
  background: var(--pink-hot);
  color: var(--white);
  border: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 0 3px 3px 0;
  transition: background 0.15s;
}

.search-form button:hover { background: var(--plum-mid); }

/* ── NO THUMB FALLBACK ── */
.no-thumb {
  background: var(--plum-dark);
  width: 100%;
  height: 100%;
}

/* ── FOOTER ── */
#site-footer {
  background: #3D2232;
  border-top: 2px solid var(--pink-hot);
  color: #8A6070;
  font-size: 12px;
  margin-top: 40px;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px 16px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding-bottom: 14px;
}

.footer-nav li a {
  color: #8A6070;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 4px 14px 4px 0;
  margin-right: 14px;
  border-right: 1px solid rgba(255,255,255,0.07);
  display: inline-block;
}

.footer-nav li:last-child a { border-right: none; }
.footer-nav li a:hover { color: var(--pink-light); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-copy { color: #5C3A4A; line-height: 1.6; }
.footer-socials { display: flex; gap: 12px; }

.footer-socials a {
  color: #6A4050;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.footer-socials a:hover { color: var(--pink-light); }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; height: auto; }
  .hero-main { height: 280px; }
  .hero-side {
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 2px;
  }
  .hero-side-item { min-height: 140px; flex: none; }
  .content-sidebar { grid-template-columns: 1fr; }
  .article-wrap { grid-template-columns: 1fr; }
  .sidebar {
    display: block;
    margin-top: 32px;
  }
  .sidebar .sidebar-block,
  .sidebar .popular-block,
  .sidebar .freetalk-block { margin-bottom: 20px; }
  .header-inner { height: 64px; }
  .site-branding img,
  .site-branding .custom-logo { height: 48px !important; }
  .nav-search-btn,
  .nav-fx-btn,
  .nav-darkmode-btn { height: 64px; }
}

@media (max-width: 900px) {
  .news-item { grid-template-columns: 90px 1fr; }

  /* push hamburger to the right, after dark/search buttons */
  .header-inner { gap: 0; }
  .site-branding { margin-right: auto; }
  .mobile-menu-toggle { display: flex !important; order: 5; }
  .nav-kofi-btn { order: 1; margin-left: 0; height: 64px; padding: 0 8px; }
  .nav-fx-btn { order: 2; margin-left: 0; }
  .nav-darkmode-btn { order: 3; margin-left: 0; }
  .nav-search-btn { order: 4; }

  /* Hide desktop inline nav, convert to dropdown panel */
  #main-navigation {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--white);
    border-bottom: 2px solid var(--pink-hot);
    display: none;
    flex-direction: column;
    box-shadow: 0 6px 12px rgba(92,58,74,0.15);
    z-index: 250;
  }

  #main-navigation.mobile-open { display: flex; }

  #main-navigation ul {
    flex-direction: column;
    height: auto;
    width: 100%;
    align-items: stretch;
  }

  #main-navigation ul li {
    height: auto;
    width: 100%;
    border-bottom: 1px solid var(--border);
  }

  #main-navigation ul li a {
    height: auto;
    padding: 12px 18px;
    border-bottom: none;
    margin-bottom: 0;
    width: 100%;
  }

  /* Submenus: always visible, indented, in mobile */
  #main-navigation ul li ul {
    display: block;
    position: static;
    border: none;
    border-top: none;
    box-shadow: none;
    min-width: 0;
    background: var(--off-white);
  }

  #main-navigation ul li ul li a {
    padding: 10px 32px;
    font-size: 12px;
  }

  /* hide caret on mobile since submenus always show */
  #main-navigation ul li.menu-item-has-children > a::after { display: none; }
}

/* ════════════════════════════════
   DARK MODE — PLUM
════════════════════════════════ */
:root[data-theme="dark"],
body[data-theme="dark"] {
  --off-white:  #241019;   /* page bg — deep plum */
  --white:      #2E1A24;   /* card/surface bg */
  --border:     #4A2E3C;   /* soft plum border */
  --border-mid: #6A4255;
  --text-main:  #F5E8EF;   /* near-white text */
  --text-muted: #C99FB3;
  --text-faint: #9A7286;
}

body[data-theme="dark"] {
  background: #241019;
  color: #F5E8EF;
}

/* Header in dark mode */
:root[data-theme="dark"] #site-header {
  background: #2E1A24;
  border-bottom-color: var(--pink-hot);
  box-shadow: 0 1px 6px rgba(0,0,0,0.3);
}

/* ============================================================
   ANNOUNCEMENT MARQUEE — single-sentence slow scroll
   One message scrolls right-to-left with space around it.
   Transparent fill, dashed mint border, VT323 pixel font.
   Width matches the hero; gap below closed via body.has-marquee.
   ============================================================ */
.fw-marquee-strip {
  background: transparent;
  padding: 6px 0 0;
}

/* Constrain to the same width as the hero / page content */
.fw-marquee-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px;
}

.fw-marquee {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  border: 1.5px dashed #5FB3A4;   /* deeper mint for light mode */
  border-radius: 4px;
  padding: 1px 0;
  min-height: 20px;
  display: flex;
  align-items: center;            /* vertically center the scrolling text */
}

/* Single message. Starts just off the right edge (padding-left:100%)
   and scrolls fully off the left. One sentence on screen at a time,
   with empty space before it re-enters. */
.fw-marquee-item {
  display: inline-block;
  flex: none;
  padding-left: 100%;
  font-family: 'VT323', monospace;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.4px;
  color: #2E8576;                 /* deeper mint text, light mode */
  white-space: nowrap;
  animation: fw-marquee-scroll 24s linear infinite;
  will-change: transform;
}

.fw-marquee:hover .fw-marquee-item { animation-play-state: paused; }

@keyframes fw-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.fw-marquee-date { color: var(--pink-hot); }
.fw-marquee-sep  { color: #5FB3A4; }
.fw-marquee-sym  { color: var(--pink-light); }  /* fallback; inline color from Customizer */

/* Dark mode — lighter mint so it reads on the plum header */
:root[data-theme="dark"] .fw-marquee { border-color: var(--mint); }
:root[data-theme="dark"] .fw-marquee-item { color: var(--mint); }
:root[data-theme="dark"] .fw-marquee-sep { color: var(--mint); }
:root[data-theme="dark"] .fw-marquee-date { color: var(--pink-light); }

/* Close the gap between the bar and the hero ONLY when the bar exists.
   This removes the page-wrap's top padding without negative margins. */
body.has-marquee .page-wrap { padding-top: 4px; }

/* Reduced motion: hold the message still, centered, no scroll */
@media (prefers-reduced-motion: reduce) {
  .fw-marquee-item {
    animation: none;
    padding-left: 0;
    display: block;
    width: 100%;
    text-align: center;
    padding: 1px 8px;
  }
}

/* Mobile: smaller text + tighter padding */
@media (max-width: 600px) {
  .fw-marquee-inner { padding: 0 10px; }
  .fw-marquee-item { font-size: 8px; }
}

:root[data-theme="dark"] #main-navigation ul li a { color: #E8C9D8; }
:root[data-theme="dark"] #main-navigation ul li a:hover,
:root[data-theme="dark"] #main-navigation ul li:hover > a { color: var(--pink-hot); }

:root[data-theme="dark"] #main-navigation ul li ul {
  background: #2E1A24;
  border-color: #4A2E3C;
}
:root[data-theme="dark"] #main-navigation ul li ul li { border-bottom-color: #4A2E3C; }
:root[data-theme="dark"] #main-navigation ul li ul li a { color: #C99FB3; }
:root[data-theme="dark"] #main-navigation ul li ul li a:hover {
  color: var(--pink-hot);
  background: #3A2230;
}

:root[data-theme="dark"] #header-search {
  background: #2E1A24 !important;
  border-top-color: #4A2E3C !important;
}

/* Section heads */
:root[data-theme="dark"] .section-head { border-bottom-color: var(--pink-light); }
:root[data-theme="dark"] .section-head h2 { color: var(--pink-light); }
:root[data-theme="dark"] .sidebar-block-head,
body[data-theme="dark"] .sidebar-block-head,
:root[data-theme="dark"] .popular-head,
body[data-theme="dark"] .popular-head,
:root[data-theme="dark"] .freetalk-head,
body[data-theme="dark"] .freetalk-head,
:root[data-theme="dark"] .doujinshi-head,
body[data-theme="dark"] .doujinshi-head {
  color: #ffffff;
  background: #C76B92;
}
:root[data-theme="dark"] .freetalk-card,
body[data-theme="dark"] .freetalk-card,
:root[data-theme="dark"] .popular-block .popular-list,
body[data-theme="dark"] .popular-block .popular-list {
  background: #2E1A24;
}
:root[data-theme="dark"] .sidebar-block,
body[data-theme="dark"] .sidebar-block { border-color: #4A2E3C; }
:root[data-theme="dark"] .sidebar-block .event-list,
:root[data-theme="dark"] .sidebar-block .comment-list,
:root[data-theme="dark"] .sidebar-block .releases-list,
:root[data-theme="dark"] .sidebar-block .textwidget,
:root[data-theme="dark"] .sidebar-block > *:not(.sidebar-block-head):not(.popular-head):not(.freetalk-head):not(.doujinshi-head),
:root[data-theme="dark"] .freetalk-card,
:root[data-theme="dark"] .popular-block .popular-list,
body[data-theme="dark"] .sidebar-block .event-list,
body[data-theme="dark"] .sidebar-block .comment-list,
body[data-theme="dark"] .sidebar-block .releases-list,
body[data-theme="dark"] .sidebar-block .textwidget,
body[data-theme="dark"] .sidebar-block > *:not(.sidebar-block-head):not(.popular-head):not(.freetalk-head):not(.doujinshi-head),
body[data-theme="dark"] .freetalk-card,
body[data-theme="dark"] .popular-block .popular-list {
  background: #2E1A24;
}
:root[data-theme="dark"] .archive-title {
  color: var(--pink-light);
  border-bottom-color: var(--pink-light);
}

/* News items / cards */
:root[data-theme="dark"] .news-item { border-bottom-color: #4A2E3C; }
:root[data-theme="dark"] .news-content h3 a { color: var(--text-main); }
:root[data-theme="dark"] .news-content h3 a:hover,
body[data-theme="dark"] .news-content h3 a:hover { color: var(--pink-hot); }
:root[data-theme="dark"] .hero-grid { background: #4A2E3C; border-color: #4A2E3C; }

/* Popular posts block */
:root[data-theme="dark"] .popular-block { border-color: #4A2E3C; }
:root[data-theme="dark"] .popular-block .popular-list { background: #2E1A24; }
:root[data-theme="dark"] .popular-item { border-bottom-color: #4A2E3C; }
:root[data-theme="dark"] .popular-item span a { color: var(--text-main); }
:root[data-theme="dark"] .popular-item span a:hover,
body[data-theme="dark"] .popular-item span a:hover { color: var(--pink-hot); }

/* Events / comments / releases */
:root[data-theme="dark"] .event-item,
:root[data-theme="dark"] .comment-item,
:root[data-theme="dark"] .release-item { border-bottom-color: #4A2E3C; }
:root[data-theme="dark"] .event-title { color: var(--text-main); }
:root[data-theme="dark"] .event-title:hover,
body[data-theme="dark"] .event-title:hover { color: var(--pink-hot); }
:root[data-theme="dark"] .comment-on a,
body[data-theme="dark"] .comment-on a { color: var(--text-main); }
:root[data-theme="dark"] .comment-on a:hover,
body[data-theme="dark"] .comment-on a:hover { color: var(--pink-hot); }

/* Article */
:root[data-theme="dark"] .article-title { color: var(--pink-light); }
:root[data-theme="dark"] .article-byline { border-bottom-color: #4A2E3C; }
:root[data-theme="dark"] .article-body { color: var(--text-main); }
:root[data-theme="dark"] .article-body blockquote { color: var(--text-muted); }
:root[data-theme="dark"] .article-footer-tags { border-top-color: #4A2E3C; }
:root[data-theme="dark"] .article-footer-tags .tag {
  background: #3A2230;
  color: var(--pink-light);
  border-color: #4A2E3C;
}

/* Comments area */
:root[data-theme="dark"] .comments-area { border-top-color: var(--pink-light); }
:root[data-theme="dark"] .comments-title,
:root[data-theme="dark"] .comment-reply-title { color: var(--pink-light); }
:root[data-theme="dark"] .comment-list-wp .comment { border-bottom-color: #4A2E3C; }
:root[data-theme="dark"] .comment-form input[type="text"],
:root[data-theme="dark"] .comment-form input[type="email"],
:root[data-theme="dark"] .comment-form input[type="url"],
:root[data-theme="dark"] .comment-form textarea {
  background: #2E1A24;
  border-color: #4A2E3C;
  color: var(--text-main);
}
:root[data-theme="dark"] .comment-form label { color: var(--pink-light); }

/* Search form */
:root[data-theme="dark"] .search-form input[type="search"] {
  background: #2E1A24;
  border-color: #4A2E3C;
  color: var(--text-main);
}

/* Pagination */
:root[data-theme="dark"] .pagination a,
:root[data-theme="dark"] .pagination span {
  background: #2E1A24;
  border-color: #4A2E3C;
  color: var(--text-main);
}

/* Breadcrumb */
:root[data-theme="dark"] .breadcrumb { color: var(--text-faint); }

/* ── DARK MODE: keep white-on-color text actually white ── */
:root[data-theme="dark"] .tag,
body[data-theme="dark"] .tag {
  color: #ffffff;
}
/* tags with dark text on light backgrounds keep their dark text */
:root[data-theme="dark"] .tag-anime,
body[data-theme="dark"] .tag-anime { color: #2E5048; }
:root[data-theme="dark"] .tag-drama,
body[data-theme="dark"] .tag-drama { color: #7A2E50; }
:root[data-theme="dark"] .tag-goods,
body[data-theme="dark"] .tag-goods { color: #8A3556; }
:root[data-theme="dark"] .tag-figures,
body[data-theme="dark"] .tag-figures { color: #2E5048; }
:root[data-theme="dark"] .tag-adaptations,
body[data-theme="dark"] .tag-adaptations { color: #7A2E50; }
:root[data-theme="dark"] .tag-releases,
body[data-theme="dark"] .tag-releases { color: #2E5048; }
:root[data-theme="dark"] .tag-doujinshi,
body[data-theme="dark"] .tag-doujinshi { color: #8A3556; }

/* Popular posts header + pagination keep white text in dark mode */
:root[data-theme="dark"] .popular-head,
body[data-theme="dark"] .popular-head { color: #ffffff; }
:root[data-theme="dark"] .pagination a:hover,
:root[data-theme="dark"] .pagination .current,
body[data-theme="dark"] .pagination a:hover,
body[data-theme="dark"] .pagination .current { color: #ffffff; }

/* Comment submit + search button keep white text */
:root[data-theme="dark"] .comment-form input[type="submit"],
:root[data-theme="dark"] .search-form button,
body[data-theme="dark"] .comment-form input[type="submit"],
body[data-theme="dark"] .search-form button { color: #ffffff; }

/* Mobile menu in dark mode */
@media (max-width: 900px) {
  :root[data-theme="dark"] #main-navigation,
  body[data-theme="dark"] #main-navigation { background: #2E1A24; }
  :root[data-theme="dark"] #main-navigation ul li,
  body[data-theme="dark"] #main-navigation ul li { border-bottom-color: #4A2E3C; }
  :root[data-theme="dark"] #main-navigation ul li ul,
  body[data-theme="dark"] #main-navigation ul li ul { background: #241019; }
  :root[data-theme="dark"] .mobile-menu-toggle,
  body[data-theme="dark"] .mobile-menu-toggle { color: var(--pink-light); }
}

/* Fujo Free Talk module — dark mode */
:root[data-theme="dark"] .freetalk-block,
body[data-theme="dark"] .freetalk-block { border-color: #4A2E3C; }
:root[data-theme="dark"] .freetalk-card,
body[data-theme="dark"] .freetalk-card { background: #2E1A24; }
:root[data-theme="dark"] .freetalk-title,
body[data-theme="dark"] .freetalk-title { color: var(--text-main); }
:root[data-theme="dark"] .freetalk-card:hover .freetalk-title,
body[data-theme="dark"] .freetalk-card:hover .freetalk-title { color: var(--pink-hot); }

/* ============================================================
   DOUJINSHI — Sidebar block
   ============================================================ */

.doujinshi-block { }

.doujinshi-head {
  background: var(--sidebar-head);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 7px 12px;
}

.doujinshi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 6px;
  padding: 10px;
  background: var(--card-body);
}

.doujinshi-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  position: relative;
}

.doujinshi-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 13;
  overflow: hidden;
  border-radius: 3px;
  background: var(--border);
  flex-shrink: 0;
}

.doujinshi-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: opacity 0.15s;
}

.doujinshi-card:hover .doujinshi-cover img { opacity: 0.85; }

.doujinshi-no-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.doujinshi-no-cover span {
  font-size: 9px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.3;
}

.doujinshi-r18 {
  position: absolute;
  top: 3px;
  left: 3px;
  background: #C0392B;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 2px;
  letter-spacing: 0.3px;
}

.doujinshi-meta {
  margin-top: 3px;
}

.doujinshi-fandom {
  font-size: 8px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.doujinshi-pairing {
  font-size: 8px;
  color: var(--pink-hot);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.doujinshi-more {
  display: block;
  text-align: center;
  font-size: 11px;
  color: var(--pink-hot);
  padding: 7px 10px;
  background: var(--card-body);
  border-top: 1px solid var(--border);
  text-decoration: none;
  font-weight: 600;
}

.doujinshi-more:hover { color: var(--plum-dark); }

/* ============================================================
   DOUJINSHI — Archive/Catalogue page
   ============================================================ */

.doujinshi-archive-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

.doujinshi-archive-header {
  margin-bottom: 24px;
  border-bottom: 2px solid var(--plum-dark);
  padding-bottom: 12px;
}

.doujinshi-archive-title {
  font-family: var(--serif-font);
  font-size: 26px;
  color: var(--text-main);
  margin-bottom: 6px;
}

.doujinshi-archive-desc {
  font-size: 13px;
  color: var(--text-muted);
}

.doujinshi-catalogue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 20px;
}

.dj-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
  transition: box-shadow 0.15s;
}

.dj-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

.dj-card-cover-link { display: block; }

.dj-card-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 13;
  overflow: hidden;
  background: var(--border);
}

.dj-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.15s;
}

.dj-card:hover .dj-card-cover img { opacity: 0.9; }

.dj-no-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.dj-no-cover-text {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
}

.dj-r18-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  background: #C0392B;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 2px;
  letter-spacing: 0.3px;
}

.dj-card-info {
  padding: 8px 10px 10px;
}

.dj-card-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.3;
  margin-bottom: 3px;
}

.dj-card-title a {
  color: inherit;
  text-decoration: none;
}

.dj-card-title a:hover { color: var(--pink-hot); }

.dj-card-circle {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.dj-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 5px;
}

.dj-tag {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 3px;
}

.dj-fandom {
  background: var(--border);
  color: var(--text-muted);
}

.dj-pairing {
  background: #fce8f0;
  color: var(--pink-hot);
}

:root[data-theme="dark"] .dj-pairing {
  background: #3A1828;
  color: var(--pink-hot);
}

.dj-card-note {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 6px;
}

.dj-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  justify-content: space-between;
}

.dj-card-meta-right {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.dj-meta-item {
  font-size: 10px;
  color: var(--text-faint);
}

.dj-buy-btn {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--pink-hot);
  padding: 3px 8px;
  border-radius: 3px;
  text-decoration: none;
  margin-left: auto;
  transition: background 0.15s;
}

.dj-buy-btn:hover { background: var(--plum-mid); }

.doujinshi-empty {
  color: var(--text-muted);
  font-size: 14px;
  padding: 40px 0;
  text-align: center;
}

/* Dark mode adjustments */
:root[data-theme="dark"] .doujinshi-grid { background: #2E1A24; }
:root[data-theme="dark"] .doujinshi-more { background: #2E1A24; border-top-color: #4A2E3C; }
:root[data-theme="dark"] .doujinshi-more:hover { color: var(--pink-light); }
:root[data-theme="dark"] .dj-card { background: #2E1A24; border-color: #4A2E3C; }
:root[data-theme="dark"] .dj-card-cover { background: #3A2230; }
:root[data-theme="dark"] .dj-fandom { background: #3A2230; }

/* Doujinshi social icons */
.dj-card-circle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.dj-circle-name {
  flex: 1;
}

.dj-circle-socials {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.dj-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.dj-social-icon:hover { opacity: 0.75; }

.dj-social-x {
  background: #000;
  color: #fff;
}

.dj-social-pixiv {
  background: #0096fa;
  color: #fff;
}

:root[data-theme="dark"] .dj-social-x { background: #1a1a1a; }

/* ============================================================
   UPCOMING ENGLISH RELEASES — Homepage Strip
   ============================================================ */

.upcoming-strip-wrap {
  margin: 0 0 24px 0;
  background: var(--card-body);
  border-bottom: 1px solid var(--border);
}

.upcoming-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 8px;
  background: var(--sidebar-head);
  border-bottom: 1px solid var(--border);
}

.upcoming-strip-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffffff;
}

.upcoming-strip-more {
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  opacity: 0.85;
}

.upcoming-strip-more:hover { opacity: 1; }

.upcoming-strip-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.upcoming-strip-scroll::-webkit-scrollbar { height: 4px; }
.upcoming-strip-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.upcoming-strip-inner {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  width: max-content;
}

.upcoming-card {
  display: flex;
  flex-direction: column;
  width: 110px;
  flex-shrink: 0;
  text-decoration: none;
}

.upcoming-card.upcoming-past .upcoming-cover {
  border: 2px solid var(--mint);
}

.upcoming-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 13;
  overflow: hidden;
  border-radius: 4px;
  background: var(--border);
  border: 2px solid transparent;
  transition: border-color 0.15s;
}

.upcoming-card:hover .upcoming-cover { border-color: var(--pink-hot); }

.upcoming-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.upcoming-badge {
  position: absolute;
  font-size: 8px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 2px;
  letter-spacing: 0.3px;
  line-height: 1.4;
}

.upcoming-out-now {
  top: 4px;
  right: 4px;
  background: var(--mint);
  color: #2E5048;
}
/* On the small homepage strip, the top-right corner holds the Editor's Pick
   heart, so keep Out Now on the left there (it clears the heart, and the
   format tag sits at bottom-left, so top-left is free). */
.upcoming-cover .upcoming-out-now {
  left: 4px;
  right: auto;
}

.upcoming-format {
  bottom: 4px;
  left: 4px;
  background: rgba(0,0,0,0.65);
  color: #fff;
}

/* ============================================================
   EDITOR'S PICK — ribbon (archive) + corner heart (strip)
   ============================================================ */
/* Ribbon: diagonal banner across the top-left of the archive cover */
.upcoming-ep-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  width: 96px;
  height: 96px;
  overflow: hidden;
  z-index: 3;
  pointer-events: none;
}
.upcoming-ep-ribbon span {
  position: absolute;
  display: block;
  width: 132px;
  padding: 3px 0;
  top: 22px;
  left: -34px;
  transform: rotate(-45deg);
  background: var(--ep-red);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

/* Corner heart: compact mark for the small homepage strip cards */
.upcoming-ep-heart {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ep-red);
  color: #fff;
  font-size: 10px;
  line-height: 18px;         /* match height = vertical centering */
  text-align: center;
  padding-left: 1px;         /* nudge glyph a tad right within the circle */
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.upcoming-card-info {
  margin-top: 5px;
  /* Fixed height so one long title can't stretch the whole row.
     Fits: 2 lines title + date + 1 line publisher. */
  height: 56px;
  overflow: hidden;
}

.upcoming-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.3;
  margin-bottom: 2px;
  /* clamp to 2 lines, ellipsis if longer */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.upcoming-volume {
  font-weight: 400;
  color: var(--text-muted);
}

.upcoming-date {
  font-size: 10px;
  color: var(--pink-hot);
  font-weight: 600;
}

.upcoming-date-past {
  color: var(--text-faint);
}

.upcoming-publisher {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 1px;
  /* clamp to 1 line so a long publisher name can't wrap and add height */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   UPCOMING ENGLISH RELEASES — Full Archive Page
   ============================================================ */

.upcoming-archive-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

.upcoming-archive-header {
  margin-bottom: 24px;
  border-bottom: 2px solid var(--plum-dark);
  padding-bottom: 12px;
}

.upcoming-archive-title {
  font-family: var(--serif-font);
  font-size: 26px;
  color: var(--text-main);
  margin-bottom: 6px;
}

.upcoming-archive-desc {
  font-size: 13px;
  color: var(--text-muted);
}

.upcoming-catalogue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.upcoming-full-card {
  background: var(--card-body);
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
  transition: box-shadow 0.15s;
}

.upcoming-full-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

.upcoming-full-past {
  border-color: var(--mint);
  border-width: 2px;
}

.upcoming-full-cover-link { display: block; }

.upcoming-full-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 13;
  overflow: hidden;
  background: var(--border);
}

.upcoming-full-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: opacity 0.15s;
}

.upcoming-full-card:hover .upcoming-full-cover img { opacity: 0.9; }

/* ============================================================
   ACRYLICS — square art + Closed state
   Reuses the releases strip/archive markup; only the cover
   aspect ratio and the Closed badge differ. The EP ribbon sits
   top-left, so Closed sits top-right without colliding.
   ============================================================ */
.acrylic-square .upcoming-cover,
.acrylic-square .upcoming-full-cover { aspect-ratio: 1 / 1; }

.upcoming-closed {
  top: 4px;
  right: 4px;
  background: rgba(0,0,0,0.62);
  color: #fff;
}

.upcoming-full-note {
  font-size: 11px;
  font-style: italic;
  opacity: 0.72;
  margin-top: 2px;
}

/* Acrylic Block badge — solid black to distinguish from the
   dark-translucent stand badge. Double-class so it wins over
   both .upcoming-format and .upcoming-format-badge regardless
   of source order. */
.upcoming-badge.upcoming-acrylic-block { background: rgba(0,0,0,0.65); }

.upcoming-format-badge {
  bottom: 5px;
  left: 5px;
  background: rgba(0,0,0,0.65);
  color: #fff;
}

.upcoming-full-info {
  padding: 10px 12px 12px;
}

.upcoming-full-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.3;
  margin-bottom: 3px;
}

.upcoming-full-title a {
  color: inherit;
  text-decoration: none;
}

.upcoming-full-title a:hover { color: var(--pink-hot); }

.upcoming-full-volume {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 12px;
}

.upcoming-full-creator {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.upcoming-full-date {
  font-size: 12px;
  font-weight: 700;
  color: var(--pink-hot);
  margin-bottom: 6px;
}

.upcoming-full-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.upcoming-meta-pill {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
}

.upcoming-publisher-pill {
  background: var(--border);
  color: var(--text-muted);
}

.upcoming-rating-pill {
  background: #fce8f0;
  color: var(--pink-hot);
}

:root[data-theme="dark"] .upcoming-rating-pill {
  background: #3A1828;
}

/* Unrated reads as "unknown", not a content level — muted gray, quieter */
.upcoming-rating-unrated {
  background: var(--border) !important;
  color: var(--text-muted) !important;
  font-style: italic;
}

:root[data-theme="dark"] .upcoming-rating-unrated {
  background: #3A2230 !important;
  color: var(--text-faint) !important;
}

.upcoming-synopsis-wrap {
  margin-bottom: 8px;
}

.upcoming-full-synopsis {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 2px;
}

/* Clamp to ~3 lines until expanded */
.upcoming-full-synopsis.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.upcoming-full-synopsis.is-expanded {
  display: block;
  overflow: visible;
}

/* The cute little more/less toggle */
.upcoming-synopsis-toggle {
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 4px 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--pink-hot);
  transition: color 0.15s;
}

.upcoming-synopsis-toggle:hover { color: var(--plum-mid); }

/* Show the right word depending on state */
.upcoming-synopsis-toggle .upcoming-toggle-less { display: none; }
.upcoming-synopsis-toggle[aria-expanded="true"] .upcoming-toggle-more { display: none; }
.upcoming-synopsis-toggle[aria-expanded="true"] .upcoming-toggle-less { display: inline; }

:root[data-theme="dark"] .upcoming-synopsis-toggle { color: var(--pink-light); }
:root[data-theme="dark"] .upcoming-synopsis-toggle:hover { color: #fff; }

/* ============================================================
   UPCOMING — cute web 1.0 filter bar
   ============================================================ */
.upcoming-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-bottom: 22px;
  padding: 12px 14px;
  background: #FFF0F6;
  border: 1.5px dashed #E3A9C6;
  border-radius: 10px;
}

:root[data-theme="dark"] .upcoming-filter-bar {
  background: #2A1420;
  border-color: #5A3349;
}

.upcoming-filter-group {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.upcoming-filter-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--plum-mid);
  white-space: nowrap;
}

:root[data-theme="dark"] .upcoming-filter-label { color: var(--pink-light); }

.upcoming-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* The pill buttons — rounded, pastel, springy on hover */
.upcoming-pill {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1.5px solid #E3A9C6;
  background: #fff;
  color: var(--plum-mid);
  cursor: pointer;
  transition: transform 0.12s, background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.upcoming-pill:hover {
  transform: translateY(-1px) scale(1.04);
  border-color: var(--pink-hot);
  color: var(--pink-hot);
}

.upcoming-pill.is-active {
  background: var(--pink-hot);
  border-color: var(--pink-hot);
  color: #fff;
}

:root[data-theme="dark"] .upcoming-pill {
  background: #3A2230;
  border-color: #5A3349;
  color: var(--pink-light);
}

:root[data-theme="dark"] .upcoming-pill:hover {
  border-color: var(--pink-light);
  color: #fff;
}

:root[data-theme="dark"] .upcoming-pill.is-active {
  background: #C76B92;
  border-color: #C76B92;
  color: #fff;
}

.upcoming-filter-count {
  font-size: 10px;
  font-style: italic;
  color: var(--text-muted);
  margin-left: auto;
  white-space: nowrap;
}

.upcoming-full-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.upcoming-action-btn {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 3px;
  text-decoration: none;
  transition: background 0.15s;
}

.upcoming-preorder-btn {
  background: var(--pink-hot);
  color: #fff;
}

.upcoming-preorder-btn:hover { background: var(--plum-mid); }

.upcoming-publisher-btn {
  background: var(--border);
  color: var(--text-main);
}

.upcoming-publisher-btn:hover { background: var(--border-mid); }

.upcoming-empty {
  color: var(--text-muted);
  font-size: 14px;
  padding: 40px 0;
  text-align: center;
}

/* Dark mode */
:root[data-theme="dark"] .upcoming-strip-wrap {
  background: #2E1A24;
  border-bottom-color: #4A2E3C;
}
:root[data-theme="dark"] .upcoming-strip-head {
  background: #C76B92;
  border-bottom-color: #4A2E3C;
}
:root[data-theme="dark"] .upcoming-cover { background: #3A2230; }
:root[data-theme="dark"] .upcoming-full-card { background: #2E1A24; border-color: #4A2E3C; }
:root[data-theme="dark"] .upcoming-full-past { border-color: var(--mint); border-width: 2px; }
:root[data-theme="dark"] .upcoming-publisher-pill { background: #3A2230; }
:root[data-theme="dark"] .upcoming-publisher-btn { background: #3A2230; color: var(--text-main); }

/* ============================================================
   UPCOMING — mobile: 2 cards per row (instead of 1)
   Forces exactly two columns on phones and scales the card
   internals down so they stay readable at half width.
   Tablets keep the auto-fill multi-column layout.
   ============================================================ */
@media (max-width: 600px) {
  .upcoming-catalogue-grid {
    grid-template-columns: 1fr 1fr;
    gap: 11px;
  }

  .upcoming-full-info {
    padding: 8px 9px 9px;
  }

  .upcoming-full-title {
    font-size: 11px;
    line-height: 1.25;
    /* clamp long titles to 3 lines so a wordy one doesn't dwarf its neighbor */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .upcoming-full-volume { font-size: 10px; }
  .upcoming-full-creator { font-size: 9.5px; margin-bottom: 3px; }
  .upcoming-full-date { font-size: 10px; margin-bottom: 5px; }

  .upcoming-full-meta-row { gap: 3px; margin-bottom: 5px; }
  .upcoming-meta-pill { font-size: 8px; padding: 1px 5px; }

  .upcoming-full-synopsis { font-size: 9.5px; line-height: 1.45; }
  .upcoming-synopsis-toggle { font-size: 9px; }

  .upcoming-action-btn { font-size: 9px; padding: 4px 7px; }

  /* Filter bar: shrink pills so the five filter rows fit a phone neatly */
  .upcoming-filter-bar { gap: 8px 12px; padding: 10px 11px; }
  .upcoming-filter-label { font-size: 10px; }
  .upcoming-pill { font-size: 10px; padding: 3px 9px; }
  .upcoming-filter-count { font-size: 9px; }
}

/* ============================================================
   FOOTER VISITOR COUNTER — retro LED odometer
   ============================================================ */

.footer-counter {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-counter-label {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}

.footer-counter-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 24px;
  background: #1a0d13;
  border: 1px solid var(--pink-hot);
  border-radius: 3px;
  padding: 0 8px;
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 3px;
  text-indent: 3px;
  color: #ff7eb6;
  text-shadow: 0 0 6px rgba(240, 107, 160, 0.7);
  box-shadow: inset 0 0 8px rgba(240, 107, 160, 0.25);
}

:root[data-theme="dark"] .footer-counter-num {
  background: #0d0608;
  border-color: #C76B92;
  color: #ff9ec9;
}

/* ============================================================
   FALLING ROSE PETALS — ambient page effect
   ============================================================ */

#fw-petal-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

.fw-petal {
  position: absolute;
  pointer-events: none;
  animation-name: fw-fall;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  will-change: transform;
  margin-left: -4px;
  margin-top: -4px;
}

@keyframes fw-fall {
  0%   { transform: translateY(0) translateX(0); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(var(--fall)) translateX(var(--drift)); opacity: 0; }
}

.fw-petal-sway {
  width: 100%;
  height: 100%;
  position: relative;
  animation: fw-sway 3s ease-in-out infinite;
}

@keyframes fw-sway {
  0%, 100% { transform: translateX(-5px); }
  50%      { transform: translateX(5px); }
}

.fw-petal-frames {
  position: relative;
  width: 100%;
  height: 100%;
}

.fw-petal-frames img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  opacity: 0;
}

.fw-petal-frames img:nth-child(1) { animation: fw-frame1 4s steps(1) infinite; }
.fw-petal-frames img:nth-child(2) { animation: fw-frame2 4s steps(1) infinite; }
.fw-petal-frames img:nth-child(3) { animation: fw-frame3 4s steps(1) infinite; }

@keyframes fw-frame1 { 0% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } }
@keyframes fw-frame2 { 0% { opacity: 0; } 25% { opacity: 1; } 50% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fw-frame3 { 0% { opacity: 0; } 50% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  #fw-petal-layer { display: none; }
}

/* ============================================================
   GUESTBOOK — tiny cute sidebar block (Gwolle Guestbook)
   ============================================================ */

.guestbook-block .guestbook-inner {
  background: var(--card-body);
  padding: 8px 10px;
}

/* The write form */
.guestbook-form {
  margin-bottom: 8px;
}

.guestbook-form .gb-form-header,
.guestbook-block .gb-notice {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 6px;
  line-height: 1.35;
}

/* Form fields */
.guestbook-form label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1px;
  margin-top: 5px;
}

.guestbook-form input[type="text"],
.guestbook-form input[type="email"],
.guestbook-form input[type="url"],
.guestbook-form textarea {
  width: 100%;
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--white);
  color: var(--text-main);
  box-sizing: border-box;
  font-family: inherit;
}

.guestbook-form textarea {
  min-height: 42px;
  resize: vertical;
}

.guestbook-form input:focus,
.guestbook-form textarea:focus {
  outline: none;
  border-color: var(--pink-hot);
}

/* Submit button — mint signature color */
.guestbook-form input[type="submit"],
.guestbook-form button[type="submit"],
.guestbook-form .gb-button-submit {
  margin-top: 6px;
  width: 100%;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #2E5048;
  background: var(--mint);
  border: none;
  border-radius: 4px;
  padding: 6px;
  cursor: pointer;
  transition: filter 0.15s;
}

.guestbook-form input[type="submit"]:hover,
.guestbook-form button[type="submit"]:hover,
.guestbook-form .gb-button-submit:hover {
  filter: brightness(0.93);
}

/* Preview button — cute small pink outline */
.guestbook-form .gb-button-preview,
.guestbook-form input[name="preview"],
.guestbook-form button[name="preview"] {
  margin-top: 5px;
  font-size: 10px;
  font-weight: 600;
  color: var(--pink-hot);
  background: transparent;
  border: 1px solid var(--pink-hot);
  border-radius: 4px;
  padding: 3px 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.guestbook-form .gb-button-preview:hover,
.guestbook-form input[name="preview"]:hover,
.guestbook-form button[name="preview"]:hover {
  background: var(--pink-hot);
  color: #fff;
}

/* Character counter — make tiny */
.guestbook-form .gb-charcount,
.guestbook-form .charcount {
  font-size: 9px;
  color: var(--text-faint);
}

/* The entries list — tiny and cute */
.guestbook-entries {
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.guestbook-entries::-webkit-scrollbar { width: 4px; }
.guestbook-entries::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.guestbook-entries .gb-list,
.guestbook-entries ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.guestbook-entries .gb-entry,
.guestbook-entries li {
  border-top: 1px dashed var(--border-mid);
  padding: 7px 0;
  position: relative;
}

.guestbook-entries .gb-entry::before {
  content: "\273F";
  color: var(--pink-hot);
  font-size: 9px;
  position: absolute;
  top: 7px;
  right: 0;
  opacity: 0.6;
}

.guestbook-entries .gb-author,
.guestbook-entries .gb-author-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--pink-hot);
}

.guestbook-entries .gb-author a {
  color: var(--pink-hot);
  text-decoration: none;
}

.guestbook-entries .gb-author a:hover { text-decoration: underline; }

.guestbook-entries .gb-date,
.guestbook-entries .gb-datetime {
  font-size: 9px;
  color: var(--text-faint);
  margin-left: 4px;
}

.guestbook-entries .gb-message,
.guestbook-entries .gb-content {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
  font-style: italic;
  margin-top: 2px;
}

/* Hide avatar and any bulky bits Gwolle might inject */
.guestbook-entries .gb-avatar,
.guestbook-entries img.avatar {
  display: none !important;
}

/* Dark mode */
:root[data-theme="dark"] .guestbook-block .guestbook-inner { background: #2E1A24; }
:root[data-theme="dark"] .guestbook-form input,
:root[data-theme="dark"] .guestbook-form textarea {
  background: #3A2230;
  border-color: #4A2E3C;
  color: var(--text-main);
}

/* ============================================================
   GUESTBOOK — overrides for Gwolle's own CSS (higher specificity)
   ============================================================ */

/* Hide the preview button entirely */
.guestbook-block input[name="gwolle_gb_preview"],
.guestbook-block button[name="gwolle_gb_preview"],
.guestbook-block .gb-button-preview,
.guestbook-block input[value="Preview"] {
  display: none !important;
}

/* Force submit button mint in BOTH modes */
.guestbook-block input[type="submit"],
.guestbook-block button[type="submit"],
.guestbook-block input[name="gwolle_gb_submit"] {
  background: var(--mint) !important;
  color: #2E5048 !important;
  border: none !important;
  width: 100% !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-radius: 4px !important;
  padding: 6px !important;
  margin-top: 6px !important;
  cursor: pointer !important;
}

.guestbook-block input[type="submit"]:hover,
.guestbook-block button[type="submit"]:hover,
.guestbook-block input[name="gwolle_gb_submit"]:hover {
  filter: brightness(0.93) !important;
}

/* Compact spacing — tighten Gwolle's default form margins */
.guestbook-block .gb-form,
.guestbook-block form {
  margin: 0 !important;
}

.guestbook-block .gb-form p,
.guestbook-block form p,
.guestbook-block .gb-form-field {
  margin: 4px 0 !important;
  padding: 0 !important;
}

.guestbook-block label {
  font-size: 9px !important;
  margin-bottom: 1px !important;
  margin-top: 4px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted) !important;
}

.guestbook-block input[type="text"],
.guestbook-block input[type="email"],
.guestbook-block input[type="url"],
.guestbook-block textarea {
  padding: 4px 6px !important;
  font-size: 12px !important;
  margin: 0 !important;
}

.guestbook-block textarea {
  min-height: 42px !important;
}

/* The "Thank you" notice — make small */
.guestbook-block .gb-message,
.guestbook-block .gwolle-gb-message {
  font-size: 10px !important;
  padding: 4px 6px !important;
  margin: 0 0 6px 0 !important;
}

/* ============================================================
   GUESTBOOK — extra compact pass
   ============================================================ */

.guestbook-block .guestbook-inner { padding: 8px 10px !important; }

/* Kill big gaps between Gwolle form rows */
.guestbook-block form > *,
.guestbook-block .gb-form > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.guestbook-block p,
.guestbook-block .gb-form-field,
.guestbook-block .gb-formfield {
  margin: 3px 0 !important;
  line-height: 1.2 !important;
}

/* smaller textarea */
.guestbook-block textarea {
  min-height: 38px !important;
}

/* tighten the header title and notice */
.guestbook-block h2,
.guestbook-block h3,
.guestbook-block .gb-form-header {
  font-size: 13px !important;
  margin: 0 0 4px 0 !important;
}

/* char counter inline tiny */
.guestbook-block .gb-char-count,
.guestbook-block .charcount,
.guestbook-block [class*="char"] {
  font-size: 9px !important;
  margin: 2px 0 !important;
  color: var(--text-faint) !important;
}

/* security question label tighter */
.guestbook-block .gb-antispam-question,
.guestbook-block .gb-form-antispam {
  margin: 4px 0 !important;
}

/* submit margin tighter */
.guestbook-block input[type="submit"],
.guestbook-block button[type="submit"] {
  margin-top: 4px !important;
}

/* entries list tighter */
.guestbook-block .guestbook-entries { margin-top: 2px !important; }

/* ============================================================
   GUESTBOOK — corrective pass using Gwolle's real gwolle-gb- classes
   ============================================================ */

/* Reset the char counter so it stops inheriting big heading styles */
.guestbook-block .gwolle-gb-charcount,
.guestbook-block .gb-charcount,
.guestbook-block [id*="charcount"],
.guestbook-block [class*="charcount"] {
  font-size: 9px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  color: var(--text-faint) !important;
  margin: 2px 0 6px 0 !important;
  display: block !important;
}
.guestbook-block .gwolle-gb-charcount *,
.guestbook-block [class*="charcount"] * {
  font-size: 9px !important;
  font-weight: 400 !important;
}

/* Remove my rose ::before decoration that overlaps the date */
.guestbook-entries .gb-entry::before,
.guestbook-block .gwolle-gb-entry::before {
  content: none !important;
}

/* Hide the edit/permalink/three-dots links on entries (the overlapping bit) */
.guestbook-block .gwolle-gb-entry-meta,
.guestbook-block .gwolle-gb-editlink,
.guestbook-block .gwolle-gb-permalink,
.guestbook-block .gb-entry-edit,
.guestbook-block .gwolle-gb-entry .editlink,
.guestbook-block a[href*="editentry"],
.guestbook-block a[href*="gwolle"] .dashicons {
  display: none !important;
}

/* Tighten Gwolle's entry blocks */
.guestbook-block .gwolle-gb-list,
.guestbook-block ul.gwolle-gb-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.guestbook-block .gwolle-gb-entry {
  border-top: 1px dashed var(--border-mid) !important;
  padding: 6px 0 !important;
  margin: 0 !important;
}

.guestbook-block .gwolle-gb-author-name,
.guestbook-block .gwolle-gb-author {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--pink-hot) !important;
  font-style: italic !important;
}

.guestbook-block .gwolle-gb-author-name a {
  color: var(--pink-hot) !important;
  text-decoration: none !important;
}

.guestbook-block .gwolle-gb-date,
.guestbook-block .gwolle-gb-datetime {
  font-size: 9px !important;
  color: var(--text-faint) !important;
  font-weight: 400 !important;
}

.guestbook-block .gwolle-gb-content {
  font-size: 11px !important;
  color: var(--text-muted) !important;
  line-height: 1.4 !important;
  margin-top: 2px !important;
}

/* Tighten the whole form container */
.guestbook-block .gwolle-gb-write,
.guestbook-block .gwolle-gb {
  margin: 0 !important;
  padding: 0 !important;
}

.guestbook-block .gwolle-gb-write p,
.guestbook-block .gwolle-gb p {
  margin: 3px 0 !important;
}

/* ============================================================
   GUESTBOOK — precise CSS from inspected real markup
   ============================================================ */

/* The form itself */
.guestbook-block form.gwolle-gb-write {
  margin: 0 !important;
  padding: 0 !important;
}

.guestbook-block form.gwolle-gb-write h3 {
  font-size: 13px !important;
  margin: 0 0 6px 0 !important;
  color: #D4537E !important;
}

:root[data-theme="dark"] .guestbook-block form.gwolle-gb-write h3,
body[data-theme="dark"] .guestbook-block form.gwolle-gb-write h3 {
  color: #F9A8C9 !important;
}

/* Each field row is a div with a gwolle_gb_[hash] class, direct child of the form.
   Target all direct div children to compact them. */
.guestbook-block form.gwolle-gb-write > div {
  margin: 4px 0 !important;
  padding: 0 !important;
}

/* Labels inside field rows */
.guestbook-block form.gwolle-gb-write label {
  display: block !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--text-muted) !important;
  margin: 0 0 1px 0 !important;
}

/* Inputs and textarea */
.guestbook-block form.gwolle-gb-write input[type="text"],
.guestbook-block form.gwolle-gb-write input[type="email"],
.guestbook-block form.gwolle-gb-write input[type="url"],
.guestbook-block form.gwolle-gb-write textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  font-size: 12px !important;
  padding: 4px 6px !important;
  margin: 0 !important;
}

.guestbook-block form.gwolle-gb-write textarea {
  min-height: 40px !important;
}

/* The content (message) field row */
.guestbook-block .gwolle_gb_content {
  margin: 4px 0 !important;
}

/* Char counter lives inside content row — kill the big inheritance */
.guestbook-block .gwolle_gb_content small,
.guestbook-block .gwolle_gb_content .charcount,
.guestbook-block .gwolle_gb_content span {
  font-size: 9px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: var(--text-faint) !important;
}

/* Antispam question row */
.guestbook-block .gwolle_gb_antispam {
  margin: 4px 0 !important;
}
.guestbook-block .gwolle_gb_antispam .label,
.guestbook-block .gwolle_gb_antispam label {
  font-size: 9px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted) !important;
}
.guestbook-block .clearBoth { display: none !important; }

/* Submit button wrapper */
.guestbook-block .gwolle-gb-submit {
  margin-top: 6px !important;
}
.guestbook-block .gwolle-gb-submit input[type="submit"],
.guestbook-block .gwolle-gb-submit button {
  background: var(--mint) !important;
  color: #2E5048 !important;
  border: none !important;
  width: 100% !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-radius: 4px !important;
  padding: 6px !important;
  cursor: pointer !important;
}

/* Notice text small and cute */
.guestbook-block .gwolle-gb-notice {
  font-size: 10px !important;
  font-style: italic !important;
  color: var(--text-muted) !important;
  margin: 6px 0 !important;
  line-height: 1.35 !important;
}

/* Messages containers — remove extra space when empty */
.guestbook-block .gwolle-gb-messages-top-container:empty,
.guestbook-block .gwolle-gb-messages-bottom-container:empty {
  display: none !important;
  margin: 0 !important;
}

/* ============================================================
   GUESTBOOK — v42 compact pass
   • Kill the gap between textarea and submit button
   • Shrink the "N entry/entries" total counter line
   ============================================================ */

/* The submit wrapper sits directly after the content field.
   The gap comes from Gwolle's .gwolle-gb-submit having a default
   margin-top; we already set 6px but the inner .input div adds space. */
.guestbook-block .gwolle-gb-submit,
.guestbook-block .gwolle-gb-submit .input {
  margin-top: 2px !important;
  padding-top: 0 !important;
}

/* The nbsp-filled invisible label Gwolle injects before the submit
   button adds height — hide it */
.guestbook-block .gwolle-gb-submit .label,
.guestbook-block .gwolle-gb-submit label {
  display: none !important;
}

/* "1 entry." / "N entries." counter — make it tiny, inline, muted */
/* "1 entry." counter — micro, flush */
.guestbook-block #gwolle-gb-total,
.guestbook-block .gwolle-gb-total,
.guestbook-block [id*="gb-total"],
.guestbook-block [class*="gb-total"] {
  font-size: 8px !important;
  font-weight: 400 !important;
  color: var(--text-faint) !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  margin: 1px 0 1px 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  display: block !important;
}

/* Collapse the gwolle-gb-read wrapper — no gap above counter */
.guestbook-block .gwolle-gb-read {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* The entries scroll area — pull it tight under the counter */
.guestbook-block .guestbook-entries,
.guestbook-block .gwolle-gb-entries-list {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ============================================================
   GUESTBOOK — v43 cute pass (Neocities / Xanga vibes)
   • repeating heart-star divider between form and entries
   • little ✿ bullet before each entry's name
   • counter reformatted as  — ♡ N notes ♡ —
   • entry date pulled inline, faint, in parens-style
   ============================================================ */

/* --- Divider above the entries list --- */
.guestbook-block .guestbook-entries {
  position: relative;
  border-top: none !important;
  margin-top: 4px !important;
  padding-top: 8px !important;
}

.guestbook-block .guestbook-entries::before {
  content: "♡ ✦ ♡ ✦ ♡ ✦ ♡ ✦ ♡ ✦ ♡ ✦ ♡ ✦ ♡ ✦ ♡ ✦ ♡ ✦ ♡";
  display: block;
  text-align: center;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--sidebar-head);
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1;
  margin-bottom: 6px;
  user-select: none;
}

:root[data-theme="dark"] .guestbook-block .guestbook-entries::before {
  color: #C76B92;
  opacity: 0.85;
}

/* --- Counter: " — ♡ N notes ♡ — " feel ---
   Gwolle prints plain text "1 entry." inside .gwolle-gb-total.
   We can't change the words via CSS, but we can flank it with
   little decorative marks and center it so it reads like a
   guestbook tally line. */
.guestbook-block .gwolle-gb-total,
.guestbook-block #gwolle-gb-total {
  text-align: center !important;
  font-style: italic !important;
}

.guestbook-block .gwolle-gb-total::before {
  content: "♡ ";
  color: var(--sidebar-head);
  font-style: normal;
}
.guestbook-block .gwolle-gb-total::after {
  content: " ♡";
  color: var(--sidebar-head);
  font-style: normal;
}

:root[data-theme="dark"] .guestbook-block .gwolle-gb-total::before,
:root[data-theme="dark"] .guestbook-block .gwolle-gb-total::after {
  color: #C76B92;
}

/* --- Little flower bullet before each entry author --- */
.guestbook-block .gwolle-gb-entry {
  position: relative !important;
  padding-left: 14px !important;
}

.guestbook-block .gwolle-gb-entry::before {
  content: "✿" !important;
  position: absolute !important;
  left: 0 !important;
  top: 6px !important;
  font-size: 9px !important;
  color: var(--pink-hot) !important;
  line-height: 1 !important;
  opacity: 0.9 !important;
}

:root[data-theme="dark"] .guestbook-block .gwolle-gb-entry::before {
  color: var(--pink-light) !important;
}

/* --- Pull the date inline + faint, parenthetical feel --- */
.guestbook-block .gwolle-gb-datetime,
.guestbook-block .gb-datetime {
  display: inline !important;
  font-size: 8px !important;
  color: var(--text-faint) !important;
  font-style: italic !important;
  margin-left: 4px !important;
}

/* hide the verbose "wrote on" / "at" connector words for a cleaner
   tiny timestamp, leaving just the date + time */
.guestbook-block .gb-date-wrote-text,
.guestbook-block .gb-time-at-text {
  display: none !important;
}

/* ============================================================
   GUESTBOOK — v43 follow-up fixes
   • remove Gwolle's duplicated time in the timestamp
   • dashed pastel frame around the whole guestbook block
   • shrink the entry textarea (it was too tall)
   ============================================================ */

/* Gwolle prints the time twice: once inside .gb-date (date + time)
   and again inside .gb-time. Hide the redundant .gb-time block so
   only the single date+time from .gb-date remains. */
.guestbook-block .gb-time,
.guestbook-block .gwolle-gb-time {
  display: none !important;
}

/* Dashed pastel frame around the guestbook block */
.guestbook-block {
  border: 1.5px dashed var(--border-mid) !important;
  border-radius: 8px !important;
  overflow: hidden;
}

:root[data-theme="dark"] .guestbook-block {
  border-color: #6A4255 !important;
}

/* Round the header to sit inside the dashed frame nicely */
.guestbook-block .sidebar-block-head {
  border-radius: 6px 6px 0 0;
}

/* Shrink the message textarea — final word over earlier rules */
.guestbook-block textarea,
.guestbook-block form.gwolle-gb-write textarea,
.guestbook-block .gwolle_gb_content textarea {
  min-height: 30px !important;
  height: 30px !important;
}

/* ============================================================
   GUESTBOOK — v45 entry font (Comic Neue, retro Xanga feel)
   Targets the real Gwolle markup: .gb-entry-excerpt holds the
   visible note text, .gb-entry-full-content the expanded text.
   ============================================================ */
.guestbook-block .gwolle-gb-content,
.guestbook-block .gb-content,
.guestbook-block .gb-message,
.guestbook-block .gb-entry-content,
.guestbook-block .gb-entry-excerpt,
.guestbook-block .gb-entry-full-content,
.guestbook-block .gwolle-gb-entry .gb-entry-excerpt,
.guestbook-block .gwolle-gb-entry .gb-entry-full-content {
  font-family: 'Comic Neue', 'Comic Sans MS', cursive !important;
  font-style: normal !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: var(--text-muted) !important;
}