/* =============================================================================
   ABERRATION — Launch Site V1
   1:1 transcription of Figma frame 3014:2 (1584 x 4159).
   Every offset, size, colour and type value below is taken verbatim from the
   Figma node it is labelled with. Do not "tidy" the odd fractional numbers —
   they are what makes the page match the design.
   ============================================================================= */

/* Full-unicode Inter. The Google Fonts subset drops U+2192 (→), which made the
   button arrows fall back to a system face and render visibly longer than Figma. */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/InterVariable.woff2") format("woff2");
}

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

html { background: #000; }

body {
  margin: 0;
  background: #000;
  -webkit-text-size-adjust: 100%;
  /* Inter v4 carries an optical-size axis that Figma's bundled Inter does not.
     Left on "auto" the large headings render wider and heavier than the design. */
  font-optical-sizing: none;
}

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

/* --- design canvas ------------------------------------------------------- */

/* aspect-ratio keeps the page the right height before the scaler script runs,
   and --scale falls back to a pure-CSS ratio if scripting is unavailable. */
.viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1584 / 4159;
  overflow: hidden;
}

.canvas {
  --scale: calc(100vw / 1584px);
  position: absolute;
  top: 0;
  left: 0;
  width: 1584px;
  height: 4159px;
  background: #000;
  transform-origin: 0 0;
  transform: scale(var(--scale, 1));
}

.canvas p,
.canvas h1,
.canvas h2,
.canvas h3 { margin: 0; }

/* --- shared: monospace tag line ------------------------------------------ */

.tag {
  position: absolute;
  font-family: "Roboto Mono", monospace;
  font-weight: 500;
  font-size: 16px;
  line-height: normal;
  color: #9a9a9a;
}

/* --- shared: buttons ----------------------------------------------------- */

.btn {
  position: absolute;
  display: block;
}

.btn > span {
  position: absolute;
  display: block;
  font-family: Inter, sans-serif;
  font-weight: 800;
  font-size: 17.081px;
  line-height: 0.912;
  letter-spacing: -1.1957px;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
}

.btn--solid { background: #fff; }
.btn--solid > span { color: #000; }

/* An inset shadow, not a border. A border creates a padding box, and every
   absolutely positioned child then measures from inside it - the label sat 2px
   lower than the solid button's (16.91 against Figma's 14.91). The shadow paints
   the same 2px rule without moving anything. */
.btn--outline {
  background: #000;
  box-shadow: inset 0 0 0 2px #fff;
}
.btn--outline > span { color: #fff; }

/* =============================================================================
   01 — HERO / YES, JERRY!            node 3015:2
   ============================================================================= */

.hero {
  position: absolute;
  left: 0;
  top: -305px;   /* 3015:2 sits at y=-305: the frame crops the top of the artwork */
  width: 1584px;
  height: 1180px;
  background: #030303;
  overflow: hidden;
}

/* 3231:815 "Slide 16:9 - 58" replaced the single artwork node: it is a group of
   the photograph plus letterbox bars, so it is taken as Figma's own render.
   Declared 1584x891 at (89, 285.375); the export arrives 1495x871.5 because
   Figma clips it to the frame's right edge and trims empty rows. */
.hero__bg {
  position: absolute;
  left: 89px;
  top: 285.375px;
  width: 1495px;
  height: 871.5px;
  object-fit: fill;
  pointer-events: none;
}

/* 3016:10 */
.hero__logo {
  position: absolute;
  left: 27px;
  top: 333px;
  width: 252px;
  height: 56.538px;
}
.hero__logo img { display: block; width: 100%; height: 100%; }

/* 3016:19 — centred on x=1421, box 220px wide */
.hero__nav {
  position: absolute;
  left: 1421px;
  top: 343px;
  width: 220px;
  height: 18px;
  transform: translateX(-50%);
  font-family: Inter, sans-serif;
  font-weight: 800;
  font-size: 15.526px;
  line-height: 0.7535;
  letter-spacing: -0.621px;
  text-align: center;
  color: #fff;
  white-space: pre-wrap;
}

/* 3022:372 — "Yes, jerry!" lockup */
.hero__title {
  position: absolute;
  left: 6px;
  top: 498px;
  width: 843px;
  height: 205.415px;
}

/* 3022:377 */
.hero__title-text {
  position: absolute;
  left: 0;
  top: 7.965px;
  width: 843px;
  font-family: Almendra, serif;
  font-weight: 400;
  font-size: 186.265px;
  line-height: 0.912;
  letter-spacing: -1.8627px;
  text-align: center;
  color: #fff;
}

/* 3022:378 — four-point sparkle, rotated -132.49deg */
.hero__star {
  position: absolute;
  left: 372.38px;
  top: -39.91px;   /* 40px above Figma's own position: the title reads "Jerry" with a
                      capital J here, whose top serif reaches the sparkle. See styles note. */
  width: 66.188px;
  height: 66.477px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__star-rot {
  flex: none;
  position: relative;
  display: block;
  width: 48.083px;
  height: 45.811px;
  transform: rotate(-132.49deg) skewX(0.13deg);
}
.hero__star-rot img {
  position: absolute;
  left: 2.45%;
  right: 2.45%;
  top: 0;
  bottom: 9.55%;
  display: block;
  width: 95.1%;
  height: 90.45%;
}

/* 3016:22 */
.hero__h1 {
  position: absolute;
  left: 89px;
  top: 720px;
  width: 711px;
  height: 229.727px;
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 81.318px;
  /* 0.912, not the 0.7535 the API reports for this node. Figma renders the three
     lines 74px apart (81.318 x 0.912 = 74.2), and 0.7535 would give 61.3 - the
     block would come out 46px short. Measured off Figma's own render. */
  line-height: 0.912;
  letter-spacing: -5.6923px;
  color: #fff;
}

/* Fixed copy of the headline for assistive tech, kept out of the visual flow. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Caret for the rewriting headline. Injected by script, so a no-JS visitor sees
   clean static text instead of a caret blinking next to a line that never changes. */
.hero__h1-caret {
  display: inline-block;
  width: 0.055em;
  height: 0.6em;
  margin-left: 0.07em;
  background: #fff;
  vertical-align: -0.02em;
  animation: hero-caret 1s steps(1, end) infinite;
}
/* Solid while characters are moving; it only blinks when the line is at rest. */
.hero__h1.is-typing .hero__h1-caret { animation: none; opacity: 1; }

@keyframes hero-caret {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* The headline carries its own line breaks so every phrase lands on three lines.
   pre-line honours them while still collapsing the source indentation. */
.hero__h1-text { white-space: pre-line; }

/* 3016:24 */
.hero__btn1 { left: 93px; top: 983px; width: 251px; height: 42.248px; }
.hero__btn1 > span { left: 128.75px; top: 14.91px; }

/* 3016:27 */
.hero__btn2 { left: 368px; top: 983px; width: 251px; height: 42.248px; }
.hero__btn2-label { left: 119px; top: 14.91px; }

/* 3173:357 — the arrow is a → glyph rotated 90deg, so it reads as ↓ */
.hero__btn2-arrow {
  position: absolute;
  left: 197px;
  top: 14.5px;
  width: 16px;
  height: 17px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__btn2-arrow > span {
  flex: none;
  display: block;            /* transforms do not apply to inline boxes */
  transform: rotate(90deg);
  font-family: Inter, sans-serif;
  font-weight: 800;
  font-size: 17.081px;
  line-height: 0.912;
  letter-spacing: -1.1957px;
  color: #fff;
  white-space: nowrap;
}

/* 3016:20 */
.hero__tagline {
  position: absolute;
  left: 575px;
  top: 1135px;
  width: 548px;
  height: 30px;
  font-family: "Roboto Mono", monospace;
  font-weight: 600;
  font-size: 20.294px;
  line-height: 1.24;
  color: rgba(255, 255, 255, 0.62);
}

/* =============================================================================
   02 — FEATURED EXPERIENCE           node 3015:3
   ============================================================================= */

.featured {
  position: absolute;
  left: 0;
  top: 875px;
  width: 1584px;
  height: 1600px;
  background: #000;
}

/* 3017:8 */
.featured__kicker {
  position: absolute;
  left: 60px;
  top: 147px;
  width: 900px;
  height: 72px;
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 72.511px;
  line-height: 0.7535;
  letter-spacing: -5.0758px;
  color: #fff;
}

/* 3017:9 */
.featured__sub {
  position: absolute;
  left: 60px;
  top: 233px;
  width: 1200px;
  height: 55px;
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 52.431px;
  line-height: 0.7535;
  letter-spacing: -3.6702px;
  color: #9c9c9c;
}

/* 3173:361 */
.featured__media {
  position: absolute;
  left: 60px;
  top: 343px;
  width: 900px;
  height: 1030px;
  overflow: hidden;
}
/* Gallery slides. Each is Figma's own render of one of the four frames
   (3230:740 / 745 / 751 / 758) and is already exactly this slot's 900x1030,
   so it simply fills it. */
.featured__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 350ms ease;
  pointer-events: none;
}
.featured__media img.is-active { opacity: 1; }

/* With reduced motion the script never starts, so the first slide must be
   solid rather than mid-fade. */
@media (prefers-reduced-motion: reduce) {
  .featured__media img { transition: none; }
}

/* 3017:13 */
.featured__tag { left: 1053px; top: 369px; width: 430px; height: 24px; }

/* 3017:14 */
.featured__h3 {
  position: absolute;
  left: 1053px;
  top: 438.124px;
  width: 499px;
  height: 145px;
  font-family: Inter, sans-serif;
  font-weight: 800;
  font-size: 54px;
  line-height: 0.915;
  letter-spacing: -3.78px;
  color: #fff;
}

/* 3017:15 */
.featured__body {
  position: absolute;
  left: 1053px;
  top: 578.124px;
  width: 483px;
  height: 410px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 32px;
  color: #ede9e9;
}
.featured__body p { line-height: 1.24; }

/* 3017:17 / 3017:18 */
.featured__btn { left: 1053px; top: 1109px; width: 251px; height: 42.248px; }
.featured__btn > span { left: 128.75px; top: 14.91px; }

/* 3017:16 */
.featured__specs { left: 60px; top: 1395px; width: 758px; height: 51px; }

/* =============================================================================
   ABOUT THE CREATOR — loose nodes sitting straight on the root frame
   ============================================================================= */

/* 3019:40 */
.author-portrait {
  position: absolute;
  left: 870px;
  top: 2478px;
  width: 582.258px;
  height: 722px;
  background: #090a0b;
  overflow: hidden;
}
/* 3184:65 — the replacement photograph. It sits on top of the old LinkedIn
   layer in Figma, which it covers completely, so only this one is loaded:
   586x734 at (0,-9), cropped by the frame. */
.author-portrait img {
  position: absolute;
  left: 0;
  top: -9px;
  width: 586px;
  height: 734px;
  object-fit: cover;
  max-width: none;
  pointer-events: none;
}

/* 3174:382 */
.author-tag { left: 94px; top: 2512px; width: 430px; height: 24px; }

/* 3019:43 */
.author-title {
  position: absolute;
  left: 94px;
  top: 2586px;
  width: 850px;
  height: 110px;
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 54px;
  line-height: 0.912;
  letter-spacing: -3.78px;
  color: #fff;
}
.author-title span { display: block; }

/* 3019:45 */
.author-bio {
  position: absolute;
  left: 94px;
  top: 2726px;
  width: 620px;
  height: 344px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 32px;
  color: #ede9e9;
}
.author-bio p { line-height: 36px; }

/* 3174:378 / 3174:376 */
.author-btn { left: 94px; top: 3133px; width: 199px; height: 42px; }
.author-btn > span { left: 106px; top: 12px; }

/* =============================================================================
   08 — FOOTER                        node 3015:9
   ============================================================================= */

.footer {
  position: absolute;
  left: 0;
  top: 3323px;
  width: 1584px;
  height: 800px;
  background: #000;
}

/* 3019:58 */
.footer__logo {
  position: absolute;
  left: 507px;
  top: 100px;
  width: 569px;
  height: 127.664px;
}
.footer__logo img { display: block; width: 100%; height: 100%; }

/* 3019:67 */
.footer__social {
  position: absolute;
  left: 793px;
  top: 310px;
  width: 770px;
  height: 34px;
  transform: translateX(-50%);
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 29.412px;
  line-height: 0.912;
  letter-spacing: -2.0589px;
  text-align: center;
  color: #9c9c9c;
}

/* 3019:68 + 3019:69 */
.footer__btn { position: absolute; left: 0; top: 0; }
.footer__btn-plate {
  position: absolute;
  left: 792.5px;
  top: 415px;
  width: 199px;
  height: 42px;
  transform: translateX(-50%);
  background: #fff;
}
.footer__btn-label {
  position: absolute;
  left: 796px;
  top: 430px;
  width: 110px;
  height: 18px;
  transform: translateX(-50%);
  font-family: Inter, sans-serif;
  font-weight: 800;
  font-size: 17.081px;
  line-height: 0.912;
  letter-spacing: -1.1957px;
  text-align: center;
  color: #000;
}

/* 3019:72 */
.footer__teaser {
  left: 792.5px;
  top: 525px;
  width: 357px;
  height: 24px;
  transform: translateX(-50%);
  text-align: center;
}

/* 3019:70 */
.footer__copy {
  position: absolute;
  left: 793px;
  top: 650px;
  width: 608px;
  height: 24px;
  transform: translateX(-50%);
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 20.466px;
  line-height: 0.912;
  letter-spacing: 1.4326px;
  text-align: center;
  color: #fff;
  white-space: pre-wrap;
}

/* 3019:71 */
.footer__disclaimer {
  left: 792.5px;
  top: 710px;
  width: 929px;
  height: 24px;
  transform: translateX(-50%);
  font-size: 15.138px;
  text-align: center;
  color: #9c9c9c;
}

/* =============================================================================
   First-baseline corrections
   -----------------------------------------------------------------------------
   Figma and the browser disagree about where the first line sits inside a text
   box when the line height is smaller than the font's own line box: Chrome
   applies negative half-leading and pulls the glyphs up, Figma does not do it to
   the same degree. The boxes themselves are already at the exact Figma
   coordinates (verified by getBoundingClientRect); these nudges only move the
   glyphs inside them.

   Each value was measured, not guessed: the page was rendered headless at
   1584x4464 and cross-correlated against Figma's own render of frame 3014:2,
   searching dx/dy in a +/-14px window per block. The numbers below are the
   offsets that minimised the difference. `translate` is used rather than
   `transform` so it composes with the existing translateX(-50%) centring.
   ============================================================================= */

.hero__nav          { translate: 0 2px; }   /* 3016:19 */
.hero__h1           { translate: 0 2px; }   /* 3016:22 */
.featured__kicker   { translate: 0 6px; }   /* 3017:8  */
.featured__sub      { translate: 0 5px; }   /* 3017:9  */
.featured__body     { translate: 0 2px; }   /* 3017:15 */
.author-bio         { translate: 0 1px; }   /* 3019:45 */
.footer__social     { translate: 0 1px; }   /* 3019:67 */
.footer__copy       { translate: 2px 1px; } /* 3019:70 */



/* =============================================================================
   MOBILE — Figma frame 3177:394 "ABERRATION — Launch Mobile Site V1" (390x4559)
   Same DOM, same assets: only the canvas size and the box coordinates change.

   The frame now carries its own side margin, so nothing is full-bleed any more -
   the artwork, the photograph and every text block are inset. Figma's own left
   edge wanders between 23px and 25px; that jitter is transcribed as it is rather
   than normalised, so these numbers keep matching the file.
   ============================================================================= */

@media (max-width: 767px) {
  .viewport { aspect-ratio: 390 / 4443; }
  .canvas { --scale: calc(100vw / 390px); width: 390px; height: 4443px; }

  /* The baseline nudges earlier in this file were solved against the desktop
     render at desktop type sizes and do not transfer - mobile leading differs,
     so most blocks need none. These three were measured the same way, against
     Figma's render of 3177:394 with a glyph mask. */
  .hero__nav, .featured__kicker, .featured__sub,
  .footer__social, .footer__copy { translate: none; }
  .hero__h1       { translate: 0 2px; }   /* 3177:395 */
  .featured__body { translate: 0 2px; }   /* 3177:420 */
  .author-bio     { translate: 0 2px; }   /* 3177:441 */

  /* --- hero ------------------------------------------------------------- */
  .hero { top: 0; width: 390px; height: 780px; background: #000; }

  /* 3177:409 - inset rather than bleeding off both edges, and portrait. The
     <picture> in the markup swaps in Figma's own render of this node here, so
     the crop is already baked in and the image just fills its box. */
  /* The node is 344x714 at y=-14, but Figma exports it already clipped by the
     frame, so the file is 344x700 covering y 0..700. Placed on that region. */
  .hero__bg { left: 0; top: 0; width: 390px; height: 736px; object-fit: fill; }

  /* 3180:45 - the logo leaves the corner and centres above the artwork */
  .hero__logo { left: 55px; top: 15px; width: 281px; height: 63.047px; }

  /* Neither exists in the mobile frame */
  .hero__nav, .hero__tagline { display: none; }

  /* 3177:403 / 3177:407 / 3177:408 */
  .hero__title { left: -5px; top: 371px; width: 350px; height: 85.285px; }
  .hero__title-text { top: 3.307px; width: 350px; font-size: 77.334px; letter-spacing: -0.7733px; }
  .hero__star { left: 154.61px; top: -16.56px; width: 27.48px; height: 27.6px; }  /* same 40px lift, scaled to this size */
  .hero__star-rot { width: 19.963px; height: 19.02px; }

  /* 3177:395 - the rewriting headline keeps its explicit three lines here too */
  .hero__h1 {
    left: 22.586px;
    top: 465.155px;
    width: 295.196px;
    height: 95.379px;
    font-size: 33.762px;
    letter-spacing: -2.3633px;
  }

  /* 3177:396 / 3177:399 */
  .btn > span { font-size: 23.274px; letter-spacing: -1.6292px; }
  .hero__btn1 { left: 24px; top: 584px; width: 342px; height: 57.564px; }
  .hero__btn1 > span { left: 175.48px; top: 20.32px; }
  .hero__btn2 {
    left: 24px;
    top: 655.828px;
    width: 341px;
    height: 57.396px;
    box-shadow: inset 0 0 0 2.717px #fff;
  }
  .hero__btn2-label { left: 161.58px; top: 20.26px; font-size: 23.206px; letter-spacing: -1.6244px; }
  .hero__btn2-arrow { left: 268.01px; top: 19.7px; width: 21px; height: 23px; }
  .hero__btn2-arrow > span { font-size: 23.206px; letter-spacing: -1.6244px; }

  /* --- featured --------------------------------------------------------- */
  .featured { top: 791px; width: 390px; height: 1545px; }

  .featured__tag { left: 23px; top: 0; width: 260px; }
  .featured__kicker {
    left: 23px;
    top: 47px;
    width: 392px;
    height: 72px;
    font-size: 39.16px;
    line-height: 0.912;
    letter-spacing: -2.7412px;
  }
  .featured__sub {
    left: 23px;
    top: 103px;
    width: 345px;
    height: 52px;
    font-size: 28px;
    line-height: 0.912;
    letter-spacing: -1.96px;
  }
  /* 3177:412 / 3177:414 - the frame is inset now, the image inside it is not */
  .featured__media { left: 23px; top: 194px; width: 345px; height: 610px; }
  /* Slides are 900x1030 and this slot is 345x610, so they crop to fit rather
     than reproducing the old hand-made mobile crop of a single photograph. */
  .featured__media img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .featured__specs { left: 23px; top: 827px; width: 345px; height: 51px; }
  .featured__h3 {
    left: 25px;
    top: 1001px;
    width: 293px;
    height: 145px;
    font-size: 39.16px;
    letter-spacing: -2.7412px;
  }
  /* 347px, not Figma's 343px, on purpose. Chrome sets this text about half a
     percent wider than Figma does - measured 305px against 304px on one line,
     343px against 341px on another - which over a full line is enough to push
     the last word down and break every line after it. Four pixels of slack buys
     back Figma's own line breaks; the box itself is invisible either way. */
  .featured__body { left: 25px; top: 1106px; width: 347px; height: 410px; font-size: 24px; }
  /* 1514, not Figma's 1487. The repositioned description runs one line longer
     than the copy the frame was drawn around, and at 1487 the last line ran
     7px INTO the white button. Moved down 27px to clear it; the next element
     below is the about tag at 2496, so there is room to spare. */
  .featured__btn { left: 23px; top: 1514px; width: 342px; height: 57.564px; }
  .featured__btn > span { left: 175.48px; top: 20.32px; }

  /* --- about the creator ------------------------------------------------- */
  .author-tag { left: 25px; top: 2496px; width: 430px; }
  .author-title {
    left: 25px;
    top: 2544px;
    width: 342px;
    height: 82px;
    font-size: 39.16px;
    line-height: 0.915;
    letter-spacing: -2.7412px;
  }

  /* 3184:64 - a bare rectangle, no placeholder frame, no backing colour */
  .author-portrait {
    left: 23px;
    top: 2637px;
    width: 345px;
    height: 498px;
    background: none;
  }
  .author-portrait img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

  .author-bio { left: 24px; top: 3177px; width: 348px; height: 410px; font-size: 24px; }  /* 348 for the same reason as the body above */
  .author-bio p { line-height: 1.24; }
  .author-btn { left: 24px; top: 3621px; width: 342px; height: 57.564px; }
  .author-btn > span { left: 175.48px; top: 20.32px; }

  /* --- footer ------------------------------------------------------------ */
  /* The mobile frame has no socials, no teaser, no disclaimer, and its logo
     lives at the top of the page - only the copyright line survives here.
     Steam, YouTube and LinkedIn all stay reachable through the three buttons. */
  .footer { top: 3822px; width: 390px; height: 621px; }
  .footer__logo, .footer__social, .footer__btn,
  .footer__teaser, .footer__disclaimer { display: none; }

  /* 3177:463 - centred inside its 344px box, not left-aligned: measured, the
     glyphs start 30px into the box on both sides. */
  .footer__copy {
    left: 24px;
    top: 0;
    width: 344px;
    transform: none;
    font-size: 15.224px;
    letter-spacing: 1.0657px;
    text-align: center;
  }
}