/* layout.css: page frame, header, footer. */

.wrap {
  width: 100%;
  max-width: calc(var(--max-width) + 2 * var(--side));
  margin-inline: auto;
  padding-inline: var(--side);
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-pill);
  background: var(--accent-fill);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: var(--s-3); color: var(--on-accent); }

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

/* Header */
.site-header {
  position: relative;
  z-index: 10;
  background: var(--canvas);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 96px;
}

.lockup {
  display: inline-flex;
  flex: none;
  border-radius: var(--r-sm);
  color: var(--text);
  text-decoration: none;
}
.lockup-svg { width: 212px; height: auto; }

/* The nav takes the free space on both sides, so the project button sits beside the theme toggle. */
.site-nav { display: flex; align-items: center; margin-inline: auto; }

/* .button (components.css, loaded later) is a 52 px pill; in the header it's the nav's 44 px height. */
.button.header-cta {
  flex: none;
  min-height: 44px;
  padding-inline: var(--s-4);
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0;
  list-style: none;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s-4);
  border-radius: var(--r-pill);
  color: var(--text);
  font-weight: 600;
  font-size: var(--ui-size);
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.nav-link:hover { background: var(--surface); color: var(--text); }
.nav-link[aria-current="page"] { background: var(--tint); color: var(--link); }
/* On navy, the light blue on its tint is 4.4:1; the current page reads in the text color instead. */
[data-theme="dark"] .nav-link[aria-current="page"] { color: var(--text); }

.theme-toggle {
  display: none;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: var(--s-3);
  padding: 0;
  border: 1.5px solid var(--rule);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.js .theme-toggle { display: inline-grid; }
.theme-toggle:hover { border-color: var(--text-2); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-icon-sun { display: none; }
[data-theme="dark"] .theme-icon-sun { display: block; }
[data-theme="dark"] .theme-icon-moon { display: none; }

@media (max-width: 720px) {
  .header-inner {
    flex-wrap: wrap;
    row-gap: 0;
    min-height: 0;
    padding-block: var(--s-3) var(--s-1);
  }
  .lockup-svg { width: 172px; }
  .site-nav { order: 3; width: 100%; margin-inline: calc(-1 * var(--s-3)); }
  .nav-list { flex-wrap: wrap; }
  .nav-link { padding-inline: var(--s-3); }
  .button.header-cta { margin-left: auto; }
  .theme-toggle { margin-left: var(--s-2); }
}

/* Five items on one row at 390 px: tighter pills, same 44 px height. The lockup, project button and
   toggle share the first row. */
@media (max-width: 440px) {
  .header-inner { column-gap: var(--s-3); }
  .lockup-svg { width: 150px; }
  .button.header-cta { padding-inline: var(--s-3); font-size: 15px; }
  .nav-list { gap: 0; }
  .nav-link { padding-inline: 8px; font-size: 15px; }
}

/* Main */
.site-main:focus { outline: none; }

.section { padding-block: var(--section-pad); }
.section-mist { background: var(--surface); }

.page-head { padding-block: var(--s-8) var(--s-7); }
.page-head .lead { margin-top: var(--s-5); }

/* Footer */
.site-footer {
  margin-top: var(--s-9);
  padding-block: var(--s-7) var(--s-8);
  border-top: 1px solid var(--rule);
  color: var(--text-2);
  font-size: var(--small-size);
  line-height: var(--small-lh);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-7);
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
  color: var(--text);
  font-weight: 600;
}
.footer-mark { width: 28px; height: 28px; flex: none; }

.footer-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-2);
  padding: 0;
  list-style: none;
}

.footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--s-2);
  color: var(--text-2);
  font-weight: 600;
  text-decoration: none;
}
.footer-link:hover { color: var(--link); text-decoration: underline; }

.footer-legal { margin-left: auto; }

@media (max-width: 720px) {
  .footer-inner { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .footer-legal { margin-left: 0; }
  .footer-list { margin-inline: calc(-1 * var(--s-2)); }
}