/* =============================================================
   XICA REBRAND — FIGURE SYSTEM (SVG figures + photography)
   File:   assets/css/xica-rebrand-figures.css
   Loads:  AFTER xica-rebrand.css (tokens) on any page using
           .xr-fig / .xr-photo components.
   Engine: all entrance states key off the EXISTING global
           reveal engine (.js-reveal → .is-visible). No new JS.
   Prefix: xr-fig- / xr-photo- / xr-glyph-
   ============================================================= */

/* =========================================================
   1. FIGURE FRAME — annotated, not decorated
   A figure = hairline frame + mono caption row + corner
   ticks. Same grammar as .aide-arch-wrap, generalized.
   ========================================================= */
.xr-fig {
    position: relative;
    border: 0.5px solid var(--rule);
    background: var(--paper);
    padding: clamp(20px, 3vw, 36px);
    margin: 0; /* figure element reset */
}
.xr-fig--flush { padding: 0; } /* photography variant */

/* Corner ticks — static registration marks (same L-mark idea
   as .xr-film__trigger, but permanent and ink-on-paper). */
.xr-fig::before,
.xr-fig::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    pointer-events: none;
}
.xr-fig::before {
    top: -0.5px; left: -0.5px;
    border-top: 1px solid var(--ink);
    border-left: 1px solid var(--ink);
}
.xr-fig::after {
    bottom: -0.5px; right: -0.5px;
    border-bottom: 1px solid var(--ink);
    border-right: 1px solid var(--ink);
}

/* Caption row — FIG. NN | label, optional right-side legend */
.xr-fig-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 0.5px solid var(--rule);
    margin-bottom: clamp(16px, 2.5vw, 24px);
}
.xr-fig--flush .xr-fig-head {
    padding: 14px clamp(16px, 2.5vw, 24px) 12px;
    margin-bottom: 0;
}
.xr-fig-num {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
.xr-fig-label {
    font-family: var(--serif-jp);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--grey-1);
    margin-left: 12px;
}
.xr-fig-legend {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grey-2);
    white-space: nowrap;
}

/* Caption under the figure (outside the frame) */
.xr-fig-cap {
    margin-top: 10px;
    font-family: var(--sans-jp);
    font-size: 12px;
    line-height: 1.7;
    color: var(--grey-1);
}

.xr-fig svg { width: 100%; height: auto; display: block; }

/* SVG text roles (works because inline SVG inherits page CSS) */
.xr-fig .fig-t-mono {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    fill: var(--grey-2);
}
.xr-fig .fig-t-mono--ink { fill: var(--ink); }
.xr-fig .fig-t-jp {
    font-family: var(--serif-jp);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.04em;
    fill: var(--ink);
}
.xr-fig .fig-t-jp--grey { fill: var(--grey-1); }
.xr-fig .fig-t-sans {
    font-family: var(--sans-jp);
    font-size: 11px;
    fill: var(--grey-1);
}

/* =========================================================
   2. FIGURE ANIMATION STATES
   Keyed off the EXISTING engine: the figure (or an ancestor)
   carries .js-reveal; the engine adds .is-visible. Draw paths
   need pathLength="1" in markup (same trick as .aide-arch-draw).
   Per-element delay via inline style="--d: 0.4s".
   ========================================================= */
.js-reveal .xr-fig-draw,
.js-reveal-stagger .xr-fig-draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s);
}
.js-reveal.is-visible .xr-fig-draw,
.js-reveal-stagger.is-visible .xr-fig-draw { stroke-dashoffset: 0; }

.js-reveal .xr-fig-fade,
.js-reveal-stagger .xr-fig-fade {
    opacity: 0;
    transition: opacity 0.6s ease var(--d, 0s);
}
.js-reveal.is-visible .xr-fig-fade,
.js-reveal-stagger.is-visible .xr-fig-fade { opacity: 1; }

.js-reveal .xr-fig-rise,
.js-reveal-stagger .xr-fig-rise {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s ease var(--d, 0s),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s);
}
.js-reveal.is-visible .xr-fig-rise,
.js-reveal-stagger.is-visible .xr-fig-rise { opacity: 1; transform: translateY(0); }

.js-reveal .xr-fig-pop,
.js-reveal-stagger .xr-fig-pop {
    transform: scale(0);
    transform-origin: center;
    transform-box: fill-box;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s);
}
.js-reveal.is-visible .xr-fig-pop,
.js-reveal-stagger.is-visible .xr-fig-pop { transform: scale(1); }

/* TMM separation — the two strata slide apart */
.js-reveal .xr-fig-split-up,
.js-reveal .xr-fig-split-down {
    transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0.5s);
}
.js-reveal.is-visible .xr-fig-split-up   { transform: translateY(-18px); }
.js-reveal.is-visible .xr-fig-split-down { transform: translateY(18px); }

@media (prefers-reduced-motion: reduce) {
    .js-reveal .xr-fig-draw, .js-reveal-stagger .xr-fig-draw,
    .js-reveal .xr-fig-fade, .js-reveal-stagger .xr-fig-fade,
    .js-reveal .xr-fig-rise, .js-reveal-stagger .xr-fig-rise,
    .js-reveal .xr-fig-pop,  .js-reveal-stagger .xr-fig-pop {
        opacity: 1; transform: none; stroke-dashoffset: 0; transition: none;
    }
    .js-reveal .xr-fig-split-up   { transform: translateY(-18px); transition: none; }
    .js-reveal .xr-fig-split-down { transform: translateY(18px);  transition: none; }
}

/* =========================================================
   3. MARGINAL GLYPHS — the cross-page rhythm system
   Small mono-line SVG marks that sit beside repeated rows
   (steps, levers, value items). One stroke weight, currentColor.
   ========================================================= */
.xr-glyph {
    display: block;
    width: 44px;
    height: 44px;
    color: var(--grey-1);
    flex-shrink: 0;
}
.xr-glyph svg { width: 100%; height: 100%; display: block; }
.xr-glyph svg * {
    vector-effect: non-scaling-stroke;
}
/* On ink cards (IGNITION steps 01–04) */
.hairline-box-dark .xr-glyph,
.bg-ink .xr-glyph { color: rgba(255, 255, 255, 0.55); }

/* Placement: top-left of a padded card (IGNITION steps) */
.xr-glyph--card {
    position: absolute;
}
.xr-glyph-host { position: relative; }
.xr-glyph-host > h3 { padding-left: 64px; } /* keep titles clear of the glyph */

/* Placement: stacked under a row index (RGM levers, CRM values) */
.xr-glyph--index {
    width: 72px;
    height: 72px;
    color: var(--grey-2);
}
@media (max-width: 767px) {
    .xr-glyph--index { 
    width: 160px;
    height:160px;
}}

/* =========================================================
   4. PHOTOGRAPHY — one treatment, everywhere
   Desaturated, slightly lifted, warmed toward paper-3 via a
   multiply veil. Drop a real src in; until then .is-empty
   renders the placeholder state on existing tokens.
   ========================================================= */
.xr-photo {
    position: relative;
    overflow: hidden;
    background: var(--paper-3);
    border: 0.5px solid var(--rule);
}
.xr-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.92) contrast(0.94) brightness(1.03);
}
/* Warm veil — pulls the grey toward the paper family */
.xr-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--paper-3);
    mix-blend-mode: multiply;
    opacity: 0.45;
    pointer-events: none;
}
/* Registration ticks on photographs too — same identity */
.xr-photo .xr-photo-tick-tl,
.xr-photo .xr-photo-tick-br {
    position: absolute;
    width: 14px; height: 14px;
    z-index: 2;
    pointer-events: none;
}
.xr-photo .xr-photo-tick-tl {
    top: 10px; left: 10px;
    border-top: 1px solid var(--paper);
    border-left: 1px solid var(--paper);
    mix-blend-mode: difference;
}
.xr-photo .xr-photo-tick-br {
    bottom: 10px; right: 10px;
    border-bottom: 1px solid var(--paper);
    border-right: 1px solid var(--paper);
    mix-blend-mode: difference;
}

/* Wide editorial band (between sections) */
.xr-photo--band { aspect-ratio: 21 / 7; }
@media (max-width: 767px) { .xr-photo--band { aspect-ratio: 16 / 9; } }

/* In-card case imagery (RGM cases) */
.xr-photo--case {
    aspect-ratio: 16 / 9;
    margin-bottom: 24px;
}

/* Empty state — until the photograph is chosen */
.xr-photo.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
}
.xr-photo.is-empty::after { display: none; }
.xr-photo-empty-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grey-2);
    text-align: center;
    line-height: 2;
    padding: 24px;
}

/* Band caption (mono, outside the image, bottom-left) */
.xr-photo-band-cap {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 10px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grey-2);
}

/* =========================================================
   5. LAYOUT HELPERS for figure insertion
   ========================================================= */
.xr-fig-block { margin-block: clamp(32px, 5vw, 56px); }
.xr-fig-block--tight { margin-block: clamp(20px, 3vw, 32px); }

/* RGM lever grid gains nothing structurally — glyph stacks
   inside the existing index column. CRM value head likewise. */

/* =========================================================
   6. IGNITION PAGE ADDITIONS (page-ignition.php v2)
   Prefix: xr-ign-  ·  Reuses global tokens + utilities;
   ledger grammar mirrors the RGM lever pattern.
   ========================================================= */
 
/* 発見/選択 concept block */
.xr-ign-concept {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
}
.xr-ign-concept-thesis {
    font-family: var(--serif-jp);
    font-weight: 500;
    font-size: clamp(20px, 2.8vw, 28px);
    line-height: 1.6;
    color: var(--ink);
    margin-bottom: clamp(20px, 3vw, 28px);
}
.xr-ign-concept-body {
    font-family: var(--serif-jp);
    font-size: clamp(15px, 1.9vw, 18px);
    line-height: 2;
    color: var(--ink-2);
}
.xr-ign-concept-link {
    display: inline-block;
    margin-top: clamp(20px, 3vw, 28px);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grey-1);
}
.xr-ign-concept-link:hover { color: var(--ink); }
 
/* Key Stone ledger — POF / POP / POD */
.xr-ign-keystone { border-top: 1px solid var(--ink); }
.xr-ign-ks-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: clamp(20px, 3vw, 32px) 0;
    border-bottom: 0.5px solid var(--rule);
}
@media (min-width: 768px) {
    .xr-ign-ks-row {
        grid-template-columns: 200px 1fr;
        gap: clamp(16px, 2.5vw, 48px);
        align-items: baseline;
    }
}
.xr-ign-ks-name-en {
    display: block;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(18px, 2.2vw, 22px);
    letter-spacing: -0.01em;
    color: var(--ink);
    line-height: 1.3;
}
.xr-ign-ks-name-jp {
    display: block;
    margin-top: 4px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grey-2);
}
.xr-ign-ks-body {
    font-family: var(--serif-jp);
    font-weight: 500;
    font-size: clamp(15px, 1.9vw, 18px);
    line-height: 1.8;
    color: var(--ink);
    margin: 0;
}
.xr-ign-ks-body .xr-ign-ks-sub {
    display: block;
    margin-top: 6px;
    font-family: var(--sans-jp);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.85;
    color: var(--grey-1);
}
.xr-ign-priority {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border: 0.5px solid var(--ink);
    color: var(--ink);
    padding: 2px 8px;
    margin-left: 10px;
    vertical-align: middle;
}
 
/* 起点 (Phase 01 handoff) card */
.xr-ign-origin {
    border-left: 1px solid var(--ink);
    background: var(--paper-3);
    padding: clamp(20px, 3vw, 32px);
}