:root{color-scheme:light;--ground:#f3f4f1;--ink:#1e2d57;--muted:#52607b;--red:#b23a2e}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:"Anuphan",sans-serif;font-size:16px;line-height:1.6}
::selection{background:var(--ink);color:white}
.wrap{width:min(100% - 48px,720px);margin-inline:auto}
.band{background-color:var(--ink);color:#fff;background-image:repeating-linear-gradient(0deg,transparent 0 3px,#ffffff03 3px 4px),repeating-linear-gradient(90deg,transparent 0 3px,#ffffff03 3px 4px)}
.band .wrap{padding-block:39px 35px}
h1,h2{font-family:"Pridi",serif;font-weight:600;line-height:1.35;margin:0}
h1{font-size:clamp(30px,5vw,42px);letter-spacing:-.025em}
.band p{margin:13px 0 0;font-weight:400;line-height:1.7;color:#e4e8f0}
.systems{padding:0;margin:19px 0 0;list-style:none}
.systems li{border-bottom:1px solid #1e2d5730}
.system{position:relative;display:flex;align-items:center;gap:18px;min-height:139px;padding:23px 4px;color:inherit;text-decoration:none}
.copy{min-width:0;flex:1}
h2{font-size:25px}
.system p{margin:4px 0 3px;font-size:15px}
.system small{display:block;font-size:11px;color:var(--muted);overflow-wrap:anywhere;line-height:1.6}
.arrow{width:25px;height:25px;flex:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform 300ms ease-out}
a.system::after{content:"";position:absolute;bottom:0;inset-inline:0;border-bottom:2px dashed var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 300ms ease-out}
a.system:hover::after,a.system:focus-visible::after{transform:scaleX(1)}
a.system:hover .arrow,a.system:focus-visible .arrow{transform:translateX(3px)}
a.system:focus-visible{outline:2px solid var(--red);outline-offset:5px}
a.system:active{color:var(--red)}
footer{padding-block:24px 30px;color:var(--muted);font-size:12px}
@media(min-width:760px){.band .wrap{padding-block:56px 43px}.band p br{display:none}.systems{margin-top:28px}.system{padding-inline:12px;min-height:145px}h2{font-size:28px}.system p{font-size:16px}.system small{font-size:12px}footer{padding-top:30px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}.arrow{transform:none!important}}