/* SkyCanvas — shared styles. Mobile-first. No filter:blur / no backdrop-filter
   (both are huge perf hits on mobile and the previous source of choppiness). */

:root{
  --sky-1:#eaf4fb; --sky-2:#cfe6f5; --sky-3:#a9d2ec; --sky-4:#7fb8dd;
  --ink:#1f3a52; --ink-soft:#3d5a73; --line:#cfe1ee; --danger:#b3324a;
  --ok:#1f6b3f; --card-bg:#ffffff; --shadow:0 6px 22px rgba(31,58,82,.08);
  --radius:14px; --nav-h:60px;
  --content-max:920px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{ -webkit-text-size-adjust:100%; }
html,body{min-height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  /* Static gradient — paints once, no per-frame work */
  background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 55%,var(--sky-3) 100%);
  background-attachment:fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:var(--ink-soft);text-decoration:none}
a:hover{color:var(--ink)}

/* ─── Navbar ──────────────────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:50;
  height:var(--nav-h);
  background:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(31,58,82,.06);
}
.nav-inner{
  max-width:var(--content-max);
  margin:0 auto;
  height:100%;
  padding:0 1rem;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  font-family:'Italianno',cursive;
  font-size:2rem;
  color:var(--ink-soft);
  line-height:1;
}
.nav-links{display:flex; align-items:center; gap:.4rem;}
.nav-links a{
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.7rem .9rem; border-radius:8px;
}
.nav-links a:hover{background:rgba(127,184,221,.18)}
.nav-toggle{
  display:none;
  width:44px; height:44px;
  border:0; background:transparent; cursor:pointer; padding:0;
  align-items:center; justify-content:center;
}
.nav-toggle span{
  display:block; width:22px; height:2px; background:var(--ink-soft);
  position:relative; transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before,
.nav-toggle span::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:var(--ink-soft);
  transition:transform .2s ease, top .2s ease;
}
.nav-toggle span::before{top:-7px}
.nav-toggle span::after{top:7px}
.nav.open .nav-toggle span{background:transparent}
.nav.open .nav-toggle span::before{top:0; transform:rotate(45deg)}
.nav.open .nav-toggle span::after{top:0; transform:rotate(-45deg)}

@media (max-width:720px){
  .nav-toggle{display:flex}
  .nav-links{
    position:absolute; top:var(--nav-h); left:0; right:0;
    flex-direction:column; align-items:stretch;
    background:rgba(255,255,255,.97);
    border-bottom:1px solid rgba(31,58,82,.08);
    padding:.5rem 1rem 1rem;
    gap:0;
    transform:translateY(-8px);
    opacity:0; pointer-events:none;
    transition:opacity .15s ease, transform .15s ease;
  }
  .nav-links a{
    padding:.95rem .8rem;
    border-bottom:1px solid rgba(31,58,82,.06);
    font-size:.9rem;
  }
  .nav-links a:last-child{border-bottom:0}
  .nav.open .nav-links{ opacity:1; transform:none; pointer-events:auto; }
}

/* ─── Layout ──────────────────────────────────────────────────────────────── */
.wrap{ max-width:var(--content-max); margin:0 auto; padding:1.6rem 1rem 4rem; }
h1.title{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300;
  font-size:clamp(2rem,4.6vw,3.2rem); color:var(--ink);
  margin-bottom:.3rem; line-height:1.05;
}
.sub{color:var(--ink-soft); margin-bottom:1.4rem; font-size:.95rem}
.muted{color:var(--ink-soft); font-size:.88rem}

.card{
  background:var(--card-bg);
  border:1px solid rgba(31,58,82,.06);
  border-radius:var(--radius);
  padding:1.25rem;
  box-shadow:var(--shadow);
  margin-bottom:1rem;
}
.card h2{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500;
  font-size:1.35rem; color:var(--ink); margin-bottom:.9rem;
}
@media (min-width:560px){ .card{padding:1.6rem} }

/* ─── Forms ───────────────────────────────────────────────────────────────── */
label{
  display:block; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:.3rem;
}
input,textarea,select{
  width:100%; padding:.75rem .85rem;
  border:1px solid var(--line); border-radius:10px; background:#fff;
  font:inherit; color:var(--ink);
  /* 16px font-size on inputs prevents iOS auto-zoom on focus */
  font-size:16px;
}
input:focus,textarea:focus,select:focus{
  outline:none; border-color:var(--sky-4);
  box-shadow:0 0 0 3px rgba(127,184,221,.25);
}
textarea{ min-height:96px; resize:vertical; font-family:inherit }
.row{ display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:640px){ .row{grid-template-columns:1fr 1fr} .row.three{grid-template-columns:1fr 1fr 1fr} }
.field{margin-bottom:1rem}

button,.btn{
  display:inline-block; border:0; cursor:pointer; font:inherit; font-weight:500;
  padding:.78rem 1.4rem; border-radius:999px;
  background:linear-gradient(180deg,#4a7ea6,#244966); color:#fff;
  letter-spacing:.06em; min-height:44px;
}
button:hover{filter:brightness(1.08)}
button:active{transform:translateY(1px)}
button.ghost{background:transparent;color:var(--ink-soft);border:1px solid var(--line)}
button.danger{
  background:transparent;color:var(--danger);border:1px solid #e1bfc8;
  padding:.45rem .85rem;font-size:.82rem;min-height:auto;
}
button.full{display:block;width:100%}

.msg{
  padding:.7rem .9rem; border-radius:10px; margin-bottom:1rem;
  font-size:.92rem; display:none;
}
.msg.show{display:block}
.msg.err{background:#fbe9ed;color:var(--danger);border:1px solid #f0c8d2}
.msg.ok{background:#e7f3ec;color:var(--ok);border:1px solid #c5e1cf}

/* ─── Avatar / social ─────────────────────────────────────────────────────── */
.avatar{
  width:96px;height:96px;border-radius:50%;
  background:var(--sky-2) center/cover;
  border:3px solid #fff; box-shadow:0 4px 14px rgba(31,58,82,.15);
  flex-shrink:0;
}
.avatar.lg{width:128px;height:128px}
@media (min-width:560px){ .avatar.lg{width:144px;height:144px} }

.social-list{display:flex;flex-direction:column;gap:.5rem}
.social-item{
  display:flex; align-items:center; gap:.6rem;
  padding:.6rem .75rem; border:1px solid var(--line); border-radius:10px;
  background:#fff; flex-wrap:wrap;
}
.social-item .plat{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); min-width:84px;
}
.social-item .url{
  flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Add-social form: stacks on mobile, single row on wider screens */
.social-form{ display:grid; gap:.6rem; margin-top:1rem; grid-template-columns:1fr; }
@media (min-width:640px){ .social-form{ grid-template-columns:1fr 2fr auto; align-items:start; } }
.handle-wrap{
  display:flex; align-items:stretch;
  border:1px solid var(--line); border-radius:10px;
  background:#fff; overflow:hidden; min-height:44px;
}
.handle-wrap:focus-within{ border-color:var(--sky-4); }
.handle-wrap .handle-prefix{
  display:flex; align-items:center; padding:0 .7rem;
  background:#f3f8fc; color:var(--ink-soft);
  font-size:.92rem; white-space:nowrap; user-select:none;
}
.handle-wrap input{
  flex:1; border:0; outline:0; padding:.6rem .8rem; min-width:0;
  background:transparent; font:inherit;
}
.handle-wrap input:disabled{ color:var(--ink-soft); cursor:not-allowed; }

/* ─── Coming-soon (smooth, no blur filters) ───────────────────────────────── */
.cs-hero{
  position:relative;
  min-height:calc(100vh - var(--nav-h));
  display:grid; place-items:center;
  text-align:center;
  padding:2rem 1rem 5rem;
  overflow:hidden;
}
.cs-hero .clouds{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.85;
}
.cs-hero main{ position:relative; z-index:1; max-width:780px; }
.cs-mark{
  font-family:'Italianno',cursive;
  font-size:clamp(2rem,4vw,3rem);
  color:var(--ink-soft);
  margin-bottom:.4rem;
}
.cs-title{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300;
  font-size:clamp(3.4rem,12vw,8.4rem); line-height:.95;
  background:linear-gradient(180deg,#244966 0%, #4a7ea6 55%, #7fb8dd 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cs-flourish{
  display:flex; align-items:center; justify-content:center; gap:.8rem;
  margin:1rem auto; color:var(--ink-soft);
}
.cs-flourish .line{ height:1px; width:min(22vw,160px); background:linear-gradient(90deg,transparent,var(--ink-soft),transparent); }
.cs-flourish .star{ font-family:'Italianno',cursive; font-size:1.4rem; opacity:.75 }
.cs-tag{
  font-family:'Inter',sans-serif; font-weight:300;
  letter-spacing:.42em; text-transform:uppercase;
  font-size:clamp(.7rem,1vw,.82rem); color:var(--ink-soft);
}

/* Subtle drift, GPU-friendly transform-only animation.
   Disabled for users who request reduced motion. */
.cs-hero .drift{ animation: drift 18s ease-in-out infinite; will-change:transform; }
@keyframes drift{
  0%,100% { transform:translate3d(0,0,0); }
  50%     { transform:translate3d(0,-10px,0); }
}
@media (prefers-reduced-motion: reduce){
  .cs-hero .drift{ animation:none; }
}

/* ─── 404 ────────────────────────────────────────────────────────────────── */
.nf-hero .nf-numeral{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300;
  font-size:clamp(7rem,22vw,15rem); line-height:.85;
  letter-spacing:-.04em;
  background:linear-gradient(180deg,#244966 0%, #4a7ea6 55%, #a9d2ec 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:.18;
  margin:0 0 -.55em;
}
.nf-hero .nf-title{ font-size:clamp(2.2rem,7vw,4.4rem); }
.nf-hero .nf-actions{ margin-top:1.6rem; }
.nf-hero .nf-actions .btn{
  letter-spacing:.18em; text-transform:uppercase;
  font-size:.78rem; padding:.78rem 1.8rem; text-decoration:none;
}

/* ─── OAuth buttons ──────────────────────────────────────────────────────── */
.oauth-box{ margin-bottom:1.2rem; }
.oauth-buttons{ display:grid; gap:.55rem; }
.oauth-btn{
  display:flex; align-items:center; justify-content:center; gap:.7rem;
  padding:.7rem 1rem; border-radius:999px; min-height:44px;
  background:#fff; color:var(--ink); border:1px solid var(--line);
  text-decoration:none; font-weight:500; font-size:.92rem;
  transition:background .12s, border-color .12s, transform .04s;
}
.oauth-btn:hover{ background:#f7fbfe; border-color:var(--sky-4); }
.oauth-btn:active{ transform:translateY(1px); }
.oauth-btn svg{ flex:0 0 auto; }
.oauth-divider{
  display:flex; align-items:center; gap:.8rem; margin:1rem 0 .2rem;
  color:var(--ink-soft); font-size:.75rem; letter-spacing:.3em; text-transform:uppercase;
}
.oauth-divider::before, .oauth-divider::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.footer{
  text-align:center; padding:1.2rem; color:var(--ink-soft); opacity:.7;
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase;
}