@font-face {
  font-family: "Cloister Black";
  src: url("assets/CloisterBlack.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

html[data-theme="salvatore"] {
  color-scheme: dark;
  background-color: #090706;
  --bg: #090706;
  --surface: #17110e;
  --border: #3a2c24;
  --text: #e6dccb;
  --dim: #baaa94;
  --muted: #928171;
  --accent: #e3d4b8;
  --prompt: #ad966e;
  --gold: #8e724d;
  --gold-hi: #d8c7a5;
  --particle-ink: #c3ad86;
  --wisp-ember: rgba(205, 148, 67, 0.12);
  --wisp-ash: rgba(205, 180, 135, 0.025);
  --wisp-fade: 0.3;
  --wisp-count: 8;
  scrollbar-color: #4a382e var(--bg);
}

html[data-theme="salvatore"] body {
  background:
    radial-gradient(ellipse 48% 38% at 50% 2%, #3d2b241f, transparent 76%),
    repeating-linear-gradient(90deg, transparent 0 117px, #0000008c 118px 120px, #32251f24 121px, transparent 123px 240px),
    repeating-linear-gradient(89deg, #2b231e10 0 1px, transparent 1px 6px, #0000002e 7px 9px, transparent 10px 17px),
    linear-gradient(90deg, #080605, #140e0b 23%, #211915 50%, #140e0b 77%, #080605);
  background-attachment: fixed;
}

html[data-theme="salvatore"] body::before {
  content: "";
  position: fixed;
  inset: -8%;
  z-index: 8;
  pointer-events: none;
  background:
    radial-gradient(ellipse 28% 38% at 28% 68%, #a85c2718, transparent 70%),
    radial-gradient(ellipse 20% 30% at 72% 34%, #82421f0f, transparent 74%);
  mix-blend-mode: soft-light;
  opacity: 0.28;
  animation: salvatoreFirelight 11s ease-in-out infinite alternate;
  will-change: opacity, transform;
}

@keyframes salvatoreFirelight {
  0%   { opacity: 0.18; transform: scale(1) translate3d(-0.25%, 0.2%, 0); }
  24%  { opacity: 0.27; }
  52%  { opacity: 0.21; transform: scale(1.012) translate3d(0.3%, -0.15%, 0); }
  76%  { opacity: 0.31; }
  100% { opacity: 0.23; transform: scale(1.006) translate3d(-0.1%, 0.25%, 0); }
}

html[data-theme="salvatore"] body::after {
  z-index: 9;
  background:
    radial-gradient(ellipse 68% 64% at 50% 24%, transparent 24%, #00000042 56%, #000000bd 100%),
    linear-gradient(90deg, #00000096 0%, transparent 20%, transparent 80%, #00000096 100%),
    linear-gradient(180deg, #00000052 0%, transparent 20%, transparent 68%, #00000085 100%);
}

html[data-theme="salvatore"] ::selection { background: #514036; color: #f3eadb; }
html[data-theme="salvatore"]::-webkit-scrollbar-thumb { background: #4a382e; }
html[data-theme="salvatore"]::-webkit-scrollbar-thumb:hover { background: #6b5544; }

html[data-theme="salvatore"] .site-nav,
html[data-theme="salvatore"] #statusbar {
  background: linear-gradient(#17100df7, #090706f7);
  box-shadow: 0 2px 0 #070504, 0 3px 0 #51403840, 0 10px 28px #00000055;
}

html[data-theme="salvatore"] .site-nav { padding-top: 19px; padding-bottom: 17px; }
html[data-theme="salvatore"] .site-nav a.active::before { content: "· "; }
html[data-theme="salvatore"] #theme-toggle { clip-path: none; border-color: #59473a; color: var(--accent); }

html[data-theme="salvatore"] #statusbar {
  left: 50%;
  right: auto;
  bottom: 8px;
  width: min(560px, calc(100% - 36px));
  transform: translateX(-50%);
  padding: 5px 16px;
  color: #c6b18b;
  background: linear-gradient(180deg, #3a2c20f2, #17100df5 55%, #0b0807f7);
  border: 1px solid #725c3f;
  border-top-color: #b09465;
  border-bottom-color: #2a1d14;
  box-shadow: inset 0 1px 0 #d2b68024, inset 0 -3px 8px #0008, 0 5px 18px #000b;
  font-family: Georgia, "Times New Roman", serif;
}

html[data-theme="salvatore"] #statusbar span { font-size: 0; }
html[data-theme="salvatore"] #statusbar span::before {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-shadow: 0 1px 0 #000;
}
html[data-theme="salvatore"] #statusbar span:first-child::before { content: attr(data-room); color: #d1b982; }
html[data-theme="salvatore"] #statusbar span:last-child::before { content: "ISA · MMXXVI"; color: #9c896d; }

html[data-theme="salvatore"] main {
  max-width: 900px;
  padding-inline: 54px;
  background:
    repeating-linear-gradient(89deg, transparent 0 12px, #2b231e0c 13px, transparent 14px 26px),
    linear-gradient(90deg, #0c0908f7, #1e1511f5 50%, #0c0908f7);
  border-inline: 1px solid #49372e66;
  box-shadow: 0 0 0 6px #08060570, 0 0 0 7px #46342b35, 0 0 80px #00000080;
}

html[data-theme="salvatore"] #hero {
  padding: 92px 52px 126px;
  min-height: 470px;
}

html[data-theme="salvatore"] #hero::before {
  inset: 24px -25px 28px;
  width: auto;
  height: auto;
  border: 1px solid #67534638;
  box-shadow:
    inset 0 0 0 5px #0e0a0870,
    inset 0 0 0 6px #6853462b,
    inset 0 18px 30px #00000052,
    inset 0 -22px 35px #00000070,
    0 12px 28px #00000055;
  background:
    radial-gradient(ellipse at 25% 24%, #5b403329, transparent 48%),
    linear-gradient(90deg, #08060570, #100b0994 55%, #08060578),
    url("pics/salvatore-oak-relief.webp") center / cover no-repeat;
  background-position: center, center, center calc(50% + var(--salvatore-depth-y, 0px));
  background-size: auto, auto, cover;
  background-repeat: no-repeat;
  background-blend-mode: screen, multiply, normal;
  mask: none;
  -webkit-mask: none;
  animation: none;
}

html[data-theme="salvatore"] #hero::after {
  content: "";
  position: absolute;
  right: 34px;
  top: 62px;
  width: 170px;
  height: 310px;
  border: 1px solid #6652464a;
  border-radius: 50% 50% 0 0;
  box-shadow: 0 0 0 7px #0e0a0860, 0 0 0 8px #66524626, inset 0 0 45px #00000090;
  background: linear-gradient(90deg, transparent 49.5%, #66524626 50%, transparent 50.5%), radial-gradient(ellipse at 50% 25%, #4b352b18, transparent 72%);
  pointer-events: none;
  z-index: -2;
}

html[data-theme="salvatore"] #hero-sword {
  right: 119px;
  top: 98px;
  height: 296px;
  transform: translateX(50%);
  opacity: 0.28;
  filter: invert(1) sepia(1) saturate(0.6);
}
html[data-theme="salvatore"] #wisps { opacity: 0.4; }
html[data-theme="salvatore"] #hero h1 {
  font-family: "Cloister Black", "Old English Text MT", Georgia, serif;
  font-size: 94px;
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 0.92;
  color: var(--text);
  background: none;
  animation: none;
  text-shadow: 0 2px 18px #d1a15c20;
  margin-bottom: 22px;
}
html[data-theme="salvatore"] #avatar-wrap { margin-bottom: 12px; }
html[data-theme="salvatore"] #avatar-wrap #eye-icon,
html[data-theme="salvatore"] #avatar-wrap #avatar,
html[data-theme="salvatore"] #avatar-wrap canvas,
html[data-theme="salvatore"] .nav-brand img,
html[data-theme="salvatore"] .social-link img { filter: sepia(0.6); }
html[data-theme="salvatore"] #avatar-wrap:hover { filter: drop-shadow(0 0 12px #bd874a50); }

html[data-theme="salvatore"] #avatar-wrap {
  margin-left: 0;
  min-height: 150px;
  align-items: center;
}
html[data-theme="salvatore"] #eye-3d,
html[data-theme="salvatore"] #avatar { display: none; }
html[data-theme="salvatore"] #salvatore-crest {
  display: block;
  width: 156px;
  height: auto;
  opacity: 0.9;
  transform: translateX(-32px);
  filter: saturate(0.72) brightness(0.82) drop-shadow(0 10px 18px #000b);
  transition: opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease;
}
html[data-theme="salvatore"] #avatar-wrap:hover #salvatore-crest {
  opacity: 1;
  transform: translateX(-32px) translateY(-2px) scale(1.02);
  filter: saturate(0.82) brightness(0.9) drop-shadow(0 12px 22px #000d);
}
html[data-theme="salvatore"] .nav-brand img:not(.salvatore-crest-nav) { display: none; }
html[data-theme="salvatore"] .nav-brand .salvatore-crest-nav {
  display: block;
  width: 27px;
  height: 27px;
  object-fit: contain;
  opacity: 0.84;
  filter: saturate(0.65) brightness(0.86) drop-shadow(0 2px 5px #000a);
}
html[data-theme="salvatore"] #carousel { color: var(--accent) !important; }
html[data-theme="salvatore"] #boot { color: var(--dim); background: #090706; }
html[data-theme="salvatore"] #sudo-toast { color: #e5ae91; border-color: #8c5f3c; }

html[data-theme="salvatore"] #hero .prompt,
html[data-theme="salvatore"] .ls-line .prompt { font-size: 0; }
html[data-theme="salvatore"] #hero .prompt::after {
  content: "❧";
  display: inline-block;
  margin-right: 8px;
  font: 13px/1 Georgia, serif;
  color: var(--gold);
}
html[data-theme="salvatore"] .ls-line { font-size: 0; }
html[data-theme="salvatore"] .ls-line::after {
  content: "A catalogue of selected works";
  font: 12px/1.6 Georgia, "Times New Roman", serif;
  letter-spacing: 0.07em;
  color: var(--muted);
}

html[data-theme="salvatore"] .section { padding-block: 58px; scroll-margin-top: 70px; }
html[data-theme="salvatore"] .section::before { background: linear-gradient(90deg, #866336, #e2c491 45%, transparent); }
html[data-theme="salvatore"] .section-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  font-weight: 400;
  letter-spacing: 0.025em;
  text-transform: none;
  color: var(--text);
  margin-bottom: 30px;
}
html[data-theme="salvatore"] .section-title::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-right: 13px;
  vertical-align: -6px;
  background: url("pics/salvatore-i-crest-black.webp") center / contain no-repeat;
  filter: brightness(0.78) contrast(1.08) drop-shadow(0 2px 4px #000a);
}
html[data-theme="salvatore"] .tech-grid { gap: 20px; color: #d3b984; }
html[data-theme="salvatore"] .tech-grid i { opacity: 0.8; }
html[data-theme="salvatore"] .tech-grid i::after { box-shadow: 0 3px 12px #0009; }
html[data-theme="salvatore"] .tl-company { color: var(--text); }
html[data-theme="salvatore"] .tl-body li { color: var(--dim); }
html[data-theme="salvatore"] .tl-dot { background: #ad8750; border-color: #e2c491; }
html[data-theme="salvatore"] .tl-item:hover .tl-dot { box-shadow: 0 0 10px #d4a55350; }
html[data-theme="salvatore"] .tl-demo,
html[data-theme="salvatore"] .tl-tags span,
html[data-theme="salvatore"] .proj-tags span {
  background: linear-gradient(#201713, #120d0b);
  border-color: #46352c;
  border-top-color: #5f4b40;
  border-bottom-color: #0c0907;
  transform: none;
  color: var(--dim);
}
html[data-theme="salvatore"] .tl-demo:hover,
html[data-theme="salvatore"] .tl-item:hover .tl-tags span { border-color: #b18c56; }

html[data-theme="salvatore"] .project-grid { gap: 16px; }
html[data-theme="salvatore"] .glow-card { clip-path: none; }
html[data-theme="salvatore"] .project-card {
  background:
    radial-gradient(ellipse at 50% 0%, #3d2b2426, transparent 72%),
    repeating-linear-gradient(91deg, #2b231e12 0 1px, transparent 2px 8px),
    #15100d;
  border-color: #49372e;
  box-shadow: inset 0 0 0 5px #0b0807, inset 0 0 0 6px #3b2b246e, inset 0 0 34px #000b;
}
html[data-theme="salvatore"] .project-mark { filter: drop-shadow(0 4px 10px #000); }
html[data-theme="salvatore"] .project-mark img { width: 40%; height: 40%; filter: sepia(0.65); opacity: 0.9; }
html[data-theme="salvatore"] .project-overlay { background: #0f0b09f4; }
html[data-theme="salvatore"] .project-card::before { background: linear-gradient(115deg, transparent 32%, #ecc8891c 48%, transparent 62%); }
html[data-theme="salvatore"] .glow-card::after { background: linear-gradient(135deg, #cbb895, #44342b 40%, #806b50); }
html[data-theme="salvatore"] .project-card:hover .proj-cta,
html[data-theme="salvatore"] .project-card.touch-open .proj-cta { text-shadow: 0 0 12px #d3a45860; }
html[data-theme="salvatore"] a:focus-visible,
html[data-theme="salvatore"] button:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; }

@media (max-width: 760px) {
  html[data-theme="salvatore"] .nav-brand { display: none; }
  html[data-theme="salvatore"] .site-nav { justify-content: flex-start; gap: 12px; padding-right: 58px; }
  html[data-theme="salvatore"] #theme-toggle .label { display: none; }
}

@media (max-width: 580px) {
  html[data-theme="salvatore"] body::after {
    background:
      radial-gradient(ellipse 138% 70% at 50% 24%, transparent 34%, #0000004d 70%, #00000096 100%),
      linear-gradient(90deg, #00000059 0%, transparent 14%, transparent 86%, #00000059 100%),
      linear-gradient(180deg, #0000003d 0%, transparent 18%, transparent 72%, #00000070 100%);
  }

  html[data-theme="salvatore"] main { margin-inline: 12px; padding-inline: 23px; }
  html[data-theme="salvatore"] .site-nav { gap: 10px; padding-left: 14px; }
  html[data-theme="salvatore"] .site-nav a { font-size: 9px; letter-spacing: 0.02em; white-space: nowrap; }
  html[data-theme="salvatore"] #hero { padding: 70px 18px 82px; min-height: 410px; }
  html[data-theme="salvatore"] #hero::before { inset: 18px -12px; }
  html[data-theme="salvatore"] #hero::after { width: 102px; height: 228px; right: 8px; top: 48px; opacity: 0.65; }
  html[data-theme="salvatore"] #hero-sword { right: 59px; height: 205px; top: 82px; opacity: 0.18; }
  html[data-theme="salvatore"] #hero h1 { font-size: 76px; }
  html[data-theme="salvatore"] #avatar-wrap { min-height: 112px; }
  html[data-theme="salvatore"] #salvatore-crest { width: 116px; transform: translateX(-18px); }
  html[data-theme="salvatore"] #avatar-wrap:hover #salvatore-crest { transform: translateX(-18px) translateY(-2px) scale(1.02); }
  html[data-theme="salvatore"] #build-wrap { max-width: 260px; }
  html[data-theme="salvatore"] .section { padding-block: 42px; }
  html[data-theme="salvatore"] .section-title { font-size: 24px; }
  html[data-theme="salvatore"] .section-title::before { width: 24px; height: 24px; margin-right: 10px; vertical-align: -5px; }
  html[data-theme="salvatore"] .tech-grid { gap: 16px; }
  html[data-theme="salvatore"] .project-grid { gap: 10px; }
  html[data-theme="salvatore"] .tl-item { gap: 12px; }
  html[data-theme="salvatore"] .tl-company-wrap { flex-wrap: wrap; }
  html[data-theme="salvatore"] .tl-company { flex: 1; min-width: 0; }
  html[data-theme="salvatore"] .project-overlay { padding: 9px; gap: 5px; }
  html[data-theme="salvatore"] .proj-tags { gap: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="salvatore"] body::before { animation: none; opacity: 0.22; transform: none; }
}