/* =============================================================================
   Coming soon holding page.

   Deliberately standalone rather than styles.css: while the site is locked this
   is the only page that renders, so it should not drag in the whole stylesheet.
   No inline styles anywhere, the CSP is style-src 'self'.
   ============================================================================= */

@font-face{font-family:"Cinzel";src:url("../fonts/Cinzel-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("../fonts/Jost-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("../fonts/Jost-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --black:#07060a;
  --gold:#c6973f;
  --gold-l:#f3d488;
  --text:#ece6d8;
  --muted:#a89f8c;
  --line:rgba(212,175,55,.22);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.6rem;
  padding:1.5rem 1.1rem 2.5rem;
  background:var(--black);
  color:var(--text);
  font-family:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  text-align:center;
}

/* The artwork carries the message, so it leads and everything else supports it. */
.cs-art{
  width:100%;
  max-width:900px;
  height:auto;
  border-radius:14px;
  border:1px solid var(--line);
  display:block;
}

.cs-copy{max-width:52ch;display:grid;gap:.5rem}
h1{
  font-family:"Cinzel",Georgia,serif;
  font-weight:700;
  font-size:clamp(1.3rem,4.2vw,1.9rem);
  letter-spacing:.03em;
  color:var(--gold-l);
  margin:0;
}
.cs-copy p{margin:0;color:var(--muted);line-height:1.65;font-size:clamp(.95rem,2.6vw,1.05rem)}
.cs-copy strong{color:var(--text);font-weight:500}

.cs-actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.cs-btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.8rem 1.3rem;border-radius:999px;
  font:inherit;font-weight:500;font-size:1rem;
  text-decoration:none;
  border:1px solid var(--line);
  color:var(--text);
  background:rgba(255,255,255,.03);
  transition:border-color .25s,color .25s,transform .25s;
}
.cs-btn:hover,.cs-btn:focus-visible{border-color:var(--gold);color:var(--gold-l);transform:translateY(-2px)}
/* The primary action carries the gold border so it reads first against the
   quieter map link beside it. */
.cs-btn-primary{border-color:rgba(198,161,91,.55)}

.cs-socials{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
.cs-socials a{width:46px;height:46px;display:inline-block;border-radius:50%}
.cs-socials img{
  width:100%;height:100%;border-radius:50%;
  mix-blend-mode:screen;filter:grayscale(.25) brightness(.85);
  transition:filter .4s,transform .4s;
}
.cs-socials a:hover img,.cs-socials a:focus-visible img{filter:none;transform:translateY(-3px)}

.cs-foot{color:var(--muted);font-size:.85rem;line-height:1.6}
.cs-foot a{color:var(--gold);text-decoration:none}
.cs-foot a:hover{color:var(--gold-l);text-decoration:underline}

@media (max-width:520px){
  body{gap:1.25rem;padding-top:1rem}
  .cs-btn{width:100%;justify-content:center}
}