/* ================================================================
 * Wagyu Israel — Phase 1 redesign (foundation)
 * Concept: Aged Beef & Sumi-e
 *
 * Layer that sits on top of Botble's stories theme stylesheets and
 * is registered LAST in platform/themes/stories/config.php so it
 * wins via cascade order without !important spam.
 *
 * To revert: delete this file + the registration line in config.php.
 * ================================================================ */


/* ----------------------------------------------------------------
 * 1. Design tokens
 * ---------------------------------------------------------------- */

:root {
    /* ---------- Brand ---------- */
    --color-primary:        #7A1F1F;   /* Wagyu Red — deep burgundy        */
    --color-primary-deep:   #4A0F0F;   /* Hover / strong on cream          */
    --color-accent:         #C9A961;   /* Marbling Gold                    */
    --color-accent-soft:    #E8D8B0;

    /* ---------- Ink (text) ---------- */
    --color-ink:            #1A1A1A;   /* Sumi black — primary text        */
    --color-ink-soft:       #4A4A4A;   /* Secondary text                   */
    --color-ink-muted:      #8A8580;   /* Meta, dates                      */

    /* ---------- Surfaces ---------- */
    --color-bg:             #F7F3EC;   /* Cream — page background          */
    --color-bg-alt:         #FBF8F2;   /* Card / elevated surface tint     */
    --color-surface:        #FFFFFF;
    --color-line:           #E5DFD5;   /* Borders / dividers               */
    --color-overlay:        rgba(26, 26, 26, .55);

    /* ---------- Category palette ---------- */
    --color-tag-food:        #C97A3F;
    --color-tag-meat:        #7A1F1F;
    --color-tag-destination: #3F5A6B;
    --color-tag-wagyu:       #C9A961;
    --color-tag-default:     #4A4A4A;

    /* ---------- Type ---------- */
    --font-serif:  'Frank Ruhl Libre', 'Noto Serif Hebrew', 'David Libre', Georgia, serif;
    --font-sans:   'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

    --fs-display:  clamp(2.25rem, 3.5vw + 1rem, 4rem);    /* 36 → 64 */
    --fs-h1:       clamp(2rem,    2vw + 1.25rem, 3rem);   /* 32 → 48 */
    --fs-h2:       clamp(1.625rem,1.2vw + 1rem,  2.125rem); /* 26 → 34 */
    --fs-h3:       clamp(1.25rem, 0.6vw + 1rem,  1.5rem); /* 20 → 24 */
    --fs-lead:     1.25rem;                                /* 20      */
    --fs-body:     1.0625rem;                              /* 17      */
    --fs-meta:     .8125rem;                               /* 13      */
    --fs-eyebrow:  .6875rem;                               /* 11      */

    --lh-tight:    1.15;
    --lh-snug:     1.3;
    --lh-normal:   1.55;
    --lh-relaxed:  1.85;

    /* ---------- Spacing ---------- */
    --space-1:  4px;   --space-2:  8px;   --space-3:  12px;
    --space-4:  16px;  --space-5:  24px;  --space-6:  32px;
    --space-7:  48px;  --space-8:  64px;  --space-9:  96px;
    --space-10: 128px;

    /* ---------- Layout ---------- */
    --container-max:    1280px;
    --container-narrow:  760px;   /* article reading width */

    /* ---------- Radii & shadows ---------- */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  16px;
    --shadow-card:       0 1px 2px rgba(0, 0, 0, .04),
                         0 8px 24px rgba(0, 0, 0, .06);
    --shadow-card-hover: 0 4px 8px rgba(0, 0, 0, .06),
                         0 16px 40px rgba(0, 0, 0, .10);

    /* ---------- Motion ---------- */
    --ease:      cubic-bezier(.2, .7, .2, 1);
    --dur-fast:  .15s;
    --dur-base:  .24s;
    --dur-slow:  .6s;

    /* ---------- Overrides for Botble theme variables ---------- */
    --color-secondary: var(--color-accent);
    --color-muted:     var(--color-ink-muted);
    --color-danger:    var(--color-primary);
    --primary-font:    var(--font-sans);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ----------------------------------------------------------------
 * 2. Base typography + global scroll behavior
 * ---------------------------------------------------------------- */

html {
    /* Anchor jumps must clear the sticky header; otherwise clicked
       headings land hidden underneath it. Sized to the compact-mode
       header (~60-70px once .header-top collapses) plus a margin. */
    scroll-padding-top: 100px;
    /* Smooth anchor navigation. prefers-reduced-motion override is
       already covered globally in section 1. */
    scroll-behavior: smooth;
}

html,
body {
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-ink);
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body[dir="rtl"] { text-align: right; }

p, li, td, th, dd, dt {
    font-family: var(--font-sans);
    color: var(--color-ink);
    line-height: var(--lh-relaxed);
}

blockquote {
    font-family: var(--font-serif);
    color: var(--color-ink-soft);
    line-height: var(--lh-normal);
    font-style: italic;
}

/* Headings — serif everywhere. The site reads as a single magazine
   typeface family across all heading sizes (display, post card title,
   widget label, related-post link). Anything visible that's a heading
   gets the serif. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.entry-title,
.post-title,
.post-title a,
.widget-title,
.widget-header-2 h5,
.related-post-title,
.related-post-title a,
.related-band-title,
.author-bio-name,
.wagyu-hero-title,
.wagyu-hero-title a,
.article-title,
.article-toc-title,
.font-heading,
.font-heading h1, .font-heading h2, .font-heading h3,
.font-heading h4, .font-heading h5, .font-heading h6,
.single-content h1, .single-content h2, .single-content h3,
.single-content h4, .single-content h5, .single-content h6,
.single-content article.entry-wraper h2,
.single-content article.entry-wraper h3,
.single-content article.entry-wraper h4,
.single-content article.entry-wraper h5,
.single-content article.entry-wraper h6,
.ck-content h1, .ck-content h2, .ck-content h3,
.ck-content h4, .ck-content h5, .ck-content h6 {
    font-family: var(--font-serif) !important;
    color: var(--color-ink);
    font-weight: 700;
    letter-spacing: -0.005em;
    line-height: var(--lh-snug);
}

/* Small UI heads stay readable: a touch lighter weight and tighter tracking
   so the serif feels intentional, not heavy, at small sizes. */
h5, h6, .h5, .h6,
.widget-title,
.related-post-title { font-weight: 600; letter-spacing: -0.003em; }

h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 700; }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: 1.25rem; }
h5, .h5 { font-size: 1.0625rem; }

/* Lead paragraph helper */
.lead, p.lead {
    font-size: var(--fs-lead);
    line-height: var(--lh-normal);
    color: var(--color-ink-soft);
    font-weight: 400;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
}
a:hover,
a:focus {
    color: var(--color-primary-deep);
}

/* Keep .color-white text on dark overlays readable */
.color-white,
.color-white a,
.color-white p,
.color-white h1, .color-white h2, .color-white h3,
.color-white h4, .color-white h5, .color-white h6,
.color-white .post-title, .color-white .post-title a,
.color-white .post-on, .color-white .post-by {
    color: #fff;
}


/* ----------------------------------------------------------------
 * 3. Header — sticky + shrinks on scroll
 * ---------------------------------------------------------------- */

.main-header {
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-line);
    box-shadow: 0 1px 0 rgba(26, 26, 26, .03);
    /* Sticky pinning at the top */
    position: sticky;
    top: 0;
    z-index: 100;
    transition: box-shadow var(--dur-base) var(--ease),
                background var(--dur-base) var(--ease);
}

.main-header .header-top {
    padding-block: 18px;
    overflow: hidden;
    max-height: 200px;            /* enough room for natural content */
    transition: max-height var(--dur-base) var(--ease),
                padding-block var(--dur-base) var(--ease),
                opacity var(--dur-base) var(--ease);
}

.main-header .logo {
    max-height: 56px;
    width: auto;
    object-fit: contain;
    transition: max-height var(--dur-base) var(--ease);
}

.main-header .main-menu li > a {
    /* Tightened from the static 16px so the compact bar feels lighter */
    transition: padding-block var(--dur-base) var(--ease);
}

/* Compact mode once the user scrolls past the threshold */
body.is-scrolled .main-header {
    background: color-mix(in srgb, var(--color-bg-alt) 92%, transparent);
    box-shadow: 0 2px 14px rgba(26, 26, 26, .08);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
}

/* Collapse the upper row (logo + lang + CTA) entirely on scroll.
   Leaves just .header-sticky visible — menu links and the hamburger. */
body.is-scrolled .main-header .header-top {
    max-height: 0;
    padding-block: 0;
    opacity: 0;
    pointer-events: none;
    border-bottom-color: transparent;
}

/* Tighten the surviving nav row so the whole sticky bar lands ~60px tall */
body.is-scrolled .main-header .main-menu li > a { padding-block: 10px; }
body.is-scrolled .main-header .header-sticky    { border-top-color: transparent; }

/* Neutralize Botble's stand-alone sticky-bar mode on the inner nav row.
   The whole .main-header is sticky already; we don't want a second sticky
   element competing with it. */
.main-header .header-sticky.sticky-bar {
    position: static !important;
    top: auto !important;
    inset-block: auto !important;
    width: auto !important;
    box-shadow: none !important;
}

.main-header .main-menu li > a {
    font-family: var(--font-sans);
    color: var(--color-ink);
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .01em;
    padding-block: 16px;
    transition: color var(--dur-fast) var(--ease);
    position: relative;
}
.main-header .main-menu li > a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 8px;
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--dur-base) var(--ease);
}
.main-header .main-menu li > a:hover,
.main-header .main-menu .current-menu-item > a {
    color: var(--color-primary);
}
.main-header .main-menu li > a:hover::after,
.main-header .main-menu .current-menu-item > a::after {
    transform: scaleX(1);
}

.main-header .header-sticky {
    border-top: 1px solid var(--color-line);
    background: var(--color-bg-alt);
}

.main-header .search-icon {
    color: var(--color-ink-muted);
    transition: color var(--dur-fast) var(--ease);
}
.main-header .search-icon:hover { color: var(--color-primary); }

.scroll-progress {
    background: var(--color-accent) !important;
    height: 2px !important;
}


/* ----------------------------------------------------------------
 * 4. Eyebrows, pills, badges
 * ---------------------------------------------------------------- */

.eyebrow,
.entry-meta .post-cat,
.post-cat {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    line-height: 1;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--color-tag-default);
    background: color-mix(in srgb, var(--color-tag-default) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-tag-default) 20%, transparent);
    text-decoration: none;
}

/* Force the pills off Botble's "random_color" + dot pattern */
.post-cat .dot,
.entry-meta .post-cat .dot,
.post-cat::before { display: none !important; }

/* Category-specific tints — match by Hebrew + English class hooks Botble emits */
[class*="post-cat"][href*="food"],
.post-cat-food,
.cat-food {
    color: var(--color-tag-food);
    background: color-mix(in srgb, var(--color-tag-food) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-tag-food) 25%, transparent);
}
[class*="post-cat"][href*="meat"],
.post-cat-meat,
.cat-meat {
    color: var(--color-tag-meat);
    background: color-mix(in srgb, var(--color-tag-meat) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-tag-meat) 25%, transparent);
}
[class*="post-cat"][href*="destination"],
.post-cat-destination,
.cat-destination {
    color: var(--color-tag-destination);
    background: color-mix(in srgb, var(--color-tag-destination) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-tag-destination) 25%, transparent);
}
[class*="post-cat"][href*="wagyu"],
.post-cat-wagyu,
.cat-wagyu {
    color: var(--color-tag-wagyu);
    background: color-mix(in srgb, var(--color-tag-wagyu) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-tag-wagyu) 30%, transparent);
}


/* ----------------------------------------------------------------
 * 5. Cards (grid, list, sidebar)
 * ---------------------------------------------------------------- */

.post-card-1,
.post-card-2,
.post-card-3,
.carausel-post-1,
article.hover-up-2,
.post-block-list article {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: transform var(--dur-base) var(--ease),
                box-shadow var(--dur-base) var(--ease),
                border-color var(--dur-base) var(--ease);
}
.post-card-1:hover,
.post-card-2:hover,
.post-card-3:hover,
.carausel-post-1:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: color-mix(in srgb, var(--color-line) 50%, transparent);
}

.post-card-1 .post-content,
.post-card-2 .post-content,
.post-card-3 .post-content,
.carausel-post-1 .post-content {
    padding: var(--space-5);
}

.post-title,
.post-title a,
.post-title.font-weight-900 a {
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-weight: 700;
    line-height: var(--lh-snug);
    letter-spacing: -0.005em;
}
.post-title a:hover { color: var(--color-primary); }

/* Image area — consistent ratio for visual rhythm */
.post-thumb.thumb-overlay,
.thumb-overlay.img-hover-slide {
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
}

.post-thumb { border-radius: var(--radius-sm); overflow: hidden; }

.post-thumb-80 {
    width: 80px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.img-hover-slide,
.img-hover-scale img {
    transition: transform var(--dur-slow) var(--ease);
}
.post-card-1:hover .img-hover-slide,
.post-card-2:hover .img-hover-slide,
.post-card-3:hover .img-hover-slide,
.carausel-post-1:hover .img-hover-slide {
    transform: scale(1.04);
}

/* Meta — date / author / time-to-read */
.entry-meta,
.entry-meta a,
.entry-meta .post-on,
.entry-meta .post-by,
.entry-meta .time-reading {
    font-family: var(--font-sans);
    color: var(--color-ink-muted);
    font-weight: 500;
    font-size: var(--fs-meta);
    letter-spacing: .02em;
    text-transform: none;
}

/* Botble inserts ".has-dot" between meta items — make the separator subtle */
.entry-meta .has-dot::before {
    content: "·";
    color: var(--color-ink-muted);
    opacity: .55;
    padding-inline: 6px;
}


/* ----------------------------------------------------------------
 * 6. Hot-tags strip (top of homepage)
 * ---------------------------------------------------------------- */

.hot-tags ul.tags li a {
    color: var(--color-ink-soft);
    font-weight: 500;
    transition: color var(--dur-fast) var(--ease);
}
.hot-tags ul.tags li a:hover { color: var(--color-primary); }

.hot-tags .widget-title { color: var(--color-ink-muted); }


/* ----------------------------------------------------------------
 * 7. Single post (article body)
 * ---------------------------------------------------------------- */

.single-content { background: var(--color-bg); }

.single-content .entry-header h1,
.single-content .entry-title {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
    letter-spacing: -0.015em;
    margin-bottom: var(--space-6);
}

.single-content article.entry-wraper {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: clamp(var(--space-5), 4vw, var(--space-7));
    box-shadow: var(--shadow-card);
    max-width: var(--container-narrow);
    margin-inline: auto;
}

.single-content article.entry-wraper p,
.single-content article.entry-wraper li {
    font-size: 1.125rem;        /* 18px reading body */
    line-height: 1.85;
}

.single-content article.entry-wraper h2,
.single-content article.entry-wraper h3 {
    font-family: var(--font-serif);
    margin-top: 2em;
    margin-bottom: .75em;
}

.single-content article.entry-wraper figure img,
.single-content article.entry-wraper img.border-radius-10 {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.single-content article.entry-wraper blockquote {
    border-inline-start: 4px solid var(--color-accent);
    border-inline-end: 0;
    background: var(--color-accent-soft);
    padding: var(--space-4) var(--space-5);
    margin-block: var(--space-5);
    color: var(--color-ink);
    border-radius: var(--radius-sm);
    font-style: normal;
    font-family: var(--font-serif);
}

/* Author bio card */
.single-content .author-bio {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: var(--space-6) !important;
}
.single-content .author-bio .vcard .fn,
.single-content .author-info h4 {
    font-family: var(--font-serif);
    font-weight: 700;
}


/* ----------------------------------------------------------------
 * 8. Buttons
 * ---------------------------------------------------------------- */

.btn,
.button,
button.btn,
.btn-radius {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: .9375rem;
    letter-spacing: .01em;
    border-radius: 999px;
    padding-inline: var(--space-5);
    padding-block: 11px;
    transition: background var(--dur-base) var(--ease),
                color var(--dur-base) var(--ease),
                border-color var(--dur-base) var(--ease),
                transform var(--dur-fast) var(--ease);
    border: 1.5px solid transparent;
}

.btn.bg-primary,
.btn-radius.bg-primary,
.btn-primary {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(122, 31, 31, .15);
}
.btn.bg-primary:hover,
.btn-radius.bg-primary:hover,
.btn-primary:hover {
    background: var(--color-primary-deep) !important;
    border-color: var(--color-primary-deep) !important;
    transform: translateY(-1px);
}

.btn-outline-primary,
.btn-bordered {
    background: transparent !important;
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}
.btn-outline-primary:hover,
.btn-bordered:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
}

.btn.btn-gold {
    background: var(--color-accent) !important;
    color: var(--color-ink) !important;
    border-color: var(--color-accent) !important;
}
.btn.btn-gold:hover {
    background: color-mix(in srgb, var(--color-accent) 85%, var(--color-ink) 15%) !important;
}

.btn-search.bg-white {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-line) !important;
    color: var(--color-primary) !important;
}


/* ----------------------------------------------------------------
 * 9. Sidebar widgets
 * ---------------------------------------------------------------- */

.primary-sidebar .sidebar-widget,
.sidebar-widget {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-card);
}

.widget-title,
.widget-header-2 h5 {
    font-family: var(--font-serif);
    color: var(--color-ink);
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-accent);
    display: inline-block;
    letter-spacing: -0.005em;
}

.widget_categories ul.font-small li {
    border-bottom: 1px dashed var(--color-line);
    padding-block: 12px;
    font-size: .95rem;
}
.widget_categories ul.font-small li a {
    color: var(--color-ink-soft);
    font-weight: 500;
    transition: color var(--dur-fast) var(--ease);
}
.widget_categories ul.font-small li a:hover { color: var(--color-primary); }


/* ----------------------------------------------------------------
 * 10. Breadcrumbs (visible)
 * ---------------------------------------------------------------- */

.breadcrumb {
    background: transparent;
    padding: 0 0 var(--space-4) 0;
    margin-bottom: var(--space-5);
    font-size: var(--fs-meta);
    color: var(--color-ink-muted);
    letter-spacing: .02em;
    font-family: var(--font-sans);
}
.breadcrumb a {
    color: var(--color-ink-muted);
    transition: color var(--dur-fast) var(--ease);
}
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb span:not([class]) {
    display: inline-block;
    padding-inline: var(--space-2);
    color: var(--color-line);
}
body[dir="rtl"] .breadcrumb a + span::before,
body[dir="ltr"] .breadcrumb a + span::before { content: "›"; }


/* ----------------------------------------------------------------
 * 11. Footer
 * ---------------------------------------------------------------- */

footer.bg-grey,
footer {
    background: var(--color-bg-alt) !important;
    color: var(--color-ink-soft);
    border-top: 1px solid var(--color-line);
    padding-block: var(--space-7) var(--space-5);
}

footer .widget-header-2 h5,
footer h5 {
    font-family: var(--font-serif);
    color: var(--color-ink);
    font-weight: 700;
}

footer p,
footer .textwidget p,
footer .font-small {
    color: var(--color-ink-soft);
    font-size: .9375rem;
}

footer a {
    color: var(--color-ink-soft);
    transition: color var(--dur-fast) var(--ease);
}
footer a:hover { color: var(--color-primary); }

footer .footer-copy-right {
    border-top: 1px solid var(--color-line);
    padding-top: var(--space-5);
    margin-top: var(--space-6);
    color: var(--color-ink-muted);
    font-size: var(--fs-meta);
}

footer .header-social-network li a {
    border-radius: 999px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    display: inline-block;
    text-align: center;
    transition: transform var(--dur-fast) var(--ease),
                background var(--dur-base) var(--ease);
}
footer .header-social-network li a:hover { transform: translateY(-2px); }


/* ----------------------------------------------------------------
 * 12. Layout rhythm
 * ---------------------------------------------------------------- */

main { background: var(--color-bg); }

.bg-grey { background: var(--color-bg) !important; }

.container { max-width: var(--container-max); }

.loop-grid,
.post-module-1,
.post-module-3,
.post-module-5 { margin-block: var(--space-5); }

.widget-header-2 {
    border-bottom: 1px solid var(--color-line);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-5);
}

hr {
    border-color: var(--color-line);
    opacity: 1;
}


/* ----------------------------------------------------------------
 * 13. Forms
 * ---------------------------------------------------------------- */

input[type="email"],
input[type="text"],
input[type="search"],
textarea,
.form-control {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: 1rem;
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}
.form-control:focus,
input:focus,
textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(122, 31, 31, .08);
    outline: none;
}

.form-subcriber,
.newsletter-form {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    box-shadow: var(--shadow-card);
}


/* ----------------------------------------------------------------
 * 14. Focus & accessibility — visible keyboard focus
 * ---------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}


/* ----------------------------------------------------------------
 * 15. CKEditor-authored content (homepage uses this directly)
 * ---------------------------------------------------------------- */

.ck-content h1,
.ck-content h2,
.ck-content h3 {
    font-family: var(--font-serif);
    letter-spacing: -0.01em;
}
.ck-content p { line-height: var(--lh-relaxed); }
.ck-content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
    transition: text-decoration-color var(--dur-fast) var(--ease);
}
.ck-content a:hover {
    text-decoration-color: var(--color-primary);
}


/* ----------------------------------------------------------------
 * 16. Mobile tuning
 * ---------------------------------------------------------------- */

@media (max-width: 768px) {
    html, body { font-size: 16px; }

    .main-header .header-top { padding-block: 14px; }
    .main-header .logo { max-height: 44px; }

    .single-content article.entry-wraper { padding: var(--space-5); }
    .single-content article.entry-wraper p,
    .single-content article.entry-wraper li { font-size: 1.0625rem; }

    .post-card-1 .post-content,
    .post-card-2 .post-content,
    .post-card-3 .post-content,
    .carausel-post-1 .post-content { padding: var(--space-4); }

    footer { padding-block: var(--space-6) var(--space-4); }
}


/* ----------------------------------------------------------------
 * 17. Subtle entrance animation
 * ---------------------------------------------------------------- */

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
.fade-up { animation: fadeUp var(--dur-slow) var(--ease) both; }


/* ----------------------------------------------------------------
 * 18. Utility: visually hidden (SEO/A11y heading without taking space)
 * ---------------------------------------------------------------- */

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


/* ----------------------------------------------------------------
 * 18.5. Article page — Phase 4
 * Reading progress, full-bleed hero, eyebrow+title masthead,
 * sticky TOC + vertical share rail, related-posts band.
 * ---------------------------------------------------------------- */

/* Reading progress bar — fixed strip beneath the sticky header */
.reading-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background: transparent;
    z-index: 101;
    pointer-events: none;
}
.reading-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--color-accent);
    transition: width 80ms linear;
}

/* Full-bleed article hero */
.article-hero {
    position: relative;
    width: 100%;
    height: clamp(280px, 60vh, 620px);
    overflow: hidden;
    margin-bottom: 0;
}
.article-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.article-hero-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(247, 243, 236, 0) 60%, var(--color-bg) 100%);
    pointer-events: none;
}

/* Article header / masthead */
.article-header {
    background: var(--color-bg);
    padding-block: var(--space-7) var(--space-6);
}
.article-header-inner {
    max-width: var(--container-narrow);
    margin-inline: auto;
    text-align: center;
}

.article-eyebrow {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-primary);
    text-decoration: none;
    margin-bottom: var(--space-4);
    padding: 6px 14px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    transition: background var(--dur-fast) var(--ease);
}
.article-eyebrow:hover {
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-primary-deep);
}

.article-title {
    font-family: var(--font-serif) !important;
    font-size: var(--fs-display);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--color-ink);
    margin: 0 0 var(--space-5);
}

.article-deck {
    font-family: var(--font-sans);
    font-size: var(--fs-lead);
    line-height: var(--lh-normal);
    color: var(--color-ink-soft);
    margin: 0 0 var(--space-6);
}

.article-byline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: var(--fs-meta);
    color: var(--color-ink-muted);
}
.article-byline-author {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.article-byline-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-line);
}
.article-byline-name { color: var(--color-ink-soft); }
.article-byline-name strong {
    color: var(--color-ink);
    font-weight: 600;
}
.article-byline-dot { opacity: .55; }

/* Article body + sidebar grid */
.article-layout-wrap {
    padding-block: var(--space-5) var(--space-8);
}
.article-layout {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: var(--space-7);
    align-items: start;
}
@media (min-width: 1080px) {
    .article-layout { grid-template-columns: 240px minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .article-layout { grid-template-columns: 1fr; gap: var(--space-5); }
}

.article-sidebar { /* RTL: this sits on the right side automatically */ }

.article-sidebar-inner {
    position: sticky;
    top: 90px;                  /* clears the ~60-70px compact sticky header */
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-height: calc(100vh - 110px);
    overflow: auto;
    padding-block: var(--space-2);
}

/* Hide scroll bars but keep scrolling */
.article-sidebar-inner { scrollbar-width: thin; }
.article-sidebar-inner::-webkit-scrollbar { width: 4px; }
.article-sidebar-inner::-webkit-scrollbar-thumb {
    background: var(--color-line);
    border-radius: 4px;
}

/* TOC */
.article-toc-wrap[hidden] { display: none !important; }
.article-toc-title {
    font-family: var(--font-sans);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-line);
}
@media (max-width: 1079px) {
    .article-toc-title { display: none; }
}

.article-toc {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: toc;
    font-family: var(--font-sans);
}
.article-toc li {
    counter-increment: toc;
    margin: 0;
    padding: 0;
}
.article-toc a {
    display: block;
    padding: var(--space-2) 0;
    color: var(--color-ink-soft);
    font-size: .9375rem;
    line-height: 1.4;
    text-decoration: none;
    border-inline-start: 2px solid transparent;
    padding-inline-start: var(--space-3);
    transition: color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}
.article-toc a:hover { color: var(--color-primary); }
.article-toc a.is-active {
    color: var(--color-primary);
    border-inline-start-color: var(--color-accent);
    font-weight: 600;
}
.article-toc .toc-h3 a {
    padding-inline-start: calc(var(--space-3) + 14px);
    font-size: .875rem;
}

/* On narrow screens collapse TOC contents but keep its dot rail visible */
@media (max-width: 1079px) {
    .article-toc-wrap {
        display: none;   /* hide TOC entirely below 1080px */
    }
}

/* Vertical share rail */
.article-share-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding-block: var(--space-3);
    border-block-start: 1px solid var(--color-line);
}
@media (min-width: 1080px) {
    .article-share-wrap { align-items: flex-start; }
}
.article-share-label {
    font-family: var(--font-sans);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
    margin-bottom: var(--space-2);
}
@media (max-width: 1079px) {
    .article-share-label { display: none; }
}
.article-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    color: var(--color-ink-soft);
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}
.article-share-btn:hover,
.article-share-btn:focus-visible {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    transform: translateY(-2px);
}
.article-share-btn.is-copied {
    background: var(--color-accent);
    color: var(--color-ink);
    border-color: var(--color-accent);
}

/* On mobile show the share rail horizontally above the body */
@media (max-width: 767px) {
    .article-sidebar-inner {
        flex-direction: row;
        align-items: center;
        max-height: none;
        overflow: visible;
        position: static;
    }
    .article-share-wrap {
        flex-direction: row;
        flex-wrap: wrap;
        border-block-start: 0;
        padding-block: 0;
    }
}

/* Article body — override Phase 1 max-width since it's now controlled by grid */
.single-content.article-layout-wrap article.entry-wraper.article-body {
    max-width: none;
    margin-inline: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}
/* Re-apply the reading "card" inside the article body */
.single-content.article-layout-wrap article.entry-wraper.article-body .entry-main-content {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: clamp(var(--space-5), 4vw, var(--space-7));
    box-shadow: var(--shadow-card);
}

.single-content.article-layout-wrap article.entry-wraper.article-body .entry-main-content > * {
    max-width: 760px;
    margin-inline: auto;
}
.single-content.article-layout-wrap article.entry-wraper.article-body .entry-main-content img,
.single-content.article-layout-wrap article.entry-wraper.article-body .entry-main-content figure,
.single-content.article-layout-wrap article.entry-wraper.article-body .entry-main-content blockquote {
    max-width: none;
}

/* Anchor headings — give H2/H3 inside body an offset so the sticky header
   doesn't cover them when the user clicks a TOC link. Mirrors the global
   scroll-padding-top so behavior is identical regardless of which property
   the browser honors. */
.entry-main-content h2[id],
.entry-main-content h3[id] {
    scroll-margin-top: 100px;
}

/* Tags strip */
.article-tags {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-line);
    font-family: var(--font-sans);
    font-size: var(--fs-meta);
}
.article-tags-label {
    color: var(--color-ink-muted);
    margin-inline-end: var(--space-3);
}
.article-tag {
    display: inline-block;
    margin-inline-end: var(--space-2);
    margin-block-end: var(--space-2);
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--color-bg-alt);
    color: var(--color-ink-soft);
    border: 1px solid var(--color-line);
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}
.article-tag:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* Author bio (new layout) */
aside.author-bio {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
    margin-top: var(--space-7);
    padding: var(--space-6) !important;
    background: var(--color-bg-alt) !important;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: none;
}
.author-bio-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--color-line);
}
.author-bio-info { flex: 1; }
.author-bio-name {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 var(--space-2);
    color: var(--color-ink);
}
.author-bio-info p {
    margin: 0;
    color: var(--color-ink-soft);
    font-size: 1rem;
    line-height: 1.7;
}

@media (max-width: 600px) {
    aside.author-bio { flex-direction: column; align-items: stretch; }
    .author-bio-avatar { width: 64px; height: 64px; }
}

/* Comments wrapper */
.article-comments {
    margin-top: var(--space-7);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-line);
}

/* Related posts band */
.related-band {
    background: var(--color-bg-alt);
    border-top: 1px solid var(--color-line);
    padding-block: var(--space-8) var(--space-7);
    margin-top: var(--space-7);
}
.related-band-header { margin-bottom: var(--space-6); }
.related-band-title {
    font-family: var(--font-serif);
    font-size: var(--fs-h2);
    font-weight: 700;
    color: var(--color-ink);
    margin: 0;
    letter-spacing: -0.005em;
}
.related-band-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    background: var(--color-accent);
    margin-top: var(--space-3);
    border-radius: 2px;
}
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-5);
}
.related-post {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform var(--dur-base) var(--ease),
                box-shadow var(--dur-base) var(--ease);
    display: flex;
    flex-direction: column;
}
.related-post:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}
.related-post-thumb {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.related-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease);
}
.related-post:hover .related-post-thumb img { transform: scale(1.04); }

.related-post-content {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--space-3);
}
.related-post-cat {
    align-self: flex-start;
    font-family: var(--font-sans);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-primary);
    text-decoration: none;
    padding: 2px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.related-post-title {
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.35;
    font-weight: 700;
    color: var(--color-ink);
    margin: 0;
}
.related-post-title a { color: inherit; text-decoration: none; }
.related-post-title a:hover { color: var(--color-primary); }
.related-post-meta {
    margin-top: auto;
    font-family: var(--font-sans);
    font-size: var(--fs-meta);
    color: var(--color-ink-muted);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.related-post-dot { opacity: .5; }


/* ----------------------------------------------------------------
 * 19. Hero — full-bleed featured-post banner on the homepage
 * ---------------------------------------------------------------- */

.wagyu-hero {
    position: relative;
    width: 100%;
    min-height: clamp(440px, 60vh, 640px);
    overflow: hidden;
    isolation: isolate;
    margin-bottom: var(--space-6);
    display: flex;
    align-items: flex-end;
}

.wagyu-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: -2;
    transition: transform var(--dur-slow) var(--ease);
    will-change: transform;
}
.wagyu-hero:hover .wagyu-hero-bg { transform: scale(1.03); }

.wagyu-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(26, 26, 26, .15) 0%,
        rgba(26, 26, 26, .40) 50%,
        rgba(26, 26, 26, .88) 100%);
    z-index: -1;
}

.wagyu-hero-inner {
    width: 100%;
    padding-block: var(--space-7);
}

.wagyu-hero-content {
    max-width: 760px;
    color: #fff;
}

.wagyu-hero-eyebrow {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-accent);
    text-decoration: none;
    margin-bottom: var(--space-4);
    padding: 6px 14px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 999px;
    transition: background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}
.wagyu-hero-eyebrow:hover {
    color: var(--color-accent-soft);
    background: rgba(255, 255, 255, .14);
}

.wagyu-hero-title {
    font-family: var(--font-serif);
    font-size: var(--fs-display);
    line-height: 1.05;
    color: #fff;
    margin: 0 0 var(--space-5);
    text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
    font-weight: 700;
    letter-spacing: -0.015em;
}
.wagyu-hero-title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
}
.wagyu-hero-title a:hover { color: var(--color-accent-soft); }

.wagyu-hero-lead {
    font-family: var(--font-sans);
    font-size: var(--fs-lead);
    line-height: var(--lh-normal);
    color: rgba(255, 255, 255, .92);
    max-width: 620px;
    margin: 0 0 var(--space-6);
    text-shadow: 0 1px 12px rgba(0, 0, 0, .25);
}

.wagyu-hero-actions {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
}

.wagyu-hero-cta {
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35) !important;
}

.wagyu-hero-meta {
    color: rgba(255, 255, 255, .82);
    font-size: var(--fs-meta);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.wagyu-hero-meta-dot { opacity: .5; }
.wagyu-hero-author { font-weight: 600; color: #fff; }

@media (max-width: 768px) {
    .wagyu-hero { min-height: 56vh; }
    .wagyu-hero-inner { padding-block: var(--space-6); }
    .wagyu-hero-actions { gap: var(--space-3); }
    .wagyu-hero-meta { font-size: 12px; }
}