/* ==========================================================================
   KOTOBUKI Design Refresh v2
   ========================================================================== */

/* --- Design Tokens --- */

:root {
    /* Brand colours — colour-picked from tenugui source */
    --ktb-indigo: #00406b;
    --ktb-indigo-deep: #002a47;
    --ktb-indigo-light: #0a5a8a;
    --ktb-white: #f9f9f9;
    --ktb-text: rgba(255, 255, 255, 0.92);
    --ktb-text-muted: rgba(255, 255, 255, 0.6);

    /* Container widths */
    --content-narrow: 600px;
    --content-standard: 720px;
    --content-wide: 960px;
    --content-landing-wide: 1100px;

    /* Text width — "column within frame" */
    --text-measure: 65ch;

    /* Section spacing tiers (P2) */
    --space-compact: 40px;
    --space-standard: 64px;
    --space-expansive: 96px;

    /* Font stacks */
    --font-heading: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Source Serif 4', Georgia, serif;
    --font-jp: 'Noto Serif JP', serif;
}

/* --- Typography (P2 Unified Type System) --- */

/* Headings — Cormorant Garamond */
h1, h2, h3 {
    font-family: var(--font-heading);
    line-height: 1.2;
}

h1 {
    font-size: 3rem;
    font-weight: 300;
    letter-spacing: 0.02em;
}

h2 {
    font-size: 2.25rem;
    font-weight: 400;
    letter-spacing: 0.02em;
}

h3 {
    font-size: 1.4rem;
    font-weight: 400;
}

/* Body — Source Serif 4 */
.initiative-section p,
.initiative-intro p,
.update-page__body p,
.initiative-section li,
.initiative-intro li {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.5;
}

/* Text measure — column within 720px frame */
.initiative-section p,
.initiative-intro p,
.initiative-section li,
.initiative-intro li,
.update-page__body p {
    max-width: var(--text-measure);
}

/* Meta/Label tier — small-caps for dates, tags, captions */
.updates-entry__date,
.updates-entry__tag,
.update-page__date,
.update-page__tag,
.update-page__nav,
.cross-links__heading {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    font-variant: small-caps;
    text-transform: lowercase;
}

/* Conviction moment — h2 inside .conviction section (P3b will use) */
.initiative-section.conviction h2 {
    font-size: 4rem;
    font-weight: 300;
    letter-spacing: 0.04em;
    max-width: 18ch;
}

/* Chapter pause — h1/h2 top margin */
.initiative-section h2 {
    margin-top: min(4rem, 8vh);
}

/* Japanese headings — Noto Serif JP */
:lang(ja) h1,
:lang(ja) h2,
:lang(ja) h3 {
    font-family: var(--font-jp), var(--font-heading);
    font-weight: 400; /* compensates for kanji visual density vs Latin 300 */
    line-height: 1.4;
}

/* Japanese body */
:lang(ja) .initiative-section p,
:lang(ja) .initiative-intro p,
:lang(ja) .update-page__body p {
    font-family: var(--font-jp), var(--font-body);
    line-height: 1.4;
}

blockquote {
    font-family: var(--font-heading);
    font-size: 1.4em;
    font-weight: 300;
    border-left: 2px solid rgba(0, 64, 107, 0.3);
    padding-left: 2rem;
    margin: var(--space-standard) 0;
    color: #333;
}

/* --- Navbar override for v2 pages ---
 * Force solid background so white text is always readable.
 * Landing hero overrides back to transparent via JS data-nav-style. */

.navbar-kotobuki {
    background-color: var(--ktb-indigo-deep) !important;
    backdrop-filter: none !important;
}

.navbar-kotobuki.nav-style-transparent {
    background-color: transparent !important;
}

/* --- Activity Strip (P4) --- */

.activity-strip {
    position: sticky;
    top: 56px; /* below fixed navbar */
    z-index: 100;
    background: rgba(0, 42, 71, 0.85); /* --ktb-indigo-deep with transparency */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.65rem 0;
}

.activity-strip__label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    font-variant: small-caps;
    text-transform: lowercase;
    color: var(--ktb-text-muted);
    margin-right: 1.5rem;
    white-space: nowrap;
}

.activity-strip__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0;
    display: inline-flex;
}

.activity-strip__link {
    color: var(--ktb-text-muted);
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 400;
    letter-spacing: 0.03em;
    font-size: 0.85rem;
    white-space: nowrap;
    letter-spacing: 0.03em;
    transition: color 200ms ease 80ms; /* slight hover delay */
}

.activity-strip__link:hover {
    color: #fff;
}

.activity-strip__link--current {
    color: #fff;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    padding-bottom: 2px;
}

/* Subtle featured marker */
.activity-strip__item--featured .activity-strip__link {
    font-weight: 500;
}

/* Kojitsunagi pattern — bottom edge of activity strip */
.activity-strip::after {
    content: '';
    display: block;
    height: 3px;
    margin-top: 0.65rem;
    background: url("assets/kojitsunagi.ac41e912236b.svg") repeat-x center / auto 3px;
    opacity: 0.3;
}

/* --- Initiative Cover (hero) --- */

.initiative-cover {
    margin-bottom: 1.5rem;
}

.initiative-cover__image {
    width: 100%;
    overflow: hidden;
}

.initiative-cover__image img {
    width: 100%;
    height: 55vh;
    object-fit: cover;
    display: block;
}

.initiative-cover__title {
    max-width: var(--content-standard);
    margin: 1.5rem auto 0;
    padding: 0 1rem;
}

.initiative-cover__title h1 {
    margin-bottom: 0.5rem;
}

.initiative-cover__standfirst {
    font-size: 1.15em;
    color: #555;
    line-height: 1.6;
    margin-top: 0.5rem;
}

/* Typographic fallback (no hero image) */
.initiative-cover--typographic {
    background: var(--ktb-indigo-deep);
    color: var(--ktb-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    text-align: center;
    padding: 3rem 1rem;
}

.initiative-cover--typographic h1 {
    color: var(--ktb-text);
    margin-bottom: 0.5rem;
}

.initiative-cover--typographic .initiative-cover__standfirst {
    color: var(--ktb-text-muted);
}

/* --- Initiative Content --- */

.initiative-content {
    max-width: var(--content-standard);
    padding: var(--space-compact) 1rem var(--space-standard);
}

.initiative-standfirst {
    font-size: 1.15em;
    color: #555;
    line-height: 1.6;
    margin-bottom: var(--space-compact);
}

/* Section Wrappers (from wrap_sections post-processor) */
.initiative-intro {
    margin-bottom: 2rem;
}

.initiative-section {
    margin-bottom: 2.5rem;
}

.initiative-section h2 {
    padding-top: 1rem;
}

/* Images within initiative content */
.initiative-content img {
    height: auto;
    border-radius: 4px;
    margin: 1.5rem 0;
    display: block;
}

/* Image intent tiers */
.img-wide {
    width: var(--content-wide);
    max-width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

.img-standard {
    width: 100%;
    max-width: var(--content-standard);
    margin-inline: auto;
}

.img-detail {
    width: 48%;
    display: inline-block;
    vertical-align: top;
}

/* --- Scroll Reveal --- */
/* Content visible by default. JS adds .scroll-reveal class, then
   IntersectionObserver adds .revealed to fade sections in. If JS
   fails or observer doesn't fire, content remains visible. */

.scroll-reveal .initiative-section,
.scroll-reveal .initiative-intro {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 400ms ease, transform 400ms ease;
}

.scroll-reveal .initiative-section.revealed,
.scroll-reveal .initiative-intro.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* --- Cross-Links Footer --- */

.cross-links {
    border-top: none;
    padding: 2rem 0;
    background: var(--ktb-white);
    position: relative;
}

/* Kojitsunagi pattern — top edge of cross-links */
.cross-links::before {
    content: '';
    display: block;
    height: 3px;
    margin-bottom: 1.5rem;
    background: url("assets/kojitsunagi.ac41e912236b.svg") repeat-x center / auto 3px;
    opacity: 0.2;
}

.cross-links__heading {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.75em;
    color: #888;
    margin-bottom: 1rem;
    text-align: center;
}

.cross-links__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    margin: 0;
    padding: 0;
    justify-content: center;
}

.cross-links__link {
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 400;
    letter-spacing: 0.03em;
    color: var(--ktb-indigo);
}

.cross-links__link:hover {
    text-decoration: underline;
}

/* --- Landing Page --- */

/* Hero */
.landing-hero {
    position: relative;
    min-height: 70vh;
    background: var(--ktb-indigo-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -56px;   /* tuck under fixed navbar */
    padding-top: 56px;   /* push content below navbar */
    overflow: hidden;
}

.landing-hero__bg {
    animation: hero-settle 1.2s ease-out forwards;
}

@keyframes hero-settle {
    from { transform: scale(1.03); }
    to { transform: scale(1); }
}

.landing-hero__logo {
    max-width: 280px;
    width: 60vw;
    height: auto;
    margin-top: -2rem; /* offset above dead-centre */
}

/* Activity grid — 1 dominant (65%) + 4 supporting */
.landing-activity {
    background: var(--ktb-indigo-deep);
    padding: var(--space-expansive) 0;
}

.landing-activity__inner {
    max-width: var(--content-landing-wide);
    margin: 0 auto;
    padding: 0 1rem;
}

/*
 * Grid layout: 6-column base.
 * Row 1: featured (4 cols) + 1 supporting (2 cols)
 * Row 2: 3 supporting (2 cols each)
 */
.initiative-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: minmax(320px, 1fr) minmax(220px, auto);
    gap: 1rem;
    position: relative;
}

.initiative-tile {
    display: block;
    text-decoration: none;
    color: var(--ktb-text);
    overflow: hidden;
    position: relative;
}

/* Row 1: featured (4 cols) + tile (2 cols) */
.initiative-tile--featured {
    grid-row: 1;
    grid-column: 1 / 5;
}

.initiative-tile:not(.initiative-tile--featured):not(.initiative-tile--seal):nth-of-type(2) {
    grid-row: 1;
    grid-column: 5 / 7;
}

/* Row 2: 3 tiles, each 2 columns */
.initiative-tile:not(.initiative-tile--featured):not(.initiative-tile--seal):nth-of-type(3) {
    grid-row: 2;
    grid-column: 1 / 3;
}

.initiative-tile:not(.initiative-tile--featured):not(.initiative-tile--seal):nth-of-type(4) {
    grid-row: 2;
    grid-column: 3 / 5;
}

.initiative-tile:not(.initiative-tile--featured):not(.initiative-tile--seal):nth-of-type(5) {
    grid-row: 2;
    grid-column: 5 / 7;
}

/* Calligraphy seal — overlaps row boundary, centred */
.initiative-tile--seal {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 280px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ktb-indigo-deep);
    pointer-events: none;
    overflow: visible;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.initiative-tile--seal img {
    width: calc(100% - 2rem); /* 1rem gap on each side = matches grid gap */
    height: calc(100% - 2rem);
    object-fit: contain;
    background: #fff;
    padding: 8%;
}

.initiative-tile__image {
    width: 100%;
    height: 100%;
    min-height: 200px;
    overflow: hidden;
}

.initiative-tile__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms ease;
}

.initiative-tile:hover .initiative-tile__image img {
    transform: scale(1.02);
}


.initiative-tile__placeholder {
    width: 100%;
    height: 100%;
    min-height: 200px;
    background: var(--ktb-indigo);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ktb-text);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.3em;
    font-weight: 300;
}

.initiative-tile__label {
    display: block;
    padding: 0.75rem 0 0.25rem;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 300;
    font-size: 1.1em;
    color: var(--ktb-text-muted);
}

.initiative-tile:hover .initiative-tile__label {
    color: var(--ktb-text);
}

/* Landing sections */
.landing-mission {
    background: var(--ktb-indigo);
    color: var(--ktb-text);
    padding: var(--space-standard) 1rem;
}

.landing-mission__inner {
    max-width: 900px;
    margin: 0 auto;
}

.landing-mission h2 {
    color: var(--ktb-text);
}

.landing-about {
    background: var(--ktb-indigo-light);
    color: var(--ktb-text);
    padding: var(--space-compact) 1rem;
}

.landing-about__inner {
    max-width: var(--content-standard);
    margin: 0 auto;
}

.landing-about h2 {
    color: var(--ktb-text);
}

.landing-contact {
    background: var(--ktb-indigo-deep);
    color: var(--ktb-text);
    padding: var(--space-compact) 1rem;
}

.landing-contact__inner {
    max-width: 900px;
    margin: 0 auto;
}

.landing-contact h2 {
    color: var(--ktb-text);
}

.landing-contact a {
    color: var(--ktb-text);
}

/* --- Updates Index --- */

.updates-index {
    padding-top: calc(56px + var(--space-compact));
}

.updates-index__inner {
    max-width: var(--content-standard);
    margin: 0 auto;
    padding: 0 1rem var(--space-standard);
}

.updates-year__heading {
    margin-top: var(--space-standard);
    color: #888;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    font-variant: small-caps;
    text-transform: lowercase;
}

.updates-year__list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}

.updates-entry {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0, 64, 107, 0.1);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 1rem;
}

.updates-entry__date {
    color: #888;
    min-width: 6em;
}

.updates-entry__title {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--ktb-indigo);
    text-decoration: none;
}

.updates-entry__title:hover {
    text-decoration: underline;
}

.updates-entry__tag {
    color: #888;
}

/* Context subtitle from meta_description */
.updates-entry__context {
    flex-basis: 100%;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    font-variant: small-caps;
    text-transform: lowercase;
    color: #999;
    padding-left: calc(6em + 1rem); /* align with title */
    max-width: 80ch;
}

/* --- Update Page --- */

.update-page {
    padding-top: calc(56px + var(--space-compact));
}

.update-page__inner {
    max-width: var(--content-standard);
    margin: 0 auto;
    padding: 0 1rem var(--space-standard);
}

.update-page__accent {
    width: 100%;
    height: 1px;
    background: var(--ktb-indigo);
    margin-bottom: var(--space-compact);
}

.update-page__date {
    display: block;
    color: #888;
    margin-bottom: 0.5rem;
}

.update-page__tag {
    display: inline-block;
    color: var(--ktb-indigo);
    text-decoration: none;
    margin: 0.5rem 0 var(--space-compact);
    border: 1px solid rgba(0, 64, 107, 0.2);
    padding: 0.2rem 0.6rem;
    border-radius: 2px;
}

.update-page__tag:hover {
    background: var(--ktb-indigo);
    color: #fff;
}

.update-page__body {
    line-height: 1.7;
}

.update-page__body p {
    margin-bottom: 1.2rem;
}

.update-page__nav {
    margin-top: var(--space-standard);
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 64, 107, 0.1);
    display: flex;
    justify-content: space-between;
    color: #888;
}

.update-page__nav a {
    color: var(--ktb-indigo);
    text-decoration: none;
}

.update-page__nav a:hover {
    text-decoration: underline;
}

/* --- Preview-only utilities --- */

.preview-lang-notice {
    background: #fff3cd;
    color: #664d03;
    text-align: center;
    padding: 0.5rem;
    font-size: 0.85rem;
    border-bottom: 1px solid #ffecb5;
}

/* --- Kojitsunagi spacer — auto-inserted between initiative sections --- */

/* Auto-insert after each section (except the last one) */
.initiative-section::after {
    content: "";
    display: block;
    height: 24px;
    margin: var(--space-standard) 0;
    background-image: url("images/zodiac-2026-kojitsunagi-strip.ff24b330bea4.svg");
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: center;
    opacity: 0.12;
    -webkit-mask-image: linear-gradient(
        to right, transparent 0%, black 15%, black 85%, transparent 100%
    );
    mask-image: linear-gradient(
        to right, transparent 0%, black 15%, black 85%, transparent 100%
    );
}

/* No spacer after the last section (before cross-links/footer) */
.initiative-section:last-of-type::after {
    display: none;
}

/* Legacy: keep manual hr → spacer working too */
.kojitsunagi-spacer {
    height: 24px;
    margin: var(--space-standard) 0;
    background-image: url("images/zodiac-2026-kojitsunagi-strip.ff24b330bea4.svg");
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: center;
    opacity: 0.12;
    -webkit-mask-image: linear-gradient(
        to right, transparent 0%, black 15%, black 85%, transparent 100%
    );
    mask-image: linear-gradient(
        to right, transparent 0%, black 15%, black 85%, transparent 100%
    );
}

@media (max-width: 768px) {
    .initiative-section::after {
        height: 18px;
    }

    .kojitsunagi-spacer {
        height: 18px;
    }
}

/* --- Responsive --- */

@media (max-width: 768px) {
    /* P2 mobile type scale */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.2rem; }

    .initiative-section.conviction h2 {
        font-size: 2.5rem;
    }

    .initiative-section p,
    .initiative-intro p,
    .update-page__body p,
    .initiative-section li,
    .initiative-intro li {
        font-size: 1rem;
        max-width: none;
    }

    /* Ensure minimum 16px for serif legibility */
    .update-page__body p {
        font-size: max(1rem, 16px);
    }

    .initiative-cover__image img {
        height: 45vh;
    }

    .initiative-cover--typographic {
        min-height: 30vh;
    }

    /* P4: mobile activity strip — wrap to multiple rows */
    .activity-strip .container {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .activity-strip__list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 0;
    }

    .activity-strip__link {
        font-size: 0.78rem;
        padding: 0.4rem 0.75rem;
        display: block;
    }

    .initiative-content {
        padding: 2rem 1rem var(--space-compact);
    }

    .img-wide {
        width: 100vw;
    }

    .img-detail {
        width: 100%;
        display: block;
    }

    /* Landing page mobile */
    .landing-hero {
        min-height: 50vh;
    }

    .initiative-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .initiative-tile--featured,
    .initiative-tile:not(.initiative-tile--featured):not(.initiative-tile--seal):nth-of-type(2),
    .initiative-tile:not(.initiative-tile--featured):not(.initiative-tile--seal):nth-of-type(3),
    .initiative-tile:not(.initiative-tile--featured):not(.initiative-tile--seal):nth-of-type(4),
    .initiative-tile:not(.initiative-tile--featured):not(.initiative-tile--seal):nth-of-type(5) {
        grid-row: auto;
        grid-column: 1;
    }

    .initiative-tile--seal {
        display: none;
    }

    /* Updates index mobile: stack entries */
    .updates-entry {
        flex-direction: column;
        gap: 0.15rem;
    }

    .updates-entry__context {
        padding-left: 0;
    }
}

/* Navbar & Footer Typography — moved to css/base.css (Phase 0h) */