:root{
  color-scheme:light;
  --paper:#FAF9F7;--ink:#2E2C35;--soft:#8A8693;--line:#E4E1E6;--body:#45424D;
  --mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --gothic:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  --latin:"Cormorant Garamond","Times New Roman",serif;
  --grad:linear-gradient(100deg,#8E7CC3,#D27F9C 45%,#C9A24E 65%,#5F97C9);
}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--gothic);font-weight:300;font-size:15px;line-height:2.1;letter-spacing:.06em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3,p{margin:0;font-weight:400}
.wrap{max-width:1120px;margin:0 auto;padding-inline:clamp(20px,6vw,64px)}
.lat{font-family:var(--latin);font-weight:300;letter-spacing:.24em;text-transform:uppercase;font-size:12px;color:var(--soft)}
a:focus-visible{outline:1px solid var(--ink);outline-offset:4px}

/* bar */
.bar{border-bottom:1px solid var(--line);background:rgba(250,249,247,.92);backdrop-filter:blur(8px);position:sticky;top:0;z-index:5}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.home{font-family:var(--mincho);font-size:15px;letter-spacing:.24em;white-space:nowrap}
.home span{color:var(--soft)}
.bar nav{display:flex;gap:clamp(14px,3vw,32px)}
.bar nav a{font-family:var(--latin);font-size:13px;letter-spacing:.2em;text-transform:uppercase}
.bar nav a:hover{border-bottom:1px solid var(--ink)}
@media (max-width:420px){.bar nav a:nth-child(2){display:none}.home span{display:none}}

/* index */
.ihead{padding:clamp(64px,10vw,120px) 0 clamp(32px,5vw,56px);border-bottom:1px solid var(--line)}
.ihead h1{font-family:var(--mincho);font-size:clamp(32px,5vw,52px);letter-spacing:.2em;margin:8px 0 20px}
.ihead p:last-child{color:var(--body);max-width:34em}
.chips{display:flex;flex-wrap:wrap;gap:10px;padding:28px 0 8px}
.chips a{font-size:13px;border:1px solid var(--line);padding:6px 16px;border-radius:999px;line-height:1.8;transition:border-color .3s}
.chips a:hover{border-color:var(--ink)}
.grp{padding-top:clamp(56px,8vw,96px);scroll-margin-top:72px}
.pg{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;font-family:var(--mincho);font-size:clamp(19px,2.4vw,24px);letter-spacing:.18em;margin-bottom:8px}
.pg .cnt{margin-left:auto;font-family:var(--latin);font-size:14px;color:var(--soft);letter-spacing:.1em}
.note{font-size:13px;color:var(--soft);margin-bottom:18px}

/* list */
.list{list-style:none;margin:0;padding:0}
.list li{border-top:1px solid var(--line)}
.list li:last-child{border-bottom:1px solid var(--line)}
.list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;padding:18px 0}
.list .t{display:block;font-family:var(--mincho);font-size:clamp(16px,1.9vw,19px);letter-spacing:.06em;line-height:1.6;transition:color .3s}
.list .d{display:block;font-size:12.5px;color:var(--soft);line-height:1.8;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.list a:hover .t{color:#7a6fae}
.arr{display:inline-block;width:32px;height:1px;background:var(--ink);position:relative;transition:width .4s;flex:none}
.arr::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid var(--ink);border-right:1px solid var(--ink);transform:rotate(45deg)}
.list a:hover .arr{width:52px}
@media (max-width:560px){.list .arr{display:none}.list a{grid-template-columns:1fr}}

/* article */
.article{max-width:780px;padding-bottom:40px}
.crumb{list-style:none;margin:0;padding:28px 0 0;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:var(--soft)}
.crumb li+li::before{content:"/";margin-right:10px;color:var(--line)}
.crumb a:hover{color:var(--ink)}
.cat{margin-top:clamp(40px,7vw,72px);font-size:12.5px;letter-spacing:.14em}
.cat a{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:500}
.article h1{font-family:var(--mincho);font-size:clamp(25px,4vw,36px);line-height:1.6;letter-spacing:.08em;margin:12px 0 18px}
.meta{font-size:12.5px;color:var(--soft);padding-bottom:28px;border-bottom:1px solid var(--line)}
.toc{margin:36px 0 8px;padding:22px 26px;background:#fff;border:1px solid var(--line)}
.toc ol{margin:6px 0 0;padding-left:1.4em;font-size:14px;line-height:1.9}
.toc a:hover{border-bottom:1px solid var(--ink)}
.body{font-size:16px;line-height:2.15;color:var(--body);padding-top:20px}
.body p{margin:1.3em 0}
.body h2{font-family:var(--mincho);font-size:clamp(20px,2.8vw,25px);line-height:1.6;letter-spacing:.08em;color:var(--ink);margin:2.6em 0 .6em;padding-top:1.1em;border-top:1px solid var(--line);position:relative;scroll-margin-top:80px}
.body h2::before{content:"";position:absolute;top:-1px;left:0;width:48px;height:1px;background:var(--grad)}
.body h3{font-family:var(--mincho);font-size:18px;letter-spacing:.06em;color:var(--ink);margin:2em 0 .4em;padding-left:14px;border-left:2px solid #C9B8E0}
.body ul,.body ol{margin:1.2em 0;padding-left:1.4em}
.body li{margin:.3em 0}
.body li::marker{color:var(--soft)}
.body strong{font-weight:500;color:var(--ink);background:linear-gradient(transparent 62%,rgba(201,184,224,.45) 62%)}
.body a{border-bottom:1px solid var(--soft)}
.body blockquote{margin:1.6em 0;padding:4px 0 4px 20px;border-left:2px solid var(--line);color:var(--soft)}
.author{display:flex;gap:18px;align-items:flex-start;margin-top:64px;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.author img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none}
.author .nm{font-family:var(--mincho);font-size:17px;letter-spacing:.24em;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.author p:last-child{font-size:13.5px;color:var(--body);line-height:1.9;margin-top:4px}

/* cta */
.cta{margin:56px 0 0;padding:clamp(36px,6vw,56px) clamp(22px,5vw,48px);text-align:center;background:#fff;border:1px solid var(--line);position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--grad)}
.cta-h{font-family:var(--mincho);font-size:clamp(21px,3vw,28px);letter-spacing:.12em;margin:6px 0 14px}
.cta p:not(.lat):not(.cta-h){font-size:14px;color:var(--body);line-height:2}
.btn{display:inline-block;margin-top:24px;border:1px solid var(--ink);padding:12px 36px;font-size:14px;letter-spacing:.16em;transition:background .3s,color .3s}
.btn:hover{background:var(--ink);color:var(--paper)}
main>.cta{margin:clamp(72px,10vw,120px) 0 clamp(72px,10vw,120px)}

/* related */
.rel{margin-top:72px}
.rh{font-family:var(--mincho);font-size:17px;letter-spacing:.2em;margin-bottom:14px}
.more{margin-top:28px;text-align:right;font-size:14px}
.more a{display:inline-flex;align-items:center;gap:14px}
.more a:hover .arr{width:52px}

footer{margin-top:72px;padding-block:40px;border-top:1px solid var(--line)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--soft)}
footer .n{font-family:var(--mincho);letter-spacing:.3em;color:var(--ink)}
footer span a{border-bottom:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}
.yt{margin:32px 0 0;aspect-ratio:16/9;background:#000}
.yt iframe{width:100%;height:100%;border:0;display:block}
.ytlink{font-size:13px;text-align:right;margin-top:8px}
.ytlink a{border-bottom:1px solid var(--soft)}
/* thumbnails */
.list a{grid-template-columns:200px minmax(0,1fr) auto}
.list .th{width:200px;height:auto;aspect-ratio:1200/630;object-fit:cover;display:block;border:1px solid var(--line)}
.hero{display:block;width:100%;height:auto;margin-top:32px;border:1px solid var(--line)}
@media (max-width:560px){.list a{grid-template-columns:112px minmax(0,1fr);gap:14px}.list .th{width:112px}.list .d{-webkit-line-clamp:1}}