/* ---- shared chrome: used on every page ---- */
@view-transition{ navigation:auto; }   /* morph shared elements across page navigations */

html{ overflow-x:hidden; scroll-behavior:smooth; }
picture{ display:contents; }   /* optimized <picture> wrappers lay out like a plain <img> */
body{
  color:#000;
  background:#fff;
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  max-width:54rem;
  margin:0 auto;
  padding:3.5rem 1.5rem 5rem;
  line-height:1.65;
}

header{
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem; flex-wrap:wrap;
  padding-bottom:1.25rem; border-bottom:1px solid #000; margin-bottom:4rem;
}
header .logo{ display:inline-flex; align-items:center; gap:.5rem; color:#000; text-decoration:none; }
header .logo:hover{ background:none; color:#000; }   /* no hover effect on the logo */
header .logo img{ height:2.5rem; width:auto; display:block; }
header .logo span{ font-family:Arial,Helvetica,sans-serif; font-weight:700; font-size:1.25rem; }
header nav{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.1rem; }
header .lang{ font:inherit; color:#555; background:none; border:0; padding:0; cursor:pointer; }
header .lang [data-lang]{ color:#555; }
header .lang [data-lang].active{ color:#000; font-weight:700; }
header .lang:hover{ background:none; }
header .nav-btn{ display:none; font:inherit; font-size:1.5rem; line-height:1; background:none; border:0; padding:0 .25rem; color:#000; cursor:pointer; }
header .nav-btn:hover{ background:none; }

/* hamburger menu on small screens */
@media (max-width:40rem){
  header .nav-btn{ display:block; }
  header nav{
    display:none; flex-basis:100%; order:1;
    flex-direction:column; align-items:flex-start; gap:1rem;
    margin-top:.9rem;
  }
  header nav a{ font-size:1.05rem; }
  header.nav-open nav{ display:flex; }
}

h1{ margin:0 0 1.25rem; line-height:1.2; }
h2{ margin:4rem 0 1.25rem; padding-top:1.25rem; border-top:1px solid #ccc; }
p{ margin:0 0 1rem; }

/* flash the section heading when you jump to it from the nav */
h2:target{ animation:markSection 1s ease-out; }
@keyframes markSection{
  0%,18% { background:#000; color:#fff; }
  100%   { background:transparent; color:#000; }
}

.caret{ display:inline-block; width:.6ch; background:#000; margin-left:.1ch; animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

a{ color:#0000ee; }
a:hover{ background:#000; color:#fff; text-decoration:none; }

.back{ display:inline-block; margin-bottom:2.5rem; }

footer{ margin-top:5rem; padding-top:1.25rem; border-top:1px solid #ccc; }
footer small{ color:#555; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .caret{ animation:none; }
  h2:target{ animation:none; }
}