/* =============================================================
   Abomination Labs — corporate site
   Pure static CSS. No build step, no dependencies.

   This page is deliberately NOT a `design/` token consumer. It is
   not one of the four declared surfaces, so wiring it in would pull
   it into the substrate's drift tests for no benefit here.
   ============================================================= */

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

html,
body {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: #0b0b0d;
  color: #f4f2f7;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ------------------------------------------------------------------
   HERO — orientation-aware full-bleed brand image
     Portrait / default : the "A" mark  → bg-a.webp
     Landscape (@media)  : the wordmark → bg-wordmark.webp
   Both are web-optimised WebPs (~300 KB, down from 1.7 MB / 722 KB).
   `cover` + `center` fill the box at any size — scaled to cover and
   centre-cropped, never stretched or tiled. Browsers download only the
   image matching the current orientation.

   88dvh, NOT 100dvh, and that is load-bearing rather than cosmetic:
   an image filling the whole viewport with no sign anything follows
   reads as the entire site. Stopping short puts the first line of copy
   across the fold, which is what makes the page discoverable as a page.
   ------------------------------------------------------------------ */
.hero {
  position: relative;
  height: 88dvh;
  /* NO min-height floor. An absolute floor overrides 88dvh on a short
     viewport (a landscape phone at 390px tall took a 420px hero), which
     pushes the copy BELOW the fold and restores the exact dead-end this
     height exists to prevent. 88dvh alone keeps 12dvh of content visible
     at every viewport size; that invariant is the point. */
  background-color: #0b0b0d;
  background-image: url("assets/bg-a.webp");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Landscape orientation → show the wordmark instead of the "A".
   The wordmark is landscape-shaped, so `cover` keeps its text readable
   (it crops the plate's top/bottom edges, not the letters). */
@media (orientation: landscape) {
  .hero {
    background-image: url("assets/bg-wordmark.webp");
  }
}

/* Scrim so the scroll cue stays legible over whatever part of the
   image sits behind it, and so the hero resolves into the page ground
   instead of ending on a hard edge. */
.hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 28%;
  background: linear-gradient(to bottom, rgba(11, 11, 13, 0), #0b0b0d);
  pointer-events: none;
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: -1.375rem;
  color: rgba(244, 242, 247, 0.72);
  text-decoration: none;
  transition: color 160ms ease;
}

.hero__scroll:hover,
.hero__scroll:focus-visible {
  color: #f4f2f7;
}

.hero__chevron {
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  margin-top: -0.35rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  animation: nudge 2.4s ease-in-out infinite;
}

@keyframes nudge {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50%      { transform: rotate(45deg) translate(0.18rem, 0.18rem); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__chevron {
    animation: none;
  }
}

/* ------------------------------------------------------------------
   CONTENT
   ------------------------------------------------------------------ */
main {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(244, 242, 247, 0.82);
}

.lede {
  font-size: clamp(1.2rem, 1.02rem + 0.9vw, 1.55rem);
  line-height: 1.5;
  color: #f4f2f7;
}

.section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(244, 242, 247, 0.12);
}

h2 {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 242, 247, 0.55);
}

em {
  font-style: italic;
}

strong {
  font-weight: 600;
  color: #f4f2f7;
}

.status {
  color: rgba(244, 242, 247, 0.55);
}

a {
  color: #f4f2f7;
  text-decoration: underline;
  text-decoration-color: rgba(244, 242, 247, 0.35);
  text-underline-offset: 0.2em;
  transition: text-decoration-color 160ms ease;
}

a:hover,
a:focus-visible {
  text-decoration-color: #f4f2f7;
}

.footer {
  max-width: 40rem;
  margin: 4rem auto 0;
  padding: 1.5rem 1.5rem 2.5rem;
}

.footer p {
  margin: 0;
  font-size: 0.875rem;
  color: rgba(244, 242, 247, 0.45);
}

/* ------------------------------------------------------------------
   Keeps the company name available to screen readers and search
   engines without showing it on top of the hero image.
   ------------------------------------------------------------------ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}