/*
 * AELAELO — responsive, editable preface website
 * ------------------------------------------------
 * Original artwork: ../assets/coastal-background.webp (JPG fallback)
 * Independent logo: ../assets/aelaelo-logo.png
 * Editable words:  ../index.html  (inside EDITABLE TEXT comments)
 * No libraries, no external fonts, no JavaScript needed.
 */

:root {
  color-scheme: light;
  --sand: #e9d2c4;
  --ink: #211e1d;
  --body-size: clamp(14px, 0.955vw, 19px);
  --body-leading: 1.17;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--sand);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Art layer is its own full-page image. Text and logo sit on top. */
.preface-page {
  position: relative;
  isolation: isolate;
  min-height: max(100svh, 62.5vw);
  overflow: hidden;
  background: var(--sand);
}

.scene {
  position: absolute;
  z-index: -1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.scene img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Desktop proportions follow the supplied 1920 x 1200 reference art. */
.page-content {
  display: flex;
  align-items: flex-start;
  gap: 3.95vw;
  width: 100%;
  margin: 0;
  padding: 9.18vw 0 20.5vw 26vw;
}

.brand {
  flex: 0 0 11.8vw;
  width: 11.8vw;
  min-width: 0;
  margin: 0;
}
.brand-link {
  display: block;
  line-height: 0;
  outline-offset: 8px;
}
.brand img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

.preface-copy {
  flex: 0 0 34vw;
  width: 34vw;
  min-width: 0;
  margin-top: 2.65vw;
  font-size: var(--body-size);
  line-height: var(--body-leading);
  letter-spacing: -0.01em;
}
.preface-copy h1 {
  margin: 0 0 1.18em;
  font-size: .95em;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0;
}
.preface-copy p {
  margin: 0 0 1.08em;
}
.contact-email {
  display: inline-block;
  margin-top: .12em;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.contact-email:hover { opacity: .72; }
.contact-email:focus-visible,
.brand-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Medium laptops/tablets: prioritize readable type and natural scrolling. */
@media (max-width: 1150px) {
  :root { --body-size: clamp(15px, 1.65vw, 18px); }
  .preface-page { min-height: 100svh; }
  .scene {
    inset: auto 0 0;
    height: 460px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
  }
  .scene img { object-position: 20% 100%; }
  .page-content {
    display: block;
    max-width: 850px;
    margin: 0 auto;
    padding: 64px 56px 440px;
  }
  .brand { width: 220px; margin-bottom: 36px; }
  .preface-copy {
    width: 100%;
    margin-top: 0;
    line-height: 1.36;
    letter-spacing: 0;
  }
  .preface-copy h1 { margin-bottom: 1.3em; }
  .preface-copy p { margin-bottom: 1.15em; }
}

/* Phones: text remains fully selectable and editable, and the page scrolls. */
@media (max-width: 600px) {
  :root { --body-size: 16px; }
  .page-content { padding: 45px 26px 380px; }
  .brand { width: 194px; margin-bottom: 34px; }
  .preface-copy { line-height: 1.45; }
  .preface-copy h1 { font-size: 15px; }
  .preface-copy p { margin-bottom: 1.2em; }
  .scene { height: 375px; }
  .scene img { object-position: 16% 100%; }
}

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