html { scroll-behavior: smooth; }
body {
  margin: 0; padding: 0;
  font-family: 'Space Grotesk', sans-serif;
  background: var(--paper); color: var(--ink);
  -webkit-font-smoothing: antialiased;
  --paper: #F4F1EA; --paper2: #ECE7DD;
  --ink: #191713; --ink2: #57534A; --ink3: #6E6759;
  --terra: #C2410C;
  --terra-deep: color-mix(in srgb, var(--terra) 78%, #000);
  --terra-tint: color-mix(in srgb, var(--terra) 8%, transparent);
  --sage: #6B7F5E; --gold: #B98A2F;
  --line: rgba(25,23,19,.12);
  --glass: rgba(255,255,255,.55); --glass-border: rgba(255,255,255,.8);
  --glass-shadow: 0 20px 60px -20px rgba(30,25,15,.18);
  --clay: #FFFFFF;
  --clay-shadow: 0 18px 40px -14px rgba(30,25,15,.22), inset 0 2px 6px rgba(255,255,255,.9), inset 0 -3px 8px rgba(30,25,15,.06);
  transition: background .5s ease, color .5s ease;
}
body[data-theme="dark"] {
  --paper: #12100D; --paper2: #1A1713;
  --ink: #F3EFE7; --ink2: #ABA396; --ink3: #8F8778;
  --terra: #E8632C;
  --terra-deep: color-mix(in srgb, var(--terra) 80%, #fff);
  --line: rgba(243,239,231,.14);
  --glass: rgba(255,255,255,.05); --glass-border: rgba(255,255,255,.12);
  --glass-shadow: 0 20px 60px -20px rgba(0,0,0,.55);
  --clay: #1E1A15;
  --clay-shadow: 0 18px 40px -14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
}
::selection { background: var(--terra); color: #F4F1EA; }
[data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
[data-reveal][data-on="1"] { opacity: 1; transform: none; }
/* ported from the AI India page: blur-rise reveal + staggered children */
[data-blur] { opacity: 0; transform: translateY(20px); filter: blur(10px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), filter .9s cubic-bezier(.16,1,.3,1); }
[data-blur][data-on="1"] { opacity: 1; transform: none; filter: none; }
[data-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
[data-stagger][data-on="1"] > * { opacity: 1; transform: none; }
[data-stagger][data-on="1"] > *:nth-child(1){transition-delay:.00s}
[data-stagger][data-on="1"] > *:nth-child(2){transition-delay:.07s}
[data-stagger][data-on="1"] > *:nth-child(3){transition-delay:.14s}
[data-stagger][data-on="1"] > *:nth-child(4){transition-delay:.21s}
[data-stagger][data-on="1"] > *:nth-child(5){transition-delay:.28s}
[data-stagger][data-on="1"] > *:nth-child(6){transition-delay:.35s}
.dn-featured:hover { transform: translateY(-6px); box-shadow: 0 34px 80px -28px rgba(30,25,15,.34); }
.dn-featured:hover .dn-featured-cta { background: var(--terra); transform: translateY(-2px); }
.dn-h24:hover { color: var(--terra) !important; }
[data-photo] img { transition: transform .6s ease; }
[data-photo]:hover img { transform: scale(1.045); }
[data-photo] figcaption { transform: translateY(120%); transition: transform .45s cubic-bezier(.16,1,.3,1); }
[data-photo]:hover figcaption { transform: none; }
[data-draw] path, [data-draw] circle, [data-draw] line, [data-draw] ellipse { stroke-dasharray: 320; stroke-dashoffset: 320; transition: stroke-dashoffset 1.7s cubic-bezier(.16,1,.3,1) .15s; }
[data-draw][data-on="1"] path, [data-draw][data-on="1"] circle, [data-draw][data-on="1"] line, [data-draw][data-on="1"] ellipse { stroke-dashoffset: 0; }
#dn-cheese { cursor: pointer; }
#dn-cheese .dn-bread-top { transition: transform .85s cubic-bezier(.34,1.3,.5,1); transform-origin: 88% 100%; }
#dn-cheese:hover .dn-bread-top { transform: translateY(-56px) rotate(-8deg); }
#dn-cheese .dn-pull { opacity: 0; transition: opacity .45s ease .1s; }
#dn-cheese:hover .dn-pull { opacity: 1; }
#dn-cheese .dn-str { transform: scaleY(.06); transform-origin: top; transition: transform .9s cubic-bezier(.22,1.4,.36,1); display: flex; flex-direction: column; align-items: center; }
#dn-cheese:hover .dn-str { transform: scaleY(1); }
#dn-cheese .dn-str:nth-child(1) { transition-delay: .04s; }
#dn-cheese .dn-str:nth-child(2) { transition-delay: .16s; }
#dn-cheese .dn-str:nth-child(3) { transition-delay: 0s; }
#dn-cheese .dn-str:nth-child(4) { transition-delay: .22s; }
#dn-cheese .dn-str:nth-child(5) { transition-delay: .1s; }
@keyframes dn-cheese-wobble { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.93); } }
#dn-cheese:hover .dn-str { animation: dn-cheese-wobble 2.4s ease-in-out .9s infinite; }
@keyframes dn-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
@keyframes dn-pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--terra) 45%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } }
@keyframes dn-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes dn-cue { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
@keyframes dn-blob { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-40px,30px) scale(1.08); } }
.dn-smoke { animation: dn-smoke 1.5s ease-out infinite; opacity: 0; }
@keyframes dn-smoke { 0% { transform: translate(0,0) scale(.4); opacity: .7; } 100% { transform: translate(20px,-12px) scale(1.7); opacity: 0; } }
@keyframes dn-spin-wheel { from { transform: rotateX(90deg) rotate(0); } to { transform: rotateX(90deg) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-blur], [data-stagger] > * { opacity: 1; transform: none; filter: none; transition: none; }
  * { animation-duration: .01s !important; animation-iteration-count: 1 !important; }
}
@media (max-width: 1180px) {
  #dn-chip1, #dn-chip3 { display: none; }
}
@media (max-width: 1320px) {
  #dn-chip4, #dn-chip5, #dn-chip6 { display: none; }
}
@media (max-width: 1180px) {
  #dn-chip7, #dn-chip8 { display: none; }
}
@media (max-width: 1100px) {
  .dn-cards3 { grid-template-columns: repeat(2, 1fr) !important; }
  .dn-bento > * { grid-column: span 6 !important; }
  .dn-grid2 { grid-template-columns: 1fr !important; }
}
@media (max-width: 860px) {
  nav[aria-label="Main"] > div { display: none !important; }
  nav[aria-label="Main"] { gap: 12px !important; padding: 8px 8px 8px 18px !important; }
  #dn-kart-layer, #dn-chip2 { display: none !important; }
  header#top { height: auto !important; min-height: 100vh; padding-bottom: 90px; }
  [data-parallax="0.09"] { position: relative !important; left: 0 !important; top: 0 !important; width: auto !important; margin: 108px 22px 0 !important; }
  img[data-parallax="0.04"] { position: relative !important; display: block !important; right: auto !important; bottom: auto !important; margin: 36px auto 0 !important; width: 74vw !important; height: 48vh !important; }
  .dn-about-grid, .dn-acc-grid, .dn-cards3, .dn-cols3, .dn-projects { grid-template-columns: 1fr !important; }
  .dn-featured-grid { grid-template-columns: 1fr !important; gap: 26px !important; }
  .dn-bento { display: flex !important; flex-direction: column !important; }
  .dn-bento > figure { height: 300px !important; }
  .dn-bento > div { min-height: 230px; }
  #dn-kart-park { position: relative !important; right: auto !important; top: auto !important; margin-top: 14px; }
  .dn-timeline-row { grid-template-columns: 74px 18px 1fr !important; gap: 0 12px !important; }
}
.dn-h0:hover{color:var(--terra) !important}
.dn-h1:hover{color:var(--terra) !important}
.dn-h2:hover{color:var(--terra) !important}
.dn-h3:hover{color:var(--terra) !important}
.dn-h4:hover{color:var(--terra) !important}
.dn-h5:hover{background:var(--terra) !important}
.dn-h6:hover{transform:rotate(180deg) !important}
.dn-h7:hover{background:var(--terra) !important;transform:translateY(-3px) !important}
.dn-h8:hover{color:var(--terra) !important;border-color:var(--terra) !important}
.dn-h9:hover{transform:translateY(-7px) !important;border-color:var(--terra) !important}
.dn-h10:hover{transform:translateY(-7px) !important;border-color:var(--terra) !important}
.dn-h11:hover{transform:translateY(-6px) !important}
.dn-h12:hover{transform:translateY(-6px) !important}
.dn-h13:hover{transform:translateY(-6px) !important}
.dn-h14:hover{transform:translateY(-6px) !important}
.dn-h15:hover{transform:translateY(-6px) !important}
.dn-h16:hover{transform:translateY(-6px) !important}
.dn-h17:hover{transform:translateY(-6px) !important}
.dn-h18:hover{transform:translateY(-6px) !important}
.dn-h19:hover{transform:translateY(-6px) !important}
.dn-h20:hover{background:var(--terra-deep) !important;transform:translateY(-3px) !important}
.dn-h21:hover{color:var(--terra) !important}
.dn-h22:hover{color:var(--terra) !important}
.dn-h23:hover{color:var(--terra-deep) !important}
.dn-seg { flex:1; padding:12px 18px; border-radius:100px; border:none; cursor:pointer;
  font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  background:transparent; color:var(--ink2); transition:background .3s ease, color .3s ease; white-space:nowrap; }
.dn-seg-on { background:var(--terra); color:#F4F1EA; }
a:focus-visible, button:focus-visible { outline:2px solid var(--terra); outline-offset:3px; border-radius:6px; }
.dn-skip { position:absolute; left:-9999px; top:0; z-index:200; padding:12px 20px; background:var(--terra); color:#F4F1EA; border-radius:0 0 14px 0; font-family:'JetBrains Mono',monospace; font-size:12px; text-decoration:none; }
.dn-skip:focus { left:0; }
.dn-hresume:hover { background: var(--terra) !important; color: #F4F1EA !important; transform: translateY(-3px); }

@media (min-width: 861px) and (max-width: 1180px) {
  [data-parallax="0.09"] { width: min(48vw, 900px) !important; }
}
/* 2. 360px: segmented toggle must not clip */
@media (max-width: 480px) {
  .dn-seg { padding: 11px 8px; font-size: 10px; letter-spacing: .05em; white-space: normal; }
}
/* 3. mobile: About collage fluid, no fixed px overflow */
@media (max-width: 860px) {
  .dn-about-grid img { width: 100% !important; height: auto !important; }
  .dn-about-grid > div > div:last-child img { max-height: 420px; object-fit: cover; }
}

/* ---- mobile hero reflow: headline first, photo below, no dead space ---- */
@media (max-width: 860px) {
  header#top {
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    height: auto !important;
    min-height: 100svh;
    padding: 96px 0 70px !important;
  }
  /* headline / kicker / CTA block comes first */
  header#top [data-parallax="0.09"] {
    order: 1;
    position: relative !important;
    left: 0 !important; top: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 22px;
  }
  /* photo second, sized so it never dominates the fold */
  header#top img[data-parallax="0.04"] {
    order: 2;
    position: relative !important;
    display: block !important;
    right: auto !important; bottom: auto !important;
    margin: 34px auto 0 !important;
    width: 74vw !important;
    max-width: 360px;
    height: 42vh !important;
    max-height: 440px;
  }
  /* watermark can't sit behind a centered photo cleanly — footer wordmark keeps the motif */
  header#top div[data-parallax="-0.1"] { display: none !important; }
  #dn-scroll-cue { display: none !important; }
  /* drive the go-kart on mobile too, so "the kart you just scrolled with" is true;
     JS controls opacity/parking, and reduced-motion users get the parked kart via the JS guard */
  #dn-kart-layer { display: block !important; }
}
/* small screens: CTA pills stay readable, never letter-wrap */
@media (max-width: 480px) {
  header#top a[href="#connect"], header#top a[href="#now"] { padding: 13px 22px !important; font-size: 14.5px !important; white-space: nowrap; }
  header#top [data-parallax="0.09"] > div:first-child { font-size: 10.5px !important; padding: 8px 14px !important; }
}