/* FILE: /assets/css/base.css */
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:104px}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:linear-gradient(180deg, #fff 0%, var(--cream) 88%);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
@media(min-width:640px){body{font-size:17px}}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration-color:rgba(201,138,163,.55); text-underline-offset:3px}
a:hover{text-decoration-color:rgba(198,167,94,.90)}
::selection{background:rgba(230,195,207,.45)}

:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:12px;
}

.skip-link{
  position:absolute;
  left:10px;
  top:10px;
  transform:translateY(-160%);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  z-index:2000;
}
.skip-link:focus{transform:translateY(0)}

h1,h2,h3{
  font-family:var(--font-serif);
  line-height:1.12;
  letter-spacing:-.01em;
  margin:0;
}
h1{font-size:clamp(28px, 7vw, 52px)}
h2{font-size:clamp(22px, 5.2vw, 34px)}
h3{font-size:clamp(18px, 4.2vw, 22px)}
p{margin:0}
.lead{font-size:clamp(1.02rem, 1.4vw, 1.12rem); color:rgba(25,20,22,.82)}
.muted{color:var(--muted)}
.small{font-size:.94rem}
.hint{font-size:.94rem; color:var(--muted)}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}
