/* Reset, type, layout shells and shared components. Tokens: css/tokens.css. Rules: design.md */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-padding-block-start: calc(44px + 2 * var(--sp-4)); /* the fixed nav: 44px button + its block padding */
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  min-height: 100vh;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); text-wrap: balance; font-weight: 700; line-height: 1.15; }
p { margin: 0; text-wrap: pretty; }
li { text-wrap: pretty; }
ol, ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); }

.skip {
  position: absolute;
  inset-block-start: var(--sp-2);
  inset-inline-start: var(--sp-2);
  z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--r-sm);
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--ink-muted);
}
/* tracking only on Latin runs: never on Hebrew (design.md, Typography) */
.label bdi, .label[dir="ltr"], :root[lang="en"] .label { letter-spacing: 0.08em; }
.h-display { font-size: var(--fs-display); }
.h-mega { font-size: var(--fs-mega); font-weight: 800; }

section { padding-block: var(--section-pad); position: relative; }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 18px 34px;
  border: 0;
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) ease, box-shadow var(--dur-base) ease;
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--sm { padding: 10px 20px; font-size: var(--fs-small); }
.btn--lg { padding: 22px 44px; }

/* nav */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  padding-block-start: env(safe-area-inset-top, 0px);
  transition: background-color var(--dur-base) ease, box-shadow var(--dur-base) ease;
}
.nav.is-scrolled { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(var(--sp-3)); box-shadow: 0 1px 0 var(--line); }
.nav__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--sp-4) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}
.nav__brand { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; text-decoration: none; white-space: nowrap; }
.nav__links { display: flex; align-items: center; gap: var(--sp-6); }
.nav__links a:not(.btn) { text-decoration: none; font-weight: 500; white-space: nowrap; }
.nav__end { display: flex; align-items: center; gap: var(--sp-3); }
/* the language switch: a frequent surface, so no motion; visible at every width */
.nav__lang {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding-inline: var(--sp-2);
  font-family: var(--font-body);
  font-weight: 500;
  text-decoration: none;
}
.nav__lang svg { flex: none; }
.nav__menu {
  display: none;
  min-height: 44px;
  padding-inline: var(--sp-4);
  border: 1px solid var(--ink);
  border-radius: var(--r-full);
  background: transparent;
  font-weight: 600;
}
.nav__sheet {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-5);
  padding-inline: var(--gutter);
}
.nav__sheet a { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 700; text-decoration: none; }
/* a landscape phone is about 375 px tall: five display-size links overflow it, so they step down to h3 */
@media (max-height: 30rem) {
  .nav__sheet { gap: var(--sp-3); }
  .nav__sheet a { font-size: var(--fs-h3); }
}

/* tablet: the four anchors, the CTA and the switch share one row */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .nav__links { gap: var(--sp-4); }
}
/* the narrowest phones keep the globe only; the label stays as the accessible name */
@media (max-width: 22.49rem) {
  .nav__lang-text { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (max-width: 47.99rem) {
  .nav__links { display: none; }
  .nav__menu { display: inline-flex; align-items: center; }
}

/* footer */
.footer { padding-block: var(--sp-7); border-block-start: 1px solid var(--line); }
.footer__inner { display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-small); color: var(--ink-muted); }

@media (hover: hover) {
  .nav__lang:hover { color: var(--accent); } /* colour only: the switch never moves */
  .btn--primary:hover { box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 28%, transparent); }
}

/* reduced motion: the press keeps its colour cue, loses its movement */
@media (prefers-reduced-motion: reduce) {
  .btn { transition-property: background-color, box-shadow; }
  .btn:active { transform: none; background-color: color-mix(in srgb, var(--accent) 85%, var(--ink)); }
}
/* reduced transparency: a solid nav, no blur */
@media (prefers-reduced-transparency: reduce) {
  .nav.is-scrolled { background: var(--bg); backdrop-filter: none; }
}