/* Artworldonline theme main stylesheet */
:root{
  --bg: #0b0d10;
  --bg2: #101217;
  --text: #e8eef2;
  --muted: #8b9aa7;
  --acc: #3df6a0;
  --acc2: #66d9ff;
  --card: #12151b;
  --border: #1f2530;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;line-height:1.6}
a{color:var(--acc2);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block;border-radius:8px}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;width:auto;height:auto;padding:8px;background:#000;color:#fff}

.site-header{position:sticky;top:0;background:rgba(11,13,16,0.85);backdrop-filter:saturate(120%) blur(8px);border-bottom:1px solid var(--border);z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.branding .site-title{font-weight:800;font-size:1.2rem;letter-spacing:0.05em;display:inline-block}
.branding .tagline{margin:2px 0 0;color:var(--muted);font-size:0.85rem}
.site-nav{display:flex;gap:16px;align-items:center}
.site-nav .menu{display:flex;gap:14px;flex-wrap:wrap}
.site-nav .cta{padding:8px 12px;border:1px solid var(--acc2);border-radius:6px;transition:transform .08s ease;background:transparent}
.site-nav .cta:hover{transform:translateY(-1px);text-decoration:none}

.glitch { position: relative; display:inline-block; }
.glitch::before, .glitch::after{
  content: attr(data-text);
  position: absolute; left:0; top:0; width:100%; overflow:hidden;
  clip-path: inset(0 0 0 0);
}
.glitch::before{ left: 1px; text-shadow: -1px 0 var(--acc); animation:glitch 2.5s infinite linear alternate-reverse; }
.glitch::after { left: -1px; text-shadow: 1px 0 var(--acc2); animation:glitch 3.5s infinite linear alternate; opacity:.8; }
@keyframes glitch{
  0%{ clip-path: inset(0 0 90% 0); }
  10%{ clip-path: inset(0 0 30% 0); }
  20%{ clip-path: inset(0 0 40% 0); }
  30%{ clip-path: inset(0 0 10% 0); }
  40%{ clip-path: inset(0 0 60% 0); }
  50%{ clip-path: inset(0 0 20% 0); }
  60%{ clip-path: inset(0 0 70% 0); }
  70%{ clip-path: inset(0 0 35% 0); }
  80%{ clip-path: inset(0 0 50% 0); }
  90%{ clip-path: inset(0 0 15% 0); }
  100%{ clip-path: inset(0 0 0% 0); }
}

.site-content{padding:28px 0 60px}
.site-footer{border-top:1px solid var(--border);background:var(--bg2);padding:20px 0;color:var(--muted);font-size:0.95rem}
.footer-inner{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.footer-links a{color:var(--muted);margin-left:12px}

.archive-header{margin:8px 0 20px}
.archive-header h1{margin:0 0 6px}
.muted{color:var(--muted)}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width: 960px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 640px){ .grid{grid-template-columns:1fr} }

.card{background:var(--card);border:1px solid var(--border);padding:12px;border-radius:10px;transition:transform .08s ease, border-color .18s ease}
.card:hover{transform:translateY(-2px);border-color:var(--acc2)}
.card-title{font-size:1.05rem;margin:8px 0 0}
.card-meta{color:var(--muted);font-size:0.9rem;margin-top:6px}
.card-excerpt{color:var(--muted);font-size:0.95rem}

.single-header{margin-bottom:14px}
.single-title{font-size:2rem;margin:0 0 6px}
.single-media{margin:12px 0 16px}
.single-content p{margin:0 0 1em}
.work-meta{border-top:1px dashed var(--border);padding-top:10px;color:var(--muted)}

.filters{display:flex;gap:20px;flex-wrap:wrap;margin:12px 0}
.filters a{margin-left:8px}

.notice{border:1px solid var(--border);padding:12px;border-radius:8px;margin:12px 0;background:#0d1218}
.notice.success{border-color:#1f9d6c}
.notice.error{border-color:#b45858}

.awo-form .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width: 720px){ .awo-form .grid-2{grid-template-columns:1fr} }
.awo-form input[type=text], .awo-form input[type=email], .awo-form input[type=number], .awo-form input[type=url], .awo-form textarea{
  width:100%;padding:10px;border-radius:8px;border:1px solid var(--border);background:var(--bg2);color:var(--text)
}
.awo-form .button, .button{
  display:inline-block;background:transparent;border:1px solid var(--acc);padding:10px 14px;border-radius:8px;
}
.hp{display:none !important}
.tos{color:var(--muted)}