@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/cormorant-garamond-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/jost-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jost-latin-400-normal.woff2) format('woff2')}

:root{
  --bg:#2B2826;          /* matches logo background, warm charcoal – no black */
  --bg-deep:#231F1D;
  --champagne:#CFC3A0;
  --champagne-2:#D3C8A7;
  --champagne-soft:rgba(207,195,160,.55);
  --line:rgba(207,195,160,.28);
  --err:#E3B9A0;
  --sans:'Jost',system-ui,sans-serif;
  --serif:'Cormorant Garamond',Georgia,serif;
}
html[lang^="zh"]{
  --sans:'Jost',"PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif;
  --serif:'Cormorant Garamond',"Songti SC","Noto Serif SC","STSong",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  background:radial-gradient(ellipse at 50% 35%, #34302D 0%, var(--bg) 45%, var(--bg-deep) 100%);
  background-color:var(--bg);
  color:var(--champagne);
  font-family:var(--sans);
  font-weight:300;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;
  padding:24px 16px;
  -webkit-font-smoothing:antialiased;
}
.lang{position:absolute;z-index:10;top:18px;right:20px;font-size:.72rem;letter-spacing:.18em;color:var(--champagne-soft)}
.lang a{color:var(--champagne-soft);text-decoration:none;padding:6px 4px}
.lang a[aria-current="true"]{color:var(--champagne-2);border-bottom:1px solid var(--champagne)}
.lang span{opacity:.5;margin:0 4px}
main{width:100%;max-width:520px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.logo{
  width:min(440px,88vw);height:auto;display:block;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 52%, transparent 71%);
          mask-image:radial-gradient(circle at 50% 50%, #000 52%, transparent 71%);
  opacity:0;animation:rise 1.6s ease-out .1s forwards;
}
.tagline{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,4.5vw,2rem);letter-spacing:.02em;
  color:var(--champagne-2);margin-top:4px;
  opacity:0;animation:rise 1.4s ease-out .7s forwards;
}
.tagline-zh{
  font-family:"Songti SC","Noto Serif SC","STSong",serif;font-weight:400;
  font-size:.95rem;letter-spacing:.42em;padding-left:.42em;color:var(--champagne-soft);margin-top:6px;
  opacity:0;animation:rise 1.4s ease-out .85s forwards;
}
.sub{
  font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;color:var(--champagne-soft);
  margin-top:14px;
  opacity:0;animation:rise 1.4s ease-out 1s forwards;
}
form,.thanks{
  width:100%;margin-top:44px;
  opacity:0;animation:rise 1.4s ease-out 1.3s forwards;
}
.intro{font-size:.95rem;line-height:1.7;color:var(--champagne-soft);margin-bottom:26px}
.field{position:relative;margin-bottom:22px;text-align:left}
label{display:block;font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--champagne-soft);margin-bottom:6px}
label small{letter-spacing:.1em;text-transform:none;opacity:.7}
input[type=text],input[type=email]{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  color:var(--champagne-2);font:inherit;font-size:1.05rem;padding:8px 2px;outline:none;
  border-radius:0;transition:border-color .3s;
}
input::placeholder{color:rgba(207,195,160,.3)}
input:focus{border-bottom-color:var(--champagne)}
input:-webkit-autofill{-webkit-text-fill-color:var(--champagne-2);-webkit-box-shadow:0 0 0 40px var(--bg) inset;caret-color:var(--champagne)}
.error{display:none;font-size:.75rem;color:var(--err);margin-top:6px}
.field.invalid input{border-bottom-color:var(--err)}
.field.invalid .error{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{font-size:.72rem;line-height:1.6;color:rgba(207,195,160,.45);margin:4px 0 26px;text-align:left}
.consent a{color:var(--champagne-soft)}
button{
  width:100%;background:transparent;color:var(--champagne-2);
  border:1px solid var(--champagne);padding:15px 20px;cursor:pointer;
  font:inherit;font-size:.78rem;letter-spacing:.34em;text-transform:uppercase;
  transition:background .35s,color .35s;
}
button:hover,button:focus-visible{background:var(--champagne);color:var(--bg)}
button:disabled{opacity:.5;cursor:wait}
.thanks{display:none}
.thanks h2{font-family:var(--serif);font-weight:400;font-size:1.7rem;color:var(--champagne-2);margin-bottom:10px}
.thanks p{color:var(--champagne-soft);line-height:1.7}
details{margin-top:18px;font-size:.72rem;color:rgba(207,195,160,.45);text-align:left}
details summary{cursor:pointer;letter-spacing:.2em;text-transform:uppercase}
details p{margin-top:8px;line-height:1.6}
footer{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(207,195,160,.35);margin-top:48px}

/* Phones: compact header so name + email sit above the fold */
@media (max-width:600px){
  body{padding:12px 16px 20px}
  main{justify-content:flex-start}
  .logo{width:min(250px,64vw);margin:4px 0 -14px}
  .tagline{font-size:1.45rem;margin-top:0}
  .tagline-zh{font-size:.85rem;margin-top:4px}
  .sub{font-size:.66rem;letter-spacing:.26em;margin-top:8px}
  form,.thanks{margin-top:22px}
  .intro{font-size:.88rem;line-height:1.5;margin-bottom:14px}
  .field{margin-bottom:16px}
  input[type=text],input[type=email]{padding:6px 2px}
  footer{margin-top:28px}
}
@media (max-width:600px) and (max-height:620px){
  .logo{width:min(190px,52vw);margin-bottom:-10px}
}

@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;opacity:1!important}}