@charset "UTF-8";

/* Artboard: 1672 × 941. Every desktop measurement scales with the hero width. */
.hero-v3 {
    /* Keep the complete 1672 × 941 composition inside the first viewport. */
    --hero-unit: min(calc(100cqw / 1672), calc(100svh / 941));
    --hero-paper: #f8f7f3;
    --hero-ink: #222225;
    --hero-green: #3c503b;
    --hero-highlight: #d5e1c7;
    --hero-bottom-paper-travel: 28%;
    --hero-bottom-copy-travel: 28cqw;
    container-type: inline-size;
    width: 100%;
    overflow: hidden;
    background: var(--hero-paper);
    color: var(--hero-ink);
    font-family: var(--serif);
    isolation: isolate;
}

.hero-top {
    position: relative;
    height: calc(689 * var(--hero-unit));
    overflow: hidden;
}

.hero-photo {
    position: absolute;
    inset: 0 0 0 auto;
    width: 70%;
    overflow: hidden;
    background: #627760;
}

.hero-top-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transform-origin: 61% 52%;
}

/* The paper edge has two steps, not a skewed rectangle. */
.hero-top-shape {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--hero-paper);
    clip-path: polygon(
        0 0,
        calc(925 * var(--hero-unit)) 0,
        calc(918 * var(--hero-unit)) calc(43 * var(--hero-unit)),
        calc(728 * var(--hero-unit)) calc(43 * var(--hero-unit)),
        calc(693 * var(--hero-unit)) calc(257 * var(--hero-unit)),
        calc(834 * var(--hero-unit)) calc(257 * var(--hero-unit)),
        calc(815 * var(--hero-unit)) calc(373 * var(--hero-unit)),
        calc(735 * var(--hero-unit)) calc(373 * var(--hero-unit)),
        calc(686 * var(--hero-unit)) 100%,
        0 100%
    );
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    margin: 0;
    pointer-events: none;
}

.hero-top-left { position: absolute; inset: 0; }
.hero-top-left a { pointer-events: auto; }
.hero-top-eyebrow {
    position: absolute;
    left: calc(68 * var(--hero-unit));
    top: calc(58 * var(--hero-unit));
    display: flex;
    align-items: flex-start;
}

.hero-eyebrow-en {
    width: calc(284 * var(--hero-unit));
    border-left: max(1px, calc(1.5 * var(--hero-unit))) solid #5a6a58;
    padding-left: calc(26 * var(--hero-unit));
    color: #405643;
    font: 400 calc(15 * var(--hero-unit))/1.68 Georgia, "Times New Roman", serif;
    letter-spacing: .34em;
}

.hero-eyebrow-jp {
    padding-top: calc(15 * var(--hero-unit));
    font-size: calc(20 * var(--hero-unit));
    font-weight: 500;
    line-height: 1.52;
    letter-spacing: .24em;
}

.hero-v3-title {
    position: absolute;
    left: calc(68 * var(--hero-unit));
    top: calc(175 * var(--hero-unit));
    margin: 0;
    font-size: calc(72 * var(--hero-unit));
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.035em;
    white-space: nowrap;
}

.hero-title-line { display: block; width: max-content; }
.hero-title-with { font-size: .74em; letter-spacing: -.035em; }
.hero-title-second { margin-top: calc(-3 * var(--hero-unit)); font-size: calc(70 * var(--hero-unit)); }
.hero-title-edition { margin-left: .16em; font-size: 1.03em; letter-spacing: -.035em; }

.hero-v3-subtitle {
    position: absolute;
    left: calc(68 * var(--hero-unit));
    top: calc(368 * var(--hero-unit));
    margin: 0;
    font-size: calc(26 * var(--hero-unit));
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: .08em;
}
.hero-subtitle-line, .hero-subtitle-trip { display: block; white-space: nowrap; }
.hero-subtitle-line strong {
    color: var(--hero-green);
    font-weight: 600;
    padding-inline: .08em;
    margin-inline: -.08em;
    background: linear-gradient(to bottom, transparent 60%, var(--hero-highlight) 60%, var(--hero-highlight) 94%, transparent 94%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.hero-subtitle-trip { font: inherit; letter-spacing: inherit; }

.hero-v3-divider {
    position: absolute;
    left: calc(68 * var(--hero-unit));
    top: calc(451 * var(--hero-unit));
    width: calc(96 * var(--hero-unit));
    height: max(1px, calc(1.4 * var(--hero-unit)));
    margin: 0;
    border: 0;
    background: #7b8a7e;
    transform-origin: left center;
}

.hero-v3-date {
    position: absolute;
    left: calc(73 * var(--hero-unit));
    top: calc(464 * var(--hero-unit));
    display: flex;
    align-items: baseline;
    gap: calc(10 * var(--hero-unit));
    font-family: "Times New Roman", var(--serif);
    font-size: calc(40 * var(--hero-unit));
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .015em;
    white-space: nowrap;
    font-variant-numeric: lining-nums;
}

.hero-v3-date small { font-size: .64em; letter-spacing: -.08em; }
.hero-date-dash { font-size: .75em; }

.hero-v3-tags {
    position: absolute;
    left: calc(68 * var(--hero-unit));
    top: calc(524 * var(--hero-unit));
    display: flex;
    gap: calc(13 * var(--hero-unit));
    color: #3c5141;
}

.hero-v3-tags span {
    display: grid;
    place-items: center;
    width: calc(105 * var(--hero-unit));
    height: calc(38 * var(--hero-unit));
    border: 1px solid #617565;
    font-size: calc(18 * var(--hero-unit));
    line-height: 1;
    letter-spacing: .16em;
    white-space: nowrap;
}
.hero-v3-tags span:nth-child(2) { width: calc(253 * var(--hero-unit)); }
.hero-v3-tags span:nth-child(3) { width: calc(156 * var(--hero-unit)); }

.hero-v3-actions {
    position: absolute;
    left: calc(68 * var(--hero-unit));
    top: calc(600 * var(--hero-unit));
    display: flex;
    gap: calc(24 * var(--hero-unit));
}

.hero-v3-actions a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 calc(26 * var(--hero-unit)) 0 calc(42 * var(--hero-unit));
    height: calc(66 * var(--hero-unit));
    border: 1px solid #323d33;
    color: var(--hero-ink);
    background: transparent;
    font-size: calc(21 * var(--hero-unit));
    line-height: 1;
    letter-spacing: .06em;
    text-decoration: none;
    transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.hero-v3-actions .btn-dark { width: calc(318 * var(--hero-unit)); color: #fff; background: var(--hero-green); border-color: var(--hero-green); }
.hero-v3-actions .btn-outline { width: calc(249 * var(--hero-unit)); }
.hero-v3-actions svg { flex: 0 0 auto; width: calc(24 * var(--hero-unit)); height: calc(18 * var(--hero-unit)); fill: none; stroke: currentColor; stroke-width: 1; transition: transform .25s ease; }
.hero-v3-actions a:hover svg { transform: translateX(4px); }
.hero-v3-actions .btn-dark:hover { background: #293f2b; }
.hero-v3-actions .btn-outline:hover { background: #e9ede5; }
.hero-v3-actions a:focus-visible { outline: 3px solid #758a67; outline-offset: 5px; }

.hero-top-right { position: absolute; inset: 0; }
.hero-v3-vertical-text {
    position: absolute;
    top: calc(73 * var(--hero-unit));
    right: calc(76 * var(--hero-unit));
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: calc(24 * var(--hero-unit));
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: .15em;
    color: #fff;
    text-shadow: 0 2px 6px #14201755;
}
.hero-v3-vertical-text span { display: block; }

.hero-v3-stamp {
    position: absolute;
    right: calc(42 * var(--hero-unit));
    bottom: calc(28 * var(--hero-unit));
    width: calc(156 * var(--hero-unit));
    color: #fff;
}
.stamp-text { font: 400 calc(14 * var(--hero-unit))/1.7 Georgia, "Times New Roman", serif; letter-spacing: .38em; text-shadow: 0 2px 5px #0005; }
.stamp-text::after { content: ""; position: absolute; top: calc(10 * var(--hero-unit)); right: 0; width: calc(75 * var(--hero-unit)); border-top: 1px solid #e9eae3b3; }

.hero-photo-credit, .hero-landscape-credit {
    position: absolute;
    z-index: 4;
    margin: 0;
    color: #fff;
    font-family: var(--sans);
    font-size: max(9px, calc(10 * var(--hero-unit)));
    line-height: 1.5;
    text-shadow: 0 1px 4px #000c;
}
.hero-photo-credit { right: calc(18 * var(--hero-unit)); bottom: calc(5 * var(--hero-unit)); }

/* Landscape strip and the opposing paper edge. */
.hero-bottom {
    position: relative;
    height: calc(246 * var(--hero-unit));
    margin-top: calc(6 * var(--hero-unit));
    overflow: hidden;
    background: #50664b;
}
.hero-landscape { position: absolute; inset: 0; overflow: hidden; }
.hero-landscape > picture { display: block; width: 100%; height: 100%; }
.hero-bottom-bg { width: 100%; height: 100%; object-fit: cover; object-position: center 56%; }
.hero-landscape::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #10292055, transparent 40%); }
.hero-bottom-shape {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: var(--hero-paper);
    clip-path: polygon(76% 0, 100% 0, 100% 100%, 72% 100%);
}
.hero-bottom-left { position: absolute; left: calc(68 * var(--hero-unit)); top: calc(55 * var(--hero-unit)); color: #fff; }
.hero-bottom-eyebrow { position: relative; }
.hero-bottom-eyebrow .en { display: block; font: 400 calc(15 * var(--hero-unit))/1.6 Georgia, "Times New Roman", serif; letter-spacing: .35em; }
.hero-bottom-eyebrow .line { position: absolute; top: calc(16 * var(--hero-unit)); left: calc(112 * var(--hero-unit)); width: calc(120 * var(--hero-unit)); border-top: 1px solid #fff9; transform-origin: left; }
.hero-bottom-jp { margin: calc(10 * var(--hero-unit)) 0 0; font-size: calc(18 * var(--hero-unit)); font-weight: 600; line-height: 1.5; letter-spacing: .16em; text-shadow: 0 2px 4px #0005; }
.hero-bottom-right { position: absolute; right: calc(66 * var(--hero-unit)); top: 0; bottom: 0; width: calc(304 * var(--hero-unit)); display: flex; flex-direction: column; justify-content: center; }
.hero-bottom-jp-main { margin: 0; font-size: calc(19 * var(--hero-unit)); font-weight: 500; line-height: 1.8; letter-spacing: .04em; }
.hero-bottom-jp-main > span { display: block; white-space: nowrap; }
.hero-bottom-en-main { margin-top: calc(19 * var(--hero-unit)); color: #62675f; font: 400 calc(9 * var(--hero-unit))/2.15 Georgia, "Times New Roman", serif; letter-spacing: .38em; }
.hero-bottom-en-main::before { content: ""; display: block; width: calc(48 * var(--hero-unit)); margin-bottom: calc(18 * var(--hero-unit)); border-top: 1px solid #607363; transform-origin: left; }
.hero-bamboo { --hero-bamboo-opacity: .55; position: absolute; z-index: 2; right: calc(-65 * var(--hero-unit)); top: calc(-10 * var(--hero-unit)); width: calc(160 * var(--hero-unit)); height: calc(270 * var(--hero-unit)); opacity: var(--hero-bamboo-opacity); pointer-events: none; }
.hero-landscape-credit { right: 28.8%; bottom: calc(5 * var(--hero-unit)); }

/* One entrance: the photographs open along a diagonal, then the type is uncovered. */
@media (prefers-reduced-motion: no-preference) {
    .js .hero-photo { animation: hero-photo-open 1.55s cubic-bezier(.22,1,.36,1) both; }
    .js .hero-top-bg { animation: hero-photo-settle 2.05s cubic-bezier(.22,1,.36,1) both; }
    .js .hero-title-line { animation: hero-type-uncover .95s cubic-bezier(.22,1,.36,1) both; }
    .js .hero-title-first { animation-delay: .22s; }
    .js .hero-title-second { animation-delay: .4s; }
    .js .hero-top-eyebrow,
    .js .hero-v3-subtitle,
    .js .hero-v3-date,
    .js .hero-v3-tags,
    .js .hero-v3-actions,
    .js .hero-v3-vertical-text,
    .js .hero-v3-stamp,
    .js .hero-photo-credit,
    .js .hero-bottom-left,
    .js .hero-bottom-right,
    .js .hero-landscape-credit { animation: hero-ink-arrive .8s var(--hero-delay, .15s) both; }
    .hero-v3-subtitle { --hero-delay: .6s; }
    .hero-v3-date { --hero-delay: .78s; }
    .hero-v3-tags { --hero-delay: .9s; }
    .hero-v3-actions { --hero-delay: 1s; }
    .hero-v3-vertical-text { --hero-delay: .9s; }
    .hero-v3-stamp, .hero-photo-credit { --hero-delay: 1.15s; }
    .hero-bottom-left, .hero-bottom-right { --hero-delay: .8s; }
    .hero-landscape-credit { --hero-delay: 1.1s; }
    .js .hero-v3-divider { animation: hero-line-draw .75s .65s cubic-bezier(.22,1,.36,1) both; }
    .js .hero-landscape { animation: hero-landscape-open 1.5s .25s cubic-bezier(.22,1,.36,1) both; }
    .js .hero-bamboo { animation: hero-leaf-arrive 1.8s .45s cubic-bezier(.22,1,.36,1) both; transform-origin: top right; }
    .js .hero-v3:not(.is-ready) * { animation-play-state: paused !important; }
}
@keyframes hero-photo-open {
    from { clip-path: polygon(108% 0, 100% 0, 100% 100%, 96% 100%); }
    to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes hero-photo-settle { from { transform: scale(1.045); } to { transform: scale(1); } }
@keyframes hero-type-uncover {
    from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(12px); }
    to { opacity: 1; clip-path: inset(0 -2% 0 0); transform: translateY(0); }
}
@keyframes hero-ink-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-line-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hero-landscape-open {
    from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
    to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes hero-leaf-arrive { from { opacity: 0; transform: rotate(-5deg) translateX(15px); } to { opacity: var(--hero-bamboo-opacity); transform: none; } }

.hero-notch-trace { display: none; }

/* Desktop: trace the entire paper/photo boundary before opening the photograph. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    .hero-v3 {
        --hero-soft-move: cubic-bezier(.28, .7, .32, 1);
        --hero-soft-ink: cubic-bezier(.25, .35, .25, 1);
        /* All three scene panels start as the small panda begins to retreat. */
        --hero-scene-delay: 3.78s;
    }

    .js .hero-top * {
        animation: none;
    }

    .js .hero-top .hero-title-edition {
        animation: desktop-notch-ink .8s .16s var(--hero-soft-ink) both;
    }

    .js .hero-top .hero-notch-trace {
        display: block;
        position: absolute;
        z-index: 2;
        left: 0;
        top: 0;
        width: calc(925 * var(--hero-unit));
        height: calc(689 * var(--hero-unit));
        overflow: visible;
        fill: none;
        stroke: #77896d;
        stroke-width: 1.8;
        opacity: 0;
        pointer-events: none;
        animation: desktop-notch-light 5.95s .18s linear both;
    }

    .js .hero-top .hero-notch-trace > path {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        animation: desktop-notch-draw 1.25s .18s cubic-bezier(.25, .1, .75, .9) both;
    }

    /* Five-toed bear tracks follow the paper edge once, then leave it clear. */
    .js .hero-top .hero-paw-step use {
        fill: #526b48;
        stroke: none;
        opacity: 0;
        animation: desktop-paw-print 1.9s var(--paw-delay) ease-in-out both;
    }

    /* Paw first at 1.6–1.84s, then peek; photo opens as retreat begins at 3.78s. */
    .js .hero-top .hero-trace-panda-peek,
    .js .hero-top .hero-trace-panda-grip {
        stroke: none;
        /* Keep a small fixed rightward lean; no turning during the reveal. */
        transform-origin: 32px 28px;
    }

    .js .hero-top .hero-trace-panda-peek {
        /* Easing is sampled into the arc, so each segment stays continuous. */
        animation: desktop-panda-peek 2.95s 1.6s linear both;
    }

    .js .hero-top .hero-trace-panda-grip {
        /* Reach the edge before the face, then share the body's retreat. */
        animation: desktop-panda-grip 2.95s 1.6s linear both;
    }

    .js .hero-top .hero-trace-panda-wave {
        transform-origin: 51px 50px;
        animation: desktop-panda-wave 1.46s 2.32s ease-in-out both;
    }

    .js .hero-top .hero-trace-panda-face {
        transform-origin: 28px 42px;
        animation: desktop-panda-head-tilt 2.95s 1.6s ease-in-out both;
    }

    .js .hero-top .hero-trace-panda-grip-wrap {
        transform-origin: 0 66px;
        animation: desktop-panda-grip-wrap 2.95s 1.6s ease-in-out both;
    }

    .hero-trace-panda-dark {
        fill: #30332f;
        stroke: none;
    }

    .hero-trace-panda-pad { fill: #798172; }
    .hero-trace-panda-muzzle { fill: #f0efe6; }

    .hero-trace-panda-head,
    .hero-trace-panda-body {
        fill: #fafaf5;
        stroke: #b7bcaf;
        stroke-width: .9;
    }

    .hero-trace-panda-body { stroke: none; }

    .hero-trace-panda-eye {
        fill: none;
        stroke: #fafaf5;
        stroke-width: 1.8;
        stroke-linecap: round;
    }

    .hero-trace-panda-fingers {
        fill: none;
        stroke: #6a7165;
        stroke-width: 1.2;
        stroke-linecap: round;
    }

    .hero-trace-panda-smile {
        fill: none;
        stroke: #30332f;
        stroke-width: 1.3;
        stroke-linecap: round;
    }

    .js .hero-top .hero-photo {
        /* Reveal the photo while the panda tucks back, without an empty pause. */
        animation: desktop-notch-photo 1.5s var(--hero-scene-delay) cubic-bezier(.42, 0, .3, 1) both;
    }

    .js .hero-top .hero-title-first {
        animation: desktop-notch-title .8s .1s var(--hero-soft-move) both;
    }

    .js .hero-top .hero-title-second > span:first-child {
        animation: desktop-notch-ink .8s .16s var(--hero-soft-ink) both;
    }

    .js .hero-top .hero-top-eyebrow,
    .js .hero-top .hero-v3-subtitle,
    .js .hero-top .hero-v3-date,
    .js .hero-top .hero-v3-tags,
    .js .hero-top .hero-v3-actions,
    .js .hero-top .hero-v3-vertical-text,
    .js .hero-top .hero-v3-stamp,
    .js .hero-top .hero-photo-credit,
    .js .hero-top .hero-v3-divider {
        animation: desktop-notch-ink .8s var(--hero-delay, .3s) var(--hero-soft-ink) both;
    }

    .hero-top-eyebrow { --hero-delay: 0s; }
    .hero-v3-subtitle { --hero-delay: .3s; }
    .hero-v3-divider { --hero-delay: .38s; }
    .hero-v3-date { --hero-delay: .42s; }
    .hero-v3-tags { --hero-delay: .48s; }
    .hero-v3-actions { --hero-delay: .54s; }
    .hero-v3-vertical-text { --hero-delay: 5.4s; }
    .hero-v3-stamp, .hero-photo-credit { --hero-delay: 5.5s; }
    .hero-bottom-left, .hero-bottom-right { --hero-delay: var(--hero-scene-delay); }
    .hero-landscape-credit { --hero-delay: var(--hero-scene-delay); }

    .js .hero-bottom-left,
    .js .hero-bottom-right,
    .js .hero-landscape-credit {
        animation-duration: .8s;
        animation-timing-function: var(--hero-soft-ink);
    }

    .js .hero-bottom-right {
        /* Keep the copy on its moving paper while all panels reveal together. */
        animation: hero-ink-arrive .8s var(--hero-scene-delay) var(--hero-soft-ink) both,
            desktop-bottom-copy 1.3s var(--hero-scene-delay) var(--hero-soft-move) both;
    }

    .js .hero-landscape {
        animation: desktop-landscape-rise 1.4s var(--hero-scene-delay) var(--hero-soft-move) both;
    }

    .js .hero-bottom-shape {
        animation: desktop-bottom-paper 1.3s var(--hero-scene-delay) var(--hero-soft-move) both;
    }

    .js .hero-bamboo {
        animation: hero-leaf-arrive 1.5s var(--hero-scene-delay) var(--hero-soft-move) both,
            desktop-bottom-copy 1.3s var(--hero-scene-delay) var(--hero-soft-move) both;
    }
}

@keyframes desktop-notch-ink { from { opacity: 0; } to { opacity: 1; } }
/* Start the photo mask exactly beneath the fixed paper edge, then open it rightward.
   The photo starts at 30cqw; subtract that offset to share the notch coordinates.
   Hide its painted surface during the delay to prevent antialiased edge seams. */
@keyframes desktop-notch-photo {
    from {
        visibility: hidden;
        clip-path: polygon(
            0 0,
            calc(925 * var(--hero-unit) - 30cqw) 0,
            calc(918 * var(--hero-unit) - 30cqw) calc(43 * var(--hero-unit)),
            calc(728 * var(--hero-unit) - 30cqw) calc(43 * var(--hero-unit)),
            calc(693 * var(--hero-unit) - 30cqw) calc(257 * var(--hero-unit)),
            calc(834 * var(--hero-unit) - 30cqw) calc(257 * var(--hero-unit)),
            calc(815 * var(--hero-unit) - 30cqw) calc(373 * var(--hero-unit)),
            calc(735 * var(--hero-unit) - 30cqw) calc(373 * var(--hero-unit)),
            calc(686 * var(--hero-unit) - 30cqw) 100%,
            0 100%
        );
    }
    to {
        visibility: visible;
        clip-path: polygon(
            0 0, 100% 0,
            100% calc(43 * var(--hero-unit)), 100% calc(43 * var(--hero-unit)),
            100% calc(257 * var(--hero-unit)), 100% calc(257 * var(--hero-unit)),
            100% calc(373 * var(--hero-unit)), 100% calc(373 * var(--hero-unit)),
            100% 100%, 0 100%
        );
    }
}
@keyframes desktop-notch-title { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes desktop-notch-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes desktop-paw-print {
    0% { opacity: 0; }
    18%, 48% { opacity: .62; }
    100% { opacity: 0; }
}
@keyframes desktop-panda-peek {
    /* A restrained peek: stay 12px behind the previous pose and 3px lower.
       The 6deg lean is constant; only the very shallow entry arc moves. */
    0%, 100% { transform: translate(-118px, 8px) rotate(6deg); }
    2.333%, 97.833% { transform: translate(-117.899px, 7.531px) rotate(6deg); }
    4.667%, 95.667% { transform: translate(-116.571px, 6.246px) rotate(6deg); }
    7%, 93.5% { transform: translate(-111.742px, 4.39px) rotate(6deg); }
    9.333%, 91.333% { transform: translate(-101.371px, 2.339px) rotate(6deg); }
    11.667%, 89.167% { transform: translate(-85.104px, .568px) rotate(6deg); }
    14%, 87% { transform: translate(-65px, -.5px) rotate(6deg); }
    16.333%, 84.833% { transform: translate(-44.896px, -.671px) rotate(6deg); }
    18.667%, 82.667% { transform: translate(-28.629px, -.068px) rotate(6deg); }
    21%, 80.5% { transform: translate(-18.258px, .953px) rotate(6deg); }
    23.333%, 78.333% { transform: translate(-13.429px, 1.987px) rotate(6deg); }
    25.667%, 76.167% { transform: translate(-12.101px, 2.728px) rotate(6deg); }
    28%, 74% { transform: translate(-12px, 3px) rotate(6deg); }
}
@keyframes desktop-panda-wave {
    /* Keep the greeting paw tucked behind the cheek during entry and retreat. */
    0%, 100% { transform: rotate(-75deg); }
    23%, 80% { transform: rotate(0); }
    33%, 62% { transform: rotate(-9deg); }
    47%, 75% { transform: rotate(9deg); }
}
@keyframes desktop-panda-grip {
    /* Hold the edge first; the exit samples match desktop-panda-peek exactly. */
    0%, 74% { transform: translate(-12px, 3px) rotate(6deg); }
    76.167% { transform: translate(-12.101px, 2.728px) rotate(6deg); }
    78.333% { transform: translate(-13.429px, 1.987px) rotate(6deg); }
    80.5% { transform: translate(-18.258px, .953px) rotate(6deg); }
    82.667% { transform: translate(-28.629px, -.068px) rotate(6deg); }
    84.833% { transform: translate(-44.896px, -.671px) rotate(6deg); }
    87% { transform: translate(-65px, -.5px) rotate(6deg); }
    89.167% { transform: translate(-85.104px, .568px) rotate(6deg); }
    91.333% { transform: translate(-101.371px, 2.339px) rotate(6deg); }
    93.5% { transform: translate(-111.742px, 4.39px) rotate(6deg); }
    95.667% { transform: translate(-116.571px, 6.246px) rotate(6deg); }
    97.833% { transform: translate(-117.899px, 7.531px) rotate(6deg); }
    100% { transform: translate(-118px, 8px) rotate(6deg); }
}
@keyframes desktop-panda-head-tilt {
    0%, 28%, 100% { transform: rotate(-8deg); }
    46% { transform: rotate(1deg); }
    64%, 74% { transform: rotate(-4deg); }
}
@keyframes desktop-panda-grip-wrap {
    /* Curl around the edge before the body appears; release as it withdraws. */
    0%, 80%, 100% { transform: scaleX(0); }
    8%, 74% { transform: scaleX(1); }
}
@keyframes desktop-notch-light {
    0% { opacity: 0; animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
    8% { opacity: .85; }
    75% { opacity: .85; animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
    100% { opacity: 0; }
}

@keyframes desktop-landscape-rise {
    from { opacity: .35; clip-path: inset(100% 0 0 0); transform: translateY(0); }
    to { opacity: 1; clip-path: inset(0); transform: translateY(0); }
}

@keyframes desktop-bottom-paper {
    /* Place the leftmost corner at the viewport edge, not a full screen away. */
    from { transform: translateX(var(--hero-bottom-paper-travel)); }
    to { transform: translateX(0); }
}

@keyframes desktop-bottom-copy {
    /* Match the paper's percentage travel in hero-container coordinates. */
    from { translate: var(--hero-bottom-copy-travel) 0; }
    to { translate: 0 0; }
}

/* On small screens the photograph sits above the type; the cut-paper motif stays. */
@media (max-width: 767px) {
    .hero-top { height: auto; }
    .hero-photo { width: 100%; height: 360px; }
    .hero-top-bg { object-position: center center; }
    .hero-top-shape { top: 310px; clip-path: polygon(0 38px, 63% 38px, 66% 0, 100% 0, 100% 100%, 0 100%); }
    .hero-content { height: auto; }
    .hero-top-left { position: relative; padding: 376px 24px 30px; }
    .hero-top-eyebrow { position: static; align-items: center; }
    .hero-eyebrow-en { width: 45%; padding-left: 12px; font-size: 9px; letter-spacing: .24em; }
    .hero-eyebrow-jp { padding: 0; font-size: 12px; letter-spacing: .12em; }
    .hero-v3-title { position: static; margin-top: 25px; font-size: clamp(28px, 8.2vw, 52px); line-height: 1.38; letter-spacing: -.055em; }
    .hero-title-second { margin-top: 0; font-size: clamp(26px, 7.8vw, 48px); }
    .hero-title-edition { margin-left: .1em; font-size: .83em; }
    .hero-v3-subtitle { position: static; margin-top: 13px; font-size: clamp(12px, 3.5vw, 20px); letter-spacing: .065em; }
    .hero-v3-divider { position: static; width: 48px; margin: 22px 0 13px; height: 1px; }
    .hero-v3-date { position: static; gap: 6px; font-size: clamp(25px, 6.6vw, 35px); }
    .hero-v3-tags { position: static; gap: 7px; margin-top: 12px; }
    .hero-v3-tags span { width: auto; height: 28px; padding: 0 9px; font-size: 10px; letter-spacing: .03em; }
    .hero-v3-tags span:nth-child(2), .hero-v3-tags span:nth-child(3) { width: auto; }
    .hero-v3-actions { position: static; display: grid; grid-template-columns: 1.18fr 1fr; gap: 10px; margin-top: 24px; }
    .hero-v3-actions a { height: 48px; gap: 10px; padding: 0 8px; font-size: 12px; letter-spacing: .02em; }
    .hero-v3-actions .btn-dark, .hero-v3-actions .btn-outline { width: auto; }
    .hero-v3-actions svg { width: 18px; height: 14px; }
    .hero-top-right { position: absolute; inset: 0; }
    .hero-v3-vertical-text { top: 24px; right: 18px; font-size: 16px; line-height: 1.8; letter-spacing: .1em; }
    .hero-v3-stamp { top: 251px; right: 18px; bottom: auto; width: 100px; }
    .stamp-text { font-size: 9px; }
    .stamp-text::after { width: 40px; top: 7px; }
    .hero-photo-credit { top: 322px; right: auto; left: 16px; bottom: auto; font-size: 9px; }
    .hero-bottom { height: 394px; margin-top: 4px; }
    .hero-bottom .hero-content { height: 100%; }
    .hero-landscape { bottom: auto; height: 218px; }
    .hero-bottom-bg { object-position: center 65%; }
    .hero-bottom-shape { clip-path: polygon(0 218px,61% 218px,65% 198px,100% 198px,100% 100%,0 100%); }
    .hero-bottom-left { top: 22px; left: 24px; }
    .hero-bottom-eyebrow .en { font-size: 11px; letter-spacing: .25em; }
    .hero-bottom-eyebrow .line { top: 10px; left: 82px; width: 36px; }
    .hero-bottom-jp { margin-top: 15px; font-size: 12px; line-height: 1.85; letter-spacing: .03em; }
    .hero-bottom-right { top: 218px; right: 24px; left: 24px; bottom: 0; width: auto; }
    .hero-bottom-jp-main { font-size: 16px; line-height: 1.8; letter-spacing: .025em; }
    .hero-bottom-en-main { margin-top: 12px; font-size: 8px; line-height: 1.85; letter-spacing: .24em; }
    .hero-bottom-en-main::before { width: 32px; margin-bottom: 10px; }
    .hero-bamboo { --hero-bamboo-opacity: .3; top: 207px; right: -40px; width: 125px; height: 186px; }
    .hero-landscape-credit { right: 42%; bottom: auto; top: 198px; font-size: 8px; }
}

@media (max-width: 359px) {
    .hero-top-left { padding-inline: 18px; }
    .hero-v3-tags { gap: 5px; }
    .hero-v3-tags span { font-size: 9px; padding-inline: 7px; }
    .hero-v3-actions a { gap: 5px; font-size: 11px; }
    .hero-bottom-right { left: 18px; right: 18px; }
}