:root{
  --ink:#031216; --ink-3:#12303a;
  --paper:#FFFEFA; --paper-2:#F4F1E9;
  --teal:#1A8DAD; --teal-l:#e6f3f7;
  --muted:#5b6c72; --line:rgba(3,18,22,.10);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Barlow,Helvetica,Arial,sans-serif; font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
.wrap{width:min(820px,92vw); margin-inline:auto}

header{position:sticky; top:0; z-index:60; background:rgba(3,18,22,.9); backdrop-filter:blur(14px)}
.nav{display:flex; align-items:center; gap:1.4rem; height:76px; width:min(1200px,92vw); margin-inline:auto}
.nav img{height:40px; filter:brightness(0) invert(1)}
.nav a{color:rgba(255,254,250,.78); text-decoration:none; font-size:.95rem; font-weight:500}
.nav a:hover{color:var(--paper)}
.nav .back{margin-left:auto}

.page-head{background:var(--ink); color:var(--paper); padding-block:clamp(48px,7vw,86px)}
.page-head h1{
  font-family:Niramit,Helvetica,Arial,sans-serif; font-weight:300;
  font-size:clamp(2.2rem,5vw,3.6rem); margin:0; letter-spacing:-.015em;
}
.page-head p{margin:.9rem 0 0; color:rgba(255,254,250,.65); font-size:1.02rem}

main{padding-block:clamp(48px,6vw,80px)}
main h2{
  font-family:Niramit,Helvetica,Arial,sans-serif; font-weight:600;
  font-size:clamp(1.4rem,2.4vw,1.8rem); letter-spacing:-.015em;
  margin:3rem 0 .4rem; padding-top:2rem; border-top:1px solid var(--line);
}
main h2:first-child{margin-top:0; padding-top:0; border-top:0}
main h3{
  font-family:Niramit,Helvetica,Arial,sans-serif; font-weight:600;
  font-size:1.12rem; margin:2rem 0 .3rem;
}
main h4{font-family:Niramit,Helvetica,Arial,sans-serif; font-weight:600; font-size:1rem; margin:1.6rem 0 .2rem}
main p{margin:.75rem 0; color:var(--ink-3)}
main a{color:var(--teal); overflow-wrap:anywhere}
main dl{margin:.6rem 0 1.4rem; color:var(--ink-3)}
main dt{font-weight:600; margin-top:.5rem}
main dd{margin:0 0 .2rem}
main ul{color:var(--ink-3)}
.addr{background:var(--paper-2); border-radius:20px; padding:clamp(1.4rem,3vw,2rem); margin:1.6rem 0}
.addr strong{display:block; font-size:1.05rem}
.addr a{color:var(--teal); text-decoration:none}
.note{background:var(--teal-l); border-radius:16px; padding:1.1rem 1.3rem; margin:1.6rem 0; font-size:.96rem}

footer{background:var(--ink); color:rgba(255,254,250,.6); padding-block:48px; font-size:.9rem; margin-top:clamp(48px,6vw,80px)}
footer .wrap{width:min(1200px,92vw); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between}
footer a{color:rgba(255,254,250,.6); text-decoration:none}
footer a:hover{color:var(--paper)}

@media(max-width:560px){
  .nav img{height:30px}
  .nav{gap:.8rem}
}