/* =========================
   Auri Fell — site.css (clean, unified)
   ========================= */

/* ---------------- TOKENS ---------------- */
:root{
  --bg:#0b0920;           /* deep indigo-black */
  --bg-2:#120d33;         /* darker violet */
  --panel:#1a143f;        /* panel violet */
  --muted:#b6b1d6;        /* muted lilac text */
  --text:#f2eaff;         /* near-white with lilac tint */

  --accent:#c44bff;       /* magenta-violet */
  --accent-2:#5c6bff;     /* indigo */

  --red:#d33b53;
  --green:#26c27a;
  --blue:#5aa3ff;
  --yellow:#ffd36a;

  --outline:3px;
  --radius:18px;
  --shadow:0 10px 35px rgba(14,9,50,.6);
  --border:rgba(255,255,255,.08);
  --maxw:1100px;
  --gutter:20px;

  --inner-pad-x:24px;     /* content-well inner pad */
  --inner-pad-y:16px;

  --footer-h:64px;        /* visible height reserved for floating footer */
}

/* ---------------- BASE ---------------- */
html,body{height:100%}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}           /* kill sideways scroll */

body{
  margin:0; color:var(--text); background:var(--bg);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,'Noto Sans','Apple Color Emoji','Segoe UI Emoji';
  line-height:1.45; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Base gradient layer (deepest) */
body::before{
  content:""; position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(120vmax 70vmax at 10% -10%, var(--accent-2) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  background-repeat:no-repeat;
}

/* Aurora / stars (bright by default) */
.theme-aurora::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    /* bigger spark stars */
    radial-gradient(3px 3px at 8% 22%,  rgba(255,255,255,.22) 0 50%, transparent 51%),
    radial-gradient(3px 3px at 28% 38%, rgba(255,255,255,.18) 0 50%, transparent 51%),
    radial-gradient(3px 3px at 70% 18%, rgba(255,255,255,.20) 0 50%, transparent 51%),
    radial-gradient(3px 3px at 82% 72%, rgba(255,255,255,.16) 0 50%, transparent 51%),
    radial-gradient(2px 2px at 18% 78%, rgba(255,255,255,.20) 0 50%, transparent 51%),
    radial-gradient(2px 2px at 54% 64%, rgba(255,255,255,.18) 0 50%, transparent 51%),

    /* blue-forward blobs + magenta support */
    radial-gradient(90vmax 60vmax at 85% 8%,  rgba(90,160,255,.70),  transparent 60%),
    radial-gradient(75vmax 50vmax at 10% -6%, rgba(196,75,255,.62), transparent 62%),
    radial-gradient(100vmax 90vmax at 30% 110%, rgba(80,30,150,.58), transparent 62%),

    linear-gradient(180deg, var(--bg-2), var(--bg));
  filter:saturate(120%) brightness(1.22);
}

/* micro-stars + bokeh tint + gentle drift */
.theme-aurora::after{
  content:""; position:fixed; inset:-10% -10% -10% -10%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.22) 1px, transparent 1.2px),
    radial-gradient(1px 1px at 60px 80px, rgba(255,255,255,.16) 1px, transparent 1.2px),
    radial-gradient(1px 1px at 100px 140px, rgba(255,255,255,.12) 1px, transparent 1.2px),
    radial-gradient(18vmax 12vmax at 10% 8%, rgba(88,146,255,.20), transparent 60%),
    radial-gradient(14vmax 10vmax at 35% 28%, rgba(120,170,255,.16), transparent 62%),
    radial-gradient(12vmax 9vmax  at 65% 18%, rgba(120,170,255,.14), transparent 62%),
    radial-gradient(20vmax 14vmax at 80% 40%, rgba(96,120,255,.18), transparent 65%);
  background-size:220px 220px, 180px 180px, 140px 140px, auto, auto, auto, auto;
  background-repeat:repeat, repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  animation:star-drift 40s linear infinite, twinkle 6s steps(2,end) infinite alternate;
  opacity:.95;
}
@keyframes star-drift{ to{ transform: translate3d(-40px,-30px,0) } }
@keyframes twinkle{ 0%{filter:brightness(.92)} 100%{filter:brightness(1.18)} }
@media (prefers-reduced-motion:reduce){ .theme-aurora::after{ animation:none } }

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}
.visually-hidden{position:absolute!important; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); width:1px; height:1px; overflow:hidden; white-space:nowrap}

a{color:inherit; text-decoration:none}
a:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
img{display:block; max-width:100%; height:auto}

/* ---------------- HEADER ---------------- */
header{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:saturate(120%) blur(8px); -webkit-backdrop-filter:saturate(120%) blur(8px);
  background:linear-gradient(180deg, rgba(8,7,22,.95), rgba(10,9,28,.75));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px var(--gutter); width:100%; max-width:var(--maxw)}
.brand{display:flex; align-items:center; gap:14px; min-width:0}
.brand .logo,.brand img{width:48px; height:48px; flex:0 0 auto; border-radius:10px; box-shadow:0 6px 20px rgba(14,9,50,.55); object-fit:contain; user-select:none; -webkit-user-drag:none}
.brand .title{font-weight:900; letter-spacing:.4px; font-size:30px; margin:0; background:linear-gradient(90deg, #fff, var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent}

/* Desktop nav */
nav{display:flex; align-items:center; gap:18px}
#site-nav .nav-link{
  padding:0 10px; border:0; background:transparent; box-shadow:none;
  color:#e8ddff; font-weight:900; font-size:18px; letter-spacing:.3px;
  text-shadow:0 1px 16px rgba(140,80,255,.25);
}
#site-nav .nav-link:hover{color:#fff; text-shadow:0 2px 22px rgba(180,120,255,.45)}
#site-nav .nav-link.active{
  color:#f3e7ff; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px;
}

/* Header hamburger (dots ⇄ lines) */
.hamburger{
  display:none; width:40px; height:40px;
  background:none; border:0; padding:8px; border-radius:10px; cursor:pointer; color:var(--text);
  transition:opacity .2s ease;
}
.hamburger:focus-visible{outline:2px solid var(--accent-2); outline-offset:3px}

/* If you use an inline SVG with <g class="dots/lines"> */
.hamburger svg .lines{opacity:0; transform:scaleX(.8); transform-origin:center; transition:opacity .22s ease, transform .22s ease}
.hamburger svg .dots{opacity:1; transform:scale(1); transform-origin:center; transition:opacity .22s ease, transform .22s ease}
.hamburger.is-open svg .lines{opacity:1; transform:scaleX(1)}
.hamburger.is-open svg .dots{opacity:0; transform:scale(.6)}

@media (max-width:700px){
  nav{display:none}
  .hamburger{display:inline-flex; align-items:center; justify-content:center}
}

/* ---------------- MOBILE DRAWER ---------------- */
.menu-card{
  position:fixed; top:0; right:0; 
  height:auto; width:min(86vw,320px);
  z-index:10010; overflow:hidden; /* above the backdrop */
  border-left:1px solid var(--border); border-radius:18px 0 0 18px;
  transform:translateX(102%); opacity:0; pointer-events:none;
  transition:transform .40s cubic-bezier(.22,.9,.31,1), opacity .18s ease-out, box-shadow .25s ease;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.menu-card::before{
  content:""; position:absolute; inset:-10% -20% -10% -20%; z-index:-1;
  background:
    radial-gradient(3px 3px at 16% 22%, rgba(255,255,255,.22) 0 50%, transparent 51%),
    radial-gradient(3px 3px at 72% 12%, rgba(255,255,255,.18) 0 50%, transparent 51%),
    radial-gradient(3px 3px at 40% 64%, rgba(255,255,255,.16) 0 50%, transparent 51%),
    radial-gradient(3px 3px at 88% 78%, rgba(255,255,255,.14) 0 50%, transparent 51%),
    radial-gradient(140% 90%  at 15% 10%, rgba(92,107,255,.55), transparent 60%),
    radial-gradient(140% 100% at 80% 25%, rgba(196,75,255,.45), transparent 62%),
    radial-gradient(120% 90%  at 50% 85%, rgba(127,83,255,.40), transparent 60%),
    linear-gradient(180deg, rgba(26,20,63,.98), rgba(18,13,51,.98));
  filter:saturate(1.15) brightness(1.05);
}
.menu-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 110% at 50% 50%, transparent 60%, rgba(0,0,0,.25) 100%);
}
.menu-card.open{transform:translateX(0); opacity:1; pointer-events:auto; box-shadow:0 28px 80px rgba(0,0,0,.55)}

.menu-card .hamburger.inside{
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  z-index:1; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px; border:1px solid var(--border);
  color:var(--text); background:rgba(255,255,255,.06); backdrop-filter:blur(6px);
}

.menu-list{display:flex; flex-direction:column; gap:10px; padding:60px 18px 18px}
.menu-list a{
  padding:6px 2px; border-radius:8px; background:transparent; border:0;
  font-weight:900; letter-spacing:.3px; color:var(--text); font-size:20px;
  text-shadow:0 1px 16px rgba(140,80,255,.25);
}
.menu-list a:hover{color:#fff; text-shadow:0 2px 22px rgba(180,120,255,.45)}
.menu-list a.active,
.menu-list a[aria-current="page"]{
  color:#f3e7ff;
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-thickness:2px;
}
.menu-list a:active{transform:translateY(1px)}

@media (prefers-reduced-motion:reduce){
  .menu-card,.hamburger,.menu-card .hamburger.inside{transition:none!important}
}

/* Backdrop that darkens & blurs the page (not the drawer) */
.backdrop{
  position:fixed; inset:0; z-index:10000;
  pointer-events:none; opacity:0; visibility:hidden;
  background:rgba(0,0,0,0);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  backdrop-filter: blur(0px) saturate(100%);
  will-change: opacity, backdrop-filter;
  transition:opacity .24s ease, backdrop-filter .24s ease, background .24s ease, visibility .24s;
}
.backdrop.show{
  opacity:1; visibility:visible; pointer-events:auto;
  background:rgba(0,0,0,.36);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
}

/* ---------------- HERO ---------------- */
.hero{padding:0}
.hero .top{display:grid; grid-template-columns:1fr; align-items:center; gap:24px; justify-items:center}
.hero .wordmark{max-width:900px; width:min(86vw,900px); filter:drop-shadow(0 22px 40px rgba(0,0,0,.6)) drop-shadow(0 2px 16px rgba(150,70,255,.25))}
.hero .sub{margin-top:6px; color:#cbb3ff; font-weight:700; letter-spacing:.2px}
.hero::after{content:none}

/* ---------------- CARDS / GRID ---------------- */
.grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px}
.card{
  background:linear-gradient(180deg, rgba(196,75,255,.12), rgba(26,20,63,.9));
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:16px; border:1px solid var(--border)
}
.card h3{margin:0 0 10px; font-size:16px; font-weight:800}
.card p{margin:0 0 12px; color:var(--muted)}
.card .mini-btn{display:inline-block; padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.16); background:linear-gradient(180deg, #5aa3ff, #4877ed); font-weight:700}
@media (max-width:900px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}

/* ---------------- SOCIALS ---------------- */
.socials{
  display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap; margin:0;
}
.socials a{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:12px; border:1px solid var(--border);
  background:rgba(26,20,63,.55); box-shadow:var(--shadow)
}
.socials a:hover{background:rgba(26,20,63,.85)}
.socials svg{ width:30px; height:30px }

/* ---------------- TESTIMONIALS ---------------- */
:root {--t-card-h:260px}
.testimonials { 
  position: relative; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  padding:0px 0; 
}
.testimonial-card { 
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: var(--t-card-h); 
  height: auto;
  padding: 0 100px;
}

.t-content { transition: opacity .28s ease; }
.t-content.is-fading { opacity: 0; }
.testimonial-card .quote { font-size: 19px; line-height: 1.55; margin: 0 0 14px; font-style: italic; }
.testimonial-card .author { font-size: 15px; font-weight: 600; color: var(--muted); margin: 0; }

/* Mobile tweaks */
@media (max-width: 700px) {
  .testimonial-card {
    padding: 12px 70px 20px;    /* reduce side padding so text has room */
    min-height: 0;              /* no enforced min-height on mobile */
    height: auto;               /* grow naturally with text */
  }

  .testimonial-card .quote {
    font-size: 17px;            /* a touch smaller for better fit */
  }

  /* keep arrows usable but not in the way */
  .testimonials .arrow {
    width: 38px;
    height: 38px;
  }
}

/* arrows */
.testimonials .arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.08);
  color: var(--text); font-size: 18px; font-weight: 700;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(6px); cursor: pointer;
  transition: background .25s ease, transform .2s ease;
}
.testimonials .arrow.left  { left: 0; }
.testimonials .arrow.right { right: 0; }
.testimonials .arrow:hover { background: rgba(255,255,255,.10); transform: translateY(-50%) scale(1.05); }
.testimonials .arrow:active { transform: translateY(-50%) scale(0.95); }
@media (max-width:700px){ .testimonials .arrow.left{left:8px} .testimonials .arrow.right{right:8px} }

/* ---------------- CONTENT WELL ---------------- */
.page-veil{
  position:fixed; top:0; bottom:0; left:var(--gutter); right:var(--gutter);
  max-width:calc(var(--maxw) + 2*var(--inner-pad-x));
  margin:0 auto; border-radius:28px; pointer-events:none; z-index:900;
  box-shadow:0 0 70px 48px rgba(0,0,0,.32), 0 0 140px 96px rgba(0,0,0,.22);
}
main.wrap{
  position:relative; z-index:10;
  padding-left:calc(var(--gutter) + var(--inner-pad-x));
  padding-right:calc(var(--gutter) + var(--inner-pad-x));
  padding-top:var(--inner-pad-y);
  padding-bottom:calc(var(--footer-h) + 24px);
  clip-path:inset(0 0 calc(var(--footer-h) + 24px) 0 round 28px);
}
@media (max-width:520px){ :root{--inner-pad-x:16px; --inner-pad-y:12px} }

/* ---------------- ABOUT (portrait layout) ---------------- */
@media (max-width:820px){
  section[aria-label="About Auri"] > article.card{ grid-template-columns:1fr !important; gap:14px; }
  section[aria-label="About Auri"] > article.card figure{ justify-self:center }
  section[aria-label="About Auri"] > article.card figure img{ max-width:300px }
}
section[aria-label="About Auri"] figure img {
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(196, 75, 255, 0.35), 0 0 40px rgba(90, 107, 255, 0.25);
  backdrop-filter: saturate(120%) blur(2px);
}

/* ---------------- CONTACT FORM DROPDOWN ---------------- */
.contact select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  padding: 12px 40px 12px 16px;
  font-size: 16px;
  color: var(--text);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(26,20,63,.55);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease;
}

.contact select:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255,255,255,.1);
}

/* little dropdown arrow */
.contact select::after {
  content: "▾";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  font-size: 16px;
}

/* Dropdown options */
.contact select option {
  background: var(--panel);
  color: var(--text);
  padding: 8px 12px;
}

/* ---------------- FOOTER (static) ---------------- */
footer{ text-align:center; color:var(--muted); font-size:14px; padding:40px 0 24px; background:transparent; }
footer a{color:var(--blue)} footer a:hover{text-decoration:underline}
.footer-divider{content:none}

/* ---------------- SOFT / INVISIBLE DIVIDERS ---------------- */
.soft-div {
  height: 1px; max-width: 720px; margin: 24px auto;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  opacity: 0.6;
}
.soft-div.tight { margin: 10px auto; }
.soft-div.loose { margin: 40px auto; }

.i-div { height:1px; max-width:720px; margin:24px auto; background:transparent; opacity:0; }
.i-div.tight{margin:10px auto;} .i-div.loose{margin:40px auto;}

/* ---------------- FOOTER (floating bar) ---------------- */
footer.floating{
  position:fixed; left:0; right:0; bottom:max(0px, env(safe-area-inset-bottom));
  z-index:1500; text-align:center; background:rgba(10,9,28,.7);
  backdrop-filter:blur(12px) saturate(120%); border-top:1px solid rgba(255,255,255,.08);
  box-shadow:0 -4px 30px rgba(0,0,0,.4); padding:14px 0; pointer-events:auto;
}
footer.floating .credits{ margin:0; color:var(--muted); font-size:14px; font-weight:500; }
footer.floating .credits a{ color:var(--blue) } footer.floating .credits a:hover{ text-decoration:underline }

/* ---------------- SCROLLBAR ---------------- */
::-webkit-scrollbar{ width:8px; background:transparent }
::-webkit-scrollbar-track{ background:transparent }
::-webkit-scrollbar-thumb{
  background:rgba(141, 80, 255, 0);
  border-radius:999px; border:2px solid transparent; background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{ background:rgba(195, 75, 255, 0) }
*{ scrollbar-width:thin; scrollbar-color: rgba(255, 255, 255, 0.423) transparent }

/* ---------------- BLOG PAGE ---------------- */
.create-btn.hidden{ display:none !important; }

.blog-header { 
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  justify-content:center;
  text-align:left; 
}
.blog-info { display:flex; align-items:center; gap:28px; margin-bottom:20px; }
.blog-headshot { width:150px; height:150px; border-radius:50%; object-fit:cover; box-shadow:var(--shadow); border:2px solid rgba(255,255,255,.1); }
.blog-buttons { display:flex; flex-direction:column; gap:10px; }

.create-btn{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border: none; 
  border-radius: 12px; 
  color: #fff; 
  font-weight: 800; 
  font-size: 18px;
  padding: 10px 24px; 
  cursor: pointer; 
  box-shadow: var(--shadow);
  transition: transform .2s ease, background .3s ease;
}
.create-btn:hover{ transform: translateY(-2px); opacity:.9 }

.follow-btn{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border: none; 
  color: #fff; 
  font-weight:800; 
  padding:10px 24px; 
  border-radius:12px;
  cursor:pointer; 
  box-shadow:var(--shadow); 
  font-size:18px;
  transition: transform .2s ease, background .3s ease;
}
.follow-btn:hover{ transform: translateY(-2px); opacity:.9 }

/* Blog posts */
.blog-posts { 
  display:flex; 
  flex-direction:column; 
  gap:40px; 
  margin-bottom:40px; 
  width: 100%;
  max-width:none;
}
.blog-post {
  display: flow-root; --post-img-size: 180px;
  padding: 24px; 
  position: relative;
  background: linear-gradient(180deg, rgba(196,75,255,.1), rgba(26,20,63,.8));
  border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.blog-post.left .post-image { float:left; margin: 0 20px 12px 0; }
.blog-post.right .post-image{ float:right; margin: 0 0 12px 20px; }

.post-image {
  width: var(--post-img-size); height: var(--post-img-size);
  object-fit: cover; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); flex-shrink: 0; z-index: 2;
}
.post-content { overflow: visible; }
.blog-post::after{ content:""; display:table; clear:both }

@media (max-width:700px){
  .blog-post { padding:18px; --post-img-size: 120px; }
  .post-image{ float:none; display:block; margin:0 auto 12px; }
}
.post-content p { margin: 0 0 12px; color: var(--muted); line-height: 1.6; }
.post-date { 
  font-size: 14px; 
  color: var(--muted); 
  margin-bottom: 6px; }
.post-title { font-size: 22px; font-weight: 800; margin: 0 0 10px; color: var(--text); }

/* Show more/less buttons */
.blog-controls{ display:flex; justify-content:center; gap:16px; margin-bottom:60px; }
.blog-controls button{
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  border: none; border-radius: 12px; color: #fff; font-weight: 700; padding: 10px 20px; cursor: pointer; transition: transform .2s ease;
}
.blog-controls button:hover{ transform: translateY(-2px); }

/* ---------------- FOLLOW DRAWER THEME ---------------- */
#followCard{
  right:0; left:auto; width:auto;
  border-left:1px solid rgba(255,255,255,.266);
  background:linear-gradient(180deg, rgba(26,20,63,.96), rgba(14,9,40,.96));
  box-shadow:-12px 0 35px rgba(0,0,0,.45);
  backdrop-filter:blur(16px);
}
.follow-head{
  display:flex; align-items:center; justify-content:center;
  padding:18px 24px; 
  margin:0;
  background:linear-gradient(180deg, rgba(8,7,22,.95), rgba(10,9,28,.85));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.follow-title{ margin:0; padding:7px; font-size:20px; font-weight:900; letter-spacing:.25px; color:var(--text); }

.follow-body{ padding:28px 24px 32px; }
.follow-form{ display:grid; gap:20px; }
.follow-field{ display:grid; gap:8px; }
.follow-label{ font-weight:800; opacity:.9; }
.follow-input{
  width:auto;
  padding:14px 18px;
  font-size:16px; color:var(--text);
  border-radius:14px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  transition:border-color .2s ease, background .2s ease;
}
.follow-input::placeholder{ color:rgba(255,255,255,.6); }
.follow-input:focus{ outline:none; border-color:var(--accent); background:rgba(255,255,255,.12); }

.follow-actions{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.follow-btn{
  flex:1; min-width:90px; padding:12px 0; border-radius:12px;
  font-weight:800; font-size:18px; text-align:center; cursor:pointer;
  border:1px solid rgba(255,255,255,.14);
  transition:transform .2s ease, opacity .2s ease, background .3s ease;
}
.follow-btn:hover{ transform:translateY(-1px); opacity:.95; }
.follow-btn:active{ transform:translateY(0); }

.follow-btn-primary{ color:#fff; border-color:rgba(255,255,255,.16); background:linear-gradient(90deg, var(--accent), var(--accent-2)); }
.follow-btn-secondary{ color:#fff; border-color:rgba(255,255,255,.18); background:linear-gradient(180deg, #5aa3ff, #4877ed); }
.follow-btn-tertiary{ color:var(--text); background:rgba(255,255,255,.06); }

.follow-status{
  min-height:20px; font-size:14px; opacity:0;
  transition:opacity .3s ease, background .3s ease, box-shadow .3s ease;
  padding:8px 12px; border-radius:10px; display:inline-block;
}
.follow-status.is-visible{ opacity:1; }
.follow-status.status--success{ color:var(--green); background:rgba(38,194,122,.15); box-shadow:0 0 12px rgba(38,194,122,.25); border:1px solid rgba(38,194,122,.3); }
.follow-status.status--error{ color:var(--red); background:rgba(211,59,83,.15); box-shadow:0 0 12px rgba(211,59,83,.25); border:1px solid rgba(211,59,83,.3); }

/* CREATE DRAWER (inherits .menu-card + follow styles) */
#createCard{
  right:0; left:auto; width:auto;
  border-left:1px solid rgba(255,255,255,.266);
  background:linear-gradient(180deg, rgba(26,20,63,.96), rgba(14,9,40,.96));
  box-shadow:-12px 0 35px rgba(0,0,0,.45);
  backdrop-filter:blur(16px);
  padding:0;                     /* no padding on the shell */
  display:flex;
  flex-direction: column;
}

/* top bar (keep full width) — support either class name */
#createCard .drawer-header,
#createCard .follow-head{
  padding:16px 20px;
  border-bottom:1px solid rgba(255,255,255,.12);
}

/* Smooth, contained scrolling for the drawer body */
#createCard .drawer-body{
  padding:20px 24px 24px;
  overflow-y:auto;
  flex:1;
  -webkit-overflow-scrolling: touch;   /* iOS momentum */
  overscroll-behavior: contain;        /* no bounce bleed */
  scrollbar-gutter: stable both-edges; /* keeps layout steady */
  scrollbar-width: thin;               /* Firefox */
}

/* Optional: pretty scrollbar (WebKit) */
#createCard .drawer-body::-webkit-scrollbar{
  width:10px;
}
#createCard .drawer-body::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
}
#createCard .drawer-body::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.18);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
#createCard .drawer-body::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,0.28);
}

/* Disable manual resize on textareas inside the Create drawer */
#createCard textarea{
  resize: none;              /* hide the bottom-right handle */
  overflow: auto;            /* still scroll inside the field if long */
}

/* Small helpers */
.create-row{ display:flex; gap:10px; flex-wrap:wrap }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  font-weight:700;
  /* width:100%;  <-- remove full-width so chips sit inline */
}
.create-preview{ margin-top:8px; display:flex; gap:10px; flex-wrap:wrap }
.create-preview img{
  width:90px; height:90px; object-fit:cover;
  border-radius:10px; border:1px solid rgba(255,255,255,.12)
}

/* --- Minimal image-only gallery (4-column grid) --- */
.create-gallery-list{
  display:grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns */
  gap:10px;
  margin-top:8px;
  justify-items:start;
}

.thumb-wrap{
  position:relative;
  width:80px;
  height:80px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
}

.thumb-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
}

/* buttons in corners */
.thumb-remove,
.thumb-edit{
  position:absolute;
  top:6px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
  font-size:12px;
  line-height:1;
  width:22px;
  height:22px;
  border-radius:6px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;                          /* hidden until hover/touch */
  transition:opacity .15s ease, background .15s ease;
}
.thumb-remove{ right:6px; }
.thumb-edit{ left:6px; }

.thumb-wrap:hover .thumb-remove,
.thumb-wrap:hover .thumb-edit,
.thumb-wrap:active .thumb-remove,
.thumb-wrap:active .thumb-edit{
  opacity:1;
}

.thumb-remove:hover,
.thumb-edit:hover{ background:rgba(196,75,255,.75); }

/* touch: always show buttons */
@media (pointer:coarse){
  .thumb-remove, .thumb-edit{ opacity:1; }
}

/* responsive columns */
@media (max-width: 520px){
  .create-gallery-list{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 360px){
  .create-gallery-list{ grid-template-columns: repeat(2, 1fr); }
}

/* ----- In-drawer caption editor overlay ----- */
.cap-editor-overlay{
  position:absolute; inset:0;       /* cover the create drawer */
  background:rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  display:none; align-items:center; justify-content:center;
  z-index:20;                        /* above form contents, below global backdrop */
}
.cap-editor-overlay.is-open{ display:flex; }

.cap-editor{
  width:min(560px, 92%);
  background:linear-gradient(180deg, rgba(28,22,70,.98), rgba(14,10,42,.98));
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
  padding:16px;
}
.cap-title{ margin:0 0 8px; font-size:16px; }
.cap-input{
  width:93%;
  min-height:88px;
  resize:vertical;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:#fff;
}
.cap-actions{
  display:flex; gap:10px; justify-content:flex-end;
  margin-top:12px;
}

/* Make the card contain floats, but let text wrap around the hero */
.blog-post{ display:flow-root; }     /* contain the float */

/* Ensure the inner content DOES NOT create a BFC */
.blog-post .post-content{
  display:block;
  overflow:visible !important;       /* kill any hidden/auto that breaks wrapping */
  contain:none;                      /* just in case */
}

/* Wrap the hero image left/right via the side class on <article> */
.blog-post.left  .post-image{ float:left;  margin:0 20px 12px 0; }
.blog-post.right .post-image{ float:right; margin:0 0 12px 20px; }
.blog-post .post-image{
  width:var(--post-img-size, 180px);
  height:var(--post-img-size, 180px);
  object-fit:cover;
  border-radius:14px;
  display:block;
}

/* Long strings should never blow out of the card */
.blog-post .post-title,
.blog-post .post-content p{
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}

.cap-preview{
  width:100%;
  max-height:220px;
  object-fit:contain;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  margin:6px 0 10px;
}

/* --- BLOG GALLERY PREVIEW (drop-in, non-invasive) --- */
.post-gallery{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}
.post-gallery.hidden{ display:none; } /* if you want to force-hide a gallery */

.post-gallery .thumb{
  position: relative;
  aspect-ratio: 1 / 1;       /* perfect squares */
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  background: rgba(255,255,255,.04);
}
.post-gallery .thumb img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .25s ease, filter .25s ease;
}
.post-gallery .thumb:hover img{ transform: scale(1.04); filter: saturate(110%); }

/* Optional “+N” overlay for last thumb */
.post-gallery .thumb.more::after{
  content: attr(data-more); /* e.g., "+3" */
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(10,9,28,.55);
  backdrop-filter: blur(2px);
  color: #fff; font-weight: 900; font-size: 22px;
  letter-spacing: .4px;
}

/* Mobile: show 2 columns so thumbs stay legible */
@media (max-width:700px){
  .post-gallery{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
}

/* ---------------- GALLERY COLLAGE ---------------- */

/* --- Collage: tight 2×2, no extra interior spacing --- */
.post-gallery.collage{
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 4px;                 /* tweak if you want tighter/looser */
  width: 250px;
  height: 250px;
  margin: 16px auto 0;
  clear: both;

  /* keep your box styling */
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  background: rgba(255,255,255,.04);
  cursor: pointer;
}
/* reset any inherited spacing from older styles */
.post-gallery.collage .thumb{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;      /* important in case prior rules add borders */
  border-radius: 10px;       /* inner corners */
  overflow: hidden;
}

/* images fill their cell exactly */
.post-gallery.collage .thumb img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-gallery.collage:hover .thumb img{ transform:scale(1.02); filter:saturate(108%); }



/* +N overlay full-block, perfectly centered, always on top */
.post-gallery.collage .thumb.more::after,
.post-gallery.collage .more-badge{
  content: attr(data-more);
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 9, 28, .55);
  backdrop-filter: blur(3px);
  color: #fff; font-weight: 900; font-size: 32px; letter-spacing: .5px;
  text-align: center;
  z-index: 3;
  border-radius: 14px;
}


.post-gallery.collage:hover .thumb.more::after,
.post-gallery.collage:hover .more-badge {
  background: rgba(10,9,28,.7);
  font-size: 34px;
}

/* Lightbox modal */
.gallery-modal{ 
  position:fixed; 
  inset:0; 
  z-index:10020; 
  background: rgba(11, 9, 32, 0.7);
  backdrop-filter: blur(10px);
  display:none; 
  align-items: center;
  justify-content: center;
}

.gallery-modal.is-open{ display:block; }
.gallery-modal__overlay{ position:absolute; inset:0; }
.gallery-modal__frame{
  position:absolute; 
  top:8%;
  bottom: 8%;
  left: var(--gutter);
  right: var(--gutter);
  max-width:calc(var(--maxw) + 2*var(--inner-pad-x));
  margin:auto;
  display:grid;
  grid-template-areas:"close close close" "prev img next" "cap cap cap";
  grid-template-columns:60px 1fr 60px;
  grid-template-rows:auto 1fr auto;
  gap:12px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg,rgba(26,20,63,.96),rgba(14,9,40,.96));
  border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.55);
  overflow:hidden;
}
.gallery-modal__close{
  grid-area:close; justify-self:end; margin:10px;
  width:40px; height:40px; border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08); color:#fff;
  font-size:18px; cursor:pointer;
}
.gallery-modal__img {
  max-width: auto;
  max-height: 500px; /* image height scales with screen */
  object-fit: contain;
  margin-top: 0;
  align-self: center;
}
.gallery-modal__caption{ 
  grid-area:cap; 
  text-align:center; 
  color:var(--muted); 
  padding:6px 0 12px; 
  font-weight:700; 
}
.gallery-model__caption.is-visible { opacity:1;}
.gallery-modal__arrow{
  align-self:center; width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.25); color:#fff;
  font-size:26px; cursor:pointer; backdrop-filter:blur(6px);
}
.gallery-modal__arrow.prev{ grid-area:prev; justify-self:center; }
.gallery-modal__arrow.next{ grid-area:next; justify-self:center; }

@media (max-width:700px){
  .gallery-modal__frame{
    inset:6% max(2%,8px) 6% max(2%,8px);
    grid-template-columns:48px 1fr 48px;
  }
  .gallery-modal__arrow{ width:42px; height:42px; font-size:22px; }
}

/* meta row holds counter + blurb (grid-area: cap already in your frame) */
.gallery-modal__meta{
  grid-area: cap;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 8px 12px;
}

.gallery-modal__blurb {
  margin-top: 16px;
  font-size: 18px;
  color: var(--muted);
  text-align: center;
  max-width: 90%;
  line-height: 1.5;
  padding: 8px 14px;
  flex-shrink: 0;
}

.gallery-modal__counter {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 700;
  color: var(--muted);
  opacity: 0.9;
  font-size: 18px;
}

/* Lightbox modal (adjusted layout) */
.gallery-modal__image-wrap {
  grid-area: img;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* image sticks to top */
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* Hide by default (public site). Only show in admin mode */
.post-admin { display: none; }            /* NEW: safety */
.admin .blog-post { position: relative; } /* you already had this */
.admin .post-admin {                      /* NEW: scope visibility to admin */
  display: flex;
  position: absolute;
  top: 8px; right: 8px;
  gap: 6px;
  z-index: 20;                            /* bump a bit so it sits over images */
}

/* Admin post toolbar (hidden on public) */
.post-admin { display: none; }

.admin .blog-post { position: relative; }
.admin .post-admin {
  display: flex;
  position: absolute;
  top: 8px; right: 8px;
  gap: 6px;
  z-index: 20;
}

.post-admin .post-btn {
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.55);
  color: #fff;
  width: 26px; height: 26px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .08s ease-out;
}

.post-admin .post-btn--delete { background: rgba(196,75,255,.6); }
.post-admin .post-btn:hover   { background: rgba(196,75,255,.75); border-color: rgba(255,255,255,.28); }
.post-admin .post-btn:active  { transform: translateY(1px) scale(.98); }

.post-admin .post-btn:focus-visible {
  outline: 2px solid rgba(196,75,255,.9);
  outline-offset: 2px;
}