/* visual-upgrade.css (v2.1 - Border Fix) */

/* --- 1. BASE: Effetti visibili su TUTTI i dispositivi --- */

/* Texture Scanlines */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-notify);
  opacity: 0.03;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    #fff 2px,
    #fff 4px
  );
  mix-blend-mode: overlay;
}

/* Card Principale */
.card {
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 50px rgba(255, 90, 90, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

/* --- Neon Rim palette (per preset) --- */
html{
  /* Fallback (Bitcoin-like orange) */
  --psRimCold: rgba(255,140,0,.22);
  --psRimHot1: rgba(255,140,0,.98);
  --psRimHot2: rgba(255,200,90,.92);
  --psRimHot3: rgba(255,140,0,.78);
  --psRimGlow1: rgba(255,140,0,.18);
  --psRimGlow2: rgba(255,140,0,0);
  --psRimBorder: rgba(255,140,0,.22);
}

html[data-ps-preset="bitcoin"]{
  /* Force pure orange on Bitcoin */
  --psRimCold: rgb(from var(--accent) r g b / .22);
  --psRimHot1: rgb(from var(--accent) r g b / .98);
  --psRimHot2: rgb(from var(--accent) r g b / .92);
  --psRimHot3: rgb(from var(--accent) r g b / .78);
  --psRimGlow1: rgb(from var(--accent) r g b / .18);
  --psRimGlow2: rgb(from var(--accent) r g b / 0);
  --psRimBorder: rgb(from var(--accent) r g b / .22);
}

html[data-ps-preset="invaders"]{
  /* Magenta core with cyan secondary */
  --psRimCold: rgb(from var(--accent) r g b / .18);
  --psRimHot1: rgb(from var(--accent) r g b / .98);
  --psRimHot2: rgb(from var(--accent2, #7ef2ff) r g b / .92);
  --psRimHot3: rgb(from var(--accent) r g b / .78);
  --psRimGlow1: rgb(from var(--accent) r g b / .20);
  --psRimGlow2: rgb(from var(--accent2, #7ef2ff) r g b / .10);
  --psRimBorder: rgb(from var(--accent) r g b / .26);
}

html[data-ps-preset="paper"],
html[data-ps-preset="ritualplus"]{
  /* Red ↔ Green fuse */
  --psRimCold: rgb(from var(--accent) r g b / .16);
  --psRimHot1: rgb(from var(--accent) r g b / .98);
  --psRimHot2: rgb(from var(--accentGreen) r g b / .96);
  --psRimHot3: rgb(from var(--accent) r g b / .80);
  --psRimGlow1: rgb(from var(--accent) r g b / .14);
  --psRimGlow2: rgb(from var(--accentGreen) r g b / .12);
  --psRimBorder: rgb(from var(--accent) r g b / .22);
}

html[data-ps-preset="invaders"] .card{
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.78),
    0 0 0 1px rgba(255, 79, 207, 0.14) inset,
    0 0 38px rgba(255, 79, 207, 0.08),
    0 0 18px rgba(126, 242, 255, 0.04);
  border-color: rgba(255, 79, 207, 0.24);
}

html[data-ps-preset="invaders"] body::after{
  opacity: 0.024;
}

html[data-ps-preset="invaders"] body{
  background-color: #04060f;
  background-image:
    radial-gradient(900px 520px at 50% 8%, rgba(255,79,207,.08), rgba(0,0,0,0) 58%),
    radial-gradient(700px 440px at 78% 22%, rgba(126,242,255,.04), rgba(0,0,0,0) 64%),
    var(--site-bg-image);
}

html[data-ps-preset="invaders"] main.wrap > section.card{
  border-color: rgba(255,79,207,.24);
  box-shadow:
    0 18px 44px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,79,207,.12) inset,
    0 0 34px rgba(255,79,207,.10);
}

html[data-ps-preset="invaders"] .topBarInner{
  border-color: rgba(255,79,207,.24);
  box-shadow: 0 0 0 1px rgba(255,79,207,.10) inset, 0 10px 24px rgba(0,0,0,.36);
}

html[data-ps-preset="invaders"] :where(.pageTag.isCurrent, .menu-item.isCurrent, .psTopbarLink.isCurrent){
  color: color-mix(in srgb, var(--accent) 80%, var(--fg));
  text-shadow: 0 0 10px rgba(255,79,207,.24);
}

@media (max-width: 680px){
  html[data-ps-preset="invaders"] .card{
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.68),
      0 0 0 1px rgba(255, 79, 207, 0.10) inset,
      0 0 16px rgba(255, 79, 207, 0.045);
  }
  html[data-ps-preset="invaders"] body::after{
    opacity: 0.014;
  }
  html[data-ps-preset="invaders"] main.wrap > section.card{
    box-shadow:
      0 12px 28px rgba(0,0,0,.56),
      0 0 0 1px rgba(255,79,207,.09) inset,
      0 0 18px rgba(255,79,207,.08);
  }
}

/* --------------------------------------------------------------------------
   Bitcoin — atmospheric visual layer (orange accent)
   -------------------------------------------------------------------------- */
html[data-ps-preset="bitcoin"] .card{
  box-shadow:
    0 14px 36px rgba(0,0,0,.72),
    0 0 0 1px rgba(247,147,26,.10) inset,
    0 0 30px rgba(247,147,26,.05);
  border-color: rgba(90,255,160,.18);
}

html[data-ps-preset="bitcoin"] body{
  background-color: #050608;
  background-image:
    radial-gradient(860px 480px at 48% 10%, rgba(247,147,26,.06), rgba(0,0,0,0) 56%),
    radial-gradient(640px 400px at 76% 20%, rgba(90,255,160,.03), rgba(0,0,0,0) 62%),
    var(--site-bg-image);
}

html[data-ps-preset="bitcoin"] main.wrap > section.card{
  border-color: rgba(90,255,160,.20);
  box-shadow:
    0 16px 40px rgba(0,0,0,.58),
    0 0 0 1px rgba(247,147,26,.08) inset,
    0 0 28px rgba(247,147,26,.06);
}

html[data-ps-preset="bitcoin"] :where(.pageTag.isCurrent, .menu-item.isCurrent, .psTopbarLink.isCurrent){
  color: color-mix(in srgb, var(--accent) 78%, var(--fg));
  text-shadow: 0 0 10px rgba(247,147,26,.20);
}

/* --------------------------------------------------------------------------
   RitualPlus — atmospheric visual layer (red/amber accent)
   -------------------------------------------------------------------------- */
html[data-ps-preset="ritualplus"] .card{
  box-shadow:
    0 14px 36px rgba(0,0,0,.72),
    0 0 0 1px rgba(255,90,90,.10) inset,
    0 0 30px rgba(255,90,90,.05);
  border-color: rgba(255,90,90,.20);
}

html[data-ps-preset="ritualplus"] body{
  background-color: #0a0608;
  background-image:
    radial-gradient(860px 480px at 46% 10%, rgba(255,90,90,.07), rgba(0,0,0,0) 56%),
    radial-gradient(640px 400px at 80% 18%, rgba(255,179,71,.04), rgba(0,0,0,0) 62%),
    var(--site-bg-image);
}

html[data-ps-preset="ritualplus"] main.wrap > section.card{
  border-color: rgba(255,90,90,.22);
  box-shadow:
    0 16px 40px rgba(0,0,0,.56),
    0 0 0 1px rgba(255,90,90,.08) inset,
    0 0 26px rgba(255,90,90,.06);
}

html[data-ps-preset="ritualplus"] :where(.pageTag.isCurrent, .menu-item.isCurrent, .psTopbarLink.isCurrent){
  color: color-mix(in srgb, var(--accent) 78%, var(--fg));
  text-shadow: 0 0 10px rgba(255,90,90,.20);
}

/* --------------------------------------------------------------------------
   Paper — light-mode card enhancement (clean, no glow/neon)
   -------------------------------------------------------------------------- */
html[data-ps-preset="paper"] .card{
  box-shadow:
    0 10px 28px rgba(0,0,0,.12),
    0 0 0 1px rgba(255,255,255,.50) inset;
  border-color: rgba(34,30,24,.12);
}

html[data-ps-preset="paper"] main.wrap > section.card{
  border-color: rgba(34,30,24,.14);
  box-shadow:
    0 12px 30px rgba(0,0,0,.14),
    0 0 0 1px rgba(255,255,255,.44) inset;
}

html[data-ps-preset="paper"] body::after{
  opacity: 0;
}

/* Mobile shadow reduction — bitcoin, ritualplus, paper */
@media (max-width: 680px){
  html[data-ps-preset="bitcoin"] .card{
    box-shadow:
      0 10px 24px rgba(0,0,0,.64),
      0 0 0 1px rgba(247,147,26,.07) inset;
  }
  html[data-ps-preset="bitcoin"] main.wrap > section.card{
    box-shadow:
      0 12px 28px rgba(0,0,0,.52),
      0 0 0 1px rgba(247,147,26,.06) inset;
  }
  html[data-ps-preset="ritualplus"] .card{
    box-shadow:
      0 10px 24px rgba(0,0,0,.64),
      0 0 0 1px rgba(255,90,90,.07) inset;
  }
  html[data-ps-preset="ritualplus"] main.wrap > section.card{
    box-shadow:
      0 12px 28px rgba(0,0,0,.52),
      0 0 0 1px rgba(255,90,90,.06) inset;
  }
  html[data-ps-preset="paper"] .card{
    box-shadow:
      0 6px 16px rgba(0,0,0,.09),
      0 0 0 1px rgba(255,255,255,.40) inset;
  }
  html[data-ps-preset="paper"] main.wrap > section.card{
    box-shadow:
      0 8px 20px rgba(0,0,0,.10),
      0 0 0 1px rgba(255,255,255,.34) inset;
  }
}

/* --- Neon Rim: main frame (core stack) --- */
main.wrap > section.card{
  position: relative;
  isolation: isolate;
  border-color: var(--psRimBorder, rgba(255,140,0,.22));
  --psRimW: 1.92px;
}

@property --psRimA{
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

main.wrap > section.card::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;

  /* Paint ONLY the rim: the center is "punched out" via mask so the glass content
     is never covered by the rotating gradient. */
  padding: var(--psRimW, 3px);
  background: conic-gradient(
    from var(--psRimA, 0deg),
    var(--psRimCold, rgba(255,140,0,.22)) 0 82%,
    var(--psRimHot1, rgba(255,140,0,.98)) 88%,
    var(--psRimHot2, rgba(255,200,90,.92)) 90%,
    var(--psRimHot3, rgba(255,140,0,.78)) 92%,
    var(--psRimCold, rgba(255,140,0,.22)) 96%,
    var(--psRimCold, rgba(255,140,0,.22)) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .95;
  filter:
    blur(6px)
    drop-shadow(0 0 10px var(--psRimGlow1, rgba(255,140,0,.18)))
    drop-shadow(0 0 10px var(--psRimGlow2, rgba(255,140,0,0)));
}

main.wrap > section.card > *{
  position: relative;
  z-index: var(--z-base);
}

/* Rim migration: dashboard pages move the animated rim from outer frame to inner widgets. */
body[data-page="dashboard"] main.wrap > section.card::before,
body[data-page="dash-substack"] main.wrap > section.card::before{
  content: none;
  animation: none;
}

@media (prefers-reduced-motion: no-preference){
  main.wrap > section.card::before{
    animation: psRimAngle 9.7s linear infinite;
  }
}

@keyframes psRimAngle{
  0%{ --psRimA: 0deg; }
  100%{ --psRimA: 360deg; }
}

/* --- Gate: reactive rim (error/success) --- */
body.index-gate main.wrap > section.card.flash-bad{
  --psRimCold: rgba(255,80,80,.22);
  --psRimHot1: rgba(255,80,80,.98);
  --psRimHot2: rgba(255,160,160,.92);
  --psRimHot3: rgba(255,80,80,.78);
  --psRimGlow1: rgba(255,80,80,.26);
  --psRimGlow2: rgba(255,80,80,.12);
  --psRimBorder: rgba(255,80,80,.22);
}
body.index-gate main.wrap > section.card.flash-ok{
  --psRimCold: rgba(80,255,170,.18);
  --psRimHot1: rgba(80,255,170,.92);
  --psRimHot2: rgba(170,255,210,.84);
  --psRimHot3: rgba(80,255,170,.70);
  --psRimGlow1: rgba(80,255,170,.18);
  --psRimGlow2: rgba(80,255,170,.10);
  --psRimBorder: rgba(80,255,170,.18);
}
@media (prefers-reduced-motion: no-preference){
  body.index-gate main.wrap > section.card.flash-bad::before,
  body.index-gate main.wrap > section.card.flash-ok::before{
    animation-play-state: paused;
  }
}

/* topbar_and_effects (PATCH) — Home: sci-fi scanner on brand (dock mobile only). */
html.psDockOn body[data-page="home"] .psShell .psBrandLink{
  position: relative;
  overflow: hidden;
}
html.psDockOn body[data-page="home"] .psShell .psBrandLink::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  mix-blend-mode: screen;
  left: -60%;
  width: 220%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgb(from var(--accentGreen) r g b / 0) 46%,
    rgb(from var(--accentGreen) r g b / .10) 48%,
    rgb(from var(--accentGreen) r g b / .32) 50%,
    rgb(from var(--accentGreen) r g b / .10) 52%,
    rgb(from var(--accentGreen) r g b / 0) 54%,
    transparent 100%
  );
  animation: psBrandScan 6.8s ease-in-out infinite;
  will-change: transform;
  filter: none;
}
@keyframes psBrandScan{
  0%   { transform: translateX(-22%); }
  100% { transform: translateX(22%); }
}
@media (prefers-reduced-motion: reduce){
  html.psDockOn body[data-page="home"] .psShell .psBrandLink::after{
    animation: none;
    opacity: 0;
  }
}

/* Base Bottoni Generica */
.pageTag, #menuBtn {
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  z-index: var(--z-sticky);
}

/* --- FIX MENU BORDER --- */
/* Forziamo il bordo del menu per essere visibile come gli altri pulsanti */
#menuBtn {
  border: 1px solid transparent !important;
  background:
    var(--menu-btn-bg) padding-box,
    linear-gradient(
      120deg,
      transparent 0%,
      var(--accent) 14%,
      transparent 28%,
      var(--accent2, var(--accentGreen)) 42%,
      transparent 56%,
      var(--accent) 70%,
      transparent 84%,
      transparent 100%
    ) border-box;
  background-clip: padding-box, border-box;
  background-origin: border-box;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

/* --- 2. DESKTOP: Effetti "Hover" (Solo se c'è il mouse) --- */
@media (hover: hover) {

  /* EP1 micro-motion: add subtle lift/scale and make cards parallax-ready */
  .card{
    transform-style: preserve-3d;
    transition:
      transform 0.6s cubic-bezier(.23,1,.32,1),
      box-shadow 0.4s ease,
      border-color 0.4s ease;
  }

  .card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow:
      0 25px 70px rgba(0, 0, 0, 1),
      0 0 0 1px rgba(255, 255, 255, 0.1) inset,
      0 0 100px rgba(255, 90, 90, 0.08);
    transform: translateY(-8px) scale(1.01);
  }

  /* Menu Hover: Glitch + Bordo più chiaro */
  #menuBtn:hover {
    letter-spacing: 0.2em;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  }

  #menuBtn:hover .homeMenuLabel {
    animation: textGlitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
    color: #fff;
  }

  /* Resources Hover */
  .pageTag.resourcesTag:hover {
    background: rgba(255, 90, 90, 0.15);
    border-color: var(--accent);
    box-shadow: 0 0 20px rgba(255, 90, 90, 0.4), inset 0 0 15px rgba(255, 90, 90, 0.1);
    text-shadow: 0 0 8px var(--accent);
    transform: translateY(-2px);
  }

  /* Blog Hover */
  .pageTag.blogTag:hover {
    background: rgba(60, 255, 140, 0.15);
    border-color: var(--accentGreen);
    box-shadow: 0 0 20px rgba(60, 255, 140, 0.4), inset 0 0 15px rgba(60, 255, 140, 0.1);
    text-shadow: 0 0 8px var(--accentGreen);
    transform: translateY(-2px);
  }

  /* Banner Hover */
  .bannerRow:hover .bannerImg {
    filter: contrast(1.1) saturate(1.1);
    transform: scale(1.03);
  }
}

/* --- 3. MOBILE: Feedback al tocco (Active State) --- */

.pageTag:active, #menuBtn:active {
  transform: scale(0.96);
  border-color: rgba(255, 255, 255, 0.4) !important; /* Feedback visivo sul bordo al tocco */
}

.pageTag.resourcesTag:active {
  background: rgba(255, 90, 90, 0.25);
  border-color: var(--accent) !important;
}

.pageTag.blogTag:active {
  background: rgba(60, 255, 140, 0.25);
  border-color: var(--accentGreen) !important;
}

/* Animazioni e Utilities */
@keyframes textGlitch {
  0% { text-shadow: 0 0 0 transparent; transform: translate(0); }
  20% { text-shadow: -2px 0 0 rgba(255,0,0,0.7), 2px 0 0 rgba(0,255,255,0.7); transform: translate(-1px, 1px); }
  40% { text-shadow: 2px 0 0 rgba(255,0,0,0.7), -2px 0 0 rgba(0,255,255,0.7); transform: translate(1px, -1px); }
  60% { text-shadow: 0 0 0 transparent; transform: translate(0); }
  100% { text-shadow: 0 0 0 transparent; transform: translate(0); }
}

.bannerRow {
  position: relative;
  box-shadow: inset 0 0 60px rgba(0,0,0, 0.9);
}

.bannerImg {
  transition: transform 0.6s ease, filter 0.5s ease;
}

/* --- Accessibility: honor reduced motion --- */
/* --- THEME PARITY: keep same depth language in light mode (shape/shadow), invert only colors --- */
html[data-theme="light"] body::after{
  opacity:0.02;
  mix-blend-mode: multiply;
}

html[data-theme="light"] .card{
  border:1px solid rgba(0,0,0,0.10);
  box-shadow:
    0 15px 40px rgba(0,0,0,0.20),
    0 0 0 1px rgba(255,255,255,0.70) inset;
}

html[data-theme="light"] #menuBtn{
  border:1px solid transparent !important;
  background:
    var(--menu-btn-bg) padding-box,
    linear-gradient(
      120deg,
      transparent 0%,
      var(--accent) 14%,
      transparent 28%,
      var(--accent2, var(--accentGreen)) 42%,
      transparent 56%,
      var(--accent) 70%,
      transparent 84%,
      transparent 100%
    ) border-box;
  background-clip: padding-box, border-box;
  background-origin: border-box;
  box-shadow:0 0 0 1px rgba(255,255,255,0.70) inset;
}

@media (hover:hover){
  html[data-theme="light"] .card:hover{
    border-color:rgba(0,0,0,0.16);
    box-shadow:
      0 25px 70px rgba(0,0,0,0.28),
      0 0 0 1px rgba(255,255,255,0.82) inset;
  }
  html[data-theme="light"] #menuBtn:hover{
    box-shadow:0 0 20px rgba(0,0,0,0.08);
  }
  html[data-theme="light"] #menuBtn:hover .homeMenuLabel{
    color:#000;
  }
}

html[data-theme="light"] .pageTag:active,
html[data-theme="light"] #menuBtn:active{
  border-color:rgba(0,0,0,0.26) !important;
}

html[data-theme="light"] .bannerRow{
  box-shadow: inset 0 0 50px rgba(0,0,0,0.22);
}

/* --- EP1: reveal-on-scroll (armed by ps-motion.js) --- */
@media (prefers-reduced-motion: no-preference){
  html.ps-motion-armed .ps-reveal{
    opacity:0;
    transform: translateY(14px);
    transition:
      opacity 0.45s ease,
      transform 0.6s cubic-bezier(.23,1,.32,1);
    transition-delay: calc(var(--ps-item-index, 0) * 0.05s);
    will-change: opacity, transform;
  }
  html.ps-motion-armed .ps-reveal.ps-visible{
    opacity:1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce){
  .card,
  .pageTag,
  #menuBtn,
  .bannerImg,
  #menuBtn .homeMenuLabel{
    transition: none !important;
    animation: none !important;
  }

  /* remove movement feedback */
  .pageTag:active,
  #menuBtn:active,
  .pageTag.resourcesTag:hover,
  .pageTag.blogTag:hover,
  .bannerRow:hover .bannerImg,
  .card:hover{
    transform: none !important;
  }

  /* EP1 reveal: never hide content in reduced-motion */
  html.ps-motion-armed .ps-reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* --- EP3 Optional FX (gated by ps-fx.js via <html> classes) --- */

/* Accent shimmer: keep it on micro-accent markers only (⋄), not titles */
@media (prefers-reduced-motion: no-preference){
  @keyframes psAccentGlow{
    0%,100%{ opacity:0.85; text-shadow: 0 0 0 currentColor; }
    50%{ opacity:1; text-shadow: 0 0 14px currentColor; }
  }

  html.psFxShimmer .blogSection .postTitle:before,
  html.psFxShimmer .blogArchive .postTitle:before,
  html.psFxShimmer .resourcesSection .postTitle:before,
  html.psFxShimmer .resourcesArchive .postTitle:before{
    animation: psAccentGlow 3.6s ease-in-out infinite;
    will-change: opacity, text-shadow;
  }
}

/* Custom cursor (desktop-only) */
@media (hover: hover) and (pointer: fine){
  html.psFxCursor body{
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='7' fill='rgba(255,90,90,0.55)'/%3E%3C/svg%3E") 12 12, auto;
  }
  html.psFxCursor a,
  html.psFxCursor button{
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='11' fill='rgba(60,255,140,0.75)'/%3E%3C/svg%3E") 16 16, pointer;
  }
}

/* Particles canvas baseline (JS controls draw + theme) */
html.psFxParticles #psParticlesCanvas{ opacity:0.22; }
html[data-theme="light"].psFxParticles #psParticlesCanvas{ opacity:0.14; }

/* v2.1 PATCH - Multi-page coherence guardrails
   Keep non-home surfaces calmer while preserving existing identity.
*/
@media (hover: hover){
  body[data-page="blog"] .card:hover,
  body[data-page="resources"] .card:hover,
  body[data-page="archive"] .card:hover,
  body[data-page="dashboard"] .card:hover,
  body[data-page="post"] .card:hover,
  body[data-page^="dash-"] .card:hover{
    transform: translateY(-4px) scale(1.005);
  }
}

body[data-page="blog"] .card,
body[data-page="resources"] .card,
body[data-page="archive"] .card,
body[data-page="dashboard"] .card,
body[data-page="post"] .card,
body[data-page^="dash-"] .card{
  box-shadow:
    0 12px 30px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.05) inset;
}

html[data-theme="light"] body[data-page="blog"] .card,
html[data-theme="light"] body[data-page="resources"] .card,
html[data-theme="light"] body[data-page="archive"] .card,
html[data-theme="light"] body[data-page="dashboard"] .card,
html[data-theme="light"] body[data-page="post"] .card,
html[data-theme="light"] body[data-page^="dash-"] .card{
  box-shadow:
    0 12px 26px rgba(0,0,0,.16),
    0 0 0 1px rgba(255,255,255,.70) inset;
}