:root{
  --paper:#ffffff; --ink:#000000; --muted:#55595c; --rule:#dcdfd8;
  --green:#8cc63f; --frame:#000000; --frame-ink:#ffffff; --frame-muted:#a3a7aa;
  --show-on-light:block; --show-on-dark:none;
  --font:"Archivo","Helvetica Neue",Arial,system-ui,sans-serif;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#151714; --ink:#eff0ec; --muted:#a6aaa3; --rule:#2d302b;
    --show-on-light:none; --show-on-dark:block; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#151714; --ink:#eff0ec; --muted:#a6aaa3; --rule:#2d302b;
  --show-on-light:none; --show-on-dark:block; color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;background:var(--frame);scroll-padding-top:env(safe-area-inset-top,0px);
  -webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;display:flex;flex-direction:column;background:var(--frame);
  color:var(--ink);font-family:var(--font);font-size:1.0625rem;line-height:1.6;
  font-kerning:normal;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}

.skip{position:absolute;left:1rem;top:-4rem;background:var(--green);color:#000;padding:.5rem .875rem;
  font-weight:600;z-index:10;text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 1rem)}

/* Header */
.site-header{background:var(--frame);color:var(--frame-ink);padding:0 clamp(1.25rem,4vw,3rem)}
.header-inner{max-width:72rem;margin:0 auto;min-height:5.75rem;padding-block:.875rem;display:flex;
  align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem 2.5rem}
.brand{position:relative;display:block;flex:none;width:3.75rem;height:3.75rem;border-radius:50%}
.brand img{position:absolute;inset:0;width:100%;height:100%}
@media (prefers-reduced-motion:no-preference){
  .brand .lit{animation:lit 1s cubic-bezier(.2,.7,.2,1) .5s both}
}
@keyframes lit{from{opacity:0}to{opacity:1}}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem clamp(1.25rem,3vw,2.25rem)}
.site-nav a{display:inline-block;padding:.5rem 0 .375rem;color:var(--frame-ink);text-decoration:none;
  font-stretch:125%;font-weight:600;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
  border-bottom:2px solid transparent}
@media (max-width:40rem){
  .site-nav ul{display:grid;grid-template-columns:auto auto;justify-content:start;column-gap:2.25rem;row-gap:0}
}
@media (max-width:30rem){
  .cities{flex-direction:column;gap:.875rem}
}
.site-nav a:hover{border-bottom-color:var(--frame-muted)}
.site-nav a[aria-current="page"]{border-bottom-color:var(--green)}
.site-header a:focus-visible,.site-footer a:focus-visible{outline:2px solid var(--green);outline-offset:4px}

/* Main */
main{flex:1 0 auto;background:var(--paper);padding:clamp(3.5rem,9vw,7rem) clamp(1.25rem,4vw,3rem)}
main a{color:inherit;text-decoration-line:underline;text-decoration-color:var(--green);
  text-decoration-thickness:2px;text-underline-offset:.22em}
main a:hover{text-decoration-thickness:3px}
main a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{max-width:72rem;margin:0 auto}

/* Home */
main.is-home{display:flex;align-items:center;justify-content:center}
.hero{text-align:center;width:100%}
.hero-mark{width:min(34rem,100%);margin:0 auto}
.wm-on-light{display:var(--show-on-light)}
.wm-on-dark{display:var(--show-on-dark)}
.cities{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.75rem 1.5rem;
  margin:3rem 0 0;font-stretch:125%;font-weight:600;font-size:.8125rem;letter-spacing:.2em;
  text-transform:uppercase}
.cities .tri{width:0;height:0;border-left:.42em solid transparent;border-right:.42em solid transparent;
  border-top:.72em solid var(--green)}
.tagline{max-width:38ch;margin:1.5rem auto 0;color:var(--muted);font-size:1.125rem;line-height:1.55}

/* Inner pages */
.page{display:grid;gap:3.5rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:56rem){
  .page.has-aside{grid-template-columns:minmax(0,38rem) minmax(0,1fr);gap:clamp(3rem,7vw,6rem);align-items:start}
}
h1{font-stretch:125%;font-weight:800;font-size:clamp(2.125rem,1.5rem + 2.6vw,3.25rem);line-height:1.05;
  letter-spacing:-.005em;margin:0 0 2.25rem}
.prose p{margin:0 0 1.25em;max-width:62ch;font-size:1.125rem;line-height:1.6}
.aside-mark{display:none}
.aside-mark img{width:70%}
@media (min-width:56rem){
  .aside-mark{width:100%;max-width:21rem;aspect-ratio:1;justify-self:end;margin-top:.5rem;display:grid;
    place-items:center;background:var(--frame);border:1px solid var(--rule)}
}
.contact-label{margin:0 0 .25rem !important;color:var(--muted);font-size:.9375rem}
.contact-email{font-stretch:112%;font-weight:600;font-size:clamp(1.25rem,1rem + 1.4vw,1.875rem);
  line-height:1.3;overflow-wrap:anywhere}

/* Footer */
.site-footer{background:var(--frame);color:var(--frame-muted);padding:2.25rem clamp(1.25rem,4vw,3rem);
  font-size:.875rem;line-height:1.5}
.footer-inner{max-width:72rem;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:1.25rem 3rem}
.footer-mark{width:8.5rem}
.footer-meta{display:flex;flex-wrap:wrap;gap:.5rem 2rem;align-items:center}
.site-footer a{color:var(--frame-ink);text-decoration-line:underline;text-decoration-color:var(--green);
  text-decoration-thickness:1px;text-underline-offset:.22em}
.site-footer a:hover{text-decoration-thickness:2px}
