/* ============================================================
   Kyushu — A bilingual Ghost theme for travel blogs
   Style: minimal greyscale + red. Editorial, classy, easy to read.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
    /* Type — defaults; overridden by --gh-font-heading / --gh-font-body when Ghost injects them */
    --ky-font-zh:        "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
    --ky-font-zh-serif:  "Noto Serif TC", "Source Han Serif TC", "PingFang TC", "Songti TC", serif;
    --ky-font-en:        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --ky-font-en-serif:  "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --ky-font-mono:      ui-monospace, "JetBrains Mono", Menlo, monospace;

    /* Ghost-injected font variables. Ghost writes these into the body element
       when the user picks Title font / Body font in Settings → Design. */
    --gh-font-heading: var(--ky-font-en-serif), var(--ky-font-zh-serif);
    --gh-font-body:    var(--ky-font-en),       var(--ky-font-zh);

    /* Color — Light (greyscale) */
    --ky-bg:      #FFFFFF;
    --ky-bg-alt:  #F4F4F5;
    --ky-bg-card: #FFFFFF;
    --ky-line:    #E4E4E7;
    --ky-line-soft:#F0F0F2;
    --ky-ink:      #18181B;
    --ky-ink-soft: #3F3F46;
    --ky-ink-mute: #71717A;

    /* Single accent — clean, classic red. Works in both light and dark. */
    --ky-accent:      #DC2626;
    --ky-accent-soft: #FCA5A5;
    --ky-accent-deep: #991B1B;

    /* Layout */
    --ky-radius:     10px;
    --ky-radius-lg:  16px;
    --ky-radius-pill:999px;
    --ky-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04);
    --ky-shadow-lift: 0 6px 20px rgba(0, 0, 0, 0.08), 0 18px 50px rgba(0, 0, 0, 0.10);

    --ky-content-w: 1180px;
    --ky-reading-w: 720px;
    --ky-gap:    clamp(1rem, 2vw, 1.75rem);
    --ky-gutter: clamp(1.25rem, 4vw, 3rem);

    --ky-ease: cubic-bezier(.2,.7,.2,1);
}

/* Sumi (dark) — explicit light/dark switch + auto */
.ky-color-dark,
.ky-color-auto[data-color-scheme="dark"] {
    --ky-bg:        #0A0A0A;
    --ky-bg-alt:    #18181B;
    --ky-bg-card:   #18181B;
    --ky-line:      #27272A;
    --ky-line-soft: #1F1F22;
    --ky-ink:       #FAFAFA;
    --ky-ink-soft:  #D4D4D8;
    --ky-ink-mute:  #71717A;
    --ky-accent:      #EF4444;
    --ky-accent-soft: #FCA5A5;
    --ky-accent-deep: #B91C1C;
    --ky-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
    --ky-shadow-lift: 0 6px 20px rgba(0, 0, 0, 0.5), 0 18px 50px rgba(0, 0, 0, 0.6);
}
@media (prefers-color-scheme: dark) {
    .ky-color-auto {
        --ky-bg:        #0A0A0A;
        --ky-bg-alt:    #18181B;
        --ky-bg-card:   #18181B;
        --ky-line:      #27272A;
        --ky-line-soft: #1F1F22;
        --ky-ink:       #FAFAFA;
        --ky-ink-soft:  #D4D4D8;
        --ky-ink-mute:  #71717A;
        --ky-accent:      #EF4444;
        --ky-accent-soft: #FCA5A5;
        --ky-accent-deep: #B91C1C;
        --ky-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
        --ky-shadow-lift: 0 6px 20px rgba(0, 0, 0, 0.5), 0 18px 50px rgba(0, 0, 0, 0.6);
    }
}

/* ---------- Font behaviour ----------
   Body: sans-serif in both languages (more readable for long-form).
   Titles: serif in both languages (classy, editorial).
   Title font / Body font selects in Ghost can flip these. */
[data-lang="zh-Hant"] body,
[data-lang="zh-Hant"] {
    font-family: var(--ky-font-zh), var(--ky-font-en);
}
[data-lang="en"] body,
[data-lang="en"] {
    font-family: var(--ky-font-en), var(--ky-font-zh);
}

/* Default titles use serif. Per-language overrides come from individual title rules. */

/* When Title font is set to "Modern sans-serif" (admin choice) */
.ky-title-sans .ky-section-title,
.ky-title-sans .ky-card-title,
.ky-title-sans .ky-card-hero-title,
.ky-title-sans .ky-article-title,
.ky-title-sans .ky-tag-hero-title,
.ky-title-sans .ky-newsletter-title,
.ky-title-sans .ky-author-name,
.ky-title-sans .ky-archive-title,
.ky-title-sans .ky-immersive-title,
.ky-title-sans .ky-error-title,
.ky-title-sans .ky-foot-title,
.ky-title-sans .ky-content h2,
.ky-title-sans .ky-content h3,
.ky-title-sans .ky-content h4 {
    font-family: var(--ky-font-en), var(--ky-font-zh);
    letter-spacing: -0.015em;
}
[data-lang="zh-Hant"].ky-title-sans .ky-section-title,
[data-lang="zh-Hant"].ky-title-sans .ky-card-title,
[data-lang="zh-Hant"].ky-title-sans .ky-card-hero-title,
[data-lang="zh-Hant"].ky-title-sans .ky-article-title,
[data-lang="zh-Hant"].ky-title-sans .ky-tag-hero-title,
[data-lang="zh-Hant"].ky-title-sans .ky-immersive-title {
    font-family: var(--ky-font-zh), var(--ky-font-en);
}

/* When Body font is set to "Elegant serif" (admin choice) */
.ky-body-serif[data-lang="en"] {
    font-family: var(--ky-font-en-serif), var(--ky-font-zh-serif);
}
.ky-body-serif[data-lang="zh-Hant"] {
    font-family: var(--ky-font-zh-serif), var(--ky-font-en-serif);
}
.ky-body-serif .ky-content { font-family: inherit; }

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--ky-bg);
    color: var(--ky-ink);
    /* isolation creates a new stacking context so .ky-fixed-deco at z-index: -1
       paints AFTER body's bg (visible) but BEFORE document content (behind it). */
    isolation: isolate;
    font-family: var(--ky-font-en), var(--ky-font-zh);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body[data-lang="zh-Hant"] { font-family: var(--ky-font-zh), var(--ky-font-en); line-height: 1.75; }
/* CRITICAL: pair max-width with height: auto so an image that has
   width/height attributes (Ghost auto-injects them on uploaded images)
   doesn't get its width clamped while height stays fixed → distortion.
   Card/hero/avatar rules below override with explicit height where needed. */
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--ky-accent); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--ky-accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- 3. Bilingual core ---------- */
/*
  Each UI label is rendered as
      <span lang="zh-Hant">繁中</span><span lang="en">EN</span>
  We hide the inactive language using the html[data-lang] attribute,
  which is set by JS after reading localStorage / @custom.default_language.
  We use [data-bilingual-skip] (or .ky-lang-btn) to opt out — used by the
  language toggle buttons which always show both options regardless of mode.
*/
[data-lang="zh-Hant"] [lang="en"]:not(.ky-lang-btn):not([data-bilingual-skip])      { display: none; }
[data-lang="en"]      [lang="zh-Hant"]:not(.ky-lang-btn):not([data-bilingual-skip]) { display: none; }

/* While JS hasn't set data-lang, hide the language we DON'T want to flash. */
html:not([data-lang]) [lang="en"]:not(.ky-lang-btn):not([data-bilingual-skip]) { display: none; }
html:not([data-lang])[data-default-lang="en"] [lang="zh-Hant"]:not(.ky-lang-btn):not([data-bilingual-skip]) { display: none; }
html:not([data-lang])[data-default-lang="en"] [lang="en"]:not(.ky-lang-btn):not([data-bilingual-skip]) { display: inline; }

/* Inside post content — authors can wrap blocks with <div lang="..."> */
.ky-content [lang="en"], .ky-content [lang="zh-Hant"] { display: block; }
[data-lang="zh-Hant"] .ky-content [lang="en"]      { display: none; }
[data-lang="en"]      .ky-content [lang="zh-Hant"] { display: none; }

/* Per-post language filtering on listings.
   Cards carry data-post-lang="zh-Hant" | "en" | "any" based on the post's
   internal language tag (#zh / #en). When the visitor picks a language,
   non-matching posts disappear. Untagged posts ("any") show in both modes. */
[data-lang="zh-Hant"] [data-post-lang="en"]      { display: none !important; }
[data-lang="en"]      [data-post-lang="zh-Hant"] { display: none !important; }

/* (Related-posts exception removed — now server-side filtered by language
   in post.hbs, so no client-side override needed.) */

/* ---------- 4. Layout primitives ---------- */
.ky-site { display: flex; flex-direction: column; min-height: 100vh; }
.ky-main {
    flex: 1;
    width: 100%;
    max-width: var(--ky-content-w);
    margin: 0 auto;
    padding: clamp(1.5rem, 3vw, 3rem) var(--ky-gutter);
}
.ky-skip {
    position: absolute; left: -9999px; top: 0;
    background: var(--ky-ink); color: var(--ky-bg);
    padding: .5rem 1rem; z-index: 999;
}
.ky-skip:focus { left: 1rem; top: 1rem; }

/* ---------- 5. Header ---------- */
.ky-head {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in srgb, var(--ky-bg) 92%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s var(--ky-ease), box-shadow .2s var(--ky-ease);
}
.ky-head.is-scrolled {
    border-bottom-color: var(--ky-line);
    box-shadow: 0 2px 12px rgba(31, 27, 22, 0.05);
}
.ky-head-inner {
    max-width: var(--ky-content-w);
    margin: 0 auto;
    padding: 0.85rem var(--ky-gutter);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--ky-gap);
}
.ky-head-brand { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.ky-logo-wrap { margin: 0; }
.ky-logo {
    font-family: var(--ky-font-en-serif);
    font-size: 1.45rem; font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ky-ink);
    white-space: nowrap;
}
[data-lang="zh-Hant"] .ky-logo { font-family: var(--ky-font-zh-serif); }
.ky-logo-img { max-height: 32px; width: auto; }
.ky-tagline {
    margin: 0; color: var(--ky-ink-mute);
    font-size: .85rem; font-weight: 400; line-height: 1.4;
    border-left: 1px solid var(--ky-line);
    padding-left: 1rem;
    align-self: center;
}
.ky-nav { display: block; }
.ky-nav-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: 1.5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.ky-nav-link {
    display: inline-block;
    font-size: .95rem; font-weight: 500;
    color: var(--ky-ink); position: relative;
    padding: .25rem 0;
    white-space: nowrap;
}
.ky-nav-link:hover { color: var(--ky-accent); }
.ky-nav-link::after {
    content: ''; position: absolute; left: 0; bottom: -2px;
    width: 0; height: 2px; background: var(--ky-accent);
    transition: width .25s var(--ky-ease);
}
.ky-nav-link:hover::after { width: 100%; }

.ky-head-actions { display: flex; align-items: center; gap: .65rem; }
.ky-icon-btn {
    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; color: var(--ky-ink-soft);
    transition: background .2s var(--ky-ease), color .2s var(--ky-ease);
}
.ky-icon-btn:hover { background: var(--ky-bg-alt); color: var(--ky-ink); }

/* Lang toggle */
.ky-lang {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .25rem .55rem;
    border: 1px solid var(--ky-line); border-radius: var(--ky-radius-pill);
    font-size: .8rem;
}
.ky-lang-btn {
    padding: .15rem .35rem; border-radius: 6px;
    color: var(--ky-ink-mute); font-weight: 500;
    transition: color .2s var(--ky-ease), background .2s var(--ky-ease);
}
.ky-lang-btn[aria-pressed="true"] { color: var(--ky-bg); background: var(--ky-ink); }
.ky-lang-btn:not([aria-pressed="true"]):hover { color: var(--ky-ink); }
.ky-lang-sep { color: var(--ky-ink-mute); }

/* (Burger drawer removed — primary nav appears in the footer on mobile.) */

/* ---------- 6. Buttons ---------- */
.ky-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .65rem 1.15rem;
    background: var(--ky-ink); color: var(--ky-bg);
    border-radius: var(--ky-radius-pill);
    font-size: .9rem; font-weight: 500;
    transition: transform .15s var(--ky-ease), background .2s var(--ky-ease);
    line-height: 1; white-space: nowrap;
}
.ky-btn:hover { background: var(--ky-accent); color: white; transform: translateY(-1px); }
.ky-btn--small { padding: .5rem .9rem; font-size: .85rem; }
.ky-btn--lg { padding: .85rem 1.5rem; font-size: 1rem; }
.ky-btn--ghost { background: transparent; color: var(--ky-ink); border: 1px solid var(--ky-line); }
.ky-btn--ghost:hover { background: var(--ky-bg-alt); color: var(--ky-ink); }

/* ---------- 7. Section heads ---------- */
.ky-eyebrow {
    display: inline-block;
    text-transform: uppercase; letter-spacing: .15em; font-size: .72rem;
    color: var(--ky-accent); font-weight: 600;
}
[data-lang="zh-Hant"] .ky-eyebrow { letter-spacing: .25em; }
/* Always-light eyebrow used over dark hero images. Don't tie to --ky-bg
   (which becomes near-black in dark mode and would make the text invisible). */
.ky-eyebrow--light { color: rgba(255, 255, 255, .92); opacity: 1; }

.ky-section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.75rem; padding-bottom: .65rem;
    border-bottom: 1px solid var(--ky-line);
}
@media (max-width: 720px) {
    /* Stack title and any sibling (sub-line / "See all") so the title
       always gets its own row and never wraps awkwardly. */
    .ky-section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: .35rem;
    }
}
.ky-section-title {
    font-family: var(--ky-font-en-serif); font-weight: 500;
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: -0.01em;
}
[data-lang="zh-Hant"] .ky-section-title { font-family: var(--ky-font-zh-serif); }
.ky-section-title--hero {
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    margin-bottom: 1.25rem;
    border: 0;
    padding-bottom: 0;
}
.ky-section-title--hero .ky-eyebrow {
    font-size: clamp(.95rem, 1.6vw, 1.15rem);
    letter-spacing: .2em;
    font-weight: 700;
}
[data-lang="zh-Hant"] .ky-section-title--hero .ky-eyebrow {
    letter-spacing: .35em;
}
.ky-section-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--ky-ink-soft); font-size: .9rem; }
.ky-section-link:hover { color: var(--ky-accent); }
.ky-section-sub { color: var(--ky-ink-mute); font-size: .95rem; margin-top: 0; margin-bottom: 1.5rem; }

/* ---------- 8. Hero — single featured post, image-as-background ---------- */
.ky-hero { margin-bottom: clamp(3rem, 6vw, 5rem); }

.ky-feature {
    position: relative;
    border-radius: var(--ky-radius-lg);
    overflow: hidden;
    box-shadow: var(--ky-shadow-soft);
    aspect-ratio: 16 / 9;
    isolation: isolate;
    transition: box-shadow .3s var(--ky-ease);
}
.ky-feature:hover { box-shadow: var(--ky-shadow-lift); }
.ky-feature-link {
    display: block;
    position: relative;
    color: white;
    height: 100%;
    width: 100%;
}
.ky-feature-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: scale .8s var(--ky-ease);
}
.ky-feature:hover .ky-feature-bg { scale: 1.04; }
.ky-feature-overlay {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(to top, rgba(10, 10, 10, .82) 0%, rgba(10, 10, 10, .55) 40%, rgba(10, 10, 10, .15) 80%, rgba(10, 10, 10, .05) 100%);
}

.ky-feature-badge {
    position: absolute; top: clamp(1rem, 2vw, 1.5rem); left: clamp(1rem, 2vw, 1.5rem);
    z-index: 3;
    background: var(--ky-accent); color: white;
    padding: .35rem .8rem; border-radius: var(--ky-radius-pill);
    font-size: .72rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
    transform: rotate(-3deg);
}

/*
   Two-column grid where title + excerpt share row 2, so their TOPS align.
   Row 1: area chip (left only).
   Row 2: title (left) | excerpt (right) — both align-self: start.
   Row 3: meta (left only).
*/
.ky-feature-grid {
    position: absolute; inset: 0;
    z-index: 2;
    padding: clamp(1.5rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    grid-template-rows: auto auto auto;
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
    row-gap: .5rem;
    align-content: end;  /* push entire grid to bottom */
}
.ky-feature-area    { grid-column: 1; grid-row: 1; }
.ky-feature-title   { grid-column: 1; grid-row: 2; }
.ky-feature-meta    { grid-column: 1; grid-row: 3; }
.ky-feature-excerpt { grid-column: 2; grid-row: 2 / span 2; align-self: start; }

.ky-feature-area {
    display: inline-flex; align-items: center; gap: .4rem;
    color: rgba(255, 255, 255, .92);
    font-size: .8rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    width: max-content;
}
.ky-feature-area .ky-area-dot { background: var(--ky-accent); }
.ky-feature-title {
    font-family: var(--ky-font-en-serif); font-weight: 600;
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
    line-height: 1.18;
    letter-spacing: -0.01em;
    color: white;
    text-shadow: 0 2px 12px rgba(0,0,0,.35);
    margin: 0;
}
[data-lang="zh-Hant"] .ky-feature-title { font-family: var(--ky-font-zh-serif); line-height: 1.3; letter-spacing: 0; }
.ky-feature-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
    color: rgba(255, 255, 255, .82); font-size: .88rem;
}
.ky-feature-meta .ky-meta-sep { color: rgba(255, 255, 255, .4); }
.ky-feature-excerpt {
    color: rgba(255, 255, 255, .92);
    font-size: clamp(.95rem, 1.1vw, 1.05rem);
    line-height: 1.55;
    margin: 0;
    text-shadow: 0 1px 6px rgba(0,0,0,.3);
}

@media (max-width: 880px) {
    .ky-feature { aspect-ratio: 4 / 5; }
    .ky-feature-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        row-gap: .65rem;
    }
    .ky-feature-area    { grid-column: 1; grid-row: auto; }
    .ky-feature-title   { grid-column: 1; grid-row: auto; }
    .ky-feature-meta    { grid-column: 1; grid-row: auto; }
    .ky-feature-excerpt { grid-column: 1; grid-row: auto; align-self: auto; }
    .ky-feature-excerpt { font-size: .95rem; }
    .ky-feature-title { font-size: clamp(1.4rem, 6vw, 2rem); }
}

/* ---------- 9. Post cards ---------- */
.ky-card-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ky-card-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) { .ky-card-grid--3 { grid-template-columns: 1fr; } }

.ky-card { background: transparent; transition: transform .25s var(--ky-ease); }
.ky-card:hover { transform: translateY(-2px); }
.ky-card-link { display: flex; flex-direction: column; gap: .9rem; color: inherit; }
.ky-card-image { position: relative; margin: 0; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--ky-radius); background: var(--ky-bg-alt); }
.ky-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ky-ease); }
.ky-card:hover .ky-card-image img { transform: scale(1.04); }
.ky-card-image--placeholder {
    background: linear-gradient(135deg, var(--ky-bg-alt), var(--ky-line));
    position: relative;
}
.ky-card-image--placeholder::after {
    content: '九';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--ky-font-zh-serif);
    font-size: 4rem; color: var(--ky-line);
}
.ky-card-body { display: flex; flex-direction: column; gap: .5rem; }
.ky-card-area, .ky-card-area--hero {
    display: inline-flex; align-items: center; gap: .4rem;
    color: var(--ky-accent); font-size: .8rem;
    font-weight: 600; letter-spacing: .03em;
    text-transform: uppercase;
}
.ky-area-dot {
    display: inline-block; width: 6px; height: 6px;
    border-radius: 50%; background: var(--ky-accent);
}
.ky-card-title {
    font-family: var(--ky-font-en-serif); font-weight: 600;
    font-size: 1.2rem; line-height: 1.3;
}
[data-lang="zh-Hant"] .ky-card-title { font-family: var(--ky-font-zh-serif); line-height: 1.5; }
.ky-card-excerpt { color: var(--ky-ink-soft); font-size: .92rem; margin: 0; }
.ky-card-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; color: var(--ky-ink-mute); font-size: .82rem; }
.ky-meta-sep { color: var(--ky-line); }
.ky-card--small .ky-card-image { aspect-ratio: 16/10; }
.ky-card--small .ky-card-title { font-size: 1.05rem; }

/* Compact cards (used in "More from this area"):
   No excerpt, fixed 3:2 landscape, image fills via object-fit cover (no distortion). */
.ky-card--compact .ky-card-image {
    aspect-ratio: 3 / 2;
}
.ky-card--compact .ky-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- 10. Areas grid (Kyushu prefectures) ---------- */
.ky-areas { margin: clamp(3.5rem, 6vw, 5.5rem) 0; }
.ky-area-grid {
    display: grid;
    gap: clamp(.85rem, 1.5vw, 1.25rem);
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 980px) { .ky-area-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .ky-area-grid { grid-template-columns: repeat(2, 1fr); } }

.ky-area-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--ky-radius);
    overflow: hidden;
    color: white;
    isolation: isolate;
    box-shadow: var(--ky-shadow-soft);
    transition: transform .3s var(--ky-ease), box-shadow .3s var(--ky-ease);
}
.ky-area-tile:hover { transform: translateY(-3px); box-shadow: var(--ky-shadow-lift); color: white; }
.ky-area-tile-bg, .ky-area-tile-img {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%;
    background-size: cover; background-position: center;
    object-fit: cover;
    transition: transform .8s var(--ky-ease);
}
.ky-area-tile:hover .ky-area-tile-bg,
.ky-area-tile:hover .ky-area-tile-img { transform: scale(1.08); }
.ky-area-tile-overlay {
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to top, rgba(20, 16, 12, 0.85) 0%, rgba(20, 16, 12, 0.25) 60%, rgba(20, 16, 12, 0.1) 100%);
}
.ky-area-tile-content {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 1.1rem 1rem 1rem;
    display: flex; flex-direction: column; gap: .25rem;
}
.ky-area-tile-name {
    font-family: var(--ky-font-zh-serif);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.ky-area-tile-desc {
    font-size: .82rem;
    opacity: .92;
    line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ky-area-tile-count {
    margin-top: .25rem;
    font-size: .72rem;
    opacity: .8;
    letter-spacing: .05em;
}

/* Default fallback when a tag has no feature image. Monochrome — the user's
   tag photos do the talking. Each prefecture gets a slightly different
   light-to-dark range so the grid still has visual variety. */
.ky-area-tile-bg--fukuoka   { background: linear-gradient(135deg, #525252, #262626); }
.ky-area-tile-bg--saga      { background: linear-gradient(135deg, #404040, #1A1A1A); }
.ky-area-tile-bg--nagasaki  { background: linear-gradient(135deg, #595959, #2D2D2D); }
.ky-area-tile-bg--kumamoto  { background: linear-gradient(160deg, #4A4A4A, #1F1F1F); }
.ky-area-tile-bg--oita      { background: linear-gradient(135deg, #4D4D4D, #232323); }
.ky-area-tile-bg--miyazaki  { background: linear-gradient(135deg, #383838, #161616); }
.ky-area-tile-bg--kagoshima { background: linear-gradient(160deg, #2E2E2E, #0A0A0A); }
.ky-area-tile-bg--okinawa   { background: linear-gradient(135deg, #5C5C5C, #2C2C2C); }
.ky-area-tile-bg--others    { background: linear-gradient(135deg, #444444, #1C1C1C); }

/* ---------- 11. Tag/area landing hero ---------- */
.ky-tag-hero {
    margin: -1.5rem calc(-1 * var(--ky-gutter)) clamp(2rem, 4vw, 3.5rem);
    padding: clamp(3rem, 6vw, 5rem) var(--ky-gutter);
    background: var(--ky-bg-alt);
    text-align: center;
    border-bottom: 1px solid var(--ky-line);
}
.ky-tag-hero--image { color: white; position: relative; overflow: hidden; padding: clamp(5rem, 10vw, 8rem) var(--ky-gutter); }
.ky-tag-hero-image {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%; object-fit: cover;
}
.ky-tag-hero--image::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(20,16,12,.7), rgba(20,16,12,.35));
}
.ky-tag-hero-content { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.ky-tag-hero-title {
    font-family: var(--ky-font-zh-serif);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 600;
    margin-top: .5rem;
}
.ky-tag-hero-desc { color: var(--ky-ink-soft); margin-top: .5rem; font-size: 1.02rem; }
.ky-tag-hero--image .ky-tag-hero-desc { color: rgba(255,255,255,.92); }
.ky-tag-hero-count { color: var(--ky-ink-mute); margin-top: 1rem; font-size: .85rem; letter-spacing: .05em; }
.ky-tag-hero--image .ky-tag-hero-count { color: rgba(255,255,255,.7); }

/* Archive head */
.ky-archive-head { margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--ky-line); }
.ky-archive-title { font-family: var(--ky-font-en-serif); font-size: clamp(2rem, 4vw, 2.75rem); margin-top: .35rem; }
[data-lang="zh-Hant"] .ky-archive-title { font-family: var(--ky-font-zh-serif); }

/* ---------- 12. Article (single post) ---------- */
.ky-main--post { max-width: 920px; }
.ky-article { padding: 0; }
.ky-article-header {
    max-width: var(--ky-reading-w);
    margin: 0 auto 2rem;
    text-align: left;
}
.ky-article-area {
    display: inline-flex; align-items: center; gap: .4rem;
    color: var(--ky-accent); font-size: .82rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    margin-bottom: .75rem;
}
.ky-article-area--light { color: white; }
.ky-article-title {
    font-family: var(--ky-font-en-serif);
    font-size: clamp(1.85rem, 4.5vw, 3.1rem);
    font-weight: 600; line-height: 1.2;
    margin: 0 0 .8rem;
    letter-spacing: -0.015em;
}
[data-lang="zh-Hant"] .ky-article-title { font-family: var(--ky-font-zh-serif); line-height: 1.35; letter-spacing: 0; }
.ky-article-excerpt { color: var(--ky-ink-soft); font-size: 1.1rem; line-height: 1.55; margin-bottom: 1.5rem; }
.ky-article-meta {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .55rem; color: var(--ky-ink-mute); font-size: .88rem;
    margin-bottom: 1rem;
}
.ky-article-meta--light { color: rgba(255,255,255,.8); }

/* Feature image breaks out of the 720px reading column to use the article's
   full 920px width. Aspect ratio is always preserved (no cropping). */
.ky-article-feature {
    margin: clamp(2rem, 4vw, 3rem) 0;
    max-width: 100%;
    display: block;
}
.ky-article-feature img {
    display: block;
    border-radius: var(--ky-radius-lg);
    width: 100%;
    height: auto;
    max-width: 100%;
}
.ky-article-feature figcaption {
    color: var(--ky-ink-mute);
    font-size: .85rem;
    text-align: center;
    margin-top: .65rem;
    font-style: italic;
}
.ky-article-feature figcaption { color: var(--ky-ink-mute); font-size: .85rem; text-align: center; margin-top: .65rem; font-style: italic; }

.ky-article-footer { max-width: var(--ky-reading-w); margin: clamp(2rem,4vw,3rem) auto 0; padding-top: 1.5rem; border-top: 1px solid var(--ky-line); }
.ky-tag-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.ky-tag-list:empty { display: none; }
.ky-article-footer:has(.ky-tag-list:empty) { display: none; }
.ky-tag-chip {
    display: inline-block; padding: .35rem .8rem;
    background: var(--ky-bg-alt); color: var(--ky-ink-soft);
    border-radius: var(--ky-radius-pill); font-size: .82rem;
    transition: background .2s var(--ky-ease), color .2s var(--ky-ease);
}
.ky-tag-chip:hover { background: var(--ky-accent); color: white; }

/* ---------- 13. Post content (gh-content) ---------- */
.ky-content {
    max-width: var(--ky-reading-w); margin: 0 auto;
    font-size: 1.06rem; line-height: 1.78;
}
[data-lang="zh-Hant"] .ky-content { line-height: 1.95; }
.ky-content > * { margin-bottom: 1.4em; }
.ky-content h2, .ky-content h3, .ky-content h4 {
    font-family: var(--ky-font-en-serif); font-weight: 600;
    margin-top: 2.4em; margin-bottom: .6em; line-height: 1.3;
}
[data-lang="zh-Hant"] .ky-content h2,
[data-lang="zh-Hant"] .ky-content h3,
[data-lang="zh-Hant"] .ky-content h4 { font-family: var(--ky-font-zh-serif); }
.ky-content h2 { font-size: 1.65rem; }
.ky-content h3 { font-size: 1.3rem; }
.ky-content h4 { font-size: 1.1rem; }

.ky-content a { color: var(--ky-accent); border-bottom: 1px solid color-mix(in srgb, var(--ky-accent) 35%, transparent); transition: border-color .2s var(--ky-ease); }
.ky-content a:hover { border-bottom-color: var(--ky-accent); }

.ky-content blockquote {
    margin: 2em 0; padding: .35em 1.2em;
    border-left: 3px solid var(--ky-accent);
    color: var(--ky-ink-soft); font-style: italic;
}
[data-lang="zh-Hant"] .ky-content blockquote { font-style: normal; padding: .35em 1.4em; }

.ky-content img, .ky-content iframe, .ky-content video {
    border-radius: var(--ky-radius); margin: 1.5em auto;
}
.ky-content figure { margin: 2em 0; }
.ky-content figcaption { color: var(--ky-ink-mute); font-size: .85rem; text-align: center; margin-top: .65rem; font-style: italic; }

.ky-content code { background: var(--ky-bg-alt); padding: .15em .4em; border-radius: 4px; font-family: var(--ky-font-mono); font-size: .9em; }
.ky-content pre { background: var(--ky-bg-alt); padding: 1.15rem 1.25rem; border-radius: var(--ky-radius); overflow-x: auto; }
.ky-content pre code { background: transparent; padding: 0; }

.ky-content hr { border: 0; border-top: 1px solid var(--ky-line); margin: 2.5em auto; max-width: 60%; }

/* Wide / full-width Ghost cards */
.ky-content .kg-width-wide { width: min(100%, 920px); margin-left: 50%; transform: translateX(-50%); }
.ky-content .kg-width-full { width: 100vw; margin-left: 50%; transform: translateX(-50%); border-radius: 0; }
.ky-content .kg-width-full img { border-radius: 0; }

/* Bookmark card */
.ky-content .kg-bookmark-card { border: 1px solid var(--ky-line); border-radius: var(--ky-radius); overflow: hidden; }
.ky-content .kg-bookmark-container { display: flex; color: inherit; border-bottom: 0; }
.ky-content .kg-bookmark-content { padding: 1rem 1.2rem; flex: 1; }
.ky-content .kg-bookmark-title { font-weight: 600; }
.ky-content .kg-bookmark-description { color: var(--ky-ink-soft); font-size: .9rem; margin-top: .25rem; }

/* ---------- 14. Related posts, comments ---------- */
.ky-related, .ky-comments { margin: clamp(3rem, 6vw, 5rem) auto 0; max-width: var(--ky-content-w); }
.ky-related .ky-section-title, .ky-comments .ky-section-title {
    text-align: center; margin-bottom: 1.75rem;
    font-size: clamp(1.3rem, 2.5vw, 1.7rem);
}

/* ---------- 15. Newsletter ---------- */
.ky-newsletter {
    margin-top: clamp(3.5rem, 7vw, 6rem);
    padding: clamp(2.5rem, 5vw, 4.5rem) var(--ky-gutter);
    background: var(--ky-ink); color: var(--ky-bg);
    border-radius: var(--ky-radius-lg);
    text-align: center;
    background-image: radial-gradient(circle at 0% 100%, rgba(200, 75, 49, 0.18) 0%, transparent 50%);
}
.ky-newsletter-inner { max-width: 540px; margin: 0 auto; }
.ky-newsletter-title { font-family: var(--ky-font-en-serif); font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .5rem; }
[data-lang="zh-Hant"] .ky-newsletter-title { font-family: var(--ky-font-zh-serif); }
.ky-newsletter-text { color: rgba(251, 247, 240, .75); margin-bottom: 1.5rem; font-size: 1rem; }
.ky-newsletter .ky-btn { background: var(--ky-accent); color: white; }
.ky-newsletter .ky-btn:hover { background: white; color: var(--ky-ink); }

/* ---------- 16. Author hero ---------- */
.ky-author-hero { text-align: center; padding: 2.5rem 0 2rem; border-bottom: 1px solid var(--ky-line); margin-bottom: 2.5rem; }
.ky-author-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; }
.ky-author-name { font-family: var(--ky-font-en-serif); font-size: 2rem; }
[data-lang="zh-Hant"] .ky-author-name { font-family: var(--ky-font-zh-serif); }
.ky-author-bio { color: var(--ky-ink-soft); max-width: 540px; margin: .5rem auto 1rem; }
.ky-author-links { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; color: var(--ky-ink-mute); font-size: .9rem; }

/* ---------- 17. Pagination ---------- */
.ky-pagination { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 3rem auto 1rem; padding-top: 1.5rem; border-top: 1px solid var(--ky-line); flex-wrap: wrap; }
.ky-pagination-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .55rem 1rem; border: 1px solid var(--ky-line); border-radius: var(--ky-radius-pill); font-size: .9rem; transition: background .2s var(--ky-ease); }
.ky-pagination-btn:hover { background: var(--ky-bg-alt); color: var(--ky-ink); }
.ky-pagination-btn--disabled { opacity: .4; pointer-events: none; }
.ky-pagination-info { color: var(--ky-ink-mute); font-size: .88rem; }

/* ---------- 18. Immersive post template ---------- */
.ky-main--immersive { max-width: 100%; padding: 0; }
.ky-immersive-hero {
    position: relative;
    min-height: 70vh;
    background-size: cover; background-position: center;
    color: white;
    display: flex; align-items: flex-end;
}
.ky-immersive-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,16,12,.75) 0%, rgba(20,16,12,.25) 60%, rgba(20,16,12,.0) 100%); }
.ky-immersive-hero-inner {
    position: relative; z-index: 1;
    max-width: var(--ky-reading-w);
    width: 100%;
    margin: 0 auto;
    padding: 4rem var(--ky-gutter) 3rem;
}
.ky-immersive-title { font-family: var(--ky-font-zh-serif); font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 600; line-height: 1.15; margin: 1rem 0 .75rem; }
.ky-immersive-excerpt { font-size: 1.1rem; opacity: .9; max-width: 680px; }
.ky-article--immersive .ky-content { padding: clamp(2rem, 4vw, 3rem) var(--ky-gutter); }

/* ---------- 19. Footer ---------- */
.ky-foot {
    position: relative;
    margin-top: clamp(3rem, 6vw, 5rem);
    padding: clamp(2.5rem, 4vw, 3.5rem) var(--ky-gutter) 2rem;
    background: var(--ky-bg-alt);
    border-top: 1px solid var(--ky-line);
}
.ky-foot-inner {
    max-width: var(--ky-content-w); margin: 0 auto;
    display: grid; gap: 2rem;
    grid-template-columns: 1.4fr auto 1fr;
    align-items: center;
}
.ky-foot-title { font-family: var(--ky-font-en-serif); font-size: 1.25rem; font-weight: 600; margin: 0 0 .35rem; }
[data-lang="zh-Hant"] .ky-foot-title { font-family: var(--ky-font-zh-serif); }
.ky-foot-tagline { color: var(--ky-ink-mute); font-size: .9rem; margin: 0; }
.ky-foot-right { display: flex; flex-direction: column; align-items: flex-end; gap: .65rem; }
.ky-foot-nav, .ky-foot-mobilenav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; justify-content: flex-end; }
.ky-foot-nav a, .ky-foot-mobilenav a { color: var(--ky-ink-soft); font-size: .9rem; }
.ky-foot-nav a:hover, .ky-foot-mobilenav a:hover { color: var(--ky-accent); }
.ky-foot-mobilenav { display: none; }
.ky-foot-meta { font-size: .82rem; color: var(--ky-ink-mute); text-align: right; }
.ky-copyright { margin: 0 0 .35rem; }
.ky-foot-rss { color: var(--ky-ink-mute); border-bottom: 1px solid currentColor; padding-bottom: 1px; font-size: .82rem; letter-spacing: .12em; }

@media (max-width: 880px) {
    .ky-foot-inner {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        text-align: center;
    }
    .ky-foot-brand { text-align: center; }
    .ky-foot-mobilenav {
        display: flex;
        flex-wrap: wrap;
        gap: .35rem 1.5rem;
        justify-content: center;
        font-size: 1rem;
        padding: 1rem 0;
        border-top: 1px solid var(--ky-line);
        border-bottom: 1px solid var(--ky-line);
    }
    .ky-foot-mobilenav a { font-size: 1rem; }
    .ky-foot-right { align-items: center; }
    .ky-foot-nav { justify-content: center; }
    .ky-foot-meta { text-align: center; }
}

/* ---------- 20. Error ---------- */
.ky-error { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.ky-error-inner { text-align: center; max-width: 480px; }
.ky-error-code { font-family: var(--ky-font-en-serif); font-size: 5rem; font-weight: 600; color: var(--ky-accent); margin: 0; line-height: 1; }
.ky-error-title { font-family: var(--ky-font-en-serif); font-size: 2rem; margin: 1rem 0; }
[data-lang="zh-Hant"] .ky-error-title { font-family: var(--ky-font-zh-serif); }
.ky-error-message { color: var(--ky-ink-soft); margin-bottom: 1.5rem; }

/* ---------- 21. Mobile head ---------- */
@media (max-width: 880px) {
    .ky-tagline { display: none; }
    .ky-nav { display: none; }
    .ky-head-inner { grid-template-columns: 1fr auto; }
    .ky-head-actions { gap: .35rem; }
}

/* ---------- 22. Print ---------- */
@media print {
    .ky-head, .ky-foot, .ky-newsletter, .ky-related, .ky-comments, .ky-pagination, .ky-burger, .ky-lang { display: none !important; }
    body { background: white; color: black; }
    .ky-article-feature img { max-height: 50vh; }
}

/* ---------- 23. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    html { scroll-behavior: auto; }
}

/* ---------- 24. Empty / utility ---------- */
.ky-empty-note { text-align: center; color: var(--ky-ink-mute); padding: 2rem; background: var(--ky-bg-alt); border-radius: var(--ky-radius); }

/* ---------- 25. Brand mark + decorative motifs ---------- */
.ky-mark { width: 100%; height: 100%; }
.ky-mark path { fill: currentColor; }

.ky-logo {
    display: inline-flex; align-items: center; gap: .55rem;
}
.ky-logo-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    color: var(--ky-accent);
    transition: transform .6s var(--ky-ease);
}
.ky-logo:hover .ky-logo-mark { transform: rotate(-12deg) scale(1.05); }

/* Decorative brush stroke — fixed to the bottom-right of the viewport so it
   stays visible while the user scrolls. Sits BENEATH all content via z-index: -1
   (paints between body's background and the document's normal-flow children).
   Pointer-events disabled so it never blocks clicks. */
.ky-fixed-deco {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: clamp(330px, 39vw, 540px);
    height: clamp(330px, 39vw, 540px);
    color: var(--ky-accent);
    opacity: .08;
    transform: rotate(18deg);
    transform-origin: 80% 80%;
    pointer-events: none;
    z-index: -1;
}
.ky-color-dark .ky-fixed-deco,
.ky-color-auto .ky-fixed-deco { opacity: .14; }


/* Hide on very small viewports where it'd compete with content readability. */
@media (max-width: 520px) {
    .ky-fixed-deco {
        width: clamp(260px, 70vw, 320px);
        height: clamp(260px, 70vw, 320px);
        opacity: .06;
    }
}

/* Prevent horizontal scroll caused by the oversized decorative element.
   `overflow-x: clip` clips the rendering without creating a scroll container,
   so position: sticky on the header keeps working. */
html, body { overflow-x: clip; }
.ky-site { overflow-x: clip; }

/* Brush-stroke section divider — draws a thin animated wash line */
.ky-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ky-line) 20%, var(--ky-line) 80%, transparent);
    margin: clamp(2rem, 4vw, 3.5rem) 0;
}

/* ---------- 26. Social media icons (centered in footer) ---------- */
.ky-foot-social {
    display: flex; gap: .9rem;
    align-items: center; justify-content: center;
}
.ky-foot-social:empty { display: none; }
.ky-foot-social-link {
    width: 46px; height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: var(--ky-ink-soft);
    background: var(--ky-bg-card);
    border: 1px solid var(--ky-line);
    transition: transform .25s var(--ky-ease), color .2s var(--ky-ease), background .2s var(--ky-ease), border-color .2s var(--ky-ease);
}
.ky-foot-social-link svg { width: 22px; height: 22px; }
.ky-foot-social-link:hover {
    color: white;
    background: var(--ky-accent);
    border-color: var(--ky-accent);
    transform: translateY(-2px);
}

/* ---------- 27. Parallax + reveal animations ---------- */
/* Parallax — uses a CSS variable `--ky-parallax-y` set by JS on scroll.
   We use the `translate` property (not `transform: translate3d`) so it
   composes with `scale`/`rotate` on the same element instead of overriding. */
.ky-parallax-image {
    will-change: transform;
    translate: 0 var(--ky-parallax-y, 0px);
}

/* Reveal-on-scroll — opacity 0 → 1, slight rise. Disabled if user prefers reduced motion. */
.ky-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ky-ease), transform .7s var(--ky-ease);
}
.ky-reveal.is-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .ky-reveal { opacity: 1 !important; transform: none !important; }
    .ky-parallax-image { transform: none !important; }
}

/* Stagger when multiple children reveal at once */
.ky-card-grid > .ky-reveal:nth-child(2) { transition-delay: .07s; }
.ky-card-grid > .ky-reveal:nth-child(3) { transition-delay: .14s; }
.ky-card-grid > .ky-reveal:nth-child(4) { transition-delay: .21s; }
.ky-area-grid > .ky-reveal:nth-child(2) { transition-delay: .05s; }
.ky-area-grid > .ky-reveal:nth-child(3) { transition-delay: .10s; }
.ky-area-grid > .ky-reveal:nth-child(4) { transition-delay: .15s; }
.ky-area-grid > .ky-reveal:nth-child(5) { transition-delay: .20s; }
.ky-area-grid > .ky-reveal:nth-child(6) { transition-delay: .25s; }
.ky-area-grid > .ky-reveal:nth-child(7) { transition-delay: .30s; }
.ky-area-grid > .ky-reveal:nth-child(8) { transition-delay: .35s; }

/* ---------- 28. Hero refinement (extra eye-catch) ---------- */
.ky-hero { position: relative; }
.ky-hero::before {
    content: '';
    position: absolute;
    top: -2.5rem; left: -2rem;
    width: 80px; height: 80px;
    background: var(--ky-accent);
    border-radius: 50%;
    opacity: .06;
    z-index: 0;
    pointer-events: none;
}
.ky-card-hero { position: relative; z-index: 1; }
.ky-card-hero-image { overflow: hidden; }
.ky-card-hero-badge {
    /* layered sticker style with a subtle tilt */
    transform: rotate(-3deg);
    border-radius: var(--ky-radius);
}

/* On-hover lift on area tiles — already there, slightly enhanced */
.ky-area-tile {
    transform-origin: center bottom;
}
.ky-area-tile::after {
    content: '';
    position: absolute; left: 0; right: 0; top: 0; bottom: 0;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: inherit;
    pointer-events: none;
    opacity: 0; transition: opacity .25s var(--ky-ease);
}
.ky-area-tile:hover::after { opacity: 1; }

/* Page head decoration — small mark next to titles */
.ky-section-head { position: relative; }
.ky-section-title::before {
    content: '';
    display: inline-block;
    width: 8px; height: 8px;
    margin-right: .65rem;
    background: var(--ky-accent);
    border-radius: 50%;
    transform: translateY(-3px);
}
.ky-section-title--hero::before { display: none; }