/* ==========================================================================
   Greta Volungevičiūtė — shared foundation
   Loaded by every page before its own stylesheet. Holds the design tokens,
   the reset, and the header, so the wordmark and nav are identical
   everywhere and only ever need editing in one place.
   ========================================================================== */

:root {
  /* canvas — every page is authored at 1440 and scaled down to fit */
  --design-w: 1440px;

  /* palette */
  --bg: #0a0a0a;
  --bg-lift: #131313;
  --ink: #f4f3f1;
  --ink-dim: rgba(244, 243, 241, 0.55);
  --ink-faint: rgba(244, 243, 241, 0.28);
  --hairline: rgba(244, 243, 241, 0.12);

  /* type */
  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Unbounded", var(--font);       /* wordmark, project titles */
  --font-nav: "Darker Grotesque", var(--font);    /* nav, captions, numbers */
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
}

body {
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; }

/* --------------------------------------------------------------------------
   Header — sits at the top of the 1440 canvas on every page
   -------------------------------------------------------------------------- */

.header {
  position: absolute;
  z-index: 40;
  top: 0;
  left: 0;
  width: var(--design-w);
  height: 88px;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav {
  display: flex;
  gap: 34px;
}

.nav a {
  position: relative;
  font-family: var(--font-nav);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: color 0.35s ease;
}

/* hover strikes a hairline straight through the word. scaleY keeps it under a
   pixel so it reads as a rule, not an underline; the width trims the trailing
   letter-spacing so the line stops at the last glyph, not past it. */
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  /* Measured off the caps, not guessed off the box. Darker Grotesque at
     line-height: normal puts the baseline 1.0625em below the top (its ascent),
     and its capital height is 0.625em, so the middle of a capital is
     1.0625 − 0.3125 = 0.75em down. Half the line box — even nudged — sat 2.6px
     high of that, because the box carries a descender depth no capital uses. */
  top: 0.75em;
  width: calc(100% - 0.04em); /* trims the trailing letter-spacing */
  height: 1px;
  background: currentColor;
  transform: scaleX(0) scaleY(0.6);
  transform-origin: 0 50%;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1) scaleY(0.6); }

/* the page you are already on reads as active. Full-strength ink only — the
   strike is reserved for hover, and leaving it on would read as struck out. */
.nav a.is-current { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .nav a,
  .nav a::after { transition: none; }
}

/* --------------------------------------------------------------------------
   Footer — the same two lines on every page

   Lives here for the same reason the header does: one copy, four pages. The
   colours are tokens, so it comes out black on the white pages and white on
   the dark ones without a single page-specific rule. Only the space above it
   belongs to each page.
   -------------------------------------------------------------------------- */

.site-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-nav);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.site-foot a { transition: color 0.35s ease; }
.site-foot a:hover { color: var(--ink); }

/* one line each on a phone — side by side the two would meet in the middle */
@media (max-width: 900px) {
  .site-foot {
    display: block;
    font-size: 13px;
  }

  .site-foot a {
    display: block;
    margin-top: 10px;
  }
}

/* --------------------------------------------------------------------------
   Boot screen

   A white card over everything with the wordmark typing itself out. It is
   plain markup rather than something the script builds, so it is on screen at
   the very first paint — a loading screen that waits for its own JavaScript
   would arrive after the thing it is meant to cover.

   js/boot.js takes it away and then removes it from the document. The
   animation below is the failsafe for the script never running at all: it is
   why removing the element matters, since an element still in the page at 6s
   would flash white again as the keyframes took over from the class.
   -------------------------------------------------------------------------- */

#boot {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  transition: opacity 0.55s ease;
  animation: boot-failsafe 0.5s ease 6s forwards;
}

#boot.is-done {
  opacity: 0;
  pointer-events: none;
}

@keyframes boot-failsafe {
  to { opacity: 0; visibility: hidden; }
}

/* the wordmark, at the wordmark's own size and setting — this is the same
   declaration block as .brand, only black and centred */
.boot__line {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #0d0d0d;
}

/* The finished name, held invisible, purely to give the box its full width
   from the start. Without it a centred box grows as it types and the whole
   name creeps leftward — the letters appear and the word slides at once. */
.boot__ghost { visibility: hidden; }

.boot__type {
  position: absolute;
  left: 0;
  top: 0;
}

.boot__caret {
  display: inline-block;
  width: 2px;
  height: 0.92em;
  margin-left: 4px;
  /* sits on the baseline rather than the middle of the line box, so it lines
     up with the caps it is following */
  vertical-align: -0.04em;
  background: #0d0d0d;
  animation: boot-blink 0.9s steps(1) infinite;
}

@keyframes boot-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

@media (max-width: 900px) {
  /* the wordmark is 12px on phones — the loading screen follows it */
  .boot__word { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  #boot { transition: none; }
  .boot__caret { animation: none; }
}