/* ==========================================================================
   Open Ground — masthead, footer, and the four switches
   ========================================================================== */

.top {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--top), transparent 4%),
    color-mix(in oklab, var(--top), transparent 34%));
  transition: box-shadow var(--ease-s), background 420ms var(--out);
}
.top[data-scrolled='1'] { box-shadow: 0 1px 0 var(--surface-sunk), 0 14px 40px rgba(var(--shadow), calc(var(--shadow-a) * 0.7)); }

.top__in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 13px var(--gutter);
  display: flex;
  align-items: center;
  gap: 14px;
}

/* -- Wordmark: the letters carry the motion --------------------------- */
.mark {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--mark);
  letter-spacing: -0.035em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
  display: inline-flex;
  flex: none;
  padding: 4px 2px;
}
.mark b { font-weight: 700; display: inline-flex; }
.mark i { font-style: normal; display: inline-block; will-change: transform; }
.mark .go { color: var(--pulse-ink); }
:root[data-mode='dark'] .mark .go { color: var(--pulse); }

/* every letter springs, the middle "go" springs highest and turns */
.mark:hover i, .mark:focus-visible i { animation: hop var(--hop) var(--d, 0ms) both; }
.mark:hover .go i, .mark:focus-visible .go i { animation: hop-go var(--hop) var(--d, 0ms) both; }

@keyframes hop {
  0%   { transform: translateY(0); }
  42%  { transform: translateY(-9px); }
  100% { transform: translateY(0); }
}
@keyframes hop-go {
  0%   { transform: translateY(0) rotate(0); }
  42%  { transform: translateY(-15px) rotate(-9deg); }
  100% { transform: translateY(0) rotate(0); }
}

/* -- "go" jumps on its own, every seven seconds ---------------------------
   The loop from ../user-redesign's Wordmark: a crouch, a leap, a landing
   that squashes and settles, then five seconds of stillness. It runs on
   the "go" itself, and the hover hop above runs on its letters, so a hover
   never interrupts the loop. --jump-at is the phase, set from the wall
   clock by chrome.js, so every wordmark on a page lands on the same beat
   and the beat carries over from one page to the next. The hero's word
   is inline (see home.css), where a transform does nothing, so there the
   loop runs on the letters, which are already inline blocks. */
.mark .go,
.hmark .go i {
  transform-origin: 50% 90%;
  animation: go-jump 7s cubic-bezier(0.34, 1.2, 0.64, 1) var(--jump-at, 0ms) infinite;
}
@keyframes go-jump {
  0%, 58%, 100% { transform: translateY(0) scale(1, 1); }
  61%  { transform: translateY(0.04em) scale(1.06, 0.88); }
  68%  { transform: translateY(-0.42em) scale(0.94, 1.1); }
  74%  { transform: translateY(0) scale(1.08, 0.86); }
  78%  { transform: translateY(-0.12em) scale(0.98, 1.03); }
  83%  { transform: translateY(0) scale(1.03, 0.97); }
  88%  { transform: translateY(0) scale(1, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .mark .go, .hmark .go i { animation: none; }
}

/* -- Navigation -------------------------------------------------------- */
.top__nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }

.navlink {
  position: relative;
  font-size: 15px;
  font-weight: 550;
  color: var(--ink-2);
  text-decoration: none;
  padding: 9px 13px;
  border-radius: var(--r-pill);
  transition: color var(--ease-xs);
  white-space: nowrap;
}
.navlink::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--pulse-wash);
  transform: scale(0.7);
  opacity: 0;
  transition: transform var(--spring), opacity var(--ease-xs);
}
.navlink > span { position: relative; }
.navlink:hover, .navlink:focus-visible { color: var(--ink); }
.navlink:hover::before, .navlink:focus-visible::before { transform: scale(1); opacity: 1; }

/* the active page keeps a drawn trace under it, not a fill */
.navlink[aria-current='page'] { color: var(--ink); font-weight: 650; }
.navlink[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 13px; right: 13px; bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--pulse);
  transform-origin: left;
  animation: draw-in 620ms var(--out) both;
}
@keyframes draw-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* -- Switch clusters (DE/EN, mode) ---------------------------- */
.switches { display: flex; align-items: center; gap: 6px; }
.seg--lang { margin-left: 6px; margin-right: 6px; }

.seg {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--surface-sunk);
  position: relative;
}
.seg button {
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  color: var(--ink-3);
  transition: color var(--ease-xs);
  min-width: 34px;
}
.seg button[aria-pressed='true'] { color: var(--ink); }
.seg button:hover { color: var(--ink); }
.seg__thumb {
  position: absolute;
  z-index: 0;
  top: 3px; bottom: 3px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  box-shadow: 0 1px 4px rgba(var(--shadow), calc(var(--shadow-a) * 0.9));
  /* transform only: the buttons in a segment are equal width, so the
     width was transitioning from a value to itself and costing layout. */
  transition: transform var(--spring);
}

/* the mode switch: one glyph that becomes the other */
.modeswitch {
  width: 38px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  background: var(--surface-sunk);
  transition: color var(--ease-xs), background var(--ease-s);
}
.modeswitch:hover { color: var(--ink); background: var(--pulse-wash); }
.modeswitch svg { width: 17px; height: 17px; overflow: visible; }
.modeswitch .sun-core { transition: transform var(--spring), opacity var(--ease-s); transform-origin: center; }
.modeswitch .sun-ray { transition: transform var(--spring), opacity var(--ease-s); transform-origin: center; }
.modeswitch .moon { transition: transform var(--spring), opacity var(--ease-s); transform-origin: center; }
:root[data-mode='light'] .modeswitch .moon { opacity: 0; transform: scale(0.3) rotate(-70deg); }
:root[data-mode='dark'] .modeswitch .sun-core { transform: scale(0.72); }
:root[data-mode='dark'] .modeswitch .sun-ray { opacity: 0; transform: scale(0.4); }

/* -- Mobile menu ------------------------------------------------------- */
.burger {
  display: none;
  width: 42px; height: 42px;
  border-radius: var(--r-pill);
  background: var(--surface);
  place-items: center;
  color: var(--ink);
}
.burger span {
  display: block;
  width: 17px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--spring), opacity var(--ease-xs);
}
.burger span + span { margin-top: 4px; }
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.sheet-nav {
  display: none;
  position: fixed;
  inset: 62px 12px auto 12px;
  z-index: 49;
  background: color-mix(in oklab, var(--ground-2), transparent 3%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--r-lg);
  padding: 10px;
  box-shadow: var(--lift-2);
  transform-origin: top right;
}
.sheet-nav a {
  display: block;
  padding: 13px 16px;
  border-radius: var(--r);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 16.5px;
}
.sheet-nav a:hover { background: var(--pulse-wash); }
.sheet-nav[data-open='1'] { display: block; animation: sheet-in 340ms var(--out) both; }
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 1000px) {
  .top__nav .navlink { display: none; }
  .burger { display: grid; }
  .top__nav { gap: 6px; }
}
@media (max-width: 560px) {
  .seg--lang button { min-width: 30px; padding: 6px 8px; }
  .mark { font-size: var(--mark-sm); }
  .switches { gap: 4px; }
}

/* In the sheet the switches get a row of their own, above the links. */
.switches--sheet {
  order: -1;
  width: auto;
  justify-content: flex-start;
  gap: 10px;
  margin: 4px 10px 10px;
  padding-bottom: 14px;
  background: linear-gradient(to right, var(--line), transparent) bottom / 100% 1px no-repeat;
}
.sheet-nav { display: none; flex-direction: column; }
.sheet-nav[data-open='1'] { display: flex; }

/* -- Footer ------------------------------------------------------------ */
.foot {
  position: relative;
  z-index: 2;
  background: var(--field);
  color: var(--on-field);
  padding-block: clamp(48px, 7vw, 84px) 34px;
  margin-top: clamp(28px, 4vw, 56px);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  overflow: hidden;
}
.foot__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px 28px;
}
.foot .mark { color: var(--on-field); font-size: var(--mark-lg); }
.foot .mark .go { color: var(--pulse); }
.foot__blurb { color: var(--on-field-2); margin-top: 14px; max-width: 34ch; font-size: 15.5px; }
.foot__col h2 {
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-field-3);
  margin-bottom: 14px;
}
.foot__col a, .foot__col span {
  display: block;
  color: var(--on-field-2);
  text-decoration: none;
  padding: 5px 0;
  font-size: 15.5px;
  width: fit-content;
  transition: color var(--ease-xs), transform var(--ease-s);
}
.foot__col a:hover { color: var(--on-field); transform: translateX(4px); }
.foot__base {
  margin-top: 46px;
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
  color: var(--on-field-3);
  font-size: 13.5px;
  background: linear-gradient(to right, color-mix(in oklab, var(--on-field), transparent 82%), transparent) top / 100% 1px no-repeat;
}

@media (max-width: 860px) {
  .foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .foot__grid { grid-template-columns: 1fr; gap: 28px; }
}