/* =========================
   Refined Elegant + Artsy Dark Theme
   ========================= */

/* Palette & scales */
:root{
  /* Core colors - refined for deeper elegance */
  --bg:#05070a;
  --bg-alt:#0a0d12;
  --panel:#0f1218;
  --panel-2:#0b0e12;
  --text:#f0f4f8;
  --muted:#b0bcc7;
  --accent:#e91e63;          /* Deeper rose for artistic warmth */
  --accent-2:#5c67ef;         /* Indigo blue for subtle mystery */

  /* Lines & depth - softer borders */
  --border:#1a1e26;
  --ring:#ffffff1a;

  /* Layout & rhythm - increased elegance */
  --maxw:1200px;
  --radius:20px;
  --radius-lg:24px;
  --pad:20px;
  --shadow:0 8px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.02);

  /* Type scale (fluid) - more poetic rhythm */
  --step--1: clamp(.85rem, .8rem + .28vw, .95rem);
  --step-0:  clamp(.96rem, .92rem + .38vw, 1.06rem);
  --step-1:  clamp(1.2rem, 1.05rem + .85vw, 1.55rem);
  --step-2:  clamp(1.45rem, 1.2rem + 1.3vw, 2.0rem);
  --step-3:  clamp(1.85rem, 1.5rem + 1.9vw, 2.65rem);
}

/* Global reset */
*{box-sizing:border-box}
html{font-size:15px}
body{
  margin:0;
  color:var(--text);
  font-family: 'Inter', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; /* Artsy serif touch for body */
  line-height:1.65;
  letter-spacing:.25px;

  /* Enhanced artsy gradient: ethereal cosmic veil with aurora hints */
  background:
    radial-gradient(ellipse 1200px 800px at 15% -5%, #2a3040 0%, transparent 50%),
    radial-gradient(ellipse 900px 600px at 85% 25%, #1f1a2e 0%, transparent 50%),
    radial-gradient(ellipse 600px 400px at 50% 100%, #0f1420 0%, transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
  background-attachment: fixed;
}

/* Refined film grain with artistic noise */
body::before{
  content:"";
  position:fixed; inset:-15vmax;
  pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/feColorMatrix%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 .015 .005'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.35; mix-blend-mode:overlay;
}

/* Link baseline - subtle artistic underline */
a{color:var(--accent); text-decoration:none}
a:hover{opacity:.85; text-shadow:0 0 8px color-mix(in oklab, var(--accent), transparent 70%)}

/* =========================
   Ethereal Glassy Nav
   ========================= */
.nav{
  position:fixed; inset:0 auto auto 0; right:0;
  background:linear-gradient(180deg, rgba(15,18,24,.75), rgba(10,12,16,.6));
  -webkit-backdrop-filter:saturate(120%) blur(12px) brightness(1.05);
  backdrop-filter:saturate(120%) blur(12px) brightness(1.05);
  border-bottom:1px solid var(--ring);
  z-index:1000;
}
.nav-inner{
  max-width:var(--maxw);
  margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--pad);
  gap:12px;
}
.brand{
  font-weight:900; letter-spacing:.8px;
  font-size:var(--step-0);
  color:var(--text);
  text-shadow:0 1px 2px rgba(0,0,0,.3);
}
.menu{display:flex; flex-wrap:wrap; gap:10px}
.menu a{
  color:var(--text);
  padding:10px 16px;
  border-radius:999px;
  font-weight:700; font-size:.94rem;
  position:relative; border:1px solid transparent;
  transition:color .25s ease, border-color .25s ease, transform .2s ease, box-shadow .25s ease;
}
.menu a::after{
  content:"";
  position:absolute; left:16px; right:16px; bottom:8px; height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:0; transform:scaleX(.7) translateY(2px);
  transition:opacity .3s ease, transform .3s ease;
}
.menu a:hover{color:var(--accent); border-color:var(--ring); transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.3)}
.menu a:hover::after{opacity:1; transform:scaleX(1) translateY(0)}

.menu-toggle{
  display:none;
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
}
@media (max-width:560px){
  .menu{display:none; width:100%}
  .menu.open{display:flex}
  .menu-toggle{display:block}
  .nav-inner{flex-wrap:wrap}
}

/* =========================
   Layout & Type - Poetic Typography
   ========================= */
.container{
  max-width:var(--maxw);
  margin:100px auto 72px;
  padding:0 var(--pad);
  text-align:center;
}
h1{
  font-weight:900;
  font-size:var(--step-3);
  margin:0 0 12px;
  letter-spacing:.6px;
  line-height:1.1;
  text-shadow:0 2px 4px rgba(0,0,0,.4), 0 0 20px rgba(233,30,99,.1);
  position:relative;
}
h1::after{
  content:"";
  position:absolute; left:50%; bottom:-8px; transform:translateX(-50%);
  width:60px; height:2px; background:var(--accent);
  border-radius:1px; opacity:.6;
}
.lead{margin:0 0 32px; color:var(--muted); font-size:var(--step-0); font-style:italic}

/* =========================
   Artistic Mosaic Grid & Cards
   ========================= */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:24px;
  align-items:start;
  justify-items:center;
}
.card{
  width:100%; max-width:400px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.015), rgba(0,0,0,0)),
    radial-gradient(ellipse 130% 160% at 0% -10%, rgba(92,103,239,.05), transparent 50%),
    radial-gradient(ellipse 80% 100% at 100% 100%, rgba(233,30,99,.03), transparent 70%),
    var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card::before{
  /* Artistic light sweep with prismatic hint */
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(135deg, 
    transparent 0%, 
    rgba(255,255,255,.03) 25%, 
    rgba(233,30,99,.02) 50%, 
    rgba(92,103,239,.02) 75%, 
    transparent 100%);
  transform:translateX(-100%) rotate(5deg);
  transition:transform 1s ease;
}
.card:hover{
  transform:translateY(-4px) rotate(0.5deg);
  border-color: color-mix(in oklab, var(--border), var(--accent) 25%);
  box-shadow:0 12px 40px rgba(0,0,0,.65), 0 0 0 1px var(--ring);
}
.card:hover::before{ transform:translateX(100%) rotate(5deg) }

.card img{
  display:block; width:100%; height:260px; object-fit:cover;
  border-radius:16px; margin:0 auto 16px;
  filter:saturate(1.05) contrast(1.03) brightness(1.02);
  transition: transform .4s ease, filter .4s ease;
  will-change: transform;
}
.card:hover img{ transform:scale(1.03) rotate(0.5deg); filter:saturate(1.1) contrast(1.07) brightness(1.05) }

.card h3{
  font-size:1.08rem; margin:8px 0 8px; color:var(--text); font-weight:900;
  letter-spacing:.3px;
}
.card p{
  font-size:var(--step--1); color:var(--muted); margin:0 0 16px;
  line-height:1.55;
}

/* =========================
   Sculpted Buttons
   ========================= */
.btn{
  display:inline-block;
  padding:12px 20px;
  font-size:.96rem; font-weight:900;
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--accent), white 8%);
  color:var(--accent);
  background:linear-gradient(145deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.2);
  transition: background .3s ease, color .3s ease, transform .2s ease, box-shadow .3s ease, border-color .3s ease;
  position:relative; overflow:hidden;
}
.btn::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
  transform:translateX(-100%); transition:transform .6s ease;
}
.btn:hover{
  background:linear-gradient(145deg, var(--accent), color-mix(in oklab, var(--accent), black 15%));
  color:#fafafa;
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(0,0,0,.5), 0 0 28px color-mix(in oklab, var(--accent), white 8%);
  transform: translateY(-2px) scale(1.02);
}
.btn:hover::before{ transform:translateX(100%) }

/* =========================
   Forms (if present) - Velvet Inputs
   ========================= */
input, textarea, select{
  width:100%;
  background:var(--panel-2);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 16px;
  font-size:.98rem;
  outline:none;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease, transform .15s ease;
}
input::placeholder, textarea::placeholder{ color:#a8b2ba }
input:focus, textarea:focus, select:focus{
  border-color: color-mix(in oklab, var(--accent), white 20%);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--accent), transparent 80%), 0 2px 8px rgba(0,0,0,.2);
  background:var(--panel); transform:translateY(-1px);
}

/* =========================
   Accessibility & focus
   ========================= */
:focus-visible{
  outline:2px solid color-mix(in oklab, var(--accent), white 15%);
  outline-offset:2px;
  border-radius:12px;
}

/* =========================
   Small screens
   ========================= */
@media (max-width:480px){
  html{font-size:14px}
  .container{margin-top:92px}
  .card img{height:220px}
  .grid{gap:20px}
}

/* =========================
   Motion preferences
   ========================= */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important}
}