/* =============================================================
   XICA REBRAND — MEDIA ARCHIVES (shared)
   File:  assets/css/xica-rebrand-media.css
   Scope: body.--media-archive  (all three archives)
          body.--interview / --report / --seminar  (per-type)
   Loads: AFTER the legacy per-archive css
          (archive-interview.css / archive-free_report.css /
           archive-seminar.css) so these rules win on equal
           specificity; high-specificity + !important used only
           where legacy markup must remain untouched.
   Tokens: all globals from xica-rebrand.css are available.
   New classes use the  xr-ma-  prefix.
   ============================================================= */


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


/* =========================================================
   1. DARK HERO  (.xr-ma-hero)
   Replaces the legacy .p-*_logo block. Mirrors the
   .bg-ink.page-hero / xicaron hero pattern: full ink panel,
   mono EN eyebrow, JP serif H1, optional lede.
   ========================================================= */

.xr-ma-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-ma-hero-inner {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--xr-ma-inner-x);
    box-sizing: border-box;
}

.xr-ma-eyebrow {
    display: block;
    font-family: var(--mono);
    font-size: 1.1rem;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.40);
    margin-bottom: 22px;
}

.xr-ma-h1 {
    font-family: var(--serif-jp);
    font-size: clamp(2.4rem, 4vw, 3.8rem);
    font-weight: 500;
    line-height: 1.32;
    letter-spacing: 0.005em;
    color: var(--paper);
    margin: 0;
    width: 100%;
    text-align: left;
    text-wrap-style: balance;
}

.xr-ma-lede {
    font-family: var(--sans-jp);
    font-size: 1.5rem;
    line-height: 1.9;
    color: rgba(255,255,255,0.70);
    margin: 22px 0 0;
    /* max-width: 60ch; */
    text-wrap: pretty;
    text-align: left;
    font-weight: 400;
}

.xr-ma-lede + .xr-ma-lede {
    margin-top: 8px;
}

/* Taxonomy / filtered header — light variant, shown when the
   archive is a category/tag view. */
.xr-ma-tax-hd {
    max-width: var(--container);
    margin-inline: auto;
    box-sizing: border-box;
    padding-top: calc(var(--header-h) + clamp(32px, 5vw, 56px));
    padding-bottom: clamp(28px, 4vw, 44px);
    padding-inline: var(--xr-ma-inner-x);
    border-bottom: 0.5px solid var(--rule);
}

.xr-ma-tax-hd .xr-ma-eyebrow {
    color: var(--grey-1);
    margin-bottom: 14px;
}

.xr-ma-tax-hd .xr-ma-h1 {
    color: var(--ink);
    font-size: clamp(1.8rem, 3vw, 2.8rem);
}


/* =========================================================
   2. SECTION HEAD  (.xr-ma-sec-head)
   Left-aligned editorial section label that replaces the
   centred, inline-styled <h2> in each archive's list block.
   ========================================================= */

.xr-ma-sec-head {
    max-width: var(--container);
    margin: 0 auto;
    box-sizing: border-box;
    padding-inline: var(--xr-ma-inner-x);
    padding-top: var(--xr-ma-sec-pad);
}

.xr-ma-sec-head .xr-ma-sec-en {
    display: block;
    font-family: var(--mono);
    font-size: 1.1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grey-1);
    border-top: 1px solid var(--ink);
    padding-top: 14px;
    margin-bottom: 12px;
}

.xr-ma-sec-head .xr-ma-sec-jp {
    font-family: var(--serif-jp);
    font-size: clamp(1.8rem, 2.6vw, 2.4rem);
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink);
    margin-bottom: 20px;
}


/* =========================================================
   3. FEATURED CAROUSEL  (.p-*_top + Swiper)
   Restyle, not replace — Swiper keeps its layout mechanics;
   we reskin to a calm editorial panel below the dark hero:
   warm paper surface, hairline frame, square mono nav,
   thin-bar pagination.
   ========================================================= */

/* Bilingual micro-label above the carousel (added in PHP) */
.xr-ma-feature-label {
    max-width: var(--container);
    margin: var(--xr-ma-sec-pad) auto 18px;
    box-sizing: border-box;
    padding-inline: var(--xr-ma-inner-x);
    font-size: 1.1rem;
}

.xr-ma-feature-label .en {
    font-family: var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grey-1);
}

.xr-ma-feature-label .jp {
    font-family: var(--serif-jp);
    color: var(--ink);
    margin-left: 6px;
}

/* Panel — neutralise legacy f4f4f4 + left padding hacks */
.p-interview_top,
.p-report_top,
.p-seminar_top {
    background-color: var(--paper-2) !important;
    border-block: 0.5px solid var(--rule);
    margin: 0 !important;
    padding: clamp(24px, 4vw, 48px) 0 !important;
}

.p-interview_swiper,
.p-report_swiper,
.p-seminar_swiper {
    max-width: var(--container) !important;
    margin-inline: auto !important;
    padding-inline: var(--xr-ma-inner-x);
    box-sizing: border-box;
    background: transparent !important;
}

.p-interview_top .swiper-container,
.p-report_top .swiper-container,
.p-seminar_top .swiper-container {
    background: transparent !important;
}

/* Slide link — image left / copy right on desktop */
.p-interview_top .media_list_link,
.p-report_top .media_list_link,
.p-seminar_top .media_list_link {
    display: flex !important;
    gap: clamp(20px, 3vw, 40px) !important;
    align-items: stretch !important;
    text-decoration: none !important;
    background: transparent !important;
}

@media (max-width: 767px) {
    .p-interview_top .media_list_link,
    .p-report_top .media_list_link,
    .p-seminar_top .media_list_link {
        flex-direction: column !important;
        gap: 16px !important;
    }
}

/* Slide image — hairline frame, no shadow, fixed ratio */
.p-interview_top .media_list_img,
.p-report_top .media_list_img,
.p-seminar_top .media_list_img {
    flex: 0 0 54% !important;
    width: 54% !important;
    max-width: none !important;
    /* aspect-ratio: 3 / 2 !important; */
    height: auto !important;
    overflow: hidden !important;
    border: 0.5px solid var(--rule) !important;
    background: var(--paper) !important;
    margin: 0 !important;
    transition: none !important;
    display: block !important;
}

@media (max-width: 767px) {
    .p-interview_top .media_list_img,
    .p-report_top .media_list_img,
    .p-seminar_top .media_list_img {
        flex-basis: auto !important;
        width: 100% !important;
    }
}

.p-interview_top .media_list_img img,
.p-report_top .media_list_img img,
.p-seminar_top .media_list_img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.p-interview_top .media_list_link:hover .media_list_img,
.p-report_top .media_list_link:hover .media_list_img,
.p-seminar_top .media_list_link:hover .media_list_img {
    box-shadow: none !important;
}

/* Slide copy column */
.p-interview_top .media_list_box,
.p-report_top .media_list_box,
.p-seminar_top .media_list_box {
    flex: 1 1 auto !important;
    width: auto !important;
    padding: clamp(4px, 1vw, 16px) !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.p-interview_top .media_list_status,
.p-report_top .media_list_status,
.p-seminar_top .media_list_status {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin-bottom: 12px !important;
}

.p-interview_top .media_list_time,
.p-report_top .media_list_time,
.p-seminar_top .media_list_time {
    font-family: var(--mono) !important;
    font-size: 1.0rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--grey-2) !important;
}

.p-interview_top .media_list_category,
.p-report_top .media_list_category,
.p-seminar_top .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 the 1px bar separator with a mono slash */
.p-interview_top .media_list_category::before,
.p-report_top .media_list_category::before,
.p-seminar_top .media_list_category::before {
    content: '\00a0/\00a0' !important;
    background: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    display: inline !important;
    vertical-align: baseline !important;
    color: var(--grey-3) !important;
}

.p-interview_top .media_list_text,
.p-report_top .media_list_text,
.p-seminar_top .media_list_text {
    font-family: var(--serif-jp) !important;
    font-weight: 500 !important;
    font-size: clamp(1.8rem, 2.4vw, 2.4rem) !important;
    line-height: 1.4 !important;
    color: var(--ink) !important;
    margin: 0 0 8px !important;
}

.p-interview_top .media_list_text.subtitle,
.p-report_top .media_list_text.subtitle,
.p-seminar_top .media_list_text.subtitle,
.p-interview_top .media_list_text.subtext,
.p-report_top .media_list_text.subtext,
.p-seminar_top .media_list_text.subtext,
.p-interview_top .media_list_text.desc,
.p-seminar_top .media_list_text.desc {
    font-family: var(--sans-jp) !important;
    font-weight: 400 !important;
    font-size: 1.4rem !important;
    line-height: 1.8 !important;
    color: var(--ink-2) !important;
}

/* Swiper controls row */
.swiper-set {
    max-width: var(--container);
    margin: 20px auto 0 !important;
    padding-inline: var(--xr-ma-inner-x);
    box-sizing: border-box;
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px;
}

/* Square mono nav buttons — swap SVG bg for glyphs */
.swiper-button,
.p-interview_swiper-button-prev, .p-interview_swiper-button-next,
.p-report_swiper-button-prev, .p-report_swiper-button-next,
.p-seminar_swiper-button-prev, .p-seminar_swiper-button-next {
    width: 38px !important;
    height: 38px !important;
    background: var(--paper) !important;
    border: 0.5px solid var(--ink) !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: background-color 0.18s, color 0.18s !important;
    color: var(--ink);
}

.swiper-button:hover,
[class*="_swiper-button-prev"]:hover,
[class*="_swiper-button-next"]:hover {
    background: var(--ink) !important;
    color: var(--paper) !important;
    opacity: 1 !important;
}

[class*="_swiper-button-prev"]::after,
[class*="_swiper-button-next"]::after {
    font-family: var(--mono) !important;
    font-size: 1.4rem !important;
    line-height: 1 !important;
    background: none !important;
    width: auto !important;
    height: auto !important;
    color: inherit !important;
}

[class*="_swiper-button-prev"]::after { content: '\2190' !important; } /* ← */
[class*="_swiper-button-next"]::after { content: '\2192' !important; } /* → */

/* Thin-bar pagination */
.swiper-pagination {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px;
    margin-left: 8px !important;
    width: auto !important;
}

.swiper-pagination-bullet {
    width: 22px !important;
    height: 2px !important;
    border-radius: 0 !important;
    background-color: var(--grey-3) !important;
    opacity: 1 !important;
    margin: 0 !important;
}

.swiper-pagination-bullet-active {
    background-color: var(--ink) !important;
}


/* =========================================================
   4. ARCHIVE LAYOUT — sidebar | list grid
   interview & report carry a .post_sub sidebar; seminar
   does not, so it runs full width.
   ========================================================= */

.p-interview_contents,
.p-report_contents,
.p-seminar_contents {
    padding-bottom: var(--xr-ma-sec-pad);
    margin-top: 0 !important;
}

.p-interview_contents_inner,
.p-report_contents_inner {
    max-width: var(--container) !important;
    width: 100% !important;
    margin-inline: auto !important;
    padding-inline: var(--xr-ma-inner-x) !important;
    padding-left: var(--xr-ma-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;
}

.p-seminar_contents_inner {
    max-width: var(--container) !important;
    width: 100% !important;
    margin-inline: auto !important;
    padding-inline: var(--xr-ma-inner-x) !important;
    box-sizing: border-box !important;
    display: block !important;
}

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

/* Kill legacy flex / percentage widths / top border on wrappers */
.p-interview_contents_wrap,
.p-report_contents_wrap,
.p-seminar_contents_wrap {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    border-top: none !important;
    padding-right: 0 !important;
}

.p-interview_list_wrap,
.p-report_list_wrap,
.p-seminar_list_wrap {
    width: 100% !important;
    max-width: none !important;
}


/* =========================================================
   5. SIDEBAR  (.post_sub) — interview & report
   ========================================================= */

.--media-archive .post_sub {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.--media-archive .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;
}

@media (max-width: 1023px) {
    .--media-archive .post_sub_title { cursor: pointer !important; }
}

.--media-archive .post_sub_list {
    margin-top: 10px !important;
    flex-wrap: wrap !important;
}

.--media-archive .post_sub_list li { position: static !important; }
.--media-archive .post_sub_list li + li { margin-top: 0 !important; }

.--media-archive .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;
}

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

/* Hide legacy radio-bullet pseudo graphics + per-category colours */
.--media-archive .post_sub_label::before,
.--media-archive .post_sub_label::after {
    display: none !important;
    background: none !important;
}

.--media-archive .post_sub_list .active > .post_sub_label,
.--media-archive .post_sub_radio:checked + .post_sub_label {
    color: var(--ink) !important;
    font-weight: 600 !important;
}

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

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

.--media-archive .post_sub_tags .post_sub_taglist li { margin: 0 !important; }

.--media-archive .post_sub_tags .tag {
    font-family: var(--sans-jp) !important;
    font-size: 1.2rem !important;
    line-height: 1.2 !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;
}

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

.--media-archive .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: 12px !important;
    display: block !important;
}

.--media-archive .post_sub_tags .open-btn::before { display: none !important; }
.--media-archive .post_sub_tags .open-btn::after { content: ' \2192'; font-family: var(--mono); }
.--media-archive .post_sub_tags .open-btn.open::after { content: ' \2191'; }


/* =========================================================
   6. ARTICLE CARD GRID
   Hairline-gap grid (1px gap on rule background). interview &
   report → 2 columns (narrowed by sidebar); seminar → 3.
   ========================================================= */

/* List-block heading (the legacy centred <h2>, now cleaned) */
.p-interview_contents_title,
.p-report_contents_title,
.p-seminar_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: 0 !important;
}

.p-interview_contents_title .tag,
.p-report_contents_title .tag { display: none !important; }

/* Grids */
.p-interview_contents .media_list,
.p-report_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;
}

.p-seminar_contents .media_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-top: 20px !important;
    align-items: stretch !important;
}

@media (max-width: 900px) {
    .p-seminar_contents .media_list { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
    .p-interview_contents .media_list,
    .p-report_contents .media_list,
    .p-seminar_contents .media_list { grid-template-columns: 1fr !important; }
}

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

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

.p-interview_contents .media_list_link:hover,
.p-report_contents .media_list_link:hover,
.p-seminar_contents .media_list_link:hover {
    background-color: var(--paper-2) !important;
}

/* Defeat legacy hover shadows */
.p-interview_contents .media_list_link:hover .media_list_img,
.p-report_contents .media_list_link:hover .media_list_img,
.p-seminar_contents .media_list_link:hover .media_list_img {
    box-shadow: none !important;
}

/* Thumbnail — aspect-ratio replaces padding-bottom hack;
   neutralise absolute-positioned / scaled legacy <img>. */
.p-interview_contents .media_list_img.thumbnail,
.p-interview_contents .media_list_img:not(.logo),
.p-report_contents .media_list_img,
.p-seminar_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: 0 0 14px !important;
    padding-bottom: 0 !important;
    position: relative !important;
    transition: none !important;
}

.p-interview_contents .media_list_img:not(.logo) img,
.p-report_contents .media_list_img img,
.p-seminar_contents .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;
}

/* interview: client logo lock-up (kept small, no frame) */
.p-interview_contents .media_list_link_inner_top {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 4px !important;
}

.p-interview_contents .media_list_img.logo {
    width: 64px !important;
    height: 34px !important;
    flex: 0 0 64px !important;
    padding-bottom: 0 !important;
    border: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: relative !important;
}

.p-interview_contents .media_list_img.logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: left center !important;
    position: static !important;
    transform: none !important;
    min-width: unset !important;
    min-height: unset !important;
}

.p-interview_contents .media_list_link_inner_top .media_list_text {
    font-family: var(--sans-jp) !important;
    font-size: 1.2rem !important;
    color: var(--grey-1) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Meta line */
.p-interview_contents .media_list_status,
.p-report_contents .media_list_status {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 0 4px !important;
    flex-shrink: 0;
}

.p-interview_contents .media_list_label,
.p-report_contents .media_list_label {display: none !important;}

.p-interview_contents .media_list_time,
.p-report_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-interview_contents .media_list_category,
.p-report_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;
}

.p-interview_contents .media_list_category::before,
.p-report_contents .media_list_category::before {
    content: '' !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    display: none !important;
}

/* Card titles */
.p-interview_contents .media_list_text.main_title,
.p-report_contents .media_list_text.title,
.p-seminar_contents .media_list_text.title {
    font-family: var(--serif-jp) !important;
    font-weight: 500 !important;
    font-size: 1.6rem !important;
    line-height: 1.5 !important;
    color: var(--ink) !important;
    margin: 6px 0 0 !important;
    flex: 1 0 auto;
}

.p-report_contents .media_list_text.subtitle,
.p-seminar_contents .media_list_text.subtitle {
    font-family: var(--sans-jp) !important;
    font-size: 1.3rem !important;
    line-height: 1.6 !important;
    color: var(--ink-2) !important;
    margin: 6px 0 0 !important;
}

.p-report_contents .media_list_text.subtext,
.p-seminar_contents .media_list_text.subtext {
    font-family: var(--sans-jp) !important;
    font-size: 1.2rem !important;
    line-height: 1.7 !important;
    color: var(--grey-1) !important;
    margin: 6px 0 0 !important;
}

/* seminar status row (application + on/offline) */
.p-seminar_contents .media_list_status {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 12px 0 0 !important;
}

.p-seminar_contents .media_list_application,
.p-seminar_contents .media_list_hold {
    font-family: var(--mono) !important;
    font-size: 1.0rem !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    border: 0.5px solid var(--rule) !important;
    border-radius: 0 !important;
    padding: 3px 8px !important;
    color: var(--grey-1) !important;
    background: transparent !important;
}

.p-seminar_contents .media_list_application {
    border-color: var(--ink) !important;
    color: var(--ink) !important;
}

/* report: tag chips beneath the card */
.p-report_contents .media_list_tag {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 12px !important;
}

.p-report_contents .media_list_tag .tag {
    font-family: var(--sans-jp) !important;
    font-size: 1.1rem !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    background: transparent !important;
    border: 0.5px solid var(--rule) !important;
    border-radius: 0 !important;
    padding: 3px 7px !important;
    color: var(--grey-1) !important;
    transition: background-color 0.18s, color 0.18s, border-color 0.18s !important;
    display: none!important;
}

.p-report_contents .media_list_tag .tag:hover {
    background: var(--ink) !important;
    color: var(--paper) !important;
    border-color: var(--ink) !important;
}

/* The report tags sit outside the <a>, so lift them into the
   flex card and keep them at the bottom. */
.p-report_contents .media_list_card { position: relative; }

/* CTA button — shared with xicaron .media_list_btn */
.--media-archive .media_list_action { margin-top: 16px; flex-shrink: 0; }

.--media-archive .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;
    width: 66%;
}

.--media-archive .media_list_btn::after {
    content: '\2192';
    font-family: var(--mono);
    top: 13px;
}

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


/* =========================================================
   7. PAGINATION  (shared with xicaron treatment)
   ========================================================= */

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

.--media-archive .pagination .nav-links {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 5px;
}

.--media-archive .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;
}

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

.--media-archive .pagination .prev,
.--media-archive .pagination .next {
    background-color: var(--ink) !important;
    border-radius: 0 !important;
    border: none !important;
}


/* =========================================================
   8. NO-ARTICLE STATE
   ========================================================= */

.p-report_no-article_wrapper,
.p-seminar_no-article_wrapper {
    padding-block: 40px !important;
}

.p-report_no-article,
.p-seminar_no-article {
    font-family: var(--sans-jp) !important;
    font-size: 1.4rem !important;
    color: var(--grey-1) !important;
}


/* =========================================================
   9. LEGACY OVERRIDE NET  (applied last)
   ========================================================= */

/* No rounded corners / shadows anywhere in archive scope
   (dot indicators excepted by their own 50% rule elsewhere). */
.p-interview *, .p-report *, .p-seminar * {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Disable the legacy char-split / fade-top animation system
   (common.js) within the rebranded archives — we use .js-reveal. */
.--media-archive .js-trigger,
.--media-archive .js-effect,
.--media-archive .preEffect,
.--media-archive .inEffect {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    letter-spacing: normal !important;
}

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