/*
 * Pickleland 匹克島 — Editorial Magazine Theme
 * Editorial magazine aesthetic for pickleball
 *
 * Design principles:
 * 1. Editorial typography hierarchy with system-first serif/sans stacks
 * 2. Generous whitespace, thin hairline rules, no gimmicky effects
 * 3. Warm cream palette (#faf5ee) + deep charcoal (#141414) + restrained sage (#4f7259)
 * 4. Small-caps eyebrows with wide letter-spacing for category markers
 * 5. Asymmetric magazine grid — hero story + editorial feed
 */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    /* Warm editorial palette */
    --ink:            #141414;  /* Near-black headlines & body */
    --ink-soft:       #3a3632;  /* Softened body text */
    --ink-muted:      #8c847c;  /* Metadata / eyebrows */
    --ink-faint:      #b9b1a8;  /* Dividers */

    --paper:          #faf5ee;  /* Warm cream background */
    --paper-deep:     #f2ebe0;  /* Slightly deeper card backgrounds */
    --surface:        #ffffff;  /* Pure white panels */

    --hairline:       #e4ddd2;  /* Thin editorial rules */
    --hairline-soft:  #eee7dc;

    /* Accents — restrained */
    --sage:           #4f7259;  /* Brand sage */
    --sage-deep:      #3a5442;
    --bronze:         #9b7653;  /* Editorial caramel accent */
    --ember:          #c2410c;  /* Hot CTA (rare) */
    --line-green:     #06C755;  /* LINE brand */

    /* Legacy tokens (backward compatibility) */
    --color-bg:            var(--paper);
    --color-bg-subtle:     var(--paper-deep);
    --color-surface:       var(--surface);
    --color-text:          var(--ink);
    --color-text-secondary: var(--ink-soft);
    --color-muted:         var(--ink-muted);
    --color-border:        var(--hairline);
    --color-border-subtle: var(--hairline-soft);
    --color-accent:        var(--sage);
    --color-accent-hover:  var(--sage-deep);
    --color-on-accent:     #ffffff;
    --color-brand:         var(--sage);
    --color-brand-light:   #6b9476;
    --color-brand-dark:    var(--sage-deep);
    --color-bg-alt:        var(--paper-deep);
    --color-text-light:    var(--ink-soft);
    --color-text-lighter:  var(--ink-muted);
    --color-cta:           var(--ember);
    --color-cta-hover:     #9a3412;

    /* Typography stack */
    --font-display:   'Lora', 'Noto Serif TC', 'Songti TC', Georgia, serif;
    --font-serif:     'Lora', 'Noto Serif TC', 'Songti TC', Georgia, serif;
    --font-body:      'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Microsoft JhengHei', 'Segoe UI', sans-serif;
    --font-sans:      var(--font-body);
    --font-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

    /* Legacy */
    --font-title-zh:  var(--font-serif);
    --font-title-en:  var(--font-display);
    --font-body-zh:   var(--font-body);
    --font-body-en:   var(--font-body);

    /* Type scale (editorial: large contrasts) */
    --fs-xs:    0.75rem;     /* 12px — eyebrow */
    --fs-sm:    0.875rem;    /* 14px — meta */
    --fs-base:  1.0625rem;   /* 17px — body */
    --fs-lg:    1.25rem;     /* 20px — lede */
    --fs-xl:    1.5rem;      /* 24px */
    --fs-2xl:   2rem;        /* 32px — section head */
    --fs-3xl:   2.75rem;     /* 44px — feature card title */
    --fs-4xl:   3.75rem;     /* 60px — magazine subhead */
    --fs-hero:  5.5rem;      /* 88px — hero display */

    /* Legacy size aliases */
    --font-size-xs:   var(--fs-xs);
    --font-size-sm:   var(--fs-sm);
    --font-size-base: var(--fs-base);
    --font-size-lg:   var(--fs-lg);
    --font-size-xl:   var(--fs-xl);
    --font-size-2xl:  var(--fs-2xl);
    --font-size-3xl:  var(--fs-3xl);
    --font-size-4xl:  var(--fs-4xl);

    /* Line heights */
    --lh-tight:   1.05;
    --lh-snug:    1.2;
    --lh-normal:  1.5;
    --lh-relaxed: 1.75;
    --lh-loose:   2;

    --leading-tight:   var(--lh-tight);
    --leading-snug:    var(--lh-snug);
    --leading-normal:  var(--lh-normal);
    --leading-relaxed: var(--lh-relaxed);

    /* Letter-spacing (tracking) */
    --tr-tighter: -0.03em;
    --tr-tight:   -0.02em;
    --tr-normal:  0;
    --tr-wide:    0.08em;   /* eyebrow small caps */
    --tr-wider:   0.14em;   /* section labels */
    --tr-widest:  0.22em;   /* logo / all-caps display */

    --tracking-tight:  var(--tr-tight);
    --tracking-snug:   var(--tr-tight);
    --tracking-wide:   var(--tr-wide);
    --tracking-wider:  var(--tr-wider);

    /* Spacing scale */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* Legacy alias: note the overlap between new and old naming. */
    --spacing-1:  var(--space-1);
    --spacing-2:  var(--space-2);
    --spacing-3:  var(--space-3);
    --spacing-4:  var(--space-4);
    --spacing-5:  var(--space-5);
    --spacing-6:  var(--space-6);
    --spacing-8:  var(--space-8);
    --spacing-10: var(--space-10);
    --spacing-12: var(--space-12);
    --spacing-16: var(--space-16);
    --spacing-20: var(--space-20);
    --space-xs:  var(--space-2);
    --space-sm:  var(--space-4);
    --space-md:  var(--space-6);
    --space-lg:  var(--space-10);
    --space-xl:  var(--space-16);
    --space-2xl: var(--space-24);

    /* Layout */
    --content-width: 680px;
    --wide-width:    1240px;
    --max-width:     1440px;
    --nav-height:    72px;

    /* Radius (subtle only) */
    --radius:    0;            /* Editorial: mostly sharp corners */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;

    /* Transitions */
    --transition:      0.25s cubic-bezier(.2,.7,.3,1);
    --transition-fast: 0.15s cubic-bezier(.2,.7,.3,1);
    --transition-base: 0.2s cubic-bezier(.2,.7,.3,1);
}


/* ============================================================
   RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    max-width: 100%;
    overflow-x: clip;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
    color: var(--ink-soft);
    background: var(--paper);
    min-height: 100vh;
    max-width: 100%;
    overflow-x: clip;
}

@supports not (overflow: clip) {
    html,
    body {
        overflow-x: hidden;
    }
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast), opacity var(--transition-fast);
}

a:hover {
    color: var(--sage);
}

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

ul, ol { list-style: none; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: var(--lh-tight);
    letter-spacing: var(--tr-tight);
    font-weight: 700;
    color: var(--ink);
}

::selection {
    background: var(--ink);
    color: var(--paper);
}


/* ============================================================
   EDITORIAL UTILITIES
   ============================================================ */

/* Eyebrow: the signature editorial label — small caps, wide tracking */
.eyebrow,
.pl-eyebrow {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tr-widest);
    color: var(--sage);
    display: inline-block;
}

.eyebrow--ink { color: var(--ink); }
.eyebrow--bronze { color: var(--bronze); }

/* Byline in italic serif */
.byline-italic {
    font-family: var(--font-serif);
    font-style: normal;
    font-weight: 400;
    color: var(--ink-soft);
}

/* Hairline divider */
.hairline {
    height: 1px;
    background: var(--hairline);
    border: none;
    margin: 0;
}

.hairline--thick {
    height: 2px;
    background: var(--ink);
}


/* ============================================================
   HEADER — minimalist editorial masthead
   ============================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--hairline);
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--wide-width);
    margin: 0 auto;
    padding: var(--space-5) var(--space-8);
    min-height: var(--nav-height);
}

.site-title {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
}

.site-logo {
    height: 44px;
    width: auto;
    object-fit: contain;
    display: block;
}

.site-title-text {
    display: inline-block;
}

.brand-zh {
    font-family: 'Kaisei Tokumin', serif;
    font-weight: 400;
    font-style: normal;
}

@media (max-width: 680px) {
    .site-logo { height: 38px; }
}

.site-title:hover { color: var(--sage); }

.nav-right {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.nav-links,
.nav-right .nav {
    display: flex;
    gap: var(--space-6);
}

.nav-right .nav li { list-style: none; }

.nav-right .nav a,
.nav-links a {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    padding: var(--space-2) 0;
    position: relative;
    text-decoration: none;
}

.nav-right .nav a::after,
.nav-links a::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(.2,.7,.3,1);
}

.nav-right .nav a:hover,
.nav-links a:hover {
    color: var(--ink);
}

.nav-right .nav a:hover::after,
.nav-links a:hover::after {
    transform: scaleX(1);
}

/* .nav-cta 樣式定義在下方 HOMEPAGE REDESIGN 區塊 */


/* === Nav dropdown menus (desktop hover / mobile tap) === */
.nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.nav-main {
    display: inline-flex;
    align-items: center;
}

.nav-main::after {
    /* override the underline-on-hover effect from .nav-links a::after */
    content: "" !important;
    bottom: 2px !important;
}

.nav-main .nav-caret {
    display: inline-block;
    margin-left: 0.3rem;
    font-size: 0.625rem;
    color: var(--ink-muted);
    transition: transform 0.25s ease;
}

.nav-item:hover .nav-main .nav-caret,
.nav-item.is-open .nav-main .nav-caret {
    transform: rotate(180deg);
}

.nav-dropdown {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: var(--paper);
    border: 1px solid var(--hairline);
    box-shadow: 0 8px 24px rgba(20,20,20,0.10);
    padding: 0.75rem 1rem;
    min-width: 0;
    white-space: nowrap;
    z-index: 100;
    transition: visibility 0.2s, opacity 0.2s, transform 0.2s;
}

@media (hover: hover) {
    .nav-item:hover .nav-dropdown,
    .nav-item:focus-within .nav-dropdown {
        visibility: visible;
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.dropdown-tags {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.dropdown-tag {
    font-family: var(--font-body) !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase;
    color: var(--ink-muted) !important;
    padding: 0 !important;
}

.dropdown-tag::after { display: none !important; }
.dropdown-tag:hover { color: var(--sage) !important; }


.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.nav-toggle-bar {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--ink);
    transition: transform 0.2s ease;
}


/* ============================================================
   HOMEPAGE — Editorial magazine layout
   ============================================================ */
.home-content {
    width: 100%;
}

/* --- HERO: huge editorial cover story --- */
.pl-hero {
    max-width: var(--wide-width);
    margin: 0 auto;
    padding: var(--space-16) var(--space-8) var(--space-12);
    border-bottom: 1px solid var(--hairline);
}

.pl-hero-kicker {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-10);
}

.pl-hero-kicker::before,
.pl-hero-kicker::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--hairline);
}

.pl-hero-kicker-label {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: var(--tr-widest);
    text-transform: uppercase;
    color: var(--ink-muted);
}

.pl-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-16);
    align-items: center;
}

.pl-hero-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--paper-deep);
}

.pl-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(.2,.7,.3,1);
}

.pl-hero-media:hover img {
    transform: scale(1.03);
}

.pl-hero-placeholder {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(135deg, rgba(79,114,89,0.12), rgba(155,118,83,0.10)),
      var(--paper-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-muted);
    font-family: var(--font-display);
    font-style: normal;
    font-size: var(--fs-xl);
}

.pl-hero-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.pl-hero-eyebrow {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: var(--tr-widest);
    text-transform: uppercase;
    color: var(--sage);
}

.pl-hero-title {
    font-family: var(--font-display);
    font-size: clamp(1.0625rem, 2vw, 1.8rem);
    line-height: 1.2;
    letter-spacing: var(--tr-tight);
    color: var(--ink);
    font-weight: 700;
}

.pl-hero-title a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(var(--ink), var(--ink));
    background-size: 0 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.4s cubic-bezier(.2,.7,.3,1);
}

.pl-hero-title a:hover {
    background-size: 100% 1px;
}

.pl-hero-dek {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: var(--fs-lg);
    line-height: 1.5;
    color: var(--ink-soft);
    font-weight: 400;
}

.pl-hero-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--ink-muted);
    padding-top: var(--space-4);
    border-top: 1px solid var(--hairline);
}

.pl-hero-meta .byline {
    font-family: var(--font-serif);
    font-style: normal;
    color: var(--ink-soft);
}

.pl-hero-meta .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--ink-faint);
}


/* --- EDITORIAL SECTION HEADING --- */
.pl-section {
    max-width: var(--wide-width);
    margin: 0 auto;
    padding: var(--space-16) var(--space-8);
}

.pl-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-8);
    padding-bottom: var(--space-6);
    margin-bottom: var(--space-12);
    border-bottom: 2px solid var(--ink);
}

.pl-section-head-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.pl-section-eyebrow {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: var(--tr-widest);
    text-transform: uppercase;
    color: var(--sage);
}

.pl-section-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1;
    letter-spacing: var(--tr-tight);
    color: var(--ink);
}

.pl-section-link {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: var(--tr-wider);
    text-transform: uppercase;
    color: var(--ink-muted);
    flex-shrink: 0;
}

.pl-section-link:hover { color: var(--ink); }


/* --- EDITORIAL GRID --- */
.pl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-12) var(--space-10);
}

.pl-grid-feature {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-12);
    margin-bottom: var(--space-16);
    padding-bottom: var(--space-16);
    border-bottom: 1px solid var(--hairline);
}

.pl-grid-feature .pl-card-media {
    aspect-ratio: 16 / 9;
}

.pl-grid-feature .pl-card-title {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.15;
}


/* ============================================================
   POST CARD — Editorial (no borders, serif titles, eyebrows)
   ============================================================ */
.post-card {
    display: flex;
    flex-direction: column;
    background: transparent;
    border: none;
    transition: transform 0.4s cubic-bezier(.2,.7,.3,1);
}

.card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.pl-card-media,
.card-image-wrapper {
    position: relative;
    margin-bottom: var(--space-5);
    overflow: hidden;
    background: var(--paper-deep);
}

.card-image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--paper-deep);
    border-radius: 0;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(.2,.7,.3,1);
}

.card-link:hover .card-image img {
    transform: scale(1.04);
}

.card-image-overlay {
    display: none; /* No gradient overlay — editorial = clean */
}

.card-placeholder {
    aspect-ratio: 16 / 10;
    background:
      linear-gradient(145deg, rgba(79,114,89,0.10), rgba(155,118,83,0.08)),
      var(--paper-deep);
    border-radius: 0;
    position: relative;
}

.card-placeholder::after {
    content: "PICKLELAND";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-style: normal;
    font-size: 0.875rem;
    letter-spacing: var(--tr-widest);
    color: var(--ink-faint);
}

/* Category eyebrow — floats above title, small caps */
.card-category {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: var(--tr-widest);
    text-transform: uppercase;
    color: var(--paper);
    background: var(--ink);
    padding: 6px 12px;
    border-radius: 0;
}

.card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: var(--space-3);
    row-gap: 0;
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--ink-muted);
    letter-spacing: 0.02em;
}

.card-meta time,
.card-meta span:not(.meta-dot) { white-space: nowrap; }

.meta-dot {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--ink-faint);
    display: inline-block;
}

.card-bylines {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}

.card-byline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.card-byline-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

.card-byline-name {
    font-family: var(--font-serif);
    font-style: normal;
    font-weight: 400;
    color: var(--ink-soft);
}

.pl-card-title,
.card-title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: var(--tr-tight);
    color: var(--ink);
    transition: color var(--transition-fast);
}

.card-link:hover .card-title,
.card-link:hover .pl-card-title { color: var(--sage); }

.card-excerpt {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ============================================================
   PILLARS — Editorial "Sections of the Magazine" (no glass)
   ============================================================ */
.pillars-bleed {
    width: 100%;
    background: var(--ink);
    color: var(--paper);
}

.pillars {
    max-width: var(--wide-width);
    margin: 0 auto;
    padding: var(--space-20) var(--space-8);
}

.pillars-bg {
    background: transparent;
    padding: 0;
    position: static;
}

.pillars-overlay { display: none; }

.pillars-content {
    padding: 0;
    text-align: center;
}

.pillars-intro {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    font-weight: 400;
    font-style: normal;
    color: var(--paper);
    line-height: 1.3;
    max-width: 700px;
    margin: 0 auto var(--space-2) auto;
    letter-spacing: -0.01em;
}

.pillars-section-label {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: var(--tr-widest);
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: var(--space-6);
    display: block;
}

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    max-width: 1100px;
    margin: var(--space-16) auto 0;
    border-top: 1px solid rgba(255,255,255,0.18);
    border-left: 1px solid rgba(255,255,255,0.18);
}

.pillar-card {
    background: transparent;
    padding: var(--space-10) var(--space-6);
    text-align: left;
    text-decoration: none;
    border-right: 1px solid rgba(255,255,255,0.18);
    border-bottom: 1px solid rgba(255,255,255,0.18);
    transition: background var(--transition-fast), color var(--transition-fast);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    position: relative;
}

.pillar-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0);
    transition: background 0.25s ease;
    pointer-events: none;
}

.pillar-card:hover::before { background: rgba(255,255,255,0.04); }

.pillar-label {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: var(--tr-widest);
    text-transform: uppercase;
    color: var(--paper-deep);
    opacity: 0.65;
}

.pillar-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--tr-tight);
    color: var(--paper);
    margin: 0;
}

.pillar-desc {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.55;
    color: rgba(250,245,238,0.65);
    margin: 0;
}

.pillars-outro {
    margin-top: var(--space-12);
    font-family: var(--font-serif);
    font-style: normal;
    font-size: var(--fs-base);
    color: rgba(250,245,238,0.75);
}

.pillars-link {
    color: var(--paper);
    font-weight: 600;
    font-style: normal;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.6);
    padding-bottom: 2px;
    margin-left: var(--space-1);
    font-family: var(--font-body);
    letter-spacing: 0.02em;
}

.pillars-link:hover {
    border-bottom-color: var(--paper);
    color: var(--paper);
}


/* ============================================================
   COMMUNITY BANNER — 首頁新手社群 CTA（cream bg + 4 benefits + LINE）
   ============================================================ */
.pl-community-bleed {
    width: 100%;
    background: var(--paper-deep);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.pl-community {
    max-width: var(--wide-width);
    margin: 0 auto;
    padding: var(--space-20) var(--space-8);
}

.pl-community-inner {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: var(--space-16);
    align-items: start;
}

.pl-community-left {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    position: sticky;
    top: calc(var(--nav-height) + var(--space-8));
}

.pl-community-eyebrow {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: var(--tr-widest);
    text-transform: uppercase;
    color: var(--sage);
}

.pl-community-title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--tr-tight);
    color: var(--ink);
    margin: 0;
}

.pl-community-title em {
    font-weight: 400;
    font-style: normal;
    color: var(--sage);
}

.pl-community-dek {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: var(--fs-lg);
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 480px;
    margin: var(--space-2) 0 0;
}

.pl-community-right {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.pl-community-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    border-top: 1px solid var(--hairline);
}

.pl-community-benefits li {
    display: flex;
    gap: var(--space-5);
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--hairline);
    align-items: baseline;
}

.benefit-num {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 400;
    font-size: 1.75rem;
    letter-spacing: -0.02em;
    color: var(--sage);
    min-width: 48px;
    flex-shrink: 0;
}

.pl-community-benefits h4 {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
    margin: 0 0 var(--space-2);
}

.pl-community-benefits p {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0;
}

.pl-community-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    align-self: flex-start;
    background: var(--line-green);
    color: var(--paper);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
    padding: var(--space-4) var(--space-10);
    text-decoration: none;
    border-radius: 0;
    transition: background 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 24px rgba(6,199,85,0.28);
}

.pl-community-cta:hover {
    background: #05a847;
    color: var(--paper);
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(6,199,85,0.35);
}

.pl-community-cta svg {
    flex-shrink: 0;
}

.pl-community-proof {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: 0.9375rem;
    color: var(--ink-muted);
    margin: 0;
}

.pl-community-proof strong {
    font-weight: 700;
    font-style: normal;
    color: var(--ink);
}

@media (max-width: 900px) {
    .pl-community-inner {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }
    .pl-community-left {
        position: static;
    }
    .pl-community {
        padding: var(--space-16) var(--space-5);
    }
}


/* ============================================================
   COMMUNITY CTA — compact LINE + newsletter pair
   ============================================================ */
.community-cta {
    background: var(--paper-deep);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    padding: var(--space-16) var(--space-8);
}

.community-cta-inner {
    width: min(980px, 100%);
    margin: 0 auto;
}

.community-cta-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

.community-cta-eyebrow {
    margin-bottom: var(--space-3);
    color: var(--sage);
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: var(--tr-widest);
    text-transform: uppercase;
}

.community-cta-title {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: var(--tr-tight);
    text-wrap: balance;
}

.community-cta-desc {
    max-width: 320px;
    color: var(--ink-soft);
    font-family: var(--font-serif);
    font-size: 1rem;
    line-height: 1.6;
    text-align: right;
}

.community-cta-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: start;
}

.community-cta-action {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    min-height: 88px;
    padding: var(--space-5) var(--space-6);
    border: 1px solid rgba(35,74,53,0.2);
    border-radius: 8px;
    font-family: var(--font-body);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        background 0.28s ease;
}

.community-cta-action:hover {
    transform: translateY(-2px);
}

.community-cta-action:focus-visible,
.community-cta-input:focus-visible,
.community-cta-submit:focus-visible {
    outline: 2px solid var(--sage);
    outline-offset: 3px;
}

.community-cta-action-line {
    border-color: var(--logo-green, var(--sage-deep));
    background: var(--logo-green, var(--sage-deep));
    color: var(--paper);
}

.community-cta-action-line:hover {
    border-color: var(--sage-deep);
    background: var(--sage-deep);
    box-shadow: 0 12px 32px -18px rgba(35,74,53,0.7);
    color: var(--paper);
}

.community-cta-action-email {
    width: 100%;
    border-color: rgba(35,74,53,0.24);
    background: rgba(250,245,238,0.72);
    color: var(--ink);
    list-style: none;
}

.community-cta-action-email::-webkit-details-marker {
    display: none;
}

.community-cta-action-email:hover {
    border-color: rgba(35,74,53,0.46);
    background: var(--paper);
    box-shadow: 0 12px 32px -22px rgba(27,27,27,0.45);
}

.community-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(35,74,53,0.16);
    border-radius: 50%;
    color: var(--sage-deep);
    background: var(--paper);
}

.community-cta-icon svg {
    width: 19px;
    height: 19px;
}

.community-cta-icon-line {
    border-color: rgba(255,255,255,0.22);
    color: var(--line-green);
    background: var(--paper);
}

.community-cta-action-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.community-cta-action-copy > span {
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.08em;
    opacity: 0.68;
}

.community-cta-action-copy strong {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.04em;
}

.community-cta-arrow {
    font-size: 1.125rem;
    line-height: 1;
    opacity: 0.7;
}

.community-cta-toggle {
    position: relative;
    width: 18px;
    height: 18px;
}

.community-cta-toggle::before,
.community-cta-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 1px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease;
}

.community-cta-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.community-cta-newsletter[open] .community-cta-toggle::after {
    transform: translate(-50%, -50%) rotate(0);
}

.community-cta-newsletter[open] .community-cta-action-email {
    border-radius: 8px 8px 0 0;
    border-bottom-color: transparent;
    background: var(--paper);
    transform: none;
}

.community-cta-form {
    padding: var(--space-5);
    border: 1px solid rgba(35,74,53,0.24);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    background: var(--paper);
}

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

.community-cta-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    border: 1px solid rgba(35,74,53,0.28);
    border-radius: 4px;
    overflow: hidden;
    background: var(--paper);
}

.community-cta-input {
    width: 100%;
    min-height: 50px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 0 var(--space-4);
    outline: none;
}

.community-cta-input::placeholder {
    color: var(--ink-muted);
}

.community-cta-submit {
    min-height: 50px;
    border: 0;
    border-left: 1px solid rgba(35,74,53,0.18);
    background: var(--logo-green, var(--sage-deep));
    color: var(--paper);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: var(--tr-wide);
    padding: 0 var(--space-6);
    cursor: pointer;
    transition: background 0.2s ease;
}

.community-cta-submit:hover {
    background: var(--sage-deep);
}

.community-cta-alert {
    display: none;
    list-style: none;
    padding: 0;
    margin-bottom: var(--space-3);
    color: var(--ember);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.community-cta-alert:not(:empty) {
    display: block;
}

.community-cta-status {
    margin-top: var(--space-3);
    color: var(--ink-muted);
    font-family: var(--font-body);
    font-size: 0.75rem;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .community-cta {
        padding: var(--space-12) var(--space-5);
    }

    .community-cta-heading {
        display: block;
        margin-bottom: var(--space-6);
    }

    .community-cta-title {
        font-size: 1.625rem;
    }

    .community-cta-desc {
        margin-top: var(--space-3);
        text-align: left;
    }

    .community-cta-actions {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .community-cta-action {
        min-height: 80px;
        padding: var(--space-4) var(--space-5);
    }
}

@media (prefers-reduced-motion: reduce) {
    .community-cta-action,
    .community-cta-toggle::before,
    .community-cta-toggle::after {
        transition: none;
    }
}


/* ============================================================
   ABOUT / COLOPHON
   ============================================================ */
.about-cta {
    max-width: 660px;
    margin: 0 auto;
    padding: var(--space-24) var(--space-8);
    text-align: center;
}

.about-text {
    font-family: var(--font-display);
    font-style: normal;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    line-height: 1.55;
    color: var(--ink);
    font-weight: 400;
    letter-spacing: -0.01em;
}

.about-sign {
    display: block;
    margin-top: var(--space-6);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: var(--tr-widest);
    text-transform: uppercase;
    color: var(--ink-muted);
    font-style: normal;
}


/* ============================================================
   POST PAGE — Magazine article
   ============================================================ */
.post-full {
    max-width: var(--max-width);
    margin: 0 auto;
    overflow-x: clip;
}

.post-header {
    max-width: 820px;
    margin: 0 auto;
    padding: var(--space-20) var(--space-8) var(--space-12);
    text-align: center;
}

.post-header-inner { max-width: 820px; margin: 0 auto; }

.post-tag {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: var(--tr-widest);
    text-transform: uppercase;
    color: var(--sage);
    margin-bottom: var(--space-6);
    text-decoration: none;
}

.post-title {
    font-family: var(--font-display);
    font-size: 2.625rem;
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: 0;
    color: var(--ink);
    margin-bottom: var(--space-6);
}

.post-excerpt {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: var(--fs-lg);
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0 auto var(--space-8) auto;
    max-width: 640px;
    font-weight: 400;
}

.post-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding-top: var(--space-6);
    border-top: 1px solid var(--hairline);
    max-width: 680px;
    margin: 0 auto;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    color: var(--ink-muted);
}

.post-date {
    font-family: var(--font-serif);
    font-style: normal;
    color: var(--ink-soft);
}

.post-author-credit {
    color: var(--ink-muted);
}

.post-feature-image {
    width: min(1040px, calc(100vw - var(--space-16)));
    max-width: 100%;
    margin: var(--space-10) auto var(--space-20);
    padding: 0;
}

.post-feature-image picture {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--paper-deep);
}

.post-feature-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
}

.post-feature-image figcaption {
    text-align: center;
    font-family: var(--font-serif);
    font-style: normal;
    font-size: 0.875rem;
    color: var(--ink-muted);
    margin-top: var(--space-4);
}

.post-content {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 var(--space-6) var(--space-20);
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.85;
    color: var(--ink-soft);
}

/* Dropcap on first paragraph — editorial hallmark */
.post-content > p:first-of-type::first-letter {
    font-family: var(--font-display);
    float: left;
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 0.8;
    padding: 6px 12px 0 0;
    color: var(--ink);
}

.post-content p { margin-bottom: var(--space-6); }

.post-content h2 {
    font-family: var(--font-display);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: var(--tr-tight);
    color: var(--ink);
    margin: var(--space-16) 0 var(--space-5);
}

.post-content h3 {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
    margin: var(--space-10) 0 var(--space-4);
}

.post-content a {
    color: var(--ink);
    text-decoration: none;
    background-image: linear-gradient(var(--sage), var(--sage));
    background-size: 100% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: color var(--transition-fast);
}

.post-content a:hover { color: var(--sage); }

.post-content img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
    margin: var(--space-10) 0;
}

.post-content picture {
    display: block;
}

.post-content .kg-card,
.post-content figure {
    margin: var(--space-10) 0;
}

.post-content .kg-card img,
.post-content figure img {
    margin: 0;
}

/* In-article images stay inside the reading column (CLAUDE.md 2026-05-19):
   正文、內文圖片、wide/full image 都收斂在同一個閱讀欄位，圖片不可比文字欄更寬。
   造成滿版圖片很醜、很難讀，因此一律拉回正文欄寬。 */
.post-content .kg-width-wide,
.post-content .kg-width-full {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    transform: none;
}

.post-content .kg-width-wide img,
.post-content .kg-width-full img {
    width: 100%;
    max-width: 100%;
}

.post-content blockquote {
    font-family: var(--font-body);
    font-style: normal !important;
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--ink);
    border: none;
    border-left: 3px solid var(--sage);
    background: rgba(79, 114, 89, 0.055);
    padding: var(--space-5) var(--space-6);
    margin: var(--space-10) 0;
    max-width: 100%;
    font-weight: 400;
    letter-spacing: 0;
    position: relative;
    text-align: left;
    border-top: 0;
    border-bottom: 0;
}

.post-content blockquote::before {
    content: none;
}

.post-content blockquote p,
.post-content blockquote em,
.post-content blockquote i {
    font-style: normal !important;
    font-family: inherit;
}

.post-content blockquote p {
    margin: 0 0 0.5rem 0;
    font-size: inherit;
    line-height: inherit;
}

.post-content blockquote p:last-child {
    margin-bottom: 0;
}

.post-content blockquote strong {
    font-weight: 600;
}

.post-content blockquote a[href*="youtube.com"][href*="&t="],
.post-content blockquote a[href*="youtu.be"] {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.05rem 0.45rem 0.1rem;
    margin-left: 0.25rem;
    border: 1px solid rgba(194, 65, 12, 0.28);
    border-radius: 999px;
    background: rgba(194, 65, 12, 0.08);
    color: var(--ember);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    background-image: none;
}

.post-content blockquote a[href*="youtube.com"][href*="&t="]:hover,
.post-content blockquote a[href*="youtu.be"]:hover {
    border-color: var(--ember);
    background: rgba(194, 65, 12, 0.12);
}

@media (max-width: 768px) {
    .post-content blockquote {
        font-size: 1rem;
        line-height: 1.8;
        padding: var(--space-4) var(--space-5);
        margin: var(--space-8) 0;
    }

    .post-content blockquote a[href*="youtube.com"][href*="&t="],
    .post-content blockquote a[href*="youtu.be"] {
        margin-left: 0;
        margin-top: 0.35rem;
    }
}

.post-content ul,
.post-content ol {
    margin: var(--space-6) 0;
    padding-left: var(--space-8);
    list-style: revert;
}

.post-content li { margin-bottom: var(--space-3); }

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-10) 0;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
}

.post-content th,
.post-content td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--hairline);
    text-align: left;
}

.post-content th {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: var(--tr-wider);
    text-transform: uppercase;
    color: var(--ink);
}

.post-content hr {
    border: none;
    text-align: center;
    margin: var(--space-16) auto;
    position: relative;
}

.post-content hr::before {
    content: "· · ·";
    font-size: 1.25rem;
    letter-spacing: 0.8em;
    color: var(--ink-muted);
}

/* Keep form/map heights; only known video players use a responsive ratio. */
.post-content iframe {
    width: 100%;
    max-width: 100%;
    margin: var(--space-10) 0;
    border-radius: 0;
}

.post-content iframe:is(
    [src^="https://www.youtube.com/embed/"],
    [src^="https://youtube.com/embed/"],
    [src^="https://www.youtube-nocookie.com/embed/"],
    [src^="https://youtube-nocookie.com/embed/"],
    [src^="https://player.vimeo.com/video/"]
) {
    display: block;
    height: auto;
    aspect-ratio: 16 / 9;
    /* Figures and ratio wrappers own spacing; margins shift absolute players. */
    margin: 0;
}

.post-content > iframe:is(
    [src^="https://www.youtube.com/embed/"],
    [src^="https://youtube.com/embed/"],
    [src^="https://www.youtube-nocookie.com/embed/"],
    [src^="https://youtube-nocookie.com/embed/"],
    [src^="https://player.vimeo.com/video/"]
) {
    margin: var(--space-10) 0;
}

/* Ghost 新版 oEmbed 卡片（YouTube 等）把 iframe 包在 figure.kg-embed-card
   裡，iframe 用 inline position:absolute;inset:0;width:100%;height:100%
   撐滿，inline style 優先權蓋過上面任何 .post-content iframe 規則。父層
   .kg-embed-card 本身沒有 position:relative + 高度時，這顆絕對定位的
   iframe 就會直接跳脫 680px 文章欄、撐滿整個頁面（third-shot 文章跑版即
   此原因：figure 直接包 iframe，沒有中介的 ratio wrapper div）。 */
.post-content .kg-embed-card {
    position: relative;
    aspect-ratio: 16 / 9;
    margin: var(--space-10) 0;
}

.post-content .kg-bookmark-card {
    border: 1px solid var(--hairline);
    border-radius: 0;
    margin: var(--space-10) 0;
}

.post-content .kg-callout-card {
    border: none;
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    background: transparent;
    padding: var(--space-10) 0;
    margin: var(--space-16) 0;
    text-align: center;
}

.post-content .kg-callout-text {
    font-family: var(--font-display);
    font-style: normal;
    font-size: 1.5rem;
    line-height: 1.5;
    color: var(--ink);
}

.post-content figcaption {
    text-align: center;
    font-family: var(--font-serif);
    font-style: normal;
    font-size: 0.8125rem;
    color: var(--ink-muted);
    margin-top: var(--space-3);
}

.related-posts {
    width: 100%;
    max-width: var(--article-column-width, 680px);
    margin: var(--space-16) auto 0;
    padding: var(--space-8) 0 0;
    border-top: 2px solid var(--ink);
}

.post-content .related-posts {
    margin-bottom: 0;
}

.related-posts-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
}

.related-posts-eyebrow {
    grid-column: 2;
    grid-row: 1;
    margin: 0 0 0.2rem;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    white-space: nowrap;
}

.post-content .related-posts-title,
.related-posts-title {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0;
    color: var(--ink);
}

.related-posts-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.related-post {
    min-width: 0;
    border-top: 1px solid var(--hairline);
}

.post-content .related-post-link,
.related-post-link {
    display: grid;
    grid-template-columns: 4.75rem minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
    min-height: 0;
    height: auto;
    padding: var(--space-6) 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    text-decoration: none;
    background-image: none;
    transition: color var(--transition-fast);
}

.post-content .related-post-link:hover,
.related-post-link:hover {
    border-color: transparent;
    background: transparent;
    color: var(--ink);
}

.related-post-number {
    grid-column: 1;
    display: block;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 6vw, 3.35rem);
    font-weight: 400;
    line-height: 0.88;
    letter-spacing: 0;
    color: var(--bronze);
    font-variant-numeric: tabular-nums;
}

.related-post-copy {
    grid-column: 2;
    display: block;
    min-width: 0;
    max-width: 34rem;
}

.related-post-kicker {
    display: block;
    margin: 0 0 var(--space-2);
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: var(--tr-wider);
    text-transform: uppercase;
    color: var(--ink-muted);
}

.post-content .related-post-title,
.related-post-title {
    grid-column: 2;
    display: block;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.3vw, 1.45rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    color: var(--ink);
    text-wrap: balance;
}

.post-content .related-post-link:hover .related-post-title,
.related-post-link:hover .related-post-title {
    color: var(--sage-deep);
}

.related-post-reason {
    grid-column: 2;
    display: block;
    margin: var(--space-3) 0 0;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--ink-soft);
}

@media (max-width: 768px) {
    .related-posts {
        margin-top: var(--space-12);
        padding-top: var(--space-8);
    }

    .related-posts-header {
        display: block;
    }

    .related-posts-eyebrow {
        margin-bottom: var(--space-2);
    }

    .post-content .related-post-link,
    .related-post-link {
        grid-template-columns: 3.25rem minmax(0, 1fr);
        gap: var(--space-4);
        padding: var(--space-5) 0;
    }

    .related-post-number {
        font-size: 2.25rem;
    }

    .related-post-reason {
        font-size: 0.9rem;
    }
}

.post-content h2[id*="編輯部延伸閱讀"],
.post-content h2[id*="%E7%B7%A8%E8%BC%AF%E9%83%A8%E5%BB%B6%E4%BC%B8%E9%96%B1%E8%AE%80"],
.post-content h2[id*="接著讀這兩篇"],
.post-content h2[id*="%E6%8E%A5%E8%91%97%E8%AE%80%E9%80%99%E5%85%A9%E7%AF%87"] {
    margin: var(--space-16) 0 0;
    padding-top: var(--space-8);
    border-top: 2px solid var(--ink);
    font-size: clamp(1.65rem, 3vw, 2rem);
    line-height: 1.05;
    letter-spacing: 0;
}

.post-content h2[id*="編輯部延伸閱讀"]::before,
.post-content h2[id*="%E7%B7%A8%E8%BC%AF%E9%83%A8%E5%BB%B6%E4%BC%B8%E9%96%B1%E8%AE%80"]::before,
.post-content h2[id*="接著讀這兩篇"]::before,
.post-content h2[id*="%E6%8E%A5%E8%91%97%E8%AE%80%E9%80%99%E5%85%A9%E7%AF%87"]::before {
    content: "主編精選";
    display: block;
    margin-bottom: var(--space-2);
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.post-content h2[id*="編輯部延伸閱讀"] + ol,
.post-content h2[id*="%E7%B7%A8%E8%BC%AF%E9%83%A8%E5%BB%B6%E4%BC%B8%E9%96%B1%E8%AE%80"] + ol,
.post-content h2[id*="接著讀這兩篇"] + ol,
.post-content h2[id*="%E6%8E%A5%E8%91%97%E8%AE%80%E9%80%99%E5%85%A9%E7%AF%87"] + ol {
    counter-reset: related-editorial;
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
}

.post-content h2[id*="編輯部延伸閱讀"] + ol > li,
.post-content h2[id*="%E7%B7%A8%E8%BC%AF%E9%83%A8%E5%BB%B6%E4%BC%B8%E9%96%B1%E8%AE%80"] + ol > li,
.post-content h2[id*="接著讀這兩篇"] + ol > li,
.post-content h2[id*="%E6%8E%A5%E8%91%97%E8%AE%80%E9%80%99%E5%85%A9%E7%AF%87"] + ol > li {
    counter-increment: related-editorial;
    position: relative;
    margin: 0;
    padding: var(--space-6) 0 var(--space-6) 4.75rem;
    border-top: 1px solid var(--hairline);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--ink-soft);
}

.post-content h2[id*="編輯部延伸閱讀"] + ol > li::before,
.post-content h2[id*="%E7%B7%A8%E8%BC%AF%E9%83%A8%E5%BB%B6%E4%BC%B8%E9%96%B1%E8%AE%80"] + ol > li::before,
.post-content h2[id*="接著讀這兩篇"] + ol > li::before,
.post-content h2[id*="%E6%8E%A5%E8%91%97%E8%AE%80%E9%80%99%E5%85%A9%E7%AF%87"] + ol > li::before {
    content: counter(related-editorial, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: var(--space-6);
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 6vw, 3.35rem);
    font-weight: 400;
    line-height: 0.88;
    color: var(--bronze);
    font-variant-numeric: tabular-nums;
}

.post-content h2[id*="編輯部延伸閱讀"] + ol > li > a,
.post-content h2[id*="%E7%B7%A8%E8%BC%AF%E9%83%A8%E5%BB%B6%E4%BC%B8%E9%96%B1%E8%AE%80"] + ol > li > a,
.post-content h2[id*="接著讀這兩篇"] + ol > li > a,
.post-content h2[id*="%E6%8E%A5%E8%91%97%E8%AE%80%E9%80%99%E5%85%A9%E7%AF%87"] + ol > li > a {
    display: block;
    margin-bottom: var(--space-3);
    background-image: none;
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.3vw, 1.45rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink);
    text-wrap: balance;
}

.post-content h2[id*="編輯部延伸閱讀"] + ol > li > a:hover,
.post-content h2[id*="%E7%B7%A8%E8%BC%AF%E9%83%A8%E5%BB%B6%E4%BC%B8%E9%96%B1%E8%AE%80"] + ol > li > a:hover,
.post-content h2[id*="接著讀這兩篇"] + ol > li > a:hover,
.post-content h2[id*="%E6%8E%A5%E8%91%97%E8%AE%80%E9%80%99%E5%85%A9%E7%AF%87"] + ol > li > a:hover {
    color: var(--sage-deep);
}

.post-content h2[id*="編輯部延伸閱讀"] + ol > li > p,
.post-content h2[id*="%E7%B7%A8%E8%BC%AF%E9%83%A8%E5%BB%B6%E4%BC%B8%E9%96%B1%E8%AE%80"] + ol > li > p,
.post-content h2[id*="接著讀這兩篇"] + ol > li > p,
.post-content h2[id*="%E6%8E%A5%E8%91%97%E8%AE%80%E9%80%99%E5%85%A9%E7%AF%87"] + ol > li > p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--ink-soft);
}

@media (max-width: 768px) {
    .post-content h2[id*="編輯部延伸閱讀"],
    .post-content h2[id*="%E7%B7%A8%E8%BC%AF%E9%83%A8%E5%BB%B6%E4%BC%B8%E9%96%B1%E8%AE%80"],
    .post-content h2[id*="接著讀這兩篇"],
    .post-content h2[id*="%E6%8E%A5%E8%91%97%E8%AE%80%E9%80%99%E5%85%A9%E7%AF%87"] {
        margin-top: var(--space-12);
    }

    .post-content h2[id*="編輯部延伸閱讀"] + ol > li,
    .post-content h2[id*="%E7%B7%A8%E8%BC%AF%E9%83%A8%E5%BB%B6%E4%BC%B8%E9%96%B1%E8%AE%80"] + ol > li,
    .post-content h2[id*="接著讀這兩篇"] + ol > li,
    .post-content h2[id*="%E6%8E%A5%E8%91%97%E8%AE%80%E9%80%99%E5%85%A9%E7%AF%87"] + ol > li {
        padding: var(--space-5) 0 var(--space-5) 3.25rem;
    }

    .post-content h2[id*="編輯部延伸閱讀"] + ol > li::before,
    .post-content h2[id*="%E7%B7%A8%E8%BC%AF%E9%83%A8%E5%BB%B6%E4%BC%B8%E9%96%B1%E8%AE%80"] + ol > li::before,
    .post-content h2[id*="接著讀這兩篇"] + ol > li::before,
    .post-content h2[id*="%E6%8E%A5%E8%91%97%E8%AE%80%E9%80%99%E5%85%A9%E7%AF%87"] + ol > li::before {
        top: var(--space-5);
        font-size: 2.25rem;
    }

    .post-content h2[id*="編輯部延伸閱讀"] + ol > li > p,
    .post-content h2[id*="%E7%B7%A8%E8%BC%AF%E9%83%A8%E5%BB%B6%E4%BC%B8%E9%96%B1%E8%AE%80"] + ol > li > p,
    .post-content h2[id*="接著讀這兩篇"] + ol > li > p,
    .post-content h2[id*="%E6%8E%A5%E8%91%97%E8%AE%80%E9%80%99%E5%85%A9%E7%AF%87"] + ol > li > p {
        font-size: 0.9rem;
    }
}

.post-footer {
    max-width: 680px;
    margin: 0 auto;
    padding: var(--space-10) var(--space-6);
    border-top: 1px solid var(--hairline);
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.post-footer-tag {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: var(--tr-wider);
    text-transform: uppercase;
    color: var(--ink-muted);
    background: transparent;
    border: 1px solid var(--hairline);
    padding: 6px 14px;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.post-footer-tag:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}


/* ============================================================
   TAG & AUTHOR PAGES
   ============================================================ */
.tag-page,
.author-page {
    max-width: var(--wide-width);
    margin: 0 auto;
    padding: var(--space-16) var(--space-8);
}

.tag-header,
.author-header {
    text-align: center;
    padding: var(--space-12) 0;
    border-bottom: 2px solid var(--ink);
    margin-bottom: var(--space-16);
}

.tag-title,
.author-name {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--tr-tight);
    color: var(--ink);
    margin-bottom: var(--space-4);
}

.tag-description,
.author-bio {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: var(--fs-lg);
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 560px;
    margin: 0 auto;
}

/* === CAMPAIGN CTA — 活動版位（spec 20260727-campaign-cta-slot） ===
   刻意與 community-cta 視覺區隔：ember 邊框、單一行動、高度約常駐層的三分之二。
   看起來像貼上去的活動貼紙，讀者一眼感受到時效性，撤掉時版面也不留空洞。
   內容寬度對齊 community-cta 的 980px，兩個版位上下堆疊時邊緣不會錯開。 */
.campaign-cta {
    padding: var(--space-10) var(--space-8) 0;
}

.campaign-cta-inner {
    width: min(980px, 100%);
    margin: 0 auto;
    padding: var(--space-6);
    border: 1px solid var(--ember);
    border-radius: 8px;
    background: var(--paper-deep);
}

.campaign-cta-eyebrow {
    display: inline-block;
    margin-bottom: var(--space-3);
    padding: 0.25em 0.75em;
    border-radius: 999px;
    background: var(--ember);
    color: var(--paper);
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: var(--tr-widest);
}

.campaign-cta-title {
    margin-bottom: var(--space-2);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 2.2vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: var(--tr-tight);
    text-wrap: balance;
}

.campaign-cta-desc {
    margin-bottom: var(--space-5);
    max-width: 52ch;
    color: var(--ink-soft);
    font-family: var(--font-serif);
    font-size: 1rem;
    line-height: 1.6;
}

.campaign-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: var(--space-3) var(--space-6);
    border: 1px solid var(--ember);
    border-radius: 999px;
    background: var(--ember);
    color: var(--paper);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    transition:
        transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.28s ease;
}

.campaign-cta-btn:hover {
    transform: translateY(-2px);
    opacity: 0.92;
}

.campaign-cta-btn:focus-visible {
    outline: 2px solid var(--ember);
    outline-offset: 3px;
}

.campaign-cta-arrow {
    font-size: 0.9em;
}

.campaign-cta-note {
    margin-top: var(--space-3);
    color: var(--ink-muted);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    line-height: 1.6;
}

@media (max-width: 640px) {
    .campaign-cta {
        padding: var(--space-8) var(--space-5) 0;
    }

    .campaign-cta-inner {
        padding: var(--space-5);
    }

    .campaign-cta-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .campaign-cta-btn {
        transition: none;
    }

    .campaign-cta-btn:hover {
        transform: none;
    }
}

.tag-count {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: var(--tr-widest);
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-top: var(--space-4);
}

.author-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    margin: 0 auto var(--space-5);
    object-fit: cover;
}

.post-grid,
.tag-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-12) var(--space-10);
}

.post-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* === Post Card（tag 頁、author 頁文章列表）=== */
.post-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    background: var(--ink);
    isolation: isolate;
}

.post-card-img-link {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--paper-deep);
    border-radius: 0;
    margin-bottom: 0;
    text-decoration: none;
}
.post-card-img-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(20,20,20,0.02) 30%, rgba(20,20,20,0.28) 66%, rgba(20,20,20,0.78) 100%);
    pointer-events: none;
}
.post-card-img-link img {
    width: 100%; height: 100%; object-fit: cover; object-position: left bottom;
    transition: transform 0.5s cubic-bezier(.2,.7,.3,1);
}
.post-card-img-link:hover img { transform: scale(1.04); }

.post-card-placeholder {
    width: 100%; height: 100%; background: var(--paper-deep);
}

.post-card-tag {
    position: absolute; top: 0.75rem; left: 0.75rem;
    font-family: var(--font-body);
    font-size: 0.625rem; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: #e8b84b; background: rgba(20,20,20,0.45);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(232,184,75,0.25);
    padding: 4px 10px; border-radius: 100px;
    z-index: 2;
}

.post-card-body {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1.15rem;
    z-index: 2;
    pointer-events: auto;
}

.post-card-title {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.25vw, 1.25rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--paper);
    margin: 0;
    text-wrap: balance;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.post-card-title a { color: inherit; text-decoration: none; }
.post-card-title a:hover { color: var(--bronze-soft); }

.post-card-meta {
    font-family: var(--font-body);
    font-size: 0.75rem; color: var(--ink-muted);
}

@media (max-width: 1100px) {
    .tag-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .tag-grid { grid-template-columns: 1fr; gap: var(--space-10) 0; }

    .post-card-img-link {
        aspect-ratio: 16 / 11;
    }

    .post-card-body,
    .post-card-title {
        display: block;
        visibility: visible;
        opacity: 1;
    }

    .post-card-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
    }
}


/* ============================================================
   PAGINATION — Editorial
   ============================================================ */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-16) 0;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: var(--tr-wider);
    text-transform: uppercase;
}

.pagination-prev,
.pagination-next {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 4px;
}

.pagination-info {
    color: var(--ink-muted);
    font-weight: 400;
    letter-spacing: 0.05em;
}


/* ============================================================
   FOOTER — Editorial colophon
   ============================================================ */
.site-footer {
    background: var(--ink);
    color: var(--paper);
    margin-top: var(--space-20);
}

.footer-inner {
    max-width: var(--wide-width);
    margin: 0 auto;
    padding: var(--space-20) var(--space-8) var(--space-10);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.2fr;
    gap: var(--space-16);
    margin-bottom: var(--space-16);
}

.footer-brand { max-width: 320px; }

.footer-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--paper);
    text-decoration: none;
}

.footer-logo-img {
    height: 48px;
    width: auto;
    object-fit: contain;
    display: block;
}

.footer-tagline {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: var(--fs-base);
    line-height: 1.5;
    color: rgba(250,245,238,0.65);
    margin-top: var(--space-4);
}

.footer-heading {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: var(--tr-widest);
    text-transform: uppercase;
    color: rgba(250,245,238,0.45);
    margin-bottom: var(--space-5);
}

.footer-links { list-style: none; padding: 0; }

.footer-links li { margin-bottom: var(--space-3); }

.footer-links a {
    color: rgba(250,245,238,0.75);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.875rem;
    transition: color var(--transition-fast);
}

.footer-links a:hover { color: var(--paper); }

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

.footer-copyright {
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: rgba(250,245,238,0.45);
}

.footer-copyright::after {
    content: " · 台灣球友的匹克球網站。";
    font-style: normal;
    font-family: var(--font-serif);
}


/* ============================================================
   BACK TO TOP / FLOATING CTA
   ============================================================ */
.back-to-top {
    position: fixed;
    bottom: var(--space-8);
    right: var(--space-8);
    width: 44px;
    height: 44px;
    background: var(--ink);
    color: var(--paper);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 50;
}

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

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

.floating-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--ink);
    color: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    padding: var(--space-4) var(--space-8);
    z-index: 90;
    font-family: var(--font-body);
}

.floating-cta-text {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: 0.9375rem;
}

.floating-cta-btn {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
    color: var(--paper);
    background: var(--line-green);
    padding: 8px 18px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.floating-cta-btn:hover { background: #05a847; color: var(--paper); }

.floating-cta-close {
    background: none;
    border: none;
    color: var(--paper);
    font-size: 1.25rem;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.floating-cta-close:hover { opacity: 1; }


/* ============================================================
   READING PROGRESS BAR
   ============================================================ */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--ink);
    z-index: 9999;
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}


/* ============================================================
   REVIEW / BUY / RATING (inline post cards)
   ============================================================ */
.rating-card {
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    background: transparent;
    padding: var(--space-10);
    margin: var(--space-12) 0;
    border-radius: 0;
}

.rating-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.rating-score {
    font-family: var(--font-display);
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 0.9;
    color: var(--ink);
}

.rating-score-label {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: var(--tr-widest);
    text-transform: uppercase;
    color: var(--ink-muted);
}

.rating-verdict {
    font-family: var(--font-serif);
    font-style: normal;
    font-size: var(--fs-lg);
    color: var(--ink);
}

.rating-bars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.rating-bar-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.rating-bar-label {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--ink-soft);
    min-width: 88px;
}

.rating-bar-track {
    flex: 1;
    height: 3px;
    background: var(--hairline);
    overflow: hidden;
}

.rating-bar-fill {
    height: 100%;
    background: var(--ink);
    transition: width 0.9s cubic-bezier(.2,.7,.3,1);
}

.rating-bar-value {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ink);
    min-width: 28px;
    text-align: right;
}

.buy-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
    color: var(--paper);
    background: var(--ink);
    padding: 14px 28px;
    border-radius: 0;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}

.buy-btn:hover {
    background: var(--sage);
    color: var(--paper);
    transform: translateY(-2px);
}

.buy-btn-secondary {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink);
}

.buy-btn-secondary:hover { background: var(--ink); color: var(--paper); }

.buy-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-8) 0;
}


/* ============================================================
   YOUTUBE TIMESTAMP LINKS
   ============================================================ */
.post-content a[href*="youtube.com"][href*="&t="],
.post-content a[href*="youtu.be"] {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    color: var(--ember);
    font-weight: 500;
    text-decoration: none;
    background-image: none;
    border-bottom: 1px dashed var(--ember);
}

.post-content a[href*="youtube.com"][href*="&t="]:hover,
.post-content a[href*="youtu.be"]:hover {
    border-bottom-style: solid;
}


/* Scroll animations removed — editorial design favors immediate presence
   (prior attempts using opacity:0 + IntersectionObserver caused content
   to stay invisible when JS timing failed; not worth the fragility). */


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .pl-hero-grid {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }

    .pl-grid-feature {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .pl-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pillars-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-10);
    }

    .footer-brand { grid-column: span 2; max-width: none; }
}

@media (max-width: 768px) {
    .nav { padding: var(--space-4) var(--space-5); flex-wrap: wrap; }

    .site-title { font-size: 1.125rem; }

    .nav-toggle { display: flex; }

    .nav-right {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
        padding-top: var(--space-6);
        border-top: 1px solid var(--hairline);
        margin-top: var(--space-4);
    }

    .nav-right.nav-open { display: flex; }

    .nav-right .nav {
        flex-direction: column;
        gap: var(--space-3);
        width: 100%;
    }

    /* Mobile dropdown — tap to expand instead of hover */
    .nav-item {
        position: static;
        display: block;
        width: 100%;
    }
    .nav-dropdown {
        position: static;
        transform: none;
        min-width: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: var(--space-3) 0 0 var(--space-4);
        opacity: 0;
        visibility: hidden;
        display: none;
        transition: none;
    }
    .nav-item.is-open .nav-dropdown {
        display: block;
        opacity: 1;
        visibility: visible;
    }
    .nav-item.is-open .nav-main .nav-caret {
        transform: rotate(180deg);
    }
    .dropdown-tags {
        gap: var(--space-3);
    }

    .pl-hero { padding: var(--space-10) var(--space-5); }
    .pl-section { padding: var(--space-12) var(--space-5); }

    .pl-grid { grid-template-columns: 1fr; gap: var(--space-10); }

    .pillars { padding: var(--space-16) var(--space-5); }

    .pillars-grid { grid-template-columns: 1fr; }

    .post-header { padding: var(--space-12) var(--space-5) var(--space-8); }
    .post-header-inner {
        max-width: 100%;
    }

    .post-title {
        display: block;
        max-width: 100%;
        font-size: 1.625rem;
        line-height: 1.22;
        letter-spacing: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
        line-break: anywhere;
    }

    .post-feature-image {
        width: 100%;
        margin: var(--space-6) auto var(--space-12);
    }

    .post-feature-image picture {
        aspect-ratio: 4 / 3;
    }

    .post-content { padding: 0 var(--space-5) var(--space-16); font-size: 1.0625rem; }

    .post-grid { grid-template-columns: 1fr; }

    .footer-grid { grid-template-columns: 1fr; }
    .footer-brand { grid-column: span 1; }
    .footer-bottom { flex-direction: column; gap: var(--space-4); text-align: center; }

    .back-to-top { bottom: var(--space-5); right: var(--space-5); width: 40px; height: 40px; }

    .floating-cta {
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-5);
    }

    .rating-bars { grid-template-columns: 1fr; }

    .rating-header { flex-direction: column; gap: var(--space-4); align-items: flex-start; }
}


/* ============================================================
   TABLE OF CONTENTS — auto-generated from H2s on post pages
   Mobile-first: collapsed details/summary above content.
   Desktop (>= 1100px): sticky sidebar to the left of the article.
   ============================================================ */
.post-toc {
    max-width: 680px;
    margin: 0 auto var(--space-8);
    padding: 0 var(--space-5);
    font-family: var(--font-body);
}

.post-toc[hidden] { display: none; }

.post-toc-mobile {
    background: var(--paper-deep);
    border: 1px solid var(--hairline);
    border-radius: 4px;
    padding: var(--space-3) var(--space-5);
}

.post-toc-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: var(--tr-wide);
    color: var(--ink);
    text-transform: uppercase;
}

.post-toc-summary::-webkit-details-marker { display: none; }
.post-toc-summary::marker { content: ''; }

.post-toc-summary-icon {
    display: inline-flex;
    align-items: center;
    color: var(--sage);
    transition: transform 0.2s ease;
}

.post-toc-mobile[open] .post-toc-summary-icon {
    transform: rotate(180deg);
}

.post-toc-nav {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--hairline);
}

.post-toc-title {
    /* Desktop title — hidden on mobile because summary already says it */
    display: none;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
    color: var(--ink-muted);
    margin: 0 0 var(--space-4);
}

.post-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: toc-counter;
}

.post-toc-item {
    counter-increment: toc-counter;
    margin: 0;
    padding: 0;
    line-height: 1.8;
}

.post-toc-link {
    display: block;
    position: relative;
    padding: 4px 0 4px 28px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--ink-soft);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.post-toc-link::before {
    content: counter(toc-counter, decimal-leading-zero);
    position: absolute;
    left: 4px;
    top: 4px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-muted);
    letter-spacing: 0.04em;
}

.post-toc-link:hover {
    color: var(--sage);
}

.post-toc-link.is-active {
    color: var(--sage);
    font-weight: 600;
    border-left-color: var(--sage);
    padding-left: 32px;
}

.post-toc-link.is-active::before {
    color: var(--sage);
}

.post-toc-related {
    display: none;
}

/* Desktop: TOC becomes a sticky sidebar pinned to the viewport left edge.
   Uses position: fixed which avoids layout conflicts with the article column.
   Threshold 1280px ensures comfortable horizontal gap with .post-header
   (max-width 820px centered) — at narrower widths we fall back to the
   mobile collapsed <details> TOC, which sits inline above the content. */
@media (min-width: 1280px) {
    .post-toc {
        position: fixed;
        left: max(24px, calc((100vw - var(--article-column-width, 680px)) / 2 - 296px));
        top: 120px;
        width: 240px;
        max-width: 240px;
        margin: 0;
        padding: 0;
        z-index: 10;
        max-height: calc(100vh - 160px);
        overflow-y: auto;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.25s ease;
    }

    /* Show desktop TOC while article content remains; JS hides it near the footer. */
    .post-toc.is-pinned {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .post-toc.is-near-footer {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .post-toc-mobile {
        background: transparent;
        border: 0;
        padding: 0;
    }

    /* On desktop, the <details> behaves like a normal block — hide the summary.
       JS opens the <details> automatically when viewport >= 1100px so the nav shows. */
    .post-toc-mobile .post-toc-summary {
        display: none;
    }

    .post-toc-mobile .post-toc-nav {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
        border-left: 1px solid var(--hairline);
        padding-left: var(--space-4);
    }

    .post-toc-title {
        display: block;
    }

    .post-toc-related {
        display: block;
        margin-top: var(--space-6);
        padding: var(--space-5) 0 0 var(--space-4);
        border-top: 1px solid var(--hairline);
        border-left: 1px solid var(--hairline);
    }

    .post-toc-related-eyebrow {
        margin: 0 0 var(--space-2);
        font-family: var(--font-body);
        font-size: 0.625rem;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--sage);
    }

    .post-toc-related-title {
        margin: 0 0 var(--space-3);
        font-family: var(--font-body);
        font-size: 0.6875rem;
        font-weight: 700;
        line-height: 1.35;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--ink-muted);
    }

    .post-toc-related-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .post-toc-related-item {
        margin: 0;
        padding: var(--space-3) 0;
        border-top: 1px solid rgba(20, 20, 20, 0.08);
    }

    .post-toc-related-item:first-child {
        border-top: 0;
        padding-top: 0;
    }

    .post-toc-related-link {
        display: block;
        color: var(--ink-soft);
        text-decoration: none;
    }

    .post-toc-related-link:hover {
        color: var(--sage-deep);
    }

    .post-toc-related-name {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        font-family: var(--font-body);
        font-size: 0.8125rem;
        font-weight: 650;
        line-height: 1.55;
        letter-spacing: 0;
    }

    .post-content .related-posts-fallback {
        display: none;
    }
}

/* Wider desktop: align with article gutter, more breathing room */
@media (min-width: 1440px) {
    .post-toc {
        left: calc((100vw - var(--article-column-width, 680px)) / 2 - 312px);
        width: 240px;
        max-width: 240px;
    }
}


/* ============================================================
   PRINT
   ============================================================ */
@media print {
    .site-header,
    .site-footer,
    .email-cta,
    .pillars,
    .back-to-top,
    .floating-cta,
    .reading-progress,
    .post-toc { display: none !important; }

    body { background: white; color: black; }

    .post-content { max-width: 100%; font-size: 12pt; }
}

/* ============================================================
   REDESIGN 2026 — MOCKUP LANDING
   ============================================================ */

:root {
    --logo-green:   #234a35;
    --bronze-soft:  #c2a37e;
    --paper-deeper: #ede5d6;
}

/* === HEADER 全寬 sticky 米底 === */
.header {
    position: sticky; top: 0; z-index: 1000;
    background: rgba(250,245,238,0.85);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(228,221,210,0.5);
}
.nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.25rem 2rem; max-width: 1240px; margin: 0 auto;
    gap: 1.5rem;
}
.nav-actions {
    display: flex; align-items: center; gap: 0.75rem;
}
.nav-toggle {
    display: none;
    flex-direction: column; gap: 5px;
    background: none; border: none; cursor: pointer;
    padding: 8px;
}
.nav-toggle span {
    display: block; width: 22px; height: 1.5px;
    background: var(--ink);
    transition: transform 0.25s, opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.site-title {
    display: flex; align-items: center; gap: 0.6rem;
    font-family: var(--font-display); font-size: 1.25rem; font-weight: 400;
    color: var(--ink);
}
.site-title img { height: 36px; width: auto; }
.site-title .zh { font-family: 'Kaisei Tokumin', serif; font-weight: 400; }
.nav-links { display: flex; gap: 2rem; }
.nav-links a { font-size: 0.8125rem; font-weight: 500; color: var(--ink-soft); transition: color 0.2s; }
.nav-links a:hover { color: var(--sage); }

.nav-cta {
    width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink); background: rgba(20,20,20,0.04);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(20,20,20,0.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 2px 8px rgba(0,0,0,0.04);
    transition: all 0.3s cubic-bezier(.2,.7,.3,1);
}
.nav-cta:hover { background: rgba(20,20,20,0.08); border-color: rgba(20,20,20,0.28); transform: translateY(-1px); }
.nav-cta .line-icon-svg { width: 22px; height: 22px; fill: #06c755; flex-shrink: 0; transition: opacity 0.3s; }
.nav-cta:hover .line-icon-svg { opacity: 0.7; }

/* === HERO 圓角卡片版 === */
.hero-wrapper { width: min(1180px, calc(100vw - 3rem)); margin: 0 auto; padding-top: 1rem; }
.hero {
    position: relative; height: 39vh; min-height: 280px; border-radius: 28px; overflow: hidden;
    background-color: var(--logo-green);
    color: var(--paper); display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 2rem;
}
.hero-bg-picture,
.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.hero-bg-picture { z-index: 0; }
.hero-bg { object-fit: cover; object-position: center; }
.hero::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.25) 100%);
    pointer-events: none;
}
.hero-mega {
    font-family: 'Copperplate', 'Copperplate Gothic Light', 'Cinzel', serif; font-weight: 400;
    font-size: clamp(2.5rem, 5vw, 5rem); line-height: 0.95; letter-spacing: 0.04em;
    color: #f5f0e0; margin: 0 0 0.875rem; text-shadow: 0 4px 28px rgba(0,0,0,0.3); white-space: nowrap;
}
.hero-slogan {
    font-family: var(--font-body); font-weight: 500;
    font-size: clamp(0.75rem, 1vw, 1rem); line-height: 1.4; letter-spacing: 0.06em;
    color: rgba(250,245,238,0.95); margin: 0 auto 0.5rem;
    max-width: 560px; position: relative; padding-top: 0.875rem; text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.hero-slogan::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 32px; height: 1px; background: rgba(250,245,238,0.7);
}
.hero-slogan-zh {
    font-family: var(--font-body); font-weight: 400;
    font-size: clamp(0.6875rem, 0.9vw, 0.875rem); line-height: 1.55; letter-spacing: 0.06em;
    color: rgba(250,245,238,0.88); margin: 0 auto 1.25rem; max-width: 460px; text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.hero-content { max-width: 560px; position: relative; z-index: 2; margin-left: auto; margin-right: auto; }
.hero-ctas { display: flex; gap: 0.625rem; justify-content: center; flex-wrap: wrap; }
.hero-cta {
    display: inline-flex; align-items: center; gap: 0.4rem; padding: 10px 20px;
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    border-radius: 100px; transition: all 0.3s cubic-bezier(.2,.7,.3,1);
}
.hero-cta.primary { background: var(--paper); color: var(--ink); border: 1px solid var(--paper); }
.hero-cta.primary:hover { background: var(--bronze-soft); border-color: var(--bronze-soft); }
.hero-cta.ghost {
    background: rgba(250,245,238,0.10); color: var(--paper); border: 1px solid rgba(250,245,238,0.4);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.hero-cta.ghost:hover { background: rgba(250,245,238,0.20); border-color: rgba(250,245,238,0.7); }

/* === WHY SECTION === */
.why {
    background: #faf5ee;
    overflow: hidden;
}
.why-slogan-wrap {
    padding: 80px 48px 72px;
    text-align: center;
    max-width: 780px;
    margin: 0 auto;
}
.why-slogan {
    font-family: var(--font-display), Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1rem, 1.75vw, 1.5rem);
    line-height: 1.65;
    letter-spacing: 0.01em;
    color: #3a3632;
    white-space: nowrap;
}
.why-slogan strong {
    font-style: italic;
    font-weight: 700;
    color: #141414;
}
.why-attribution {
    margin-top: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.why-attribution-line {
    width: 32px;
    height: 1px;
    background: #9b7653;
}
.why-attribution-text {
    font-family: var(--font-sans), sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8c847c;
}
.why-icons-bar {
    padding: 0 48px 72px;
    display: flex;
    justify-content: center;
    gap: 12px;
}
.why-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 28px;
    text-decoration: none;
    border: 1.5px solid #3a5442;
    border-radius: 14px;
    background: #faf5ee;
    transition: background 0.25s ease, border-color 0.25s ease;
}
.why-icon-item:hover {
    background: #3a5442;
    border-color: #3a5442;
}
.why-icon-svg {
    width: 56px;
    height: 56px;
    color: #3a5442;
    transition: color 0.25s ease;
}
.why-icon-item:hover .why-icon-svg { color: #faf5ee; }
.why-icon-label {
    font-family: var(--font-sans), sans-serif;
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: #3a5442;
    text-align: center;
    line-height: 1.5;
    transition: color 0.25s ease;
}
.why-icon-item:hover .why-icon-label { color: #faf5ee; }

/* === EDITOR'S DESK === */
.editor-desk {
    background: var(--paper);
    padding-bottom: 5rem;
}

.ed-green-zone {
    background: var(--logo-green);
    padding: 3.75rem 0 4.25rem;
}

.ed-green-zone .container,
.ed-more-wrapper {
    width: min(1180px, calc(100vw - 3rem));
    margin: 0 auto;
}

.ed-feature-wrapper {
    padding: 0;
}

.ed-more-wrapper {
    padding-top: 3.5rem;
}

.ed-header {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(240px, 0.3fr);
    align-items: end;
    gap: 2rem;
    text-align: left;
    padding-left: 0;
    margin-bottom: 2rem;
}

.ed-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--paper); margin: 0 0 0.5rem; }
.ed-intro {
    font-size: 0.9375rem;
    color: rgba(250,245,238,0.66);
    margin: 0;
    line-height: 1.6;
}

.ed-more-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    text-align: left;
    padding-left: 0;
    padding-top: 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 1rem;
}

.ed-more-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--ink); margin: 0 0 0.5rem; }
.ed-more-intro { font-size: 0.9375rem; color: var(--ink-muted); margin: 0; }

.ed-feature {
    position: relative;
    aspect-ratio: 16 / 7;
    min-height: 360px;
    max-height: 560px;
    border-radius: 18px;
    overflow: hidden;
    background-color: var(--logo-green);
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    margin-bottom: 0;
    isolation: isolate;
    box-shadow: 0 28px 70px rgba(0,0,0,0.22);
    transition: transform 0.4s cubic-bezier(.2,.7,.3,1);
}

.ed-feature::after,
.ed-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(20,20,20,0.04) 0%, rgba(20,20,20,0.28) 48%, rgba(20,20,20,0.78) 100%),
        linear-gradient(90deg, rgba(20,20,20,0.38) 0%, rgba(20,20,20,0) 58%);
    pointer-events: none;
}

.ed-feature-img,
.ed-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.65s cubic-bezier(.2,.7,.3,1);
}
.ed-feature-picture,
.ed-card-picture {
    position: absolute;
    inset: 0;
    display: block;
}

.ed-feature:hover {
    transform: translateY(-2px);
}

.ed-feature:hover .ed-feature-img,
.ed-card:hover .ed-card-img {
    transform: scale(1.035);
}

.ed-feature-copy,
.ed-card-copy {
    position: relative;
    z-index: 2;
    color: var(--paper);
}

.ed-feature-copy {
    width: min(760px, 76%);
    padding: clamp(1.5rem, 4vw, 3rem);
}

.ed-feature-tag {
    display: inline-block; font-family: var(--font-body);
    font-size: 0.625rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
    color: #f0c96b; background: rgba(20,20,20,0.42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(240,201,107,0.28); padding: 4px 10px; border-radius: 100px;
    margin-bottom: 0.85rem;
}

.ed-feature-title {
    max-width: 720px;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.4vw, 3.25rem);
    line-height: 1.04;
    letter-spacing: var(--tr-tight);
    color: var(--paper);
    text-wrap: balance;
}

.ed-feature-excerpt {
    max-width: 620px;
    margin-top: 0.85rem;
    font-size: clamp(0.9375rem, 1.2vw, 1.125rem);
    line-height: 1.65;
    color: rgba(250,245,238,0.82);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ed-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    grid-template-rows: repeat(2, 250px);
    gap: 1rem;
}

.ed-card {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    background: var(--logo-green);
    transition: transform 0.4s cubic-bezier(.2,.7,.3,1);
    isolation: isolate;
}

.ed-card:hover { transform: translateY(-2px); }
.ed-card:first-child { grid-row: 1 / span 2; }
.ed-card:nth-child(3) { grid-column: auto; }

.ed-card-copy {
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: 1.25rem;
}

.ed-card-tag {
    display: inline-block; font-family: var(--font-body);
    font-size: 0.625rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
    color: #f0c96b; background: rgba(20,20,20,0.38); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(232,184,75,0.25); padding: 4px 10px; border-radius: 100px;
    margin-bottom: 0.7rem;
}

.ed-card-title {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.35vw, 1.25rem);
    line-height: 1.18;
    color: var(--paper);
    letter-spacing: var(--tr-tight);
    text-wrap: balance;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.ed-card-subtitle {
    display: -webkit-box;
    margin-top: 0.45rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    color: rgba(250,245,238,0.72);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    line-height: 1.45;
}

/* === FOOTER === */
.footer { background: var(--ink); color: rgba(250,245,238,0.65); padding: 4rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }
.footer-logo { font-family: 'Kaisei Tokumin', serif; font-size: 1.5rem; color: var(--paper); margin-bottom: 0.75rem; display: block; }
.footer-logo .zh { font-family: 'Kaisei Tokumin', serif; }
.footer-tagline { font-family: var(--font-body); font-size: clamp(0.6875rem, 0.9vw, 0.9375rem); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.5; max-width: 320px; color: rgba(250,245,238,0.7); margin-bottom: 0.4rem; }
.footer-tagline-zh { font-family: var(--font-body); font-size: clamp(0.75rem, 0.85vw, 0.875rem); font-weight: 400; letter-spacing: 0.06em; line-height: 1.55; max-width: 320px; color: rgba(250,245,238,0.55); }
.footer h4 { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper); margin-bottom: 1rem; }
.footer ul { list-style: none; }
.footer li { margin-bottom: 0.5rem; font-size: 0.8125rem; }
.footer li a:hover { color: var(--bronze-soft); }
.footer-bottom { border-top: 1px solid rgba(250,245,238,0.1); padding-top: 1.5rem; font-size: 0.75rem; opacity: 0.6; display: flex; justify-content: space-between; }

/* === RESPONSIVE UPDATES === */
@media (max-width: 1100px) {
    .why-icons-bar { padding: 0 24px 56px; }
}

@media (max-width: 900px) {
    .ed-header,
    .ed-more-header {
        display: block;
    }

    .ed-feature {
        aspect-ratio: 4 / 3;
        min-height: 0;
        max-height: none;
        border-radius: 16px;
    }

    .ed-feature-copy {
        width: 100%;
    }

    .ed-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .ed-card,
    .ed-card:first-child {
        grid-row: auto;
        aspect-ratio: 16 / 10;
    }

    .ed-card:nth-child(3) { grid-column: auto; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .hero-wrapper { padding-top: 0.75rem; }
    .hero {
        min-height: 220px;
        height: 39vh;
        align-items: center;
        justify-content: flex-start;
        padding: 1.75rem 1.35rem 3rem;
        border-radius: 20px;
        text-align: left;
        background:
            radial-gradient(circle at 88% 8%, rgba(194,163,126,0.34), transparent 36%),
            linear-gradient(145deg, #234a35 0%, #355f43 58%, #4f7259 100%);
    }
    .hero-bg-picture { display: none; }
    .hero::before {
        background:
            linear-gradient(180deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.22) 100%),
            radial-gradient(circle at 10% 100%, rgba(250,245,238,0.13), transparent 42%);
    }
    .hero-content {
        max-width: 100%;
        margin: 0;
        transform: translateY(-5%);
    }
    .hero-mega {
        font-size: clamp(2.45rem, 13vw, 3rem);
        line-height: 0.98;
        letter-spacing: 0.03em;
        margin-bottom: 1.25rem;
        white-space: normal;
        text-shadow: 0 3px 18px rgba(0,0,0,0.22);
    }
    .hero-slogan {
        max-width: 19rem;
        margin: 0 0 0.75rem;
        padding-top: 1.25rem;
        font-size: 0.8rem;
        letter-spacing: 0.08em;
        text-shadow: 0 2px 10px rgba(0,0,0,0.24);
    }
    .hero-slogan::before { left: 0; transform: none; }
    .hero-slogan-zh {
        max-width: 18rem;
        margin: 0 0 1.75rem;
        font-size: 0.9375rem;
        letter-spacing: 0.04em;
        text-shadow: 0 2px 10px rgba(0,0,0,0.24);
    }
    .hero-ctas { justify-content: flex-start; gap: 0.6rem; }
    .hero-cta {
        min-height: 44px;
        padding: 12px 18px;
        font-size: 0.75rem;
        letter-spacing: 0.06em;
    }
    .why-slogan-wrap { padding: 56px 24px 48px; }
    .why-icons-bar { display: flex; flex-wrap: wrap; justify-content: center; padding: 0 16px 56px; gap: 12px; }
    .ed-green-zone .container,
    .ed-more-wrapper {
        width: calc(100vw - 1.5rem);
    }

    .ed-green-zone {
        padding: 2.75rem 0 3rem;
    }

    .ed-feature {
        min-height: auto;
        aspect-ratio: auto;
        border-radius: 14px;
        padding: 1.25rem;
        background:
            radial-gradient(circle at 100% 0%, rgba(194,163,126,0.24), transparent 38%),
            linear-gradient(145deg, #234a35 0%, #365f43 100%);
        box-shadow: 0 14px 34px rgba(35,74,53,0.16);
    }

    .ed-feature-picture,
    .ed-card-picture {
        display: none;
    }

    .ed-feature::after,
    .ed-card::after {
        content: none;
    }

    .ed-feature-copy {
        width: 100%;
        padding: 0;
    }

    .ed-grid { grid-template-columns: 1fr; grid-template-rows: none; }

    .ed-card,
    .ed-card:first-child {
        min-height: 9.5rem;
        aspect-ratio: auto;
        border-radius: 14px;
        padding: 1rem;
        background:
            radial-gradient(circle at 100% 0%, rgba(194,163,126,0.18), transparent 42%),
            #234a35;
    }

    .ed-card-copy {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
    }

    .ed-feature-excerpt,
    .ed-card-subtitle {
        font-size: 0.875rem;
        line-height: 1.55;
        -webkit-line-clamp: 1;
    }
}

@media (max-width: 768px) {
    .nav-toggle { display: flex; }
    .nav-links {
        position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
        background: var(--paper); border-bottom: 1px solid var(--hairline); box-shadow: 0 8px 24px rgba(20,20,20,0.06);
        padding: 0 1.5rem; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.35s ease, opacity 0.2s, padding 0.3s ease;
    }
    .nav-links.is-open { max-height: 80vh; opacity: 1; padding: 0.5rem 1.5rem 1.25rem; }
    .nav-links a { padding: 0.85rem 0; width: 100%; border-bottom: 1px solid var(--hairline); font-size: 1rem; }
    .nav-links a:last-child { border-bottom: none; }
}

@media (max-width: 640px) {
    .why-slogan-wrap { padding: 48px 20px 40px; }
    .why-slogan { white-space: normal; }
    .why-icons-bar { flex-wrap: wrap; padding: 0 16px 48px; gap: 12px; }
    .why-icon-item { width: calc(50% - 6px); padding: 16px 12px; }
}

/* === PAGE / ABOUT STYLES === */
.page-header {
    max-width: 800px;
    margin: 6rem auto 4rem;
    text-align: center;
    padding: 0 2rem;
}
.page-header .eyebrow {
    margin-bottom: 1.5rem;
    display: block;
}
.page-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: var(--tr-tight);
    color: var(--ink);
    margin-bottom: 2rem;
}
.post-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 2rem 8rem;
    font-size: 1.125rem;
    line-height: 1.8;
}
.post-content p { margin-bottom: 2rem; }
.post-content h2 { 
    font-family: var(--font-display); 
    font-size: 2rem; 
    margin: 4rem 0 1.5rem; 
}
.post-content img { border-radius: 8px; margin: 3rem 0; }

/* === MAGAZINE TYPOGRAPHY ENHANCEMENTS === */

/* Drop Cap — First letter of the first paragraph in post content */
.post-content > p:first-of-type::first-letter {
    font-family: var(--font-display);
    float: left;
    font-size: 5rem;
    line-height: 0.85;
    padding-top: 0.5rem;
    padding-right: 0.75rem;
    padding-left: 0.1rem;
    color: var(--logo-green);
}

/* Pull Quotes — Magazine style */
blockquote {
    font-family: var(--font-display);
    font-size: 1.75rem;
    line-height: 1.3;
    font-weight: 400;
    text-align: center;
    margin: 4rem auto;
    max-width: 680px;
    padding: 3rem 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    position: relative;
    color: var(--ink);
}
blockquote::before {
    content: '“';
    position: absolute; top: -1rem; left: 50%;
    transform: translateX(-50%);
    font-size: 4rem; color: var(--bronze-soft);
    opacity: 0.4;
}

/* Image Captions */
figcaption {
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--ink-muted);
    text-align: center;
    margin-top: 1rem;
    text-transform: uppercase;
}

.post-content figcaption {
    letter-spacing: 0;
    text-transform: none;
}

/* TOC Styling — "In This Article" */
.post-toc {
    background: var(--paper-deep);
    border: 1px solid var(--hairline);
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 3rem;
}
.post-toc-title {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 1.5rem;
}

/* About Page Pillars */
.about-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin: 6rem 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    padding: 4rem 0;
}
.pillar-item h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--logo-green);
}
.pillar-item p {
    font-size: 0.9375rem;
    color: var(--ink-soft);
    line-height: 1.6;
}

/* Team Section */
.team-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin: 4rem 0;
}
.team-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.team-photo {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: var(--paper-deep);
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}
.team-role {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--bronze);
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .about-pillars, .team-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .post-content > p:first-of-type::first-letter { font-size: 4rem; }
}

/* ============================================================
   ARTICLE READING CONTRACT — stable column, images, and TOC
   ============================================================ */
:root {
    --article-column-width: 680px;
}

.post-header,
.post-header-inner,
.post-content {
    max-width: var(--article-column-width);
}

.post-feature-image {
    width: min(var(--article-column-width), calc(100vw - 32px));
    margin: var(--space-8) auto var(--space-12);
}

.post-feature-image picture {
    aspect-ratio: 16 / 9;
    border-radius: 8px;
}

.post-content {
    padding-left: 0;
    padding-right: 0;
}

.post-content img,
.post-content picture,
.post-content .kg-card,
.post-content figure,
.post-content .kg-width-wide,
.post-content .kg-width-full {
    width: 100%;
    max-width: 100%;
}

.post-content .kg-card,
.post-content figure {
    margin: var(--space-10) 0;
}

.post-content .kg-width-wide,
.post-content .kg-width-full {
    margin-left: 0;
    transform: none;
}

.post-content .kg-width-full img {
    width: 100%;
    max-width: 100%;
}

@media (min-width: 1280px) {
    .post-toc {
        left: max(24px, calc((100vw - var(--article-column-width)) / 2 - 296px));
        width: 240px;
        max-width: 240px;
        max-height: min(620px, calc(100vh - 180px));
        padding: 0 0 var(--space-5);
        border: 0;
        border-radius: 0;
        background: transparent;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 34px), transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 34px), transparent 100%);
    }

    .post-toc::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .post-toc-link {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
}

@media (min-width: 1440px) {
    .post-toc {
        left: calc((100vw - var(--article-column-width)) / 2 - 312px);
    }
}

@media (max-width: 820px) {
    .post-header,
    .post-content,
    .post-toc {
        width: min(100% - 32px, var(--article-column-width));
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 1279px) {
    .post-toc {
        max-height: none;
        overflow: visible;
    }

    .post-toc-mobile,
    .post-toc-nav {
        max-height: none;
        overflow: visible;
    }
}


/* ============================================================
   ARCHIVES PAGE
   ============================================================ */

.archives-page {
    padding: var(--space-16) 0 var(--space-24);
    background: var(--paper);
    min-height: 70vh;
}

.archives-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.archives-header {
    text-align: center;
    margin-bottom: var(--space-10);
}

.archives-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
    margin: var(--space-3) 0 0;
}

/* Search bar */
.archives-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: var(--space-10);
    border-bottom: 2px solid var(--ink);
    padding-bottom: var(--space-3);
    gap: var(--space-3);
}

.archives-search-icon {
    color: var(--ink-muted);
    flex-shrink: 0;
}

.archives-search-input {
    flex: 1;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    color: var(--ink);
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
}

.archives-search-input::placeholder {
    color: var(--ink-muted);
}

.archives-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.archives-count {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--ink-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Article list */
.archives-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.archives-item {
    border-bottom: 1px solid var(--hairline);
}

.archives-item-link {
    display: block;
    padding: var(--space-6) 0;
    transition: opacity 0.15s ease;
}

.archives-item-link:hover { opacity: 0.7; }
.archives-item-link:hover .archives-item-title { color: var(--sage); }

.archives-item-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.archives-item-tag {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--sage);
    background: rgba(79,114,89,0.08);
    padding: 0.2em 0.7em;
    border-radius: 100px;
}

.archives-item-date {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--ink-muted);
}

.archives-item-title {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.35;
    margin: 0 0 var(--space-1);
    transition: color 0.15s ease;
}

.archives-item-excerpt {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--ink-muted);
    line-height: 1.6;
    margin: var(--space-1) 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.archives-empty {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    color: var(--ink-muted);
    text-align: center;
    padding: var(--space-16) 0;
}

@media (max-width: 560px) {
    .archives-page { padding: var(--space-10) 0 var(--space-16); }
    .archives-container { padding: 0 var(--space-4); }
    .archives-item-title { font-size: 1rem; }
}

/* === HOME — LATEST / EDITORIAL / CATEGORY SECTIONS (2026-07) === */

.home-sec {
    padding: 3.5rem 0;
    background: var(--paper);
}
.home-sec-alt { background: var(--paper-deep); }

.home-sec-container {
    width: min(1180px, calc(100vw - 3rem));
    margin: 0 auto;
}

.home-sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}

.home-sec-eyebrow {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sage);
    margin-bottom: 0.3rem;
}

.home-sec-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.375rem, 2vw, 1.75rem);
    color: var(--ink);
    margin: 0;
}

.home-sec-link {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--sage);
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.home-sec-link:hover { text-decoration: underline; }

/* 3-column card grid shared by all home sections */
.lp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.lp-card {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}
.lp-card:hover .lp-img { transform: scale(1.035); }
.lp-card:hover .lp-title { color: var(--sage); }

.lp-img-wrap {
    border-radius: 12px;
    overflow: hidden;
    background: var(--logo-green);
    flex-shrink: 0;
}
.lp-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(.2,.7,.3,1);
}

/* Latest section: first card 3:2, rest 16:9 */
.latest-sec .lp-grid .lp-card:first-child .lp-img-wrap { aspect-ratio: 3/2; }
.latest-sec .lp-grid .lp-card:not(:first-child) .lp-img-wrap { aspect-ratio: 16/9; }

/* All other sections: 16:9 */
.ep-sec .lp-img-wrap,
.cat-sec .lp-img-wrap,
.more-sec .lp-img-wrap { aspect-ratio: 16/9; }

.lp-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.lp-tag {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sage);
}

.lp-title {
    font-family: var(--font-display);
    font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
    line-height: 1.28;
    color: var(--ink);
    text-wrap: balance;
    margin: 0;
    transition: color 0.2s;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Editorial picks: cream-deep background */
.ep-sec { background: #1e3328; }
.ep-sec .home-sec-head { border-bottom-color: rgba(247,241,235,0.15); }
.ep-sec .home-sec-eyebrow { color: #7daa8b; }
.ep-sec .home-sec-title { color: #f7f1eb; }
.ep-sec .home-sec-link { color: #a8c8b2; }
.ep-sec .lp-tag { color: #7daa8b; }
.ep-sec .lp-title { color: #f7f1eb; }
.ep-sec .lp-card:hover .lp-title { color: #a8c8b2; }
.ep-sec .lp-img-wrap { background: #2d4a35; }

/* Category sections: alternating border accent */
.cat-sec { border-top: 1px solid var(--hairline); }

/* === CATEGORY GRID: 2×2 equal grid (4 cards, same horizontal style) === */
.cat-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.cat-2x2-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
}

.cat-2x2-card:hover .cat-2x2-img { transform: scale(1.035); }
.cat-2x2-card:hover .cat-2x2-title { color: var(--sage); }

.cat-2x2-img-wrap {
    width: 32%;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--logo-green);
    aspect-ratio: 4/3;
}

.cat-2x2-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(.2,.7,.3,1);
}

.cat-2x2-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding-top: 0.2rem;
}

.cat-2x2-tag {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sage);
}

.cat-2x2-title {
    font-family: var(--font-display);
    font-size: clamp(0.875rem, 1.05vw, 1rem);
    line-height: 1.3;
    color: var(--ink);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}

.cat-2x2-excerpt {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--ink);
    opacity: 0.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 700px) {
    .cat-2x2 { grid-template-columns: 1fr; }
}

@media (max-width: 440px) {
    .cat-2x2-card { flex-direction: column; }
    .cat-2x2-img-wrap { width: 100%; aspect-ratio: 16/9; }
}

/* More articles */
.more-sec { background: var(--paper-deep); }

/* === MORE ARTICLES: 3×2 text-only grid === */
.more-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 2.5rem;
}

.more-card {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    text-decoration: none;
    color: inherit;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--hairline);
}

.more-card:hover .more-card-title { color: var(--sage); }

.more-card-meta {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.more-card-tag {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sage);
}

.more-card-date {
    font-size: 0.6875rem;
    color: var(--ink);
    opacity: 0.4;
}

.more-card-title {
    font-family: var(--font-display);
    font-size: clamp(0.9375rem, 1.05vw, 1rem);
    line-height: 1.3;
    color: var(--ink);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}

.more-card-excerpt {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--ink);
    opacity: 0.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 780px) {
    .more-grid { grid-template-columns: repeat(2, 1fr); gap: 0 1.75rem; }
}

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

/* Responsive */
@media (max-width: 900px) {
    .lp-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .latest-sec .lp-grid .lp-card:first-child .lp-img-wrap { aspect-ratio: 16/9; }
}
@media (max-width: 580px) {
    .lp-grid { grid-template-columns: 1fr; gap: 20px; }
    .home-sec { padding: 2.5rem 0; }
    .home-sec-container { width: calc(100vw - 1.5rem); }
}

/* === HERO FOLD: Vogue-style hero + top stories (2026-07) === */

/* Base styles (mobile-first) */
.hero-fold-stories {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    padding: 1.5rem 1.5rem;
    background: var(--paper);
}

.ts-card {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    text-decoration: none;
    color: inherit;
}

.ts-card:hover .ts-img { transform: scale(1.035); }
.ts-card:hover .ts-title { color: var(--sage); }

.ts-img-wrap {
    aspect-ratio: 16/9;
    border-radius: 10px;
    overflow: hidden;
    background: var(--logo-green);
    flex-shrink: 0;
}

.ts-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(.2,.7,.3,1);
}

.ts-tag {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sage);
    display: block;
    margin-bottom: 0.25rem;
}

.ts-title {
    font-family: var(--font-display);
    font-size: clamp(0.9375rem, 2.5vw, 1.0625rem);
    line-height: 1.22;
    color: var(--ink);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}

.ts-date {
    font-size: 0.75rem;
    color: #888;
    margin: 0.2rem 0 0;
}

/* Desktop: side-by-side fold */
@media (min-width: 901px) {
    .hero-fold {
        display: grid;
        grid-template-columns: 55fr 45fr;
        height: clamp(520px, 68vh, 860px);
        padding: 0.75rem;
        gap: 0.75rem;
        background: var(--paper);
    }

    /* Override hero-wrapper padding — fold provides the outer spacing */
    .hero-fold .hero-wrapper {
        padding: 0;
        height: 100%;
        background: transparent;
    }

    .hero-fold .hero {
        height: 100%;
        min-height: 0;
    }

    .hero-fold-stories {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        height: 100%;
        padding: 0;
        overflow: hidden;
        background: transparent;
    }

    .ts-card {
        flex: 1;
        gap: 0;
        border-radius: 14px;
        overflow: hidden;
        background: var(--paper-deep);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        min-height: 0;
    }

    .ts-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 30px rgba(0,0,0,0.07);
    }

    .ts-img-wrap {
        aspect-ratio: auto;
        border-radius: 0;
        flex: 1;
        min-height: 0;
    }

    .ts-body {
        padding: 0.875rem 1.125rem;
        flex-shrink: 0;
    }

    .ts-title {
        font-size: clamp(0.9375rem, 1.1vw, 1.125rem);
    }
}

@media (max-width: 580px) {
    .hero-fold-stories {
        grid-template-columns: 1fr;
        padding: 1.25rem 0.75rem;
    }
}

/* === TOP STORY SECTION: 1 featured + 2 side cards (2026-07) === */

.tsc-sec { background: var(--paper); }

.tsc-head {
    border-bottom: 1px solid var(--ink);
    padding-bottom: 0.625rem;
    margin-bottom: 2rem;
}

.tsc-label {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink);
}

/* Grid: left large (58%) + right two stacked (42%) */
.tsc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* Shared card base */
.tsc-feat,
.tsc-side {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    text-decoration: none;
    color: inherit;
}

.tsc-feat:hover .tsc-img,
.tsc-side:hover .tsc-img { transform: scale(1.035); }

.tsc-feat:hover .tsc-feat-title,
.tsc-side:hover .tsc-side-title { color: var(--sage); }

.tsc-img-wrap {
    border-radius: 12px;
    overflow: hidden;
    background: var(--logo-green);
    flex-shrink: 0;
}

/* Mobile: explicit aspect ratios */
.tsc-feat-img { aspect-ratio: 3/2; }
.tsc-side-img { aspect-ratio: 16/9; }

.tsc-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(.2,.7,.3,1);
}

.tsc-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.tsc-tag {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sage);
}

.tsc-feat-title {
    font-family: var(--font-display);
    font-size: clamp(1.125rem, 3vw, 1.5rem);
    line-height: 1.2;
    color: var(--ink);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}

.tsc-side-title {
    font-family: var(--font-display);
    font-size: clamp(0.9rem, 2.2vw, 1.0625rem);
    line-height: 1.22;
    color: var(--ink);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}

.tsc-date {
    font-size: 0.75rem;
    color: #888;
    margin: 0;
}

/* Tablet: 2-col, featured full-width on top */
@media (min-width: 600px) and (max-width: 900px) {
    .tsc-grid {
        grid-template-columns: 1fr 1fr;
    }
    .tsc-feat {
        grid-column: span 2;
    }
    .tsc-feat-img { aspect-ratio: 16/9; }
}

/* Desktop: 3-article asymmetric layout */
@media (min-width: 901px) {
    .tsc-grid {
        grid-template-columns: 58fr 42fr;
        grid-template-rows: 1fr 1fr;
        height: clamp(420px, 54vh, 640px);
        gap: 1.5rem;
    }

    /* Featured spans both rows on the left */
    .tsc-feat {
        grid-row: span 2;
        gap: 1rem;
        height: 100%;
    }

    /* Image fills remaining height after text body */
    .tsc-feat-img {
        aspect-ratio: auto;
        flex: 1;
        min-height: 0;
    }

    .tsc-side {
        gap: 0.75rem;
        min-height: 0;
    }

    .tsc-side-img {
        aspect-ratio: auto;
        flex: 1;
        min-height: 0;
    }

    .tsc-feat-title { font-size: clamp(1.1875rem, 1.6vw, 1.5rem); }
    .tsc-side-title { font-size: clamp(0.9rem, 1vw, 1.0625rem); }
}