/* ==========================================================================
   Compact Theme CSS (drop-in replacement)
   - Modernized (no legacy prefixes)
   - Focus styles, reduced motion, smaller keyframes set
   - Keeps your existing IDs/classes so markup needn't change
   - Nasheed tweaks (10/13): wider left panel, narrower right panel,
     big rectangular avatar, always-visible top navigation
   ========================================================================== */

/* --------------------------------------
   0) Variables & base
--------------------------------------- */
:root{ 
    
  --global-font-size:14px;
  --global-bg:#fff;
  --font-color:#4c4948;
  --text-highlight-color:#1f2d3d;
  --white:#fff;
  --light-grey:#eee;
  --dark-grey:#cacaca;

  --btn-bg:#555; /* modern gray */
  --btn-color:#fff;
  --btn-hover-color:#2b3a67; /* light navy on hover */

  --card-bg:#fff;
  --card-meta:#858585;
  --card-shadow:0 3px 8px 6px rgba(7,17,27,.05);
  --card-shadow-hover:0 3px 8px 6px rgba(7,17,27,.09);

  --tab-border-color:#f0f0f0;
  --tab-button-bg:#f0f0f0;
  --tab-button-active-bg:#fff;
  --tab-button-color:#1f2d3d;

  --sidebar-bg:#f6f8fa;
  --sidebar-menu-bg:#fff;

  --blockquote-bg:rgba(73,177,245,.1);
  --blockquote-color:#6a737d;

  --toc-link-color:#666261;
  --scrollbar-color:#49b1f5;
  --mark-bg:rgba(0,0,0,.3);

  --timeline-bg:#e4f3fd;
  --pseudo-hover:#ff7242;

  --link:#0020C2;        /*  Cobalt blue */
  --layout-pad-x: 15px;  /* matches .layout horizontal padding */
  --layout-pad-y: 40px;  /* matches .layout top padding */
}


@media (max-width:768px){
  :root{
    --layout-pad-x: 5px;   /* .layout has 5px at this breakpoint */
    --layout-pad-y: 20px;  /* .layout has 20px top padding here */
  }
}


/* Dark theme */
[data-theme="dark"]{
  --global-bg:#0d0d0d;
  --font-color:rgba(255,255,255,.75);
  --text-highlight-color:rgba(255,255,255,.92);
  --white:rgba(255,255,255,.92);
  --light-grey:rgba(255,255,255,.7);
  --dark-grey:rgba(255,255,255,.2);

  --btn-bg:#1f1f1f;
  --btn-color:rgba(255,255,255,.8);
  --btn-hover-color:#787878;

  --card-bg:#121212;
  --sidebar-bg:#121212;
  --sidebar-menu-bg:#1f1f1f;

  --tab-border-color:#2c2c2c;
  --tab-button-bg:#2c2c2c;
  --tab-button-active-bg:#121212;
  --tab-button-color:rgba(255,255,255,.75);

  --blockquote-bg:#2c2c2c;
  --toc-link-color:rgba(255,255,255,.65);
  --timeline-bg:#1f1f1f;

  --link:#7fb3ff;
}

/* --------------------------------------
   1) Reset-ish, base elements, utilities
--------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  min-height:100%;
  background:var(--global-bg);
  color:var(--font-color);
/*  font:400 var(--global-font-size)/1.9 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;*/
  font:400 var(--global-font-size)/1.9 "Merriweather", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;    
}
::selection{background:#00c4b6;color:#f7f7f7}

img{max-width:100%;display:block;border-radius:6px}
img[src=""],img:not([src]){opacity:0}
a{color:var(--link);text-decoration:none;transition:color .2s}
a:hover{text-decoration:underline}
button{background:none;border:0;padding:0;cursor:pointer}
input::placeholder{color:var(--font-color)}

h1,h2,h3,h4,h5,h6{
  margin:20px 0 14px;
  color:var(--text-highlight-color);
  font-weight:700;
}
code,kbd,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
code{padding:2px 5px;background:rgba(27,31,35,.05);color:#f47466;border-radius:6px}
pre{margin:0 0 20px;padding:12px 18px;background:#f6f8fa;border-radius:6px;overflow:auto}
hr{border:0;border-top:1px solid var(--light-grey);margin:20px 0}
blockquote{
  margin:0 0 20px;padding:7px 15px;
  border-left:4px solid #49b1f5;border-radius:6px;
  background:var(--blockquote-bg);color:var(--blockquote-color);
}
.text-center{text-align:center}
.text-right{text-align:right}

/* Focus visibility */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--btn-hover-color);
  outline-offset:2px;
  border-radius:6px;
}

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

/* Scrollbar (webkit) */
*::-webkit-scrollbar{width:5px;height:5px}
*::-webkit-scrollbar-thumb{background:var(--scrollbar-color)}
*::-webkit-scrollbar-track{background:transparent}

/* Tables */
.table-wrap{overflow-x:auto;margin:0 0 20px;border-radius:5px}
table{width:100%;border-collapse:separate;border-spacing:0;border-top:1px solid var(--light-grey);border-left:1px solid var(--light-grey)}
thead{background:rgba(153,169,191,.1)}
th,td{padding:6px 12px;border:1px solid var(--light-grey);border-top:none;border-left:none}

/* --------------------------------------
   2) Layout shell
--------------------------------------- */
#body-wrap{display:flex;flex-direction:column;min-height:100vh}
.layout{
  display:flex;flex:1 auto;gap:20px;margin:0 auto;padding:40px 15px;max-width:1200px;width:100%;
}
@media (max-width:900px){.layout{flex-direction:column}}
@media (max-width:768px){.layout{padding:20px 5px}}
@media (min-width:2000px){.layout{max-width:70%}}

/* Main (right) column width — NARROWER now */
.layout>div:first-child{width:62%;transition:.3s}
@media (max-width:900px){.layout>div:first-child{width:100%!important}}
@media (min-width:900px){.layout>div:first-child{order:2}} /* keep content on the right */

/* When aside is hidden, let content expand */
.layout.hide-aside{max-width:1000px}
@media (min-width:2000px){.layout.hide-aside{max-width:1300px}}
.layout.hide-aside>div{width:100%!important}

/* --------------------------------------
   3) Header & nav
--------------------------------------- */
#page-header{
  position:relative;width:100%;
  background:#49b1f5 center/cover no-repeat;
  transition:.5s;
}
#page-header:not(.not-top-img)::before{content:"";position:absolute;inset:0;background:var(--mark-bg)}
#page-header.full_page{height:100vh;background-attachment:fixed}
#page-header #site-title,#page-header #site-subtitle{color:var(--white);text-align:center;line-height:1.5;text-shadow:2px 2px 4px rgba(0,0,0,.15)}
#page-header #site-title{font-size:1.85em}
@media (min-width:768px){#page-header #site-title{font-size:2.85em}}
#page-header #site-subtitle{color:var(--light-grey);font-size:1.15em}
@media (min-width:768px){#page-header #site-subtitle{font-size:1.72em}}

#nav{
  position:absolute;top:0;z-index:90;
  display:flex;align-items:center;gap:14px;
  height:60px;width:100%;padding:0 36px;font-size:1.1em;
  opacity:1; /* <— always visible now */
  visibility:visible;
}
#nav .site-name{font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.15)}
#nav a,#nav span.site-page{color:var(--white)}
#nav a:hover,#nav span.site-page:hover{color:var(--white);text-decoration:underline}
#nav .menus_items{display:inline-flex;gap:14px}
#nav .menus_items .menus_item{position:relative;display:inline-block;padding-left:0}
#nav .menus_item > span > i:last-child{padding:4px;transition:transform .3s}
#nav .menus_item:hover > span > i:last-child{transform:rotate(180deg)}
#nav .menus_item .menus_item_child{
  position:absolute;right:0;display:none;margin-top:8px;padding:0;
  background:var(--sidebar-bg);box-shadow:0 5px 20px -4px rgba(0,0,0,.5);
  border-radius:6px;animation:sub_menus .25s ease both;
}
#nav .menus_item:hover .menus_item_child{display:block}
#nav .menus_item .menus_item_child li{list-style:none}
#nav .menus_item .menus_item_child a{display:block;padding:8px 16px;color:var(--font-color);text-shadow:none}
#nav .menus_item .menus_item_child li:hover{background:rgba(73,177,245,.15)}

#page-header.not-top-img{margin-bottom:10px;height:60px;background:0}
#page-header.not-top-img #nav{
  background:rgba(255,255,255,.8);
  box-shadow:0 5px 6px -5px rgba(133,133,133,.6);backdrop-filter:blur(7px);
}
#page-header.not-top-img #nav a,#page-header.not-top-img #nav .site-name{color:var(--font-color);text-shadow:none}

#page-header.nav-fixed #nav{
  position:fixed;top:0;z-index:91;background:rgba(255,255,255,.7);
  box-shadow:0 5px 6px -5px rgba(133,133,133,.6);backdrop-filter:blur(7px);
  transition:transform .2s ease,opacity .2s ease;
}

#page-header.nav-visible:not(.fixed) #nav{transform:none}

/* Dark tweaks for nav */
[data-theme="dark"] #page-header.nav-fixed>#nav,[data-theme="dark"] #page-header.not-top-img>#nav{
  background:rgba(18,18,18,.8);box-shadow:none;
}


/* Brand left, menu right; vertical centering */
#nav{
  display:flex;
  align-items:center;          /* vertical center */
}

#nav #menus{
  margin-left:auto;            /* pushes menu to the right */
  display:flex;
  align-items:center;          /* center menu content vertically */
}

#nav .menus_items{
  display:flex;
  align-items:center;          /* center each item vertically */
  gap:16px;
  height:100%;
}

#nav .menus_items .menus_item > a{
  display:inline-flex;
  align-items:center;          /* center icon + text */
  gap:8px;
  height:100%;
  line-height:1;
}


/* --------------------------------------
   4) Main content cards / recent posts
--------------------------------------- */
#recent-posts .recent-post-item{
  position:relative;display:flex;align-items:center;gap:0;overflow:hidden;
  height:16.8em;margin-bottom:20px;border-radius:8px;background:var(--card-bg);
  box-shadow:var(--card-shadow);transition:box-shadow .2s;
}
#recent-posts .recent-post-item:hover{box-shadow:var(--card-shadow-hover)}
#recent-posts .recent-post-item .post_cover{overflow:hidden;width:42%;height:100%}
#recent-posts .recent-post-item .post_cover .post-bg{transform:scale(1);transition:transform .3s}
#recent-posts .recent-post-item:hover .post-bg{transform:scale(1.08)}
#recent-posts .recent-post-item>.recent-post-info{padding:0 28px;width:58%}
#recent-posts .recent-post-item>.recent-post-info.no-cover{width:100%;padding:28px}
#recent-posts .article-title{
  color:var(--text-highlight-color);font-size:1.55em;line-height:1.35;transition:.2s;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
#recent-posts .article-title:hover{color:#49b1f5}
#recent-posts .article-meta-wrap{margin:6px 0;color:var(--card-meta);font-size:.9em}
#recent-posts .content{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* --------------------------------------
   5) Article container bits
--------------------------------------- */
.container{overflow-wrap:break-word;word-wrap:break-word}
.container p{margin:0 0 16px}
.container a{color:var(--link)}
.container a:hover{text-decoration:underline}
.container iframe{margin:0 0 20px;border:0;border-radius:6px}
.container .btn-center{text-align:center;margin:0 0 20px}
.container .btn-beautify{
  display:inline-block;margin:0 4px 6px;padding:0 15px;line-height:2;border-radius:6px;
  background:var(--btn-bg);color:var(--btn-color);transition:.2s;
}
.container .btn-beautify:hover{background:var(--btn-hover-color);text-decoration:none}

/* Code blocks with a simple toolbar (optional) */
.container figure.highlight{
  position:relative;margin:0 0 24px;border-radius:7px;background:#f6f8fa;box-shadow:0 5px 10px 0 rgba(144,164,174,.35);
}
.container figure.highlight pre{margin:0;padding:10px 14px;background:transparent}

/* --------------------------------------
   6) Aside (sidebar)
--------------------------------------- */
#aside-content{width:38%} /* <— WIDER left panel */
@media (min-width:900px){#aside-content{padding-right:15px}}
@media (max-width:900px){#aside-content{margin-top:20px;width:100%}}
#aside-content .card-widget{
  position:relative;overflow:hidden;margin-bottom:20px;padding:20px 24px;background:var(--card-bg);
  border-radius:8px;box-shadow:var(--card-shadow);
}
#aside-content .card-info .author-info-name{font-weight:600;font-size:1.4em}
#aside-content .card-info .site-data{margin:12px 0 4px}
#aside-content .card-info .card-info-social-icons i{transition:.3s}
#aside-content .card-info .card-info-social-icons i:hover{transform:rotate(360deg)}

/* === Social icons: brand colors, equal spacing, fixed override === */
#aside-content .card-info .card-info-social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;               
  margin-top: 10px;
}

/* fixed-size anchors for equal spacing */
#aside-content .card-info .card-info-social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* icon sizing only — DO NOT inherit color */
#aside-content .card-info .card-info-social-icons i {
  font-size: 2rem;
  line-height: 1;
}

/* brand colors forced with !important */
.social-github i   { color: #24292f ; }  /* GitHub black */
.social-linkedin i { color: #0A66C2 ; }  /* LinkedIn blue */
.social-arxiv i    { color: #B31B1B ; }  /* arXiv red */
.social-scholar i  { color: #4285F4 ; }  /* Scholar blue */
.social-email i    { color: #EA4335 ; }  /* Gmail red */


/* hover animation */
#aside-content .card-info .card-info-social-icons a:hover i {
  transform: scale(1.15);
  opacity: 0.85;
}



#aside-content .item-headline{padding-bottom:6px;font-size:1.1em}
@media (min-width:900px){
  #aside-content .sticky_layout{position:sticky;top:20px;transition:top .3s}
}

/* Aside lists */
#aside-content .aside-list>.aside-list-item{
  display:flex;align-items:center;padding:6px 0;gap:10px;border-bottom:1px dashed #f5f5f5;
}
#aside-content .aside-list>.aside-list-item:last-child{border-bottom:0}
#aside-content .aside-list .thumbnail{overflow:hidden;width:4em;height:4em;border-radius:6px}
#aside-content .aside-list .content{flex:1}
#aside-content .aside-list .title{color:var(--font-color);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#aside-content .aside-list .title:hover{color:#49b1f5}

/* Category / archive pills */
#aside-content .card-archives a,
#aside-content .card-categories a{
  display:flex;gap:6px;margin:2px 0;padding:2px 8px;border-radius:6px;color:var(--font-color);transition:.2s;
}
#aside-content .card-archives a:hover,
#aside-content .card-categories a:hover{background:rgba(73,177,245,.15);color:var(--white)}

/* Left profile image overrides — BIG, TALL, NOT CIRCLE */
#aside-content .card-info .avatar-img{padding:0 !important}
#aside-content .card-info .avatar-img img{
  width:100%;
  height:560px;              /* <— “way larger… more in height” */
  object-fit:cover;          /* fills area nicely */
  border-radius:0 !important;/* ensure not circle-cropped */
  border:0 !important;
  box-shadow:none !important;
  transition:none !important;
  transform:none !important;
}
@media (max-width:900px){
  #aside-content .card-info .avatar-img img{height:320px}
}
#aside-content .card-info .avatar-img:hover img{transform:none !important}

/* --------------------------------------
   7) Post page bits
--------------------------------------- */

/* Container & default title (kept for non-banner pages) */
#post>#post-info{margin-bottom:26px}
#post>#post-info > .post-title{
  margin:0 0 6px;
  padding-bottom:4px;
  border-bottom:1px solid var(--light-grey);
  color:var(--text-highlight-color);
  font-size:2.4em;
}
#post>#post-info #post-meta,
#post>#post-info #post-meta a{color:#78818a}

/* ===== Banner-style heading with real image (no dark mode) ===== */
.hero-banner{
  position:relative;
  border-radius:0; /* border-radius:10px; */
  overflow:hidden;
  margin:0 0 12px;
  box-shadow:none;  /* box-shadow:var(--card-shadow); */
}

/* Image fills the right column width; height auto keeps aspect ratio */
.hero-banner .hero-img{
  display:block;
  width:100%;
  height:auto;
}

/* Subtle fade ABOVE the image but BELOW the text (keep as you have) */
.hero-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.75);
  z-index:1;
}

/* NEW: overlay container that positions content bottom-left responsively */
.hero-banner .hero-caption{
  position:absolute;
  inset:0;                     /* stretch over the banner */
  display:flex;
  /*align-items:flex-end; */        /* push to bottom */
  /*justify-content:flex-start; /*  /* left */
  align-items:flex-end;      /* vertical bottom */
  justify-content:center;  /* horizontal center */
  padding:calc(clamp(4px, 0.9vw, 10px) + 1rem);  /* tiny, responsive inset */
  z-index:2;                   /* above the fade */
}

/* Title style (no absolute positioning on the text itself) */
.hero-banner .post-title{
  margin:0;
  color:#000;                  /* solid black */
  font-size:1rem;
  line-height:.92; /* bigger & responsive */
  font-weight:700;
  border:0 !important;         /* ensure no underline/border from older rule */
  text-shadow:none;
  text-align: center;
}


/* Only the banner bleeds to the page edges (top + right) */
.hero-banner.full-bleed{
  border-radius:0;             /* square edges */
  box-shadow:none;             /* no shadow */
  /* pull into the layout’s top and right padding only */
  margin-top:calc(-1 * var(--layout-pad-y));
  margin-right:calc(-1 * var(--layout-pad-x));
  /* keep left edge aligned with the content column (next to the sidebar) */
  margin-left:0;
}

/* Tag pills & share (use your theme colors instead of bright blue) */
#post .tag_share .post-meta__tags{
  display:inline-block;
  margin:8px 8px 8px 0;
  padding:0 12px;
  border:1px solid var(--btn-hover-color);   /* soft navy */
  border-radius:12px;
  color:var(--btn-hover-color);
  font-size:.85em;
  transition:.2s;
}
#post .tag_share .post-meta__tags:hover{
  background:var(--btn-hover-color);
  color:var(--white);
}

/* Copyright box */
#post .post-copyright{
  margin:36px 0 10px;
  padding:10px 16px;
  border:1px solid var(--light-grey);
  border-radius:6px;
  transition:box-shadow .2s;
  position:relative;
}
#post .post-copyright:hover{
  box-shadow:0 0 8px 0 rgba(232,237,250,.6),0 2px 4px 0 rgba(232,237,250,.5)
}
#post .post-copyright .post-copyright-meta{
  color:var(--btn-hover-color);  /* match theme accent */
  font-weight:700
}

/* Related posts grid */
.relatedPosts{margin-top:36px}
.relatedPosts>.headline{margin-bottom:6px;font-weight:700;font-size:1.3em}
.relatedPosts>.relatedPosts-list{display:flex;flex-wrap:wrap;gap:6px}
.relatedPosts>.relatedPosts-list>a{
  display:block;position:relative;width:calc(33.333% - 6px);height:200px;border-radius:6px;overflow:hidden;background:#000
}
@media (max-width:768px){.relatedPosts>.relatedPosts-list>a{width:calc(50% - 6px);height:150px}}
@media (max-width:600px){.relatedPosts>.relatedPosts-list>a{width:100%}}

/* Reward hover pop */
.post-reward{position:relative;margin-top:60px;text-align:center;pointer-events:none}
.post-reward>*{pointer-events:auto}
.post-reward .reward-button{
  display:inline-block;padding:4px 18px;background:var(--btn-bg);color:var(--btn-color);border-radius:6px
}
.post-reward:hover .reward-button{background:var(--btn-hover-color)}


/* Make the right column the positioning context */
#post{
  position:relative;
}

/* Art layer: spans the right column, sits behind content */
.page-art{
  position:absolute;
  inset:0;             /* same footprint as #post */
  z-index:0;           /* behind everything in #post */
  pointer-events:none; /* clicks pass through */
}

/* Ensure all normal content stays above the art */
#post > *:not(.page-art){
  position:relative;
  z-index:1;
}

/* Base floating image style (your inline top/right/width handles placement) */
.floater{
  position:absolute;
  opacity:.18;         /* subtleness; tweak as you like */
  filter:grayscale(20%); /* optional tone-down */
  user-select:none;
}

/* Optional: phone tweaks */
@media (max-width: 768px){
  .floater{ opacity:.12; }     /* softer on small screens */
}



/* --------------------------------------
   8) Rightside small buttons
--------------------------------------- */
#rightside{
  position:fixed;right:-48px;bottom:40px;z-index:100;opacity:0;transition:.5s;
}
#rightside.rightside-show{opacity:.85;transform:translateX(-58px)}
#rightside>div>button,#rightside>div>a{
  display:block;margin-bottom:5px;width:40px;height:40px;border-radius:6px;
  background:var(--btn-bg);color:var(--btn-color);line-height:40px;text-align:center;font-size:16px;
}
#rightside>div>button:hover,#rightside>div>a:hover{background:var(--btn-hover-color)}
@media (max-width:900px){#rightside #hide-aside-btn{display:none}}

/* --------------------------------------
   9) Offcanvas sidebar menu
--------------------------------------- */
#sidebar #menu-mask{position:fixed;inset:0;z-index:102;display:none;background:rgba(0,0,0,.8)}
#sidebar #sidebar-menus{
  position:fixed;top:0;right:-330px;z-index:103;overflow:auto;padding-left:5px;width:330px;height:100%;
  background:var(--sidebar-bg);transition:.5s;
}
#sidebar #sidebar-menus.open{transform:translateX(-100%)}
#sidebar #sidebar-menus .menus_items{
  margin:20px;padding:15px;background:var(--sidebar-menu-bg);border-radius:10px;box-shadow:0 0 1px 1px rgba(7,17,27,.05);
}
#sidebar #sidebar-menus .site-page{
  display:block;margin:4px 0;padding:6px 15px;border-radius:6px;color:var(--font-color);
}
#sidebar #sidebar-menus .site-page:hover{background:rgba(73,177,245,.15);color:var(--white)}

/* --------------------------------------
   10) Comments (generic)
--------------------------------------- */
#post-comment .comment-head{margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;gap:10px}
#post-comment .comment-switch{padding:4px 12px;border-radius:8px;background:#f6f8fa}
[data-theme="dark"] #post-comment .comment-switch{background:#2c2c2c}

/* --------------------------------------
   11) Pagination (simple)
--------------------------------------- */
#pagination .pagination{text-align:center;margin-top:20px}
.layout .pagination>*{
  display:inline-block;margin:0 6px;width:2.5em;height:2.5em;line-height:2.5em;border-radius:6px;background:var(--card-bg);box-shadow:var(--card-shadow);
}
.layout .pagination>*:not(.space):hover{background:var(--btn-hover-color);color:var(--btn-color)}
#pagination .page-number.current{background:#00c4b6;color:var(--white)}

/* --------------------------------------
   12) Gallery & media
--------------------------------------- */
.container figure.gallery-group{
  position:relative;float:left;margin:6px 4px;width:calc(50% - 8px);height:250px;border-radius:10px;background:#000;overflow:hidden;
}
@media (max-width:600px){.container figure.gallery-group{width:calc(100% - 8px)}}
@media (min-width:1024px){.container figure.gallery-group{width:calc(100%/3 - 8px)}}
.container figure.gallery-group img{
  width:calc(100% + 20px);height:250px;object-fit:cover;transform:translateX(-10px);opacity:.85;transition:transform .3s,opacity .3s;
}
.container figure.gallery-group:hover img{transform:translateX(0);opacity:.45}
.container figure.gallery-group figcaption{position:absolute;inset:0;padding:24px;color:#fff;text-transform:uppercase}
.container figure.gallery-group .gallery-group-name{font-weight:700;font-size:1.4em;margin:0 0 8px;line-height:1.4}

/* --------------------------------------
   13) Timeline (lightweight)
--------------------------------------- */
.container .timeline{margin:0 10px 20px;padding:14px 0 5px 20px;border-left:2px solid var(--timeline-color,#49b1f5)}
.container .timeline .timeline-item{margin:0 0 14px}
.container .timeline .timeline-item .timeline-item-title{position:relative}
.container .timeline .timeline-item .timeline-item-title .item-circle::before{
  content:"";position:absolute;top:50%;left:-27px;width:6px;height:6px;border:3px solid var(--pseudo-hover);border-radius:50%;background:var(--card-bg);transform:translateY(-50%);transition:.3s;
}
.container .timeline .timeline-item .timeline-item-content{
  position:relative;margin-top:6px;padding:12px 15px;border-radius:8px;background:var(--timeline-bg);font-size:.95em;
}

/* --------------------------------------
   14) Search dialog (simple)
--------------------------------------- */
.search-dialog{
  position:fixed;top:10%;left:50%;z-index:1001;display:none;
  width:600px;margin-left:-300px;padding:20px;border-radius:8px;background:#f6f8fa;
}
@media (max-width:768px){.search-dialog{top:0;left:0;margin:0;width:100%;height:100%;border-radius:0}}
#search-mask{position:fixed;inset:0;z-index:1000;display:none;background:rgba(0,0,0,.6)}

/* --------------------------------------
   15) Footer
--------------------------------------- */
#footer{background:#444}
#footer-wrap{
  padding:40px 20px;
  text-align:center;
  color:#ddd;
}
#footer-wrap a{
  color:#ddd;
  transition:.2s;
}
#footer-wrap a:hover{
  color:#ffffff;
}


/* --------------------------------------
   16) Read mode (lean)
--------------------------------------- */
.read-mode{
  --read-bg:var(--global-bg);
  background:var(--read-bg);
}
.read-mode #aside-content,.read-mode #footer,.read-mode #nav,.read-mode #rightside{display:none !important}
.read-mode #post{margin:0 auto;background:transparent;box-shadow:none}
.read-mode .container pre,.read-mode .container .highlight{background:#f7f7f7}
[data-theme="dark"] .read-mode .container pre,[data-theme="dark"] .read-mode .container .highlight{background:#171717}

/* --------------------------------------
   17) Tiny animations (only what’s used)
--------------------------------------- */
@keyframes sub_menus{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes tabshow{
  from{transform:translateY(12px);opacity:.95}
  to{transform:translateY(0);opacity:1}
}
@keyframes more-btn-move{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(3px)}
}
@keyframes avatar_turn_around{
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}

/* --------------------------------------
   18) Small helpers
--------------------------------------- */
.hide{display:none !important}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.btn{display:inline-flex;align-items:center;gap:.5em;padding:.5em .9em;border-radius:6px;background:var(--btn-bg);color:var(--btn-color)}
.btn:hover{background:var(--btn-hover-color)}
.badge{display:inline-block;padding:.2em .5em;border-radius:4px;background:#777;color:#fff;font-size:.85em}

/* --------------------------------------
   19) Dark-mode specific niceties
--------------------------------------- */
[data-theme="dark"] .container code{background:#2c2c2c}
[data-theme="dark"] .container figure.highlight{box-shadow:none}
[data-theme="dark"] #aside-content .aside-list>.aside-list-item:not(:last-child){border-bottom:1px dashed rgba(255,255,255,.1)}
[data-theme="dark"] #sidebar #sidebar-menus{box-shadow:none}

/* --------------------------------------
   20) Print tweaks
--------------------------------------- */
@media print{
  #nav,#aside-content,#rightside,#footer{display:none !important}
  a{text-decoration:underline}
}

/* Force banner wash to the value we want */
#post #post-info .hero-banner::after{
  background: rgba(255,255,255,.60) !important; /* adjust .75 as you like */
}