/* ════════════════════════════════════════════════
   EUCLIDEV — brutalist / monochrome / single fold
   ════════════════════════════════════════════════ */

:root {
  --ink: #000;
  --paper: #fff;
  --line: 2px;
  --bar: clamp(44px, 6.2vh, 64px);
  --pad: clamp(14px, 2.4vw, 34px);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;            /* one fold, no scroll */
  background: var(--paper);
  color: var(--ink);
  font-family: "Cal Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---- custom cursor: rounded geometric pointer (Cal Sans spirit) ---- */
:root {
  --cur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M6 3 L6 24 L11.5 18.8 L15.2 27 L19 25.3 L15.3 17.2 L23 17 Z' fill='%23000' stroke='%23fff' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 6 3, auto;
  --cur-hot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M6 3 L6 24 L11.5 18.8 L15.2 27 L19 25.3 L15.3 17.2 L23 17 Z' fill='%23fff' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 6 3, pointer;
}
body { cursor: var(--cur); transition: filter .25s ease; }
a, .ch { cursor: var(--cur-hot); }

/* invert the whole page while a giant title letter is hovered */
body:has(.title .ch:hover) { filter: invert(1); }

/* ---- grain overlay ---- */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (hover: none) { .grain { display: none; } }

/* ════════════ FRAME / GRID ════════════ */
.frame {
  height: 100%; width: 100%;
  display: grid;
  /* minmax(0,…) stops the nowrap title from stretching the track past the viewport */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--bar) minmax(0, 1fr) var(--bar);
  border: var(--line) solid var(--ink);
}

/* ════════════ BARS ════════════ */
.bar {
  display: flex; align-items: stretch;
  font-size: clamp(10px, 1.05vw, 13px);
  letter-spacing: .14em; text-transform: uppercase;
  font-family: var(--mono);
}
.bar--top { border-bottom: var(--line) solid var(--ink); }
.bar--bot { border-top: var(--line) solid var(--ink); }

.bar__cell { display: flex; align-items: center; padding: 0 var(--pad); }
.bar__cell--brand {
  gap: .6em; font-family: "Cal Sans", sans-serif; text-transform: none;
  letter-spacing: .01em; font-size: clamp(15px, 1.6vw, 20px);
  border-right: var(--line) solid var(--ink);
}

.bar__cell--mid { flex: 1; justify-content: flex-end; opacity: .55; }

/* ════════════ HERO ════════════ */
.hero {
  position: relative; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(10px, 2.2vh, 30px);
  overflow: hidden;
}

/* giant edge-to-edge wordmark — JS fits font-size exactly to the viewport */
.title {
  display: block; width: 100%; max-width: 100%; min-width: 0;
  text-align: left; padding-left: var(--pad);
  /* JS sets text-indent in px to cancel the "E" side-bearing (flush with subtitle) */
  white-space: nowrap; overflow: hidden;
  font-weight: 400; line-height: .8;
  font-size: 14vw;                   /* fallback before JS fit */
  letter-spacing: -0.01em;           /* subtly tight without colliding glyphs */
  user-select: none;
}
.title .ch {
  display: inline-block;
  transform: translateY(115%);
  animation: rise .9s cubic-bezier(.16,1,.3,1) forwards;
  transition: -webkit-text-stroke .25s ease, color .25s ease;
}
.title .ch:nth-child(1){ animation-delay:.05s } .title .ch:nth-child(2){ animation-delay:.10s }
.title .ch:nth-child(3){ animation-delay:.15s } .title .ch:nth-child(4){ animation-delay:.20s }
.title .ch:nth-child(5){ animation-delay:.25s } .title .ch:nth-child(6){ animation-delay:.30s }
.title .ch:nth-child(7){ animation-delay:.35s } .title .ch:nth-child(8){ animation-delay:.40s }
/* hovering any title letter inverts the entire page (black ⇄ white);
   the letter itself flips to solid white on black — no border */
.title .ch { cursor: var(--cur-hot); }
@keyframes rise { to { transform: translateY(0); } }

/* metadata pinned around the hero */
.hero__meta {
  position: absolute; font-family: var(--mono);
  font-size: clamp(10px, 1vw, 13px); letter-spacing: .12em;
  text-transform: uppercase; line-height: 1.5;
  opacity: 0; animation: fade .8s ease forwards .7s;
}
.hero__meta--tl { top: var(--pad); left: var(--pad); display: flex; flex-direction: column; }
.hero__meta--tr { top: var(--pad); right: var(--pad); font-variant-numeric: tabular-nums; }
.hero__meta--bl { bottom: var(--pad); left: var(--pad); }
.hero__statement {
  width: 100%; text-align: left; padding-left: var(--pad);  /* exact left alignment with title */
  font-family: "Cal Sans", sans-serif; text-transform: none;
  letter-spacing: -.01em; font-size: clamp(15px, 1.9vw, 26px);
  line-height: 1.1; opacity: 0; animation: fade .8s ease forwards .8s;
}

.blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes fade { to { opacity: 1; } }

/* ════════════ FOOTER: ticker + cta ════════════ */
.bar--bot { padding: 0; }
.ticker { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; }
.ticker__track {
  display: flex; white-space: nowrap;
  animation: scroll 26s linear infinite;
}
.ticker__track span { padding-right: 1em; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* short viewports: keep it one fold */
@media (max-height: 560px) {
  .hero__statement, .hero__meta--bl { display: none; }
}
@media (max-width: 600px) {
  .bar__cell--mid { display: none; }
  .title { letter-spacing: -0.02em; }
  .hero__statement { font-size: 13px; }
}