/* Site layout: header, footer, page shell and the content width. */
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter); }
main { display: block; flex: 1 0 auto; }
main:focus { outline: none; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 30; background: rgb(242 243 238 / 0.94); backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--rule); }
.site-header__inner { max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter); min-height: 64px; display: flex; align-items: center; gap: var(--s-6); }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; flex: none; }
.brand__mark { width: 30px; height: 30px; color: var(--ink); }
.brand__plot { fill: var(--survey); }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: var(--t-md); letter-spacing: -0.01em; }
.site-header__menu { flex: 1; display: flex; align-items: center; gap: var(--s-6); }
.site-nav { display: flex; align-self: stretch; }
.site-nav a {
  position: relative; display: flex; align-items: center; padding: 0 var(--s-4); min-height: 64px;
  font-weight: 600; font-size: var(--t-sm); color: var(--ink-soft); text-decoration: none;
  transition: color var(--fast) var(--ease-out);
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"]::after { content: ""; position: absolute; left: var(--s-4); right: var(--s-4); bottom: -1px; height: 3px; background: var(--survey); }
.site-nav a:focus-visible { box-shadow: inset 0 0 0 2px var(--survey); }
.menu-toggle { display: none; margin-left: auto; width: 40px; height: 40px; place-items: center; border: 1px solid var(--rule-strong); }
.menu-toggle svg { width: 20px; height: 20px; }

.account { margin-left: auto; display: flex; align-items: center; }
.account__google { min-height: 32px; }
.account__identity { display: flex; align-items: center; gap: var(--s-3); }
.account__avatar { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-weight: 700; font-size: var(--t-sm); flex: none; }
.account__avatar img { width: 100%; height: 100%; object-fit: cover; }
.account__name { font-weight: 600; font-size: var(--t-sm); max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- inner pages ---------- */
.page { padding-block: var(--s-8) var(--s-10); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.page--narrow { max-width: 960px; }
.page__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; padding-bottom: var(--s-2); }
.page__head h1 { font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.02em; }
.page__sub { color: var(--ink-soft); margin-top: var(--s-2); }
.page__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ---------- bands on the home page ---------- */
.band { padding-block: var(--section); }
.band--quiet { background: var(--paper-raised); }
.band h2 { font-size: var(--t-lg); }
.band__sub { color: var(--ink-soft); margin-top: var(--s-3); }

/* ---------- footer ---------- */
.site-footer { background: var(--paper-raised); color: var(--ink-soft); border-top: 1px solid var(--rule); font-size: var(--t-sm); }
.site-footer__inner { padding-block: var(--s-7); display: grid; grid-template-columns: 1fr auto; gap: var(--s-3) var(--s-6); align-items: center; }
.site-footer nav { display: flex; gap: var(--s-5); }
.site-footer a { color: var(--ink); text-decoration-color: var(--rule-strong); }
.site-footer a:hover { text-decoration-color: var(--survey); }
.site-footer__credit { grid-column: 1 / -1; color: var(--ink-soft); font-size: var(--t-xs); }

/* ---------- small screens ---------- */
@media (max-width: 860px) {
  .menu-toggle { display: grid; }
  .site-header__menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper-raised); border-bottom: 1px solid var(--rule); box-shadow: var(--e3);
    padding: var(--s-2) var(--gutter) var(--s-5);
    visibility: hidden; opacity: 0; transform: translateY(-6px);
    transition: opacity var(--base) var(--ease-out), transform var(--base) var(--ease-out), visibility 0s linear var(--base);
  }
  .site-header.is-menu-open .site-header__menu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .site-nav { flex-direction: column; }
  .site-nav a { min-height: 48px; padding: 0; border-bottom: 1px solid var(--rule); font-size: var(--t-base); }
  .site-nav a[aria-current="page"]::after { left: auto; right: 0; top: 50%; bottom: auto; width: 8px; height: 8px; transform: translateY(-50%); }
  .account { margin: var(--s-4) 0 0; }
  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer nav { flex-wrap: wrap; }
}