/*
Theme Name: Amber Cascade
Theme URI: https://example.com/amber-cascade
Author: Cascade Studio
Description: Liquid gold editorial theme. Cascading waterfall masonry, layered amber gradients, glowing droplet motifs, and a warm magazine-grade typographic system pairing Fraunces with Plus Jakarta Sans.
Version: 1.0.0
License: GPLv2 or later
Text Domain: amber-cascade
*/

:root{
  --ac-night:#451a03;
  --ac-amber:#d97706;
  --ac-gold:#fbbf24;
  --ac-cream:#fffbeb;
  --ac-ink:#1c0a01;
  --ac-line:rgba(69,26,3,.14);
  --ac-glow:0 30px 80px -30px rgba(217,119,6,.55);
  --ac-serif:"Fraunces", "Times New Roman", serif;
  --ac-sans:"Plus Jakarta Sans", system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--ac-sans);
  color:var(--ac-ink);
  background:
    radial-gradient(1200px 600px at 90% -10%, rgba(251,191,36,.35), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(217,119,6,.18), transparent 70%),
    var(--ac-cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ac-amber);text-decoration:none;transition:color .25s ease}
a:hover{color:var(--ac-night)}

/* Liquid Gold Header */
.ac-bar{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px);
  background:linear-gradient(180deg, rgba(255,251,235,.9), rgba(255,251,235,.6));
  border-bottom:1px solid var(--ac-line);
}
.ac-bar-inner{
  max-width:1280px;margin:0 auto;padding:18px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.ac-logo{
  font-family:var(--ac-serif);font-weight:600;font-size:28px;
  letter-spacing:-.02em;color:var(--ac-night);
  display:flex;align-items:center;gap:10px;
}
.ac-logo .drop{
  width:14px;height:18px;
  background:linear-gradient(180deg,var(--ac-gold),var(--ac-amber));
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  transform:rotate(-12deg);box-shadow:var(--ac-glow);
}
.ac-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ac-nav a{
  font-weight:600;font-size:14px;color:var(--ac-night);
  padding:10px 14px;border-radius:999px;letter-spacing:.02em;
  position:relative;
}
.ac-nav a:hover{background:rgba(217,119,6,.08)}
.ac-nav .login{
  background:linear-gradient(135deg,var(--ac-night),var(--ac-amber));
  color:var(--ac-cream);box-shadow:var(--ac-glow);
}
.ac-nav .login:hover{transform:translateY(-1px);color:var(--ac-cream)}

/* Hero */
.ac-hero{
  position:relative;max-width:1280px;margin:0 auto;padding:80px 28px 60px;
}
.ac-hero h1{
  font-family:var(--ac-serif);font-weight:300;font-style:italic;
  font-size:clamp(48px,8vw,128px);line-height:.95;letter-spacing:-.04em;
  color:var(--ac-night);margin:0 0 24px;
}
.ac-hero h1 em{
  font-style:normal;font-weight:600;
  background:linear-gradient(180deg,var(--ac-gold),var(--ac-amber) 60%,var(--ac-night));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ac-hero p{
  font-size:20px;max-width:640px;color:rgba(28,10,1,.75);
}
.ac-cta{
  display:inline-flex;align-items:center;gap:12px;margin-top:32px;
  padding:18px 28px;border-radius:999px;
  background:linear-gradient(135deg,var(--ac-amber),var(--ac-gold));
  color:var(--ac-night);font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;font-size:13px;box-shadow:var(--ac-glow);
}
.ac-cta:hover{transform:translateY(-2px);color:var(--ac-night)}
.ac-cta .arr{transition:transform .3s}
.ac-cta:hover .arr{transform:translateX(6px)}

.ac-flow{
  position:absolute;right:-80px;top:60px;width:520px;height:520px;
  background:
    radial-gradient(closest-side at 50% 30%, var(--ac-gold), transparent 70%),
    radial-gradient(closest-side at 30% 70%, var(--ac-amber), transparent 70%);
  filter:blur(40px);opacity:.7;pointer-events:none;
  animation:flow 12s ease-in-out infinite alternate;
}
@keyframes flow{
  0%{transform:translate(0,0) rotate(0deg)}
  100%{transform:translate(-30px,40px) rotate(20deg)}
}

/* Breadcrumbs */
.ac-crumbs{
  max-width:1280px;margin:0 auto;padding:0 28px 12px;
  font-size:13px;color:rgba(28,10,1,.6);letter-spacing:.04em;text-transform:uppercase;
}
.ac-crumbs a{color:var(--ac-amber)}
.ac-crumbs span{margin:0 8px;color:var(--ac-gold)}

/* Cascade grid (waterfall masonry) */
.ac-shell{max-width:1280px;margin:0 auto;padding:40px 28px 80px;display:grid;grid-template-columns:1fr 320px;gap:48px}
@media (max-width:960px){.ac-shell{grid-template-columns:1fr}}
.ac-cascade{column-count:2;column-gap:28px}
@media (max-width:760px){.ac-cascade{column-count:1}}
.ac-card{
  break-inside:avoid;margin:0 0 28px;
  background:rgba(255,255,255,.7);
  border:1px solid var(--ac-line);
  border-radius:24px;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 20px 40px -28px rgba(69,26,3,.25);
  transition:transform .35s ease, box-shadow .35s ease;
}
.ac-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -28px rgba(217,119,6,.35)}
.ac-thumb{
  display:block;aspect-ratio:4/3;
  background:linear-gradient(135deg,var(--ac-gold),var(--ac-amber) 60%,var(--ac-night));
  position:relative;overflow:hidden;
}
.ac-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.ac-card:hover .ac-thumb img{transform:scale(1.06)}
.ac-thumb::after{
  content:"";position:absolute;inset:auto 0 0 0;height:50%;
  background:linear-gradient(180deg,transparent,rgba(69,26,3,.55));
}
.ac-meta{padding:22px 24px 26px}
.ac-date{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ac-amber);
}
.ac-card h2{
  font-family:var(--ac-serif);font-weight:500;font-size:24px;line-height:1.15;
  margin:8px 0 12px;letter-spacing:-.01em;color:var(--ac-night);
}
.ac-card h2 a{color:inherit}
.ac-card h2 a:hover{color:var(--ac-amber)}
.ac-excerpt{font-size:15px;color:rgba(28,10,1,.7)}

/* Sidebar */
.ac-side .widget{
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,251,235,.6));
  border:1px solid var(--ac-line);border-radius:20px;
  padding:24px;margin-bottom:24px;
}
.ac-side h3{
  font-family:var(--ac-serif);font-size:20px;margin:0 0 14px;color:var(--ac-night);
  letter-spacing:-.01em;
}
.ac-side ul{list-style:none;margin:0;padding:0}
.ac-side li{padding:8px 0;border-bottom:1px dashed var(--ac-line);font-size:14px}
.ac-side li:last-child{border-bottom:0}
.ac-side a{color:var(--ac-night)}
.ac-side a:hover{color:var(--ac-amber)}

/* Single article */
.ac-article{
  max-width:760px;margin:0 auto;padding:60px 28px;
}
.ac-article h1{
  font-family:var(--ac-serif);font-weight:400;font-size:clamp(40px,6vw,72px);
  line-height:1.05;letter-spacing:-.03em;color:var(--ac-night);margin:0 0 16px;
}
.ac-article .meta{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ac-amber);margin-bottom:32px}
.ac-article .feat{
  border-radius:24px;overflow:hidden;margin:24px 0 36px;box-shadow:var(--ac-glow);
}
.ac-article .body{font-size:18px;line-height:1.8;color:rgba(28,10,1,.86)}
.ac-article .body > p:first-of-type::first-letter{
  font-family:var(--ac-serif);float:left;font-size:84px;line-height:.85;
  padding:6px 14px 0 0;color:var(--ac-amber);font-weight:600;
}
.ac-article .body h2,.ac-article .body h3{font-family:var(--ac-serif);color:var(--ac-night)}
.ac-article .body blockquote{
  margin:32px 0;padding:24px 28px;border-left:4px solid var(--ac-gold);
  background:rgba(251,191,36,.12);border-radius:0 16px 16px 0;font-style:italic;
}

/* Related */
.ac-related{max-width:1280px;margin:0 auto;padding:40px 28px 80px}
.ac-related h3{font-family:var(--ac-serif);font-size:32px;margin:0 0 24px;color:var(--ac-night)}
.ac-rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:760px){.ac-rel-grid{grid-template-columns:1fr}}

/* Pagination */
.ac-pager{display:flex;justify-content:center;gap:8px;margin:40px 0}
.ac-pager a, .ac-pager span{
  padding:10px 16px;border-radius:999px;border:1px solid var(--ac-line);
  font-weight:600;font-size:14px;color:var(--ac-night);
}
.ac-pager .current{background:var(--ac-night);color:var(--ac-cream);border-color:var(--ac-night)}

/* 404 */
.ac-404{max-width:880px;margin:0 auto;padding:120px 28px;text-align:center}
.ac-404 .big{
  font-family:var(--ac-serif);font-size:clamp(120px,22vw,260px);font-weight:300;font-style:italic;
  line-height:.9;letter-spacing:-.05em;
  background:linear-gradient(180deg,var(--ac-gold),var(--ac-amber),var(--ac-night));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Comments */
.ac-comments{max-width:760px;margin:0 auto;padding:40px 28px 80px}
.ac-comments h3{font-family:var(--ac-serif);font-size:28px;color:var(--ac-night)}
.ac-comments ol{list-style:none;padding:0}
.ac-comments li{padding:18px;border:1px solid var(--ac-line);border-radius:16px;margin-bottom:14px;background:#fff}
.ac-comments textarea,.ac-comments input[type="text"],.ac-comments input[type="email"],.ac-comments input[type="url"]{
  width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--ac-line);
  font-family:var(--ac-sans);background:#fff;
}
.ac-comments .submit input{
  background:var(--ac-night);color:var(--ac-cream);border:0;padding:14px 22px;border-radius:999px;
  font-weight:700;letter-spacing:.04em;cursor:pointer;text-transform:uppercase;font-size:13px;
}

/* Footer */
.ac-foot{
  background:linear-gradient(180deg,#2c0f01,var(--ac-night));
  color:var(--ac-cream);margin-top:60px;
}
.ac-foot-inner{max-width:1280px;margin:0 auto;padding:80px 28px 28px;display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
@media (max-width:880px){.ac-foot-inner{grid-template-columns:repeat(2,1fr)}}
.ac-foot h4{font-family:var(--ac-serif);font-size:18px;color:var(--ac-gold);margin:0 0 14px}
.ac-foot a{color:rgba(255,251,235,.78)}
.ac-foot a:hover{color:var(--ac-gold)}
.ac-foot ul{list-style:none;padding:0;margin:0}
.ac-foot li{padding:6px 0;font-size:14px}
.ac-foot-bottom{
  border-top:1px solid rgba(251,191,36,.18);
  text-align:center;padding:24px 28px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,251,235,.55);
}