/* Puspa Print - Static CSS
   Palette
   Primary  : #1d3c45  -> hsl(193, 41%, 19%)
   Accent   : #d2601a  -> hsl(23, 78%, 46%)
   Bg cream : #fff1e1  -> hsl(32, 100%, 94%)
*/

:root {
  --background: 32 100% 94%;
  --foreground: 193 41% 14%;
  --border: 28 35% 82%;
  --input: 28 35% 82%;
  --ring: 23 78% 46%;
  --card: 32 80% 97%;
  --card-foreground: 193 41% 14%;
  --card-border: 28 35% 82%;
  --primary: 193 41% 19%;
  --primary-foreground: 32 100% 96%;
  --primary-border: 193 41% 11%;
  --secondary: 32 60% 90%;
  --secondary-foreground: 193 41% 19%;
  --muted: 32 50% 88%;
  --muted-foreground: 193 20% 35%;
  --accent: 23 78% 46%;
  --accent-foreground: 32 100% 96%;
  --accent-border: 23 78% 38%;
  --destructive: 0 70% 45%;
  --destructive-foreground: 32 100% 96%;

  --elevate-1: rgba(29, 60, 69, .04);
  --elevate-2: rgba(29, 60, 69, .08);

  --app-font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --app-font-display: 'Space Grotesk', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --radius: 0.375rem;
}

* {
  box-sizing: border-box;
  border-color: hsl(var(--border));
}
*::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--app-font-sans);
  -webkit-font-smoothing: antialiased;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-feature-settings: "ss01", "cv11";
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--app-font-display);
  letter-spacing: -0.02em;
  margin: 0;
  font-weight: 700;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font: inherit; color: inherit; }

.font-display { font-family: var(--app-font-display); }

.container-px { padding-left: 1.25rem; padding-right: 1.25rem; }
@media (min-width: 640px) { .container-px { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .container-px { padding-left: 3rem; padding-right: 3rem; } }

.max-w-page { max-width: 1240px; margin-left: auto; margin-right: auto; }

/* Subtle paper grain on cream surfaces */
.grain {
  position: relative;
  isolation: isolate;
}
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(hsl(var(--primary) / 0.04) 1px, transparent 1px);
  background-size: 3px 3px;
  z-index: -1;
}

/* Hover elevate */
.hover-elevate {
  position: relative;
  z-index: 0;
  transition: background-color 0.15s ease;
}
.hover-elevate::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  transition: background-color 0.15s ease;
}
.hover-elevate:hover::after { background-color: var(--elevate-1); }
.hover-elevate:active::after { background-color: var(--elevate-2); }

/* Hide scrollbar */
.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { scrollbar-width: none; }

/* Line clamp */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* WhatsApp bubble ping */
@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}
.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }

/* Sticky nav offset for portfolio/article filter bar */
.sticky-below-nav { position: sticky; top: 64px; z-index: 30; }
@media (min-width: 640px) { .sticky-below-nav { top: 72px; } }

/* Article body line height */
.article-body p { font-size: 1rem; line-height: 1.75; }
@media (min-width: 640px) { .article-body p { font-size: 1.125rem; } }