/* =======================
   Global design tokens
   (layout.njk defines :root BEFORE this file; these are fallbacks)
   ======================= */
:root{
  /* Brand palette */
  --red:  #8A2D25;
  --pink: #E8B5BE;
  --black:#1E1E1C;
  --lg:   #EBEBEB;
  --mg:   #888C8C;

  /* Site-color fallbacks (layout.njk may override via site.json) */
  --accent: var(--red);
  --text:   var(--black);
  --link:   var(--black);
  --bg:     #EBEBEB;
  --thumbBg:var(--lg);
  --hoverLink: #EBEBEB;
  --borders:   var(--black);
  --smallBorders: var(--mg);

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-serif:"Playfair Display", Georgia, "Times New Roman", serif;

  /* Layout knobs */
  --card-gap: 28px;
  --card-ratio: 16/9;
  --single-width: 60%;
  --double-width: 75%;
  --fixed-col-max: 340px;
}

/* =======================
   Base
   ======================= */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{ max-width:100%; height:auto; display:block }
a{ color:var(--link); text-decoration:none }
a:focus-visible{ outline:2px solid var(--pink); outline-offset:2px }

h1,h2,h3{ font-family:var(--font-serif); color:var(--text); margin:0 0 .5em }
em,i{ font-style:italic }

#container{
  max-width:1100px;
  margin:24px auto;
  padding:0 24px;
}

/* =======================
   Content link style (post & page bodies)
   ======================= */
.post-body a:not(.btn):not(.link-btn):not(.pill):not([class*="btn"]):not([class*="pill"]):not([role="button"]):not(.box-caption),
.page-body a:not(.btn):not(.link-btn):not(.pill):not([class*="btn"]):not([class*="pill"]):not([role="button"]):not(.box-caption){
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}
.post-body a:not(.btn):not(.link-btn):not(.pill):not([class*="btn"]):not([class*="pill"]):not([role="button"]):not(.box-caption):hover,
.page-body a:not(.btn):not(.link-btn):not(.pill):not([class*="btn"]):not([class*="pill"]):not([role="button"]):not(.box-caption):hover,
.post-body a:not(.btn):not(.link-btn):not(.pill):not([class*="btn"]):not([class*="pill"]):not([role="button"]):not(.box-caption):focus,
.page-body a:not(.btn):not(.link-btn):not(.pill):not([class*="btn"]):not([class*="pill"]):not([role="button"]):not(.box-caption):focus{
  text-decoration-thickness: 3px;
}
.post-body a:not(.btn):not(.link-btn):not(.pill):not([class*="btn"]):not([class*="pill"]):not([role="button"]):not(.box-caption):visited,
.page-body a:not(.btn):not(.link-btn):not(.pill):not([class*="btn"]):not([class*="pill"]):not([role="button"]):not(.box-caption):visited{
  color: color-mix(in srgb, var(--accent) 80%, black);
}

/* Optional helper for links outside those containers */
a.is-accent { color: var(--accent); }

/* =======================
   Sticky top navigation
   ======================= */
.navbar{
  position:sticky; top:0; z-index:1000;
  display:grid; grid-template-columns:auto 1fr; align-items:center;
  padding:8px 0;
  border-bottom:1px solid var(--borders);
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(1.2) blur(6px);
  transition: background .2s ease, border-color .2s ease;
}
.brand--logo{
  justify-self:start;
  padding-left:16px;
  text-decoration:none; color:var(--text); font-weight:700;
}
.brand-image{ height:32px; width:auto; vertical-align:middle }
.navbar .inner{
  grid-column:2;
  max-width:1200px;
  margin:0 auto;
  padding:8px 24px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.brand--text{ font-weight:700; font-family:var(--font-serif) }
.navlinks{
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
  text-transform:uppercase; letter-spacing:.12em; font-weight:600;
  font-family:var(--font-sans);
}
.navbar .navlinks a{
  color:var(--text);
  border-radius:999px;
  padding:6px 12px;
}
.navbar .navlinks a:hover,
.navbar .navlinks a:focus{
  background:var(--accent);  /* use accent so dark mode gets brighter red */
  color:#fff;
  text-decoration:none;
}

.brand-row{
  display:flex; align-items:center; gap:10px;
}

/* Mobile layout: logo | (title + toggle) on first row; nav buttons stacked below */
/* Mobile: give the top row breathing room so the toggle never overlaps */
@media (max-width: 800px){
  .navbar{
    display: grid;
    grid-template-columns: auto 1fr auto;     /* logo | title | toggle */
    grid-template-rows: minmax(64px, auto) auto; /* taller top row */
    column-gap: 12px;
    row-gap: 14px;                            /* <-- space between rows */
    align-items: center;
    padding: 10px 12px;
  }

  /* Let children place directly on the navbar grid */
  .navbar .inner{ display: contents; }

  /* Left: logo */
  .navbar .brand--logo{
    grid-column: 1; grid-row: 1;
    align-self: center; justify-self: start;
  }
  .navbar .brand--logo .brand-image{
    display:block; height: 36px; width:auto; /* a bit bigger per your note */
  }

  /* Center: title (bigger, centered) */
  .brand-row{
    grid-column: 2; grid-row: 1;
    display:grid; place-items:center;
    min-height: 48px;                         /* extra headroom for title */
    padding: 4px 0;
  }
  .brand-row .brand--text{
    font-size: 1.15rem; font-weight: 700;     /* bump size */
    line-height: 1.2; text-align: center; margin: 0;
  }

  /* Right: Dark Mode toggle (fixed height) */
  #theme-toggle.theme-toggle{
    grid-column: 3; grid-row: 1;
    justify-self: end; align-self: center;
    height: 38px; line-height: 38px;          /* consistent control height */
    padding: 0 14px; margin: 0;
  }

  /* Second row: full-width stacked nav with comfy top margin */
  .navlinks{
    grid-column: 1 / span 3; grid-row: 2;
    display:flex; flex-direction:column; gap:10px;
    margin-top: 2px;                           /* tiny extra if you want */
  }
  .navbar .navlinks a{
    display:block; text-align:center;
    padding:12px 14px;
  }
}


/* =======================
   Grid / boxes
   ======================= */
.grid{
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: repeat(auto-fit, minmax(32%, 1fr));
  justify-content: center;
}
.grid:not([data-cols]):not(:has(> .box:nth-child(2))){
  max-width: var(--single-width);
  margin-inline: auto;
}
.grid:not([data-cols]):has(> .box:nth-child(2)):not(:has(> .box:nth-child(3))){
  max-width: var(--double-width);
  margin-inline: auto;
}
.grid[data-cols]{ justify-content:center; margin-inline:auto; }
.grid[data-cols="1"]{ grid-template-columns:repeat(1,minmax(0,1fr)); max-width:calc(1 * var(--fixed-col-max) + 0 * var(--card-gap)) }
.grid[data-cols="2"]{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:calc(2 * var(--fixed-col-max) + 1 * var(--card-gap)) }
.grid[data-cols="3"]{ grid-template-columns:repeat(3,minmax(0,1fr)); max-width:calc(3 * var(--fixed-col-max) + 2 * var(--card-gap)) }
.grid[data-cols="4"]{ grid-template-columns:repeat(4,minmax(0,1fr)); max-width:calc(4 * var(--fixed-col-max) + 3 * var(--card-gap)) }

a[data-popup]{
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: .14em;
  text-decoration-thickness: 1.5px;
}
a[data-popup]:hover{ text-decoration-thickness: 3px }

.box{
  position:relative;
  aspect-ratio: var(--card-ratio);
  overflow:hidden;
  background:var(--thumbBg);
  border-radius:8px;
}
.box img{
  width:100%; height:100%; object-fit:cover;
  filter: grayscale(100%); transition: filter .35s ease;
}
.box:hover img{ filter:none }
.box-caption{ position:absolute; inset:0; display:block; text-indent:-9999px; z-index:5 }
.box-caption-text{
  position: absolute; inset: auto 0 0 0;
  padding: .6rem .9rem;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .18em;
  z-index: 2;
  pointer-events: none;
}

/* =======================
   Tag header / About
   ======================= */
.tag-header{
  margin: 6px 0 14px;
  font-family: var(--font-sans);
  color: var(--text);
}
.tag-header .tag-subtle{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mg);
}
.tag-header .tag-name{
  font-size: 14px;
  font-weight: 600;
  margin-left: 6px;
}

.featured{ background:var(--mg); color:#fff; padding:36px 0 }
.featured .wrap{
  max-width:1100px; margin:0 auto; padding:0 24px;
  display:grid; gap:24px; grid-template-columns:1fr 1fr; align-items:center;
}
.featured .media img{ border-radius:8px }
.featured h2{ font-family:var(--font-serif); color:#fff; margin:0 0 8px }
.featured .sub{ font-family:var(--font-sans); color: #E0E0E0; margin:0 0 12px }

.about{ background:var(--thumbBg); padding:48px 0 }
.about .wrap{
  max-width:1100px; margin:0 auto; padding:0 24px;
  display:grid; gap:24px; grid-template-columns:1fr 1.2fr;
}
@media (max-width:800px){ .about .wrap{ grid-template-columns:1fr } }
.about .photo{ border:2px solid var(--red); border-radius:6px; overflow:hidden }
.about .bio{ font-family:var(--font-sans) }
.about .pull{ font-family:var(--font-serif); color:var(--pink) }
/* ===== HERO (About) ===== */
.about-hero{
  display: grid;
  grid-template-columns: minmax(160px, 280px) 1fr; /* desktop: media left, text right */
  gap: 18px;
  align-items: start;
  margin: 12px 0 28px;
  grid-template-areas: "media text";
}

/* Map children to grid areas */
.about-hero__media{ grid-area: media; }
.about-hero__text { 
  grid-area: text; 
  display: grid; 
  gap: .5rem; 
}

/* Photo frame + image */
.about-hero__photoFrame{
  aspect-ratio: 3 / 4;
  width: 100%;
  border-radius: 8px;
  border: 2px solid var(--borders);
  overflow: hidden;
  background: var(--thumbBg);
  margin: 0;
}
.about-hero__photo{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--focus, 50% 50%);
}

/* Keep photo + resume button as one grid child */
.about-hero__media{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* Spacing for the button under the photo */
.about-hero__actions{ margin-top: 4px; }

/* ===== Mobile: stack TEXT first, then MEDIA (photo + button) ===== */
@media (max-width: 800px), (orientation: portrait){
  .about-hero{
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "media";
    gap: 18px;
  }
  .about-hero__photoFrame{ max-width: 320px; } /* keep photo nicely sized on mobile */
}


/* =======================
   Filter pills
   ======================= */
.filter{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin:8px 0 16px;
  max-width: 100%;
  font-family:var(--font-sans);
}
.filter .pill{
  appearance:none; -webkit-appearance:none;
  border:1px solid var(--borders);
  background:var(--bg);
  color: var(--text);
  padding:4px 10px; border-radius:999px;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer;
  white-space: nowrap;   
}
.filter .pill:hover{
  background: var(--accent);
  color:#fff;
  border-color: var(--accent);
}
.filter .pill[aria-pressed="true"], .filter .pill.active{
  background: var(--accent);
  color:#fff;
  border-color: var(--accent);
}
.filter .pill:focus-visible{ outline:2px solid var(--pink); outline-offset:2px }

/* Optional (safety) — if you ever have *tons* of tags,
   let it scroll instead of pushing the layout */
@media (max-width: 760px){
  .filter{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
}


/* =======================
   Misc content
   ======================= */
.middle img{ max-width:100%; height:auto; display:block }
.breadcrumb{ margin:0 0 8px; font-size:12px }
.breadcrumb a{ text-decoration:none; border-bottom:1px dotted currentColor }

.post-body img{ display:block; max-width:100%; height:auto; margin:1rem 0; }
.post-body iframe{ display:block; max-width:100%; height:auto; margin:0; }
.hero-caption { font-size:.9rem; opacity:.75; margin-top:.5rem; }

/* Side-by-side */
.post-body .side-by-side{
  --img-col: 40%;
  display: grid;
  grid-template-columns: minmax(180px, var(--img-col)) 1fr;
  gap: 1rem;
  align-items: start;
  margin: 1rem 0;
}
.post-body .side-by-side > div { min-width: 0; }
.post-body .side-by-side.v-center > div { align-self: center; }
.post-body .side-by-side.v-center img { align-self: start; }
@media (max-width: 800px){
  .post-body .side-by-side{ grid-template-columns: 1fr; }
  .post-body .side-by-side.v-center > div,
  .post-body .side-by-side.v-center img{ align-self: auto; }
}
.post-body .side-by-side{ --img-max-h: none; --img-max-h-mobile: var(--img-max-h); }
.post-body .side-by-side > :first-child img{
  max-height: var(--img-max-h);
  width: auto; height: auto; max-width: 100%;
}
.post-body .side-by-side.right{ grid-template-columns: 1fr minmax(180px, var(--img-col)); }
.post-body .side-by-side.right > :first-child{ grid-column: 2; grid-row: 1; align-self: start; }
.post-body .side-by-side.right > :last-child{ grid-column: 1; grid-row: 1; min-width: 0; }
.post-body .side-by-side > :first-child{ line-height: 0; }
.post-body .side-by-side > :last-child > :first-child{ margin-top: 0; }
@media (max-width: 800px){
  .post-body .side-by-side > :first-child img{ max-height: var(--img-max-h-mobile); }
}

/* =======================
   Buttons
   ======================= */
.btn{
  display:inline-block; padding:10px 16px; border-radius:999px;
  font-family:var(--font-sans); font-weight:600;
  transition: all .2s ease; text-decoration:none;
}
.btn-outline{ background:var(--bg); color:var(--text); border:2px solid var(--borders) }
.btn-outline:hover{ background:var(--accent); color:#fff; border-color:var(--accent) }
.btn-filled{ background:var(--pink); color:#fff; border:2px solid var(--pink) }
.btn-filled:hover{ background:var(--accent); border-color:var(--accent) }

/* Link Buttons (big CTA) */
.link-btn{
  display:inline-flex; align-items:center; gap:.4em;
  padding:6px 12px; border-radius:999px;
  font-family:var(--font-sans); font-weight:600;
  text-decoration:none; line-height:1;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
  white-space:nowrap;
  background:var(--accent); color:var(--bg); border:2px solid var(--accent);
}
.link-btn:hover{ background:var(--black); color:#fff; border-color:var(--black) }
.link-btn:active{ transform: translateY(1px) }
.link-btn:focus-visible{ outline:2px solid var(--black); outline-offset:2px; text-decoration:none }
.link-btn--sm{ padding:4px 10px; font-size:.95em }
.link-btn--lg{ padding:8px 16px; font-size:1.05em }
.link-btn > svg{ width:1em; height:1em; flex:0 0 auto }
@media (prefers-contrast: more){ .link-btn{ color:#fff } }

/* =======================
   Video embeds
   ======================= */
.video-embed{
  position: relative;
  width: 100%;
  margin: 1.5rem auto;
  max-width: var(--max, 100%);
}
.video-embed::before{
  content: "";
  display: block;
  padding-top: calc(100% * var(--ratio-h, 9) / var(--ratio-w, 16));
}
.video-embed[data-ratio="16/9"] { --ratio-w:16; --ratio-h:9; }
.video-embed[data-ratio="4/3"]  { --ratio-w:4;  --ratio-h:3; }
.video-embed[data-ratio="1/1"]  { --ratio-w:1;  --ratio-h:1; }
.video-embed[data-ratio="21/9"] { --ratio-w:21; --ratio-h:9; }
.video-embed iframe{
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}

/* =======================
   Footer
   ======================= */
.footer{
  border-top:4px solid var(--red);
  background:var(--black);
  color:var(--lg);
}
.footer .inner{
  max-width:1100px; margin:0 auto; padding:18px 24px;
  display:flex; gap:16px; align-items:center; justify-content:flex-start;
}
.footer a{ color:var(--lg); text-decoration:none }
.footer a:hover{
  text-decoration:underline;
  text-decoration-color:var(--pink);
  text-underline-offset:2px;
}

/* =======================
   Utilities / safety
   ======================= */
#left, #right{ display:none !important }
@media (orientation: portrait), (max-aspect-ratio: 1/1), (max-width: 800px) {
  .grid, .grid[data-cols]{
    grid-template-columns: 1fr !important;
    max-width: none !important;
    justify-content: stretch;
  }
  :root{ --card-gap: 16px; }
}

/* =======================
   Modal
   ======================= */
.jm-modal{
  position: fixed; inset: 0; z-index: 2000;
  opacity: 0; pointer-events: none;
  transition: opacity 160ms ease;
}
.jm-modal.is-open{ opacity: 1; pointer-events: auto; }
.jm-modal__backdrop{ opacity: 0; transition: opacity 160ms ease; }
.jm-modal.is-open .jm-modal__backdrop{ opacity: 1; }
.jm-modal__frame{
  opacity: 0; transition: opacity 160ms ease;
  position: absolute; inset: 0;
  background: var(--bg); color: var(--text);
  display: grid; grid-template-rows: auto 1fr;
  --modal-pad: clamp(12px, 2vw, 28px);
  --nav-size: 44px; --nav-gap: 8px;    
  padding: var(--modal-pad);
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
.jm-modal.is-open .jm-modal__frame{ opacity: 1; }
.jm-modal__close{
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-size: 22px; line-height: 1;
  margin-left: auto; padding: 14px;
}
.jm-modal__close:focus-visible{ outline:2px solid var(--pink); outline-offset:2px }
.jm-modal__content{
  overflow: auto; height: 100%;
  border: none; border-radius: 0;
  background: var(--bg); box-shadow: none;
  padding: clamp(8px, 1.5vw, 20px); 
}
.jm-modal__content--image{ display: grid; place-items: center; padding: 0; }
.jm-modal__content--image img{
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; opacity: 0; transition: opacity 150ms ease;
}
.jm-modal__content--image img[src]{ opacity: 1; }
.jm-modal__content--post{ max-width: 900px; margin: 0 auto; }
@media (prefers-reduced-motion: reduce){
  .jm-modal, .jm-modal__backdrop, .jm-modal__frame, .jm-modal__content--image img{
    transition: none !important;
  }
}
body.jm-no-scroll{ overflow: hidden; }
.jm-modal__nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: var(--nav-size); height: var(--nav-size);
  border: 0; border-radius: 999px;
  background: rgba(0,0,0,.45); color: #fff; font-size: 28px; line-height: 1;
  display: none; align-items: center; justify-content: center; cursor: pointer;
}
.jm-modal__nav:focus-visible{ outline:2px solid var(--pink); outline-offset:2px }
.jm-modal__prev{ left: var(--modal-pad); }
.jm-modal__next{ right: var(--modal-pad); }
.jm-modal.is-image .jm-modal__nav{ display: inline-flex; }
.jm-modal.is-image .jm-modal__content{
  padding-left: calc(var(--nav-size) + var(--nav-gap));
  padding-right: calc(var(--nav-size) + var(--nav-gap));
}

/* =======================
   Dark mode (auto)
   ======================= */
@media (prefers-color-scheme: dark){
  :root{
    /* softer contrast for astigmatism comfort + brighter accent */
    --bg:#161616;
    --text:#D4D4D4;
    --link:#D4D4D4;
    --thumbBg:#202020;
    --borders:#2A2A2A;
    --smallBorders:#5E5E5E;
    --accent:#de4c45;
  }
  .navbar{
    background: rgba(22,22,22,.92);
    border-color: var(--borders);
  }
  .navbar .navlinks a{ color: var(--text); }
  .box-caption-text{ background: rgba(0,0,0,.6); color:#fff; }
  .footer{ background:#0E0E0E; color:#CFCFCF; }
  .footer a{ color:#CFCFCF; }
  .jm-modal__frame, .jm-modal__content{ background: var(--bg); color: var(--text); }
  /* visited links stay vivid in dark */
  .post-body a:not(.btn):not(.link-btn):not(.pill):not([class*="btn"]):not([class*="pill"]):not([role="button"]):not(.box-caption):visited,
  .page-body a:not(.btn):not(.link-btn):not(.pill):not([class*="btn"]):not([class*="pill"]):not([role="button"]):not(.box-caption):visited{
    color: color-mix(in srgb, var(--accent) 85%, white);
  }
}


/* =======================
   Dark mode (manual toggle overrides)
   ======================= */
:root[data-theme="light"]{
  --bg:#FFFFFF; --text:#1E1E1C; --link:#1E1E1C; --thumbBg:#EBEBEB;
  --hoverLink:#FFFFFF; --borders:#1E1E1C; --smallBorders:#888C8C;
  /* keep navbar/footer consistent */
  .navbar{ background: rgba(255,255,255,.9); }
  .footer{ background: var(--black); color: var(--lg); }
}
:root[data-theme="dark"]{
  --bg:#161616;
  --text:#D4D4D4;
  --link:#D4D4D4;
  --thumbBg:#202020;
  --borders:#2A2A2A;
  --smallBorders:#5E5E5E;
  --accent:#de4c45;
  .navbar{ background: rgba(22,22,22,.92); }
  /* CTA label stays white on red in dark */
  .link-btn{ color:#fff; border-color: var(--accent); }
  .link-btn:hover{ background: var(--black); border-color: var(--black); }
}

/* =======================
   Theme toggle button
   ======================= */
.navbar, header, .site-header { position: relative; }
.theme-toggle{
  position: absolute;
  top: clamp(8px, 1.5vw, 14px);
  right: clamp(8px, 2vw, 20px);
  padding: 6px 12px;
  border: 1px solid var(--borders);
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  cursor: pointer;
  z-index: 2;
  font-family: var(--font-sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  line-height: 1;
}


.theme-toggle:hover{ transform: translateY(-1px); }
.theme-toggle:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
:root[data-theme="dark"] .theme-toggle{ border-color: var(--smallBorders); }

/* Invert the toggle’s look: dark pill in LIGHT, light pill in DARK */
:root[data-theme="light"] .theme-toggle{
  background: var(--black);
  color: #fff;
  border-color: var(--black);
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
:root[data-theme="light"] .theme-toggle:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}

:root[data-theme="dark"] .theme-toggle{
  background: var(--lg);            /* your light gray token */
  color: var(--black);
  border-color: var(--smallBorders);
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}
:root[data-theme="dark"] .theme-toggle:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

/* Optional: subtle active press feedback */
.theme-toggle:active{ transform: translateY(0); }

/* Smooth it out */
.theme-toggle{ transition: background .15s ease, color .15s ease, transform .15s ease, filter .15s ease; }