/* blog.css — custom styling layered on top of tufte.min.css + ox-tufte.css.
   Load order matters: this must come AFTER those two so its overrides win. */

/* Widen the reading column (and shrink the sidenote gutter) by raising
   ox-tufte's content-width. Sidenotes scale off this automatically.
   55% is the Tufte default; ~62% is about as wide as you can go before
   sidenotes reach the right edge. Keep the derived vars in proportion:
     fullwidth = 90 / content ; list-width = content - 5 (padding).
   IMPORTANT: only on wide screens -- below 760px ox-tufte sets these to
   100% so the column goes full-width. This must stay inside the media
   query, or it would override that and keep the text cramped on phones. */
@media (min-width: 761px) {
  :root {
    --ox-tufte-content-width: 60%;
    --ox-tufte-fullwidth: 150%;   /* 90 / 60 */
    --ox-tufte-list-width: 55%;   /* content - list-padding(5%) */
  }
  /* wide screens: notes live in the margin, so hide the bottom list */
  #footnotes { display: none; }
}
/* Small screens: footnotes drop to the section at the bottom of the article
   (not stuffed inline). Explicit margin NOTES have no bottom equivalent, so
   they stay inline. */
@media (max-width: 760px) {
  .sidenote { display: none; }
  input.margin-toggle { display: none; }
  label.sidenote-number { display: inline; }
  #footnotes { display: block; }
  .marginnote {
    display: block; float: none; clear: both;
    width: auto; max-width: 100%; margin: 0.8rem 0; left: 0;
  }
  label.margin-toggle:not(.sidenote-number) { display: none; }
}

/* Footnote reference numbers: use the body font instead of tufte's
   et-book-roman-old-style (its old-style oldstyle-figures face). Covers the
   in-text superscript counter (.sidenote-number:after), the number before a
   sidenote (.sidenote:before), the clickable label, and the numbers in the
   bottom footnotes list (.footnum). */
.sidenote-number:after,
.sidenote:before,
label.sidenote-number,
#footnotes .footnum { font-family: jf-lanyangming, var(--cjk-serif) !important; }

/* Bottom footnotes section (org defaults were removed; give it Tufte-ish look) */
#footnotes {
  margin-top: 3rem; padding-top: 1rem;
  border-top: 1px solid #ccc;
  font-size: 1.1rem; line-height: 1.4;
}
#footnotes h2.footnotes { font-size: 1.2rem; font-style: italic; }
#footnotes .footdef { margin-bottom: .6rem; }
#footnotes .footpara { display: inline; margin: 0; }

/* ---- Fonts -------------------------------------------------------------- */
/* The CJK-serif fallback (Noto Serif, shown while 蘭陽明 loads) inherits the
   body's light 300 weight and looks frail. Alias it to the Medium face so the
   fallback reads heavier. Applies to all weights; doesn't touch 蘭陽明. */
@font-face {
  font-family: "Noto Serif CJK TC";
  font-weight: 100 900;
  src: local("Noto Serif CJK TC Medium"),
       local("NotoSerifCJKtc-Medium"),
       local("Source Han Serif TC Medium"),
       local("Noto Serif CJK TC");
}
/* Spline Sans Mono (variable, 300-700) for code. Defined here with
   format('woff2') because fontsource's own CSS uses the deprecated
   'woff2-variations' hint, which current Firefox/Chrome reject -> font never
   loads. Plain 'woff2' works; browsers auto-detect the weight axis. */
@font-face {
  font-family: "Spline Sans Mono";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/spline-sans-mono@5/files/spline-sans-mono-latin-wght-normal.woff2") format("woff2");
}
:root {
  /* Nice serif CJK fallback (Noto Serif on Linux, Songti on Apple, PMingLiU on
     Windows) instead of the browser's ugly default serif. */
  --cjk-serif: "Noto Serif CJK TC", "Source Han Serif TC", "Songti TC", "Songti SC", "PMingLiU", serif;
  --code-bg: #f6f6f6;                 /* code-block background (light) */
  --ox-tufte-code-font-family: "Spline Sans Mono", Consolas, "Liberation Mono", Menlo, monospace;
  --ox-tufte-code-font-size: 1.2rem;
  --ox-tufte-code-font-size-sans: 1.2rem;
  --ox-tufte-note-code-font-size: 1.05rem;
}
#content, body {
  font-family: jf-lanyangming, var(--cjk-serif);
  font-weight: 300;   /* 蘭陽明 Book (a touch lighter) */
}
/* Headings + article titles: 蘭陽明 for CJK; drop tufte's italic (title + sections). */
#content h1, #content h2, #content h3, #content h4 {
  font-family: jf-lanyangming, var(--cjk-serif);
  font-style: normal;
}

#content h2 {
    margin-top: 1rem;
    font-size: 1.8rem;
}

#content .post-header .post-title {
    font-size: 2.0rem;
}
.post-title { font-style: normal; }
/* Post-page article title (the big h1 at the top of an article). Default is
   tufte's 3.2rem; tweak this value. (Listing titles are set separately below.) */
#content h1.post-title { font-size: 2.0rem; }

/* ---- Colour scheme: light by default, dark only when opted in ----------- */
/* No OS auto-switching: the site is light even on a dark-mode machine. The dark
   theme is kept here as an explicit, reversible fallback -- it activates only
   when something sets <html data-theme="dark"> (a toggle / bookmarklet / by
   hand). To restore OS-driven dark, swap the `[data-theme="dark"]` selectors
   below for `@media (prefers-color-scheme: dark)`.
   Notes: tufte's own dark <body> rule is media-gated, so it stays dormant while
   the OS is dark -- we set the dark body/gutter colours ourselves. The
   [data-theme] selectors outrank the light masthead rules on specificity, so
   their position in the file doesn't matter. */
:root { color-scheme: light; }
html { background-color: #fffff8; overflow-x: hidden; }
body { background-color: #fffff8; color: #111; }

:root[data-theme="dark"] {
  color-scheme: dark;
  background-color: #151515;    /* the <html> gutter */
  --code-bg: #1e1e1e;           /* darker code block */
}
:root[data-theme="dark"] body { background-color: #151515; color: #ddd; }
:root[data-theme="dark"] .site-title a,
:root[data-theme="dark"] .site-title a:visited,
:root[data-theme="dark"] .site-title a:hover,
:root[data-theme="dark"] .site-title a:focus { color: #e6d2b5; }

/* ---- Links -------------------------------------------------------------- */
/* Replace tufte's text-shadow/background underline (smears with CJK) with a
   plain, clean underline. */
a:link, a:visited {
  background: none;
  text-shadow: none;
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}
/* Article titles: no underline (only on hover) */
.post-title a:link, .post-title a:visited { text-decoration: none; }
.post-title a:hover { text-decoration: underline; }

/* ---- Selection ---------------------------------------------------------- */
/* Force one consistent green highlight everywhere. !important overrides tufte's
   blue link selection and the title's yellow one. */
::selection      { background: #16a085 !important; color: #fff !important; text-shadow: none !important; }
::-moz-selection { background: #16a085 !important; color: #fff !important; text-shadow: none !important; }

/* ---- Footer (postamble) ------------------------------------------------- */
#postamble {
  width: var(--ox-tufte-content-width);
  max-width: 100%;
  margin-top: 5rem;
  font-size: 1.1rem;
  color: #888;
}
#postamble hr { border: none; border-top: 1px solid #ccc; margin: 0 0 0.8rem; }
#postamble a { color: inherit; }

/* ---- Layout fixes ------------------------------------------------------- */
/* Space between the nav/header and the content. tufte sets article{padding:5rem 0};
   lower this to tighten the gap (applies to the index listing and post pages). */
#content { padding-top: 3rem; }
/* Long unbreakable strings (bare URLs as link text) wrap instead of overflowing. */
#content, .sidenote, .marginnote, #footnotes { overflow-wrap: break-word; }
/* Post title/date/tags are direct children of <article>, which ox-tufte's width
   rules don't reach -- constrain them to the reading column. */
#content > .post-title,
#content > .post-date,
#content > .taglist { width: var(--ox-tufte-content-width); }
/* Split line under the post-page date (before the article body), matching the
   line under the "All Posts" heading (#content h1.title). Scoped to the direct
   child so it doesn't touch the listing dates inside .post-header. */
#content > .post-date {
  max-width: 100%;
  border-bottom: 2px solid #ccc;
  padding-bottom: 0.4rem;
  margin-bottom: 1.0rem;
  margin-top: 1.5rem;
}
/* Wide tables size to content, cap at the column, and scroll if wider. */
#content table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
}
/* ox-tufte widens code containers to 150% (breaks out of the column) which
   overflows + gets clipped by html{overflow-x:hidden}. Cap + scroll instead. */
#content .org-src-container { width: 100%; max-width: 100%; }
#content pre {
  overflow-x: auto;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--code-bg);
  padding: 0.9rem 1.2rem;
  border-radius: 4px;
}
/* Spline Sans Mono a touch lighter for code (variable font -> true 350) */
#content pre, #content code { font-weight: 350; }

/* ---- Lists -------------------------------------------------------------- */
/* Square bullets for unordered lists (tufte's default is a round disc).
   Top level: filled square; nested (2nd level and deeper): hollow square.
   The nested marker is a string literal (no keyword exists for a hollow
   square) -- the trailing spaces set the gap before the text. */
#content ul { list-style-type: square; }
#content ul ul { list-style-type: "▫  "; }

/* ---- Article listing (index / archive) ---------------------------------- */
/* Split line under list-page headings ("All Posts", "Tags"). */
#content h1.title {
  width: var(--ox-tufte-content-width);
  font-size: 2.5rem;
  max-width: 100%;
  border-bottom: 2px solid #ccc;
  margin-top: 3rem;
  padding-bottom: 0.4rem;
  margin-bottom: 3rem;
}
/* Title on the left with a dotted leader, date right-aligned on the same line,
   kept within the reading measure so the line clears the sidenote gutter. */
#content .post-header {
  display: flex;
  align-items: baseline;       /* fallback */
  align-items: last baseline;  /* date sits on the title's LAST line when wrapped */
  width: var(--ox-tufte-content-width);
  max-width: 100%;
  gap: 0.6rem;                 /* space between the leader line and the date */
  margin: 1.8rem 0 0.2rem;
}
#content .post-header .post-title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;                        /* let long titles wrap */
  border-bottom: 1px dotted #b0b0b0;   /* the leader line, ends at the date */
  padding-bottom: 0.15rem;
}
#content .post-header .post-date {
  flex: 0 0 8rem;         /* fixed-width column (rem, not em -> predictable on
                             mobile) so every leader line ends at the same x */
  text-align: right;
  white-space: nowrap;
  font-size: 1.2rem;
  font-weight: 400;
  color: #888;
}

/* ---- Masthead + nav (matches the old pandoc blog) ----------------------- */
.site-title { margin: 1rem 0 0.3rem; }
.site-title a {
  font-family: jf-lanyangming, var(--cjk-serif);
  font-size: 3.5rem;
  font-weight: 300;
  color: #772e0d;
  text-decoration: none;
  line-height: 1.1;
}
/* Flat: the masthead title keeps its rust colour in every state (no hover/visited shift). */
.site-title a:visited, .site-title a:hover, .site-title a:focus { color: #772e0d; outline: 0; }
.site-title a::selection { background: rgba(255, 255, 0, 0.3); color: #000; }
#page-nav { font-size: 1.7rem; font-weight: bold; margin: 1rem 0 0 0; }
#page-nav a { font-weight: initial; text-decoration: underline; color: inherit; }
#page-nav a:first-child { margin-left: 0; }

/* footnote numbers are clickable (see the script in header.html) */
label.sidenote-number { cursor: pointer; }
.sidenote-flash { background-color: rgba(255, 214, 82, 0.55); border-radius: 2px; }