/* ==========================================================================
   Evie Walker — link page
   Mobile-first. One screen, no scroll. Portrait frame centred on desktop.
   ========================================================================== */

:root {
  --frame-max: 460px;          /* portrait column width on larger screens */
  --avatar-ring: 8px;          /* white border thickness */
  --badge-blue: #1d9bf0;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

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

html {
  /* Kills rubber-band scroll and any sliver of horizontal overflow. */
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  background: #140f0e;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
               Inter, Roboto, Arial, sans-serif;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevents the grey flash on tap in iOS Safari / in-app browsers. */
  -webkit-tap-highlight-color: transparent;
}

/* --------------------------------------------------------------------------
   Stage — the full-viewport portrait frame
   -------------------------------------------------------------------------- */

.stage {
  position: relative;
  width: 100%;
  max-width: var(--frame-max);
  margin-inline: auto;
  height: 100vh;   /* fallback for browsers without dynamic units */
  height: 100dvh;  /* tracks the collapsing mobile URL bar */
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* The <picture> wrappers exist only to offer WebP with a JPEG fallback; they
   must never influence layout. */
.stage__bgwrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Background portrait: fills the frame, never distorts. The horizontal bias
   keeps the subject centred when `cover` trims the sides on tall phones; the
   vertical bias keeps her face in view on short/landscape screens, where
   `cover` trims the top and bottom instead. */
.stage__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 46% 28%;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Readability scrim. Heaviest under the name and button, near-clear across
   the face so the photograph still carries the page. */
.stage__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      rgba(14, 9, 8, 0.42) 0%,
      rgba(14, 9, 8, 0.10) 20%,
      rgba(14, 9, 8, 0.00) 38%,
      rgba(14, 9, 8, 0.28) 58%,
      rgba(14, 9, 8, 0.66) 78%,
      rgba(14, 9, 8, 0.88) 100%
    );
}

/* --------------------------------------------------------------------------
   Card — avatar, name, call to action
   Sits in the lower-middle of the frame.
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 3.4vh, 22px);
  padding-inline: 26px;
  /* Lower-middle placement: generous breathing room below, respecting the
     iPhone home-indicator inset. */
  padding-bottom: calc(clamp(52px, 11vh, 96px) + env(safe-area-inset-bottom, 0px));
  padding-top: env(safe-area-inset-top, 0px);
}

.card__avatar {
  display: block;            /* no inline descender gap inside <picture> */
  width: clamp(190px, 52vw, 220px);
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 46%;  /* the file is pre-cropped; this is a safety net */
  border: var(--avatar-ring) solid #fff;
  background: #3a2e2b;       /* warm fill while the photograph decodes */
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.42),
    0 2px 10px rgba(0, 0, 0, 0.28);
  user-select: none;
  -webkit-user-drag: none;
}

.card__name {
  display: flex;
  align-items: center;      /* keeps name and badge on a shared baseline box */
  justify-content: center;
  gap: 0.36em;
  margin: 0;
  font-size: clamp(1.7rem, 7.6vw, 2.1rem);
  font-weight: 500;         /* medium, not heavy */
  letter-spacing: -0.015em;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

.card__badge {
  flex: 0 0 auto;
  width: 0.72em;
  height: 0.72em;
  color: var(--badge-blue);
  /* Nudge to optically centre the glyph against the cap height. */
  transform: translateY(0.03em);
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.35));
}

/* --------------------------------------------------------------------------
   Call to action — frosted pill
   -------------------------------------------------------------------------- */

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 330px;
  min-height: 60px;
  margin-top: clamp(4px, 1.2vh, 12px);
  padding: 1rem 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
  font: inherit;
  font-size: 1.06rem;
  font-weight: 500;
  letter-spacing: 0.015em;
  text-align: center;
  text-decoration: none;
  box-shadow:
    0 10px 34px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition:
    background-color 260ms var(--ease),
    border-color 260ms var(--ease),
    transform 200ms var(--ease),
    box-shadow 260ms var(--ease);
  touch-action: manipulation;
}

/* Frosted glass only where it renders correctly — otherwise the flat
   translucent fill above is already sufficient. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cta {
    background: rgba(255, 255, 255, 0.11);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
  }
}

.cta__label { display: block; }

@media (hover: hover) and (pointer: fine) {
  .cta:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    box-shadow:
      0 16px 40px rgba(0, 0, 0, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
}

/* Tap / pressed */
.cta:active,
.cta.is-pressed {
  transform: scale(0.972);
  background-color: rgba(255, 255, 255, 0.24);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition-duration: 90ms;
}

.cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Blocked-popup notice — hidden unless JavaScript reveals it
   -------------------------------------------------------------------------- */

.notice {
  max-width: 300px;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
  animation: notice-in 320ms var(--ease) both;
}

.notice[hidden] { display: none; }

@keyframes notice-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Viewport adjustments
   -------------------------------------------------------------------------- */

/* Short screens (small phones, landscape): tighten so nothing clips. */
@media (max-height: 700px) {
  .card { padding-bottom: calc(46px + env(safe-area-inset-bottom, 0px)); }
  .card__avatar { width: clamp(150px, 40vw, 190px); }
}

@media (max-height: 520px) {
  :root { --avatar-ring: 6px; }
  .card { gap: 10px; }
  .card__avatar { width: 118px; }
  .card__name { font-size: 1.4rem; }
  .cta { min-height: 50px; padding: 0.7rem 1.4rem; font-size: 0.98rem; }
}

/* Desktop / tablet: keep the portrait column centred, let the surround
   fall away to a soft dark field rather than stretching the photograph. */
@media (min-width: 768px) {
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(120% 90% at 50% 20%, #241a16 0%, #0b0807 72%);
  }

  .stage {
    /* Inset from the viewport edges so the rounded corners and shadow read as
       a floating portrait card. Fallback ordering preserved, as above. */
    height: min(calc(100vh - 56px), 920px);
    height: min(calc(100dvh - 56px), 920px);
    border-radius: 22px;
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .cta:active,
  .cta.is-pressed { transform: none; }
}