/* ============================================================
   tw-utils.css — Tailwind CDN replacement
   Only the tw- classes actually used across blog pages.
   Eliminates the https://cdn.tailwindcss.com redirect error.
   ============================================================ */

/* Display */
.tw-flex          { display: flex; }
.tw-flex-col      { flex-direction: column; }
.tw-flex-wrap     { flex-wrap: wrap; }
.tw-items-center  { align-items: center; }
.tw-justify-center{ justify-content: center; }
.tw-block         { display: block; }
.tw-relative      { position: relative; }
.tw-grid          { display: grid; }
.tw-grid-cols-1   { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.tw-overflow-hidden { overflow: hidden; }

/* Borders & shape */
.tw-rounded-2xl   { border-radius: 1rem; }

/* Text */
.tw-text-center   { text-align: center; }
.tw-uppercase     { text-transform: uppercase; }
.tw-font-extrabold{ font-weight: 800; }
.tw-leading-none  { line-height: 1; }
.tw-text-xs       { font-size: 0.75rem; line-height: 1rem; }
.tw-tracking-widest { letter-spacing: 0.1em; }
.tw-text-gold     { color: #D4AF37; }
.tw-font-syne     { font-family: 'Syne', sans-serif; }

/* Margin */
.tw-mb-3  { margin-bottom: 0.75rem; }
.tw-mb-4  { margin-bottom: 1rem; }
.tw-mb-5  { margin-bottom: 1.25rem; }
.tw-mb-6  { margin-bottom: 1.5rem; }
.tw-mb-8  { margin-bottom: 2rem; }
.tw-mb-10 { margin-bottom: 2.5rem; }
.tw-mb-12 { margin-bottom: 3rem; }
.tw-mt-12 { margin-top: 3rem; }
.tw-mt-14 { margin-top: 3.5rem; }
.tw-mt-16 { margin-top: 4rem; }
.tw-my-12 { margin-top: 3rem; margin-bottom: 3rem; }
.tw-mx-auto { margin-left: auto; margin-right: auto; }
.tw-mr-2  { margin-right: 0.5rem; }

/* Padding */
.tw-pt-8  { padding-top: 2rem; }
.tw-p-12  { padding: 3rem; }

/* Gap */
.tw-gap-2 { gap: 0.5rem; }
.tw-gap-3 { gap: 0.75rem; }
.tw-gap-4 { gap: 1rem; }
.tw-gap-5 { gap: 1.25rem; }
.tw-gap-6 { gap: 1.5rem; }

/* Responsive breakpoints */
@media (min-width: 640px) {
  .sm\:tw-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:tw-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .md\:tw-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lg\:tw-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}