:root {
  --bg: #07070d;
  --bg-2: #0d0d18;
  --surface: #ffffff;
  --surface-soft: #F5F4FA;
  --surface-soft-2: #ECEAF6;
  --ink: #0a0a14;
  --ink-soft: #3F3F55;
  --muted: #6E6E85;
  --line: #E4E2EE;
  --line-strong: #CBC8DA;
  --indigo: #6366F1;
  --indigo-deep: #4F46E5;
  --violet: #A855F7;
  --violet-deep: #7E22CE;
  --gradient: linear-gradient(135deg, #6366F1 0%, #A855F7 100%);
  --gradient-soft: linear-gradient(135deg, rgba(99,102,241,.12) 0%, rgba(168,85,247,.12) 100%);
  --highlight: #FCD34D;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(10,10,20,.06), 0 2px 8px rgba(10,10,20,.04);
  --shadow: 0 8px 24px rgba(10,10,20,.08), 0 2px 6px rgba(10,10,20,.04);
  --shadow-lg: 0 30px 80px rgba(10,10,20,.18);
  --shadow-glow: 0 20px 60px rgba(99,102,241,.35);
  font-size: 16px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font-family: 'Inter', -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background: #FBFBFE;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,svg{display:block;max-width:100%;height:auto}
a{color: var(--indigo-deep); text-decoration: none}
a:hover{text-decoration: underline}
code{font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface-soft); padding: 0 .35em; border-radius: 4px; font-size: .92em}
h1,h2,h3,h4{font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; letter-spacing:-.02em; color: var(--ink)}
strong{font-weight: 700}

.container{max-width: 1240px; margin: 0 auto; padding: 0 28px}
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{position:fixed; top:8px; left:8px; width:auto; height:auto; padding:8px 12px; background:#fff; border:2px solid var(--indigo); z-index:1000; border-radius:6px}

/* ---------- Header ---------- */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner{display: flex; align-items: center; gap: 28px; padding: 14px 28px}
.brand{display:flex; align-items:center; gap:11px; color: var(--ink); font-weight:800; font-size: 18px; font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing:-.015em}
.brand:hover{text-decoration:none}
.brand-mark{display:inline-flex}
.brand-name{letter-spacing:-.015em}
.brand-ai{background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent}
.brand-light{color:#fff}
.primary-nav{display:flex; gap: 26px; margin-left: 12px}
.primary-nav a{color: var(--ink-soft); font-weight: 600; font-size: 14.5px}
.primary-nav a:hover{color: var(--ink); text-decoration:none}
.header-search{margin-left:auto; display:flex; gap:8px}
.header-search input{
  width: 290px; max-width: 36vw;
  padding: 11px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.header-search input:focus{outline:none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(99,102,241,.18)}
.header-search button{
  padding: 11px 20px; border: 0;
  background: var(--ink); color:#fff;
  border-radius: 999px; font-weight: 700; cursor: pointer; font: inherit;
}
.header-search button:hover{background: var(--indigo-deep)}

/* ---------- Hero ---------- */
.hero{
  background: radial-gradient(ellipse 80% 60% at 70% 0%, rgba(168,85,247,.30), transparent 60%),
              radial-gradient(ellipse 60% 50% at 10% 30%, rgba(99,102,241,.25), transparent 60%),
              linear-gradient(180deg, #07070d 0%, #0d0d22 100%);
  color: #F4F4F5;
  padding: 84px 0 56px;
  position: relative; overflow: hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events:none; opacity:.6;
}
.hero-inner{position:relative; z-index:1; text-align:center; max-width: 920px; margin: 0 auto 56px}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap: 8px;
  padding: 7px 14px; border:1px solid rgba(255,255,255,.18);
  border-radius: 999px; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  color: #E0E7FF; margin-bottom: 22px; font-weight: 600;
  background: rgba(99,102,241,.12); backdrop-filter: blur(8px);
}
.hero-eyebrow .dot{width:6px; height:6px; border-radius:50%; background:#A855F7; box-shadow:0 0 12px #A855F7}
.hero h1{
  font-size: clamp(38px, 6vw, 76px);
  line-height: 1.02; letter-spacing: -.035em; margin: 0 0 22px; font-weight: 800;
  font-family: 'Plus Jakarta Sans', sans-serif; color:#fff;
}
.hero h1 .gradient{background: linear-gradient(135deg, #818CF8 0%, #C084FC 60%, #F0ABFC 100%); -webkit-background-clip: text; background-clip:text; color: transparent}
.hero .lede{font-size: clamp(16px, 1.6vw, 19px); color: #C7D2FE; max-width: 720px; margin: 0 auto 32px; line-height: 1.6}
.hero-cta{display:flex; gap: 12px; flex-wrap: wrap; justify-content:center}
.hero-stats{list-style:none; padding: 0; margin: 36px 0 0; display:flex; gap: 48px; flex-wrap: wrap; justify-content:center}
.hero-stats li{display:flex; flex-direction:column; align-items:center}
.hero-stats strong{font-size: 32px; color:#fff; font-weight:800; font-family:'Plus Jakarta Sans',sans-serif}
.hero-stats span{color:#9AA3C7; font-size: 12.5px; text-transform: uppercase; letter-spacing:.12em; margin-top:4px}

/* Hero template grid (preview tiles below hero copy) */
.hero-grid-preview{position:relative; z-index:1; padding: 0 0 80px}
.hero-grid-preview .tpl-grid{grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))}
.hero-grid-preview .tpl-card{background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); color:#fff; backdrop-filter: blur(6px)}
.hero-grid-preview .tpl-card:hover{background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.20); transform:translateY(-3px)}
.hero-grid-preview .tpl-name{color:#fff}
.hero-grid-preview .tpl-tag{background: rgba(255,255,255,.08); color:#E0E7FF; border:1px solid rgba(255,255,255,.10)}
.hero-grid-preview .tpl-tag-use{background: rgba(99,102,241,.25); color:#C7D2FE; border-color: rgba(99,102,241,.40)}
.hero-grid-preview .tpl-tag-style{background: rgba(168,85,247,.25); color:#E9D5FF; border-color: rgba(168,85,247,.40)}
.hero-grid-preview .tpl-row-bottom{color:#9AA3C7}

.hero-quick-cats{position:relative; z-index:1; max-width:1100px; margin:0 auto 48px; padding: 0 28px; display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.hero-quick-cats a{padding:9px 16px; border:1px solid rgba(255,255,255,.16); border-radius:999px; color:#E0E7FF; font-size:13.5px; font-weight:600; background: rgba(255,255,255,.04); transition: all .15s}
.hero-quick-cats a:hover{background: rgba(99,102,241,.20); border-color: rgba(168,85,247,.40); text-decoration:none; color:#fff}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; padding: 13px 24px; border-radius: 999px; font-weight:700; font-size: 15px; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; font-family:'Plus Jakarta Sans', sans-serif; letter-spacing:-.005em}
.btn:hover{text-decoration:none; transform: translateY(-1px)}
.btn-primary{background: var(--gradient); color: #fff; box-shadow: 0 10px 30px rgba(99,102,241,.35)}
.btn-primary:hover{box-shadow: 0 14px 40px rgba(168,85,247,.45)}
.btn-secondary{background:#fff; color: var(--ink); border:1px solid var(--line)}
.btn-secondary:hover{border-color: var(--indigo)}
.btn-ghost{border: 1px solid rgba(255,255,255,.30); color:#fff; background: rgba(255,255,255,.04)}
.btn-ghost:hover{background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.50)}

/* ---------- Bands ---------- */
.band{padding: 88px 0}
.band-soft{background: var(--surface-soft)}
.band-tight{padding: 56px 0}
.band-head{display:flex; align-items:end; justify-content:space-between; margin-bottom: 36px; gap: 28px; flex-wrap:wrap}
.band-head h2{font-size: clamp(26px, 3vw, 38px); margin: 0; letter-spacing:-.025em}
.band-head .h-eyebrow{font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:var(--indigo-deep); font-weight:700; margin-bottom:8px; display:block}
.band-head .h-meta{color: var(--muted); font-size: 14px; margin-top:8px}
.more{font-weight:700; color: var(--indigo-deep); font-size: 14.5px}
.more:hover{color: var(--violet-deep)}
.muted{color: var(--muted)}
.small{font-size: 13.5px}

/* ---------- Template grid ---------- */
.tpl-grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px}
.tpl-card{
  background:#fff; border-radius: var(--radius); overflow:hidden; border:1px solid var(--line);
  display:flex; flex-direction:column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  color: var(--ink);
}
.tpl-card:hover{transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-strong); text-decoration:none}
.tpl-thumb{aspect-ratio: 16/9; background: var(--surface-soft); position: relative}
.tpl-thumb svg{width:100%; height:100%}
.tpl-meta{padding: 16px 18px 20px}
.tpl-name{font-size: 15.5px; line-height: 1.35; margin: 0 0 10px; font-weight: 700; letter-spacing:-.01em; font-family:'Plus Jakarta Sans',sans-serif}
.tpl-row{display:flex; gap: 8px; flex-wrap: wrap; align-items: center}
.tpl-row-bottom{margin-top: 12px; justify-content: space-between; color: var(--muted); font-size: 12.5px}
.tpl-tag{font-size: 11.5px; padding: 4px 10px; border-radius: 999px; background: var(--surface-soft); color: var(--ink-soft); font-weight:600}
.tpl-tag-use{background: rgba(99,102,241,.10); color: var(--indigo-deep)}
.tpl-tag-style{background: rgba(168,85,247,.10); color: var(--violet-deep)}

/* ---------- Taxonomy ---------- */
.tax-grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px}
.tax-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 24px;
  display:flex; flex-direction:column; gap:10px; color: var(--ink); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative; overflow: hidden;
}
.tax-card::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background: var(--gradient); opacity:0; transition: opacity .18s}
.tax-card:hover{transform: translateY(-3px); box-shadow: var(--shadow); text-decoration:none; border-color: var(--line-strong)}
.tax-card:hover::before{opacity:1}
.tax-card h3{margin:0; font-size: 19px; letter-spacing:-.015em}
.tax-card p{margin:0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.55}
.tax-count{margin-top:auto; color: var(--indigo-deep); font-weight:700; font-size: 13px; padding-top:8px}

/* ---------- Two col / sidebar layout ---------- */
.two-col{display:grid; grid-template-columns: 1fr 1fr; gap: 64px}
.layout-with-sidebar{display:grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px}
.sidebar{display:flex; flex-direction:column; gap: 18px}
.side-card{background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 22px}
.side-card h4{margin:0 0 14px; font-size: 13px; text-transform: uppercase; letter-spacing:.12em; color: var(--ink-soft); font-family:'Inter',sans-serif; font-weight:700}
.side-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.side-list a{display:flex; justify-content:space-between; align-items:center; gap:8px; color: var(--ink); font-weight:600; font-size: 14px}
.side-list a span{color: var(--muted); font-weight:500; font-size: 12.5px}
.side-list a:hover{text-decoration:none; color: var(--indigo-deep)}
.side-card-recommended{background: var(--gradient-soft); border-color: rgba(99,102,241,.20)}
.side-list-recommended a{font-weight:600; line-height:1.4}
.side-list-recommended a:hover{color: var(--violet-deep)}

/* ---------- Chips & swatches ---------- */
.chip-list{list-style:none; padding:0; margin:14px 0 18px; display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-flex; align-items:center; gap:8px; padding: 8px 14px; border-radius:999px; background:#fff; border:1px solid var(--line); color: var(--ink); font-weight:600; font-size: 13.5px}
.chip:hover{border-color: var(--indigo); text-decoration:none}
.chip span{color: var(--muted); font-weight:500; font-size:12px}
.chip-static{cursor: default; color: var(--ink-soft)}
.swatch-list{list-style:none; padding:0; margin: 14px 0 18px; display:flex; flex-direction:column; gap:10px}
.swatch-link{display:flex; align-items:center; gap:14px; padding: 12px 14px; border-radius: 12px; color: var(--ink); border:1px solid var(--line); background:#fff}
.swatch-link:hover{text-decoration:none; border-color: var(--indigo)}
.swatch-link strong{font-size: 14.5px}
.swatch-link .muted{margin-left:auto; font-size: 12.5px}
.swatch-row{display:inline-flex; gap:5px}
.swatch-row.big{margin-top: 14px}
.sw{display:inline-block; width: 22px; height: 22px; border-radius: 6px; border:1px solid rgba(0,0,0,.06)}
.swatch-row.big .sw{width: 40px; height: 40px; border-radius: 8px}

/* ---------- Posts ---------- */
.post-grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px}
.post-card{background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 26px; display:flex; flex-direction:column; gap:12px; color: var(--ink); transition: transform .18s ease, box-shadow .18s ease}
.post-card:hover{transform: translateY(-3px); box-shadow: var(--shadow); text-decoration:none; border-color: var(--line-strong)}
.post-cat{font-size: 11.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--indigo-deep); font-weight:700}
.post-card h3{margin:0; font-size: 19px; letter-spacing:-.015em; line-height:1.25}
.post-card p{margin:0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.6}
.post-meta{margin-top:auto; color: var(--muted); font-size: 12.5px; padding-top:8px}

/* ---------- Collection cards ---------- */
.collection-grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 22px}
.collection-card{background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 28px; display:flex; flex-direction:column; gap:12px; color: var(--ink); transition: transform .18s ease, box-shadow .18s ease; position:relative; overflow:hidden}
.collection-card::before{content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background: var(--gradient); opacity:.7}
.collection-card:hover{text-decoration:none; transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong)}
.collection-card .col-kicker{font-size:11.5px; text-transform:uppercase; letter-spacing:.14em; color: var(--violet-deep); font-weight:700}
.collection-card h3{margin:0; font-size: 21px; letter-spacing:-.015em; line-height:1.2}
.collection-card p{margin:0; color: var(--ink-soft); font-size: 15px; line-height:1.55}
.collection-card .col-count{color: var(--indigo-deep); font-weight:700; font-size: 13.5px; padding-top:6px}

/* ---------- CTA strip ---------- */
.cta{padding: 80px 0; background: linear-gradient(135deg, #6366F1 0%, #A855F7 60%, #EC4899 100%); color:#fff; position:relative; overflow:hidden}
.cta::before{content:""; position:absolute; inset:0; background: radial-gradient(circle at 30% 50%, rgba(255,255,255,.20), transparent 60%); pointer-events:none}
.cta-inner{text-align:center; max-width:760px; margin:0 auto; position:relative; z-index:1}
.cta h2{font-size: clamp(28px, 3.4vw, 42px); margin: 0 0 14px; letter-spacing:-.025em; color:#fff}
.cta p{margin: 0 0 28px; opacity: .92; font-size: 17px; line-height: 1.55}
.cta .btn-primary{background:#fff; color: var(--ink); box-shadow: 0 10px 40px rgba(0,0,0,.25)}
.cta .btn-primary:hover{background:#fff; color: var(--violet-deep)}
.cta .btn-ghost{color:#fff; border-color: rgba(255,255,255,.50); background: rgba(255,255,255,.05)}

/* ---------- Page head ---------- */
.page-head{padding: 72px 0 36px; background: linear-gradient(180deg, #fff 0%, var(--surface-soft) 100%); position: relative}
.page-head.narrow{padding-bottom: 12px}
.page-head .eyebrow{display:inline-block; padding: 6px 14px; border:1px solid rgba(99,102,241,.30); border-radius:999px; font-size: 11.5px; letter-spacing:.14em; text-transform: uppercase; color: var(--indigo-deep); margin-bottom: 18px; font-weight:700; background: rgba(99,102,241,.08)}
.page-head h1{font-size: clamp(32px, 4.2vw, 52px); margin: 0 0 16px; letter-spacing:-.03em; line-height:1.05}
.page-head .lede{font-size: 18px; color: var(--ink-soft); max-width: 780px; margin:0 0 18px; line-height:1.55}
.page-head .crumbs{margin-bottom: 16px}
.page-head .stat-row{display:flex; gap: 20px; flex-wrap: wrap; margin-top:20px; padding-top:20px; border-top: 1px solid var(--line)}
.page-head .stat-row .stat{display:flex; flex-direction:column}
.page-head .stat-row .stat strong{font-size:22px; font-family:'Plus Jakarta Sans',sans-serif}
.page-head .stat-row .stat span{font-size:12.5px; color: var(--muted); text-transform:uppercase; letter-spacing:.1em}

/* ---------- Pagination ---------- */
.pagination{display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-top: 44px}
.pg{display:inline-flex; min-width: 40px; height:40px; padding: 0 14px; align-items:center; justify-content:center; border-radius: 10px; border:1px solid var(--line); background:#fff; color: var(--ink); font-weight:600; font-size: 14px}
.pg:hover{border-color: var(--indigo); text-decoration:none; color: var(--indigo-deep)}
.pg-current{background: var(--ink); color:#fff; border-color: var(--ink)}
.pg-ellipsis{padding: 0 6px; color: var(--muted); align-self:center}

/* ---------- Detail page ---------- */
.detail-head{padding: 56px 0 28px; background: var(--surface-soft)}
.detail-grid{display:grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items:start}
.detail-thumb{aspect-ratio: 16/9; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); background:#fff; border:1px solid var(--line)}
.detail-thumb svg{width:100%; height:100%}
.thumb-strip{display:grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px}
.strip-item{aspect-ratio: 16/9; border-radius: 8px; overflow:hidden; border:1px solid var(--line); background:#fff}
.strip-item svg{width:100%; height:100%}
.crumbs{font-size: 13px; color: var(--muted); margin-bottom: 12px; display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.crumbs a{color: var(--ink-soft); font-weight:500}
.crumbs a:hover{color: var(--indigo-deep); text-decoration:none}
.crumbs .sep{color: var(--muted); opacity:.6}
.detail-copy h1{font-size: clamp(28px, 3.6vw, 42px); margin: 6px 0 16px; letter-spacing:-.025em; line-height:1.1}
.detail-copy .lede{font-size: 17px; color: var(--ink-soft); margin: 0 0 20px; line-height:1.6}
.detail-tags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 16px}
.tag{display:inline-flex; align-items:center; padding: 7px 14px; border-radius:999px; background:#fff; border:1px solid var(--line); color: var(--ink); font-weight:600; font-size: 13px}
.tag-muted{color: var(--muted)}
.tag:hover{text-decoration:none; border-color: var(--indigo)}
.palette-row{display:flex; align-items:center; gap:12px; margin: 14px 0 24px}
.cta-row{display:flex; gap: 12px; flex-wrap:wrap; margin-bottom: 14px}
.spec{display:grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; font-size: 14px}
.spec dt{color: var(--muted)}
.spec dd{margin: 0; font-weight:600}

/* ---------- Prose ---------- */
.prose{background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 36px 40px}
.prose.narrow{max-width: 760px}
.prose h2{font-size: 26px; margin: 32px 0 14px; letter-spacing:-.02em}
.prose h2:first-child{margin-top: 0}
.prose h3{font-size: 19px; margin: 26px 0 10px; letter-spacing:-.015em}
.prose p{margin: 0 0 16px; color: var(--ink-soft); font-size: 16.5px; line-height: 1.75}
.prose ul,.prose ol{margin: 0 0 18px; padding-left: 22px}
.prose li{margin: 8px 0; color: var(--ink-soft); line-height:1.6}
.prose .lede{font-size: 18.5px; color: var(--ink); font-style: italic}
.prose .pbn-inline-note{padding: 14px 18px; border-left: 3px solid var(--indigo); background: var(--gradient-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 15px; color: var(--ink-soft); margin: 22px 0}
.slide-list{list-style:none; counter-reset: slide; padding:0; margin: 14px 0 22px; display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px}
.slide-list li{counter-increment: slide; background: var(--surface-soft); padding: 12px 14px 12px 44px; border-radius: var(--radius-sm); position:relative; font-weight:600; font-size: 14px; color: var(--ink); margin:0}
.slide-list li::before{content: counter(slide, decimal-leading-zero); position:absolute; left: 14px; top: 12px; color: var(--indigo-deep); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums}

/* ---------- Footer ---------- */
.site-footer{background: linear-gradient(180deg, #07070d 0%, #0d0d18 100%); color: #C7D2FE; padding: 64px 0 28px; margin-top: 0}
.footer-grid{display:grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 36px}
.footer-grid h4{color:#fff; font-size: 12.5px; text-transform: uppercase; letter-spacing:.14em; margin: 0 0 16px; font-family:'Inter',sans-serif; font-weight:700}
.footer-grid ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 10px}
.footer-grid a{color:#C7D2FE; font-size: 14px}
.footer-grid a:hover{color:#fff}
.footer-tag{color:#9AA3C7; font-size: 14px; margin: 14px 0 0; max-width: 360px; line-height:1.6}
.footer-recommended a{color:#A5B4FC}
.footer-recommended a:hover{color:#C4B5FD}
.footer-bottom{border-top:1px solid rgba(255,255,255,.10); margin-top: 44px; padding-top: 24px; color: #6B7591; font-size: 12.5px}
.footer-bottom a{color:#9AA3C7}

/* ---------- Search ---------- */
.search-form{display:flex; gap: 8px; max-width: 640px; margin: 18px 0 0}
.search-form input{flex:1; padding: 14px 18px; border: 1px solid var(--line); border-radius: 999px; font: inherit; background:#fff}
.search-form input:focus{outline:none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(99,102,241,.18)}
.search-form button{padding:14px 24px; border:0; background: var(--gradient); color:#fff; border-radius:999px; font-weight:700; cursor:pointer; font:inherit}

/* ---------- Responsive ---------- */
@media (max-width: 1080px){
  .layout-with-sidebar{grid-template-columns: 1fr; gap: 32px}
  .sidebar{order: 2}
  .footer-grid{grid-template-columns: 1fr 1fr 1fr}
  .container{max-width: 100%}
  .primary-nav{gap: 18px}
  .primary-nav a{font-size: 14px}
}
@media (max-width: 920px){
  .two-col{grid-template-columns: 1fr; gap: 32px}
  .detail-grid{grid-template-columns: 1fr; gap:28px}
  .footer-grid{grid-template-columns: 1fr 1fr; gap: 28px}
  .primary-nav{display:none}
  .header-search input{width: 200px}
  .header-inner{gap: 16px}
  .hero{padding: 60px 0 40px}
  .hero-stats{gap: 28px}
  .hero-stats strong{font-size: 26px}
  .hero-grid-preview{padding: 0 0 60px}
  .band{padding: 64px 0}
  .band-head{margin-bottom: 28px}
  .prose{padding: 28px 22px}
  .prose p{font-size: 16px; line-height: 1.72}
  .page-head{padding: 56px 0 28px}
  .detail-head{padding: 40px 0 24px}
  .cta{padding: 64px 0}
  .site-footer{padding: 52px 0 24px}
  .tax-grid{grid-template-columns: 1fr}
  .collection-grid{grid-template-columns: 1fr}
  .post-grid{grid-template-columns: 1fr}
  .tpl-grid{grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px}
}
@media (max-width: 560px){
  .footer-grid{grid-template-columns: 1fr; gap: 32px}
  .band{padding: 48px 0}
  .header-search{display:none}
  .hero{padding: 44px 0 32px}
  .hero h1{font-size: clamp(30px, 8vw, 38px); line-height:1.05}
  .hero .lede{font-size: 15.5px; padding: 0 4px}
  .hero-stats{gap: 18px; margin-top: 28px}
  .hero-stats strong{font-size: 22px}
  .hero-stats span{font-size: 11px}
  .hero-eyebrow{font-size: 11px; padding: 6px 12px; margin-bottom: 18px}
  .hero-quick-cats{gap: 6px; padding: 0 14px; margin: 0 auto 32px}
  .hero-quick-cats a{padding: 7px 12px; font-size: 12.5px}
  .hero-cta{flex-direction: column; align-items: stretch; padding: 0 14px}
  .hero-cta .btn{width: 100%}
  .container{padding: 0 18px}
  .header-inner{padding: 12px 16px; gap: 12px}
  .brand-name{font-size: 17px}
  .slide-list{grid-template-columns: 1fr}
  .tpl-grid{grid-template-columns: 1fr; gap: 16px}
  .tpl-card{border-radius: 14px}
  .page-head{padding: 40px 0 22px}
  .page-head .stat-row{gap: 14px}
  .page-head .stat-row .stat strong{font-size: 18px}
  .prose{padding: 22px 18px; border-radius: 12px}
  .prose h2{font-size: 22px; margin: 26px 0 12px}
  .prose h3{font-size: 17px}
  .prose p{font-size: 15.5px}
  .detail-thumb{border-radius: 12px}
  .thumb-strip{grid-template-columns: repeat(2, 1fr)}
  .cta h2{font-size: 26px}
  .cta p{font-size: 15px}
  .btn{width: auto; padding: 12px 20px; font-size: 14px}
  .cta-row{flex-direction: column; align-items: stretch}
  .cta-row .btn{width: 100%}
  .pagination{gap: 4px}
  .pg{min-width: 36px; height: 36px; padding: 0 10px; font-size: 13px}
  .footer-grid{padding: 0 4px}
  .crumbs{font-size: 12px}
}