/* 纸面阅读风格；所有页面共用排版与导航，窄屏按内容顺序排列。 */
:root {
    color-scheme:light;
    --paper:#f8f7f2;
    --ink:#242b29;
    --muted:#656d67;
    --line:#dcded5;
    --accent:#b8482d;
    --green:#314a3f;
    --soft:#edeee7;
    --serif:"Noto Serif SC","Source Han Serif SC","Songti SC","SimSun",serif;
    --sans:Inter,"Segoe UI","Microsoft YaHei",sans-serif
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:32px
}
body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    font-size:16px;
    line-height:1.8;
    -webkit-font-smoothing:antialiased
}
a {
    color:inherit;
    text-decoration:none
}
a:hover {
    color:var(--accent)
}
a:focus-visible {
    outline:3px solid var(--accent);
    outline-offset:6px
}
::selection {
    background:#ead5c5
}
img,svg {
    max-width:100%
}
h1,h2,h3,p {
    margin:0
}
h1,h2,h3 {
    line-height:1.4
}
h1,h2 {
    font-weight:600
}
section[id] {
    scroll-margin-top:28px
}
.wrap {
    width:min(1180px,calc(100% - 96px));
    margin-inline:auto
}
.skip {
    position:absolute;
    top:-100px;
    left:20px;
    background:var(--ink);
    color:white;
    padding:8px 20px;
    z-index:10
}
.skip:focus {
    top:12px
}
.site-header {
    border-bottom:1px solid var(--line)
}
.header-inner {
    min-height:104px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px
}
.brand {
    display:flex;
    align-items:center;
    gap:13px
}
.brand-mark {
    width:39px;
    height:39px;
    display:grid;
    place-items:center;
    background:var(--green);
    color:var(--paper);
    font-family:var(--serif);
    font-size:25px;
    line-height:1;
    transform:rotate(-3deg)
}
.brand-name {
    font-family:var(--serif);
    font-weight:700;
    font-size:23px;
    letter-spacing:3px
}
.brand-en {
    display:block;
    color:var(--muted);
    font-size:9px;
    line-height:1.6;
    letter-spacing:3px
}
.nav {
    display:flex;
    gap:34px;
    font-size:14px
}
.nav a {
    padding-block:8px
}
.nav .active {
    color:var(--accent)
}
.eyebrow,.kicker {
    font-size:11px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase
}
.eyebrow {
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--muted)
}
.eyebrow:before {
    content:"";
    width:25px;
    height:1px;
    background:var(--accent)
}
.hero {
    display:grid;
    grid-template-columns:1.23fr 1fr;
    gap:48px;
    align-items:center;
    padding-block:76px 72px
}
.hero h1 {
    font-family:var(--serif);
    font-size:clamp(38px,4.1vw,57px);
    letter-spacing:1px;
    line-height:1.55;
    margin-top:24px
}
.hero h1 span {
    color:var(--accent)
}
.hero-copy>p {
    max-width:510px;
    color:var(--muted);
    font-size:15px;
    line-height:2.1;
    margin-top:24px
}
.hero-actions {
    display:flex;
    align-items:center;
    gap:28px;
    margin-top:34px;
    font-size:14px
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:36px;
    padding:12px 22px;
    background:var(--green);
    color:white;
    border:1px solid var(--green)
}
.button:hover {
    background:#23392f;
    color:white
}
.text-link {
    display:inline-flex;
    align-items:center;
    gap:14px
}
.arrow {
    font-family:var(--sans);
    font-size:19px
}
.hero-visual {
    position:relative;
    padding:19px 0 4px
}
.blueprint {
    width:100%;
    height:auto;
    display:block
}
.visual-caption {
    display:flex;
    justify-content:space-between;
    font-size:10px;
    letter-spacing:1.5px;
    color:var(--muted);
    border-top:1px solid var(--line);
    padding-top:14px;
    margin:0 24px
}
.topic-strip {
    display:flex;
    gap:24px;
    align-items:center;
    border-block:1px solid var(--line);
    padding-block:17px;
    color:var(--muted);
    font-size:12px
}
.topic-strip .label {
    margin-right:auto;
    color:var(--ink);
    font-size:11px;
    letter-spacing:2px
}
.topic-strip .dot {
    color:#b3b8ae
}
.section {
    padding-block:70px
}
.section-head {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:28px;
    margin-bottom:35px
}
.section-label {
    display:block;
    font-size:10px;
    letter-spacing:2.5px;
    color:var(--accent);
    margin-bottom:9px
}
.section-head h2,.about h2 {
    font-family:var(--serif);
    font-size:30px;
    letter-spacing:2px
}
.section-head p {
    font-size:13px;
    color:var(--muted)
}
.note-grid {
    display:grid;
    grid-template-columns:1.25fr 1fr 1fr;
    border-block:1px solid var(--line)
}
.note {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:31px 27px 29px;
    min-width:0;
    border-left:1px solid var(--line)
}
.note:first-child {
    padding-left:0;
    border-left:0
}
.note:last-child {
    padding-right:0
}
.note-number {
    font-family:Georgia,serif;
    font-size:30px;
    font-style:italic;
    color:#a0a79c;
    line-height:1
}
.note-tags {
    font-size:10px;
    color:var(--muted);
    letter-spacing:1px;
    margin-block:24px 14px
}
.note h3 {
    font-family:var(--serif);
    font-size:22px;
    font-weight:600;
    line-height:1.7
}
.note>p {
    font-size:13px;
    color:var(--muted);
    line-height:1.9;
    margin-top:14px;
    margin-bottom:27px
}
.note .text-link {
    font-size:12px;
    margin-top:auto;
    gap:26px;
    color:var(--accent)
}
.projects {
    padding-top:16px
}
.project-list {
    border-top:1px solid var(--line)
}
.project {
    display:grid;
    grid-template-columns:42px 1.25fr 1.5fr 140px;
    align-items:start;
    gap:24px;
    padding-block:28px;
    border-bottom:1px solid var(--line)
}
.project-index {
    font-size:11px;
    color:var(--muted);
    padding-top:7px
}
.project h3 {
    font-family:var(--serif);
    font-size:21px
}
.project .project-en {
    font-size:10px;
    letter-spacing:1px;
    color:var(--muted);
    margin-top:7px
}
.project p {
    font-size:13px;
    line-height:1.9;
    color:var(--muted);
    padding-top:3px
}
.project .stack {
    font-size:10px;
    color:var(--green);
    text-align:right;
    line-height:2;
    padding-top:5px
}
.about {
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:60px;
    margin-top:68px;
    padding:38px 42px;
    background:var(--soft)
}
.about h2 {
    font-size:26px
}
.about .section-label {
    margin-bottom:13px
}
.about-text {
    font-size:14px;
    line-height:2;
    color:#4e5850
}
.about-text p+p {
    margin-top:13px
}
.about-small {
    font-size:12px;
    color:var(--muted)
}
.site-footer {
    margin-top:70px;
    border-top:1px solid var(--line)
}
.footer-inner {
    padding-block:27px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:25px;
    color:var(--muted);
    font-size:11px
}
.footer-brand {
    font-family:var(--serif);
    color:var(--ink);
    font-size:15px;
    letter-spacing:2px
}
.footer-meta {
    display:flex;
    align-items:center;
    gap:24px
}
.footer-meta a {
    font-size:11px
}
.article-shell {
    display:grid;
    grid-template-columns:180px minmax(0,760px);
    gap:55px;
    max-width:1000px;
    margin-inline:auto;
    padding-top:53px
}
.article-side {
    font-size:12px;
    color:var(--muted)
}
.back {
    display:inline-flex;
    gap:12px;
    align-items:center;
    margin-bottom:35px;
    color:var(--ink)
}
.article-side nav {
    position:sticky;
    top:32px;
    border-top:1px solid var(--line);
    padding-top:20px;
    display:grid;
    gap:12px
}
.article-side .kicker {
    font-size:10px;
    margin-bottom:7px
}
.article-header {
    padding-bottom:30px;
    border-bottom:1px solid var(--line)
}
.article-header h1 {
    font-family:var(--serif);
    font-size:38px;
    line-height:1.65;
    margin-block:19px
}
.article-intro {
    font-size:16px;
    color:var(--muted);
    line-height:2
}
.article-meta {
    display:flex;
    gap:20px;
    align-items:center;
    font-size:11px;
    color:var(--muted);
    margin-top:22px
}
.article-content {
    font-size:16px;
    line-height:2.15
}
.article-content h2 {
    font-family:var(--serif);
    font-size:25px;
    line-height:1.65;
    padding-top:35px;
    margin-bottom:16px
}
.article-content p {
    margin-block:16px
}
.article-content ul,.article-content ol {
    padding-left:24px;
    margin-block:16px
}
.article-content li {
    padding-left:4px;
    margin-block:10px
}
.article-content strong {
    font-weight:600;
    color:var(--green)
}
.article-content code {
    font-family:Consolas,monospace;
    font-size:.88em;
    background:#eaece4;
    padding:3px 5px;
    overflow-wrap:anywhere
}
.article-content a {
    color:var(--accent);
    text-decoration:underline;
    text-underline-offset:4px
}
.callout {
    border-left:3px solid var(--accent);
    background:var(--soft);
    padding:17px 23px;
    margin-block:26px;
    font-size:14px
}
.flow {
    display:flex;
    align-items:stretch;
    gap:9px;
    margin-block:25px;
    font-size:12px;
    line-height:1.8
}
.flow>span {
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    flex:1;
    padding:14px 9px;
    background:var(--soft);
    border:1px solid var(--line)
}
.flow>b {
    display:flex;
    align-items:center;
    font-weight:400;
    color:var(--accent)
}
.article-table {
    width:100%;
    border-collapse:collapse;
    font-size:13px;
    line-height:1.9;
    margin-block:22px
}
.article-table th,.article-table td {
    padding:13px 14px;
    text-align:left;
    border-bottom:1px solid var(--line);
    vertical-align:top
}
.article-table th {
    background:var(--soft);
    font-weight:600
}
.article-end {
    margin-top:40px;
    border-top:1px solid var(--line);
    padding-top:23px;
    display:flex;
    justify-content:space-between;
    gap:24px;
    font-size:13px
}
.error-page {
    padding-block:100px;
    min-height:60vh
}
.error-page .error-number {
    font-family:Georgia,serif;
    font-size:90px;
    color:var(--accent);
    line-height:1
}
.error-page h1 {
    font-family:var(--serif);
    font-size:32px;
    margin-block:28px 15px
}
.error-page p {
    color:var(--muted);
    margin-bottom:28px
}
@media(min-width:1500px) {
    .hero {
        padding-block:92px 88px
    }
    .hero h1 {
        font-size:60px
    }
}
@media(max-width:1000px) {
    .wrap {
        width:calc(100% - 64px)
    }
    .hero {
        gap:24px;
        padding-block:58px
    }
    .hero h1 {
        font-size:39px
    }
    .note-grid {
        grid-template-columns:1fr 1fr 1fr
    }
    .note {
        padding-inline:20px
    }
    .note h3 {
        font-size:20px
    }
    .project {
        grid-template-columns:26px 1fr 1.3fr;
        gap:18px
    }
    .project .stack {
        grid-column:3;
        text-align:left;
        padding:0;
        margin-top:-14px
    }
    .article-shell {
        grid-template-columns:140px minmax(0,1fr);
        gap:30px
    }
    .article-header h1 {
        font-size:32px
    }
    .topic-strip {
        gap:16px
    }
}
@media(max-width:720px) {
    .wrap {
        width:calc(100% - 40px)
    }
    .header-inner {
        min-height:88px;
        gap:14px
    }
    .brand-name {
        font-size:19px;
        letter-spacing:2px
    }
    .brand-mark {
        width:32px;
        height:32px;
        font-size:22px
    }
    .brand {
        gap:10px
    }
    .brand-en {
        font-size:8px;
        letter-spacing:2px
    }
    .nav {
        gap:18px;
        font-size:12px
    }
    .nav a:last-child {
        display:none
    }
    .hero {
        grid-template-columns:1fr;
        padding-block:44px 37px;
        gap:15px
    }
    .hero h1 {
        font-size:36px;
        line-height:1.7;
        letter-spacing:0
    }
    .hero-copy>p {
        font-size:14px;
        margin-top:18px
    }
    .hero-actions {
        margin-top:25px;
        gap:24px
    }
    .hero-visual {
        max-width:420px;
        margin:15px auto 0;
        width:100%
    }
    .blueprint {
        max-height:275px
    }
    .visual-caption {
        font-size:9px;
        margin-inline:10px
    }
    .topic-strip {
        flex-wrap:wrap;
        gap:6px 18px;
        padding-block:15px;
        font-size:11px
    }
    .topic-strip .label {
        flex-basis:100%;
        margin:0 0 4px
    }
    .topic-strip .dot {
        display:none
    }
    .section {
        padding-block:45px
    }
    .section-head {
        align-items:start;
        margin-bottom:24px;
        gap:14px
    }
    .section-head h2 {
        font-size:26px
    }
    .section-head p {
        max-width:155px;
        font-size:11px;
        text-align:right;
        padding-top:20px
    }
    .note-grid {
        grid-template-columns:1fr
    }
    .note,.note:first-child,.note:last-child {
        padding:26px 0;
        border-left:0;
        min-height:0
    }
    .note+.note {
        border-top:1px solid var(--line)
    }
    .note-number {
        font-size:24px
    }
    .note-tags {
        margin-block:16px 8px
    }
    .note h3 {
        font-size:23px
    }
    .note>p {
        margin-block:10px 18px
    }
    .note .text-link {
        gap:30px
    }
    .project {
        grid-template-columns:24px 1fr;
        gap:9px 12px;
        padding-block:24px
    }
    .project h3 {
        font-size:21px
    }
    .project p {
        grid-column:2
    }
    .project .stack {
        grid-column:2;
        text-align:left;
        margin:0
    }
    .about {
        grid-template-columns:1fr;
        padding:26px 22px;
        gap:20px;
        margin-top:43px
    }
    .about h2 {
        font-size:25px
    }
    .about-text {
        font-size:13px
    }
    .site-footer {
        margin-top:44px
    }
    .footer-inner {
        align-items:start;
        flex-direction:column;
        gap:13px;
        padding-block:24px
    }
    .footer-meta {
        flex-wrap:wrap;
        gap:8px 20px;
        font-size:10px
    }
    .article-shell {
        display:block;
        padding-top:28px
    }
    .article-side .back {
        margin-bottom:24px
    }
    .article-side nav {
        display:none
    }
    .article-header h1 {
        font-size:29px;
        line-height:1.65;
        margin-block:15px
    }
    .article-intro {
        font-size:15px
    }
    .article-content {
        font-size:15px
    }
    .article-content h2 {
        font-size:23px;
        padding-top:24px
    }
    .flow {
        flex-direction:column;
        gap:6px
    }
    .flow>span {
        padding:12px
    }
    .flow>b {
        justify-content:center;
        transform:rotate(90deg);
        line-height:1
    }
    .article-table th,.article-table td {
        padding:10px 8px
    }
    .article-end {
        flex-direction:column;
        gap:10px
    }
    .error-page {
        padding-block:65px
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
}