/*
  EXPLORE OSAKA v4
  ─────────────────────────────────────────────────────
  Concept  : Contemporary travel editorial — clean, warm,
             image-forward. Feels like a well-funded print
             magazine that learned to live on the web.
             Inspired by GetOutTrip's structural clarity
             but Osaka-specific in personality.

  Display  : Fraunces — optical serif, editorial weight,
             ink-trap quality. Used in GetOutTrip ref.
  Body     : Plus Jakarta Sans — warm geometric, readable.
  JP Accent: Noto Serif JP — sparingly structural.
  Condensed: Barlow Condensed — labels, eyebrows, UI.

  Locked palette:
  --p   #ede7da  parchment — warm white sections
  --p2  #d9d0c0  borders, offsets
  --r   #c1281a  primary accent
  --g   #f0c040  secondary — dark bg only
  --ink #1a1714  near-black text & dark surfaces
  ─────────────────────────────────────────────────────
*/

:root {
    --p: #ede7da;
    --p2: #d9d0c0;
    --p3: #8a7f72;
    --w: #faf7f2;
    --ink: #1a1714;
    --ink2: #2c2822;
    --ink3: #3e3a35;
    --r: #c1281a;
    --rd: #9e200f;
    --rt: #f8edeb;
    --g: #f0c040;
    --gd: #9e7200;

    --serif: 'Fraunces', Georgia, serif;
    --sans: 'Plus Jakarta Sans', sans-serif;
    --cond: "Figtree", sans-serif;
    --jp: 'Noto Serif JP', serif;

    /* The logo is the brand, so no type pairing in Customizer, Osaka
       Identity reaches it: the pairings rewrite --serif, --sans and --cond,
       never these. */
    --logo: 'Figtree', sans-serif;
    --logo-jp: 'Noto Serif JP', serif;
    /* The homepage hero title has its own face, chosen apart from the
       pairing (Customizer, Osaka Identity, Homepage hero title font). */
    --hero-font: 'Fraunces', Georgia, serif;

    --sh-sm: 0 2px 12px rgba(26, 23, 20, .07), 0 1px 3px rgba(26, 23, 20, .05);
    --sh-md: 0 6px 32px rgba(26, 23, 20, .12), 0 2px 8px rgba(26, 23, 20, .06);
    --sh-lg: 0 16px 56px rgba(26, 23, 20, .16), 0 4px 16px rgba(26, 23, 20, .08);

    --r0: 4px;
    --r1: 8px;
    --r2: 14px;
    --r3: 20px;
    --rp: 9999px;
    --max: 1280px;
    --ease: cubic-bezier(.4, 0, .2, 1);
    --t: 200ms;
}

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

html {
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
    font-size: 16px
}

body {
    font-family: var(--sans);
    color: var(--ink);
    background: var(--w);
    line-height: 1.65;
    overflow-x: hidden
}

img {
    display: block;
    max-width: 100%;
    height: auto
}

a {
    text-decoration: none;
    color: inherit
}

ul,
ol {
    list-style: none
}

button {
    border: none;
    cursor: pointer;
    font-family: inherit;
    background: none;
    color: inherit
}

input {
    font-family: inherit
}

p {
    max-width: 68ch
}

/* ── Paragraph measure inside single-template main columns ─────────────
   The global p { max-width: 68ch } above is font dependent: with Nunito Sans
   or Instrument Sans the "0" is narrow, so 68ch shrank to about 650px in a
   784px column and paragraphs stopped short of the headings, boxes and
   dividers around them. A paragraph that only holds an uncaptioned image went
   with it, so the photo came out narrower than captioned ones. These columns
   already set the measure; unclassed paragraphs fill them. Classed paragraphs
   (tour intros and the like) keep their own caps. */
:is(.attraction-main, .stay-main, .restaurant-main, .itinerary-main) p:not([class]),
.itinerary-main .activity-description {
    max-width: none;
}

/* Uncaptioned images get the same finish as captioned ones. */
:is(.attraction-main, .stay-main, .restaurant-main, .itinerary-main) p:not([class]) > img,
:is(.attraction-main, .stay-main, .restaurant-main, .itinerary-main) p:not([class]) > a > img {
    border-radius: var(--r1);
}

:focus-visible {
    outline: 2px solid var(--r);
    outline-offset: 3px;
    border-radius: 3px
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

/* ── Layout ── */
.wrap {
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 40px)
}

.section {
    padding-block: clamp(48px, 7vw, 88px)
}

.section-bg-p {
    background: var(--p)
}

.section-bg-p2 {
    background: var(--p2)
}

.section-bg-ink {
    background: var(--ink)
}

/* ── Section header ── */
.sec-hd {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    flex-wrap: wrap
}

.sec-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--sans);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--r);
    margin-bottom: .45rem
}

.sec-label::before {
    content: '';
    width: 18px;
    height: 2px;
    background: var(--r);
    flex-shrink: 0;
    border-radius: 2px
}

.sec-title {
    font-family: var(--serif);
    font-size: clamp(1.5rem, 3.5vw, 2.6rem);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.08;
    letter-spacing: -.025em;
    font-optical-sizing: auto
}

.sec-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--cond);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--r);
    border-bottom: 1.5px solid var(--r);
    padding-bottom: 2px;
    align-self: flex-end;
    margin-bottom: 6px;
    white-space: nowrap;
    transition: gap var(--t)
}

.sec-link:hover {
    gap: 9px
}

.sec-link svg {
    flex-shrink: 0
}

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 22px;
    border-radius: var(--rp);
    font-family: var(--sans);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .01em;
    transition: all var(--t) var(--ease);
    white-space: nowrap
}

.btn-primary {
    background: var(--r);
    color: #fff
}

.btn-primary:hover {
    background: var(--rd);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(193, 40, 26, .28)
}

.btn-secondary {
    background: var(--ink);
    color: #fff
}

.btn-secondary:hover {
    background: var(--ink2);
    transform: translateY(-1px)
}

.btn-outline {
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--p2)
}

.btn-outline:hover {
    border-color: var(--ink);
    background: rgba(26, 23, 20, .04)
}

.btn-gold {
    background: var(--g);
    color: var(--ink);
    font-weight: 700
}

.btn-gold:hover {
    background: #e5b430;
    transform: translateY(-1px)
}

/* ── Tags ── */
.tag {
    display: inline-flex;
    align-items: stretch;
    border-radius: 4px;
    overflow: hidden;
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 0;
    text-decoration: none;
    transition: opacity var(--t);
}

.tag:hover {
    opacity: .75;
}

.tag-label {
    padding: 5px 11px;
    display: flex;
    align-items: center;
    line-height: 1;
}

.tag-gold {
    border: 1px solid var(--gd);
}

.tag-gold .tag-label {
    background: #fffbe6;
    color: #633806;
}

.tag-dark {
    border: none !important;
}

.tag-dark .tag-label {
    background: rgba(255, 255, 255, .9) !important;
    color: var(--ink) !important;
    backdrop-filter: blur(8px);
}

.tag-red {
    border: 1px solid var(--rd);
}

.tag-red .tag-label {
    background: var(--rt);
    color: var(--r);
}

/* ══════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 400;
    background: rgba(250, 247, 242, .95);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--p2);
    transition: box-shadow var(--t);
}

.site-header.scrolled {
    box-shadow: 0 2px 24px rgba(26, 23, 20, .1)
}

.nav-inner {
    display: flex;
    align-items: center;
    height: 62px;
    gap: 12px
}

.nav-logo {
    display: flex;
    align-items: baseline;
    gap: 0;
    flex-shrink: 0;
    line-height: 1
}

.nl-a {
    font-family: var(--logo);
    font-weight: 900;
    font-size: 1.15rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink)
}

.nl-dot {
    font-family: var(--logo);
    font-weight: 900;
    font-size: 1.15rem;
    color: var(--r)
}

.nl-b {
    font-family: var(--logo);
    font-weight: 900;
    font-size: 1.15rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--r)
}

.nl-jp {
    font-family: var(--logo-jp);
    font-size: .52rem;
    font-weight: 200;
    letter-spacing: .18em;
    color: var(--p3);
    margin-left: .6rem;
    margin-top: 1px
}

.nav-links {
    display: none;
    align-items: center;
    gap: 1px;
    flex: 1;
    justify-content: center
}

.nav-links a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 11px;
    border-radius: var(--rp);
    font-size: .82rem;
    font-weight: 500;
    color: var(--ink3);
    transition: all var(--t)
}

.nav-links a:hover {
    color: var(--ink);
    background: var(--p)
}

/* ── Dropdown menus ── */
.nav-links li {
    position: relative;
    list-style: none;
}

.nav-chevron {
    flex-shrink: 0;
    transition: transform 0.2s var(--ease);
}

.nav-links .has-children:hover>a .nav-chevron,
.nav-links .has-children:focus-within>a .nav-chevron {
    transform: rotate(180deg);
}

.nav-links .sub-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    background: var(--w);
    border: 1px solid var(--p2);
    border-radius: var(--r2);
    box-shadow: var(--sh-md);
    padding: 0.4rem 0;
    z-index: 200;
    list-style: none;
    margin: 0;
}

.nav-links .has-children:hover>.sub-menu,
.nav-links .has-children:focus-within>.sub-menu {
    display: block;
}

.nav-links .sub-menu li {
    position: relative;
}

.nav-links .sub-menu a {
    display: block;
    padding: 0.5rem 1.1rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ink3);
    white-space: nowrap;
    border-radius: 0;
    transition: background var(--t), color var(--t);
}

.nav-links .sub-menu a:hover {
    background: var(--p);
    color: var(--ink);
}

.nav-links .sub-menu::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: var(--w);
    border-left: 1px solid var(--p2);
    border-top: 1px solid var(--p2);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0
}

.nav-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--rp);
    background: var(--p);
    color: var(--ink3);
    transition: all var(--t)
}

.nav-search-btn:hover {
    background: var(--p2);
    color: var(--ink)
}

.nav-ham {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    border-radius: var(--r1);
    background: var(--p);
    transition: background var(--t)
}

.nav-ham:hover {
    background: var(--p2)
}

.nav-ham span {
    display: block;
    width: 17px;
    height: 2px;
    background: var(--ink2);
    border-radius: 2px;
    transition: all .22s
}

@media(min-width:860px) {
    .nav-links {
        display: flex
    }

    .nav-ham {
        display: none
    }
}

@media(max-width:480px) {
    .nl-jp {
        display: none
    }
}

/* Mobile nav drawer */
.mob-drawer {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: var(--ink);
    transform: translateX(-100%);
    transition: transform .3s var(--ease);
    display: flex;
    flex-direction: column;
    padding: clamp(20px, 5vw, 32px);
    overflow-y: auto
}

.mob-drawer.open {
    transform: none
}

.mob-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px
}

.mob-drawer-logo {
    display: flex;
    align-items: baseline;
    gap: 0
}

.mob-dl-a {
    font-family: var(--logo);
    font-weight: 900;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #fff
}

.mob-dl-dot {
    font-family: var(--logo);
    font-weight: 900;
    font-size: 1.2rem;
    color: var(--r)
}

.mob-dl-b {
    font-family: var(--logo);
    font-weight: 900;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--r)
}

.mob-close {
    width: 36px;
    height: 36px;
    border-radius: var(--rp);
    background: rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff
}

.mob-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 0
}

.mob-links li {
    list-style: none;
}

.mob-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 14px;
    border-radius: var(--r2);
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .8);
    transition: all var(--t)
}

.mob-links a:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff
}

/* Mobile sub-menu — accordion style */
.mob-links .has-children>a {
    cursor: pointer;
}

.mob-links .has-children>a .nav-chevron {
    color: rgba(255, 255, 255, .5);
    transition: transform 0.25s var(--ease);
}

.mob-links .has-children.is-open>a .nav-chevron {
    transform: rotate(180deg);
}

.mob-links .sub-menu {
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 4px 0 4px 14px;
    list-style: none;
    margin: 0;
}

.mob-links .has-children.is-open>.sub-menu {
    display: flex;
}

.mob-links .sub-menu a {
    padding: 10px 14px;
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .6);
    border-radius: var(--r1);
    justify-content: flex-start;
}

.mob-links .sub-menu a:hover {
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .9);
}

/* ══════════════════════════════════════════════════
   SEARCH OVERLAY
   ══════════════════════════════════════════════════ */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 600;
    background: rgba(26, 23, 20, .65);
    backdrop-filter: blur(7px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: clamp(60px, 10vh, 110px);
    padding-inline: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s, visibility .22s
}

.search-overlay.open {
    opacity: 1;
    visibility: visible
}

.search-modal {
    background: var(--w);
    border-radius: var(--r3);
    width: 100%;
    max-width: 620px;
    padding: clamp(18px, 3vw, 28px);
    box-shadow: var(--sh-lg);
    transform: translateY(-14px);
    transition: transform .22s var(--ease)
}

.search-overlay.open .search-modal {
    transform: none
}

.search-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px
}

.search-modal-lbl {
    font-family: var(--cond);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--p3)
}

.search-close-btn {
    width: 30px;
    height: 30px;
    border-radius: var(--rp);
    background: var(--p);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink3);
    transition: all var(--t)
}

.search-close-btn:hover {
    background: var(--p2);
    color: var(--ink)
}

.search-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--p);
    border: 2px solid var(--p2);
    border-radius: var(--rp);
    padding: 11px 18px;
    transition: border-color var(--t)
}

.search-input-wrap:focus-within {
    border-color: var(--r);
    background: var(--w)
}

.search-input-wrap svg {
    color: var(--p3);
    flex-shrink: 0
}

.search-input {
    flex: 1;
    background: transparent;
    font-family: var(--sans);
    font-size: .95rem;
    color: var(--ink);
    outline: none;
    border: 0 !important
}

.search-input::placeholder {
    color: var(--p3)
}

.search-chips-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    flex-wrap: wrap
}

.search-chips-lbl {
    font-size: .75rem;
    color: var(--p3)
}

.search-chip {
    padding: 4px 12px;
    border-radius: var(--rp);
    font-size: .75rem;
    font-weight: 500;
    background: var(--p2);
    color: var(--ink3);
    transition: all var(--t);
    cursor: pointer
}

.search-chip:hover {
    background: var(--r);
    color: #fff
}

/* ══════════════════════════════════════════════════
   HERO — centered layout, light background, OSAKA watermark
   ══════════════════════════════════════════════════ */
.hero {
    position: relative;
    background: var(--p);
    overflow: hidden;
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-inline: clamp(16px, 4vw, 40px);
}

.hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    opacity: .18;
    mix-blend-mode: multiply;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(237, 231, 218, .3) 0%,
            rgba(237, 231, 218, .5) 55%,
            rgba(237, 231, 218, .98) 100%);
    z-index: 1;
}

.hero-watermark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    overflow: hidden;
}

.hero-watermark-text {
    font-family: var(--cond);
    font-weight: 900;
    font-size: clamp(8rem, 22vw, 18rem);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: .04;
    line-height: 1;
    white-space: nowrap;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--max);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-block: clamp(72px, 10vh, 108px) clamp(48px, 6vh, 72px);
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: clamp(1rem, 2vw, 1.5rem)
}

.hero-eyebrow-line {
    width: 24px;
    height: 2px;
    background: var(--r);
    flex-shrink: 0;
    border-radius: 2px
}

.hero-eyebrow-text {
    font-family: var(--cond);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--r)
}

.hero-headline {
    font-family: var(--hero-font);
    font-size: clamp(3rem, 9vw, 7rem);
    font-weight: 900;
    color: var(--ink);
    line-height: .97;
    letter-spacing: -.035em;
    font-optical-sizing: auto;
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
    max-width: 14ch;
}

.hero-headline em {
    font-style: italic;
    color: var(--r)
}

.hero-sub {
    font-size: clamp(.9rem, 1.5vw, 1.1rem);
    color: var(--ink3);
    max-width: 52ch;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.72;
    text-align: center
}

.hero-search {
    background: rgba(250, 247, 242, .97);
    border-radius: var(--rp);
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 580px;
    overflow: hidden;
    box-shadow: var(--sh-lg);
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
    border: 1.5px solid var(--p2);
}

.hero-search:focus-within {
    border-color: var(--r)
}

.hero-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    color: var(--p3);
    flex-shrink: 0
}

.hero-search-input {
    flex: 1;
    padding: .85rem 0;
    background: transparent;
    font-family: var(--sans);
    font-size: .92rem;
    color: var(--ink);
    outline: none;
    border: none
}

.hero-search-input::placeholder {
    color: var(--p3)
}

.hero-search-select {
    padding: .85rem 1rem;
    background: var(--p);
    border-left: 1px solid var(--p2);
    font-family: var(--sans);
    font-size: .82rem;
    color: var(--ink3);
    outline: none;
    border-radius: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b645c' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
    border: 0 !important;
}

.hero-search-btn {
    font-family: var(--cond);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--r);
    padding: .85rem 1.4rem;
    flex-shrink: 0;
    transition: background var(--t);
    white-space: nowrap;
}

.hero-search-btn:hover {
    background: var(--rd)
}

.hero-cta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 3vw, 1.75rem);
    flex-wrap: wrap
}

.hero-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--cond);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--r);
    border-bottom: 1.5px solid rgba(193, 40, 26, .3);
    padding-bottom: 2px;
    transition: border-color var(--t), gap var(--t);
}

.hero-cta-link:hover {
    border-color: var(--r);
    gap: 9px
}

.hero-cta-link svg {
    flex-shrink: 0
}

.hero-stats {
    width: 100%;
    max-width: var(--max);
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
    margin-top: clamp(2rem, 4vh, 3.5rem);
    border-top: 1px solid var(--p2);
}

.hero-stat-val {
    font-family: var(--serif);
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -.03em;
    font-optical-sizing: auto;
    text-align: center;
}

.hero-stat-val em {
    font-style: normal;
    color: var(--r)
}

.hero-stat-lbl {
    font-family: var(--cond);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--p3);
    margin-top: 5px;
    text-align: center;
}

@media(max-width:560px) {
    .hero-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: .75rem 1rem
    }
}

/* ── Hero mobile responsive ── */
@media(max-width:860px) {
    .hero {
        min-height: 80vh;
    }

    .hero-search {
        max-width: 100%;
    }
}

@media(max-width:640px) {
    .hero {
        min-height: 75vh;
    }

    /* Search bar — stack into rows, icon stays inline with input */
    .hero-search {
        flex-wrap: wrap;
        border-radius: var(--r2);
        align-items: stretch;
    }

    /* Row 1: icon + input — full width, stay on same line */
    .hero-search-icon {
        flex: 0 0 auto;
        padding: .85rem .75rem .85rem 1rem;
        align-self: center;
    }

    .hero-search-input {
        flex: 1 1 0;
        padding: .85rem .75rem;
        min-width: 0;
    }

    /* Row 2: select — full width */
    .hero-search-select {
        flex: 1 1 100%;
        border-left: none;
        border-top: 1px solid var(--p2) !important;
        border-radius: 0;
        padding: .75rem 1rem;
        width: 100%;
    }

    /* Row 3: button — full width */
    .hero-search-btn {
        flex: 1 1 100%;
        border-top: 1px solid rgba(193, 40, 26, .2);
        padding: .85rem 1rem;
        text-align: center;
        justify-content: center;
        width: 100%;
    }

    /* CTA row — tighter gap */
    .hero-cta-row {
        gap: 1rem;
    }

    /* Stats — 2 columns */
    .hero-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: .75rem 1rem;
        margin: 1.5rem 0;
        padding-top: 1.5rem;
    }
}

@media(max-width:480px) {
    .hero {
        min-height: 70vh;
        padding-inline: 16px;
    }

    /* Watermark — scale down so it doesn't overflow */
    .hero-watermark-text {
        font-size: clamp(5rem, 30vw, 8rem);
    }

    /* Headline — tighter letter-spacing on small screens */
    .hero-headline {
        letter-spacing: -.02em;
    }

    /* Sub text — full width */
    .hero-sub {
        max-width: 100%;
    }

    /* Stats — keep 2 cols but smaller text */
    .hero-stat-val {
        font-size: 1.2rem;
    }

    .hero-stat-lbl {
        font-size: .55rem;
    }
}

/* ══════════════════════════════════════════════════
   DESTINATION QUICK NAV (neighborhoods)
   ══════════════════════════════════════════════════ */
.dest-nav {
    background: var(--w);
    border-bottom: 1px solid var(--p2);
    position: sticky;
    top: 62px;
    z-index: 200
}

.dest-nav-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: auto;
    scrollbar-width: none
}

.dest-nav-inner::-webkit-scrollbar {
    display: none
}

.dest-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px clamp(10px, 2vw, 18px);
    min-width: max-content;
    cursor: pointer;
    color: var(--ink3);
    font-size: .72rem;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    transition: all var(--t)
}

.dest-nav-item:hover {
    color: var(--r);
    border-bottom-color: rgba(193, 40, 26, .25)
}

.dest-nav-item.active {
    color: var(--r);
    border-bottom-color: var(--r);
    font-weight: 700
}

.dest-nav-item-jp {
    font-family: var(--jp);
    font-size: .7rem;
    font-weight: 200;
    color: var(--p3)
}

@media(max-width:860px) {
    .dest-nav-inner {
        justify-content: flex-start;
    }
}

/* ══════════════════════════════════════════════════
   NEIGHBORHOODS SECTION
   ══════════════════════════════════════════════════ */
.neighborhoods-section {
    background: var(--p)
}

.hood-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px
}

.hood-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--r2);
    aspect-ratio: 3/4;
    display: block;
    background: var(--ink2)
}

.hood-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .75;
    transition: transform .45s var(--ease), opacity var(--t)
}

.hood-card:hover img {
    transform: scale(1.05);
    opacity: .65
}

.hood-card-ov {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26, 23, 20, .9) 0%, rgba(26, 23, 20, .1) 55%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.1rem
}

.hood-card-jp {
    font-family: var(--jp);
    font-size: .75rem;
    font-weight: 200;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .55);
    margin-bottom: 3px
}

.hood-card-name {
    font-family: var(--serif);
    font-size: clamp(.95rem, 1.8vw, 1.3rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.05;
    letter-spacing: -.02em;
    margin-bottom: 4px;
    font-optical-sizing: auto
}

.hood-card-vibe {
    font-family: var(--cond);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--g)
}

.hood-card-count {
    font-size: .7rem;
    color: rgba(255, 255, 255, .6);
    margin-top: 4px
}

@media(max-width:900px) {
    .hood-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:480px) {
    .hood-grid {
        grid-template-columns: 1fr 1fr
    }
}

/* ══════════════════════════════════════════════════
   CPT CAROUSEL SECTION
   ══════════════════════════════════════════════════ */
.carousel-section {
    background: var(--w)
}

.carousel-outer {
    position: relative
}

.carousel-track-wrap {
    overflow: hidden
}

.carousel-track {
    display: flex;
    gap: 14px;
    transition: transform .4s var(--ease);
    will-change: transform
}

.carousel-track .c-card {
    flex: 0 0 calc((100% - 14px*2) / 3);
    min-width: 0
}

@media(max-width:900px) {
    .carousel-track .c-card {
        flex: 0 0 calc((100% - 14px) / 2)
    }
}

@media(max-width:560px) {
    .carousel-track .c-card {
        flex: 0 0 85%
    }
}

/* Generic card used in carousels */
.c-card {
    border-radius: var(--r2);
    overflow: hidden;
    background: var(--w);
    border: 1px solid var(--p2);
    box-shadow: var(--sh-sm);
    display: block;
    transition: box-shadow var(--t), transform var(--t), border-color var(--t)
}

.c-card:hover {
    box-shadow: var(--sh-md);
    transform: translateY(-3px);
    border-color: var(--p3)
}

.c-card-img {
    overflow: hidden;
    aspect-ratio: 16/10;
    background: var(--p2)
}

.c-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s var(--ease)
}

.c-card:hover .c-card-img img {
    transform: scale(1.04)
}

.c-card-body {
    padding: .9rem 1rem
}

.c-card-type {
    font-family: var(--cond);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--r);
    margin-bottom: .3rem
}

.c-card-title {
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
    margin-bottom: .35rem;
    letter-spacing: -.01em;
    font-optical-sizing: auto
}

.c-card-subtitle {
    font-size: .82rem;
    color: var(--ink2);
    line-height: 1.45;
    margin-bottom: .5rem;
    font-weight: 500
}

.c-card-excerpt {
    font-size: .78rem;
    color: var(--ink3);
    line-height: 1.55;
    margin-bottom: .5rem
}

.c-card-desc {
    font-size: .78rem;
    color: #3e3a35;
    line-height: 1.55;
    margin-bottom: .65rem
}

.c-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .4rem;
    padding-top: .6rem;
    border-top: 1px solid var(--p2)
}

.c-card-meta {
    font-family: var(--cond);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--p3)
}

.c-card-price {
    font-family: var(--serif);
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink);
    font-optical-sizing: auto
}

.c-card-price span {
    font-family: var(--sans);
    font-size: .7rem;
    font-weight: 400;
    color: var(--p3)
}

.c-card-link {
    font-family: var(--cond);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--r);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: gap var(--t)
}

.c-card-link:hover {
    gap: 7px
}

/* Carousel nav arrows */
.carousel-btn {
    position: absolute;
    /* main.js sets --carousel-btn-top to half the card image height, so the
       arrow sits on the image instead of on the title. */
    top: var(--carousel-btn-top, 50%);
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--w);
    border: 1.5px solid var(--p2);
    box-shadow: var(--sh-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink3);
    z-index: 10;
    transition: all var(--t)
}

.carousel-btn:hover {
    background: var(--r);
    border-color: var(--r);
    color: #fff;
    box-shadow: var(--sh-md)
}

.carousel-btn--prev {
    left: -20px
}

.carousel-btn--next {
    right: -20px
}

@media(max-width:600px) {
    .carousel-btn--prev {
        left: 0
    }

    .carousel-btn--next {
        right: 0
    }
}

/* Carousel dots */
.carousel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 1.25rem
}

.carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--p2);
    transition: all var(--t);
    cursor: pointer
}

.carousel-dot.active {
    background: var(--r);
    width: 20px;
    border-radius: 3px
}

/* ══════════════════════════════════════════════════
   FEATURED ARTICLE SECTION
   ══════════════════════════════════════════════════ */
.featured-section {
    background: var(--p)
}

.featured-grid {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 12px
}

.feat-hero {
    position: relative;
    border-radius: var(--r2);
    overflow: hidden;
    min-height: 380px;
    display: block;
    grid-row: span 2;
    background: var(--ink2)
}

.feat-hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .78;
    transition: transform .45s var(--ease), opacity var(--t)
}

.feat-hero:hover img {
    transform: scale(1.04);
    opacity: .68
}

.feat-hero-ov {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26, 23, 20, .9) 0%, rgba(26, 23, 20, .15) 55%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem
}

.feat-hero-title {
    font-family: var(--serif);
    font-size: clamp(1.2rem, 2.5vw, 1.7rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -.02em;
    margin: 7px 0 6px;
    font-optical-sizing: auto
}

.feat-hero-exc {
    font-size: .82rem;
    color: rgba(255, 255, 255, .65);
    line-height: 1.55;
    max-width: 44ch
}

.feat-hero-meta {
    font-family: var(--cond);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--g);
    margin-top: 8px;
    display: flex;
    gap: .5rem
}

.feat-side {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.feat-card {
    border-radius: var(--r2);
    overflow: hidden;
    background: var(--w);
    border: 1px solid var(--p2);
    display: flex;
    gap: 0;
    transition: box-shadow var(--t), transform var(--t);
    display: block
}

.feat-card:hover {
    box-shadow: var(--sh-md);
    transform: translateY(-2px)
}

.feat-card-img {
    overflow: hidden;
    aspect-ratio: 16/9
}

.feat-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s var(--ease)
}

.feat-card:hover .feat-card-img img {
    transform: scale(1.04)
}

.feat-card-body {
    padding: .8rem .9rem
}

.feat-card-cat {
    font-family: var(--cond);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--r);
    margin-bottom: .25rem
}

.feat-card-title {
    font-family: var(--serif);
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.15;
    letter-spacing: -.01em;
    font-optical-sizing: auto
}

.feat-hero-ov span.tag.tag-dark {
    color: var(--w);
    font-weight: bolder
}

@media(max-width:768px) {
    .featured-grid {
        grid-template-columns: 1fr
    }

    .feat-hero {
        grid-row: span 1;
        min-height: 300px
    }
}

/* ══════════════════════════════════════════════════
   PRACTICAL TIPS
   ══════════════════════════════════════════════════ */
.tips-section {
    background: var(--w)
}

.tips-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px
}

.tip-card {
    background: var(--p);
    border-radius: var(--r2);
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--p2);
    transition: border-color var(--t), box-shadow var(--t)
}

.tip-card:hover {
    border-color: var(--p3);
    box-shadow: var(--sh-sm)
}

.tip-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--r1);
    background: var(--rt);
    color: var(--r);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .8rem;
    flex-shrink: 0
}

.tip-title {
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.01em;
    margin-bottom: .65rem;
    font-optical-sizing: auto
}

.tip-list {
    display: flex;
    flex-direction: column;
    gap: 0
}

.tip-list li {
    font-size: .8rem;
    color: #3e3a35;
    line-height: 1.55;
    padding: .35rem 0;
    border-bottom: 1px solid var(--p2);
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    max-width: none
}

.tip-list li:last-child {
    border-bottom: none
}

.tip-list li::before {
    content: '→';
    color: var(--r);
    opacity: .55;
    flex-shrink: 0;
    font-size: .75em;
    margin-top: 2px
}

@media(max-width:768px) {
    .tips-grid {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:480px) {
    .tips-grid {
        grid-template-columns: 1fr
    }
}

/* ══════════════════════════════════════════════════
   LATEST POSTS
   ══════════════════════════════════════════════════ */
.posts-section {
    background: var(--p)
}

.posts-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 14px
}

.post-card {
    border-radius: var(--r2);
    overflow: hidden;
    background: var(--w);
    border: 1px solid var(--p2);
    box-shadow: var(--sh-sm);
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--t), transform var(--t), border-color var(--t)
}

.post-card:hover {
    box-shadow: var(--sh-md);
    transform: translateY(-3px);
    border-color: var(--p3)
}

.post-card--feat {
    grid-column: 1/4;
    grid-row: 1/3
}

.post-card--feat .post-img {
    aspect-ratio: 4/3
}

.post-img {
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--p2)
}

.post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s var(--ease)
}

.post-card:hover .post-img img {
    transform: scale(1.04)
}

.post-body {
    padding: 1rem 1.1rem
}

.post-cat {
    font-family: var(--cond);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--r);
    margin-bottom: .3rem
}

.post-title {
    font-family: var(--serif);
    font-size: clamp(.9rem, 1.8vw, 1.15rem);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.15;
    letter-spacing: -.01em;
    margin-bottom: .4rem;
    font-optical-sizing: auto
}

.post-card--feat .post-title {
    font-size: clamp(1.25rem, 2vw, 1.4rem)
}

.post-excerpt {
    font-size: .8rem;
    color: #3e3a35;
    line-height: 1.6;
    margin-bottom: .6rem
}

.post-foot {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding-top: .55rem;
    border-top: 1px solid var(--p2);
    flex-wrap: wrap
}

.post-meta {
    font-family: var(--cond);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--p3)
}

.post-card--feat .post-meta {
    font-size: .8rem
}

.post-readmore {
    font-family: var(--cond);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--r);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    transition: gap var(--t)
}

.post-readmore:hover {
    gap: 7px
}

@media(max-width:768px) {
    .posts-grid {
        grid-template-columns: 1fr 1fr
    }

    .post-card--feat {
        grid-column: span 2
    }
}

@media(max-width:480px) {
    .posts-grid {
        grid-template-columns: 1fr
    }

    .post-card--feat {
        grid-column: span 1
    }
}

/* ══════════════════════════════════════════════════
   AFFILIATE PARTNERS STRIP
   ══════════════════════════════════════════════════ */
.partners-strip {
    background: var(--p2);
    padding-block: 1.1rem
}

.partners-inner {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    overflow-x: auto;
    scrollbar-width: none
}

.partners-inner::-webkit-scrollbar {
    display: none
}

.partners-lbl {
    font-family: var(--cond);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink3);
    white-space: nowrap;
    flex-shrink: 0
}

.partner-logo {
    font-family: var(--cond);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--ink2);
    white-space: nowrap;
    opacity: .7;
    transition: opacity var(--t)
}

.partner-logo:hover {
    opacity: 1
}

/* link-less badge variant — partner rows saved without a URL */
.partner-logo--static {
    cursor: default;
}

.partner-logo--static:hover {
    opacity: .7;
}

.partner-logo span {
    opacity: .7
}

/* ══════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════ */
.site-footer {
    position: relative;
    overflow: hidden;
    background: var(--ink);
    padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 3vw, 2rem)
}

/*
   The city set oversized behind the footer columns, as on Tokyo Trip Guide
   and Wander London: outline only, barely above the ink, bleeding off the
   bottom and the right so it reads as a watermark the page stands on
   rather than a word to be read. Set in the logo face, which no type
   pairing changes.

   Generated content rather than a tag, so the word is not a text node on
   every page, there is nothing to select or copy, and it stays out of the
   reading order without aria-hidden.
*/
.site-footer::after {
    content: "OSAKA";
    position: absolute;
    right: -.05em;
    bottom: -.2em;
    z-index: 0;
    font-family: var(--logo);
    font-size: clamp(6rem, 19vw, 17rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
    color: rgba(255, 255, 255, .05);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Where the stroke is supported the fill goes, which leaves the hollow
   letterform; without it the faint fill above still carries the mark. */
@supports (-webkit-text-stroke: 1px currentColor) {
    .site-footer::after {
        color: transparent;
        -webkit-text-stroke: 1.5px rgba(255, 255, 255, .11);
    }
}

/* Everything the reader came for sits over it. */
.site-footer > .wrap {
    position: relative;
    z-index: 1;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem)
}

.footer-logo-wrap {
    display: flex;
    align-items: baseline;
    gap: 0;
    line-height: 1;
    margin-bottom: .85rem
}

.fl-a {
    font-family: var(--logo);
    font-weight: 900;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #fff
}

.fl-dot {
    font-family: var(--logo);
    font-weight: 900;
    font-size: 1.2rem;
    color: var(--r)
}

.fl-b {
    font-family: var(--logo);
    font-weight: 900;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--r)
}

.footer-tagline {
    font-size: .82rem;
    color: rgba(255, 255, 255, .55);
    line-height: 1.65;
    max-width: 30ch;
    margin-bottom: .9rem;
    font-style: italic
}

.footer-soc {
    display: flex;
    gap: 6px
}

.footer-soc a {
    width: 32px;
    height: 32px;
    border-radius: var(--r0);
    border: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .5);
    transition: all var(--t)
}

.footer-soc a:hover {
    border-color: var(--r);
    color: #fff;
    background: rgba(193, 40, 26, .15)
}

.footer-col-h {
    font-family: var(--cond);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
    margin-bottom: .85rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.footer-col-links {
    display: flex;
    flex-direction: column;
    gap: .45rem
}

.footer-col-links a {
    font-size: .8rem;
    color: rgba(255, 255, 255, .6);
    transition: color var(--t)
}

.footer-col-links a:hover {
    color: #fff
}

/* Footer: quick links grid */
.footer-quick {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: 1.5rem;
    margin-bottom: 1.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 2rem;
}

.footer-quick-title {
    font-family: var(--cond);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
    margin-bottom: .65rem
}

.footer-quick-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.footer-quick-pill {
    font-family: var(--cond);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 11px;
    border-radius: var(--rp);
    border: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .65);
    transition: all var(--t);
}

.footer-quick-pill:hover {
    border-color: var(--g);
    color: var(--g)
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-top: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap
}

.footer-copy {
    font-family: var(--cond);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .4)
}

.footer-bottom-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap
}

.footer-bottom-links a {
    font-size: .72rem;
    color: rgba(255, 255, 255, .4);
    transition: color var(--t)
}

.footer-bottom-links a:hover {
    color: rgba(255, 255, 255, .85)
}

@media(max-width:860px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem
    }

    .footer-quick {
        grid-template-columns: 1fr
    }
}

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

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start
    }
}

/* ── Back to top ── */
.back-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
    border-radius: var(--rp);
    background: var(--ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sh-md);
    opacity: 0;
    pointer-events: none;
    transition: all var(--t);
    z-index: 100
}

.back-top.visible {
    opacity: 1;
    pointer-events: all
}

.back-top:hover {
    background: var(--r);
    transform: translateY(-2px)
}

/* ── Animations ── */
[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease, transform .55s ease
}

[data-reveal].revealed {
    opacity: 1;
    transform: none
}

[data-reveal-delay="1"] {
    transition-delay: .08s
}

[data-reveal-delay="2"] {
    transition-delay: .16s
}

[data-reveal-delay="3"] {
    transition-delay: .24s
}

@media(prefers-reduced-motion:reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none
    }
}


/* ══════════════════════════════════════════════════
   ARCHIVE TEMPLATES — shared
   ══════════════════════════════════════════════════ */

.archive-header {
    padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
    border-bottom: 1px solid var(--p2);
}

.archive-breadcrumb {
    font-family: var(--sans);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--p3);
    margin-bottom: 1rem;
}

.archive-breadcrumb a {
    color: var(--r);
    text-decoration: none;
}

.archive-breadcrumb a:hover {
    text-decoration: underline;
}

.archive-updated {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--cond);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--p3);
    margin-bottom: 1rem;
    padding: .3rem .75rem;
    background: var(--p2);
    border-radius: var(--rp);
}

.archive-updated-label {
    color: var(--p3);
}

.archive-updated time {
    color: var(--ink3);
}

.archive-headline {
    font-family: var(--serif);
    font-size: clamp(1.75rem, 4.5vw, 3.2rem);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.08;
    letter-spacing: -.025em;
    font-optical-sizing: auto;
    margin-bottom: .75rem;
}

.archive-intro {
    font-size: clamp(.9rem, 1.5vw, 1.05rem);
    color: var(--ink3);
    max-width: 64ch;
    line-height: 1.72;
    margin-top: .5rem;
    margin-bottom: 1.1rem;
}

/* ── Page template ── */
.page-header {
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

.page-headline {
    font-family: var(--serif);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.08;
    letter-spacing: -.025em;
    font-optical-sizing: auto;
    margin: .75rem 0 0;
}

.page-featured-image {
    background: var(--p);
    padding-block: 0;
}

.page-featured-figure {
    margin: 0;
    overflow: hidden;
    border-radius: 0 0 var(--r2) var(--r2);
    max-height: 520px;
}

.page-featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.page-body {
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

/* Constrain prose to a readable width, centred */
.page-content-wrap {
    max-width: 780px;
    margin-inline: auto;
}

@media (max-width: 640px) {
    .page-featured-figure {
        border-radius: 0;
        max-height: 280px;
    }

    .page-headline {
        letter-spacing: -.015em;
    }
}

/* Featured grid — 3 col */
.archive-featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

@media (max-width: 900px) {
    .archive-featured-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .archive-featured-grid {
        grid-template-columns: 1fr;
    }
}

/* Affiliate CTA block */
.archive-affiliate {
    padding-block: clamp(2rem, 4vw, 3rem);
}

.archive-affiliate-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.archive-affiliate-copy {
    flex: 1;
    min-width: 240px;
}

.archive-affiliate-text {
    font-size: clamp(.9rem, 1.4vw, 1rem);
    color: rgba(255, 255, 255, .75);
    margin-top: .4rem;
    line-height: 1.6;
    max-width: 52ch;
}

.archive-affiliate-btns {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.archive-affiliate-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .65rem 1.25rem;
    border-radius: var(--rp);
    font-family: var(--cond);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .2);
    text-decoration: none;
    transition: background var(--t), border-color var(--t);
}

.archive-affiliate-btn:hover {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .4);
}

.archive-affiliate-btn--primary {
    background: var(--r);
    border-color: var(--r);
}

.archive-affiliate-btn--primary:hover {
    background: var(--rd);
    border-color: var(--rd);
}

/* sec-label gold variant for dark backgrounds */
.sec-label--gold {
    color: var(--g);
}

.sec-label--gold::before {
    background: var(--g);
}

/* Main post grid */
.archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

@media (max-width: 900px) {
    .archive-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .archive-grid {
        grid-template-columns: 1fr;
    }
}

/* Filter tabs */
.archive-filter-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--p2) transparent;
    border-bottom: 1px solid var(--p2);
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    -webkit-overflow-scrolling: touch;
}

/* Slim, subtle scrollbar so overflowing taxonomy tabs stay reachable with a
   mouse on desktop (the row no longer hides the truncated tabs). */
.archive-filter-tabs::-webkit-scrollbar {
    height: 6px;
}

.archive-filter-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.archive-filter-tabs::-webkit-scrollbar-thumb {
    background: var(--p2);
    border-radius: var(--rp);
}

.archive-filter-tabs::-webkit-scrollbar-thumb:hover {
    background: var(--p3);
}

.archive-filter-tab {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: .7rem clamp(.75rem, 1.5vw, 1.25rem);
    font-family: var(--cond);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--p3);
    white-space: nowrap;
    border-bottom: 2.5px solid transparent;
    cursor: pointer;
    transition: color var(--t), border-color var(--t);
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    text-decoration: none;
}

.archive-filter-tab:hover {
    color: var(--ink);
}

.archive-filter-tab.active {
    color: var(--r);
    border-bottom-color: var(--r);
}

/* Pagination */
.archive-pagination {
    margin-top: clamp(2rem, 4vw, 3.5rem);
    display: flex;
    justify-content: center;
}

.archive-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.archive-pagination a,
.archive-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 .6rem;
    border-radius: var(--r1);
    font-family: var(--cond);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-decoration: none;
    color: var(--ink3);
    border: 1px solid var(--p2);
    transition: all var(--t);
}

.archive-pagination a:hover {
    background: var(--p);
    border-color: var(--p3);
    color: var(--ink);
}

.archive-pagination .current {
    background: var(--r);
    border-color: var(--r);
    color: #fff;
}

.archive-pagination .dots {
    border: none;
    background: none;
    color: var(--p3);
}

/* Hide pagination heading */
.archive-pagination .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Callout box — used in itinerary planning tips sidebar */
.archive-callout {
    background: var(--p);
    border: 1px solid var(--p2);
    border-radius: var(--r2);
    padding: 1.25rem 1.35rem;
}

.archive-callout-title {
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: .75rem;
    font-optical-sizing: auto;
}

.archive-callout-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.archive-callout-list li {
    font-size: .82rem;
    color: var(--ink3);
    padding: .4rem 0;
    border-bottom: 1px solid var(--p2);
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    line-height: 1.55;
    list-style: none;
}

.archive-callout-list li:last-child {
    border-bottom: none;
}

.archive-callout-list li::before {
    content: '→';
    color: var(--r);
    opacity: .55;
    flex-shrink: 0;
    font-size: .75em;
    margin-top: 2px;
}

/* Archive with sidebar layout — used for itinerary archive */
.archive-with-sidebar {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
}

.archive-sidebar {
    position: sticky;
    top: 80px;
}

@media (max-width: 900px) {
    .archive-with-sidebar {
        grid-template-columns: 1fr;
    }

    .archive-sidebar {
        position: static;
    }
}

/* Archive-specific intro callouts */
.archive-cuisine-intro,
.archive-neighborhood-intro {
    margin-bottom: 1.5rem;
}

.archive-cuisine-intro p,
.archive-neighborhood-intro p {
    font-size: clamp(.9rem, 1.5vw, 1.05rem);
    color: var(--ink3);
    max-width: 72ch;
    line-height: 1.72;
}

.category-page-subtitle {
    font-family: var(--serif);
    font-size: clamp(1.125rem, 2vw, 1.35rem);
    font-style: italic;
    color: var(--ink3);
    margin: 1.5rem 0;
    line-height: 1.4;
}

.category-page-lead {
    font-family: var(--serif);
    font-size: clamp(1.125rem, 2vw, 1.35rem);
    line-height: 1.6;
    color: var(--ink);
    margin: 0 0 2rem;
}

/* ── Term description block — below the post grid ── */
.page-content-section {
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

.page-content-inner {
    max-width: 780px;
    margin-inline: auto;
    font-family: var(--sans);
    font-size: clamp(.9rem, 1.4vw, 1.05rem);
    line-height: 1.78;
    color: var(--ink3);
}

.page-content-inner h2 {
    font-family: var(--serif);
    font-size: clamp(1.35rem, 2.5vw, 1.9rem);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.02em;
    margin: 2.5rem 0 .75rem;
    line-height: 1.15;
    font-optical-sizing: auto;
}

.page-content-inner h3 {
    font-family: var(--serif);
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.01em;
    margin: 2rem 0 .6rem;
    line-height: 1.2;
    font-optical-sizing: auto;
}

.page-content-inner h4 {
    font-family: var(--serif);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.015em;
    margin: 1.75rem 0 .5rem;
    line-height: 1.25;
}

.page-content-inner h5 {
    font-family: var(--sans);
    font-size: clamp(.9rem, 1.1vw, 1.0rem);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0;
    margin: 1.5rem 0 .4rem;
    line-height: 1.3;
}

.page-content-inner h6 {
    font-family: var(--cond);
    font-size: clamp(.75rem, .85vw, .82rem);
    font-weight: 800;
    color: var(--r);
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 1.25rem 0 .35rem;
    line-height: 1.3;
}

.page-content-inner p {
    margin-bottom: 1.1rem;
}

.page-content-inner a {
    color: var(--r);
    text-decoration: underline;
    text-decoration-color: rgba(193, 40, 26, .35);
    text-underline-offset: 3px;
    transition: text-decoration-color .2s;
}

.page-content-inner a:hover {
    text-decoration-color: var(--r);
}

.page-content-inner ul,
.page-content-inner ol {
    padding-left: 2.5rem;
    margin-bottom: 1.1rem;
}

.page-content-inner ul {
    list-style: disc;
}

.page-content-inner ol {
    list-style: decimal;
}

.page-content-inner li {
    margin-bottom: .4rem;
    line-height: 1.7;
}

.page-content-inner ul li::marker {
    color: var(--r);
}

.page-content-inner ol li::marker {
    color: var(--r);
    font-weight: 700;
}

.page-content-inner strong {
    font-weight: 700;
    color: var(--ink);
}

.page-content-inner em {
    font-style: italic;
}

.page-content-inner blockquote {
    border-left: 3px solid var(--r);
    padding: .75rem 1.25rem;
    margin: 1.75rem 0;
    background: var(--rt);
    border-radius: 0 var(--r1) var(--r1) 0;
    font-style: italic;
    color: var(--ink2);
}

.page-content-inner img {
    max-width: 100%;
    height: auto;
    border-radius: var(--r2);
    margin-block: 1.5rem;
    box-shadow: var(--sh-sm);
}

.page-content-inner hr {
    border: none;
    border-top: 1px solid var(--p2);
    margin: 2rem 0;
}

.page-content-inner table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
    margin-bottom: 1.5rem;
    background: var(--p);
    border-radius: var(--r2);
    overflow: hidden;
}

.page-content-inner th {
    background: var(--p);
    font-weight: 700;
    color: var(--ink);
    padding: .6rem .85rem;
    text-align: left;
    border-bottom: 2px solid var(--p2);
}

.page-content-inner td {
    padding: .55rem .85rem;
    border-bottom: 1px solid var(--p2);
    color: var(--ink3);
}

.page-content-inner tr:last-child td {
    border-bottom: none;
}

.category .info-box ul,
.category .info-box ol {
    margin: 1.125rem 0 !important;
    padding-left: 1.5rem !important;

}

.category .info-box-title {
    font-size: .8rem;
}

.category .info-box li,
.category .info-box p {
    font-size: 1rem !important;
}

/* ══════════════════════════════════════════════════
   TAXONOMY — NEIGHBORHOOD
   ══════════════════════════════════════════════════ */

/* Individual neighborhood header */
.neighborhood-header {
    position: relative;
    overflow: hidden;
    padding-block: clamp(3rem, 8vw, 6rem) clamp(2rem, 5vw, 4rem);
}

.neighborhood-header-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 40%;
    opacity: .15;
}

.neighborhood-header--dark .neighborhood-header-bg {
    opacity: .22;
    mix-blend-mode: luminosity;
}

.neighborhood-header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(26, 23, 20, .08) 100%);
}

.neighborhood-header--dark .neighborhood-header-overlay {
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(26, 23, 20, .4) 100%);
}

.neighborhood-header-content {
    position: relative;
    z-index: 2;
}

.neighborhood-jp {
    font-family: var(--jp);
    font-size: clamp(.8rem, 1.2vw, 1rem);
    font-weight: 200;
    letter-spacing: .18em;
    color: var(--p3);
    margin-bottom: .5rem;
}

.neighborhood-header--dark .neighborhood-jp {
    color: rgba(255, 255, 255, .45);
}

.neighborhood-headline {
    margin-bottom: .5rem;
}

.neighborhood-header--dark .neighborhood-headline {
    color: #fff;
}

.neighborhood-header--dark .archive-breadcrumb {
    color: rgba(255, 255, 255, .4);
}

.neighborhood-header--dark .archive-breadcrumb a {
    color: var(--g);
}

.neighborhood-vibe {
    font-family: var(--cond);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--r);
    margin-bottom: 1rem;
}

.neighborhood-header--dark .neighborhood-vibe {
    color: var(--g);
}

.neighborhood-description {
    font-size: clamp(.9rem, 1.4vw, 1rem);
    color: var(--ink3);
    max-width: 62ch;
    line-height: 1.72;
    margin-top: .75rem;
}

.neighborhood-header--dark .neighborhood-description {
    color: rgba(255, 255, 255, .72);
}

.neighborhood-header--dark .archive-updated {
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .5);
}

.neighborhood-header--dark .archive-updated time {
    color: rgba(255, 255, 255, .8);
}

/* Hotel CTA block */
.neighborhood-hotel-cta {
    padding-block: clamp(2rem, 4vw, 3rem);
}

.neighborhood-hotel-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.neighborhood-hotel-cta-copy {
    flex: 1;
    min-width: 240px;
}

.neighborhood-hotel-cta-text {
    font-size: clamp(.88rem, 1.3vw, 1rem);
    color: rgba(255, 255, 255, .72);
    margin-top: .4rem;
    max-width: 52ch;
    line-height: 1.6;
}

/* Neighborhoods hub — 3-col grid override */
.neighborhoods-section .hood-grid {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
    .neighborhoods-section .hood-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .neighborhoods-section .hood-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Single Page & Post Content Image */
/* body.page .page-content-inner img.aligncenter.size-full {
display: block;
width: 160% !important;
max-width: none !important;
margin-left: calc(-1 * calc((160% - 100%) / 2)) !important;
margin-right: calc(-1 * var(--prose-expand-size)) !important;
margin-top: 2rem !important;
margin-bottom: 2rem !important;
border-radius: 8px!important;
height: auto;
border: 1px solid rgba(26,23,20,0.12)!important;
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2) !important;
} */

/* === Uncaptioned full-width images (direct img, no figure wrapper) === */
body.page .page-content-inner img.aligncenter.size-full,
body.single .page-content-inner img.aligncenter.size-full,
body.tax-neighborhood .page-content-inner img.aligncenter.size-full,
body.category .page-content-inner img.aligncenter.size-full,
body.archive .page-content-inner img.aligncenter.size-full {
    --_bleed: 30%;

    display: block;
    width: calc(100% + var(--_bleed)) !important;
    max-width: none !important;
    margin-left: calc(-1 * (var(--_bleed) / 2)) !important;
    margin-right: calc(-1 * (var(--_bleed) / 2)) !important;
    margin-top: 2.5rem !important;
    margin-bottom: 2.5rem !important;
    height: auto;

    border-radius: var(--radius-xl, 1rem) !important;
    border: 1px solid var(--border, #d9d0c0) !important;
    box-shadow:
        0 4px 16px oklch(0.15 0.02 40 / 0.10),
        0 1px 3px oklch(0.15 0.02 40 / 0.08) !important;
}

/* === Captioned images (figure.wp-caption wrapper) === */
body.page .page-content-inner figure.wp-caption.aligncenter,
body.single .page-content-inner figure.wp-caption.aligncenter,
body.tax-neighborhood .page-content-inner figure.wp-caption.aligncenter,
body.category .page-content-inner figure.wp-caption.aligncenter,
body.archive .page-content-inner figure.wp-caption.aligncenter {
    --_bleed: 30%;

    display: block;
    width: calc(100% + var(--_bleed)) !important;
    max-width: none !important;
    margin-left: calc(-1 * (var(--_bleed) / 2)) !important;
    margin-right: calc(-1 * (var(--_bleed) / 2)) !important;
    margin-top: 2.5rem !important;
    margin-bottom: 2.5rem !important;

    border-radius: var(--radius-xl, 1rem) !important;
    border: 1px solid var(--border, #d9d0c0) !important;
    box-shadow:
        0 4px 16px oklch(0.15 0.02 40 / 0.10),
        0 1px 3px oklch(0.15 0.02 40 / 0.08) !important;

    overflow: hidden;
}

/* Inner img inside figure — no independent styling */
body.page .page-content-inner figure.wp-caption.aligncenter img,
body.single .page-content-inner figure.wp-caption.aligncenter img,
body.tax-neighborhood .page-content-inner figure.wp-caption.aligncenter img,
body.category .page-content-inner figure.wp-caption.aligncenter img,
body.archive .page-content-inner figure.wp-caption.aligncenter img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: auto;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Caption text */
body.page .page-content-inner figure.wp-caption.aligncenter .wp-caption-text,
body.single .page-content-inner figure.wp-caption.aligncenter .wp-caption-text,
body.tax-neighborhood .page-content-inner figure.wp-caption.aligncenter .wp-caption-text,
body.category .page-content-inner figure.wp-caption.aligncenter .wp-caption-text,
body.archive .page-content-inner figure.wp-caption.aligncenter .wp-caption-text {
    margin: 0;
    padding: 0.6rem 1rem 0.7rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted, #6b6559);
    background: var(--color-surface, #faf8f4);
    border-top: 1px solid var(--border, #d9d0c0);
    text-align: left;
    line-height: 1.5;
}

/* === Captioned images with any other alignment (alignnone / left / right) ===
   WordPress stamps an inline width on figure.wp-caption. The aligncenter block
   above overrides that width itself, but the other alignments had no rule at
   all, so the figure kept its intrinsic pixel width, overflowed the text
   column, and the caption rendered unstyled. These selectors are mutually
   exclusive with the aligncenter block, so centered captions are untouched. */
.page-content-inner figure.wp-caption:not(.aligncenter) {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 1.75rem 0;

    border-radius: var(--radius-xl, 1rem);
    border: 1px solid var(--border, #d9d0c0);
    overflow: hidden;
}

.page-content-inner figure.wp-caption:not(.aligncenter) img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

.page-content-inner figure.wp-caption:not(.aligncenter) .wp-caption-text {
    margin: 0;
    padding: 0.6rem 1rem 0.7rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted, #6b6559);
    background: var(--color-surface, #faf8f4);
    border-top: 1px solid var(--border, #d9d0c0);
    text-align: left;
    line-height: 1.5;
}

/* === Mobile: collapse bleed on EVERY variant the rules above create === */
/* Must mirror the full selector set of both bleed blocks (all body classes ×
   both the plain img and the figure.wp-caption wrapper); otherwise the omitted
   variants (e.g. body.tax-neighborhood / body.category / body.archive plain
   images) keep the 30% bleed on phones and overflow the viewport. */
@media (max-width: 768px) {

    body.page .page-content-inner img.aligncenter.size-full,
    body.single .page-content-inner img.aligncenter.size-full,
    body.tax-neighborhood .page-content-inner img.aligncenter.size-full,
    body.category .page-content-inner img.aligncenter.size-full,
    body.archive .page-content-inner img.aligncenter.size-full,
    body.page .page-content-inner figure.wp-caption.aligncenter,
    body.single .page-content-inner figure.wp-caption.aligncenter,
    body.tax-neighborhood .page-content-inner figure.wp-caption.aligncenter,
    body.category .page-content-inner figure.wp-caption.aligncenter,
    body.archive .page-content-inner figure.wp-caption.aligncenter {
        --_bleed: 0%;

        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: var(--radius-lg, 0.75rem) !important;
    }
}


/* ===========================================================================
   [gallery] shortcode
   ---------------------------------------------------------------------------
   Core emits, with html5 gallery support on:

     <div class="gallery gallery-columns-N gallery-size-*">
       <figure class="gallery-item">
         <div class="gallery-icon landscape"><a><img></a></div>
         <figcaption class="wp-caption-text gallery-caption">…</figcaption>
       </figure>
       …

   Core's own float-based CSS is switched off in functions.php
   (use_default_gallery_style), so this grid is the only layout in play.
   =========================================================================== */

.gallery {
    --gal-cols: 3;
    --gal-gap: 0.75rem;

    display: grid;
    grid-template-columns: repeat(var(--gal-cols), minmax(0, 1fr));
    gap: var(--gal-gap);
    margin: 2.5rem 0;
    padding: 0;
    clear: both;
}

/* The editor's "Columns" setting, which core writes onto the wrapper. */
.gallery-columns-1 { --gal-cols: 1; }
.gallery-columns-2 { --gal-cols: 2; }
.gallery-columns-3 { --gal-cols: 3; }
.gallery-columns-4 { --gal-cols: 4; }
.gallery-columns-5 { --gal-cols: 5; }
.gallery-columns-6 { --gal-cols: 6; }
.gallery-columns-7 { --gal-cols: 7; }
.gallery-columns-8 { --gal-cols: 8; }
.gallery-columns-9 { --gal-cols: 9; }

/* Never leave an empty track. Core writes columns-3 by default whatever the
   image count, so a two-image gallery would otherwise sit next to a gap a
   whole cell wide. These only ever reduce the count: the :not() guards mean a
   deliberate columns-1 or columns-2 setting is left as the editor set it. */
.gallery:has(.gallery-item:only-child):not(.gallery-columns-1) {
    --gal-cols: 1;
}

.gallery:has(.gallery-item:nth-child(2):last-child):not(.gallery-columns-1):not(.gallery-columns-2) {
    --gal-cols: 2;
}

.gallery .gallery-item {
    display: flex;
    flex-direction: column;
    width: auto;
    margin: 0;
    padding: 0;
    float: none;
    overflow: hidden;

    border-radius: var(--radius-lg, 0.75rem);
    border: 1px solid var(--border, #d9d0c0);
    background: var(--color-surface, #faf8f4);
}

.gallery .gallery-icon,
.gallery .gallery-icon a {
    display: block;
    margin: 0;
    padding: 0;
    border: none;
}

/* The prose column styles images generically, so the borders and radius that
   belong to the cell have to be taken back off the img inside it. */
.gallery .gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    object-fit: cover;

    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* A uniform crop so rows line up whatever mix of portrait and landscape the
   gallery holds. A one-image gallery is really just an inline image, so it
   keeps its natural proportions instead. */
.gallery:not(:has(.gallery-item:only-child)) .gallery-item img {
    aspect-ratio: 4 / 3;
}

/* margin-top: auto pins the caption to the bottom of the cell, so captions of
   different lengths still align across a row.

   The selector names .gallery-item as well for specificity, not structure:
   core stamps both wp-caption-text and gallery-caption on this element, so
   single-post.css's `.post-content .wp-caption-text` ties at two classes and
   wins on load order, which centred the text and dropped the bar. Three
   classes settles it without !important. */
.gallery .gallery-item .gallery-caption {
    margin: auto 0 0;
    padding: 0.5rem 0.7rem 0.6rem;
    font-size: 0.75rem;
    line-height: 1.45;
    text-align: left;
    color: var(--color-text-muted, #6b6559);
    background: var(--color-surface, #faf8f4);
    border-top: 1px solid var(--border, #d9d0c0);
}

/* === Gallery bleed, mirroring the wide inline image treatment above ===
   Same body-class set and same --_bleed value as img.aligncenter.size-full,
   so a gallery in a single-column prose layout breaks out of the measure by
   exactly as much as a wide image does. */
body.page .page-content-inner .gallery,
body.single .page-content-inner .gallery,
body.tax-neighborhood .page-content-inner .gallery,
body.category .page-content-inner .gallery,
body.archive .page-content-inner .gallery {
    --_bleed: 30%;

    width: calc(100% + var(--_bleed));
    max-width: none;
    margin-left: calc(-1 * (var(--_bleed) / 2));
    margin-right: calc(-1 * (var(--_bleed) / 2));
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

/* Fewer columns as the grid narrows. Caps only: a columns-2 gallery stays at
   two the whole way down until the phone breakpoint. */
@media (max-width: 900px) {

    .gallery-columns-5,
    .gallery-columns-6,
    .gallery-columns-7,
    .gallery-columns-8,
    .gallery-columns-9 {
        --gal-cols: 3;
    }
}

@media (max-width: 768px) {

    /* Collapse the bleed on the same breakpoint the wide images use. */
    body.page .page-content-inner .gallery,
    body.single .page-content-inner .gallery,
    body.tax-neighborhood .page-content-inner .gallery,
    body.category .page-content-inner .gallery,
    body.archive .page-content-inner .gallery {
        --_bleed: 0%;

        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .gallery-columns-3,
    .gallery-columns-4,
    .gallery-columns-5,
    .gallery-columns-6,
    .gallery-columns-7,
    .gallery-columns-8,
    .gallery-columns-9 {
        --gal-cols: 2;
    }
}

@media (max-width: 480px) {

    .gallery {
        --gal-cols: 1;
        --gal-gap: 0.6rem;
    }

    .gallery-columns-2,
    .gallery-columns-3,
    .gallery-columns-4,
    .gallery-columns-5,
    .gallery-columns-6,
    .gallery-columns-7,
    .gallery-columns-8,
    .gallery-columns-9 {
        --gal-cols: 1;
    }
}

/* === Horizontal Rule === */
body.page .page-content-inner hr,
body.single .page-content-inner hr,
body.single .attraction-main hr,
body.single .stay-prose hr {
    display: block;
    width: 100%;
    height: 1px;
    border: none;
    background: var(--border, #d9d0c0);
    margin-top: 3rem;
    margin-bottom: 3rem;
    position: relative;
}

/* Center ornament — Japanese diamond mark */
body.page .page-content-inner hr::before,
body.single .page-content-inner hr::before,
body.single .attraction-main hr::before,
body.single .stay-prose hr::before {
    content: '◆';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.5rem;
    color: var(--color-primary, #c1281a);
    background: var(--color-bg, #ede7da);
    padding: 0 0.75rem;
    line-height: 1;
}

/* === Post Block - Info Block === */
.info-box {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    border-radius: var(--r2);
    padding: 1.1rem 1.25rem;
    margin: 1.75rem 0;
    border: 1px solid transparent;
}

.info-box--tip {
    background: #f0faf4;
    border-color: #b6dfca;
}

.info-box--warning {
    background: #fef9ec;
    border-color: #e8cc80;
}

.info-box--note {
    background: var(--rt);
    border-color: rgba(193, 40, 26, .22);
}

.info-box-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.info-box--tip .info-box-icon {
    background: #c8edda;
}

.info-box--warning .info-box-icon {
    background: #fce9a0;
}

.info-box--note .info-box-icon {
    background: rgba(193, 40, 26, .1);
}

.info-box-title {
    font-family: var(--sans);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: .3rem;
}

.info-box--tip .info-box-title {
    color: #166a38;
}

.info-box--warning .info-box-title {
    color: #7a5200;
}

.info-box--note .info-box-title {
    color: var(--r);
}

.info-box p {
    font-size: .88rem;
    color: var(--ink3);
    line-height: 1.65;
    margin-bottom: 0;
    max-width: none;
}

/* === Post Block - Info Block === */
.single .lead {
    font-family: var(--serif);
    font-size: clamp(1.05rem, 1.8vw, 1.18rem);
    font-weight: 400;
    font-style: italic;
    color: var(--ink);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-optical-sizing: auto;
    margin: 1rem 0 2.5rem 0;
    padding-bottom: 2.5rem;
    border-bottom: 3px solid var(--r);
}

.responsive-map {
    box-shadow: var(--sh-sm);
    border-radius: var(--r2)
}


/* ══════════════════════════════════════════════════════════════════════
   DEST NAV: LOADING & EMPTY STATES
   ══════════════════════════════════════════════════════════════════════ */

/* Loading shimmer on carousel wrap */
.carousel-track-wrap.is-loading {
    pointer-events: none;
    opacity: 0.45;
    transition: opacity 0.2s ease;
}

/* Empty state message inside track */
.dest-nav-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--p3);
    font-size: 0.9rem;
    width: 100%;
}

.dest-nav-empty a {
    color: var(--r);
    text-decoration: underline;
}

/* Hide entire carousel section when all results are empty */
.carousel-section.dest-nav-hidden,
.neighborhoods-section.dest-nav-hidden {
    display: none;
}

/* Active state on dest-nav button */
.dest-nav-item.active {
    background-color: var(--r);
    color: #fff;
    border-color: var(--r);
}

/* Japanese text in active button - lighter color for readability */
.dest-nav-item.active .dest-nav-item-jp {
    color: rgba(255, 255, 255, 0.75);
}

/* Prevent multiple rapid clicks looking broken */
.dest-nav-item:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ══════════════════════════════════════════════════
   OSAKA WEATHER WIDGET SHORTCODE
   ══════════════════════════════════════════════════ */
@media all {
    .visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    label {
        cursor: pointer !important;
        display: block !important;
    }

    label {
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        user-select: none !important;
    }

    .osakaweather {
        display: block !important;
        display: grid !important;
        grid-template-columns: repeat(10, 1fr) !important;
        grid-template-areas: "rg rg rg hd hd hd hd hd hd hd" "gr gr gr gr gr gr gr gr gr gr" "cf cf cf lg lg lg lg lg lg lg" !important;
        flex: 1 0 auto !important;
        font-size: 16px !important;
        height: -moz-fit-content !important;
        height: fit-content !important;
        margin-bottom: 2em !important;
        margin-top: 2em !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        user-select: none !important;
    }

    .osakaweather__months {
        /* Containing block for the absolutely positioned .visually-hidden
           spans inside each month. Without it they escape this scroller,
           sit past the right edge of the article and widen the document,
           which makes Android Chrome zoom the whole page out. */
        position: relative !important;
        grid-area: gr !important;
        -moz-column-gap: 16px !important;
        column-gap: 16px !important;
        display: none !important;
        flex-direction: row !important;
        margin-top: 15px !important;
        margin-bottom: 10px !important;
        margin-left: -15px !important;
        overflow: hidden !important;
        overflow-x: scroll !important;
        scrollbar-width: none !important;
        padding: 0 15px !important;
        width: calc(100% + 30px) !important;
    }

    .osakaweather__months--1 {
        display: flex !important;
    }

    .osakaweather__months::-webkit-scrollbar {
        display: none !important;
    }

    .osakaweather__item {
        flex: 1 0 auto !important;
        transition: opacity .1s ease !important;
        width: calc(15.45% - 14px) !important;
    }

    .osakaweather__item:first-child .osakaweather__item-name {
        margin-left: 0 !important;
        padding-right: 8px !important;
        width: calc(100% + 8px) !important;
    }

    .osakaweather__item:last-child .osakaweather__item-name {
        margin-right: 0 !important;
        padding-left: 8px !important;
        width: calc(100% + 8px) !important;
    }

    .osakaweather__item-bar {
        align-items: center !important;
        background-color: rgba(255, 69, 0, .15) !important;
        height: 200px !important;
        border-top-left-radius: 9em !important;
        border-top-right-radius: 9em !important;
        width: 100% !important;
        padding-top: 15px !important;
        min-width: 40px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        opacity: 1 !important;
        transition: opacity .1s !important;
    }

    .osakaweather__item-bar--mixed {
        background-color: rgba(240, 187, 104, .15) !important;
    }

    .osakaweather__item-bar--mixed .osakaweather__item-temp__graph:before {
        background-color: #f0bb68 !important;
    }

    .osakaweather__item-bar--good {
        background-color: rgba(159, 191, 137, .15) !important;
    }

    .osakaweather__item-bar--good .osakaweather__item-temp__graph:before {
        background-color: #9fbf89 !important;
    }

    .osakaweather__item-bar--best {
        background-color: rgba(90, 127, 83, .1) !important;
    }

    .osakaweather__item-bar--best .osakaweather__item-temp__graph:before {
        background-color: #5a7f53 !important;
    }

    .osakaweather__item-name {
        border-top: 1px solid #F5F4F2 !important;
        font-family: inherit !important;
        font-weight: 900 !important;
        text-align: center !important;
        line-height: 1 !important;
        padding-top: 10px !important;
        margin-bottom: 5px !important;
        width: calc(100% + 16px) !important;
        margin-left: -8px !important;
        text-transform: capitalize !important;
    }

    .osakaweather__item-sky {
        font-size: 1.55em !important;
        line-height: 1 !important;
        padding-bottom: 27px !important;
    }

    .osakaweather__item-temp {
        display: flex !important;
        flex: 1 0 auto !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    .osakaweather__item-temp__text {
        font-family: inherit !important;
        font-size: .75em !important;
        height: 1em !important;
        line-height: 1 !important;
        margin: -100% 0 8px !important;
        white-space: nowrap !important;
    }

    .osakaweather__item-temp__text-f {
        display: none !important;
    }

    .osakaweather__item-temp__graph {
        height: 20px !important;
        width: 20px !important;
        position: relative !important;
    }

    .osakaweather__item-temp__graph:before {
        background: inherit !important;
        border-top-left-radius: 9em !important;
        border-top-right-radius: 9em !important;
        content: "" !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
    }

    .osakaweather__toggle {
        grid-area: cf !important;
        background-color: #F5F4F2 !important;
        border-radius: 17px !important;
        cursor: pointer !important;
        height: 34px !important;
        padding: 3px !important;
        position: relative !important;
        width: 75px !important;
        flex: 0 0 auto !important;
        margin-right: 10px !important;
    }

    .osakaweather__toggle-container {
        border-radius: inherit !important;
        height: 100% !important;
        position: relative !important;
    }

    .osakaweather__toggle-button {
        border-radius: inherit !important;
        height: inherit !important;
        position: absolute !important;
        width: 50% !important;
        background-color: #fff !important;
        transition: transform .2s cubic-bezier(.25, .46, .45, .94) !important;
        transform: translateX(0) !important;
    }

    .osakaweather__toggle-names {
        align-items: center !important;
        color: #606060 !important;
        display: flex !important;
        height: 100% !important;
        font-family: inherit !important;
        font-weight: 900 !important;
        font-size: 14px !important;
        line-height: 1 !important;
        justify-content: space-around !important;
        position: relative !important;
    }

    .osakaweather__toggle-c {
        color: #353535 !important;
    }

    .osakaweather__checkbox:checked+.osakaweather__toggle-button {
        transform: translateX(100%) !important;
    }

    .osakaweather__checkbox:checked+.osakaweather__toggle-button+.osakaweather__toggle-names>.osakaweather__toggle-f {
        color: #353535 !important;
    }

    .osakaweather__checkbox:checked+.osakaweather__toggle-button+.osakaweather__toggle-names>.osakaweather__toggle-c {
        color: #3A3A3A !important;
    }

    .osakaweather__legend {
        grid-area: lg !important;
        align-self: center !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
    }

    .osakaweather__legend:has(.osakaweather__legend-item--best:hover)~.osakaweather__months .osakaweather__item-bar:not(.osakaweather__item-bar--best),
    .osakaweather__legend:has(.osakaweather__legend-item--good:hover)~.osakaweather__months .osakaweather__item-bar:not(.osakaweather__item-bar--good),
    .osakaweather__legend:has(.osakaweather__legend-item--mixed:hover)~.osakaweather__months .osakaweather__item-bar:not(.osakaweather__item-bar--mixed),
    .osakaweather__legend:has(.osakaweather__legend-item--poor:hover)~.osakaweather__months .osakaweather__item-bar:not(.osakaweather__item-bar--poor),
    .osakaweather__legend:has(.osakaweather__legend-item:hover) .osakaweather__legend-item:not(:hover) {
        opacity: .5 !important;
    }

    .osakaweather__legend-item {
        font-family: inherit !important;
        font-size: .8em !important;
        height: 1em !important;
        line-height: 1 !important;
        margin: 5px 0 !important;
        opacity: 1 !important;
        transition: opacity .1s !important;
    }

    .osakaweather__legend-item:before {
        border-radius: 5px !important;
        border-radius: 64% 45% 64% 36%/43% 45% 63% 57% !important;
        content: "" !important;
        display: inline-block !important;
        height: 10px !important;
        margin-right: 4px !important;
        width: 10px !important;
    }

    .osakaweather__legend-item+.osakaweather__legend-item {
        padding-left: 10px !important;
    }

    .osakaweather__legend-item--poor:before {
        background-color: #e27769 !important;
    }

    .osakaweather__legend-item--mixed:before {
        background-color: #f0bb68 !important;
    }

    .osakaweather__legend-item--good:before {
        background-color: #9fbf89 !important;
    }

    .osakaweather__legend-item--best:before {
        background-color: #5a7f53 !important;
    }

    .osakaweather:has(.osakaweather__checkbox:checked) .osakaweather__item-temp__text-c {
        display: none !important;
    }

    .osakaweather:has(.osakaweather__checkbox:checked) .osakaweather__item-temp__text-f {
        display: inline !important;
    }

    @media (min-width:768px) {
        .osakaweather__months {
            -moz-column-gap: 0 !important;
            column-gap: 0 !important;
            padding: 0 !important;
            margin-left: -8px !important;
            margin-right: -8px !important;
            width: auto !important;
        }

        .osakaweather__months:hover>.osakaweather__item {
            opacity: .5 !important;
        }

        .osakaweather__months:hover>.osakaweather__item:hover {
            opacity: 1 !important;
        }

        .osakaweather__item {
            padding: 0 8px !important;
            width: 56px !important;
        }
    }

    @media only screen and (max-width:359px) {
        .osakaweather__months {
            margin-left: -10px !important;
            padding: 0 10px !important;
            width: calc(100% + 25px) !important;
        }

        .osakaweather__item {
            width: calc(18.2% - 14px) !important;
        }
    }

    @media (min-width:1024px) and (max-width:1156px) {
        .osakaweather__months {
            margin-left: -5px !important;
            margin-right: -5px !important;
        }

        .osakaweather__item {
            padding: 0 5px !important;
            width: 46px !important;
        }

        .osakaweather__item-bar {
            min-width: 30px !important;
        }
    }
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.5rem;
}

.table-responsive table {
    width: 100%;
    min-width: 600px;
    /* adjust depending on your table density */
}

/* ── Skip link (a11y) ─────────────────────────────────────────────────── */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 10px 18px;
    background: var(--ink);
    color: #fff;
    font: 600 14px/1 var(--sans);
    border-radius: 0 0 var(--r1, 6px) 0;
}

.skip-link:focus {
    left: 0;
    outline: 2px solid var(--r);
    outline-offset: 2px;
}

/* ── Swiper pre-init guard ────────────────────────────────────────────────
   Before Swiper boots (footer JS), the vendor CSS lays every slide out at
   width:100% in one flex row. Clip the row here; each carousel's own
   stylesheet sets pre-init slide widths matching its slidesPerView so the
   first paint equals the final layout (no flash, no CLS). */
.swiper:not(.swiper-initialized) {
    overflow: hidden;
}

.swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
}

.swiper:not(.swiper-initialized) .swiper-slide {
    flex-shrink: 0;
}