/* ============================================================
   LEDURA home: morning (Elif, final CTA)
   Elif: an asymmetric editorial spread. No portrait exists, so
   the house seal stands in: an italic E inside gold rings, like
   an ex libris. The tick ring turns with scroll (--turn, set by
   js/fx-reveal.js). Final: the page arrives in full morning.
   ============================================================ */

/* ---------- Elif ---------- */
.elif { padding-block: clamp(112px, 15vw, 220px) clamp(56px, 7vw, 104px); }
.elif-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(20px, 3vw, 48px);
  align-items: start;
}

.elif-mark {
  --turn: 0deg;
  grid-column: 1 / span 5;
  width: min(100%, 440px);
  aspect-ratio: 1;
  position: relative;
}
/* the house medallion: a struck gold coin rendered in Blender
   (assets/art/medallion.webp); the morning scrub rocks it gently */
.elif-medallion {
  display: block;
  width: 100%;
  height: auto;
  rotate: calc(var(--turn) * .14);
  filter: drop-shadow(0 18px 30px color-mix(in srgb, var(--gold-deep) 30%, transparent));
}

.elif-text {
  grid-column: 7 / -1;
  padding-top: clamp(24px, 7vw, 112px);
}
.elif .elif-name { font-size: var(--fs-h2); color: var(--ink); }
.elif .elif-role {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 1.6vw, 23px);
  color: color-mix(in srgb, var(--gold-deep) 72%, var(--ink));
}
.elif .elif-body {
  margin: clamp(28px, 3vw, 40px) 0 0;
  max-width: 44ch;
  font-size: var(--fs-lead);
  line-height: 1.7;
}

/* the pull quote sweeps back across the seal's column */
.elif-quote {
  grid-column: 3 / -1;
  margin: clamp(56px, 8vw, 120px) 0 0;
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  max-width: 22ch;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(34px, 4.6vw, 68px);
  line-height: 1.12;
  padding-bottom: .08em;
  color: var(--ink);
  text-wrap: balance;
  text-indent: -.36em;   /* the opening mark hangs outside the measure */
}

@media (max-width: 767px) {
  .elif-grid { grid-template-columns: 1fr; }
  .elif-mark { grid-column: 1; width: min(62vw, 280px); }
  .elif-text { grid-column: 1; padding-top: 44px; }
  .elif-quote { grid-column: 1; margin-top: 56px; margin-left: 12%; }
}

/* ---------- Final ---------- */
.final {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding-block: clamp(120px, 14vw, 200px) clamp(96px, 12vw, 160px);
  overflow: clip;
  text-align: center;
}
.final-inner { position: relative; }
.final .final-title { font-size: var(--fs-display); line-height: 1.04; padding-bottom: .1em; color: var(--ink); }
.final .final-body {
  margin: clamp(22px, 2.4vw, 32px) auto clamp(32px, 3.4vw, 44px);
  max-width: 40ch;
  font-size: var(--fs-lead);
}
.final .badge-row { justify-content: center; }
/* on daylight the store badge is the dark ink version */
[data-skin="dawn"] .appstore-badge {
  background: var(--ink);
  color: var(--elevated);
  border-color: transparent;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--gold-deep) 22%, transparent);
}
/* the gold CTA in the header's dawn tone (css/home/chrome.css) */
[data-skin="dawn"] .btn--primary {
  background: color-mix(in srgb, var(--gold-deep) 80%, var(--ink));
  color: var(--elevated);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--gold-deep) 22%, transparent);
}
[data-skin="dawn"] .btn--primary:hover { background: color-mix(in srgb, var(--gold-deep) 66%, var(--ink)); }

/* the night's gold feather lands here; fx-reveal drifts the wrapper,
   the image idles on its own breath. It was painted for the dark sky,
   so on parchment it is toned a shade warmer and casts a soft dawn
   shadow to hold its edge. */
.final-feather-drift {
  position: absolute;
  top: clamp(32px, 5vw, 72px);
  left: max(24px, calc(50% - 640px));
  width: clamp(130px, 15vw, 220px);
  pointer-events: none;
}
.final-feather {
  width: 100%;
  height: auto;
  filter: saturate(1.5) hue-rotate(-8deg) brightness(.84) contrast(1.1)
    drop-shadow(0 14px 18px color-mix(in srgb, var(--gold-deep) 38%, transparent));
}
@media (prefers-reduced-motion: no-preference) {
  .final-feather { animation: feather-idle 9s ease-in-out infinite alternate; }
}
@keyframes feather-idle {
  from { transform: translate3d(0, -6px, 0) rotate(-3deg); }
  to   { transform: translate3d(-8px, 8px, 0) rotate(4deg); }
}

@media (max-width: 767px) {
  .final { min-height: 0; padding-top: 230px; }
  .final-feather-drift { top: 20px; left: calc(50% - 55px); width: 110px; }
}
/* long German words: keep the display line inside a phone */
@media (max-width: 480px) {
  .final .final-title { font-size: clamp(36px, 11vw, 46px); }
}