@layer reset, tokens, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body { margin: 0; }
  :where(h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
  :where(ul, ol) { padding: 0; }
  :where(img, picture, video, canvas) { display: block; max-inline-size: 100%; }
  :where(button, input, textarea, select) { font: inherit; }
  :where(a) { color: inherit; }
}

@layer tokens {
  :root {
    --ne-ink: #08142b;
    --ne-night: #0a1e42;
    --ne-cobalt: #164fa3;
    --ne-signal: #eb3323;
    --ne-ice: #eaf1f8;
    --ne-mist: #f4f7fa;
    --ne-paper: #fff;
    --ne-text: #27364d;
    --ne-muted: #66758a;
    --ne-line: color-mix(in srgb, var(--ne-ink) 14%, transparent);
    --ne-font-display: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    --ne-font-body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ne-shell: 90rem;
    --ne-gutter: clamp(1.25rem, 4vw, 5rem);
    --ne-section: clamp(5rem, 10vw, 10rem);
    --ne-ease: cubic-bezier(.22, 1, .36, 1);
    --ne-header-h: 5.75rem;
  }
}

@layer base {
  body {
    background: var(--ne-paper);
    color: var(--ne-text);
    font-family: var(--ne-font-body);
    font-size: clamp(1rem, .3vw + .94rem, 1.125rem);
    line-height: 1.62;
    overflow-x: clip;
  }

  body.admin-bar { --ne-admin: 32px; }

  :where(h1, h2, h3) {
    color: var(--ne-ink);
    font-family: var(--ne-font-display);
    font-weight: 700;
    letter-spacing: -.055em;
    line-height: .94;
    text-wrap: balance;
  }

  h1 { font-size: clamp(4rem, 10vw, 9.5rem); }
  h2 { font-size: clamp(3rem, 7vw, 7.4rem); }
  h3 { font-size: clamp(2rem, 3.8vw, 4rem); }
  p { text-wrap: pretty; }
  ::selection { background: var(--ne-signal); color: white; }
  :focus-visible { outline: 3px solid var(--ne-signal); outline-offset: 4px; }
}

@layer components {
  .ne-shell {
    inline-size: min(100%, var(--ne-shell));
    margin-inline: auto;
    padding-inline: var(--ne-gutter);
  }

  .ne-section { padding-block: var(--ne-section); }

  .ne-kicker {
    align-items: center;
    color: var(--ne-cobalt);
    display: flex;
    font-size: .7rem;
    font-weight: 750;
    gap: .65rem;
    letter-spacing: .18em;
    line-height: 1.3;
    text-transform: uppercase;

    &::before {
      background: var(--ne-signal);
      block-size: .42rem;
      border-radius: 50%;
      content: "";
      flex: 0 0 .42rem;
      inline-size: .42rem;
    }

    &.ne-kicker--light { color: color-mix(in srgb, var(--ne-ice) 78%, transparent); }
  }

  .ne-text-link {
    align-items: center;
    color: var(--ne-ink);
    display: inline-flex;
    font-size: .75rem;
    font-weight: 800;
    gap: 1rem;
    letter-spacing: .13em;
    padding-block: .75rem;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;

    &::after {
      background: currentColor;
      block-size: 1px;
      bottom: .5rem;
      content: "";
      inline-size: 100%;
      inset-inline-start: 0;
      position: absolute;
      transform: scaleX(.25);
      transform-origin: left;
      transition: transform .45s var(--ne-ease);
    }

    &:hover::after { transform: scaleX(1); }
    &.ne-text-link--light { color: var(--ne-paper); }
    span { font-size: 1rem; transition: transform .3s var(--ne-ease); }
    &:hover span { transform: translate(.2rem, -.2rem); }
  }

  .ne-skip-link {
    background: var(--ne-paper);
    color: var(--ne-ink);
    inset-block-start: .75rem;
    inset-inline-start: .75rem;
    padding: .7rem 1rem;
    position: fixed;
    transform: translateY(-160%);
    z-index: 1000;

    &:focus { transform: translateY(0); }
  }

  .ne-header {
    color: var(--ne-paper);
    inset-block-start: var(--ne-admin, 0);
    inset-inline: 0;
    position: fixed;
    transition: background .35s ease, color .35s ease, box-shadow .35s ease;
    z-index: 100;

    &.is-scrolled,
    body:not(.home) & {
      backdrop-filter: blur(18px);
      background: color-mix(in srgb, var(--ne-ink) 91%, transparent);
      box-shadow: 0 1px 0 rgba(255,255,255,.1);
    }
  }

  .ne-header__inner {
    align-items: center;
    block-size: var(--ne-header-h);
    display: grid;
    grid-template-columns: 1fr auto;
  }

  .ne-brand {
    align-items: center;
    display: inline-flex;
    inline-size: max-content;
    text-decoration: none;
    z-index: 2;
  }

  .ne-brand__logo {
    block-size: 4.25rem;
    filter: brightness(0) invert(1);
    inline-size: auto;
    object-fit: contain;
  }

  .ne-brand__text {
    font-size: .92rem;
    font-weight: 760;
    letter-spacing: -.02em;
    line-height: 1.05;

    small {
      display: block;
      font-size: .56rem;
      font-weight: 650;
      letter-spacing: .17em;
      margin-block-start: .35rem;
      opacity: .65;
      text-transform: uppercase;
    }
  }

  .ne-menu-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    font-size: .68rem;
    font-weight: 700;
    gap: .7rem;
    letter-spacing: .15em;
    padding: .75rem 0 .75rem .75rem;
    text-transform: uppercase;
    z-index: 2;

    i, i::before {
      background: currentColor;
      block-size: 1px;
      content: "";
      display: block;
      inline-size: 1.35rem;
      transition: transform .25s ease;
    }

    i::before { transform: translateY(-.38rem); }
    &[aria-expanded="true"] i { transform: rotate(45deg); }
    &[aria-expanded="true"] i::before { transform: rotate(-90deg); }
  }

  .ne-nav {
    align-items: center;
    background: var(--ne-ink);
    display: flex;
    inset: 0;
    opacity: 0;
    padding: calc(var(--ne-header-h) + 3rem) var(--ne-gutter) 3rem;
    pointer-events: none;
    position: fixed;
    transition: opacity .25s ease;

    &[data-open] { opacity: 1; pointer-events: auto; }
  }

  .ne-nav__list {
    display: grid;
    gap: 1.25rem;
    list-style: none;

    a {
      color: var(--ne-paper);
      font-family: var(--ne-font-display);
      font-size: clamp(2.6rem, 12vw, 5rem);
      font-weight: 700;
      letter-spacing: -.045em;
      line-height: 1;
      text-decoration: none;
    }
  }

  .ne-header__coordinates { display: none; }

  .ne-footer {
    background: var(--ne-ink);
    color: var(--ne-paper);
    padding-block: clamp(5rem, 10vw, 9rem) 2rem;
  }

  .ne-footer__grid { display: grid; gap: 5rem; }

  .ne-footer__brand {
    display: inline-block;
    margin-block-end: 2.5rem;
    text-decoration: none;
  }

  .ne-footer__logo {
    block-size: clamp(6rem, 8vw, 8rem);
    filter: brightness(0) invert(1);
    inline-size: auto;
  }

  .ne-footer__statement p {
    font-family: var(--ne-font-display);
    font-size: clamp(3.5rem, 8vw, 8rem);
    font-weight: 700;
    letter-spacing: -.06em;
    line-height: .9;
    margin-block-start: 2.25rem;
  }

  .ne-footer__contact {
    align-self: end;

    address { display: grid; font-style: normal; gap: .75rem; margin-block: 2rem; }
    a { color: var(--ne-paper); font-size: clamp(1rem, 1.2vw, 1.25rem); text-decoration-color: rgba(255,255,255,.35); text-underline-offset: .25em; }
  }

  .ne-footer__note { color: color-mix(in srgb, var(--ne-paper) 58%, transparent); font-size: .9rem; max-inline-size: 30rem; }
  .ne-footer__base { border-block-start: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; font-size: .7rem; gap: 1rem 2rem; justify-content: space-between; letter-spacing: .09em; margin-block-start: 5rem; padding-block-start: 1.5rem; text-transform: uppercase; }
  .ne-footer__base a { text-decoration: none; }

  .ne-prose-page { min-block-size: 70vh; padding-block-start: calc(var(--ne-header-h) + var(--ne-section)); }
  .ne-prose-page__inner { max-inline-size: 62rem; }
  .ne-prose-page h1 { font-size: clamp(3.5rem, 8vw, 7rem); margin-block: 2rem 4rem; }
  .ne-prose { max-inline-size: 46rem; }
  .ne-prose > * + * { margin-block-start: 1.25em; }
  .ne-prose h2 { font-size: clamp(2rem, 4vw, 3.5rem); }

  .ne-error-page { align-items: end; background: linear-gradient(135deg, var(--ne-ink), var(--ne-cobalt)); color: var(--ne-paper); display: grid; min-block-size: 100svh; padding-block: calc(var(--ne-header-h) + 4rem) 6rem; }
  .ne-error-page h1 { color: inherit; margin-block: 2rem; }
  .ne-error-page p { color: var(--ne-ice); margin-block-end: 2rem; }
}

@layer utilities {
  [data-reveal] { opacity: 0; transform: translateY(1.75rem); transition: opacity .8s var(--ne-ease), transform .8s var(--ne-ease); }
  [data-reveal].is-visible { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; }
    [data-reveal] { opacity: 1; transform: none; }
  }
}

@media (min-width: 64rem) {
  .ne-header__inner { grid-template-columns: minmax(14rem, 1fr) auto minmax(14rem, 1fr); }
  .ne-menu-toggle { display: none; }
  .ne-nav { background: transparent; inset: auto; opacity: 1; padding: 0; pointer-events: auto; position: static; }
  .ne-nav__list { display: flex; gap: clamp(1.5rem, 3vw, 3.5rem); }
  .ne-nav__list a { font-family: inherit; font-size: .68rem; letter-spacing: .14em; position: relative; text-transform: uppercase; }
  .ne-nav__list a::after { background: var(--ne-signal); block-size: 2px; bottom: -.55rem; content: ""; inline-size: 100%; inset-inline-start: 0; position: absolute; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
  .ne-nav__list a:hover::after { transform: scaleX(1); }
  .ne-header__coordinates { display: block; font-size: .57rem; justify-self: end; letter-spacing: .13em; line-height: 1.45; opacity: .62; text-align: end; }
  .ne-footer__grid { grid-template-columns: minmax(0, 1.7fr) minmax(18rem, .7fr); }
}

@media (max-width: 48rem) {
  body.admin-bar { --ne-admin: 46px; }
}