/* Help center, on top of /app/app.css. */
main.hc-main, main.h-layout{padding-top:48px}
.dark{background:var(--night);color:#F4EADF}

/* index hero */
.hc-hero{position:relative;overflow:hidden;padding:64px 0 72px}
.hc-hero .wrap{position:relative;z-index:1}
.hc-title{font-family:var(--display);font-stretch:115%;font-weight:800;font-size:clamp(40px,6vw,76px);line-height:1;letter-spacing:-.03em;margin:14px 0 0}
.hc-sub{font-size:19px;max-width:40em;margin-top:18px;color:#D9CBBC}
.hc-sun{position:absolute;right:-120px;top:-60px;width:520px;height:520px;border-radius:50%;pointer-events:none;opacity:.9}
.hc-sun i{position:absolute;inset:0;border-radius:50%;border:26px solid}
.hc-sun i:nth-child(1){border-color:var(--sun)}.hc-sun i:nth-child(2){inset:40px;border-color:var(--tang)}.hc-sun i:nth-child(3){inset:80px;border-color:var(--cherry)}.hc-sun i:nth-child(4){inset:120px;border-color:var(--green)}
@media(max-width:900px){.hc-sun{right:-260px;top:-200px;opacity:.5}}
.hc-search{display:flex;align-items:center;gap:12px;margin-top:30px;max-width:640px;background:#fff;border-radius:18px;padding:6px 8px 6px 18px;box-shadow:0 24px 50px -20px rgba(0,0,0,.6),0 0 0 4px rgba(255,178,30,.25)}
.hc-search svg{flex:none;fill:none;stroke:var(--soft);stroke-width:2.2;stroke-linecap:round}
.hc-search input{border:0;box-shadow:none!important;font-size:18px;padding:12px 4px;min-height:54px}
.hc-results{max-width:640px;margin-top:10px;background:#fff;color:var(--ink);border-radius:18px;padding:8px;display:grid;gap:4px;box-shadow:0 24px 50px -20px rgba(0,0,0,.6)}
.hc-results a{display:grid;gap:2px;padding:12px 14px;border-radius:12px;text-decoration:none}
.hc-results a:hover,.hc-results a:focus{background:var(--paper-2)}
.hc-results small{font:700 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--link)}
.hc-results b{font-size:16px}.hc-results span{font-size:14px;color:var(--soft)}
.hc-results .none{padding:12px 14px;margin:0;font-size:15px}

/* start here */
.start-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.start-grid a{position:relative;display:grid;gap:6px;align-content:start;padding:22px 22px 20px;border-radius:20px;background:#fff;border:1px solid var(--line);text-decoration:none;overflow:hidden;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.start-grid a::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--c)}
.start-grid a:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.start-grid .n{font:800 30px/1 var(--display);font-stretch:120%;color:var(--c)}
.start-grid b{font-family:var(--display);font-stretch:105%;font-size:19px;line-height:1.2}
.start-grid span{font-size:14px;color:var(--soft)}
.start-grid em{font-style:normal;font:700 12px var(--mono);color:var(--soft);margin-top:4px}
@media(max-width:900px){.start-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.start-grid{grid-template-columns:1fr}}

/* categories */
.hc-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:56px}
@media(max-width:800px){.hc-cats{grid-template-columns:1fr}}
.hc-cat{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;scroll-margin-top:100px}
.hc-cat-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:14px}
.hc-cat-head i{flex:none;width:52px;height:52px;border-radius:16px;background:var(--c);display:grid;place-items:center}
.hc-cat-head svg,.h-side svg{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hc-cat h2{font-family:var(--display);font-stretch:108%;font-weight:800;font-size:22px;letter-spacing:-.01em}
.hc-cat-head p{color:var(--soft);font-size:15px;margin-top:2px}
.hc-cat ul{list-style:none;margin:0;padding:0;display:grid}
.hc-cat li a{display:flex;justify-content:space-between;gap:12px;padding:11px 4px;border-top:1px solid #F3E9DA;text-decoration:none;font-weight:600;font-size:15px}
.hc-cat li a:hover{color:var(--link)}
.hc-cat li a span{font:500 12px var(--mono);color:var(--soft);white-space:nowrap;padding-top:3px}
.hc-person{margin-top:48px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;background:var(--night);color:#E9DCCD;border-radius:22px;padding:28px;position:relative;overflow:hidden}
.hc-person::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--stripe)}
.hc-person b{font-family:var(--display);font-stretch:108%;font-size:24px;color:#fff}
.hc-person p{margin-top:6px;max-width:46em}.hc-person a:not(.btn){color:var(--sun)}

/* article */
.h-band{background:var(--night);color:#F4EADF;padding:40px 0 44px;position:relative;overflow:hidden}
.h-band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--stripe)}
.h-band::before{content:"";position:absolute;right:-80px;top:-140px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,var(--c) 0 30%,transparent 31%);opacity:.18}
.crumbs{font-size:14px;color:#B5A799;margin:0}
.crumbs a{color:#E9DCCD;text-decoration:none}.crumbs a:hover{color:var(--sun)}.crumbs span{margin:0 6px;opacity:.6}
.h-title{font-family:var(--display);font-stretch:112%;font-weight:800;font-size:clamp(32px,4.6vw,54px);line-height:1.04;letter-spacing:-.025em;margin-top:14px;max-width:22ch}
.h-sum{font-size:19px;color:#D9CBBC;margin-top:14px;max-width:40em}
.h-meta{margin-top:16px;font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--sun)}
.h-layout{display:grid;grid-template-columns:250px minmax(0,1fr) 210px;gap:44px;align-items:start}
@media(max-width:1100px){.h-layout{grid-template-columns:230px minmax(0,1fr)}.h-toc{display:none}}
@media(max-width:820px){.h-layout{grid-template-columns:minmax(0,1fr)}.h-side{order:2}}
.h-side{position:sticky;top:100px;display:grid;gap:4px;font-size:14px;max-height:calc(100vh - 120px);overflow:auto;padding-right:4px}
@media(max-width:820px){.h-side{position:static;max-height:none}}
.h-side summary{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:700;padding:8px 6px;border-radius:10px;list-style:none}
.h-side summary::-webkit-details-marker{display:none}
.h-side summary:hover{background:var(--paper-2)}
.h-side summary i{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center}
.h-side ul{list-style:none;margin:2px 0 8px 18px;padding:0 0 0 18px;border-left:2px solid var(--line);display:grid;gap:1px}
.h-side li a{display:block;padding:6px 8px;border-radius:8px;text-decoration:none;color:var(--muted);line-height:1.35}
.h-side li a:hover{background:var(--paper-2);color:var(--ink)}
.h-side li a[aria-current="page"]{background:#FFE9C7;color:var(--ink);font-weight:700}
.h-toc{position:sticky;top:100px;font-size:14px}
.h-toc ul{list-style:none;margin:10px 0 0;padding:0;border-left:2px solid var(--line)}
.h-toc a{display:block;padding:5px 0 5px 14px;margin-left:-2px;border-left:2px solid transparent;text-decoration:none;color:var(--soft);line-height:1.35}
.h-toc a:hover{color:var(--ink)}.h-toc a.on{color:var(--ink);border-left-color:var(--tang);font-weight:600}

/* prose */
.prose{font-size:17px;line-height:1.72;max-width:720px}
.prose>*+*{margin-top:18px}
.prose h2{font-family:var(--display);font-stretch:108%;font-weight:800;font-size:27px;line-height:1.15;letter-spacing:-.015em;margin-top:44px;scroll-margin-top:96px}
.prose h3{font-size:19px;font-weight:700;margin-top:30px;scroll-margin-top:96px}
.prose>p:first-child{font-size:19px;color:var(--muted)}
.prose ul,.prose ol{padding-left:24px}
.prose li{margin:6px 0}
.prose li::marker{color:var(--tang);font-weight:800}
.prose a{color:var(--link);font-weight:600}
.callout{display:flex;gap:14px;align-items:flex-start;border-radius:16px;padding:16px 18px;font-size:16px;border:1px solid}
.callout p{margin:0}
.c-k{flex:none;font:800 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px;margin-top:2px}
.c-tip{background:#FFF6E5;border-color:#F6DDB0}.c-tip .c-k{background:var(--sun);color:var(--ink)}
.c-note{background:#FFF0E8;border-color:#F8D2BC}.c-note .c-k{background:var(--tang);color:var(--ink)}
.c-honest{background:#EAF6E0;border-color:#C6E6AE}.c-honest .c-k{background:var(--green);color:#fff}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:#fff}
.tbl table{font-size:15px}.tbl th{background:var(--paper-2)}.tbl td,.tbl th{padding:11px 14px}
.tbl tr:last-child td{border-bottom:0}
.h-pn{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:48px!important}
.h-pn a{display:grid;gap:2px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:#fff;text-decoration:none;font-weight:700;color:var(--ink);line-height:1.3;transition:border-color .2s,transform .2s}
.h-pn a:hover{border-color:var(--tang);transform:translateY(-2px)}
.h-pn small{font:700 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.h-pn .pn-next{text-align:right}
.h-still{background:var(--paper-2);border-radius:16px;padding:16px 18px;font-size:15px}
.h-related{margin-top:36px!important}
.rel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
@media(max-width:700px){.rel-grid{grid-template-columns:1fr}.h-pn{grid-template-columns:1fr}.h-pn .pn-next{text-align:left}}
.rel-grid a{display:grid;gap:4px;padding:16px;border-radius:16px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:400}
.rel-grid a:hover{border-color:var(--tang)}
.rel-grid b{font-size:15px;line-height:1.3}.rel-grid span{font-size:13px;color:var(--soft);line-height:1.45}
.hc-results[hidden]{display:none}