/* =============================================================
   ENARC LLC — identity page
   style.css
   ============================================================= */


/* -------------------------------------------------------------
   Reset & base
   ------------------------------------------------------------- */

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

html, body {
  height: 100%;
}

body {
  background-color: #ffffff;          /* Page background */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* -------------------------------------------------------------
   Layout — full-viewport, vertically + horizontally centered
   ------------------------------------------------------------- */

.site-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Outer padding — keeps content off viewport edges on small screens
     and provides breathing room on tall/wide viewports.
     Adjust top/bottom values to shift the vertical center bias.   */
  padding: 5rem 2rem;
}


/* -------------------------------------------------------------
   Logo block — logo image and contact line stacked
   ------------------------------------------------------------- */

.logo-block {
  display: flex;
  flex-direction: column;
  align-items: center;

  /* ← Gap between logo PNG bottom and contact line — 64px as spec'd */
  gap: 64px;

  /* Constrains both children consistently */
  width: 100%;
  max-width: 360px;               /* ← Outer container ceiling */

  /* Fade-in applied to the whole block */
  animation: fade-in 600ms ease-in both;
}


/* -------------------------------------------------------------
   Logo image
   Desktop ceiling: 320px wide. Shrinks proportionally on mobile.
   height: auto preserves aspect ratio of the supplied PNG.
   ------------------------------------------------------------- */

.logo {
  display: block;
  width: 100%;

  /* ← Primary desktop size — adjust this to resize the logo */
  max-width: 320px;

  height: auto;

  /* Prevent iOS tap highlight */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}


/* -------------------------------------------------------------
   Contact line
   Spaced small-caps, very low contrast — intentionally quiet.
   Optima covers macOS/iOS; Candara covers Windows; the rest
   are reliable geometric-humanist fallbacks.
   ------------------------------------------------------------- */

.contact {
  display: block;
  text-align: center;

  /* ← Font stack — system geometric/humanist sans */
  font-family: 'Optima', 'Candara', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* ← Size and spacing */
  font-size: 0.7rem;              /* ← Adjust contact text size */
  font-variant-caps: small-caps;  /* renders lowercase as small caps */
  letter-spacing: 0.22em;         /* ← Adjust tracking; matches logo wordmark feel */

  /* ← Color: muted gray — adjust to taste (#999 is the target) */
  color: #999999;

  text-decoration: none;
  transition: color 200ms ease;
}

.contact:hover,
.contact:focus-visible {
  /* ← Hover color — transitions from #999 to near-black over 200ms */
  color: #0d0d0d;
  outline: none;
}


/* -------------------------------------------------------------
   Fade-in animation (~600ms, ease-in from invisible)
   ------------------------------------------------------------- */

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* -------------------------------------------------------------
   Responsive — narrow viewports (≤ 480px)
   Tighten outer padding; logo naturally shrinks via width: 100%
   ------------------------------------------------------------- */

@media (max-width: 480px) {
  .site-wrapper {
    /* ← Mobile outer padding */
    padding: 3.5rem 1.75rem;
  }

  .logo {
    /* ← Mobile logo ceiling: 220px
       NOTE: at this size, the sweeping arc line in the logo PNG may
       appear faint. If so, swap enarc-logo.png for a version with a
       heavier stroke weight on the arc.                              */
    max-width: 220px;
  }
}


/* -------------------------------------------------------------
   Responsive — very narrow viewports (≤ 320px)
   Extra padding reduction for the smallest phone widths
   ------------------------------------------------------------- */

@media (max-width: 320px) {
  .site-wrapper {
    padding: 2.5rem 1.25rem;
  }
}