/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background-color:#f5f5f0;background-image:url(/assets/paper.webp);background-repeat:repeat;background-size:auto;color:#1a1a1a;line-height:1.65;min-height:100vh}
a{color:#1a6fc4;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{line-height:1.25;font-weight:700}

/* ── CSS Variables ─────────────────────────────────────── */
:root{
  --accent:#c8a96e;
  --accent-dark:#a8894e;
  --header-bg:#0a0a0a;
  --header-h:64px;
  --max-w:1240px;
  --radius:8px;
  --shadow:0 2px 12px rgba(0,0,0,.08);
  --shadow-lg:0 8px 32px rgba(0,0,0,.12);
  --border:#e8e5df;
  --text-muted:#6b7280;
}

/* ── Header ────────────────────────────────────────────── */
.site-header{
  background:var(--header-bg);
  position:sticky;top:0;z-index:500;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{
  max-width:var(--max-w);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  height:var(--header-h);padding:0 1.25rem;gap:1rem;
}
.site-logo{
  font-size:1.2rem;font-weight:800;color:#fff;
  letter-spacing:-.02em;white-space:nowrap;flex-shrink:0;
}
.site-logo span{color:var(--accent)}
.site-logo:hover{text-decoration:none;opacity:.9}

/* Nav */
.main-nav{display:flex;gap:.15rem;list-style:none;align-items:center}
.main-nav>li{position:relative}
.main-nav>li>a{
  font-size:.85rem;color:rgba(255,255,255,.75);font-weight:500;
  padding:.45rem .8rem;border-radius:5px;display:flex;align-items:center;gap:.25rem;
  transition:color .15s,background .15s;white-space:nowrap;
}
.main-nav>li>a:hover{color:#fff;background:rgba(255,255,255,.08);text-decoration:none}
.nav-has-dropdown>a::after{content:'▾';font-size:.6rem;opacity:.5;margin-left:.1rem}

.nav-dropdown{
  display:none;position:absolute;top:calc(100% + 6px);left:0;
  min-width:200px;background:#1a1a1a;
  border:1px solid rgba(255,255,255,.1);border-radius:7px;
  box-shadow:0 12px 40px rgba(0,0,0,.4);z-index:600;padding:.4rem 0;
  list-style:none;
}
.nav-has-dropdown.dropdown-open .nav-dropdown{display:block}
.nav-dropdown li{list-style:none}
.nav-dropdown a{
  display:block;padding:.5rem 1.1rem;font-size:.85rem;
  color:rgba(255,255,255,.7);white-space:nowrap;transition:all .12s;
}
.nav-dropdown a:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}

/* Search */
.header-search{display:flex;align-items:center;flex-shrink:0}
.header-search form{display:flex}
.header-search input{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  border-radius:6px 0 0 6px;padding:.38rem .75rem;font-size:.85rem;
  color:#fff;outline:none;width:160px;transition:width .2s,border-color .15s;
}
.header-search input::placeholder{color:rgba(255,255,255,.35)}
.header-search input:focus{width:200px;border-color:var(--accent)}
.header-search button{
  background:var(--accent);border:none;border-radius:0 6px 6px 0;
  padding:.38rem .7rem;cursor:pointer;color:#0a0a0a;font-size:.9rem;
  transition:background .15s;
}
.header-search button:hover{background:var(--accent-dark)}

/* Mobile hamburger */
.nav-toggle{
  display:none;background:none;border:none;cursor:pointer;
  padding:.4rem;color:rgba(255,255,255,.75);
}
.nav-toggle svg{display:block}

@media(max-width:900px){
  .header-inner{position:relative}
  .nav-toggle{display:flex;align-items:center}
  .header-search input{display:none}
  .header-search button{border-radius:6px;padding:.45rem .6rem}
  /* burger left, logo center, search right */
  #site-nav{order:-1}
  .site-logo{position:absolute;left:50%;transform:translateX(-50%)}
  nav{position:static}
  .main-nav{
    display:none;flex-direction:column;gap:0;
    position:absolute;top:100%;left:0;right:0;
    background:#1a1a1a;
    border-top:1px solid rgba(255,255,255,.08);
    box-shadow:0 8px 32px rgba(0,0,0,.55);
    padding:.35rem 0;z-index:600;
    max-height:calc(100vh - 60px);
    max-height:calc(100dvh - 60px - env(safe-area-inset-bottom, 0px));
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .main-nav.open{display:flex}
  .main-nav{align-items:stretch}
  .main-nav>li>a{
    display:flex;align-items:center;gap:0;width:100%;
    border-radius:0;padding:.7rem 1.25rem;
    color:rgba(255,255,255,.85);font-size:.85rem;font-weight:500;
    white-space:nowrap;
  }
  .main-nav>li>a::after,.nav-has-dropdown>a::after{display:none}
  .main-nav>li>a:hover{background:rgba(255,255,255,.06)}
  /* flatten More submenu: hide trigger, always show all categories */
  #nav-more>a{display:none}
  .nav-dropdown{
    position:static;display:block;
    border:none;box-shadow:none;
    padding:0;margin:0;background:transparent;
  }
  .nav-dropdown li{margin:0;padding:0}
  .nav-dropdown li a{
    display:flex;align-items:center;width:100%;
    padding:.7rem 1.25rem;
    color:rgba(255,255,255,.85);font-size:.85rem;font-weight:500;
    white-space:nowrap;transition:background .15s;
  }
  .nav-dropdown li a:hover{background:rgba(255,255,255,.06);text-decoration:none;color:#fff}
  .article-brands.article-brands--hero{display:none}
}
@media(max-width:600px){
  .header-inner{padding:0 1rem}
}

/* ── Layout ─────────────────────────────────────────────── */
.page-wrap{
  max-width:var(--max-w);margin:2rem auto;
  padding:0 1.25rem;
  display:grid;grid-template-columns:1fr 300px;gap:2rem;
}
.page-wrap>main,.page-wrap>aside{min-width:0}
@media(max-width:960px){.page-wrap{grid-template-columns:1fr}}
@media(max-width:600px){.page-wrap{margin:1.25rem auto;padding:0 .85rem}}

/* ── Cards ──────────────────────────────────────────────── */
.card{
  background:#fff;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);transition:box-shadow .2s,transform .2s;
}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.card-img{aspect-ratio:16/9;overflow:hidden;background:#ede9e1}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.card:hover .card-img img{transform:scale(1.03)}
.card-body{padding:1rem 1.25rem 1.25rem}
.card-body .card-img-cats{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.45rem;margin-bottom:.1rem}
.card-body .card-img-cat{
  font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent-dark);background:#fdf6ea;
  padding:.2rem .55rem;border-radius:3px;
  border:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  white-space:nowrap;text-decoration:none;transition:background .15s,color .15s;
}
.card-body .card-img-cat:hover{background:var(--accent);color:#fff;text-decoration:none}
.card-cat{
  font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--accent-dark);margin-bottom:.4rem;
}
.card-cat a{color:inherit}
.card-cat a:hover{text-decoration:none;opacity:.8}
.card-title{font-size:1rem;font-weight:700;line-height:1.35;margin-bottom:.45rem}
.card-title a{color:#1a1a1a}
.card-title a:hover{color:#1a6fc4;text-decoration:none}
.card-excerpt{font-size:.875rem;color:#555;line-height:1.5}
.card-meta{font-size:.78rem;color:var(--text-muted);margin-top:.55rem;display:flex;gap:.6rem;flex-wrap:wrap}
.card-brands{font-size:.72rem;color:var(--accent-dark);font-weight:600;margin-top:.35rem}
.card-read-more{font-size:.82rem;font-weight:600;color:var(--accent-dark);margin-left:auto}
.card-read-more:hover{color:var(--accent);text-decoration:none}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.5rem}
@media(max-width:600px){.grid{grid-template-columns:1fr;gap:1rem}}

/* Featured (first card large) */
.grid-featured{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem}
.grid-featured .card:first-child{grid-column:1/-1}
.grid-featured .card:first-child .card-img{aspect-ratio:21/9}
.grid-featured .card:first-child .card-title{font-size:1.4rem}
@media(max-width:700px){
  .grid-featured{grid-template-columns:1fr}
  .grid-featured .card:first-child .card-img{aspect-ratio:16/9}
  .grid-featured .card:first-child .card-title{font-size:1.1rem}
}

/* ── Pagination ─────────────────────────────────────────── */
.pagination{display:flex;gap:.4rem;justify-content:center;margin:2.5rem 0;flex-wrap:wrap}
.pagination a,.pagination span{
  padding:.45rem .9rem;border-radius:5px;font-size:.875rem;
  border:1px solid var(--border);color:#444;transition:all .15s;
}
.pagination a:hover{background:#1a6fc4;color:#fff;border-color:#1a6fc4;text-decoration:none}
.pagination .active{background:#1a6fc4;color:#fff;border-color:#1a6fc4}

/* ── Sidebar ────────────────────────────────────────────── */
.sidebar-widget{
  background:#fff;border-radius:var(--radius);
  border:1px solid var(--border);overflow:hidden;margin-bottom:1.5rem;
}
.widget-title{
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:.8rem 1.25rem;background:#f9f7f3;border-bottom:1px solid var(--border);color:#444;
}
.widget-list{list-style:none;padding:.4rem 0}
.widget-list li{padding:.5rem 1.25rem;border-bottom:1px solid #f5f2ed;font-size:.875rem}
.widget-list li:last-child{border-bottom:none}
.widget-list a{color:#222;font-weight:500}
.widget-list a:hover{color:#1a6fc4;text-decoration:none}
.widget-list .meta{font-size:.75rem;color:var(--text-muted);margin-top:.15rem}
.widget-list .count{
  float:right;font-size:.72rem;background:#f0ece4;
  border-radius:99px;padding:.1rem .5rem;color:#777;font-weight:600;
}

/* Sidebar thumb list */
.widget-thumb-list{list-style:none;padding:.4rem 0}
.widget-thumb-item{
  display:flex;gap:.75rem;align-items:flex-start;
  padding:.65rem 1.25rem;border-bottom:1px solid #f5f2ed;
}
.widget-thumb-item:last-child{border-bottom:none}
.widget-thumb-item img{
  width:64px;height:48px;object-fit:cover;border-radius:4px;flex-shrink:0;
}
.widget-thumb-item .thumb-text{flex:1;min-width:0}
.widget-thumb-item a{font-size:.82rem;font-weight:600;color:#222;line-height:1.3;display:block}
.widget-thumb-item a:hover{color:#1a6fc4;text-decoration:none}
.widget-thumb-item .meta{font-size:.73rem;color:var(--text-muted);margin-top:.2rem}

/* ── Article hero (image + overlay) ────────────────────── */
.article-hero{
  position:relative;border-radius:10px;overflow:hidden;
  margin-bottom:1.75rem;background:#0a0a0a;
  aspect-ratio:16/9;
}
.article-hero img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.article-hero-overlay{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.72) 40%,
    rgba(0,0,0,.2) 75%,
    transparent 100%
  );
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:2rem 2.25rem 2rem;
}
.article-hero-cats{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.75rem}
.article-hero-cats a{
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:#fff;background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.25);
  padding:.22rem .65rem;border-radius:4px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .15s,color .15s,border-color .15s;
}
.article-hero-cats a:hover{background:var(--accent);color:#0a0a0a;border-color:var(--accent);text-decoration:none}
.article-hero-title{
  font-size:2rem;font-weight:800;line-height:1.2;letter-spacing:-.025em;
  color:#fff;margin-bottom:.85rem;
  text-shadow:0 2px 16px rgba(0,0,0,.6);
}
.article-hero-meta{
  display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;
  font-size:.82rem;color:rgba(255,255,255,.78);
}
.article-hero-meta .dot{opacity:.45}
.article-hero-meta time{color:rgba(255,255,255,.78)}
.meta-img-count{display:inline-flex;align-items:center;gap:.3rem}
.meta-img-count--dark{color:var(--text-muted)}
.card-img-count{display:inline-flex;align-items:center;gap:.25rem;vertical-align:middle}
.article-footer-group--mobile{display:none}
.article-footer-meta{margin-top:1.5rem}
.article-footer-group{margin-bottom:1.1rem}
.article-footer-group .article-brands,.article-footer-group .article-cat,.article-footer-group .tags-row{margin-top:0;margin-bottom:0}
.article-footer-label{
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-muted);margin-bottom:.45rem;
}
@media(max-width:700px){
  .article-hero-title{font-size:1.3rem}
  .article-hero-overlay{padding:1.25rem 1.25rem 1.25rem}
  .article-hero-overlay .article-hero-cats{display:none}
  .article-brands.article-brands--hero{display:none}
  .article-footer-group--mobile{display:block}
}
@media(max-width:480px){
  .article-hero-title{font-size:1.1rem}
  .article-hero-meta{font-size:.76rem;gap:.5rem}
}

/* ── Card image meta overlay ────────────────────────────── */
.card-img{position:relative}
.card-img-meta{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(to top,rgba(0,0,0,.65) 0%,rgba(0,0,0,.1) 70%,transparent 100%);
  padding:.55rem .85rem .65rem;
  display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:.5rem;
  pointer-events:none;
}
.card-img-meta a,.card-img-meta *{pointer-events:auto}
.card-img-cats{display:flex;flex-wrap:wrap;gap:.3rem;flex:1;min-width:0}
.card-img-cat{
  font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:#fff;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.35);
  padding:.18rem .55rem;border-radius:3px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-decoration:none;transition:background .15s,border-color .15s;
}
.card-img-cat:hover{background:var(--accent);border-color:var(--accent);color:#0a0a0a;text-decoration:none}
.card-img-date{
  font-size:.7rem;color:rgba(255,255,255,.9);white-space:nowrap;flex-shrink:0;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}

/* Card title below image */
.card-title{font-size:1rem;font-weight:700;line-height:1.35;margin-bottom:.45rem}
.card-title a{color:#1a1a1a;text-decoration:none}
.card-title a:hover{color:#1a6fc4;text-decoration:none}

/* ── Blog hero (home page H1) ───────────────────────────── */
.blog-hero{
  margin-bottom:1.75rem;
  padding:.25rem 0 1.5rem;
  
}
.blog-hero-title{
  font-size:2rem;font-weight:800;line-height:1.2;
  color:#1a1a1a;margin-bottom:.5rem;
  letter-spacing:-.03em;
}
.blog-hero-title em{
  font-style:normal;
  background:linear-gradient(90deg,var(--accent-dark),var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.blog-hero-desc{
  font-size:.95rem;line-height:1.7;
  color:var(--text-muted);margin:0;
  /*max-width:600px;*/
}
@media(max-width:700px){
  .blog-hero-title{font-size:1.45rem}
  .blog-hero-desc{font-size:.88rem}
}

/* ── Home SEO text block ────────────────────────────────── */
.home-seo-text{
  margin-top:2.5rem;
  padding-top:1.75rem;
  border-top:1px solid var(--border);
}
.home-seo-text h2{
  font-size:1.05rem;font-weight:700;
  color:#1a1a1a;margin-bottom:1rem;
  letter-spacing:-.01em;
}
.home-seo-text p{
  font-size:.875rem;line-height:1.75;
  color:var(--text-muted);margin-bottom:.85rem;
}
.home-seo-text p:last-child{margin-bottom:0}

/* Featured card */
.card-featured .card-img{aspect-ratio:21/9}
.card-featured .card-img-meta{padding:.75rem 1.25rem}
.card-featured .card-title{font-size:1.4rem}
@media(max-width:700px){
  .card-featured .card-title{font-size:1.1rem}
}

/* ── Article page ───────────────────────────────────────── */
.article-breadcrumb{font-size:.8rem;color:var(--text-muted);margin-bottom:1.25rem;display:flex;gap:.35rem;align-items:center;flex-wrap:wrap}
.article-breadcrumb a{color:var(--text-muted)}
.article-breadcrumb a:hover{color:#1a6fc4;text-decoration:none}
.article-breadcrumb .sep{opacity:.4}

.article-header{margin-bottom:1.5rem}
.article-cat{
  display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.75rem;
}
.article-cat a{
  display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--accent-dark);
  background:#fdf6ea;padding:.25rem .7rem;border-radius:4px;
}
.article-cat a:hover{background:var(--accent);color:#fff;text-decoration:none}
.article-title{font-size:2.1rem;font-weight:800;line-height:1.18;margin-bottom:.85rem;letter-spacing:-.02em}
.article-meta{
  font-size:.83rem;color:var(--text-muted);display:flex;gap:.85rem;flex-wrap:wrap;align-items:center;
}
.article-meta .dot{opacity:.4}
.article-brands{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.75rem}
.brand-pill{
  font-size:.75rem;font-weight:600;padding:.25rem .65rem;
  background:#0a0a0a;color:#c8a96e;border-radius:4px;letter-spacing:.02em;
  display:inline-block;transition:background .15s;
}
.brand-pill:hover{background:#2a2a2a;text-decoration:none;color:#c8a96e}

.article-image{
  border-radius:10px;overflow:hidden;margin-bottom:2rem;
  aspect-ratio:16/9;background:#ede9e1;
}
.article-image img{width:100%;height:100%;object-fit:cover}

/* Takeaways */
.takeaways{
  background:#fdf6ea;border-left:4px solid var(--accent);
  border-radius:0 8px 8px 0;padding:1.25rem 1.5rem;margin:2rem 0;
}
.takeaways h3{font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-dark);margin-bottom:.75rem}
.takeaways ul{margin-left:1.1rem}
.takeaways li{font-size:.95rem;margin-bottom:.45rem;line-height:1.5}

/* TOC */
.article-toc{
  background:#f9f7f3;border:1px solid var(--border);
  border-radius:8px;padding:1.1rem 1.5rem;margin:1.5rem 0;
}
.article-toc-title{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#555;margin-bottom:.65rem}
.article-toc ol{margin-left:1.1rem;counter-reset:toc}
.article-toc li{font-size:.875rem;margin-bottom:.35rem;counter-increment:toc}
.article-toc a{color:#1a6fc4}
.article-toc a:hover{text-decoration:underline}

/* Body */
.article-body{font-size:1.05rem;line-height:1.85;color:#1a1a1a}
.article-body h2{font-size:1.5rem;font-weight:800;margin:2.25rem 0 .85rem;letter-spacing:-.01em;padding-bottom:.45rem;scroll-margin-top:calc(var(--header-h) + 1.25rem)}
body.admin-mode .article-body h2{scroll-margin-top:calc(var(--header-h) + 34px + 1.25rem)}
.article-body h3{font-size:1.15rem;font-weight:700;margin:1.75rem 0 .65rem;scroll-margin-top:calc(var(--header-h) + 1.25rem)}
.article-body p{margin-bottom:1.15rem}
.article-body ul,.article-body ol{margin:.75rem 0 1.15rem 1.5rem}
.article-body li{margin-bottom:.45rem}
.article-body strong{font-weight:700}
.article-body em{font-style:italic}
.article-body a{color:#1a6fc4;text-decoration:underline}
.article-body blockquote{
  border-left:4px solid var(--accent);margin:1.5rem 0;
  padding:.75rem 1.25rem;background:#fdf6ea;border-radius:0 6px 6px 0;
  font-style:italic;color:#444;
}
.article-body img{
  border-radius:8px;margin:1.5rem auto;
  box-shadow:0 4px 20px rgba(0,0,0,.1);
  max-width:100%;max-height:580px;width:auto;height:auto;display:block;
}
.article-body img.lb-zoomable{
  cursor:zoom-in;transition:opacity .15s;
}
.article-body img.lb-zoomable:hover{opacity:.9}

/* ── Lightbox ────────────────────────────────────────────── */
.lb-overlay{
  position:fixed;inset:0;z-index:9000;
  background:rgba(0,0,0,.92);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease;
}
.lb-overlay.open{opacity:1;pointer-events:auto}
.lb-overlay img{
  max-width:92vw;max-height:92vh;
  object-fit:contain;border-radius:6px;
  box-shadow:0 8px 48px rgba(0,0,0,.7);
  cursor:zoom-out;
}
.lb-close{
  position:fixed;top:1.1rem;right:1.25rem;
  width:38px;height:38px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  border-radius:50%;color:#fff;font-size:1.1rem;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.lb-close:hover{background:rgba(255,255,255,.25)}
.article-body table{width:100%;border-collapse:collapse;margin:1.25rem 0;font-size:.9rem}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.25rem 0}
.table-scroll table{margin:0;width:auto;min-width:100%}
.article-body th{background:#f0ece4;padding:.6rem .9rem;text-align:left;font-weight:600;border:1px solid var(--border)}
.article-body td{padding:.55rem .9rem;border:1px solid var(--border)}
.article-body tr:nth-child(even) td{background:#faf8f4}

/* Tags */
.tags-row{display:flex;gap:.4rem;flex-wrap:wrap;margin:1.75rem 0}
.tag{
  font-size:.78rem;background:#f0ece4;border-radius:4px;
  padding:.25rem .6rem;color:#555;transition:background .15s;
}
.tag:hover{background:#e5dfd4;text-decoration:none;color:#333}

/* Scroll to top */
.scroll-top{
  position:fixed;bottom:1.75rem;right:1.75rem;z-index:400;
  width:44px;height:44px;border-radius:50%;
  background:#1a1a1a;border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.8);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
  opacity:0;visibility:hidden;
  transition:opacity .25s,visibility .25s,transform .25s,background .15s;
  transform:translateY(10px);
}
.scroll-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.scroll-top:hover{background:var(--accent);color:#0a0a0a;border-color:var(--accent)}

/* Share block */
.share-block{
  margin:2rem 0;padding:1.5rem;
  background:linear-gradient(135deg,#f9f7f3 0%,#f3ede2 100%);
  border:1px solid var(--border);border-radius:12px;
}
.share-block-title{
  font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:#888;margin-bottom:1rem;
}
.share-block-buttons{display:flex;flex-wrap:wrap;gap:.5rem}
.share-btn{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.45rem .9rem;border-radius:6px;
  font-size:.8rem;font-weight:600;text-decoration:none;
  transition:transform .15s,box-shadow .15s,opacity .15s;
  white-space:nowrap;color:#fff;
}
.share-btn:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.2)}
.share-btn:active{transform:translateY(0)}
.share-btn--x       {background:#000}
.share-btn--fb      {background:#1877f2}
.share-btn--reddit  {background:#ff4500}
.share-btn--pinterest{background:#e60023}
.share-btn--whatsapp{background:#25d366}
.share-btn--telegram{background:#229ed9}
@media(max-width:600px){
  .share-block{padding:1.1rem}
  .share-btn{font-size:.76rem;padding:.4rem .75rem}
}

/* Related */
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-top:1rem}
@media(max-width:600px){.related-grid{grid-template-columns:1fr 1fr}}

/* Reading progress bar */
#read-progress{
  position:fixed;top:0;left:0;height:3px;background:var(--accent);
  z-index:1000;width:0;transition:width .1s linear;pointer-events:none;
}
body.admin-mode #read-progress{top:34px}

/* ── Admin toolbar (visible only when logged in as admin) ── */
#admin-bar{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  height:34px;background:#0f172a;
  border-bottom:2px solid #f59e0b;
  font-size:.72rem;
}
.admin-bar-inner{
  display:flex;justify-content:space-between;align-items:center;
  height:100%;padding:0 1.25rem;
  max-width:1400px;margin:0 auto;
}
.admin-bar-left,.admin-bar-right{display:flex;align-items:center;gap:.65rem}
#admin-bar a{color:rgba(255,255,255,.65);text-decoration:none;transition:color .15s}
#admin-bar a:hover{color:#f59e0b}
.ab-brand{color:rgba(255,255,255,.3)!important;font-weight:700;letter-spacing:.04em;font-size:.68rem;text-transform:uppercase;cursor:default}
.ab-sep{color:rgba(255,255,255,.15);user-select:none}
.ab-edit{color:#fbbf24!important;font-weight:600}
.ab-edit:hover{color:#f59e0b!important}
.ab-del{color:#f87171!important;font-weight:600}
.ab-del:hover{color:#ef4444!important}
body.admin-mode{padding-top:34px}
body.admin-mode .site-header{top:34px}

/* ── Card admin edit button ── */
.card{position:relative}
.card-admin-edit{
  position:absolute;top:.45rem;right:.45rem;z-index:20;
  background:rgba(245,158,11,.9);color:#000!important;
  border-radius:4px;padding:.18rem .45rem;
  font-size:.68rem;font-weight:700;
  text-decoration:none!important;white-space:nowrap;
  backdrop-filter:blur(4px);
  transition:background .15s,opacity .15s;
  opacity:.8;line-height:1.4;
}
.card-admin-edit:hover{background:#f59e0b!important;opacity:1}

/* ── Search page ────────────────────────────────────────── */
.search-header{margin-bottom:1.75rem}
.search-form-page{display:flex;gap:0;margin-bottom:.9rem}
.search-form-page input{
  flex:1;padding:.6rem 1rem;font-size:.95rem;
  border:2px solid var(--border);border-right:none;
  border-radius:8px 0 0 8px;outline:none;
  background:#fff;color:#1a1a1a;transition:border-color .15s;
}
.search-form-page input:focus{border-color:var(--accent)}
.search-form-page button{
  padding:.6rem 1.25rem;background:var(--accent);color:#0a0a0a;
  font-size:.9rem;font-weight:600;border:none;
  border-radius:0 8px 8px 0;cursor:pointer;white-space:nowrap;
  transition:background .15s;
}
.search-form-page button:hover{background:var(--accent-dark)}
.search-meta{font-size:.9rem;color:var(--text-muted)}
.search-meta strong{color:#1a1a1a}
.search-meta em{font-style:normal;color:#1a1a1a;font-weight:500}

.search-results{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.search-result{
  display:flex;gap:1rem;padding:1rem 1.1rem;
  background:#fff;transition:background .12s;
}
.search-result:hover{background:#fafaf8}
.search-result-thumb{
  flex-shrink:0;width:96px;height:68px;border-radius:6px;overflow:hidden;
}
.search-result-thumb img{width:100%;height:100%;object-fit:cover}
.search-result-body{flex:1;min-width:0}
.search-result-title{font-size:.95rem;font-weight:700;margin-bottom:.3rem;line-height:1.35}
.search-result-title a{color:#1a1a1a}
.search-result-title a:hover{color:#1a6fc4;text-decoration:none}
.search-result-title mark{background:#fef3cd;color:inherit;border-radius:2px;padding:0 1px}
.search-result-snippet{font-size:.83rem;color:var(--text-muted);line-height:1.55;margin-bottom:.3rem;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.search-result-snippet mark{background:#fef3cd;color:inherit;border-radius:2px;padding:0 1px}
.search-result-meta{font-size:.78rem;color:#aaa;display:flex;gap:.4rem;align-items:center}
.search-result-meta .sep{color:#d1d5db}

.search-empty{padding:2rem 1rem;color:var(--text-muted);font-size:.9rem}
.search-empty p{margin-bottom:.65rem;font-weight:600;color:#555}
.search-empty ul{padding-left:1.25rem;line-height:2}

@media(max-width:600px){
  .search-result-thumb{display:none}
}

/* ── Section titles ─────────────────────────────────────── */
.section-title{
  font-size:1.15rem;font-weight:800;margin-bottom:1.25rem;
  padding-bottom:.5rem;border-bottom:2px solid var(--accent);
  display:inline-block;letter-spacing:-.01em;
}

/* ── Footer ─────────────────────────────────────────────── */
.site-footer{
  background:var(--header-bg);color:rgba(255,255,255,.5);
  margin-top:4rem;padding:3rem 1.25rem 2rem;font-size:.85rem;
}
.footer-inner{max-width:var(--max-w);margin:0 auto}
.footer-grid{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:2rem;
  margin-bottom:2rem;padding-bottom:2rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
@media(max-width:700px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}
.footer-col-title{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.6);margin-bottom:.9rem}
.footer-links{list-style:none}
.footer-links li{margin-bottom:.45rem}
.footer-links a{color:rgba(255,255,255,.4);transition:color .15s}
.footer-links a:hover{color:var(--accent);text-decoration:none}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem}
.footer-bottom a{color:rgba(255,255,255,.35)}
.footer-bottom a:hover{color:var(--accent);text-decoration:none}

/* ── Utilities ──────────────────────────────────────────── */
.text-center{text-align:center}
.mt-2{margin-top:2rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

/* ── Tag cloud ──────────────────────────────────────────── */
.tag-cloud{display:flex;flex-wrap:wrap;gap:.4rem;padding:.85rem 1.25rem 1.1rem}
.tag-cloud a{
  font-size:.75rem;background:#f0ece4;border-radius:4px;
  padding:.2rem .55rem;color:#555;transition:background .15s,color .15s;
  white-space:nowrap;font-weight:500;
}
.tag-cloud a:hover{background:var(--accent);color:#fff;text-decoration:none}
.tag-cloud a.tag-lg{font-size:.85rem;font-weight:600;background:#ebe5d9}
.tag-cloud a.tag-md{font-size:.8rem}

/* ── Skeleton loading ───────────────────────────────────── */
@keyframes shimmer{0%{background-position:-600px 0}100%{background-position:600px 0}}
.skeleton{background:linear-gradient(90deg,#f0ece4 25%,#e5dfd4 50%,#f0ece4 75%);background-size:1200px 100%;animation:shimmer 1.5s infinite}