:root{color-scheme:light;--ink:#15382e;--forest:#145b42;--line:#cdded4;--paper:#fffefa}
*{box-sizing:border-box}html{scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.7 -apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif}a{color:inherit}a:hover{color:#237351}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #277f9b;outline-offset:4px}
.wrap{width:min(1120px,calc(100% - 64px));margin-inline:auto}.site-header{background:white;border-bottom:1px solid var(--line)}.navbar,.navbar nav,.brand{display:flex;align-items:center}.navbar{min-height:74px;justify-content:space-between;gap:16px}.navbar nav{gap:24px}.navbar a,.book-card h3 a{text-decoration:none}.navbar nav a{font-weight:650}.brand{gap:10px;font-size:20px;font-weight:750;letter-spacing:.02em}.brand img,.profile img{object-fit:contain}.skip{position:fixed;top:-100px}.skip:focus{top:0;background:white;z-index:3}
.hero{margin:28px 0 44px;isolation:isolate;position:relative;overflow:hidden;border:1px solid #b9d6c6;border-radius:18px;background:#eaf5ec;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(170px,.65fr);align-items:center;padding:36px clamp(28px,5vw,66px);gap:28px}
.hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,#f3faee 13%,rgba(241,249,236,.97) 40%,rgba(235,246,231,.62) 75%,rgba(225,240,222,.55)),url(assets/pond.jpg) center/cover}
.status{display:inline-block;color:#245c41;border:1px solid #95baa1;border-radius:30px;padding:3px 12px;font-size:13px;font-weight:700}.hero h1{font-size:clamp(25px,3.1vw,45px);letter-spacing:-.04em;line-height:1.22;margin:15px 0}.hero h1 span{font-size:1.36em;letter-spacing:-.055em}.hero p{margin:0 0 20px}.button{display:inline-flex;align-items:center;gap:20px;background:var(--forest);border-radius:8px;color:white;padding:10px 18px;text-decoration:none;font-weight:650}.button:hover{background:#0c4531;color:white}.hero-art{display:flex;justify-content:center}.hero-art img{width:min(100%,184px);height:auto;transform:rotate(3deg);box-shadow:4px 9px 18px #254c3440}
.ruled{display:flex;align-items:center;gap:13px;font-size:27px;line-height:1.3;margin:32px 0 18px}.ruled:before{content:"";height:1em;width:6px;border-radius:4px;background:#70ac83}.ruled:after{content:"";flex:1;height:1px;background:var(--line)}.shelf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.book-card,.note-card{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}.book-card{padding:22px;display:grid;grid-template-columns:minmax(80px,30%) 1fr;gap:22px;align-items:center}.book-card img{display:block;width:100%;box-shadow:2px 4px 9px #15382e24}.book-card h3{line-height:1.4;margin:0}.book-card p,.profile p{font-size:14px}.book-card small{display:block;color:#59665e;margin-top:5px}.resource,.more,.profile a{font-weight:650;text-underline-offset:4px}.note-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.note-card{display:block;text-decoration:none}.note-thumb{width:100%;aspect-ratio:1.91;object-fit:cover;display:block;background:#e8f2e9}.note-card-body{padding:12px 16px 18px}.note-date{font-size:12px;color:#58675e}.note-title{font-size:16px;line-height:1.5;margin:5px 0 0}.more{display:block;text-align:right;margin:12px 0}.profile{display:flex;align-items:center;gap:18px;margin:38px 0 24px;padding:20px 0;border-block:1px solid var(--line)}.profile h2{font-size:17px;margin:0}.profile p{margin:3px 0}.profile a{margin-left:auto;white-space:nowrap}.footer{padding-bottom:22px;color:#53695c;font-size:13px}
@media(max-width:760px){.wrap{width:calc(100% - 32px)}.navbar{min-height:62px}.brand{font-size:16px;gap:5px}.brand img{width:34px;height:34px}.navbar nav{gap:12px;font-size:14px}.shelf,.note-grid{grid-template-columns:1fr}.hero{gap:14px;padding:25px 18px;grid-template-columns:minmax(0,1fr) 24%;margin:18px 0 26px}.hero h1{font-size:clamp(19px,4.6vw,32px)}.hero p{font-size:14px}.hero p br{display:none}.hero-art img{width:100%}.profile{flex-wrap:wrap;gap:10px}.profile div{flex:1;min-width:160px}.profile a{margin:0 0 0 75px}.book-card{padding:16px;gap:16px}.ruled{font-size:23px}}