:root{
  --gold: #FDA300;
  --magenta: #FD007F;
  --navy: #071826;
  --bg-grad: linear-gradient(180deg, rgba(7,24,38,1) 0%, rgba(3,12,20,1) 100%);
}

/* Reset + layout */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: Inter, system-ui, Arial, sans-serif;
  background: var(--bg-grad);
  background-color: var(--navy); /* solid fallback that always covers */
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #e6eef6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Allow components to set their own border-radius (keep glassy cards rounded) */
/* removed global radius reset so cards can have subtle rounding */

/* starry subtle background */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,255,0.14) 0.6px, transparent 0.9px),
    radial-gradient(rgba(255,255,255,0.08) 1.2px, transparent 1.8px);
  background-size: 600px 600px, 360px 360px;
  opacity:1;filter:none;mix-blend-mode:screen;
}

/* decorative rotating arcs layer - centered and subtle */
body::after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;display:block;
  background-image: url('/static/star-trail-arcs-2.svg');
  background-repeat: no-repeat; background-position: center center;
  background-size: 240% auto; /* allow extra bleed so rotation doesn't reveal edges */
  opacity:0.20;transform-origin:47% 50%;
  will-change: transform; filter: contrast(1.05) saturate(1);
  animation: rotateSlow 160s linear infinite;
}

@keyframes rotateSlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* slow twinkle */
@keyframes twinkle{0%{opacity:.85}50%{opacity:1}100%{opacity:.85}}
body::before{animation:twinkle 12s ease-in-out infinite}

/* container */
.container{max-width:1180px;margin:36px auto;padding:28px}

/* Typography */
body{font-size:16px;line-height:1.45}
p{color:rgba(230,238,246,0.95);margin-bottom:12px}

/* Header */
.site-header{display:flex;justify-content:space-between;align-items:center;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--gold);letter-spacing:1px}
.brand-logo{max-height:50px;height:auto;width:auto;display:block}
.nav{display:flex;gap:12px}
.nav a{color:rgba(230,238,246,0.9);text-decoration:none;padding:6px 10px}
.nav a:hover{text-decoration:underline}

/* Animated gradient outline (uses double background trick) */
.outline {
  position:relative;display:block;padding:18px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  border:1px solid rgba(255,255,255,0.03);backdrop-filter: blur(6px);
  transition:transform .18s ease,box-shadow .18s ease;overflow:hidden;
  border-radius:12px;
}
.outline:focus,.outline:hover{transform:translateY(-2px)}
/* outline shimmer: very subtle, professional */
.outline::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background: linear-gradient(90deg, rgba(253,0,127,0.04), rgba(253,163,0,0.04));
  opacity:0.06;mix-blend-mode:screen;transform:translateZ(0);
}
@keyframes outlineShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.outline::after{animation:outlineShift 18s ease-in-out infinite}

/* headings */
h1{font-size:2.2rem;color:var(--gold);letter-spacing:0.6px}
h2{font-size:1.25rem;color:var(--magenta);margin-bottom:8px}

.hero{position:relative;min-height:80vh;display:flex;align-items:center;justify-content:center;padding:36px 12px}
.hero .media{position:absolute;right:6%;top:50%;transform:translateY(-50%);width:48%;max-width:720px;height:auto;pointer-events:none;display:block}
.hero .media img{width:100%;height:auto;display:block;object-fit:contain}
.hero .overlay{position:relative;z-index:1;padding:32px;max-width:900px;text-align:left}

.hero .hero-head{display:flex;align-items:center;gap:14px}
.hero .hero-head .hero-logo{height:64px;width:auto;display:block}

/* utility: limit large hero images */
.hero-image{max-height:700px;height:auto;width:auto;display:block;object-fit:contain}

.hero .title{font-size:3.2rem;color:var(--gold);text-shadow:0 4px 20px rgba(0,0,0,.6);margin-bottom:8px}
.hero .lead{color:rgba(230,238,246,0.95);font-size:1.05rem;max-width:54ch}

/* video slot */
.video-wrap{width:100%;background:#000;height:56.25vw;max-height:560px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,0.04);margin-top:8px}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.grid{display:block;gap:20px;margin-top:28px}

.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));padding:18px;box-shadow:0 6px 18px rgba(2,8,16,0.45);margin-bottom:18px}

.gallery{display:flex;flex-direction:column;gap:12px}
.gallery img{width:100%;height:420px;object-fit:cover;border:2px solid rgba(255,255,255,0.04)}

.media-row{display:flex;gap:12px}
.media-row .half{flex:1}

.text-photo{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
.text-photo img{width:100%;height:240px;object-fit:cover;border:1px solid rgba(255,255,255,0.03)}

.agenda{background:transparent}
.agenda ul{list-style:none}
.agenda li{display:flex;gap:12px;padding:12px 8px;border-top:1px solid rgba(255,255,255,0.03)}
.agenda .date{width:84px;color:var(--gold);font-weight:700}
.agenda .item{flex:1}

.btn{display:inline-block;padding:4px 6px;background:transparent;color:var(--magenta);border:none;text-decoration:underline;font-weight:600}
.btn:hover{color:var(--gold);text-decoration:none;opacity:0.95}

/* subtle logout link (kinda hidden) */
.logout{color:rgba(230,238,246,0.45);font-size:0.9rem;text-decoration:none;opacity:0.5}
.logout:hover{opacity:1;color:var(--gold);text-decoration:underline}

/* small utilities */
.muted{color:rgba(230,238,246,0.6);font-size:0.95rem}

/* accent text */
.accent-mag{color:var(--magenta)}
.accent-gold{color:var(--gold)}

/* responsive */
@media (max-width:900px){
  .grid{grid-template-columns:1fr}
  .text-photo{grid-template-columns:1fr}
  .hero{min-height:50vh;padding:24px 12px}
  .hero .media{position:absolute;right:12px;top:12px;width:160px;height:auto}
  .gallery img{height:200px}
}