@import url("https://fonts.googleapis.com/css2?family=Expletus+Sans:ital,wght@0,400..700;1,400..700&family=Ysabeau+Office:ital,wght@0,1..1000;1,1..1000&display=swap");

/* -------------------------
   Root variables (fallback = night)
------------------------- */
:root {
  --max-width: 700px;
  
  /* fonts */
  --font-body: "Ysabeau Office", sans-serif;
  --font-heading: "Expletus Sans", sans-serif;


  /* base */
  --bg: #061e23;
  --bg-image: url("/backgrounds/tiledark.png");
  --text: #CED3D6;

  /* boxes */
  --box-bg: #042935;
  --box-border: #051f24;
  --box-shadow: 7px 7px 12px 2px rgba(0,0,0, 0.55);
  --subbox-shadow: 7px 7px 12px 2px rgba(0,0,0, 0.55);

  --subbox-bg: #032f39;
  --subbox-border: #80A89E;

  /* type & links */
  --link: #A6CCA5;
  --link-hover: #a2dec7;
  --h2: #A2DEC7;
  --h3: #A6CCA5;
  --h4: #A2DEC7;
  --h5: #C9B9BF;
  --accent-strong: #C99A83;

  /* components */
  --nav-bg: #093A4A;
  --nav-border: #08282E;
  --nav-border-hover: #80A89E;
  --nav-active-bg: #10495C;

  --blockquote-bg: #10495c;
  --blockquote-border: #A6CCA5;

  --img-border: #80A89E;

  --pagination-bg: #093a4a;
  --pagination-border: #051e24;
  --pagination-border-hover: #80a89e;

  --page-link-bg: #042935;
  --page-link-border: #093a4a;
  --page-link-active-bg: #10495c;

  --toc-title: #5a7051;
  --toc-dots-color: #bbb5ad;

  --citation: #A6CCA5;
  --divider: #CED3D6;
  --error: #A1545E;

  --audio-border: #C99A83;
  --audio-bg: #0e4653;
}

/* -------------------------
   Global layout / typography
------------------------- */
html { font-size: 20px; }

body {
  font-family: var(--font-body);
  background-color: var(--bg);
  background-image: var(--bg-image);
  background-size: 390px;
  background-repeat: repeat;
  background-attachment: fixed;
  color: var(--text);
  padding-left: 1.5em;
  padding-right: 1.5em;
  max-width: var(--max-width);
  margin: 0 auto;
  
}


h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.02em; /* optional */
}



/* -------------------------
   Content boxes
------------------------- */
.content-box {
  background-color: var(--box-bg);
  box-shadow: var(--box-shadow);
  border: 4px solid var(--box-border);
  padding: 1.5em 1.5em;
  margin: 2em auto;
  max-width: var(--max-width);
  word-break: break-word;
  white-space: normal;
}

.content-subbox {
  background-color: var(--subbox-bg);
  border: 3px dashed var(--subbox-border);
  box-shadow: var(--subbox-shadow);
  padding: 1em 1.2em;
  border-radius: 0;
}

/* -------------------------
   Headings & text
------------------------- */
h1 { text-align: center; }
h2 { text-align: center; color: var(--h2); }
h3 { text-align: center; color: var(--h3); }
h4 { text-align: left;   color: var(--h4); }
h5 { text-align: left;   color: var(--h5); }

/* Paragraph rhythm */
p {
  text-indent: 2em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  line-height: 1.4;
}

/* Links (non-nav) */
a:link,
a:visited { color: var(--link); }
a:hover { color: var(--link-hover); 
}


/* Strong uses color accent instead of weight */
strong { color: var(--accent-strong); font-weight: normal; }

/* -------------------------
   Navigation
------------------------- */
.navigation-box {
  background-color: var(--box-bg);
  box-shadow: var(--box-shadow);
  border: 4px solid var(--box-border);
  padding: 0.5em 0.5em;
  margin: 1em auto;
  max-width: var(--max-width);
}

.nav-top-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3em;
  margin-bottom: 0.5em;
}

.nav-top-row .home-button { margin: 0 1.5em; text-align: center; }

.home-button a,
.nav-links a {
  display: inline-block;
  padding: 0.2em 0.5em;
  margin: 0.2em;
  background-color: var(--nav-bg);
  color: var(--text) !important;
  text-decoration: none;
  border-radius: 0;
  border: 3px solid var(--nav-border);
}

.home-button a:hover,
.nav-links a:hover {
  border-color: var(--nav-border-hover);
  background: var(--nav-active-bg);
}

.home-button a.current,
.nav-links a.current {
  background-color: var(--nav-active-bg);
  color: var(--text) !important;
  border: 3px solid var(--subbox-border);
}

.nav-links {
  text-align: center;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}

/* -------------------------
   Theme switcher (two buttons)
------------------------- */

.theme-switcher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75em;
  margin: 0.4em 0;
  padding-inline: 5em; /* <-- brings buttons in from edges */
  text-align: initial;
}

.theme-group { display: flex; gap: 0.4em; }

.theme-switcher button {
  font-size: 1em;
  padding: 0.2em 0.4em;
  background: transparent;
  border: 3px dashed var(--nav-border);
  color: var(--text);
  cursor: pointer;
  line-height: 1.4;
}

.theme-switcher button:hover { border-color: var(--nav-border-hover);
  }

/* active button highlight stays the same */
body[data-theme="day"]   .theme-switcher [data-set-theme="day"],
body[data-theme="night"] .theme-switcher [data-set-theme="night"] {
  border-color: var(--subbox-border);
  background: var(--nav-active-bg);
  outline: 0;
}

@media (max-width: 520px) {
  .theme-switcher { flex-wrap: wrap; padding-inline: 0.75em; }
  .theme-group.left  { order: 1; }
  .theme-switcher .home-button { order: 2; flex: 1 1 100%; text-align: center; }
  .theme-group.right { order: 3; margin-left: auto; }
}

/* -------------------------
   Blockquote
------------------------- */
blockquote {
  color: var(--text);
  margin: 1.5em auto;
  padding: 1em 1.5em;
  border-left: 3px solid var(--blockquote-border);
  background-color: var(--blockquote-bg);
  max-width: 650px;
}

/* -------------------------
   TOC (blog page)
------------------------- */
.toc-entry { display: flex; align-items: baseline; }
.toc-date { white-space: nowrap; flex-shrink: 0; margin-right: 0.5em; }

.toc-dots {
  flex-grow: 1;
  position: relative;
  overflow: hidden;
  height: 1em;
  margin-right: 0.5em;
  font-family: monospace;
}
.toc-dots::before {
  content: "- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ";
  position: absolute; top: 0; left: 0;
  white-space: nowrap;
  color: var(--toc-dots-color);
  letter-spacing: 0.2em;
}

.toc-title {
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--toc-title);
  text-decoration: underline;
}

/* -------------------------
   Misc text helpers
------------------------- */
.text-divider {
  text-align: center;
  font-size: 0.9rem;
  color: var(--divider);
  margin: 2em 0;
  letter-spacing: 0.2em;
  font-family: monospace;
}

.citation {
  color: var(--citation);
  display: block;
  text-align: right;
  font-size: 0.9em;
}

/* -------------------------
   Images & media
------------------------- */
img { border: 3px solid var(--img-border); }

/* keep images responsive (good baseline) */
img { max-width: 100%; height: auto; }

/* album covers ≈ 75% of the content width, with sensible bounds */
img.album-cover {
  width: clamp(160px, 75%, 525px);
  height: auto;
  display: block;
  margin: 0.25em auto;
}



audio {
  width: 100%;
  max-width: var(--max-width);
  border: 3px solid var(--audio-border);
  background-color: var(--audio-bg);
  padding: 0;
}

/* -------------------------
   Pagination
------------------------- */
.pagination {
  display: flex;
  justify-content: space-between;
  margin: 0;
}
.pagination a {
  text-decoration: none;
  background: var(--pagination-bg);
  padding: 0.2em 0.5em;
  border: 3px solid var(--pagination-border);
  color: var(--text);
}
.pagination a:hover { border-color: var(--pagination-border-hover); }
.pagination.single span { visibility: hidden; }

/* -------------------------
   Gallery page list (1 2 3…)
------------------------- */
.page-list { text-align: center; margin: 0; padding-bottom: 1.2em; }
.page-list .page-link {
  display: inline-block;
  margin: 0.1em;
  padding: 0 0.4em;
  background-color: var(--page-link-bg);
  color: var(--text) !important;
  text-decoration: none;
  border: 3px solid var(--page-link-border);
  border-radius: 0;
}
.page-list .page-link:hover { border-color: var(--pagination-border-hover); }
.page-list .current {
  background-color: var(--page-link-active-bg);
  border-color: var(--pagination-border-hover);
}

/* -------------------------
   Guestbook theming
------------------------- */
#guestbooks___guestbook-form-container,
#guestbooks___guestbook-messages-container,
#guestbooks___guestbook-made-with {
  font-family: 'Cabin', sans-serif;
  background-color: var(--box-bg);
  color: var(--text);
  border: 4px solid var(--box-border);
  padding: 1.3em;
  max-width: var(--max-width);
  margin: 2em auto;
  box-shadow: var(--box-shadow);
}

.guestbooks___input-container input,
.guestbooks___input-container textarea {
  background-color: var(--subbox-bg);
  color: var(--text);
  border: 3px dotted var(--box-border);
  padding: 0.6em;
  font-family: 'Cabin', sans-serif;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.80em;
}

#guestbooks___guestbook-form input[type="submit"] {
  background-color: var(--subbox-bg);
  color: var(--text);
  font-size: 1;
  border: 3px dotted var(--box-border);
  padding: 0.5em 1em;
  cursor: pointer;
  font-family: 'Cabin', sans-serif;
}
#guestbooks___guestbook-form input[type="submit"]:hover {
  border: 3px solid var(--pagination-border-hover);
}

#guestbooks___error-message { color: var(--error); margin-top: 0.5em; }

#guestbooks___guestbook-messages-header {
  font-family: 'Cabin', sans-serif;
  color: var(--h3);
  text-align: center;
  margin-top: 1em;
}

button, input, select, textarea {
  font: inherit;             /* family, size, weight, style */
  font-synthesis: none;
}


/* -------------------------
   THEMES (data-theme on <body>)
------------------------- */

/* Night (current dark) */
body[data-theme="night"] {
  --bg: #291A1D;
  --bg-image: url("/backgrounds/tiledark.png");
  --text: #BDAEA2;

  --box-bg: #291A1D;
  --box-border: #170A0B;
  --box-shadow: 7px 7px 12px 2px rgba(0,0,0, 0.55);

  --subbox-bg: #331E22;
  --subbox-border: #ac6d64;
  --subbox-shadow: 7px 7px 12px 2px rgba(0,0,0, 0.55);

  --link: #C9A07B;
  --link-hover: #B8814F;

  --h2: #ac6d64;
  --h3: #92A182;
  --h4: #ac6d64;
  --h5: #C9A07B;

  --accent-strong: #92A182;

  --nav-bg: #331e22;
  --nav-border: #170A0B;
  --nav-border-hover: #ac6d64;
  --nav-active-bg: #47262C;

  --blockquote-bg: #331e22;
  --blockquote-border: #ac6d64;

  --img-border: #ac6d64;

  --pagination-bg: #331e22;
  --pagination-border: #170a0b;
  --pagination-border-hover: #ac6d64;

  --page-link-bg: #331e22;
  --page-link-border: #170a0b;
  --page-link-active-bg: #47262c;

  --toc-title: #BDAEA2;
  --toc-dots-color: #BDAEA2;

  --citation: #ac6d64;
  --divider: #BDAEA2;

  --audio-border: #C9A07B;
  --audio-bg: #291a1d;
}

/* Day (current light) */
body[data-theme="day"] {
  --bg: #D5DBCE;
  --bg-image: url("/backgrounds/tilelight2.png");
  --text: #3B4038;

  --box-bg: #D5DBCE;
  --box-border: #7B8573;
  --box-shadow: 7px 7px 12px 2px rgba(0,0,0, 0.55);

  --subbox-bg: #C5CFBA;
  --subbox-border: #2E7D45;
  --subbox-shadow: 7px 7px 12px 2px rgba(0,0,0, 0.55);

  --link: #21556B;
  --link-hover: #2C89B0;

  --h2: #2e7d45;
  --h3: #A84B3B;
  --h4: #2e7d45;
  --h5: #21556B;

  --accent-strong: #A84B3B;

  --nav-bg: #c5cfba;
  --nav-border: #7b8573;
  --nav-border-hover: #2E7D45;
  --nav-active-bg: #CADBB8;

  --blockquote-bg: #c5cfba;
  --blockquote-border: #2e7d45;

  --img-border: #2e7d45;

  --pagination-bg: #c5cfba;
  --pagination-border: #7b8573;
  --pagination-border-hover: #2e7d45;

  --page-link-bg: #c5cfba;
  --page-link-border: #7b8573;
  --page-link-active-bg: #cadbb8;

  --toc-title: #3B4038;
  --toc-dots-color: #3B4038;

  --citation: #2e7d45;
  --divider: #3B4038;

  --audio-border: #21556B;
  --audio-bg: #d5dbce;
}