/* HoneyKiss, reset, elementos globais e primitivas de layout.
   Sem estilo de componente: só o que vale para o documento inteiro. */


/* ============================================================ PRIMITIVOS */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.content{width:100%;max-width:var(--content);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}

h1,h2,h3,.display{font-family:var(--font-display);font-weight:700;line-height:1.2;
  font-variation-settings:"opsz" 40,"SOFT" 60}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}

/* Cabeçalho de seção: centralizado, como toda a referência */
.sec-head{text-align:center;max-width:720px;margin:0 auto clamp(2rem,4vw,3rem)}
.sec-head p{margin-top:.85rem;color:var(--color-muted);font-size:var(--fs-body)}

/* ============================================================ RESET */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--color-background);color:var(--color-ink);
  font-family:var(--font-ui);font-size:var(--fs-body);font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{display:block;max-width:100%}
img{height:auto}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}
::selection{background:var(--color-blush)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--color-ink);color:#fff;
  padding:.85rem 1.4rem;font-size:var(--fs-micro);letter-spacing:1px;text-transform:uppercase}
.skip:focus{left:0}
.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}