/* style.css --- fixed three-column theme for org-static-blog

   This stylesheet is intended for the customized three column version of
   org-static-blog.el.  It keeps the generated blog in three vertical columns
   on every generated page:

   - left: fixed site rail / blog name / primary links
   - center: main org-static-blog content, including latest posts on index.html
   - right: fixed, independently scrollable blog-entry index

   It uses no JavaScript. Persistent right-sidebar highlighting relies on the
   aria-current/class hooks emitted by the accompanying org-static-blog.el.
   The layout also uses #preamble, #content, #postamble,
   #blog-left-sidebar, and #blog-right-sidebar.
*/

/*
   URL: https://codeberg.org/christianbryant/org-static-blog-3c

   Copyright (c) 2026, Christian Bryant <christian.bryant@ucla.edu>
   All rights reserved.

   Redistribution and use in source and binary forms, with or without
   modification, are permitted provided that the following conditions are met:

   1. Redistributions of source code must retain the above copyright notice,
      this list of conditions and the following disclaimer.

   2. Redistributions in binary form must reproduce the above copyright notice,
      this list of conditions and the following disclaimer in the documentation
      and/or other materials provided with the distribution.

   3. Neither the name of the copyright holder nor the names of its
      contributors may be used to endorse or promote products derived from
      this software without specific prior written permission.

   THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
   AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
   IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
   ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
   LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
   CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
   SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
   INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
   CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
   ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
   POSSIBILITY OF SUCH DAMAGE.
*/

:root {
  color-scheme: dark;

  --bg: #1A1A1A;
  --text: #d8e2d8;
  --text-soft: #9caf9f;
  --text-muted: #6f7f74;
  --link: #a8e6bb;
  --link-hover: #f2ffd0;
  --accent: #d4b26a;
  --rule: #26342c;
  --code-bg: #0a100d;

  /* Navigation and tag-cloud neon colors.  These intentionally do not
     reuse the base palette used elsewhere in the theme. */
  --nav-neon-blue: #00d4ff;
  --nav-neon-purple: #b967ff;
  --nav-neon-lavender: #d6a2ff;
  --nav-neon-pink: #ff4fd8;

  --tag-neon-blue: var(--nav-neon-blue);
  --tag-neon-pink: var(--nav-neon-pink);
  --tag-neon-yellow: #fbff12;
  --tag-neon-purple: var(--nav-neon-purple);
  --tag-neon-rose: #ff2a6d;
  --tag-neon-lavender: var(--nav-neon-lavender);

  /* The left and right columns intentionally use the same width.  The center
     column receives all remaining space up to --content-max-width. */
  --side-width: clamp(11rem, 18vw, 18rem);
  --column-gap: clamp(0.9rem, 2vw, 2.25rem);
  --content-max-width: 70rem;
  --column-padding-y: clamp(1.1rem, 2vw, 1.8rem);
  --column-padding-x: clamp(0.75rem, 1.4vw, 1.35rem);

  --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
}

::selection {
  background: rgba(168, 230, 187, 0.22);
  color: var(--text);
}

a {
  /* --link-color records the link's normal hue so hover/focus styling can
     derive a matching highlight.  Highlighted link text uses one consistent
     dark gray for maximum readability across every neon background hue. */
  --link-color: var(--link);
  --link-highlight-text: #252927;

  color: var(--link-color);
  border-radius: 0.12rem;
  text-decoration: none;
  transition:
    background-color 120ms ease,
    box-shadow 120ms ease,
    color 120ms ease,
    filter 120ms ease;
}

/* Link highlights use an opaque, lightened version of each link's own hue.
   Because ordinary links remain inline, and the layout-specific rules below
   shrink-wrap links that were previously block/grid sized, the rectangle
   stays close to the actual linked text instead of filling its container. */
a:hover,
a:focus {
  background-color: color-mix(in srgb, var(--link-color) 68%, white 32%);
  box-shadow:
    0 0 0 0.14rem color-mix(in srgb, var(--link-color) 68%, white 32%),
    0 0 0.7rem color-mix(in srgb, var(--link-color) 82%, transparent);
  color: var(--link-highlight-text);
  text-decoration: none;
  text-shadow: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

a:focus-visible {
  outline: 1px dotted currentColor;
  outline-offset: 0.18rem;
}

/* The mfp-style Lisp places both generated sidebars inside #preamble.  Use
   display: contents so the wrapper does not create a fourth visual column. */
#preamble {
  display: contents;
}

/* Shared sidebar treatment.  There are deliberately no borders around the
   columns; spacing and color create the separation. */
.blog-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: var(--side-width);
  height: 100vh;
  height: 100dvh;
  padding: var(--column-padding-y) var(--column-padding-x);
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-soft);
  font-family: var(--mono);
}

/* The left rail stays visually locked.  It does not participate in page scroll
   and does not expose its own scrollbar.  Keep this column concise. */
.blog-sidebar-left {
  left: 0;
  overflow: hidden;
}

/* The right rail stays in place, but the list itself can scroll to the final
   post entry independently of the center article scroll. */
.blog-sidebar-right {
  right: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-color: rgba(168, 230, 187, 0.32) transparent;
  scrollbar-width: thin;
}

.blog-sidebar-block {
  margin: 0 0 1.55rem;
  padding: 0;
}

.blog-sidebar-block:last-child {
  margin-bottom: 0;
}

.blog-site-title {
  margin: 0;
  color: var(--text);
  font-size: clamp(0.94rem, 1.31vw, 1.27rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.blog-site-title a {
  --link-color: var(--text);
  color: var(--link-color);
}

.blog-sidebar-title {
  margin: 0 0 0.7rem;
  color: var(--accent);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.25;
  text-transform: uppercase;
}

.blog-primary-links,
.blog-sidebar nav {
  display: grid;
  justify-items: start;
  gap: 0.22rem;
}

.blog-primary-links a,
.blog-sidebar nav a {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding: 0.08rem 0;
  font-size: 0.81rem;
  line-height: 1.35;
}

/* The left-column Navigation links rotate through neon colors that are not
   otherwise used by the theme palette.  The nth-child pattern keeps working
   if the navigation list grows beyond four links. */
.blog-sidebar-left .blog-primary-links a:nth-child(4n + 1) {
  --link-color: var(--nav-neon-blue);
  color: var(--link-color);
}

.blog-sidebar-left .blog-primary-links a:nth-child(4n + 2) {
  --link-color: var(--nav-neon-purple);
  color: var(--link-color);
}

.blog-sidebar-left .blog-primary-links a:nth-child(4n + 3) {
  --link-color: var(--nav-neon-lavender);
  color: var(--link-color);
}

.blog-sidebar-left .blog-primary-links a:nth-child(4n) {
  --link-color: var(--nav-neon-pink);
  color: var(--link-color);
}

.blog-sidebar-left .blog-primary-links a:hover,
.blog-sidebar-left .blog-primary-links a:focus {
  filter: brightness(1.08);
}

.blog-sidebar p,
.blog-sidebar li {
  font-size: 0.79rem;
  line-height: 1.45;
}

.blog-sidebar ul,
.blog-sidebar ol {
  margin: 0;
  padding-left: 1.05rem;
}

.blog-sidebar-note {
  margin: 0;
  color: var(--text-muted);
}

.blog-entry-list {
  list-style: decimal-leading-zero;
  margin: 0;
  padding-left: 2.2rem;
}

.blog-entry-item {
  margin: 0 0 0.58rem;
  padding-left: 0.2rem;
  color: var(--text-muted);
}

.blog-entry-item::marker {
  color: var(--text-muted);
  font-size: 0.64rem;
}

.blog-entry-item a {
  --link-color: var(--link);

  display: inline-grid;
  justify-items: start;
  width: fit-content;
  max-width: 100%;
  gap: 0.08rem;
  margin: 0;
  padding: 0.14rem 0.22rem;
}

/* The generator marks the link for the currently displayed post with
   aria-current="page" and blog-entry-link-current.  This gives the right
   sidebar a persistent location marker without JavaScript. */
.blog-entry-item a[aria-current="page"],
.blog-entry-link-current {
  background-color: color-mix(in srgb, var(--link-color) 68%, white 32%);
  box-shadow:
    0 0 0 0.14rem color-mix(in srgb, var(--link-color) 68%, white 32%),
    0 0 0.7rem color-mix(in srgb, var(--link-color) 82%, transparent);
  color: var(--link-highlight-text);
  text-decoration: none;
}

.blog-entry-item a:hover .blog-entry-title,
.blog-entry-item a:focus .blog-entry-title,
.blog-entry-item a:hover .blog-entry-date,
.blog-entry-item a:focus .blog-entry-date,
.blog-entry-item a[aria-current="page"] .blog-entry-title,
.blog-entry-item a[aria-current="page"] .blog-entry-date,
.blog-entry-link-current .blog-entry-title,
.blog-entry-link-current .blog-entry-date {
  color: var(--link-highlight-text);
}

.blog-entry-title {
  color: var(--link);
  overflow-wrap: anywhere;
  font-size: 0.77rem;
  line-height: 1.32;
}

.blog-entry-date {
  color: var(--text-muted);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  line-height: 1.25;
  text-transform: uppercase;
}

/* Center column.  It is always wider than either side column when viewport
   width allows.  On index.html this is where org-static-blog renders the most
   recent posts according to org-static-blog-index-length. */
#content {
  width: min(
    var(--content-max-width),
    calc(100vw - (2 * var(--side-width)) - (2 * var(--column-gap)))
  );
  margin-inline: auto;
  padding: clamp(2.25rem, 5vw, 4.75rem) 0 5rem;
}

#content > *:first-child {
  margin-top: 0;
}

#content p {
  margin: 1rem 0;
}

#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
  color: var(--text);
  font-family: var(--mono);
  line-height: 1.25;
}

/* Heading scale: h2 is intentionally the largest heading size.  Org export
   often emits the page title as h1/.title, so those selectors are kept
   smaller to avoid oversized page headers. */
#content h1,
#content .title {
  margin: 0 0 1.65rem;
  font-size: clamp(1.08rem, 1.88vw, 1.55rem);
  letter-spacing: -0.02em;
}

#content h2 {
  margin: 2.8rem 0 0.85rem;
  font-size: clamp(1.27rem, 2.25vw, 1.88rem);
}

#content h3 {
  margin: 2rem 0 0.65rem;
  color: var(--accent);
  font-size: 0.98rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.post-date {
  margin: 0 0 0.25rem;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.post-title {
  margin-top: 0.15rem;
}

.post-title a {
  --link-color: var(--text);
  color: var(--link-color);
}

#content h1.post-title {
  font-size: clamp(1.08rem, 1.88vw, 1.55rem);
}

#content h2.post-title {
  margin-top: 3.7rem;
  font-size: clamp(1.45rem, 2.81vw, 2.48rem);
}

#content h2.post-title:first-of-type {
  margin-top: 0;
}

.taglist {
  margin: 1.8rem 0 3.1rem;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.79rem;
}

.tag-label,
.tag-separator {
  color: var(--accent);
}

.taglist > a:first-child {
  --link-color: var(--accent);
  color: var(--link-color);
}

.taglist > a:first-child:hover .tag-label,
.taglist > a:first-child:focus .tag-label {
  color: var(--link-highlight-text);
}

.tag {
  --link-color: var(--link);

  display: inline-block;
  width: fit-content;
  margin: 0.2rem 0.25rem 0.2rem 0;
  padding: 0.04rem 0.4rem;
  background: rgba(168, 230, 187, 0.08);
  color: var(--link-color);
}

/* Individual post tag links use the same neon color cycle as tags.html, but
   only the color treatment is shared.  These tags keep the compact inline
   presentation used under blog entries: no count badges, no grid layout, and
   no font-size changes based on tag frequency. */
.taglist .tag:nth-of-type(6n + 1) {
  --link-color: var(--tag-neon-blue);
  color: var(--link-color);
}

.taglist .tag:nth-of-type(6n + 2) {
  --link-color: var(--tag-neon-pink);
  color: var(--link-color);
}

.taglist .tag:nth-of-type(6n + 3) {
  --link-color: var(--tag-neon-yellow);
  color: var(--link-color);
}

.taglist .tag:nth-of-type(6n + 4) {
  --link-color: var(--tag-neon-purple);
  color: var(--link-color);
}

.taglist .tag:nth-of-type(6n + 5) {
  --link-color: var(--tag-neon-rose);
  color: var(--link-color);
}

.taglist .tag:nth-of-type(6n) {
  --link-color: var(--tag-neon-lavender);
  color: var(--link-color);
}

/* Modern browsers can count only .tag siblings, which keeps the color cycle
   exact even if separators are emitted as separate inline elements. */
@supports selector(:nth-child(1 of .tag)) {
  .taglist .tag:nth-child(6n + 1 of .tag) {
    --link-color: var(--tag-neon-blue);
  color: var(--link-color);
  }

  .taglist .tag:nth-child(6n + 2 of .tag) {
    --link-color: var(--tag-neon-pink);
  color: var(--link-color);
  }

  .taglist .tag:nth-child(6n + 3 of .tag) {
    --link-color: var(--tag-neon-yellow);
  color: var(--link-color);
  }

  .taglist .tag:nth-child(6n + 4 of .tag) {
    --link-color: var(--tag-neon-purple);
  color: var(--link-color);
  }

  .taglist .tag:nth-child(6n + 5 of .tag) {
    --link-color: var(--tag-neon-rose);
  color: var(--link-color);
  }

  .taglist .tag:nth-child(6n of .tag) {
    --link-color: var(--tag-neon-lavender);
  color: var(--link-color);
  }
}

.taglist .tag:hover,
.taglist .tag:focus {
  filter: brightness(1.05);
}

.tag-cloud-intro,
.tag-cloud-empty {
  margin: 0 0 1.5rem;
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.84rem;
}

/* tags.html is generated as a uniform tag cloud.  The grid uses fixed column
   counts at each breakpoint so the six-color cycle keeps neighboring tags
   from sharing the same color horizontally or vertically.  Tag frequency is
   intentionally not represented by font size. */
.tag-cloud {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem 0.65rem;
  margin: 2rem 0 3rem;
  font-family: var(--mono);
}

.tag-cloud-item {
  --link-color: var(--tag-neon-blue);

  display: inline-flex;
  align-items: baseline;
  justify-content: flex-start;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.42rem 0.55rem;
  background: rgba(255, 255, 255, 0.025);
  color: var(--link-color);
  letter-spacing: 0.02em;
  line-height: 1.25;
}

.tag-cloud-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag-cloud-count {
  flex: 0 0 auto;
  color: currentColor;
  font-size: 0.67rem;
  opacity: 0.58;
}

.tag-cloud-item:nth-child(6n + 1) {
  --link-color: var(--tag-neon-blue);
  color: var(--link-color);
}

.tag-cloud-item:nth-child(6n + 2) {
  --link-color: var(--tag-neon-pink);
  color: var(--link-color);
}

.tag-cloud-item:nth-child(6n + 3) {
  --link-color: var(--tag-neon-yellow);
  color: var(--link-color);
}

.tag-cloud-item:nth-child(6n + 4) {
  --link-color: var(--tag-neon-purple);
  color: var(--link-color);
}

.tag-cloud-item:nth-child(6n + 5) {
  --link-color: var(--tag-neon-rose);
  color: var(--link-color);
}

.tag-cloud-item:nth-child(6n) {
  --link-color: var(--tag-neon-lavender);
  color: var(--link-color);
}

.tag-cloud-item:hover,
.tag-cloud-item:focus {
  filter: brightness(1.05);
}

#archive {
  margin-top: 3rem;
  padding-top: 1rem;
  font-family: var(--mono);
}

/* Archive dates and titles are emitted as direct sibling pairs inside
   #content rather than inside #archive.  Keep each title close to the date
   immediately above it, then place the larger separation before the next
   entry's date.  These structural selectors match the generated archive list
   without relying on the unrelated #archive element used on multipost pages. */
#content > .post-date + h2.post-title {
  margin-top: 0.15rem;
}

#content > h2.post-title + .post-date {
  margin-top: 2.6rem;
}

blockquote {
  margin: 1.5rem 0;
  padding: 0.1rem 0 0.1rem 1.15rem;
  border-left: 2px solid rgba(212, 178, 106, 0.75);
  color: var(--text-soft);
}

pre,
code,
kbd,
samp {
  font-family: var(--mono);
}

code,
kbd,
samp {
  padding: 0.12rem 0.28rem;
  background: rgba(168, 230, 187, 0.08);
  color: var(--link-hover);
  font-size: 0.86em;
}

pre {
  overflow-x: auto;
  margin: 1.55rem 0;
  padding: 1rem;
  background: var(--code-bg);
}

pre code {
  padding: 0;
  background: transparent;
  color: inherit;
}

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

hr {
  height: 1px;
  margin: 2.5rem 0;
  border: 0;
  background: var(--rule);
}

table {
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
  font-size: 0.88rem;
}

th,
td {
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--rule);
  vertical-align: top;
}

th {
  background: rgba(168, 230, 187, 0.06);
  color: var(--accent);
  font-family: var(--mono);
  text-align: left;
}

.footpara,
.footdef,
.footnotes {
  color: var(--text-soft);
  font-size: 0.84rem;
}

#postamble {
  width: min(
    var(--content-max-width),
    calc(100vw - (2 * var(--side-width)) - (2 * var(--column-gap)))
  );
  margin-inline: auto;
  padding: 0 0 3rem;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.75rem;
}

#postamble a {
  --link-color: var(--text-soft);
  color: var(--link-color);
}

.figure,
.org-center,
.org-right,
.org-left {
  margin: 1.5rem 0;
}

.figure p,
.org-center {
  text-align: center;
}

.org-right {
  text-align: right;
}

.org-left {
  text-align: left;
}

/* Keep the same three-column model on narrow screens, but compress the rails so
   the middle column remains the largest usable area. */
@media (max-width: 900px) {
  :root {
    --side-width: clamp(7.25rem, 21vw, 11rem);
    --column-gap: clamp(0.5rem, 1.5vw, 0.9rem);
  }

  body {
    font-size: 14px;
  }

  .blog-sidebar {
    padding: 0.85rem 0.55rem;
  }

  .blog-site-title {
    font-size: 0.82rem;
    letter-spacing: 0.055em;
  }

  .blog-sidebar-title {
    font-size: 0.62rem;
  }

  .blog-primary-links a,
  .blog-sidebar nav a,
  .blog-sidebar p,
  .blog-sidebar li,
  .blog-entry-title {
    font-size: 0.67rem;
  }

  .blog-entry-date {
    display: none;
  }

  .blog-entry-list {
    padding-left: 1.55rem;
  }

  .tag-cloud {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #content {
    padding-top: 1.6rem;
    padding-bottom: 3rem;
  }
}

@media (max-width: 560px) {
  :root {
    --side-width: 5.8rem;
    --column-gap: 0.45rem;
  }

  body {
    font-size: 13px;
  }

  .blog-sidebar {
    padding-inline: 0.4rem;
  }

  .blog-sidebar-left .blog-sidebar-block:not(.blog-sidebar-block-title) {
    display: none;
  }

  .blog-entry-list {
    list-style: none;
    padding-left: 0;
  }

  .blog-entry-item {
    margin-bottom: 0.5rem;
    padding-left: 0;
  }

  .tag-cloud {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .tag-cloud-item {
    padding: 0.35rem 0.42rem;
  }
}

@media (max-width: 390px) {
  .tag-cloud {
    grid-template-columns: 1fr;
  }
}

/* Final readability override -------------------------------------------------
   Some component-specific selectors assign their normal link colors with
   greater specificity than the general a:hover/a:focus rule.  These final
   declarations intentionally win the cascade so every highlighted link uses
   the same dark-gray foreground, while the rectangle continues to derive its
   hue from that link's --link-color value. */
a:hover,
a:focus,
a[aria-current="page"],
.blog-entry-link-current {
  color: var(--link-highlight-text) !important;
}

/* Apply the same foreground to nested text elements such as tag labels,
   tag counts, post titles, and post dates. */
a:hover *,
a:focus *,
a[aria-current="page"] *,
.blog-entry-link-current * {
  color: var(--link-highlight-text) !important;
}