/* ============================================================
   ATTIC :: SELF-CONTAINED STYLESHEET
   Combines structural layout (from /assets/style.css) with the
   hostile-takeover theme.  Only external deps: font files in
   /assets/ and cursor files in /assets/.
   ============================================================ */

/* === FONTS === */
@font-face {
  font-family: "LT Remark";
  src: url("/assets/ltremark/LTRemark-Regular.otf") format("opentype");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "LT Remark";
  src: url("/assets/ltremark/LTRemark-Bold.otf") format("opentype");
  font-weight: bold; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Redaction";
  src: url("/assets/redaction/Redaction-Regular.otf") format("opentype");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Redaction 10";
  src: url("/assets/redaction/Redaction10-Regular.otf") format("opentype");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Redaction 20";
  src: url("/assets/redaction/Redaction20-Regular.otf") format("opentype");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/other fonts/Geist-Medium.otf") format("opentype");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "VCR OSD Mono";
  src: url("/assets/other fonts/VCR_OSD_MONO_1.001.ttf") format("truetype");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Blaster";
  src: url("/assets/other fonts/BlasterFont-Demo.otf") format("opentype");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto Mono";
  src: url("/assets/other fonts/RobotoMono-Regular.ttf") format("truetype");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto Mono";
  src: local("Cascadia Mono"), local("Consolas"), local("Menlo"),
       local("DejaVu Sans Mono"), local("Courier New"), local("monospace");
  font-weight: normal; font-style: normal; font-display: swap;
  unicode-range: U+2580-259F;
}

/* === VARIABLES === */
:root {
  --color-dark:       #ff2a2a;
  --color-mid:        #5a0000;
  --color-light-mid:  #1a0404;
  --color-light:      #0c0202;
  --color-border:     #5a0000;
  --color-table-row:  #150000;
  --border:           3px solid #5a0000;
  --font-body:        "LT Remark", "Times New Roman", serif;
  --font-heading:     "Redaction 10", "Times New Roman", serif;
  --font-mono:        "Courier New", monospace;
  --font-vcr:         "VCR OSD Mono", "Courier New", monospace;
  --filter-blood:     saturate(0.5) contrast(1.1) brightness(0.5) sepia(0.6) hue-rotate(-30deg);
  --filter-blood-h:   saturate(0.2) contrast(1.3) brightness(0.3) sepia(0.8) hue-rotate(-30deg);
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; }
html { background-color: #030000; }

/* === CURSORS === */
body { cursor: url("/assets/arrow.cur"), auto; }
a,
.photo-placeholder,
.photo-placeholder img,
#lightbox,
#lb-prev,
#lb-next {
  cursor: url("/assets/pointer.cur"), pointer;
}
body.default-cursor { cursor: auto; }
body.default-cursor a,
body.default-cursor .photo-placeholder,
body.default-cursor .photo-placeholder img,
body.default-cursor #lightbox,
body.default-cursor #lb-prev,
body.default-cursor #lb-next,
body.default-cursor #sidebar-font-btn,
body.default-cursor #mobile-disclaimer summary { cursor: pointer; }
body.default-cursor .gb-field input,
body.default-cursor .gb-field textarea { cursor: text; }

/* === CURSOR / FONT TOGGLE === */
#cursor-toggle-btn,
#font-toggle-btn {
  width: 36px;
  padding: 0;
  border: 2px outset #8a0000;
  background: #3a0000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 6px rgba(255, 40, 40, 0.5);
  cursor: url("/assets/pointer.cur"), pointer;
}
#cursor-toggle-btn { right: 6px; }
#font-toggle-btn   { right: 46px; }
#font-toggle-btn {
  font-family: "Geist", Arial, sans-serif;
  font-size: 1.1em;
  font-weight: bold;
  color: #ff6a6a;
  text-shadow: 0 0 4px #ff0000;
}
body.arial-mode #font-toggle-btn {
  font-family: var(--font-heading) !important;
}
#cursor-toggle-btn:hover,
#font-toggle-btn:hover {
  background: #5a0000;
  border-style: inset;
}
body.default-cursor #cursor-toggle-btn,
body.default-cursor #font-toggle-btn { cursor: pointer; }
#cursor-toggle-btn img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
  image-rendering: pixelated;
  filter: invert(1) hue-rotate(180deg) brightness(1.3);
  transform: none !important;
}

/* === ARIAL MODE === */
body.arial-mode *:not(.wave-letter) {
  font-family: "Geist", Arial, sans-serif !important;
}
body.arial-mode .font-blaster {
  font-weight: bold !important;
}

/* === BACKGROUND === */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: none;
  background: #030000;
}

/* === BODY === */
body {
  margin: 0;
  padding: 20px 12px;
  font-family: var(--font-body);
  color: var(--color-dark);
}

/* === WRAPPER === */
#wrapper {
  position: relative;
  width: 100%;
  max-width: 704px;
  margin: 0 auto;
  animation: attic-boot 2.2s ease-out;
}

/* === OVERLAYS === */
.attic-overlay-scan {
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 0, 0, 0.07) 0px,
    rgba(255, 0, 0, 0.07) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  z-index: 9998;
}
.attic-overlay-vignette {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(30, 0, 0, 0.9) 100%);
  pointer-events: none;
  z-index: 9997;
}

/* === HEADER === */
#header {
  background: #150000;
  border: var(--border);
  padding: 28px 10px;
  text-align: center;
  user-select: none;
}
#header h1 {
  margin: 14px 0 0;
  font-size: 2.4em;
  font-family: "Redaction 20", "Times New Roman", serif;
  color: #ff1a1a;
  text-shadow: 3px 3px #5a0000, 0 0 14px #ff0000, 2px 0 0 #ff00aa, -2px 0 0 #00aaff;
  letter-spacing: 4px;
  text-transform: uppercase;
  animation: attic-glitch 5s infinite steps(1);
}
@keyframes wave {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
.wave-letter {
  display: inline-block;
  animation: wave 2s ease-in-out infinite;
}
#header p.tagline {
  margin: 6px 0 0;
  color: #ff6a6a;
  font-size: 0.9em;
  font-style: italic;
  animation: attic-flicker 7s infinite;
}

/* === MARQUEE === */
@keyframes marquee-scroll {
  from { transform: translateX(100vw); }
  to   { transform: translateX(-100%); }
}
.marquee-bar {
  background: #3a0000;
  color: #ff3a3a;
  font-weight: bold;
  font-size: 0.85em;
  padding: 4px 0;
  overflow: hidden;
  border-left: var(--border);
  border-right: var(--border);
  user-select: none;
  text-shadow: 0 0 5px #ff0000;
}
.marquee-bar marquee {
  font-family: var(--font-vcr);
}
.marquee-inner {
  display: inline-block;
  white-space: nowrap;
  animation: marquee-scroll 20s linear infinite;
  animation-delay: -10s;
}

/* === DIVIDER === */
hr.fancy {
  border: none;
  border-top: var(--border);
  margin: 0;
}

/* === NAV === */
#nav {
  background: #150000;
  border-left: var(--border);
  border-right: var(--border);
  border-color: #5a0000;
  padding: 6px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  position: relative;
}
#nav a {
  text-decoration: line-through;
  font-family: var(--font-heading);
  font-weight: bold;
  font-size: 0.95em;
  padding: 6px 10px;
  border: 2px outset #3a0000;
  background: #1a0000;
  color: #7a1a1a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  text-shadow: 0 0 3px #5a0000;
  opacity: 0.55;
  cursor: url("/assets/pointer.cur"), pointer;
}
#nav a:hover {
  background: #4a0000;
  color: #ffffff;
  border-style: inset;
}
#nav a.active {
  border-style: inset;
  background: #2a0000;
  color: #ff4040;
}
/* Evil Photos / Home link: full brightness, no strikethrough */
#nav a.nav-evil-photos {
  background: #2a0000;
  color: #ff4040;
  border-color: #5a0000;
  text-shadow: 0 0 4px #ff0000;
  opacity: 1;
}
#nav a.nav-evil-photos,
#nav a.nav-evil-photos .nav-label::before,
#nav a.nav-evil-photos .nav-label::after {
  text-decoration: none;
}

/* Nav label: base + click-vanish + VHS glitch */
#nav a .nav-label {
  position: relative;
  display: inline-block;
  opacity: 1;
  transition: opacity 1.2s ease-in;
}
#nav a.nav-gone .nav-label {
  opacity: 0;
  transition: opacity 0.05s linear;
}
#nav a .nav-label::before,
#nav a .nav-label::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  pointer-events: none;
  opacity: 0;
  text-decoration: line-through;
}
#nav a:hover .nav-label {
  animation: attic-vhs-tear 0.8s step-end 1;
}
#nav a:hover .nav-label::before {
  color: #000000;
  background: #ffff00;
  text-shadow: none;
  animation: attic-scan-roll 0.8s step-end 1;
}
#nav a:hover .nav-label::after {
  color: #00ff66;
  text-shadow: 0 0 2px #00ff66, 0 0 5px #00aa33;
  animation: attic-phosphor 0.8s step-end 1;
}

/* === MAIN CONTENT AREA === */
#content {
  display: flex;
  border-top: var(--border);
}

#sidebar {
  width: 160px;
  flex-shrink: 0;
  background: #120202;
  border-left: var(--border);
  border-bottom: var(--border);
  border-color: #5a0000;
  padding: 10px;
}
#sidebar-toggle { display: none; }
#sidebar-back-upstairs { display: none; }
#sidebar h3 {
  margin: 0 0 8px;
  color: #ff2a2a;
  font-size: 0.85em;
  font-family: var(--font-heading);
  text-transform: uppercase;
  border-bottom: 1px dashed #5a0000;
  padding-bottom: 4px;
  text-shadow: 0 0 6px #ff0000;
}
#sidebar ul {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
#sidebar ul li::before {
  content: "> ";
  color: #8a0000;
}
#sidebar ul li {
  color: #ff4040;
  font-size: 0.78em;
  font-family: var(--font-vcr);
  line-height: 1.5;
}
#sidebar ul li a {
  color: var(--color-light);
  text-decoration: none;
  font-size: 0.85em;
}
#sidebar ul li a:hover {
  color: var(--color-light-mid);
  text-decoration: underline;
}

/* Visitor counter */
.hit-counter {
  margin: 0 0 16px;
  padding: 10px;
  border: 2px outset var(--color-light-mid);
  background: var(--color-light-mid);
  text-align: center;
  line-height: 1.4;
  user-select: none;
  cursor: url("/assets/pointer.cur"), pointer;
  touch-action: manipulation;
}
.hit-counter-label {
  margin: 0 0 1px;
  font-family: var(--font-body);
  font-weight: bold;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-dark);
}
.hit-counter-number {
  display: block;
  font-family: var(--font-vcr);
  font-size: 0.95em;
  color: var(--color-dark);
  letter-spacing: 2px;
}
/* Sidebar disclaimer */
.sidebar-disclaimer-details { margin-top: 16px; }
.sidebar-disclaimer-details summary {
  color: #ff5a5a;
  font-size: 0.85em;
  font-family: var(--font-heading);
  text-transform: uppercase;
  padding-bottom: 4px;
  margin-bottom: 6px;
  cursor: url("/assets/pointer.cur"), pointer;
  user-select: none;
  list-style: none;
}
.sidebar-disclaimer-details[open] > summary {
  border-bottom: 1px dashed var(--color-light-mid);
}
.sidebar-disclaimer-details[open] > summary::after,
.sidebar-disclaimer-fonts[open] > summary::after {
  content: " [-]";
  font-size: 0.85em;
  color: var(--color-light-mid);
}
.sidebar-disclaimer {
  font-size: 0.72em;
  color: #ff5a5a;
  line-height: 1.5;
  margin: 0 0 6px;
}
.sidebar-disclaimer a,
.sidebar-disclaimer a:visited,
.sidebar-disclaimer a:hover {
  color: #ff5a5a;
}
.sidebar-disclaimer-fonts > summary {
  cursor: url("/assets/pointer.cur"), pointer;
  user-select: none;
}

/* Evil visitor counter (custom) */
.attic-counter {
  margin: 0 0 16px;
  padding: 10px;
  border: 2px outset #4a0000;
  background: #1a0000;
  text-align: center;
  line-height: 1.4;
  box-shadow: inset 0 0 12px rgba(255, 0, 0, 0.3);
}
.attic-counter-label {
  margin: 0 0 1px;
  font-family: var(--font-body);
  font-weight: bold;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ff6a6a;
}
.attic-counter-number {
  display: block;
  font-family: var(--font-vcr);
  font-size: 0.95em;
  color: #ff1a1a;
  letter-spacing: 2px;
  text-shadow: 0 0 6px #ff0000, 0 0 2px #ffffff;
}

.attic-go-back {
  display: block;
  margin: 10px 0 16px;
  padding: 6px 10px;
  background: #2a0000;
  border: 2px outset #5a0000;
  color: #ff4040;
  font-family: var(--font-vcr);
  font-size: 0.85em;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 0 4px #ff0000;
  letter-spacing: 2px;
  cursor: url("/assets/pointer.cur"), pointer;
}
.attic-go-back:hover {
  background: #4a0000;
  border-style: inset;
  color: #ffffff;
}

/* Takeover phase list */
.attic-phase-list {
  list-style: none !important;
  padding: 0;
  margin: 0 0 16px;
}
.attic-phase-list li::before { content: "" !important; }
.attic-phase-list .done    { color: #33ff77; text-shadow: 0 0 4px #00ff55; }
.attic-phase-list .pending { color: #ffa020; text-shadow: 0 0 4px #ff8000; }
.attic-phase-list .spared  { color: #aaaaaa; text-decoration: line-through; }

.attic-countdown {
  font-family: var(--font-vcr);
  font-size: 1.5em;
  font-weight: bold;
  color: #ff1010;
  text-align: center;
  margin: 0 0 16px;
  padding: 6px;
  background: #000000;
  border: 1px inset #4a0000;
  text-shadow: 0 0 10px #ff0000;
  letter-spacing: 2px;
}

/* Main column */
#main-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-left: var(--border);
  border-right: var(--border);
  border-bottom: var(--border);
  background: #0a0202;
  border-color: #5a0000;
}
#main {
  flex: 1;
  min-width: 0;
  background: #0a0202;
  padding: 14px;
  border-left: var(--border);
  border-right: var(--border);
  border-bottom: var(--border);
  color: #ff3a3a;
  border-color: #5a0000;
}
#main-col > #main {
  border-top: var(--border);
  border-left: none;
  border-right: none;
  border-bottom: none;
}
#main h2 {
  font-size: 1.3em;
  font-family: var(--font-heading);
  text-transform: uppercase;
  border-bottom: 2px dashed #5a0000;
  padding-bottom: 4px;
  margin-top: 1.4em;
  margin-bottom: 0.5em;
  color: #ff1a1a;
  text-shadow: 0 0 8px #ff0000;
  letter-spacing: 1px;
}
#main h2:first-child { margin-top: 0; }
#main p, #main li {
  font-size: 0.9em;
  line-height: 1.6;
  color: #ff4a4a;
}
#main a { color: #ff6a6a; text-decoration: underline; }
#main a:hover { color: #ffffff; background: #3a0000; }
#main strong, #main b { color: #ff2020; text-shadow: 0 0 6px #ff0000; }

/* Fake holiday banner: THE RECKONING */
.attic-holiday-banner {
  background: linear-gradient(180deg, #2a0000, #1a0000);
  border: 2px solid #8a0000;
  padding: 18px 14px;
  margin: 0 0 18px;
  text-align: center;
  box-shadow: 0 0 24px rgba(255, 0, 0, 0.4), inset 0 0 20px rgba(255, 0, 0, 0.2);
}
.attic-holiday-intro {
  margin: 0;
  color: #ff6a6a;
  font-family: var(--font-vcr);
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 3px;
}
.attic-holiday-name {
  margin: 6px 0 4px;
  font-family: 'Blaster', sans-serif;
  font-size: 2.5em;
  color: #ff0000;
  text-shadow: 0 0 18px #ff0000, 3px 3px #3a0000;
  letter-spacing: 2px;
  animation: attic-glitch 4s infinite steps(1);
}
.attic-holiday-date {
  margin: 4px 0 0;
  color: #ff5050;
  font-family: var(--font-vcr);
  font-size: 0.75em;
}

/* Guestbook entries */
.gb-entry {
  background: #1a0202;
  border: 2px solid #5a0000;
  box-shadow: 0 0 12px rgba(255, 0, 0, 0.2);
}
.gb-entry-header {
  background: #3a0000;
  color: #ff6a6a;
  border-bottom: 1px solid #5a0000;
  padding: 4px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85em;
}
.gb-entry-name { color: #ff1a1a; text-shadow: 0 0 6px #ff0000; font-weight: bold; }
.gb-entry-date, .gb-entry-num { color: #ff8a8a; }
#main .gb-entry-message {
  color: #ff4a4a;
  font-family: var(--font-vcr);
  font-size: 0.9em;
  padding: 8px;
  margin: 0;
  white-space: pre-wrap;
}

/* Tables */
.content-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85em;
  margin-top: 12px;
  border-color: #5a0000;
  background: #150000;
  color: #ff4040;
}
.content-table th {
  background: #3a0000;
  color: #ff1a1a;
  padding: 5px 8px;
  text-align: left;
  border: 1px solid #3a0000;
  text-shadow: 0 0 6px #ff0000;
}
.content-table td {
  background: #0e0000;
  color: #ff4a4a;
  padding: 5px 8px;
  border: 1px solid #3a0000;
}
.content-table tr:nth-child(even) td { background: #180000; }
.fav-table { table-layout: fixed; font-size: 0.95em; }
.fav-table td { vertical-align: top; }
.entry-gt { font-size: 1.15em; }
.table-scroll { overflow-x: auto; }

/* Older updates */
.older-updates { margin-top: 0; }
.older-updates > summary {
  cursor: url("/assets/pointer.cur"), pointer;
  font-size: 0.85em;
  color: #ff5050;
  user-select: none;
  padding: 4px 8px;
  background: #150000;
  border: 1px solid #5a0000;
  border-top: none;
  display: block;
}
.older-updates > summary:hover { color: #ffffff; }
.older-updates .table-scroll { margin-top: 0; }
.older-updates .content-table { margin-top: 0; border-top: none; }
.older-updates .content-table td { border-top: none; }

/* Photo grid (attic main page) */
.attic-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 10px 0 18px;
}
.attic-photo-grid .photo-item {
  position: relative;
  border: 2px solid #5a0000;
  padding: 4px;
  background: #1a0000;
  overflow: hidden;
}
.attic-photo-grid .photo-item img {
  display: block;
  width: 100%;
  height: auto;
  filter: var(--filter-blood);
  transition: filter 0.4s;
}
.attic-photo-grid .photo-item:hover img {
  filter: var(--filter-blood-h);
}
.attic-photo-grid .photo-item::after {
  content: "[MARKED]";
  position: absolute;
  top: 6px; left: 6px;
  background: rgba(90, 0, 0, 0.85);
  color: #ff3030;
  padding: 2px 6px;
  font-family: var(--font-vcr);
  font-size: 0.65em;
  text-shadow: 0 0 4px #ff0000;
  letter-spacing: 1px;
  border: 1px solid #ff0000;
}
.attic-photo-caption {
  color: #ff6a6a;
  font-family: var(--font-vcr);
  font-size: 0.72em;
  text-align: center;
  margin: 4px 0 0;
}

/* Photo grid (photos page) */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.photo-item {
  text-align: center;
  border: var(--border);
  padding: 4px;
  background: var(--color-light);
  min-width: 0;
  overflow: hidden;
}
.photo-pair { display: contents; }
.photo-placeholder {
  position: relative;
  background: var(--color-light-mid);
  border: none;
  color: var(--color-dark);
  font-size: 0.8em;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.photo-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: var(--filter-blood);
  transition: filter 0.4s;
}
.photo-placeholder:hover img {
  filter: var(--filter-blood-h);
}
.photo-hover-full {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: clip-path 0.07s linear;
  pointer-events: none;
}
.photo-caption {
  margin: 4px 0 0;
  font-size: 0.75em;
  color: #ff6a6a;
  font-family: var(--font-vcr);
  font-style: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Album headings + view toggle */
.album-heading {
  cursor: url("/assets/pointer.cur"), pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.album-heading::after { content: none; }
.album-name::after { content: " V"; font-size: 0.75em; color: var(--color-mid); }
.album-heading.collapsed .album-name::after { content: " >"; }
#main > .view-btn {
  display: block;
  width: calc(50% - 2.5px);
  background: #1a0000;
  border: var(--border);
  color: #ff4040;
  font-family: var(--font-mono);
  font-size: 0.72em;
  font-weight: normal;
  padding: 4px 12px;
  cursor: url("/assets/pointer.cur"), pointer;
  margin-bottom: 14px;
}
#main > .view-btn:hover {
  background: #3a0000;
  color: #ffffff;
}

/* View modes */
.photo-grid.view-large {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.photo-grid.view-large .photo-pair {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.photo-grid.view-large .photo-item {
  flex: var(--photo-ar, 1.333) 1 0;
  box-sizing: content-box;
  min-width: 0;
  width: auto;
  overflow: hidden;
}
.photo-grid.view-large .photo-item:only-child {
  flex: 0 0 calc(50% - 5px);
  max-width: calc(50% - 5px);
}
.photo-grid.view-large .photo-placeholder {
  aspect-ratio: var(--photo-ar, 1.333);
  font-size: 0;
  line-height: 0;
}
.photo-grid.view-large .photo-placeholder img:not(.photo-hover-full) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#album-shortcuts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-bottom: 5px;
}
#album-shortcuts a {
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.72em;
  padding: 3px 8px;
  border: var(--border);
  background: var(--color-bg);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#album-shortcuts a.featured-shortcut {
  border-color: #ff4040;
}
#album-shortcuts a:hover {
  background: #3a0000;
  color: #ffffff;
}

.view-denser-active .album-heading:not(.denser-primary) { display: none !important; }
.view-denser-active .album-heading.denser-primary .album-name::after,
.view-denser-active .album-heading.denser-primary::after { display: none; }
.photo-grid.view-dense {
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 0;
}
.photo-grid.view-dense .photo-item { border: none; padding: 0; background: none; }
.photo-grid.view-dense .photo-caption { display: none; }
.view-denser-active {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}
.view-denser-active .album-heading { grid-column: 1 / -1; }
.photo-grid.view-denser { display: contents; }
.photo-grid.view-denser .photo-item { border: none; padding: 0; background: none; font-size: 0; line-height: 0; }
.photo-grid.view-denser .photo-caption { display: none; }
#photos-container { overflow-anchor: none; }

/* === FIXED BUTTONS (view-cycle + scroll-to-top) === */
#view-cycle-btn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: max(16px, calc(50% - 352px - 370px));
  z-index: 1000;
  background: #1a0000;
  color: #ff4040;
  border: 2px solid #ff4040;
  font-family: var(--font-heading);
  font-size: 1em;
  padding: 10px 14px;
  cursor: pointer;
  box-shadow: 3px 3px 0 #5a0000;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  max-width: 3em;
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px;
}
.grid-icon {
  display: inline-block;
  width: 16px; height: 16px;
  position: relative;
  flex-shrink: 0;
}
.grid-icon::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 4px; height: 4px;
  background: #ff4040;
  box-shadow:
    6px 0 0 #ff4040, 12px 0 0 #ff4040,
    0 6px 0 #ff4040, 6px 6px 0 #ff4040, 12px 6px 0 #ff4040,
    0 12px 0 #ff4040, 6px 12px 0 #ff4040, 12px 12px 0 #ff4040;
}
#view-cycle-btn.visible { display: flex; }
#view-cycle-btn.show-label { max-width: 14em; }
#view-cycle-label { display: none; font-size: 0.8em; }
#view-cycle-btn.show-label #view-cycle-label { display: inline; }

#scroll-top-btn {
  display: none;
  position: fixed;
  bottom: 72px;
  right: max(16px, calc(50% - 352px - 370px));
  z-index: 1000;
  background: #1a0000;
  color: #ff4040;
  border: 2px solid #ff4040;
  font-family: var(--font-heading);
  font-size: 1em;
  padding: 10px 14px;
  cursor: pointer;
  box-shadow: 3px 3px 0 #5a0000;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  max-width: 3em;
  flex-direction: row-reverse;
  align-items: center;
  gap: 8px;
}
#scroll-top-btn.visible { display: flex; }
#scroll-top-btn.show-label { max-width: 14em; }
#scroll-top-label { display: none; font-size: 0.8em; }
#scroll-top-btn.show-label #scroll-top-label { display: inline; }
@media (min-aspect-ratio: 17/9) {
  #view-cycle-btn { right: max(16px, calc(50% - 352px - 60px)); }
  #scroll-top-btn { right: max(16px, calc(50% - 352px - 60px)); }
}

/* Border flash (for deep-link scroll) */
@keyframes border-flash {
  0%   { border-color: var(--color-border); }
  50%  { border-color: #ff0000; }
  100% { border-color: var(--color-border); }
}
@keyframes border-flash-thumb {
  0%   { opacity: 1; }
  50%  { opacity: 0.4; }
  100% { opacity: 1; }
}
.border-flash { animation: border-flash 1.5s ease-in-out 0.2s; }
.border-flash .photo-placeholder { animation: border-flash-thumb 1.5s ease-in-out 0.2s; }

/* Lightbox (photos page, built by buildLightboxDOM) */
#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8, 0, 0, 0.92);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-bottom: 5vh;
}
#lightbox.open { display: flex; }
#lb-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: url("/assets/arrow.cur"), auto;
}
#lightbox-wrap {
  position: relative;
  cursor: url("/assets/arrow.cur"), auto;
  box-shadow: 0 0 0 3px #5a0000, 0 0 60px rgba(255, 0, 0, 0.45);
}
#lb-thumb {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  filter: var(--filter-blood);
}
#lb-full {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0;
  cursor: url("/assets/pointer.cur"), pointer;
  transition: opacity 0.5s ease, clip-path 0.07s linear;
  filter: var(--filter-blood);
}
#lb-prev,
#lb-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  height: 30vh;
  display: flex;
  align-items: center;
  padding: 0 40px;
  color: #ff3030;
  font-size: 2em;
  font-family: var(--font-mono);
  user-select: none;
  z-index: 1001;
  text-shadow: 0 0 8px #ff0000;
}
#lb-prev { left: 0; }
#lb-next { right: 0; }
#lb-prev:hover,
#lb-next:hover { color: #ffffff; }
#lb-caption {
  color: #ff5050;
  font-size: 0.85em;
  font-family: var(--font-vcr);
  text-align: center;
  user-select: none;
  padding: 0 95px;
  box-sizing: border-box;
  text-shadow: 0 0 4px #ff0000;
}
#lb-meta {
  color: #aa2020;
  font-size: 0.75em;
  font-family: var(--font-vcr);
  text-align: center;
  user-select: none;
  padding: 0 95px;
  box-sizing: border-box;
}
#lb-meta a { color: #ff5050; text-decoration: underline; }

/* Lightbox share button */
#lb-share-wrap {
  position: absolute;
  top: 100%;
  right: -3px;
  margin-top: 8px;
}
#lb-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #1a0000;
  border: var(--border);
  padding: 4px 12px;
  font-family: var(--font-mono);
  font-size: 0.85em;
  line-height: 1;
  color: #ff4040;
  cursor: url("/assets/pointer.cur"), pointer;
  transition: background 0.1s, color 0.1s;
}
#lb-share-btn:hover { background: #3a0000; color: #ffffff; }
#lb-share-btn .gb-share-icon { width: 1em; height: 1em; }
.lb-share-label { user-select: none; }
#lb-share-menu {
  right: 0;
  bottom: 100%;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 0.85em;
}
body.default-cursor #lb-share-btn { cursor: pointer; }
.gb-share-wrap { position: relative; }
.gb-share-menu {
  display: none;
  position: absolute;
  bottom: 100%;
  right: 4px;
  background: #1a0000;
  border: var(--border);
  box-shadow: 4px 4px 0 var(--color-mid);
  z-index: 100;
  white-space: nowrap;
  font-family: "Redaction", "Times New Roman", serif;
}
.gb-share-wrap.gb-share-open .gb-share-menu { display: block; }
.gb-share-menu-item {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 5px 12px;
  font-family: inherit;
  font-size: 0.92em;
  color: #ff4040;
  text-align: left;
  cursor: url("/assets/pointer.cur"), pointer;
}
.gb-share-menu-item:hover { background: #3a0000; color: #ffffff; }
body.default-cursor .gb-share-menu-item { cursor: pointer; }
.gb-share-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  background-color: currentColor;
  -webkit-mask: url("/assets/share.svg") no-repeat center / contain;
          mask: url("/assets/share.svg") no-repeat center / contain;
}

/* Attic lightbox (main page) */
.attic-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8, 0, 0, 0.94);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-bottom: 5vh;
  animation: attic-lb-in 0.2s ease-out;
}
.attic-lightbox.open { display: flex; }
#ctx-menu { z-index: 10002; }
.attic-lb-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.attic-lb-wrap {
  position: relative;
  box-shadow: 0 0 0 3px #5a0000, 0 0 60px rgba(255, 0, 0, 0.45);
  max-width: 92vw;
  max-height: 70vh;
}
.attic-lb-wrap img {
  display: block;
  max-width: 92vw;
  max-height: 70vh;
  filter: saturate(0.5) contrast(1.15) brightness(0.6) sepia(0.6) hue-rotate(-30deg);
}
.attic-lb-wrap::after {
  content: "[MARKED FOR SUBSTITUTION]";
  position: absolute;
  top: 8px; left: 8px;
  background: rgba(90, 0, 0, 0.92);
  color: #ff3030;
  padding: 3px 8px;
  font-family: var(--font-vcr);
  font-size: 0.7em;
  letter-spacing: 1px;
  text-shadow: 0 0 4px #ff0000;
  border: 1px solid #ff0000;
}
.attic-lb-caption {
  color: #ff5050;
  font-size: 0.9em;
  font-family: var(--font-vcr);
  text-align: center;
  padding: 0 95px;
  max-width: 92vw;
  box-sizing: border-box;
  text-shadow: 0 0 4px #ff0000;
}
.attic-lb-meta {
  color: #aa2020;
  font-size: 0.75em;
  font-family: var(--font-vcr);
  text-align: center;
  padding: 0 95px;
  max-width: 92vw;
  box-sizing: border-box;
}
.attic-lb-prev,
.attic-lb-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  height: 30vh;
  display: flex;
  align-items: center;
  padding: 0 40px;
  color: #ff3030;
  font-size: 2em;
  font-family: var(--font-vcr);
  text-shadow: 0 0 8px #ff0000;
  user-select: none;
  cursor: url("/assets/pointer.cur"), pointer;
  z-index: 10000;
}
.attic-lb-prev { left: 0; }
.attic-lb-next { right: 0; }
.attic-lb-prev:hover,
.attic-lb-next:hover { color: #ffffff; }
@keyframes attic-lb-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Collapsible plan stages */
.attic-stage {
  margin: 0 0 8px;
  border: 1px solid #5a0000;
  background: #120000;
  padding: 0;
}
.attic-stage > summary {
  cursor: url("/assets/pointer.cur"), pointer;
  list-style: none;
  padding: 8px 12px;
  color: #ff4a4a;
  font-family: var(--font-vcr);
  font-size: 0.92em;
}
.attic-stage > summary::-webkit-details-marker { display: none; }
.attic-stage > summary::before { content: "[+] "; color: #ff2020; text-shadow: 0 0 4px #ff0000; }
.attic-stage[open] > summary::before { content: "[-] "; }
.attic-stage > summary:hover { background: #2a0000; color: #ffffff; }
.attic-stage > p {
  margin: 0;
  padding: 4px 14px 14px 14px;
  border-top: 1px dashed #5a0000;
}

/* Fake terminal */
.attic-shell {
  background: #000000;
  border: 1px solid #5a0000;
  padding: 12px 14px;
  font-family: var(--font-vcr);
  font-size: 0.82em;
  line-height: 1.5;
  color: #ff3a3a;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-shadow: 0 0 3px rgba(255, 0, 0, 0.5);
  box-shadow: inset 0 0 18px rgba(255, 0, 0, 0.18);
  margin: 0 0 18px;
}
.attic-shell .sh-prompt  { color: #33ff77; }
.attic-shell .sh-comment { color: #aa0000; font-style: italic; }
.attic-shell .sh-warn    { color: #ffa020; }
.attic-shell .sh-ok      { color: #33ff77; }

/* Sign off */
.attic-signoff {
  font-family: var(--font-vcr);
  font-size: 0.88em;
  text-align: center;
  color: #ff5050;
  margin: 24px 0 16px;
  line-height: 1.6;
}
.attic-signoff a { color: #ff7070; }

/* Footer banner */
.footer-banner {
  display: block;
  width: 60%;
  margin: 0 auto 10px;
  opacity: 0.99;
  filter: sepia(1) saturate(8) hue-rotate(-40deg) brightness(0.6) contrast(1.2);
  mix-blend-mode: screen;
}
.footer-banner-top {
  width: 100%;
  margin: 0 0 7px 0;
  border: none;
}

/* Under construction */
.under-construction {
  text-align: center;
  padding: 10px;
  background: #2a0000 !important;
  color: #ff1010 !important;
  border: 2px solid #ff1010 !important;
  margin-top: 14px;
  font-size: 0.8em;
  text-shadow: 0 0 8px #ff0000;
  font-family: var(--font-vcr);
}

/* Footer */
#footer {
  background: #120000;
  border: var(--border);
  border-top: none;
  border-color: #5a0000;
  padding: 10px;
  text-align: center;
  font-size: 0.92em;
  color: var(--color-light-mid);
}
#footer p {
  color: #6a0000;
  text-align: center;
  font-family: var(--font-vcr);
}
#footer a {
  color: var(--color-light);
  display: inline-block;
  margin-top: 6px;
}

/* Blinking cursor */
.attic-cursor {
  display: inline-block;
  color: #ff3a3a;
  animation: attic-blink 1s steps(1) infinite;
  text-shadow: 0 0 6px #ff0000;
}

#sidebar-font-btn { display: none; }

/* === TOAST === */
#toast {
  position: absolute;
  background: #3a0000;
  color: #ff4040;
  padding: 7px 18px;
  border: 2px outset #5a0000;
  font-size: 0.85em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.15s ease;
}
#toast.toast-visible { opacity: 1; }

/* === CUSTOM CONTEXT MENU === */
#ctx-menu {
  position: fixed;
  z-index: 10002;
  background: #1a0000;
  border: var(--border);
  min-width: 195px;
  box-shadow: 4px 4px 0 #3a0000;
  display: none;
  font-family: "Redaction", "Times New Roman", serif;
  font-size: 0.88em;
  user-select: none;
}
#ctx-menu.ctx-open { display: block; }
#ctx-title {
  background: #3a0000;
  padding: 3px 8px 4px;
  font-family: var(--font-vcr);
  font-size: 0.75em;
  letter-spacing: 1px;
  text-transform: uppercase;
}
#ctx-title span {
  animation: ctx-char 2.8s steps(1) infinite;
}
@keyframes ctx-char {
  0%     { color: #ff2020; }
  14%    { color: #ff6a6a; }
  28%    { color: #ff0000; }
  42%    { color: #aa0000; }
  57%    { color: #ff4040; }
  71%    { color: #ff1a1a; }
  85%    { color: #ff5050; }
  100%   { color: #ff2020; }
}
#ctx-menu ul {
  list-style: none;
  margin: 0;
  padding: 3px 0;
}
#ctx-menu li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 4px 10px;
  cursor: url("/assets/pointer.cur"), pointer;
  color: #ff4040;
}
#ctx-menu li:hover { background: #3a0000; color: #ffffff; }
#ctx-menu li:hover .ctx-shortcut { color: #ff8a8a; }
.ctx-shortcut {
  font-family: var(--font-vcr);
  font-size: 0.72em;
  color: #5a0000;
  white-space: nowrap;
}
.ctx-sep {
  border: none;
  border-top: 1px dashed #5a0000;
  margin: 3px 8px;
  padding: 0 !important;
  cursor: default !important;
}
.ctx-sep:hover { background: none !important; color: inherit !important; }
#ctx-btn-desc {
  padding: 4px 10px 5px;
  font-family: "Redaction", "Times New Roman", serif;
  font-size: 0.82em;
  color: #5a0000;
  font-style: italic;
  cursor: default;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#ctx-link-preview {
  padding: 3px 10px 5px;
  font-family: var(--font-vcr);
  font-size: 0.68em;
  color: #5a0000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
  cursor: default;
}
.ctx-item-disabled { opacity: 0.38; cursor: default !important; pointer-events: none; }
body.default-cursor #ctx-menu li { cursor: pointer; }

/* === EXTERNAL LINK POPUP === */
#ext-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#ext-dialog {
  background: #1a0000;
  border: 3px outset #5a0000;
  width: min(340px, 90vw);
  font-family: var(--font-body);
  color: #ff4040;
  box-shadow: 4px 4px 0 #3a0000;
}
#ext-dialog-title {
  background: #3a0000;
  color: #ff1a1a;
  font-family: var(--font-heading);
  font-size: 0.85em;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 5px 10px;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}
#ext-dialog-body {
  padding: 14px 16px 10px;
  text-align: center;
}
#ext-dialog-body p {
  margin: 0 0 8px;
  font-size: 0.9em;
  line-height: 1.4;
}
#ext-dialog-url {
  display: block;
  word-break: break-all;
  font-family: "Roboto Mono", var(--font-mono);
  font-size: 0.78em;
  background: #0a0000;
  border: 1px inset #5a0000;
  padding: 5px 8px;
  margin-bottom: 12px;
  color: #ff6a6a;
}
#ext-dialog-btns {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 0 16px 14px;
}
#ext-dialog-btns button {
  font-family: var(--font-heading);
  font-size: 0.9em;
  font-weight: bold;
  padding: 5px 16px;
  border: 2px outset #5a0000;
  background: #2a0000;
  color: #ff4040;
  cursor: url("/assets/pointer.cur"), pointer;
  min-width: 70px;
}
#ext-dialog-btns button:hover { border-style: inset; background: #3a0000; color: #ffffff; }
body.default-cursor #ext-dialog-btns button { cursor: pointer; }

/* === KEYFRAME ANIMATIONS === */
@keyframes attic-glitch {
  0%, 85%, 100% { transform: translate(0, 0); }
  86% { transform: translate(-2px, 1px); text-shadow: 0 0 12px #ff0000, -3px 0 0 #ff00aa, 3px 0 0 #00aaff; }
  88% { transform: translate(2px, -1px); }
  90% { transform: translate(-1px, 0); text-shadow: 0 0 22px #ff0000, 4px 0 0 #ff00aa, -4px 0 0 #00aaff; }
  92% { transform: translate(0, 1px); }
}
@keyframes attic-flicker {
  0%, 44%, 48%, 60%, 63%, 100% { opacity: 1; }
  45%, 47% { opacity: 0.2; }
  46%      { opacity: 0.7; }
  61%      { opacity: 0.4; }
  62%      { opacity: 0.9; }
}
@keyframes attic-blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}
@keyframes attic-boot {
  0%, 15%  { opacity: 0; }
  18%      { opacity: 0.3; }
  22%, 30% { opacity: 0; }
  34%      { opacity: 0.6; }
  38%, 42% { opacity: 0; }
  55%      { opacity: 1; }
  58%      { opacity: 0.5; }
  62%      { opacity: 1; }
  100%     { opacity: 1; }
}
@keyframes attic-vhs-tear {
  0%   { transform: skewX(0deg) translate(0, 0); filter: none; }
  12%  { transform: skewX(-18deg) translate(-5px, 0); filter: invert(1); }
  24%  { transform: skewX(14deg) translate(6px, 1px); filter: none; }
  36%  { transform: skewX(-8deg) translate(-4px, -2px); filter: invert(1); }
  48%  { transform: skewX(20deg) translate(5px, 0); filter: none; }
  60%  { transform: skewX(-10deg) translate(-6px, 2px); filter: invert(1); }
  72%  { transform: skewX(6deg) translate(3px, -1px); filter: none; }
  84%  { transform: skewX(-4deg) translate(-2px, 0); filter: none; }
  100% { transform: skewX(0deg) translate(0, 0); filter: none; }
}
@keyframes attic-scan-roll {
  0%   { opacity: 0; clip-path: inset(-10% 0 100% 0); }
  12%  { opacity: 1; clip-path: inset(0 0 85% 0); }
  24%  { opacity: 1; clip-path: inset(15% 0 70% 0); }
  36%  { opacity: 1; clip-path: inset(30% 0 55% 0); }
  48%  { opacity: 1; clip-path: inset(45% 0 40% 0); }
  60%  { opacity: 1; clip-path: inset(60% 0 25% 0); }
  72%  { opacity: 1; clip-path: inset(75% 0 10% 0); }
  84%  { opacity: 1; clip-path: inset(90% 0 0 0); }
  100% { opacity: 0; clip-path: inset(100% 0 -10% 0); }
}
@keyframes attic-phosphor {
  0%   { opacity: 0; transform: translate(0, 0); }
  12%  { opacity: 0.95; transform: translate(6px, 0); }
  24%  { opacity: 0; transform: translate(0, 0); }
  36%  { opacity: 0.9; transform: translate(-5px, 0); }
  48%  { opacity: 0.2; transform: translate(2px, 0); }
  60%  { opacity: 1; transform: translate(7px, 0); }
  72%  { opacity: 0; transform: translate(0, 0); }
  84%  { opacity: 0.6; transform: translate(-3px, 0); }
  100% { opacity: 0; transform: translate(0, 0); }
}

/* === RESPONSIVE === */
@media (max-width: 600px) {
  body { padding: 6px; }
  #wrapper { max-width: 100%; border: none; }
  #header { padding: 18px 8px; }
  #header h1 { font-size: 9vw; letter-spacing: 2px; }
  .h1-line2 { display: block; }
  @keyframes wave {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
  }
  #nav { flex-wrap: nowrap; align-items: stretch; }
  #nav a {
    font-size: clamp(8px, 3.2vw, 0.72em);
    padding: 8px 2px;
    min-height: unset;
    flex: 1;
    justify-content: center;
  }
  #content { flex-direction: column; }
  #sidebar {
    width: 100%;
    border-right: var(--border);
    border-bottom: none;
  }
  #sidebar-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px;
    margin: -10px;
  }
  #sidebar-toggle-row-right {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  #sidebar-toggle {
    display: block;
    color: #ff4040;
    text-shadow: 0 0 4px #ff0000;
    font-size: 0.85em;
    font-family: var(--font-heading);
    font-weight: bold;
    text-transform: uppercase;
    padding: 6px 2px;
    cursor: url("/assets/pointer.cur"), pointer;
    user-select: none;
  }
  #sidebar-back-upstairs {
    display: inline-block;
    padding: 6px 10px;
    background: #2a0000;
    border: 2px outset #5a0000;
    color: #ff4040;
    font-family: var(--font-vcr);
    font-size: 0.75em;
    text-decoration: none;
    text-shadow: 0 0 4px #ff0000;
    letter-spacing: 1px;
    cursor: url("/assets/pointer.cur"), pointer;
    user-select: none;
    touch-action: manipulation;
  }
  #sidebar-back-upstairs:hover {
    background: #4a0000;
    border-style: inset;
    color: #ffffff;
  }
  #sidebar-font-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-height: 36px;
    padding: 0;
    border: 2px outset #5a0000;
    background: #2a0000;
    color: #ff4040;
    font-family: "Geist", Arial, sans-serif;
    font-size: 1.1em;
    font-weight: bold;
    cursor: url("/assets/pointer.cur"), pointer;
    user-select: none;
    touch-action: manipulation;
  }
  #sidebar-font-btn:hover { border-style: inset; background: #3a0000; }
  body.arial-mode #sidebar-font-btn { font-family: var(--font-heading) !important; }
  #sidebar .hit-counter { margin-top: 16px; margin-right: -4px; display: flex; align-items: baseline; justify-content: center; gap: 8px; }
  #sidebar .hit-counter .hit-counter-label { margin: 0; }
  #sidebar .hit-counter .hit-counter-label::after { content: ":"; }
  #sidebar .hit-counter .hit-counter-number { position: relative; top: 1px; }
  #sidebar.sidebar-collapsed > *:not(#sidebar-toggle-row) { display: none; }
  #sidebar.sidebar-collapsed #sidebar-font-btn { display: none; }
  #main { border-top: none; }
  #main-col { border: var(--border); }
  #main h2 { font-size: 1.1em; }
  #footer {
    font-size: 0.75em;
    border-bottom: var(--border);
  }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .photo-grid.view-dense { grid-template-columns: repeat(3, 1fr); }
  .view-denser-active { grid-template-columns: repeat(4, 1fr); }
  .attic-photo-grid { grid-template-columns: repeat(2, 1fr); }
  .attic-holiday-name { font-size: 1.8em; }
  .footer-banner { width: 100%; margin: 0; }
  #lb-prev, #lb-next { font-size: 1.4em; padding: 0 12px; }
  #lightbox-wrap { margin-top: 34px; }
  #lb-share-wrap { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 8px; }
  #lb-share-menu { bottom: 0; top: auto; right: 100%; margin-bottom: 0; margin-right: 4px; }
  #lb-caption, #lb-meta { padding: 0; }
  #main, #main-col { border-bottom: none; }
  #cursor-toggle-btn, #font-toggle-btn { display: none; }
  #ctx-menu { font-size: 1.05em; min-width: 220px; }
  #ctx-menu li { padding: 10px 14px; }
  #ctx-btn-desc { padding: 8px 14px; }
  #ctx-link-preview { padding: 6px 14px; }
  .gb-share-menu-item { padding: 12px 12px; font-size: 0.95em; }
  .gb-share-menu-item + .gb-share-menu-item { border-top: 1px dashed #5a0000; }
  /* Hide "Evil " prefix on narrow screens */
  .hide-narrow { display: none; }
  #nav a.nav-evil-photos .nav-label::before,
  #nav a.nav-evil-photos .nav-label::after { content: "Photos"; }
}

@media (prefers-reduced-motion: reduce) {
  #header h1,
  #header .tagline,
  .attic-holiday-name,
  #wrapper,
  .attic-cursor {
    animation: none !important;
  }
}