/* =========================================
   FONTS
   @font-face tells the browser where to find
   each font file and what weight/style it is.
   ========================================= */

@font-face {
    font-family: 'Charter';
    src: url('../fonts/charter/charter_regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Charter';
    src: url('../fonts/charter/charter_italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Charter';
    src: url('../fonts/charter/charter_bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Charter';
    src: url('../fonts/charter/charter_bold_italic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Zhuque Fangsong';
    src: url('../fonts/zhuque-fangsong/ZhuqueFangsong-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('../fonts/ibm-plex-mono/IBMPlexMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('../fonts/ibm-plex-mono/IBMPlexMono-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('../fonts/ibm-plex-mono/IBMPlexMono-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('../fonts/ibm-plex-mono/IBMPlexMono-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'LXGW WenKai Mono TC';
    src: url('../fonts/lxgw-wenkai-mono/LXGWWenKaiMonoTC-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'LXGW WenKai Mono TC';
    src: url('../fonts/lxgw-wenkai-mono/LXGWWenKaiMonoTC-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'LXGW WenKai Mono TC';
    src: url('../fonts/lxgw-wenkai-mono/LXGWWenKaiMonoTC-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'LXGW WenKai TC';
    src: url('../fonts/lxgw-wenkai-tc/LXGWWenKaiTC-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'LXGW WenKai TC';
    src: url('../fonts/lxgw-wenkai-tc/LXGWWenKaiTC-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'LXGW WenKai TC';
    src: url('../fonts/lxgw-wenkai-tc/LXGWWenKaiTC-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}


/* =========================================
   VARIABLES
   define fonts and colors in one place.
   change here and it applies everywhere.
   ========================================= */
:root {
    --body-font: 'Charter', 'Zhuque Fangsong', serif;
    --code-font: 'IBM Plex Mono', 'LXGW WenKai Mono TC', monospace;

    --color-text: #1a1a1a;
    /* near-black, easier on eyes than pure black */
    --color-muted: #888;
    /* for secondary text */
    --color-rule: #d0d0d0;
    /* for hr lines */
    --color-bg: #fafaf8;
    /* warm off-white background */
    --color-hover: #fef2f2;
    --color-code-bg: #f0f0ee;
    --color-selection: #e4f2de;
}

/* =========================================
   FLUID FONT SIZE
   font-size on html scales with screen width (vw).
   everything using rem scales proportionally with it.
   capped at 22px on wide screens, 17px on small.
   ========================================= */
html {
    font-size: 2.2vw;
    background: var(--color-bg);
}

@media (min-width: 1000px) {
    html {
        font-size: 22px;
    }
}

@media (max-width: 520px) {
    html {
        font-size: 17px;
    }
}

/* =========================================
   BODY
   centered, max width to keep lines readable.
   antialiasing makes fonts look sharper on mac.
   ========================================= */
body {
    font-family: var(--body-font);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    max-width: 1000px;
    margin: 0 auto;
    -webkit-font-smoothing: antialiased;
}

/* =========================================
   CONTENT AREA
   large left margin creates a gutter — like a
   book margin. content reads in a narrower column
   on the right side of the page.
   ========================================= */
.content {
    margin-left: 10rem;
    margin-right: 3rem;
    padding-top: 4rem;
    padding-bottom: 14rem;
}

/* on small screens, collapse the gutter to equal margins */
@media (max-width: 520px) {
    .content {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
        padding-top: 2rem;
        padding-bottom: 5rem;
    }
}

/* =========================================
   HEADINGS
   h1 is the page title — larger, bold.
   h2 / h3 / h4 are section titles — same size
   as body, bold, differentiated only by the
   amount of top space (less space = deeper).
   keeping them close in size to the body text
   creates a calm, integrated look.
   ========================================= */
h1, h2, h3, h4 {
    font-family: var(--body-font);
    font-weight: 700;
    color: var(--color-text);
}

h1 {
    font-size: 1.5rem;
    line-height: 1.2;
    margin: 0 0 0.25rem 0;
}

h2, h3, h4 {
    font-size: 1rem;
    line-height: 1.3;
}

h2 { margin: 2.5rem 0 0.25rem 0; }
h3 { margin: 1.5rem 0 0.25rem 0; }
h4 { margin: 1rem 0 0.25rem 0; }

/* =========================================
   HORIZONTAL RULE
   used after headings as an underline, and
   also at the bottom as a section divider.
   h1 + hr and h2 + hr target specifically the
   hr that immediately follows a heading.
   ========================================= */
hr {
    border: none;
    border-top: 1px solid var(--color-rule);
    margin: 1.5rem 0;
}

/* hr right after a heading — tighter, acts as underline */
h1+hr,
h2+hr {
    margin-top: 0.35rem;
    margin-bottom: 1rem;
}

/* =========================================
   PARAGRAPHS
   ========================================= */
p {
    margin: 0 0 0.85em 0;
}

/* =========================================
   LINKS
   inherit text color so they blend in.
   a thin bottom border acts as a subtle underline.
   hover adds a warm tint background.
   ========================================= */
a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--color-rule);
    transition: background 0.15s, border-color 0.15s;
}

a:hover {
    background: var(--color-hover);
    border-bottom-color: var(--color-muted);
    border-radius: 3px;
}

/* =========================================
   NAV (back link on subpages)
   smaller, muted, no underline border.
   ========================================= */
nav {
    margin-bottom: 2.5rem;
}

nav a {
    font-size: 0.85rem;
    color: var(--color-muted);
    border-bottom: none;
    letter-spacing: 0.03em;
}

nav a:hover {
    color: var(--color-text);
    background: none;
}

/* =========================================
   BLOCKQUOTE
   ========================================= */
blockquote {
    font-family: 'Charter', 'LXGW WenKai TC', serif;
    font-size: 0.9rem;
    border-left: 2px solid var(--color-rule);
    padding: 0 1rem;
    margin: 1em 0 1em 0;
    color: var(--color-muted);
}

/* =========================================
   CODE
   monospace font, subtle background to
   distinguish it from body text.
   ========================================= */

code,
pre {
    font-family: var(--code-font);
    font-size: 0.87rem;
    line-height: 1.5;
    background: var(--color-code-bg);
    border-radius: 3px;
}

/* inline code */
:not(pre) > code {
    padding: 0.1em 0.35em;
}

/* fenced code blocks: no wrap, horizontal scroll */
pre {
    overflow-x: auto;
    padding: 0.75em 1em;
    border-radius: 3px;
}

pre > code {
    display: block;
    white-space: pre;
    min-width: max-content;
    padding: 0;
    background: none;
    border-radius: 0;
}

/* =========================================
   CJK / LATIN SPACING
   1/4 em gap between Chinese characters and Latin letters or digits.
   ========================================= */
.cjk-gap {
    display: inline-block;
    width: 0.25em;
}

/* =========================================
   IMAGES
   portrait images are capped in height so they
   don't dominate the page; centered in the column.
   ========================================= */
img {
    display: block;
    margin: 0 auto;
    max-width: 68%;
    max-height: 55vh;
    width: auto;
    height: auto;
    border-radius: 10px;
}

/* =========================================
   Selection
   light mint;
   ========================================= */

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