/* Layout: a morning sky header with the dove; quiet reading column below; sky footer. Tokens follow the 瀬田乃安 brand (sky blue, white cloud, white dove, thin orange line, navy ink, Mincho). */
:root{
  --sky-top:#6fb6e6; --sky-mid:#a9d6f2; --sky-bottom:#e6f4fc;
  --bg:#f3f9fd; --paper:#ffffff; --ink:#1d2f55; --ink-soft:#56688a;
  --line:#e8792b; --line-soft:#f6c9a5; --rule:#d6e8f4; --cloud:#ffffff; --chip:#eef7fd;
  --shadow:0 1px 2px rgba(29,47,85,.06),0 8px 24px rgba(29,47,85,.07);
  --serif:"Noto Serif JP","Noto Serif CJK JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --display:"Shippori Mincho","Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --sky-top:#0b1730; --sky-mid:#16294d; --sky-bottom:#1d355c;
  --bg:#0f1a2e; --paper:#16233b; --ink:#e9f0fa; --ink-soft:#a9b8d2;
  --line:#f0954f; --line-soft:#6b4a33; --rule:#2a3c5c; --cloud:#c9d8ee; --chip:#1d2d4b;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25); color-scheme:dark;}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.95;letter-spacing:.02em}
img{max-width:100%}
a{color:inherit}
a:focus-visible{outline:3px solid var(--line);outline-offset:3px;border-radius:4px}
.wrap{max-width:760px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* sky */
.sky{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 55%,var(--sky-bottom) 100%)}
.clouds{position:absolute;inset:0;pointer-events:none}
.clouds svg{position:absolute;fill:var(--cloud)}
@media (prefers-color-scheme: dark){.clouds svg{opacity:.14}}
.sky .wrap{position:relative;z-index:1}
.big .wrap{padding-block:52px 96px;text-align:center}
.small .wrap{padding-block:22px 54px}
.dove{width:92px;height:auto;display:block;margin:0 auto 14px}
.byname{display:block;font-family:var(--display);font-size:14px;letter-spacing:.35em;margin:0 0 8px;opacity:.85}
h1{font-family:var(--display);font-weight:700;font-size:clamp(30px,8.4vw,52px);line-height:1.35;letter-spacing:.12em;margin:0;text-wrap:balance}
.rule{width:56px;height:1px;background:var(--line);margin:20px auto;border:0}
.motto{font-family:var(--display);font-size:clamp(17px,4.4vw,21px);margin:0;letter-spacing:.1em}
.brand{text-decoration:none;display:inline-flex;flex-direction:column}
.brand .byname{margin:0 0 2px;font-size:12px}
.brand .name{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.1em}
.ground{position:absolute;left:0;right:0;bottom:-1px;height:48px;width:100%;display:block}
.ground path{fill:var(--bg)}

/* nav */
nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px;font-size:16px}
nav a{text-decoration:none;border-bottom:1px solid var(--line-soft);padding-bottom:2px}
nav a:hover{border-color:var(--line)}

main.wrap{display:flex;flex-direction:column;gap:56px;padding-block:32px 72px}
main > *{min-width:0}
.pagebody{display:flex;flex-direction:column;gap:18px;min-width:0}
.pagebody > .word{margin-top:6px}
.small .clouds svg{opacity:.45}
section{display:flex;flex-direction:column;gap:14px;scroll-margin-top:16px}
.kicker{font-size:13px;letter-spacing:.24em;color:var(--line);margin:0;display:flex;align-items:center;gap:12px}
.kicker::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.title{font-size:clamp(26px,6vw,34px);letter-spacing:.06em;margin:0}
h2{font-family:var(--display);font-size:clamp(21px,5vw,25px);letter-spacing:.06em;line-height:1.55;margin:0;text-wrap:balance}
h2.sub{margin-top:8px}
h3{font-family:var(--display);font-size:21px;line-height:1.55;margin:0;letter-spacing:.04em;text-wrap:balance}
h3 a{text-decoration:none}
h3 a:hover{color:var(--line)}
p{margin:0}
.soft{color:var(--ink-soft);font-size:16px}
.more{font-size:16px}
.more a,.back a{text-decoration:none;color:var(--ink-soft)}
.more a:hover,.back a:hover{color:var(--line)}
.date{font-size:14px;color:var(--ink-soft);letter-spacing:.08em}

/* lists */
.list{display:flex;flex-direction:column}
.item{display:flex;flex-direction:column;gap:6px;padding-block:20px;border-bottom:1px solid var(--rule)}
.item:first-child{padding-top:4px}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-size:14px;text-decoration:none;background:var(--chip);border:1px solid var(--rule);border-radius:999px;padding:2px 12px;color:var(--ink)}
.tag:hover{border-color:var(--line)}

/* post */
.post{display:flex;flex-direction:column;gap:10px}
.prose{display:flex;flex-direction:column;gap:1.2em;margin-top:18px;max-width:36em}
.prose h2{margin-top:.6em}
.prose a{color:var(--ink);text-decoration-color:var(--line);text-underline-offset:3px}
blockquote{margin:0;padding:4px 0 4px 20px;border-left:2px solid var(--line);color:var(--ink)}
.linkcard{display:grid;gap:4px;text-decoration:none;background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow)}
.linkcard:hover{border-color:var(--line)}
.lc-src{font-size:13px;color:var(--ink-soft);letter-spacing:.06em;overflow-wrap:anywhere}
.lc-title{font-family:var(--display);font-size:18px;line-height:1.6}
.lc-go{font-size:14px;color:var(--line)}
.postfoot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-top:28px;padding-top:18px;border-top:1px solid var(--rule)}
.share{font-size:15px;text-decoration:none;border:1px solid var(--ink);border-radius:999px;padding:6px 18px}
.share:hover{background:var(--ink);color:var(--bg)}

/* words */
.word{margin:0;background:var(--paper);border-radius:18px;box-shadow:var(--shadow);padding:30px 26px 22px;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:12px}
.word blockquote{border:0;padding:0;font-family:var(--display);font-size:clamp(20px,5vw,24px);line-height:1.9;letter-spacing:.06em}
.word blockquote p + p{margin-top:.6em}
.word figcaption{font-size:14px;color:var(--ink-soft);text-align:right}
.word figcaption a{text-decoration:none}
.cals{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.calwrap{overflow-x:auto}
.cal{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;font-size:15px;text-align:center}
.cal caption{font-family:var(--display);font-size:17px;text-align:left;padding-bottom:6px}
.cal th{font-weight:500;color:var(--ink-soft);font-size:13px;padding:4px 0}
.cal td{padding:2px}
.cal td span,.cal td a{display:block;padding:5px 0;border-radius:8px;color:var(--ink-soft)}
.cal td a.has{background:var(--ink);color:var(--bg);text-decoration:none;font-weight:700}
.cal td a.has:hover{background:var(--line)}

/* youtube */
.ytcard{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;text-decoration:none;background:var(--ink);color:var(--bg);border-radius:20px;padding:26px 24px}
.ytcard > span:last-child{display:flex;flex-direction:column;gap:4px;min-width:0}
.ytcard strong{font-family:var(--display);font-size:22px;letter-spacing:.08em}
.ytcard .soft{color:var(--bg);opacity:.8}
.ytcard .go{font-size:15px;color:var(--line-soft)}
.play{width:64px;height:64px;border-radius:50%;background:var(--line);position:relative}
.play::after{content:"";position:absolute;left:26px;top:20px;border-left:18px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}
.ytcard:hover .play{transform:scale(1.05)}
@media (prefers-reduced-motion: no-preference){.play{transition:transform .2s}}

/* notebook & books */
.notebook{background:var(--paper);border-radius:18px;box-shadow:var(--shadow);padding:26px 22px;display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line-soft)}
.btn{align-self:flex-start;display:inline-block;background:var(--ink);color:var(--bg);text-decoration:none;font-size:16px;padding:9px 24px;border-radius:999px;letter-spacing:.06em}
.btn:hover{opacity:.9}
.books{display:flex;flex-direction:column;gap:32px}
.book{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:start}
.book > div{min-width:0;display:flex;flex-direction:column;gap:8px}
.cover{aspect-ratio:2/3;max-width:100%;border-radius:3px;background:linear-gradient(180deg,var(--sky-top),var(--sky-bottom));box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;font-family:var(--display);font-size:13px;letter-spacing:.1em;color:var(--ink);padding:8px;border-left:3px solid var(--line)}
.tagline{font-size:13px;color:var(--line);letter-spacing:.12em}

/* footer */
.foot .wrap{padding-block:40px;text-align:center;display:flex;flex-direction:column;gap:4px}
.sign{font-family:var(--display);font-size:20px;letter-spacing:.14em;font-style:italic}
.foot .links a{text-decoration:none;border-bottom:1px solid var(--line-soft);font-size:15px}
.copy{font-size:13px}

.bonus{margin:10px 0 0;display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:14px}
.bonus img{width:120px;height:auto;border-radius:8px;box-shadow:var(--shadow);display:block}
.bonus figcaption{display:flex;flex-direction:column;gap:4px;min-width:0}
.bonus strong{font-family:var(--display);font-size:17px}
@media (max-width:420px){.book{grid-template-columns:72px 1fr;gap:14px}.bonus{grid-template-columns:90px 1fr}.bonus img{width:90px}}

.ytgrid{display:flex;flex-direction:column;align-items:center;gap:14px}
.ytlink{font-size:16px}
.ytlink a{text-decoration:none;border-bottom:1px solid var(--line-soft)}
.ytlink a:hover{color:var(--line);border-color:var(--line)}
.short{width:260px;max-width:100%;aspect-ratio:9/16;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:var(--ink)}
.short iframe{width:100%;height:100%;border:0;display:block}
@media (max-width:620px){.short{width:min(300px,100%)}}