/* =========================================================
   DANIEL MAGAZINE — Relaunch teaser
   Full-bleed editorial cover. The photo is the entire page.
   ========================================================= */

:root {
  --red: #C8102E;
  --red-deep: #a50d26;
  --white: #ffffff;
  --ink: #0a0a0a;

  --text-strong: rgba(255, 255, 255, 0.95);
  --text-body: rgba(255, 255, 255, 0.85);
  --text-muted: rgba(255, 255, 255, 0.66);
  --hairline: rgba(255, 255, 255, 0.45);

  --pad-x: clamp(1.5rem, 5.5vw, 5.5rem);
  --pad-y: clamp(1.5rem, 4.5vh, 3.75rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html,
body {
  margin: 0;
  height: 100%;
}

body {
  min-height: 100svh;
  background: var(--ink);
  color: var(--white);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

/* ---------------------------------------------------------
   STAGE — the photo + overlay scrim, pinned to the viewport
   --------------------------------------------------------- */
.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--ink);
}

.stage__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  /* Slight overscale leaves room for the pointer parallax to move
     without ever revealing an edge. */
  transform: scale(1.06) translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform 0.45s var(--ease);
  will-change: transform;
}

/* Readability overlay. A bottom-left radial does the heavy lift behind the
   headline + form copy; a whisper of a vertical gradient adds cinematic
   depth top and bottom. The top-left is left BRIGHT so the black masthead
   reads on the silver (its own soft glow handles contrast). The model's
   face on the right is never touched. */
.stage__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(135% 115% at -8% 112%,
      rgba(0, 0, 0, 0.90) 0%,
      rgba(0, 0, 0, 0.62) 24%,
      rgba(0, 0, 0, 0.30) 44%,
      rgba(0, 0, 0, 0.00) 64%),
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.18) 0%,
      rgba(0, 0, 0, 0.03) 28%,
      rgba(0, 0, 0, 0.00) 54%,
      rgba(0, 0, 0, 0.38) 100%);
}

/* ---------------------------------------------------------
   COVER — content layer floating over the photo
   --------------------------------------------------------- */
.cover {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "masthead"
    "."
    "lede";
  padding: var(--pad-y) var(--pad-x);
}

/* ---- Masthead (top-left) ---- */
.masthead {
  grid-area: masthead;
  justify-self: start;
  position: relative;
  margin-top: clamp(0.75rem, 2.5vh, 2rem);
}

/* Soft white glow behind the logo — not a box. Brightens the silver just
   enough that the black wordmark and the fine "MAGAZINE" tracking read
   cleanly, wherever the metallic streaks fall darker. */
.masthead::before {
  content: "";
  position: absolute;
  left: -6%;
  top: -14%;
  width: 92%;
  height: 128%;
  background: radial-gradient(60% 58% at 38% 48%,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.22) 40%,
    rgba(255, 255, 255, 0.00) 72%);
  filter: blur(22px);
  z-index: -1;
  pointer-events: none;
}

.masthead__logo {
  /* Original artwork — black DANIEL with the red triangle A. Dominates the
     upper-left as a true magazine masthead (~45vw), not a nav logo. */
  width: clamp(220px, 45vw, 900px);
  height: auto;
}

/* ---- Lede (bottom-left) ---- */
.lede {
  grid-area: lede;
  justify-self: start;
  /* Explicit width (not just max-width) so the headline's line box is wide
     enough to render long words; body/sub wrap at their own max-widths. */
  width: min(760px, 90vw);
}

.lede__headline {
  margin: 0;
  /* Bebas Neue — condensed editorial display. Single weight (400) that
     already reads bold; never synthesise a heavier weight. */
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-weight: 400;
  /* The vw coefficient is tuned so the long word "RELAUNCHING" always fits
     in the left column with clear breathing room before the model's face,
     at every viewport width. Paired with max-content line boxes below, it
     can never clip. Bebas is narrow, so it can run larger than the serif. */
  /* "RELAUNCHING 2027" is one longer line — slightly tighter vw so it never clips */
  font-size: clamp(2.5rem, 5.2vw, 7rem);
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--white);
}

.lede__line {
  display: block;
  width: max-content;
  max-width: 92vw;
  overflow: hidden;
  white-space: nowrap;
}

.lede__line-inner {
  display: block;
}


.lede__body {
  margin: 1.75rem 0 0;
  max-width: 46ch;
  font-size: clamp(1rem, 1.15vw, 1.1875rem);
  line-height: 1.62;
  font-weight: 400;
  color: var(--text-body);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.lede__body em {
  font-style: normal;
  font-weight: 700;
  color: var(--text-strong);
}

/* ---- Sign-up ---- */
.signup {
  margin-top: clamp(1.75rem, 4vh, 2.75rem);
}

.signup__label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text-strong);
}

.signup__label::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--red);
}

.signup__sub {
  margin: 0.85rem 0 0;
  max-width: 42ch;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-muted);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

.signup__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.signup__form {
  margin-top: 1.6rem;
}

.signup__fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.5rem 2rem;
}

.field {
  position: relative;
  flex: 1 1 220px;
  min-width: 0;
}

/* Visually hidden labels (placeholders carry the visible cue) */
.field__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.field__input {
  width: 100%;
  padding: 0.65rem 0.1rem;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
  color: var(--white);
  font: inherit;
  font-size: 1rem;
  letter-spacing: 0.01em;
  transition: border-color 0.3s var(--ease);
}

.field__input::placeholder {
  color: rgba(255, 255, 255, 0.62);
}

.field__input:hover {
  border-bottom-color: rgba(255, 255, 255, 0.7);
}

.field__input:focus {
  outline: none;
  border-bottom-color: var(--white);
}

.field__input:-webkit-autofill,
.field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--white);
  caret-color: var(--white);
  transition: background-color 9999s ease-in-out 0s;
}

.signup__button {
  flex: 0 0 auto;
  align-self: flex-end;
  padding: 0.95rem 2.4rem;
  border: 0;
  border-radius: 0;
  background: var(--red);
  color: var(--white);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.signup__button:hover {
  background: var(--red-deep);
  transform: translateY(-2px);
}

.signup__button:active {
  transform: translateY(0);
}

.signup__button:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

.signup__inquiry {
  margin: 1.25rem 0 0;
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
}

.signup__inquiry-link {
  color: inherit;
  text-decoration: none;
}

.signup__inquiry-link:hover {
  text-decoration: underline;
}

.signup__thanks {
  margin: 1.4rem 0 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-style: italic;
  font-weight: 700;
  color: var(--white);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

.signup__thanks[hidden] {
  display: none;
}

/* ---- Social (bottom-right) ---- */
.social {
  position: absolute;
  right: var(--pad-x);
  bottom: var(--pad-y);
  display: flex;
  gap: 0.4rem;
  z-index: 2;
}

.social__link {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}

.social__link:hover {
  color: var(--white);
  transform: translateY(-2px);
}

.social__link:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

/* =========================================================
   ENTRANCE CHOREOGRAPHY — desktop / pointer devices only
   Content is fully visible by default; the sequence is layered
   on top for capable screens with motion allowed.
   ========================================================= */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .masthead__logo {
    opacity: 0;
    animation: fade-in 0.7s var(--ease) 0.1s forwards;
  }

  .lede__line-inner {
    transform: translateY(110%);
    animation: clip-up 0.6s var(--ease) forwards;
  }

  .lede__line:nth-child(1) .lede__line-inner { animation-delay: 0.7s; }

  .lede__body { opacity: 0; animation: rise 0.6s var(--ease) 1.1s forwards; }
  .signup__label { opacity: 0; animation: rise 0.6s var(--ease) 1.25s forwards; }
  .signup__sub { opacity: 0; animation: rise 0.6s var(--ease) 1.35s forwards; }
  .signup__form { opacity: 0; animation: rise 0.6s var(--ease) 1.45s forwards; }
  .social { opacity: 0; animation: fade-in 0.7s var(--ease) 1.6s forwards; }
}

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

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes clip-up {
  to { transform: translateY(0); }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* Tablet — more generous breathing room, single-column form keeps tidy */
@media (max-width: 900px) {
  .lede {
    max-width: 72vw;
  }
  .stage__photo {
    object-position: 66% center;
  }
}

/* Mobile — white logo centered, no glow needed (white logo has contrast) */
@media (max-width: 768px) {
  .masthead {
    justify-self: center;
  }
  .masthead__logo {
    width: clamp(260px, 72vw, 320px);
  }
  .masthead::before {
    display: none;
  }
}

/* Mobile — stronger scrim, stacked form, full-width controls */
@media (max-width: 640px) {
  .cover {
    padding-bottom: calc(var(--pad-y) + 1.5rem);
    /* minmax(58vh, 1fr) pushes the lede to start ~60% down so the face shows above */
    grid-template-rows: auto minmax(58vh, 1fr) auto auto;
    grid-template-areas:
      "masthead"
      "."
      "lede"
      "social";
  }

  .lede {
    max-width: 100%;
  }

  .stage__photo {
    object-position: 70% center;
    transform: none; /* no parallax on touch */
  }

  /* Lift readability: an extra base wash + a deeper bottom block */
  .stage__scrim {
    background:
      radial-gradient(150% 80% at 50% 118%,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.55) 34%,
        rgba(0, 0, 0, 0.00) 66%),
      linear-gradient(to bottom,
        rgba(0, 0, 0, 0.34) 0%,
        rgba(0, 0, 0, 0.20) 40%,
        rgba(0, 0, 0, 0.55) 100%);
  }

  .lede__body {
    margin-top: 1.4rem;
    font-size: 1.0625rem;
  }

  .signup__fields {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
  }

  .field {
    flex: 1 1 auto;
  }

  .signup__button {
    width: 100%;
    text-align: center;
    padding: 1.05rem 1.5rem;
  }

  /* Social moves under the form so it never collides with the button */
  .social {
    position: static;
    grid-area: social;
    justify-self: start;
    margin-top: 2rem;
    margin-left: -0.55rem;
  }
}

/* Short, wide landscape phones */
@media (max-height: 520px) and (min-width: 641px) {
  .lede__headline {
    font-size: clamp(2.5rem, 8vh, 5rem);
  }
}

/* =========================================================
   REDUCED MOTION — kill all movement, show everything
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .stage__photo {
    transition: none;
    transform: scale(1.04);
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
}