/* --- Base --- */
:root{
  --bg:#f2e1b2;        /* sand base (lighter for contrast) */
  --ink:#1b1a1a;
  --ink-soft:#4a4a4a;
  --accent:#d78900;
  --white:#ffffff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  color:var(--ink);
  background:transparent; /* let the canvas paint the background */
  overflow-x:hidden;
}

/* Sand canvas sits behind all content */
#sand-canvas{
  position:fixed;
  inset:0;
  z-index:0;
  display:block;
}

/* Create a layer above canvas for all site content */
.site-header, .hero, .section, .footer { position:relative; z-index:1; }

/* Header */
.site-header{
  position:sticky; top:0; z-index:2;
  backdrop-filter:saturate(120%) blur(6px);
  background:rgba(242,225,178,0.65);
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; border-bottom:1px solid rgba(0,0,0,.06);
}
.logo-wrap{display:flex; gap:12px; align-items:center}
.logo{width:44px; height:44px; border-radius:12px; object-fit:cover; box-shadow:0 4px 12px rgba(0,0,0,.15)}
.wordmark{font-weight:800; letter-spacing:.06em}
.nav a{color:var(--ink); text-decoration:none; margin-left:16px; font-weight:600}
.nav a:hover{opacity:.7}

/* Hero */
.hero{position:relative; display:grid; place-items:center; min-height:58vh; padding:24px}
.hero::before{
  /* subtle sun glow over dunes for visual punch */
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(600px 300px at 75% 10%, rgba(255,240,200,.55), transparent 70%);
}
.hero-art{width:min(1200px,95vw); border-radius:18px; box-shadow:0 12px 40px rgba(0,0,0,.2); display:block}
.hero-copy{
  position:absolute; inset:auto 0 24px 0; text-align:center; padding:0 16px;
  text-shadow:0 4px 16px rgba(0,0,0,.35); color:#fff;
}
.hero-copy h1{font-size: clamp(28px, 5.5vw, 64px); margin:0 0 8px}
.hero-copy p{margin:0 0 14px; font-weight:600}
.cta-row{display:flex; gap:12px; justify-content:center}
.btn{
  padding:10px 16px; border-radius:12px; border:2px solid rgba(0,0,0,.1);
  font-weight:800; letter-spacing:.02em; cursor:pointer; transition:transform .1s ease, box-shadow .2s ease, background .2s ease;
}
.btn.primary{background:var(--accent); color:var(--white); border-color:transparent}
.btn.ghost{background:rgba(255,255,255,.85)}
.btn:hover{transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,.15)}

/* Sections */
.section{padding:64px 16px}
.container{width:min(1100px,92vw); margin:0 auto}
.grid{display:grid; gap:20px; grid-template-columns: repeat(auto-fit,minmax(260px,1fr));}
.card{
  background:rgba(255,255,255,.7);
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px; overflow:hidden;
  box-shadow:0 8px 26px rgba(0,0,0,.08);
}
.card img{width:100%; height:220px; object-fit:cover}
.card-body{padding:16px}
.card h3{margin:0 0 6px}

/* CA section */
.section-ca{
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.4));
  border-block:1px solid rgba(0,0,0,.05);
}
.ca-wrap{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  background:#fff; padding:12px; border-radius:14px; border:1px solid rgba(0,0,0,.06);
}
#ca-text{font-weight:700; word-break:break-all}

/* Gallery */
.gallery .gallery-row{display:grid; gap:18px; grid-template-columns: 1fr 1fr}
.frame{background:#fff; border-radius:16px; padding:10px; border:1px solid rgba(0,0,0,.06)}
.frame img{width:100%; display:block; border-radius:12px}
.tilt{transform:rotate(-.5deg)}
.tilt:hover{transform:rotate(.5deg); transition:transform .2s ease}

/* Footer */
.footer{padding:40px 16px 80px; text-align:center; color:var(--ink-soft)}

/* Small screens */
@media (max-width:720px){
  .hero-copy{inset:auto 0 12px 0}
  .gallery .gallery-row{grid-template-columns:1fr}
}


/* Vibe & Lore styles */
.hero-copy .vibe{max-width:900px; margin:0 auto 12px; line-height:1.5}
.lore blockquote{
  margin:0; padding:28px 22px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  display:grid; gap:10px;
  font-size:clamp(16px, 2.2vw, 22px);
  font-weight:650;
}
.lore blockquote .punch{font-size:clamp(18px, 2.6vw, 26px)}


/* Drift Lore block */
.hidden-title{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.drift-lore{position:relative; overflow:hidden}
.lore-wrap{position:relative; min-height:260px}
.lore-canvas{
  position:absolute; inset:0;
  display:block; width:100%; height:100%;
  filter: blur(0.3px) contrast(1.05) saturate(1.05);
  opacity:.75; pointer-events:none;
}
.lore-text{
  position:relative; z-index:1;
  margin:0; padding:22px 18px;
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.60));
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  display:grid; gap:10px;
  font-size:clamp(16px, 2.2vw, 21px);
  font-weight:650;
  color:#2b2414;
  mix-blend-mode:multiply;
}
/* Subtle drifting highlight travelling across the text */
.lore-text::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120px 60px at -10% 30%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(120px 60px at 110% 70%, rgba(255,255,255,.25), transparent 60%);
  animation: driftGlow 7s linear infinite;
  pointer-events:none; border-radius:inherit;
}
@keyframes driftGlow{
  0%{transform:translateX(-10%)}
  50%{transform:translateX(10%)}
  100%{transform:translateX(-10%)}
}