/* hexacosa.net on top of the default Marmite theme (loaded after it).
   Light mode is the old site's white palette; dark mode inverts it (the old ink
   becomes the background). The card chrome is taken out: posts are separated by
   hairlines and whitespace. Contrast on bg: text >= 15:1, links >= 7.6:1,
   meta >= 4.9:1 in both modes. */

:root {
  --hx-bg: #ffffff;
  --hx-ink: #001010;         /* body text */
  --hx-heading: #002222;     /* titles and logo */
  --hx-link: #455566;        /* slate links */
  --hx-link-underline: rgb(69 85 102 / 0.45);
  --hx-accent: #2f4f4f;      /* header rule */
  --hx-muted: #6b7272;       /* dates and meta (the old #909090 was only 3.2:1) */
  --hx-rule: #e3e6e6;
  --hx-code-bg: #f9f9fb;
  --hx-code-border: #dcdfe3;
  --hx-leading: 1.75;        /* the old site's 16px/28px */
}

/* Dark: follows the OS before marmite.js sets data-theme, then data-theme="dark". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --hx-bg: #001010;
    --hx-ink: #dde6e6;
    --hx-heading: #eef6f6;
    --hx-link: #a3b4c6;
    --hx-link-underline: rgb(163 180 198 / 0.45);
    --hx-accent: #6f9696;
    --hx-muted: #8a9696;
    --hx-rule: #1a2c2c;
    --hx-code-bg: #071b1b;
    --hx-code-border: #1f3535;
    --hx-leading: 1.8;       /* light-on-dark reads lighter; give it more air */
  }
}
:root[data-theme="dark"] {
  --hx-bg: #001010;
  --hx-ink: #dde6e6;
  --hx-heading: #eef6f6;
  --hx-link: #a3b4c6;
  --hx-link-underline: rgb(163 180 198 / 0.45);
  --hx-accent: #6f9696;
  --hx-muted: #8a9696;
  --hx-rule: #1a2c2c;
  --hx-code-bg: #071b1b;
  --hx-code-border: #1f3535;
  --hx-leading: 1.8;
}

/* Map the tokens onto pico in every mode. Each selector is (0,2,0) like pico's
   own theme selectors, and this file loads later, so these win. */
:root:not([data-theme="dark"]),
:root:not([data-theme]),
:root[data-theme="dark"] {
  --pico-background-color: var(--hx-bg);
  --pico-color: var(--hx-ink);
  --pico-h1-color: var(--hx-heading);
  --pico-h2-color: var(--hx-heading);
  --pico-h3-color: var(--hx-heading);
  --pico-h4-color: var(--hx-heading);
  --pico-h5-color: var(--hx-heading);
  --pico-h6-color: var(--hx-heading);
  --pico-primary: var(--hx-link);
  --pico-primary-hover: var(--hx-heading);
  --pico-primary-underline: var(--hx-link-underline);
  --pico-primary-hover-underline: var(--hx-heading);
  --pico-secondary: var(--hx-muted);
  --pico-secondary-hover: var(--hx-heading);
  --pico-muted-color: var(--hx-muted);
  --pico-muted-border-color: var(--hx-rule);
  --pico-blockquote-border-color: var(--hx-rule);
  --pico-code-background-color: var(--hx-code-bg);
  --pico-card-background-color: transparent;
  --pico-card-sectioning-background-color: transparent;
  --pico-card-border-color: var(--hx-rule);
  --pico-card-box-shadow: none;
  --pico-home: var(--hx-heading);
  --pico-menu: var(--hx-link);
  --pico-menu-selected: var(--hx-heading);
  --pico-tag: transparent;
}

/* Type scale. The root stays at the browser's default (16px) on every screen
   (pico would scale it up to 131.25% on wide viewports) and body text is 17px.
   Sizes are rem so they land on whole pixels at the default root and still grow
   with a reader's larger browser font size; px values assume the 16px default. */
:root { --pico-font-size: 100%; }
body { font-size: 1.0625rem; }       /* 17px body text */
small { font-size: 0.875rem; }      /* 14px dates and meta */
code, kbd, pre, samp { font-size: 0.9375rem; }  /* 15px */
pre code { font-size: inherit; }

/* Headings on the old site's ratios to the body (1.8 / 1.4 / 1.2). */
h1 { --pico-font-size: 1.875rem; }   /* 30px */
h2 { --pico-font-size: 1.5rem; }     /* 24px */
h3 { --pico-font-size: 1.25rem; }    /* 20px */
h4 { --pico-font-size: 1.125rem; }   /* 18px */
h5,
h6 { --pico-font-size: 1.0625rem; }  /* 17px, bold */
h1, h2, h3, h4, h5, h6 { --pico-line-height: 1.4; }  /* room for wrapped Japanese titles */

/* Header: the old site's dark-slate rule and script logo */
.header-content {
  border-top: 3px solid var(--hx-accent);
  padding-top: 0.75rem;
  margin-bottom: 1.5rem;
}
.header-name h2 a {
  font-family: "Dancing Script", cursive;
  font-weight: 700;
  font-size: 2.5rem;  /* 40px */
  color: var(--hx-heading);
}
@media (max-width: 575px) {
  .header-name h2 a { font-size: 2rem; }  /* 32px */
}
.header-name h2 a:hover { text-decoration: none; }
.header-menu .menu-item,
#search-toggle { color: var(--hx-link); }
/* The current page's entry is a <button> with pico's 16px button metrics; match the links. */
.header-menu button.menu-item {
  font-size: inherit;
  line-height: inherit;
  padding: 8px;
}
.underline { background-color: var(--hx-accent); }

/* Flatten pico's article cards */
article {
  padding: 0;
  border-radius: 0;
  background: none;
}
article > footer {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* Post list */
article.content-list-item {
  margin: 0;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--hx-rule);
}
article.content-list-item:first-child { padding-top: 0.25rem; }
.content-list-item .content-title {
  font-size: 1.375rem;  /* 22px */
  line-height: 1.4;
  margin-bottom: 0.5rem;
  text-wrap: balance;
}
.content-list-item .content-title a {
  color: var(--hx-heading);
  text-decoration: none;
}
.content-list-item .content-title a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.content-excerpt { margin-bottom: 0.75rem; }
.data-tags-footer { font-size: 0.875rem; }

/* Tags: plain "#tag" links */
.content-tags li:hover {
  background: none;
  border-color: transparent;
}

/* Post page */
.content-title h1 { text-wrap: balance; }  /* 28px from the scale above */
@media (max-width: 575px) {
  .content-title h1 { --pico-font-size: 1.625rem; }  /* 26px */
}
.content-title .content-date { color: var(--hx-muted); }
article.h-entry:not(.content-list-item) { margin-bottom: 2.5rem; }
/* The date is already under the title; the closing footer keeps only the tags. */
article.h-entry:not(.content-list-item) > footer .content-date { display: none; }

/* Back-links and previous/next: plain sections under a hairline */
.main-content > article:not(.h-entry) {
  margin: 0;
  padding: 1.25rem 0;
  border-top: 1px solid var(--hx-rule);
  color: var(--hx-muted);
  font-size: 0.9375rem;  /* 15px */
}

/* Body text */
.e-content,
.content-excerpt { line-height: var(--hx-leading); }
.e-content { text-wrap: pretty; }
.e-content a {
  color: var(--hx-link);
  text-decoration: underline;
  text-decoration-color: var(--hx-link-underline);
  text-underline-offset: 0.2em;
  transition: color 0.2s ease-out, background-color 0.2s ease-out;
}
/* The old site's inverted hover (inverted again in dark), except on image links */
.e-content a:hover {
  color: var(--hx-bg);
  background-color: var(--hx-link);
  text-decoration: none;
}
.e-content a:has(img):hover { background-color: transparent; }

:root .e-content pre.marmite-code {
  background: var(--hx-code-bg);
  border: 1px solid var(--hx-code-border);
  border-radius: 4px;
}
.e-content :not(pre) > code {
  padding: 0.05em 0.35em;
  border: 1px solid var(--hx-code-border);
  border-radius: 3px;
  background: var(--hx-code-bg);
  color: var(--hx-ink);
}

/* Image alignment classes that the reStructuredText posts were written with. */
img.align-left { float: left; margin: 0 1em 1em 0; }
img.align-right { float: right; margin: 0 0 1em 1em; }
img.align-center { display: block; margin-left: auto; margin-right: auto; }
.e-content::after { content: ""; display: block; clear: both; }

/* Site footer (content/_footer.md) */
.site-footer {
  margin-top: 3rem;
  padding: 1.5rem 0 2rem;
  border-top: 1px solid var(--hx-rule);
  color: var(--hx-muted);
  font-size: 0.875rem;
  text-align: center;
}
.site-footer p {
  margin-bottom: 0.25rem;
  color: inherit;  /* pico colors <p> with the body ink */
}
.site-footer a {
  color: var(--hx-link);
  text-decoration: none;
}
.site-footer a:hover { text-decoration: underline; }

/* Light/dark toggle: one more quiet footer item, not a pico button */
.site-footer .theme-toggle {
  display: inline;
  width: auto;
  margin: 0;
  padding: 0 0.2em;
  border: 0;
  border-radius: 3px;
  background: none;
  box-shadow: none;
  color: var(--hx-muted);
  font: inherit;
  line-height: inherit;
  vertical-align: baseline;
  cursor: pointer;
}
.site-footer .theme-toggle:hover { color: var(--hx-link); }
.site-footer .theme-toggle:focus-visible {
  outline: 2px solid var(--hx-link);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .e-content a,
  .header-menu .menu-item,
  .underline { transition: none; }
}