@font-face {
  font-family: 'Ysabeau';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url(fonts/ysabeau-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Ysabeau';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url(fonts/ysabeau-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ysabeau';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url(fonts/ysabeau-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Ysabeau Office';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url(fonts/ysabeau-office-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Ysabeau Office';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url(fonts/ysabeau-office-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Ysabeau Office';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url(fonts/ysabeau-office-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{  --pk-under-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C 40 4, 82 10, 122 6 S 178 3, 197 6' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --pk-under-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 50 9, 96 3, 140 7 S 186 9, 198 5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --pk-under-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M4 7 C 36 9, 70 5, 110 7 C 150 9, 176 4, 196 7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --pk-oval-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M 46 13 C 92 1, 170 4, 189 27 C 204 46, 174 71, 110 75 C 50 79, 7 66, 10 41 C 13 20, 46 9, 88 8' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --pk-oval-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M 150 10 C 192 18, 200 50, 160 68 C 118 82, 40 80, 14 58 C -4 40, 20 12, 80 7 C 112 5, 140 7, 162 14' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --pk-oval-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M 30 22 C 60 4, 160 2, 188 30 C 202 52, 160 76, 96 76 C 40 76, 4 62, 8 40 C 10 26, 22 18, 52 12' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --pk-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' preserveAspectRatio='none'%3E%3Cpath d='M3 13 C 5.5 14.5, 7.5 16.5, 9.5 20 C 12.5 12, 16.5 6.5, 23 1.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
--bg:#f7f4ec;--ink:#1d1c19;--quiet:#66625a;--line:#ddd7c9;--pen:#b4472b}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:470 18px/1.6 "Ysabeau Office",Georgia,serif}
main{max-width:680px;margin:0 auto;padding:56px 20px 40px}
h1,h2{font-family:"Ysabeau",serif;font-weight:850;letter-spacing:-.005em;line-height:1.1}
h1{font-size:44px;margin:0 0 10px}
.lead{color:var(--quiet);font-size:20px;margin:0 0 40px;max-width:30em}
.u{position:relative;display:inline-block}
.u::after{content:"";position:absolute;left:-3px;right:-3px;bottom:-6px;height:8px;background:var(--pen);-webkit-mask:var(--pk-under-1) center/100% 100% no-repeat;mask:var(--pk-under-1) center/100% 100% no-repeat}
nav{display:flex;gap:22px;margin:0 0 48px;font-weight:600}
nav a{color:var(--ink);text-decoration:none}
article{border-top:1px solid var(--line);padding:22px 0 18px}
article h2{font-size:24px;margin:0 0 2px}
time{color:var(--quiet);font-size:15px}
article p{margin:10px 0 0}
.tags{color:var(--quiet);font-size:15px;margin-top:8px}
footer{border-top:1px solid var(--line);margin-top:24px;padding-top:18px;color:var(--quiet);font-size:15px}
a{color:var(--ink)}
@media (max-width:480px){h1{font-size:36px}main{padding-top:36px}}