/* ============================================================
   Roscoe Street Garage - Coming Soon
   style.css  (base / desktop-first custom CSS)
   ============================================================ */

:root{
  --dark:#1b1e24;        /* charcoal background      */
  --dark-2:#23272f;      /* raised panel             */
  --accent:#f0a020;      /* amber accent             */
  --accent-2:#e8890c;    /* deeper amber             */
  --light:#ffffff;
  --muted:#b9bcc4;       /* soft grey text           */
  --line:rgba(240,160,32,.35);
  --maxw:720px;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*,
*::before,
*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100vh;
  font-family:var(--font);
  color:var(--light);
  line-height:1.6;
  background-color:var(--dark);
  background-image:
    radial-gradient(1200px 600px at 50% -10%, rgba(240,160,32,.16), transparent 60%),
    linear-gradient(180deg, #20242c 0%, var(--dark) 55%, #15181d 100%);
  background-attachment:fixed;
  display:flex;
}

/* Layout ---------------------------------------------------- */
.stage{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:48px 24px;
}

.panel{
  width:100%;
  max-width:var(--maxw);
  text-align:center;
  background:linear-gradient(180deg, rgba(35,39,47,.85), rgba(27,30,36,.85));
  border:1px solid rgba(255,255,255,.06);
  border-top:3px solid var(--accent);
  border-radius:16px;
  padding:56px 44px 48px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}

/* Type ------------------------------------------------------ */
.eyebrow{
  margin:0 0 22px;
  font-size:.82rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:700;
}

.brand{
  margin:0;
  font-size:3.4rem;
  line-height:1.02;
  font-weight:800;
  letter-spacing:.01em;
  text-transform:uppercase;
}

.brand span{ color:var(--accent); }

.tagline{
  margin:14px 0 0;
  font-size:1.15rem;
  color:var(--muted);
  letter-spacing:.02em;
}

.rule{
  width:88px;
  height:3px;
  margin:30px auto;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius:2px;
}

.soon{
  margin:0 0 14px;
  font-size:1.5rem;
  font-weight:700;
}

.lead{
  margin:0 auto 32px;
  max-width:46ch;
  color:var(--muted);
  font-size:1.02rem;
}

/* Contact --------------------------------------------------- */
.contact{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
}

.btn{
  display:inline-block;
  padding:15px 40px;
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  color:#20130a;
  font-weight:800;
  font-size:1rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:8px;
  box-shadow:0 8px 20px rgba(240,160,32,.28);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.btn:hover,
.btn:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(240,160,32,.38);
  filter:brightness(1.05);
}

.meta{
  font-style:normal;
  display:flex;
  flex-direction:column;
  gap:6px;
  color:var(--muted);
  font-size:.98rem;
}

.meta-line{ color:var(--light); }

.meta a{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid var(--line);
  padding-bottom:1px;
}

.meta a:hover,
.meta a:focus-visible{ color:var(--light); }

/* Footer ---------------------------------------------------- */
.foot{
  margin-top:40px;
  text-align:center;
  color:#7d818b;
  font-size:.82rem;
}

.foot p{ margin:0; }

/* Accessibility --------------------------------------------- */
a:focus-visible,
.btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}