/* =============================================================
   XICA REBRAND — XICARON (Archive + Single)
   File:  assets/css/xica-rebrand-xicaron.css
   Scope: body.--xicaron (archive + single)
          body.--top  → archive-only rules
          body.--detail → single-only rules
   Loads: after xicaron.css (archive) or detail.css (single)
          All global tokens from xica-rebrand.css available.
   Class prefix: xr-xi- for new classes.
   Existing class names targeted via high-specificity overrides
   where PHP markup must remain untouched.
   ============================================================= */


/* =========================================================
   0. LOCAL SPATIAL TOKENS
   ========================================================= */
:root {
    --xr-xi-inner-x:  clamp(24px, 5vw, 80px);
    --xr-xi-sec-pad:  clamp(48px, 7vw, 80px);
    --xr-xi-card-pad: clamp(16px, 2.5vw, 28px);
}


/* =========================================================
   1. ARCHIVE HERO
   Mirrors .bg-ink.page-hero pattern across the rebrand.
   Replaces .p-xicaron_statement inline padding hack.
   ========================================================= */

.xr-xi-hero {
    background-color: var(--ink);
    border-bottom: 0.5px solid rgba(255,255,255,0.12);
    padding-top: calc(var(--header-h) + clamp(48px, 7vw, 80px));
    padding-bottom: clamp(48px, 7vw, 80px);
}

.xr-xi-hero-inner {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--xr-xi-inner-x);
}

/* EN mono eyebrow */
.xr-xi-eyebrow {
    display: block;
    font-family: var(--mono);
    font-size: 1.1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.38);
    margin-bottom: 20px;
}

/* JP serif H1 */
.xr-xi-h1 {
    font-family: var(--serif-jp);
    font-size: clamp(2.4rem, 4vw, 3.8rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.005em;
    color: var(--paper);
}

/* Taxonomy / category header (shown instead of hero on filtered views) */
.xr-xi-tax-hd {
    padding-top: calc(var(--header-h) + clamp(32px, 5vw, 56px));
    padding-bottom: clamp(32px, 5vw, 48px);
    padding-inline: var(--xr-xi-inner-x);
    max-width: var(--container);
    margin-inline: auto;
    border-bottom: 0.5px solid var(--rule);
}

.xr-xi-tax-eyebrow {
    display: block;
    font-family: var(--mono);
    font-size: 1.1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grey-1);
    margin-bottom: 14px;
}

.xr-xi-tax-title {
    font-family: var(--serif-jp);
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
}


/* =========================================================
   2. ARCHIVE LAYOUT
   Override legacy flex + percentage widths with CSS grid.
   Desktop: 220px sidebar | 1fr main
   ≤1023px: stacked
   ========================================================= */

.p-xicaron_contents {
    padding-block: var(--xr-xi-sec-pad);
}

/* Kill legacy padding-left: 61px and width: 95.833% */
.p-xicaron_contents_inner {
    max-width: var(--container) !important;
    width: 100% !important;
    margin-inline: auto !important;
    padding-inline: var(--xr-xi-inner-x) !important;
    padding-left: var(--xr-xi-inner-x) !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 220px 1fr !important;
    gap: clamp(40px, 6vw, 80px) !important;
    align-items: start !important;
}

@media (max-width: 1023px) {
    .p-xicaron_contents_inner {
        grid-template-columns: 1fr !important;
    }
}

/* Kill legacy percentage widths on the content wrapper */
.p-xicaron_contents_wrap {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    border-top: none !important;
    padding-right: 0 !important;
    flex-direction: unset !important;
}

.p-xicaron_list_wrap {
    max-width: none !important;
    width: 100% !important;
}


/* =========================================================
   3. SIDEBAR (post_sub)
   Applied on both archive and single.
   ========================================================= */

.post_sub {
    width: 100% !important;
    max-width: none !important;
}

/* Section label — mono eyebrow */
.post_sub_title {
    font-family: var(--mono) !important;
    font-size: 1.0rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--grey-1) !important;
    border-top: 1px solid var(--ink) !important;
    border-bottom: none !important;
    padding: 14px 0 0 !important;
    cursor: default !important;
    /* Kill the dropdown arrow pseudo on mobile — replaced by clean toggle */
}

/* On mobile the title acts as an accordion trigger — keep pointer */
@media (max-width: 1023px) {
    .post_sub_title {
        cursor: pointer !important;
    }
}

/* Category list items */
.post_sub_list {
    margin-top: 10px !important;
    flex-wrap: wrap !important;
}

.post_sub_list li + li {
    margin-top: 0 !important;
}

.post_sub_label {
    font-family: var(--sans-jp) !important;
    font-size: 1.3rem !important;
    color: var(--ink-2) !important;
    padding: 7px 0 !important;
    padding-left: 0 !important;
    display: block !important;
    border-bottom: 0.5px solid var(--rule) !important;
    transition: color 0.18s !important;
    cursor: pointer;
}

.post_sub_label:hover {
    color: var(--ink) !important;
}

/* Hide legacy custom radio bullet graphics */
.post_sub_label::before,
.post_sub_label::after {
    display: none !important;
}

/* Active / selected state */
.post_sub_list .active > .post_sub_label,
.post_sub_radio:checked + .post_sub_label {
    color: var(--ink) !important;
    font-weight: 600 !important;
}

/* Tags section */
.post_sub_tags {
    margin-top: 28px !important;
}

.post_sub_tags .post_sub_taglist {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 10px !important;
    width: 100% !important;
}

/* Tag pill → flat hairline chip */
.post_sub_tags .tag {
    font-family: var(--sans-jp) !important;
    font-size: 1.2rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    background: transparent !important;
    border: 0.5px solid var(--rule) !important;
    border-radius: 0 !important;
    padding: 4px 8px !important;
    color: var(--grey-1) !important;
    transition: background-color 0.18s, color 0.18s, border-color 0.18s !important;
}

.post_sub_tags .tag:hover,
.post_sub_tags .tag.selected {
    background-color: var(--ink) !important;
    color: var(--paper) !important;
    border-color: var(--ink) !important;
}

/* "すべてのタグ" expand button */
.post_sub_tags .open-btn {
    font-family: var(--mono) !important;
    font-size: 1.0rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    color: var(--grey-1) !important;
    padding-left: 0 !important;
    margin-top: 10px !important;
    display: block !important;
}

/* Replace SVG arrow with mono glyph */
.post_sub_tags .open-btn::before {
    display: none !important;
}

.post_sub_tags .open-btn::after {
    content: ' →';
    font-family: var(--mono);
}

.post_sub_tags .open-btn.open::after {
    content: ' ↑';
}


/* =========================================================
   4. ARTICLE CARD GRID
   Hairline-gap grid technique (1px gap on rule background).
   Replaces legacy percentage widths + hover shadows.
   ========================================================= */

/* Section label above the list */
.p-xicaron_contents_title {
    font-family: var(--mono) !important;
    font-size: 1.0rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--grey-1) !important;
    border-top: 1px solid var(--ink) !important;
    padding: 14px 0 0 !important;
    margin-top: 0 !important;
}

/* Kill the legacy coloured tag badge inside the title */
.p-xicaron_contents_title .tag {
    display: none !important;
}

/* Grid */
.p-xicaron_contents .media_list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1px !important;
    background-color: var(--rule) !important;
    border: 0.5px solid var(--rule) !important;
    margin-top: 20px !important;
    align-items: stretch !important;
}

@media (max-width: 640px) {
    .p-xicaron_contents .media_list {
        grid-template-columns: 1fr !important;
    }
}

/* Card cell */
.p-xicaron_contents .media_list_card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    background-color: var(--paper);
    display: flex !important;
    align-items: stretch !important;
}

.p-xicaron_contents .media_list_link {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: var(--xr-xi-card-pad) !important;
    text-decoration: none !important;
    transition: background-color 0.18s !important;
}

.p-xicaron_contents .media_list_link:hover {
    background-color: var(--paper-2) !important;
}

/* No hover shadows — brand rule */
.p-xicaron_contents .media_list_link:hover .media_list_img {
    box-shadow: none !important;
}

/* Thumbnail — aspect-ratio replaces the padding-bottom hack */
.p-xicaron_contents .media_list_img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
    overflow: hidden !important;
    border: 0.5px solid var(--rule) !important;
    margin-bottom: 14px !important;
    transition: none !important;
    /* Neutralise add_style_archive-xicaron.css: height:0; padding-bottom:66% */
    padding-bottom: 0 !important;
    position: relative !important; /* keep for object-fit context */
}

.p-xicaron_contents .media_list_img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    position: static !important; /* override absolute positioning from add_style_archive-xicaron.css */
    transform: none !important;
    top: auto !important;
    left: auto !important;
    min-width: unset !important;
    min-height: unset !important;
}

/* Date + category meta line */
.p-xicaron_contents .media_list_status {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin-top: 0 !important;
    flex-shrink: 0;
}

.p-xicaron_contents .media_list_time {
    font-family: var(--mono) !important;
    font-size: 1.0rem !important;
    letter-spacing: 0.08em !important;
    color: var(--grey-2) !important;
}

.p-xicaron_contents .media_list_category {
    font-family: var(--mono) !important;
    font-size: 1.0rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--grey-1) !important;
}

/* Replace inline bar graphic with a slash */
.p-xicaron_contents .media_list_category::before {
    content: '\00a0/\00a0' !important;
    background: none !important;
    width: auto !important;
    height: auto !important;
    display: inline !important;
    vertical-align: baseline !important;
    margin: 0 !important;
    color: var(--grey-3) !important;
}

/* Article title */
.p-xicaron_contents .media_list_text {
    font-family: var(--sans-jp) !important;
    font-size: 1.4rem !important;
    line-height: 1.65 !important;
    color: var(--ink) !important;
    margin-top: 10px !important;
    flex: 1 !important;
}

/* "記事を読む" CTA */
.media_list_action {
    margin-top: 16px;
    flex-shrink: 0;
}

.media_list_btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sans-jp);
    font-size: 1.2rem;
    border: 0.5px solid var(--ink);
    padding: 8px 14px;
    color: var(--ink);
    background: transparent;
    transition: background-color 0.18s, color 0.18s;
}

.media_list_btn::after {
    content: '→';
    font-family: var(--mono);
}

.p-xicaron_contents .media_list_link:hover .media_list_btn {
    background-color: var(--ink);
    color: var(--paper);
}


/* =========================================================
   5. PAGINATION
   ========================================================= */

.pagination {
    margin-top: clamp(40px, 6vw, 64px) !important;
}

.pagination .page-numbers {
    font-family: var(--mono) !important;
    font-size: 1.2rem !important;
    border-radius: 0 !important;
    transition: background-color 0.18s, color 0.18s !important;
}

.pagination .page-numbers:hover {
    background-color: var(--ink) !important;
    color: var(--paper) !important;
}

.pagination .page-numbers.current {
    background-color: var(--ink) !important;
    color: var(--paper) !important;
}

/* Prev / next arrows — keep existing SVG bg-image, just ensure ink bg */
.pagination .prev,
.pagination .next {
    background-color: var(--ink) !important;
    border-radius: 0 !important;
}


/* =========================================================
   6. SINGLE — TWO-COLUMN LAYOUT
   detail.css uses position:absolute on .post_sub which
   requires .p-post_wrap to be position:relative — fragile
   and incompatible with the rebrand width overrides.
   Replace entirely with a CSS grid: article | sidebar.
   Scoped to body.--detail so archive is unaffected.
   ========================================================= */

body.--detail .p-post_detail {
    padding-top: 0;
}

body.--detail .p-post_wrap {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: clamp(40px, 6vw, 80px);
    align-items: start;
    max-width: var(--container);
    margin: 0 auto;
    /* detail.css handles width / margin / padding on .p-post_detail —
       adding any box-model here creates double-padding and horizontal overflow */
    position: static;
}

@media (max-width: 1023px) {
    body.--detail .p-post_wrap {
        grid-template-columns: 1fr;
    }
}

/* Kill detail.css absolute positioning on the sidebar */
body.--detail .post_sub {
    position: static !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
}

/* Ensure article never exceeds a comfortable reading measure */
body.--detail .p-post_article {
    width: 100% !important;
    max-width: none !important;
    min-width: 0; /* prevent grid blowout on long words */
}

/* =========================================================
   7. SINGLE — BREADCRUMB
   Mono micro-label row; sits flush under the fixed header.
   ========================================================= */

.xr-xi-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    font-family: var(--mono);
    font-size: 1.0rem;
    letter-spacing: 0.08em;
    color: var(--grey-2);
    padding: 14px var(--xr-xi-inner-x);
    max-width: var(--container);
    margin-inline: auto;
    border-bottom: 0.5px solid var(--rule);
    list-style: none;
}

.xr-xi-breadcrumb li {
    display: flex;
    align-items: center;
}

/* Separator — mono slash */
.xr-xi-breadcrumb li + li::before {
    content: '/';
    color: var(--grey-3);
    margin-inline: 8px;
    font-family: var(--mono);
}

.xr-xi-breadcrumb a {
    color: var(--grey-2);
    text-decoration: none;
    transition: color 0.18s;
}

.xr-xi-breadcrumb a:hover {
    color: var(--ink);
}

/* Current page — ink, no link */
.xr-xi-breadcrumb li:last-child {
    color: var(--ink);
}

/* Inner span carries the truncation — needs display:block for text-overflow to fire.
   Cannot apply directly to the li because li is display:flex (for the / separator),
   and text-overflow is silently ignored on flex containers. */
.xr-xi-bc-title {
    display: block;
    max-width: 36ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 * Ellipsis item — hidden on desktop, shown on mobile to replace
 * the collapsed intermediate levels.
 * Result:  desktop → Home / Xicaron / Category / Title
 *          mobile  → Home / … / Title
 */
.xr-xi-bc-ellipsis {
    display: none;
    color: var(--grey-2);
    cursor: default;
    user-select: none;
    letter-spacing: 0.04em; /* loosen the dots slightly */
}

@media (max-width: 767px) {
    /* Show the ellipsis placeholder */
    .xr-xi-bc-ellipsis {
        display: flex;
    }
    /* Hide everything between first and last — the ellipsis takes their place */
    .xr-xi-breadcrumb li:not(:first-child):not(:last-child):not(.xr-xi-bc-ellipsis) {
        display: none;
    }
}


/* =========================================================
   8. SINGLE — ARTICLE HEADER
   Scope: body.--detail .p-post
   ========================================================= */

/* Article title — serif-jp, page-scale */
.p-post_header_title {
    font-family: var(--serif-jp) !important;
    font-size: clamp(2.2rem, 3.5vw, 3.4rem) !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.005em !important;
    color: var(--ink) !important;
}

/* Hero image — hairline border frame */
.p-post_header_img {
    border: 0.5px solid var(--rule) !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

.p-post_header_img img {
    width: 100% !important;
    display: block !important;
}

/* Dateline / meta row */
.p-post_header_box {
    border-top: 0.5px solid var(--rule) !important;
    border-bottom: 0.5px solid var(--rule) !important;
    background: transparent !important;
}

.p-post_header_time {
    font-family: var(--mono) !important;
    font-size: 1.0rem !important;
    letter-spacing: 0.08em !important;
    color: var(--grey-2) !important;
}

.p-post_header_category {
    font-family: var(--mono) !important;
    font-size: 1.0rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--grey-1) !important;
}

.p-post_header_category a {
    color: inherit !important;
    text-decoration: none !important;
}

.p-post_header_category a:hover {
    color: var(--ink) !important;
}

/* Tag chips on single post header */
.p-post_header_tags .tag,
.p-post_header_tags a.tag {
    font-family: var(--sans-jp) !important;
    font-size: 1.2rem !important;
    background: transparent !important;
    border: 0.5px solid var(--rule) !important;
    border-radius: 0 !important;
    padding: 3px 8px !important;
    color: var(--grey-1) !important;
    text-decoration: none !important;
    transition: background-color 0.18s, color 0.18s, border-color 0.18s !important;
}

.p-post_header_tags .tag:hover,
.p-post_header_tags a.tag:hover {
    background-color: var(--ink) !important;
    color: var(--paper) !important;
    border-color: var(--ink) !important;
}


/* =========================================================
   9. SINGLE — POST BODY TYPOGRAPHY
   Gutenberg column block overrides (add_style_for-column.css)
   are left intact. Only global heading/para/list/link tokens
   are set here.
   ========================================================= */

.p-post_body {
    font-family: var(--sans-jp);
    color: var(--ink-2);
}

.p-post_body h2 {
    font-family: var(--serif-jp) !important;
    font-size: clamp(1.8rem, 2.5vw, 2.4rem) !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: var(--ink) !important;
    border-top: 1px solid var(--ink) !important;
    padding-top: 20px !important;
    margin-top: 56px !important;
    margin-bottom: 20px !important;
}

.p-post_body h3 {
    font-family: var(--sans-jp) !important;
    font-size: clamp(1.5rem, 2vw, 1.8rem) !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    color: var(--ink) !important;
    margin-top: 40px !important;
    margin-bottom: 14px !important;
}

.p-post_body h4 {
    font-family: var(--sans-jp) !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
    margin-top: 28px !important;
    margin-bottom: 10px !important;
}

.p-post_body p {
    font-family: var(--sans-jp) !important;
    font-size: 1.5rem !important;
    line-height: 1.9 !important;
    color: var(--ink-2) !important;
    text-wrap: pretty;
}

.p-post_body strong,
.p-post_body b {
    font-weight: 700 !important;
    color: var(--ink) !important;
}

.p-post_body a {
    color: var(--ink) !important;
    text-decoration-color: var(--grey-3) !important;
    text-underline-offset: 3px !important;
    transition: text-decoration-color 0.18s !important;
}

.p-post_body a:hover {
    text-decoration-color: var(--ink) !important;
}

.p-post_body ul,
.p-post_body ol {
    font-family: var(--sans-jp) !important;
    font-size: 1.5rem !important;
    line-height: 1.85 !important;
    color: var(--ink-2) !important;
}

.p-post_body blockquote {
    border-left: 0.5px solid var(--grey-2) !important;
    padding-left: 20px !important;
    color: var(--grey-1) !important;
    font-style: italic !important;
    margin-inline: 0 !important;
    border-radius: 0 !important;
}

/* Inline images within post body */
.p-post_body figure img,
.p-post_body > img {
    display: block;
    max-width: 100%;
}

/* Table of contents (if TOC plugin is active) */
#toc_container {
    background: var(--paper-3) !important;
    border: 0.5px solid var(--rule) !important;
    border-radius: 0 !important;
    padding: 20px 24px !important;
    margin-block: 32px !important;
    box-shadow: none !important;
}

#toc_container .toc_title {
    font-family: var(--mono) !important;
    font-size: 1.0rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--grey-1) !important;
    font-weight: 400 !important;
    border-bottom: 0.5px solid var(--rule) !important;
    padding-bottom: 10px !important;
    margin-bottom: 12px !important;
}

#toc_container .toc_list li {
    font-family: var(--sans-jp) !important;
    font-size: 1.3rem !important;
    line-height: 1.75 !important;
}

#toc_container .toc_list a {
    color: var(--ink-2) !important;
    text-decoration: none !important;
}

#toc_container .toc_list a:hover {
    color: var(--ink) !important;
}


/* =========================================================
   10. SINGLE — RECOMMENDED POSTS
   3-col hairline grid, same card pattern as archive.
   ========================================================= */

.p-post_reccomend {
    margin-top: clamp(48px, 7vw, 80px) !important;
    padding-top: clamp(20px, 3vw, 32px) !important;
    border-top: 1px solid var(--ink) !important;
}

.p-post_reccomend_title {
    font-family: var(--mono) !important;
    font-size: 1.0rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--grey-1) !important;
    margin-bottom: 20px !important;
}

.p-post_reccomend_list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1px !important;
    background-color: var(--rule) !important;
    border: 0.5px solid var(--rule) !important;
    margin: 0 !important;
    list-style: none !important;
    padding: 0 !important;
}

@media (max-width: 768px) {
    .p-post_reccomend_list {
        grid-template-columns: 1fr !important;
    }
}

/* Card cell */
.p-post_reccomend_list .media_list_card {
    background-color: var(--paper);
    width: 100% !important;
    margin: 0 !important;
    max-width: none !important;
    display: flex !important;
}

.p-post_reccomend_list .media_list_link {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: var(--xr-xi-card-pad) !important;
    text-decoration: none !important;
    transition: background-color 0.18s !important;
}

.p-post_reccomend_list .media_list_link:hover {
    background-color: var(--paper-2) !important;
}

.p-post_reccomend_list .media_list_link:hover .media_list_img {
    box-shadow: none !important;
}

/* Thumbnail */
.p-post_reccomend_list .media_list_img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
    overflow: hidden !important;
    border: 0.5px solid var(--rule) !important;
    margin-bottom: 12px !important;
    transition: none !important;
}

.p-post_reccomend_list .media_list_img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    min-width: unset !important;
    min-height: unset !important;
}

/* Meta */
.p-post_reccomend_list .media_list_status {
    display: flex !important;
    align-items: center !important;
    margin-top: 0 !important;
}

.p-post_reccomend_list .media_list_time {
    font-family: var(--mono) !important;
    font-size: 1.0rem !important;
    letter-spacing: 0.08em !important;
    color: var(--grey-2) !important;
}

.p-post_reccomend_list .media_list_category {
    font-family: var(--mono) !important;
    font-size: 1.0rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--grey-1) !important;
}

.p-post_reccomend_list .media_list_category::before {
    content: '\00a0/\00a0' !important;
    background: none !important;
    width: auto !important;
    height: auto !important;
    display: inline !important;
    vertical-align: baseline !important;
    margin: 0 !important;
    color: var(--grey-3) !important;
}

.p-post_reccomend_list .media_list_text {
    font-family: var(--sans-jp) !important;
    font-size: 1.3rem !important;
    line-height: 1.6 !important;
    color: var(--ink) !important;
    margin-top: 8px !important;
    font-weight: normal !important;
}

.p-post_reccomend_list .media_list_text::before {
    display: none !important;    /* kill ranking number pseudo-element if present */
}


/* =========================================================
   11. LEGACY OVERRIDE RULES
   Applied last — reset patterns that can't be scoped
   cleanly above.
   ========================================================= */

/* Kill all rounded corners within xicaron scope */
.p-xicaron * {
    border-radius: 0 !important;
}

/* f4f4f4 fills → brand warm surface */
.p-xicaron_top,
.p-xicaron_top .media_list_box {
    background-color: var(--paper-3) !important;
}

/* Statement section legacy top-padding inline style is overridden
   by the padding declarations on .xr-xi-hero above. */

/* Kill all box shadows site-wide within xicaron context */
.p-xicaron *,
.p-post.p-xicaron * {
    box-shadow: none !important;
}

/* Kill JS character-split animation — same pattern as section 11
   of xica-rebrand.css for capability pages */
.p-xicaron .js-trigger,
.p-xicaron .js-effect,
.p-post.p-xicaron .js-trigger,
.p-post.p-xicaron .js-effect {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    letter-spacing: inherit !important;
    transition: none !important;
}

.p-xicaron .preEffect,
.p-xicaron .inEffect {
    letter-spacing: normal !important;
    opacity: 1 !important;
}

.p-xicaron .preEffect span,
.p-xicaron .inEffect span {
    color: inherit !important;
    mix-blend-mode: normal !important;
}

/* Pagination arrow SVG containers — color already set above;
   this ensures no legacy border bleeds through */
.pagination .prev,
.pagination .next {
    border: none !important;
}