/* ==========================================================================
   Franko's 12 Buck Pizza - blog pages only (/blog/ and /blog/<article>/)
   Premium motion design in the brand palette (white, red, coral, amber).

   How the motion is layered:
   - Hero entrance (gradient, side icons, word-by-word heading, search,
     featured article, article image mask) is pure CSS, so it starts at first
     paint and never waits for JavaScript.
   - Scroll reveals, floating loops, parallax, magnetic buttons and tilt are
     added by blog-motion.js (GSAP). Elements marked [data-reveal] are only
     hidden while html.motion is set, and that class is removed if GSAP does
     not start, so content is never stuck invisible.
   - All animation is switched off for prefers-reduced-motion.
   ========================================================================== */

.blog-page {
    --grad: linear-gradient(120deg, #D62828 0%, #F0643C 50%, #FFC857 100%);
    --grad-strong: linear-gradient(120deg, #A61E1E 0%, #D62828 100%);
    --grad-text: linear-gradient(110deg, #A61E1E 0%, #D62828 55%, #E04A2A 100%);
    --ease-spring: cubic-bezier(.22, 1.2, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* Elements revealed on scroll by GSAP (hidden only while html.motion is set) */
.motion [data-reveal] { opacity: 0; }

/* Light breadcrumb ------------------------------------------------------- */
.breadcrumb--light ol { justify-content: center; }
.breadcrumb--light li { color: var(--muted); }
.breadcrumb--light li + li::before { color: #b4b9c3; }
.breadcrumb--light a { color: var(--ink); }
.breadcrumb--light a:hover { color: var(--red-strong); }

/* Hero background: soft gradient mesh ------------------------------------ */
.blog-hero2, .post-hero { position: relative; overflow: hidden; isolation: isolate; background: #fff; }
.blog-hero2::after, .post-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(214, 40, 40, .22), transparent);
}
.hero-mesh { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.mesh-blob { position: absolute; border-radius: 50%; will-change: transform; }
.mesh-blob--1 { left: -200px; top: -260px; width: 660px; height: 660px; background: radial-gradient(circle, rgba(214, 40, 40, .2), rgba(214, 40, 40, 0) 66%); }
.mesh-blob--2 { right: -180px; top: -140px; width: 580px; height: 580px; background: radial-gradient(circle, rgba(255, 200, 87, .22), rgba(255, 200, 87, 0) 66%); }
.mesh-blob--3 { left: 32%; bottom: -340px; width: 560px; height: 560px; background: radial-gradient(circle, rgba(240, 100, 60, .15), rgba(240, 100, 60, 0) 66%); }
.mesh-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(21, 21, 21, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(21, 21, 21, .045) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 32%, #000 25%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 32%, #000 25%, transparent 75%);
}

/* Floating glass icons (left and right edges of the hero) ---------------- */
.float-side { position: absolute; top: 0; bottom: 0; z-index: 1; display: none; pointer-events: none; }
.float-side--left { left: 0; }
.float-side--right { right: 0; }
.float-item { position: absolute; top: var(--y); }
.float-side--left .float-item { left: min(var(--x), calc(100% - 76px)); }
.float-side--right .float-item { right: min(var(--x), calc(100% - 76px)); }
.float-bob { display: block; will-change: transform; }
.float-glass {
    position: relative;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .5));
    box-shadow: inset 0 1px 0 #fff, 0 18px 40px -14px rgba(214, 40, 40, .4), 0 6px 14px rgba(17, 12, 10, .06);
    color: var(--red-strong);
    pointer-events: auto;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transform: perspective(600px) rotateX(8deg) rotateY(-12deg);
    transition: transform .6s var(--ease-spring), box-shadow .4s ease;
}
.float-side--right .float-glass { transform: perspective(600px) rotateX(8deg) rotateY(12deg); }
.float-glass:hover { transform: perspective(600px) rotate(-12deg) scale(1.1); box-shadow: inset 0 1px 0 #fff, 0 24px 50px -12px rgba(214, 40, 40, .5); }
.float-glass .ico { width: 26px; height: 26px; stroke-width: 1.8; }
.float-item.is-glow .float-glass { border-color: rgba(255, 255, 255, .45); background: var(--grad); color: #fff; box-shadow: 0 20px 44px -12px rgba(214, 40, 40, .6); }
.float-item.is-glow .float-glass::before {
    content: "";
    position: absolute;
    inset: -18px;
    z-index: -1;
    border-radius: 34px;
    background: radial-gradient(circle, rgba(240, 100, 60, .32), rgba(240, 100, 60, 0) 70%);
}
.shape { display: block; border-radius: 50%; }
.shape--ring { width: 46px; height: 46px; border: 3px solid rgba(214, 40, 40, .2); }
.shape--ring-sm { width: 26px; height: 26px; border: 2px solid rgba(255, 200, 87, .45); }
.shape--dot { width: 14px; height: 14px; background: var(--grad); opacity: .55; }
.shape--dot-sm { width: 8px; height: 8px; background: #FFC857; opacity: .7; }
.shape--blob { width: 54px; height: 54px; border-radius: 42% 58% 60% 40% / 45% 45% 55% 55%; background: linear-gradient(135deg, rgba(214, 40, 40, .32), rgba(255, 200, 87, .32)); }
.shape--blob-sm { width: 30px; height: 30px; border-radius: 50% 40% 55% 45%; background: linear-gradient(135deg, rgba(255, 200, 87, .45), rgba(214, 40, 40, .22)); }

/* Listing hero ----------------------------------------------------------- */
.blog-hero2-inner { position: relative; z-index: 2; max-width: 820px; padding-top: 72px; padding-bottom: 56px; text-align: center; }
.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 7px 14px;
    border: 1px solid rgba(214, 40, 40, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .75);
    box-shadow: 0 8px 24px rgba(214, 40, 40, .1);
    color: var(--red-strong);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.hero-kicker .ico { width: 16px; height: 16px; }
.hero-title { max-width: 13em; margin: 18px auto 16px; font-size: clamp(2.1rem, 6.4vw, 4.1rem); line-height: 1.08; letter-spacing: -.025em; }
.word { display: inline-block; overflow: hidden; margin-bottom: -.12em; padding-bottom: .12em; vertical-align: bottom; }
.word-in { display: inline-block; }
.word.is-accent .word-in { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { max-width: 36em; margin: 0 auto; color: var(--text); font-size: 1.1rem; }

/* Search ---------------------------------------------------------------- */
.blog-search { position: relative; max-width: 560px; margin: 30px auto 0; }
.blog-search input {
    width: 100%;
    min-height: 60px;
    padding: 14px 56px;
    border: 1px solid rgba(21, 21, 21, .1);
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    box-shadow: inset 0 1px 0 #fff, 0 14px 36px rgba(17, 12, 10, .08);
    color: var(--ink);
    font: 1rem var(--body);
    -webkit-appearance: none;
    appearance: none;
    transition: box-shadow .35s ease, border-color .35s ease, transform .45s var(--ease-out);
}
.blog-search input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.blog-search input::placeholder { color: #8a8f99; }
.blog-search input:focus { outline: none; border-color: rgba(214, 40, 40, .55); box-shadow: 0 0 0 5px rgba(214, 40, 40, .14), 0 20px 44px rgba(214, 40, 40, .16); transform: scale(1.02); }
.search-ico { position: absolute; left: 20px; top: 50%; display: flex; color: var(--muted); pointer-events: none; translate: 0 -50%; transition: color .3s ease, transform .5s var(--ease-spring); }
.search-ico .ico { width: 22px; height: 22px; }
.blog-search:focus-within .search-ico { color: var(--red-strong); transform: rotate(-14deg) scale(1.15); }
.search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--ink);
    cursor: pointer;
    translate: 0 -50%;
    transition: background-color .25s, color .25s, transform .4s var(--ease-spring);
}
.search-clear:not([hidden]) { animation: clearIn .4s var(--ease-spring); }
.search-clear:hover { background: var(--red-strong); color: #fff; transform: rotate(90deg); }
.search-clear .ico { width: 18px; height: 18px; }

/* Category tabs with sliding indicator ------------------------------------ */
.blog-index { padding-top: 36px; }
.blog-tabs-wrap { display: flex; justify-content: center; margin-bottom: 40px; }
html:not(.js) .blog-tabs-wrap, html:not(.js) .blog-search { display: none; }
.blog-tabs {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--bg-soft);
}
.blog-tab {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 16px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--text);
    font: 600 .95rem var(--body);
    cursor: pointer;
    transition: color .3s ease;
}
.blog-tab::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--ease-out);
}
.blog-tab:hover:not([aria-pressed="true"])::after { transform: scaleX(1); }
.blog-tab .ico { width: 18px; height: 18px; color: var(--red-strong); transition: color .3s, transform .5s var(--ease-spring); }
.blog-tab:hover .ico { transform: rotate(-10deg) scale(1.15); }
.tab-count { min-width: 24px; padding: 1px 7px; border-radius: 999px; background: #fff; color: var(--ink); font-size: .78rem; transition: background-color .3s, color .3s; }
.tab-indicator {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    border-radius: 16px;
    background: var(--grad-strong);
    box-shadow: 0 10px 24px -8px rgba(214, 40, 40, .6);
    opacity: 0;
    transition: transform .55s var(--ease-spring), width .45s var(--ease-spring), height .3s ease, opacity .3s;
}
.tab-indicator.is-ready { opacity: 1; }
.blog-tabs:not(.has-indicator) .blog-tab[aria-pressed="true"] { background: var(--red-strong); }
.blog-tab[aria-pressed="true"], .blog-tab[aria-pressed="true"] .ico { color: #fff; }
.blog-tab[aria-pressed="true"] .tab-count { background: rgba(255, 255, 255, .22); color: #fff; }

/* Featured article with animated gradient border -------------------------- */
.featured-post {
    position: relative;
    margin-bottom: 56px;
    padding: 2px;
    overflow: hidden;
    border-radius: 26px;
    box-shadow: 0 34px 70px -30px rgba(214, 40, 40, .38), 0 8px 24px rgba(17, 12, 10, .06);
    isolation: isolate;
}
.featured-post::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    width: 160%;
    aspect-ratio: 1;
    background: conic-gradient(from 0deg, #D62828, #FFC857, #F0643C, #D62828, #FFC857, #D62828);
    translate: -50% -50%;
}
.featured-inner { display: grid; overflow: hidden; border-radius: 24px; background: #fff; }
.featured-media { position: relative; display: block; overflow: hidden; background: #1c1917; }
.featured-media img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .8s var(--ease-out); }
.featured-post:hover .featured-media img { transform: scale(1.05); }
.featured-post:hover .post-badge { background: var(--red-strong); color: #fff; }
.featured-post:hover .post-badge .ico { color: #fff; }
.featured-post-body { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 26px 24px 28px; }
.featured-badge {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--grad-strong);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .03em;
}
.featured-badge .ico { width: 15px; height: 15px; }
.featured-post h2 { margin: 0; font-size: clamp(1.5rem, 3.2vw, 2.2rem); line-height: 1.18; }
.featured-post h2 a { color: var(--ink); text-decoration: none; }
.featured-post h2 a:hover { color: var(--red-strong); }
.featured-post-body > p:not(.post-card-meta) { margin: 0; color: var(--muted); }
.featured-post .btn { align-self: flex-start; }

/* Grid header, empty state and pagination --------------------------------- */
.blog-grid-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 22px; }
.blog-grid-title { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); }
.blog-count { color: var(--muted); font-size: .92rem; font-weight: 600; }
.post-grid { transition: opacity .2s ease; }
.post-grid.is-swapping { opacity: 0; }
.no-results { padding: 36px 24px; border-radius: 20px; background: var(--bg-soft); text-align: center; }
.blog-pagination { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 48px; }
.page-list { position: relative; display: flex; gap: 8px; }
.page-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
    font: 700 1rem var(--body);
    cursor: pointer;
    transition: color .3s, border-color .3s, background-color .3s, transform .4s var(--ease-spring);
}
.page-btn:hover:not(:disabled) { border-color: var(--red-strong); transform: translateY(-2px); }
.page-btn:disabled { opacity: .4; cursor: default; }
.page-num[aria-current="page"] { border-color: transparent; background: transparent; color: #fff; }
.page-list:not(.has-indicator) .page-num[aria-current="page"] { background: var(--red-strong); }
.page-btn .ico { width: 20px; height: 20px; transition: transform .4s var(--ease-spring); }
.page-prev:hover:not(:disabled) .ico { transform: translateX(-4px); }
.page-next:hover:not(:disabled) .ico { transform: translateX(4px); }
.page-indicator {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--grad-strong);
    box-shadow: 0 10px 24px -8px rgba(214, 40, 40, .6);
    transition: transform .55s var(--ease-spring), width .35s ease;
}

/* Article hero ----------------------------------------------------------- */
.post-hero-inner { position: relative; z-index: 2; max-width: 880px; padding-top: 72px; padding-bottom: 130px; text-align: center; }
.post-cat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 8px 16px;
    border: 1px solid rgba(214, 40, 40, .18);
    border-radius: 999px;
    background: rgba(214, 40, 40, .07);
    color: var(--red-strong);
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .3s, color .3s, transform .4s var(--ease-spring);
}
.post-cat .ico { width: 16px; height: 16px; }
.post-cat:hover { background: var(--red-strong); color: #fff; transform: translateY(-2px); }
.post-title { max-width: 18em; margin: 18px auto 20px; font-size: clamp(1.9rem, 5.2vw, 3.4rem); line-height: 1.12; letter-spacing: -.02em; }
.post-byline { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; color: var(--muted); font-size: .95rem; }
.byline-avatar { width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 6px 16px rgba(214, 40, 40, .25); }
.byline-author { color: var(--ink); font-weight: 700; }
.byline-item { display: inline-flex; align-items: center; gap: 6px; }
.byline-item .ico { width: 17px; height: 17px; color: var(--red-strong); }
.post-excerpt { max-width: 40em; margin: 18px auto 0; color: var(--text); font-size: 1.12rem; }

/* Share buttons --------------------------------------------------------- */
.share-list { display: flex; flex-wrap: wrap; gap: 10px; }
.share-list--hero { justify-content: center; margin-top: 24px; }
.share-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 4px 12px rgba(17, 12, 10, .05);
    cursor: pointer;
    transition: transform .45s var(--ease-spring), background-color .3s, color .3s, border-color .3s, box-shadow .3s;
}
.share-btn .ico { width: 18px; height: 18px; }
.share-btn:hover { transform: translateY(-3px) rotate(-8deg); border-color: var(--red-strong); background: var(--red-strong); color: #fff; box-shadow: 0 12px 24px -8px rgba(214, 40, 40, .6); }
.share-copy .ico-check { display: none; }
.share-copy.is-copied { border-color: #2E7D32; background: #2E7D32; color: #fff; }
.share-copy.is-copied .ico-link { display: none; }
.share-copy.is-copied .ico-check { display: block; animation: popIn .5s var(--ease-spring); }
.copy-tip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--ink);
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    translate: -50% 0;
    transform: translateY(6px) scale(.9);
    transition: opacity .25s ease, transform .4s var(--ease-spring);
}
.share-copy.is-copied .copy-tip { opacity: 1; transform: none; }
.share-rail { display: none; }
.share-rail-label { margin-bottom: 4px; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }
.share-list--rail { flex-direction: column; }
.share-list--rail .copy-tip { left: calc(100% + 10px); top: 50%; bottom: auto; translate: 0 -50%; }
.share-inline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 2.6em; padding: 20px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-soft); }
.share-inline-title { margin: 0; color: var(--ink); font-weight: 700; }

/* Featured image with masked reveal --------------------------------------- */
.post-feature { position: relative; z-index: 3; max-width: 1100px; margin: -100px auto 0; }
.post-feature-mask { overflow: hidden; border-radius: 26px; background: #1c1917; box-shadow: 0 40px 80px -30px rgba(17, 12, 10, .45); }
.post-feature-parallax { will-change: transform; }
.post-feature-mask img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transform: scale(1.06); }

/* Reading progress -------------------------------------------------------- */
.read-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 70; height: 4px; background: rgba(214, 40, 40, .08); pointer-events: none; }
.read-progress-bar { display: block; height: 100%; background: var(--grad); box-shadow: 0 0 12px rgba(214, 40, 40, .5); transform: scaleX(0); transform-origin: 0 50%; }

/* Article layout --------------------------------------------------------- */
.post-layout { display: grid; gap: 28px; max-width: 1180px; padding-top: 36px; padding-bottom: 64px; }
.post-layout > * { min-width: 0; }
.article-body { max-width: 720px; font-size: 1.08rem; line-height: 1.8; }
.article-body h2 { margin-top: 1.9em; scroll-margin-top: 12px; }
.article-body h3 { margin-top: 1.4em; }
.article-body ul, .article-body ol { padding-left: 1.3em; }
.article-body li { margin-bottom: .45em; }
.article-body .table-wrap { margin: 1.2em 0 1.6em; border-radius: 16px; }
.article-body table { font-size: .97rem; }
.article-body .faq { margin-top: 16px; }
.article-figure { margin: 2em 0; }
.article-figure-mask { overflow: hidden; border-radius: 18px; background: #1c1917; }
.article-figure-mask img { width: 100%; transform: scale(1.08); }
.article-figure figcaption { margin-top: 10px; color: var(--muted); font-size: .92rem; }

/* Pull quote */
.pull-quote {
    position: relative;
    margin: 0 0 2.2em;
    padding: 28px 30px 28px 34px;
    overflow: hidden;
    border: 1px solid rgba(214, 40, 40, .14);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(214, 40, 40, .07), rgba(255, 200, 87, .09));
}
.pull-quote::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--grad); }
.pull-quote p { position: relative; margin: 0; padding-right: 40px; color: var(--ink); font-family: var(--head); font-size: clamp(1.18rem, 2.6vw, 1.45rem); font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.pull-quote-ico { position: absolute; right: 18px; top: 16px; width: 54px; height: 54px; color: rgba(214, 40, 40, .16); stroke-width: 1.5; }

/* Table of contents with active-section indicator */
.toc { padding: 2px 20px 6px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255, 255, 255, .9); box-shadow: 0 16px 40px -22px rgba(17, 12, 10, .25); }
.toc summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    color: var(--ink);
    font-family: var(--head);
    font-size: 1.05rem;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: "+"; color: var(--red-strong); font-size: 1.5rem; }
.toc[open] summary::after { content: "\2013"; }
.toc-track { position: relative; margin: 0 0 14px; padding-left: 16px; }
.toc-track::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--line); }
.toc-indicator { position: absolute; left: 0; top: 0; width: 2px; height: 24px; border-radius: 2px; background: var(--grad-strong); opacity: 0; transition: transform .5s var(--ease-spring), height .3s ease, opacity .3s; }
.toc-indicator.is-ready { opacity: 1; }
.toc-list { margin: 0; padding: 0; list-style: none; }
.toc-list li { margin: 0; }
.toc-list a { display: block; padding: 6px 0; color: var(--muted); font-size: .95rem; line-height: 1.4; text-decoration: none; transition: color .25s ease, transform .35s var(--ease-out); }
.toc-list a:hover { color: var(--ink); transform: translateX(3px); }
.toc-list a.is-active { color: var(--red-strong); font-weight: 700; }

/* Order card, inline CTA, menu links, back link */
.aside-cta { display: none; margin-top: 20px; padding: 24px; border-radius: 20px; background: var(--dark); color: #e2e2e2; box-shadow: 0 24px 48px -24px rgba(17, 12, 10, .6); }
.aside-cta .btn { width: 100%; margin-top: 10px; }
.article-cta { margin: 2.2em 0; padding: 26px; border-left: 6px solid var(--red); border-radius: 20px; background: var(--dark); color: #e6e6e6; }
.article-cta-title { margin: 0 0 6px; color: #fff; font-family: var(--head); font-size: 1.35rem; font-weight: 600; line-height: 1.2; }
.article-cta p { margin-bottom: 0; }
.article-cta .btn-row { margin-top: 16px; }
.menu-links { margin-top: 2.4em; padding: 24px; border: 2px dashed #d5dae3; border-radius: 20px; }
.article-body .menu-links h2 { margin-top: 0; font-size: 1.35rem; }
.menu-links ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.menu-links li { margin: 0; }
.menu-links a { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-weight: 700; }
.back-link { margin-top: 2em; }
.back-link a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-weight: 700; }
.back-link .ico { transition: transform .4s var(--ease-spring); }
.back-link a:hover .ico { transform: translateX(-4px); }

/* Hero entrance animations (pure CSS) ------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
    .hero-mesh { animation: meshIn 1.2s var(--ease-out) backwards; }
    .mesh-blob--1 { animation: drift1 18s ease-in-out infinite alternate; }
    .mesh-blob--2 { animation: drift2 22s ease-in-out infinite alternate; }
    .mesh-blob--3 { animation: drift3 20s ease-in-out infinite alternate; }
    .is-page-hidden .mesh-blob, .is-offscreen .mesh-blob { animation-play-state: paused; }

    .float-side--left .float-item { animation: floatInLeft 1.1s var(--ease-spring) backwards; animation-delay: calc(.15s + var(--i) * .09s); }
    .float-side--right .float-item { animation: floatInRight 1.1s var(--ease-spring) backwards; animation-delay: calc(.3s + var(--i) * .09s); }

    .blog-hero2 .breadcrumb, .post-hero .breadcrumb { animation: slideInLeft .8s var(--ease-out) .05s backwards; }
    .hero-kicker, .post-cat { animation: fadeUp .8s var(--ease-out) .15s backwards; }
    .word-in { animation: wordUp .85s var(--ease-out) backwards; animation-delay: calc(.25s + var(--w) * .055s); }
    /* LCP candidates stay visible from the first frame: movement only, no fade from invisible */
    .hero-sub { animation: riseIn 1s var(--ease-out) .3s backwards; }
    .blog-search { animation: searchIn .9s var(--ease-spring) .85s backwards; }
    .blog-page .blog-tabs-wrap { animation: fadeUp .9s var(--ease-out) .95s backwards; }
    .blog-page .featured-post { animation: featuredIn 1.1s var(--ease-out) 1.05s backwards; }
    .featured-post::before { animation: spinBorder 8s linear infinite; }
    .featured-post.is-offscreen::before, .is-page-hidden .featured-post::before { animation-play-state: paused; }

    .post-byline > * { animation: fadeUp .7s var(--ease-out) backwards; }
    .post-byline > :nth-child(1) { animation-delay: .55s; }
    .post-byline > :nth-child(2) { animation-delay: .62s; }
    .post-byline > :nth-child(3) { animation-delay: .69s; }
    .post-byline > :nth-child(4) { animation-delay: .76s; }
    .post-excerpt { animation: riseIn 1s var(--ease-out) .35s backwards; }
    .share-list--hero .share-btn { animation: popIn .6s var(--ease-spring) backwards; }
    .share-list--hero .share-btn:nth-child(1) { animation-delay: .9s; }
    .share-list--hero .share-btn:nth-child(2) { animation-delay: .96s; }
    .share-list--hero .share-btn:nth-child(3) { animation-delay: 1.02s; }
    .share-list--hero .share-btn:nth-child(4) { animation-delay: 1.08s; }
    .post-feature-mask { animation: maskReveal 1.2s var(--ease-out) .2s backwards; }
    .post-feature-mask img { animation: imgSettle 1.8s var(--ease-out) .2s backwards; }
}

@keyframes meshIn { from { opacity: 0; } }
@keyframes drift1 { to { transform: translate3d(80px, 60px, 0) scale(1.08); } }
@keyframes drift2 { to { transform: translate3d(-70px, 50px, 0) scale(1.1); } }
@keyframes drift3 { to { transform: translate3d(60px, -50px, 0) scale(.95); } }
@keyframes floatInLeft { from { opacity: 0; transform: translate3d(-150px, 0, 0) scale(.7) rotate(-18deg); } }
@keyframes floatInRight { from { opacity: 0; transform: translate3d(150px, 0, 0) scale(.7) rotate(18deg); } }
@keyframes slideInLeft { from { opacity: 0; transform: translate3d(-30px, 0, 0); } }
@keyframes fadeUp { from { opacity: 0; transform: translate3d(0, 18px, 0); } }
@keyframes riseIn { from { transform: translate3d(0, 16px, 0); } }
@keyframes wordUp { from { opacity: 0; transform: translate3d(0, 105%, 0) rotate(3deg); } }
@keyframes searchIn { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.9); } }
@keyframes featuredIn { from { opacity: 0; transform: translate3d(0, 40px, 0) scale(.97); } }
@keyframes spinBorder { to { transform: rotate(360deg); } }
@keyframes maskReveal { from { clip-path: inset(14% 10% 14% 10% round 26px); } to { clip-path: inset(0 0 0 0 round 26px); } }
@keyframes imgSettle { from { transform: scale(1.2); } }
@keyframes popIn { from { opacity: 0; transform: scale(.4) rotate(-25deg); } }
@keyframes clearIn { from { opacity: 0; transform: scale(.4) rotate(-90deg); } }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 767px) {
    .float-side { display: block; bottom: auto; width: 72px; height: 76px; }
    .float-item:not(.keep-mobile) { display: none; }
    .float-item.keep-mobile { top: 14px; }
    .float-side--left .float-item.keep-mobile { left: 14px; }
    .float-side--right .float-item.keep-mobile { right: 14px; }
    .float-glass { width: 44px; height: 44px; border-radius: 14px; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .float-glass .ico { width: 20px; height: 20px; }
    .float-item.is-glow .float-glass::before { inset: -10px; }
    .blog-search input { min-height: 56px; }
    /* Phones: every category stays on screen as a grid of three, icon above the name, count in the corner */
    .blog-tabs-wrap { display: block; margin-bottom: 30px; }
    .blog-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: 100%; padding: 5px; border-radius: 20px; }
    .blog-tab {
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        min-height: 70px;
        padding: 12px 6px 9px;
        border-radius: 15px;
        font-size: .78rem;
        line-height: 1.15;
        text-align: center;
    }
    .blog-tab::after { display: none; }
    .blog-tab .ico { width: 21px; height: 21px; }
    .blog-tab .tab-count { position: absolute; top: 5px; right: 5px; min-width: 20px; padding: 0 5px; font-size: .68rem; line-height: 1.55; }
    .tab-indicator { border-radius: 15px; }
    .post-hero .breadcrumb li:last-child { display: none; }
    .featured-post { border-radius: 22px; }
    .featured-inner { border-radius: 20px; }
    .post-feature { margin-top: -80px; }
    .post-feature-mask { border-radius: 18px; }
    .post-hero-inner { padding-bottom: 104px; }
    .pull-quote { padding: 22px 22px 22px 26px; }
}

@media (min-width: 768px) {
    .float-side { display: block; width: calc((100% - 860px) / 2); }
}

@media (min-width: 768px) and (max-width: 1079px) {
    .float-side { width: 112px; }
    .float-item:not(.keep-tablet) { display: none; }
    .float-glass { width: 52px; height: 52px; border-radius: 16px; }
    .float-glass .ico { width: 22px; height: 22px; }
    .blog-hero2-inner, .post-hero-inner { max-width: calc(100% - 232px); padding-top: 40px; }
}

@media (min-width: 900px) {
    .featured-inner { grid-template-columns: 1.12fr .88fr; }
    .featured-post-body { padding: 40px 44px; }
}

@media (min-width: 1080px) {
    .blog-hero2-inner { padding-top: 40px; padding-bottom: 72px; }
    .post-hero-inner { padding-top: 40px; padding-bottom: 150px; }
    .post-feature { margin-top: -120px; }
    .post-layout { grid-template-columns: minmax(0, 720px) 300px; justify-content: space-between; column-gap: 56px; padding-top: 56px; }
    .article-aside { grid-column: 2; grid-row: 1; }
    .article-body { grid-column: 1; grid-row: 1; }
    .article-aside-inner { position: sticky; top: 100px; }
    .aside-cta { display: block; }
    .article-body h2 { scroll-margin-top: 16px; }
}

@media (min-width: 1280px) {
    .post-layout { grid-template-columns: 56px minmax(0, 700px) 300px; justify-content: center; column-gap: 44px; }
    .share-rail { position: sticky; top: 120px; display: flex; flex-direction: column; align-items: center; gap: 12px; grid-column: 1; grid-row: 1; align-self: start; }
    .article-body { grid-column: 2; }
    .article-aside { grid-column: 3; }
}