/*
 Theme Name: Al Abstraction
 Theme URI: https://alabstraction.com/
 Author: al
 Description: Dream‑scape, soft, abstract blog theme. Client-side WP REST post grid with category filters.
 Version: 1.1.5
 License: GPL-2.0-or-later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: al-abstraction
*/
:root{
  --bg:#0A0B10;
  --card:#ffffff08;
  --border:#ffffff1a;
  --text:#ffffffde;
  --muted:#ffffffa6;
  --dim:#ffffff80;
  --accent:#ffb97a;
  --accent2:#c6a9f0;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji","Segoe UI Emoji";}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 16px}
.header{position:sticky;top:0;z-index:50;background:rgba(10,11,16,.7);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:flex-end;padding:12px 0;position: relative; height: 70px;}
.logo{font-family:ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;font-weight:500;letter-spacing:.02em;font-size:20px;line-height:1}
.logo { height: 60px; position: absolute; left: 50%; margin-left: -50px; }
.logo img { height: 100px; }

.dot{display:inline-block;animation:colorShift 6s ease-in-out infinite alternate}
@keyframes colorShift {
  0%{color:var(--accent);text-shadow:0 0 8px rgba(255,185,122,.5)}
  100%{color:var(--accent2);text-shadow:0 0 8px rgba(198,169,240,.5)}
}
.nav{display:none;gap:24px;font-size:14px}
@media (min-width:768px){.nav{display:flex}}
.section{border-top:1px solid var(--border);padding:64px 0}
.hero h1{font-size:40px;line-height:1.1;margin:0}
@media (min-width:768px){.hero h1{font-size:56px}}
.hero p{color:var(--muted);max-width:720px;margin:16px auto 0}
.badge{display:inline-block;border:1px solid var(--border);background:var(--card);padding:6px 10px;border-radius:12px;font-size:12px;letter-spacing:.02em}
.badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px 0}
.chip{border:1px solid var(--border);background:var(--card);padding:8px 12px;border-radius:12px;font-size:13px;cursor:pointer}
.chip.active{background:#ffffff33;border-color:#ffffff4d}
.grid{display:grid;gap:16px}
@media (min-width:768px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;border:1px solid var(--border);background:var(--card);border-radius:16px;overflow:hidden}
.card-inner{padding:20px}
.card-meta{color:#ffffff99;font-size:12px}
.card-title{font-size:16px;font-weight:600;line-height:1.2;margin:6px 0 0 0}
.card-body{font-size:14px;color:#ffffffcc;margin-top:8px}
.footer{border-top:1px solid var(--border);text-align:center;color:#ffffff99;padding:40px 0;font-size:14px}
.hidden{display:none}
.loading{color:#ffffff99;font-size:13px;margin-top:16px}
/* subtle radial background blobs */
.blobs{position:fixed;inset:0;pointer-events:none;mix-blend:screen;opacity:.6}
.blob{position:absolute;border-radius:9999px;filter:blur(48px)}



.single-article .card-title {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.featured-image { margin: 20px -20px; }
.featured-image span {
    display: block;
    width: 100%;
    height: 600px;
    background-size: cover;
    background-position: center;
}

.post-content {
    line-height: 1.7;
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.post-tags {
    margin-top: 20px;
}

.post-navigation {
    display: flex;
    justify-content: space-between;
    margin: 40px 0;
}