/* ------------------------------------------------------------------
   reskin.css — brings the remaining rs-card pages in line with the
   rebuilt homepage.

   Deliberately an override layer rather than a rewrite: the theme's
   layout (blog grid, post columns, archive lists) works correctly, so
   this restyles the chrome — palette, typography, header, cards,
   footer — and leaves structure alone. Loaded after the theme's own
   CSS, so plain specificity wins in most places; !important appears
   only where the 507KB Jetpack bundle sets a property inline-level.
   ------------------------------------------------------------------ */

:root{
  --ground:#FBFBFC; --surface:#FFFFFF; --surface-2:#F3F4F7;
  --ink:#0F1115; --ink-soft:#3A3F4A; --muted:#697082;
  --hairline:#E4E6EC; --hairline-2:#CED2DB;
  --accent:#B23C38; --accent-ink:#8E2F2C;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:"IBM Plex Serif",Georgia,serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0C0E12; --surface:#14171D; --surface-2:#1A1E25;
    --ink:#E9EBF0; --ink-soft:#C2C7D1; --muted:#8B93A3;
    --hairline:#232830; --hairline-2:#333A45;
    --accent:#E2726C; --accent-ink:#EE8A85;
  }
}

/* ---------- base ---------- */
body{
  background:var(--ground)!important;
  color:var(--ink)!important;
  font-family:var(--sans)!important;
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.wrapper,.content,.container{background:transparent!important}
p,li,td{color:var(--ink-soft);font-family:var(--sans)}
h1,h2,h3,h4,h5,h6{font-family:var(--sans);color:var(--ink);letter-spacing:-.02em}
a{color:var(--accent-ink)}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
hr{border-color:var(--hairline)}

/* ---------- header ---------- */
.head-bar{
  background:var(--ground)!important;
  border-bottom:1px solid var(--hairline);
  box-shadow:none!important;
}
.head-bar-inner{padding-top:.55rem;padding-bottom:.55rem}

/* the theme's site title is an <h1>; on post pages that collides with the
   article title, so it is demoted visually to a wordmark */
.site-title{margin:0!important;line-height:1.2!important}
.site-title a{
  font-family:var(--sans)!important;
  font-size:1.02rem!important;
  font-weight:700!important;
  letter-spacing:-.02em!important;
  color:var(--ink)!important;
  text-transform:none!important;
}
.site-title a:hover{color:var(--accent-ink)!important}
.site-descr{
  font-family:var(--sans)!important;
  font-size:.76rem!important;
  font-weight:400!important;
  color:var(--muted)!important;
  letter-spacing:0!important;
  margin:.15rem 0 0!important;
  text-transform:none!important;
}

/* ---------- nav ---------- */
.head-nav .nav > ul > li > a,
.nav ul li a{
  font-family:var(--sans)!important;
  font-size:.85rem!important;
  font-weight:500!important;
  letter-spacing:0!important;
  text-transform:none!important;
  color:var(--muted)!important;
}
.head-nav .nav > ul > li > a:hover,
.nav ul li a:hover,
.nav ul li.current-menu-item > a{color:var(--ink)!important}
.btn-mobile,.btn-sidebar{color:var(--ink)!important;background:transparent!important}

/* ---------- content typography ---------- */
.post-title,.entry-title,.page-title{letter-spacing:-.025em;font-weight:700}
.post-title a{color:var(--ink)!important}
.post-title a:hover{color:var(--accent-ink)!important}
.post-tag a,.post-info,.post-info a{
  font-family:var(--mono)!important;
  font-size:.7rem!important;
  letter-spacing:.1em!important;
  text-transform:uppercase!important;
  color:var(--muted)!important;
}
.post-tag a:hover{color:var(--accent)!important}

/* ---------- cards / boxes ----------
   Only the OUTERMOST element gets the card treatment. .post-data sits inside
   .post-media inside <article>, so styling both nests a box within a box. */
.section-box,.grid-item > article,.blog-grid article,.widget,.sidebar-default .widget{
  background:var(--surface)!important;
  border:1px solid var(--hairline)!important;
  border-radius:10px!important;
  box-shadow:0 1px 2px rgba(15,17,21,.05),0 12px 32px -18px rgba(15,17,21,.18)!important;
}
.post-data,.post-inner,.post-media{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
/* the empty grey band the theme reserves for a missing featured image */
.post-media.no-media{background:transparent!important;min-height:0!important}

/* the date chip is a <time class="post-datetime">, not .post-date */
.post-datetime,.post-date,.post-date-box{
  background:var(--accent)!important;
  color:#fff!important;
  border-radius:6px!important;
  font-family:var(--mono)!important;
}
.post-datetime *,.post-date *{color:#fff!important}
.post-datetime .day{font-weight:600}
.post-datetime .month{letter-spacing:.06em;text-transform:uppercase;font-size:.7em}

/* ---------- sidebar widgets ---------- */
.widget-title{
  font-family:var(--mono)!important;
  font-size:.72rem!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  color:var(--muted)!important;
  font-weight:600!important;
  margin-bottom:.9rem!important;
}
.widget a{color:var(--accent-ink)!important;font-weight:600}

/* the fixed slide-out panel that the hamburger opens */
.sidebar-fixed{background:var(--surface)!important;border-left:1px solid var(--hairline)}

/* ---------- buttons ---------- */
.btn,.btn-primary,input[type="submit"]{
  font-family:var(--sans)!important;
  border-radius:6px!important;
  letter-spacing:0!important;
  text-transform:none!important;
  font-weight:600!important;
}
.btn-primary,input[type="submit"]{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:#fff!important;
}
.btn-primary:hover,input[type="submit"]:hover{
  background:var(--accent-ink)!important;border-color:var(--accent-ink)!important;
}

/* ---------- footer ---------- */
.footer{
  background:var(--ground)!important;
  border-top:1px solid var(--hairline);
  color:var(--muted)!important;
}
.footer a{color:var(--muted)!important}
.footer a:hover{color:var(--ink)!important}
.footer-social .social a{color:var(--muted)!important}
.footer-social .social a:hover{color:var(--accent)!important}

/* ---------- misc theme colour overrides ---------- */
.theme-color-e8676b .btn-primary,
.theme-color-e8676b .post-date,
.theme-color-e8676b .input-field .line:after,
.theme-color-e8676b .input-field .line:before,
.theme-color-e8676b .mobile-nav{background-color:var(--accent)!important}
.theme-color-e8676b a{color:var(--accent-ink)}
::selection{background:var(--accent);color:#fff}

/* pagination */
.pagination a,.pagination span{
  font-family:var(--mono)!important;
  border-radius:6px!important;
  border-color:var(--hairline)!important;
  color:var(--ink-soft)!important;
}
.pagination .current,.pagination a:hover{
  background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important;
}

/* the preloader overlay must follow the page ground, not stay white */
#preloader{background:var(--ground)!important}
#preloader .preload-icon span{background:var(--accent)!important}