/* Dimenzen home (index.html): white paper, or black at night as the system is set, the emblem alone in the middle, the
   name and one line bottom left, the e-mail bottom right. The emblem is a box in iso view whose inner edges became the
   traces of a circuit board: home.js plays its making on a canvas over it (the board made, its traces turned into the
   box's edges, the box welded in steel, then the emblem in ink), and the SVG takes over from the last frame. A mouse
   near it (or a finger on it) slowly brings its board back, all gold. */
:root {
  --bg: #ffffff;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #86868b;
  --line: #d2d2d7;
  --accent: #1a7f37;
  --ease-out: cubic-bezier(.23, 1, .32, 1);        /* entering; home.js evaluates the same two curves */
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);    /* moving on screen */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gut: clamp(16px, 2.8vw, 44px);
  --m: clamp(132px, 25vmin, 232px);     /* the emblem */
  color-scheme: light;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* night, as the system is set: the paper black, the ink white, the greys a step darker; home.js reads the ink from here
   for the film and the hover */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000; --ink: #f5f5f7; --ink-2: #a1a1a6; --ink-3: #6e6e73; --line: #424245;
    color-scheme: dark;
  }
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  padding-left: max(var(--gut), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gut), env(safe-area-inset-right, 0px));
  padding-block: var(--gut);
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- the emblem: as drawn by default (no JS, no canvas); home.js plays the film over it and the box behind it */
.stage {
  display: grid; place-items: center;
  min-height: calc(var(--m) * 1.8);   /* air round it */
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation;
}
.mark { display: block; width: var(--m); height: calc(var(--m) * .985); overflow: visible; color: var(--ink); }
.part { fill: none; stroke: currentColor; stroke-linejoin: round; }
.hx, .sp { stroke-width: 7.34; }
.c { stroke-width: 6.3; }
.part.a { fill: currentColor; stroke: none; }
.build { display: none; }   /* the box, kept for its geometry: home.js reads the film's box from it */
.board { fill: var(--accent); fill-opacity: .8; fill-rule: evenodd; }   /* on hover (home.js): the green board at 80%, */
.copper { opacity: .8; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }   /* its copper at 80%, in the film's gold (home.js) */
.copper .trace, .copper .via { fill: none; }
.copper .via { stroke-width: .64; }
.copper .pad { stroke: none; }
.js .mark { opacity: 0; animation: show 0s 2.5s forwards; }   /* home.js shows it once the first pose is set; this is the fallback */
.js .mark.is-on { opacity: 1; animation: none; }

/* ---- the name and the line, bottom left; the e-mail bottom right */
.foot {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 22px 48px;
}
.js .foot { opacity: 0; animation: show 0s 2.5s forwards; }   /* the text waits for the emblem; this is the fallback */
.is-drawing .foot { animation: none; }                         /* home.js holds it while the film plays */
.is-drawn .foot { opacity: 1; animation: rise .5s var(--ease-out); }   /* and brings it in as the film ends */
.id { display: grid; gap: 10px; min-width: 0; }
h1 {
  margin: 0;
  font-size: clamp(38px, 2.4vw + 22px, 60px); font-weight: 600; letter-spacing: -.036em; line-height: .95;
}
.tag {
  margin: 0;
  font-size: clamp(17px, .45vw + 14px, 21px); line-height: 1.3; letter-spacing: -.012em;
  color: var(--ink-2); text-wrap: balance;
}
.meta {
  margin: 0;
  display: flex; align-items: center;
  font-size: 14px; line-height: 1; color: var(--ink-2);
}
.meta a {
  min-height: 44px;
  display: inline-flex; align-items: center;
  color: inherit; text-decoration: none; white-space: nowrap;
  transition: text-decoration-color .2s ease;
}
.meta .mail {
  color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.meta a:hover { color: var(--ink); text-decoration-color: currentColor; }

/* ---- phones upright: everything bottom left, the e-mail on its own row */
@media (max-width: 599px) {
  .foot { flex-direction: column; align-items: stretch; gap: 18px; }
}

@keyframes show { to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .is-drawn .foot { animation-name: fade; }   /* the same entrance without the rise */
}

/* ---- the film (home.js): a canvas over the emblem while the intro plays, then gone */
.stage { position: relative; }
.film { position: absolute; pointer-events: none; transition: opacity .2s var(--ease-out); }
.film.is-done { opacity: 0; }
.is-drawing .mark { animation: none; }   /* the film holds the emblem back while it plays */