@font-face {
  font-family: 'Outfit';
  src: url('fonts/Outfit-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  src: url('fonts/Nunito-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}


:root {
  /* shape */
  --border-radius: 4px;
  --border-width: 2px;
  /* fonts */
  --font-size-base: 1rem;
  --font-size-small: 0.875rem;
  --font-size-large: 1.25rem;
  --font-size-tiny: 0.50rem;

  /* Default palette (Wolf Lichen) - Light */
  --bg: #F5F7F0;
  --fg: #2D3A2E;
  --fg-soft: #A8B5A9;
  --accent: #9ACD32;
  --accent-hover: #7CB342;
  --highlight: #CDDC39;

  /* Derived colors */
  --link: var(--accent);
  --link-hover: var(--accent-hover);
  --post: var(--bg);
  --post-border: var(--fg-soft);
  --post-hover: var(--fg);
  --post-border-hover: var(--bg);
  --tag-off: var(--bg);
  --tag-hover: var(--accent-hover);
  --tag-on: var(--accent);
  --tag-op-off: var(--bg);
  --tag-op-hover: var(--accent-hover);
  --tag-op-on: var(--accent-hover);
  --quote: var(--accent-hover);
  --quote-border: var(--accent);
  --img-background: var(--fg);
  --fixed: var(--highlight);
}

/* ===========================================
   PALETTE 1: Vintage Newsprint (Default)
   =========================================== */

/* Light mode */
[data-palette="vintage"] {
  --bg: #F5F1E8;
  --fg: #2C2825;
  --fg-soft: #9A9488;
  --accent: #8B4D3B;
  --accent-hover: #5B7A6A;
  --highlight: #C9A85C;
}

/* Dark mode */
[data-theme="dark"][data-palette="vintage"] {
  --bg: #1A1815;
  --fg: #E8E4DB;
  --fg-soft: #6B6560;
  --accent: #C4785F;
  --accent-hover: #7A9A8A;
  --highlight: #D4B86A;
}

@media (prefers-color-scheme: dark) {
  [data-theme="system"][data-palette="vintage"] {
    --bg: #1A1815;
    --fg: #E8E4DB;
    --fg-soft: #6B6560;
    --accent: #C4785F;
    --accent-hover: #7A9A8A;
    --highlight: #D4B86A;
  }
}

/* ===========================================
   PALETTE 2: Rural Earth
   =========================================== */

/* Light mode */
[data-palette="earth"] {
  --bg: #FAF8F5;
  --fg: #3D3835;
  --fg-soft: #A8A29A;
  --accent: #6B7F5A;
  --accent-hover: #8E6B4A;
  --highlight: #B59B6D;
}

/* Dark mode */
[data-theme="dark"][data-palette="earth"] {
  --bg: #1E1C1A;
  --fg: #F0EDE8;
  --fg-soft: #706B65;
  --accent: #8FA07A;
  --accent-hover: #A88866;
  --highlight: #C5AB7D;
}

@media (prefers-color-scheme: dark) {
  [data-theme="system"][data-palette="earth"] {
    --bg: #1E1C1A;
    --fg: #F0EDE8;
    --fg-soft: #706B65;
    --accent: #8FA07A;
    --accent-hover: #A88866;
    --highlight: #C5AB7D;
  }
}

/* ===========================================
   PALETTE 3: Quiet Editorial
   =========================================== */

/* Light mode */
[data-palette="editorial"] {
  --bg: #F7F6F3;
  --fg: #33322E;
  --fg-soft: #A5A49F;
  --accent: #7D6B5D;
  --accent-hover: #5C6B6A;
  --highlight: #A69176;
}

/* Dark mode */
[data-theme="dark"][data-palette="editorial"] {
  --bg: #1D1D1B;
  --fg: #E5E4E0;
  --fg-soft: #6A6965;
  --accent: #9A8A7C;
  --accent-hover: #7C8B8A;
  --highlight: #B6A186;
}

@media (prefers-color-scheme: dark) {
  [data-theme="system"][data-palette="editorial"] {
    --bg: #1D1D1B;
    --fg: #E5E4E0;
    --fg-soft: #6A6965;
    --accent: #9A8A7C;
    --accent-hover: #7C8B8A;
    --highlight: #B6A186;
  }
}

/* ===========================================
   PALETTE 4: Sunburst (Xanthoria parietina)
   =========================================== */

/* Light mode */
[data-palette="sunburst"] {
  --bg: #FDF6E3;
  --fg: #4A4035;
  --fg-soft: #B5A898;
  --accent: #E67E22;
  --accent-hover: #D4A84B;
  --highlight: #C0392B;
}

/* Dark mode */
[data-theme="dark"][data-palette="sunburst"] {
  --bg: #1A1612;
  --fg: #F5E6C8;
  --fg-soft: #7A6B58;
  --accent: #F39C12;
  --accent-hover: #E8C468;
  --highlight: #E74C3C;
}

@media (prefers-color-scheme: dark) {
  [data-theme="system"][data-palette="sunburst"] {
    --bg: #1A1612;
    --fg: #F5E6C8;
    --fg-soft: #7A6B58;
    --accent: #F39C12;
    --accent-hover: #E8C468;
    --highlight: #E74C3C;
  }
}

/* ===========================================
   PALETTE 5: Wolf Lichen (Letharia vulpina)
   =========================================== */

/* Light mode */
[data-palette="wolf"] {
  --bg: #F5F7F0;
  --fg: #2D3A2E;
  --fg-soft: #A8B5A9;
  --accent: #9ACD32;
  --accent-hover: #7CB342;
  --highlight: #CDDC39;
}

/* Dark mode */
[data-theme="dark"][data-palette="wolf"] {
  --bg: #1A1F1A;
  --fg: #E8F0E0;
  --fg-soft: #5A6B5A;
  --accent: #B8E039;
  --accent-hover: #8BC34A;
  --highlight: #DCE775;
}

@media (prefers-color-scheme: dark) {
  [data-theme="system"][data-palette="wolf"] {
    --bg: #1A1F1A;
    --fg: #E8F0E0;
    --fg-soft: #5A6B5A;
    --accent: #B8E039;
    --accent-hover: #8BC34A;
    --highlight: #DCE775;
  }
}

/* ===========================================
   PALETTE 6: Coastal (Cyanobacteria Lichen)
   =========================================== */

/* Light mode */
[data-palette="coastal"] {
  --bg: #F0F5F5;
  --fg: #1E3A3A;
  --fg-soft: #8AABAB;
  --accent: #1ABC9C;
  --accent-hover: #16A085;
  --highlight: #3498DB;
}

/* Dark mode */
[data-theme="dark"][data-palette="coastal"] {
  --bg: #0D1F1F;
  --fg: #D0E8E4;
  --fg-soft: #4A7A75;
  --accent: #2DD4A8;
  --accent-hover: #20C997;
  --highlight: #5DADE2;
}

@media (prefers-color-scheme: dark) {
  [data-theme="system"][data-palette="coastal"] {
    --bg: #0D1F1F;
    --fg: #D0E8E4;
    --fg-soft: #4A7A75;
    --accent: #2DD4A8;
    --accent-hover: #20C997;
    --highlight: #5DADE2;
  }
}

/* ===========================================
   PALETTE 7: Scarlet Cup (British Soldiers)
   =========================================== */

/* Light mode */
[data-palette="scarlet"] {
  --bg: #FAF5F5;
  --fg: #3D2828;
  --fg-soft: #AB9090;
  --accent: #C0392B;
  --accent-hover: #922B21;
  --highlight: #E8967A;
}

/* Dark mode */
[data-theme="dark"][data-palette="scarlet"] {
  --bg: #1F1515;
  --fg: #F0E0E0;
  --fg-soft: #7A5A5A;
  --accent: #E74C3C;
  --accent-hover: #B03A2E;
  --highlight: #F1948A;
}

@media (prefers-color-scheme: dark) {
  [data-theme="system"][data-palette="scarlet"] {
    --bg: #1F1515;
    --fg: #F0E0E0;
    --fg-soft: #7A5A5A;
    --accent: #E74C3C;
    --accent-hover: #B03A2E;
    --highlight: #F1948A;
  }
}

html {
  font-size: 16px;
}

/* MOBILE */
@media (max-width: 800px) {
  html {
    font-size: 20px;
  }
  :root {
    --border-width: 2px;
  }
  /* DEBUG */
  /* body { */
  /*   background: red !important; */
  /* } */
}

body {
  font-size: var(--font-size-base);
  background-color: var(--bg);
  color: var(--fg);
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* ===========================================
   CODE BLOCKS
   =========================================== */

/* Inline code */
code {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  background-color: var(--fg);
  color: var(--bg);
  border-radius: var(--border-radius);
}

/* Code blocks */
pre {
  margin: 1em 0;
  padding: 0;
  overflow: visible;
}

pre code {
  display: block;
  padding: 1em;
  overflow-x: auto;
  background-color: var(--fg);
  color: var(--bg);
  /* border-radius: var(--border-radius); */
  /* border: var(--border-width) solid var(--accent); */
  font-size: var(--font-size-small);
  line-height: 1.5;
}

/* Pygments highlight wrapper */
.highlight {
  margin: 1em 0;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.highlight pre {
  margin: 0;
  padding: 1em;
  overflow-x: auto;
  background-color: var(--fg);
  color: var(--bg);
  border: var(--border-width) solid var(--accent);
  border-radius: var(--border-radius);
  font-size: var(--font-size-small);
  line-height: 1.5;
}

.highlight code {
  padding: 0;
  background: transparent;
  color: inherit;
  border-radius: 0;
  font-size: inherit;
}

/* Pygments syntax highlighting - light themes (dark code bg) */
.highlight .k,
.highlight .kn,
.highlight .kd,
.highlight .kc { color: #ff79c6; } /* keywords */
.highlight .nf,
.highlight .fm { color: #50fa7b; } /* function names */
.highlight .n { color: inherit; } /* names */
.highlight .o { color: #ff79c6; } /* operators */
.highlight .p { color: inherit; } /* punctuation */
.highlight .s1,
.highlight .s2,
.highlight .s { color: #f1fa8c; } /* strings */
.highlight .mi,
.highlight .mf { color: #bd93f9; } /* numbers */
.highlight .c,
.highlight .c1,
.highlight .cm { color: #6272a4; } /* comments */
.highlight .nb { color: #8be9fd; } /* builtins */
.highlight .nc { color: #8be9fd; } /* class names */
.highlight .nx { color: inherit; } /* other names (JS) */
.highlight .w { color: inherit; } /* whitespace */

/* Mobile adjustments for code */
@media (max-width: 800px) {
  .highlight pre,
  pre code {
    font-size: var(--font-size-tiny);
    padding: 0.75em;
  }
}


.nunito-header {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}


head { 
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

h1 {
	margin: auto;
	text-align: center;
}

@media (max-width: 800px) {
  h1, h2 {
    font-size: var(--font-size-large);
  }
}

a {
	background-color: var(--post);
	text-decoration: none;
	color: var(--post-border);
  border-radius: var(--border-radius);
  border: var(--border-width) solid var(--post-border);
  padding: 0px 3px;
}

@media (max-width: 800px) {
  ul {
    margin-left: 0;
    padding-left: 0;
  }
}


a:hover {
	background-color: var(--post-hover);
  border: var(--border-width) solid var(--post-border-hover);
	color: var(--post-border-hover);
}

.centre_body {
	width: 40%;
	min-width: 700px;
	margin: auto;
  margin-top: 45px;
}

@media (max-width: 800px) {
  .centre_body {
    width: 90%;
    min-width: 0px;
    margin-top: 0px;
  }
}

img {
	max-height: 400px;
	width: 100%;
	height: auto;
	margin: var(--border-width);
	object-fit: contain;
	display: flex;
	cursor: help;
  border-radius: var(--border-radius);
}

video {
	width: 75%;
	height: auto;
	margin: var(--border-width) auto;
	object-fit: contain;
	display: flex;
	cursor: help;
  border-radius: var(--border-radius);
}

@media (max-width: 800px) {
  video {
    width: 100%;
  }
}

table {
	margin: auto;
}

.icon {
  padding: 0;
  border-radius: 0;
}

.block_hori {
	margin: 3px;
	padding: 2px;
	display: flex;
	flex-direction: row;
	border-bottom: var(--border-width) solid lightgreen;
	position: relative;
	gap: 2px;
	align-items: flex-start;
	min-width: 20%;
	min-height: 20%;
}

.block_vert {
	margin: 3px;
	padding: 2px;
	display: flex;
	flex-direction: column;
	position: relative;
	gap: 2px;
	/* align-items: flex-start; */
	min-width: 20%;
	min-height: 20%;
}

.post {
	display: flex;
	flex-direction: row;
	text-overflow: ellipsis;
	justify-content: flex-start;
	flex-wrap: nowrap;
}

@media (max-width: 800px) {
  .post {
    flex-direction: column-reverse;
  }
}

.post.fixed {
  /* margin-bottom: 10px; */
}

.post a {
	display: flex;
	flex-direction: row;
	text-overflow: ellipsis;
	justify-content: flex-start;
	flex-wrap: nowrap;
	align-items: center;
	background-color: var(--post);
	text-decoration: none;
	color: var(--fg);
	margin-bottom: 2px;
	padding: 6px 8px 6px 8px;
  border-radius: var(--border-radius);
  border: var(--border-width) solid var(--post-border);
}

.post.fixed a {
  border: var(--border-width) solid var(--fixed);
}

.post a:hover {
	background-color: var(--post-hover);
  border: var(--border-width) solid var(--post-border-hover);
	color: var(--post-border-hover);
}

/* .post { */
/* 	display: flex; */
/* 	flex-direction: row; */
/* 	text-overflow: ellipsis; */
/* 	justify-content: flex-start; */
/* 	flex-wrap: nowrap; */
/* 	/* white-space: nowrap; */ */
/* } */
/**/
/* .post a { */
/* 	display: flex; */
/* 	flex-direction: row; */
/* 	text-overflow: ellipsis; */
/* 	justify-content: flex-start; */
/* 	flex-wrap: nowrap; */
/* 	background-color: white; */
/* 	text-decoration: none; */
/* 	color: black; */
/* 	margin-bottom: 2px; */
/* } */
/**/
/* .post a:hover { */
/* 	background-color: lightsalmon; */
/* } */

.post a:visited {
	background-color: var(--bg);
  opacity: 0.7;
}

.post a:visited:hover {
	background-color: var(--fg);
  opacity: 1;
}

.post img {
	width: 22px;
	height: 22px;
	object-fit: cover;
	margin: 0;
	margin-right: 15px;
	flex-shrink: 0;
}

.post_name {
	font-weight: bold;
}

.date {
	font-size: var(--font-size-small);
	white-space: nowrap;
	width: 6em;
	flex-shrink: 0;
	margin-right: 15px;
}

.tags {
	display: flex;
	flex-direction: row;
	gap: 0.5%;
	flex-wrap: wrap;
	justify-content: flex-start;
  margin-bottom: 10px;
}

.tagContainer {
  display: flex;
  flex-direction: row;
	justify-content: flex-end;
}

.tag {
	white-space: nowrap;
	height: 100%;
	margin-left: 0.5%;
  padding-left: 5px;
  padding-right: 5px;
	background-color: var(--tag);
  border-radius: var(--border-radius);
  font-size: var(--font-size-small);
}

@media (max-width: 800px) {
  .tag {
    font-size: var(--font-size-tiny);
  }
}

.toggleDiv {
	cursor: pointer;
  border-radius: var(--border-radius);
  transition: all 0.1s ease;
  padding-left: 5px;
  padding-right: 5px;
  font-size: var(--font-size-small);
}
.toggleDiv.on {
	background-color: var(--tag-on);
  outline: 0px;
  color: #fff;
}
.toggleDiv.on:hover {
	background-color: var(--tag-hover);
}
.toggleDiv.off {
	background-color: var(--tag-off);
  outline: 2px solid var(--fg-soft);
  color: var(--fg-soft);
}
.toggleDiv.off:hover {
	background-color: var(--tag-hover);
}
.toggleDiv.fixed {
	background-color: var(--fixed);
  outline: 0px;
  color: #fff;
}
.toggleDiv.fixed:hover {
	background-color: var(--fixed);
  cursor: default;
}

.tagOperator {
  cursor: pointer;
  border-radius: var(--border-radius);
  transition: all 0.1s ease;
  padding-left: 5px;
  padding-right: 5px;
}
.tagOperator.on {
  background-color: var(--tag-op-on);
  outline: 0px;
  color: #fff;
}
.tagOperator.on:hover {
  background-color: var(--tag-op-hover);
}
.tagOperator.off {
  background-color: var(--tag-op-off);
  outline: 2px solid var(--fg-soft);
  color: var(--fg-soft);
}
.tagOperator.off:hover {
  background-color: var(--tag-op-hover);
}

/* .tags { */
/* 	display: flex; */
/* 	flex-direction: row; */
/* 	gap: 0.5%; */
/* 	flex-wrap: wrap; */
/* 	justify-content: flex-start; */
/* } */
/**/
/* .tag { */
/* 	white-space: nowrap; */
/* 	line-height: 1.1em; */
/* 	height: 1.1em; */
/* 	margin-left: 0.5%; */
/* 	font-size: small; */
/* } */
/**/
/* .toggleDiv { */
/* 	cursor: pointer; */
/* 	transition: all 0.1s; */
/* } */
/* .toggleDiv.on { */
/* 	background-color: lightblue; */
/* } */
/* .toggleDiv.on:hover { */
/* 	background-color: darkcyan; */
/* } */
/* .toggleDiv.off { */
/* 	background-color: white; */
/* } */
/* .toggleDiv.off:hover { */
/* 	background-color: grey; */
/* } */

.image_grid {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 4px;
	margin: auto;
	max-width: 75%;
}

.image_grid img {
	margin: var(--border-width);
	width: 20%;
	max-width: 20%;
}

.image_grid_2 {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 4px;
	margin: auto;
	max-width: 75%;
}

.image_grid_2 img {
	margin: var(--border-width);
	width: 45%;
	max-width: 45%;
}

.video_grid_2 {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 4px;
}

.video_grid_2 video_block {
	margin: 0;
	width: 45%;
	max-width: 45%;
}

#focus_img, #focus_video {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  background: none;
  padding: 0;
  margin: 0;
}

/* Desktop: follow cursor */
@media (hover: hover) {
  #focus_img, #focus_video {
    width: auto;
    height: auto;
    max-width: 500px;
    max-height: 80vh;
    object-fit: contain;
    transform: scale(0);
    transform-origin: top left;
    transition: transform 0.1s ease;
  }
  #focus_img.show, #focus_video.show {
    transform: scale(1);
  }
}

/* Mobile: centered popup */
@media (hover: none) {
  #focus_img, #focus_video {
    top: 50%;
    left: 50%;
    width: 80%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.1s ease;
  }
  #focus_img.show, #focus_video.show {
    transform: translate(-50%, -50%) scale(1);
  }
}

#baseCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999;
}

/* Site header */
.site-header {
  position: relative;
}

.site-header h1 {
  margin: auto;
  text-align: center;
}

/* Toggle container */
.toggle-container {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  z-index: 1000;
}

/* Theme toggle */
.theme-toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: var(--border-width) solid var(--fg-soft);
  background-color: var(--bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.theme-toggle:hover {
  background-color: var(--fg);
}

.theme-toggle:hover .theme-icon {
  stroke: var(--bg);
}

.theme-toggle:hover .theme-icon-system .half-fill {
  fill: var(--bg);
}

.theme-icon {
  width: 18px;
  height: 18px;
  stroke: var(--fg);
  stroke-width: 2;
  fill: none;
  transition: stroke 0.2s ease, fill 0.2s ease;
}

.theme-icon-system .half-fill {
  fill: var(--fg);
  stroke: none;
}

/* Hide all icons by default */
.theme-icon-sun,
.theme-icon-moon,
.theme-icon-system {
  display: none;
}

/* Show appropriate icon based on theme */
[data-theme="light"] .theme-icon-sun {
  display: block;
}

[data-theme="dark"] .theme-icon-moon {
  display: block;
}

[data-theme="system"] .theme-icon-system {
  display: block;
}

@media (max-width: 800px) {
  .site-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
  }

  .site-header h1 {
    margin: 0;
    text-align: left;
    font-size: var(--font-size-large);
  }

  .toggle-container {
    position: static;
    flex-shrink: 0;
  }
  .theme-toggle {
    width: 36px;
    height: 36px;
  }
  .theme-icon {
    width: 20px;
    height: 20px;
  }
  .palette-toggle {
    width: 36px;
    height: 36px;
  }
  .palette-icon {
    width: 20px;
    height: 20px;
  }
}

/* Palette toggle */
.palette-toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: var(--border-width) solid var(--fg-soft);
  background-color: var(--bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.palette-toggle:hover {
  background-color: var(--fg);
}

.palette-toggle:hover .palette-stripe {
  stroke: var(--bg);
}

.palette-icon {
  width: 18px;
  height: 18px;
  transition: stroke 0.2s ease;
}

.palette-stripe {
  fill: none;
  stroke: var(--fg);
  stroke-width: 1.5;
  transition: stroke 0.2s ease, fill 0.2s ease;
}

/* Palette stripe colors based on current palette */
[data-palette="vintage"] .palette-stripe-1 { fill: #8B4D3B; stroke: #8B4D3B; }
[data-palette="vintage"] .palette-stripe-2 { fill: #5B7A6A; stroke: #5B7A6A; }
[data-palette="vintage"] .palette-stripe-3 { fill: #C9A85C; stroke: #C9A85C; }

[data-palette="earth"] .palette-stripe-1 { fill: #6B7F5A; stroke: #6B7F5A; }
[data-palette="earth"] .palette-stripe-2 { fill: #8E6B4A; stroke: #8E6B4A; }
[data-palette="earth"] .palette-stripe-3 { fill: #B59B6D; stroke: #B59B6D; }

[data-palette="editorial"] .palette-stripe-1 { fill: #7D6B5D; stroke: #7D6B5D; }
[data-palette="editorial"] .palette-stripe-2 { fill: #5C6B6A; stroke: #5C6B6A; }
[data-palette="editorial"] .palette-stripe-3 { fill: #A69176; stroke: #A69176; }

[data-palette="sunburst"] .palette-stripe-1 { fill: #E67E22; stroke: #E67E22; }
[data-palette="sunburst"] .palette-stripe-2 { fill: #D4A84B; stroke: #D4A84B; }
[data-palette="sunburst"] .palette-stripe-3 { fill: #C0392B; stroke: #C0392B; }

[data-palette="wolf"] .palette-stripe-1 { fill: #9ACD32; stroke: #9ACD32; }
[data-palette="wolf"] .palette-stripe-2 { fill: #7CB342; stroke: #7CB342; }
[data-palette="wolf"] .palette-stripe-3 { fill: #CDDC39; stroke: #CDDC39; }

[data-palette="coastal"] .palette-stripe-1 { fill: #1ABC9C; stroke: #1ABC9C; }
[data-palette="coastal"] .palette-stripe-2 { fill: #16A085; stroke: #16A085; }
[data-palette="coastal"] .palette-stripe-3 { fill: #3498DB; stroke: #3498DB; }

[data-palette="scarlet"] .palette-stripe-1 { fill: #C0392B; stroke: #C0392B; }
[data-palette="scarlet"] .palette-stripe-2 { fill: #922B21; stroke: #922B21; }
[data-palette="scarlet"] .palette-stripe-3 { fill: #E8967A; stroke: #E8967A; }

.palette-toggle:hover .palette-stripe-1,
.palette-toggle:hover .palette-stripe-2,
.palette-toggle:hover .palette-stripe-3 {
  filter: brightness(1.3);
}

/* ===========================================
   HOMEPAGE SCROLLABLE POSTS
   =========================================== */

/* Lock the page - prevent body scroll on homepage */
body:has(.homepage-fixed) {
  overflow: hidden;
  height: 100vh;
}

body:has(.homepage-fixed) .centre_body {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
  margin-top: 20px;
}

.homepage-fixed {
  flex-shrink: 0;
  background-color: var(--bg);
  z-index: 10;
  padding-bottom: 0;
}

.posts-scroll-container {
  position: relative;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.posts-scroll-content {
  height: 100%;
  overflow-y: auto;
  padding-top: 10px;
  padding-right: 15px;
}

.posts-scroll-content ul {
  margin-top: 0;
  margin-bottom: 35vh;
}

/* Custom scrollbar styling */
.posts-scroll-content::-webkit-scrollbar {
  width: 10px;
}

.posts-scroll-content::-webkit-scrollbar-track {
  background: var(--bg);
}

.posts-scroll-content::-webkit-scrollbar-thumb {
  background: var(--fg-soft);
  border-radius: 0;
}

.posts-scroll-content::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* Firefox scrollbar */
.posts-scroll-content {
  scrollbar-width: thin;
  scrollbar-color: var(--fg-soft) var(--bg);
}

/* Top fade gradient (posts disappear under header) */
.posts-fade-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 25px;
  background: linear-gradient(to bottom, var(--bg), transparent);
  pointer-events: none;
  z-index: 5;
}

/* Bottom fade gradient */
.posts-fade-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
  z-index: 5;
}

@media (max-width: 800px) {
  body:has(.homepage-fixed) .centre_body {
    height: calc(100vh - 80px);
    margin-top: 0;
  }

  .posts-scroll-content {
    padding-right: 10px;
  }

  .posts-fade-top {
    height: 15px;
  }

  .posts-fade-gradient {
    height: 50px;
  }
}