:root{ --bg:#0c0b09; --fg:#eae3cf; --muted:#b9a985; --accent:#d0b26a; --accent-2:#7db8b9; --card:#14120f; --glow: 0 0 32px rgba(208,178,106,.25); }
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1000px 600px at 80% -10%, rgba(125,184,185,.18), transparent 60%),
    radial-gradient(800px 500px at 10% -5%, rgba(208,178,106,.12), transparent 60%),
    var(--bg);
  color:var(--fg); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height:1.55; overflow-x:hidden;
}

/* keep content above dunes */
.topnav, header, .wrap, footer { position:relative; z-index:1; }

/* top nav (fixed container width across pages) */
.topnav{
  position:sticky; top:0; z-index:1000; backdrop-filter: blur(6px);
  background: rgba(20,18,15,.6); border-bottom:1px solid rgba(255,255,255,.08);
}
.topnav .inner{ width:min(1100px, 92vw); margin:0 auto; display:flex; gap:10px; align-items:center; padding:10px 12px; }
.brand{ font-family: Rajdhani, sans-serif; letter-spacing:.14em; text-transform:uppercase; font-weight:700; font-size:15px; color:var(--fg); opacity:.9; }
.navlinks{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.navlinks a{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px;
  text-decoration:none; color:var(--fg); font-weight:600; letter-spacing:.03em; font-size:14px;
  border:1px solid rgba(218,198,142,.20); background: linear-gradient(180deg, rgba(208,178,106,.14), rgba(208,178,106,.05));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  transition:.2s ease transform,.2s ease box-shadow;
}
.navlinks a:hover{ transform:translateY(-1px); box-shadow: 0 0 0 3px rgba(208,178,106,.12), var(--glow); }
.navlinks a.active{ border-color: rgba(208,178,106,.5); background: linear-gradient(180deg, rgba(208,178,106,.26), rgba(208,178,106,.10)); }

header{ isolation:isolate; padding: clamp(48px, 8vw, 120px) 24px 40px; text-align:center; }
.title{ font-family: Rajdhani, sans-serif; letter-spacing:.14em; text-transform:uppercase; font-weight:700; margin:0 0 10px; font-size: clamp(28px, 5vw, 54px); color:var(--fg); text-shadow: 0 1px 0 rgba(0,0,0,.35);}
.subtitle{ max-width: 62ch; margin: 0 auto; color: var(--muted); font-size: clamp(14px, 2.2vw, 18px);}
.header-img{ margin: 20px auto; max-width: 320px; width: 100%; border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.5); }

.cta{ margin-top: 28px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn{ --pad: 14px 22px; display:inline-flex; align-items:center; gap:10px; padding:var(--pad); border-radius:999px; border:1px solid rgba(218,198,142,.35);
  background: linear-gradient(180deg, rgba(208,178,106,.22), rgba(208,178,106,.08)); color:var(--fg); text-decoration:none; font-weight:600; letter-spacing:.03em;
  box-shadow: var(--glow), inset 0 0 0 1px rgba(255,255,255,.04); transition:.2s ease transform, .2s ease box-shadow, .2s ease background; }
.btn:hover{ transform:translateY(-1px); box-shadow: 0 0 0 3px rgba(208,178,106,.18), var(--glow); }
.btn:active{ transform:translateY(0); }
.btn.secondary{ background: linear-gradient(180deg, rgba(125,184,185,.18), rgba(125,184,185,.06)); border-color: rgba(125,184,185,.35); }

.wrap{ width:min(1100px, 92vw); margin: 36px auto 0; padding: 0 16px; }
.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:18px; margin-top: 22px; }
.card{ background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00)); border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:18px 18px 16px; box-shadow: 0 10px 40px rgba(0,0,0,.28); backdrop-filter: blur(4px); }
.card h3{ font-family: Rajdhani, sans-serif; text-transform:uppercase; letter-spacing:.12em; font-weight:700; margin:4px 0 8px; color:var(--accent); }
.card p{ margin:0; color:var(--fg); opacity:.88; }

/* My Progress grid (index) */
.section-title{ font-family: Rajdhani, sans-serif; text-transform: uppercase; letter-spacing:.14em; font-weight:700; color: var(--accent); margin: 28px 0 10px; text-align:center; font-size: clamp(18px, 2.2vw, 24px); }
.progress-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
@media (max-width: 780px){ .progress-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .progress-grid{ grid-template-columns: 1fr; } }
.progress-item{ border-radius:14px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)); box-shadow: 0 10px 40px rgba(0,0,0,.28); overflow:hidden; }
.progress-thumb{ display:block; width:100%; aspect-ratio: 4/3; object-fit:cover; display:block; transform:scale(1.02); transition:.25s transform ease, .25s opacity ease; background:#111; }
.progress-label{ display:block; padding:10px 12px; font-size:13px; color:var(--fg); opacity:.9; border-top:1px solid rgba(255,255,255,.06);  text-align:center; }

/* Images page */
.gallery{ display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap:12px; }
.thumb{ position:relative; overflow:hidden; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:#111; aspect-ratio: 4/3; display:block; }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); transition: .25s transform ease, .25s opacity ease; }
.thumb:hover img{ transform:scale(1.06); opacity:.95; }
.thumb span{ position:absolute; left:8px; bottom:8px; font-size:12px; color:#eae3cf; background:rgba(0,0,0,.35); padding:4px 8px; border-radius:999px; }

/* Videos page */
.grid.videos{ grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
.yt{ display:block; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.10); background:#000; text-decoration:none; color:inherit; }
.yt .thumb{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.yt .meta{ padding:10px 12px; display:flex; align-items:center; gap:10px; }
.yt .title{ font-size:14px; margin:0; letter-spacing:.02em; }

/* Contact page */
label{ display:block; font-weight:600; margin:10px 0 6px; color:var(--fg); }
input, textarea{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); color:var(--fg); outline:none; }
textarea{ min-height:140px; resize:vertical; }

/* Whurm Rhyder page */
.image-box{ display:flex; justify-content:center; margin: 30px auto 20px; }
.image-box img{ width: min(100%, 400px); height: auto; border-radius: 18px; box-shadow: 0 10px 40px rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.08); }

/* Dunes / footer shared */
.dunes{ position:relative; z-index:0; margin-top: 48px; pointer-events:none; }
.dunes svg{ display:block; width:100%; height:auto; }
footer{ text-align:center; color:var(--muted); padding: 10px 0 40px; font-size: 14px; }

/* Stars decoration */
.stars { position: absolute; inset:0; pointer-events:none; z-index:-1; }
.stars::before, .stars::after { content:""; position:absolute; inset:0; background-repeat:repeat; mix-blend-mode:screen; opacity:.22;
  background-image: radial-gradient(2px 2px at 20px 30px, #fff, transparent 40%), radial-gradient(1.5px 1.5px at 80px 120px, #fff, transparent 36%), radial-gradient(1.75px 1.75px at 150px 60px, #fff, transparent 36%), radial-gradient(1.5px 1.5px at 220px 160px, #fff, transparent 36%), radial-gradient(2px 2px at 300px 90px, #fff, transparent 40%);
  animation: drift 40s linear infinite; }
.stars::after{ animation-duration: 65s; opacity:.12; filter:blur(.3px); }
@keyframes drift { from { transform: translateY(0);} to { transform: translateY(-200px);} }

/* a11y */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.progress-item:hover .progress-thumb{ transform:scale(1.06); opacity:.95; }