/* ============================================================
   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; }


/* ============================================================
   AdSense — Auto Ads styling
   ------------------------------------------------------------
   Goals (from Google's "Best practices for ad placement" + 2026
   in-content placement research):
     1. Viewable, but never break the reading flow.
     2. Always disclose with a small "Advertisement" label
        (AdSense policy + reader trust).
     3. CLS-safe: reserve a minimum block so the article doesn't
        jump when an ad paints.
     4. Stay inside the 720px reading column on post pages.
     5. Hide ads on the immersive template, error pages,
        and any post/page tagged #no-ads.
   The ".adsbygoogle" class is what Google's Auto Ads loader
   injects on inserted units, so styling it covers everything
   without us having to wrap every slot manually.
   ============================================================ */

.adsbygoogle {
    display: block;
    /* CLS guard. Google replaces this with the real ad size. */
    min-height: 90px;
    /* Breathing room so ads feel like a pause, not an interruption. */
    margin: 2.25rem auto;
    /* Keep ads inside the reading column even when they appear
       inside .gh-content (which is 720px wide already). */
    max-width: 100%;
    /* Subtle frame — a hairline that visually disambiguates ad from content. */
    background: var(--ky-bg-alt);
    border: 1px solid var(--ky-line-soft);
    border-radius: var(--ky-radius);
    /* "Advertisement" disclosure handled by ::before below. */
    padding: 1.5rem 1rem 1rem;
    position: relative;
    /* Smooth fade-in once the ad loads, so it doesn't pop. */
    transition: opacity .35s var(--ky-ease);
}

/* When Google has filled the slot, .adsbygoogle gets a
   data-ad-status="filled" attribute. Drop the placeholder frame
   so the real ad creative breathes. */
.adsbygoogle[data-ad-status="filled"] {
    background: transparent;
    border-color: transparent;
    padding: 0;
}

/* Hide entirely when Google reports "unfilled" — no empty box. */
.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}

/* The "Advertisement" disclosure label. Bilingual to match the rest
   of the theme's bilingual chrome. */
.adsbygoogle::before {
    content: "廣告 · Advertisement";
    position: absolute;
    top: .35rem;
    left: 1rem;
    font-family: var(--gh-font-body, var(--ky-font-en));
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ky-ink-mute);
    pointer-events: none;
}
.adsbygoogle[data-ad-status="filled"]::before {
    /* Once filled, show the label above the real ad so the unit
       is identifiable but the frame is gone. */
    position: relative;
    display: block;
    top: 0; left: 0;
    margin: 0 0 .35rem;
    text-align: center;
}

/* In-article ads live inside .gh-content; honour the reading column
   and add a touch more vertical rhythm so the ad reads as a section
   break, not a pop-up. */
.ky-content .adsbygoogle,
.gh-content .adsbygoogle {
    margin: 2.75rem auto;
}

/* On the home/index/tag/author listings, ads inserted by Auto Ads
   in-feed should match the card grid rhythm. */
.ky-card-grid .adsbygoogle {
    margin: 0;
    min-height: 250px;
}

/* Sidebar / anchor / vignette overlay units — let Google place them
   but keep them out of the way of our sticky header on desktop. */
ins.adsbygoogle[data-anchor-status] {
    z-index: 90;
}

/* Suppress Auto Ads anywhere the publisher / theme has opted out:
     - Immersive post template (cinematic full-bleed essays)
     - Error / 404 pages
     - Posts or pages tagged #no-ads
   We hide both .adsbygoogle and Google's injected overlay containers. */
.post-template-custom-immersive .adsbygoogle,
.post-template-custom-immersive ins.adsbygoogle,
.post-template-custom-immersive iframe[id^="aswift_"],
.post-template-custom-immersive iframe[id^="google_ads_"],
.error-template .adsbygoogle,
.ky-ads-off .adsbygoogle,
.ky-ads-off ins.adsbygoogle,
.ky-ads-off iframe[id^="aswift_"],
.ky-ads-off iframe[id^="google_ads_"] {
    display: none !important;
}

/* Dark mode — soften the placeholder frame so it doesn't glow. */
.ky-color-dark .adsbygoogle:not([data-ad-status="filled"]),
.ky-color-auto[data-color-scheme="dark"] .adsbygoogle:not([data-ad-status="filled"]) {
    background: rgba(255,255,255,0.02);
    border-color: var(--ky-line);
}
@media (prefers-color-scheme: dark) {
    .ky-color-auto .adsbygoogle:not([data-ad-status="filled"]) {
        background: rgba(255,255,255,0.02);
        border-color: var(--ky-line);
    }
}

/* Respect reduced motion — drop the fade-in for users who asked us to. */
@media (prefers-reduced-motion: reduce) {
    .adsbygoogle { transition: none; }
}