:root{
  --black:#000000;--blue:#4b6e84;--gold:#926f1d;--graphite:#606060;--silver:#cccccc;--mist:#f2f4f5;--white:#ffffff;
  --display:"Italiana","Didot","Bodoni 72","Times New Roman",serif;
  --body:"Roboto","Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:110px}
body{font-family:var(--body);font-weight:300;color:var(--black);background:var(--white);line-height:1.75;font-size:17px;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-underline-offset:3px}
a:hover{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
img{max-width:100%;display:block}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,56px)}

header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.97);border-bottom:1px solid var(--silver);padding-top:env(safe-area-inset-top,0px)}
.bar{display:flex;align-items:center;justify-content:space-between;height:96px;gap:20px}
.brand{display:block;width:190px;min-width:185px;padding:8px 0}
.back{font-size:15px;font-weight:400;text-decoration:none;color:var(--black);border:1px solid var(--gold);border-radius:999px;padding:10px 22px;white-space:nowrap}
.back:hover{background:var(--gold);color:var(--white)}
.bar-actions{display:flex;align-items:center;gap:20px}
.lang{font-size:14px;font-weight:500;letter-spacing:.08em;text-decoration:none;color:var(--black)}
.lang:hover{color:var(--gold)}

.title{background:var(--blue);color:var(--white);padding:clamp(70px,9vw,120px) 0 clamp(56px,7vw,90px);position:relative;overflow:hidden}
.title::before,.title::after{content:"";position:absolute;top:50%;width:30vw;height:1px;background:rgba(255,255,255,.35)}
.title::before{left:0}.title::after{right:0}
.title h1{font-family:var(--display);font-weight:400;font-size:clamp(44px,6vw,80px);line-height:1.05;text-align:center}
.title p{text-align:center;margin-top:16px;color:rgba(255,255,255,.8);font-size:15px}

.doc{display:grid;grid-template-columns:240px 1fr;gap:clamp(40px,6vw,96px);padding:clamp(60px,8vw,110px) 0}
.toc{position:sticky;top:130px;align-self:start;font-size:14px}
.toc h2{font-family:var(--body);font-weight:500;font-size:14px;margin-bottom:14px;color:var(--graphite)}
.toc ol{list-style:none;display:grid;gap:9px;border-left:1px solid var(--silver);padding-left:18px}
.toc a{text-decoration:none;color:var(--graphite)}
.toc a:hover{color:var(--gold)}
article{max-width:72ch}
article section{padding-bottom:44px;margin-bottom:44px;border-bottom:1px solid var(--silver)}
article section:last-child{border-bottom:0}
article h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,3vw,38px);line-height:1.15;margin-bottom:18px}
article h3{font-family:var(--body);font-weight:500;font-size:17px;margin:22px 0 8px}
article p{margin-bottom:14px;color:#2a2a2a}
article ul{margin:0 0 14px 22px;color:#2a2a2a}
article li{margin-bottom:6px}
.opening{font-size:19px;color:var(--black)}
.notice{background:var(--mist);border:1px solid var(--blue);border-left:4px solid var(--gold);border-radius:14px;padding:24px 26px;margin:22px 0;color:var(--black)}
.notice p{margin:0;color:var(--black);font-weight:400}
.notice p+p{margin-top:12px}
.card{border:1px solid var(--silver);border-radius:14px;padding:22px 26px;font-style:normal;line-height:1.8}
.card strong{font-weight:500}

footer{background:var(--black);color:var(--silver);padding:64px 0 calc(32px + env(safe-area-inset-bottom,0px))}
.foot{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
.foot-logo{width:200px;min-width:185px}
.foot ul{list-style:none;display:grid;gap:8px;font-size:15px}
.foot a{color:var(--silver);text-decoration:none}
.foot a:hover{color:var(--white)}
.base{margin-top:48px;padding-top:22px;border-top:1px solid #2b2b2b;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--graphite)}
.base a{color:var(--silver)}
.base a:hover{color:var(--white)}

@media (max-width:860px){
  .doc{grid-template-columns:1fr}
  .toc{position:static}
  .title::before,.title::after{width:12vw}
}
@media (max-width:480px){
  body{font-size:16px}
  .back{padding:9px 16px;font-size:14px}
}
@media (max-width:420px){
  .bar-actions{gap:14px}
  .back{display:none}
}