/* Top8 Red–Orange Theme (v2 precise layout) */

/* ===== Color System ===== */
:root{
  --bg:#100a0a;
  --bg2:#1a0e0c;
  --fg:#fff7f2;
  --muted:#d9c7bf;
  --accent:#ff4d4d;
  --accent2:#ff9d3c;
  --panel:#241312;
  --line:#ff6a3c;
  --br:rgba(255,255,255,.12);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  color:var(--fg);
  background:
    radial-gradient(1100px 520px at 15% -10%, #2a1010 0%, transparent 60%),
    radial-gradient(950px 460px at 100% 0%,  #26110d 0%, transparent 58%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ===== Mobile-first grid (pins footer bottom) ===== */
main.wrap{
  min-height: 100svh; /* stable viewport height */
  display: grid;
  grid-template-columns: 1fr;
  /* 1:logo 2:h1 3:p 4:buttons 5:spacer 6:socials 7:footer */
  grid-template-rows: auto auto auto auto 1fr auto auto;
  padding: 48px 16px 16px;
  max-width: 1100px;
  margin-inline: auto;
}

/* Left stack (centered on mobile) */
.logo-block{ grid-column:1; grid-row:1; text-align:center; }
.site-name{  grid-column:1; grid-row:2; text-align:center; }
.subtitle{   grid-column:1; grid-row:3; text-align:center; color:var(--muted); }

/* Logo text */
.logo-fallback{ 
  font-weight:800; 
  font-size: clamp(56px, 15vw, 112px);
  line-height: .95;
}
.logo-fallback>span{
  background-image:linear-gradient(90deg, #ffe5dc, #fff, #ffd8c0);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow: 0 0 12px rgba(255,170,140,.35), 0 0 28px rgba(255,130,90,.28);
  animation: logoSweep 3s ease-in-out infinite alternate;
}
@keyframes logoSweep{ to{ background-position:100% 50%; } }

/* H1 + link gradient */
.site-name{
  margin: 10px 0 8px;
  font-weight: 850;
  font-size: clamp(22px, 4.8vw, 32px);
  letter-spacing:.2px;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Link stack (buttons) */
.link-stack{
  grid-column:1; grid-row:4;
  display:grid; gap:16px;
}
.pill{
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; color:var(--fg);
  padding:20px 24px; border-radius:24px;
  font-weight:800; font-size:1.08rem; letter-spacing:.2px; text-align:center;
  border:2px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    linear-gradient(90deg, color-mix(in oklab, var(--accent) 70%, black 30%), color-mix(in oklab, var(--accent2) 70%, black 30%));
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.pill:hover{
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--line) 85%, white 15%);
  box-shadow: 0 18px 48px rgba(0,0,0,.55), 0 0 36px color-mix(in oklab, var(--accent) 22%, transparent);
}

/* Socials + footer pinned bottom */
.socials{ grid-column:1; grid-row:6; display:flex; gap:12px; justify-content:center; }
.socials a{
  display:grid; place-items:center; width:42px; height:42px;
  border-radius:12px; background:#fff; color:#1a0e0c; border:none;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
footer{ grid-column:1; grid-row:7; text-align:center; color:var(--muted); padding: 6px 0 8px; }

/* ===== Desktop two-column with precise rows ===== */
@media (min-width: 1024px){
  main.wrap{
    grid-template-columns: minmax(520px, 640px) minmax(480px, 620px);
    /* 0.12vh top pad, then 3 rows for left stack, spacer, socials, footer */
    grid-template-rows: 12vh auto auto auto 1fr auto auto 4vh;
    column-gap: 72px;
    padding: 0 64px;
  }

  /* Left column items in rows 2-4 */
  .logo-block{ grid-column:1; grid-row:2; justify-self:start; text-align:left; }
  .site-name{  grid-column:1; grid-row:3; justify-self:start; text-align:left; }
  .subtitle{   grid-column:1; grid-row:4; justify-self:start; text-align:left; }

  /* Right column buttons occupy rows 2-4 and are vertically centered */
  .link-stack{ grid-column:2; grid-row:2 / span 3; align-self:center; max-width:600px; width:100%; }

  /* Bottom pinned */
  .socials{ grid-column:1 / -1; grid-row:6; }
  footer{   grid-column:1 / -1; grid-row:7; }
}