/* ==========================================================================
   westie.blog — base styles, loaded on every page.
   Same family as juncheng.page: the colour variables, font sizes, tag box,
   dashed separators and footer are taken from its style.css.
   No frameworks. To change the look, start with the variables in :root.

   Other stylesheets (posts only):  prose.css      article typography
                                    highlight.css  code colours
   ========================================================================== */

/* === Fonts =============================================================== */

/* Noto Sans, Latin subset, served from /fonts/ (no font CDN). Chinese text
   uses the reader's system font, listed in --font-sans below. */
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/noto-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/noto-sans-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/noto-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/noto-sans-latin-700-normal.woff2") format("woff2");
}

/* Noto Sans Mono for code. Chosen over the system fonts because Menlo
   (macOS) draws "*" as a centred six-pointed star and "-" as a long dash,
   which read like maths symbols. Browsers only download this file on
   pages that actually contain code. */
@font-face {
  font-family: "Noto Sans Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/noto-sans-mono-latin-400-normal.woff2") format("woff2");
}

/* === Variables ========================================================== */

/* Layout and type tokens. Override theme.css colour variables here for dark mode. */
:root {
  /* Colours are generated in theme.css from src/_data/theme.json. */

  /* Reusable spacing scale; pixel sizes preserve the existing layout. */
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-26: 26px;
  --space-28: 28px;
  --space-30: 30px;
  --space-32: 32px;
  --space-44: 44px;
  --space-48: 48px;

  /* Fonts */
  --font-sans:
    "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC",
    "Microsoft YaHei", sans-serif;
  --font-mono: "Noto Sans Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Font sizes, in rem: relative to the base size set on <html> below. */
  --fs-xs: 0.8rem; /* tags, badges */
  --fs-sm: 0.87rem; /* dates, meta lines, footer */
  --fs-md: 0.95rem; /* summaries, navigation */
  --fs-h2: 1.25rem; /* section titles */
  --fs-title: 1.15rem; /* post titles in lists */
  --fs-intro: 1.07rem;
  --fs-year: 1.1rem;
  --fs-brand: 1.7rem;
  --fs-prose: 1.0625rem; /* Chinese: 17px */
  --fs-prose-en: 1.125rem; /* English: 18px */
  --fs-prose-h2: 1.2rem;
  --fs-prose-h3: 1.05rem;
  --fs-code-block: 0.95rem;
  --fs-h1: 2rem; /* post title on its own page */

  /* The one content width. Header, text, previous/next and footer all use
     it, so every block lines up left and right. 45rem = 720px.
     Article font sizes are language-specific; see --fs-prose above. */
  --measure: 45rem;
  --gutter: var(--space-24); /* left/right page padding (16px on phones) */
}

/* === Base =============================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
}

a {
  color: var(--color-link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Keyboard focus: always clearly visible */
:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

p {
  margin: 0 0 0.6em;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
img {
  max-width: 100%;
  height: auto;
}

/* Code: Noto Sans Mono, then the system monospace fonts. Ligatures and
   contextual alternates are switched off so that * - > etc. always show
   as typed, never joined into arrows or other symbols. */
code,
pre,
kbd,
samp {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
  font-feature-settings:
    "liga" 0,
    "calt" 0;
}

/* Inline SVG icons (_includes/icons/): sized and coloured like the text
   around them. */
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

/* <details>/<summary> toggle: no default triangle, pointer cursor */
summary {
  list-style: none;
  cursor: pointer;
}
summary::-webkit-details-marker {
  display: none;
}

/* Visually hidden but read by screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* "Skip to content": off-screen until it receives keyboard focus */
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -4em;
  padding: var(--space-6) var(--space-10);
  background: var(--color-bg);
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  font-weight: 600;
}
.skip-link:focus {
  top: 8px;
}

/* === Shared building blocks ============================================ */

/* Header, content and footer share the same centred frame */
.site-header,
.site-main,
.site-footer {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Section title: dark red, bold, hairline underneath (h2 on juncheng.page) */
.section-title {
  margin: 0 0 var(--space-12);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-accent);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.4;
}
/* Dates: italic, never broken across lines. Chinese dates stay upright —
   CJK fonts have no italic and the browser's fake slant looks wrong. */
.date {
  font-style: italic;
  white-space: nowrap;
}
.date:lang(zh) {
  font-style: normal;
}

.sep {
  margin: 0 0.15em;
  color: var(--color-muted);
}

/* Tag: thin dark-red box, like the venue tag ("CVPR 2026") on juncheng.page */
a.tag {
  display: inline-block;
  padding: var(--space-3) var(--space-6); /* height comes from padding, not line-height */
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
}
a.tag:hover {
  background: var(--color-accent);
  color: var(--color-bg);
  text-decoration: none;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

/* Category mark: Notes / (paw) Life */
.category {
  font-weight: 600;
}

/* Drafts (local preview only) */
.draft-badge {
  display: inline-block;
  margin-left: 0.3em;
  padding: var(--space-3) var(--space-6);
  background: var(--color-accent);
  color: var(--color-bg);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
  vertical-align: 0.15em;
}
.draft-banner {
  margin: 0 0 var(--space-20);
  padding: var(--space-8) var(--space-12);
  border: 2px dashed var(--color-accent);
  color: var(--color-accent);
  font-weight: 700;
}

/* === Header ============================================================= */

.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-6) var(--space-24);
  padding-top: var(--space-32);
  padding-bottom: var(--space-28);
}

.site-title {
  color: var(--color-name);
  font-size: var(--fs-brand);
  font-weight: 700;
  line-height: 1.15;
}
.site-title:hover {
  text-decoration: none;
}
/* Paw after the title (icons/paw.svg), in the accent colour like the
   favicon and the social cards */
.site-mark {
  margin-left: 0.05em;
  color: var(--color-accent);
  font-size: 0.8em;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-18);
}
.site-nav a {
  font-size: var(--fs-md);
  font-weight: 600;
}
.site-nav a[aria-current="page"] {
  color: var(--color-accent);
}

/* EN / 中文 */
.lang-switch {
  padding-left: var(--space-18);
  border-left: 1px solid var(--color-rule);
  font-size: var(--fs-md);
  white-space: nowrap;
}
.lang-current {
  color: var(--color-text);
  font-weight: 700;
}
.lang-sep {
  color: var(--color-muted);
}

/* === Home / list pages ================================================== */

.intro {
  margin: 0 0 var(--space-30);
  font-size: var(--fs-intro);
}
/* Links inside a sentence are underlined, as in article text */
.intro a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.page-intro {
  margin: 0 0 var(--space-6);
  color: var(--color-muted);
  font-size: var(--fs-md);
}

/* One post: title, meta line, summary; dashed line between posts */
.post-item {
  padding: var(--space-12) 0 var(--space-14);
}
.post-item + .post-item {
  border-top: 1px dashed var(--color-rule);
}

.post-item-title {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1.4;
}
.post-item-title a {
  color: var(--color-name);
}

.post-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin: 0 0 var(--space-4);
  color: var(--color-muted);
  font-size: var(--fs-sm);
}
.post-item-meta .category + .tag {
  margin-left: var(--space-6);
}

.post-item-summary {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--fs-md);
}

.more-link {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-20);
  margin: 0;
  padding-top: var(--space-10);
  border-top: 1px dashed var(--color-rule);
  font-size: var(--fs-md);
  font-weight: 600;
}

.empty {
  padding: var(--space-12) 0;
  color: var(--color-muted);
}

/* --- Archive: tag overview, then posts under year headings */
.tag-cloud {
  margin: var(--space-4) 0 var(--space-26);
  gap: var(--space-8) var(--space-14);
}
.tag-count {
  color: var(--color-muted);
  font-size: var(--fs-xs);
}

.year-group {
  margin-bottom: var(--space-22);
}
.year-title {
  margin: 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-name);
  font-size: var(--fs-year);
  font-weight: 700;
}

/* === Post page: header, contents, previous / next ====================== */
/* (The article text itself is styled in prose.css.) */

.post-header {
  margin-bottom: var(--space-24);
}

/* Title and meta line sit close together: they read as one group */
.post-header h1 {
  margin: 0 0 var(--space-6);
  color: var(--color-name);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.25;
}

/* date · reading time · category · tags · translation — wraps as needed.
   Each item draws a "·" in its own left padding. The whole line is shifted
   left by that padding and the strip is clipped away, so the first item of
   every row shows no dot: rows never start or end with a stray "·". */
.post-meta {
  --meta-gap: 1.1em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--space-4);
  margin: 0 0 0 calc(-1 * var(--meta-gap));
  clip-path: inset(-4px -4px -4px var(--meta-gap));
  color: var(--color-muted);
  font-size: var(--fs-sm);
}
.meta-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding-left: var(--meta-gap);
}
.meta-item::before {
  content: "·";
  position: absolute;
  left: calc(var(--meta-gap) / 2 - 0.15em);
}

.translation-link {
  font-weight: 600;
}

/* Table of contents (long posts only): folded until clicked */
.toc {
  margin: 0 0 var(--space-24);
  font-size: var(--fs-md);
}
.toc > summary {
  display: inline-block;
  color: var(--color-link);
  font-weight: 600;
}
.toc > summary:hover {
  text-decoration: underline;
}
.toc > summary::before {
  content: "▸ ";
}
.toc[open] > summary::before {
  content: "▾ ";
}
.toc ol {
  margin-top: var(--space-6);
  padding: var(--space-8) 0 var(--space-10) 1.1em;
  border-top: 1px dashed var(--color-rule);
  border-bottom: 1px dashed var(--color-rule);
}
.toc li {
  padding: 1px 0;
}
.toc .toc-h3 {
  padding-left: 1.4em;
}

/* ← Previous        Next → */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  margin-top: var(--space-44);
  padding-top: var(--space-14);
  border-top: 1px solid var(--color-rule);
}
.post-nav a {
  display: block;
}
.post-nav a:hover {
  text-decoration: none;
}
.post-nav a:hover .post-nav-title {
  text-decoration: underline;
}
.post-nav-next {
  grid-column: 2;
  text-align: right;
}
.post-nav-label {
  display: block;
  color: var(--color-muted);
  font-size: var(--fs-sm);
}
.post-nav-title {
  font-weight: 600;
}

/* === Footer ============================================================= */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4) var(--space-16);
  margin-top: var(--space-48);
  padding-bottom: var(--space-32);
  color: var(--color-muted);
  font-size: var(--fs-sm);
}

/* Full-width hairline above the footer */
.site-footer::before {
  content: "";
  flex-basis: 100%;
  margin-bottom: var(--space-10);
  border-top: 1px solid var(--color-rule);
}

/* X  RSS  Academic homepage — one row, semi-bold */
.link-list {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-14);
  row-gap: var(--space-2);
}
.link-list a {
  font-weight: 600;
}

.copyright {
  margin: 0;
}

/* === Narrow screens (≤ 640px) =========================================== */

@media (max-width: 640px) {
  :root {
    --gutter: var(--space-16);
    --fs-h1: 1.6rem;
    --fs-brand: 1.45rem;
    --fs-code-block: 0.85rem;
  }
  .site-header {
    padding-top: var(--space-22);
    padding-bottom: var(--space-22);
  }
  .site-nav ul {
    column-gap: var(--space-14);
  }
  .lang-switch {
    padding-left: var(--space-14);
  }

  .post-nav {
    grid-template-columns: 1fr;
  }
  .post-nav-next {
    grid-column: 1;
    text-align: left;
  }
}

/* === Motion ============================================================= */

/* The site has no animation of its own; this also quiets anything a
   browser or a future change might add. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}