/* ══════════ MyPlanJapan — shared blog post styles ══════════ */
    /* ══════════ BLOG POST — self-contained ══════════ */
    :root {
        --red: #e60000;
        --red-dark: #b1222a;
        --ink: #111;
        --paper: #faf8f6;
        --line: #e8e4e0;
    }

    *, *::before, *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        color: var(--ink);
        background: #fff;
        line-height: 1.6;
    }

    a { text-decoration: none; color: inherit; }
    img { max-width: 100%; display: block; }

    /* ── HEADER ── */
    /* Header + verification banner stick together (builder-style stack) */
    .header-stack {
        position: sticky;
        top: 0;
        z-index: 20;
    }

    header {
        min-height: 84px;
        border-bottom: 3px solid #ff0000;
        background-color: #ffffff;
        line-height: normal;
    }

    .nav-container {
        max-width: 1560px;
        height: 100%;
        margin: 0 auto;
        padding: 16px 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 40px;
    }

    .logo {
        display: flex;
        align-items: center;
        gap: 13px;
        justify-self: start;
        text-decoration: none;
        flex-shrink: 0;
        top: 1px
    }

    .logo-mark {
        height: 56px;
        width: auto;
        display: block;
    }

    .logo-word {
        font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
        font-weight: 700;
        font-size: 34px;
        line-height: 1;
        letter-spacing: 0.3px;
        color:  #333333;
        white-space: nowrap;
    }

    .logo-accent {
        color: #e60000;
    }

    .nav-links {
        justify-self: center;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 22px;
         position: relative;
    top: 3px;
    }

    .nav-links a {
        position: relative;
        color: #333333;
        font-weight: 700;
        font-size: 16px;
    }

    .nav-links a:hover {
        text-decoration: underline;
    }

    .nav-links a.active {
        color: #e60000;
        cursor: pointer;
    }

    .social-icons {
        display: flex;
        gap: 10px;
        justify-self: end;
        position: relative;
    top: 3px;
    }

    .social-icons a {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #f2f2f2;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #333;
        transition: all 0.2s ease;
        font-size: 16px;
    }

    .social-icons a:hover {
        background: #e60000;
        color: #fff;
        transform: translateY(-2px);
    }

        /* Account control (auth-aware) */
    .header-right {
        display: flex;
        align-items: center;
        gap: 10px;
        justify-self: end;
    }

    /* Matches the builder's resend button (brand-btn) */
    .brand-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      height: 36px;
      padding: 0 16px;
      border: 1px solid #ddd;
      border-radius: 10px;
      background: #fff;
      color: #111;
      font-size: 13px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.12s ease;
    }
    .brand-btn:hover { border-color: #e60000; color: #e60000; }
    .account-control {
        position: relative;
        flex-shrink: 0;
        left: 24px;
        top: 2px;
    }

    .account-signin {
        display: inline-block;
        padding: 10px 16px;
        border-radius: 999px;
        background: #e60000;
        color: #fff;
        font-weight: 800;
        font-size: 14px;
        text-decoration: none;
        white-space: nowrap;
        line-height: 1;
        transition: background 0.18s ease;
    }

    .account-signin:hover {
        background: #b1222a;
    }

    .account-trigger {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 1px solid #e6e6e6;
        background: #fff;
        border-radius: 999px;
        padding: 5px 12px 5px 6px;
        cursor: pointer;
        font-family: inherit;
    }

    .account-trigger:hover {
        border-color: #ccc;
    }

    .account-avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #e60000;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        line-height: normal;
        box-sizing: border-box;
        padding-bottom: 2px; /* same centring as the itinerary pages */
    }

    .account-name {
        font-size: 14px;
        font-weight: 700;
        color: #333;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .account-caret {
        font-size: 11px;
        color: #767676;
    }

    .account-dropdown {
        position: absolute;
        top: calc(100% + 11px);
        right: 0;
        min-width: 232px;
        background: #fff;
        border: 1px solid #ededed;
        border-radius: 14px;
        box-shadow: 0 18px 45px rgba(0,0,0,0.12);
        padding: 8px;
        z-index: 60;
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    }

    .account-dropdown.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .account-dd-pointer { position: absolute; top: -6px; right: 20px; width: 12px; height: 12px; background: #fff; border-left: 1px solid #ededed; border-top: 1px solid #ededed; transform: rotate(45deg); }
    .account-profile { display: flex; align-items: center; gap: 10px; padding: 6px 10px 12px; border-bottom: 1px solid #f0f0f0; margin-bottom: 6px; }
    .account-profile-avatar { width: 36px; height: 36px; border-radius: 50%; background: #e60000; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; text-transform: uppercase; flex-shrink: 0; }
    .account-profile-meta { min-width: 0; display: flex; flex-direction: column; }
    .account-profile-name { font-size: 14px; font-weight: 800; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .account-profile-email { font-size: 12px; color: #767676; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .account-dropdown-item {
        display: block;
        width: 100%;
        text-align: left;
        box-sizing: border-box;
        padding: 10px 12px;
        border-radius: 9px;
        font-size: 14px;
        font-weight: 700;
        color: #333;
        background: none;
        border: none;
        cursor: pointer;
        font-family: inherit;
        text-decoration: none;
    }

    .account-dropdown-item:hover {
        background: rgba(230,0,0,0.08);
        color: #e60000;
    }

    .account-dropdown-divider {
        height: 1px;
        background: #f0f0f0;
        margin: 6px 4px;
    }

    .account-signout {
        color: #c1121f;
    }

    @media (max-width: 900px) {
        .header-right {
            justify-self: center;
        }
    }

    .nav-dropdown {
        position: relative;
        display: inline-flex;
        align-items: center;
    }

    .nav-dropbtn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .nav-caret {
        font-size: 12px;
        transform: translateY(1px);
    }

    .nav-dropdown-menu {
        position: absolute;
        top: calc(100% + 12px);
        left: 0;
        min-width: 170px;
        background: #fff;
        border: 1px solid #ededed;
        border-radius: 14px;
        box-shadow: 0 18px 45px rgba(0,0,0,0.12);
        padding: 10px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
        z-index: 50;
    }

    .nav-dropdown-menu a {
        display: block;
        padding: 10px 12px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 800;
        color: #333;
    }

    .nav-dropdown-menu a:hover {
        background: rgba(230,0,0,0.08);
        color: #e60000;
        text-decoration: none;
    }

    .nav-dropdown:hover .nav-dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav-dropdown-menu::before {
        content: "";
        position: absolute;
        top: -12px;
        left: 0;
        width: 100%;
        height: 12px;
    }

    @media (max-width: 1520px) {
        .nav-container { gap: 26px; }
        .logo-mark { height: 46px; }
        .logo-word { font-size: 30px; }
        .nav-links { gap: 16px; }
        .nav-links a { font-size: 14px; }

        .header-right {
            gap: 10px;
        }

        .account-signin {
            padding: 7px 14px;
            font-size: 13px;
        }
    }

    @media (max-width: 1260px) {
        .nav-container { gap: 20px; }
        .logo-mark { height: 38px; }
        .logo-word { font-size: 25px; }
        .nav-links { gap: 10px; }
        .nav-links a { font-size: 13px; }
    }

    @media (max-width: 1040px) {
        .nav-container {
            flex-direction: column;
            gap: 10px;
        }

        .nav-links {
            flex-wrap: wrap;
            gap: 16px;
            justify-content: center;
        }

        .social-icons {
            justify-self: center;
        }

        .header-right {
            justify-self: center;
        }
    }

    @media (min-width: 761px) and (max-width: 1040px) and (min-height: 501px) {
        .nav-dropdown-menu {
            display: none;
            left: auto;
            right: 0;
        }

        .nav-dropdown:hover .nav-dropdown-menu,
        .nav-dropdown:focus-within .nav-dropdown-menu {
            display: block;
        }
    }

    /* ════ MOBILE HEADER ════
       ≤760px: logo + account + hamburger in one row; .nav-links restyled as a
       tap-to-open panel under the header (no duplicated markup). The Seasons
       hover dropdown becomes a static inline group, since hover doesn't exist
       on touch. Toggled by .mobile-nav-open on .header-stack. */
    .nav-scrim,
    .nav-back,
    .nav-socials { display: none; }

    html.mpj-nav-locked, body.mpj-nav-locked { overflow: hidden; }

    .mobile-nav-toggle {
        display: none;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        background: none;
        border: 0;
        color: #222;
        padding: 0;
        cursor: pointer;
    }

    @media (max-width: 760px), (max-height: 500px) {
        header { position: relative; }

        /* While the drawer is open: freeze the page exactly where it is
           and hard-pin the header to the top of the screen. No sticky
           semantics involved, so no overflow interaction can detach it,
           and z 1200 keeps the whole stack above any page content. */
        body.mpj-nav-locked {
            position: fixed;
            left: 0;
            right: 0;
            padding-top: var(--header-h, 87px);
        }

        body.mpj-nav-locked .header-stack {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
        }

        .header-stack.mobile-nav-open { z-index: 1200; }

        .nav-container {
            position: relative;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding-left: 10px;
            padding-right: 14px;
        }

        /* Let the row actually shrink at narrow widths: flex children
           default to min-width auto and refuse to compress, which pushed
           the burger off screen and made the whole page pan sideways. */
        /* japan.travel-style bar: burger left, logo dead centre, account right. */
        .logo {
            flex: 0 1 auto;
            min-width: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .logo-mark { height: 30px; }
        .logo-word { font-size: 19px; white-space: nowrap; }

        /* Pinned, not flexed: absolute right anchor makes it impossible
           for the account control to land outside the viewport, whatever
           the flex row is doing. Mirrors the centred-logo approach. */
        .header-right {
            justify-self: auto;
            min-width: 0;
            gap: 8px;
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            margin-left: 0;
        }

        /* The base .account-control carries a desktop nudge (left: 24px,
           top: 2px) that shoved the sign-in pill / avatar past the viewport
           edge on phones. Neutralise it at mobile widths. */
        .account-control {
            left: 0;
            top: 0;
        }
        /* Bar shows just the avatar initials; the full name and email
           are already in the dropdown that opens on tap. */
        .account-name { display: none; }
        .account-caret { display: none; }
        .account-trigger { padding: 4px; }

        .mobile-nav-toggle { display: inline-flex; flex: 0 0 auto; order: -1; margin-left: 0; }
        .social-icons { display: none; }

        /* Slide-in drawer from the right, scrim over the page behind. */
        /* Parked via a right offset, NOT a transform: transformed fixed
           elements widen the page in Chrome (sideways pan), and clipping
           that at the root breaks the sticky header. Offset parking
           creates no overflow, so neither hack is needed. */
        .nav-links {
            position: fixed;
            top: var(--header-h, 87px);
            right: -440px;
            bottom: 0;
            left: auto;
            width: min(88vw, 360px);
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-items: stretch;
            /* The base rule centres the nav horizontally on desktop. In a
               column that centres VERTICALLY, and unsafe centring pushes
               half the overflow out through the top of the scroll
               container, where no scrollTop can reach it. */
            justify-content: flex-start;
            gap: 0;
            background: #fff;
            box-shadow: -18px 0 40px rgba(0,0,0,0.18);
            padding: 6px 0 18px;
            overflow-y: auto;
            overflow-x: hidden;
            z-index: 999;
            visibility: hidden;
            transition: right 0.28s ease, visibility 0s linear 0.28s;
        }

        .header-stack.mobile-nav-open .nav-links {
            right: 0;
            visibility: visible;
            transition: right 0.28s ease;
        }

        .nav-scrim {
            display: block;
            position: fixed;
            inset: var(--header-h, 87px) 0 0 0;
            background: rgba(0, 0, 0, 0.45);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.28s ease, visibility 0s linear 0.28s;
            z-index: 998;
        }

        .header-stack.mobile-nav-open .nav-scrim {
            opacity: 1;
            visibility: visible;
            transition: opacity 0.28s ease;
        }


        .nav-socials {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: auto;
            padding: 18px 28px calc(10px + env(safe-area-inset-bottom));
            border-top: 1px solid #ececec;
        }

        /* Also covers the clone inside the Seasons sub-panel: outranks the
           .nav-dropdown-menu a row styling (block + hairline + bold) so
           icons never render as bordered rows in either sleeve. */
        .nav-links .nav-socials a,
        .nav-links .nav-dropdown-menu .nav-socials a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 6px;
            font-size: 20px;
            font-weight: 400;
            border: 0;
            border-radius: 0;
            background: none;
            box-shadow: none;
            width: auto;
            height: auto;
        }

        .nav-links > a {
            padding: 16px 24px;
            font-size: 17px;
            border-bottom: 1px solid #f2f2f2;
        }

        .nav-dropdown { display: block; }

        .nav-links .nav-dropbtn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 16px 24px;
            font-size: 17px;
            font-weight: 700;
            color: #222;
            border-bottom: 1px solid #f2f2f2;
            cursor: pointer;
        }

        .nav-links .nav-dropbtn::after {
            content: '\203A';
            font-size: 24px;
            line-height: 1;
            color: inherit;
        }

        .nav-caret { display: none; }

        /* Seasons drills into a sub-panel that slides over the drawer,
           japan.travel style. The Back row is injected by the script. */
        .nav-dropdown { position: static; }

        .nav-dropdown-menu {
            position: absolute;
            inset: 0;
            background: #fff;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            opacity: 1;
            transform: translateX(102%);
            visibility: hidden;
            transition: transform 0.25s ease, visibility 0s linear 0.25s;
            box-shadow: none;
            border: 0;
            border-radius: 0;
            min-width: 0;
            padding: 6px 0 18px;
            overflow-y: auto;
            z-index: 2;
        }

        /* Outranks the desktop :hover rule, which otherwise pins the
           sub-panel open while a mouse pointer sits over it, making the
           Back button appear dead when testing in a desktop browser. */
        .nav-links .nav-dropdown:not(.drill-open) .nav-dropdown-menu {
            transform: translateX(102%);
            visibility: hidden;
            transition: transform 0.25s ease, visibility 0s linear 0.25s;
        }

        .nav-links .nav-dropdown.drill-open .nav-dropdown-menu {
            transform: translateX(0);
            visibility: visible;
            transition: transform 0.25s ease;
        }

        .nav-dropdown-menu::before { display: none; }

        .nav-dropdown-menu a {
            display: block;
            padding: 16px 24px;
            font-size: 17px;
            font-weight: 700;
            border-bottom: 1px solid #f2f2f2;
        }

        .nav-back {
            display: flex;
            align-items: center;
            gap: 6px;
            width: 100%;
            padding: 16px 24px;
            font-size: 15px;
            font-weight: 700;
            color: #666;
            background: none;
            border: 0;
            border-bottom: 1px solid #f2f2f2;
            cursor: pointer;
            font-family: inherit;
            text-align: left;
        }
    }

        /* ── HERO (dark gradient + kanji watermark) ── */
    .hero {
        position: relative;
        height: calc(100vh - 91px);
        min-height: 580px;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
    }

    .hero-bg {
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, #0d1b2a 0%, #1b2838 50%, #0d1b2a 100%);
    }

    .hero-img-layer {
        position: absolute;
        inset: 0;
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%);
    }

    .hero-content {
        position: relative;
        z-index: 2;
        padding: 0 64px 80px;
        max-width: 860px;
    }

    .hero-eyebrow {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.55);
        margin-bottom: 16px;
    }

    .hero-eyebrow a {
        color: rgba(255,255,255,0.55);
        border-bottom: 1px solid transparent;
        transition: color 0.15s ease, border-color 0.15s ease;
    }

    .hero-eyebrow a:hover {
        color: #fff;
        border-bottom-color: rgba(255,255,255,0.5);
    }

    .hero-kanji {
        font-size: 72px;
        color: rgba(255,255,255,0.08);
        font-family: var(--sans);
        line-height: 1;
        margin-bottom: 10px;
        letter-spacing: 0.1em;
    }

    .hero-title {
        font-size: clamp(56px, 8vw, 92px);
        font-weight: 900;
        color: #fff;
        line-height: 0.95;
        margin-bottom: 28px;
        letter-spacing: -0.02em;
    }

    .hero-hook {
        font-size: 17px;
        line-height: 1.7;
        color: rgba(255,255,255,0.82);
        max-width: 520px;
        padding-left: 20px;
        border-left: 3px solid #ff0000;
    }

    /* ── ARTICLE + SIDEBAR LAYOUT ── */
    .blog-layout {
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 24px;
        display: grid;
        grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
        gap: 56px;
        align-items: start;
    }

    .blog-layout .post-body {
        max-width: none;
        margin: 0;
        padding: 52px 0 20px;
    }

    .blog-sidebar {
        padding-top: 52px;
    }

    .sidebar-heading {
        font-size: 13px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.16em;
        color: var(--red);
        margin: 0 0 16px;
    }

    /* Story cards (related articles) */
    .story-card {
        display: block;
        border-radius: 14px;
        overflow: hidden;
        background: #fff;
        border: 1px solid #eee;
        box-shadow: 0 10px 25px rgba(0,0,0,0.06);
        margin-bottom: 18px;
        color: inherit;
        text-decoration: none;
        transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }

    .story-card:hover {
        transform: translateY(-3px);
        border-color: #ffd1d1;
        box-shadow: 0 16px 36px rgba(0,0,0,0.1);
    }

    .story-card-image {
        width: 100%;
        height: 150px;
        overflow: hidden;
    }

    .story-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    .story-card-body {
        padding: 14px 16px 16px;
    }

    .story-card-kicker {
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--red);
        margin-bottom: 6px;
    }

    .story-card-title {
        font-size: 16px;
        font-weight: 900;
        margin: 0 0 6px;
        color: #222;
        line-height: 1.3;
    }

    .story-card-text {
        font-size: 13px;
        line-height: 1.6;
        color: #666;
        margin: 0;
    }

    @media (max-width: 960px) {
        .blog-layout {
            grid-template-columns: 1fr;
            gap: 0;
        }

        .blog-sidebar {
            position: static;
            padding-top: 20px;
            border-top: 1px solid var(--line);
            margin-top: 20px;
        }
    }

    /* ── ARTICLE HERO (image-backed) ── */
    .post-hero {
        position: relative;
        overflow: hidden;
        color: #fff;
        min-height: 520px;
        display: flex;
        align-items: flex-end;
    }

    .post-hero-bg {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        transform: scale(1.02);
    }

    .post-hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 45%, rgba(0,0,0,0.35) 100%);
    }

    .post-hero-inner {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
        padding: 0 24px 48px;
    }

    .post-breadcrumb {
        font-size: 13px;
        font-weight: 700;
        color: rgba(255,255,255,0.8);
        margin-bottom: 20px;
    }

    .post-breadcrumb a { color: rgba(255,255,255,0.8); }
    .post-breadcrumb a:hover { color: #fff; }
    .post-breadcrumb span { margin: 0 8px; color: rgba(255,255,255,0.45); }

    .post-category {
        display: inline-block;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #fff;
        background: var(--red);
        border-radius: 999px;
        padding: 6px 14px;
        margin-bottom: 18px;
    }

    .post-title {
        font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
        font-size: clamp(32px, 4.8vw, 50px);
        font-weight: 700;
        line-height: 1.12;
        color: #fff;
        margin-bottom: 20px;
        max-width: 760px;
    }

    .post-meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px 16px;
        font-size: 14px;
        color: rgba(255,255,255,0.85);
    }

    .post-meta .dot { color: rgba(255,255,255,0.45); }
    .post-meta i { color: #fff; margin-right: 6px; }

    /* ── ARTICLE BODY ── */
    .post-body {
        max-width: 720px;
        margin: 0 auto;
        padding: 52px 24px 20px;
    }

    .post-body p {
        font-size: 17px;
        line-height: 1.85;
        color: #2a2a2a;
        margin-bottom: 24px;
    }

    .post-lead-para {
        font-size: 20px;
        line-height: 1.7;
        color: #444;
    }

    .post-body h2 {
        font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
        font-size: 28px;
        font-weight: 700;
        color: var(--ink);
        line-height: 1.25;
        margin: 44px 0 18px;
        padding-left: 18px;
        border-left: 4px solid var(--red);
    }

    .post-body h3 {
        font-size: 19px;
        font-weight: 900;
        color: var(--ink);
        margin: 32px 0 12px;
        padding-left: 15px;
        border-left: 3px solid var(--red);
    }

    .post-body ul, .post-body ol {
        margin: 0 0 24px 0;
        padding-left: 4px;
        list-style: none;
    }

    .post-body ul li, .post-body ol li {
        position: relative;
        font-size: 17px;
        line-height: 1.7;
        color: #2a2a2a;
        padding-left: 28px;
        margin-bottom: 12px;
    }

    .post-body ul li::before {
        content: '';
        position: absolute;
        left: 4px;
        top: 11px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--red);
    }

    .post-body ol {
        counter-reset: li;
    }

    .post-body ol li {
        counter-increment: li;
    }

    .post-body ol li::before {
        content: counter(li);
        position: absolute;
        left: 0;
        top: 1px;
        font-family: 'Playfair Display', Georgia, serif;
        font-weight: 700;
        font-size: 16px;
        color: var(--red);
    }

    .post-body strong { font-weight: 800; color: var(--ink); }

    .post-body a.inline-link {
        color: var(--red);
        font-weight: 700;
        border-bottom: 1px solid rgba(230,0,0,0.35);
    }

    .post-body a.inline-link:hover { border-bottom-color: var(--red); }

    /* inline body image */
    .post-figure {
        margin: 34px 0;
    }

    .post-figure img {
        width: 100%;
        height: 380px;
        object-fit: cover;
        border-radius: 14px;
    }

    .post-figure figcaption {
        font-size: 12.5px;
        color: #767676;
        padding: 10px 2px 0;
    }

    /* ── AUTHOR / DIVIDER ── */
    .post-end {
        max-width: 720px;
        margin: 12px auto 0;
        padding: 0 24px;
    }

    .post-end-rule {
        border: none;
        border-top: 1px solid var(--line);
        margin: 8px 0 0;
    }

    /* ── FOOTER CTA BAND (from home page) ── */
    .footer-cta {
        background: #e60000;
        padding: 72px 32px;
    }

    .footer-cta-inner {
        max-width: 1080px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
        flex-wrap: wrap;
    }

    .footer-cta-title {
        font-size: 36px;
        font-weight: 900;
        color: #fff;
        line-height: 1.1;
        margin-bottom: 10px;
    }

    .footer-cta-sub {
        font-size: 15px;
        color: #fff;
        line-height: 1.65;
        max-width: 480px;
    }

    .footer-cta-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 16px 32px;
        border-radius: 999px;
        background: #fff;
        color: #e60000;
        font-size: 15px;
        font-weight: 900;
        white-space: nowrap;
        flex-shrink: 0;
        transition: all 0.2s;
    }

    .footer-cta-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    .footer-cta-btn i {
        font-size: 13px;
    }


    @media (max-width: 900px) {
        .footer-top {
            grid-template-columns: 1fr;
            gap: 40px;
        }

        .footer-cta-title {
            font-size: 28px;
        }
    }

    @media (max-width: 640px) {
        .footer-nav {
            grid-template-columns: 1fr 1fr;
        }

        .footer-cta {
            padding: 56px 20px;
        }
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 900px) {
        /* The old no-drawer behaviour: hide the nav wholesale under 900.
           The drawer block above restyles .nav-links as the slide-in panel
           below 760, and this rule sat LATER in the file at equal
           specificity, so it display:none’d the panel’s contents (burger
           opened an empty drawer) and killed the stacked nav on iPads.
           Removed with the drawer port — 761-900 keeps the stacked nav,
           ≤760 gets the drawer. */
        .footer-inner { grid-template-columns: 1fr; gap: 28px; }
    }

    @media (max-width: 700px) {
        .post-hero { min-height: 420px; }
        .post-hero-inner { padding-bottom: 32px; }
        .post-body { padding-top: 36px; }
        .post-body p { font-size: 16px; }
        .post-lead-para { font-size: 18px; }
        .post-figure img { height: 240px; }
    }

    /* ── STANDARD SITE FOOTER (matches destination pages) ── */

    /* ── FOOTER NEWSLETTER STRIP ── */
    .site-footer .footer-newsletter {
        max-width: 1080px;
        margin: 0 auto;
        padding: 38px 32px 34px;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 36px;
        border-bottom: 1px solid #ececec;
    }

    .site-footer .footer-newsletter-eyebrow {
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #e60000;
        margin-bottom: 8px;
    }

    .site-footer .footer-newsletter-title {
        font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
        font-size: 28px;
        font-weight: 700;
        color: #111;
        line-height: 1.2;
        margin-bottom: 8px;
    }

    .site-footer .footer-newsletter-sub {
        font-size: 14px;
        line-height: 1.7;
        color: #666;
        max-width: 500px;
    }

    .site-footer .footer-newsletter-action {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 9px;
        min-width: min(430px, 100%);
    }

    .site-footer .footer-newsletter-form {
        display: flex;
        align-items: stretch;
        gap: 10px;
        width: 100%;
    }

    .site-footer .footer-newsletter-input {
        flex: 1;
        min-width: 0;
        padding: 14px 18px;
        border-radius: 999px;
        border: 1px solid #ddd;
        background: #fff;
        font-family: inherit;
        font-size: 14px;
        color: #111;
        outline: none;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .site-footer .footer-newsletter-input::placeholder {
        color: #767676;
    }

    .site-footer .footer-newsletter-input:focus {
        border-color: #e60000;
        box-shadow: 0 0 0 3px rgba(230,0,0,0.08);
    }

    .site-footer .footer-newsletter-btn {
        flex-shrink: 0;
        padding: 0 26px;
        border-radius: 999px;
        border: none;
        background: #e60000;
        color: #fff;
        font-family: inherit;
        font-size: 14px;
        font-weight: 800;
        cursor: pointer;
        white-space: nowrap;
        transition: background 0.18s ease;
    }

    .site-footer .footer-newsletter-btn:hover {
        background: #b1222a;
    }

    .site-footer .footer-newsletter-thanks {
        display: none;
        font-size: 14px;
        font-weight: 800;
        color: #15803d;
    }

    .site-footer .footer-newsletter-thanks.show {
        display: block;
    }

    .site-footer .footer-newsletter-thanks i {
        margin-right: 6px;
    }

    @media (max-width: 780px) {
        .site-footer .footer-newsletter {
            grid-template-columns: 1fr;
            gap: 20px;
            padding: 34px 22px 30px;
        }

        .site-footer .footer-newsletter-action {
            align-items: stretch;
            min-width: 0;
        }
    }

    @media (max-width: 520px) {
        .site-footer .footer-newsletter-form {
            flex-direction: column;
        }

        .site-footer .footer-newsletter-btn {
            min-height: 46px;
        }

        .site-footer .footer-newsletter-title {
            font-size: 24px;
        }
    }

    .site-footer { background: #fff; border-top: 1px solid #ececec; font-family: "Noto Sans JP", system-ui, sans-serif; }
    .site-footer .foot { max-width: 1080px; margin: 0 auto; padding: 50px 32px 26px; }
    .site-footer .foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 36px; }
    .site-footer .foot-brand { max-width: 270px; }
    .site-footer .foot-name { font-size: 22px; font-weight: 900; color: #e60000; margin-bottom: 10px; }
    .site-footer .foot-line { font-size: 13px; line-height: 1.7; color: #666; margin-bottom: 18px; }
    .site-footer .social-icons { display: flex; gap: 10px; justify-self: start; justify-content: flex-start; }
    .site-footer .social-icons a { width: 32px; height: 32px; border-radius: 50%; background: #f2f2f2; display: flex; align-items: center; justify-content: center; color: #333; font-size: 16px; text-decoration: none; transition: all 0.2s ease; }
    .site-footer .social-icons a:hover { background: #e60000; color: #fff; transform: translateY(-2px); }
    .site-footer .foot-h { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #111; margin-bottom: 14px; }
    .site-footer .foot-links a { display: block; font-size: 14px; color: #555; padding: 4px 0; text-decoration: none; transition: color 0.15s ease; }
    .site-footer .foot-links a:hover { color: #e60000; }
    .site-footer .foot-links a.foot-all { color: #b1222a; font-weight: 700; }
    .site-footer .foot-bottom { border-top: 1px solid #ececec; padding-top: 20px; display: flex; justify-content: space-between; align-items: center; gap: 14px 24px; flex-wrap: wrap; font-size: 12px; color: #767676; }
    .site-footer .foot-bottom-right { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
    .site-footer .foot-legal-links { display: flex; gap: 16px; }
    .site-footer .foot-legal-links a { color: #737373; text-decoration: none; transition: color 0.15s ease; }
    .site-footer .foot-legal-links a:hover { color: #e60000; }
    .site-footer a:focus-visible { outline: 2px solid #e60000; outline-offset: 3px; border-radius: 3px; }
    @media (max-width: 900px) { .site-footer .foot-grid { grid-template-columns: repeat(3, 1fr); gap: 30px 28px; } .site-footer .foot-brand { grid-column: 1 / -1; max-width: 320px; } }
    @media (max-width: 560px) { .site-footer .foot { padding: 40px 22px 24px; } .site-footer .foot-grid { grid-template-columns: 1fr 1fr; } .site-footer .foot-brand { grid-column: 1 / -1; } .site-footer .foot-bottom { flex-direction: column; align-items: flex-start; } }

    /* ════ MOBILE BAR ALIGNMENT ════
       Three separate causes were pulling the row out of line:

       1. header carried min-height: 84px but the row only produced 74px
          (42px burger + 16px padding top and bottom), and nav-container's
          height:100% resolved to auto against a min-height parent. So the
          whole bar sat ~5px above the header's optical centre.
       2. logo and header-right were absolutely centred on the padding box
          while the burger was centred by flex on the content box. Same
          result only while the vertical padding stayed symmetrical.
       3. the burger is a 22px icon inside a 42px tap target, so its box
          edge sits 10px outside the icon you actually see.

       Fixed by giving the bar one explicit height, pinning all three items
       with the identical formula so nothing is left to flex, and giving
       them a shared box height so none of it depends on content size. */
    @media (max-width: 760px), (max-height: 500px) {
        header { min-height: 0; }

        .nav-container {
            height: 62px;
            padding: 0 12px;
        }

        .mobile-nav-toggle,
        .logo,
        .header-right {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        /* Pulled 9px left so the icon, not its 42px tap target, sits 12px
           in and matches the account chip on the other side. If the icon
           size changes, this is (42 - icon) / 2 subtracted from 12. */
        .mobile-nav-toggle {
            left: 3px;
            /* Optical nudge: the icon reads high against the heavier avatar,
               so it sits 2px below the shared centre line. */
            transform: translateY(calc(-50% + 2px));
        }

        .header-right { right: 12px; }

        .logo {
            left: 50%;
            transform: translate(-50%, -50%);
        }

        /* All three get the SAME box height, so alignment stops depending
           on their intrinsic content heights (30px logo mark, 38px account
           pill, 42px burger) and each just centres its own contents. Change
           the one value below and all three move together. */
        .mobile-nav-toggle,
        .logo,
        .header-right {
            height: 42px;
            align-items: center;
        }

        .logo-word { line-height: 1; }
    }

    /* ════ DRAWER ON SHORT VIEWPORTS ════
       Tighter rows so nine links plus the icons need much less scrolling
       on a 375px-tall screen. */
    @media (max-height: 500px) {
        .nav-links .nav-socials {
            padding: 10px 28px calc(8px + env(safe-area-inset-bottom));
        }

        .nav-links > a,
        .nav-links .nav-dropbtn,
        .nav-links .nav-dropdown-menu a {
            padding: 11px 24px;
            font-size: 15px;
        }

        .nav-back { padding: 11px 24px; font-size: 14px; }
    }

    /* ════ 1041-1260 BAND ════
       The 1260 step still needs ~1223px of header, so the bottom of its own
       band overflows and page background shows down the right (iPad Air in
       landscape is 1180). Everything except the social row is already near
       its floor: the five icons are 200px of fixed, unshrinkable width and
       the single largest inflexible block in the header. They are already
       in the footer and in the mobile drawer, so the header copy gives. */
    @media (min-width: 1041px) and (max-width: 1260px) {
        .nav-container .social-icons { display: none; }
        .nav-container .header-right { gap: 0; }

        .nav-container .account-name {
            display: inline-block;
            max-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: middle;
        }
    }

    /* ════ 1261-1400 BAND ════
       Scoped above 1260 deliberately: appended at the end of the sheet it
       would otherwise outrank the tighter 1260 step at equal specificity
       and kill it. */
    @media (min-width: 1261px) and (max-width: 1400px) {
        .nav-container { gap: 22px; }
        .logo-mark { height: 42px; }
        .logo-word { font-size: 27px; }
        .nav-links { gap: 13px; }
        .nav-links a { font-size: 13.5px; }

        .nav-container .social-icons { gap: 8px; }
        .nav-container .social-icons a { width: 28px; height: 28px; font-size: 14px; }

        .nav-container .account-name {
            display: inline-block;
            max-width: 110px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: middle;
        }
    }

    /* ════ SHORT VIEWPORTS ════
       Nest Hub is 1024x600: wide enough to miss the drawer, short enough
       that the stacked nav (~170px) eats a third of the fold. iPads sit in
       the same WIDTH band but are 1024-1180px tall, so they are fine as is
       — which is why this keys off height, not width. The stacked layout is
       kept exactly as it is, only the sizes come down: ~170px to ~122px. */
    @media (min-width: 761px) and (max-height: 700px) and (min-height: 501px) {
        /* Bottom padding runs heavier than the top: the socials and account
           row sat almost on the red border otherwise. */
        .nav-container { gap: 8px; padding: 8px 20px 15px; }

        .logo-mark { height: 30px; }
        .logo-word { font-size: 22px; }

        .nav-links { gap: 14px; }
        .nav-links a { font-size: 13px; }

        .nav-container .social-icons { gap: 8px; }
        .nav-container .social-icons a { width: 28px; height: 28px; font-size: 14px; }

        .account-avatar { width: 24px; height: 24px; font-size: 11px; }
        .account-trigger { padding: 3px 10px 3px 5px; }
        .account-signin { padding: 7px 14px; font-size: 13px; }
    }


    /* ════════════════════════════════════════
       HERO CAP  ══════════════════════════════
       .post-hero is a 520px floor (420 under 700) with no vertical padding
       of its own, so the cap block ports without the padding-zeroing that
       faq.html needed. On a landscape phone the header plus a 420px hero is
       the whole screen and then some, so it is capped against the measured
       header with a peek of the article below. svh first so it still fits
       with the browser chrome showing, vh as the fallback above it. */
    @media (max-height: 700px) {
        .post-hero {
            min-height: 0;
            height: max(240px, min(420px, calc(100vh - var(--header-h, 80px) - 140px)));
            height: max(240px, min(420px, calc(100svh - var(--header-h, 80px) - 140px)));
        }
    }


    /* ════════════════════════════════════════
       RELATED ARTICLES ON PHONES  ════════════════════════
       Below 960 the sidebar stops being a sidebar and stacks under the
       article, and it renders EIGHT cards at a 150px image each — roughly
       2,400px of "Blogs / Articles" welded to the end of every post.

       Same treatment Andre picked for the blog index (Design F): the card
       drops its box and becomes an editorial row separated by a hairline,
       2.2:1 image band, title, excerpt clamped to two lines. Ratio not a
       fixed height, so the crop is the same on a 320px screen as a 430px
       one. Roughly 2,400px down to about 1,150px. */
    @media (max-width: 600px) {
        .story-card {
            border: none;
            border-radius: 0;
            box-shadow: none;
            background: none;
            margin-bottom: 0;
            padding: 18px 0;
            border-top: 1px solid var(--line);
        }

        #random-articles .story-card:first-child {
            border-top: none;
            padding-top: 4px;
        }

        /* the lift has nowhere to lift from once the box is gone */
        .story-card:hover {
            transform: none;
            box-shadow: none;
            border-color: var(--line);
        }

        .story-card-image {
            height: auto;
            aspect-ratio: 2.2 / 1;
            border-radius: 8px;
        }

        .story-card-body {
            padding: 12px 0 0;
        }

        .story-card-title {
            font-size: 17px;
        }

        .story-card-text {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            overflow: hidden;
        }
    }

    /* ════════════════════════════════════════
       CONTENT PADDING  ════════════════════════
       .blog-layout and .post-hero-inner both keep 24px sides at every
       width. The index uses 20px at this breakpoint, so the article now
       lines up with it. */
    @media (max-width: 600px) {
        .blog-layout {
            padding: 0 20px;
        }

        .post-hero-inner {
            padding: 0 20px 32px;
        }
    }


    /* ════════════════════════════════════════
       HERO TEXT IN LANDSCAPE  ══════════════════════════
       .post-title is clamp(32px, 4.8vw, 50px), and in landscape vw is the
       LONG side — so the title grows as the screen gets SHORTER. An iPhone
       SE sideways (667 wide) gets 32px, an XR (896 wide) gets 43px, on a
       screen 39px shorter. Past about 40px the stack outgrows the capped
       hero and .post-hero's own overflow: hidden clips it from the top,
       which is why the breadcrumb vanishes on the wider phone.

       Fixed sizes here, no vw, so the type stops tracking the wrong axis.
       Bottom alignment is kept: the content now fits, so there is nothing
       to clip and the design intent survives. */
    @media (max-height: 500px) {
        .post-hero-inner {
            padding: 0 24px 22px;
        }

        .post-breadcrumb {
            font-size: 12px;
            margin-bottom: 10px;
        }

        .post-category {
            font-size: 10px;
            padding: 5px 11px;
            margin-bottom: 12px;
        }

        .post-title {
            font-size: 26px;
            margin-bottom: 12px;
        }

        .post-meta {
            font-size: 12.5px;
            gap: 6px 14px;
        }
    }
/* Article photography: opt-in, natural proportions on desktop and mobile. */
.post-body .post-figure--editorial {
    margin: clamp(26px, 4vw, 38px) 0;
}
.post-body .post-figure--editorial img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    border-radius: 14px;
}
.post-body .post-figure--editorial figcaption {
    color: #666;
    font-size: 13px;
    line-height: 1.65;
    padding: 10px 2px 0;
    overflow-wrap: anywhere;
}
.post-photo-credit {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: #737373;
}
.post-photo-credit a { color: inherit; text-underline-offset: 3px; }
.post-photo-credit a:hover { color: var(--red); }