:root{
  --teal:#0F4C5C; --teal-deep:#0A3641; --paper:#F7F3EC;
  --ink:#000000; --card:#FFFFFF; --line:#E3DCCB;
  --serif:Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:#000000;font-family:var(--sans);font-size:17px;line-height:1.7}
img{display:block;max-width:100%;height:auto}
a{color:var(--teal)}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

/* header band */
.site-header{background:var(--teal);color:#FFFFFF}
.site-header-in{max-width:820px;margin:0 auto;padding:38px 24px 34px}
.site-header .blog-name{font-family:var(--serif);font-size:clamp(34px,6vw,46px);font-weight:700;line-height:1.1;margin:0}
.site-header .blog-name a{color:#FFFFFF;text-decoration:none}
.site-header .blog-sub{color:#D7E6EA;font-size:16.5px;line-height:1.55;margin:12px 0 0;max-width:62ch}
.site-header .home-link{display:inline-block;margin-top:16px;color:#FFFFFF;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid rgba(255,255,255,.45);padding-bottom:2px}
.site-header .home-link:hover{border-bottom-color:#FFFFFF}

/* layout */
.wrap{max-width:820px;margin:0 auto;padding:0 24px}
main{padding:44px 0 72px}
h1,h2,h3{color:#000000}

/* index list */
.post-card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:30px 32px 28px;margin:0 0 30px}
@media (max-width:640px){.post-card{padding:24px 20px 22px}}
.post-card .feat{margin:-30px -32px 24px;border-radius:6px 6px 0 0;overflow:hidden}
@media (max-width:640px){.post-card .feat{margin:-24px -20px 20px}}
.post-card .feat img{width:100%}
.post-date{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#000000;margin:0 0 8px}
.post-card h2{font-family:var(--serif);font-size:clamp(24px,3.6vw,30px);font-weight:700;line-height:1.22;margin:0 0 12px}
.post-card h2 a{color:#000000;text-decoration:none}
.post-card h2 a:hover{text-decoration:underline;text-underline-offset:4px}
.post-card .excerpt{color:#000000;margin:0 0 16px}
.continue{font-weight:700;text-decoration:none}
.continue::after{content:"\2192";margin-left:7px}
.continue:hover{text-decoration:underline;text-underline-offset:4px}

/* post page */
.post-head .post-date{margin-bottom:10px}
.post-title{font-family:var(--serif);font-size:clamp(30px,5vw,42px);font-weight:700;line-height:1.15;margin:0 0 14px;color:#000000}
.byline{color:#000000;font-size:15.5px;margin:0 0 26px}
.post-feat{border-radius:6px;margin:0 0 30px;width:100%}
.post-body{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:38px 40px}
@media (max-width:640px){.post-body{padding:26px 20px}}
.post-body p{color:#000000;margin:0 0 20px}
.post-body h2{font-family:var(--serif);font-size:25px;font-weight:700;line-height:1.25;margin:34px 0 12px;color:#000000}
.post-body ol{color:#000000;margin:0 0 20px;padding-left:26px}
.post-body li{margin-bottom:12px}
.post-body a{color:#0F4C5C;text-decoration:underline;text-underline-offset:3px}
.post-body .tagline{font-weight:600;margin-bottom:0}
.back-link{display:inline-block;margin:0 0 26px;font-weight:700;text-decoration:none}
.back-link:hover{text-decoration:underline;text-underline-offset:4px}

/* recent posts */
.recent{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:28px 32px;margin-top:34px}
@media (max-width:640px){.recent{padding:22px 20px}}
.recent h2{font-family:var(--serif);font-size:23px;margin:0 0 16px;color:#000000}
.recent ul{list-style:none;margin:0;padding:0}
.recent li{padding:10px 0;border-top:1px solid var(--line)}
.recent li:first-child{border-top:none;padding-top:0}
.recent .r-date{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#000000}
.recent .r-title{font-weight:700;color:#000000;text-decoration:none;font-size:16.5px}
.recent .r-title:hover{text-decoration:underline;text-underline-offset:4px}

/* footer */
.site-footer{background:#111111;color:#FFFFFF;margin-top:0}
.site-footer-in{max-width:820px;margin:0 auto;padding:30px 24px;font-size:14px;line-height:1.7;text-align:center}
.site-footer a{color:#FFFFFF}