/* ============================================================
   SipsOfChai — stylesheet
   1. Tokens (colour, type, spacing)   4. Nav
   2. Fonts + reset                    5. Main content
   3. Layout (grid)                    6. Page-specific + footer
   Only the values in section 1 need touching to reskin the site.
   ============================================================ */

/* ---------- 1. TOKENS ---------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Lavender palette. One background tone, one accent. */
  --bg: #cdcde2;          /* the whole page */
  --tint: #c4afe3;        /* quotes, code, index box */
  --rule: #9d93b8;        /* borders and hairlines */
  --ink: #333333;         /* body text */
  --inkSoft: #5c5670;     /* secondary text, markers */
  --accent: #4a3d80;      /* links */
  --accentSoft: #c4afe3;  /* hover backgrounds */
  --navHeading: var(--ink); /* nav category headings */

  /* Shape of the header toggle in this theme: a full sun */
  --isDark: 0;            /* read by the toggle script */
  --iconRot: 0deg;
  --rayOpacity: 1;
  --rayScale: 1;
  --orbScale: 1;
  --cutoutShift: 0px;

  /* Type */
  --bodyFont: 'alte_haas_grotesk_regular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --displayFont: 'alte_haas_grotesk_bold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --monoFont: 'input_mono_regular', 'SFMono-Regular', Consolas, 'Courier New', monospace;
  --bodySize: 1.0625rem;
  --navSize: 0.95rem;
  --smallSize: 0.8125rem;
  --lineHeight: 1.6;

  /* Spacing */
  --pad: 2.75rem;
  --measure: 46rem;
  --navWidth: 15rem;
}

/* Dark values, applied either by the reader's system setting or by an
   explicit choice from the header toggle (data-theme on <html>).
   Keep the two blocks below identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --bg: #1a1725;
    --tint: #2c2444;
    --rule: #443b66;
    --ink: #e6e3f0;
    --inkSoft: #a79fc0;
    --accent: #c1a6f0;
    --accentSoft: #362d52;
    --navHeading: var(--inkSoft);

    /* ...and the sun becomes a crescent */
    --isDark: 1;
    --iconRot: -35deg;
    --rayOpacity: 0;
    --rayScale: 0.35;
    --orbScale: 1.15;
    --cutoutShift: -12.5px;
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: #1a1725;
  --tint: #2c2444;
  --rule: #443b66;
  --ink: #e6e3f0;
  --inkSoft: #a79fc0;
  --accent: #c1a6f0;
  --accentSoft: #362d52;
  --navHeading: var(--inkSoft);

  --isDark: 1;
  --iconRot: -35deg;
  --rayOpacity: 0;
  --rayScale: 0.35;
  --orbScale: 1.15;
  --cutoutShift: -12.5px;
}

:root[data-theme='light'] {
  color-scheme: light;
}

/* ---------- 2. FONTS + RESET --------------------------------------------- */

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

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

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

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

* {
  margin: 0;
  padding: 0;
  border: 0;
  text-decoration: none;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
  border-collapse: separate;
  border-spacing: 0;
  color: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after {
  box-sizing: border-box;
}

::selection {
  background: var(--accentSoft);
  color: var(--ink);
}

/* Keyboard users get a ring; mouse users don't */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

b, strong {
  font-weight: bold;
}

i, em {
  font-style: italic;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-thickness: 2px;
}

img {
  max-width: 100%;
  height: auto;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.5rem 0 0 0;
  clear: both;
}

/* ---------- 3. LAYOUT ---------------------------------------------------- */

html {
  background: var(--bg);
}

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  border: 1.5px solid var(--rule);
  font-family: var(--bodyFont);
  font-size: var(--bodySize);
  line-height: var(--lineHeight);
  overflow-x: hidden;

  display: grid;
  grid-template-columns: var(--navWidth) minmax(0, var(--measure));
  grid-template-areas:
    "header header"
    "nav    main"
    "footer footer";
  justify-content: center;
  align-content: start;
  column-gap: 2rem;
}

body > header { grid-area: header; }
body > nav    { grid-area: nav; }
body > main   { grid-area: main; }
body > footer { grid-area: footer; }

/* The landing page has no sidebar */
body.home {
  grid-template-columns: minmax(0, 42rem);
  grid-template-areas:
    "header"
    "main"
    "footer";
}

/* Header */
body > header {
  position: relative;
  padding: var(--pad) var(--pad) 1.75rem var(--pad);
  display: flex;
  align-items: center;
  gap: 1rem;
}

body > header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--pad);
  right: var(--pad);
  height: 1px;
  background: var(--rule);
}

body > header a {
  text-decoration: none;
  color: inherit;
}

body #logo {
  display: block;
  width: 65px;
  flex: none;
}

body header a#logo img {
  width: 100%;
}

.sitename {
  font-family: var(--displayFont);
  font-size: 1.25rem;
  letter-spacing: 0.01em;
}

/* Theme toggle: a sun that pulls in its rays and turns into a crescent.
   Every moving part reads a custom property from the theme block, so the
   two states are defined once, up in section 1. */
#themeToggle {
  margin-left: auto;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.25s ease;
}

#themeToggle:hover {
  background: var(--accentSoft);
}

#themeToggle:active .themeIcon {
  transform: rotate(var(--iconRot)) scale(0.88);
}

.themeIcon {
  width: 1.5rem;
  height: 1.5rem;
  overflow: visible;
  transform-box: view-box;
  transform-origin: 12px 12px;
  transform: rotate(var(--iconRot));
  transition: transform 0.55s cubic-bezier(0.4, 0.05, 0.2, 1.1);
}

.themeIcon .orb {
  fill: currentColor;
  transform-box: view-box;
  transform-origin: 12px 12px;
  transform: scale(var(--orbScale));
  transition: transform 0.55s cubic-bezier(0.4, 0.05, 0.2, 1.1);
}

.themeIcon .rays {
  transform-box: view-box;
  transform-origin: 12px 12px;
  opacity: var(--rayOpacity);
  transform: scale(var(--rayScale));
  transition: opacity 0.35s ease, transform 0.55s cubic-bezier(0.4, 0.05, 0.2, 1.1);
}

.themeIcon .cutout {
  transform-box: view-box;
  transform-origin: 12px 12px;
  transform: translateX(var(--cutoutShift));
  transition: transform 0.55s cubic-bezier(0.4, 0.05, 0.2, 1.1);
}

/* The colour change itself fades rather than snaps */
body,
nav summary,
main > ul.jump,
quote,
blockquote,
pre.code,
kbd {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ---------- 4. NAV ------------------------------------------------------- */

/* The menu is nearly a screenful on its own, so it scrolls with the page
   rather than sticking: a sticky column that tall needs its own scrollbar
   and ends up riding over the footer. */
nav {
  padding: var(--pad) 0 var(--pad) var(--pad);
  font-size: var(--navSize);
  align-self: start;
}

nav summary {
  font-family: var(--displayFont);
  font-size: var(--smallSize);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navHeading);
  cursor: pointer;
  padding: 2px 4px;
  margin-left: -4px;
  width: fit-content;

  /* the default disclosure triangle can't be animated, so it's replaced
     with a caret of our own in ::before */
  list-style: none;
}

nav summary::-webkit-details-marker {
  display: none;
}

nav summary::before {
  content: '\25BE';
  display: inline-block;
  margin-right: 0.45em;
  transition: transform 0.55s cubic-bezier(0.4, 0.1, 0.2, 1);
}

/* Closed, or in the middle of closing (the open attribute is only dropped
   once the collapse has finished animating) */
nav details:not([open]) summary::before,
nav details.is-closing summary::before {
  transform: rotate(-90deg);
}

nav summary:hover {
  background: var(--accentSoft);
  color: var(--ink);
}

nav h2 {
  font-family: var(--displayFont);
  font-size: var(--smallSize);
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--navHeading);
  margin: 1.5rem 0 0.35rem 0;
}

.site-nav ul li {
  list-style: none;
  line-height: 1.45;
}

.site-nav ul a {
  display: block;
  padding: 2px 6px;
  margin-left: -6px;
  color: var(--ink);
  text-decoration: none;
  border-radius: 2px;
}

.site-nav ul a:hover {
  background: var(--accentSoft);
  color: var(--ink);
}

/* Optional page description beside a nav entry */
span.pagedesc {
  display: inline;
  float: inline-end;
  font-size: smaller;
  font-style: italic;
  color: var(--inkSoft);
}

/* ---------- 5. MAIN CONTENT ---------------------------------------------- */

main {
  padding: var(--pad);
  text-align: left;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

main.home {
  padding-top: 2rem;
}

main > h1 {
  font-family: var(--displayFont);
  font-size: 2.5rem;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  text-transform: capitalize;
}

main h2 {
  font-family: var(--displayFont);
  font-size: 1.375rem;
  line-height: 1.25;
  text-transform: capitalize;
  margin: 2.5rem 0 0.75rem 0;
  scroll-margin-top: 1rem;
}

main h2:first-of-type {
  margin-top: 1rem;
}

/* Untitled section heading (a part named " ") */
main h2#_ {
  margin: 0;
}

main p {
  margin-bottom: 1rem;
}

main ul {
  list-style-position: outside;
  padding-left: 1.25rem;
  margin: 0.5rem 0 1rem 0;
}

main ul li {
  margin-bottom: 0.2rem;
}

main ul li::marker {
  color: var(--inkSoft);
}

/* Landing page index */
main.home > ul {
  list-style: decimal-leading-zero;
  padding-left: 2.5rem;
  margin-bottom: 2rem;
}

main.home > ul li {
  margin-bottom: 0.15rem;
}

main.home > ul li a {
  display: block;
  padding: 1px 6px;
  text-transform: capitalize;
  text-decoration: none;
  font-family: var(--displayFont);
  color: var(--ink);
  border-radius: 2px;
}

main.home > ul li a:hover {
  background: var(--accentSoft);
}

/* Jump index on long pages */
main > ul.jump {
  columns: 2;
  column-gap: 2rem;
  list-style: none;
  font-size: var(--smallSize);
  font-family: var(--displayFont);
  margin: 1.5rem 0 2.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--tint);
  border: 1px dashed var(--rule);
  border-radius: 3px;
}

main > ul.jump li {
  list-style: decimal-leading-zero inside;
  text-transform: capitalize;
  break-inside: avoid;
}

main > ul.jump li a {
  color: var(--ink);
  text-decoration: none;
}

main > ul.jump li a:hover {
  text-decoration: underline;
  color: var(--accent);
}

/* Quotes and code */
quote, blockquote {
  display: block;
  margin: 1.25rem 0;
  padding: 0.6rem 1rem;
  background: var(--tint);
  border-left: 3px solid var(--accent);
  border-radius: 0 3px 3px 0;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-style: italic;
  overflow-x: auto;
}

movie {
  font-family: var(--displayFont);
  font-weight: bold;
}

pre.code {
  margin: 1.25rem 0;
  padding: 0.75rem 1rem;
  font-family: var(--monoFont);
  font-size: var(--smallSize);
  background: var(--tint);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

pre.code * {
  font-family: var(--monoFont);
}

kbd {
  font-family: var(--monoFont);
  font-size: 0.8em;
  padding: 1px 4px;
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--tint);
  color: var(--ink);
}

/* ---------- 6. PAGE-SPECIFIC + FOOTER ------------------------------------ */

/* Image pages: sketches, gallery, collections, memes.
   Mizi puts a <br> after every image; dropping them lets the
   pictures pack into a grid instead of one tall column. */
body.sketches main.page br,
body.gallery main.page br,
body.collections main.page br,
body.memes main.page br {
  display: none;
}

body.sketches main.page img,
body.gallery main.page img,
body.collections main.page img,
body.memes main.page img {
  max-width: min(100%, 19rem);
  margin: 1rem 0.75rem 0 0;
  display: inline-block;
  vertical-align: top;
  border-radius: 3px;
  background: var(--tint);
}

body > footer {
  position: relative;
  padding: var(--pad);
  font-size: var(--smallSize);
  color: var(--inkSoft);
}

body > footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--pad);
  right: var(--pad);
  height: 1px;
  background: var(--rule);
}

body > footer p {
  margin-bottom: 0.6rem;
}

body > footer p:last-child {
  margin-bottom: 0;
}

body > footer img {
  max-height: 30px;
  max-width: 30px;
  margin-right: 10px;
}

/* ---------- RESPONSIVE ---------------------------------------------------- */

@media (max-width: 900px) {
  :root {
    --pad: 1.5rem;
  }

  body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "nav"
      "main"
      "footer";
    column-gap: 0;
  }

  body.home {
    grid-template-columns: minmax(0, 1fr);
  }

  nav {
    padding: 1.25rem var(--pad) 0 var(--pad);
  }

  main > ul.jump {
    columns: 1;
  }

  main > h1 {
    font-size: 2rem;
  }

  body.sketches main.page img,
  body.gallery main.page img,
  body.collections main.page img,
  body.memes main.page img {
    max-width: 100%;
    float: none;
    margin-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}