/* THEONE Creators. Dark atelier, inverted Lumiere, rose-gold metal, blush glow. */

:root {
  --ink-900:#0e0b0a;
  --panel:#1d1615;
  --panel-2:#241b1a;
  --line:rgba(244,184,191,.10);
  --line-2:rgba(244,184,191,.20);
  --ivory:#f6ece6;
  --ivory-soft:#e7d6ce;
  --muted:#b69a92;
  --muted-2:#8c746e;
  --rose:#dc93a0;
  --rose-deep:#b76e79;
  --rose-soft:#cb8f98;
  --glow:#f4b8bf;
  --rosegold-rgb:183 110 121;
  --blush-rgb:244 184 191;

  --grad-metal:linear-gradient(135deg,#8E4F5C 0%,#C98E92 26%,#F4D9CE 50%,#C98E92 74%,#93545F 100%);
  --glow-line:linear-gradient(90deg,transparent 0%,rgb(var(--rosegold-rgb)/0) 9%,rgb(var(--rosegold-rgb)/.5) 28%,#f2c4ca 50%,rgb(var(--rosegold-rgb)/.5) 72%,rgb(var(--rosegold-rgb)/0) 91%,transparent 100%);

  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost','Avenir Next',system-ui,sans-serif;
  --trajan:'Cinzel','Cormorant Garamond',serif;

  --radius:16px;
  --radius-sm:11px;

  --floral:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='440' viewBox='0 0 440 440'%3E%3Cg fill='none' stroke='%23b76e79' stroke-opacity='.5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 128 C52 64 118 38 178 56 C150 70 132 92 128 120 C112 96 84 86 58 96 C76 108 88 126 90 148 C62 132 34 130 18 128 Z'/%3E%3Cpath d='M178 56 C210 70 228 96 230 128'/%3E%3Cpath d='M310 96 c14 -26 48 -28 60 -6 c12 -22 46 -18 54 6 c8 22 -10 40 -28 46 c16 8 22 30 8 44 c-14 14 -36 8 -44 -6 c-6 16 -28 22 -42 10 c-14 -12 -10 -34 4 -42 c-18 -4 -26 -34 -12 -52 Z'/%3E%3Ccircle cx='366' cy='128' r='9'/%3E%3Cpath d='M52 330 C84 296 134 290 168 312 C146 318 130 334 124 354 C108 336 84 330 52 330 Z'/%3E%3Cpath d='M168 312 C196 330 206 356 200 386'/%3E%3Cpath d='M300 280 q40 24 36 72 q-34 -10 -36 -72 Z'/%3E%3Cpath d='M336 352 q44 -16 76 12 q-38 22 -76 -12 Z'/%3E%3Cpath d='M232 196 q10 -22 34 -22 q-4 24 -34 22 Z'/%3E%3Cpath d='M404 220 q-26 2 -34 26 q26 4 34 -26 Z'/%3E%3Ccircle cx='258' cy='248' r='3'/%3E%3Ccircle cx='86' cy='222' r='3'/%3E%3Ccircle cx='388' cy='52' r='3'/%3E%3Ccircle cx='198' cy='420' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:var(--sans);
  font-weight:300;
  color:var(--ivory);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(183,110,121,.18) 0%, rgba(183,110,121,0) 55%),
    radial-gradient(90% 60% at 100% 0%, rgba(244,184,191,.08) 0%, rgba(244,184,191,0) 50%),
    var(--ink-900);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

/* paper grain so flat fills feel printed */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

:focus-visible{ outline:2px solid var(--rose-soft); outline-offset:3px; }

.wordmark{
  font-family:var(--trajan); font-weight:600; letter-spacing:.26em;
  background:var(--grad-metal); -webkit-background-clip:text; background-clip:text; color:transparent;
  display:inline-block;
}

.seam{ height:1px; width:100%; background:var(--glow-line); box-shadow:0 0 16px 1px rgb(var(--blush-rgb)/.45); }

/* sign in */
.gate{
  position:relative; z-index:1; min-height:100vh; min-height:100dvh;
  display:grid; place-items:center; padding:28px;
}
.gate__floral{
  position:absolute; inset:0; background-image:var(--floral); background-size:520px;
  opacity:.05; mix-blend-mode:screen; pointer-events:none;
}
.gate__card{
  position:relative; width:min(420px,100%); text-align:center;
  background:linear-gradient(180deg, rgba(36,27,26,.92), rgba(20,16,15,.94));
  border:1px solid var(--line-2); border-radius:var(--radius);
  padding:14px 36px 30px; backdrop-filter:blur(8px);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9), 0 0 60px -10px rgb(var(--blush-rgb)/.16);
}
.gate__card .seam{ margin:0 auto 30px; width:60%; }
.gate .wordmark{ font-size:30px; }
.gate__sub{
  font-family:var(--trajan); font-weight:500; letter-spacing:.34em; font-size:11px;
  color:var(--rose-soft); margin-top:9px; text-transform:uppercase;
}
.gate__lead{
  font-family:var(--serif); font-style:italic; font-size:18px; color:var(--ivory-soft);
  margin:22px auto 24px; max-width:30ch; line-height:1.45; text-wrap:balance;
}
.gate__foot{
  margin-top:22px; display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  gap:8px 18px; font-size:13px; color:var(--muted);
}
.gate__legal{ margin-top:22px; font-size:11px; letter-spacing:.04em; }
.gate__legal a{ color:var(--muted-2); text-decoration:none; }
.gate__legal a:hover{ color:var(--muted); }

.linkbtn{
  background:none; border:0; border-bottom:1px solid rgb(var(--rosegold-rgb)/.4);
  padding:0 0 1px; cursor:pointer;
  font-family:var(--sans); font-size:13px; font-weight:300; color:var(--rose-soft);
}
.linkbtn:hover{ color:var(--glow); }

/* forms */
.form{ display:grid; gap:14px; text-align:left; }
.field span{
  display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin:0 0 7px 2px;
}
.field input{
  width:100%; height:48px; padding:0 16px; color:var(--ivory);
  font-family:var(--sans); font-size:16px; font-weight:300;
  background:rgba(255,255,255,.03); border:1px solid var(--line-2); border-radius:var(--radius-sm); outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.field input::placeholder{ color:var(--muted-2); }
.field input:focus{
  border-color:var(--rose-soft); background:rgba(255,255,255,.05);
  box-shadow:0 0 0 3px rgb(var(--rosegold-rgb)/.18);
}
.form__msg{ font-size:13px; line-height:1.45; color:var(--rose); }
.form__msg:empty{ display:none; }
.form__msg.is-ok{ color:var(--ivory-soft); }

.btn{
  height:50px; border:0; border-radius:var(--radius-sm); cursor:pointer;
  font-family:var(--trajan); font-weight:500; font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  transition:transform .12s ease, box-shadow .25s, filter .2s;
}
.btn--metal{
  width:100%; margin-top:4px; color:#2b1a1d; background:var(--grad-metal);
  box-shadow:0 14px 34px -14px rgb(var(--rosegold-rgb)/.7), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn--metal:hover{
  filter:brightness(1.06);
  box-shadow:0 18px 40px -14px rgb(var(--rosegold-rgb)/.85), 0 0 28px -6px rgb(var(--blush-rgb)/.5);
}
.btn--metal:active{ transform:scale(.985); }
.btn[disabled]{ opacity:.65; cursor:progress; }
.btn--ghost{ background:transparent; color:var(--ivory-soft); border:1px solid var(--line-2); height:46px; padding:0 18px; }
.btn--ghost:hover{ border-color:var(--rose-soft); color:var(--ivory); box-shadow:0 0 22px -8px rgb(var(--blush-rgb)/.5); }

/* account */
.acct{ margin-top:6px; }
.acct .pb__kicker{ margin-bottom:0; }
.acct__who{ color:var(--ivory); }
.acct__out{ width:100%; margin-top:14px; }

@media (max-width:560px){
  .gate{ padding:16px; }
  .gate__card{ padding:12px 22px 24px; }
  .gate .wordmark{ font-size:26px; }
  .gate__sub{ letter-spacing:.28em; }
  .gate__lead{ font-size:16px; margin:18px auto 20px; max-width:26ch; }
  .field input{ height:46px; }
  .btn--metal{ height:48px; }
}