:root {
  --cream: #f6efe4;
  --wine: #6f1728;
  --wine-soft: #8a2d3d;
  --sand-1: #e8d8bb;
  --sand-2: #c9ae87;
  --sand-3: #a88762;
  --glass: rgba(255, 248, 237, .34);
  --glass-hover: rgba(255, 250, 242, .48);
  --border: rgba(255, 255, 255, .46);
  --shadow: 0 20px 60px rgba(69, 42, 22, .18), inset 0 1px 0 rgba(255,255,255,.35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; min-height: 100%; }
body {
  background: #cbb28d;
  color: var(--wine);
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; }

.page { position: relative; min-height: 100svh; isolation: isolate; }
.desktop-background,
.desktop-shade { display: none; }

.mobile-hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}
.mobile-hero-photo {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    url("hero.jpg") 58% center / cover no-repeat,
    linear-gradient(145deg, var(--sand-1), var(--sand-3));
  transform: scale(1.015);
}
.mobile-hero-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(to bottom, rgba(40,21,10,.32) 0%, rgba(40,21,10,.02) 28%, rgba(40,21,10,.08) 66%, rgba(40,21,10,.48) 100%),
    radial-gradient(circle at 50% 18%, transparent 0 32%, rgba(34,20,10,.10) 100%);
}
.mobile-identity {
  position: absolute;
  top: max(13svh, calc(env(safe-area-inset-top) + 18px));
  left: 20px;
  right: 20px;
  text-align: center;
  text-shadow: 0 3px 24px rgba(0,0,0,.30);
  animation: rise .8s cubic-bezier(.2,.8,.2,1) both;
}
.eyebrow {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .30em;
  color: rgba(255,255,255,.78);
}
h1 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(43px, 13vw, 60px);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.04em;
}
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 9px;
  font-weight: 600;
  text-shadow: 0 2px 14px rgba(0,0,0,.38);
  animation: fadeUp .9s .35s both;
}
.chevron {
  font-size: 30px;
  line-height: .7;
  animation: bob 1.8s ease-in-out infinite;
}

.content {
  position: relative;
  min-height: 100svh;
  padding: max(64px, env(safe-area-inset-top)) 18px max(28px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: var(--wine);
  background:
    radial-gradient(circle at 20% 14%, rgba(255,255,255,.58), transparent 34%),
    radial-gradient(circle at 86% 74%, rgba(111,23,40,.09), transparent 38%),
    linear-gradient(135deg, var(--sand-1) 0%, #d8c19e 46%, #bea078 100%);
}
.content::before,
.content::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 90vw;
  height: 90vw;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .48;
  pointer-events: none;
  animation: drift 12s ease-in-out infinite alternate;
}
.content::before { top: -28vw; left: -35vw; background: rgba(255,248,232,.82); }
.content::after { right: -38vw; bottom: -30vw; background: rgba(126,65,44,.28); animation-delay: -5s; }
.content > * { position: relative; z-index: 1; }
.desktop-identity { display: none; }
.links { display: grid; gap: 12px; }
.link-card {
  min-height: 66px;
  padding: 0 18px;
  display: grid;
  grid-template-columns: 28px 1fr 24px;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  box-shadow: var(--shadow);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
  animation: rise .7s cubic-bezier(.2,.8,.2,1) both;
}
.link-card:nth-child(1) { animation-delay: .05s; }
.link-card:nth-child(2) { animation-delay: .11s; }
.link-card:nth-child(3) { animation-delay: .17s; }
.link-card:nth-child(4) { animation-delay: .23s; }
.link-card:hover,
.link-card:focus-visible {
  transform: translateY(-3px);
  background: var(--glass-hover);
  border-color: rgba(255,255,255,.72);
  outline: none;
}
.link-card:active { transform: scale(.985); }
.icon { width: 24px; height: 24px; display: grid; place-items: center; }
.icon svg { width: 100%; height: 100%; fill: currentColor; }
.arrow { justify-self: end; font-size: 19px; opacity: .72; }
footer {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  animation: rise .7s .30s cubic-bezier(.2,.8,.2,1) both;
}
.email { font-size: 14px; text-decoration: none; border-bottom: 1px solid rgba(111,23,40,.30); padding-bottom: 2px; }
.email:hover { border-color: currentColor; }
.copyright { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; opacity: .58; }

@media (min-width: 760px) {
  body { overflow: hidden; }
  .page { height: 100svh; overflow: hidden; display: grid; place-items: stretch; }
  .mobile-hero { display: none; }

  /* Desktop only: one continuous sand layer under the portrait.
     The background is slightly enlarged and softly blurred so the seams
     inside the supplied background image cannot form visible vertical lines. */
  .desktop-background {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -3;
    overflow: hidden;
    background: #b7aa92;
  }

  .desktop-background::after {
    content: "";
    position: absolute;
    inset: -3%;
    z-index: 0;
    pointer-events: none;
    background: url("background-desktop.jpg") center center / cover no-repeat;
    filter: blur(13px);
    transform: scale(1.035);
  }

  /* The portrait is not placed beside the background. It lies above it and
     dissolves into the same sand layer across a very wide feathered zone. */
  .desktop-background::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: url("hero-desktop.jpg") right center / contain no-repeat;

    -webkit-mask-image: linear-gradient(90deg,
      transparent 0%,
      transparent 35%,
      rgba(0,0,0,.015) 39%,
      rgba(0,0,0,.045) 43%,
      rgba(0,0,0,.10) 47%,
      rgba(0,0,0,.20) 51%,
      rgba(0,0,0,.34) 55%,
      rgba(0,0,0,.50) 59%,
      rgba(0,0,0,.67) 63%,
      rgba(0,0,0,.82) 67%,
      rgba(0,0,0,.93) 71%,
      #000 76%,
      #000 100%);
    mask-image: linear-gradient(90deg,
      transparent 0%,
      transparent 35%,
      rgba(0,0,0,.015) 39%,
      rgba(0,0,0,.045) 43%,
      rgba(0,0,0,.10) 47%,
      rgba(0,0,0,.20) 51%,
      rgba(0,0,0,.34) 55%,
      rgba(0,0,0,.50) 59%,
      rgba(0,0,0,.67) 63%,
      rgba(0,0,0,.82) 67%,
      rgba(0,0,0,.93) 71%,
      #000 76%,
      #000 100%);
  }
  .desktop-shade {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(43,27,18,.16) 0%, rgba(43,27,18,.08) 31%, rgba(43,27,18,.015) 58%, transparent 76%),
      linear-gradient(to bottom, rgba(38,22,14,.05), transparent 30%, rgba(38,22,14,.08));
  }
  .content {
    width: min(48vw, 760px);
    min-height: 100svh;
    margin-left: clamp(54px, 8vw, 140px);
    margin-right: auto;
    padding: 38px 0;
    justify-content: center;
    color: var(--wine);
    background: transparent;
    overflow: visible;
  }
  .content::before,
  .content::after { display: none; }
  .desktop-identity {
    display: block;
    width: 100%;
    margin-bottom: 28px;
    text-align: center;
    text-shadow: 0 2px 10px rgba(255,255,255,.25);
    animation: rise .7s cubic-bezier(.2,.8,.2,1) both;
  }
  .desktop-identity h1 {
    font-size: clamp(64px, 6.6vw, 96px);
    white-space: nowrap;
  }
  .link-card {
    min-height: 78px;
    background: rgba(255,248,237,.42);
    border-color: rgba(111,23,40,.18);
    box-shadow: 0 18px 55px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.28);
  }
  .link-card:hover,
  .link-card:focus-visible { background: rgba(255,248,237,.36); border-color: rgba(255,255,255,.56); }
  footer { text-shadow: 0 2px 12px rgba(0,0,0,.30); }
  .email { border-bottom-color: rgba(255,255,255,.36); }
}

@media (min-width: 1200px) {
  .content { width: min(43vw, 760px); margin-left: clamp(76px, 8vw, 150px); }
}

@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@keyframes drift { from { transform: translate3d(-2%, -2%, 0) scale(1); } to { transform: translate3d(7%, 5%, 0) scale(1.12); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Version 4 — mobile scroll transition */
@media (max-width: 759px) {
  .mobile-identity {
    position: fixed;
    top: max(13svh, calc(env(safe-area-inset-top) + 34px));
    z-index: 30;
    pointer-events: none;
    will-change: transform, opacity;
  }

  .mobile-identity h1 {
    color: rgb(255, 255, 255);
    font-size: clamp(52px, 14.8vw, 68px);
    line-height: .94;
    text-shadow: 0 3px 24px rgba(44, 24, 12, .34);
    will-change: color, text-shadow;
  }

  .mobile-hero-photo {
    position: fixed;
    height: 100svh;
    bottom: auto;
    will-change: filter, transform, opacity;
  }

  .mobile-hero-shade {
    position: fixed;
    height: 100svh;
    bottom: auto;
    will-change: opacity;
  }

  .mobile-hero::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: var(--sand-fade, 0);
    background:
      radial-gradient(circle at 18% 15%, rgba(255,255,255,.58), transparent 35%),
      radial-gradient(circle at 85% 76%, rgba(111,23,40,.09), transparent 40%),
      linear-gradient(135deg, var(--sand-1) 0%, #d8c19e 47%, #bea078 100%);
    transition: opacity .08s linear;
  }

  .content {
    padding-top: max(132px, calc(env(safe-area-inset-top) + 110px));
    background: transparent;
  }

  .content::before,
  .content::after {
    position: fixed;
  }
}

/* Version 8 — mobile footer placement */
@media (max-width: 759px) {
  .content {
    justify-content: flex-start;
  }

  .links {
    margin-top: auto;
  }

  footer {
    margin-top: auto;
    padding-bottom: max(2px, env(safe-area-inset-bottom));
    gap: 7px;
  }

  .email {
    font-size: 15px;
  }

  .copyright {
    font-size: 8px;
    letter-spacing: .14em;
    opacity: .52;
  }
}

@media (min-width:760px){.links{gap:16px}.link-card{font-size:20px;padding:0 24px;grid-template-columns:34px 1fr 28px;border-radius:24px}.icon{width:28px;height:28px}.arrow{font-size:22px}footer{font-size:16px}.email{font-size:16px}}

/* Version 21 — desktop balance refinement only */
@media (min-width: 760px) {
  .content {
    width: min(50vw, 800px);
    transform: translateY(-32px);
  }

  .desktop-identity {
    margin-bottom: 30px;
  }

  .desktop-identity h1 {
    font-size: clamp(67px, 6.9vw, 100px);
  }

  .links {
    gap: 17px;
  }

  .link-card {
    min-height: 82px;
    padding: 0 26px;
    grid-template-columns: 36px 1fr 30px;
    font-size: 21px;
  }

  .icon {
    width: 29px;
    height: 29px;
  }

  .arrow {
    font-size: 23px;
  }
}

@media (min-width: 1200px) {
  .content {
    width: min(46vw, 800px);
  }
}

/* Version 22 — desktop seamless single-image composite.
   The desktop background and portrait are precomposed into one raster image,
   so there is no separate layer boundary that Safari can reveal. */
@media (min-width: 760px) {
  .desktop-background {
    background: #b7aa92 url("desktop-composite-v22.jpg") center center / cover no-repeat;
  }

  .desktop-background::before,
  .desktop-background::after {
    display: none;
    content: none;
  }
}

/* Version 24 — desktop uses exactly one supplied image, with no extra layers or effects. */
@media (min-width: 760px) {
  .desktop-background {
    background: #b7aa92 url("hero-desktop.jpg") center center / cover no-repeat;
  }

  .desktop-background::before,
  .desktop-background::after,
  .desktop-shade {
    display: none !important;
    content: none !important;
  }
}

/* Final mobile polish — desktop rules above remain untouched. */
@media (max-width: 759px) {
  html,
  body {
    width: 100%;
    min-height: 100%;
    background: #bba17b;
    overscroll-behavior-y: none;
  }

  .page,
  .mobile-hero {
    min-height: 100dvh;
  }

  .mobile-hero {
    /* A tiny overlap prevents Safari from revealing a hairline at the
       viewport edges while its address bar expands or collapses. */
    margin: 0;
    background: #9f896d;
  }

  .mobile-hero-photo,
  .mobile-hero-shade {
    inset: -3px -2px auto;
    width: calc(100% + 4px);
    height: calc(100dvh + 6px);
  }

  .mobile-hero-photo {
    background-position: 58% center;
    transform: scale(1.025);
  }

  .scroll-hint {
    color: #fff;
    bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px));
  }

  .scroll-hint span:first-child {
    color: #fff;
  }

  .content {
    min-height: 100dvh;
    margin-top: -2px;
  }

  /* Softens the meeting point between the photograph and the sand section
     without changing the desktop composition. */
  .content::before {
    top: -18vw;
  }
}