/* ============================================================
   H-Town Concierge — FIFA World Cup 2026
   Shared design system. Navy & gold, editorial luxury concierge.
   ============================================================ */

:root {
  --navy-900: #091322;
  --navy-850: #0b1a2e;
  --navy-800: #0e2138;
  --navy-700: #142b48;
  --navy-600: #1d3a5e;
  --gold: #c9a24b;
  --gold-bright: #e7c873;
  --gold-deep: #9c7a2f;
  --ink: #f3ecdc;
  --ink-soft: #d8cfbd;
  --muted: #93a1b8;
  --muted-dim: #5e6f88;
  --danger: #e2674f;
  --danger-deep: #7a2d20;
  --line: rgba(201, 162, 75, 0.18);
  --line-soft: rgba(147, 161, 184, 0.14);
  --shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.85);
  --radius: 18px;
  --maxw: 1080px;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background:
    radial-gradient(1100px 700px at 82% -8%, rgba(201, 162, 75, 0.14), transparent 60%),
    radial-gradient(900px 600px at 8% 12%, rgba(29, 58, 94, 0.55), transparent 55%),
    linear-gradient(180deg, var(--navy-900), var(--navy-850) 55%, var(--navy-900));
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Fine grain overlay for atmosphere — fixed, non-interactive */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(9, 19, 34, 0.92), rgba(9, 19, 34, 0.62));
  border-bottom: 1px solid var(--line);
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}
.brand { display: flex; align-items: center; gap: 13px; }
.brand img { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); }
.brand b { font-family: var(--display); font-weight: 600; font-size: 1.12rem; letter-spacing: 0.2px; }
.brand span { display: block; font-size: 0.66rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); margin-top: 1px; }

.nav { display: flex; gap: 6px; align-items: center; }
.nav a {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 9px 14px;
  border-radius: 999px;
  transition: color 0.25s ease, background 0.25s ease;
}
.nav a:hover { color: var(--ink); background: rgba(201, 162, 75, 0.08); }
.nav a.active { color: var(--navy-900); background: var(--gold); }
.nav a.sos { color: var(--danger); }
.nav a.sos:hover { color: #fff; background: rgba(226, 103, 79, 0.16); }

.navtoggle { display: none; }

/* ---------- Section scaffolding ---------- */
.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold); display: inline-block; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.08; margin: 0; }

.section { padding: 76px 0; }
.section-head { max-width: 640px; margin-bottom: 40px; }
.section-head h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); margin: 16px 0 12px; }
.section-head p { color: var(--muted); font-size: 1.02rem; margin: 0; }

/* ---------- Cards ---------- */
.card {
  background: linear-gradient(165deg, rgba(20, 43, 72, 0.6), rgba(11, 26, 46, 0.6));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  background: linear-gradient(140deg, rgba(201, 162, 75, 0.4), transparent 40%) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.7;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  color: var(--gold-bright);
  background: transparent;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.25s ease, color 0.25s ease;
}
.btn:hover { transform: translateY(-2px); background: var(--gold); color: var(--navy-900); }
.btn-solid { background: var(--gold); color: var(--navy-900); }
.btn-solid:hover { background: var(--gold-bright); }
.btn-danger { border-color: var(--danger); color: #f3b5a7; }
.btn-danger:hover { background: var(--danger); color: #fff; }

/* ---------- Status pill ---------- */
.live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(9, 19, 34, 0.5);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: #57d28a; box-shadow: 0 0 0 0 rgba(87, 210, 138, 0.7); animation: pulse 2.4s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(87, 210, 138, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(87, 210, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(87, 210, 138, 0); }
}

/* ---------- Footer ---------- */
.foot {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding: 44px 0 60px;
  color: var(--muted);
  font-size: 0.85rem;
}
.foot .wrap { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; }
.foot a { color: var(--ink-soft); }
.foot a:hover { color: var(--gold-bright); }

/* ---------- Reveal on load ---------- */
.reveal { opacity: 0; transform: translateY(18px); animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Utility ---------- */
.grid { display: grid; gap: 22px; }
.muted { color: var(--muted); }
.gold { color: var(--gold-bright); }
.mono-num { font-family: var(--display); font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .nav { display: none; }
  .nav.open {
    display: flex;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px 24px 22px;
    background: var(--navy-850);
    border-bottom: 1px solid var(--line);
  }
  .nav.open a { padding: 13px 14px; }
  .navtoggle {
    display: inline-flex;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: 10px;
    width: 42px;
    height: 38px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .section { padding: 54px 0; }
}

/* ============================================================
   Mobile-first layout. The page markup declares its column
   templates inline (e.g. style="grid-template-columns:repeat(3,1fr)"),
   so on phones these grids never stacked and the content was
   crushed into tiny columns. Inline styles outrank the stylesheet,
   so the collapse rules below must use !important to take effect.
   This single shared layer makes every page stack on small screens.
   ============================================================ */
@media (max-width: 640px) {
  /* Hero, side-by-side panels, and 2-/3-up card grids → one column */
  [style*="1.15fr 0.85fr"],
  [style*="1.4fr 0.6fr"],
  [style*="1.1fr 1fr auto"],
  [style*="auto 1fr auto"],
  [style*="1fr 1fr"],
  [style*="repeat(2,1fr)"],
  [style*="repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Four-across stat / countdown rows → a comfortable 2×2 block */
  [style*="repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Trim the desktop-scale padding and gutters for narrow screens */
  .section { padding: 44px 0; }
  .wrap { padding: 0 18px; }
  .foot .wrap { gap: 18px; }

  /* Headlines that were sized for wide viewports get a touch smaller */
  h1 { word-break: break-word; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
}