:root{
  --bleu-nuit:#0f1d37;
  --or-patine:#c8a05a;
  --ivoire:#f7f3ea;
  --ivoire-chaud:#fbf7ef;
  --encre:#14223a;
  --or-clair:#d7b877;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--encre);
  background:
    radial-gradient(circle at 50% 5%, rgba(255,255,255,.94), rgba(247,243,234,.96) 46%, rgba(240,233,219,.96) 100%),
    linear-gradient(135deg, rgba(200,160,90,.06), transparent 42%, rgba(15,29,55,.035));
  font-family:"Montserrat", Arial, sans-serif;
  letter-spacing:.045em;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.36;
  background-image:
    linear-gradient(rgba(15,29,55,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,29,55,.018) 1px, transparent 1px);
  background-size:48px 48px,48px 48px;
  mask-image:radial-gradient(circle at 50% 45%, black, transparent 78%);
}
.page{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:40px 18px;
}
.card{
  width:min(920px,100%);
  min-height:min(720px,calc(100vh - 80px));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:58px clamp(22px,5vw,82px) 52px;
  text-align:center;
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(247,243,234,.14));
  border:1px solid rgba(200,160,90,.22);
  box-shadow:0 28px 80px rgba(15,29,55,.08), inset 0 0 0 1px rgba(255,255,255,.48);
}
.card::before,.card::after{
  content:"";
  position:absolute;
  left:34px;
  right:34px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(200,160,90,.42), transparent);
}
.card::before{top:28px}.card::after{bottom:28px}
.top-rule{
  width:min(360px,65%);
  height:1px;
  margin-bottom:22px;
  background:linear-gradient(90deg, transparent, var(--or-patine), transparent);
}
.brand{
  width:min(650px,92%);
  height:auto;
  display:block;
  margin:0 auto 18px;
  mix-blend-mode:multiply;
  filter:drop-shadow(0 10px 18px rgba(15,29,55,.035));
}
.construction{margin-top:8px; max-width:680px}
.eyebrow{
  display:block;
  margin-bottom:20px;
  color:var(--or-patine);
  font-family:"Montserrat", Arial, sans-serif;
  font-size:12px;
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
}
h1{
  margin:0 0 18px;
  color:var(--bleu-nuit);
  font-family:"Trajan Pro","Cinzel",Georgia,serif;
  font-weight:400;
  font-size:clamp(28px,4vw,48px);
  line-height:1.15;
  letter-spacing:.095em;
  text-transform:uppercase;
}
p{
  margin:0 auto;
  max-width:640px;
  color:rgba(15,29,55,.78);
  font-size:clamp(14px,1.45vw,17px);
  line-height:1.85;
  letter-spacing:.08em;
}
.separator{
  width:96px;
  height:auto;
  margin:34px 0 20px;
  mix-blend-mode:multiply;
  opacity:.95;
}
.signature{
  color:var(--bleu-nuit);
  font-family:"Montserrat", Arial, sans-serif;
  font-size:12px;
  font-weight:400;
  letter-spacing:.32em;
  text-transform:uppercase;
}
@media (max-width:640px){
  .page{padding:18px 12px}
  .card{min-height:calc(100vh - 36px); padding:44px 16px 42px}
  .card::before,.card::after{left:18px; right:18px}
  .brand{width:100%; margin-bottom:8px}
  .eyebrow{font-size:10px; letter-spacing:.24em}
  h1{font-size:27px; letter-spacing:.06em}
  p{font-size:13px; line-height:1.7; letter-spacing:.045em}
  .signature{font-size:10px; letter-spacing:.22em}
}