@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=Noto+Sans+SC:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;1,500&display=swap');

:root {
    --ink: #263745;
    --muted: #75818a;
    --paper: #f8f7f2
}

* {
    box-sizing: border-box
}

body {
    background: linear-gradient(150deg, #ecf7f7, #f8f7f2 55%, #d9edf0);
    color: var(--ink);
    font-family: "Noto Sans SC", sans-serif;
    line-height: 1.9;
    margin: 0;
    min-height: 100vh
}

body:before,
body:after {
    content: "";
    position: fixed;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none
}

body:before {
    width: 380px;
    height: 380px;
    right: -110px;
    top: -100px;
    background: repeating-radial-gradient(circle, rgba(117, 189, 199, .22) 0 2px, transparent 3px 25px)
}

body:after {
    width: 430px;
    height: 130px;
    left: -70px;
    bottom: 8%;
    background: radial-gradient(ellipse, rgba(152, 211, 220, .52), transparent 69%)
}

.article {
    max-width: 760px;
    margin: auto;
    padding: 55px 28px 100px
}

.article:after {
    content: "END OF NOTE";
    display: block;
    margin-top: 70px;
    color: #779da1;
    font: 10px "DM Mono", monospace;
    letter-spacing: .15em
}

.back {
    font: 13px "DM Mono", monospace;
    text-decoration: none;
    color: var(--ink);
    border-bottom: 1px solid
}

.meta {
    font: 12px "DM Mono", monospace;
    color: var(--muted);
    margin-top: 80px
}

.article h1 {
    font-size: clamp(37px, 6vw, 66px);
    line-height: 1.22;
    letter-spacing: -.06em;
    margin: 16px 0 26px
}

.article h1:before {
    content: "PERSONAL NOTE";
    display: block;
    color: #5e909a;
    font: 10px "DM Mono", monospace;
    letter-spacing: .13em;
    margin-bottom: 20px
}

.lead {
    font-size: 20px;
    line-height: 1.7;
    color: #51616b
}

.article h2 {
    font-size: 28px;
    letter-spacing: -.04em;
    margin-top: 50px
}

.article p,
.article li {
    font-size: 16px
}

.article hr {
    border: 0;
    border-top: 1px solid #9bc5cb;
    margin: 40px 0
}

blockquote {
    border-left: 3px solid #a6cfd4;
    margin: 34px 0;
    padding: 5px 0 5px 22px;
    font: italic 23px/1.65 "Playfair Display", serif
}

code {
    font-family: "DM Mono", monospace;
    background: #e9efed;
    padding: 2px 5px
}

pre {
    overflow-x: auto;
    margin: 22px 0 30px;
    padding: 18px 20px;
    border: 1px solid rgba(116, 167, 175, .35);
    border-radius: 12px;
    background: rgba(31, 64, 76, .94);
    color: #e9f7f6;
    font: 13px/1.75 "DM Mono", monospace;
    box-shadow: 0 12px 32px rgba(44, 83, 88, .1)
}

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

.git-report table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px }
.git-report th, .git-report td { padding: 12px 10px; text-align: left; border-bottom: 1px solid #c8dcdd }
.git-report th { color: #46767d; font: 11px "DM Mono", monospace; letter-spacing: .08em }

/* August travel diary */
.travel-diary { max-width: 900px }.travel-diary h1 em { color: #568a98; font-family: "Playfair Display", serif; font-weight: 500 }.travel-diary .lead { max-width: 680px }.travel-diary figure { margin: 0 }.diary-hero { position: relative; margin: 46px 0 74px !important; background: #cbe7ea }.diary-hero img { display: block; width: 100%; height: auto; filter: saturate(.92) contrast(1.04) brightness(1.04) }.diary-hero figcaption,.diary-photo figcaption { font: 10px "DM Mono", monospace; letter-spacing: .1em; color: #5b7e86 }.diary-hero figcaption { padding: 12px 14px; background: rgba(250,252,248,.88) }.diary-entry { max-width: 650px; margin: 0 auto 82px }.diary-index { margin-bottom: 10px; color: #6d9aa2; font: 11px "DM Mono", monospace; letter-spacing: .12em }.diary-entry h2 { margin-top: 0 }.diary-photo { position: relative; width: min(100%,480px); margin: 30px 0 0 auto !important; padding: 8px 8px 29px; background: #fffdf8; box-shadow: 0 18px 38px rgba(49,88,94,.17); transform: rotate(2deg) }.diary-photo img { display: block; width: 100%; height: min(42vw,360px); object-fit: contain; object-position: center; background: #f2f0e8; filter: saturate(.88) contrast(1.04) brightness(1.05) }.diary-photo figcaption { position: absolute; left: 13px; bottom: 9px }.diary-photo--station { width: min(82%,400px); transform: rotate(-2deg) }.diary-entry--split { display: grid; grid-template-columns: 1fr .88fr; gap: 40px; max-width: 780px; align-items: center }.diary-entry--split .diary-photo { width: 100%; margin: 0 !important; transform: rotate(3deg) }.diary-photo--sign { width: min(72%,420px); margin: -42px 5% 74px auto !important; transform: rotate(-3deg) }.diary-photo--food { width: min(88%,560px); margin-right: auto !important; transform: rotate(-1.5deg) }.diary-closing { display: grid; grid-template-columns: 90px 1fr; gap: 24px; margin: 90px 0 0; padding: 28px 0; border-top: 1px solid #a7cbd0; border-bottom: 1px solid #a7cbd0 }.diary-closing span { color: #5e909a; font: 12px "DM Mono", monospace }.diary-closing p { margin: 0; font-size: 18px; line-height: 1.8 }
@media (max-width:620px) {.diary-hero { margin:34px 0 54px !important }.diary-entry { margin-bottom:58px }.diary-entry--split { display:block }.diary-entry--split .diary-photo { width:min(88%,390px); margin:28px 0 0 auto !important }.diary-photo--sign { margin:-20px 0 54px auto !important; width:84% }.diary-closing { grid-template-columns:1fr; gap:8px; margin-top:60px }}

a {
    color: #326b76
}