/* aludel.ai: the landing page. Black and white and nothing else (brand/README.md): the mark at the
   size of a poster, why Aludel exists, three beliefs each proven by a screen of the app itself, one
   address. One grid: the wordmark, the
   headings and the footer start on its left edge; the way in and every phone end on its right.
   Spacing is in steps of 8. Our own files only, no script, no CDN. */
@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --black: #050608; --ink: #f4f5f7; --muted: #a0a7b4; --faint: #7c8494; --rule: #1e2129; --ring: #2c2f3a;
  --edge: clamp(24px, 6vw, 96px);
  --wrap: min(1200px, 100% - 2 * var(--edge));
  --phone: clamp(248px, 25vw, 336px);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--black); }
body { margin: 0; background: var(--black); color: var(--ink); font: 400 17px/1.55 var(--font); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
a { color: inherit; }
::selection { background: var(--ink); color: var(--black); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }

/* The mark and the wordmark: our own files, drawn in ink as masks, never redrawn. */
.mark { display: block; aspect-ratio: 139.17 / 121.6; background: var(--ink); mask: url("/mark.svg") center / contain no-repeat; }
.wordmark { display: block; width: 140px; aspect-ratio: 627.17 / 113.6; background: var(--ink); mask: url("/logo.svg") center / contain no-repeat; }

/* The head: the name on the left edge, what it is in the middle, the way in on the right. */
.bar { position: absolute; z-index: 1; top: 0; left: 50%; translate: -50% 0; width: var(--wrap); height: 88px; display: flex; justify-content: space-between; align-items: center; }
.tagline { position: absolute; left: 50%; translate: -50% 0; margin: 0; font: 500 12px/16px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.bar-link { padding: 11px 18px; border: 1px solid var(--ring); border-radius: 999px; font: 500 14px/16px var(--font); text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.bar-link:hover { background: var(--ink); border-color: var(--ink); color: var(--black); }

/* The poster: the mark, one line, one more, and where to write. */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 112px var(--edge) 120px; text-align: center; }
.hero .mark { height: clamp(144px, 27svh, 280px); }
h1 { max-width: 12em; margin: clamp(40px, 7svh, 72px) 0 0; font: 300 clamp(40px, 5.6vw, 80px)/1.04 var(--font); letter-spacing: -0.045em; text-wrap: balance; }
.lede { max-width: 30em; margin: 24px 0 0; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: var(--muted); text-wrap: balance; }
.invite { margin: 40px 0 0; font-size: 15px; line-height: 24px; color: var(--faint); }
.invite a { padding-bottom: 2px; border-bottom: 1px solid var(--faint); color: var(--ink); text-decoration: none; transition: border-color .2s; }
.invite a:hover { border-color: var(--ink); }
.cue { position: absolute; left: 50%; bottom: 0; width: 1px; height: 72px; background: linear-gradient(transparent, var(--ring)); }

/* Why: three sentences, set large. The first, about them, is quieter than the two about us. */
.creed { width: var(--wrap); margin: 0 auto; padding-bottom: clamp(96px, 12vw, 168px); border-top: 1px solid var(--rule); }
.creed-text { max-width: 17em; margin: clamp(72px, 9vw, 128px) 0 0; font: 300 clamp(30px, 4.6vw, 64px)/1.1 var(--font); letter-spacing: -0.04em; text-wrap: balance; }
.creed-text span { color: var(--faint); }

/* An exhibit: a rule and its number, then what we believe on the left and the app that proves it on the right. */
.exhibit { width: var(--wrap); margin: 0 auto; border-top: 1px solid var(--rule); }
.index { display: flex; gap: 16px; margin: 0; padding-top: 20px; font: 500 13px/20px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.index span { color: var(--ink); font-variant-numeric: tabular-nums; }
.stage { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 64px; align-items: center; padding: clamp(72px, 9vw, 128px) 0 clamp(96px, 12vw, 168px); }
.words h2 { margin: 0; font: 300 clamp(56px, 8.4vw, 136px)/.95 var(--font); letter-spacing: -0.055em; text-wrap: balance; }
.belief { max-width: 19em; margin: clamp(32px, 4vw, 56px) 0 0; font: 400 clamp(20px, 1.9vw, 26px)/1.4 var(--font); letter-spacing: -0.012em; text-wrap: pretty; }
.proof { max-width: 26em; margin: 20px 0 0; color: var(--muted); text-wrap: pretty; }

/* A phone: the screen, a black edge, a hairline. Its size sets its corners. */
.phone { justify-self: end; width: var(--phone); margin: 0; padding: calc(var(--phone) * .028); border-radius: calc(var(--phone) * .168); background: #000; box-shadow: 0 0 0 1px var(--ring); }
.phone img { display: block; width: 100%; height: auto; border-radius: calc(var(--phone) * .14); background: #14161c; }

/* The system: the words, then its three parts side by side from edge to edge, each named. */
.system .stage { grid-template-columns: minmax(0, 1fr); row-gap: clamp(64px, 8vw, 112px); }
.trio { --phone: min(336px, calc((100vw - 2 * var(--edge) - 96px) / 3)); display: flex; justify-content: space-between; }
.unit { margin: 0; }
.unit figcaption { margin-top: 24px; font: 500 13px/20px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); text-align: center; }

/* The close: the same mark, turned over. Black on white, and the address. */
.close { display: flex; flex-direction: column; align-items: center; padding: clamp(96px, 14vw, 200px) var(--edge); background: #fff; color: var(--black); text-align: center; }
.close .mark { height: clamp(88px, 12vw, 152px); background: var(--black); }
.close-label { margin: clamp(48px, 6vw, 80px) 0 0; font: 500 13px/20px var(--font); letter-spacing: .08em; text-transform: uppercase; color: #5a6170; }
.address { margin-top: 16px; font: 300 clamp(40px, 9vw, 136px)/1.05 var(--font); letter-spacing: -0.055em; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .5s var(--ease); }
.address:hover { background-size: 100% 2px; }
.close ::selection { background: var(--black); color: #fff; }

.foot { width: var(--wrap); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 28px 0 max(28px, env(safe-area-inset-bottom, 0px)); font: 400 13px/20px var(--font); color: var(--faint); }

@media (max-width: 799px) {
  :root { --phone: min(72vw, 300px); }
  .bar { height: 72px; }
  .hero { padding: 104px var(--edge) 120px; }
  .tagline { display: none; }
  .stage, .system .stage { grid-template-columns: minmax(0, 1fr); row-gap: 56px; padding: 56px 0 96px; }
  .phone { justify-self: center; }
  .creed-text { margin-top: 56px; }
  /* The three parts in a row that scrolls sideways, one phone at a time, the next one showing at the edge. */
  .trio { --phone: min(72vw, 300px); justify-content: flex-start; gap: 20px; margin: 0 calc(-1 * var(--edge)); padding: 0 calc((100vw - var(--phone)) / 2) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .trio::-webkit-scrollbar { display: none; }
  .unit { flex: none; scroll-snap-align: center; }
}

/* Motion: the poster arrives once; each phone rises as it comes into view, where the browser can tie that to the scroll. */
@media (prefers-reduced-motion: no-preference) {
  .hero > :not(.cue) { animation: arrive 1.1s var(--ease) both; }
  .hero h1 { animation-delay: .12s; } .hero .lede { animation-delay: .22s; } .hero .invite { animation-delay: .32s; }
  @supports (animation-timeline: view()) {
    .phone, .creed-text { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
}
@keyframes arrive { from { opacity: 0; transform: translateY(14px); } }
@keyframes rise { from { opacity: 0; transform: translateY(48px); } }