/* 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(--focus); 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{display:block; margin-right:auto; line-height:0}
.wordmark img{height:2.75rem; width:auto}
.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(--accent)}
.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(--brand); color:var(--paper)}
.btn-primary:hover{background:var(--brand-hover)}
.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 ul{padding-left:1.25rem}
.prose li+li{margin-top:var(--space-1)}
.form-note{font-size:var(--step--1); color:var(--slate)}
.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}

/* ---- contact ------------------------------------------------------------ */
.contact{padding-block:var(--space-5); display:grid; gap:var(--space-5); align-items:start}
@media (min-width:56em){ .contact{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)} }
.contact h1{font-size:var(--step-3); letter-spacing:-.02em}
.contact-details{display:grid; gap:var(--space-3); margin:var(--space-4) 0 0}
.contact-details dt{font-size:var(--step--1); color:var(--slate)}
.contact-details dd{margin:0; font-weight:500}
.contact-details a{color:var(--brand)}
.contact-form{padding:var(--space-4)}
.contact-form h2{font-size:var(--step-1)}
.contact-form form{display:grid; gap:var(--space-3); margin-top:var(--space-3)}
.contact-form textarea{width:100%; font:inherit; padding:.5rem .6rem; border:1px solid var(--rule);
  border-radius:var(--radius); background:var(--paper); color:var(--ink); resize:vertical}
.contact-form .btn{justify-self:start}
.contact-form .form-error,.form-ok{margin-top:var(--space-3)}
.form-ok{padding:var(--space-2); border-radius:var(--radius); background:var(--ok-bg); color:var(--ok);
  font-size:var(--step--1)}
/* The bot trap: off screen, never shown. */
.trap{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}