/* Shared by every page: reset, page shell, masthead, footer and primitives.
   Load tokens.css first. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  background:var(--paper); color:var(--ink);
  font:var(--step-0)/1.6 var(--font-body); -webkit-font-smoothing:antialiased;
}
main{flex:1}
h1,h2,h3{font-family:var(--font-display); font-weight:600; margin:0; text-wrap:balance}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%}
[hidden]{display:none !important}

/* ---- page shell --------------------------------------------------------- */
.shell{width:100%; max-width:76rem; margin-inline:auto; padding-inline:16px}
@media (min-width:52em){ .shell{padding-inline:var(--space-4)} }

.skip{position:absolute; left:-9999px; top:0; z-index:20;
      background:var(--ink); color:var(--paper); padding:var(--space-2) var(--space-3)}
.skip:focus{left:var(--space-3); top:var(--space-3)}
:where(a,button,input,select,[tabindex]):focus-visible{
  outline:2.5px solid var(--marigold-deep); outline-offset:2px; border-radius:2px}

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

/* ---- masthead ----------------------------------------------------------- */
.masthead{border-bottom:1px solid var(--rule); background:var(--paper)}
.masthead .shell{display:flex; align-items:center; gap:var(--space-3);
                 min-height:4rem; flex-wrap:wrap}
.wordmark{font-family:var(--font-display); font-size:var(--step-1); font-weight:600;
          text-decoration:none; letter-spacing:-.01em; margin-right:auto}
.wordmark b{font-weight:600; background:linear-gradient(transparent 62%,var(--marigold) 62%)}
.masthead nav{display:flex; gap:var(--space-3); font-size:var(--step--1); flex-wrap:wrap}
.masthead nav a{color:var(--ink-soft); text-decoration:none; padding-block:var(--space-1)}
.masthead nav a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.masthead nav a[aria-current="page"]{color:var(--ink); box-shadow:inset 0 -2px 0 var(--marigold)}
.masthead form{margin:0}

/* ---- footer ------------------------------------------------------------- */
.site-footer{border-top:1px solid var(--rule); padding-block:var(--space-4) var(--space-5);
             font-size:var(--step--1); color:var(--slate); margin-top:var(--space-5)}
.site-footer .shell{display:grid; gap:var(--space-3)}
.site-footer nav{display:flex; flex-wrap:wrap; gap:var(--space-3)}
.site-footer a{color:var(--ink-soft)}
.attribution{max-width:52rem; line-height:1.55}

/* ---- buttons ------------------------------------------------------------ */
.btn{display:inline-flex; flex-direction:column; justify-content:center; text-decoration:none;
     font:inherit; font-size:var(--step-0); font-weight:500; padding:.65rem 1.1rem;
     border-radius:var(--radius); border:1px solid transparent; cursor:pointer;
     transition:background .12s,border-color .12s,color .12s}
.btn-primary{background:var(--ink); color:var(--paper)}
.btn-primary:hover{background:var(--ink-soft)}
.btn-secondary{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn-secondary:hover{background:var(--paper-raised)}
.btn-quiet{background:transparent; color:var(--ink-soft); border-color:var(--rule);
           font-size:var(--step--1); padding:.35rem .75rem}
.btn-quiet:hover{color:var(--ink); border-color:var(--ink-soft)}
.btn small{font-size:var(--step--1); font-weight:400; opacity:.72}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* ---- surfaces and forms ------------------------------------------------- */
.panel{padding:var(--space-3); border-radius:var(--radius-lg);
       background:var(--paper-raised); border:1px solid var(--rule)}

label{display:block; font-size:var(--step--1); color:var(--slate); margin-bottom:var(--space-1)}
input,select{width:100%; background:var(--paper); border:1px solid var(--rule);
  color:var(--ink); border-radius:var(--radius); padding:.5rem .6rem; font:inherit}
input:focus-visible,select:focus-visible{outline-offset:0}

/* ---- prose pages (legal, bot) ------------------------------------------- */
.prose{padding-block:var(--space-5); max-width:var(--measure)}
.prose h1{font-size:var(--step-3); letter-spacing:-.018em}
.prose h2{font-size:var(--step-1); margin-top:var(--space-4)}
.prose p,.prose ul{margin-top:var(--space-2); color:var(--ink-soft)}
.prose .lede{font-size:var(--step-1); margin-top:var(--space-3)}
.prose .panel{margin-top:var(--space-4)}
.prose code{background:var(--paper-raised); border:1px solid var(--rule); border-radius:2px;
            padding:.05rem .3rem; font-size:.9em}
.panel > p:first-child{margin-top:0}