@charset "utf-8";

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --gold:#D4A843;--gold-light:#E8C97A;--gold-dim:#8A6820;
  --black:#080808;--deep:#0D0D0D;--surface:#131313;
  --border:rgba(212,168,67,0.18);--border-hover:rgba(212,168,67,0.45);
  --text-primary:#FAFAFA;--text-secondary:#D0CCC6;--text-muted:#888;
}

html,body{height:100%;overflow:hidden;overflow-x:hidden;background-color:#080808;max-width:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{background-color:#080808;color:var(--text-primary);font-family:'Montserrat',sans-serif;font-weight:300;width:100%;max-width:100vw;position:relative;}

/* Noise overlay */
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;z-index:100;opacity:0.4;}

.viewport-clip{position:relative;width:100%;max-width:100vw;min-height:100vh;min-height:100svh;overflow:hidden;}

/* Background blobs */
.blob{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none;}

/* iOS safe area fill — solid black behind Dynamic Island (Safari) */
#safe-area-fill{position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);background:#080808;z-index:9999;pointer-events:none;}
/* Devices with a notch/island expose a non-zero inset; guarantee full coverage there */
@supports (top: env(safe-area-inset-top)){
  #safe-area-fill{height:env(safe-area-inset-top);}
}
@media (min-width:769px){#safe-area-fill{display:none;}}

/* Background word */
.word-bg{position:absolute;font-family:'Cormorant Garamond',serif;font-size:clamp(16rem,24vw,28rem);font-weight:700;color:rgba(212,168,67,0.032);line-height:1;pointer-events:none;white-space:nowrap;z-index:1;user-select:none;}

/* Concentric rings — ease-out bezier, glides to smooth stop */
.rings{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1px;height:1px;pointer-events:none;z-index:1;opacity:0;animation:ringsFade 1.4s cubic-bezier(0.16,1,0.3,1) 1.6s forwards;}
.rings::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:500px;height:500px;border-radius:50%;border:1px solid rgba(212,168,67,0.05);box-shadow:0 0 0 100px rgba(212,168,67,0.025),0 0 0 200px rgba(212,168,67,0.015),0 0 0 320px rgba(212,168,67,0.01);}
.rings::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:500px;height:500px;border-radius:50%;border:1px solid rgba(212,168,67,0.025);}

/* Main layout */
.page{position:relative;z-index:2;width:100%;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(2rem,6vw,6rem);}

/* Wordmark */
.wordmark{font-family:'Cormorant Garamond',serif;font-size:clamp(0.6rem,1vw,0.85rem);font-weight:400;letter-spacing:0.5em;text-transform:uppercase;color:var(--gold);margin-bottom:3rem;opacity:0;animation:fadeUp 1s cubic-bezier(0.16,1,0.3,1) 0.4s forwards;}

/* Headline */
.headline{font-family:'Cormorant Garamond',serif;font-size:clamp(4.5rem,9vw,10rem);font-weight:300;line-height:1.0;text-align:center;color:var(--text-primary);margin-bottom:2.5rem;opacity:0;animation:fadeUp 1.1s cubic-bezier(0.16,1,0.3,1) 0.65s forwards;}
.headline em{font-style:italic;color:var(--gold);}

/* Divider */
.divider{width:60px;height:1px;background:linear-gradient(to right,transparent,var(--gold),transparent);margin:0 auto 2.5rem;opacity:0;animation:fadeUp 1s cubic-bezier(0.16,1,0.3,1) 1s forwards;}

/* Tagline */
.tagline{font-family:'Cormorant Garamond',serif;font-size:clamp(1.15rem,2vw,1.45rem);font-style:italic;font-weight:400;letter-spacing:0.025em;color:#E2DFDA;text-align:center;max-width:580px;line-height:1.75;opacity:0;animation:fadeUp 1s cubic-bezier(0.16,1,0.3,1) 1.2s forwards;}

/* Contact */
.contact{margin-top:3.5rem;display:flex;flex-direction:column;align-items:center;gap:0.6rem;opacity:0;animation:fadeUp 1s cubic-bezier(0.16,1,0.3,1) 1.5s forwards;}
.contact-name{font-size:0.72rem;font-weight:600;letter-spacing:0.25em;text-transform:uppercase;color:var(--text-primary);}
.contact-role{display:inline;}
.contact-details{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;justify-content:center;}
.contact-details a{font-size:0.72rem;font-weight:500;letter-spacing:0.12em;color:var(--gold);text-decoration:none;transition:color 0.3s ease,text-shadow 0.3s ease;}
.contact-details a:hover{color:#FAFAFA;text-shadow:0 0 12px rgba(212,168,67,0.5);}
.sep{color:rgba(212,168,67,0.3);font-size:0.6rem;}

/* Footer */
.footer{position:fixed;bottom:2rem;left:0;right:0;text-align:center;font-size:0.65rem;font-weight:500;letter-spacing:0.3em;text-transform:uppercase;color:rgba(255,255,255,0.2);z-index:2;}
.footer a{font-size:inherit;font-weight:inherit;letter-spacing:inherit;text-transform:inherit;}

/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
@keyframes floatBlob{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-20px,20px) scale(1.05);}}
@keyframes floatBlob2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(20px,-15px) scale(0.97);}}
@keyframes ringsFade{from{opacity:0;transform:translate(-50%,-50%) scale(0.88);}to{opacity:1;transform:translate(-50%,-50%) scale(1);}}
@keyframes blobEnter{from{opacity:0;transform:scale(0.5);}to{opacity:var(--blob-op,0.07);transform:scale(1);}}
@keyframes blobEnter2{from{opacity:0;transform:scale(0.5);}to{opacity:var(--blob-op,0.06);transform:scale(1);}}
@keyframes wordIn{from{opacity:0;transform:translateX(80px);}to{opacity:1;transform:translateX(0);}}

/* =====================================================
   MOBILE RESPONSIVE — max-width: 768px
   ===================================================== */
@media (max-width: 768px) {

  /* Allow natural scroll, fill safe area behind Dynamic Island */
  html, body {
    height: auto;
    min-height: 100svh;
    overflow: auto;
    overflow-x: hidden;
  }

  /* Full-screen centred page, padded for safe areas */
  .page {
    min-height: 100svh;
    height: auto;
    padding: calc(env(safe-area-inset-top) + 3.5rem) 1.5rem calc(env(safe-area-inset-bottom) + 4rem);
    justify-content: center;
  }

  /* Wordmark: tighten letter spacing slightly on narrow screens */
  .wordmark {
    font-size: clamp(0.55rem, 2.8vw, 0.72rem);
    letter-spacing: 0.35em;
    margin-bottom: 2rem;
    text-align: center;
  }

  /* Headline: scale tightly so all three lines sit well */
  .headline {
    font-size: clamp(3.8rem, 16vw, 6rem);
    margin-bottom: 1.75rem;
    line-height: 1.0;
  }

  /* Divider */
  .divider {
    margin-bottom: 1.75rem;
  }

  /* Tagline */
  .tagline {
    font-size: clamp(0.78rem, 3.2vw, 0.88rem);
    letter-spacing: 0.15em;
    line-height: 2.0;
    max-width: 100% !important;
    padding: 0 0.25rem;
  }

  /* Contact block: stack name, role, and each detail on own line */
  .contact {
    margin-top: 2.5rem;
    gap: 0.5rem;
    width: 100%;
  }

  .contact-name {
    font-size: 0.72rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
  }

  /* Hide · separator between name and role on mobile */
  .contact-name .sep-inline {
    display: none;
  }

  /* Role on its own line */
  .contact-role {
    display: block;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.2em;
  }

  /* Each contact link on its own line, separators hidden */
  .contact-details {
    flex-direction: column;
    gap: 0.65rem;
    align-items: center;
  }

  .sep {
    display: none;
  }

  .contact-details a {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
  }

  /* Footer: account for safe area at bottom */
  .footer {
    bottom: calc(1.25rem + env(safe-area-inset-bottom));
    font-size: 0.55rem;
    letter-spacing: 0.18em;
    line-height: 1.8;
    padding: 0 1.5rem;
  }

  /* Shrink blobs so they don't overwhelm on small screens */
  .blob {
    filter: blur(60px);
  }
}