/* =================================================
   AIVELLE ISSUE 01 — KYOTO
================================================= */

/* -------------------------------------------------
   Editorial hero
-------------------------------------------------- */

.editorial-hero {
    position: relative;

    display: grid;
    align-items: end;

    min-height: 100svh;
    padding-top: var(--header-height);

    overflow: hidden;

    border-bottom: 1px solid var(--line);
}

.editorial-hero-media {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            #2b2b2b,
            #0c0c0c
        );
}

.editorial-hero-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    /*filter: grayscale(100%) contrast(1.03);*/

    transform: scale(var(--hero-scale, 1.05));

    will-change: transform;
}

.editorial-hero-shade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .78),
            rgba(0, 0, 0, .10) 66%,
            rgba(0, 0, 0, .28)
        ),
        linear-gradient(
            to top,
            rgba(0, 0, 0, .92),
            transparent 63%
        );
}

.editorial-hero-content {
    position: relative;
    z-index: 2;

    width: min(100%, var(--content-max));
    margin-inline: auto;
    padding:
        0
        var(--page-gutter)
        clamp(50px, 8vw, 112px);
}

.hero-copy {
    max-width: 1100px;

    opacity: var(--hero-copy-opacity, 1);

    transform:
        translate3d(
            0,
            var(--hero-copy-y, 0),
            0
        );

    will-change: transform, opacity;
}

.editorial-hero h1 {
    max-width: 1050px;
    margin: 0;

    font-size: clamp(58px, 9.2vw, 150px);
    font-weight: 400;
    letter-spacing: -.06em;
    line-height: .84;

    text-wrap: balance;
}

.hero-deck {
    max-width: 560px;
    margin: 30px 0 0;

    color: var(--paper);

    font-size: clamp(18px, 1.6vw, 24px);
    line-height: 1.55;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 18px 34px;

    margin-top: 36px;
}

.scroll-cue {
    position: absolute;
    right: var(--page-gutter);
    bottom: 54px;
    z-index: 3;

    display: flex;
    align-items: center;

    gap: 14px;

    color: var(--muted);

    text-transform: uppercase;
    letter-spacing: .17em;
    writing-mode: vertical-rl;

    font-size: 9px;
}

.scroll-cue::after {
    content: "";

    width: 1px;
    height: 50px;

    background:
        linear-gradient(
            var(--accent),
            transparent
        );

    animation:
        scrollPulse
        2.2s
        ease-in-out
        infinite;
}

/* -------------------------------------------------
   Opening note
-------------------------------------------------- */

.opening-note {
    padding-block: clamp(110px, 15vw, 220px);
}

.opening-lead {
    max-width: 1100px;
    margin: 0;

    font-size: clamp(30px, 4.5vw, 68px);
    letter-spacing: -.04em;
    line-height: 1.08;

    text-wrap: balance;
}

.opening-lead em {
    color: var(--accent);

    font-style: normal;
}

/* -------------------------------------------------
   Pull quote
-------------------------------------------------- */

.quote-section {
    display: grid;
    align-items: center;

    min-height: 80svh;

    color: var(--black);
    background: var(--paper);
}

.quote-section .eyebrow {
    color: #8d672d;
}

.quote-attribution {
    margin-top: 34px;

    color: #6b6b65;

    text-transform: uppercase;
    letter-spacing: .18em;

    font-size: 10px;
}

/* -------------------------------------------------
   Mosaic
-------------------------------------------------- */

.mosaic {
    display: grid;
    grid-template-columns: 1.15fr .85fr;

    gap: var(--grid-gap);

    align-items: start;
}

.mosaic-right {
    display: grid;

    gap: var(--grid-gap);
}

.small-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: var(--grid-gap);
}

/* -------------------------------------------------
   Reading progress
-------------------------------------------------- */

.reading-progress {
    position: fixed;
    top: 50%;
    left: 18px;
    z-index: 600;

    display: grid;
    justify-items: center;

    gap: 10px;

    opacity: .8;

    transform: translateY(-50%);
}

.reading-progress span {
    color: var(--muted);

    font-size: 9px;
    letter-spacing: .16em;
}

.progress-track {
    position: relative;

    width: 1px;
    height: 150px;

    overflow: hidden;

    background: var(--line);
}

.progress-fill {
    position: absolute;
    top: 0;
    left: 0;

    width: 1px;
    height: 0;

    background: var(--accent);

    transition: height .08s linear;
}

/* -------------------------------------------------
   Closing section
-------------------------------------------------- */

.closing-section {
    position: relative;

    display: grid;
    align-items: end;

    min-height: 92svh;

    overflow: hidden;

    border-top: 1px solid var(--line);
}

.closing-media {
    position: absolute;
    inset: 0;
}

.closing-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    /*filter: grayscale(100%);*/
}

.closing-shade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, .96),
            rgba(0, 0, 0, .16) 70%
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .55),
            transparent 70%
        );
}

.closing-content {
    position: relative;
    z-index: 2;

    width: min(100%, var(--content-max));
    margin-inline: auto;
    padding:
        0
        var(--page-gutter)
        clamp(55px, 8vw, 110px);
}

.closing-action {
    margin-top: 36px;
}

.credit-label {
    margin-top: 28px;
}

/* -------------------------------------------------
   Animation
-------------------------------------------------- */

@keyframes scrollPulse {

    0%,
    100% {
        opacity: .35;

        transform: scaleY(.65);
        transform-origin: top;
    }

    50% {
        opacity: 1;

        transform: scaleY(1);
        transform-origin: top;
    }

}

/* -------------------------------------------------
   Responsive
-------------------------------------------------- */

@media (max-width: 1100px) {

    .reading-progress {
        display: none;
    }

}

@media (max-width: 992px) {

    .mosaic {
        grid-template-columns: 1fr;
    }

    .scroll-cue {
        display: none;
    }

}

@media (max-width: 600px) {

    .editorial-hero {
        min-height: 92svh;
    }

    .editorial-hero h1 {
        font-size: clamp(54px, 17vw, 82px);
        line-height: .88;
    }

    .hero-meta {
        display: grid;
    }

    .chapter-header {
        align-items: center;
    }

    .chapter-rule {
        display: none;
    }

    .small-pair {
        grid-template-columns: 1fr;
    }

    .full-bleed {
        min-height: 65svh;
    }

}


/* =================================================
   AIVELLE ISSUE 01 — iPad portrait refinement
   Applies only to portrait tablets. Desktop, landscape
   tablet and mobile <=600px remain unchanged.
================================================= */

@media
    (min-width: 601px)
    and (max-width: 1024px)
    and (orientation: portrait) {

    /* -------------------------------------------------
       1. Editorial hero
       Lift and slightly tighten the opening composition
       so the complete hero copy is visible on landing.
    -------------------------------------------------- */

    .editorial-hero {
        min-height: 100svh;
    }

    .editorial-hero-content {
        padding-bottom: clamp(104px, 11.5vh, 150px);
    }

    .editorial-hero h1 {
        max-width: 820px;
        font-size: clamp(64px, 8.6vw, 90px);
        line-height: .86;
    }

    .hero-deck {
        max-width: 520px;
        margin-top: 22px;
        font-size: clamp(18px, 2.15vw, 22px);
        line-height: 1.45;
    }

    .hero-meta {
        margin-top: 26px;
        gap: 14px 28px;
    }


    /* -------------------------------------------------
       2. Opening note
       Treat the note as a centred editorial statement
       instead of leaving it in the first half-grid.
    -------------------------------------------------- */

    .opening-note {
        padding-block: clamp(92px, 11vw, 132px);
    }

    .opening-note .aivelle-grid {
        display: block;
    }

    .opening-note .aivelle-grid > .span-10 {
        width: min(100%, 880px);
        max-width: 880px;
        margin-inline: auto;
        text-align: center;
    }

    .opening-note .eyebrow {
        text-align: center;
    }

    .opening-lead {
        max-width: 880px;
        margin-inline: auto;
        font-size: clamp(38px, 5.35vw, 54px);
        line-height: 1.08;
    }


    /* -------------------------------------------------
       3 + 4. Light quote sections
       Give Quiet Observation and Presence the full
       editorial measure rather than a 6-column tablet
       fragment. Keep typography left aligned.
    -------------------------------------------------- */

    #kyoto-quiet-observation,
    #kyoto-presence {
        min-height: auto;
        padding-block: clamp(96px, 11vw, 136px);
    }

    #kyoto-quiet-observation .aivelle-grid,
    #kyoto-presence .aivelle-grid {
        display: block;
    }

    #kyoto-quiet-observation .aivelle-grid > .span-10,
    #kyoto-presence .aivelle-grid > .span-9 {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    #kyoto-quiet-observation .display-quote,
    #kyoto-presence .display-quote {
        width: 100%;
        max-width: 940px;
        font-size: clamp(52px, 7vw, 72px);
        line-height: .98;
        text-wrap: balance;
    }

    #kyoto-quiet-observation .quote-attribution {
        margin-top: 28px;
    }


    /* -------------------------------------------------
       5. Reflection interlude
       Reframe the image leftwards so more of the model
       remains visible in portrait tablet cropping.
    -------------------------------------------------- */

    #kyoto-reflection-interlude > img {
        object-position: 72% center;
    }


    /* -------------------------------------------------
       6. Credits
       Row 1: title, then credit details beneath it.
       Row 2/right: disclosure paragraph aligned cleanly
       beside the credit details.
    -------------------------------------------------- */

    #credits .aivelle-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        align-items: start;
        row-gap: clamp(38px, 5vw, 56px);
    }

    #credits .aivelle-grid > .span-5 {
        grid-column: 1 / span 6;
    }

    #credits .aivelle-grid > .span-3 {
        grid-column: 1 / span 6;
        grid-row: 2;
        padding-right: clamp(18px, 3vw, 36px);
    }

    #credits .aivelle-grid > .span-4 {
        grid-column: 7 / -1;
        grid-row: 2;
        padding-left: clamp(18px, 3vw, 36px);
        border-left: 1px solid var(--line);
    }

    #credits .editorial-title {
        font-size: clamp(40px, 5.6vw, 54px);
        line-height: 1;
    }

    #credits .small-copy {
        max-width: 440px;
    }


    /* -------------------------------------------------
       Shorter portrait tablet viewports
       Extra protection for iPad Mini / browser chrome.
    -------------------------------------------------- */

    @media (max-height: 1080px) {

        .editorial-hero-content {
            padding-bottom: clamp(88px, 9vh, 110px);
        }

        .editorial-hero h1 {
            font-size: clamp(58px, 8vw, 78px);
        }

        .hero-deck {
            margin-top: 18px;
            font-size: 18px;
        }

        .hero-meta {
            margin-top: 22px;
        }

    }

}