/* Shared header and footer (site.js) */
.s-top{background:#0F0F0F;color:#EFECE4;font-family:'Zen Kaku Gothic New','Archivo',sans-serif;position:sticky;top:0;z-index:40;border-bottom:1px solid #222}
html{scroll-padding-top:84px}
.s-top-in{max-width:1120px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:80px}
.s-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#EFECE4}
.s-brand span{font-family:'Archivo',sans-serif;font-weight:800;font-size:22px;letter-spacing:2.5px}
.s-mark{width:46px;height:40px;display:block}
.s-right{display:flex;align-items:center;gap:10px}
.s-cta{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;background:#C93D27;color:#fff;text-decoration:none;font-weight:700;font-size:15px;letter-spacing:1px;white-space:nowrap}
.s-cta:hover{background:#B8321E}
.s-lang{position:relative}
.s-lang-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;background:transparent;color:#EFECE4;border:1px solid #3A3A3A;font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.s-lang-btn:hover{border-color:#E8735F}
.s-lang-menu{position:absolute;right:0;top:52px;z-index:30;margin:0;padding:8px 0;list-style:none;background:#1A1A1A;border:1px solid #3A3A3A;min-width:210px}
.s-lang-menu[hidden]{display:none}
.s-lang-menu button{display:block;width:100%;text-align:left;padding:11px 18px;background:none;border:0;color:#EFECE4;font:inherit;font-size:15px;cursor:pointer}
.s-lang-menu button:hover,.s-lang-menu button[aria-current="true"]{color:#E8735F}
@media (max-width:560px){
  .s-top-in{padding:14px 16px;min-height:68px}
  .s-mark{width:38px;height:33px}.s-brand span{font-size:19px}
  .s-cta{padding:8px 12px;font-size:14px;letter-spacing:0}
  .s-lang-btn span{display:none}.s-lang-btn{padding:8px 11px;min-width:44px;justify-content:center}
}
@media (max-width:350px){
  .s-right{gap:6px}.s-cta{padding:8px 10px;font-size:13px}
  .s-brand{gap:7px}.s-brand span{font-size:17px;letter-spacing:2px}
}

.s-foot{background:#0F0F0F;color:#CFCAC0;border-top:1px solid #2E2E2E;font-family:'Zen Kaku Gothic New','Archivo',sans-serif}
.s-foot-in{max-width:1120px;margin:0 auto;padding:48px 24px 32px;display:grid;grid-template-columns:1fr;gap:36px}
.s-foot-brand p{margin:12px 0 0;font-size:14px;line-height:1.8}
.s-foot-brand a:not(.s-brand){color:#E8735F;display:inline-flex;align-items:center;min-height:44px}
.s-foot-brand p:has(>a){margin-top:0}
.s-social a{gap:8px;text-decoration:none}.s-social svg{width:16px;height:16px;fill:currentColor}
.s-free{display:inline-block;padding:3px 10px;border:1px solid #C93D27;color:#E8735F!important;font-weight:700;font-size:13px!important}
.s-foot-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
.s-foot-cols h2{margin:0 0 10px;padding:0;border:0;font-family:'Archivo','Zen Kaku Gothic New',sans-serif;font-size:12px;font-weight:800;letter-spacing:2px;color:#8A8478;text-transform:uppercase}
.s-foot-cols a{display:block;padding:10px 0;color:#EFECE4;text-decoration:none;font-size:15px;line-height:1.6}
.s-foot-cols a:hover{color:#E8735F}
.s-copy{margin:0;padding-top:20px;border-top:1px solid #2E2E2E;font-family:'Archivo',sans-serif;font-size:12px;color:#8A8478}
@media (min-width:760px){
  .s-foot-in{grid-template-columns:1.2fr 2fr}
  .s-foot-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .s-copy{grid-column:1/-1}
}

/* Opening (site.js intro) */
@property --s-sweep{syntax:"<angle>";inherits:false;initial-value:0deg}
html.s-intro-on{overflow:hidden}
.s-intro{position:fixed;inset:0;z-index:1000;background:#0F0F0F;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;cursor:pointer;transition:opacity .6s ease,transform .7s cubic-bezier(.7,0,.2,1)}
.s-intro.out{opacity:0;transform:scale(1.08);pointer-events:none}
.s-intro-c{position:relative;width:min(70vw,380px);aspect-ratio:120/104;display:flex;align-items:center;justify-content:center}
.s-intro-c img{position:absolute;inset:0;width:100%;height:100%;-webkit-mask:conic-gradient(from 200deg,#000 var(--s-sweep),transparent 0);mask:conic-gradient(from 200deg,#000 var(--s-sweep),transparent 0);animation:s-brush .75s cubic-bezier(.6,0,.25,1) .1s forwards}
@keyframes s-brush{to{--s-sweep:360deg}}
.s-intro-c p{position:relative;margin:0;display:flex;gap:.06em;font-family:'Zen Old Mincho',serif;font-weight:900;font-size:min(12vw,66px);line-height:1;color:#EFECE4;transform:translateY(-2%)}
.s-intro-c span{opacity:0;transform:translateY(14px);filter:blur(8px);animation:s-in .5s cubic-bezier(.2,.8,.2,1) forwards}
.s-intro-c span:first-child{animation-delay:.45s}
.s-intro-c span:last-child{animation-delay:.75s;color:#E8735F}
@keyframes s-in{to{opacity:1;transform:none;filter:none}}
.s-intro b{font-family:'Archivo',sans-serif;font-weight:800;font-size:14px;letter-spacing:8px;padding-left:8px;color:#8A8478;opacity:0;animation:s-fade .5s ease 1s forwards}
@keyframes s-fade{to{opacity:1}}
.s-intro.plain .s-intro-c img{-webkit-mask:none;mask:none;opacity:0;animation:s-fade .5s ease .1s forwards}
/* Vietnamese: the Japanese fonts have no Vietnamese accents */
.s-top:lang(vi),.s-foot:lang(vi),.s-top:lang(vi) *,.s-foot:lang(vi) *{font-family:'Archivo','Noto Sans',sans-serif}
.s-kanji{font-style:normal;font-family:'Zen Old Mincho',serif;font-weight:900;font-size:16px;letter-spacing:.12em;color:#8A8478;padding-left:12px;margin-left:2px;border-left:1px solid #3A3A3A;line-height:1}
@media (max-width:759px){.s-kanji{display:none}}

.s-app{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.s-app span{color:#BDB8AC}.s-app a{display:inline-flex;line-height:0}.s-app img.play{margin:-9px -8px}
/* landing page: links to the articles, under the questions */
.lp-read{margin:20px 0 0;display:flex;flex-wrap:wrap;gap:0 24px;font-size:15px;font-weight:700}
.lp-read a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-underline-offset:4px}