*,*::before,*::after{box-sizing:border-box}
html,body{font-family:'DM Sans',sans-serif}
h1,h2,h3,h4,h5,h6{font-family:'PT Sans',sans-serif}
body{transition:background-color .3s,color .3s}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E")}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#FF6B2B;border-radius:99px}
.progress-bar{position:fixed;top:0;left:0;height:3px;background:#FF6B2B;z-index:100;transition:width .1s linear}
.nl{position:relative}.nl::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1.5px;background:currentColor;transition:width .22s cubic-bezier(.4,0,.2,1)}.nl:hover::after{width:100%}
.shimmer{position:relative;overflow:hidden}.shimmer::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:rgba(255,255,255,.18);transform:skewX(-20deg);transition:left .4s cubic-bezier(.4,0,.2,1)}.shimmer:hover::after{left:160%}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .55s cubic-bezier(.4,0,.2,1),transform .55s cubic-bezier(.4,0,.2,1)}
.reveal.visible{opacity:1;transform:none}
.card-h{transition:transform .28s cubic-bezier(.4,0,.2,1),border-color .18s}.card-h:hover{transform:translateY(-4px)}
/* Article prose */
.prose-article h2{font-family:'PT Sans',sans-serif;font-size:1.6rem;font-weight:700;color:inherit;margin:2.5rem 0 1rem;line-height:1.25}
.prose-article h3{font-family:'PT Sans',sans-serif;font-size:1.2rem;font-weight:700;margin:2rem 0 .75rem;line-height:1.3;color:#FF6B2B}
.prose-article p{margin:0 0 1.4rem;line-height:1.8;color:#52525b}
.dark .prose-article p{color:#a1a1aa}
.prose-article ul{margin:0 0 1.4rem 1.5rem;list-style:disc}
.prose-article li{margin-bottom:.4rem;line-height:1.7;color:#52525b}
.dark .prose-article li{color:#a1a1aa}
.prose-article pre{background:#18181b;color:#e4e4e7;border-radius:12px;padding:1.25rem 1.5rem;overflow-x:auto;font-size:.85rem;line-height:1.7;margin:0 0 1.6rem}
.prose-article code:not(pre code){background:#f4f4f5;color:#FF6B2B;padding:.15em .4em;border-radius:4px;font-size:.875em}
.dark .prose-article code:not(pre code){background:#27272a}
.prose-article blockquote{border-left:3px solid #FF6B2B;padding:.75rem 1.25rem;margin:0 0 1.6rem;background:#fff7f4;border-radius:0 8px 8px 0}
.dark .prose-article blockquote{background:#27272a}
.prose-article blockquote p{color:#52525b;font-style:italic;margin:0}
.dark .prose-article blockquote p{color:#a1a1aa}
.prose-article a{color:#FF6B2B;text-decoration:underline;text-underline-offset:3px}
.prose-article hr{border:none;border-top:1px solid #e4e4e7;margin:2.5rem 0}
.dark .prose-article hr{border-top-color:#27272a}
[x-cloak]{display:none!important}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ═══ GLOBAL: images auto-fit ═══ */
img{max-width:100%;height:auto}

/* ═══ MOBILE (< 768px) ═══ */
@media(max-width:767px){
  /* Justify paragraph text */
  p:not(.no-justify){text-align:justify}

  /* Reduce section vertical spacing */
  section{padding-top:2rem!important;padding-bottom:2rem!important}
  .py-24{padding-top:2rem!important;padding-bottom:2rem!important}
  .py-14{padding-top:1.75rem!important;padding-bottom:1.75rem!important}
  .mb-14{margin-bottom:1.5rem!important}
  .mb-10{margin-bottom:1.25rem!important}
  .pt-36{padding-top:5.5rem!important}
  .pt-32{padding-top:5rem!important}

  /* Tighter horizontal padding */
  .max-w-6xl.mx-auto.px-6,
  .max-w-4xl.mx-auto.px-6,
  .max-w-3xl.mx-auto.px-6{padding-left:1.125rem!important;padding-right:1.125rem!important}

  /* Section headings */
  h1.text-4xl,h1.text-5xl,h1.md\:text-5xl,h1.md\:text-6xl{font-size:1.75rem!important;line-height:1.15!important}
  h2.text-4xl,h2.md\:text-5xl{font-size:1.5rem!important}

  /* Card grids → single column */
  .grid.md\:grid-cols-3,
  .grid.md\:grid-cols-2{grid-template-columns:1fr!important}
  .gap-6{gap:0.75rem!important}
  .gap-5{gap:0.625rem!important}

  /* Article prose */
  .prose-cs p,.prose-article p{font-size:0.875rem!important;line-height:1.7!important;margin-bottom:1rem!important}
  .prose-cs h2,.prose-article h2{font-size:1.25rem!important;margin-top:1.75rem!important}
  .prose-cs h3,.prose-article h3{font-size:1rem!important}
  .prose-cs pre,.prose-article pre{font-size:0.75rem!important;padding:0.875rem!important}

  /* Blog cards on listing page */
  #blog .grid.md\:grid-cols-3{grid-template-columns:1fr!important}

  /* Project mini cards: horizontal layout */
  .mini-proj-card{
    display:flex!important;flex-direction:row!important;
    align-items:flex-start!important;gap:0.75rem!important;padding:0.75rem!important;
  }
  .mini-proj-logo{width:2.5rem!important;height:2.5rem!important;min-width:2.5rem!important;margin-bottom:0!important;flex-shrink:0}
  .mini-proj-body{display:flex;flex-direction:column;min-width:0;flex:1}

  /* Timeline tighter */
  .tl-item .flex-1{padding:0.75rem!important}
  .space-y-4>*+*{margin-top:0.625rem!important}

  /* Contact grid */
  .grid.md\:grid-cols-2{grid-template-columns:1fr!important;gap:1.5rem!important}

  /* Hero case-study header */
  .pt-32.pb-10{padding-top:5rem!important;padding-bottom:0.75rem!important}

  /* Reading progress bar on articles */
  .progress-bar{height:2px}

  /* Marquee cards narrower */
  .marquee-track .w-80{width:15rem!important}
  .marquee-track .w-72{width:14rem!important}
}