:root{--site-width:1280px;--site-gutter:56px;--site-header-height:86px}
html{scroll-padding-top:calc(var(--site-header-height) + 16px);scrollbar-gutter:stable}
body{background:#fbfaf7;color:#24211d}
.wrap{width:min(var(--site-width),calc(100% - var(--site-gutter)*2));margin-inline:auto}
.mi-header{position:sticky;top:0;z-index:40;background:#fbfaf7;border-bottom:1px solid #d8d2c7;font-family:'IBM Plex Sans JP',sans-serif;line-height:1.5}
.mi-header-inner{height:var(--site-header-height);display:flex;align-items:center;justify-content:space-between;gap:24px}
.mi-brand{display:flex;align-items:center;gap:10px;font:500 30px/1 'Fraunces',Georgia,serif;letter-spacing:-.065em;white-space:nowrap;color:#24211d;text-decoration:none}
.mi-brand img{width:28px;height:28px;flex:none}
.mi-nav{display:flex;align-items:center;gap:34px;font-family:"Noto Serif JP",serif;font-size:12px;font-weight:500;letter-spacing:.035em}
.mi-nav a,.mi-nav button{color:inherit;font:inherit;text-decoration:none;padding:12px 0;background:none;border:0;cursor:pointer;white-space:nowrap}
.mi-nav .mi-active{position:relative}
.mi-nav .mi-active:after{content:'';position:absolute;bottom:3px;left:0;right:0;height:2px;background:#b8452b}
.mi-nav .mi-notes{border-bottom:0}
.mi-nav .mi-calculator{border:1px solid #24211d;padding:10px 16px;display:flex;gap:24px}
.mi-header a:hover,.mi-header button:hover,.mi-footer a:hover{color:#b8452b}
.mi-header :focus-visible,.mi-footer a:focus-visible{outline:2px solid #b8452b;outline-offset:5px}
.mi-toggle{display:none;border:0;background:none;font:12px 'IBM Plex Sans JP',sans-serif;padding:12px 0;white-space:nowrap}
.mi-mobile[hidden]{display:none!important}
.mi-mobile{padding-bottom:16px}
.mi-mobile a,.mi-mobile button{display:flex;justify-content:space-between;width:100%;padding:15px 0;border:0;border-bottom:1px solid #d8d2c7;background:none;color:inherit;text-decoration:none;font:500 13px 'Noto Serif JP',serif;letter-spacing:.035em;text-align:left}
.mi-footer{margin-top:48px;background:#24211d;color:#eee9df;border-top:1px solid #24211d;padding:26px 0 18px;font-family:'IBM Plex Sans JP',sans-serif;line-height:1.8}
.mi-footer-top{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-bottom:16px;border-bottom:1px solid #ffffff20}
.mi-footer-wordmark{font:400 27px/1.2 'Fraunces',Georgia,serif;letter-spacing:-.055em;color:inherit;text-decoration:none}
.mi-footer-top p{font-size:10px;margin:0;color:#bdb6aa}
.mi-footer-bottom{display:flex;justify-content:space-between;gap:40px;padding:16px 0 20px}
.mi-footer-bottom p{max-width:700px;font-size:10px;color:#bdb6aa;margin:0;line-height:1.9}
.mi-footer-bottom nav{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-content:flex-start;gap:6px 18px;max-width:360px;flex-shrink:0;font-size:10px}
.mi-footer a{color:inherit;text-decoration:none}
.mi-colophon{display:flex;justify-content:space-between;gap:20px;font:9px/1.8 'IBM Plex Mono',monospace;color:#bdb6aa}
.reading{max-width:640px}.story-content{max-width:780px}
@media(max-width:1100px){:root{--site-gutter:32px}.mi-nav{gap:22px}}
@media(max-width:800px){:root{--site-gutter:20px;--site-header-height:72px}.mi-brand{font-size:26px;gap:8px}.mi-brand img{width:25px;height:25px}.mi-nav{gap:18px;font-size:11px}.mi-nav .mi-calculator{padding:9px;gap:10px}.mi-footer-bottom{gap:30px}}
@media(max-width:600px){:root{--site-header-height:65px}.mi-brand{font-size:25px}.mi-brand img{width:23px;height:23px}.mi-nav{display:none}.mi-toggle{display:flex;align-items:center;gap:10px}.mi-toggle span{font-size:22px}.mi-footer{margin-top:36px;padding-top:22px}.mi-footer-top{align-items:center;gap:14px}.mi-footer-bottom{flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:12px}.mi-footer-wordmark{font-size:24px}.mi-footer-bottom nav a{min-height:44px;display:flex;align-items:center}.mi-footer-bottom nav{justify-content:flex-start;gap:0 18px;max-width:none}.mi-colophon{font-size:8px;flex-wrap:wrap}}
@media(max-width:360px){.mi-brand{font-size:22px;gap:6px}.mi-brand img{width:21px;height:21px}}

.mi-footer a:hover{color:#e4aa90}.mi-footer a:focus-visible{outline-color:#e4aa90}
@media(min-width:601px) and (max-width:900px){.mi-footer-bottom{gap:24px}.mi-footer-bottom nav{max-width:240px;flex-shrink:1}}
@media(max-width:420px){.mi-footer-top{flex-wrap:wrap;gap:6px}.mi-footer-top p{font-size:9px}}

/* The calculator uses the whole button as its current-page marker. */
.mi-header .mi-calculator.mi-active{background:#a64129;border-color:#a64129;color:#fff}.mi-nav .mi-calculator.mi-active:after{display:none}.mi-header .mi-calculator.mi-active:hover{background:#873621;border-color:#873621;color:#fff}.mi-mobile .mi-calculator.mi-active{padding-inline:14px}
